:root {
  --bg: #050606;
  --bg-soft: #0a0c0b;
  --ink: #c9d1cb;
  --ink-dim: #6f7a73;
  --ink-faint: #7c887f;
  --accent: #5ef0a8;          /* phosphor mint — STATUS: hope / resolved / accelerating */
  --accent-dim: #2f7d57;
  --signal-dim: color-mix(in srgb, #5ef0a8 52%, transparent);  /* lit but NOT glowing — ~90% of mint elements */
  --warn: #e8b34a;            /* STATUS: mixed / caution only */
  --strike: #c8553d;          /* STATUS: friction / fear / floored only */
  /* glow is rationed: --glow is the calm default; --glow-strong is for ONE hero element per viewport */
  --glow: 0 0 1px rgba(94, 240, 168, .42);
  --glow-strong: 0 0 2px rgba(94, 240, 168, .55), 0 0 18px rgba(94, 240, 168, .2);
  --mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  /* --disp now lives in tokens.css (Space Grotesk) — loaded before this file */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(120% 120% at 50% -10%, #0b1410 0%, var(--bg) 55%, #000 100%);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--accent-dim); color: #02110a; }

/* ░░░ CRT OVERLAYS ░░░ */
.crt-scanlines,
.crt-vignette,
.crt-flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}
/* scanlines: subliminal, not the cheap .55 multiply — barely-there 4px pitch */
.crt-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, .07) 3px,
    rgba(0, 0, 0, .07) 4px
  );
}
.crt-vignette {
  background: radial-gradient(122% 96% at 50% 44%, transparent 54%, rgba(0,0,0,.74) 100%);
}
/* flicker: barely-there irregular phosphor breathing, not aggressive on/off */
.crt-flicker {
  background: rgba(94, 240, 168, .014);
  animation: flicker 9s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: .5; }
  46% { opacity: .54; } 47% { opacity: .43; } 49% { opacity: .52; }
  76% { opacity: .47; } 78% { opacity: .56; } 80% { opacity: .49; }
}
/* baked phosphor grain — static tile, shimmer via background-position only (never animate feTurbulence) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  mix-blend-mode: overlay;
  opacity: .045;
}

/* ░░░ CRT steps back on content screens ░░░
   boot / puzzles / the world keep full phosphor theatre; the dashboard and gallery get
   the texture without the fatigue — scanlines fade, flicker dies, vignette loosens */
.crt-scanlines, .crt-vignette, .crt-flicker { transition: opacity .6s ease; }
body:has(#s-dash.active) .crt-scanlines, body:has(#s-gallery.active) .crt-scanlines { opacity: .32; }
body:has(#s-dash.active) .crt-flicker, body:has(#s-gallery.active) .crt-flicker { animation: none; opacity: .25; }
body:has(#s-dash.active) .crt-vignette, body:has(#s-gallery.active) .crt-vignette { opacity: .5; }

/* ░░░ scanning-reticle cursor ░░░ */
.has-reticle, .has-reticle * { cursor: none !important; }
.reticle { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; width: 0; height: 0; will-change: transform; }
.reticle .r-h, .reticle .r-v { position: absolute; background: var(--accent); opacity: .75; transition: opacity .18s, box-shadow .18s; }
.reticle .r-h { left: -11px; top: -.5px; width: 22px; height: 1px; }
.reticle .r-v { top: -11px; left: -.5px; width: 1px; height: 22px; }
.reticle .r-dot { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border: 1px solid var(--accent); border-radius: 50%; opacity: .45; transition: transform .18s cubic-bezier(.2,.7,.2,1), opacity .18s; }
.reticle.hot .r-dot { transform: scale(2.6); opacity: 1; box-shadow: var(--glow-strong); }
.reticle.hot .r-h, .reticle.hot .r-v { opacity: 1; box-shadow: var(--glow); }
[data-magnetic] { transition: transform .25s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* ░░░ BOOT ░░░ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  background: var(--bg);
  transition: opacity .8s ease;
}
.boot.is-gone { opacity: 0; pointer-events: none; }

.boot-inner {
  width: min(640px, 100%);
}
.boot-log {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
.boot-log .ok { color: var(--accent); text-shadow: var(--glow); }
.boot-log .dim { color: var(--ink-faint); }
.boot-log .you { color: var(--ink); }

.cursor::after {
  content: '▋';
  margin-left: 2px;
  color: var(--accent);
  animation: blink 1s steps(2) infinite;
  text-shadow: var(--glow);
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.boot-progress {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-dim);
}
.boot-progress-label { letter-spacing: .15em; text-transform: uppercase; }
.boot-bar {
  flex: 1;
  font-family: var(--mono);
  color: var(--accent);
  text-shadow: var(--glow);
  white-space: nowrap;
  overflow: hidden;
}
.boot-pct { color: var(--ink); min-width: 42px; text-align: right; }

.enter-btn {
  margin-top: 30px;
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .12em;
  padding: 12px 22px;
  cursor: pointer;
  text-shadow: var(--glow);
  transition: background .25s, box-shadow .25s;
  animation: fadeUp .6s ease both;
}
.enter-btn:hover {
  background: rgba(94, 240, 168, .08);
  box-shadow: var(--glow);
}

/* ░░░ DOCUMENT ░░░ */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 14vh 24px 12vh;
}

.masthead { margin-bottom: 14vh; }
.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 14px;
  margin-bottom: 9vh;
}

.title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(48px, 13vw, 132px);
  letter-spacing: .04em;
  line-height: .95;
}
.title-word {
  display: inline-block;
  color: var(--ink);
  position: relative;
}
.title-word.glitch { animation: glitch .4s steps(2) 3; }
@keyframes glitch {
  0% { transform: translate(0,0); text-shadow: -2px 0 var(--strike), 2px 0 var(--accent); }
  50% { transform: translate(2px,-1px); text-shadow: 2px 0 var(--strike), -2px 0 var(--accent); }
  100% { transform: translate(0,0); text-shadow: var(--glow); }
}
.title-word.settled { text-shadow: var(--glow); color: #eafff3; }

.title-reading {
  margin: 22px 0 0;
  font-size: clamp(14px, 2.4vw, 18px);
  color: var(--strike);
  letter-spacing: .04em;
  font-style: italic;
  transition: opacity .6s ease;
}
.title-reading.fade-out { opacity: 0; }
.title-reading--true { color: var(--accent); text-shadow: var(--glow); font-style: normal; }
.title-reading--true .reading-new { font-style: italic; }

/* blocks */
.block {
  margin: 13vh 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.block.in { opacity: 1; transform: none; }

.lede {
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.5;
  font-weight: 300;
  color: #eafff3;
}
.lede em { color: var(--ink-dim); font-style: italic; }

.h {
  font-size: clamp(15px, 2.6vw, 19px);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent);
  text-shadow: var(--glow);
  margin: 0 0 22px;
}

.block p { margin: 0 0 18px; max-width: 62ch; }
.block b { color: #eafff3; font-weight: 600; }
.block em { color: var(--ink-dim); }

.strike {
  position: relative;
  color: var(--strike);
  text-decoration: line-through;
  text-decoration-color: var(--strike);
}
.zero {
  color: var(--accent);
  font-weight: 600;
  text-shadow: var(--glow);
}
.we {
  margin-top: 32px;
  font-size: clamp(17px, 2.8vw, 22px);
  color: #eafff3;
  border-left: 2px solid var(--accent-dim);
  padding-left: 18px;
  font-style: italic;
}

/* decrypted record — receipts */
.receipts {
  margin: 30px 0 8px;
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  background: rgba(0, 0, 0, .38);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.85;
  overflow-x: auto;
}
.receipts-head {
  display: block;
  color: var(--accent-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 12px;
}
.receipts pre {
  margin: 0;
  white-space: pre;
  color: var(--ink-dim);
  font-family: var(--mono);
}
.receipts .v { color: #eafff3; }
.receipts .g { color: var(--accent); text-shadow: var(--glow); }
.receipts-note {
  display: block;
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: normal;
}
.receipts-src { color: var(--ink-faint); font-size: 11px; margin: 8px 0 0; }
.receipts-src a { color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); }
.receipts-src a:hover { color: var(--accent); }

/* join form */
.join-form { margin-top: 30px; max-width: 62ch; }
.field { display: block; margin-bottom: 22px; }
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  caret-color: var(--accent);
  resize: vertical;
  transition: border-color .25s, box-shadow .25s;
}
.field-input:focus {
  border-color: var(--accent-dim);
  box-shadow: var(--glow);
}
.field-input::placeholder { color: var(--ink-faint); }

.ways { border: none; margin: 0 0 22px; padding: 0; }
.ways legend { padding: 0; }
.way {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  cursor: pointer;
  color: var(--ink-dim);
  transition: color .2s;
  border-bottom: 1px dashed var(--ink-faint);
}
.way:hover { color: var(--ink); }
.way input { margin: 4px 0 0; accent-color: var(--accent); cursor: pointer; }
.way input:checked + span { color: var(--accent); text-shadow: var(--glow); }

.join-status {
  margin: 16px 0 0;
  font-size: 13.5px;
}
.join-status.err { color: var(--warn); }
.join-status.ok { color: var(--accent); text-shadow: var(--glow); }
.join-status.working { color: var(--ink-dim); }

/* signed-in status pill — fixed, visible on every screen so you always know your state */
.auth-pill { position: fixed; top: 10px; right: 12px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(6,12,9,.82); border: 1px solid var(--ink-faint); border-radius: 999px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.auth-pill[hidden] { display: none; }
.auth-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); flex: none; }
.auth-pill-dot.admin { background: var(--warn); }
.auth-pill-who { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-pill-out { background: none; border: 0; color: var(--accent); font-family: var(--mono); font-size: 11.5px; cursor: pointer; padding: 0 0 0 2px; text-decoration: underline; text-underline-offset: 2px; }
.auth-pill-out:hover { text-shadow: var(--glow); }
@media (max-width: 620px) { .auth-pill { top: 8px; right: 8px; font-size: 10.5px; padding: 4px 8px; } .auth-pill-who { max-width: 30vw; } }

.pledge-box { margin-top: 28px; }
.pledge-btn, .share-btn {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  padding: 12px 20px;
  cursor: pointer;
  text-shadow: var(--glow);
  transition: background .25s, box-shadow .25s, transform .1s;
}
.pledge-btn:hover, .share-btn:hover {
  background: rgba(94, 240, 168, .08);
  box-shadow: var(--glow);
}
.pledge-btn:active, .share-btn:active { transform: translateY(1px); }
.pledge-result { margin-top: 24px; animation: fadeUp .6s ease both; }
.pledge-confirm { color: var(--accent); text-shadow: var(--glow); margin: 0 0 6px; }
#node-id { color: #eafff3; }
.pledge-sub { color: var(--ink-faint); font-size: 13px; margin: 0 0 20px; }
.share-note {
  display: inline-block;
  margin-left: 14px;
  color: var(--ink-dim);
  font-size: 13px;
  animation: fadeUp .4s ease both;
}

/* footer */
.doc-footer {
  margin-top: 16vh;
  padding-top: 18px;
  border-top: 1px solid var(--ink-faint);
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.footer-hint { text-transform: none; letter-spacing: .02em; color: var(--ink-dim); }
.kbd {
  border: 1px solid var(--ink-faint);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--accent);
}

/* ░░░ CLI ░░░ */
.cli {
  margin-top: 7vh;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 13.5px;
}
.cli-out { color: var(--ink-dim); white-space: pre-wrap; margin-bottom: 8px; }
.cli-out .resp { color: var(--ink); display: block; margin: 2px 0 12px; }
.cli-out .echo { color: var(--accent); }
.cli-input-row { display: flex; align-items: center; gap: 10px; }
.cli-prompt { color: var(--accent); text-shadow: var(--glow); white-space: nowrap; }
.cli-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13.5px;
  caret-color: var(--accent);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .crt-flicker, .cursor::after, .title-word.glitch { animation: none; }
  .screen.entering, .screen.leaving { animation: none; clip-path: none; }
  .block { transition: none; opacity: 1; transform: none; }
  [data-magnetic] { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 540px) {
  body { font-size: 15px; }
  .doc { padding: 10vh 20px 10vh; }
  .masthead-meta { font-size: 10px; gap: 4px 14px; }
}

/* ═══════════════════ THE WALKTHROUGH (gamified gate) ═══════════════════ */
#app { position: relative; min-height: 100vh; }

.screen {
  position: fixed;
  inset: 0;
  display: none;
  padding: 7vh 24px;
  overflow-y: auto;
}
.screen.active { display: flex; }
/* center via auto-margins, not align/justify — scroll-safe when content overflows */
.screen > * { margin: auto; }
.screen.entering { animation: screenIn .62s cubic-bezier(.2,.7,.2,1) both; }
.screen.leaving { animation: screenOut .32s ease both; }
/* DECODE > FADE: the screen scans into existence top→bottom like a CRT, no blur-fade SPA tell */
@keyframes screenIn {
  from { opacity: .35; clip-path: inset(0 0 100% 0); }
  55%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes screenOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.stage {
  width: min(680px, 100%);
  margin: auto;
}

/* step counter / chrome */
.step-tag {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.step-dots { display: inline-flex; gap: 6px; }
.step-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); display: inline-block;
  transition: background .3s, box-shadow .3s;
}
.step-dots i.on { background: var(--accent); box-shadow: var(--glow); }

.stage h2.prompt {
  font-family: var(--disp);
  font-size: clamp(26px, 5.2vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #eafff3;
  text-shadow: var(--glow-strong);
  margin: 0 0 18px;
}
.stage h2.prompt em { color: var(--strike); font-style: normal; }
.stage .sub {
  color: var(--ink-dim);
  font-size: clamp(14px, 2.3vw, 17px);
  line-height: 1.6;
  margin: 0 0 34px;
  max-width: 52ch;
}

/* generic primary button */
.btn {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  padding: 13px 24px;
  cursor: pointer;
  text-shadow: var(--glow);
  transition: background .2s, box-shadow .2s, transform .08s, opacity .2s;
}
.btn:hover { background: rgba(94,240,168,.09); box-shadow: var(--glow); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; background: none; }
.btn.ghost { border-color: var(--ink-faint); color: var(--ink-dim); text-shadow: none; }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); background: rgba(255,255,255,.03); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }


/* fragment reward (decrypted line after a game) */
.fragment {
  margin-top: 26px;
  border-left: 2px solid var(--accent-dim);
  padding: 4px 0 4px 18px;
  color: #eafff3;
  font-size: clamp(16px, 2.6vw, 20px);
  font-style: italic;
  min-height: 1.4em;
}
.fragment-tag { display:block; font-style: normal; font-size: 10px; letter-spacing:.24em; text-transform:uppercase; color: var(--accent-dim); margin-bottom: 8px; }

/* ── GAME 1 · isolate the signal ── */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 8px 0 4px;
  user-select: none;
}
.signal-grid.lock { pointer-events: none; }
.signal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 2.4vw, 18px);
  color: var(--ink-faint);
  background: rgba(255,255,255,.012);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.signal-cell:hover { border-color: var(--ink-faint); }
.signal-cell.signal { color: var(--accent); text-shadow: var(--glow); }
.signal-cell.hit { background: rgba(94,240,168,.16); border-color: var(--accent-dim); color: #eafff3; }
.signal-cell.miss { animation: cellMiss .3s; }
@keyframes cellMiss { 0%,100%{transform:none} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ── GAME 2 · the sequence ── */
.seq {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: clamp(26px, 6vw, 52px);
  color: #eafff3; margin: 6px 0 30px;
}
.seq .n { color: var(--ink-dim); }
.seq .q { color: var(--accent); text-shadow: var(--glow); border-bottom: 2px solid var(--accent-dim); }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 360px; }
.opt {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 22px;
  padding: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color .15s, background .15s, transform .08s;
}
.opt:hover { border-color: var(--accent-dim); background: rgba(94,240,168,.05); }
.opt.ok { border-color: var(--accent); color: var(--accent); text-shadow: var(--glow); background: rgba(94,240,168,.12); }
.opt.no { border-color: var(--strike); color: var(--strike); animation: cellMiss .3s; }

/* ── GAME 3 · the network ── */
.netfield {
  position: relative;
  width: 100%;
  height: min(360px, 56vw);
  margin: 4px 0;
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(94,240,168,.04), transparent 60%),
    rgba(0,0,0,.28);
  overflow: hidden;
}
.netfield svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.netfield svg line { stroke: var(--accent-dim); stroke-width: 1; opacity: 0; transition: opacity .5s; }
.netfield svg line.on { opacity: .7; }
.node {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--ink-dim);
  cursor: pointer;
  transition: background .2s, box-shadow .2s, border-color .2s, transform .15s;
}
.node:hover { transform: scale(1.25); border-color: var(--accent-dim); }
.node.lit { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.netfield.solved .node.lit { animation: nodePulse 2s infinite ease-in-out; }
@keyframes nodePulse { 0%,100%{box-shadow:0 0 1px rgba(94,240,168,.5),0 0 10px rgba(94,240,168,.25)} 50%{box-shadow:0 0 2px rgba(94,240,168,.8),0 0 22px rgba(94,240,168,.55)} }

/* ── shared puzzle chrome ── */
.puzzle-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.puzzle-meter { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.puzzle-hint { font-size: 12.5px; color: var(--warn); font-style: italic; }
.btn.sm { font-size: 13px; padding: 9px 15px; letter-spacing: .08em; }
.field-input.sm { width: auto; flex: 1; min-width: 150px; padding: 9px 12px; font-size: 14px; }
.field-input.sm.err { border-color: var(--strike); animation: cellMiss .3s; }

/* ── nine dots (think outside the box) ── */
.ninebox { width: min(360px, 86vw); margin: 6px auto 0; }
#nine-svg { width: 100%; aspect-ratio: 1; display: block; cursor: crosshair; touch-action: manipulation; }
#nine-svg .box { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 6; }
#nine-svg .dot { fill: var(--ink-dim); transition: fill .2s; }
#nine-svg .dot.covered { fill: var(--accent); }
#nine-svg .anchor { fill: var(--ink-faint); opacity: .5; }
#nine-svg .ghost { fill: none; stroke: var(--accent-dim); stroke-width: 2; stroke-dasharray: 5 7; opacity: .8; }
#nine-svg .path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(94,240,168,.5)); }
#nine-svg .vtx { fill: #eafff3; }
.ninebox.solved #nine-svg { cursor: default; }

/* ── lights out ── */
.lights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(300px, 72vw); margin: 6px auto 0; }
.lights-cell { aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--ink-faint); background: rgba(255,255,255,.02); cursor: pointer; transition: background .18s, box-shadow .18s, border-color .18s, transform .07s; }
.lights-cell:active { transform: scale(.95); }
.lights-cell.on { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.lights.solved .lights-cell.on { animation: nodePulse 2s infinite ease-in-out; }

/* ── hidden word ── */
.hidden-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: 100%; max-width: 520px; margin: 6px 0 0; user-select: none; }
.hidden-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, 2vw, 15px); color: var(--ink-faint); opacity: .6; }
.hidden-cell.glow { color: var(--accent-dim); opacity: 1; }
.hidden-grid.reveal .hidden-cell.glow { color: var(--accent); text-shadow: var(--glow); }
.hidden-grid.solved .hidden-cell.glow { color: #eafff3; text-shadow: var(--glow); }

/* ── the grid (pixel maze) ── */
.maze {
  display: block; margin: 16px auto 0;
  width: min(440px, 96%); height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--ink-faint); border-radius: 4px;
  background: #04130b; outline: none;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}
.puzzle-meter.mono { color: var(--ink-faint); }

/* ── the doors (wrap-around corridor) ── */
.doors { position: relative; display: flex; gap: 8px; justify-content: center; margin: 22px auto 0; width: min(440px, 92%); }
.doors::before, .doors::after { content: '↺'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 14px; opacity: .7; }
.doors::before { left: -20px; }
.doors::after { right: -20px; }
.door {
  flex: 1; max-width: 60px; aspect-ratio: .62;
  border: 1px solid var(--ink-faint); border-radius: 5px 5px 2px 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink-dim);
  background: rgba(0, 0, 0, .25); position: relative; transition: border-color .18s, box-shadow .18s, color .18s;
}
.door.in { border-color: var(--accent-dim); color: var(--accent); box-shadow: inset 0 0 16px rgba(94,240,168,.12); }
.door.in::after { content: 'in'; position: absolute; bottom: 4px; font-size: 9px; letter-spacing: .12em; color: var(--accent-dim); }
.door.locked { border-color: var(--strike); color: var(--strike); }
.door.here { box-shadow: 0 0 0 1px var(--accent), var(--glow); color: #eafff3; }
.door.here::before { content: '▾'; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); color: var(--accent); font-size: 12px; text-shadow: var(--glow); }
.door.bump { animation: cellMiss .3s; }
.doors.solved .door.in { animation: nodePulse 2s infinite ease-in-out; }

/* ── QUESTIONS ── */
.qbtns { display: flex; gap: 16px; margin-top: 8px; }
.qbtn {
  flex: 1; max-width: 200px;
  background: none;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 22px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color .2s, color .2s, background .2s, transform .08s;
}
.qbtn:hover { border-color: var(--accent-dim); color: var(--accent); background: rgba(94,240,168,.05); }
.qbtn:active { transform: translateY(1px); }
.qresponse {
  margin-top: 28px;
  color: #eafff3;
  font-size: clamp(16px, 2.6vw, 20px);
  line-height: 1.55;
  min-height: 1.4em;
  max-width: 48ch;
}

/* ── LOGIN / create key ── */
.keyform { margin-top: 12px; max-width: 420px; }
.keyform .field { margin-bottom: 20px; }
.keyform .hint { color: var(--ink-faint); font-size: 12px; margin: 6px 0 0; }

/* ── WAIT / sealed door ── */
.seal { text-align: center; }
.seal-ring {
  width: 168px; height: 168px; margin: 0 auto 28px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.seal-ring::before, .seal-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--accent-dim);
  animation: spin 9s linear infinite;
}
.seal-ring::after { inset: 12px; border-top-color: transparent; border-left-color: var(--accent-dim); animation-duration: 6s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-glyph { font-size: 30px; color: var(--accent); text-shadow: var(--glow); }
.countdown {
  font-size: clamp(34px, 9vw, 64px);
  letter-spacing: .06em;
  color: #eafff3;
  text-shadow: var(--glow);
  font-variant-numeric: tabular-nums;
}
.countdown-label { color: var(--ink-faint); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; }
.wait-copy { color: var(--ink-dim); max-width: 46ch; margin: 26px auto 0; line-height: 1.6; }
.wait-read { margin-top: 34px; }

/* ═══════════ DASHBOARD (the inside) ═══════════ */
.screen.dash { padding: 0; }
.screen.dash.active { display: block; }   /* block, not flex — so the hud fills full width on every tab */
.screen.dash > * { margin: 0; }   /* override auto-centering — fill + top-align */
.dash-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 22px 64px; }

.dash-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--ink-faint); }
.dash-brand { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: .14em; color: #eafff3; text-shadow: var(--glow); background: none; border: none; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity .15s; }
.dash-brand:hover { opacity: .82; }
.dash-brand:hover .dash-badge { color: var(--accent); }
.dash-badge { color: var(--accent-dim); font-weight: 400; font-size: 11px; letter-spacing: .2em; margin-left: 9px; }
.dash-id { display: flex; gap: 18px; align-items: center; font-size: 12px; }
.dash-online { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-dim); letter-spacing: .03em; }
.dash-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); animation: nodePulse 2.4s infinite ease-in-out; }
.dash-me { color: var(--accent); }
.dash-me .dim { color: var(--ink-faint); }

.dash-ticker { overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--ink-faint); padding: 8px 0; margin-bottom: 22px; }
.dash-ticker-track { display: inline-block; padding-left: 100%; color: var(--ink-faint); font-size: 12px; letter-spacing: .14em; animation: ticker 36s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

.dash-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }

