/* THE SUIT → startup outpost — codedparagon concept */

:root {
  --space: #0C1017;
  --navy: #172F54;
  --steel: #4B525A;
  --amber: #B5763A;
  --blue: #185DA5;
  --cyan: #1AA8E1;
  --glow: #0BD4FB;
  --aqua: #3FE0BE;
  --mist: #B6CDD0;
  --white: #F8F8F8;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--space);
  color: var(--white);
  font-family: 'Anybody', sans-serif;
  font-variation-settings: 'wdth' 92;
  overflow: hidden;
}

/* world canvas — held dark behind the suit until the visor opens onto it */
#cosmos {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .9s ease;
}
#cosmos.shown { opacity: 1; }

/* ---------- LANDING (the pixel board) ---------- */

.landing {
  position: fixed; inset: 0;
  z-index: 20;
  will-change: transform, opacity;
}

/* the astronaut, full-bleed and turnable */
.landing__hero {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(120vh 100vh at 50% 46%, rgba(23,47,84,.42), transparent 62%),
    var(--space);
}
.landing__hero.grabbing { cursor: grabbing; }

/* the hero copy sits low so the suit's head + visor read clear above it —
   the wordmark grounds the page instead of crowding the helmet */
.landing__copy {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 11vh;
  text-align: center;
  pointer-events: none;
}
.landing__copy > * { pointer-events: auto; }

/* wordmark — Inter, medium, tightly tracked. The letters are painted by a
   canvas of pixel cubes (main.js): each time the signature symbol changes it
   picks a new colour that cascades cube-by-cube across the word, so several
   colours are always in flight — a slow, living colour mesh. The DOM text is
   kept (transparent) for layout + screen readers; the canvas paints over it. */
.wordmark {
  position: fixed;            /* the future nav mark — anchored top-left no matter what */
  top: 1.05rem; left: 1.65rem;
  z-index: 6;
  display: inline-block;
  pointer-events: none;          /* let the suit be dragged from anywhere, incl. the corner */
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(74,144,226,.28));
  isolation: isolate;
}
.landing .wordmark::before {
  content: "";
  position: absolute;
  inset: -.38rem -.55rem;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8,13,20,.46), rgba(8,13,20,.18));
  border: 1px solid rgba(182,205,208,.09);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
          backdrop-filter: blur(7px) saturate(1.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(248,248,248,.05);
  opacity: 0;
}
.wordmark__cv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* the period is the company signature, rebuilt as a little voxel display:
   a grid of pixel blocks that re-forms into each code glyph as it cycles
   (main.js drives it). Absolutely placed at the end of the wordmark so it
   aligns with the title without ever pushing it out of the way. */
.wordmark__dot {
  position: absolute;
  left: calc(100% + .14em);
  top: 50%;
  transform: translateY(-46%);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: .028em;
  width: .57em; height: .84em;
}
.wordmark__dot .px {
  border-radius: .012em;
  background: var(--dot-color, var(--glow));
  opacity: 0;
  transform: scale(.5);
  box-shadow: 0 0 .1em rgba(11,212,251,.6);
  transition: opacity .19s var(--ease-out), transform .19s var(--ease-out);
  will-change: opacity, transform;
}

/* ---------- THE DOORPLATE: the wordmark is the studio's front door ---------- */
.wordmark { cursor: pointer; pointer-events: auto; }
.wordmark__back { position: absolute; left: -0.08em; top: 50%; transform: translateY(-46%); width: 1.5em; height: 1.05em; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.wordmark.armed .wordmark__back { opacity: 1; }
.wordmark.armed .wordmark__cv, .wordmark.armed .wordmark__dot { opacity: .2; transition: opacity .22s ease; }
.wordmark:focus-visible { outline: 2px solid var(--glow); outline-offset: 7px; border-radius: 6px; }
body.panel-open .landing .wordmark,
body.panel-open .landing .landing__copy,
body.panel-open .landing .beam-modes,
.landing.connecting .wordmark {
  opacity: 0;
  pointer-events: none;
  animation: none;
  visibility: hidden;
}
.landing.connecting .landing__copy {
  opacity: 0;
  pointer-events: none;
  animation: none;
  visibility: hidden;
}
body.panel-open .doormenu:not(.doormenu--hud) {
  display: none;
}

.doormenu {
  position: fixed; top: 3.5rem; left: 1.7rem; z-index: 7; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.doormenu[hidden] { display: none; }
/* the HUD wears the same doorplate, sized for the top bar and stacked above the HUD (30) but below the panel (40) */
.wordmark--hud {
  position: relative; top: auto; left: auto; z-index: auto;
  display: inline-flex; align-items: center;
  pointer-events: auto; cursor: pointer;
  font-size: 1.05rem; font-weight: 500; font-variation-settings: 'wdth' 116;
  color: rgba(248,248,248,.94);
  background: linear-gradient(180deg, rgba(10,16,23,.56), rgba(10,16,23,.32));
  border: 1px solid rgba(182,205,208,.14);
  border-radius: 999px;
  padding: .46rem .74rem;
  min-height: 36px;
  filter: none;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(248,248,248,.08);
  -webkit-appearance: none; appearance: none; animation: none;
}
.wordmark--hud:hover,
.wordmark--hud.armed {
  color: var(--white);
  border-color: rgba(182,205,208,.3);
  background: linear-gradient(180deg, rgba(12,18,26,.72), rgba(12,18,26,.42));
}
.wordmark--hud .wordmark__cv,
.wordmark--hud .wordmark__back { display: block; }
.wordmark--hud .wordmark__dot { display: grid; }
.doormenu--hud { top: 3.05rem; left: 1.55rem; z-index: 32; }
.doorrow {
  display: inline-flex; align-items: center; gap: .7rem; padding: .34rem .62rem;
  border-radius: 10px; cursor: pointer; font-family: inherit; color: var(--white);
  background: rgba(12,16,23,0); border: 1px solid transparent;
  transition: background .2s ease, border-color .25s var(--ease-out), translate .25s var(--ease-out), box-shadow .25s ease;
}
.doorrow:hover, .doorrow.is-active {
  background: rgba(12,16,23,.52); border-color: rgba(182,205,208,.18); translate: 4px 0;
  backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 6px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(248,248,248,.1);
}
.doorrow__cv { display: block; height: 20px; }
.doorrow__sub { font-size: .64rem; letter-spacing: .05em; color: var(--mist); opacity: .42; transition: opacity .2s ease; white-space: nowrap; font-variation-settings: 'wdth' 90; }
.doorrow:hover .doorrow__sub, .doorrow.is-active .doorrow__sub { opacity: .85; }
.doorrow:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.doorrow--ghost { opacity: 0; transition: opacity .3s ease; }   /* the hidden /start — ignites on direct hover */
.doorrow--ghost:hover, .doorrow--ghost:focus-visible { opacity: 1; }

/* About / Studio info panels (read-only manifestos) */
.info__lede { font-size: 1.02rem; font-weight: 360; line-height: 1.7; color: rgba(248,248,248,.9); max-width: 54ch; margin-top: .4rem; }
.info__lede + .info__lede { margin-top: 1.1rem; }
.info__lede strong { font-weight: 600; color: var(--white); }
.info__rule { margin: 1.8rem 0; border: none; border-top: 1px solid rgba(182,205,208,.14); }

.panel__glass[data-status="info"] .panel__body {
  position: relative;
  isolation: isolate;
}
.panel__glass[data-status="info"] .panel__body > * {
  position: relative;
  z-index: 1;
}
.panel__glass[data-status="info"] .panel__body::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -1.6rem;
  top: .6rem;
  width: min(44vw, 360px);
  height: min(48vh, 410px);
  pointer-events: none;
  opacity: .26;
  mix-blend-mode: screen;
  background:
    linear-gradient(135deg,
      transparent 0 26%,
      color-mix(in srgb, var(--app-accent, var(--glow)) 34%, transparent) 32%,
      rgba(255,255,255,.26) 35%,
      color-mix(in srgb, var(--aqua) 24%, transparent) 38%,
      transparent 44% 100%) 0 0 / 190% 190%,
    repeating-linear-gradient(135deg,
      transparent 0 18px,
      color-mix(in srgb, #8FE8FF 18%, transparent) 18px 21px,
      transparent 21px 42px),
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--app-accent, var(--glow)) 78%, #fff) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.82) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--aqua) 70%, #fff) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 42%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 66% 58%, color-mix(in srgb, var(--app-accent, var(--glow)) 74%, #fff) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 70%, rgba(255,255,255,.66) 0 1.5px, transparent 2.5px);
  filter: saturate(1.18) drop-shadow(0 0 22px color-mix(in srgb, var(--app-accent, var(--glow)) 38%, transparent));
  -webkit-mask-image: radial-gradient(closest-side at 64% 42%, #000 0 64%, rgba(0,0,0,.52) 78%, transparent 100%);
          mask-image: radial-gradient(closest-side at 64% 42%, #000 0 64%, rgba(0,0,0,.52) 78%, transparent 100%);
  animation: infoSignalBloom 3.2s steps(18, end) infinite;
}

@keyframes infoSignalBloom {
  0% { background-position: -30% -18%, -22px -22px, 16% 18%, 28% 24%, 38% 34%, 52% 42%, 66% 58%, 78% 70%; opacity: .06; transform: translate(-8px, -8px) scale(.96); }
  18% { opacity: .3; }
  58% { opacity: .22; }
  100% { background-position: 86% 84%, 28px 28px, 22% 24%, 34% 30%, 44% 40%, 58% 48%, 72% 64%, 84% 76%; opacity: .05; transform: translate(18px, 18px) scale(1.04); }
}
.panel__glass[data-status="info"] .app__kicker {
  color: color-mix(in srgb, var(--app-accent, var(--glow)) 72%, #fff);
  text-shadow: 0 0 18px color-mix(in srgb, var(--app-accent, var(--glow)) 30%, transparent);
  text-transform: none;
}
.panel__glass[data-status="info"] .info__rule {
  height: 1px;
  border: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--app-accent, var(--glow)) 36%, transparent),
      rgba(255,255,255,.18) 42%,
      transparent 100%);
}
.info__closing {
  color: color-mix(in srgb, var(--app-accent, var(--glow)) 34%, var(--white));
}

.caret {
  display: inline-block;
  width: .12em; height: .82em;
  margin-left: .1em;
  background: var(--glow);
  vertical-align: -0.06em;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.ctas { margin-top: 2.4rem; display: flex; gap: 1.1rem; justify-content: center; }

/* liquid-glass pills: a specular highlight tracks the cursor (main.js sets
   --mx/--my), they drift magnetically toward it, breathe a soft aura, and
   de-emphasise each other on hover so the one you're aiming at pops. */
.cta {
  --mx: 50%; --my: 50%;
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: inherit; font-size: 1rem; font-weight: 560;
  font-variation-settings: 'wdth' 100;
  color: var(--white);
  padding: .9rem 1.7rem;
  border-radius: 9999px;
  cursor: pointer;
  border: 1px solid rgba(182,205,208,.16);
  overflow: hidden;
  isolation: isolate;
  scale: 1; translate: 0 0;
  transition: scale .35s var(--ease-out), translate .22s var(--ease-out),
              box-shadow .35s var(--ease-out), opacity .35s ease, filter .35s ease, border-color .35s ease;
}
.cta > * { position: relative; z-index: 1; }
/* cursor-tracked specular highlight */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(150px 150px at var(--mx) var(--my), rgba(255,255,255,.32), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.cta:hover::before { opacity: 1; }
/* liquid-glass rim light: a bright sliver catches the top-left edge and melts
   into the pill's accent around the curve, masked to a 1px ring so it reads as
   a lit glass border. It breathes slowly so the edge feels alive, not painted. */
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(255,255,255,.72), rgba(255,255,255,.12) 30%,
    rgba(255,255,255,0) 52%, var(--rim, rgba(255,255,255,.22)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ctaAura 9s ease-in-out infinite;
}

.cta--primary {
  --rim: rgba(11,212,251,.55);
  background: linear-gradient(160deg, rgba(24,93,165,.55), rgba(11,212,251,.18));
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(248,248,248,.22), inset 0 -10px 22px rgba(12,16,23,.28), 0 10px 36px rgba(24,93,165,.35);
}
.cta--ghost {
  --rim: rgba(181,118,58,.5);
  background: linear-gradient(160deg, rgba(181,118,58,.26), rgba(23,47,84,.34));
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(248,248,248,.14), 0 8px 26px rgba(0,0,0,.3);
}

.cta:hover { scale: 1.04; border-color: rgba(255,255,255,.42); }
.cta--primary:hover { box-shadow: inset 0 1px 0 rgba(248,248,248,.3), 0 12px 46px rgba(11,212,251,.42); }
.cta--ghost:hover { box-shadow: inset 0 1px 0 rgba(248,248,248,.2), 0 12px 38px rgba(181,118,58,.34); }
.cta:active { scale: .96; }
.cta:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* hovering one shrinks + desaturates the other */
.ctas:hover .cta:not(:hover) { opacity: .5; filter: saturate(.65) brightness(.85); scale: .95; }

/* icons */
.cta__arrow { width: 1.05em; height: 1.05em; transition: translate .35s var(--ease-out); }
.cta--ghost:hover .cta__arrow { translate: 4px 0; }      /* Connect → nudges right */
.cta--primary:hover .cta__arrow--up { translate: 0 -4px; } /* Enter ↑ lifts */

@keyframes ctaAura { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* ---- beam-mode rings: swap in for the CTAs only while the beam is firing ---- */
.beam-modes {
  position: fixed;
  left: 50%; bottom: 8vh;
  transform: translateX(-50%) translateY(14px);
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .4s var(--ease-out);
  z-index: 3;
}
.bm-rings { display: flex; align-items: flex-end; gap: 2.6rem; }
.landing.firing .beam-modes { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* animation: none cancels riseIn's filled value so the fade-out can apply */
.landing.firing .ctas { animation: none; opacity: 0; pointer-events: none; transition: opacity .22s ease; }

.bm {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.bm__ring {
  display: block; border-radius: 50%;
  border: 1.5px solid rgba(182,205,208,.5);
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.18), rgba(11,212,251,.06) 60%, transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(8px) saturate(140%);
  transition: transform .28s var(--ease-out), border-color .28s ease, box-shadow .35s ease, background .3s ease;
}
.bm--focus .bm__ring { width: 26px; height: 26px; --bm-glow: rgba(143,224,255,.65); }
.bm--beam  .bm__ring { width: 42px; height: 42px; --bm-glow: rgba(43,200,255,.6); }
.bm--ultra .bm__ring { width: 60px; height: 60px; --bm-glow: rgba(70,120,255,.7); }
.bm__label {
  font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(182,205,208,.55); transition: color .25s ease;
}
.bm:hover .bm__ring, .bm.is-active .bm__ring {
  border-color: rgba(255,255,255,.85);
  transform: scale(1.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 22px 2px var(--bm-glow);
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.42), var(--bm-glow) 64%, transparent 80%);
}
.bm:hover .bm__label, .bm.is-active .bm__label { color: var(--white); }

/* hold-to-remix: a small ring button under the pickers; hover 5s to regenerate */
.remix {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(12,16,23,.5);
  border: 1px solid rgba(182,205,208,.26);
  color: var(--mist);
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(140%);
  transition: color .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.remix:hover { color: var(--white); border-color: rgba(255,255,255,.6); transform: scale(1.07); }
.remix__icon { width: 17px; height: 17px; }
.remix:hover .remix__icon { animation: remixSpin 5s linear infinite; }
@keyframes remixSpin { to { transform: rotate(360deg); } }
.remix__prog { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.remix__prog-track { fill: none; stroke: rgba(182,205,208,.14); stroke-width: 2; }
.remix__prog-fill {
  fill: none; stroke: var(--glow); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 100.5; stroke-dashoffset: 100.5;
  transition: stroke-dashoffset .35s ease;          /* quick reset when you leave */
  filter: drop-shadow(0 0 4px rgba(11,212,251,.7));
}
.remix:hover .remix__prog-fill { stroke-dashoffset: 0; transition: stroke-dashoffset 5s linear; } /* fills over the 5s hold */

/* landing entrance — the suit comes up first, then the wordmark rises from
   below after a beat (matching the site's delayed fade-in), copy cascading after.
   Once settled, a slow specular sheen sweeps across the letters forever. */
.wordmark                  { animation: riseIn .74s var(--ease-out) .28s both; }
.landing__copy .ctas       { animation: riseIn .72s var(--ease-out) .52s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* dive state — copy melts away as the camera plunges into the glass */
.landing.diving .landing__copy,
.landing.diving .wordmark { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.landing.gone { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.landing.gone .landing__copy,
.landing.gone .wordmark,
.landing.gone .beam-modes { visibility: hidden; }

/* ---------- THRESHOLD (the glass moment) ---------- */
#threshold {
  position: fixed; inset: 0; z-index: 24; pointer-events: none;
  display: grid; place-items: center;
}
#threshold::before {
  content: "";
  width: 40vmax; height: 40vmax; border-radius: 50%;
  scale: 0.12; opacity: 0;
  border: 2px solid rgba(143,233,255,.5);
  box-shadow:
    inset 0 0 60px 18px rgba(11,212,251,.22),
    0 0 90px 30px rgba(11,212,251,.14);
  backdrop-filter: blur(3px) saturate(1.8) brightness(1.12);
}
#threshold.run::before { animation: thresholdFade 1.15s var(--ease-out) forwards; }
@keyframes thresholdFade {
  0%   { scale: 0.12; opacity: 0; }
  18%  { opacity: .9; }
  100% { scale: 4.6; opacity: 0; }
}

/* ---------- HUD ---------- */

.hud {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.6rem;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__mark {
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-variation-settings: 'wdth' 116;
  font-size: 1.05rem;
}
.hud__state {
  display: none;
}
.hud[hidden] { display: none; }

/* ---------- STRUCTURE LABELS (projected) ---------- */

.labels { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.label {
  position: absolute;
  --label-accent: var(--glow);
  --lead-len: 0px;
  --lead-angle: 0deg;
  transform: translate(-50%, -100%);
  font-size: .78rem;
  font-weight: 520;
  letter-spacing: .1em;
  color: var(--white);
  padding: .48rem .82rem .44rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(16,24,33,.82), rgba(8,13,20,.72)),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--label-accent) 24%, transparent), transparent 58%);
  backdrop-filter: blur(14px) saturate(155%);
  border: 1px solid color-mix(in srgb, var(--label-accent) 42%, rgba(182,205,208,.16));
  box-shadow:
    0 10px 28px rgba(0,0,0,.24),
    0 0 18px color-mix(in srgb, var(--label-accent) 18%, transparent);
  opacity: 0;
  transition: opacity .4s ease, filter .28s ease, border-color .28s ease;
  white-space: nowrap;
}
.label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: var(--lead-len);
  transform-origin: 50% 0;
  transform: rotate(var(--lead-angle));
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--label-accent) 68%, rgba(246,250,249,.3)),
    color-mix(in srgb, var(--label-accent) 24%, transparent) 52%,
    transparent
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--label-accent) 22%, transparent);
  opacity: var(--lead-opacity, 0);
  pointer-events: none;
}
.label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--label-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--label-accent) 65%, transparent);
  transform: translate(-50%, -50%);
  opacity: var(--lead-opacity, 0);
  pointer-events: none;
}
.label__name {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.label__name::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--label-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--label-accent) 65%, transparent);
}
.label .label__sub {
  display: block;
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--mist);
  margin-top: .1rem;
}
.labels.on .label { opacity: 1; }
.label.hot {
  border-color: color-mix(in srgb, var(--label-accent) 68%, rgba(246,250,249,.2));
  box-shadow:
    0 12px 34px rgba(0,0,0,.28),
    0 0 28px color-mix(in srgb, var(--label-accent) 28%, transparent);
}
.label[data-status="sealed"] {
  color: rgba(246,250,249,.78);
  filter: saturate(.72);
  border-color: color-mix(in srgb, var(--label-accent) 34%, rgba(182,205,208,.2));
}
.label[data-status="sealed"] .label__sub { color: rgba(182,205,208,.58); }
.label[data-status="sealed"] .label__name::before { opacity: .55; box-shadow: none; }
.label[data-status="next"] {
  background:
    linear-gradient(180deg, rgba(18,25,33,.84), rgba(9,14,20,.74)),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--label-accent) 18%, transparent), transparent);
}

