:root{
  /* ---- BRAND TOKENS (cyan / sky / ice / pink / magenta softened & desaturated) ---- */
/*  --c-ink:#05031a; --c-navy:#0a0a52; --c-indigo:#261456; --c-slate:#161c25;
  --c-purple:#5a3a96; --c-violet:#9a5cb8; --c-magenta:#a870c4;
  --c-pink:#d283b4; --c-softpink:#dcaacc;
  --c-cyan:#5fa6c4; --c-sky:#8fc3d6; --c-ice:#c8e2ec;
  --c-lav:#f0edfc; --c-mute:#6b5b95;
  --font:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;*/
  --c-ink:#05031a; --c-navy:#0a0a52; --c-indigo:#261456; --c-slate:#161c25;
  --c-purple:#5a1fc2; --c-violet:#c42cf0; --c-magenta:#d83cf5;
  --c-pink:#ff5cc8; --c-softpink:#f0a0dc;
  --c-cyan:#22c0ff; --c-sky:#82d8f8; --c-ice:#b9ecff;
  --c-lav:#f0edfc; --c-mute:#6b5b95;
  --font:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}

/* Height follows width (1600:560) but is held inside 500-600px */
.hud {
  position:relative;
  width:100%;
  height: clamp(500px, 35vw, 480px);
  overflow: hidden;
  /*margin-top: 40px;
  background: #ffffff17;
  border: 1px solid #a9efff63;
  border-radius: 20px;*/
  margin-top: 64px;
  border: 1px solid #cbd3df;
  border-color: #99b9e7 !important;
  border-radius: 18px !important;
  background: #2a10201f;;
  box-shadow: 0 30px 72px rgba(25, 39, 86, .18) !important;
}
.evidence-caveat.disclaimer {
  margin-top: 40px;
}
.hud svg {
  position:absolute;
  inset:0;
  width:98%;
  height:100%;
  display:block;
  shape-rendering:
  geometricPrecision;
  margin-left: 1%;
  /*opacity: .75;*/
}
#gBg stop { stop-opacity: 0 !important; }



.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* text */
.t{font-family:var(--font);fill:var(--c-ice);font-size:12px;letter-spacing:.06em;paint-order:stroke;stroke:none;stroke-width:3px;stroke-linejoin:round;stroke-opacity:.85}
.t-s{font-size:10px}.t-u{font-size:8px;opacity:.7;font-weight:400;letter-spacing:.05em}
.t-l{font-size:22px;letter-spacing:.14em}.t-xl{font-size:26px;letter-spacing:.1em}
.ti{fill:var(--c-ice)}.tc{fill:var(--c-cyan)}.tp{fill:var(--c-pink)}.tv{fill:var(--c-magenta)}
.tk{fill:var(--c-ink);font-weight:700;stroke:none}.td{opacity:.6}

/* lines */
.ln,.ln-s,.ln-p,.ln-m,.ln-d,.ln-g,.ln-b{fill:none;stroke-width:.75}
.ln{stroke:var(--c-cyan);stroke-opacity:.55}.ln-s{stroke:var(--c-sky);stroke-opacity:.45}.ln-p{stroke:var(--c-pink);stroke-opacity:.7}.ln-m{stroke:var(--c-magenta);stroke-opacity:.6}
.ln-d{stroke:var(--c-cyan);stroke-opacity:.22;stroke-width:.6}
.ln-g{stroke:var(--c-cyan);stroke-opacity:.1;stroke-width:.5}
.ln-b{stroke:var(--c-ice);stroke-width:2;stroke-opacity:.85}
.f-c{fill:var(--c-cyan)}.f-p{fill:var(--c-pink)}.f-m{fill:var(--c-magenta)}
.pbg{fill:var(--c-navy);fill-opacity:.4;stroke:var(--c-cyan);stroke-opacity:.32;stroke-width:.8}
.tab{fill:var(--c-cyan)}
.chip-c,.chip-m,.chip-p{fill-opacity:.08;stroke-width:.8}
.chip-c{fill:var(--c-cyan);stroke:var(--c-cyan)}
.chip-m{fill:var(--c-magenta);stroke:var(--c-magenta)}
.chip-p{fill:var(--c-pink);stroke:var(--c-pink)}
.glow{filter:url(#fGlow)}
.ac *{vector-effect:non-scaling-stroke}

.ad1,.ad2,.ad3,.ad4{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ad1{stroke:var(--c-ice);stroke-opacity:.85;stroke-width:.9}
.ad2{stroke:var(--c-sky);stroke-opacity:.7;stroke-width:.8}
.ad3{stroke:var(--c-cyan);stroke-opacity:.5;stroke-width:.7}
.ad4{stroke:var(--c-cyan);stroke-opacity:.22;stroke-width:.55}
.eng .ad1{stroke:var(--c-cyan);stroke-opacity:.9}
.eng .ad2{stroke:var(--c-cyan);stroke-opacity:.75}
.eng .ad3{stroke:var(--c-cyan);stroke-opacity:.6}
.eng .ad4{stroke:var(--c-cyan);stroke-opacity:.4}

/* silhouettes */
.sil{fill:var(--c-cyan);fill-opacity:.12;stroke:var(--c-ice);stroke-width:.8;vector-effect:non-scaling-stroke}
.row .sil{fill:var(--c-purple);fill-opacity:.5;stroke:var(--c-sky);stroke-opacity:.45;stroke-width:.8}
.row.sel .sil{fill:var(--c-cyan);fill-opacity:.75;stroke:var(--c-ice);stroke-opacity:.9}

/* roster interaction */
.row{cursor:pointer;outline:none}
.row .rowbg{fill:var(--c-ink);fill-opacity:.3;stroke:var(--c-cyan);stroke-opacity:.14;stroke-width:.7}
.row:hover .rowbg{fill:var(--c-cyan);fill-opacity:.08;stroke-opacity:.4}
.row.sel .rowbg{fill:var(--c-cyan);fill-opacity:.1;stroke:var(--c-cyan);stroke-opacity:.85;stroke-width:1.4}
.row:focus-visible .rowbg{stroke:var(--c-ice);stroke-opacity:1;stroke-width:1.8}

/* motion */
.flow{stroke-dasharray:5 9;animation:flow 2.2s linear infinite}
.ticks-a{animation:flow 16s linear infinite}
.blink{animation:blink 1.4s steps(2,end) infinite}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-in-out infinite}
.boot,.flash{animation:boot .9s both;animation-delay:var(--d,0s)}
.flash{animation-duration:.7s;animation-delay:0s}
@keyframes flow{to{stroke-dashoffset:-400}}
@keyframes blink{50%{opacity:.25}}
@keyframes pulse{50%{opacity:.5;transform:scale(1.25)}}
@keyframes boot{0%{opacity:0}10%{opacity:.9}18%{opacity:.1}30%{opacity:1}42%{opacity:.3}60%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.flow,.ticks-a,.blink,.pulse,.boot,.flash{animation:none}}

/* Fix the invalid clamp on desktop too */
.hud{ height:auto; aspect-ratio:1600/560; }

@media (max-width: 800px){
  .hud{
    aspect-ratio:auto;
    height:auto;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    margin-top:32px;
    scrollbar-width:thin;
  }
  .hud svg{
    position:relative;      /* was absolute, which collapses the scroll width */
    inset:auto;
    width:1280px;           /* ~0.8x scale: 10px text renders ~8px */
    max-width:none;
    height:auto;
    aspect-ratio:1600/560;
    margin-left:0;
  }
}