.room { border: 1px solid var(--ink-faint); border-radius: 6px; background: rgba(0,0,0,.28); padding: 16px; }
.room-fwd { border-top: 2px solid var(--accent-dim); }
.room-fric { border-top: 2px solid var(--strike); }
.room-sig { border-top: 2px solid var(--ink-dim); }
.room-h { margin: 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.room-fwd .room-h { color: var(--accent); text-shadow: var(--glow); }
.room-fric .room-h { color: var(--strike); }
.room-sig .room-h { color: #eafff3; }
.room-tag { margin: 4px 0 16px; font-size: 11px; color: var(--ink-faint); letter-spacing: .03em; }
.room-feed { display: flex; flex-direction: column; gap: 10px; }

.card { border: 1px solid var(--ink-faint); border-radius: 5px; padding: 12px; background: rgba(255,255,255,.012); transition: border-color .2s; }
.card:hover { border-color: var(--ink-dim); }
.card-h { font-size: 13.5px; color: #eafff3; line-height: 1.35; margin-bottom: 6px; }
.card-b { font-size: 12px; color: var(--ink-dim); line-height: 1.45; margin-bottom: 10px; }
.card-m { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-src { font-size: 10.5px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.boost { background: none; border: 1px solid var(--ink-faint); border-radius: 20px; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; padding: 3px 11px; cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap; }
.boost:hover { border-color: var(--accent-dim); color: var(--accent); }
.boost.on { border-color: var(--accent-dim); color: var(--accent); text-shadow: var(--glow); }

.sig-compose { display: flex; gap: 8px; margin-bottom: 16px; }
.sig-compose input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid var(--ink-faint); border-radius: 4px; color: var(--ink); font-family: var(--mono); font-size: 13.5px; padding: 10px 12px; outline: none; caret-color: var(--accent); }
.sig-compose input:focus { border-color: var(--accent-dim); box-shadow: var(--glow); }

.post { border-bottom: 1px solid var(--ink-faint); padding: 11px 2px; }
.post:last-child { border-bottom: none; }
.post-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.post-who { color: var(--accent); font-size: 12.5px; text-shadow: var(--glow); }
.post-node { color: var(--ink-faint); font-size: 10.5px; }
.post-t { color: var(--ink-faint); font-size: 10.5px; margin-left: auto; }
.post-body { color: var(--ink); font-size: 13.5px; line-height: 1.5; word-break: break-word; }

/* ── dashboard polish ── */
.dash-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
.dash-wrap { position: relative; z-index: 1; }

/* entrance choreography */
.screen.dash.active .dash-head { animation: fadeUp .5s ease both; }
.screen.dash.active .dash-ticker { animation: fadeUp .5s ease .08s both; }
.screen.dash.active .room { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.screen.dash.active .room-fwd { animation-delay: .14s; }
.screen.dash.active .room-sig { animation-delay: .22s; }
.screen.dash.active .room-fric { animation-delay: .30s; }

/* ticker edge fade */
.dash-ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* card hover lift */
.card { transition: border-color .2s, transform .15s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* presence tick */
#dash-count { transition: color .2s; }
#dash-count.tick { color: var(--accent); text-shadow: var(--glow); }

/* boost pop + float */
.boost { position: relative; transition: border-color .15s, color .15s, transform .12s; }
.boost.pop { transform: scale(1.12); }
.boost-float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); color: var(--accent); font-size: 11px; pointer-events: none; animation: floatUp .7s ease forwards; }
.room-fric .boost-float { color: var(--strike); }
@keyframes floatUp { from { opacity: 1; top: -4px; } to { opacity: 0; top: -20px; } }

/* fresh post glow-in */
.post.fresh { animation: postIn .8s ease; }
@keyframes postIn {
  0% { background: rgba(94, 240, 168, .16); transform: translateY(-4px); opacity: .45; }
  100% { background: transparent; transform: none; opacity: 1; }
}

/* ═══════════ THE PULL ═══════════ */
.pull-stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.pull-hud { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 18px 22px 16px; pointer-events: none; }
.pull-hud > * { pointer-events: auto; }
.pull-backdrop { position: absolute; inset: 0; z-index: 2; background: rgba(2, 10, 7, .55); }

.pull-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pull-meter { flex: 1; min-width: 200px; max-width: 460px; }
.pull-meter-bar { position: relative; height: 9px; border: 1px solid var(--ink-faint); border-radius: 6px; overflow: hidden; background: rgba(200, 85, 61, .16); }
.pull-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.pull-meter-label { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pull-meter-label b { color: var(--accent); text-shadow: var(--glow); font-size: 12px; letter-spacing: .05em; }
.pull-meter-label .lbl-fric { color: var(--strike); }
.pull-meter-label .lbl-fwd { color: var(--accent); }

/* THE CLIMB view */
.climb-view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 2; overflow-y: auto; padding: 10px 22px 44px; background: linear-gradient(180deg, rgba(4,16,11,.86), rgba(4,16,11,.97)); }
.climb-view .goal-head { max-width: 1180px; margin: 0 auto 22px; }
.climb-layout { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 30px; align-items: start; }
.climb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.climb-side { position: sticky; top: 0; display: flex; flex-direction: column; }
.climb-side-h { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 12px; }
@media (max-width: 820px) { .climb-layout { grid-template-columns: 1fr; } .climb-side { position: static; margin-top: 26px; } }
@media (max-width: 720px) { .climb-cols { grid-template-columns: 1fr; gap: 18px; } .climb-view { top: 132px; } }
.climb-h { margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.climb-h.down { color: var(--accent); text-shadow: var(--glow); }
.climb-h.up { color: var(--strike); }
.climb-bars { display: flex; flex-direction: column; gap: 13px; }
.climb-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab lab" "track val"; gap: 5px 10px; align-items: center; }
.climb-lab { grid-area: lab; display: flex; flex-direction: column; }
.climb-lab span { font-size: 12.5px; color: #eafff3; }
.climb-lab small { font-size: 10px; color: var(--ink-faint); letter-spacing: .02em; margin-top: 1px; }
.climb-bar { grid-area: track; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1; letter-spacing: -.5px; white-space: pre; overflow: hidden; }
.climb-bar.down .cb-fill { color: var(--accent); text-shadow: var(--glow); }
.climb-bar.up .cb-fill { color: var(--strike); }
.climb-bar .cb-empty { color: var(--ink-faint); opacity: .5; }
.climb-track { grid-area: track; position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,.04); overflow: hidden; }
.climb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; animation: climbGrow .9s cubic-bezier(.2,.7,.2,1) both; }
.climb-fill.down { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); }
.climb-fill.up { background: linear-gradient(90deg, #6b2f25, var(--strike)); }
.climb-val { grid-area: val; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.climb-val.down { color: var(--accent); }
.climb-val.up { color: var(--strike); }
@keyframes climbGrow { from { width: 0 !important; opacity: .4; } }

.climb-cards { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 720px) { .climb-cards { grid-template-columns: repeat(2, 1fr); } }
.climb-card { border: 1px solid var(--ink-faint); border-top: 2px solid var(--accent-dim); border-radius: 0; background: rgba(0,0,0,.3); padding: 14px; }
.climb-card.up { border-top-color: var(--strike); }
.climb-card-big { font-size: clamp(20px, 3vw, 28px); font-weight: 600; color: var(--accent); text-shadow: var(--glow); letter-spacing: .02em; }
.climb-card.up .climb-card-big { color: var(--strike); text-shadow: none; }
.climb-card-t { font-size: 12px; color: #eafff3; margin-top: 6px; line-height: 1.3; }
.climb-card-s { font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.45; }
.climb-note { margin: 16px 0 0; font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; }

/* register tab bar — brutalist, not pills */
.pull-nav { display: flex; gap: 0; margin-top: 16px; border-bottom: 1px solid var(--ink-faint); }
.nav-btn { position: relative; background: none; border: none; color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 11px 18px 11px 26px; cursor: pointer; transition: color .18s; }
.nav-btn::before { content: '▸'; position: absolute; left: 11px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.nav-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); box-shadow: var(--glow-strong); transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.2,.7,.2,1); }
.nav-btn:hover { color: var(--ink); }
.nav-btn.active { color: var(--accent); text-shadow: var(--glow); }
.nav-btn.active::before { opacity: 1; transform: none; text-shadow: var(--glow); }
.nav-btn.active::after { transform: scaleX(1); }
/* "the mission" — leaves to the home page, sits apart */
.nav-go { margin-left: auto; padding-left: 18px; color: var(--ink); }
.nav-go ~ .nav-go { margin-left: 0; }
.nav-go::before, .nav-go::after { content: none; }
.nav-go:hover { color: var(--accent); }

/* THE PULL — two sides + the day's balance in the middle */
.pull-top { justify-content: space-between; }
.pull-board { flex: 1; min-height: 0; margin-top: 18px; display: grid; grid-template-columns: 1fr minmax(216px, 272px) 1fr; grid-template-rows: minmax(0, 1fr); gap: 20px; }
.pull-board[hidden] { display: none; }
.pull-col { min-height: 0; display: flex; flex-direction: column; }
.col-fwd { text-align: right; }
.pull-col-h { margin: 0 0 3px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pull-col-h.fric { color: var(--strike); }
.pull-col-h.fwd { color: var(--accent); text-shadow: var(--glow); }
.pull-col-sub { margin: 0 0 14px; font-size: 11px; color: var(--ink-faint); }
.pcards { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; text-align: left; }
.col-fwd .pcards { padding-left: 2px; }
.pcard { border: 1px solid var(--ink-faint); border-left-width: 3px; border-radius: 0; padding: 12px 13px; background: rgba(0,0,0,.26); transition: border-color .16s, transform .16s; }
.pcard-media { display: block; margin: -12px -13px 12px; position: relative; overflow: hidden; }
.pcard-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(94,240,168,.08); background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.16) 2px 3px); }
.pcard.fric .pcard-media::after { box-shadow: inset 0 0 0 1px rgba(200,85,61,.1); }
.pcard-media canvas, .pcard-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pcard-media img { object-fit: cover; filter: grayscale(1) brightness(.78) contrast(1.06) sepia(.4) hue-rotate(90deg) saturate(1.3); }
.pcard.fric .pcard-media img { filter: grayscale(1) brightness(.78) contrast(1.06) sepia(.5) hue-rotate(-20deg) saturate(1.5); }
.pcard-media:hover img, .pcard-media:hover canvas { filter: none; opacity: 1; }
a.pcard-media:hover::after { box-shadow: inset 0 0 0 1px rgba(94,240,168,.3); }
.pcard.fwd { border-left-color: var(--accent-dim); }
.pcard.fric { border-left-color: var(--strike); }
.pcard.fwd:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.pcard.fric:hover { border-color: var(--strike); transform: translateY(-1px); }
.pcard-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.pcard-dom { display: inline-block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; }
.pcard.fwd .pcard-dom { color: var(--accent-dim); }
.pcard.fric .pcard-dom { color: var(--strike); }
.pcard-impact { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 6px; border-radius: 20px; }
.pcard-impact.up { color: var(--mkt-up); background: rgba(94,240,168,.1); }
.pcard-impact.dn { color: var(--mkt-dn); background: rgba(232,103,78,.1); }
.pcard-h { margin: 0 0 6px; font-size: 13.5px; line-height: 1.34; color: #eafff3; font-weight: 500; }
.pcard-b { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
.pcard-src { font-size: 10.5px; letter-spacing: .03em; color: var(--ink-faint); }
.pcard-read { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .08em; color: var(--mint, #5ef0a8); text-decoration: none; border-bottom: 1px dotted rgba(94, 240, 168, .45); }
.pcard-read:hover { border-bottom-style: solid; }

.pull-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 12px; border-left: 1px solid var(--ink-faint); border-right: 1px solid var(--ink-faint); }
.mid-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-dim); }
.mid-date { font-size: 11px; color: var(--ink-faint); margin-top: -4px; }
.tug { width: 100%; margin-top: 8px; }
.tug-ascii { margin: 0; width: 100%; font-family: var(--mono); font-size: clamp(9px, 2.4vw, 13px); line-height: 1; letter-spacing: -.5px; text-align: center; white-space: pre; overflow: hidden; }
.tug-ascii .g-fric { color: var(--strike); }
.tug-ascii .g-fwd { color: var(--accent); text-shadow: var(--glow); }
.tug-ascii .g-knot { color: #eafff3; text-shadow: var(--glow-strong); }
.tug-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tug-ends b { font-size: 12px; }
.tug-ends .e-fric b { color: var(--strike); }
.tug-ends .e-fwd b { color: var(--accent); text-shadow: var(--glow); }
.mid-verdict { text-align: center; margin-top: 8px; font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.mid-verdict.v-up { color: var(--accent); text-shadow: var(--glow); }
.mid-verdict.v-mid { color: var(--warn); }
.mid-verdict.v-down { color: var(--strike); }
.mid-note { text-align: center; margin: 6px 0 0; font-size: 10px; line-height: 1.45; color: var(--ink-faint); }
.mid-graph { width: 100%; margin-top: auto; padding-top: 12px; }

@media (max-width: 820px) {
  .pull-board { grid-template-columns: 1fr; grid-template-rows: none; gap: 22px; overflow-y: auto; }
  .pull-col, .pcards { overflow: visible; min-height: 0; flex: none; }
  .col-fwd { text-align: left; }
  .pull-mid { order: -1; border: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: 16px; }
}

/* THE GOAL view */
.goal-view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 2; overflow-y: auto; padding: 10px 22px 44px; background: linear-gradient(180deg, rgba(4,16,11,.86), rgba(4,16,11,.97)); }
.social-view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 2; overflow-y: auto; padding: 10px 22px 44px; background: linear-gradient(180deg, rgba(4,16,11,.86), rgba(4,16,11,.97)); }
.social-view .goal-head, .social-view .pull-comms { max-width: 880px; margin-left: auto; margin-right: auto; }
.social-view .pull-comms { margin-top: 22px; }
.social-view .pull-log { max-height: 52vh; overflow-y: auto; }
.goal-head { max-width: 1180px; margin: 0 auto 22px; }
.goal-split { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 20px; align-items: start; }
.goal-detail-pane { position: sticky; top: 0; border: 1px solid var(--ink-faint); background: rgba(4, 16, 11, .45); padding: 22px 24px; min-height: 62vh; }
.goal-detail-pane .goal-detail-card { width: auto; max-height: none; overflow: visible; margin: 0; padding: 0; border: none; background: none; box-shadow: none; animation: none; }
.gd-sigil-wrap { display: flex; justify-content: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-faint); }
.gd-sigil { display: block; }
.goal-cat.active { border-color: var(--accent-dim); background: rgba(94, 240, 168, .05); }
.goal-cat.active .goal-cat-caret { color: var(--accent); text-shadow: var(--glow); }
@media (max-width: 820px) { .goal-split { grid-template-columns: 1fr; } .goal-detail-pane { position: static; min-height: 0; } }
.goal-title { font-size: clamp(20px, 3.4vw, 30px); font-weight: 600; letter-spacing: .04em; color: #eafff3; text-shadow: var(--glow); }
.goal-tag { color: var(--ink-dim); font-size: 13px; margin: 6px 0 16px; }
.goal-status { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
.gs-item { font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); text-transform: uppercase; }
.gs-item b { font-size: 20px; letter-spacing: .02em; margin-right: 5px; }
.gs-item.st-acc b { color: var(--accent); text-shadow: var(--glow); }
.gs-item.st-mix b { color: var(--warn); }
.gs-item.st-flr b { color: var(--strike); }
.goal-grand-bar { position: relative; height: 14px; border: 1px solid var(--ink-faint); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.03); }
.goal-grand-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.goal-grand-pct { margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.goal-grand-pct b { color: var(--accent); text-shadow: var(--glow); font-size: 18px; }

.goal-cats { display: flex; flex-direction: column; gap: 7px; }
.goal-cat { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--ink-faint); border-radius: 0; background: rgba(0,0,0,.3); cursor: pointer; font-family: var(--mono); color: inherit; -webkit-appearance: none; appearance: none; transition: border-color .15s, background .15s; }
.goal-cat:hover { border-color: var(--ink-dim); background: rgba(255,255,255,.025); }
.goal-cat-idx { flex: none; min-width: 1.9em; font-size: 22px; font-weight: 300; line-height: 1; color: var(--ink-faint); letter-spacing: .01em; }
.goal-st { flex: none; width: 14px; text-align: center; font-size: 12px; }
.st-acc { color: var(--accent); text-shadow: var(--glow); }
.st-mix { color: var(--warn); }
.st-flr { color: var(--strike); }
.goal-cat-name { flex: 1; font-size: 13.5px; letter-spacing: .06em; color: #eafff3; }
.goal-cat-name small { display: block; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .02em; margin-top: 2px; }
.goal-cat-tag { flex: none; font-size: 11px; letter-spacing: .06em; }
.goal-cat-tag.st-acc { color: var(--accent); }
.goal-cat-tag.st-mix { color: var(--warn); }
.goal-cat-tag.st-flr { color: var(--strike); }
.goal-bar { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,.04); overflow: hidden; }
.goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); }
.goal-cat-pct { flex: none; width: 42px; text-align: right; font-size: 12px; color: var(--accent); }
.goal-cat-caret { flex: none; color: var(--ink-faint); transition: transform .2s; }
.goal-cat.open .goal-cat-caret { transform: rotate(90deg); }
.goal-subs { display: none; padding: 2px 16px 14px; }
.goal-cat.open .goal-subs { display: block; }
.goal-sub { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--ink-faint); }
.goal-sub-name { flex: 1; font-size: 12.5px; color: var(--ink-dim); }
.goal-sub .goal-bar { flex: none; width: 180px; }
.goal-sub-pct { flex: none; width: 36px; text-align: right; font-size: 11px; color: var(--ink-faint); }
@media (max-width: 620px) { .goal-view { top: 132px; } .social-view { top: 132px; } .goal-sub .goal-bar { width: 90px; } }

/* the goal — click-in detail card */
.goal-detail-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(2, 10, 7, .74); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.goal-detail-overlay[hidden] { display: none; }
.goal-detail-card { width: min(540px, 100%); max-height: 86vh; overflow-y: auto; margin: auto; background: rgba(4, 16, 11, .98); border: 1px solid var(--accent-dim); border-radius: 0; padding: 26px; box-shadow: 0 14px 56px rgba(0,0,0,.6); animation: fadeUp .3s ease; }
.gd-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 21px; font-weight: 600; letter-spacing: .07em; color: #eafff3; text-shadow: var(--glow); }
.gd-pill { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 20px; padding: 2px 10px; font-weight: 400; }
.gd-pill.st-acc { color: var(--accent); } .gd-pill.st-mix { color: var(--warn); } .gd-pill.st-flr { color: var(--strike); }
.gd-sub { color: var(--ink-faint); font-size: 12px; letter-spacing: .04em; margin-top: 7px; }
.gd-sec { margin-top: 20px; }
.gd-sec-h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 9px; }
.gd-li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
.gd-li:last-child { margin-bottom: 0; }
.gd-li::before { content: '·'; position: absolute; left: 3px; color: var(--accent-dim); }
.gd-note { margin-top: 16px; font-size: 12px; font-style: italic; color: var(--ink-faint); }
.gd-subs { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink-faint); display: flex; flex-direction: column; gap: 9px; }
.gd-subs .goal-sub { border-top: none; padding: 0; }
.gd-subs .goal-sub .goal-bar { width: 150px; }
.gd-src { margin-top: 18px; font-size: 11px; color: var(--ink-faint); line-height: 1.7; }
.gd-src a { color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); }
.gd-src a:hover { color: var(--accent); }
.goal-method { max-width: 760px; margin: 12px auto 0; font-size: 11px; color: var(--ink-faint); letter-spacing: .02em; }
.gd-meth { margin-top: 12px; padding: 9px 11px; border-left: 2px solid var(--ink-faint); background: rgba(255,255,255,.015); font-size: 11px; font-style: italic; color: var(--ink-faint); line-height: 1.55; }
.gd-traj-row { display: flex; align-items: center; gap: 14px; }
.gd-spark { flex: none; margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1; letter-spacing: -.5px; white-space: pre; }
.gd-spark.dir-up { color: var(--strike); }
.gd-spark.dir-down { color: var(--accent); text-shadow: var(--glow); }
.gd-spark.dir-flat { color: var(--warn); }
.gd-traj-cap { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.gd-sig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 9px 0; border-top: 1px solid var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.gd-sig-d { flex: none; font-size: 10px; letter-spacing: .08em; color: var(--accent-dim); }
.gd-sig-t { flex: 1; min-width: 55%; color: var(--ink); }
.gd-sig-s { flex: none; color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); font-size: 11px; }
.gd-sig-s:hover { color: var(--accent); }
@media (max-width: 620px) { .goal-detail-card { padding: 20px; } .gd-subs .goal-sub .goal-bar { width: 80px; } .gd-traj-row { flex-direction: column; align-items: flex-start; gap: 8px; } }

.pull-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; color: var(--ink-faint); pointer-events: none; }
.pull-legend .lg-fwd { color: var(--accent-dim); }
.pull-legend .lg-fric { color: var(--strike); }

.pull-detail { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; width: min(380px, 88%); background: rgba(4, 16, 11, .96); border: 1px solid var(--accent-dim); border-radius: 8px; padding: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6), var(--glow); animation: fadeUp .28s ease; }
.pull-detail.fric { border-color: var(--strike); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.pull-detail .pd-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dim); }
.pull-detail.fric .pd-tag { color: var(--strike); }
.pull-detail h4 { margin: 10px 0; font-size: 18px; line-height: 1.3; color: #eafff3; }
.pull-detail p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.pull-detail .pd-src { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }
.pull-detail .pd-sig { font-size: 11px; color: var(--accent-dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
.pull-detail.fric .pd-sig { color: var(--strike); }
.pull-detail .pd-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.pull-timeline { margin-top: auto; }
.pull-tl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pull-tl-head > span:first-child { color: var(--accent-dim); }
.pull-tl-sub { text-transform: none; letter-spacing: .02em; }
.pull-tl-bars { position: relative; display: flex; justify-content: flex-start; align-items: stretch; gap: 3px; height: 56px; }
.pull-tl-bars::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-faint); }
.tl-cell { position: relative; flex: 1 1 0; min-width: 3px; max-width: 14px; cursor: pointer; }
.tl-up { position: absolute; left: 0; right: 0; bottom: 50%; height: 0; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); border-radius: 2px 2px 0 0; opacity: .75; transition: height .35s ease; }
.tl-dn { position: absolute; left: 0; right: 0; top: 50%; height: 0; background: linear-gradient(180deg, rgba(200,85,61,.85), var(--strike)); border-radius: 0 0 2px 2px; opacity: .7; transition: height .35s ease; }
.tl-cell:hover .tl-up, .tl-cell:hover .tl-dn { opacity: 1; }
.tl-cell.today .tl-up { box-shadow: var(--glow); }
.tl-cell.today .tl-up, .tl-cell.today .tl-dn { opacity: 1; }

/* day panel — what happened that day */
.pull-day { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; width: min(460px, 92%); max-height: 76vh; overflow: auto; background: rgba(4, 16, 11, .97); border: 1px solid var(--accent-dim); border-radius: 0; padding: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); animation: fadeUp .28s ease; }
.day-list { margin-top: 14px; display: flex; flex-direction: column; }
.day-row { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--ink-faint); }
.day-row:last-child { border-bottom: none; }
.day-mk { font-size: 11px; line-height: 1.5; flex: none; }
.day-row.fwd .day-mk { color: var(--accent); text-shadow: var(--glow); }
.day-row.fric .day-mk { color: var(--strike); }
.day-row.post .day-mk, .day-row.note .day-mk { color: var(--ink-dim); }
.day-main { font-size: 13.5px; color: #eafff3; line-height: 1.4; }
.day-row.post .day-main { color: var(--ink); }
.day-sub { font-size: 10px; color: var(--ink-faint); letter-spacing: .06em; margin-top: 3px; text-transform: uppercase; }
.pull-tl-axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); }

.pull-comms { margin-top: 16px; }
.pull-log { display: flex; flex-direction: column-reverse; gap: 4px; margin-bottom: 10px; max-height: 110px; overflow: hidden; }
.pull-log .line { font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
.pull-log .line b { color: var(--accent); text-shadow: var(--glow); font-weight: 500; }
.pull-log .line.fresh { animation: postIn .9s ease; }
.pull-log .line.cli { color: var(--accent-dim); letter-spacing: .02em; }
.pull-log .line.sys { color: var(--ink-faint); }
.pull-form { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--ink-faint); padding-top: 12px; }
.pull-prompt { color: var(--accent); text-shadow: var(--glow); }
.pull-form input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 14px; caret-color: var(--accent); }

@media (max-width: 620px) {
  .pull-top { gap: 10px; }
  .pull-meter { order: 3; max-width: none; flex-basis: 100%; }
  .pull-legend { font-size: 10px; gap: 12px; }
}

.devskip { position: fixed; bottom: 10px; right: 12px; z-index: 9500; font-size: 10px; color: var(--ink-faint); letter-spacing: .1em; opacity: .5; }
.devskip a { color: var(--accent-dim); cursor: pointer; text-decoration: underline; }

/* ── THE ROOM (top-down 70s opening) ── */
.room-wrap { width: min(680px, 100%); margin: auto; text-align: center; position: relative; }
.room-cap { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--warn); margin-bottom: 14px; }
.room-cap span { color: var(--ink-faint); }
.room-canvas { display: block; width: min(640px, 92vw); height: auto; margin: 0 auto; border: 2px solid #3a2614; box-shadow: 0 0 0 1px rgba(94,240,168,.08), 0 16px 50px rgba(0,0,0,.6); background: #120b06; }
.room-hint { margin-top: 14px; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); }
.room-prompt { margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: var(--accent); text-shadow: var(--glow); }

/* ── in-world dialogue bubble ── */
#room-bubble { position: absolute; transform: translate(-50%, calc(-100% - 10px)); max-width: 260px; min-width: 120px; padding: 9px 11px; z-index: 6; pointer-events: none; text-align: left; background: rgba(8,12,11,.96); border: 1px solid var(--accent-dim); box-shadow: var(--glow), 0 8px 26px rgba(0,0,0,.6); font-family: var(--mono); }
#room-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: rgba(8,12,11,.96); border-right: 1px solid var(--accent-dim); border-bottom: 1px solid var(--accent-dim); }
#room-bubble b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--warn); margin-bottom: 5px; }
#room-bubble span { display: block; font-size: 12px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; max-height: 132px; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
/* branching dialogue: clickable options (the bubble is pointer-events:none; re-enable on the buttons) */
.bub-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.bub-opt { pointer-events: auto; cursor: pointer; display: block; width: 100%; text-align: left; font-family: var(--mono); font-size: 11px; line-height: 1.35; color: var(--accent); background: rgba(94,240,168,.06); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 6px 9px; transition: background .14s; }
.bub-opt:hover { background: rgba(94,240,168,.18); }
.bub-back { color: var(--ink-dim); border-color: var(--ink-faint); background: none; margin-top: 8px; }
.bub-back:hover { background: rgba(255,255,255,.04); }
/* identity panel — the keeper's name + look prompt */
#room-custom { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); z-index: 8; width: min(320px, 86%); padding: 14px 16px; background: rgba(8,12,11,.97); border: 1px solid var(--accent-dim); box-shadow: var(--glow), 0 12px 34px rgba(0,0,0,.65); font-family: var(--mono); text-align: left; }
#room-custom b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--warn); margin-bottom: 4px; }
#room-custom .rc-q { display: block; font-size: 12px; line-height: 1.5; color: var(--ink); margin: 8px 0 6px; }
#room-custom .rc-name { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 13px; color: var(--ink); background: rgba(94,240,168,.06); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 7px 9px; outline: none; }
#room-custom .rc-name:focus { border-color: var(--accent); }
#room-custom .rc-name + .rc-name { margin-top: 6px; }
#room-custom .rc-fig { display: block; margin: 4px auto 2px; width: 55px; height: 85px; image-rendering: pixelated; background: rgba(94,240,168,.05); border: 1px solid var(--accent-dim); border-radius: 3px; }
#room-custom .rc-row { display: flex; align-items: center; gap: 5px; margin: 6px 0; }
#room-custom .rc-row i { width: 44px; flex: none; font-style: normal; font-size: 9px; letter-spacing: .12em; color: var(--ink-dim); text-transform: uppercase; }
#room-custom .rc-sw { width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(255,255,255,.22); cursor: pointer; padding: 0; }
#room-custom .rc-sw.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
#room-custom .rc-err { display: block; color: var(--warn); font-size: 11px; margin-top: 6px; }
#room-custom .rc-ok { margin-top: 10px; }
/* editor: an option → answer pair in the Story tab */
.ed-opt { display: flex; flex-direction: column; gap: 5px; padding: 7px; border: 1px solid var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.015); }