/* ---------- PANEL (structure facade → app page) ---------- */

.panel {
  position: fixed; inset: 0;
  z-index: 40;
  display: grid; place-items: center;
  isolation: isolate;
}
.panel[hidden] { display: none; }
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 80% at 50% 38%, rgba(8,14,22,.12), rgba(3,6,10,.42) 76%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
  -webkit-backdrop-filter: blur(2px) saturate(.92) brightness(.88);
          backdrop-filter: blur(2px) saturate(.92) brightness(.88);
}

.panel__glass {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100vw - 3rem));
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  border-radius: 26px;
  padding: 2.6rem 3rem 2.8rem;
  /* San Francisco via the OS system stack — rendered by the device (NOT shipped/hosted,
     so zero font-licensing exposure); falls back to Inter off-Apple. The apps' native face. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Inter', sans-serif;
  background:
    linear-gradient(168deg, rgba(14,21,33,.66), rgba(7,10,16,.82)),
    var(--app-tint, rgba(24,93,165,.08));
  backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(182,205,208,.2);
  box-shadow:
    inset 0 1px 0 rgba(248,248,248,.2),                                            /* top light-catch */
    inset 0 0 0 1px rgba(255,255,255,.04),                                         /* glass thickness */
    inset 0 -18px 40px rgba(12,16,23,.35),
    0 0 80px -16px color-mix(in srgb, var(--app-accent, #1E90FF) 42%, transparent),/* it glows its mood — consistent with the iMentality sheet */
    0 44px 130px rgba(0,0,0,.6);
  transform-origin: var(--from-x, 50%) var(--from-y, 60%);
  animation: facadeMorph .62s var(--ease-ios) both;
}
@keyframes facadeMorph {
  0%   { opacity: 0; transform: scale(.06); border-radius: 6px; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); border-radius: 26px; }
}
.panel.closing .panel__glass { animation: facadeMelt .42s var(--ease-ios) both; }
@keyframes facadeMelt {
  to { opacity: 0; transform: scale(.08); border-radius: 6px; }
}

.panel__close {
  font-family: inherit;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--mist);
  background: none; border: none; cursor: pointer;
  padding: .4rem .2rem;
  margin-bottom: 1.4rem;
}
.panel__close:hover { color: var(--glow); }

.app__kicker {
  font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--app-accent, var(--cyan));
}
.app__name {
  font-size: clamp(2.4rem, 5.6vw, 3.6rem);
  font-weight: 700; letter-spacing: 0; line-height: .98;   /* SF Display, confident editorial scale */
  margin: .45rem 0 .7rem;
}
.app__aphorism {
  font-size: 1.16rem; font-weight: 400; line-height: 1.38; letter-spacing: 0;
  color: rgba(248,248,248,.82);
  margin-bottom: 0;
}
.app__lede { font-size: 1rem; font-weight: 400; line-height: 1.68; color: rgba(248,248,248,.86); max-width: 54ch; }

.app__rooms { margin: 2rem 0 0; display: grid; gap: 0; }
.app__room {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.4rem;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(182,205,208,.12);
  align-items: baseline;
}
.app__room dt { font-weight: 640; font-size: .9rem; color: var(--app-accent, var(--cyan)); letter-spacing: .03em; }
.app__room dd { font-weight: 330; font-size: .9rem; line-height: 1.55; color: rgba(248,248,248,.78); }

.app__status {
  margin-top: 2.2rem;
  display: flex; align-items: center; gap: .65rem;
  font-size: .76rem; letter-spacing: .08em; color: var(--mist);
}
.app__status .lamp {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--app-accent, var(--cyan));
  box-shadow: 0 0 12px var(--app-accent, var(--cyan));
}
.app__status.dim .lamp { background: var(--steel); box-shadow: none; }

/* SEALED / NEXT dock — protected IP, mystery on purpose */
.app__sealed {
  position: relative;
  overflow: hidden;
  margin: 1.9rem 0 0; padding: 2rem 1.6rem; text-align: center;
  border: 1px dashed rgba(182,205,208,.22); border-radius: 16px;
  background: linear-gradient(165deg, rgba(12,16,23,.5), rgba(12,16,23,.28));
}
.app__sealed--redacted::before,
.app__next::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(246,250,249,.035) 12px 13px),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--app-accent) 14%, transparent), transparent 50%);
  opacity: .7;
  pointer-events: none;
}
.app__seal {
  position: relative; display: inline-block; width: 30px; height: 26px; margin-bottom: 1.3rem; border-radius: 4px;
  background: var(--app-accent, #4ECDC4); box-shadow: 0 0 24px color-mix(in srgb, var(--app-accent) 60%, transparent);
}
.app__seal::before {   /* the shackle */
  content: ""; position: absolute; left: 50%; top: -13px; width: 20px; height: 18px;
  border: 3.5px solid var(--app-accent, #4ECDC4); border-bottom: none; border-radius: 10px 10px 0 0; transform: translateX(-50%);
}
.app__seal::after {    /* the keyhole */
  content: ""; position: absolute; left: 50%; top: 8px; width: 5px; height: 11px; background: var(--space);
  transform: translateX(-50%); border-radius: 2px;
}
.app__seal--warm { animation: sealBreathe 2.6s ease-in-out infinite; }
@keyframes sealBreathe { 50% { box-shadow: 0 0 34px var(--app-accent); filter: brightness(1.2); } }
.app__sealed .app__lede { margin: 0 auto; max-width: 46ch; }
.app__sealnote { margin-top: .9rem; font-size: .82rem; font-style: italic; color: var(--mist); opacity: .58; }
.redaction-stack {
  position: relative;
  width: min(360px, 100%);
  margin: 1.35rem auto 0;
  display: grid;
  gap: .55rem;
}
.redaction-stack i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(182,205,208,.09), color-mix(in srgb, var(--app-accent) 28%, rgba(182,205,208,.18)), rgba(182,205,208,.06)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(246,250,249,.08) 18px 19px);
  box-shadow: inset 0 0 0 1px rgba(246,250,249,.05);
  opacity: .72;
}
.redaction-stack i:nth-child(2) { width: 76%; margin-inline: auto; opacity: .55; }
.redaction-stack i:nth-child(3) { width: 54%; margin-inline: auto; opacity: .38; }
.redaction-stack--warm i {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--app-accent) 10%, transparent), color-mix(in srgb, var(--app-accent) 36%, rgba(246,250,249,.14)), color-mix(in srgb, var(--app-accent) 10%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(246,250,249,.08) 18px 19px);
}

