/*
  SEQUENCE — SEQ-TERM (reproduction of the owner's reference mockup, 2026-08-08)
  THESIS: the site IS a terminal the visitor is logged into. Copied from his reference, not reinterpreted.
  OWN-WORLD: near-black navy ground, one electric blue at three levels (dim rule / body / hot heading),
  green reserved for ONLINE-class state, ASCII rules and bracket labels, mono everywhere, his liquid S
  bleeding out of the right of the hero.
  FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
*/
@font-face{font-family:"Mona Krypton";src:url("fonts/mona/Krypton.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Mona Neon";src:url("fonts/mona/Neon.woff2") format("woff2");font-weight:200 800;font-display:swap}

@font-face{font-family:"Monaspace Krypton";src:url("fonts/mona/Krypton.woff2") format("woff2");
  font-weight:200 800;font-display:swap}
@font-face{font-family:"Departure Mono";
  src:url("fonts/departure/DepartureMono-Regular.woff2") format("woff2"),
      url("fonts/departure/DepartureMono-Regular.woff") format("woff");
  font-weight:400;font-display:swap}

:root{
  --bg:#000208;
  --bg-2:#001347;
  --rule:#1E6FE0;          /* frame + table hairlines */
  --rule-hot:#4BB4FC;
  --blue:#4BB4FC;          /* mockup body blue */
  --blue-hot:#4BB4FC;      /* values */
  --blue-dim:#2C84EE;      /* labels, leaders */
  --green:#5BFFA6;
  --amber:#FFB454;
  --red:#FF5A5A;
  --pad:clamp(10px,1.6vw,22px);

  /* ---- build 2: per-glyph ink stacks (a STROKE, not a glow) ----------------
     Pure black at alpha over the plate is a multiplicative darkening: over the
     near-black alley it changes nothing, over the lit S it does the work. Its
     only geometry is the glyph, so it can never read as a rectangle. */
  --ink:#01050B;
  --sh-micro:
     1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink),
     1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink),
     0 0 3px rgba(1,5,11,.95), 0 0 8px rgba(1,5,11,.75), 0 0 16px rgba(1,5,11,.45);
  --sh-body:
     1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink),
     1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink),
     0 0 4px rgba(1,5,11,.96), 0 0 10px rgba(1,5,11,.8), 0 0 22px rgba(1,5,11,.5);
  --sh-lead:
     1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink),
     1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink),
     2px 0 0 rgba(1,5,11,.95), -2px 0 0 rgba(1,5,11,.95),
     0 2px 0 rgba(1,5,11,.95), 0 -2px 0 rgba(1,5,11,.95),
     0 0 6px rgba(1,5,11,.95), 0 0 15px rgba(1,5,11,.78), 0 0 30px rgba(1,5,11,.5);
  --sh-mark:
     2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
     2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
     3px 0 0 rgba(1,5,11,.92), -3px 0 0 rgba(1,5,11,.92), 0 3px 0 rgba(1,5,11,.92), 0 -3px 0 rgba(1,5,11,.92),
     0 0 9px rgba(1,5,11,.92), 0 0 20px rgba(1,5,11,.7), 0 0 38px rgba(1,5,11,.44);
  --read:"Mona Neon",ui-monospace,"Cascadia Mono",Consolas,monospace;


  /* type system */
  --mono:"Mona Krypton","Monaspace Krypton",ui-monospace,Consolas,monospace;
  --wide:"Mona Krypton","Monaspace Krypton",ui-monospace,Consolas,monospace;
  --pixel:"Departure Mono",ui-monospace,Consolas,monospace;
  --t-micro:12px;     /* labels, legends */
  --t-fine:13px;      /* table data, meta */
  --t-body:14.5px;    /* prose */
  --t-lead:15px;      /* lede */
  --glow:none;
  --glow-hot:none;
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden}
html{background:var(--bg)}
body{
  background:transparent;
  color:var(--blue);
  font-family:var(--mono);
  font-size:var(--t-body);line-height:1.62;letter-spacing:.015em;
  font-variant-ligatures:none;
  font-feature-settings:"zero" 1,"ss02" 1,"calt" 0;
  font-variant-numeric:tabular-nums slashed-zero;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}