/* ── level editor ── */
#room-edit-toggle { position: absolute; top: 0; right: 0; width: 30px; height: 30px; z-index: 7; background: rgba(8,12,11,.85); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-size: 15px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; }
#room-edit-toggle:hover { color: var(--accent); border-color: var(--accent-dim); }
#room-edit-toggle.on { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
#room-editor { margin-top: 16px; text-align: left; border: 1px solid var(--ink-faint); background: rgba(7,9,8,.6); font-family: var(--mono); }
#room-editor[hidden] { display: none; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.03); }
.ed-title { font-size: 11px; letter-spacing: .22em; color: var(--accent); text-shadow: var(--glow); }
.ed-lab { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 5px; }
.ed-status { margin-left: auto; font-size: 11px; color: var(--accent); opacity: .85; }
.ed-body { display: grid; grid-template-columns: 1fr 200px; gap: 0; }
@media (max-width: 620px) { .ed-body { grid-template-columns: 1fr; } }
.ed-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; padding: 10px; align-content: start; max-height: 280px; overflow: auto; border-right: 1px solid var(--ink-faint); }
.ed-asset { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 9px; letter-spacing: .04em; cursor: grab; transition: border-color .12s, color .12s, background .12s; }
.ed-asset:hover { border-color: var(--accent-dim); color: var(--ink); }
.ed-asset.armed { border-color: var(--accent); color: var(--accent); background: rgba(94,240,168,.07); box-shadow: var(--glow); }
.ed-thumb { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.ed-side { padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.ed-props, .ed-scene { display: flex; flex-direction: column; gap: 7px; }
.ed-scene { border-top: 1px dashed var(--ink-faint); padding-top: 12px; }
.ed-phead { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); }
.ed-hint { font-size: 11px; line-height: 1.5; color: var(--ink-dim); margin: 0; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-field { display: flex; flex-direction: column; gap: 3px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.ed-input { width: 100%; padding: 4px 6px; background: #0a0d0c; border: 1px solid var(--ink-faint); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.ed-input:focus { outline: none; border-color: var(--accent-dim); }
.ed-area { resize: vertical; min-height: 46px; line-height: 1.45; }
.ed-color { padding: 2px; height: 26px; cursor: pointer; }
.ed-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink); text-transform: none; letter-spacing: .02em; cursor: pointer; }
.ed-check input { accent-color: var(--accent); }
.ed-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ed-btn { padding: 5px 9px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; cursor: pointer; transition: border-color .12s, color .12s; }
.ed-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.ed-btn.warn:hover { border-color: #e8553d; color: #e8553d; }
.ed-btn.done { border-color: var(--accent-dim); color: var(--accent); }
.ed-input.sm { font-size: 11px; padding: 3px 5px; }

/* editor — all-spaces overview panel */
.ed-count { color: var(--ink-dim); }
.ed-space-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; }
.ed-space-row { display: flex; align-items: stretch; gap: 4px; }
.ed-space-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 5px 8px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); cursor: pointer; transition: border-color .12s, color .12s; }
.ed-space-pick:hover { border-color: var(--accent-dim); color: var(--accent); }
.ed-space-row.on .ed-space-pick { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ed-space-name { font-size: 12px; letter-spacing: .04em; }
.ed-space-meta { font-size: 9px; letter-spacing: .04em; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-space-del { width: 26px; flex: none; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 13px; line-height: 1; cursor: pointer; transition: border-color .12s, color .12s; }
.ed-space-del:hover { border-color: #e8553d; color: #e8553d; }

/* editor — uploaded-image palette column */
.ed-palwrap { border-right: 1px solid var(--ink-faint); display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.ed-palwrap .ed-pal { border-right: 0; }
.ed-pal-h { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); padding: 4px 10px; border-top: 1px dashed var(--ink-faint); }
.ed-pal-img { padding-top: 6px; }
.ed-pal-img .ed-thumb { object-fit: cover; background: #0a0d0c; }
@media (max-width: 620px) { .ed-palwrap { border-right: 0; border-bottom: 1px solid var(--ink-faint); max-height: 260px; } }

/* ── editor: full-height edge rails, game centered between them ── */
#room-editor { margin: 0; border: 0; background: none; }
.ed-rail { position: fixed; top: 0; bottom: 0; width: 234px; z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 16px; overflow-y: auto; font-family: var(--mono); background: rgba(6,8,7,.95); border-right: 1px solid var(--ink-faint); box-shadow: 0 0 32px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ed-rail-l { left: 0; }
.ed-rail-r { right: 0; left: auto; width: 304px; border-right: 0; border-left: 1px solid var(--ink-faint); }
.ed-rail-h { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-dim); padding-bottom: 6px; border-bottom: 1px solid var(--ink-faint); }
.ed-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-rail .ed-pal { max-height: none; overflow: visible; border-right: 0; padding: 4px 0; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.ed-rail-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ink-faint); }
.ed-rail .ed-status { font-size: 10px; color: var(--ink-dim); padding-top: 4px; }
.ed-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ink-faint); }
.ed-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; padding: 9px 4px; cursor: pointer; }
.ed-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ed-tab-pane { display: flex; flex-direction: column; gap: 12px; }
.ed-tab-pane[hidden] { display: none; }
/* story playback — the cutscene beat list (Conversation/Story tab) */
.ed-steps { display: flex; flex-direction: column; gap: 3px; }
.ed-step { border: 1px solid var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.015); }
.ed-step.open { border-color: var(--accent-dim); }
.ed-step-r { display: flex; align-items: stretch; }
.ed-step-h { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px; background: none; border: 0; color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px; text-align: left; cursor: pointer; }
.ed-step-h b { color: var(--warn); font-weight: 600; }
.ed-step-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-step.open .ed-step-h, .ed-step-h:hover { color: var(--ink); }
.ed-mini { width: 24px; flex: none; background: none; border: 0; border-left: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 11px; cursor: pointer; }
.ed-mini:hover { color: var(--accent); }
.ed-mini.warn:hover { color: #e8553d; }
.ed-step-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-top: 1px dashed var(--ink-faint); }
.ed-json { font-size: 10.5px; min-height: 40px; }
/* ── THE TIMELINE DOCK — the editor's bottom half. beats on a seconds ruler, one track per
   performer, a playhead you can throw around. sized to be worked in, not squinted at. ── */
#room-timeline { position: fixed; left: 250px; right: 320px; bottom: 0; z-index: 58; display: flex; flex-direction: column; height: 246px; background: linear-gradient(180deg, rgba(7,11,10,.97), rgba(5,8,7,.99)); border-top: 1px solid var(--ink-faint); box-shadow: 0 -14px 40px rgba(0,0,0,.6); font-family: var(--mono); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#room-timeline[hidden] { display: none; }
.tl-grab { flex: none; height: 7px; margin-top: -4px; cursor: ns-resize; background: transparent; position: relative; }
.tl-grab::after { content: ''; position: absolute; left: 50%; top: 2px; width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: var(--ink-faint); transition: background .15s; }
.tl-grab:hover::after { background: var(--accent-dim); }