.launch-card {
  position: relative;
  overflow: hidden;
  margin: 1.9rem 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.35rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(16,23,32,.76), rgba(8,12,18,.84)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-accent) 16%, transparent), transparent 54%);
  border: 1px solid color-mix(in srgb, var(--app-accent) 26%, rgba(182,205,208,.16));
  box-shadow: inset 0 1px 0 rgba(248,248,248,.08), 0 22px 55px rgba(0,0,0,.34);
}
.launch-card__signal {
  width: 70px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(12,16,23,.62);
  border: 1px solid color-mix(in srgb, var(--app-accent) 30%, rgba(182,205,208,.14));
}
.launch-card__signal i {
  grid-area: 1 / 1;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--app-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--app-accent) 55%, transparent);
  opacity: .78;
}
.launch-card__signal i:nth-child(2) { transform: translate(16px, -10px); opacity: .42; }
.launch-card__signal i:nth-child(3) { transform: translate(-14px, 13px); opacity: .28; }
.launch-card__copy { min-width: 0; }
.launch-card__eyebrow {
  margin: 0 0 .35rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--app-accent) 55%, var(--mist));
}
.launch-card h3 {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.launch-card p:last-child {
  margin: 0;
  max-width: 50ch;
  color: rgba(248,248,248,.74);
  line-height: 1.58;
}
.launch-card--sealed { filter: saturate(.82); }
.launch-card--sealed .launch-card__signal { opacity: .82; }

@media (max-width: 560px) {
  .launch-card {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  .launch-card__signal { width: 58px; }
}

/* Connect form */
.connect__field { margin-top: 1.4rem; }
.connect__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.connect__row .connect__field { margin-top: 1.4rem; }
.connect__field label { display: block; font-size: .74rem; letter-spacing: .12em; color: var(--mist); margin-bottom: .45rem; }
.connect__field textarea, .connect__field input {
  width: 100%;
  font-family: inherit; font-size: .95rem; font-weight: 360;
  color: var(--white);
  background: rgba(12,16,23,.45);
  border: 1px solid rgba(182,205,208,.18);
  border-radius: 12px;
  padding: .85rem 1rem;
  resize: vertical;
  transition: border-color .22s ease, background .22s ease;
}
.connect__field textarea:focus, .connect__field input:focus {
  outline: none; border-color: rgba(11,212,251,.55);
  background: rgba(12,16,23,.6);
}
.connect__actions {
  margin-top: 1.7rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.connect__status {
  font-size: .78rem; font-weight: 330; letter-spacing: .05em;
  color: var(--mist); transition: color .25s ease;
}
.connect__status.ready { color: var(--glow); }
.connect__send { margin: 0; transition: opacity .25s ease, transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s ease; }
.connect__send:disabled { opacity: .4; cursor: not-allowed; }
.connect__send:disabled:hover { transform: none; }

/* sent confirmation */
.connect__confirm { text-align: center; padding: 1.6rem 0 .4rem; }
.connect__check {
  width: 56px; height: 56px; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  font-size: 1.6rem; color: var(--space);
  background: var(--glow); border-radius: 50%;
  box-shadow: 0 0 34px rgba(11,212,251,.45);
  animation: checkPop .5s var(--ease-out) both;
}
@keyframes checkPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.connect__confirm .app__lede { margin: .6rem auto 0; }
.connect__confirm-actions { margin-top: 1.8rem; display: flex; gap: 1rem; justify-content: center; }

@media (max-width: 720px) {
  .connect__row { grid-template-columns: 1fr; gap: 0; }
  .connect__actions { flex-direction: column; align-items: stretch; }
  .connect__send { width: 100%; }
}

/* ---------- THE WINDWARD WINDOW (Connect chamber) ---------- */

/* screen-reader-only live region (intent announcements) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the face turns away with the camera — CTAs slide + fade off to the left
   (the wordmark stays as the persistent brand mark, like the HUD) */
.landing.connecting .landing__copy {
  opacity: 0;
  translate: -38px 0;
  transition: opacity .26s var(--ease-ios), translate .26s var(--ease-ios);
  pointer-events: none;
}

/* the contact window sits right-of-centre, in the leeward calm beside the storm */
.panel.connect-chamber { place-items: center end; padding-right: 8vw; }
.connect-chamber .panel__glass {
  width: min(560px, calc(100vw - 3rem));
  animation: windowCondense .62s var(--ease-ios) both;   /* condenses out of the weather, not facadeMorph */
}
.connect-chamber.closing .panel__glass { animation: windowEvaporate .4s var(--ease-ios) both; }
@keyframes windowCondense {
  0%   { opacity: 0; transform: translateY(12px) scale(.985); backdrop-filter: blur(2px) saturate(120%); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; backdrop-filter: blur(28px) saturate(168%); }
}
@keyframes windowEvaporate { to { opacity: 0; transform: translateY(8px) scale(.99); } }

/* a cursor-tracked specular sheen so the glass feels wet (main.js sets --mx/--my) */
.connect-chamber .panel__glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px 440px at var(--mx, 72%) var(--my, 26%), rgba(255,255,255,.10), transparent 60%);
}
.connect-chamber .panel__body, .connect-chamber .panel__close { position: relative; z-index: 1; }

/* intent chips — liquid-glass pills, amber the one warm note against the cold weather */
.connect__intent-prompt {
  margin-top: 1.7rem;
  font-size: .72rem; font-weight: 420; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mist);
}
.connect__intents { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.intent-chip {
  position: relative; isolation: isolate; overflow: hidden;
  font-family: inherit; font-size: .78rem; font-weight: 540;
  font-variation-settings: 'wdth' 100;
  color: var(--mist);
  padding: .5rem 1.05rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid rgba(182,205,208,.16);
  background: linear-gradient(160deg, rgba(181,118,58,.10), rgba(23,47,84,.30));
  backdrop-filter: blur(10px) saturate(140%);
  transition: color .25s ease, border-color .3s var(--ease-out), transform .3s var(--ease-out), background .3s ease, box-shadow .3s ease;
}
.intent-chip:hover { color: var(--white); border-color: rgba(182,205,208,.5); transform: translateY(-1px); }
.intent-chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.intent-chip.is-selected {
  color: var(--white); border-color: var(--amber); transform: translateY(-2px);
  background: linear-gradient(160deg, rgba(181,118,58,.36), rgba(181,118,58,.12));
  box-shadow: inset 0 1px 0 rgba(248,248,248,.22), 0 6px 22px rgba(181,118,58,.3);
}
.intent-chip.is-selected::after {            /* a single conic rim sweep on select */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from -90deg, var(--amber), rgba(181,118,58,0) 28%, rgba(181,118,58,0) 72%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: chipSweep .6s var(--ease-out) 1 both;
}
@keyframes chipSweep { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .85; } }

/* the self-addressing subject — the transmission re-titles itself to your intent */
.subject-strip {
  margin-top: 1rem; min-height: 1.3em;
  display: flex; align-items: center;
  font-family: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', monospace;
  font-size: .8rem; letter-spacing: .015em;
  color: rgba(182,205,208,.5);
}
.subject-strip__label { color: rgba(182,205,208,.4); }
.subject-strip__text { color: var(--mist); white-space: nowrap; overflow: hidden; }
.subject-strip__caret { width: .1em; height: .95em; margin-left: .14em; vertical-align: middle; }

.connect__reassure { color: var(--mist); }

/* a warm underline-sweep draws under the field you're writing in */
.connect__field { position: relative; }
.connect__field::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), rgba(181,118,58,0));
  transition: width .22s var(--ease-out); pointer-events: none;
}
.connect__field:focus-within::after { width: 100%; }

/* the sent state — a single amber voxel flag is raised at the window */
.connect__flag { position: relative; width: 44px; height: 66px; margin: 0 auto 1.3rem; }
.connect__flag-pole {
  position: absolute; left: 50%; bottom: 0; width: 3px; height: 66px; transform: translateX(-50%);
  background: linear-gradient(var(--mist), rgba(182,205,208,.25)); border-radius: 2px;
}
.connect__flag-cube {
  position: absolute; left: calc(50% + 2px); top: 7px; width: 20px; height: 15px;
  background: var(--amber); transform-origin: left center;
  box-shadow: 0 0 20px rgba(181,118,58,.6), inset 0 1px 0 rgba(248,248,248,.3);
  animation: flagRaise .58s var(--ease-out) both;
}
@keyframes flagRaise {
  0%   { opacity: 0; transform: translateY(38px) scaleX(0); }
  62%  { opacity: 1; transform: translateY(-2px) scaleX(1.08); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

@media (max-width: 720px) {
  .panel.connect-chamber { place-items: center; padding-right: 0; }
}

/* ---------- CONNECT — the transmission composer (full-bleed) ---------- */
.connect {
  position: fixed; inset: 0; z-index: 38;
  display: flex; flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s var(--ease-ios);
}
.connect[hidden] { display: none; }
.connect.shown { opacity: 1; }
/* soft cloud-dust nebula (bottom) + drifting code-glyph warp dust (above it) */
.connect__clouds { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.connect__glyphs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .7; }
/* depth vignette — darkens the rim so the composition floats forward */
.connect::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(26,168,225,.025), transparent 60%),
    radial-gradient(120% 92% at 50% 44%, transparent 34%, rgba(12,16,23,.4) 74%, rgba(12,16,23,.74) 100%);
}
.connect__stage { position: relative; z-index: 1; }
.connect.shown .connect__back,
.connect.shown .connect__dock { pointer-events: auto; }

/* observatory return — top-right */
.connect__back {
  position: absolute; top: 1.15rem; right: 1.5rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: inherit; font-size: .76rem; letter-spacing: .04em; font-weight: 500;
  color: var(--mist);
  padding: .5rem .95rem; border-radius: 9999px; cursor: pointer;
  background: rgba(12,16,23,.4); border: 1px solid rgba(182,205,208,.16);
  backdrop-filter: blur(10px) saturate(140%);
  transition: color .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.connect__back svg { width: 1em; height: 1em; transition: translate .25s var(--ease-out); }
.connect__back:hover { color: var(--white); border-color: rgba(182,205,208,.5); }
.connect__back:hover svg { translate: -3px 0; }
.connect__back:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* the live message — composes itself in the centre */
.connect__stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 9vh 6vw 1vh;
  pointer-events: none;
}
.cmp { margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.cmp.on { opacity: 1; transform: none; }
.cmp--name { font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 360; color: var(--mist); letter-spacing: .01em; }
.cmp--email { font-family: ui-monospace, 'SFMono-Regular', monospace; font-size: clamp(.78rem, 1.2vw, .95rem); color: var(--cyan); letter-spacing: .02em; margin-top: .25rem; }
.cmp--divider {
  font-size: .68rem; font-weight: 420; letter-spacing: .28em; text-transform: uppercase;
  color: var(--mist); opacity: .82; margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .8rem; align-self: center;
}
.cmp--divider::before, .cmp--divider::after {   /* a small amber voxel tick flanks the label */
  content: ""; width: 5px; height: 5px; background: var(--amber); box-shadow: 0 0 8px var(--amber);
}
.cmp--headline {
  position: relative;
  width: min(1060px, 86vw); height: clamp(110px, 23vh, 300px);
  margin: .5rem 0 .2rem;
  opacity: 1; transform: none;           /* the canvas paints/fades its own cubes */
}
.cmp--headline canvas { width: 100%; height: 100%; display: block; filter: none; }   /* the canvas paints only the liquid letters, no backing film */
.connect__prompt {
  margin: .05rem auto .35rem;
  max-width: 42rem;
  color: rgba(248,248,248,.76);
  font-size: clamp(.9rem, 1.35vw, 1.05rem);
  font-weight: 360;
  line-height: 1.45;
}
.cmp--topic { font-size: clamp(.85rem, 1.4vw, 1.05rem); font-weight: 360; color: var(--mist); opacity: .7; margin-top: .4rem; }

/* the dock — waveform, channels, fields */
.connect__dock {
  position: relative; z-index: 1; flex: 0 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 4rem) clamp(1rem, 2.4vh, 1.8rem);
}
.connect__wave {
  position: absolute; left: 0; right: 0; bottom: clamp(58px, 7vh, 78px);
  width: 100%; height: 78px; pointer-events: none;
}
.connect__rows { position: relative; z-index: 1; }
.connect__row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .65rem; min-height: 2.2rem; }
.connect__row--sub[hidden] { display: none; }
.connect__row--sub { animation: subRise .42s var(--ease-out) both; }
@keyframes subRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.connect__row-label { flex: 0 0 auto; width: 3.4rem; font-size: .6rem; font-weight: 460; letter-spacing: .22em; color: var(--mist); opacity: .55; }
.connect__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* a channel chip — numbered, colour-dotted */
.tchip {
  --dot: var(--cyan);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: inherit; font-size: .78rem; font-weight: 500; color: var(--mist);
  padding: .42rem .85rem; border-radius: 9999px; cursor: pointer;
  border: 1px solid rgba(182,205,208,.14);
  background: rgba(12,16,23,.42);
  backdrop-filter: blur(8px) saturate(140%);
  transition: color .22s ease, border-color .28s var(--ease-out), background .28s ease, transform .28s var(--ease-out), box-shadow .3s ease;
}
.tchip__n { font-size: .62rem; font-weight: 460; opacity: .5; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tchip__dot { width: 7px; height: 7px; border-radius: 2px; background: var(--dot); box-shadow: 0 0 7px var(--dot); transition: box-shadow .3s ease, transform .3s var(--ease-out); }
.tchip:hover { color: var(--white); border-color: rgba(182,205,208,.42); transform: translateY(-1px); }
.tchip:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; }
.tchip.is-on {
  color: var(--white); border-color: var(--dot); transform: translateY(-1px);
  background: color-mix(in srgb, var(--dot) 18%, rgba(12,16,23,.5));
  box-shadow: inset 0 1px 0 rgba(248,248,248,.18), 0 5px 18px color-mix(in srgb, var(--dot) 35%, transparent);
}
.tchip.is-on .tchip__n { opacity: .85; }
.tchip.is-on .tchip__dot { transform: scale(1.25); box-shadow: 0 0 12px 2px var(--dot); }