/* phosphor levels — every text role gets its own weight, tracking and bloom */
.k,.micro,th,.band .k,.legend,.panel .ph .meta,.status .stats,.sample,.hint{
  text-shadow:var(--sh-micro);
  font-family:var(--mono);font-weight:400;font-size:var(--t-micro);letter-spacing:.10em}
.panel .ph h2,.h2,.hd h2{font-family:var(--wide)}
.nav a{font-family:var(--wide);font-weight:400}





a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--blue-hot);color:#01040C;}
:focus-visible{outline:1px solid var(--blue-hot);outline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(8,22,44,.4)}
::-webkit-scrollbar-thumb{background:var(--rule-hot);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

/* ---------- the ground: his alley plate ---------- */
.plate{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("img/alley.png") center center/cover no-repeat;
  filter:saturate(1.12) contrast(1.06) brightness(1.06);
  transform:translate3d(0,0,0);will-change:transform}
/* the picture stays the picture - only a light seat at top and bottom for the two bars */
.plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,4,10,.42) 0%,rgba(1,4,10,0) 12%,rgba(1,4,10,0) 84%,rgba(1,4,10,.48) 100%)}

/* ---------- .deep: the ground steps BACK on a data-heavy view ---------------
   PORTED FROM THE DONOR, not invented here: `terminal-theme/terminal.css` has
   carried `.plate.deep` since the theme was mounted and its class contract
   names it - "add `.deep` to step it back on data-heavy views". This tree was
   cut before that and never got it, so every data page here has been drawing
   its instruments THROUGH the alley at full strength. That is why the wheel,
   the crash curve, the coin and the score cards all read as washed-out
   outlines: not a colour problem, a GROUND problem.

   ★ IT DOES NOT DIM THE PICTURE, AND IT MUST NOT. The theme's round-2 rule is
   explicit - the first attempt at the same complaint dropped the plate to
   `brightness(.46)`, the copy became readable and the neon S he supplied
   turned to mud, trading the thing he asked for against the thing he
   complained about. So `filter` is untouched at full brightness and only the
   SCRIM between the picture and the data changes. The alley is still there,
   still lit, and still reads at the margins and behind the header.

   OPT-IN AND INERT: nothing wears `deep` unless a page asks for it, so the
   pages that are meant to sit ON the picture (home, live, map, genome, editor,
   support) are byte-for-byte unaffected by this block existing. */
.plate.deep::after{background:linear-gradient(180deg,
  rgba(1,4,10,.93) 0%,rgba(1,4,10,.90) 30%,rgba(1,4,10,.91) 70%,rgba(1,4,10,.95) 100%)}

/* screen texture */
.crt{position:fixed;inset:0;z-index:200;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(120,190,255,.020) 0 1px,transparent 1px 3px)}
.vig{display:none}

/* GPU atmosphere behind everything */
.gpu{display:none}
.gpu.fallback{background:
  radial-gradient(80% 60% at 20% 10%,rgba(20,90,180,.20),transparent 60%),
  radial-gradient(70% 60% at 85% 30%,rgba(20,90,180,.14),transparent 62%)}

/* the frame */
.screen{border:1px solid var(--rule);margin:9px;position:relative;z-index:2;min-height:calc(100vh - 18px);
  background:transparent}
.rule{height:0;border-top:1px solid var(--rule);position:relative}
.rule::before,.rule::after{content:"+";position:absolute;top:-11px;color:var(--rule-hot);font-size:14px;line-height:1}
.rule::before{left:-4px}.rule::after{right:-4px}
.rule.dash{border-top-style:solid;
  background-image:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 9px);
  height:1px;border-top:0}

/* ---------- header ---------- */
/* ★★★★★ `position:relative;z-index:60` IS NOT DECORATION - IT IS WHAT MAKES THE
   HEADER'S OWN DROPDOWN CLICKABLE. `backdrop-filter` opens a stacking context on
   an element that is otherwise unpositioned, so without these two the whole header
   paints as one atomic block in the in-flow step, BELOW every later positioned
   sibling (.section/.panels/.live-wrap/.ed-wrap all sit at z-index 4). Those are
   transparent where the account menu hangs, so the menu looked perfect and every
   press landed on the page behind it - his 2026-08-12 report, "nothing happens and
   doesnt give me the option to even click it". A z-index INSIDE the header cannot
   help: it is measured against the header, never against the page. The shared
   terminal theme (home/web-shared/terminal-theme/terminal.css) always carried this
   on `.top`; this sheet is the 2026-08-08 original and had drifted from it. The
   live page's scrim exception lives in _seq.css. */
