/* ============================================================
   SAGE DESK — Story 3
   Design language inherited from the FE Lobby (US2): void ground,
   halo cyan, Cabinet Grotesk display over Satoshi, JetBrains Mono
   for HUD micro-text. All interior sizing is container-query based
   so the whole interface scales as one unit on any screen.
   Target breakpoints: phone portrait and tablet portrait.
   ============================================================ */

:root {
  --void:  #04070b;
  --deep:  #071219;
  --halo:  #4ee6ff;
  --ice:   #dff7ff;
  --ember: #ffc98a;
  --alarm: #ff7d6b;

  --font-dis:  'Cabinet Grotesk', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.16, 1.3, .3, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* blurred fill behind the letterbox on viewports wider than 9:16 */
.bleed {
  position: fixed; inset: 0; z-index: 0;
  background: var(--void) url('../assets/sage-desk-poster.jpg') center / cover no-repeat;
  filter: blur(46px) saturate(.7) brightness(.32);
  transform: scale(1.12);
}

/* ---------- the stage: a 9:16 field, everything inside is cq-scaled ---------- */
.stage {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: calc(100dvh * 9 / 16);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  container-type: size;
  background: var(--void);
  box-shadow: 0 0 80px rgba(0, 0, 0, .8);
}
@media (min-aspect-ratio: 9/16) {
  .stage { width: auto; height: 100dvh; }
}

/* ---------- video plate ---------- */
.plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.86) saturate(1.12) contrast(1.06);
}
/* Scrim keeps chrome legible without hiding the room. The middle band is
   deliberately near-transparent so the plate is never buried. */
.plate__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,6,11,.88) 0%, rgba(2,6,11,.42) 14%,
      rgba(2,6,11,.10) 30%, rgba(2,6,11,.10) 58%, rgba(2,6,11,.58) 78%,
      rgba(2,6,11,.92) 100%),
    radial-gradient(120% 60% at 50% 32%, rgba(6,26,38,.34), transparent 70%);
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the plasma canvas that renders SAGE's filament shell. Sized to its own
   orb container; drawn with additive compositing on a transparent ground so
   it glows over the video without any blend mode on the element itself. */

/* the luminous body: milky interior, hard bright limb, blown-out centre.
   Pure CSS so it composites once per frame and leaves the entire script
   budget to the filament mesh drawn over it. */
.lorb__body, .orb__body {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    /* the limb: brightest thing after the core, and what makes the shell
       read as a sphere rather than a disc of noise */
    radial-gradient(circle,
      rgba(255, 255, 255, .00) 50%,
      rgba(214, 246, 255, .16) 66%,
      rgba(232, 251, 255, .40) 80%,
      rgba(246, 254, 255, .66) 90%,
      rgba(255, 255, 255, .96) 97%,
      rgba(255, 255, 255, 1) 99.3%,
      rgba(255, 255, 255, 0) 100%),
    /* the milky interior volume */
    radial-gradient(circle,
      rgba(240, 253, 255, .46) 0%,
      rgba(216, 246, 255, .30) 40%,
      rgba(198, 240, 255, .23) 70%,
      rgba(182, 234, 255, .14) 90%,
      transparent 100%);
  animation: orbBreath 6.4s var(--ease) infinite;
}
.orb__body { animation-duration: 5.2s; }

/* breathing: the whole shell swells and settles, brightening as it fills.
   Slow enough to read as respiration rather than a throb. */
@keyframes orbBreath {
  0%, 100% { transform: scale(1);     opacity: .88; }
  46%      { transform: scale(1.055); opacity: 1; }
}

.pcv {
  position: absolute; inset: -30%; width: 160%; height: 160%;
  animation: orbBreath 6.4s var(--ease) infinite;
}
.orb .pcv { animation-duration: 5.2s; }

/* ============================================================
   TOP RAIL
   ============================================================ */
.rail {
  position: absolute;
  top: calc(2.2cqh + env(safe-area-inset-top, 0px));
  left: 4cqw; right: 4cqw;
  display: flex; align-items: flex-start; gap: 2.4cqw;
  z-index: 6;
}