/* inline fields + send */
.connect__fields {
  position: relative; z-index: 1; margin-top: 1.1rem;
  display: grid; grid-template-columns: 1.05fr 1.25fr 2.3fr auto; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: end;
}
.cf { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cf__label { font-size: .58rem; font-weight: 460; letter-spacing: .2em; color: var(--mist); opacity: .55; }
.cf input {
  width: 100%; background: none; border: none; border-bottom: 1px solid rgba(182,205,208,.22);
  color: var(--white); font-family: inherit; font-size: .96rem; font-weight: 360;
  padding: .4rem 0; transition: border-color .25s ease;
}
.cf input::placeholder { color: rgba(182,205,208,.4); }
.cf input:focus { outline: none; border-bottom-color: var(--glow); box-shadow: 0 8px 18px -10px rgba(11,212,251,.5); }
.cf:focus-within .cf__label { color: var(--glow); opacity: .9; }
.cf--send { flex-direction: row; align-items: center; gap: 1.1rem; justify-content: flex-end; }
.connect__hint {
  font-family: ui-monospace, 'SFMono-Regular', monospace; font-size: .72rem; letter-spacing: .06em;
  color: var(--mist); opacity: .6; transition: color .25s ease, opacity .25s ease; white-space: nowrap;
}
.connect__hint.ready { color: var(--glow); opacity: 1; }
.connect__go {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: inherit; font-size: .92rem; font-weight: 560; color: var(--white);
  padding: .7rem 1.4rem; border-radius: 9999px; cursor: pointer;
  white-space: nowrap;
  border: 1px solid rgba(11,212,251,.4);
  background: linear-gradient(160deg, rgba(24,93,165,.55), rgba(11,212,251,.18));
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(248,248,248,.22), 0 8px 26px rgba(24,93,165,.32);
  transition: transform .3s var(--ease-out), box-shadow .3s ease, opacity .25s ease, filter .25s ease;
}
.connect__go svg { width: 1em; height: 1em; transition: translate .3s var(--ease-out); }
.connect__go:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(248,248,248,.3), 0 12px 38px rgba(11,212,251,.4); }
.connect__go:hover svg { translate: 3px -3px; }
.connect__go:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.connect__go:disabled { opacity: .4; cursor: not-allowed; filter: saturate(.6); }
.connect__go:disabled:hover { transform: none; box-shadow: inset 0 1px 0 rgba(248,248,248,.22), 0 8px 26px rgba(24,93,165,.32); }

/* sent state — the message lifts off, the composer dissolves into a confirmation */
.connect.sent .connect__dock { opacity: 0; transform: translateY(20px); transition: opacity .4s var(--ease-ios), transform .5s var(--ease-ios); pointer-events: none; }
.connect.sent .connect__stage > .cmp:not(.cmp--headline) { opacity: 0; transition: opacity .3s ease; }
.connect.sent .cmp--headline { animation: headlineLift .55s var(--ease-ios) both; }
@keyframes headlineLift { to { opacity: 0; transform: translateY(-54px) scale(1.05); } }
.connect__sent {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .5rem; padding: 0 6vw; pointer-events: none; opacity: 0;
}
.connect.sent .connect__sent { opacity: 1; pointer-events: auto; transition: opacity .5s var(--ease-out) .25s; }
.connect__sent .s-flag { width: 46px; height: 70px; position: relative; margin-bottom: 1.4rem; }
.connect__sent .s-pole { position: absolute; left: 50%; bottom: 0; width: 3px; height: 70px; transform: translateX(-50%); background: linear-gradient(var(--mist), rgba(182,205,208,.25)); border-radius: 2px; }
.connect__sent .s-cube { position: absolute; left: calc(50% + 2px); top: 8px; width: 21px; height: 16px; background: var(--amber); box-shadow: 0 0 22px rgba(181,118,58,.6), inset 0 1px 0 rgba(248,248,248,.3); animation: flagRaise .58s var(--ease-out) both; }
.connect__sent h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; font-variation-settings: 'wdth' 122; }
.connect__sent .s-aph { font-size: 1.05rem; font-weight: 330; font-style: italic; color: var(--mist); margin-top: .3rem; }
.connect__sent .s-lede { font-size: .95rem; font-weight: 360; line-height: 1.6; color: rgba(248,248,248,.85); max-width: 54ch; margin: 1rem auto 0; }
.connect__sent .s-actions { margin-top: 1.8rem; display: flex; gap: 1rem; justify-content: center; }

@media (max-width: 860px) {
  .connect__fields { grid-template-columns: 1fr 1fr; }
  .cf--msg { grid-column: 1 / -1; }
  .cf--send { grid-column: 1 / -1; justify-content: space-between; }
  .connect__row { flex-wrap: wrap; }
}

@media (max-width: 1024px) {
  .landing .wordmark::before { opacity: .7; }
  .landing .wordmark {
    color: transparent;
    text-shadow: none;
  }
  .landing .wordmark .wordmark__cv,
  .landing .wordmark .wordmark__dot {
    opacity: 1;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wordmark, .landing__copy .ctas { animation: none; }
  .caret, .cta::after, .cta__arrow, .remix__icon { animation: none; }
  .remix:hover .remix__prog-fill { transition: none; }
  #cosmos { transition: opacity .3s ease; }
  .panel__glass { animation: panelFade .3s ease both; }
  @keyframes panelFade { from { opacity: 0; } to { opacity: 1; } }
  .panel.closing .panel__glass { animation: panelFadeOut .25s ease both; }
  @keyframes panelFadeOut { to { opacity: 0; } }
  /* Connect chamber: window appears/leaves by a plain fade; no condense, no sweeps */
  .connect-chamber .panel__glass { animation: panelFade .3s ease both; }
  .connect-chamber.closing .panel__glass { animation: panelFadeOut .25s ease both; }
  .landing.connecting .landing__copy { transition: none; }
  .intent-chip, .intent-chip.is-selected::after, .connect__flag-cube { animation: none; }
  .connect__field::after { transition: none; }
}

@media (max-width: 720px) {
  .hud {
    padding: .9rem 1rem;
    gap: .55rem;
    align-items: flex-start;
  }
  .wordmark--hud {
    flex: 0 0 auto;
    font-size: .78rem;
    opacity: .96;
    max-width: 56vw;
    padding: .44rem .62rem;
    min-height: 38px;
  }
  .hud__state {
    max-width: min(58vw, 21rem);
    font-size: .66rem;
    line-height: 1.25;
    letter-spacing: .04em;
    padding: .42rem .62rem;
  }
  .label {
    font-size: .68rem;
    letter-spacing: .07em;
    padding: .42rem .64rem .38rem;
  }
  .label .label__sub {
    font-size: .56rem;
  }
  .panel__glass { padding: 1.8rem 1.4rem 2rem; }
  .app__room { grid-template-columns: 1fr; gap: .3rem; }
  .landing__copy {
    bottom: max(7vh, calc(env(safe-area-inset-bottom) + 4.6rem));
    padding: 0 1rem;
  }
  .ctas { margin-top: 0; }
  .cta {
    min-height: 48px;
    padding: .82rem 1.28rem;
    font-size: .92rem;
    box-shadow: inset 0 1px 0 rgba(248,248,248,.24), inset 0 -10px 22px rgba(12,16,23,.32), 0 12px 38px rgba(11,212,251,.26);
  }
  .beam-modes {
    bottom: max(6vh, calc(env(safe-area-inset-bottom) + 4.6rem));
  }
  .bm-rings { gap: 2rem; }
  .connect__go {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    font-size: .78rem;
    padding: .7rem 1rem;
  }
  .connect__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    margin-top: .9rem;
  }
  .cf--msg,
  .cf--send { grid-column: auto; }
  .cf input {
    font-size: .9rem;
    padding: .34rem 0;
  }
  .cf--send {
    align-items: stretch;
    flex-direction: column;
    gap: .55rem;
  }
  .connect__hint {
    font-size: .64rem;
    min-height: 1.05rem;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .hud {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .hud__state {
    justify-self: end;
    max-width: calc(100vw - 2rem);
  }
}

/* ---- ambient sound toggle — bottom-right glass pill, pixel equalizer ---- */
.mute {
  position: fixed; right: 18px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .7rem .42rem .58rem;
  min-height: 36px;
  font-family: 'Anybody', sans-serif; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist); cursor: pointer;
  background: rgba(12, 17, 24, .52);
  border: 1px solid rgba(182, 205, 208, .16);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(11px) saturate(1.15); backdrop-filter: blur(11px) saturate(1.15);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: .86; transition: opacity .3s ease, border-color .3s ease, transform .3s var(--ease-out), background .3s ease, color .3s ease;
}
.mute:hover { opacity: 1; transform: translateY(-1px); border-color: rgba(182, 205, 208, .36); background: rgba(12, 17, 24, .72); }
.mute:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; opacity: 1; }
.mute__label { opacity: .92; font-variation-settings: 'wdth' 92; }
.mute.is-on { color: var(--white); border-color: rgba(11, 212, 251, .3); box-shadow: 0 4px 20px rgba(11, 212, 251, .14), inset 0 1px 0 rgba(255, 255, 255, .09); }

/* the four pixel bars — square-capped, sit flat when muted, dance when sounding */
.mute__viz { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.mute__viz i { width: 3px; height: 3px; background: var(--mist); opacity: .5; border-radius: .5px; transition: height .25s var(--ease-out), background .3s ease, opacity .3s ease; }
.mute.is-on .mute__viz i { background: var(--glow); opacity: 1; }
.mute.is-on .mute__viz i:nth-child(1) { animation: eq 1.05s var(--ease-ios) infinite; }
.mute.is-on .mute__viz i:nth-child(2) { animation: eq .82s var(--ease-ios) infinite .14s; }
.mute.is-on .mute__viz i:nth-child(3) { animation: eq 1.22s var(--ease-ios) infinite .06s; }
.mute.is-on .mute__viz i:nth-child(4) { animation: eq .94s var(--ease-ios) infinite .2s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .mute.is-on .mute__viz i { animation: none; height: 8px; }
}
@media (max-width: 720px) {
  .mute { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); font-size: .58rem; padding: .48rem .7rem; min-height: 38px; }
  body.panel-open .mute {
    top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    bottom: auto; z-index: 52;
    width: 42px; min-width: 42px; height: 42px; min-height: 42px;
    padding: 0; justify-content: center;
  }
  body.panel-open .mute__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

body.panel-open .labels {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================
   DOSSIER PANELS — cinematic in-world structure facade
   Composes with .panel / .panel__glass / .app__* / .lamp.
   Hero band negative margins MATCH .panel__glass padding
   (desktop 2.6rem 3rem 2.8rem · mobile 1.8rem 1.4rem 2rem).
   ============================================================ */
.panel__glass { isolation: isolate; }
.panel__close, .panel__body { position: relative; z-index: 2; }

/* the silhouette-echo canvas: that building's own voxel shape, ghosted */
.panel__echo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; animation: echoBloom 1.1s var(--ease-out) .14s forwards;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 12%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 80% 12%, #000 30%, transparent 78%);
}
@keyframes echoBloom { to { opacity: 1; } }

/* the HERO BAND: accent-tinted plate that bleeds to the glass edges */
.dossier__hero {
  position: relative;
  display: flex; align-items: center; gap: 1.6rem;
  margin: -2.6rem -3rem 1.8rem;
  padding: 2.4rem 3rem 1.9rem;
  overflow: hidden; border-radius: 22px 22px 18px 18px;
  background:
    radial-gradient(135% 120% at 82% -10%, color-mix(in srgb, var(--app-accent) 26%, transparent), transparent 60%),
    linear-gradient(168deg, color-mix(in srgb, var(--app-accent) 12%, transparent), transparent 72%);
}
.dossier__hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--app-accent) 55%, #fff) 50%, transparent 62%);
  background-size: 280% 100%; background-position: -120% 0;
  mix-blend-mode: screen; opacity: 0;
  animation: heroStroke .62s var(--ease-out) .26s both;
}
@keyframes heroStroke {
  0% { background-position: -120% 0; opacity: 0; }
  30% { opacity: .9; }
  100% { background-position: 120% 0; opacity: 0; }
}
.dossier__hero .app__aphorism { margin-bottom: 0; }

/* KINETIC HEADLINE: per-letter clip-wipe + variable-weight resolve */
.app__name { white-space: normal; }
.dossier__hero .hl-word { display: inline-block; white-space: nowrap; }
.hl-ltr {
  display: inline-block;
  opacity: 0; filter: blur(6px); clip-path: inset(0 110% 0 -10%);
  animation: letterResolve .52s var(--ease-out) both;
  animation-delay: calc(var(--i) * .026s + .12s);
}
@keyframes letterResolve {
  0% { opacity: 0; filter: blur(6px); clip-path: inset(0 110% 0 -10%); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); }
}

/* specular rim ripple on the whole glass, once on open */
@property --ripple-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.panel__glass::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ripple-a, 0deg), transparent 0deg, color-mix(in srgb, var(--app-accent) 70%, #fff) 24deg, transparent 60deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; animation: rimRipple .7s var(--ease-out) .1s both;
}
@keyframes rimRipple {
  0% { --ripple-a: 0deg; opacity: 0; }
  25% { opacity: .9; }
  100% { --ripple-a: 360deg; opacity: 0; }
}

/* STAGGERED detail rows (LIVE only) */
.app__rooms .app__room {
  opacity: 0; transform: translateY(10px);
  animation: roomRise .5s var(--ease-out) both;
  animation-delay: calc(var(--r) * .08s + .34s);
}
@keyframes roomRise { to { opacity: 1; transform: translateY(0); } }
.app__lede { animation: roomRise .5s var(--ease-out) .28s both; }

/* SEALED: dim + blur the echo, lay a scanline fog so nothing reads */
.panel--sealed .panel__echo { filter: blur(7px) brightness(.5) saturate(.4); }
.panel--sealed .dossier__hero--sealed { background:
    radial-gradient(135% 120% at 82% -10%, color-mix(in srgb, var(--app-accent) 14%, transparent), transparent 60%),
    linear-gradient(168deg, rgba(12,16,23,.4), transparent 70%); }
.panel--sealed .panel__glass::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(12,16,23,0) 0 2px, rgba(12,16,23,.16) 2px 3px),
    radial-gradient(130% 90% at 80% 14%, rgba(182,205,208,.06), transparent 60%);
  mix-blend-mode: multiply; opacity: .9;
}
.panel--next .panel__glass::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 90% at 80% 14%, color-mix(in srgb, var(--app-accent) 9%, transparent), transparent 62%);
}