.top{display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding:14px var(--pad);flex-wrap:wrap;
  background:rgba(1,4,10,.78);backdrop-filter:blur(8px);position:relative;z-index:60}
.id{display:flex;align-items:center;gap:12px;min-width:0}
/* the mark is cut from the neon S in the plate - isolated, so it survives at 44px */
.id .glyph{width:46px;height:54px;flex:none;position:relative;
  background:url("img/alley.png") -34px -8px/200px 113px no-repeat;
  filter:contrast(1.06) saturate(1.08);
  -webkit-mask-image:radial-gradient(66% 62% at 50% 46%,#000 58%,transparent 100%);
          mask-image:radial-gradient(66% 62% at 50% 46%,#000 58%,transparent 100%)}
.id .glyph img{display:none}
.id .who{white-space:nowrap}
.id .who b{display:block;color:#4BB4FC;text-shadow:var(--sh-body);font-family:var(--mono);font-weight:650;font-size:14px;letter-spacing:.06em;line-height:1.45}
.id .who span{display:block;color:var(--blue-dim);text-shadow:var(--sh-micro);font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;line-height:1.45}
.cursor::after{content:"█";color:#4BB4FC;font-size:.78em;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav{display:flex;flex:1;gap:clamp(10px,2.4vw,40px);justify-content:center;flex-wrap:wrap}
.nav a{color:var(--blue);text-shadow:var(--sh-micro);font-size:12px;letter-spacing:.17em;white-space:nowrap;padding:4px 2px;transition:color .15s linear}
.nav a i{font-style:normal;color:var(--blue-dim);transition:color .14s}
.nav a:hover,.nav a[aria-current]{color:#79D9FF}
.nav a:hover i,.nav a[aria-current] i{color:var(--blue-hot)}
.clock{text-align:right;white-space:nowrap}
.clock b{display:block;color:#4BB4FC;text-shadow:var(--sh-body);font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.06em}
.clock span{display:block;text-shadow:var(--sh-micro);font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;color:var(--blue-dim)}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0;padding:clamp(14px,2vw,26px) 0 clamp(18px,2.6vw,34px)}
/* the plate carries the picture, so the hero is one column of type over it */
.hero.solo{grid-template-columns:minmax(0,1fr);min-height:clamp(560px,88vh,1000px);
  align-content:end;padding:clamp(20px,4vh,48px) 0 clamp(26px,5vh,64px)}
.hero .left{position:relative;z-index:1;min-width:0;width:min(600px,48vw);
  margin-left:var(--pad);padding-left:clamp(16px,1.5vw,24px);
  border-left:1px solid rgba(75,180,252,.5);box-shadow:-1px 0 0 rgba(1,5,11,.85)}
.hero .left::before,.hero .left::after{content:"";position:absolute;left:-1px;width:14px;height:1px;
  background:#4BB4FC;box-shadow:0 1px 0 rgba(1,5,11,.85),0 -1px 0 rgba(1,5,11,.85)}
.hero .left::before{top:0}
.hero .left::after{bottom:0}
@media(max-width:1100px){.hero .left{width:min(560px,72vw)}}
@media(max-width:680px){.hero .left{width:auto;margin-right:var(--pad);padding-left:14px}}

.boot{position:relative;z-index:1;margin:0 0 clamp(20px,3vh,34px);font-family:var(--mono);
  font-weight:500;font-size:13px;letter-spacing:.075em;line-height:1.8;color:#4BB4FC;
  text-shadow:var(--sh-body)}

.boot .ok{color:var(--green)}
.prompt{color:#79D9FF;letter-spacing:.09em;text-shadow:var(--sh-body)}
.mark{display:inline-block;margin:0 0 0 -3px;font-family:var(--pixel);font-weight:400;
  font-size:clamp(40px,6.05vw,116px);line-height:.94;letter-spacing:.032em;color:#4BB4FC;
  text-shadow:var(--sh-mark);position:relative}
.mark .scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(1,4,12,.30) 0 1px,transparent 1px 5px);
  mix-blend-mode:multiply}
.boot .bl{animation:bootin .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes bootin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.tagline{margin:clamp(13px,1.8vh,20px) 0 0;font-family:var(--pixel);
  font-size:clamp(11px,.76vw,14px);letter-spacing:.28em;color:#79D9FF;text-shadow:var(--sh-lead)}
.blurb{margin:clamp(16px,2.4vh,26px) 0 clamp(20px,3.2vh,34px);max-width:50ch;
  font-family:var(--read);font-weight:400;font-size:14.5px;line-height:1.85;letter-spacing:.012em;
  color:#6BC6FF;text-shadow:var(--sh-body)}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.act{position:relative;font-family:var(--pixel);font-size:12px;letter-spacing:.115em;
  padding:11px 16px;color:#79D9FF;text-shadow:var(--sh-body);background:transparent;
  border:1px solid rgba(75,180,252,.55);
  box-shadow:0 0 0 1px rgba(1,5,11,.9), inset 0 0 0 1px rgba(1,5,11,.7);
  transition:border-color .15s linear,color .15s linear}
.act:hover{border-color:#79D9FF;color:#A8E7FF}
.act::before,.act::after{content:"";position:absolute;width:6px;height:6px;border:1px solid var(--blue-hot);
  opacity:0;transition:opacity .16s}
.act::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.act::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.act:hover{border-color:#79D9FF;color:#A8E7FF}
.act:hover::before,.act:hover::after{opacity:1}

.hero .art{position:relative;min-height:clamp(240px,32vw,470px)}
.hero .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.hero .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(1,4,12,.72) 16%,transparent 46%),
             linear-gradient(0deg,var(--bg) 0%,transparent 26%),
             linear-gradient(180deg,var(--bg) 0%,transparent 22%)}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero .art{order:-1;min-height:230px}
  .hero .art::after{background:linear-gradient(0deg,var(--bg) 0%,transparent 55%)}
}

/* ---------- panels ---------- */
.panels{position:relative;z-index:4;display:grid;grid-template-columns:1.12fr .92fr 1.06fr;gap:var(--pad);padding:0 var(--pad) var(--pad)}
@media(max-width:1080px){.panels{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.panels{grid-template-columns:1fr}}
.panel{border:1px solid var(--rule);padding:12px 14px 12px;display:flex;flex-direction:column;min-width:0;position:relative;
  background:rgba(1,4,10,.62);backdrop-filter:blur(10px) saturate(1.15);
  transition:border-color .2s,box-shadow .2s}
.panel:hover{border-color:var(--rule-hot);box-shadow:0 0 40px -18px rgba(61,155,255,.9)}
.panel::before,.panel::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border:1px solid var(--rule-hot);opacity:.9}
.panel::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.panel > .ph{position:relative}
.panel{box-shadow:inset 3px 0 0 rgba(75,180,252,.55)}
.panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel .ph h2{margin:0;text-shadow:var(--sh-body);font-size:16px;font-weight:560;color:var(--blue);letter-spacing:.06em}
.panel .ph .meta{color:var(--blue-dim);white-space:nowrap;font-size:13px;letter-spacing:.08em}
.panel .ph .meta b{color:var(--blue-hot);font-weight:400}
.sq{display:inline-block;width:9px;height:9px;background:var(--blue-hot);vertical-align:-1px;margin-left:6px;
  box-shadow:0 0 10px rgba(61,155,255,.9)}
.panel .foot{margin-top:auto;padding-top:11px;font-size:11.5px;color:var(--blue);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:.06em}

/* tables */
table{width:100%;border-collapse:collapse;font-size:var(--t-fine)}
th{color:#2C84EE;font-weight:500;text-align:left;padding:0 12px 10px 0;white-space:nowrap;
  border-bottom:1px solid var(--rule)}
td{text-shadow:var(--sh-body);padding:7px 14px 7px 0;white-space:nowrap;color:#4BB4FC;letter-spacing:.01em;font-weight:430}
tbody tr{transition:color .14s}
tbody tr:hover td{color:#4BB4FC}
tbody tr td:first-child{position:relative;padding-left:12px}
tbody tr td:first-child::before{content:"›";position:absolute;left:0;color:var(--blue-hot);opacity:0;
  transform:translateX(-3px);transition:opacity .14s,transform .14s}
tbody tr:hover td:first-child::before{opacity:1;transform:none}
td.hot{color:#4BB4FC;font-weight:560}
td.on{color:var(--green);font-weight:560}
.scroll{overflow-x:auto;scrollbar-width:thin}

/* leader list */
.leaders{list-style:none;margin:0;padding:0;font-size:13.5px}
.leaders li{text-shadow:var(--sh-body);display:flex;align-items:baseline;gap:0;padding:5px 0;color:#4BB4FC;font-weight:430;
  transition:color .14s,padding-left .14s}
.leaders li .l{white-space:nowrap;letter-spacing:.05em}
.leaders li .dots{flex:1;overflow:hidden;color:#2C84EE;white-space:nowrap;margin:0 8px}
.leaders li .s{color:var(--blue);white-space:nowrap;letter-spacing:.04em}
.leaders li .s.on{color:var(--green)}
.leaders li:hover{color:#4BB4FC;padding-left:4px}

/* block bar */
.blocks{display:flex;align-items:center;gap:8px;flex:1;max-width:300px;font-size:12px;color:var(--blue-dim)}
.blocks .track{flex:1;display:flex;gap:2px;overflow:hidden}
.blocks .track i{flex:1;height:11px;background:var(--rule);}
.blocks .track i.f{background:var(--blue-hot);box-shadow:0 0 8px rgba(61,155,255,.7)}
.blocks .pc{color:var(--blue);white-space:nowrap}

/* map */
.mapbox{position:relative;border:1px solid var(--rule);aspect-ratio:16/9;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,rgba(30,95,168,.28) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(180deg,rgba(30,95,168,.28) 0 1px,transparent 1px 34px),
    radial-gradient(90% 90% at 50% 50%,rgba(12,40,80,.5),transparent 70%)}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.legend{display:grid;gap:7px;font-size:11.5px;color:var(--blue);padding-left:12px;align-content:center}
.legend span{display:flex;align-items:center;gap:8px;letter-spacing:.08em;white-space:nowrap}
.legend i{font-style:normal;color:var(--blue-hot);width:12px;text-align:center}
.mapwrap{display:grid;grid-template-columns:1fr auto;gap:6px}
@media(max-width:520px){.mapwrap{grid-template-columns:1fr}.legend{padding:0;grid-template-columns:1fr 1fr}}

/* ---------- status bar ---------- */
.status{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,28px);
  padding:12px var(--pad);flex-wrap:wrap;font-size:14px;background:rgba(1,4,10,.78);backdrop-filter:blur(8px)}
.status .stats{display:flex;gap:clamp(10px,2.2vw,30px);flex-wrap:wrap;color:var(--blue-dim)}
.status .stats b{text-shadow:var(--sh-micro);font-family:var(--mono);font-weight:560;font-size:14px;letter-spacing:.03em;color:#4BB4FC}
.status .ok{color:var(--green)}

/* event ticker */
.ticker{border-top:1px solid var(--rule);overflow:hidden;padding:7px 0;position:relative;background:rgba(1,4,10,.72);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker .tape{text-shadow:var(--sh-micro);display:inline-flex;gap:44px;white-space:nowrap;will-change:transform;
  animation:tape 46s linear infinite;font-size:13px;font-family:var(--mono);font-weight:400;
  letter-spacing:.06em;color:var(--blue-dim);padding-left:100%}
.ticker:hover .tape{animation-play-state:paused}
.ticker .tape b{font-weight:400;color:var(--blue-hot)}
.ticker .tape .g{color:var(--green)}
@keyframes tape{to{transform:translateX(-100%)}}

/* ---------- shared page bits ---------- */
.section{padding:clamp(16px,2.4vw,30px) var(--pad);position:relative;z-index:1}
.section::before{content:"";position:absolute;left:0;right:40%;top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,2,8,.55) 0%,rgba(0,2,8,.25) 62%,transparent 100%)}
.h2{text-shadow:var(--sh-lead);margin:0 0 12px;font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:.06em;color:#4BB4FC}
.sub{text-shadow:var(--sh-body);margin:0 0 22px;color:var(--blue);max-width:70ch;font-size:15px;line-height:1.66}
.sample{display:inline-block;margin-top:10px;color:var(--blue-dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad)}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* ---------- phosphor detail ---------- */
.blocks{font-family:var(--mono);font-size:var(--t-fine)}
.blocks .track i{transition:background .12s,box-shadow .12s}
.blocks .pc{color:var(--blue-hot)}
.legend{font-family:var(--wide);font-weight:300;font-size:var(--t-micro);letter-spacing:.14em}
.legend i{color:var(--blue-hot);}
.cout{font-family:var(--mono);font-size:var(--t-fine);line-height:1.8}
.con .ch{font-family:var(--wide);font-weight:400;font-size:var(--t-micro);letter-spacing:.18em}
.con .ch button{font-family:var(--wide);font-size:var(--t-micro);letter-spacing:.16em}
.cin span{font-family:var(--mono);}
.cin input{caret-shape:block}

/* decode reveal — the sheen layer stays off until the real text has settled */
[data-decode]{white-space:pre-wrap}
.dec{opacity:.9}


/* map canvas rides on top of the vector island */
.mapbox canvas{position:absolute;inset:0;pointer-events:none}

/* ---------- interactive console ---------- */
.con{position:fixed;left:0;right:0;bottom:0;z-index:150;height:min(46vh,430px);
  display:flex;flex-direction:column;transform:translateY(101%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  background:rgba(1,6,16,.95);backdrop-filter:blur(7px);border-top:1px solid var(--rule-hot);
  box-shadow:0 -30px 70px -30px rgba(61,155,255,.45)}
.con.on{transform:none}
.con .ch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;
  border-bottom:1px solid var(--rule);color:var(--blue-hot);font-size:12px;letter-spacing:.1em}
.con .ch button{background:transparent;border:1px solid var(--rule);color:var(--blue);font:inherit;
  padding:4px 10px;cursor:pointer;letter-spacing:.1em}
.con .ch button:hover{border-color:var(--rule-hot);color:var(--blue-hot)}
.cout{flex:1;overflow:auto;padding:12px 16px;font-size:12.5px;line-height:1.72;scrollbar-width:thin}
.cl{white-space:pre-wrap;word-break:break-word}
.cl.echo{color:var(--blue-hot)}
.cl.err{color:var(--red)}
.cl.dim{color:var(--blue-dim)}
.cin{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--rule)}
.cin span{color:var(--blue-hot);white-space:nowrap}
.cin input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#4BB4FC;font:inherit;
  letter-spacing:.04em;caret-color:var(--blue-hot)}
.hint{color:var(--blue-dim);font-size:11.5px;letter-spacing:.08em}
.term-open{cursor:pointer}
.term-open:hover{color:#4BB4FC}

/* flat type: one solid colour per role, nothing shining, nothing bleeding */
.shine{background-image:none !important;-webkit-text-fill-color:currentColor;color:#4BB4FC}
.shine::after{content:none !important}
.mark{color:#4BB4FC}
.panel .ph h2.shine,.h2.shine{color:#4BB4FC}

/* ---------- GPU text pass ---------- */
[data-gpu-text]{position:relative}
.gputext{position:absolute;left:0;top:0;pointer-events:none;z-index:5}
[data-gpu-text].gpu-on [data-gpu-line]{color:transparent !important}
[data-gpu-text].gpu-on [data-gpu-line] .ok,
[data-gpu-text].gpu-on [data-gpu-line] .prompt{color:transparent !important}
[data-gpu-text].gpu-on .mark .scan{opacity:0}

/* ══════════════════════════════════════════════════ THE COLD START ═══════════
   The terminal coming up, on every page. Built by `_term.js`, never by markup,
   because there is no shared partial in this tree — every page's HTML is typed
   into its own file, so a markup-based curtain would be eleven edits and the
   twelfth page would be forgotten.

   ★ THE COLOURS HERE ARE LITERALS ON PURPOSE. This block used to live in the
   extractions sheet, where `--ex-hot` / `--ex-lab` / `--ex-arrive` are declared
   under a `.xb-scope` class that exists on exactly ONE page. Moved as-is they
   would have resolved to nothing site-wide: an invisible brand line, invisible
   OK labels and a broken easing curve, with no error anywhere. Anything below
   that names a var names one THIS sheet declares.

   ★ IT NEVER TOUCHES `.screen`. The page renders normally underneath; this is
   only a lid. That is what keeps a thrown script from blanking the whole site
   and what keeps it out of a fight with signal-fx's own arrival animation.
   ★★★★★ EVERY COLOUR AND FONT BELOW IS A LITERAL, AND THAT IS NOT LAZINESS.
   This block first shipped using `var(--mono)` / `var(--blue)` / `var(--green)`
   and so on. In this sheet those tokens are declared INSIDE `.term{` (line 75,
   closing 782) and the curtain sits outside it, so on any page that does not
   mount `class="term"` on the root they all resolved EMPTY — the curtain
   rendered in Times New Roman with invisible log lines, over the whole
   viewport, and nothing anywhere errored. A full-viewport lid must not depend
   on a class the host may not have set. It carries its own values.
   ★ Same reason this cannot live under `.xb-scope` either — that is one page's
   class. A shared curtain answers to nothing.
*/
.tm-cold{
  position:fixed;inset:0;z-index:900;background:#000208;
  display:grid;align-content:center;justify-content:center;
  padding:6vh 5vw;overflow:hidden;cursor:pointer;
  font-family:"Mona Krypton",ui-monospace,Consolas,monospace;font-size:clamp(11px,1.5vw,14px);color:#4BB4FC
}
.tm-cold.out{animation:tm-cold-lift .42s cubic-bezier(.16,1,.3,1) both;pointer-events:none}
@keyframes tm-cold-lift{
  from{opacity:1;clip-path:inset(0 0 0 0)}
  to{opacity:0;clip-path:inset(0 0 100% 0)}
}
.tm-cold-in{width:min(56ch,92vw)}
.tm-cold-brand{
  font-family:"Mona Krypton",ui-monospace,Consolas,monospace;font-size:clamp(15px,2.4vw,21px);letter-spacing:.18em;
  color:#79D9FF;margin:0 0 1.6em;white-space:nowrap;
  text-shadow:0 0 22px rgba(121,217,255,.5)
}
/* ★ THE ONE HEADLINE THAT IS TWO PARTS IS THE FRONT DOOR'S, and nowrap
   inside an overflow:hidden lid CLIPPED it — 46px at 320, 8px at 360, with
   no scrollbar and no clue. Below 400 it is allowed to wrap and to shrink;
   the other ten pages measure 0 overflow at every width either way. */
@media (max-width:400px){
  .tm-cold-brand{white-space:normal;font-size:clamp(13px,4.4vw,17px);
    letter-spacing:.12em;line-height:1.5;margin:0 0 1.2em}
}
.tm-cold-brand i{font-style:normal;color:#2C84EE}
.tm-cold-log{list-style:none;margin:0;padding:0}
.tm-cold-log li{
  display:flex;align-items:baseline;gap:.5ch;line-height:2;
  white-space:nowrap;opacity:0
}
.tm-cold-log li.on{opacity:1}
.tm-cold-log .lb{color:#4BB4FC}
.tm-cold-log .ld{
  flex:1 1 auto;min-width:2ch;
  border-bottom:1px dotted rgba(30,111,224,.5);transform:translateY(-.28em)
}
.tm-cold-log .lk{color:#2C84EE;opacity:0}
.tm-cold-log li.done .lk{opacity:1;color:#5BFFA6}
.tm-cold-cur{
  display:inline-block;width:.62ch;height:1.05em;background:#79D9FF;
  vertical-align:-.16em;animation:tm-cold-blink 1.05s steps(1) infinite
}
@keyframes tm-cold-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.tm-cold-hint{
  margin:2.2em 0 0;font-size:.85em;letter-spacing:.18em;color:rgba(44,132,238,.7)
}
.tm-cold-scan{
  position:absolute;left:0;right:0;top:0;height:34vh;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(75,180,252,.05) 60%,rgba(121,217,255,.22));
  border-bottom:1px solid rgba(121,217,255,.75);
  box-shadow:0 0 34px rgba(75,180,252,.35)
}
.tm-cold.sweep .tm-cold-scan{animation:tm-cold-sweep .5s linear both}
@keyframes tm-cold-sweep{
  from{transform:translateY(-40vh);opacity:1}
  to{transform:translateY(115vh);opacity:1}
}

/* ★ THIS SHEET'S FIRST REDUCED-MOTION BLOCK. `_term.js` already refuses to
   mount the curtain under `prefers-reduced-motion`, so this is the belt to that
   brace: if the element is ever present under calm — a stale one, a future
   caller — it holds perfectly still rather than sweeping. The information is
   never what gets removed; only the movement is. */
@media (prefers-reduced-motion: reduce){
  .tm-cold,.tm-cold.out,.tm-cold.sweep .tm-cold-scan,.tm-cold-cur,
  .tm-cold-log li{animation:none !important}
  .tm-cold-log li{opacity:1}
}