/* BACK / HOME — the Fields Enterprises, Global seal, matching the master.
   The control is a column: seal disc on top, a quiet HOME caption under it.
   Only the height grows, so the rail's horizontal budget is untouched. */
.back {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5cqh;
  flex: 0 0 auto;
  text-decoration: none; color: var(--ice);
  padding: 0;
  transition: transform .2s var(--spring);
}
.back__disc {
  /* the seal is its own badge, so the disc carries no chrome of its own --
     it exists to hold the 44px touch floor and centre the artwork */
  width: max(52px, 13cqw); height: max(52px, 13cqw);
  display: grid; place-items: center;
  border-radius: 50%;
  transition: box-shadow .2s var(--ease);
}
.back__cap {
  font: 500 max(9px, 2.05cqw)/1 var(--font-mono);
  letter-spacing: .2em; text-indent: .2em;
  color: rgba(200, 240, 252, .62);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
.back:active { transform: scale(.94); }
.back:active .back__disc { box-shadow: 0 0 3.4cqw -.5cqw rgba(78, 230, 255, .8); }
.back:active .dseal { filter: drop-shadow(0 0 8px rgba(120, 220, 255, .9)) brightness(1.12); }

/* the seal. A dark rim shadow separates the navy sunburst from the video
   behind it, plus a faint cyan halo so the mark belongs to the desk. */
.dseal {
  width: 100%; height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .95))
          drop-shadow(0 0 5px rgba(78, 200, 255, .40));
}

/* live tag */
.live {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.4cqw;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  height: max(46px, 11.6cqw);
  font: 500 max(10.5px, 2.32cqw)/1 var(--font-mono);
  letter-spacing: .16em;
  color: rgba(223, 247, 255, .74);
  white-space: nowrap;
}
.live b { overflow: hidden; text-overflow: ellipsis; }
.live i {
  flex: 0 0 auto;
  width: max(6px, 1.5cqw); height: max(6px, 1.5cqw); border-radius: 50%;
  background: #6bf29a;
  box-shadow: 0 0 8px rgba(107, 242, 154, .9);
  animation: blip 2.2s var(--ease) infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .34; } }

/* utility chips — sound + language moved up here to free the bottom dash */
/* pinned right with an auto margin rather than relying on .live to fill the
   gap -- .live is hidden on the landing, which used to collapse the chips
   back against the seal and left the rail visibly lopsided */
.util { display: flex; align-items: center; gap: 1.6cqw; flex: 0 0 auto; margin-left: auto; }
.chip {
  position: relative;
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 1.1cqw;
  height: max(46px, 11.6cqw);
  min-width: max(46px, 11.6cqw);
  padding: 0 max(10px, 2.2cqw);
  border: 1px solid rgba(120, 232, 255, .30);
  border-radius: 100px;
  background: rgba(4, 12, 19, .58);
  backdrop-filter: blur(7px);
  color: var(--ice);
  transition: transform .16s var(--spring), border-color .2s var(--ease), background .2s var(--ease);
}
.chip svg { width: max(18px, 4.4cqw); height: max(18px, 4.4cqw); }
.chip b { font: 500 max(11px, 2.4cqw)/1 var(--font-mono); letter-spacing: .1em; }
.chip:active { transform: scale(.9); border-color: rgba(190, 250, 255, .9); }
.chip[aria-pressed="false"] { color: rgba(223, 247, 255, .40); border-color: rgba(120, 232, 255, .16); }
.chip[aria-pressed="true"]  .snd__off { display: none; }
.chip[aria-pressed="false"] .snd__on  { display: none; }

/* the auto-detect indicator on the language chip */
.chip__auto {
  position: absolute; top: -.4cqw; right: -.4cqw;
  width: 2.2cqw; height: 2.2cqw; border-radius: 50%;
  background: var(--halo);
  box-shadow: 0 0 7px rgba(78, 230, 255, .95);
  border: 1px solid rgba(4, 12, 19, .9);
}
body.lang-manual .chip__auto { background: var(--ember); box-shadow: 0 0 7px rgba(255, 201, 138, .9); }