/* transport bar */
.tl-bar { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.025); }
.tl-spring { flex: 1; }
.tl-tbtn { flex: none; min-width: 30px; height: 26px; padding: 0 8px; background: rgba(255,255,255,.025); border: 1px solid var(--ink-faint); border-radius: 3px; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.tl-tbtn:hover { color: var(--accent); border-color: var(--accent-dim); }
.tl-tbtn.on { color: var(--accent); border-color: var(--accent-dim); background: rgba(94,240,168,.09); }
.tl-tbtn.sm { height: 24px; font-size: 10px; min-width: 24px; padding: 0 6px; }
.tl-go { color: var(--accent); border-color: var(--accent-dim); background: rgba(94,240,168,.08); }
.tl-go:hover { background: rgba(94,240,168,.18); box-shadow: var(--glow); }
.tl-time { flex: none; min-width: 56px; font-size: 11.5px; color: var(--ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
#room-timeline.scrubbing .tl-time { color: #eef3f4; text-shadow: 0 0 8px rgba(238,243,244,.55); }
.tl-what { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-zoomlab { flex: none; font-size: 10px; color: var(--ink-dim); min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }

/* body: fixed name gutter + scrolling lanes */
.tl-body { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.tl-names { flex: none; width: 104px; border-right: 1px solid var(--ink-faint); background: rgba(0,0,0,.22); overflow: hidden; will-change: transform; }
.tl-namehead { height: 22px; line-height: 22px; padding: 0 8px; font-size: 8.5px; letter-spacing: .2em; color: var(--accent-dim); border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.03); }
.tl-name { height: 26px; line-height: 26px; margin-top: 4px; padding: 0 8px; font-size: 10px; letter-spacing: .03em; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid transparent; }
.tl-name.cast { color: #ffb59f; border-left-color: rgba(255,138,115,.5); }
.tl-name.prop { color: #7fd9e4; border-left-color: rgba(54,214,231,.5); }
.tl-name.sys  { color: var(--ink-dim); border-left-color: var(--ink-faint); }
.tl-track { position: relative; flex: 1; min-width: 0; overflow: auto; }
.tl-inner { position: relative; display: flex; flex-direction: column; width: max-content; min-width: 100%; min-height: 100%; }

/* the ruler */
.tl-ruler { position: relative; flex: none; height: 22px; border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.03); cursor: crosshair; touch-action: none; }
.tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(94,240,168,.13); }
.tl-tick.maj { background: rgba(94,240,168,.3); }
.tl-tick[data-lab]::after { content: attr(data-lab); position: absolute; left: 4px; top: 4px; font-size: 8.5px; letter-spacing: .06em; color: var(--ink-dim); white-space: nowrap; }

/* lanes */
.tl-rows { position: relative; flex: 1; padding-top: 4px; cursor: crosshair; touch-action: none; }
.tl-tr { position: relative; height: 26px; margin-bottom: 4px; border-radius: 3px; background: rgba(255,255,255,.016); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018); }
.tl-tr.drop { background: rgba(94,240,168,.09); outline: 1px dashed var(--accent-dim); }
.tl-vis { position: absolute; top: 21px; height: 3px; border-radius: 2px; background: var(--accent); opacity: .4; pointer-events: none; }
/* room bands — where an episode is standing at each moment */
.tl-band { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(180,140,242,.45); background: rgba(180,140,242,.045); pointer-events: none; z-index: 0; }
.tl-band::after { content: attr(data-lab); position: absolute; left: 5px; bottom: 3px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(180,140,242,.75); white-space: nowrap; }

/* the playhead */
.tl-head { position: absolute; top: 0; width: 2px; background: #eef3f4; box-shadow: 0 0 9px rgba(238,243,244,.8); pointer-events: none; z-index: 6; }
.tl-head::before { content: ''; position: absolute; top: 0; left: -4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #eef3f4; }
.tl-head[hidden] { display: none; }

/* beat blocks */
.tl-beat { position: absolute; top: 2px; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border: 1px solid; border-radius: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; z-index: 2; }
.tl-beat:hover { filter: brightness(1.25); z-index: 3; }
.tl-beat:active { cursor: grabbing; }
.tl-beat.dragging { opacity: .35; }
.tl-beat.withprev { border-left-width: 3px; border-left-style: solid; }
.tl-chain { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }
.tl-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; border-left: 1px dashed rgba(255,255,255,.3); }
.tl-grip:hover { background: rgba(255,255,255,.12); }
.tl-ins { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 7px var(--accent); z-index: 5; }
.tl-ins.with { background: #f4c95d; box-shadow: 0 0 7px #f4c95d; }
.tl-ins[hidden] { display: none; }
/* dialogue waits for the player, so its width is an estimate — the hatching says "roughly this long" */
.tl-say  { border-color: #f4c95d; color: #f4c95d; background: repeating-linear-gradient(45deg, rgba(244,201,93,.16) 0 5px, rgba(244,201,93,.05) 5px 10px); }
.tl-move { border-color: #36d6e7; color: #36d6e7; background: rgba(54,214,231,.09); }
.tl-walk { border-color: #ff8a73; color: #ff8a73; background: rgba(255,138,115,.09); }
.tl-cast { border-color: #b48cf2; color: #b48cf2; background: rgba(180,140,242,.09); }
.tl-fx   { border-color: #e8553d; color: #e8553d; background: rgba(232,85,61,.11); }
.tl-wait { border-color: #8a93a6; color: #8a93a6; background: rgba(138,147,166,.08); }
.tl-goto { border-color: #b48cf2; color: #d9c3ff; background: rgba(180,140,242,.16); }
.tl-vid  { border-color: #eef3f4; color: #eef3f4; background: rgba(238,243,244,.10); }
.tl-pose, .tl-fade, .tl-misc { border-color: var(--accent-dim); color: var(--accent); background: rgba(94,240,168,.07); }

/* portal room-picker: tap a room to link the selected asset to it */
.ed-roompick { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 4px; }
.ed-roombtn { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-dim); background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); border-radius: 3px; padding: 5px 9px; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.ed-roombtn:hover { color: var(--ink); border-color: var(--ink-dim); }
.ed-roombtn.on { color: #06120d; background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ── inspector bits in the right rail ── */
.ed-inspect-h { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.02); }
.ed-inspect-t { flex: none; padding: 2px 6px; border: 1px solid; border-radius: 2px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }
.ed-inspect-s { font-size: 10px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-adv { border-top: 1px dashed var(--ink-faint); padding-top: 6px; }
.ed-adv summary { cursor: pointer; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.ed-adv summary:hover { color: var(--ink); }
.ed-adv .ed-json { margin-top: 6px; }
.ed-tilerow { display: flex; align-items: center; gap: 6px; }
.ed-tileval { flex: none; min-width: 46px; font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
/* the beat palette — plain english, colour-coded to the timeline */
.ed-beatpal { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-beatadd { padding: 5px 8px; border: 1px solid; border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; cursor: pointer; text-align: left; transition: filter .12s; }
.ed-beatadd:hover { filter: brightness(1.35); }
/* episode browser */
.ed-eplist { display: flex; flex-direction: column; gap: 4px; }
.ed-eprow { display: flex; align-items: stretch; gap: 4px; }
.ed-eppick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 6px 9px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); border-radius: 3px; color: var(--ink-dim); font-family: var(--mono); cursor: pointer; transition: border-color .12s, color .12s; }
.ed-eppick:hover { border-color: var(--accent-dim); color: var(--accent); }
.ed-eprow.on .ed-eppick { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ed-epname { font-size: 12px; letter-spacing: .03em; }
.ed-epmeta { font-size: 9px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* asset search */
.ed-search { width: 100%; padding: 5px 8px; background: #0a0d0c; border: 1px solid var(--ink-faint); border-radius: 3px; color: var(--ink); font-family: var(--mono); font-size: 11px; }
.ed-search:focus { outline: none; border-color: var(--accent-dim); }
.ed-search::placeholder { color: var(--ink-dim); }

/* the stage gets out of the timeline's way while editing */
#s-room.editing { padding-left: 250px; padding-right: 320px; padding-bottom: var(--tl-h, 246px); }
@media (max-width: 980px) {
  .ed-rail { width: 196px; } .ed-rail-r { width: 196px; }
  #s-room.editing { padding-left: 204px; padding-right: 204px; }
  #room-timeline { left: 204px; right: 204px; }
}
@media (max-width: 680px) {
  #s-room.editing { padding: 0 0 40vh; }
  .ed-rail { top: auto; bottom: 0; height: 46vh; width: 50%; box-shadow: 0 -10px 24px rgba(0,0,0,.5); }
  .ed-rail-l { left: 0; border-right: 1px solid var(--ink-faint); }
  .ed-rail-r { right: 0; }
  #room-timeline { display: none; }
}

/* editor — paint / block / draw-asset controls */
.ed-ctl { display: inline-flex; align-items: center; gap: 5px; }
.ed-ctl[hidden] { display: none; }
.ed-btn.mode.on, .ed-btn.brush.on, .ed-btn.on { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ed-btn.brush { min-width: 22px; padding: 5px 6px; }
.ac-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(2,5,4,.74); }
.ac-box { background: #0a0d0c; border: 1px solid var(--accent-dim); box-shadow: var(--glow-strong), 0 20px 60px rgba(0,0,0,.7); padding: 16px; width: min(320px, 94vw); display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); }
.ac-canvas { width: 256px; height: 256px; max-width: 100%; align-self: center; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--ink-faint); background: #0c100e; cursor: crosshair; touch-action: none; }
.ac-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-tools { gap: 4px; border-top: 1px dashed var(--ink-faint); border-bottom: 1px dashed var(--ink-faint); padding: 6px 0; }
.ac-tools .ed-btn.tool { padding: 5px 8px; }
.ac-pal { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-sw { width: 20px; height: 20px; border: 1px solid var(--ink-faint); border-radius: 0; cursor: pointer; padding: 0; }
.ac-sw:hover { border-color: var(--accent); }
/* full hue × shade swatch grid (paint tool + draw-asset modal) */
.sw-grid { display: grid; grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; gap: 2px; justify-content: start; max-width: 100%; overflow-x: auto; }
.sw-grid[hidden] { display: none; }
.sw-grid.sw-bar { flex-basis: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--ink-faint); }
.sw { width: 15px; height: 15px; border: 1px solid rgba(0,0,0,.28); border-radius: 0; cursor: pointer; padding: 0; }
.sw:hover { outline: 1px solid var(--accent); outline-offset: 1px; position: relative; z-index: 1; }

/* ── room atmosphere: scanline pass + story textbox + touch d-pad ── */
.room-crt { position: absolute; z-index: 5; pointer-events: none; mix-blend-mode: overlay; opacity: .55; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); }
#room-seq { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 8; width: min(560px, 88%); padding: 10px 14px 12px; text-align: left; background: rgba(6,10,9,.94); border: 1px solid var(--accent-dim); box-shadow: var(--glow), 0 10px 30px rgba(0,0,0,.65); font-family: var(--mono); cursor: pointer; }
#room-seq[hidden] { display: none; }
#room-seq b { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); margin-bottom: 5px; }
#room-seq b[hidden] { display: none; }
#room-seq span { display: block; min-height: 2.9em; font-size: 12.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
#room-seq i { display: block; margin-top: 6px; font-style: normal; font-size: 9px; letter-spacing: .18em; color: var(--accent-dim); text-align: right; animation: seqblink 1.1s steps(2) infinite; }
@keyframes seqblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #room-seq i { animation: none; } }
#room-story-reset { position: absolute; top: 34px; right: 10px; z-index: 5; padding: 5px 9px; background: rgba(8,12,11,.78); color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; cursor: pointer; }
#room-story-reset:hover { background: rgba(94,240,168,.16); border-color: var(--accent); }
#room-story-reset[hidden] { display: none; }
#room-pad { display: none; }
@media (pointer: coarse) {
  #room-pad { position: fixed; left: 14px; bottom: 16px; z-index: 70; display: grid; grid-template-areas: '. u .' 'l a r' '. d .'; gap: 7px; }
  #room-pad button { width: 46px; height: 46px; border-radius: 10px; background: rgba(8,12,11,.72); border: 1px solid var(--accent-dim); color: var(--accent); font-size: 17px; font-family: var(--mono); -webkit-tap-highlight-color: transparent; touch-action: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
  #room-pad button.on { background: rgba(94,240,168,.22); }
  #room-pad .pad-u { grid-area: u; } #room-pad .pad-d { grid-area: d; } #room-pad .pad-l { grid-area: l; } #room-pad .pad-r { grid-area: r; }
  #room-pad .pad-a { grid-area: a; border-color: var(--warn); color: var(--warn); }
}

/* ── admin section ── */
/* block flow so tall content scrolls from the top instead of being flex-centred (matches dash/intro) */
#s-admin.active, #s-gallery.active { display: block; }
.admin-stage { width: min(820px, 100%); margin: auto; text-align: left; }
#admin-root { display: flex; flex-direction: column; gap: 18px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink-faint); padding-bottom: 14px; }
.admin-who { font-family: var(--mono); font-size: 13px; color: var(--accent); text-shadow: var(--glow); margin-top: 4px; word-break: break-all; }
.admin-pwd { margin-top: 10px; }
.admin-pwd summary { cursor: pointer; font-size: 12px; color: var(--ink-dim); letter-spacing: .04em; }
.admin-pwd summary:hover { color: var(--ink); }
.admin-pwd .field { margin-top: 10px; }
.admin-section { display: flex; flex-direction: column; gap: 10px; }
.admin-h { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); margin: 0; }
.admin-uprow { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.admin-drop { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 16px; border: 1px dashed var(--ink-dim); background: rgba(94,240,168,.02); color: var(--ink-dim); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; text-align: center; }
.admin-drop:hover, .admin-drop.over { border-color: var(--accent); color: var(--accent); background: rgba(94,240,168,.06); }
.admin-drop-ico { font-size: 22px; line-height: 1; }
.admin-file { display: none; }
.admin-status { font-family: var(--mono); font-size: 12px; color: var(--accent); margin: 0; }
.admin-status.err { color: #e8553d; }
.admin-empty { font-size: 12px; color: var(--ink-dim); }
/* members & activity + access control */
.admin-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { flex: 1 1 90px; border: 1px solid var(--ink-faint); padding: 8px 10px; background: rgba(7,9,8,.5); }
.stat-n { font-family: var(--mono); font-size: 22px; color: var(--accent); text-shadow: var(--glow); line-height: 1.1; }
.stat-l { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-top: 2px; }
.admin-recent-h { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.admin-recent { display: flex; flex-direction: column; gap: 3px; }
.rec-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; }
.rec-email { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-time { color: var(--ink-faint); flex: none; }
.admin-members { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.member-row { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--ink-faint); }
.member-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.member-dot.admin { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.member-email { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.member-meta { color: var(--ink-faint); flex: none; font-size: 11px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.admin-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--ink-faint); padding: 8px; background: rgba(7,9,8,.5); }
.admin-thumb { aspect-ratio: 1 / 1; background: #0a0d0c; border: 1px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.admin-thumb img { max-width: 100%; max-height: 100%; image-rendering: auto; }
.admin-card-name { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── public gallery ── */
.gallery-stage { width: min(960px, 100%); margin: auto; text-align: left; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 18px 0; }
.gal-item { margin: 0; border: 1px solid var(--ink-faint); background: rgba(7,9,8,.5); overflow: hidden; }
.gal-item img { display: block; width: 100%; height: auto; }
.gal-item figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); padding: 7px 9px; border-top: 1px solid var(--ink-faint); }

/* ════════════════════════════════════════════════════════════════
   PREMIUM DASHBOARD REDESIGN
   OBSOLETE · "THE BROADSHEET" — premium elevation for the 3 inside views
   (the pull · the climb · the goal). Spine: editorial-lux, grafting the
   neo-swiss zero-axis spine + kinetic temperature-as-data + clip-path
   reveal. 100% ADDITIVE — append to END of styles.css; cascade wins.
   Targets only verified JS-emitted classes. GPU-only motion. RM-gated.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* modular type scale (~1.5) — layered ON TOP of existing sizes */
  --t-micro:10px; --t-cap:11px; --t-body:13px; --t-cardh:15px;
  --t-sech:22px; --t-feat:34px; --t-hero:clamp(40px,6vw,60px);  /* the single biggest figure per view */
  /* 8px spatial rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px;
  /* per-section signature colors — each tab owns a hue so the site reads colorful, not mono-mint */
  --c-pull:#5ef0a8; --c-climb:#f4c95d; --c-goal:#c08bf0; --c-social:#36d6e7; --c-frontier:#a78bfa; --c-occ:#5e9bf0;
  --sec-c:var(--accent);  /* current section's hue; each view overrides on its root */
  /* editorial materials (black-on-black depth, not glass everywhere) */
  --plate: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 42%), rgba(4,16,11,.5);
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.05);
  --lift: 0 18px 40px -14px rgba(0,0,0,.6);
  --lift-sm: 0 8px 22px -10px rgba(0,0,0,.55);
  --ghost: rgba(94,240,168,.05);
  --bg-well: radial-gradient(120% 90% at 50% -8%, rgba(94,240,168,.05), transparent 60%);
  --b-ease: cubic-bezier(.2,.7,.2,1);
  --b-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── UNIVERSAL SECTION HEADER — one elegant voice on every tab (eyebrow + claim + purpose) ── */
.sec-head{ display:flex; flex-direction:column; gap:var(--s2); margin:0 0 var(--s6); }
.sec-eyebrow{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--sec-c); }
.sec-eyebrow::before{ content:''; width:18px; height:1px; background:var(--sec-c); box-shadow:0 0 7px var(--sec-c); flex:none; }
.sec-claim{ font-family:var(--disp); font-size:var(--t-sech); font-weight:600; line-height:1.16; letter-spacing:.01em; color:#eafff3; margin:0; }
.sec-claim .hl{ color:var(--sec-c); }
.sec-purpose{ font-family:var(--mono); font-size:var(--t-body); line-height:1.55; color:var(--ink-dim); max-width:64ch; margin:0; }
.sec-chip{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:var(--s1); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--sec-c); border:1px solid color-mix(in srgb, var(--sec-c) 36%, transparent); border-radius:999px; padding:3px 10px; background:color-mix(in srgb, var(--sec-c) 7%, transparent); }
.sec-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sec-c); box-shadow:0 0 8px var(--sec-c); animation:secPulse 2.4s ease-in-out infinite; }
@keyframes secPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
/* section roots own their hue */
#pull-board{ --sec-c:var(--c-pull); }
#climb-view{ --sec-c:var(--c-climb); }
#goal-view{ --sec-c:var(--c-goal); }
#social-view{ --sec-c:var(--c-social); }
#frontier-view{ --sec-c:var(--c-frontier); }
#occupations-view{ --sec-c:var(--c-occ); }

/* ── PERSISTENT NARRATIVE RAIL — the thesis, always on screen ── */
.thesis-rail{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); margin:0 0 var(--s5); border:1px solid var(--ink-faint); border-radius:3px; background:linear-gradient(90deg, rgba(94,240,168,.06), rgba(0,0,0,.18) 64%); }
.tr-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); flex:none; animation:secPulse 2.4s ease-in-out infinite; }
.tr-text{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.tr-text b{ color:#dfeee7; font-weight:600; }
.tr-bar{ height:3px; border-radius:3px; background:var(--bg-soft); position:relative; overflow:hidden; flex:none; width:110px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.tr-bar i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); box-shadow:var(--glow); border-radius:3px; transition:width .8s var(--b-ease); }
.tr-read{ margin-left:auto; font-family:var(--mono); font-size:var(--t-cap); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.tr-read.up{ color:var(--accent); } .tr-read.dn{ color:var(--strike); } .tr-read.mid{ color:var(--warn); }
@media (max-width:560px){ .tr-text:last-of-type, .tr-bar{ display:none; } }

/* ── VIEW-ENTER MOTION — fluent tab switches, no hard cuts ── */
.view-enter > .sec-head{ animation:bsRise .42s var(--b-ease) both .04s; }
.view-enter > .thesis-rail{ animation:bsRise .42s var(--b-ease) both; }
@media (prefers-reduced-motion:reduce){ .view-enter > *{ animation:none !important; } }

/* tabular, slashed-zero numerals everywhere a metric actually lives.
   (cosmetic alignment only — climb-card-big values like "5.2×" / "42% → 11%"
   are non-numeric, so this never promises a real aligned column.) */
.tug-ends b, .climb-val, .climb-card-big, .goal-sub-pct, .goal-cat-idx,
.mid-date, .gs-item, .pull-tl-axis, .gd-spark{
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ── shared hairline CORNER-TICK frame (blueprint registration marks) ──
   the single cheapest cross-page signature; reused on all three views. */
.pull-mid, .goal-detail-pane, .climb-card{ position:relative; }
.pull-mid::before, .goal-detail-pane::before, .climb-card::before{
  content:''; position:absolute; top:-1px; left:-1px; width:9px; height:9px;
  border-top:1px solid var(--accent-dim); border-left:1px solid var(--accent-dim);
  opacity:.5; pointer-events:none; z-index:3;
}
.pull-mid::after, .goal-detail-pane::after, .climb-card::after{
  content:''; position:absolute; bottom:-1px; right:-1px; width:9px; height:9px;
  border-bottom:1px solid var(--accent-dim); border-right:1px solid var(--accent-dim);
  opacity:.5; pointer-events:none; z-index:3;
}

/* the universal entrance — reveal along the grid axis (clip-path inset).
   Pure clip/opacity: zero layout thrash and it NEVER touches the
   whitespace-sensitive .cb-fill / .tug-ascii <pre> internals. */
@media (prefers-reduced-motion:no-preference){
  @keyframes bsReveal{ from{ opacity:0; clip-path:inset(0 36% 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
  @keyframes bsRevealR{ from{ opacity:0; clip-path:inset(0 0 0 36%); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
  @keyframes bsRise{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
  @keyframes bsFade{ from{ opacity:0; transform:translateY(8px); } }
}

/* ═══════════════════ THE PULL — the cover / centerfold ═══════════════════ */

/* host the ghosted cover numeral + a focal light field directly on the board
   (it is already display:grid; add positioning + a behind-content layer). */
.pull-board{ position:relative; gap:var(--s6); }
.pull-board > *{ position:relative; z-index:1; }
.pull-board::before{
  content:'PULL'; position:absolute; left:50%; top:46%; z-index:0;
  transform:translate(-50%,-50%); pointer-events:none; user-select:none;
  font-family:var(--disp); font-weight:200; line-height:.8; white-space:nowrap;
  font-size:clamp(120px,26vw,340px); letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px var(--ghost);
}
.pull-board::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 50%, rgba(94,240,168,.05), transparent 70%);
}

/* the center column becomes a floating glass CENTERFOLD pillar */
.pull-mid{
  z-index:2; gap:var(--s3); padding:var(--s4) var(--s4) var(--s3);
  border-left:1px solid transparent; border-right:1px solid transparent;
  border-radius:2px;
  background:
    radial-gradient(120% 80% at 50% 28%, rgba(94,240,168,.06), transparent 70%),
    var(--plate);
  box-shadow:var(--edge-hi), var(--lift);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  isolation:isolate;
}
.mid-label{ font-size:var(--t-micro); letter-spacing:.26em; color:var(--accent-dim); }
.mid-date{ letter-spacing:.12em; }

/* HERO STAT: oversized stacked tabular percentages as the cover figure.
   .e-fric / .e-fwd become a small wide LEGEND over a big READOUT figure. */
.tug-ends{ margin-top:var(--s3); align-items:baseline; }
.e-fric, .e-fwd{
  display:flex; flex-direction:column; gap:2px;
  font-size:9px; letter-spacing:.18em; line-height:1.3;
}
.e-fwd{ text-align:right; }
.tug-ends b{
  font-size:clamp(30px,7vw,52px); font-weight:300; letter-spacing:-.02em;
  line-height:.9;
}
.tug-ends .e-fwd b{ text-shadow:var(--glow); }

/* the tug bar: calm ambient tension shimmer along the forward blocks
   (background-position only — pre internals untouched) */
.tug{ width:100%; }
.tug-ascii{ padding:var(--s2) 0; }
@media (prefers-reduced-motion:no-preference){
  .tug-ascii .g-fwd{
    background:linear-gradient(90deg, var(--accent) 0%, #baffd9 50%, var(--accent) 100%);
    background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:tugShimmer 4.5s linear infinite;
  }
  @keyframes tugShimmer{ to{ background-position:200% 0; } }
}

/* VERDICT promoted to a display masthead — the SINGLE glow-strong hero of
   this view — with a glyph prefix + a wash that tracks v-up/v-mid/v-down. */
.mid-verdict{
  width:100%; box-sizing:border-box; text-align:center; margin-top:var(--s4);
  font-size:clamp(18px,3.1vw,27px); font-weight:600; letter-spacing:-.01em;
  line-height:1.16; text-wrap:balance; overflow-wrap:break-word;
  padding:var(--s3) var(--s4); border-radius:2px;
  border:1px solid var(--ink-faint); background:rgba(0,0,0,.25);
  box-shadow:var(--edge-hi);
  animation:bsRise .5s var(--b-spring) both;
}
.mid-verdict::before{ font-size:.58em; margin-right:.42em; opacity:.85; vertical-align:.08em; }
.mid-verdict.v-up{
  color:var(--accent); text-shadow:var(--glow-strong);
  background:radial-gradient(120% 150% at 50% 0%, rgba(94,240,168,.09), transparent 70%);
}
.mid-verdict.v-up::before{ content:'▲'; }
.mid-verdict.v-mid{
  color:var(--warn);
  background:radial-gradient(120% 150% at 50% 0%, rgba(232,179,74,.09), transparent 70%);
}
.mid-verdict.v-mid::before{ content:'◆'; }
.mid-verdict.v-down{
  color:var(--strike);
  background:radial-gradient(120% 150% at 50% 0%, rgba(200,85,61,.11), transparent 70%);
}
.mid-verdict.v-down::before{ content:'▼'; }

.mid-note{ font-size:var(--t-micro); letter-spacing:.04em; max-width:32ch; margin:var(--s3) auto 0; }
.mid-graph{ padding-top:var(--s4); border-top:1px solid var(--ink-faint); }
.pull-tl-head{ font-size:var(--t-micro); letter-spacing:.16em; }

/* ── pcards → editorial plates: depth + emit/absorb + dealt-in cascade ── */
.pcard{
  background:var(--plate);
  box-shadow:var(--edge-hi), var(--lift-sm);
  transition:border-color .18s var(--b-ease), transform .2s var(--b-ease), box-shadow .2s var(--b-ease);
}
.pcard.fwd:hover{
  transform:translateY(-2px);
  box-shadow:var(--edge-hi), 0 14px 30px -12px rgba(0,0,0,.7), 0 0 22px -8px rgba(94,240,168,.22);
}
.pcard.fric:hover{
  transform:translateY(-2px);
  box-shadow:var(--edge-hi), 0 14px 30px -12px rgba(0,0,0,.7);
}
/* keep the existing scanline ::after; add a vignette under it, non-destructively */
.pcard-media::after{
  background:
    repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.16) 2px 3px),
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%);
}
/* SIGNAL ● call-out — reads the procedural canvas as an intentional plate.
   (.pcard-media is position:relative for both <a> and <div> variants.) */
.pcard-media::before{
  content:'SIGNAL ●'; position:absolute; left:8px; bottom:7px; z-index:2;
  font-size:8px; letter-spacing:.22em; color:rgba(234,255,243,.72);
  opacity:0; transform:translateY(3px); transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.pcard-media:hover::before{ opacity:1; transform:none; }
.pcard-h{ font-size:var(--t-cardh); line-height:1.28; letter-spacing:-.004em; }
.pcard-dom{ font-size:8.5px; letter-spacing:.2em; }

/* dealt-in cascade: friction enters from the left, forward from the right.
   nth-child gives the wave with no JS index needed (--i optional, below). */
@media (prefers-reduced-motion:no-preference){
  .col-fric .pcards .pcard{ animation:bsReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
  .col-fwd  .pcards .pcard{ animation:bsRevealR .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
  .pcards .pcard:nth-child(1){ animation-delay:.04s; }
  .pcards .pcard:nth-child(2){ animation-delay:.10s; }
  .pcards .pcard:nth-child(3){ animation-delay:.16s; }
  .pcards .pcard:nth-child(4){ animation-delay:.22s; }
  .pcards .pcard:nth-child(n+5){ animation-delay:.28s; }
}

/* timeline: spring-grown bars + today breathes (the gauge already glow-strong,
   but the breathing is a soft oscillation, not a second static hero glow) */
.tl-up{ transition:height .45s var(--b-spring); }
.tl-dn{ transition:height .45s var(--b-spring); }
.tl-cell{ transition:transform .2s var(--b-ease); }
.tl-cell:hover{ transform:scaleY(1.06); }
@media (prefers-reduced-motion:no-preference){
  .tl-cell.today .tl-up{ animation:todayBreath 3.4s ease-in-out infinite; }
  @keyframes todayBreath{
    0%,100%{ box-shadow:0 0 4px rgba(94,240,168,.4); }
    50%{ box-shadow:0 0 10px rgba(94,240,168,.7), 0 0 20px rgba(94,240,168,.22); }
  }
}

/* day panel: floating + blurred-in */
.pull-day{
  position:absolute;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--edge-hi), 0 24px 70px -18px rgba(0,0,0,.8);
}
.pull-backdrop{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

/* ═══════════════════ THE CLIMB — the divergence spread ═══════════════════ */

/* lit well behind the view for plane separation */
.climb-view{ position:absolute; }
.climb-view::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--bg-well); opacity:.9;
}
.climb-view .goal-head, .climb-layout{ position:relative; z-index:1; }

.climb-layout{ gap:var(--s8); }

/* ghosted section numerals as cover art + the GRAFTED ZERO-AXIS SPINE */
.climb-cols{ position:relative; gap:var(--s6) var(--s8); }
.climb-cols::before{
  content:'01'; position:absolute; left:-.06em; top:-.34em; z-index:0; pointer-events:none;
  font-family:var(--disp); font-weight:200; line-height:.8;
  font-size:clamp(64px,11vw,140px);
  color:transparent; -webkit-text-stroke:1px rgba(94,240,168,.05);
}
.climb-cols::after{
  content:'02'; position:absolute; right:-.06em; top:-.34em; z-index:0; pointer-events:none;
  font-family:var(--disp); font-weight:200; line-height:.8;
  font-size:clamp(64px,11vw,140px);
  color:transparent; -webkit-text-stroke:1px rgba(200,85,61,.06);
}
.climb-col{ position:relative; z-index:1; }
/* the true vertical zero-axis spine + "0%" datum tick (desktop two-col only) */
@media (min-width:721px){
  .climb-cols{ background:
    linear-gradient(180deg, transparent, var(--ink-faint) 10%, var(--ink-faint) 90%, transparent) center / 1px 100% no-repeat; }
  .climb-cols .climb-col:first-child::after{
    content:'0%'; position:absolute; top:-22px; right:-16px; z-index:2;
    font-family:var(--mono); font-size:9px; letter-spacing:.16em;
    color:var(--ink-dim); font-variant-numeric:tabular-nums;
  }
}

.climb-h{ font-size:var(--t-cap); letter-spacing:.2em; margin-bottom:var(--s4); }
.climb-bars{ gap:18px; }

/* each row: editorial tick + a pulled-out tabular figure; clip-reveal
   on the ROW (never on the .cb-fill <pre>) keeps the ASCII bar intact. */
.climb-row{ position:relative; align-items:baseline; padding-left:var(--s3); transition:transform .16s var(--b-ease); }
.climb-row::before{
  content:''; position:absolute; left:0; top:6px; width:6px; height:1px;
  background:var(--ink-dim); transition:width .18s, background .18s, box-shadow .18s;
}
.climb-row:hover{ transform:translateX(2px); }
.climb-row:hover::before{ width:10px; }
.climb-col:first-child .climb-row:hover::before{ background:var(--accent); box-shadow:var(--glow); }
.climb-lab span{ letter-spacing:-.004em; }
.climb-bar{ font-size:14px; }
.climb-val{ font-size:16px; font-weight:500; letter-spacing:-.01em; }
.climb-val.down{ text-shadow:var(--glow); }
@media (prefers-reduced-motion:no-preference){
  .climb-bars .climb-row{ animation:bsReveal .42s var(--b-ease) both; }
  .climb-bars .climb-row:nth-child(1){ animation-delay:.02s; }
  .climb-bars .climb-row:nth-child(2){ animation-delay:.07s; }
  .climb-bars .climb-row:nth-child(3){ animation-delay:.12s; }
  .climb-bars .climb-row:nth-child(4){ animation-delay:.17s; }
  .climb-bars .climb-row:nth-child(5){ animation-delay:.22s; }
  .climb-bars .climb-row:nth-child(n+6){ animation-delay:.27s; }
}

/* then→now cards = editorial plates; temperature-as-data emit/absorb */
.climb-card{
  background:var(--plate); border-radius:0; padding:var(--s4);
  box-shadow:var(--edge-hi), var(--lift-sm);
  transition:transform .2s var(--b-ease), box-shadow .2s var(--b-ease);
}
.climb-card:hover{ transform:translateY(-2px); box-shadow:var(--edge-hi), var(--lift), 0 0 24px -10px rgba(94,240,168,.22); }
.climb-card-big{ font-size:clamp(28px,4vw,44px); font-weight:300; letter-spacing:-.02em; line-height:.95; }
.climb-card-t{ font-size:var(--t-body); margin-top:var(--s2); }
.climb-card-s{ font-size:10.5px; margin-top:var(--s2); }
/* FLAGSHIP lead card (the 5.2× goods card) — the single glow-strong hero */
.climb-cards .climb-card:first-child{
  padding:var(--s6) var(--s4); border-top-width:3px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(94,240,168,.07), transparent 60%), var(--plate);
}
.climb-cards .climb-card:first-child .climb-card-big{
  font-size:clamp(40px,6vw,64px); text-shadow:var(--glow-strong);
}
/* the rising-cost 7× card ABSORBS light — heavy oxblood wash, no glow */
.climb-card.up{
  background:radial-gradient(120% 140% at 100% 0%, rgba(200,85,61,.10), transparent 60%), var(--plate);
}
.climb-card.up .climb-card-big{ color:var(--strike); }
@media (prefers-reduced-motion:no-preference){
  .climb-card{ animation:bsFade .5s var(--b-ease) both; }
  .climb-cards .climb-card:nth-child(1){ animation-delay:.04s; }
  .climb-cards .climb-card:nth-child(2){ animation-delay:.12s; }
  .climb-cards .climb-card:nth-child(3){ animation-delay:.20s; }
  .climb-cards .climb-card:nth-child(4){ animation-delay:.28s; }
  .climb-card.up .climb-card-big{ animation:rustWarn 4.2s ease-in-out infinite; }
  @keyframes rustWarn{
    0%,100%{ text-shadow:0 0 6px rgba(200,85,61,.18); }
    50%{ text-shadow:0 0 14px rgba(200,85,61,.4); }
  }
}

/* ═══════════════════ THE GOAL — the contents / specimen plate ═══════════════════ */

.goal-view{ position:absolute; }
.goal-view::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--bg-well); opacity:.9;
}
.goal-head, .goal-split{ position:relative; z-index:1; }

.goal-head{ margin-bottom:var(--s8); }
.goal-title{ letter-spacing:.02em; text-shadow:0 0 1px rgba(94,240,168,.5), 0 0 18px rgba(94,240,168,.12); animation:bsRise .6s var(--b-ease) both; }
.goal-tag{ animation:bsFade .6s var(--b-ease) both .1s; }

/* status badges → an oversized tabular STAT STRIP (wide legend over big figure) */
.goal-status{ gap:var(--s3) var(--s8); margin-top:var(--s4); align-items:baseline; }
.gs-item{ display:inline-flex; flex-direction:column-reverse; gap:2px; font-size:9px; letter-spacing:.2em; }
.gs-item b{
  font-size:clamp(26px,3.4vw,38px); font-weight:300; letter-spacing:-.02em;
  line-height:.9; margin:0; font-variant-numeric:tabular-nums slashed-zero;
}

.goal-split{ gap:var(--s6); }

/* roster reads as a magazine table-of-contents — hairline baselines + folios */
.goal-cats{ gap:0; border-top:1px solid var(--ink-faint); }
.goal-cat{
  position:relative; gap:var(--s4); padding:18px var(--s4);
  border-width:0; border-bottom:1px solid var(--ink-faint); border-radius:0;
  background:transparent;
  transition:background .18s var(--b-ease), transform .16s var(--b-ease), box-shadow .18s var(--b-ease);
}
.goal-cat:hover{ background:rgba(255,255,255,.02); }
/* left accent rule scales in on hover/active (the active emits a mint rim) */
.goal-cat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); box-shadow:var(--glow);
  transform:scaleY(0); transform-origin:top;
  transition:transform .22s var(--b-ease);
}
.goal-cat:hover::before{ transform:scaleY(.4); }
.goal-cat.active{
  background:rgba(94,240,168,.05);
  box-shadow:var(--edge-hi), var(--lift-sm); transform:translateX(2px);
}
.goal-cat.active::before{ transform:scaleY(1); }
.goal-cat-idx{ font-size:clamp(24px,3.2vw,32px); font-weight:200; letter-spacing:0; opacity:.8; }
.goal-cat.active .goal-cat-idx{ color:var(--accent); text-shadow:var(--glow); opacity:1; }
.goal-cat-name{ letter-spacing:.03em; }
.goal-cat-caret{ transition:transform .3s var(--b-spring); }
.goal-cat.active .goal-cat-caret{ transform:translateX(3px); }
@media (prefers-reduced-motion:no-preference){
  .goal-cat{ animation:bsFade .45s var(--b-ease) both; animation-delay:calc(var(--i,0)*40ms); }
}

/* ── PROGRESS TO ABUNDANCE — hero meter + per-need distance rows ── */
.goal-meter{ margin:var(--s5) 0 var(--s4); padding:var(--s4) clamp(16px,2.4vw,22px); border:1px solid var(--ink-faint); border-left:2px solid var(--accent); border-radius:3px; background:linear-gradient(180deg, rgba(94,240,168,.05), rgba(94,240,168,.015)); box-shadow:var(--edge-hi), var(--lift); animation:bsRise .5s var(--b-ease) both .05s; }
.gm-label{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-dim); }
.gm-big{ margin:6px 0 12px; line-height:1.05; }
.gm-num{ font-size:clamp(38px,7vw,60px); font-weight:600; letter-spacing:-.02em; color:#eafff3; text-shadow:0 0 1px rgba(94,240,168,.6), 0 0 26px rgba(94,240,168,.25); }
.gm-of{ font-size:clamp(12px,1.6vw,14px); color:var(--ink-dim); }
.gm-bar{ height:14px; border:1px solid var(--ink-faint); border-radius:999px; overflow:hidden; background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 5px, transparent 5px 11px); }
.gm-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), #bff7d6); box-shadow:0 0 12px rgba(94,240,168,.5); transition:width 1.1s var(--b-ease); }
.gm-gap{ margin-top:7px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-dim); }
.gm-cav{ margin-top:11px; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-faint); }
.gm-two{ margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--ink-dim); }
.gm-two .gm-up{ color:var(--accent); font-weight:600; }
.gm-two .gm-dn{ color:var(--warn); font-weight:600; }
.goal-cat-prog{ flex:none; display:flex; align-items:center; gap:9px; }
.goal-cat-bar{ width:clamp(70px,11vw,120px); height:6px; border:1px solid var(--ink-faint); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.04); }
.goal-cat-bar > span{ display:block; height:100%; border-radius:999px; background:var(--accent); box-shadow:0 0 8px rgba(94,240,168,.45); transition:width .9s var(--b-ease); }
.goal-cat.tr-up .goal-cat-bar > span{ background:var(--strike); box-shadow:none; }
.goal-cat.tr-flat .goal-cat-bar > span{ background:var(--warn); box-shadow:none; }
.goal-cat-pct{ flex:none; min-width:34px; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; color:var(--accent); }
.goal-cat.tr-up .goal-cat-pct{ color:var(--strike); }
.goal-cat.tr-flat .goal-cat-pct{ color:var(--warn); }
.goal-cat-gap{ flex:none; min-width:46px; font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--ink-faint); }
.goal-cat-arrow{ flex:none; width:1.1em; text-align:center; font-size:14px; }
.goal-cat-arrow.tr-down{ color:var(--accent); }
.goal-cat-arrow.tr-up{ color:var(--strike); }
.goal-cat-arrow.tr-flat{ color:var(--warn); }
@media (max-width:720px){ .goal-cat-gap{ display:none; } }

/* detail pane → floating glass FEATURE/SPECIMEN PLATE */
.goal-detail-pane{
  padding:var(--s6);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(94,240,168,.05), transparent 65%),
    rgba(4,16,11,.55);
  border-color:transparent;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:var(--edge-hi), var(--lift);
}
.gd-title{ font-size:var(--t-sech); letter-spacing:.03em; }
.gd-sec{ margin-top:var(--s6); }
.gd-sec-h{ font-size:var(--t-micro); letter-spacing:.2em; margin-bottom:var(--s3); }
.gd-li{ font-size:var(--t-body); line-height:1.55; }

/* the SIGIL — the signature seal: breathing halo + slow tick-ring.
   transform + drop-shadow only (NO animated blur) — keeps it performant
   and provides this view's one allowed strong-glow moment. */
.gd-sigil-wrap{ position:relative; margin-bottom:var(--s6); padding-bottom:var(--s4); }
.gd-sigil{ position:relative; z-index:1; }
.gd-sigil-wrap::before{
  content:''; position:absolute; left:50%; top:calc(50% - 9px);
  width:118px; height:118px; transform:translate(-50%,-50%);
  border-radius:50%; border:1px dashed rgba(94,240,168,.16); z-index:0; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .gd-sigil-wrap::before{ animation:sigilSpin 18s linear infinite; }
  .gd-sigil{ animation:sigilBreathe 5s ease-in-out infinite; }
  @keyframes sigilSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  @keyframes sigilBreathe{
    0%,100%{ filter:drop-shadow(0 0 2px rgba(94,240,168,.3)); }
    50%{ filter:drop-shadow(0 0 9px rgba(94,240,168,.55)); }
  }
}

/* sub-need bars: depth + lit fill + staggered reveal */
.goal-bar{ box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
.goal-bar span{ box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.15); }
.goal-sub-pct{ font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:no-preference){
  .gd-subs .goal-sub{ animation:bsFade .45s var(--b-ease) both; }
  .gd-subs .goal-sub:nth-child(2){ animation-delay:.05s; }
  .gd-subs .goal-sub:nth-child(3){ animation-delay:.10s; }
  .gd-subs .goal-sub:nth-child(4){ animation-delay:.15s; }
  .gd-subs .goal-sub:nth-child(n+5){ animation-delay:.20s; }
}
/* signal/source links: a calm spring underline */
.gd-sig-s, .gd-src a{ transition:color .2s var(--b-ease), border-color .2s var(--b-ease); }
.gd-sig-s:hover, .gd-src a:hover{ border-bottom-color:var(--accent); }

/* shared: nav active underline gets a faint bloom (cohesion touch) */
.nav-btn.active::after{ filter:drop-shadow(0 0 4px rgba(94,240,168,.5)); }

/* ═══════════════════ RESPONSIVE — keep the tug-of-war metaphor ═══════════════════ */
@media (max-width:820px){
  /* override the old order:-1 so the gauge sits BETWEEN the two sides:
     friction pulls from the top, forward rises from the bottom. */
  .col-fric{ order:-1; }
  .pull-mid{ order:0; border:1px solid var(--ink-faint); border-bottom:1px solid var(--ink-faint); border-radius:2px; box-shadow:var(--edge-hi), var(--lift); margin:var(--s4) 0; padding:var(--s4); }
  .col-fwd{ order:1; }
  .pull-board::before{ font-size:clamp(90px,40vw,200px); top:22%; }
  .climb-cols::before, .climb-cols::after{ font-size:clamp(50px,16vw,84px); }
}

/* ═══════════════════ REDUCED MOTION — collapse to static, keep the art ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  .col-fric .pcards .pcard, .col-fwd .pcards .pcard,
  .climb-bars .climb-row, .climb-card, .climb-card.up .climb-card-big,
  .goal-cat, .gd-subs .goal-sub, .goal-title, .goal-tag,
  .mid-verdict, .tug-ascii .g-fwd, .tl-cell.today .tl-up,
  .gd-sigil, .gd-sigil-wrap::before{
    animation:none !important; clip-path:none !important; opacity:1 !important; transform:none !important;
  }
  .tug-ascii .g-fwd{ -webkit-text-fill-color:var(--accent); color:var(--accent); }
  .pcard:hover, .climb-card:hover, .climb-row:hover, .tl-cell:hover{ transform:none; }
  .tl-up, .tl-dn{ transition:height .25s ease; }
}

/* ════════════════════════════════════════════════════════════════
   THE PULL · PROGRESS MARKET — index + sector board (replaces the tug gauge)
   ════════════════════════════════════════════════════════════════ */
:root{ --mkt-up:#5ef0a8; --mkt-dn:#e8674e; }
@keyframes mktRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes mktReveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.pull-board.mkt{ display:flex; flex-direction:column; gap:var(--s6); overflow-y:auto; overflow-x:hidden; padding-bottom:var(--s8); }
.pull-board.mkt > *{ flex:0 0 auto; }   /* don't let flexbox squash the chart/legend/detail */

/* the index hero */
.mkt-index{ position:relative; padding:var(--s6) clamp(16px,3vw,30px); border-radius:3px; border:1px solid var(--ink-faint); background:var(--plate); box-shadow:var(--edge-hi), var(--lift); overflow:hidden; animation:mktRise .5s var(--b-ease) both; }
.mkt-index::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 120% at 12% -10%, rgba(94,240,168,.07), transparent 55%); pointer-events:none; }
.mkt-index-top{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; }
.mkt-index-lead{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mkt-legend{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.mkt-date{ color:var(--ink-faint); letter-spacing:.1em; }
.mkt-index-val{ font-family:var(--mono); font-variant-numeric:tabular-nums slashed-zero; font-size:clamp(42px,8vw,76px); line-height:.96; font-weight:600; color:var(--ink); text-shadow:0 0 30px rgba(255,255,255,.06); }
.mkt-change{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(15px,2.4vw,20px); font-weight:600; letter-spacing:.02em; }
.mkt-change.up{ color:var(--mkt-up); text-shadow:var(--glow); }
.mkt-change.dn{ color:var(--mkt-dn); }
.mkt-index-spark{ width:min(48%,460px); height:104px; display:block; }
.mkt-verdict{ position:relative; margin-top:var(--s4); font-size:clamp(20px,3.4vw,30px); font-weight:600; letter-spacing:-.01em; line-height:1.1; text-wrap:balance; }
.mkt-verdict::before{ font-size:.62em; margin-right:.4em; vertical-align:.06em; opacity:.9; }
.mkt-verdict.v-up{ color:var(--mkt-up); text-shadow:var(--glow-strong); } .mkt-verdict.v-up::before{ content:'▲'; }
.mkt-verdict.v-mid{ color:var(--warn); } .mkt-verdict.v-mid::before{ content:'◆'; }
.mkt-verdict.v-down{ color:var(--mkt-dn); } .mkt-verdict.v-down::before{ content:'▼'; }
.mkt-note{ margin-top:var(--s2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--ink-faint); max-width:64ch; }

/* the pull · progress-index chart (main graph) */
.mkt-chart{ display:block; width:100%; height:210px; margin:var(--s4) 0 var(--s2); touch-action:pan-y; cursor:default; outline:none; }
.mkt-chart.has-hover{ cursor:pointer; }
@media (max-width:860px){ .mkt-chart{ height:180px; } }
.mkt-day{ margin:var(--s3) 0 var(--s2); border:1px solid var(--ink-faint); border-left:2px solid var(--mkt-up); border-radius:3px; padding:var(--s3) clamp(12px,2.2vw,18px); background:var(--plate); box-shadow:var(--edge-hi), var(--lift); animation:mktRise .35s var(--b-ease) both; }
.mkt-day[hidden]{ display:none; }
.mkt-day-h{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); }
.mkt-day-date{ font-family:var(--mono); font-size:var(--t-body); letter-spacing:.04em; color:var(--ink); font-weight:600; }
.mkt-day-move{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-body); font-weight:600; }
.mkt-day-move.up{ color:var(--mkt-up); } .mkt-day-move.dn{ color:var(--mkt-dn); }
.mkt-day-x{ margin-left:auto; }
.mkt-day-broad{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--mkt-up); margin-bottom:var(--s2); }
.mkt-day-chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s3); }
.mkt-day-chips .mkt-chip{ font-variant-numeric:tabular-nums; }
.mkt-day-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:var(--s4); }
.mkt-headline{ position:relative; margin-top:var(--s4); font-size:clamp(17px,2.7vw,23px); font-weight:600; letter-spacing:-.005em; line-height:1.24; color:var(--ink); text-wrap:balance; }

