/* Neural Silk stays inside the existing hero composition. */
.field-surface {
  overflow: hidden;
  background: transparent;
  touch-action: pan-y pinch-zoom;
}
.field-surface.dragging { touch-action: pan-y pinch-zoom; }
.field-interact {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.field-interact:focus-visible {
  outline: 2px solid #d5bf90;
  outline-offset: -5px;
  background: #d5bf9005;
}
.field-surface.dragging .field-interact,
.field-surface.is-focusing .field-interact { cursor: crosshair; }
.field-surface > .field-reset { z-index: 6; min-width: 44px; min-height: 44px; }

/* Only the fabric fades at its edges; controls and hints stay crisp. */
.field-surface > canvas,
.field-surface > .silk-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
  filter: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 48%, #000 64%, #000000c9 80%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 48%, #000 64%, #000000c9 80%, transparent 100%);
}
.silk-fallback { z-index: 0; opacity: .9; }
.silk-fallback > svg { display: block; width: 100%; height: 100%; }
.silk-fallback[hidden] { display: none; }
.field-hint[hidden], #practice-field[hidden] { display: none !important; }
.field-surface::before,
.field-surface::after,
.field-crosshair,
.field-coordinate,
.field-graduations,
.field-glow { display: none; }

.field-hint {
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  max-width: calc(100% - 56px);
  pointer-events: none;
  text-shadow: 0 1px 8px #04090ae6;
}
.field-hint > span { opacity: 1; line-height: 1.4; }
#field-caption { color: #e4cb96; font-size: 9px; letter-spacing: 1.7px; }
#field-touch-hint { color: #b5bcb7; font-family: var(--sans); font-size: 10px; letter-spacing: .2px; text-transform: none; }
@media (max-width: 760px) {
  #studio-backdrop { display: block; }
  #mobile-diagram-background { pointer-events: auto; }
  #mobile-diagram-background > .practice-instrument { pointer-events: auto; }
  #mobile-diagram-background .field-surface { opacity: 1; pointer-events: auto; cursor: pointer; touch-action: pan-y pinch-zoom; }
  #mobile-diagram-background::after { display: none; }
  #mobile-diagram-background .field-hint { display: grid; justify-items: center; gap: 3px; left: 0; right: 0; bottom: 2px; width: 100%; max-width: none; padding: 0 2px; text-align: center; line-height: 1.35; }
  #mobile-diagram-background #field-caption { font-size: 8px; }
  #mobile-diagram-background #field-touch-hint { font-size: 8px; letter-spacing: 0; }
}

/* Mobile: the organism sits beside the headline and is free to spill behind the text — no mask, no edge, no hint. */
@media (max-width: 760px) {
  #mobile-diagram-background { overflow: visible; z-index: 0; }
  #mobile-diagram-background::after { display: none; }
  #mobile-diagram-background .field-surface { inset: -30% -80%; width: auto; height: auto; overflow: visible; }
  #mobile-diagram-background .field-surface > canvas { -webkit-mask-image: none; mask-image: none; }
  #mobile-diagram-background .field-interact { inset: 18.75% 30.8%; width: auto; height: auto; }
  #mobile-diagram-background .field-hint { display: none; }
  .hero-copy > h1, .hero-copy > .hero-description, .hero-copy > .hero-actions, .hero-copy > .hero-credit-signature, .mobile-hero-eyebrow { position: relative; z-index: 2; }
}

/* The companion: leave the hero and the form docks in the corner, changing with the section you read. */
@media (min-width: 761px) {
  #practice-field.companion {
    position: fixed; inset: auto 22px 22px auto; width: 168px; height: 168px; z-index: 30;
    pointer-events: auto; cursor: pointer; opacity: 1;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, #000000b3 60%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 50%, #000 42%, #000000b3 60%, transparent 74%);
    animation: companion-in .5s ease-out;
  }
  @keyframes companion-in { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
  body.modal-open #practice-field.companion { opacity: 0; pointer-events: none; }
  .field-surface.docked .field-hint, .field-surface.docked .field-reset, .field-surface.docked .field-coordinate, .field-surface.docked .field-glow { visibility: hidden; }
  .field-surface.docked .field-interact { cursor: default; }
  /* perspective/transform on the surface would trap a fixed child inside it; clear them while docked */
  .field-surface.docked { perspective: none; transform: none; filter: none; will-change: auto; }
}
@media (prefers-reduced-motion: reduce) { #practice-field.companion { animation: none; } }

/* The studio clock. */
.studio-clock { margin-left: 14px; margin-right: auto; color: #8f7f57; font-size: 7px; letter-spacing: 1.3px; white-space: nowrap; }
@media (max-width: 980px) { .studio-clock { display: none; } }

/* No WebGL: the studio rests, with a glow and one line, instead of an empty box. */
.field-surface.is-static .field-glow { display: block; opacity: 1; }
.field-surface.is-static::after {
  content: "THE LIVING STUDIO RESTS HERE · THIS BROWSER HAS NO WEBGL"; display: block; position: absolute; left: 0; right: 0; bottom: 20px;
  width: auto; height: auto; background: none; text-align: center; font: 7px/1.6 Consolas, monospace; letter-spacing: 1.2px; color: #8a8f8a;
}