/* ============================================================
/* ============================================================
   LANDING STATE — SAGE DESK 1
   Zone map, as percentages of stage height, read off the supplied
   reference frame:
     rail        2.2 - 7.4
     plasma orb   24 - 40
     wordmark     42 - 51
     sub-line     53 - 57
     open plate   57 - 72   (holographic table, never covered)
     entry panel  72 - 82
     disclaimer     93
   ============================================================ */
.land { position: absolute; inset: 0; z-index: 5; }

/* ---------- PLASMA ORB ----------
   Deliberately a different organism from the entanglement sphere: an
   electrical discharge rather than a polished ball. Built from two
   counter-rotating conic ray fields, radially masked so the filaments
   dissolve before the rim, over a hot core. No mix-blend-mode. */
.lorb {
  position: absolute;
  top: 17.5cqh; left: 50%;
  transform: translateX(-50%);
  width: min(66cqw, 30cqh); aspect-ratio: 1;
  display: grid; place-items: center;
}
.lorb > span { position: absolute; border-radius: 50%; }
.lorb__glow {
  inset: -42%;
  background:
    radial-gradient(circle, rgba(140, 238, 255, .40),
      rgba(78, 230, 255, .13) 42%, transparent 66%),
    radial-gradient(circle, rgba(3, 9, 15, .62) 32%,
      rgba(3, 9, 15, .28) 48%, transparent 64%);
  animation: lorbBreath 5.6s var(--ease) infinite;
}
.lorb__ring {
  inset: 0;
  /* the limb ring. The canvas draws its own rim glow; this keeps a crisp
     one-pixel silhouette on top of it so the sphere still has an edge. */
  border: 0;
  box-shadow: 0 0 6cqw -1.6cqw rgba(150, 240, 255, .55);
}
.lorb__core {
  /* a diffuse hot centre, as in the reference frame, rather than a hard
     white disc. Composited by CSS so it never accumulates on the canvas. */
  width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle,
    #ffffff 0%, rgba(255, 255, 255, .88) 7%, rgba(226, 250, 255, .40) 22%,
    rgba(140, 234, 255, .16) 46%, rgba(78, 230, 255, .05) 66%, transparent 80%);
  animation: lorbCore 2.6s var(--ease) infinite;
}
@keyframes lorbBreath { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes lorbSpin   { to { transform: rotate(360deg); } }
@keyframes lorbCore   { 0%, 100% { transform: scale(1); opacity: .86; } 50% { transform: scale(1.13); opacity: 1; } }

/* ---------- WORDMARK ---------- */
.land__type {
  position: absolute;
  top: 50cqh; left: 7cqw; right: 7cqw;
  text-align: center;
}
.land__h {
  margin: 0;
  font: 800 11cqw/1.02 var(--font-dis);
  letter-spacing: -.024em;
  text-shadow: 0 0 34px rgba(78, 230, 255, .30), 0 2px 20px rgba(0, 0, 0, .82);
}
.land__h span { display: block; color: #ffffff; }
.land__h em {
  display: block; font-style: normal;
  color: #7fe4f8;
  text-shadow: 0 0 30px rgba(78, 230, 255, .5), 0 2px 20px rgba(0, 0, 0, .8);
}
.land__sub {
  margin: 1.9cqh auto 0; max-width: 78cqw;
  font: 400 4.4cqw/1.42 var(--font-body);
  color: rgba(240, 252, 255, .95);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(2, 8, 13, .95), 0 0 2.6cqw rgba(2, 8, 13, .85);
}

/* ---------- ENTRY PANEL ---------- */
.lpanel {
  position: absolute;
  top: 72cqh; left: 9cqw; right: 9cqw;
  appearance: none; cursor: pointer;
  overflow: hidden;
  display: grid; justify-items: center; gap: .5cqh;
  padding: 2.2cqh 5cqw 2cqh;
  border: 0;
  border-radius: 6px;
  /* deliberately no backdrop-filter: the reference panel is a bracketed
     frame the holographic table reads straight through, and blurring the
     plate here turned it into an opaque slab across the table. */
  background: linear-gradient(180deg, rgba(4, 14, 22, .30), rgba(4, 14, 22, .06));
  color: #eafcff;
  transition: transform .16s var(--spring), background .2s var(--ease);
}
.lpanel__brk {
  position: absolute;
  width: 6.4cqw; height: 6.4cqw;
  border: 1.5px solid rgba(170, 245, 255, .85);
}
.lpanel__brk--tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.lpanel__brk--tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.lpanel__brk--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.lpanel__brk--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
.lpanel__mic {
  width: 5.4cqw; height: 5.4cqw;
  color: rgba(200, 248, 255, .95);
  filter: drop-shadow(0 0 4px rgba(78, 230, 255, .8));
}
.lpanel__h {
  font: 800 6.6cqw/1.04 var(--font-dis);
  letter-spacing: .012em;
  text-align: center;
  text-shadow: 0 0 26px rgba(78, 230, 255, .34), 0 2px 14px rgba(0, 0, 0, .8);
}
.lpanel__sub {
  font: 500 max(10px, 2.36cqw)/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .24em; text-indent: .24em;
  color: rgba(200, 244, 255, .90);
}
.lpanel__ripple {
  position: absolute; inset: 0;
  background: radial-gradient(58% 150% at 50% 50%, rgba(120, 236, 255, .40), transparent 72%);
  opacity: 0; transform: scale(.4);
}
.lpanel:active { transform: scale(.972); background: linear-gradient(180deg, rgba(10, 30, 44, .58), rgba(10, 30, 44, .26)); }
.lpanel.is-fire .lpanel__ripple { animation: ripple .62s var(--ease) 1; }
.lpanel.is-fire .lpanel__brk { border-color: #ffffff; }

.land__sim {
  position: absolute;
  bottom: calc(3.2cqh + env(safe-area-inset-bottom, 0px));
  left: 7cqw; right: 7cqw;
  margin: 0; text-align: center;
  font: 500 italic max(10px, 2.5cqw)/1.3 var(--font-body);
  color: rgba(226, 248, 255, .82);
  text-shadow: 0 1px 10px rgba(2, 8, 13, .95);
}

/* ============================================================
   ENTANGLEMENT INTERFACE
   Zone map, as percentages of stage height, taken from the doodle:
     rail          2 - 9
     header        11 - 21    (green)
     orb           25 - 44    (blue)
     message box   52 - 68    (red)
     open plate    68 - 82    left clear, never covered
     tap to speak  82 - 88
     dash          89 - 98
   ============================================================ */
.ent { position: absolute; inset: 0; z-index: 5; }

/* ---------- GREEN: header, dropped away from the top edge and enlarged ---------- */
.ehead {
  position: absolute;
  top: 11cqh; left: 0; right: 0;
  text-align: center;
}
.ehead__word {
  margin: 0;
  font: 800 15.6cqw/.92 var(--font-dis);
  letter-spacing: .06em; text-indent: .06em;
  color: #f2feff;
  text-shadow: 0 0 6cqw rgba(78, 230, 255, .55), 0 0 1.6cqw rgba(78, 230, 255, .9),
               0 3px 20px rgba(0, 0, 0, .85);
}
.ehead__sub {
  margin: 1.1cqh 0 0;
  font: 500 max(11px, 2.6cqw)/1 var(--font-mono);
  letter-spacing: .40em; text-indent: .40em;
  color: rgba(150, 240, 255, .88);
}
.ehead__rule {
  display: block;
  width: 26cqw; height: 1px;
  margin: 1.7cqh auto 0;
  background: linear-gradient(90deg, transparent, rgba(78, 230, 255, .85), transparent);
}

/* ---------- BLUE: the orb, lifted into the upper field ---------- */
.orbz {
  position: absolute;
  top: 22cqh; left: 0; right: 0;
  display: grid; justify-items: center; gap: 1.2cqh;
}
.orb {
  position: relative;
  width: min(74cqw, 33cqh); height: min(74cqw, 33cqh);
  display: grid; place-items: center;
  color: rgba(150, 240, 255, .9);
}
.orb__glow {
  position: absolute; inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 230, 255, .30), rgba(78, 230, 255, .07) 46%, transparent 70%);
  animation: orbBreath 5.2s var(--ease) infinite;
}
.orb__rim {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 0;
  box-shadow: 0 0 5cqw -1.6cqw rgba(150, 240, 255, .5);
}
.orb__core {
  position: absolute;
  width: 52%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%, rgba(255, 255, 255, .86) 7%, rgba(226, 250, 255, .38) 22%,
    rgba(140, 234, 255, .15) 46%, rgba(78, 230, 255, .05) 66%, transparent 80%);
  animation: orbCore 2.8s var(--ease) infinite;
}
.orb__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(150, 240, 255, .40);
}
.orb__ring--a { inset: -2%;  border-style: solid; animation: orbSpin 26s linear infinite reverse; border-top-color: rgba(226,253,255,.95); }
.orb__ring--b { inset: -14%; border-style: dashed; opacity: .5; animation: orbSpin 44s linear infinite; }
.orb__ring--c { inset: -24%; border-style: solid; opacity: .22; }
.orb__wave { position: absolute; inset: -24%; width: auto; height: auto; }
.orb__trace {
  stroke-dasharray: 6 94;
  stroke-linecap: round;
  animation: orbTrace 6s linear infinite;
  opacity: .85;
}
@keyframes orbBreath { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.11); opacity: 1; } }
@keyframes orbSpin   { to { transform: rotate(360deg); } }
@keyframes orbCore   { 0%, 100% { transform: scale(1); opacity: .84; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes orbTrace  { to { stroke-dashoffset: -100; } }

/* orb modes */
.orb[data-mode="listening"] { color: #9df3b9; }
.orb[data-mode="listening"] .orb__glow { animation-duration: 1.5s; background: radial-gradient(circle, rgba(107, 242, 154, .34), rgba(107, 242, 154, .08) 46%, transparent 70%); }
.orb[data-mode="listening"] .orb__ring--a { animation-duration: 7s; border-top-color: #9df3b9; }
.orb[data-mode="listening"] .orb__rim { border-color: rgba(157, 243, 185, .62); }
.orb[data-mode="listening"] .orb__core { animation-duration: .9s; }
.orb[data-mode="thinking"] .orb__ring--b { animation-duration: 8s; opacity: .85; }
.orb[data-mode="speaking"] .orb__core { animation-duration: .48s; }
.orb[data-mode="speaking"] .orb__glow { animation-duration: 1.1s; }

.orbz__mode {
  margin: 0;
  font: 500 max(11px, 2.5cqw)/1 var(--font-mono);
  letter-spacing: .34em; text-indent: .34em;
  color: rgba(178, 245, 255, .95);
  text-shadow: 0 0 1.6cqw rgba(4, 16, 24, .95), 0 1px 6px rgba(0, 0, 0, .9);
}

/* ---------- RED: the message box, dropped below the orb ---------- */
.msg {
  position: absolute;
  top: 60cqh; left: 7cqw; right: 7cqw;
  padding: 2.4cqh 5cqw 1.8cqh;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(3, 11, 18, .82), rgba(3, 11, 18, .66));
  border: 1px solid rgba(120, 232, 255, .22);
  box-shadow: 0 0 5cqw -2cqw rgba(78, 230, 255, .40), 0 10px 34px rgba(0, 0, 0, .55);
}
.msg__brk {
  position: absolute; width: 3.4cqw; height: 3.4cqw;
  border: 1.6px solid rgba(160, 244, 255, .95);
}
.msg__brk--tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.msg__brk--tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.msg__brk--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.msg__brk--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
.msg__who {
  margin: 0 0 1cqh;
  font: 500 max(10.5px, 2.34cqw)/1 var(--font-mono);
  letter-spacing: .30em; text-indent: .30em;
  color: rgba(120, 232, 255, .9);
}
.msg__body {
  margin: 0;
  font: 400 3.72cqw/1.44 var(--font-body);
  color: #eafcff;
  min-height: 3em;
  text-wrap: pretty;
}
.msg__meta {
  margin: 1.4cqh 0 0;
  font: 400 max(10px, 2.2cqw)/1 var(--font-mono);
  letter-spacing: .14em;
  color: rgba(223, 247, 255, .48);
}

/* ---------- TAP TO SPEAK ---------- */
.tap {
  position: absolute;
  top: 82cqh; left: 7cqw; right: 7cqw;
  height: 6.4cqh;
  appearance: none; cursor: pointer;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 100px;
  border: 1.5px solid rgba(150, 244, 255, .78);
  background: rgba(6, 22, 32, .66);
  backdrop-filter: blur(8px);
  color: #eafcff;
  box-shadow: 0 0 4cqw -1.4cqw rgba(78, 230, 255, .68);
  transition: transform .16s var(--spring), border-color .2s var(--ease);
}
.tap__cap {
  position: relative; z-index: 2;
  font: 700 3.4cqw/1 var(--font-body);
  letter-spacing: .28em; text-indent: .28em;
}
.tap__ripple {
  position: absolute; inset: 0;
  background: radial-gradient(60% 140% at 50% 50%, rgba(78, 230, 255, .34), transparent 70%);
  opacity: 0; transform: scale(.4);
}
.tap:active { transform: scale(.975); border-color: #eafcff; }
.tap.is-hot { border-color: #9df3b9; box-shadow: 0 0 5cqw -1cqw rgba(107, 242, 154, .8); }
.tap.is-hot .tap__ripple {
  background: radial-gradient(60% 140% at 50% 50%, rgba(107, 242, 154, .34), transparent 70%);
  animation: ripple 1.5s var(--ease) infinite;
}
@keyframes ripple {
  0%   { opacity: 0;   transform: scale(.5); }
  45%  { opacity: .95; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* ---------- CONTROL DASH — three wide targets ---------- */
.dash {
  position: absolute;
  bottom: calc(2.2cqh + env(safe-area-inset-bottom, 0px));
  left: 7cqw; right: 7cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqw;
}
.ctl {
  appearance: none; cursor: pointer;
  min-height: 7.6cqh;
  display: grid; place-items: center; gap: .5cqh;
  padding: 1cqh .6cqw;
  border-radius: 14px;
  border: 1px solid rgba(120, 232, 255, .26);
  background: rgba(4, 12, 19, .62);
  backdrop-filter: blur(8px);
  color: var(--ice);
  transition: transform .16s var(--spring), border-color .18s var(--ease), background .18s var(--ease);
}
.ctl svg { width: 6.4cqw; height: 6.4cqw; }
.ctl b {
  font: 500 max(11px, 2.44cqw)/1 var(--font-mono);
  letter-spacing: .13em;
  white-space: nowrap;
}
.ctl:active { transform: scale(.94); border-color: rgba(190, 250, 255, .95); background: rgba(10, 30, 42, .78); }
.ctl--mic[aria-pressed="true"]  { border-color: rgba(107, 242, 154, .5); color: #cdfade; }
.ctl--mic[aria-pressed="true"]  .mic__slash { display: none; }
.ctl--mic[aria-pressed="false"] { color: rgba(223, 247, 255, .42); }
.ctl--end { border-color: rgba(255, 125, 107, .40); color: #ffd2c9; }
.ctl--end:active { border-color: var(--alarm); background: rgba(48, 12, 8, .8); }

/* ============================================================
   LANGUAGE SHEET
   ============================================================ */
.sheet {
  position: absolute; inset: 0; z-index: 20;
  display: grid; align-items: end;
  background: rgba(2, 6, 11, .62);
  backdrop-filter: blur(3px);
  animation: fade .22s var(--ease) both;
}
.sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet__panel {
  background: rgba(4, 12, 19, .95);
  border-top: 1px solid rgba(120, 232, 255, .36);
  border-radius: 20px 20px 0 0;
  padding: 3cqh 6cqw calc(3.4cqh + env(safe-area-inset-bottom, 0px));
  animation: rise .3s var(--spring) both;
  max-height: 82cqh; overflow-y: auto;
}
@keyframes rise { from { transform: translateY(16%); opacity: .4; } }
.sheet__top { display: flex; align-items: center; gap: 3cqw; }
.sheet__top h2 {
  margin: 0;
  font: 700 4.2cqw/1 var(--font-dis);
  letter-spacing: .2em;
}
.sheet__x {
  margin-inline-start: auto;
  appearance: none; cursor: pointer;
  width: 9cqw; height: 9cqw;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(120, 232, 255, .3);
  background: rgba(8, 22, 32, .8);
  color: var(--ice);
}
.sheet__x svg { width: 4.4cqw; height: 4.4cqw; }
.sheet__note {
  margin: 2cqh 0 0;
  font: 400 3cqw/1.5 var(--font-body);
  color: rgba(223, 247, 255, .72);
}
.sheet__auto { margin-top: 2.4cqh; }
.auto {
  width: 100%;
  appearance: none; cursor: pointer; text-align: start;
  display: grid; gap: .6cqh;
  padding: 1.9cqh 4cqw;
  border-radius: 12px;
  border: 1.5px solid rgba(120, 232, 255, .26);
  background: rgba(8, 22, 32, .7);
  color: var(--ice);
}
.auto b { font: 500 3cqw/1 var(--font-mono); letter-spacing: .14em; }
.auto span { font: 400 max(12px, 2.7cqw)/1.3 var(--font-body); color: rgba(223, 247, 255, .6); }
.auto[aria-pressed="true"] {
  border-color: rgba(150, 244, 255, .95);
  box-shadow: 0 0 3.4cqw -1cqw rgba(78, 230, 255, .6);
}
.langs {
  list-style: none; margin: 2.4cqh 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw;
}
.langs button {
  width: 100%;
  appearance: none; cursor: pointer; text-align: start;
  display: grid; gap: .3cqh;
  padding: 1.6cqh 3.4cqw;
  border-radius: 10px;
  border: 1px solid rgba(120, 232, 255, .2);
  background: rgba(8, 22, 32, .6);
  color: var(--ice);
}
.langs button b { font: 500 3cqw/1.2 var(--font-body); }
.langs button i {
  font: 400 max(10px, 2.24cqw)/1 var(--font-mono);
  letter-spacing: .12em; font-style: normal;
  color: rgba(223, 247, 255, .5);
}
.langs button[aria-current="true"] {
  border-color: rgba(150, 244, 255, .9);
  background: rgba(12, 40, 54, .85);
}
.sheet__src {
  margin: 2.4cqh 0 0;
  font: 400 max(10px, 2.2cqw)/1.5 var(--font-mono);
  letter-spacing: .1em;
  color: rgba(223, 247, 255, .42);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: absolute;
  left: 50%; bottom: 24cqh;
  transform: translate(-50%, 10px);
  z-index: 30;
  padding: 1.4cqh 4.6cqw;
  border-radius: 100px;
  border: 1px solid rgba(120, 232, 255, .4);
  background: rgba(4, 12, 19, .92);
  font: 500 2.6cqw/1 var(--font-mono);
  letter-spacing: .14em;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--spring);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   STATE SWITCHING
   ============================================================ */
body.state-land  .ent { display: none; }
body.state-land  .live { display: none; }
body.state-entangle .land { display: none; }

/* copy-slot inspector: highlights every string awaiting Dee's verbiage */
body.show-slots [data-copy] {
  outline: 1px dashed rgba(255, 201, 138, .9);
  outline-offset: 2px;
  background: rgba(255, 201, 138, .10);
}

/* ============================================================
   FOCUS + MOTION
   ============================================================ */
:where(a, button):focus-visible {
  outline: 2px solid #9ff0ff;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .orb__glow, .orb__core, .orb__ring, .orb__trace, .orb__body,
  .live i, .tap.is-hot .tap__ripple,
  .lorb__glow, .lorb__core, .lorb__body, .pcv,
  .lpanel.is-fire .lpanel__ripple {
    animation: none !important;
  }
  .sheet, .sheet__panel { animation: none !important; }
}