@media (max-width: 720px) {
  .dossier__hero { margin: -1.8rem -1.4rem 1.4rem; padding: 1.8rem 1.4rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .panel__echo { animation: none; opacity: 1; }
  .dossier__hero::after, .panel__glass::after { animation: none; opacity: 0; }
  .hl-ltr { animation: none; opacity: 1; filter: none; clip-path: none; }
  .app__rooms .app__room, .app__lede { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   REACTIVE LIQUID GLASS — the dossier slab as lifted glass.
   Composes with the DOSSIER block; does NOT touch .panel__echo (z0),
   .panel__glass::after (z1 rim ripple), or .panel--sealed/--next
   ::before (z1 state fog). Pointer fed as --mx/--my (px) by main.js.
   Palette only: ink/navy/steel/cyan/glow/aqua/amber/mist + accent.
   ============================================================ */
.panel__glass {
  --mx: 50%; --my: 38%; --lg-sheen: 0; --press: 0;
  box-shadow:
    inset 0 1px 0 rgba(248,248,248,.20),
    inset 0 0 0 1px rgba(182,205,208,.05),
    inset 0 -22px 48px rgba(12,16,23,.42),
    inset 0 2px 22px rgba(11,212,251,.04),
    0 40px 120px rgba(0,0,0,.55);
}

.panel__tileflow,
.panel__melt {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.panel__tileflow {
  opacity: .5;
  mix-blend-mode: screen;
  filter: saturate(1.26) contrast(1.06) drop-shadow(0 0 20px color-mix(in srgb, var(--app-accent, var(--glow)) 34%, transparent));
  transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -4px));
  transition: opacity .34s ease, filter .34s ease, transform .34s var(--ease-out);
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,.10) 0 52%, rgba(0,0,0,.46) 66%, rgba(0,0,0,.88) 80%, #000 100%),
    linear-gradient(135deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.76) 58%, #000 100%),
    radial-gradient(120% 100% at 100% 0%, #000 0 44%, rgba(0,0,0,.76) 66%, rgba(0,0,0,.22) 100%);
          mask-image:
    linear-gradient(90deg, rgba(0,0,0,.10) 0 52%, rgba(0,0,0,.46) 66%, rgba(0,0,0,.88) 80%, #000 100%),
    linear-gradient(135deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.76) 58%, #000 100%),
    radial-gradient(120% 100% at 100% 0%, #000 0 44%, rgba(0,0,0,.76) 66%, rgba(0,0,0,.22) 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.panel__glass[data-status="info"] .panel__tileflow {
  opacity: .68;
}

.panel__tileflow::before,
.panel__tileflow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel__tileflow::before {
  opacity: .92;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--app-accent, var(--glow)) 70%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--aqua) 52%, transparent)) 0 0 / 100% 4px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--aqua) 42%, transparent), transparent 26%, transparent 68%, color-mix(in srgb, #8FE8FF 48%, transparent)) 0 100% / 100% 4px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--app-accent, var(--glow)) 64%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--aqua) 42%, transparent)) 0 0 / 4px 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, #8FE8FF 54%, transparent), transparent 24%, transparent 66%, color-mix(in srgb, var(--app-accent, var(--glow)) 58%, transparent)) 100% 0 / 4px 100% no-repeat;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--app-accent, var(--glow)) 46%, transparent));
  animation: rimSignal 2.9s steps(18, end) infinite;
}

.panel__tileflow::after {
  opacity: .62;
  background:
    linear-gradient(135deg,
      transparent 0 31%,
      color-mix(in srgb, var(--app-accent, var(--glow)) 32%, transparent) 34%,
      rgba(255,255,255,.22) 36%,
      color-mix(in srgb, var(--aqua) 24%, transparent) 39%,
      transparent 43% 100%),
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.14) 10px 12px, transparent 12px 22px),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--app-accent, var(--glow)) 18%, transparent) 0 2px, transparent 2px 12px);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0 38%, rgba(0,0,0,.4) 54%, #000 74% 100%),
    linear-gradient(180deg, #000 0 36%, rgba(0,0,0,.7) 72%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0 38%, rgba(0,0,0,.4) 54%, #000 74% 100%),
    linear-gradient(180deg, #000 0 36%, rgba(0,0,0,.7) 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: signalSweep 3.4s steps(22, end) infinite, signalFlicker 1.1s steps(4, end) infinite alternate;
}

@keyframes rimSignal {
  0% { background-position: -18px 0, 14px 100%, 0 -22px, 100% 18px; opacity: .68; }
  40% { opacity: .96; }
  100% { background-position: 68px 0, -64px 100%, 0 72px, 100% -66px; opacity: .72; }
}

@keyframes scanDrift {
  from { transform: translateY(-18px); }
  to { transform: translateY(18px); }
}

@keyframes signalSweep {
  0% { transform: translate(-34%, -24%) scale(.94); opacity: .08; }
  18% { opacity: .68; }
  52% { opacity: .46; }
  100% { transform: translate(36%, 28%) scale(1.04); opacity: .06; }
}

@keyframes signalFlicker {
  from { filter: saturate(1.1) brightness(1); }
  to { filter: saturate(1.28) brightness(1.16); }
}

.panel__tileflow i {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: var(--tw);
  aspect-ratio: 1;
  border-radius: 1.5px;
  image-rendering: pixelated;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    perspective(420px)
    rotateX(72deg)
    rotateY(calc(var(--spin, 1) * -86deg))
    scale(.66);
  opacity: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.08) 28%, transparent 29%),
    linear-gradient(315deg, color-mix(in srgb, var(--tile-color, var(--app-accent)) 86%, #fff), color-mix(in srgb, var(--tile-color, var(--app-accent)) 48%, rgba(4,8,13,.1)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(5,8,12,.34),
    0 0 13px color-mix(in srgb, var(--tile-color, var(--app-accent)) 48%, transparent);
  animation: tileFlow 4.8s cubic-bezier(.2,.8,.18,1) var(--delay) infinite both;
  animation-delay: var(--delay);
}

@keyframes tileFlow {
  0%, 6% {
    opacity: 0;
    filter: blur(1.2px);
    transform: translate(-64%, -62%) perspective(420px) rotateX(72deg) rotateY(calc(var(--spin, 1) * -86deg)) scale(.62);
  }
  15% {
    opacity: var(--tile-alpha, .5);
    filter: blur(0);
    transform: translate(-50%, -50%) perspective(420px) rotateX(0deg) rotateY(0deg) scale(1);
  }
  56% {
    opacity: calc(var(--tile-alpha, .5) * .78);
    transform: translate(-50%, -50%) perspective(420px) rotateX(0deg) rotateY(0deg) scale(.88);
  }
  82%, 100% {
    opacity: 0;
    filter: blur(.8px);
    transform: translate(-38%, -34%) perspective(420px) rotateX(-64deg) rotateY(calc(var(--spin, 1) * 74deg)) scale(.55);
  }
}

.panel__melt {
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(230px 168px at var(--mx) var(--my),
      rgba(255,255,255,.42),
      color-mix(in srgb, var(--app-accent, var(--glow)) 34%, rgba(143,232,255,.24)) 23%,
      rgba(63,224,190,.12) 44%,
      transparent 72%),
    repeating-radial-gradient(ellipse at var(--mx) var(--my),
      rgba(255,255,255,.26) 0 1px,
      transparent 1px 14px),
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--app-accent, var(--glow)) 18%, transparent) 9px 12px,
      transparent 12px 24px);
  -webkit-mask-image: radial-gradient(260px 220px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.86) 44%, transparent 78%);
          mask-image: radial-gradient(260px 220px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.86) 44%, transparent 78%);
  filter: none;
  transform: scale(1);
  transition: opacity .24s ease, transform .34s var(--ease-out), filter .24s ease;
}

.panel__glass.is-pressing .panel__melt {
  opacity: .92;
  filter: blur(2.2px) saturate(.92);
  transform: scale(1.024);
}

.panel__glass.is-pressing .panel__tileflow {
  opacity: .44;
  filter: blur(2.4px) saturate(.88);
  transform: translate(calc(var(--px, 0) * -2px), calc(var(--py, 0) * -2px)) scale(1.012);
}

.panel__glass.is-pressing .panel__pixels {
  opacity: .16;
}
/* PIXEL-GLASS frost — a faint dithered light-cell lattice that clears under the cursor */
.panel__pixels {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden;
  opacity: .5; mix-blend-mode: screen;
  background-image:
    radial-gradient(rgba(63,224,190,.05) 0.5px, transparent 0.5px),
    radial-gradient(color-mix(in srgb, var(--app-accent) 22%, transparent) 0.5px, transparent 0.5px);
  background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 3px;
  -webkit-mask-image: radial-gradient(420px 420px at var(--mx) var(--my), rgba(0,0,0,.18), rgba(0,0,0,.92) 70%);
          mask-image: radial-gradient(420px 420px at var(--mx) var(--my), rgba(0,0,0,.18), rgba(0,0,0,.92) 70%);
  transition: opacity .4s ease;
}
/* CURSOR-REACTIVE SPECULAR — a wet highlight that follows the pointer */
.panel__sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(200px 200px at var(--mx) var(--my), rgba(255,255,255,.06), transparent 62%),
    radial-gradient(120px 120px at var(--mx) var(--my), color-mix(in srgb, var(--app-accent) 18%, #fff), transparent 64%);
  background-blend-mode: screen;
  opacity: calc(.18 + var(--lg-sheen) * .42); transition: opacity .45s ease;   /* a faint wet highlight, never a spotlight */
}
/* EDGE REFRACTION — an iridescent fresnel rim, brighter toward the cursor (cyan→aqua, never purple) */
.panel__refract {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1.25px;
  background: conic-gradient(from 210deg,
    color-mix(in srgb, var(--app-accent) 80%, #fff) 0deg, var(--glow) 40deg, var(--aqua) 80deg,
    color-mix(in srgb, var(--app-accent) 60%, transparent) 150deg, transparent 210deg,
    color-mix(in srgb, var(--app-accent) 80%, #fff) 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: calc(.18 + var(--lg-sheen) * .34); transition: opacity .45s ease;
}
.panel__refract::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, #fff 0deg, var(--glow) 36deg, var(--aqua) 76deg, transparent 150deg, transparent 320deg, #fff 360deg);
  -webkit-mask:
    radial-gradient(260px 260px at var(--mx) var(--my), #000 0%, transparent 62%),
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor;
          mask:
    radial-gradient(260px 260px at var(--mx) var(--my), #000 0%, transparent 62%),
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: intersect, exclude;
  opacity: calc(.25 + var(--lg-sheen) * .6); mix-blend-mode: screen; transition: opacity .45s ease;
}
.panel--sealed .panel__sheen, .panel--sealed .panel__refract { opacity: .12; }
.panel--sealed .panel__pixels { opacity: .22; }
.panel--next .panel__sheen { opacity: calc(.2 + var(--lg-sheen) * .4); }
@media (prefers-reduced-motion: reduce) {
  .panel__glass { --mx: 30%; --my: 22%; --lg-sheen: .5; }
  .panel__pixels { -webkit-mask-image: none; mask-image: none; opacity: .4; }
  .panel__tileflow i { animation: none; transform: translate(-50%, -50%) scale(.82); opacity: .18; }
  .panel__melt { display: none; }
  .panel__sheen, .panel__refract, .panel__refract::after { transition: none; }
  .panel__refract::after {
    -webkit-mask: radial-gradient(260px 260px at 30% 22%, #000 0%, transparent 62%), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: radial-gradient(260px 260px at 30% 22%, #000 0%, transparent 62%), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  }
}

/* ---- two-column live dossier: text left, the pixel-code QR on the right ---- */
.dossier__cols { display: grid; grid-template-columns: 1fr auto; gap: 1.9rem; align-items: start; }
.dossier__main { min-width: 0; }
.dossier__aside { align-self: start; }

/* the App Store "get it" code — glowing voxel modules on a dark glass tile,
   the same pixel language as the building silhouette-echo. Tap or scan → App Store. */
.app__get {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: .85rem; border-radius: 18px; text-decoration: none;
  background: linear-gradient(180deg, rgba(10,14,21,.62), rgba(8,11,17,.72));
  border: 1px solid color-mix(in srgb, var(--app-accent) 28%, rgba(182,205,208,.16));
  box-shadow: 0 14px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1);
  transition: transform .25s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.app__get:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--app-accent) 60%, #fff);
  box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--app-accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.1);
}
.app__get:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.app__qr { display: block; width: 128px; height: 128px; border-radius: 10px; image-rendering: pixelated; box-shadow: inset 0 0 0 1px rgba(182,205,208,.12), 0 0 20px color-mix(in srgb, var(--app-accent) 18%, transparent); }
.app__get-label { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; max-width: 16ch; font-size: .74rem; line-height: 1.3; color: var(--mist); font-variation-settings: 'wdth' 96; }
.app__get-label strong { font-weight: 800; font-size: .82rem; color: color-mix(in srgb, var(--app-accent) 70%, #fff); letter-spacing: .01em; }
.app__get-label em { font-style: normal; font-size: .64rem; opacity: .55; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 720px) {
  .dossier__cols { grid-template-columns: 1fr; }
  .dossier__aside { justify-self: center; margin-top: .4rem; }
}

/* ---- the iMentality mood-signal dial — a REAL turnable instrument (drag to set) ---- */
.dossier__head { flex: 1 1 auto; min-width: 0; }
.dossier__hero .dial { flex: 0 0 auto; }
.dial {
  --turn: .68; --zone: #3FE0BE;
  position: relative; width: 148px; height: 148px;
  cursor: grab; touch-action: none; outline: none;
}
.dial.is-turning { cursor: grabbing; }
.dial:focus-visible { box-shadow: 0 0 0 2px var(--glow); border-radius: 50%; }
/* the dim 270° track */
.dial__track {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(182,205,208,.16) 0 270deg, transparent 270deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 61%); mask: radial-gradient(circle, transparent 59%, #000 61%);
}
/* the bright fill arc, swept to the current turn, coloured by the live mood zone */
.dial__fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--zone) 0 calc(var(--turn) * 270deg), transparent calc(var(--turn) * 270deg));
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 61%); mask: radial-gradient(circle, transparent 59%, #000 61%);
  filter: saturate(1.1) drop-shadow(0 0 9px color-mix(in srgb, var(--zone) 65%, transparent));
  transition: --turn .12s linear;
}
.dial__glass { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, rgba(70,100,140,.28), rgba(10,14,21,.5)); border: 1px solid rgba(182,205,208,.1); }
.dial__core {
  position: absolute; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(30,48,76,.72), rgba(8,11,17,.95));
  box-shadow: inset 0 2px 12px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--zone) 22%, transparent);
  display: grid; place-content: center; gap: .04rem; text-align: center; transition: box-shadow .25s ease;
}
.dial__pct { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: 0; }
.dial__pct::after { content: '%'; font-size: .72rem; font-weight: 500; opacity: .55; margin-left: 1px; }
.dial__sig { font-size: .46rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); opacity: .6; margin-top: .12rem; }
.dial__state { font-size: .8rem; font-weight: 600; color: var(--zone); letter-spacing: .01em; text-transform: capitalize; transition: color .2s ease; }
/* the knob rides an arm that JS rotates to the turn angle */
.dial__arm { position: absolute; inset: 0; transform: rotate(calc(200deg + var(--turn) * 270deg)); transform-origin: 50% 50%; transition: transform .1s var(--ease-out); }
.dial.is-turning .dial__arm { transition: none; }
.dial__knob {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(8,11,17,.5);
  box-shadow: 0 0 12px var(--zone), 0 0 5px rgba(255,255,255,.95), 0 2px 5px rgba(0,0,0,.4);
}
.dial__hint {
  position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%);
  font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); opacity: .42;
  white-space: nowrap; transition: opacity .3s ease;
}
.dial:hover .dial__hint, .dial.is-turning .dial__hint { opacity: .8; }
@media (max-width: 600px) {
  .dossier__hero { flex-direction: column; align-items: flex-start; }
  .dial { align-self: center; margin-bottom: 1rem; }
}

