/* ═══════════════════════════════════════════════════════════
   CENTURY HEADQUARTERS  ·  v1.3

   Two modes, one DOM.
     SHOWCASE  cinematic command centre, 3D core, ambient motion
     SIMPLE    data first console, no WebGL, no ambient motion

   NO EMOJI. NO EM DASH. Every mark is CSS or SVG geometry.
   ═══════════════════════════════════════════════════════════ */

:root {
  --void: #04060a;

  --surf-1: rgba(13, 23, 38, 0.78);
  --surf-2: rgba(19, 33, 53, 0.9);
  --surf-3: rgba(8, 15, 26, 0.62);
  --panel:  #0b1422;

  --ink-max: #f5faff;
  --ink-1:   rgba(232, 244, 255, 0.97);
  --ink-2:   rgba(206, 226, 247, 0.88);
  --ink-3:   rgba(163, 192, 220, 0.72);
  --ink-4:   rgba(138, 168, 199, 0.52);

  --edge-amb: rgba(140, 190, 235, 0.10);
  --edge-1:   rgba(146, 194, 240, 0.22);
  --edge-2:   rgba(154, 204, 248, 0.36);
  --edge-3:   rgba(168, 220, 255, 0.58);

  --cy:      #45d2ff;
  --cy-hi:   #8ae6ff;
  --cy-deep: #1b7fb4;
  --cy-glow: rgba(69, 210, 255, 0.38);

  --ok:   #52e0a4;
  --warn: #ffb84d;
  --warn-glow: rgba(255, 184, 77, 0.34);

  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --sans: "Saira", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --ease:   cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-m: cubic-bezier(0.33, 0, 0.15, 1);

  --notch: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--void); overflow: hidden; }
body { font-family: var(--mono); color: var(--ink-2); -webkit-font-smoothing: antialiased; cursor: default; }
b, strong { font-weight: 400; }
h1, h2, h3 { margin: 0; font-weight: 400; }

/* ═══════════════════════ ENTRY ═══════════════════════ */