/* the sector board */
.mkt-sectors{ display:flex; flex-direction:column; }
.mkt-board-h{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) 96px 86px; gap:var(--s3); padding:0 var(--s4) var(--s2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--ink-faint); }
.mkt-board-h .mkt-th-trend{ text-align:center; } .mkt-board-h .mkt-th-net,.mkt-board-h .mkt-th-chg{ text-align:right; }
.mkt-rows{ display:flex; flex-direction:column; }
.mkt-row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) 96px 86px; gap:var(--s3); align-items:center; width:100%; text-align:left; padding:var(--s3) var(--s4); background:none; border:0; border-bottom:1px solid var(--ink-faint); border-left:2px solid transparent; cursor:pointer; font-family:inherit; color:var(--ink); transition:background .2s var(--b-ease), transform .2s var(--b-ease), border-left-color .2s var(--b-ease); animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0) * 40ms); }
.mkt-row:hover{ background:rgba(94,240,168,.04); transform:translateX(2px); }
.mkt-row.on{ background:rgba(255,255,255,.04); border-left-color:var(--c,var(--accent)); }
.mkt-row-name{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mkt-sym{ font-size:var(--t-cardh); font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkt-blurb{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.mkt-row-spark{ width:100%; max-width:210px; height:34px; display:block; margin:0 auto; opacity:.95; }
.mkt-row-net{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-body); font-weight:600; }
.mkt-row.up .mkt-row-net{ color:var(--mkt-up); } .mkt-row.dn .mkt-row-net{ color:var(--mkt-dn); }
.mkt-row-chg{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-cap); color:var(--ink-dim); }

/* drill-down detail */
.mkt-detail{ border:1px solid var(--ink-faint); border-radius:3px; padding:var(--s4) clamp(14px,2.4vw,22px); background:var(--plate); box-shadow:var(--edge-hi), var(--lift); animation:mktRise .4s var(--b-ease) both; }
.mkt-detail[hidden]{ display:none; }
.mkt-detail-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s3); }
.mkt-detail-t{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.mkt-detail-name{ font-size:var(--t-sech); font-weight:600; letter-spacing:-.01em; }
.mkt-detail-chg{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-body); font-weight:600; }
.mkt-detail-chg.up{ color:var(--mkt-up); } .mkt-detail-chg.dn{ color:var(--mkt-dn); }
.mkt-detail-doms{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }
.mkt-chip{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--ink-faint); border-radius:999px; }
.mkt-chip.up{ color:var(--mkt-up); border-color:rgba(94,240,168,.4); } .mkt-chip.dn{ color:var(--mkt-dn); border-color:rgba(232,103,78,.4); }
.mkt-detail-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--s4); }
.mkt-empty{ font-family:var(--mono); font-size:var(--t-body); color:var(--ink-dim); }

/* ── THE FRONTIER LEDGER — released vs coming-soon, by sector ── */
.led-board{ display:flex; flex-direction:column; gap:var(--s5); }
.led-filter{ position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3) 0; background:linear-gradient(180deg, var(--bg) 72%, transparent); }
.led-secfilter{ display:flex; flex-wrap:wrap; gap:6px; }
.led-fchip{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:none; border:1px solid var(--ink-faint); border-radius:999px; padding:3px 9px; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.led-fchip:hover{ color:var(--ink); }
.led-fchip.on{ color:#06120d; background:var(--c, var(--accent)); border-color:var(--c, var(--accent)); }
.led-streamtoggle{ display:flex; gap:2px; }
.led-streamtoggle button{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); background:none; border:1px solid var(--ink-faint); padding:4px 12px; cursor:pointer; }
.led-streamtoggle button.on{ color:var(--accent); border-color:var(--accent-dim); background:rgba(94,240,168,.06); }
.led-stream.off{ display:none; }
.led-stream-h{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; padding-bottom:var(--s2); border-bottom:1px solid var(--ink-faint); margin-bottom:var(--s4); }
.led-stream-label{ font-size:clamp(15px,2.4vw,20px); font-weight:600; letter-spacing:.06em; color:#eafff3; text-shadow:0 0 16px rgba(94,240,168,.18); }
.led-stream-soon .led-stream-label{ color:var(--accent); }
.led-count{ font-family:var(--mono); font-size:11px; color:var(--accent-dim); }
.led-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.02em; }
.led-secs{ display:flex; flex-direction:column; gap:var(--s5); }
.led-sec{ animation:bsFade .4s var(--b-ease) both; animation-delay:calc(var(--i,0)*45ms); }
.led-sec-h{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0; border-left:2px solid var(--c, var(--accent)); padding:4px 0 4px 10px; margin-bottom:var(--s3); cursor:pointer; font-family:var(--mono); color:inherit; }
.led-dot{ width:8px; height:8px; border-radius:50%; background:var(--c, var(--accent)); box-shadow:0 0 8px var(--c, var(--accent)); flex:none; }
.led-sec-name{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#eafff3; }
.led-sec-blurb{ font-size:10.5px; color:var(--ink-faint); }
.led-sec-ct{ margin-left:auto; font-size:11px; color:var(--c, var(--accent)); font-variant-numeric:tabular-nums; }
.led-sec.collapsed .led-cards{ display:none; }
.led-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--s4); }
.led-empty{ padding:var(--s4) 0; }
.pcard-soon{ border-left-style:dashed; border-left-color:var(--accent-dim); opacity:.9; }
.pcard-soon .pcard-b{ opacity:.85; }
.pcard-eta{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--accent); background:rgba(94,240,168,.08); border:1px solid var(--accent-dim); border-radius:20px; padding:2px 7px; }
@media (max-width:560px){ .led-cards{ grid-template-columns:1fr; } }

@media (max-width:720px){
  .mkt-index-top{ flex-direction:column; align-items:flex-start; }
  .mkt-index-spark{ width:100%; height:84px; }
  .mkt-board-h,.mkt-row{ grid-template-columns:minmax(0,1fr) 86px 74px; }
  .mkt-board-h .mkt-th-trend,.mkt-row-spark{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .mkt-index,.mkt-row,.mkt-detail{ animation:none !important; } }

/* the pull · timeframe tabs */
.pull-board.mkt .mkt-index-top{ align-items:flex-start; }
.mkt-tabs{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--ink-faint); border-radius:999px; background:rgba(0,0,0,.28); align-self:flex-start; }
.mkt-tab{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:none; border:0; padding:6px 13px; border-radius:999px; cursor:pointer; transition:color .15s var(--b-ease), background .15s var(--b-ease); }
.mkt-tab:hover{ color:var(--ink); }
.mkt-tab.on{ color:#04130b; background:var(--accent); box-shadow:var(--glow); font-weight:600; }
@media (max-width:620px){ .mkt-tab{ padding:5px 10px; } }

/* radial vignette to seat the index hero in the CRT void */
.mkt-index::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(46% 120% at 50% 56%, rgba(94,240,168,.05), transparent 60%);
}
@media (prefers-reduced-motion: reduce){
  .mkt-index::after{ animation: none !important; }
}
.mkt-leg-h{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s3); }

/* ── COLORFUL GRAPHICS — sector hue carries the data, not just mint ── */
/* goal rows: color = which need (domain), bar length = how close to free, arrow = trajectory */
.goal-cat-bar > span,
.goal-cat.tr-up .goal-cat-bar > span,
.goal-cat.tr-flat .goal-cat-bar > span{
  background:linear-gradient(90deg, color-mix(in srgb, var(--row-c, var(--accent)) 34%, transparent), var(--row-c, var(--accent)));
  box-shadow:0 0 9px color-mix(in srgb, var(--row-c, var(--accent)) 42%, transparent);
}
.goal-cat-idx{ color:color-mix(in srgb, var(--row-c, var(--ink-faint)) 55%, var(--ink-faint)); }
.goal-cat.active .goal-cat-idx{ color:var(--row-c, var(--accent)); text-shadow:0 0 9px color-mix(in srgb, var(--row-c) 60%, transparent); opacity:1; }
.goal-cat-pct,
.goal-cat.tr-up .goal-cat-pct,
.goal-cat.tr-flat .goal-cat-pct{ color:var(--row-c, var(--accent)); }
.goal-cat.active{ border-color:color-mix(in srgb, var(--row-c) 42%, transparent) !important; }
.goal-cat.active .goal-cat-caret{ color:var(--row-c, var(--accent)); }

/* PULL: index unit gloss + verdict-as-claim spacing */
.mkt-gloss{ margin-top:var(--s2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--ink-dim); }
.sec-head .mkt-verdict{ margin-top:0; }

/* PULL: ledger bridge header — ties the streams back to the chart */
.led-bridge{ display:flex; flex-direction:column; gap:3px; margin-bottom:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--ink-faint); }
.led-bridge-t{ font-family:var(--disp); font-size:var(--t-sech); font-weight:600; letter-spacing:.01em; color:#eafff3; text-transform:uppercase; }
.led-bridge-s{ font-family:var(--mono); font-size:var(--t-body); color:var(--ink-dim); }

/* ════════════════════════════════════════════════════════════════
   THE PULL · v2 — the exponential hub
   pace strip · forecast chart · the horizon · the heatboard · image-first signal
   ════════════════════════════════════════════════════════════════ */

/* ── the pace strip: speed / acceleration / doubling time / a year of this ── */
.pace-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-faint); border:1px solid var(--ink-faint); margin-top:var(--s5); }
.pace-strip[hidden]{ display:none; }
.pace-cell{ display:flex; flex-direction:column; gap:3px; padding:var(--s3) var(--s4); background:linear-gradient(180deg, rgba(4,16,11,.94), rgba(4,16,11,.68)); }
.pace-lab{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.pace-cell b{ font-family:var(--disp); font-weight:200; font-size:clamp(19px,2.6vw,29px); line-height:1.1; letter-spacing:-.02em; color:#eafff3; font-variant-numeric:tabular-nums slashed-zero; }
.pace-cell b.up{ color:var(--mkt-up); text-shadow:var(--glow); }
.pace-cell b.dn{ color:var(--mkt-dn); }
.pace-sub{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-dim); line-height:1.5; }
@media (max-width:820px){ .pace-strip{ grid-template-columns:repeat(2,1fr); } }

/* ── the main graph: taller, with forecast zone + velocity ribbon baked in ── */
.mkt-chart{ height:clamp(250px, 34vw, 330px); }
@media (max-width:860px){ .mkt-chart{ height:230px; } }
.mkt-chart-key{ display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:2px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-dim); }
.mkt-chart-key .mck-ev{ color:var(--accent-dim); }

