/* ═══════════════════════════════════════════════════════════════════════════
   Y3K — y2kdash reimagined: "a 2000s dream of what the future is"
   Holographic glass floating in a deep-space void, wearing Y2K screen jewelry.
   Same palette · same panel positions · engine DOM contract untouched.
   Brief: DESIGN-BRIEF.md · Built 2026-08-21
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── OG names/values preserved (engine + markup reference them) */
:root {
  --hull-0:#020714; --hull-1:#050a18; --hull-2:#0a1222; --hull-3:#101a2e;
  --hull-4:#1f2a40; --hull-5:#344056;
  --glass-0:rgba(4,8,16,0.92); --glass-1:rgba(8,14,26,0.78);
  --rivet:#0f1a2e; --rivet-hi:#344056;
  --navy:#052240;       --navy-hi:#0F3A5E;    --navy-deep:#010D1E;
  --blue-deep:#004b6b;  --blue-hi:#0678A0;    --blue-deeper:#002439;
  --burgundy:#750037;   --burgundy-hi:#A30A52;--burgundy-deep:#3A0018;
  --pink-hot:#fa1593;   --pink-bright:#FF4FAB;--pink-dim:#A0085E;
  --sky:#95deff;        --sky-bright:#C3EAFF; --sky-dim:#4E94B8;
  --cyan:#95deff; --cyan-bright:#C3EAFF; --cyan-dim:#4E94B8; --cyan-deep:#004b6b;
  --amber:#fa1593; --amber-hot:#FF4FAB; --amber-dim:#750037;
  --red:#ef4444; --red-dim:#7f1d1d;
  --green:#10b981; --green-dim:#065f46;
  --ink:#e8f1f7; --ink-soft:#b8c9d5; --ink-dim:#7a8a95; --ink-mute:#4a5560;

  /* Y3K-only tokens */
  --y3k-pulse:0.5;                    /* JS-driven 0..1 sine, feeds glow breath */
  --y3k-glass:rgba(10,18,34,0.44);
  --y3k-glass-hi:rgba(16,26,46,0.55);
  --y3k-edge:rgba(149,222,255,0.22);
  --y3k-edge-hot:rgba(250,21,147,0.35);
  --y3k-blur:18px;
  --y3k-r:14px;
  --font-data:'JetBrains Mono',monospace;
  --font-crt:'VT323',monospace;
  --font-px:'Press Start 2P',monospace;
}

/* ─── BASE ─── */
* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--hull-0); }
body {
  font-family:var(--font-data);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  /* CSS void fallback — WebGL canvas paints over this when available */
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(250,21,147,0.10), transparent 55%),
    radial-gradient(130% 100% at 12% 110%, rgba(6,120,160,0.16), transparent 60%),
    radial-gradient(80% 60% at 50% 45%, rgba(2,36,57,0.35), transparent 70%),
    linear-gradient(180deg,#010511 0%, #020714 45%, #03081a 100%);
  padding:14px clamp(10px,1.6vw,26px) 40px;
  cursor:default;
}
::selection { background:rgba(250,21,147,0.35); color:var(--ink); }

/* void canvas — behind everything */
#y3k-void {
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-1; pointer-events:none;
}

/* scanlines + vignette — Y2K jewelry, now whisper-subtle on glass */
.scanlines {
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
}
.vignette {
  position:fixed; inset:0; z-index:59; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(1,3,10,0.55) 100%);
}

a { color:var(--sky); text-decoration:none; }