/* ---- panel dust: the app's own faint blue bokeh, slowly rising — cinematic calm,
   drawn from iMentality's entry screen (our identity, not a borrowed reference) ---- */
.panel__dust {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden;
  opacity: .55; mix-blend-mode: screen;
}
.panel__dust::before, .panel__dust::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 140%;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(150,200,240,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(120,175,225,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 47% 30%, rgba(160,210,245,.5), transparent 60%),
    radial-gradient(1px 1px at 63% 78%, rgba(120,175,225,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(150,200,240,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 55%, rgba(120,175,225,.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 38% 88%, rgba(140,195,235,.42), transparent 60%),
    radial-gradient(1px 1px at 70% 44%, rgba(150,200,240,.36), transparent 60%);
  background-size: 100% 50%;
  animation: dustRise 26s linear infinite;
}
.panel__dust::after { animation-duration: 38s; animation-delay: -12s; opacity: .7; filter: blur(.3px); }
@keyframes dustRise { from { transform: translateY(0); } to { transform: translateY(-25%); } }
@media (prefers-reduced-motion: reduce) {
  .panel__dust::before, .panel__dust::after { animation: none; }
}

/* ---- cursor-parallax depth: the card's layers ride at different depths as the
   pointer moves, so the dossier feels dimensional and alive (not a flat sheet) ---- */
.panel__glass { --px: 0; --py: 0; }
.panel__echo  { transform: translate(calc(var(--px) * -16px), calc(var(--py) * -16px)); transition: transform .35s var(--ease-out); }
.panel__dust  { transform: translate(calc(var(--px) * -9px),  calc(var(--py) * -9px));  transition: transform .4s var(--ease-out); }
.dossier__head { transform: translate(calc(var(--px) * 5px),  calc(var(--py) * 4px));   transition: transform .3s var(--ease-out); }
.dossier__aside { transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px));   transition: transform .3s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .panel__echo, .panel__dust, .dossier__head, .dossier__aside { transform: none; }
}

/* ---- the dial re-colours the card: a soft mood wash + a brighter dial glow that
   follow the reading you set, so turning the instrument visibly changes the moment ---- */
.panel__glass { --mood: var(--app-accent); }
.dossier__hero {
  background:
    radial-gradient(120% 130% at 100% 50%, color-mix(in srgb, var(--mood) 18%, transparent), transparent 62%),
    radial-gradient(135% 120% at 82% -10%, color-mix(in srgb, var(--app-accent) 22%, transparent), transparent 60%),
    linear-gradient(168deg, color-mix(in srgb, var(--app-accent) 12%, transparent), transparent 72%);
  transition: background .4s ease;
}
.panel:not(.weather-room) .panel__close {
  position: relative;
  z-index: 6;
  margin-bottom: 1rem;
}
.panel:not(.weather-room) .dossier__hero {
  margin-top: .2rem;
}
.dial__fill { filter: saturate(1.12) drop-shadow(0 0 16px color-mix(in srgb, var(--zone) 55%, transparent)); }

/* ============================================================
   THE WEATHER ROOM — iMentality LIVE only. Full-bleed instrument
   chamber (gated on .panel.weather-room). Depth is 2D translate
   off --px/--py — NO preserve-3d/perspective, NO scroll; the dial
   stays dead flat (its drag math is sacred). Zero purple.
   ============================================================ */
.panel.weather-room .panel__glass {
  width: 92vw; max-width: 92vw; height: 92vh; max-height: 92vh;
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden;
  animation: roomOpen .7s var(--ease-ios) both;
}
@keyframes roomOpen { 0% { opacity: 0; transform: scale(.85); filter: blur(8px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }
.panel.weather-room.closing .panel__glass { animation: roomClose .42s var(--ease-ios) both; }
@keyframes roomClose { to { opacity: 0; transform: scale(.9); filter: blur(6px); } }
.panel.weather-room {
  -webkit-backdrop-filter: blur(18px) brightness(.32) saturate(.7); backdrop-filter: blur(18px) brightness(.32) saturate(.7);
  background: radial-gradient(140% 120% at 50% 50%, transparent 30%, rgba(8,11,17,.86) 78%);
}
/* suppress the slab's own chrome inside the room (built for the rectangle) */
.weather-room .panel__sheen, .weather-room .panel__refract, .weather-room .panel__pixels, .weather-room .panel__tileflow, .weather-room .panel__melt, .weather-room .panel__echo { display: none; }
.weather-room .panel__glass::after, .weather-room .panel__glass::before { display: none; }
.weather-room .panel__close { position: absolute; top: 2.2rem; left: 2.4rem; z-index: 6; margin: 0; }

/* the stage + depth-fog vignette that re-weathers to --mood */
.room { position: absolute; inset: 0; display: grid; place-items: center; font-family: inherit; --fog: color-mix(in srgb, var(--mood) 12%, #0C1017); }
.room::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 90% at 50% 52%, transparent 26%, var(--fog) 72%, rgba(8,11,17,.95) 100%); transition: background .6s ease; }

/* FAR — the room's name engraved huge + faint (this opacity is make-or-break) */
.room__wall {
  position: absolute; z-index: 1; top: 50%; left: 50%; translate: -50% -54%; margin: 0;
  font-size: clamp(14vw, 18vw, 34vw); font-weight: 800; letter-spacing: 0; line-height: .8;
  white-space: nowrap; text-align: center; pointer-events: none;
  color: color-mix(in srgb, var(--mist) 7%, transparent);
  transform: translate(calc(var(--px) * -26px), calc(var(--py) * -18px)); transition: transform .4s var(--ease-out);
}
/* MID — the horizon seam + the dial sit on it */
.room__horizon { position: relative; z-index: 3; display: grid; justify-items: center; gap: 1.1rem; width: min(640px, 86vw); text-align: center; }
.room__horizon::before {
  content: ""; position: absolute; top: calc(50% - .5px); left: -30vw; right: -30vw; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mood) 60%, transparent) 18% 82%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mood) 40%, transparent); transition: background .5s ease, box-shadow .5s ease;
}
.room__kicker { color: color-mix(in srgb, var(--mood) 70%, #fff); }
.room__aphorism { margin: 0; max-width: 40ch; font-size: clamp(.95rem, 1.4vw, 1.18rem); font-weight: 330; letter-spacing: 0; color: rgba(248,248,248,.78); }
.room__reading { margin: 0; min-height: 1.3em; font-size: .92rem; font-style: italic; color: var(--mist); opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s var(--ease-out); }
.room__reading.on { opacity: .92; transform: none; }

/* the hero dial — large, centred, DEAD FLAT (no transform touches its box) */
.weather-room .dial { width: clamp(220px, 30vmin, 360px); height: clamp(220px, 30vmin, 360px); }
.weather-room .dial__pct { font-size: 2.4rem; }
.weather-room .dial__core { box-shadow: inset 0 2px 16px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--zone) 30%, transparent); }