.entry { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: #030507; cursor: pointer; transition: opacity 420ms var(--ease-m); }
.entry-bloom { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; background: radial-gradient(circle, rgba(96,132,172,0.075) 0%, rgba(50,74,104,0.030) 38%, transparent 68%); filter: blur(14px); animation: bloomBreathe 7.5s ease-in-out infinite; }
.entry-text { position: relative; font-size: 13px; font-weight: 300; letter-spacing: 0.42em; text-indent: 0.42em; color: rgba(206,226,246,0.8); text-shadow: 0 0 12px rgba(150,195,240,0.3), 0 0 42px rgba(110,160,214,0.14); animation: flicker 6.2s steps(1,end) infinite; user-select: none; }
@keyframes flicker { 0%,100%{opacity:.86;} 2%{opacity:.52;} 3.4%{opacity:.92;} 27%{opacity:.86;} 27.8%{opacity:.63;} 28.6%{opacity:.88;} 52%{opacity:.8;} 53%{opacity:.97;} 71%{opacity:.86;} 71.6%{opacity:.58;} 72.4%{opacity:.9;} 89%{opacity:.84;} }
@keyframes bloomBreathe { 0%,100%{opacity:.62;transform:scale(1);} 50%{opacity:1;transform:scale(1.055);} }
body.transiting .entry { opacity: 0; pointer-events: none; }
body.hq-live .entry { display: none; }
.flash { position: fixed; inset: 0; z-index: 500; background: #fff; opacity: 0; pointer-events: none; }
.flash.fire { animation: flashBurst 300ms linear forwards; }
@keyframes flashBurst { 0%{opacity:0;} 6%{opacity:.97;} 14%{opacity:.92;} 100%{opacity:0;} }

/* ════════════════════════ HQ ═════════════════════════ */

.hq { position: fixed; inset: 0; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease-m); }
body.transiting .hq, body.hq-live .hq { visibility: visible; opacity: 1; }

.env { position: absolute; inset: 0; overflow: hidden; }
.env-base { position: absolute; inset: 0; background: radial-gradient(125% 92% at 50% 44%, #0b1522 0%, #070d15 46%, #04070b 78%, #030508 100%); }
.env-bloom { position: absolute; left: 50%; top: 46%; width: 82vw; height: 86vh; transform: translate(-50%,-50%); background: radial-gradient(ellipse at center, rgba(72,120,172,0.13) 0%, rgba(42,76,118,0.05) 32%, transparent 64%); filter: blur(30px); opacity: 0; transition: opacity 1300ms var(--ease-m) 60ms; }
body.hq-live .env-bloom { opacity: 1; }
.env-grid { position: absolute; inset: -10%; transition: opacity 380ms var(--ease-m); }
.env-grid--fine { background-image: linear-gradient(to right, var(--edge-amb) 1px, transparent 1px), linear-gradient(to bottom, var(--edge-amb) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(ellipse 80% 72% at 50% 48%, #000 18%, transparent 88%); mask-image: radial-gradient(ellipse 80% 72% at 50% 48%, #000 18%, transparent 88%); }
.env-grid--major { background-image: linear-gradient(to right, rgba(146,194,240,0.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(146,194,240,0.14) 1px, transparent 1px); background-size: 190px 190px; -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 48%, #000 6%, transparent 92%); mask-image: radial-gradient(ellipse 88% 82% at 50% 48%, #000 6%, transparent 92%); }
.env-floor { position: absolute; left: -25%; right: -25%; bottom: -6%; height: 42%; background-image: linear-gradient(to right, rgba(150,190,232,0.13) 1px, transparent 1px), linear-gradient(to bottom, rgba(150,190,232,0.09) 1px, transparent 1px); background-size: 92px 64px; transform: perspective(620px) rotateX(68deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 74%); mask-image: linear-gradient(to top, #000 0%, transparent 74%); opacity: 0; transition: opacity 1400ms var(--ease-m) 420ms; }
body.hq-live .env-floor { opacity: 0.26; }
.sweep { position: absolute; top: 0; bottom: 0; width: 260px; opacity: 0; background: linear-gradient(to right, transparent, rgba(140,186,236,0.025) 45%, rgba(178,212,248,0.05) 50%, rgba(140,186,236,0.025) 55%, transparent); }
body.hq-live .sweep { animation: sweepPass 19s linear 2.6s infinite; }
@keyframes sweepPass { 0%{transform:translateX(-300px);opacity:0;} 6%{opacity:1;} 94%{opacity:1;} 100%{transform:translateX(100vw);opacity:0;} }

.frame { position: absolute; inset: 0; pointer-events: none; z-index: 4; transition: opacity 380ms var(--ease-m); }
.br { position: absolute; width: 22px; height: 22px; }
.br::before, .br::after { content: ""; position: absolute; background: var(--edge-3); }
.br::before { height: 1px; width: 100%; } .br::after { width: 1px; height: 100%; }
.br--tl { top: 14px; left: 14px; } .br--tl::before, .br--tl::after { top: 0; left: 0; }
.br--tr { top: 14px; right: 14px; } .br--tr::before, .br--tr::after { top: 0; right: 0; }
.br--bl { bottom: 14px; left: 14px; } .br--bl::before, .br--bl::after { bottom: 0; left: 0; }
.br--br { bottom: 14px; right: 14px; } .br--br::before, .br--br::after { bottom: 0; right: 0; }
.ruler { position: absolute; display: flex; }
.ruler--top { top: 14px; left: 46px; right: 46px; height: 8px; justify-content: space-between; }
.ruler--left { left: 14px; top: 46px; bottom: 46px; width: 8px; flex-direction: column; justify-content: space-between; }
.ruler i { display: block; background: rgba(146,194,240,0.22); }
.ruler--top i { width: 1px; height: 3px; } .ruler--top i.maj { height: 7px; background: rgba(168,220,255,0.4); }
.ruler--left i { height: 1px; width: 3px; } .ruler--left i.maj { width: 7px; background: rgba(168,220,255,0.4); }

.links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; transition: opacity 340ms var(--ease-m); }
.lk { fill: none; stroke: rgba(146,194,240,0.26); stroke-width: 1; transition: stroke 280ms var(--ease-m), filter 280ms var(--ease-m); }
.lk.is-lit { stroke: rgba(110,220,255,0.85); filter: drop-shadow(0 0 4px rgba(69,210,255,0.55)); }
.lk-pulse { fill: none; stroke: var(--cy-hi); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(120,225,255,0.9)); }
.nd { fill: #0a1422; stroke: rgba(154,204,248,0.55); stroke-width: 1; transition: fill 280ms var(--ease-m), stroke 280ms var(--ease-m), filter 280ms var(--ease-m); }
.nd.is-lit { fill: var(--cy); stroke: var(--cy-hi); filter: drop-shadow(0 0 6px rgba(69,210,255,0.85)); }

/* ═══════════════ STAGE: SHOWCASE LAYOUT ═══════════════ */

.stage {
  position: absolute; inset: 0; z-index: 8;
  display: grid;
  grid-template-columns: 330px minmax(0,1fr) 330px;
  grid-template-rows: auto repeat(3, minmax(0,1fr)) auto;
  grid-template-areas:
    "railt   railt  railt"
    "decade  core   revenue"
    "fantasy core   funds"
    "youtube core   tasks"
    "railb   railb  railb";
  column-gap: 20px; row-gap: 13px; padding: 30px 34px 22px;
  transition: padding 380ms var(--ease);
}
.rail--top { grid-area: railt; } .rail--bottom { grid-area: railb; }
.core { grid-area: core; }
.mod[data-mod="decade"]  { grid-area: decade; }
.mod[data-mod="fantasy"] { grid-area: fantasy; }
.mod[data-mod="youtube"] { grid-area: youtube; }
.mod[data-mod="revenue"] { grid-area: revenue; }
.mod[data-mod="funds"]   { grid-area: funds; }
.mod[data-mod="tasks"]   { grid-area: tasks; }

/* ═══════════════ STAGE: SIMPLE LAYOUT ═══════════════
   Data first. No core, denser cards, four content rows. */

body.is-simple .stage {
  grid-template-columns: 1fr 1.55fr 1fr;
  grid-template-rows: auto repeat(4, minmax(0,1fr)) auto;
  grid-template-areas:
    "railt   railt    railt"
    "tasks   revenue  funds"
    "tasks   revenue  funds"
    "decade  revenue  youtube"
    "decade  revenue  fantasy"
    "railb   railb    railb";
  column-gap: 14px; row-gap: 10px; padding: 22px 22px 16px;
}
body.is-simple .core { display: none; }
body.is-simple .links,
body.is-simple .env-floor,
body.is-simple .env-bloom,
body.is-simple .sweep,
body.is-simple .frame,
body.is-simple .scan { display: none; }
body.is-simple .env-grid { opacity: 0.35; }
body.is-simple .vignette { background: radial-gradient(ellipse 92% 88% at 50% 46%, transparent 62%, rgba(2,4,7,0.3) 100%); }
body.is-simple .grain { display: none; }
body.is-simple .rail__sub { display: inline; }
body.is-simple .mod { box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
body.is-simple .mod__body { padding: 9px 11px 8px; gap: 8px; }
body.is-simple .mod__meta { display: none; }

/* rails */
.rail { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.rail__l, .rail__r { display: flex; align-items: center; gap: 12px; }
.rail--bottom { align-items: flex-end; }
.glyph { width: 9px; height: 9px; border: 1px solid var(--cy); transform: rotate(45deg); box-shadow: 0 0 8px var(--cy-glow); flex: none; }
.rail__mark { font-family: var(--sans); font-size: 13px; letter-spacing: 0.3em; color: var(--ink-1); }
.rail__sub { display: none; font-size: 8.5px; letter-spacing: 0.24em; color: var(--ink-4); }
.rail__div { width: 1px; height: 15px; background: var(--edge-1); flex: none; }
.kv { display: flex; align-items: baseline; gap: 7px; font-size: 9.5px; letter-spacing: 0.12em; white-space: nowrap; }
.kv b { color: var(--ink-4); } .kv i { color: var(--ink-2); font-style: normal; }
.status { display: flex; align-items: center; gap: 8px; }
.status__dot { width: 5px; height: 5px; background: var(--cy); box-shadow: 0 0 8px rgba(69,210,255,.9); flex: none; }
.status__label { font-size: 10px; letter-spacing: 0.24em; color: var(--ink-1); }
body.hq-live .status__dot { animation: pulseDot 3.4s var(--ease-m) infinite; }
body.is-simple .status__dot { animation: none; box-shadow: none; }
@keyframes pulseDot { 0%,72%,100%{opacity:1;} 78%{opacity:.25;} 84%{opacity:1;} }
.clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.clock__time { font-size: 12px; letter-spacing: 0.16em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.clock__meta { font-size: 8.5px; letter-spacing: 0.16em; color: var(--ink-4); }

.nav { display: flex; align-items: center; }
.nav__link { width: 12px; height: 1px; background: var(--edge-1); flex: none; }
/* Navigation reads as part of the frame, not as a row of buttons.
   State is carried by a thin illuminated notch, never a filled box. */
.nav__b {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 9px; letter-spacing: 0.16em;
  padding: 8px 13px 9px; color: var(--ink-3);
  background: none; border: 0; cursor: pointer;
  transition: color 200ms var(--ease-m);
}
.nav__b::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 1px; background: var(--edge-3);
  transform: scaleX(0); transform-origin: center;
  transition: transform 240ms var(--ease), background 200ms var(--ease-m);
}
.nav__b:hover { color: var(--ink-1); }
.nav__b:hover::after { transform: scaleX(0.55); }
.nav__b.is-on { color: var(--ink-max); }
.nav__b.is-on::after { transform: scaleX(1); background: var(--cy); box-shadow: 0 0 8px var(--cy-glow); }
.nav__b.is-on .pip { background: var(--cy); box-shadow: 0 0 8px var(--cy-glow); }
.nav__b:active { transform: translateY(1px); }

.pip { width: 5px; height: 5px; flex: none; transform: rotate(45deg); background: var(--ink-4); }
.pip[data-tone="live"], .pip[data-tone="decade"] { background: var(--cy); box-shadow: 0 0 7px var(--cy-glow); }
.pip[data-tone="ok"] { background: var(--ok); }
.pip[data-tone="warn"], .pip[data-tone="school"] { background: var(--warn); box-shadow: 0 0 7px var(--warn-glow); }
.pip[data-tone="youtube"] { background: var(--cy-hi); }
.pip[data-tone="fantasy"] { background: #7fb2e8; }
.pip[data-tone="threed"] { background: #55c9c2; }
.pip[data-tone="century"] { background: #b9d8f5; }
.pip[data-tone="personal"] { background: #8f9fc4; }

/* alerts */
.alerthost { position: relative; }
.alertctl { display: flex; align-items: center; gap: 7px; font-family: inherit; font-size: 9px; letter-spacing: 0.15em; padding: 6px 10px; color: var(--ink-3); background: var(--surf-3); border: 1px solid var(--edge-1); cursor: pointer; transition: color 200ms var(--ease-m), border-color 200ms var(--ease-m); }
.alertctl__pip { width: 5px; height: 5px; transform: rotate(45deg); background: var(--ink-4); flex: none; }
.alertctl__n { font-size: 8px; color: var(--ink-4); border-left: 1px solid var(--edge-1); padding-left: 7px; }
.alertctl:hover { color: var(--ink-1); border-color: var(--edge-2); }
.alertctl.is-raised { color: var(--warn); border-color: rgba(255,184,77,0.45); }
.alertctl.is-raised .alertctl__pip { background: var(--warn); box-shadow: 0 0 8px var(--warn-glow); }
.alertctl.is-raised .alertctl__n { color: var(--warn); }
body.hq-live .alertctl.is-raised .alertctl__pip { animation: alertPulse 2.8s var(--ease-m) infinite; }
body.is-simple .alertctl.is-raised .alertctl__pip { animation: none; }
@keyframes alertPulse { 0%,68%,100%{opacity:1;} 80%{opacity:.3;} }
.alertbox { position: absolute; top: calc(100% + 9px); right: 0; width: 320px; z-index: 40; background: var(--panel); border: 1px solid var(--edge-2); box-shadow: 0 20px 50px rgba(0,0,0,0.65); clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms var(--ease-m), transform 240ms var(--ease), visibility 240ms; }
.alertbox.is-open { opacity: 1; visibility: visible; transform: none; }
.alertbox__h { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--edge-1); font-size: 8.5px; letter-spacing: 0.18em; color: var(--ink-3); }
.alertbox__b { padding: 10px 11px; display: grid; gap: 9px; }
.alertitem { position: relative; padding: 9px 10px 9px 13px; background: rgba(40,29,12,0.4); border: 1px solid rgba(255,184,77,0.28); }
.alertitem__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--warn); }
.alertitem__h { display: flex; align-items: center; gap: 8px; }
.alertitem__t { flex: 1; font-size: 9.5px; letter-spacing: 0.1em; color: var(--ink-max); }
.alertitem__w { font-size: 8px; color: var(--ink-4); }
.alertitem__b { margin: 5px 0 0; font-size: 9px; line-height: 1.5; color: var(--ink-3); }

.seg { display: flex; border: 1px solid var(--edge-1); background: var(--surf-3); flex: none; }
.seg__b { font-family: inherit; font-size: 8.5px; letter-spacing: 0.16em; padding: 6px 11px; color: var(--ink-3); background: none; border: 0; border-right: 1px solid var(--edge-1); cursor: pointer; transition: color 200ms var(--ease-m), background 200ms var(--ease-m); white-space: nowrap; }
.seg__b:last-child { border-right: 0; }
.seg__b:hover { color: var(--ink-1); }
.seg__b.is-on { color: var(--ink-max); background: rgba(26,76,106,0.6); box-shadow: inset 0 0 0 1px rgba(120,215,255,0.28); }

/* ═══════════════════ MODULES ═══════════════════ */

.mod {
  position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: linear-gradient(180deg, var(--surf-1) 0%, rgba(8,15,25,0.72) 100%);
  border: 1px solid var(--edge-2);
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(170,215,255,0.09), 0 16px 36px rgba(0,0,0,0.52);
  cursor: pointer; outline: none;
  transition: border-color 260ms var(--ease-m), background 260ms var(--ease-m), box-shadow 260ms var(--ease-m), opacity 300ms var(--ease-m);
}
.mod:hover, .mod:focus-visible { border-color: var(--edge-3); background: linear-gradient(180deg, var(--surf-2) 0%, rgba(11,20,33,0.8) 100%); box-shadow: inset 0 1px 0 rgba(195,232,255,0.16), 0 18px 42px rgba(0,0,0,0.56), 0 0 30px rgba(52,150,210,0.18); }
.mod.is-open { border-color: rgba(120,225,255,0.8); box-shadow: inset 0 1px 0 rgba(195,232,255,0.2), 0 0 0 1px rgba(69,210,255,0.16), 0 0 42px rgba(69,210,255,0.24); }

/* background modules must not read through the panel */
body.is-expanded .mod.is-quiet { opacity: 0.14; pointer-events: none; }
body.is-expanded .mod.is-open { opacity: 0.3; }
body.is-expanded .core { transform: scale(0.8) translateZ(0); opacity: 0.16; filter: blur(2px); }
body.is-expanded .links { opacity: 0.25; }
body.is-expanded .lk.is-lit { stroke: rgba(110,220,255,0.9); }
body.is-expanded .env-grid { opacity: 0.5; }
body.is-expanded .frame { opacity: 0.4; }
body.is-expanded .echo { opacity: 0.3; pointer-events: none; }
body.is-expanded .rail--bottom .kv { opacity: 0.35; }

.mod__bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px 8px; border-bottom: 1px solid var(--edge-1); flex: none; }
.mod__idx { font-size: 8.5px; color: var(--ink-4); flex: none; }
.mod__name { font-family: var(--sans); font-size: 12px; letter-spacing: 0.17em; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod__state { margin-left: auto; }
.mod__grip { width: 7px; height: 7px; flex: none; border-right: 1px solid var(--edge-2); border-bottom: 1px solid var(--edge-2); transition: border-color 240ms var(--ease-m); }
.mod:hover .mod__grip { border-color: var(--cy); }
.mod__body { flex: 1; min-height: 0; padding: 11px 12px 9px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mod__meta { position: relative; flex: none; height: 25px; border-top: 1px solid var(--edge-1); background: rgba(6,12,21,0.5); }
.mod__meta span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; font-size: 8px; letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 260ms var(--ease-m); }
.mod__meta-rest { color: var(--ink-4); opacity: 1; }
.mod__meta-hover { color: var(--cy-hi); opacity: 0; }
.mod:hover .mod__meta-rest { opacity: 0; }
.mod:hover .mod__meta-hover { opacity: 1; }

/* ═══════════════════ PRIMITIVES ═══════════════════ */

.chip { padding: 3px 7px; font-size: 8px; letter-spacing: 0.14em; color: var(--ink-3); border: 1px solid var(--edge-1); background: var(--surf-3); flex: none; white-space: nowrap; }
.chip[data-tone="live"] { color: var(--cy-hi); border-color: rgba(69,210,255,0.45); background: rgba(24,90,124,0.22); }
.chip[data-tone="ok"] { color: var(--ok); border-color: rgba(82,224,164,0.4); background: rgba(24,96,72,0.2); }
.chip[data-tone="warn"] { color: var(--warn); border-color: rgba(255,184,77,0.45); background: rgba(110,74,20,0.22); }

.met { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.met__k { font-size: 9px; letter-spacing: 0.16em; color: var(--ink-3); white-space: nowrap; }
.met__row { display: flex; align-items: baseline; gap: 6px; }
.met__v { font-family: var(--sans); font-weight: 300; line-height: 1; color: var(--ink-max); font-variant-numeric: tabular-nums; }
.met--lead .met__v { font-size: 28px; }
.met--mid .met__v { font-size: 20px; }
.met--sm .met__v { font-size: 16px; }
.met__u { font-size: 9.5px; font-style: normal; letter-spacing: 0.1em; color: var(--ink-4); }
.met__d { font-size: 10px; font-style: normal; color: var(--ok); }
.met__d[data-dir="down"] { color: var(--warn); }
.met__d[data-dir="flat"] { color: var(--ink-4); }

.mstrip { display: flex; align-items: flex-end; gap: 22px; }
.mstrip__div { width: 1px; align-self: stretch; background: var(--edge-1); }

.grid { display: grid; gap: 10px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--4 { grid-template-columns: repeat(4,1fr); }

.meter { position: relative; display: block; height: 4px; background: rgba(120,165,210,0.18); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--cy-deep), var(--cy)); box-shadow: 0 0 9px var(--cy-glow); transition: width 900ms var(--ease); }
.meter i[data-tone="warn"] { background: linear-gradient(90deg,#9a6a18,var(--warn)); box-shadow: 0 0 9px var(--warn-glow); }
.meter i[data-tone="ok"] { background: linear-gradient(90deg,#1d7d5a,var(--ok)); box-shadow: 0 0 9px rgba(82,224,164,0.3); }
body.is-simple .meter i { transition-duration: 220ms; box-shadow: none; }

.btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 9px; letter-spacing: 0.17em; padding: 8px 13px; color: var(--ink-1); background: rgba(22,44,66,0.62); border: 1px solid var(--edge-2); cursor: pointer; clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); transition: color 180ms var(--ease-m), border-color 180ms var(--ease-m), background 180ms var(--ease-m); }
.btn__mark { width: 6px; height: 6px; border: 1px solid var(--cy); transform: rotate(45deg); flex: none; }
.btn:hover { color: var(--ink-max); border-color: var(--edge-3); background: rgba(30,66,96,0.72); }
.btn--ghost { background: none; color: var(--ink-3); }
.btn--tiny { font-size: 7.5px; padding: 4px 8px; letter-spacing: 0.14em; }
.btn--tiny .btn__mark { width: 4px; height: 4px; }
.btn--reset { margin-left: 8px; }

.xclose { display: flex; align-items: center; gap: 7px; flex: none; font-family: inherit; padding: 6px 9px; cursor: pointer; background: var(--surf-3); border: 1px solid var(--edge-2); color: var(--ink-2); transition: color 180ms var(--ease-m), border-color 180ms var(--ease-m), background 180ms var(--ease-m); }
.xclose__g { width: 12px; height: 12px; }
.xclose__g line { stroke: currentColor; stroke-width: 1.5; }
.xclose__k { font-size: 7.5px; letter-spacing: 0.14em; color: var(--ink-4); }
.xclose:hover { color: var(--ink-max); border-color: var(--edge-3); background: var(--surf-2); }

.slotless { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px dashed var(--edge-1); background: rgba(8,15,26,0.4); }
.slotless__x { width: 8px; height: 8px; border: 1px solid var(--edge-1); transform: rotate(45deg); flex: none; }
.slotless__t { font-size: 8.5px; letter-spacing: 0.16em; color: var(--ink-4); }

.deadline { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--surf-3); border: 1px solid var(--edge-1); margin-top: auto; }
.deadline__k { font-size: 7.5px; letter-spacing: 0.14em; color: var(--ink-4); flex: none; }
.deadline__v { font-size: 9.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.deadline__w { font-size: 9.5px; color: var(--cy-hi); flex: none; }

.goal { display: flex; flex-direction: column; gap: 5px; }
.goal__k { font-size: 9px; letter-spacing: 0.15em; color: var(--ink-3); }
.goal__line { display: flex; align-items: baseline; gap: 6px; }
.goal__c { font-family: var(--sans); font-size: 20px; font-weight: 300; color: var(--ink-max); font-variant-numeric: tabular-nums; }
.goal__sep { color: var(--ink-4); font-size: 12px; }
.goal__t { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.goal__p { margin-left: auto; font-size: 12px; color: var(--cy-hi); font-variant-numeric: tabular-nums; }

.tasklist { display: flex; flex-direction: column; margin: -11px -12px -9px; overflow: hidden; }
body.is-simple .tasklist { margin: -9px -11px -8px; }
.task { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid var(--edge-amb); }
.tasklist--dense .task { padding: 5px 11px; }
.tasklist__sep { padding: 5px 11px; font-size: 7.5px; letter-spacing: 0.2em; color: var(--ink-4); background: rgba(8,15,26,0.6); border-bottom: 1px solid var(--edge-amb); }
.task:last-child { border-bottom: 0; }
.task__t { font-size: 9px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.task__l { font-size: 10.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task__s { font-size: 8px; letter-spacing: 0.12em; color: var(--ink-3); }
.task__s[data-tone="live"] { color: var(--cy-hi); }
.task__s[data-tone="warn"] { color: var(--warn); }
.task__s[data-tone="ok"] { color: var(--ok); }
.cat { display: flex; align-items: center; gap: 5px; flex: none; }
.cat b { font-size: 8px; letter-spacing: 0.08em; color: var(--ink-3); }

.minilist { display: flex; flex-direction: column; gap: 2px; }
.minilist__h { font-size: 8px; letter-spacing: 0.2em; color: var(--ink-4); padding-bottom: 3px; border-bottom: 1px solid var(--edge-1); margin-bottom: 3px; }

.trendbox { width: 100%; }
.trendbox--sm { margin-top: auto; }
.spark { display: block; width: 100%; }
.bar { fill: rgba(150,190,232,0.5); }
.bar.is-now { fill: var(--cy); }

/* ═══════════════════ CORE ═══════════════════ */

.core { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; transition: transform 520ms var(--ease), opacity 420ms var(--ease-m), filter 420ms var(--ease-m); }
/* square disc: keeps the ring, the 3D object and the connector
   geometry all locked to one circle whatever the cell shape is */
.core__disc { position: relative; height: 100%; aspect-ratio: 1 / 1; max-width: 100%; display: grid; place-items: center; }
.core__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1100ms var(--ease-m) 280ms; }
body.hq-live .core__svg { opacity: 1; }
.c-ring { fill: none; stroke: rgba(146,194,240,0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-ring--amb { stroke: rgba(146,194,240,0.11); }
.c-ring--dash { stroke: rgba(120,200,250,0.3); stroke-dasharray: 2 12; }
.c-arc { fill: none; stroke: rgba(120,210,255,0.52); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.c-marker { stroke: rgba(168,220,255,0.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.c-ticks line { stroke: rgba(146,194,240,0.3); stroke-width: 1; }
.c-ticks line.maj { stroke: rgba(178,224,255,0.62); }
.c-ports rect { fill: #0a1422; stroke: rgba(154,204,248,0.6); stroke-width: 1; transition: fill 280ms var(--ease-m), stroke 280ms var(--ease-m), filter 280ms var(--ease-m); }
.c-ports rect.is-lit { fill: var(--cy); stroke: var(--cy-hi); filter: drop-shadow(0 0 6px rgba(69,210,255,0.9)); }
.core__rot { transform-origin: 240px 240px; transform-box: view-box; }
body.hq-live .core__rot--cw { animation: spin 210s linear infinite; }
body.hq-live .core__rot--ccw { animation: spin 140s linear infinite reverse; }
body.hq-live .core__rot--slow { animation: spin 96s linear infinite; }
body.is-idle .core__rot--cw { animation-duration: 150s; }
body.is-idle .core__rot--slow { animation-duration: 64s; }
@keyframes spin { to { transform: rotate(360deg); } }

.core__face { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 78%; }
.core__object { position: relative; width: 100%; height: 124px; }
.core__gl { display: block; width: 100%; height: 100%; }
.core__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-size: 42px; font-weight: 200; letter-spacing: 0.24em; text-indent: 0.24em; color: #eef6ff; text-shadow: 0 0 26px rgba(138,200,255,0.3); }
.core__fallback[hidden] { display: none; }
.core__sub { margin: 4px 0 0; display: flex; align-items: center; gap: 14px; }
.core__word { font-size: 9.5px; letter-spacing: 0.6em; text-indent: 0.6em; color: var(--ink-2); }
.core__tick { width: 26px; height: 1px; background: var(--edge-2); }
.core__read { display: flex; margin-top: 18px; border: 1px solid var(--edge-1); background: rgba(7,14,24,0.75); }
.core__cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 15px; border-right: 1px solid var(--edge-1); }
.core__cell:last-child { border-right: 0; }
.core__cell span { font-size: 7.5px; letter-spacing: 0.18em; color: var(--ink-4); }
.core__cell b { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.core__cell b.is-hot { color: var(--cy-hi); text-shadow: 0 0 10px var(--cy-glow); }
body.is-idle .core__cell b.is-hot { animation: hotBreathe 6s var(--ease-m) infinite; }
@keyframes hotBreathe { 0%,100%{opacity:1;} 50%{opacity:.62;} }

/* ═══════════════════ EXPANDED PANEL ═══════════════════ */

.xp {
  position: fixed; z-index: 300;
  width: 79vw; height: 76vh;
  left: 50%; top: 50%; margin-left: -39.5vw; margin-top: -38vh;
  transform-origin: 0 0;
  background: var(--panel);
  border: 1px solid rgba(120,205,255,0.55);
  box-shadow: 0 0 0 1px rgba(69,210,255,0.1), 0 30px 90px rgba(0,0,0,0.8), 0 0 70px rgba(40,140,200,0.18);
  overflow: hidden;
  will-change: transform;
}
.xp[hidden] { display: none; }
body.is-simple .xp { width: 88vw; height: 84vh; margin-left: -44vw; margin-top: -42vh; border-color: var(--edge-2); box-shadow: 0 20px 60px rgba(0,0,0,0.7); }

.xp__inner { position: absolute; inset: 0; display: flex; flex-direction: column; transform-origin: 0 0; will-change: transform; }
.xp__bar { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--edge-2); flex: none; background: rgba(17,32,51,0.9); }
.xp__idx { font-size: 8.5px; color: var(--ink-4); }
.xp__name { font-family: var(--sans); font-size: 16px; letter-spacing: 0.18em; color: var(--ink-max); }
.xp__spacer { flex: 1; }
.xp__body { flex: 1; min-height: 0; padding: 15px 17px; display: flex; }
.xp__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; border-top: 1px solid var(--edge-1); flex: none; background: rgba(6,12,21,0.7); }
.xp__note { font-size: 8px; letter-spacing: 0.16em; color: var(--ink-4); }

/* three band panel frame: nothing can leave an empty lower half */
.pf { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 14px; width: 100%; }
.pf__top { padding-bottom: 12px; border-bottom: 1px solid var(--edge-1); }
.pf__main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; min-height: 0; }
.pf__primary, .pf__side { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
/* thin technical scrollbar, only visible if content genuinely overflows */
.pf__primary::-webkit-scrollbar, .pf__side::-webkit-scrollbar { width: 3px; }
.pf__primary::-webkit-scrollbar-track, .pf__side::-webkit-scrollbar-track { background: transparent; }
.pf__primary::-webkit-scrollbar-thumb, .pf__side::-webkit-scrollbar-thumb { background: var(--edge-2); }
.pf__primary, .pf__side { scrollbar-width: thin; scrollbar-color: var(--edge-2) transparent; }
.pf__bottom { border-top: 1px solid var(--edge-1); padding-top: 12px; }

.sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sec--grow { flex: 1; min-height: 0; }
.sec--grow .sec__b { flex: 1; min-height: 0; }
.sec__h { display: flex; align-items: center; gap: 10px; }
.sec__rule { width: 14px; height: 1px; background: var(--cy); flex: none; box-shadow: 0 0 6px var(--cy-glow); }
.sec__t { font-size: 10px; letter-spacing: 0.2em; color: var(--ink-2); }
.sec__a { margin-left: auto; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); }
.sec__probe { margin-left: auto; font-size: 10px; letter-spacing: 0.1em; color: var(--cy-hi); font-variant-numeric: tabular-nums; }
.sec__probe + .sec__a { margin-left: 10px; }
.sec__b { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sec--sub { margin-top: 8px; }
.sec--goal { padding: 13px 14px; border: 1px solid var(--edge-1); background: rgba(12,22,36,0.55); }

.trendhost { flex: 1; min-height: 150px; display: flex; }
.trendhost--mid { min-height: 120px; }
.trend { display: block; width: 100%; height: 100%; }
.trend__line { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend__area { transition: opacity 300ms; }
.trend__hit { fill: transparent; cursor: crosshair; }
.trend__probe { opacity: 0; transition: opacity 140ms; }
.trend.is-probing .trend__probe { opacity: 1; }
.trend__vline { stroke: rgba(168,220,255,0.5); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ax__grid { stroke: rgba(146,194,240,0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ax__base { stroke: var(--edge-1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ax__lab { fill: var(--ink-3); font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }

/* source breakdown rows */
.srows { display: flex; flex-direction: column; gap: 9px; }
.srow { display: flex; flex-direction: column; gap: 5px; padding: 6px 7px; cursor: pointer; border: 1px solid transparent; transition: background 180ms var(--ease-m), border-color 180ms var(--ease-m); }
.srow:hover { background: rgba(30,52,80,0.42); }
.srow.is-on { background: rgba(30,60,92,0.55); border-color: var(--edge-2); }
.srow__h { display: flex; align-items: baseline; gap: 9px; }
.srow__sw { width: 9px; height: 9px; flex: none; align-self: center; }
.srow__k { font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-2); flex: 1; }
.srow__v { font-size: 13px; color: var(--ink-max); font-variant-numeric: tabular-nums; }
.srow__p { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
.srow__bar { position: relative; height: 3px; background: rgba(120,165,210,0.16); overflow: hidden; }
.srow__bar i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 760ms var(--ease); }

/* ledgers and lanes */
.led { display: grid; grid-template-columns: 50px 1fr auto auto 30px; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--edge-amb); }
.led:last-child { border-bottom: 0; }
.led__w { font-size: 9px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.led__t { font-size: 10px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.led__a { font-size: 12px; color: var(--ok); font-variant-numeric: tabular-nums; text-align: right; }
.led__u { font-size: 8.5px; color: var(--ink-4); }

.lane { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.lane__i { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; background: rgba(14,26,42,0.6); border: 1px solid var(--edge-1); min-width: 0; }
.lane__w { font-size: 8.5px; letter-spacing: 0.1em; color: var(--ink-4); }
.lane__t { font-size: 10px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane__a { font-size: 14px; color: var(--ok); font-variant-numeric: tabular-nums; }
.lane__u { font-size: 8px; color: var(--ink-4); }
.lane--rev .lane__i { gap: 3px; }
.lane .chip { align-self: flex-start; }

/* decade */
.pstage { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 11px; }
.pstage__k { font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-2); }
.pstage__bar { position: relative; height: 10px; background: rgba(120,165,210,0.16); overflow: hidden; }
.pstage__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--cy-deep), var(--cy)); transition: width 760ms var(--ease); }
.pstage__bar i[data-tone="ok"] { background: linear-gradient(90deg,#1d7d5a,var(--ok)); }
.pstage__v { font-size: 13px; color: var(--ink-max); text-align: right; font-variant-numeric: tabular-nums; }
.proj { display: flex; flex-direction: column; gap: 6px; }
.proj__h { display: flex; align-items: center; gap: 9px; }
.proj__n { flex: 1; font-size: 10px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj__d { font-size: 9px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.proj__bar { position: relative; height: 4px; background: rgba(120,165,210,0.16); overflow: hidden; }
.proj__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg,var(--cy-deep),var(--cy)); transition: width 760ms var(--ease); }

.act { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--edge-amb); }
.act:last-child { border-bottom: 0; }
.act__w { font-size: 9px; color: var(--ink-3); width: 48px; flex: none; font-variant-numeric: tabular-nums; }
.act__t { flex: 1; font-size: 10px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act__v { font-size: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }
.act__v[data-tone="warn"] { color: var(--warn); }

.nextstrip { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: rgba(14,26,42,0.6); border: 1px solid var(--edge-1); }
.nextstrip__t { flex: 1; font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; color: var(--ink-max); }
.nextstrip__w { font-size: 11px; color: var(--cy-hi); }
.nextstrip__s { font-size: 8.5px; letter-spacing: 0.16em; color: var(--ink-4); }

/* funds */
.goalhead { display: flex; align-items: baseline; gap: 10px; }
.goalhead__c { font-family: var(--sans); font-size: 30px; font-weight: 300; color: var(--ink-max); font-variant-numeric: tabular-nums; }
.goalhead__of { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); }
.goalhead__p { margin-left: auto; font-family: var(--sans); font-size: 22px; font-weight: 300; color: var(--cy-hi); font-variant-numeric: tabular-nums; }
.goalbar { margin-top: 6px; }
.goalbar__track { position: relative; height: 16px; background: rgba(120,165,210,0.16); border: 1px solid var(--edge-1); overflow: hidden; }
.goalbar__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--cy-deep), var(--cy)); box-shadow: 0 0 18px var(--cy-glow); transition: width 950ms var(--ease); }
body.is-simple .goalbar__fill { transition-duration: 220ms; box-shadow: none; }
.goalbar__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(6,12,20,0.75); }
.goalscale { display: flex; justify-content: space-between; margin-top: 5px; font-size: 8.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* tasks */
.task--head { border-bottom-color: var(--edge-1); }
.task--head span { font-size: 8.5px; letter-spacing: 0.16em; color: var(--ink-4); }
.sec__b .task { display: grid; grid-template-columns: 62px auto 82px 1fr auto; }
.task__cat { font-size: 9px; letter-spacing: 0.1em; color: var(--ink-3); }
.task__c2 { font-size: 8.5px; color: var(--ink-4); }
.echonote { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px dashed var(--edge-1); background: rgba(10,18,30,0.5); }
.echonote span:last-child { font-size: 9.5px; line-height: 1.6; color: var(--ink-3); }
.echonote .pip { margin-top: 4px; }

/* ═══════════════════ ECHO ═══════════════════ */

.echo { width: min(430px, 46%); transition: opacity 300ms var(--ease-m); }
.echo__frame { display: flex; align-items: center; gap: 11px; padding: 10px 13px; background: linear-gradient(to bottom, rgba(16,28,45,0.88), rgba(8,14,24,0.74)); border: 1px solid var(--edge-2); clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); box-shadow: 0 14px 34px rgba(0,0,0,0.5); transition: border-color 300ms var(--ease-m), box-shadow 300ms var(--ease-m); }
.echo__glyph { width: 8px; height: 8px; flex: none; border: 1px solid var(--cy); transform: rotate(45deg); box-shadow: 0 0 8px var(--cy-glow); }
.echo__input { flex: 1; background: none; border: 0; outline: 0; font-family: var(--mono); font-size: 11px; font-weight: 300; letter-spacing: 0.14em; color: var(--ink-max); caret-color: var(--cy); }
.echo__input::placeholder { color: var(--ink-3); }
.echo__key { font-size: 7.5px; letter-spacing: 0.14em; color: var(--ink-4); border: 1px solid var(--edge-1); padding: 3px 5px; }
.echo:focus-within .echo__frame { border-color: var(--edge-3); box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 34px rgba(69,210,255,0.18); }

/* ═══════════════════ FILM ═══════════════════ */

.vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse 82% 76% at 50% 46%, transparent 48%, rgba(2,4,7,0.46) 90%, rgba(1,2,4,0.72) 100%); transition: background 380ms var(--ease-m); }
.grain { position: fixed; inset: -50%; z-index: 600; pointer-events: none; opacity: 0.024; mix-blend-mode: overlay; 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 1.1s steps(6,end) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0);} 16%{transform:translate(-3%,2%);} 33%{transform:translate(2%,-3%);} 50%{transform:translate(-2%,-2%);} 66%{transform:translate(3%,1%);} 83%{transform:translate(-1%,3%);} 100%{transform:translate(0,0);} }
.scan { position: fixed; inset: 0; z-index: 601; pointer-events: none; opacity: 0.3; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px); }

/* ═══════════════════ REVEAL ═══════════════════ */

[data-rv] { opacity: 0; transform: translateY(7px); transition: opacity 760ms var(--ease-m) var(--d,0ms), transform 940ms var(--ease) var(--d,0ms); }
body.hq-live [data-rv] { opacity: 1; transform: none; }
[data-rv].env-grid--fine, [data-rv].env-grid--major, [data-rv].ruler--top, [data-rv].ruler--left { transform: none; }
.br { transform: none; opacity: 0; transition: opacity 420ms linear var(--d,0ms); }
.br::before, .br::after { transform: scale(0); transition: transform 620ms var(--ease) var(--d,0ms); }
.br::before { transform-origin: left center; } .br::after { transform-origin: center top; }
.br--tr::before, .br--br::before { transform-origin: right center; }
.br--bl::after, .br--br::after { transform-origin: center bottom; }
body.hq-live .br { opacity: 1; }
body.hq-live .br::before, body.hq-live .br::after { transform: scale(1); }

/* ═══════════════════ REDUCED MOTION ═══════════════════ */

@media (prefers-reduced-motion: reduce) {
  .entry-text, .entry-bloom, .grain, body.hq-live .sweep, body.hq-live .core__rot,
  body.hq-live .status__dot, body.hq-live .alertctl.is-raised .alertctl__pip { animation: none !important; }
  [data-rv], .mod, .br, .br::before, .br::after, .meter i, .xp, .xp__inner { transition-duration: 180ms !important; }
}

/* ═══════════════════ COMPACT VIEWPORTS ═══════════════════ */

@media (max-width: 1560px) {
  .stage { grid-template-columns: 300px minmax(0,1fr) 300px; padding: 26px 26px 18px; column-gap: 16px; }
  .met--lead .met__v { font-size: 25px; }
  .xp { width: 86vw; margin-left: -43vw; }
}
@media (max-width: 1340px) {
  .stage { grid-template-columns: 272px minmax(0,1fr) 272px; }
  .nav__t { font-size: 8px; } .nav__b { padding: 5px 8px; }
  .pf__main { grid-template-columns: 1fr; }
  .lane { grid-auto-flow: row; grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1150px) { .nav { display: none; } }
@media (max-height: 820px) {
  .met--lead .met__v { font-size: 23px; }
  .core__object { height: 100px; }
  .core__read { margin-top: 12px; }
  .xp { height: 84vh; margin-top: -42vh; }
}