/* ═══ HEADER — floating glass command strip ═══ */
.bar {
  position:relative;
  display:grid; grid-template-columns:auto auto 1fr auto auto auto; gap:14px; align-items:center;
  padding:10px 18px;
  background:linear-gradient(180deg, var(--y3k-glass-hi), var(--y3k-glass));
  -webkit-backdrop-filter:blur(var(--y3k-blur)) saturate(1.35);
  backdrop-filter:blur(var(--y3k-blur)) saturate(1.35);
  border:1px solid var(--y3k-edge);
  border-radius:var(--y3k-r);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -12px 30px -18px rgba(250,21,147,0.35) inset,
    0 18px 50px -20px rgba(0,0,0,0.85),
    0 0 0 1px rgba(2,7,20,0.6);
}
.bar::after { /* specular top edge */
  content:''; position:absolute; left:8%; right:8%; top:0; height:1px; border-radius:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  opacity:calc(.35 + .4 * var(--y3k-pulse));
}
.brand { display:flex; align-items:center; gap:12px; }
.sigil {
  width:34px; height:34px; border-radius:10px; position:relative; flex:none;
  background:
    conic-gradient(from 210deg, rgba(250,21,147,.9), rgba(149,222,255,.9), rgba(250,21,147,.9));
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 34%, #000 36%, #000 62%, transparent 64%),
               conic-gradient(#000 0 25%, transparent 25% 50%, #000 50% 75%, transparent 75%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  animation:sigil-spin 14s linear infinite;
  filter:drop-shadow(0 0 8px rgba(250,21,147,.6));
}
@keyframes sigil-spin { to { transform:rotate(360deg); } }
.brand-name {
  font-family:var(--font-px); font-size:15px; letter-spacing:2px; color:var(--ink);
  background:linear-gradient(180deg,var(--sky-bright),var(--sky) 45%,var(--pink-bright));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(149,222,255,.45));
}
.brand > div > div:last-child, .mission-sub { color:var(--ink-dim); }
.mid-strip {
  overflow:hidden; white-space:nowrap; position:relative; height:16px;
  font-family:var(--font-crt); font-size:15px; color:var(--ink-dim);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%, #000 92%, transparent);
          mask:linear-gradient(90deg,transparent,#000 8%, #000 92%, transparent);
}
.monitor-badge {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-px); font-size:8px; letter-spacing:1.5px; color:var(--green);
  padding:7px 12px; border-radius:999px;
  border:1px solid rgba(16,185,129,0.35);
  background:linear-gradient(180deg, rgba(16,185,129,0.14), rgba(16,185,129,0.03));
  box-shadow:0 0 calc(10px + 14px * var(--y3k-pulse)) -4px rgba(16,185,129,0.55),
             0 1px 0 rgba(255,255,255,.08) inset;
  text-shadow:0 0 8px rgba(16,185,129,.8);
}
.monitor-badge .dot {
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green), 0 0 2px #fff inset; animation:led 2.2s ease-in-out infinite;
}
@keyframes led { 0%,100%{opacity:1} 50%{opacity:.35} }
.countdown-badge, .bar-cell {
  display:flex; flex-direction:column; gap:2px; padding:4px 12px;
  border-left:1px solid rgba(149,222,255,0.14);
}
.countdown-badge .k, .bar-cell .k {
  font-family:var(--font-px); font-size:7px; letter-spacing:1.4px; color:var(--ink-mute);
  text-transform:uppercase;
}
.countdown-badge span:last-child, .bar-cell .v {
  font-family:var(--font-crt); font-size:22px; line-height:1; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.bar-cell .v.cyan { color:var(--sky); text-shadow:0 0 12px rgba(149,222,255,.5); }

/* ═══ GRID — same positions as OG ═══ */
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.grid > .panel { min-width:0; }

/* ═══ THE GLASS SLAB ═══ */
.panel {
  position:relative;
  border-radius:var(--y3k-r);
  background:linear-gradient(165deg, var(--y3k-glass-hi) 0%, var(--y3k-glass) 55%, rgba(6,11,24,0.62) 100%);
  -webkit-backdrop-filter:blur(var(--y3k-blur)) saturate(1.3);
  backdrop-filter:blur(var(--y3k-blur)) saturate(1.3);
  border:1px solid var(--y3k-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 0 0 1px rgba(2,7,20,0.55),
    0 24px 60px -24px rgba(0,0,0,0.9),
    0 0 40px -18px var(--tone-glow, rgba(149,222,255,0.25));
  padding:12px 14px 16px;
  transform:perspective(1200px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateZ(0);
  transition:box-shadow .45s ease, border-color .45s ease;
  will-change:transform;
}
.panel:hover {
  border-color:color-mix(in srgb, var(--y3k-edge) 40%, var(--tone-edge, var(--sky)) 60%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 0 0 1px rgba(2,7,20,0.55),
    0 34px 80px -26px rgba(0,0,0,0.95),
    0 0 60px -14px var(--tone-glow, rgba(149,222,255,0.4));
}
/* refraction edge — conic shimmer on the border line */
.panel::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--sheen-a,210deg),
    transparent 0 10%, rgba(149,222,255,.5) 14%, transparent 22% 48%,
    rgba(250,21,147,.45) 55%, transparent 63% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:calc(.25 + .5 * var(--y3k-pulse));
  pointer-events:none;
}
/* specular streak */
.panel::after {
  content:''; position:absolute; left:6%; right:40%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.5; pointer-events:none;
}
/* tone tints — same 5 tones, re-expressed as glow color */
.tone-slate  { --tone-glow:rgba(149,222,255,0.28); --tone-edge:var(--sky); }
.tone-sage   { --tone-glow:rgba(16,185,129,0.25);  --tone-edge:var(--green); }
.tone-peach  { --tone-glow:rgba(250,21,147,0.26);  --tone-edge:var(--pink-hot); }
.tone-sunset { --tone-glow:rgba(255,79,171,0.30);  --tone-edge:var(--pink-bright); }
.tone-cream  { --tone-glow:rgba(195,234,255,0.22); --tone-edge:var(--sky-bright); }

/* rivets → holographic corner nodes */
.rvl, .rvr, .panel > .rvl, .panel > .rvr {
  position:absolute; width:6px; height:6px; border-radius:50%; z-index:5; bottom:8px;
  background:radial-gradient(circle at 35% 30%, #fff, var(--sky) 40%, transparent 75%);
  box-shadow:0 0 6px rgba(149,222,255,.8), 0 0 14px rgba(149,222,255,.3);
  opacity:calc(.5 + .5 * var(--y3k-pulse));
}
.panel > .rvl { left:8px; } .panel > .rvr { right:8px; }

/* ═══ PANEL HEAD — holo chip + jewelry ═══ */
.phead {
  display:flex; align-items:center; gap:10px; margin-bottom:10px; min-height:24px;
  border-bottom:1px solid rgba(149,222,255,0.10); padding-bottom:8px;
}
.phead .tag {
  font-family:var(--font-px); font-size:8px; letter-spacing:1px; color:var(--pink-bright);
  padding:4px 8px; border-radius:6px; flex:none;
  border:1px solid rgba(250,21,147,0.4);
  background:linear-gradient(180deg, rgba(250,21,147,0.16), rgba(117,0,55,0.08));
  box-shadow:0 0 12px -2px rgba(250,21,147,.5), 0 1px 0 rgba(255,255,255,.1) inset;
  text-shadow:0 0 6px rgba(250,21,147,.9);
}
.phead .led {
  width:7px; height:7px; border-radius:50%; flex:none; background:var(--sky);
  box-shadow:0 0 8px var(--sky); animation:led 3s ease-in-out infinite;
}
.phead > span {
  font-family:var(--font-px); font-size:8px; letter-spacing:1.6px; color:var(--ink-soft);
  text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.phead .timestamp {
  margin-left:auto; font-family:var(--font-crt); font-size:15px; color:var(--ink-mute);
  font-variant-numeric:tabular-nums; letter-spacing:.5px; flex:none;
}

/* ═══ [01] HERO ═══ */
.hero-body { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hero-down, .hero-up { position:relative; border-radius:12px; padding:12px 14px 14px; overflow:hidden;
  background:linear-gradient(170deg, rgba(12,20,38,0.5), rgba(5,10,22,0.35));
  border:1px solid rgba(149,222,255,0.13);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.hero-up { border-color:rgba(250,21,147,0.16); }
.fastest-badge {
  position:absolute; top:10px; right:12px; display:flex; align-items:center; gap:6px;
  font-family:var(--font-crt); font-size:14px; color:var(--ink-dim);
}
.fastest-badge .pk-val { color:var(--sky-bright); text-shadow:0 0 10px rgba(149,222,255,.6); }
.hero-up .fastest-badge .pk-val { color:var(--pink-bright); text-shadow:0 0 10px rgba(250,21,147,.6); }
.fastest-badge .stamp { color:var(--ink-mute); }
.trophy { filter:drop-shadow(0 0 4px rgba(255,208,1,.7)); }
.hero-label {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-px); font-size:8px; letter-spacing:1.5px; color:var(--ink-dim);
  text-transform:uppercase;
}
.hero-label .arrow { color:var(--sky); font-size:12px; filter:drop-shadow(0 0 6px rgba(149,222,255,.8)); }
.hero-up .hero-label .arrow { color:var(--pink-hot); filter:drop-shadow(0 0 6px rgba(250,21,147,.8)); }
.hero-label .divider { color:var(--ink-mute); }
.hero-label .status { color:var(--green); text-shadow:0 0 8px rgba(16,185,129,.7); }
.hero-label .status.warn { color:var(--amber-hot); text-shadow:0 0 8px rgba(255,79,171,.7); }
.hero-value-wrap { display:flex; align-items:baseline; gap:10px; margin:2px 0 6px; }
.hero-value {
  font-family:var(--font-crt); font-size:clamp(58px, 5.4vw, 92px); line-height:.9;
  font-variant-numeric:tabular-nums; letter-spacing:-1px;
  background:linear-gradient(180deg, #fff 5%, var(--sky-bright) 35%, var(--sky) 70%, var(--sky-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 calc(14px + 10px * var(--y3k-pulse)) rgba(149,222,255,.5))
         drop-shadow(0 2px 18px rgba(6,120,160,.4));
}
.hero-up .hero-value {
  background:linear-gradient(180deg, #fff 5%, var(--pink-bright) 35%, var(--pink-hot) 70%, var(--pink-dim));
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 calc(14px + 10px * var(--y3k-pulse)) rgba(250,21,147,.45))
         drop-shadow(0 2px 18px rgba(117,0,55,.5));
}
.hero-unit { font-family:var(--font-px); font-size:11px; color:var(--ink-dim); letter-spacing:1px; }
.hero-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px 10px; margin:8px 0 10px; }
.hero-stat { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hero-stat .k { font-family:var(--font-px); font-size:6.5px; letter-spacing:1px; color:var(--ink-mute); text-transform:uppercase; white-space:nowrap; }
.hero-stat .v { font-family:var(--font-crt); font-size:19px; line-height:1.05; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.hero-stat.cyan .v { color:var(--sky); text-shadow:0 0 8px rgba(149,222,255,.45); }
.hero-stat.amber .v { color:var(--pink-bright); text-shadow:0 0 8px rgba(250,21,147,.45); }
.hero-stat.green .v { color:var(--green); text-shadow:0 0 8px rgba(16,185,129,.45); }
.hero-stat.red .v { color:var(--red); text-shadow:0 0 8px rgba(239,68,68,.45); }
.hero-spark-wrap { border-top:1px solid rgba(149,222,255,0.08); padding-top:8px; }
.spark-strip { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.s-tag { font-family:var(--font-crt); font-size:14px; color:var(--ink-dim); }
.s-tag em { font-style:normal; color:var(--sky); }
.hero-up .s-tag em { color:var(--pink-bright); }
.s-range { margin-left:auto; font-family:var(--font-crt); font-size:13px; color:var(--ink-mute); }
.s-range em { font-style:normal; color:var(--ink-soft); }
.s-window-toggle, .chart-window-toggle { display:flex; gap:2px; padding:2px; border-radius:7px;
  background:rgba(2,7,20,0.5); border:1px solid rgba(149,222,255,0.12); }
.s-window-toggle button, .chart-window-toggle button, .s-window-toggle .active, .chart-window-toggle .active {
  font-family:var(--font-px); font-size:6.5px; letter-spacing:.5px; color:var(--ink-mute);
  background:transparent; border:0; border-radius:5px; padding:4px 7px; cursor:pointer;
  transition:all .25s ease;
}
.s-window-toggle .active, .chart-window-toggle .active,
.s-window-toggle button.active, .chart-window-toggle button.active {
  color:var(--hull-0); background:linear-gradient(180deg, var(--sky-bright), var(--sky));
  box-shadow:0 0 12px -2px rgba(149,222,255,.8); text-shadow:none;
}
.scatter-plot { position:relative; height:88px; border-radius:8px; overflow:hidden;
  background:
    linear-gradient(rgba(149,222,255,0.05) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, rgba(149,222,255,0.05) 1px, transparent 1px) 0 0/36px 100%,
    linear-gradient(180deg, rgba(4,9,20,0.6), rgba(2,6,14,0.3));
  border:1px solid rgba(149,222,255,0.08);
}
.scatter-dot { position:absolute; width:3px; height:3px; border-radius:50%; }
.scatter-dot.current { box-shadow:0 0 10px 2px rgba(195,234,255,.8); }

/* scan button — engine states preserved */
.hero-scan-btn {
  margin-left:auto; display:flex; align-items:center; gap:8px; flex:none;
  font-family:var(--font-px); font-size:8px; letter-spacing:1.5px; cursor:pointer;
  color:var(--sky-bright); text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(149,222,255,0.5);
  background:linear-gradient(180deg, rgba(149,222,255,0.18), rgba(6,120,160,0.08));
  box-shadow:0 0 calc(12px + 12px * var(--y3k-pulse)) -4px rgba(149,222,255,.7),
             0 1px 0 rgba(255,255,255,.15) inset;
  text-shadow:0 0 8px rgba(149,222,255,.9);
  transition:all .3s ease;
}
.hero-scan-btn:hover { transform:translateY(-1px);
  box-shadow:0 0 26px -4px rgba(149,222,255,.9), 0 1px 0 rgba(255,255,255,.2) inset; }
.hero-scan-btn .scan-icon { font-size:11px; }
.hero-scan-btn.scanning {
  color:var(--pink-bright); border-color:rgba(250,21,147,0.6);
  background:linear-gradient(180deg, rgba(250,21,147,0.2), rgba(117,0,55,0.08));
  box-shadow:0 0 26px -4px rgba(250,21,147,.8); text-shadow:0 0 8px rgba(250,21,147,.9);
  animation:scan-throb 1.1s ease-in-out infinite;
}
@keyframes scan-throb { 50% { box-shadow:0 0 34px -2px rgba(250,21,147,1); } }
.hero-scan-btn.complete {
  color:#3ef09a; border-color:rgba(16,185,129,0.6);
  background:linear-gradient(180deg, rgba(16,185,129,0.18), rgba(6,95,70,0.08));
  box-shadow:0 0 22px -4px rgba(16,185,129,.8); text-shadow:0 0 8px rgba(16,185,129,.9);
}
.scan-dim { opacity:.28; transition:opacity .5s ease; }

/* ═══ [02] MAP — Leaflet under holo grade ═══ */
.map-panel .pbody { position:relative; }
.map-container { border-radius:10px; overflow:hidden; border:1px solid rgba(149,222,255,0.16);
  box-shadow:0 0 30px -10px rgba(6,120,160,.5) inset, 0 0 24px -8px rgba(149,222,255,.25); }
.leaflet-container { background:var(--hull-1) !important; }
.leaflet-tile { filter:invert(1) hue-rotate(196deg) saturate(0.55) brightness(0.62) contrast(1.12); }
.leaflet-control-attribution { background:rgba(2,7,20,.7)!important; color:var(--ink-mute)!important;
  font-family:var(--font-data)!important; font-size:8px!important; }
.leaflet-control-attribution a { color:var(--sky-dim)!important; }
.map-corner-tag {
  position:absolute; z-index:500; top:10px; left:10px;
  font-family:var(--font-crt); font-size:14px; color:var(--sky-bright);
  padding:4px 10px; border-radius:7px;
  background:rgba(2,7,20,0.66); border:1px solid rgba(149,222,255,0.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 0 14px -4px rgba(149,222,255,.5);
}
.map-corner-tag.amber { left:auto; right:10px; color:var(--pink-bright);
  border-color:rgba(250,21,147,0.35); box-shadow:0 0 14px -4px rgba(250,21,147,.5); }
.map-stats { display:flex; gap:16px; margin-top:8px; flex-wrap:wrap;
  font-family:var(--font-crt); font-size:15px; color:var(--ink-dim); }
.map-stats em, .map-stats strong { font-style:normal; color:var(--ink-soft); }
#y3k-globe { position:absolute; right:12px; bottom:12px; width:120px; height:120px;
  z-index:600; pointer-events:none; opacity:.9;
  filter:drop-shadow(0 0 12px rgba(149,222,255,.35)); }

/* ═══ [03] AIM / network quality ═══ */
.aim-panel .pbody { display:grid; grid-template-columns:auto 1fr 1fr; gap:18px; align-items:start; }
.aim-big { text-align:center; padding:10px 22px; }
.aim-big .grade {
  font-family:var(--font-px); font-size:clamp(40px,4vw,64px); line-height:1;
  background:linear-gradient(180deg,#fff, var(--sky-bright) 40%, var(--pink-bright));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 calc(16px + 12px * var(--y3k-pulse)) rgba(149,222,255,.55));
}
.aim-big .v { font-family:var(--font-crt); font-size:16px; color:var(--ink-dim); margin-top:8px; }
.aim-components { display:grid; gap:7px; }
.aim-components > div { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  font-family:var(--font-crt); font-size:15px; color:var(--ink-soft); }
.aim-panel .glass { border-radius:10px; padding:10px 12px;
  background:linear-gradient(170deg, rgba(12,20,38,0.45), rgba(5,10,22,0.3));
  border:1px solid rgba(149,222,255,0.1); }
.aim-panel .glass strong { color:var(--sky-bright); }
.sys-health { display:grid; gap:6px; font-family:var(--font-crt); font-size:15px; color:var(--ink-soft); }

/* ═══ CHARTS — SVG parity + holo upgrade ═══ */
.chart-wrap { position:relative; }
.chart-wrap svg { display:block; width:100%; height:auto; }
.chart-grid-line { stroke:rgba(149,222,255,0.07); stroke-width:1; stroke-dasharray:3 4; }
.chart-grid-line.solid { stroke:rgba(149,222,255,0.13); stroke-dasharray:none; }
.chart-dot { fill:var(--cyan); opacity:.65; }
.chart-dot.amber { fill:var(--amber); }
.chart-dot.red { fill:var(--red); opacity:1; }
.chart-fill-cyan { fill:url(#grad-cyan); }
.chart-fill-amber { fill:url(#grad-amber); }
.chart-stroke-cyan { stroke:var(--cyan); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(149,222,255,.6)); }
.chart-stroke-amber { stroke:var(--amber); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(250,21,147,.6)); }
.chart-ref-line { stroke:var(--ink-mute); stroke-width:1; stroke-dasharray:4 4; opacity:.35; }
.chart-ref-band { fill:rgba(149,222,255,0.05); }
.chart-ref-label, .chart-axis-label { fill:var(--ink-mute); font-size:9px; font-family:var(--font-data); font-variant-numeric:tabular-nums; }
.chart-now-line { stroke:var(--amber); stroke-width:1.5; stroke-dasharray:3 3; opacity:.75; }
.chart-now-dot { fill:var(--cyan); stroke:#fff; stroke-width:1; }
.chart-now-dot.amber { fill:var(--amber); }
.chart-now-pulse { fill:var(--cyan); opacity:.3; animation:now-pulse 1.6s infinite; }
.chart-now-pulse.amber { fill:var(--amber); }
@keyframes now-pulse { 0%{opacity:.45; r:4} 70%{opacity:0; r:11} 100%{opacity:0; r:11} }
.chart-annotation { fill:var(--ink); font-size:9px; font-family:var(--font-crt); font-variant-numeric:tabular-nums; }
.chart-annotation-peak { fill:var(--green); }
.chart-annotation-trough { fill:var(--red); }
.chart-head-stats { display:flex; gap:14px; align-items:baseline; margin-left:auto;
  font-family:var(--font-crt); font-size:14px; color:var(--ink-dim); flex-wrap:wrap; }
.chart-head-stats .stat-v { color:var(--sky-bright); font-variant-numeric:tabular-nums; text-shadow:0 0 8px rgba(149,222,255,.4); }
.chart-head-stats .unit { color:var(--ink-mute); font-size:11px; }
.chart-legend { display:flex; gap:14px; margin-top:6px; font-family:var(--font-crt); font-size:13px; color:var(--ink-dim); flex-wrap:wrap; }
.chart-legend .box { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

/* packet bars */
.pkt-bars { display:flex; align-items:flex-end; gap:2px; height:46px; }
.pkt-bar { flex:1; min-width:2px; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--sky), rgba(78,148,184,.4));
  box-shadow:0 0 6px -2px rgba(149,222,255,.6); opacity:.75; }
.pkt-bar.lost { background:linear-gradient(180deg, var(--red), rgba(127,29,29,.5));
  opacity:1; box-shadow:0 0 8px -1px rgba(239,68,68,.8); height:100%; }

/* ═══ [08] TELEMETRY ═══ */
.telem-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; }
.telem-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--font-crt); font-size:15px; padding:6px 2px;
  border-bottom:1px solid rgba(149,222,255,0.07); }
.telem-row .k { color:var(--ink-dim); } .telem-row .v { color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.telem-row .v.cyan { color:var(--sky); } .telem-row .v.amber { color:var(--pink-bright); }
.telem-row .v.green { color:var(--green); } .telem-row .v.red { color:var(--red); }

/* ═══ [09] LOG ═══ */
.log-body { font-family:var(--font-crt); font-size:14.5px; line-height:1.5; max-height:210px;
  overflow-y:auto; padding-right:6px; scrollbar-width:thin; scrollbar-color:var(--hull-4) transparent; }
.log-body::-webkit-scrollbar { width:4px; } .log-body::-webkit-scrollbar-thumb { background:var(--hull-4); border-radius:2px; }
.log-line { display:flex; gap:10px; padding:2px 0; border-bottom:1px dotted rgba(149,222,255,0.05); }
.log-line .ts { color:var(--ink-mute); flex:none; font-variant-numeric:tabular-nums; }
.log-line.amber { color:var(--pink-bright); } .log-line.green { color:var(--green); }
.log-line.red { color:var(--red); } .log-line.cyan, .log-line { color:var(--ink-soft); }

/* ═══ [10] SAT / network ═══ */
.sat-notes { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:9px 12px; margin-bottom:8px;
  border-radius:10px; border:1px solid rgba(149,222,255,0.1);
  background:linear-gradient(170deg, rgba(12,20,38,0.4), rgba(5,10,22,0.25));
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
a.sat-notes:hover, .sat-link:hover { border-color:rgba(250,21,147,0.45);
  box-shadow:0 0 24px -8px rgba(250,21,147,.5); transform:translateY(-1px); }
.sat-k { font-family:var(--font-px); font-size:7.5px; letter-spacing:1px; color:var(--sky); align-self:center; white-space:nowrap; }
.sat-v { font-family:var(--font-crt); font-size:14.5px; color:var(--ink-dim); line-height:1.4; }
.sat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.sat-link { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(149,222,255,0.1);
  background:linear-gradient(170deg, rgba(12,20,38,0.4), rgba(5,10,22,0.25));
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease; }

/* ═══ LIFE — boot, flash, flicker, sheen ═══ */
#y3k-boot { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(90% 70% at 50% 45%, #041022, #010511 75%);
  font-family:var(--font-px); font-size:10px; letter-spacing:3px; color:var(--sky);
  text-shadow:0 0 14px rgba(149,222,255,.8);
  transition:opacity .5s ease .15s; }
#y3k-boot.done { opacity:0; pointer-events:none; }
#y3k-boot .b-inner { text-align:center; }
#y3k-boot .b-bar { width:220px; height:2px; margin:16px auto 0; border-radius:2px; overflow:hidden;
  background:rgba(149,222,255,.15); }
#y3k-boot .b-bar i { display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--sky), var(--pink-hot));
  box-shadow:0 0 12px rgba(250,21,147,.8); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.y3k-materialize { animation:materialize .85s cubic-bezier(.16,.84,.3,1) both; }
@keyframes materialize {
  0% { opacity:0; transform:perspective(1200px) translateY(26px) scale(.96); filter:blur(14px) brightness(2.4); }
  60% { filter:blur(2px) brightness(1.25); }
  100% { opacity:1; transform:perspective(1200px) translateY(0) scale(1); filter:blur(0) brightness(1); }
}
.y3k-flash { animation:vflash .6s ease; }
@keyframes vflash { 25% { filter:brightness(1.9) drop-shadow(0 0 10px currentColor); } }
.y3k-flicker { animation:holo-flicker .12s steps(2) 2; }
@keyframes holo-flicker { 50% { opacity:.55; filter:hue-rotate(14deg) brightness(1.5); } }
.y3k-sheen { position:relative; }
.y3k-sheen::after {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:4; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 46%, rgba(149,222,255,.20) 50%, transparent 62%);
  background-size:260% 100%; animation:sheen-sweep 1.4s ease forwards; mix-blend-mode:screen;
}
@keyframes sheen-sweep { from { background-position:120% 0; } to { background-position:-60% 0; } }

/* cursor glow — fine pointers only */
#y3k-cursor { position:fixed; width:340px; height:340px; border-radius:50%; z-index:58;
  pointer-events:none; mix-blend-mode:screen; opacity:.5; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(149,222,255,.14), rgba(250,21,147,.05) 40%, transparent 65%); }
@media (pointer:coarse) { #y3k-cursor { display:none; } }

/* ═══ RESPONSIVE — mirrors OG breakpoints ═══ */
@media (max-width:1100px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid > .panel[style] { grid-column:span 2 !important; grid-row:auto !important; }
  .aim-panel .pbody { grid-template-columns:1fr; }
}
@media (max-width:900px) { :root { --y3k-blur:10px; } }
@media (max-width:720px) {
  .bar { grid-template-columns:auto 1fr auto; gap:8px; padding:8px 12px; }
  .mid-strip, .bar-cell { display:none; }
  .hero-body { grid-template-columns:1fr; }
  .telem-grid { grid-template-columns:1fr; }
  .sat-row { grid-template-columns:1fr; }
}
@media (max-width:540px) {
  .grid { grid-template-columns:1fr; gap:10px; }
  .grid > .panel[style] { grid-column:auto !important; }
  .hero-stats-grid { grid-template-columns:repeat(2,1fr); }
  .sat-notes { grid-template-columns:1fr; gap:4px; }
  .hero-value { font-size:64px; }
  body { padding:8px 8px 30px; }
}
@media (max-width:400px) { .phead > span { font-size:7px; } }

/* ═══ ACCESSIBILITY / MOTION DISCIPLINE ═══ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .panel { transform:none; }
  #y3k-cursor, .scanlines { display:none; }
}

/* ═══ LAYOUT CONTRACT (restored from OG — round 1 fix) ═══ */
.hero { grid-column:1 / span 2; grid-row:1 / span 2; display:flex; flex-direction:column; }
.hero > .hero-body { flex:1; align-items:stretch; min-height:380px; }
.hero-down, .hero-up { display:flex; flex-direction:column; gap:10px; height:100%; padding-top:34px; }
.telem-panel { grid-column:span 2; }
.log-panel { grid-column:span 2; }
.sat-panel { grid-column:span 4; }
.pbody { padding:6px 2px 0; }
.map-container { position:relative; height:260px; }
.map-panel .pbody, .map-panel { position:relative; }
.chart-wrap {
  position:relative; overflow:hidden; border-radius:10px; padding:12px 10px 6px;
  background:linear-gradient(180deg, rgba(4,9,20,0.72), rgba(2,6,14,0.55));
  border:1px solid rgba(149,222,255,0.09);
  box-shadow:0 0 30px -14px rgba(6,120,160,.6) inset;
}
.chart-wrap svg { width:100%; height:220px; display:block; overflow:visible; }
.aim-panel .pbody > *:last-child { grid-column:auto; }
/* responsive spans for CSS-placed panels */
@media (max-width:1100px) {
  .hero { grid-column:1 / span 2 !important; grid-row:auto !important; }
  .hero > .hero-body { min-height:0; }
  .telem-panel, .log-panel, .sat-panel { grid-column:1 / span 2 !important; }
  .map-container { height:220px; }
  .chart-wrap svg { height:180px; }
}
@media (max-width:540px) {
  .hero, .telem-panel, .log-panel, .sat-panel { grid-column:auto !important; }
  .hero-body { grid-template-columns:1fr !important; min-height:0 !important; gap:8px; }
  .map-container { height:200px; }
  .chart-wrap svg { height:160px; }
  #y3k-globe { width:84px; height:84px; }
}

/* ═══ ROUND 2 — stacking, dots, sigil, overflow ═══ */
/* void canvas must sit ABOVE html's fallback gradient but BELOW body content:
   html carries the fallback; body is transparent; canvas z:-1 behind body content. */
html {
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(250,21,147,0.10), transparent 55%),
    radial-gradient(130% 100% at 12% 110%, rgba(6,120,160,0.16), transparent 60%),
    linear-gradient(180deg,#010511 0%, #020714 45%, #03081a 100%);
}
body { background:transparent; }

/* scatter dots — OG defaults restored (engine inline writes still win) */
.scatter-dot { width:5px; height:5px; transform:translate(-50%,-50%); opacity:.65;
  background:var(--cyan); box-shadow:0 0 4px var(--cyan-dim); }
.hero-up .scatter-dot { background:var(--amber); box-shadow:0 0 4px var(--amber-dim); }
.scatter-dot.current { width:9px; height:9px; background:var(--cyan-bright); opacity:1; z-index:3;
  box-shadow:0 0 10px var(--cyan), 0 0 18px var(--cyan-dim); animation:dot-breathe 5s ease-in-out infinite; }
.hero-up .scatter-dot.current { background:#ffd9ec; box-shadow:0 0 10px var(--amber), 0 0 18px var(--amber-dim); }
@keyframes dot-breathe { 50% { filter:brightness(1.5); } }
.scatter-dot.scan-dot { width:5px; height:5px; z-index:3;
  box-shadow:0 0 6px currentColor, 0 0 12px currentColor; }
.hero-down .scatter-dot.scan-dot { background:var(--cyan-bright); color:var(--cyan-bright); }
.hero-up .scatter-dot.scan-dot { background:var(--pink-bright); color:var(--pink-bright); }
.scatter-dot.scan-dim { opacity:.15; }

/* sigil — mask-composite unreliable; rebuild as layered rings */
.sigil { background:none; -webkit-mask:none; mask:none; animation:none; position:relative; }
.sigil::before, .sigil::after { content:''; position:absolute; inset:0; border-radius:50%; }
.sigil::before { border:2px solid transparent;
  background:conic-gradient(from 0deg, var(--pink-hot), var(--sky), var(--pink-hot)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sigil-spin 9s linear infinite;
  filter:drop-shadow(0 0 6px rgba(250,21,147,.7)); }
.sigil::after { inset:9px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--sky) 45%, var(--blue-hi) 80%);
  box-shadow:0 0 12px rgba(149,222,255,.8); animation:led 3.4s ease-in-out infinite; }

/* hero stat labels — never collide */
.hero-stat .k { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.hero-stats-grid { gap:7px 8px; }

/* map — hide dead single tile, let the vector map own the screen */
.leaflet-tile { display:none; }
.leaflet-container { background:linear-gradient(180deg,#061224,#04101e) !important; }
.map-container::after { /* holo grid under the vectors */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(rgba(149,222,255,0.05) 1px, transparent 1px) 0 0/100% 26px,
    linear-gradient(90deg, rgba(149,222,255,0.05) 1px, transparent 1px) 0 0/26px 100%;
}

/* ═══ ROUND 3 — the real map root + holo tile grade + void intensity ═══ */
#leaflet-map { position:absolute; inset:0; z-index:0; }
.leaflet-tile { display:block; image-rendering:pixelated;
  filter:brightness(1.05) contrast(1.25) saturate(0.35) hue-rotate(165deg); }
.map-container::after { z-index:400; mix-blend-mode:screen; }
.map-container::before { /* holo wash over the tiles */
  content:''; position:absolute; inset:0; z-index:401; pointer-events:none;
  background:
    radial-gradient(110% 90% at 80% 10%, rgba(250,21,147,0.10), transparent 55%),
    radial-gradient(120% 100% at 10% 100%, rgba(6,120,160,0.18), transparent 60%);
  mix-blend-mode:screen;
}
#y3k-globe { z-index:650; opacity:1; }

/* ═══ ROUND 4 — aim hierarchy, header grid, chart spacing, globe pop ═══ */
/* [03] the AIM readout: .v is the hero numeral, .grade is the verdict tag */
.aim-big { display:flex; flex-direction:column; gap:8px; align-items:flex-start; text-align:left; padding:14px 16px; }
.aim-big .k { font-family:var(--font-px); font-size:7px; letter-spacing:1.6px; color:var(--ink-dim); }
.aim-big .v {
  font-family:var(--font-crt); font-size:clamp(64px,4.6vw,96px); line-height:.9;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 5%, var(--sky-bright) 40%, var(--pink-bright) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 calc(14px + 10px * var(--y3k-pulse)) rgba(149,222,255,.5));
  margin:0;
}
.aim-big .grade {
  font-family:var(--font-px); font-size:9px; letter-spacing:1.5px; line-height:1.6;
  color:var(--pink-bright); background:none; -webkit-text-fill-color:currentColor;
  padding:5px 10px; border-radius:6px; border:1px solid rgba(250,21,147,.4);
  background:linear-gradient(180deg, rgba(250,21,147,.14), rgba(117,0,55,.06));
  box-shadow:0 0 14px -4px rgba(250,21,147,.6); text-shadow:0 0 8px rgba(250,21,147,.8);
  filter:none; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
/* header grid — 6 children: brand · ticker(flex) · badge · countdown · cell · cell */
.bar { grid-template-columns:auto 1fr auto auto auto auto; }
.mid-strip { font-size:14px; letter-spacing:.5px; opacity:.85; }
/* chart head stats breathing room */
.chart-head-stats { gap:16px; row-gap:4px; }
.chart-head-stats .stat-v { margin-left:5px; }
.chart-head-stats .unit { margin-left:2px; }
/* deeper glass on chart-panel pheads so titles never crowd */
.chart-panel .phead .timestamp { max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#y3k-globe { width:150px; height:150px; }

/* ═══ ROUND 5 ═══ */
/* AIM numeral — win the cascade explicitly, stay giant even as a placeholder */
.aim-panel .aim-big .v {
  font-family:var(--font-crt); font-size:clamp(64px,4.6vw,96px); line-height:.9;
  color:transparent; margin:0; min-height:.9em;
  background:linear-gradient(180deg,#fff 5%, var(--sky-bright) 40%, var(--pink-bright) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(149,222,255,.5));
}
/* panel titles never truncate — timestamps yield instead */
.phead > span:not(.tag):not(.timestamp) { flex:none; overflow:visible; }
.phead .timestamp { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.chart-panel .phead .timestamp { max-width:none; }
/* globe locator ring (visual anchor — subtle) */
#y3k-globe { outline:1px solid rgba(149,222,255,.18); outline-offset:4px; border-radius:50%;
  background:radial-gradient(circle, rgba(2,10,24,.35), transparent 70%); }

/* ═══ ROUND 6 — final nits ═══ */
.aim-big .k { margin-bottom:6px; line-height:1.5; }
.aim-panel .aim-big .v { margin-top:2px; }
#y3k-globe { outline-color:rgba(149,222,255,.12); }

/* [03]'s pbody carries an inline 3-col grid — must collapse on phones (!important beats inline) */
@media (max-width:720px) {
  .aim-panel .pbody { grid-template-columns:1fr !important; gap:10px !important; }
  .aim-big .v { font-size:64px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 7 — STACK A + CHROME: Michroma · Doto · Silkscreen · Azeret Mono
   "chrome plated hi-fi cyberwave" — liquid-metal rims, hex bolts, cranked 3D
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --font-data:'Azeret Mono',monospace;      /* the workhorse — everywhere */
  --font-crt:'Doto',monospace;              /* VFD readout numerals */
  --font-px:'Silkscreen',monospace;         /* micro pixel jewelry */
  --font-display:'Michroma',sans-serif;     /* structural titles */
  --chrome:conic-gradient(from 130deg,
    #39414f 0%, #cdd6e4 6%, #f8fbff 9%, #8b95a6 14%, #2a3140 22%,
    rgba(149,222,255,.20) 26%, #626c7e 30%, #e6ecf6 38%, #566072 46%,
    rgba(250,21,147,.13) 50%, #454e5e 54%, #d6deea 62%, #f4f8ff 66%, #6a7484 74%,
    #232936 82%, #9aa4b6 90%, #e9eff9 95%, #39414f 100%);
}

/* ── THE CHROME SLAB — rim via border-box trick, seam + hard slash ── */
.panel{
  border:3px solid transparent; border-radius:11px;
  background:
    linear-gradient(165deg, rgba(13,21,39,.88) 0%, rgba(6,11,24,.94) 60%, rgba(3,7,16,.97) 100%) padding-box,
    var(--chrome) border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.7) inset,
    0 26px 60px -22px rgba(0,0,0,.95),
    0 0 46px -16px var(--tone-glow, rgba(149,222,255,.3)),
    0 40px 80px -34px rgba(250,21,147,.22);
  transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateZ(0);
}
.panel:hover{
  transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-3px) scale(1.008);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.7) inset,
    0 42px 90px -26px rgba(0,0,0,1),
    0 0 70px -12px var(--tone-glow, rgba(149,222,255,.5)),
    0 54px 110px -38px rgba(250,21,147,.3);
}
.panel::before{ /* machined seam between rim and glass well */
  content:''; position:absolute; inset:0; border-radius:8px; padding:0;
  background:none; -webkit-mask:none; mask:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.85), 0 0 0 2px rgba(255,255,255,.07),
             0 12px 30px rgba(0,0,0,.55) inset;
  opacity:1; pointer-events:none;
}
.panel::after{ /* hard diagonal specular slash on the rim */
  content:''; position:absolute; inset:-3px; border-radius:11px; height:auto;
  background:linear-gradient(118deg, transparent 20%, rgba(255,255,255,.9) 21.5%, rgba(255,255,255,0) 24%,
             transparent 58%, rgba(255,255,255,.45) 59%, transparent 60.5%);
  mix-blend-mode:screen; opacity:calc(.35 + .45 * var(--y3k-pulse));
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:3px;
  left:0; right:0; top:0; pointer-events:none;
}
/* chrome hex bolts — four corners (bottom pair = existing .rvl/.rvr markup) */
.panel > .rvl, .panel > .rvr, .phead::before, .phead::after{
  content:''; position:absolute; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, #b9c3d3 30%, #4c5566 62%, #171c26 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.55), 0 0 7px rgba(149,222,255,.3);
  opacity:1; z-index:6;
}
.panel > .rvl{left:7px; bottom:7px} .panel > .rvr{right:7px; bottom:7px}
.phead::before{top:7px; left:7px} .phead::after{top:7px; right:7px}
.phead{position:static;}  /* bolts anchor to the transformed .panel box */

/* ── TYPE — structural titles: Michroma ── */
.brand-name{font-family:var(--font-display); font-size:14px; letter-spacing:3px;}
.phead > span:not(.tag):not(.timestamp){font-family:var(--font-display); font-size:9px; letter-spacing:2px;}
.hero-label{font-family:var(--font-display); font-size:8px; letter-spacing:2px;}
#y3k-boot{font-family:var(--font-display);}
.monitor-badge{font-family:var(--font-px); font-size:9px;}

/* ── TYPE — VFD numerals: Doto (short numeric readouts ONLY) ── */
.hero-value{font-family:var(--font-crt); font-weight:900; font-size:clamp(50px,4.6vw,80px); letter-spacing:0;}
.aim-panel .aim-big .v{font-family:var(--font-crt); font-weight:900; font-size:clamp(56px,4vw,84px);}
.hero-stat .v{font-family:var(--font-crt); font-weight:700; font-size:17px;}
.countdown-badge span:last-child, .bar-cell .v{font-family:var(--font-crt); font-weight:700; font-size:19px;}
.phead .timestamp{font-family:var(--font-data); font-weight:300; font-size:10.5px; letter-spacing:.3px;}
.chart-head-stats .stat-v{font-family:var(--font-crt); font-weight:700; font-size:15px;}
.telem-row .v{font-family:var(--font-crt); font-weight:700; font-size:15px;}
.fastest-badge .pk-val{font-family:var(--font-crt); font-weight:700;}
.map-corner-tag{font-family:var(--font-px); font-size:8.5px; letter-spacing:.5px;}

/* ── TYPE — the workhorse: Azeret Mono (all long-form + labels-with-words) ── */
.log-body,.log-line{font-family:var(--font-data); font-weight:300; font-size:11.5px;}
.sat-v{font-family:var(--font-data); font-weight:300; font-size:11.5px;}
.map-stats{font-family:var(--font-data); font-weight:300; font-size:11.5px;}
.aim-components > div{font-family:var(--font-data); font-weight:400; font-size:11.5px;}
.sys-health{font-family:var(--font-data); font-weight:300; font-size:11.5px;}
.aim-big .v + .grade{margin-top:2px;}
.aim-panel .glass{font-family:var(--font-data);}
.telem-row .k{font-family:var(--font-data); font-weight:300; font-size:11.5px;}
.s-tag,.s-range{font-family:var(--font-data); font-weight:300; font-size:10.5px;}
.chart-head-stats{font-family:var(--font-data); font-weight:300; font-size:10.5px;}
.chart-legend{font-family:var(--font-data); font-weight:300; font-size:10.5px;}
.chart-annotation{font-family:var(--font-data); font-size:8.5px;}
.chart-ref-label,.chart-axis-label{font-family:var(--font-data); font-size:8px;}
.fastest-badge{font-family:var(--font-data); font-weight:300; font-size:10.5px;}
.mid-strip{font-family:var(--font-data); font-weight:300; font-size:10.5px;}
.aim-big .v{margin:0}

/* ── chrome-plated interactive elements ── */
.s-window-toggle .active, .chart-window-toggle .active,
.s-window-toggle button.active, .chart-window-toggle button.active{
  color:#0a1020;
  background:linear-gradient(180deg,#f2f7ff,#9aa8bc 55%,#cfd9e8);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 2px 8px rgba(0,0,0,.6), 0 0 10px -2px rgba(149,222,255,.6);
  text-shadow:none;
}
.hero-scan-btn{
  border:2px solid transparent;
  background:
    linear-gradient(180deg, rgba(20,10,22,.95), rgba(30,6,24,.92)) padding-box,
    var(--chrome) border-box;
  color:var(--pink-bright); text-shadow:0 0 10px rgba(250,21,147,.9);
  box-shadow:0 2px 8px rgba(0,0,0,.7), 0 0 calc(14px + 12px * var(--y3k-pulse)) -4px rgba(250,21,147,.7);
}
.hero-scan-btn.scanning{border-color:transparent;}
.phead .tag{font-family:var(--font-px); font-size:8.5px;}
.hero-stat .k,.s-window-toggle button,.chart-window-toggle button,
.s-window-toggle .active,.chart-window-toggle .active,.sat-k,
.countdown-badge .k,.bar-cell .k,.aim-big .k,.hero-unit,.chart-head-stats .unit,
.oc-eyebrow{font-family:var(--font-px);}
.hero-stat .k{font-size:7.5px; letter-spacing:.5px;}
.aim-big .k{font-size:8px;}
.hero-unit{font-size:9px;}

/* sub-cards get a thin machined edge (not full chrome — hierarchy) */
.hero-down,.hero-up,.chart-wrap,.aim-panel .glass,.sat-notes,.sat-link{
  border:1px solid rgba(154,164,182,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 8px 22px -12px rgba(0,0,0,.7);
}

/* ═══ ROUND 8 — head discipline + presence ═══ */
.phead{gap:9px;}
.phead > span:not(.tag):not(.timestamp){
  color:var(--ink); font-size:9.5px; flex:0 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 0 10px rgba(149,222,255,.25);
}
.phead .timestamp{flex:0 1 auto; min-width:40px; text-align:right; margin-left:auto;}
.hero-scan-btn{padding:9px 16px; font-size:9px; gap:9px;}
.hero-scan-btn .scan-icon{font-size:12px;}
.aim-big .k{font-size:7px; letter-spacing:1px;}
/* Doto placeholder dashes can look like plus signs at 900 — soften pre-data state */
.hero-value:empty::before{content:'—';}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 9 — scatter fills the plane · map typography · glyph fallbacks · fills
   ═══════════════════════════════════════════════════════════════════════════ */
/* glyph-safe font tokens: Σ σ Δ ▲ ▼ → fall through to Azeret instead of tofu/wrong-font */
:root{
  --font-px:'Silkscreen','Azeret Mono',monospace;
  --font-crt:'Doto','Azeret Mono',monospace;
  --font-display:'Michroma','Azeret Mono',sans-serif;
}

/* 1 ▸ scatter plots consume ALL remaining card height (engine dots are %-positioned) */
.hero-down, .hero-up { display:flex; flex-direction:column; }
.hero-spark-wrap { flex:1; display:flex; flex-direction:column; min-height:0; }
.scatter-plot { flex:1; height:auto; min-height:140px; }

/* 2 ▸ map typography + markers — the "weird ugly" default font, exterminated */
.map-popup-label {
  font-family:var(--font-px) !important; font-size:8px; letter-spacing:1px;
  color:var(--sky-bright); text-transform:uppercase; line-height:1.55;
  text-shadow:0 0 4px #010a14, 0 0 4px #010a14, 0 0 4px #010a14, 0 0 10px rgba(149,222,255,.55);
  white-space:nowrap; pointer-events:none; background:none; border:none;
}
.y2k-marker { border-radius:50%; pointer-events:none; }
.y2k-marker.cyan {
  background:radial-gradient(circle at 38% 32%, #fff, var(--sky) 45%, rgba(78,148,184,.0) 78%);
  box-shadow:0 0 10px var(--sky), 0 0 20px rgba(149,222,255,.4), 0 0 0 1px rgba(195,234,255,.5) inset;
}
.y2k-marker.orange {
  background:radial-gradient(circle at 38% 32%, #fff, var(--pink-hot) 45%, rgba(117,0,55,.0) 78%);
  box-shadow:0 0 10px var(--pink-hot), 0 0 20px rgba(250,21,147,.4), 0 0 0 1px rgba(255,79,171,.5) inset;
}

/* 3 ▸ packet panel: bars own the plane */
.pkt-bars { height:120px; }

/* 4 ▸ log breathes deeper */
.log-body { max-height:280px; }

/* 5 ▸ boot gets plated */
#y3k-boot .b-bar {
  width:260px; height:8px; padding:2px; border-radius:5px;
  border:2px solid transparent;
  background:
    linear-gradient(180deg,#0a1020,#050a14) padding-box,
    var(--chrome) border-box;
  box-shadow:0 2px 10px rgba(0,0,0,.8);
}
#y3k-boot .b-bar i { border-radius:3px; }

/* 6 ▸ chrome breathing room */
.grid { gap:16px; }

/* 7 ▸ chart svgs flex-fill their panels so charts also own their plane */
.chart-panel { display:flex; flex-direction:column; }
.chart-panel .chart-wrap { flex:1; display:flex; flex-direction:column; }
.chart-panel .chart-wrap svg { flex:1; height:auto; min-height:200px; }

/* ═══ ROUND 10 — title priority in chart pheads ═══ */
.chart-panel .phead > span:not(.tag):not(.timestamp){flex:none; overflow:visible; max-width:none;}
.chart-panel .phead .timestamp{flex:0 10 auto; min-width:0;}
/* aim column stretches to its row */
.aim-panel .pbody{align-items:stretch;}

/* ═══ ROUND 11 — DOWNLOAD/UPLOAD and SESSION PEAK share one line + one voice ═══ */
.hero-down, .hero-up { padding-top:14px; }
.fastest-badge {
  position:absolute; top:14px; right:14px;
  display:flex; gap:7px; align-items:baseline;
  font-family:var(--font-display); font-size:8px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--ink-dim);
}
.fastest-badge .pk-val { font-family:var(--font-crt); font-weight:700; font-size:13px; }
.fastest-badge .stamp { font-family:var(--font-data); font-weight:300; font-size:9px; letter-spacing:.3px; }
.hero-label { margin-top:0; min-height:14px; align-items:baseline; }

/* ═══ ROUND 11b — same line without collision ═══ */
.fastest-badge .stamp { display:none; }         /* UTC stamp is redundant — phead owns time */
.fastest-badge { gap:6px; font-size:7.5px; letter-spacing:1.2px; max-width:46%;
  overflow:hidden; white-space:nowrap; }
.fastest-badge .pk-val { font-size:12px; }
.hero-label { margin-right:47%; overflow:hidden; white-space:nowrap; }
@media (max-width:720px){ .hero-label{margin-right:150px;} .fastest-badge{max-width:140px;} }
/* round 11c — hard partition: label owns left 52%, badge owns right 46% */
.hero-label { margin-right:0; max-width:52%; }
.fastest-badge { max-width:45%; }
/* round 11d */
.hero-label { max-width:50%; }
.fastest-badge { max-width:43%; }
/* round 11e — label fits its partition */
.hero-label { font-size:7.5px; letter-spacing:1px; gap:6px; }
/* round 11f */
.hero-label { max-width:54%; }
.fastest-badge { max-width:41%; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 12 — today's-tech layer: Houdini flowing chrome · scroll-driven rise ·
   linear() springs · scan cinematics · Doto weight-roll · targeting reticle
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FLOWING CHROME — @property makes the conic angle animatable: the specular
     band physically travels around the rim like light on real plated metal ── */
@property --rim-a { syntax:'<angle>'; initial-value:130deg; inherits:false; }
.panel{
  background:
    linear-gradient(165deg, rgba(13,21,39,.88) 0%, rgba(6,11,24,.94) 60%, rgba(3,7,16,.97) 100%) padding-box,
    conic-gradient(from var(--rim-a),
      #39414f 0%, #cdd6e4 6%, #f8fbff 9%, #8b95a6 14%, #2a3140 22%,
      rgba(149,222,255,.20) 26%, #626c7e 30%, #e6ecf6 38%, #566072 46%,
      rgba(250,21,147,.13) 50%, #454e5e 54%, #d6deea 62%, #f4f8ff 66%, #6a7484 74%,
      #232936 82%, #9aa4b6 90%, #e9eff9 95%, #39414f 100%) border-box;
  animation:rim-flow 22s linear infinite;
}
@keyframes rim-flow { to { --rim-a:490deg; } }
.y3k-scan .panel{ animation-duration:7s; }          /* metal races during a scan */

/* ── SPRING PHYSICS — real damped-oscillator easing on hover lift ── */
.panel{
  translate:0 0;
  transition:
    translate .55s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%,
      1.099 36.9%, 1.12 41%, 1.116 48.1%, 1.002 69.9%, 0.986 76.2%, 0.998 100%),
    box-shadow .5s ease, border-color .45s ease;
  transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateZ(0);
}
.panel:hover{ translate:0 -4px; transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateZ(0); }

/* ── SCROLL-DRIVEN RISE — panels surface from the void as you scroll (zero JS) ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel{
      animation:rim-flow 22s linear infinite, panel-surface linear both;
      animation-timeline:auto, view();
      animation-range:normal, entry 0% entry 55%;
    }
    .y3k-scan .panel{ animation-duration:7s, auto; }
    @keyframes panel-surface{
      from{ opacity:.25; scale:.975; filter:brightness(1.7) blur(5px); }
      to{ opacity:1; scale:1; filter:brightness(1) blur(0); }
    }
  }
}

/* ── SCAN CINEMATICS — the whole console changes state during a real test ── */
.y3k-scan .panel{ --tone-glow:rgba(250,21,147,0.38); }
.y3k-scan .phead .led{ background:var(--pink-hot); box-shadow:0 0 10px var(--pink-hot); animation-duration:.7s; }
.y3k-scan .scanlines{ opacity:.75; }
.y3k-scan .scatter-plot::after{
  content:''; position:absolute; top:0; bottom:0; width:52px; left:-60px;
  background:linear-gradient(90deg, transparent, rgba(250,21,147,.16) 45%, rgba(255,255,255,.35) 50%, rgba(250,21,147,.16) 55%, transparent);
  animation:scan-beam 1.15s cubic-bezier(.4,0,.6,1) infinite; mix-blend-mode:screen;
}
@keyframes scan-beam{ to{ left:calc(100% + 60px); } }
.y3k-scan .hero-value{ filter:drop-shadow(0 0 22px rgba(250,21,147,.55)) drop-shadow(0 2px 18px rgba(117,0,55,.5)); }

/* ── DOTO WEIGHT-ROLL — variable-font mass surge when a value updates ── */
.hero-value.y3k-flash, .stat-v.y3k-flash{
  animation:vflash .6s ease, doto-roll .6s cubic-bezier(.2,.7,.3,1);
}
@keyframes doto-roll{ 0%{ font-variation-settings:'wght' 300; } 55%{ font-variation-settings:'wght' 900; } 100%{ font-variation-settings:'wght' 900; } }

/* ── TARGETING RETICLE — rotating bracket ring that locks on interactives ── */
#y3k-cursor .ret{
  position:absolute; inset:50%; width:34px; height:34px; translate:-50% -50%;
  border-radius:50%; opacity:.55;
  background:
    conic-gradient(from 0deg, var(--sky) 0 12%, transparent 12% 25%, var(--sky) 25% 37%, transparent 37% 50%,
                   var(--sky) 50% 62%, transparent 62% 75%, var(--sky) 75% 87%, transparent 87%);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%, #000 74%, transparent 76%);
          mask:radial-gradient(circle, transparent 58%, #000 60%, #000 74%, transparent 76%);
  animation:ret-spin 6s linear infinite;
  transition:scale .28s linear(0,1.28 40%,0.92 65%,1 100%), opacity .2s ease, filter .2s ease;
}
@keyframes ret-spin{ to{ rotate:360deg; } }
#y3k-cursor.lock .ret{
  scale:.62; opacity:1; animation-duration:1.6s;
  filter:hue-rotate(210deg) saturate(2);      /* sky → hot pink lock state */
}

/* governor may halve void resolution — keep the CSS fallback rich for qual-0 GPUs */
@media (prefers-reduced-motion: reduce){ #y3k-cursor .ret{ display:none; } }