/* ── THE HORIZON — milestone windows, pulled closer by the live signal ── */
.hz-board{ display:flex; flex-direction:column; gap:var(--s5); margin-top:var(--s6); }
.hz-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:var(--s4); }
.hz-card{ position:relative; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); box-shadow:var(--edge-hi); transition:transform .25s var(--b-ease), box-shadow .25s var(--b-ease), border-color .25s; animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0) * 70ms); }
.hz-card:hover{ transform:translateY(-3px); box-shadow:var(--edge-hi), var(--lift-sm); border-color:var(--accent-dim); }
.hz-card.hz-emg{ border-left-color:var(--warn); }
.hz-card.hz-spec{ border-left-color:var(--ink-faint); border-left-style:dashed; }
.hz-card.hz-comp{ border-left-color:var(--c-goal, #c08bf0); }
.hz-top{ display:flex; align-items:flex-start; gap:var(--s3); }
.hz-top .gd-sigil{ flex:none; opacity:.9; }
.hz-tt{ min-width:0; }
.hz-name{ margin:0; font-family:var(--mono); font-size:var(--t-cardh); font-weight:600; letter-spacing:.12em; color:#eafff3; }
.hz-tag{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.05em; color:var(--accent); opacity:.85; }
.hz-card.hz-comp .hz-tag{ color:var(--c-goal, #c08bf0); }
.hz-pill{ margin-left:auto; flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid currentColor; border-radius:999px; padding:2px 8px; opacity:.85; cursor:help; white-space:nowrap; }
.hz-card.hz-emg .hz-pill{ color:var(--warn); }
.hz-card.hz-spec .hz-pill{ color:var(--ink-dim); }
.hz-card.hz-comp .hz-pill{ color:var(--c-goal, #c08bf0); }
.hz-bar{ height:4px; background:var(--bg-soft); border:1px solid var(--ink-faint); }
.hz-bar span{ display:block; height:100%; background:linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow:0 0 8px rgba(94,240,168,.35); transition:width 1.1s var(--b-ease); }
.hz-card.hz-comp .hz-bar span{ background:linear-gradient(90deg, #6a4a86, var(--c-goal, #c08bf0)); box-shadow:0 0 8px rgba(192,139,240,.35); }
.hz-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); font-family:var(--mono); font-size:var(--t-cap); color:var(--ink-dim); }
.hz-window{ font-weight:600; font-variant-numeric:tabular-nums; color:#eafff3; letter-spacing:.04em; cursor:help; }
.hz-card.hz-spec .hz-window{ color:var(--ink-dim); }
.hz-card.hz-spec .hz-window::before{ content:'○ '; }
.hz-pull{ font-family:var(--mono); font-size:var(--t-cap); color:var(--ink-dim); }
.hz-pull.up{ color:var(--mkt-up); }
.hz-pull.dn{ color:var(--mkt-dn); }
.hz-total{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-faint); letter-spacing:.04em; }
.hz-ev{ margin:0; font-size:var(--t-body); line-height:1.62; color:var(--ink); }
.hz-dots{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:var(--s2); }
.hz-dots i{ display:block; width:7px; height:7px; border-radius:50%; opacity:.85; box-shadow:0 0 6px currentColor; }
.hz-dots span{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.hz-note{ margin:0; font-family:var(--mono); font-size:var(--t-cap); color:var(--ink-dim); line-height:1.65; max-width:78ch; }

/* ── THE HEATBOARD — 11 needs ranked by momentum; tiles are filters ── */
.heat-board{ display:flex; flex-direction:column; gap:var(--s5); margin-top:var(--s6); }
.heat-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:var(--s3); }
.heat-tile{ --c:#5ef0a8; position:relative; display:flex; flex-direction:column; gap:3px; text-align:left; font-family:var(--mono); color:var(--ink); background:var(--plate); border:1px solid var(--ink-faint); border-top:2px solid color-mix(in srgb, var(--c) 55%, transparent); padding:var(--s3) var(--s3) var(--s2); cursor:pointer; transition:transform .22s var(--b-ease), border-color .22s, box-shadow .22s, background .22s; animation:mktReveal .45s var(--b-ease) both; animation-delay:calc(var(--i,0) * 35ms); }
.heat-tile:hover{ transform:translateY(-2px); box-shadow:var(--lift-sm); border-color:color-mix(in srgb, var(--c) 45%, var(--ink-faint)); }
.heat-tile.on{ border-color:color-mix(in srgb, var(--c) 70%, transparent); background:color-mix(in srgb, var(--c) 9%, rgba(4,16,11,.62)); box-shadow:0 0 16px -7px var(--c); }
.heat-tile.on::after{ content:'◈ focused'; position:absolute; top:6px; right:8px; font-size:8px; letter-spacing:.12em; color:var(--c); }
.ht-name{ font-size:var(--t-cap); letter-spacing:.14em; text-transform:uppercase; color:#eafff3; }
.ht-blurb{ font-size:var(--t-micro); color:var(--ink-dim); }
.ht-spark{ width:100%; height:26px; margin:5px 0 3px; }
.ht-foot{ display:flex; align-items:baseline; gap:6px; font-size:var(--t-micro); }
.ht-foot b{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-dim); }
.ht-foot b.up{ color:var(--mkt-up); }
.ht-foot b.dn{ color:var(--mkt-dn); }
.ht-foot i{ font-style:normal; color:var(--accent); letter-spacing:-.1em; }
.heat-tile.h-slip .ht-foot i{ color:var(--mkt-dn); }
.ht-foot em{ font-style:normal; color:var(--ink-faint); margin-left:auto; letter-spacing:.1em; text-transform:uppercase; }
.heat-tile.h-surge .ht-foot em{ color:var(--mkt-up); }
.heat-tile.h-slip .ht-foot em{ color:var(--mkt-dn); }
.heat-summary{ display:flex; flex-direction:column; gap:var(--s2); }
.heat-sum{ display:flex; gap:var(--s4); align-items:baseline; font-family:var(--mono); font-size:var(--t-cap); border:1px solid var(--ink-faint); padding:var(--s2) var(--s4); background:rgba(4,16,11,.45); }
.heat-sum b{ flex:none; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.heat-sum.hs-up b{ color:var(--mkt-up); }
.heat-sum.hs-dn b{ color:var(--warn); }
.heat-sum span{ color:var(--ink); letter-spacing:.02em; }

/* ── the signal, image-first: the picture leads, chips float on it ── */
.pcard-media{ z-index:0; }
.pcard-media::after{ background:linear-gradient(180deg, rgba(2,10,7,.55), transparent 36%), repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px); }
.pcard-media img{ filter:saturate(.82) contrast(1.05) brightness(.9); }
.pcard.fric .pcard-media img{ filter:saturate(.7) contrast(1.05) brightness(.86) sepia(.18) hue-rotate(-18deg); }
.pcard-media .pcard-dom{ position:absolute; top:8px; left:8px; z-index:2; background:rgba(2,10,7,.72); backdrop-filter:blur(3px); }
.pcard.fwd .pcard-media .pcard-dom, .pcard.fric .pcard-media .pcard-dom{ color:inherit; }
.pcard-media .pcard-impact{ position:absolute; top:8px; right:8px; z-index:2; background:rgba(2,10,7,.72); backdrop-filter:blur(3px); }
.pcard-media .pcard-impact.up{ border:1px solid rgba(94,240,168,.45); }
.pcard-media .pcard-impact.dn{ border:1px solid rgba(232,103,78,.5); }
.pcard-media .pcard-eta{ position:absolute; bottom:8px; right:8px; z-index:2; background:rgba(2,10,7,.78); }
.pcard-body{ display:block; }
.pcard-h{ font-size:14.5px; }

/* the big three — the window's heaviest signals as feature cards */
.led-feature{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.led-feature:empty{ display:none; }
.led-feature .pcard{ border-left-width:3px; }
.led-feature .pcard-h{ font-size:clamp(15px,1.8vw,18px); line-height:1.34; }
.led-feature .pcard-b{ font-size:12.5px; }
@media (max-width:900px){ .led-feature{ grid-template-columns:1fr; } }

/* section heads inside the board breathe a little more */
#led-board .sec-head, #horizon .sec-head, #heatboard .sec-head{ margin-bottom:0; }

@media (prefers-reduced-motion:reduce){
  .hz-card, .heat-tile{ animation:none !important; }
  .hz-card:hover, .heat-tile:hover{ transform:none; }
  .hz-bar span{ transition:none; }
}

/* the way home — unmissable */
.nav-btn.nav-home{ color:var(--accent); border-color:var(--accent-dim); }
.nav-btn.nav-home:hover{ color:#04130b; background:var(--accent); box-shadow:var(--glow); }
.dash-brand:hover{ color:var(--accent); text-shadow:var(--glow); }

/* ── views swap IN FLOW under the nav — never overlay the controls ──
   (the old absolute top:104px panels started ABOVE the nav once the thesis
   rail existed, so an open view swallowed every click on the tab bar) */
.climb-view, .goal-view, .social-view, .occupations-view{ position:relative; inset:auto; z-index:auto; flex:1 1 auto; min-height:0; margin-top:18px; overflow-y:auto; padding:10px 8px 44px; }
.climb-view[hidden], .goal-view[hidden], .social-view[hidden], .frontier-view[hidden], .occupations-view[hidden]{ display:none; }

/* ── THE CLIMB · WITHIN REACH — the next wins, verified ── */
.climb-close{ max-width:1180px; margin:0 auto var(--s8); }
.cc-head{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; padding-bottom:var(--s2); border-bottom:1px solid var(--ink-faint); margin-bottom:var(--s4); }
.cc-title{ font-size:clamp(15px,2.4vw,20px); font-weight:600; letter-spacing:.06em; color:#eafff3; text-shadow:0 0 16px rgba(244,201,93,.18); }
.cc-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.02em; }
.cc-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:var(--s4); }
.cc-card{ position:relative; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-top:2px solid var(--c-climb,#f4c95d); box-shadow:var(--edge-hi); animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*55ms); transition:transform .22s var(--b-ease), box-shadow .22s; }
.cc-card:hover{ transform:translateY(-2px); box-shadow:var(--edge-hi), var(--lift-sm); }
.cc-card.crossed{ border-top-color:var(--accent); }
.cc-state{ align-self:flex-start; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--c-climb,#f4c95d); color:var(--c-climb,#f4c95d); }
.cc-card.crossed .cc-state{ border-color:var(--accent); color:var(--accent); }
.cc-goal{ margin:0; font-family:var(--mono); font-size:var(--t-cardh); font-weight:600; letter-spacing:.04em; color:#eafff3; }
.cc-ev{ margin:0; font-size:var(--t-body); line-height:1.6; color:var(--ink); }
.cc-but{ margin:0; font-family:var(--mono); font-size:var(--t-cap); line-height:1.55; color:var(--ink-dim); }
.cc-but::before{ content:'but · '; color:var(--warn); }
.cc-src{ margin-top:auto; padding-top:var(--s2); font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-faint); display:flex; gap:var(--s3); flex-wrap:wrap; }
.cc-src a{ color:var(--accent-dim); text-decoration:none; border-bottom:1px dotted var(--accent-dim); }
.cc-src a:hover{ color:var(--accent); }
.cc-asof{ margin-left:auto; letter-spacing:.08em; }
@media (prefers-reduced-motion:reduce){ .cc-card{ animation:none !important; } .cc-card:hover{ transform:none; } }

/* ════════════════════════════════════════════════════════════════
   HOME — the in-hub welcome (sits before the pull; the logo lands here)
   ════════════════════════════════════════════════════════════════ */
.home-view{ position:relative; flex:1 1 auto; min-height:0; margin-top:18px; overflow-y:auto; padding:10px 8px 48px; }
.home-view[hidden]{ display:none; }
.home-view .sec-claim{ font-size:clamp(30px,5.2vw,52px); }
.hv-lead{ max-width:74ch; margin:var(--s5) 0 var(--s8); display:flex; flex-direction:column; gap:var(--s4); }
.hv-p{ margin:0; font-size:clamp(14px,1.7vw,16px); line-height:1.7; color:var(--ink); }
.hv-p b{ color:#eafff3; }
.hv-p em{ font-style:italic; color:var(--accent); opacity:.92; }
.hv-why{ padding-left:var(--s4); border-left:2px solid var(--accent-dim); color:var(--ink-dim); }
.hv-why b{ color:var(--accent); }
.hv-routes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(238px,1fr)); gap:var(--s4); }
.hv-route{ display:flex; flex-direction:column; gap:6px; text-align:left; padding:var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); box-shadow:var(--edge-hi); cursor:pointer; font-family:inherit; color:var(--ink); transition:transform .22s var(--b-ease), box-shadow .22s var(--b-ease), border-color .22s; animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
.hv-route:hover{ transform:translateY(-3px); box-shadow:var(--edge-hi), var(--lift-sm); border-left-color:var(--accent); }
.hv-r-k{ font-family:var(--mono); font-size:var(--t-cardh); font-weight:600; letter-spacing:.06em; color:#eafff3; }
.hv-r-t{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); opacity:.85; }
.hv-r-d{ font-size:var(--t-body); line-height:1.55; color:var(--ink-dim); margin-top:2px; }
.hv-r-d b{ color:var(--ink); }
.hv-r-go{ margin-top:auto; padding-top:var(--s3); font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.08em; color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }
.hv-route:hover .hv-r-go{ opacity:1; transform:none; }
.hv-cta{ margin-top:var(--s8); }
@media (prefers-reduced-motion:reduce){ .hv-route{ animation:none !important; } .hv-route:hover{ transform:none; } .hv-route:hover .hv-r-go{ transition:none; } }

/* ════════════════════════════════════════════════════════════════
   VISUAL UPLIFT — color by sector/section, graphics over text
   ════════════════════════════════════════════════════════════════ */
#home-view{ --sec-c:var(--c-pull); }

/* monoline icons inherit their hue via currentColor */
.sicon{ display:block; }
.sicon *{ vector-effect:non-scaling-stroke; }

/* a reusable icon chip — tinted square in the element's hue */
.hz-ico, .cc-ico, .ht-ico{ display:grid; place-items:center; flex:none; border-radius:9px; }
.hz-ico{ width:42px; height:42px; color:var(--mc); background:color-mix(in srgb, var(--mc) 15%, transparent); border:1px solid color-mix(in srgb, var(--mc) 34%, transparent); box-shadow:0 0 18px -6px var(--mc); }
.cc-ico{ width:34px; height:34px; color:var(--c-climb); background:color-mix(in srgb, var(--c-climb) 15%, transparent); border:1px solid color-mix(in srgb, var(--c-climb) 32%, transparent); }
.ht-ico{ width:26px; height:26px; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); }

/* the progress dial */
.pring-wrap{ position:relative; flex:none; display:grid; place-items:center; }
.pring{ display:block; }
.pring-val{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--disp); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ── THE HORIZON — colored, graphic-first cards ── */
.hz-cards{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.hz-card{ position:relative; gap:var(--s3); border:1px solid var(--ink-faint); border-top:2px solid var(--mc, var(--accent)); overflow:hidden; }
.hz-card::before{ content:''; position:absolute; top:0; right:0; width:60%; height:70%; background:radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--mc) 16%, transparent), transparent 62%); pointer-events:none; }
.hz-card > *{ position:relative; z-index:1; }
.hz-card:hover{ border-color:color-mix(in srgb, var(--mc) 40%, var(--ink-faint)); box-shadow:var(--edge-hi), 0 18px 44px -20px var(--mc); }
.hz-top{ display:flex; align-items:center; gap:var(--s3); }
.hz-name{ margin:0; color:#eafff3; }
.hz-tag{ color:var(--mc); opacity:.9; }
.hz-pill{ margin-left:auto; }
.hz-hero{ display:flex; align-items:center; gap:var(--s4); }
.hz-tl{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.hz-window{ font-family:var(--disp); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:#eafff3; }
.hz-card.hz-spec .hz-window{ color:var(--ink); }
.hz-track{ position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--ink-faint); }
.hz-track-span{ position:absolute; top:1px; bottom:1px; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--mc) 45%, transparent), var(--mc)); box-shadow:0 0 12px -2px var(--mc); }
.hz-track-now{ position:absolute; top:-3px; width:2px; height:14px; background:#eafff3; box-shadow:0 0 8px #eafff3; transform:translateX(-1px); }
.hz-track-now::after{ content:''; position:absolute; top:-3px; left:-2px; width:6px; height:6px; border-radius:50%; background:#eafff3; box-shadow:0 0 8px #eafff3; }
.hz-track-lab{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; color:var(--ink-faint); }
.hz-track-lab span:nth-child(2){ color:#eafff3; }
.hz-pull{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.01em; }
.hz-ev{ font-size:var(--t-cap); line-height:1.6; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ── WITHIN REACH — colored by sector, medallion, clamped ── */
.cc-card{ gap:var(--s3); overflow:hidden; }
.cc-card::before{ content:''; position:absolute; top:0; right:0; width:55%; height:60%; background:radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--c-climb) 13%, transparent), transparent 60%); pointer-events:none; }
.cc-card > *{ position:relative; z-index:1; }
.cc-card:hover{ border-color:color-mix(in srgb, var(--c-climb) 38%, var(--ink-faint)); box-shadow:var(--edge-hi), 0 16px 40px -20px var(--c-climb); }
.cc-top{ display:flex; align-items:flex-start; gap:var(--s3); }
.cc-goal{ flex:1; min-width:0; margin:0; }
.cc-badge{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:15px; border:1px solid; }
.cc-card.crossed .cc-badge{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:0 0 14px -4px var(--accent); }
.cc-card.reach .cc-badge{ color:var(--c-climb); border-color:color-mix(in srgb, var(--c-climb) 42%, transparent); background:color-mix(in srgb, var(--c-climb) 10%, transparent); }
.cc-state{ margin-top:-4px; }
.cc-ev{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cc-but{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── HEATBOARD — icon + name head ── */
.ht-head{ display:flex; align-items:center; gap:8px; }
.ht-nmw{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.heat-tile .ht-name, .heat-tile .ht-blurb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── HOME — routes carry their section's color ── */
.hv-route[data-view="pull"]{ --rc:var(--c-pull); }
.hv-route[data-view="climb"]{ --rc:var(--c-climb); }
.hv-route[data-view="goal"]{ --rc:var(--c-goal); }
.hv-route[data-view="social"]{ --rc:var(--c-social); }
.hv-route{ border-left-color:color-mix(in srgb, var(--rc, var(--accent)) 60%, transparent); }
.hv-route::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0, color-mix(in srgb, var(--rc) 10%, transparent), transparent 60%); pointer-events:none; opacity:0; transition:opacity .22s; }
.hv-route{ position:relative; overflow:hidden; }
.hv-route:hover{ border-left-color:var(--rc); }
.hv-route:hover::after{ opacity:1; }
.hv-r-k{ color:var(--rc, #eafff3); }
.hv-r-t{ color:var(--rc, var(--accent)); }
.hv-r-go{ color:var(--rc, var(--accent)); }

/* ── big index number: a mint gradient, not flat ── */
.mkt-index-val{ background:linear-gradient(150deg, #eafff3, var(--accent) 70%, #2f9d6b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* the section eyebrow line already uses --sec-c; give claims their hue-lit underline */
.home-view .sec-claim .hl, #pull-board .sec-claim .hl{ text-shadow:0 0 20px color-mix(in srgb, var(--sec-c) 45%, transparent); }

@media (prefers-reduced-motion:reduce){ .pring circle{ transition:none !important; } }

/* home — live readout strip + pull-quote */
.hv-why{ margin:0; padding:var(--s3) 0 var(--s3) var(--s4); border-left:2px solid var(--accent-dim); font-size:clamp(15px,1.9vw,18px); line-height:1.55; color:var(--ink-dim); font-style:normal; }
.hv-why b{ color:var(--accent); }
.hv-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-faint); border:1px solid var(--ink-faint); margin:0 0 var(--s8); }
.hv-stat{ display:flex; flex-direction:column; gap:3px; padding:var(--s4) var(--s4) var(--s3); background:linear-gradient(180deg, rgba(4,16,11,.92), rgba(4,16,11,.66)); animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
.hv-stat-k{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.hv-stat-v{ font-family:var(--disp); font-weight:200; font-size:clamp(24px,3.4vw,38px); line-height:1.05; letter-spacing:-.02em; color:#eafff3; font-variant-numeric:tabular-nums slashed-zero; }
.hv-stat-v.up{ color:var(--mkt-up); text-shadow:var(--glow); }
.hv-stat-v.dn{ color:var(--mkt-dn); }
.hv-stat-s{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-faint); line-height:1.4; }
@media (max-width:720px){ .hv-stats{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce){ .hv-stat{ animation:none !important; } }

/* ── THE ROAD TO FREE — per-need roadmap stepper (goal detail pane) ── */
.gd-road{ margin-top: 22px; }
.gd-step{ display:flex; gap:12px; animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 60ms); }
.gd-step-rail{ display:flex; flex-direction:column; align-items:center; flex:none; width:14px; padding-top:5px; }
.gd-step-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--step-c, var(--accent-dim)); background:color-mix(in srgb, var(--step-c, var(--accent-dim)) 35%, transparent); box-shadow:0 0 6px color-mix(in srgb, var(--step-c, var(--accent-dim)) 40%, transparent); flex:none; }
.gd-step-line{ flex:1; width:1px; min-height:18px; margin-top:4px; background:linear-gradient(var(--step-c, var(--accent-dim)), rgba(124,136,127,.25)); opacity:.5; }
.gd-step-body{ flex:1; min-width:0; padding-bottom:16px; }
.gd-step:last-child .gd-step-body{ padding-bottom:0; }
.gd-step-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.gd-step-k{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--step-c, var(--accent)); }
.gd-step-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink-faint); border:1px solid color-mix(in srgb, var(--step-c, var(--accent-dim)) 45%, transparent); padding:1px 6px; border-radius:2px; }
.gd-step-t{ margin-top:4px; font-size:13px; font-weight:600; color:var(--ink); line-height:1.4; }
.gd-step-d{ margin-top:3px; font-size:12.5px; line-height:1.55; color:var(--ink); opacity:.85; }
.gd-step-gate{ margin-top:5px; font-size:11.5px; line-height:1.5; color:var(--ink-faint); font-style:italic; }
.gd-step-gate b{ font-style:normal; font-weight:600; letter-spacing:.08em; font-size:10px; text-transform:uppercase; color:var(--ink-dim); }
.gd-step.rd-now{ --step-c:var(--accent); }
.gd-step.rd-emg{ --step-c:var(--warn); }
.gd-step.rd-spec{ --step-c:var(--ink-dim); }
.gd-step.rd-pol{ --step-c:var(--strike); }
@media (prefers-reduced-motion:reduce){ .gd-step{ animation:none !important; } }

/* ── HOW IT GETS REACHED — milestone gates on horizon cards ── */
.hz-path{ margin-top:10px; padding-top:9px; border-top:1px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent); }
.hz-path-h{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.hz-path-li{ display:flex; gap:8px; align-items:baseline; font-size:11.5px; line-height:1.5; color:var(--ink-dim); padding:2px 0; }
.hz-path-ix{ flex:none; font-family:var(--mono); font-size:9.5px; color:color-mix(in srgb, var(--mc, var(--accent)) 75%, var(--ink-dim)); }

/* ── the method link — the transparency door under the index ── */
.method-link{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent-dim); text-decoration:none; border-bottom:1px dotted var(--ink-faint); transition:color .2s; }
.method-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ── the signal sort toggle (impact vs newest) ── */
.led-sort{ display:flex; align-items:baseline; gap:8px; margin:2px 0 14px; font-family:var(--mono); }
.led-sort-lab{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.led-sort-btn{ background:none; border:1px solid var(--ink-faint); color:var(--ink-dim); font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:3px 10px; cursor:pointer; transition:color .2s, border-color .2s; }
.led-sort-btn:hover{ color:var(--accent); border-color:var(--accent-dim); }
.led-sort-btn.on{ color:var(--accent); border-color:var(--accent-dim); background:rgba(94,240,168,.06); }
.led-day-h{ grid-column:1 / -1; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-faint); padding:10px 0 2px; border-bottom:1px dotted rgba(124,136,127,.3); margin-bottom:6px; }

/* ── admin share studio ── */
.studio-list{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.studio-row{ display:flex; align-items:baseline; gap:10px; text-align:left; background:rgba(255,255,255,.015); border:1px solid var(--ink-faint); padding:9px 12px; cursor:pointer; font-family:var(--mono); color:var(--ink); transition:border-color .2s; }
.studio-row:hover{ border-color:var(--accent-dim); }
.studio-row.fric{ border-left:2px solid var(--strike); }
.studio-day{ flex:none; font-size:10px; letter-spacing:.12em; color:var(--ink-faint); }
.studio-sec{ flex:none; font-size:10px; letter-spacing:.14em; color:var(--accent-dim); }
.studio-w{ flex:none; font-size:10px; color:var(--warn); }
.studio-h{ font-size:12.5px; line-height:1.45; }
.studio-pane{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
/* two-column studio: signal list (left, scrolls on its own) + compose/card pane (right, sticky) */
.studio-cols{ display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:var(--s5); align-items:start; margin:10px 0; }
.studio-cols .studio-list{ margin:0; max-height:72vh; overflow-y:auto; padding-right:4px; }
.studio-cols .studio-pane{ margin-top:0; position:sticky; top:16px; }
.studio-empty{ margin:0; padding:24px 20px; text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); border:1px dashed var(--ink-faint); border-radius:8px; }
@media (max-width:820px){ .studio-cols{ grid-template-columns:1fr; } .studio-cols .studio-list{ max-height:none; overflow:visible; } .studio-cols .studio-pane{ position:static; } }
.studio-text{ width:100%; font-family:var(--mono); font-size:13px; line-height:1.6; resize:vertical; }
.studio-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.studio-count{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.studio-count.over{ color:var(--strike); }
.studio-card{ max-width:100%; border:1px solid var(--ink-faint); }

/* ── THE BIZ — actor leaderboard ── */
.biz-board{ margin-top:var(--s7, 40px); }
.biz-rows{ display:flex; flex-direction:column; gap:7px; }
.biz-row{ background:var(--plate, rgba(255,255,255,.015)); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 45ms); }
.biz-row.fric{ border-left-color:var(--strike); }
.biz-head{ display:flex; align-items:baseline; gap:12px; width:100%; text-align:left; background:none; border:0; padding:11px 14px; cursor:pointer; font-family:var(--mono); color:var(--ink); }
.biz-rank{ flex:none; font-size:10px; color:var(--ink-faint); letter-spacing:.12em; }
.biz-name{ font-size:14px; font-weight:600; letter-spacing:.04em; }
.biz-dots{ flex:none; display:inline-flex; gap:3px; }
.biz-dots i{ width:7px; height:7px; border-radius:99px; display:inline-block; }
.biz-ct{ flex:1; font-size:11px; color:var(--ink-dim); }
.biz-pts{ flex:none; font-size:12px; font-weight:600; }
.biz-pts.up, .biz-days.up{ color:var(--accent); }
.biz-pts.dn, .biz-days.dn{ color:var(--strike); }
.biz-days{ flex:none; font-size:11px; }
.biz-caret{ flex:none; color:var(--ink-faint); transition:transform .2s; }
.biz-row.open .biz-caret{ transform:rotate(90deg); }
.biz-stories{ display:flex; flex-direction:column; border-top:1px solid var(--ink-faint); padding:8px 14px 12px; gap:6px; }
.biz-story{ display:flex; gap:10px; align-items:baseline; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink); text-decoration:none; }
.biz-story b{ flex:none; color:var(--accent); font-weight:600; }
.biz-story.fric b{ color:var(--strike); }
.biz-story:hover span{ color:var(--accent); }
.biz-note{ margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); line-height:1.6; }
@media (max-width:640px){ .biz-ct{ display:none; } }

/* ── the biz view: window toggle + leader detail card ── */
.biz-view{ animation:mktReveal .4s ease both; }
.biz-tf{ display:flex; gap:8px; margin:0 0 16px; }
.biz-rowbtn{ width:100%; font-family:var(--mono); }
.biz-detail{ margin-top:22px; }
.biz-card{ background:var(--plate, rgba(255,255,255,.015)); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); padding:20px 22px; animation:mktReveal .4s ease both; }
.biz-card-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.biz-card-h h3{ margin:0; font-size:20px; letter-spacing:.04em; color:var(--ink); }
.biz-card-stat{ font-family:var(--mono); font-size:12px; }
.biz-card-stat.up{ color:var(--accent); } .biz-card-stat.dn{ color:var(--strike); }
.biz-card-prof{ margin:10px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink); opacity:.9; }
.biz-card-secs{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; }
.biz-story-d{ flex:none; margin-left:auto; font-size:10px; color:var(--ink-faint); }

/* ── view hygiene: [hidden] must ALWAYS win — .pull-board.mkt{display:flex} was overriding
   the hidden attribute, bleeding the pull's verdict header above every other view ── */
#pull-board[hidden], #biz-view[hidden], #goal-view[hidden], #climb-view[hidden], #social-view[hidden], #frontier-view[hidden], #occupations-view[hidden], #home-view[hidden], #pull-day[hidden]{ display:none !important; }
/* the biz gets its signature hue like every other view (was falling back unpainted) */
#biz-view{ --sec-c:#f0a35e; }
.biz-view .sec-claim{ color:#eafff3; }

/* ── the biz: leader cards (v2 — the list was black-on-black and sloppy) ── */
.biz-rowbtn{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  background:var(--plate, rgba(255,255,255,.02)); border:1px solid var(--ink-faint); border-left:2px solid var(--lc, var(--accent-dim));
  padding:14px 18px; font-family:var(--mono); color:var(--ink);
  animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 45ms);
  transition:transform .18s var(--b-ease, ease), border-color .18s, box-shadow .18s; }
.biz-rowbtn:hover{ transform:translateY(-1px); border-color:var(--lc, var(--accent-dim)); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.biz-rowbtn.open{ border-color:var(--lc, var(--accent-dim)); background:color-mix(in srgb, var(--lc, #5ef0a8) 4%, transparent); }
.biz-rowbtn.fric{ border-left-color:var(--strike); }
.biz-rank{ flex:none; width:22px; font-size:11px; color:var(--ink-faint); letter-spacing:.1em; }
.biz-logo{ flex:none; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb, var(--lc, #5ef0a8) 45%, transparent); background:color-mix(in srgb, var(--lc, #5ef0a8) 8%, #0a0c0b); border-radius:8px; overflow:hidden; }
.biz-logo img{ width:26px; height:26px; object-fit:contain; }
.biz-logo b{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--lc, var(--accent)); letter-spacing:.05em; }
.biz-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.biz-nmrow{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.biz-name{ font-size:16px; font-weight:600; letter-spacing:.03em; color:#eafff3; }
.biz-ct{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-dim); }
.biz-sub{ font-size:11.5px; line-height:1.5; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60ch; }
.biz-stats{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.biz-pts{ font-size:14px; font-weight:600; }
.biz-days{ font-size:10.5px; letter-spacing:.06em; }
.biz-caret{ flex:none; color:var(--ink-faint); font-size:16px; transition:transform .2s; }
.biz-rowbtn.open .biz-caret{ transform:rotate(90deg); color:var(--lc, var(--accent)); }
.biz-card-h .biz-logo{ width:48px; height:48px; order:-1; }
@media (max-width:640px){ .biz-sub{ display:none; } .biz-rank{ display:none; } }

/* ── share studio card: loading state so a slow first render never looks broken ── */
.studio-cardwrap{ display:block; position:relative; min-height:180px; border:1px solid var(--ink-faint); background:#0a0c0b; }
.studio-cardwrap.loading{ background:linear-gradient(100deg,#0a0c0b 30%,rgba(94,240,168,.06) 50%,#0a0c0b 70%); background-size:200% 100%; animation:studioShimmer 1.3s ease-in-out infinite; }
@keyframes studioShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.studio-cardmsg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
.studio-card{ display:block; width:100%; height:auto; }

/* ═══════════ HIGH-END UPLIFT — depth, color, imagery (2026-07-14) ═══════════
   Kills the flat mono-green feel: multi-hue aurora ambient, gradient display
   type, glass plates, real-image cards. The phosphor identity stays the anchor. */

/* aurora ambient — three drifting hue fields behind everything, per-view tinted */
body::before{
  content:''; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 12%, rgba(94,240,168,.075) 0%, transparent 70%),
    radial-gradient(46% 42% at 84% 22%, rgba(122,162,255,.06) 0%, transparent 70%),
    radial-gradient(50% 46% at 55% 92%, rgba(192,139,240,.05) 0%, transparent 72%),
    radial-gradient(34% 30% at 8% 78%, rgba(54,214,231,.045) 0%, transparent 70%);
  animation:aurora 36s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2.5%,-2%,0) scale(1.06); }
  100%{ transform:translate3d(-2%,2.5%,0) scale(1.02); }
}
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }
#app{ position:relative; z-index:1; }

/* display type — gradient ink instead of flat white */
.sec-claim{
  background:linear-gradient(115deg, #f4fff9 30%, color-mix(in srgb, var(--sec-c) 62%, #eafff3) 78%, var(--sec-c) 105%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 0 22px color-mix(in srgb, var(--sec-c) 22%, transparent));
}
.mkt-verdict{ letter-spacing:.005em; }

/* glass plates — depth without noise */
.hz-card, .biz-rowbtn, .biz-card, .goal-detail-card, .cc-card, .led-sec, .studio-pane, .hv-route{
  background:linear-gradient(160deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 55%, rgba(0,0,0,.10) 100%);
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border-radius:10px;
}
.hz-card, .biz-rowbtn, .goal-detail-card, .led-sec{ box-shadow:0 10px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045); }
.hv-route:hover, .biz-rowbtn:hover, .hz-card:hover{ box-shadow:0 16px 44px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--sec-c, #5ef0a8) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.07); }

/* image-first news cards — real photography, treated */
.pcard-img{
  width:100%; aspect-ratio:16/8.4; object-fit:cover; border-radius:8px 8px 0 0;
  filter:saturate(1.05) contrast(1.03) brightness(.92);
  transition:transform .5s var(--b-ease, ease), filter .4s;
}
a:hover > .pcard-img, .pcard:hover .pcard-img{ transform:scale(1.035); filter:saturate(1.15) contrast(1.05) brightness(1); }
.pcard-thumb{ border-radius:8px 8px 0 0; }

/* leader rows: gradient rank + livelier logo tiles */
.biz-rank{ font-size:13px; font-weight:600;
  background:linear-gradient(180deg, color-mix(in srgb, var(--lc,#5ef0a8) 80%, #fff), color-mix(in srgb, var(--lc,#5ef0a8) 35%, transparent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.biz-logo{ box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* heat tiles + chips: let the sector hues actually sing */
.heat-tile{ border-radius:9px; }
.heat-tile.h-surge{ background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); }

/* within-reach cards: state-colored top edge */
.cc-card{ border-top:2px solid var(--accent-dim); }
.cc-card.crossed, .cc-card[data-state="crossed"]{ border-top-color:var(--accent); }

/* scrollbar + selection polish */
::selection{ background:rgba(94,240,168,.25); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(94,240,168,.16); border-radius:8px; border:2px solid #050606; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(94,240,168,.3); }

/* ── THE FEED — the pull as a fast-scanning chronological stream ── */
.led-feed{ display:flex; flex-direction:column; gap:8px; }
.feed-day{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); padding:16px 0 4px; border-bottom:1px dotted rgba(124,136,127,.3); }
.feed-row{ display:flex; gap:14px; align-items:stretch; text-decoration:none; color:var(--ink); padding:10px 12px; border:1px solid transparent; border-left:2px solid color-mix(in srgb, var(--fc,#5ef0a8) 55%, transparent); border-radius:8px;
  background:linear-gradient(160deg, rgba(255,255,255,.022), rgba(255,255,255,.004));
  animation:mktReveal .4s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 30ms);
  transition:border-color .18s, background .18s, transform .18s; }
.feed-row:hover{ border-color:color-mix(in srgb, var(--fc,#5ef0a8) 45%, transparent); background:color-mix(in srgb, var(--fc,#5ef0a8) 4%, transparent); transform:translateX(2px); }
.feed-row.fric{ border-left-color:var(--strike); }
.feed-thumb{ flex:none; width:118px; align-self:center; border-radius:6px; overflow:hidden; }
.feed-thumb .pcard-img, .feed-thumb .pcard-thumb{ width:118px; height:66px; object-fit:cover; border-radius:6px; display:block; }
.feed-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center; }
.feed-meta{ display:flex; align-items:baseline; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; flex-wrap:wrap; }
.feed-dot{ width:7px; height:7px; border-radius:99px; background:var(--fc,#5ef0a8); align-self:center; flex:none; }
.feed-meta b{ color:var(--fc,#5ef0a8); font-weight:600; letter-spacing:.14em; }
.feed-coming{ color:var(--warn); }
.feed-w.up{ color:var(--accent); } .feed-w.dn{ color:var(--strike); }
.feed-src{ color:var(--ink-faint); margin-left:auto; letter-spacing:.04em; }
.feed-h{ font-size:14.5px; font-weight:600; line-height:1.4; color:#eafff3; }
.feed-b{ font-size:12px; line-height:1.5; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px){ .feed-thumb{ width:84px; } .feed-thumb .pcard-img, .feed-thumb .pcard-thumb{ width:84px; height:56px; } .feed-src{ display:none; } .feed-b{ -webkit-line-clamp:1; } }

/* ── home pulse — the progress chart + pace, on the front door ── */
.home-pulse{ display:block; width:100%; text-align:left; cursor:pointer; margin-top:18px; padding:18px 20px 14px; border:1px solid var(--ink-faint); border-radius:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, transform .2s, box-shadow .2s; font-family:var(--mono); color:var(--ink); }
.home-pulse:hover{ border-color:var(--accent-dim); transform:translateY(-2px); box-shadow:0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(94,240,168,.2); }
.home-pulse-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.home-pulse-h span{ font-size:10px; letter-spacing:.22em; color:var(--ink-faint); }
.home-pulse-h b{ font-size:12px; letter-spacing:.08em; color:var(--accent); }
.home-chart{ width:100%; height:150px; display:block; margin:10px 0 4px; }
.home-pace{ display:flex; gap:26px; flex-wrap:wrap; padding-top:8px; border-top:1px solid rgba(124,136,127,.2); }
.hp-cell{ display:flex; flex-direction:column; gap:1px; }
.hp-cell b{ font-size:16px; color:#eafff3; font-weight:600; }
.hp-cell small{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.home-pulse-go{ margin-top:10px; font-size:11px; letter-spacing:.1em; color:var(--accent-dim); }
.home-pulse:hover .home-pulse-go{ color:var(--accent); }
@media (max-width:640px){ .home-pace{ gap:16px; } .hp-cell b{ font-size:14px; } }

/* ── home horizon — the milestone windows on the front door, condensed ── */
.home-hz{ margin-top:18px; padding:18px 20px; border:1px solid var(--ink-faint); border-radius:12px; cursor:pointer;
  background:linear-gradient(160deg, rgba(255,255,255,.025), rgba(0,0,0,.12));
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, transform .2s; }
.home-hz:hover{ border-color:var(--accent-dim); transform:translateY(-2px); }
.home-hz-h{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-family:var(--mono); }
.home-hz-h span{ font-size:10px; letter-spacing:.22em; color:var(--ink-faint); }
.home-hz-h small{ font-size:10.5px; letter-spacing:.04em; color:var(--ink-dim); }
.home-hz-cards{ pointer-events:none; }   /* the whole panel is the button */
.home-hz-cards .hz-path{ display:none; }             /* compact: roadmaps live in the full view */
.home-hz-cards .hz-ev{ -webkit-line-clamp:2; }
.home-hz-cards .hz-pull{ font-size:10.5px; }
@media (min-width:900px){ .home-hz-cards{ grid-template-columns:repeat(3, 1fr); } }

/* home stat cells stay opaque-dark — the glass treatment washed them out over the hairline grid */
.hv-stat{ background:linear-gradient(180deg, rgba(5,13,9,.97), rgba(5,13,9,.88)); }

/* ── feed social: pull + comment actions, comment panels, also-advances chips ── */
.feed-item{ display:flex; flex-direction:column; }
.feed-also{ color:var(--ink-faint); font-size:9.5px; letter-spacing:.06em; }
.feed-also::before{ content:'\21e2 '; color:var(--accent-dim); }
.feed-actions{ display:flex; gap:14px; margin-top:5px; }
.feed-act{ display:inline-flex; align-items:baseline; gap:5px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--mono); color:var(--ink-faint); font-size:13px; transition:color .15s, transform .15s; }
.feed-act:hover{ color:var(--accent); }
.feed-act.on{ color:var(--accent); text-shadow:var(--glow); }
.feed-act.nudge{ color:var(--warn); }
.feed-act small{ font-size:10.5px; letter-spacing:.06em; }
.fc-panel{ margin:2px 0 8px 132px; padding:10px 14px; border-left:2px solid var(--accent-dim); background:rgba(255,255,255,.015); border-radius:0 8px 8px 0; }
.fc-list{ display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.fc-item{ display:flex; gap:8px; align-items:baseline; font-family:var(--mono); font-size:12px; line-height:1.5; }
.fc-item b{ color:var(--accent); font-weight:600; flex:none; }
.fc-item.fresh{ animation:mktReveal .4s ease both; }
.fc-empty{ margin:0; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); font-style:italic; }
.fc-form{ display:flex; gap:8px; }
.fc-input{ flex:1; font-size:12.5px; }
@media (max-width:640px){ .fc-panel{ margin-left:0; } }

/* ── home carries 01/02/03 now — spacing + the moved sections breathe on the front door ── */
#home-view .mkt-index, #home-view .hz-board, #home-view .heat-board{ margin-top:26px; }
#home-view .hz-note{ margin-top:12px; }

/* ── the feed, v2 — social cards (media / meta / headline / actions), centered column ── */
.led-feed{ max-width:700px; margin:0 auto; width:100%; }
.fcard{ display:flex; flex-direction:column; margin-top:14px; border:1px solid var(--ink-faint); border-radius:14px; overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(0,0,0,.14));
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  border-top:2px solid color-mix(in srgb, var(--fc,#5ef0a8) 55%, transparent);
  animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 40ms); }
.fcard.fric{ border-top-color:var(--strike); }
.fcard-media{ display:block; }
.fcard-media .pcard-img{ width:100%; height:250px; object-fit:cover; border-radius:0; display:block; }
.fcard-media .pcard-thumb{ width:100%; height:120px; border-radius:0; display:block; }
.fcard-body{ padding:14px 18px 12px; display:flex; flex-direction:column; gap:7px; }
.fcard-h{ font-size:16.5px; font-weight:600; line-height:1.4; color:#eafff3; text-decoration:none; }
.fcard-h:hover{ color:var(--accent); }
.fcard-b{ margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-dim); }
.fcard-actions{ display:flex; align-items:center; gap:20px; padding-top:10px; margin-top:4px; border-top:1px solid rgba(124,136,127,.2); }
.fcard-act{ display:inline-flex; align-items:baseline; gap:6px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--mono); color:var(--ink-dim); transition:color .15s; }
.fcard-act .fa-g{ font-size:15px; }
.fcard-act .fa-l{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.fcard-act .fa-c{ font-size:11px; color:var(--accent); }
.fcard-act:hover{ color:var(--accent); }
.fcard-act.on{ color:var(--accent); text-shadow:var(--glow); }
.fcard-stats{ margin-left:auto; display:inline-flex; gap:10px; align-items:baseline; font-family:var(--mono); }
.fcard-stats b{ font-size:12.5px; } .fcard-stats b.up{ color:var(--accent); } .fcard-stats b.dn{ color:var(--strike); }
.fcard-stats span{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); }
.fcard .fc-panel{ margin:0; border-left:0; border-top:1px solid rgba(124,136,127,.2); border-radius:0; padding:12px 18px; }
.feed-day{ max-width:700px; margin:0 auto; width:100%; padding-top:22px; }
@media (max-width:640px){ .fcard-media .pcard-img{ height:190px; } .fcard-actions{ gap:14px; } .fcard-stats span{ display:none; } }

/* ░░░ THE FRONTIER — foresight cards ░░░ */
.frontier-view{ max-width:1180px; margin:0 auto; }
.fr-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:var(--s4); margin-top:var(--s4); }
.fr-card{ position:relative; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5) var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-top:2px solid var(--fc,#a78bfa); box-shadow:var(--edge-hi); overflow:hidden; animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*45ms); transition:transform .22s var(--b-ease), box-shadow .22s, border-color .22s; }
.fr-card::before{ content:''; position:absolute; top:0; right:0; width:52%; height:56%; background:radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--fc) 12%, transparent), transparent 62%); pointer-events:none; }
.fr-card > *{ position:relative; z-index:1; }
.fr-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--fc) 40%, var(--ink-faint)); box-shadow:var(--edge-hi), 0 16px 40px -20px var(--fc); }
/* concept-diagram hero — full-bleed to the card's inner top edge; caveat is baked into the image pixels */
.fr-media{ margin:calc(var(--s4)*-1) calc(var(--s5)*-1) var(--s1); aspect-ratio:16/8.4; overflow:hidden; background:#050606; border-bottom:1px solid color-mix(in srgb, var(--fc) 24%, var(--ink-faint)); }
.fr-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.03) contrast(1.02) brightness(.9); transition:transform .5s var(--b-ease, ease), filter .4s; }
.fr-card.has-media:hover .fr-media img{ transform:scale(1.035); filter:saturate(1.12) contrast(1.04) brightness(1); }
@media (prefers-reduced-motion:reduce){ .fr-media img{ transition:none; } .fr-card.has-media:hover .fr-media img{ transform:none; } }
.fr-pill{ align-self:flex-start; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid; }
.fr-measured .fr-pill{ color:#5ef0a8; border-color:color-mix(in srgb,#5ef0a8 42%,transparent); background:color-mix(in srgb,#5ef0a8 10%,transparent); }
.fr-emerging .fr-pill{ color:#f4c95d; border-color:color-mix(in srgb,#f4c95d 42%,transparent); background:color-mix(in srgb,#f4c95d 10%,transparent); }
.fr-spec .fr-pill{ color:#c08bf0; border-color:color-mix(in srgb,#c08bf0 42%,transparent); background:color-mix(in srgb,#c08bf0 10%,transparent); }
.fr-physics .fr-pill{ color:#e8674e; border-color:color-mix(in srgb,#e8674e 48%,transparent); background:color-mix(in srgb,#e8674e 12%,transparent); }
.fr-cap{ font-family:var(--disp); font-size:var(--t-cardh); font-weight:600; line-height:1.25; color:#eafff3; margin:var(--s1) 0 0; }
.fr-mech{ font-size:var(--t-body); line-height:1.5; color:var(--ink-dim); margin:0; }
.fr-wall{ font-size:var(--t-body); line-height:1.5; color:#ffd9cf; background:color-mix(in srgb,#e8674e 12%,transparent); border-left:2px solid #e8674e; padding:var(--s2) var(--s3); margin:var(--s1) 0 0; border-radius:0 6px 6px 0; }
.fr-wall-k{ display:block; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:#e8674e; margin-bottom:2px; }
.fr-row{ display:flex; flex-direction:column; gap:2px; margin-top:var(--s1); }
.fr-row p{ margin:0; font-size:var(--t-body); line-height:1.5; color:var(--ink); }
.fr-k{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.fr-need{ background:color-mix(in srgb, var(--fc) 8%, transparent); border-radius:6px; padding:var(--s2) var(--s3); margin:var(--s2) calc(-1 * var(--s3)) var(--s1); }
.fr-need .fr-k{ color:var(--fc); }
.fr-note{ font-size:var(--t-cap); line-height:1.45; color:var(--ink-faint); font-style:italic; margin:var(--s2) 0 0; border-top:1px dashed color-mix(in srgb,var(--ink-faint) 70%,transparent); padding-top:var(--s2); }
.fr-foot{ display:flex; flex-direction:column; gap:7px; margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid color-mix(in srgb,var(--ink-faint) 55%,transparent); }
.fr-flip{ font-family:var(--mono); font-size:var(--t-cap); line-height:1.4; color:var(--ink-dim); }
.fr-secs{ display:flex; flex-wrap:wrap; gap:5px; }
.fr-sec{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px; color:var(--sc,#a78bfa); border:1px solid color-mix(in srgb, var(--sc,#a78bfa) 34%, transparent); }
.fr-physics{ border-top-width:3px; }
.fr-physics::after{ content:'⊘'; position:absolute; top:12px; right:13px; font-size:20px; line-height:1; color:color-mix(in srgb,#e8674e 42%,transparent); z-index:1; }
.fr-legend-note{ font-family:var(--mono); font-size:var(--t-cap); line-height:1.55; color:var(--ink-faint); margin:var(--s6) 0 0; max-width:82ch; }
@media (prefers-reduced-motion:reduce){ .fr-card{ animation:none !important; } .fr-card:hover{ transform:none; } }
@media (max-width:640px){ .fr-cards{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   DEEP-SPACE THEME v2 — de-green base + per-section instrument backdrops (2026-07)
   Appended last so it overrides earlier tokens by cascade order. All additive.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070b14;                 /* deep-space blue-black, was #050606 (green-black) */
  --bg-soft:#0c1220;
  --ink-faint:#6c7789;          /* cool blue-gray borders, was green-gray #7c887f */
  --plate:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,0) 42%), rgba(11,17,30,.52);
  --ghost:rgba(120,140,180,.05);
  --bg-well:radial-gradient(120% 90% at 50% -8%, color-mix(in srgb, var(--sec-c) 9%, transparent), transparent 60%);
}
/* fixed deep-space starfield behind everything, with a soft cool vignette on top */
body{
  background:
    radial-gradient(125% 120% at 50% -12%, rgba(22,32,56,.55) 0%, transparent 52%),
    url("assets/space/starfield.webp") center top / cover no-repeat fixed,
    #060910;
}

/* per-section instrument backdrop — dim orbital rings bleed from the top-right of each view,
   flipped so the rings sit clear of the left-aligned section title; fades out downward */
#home-view, #pull-board, #climb-view, #goal-view, #social-view, #frontier-view, #biz-view{ position:relative; isolation:isolate; }
#home-view::before, #pull-board::before, #climb-view::before, #goal-view::before,
#social-view::before, #frontier-view::before, #biz-view::before{
  content:''; position:absolute; top:0; left:0; right:0; height:min(44vh,340px);
  background:var(--sec-hero) left top / cover no-repeat;
  transform:scaleX(-1); transform-origin:center; opacity:.42; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}
#home-view, #pull-board{ --sec-hero:url("assets/space/hero-mint.webp"); }
#climb-view{ --sec-hero:url("assets/space/hero-amber.webp"); }
#goal-view, #frontier-view{ --sec-hero:url("assets/space/hero-violet.webp"); }
#social-view{ --sec-hero:url("assets/space/hero-cyan.webp"); }
#biz-view{ --sec-hero:url("assets/space/hero-orange.webp"); }

/* ── The Snap — log↔linear "real scale" reveal (climb view) ── */
.snap{ margin:0 0 var(--s8); }
.snap-eyebrow{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; }
.snap-eyebrow::before{ content:''; width:18px; height:1px; background:var(--accent); box-shadow:0 0 7px var(--accent); }
.snap-title{ font-family:var(--disp); font-size:clamp(21px,3vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin:10px 0 6px; color:#eef4ef; }
.snap-title .hl{ color:var(--accent); }
.snap-sub{ color:var(--ink-dim); font-size:var(--t-body); line-height:1.55; max-width:66ch; margin:0 0 var(--s5); }
.snap-stage{ position:relative; border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:var(--plate); box-shadow:var(--edge-hi); padding:20px 20px 14px; }
.snap-stage canvas{ display:block; width:100%; height:380px; }
@media (max-width:640px){ .snap-stage canvas{ height:300px; } }
.snap-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap; }
.snap-toggle{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#04130b; background:var(--accent); border:none; border-radius:2px; padding:11px 18px; cursor:pointer; font-weight:600; box-shadow:0 0 18px rgba(94,240,168,.32); transition:background .2s, color .2s, box-shadow .2s; }
.snap-toggle.on{ background:none; color:var(--accent); border:1px solid var(--accent-dim); box-shadow:none; }
.snap-scalelab{ font-size:12px; color:var(--ink-dim); letter-spacing:.05em; }
.snap-scalelab b{ color:var(--ink); }
.snap-foot{ display:flex; justify-content:space-between; gap:16px; margin-top:14px; font-size:12px; line-height:1.5; color:var(--ink-faint); flex-wrap:wrap; }
.snap-counter{ color:#e8674e; max-width:64ch; }
.snap-src{ color:var(--ink-faint); }

/* ── two-column feed — halve the scroll; day dividers span both columns (wide screens only) ── */
@media (min-width:820px){
  .led-feed{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; align-items:start; max-width:1060px; }
  .led-feed .feed-day{ grid-column:1 / -1; }
  .led-feed .feed-day:not(:first-child){ margin-top:6px; }
}

/* ── The Canyon — multi-curve fold-improvement chart + 3D hero (climb view) ── */
.canyon{ position:relative; margin:var(--s8) 0; isolation:isolate; }
.canyon-hero{ position:absolute; top:0; left:0; right:0; height:min(38vh,300px); z-index:-1;
  background:url("assets/space/acceleration-hero.webp") center top / cover no-repeat; opacity:.5; }
.canyon-hero-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,11,20,.35) 0%, rgba(7,11,20,.72) 62%, var(--bg) 100%); }
.canyon-lead{ padding-top:var(--s4); }
.canyon-stage{ position:relative; border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:var(--plate); box-shadow:var(--edge-hi); padding:18px 18px 12px; margin-top:var(--s3); }
.canyon-stage canvas{ display:block; width:100%; height:460px; }
@media (max-width:640px){ .canyon-stage canvas{ height:360px; } }
.cv-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:var(--s4); font-size:11.5px; }
.cv-leg{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-family:var(--mono); }
.cv-swatch{ width:16px; height:3px; border-radius:2px; display:inline-block; }
.cv-moments{ display:grid; grid-template-columns:1fr 1fr; gap:7px 24px; margin-top:var(--s4); font-size:12px; color:var(--ink-dim); }
.cv-moment{ display:flex; gap:9px; align-items:flex-start; }
.cv-mn{ flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--accent-dim); color:var(--accent); font-family:var(--mono); font-size:10px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.cv-moment b{ color:var(--ink); }
@media (max-width:640px){ .cv-moments{ grid-template-columns:1fr; } }

/* ── The Conductor — controls, speed gutter, detail readout ─────────────── */
.cv-controls{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:var(--s3) 0 0; font-family:var(--mono); }
.cv-seg{ display:inline-flex; border:1px solid var(--ink-faint); border-radius:0; overflow:hidden; }
.cv-opt{ padding:6px 10px; font-size:11px; font-family:var(--mono); color:var(--ink-dim); background:rgba(0,0,0,.28); border:none; border-right:1px solid var(--ink-faint); cursor:pointer; }
.cv-opt:last-child{ border-right:none; }
.cv-opt.on{ background:rgba(94,240,168,.16); color:var(--accent); text-shadow:var(--glow); }
.cv-tgl{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-dim); padding:6px 9px; border:1px solid var(--ink-faint); background:rgba(0,0,0,.28); cursor:pointer; user-select:none; }
.cv-tgl input{ accent-color:var(--accent); margin:0; }
.cv-btn{ color:var(--ink-faint); }
.conductor-lower{ display:grid; grid-template-columns:1fr minmax(260px,320px); gap:var(--s4); margin-top:var(--s4); align-items:start; }
@media (max-width:820px){ .conductor-lower{ grid-template-columns:1fr; } }
.cv-gutter-wrap{ border:1px solid var(--ink-faint); border-top:2px solid var(--accent-dim); background:var(--plate); box-shadow:var(--edge-hi); padding:12px 14px; }
.cv-gutter-h{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.cv-gutter-wrap canvas{ display:block; width:100%; height:150px; }
.cv-gutter-cap{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); line-height:1.5; margin:8px 0 0; }
.cv-detail{ border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:var(--plate); box-shadow:var(--edge-hi); padding:14px; min-height:150px; }
.cvd-empty{ font-size:12px; color:var(--ink-faint); line-height:1.5; }
.cvd-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.cvd-dot{ width:13px; height:13px; border-radius:50%; flex:none; }
.cvd-name{ font-size:14.5px; color:#eafff3; font-weight:600; line-height:1.1; }
.cvd-dom{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.03em; margin-top:2px; }
.cvd-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.cvd-tag{ font-family:var(--mono); font-size:9.5px; padding:3px 7px; border:1px solid var(--ink-faint); color:var(--ink-dim); }
.cvd-tag.cvd-basis{ border-style:dashed; }
.cvd-read{ font-size:12px; line-height:1.5; color:var(--ink-dim); margin:8px 0; }
.cvd-read b{ color:#eafff3; }
.cvd-conf{ margin:9px 0 3px; }
.cvd-lab{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:3px; }
.cvd-bar{ height:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.cvd-bar > i{ display:block; height:100%; }
.cvd-fals{ margin-top:11px; padding:9px 10px; background:rgba(240,102,63,.08); border:1px solid rgba(240,102,63,.24); }
.cvd-fk{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#f0885a; margin-bottom:4px; }
.cvd-fv{ font-size:11.5px; line-height:1.45; color:var(--ink); }
.cv-leg.sel{ text-shadow:var(--glow); }
.cv-leg.sel .cv-swatch{ outline:2px solid var(--accent); outline-offset:1px; }

/* ── The Atlas — 3D living constellations (WebGL) ── */
.atlas-stage{ position:relative; width:100%; height:min(68vh,620px); min-height:420px; margin-top:var(--s4);
  border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:radial-gradient(120% 90% at 50% 30%, rgba(94,240,168,.04), transparent 60%), #060910; box-shadow:var(--edge-hi); overflow:hidden; }
.atlas-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.atlas-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.atlas-label{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:2px; white-space:nowrap; transition:opacity .3s; will-change:transform; }
.atlas-label .al-name{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-shadow:0 0 8px rgba(7,11,20,.95), 0 0 3px rgba(7,11,20,.95); }
.atlas-label .al-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:#aab8cc; text-shadow:0 0 8px rgba(7,11,20,.95); }
.atlas-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink-dim); }
.atlas-legend{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:var(--s4); font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); }
.atlas-legend .al-k{ letter-spacing:.04em; }
@media (max-width:640px){ .atlas-stage{ height:56vh; min-height:340px; } .atlas-label .al-meta{ display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMA PASS — 2026-07-17
   The high-end layer: a real display face (Space Grotesk) carrying headlines
   and hero numerals while IBM Plex Mono keeps the data/chrome voice; a door
   worthy of the boot; filled CTAs; refined chrome, radii and light. Appended
   last — cascade wins. Motion is RM-gated; no JS-emitted class is renamed.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --disp:'Space Grotesk','IBM Plex Mono',ui-monospace,monospace;
  --ink-hi:#f2fbf6;
  --ink-mid:#9fb0a5;
  --hair:rgba(154,176,163,.16);
  --hair-hi:rgba(154,176,163,.30);
  --fill:linear-gradient(180deg,#7df5b7,#43d389);
  --fill-hi:linear-gradient(180deg,#95ffc9,#52e29a);
  --cta-ink:#04130b;
  --ring:0 0 0 3px rgba(94,240,168,.16);
}

/* ── 1 · the display face: headlines + hero numerals ── */
.stage h2.prompt, .snap-title, .dash-brand, .goal-title, .gd-title,
.led-stream-label, .cc-title, .mkt-detail-name, .countdown,
.pcard-h, .feed-h, .fcard-h, .hz-name, .cc-goal, .biz-name, .hv-r-k{
  font-family:var(--disp);
}
.stage h2.prompt{
  font-weight:600; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(32px,5.6vw,58px);
  color:var(--ink-hi); text-shadow:0 0 30px rgba(94,240,168,.22);
}
.stage .sub{ color:var(--ink-mid); }
.sec-claim, .snap-title{ letter-spacing:-.02em; }
.home-view .sec-claim{ font-size:clamp(34px,5.6vw,56px); }
.mkt-index-val, .hv-stat-v, .pace-cell b, .climb-card-big, .gm-num,
.tug-ends b, .gs-item b, .stat-n, .goal-cat-idx, .hz-window, .countdown{
  font-family:var(--disp); font-variant-numeric:tabular-nums slashed-zero;
}
.mkt-index-val{ font-weight:600; letter-spacing:-.03em; }
.hv-stat-v, .pace-cell b, .climb-card-big, .gm-num, .tug-ends b, .gs-item b,
.stat-n, .goal-cat-idx{ font-weight:300; letter-spacing:-.02em; }
.hz-window{ font-weight:600; }

/* living headline ink — a slow hue drift across the gradient claims */
@media (prefers-reduced-motion:no-preference){
  .sec-claim{ background-size:220% 100%; animation:claimDrift 16s ease-in-out infinite alternate; }
  @keyframes claimDrift{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
}

/* ── 2 · buttons: one obvious primary, calm ghosts ── */
.btn:not(.ghost), .enter-btn{
  border:1px solid transparent; border-radius:8px;
  background:var(--fill); color:var(--cta-ink);
  font-weight:600; letter-spacing:.08em; text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -12px rgba(94,240,168,.45);
  transition:transform .16s var(--b-ease), box-shadow .25s var(--b-ease), background .2s, opacity .2s;
}
.btn:not(.ghost):hover, .enter-btn:hover{
  background:var(--fill-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 38px -12px rgba(94,240,168,.62);
  transform:translateY(-1px);
}
.btn:not(.ghost):active, .enter-btn:active{ transform:translateY(0); }
.btn:not(.ghost):disabled{ opacity:.4; background:var(--fill); box-shadow:none; }
.btn.ghost{
  border:1px solid var(--hair-hi); border-radius:8px;
  color:var(--ink-mid); background:rgba(255,255,255,.015);
}
.btn.ghost:hover{ color:var(--ink-hi); border-color:rgba(154,176,163,.5); background:rgba(255,255,255,.045); box-shadow:none; }

/* sort/filter chips read as pills */
.led-sort{ flex-wrap:wrap; row-gap:8px; }
.led-sort-btn{ border-radius:999px; padding:4px 13px; white-space:nowrap; }

/* ── 3 · inputs ── */
.field-input{
  border-radius:8px; border:1px solid var(--hair-hi);
  background:rgba(255,255,255,.03); padding:13px 15px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field-input:focus{ border-color:var(--accent-dim); box-shadow:var(--ring); background:rgba(94,240,168,.04); }

/* keyboard wayfinding gets a visible ring */
:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

/* ── 4 · the boot — a held breath before the door ── */
#s-boot::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 38% at 50% 42%, rgba(94,240,168,.075), transparent 70%);
}
#s-boot .boot-inner{ position:relative; }
.boot-log{ font-size:15px; letter-spacing:.015em; }
.boot-log .you{ color:#d7e6dc; }
.boot-bar{ text-shadow:0 0 8px rgba(94,240,168,.5); }
#s-boot .enter-btn{ font-size:16px; padding:15px 34px; letter-spacing:.14em; border-radius:10px; }
@media (prefers-reduced-motion:no-preference){
  .enter-btn{ animation:fadeUp .6s ease both, ctaPulse 2.8s ease-in-out .7s infinite; }
  @keyframes ctaPulse{
    0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -12px rgba(94,240,168,.45); }
    50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 44px -10px rgba(94,240,168,.78); }
  }
}

/* ── 5 · the door — centered, cinematic, one way in ── */
#s-auth .stage, #s-login .stage{ text-align:center; max-width:560px; }
#s-auth .step-tag, #s-login .step-tag{ justify-content:center; }
#s-auth .stage::before{
  content:'◍'; display:block; font-size:44px; line-height:1; margin-bottom:20px;
  color:var(--accent); text-shadow:0 0 10px rgba(94,240,168,.6), 0 0 40px rgba(94,240,168,.28);
}
#s-auth h2.prompt, #s-login h2.prompt{ font-size:clamp(40px,7vw,66px); }
#s-auth .sub, #s-login .sub{ margin-left:auto; margin-right:auto; }
#s-auth .keyform, #s-login .keyform{ margin:30px auto 0; }
#s-auth .field, #s-login .field{ text-align:left; }
#s-auth .btn-row, #s-login .btn-row{ flex-direction:column; align-items:stretch; gap:11px; margin-top:20px; }
#auth-submit, #key-submit{ width:100%; padding:15px 24px; font-size:15px; }
#auth-toggle, #auth-forgot{
  border:0; background:none; padding:5px 0; box-shadow:none;
  color:var(--ink-faint); font-size:12.5px; letter-spacing:.06em; text-shadow:none;
}
#auth-toggle:hover, #auth-forgot:hover{
  color:var(--accent); background:none; box-shadow:none;
  text-decoration:underline; text-underline-offset:3px;
}
@media (prefers-reduced-motion:no-preference){
  #s-auth .stage::before{ animation:keyPulse 3.8s ease-in-out infinite; }
  @keyframes keyPulse{
    0%,100%{ opacity:.82; text-shadow:0 0 8px rgba(94,240,168,.5), 0 0 30px rgba(94,240,168,.22); }
    50%{ opacity:1; text-shadow:0 0 14px rgba(94,240,168,.85), 0 0 52px rgba(94,240,168,.4); }
  }
}

/* ── 6 · the seal — the countdown as a hero numeral ── */
.countdown{
  font-weight:300; font-size:clamp(46px,10vw,84px); letter-spacing:.01em;
  color:var(--ink-hi); text-shadow:0 0 34px rgba(94,240,168,.25);
}
.seal-ring{ box-shadow:0 0 0 1px rgba(94,240,168,.06), 0 0 48px -8px rgba(94,240,168,.3); }
.seal-glyph{ font-size:38px; }

/* ── 7 · questions — confident tap targets ── */
.qbtn{
  border-radius:12px; border:1px solid var(--hair-hi);
  font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:.18em; padding:24px;
  transition:border-color .2s, color .2s, background .2s, transform .12s, box-shadow .25s;
}
.qbtn:hover{
  border-color:var(--accent-dim); color:var(--accent); background:rgba(94,240,168,.05);
  box-shadow:0 12px 32px -14px rgba(94,240,168,.4); transform:translateY(-2px);
}

/* ── 8 · dashboard chrome ── */
.pull-hud{ padding:18px clamp(16px,3.4vw,46px) 16px; }
/* chrome never shrinks: the scrolling views absorb overflow, so the menu bar
   can never be squeezed into a sliver by a tall view (was collapsing to 8px) */
.pull-top, .thesis-rail, .pull-nav{ flex:0 0 auto; }
.dash-brand{ font-weight:700; font-size:17px; letter-spacing:.22em; color:var(--ink-hi); text-shadow:none; }
.thesis-rail{
  border-radius:10px; border-color:var(--hair);
  background:linear-gradient(90deg, rgba(94,240,168,.07), rgba(6,10,9,.34) 64%);
  box-shadow:var(--edge-hi);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pull-nav{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; border-bottom-color:var(--hair); }
.pull-nav::-webkit-scrollbar{ display:none; }
.nav-btn{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); padding:11px 13px 11px 21px; white-space:nowrap; }
.nav-btn::before{ left:8px; }
.nav-btn:hover{ color:var(--ink-hi); }

/* dashboard entrance — the hud assembles top-down on arrival */
@media (prefers-reduced-motion:no-preference){
  .screen.dash.active .pull-top{ animation:bsRise .5s var(--b-ease) both; }
  .screen.dash.active .thesis-rail{ animation:bsRise .5s var(--b-ease) both .07s; }
  .screen.dash.active .pull-nav{ animation:bsRise .5s var(--b-ease) both .14s; }
}

/* per-section hero backdrops — present, not apologetic */
#home-view::before, #pull-board::before, #climb-view::before, #goal-view::before,
#social-view::before, #frontier-view::before, #biz-view::before{ opacity:.55; }

/* richer ambient color field */
body::before{
  background:
    radial-gradient(42% 38% at 18% 12%, rgba(94,240,168,.10) 0%, transparent 70%),
    radial-gradient(46% 42% at 84% 22%, rgba(122,162,255,.085) 0%, transparent 70%),
    radial-gradient(50% 46% at 55% 92%, rgba(192,139,240,.075) 0%, transparent 72%),
    radial-gradient(34% 30% at 8% 78%, rgba(54,214,231,.06) 0%, transparent 70%);
}

/* ── 9 · radii: panels 16, cards 12 — one family ── */
.mkt-index, .goal-meter, .goal-detail-pane, .pull-mid, .snap-stage, .canyon-stage,
.mkt-day, .mkt-detail, .home-pulse, .home-hz, .goal-detail-card, .pull-day, .ac-box,
.atlas-stage{ border-radius:16px; }
.hz-card, .cc-card, .fr-card, .hv-route, .biz-rowbtn, .biz-card, .led-sec{ border-radius:12px; }
.fcard{ border-radius:16px; }
.heat-tile{ border-radius:12px; }
.hv-stats, .pace-strip{ border-radius:14px; overflow:hidden; }
.pcard{ border-radius:10px; }
.pcard-media{ border-radius:9px 9px 0 0; }
/* blueprint corner-ticks fight rounded corners — retire them on the rounded panes */
.pull-mid::before, .pull-mid::after, .goal-detail-pane::before, .goal-detail-pane::after{ content:none; }

/* ── 10 · games + world frames ── */
.lights-cell{ border-radius:10px; }
.maze{ border-radius:10px; box-shadow:inset 0 0 30px rgba(0,0,0,.5), 0 18px 50px -20px rgba(0,0,0,.8); }
.room-canvas{ border-radius:6px; box-shadow:0 0 0 1px rgba(94,240,168,.12), 0 24px 70px -18px rgba(0,0,0,.85); }

/* ── 11 · admin + gallery — same family ── */
.admin-drop{ border-radius:10px; }
.stat{ border-radius:8px; }
.admin-card{ border-radius:10px; }
.gal-item{ border-radius:10px; overflow:hidden; }
@media (prefers-reduced-motion:no-preference){
  .gal-item img{ transition:transform .5s var(--b-ease); }
  .gal-item:hover img{ transform:scale(1.03); }
}

/* ── 12 · the open line — log rows are terminal lines, not boxes
   (cliLog emits class "line cli"; .cli is also the old document CLI box —
   every transmission was inheriting the box's border/padding/7vh margin) ── */
.pull-log .line.cli{
  border:0; background:none; padding:0; margin:0; border-radius:0;
  font-size:12.5px; color:var(--accent-dim);
}

/* ── 13 · the skyline — 3D towers of the 11 needs (home) ── */
.sky-board{ margin-top:var(--s6, 34px); }
.sky-stage{
  position:relative; width:100%; height:min(54vh,470px); min-height:360px; margin-top:var(--s4);
  border-radius:16px; overflow:hidden; border:1px solid rgba(94,240,168,.14);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(94,240,168,.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(7,11,20,.4) 0%, rgba(7,11,20,.85) 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.35);
  cursor:grab;
}
.sky-stage:active{ cursor:grabbing; }
.sky-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sky-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.sky-label{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:1px; white-space:nowrap; transition:opacity .3s; will-change:transform; }
.sky-label .sl-name{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-shadow:0 0 8px rgba(7,11,20,.95), 0 0 3px rgba(7,11,20,.95); }
.sky-label .sl-meta{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:#aab8cc; text-shadow:0 0 8px rgba(7,11,20,.95); }
.sky-label.on .sl-name{ text-shadow:0 0 12px currentColor, 0 0 8px rgba(7,11,20,.95); }
.sky-label.on .sl-meta{ color:#e6f2ff; }
.sky-readout{
  position:absolute; left:12px; bottom:12px; z-index:3; max-width:min(86%,560px);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim);
  background:rgba(8,12,18,.72); border:1px solid rgba(94,240,168,.16); border-radius:9px;
  padding:7px 11px; backdrop-filter:blur(6px); pointer-events:none;
}
.sky-readout b{ font-weight:600; }
.sky-readout .sr-dim{ color:var(--ink-dim); opacity:.85; }
.sky-fallback{
  margin-top:var(--s4); border-radius:16px; border:1px solid rgba(94,240,168,.14);
  background:linear-gradient(180deg, rgba(7,11,20,.5), rgba(7,11,20,.85));
  padding:22px 18px 16px; display:flex; align-items:flex-end; gap:6px; min-height:200px;
}
.sky-fallback .sf-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-end; min-width:0; }
.sky-fallback .sf-fill{ width:100%; border-radius:5px 5px 2px 2px; box-shadow:0 0 14px -2px currentColor; }
.sky-fallback .sf-name{ font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); writing-mode:vertical-rl; transform:rotate(180deg); max-height:64px; overflow:hidden; }
@media (max-width:640px){
  .sky-stage{ height:48vh; min-height:320px; }
  .sky-readout{ font-size:10px; left:8px; bottom:8px; padding:6px 9px; }
  .sky-label .sl-name{ font-size:8.5px; letter-spacing:.08em; }
  .sky-label .sl-meta{ font-size:8px; }
}

/* ── 14 · elevation: one italic-serif accent word + sections that power up on scroll ── */
.sec-claim .hl, .snap-title .hl{
  font-family:'Instrument Serif', Georgia, serif; font-style:italic;
  font-weight:400; font-size:1.06em; letter-spacing:-.01em;
}
.home-view > .sec-head .sec-claim{ font-size:clamp(38px,6.2vw,64px); line-height:1.05; }
.sec-claim{ line-height:1.08; }
@media (prefers-reduced-motion:no-preference){
  .rv{ opacity:0; translate:0 26px; filter:blur(6px);
    transition:opacity .9s var(--b-ease), translate .9s var(--b-ease), filter .9s var(--b-ease); }
  .rv.in{ opacity:1; translate:0 0; filter:none; }
}


/* ═══ occupations page (appended 2026-07-20) ═══ */
/* ── The Workforce (occupations) instrument ─────────────────────────────── */
#occ-root{ --occ:var(--sec-c,#5e9bf0); --ink-dim:#9aa79f; display:block; max-width:1180px; margin:0 auto; font-family:var(--sans, -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif); color:var(--ink,#e7edf4); }
#occ-root b{ color:#eef4fb; font-weight:600; }
.occ-head{ margin-bottom:var(--s5,22px); }
.occ-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--occ); }
.occ-title{ font-size:clamp(24px,4vw,40px); line-height:1.03; letter-spacing:-.02em; margin:.3em 0 .25em; text-wrap:balance; }
.occ-dek{ max-width:72ch; font-size:15px; line-height:1.55; color:var(--ink-dim,#9fb0c4); margin:0 0 12px; }
.occ-legend{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.occ-legend-lbl{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-right:2px; }
.occ-basis{ font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; padding:2px 7px; border-radius:5px; color:var(--bc); border:1px solid color-mix(in srgb, var(--bc) 45%, transparent); background:color-mix(in srgb, var(--bc) 10%, transparent); white-space:nowrap; }
.occ-stale{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; color:var(--ink-faint,#66768c); }
.occ-dot{ width:7px; height:7px; border-radius:50%; background:#5ef0a8; box-shadow:0 0 8px #5ef0a8; }

.occ-block{ margin:26px 0; }
.occ-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid rgba(120,140,170,.16); }
.occ-panel{ background:var(--plate, rgba(18,26,40,.55)); border:1px solid rgba(120,140,170,.16); border-radius:14px; padding:18px 20px; }
.occ-panel .occ-kicker{ margin-top:0; }
.occ-note{ font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--ink-faint); margin:14px 0 0; }
.occ-lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-right:5px; }

/* three margins */
.occ-margins{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:800px){ .occ-margins{ grid-template-columns:1fr; } }
.occ-margin{ border:1px solid rgba(120,140,170,.16); border-radius:12px; padding:14px; background:rgba(10,16,26,.4); border-top:2px solid #8b96a6; }
.occ-margin.sig-on{ border-top-color:#ffb454; background:rgba(255,180,84,.05); }
.occ-margin-h{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.occ-sig{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; padding:3px 8px; border-radius:5px; background:rgba(139,150,166,.18); color:#c3ccd8; }
.sig-on .occ-sig{ background:rgba(255,180,84,.2); color:#ffb454; }
.occ-margin-lab{ font-size:13px; font-weight:600; color:#eef4fb; }
.occ-margin-find{ font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0 0 9px; }
.occ-margin-meta{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.occ-src{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.occ-caveat{ font-size:11.5px; line-height:1.45; color:var(--ink-faint); margin:0; font-style:italic; }

/* occupation cards */
.occ-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:800px){ .occ-grid{ grid-template-columns:1fr; } }
.occ-card{ border:1px solid rgba(120,140,170,.16); border-radius:14px; padding:16px; background:var(--plate,rgba(18,26,40,.55)); box-shadow:var(--edge-hi, inset 0 1px 0 rgba(255,255,255,.04)); }
.occ-card-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.occ-name{ font-size:16px; margin:0; color:#eef4fb; }
.occ-soc{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.occ-tier{ font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; padding:3px 8px; border-radius:6px; white-space:nowrap; color:var(--tc); border:1px solid color-mix(in srgb, var(--tc) 45%, transparent); background:color-mix(in srgb, var(--tc) 10%, transparent); }
.occ-headline{ font-size:12.5px; line-height:1.5; color:var(--ink-dim); margin:0 0 12px; }
.occ-metrics{ display:flex; flex-direction:column; gap:9px; margin-bottom:12px; }
.occ-metric{ border-left:2px solid rgba(120,140,170,.22); padding-left:10px; }
.occ-metric-h{ display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.occ-metric-k{ font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--ink-faint); text-transform:uppercase; }
.occ-metric-v{ font-size:12.5px; line-height:1.45; color:#dce4ee; }
.occ-split{ margin-top:6px; }
.occ-split-track{ display:flex; align-items:center; height:8px; }
.occ-split-neg{ height:8px; background:#f0663f; border-radius:3px 0 0 3px; margin-left:auto; }
.occ-split-zero{ width:2px; height:14px; background:rgba(255,255,255,.5); flex:none; }
.occ-split-pos{ height:8px; background:#5ef0a8; border-radius:0 3px 3px 0; }
.occ-split-labs{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; margin-top:3px; }
.occ-confounds{ font-size:11px; margin-bottom:10px; line-height:1.8; }
.occ-conf{ font-family:var(--mono); font-size:10px; color:var(--ink-dim); background:rgba(120,140,170,.12); padding:2px 7px; border-radius:5px; margin-right:4px; white-space:nowrap; }
.occ-fals{ font-size:11.5px; line-height:1.45; color:#f4d9d0; background:rgba(240,102,63,.08); border:1px solid rgba(240,102,63,.22); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.occ-fk{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#f0885a; margin-right:6px; }
.occ-card-f{ display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); border-top:1px solid rgba(120,140,170,.14); padding-top:8px; }

/* calibration */
.occ-stat{ font-size:15px; line-height:1.5; color:#eef4fb; margin:0 0 8px; }
.occ-verdict{ font-size:13px; line-height:1.55; color:var(--ink-dim); margin:0 0 16px; padding-left:12px; border-left:2px solid var(--occ); }
.occ-cases{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:800px){ .occ-cases{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .occ-cases{ grid-template-columns:1fr; } }
.occ-case{ border:1px solid rgba(120,140,170,.16); border-radius:10px; padding:12px; border-top:2px solid var(--ct); background:rgba(10,16,26,.4); }
.occ-case-h{ display:flex; flex-direction:column; margin-bottom:4px; }
.occ-case-name{ font-size:13px; font-weight:600; color:#eef4fb; }
.occ-case-shape{ font-family:var(--mono); font-size:10px; color:var(--ct); }
.occ-case-shock{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-bottom:7px; }
.occ-case-detail{ font-size:11.5px; line-height:1.5; color:var(--ink-dim); margin:0; }

/* exposure record */
.occ-intro{ font-size:13px; line-height:1.55; color:var(--ink-dim); margin:0 0 14px; }
.occ-facts{ display:flex; flex-direction:column; gap:10px; }
.occ-fact{ display:grid; grid-template-columns:180px 1fr; gap:14px; align-items:baseline; padding-bottom:10px; border-bottom:1px solid rgba(120,140,170,.12); }
@media(max-width:640px){ .occ-fact{ grid-template-columns:1fr; gap:2px; } }
.occ-fact-v{ font-family:var(--mono); font-size:18px; font-weight:600; color:#eef4fb; display:flex; align-items:baseline; gap:8px; }
.occ-fact-l{ font-size:12.5px; line-height:1.5; color:var(--ink-dim); }
.occ-intl{ font-size:12.5px; line-height:1.55; color:var(--ink-dim); margin:16px 0 0; padding:12px; background:rgba(157,180,214,.07); border-radius:10px; }

/* vendor ledger */
.occ-ledger{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:800px){ .occ-ledger{ grid-template-columns:1fr; } }
.occ-vr{ border:1px solid rgba(120,140,170,.16); border-radius:12px; padding:13px; background:rgba(10,16,26,.4); }
.occ-vr-h{ display:flex; align-items:center; gap:9px; margin-bottom:9px; flex-wrap:wrap; }
.occ-vr-co{ font-size:14px; font-weight:600; color:#eef4fb; }
.occ-vr-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:5px; color:var(--vt); border:1px solid color-mix(in srgb, var(--vt) 45%, transparent); }
.occ-vr-date{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-left:auto; }
.occ-vr-claim, .occ-vr-out{ font-size:12px; line-height:1.5; color:var(--ink-dim); margin-bottom:6px; }
.occ-vr-out{ margin-bottom:0; color:#dce4ee; }

/* source table */
.occ-src-table{ font-size:12px; }
.occ-src-row{ display:grid; grid-template-columns:1.4fr 2fr 0.9fr 0.9fr 0.8fr; gap:12px; padding:8px 0; border-bottom:1px solid rgba(120,140,170,.12); align-items:center; }
@media(max-width:720px){ .occ-src-row{ grid-template-columns:1fr 1fr; gap:4px 12px; } .occ-src-row span:nth-child(3){ display:none; } }
.occ-src-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.occ-src-name{ color:#eef4fb; font-weight:600; }
.occ-src-row span{ color:var(--ink-dim); }
.occ-refresh{ font-family:var(--mono); font-size:10px; }
.occ-refresh.auto{ color:#5ef0a8; }
.occ-refresh.manual{ color:var(--ink-faint); }


/* ░░░ phone shell — the dash nav docks as a bottom tab bar ░░░ */
@media (max-width: 760px) {
  .pull-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    margin-top: 0; padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 7, 6, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 0; border-top: 1px solid var(--hair);
  }
  .nav-btn { padding: 12px 14px; min-height: 44px; font-size: 10px; display: inline-flex; align-items: center; }
  .nav-btn::before { display: none; }   /* no ▸ marker in the tab bar */
  .nav-btn::after { bottom: auto; top: 0; transform-origin: left; }   /* the active tick rides the top edge */
  #s-dash .pull-hud { padding-bottom: 88px; }   /* the views clear the docked bar */
  .eng-strip.eng-pill { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }   /* floats above the tab bar — its injected stylesheet lands after ours, hence the !important */
  #rally-fab { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }   /* share launcher rides above the bar too — inline style owns its bottom, hence the !important */
}


/* ░░░ the hero — the skyline IS the welcome ░░░ */
/* ── while you were gone — the return-visit delta ── */
.wyg { margin: 0 0 var(--sp-3); font-family: var(--mono); }
.wyg-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border: 1px solid rgba(94,240,168,.3); border-radius: 12px;
  background: rgba(94,240,168,.05); font-size: 12.5px; color: var(--ink-dim);
}
.wyg-dot { color: var(--accent); text-shadow: var(--glow); animation: ghostPulse 2.4s ease-in-out infinite; }
.wyg-text b { color: var(--ink); font-weight: 500; }
.wyg-x {
  margin-left: auto; background: none; border: 0; color: var(--ink-faint);
  font-family: inherit; font-size: 14px; cursor: pointer; padding: 0 2px;
}
.wyg-x:hover { color: var(--ink); }
/* a crossing is a rare, dated EVENT — the one thing allowed to be loud */
.wyg-event {
  display: flex; align-items: baseline; gap: 12px; margin-top: 6px;
  padding: 12px 14px; border: 1px solid rgba(232,179,74,.5); border-radius: 12px;
  background: rgba(232,179,74,.07); font-size: 13px; color: var(--ink);
  animation: rungIn .5s ease both;
}
.wyg-event .wyg-ev-tag {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #e8b34a;
  border: 1px solid rgba(232,179,74,.5); border-radius: 9px; padding: 2px 8px; white-space: nowrap;
}
.wyg-event b { font-weight: 500; }
.wyg-event .wyg-ev-when { margin-left: auto; color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }

.hero-board { position: relative; height: clamp(460px, 68vh, 640px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(94,240,168,.16); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.hero-board .sky-stage { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.hero-board .sky-fallback { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; }
.hero-veil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 90px clamp(18px,4vw,44px) 26px; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(4,7,6,.5) 42%, rgba(4,7,6,.92) 100%); }
.hero-veil .sec-claim { font-size: clamp(34px, 5.2vw, 62px); margin: 2px 0 8px; }
.hero-idx { display: flex; align-items: baseline; gap: 14px; }
.hero-idx b { font-family: var(--disp); font-weight: 700; font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -.02em; color: var(--ink-hi); text-shadow: 0 0 40px rgba(94,240,168,.25); font-variant-numeric: tabular-nums; }
.hero-chg { font-family: var(--mono); font-size: clamp(13px, 1.8vw, 17px); font-weight: 600; }
.hero-chg.up { color: var(--accent); text-shadow: var(--glow); }
.hero-chg.dn { color: var(--strike); }
.hero-thesis { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-dim); max-width: 62ch; margin: 8px 0 0; }
@media (max-width: 760px) { .hero-board { height: min(58vh, 540px); } .hero-veil { padding: 60px 16px 18px; } .hero-veil .sec-claim { font-size: clamp(28px, 8.6vw, 40px); } .hero-thesis { font-size: 0; max-width: 100%; } .hero-thesis::after { content: 'drag to orbit · tap a tower for its signal'; font-size: 11px; } }

/* ░░░ the demoted manifesto — there if you want it, closed by default ░░░ */
.hv-why-acc { margin-top: var(--s6, 34px); border: 1px solid var(--hair); border-radius: var(--r-m, 10px); background: var(--surface-1, rgba(201,209,203,.03)); }
.hv-why-acc summary { cursor: pointer; list-style: none; padding: 14px 18px; font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.hv-why-acc summary::-webkit-details-marker { display: none; }
.hv-why-acc summary::before { content: '▸'; color: var(--accent); margin-right: 10px; display: inline-block; transition: transform .25s; }
.hv-why-acc[open] summary::before { transform: rotate(90deg); }
.hv-why-acc summary em { color: var(--accent); font-style: normal; }
.hv-why-acc .hv-p, .hv-why-acc .hv-why { margin: 0 18px 14px; max-width: 72ch; }

/* ░░░ the horizon as a swipe rail ░░░ */
.hz-cards { display: flex; gap: var(--s4, 18px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; scrollbar-width: thin; }
.hz-cards .hz-card { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; }
@media (min-width: 1100px) { .hz-cards .hz-card { flex-basis: 380px; } }


/* ░░░ the growth canyon — the climb's 3D hero ░░░ */
.growth-stage{
  position:relative; width:100%; height:min(48vh,430px); min-height:300px; margin:var(--s4,18px) 0 var(--s3,12px);
  border-radius:16px; overflow:hidden; border:1px solid rgba(94,240,168,.14);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(94,240,168,.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(7,11,20,.4) 0%, rgba(7,11,20,.85) 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.35);
  cursor:grab;
}
.growth-stage:active{ cursor:grabbing; }
.growth-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.growth-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.growth-label{ position:absolute; left:0; top:0; white-space:nowrap; transition:opacity .3s; will-change:transform; }
.growth-label .gl-name{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-shadow:0 0 8px rgba(7,11,20,.95), 0 0 3px rgba(7,11,20,.95); }
.growth-readout{
  position:absolute; left:12px; bottom:12px; z-index:3; max-width:min(86%,560px);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim);
  background:rgba(8,12,18,.72); border:1px solid rgba(94,240,168,.16); border-radius:9px;
  padding:7px 11px; backdrop-filter:blur(6px); pointer-events:none;
}
.growth-readout b{ font-weight:600; }
.growth-readout .gr-dim{ color:var(--ink-dim); opacity:.85; }
@media (max-width:640px){
  .growth-stage{ height:42vh; min-height:280px; }
  .growth-label .gl-name{ font-size:8.5px; letter-spacing:.08em; }
  .growth-readout{ font-size:10px; left:8px; bottom:8px; padding:6px 9px; }
}

/* ═══════════ THE OPENING — the doubling clock ═══════════
   A metronome, not a chart. Each .beat is one doubling, positioned by year on a
   fixed rail, so where a machine took the job the dots visibly pile up. Nothing
   is written above the rail — caption, rungs and doors all arrive after. */
.screen.open { display: none; }
.screen.open.active { display: flex; align-items: center; justify-content: center; }
.open-stage {
  width: min(880px, 92vw); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}

.clock { width: 100%; cursor: pointer; }
.clock-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.clock-label { color: var(--ink-dim); }
.clock-tempo { color: var(--accent); text-shadow: var(--glow); white-space: nowrap; }
.clock-tempo.flash { animation: tempoFlash .5s ease; }
@keyframes tempoFlash {
  0% { transform: scale(1); text-shadow: var(--glow); }
  30% { transform: scale(1.14); text-shadow: var(--glow-strong); }
  100% { transform: scale(1); text-shadow: var(--glow); }
}
.clock-rail {
  position: relative; height: 88px;
  border: 1px solid var(--hair); border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(94,240,168,.04), rgba(5,6,6,0) 70%);
}
.clock-rail::after {                       /* the time axis the beats land on */
  content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 1px;
  background: var(--hair);
}
.clock-rail .beat {
  position: absolute; bottom: 22px; width: 2px; height: 10px; margin-left: -1px;
  background: var(--accent); border-radius: 1px;
  box-shadow: 0 0 6px rgba(94,240,168,.75);
  animation: beatIn .34s ease both;
}
@keyframes beatIn {
  0% { opacity: 0; height: 30px; box-shadow: 0 0 18px rgba(94,240,168,.95); }
  100% { opacity: 1; height: 10px; box-shadow: 0 0 6px rgba(94,240,168,.75); }
}
/* the dots already scheduled by the tempo — hollow, breathing, not yet earned */
.clock-rail .beat.ghost {
  background: none; border: 1px solid var(--accent); width: 4px; height: 8px; margin-left: -2px;
  box-shadow: none; opacity: .55; border-radius: 2px;
  animation: beatIn .34s ease both, ghostPulse 2.2s ease-in-out 1s infinite;
}
@keyframes ghostPulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
/* the observer, planted on the rail — flat behind you, steep ahead */
.clock-rail .clock-now {
  position: absolute; bottom: 14px; width: 1px; height: 44px; margin-left: -.5px;
  background: linear-gradient(180deg, var(--ink-dim), transparent);
  animation: beatIn .4s ease both;
}
.clock-rail .clock-now b {
  position: absolute; top: -14px; left: -14px; width: 28px; text-align: center;
  font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim);
}
/* the countdown to the next scheduled dot */
.clock-next {
  margin-top: var(--sp-2);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--accent); text-shadow: var(--glow);
  animation: rungIn .5s ease both;
}
.clock-years {
  display: flex; justify-content: space-between; margin-top: var(--sp-2);
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}

/* the human rungs — what the doublings actually bought */
.rungs { width: 100%; display: flex; flex-direction: column; gap: 1px; }
.rung {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: var(--sp-2);
  padding: 8px 12px; border-radius: var(--r-s);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint);
  animation: rungIn .4s ease both;
}
.rung.lit { color: var(--ink); background: rgba(94,240,168,.05); }
.rung-dot { color: var(--ink-faint); }
.rung.lit .rung-dot { color: var(--accent); text-shadow: var(--glow); }
.rung-when { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.rung.lit .rung-when { color: var(--accent); }
@keyframes rungIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* act 3 — one ruler, every curve */
.compare { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr auto; align-items: center; gap: var(--sp-3);
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
}
.cmp-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-track { display: flex; gap: 3px; align-items: center; min-height: 12px; flex-wrap: wrap; }
.cmp-track i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 5px rgba(94,240,168,.6);
  animation: beatPop .3s ease both;
}
.cmp.wrong .cmp-track i { background: var(--strike); box-shadow: 0 0 5px rgba(200,85,61,.6); }
.cmp.wrong .cmp-n { color: var(--strike); }
.cmp.flat .cmp-n { color: var(--ink-faint); font-style: italic; }
.cmp-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes beatPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

.open-cap { text-align: center; animation: openCapIn .5s ease both; }
.open-num {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(28px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--ink-hi); text-shadow: var(--glow-strong);
  font-variant-numeric: tabular-nums;
}
.open-line {
  margin: var(--sp-2) auto 0; max-width: 62ch;
  font-family: var(--mono); font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.6;
  color: var(--ink-dim);
}
@keyframes openCapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.open-bar { display: flex; align-items: center; gap: var(--sp-3); animation: openCapIn .5s .08s ease both; }
.open-again {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: none; cursor: pointer;
  border: 1px solid var(--accent-dim); border-radius: 999px; padding: 7px 16px;
  transition: background .18s, box-shadow .18s;
}
.open-again:hover { background: rgba(94,240,168,.08); box-shadow: var(--glow); }
.open-dots { font-size: 10px; letter-spacing: .34em; color: var(--ink-faint); }

.open-doors { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); animation: openCapIn .5s .16s ease both; }
.open-in {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); cursor: pointer;
  border: 0; border-radius: 999px; padding: 11px 30px; box-shadow: var(--glow-strong);
}
.open-in:hover { filter: brightness(1.08); }
.open-under { display: flex; gap: var(--sp-4); }
.open-under a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--accent-dim);
}
.open-under a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .open-stage { gap: var(--sp-3); }
  .clock-rail { height: 68px; }
  .clock-head { font-size: 10px; letter-spacing: .1em; }
  .cmp { grid-template-columns: 1fr; gap: 2px; font-size: 11px; }
  .cmp-label { white-space: normal; }
  .open-under { gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .open-cap, .open-bar, .open-doors, .rung, .clock-rail .beat, .clock-rail .clock-now, .clock-next, .cmp-track i { animation: none; }
}

/* the hidden attribute must win over the display rules above — an author-level
   `display` beats the UA stylesheet's [hidden], which silently left act 2's
   rungs on screen during act 3 */
.rungs[hidden], .compare[hidden], .open-cap[hidden], .open-bar[hidden], .open-doors[hidden] { display: none; }

/* the clockbox mounts in two places — the door and the Climb view — so its own
   layout lives here rather than in either host */
.clockbox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.clock-sec { margin: 0 0 var(--sp-6); }
.clock-sec .open-num { font-size: clamp(22px, 3.4vw, 36px); }      /* inside the page, not the whole screen */
.clock-sec .open-line { font-size: 12.5px; }
.clock-sec .clock-rail { height: 72px; }
.clock-foot { width: 100%; }