/* NEAR — the five-band mood ladder (live legend), bottom-left */
.room__ladder {
  position: absolute; left: 2.6rem; bottom: 2.6rem; z-index: 4; list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(182,205,208,.32);
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px)); transition: transform .35s var(--ease-out);
}
.room__ladder li { display: flex; align-items: center; gap: .6rem; transition: color .3s ease; }
.room__ladder li i { width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: .5; transition: opacity .3s, box-shadow .3s; }
.room__ladder li[data-zone="hazardous"]  { --c: #FF6B6B; }
.room__ladder li[data-zone="unhealthy"]   { --c: #FBB324; }
.room__ladder li[data-zone="suboptimal"]  { --c: #A0C972; }
.room__ladder li[data-zone="stable"]      { --c: #3FE0BE; }
.room__ladder li[data-zone="thriving"]    { --c: #1AA8E1; }
.room__ladder li.is-live { color: var(--c); }
.room__ladder li.is-live i { opacity: 1; box-shadow: 0 0 12px var(--c); }

/* NEAR — QR as a wall access plate, bottom-right */
.room__access {
  position: absolute; right: 2.6rem; bottom: 2.6rem; z-index: 4; display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: 14px;
  text-decoration: none; color: var(--mist); background: rgba(10,14,21,.5);
  border: 1px solid color-mix(in srgb, var(--mood) 26%, rgba(182,205,208,.14)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translate(calc(var(--px) * 12px), calc(var(--py) * 9px)); transition: transform .25s var(--ease-out), border-color .3s, box-shadow .3s;
}
.room__access:hover { transform: translate(calc(var(--px) * 12px), calc(var(--py) * 9px)) translateY(-2px); border-color: color-mix(in srgb, var(--mood) 60%, #fff); box-shadow: 0 0 26px color-mix(in srgb, var(--mood) 30%, transparent); }
.room__access:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.room__access .app__qr { width: 84px; height: 84px; }
.room__access-label { display: flex; flex-direction: column; max-width: 12ch; font-size: .74rem; font-weight: 600; line-height: 1.25; }
.room__access-label em { font-style: normal; font-size: .6rem; font-weight: 400; opacity: .55; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }

/* dust gets real depth + re-weathers (panel__dust is injected by setupGlassReactivity, KEPT) */
.weather-room .panel__dust { opacity: calc(.4 + (1 - var(--turn, .68)) * .45); transition: opacity .5s ease; }
.weather-room .panel__dust::before { animation-duration: calc(40s - var(--turn, .68) * 22s); }

@media (prefers-reduced-motion: reduce) {
  .panel.weather-room .panel__glass { animation: roomFade .3s ease both; }
  @keyframes roomFade { from { opacity: 0; } to { opacity: 1; } }
  .panel.weather-room.closing .panel__glass { animation: roomFade .3s ease reverse both; }
  .room__wall, .room__ladder, .room__access { transform: none; }
  .room__access:hover { transform: translateY(-2px); }
  .room::after, .room__horizon::before, .room__reading { transition: none; }
}
@media (max-width: 720px) {
  .room__wall { font-size: 30vw; }
  .room__ladder { left: 1.2rem; bottom: 1.2rem; font-size: .56rem; }
  .room__access { right: 1.2rem; bottom: 1.2rem; }
  .room__access .app__qr { width: 64px; height: 64px; }
  .weather-room .panel__close { top: 1rem; left: 1rem; }
}

/* ---- WEATHER ROOM FIXES — the room must FILL the glass to centre, the world
   behind must go fully dark, the wall-type must fit, the hint must not collide ---- */
.weather-room .panel__body { position: absolute; inset: 0; }   /* fill the glass (panel__body is auto-height; its child is absolute → it collapsed) */
.panel.weather-room {
  -webkit-backdrop-filter: blur(24px) brightness(.24) saturate(.6); backdrop-filter: blur(24px) brightness(.24) saturate(.6);
  background: radial-gradient(155% 135% at 50% 46%, rgba(8,11,17,.62), rgba(8,11,17,.95) 72%);   /* no bleed-through */
}
.room__wall { font-size: clamp(2.4rem, 9vw, 8.5rem); }          /* fits on one line, still architectural — not chopped */
.weather-room .room__horizon { gap: 1.8rem; }                   /* aphorism clears the drag-hint */
.weather-room .dial__hint { bottom: -1.6rem; opacity: .5; }

/* ---- iMentality WEATHER ROOM v2: a real 3D weather instrument (card-scene.js) fills
   the room; DOM type overlays the WebGL gauge. Replaces the CSS-dial layout. ---- */
.room { display: block; }                         /* children now overlay the canvas, absolutely placed */
.room__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; cursor: grab; touch-action: none; }
.room__scene.is-turning { cursor: grabbing; }
.room__kicker { position: absolute; top: 9.5%; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; pointer-events: none; }
.room__readout {
  position: absolute; top: 46.5%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: grid; justify-items: center; gap: .02rem; text-align: center; pointer-events: none; outline: none;
}
.room__readout:focus-visible { outline: 2px solid var(--glow); outline-offset: 12px; border-radius: 50%; }
.room__pct { font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 700; letter-spacing: 0; color: #fff; line-height: 1; }
.room__pct::after { content: '%'; font-size: .42em; font-weight: 500; opacity: .55; margin-left: 2px; }
.room__sig { font-size: .55rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); opacity: .58; margin-top: .32rem; }
.room__state { font-size: 1.04rem; font-weight: 600; text-transform: capitalize; transition: color .25s ease; }
.room__caption {
  position: absolute; top: 73%; left: 50%; transform: translateX(-50%); z-index: 3;
  width: min(620px, 84vw); text-align: center; display: grid; gap: .7rem; pointer-events: none;
}
.room__caption .room__aphorism { margin: 0; }
@media (max-width: 720px) {
  .room__kicker { top: 7%; }
  .room__caption { top: 76%; }
}

/* the gauge's discoverability hint — fades once you've turned it */
.room__hint { font-size: .54rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); opacity: .42; margin-top: 1.1rem; transition: opacity .5s ease; animation: hintPulse 2.6s ease-in-out infinite; }
.room.turned .room__hint { opacity: 0; animation: none; }
@keyframes hintPulse { 0%, 100% { opacity: .28; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .room__hint { animation: none; } }

/* ===== iMentality room v3: SCROLLABLE — 3D instrument hero stage + the app's story ===== */
.panel.weather-room .panel__glass { overflow-y: auto; overflow-x: hidden; }
.weather-room .panel__body { position: relative; inset: auto; min-height: 100%; }   /* flow, so the glass scrolls */
.room { position: relative; display: block; }
.room::after { display: none; }                                                       /* fog moves onto the stage */
.room__stage { position: relative; height: 92vh; min-height: 520px; overflow: hidden; }
.room__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 26%, var(--fog) 72%, rgba(8,11,17,.95) 100%);
  transition: background .6s ease;
}
/* a scroll cue at the foot of the stage — invites you down to the journal */
.room__scrollcue {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); z-index: 5;
  display: grid; justify-items: center; gap: .5rem; pointer-events: none;
  font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); opacity: .5;
  animation: cueBob 2.4s ease-in-out infinite;
}
.room__scrollcue i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
@keyframes cueBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }

/* the STORY — the app's real info, editorial + readable on solid dark */
.room__story {
  position: relative; z-index: 5;
  background: linear-gradient(180deg, #0a0e15, #0c1017 55%);
  border-top: 1px solid rgba(182,205,208,.1);
  padding: clamp(3rem, 7vh, 5.5rem) clamp(1.6rem, 7vw, 6rem) clamp(3rem, 6vh, 5rem);
}
.room__lede { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: rgba(248,248,248,.92); max-width: 30ch; }
.room__rooms { margin-top: clamp(2rem, 4vh, 3rem); max-width: 660px; }
.room__foot { margin-top: clamp(2.4rem, 5vh, 3.4rem); display: flex; align-items: center; gap: 2.2rem; flex-wrap: wrap; }
.room__story .room__access { position: static; transform: none; }
.room__story .app__status { margin: 0; }
@media (max-width: 600px) { .room__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .room__scrollcue { animation: none; } }

/* v3 WIDTH FIX — the stage's children are ALL position:absolute (canvas + overlays),
   so the stage shrank to zero in-flow width and the 3D canvas rendered nothing; the
   story shrank to its text width. Stack the room as a flex column so both sections
   stretch to full width, and pin width:100% as insurance. Once the canvas gains real
   width the shared ResizeObserver repaints the WebGPU scene automatically. */
.room { display: flex; flex-direction: column; align-items: stretch; }
.room__stage, .room__story { width: 100%; box-sizing: border-box; }
.room__stage { flex: 0 0 auto; }

/* ============================================================
   LIQUID GLASS — the weather room is a single rounded slab of
   glass floating over the darkened world: soft-rounded corners,
   a specular bevel that catches light on opposing corners and
   disperses faintly into cyan/aqua (light refracting through the
   edge), an outer accent glow, an inner top-sheen, and a slow
   liquid glint that rolls across the pane. overflow:hidden on the
   glass clips the 3D canvas + story to the same radius.
   ============================================================ */
/* the glass is now the FIXED rounded frame; scrolling moves to the inner body so the
   rim/sheen below stay pinned to the slab edge instead of scrolling off with the story */
.panel.weather-room .panel__glass { overflow: hidden; }
.weather-room .panel__body { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.panel.weather-room .panel__glass {
  border-radius: clamp(22px, 2.6vw, 34px);
  isolation: isolate;                       /* contain the rim's blend to the slab */
  box-shadow:
    0 50px 140px rgba(0,0,0,.62),                                            /* the slab floats */
    0 8px 40px rgba(0,0,0,.4),
    0 0 0 1px rgba(182,205,208,.12),                                         /* hairline containment */
    0 0 80px -10px color-mix(in srgb, var(--app-accent, #1E90FF) 52%, transparent),  /* it glows its mood */
    inset 0 1px 0 rgba(255,255,255,.22),                                     /* top light-catch */
    inset 0 0 0 1px rgba(255,255,255,.05),                                   /* glass thickness — inner wall */
    inset 0 18px 40px -26px rgba(255,255,255,.20),                           /* light pooling under the top edge */
    inset 0 -22px 50px -30px color-mix(in srgb, var(--app-accent, #1E90FF) 60%, transparent);  /* mood bleed up the base */
}
/* the refractive BEVEL — a 1.5px specular ring, bright on the top-left &
   bottom-right (where light catches a glass edge), dispersing into cyan one
   way and aquamarine the other so the rim reads as light bending through glass */
.panel.weather-room .panel__glass::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background: linear-gradient(135deg,
    rgba(255,255,255,1), color-mix(in srgb, var(--glow, #0BD4FB) 75%, white) 15%,
    color-mix(in srgb, var(--glow, #0BD4FB) 40%, transparent) 30%,
    transparent 42%, transparent 58%,
    color-mix(in srgb, var(--aqua, #3FE0BE) 40%, transparent) 70%,
    color-mix(in srgb, var(--aqua, #3FE0BE) 75%, white) 85%, rgba(255,255,255,1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;   /* keep only the ring */
  opacity: 1;
}
/* inner liquid sheen + a slow specular glint that rolls diagonally across the glass */
.panel.weather-room .panel__glass::after {
  content: ""; display: block; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 18%),                 /* top sheen */
    radial-gradient(140% 90% at 16% -12%, rgba(255,255,255,.14), transparent 42%),    /* upper-left glint */
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 48%, transparent 58%);  /* the rolling band */
  background-size: 100% 100%, 100% 100%, 280% 280%;
  background-position: 0 0, 0 0, 120% 0;
  animation: glassGlint 9s ease-in-out infinite;
}
@keyframes glassGlint { 0%,100% { background-position: 0 0, 0 0, 120% 0; } 50% { background-position: 0 0, 0 0, -40% 0; } }
@media (prefers-reduced-motion: reduce) { .panel.weather-room .panel__glass::after { animation: none; } }

/* ============================================================
   SHEET SIZING (final) — the weather room is a NORMAL panel
   again, not full-screen: a comfortable rounded Liquid-Glass
   slab holding a contained gauge hero + the scrolling story.
   The world behind is only gently dimmed.
   ============================================================ */
.panel.weather-room .panel__glass {
  width: min(800px, calc(100vw - 2.4rem));
  max-width: min(800px, calc(100vw - 2.4rem));
  height: min(880px, calc(100vh - 3.4rem));   /* a definite frame height — its children are all absolute layers */
  max-height: min(880px, calc(100vh - 3.4rem));
  padding: 0; border: 0;
  background: linear-gradient(180deg, rgba(10,14,22,.82), rgba(7,10,16,.92));   /* the slab body behind the scene + story */
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  overflow: hidden;                                                             /* fixed rounded frame; the body scrolls */
}
.weather-room .panel__body {
  position: relative; inset: auto;
  height: auto; min-height: 0;
  max-height: min(880px, calc(100vh - 3.4rem));
  overflow-y: auto; overflow-x: hidden; border-radius: inherit;
}
.panel.weather-room {                                          /* stay IN the environment — the living outpost keeps showing around the card */
  -webkit-backdrop-filter: blur(2px) brightness(.78); backdrop-filter: blur(2px) brightness(.78);
  background: radial-gradient(135% 115% at 50% 50%, rgba(8,11,17,.18), rgba(8,11,17,.5));
}
/* the gauge HERO — a contained stage at the top of the sheet */
.room__stage {
  height: clamp(330px, 44vh, 430px); min-height: 330px; flex: 0 0 auto;
  border-bottom: 1px solid rgba(182,205,208,.09);
}
.room__stage::after { background: radial-gradient(120% 95% at 50% 46%, transparent 40%, color-mix(in srgb, var(--fog) 70%, transparent) 86%, rgba(8,11,17,.85) 100%); }
/* tuck the stage overlays in for the smaller hero */
.room__kicker { top: 6.5%; font-size: .62rem; }
.room__readout { top: 47%; }
.room__pct { font-size: clamp(2.2rem, 6vw, 3rem); }
.room__caption { top: auto; bottom: 12%; width: min(440px, 82%); }
.room__caption .room__aphorism { font-size: clamp(.86rem, 1.5vw, 1.02rem); }
.room__ladder { left: 1.4rem; bottom: 1.3rem; font-size: .54rem; gap: .38rem; }
.room__scrollcue { bottom: 1rem; font-size: .5rem; }
/* the story reads at panel width */
.room__story { padding: clamp(2.2rem, 4vh, 3.2rem) clamp(1.8rem, 5vw, 3rem) clamp(2.4rem, 4vh, 3.2rem); }
.room__lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 34ch; }
.room__rooms { margin-top: clamp(1.6rem, 3vh, 2.4rem); max-width: 100%; }

/* close button — a clearly-tappable pill (was a tiny text hit-area) */
.panel__close {
  padding: .55rem 1rem; margin-bottom: 1.2rem; border-radius: 9999px;
  background: rgba(182,205,208,.06); border: 1px solid rgba(182,205,208,.14);
  min-height: 40px; display: inline-flex; align-items: center;
  transition: background .25s ease, border-color .25s ease, color .2s ease;
}
.panel__close:hover { background: rgba(182,205,208,.12); border-color: rgba(11,212,251,.4); }
.weather-room .panel__close {
  position: absolute; top: 1.3rem; left: 1.4rem; z-index: 9; margin: 0;
  background: rgba(10,14,21,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 600px) { .panel.weather-room .panel__glass, .weather-room .panel__body { max-height: calc(100vh - 1.6rem); } }

/* ============================================================
   WHOLE-CARD LIVING FIELD — the dial's weather field is now the
   background of the ENTIRE card (gauge up top, the field falling
   away behind the story). Three layers inside the fixed glass:
   z0 the canvas (the living field + draggable gauge), z2 the
   fixed instrument labels, z3 the story scrolling over the field
   on a soft scrim. Hovering anywhere wakes the whole field.
   ============================================================ */
.weather-room .panel__body { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; overflow: hidden; }
.panel.weather-room .room { position: absolute; inset: 0; display: block; }
.panel.weather-room .room__scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.panel.weather-room .room__scene.is-turning { cursor: grabbing; }

/* the fixed gauge instrument labels (the ring itself lives in the canvas) */
.room__instrument { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.room__instrument .room__kicker { position: absolute; top: 5.5%; left: 50%; transform: translateX(-50%); text-align: center; }
.room__instrument .room__readout { position: absolute; top: 29%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .02rem; text-align: center; outline: none; }
.room__instrument .room__caption { position: absolute; top: 44.5%; left: 50%; transform: translateX(-50%); width: min(440px, 84%); text-align: center; display: grid; gap: .45rem; }
.room__instrument .room__ladder { position: absolute; left: 1.5rem; top: 22%; bottom: auto; transform: none; }

/* the story SCROLLS over the lower field, on a soft scrim that keeps it readable
   while the motes still glow through */
.room__storyscroll { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; z-index: 3; overflow-y: auto; overflow-x: hidden; }
.panel.weather-room .room__story {
  position: relative; min-height: 100%; border: 0; margin: 0;
  background: linear-gradient(180deg, rgba(8,11,17,0) 0%, rgba(8,11,17,.5) 12%, rgba(9,12,19,.82) 30%);
  padding: clamp(2.6rem, 6vh, 4rem) clamp(1.8rem, 5vw, 3rem) clamp(2.2rem, 4vh, 3rem);
}
/* a hairline + faint "scroll for the journal" feel at the seam */
.room__storyscroll::before {
  content: ""; position: sticky; top: 0; display: block; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mood) 55%, transparent) 20% 80%, transparent);
}

/* launch-polish overrides: the animated weather field must never compete with text */
.room__instrument .room__kicker {
  padding: .5rem .78rem;
  border-radius: 999px;
  color: rgba(248,248,248,.92);
  background: rgba(6,10,16,.72);
  border: 1px solid rgba(182,205,208,.16);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.room__instrument .room__readout {
  text-shadow: 0 1px 18px rgba(0,0,0,.82);
}
.room__instrument .room__caption {
  width: min(500px, 86%);
  padding: .9rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(6,10,16,.68), rgba(6,10,16,.5));
  border: 1px solid rgba(182,205,208,.12);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.room__caption .room__aphorism {
  color: rgba(248,248,248,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.room__storyscroll { top: 55%; }
.panel.weather-room .room__story {
  background: linear-gradient(180deg, rgba(7,10,16,.9) 0%, rgba(8,11,17,.94) 38%, rgba(9,12,19,.98) 100%);
}
.panel.weather-room .room__lede,
.panel.weather-room .app__room dd {
  color: rgba(248,248,248,.88);
}
.dossier__hero--pending {
  background:
    radial-gradient(110% 100% at 92% 0%, color-mix(in srgb, var(--app-accent) 18%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(15,22,31,.78), rgba(9,13,20,.62));
  border-bottom: 1px solid rgba(182,205,208,.08);
}

@media (max-width: 600px) {
  .panel__glass[data-status="contact"] {
    padding-top: 1.35rem;
    padding-bottom: 1.45rem;
  }
  .panel__glass[data-status="contact"] .app__name {
    font-size: clamp(2.3rem, 11vw, 3.15rem);
    line-height: .98;
  }
  .panel__glass[data-status="contact"] .app__aphorism {
    font-size: 1.02rem;
  }
  .panel__glass[data-status="contact"] .app__lede {
    line-height: 1.5;
  }
  .panel__glass[data-status="contact"] .connect__intent-prompt {
    margin-top: 1.1rem;
  }
  .panel__glass[data-status="contact"] .subject-strip {
    display: none;
  }
  .panel__glass[data-status="contact"] .connect__field {
    margin-top: 1.05rem;
  }
  .panel__glass[data-status="contact"] .connect__field textarea {
    min-height: 118px;
  }
  .panel__glass[data-status="contact"] .connect__actions {
    margin-top: 1.15rem;
  }
  .wordmark--hud {
    min-height: 36px;
    max-width: 52vw;
    opacity: .9;
  }
  .panel.weather-room .panel__glass {
    width: calc(100vw - 1.2rem);
    max-width: calc(100vw - 1.2rem);
  }
  .weather-room .panel__close {
    top: .75rem;
    left: .75rem;
    min-height: 38px;
    padding: .44rem .72rem;
    font-size: .72rem;
    letter-spacing: .04em;
  }
  .room__instrument .room__kicker {
    top: 5.15rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    white-space: normal;
    line-height: 1.25;
  }
  .room__instrument .room__readout {
    top: 30.5%;
  }
  .room__instrument .room__caption {
    top: 45.5%;
    width: min(500px, calc(100% - 2rem));
  }
  .room__storyscroll {
    top: 56.5%;
  }
  .subject-strip {
    flex-wrap: wrap;
    row-gap: .12rem;
  }
  .subject-strip__text {
    white-space: normal;
  }
}

/* ============================================================
   PREMIUM LIQUID GLASS PASS — June 2026 reference alignment
   Clearer material, bright optical rim, refractive interior band,
   and less smoky fill across controls + panels. The composition stays
   intact; this only upgrades the chrome surfaces.
   ============================================================ */
:root {
  --glass-clear: rgba(248,248,248,.105);
  --glass-clear-strong: rgba(248,248,248,.16);
  --glass-clear-soft: rgba(248,248,248,.055);
  --glass-edge: rgba(255,255,255,.44);
  --glass-edge-hot: rgba(255,255,255,.72);
  --glass-depth: rgba(6,10,16,.22);
  --glass-shadow: rgba(0,0,0,.28);
}

.cta--primary,
.cta--ghost,
.connect__back,
.tchip,
.connect__go,
.mute,
.wordmark--hud,
.panel__close,
.label,
.launch-card,
.launch-card__signal,
.app__get {
  --lg-accent: var(--glow);
  background:
    linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,.055) 28%, rgba(255,255,255,.095) 63%, rgba(255,255,255,.16)),
    radial-gradient(160% 140% at 0% -35%, rgba(255,255,255,.34), transparent 38%),
    radial-gradient(140% 120% at 105% 115%, color-mix(in srgb, var(--lg-accent) 24%, transparent), transparent 58%),
    rgba(10,15,22,.24);
  border-color: color-mix(in srgb, var(--lg-accent) 16%, var(--glass-edge));
  -webkit-backdrop-filter: blur(24px) saturate(178%) brightness(1.08);
          backdrop-filter: blur(24px) saturate(178%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(5,8,12,.28),
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 14px 34px var(--glass-shadow);
}

.cta--primary,
.connect__go,
.label.hot {
  --lg-accent: var(--glow);
}
.cta--ghost { --lg-accent: var(--amber); }
.tchip { --lg-accent: var(--dot); }
.label { --lg-accent: var(--label-accent); }
.panel__close,
.wordmark--hud,
.mute { --lg-accent: rgba(182,205,208,.8); }
.launch-card,
.launch-card__signal,
.app__get { --lg-accent: var(--app-accent, var(--glow)); }

.connect__back,
.tchip,
.connect__go,
.mute,
.wordmark--hud,
.panel__close {
  color: rgba(248,248,248,.94);
  text-shadow: 0 1px 12px rgba(0,0,0,.42);
}

.connect__back:hover,
.tchip:hover,
.connect__go:hover,
.mute:hover,
.wordmark--hud:hover,
.wordmark--hud.armed,
.panel__close:hover {
  border-color: color-mix(in srgb, var(--lg-accent) 30%, rgba(255,255,255,.72));
  background:
    linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,.075) 30%, rgba(255,255,255,.13) 63%, rgba(255,255,255,.20)),
    radial-gradient(150% 130% at 0% -34%, rgba(255,255,255,.46), transparent 40%),
    radial-gradient(130% 115% at 105% 115%, color-mix(in srgb, var(--lg-accent) 32%, transparent), transparent 60%),
    rgba(10,15,22,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(5,8,12,.22),
    0 18px 42px rgba(0,0,0,.26),
    0 0 28px color-mix(in srgb, var(--lg-accent) 16%, transparent);
}

.tchip.is-on,
.label.hot,
.mute.is-on {
  background:
    linear-gradient(140deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 30%, rgba(255,255,255,.13) 64%, rgba(255,255,255,.20)),
    radial-gradient(120% 120% at 14% -18%, rgba(255,255,255,.42), transparent 40%),
    radial-gradient(110% 110% at 100% 115%, color-mix(in srgb, var(--lg-accent) 36%, transparent), transparent 62%),
    color-mix(in srgb, var(--lg-accent) 12%, rgba(10,15,22,.20));
  border-color: color-mix(in srgb, var(--lg-accent) 42%, rgba(255,255,255,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(5,8,12,.22),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 15px 38px rgba(0,0,0,.24),
    0 0 28px color-mix(in srgb, var(--lg-accent) 24%, transparent);
}

.connect__go:disabled {
  opacity: .68;
  color: rgba(248,248,248,.7);
  border-color: rgba(255,255,255,.20);
  filter: saturate(.75);
}

.connect__go:disabled:hover {
  background:
    linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,.055) 28%, rgba(255,255,255,.095) 63%, rgba(255,255,255,.16)),
    radial-gradient(160% 140% at 0% -35%, rgba(255,255,255,.34), transparent 38%),
    radial-gradient(140% 120% at 105% 115%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 58%),
    rgba(10,15,22,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(5,8,12,.28),
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 14px 34px var(--glass-shadow);
}

.connect__hint,
.cf__label,
.connect__row-label,
.label .label__sub,
.mute__label {
  color: rgba(226,239,241,.72);
}

.label {
  border-radius: 12px;
  color: rgba(255,255,255,.98);
}
.label[data-status="sealed"] {
  background:
    linear-gradient(140deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 34%, rgba(255,255,255,.075)),
    radial-gradient(120% 120% at 0% -25%, rgba(255,255,255,.20), transparent 40%),
    rgba(10,15,22,.18);
  color: rgba(248,248,248,.82);
}

.panel__glass {
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 24%, rgba(6,10,16,.58) 70%, rgba(255,255,255,.06)),
    radial-gradient(115% 90% at 10% 0%, rgba(255,255,255,.12), transparent 44%),
    radial-gradient(100% 120% at 100% 100%, color-mix(in srgb, var(--app-accent, var(--glow)) 18%, transparent), transparent 58%),
    var(--app-tint, rgba(24,93,165,.08));
  border-color: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(34px) saturate(176%) brightness(1.06);
          backdrop-filter: blur(34px) saturate(176%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -18px 42px rgba(5,8,12,.32),
    0 0 82px -18px color-mix(in srgb, var(--app-accent, var(--glow)) 36%, transparent),
    0 44px 120px rgba(0,0,0,.54);
}

.panel__pixels { opacity: .34; }
.panel__sheen {
  background:
    radial-gradient(220px 220px at var(--mx) var(--my), rgba(255,255,255,.12), transparent 64%),
    radial-gradient(150px 150px at var(--mx) var(--my), color-mix(in srgb, var(--app-accent) 18%, rgba(255,255,255,.7)), transparent 66%);
  opacity: calc(.24 + var(--lg-sheen) * .5);
}
.panel__refract {
  padding: 1.5px;
  opacity: calc(.28 + var(--lg-sheen) * .42);
}

.panel.weather-room .panel__glass {
  background:
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 20%, rgba(6,10,16,.54) 58%, rgba(255,255,255,.045)),
    radial-gradient(115% 90% at 14% -8%, rgba(255,255,255,.16), transparent 44%),
    radial-gradient(100% 115% at 92% 105%, color-mix(in srgb, var(--app-accent, var(--glow)) 22%, transparent), transparent 62%),
    rgba(7,10,16,.72);
  -webkit-backdrop-filter: blur(34px) saturate(168%) brightness(1.05);
          backdrop-filter: blur(34px) saturate(168%) brightness(1.05);
  box-shadow:
    0 46px 130px rgba(0,0,0,.56),
    0 8px 36px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 82px -16px color-mix(in srgb, var(--app-accent, var(--glow)) 48%, transparent),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 20px 44px -30px rgba(255,255,255,.22),
    inset 0 -24px 52px -34px color-mix(in srgb, var(--app-accent, var(--glow)) 56%, transparent);
}

.panel.weather-room .panel__glass::before {
  padding: 1.6px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.96), color-mix(in srgb, var(--glow, #0BD4FB) 42%, white) 14%,
    color-mix(in srgb, var(--glow, #0BD4FB) 24%, transparent) 30%,
    transparent 44%, transparent 58%,
    color-mix(in srgb, var(--aqua, #3FE0BE) 28%, transparent) 70%,
    color-mix(in srgb, var(--aqua, #3FE0BE) 46%, white) 86%, rgba(255,255,255,.92));
}

.room__caption,
.room__instrument .room__kicker,
.weather-room .panel__close {
  background:
    linear-gradient(140deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 32%, rgba(255,255,255,.09)),
    radial-gradient(120% 120% at 0% -30%, rgba(255,255,255,.30), transparent 42%),
    rgba(8,13,19,.22);
  border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.08);
          backdrop-filter: blur(20px) saturate(165%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(5,8,12,.24),
    0 14px 34px rgba(0,0,0,.25);
}

.launch-card,
.app__get {
  border-radius: 12px;
}
.launch-card__signal,
.app__qr {
  border-radius: 10px;
}

/* Keep the in-world HUD mark on the same living wordmark system as the landing:
   the button chrome is glass, but the title/symbol/back chevron stay canvas-led. */
.hud__mark.wordmark--hud {
  display: inline-block;
  padding: 0 1.05em 0 0;
  min-height: 0;
  color: transparent;
  text-shadow: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  overflow: visible;
  font-size: clamp(1.12rem, 1.55vw, 1.24rem);
  font-weight: 500;
  line-height: 1.04;
}

.hud__mark.wordmark--hud::before {
  content: "";
  position: absolute;
  inset: -.48rem -.82rem;
  z-index: -1;
  border-radius: 999px;
  border: 1px solid rgba(236,250,255,.62);
  background:
    linear-gradient(145deg, rgba(5,9,14,.92), rgba(6,12,18,.76) 34%, rgba(7,13,20,.84)),
    radial-gradient(150% 130% at 4% -24%, rgba(255,255,255,.36), transparent 38%),
    radial-gradient(130% 110% at 102% 112%, rgba(11,212,251,.3), transparent 56%),
    rgba(2,6,11,.78);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(.78);
          backdrop-filter: blur(30px) saturate(200%) brightness(.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(1,5,9,.5),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 12px 30px rgba(0,0,0,.42),
    0 0 34px rgba(11,212,251,.18);
  transition: border-color .25s var(--ease-out), box-shadow .25s ease, background .25s ease;
}

.hud__mark.wordmark--hud:hover::before,
.hud__mark.wordmark--hud.armed::before {
  border-color: rgba(236,250,255,.74);
  background:
    linear-gradient(145deg, rgba(8,14,21,.9), rgba(10,18,26,.68) 34%, rgba(10,18,26,.78)),
    radial-gradient(150% 130% at 4% -24%, rgba(255,255,255,.42), transparent 40%),
    radial-gradient(130% 112% at 102% 112%, rgba(11,212,251,.32), transparent 58%),
    rgba(4,8,13,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(1,5,9,.44),
    0 18px 42px rgba(0,0,0,.26),
    0 0 34px rgba(11,212,251,.18);
}

.hud__mark.wordmark--hud .wordmark__cv,
.hud__mark.wordmark--hud .wordmark__back {
  display: block;
}

.hud__mark.wordmark--hud .wordmark__cv {
  filter:
    saturate(2.1)
    brightness(1.58)
    contrast(1.34)
    drop-shadow(0 0 2px rgba(255,255,255,.42))
    drop-shadow(0 0 10px rgba(11,212,251,.7));
}

.hud__mark.wordmark--hud .wordmark__dot {
  display: grid;
  left: calc(100% - .72em);
  filter:
    saturate(1.9)
    brightness(1.46)
    drop-shadow(0 0 8px rgba(11,212,251,.72));
}

.hud__mark.wordmark--hud .wordmark__dot .px {
  box-shadow:
    0 0 .18em rgba(255,255,255,.48),
    0 0 .3em rgba(11,212,251,.88);
}

.hud__mark.wordmark--hud.armed .wordmark__cv,
.hud__mark.wordmark--hud.armed .wordmark__dot {
  opacity: .12;
}

.hud__mark.wordmark--hud.armed .wordmark__back {
  opacity: 1;
  transform: translateY(-46%) scale(1.28);
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.72))
    drop-shadow(0 0 10px rgba(11,212,251,.46));
}

.doormenu--hud .doorrow {
  background: rgba(4,8,13,.34);
  border-color: rgba(236,250,255,.12);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(.88);
          backdrop-filter: blur(14px) saturate(170%) brightness(.88);
  box-shadow: 0 8px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.09);
}

.doormenu--hud .doorrow__sub {
  color: rgba(232,248,255,.82);
  opacity: .68;
}

.doormenu--hud .doorrow:hover,
.doormenu--hud .doorrow.is-active {
  background: rgba(5,10,16,.58);
  border-color: rgba(236,250,255,.26);
}

@media (max-width: 720px) {
  .hud__mark.wordmark--hud {
    font-size: .9rem;
  }
}