/* Playset — dark steel, cobalt, white. One look, deliberately; no light theme. */
:root {
  --ground: #0b0d10;
  --steel: #161a1f;
  --steel-2: #1d222a;
  --steel-3: #262c35;
  --line: #2b323b;
  --line-2: #3a434e;
  --white: #f3f5f8;
  --muted: #98a2ad;
  --faint: #66717d;
  --cobalt: #1f5bff;
  --cobalt-2: #4d7dff;
  --cobalt-soft: rgba(31, 91, 255, .16);
  --cobalt-glow: rgba(31, 91, 255, .45);
  --amber: #f0b849;
  --disp: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0; color: var(--white); background: var(--ground);
  font: 15px/1.5 var(--sans);
  padding: 0 16px;
  min-height: 100vh;
  position: relative;
}
/* The ground: a generated sheet of near-black brushed steel, pinned behind everything at
   low strength so the grain reads without competing with the panels. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/art/ground-steel.webp") center / cover no-repeat, var(--ground);
  opacity: .55;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(31, 91, 255, .10), transparent 60%);
}
a { color: inherit; }
code { font-family: var(--mono); font-size: .92em; word-break: break-all; }
.tiny { font-size: 12px; color: var(--faint); }
.eyebrow { font: 700 12px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt-2); margin: 0; }

/* ── top bar ── */
.top {
  max-width: 1380px; margin: 0 auto; height: 64px; padding: 0 14px 0 0;
  display: flex; align-items: center; gap: 28px;
  border-bottom: 1px solid var(--line);
  /* a subtle brushed-steel band: black under the wordmark, the texture emerging to the right */
  background:
    linear-gradient(90deg, #0b0d10 0%, #0b0d10 16%, rgba(11,13,16,.5) 50%, rgba(11,13,16,.08) 100%),
    url("/art/stage-steel.webp") right center / cover no-repeat, var(--ground);
  box-shadow: inset 0 -1px 0 rgba(77,125,255,.18);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 34px; height: 34px; filter: drop-shadow(0 4px 10px rgba(31,91,255,.35)); }
.word { height: 21px; width: auto; color: var(--white); display: block; }
.early { font: 700 10px/1 var(--disp); letter-spacing: .14em; color: var(--cobalt-2); border: 1px solid var(--cobalt); padding: 4px 6px; border-radius: 4px; }
.nav { display: none; gap: 22px; }
.nav a { font: 700 12px/1 var(--disp); letter-spacing: .14em; color: var(--muted); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a[aria-current], .nav a:hover { color: var(--white); border-color: var(--cobalt); }
/* the menu button and the drawer, small screens only */
.menu { display: inline-flex; align-items: center; font: 700 11px/1 var(--disp); letter-spacing: .16em; color: var(--white); background: #0a0c0f; border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 10px; cursor: pointer; margin-left: 10px; }
.menu[aria-expanded="true"] { border-color: var(--cobalt-2); color: var(--cobalt-2); }
.menu:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.drawer { max-width: 1380px; margin: 0 auto; display: grid; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.drawer a { display: grid; gap: 3px; padding: 12px 14px; text-decoration: none; color: var(--white); background: rgba(22,26,31,.85); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 6px; font: 700 13px/1 var(--disp); letter-spacing: .14em; }
.drawer a i { font: 400 12px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); text-transform: none; }
.drawer a[aria-current], .drawer a:hover { border-left-color: var(--cobalt); }
.drawer[hidden] { display: none; }
@media (min-width: 900px) { .menu, .drawer { display: none !important; } }
.read { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .read [data-read-label] { display: none; } .read { padding: 6px; } }
.read .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.read.ok .dot { background: var(--cobalt-2); box-shadow: 0 0 10px var(--cobalt-glow); }
.read.bad .dot { background: #ff5a5a; }
@media (min-width: 900px) { .nav { display: flex; } }
@media (max-width: 899px) { .top .read { margin-left: auto; } }

/* ── ticker ── */
.ticker {
  max-width: 1380px; margin: 0 auto; display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.ticker::-webkit-scrollbar { display: none; }
.tick {
  flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 12px;
  padding: 8px 12px 8px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--steel); text-decoration: none; min-width: 260px;
  border-left: 3px solid var(--cobalt);
}
.tick .sym { font: 800 15px/1 var(--disp); letter-spacing: .06em; }
.tick .lbl { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.tick .n { font: 700 15px/1 var(--disp); font-variant-numeric: tabular-nums; grid-row: span 2; }
.tick.dim { border-left-color: var(--line-2); color: var(--muted); }

/* ── the console: the one HUD every page is built on ──
   A status strip across the top; a framed VIEWPORT (8 of 12 columns) beside a RAIL (4 of 12)
   that stretch to the same height; a DECK of equal instrument tiles underneath. The landing,
   the pool page and every inner page are this same console with a different display in the
   viewport — the hero is a display inside an instrument, not a poster the instruments sit
   around. Everything wears the frame; nothing floats. */
.shell {
  max-width: 1380px; margin: 0 auto; display: grid; gap: 22px; padding: 16px 0 32px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas: "status status status status status status status status status status status status"
                       "view view view view view view view view view view view view"
                       "rail rail rail rail rail rail rail rail rail rail rail rail"
                       "deck deck deck deck deck deck deck deck deck deck deck deck";
}
@media (min-width: 1000px) {
  .shell { align-items: stretch; gap: 26px 28px;
    grid-template-areas: "status status status status status status status status status status status status"
                         "view view view view view view view view rail rail rail rail"
                         "deck deck deck deck deck deck deck deck deck deck deck deck"; }
}
.hud-status { grid-area: status; }
.viewport { grid-area: view; }
.rail { grid-area: rail; }
.deck { grid-area: deck; }

/* the status strip: an ID plate, then readouts, then a signal meter — thin, the width of the console */
.hud-status {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; min-height: 44px; padding: 0 14px 0 0;
  background: linear-gradient(90deg, #0a0c0f, #0d1015 60%, #0a0c0f); border: 1px solid var(--line-2); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(77,125,255,.28), 0 12px 30px -20px #000;
  font: 700 11px/1 var(--disp); letter-spacing: .16em; color: var(--muted); overflow: hidden;
}
.hud-status::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--cobalt), transparent 60%); }
.hud-status .plate { display: inline-flex; align-items: center; gap: 8px; align-self: stretch; padding: 0 16px 0 14px; background: #05070a; border-right: 1px solid var(--line-2); color: var(--cobalt-2); white-space: nowrap; }
.hud-status .plate i { font-style: normal; color: var(--faint); }
.hud-status .plate::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #98a2ad, #3a434e 70%); box-shadow: inset 0 0 0 1px #05070a; }
.hud-status .readouts { display: flex; align-items: center; gap: 22px; min-width: 0; overflow: hidden; white-space: nowrap; }
.hud-status .readouts span { display: inline-flex; align-items: baseline; gap: 7px; }
.hud-status .readouts b { font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.hud-status .readouts code { font: 500 11.5px/1 var(--mono); letter-spacing: 0; color: var(--white); }
.hud-status .readouts .copy { width: 18px; height: 18px; margin-left: 2px; font-size: 10px; }
.hud-status .meter { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.hud-status .meter .bars { display: inline-flex; gap: 3px; }
.hud-status .meter .bars i { width: 5px; height: 12px; background: var(--line-2); border-radius: 1px; }
.hud-status.ok .meter .bars i { background: var(--cobalt-2); box-shadow: 0 0 6px var(--cobalt-glow); }
.hud-status.ok .meter .bars i:nth-child(n+5) { background: var(--line-2); box-shadow: none; }
.hud-status.bad .meter .bars i { background: #ff5a5a; }
.hud-status .meter .word { color: var(--white); }
@media (max-width: 720px) { .hud-status .readouts { display: none; } .hud-status .plate { padding: 12px 12px; } }

/* the viewport: the page's display, framed like every other instrument */
.viewport { position: relative; padding: 22px 26px 24px 30px; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1000px) { .viewport { min-height: 560px; } }
.viewport > .tab { left: 16px; top: -15px; }

/* the deck: one readings panel under the viewport — four readouts in a row inside a single
   bezel — and the two keys under the rail. Same 12 columns as the row above, so the panel's
   edges land exactly under the viewport's. */
.deck { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck .readings { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .deck { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 28px; }
  .deck .readings { grid-column: 1 / 9; }
  .deck .key { grid-column: span 2; }
}
.readings { padding: 18px 14px 14px 18px; display: grid; align-content: center; min-height: 112px; }
.readings .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
@media (min-width: 700px) { .readings .row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.readings .readout { padding: 2px 16px 2px 14px; border-left: 1px solid var(--line-2); min-width: 0; }
.readings .readout:first-child { border-left: 0; padding-left: 4px; }
@media (max-width: 699px) { .readings .readout:nth-child(3) { border-left: 0; padding-left: 4px; } }
.readings .v { display: block; font: 800 clamp(28px, 2.6vw, 40px)/1 var(--disp); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.readings .k { display: block; margin-top: 6px; font: 700 10.5px/1 var(--disp); letter-spacing: .14em; color: var(--muted); }
.readings > .tab { top: -15px; left: 16px; }
.deck .key { min-height: 112px; padding: 18px 14px 12px 16px; gap: 8px; }
.deck .key .tab { top: -13px; left: 10px; }
.deck .key-title { font-size: 13.5px; line-height: 1.35; max-width: none; }

/* ── the wiring ──
   A HUD is instruments joined by conduits, not boxes in a grid. `app.js` measures the panels
   after layout and draws an SVG overlay: a dark channel with a cobalt light line routed at
   right angles from one instrument to the next — the stat tiles into the inventory list, the
   hero down into the steps, the steps into the program plate, the live ticker chip down into
   the hero. The overlay paints BEHIND the panels: a run starts and ends under a bezel, so
   nothing terminates in the open. Redrawn on resize. Desktop only; stacked on a phone, the
   order is the wiring. */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; display: none; }
@media (min-width: 1000px) { .shell { position: relative; } .wires { display: block; } .viewport, .stage, .rail, .key, .num, .readings, .deck > * { position: relative; z-index: 1; } .ticker { position: relative; z-index: 1; } }
.wires .chan { fill: none; stroke: #05070a; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.wires .bed { fill: none; stroke: #262c35; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.wires .line { fill: none; stroke: #6a93ff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(31,91,255,.75)); }
.wires .pulse { fill: none; stroke: #f3f5f8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 46; opacity: .85; animation: pulse 2.6s linear infinite; }
@keyframes pulse { to { stroke-dashoffset: -54; } }
@media (prefers-reduced-motion: reduce) { .wires .pulse { animation: none; opacity: 0; } }

/* ID plates riveted to each bezel */
.tab {
  position: absolute; top: -15px; left: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px; background: #0a0c0f; border: 1px solid var(--line-2); border-radius: 3px;
  font: 700 10px/1 var(--disp); letter-spacing: .18em; color: var(--cobalt-2); white-space: nowrap;
  box-shadow: 0 0 0 1px #05070a, 0 6px 14px -8px rgba(0,0,0,.9);
}
.tab::before, .tab::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #98a2ad, #3a434e 70%); box-shadow: inset 0 0 0 1px #05070a; }
.tab i { font-style: normal; color: var(--faint); }
.stage > .tab { left: 40px; top: 10px; }

/* ── the one box type ──
   A single generated frame — a machined steel bezel with chamfered inner corners, a hex bolt in
   each corner and a perforated cobalt mesh strip along the top — cut into nine slices by the
   browser (`border-image`) so the corners stay crisp and the edges stretch to whatever the
   section needs. Every section wears it: the stage, the number tiles, the queue, the steps and
   the program panel. Slice offsets (118 120 116 120) were measured off the image. The hero
   is the one thing that does NOT wear it: it is the object, the panels are the instruments. */
.frame, .viewport, .rail, .steps, .program, .num, .key, .readings, .modal-frame {
  position: relative; border-style: solid; background: #050608 padding-box;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9);
  border-width: 20px 20px 19px 20px;
  border-image: url("/art/frame-rail.webp") 118 120 116 120 fill / 20px 20px 19px 20px stretch;
}
.num   { border-width: 16px 16px 15px 16px; border-image-width: 16px 16px 15px 16px; box-shadow: none; }
.key   { border-width: 16px 16px 15px 16px; border-image-width: 16px 16px 15px 16px; }
@media (max-width: 720px) {
  .frame, .viewport, .rail, .steps, .program { border-width: 16px 16px 15px 16px; border-image-width: 16px 16px 15px 16px; }
  .num { border-width: 13px 13px 12px 13px; border-image-width: 13px 13px 12px 13px; }
}

/* ── the display: the viewport's art panel ──
   A slab of brushed gunmetal with a cobalt rim light, fading to black where the type sits. It
   is the top of the viewport, not the page: the frame around it is the instrument. */
.stage {
  position: relative; margin: -22px -26px 0 -30px; border-bottom: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(11,13,16,0) 0%, rgba(11,13,16,0) 40%, rgba(11,13,16,.75) 62%, #0b0d10 78%, #0b0d10 100%),
    radial-gradient(60% 50% at 50% 38%, rgba(31, 91, 255, .14), transparent 70%),
    url("/art/stage-steel.webp") top center / cover no-repeat,
    #0b0d10;
  box-shadow: inset 0 2px 0 rgba(77,125,255,.55), inset 0 3px 18px -6px rgba(31,91,255,.5);
  overflow: hidden;
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; filter: url(#grain); background: #fff; mix-blend-mode: overlay;
}
@media (max-width: 720px) { .stage { background-image:
    linear-gradient(180deg, rgba(11,13,16,0) 0%, rgba(11,13,16,0) 30%, rgba(11,13,16,.72) 50%, #0b0d10 64%, #0b0d10 100%),
    radial-gradient(60% 50% at 50% 38%, rgba(31, 91, 255, .14), transparent 70%),
    url("/art/stage-steel-960.webp"); } }
.fan {
  position: relative; height: min(52vw, 260px); perspective: 1400px; display: grid; place-items: center; margin-top: 8px;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.fanglow { position: absolute; width: 60%; height: 22%; bottom: 8%; left: 20%; border-radius: 50%; background: var(--cobalt-glow); filter: blur(60px); opacity: .8; }
.fan img {
  position: absolute; height: 80%; width: auto; border-radius: 10px; top: 4%;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
  transform-origin: 50% 100%;
  transform: translateX(var(--x)) rotate(var(--rot)) translateY(var(--y)) scale(var(--s));
  filter: brightness(var(--b));
  transition: transform .5s cubic-bezier(.2,0,0,1);
  will-change: transform;
}
.fan img:hover { filter: brightness(1.04); }
.under { position: relative; padding: 16px 0 0; z-index: 1; display: grid; gap: 8px; align-content: start; }
.under h1 { font: 800 clamp(32px, 3.2vw, 46px)/.95 var(--disp); letter-spacing: -.005em; text-transform: uppercase; margin: 2px 0 0; text-wrap: balance; max-width: 22ch; }
.printing { color: var(--muted); margin: 0; font-size: 14.5px; max-width: 64ch; line-height: 1.55; }
.nums { display: contents; }
.num .v { display: block; font: 800 clamp(30px, 4.6vw, 46px)/1 var(--disp); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.num .k { display: block; margin-top: 6px; font: 700 10.5px/1 var(--disp); letter-spacing: .14em; color: var(--muted); }
.invariant { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.invariant [data-invariant-state] { color: var(--white); font-weight: 600; }
.invariant.ok [data-invariant-state] { color: var(--cobalt-2); }
.invariant.bad [data-invariant-state] { color: #ff8a8a; }
.fees { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 12.5px/1.6 var(--mono); color: var(--muted); letter-spacing: .01em; }
.fees span { white-space: nowrap; }
.fees b { font-weight: 500; color: var(--white); font-variant-numeric: tabular-nums; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.note { margin: 4px 0 0; max-width: 70ch; font-size: 11.5px; color: var(--faint); }
/* the readout line under the title: mono facts with a cobalt rule on the left */
.readline { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 0 6px 12px; margin: 2px 0; border-left: 2px solid var(--cobalt); font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.readline b { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 8px; text-decoration: none; cursor: pointer;
  font: 800 14px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; color: var(--white);
}
.btn.sm { padding: 9px 14px; font-size: 12px; }
.btn-cobalt { background: var(--cobalt); box-shadow: 0 10px 26px -12px var(--cobalt-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-cobalt:hover { background: var(--cobalt-2); }
.btn-steel { background: var(--steel-3); border-color: var(--line-2); }
.btn-steel:hover { background: #2e3540; }
.btn:focus-visible, .nav a:focus-visible, .tick:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }

/* ── rail ── */
.rail { padding: 14px 10px 10px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* inner pages: the rail is an index, so it stays short and follows the reader */
@media (min-width: 1000px) { .page .rail { align-self: start; position: sticky; top: 16px; max-height: calc(100vh - 32px); } }
@media (min-width: 1000px) { .rail { min-height: 0; } .rail .scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; } }
.railhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.railhead.sub { margin-top: 10px; }
.railhead h2 { font: 800 18px/1 var(--disp); letter-spacing: .12em; margin: 0; }
.live { font: 700 10.5px/1 var(--disp); letter-spacing: .14em; color: var(--cobalt-2); }
.live::before { content: "●"; margin-right: 6px; font-size: 9px; }
.railsub { margin: 0; font-size: 12.5px; color: var(--muted); }
.queue, .recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qrow {
  display: grid; grid-template-columns: 34px 52px 1fr auto; align-items: center; gap: 6px 10px;
  padding: 10px 10px; border-radius: 6px; background: rgba(22,26,31,.7); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
}
.qrow.head { border-left-color: var(--cobalt); }
.qrow .pos { font: 800 16px/1 var(--disp); color: var(--muted); }
.qrow .std { font: 700 10.5px/1 var(--disp); letter-spacing: .1em; padding: 4px 6px; border-radius: 4px; background: var(--cobalt-soft); color: var(--cobalt-2); text-align: center; }
.qrow .std.core { background: rgba(243,245,248,.08); color: var(--white); }
.qrow .addr { display: flex; align-items: center; gap: 2px; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--white); white-space: nowrap; }
.qrow .addr a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qrow .addr .copy { flex: none; margin-left: 4px; }
.qrow .addr a:hover { text-decoration: underline; }
.qrow .when { font: 700 13px/1 var(--disp); letter-spacing: .04em; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qrow .when small { font-size: 10px; color: var(--faint); letter-spacing: .08em; margin-left: 3px; }
/* the second line: what it takes to pull it, and the day it was weighed on */
.qrow .sub { grid-column: 2 / -1; font: 700 10.5px/1 var(--disp); letter-spacing: .08em; color: var(--faint); white-space: nowrap; margin-top: -2px; }
.qrow .sub b { color: var(--cobalt-2); font-weight: 700; }
.qrow.empty { grid-template-columns: 1fr; color: var(--muted); font-size: 13px; }
.rrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 12.5px; }
.rrow .sig { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .sig a { text-decoration: none; }
.rrow .kind { font: 700 10.5px/1 var(--disp); letter-spacing: .1em; color: var(--muted); }
.rrow .age { font: 700 11px/1 var(--disp); letter-spacing: .08em; color: var(--faint); white-space: nowrap; }
.rrow.failed .kind { color: #ff8a8a; }

/* ── steps ── */
.steps { grid-area: steps; padding: 18px 16px 12px; }
.stephead h2 { font: 800 clamp(26px, 3.4vw, 34px)/1 var(--disp); text-transform: uppercase; margin: 8px 0 8px; letter-spacing: .01em; }
.steps p { margin: 0 0 14px; max-width: 64ch; color: var(--muted); }
.stepnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dots { display: inline-flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.dots i.on { background: var(--cobalt); box-shadow: 0 0 8px var(--cobalt-glow); }

/* ── program ── */
.program { grid-area: program; padding: 18px 16px 12px; }
.program h2 { font: 800 clamp(22px, 3vw, 30px)/1 var(--disp); margin: 0 0 8px; letter-spacing: .02em; }
.program p { margin: 0 0 14px; max-width: 64ch; color: var(--muted); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.kv dt { font: 700 11px/1.6 var(--disp); letter-spacing: .14em; color: var(--muted); }
.kv dd { margin: 0; }
.kv a { color: var(--white); text-decoration: none; }
.kv a:hover { text-decoration: underline; }

/* ── footer ── */
/* ── the footer ── */
.foot { max-width: 1380px; margin: 0 auto; padding: 26px 0 30px; border-top: 1px solid var(--line); color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 22px 28px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) 1fr 1fr 1fr; } }
.foot-brand { display: grid; grid-template-columns: 34px 1fr; gap: 6px 12px; align-items: start; }
.foot-brand .foot-mark { width: 34px; height: 34px; grid-row: span 2; }
.foot-brand p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 44ch; }
.foot-brand b { font: 800 14px/1 var(--disp); letter-spacing: .14em; color: var(--white); }
.foot nav { display: grid; gap: 8px; align-content: start; }
.foot h3 { margin: 0 0 4px; font: 700 11px/1 var(--disp); letter-spacing: .18em; color: var(--cobalt-2); }
.foot nav a { font-size: 13.5px; color: var(--white); text-decoration: none; opacity: .85; }
.foot nav a:hover { opacity: 1; text-decoration: underline; }
.foot-line { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--faint); max-width: 110ch; }
.foot-line a { color: var(--muted); }

/* ── inner pages: the same console, prose in the viewport ── */
.page .viewport { padding: 24px 28px 28px 32px; }
.page .viewport .prose { max-width: 76ch; }
.page .eyebrow { margin-bottom: 8px; }
.page h1 { font: 800 clamp(30px, 5vw, 44px)/1 var(--disp); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 14px; text-wrap: balance; }
.page h2 { font: 800 clamp(20px, 3vw, 26px)/1.1 var(--disp); text-transform: uppercase; letter-spacing: .02em; margin: 28px 0 8px; }
.page h3 { font: 700 12px/1 var(--disp); letter-spacing: .16em; color: var(--cobalt-2); margin: 20px 0 6px; text-transform: uppercase; }
.page p, .page li { font-size: 16.5px; line-height: 1.7; color: var(--white); max-width: none; }
.page p.muted, .page .muted { color: var(--muted); }
.page ul, .page ol { padding-left: 22px; }
.page li { margin: 4px 0; }
.page a { color: var(--cobalt-2); }
.page code { font-size: .9em; }
.page .updated { font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--faint); margin: 0 0 18px; }
.page .kv { margin-top: 8px; }
.page dl.kv dd { max-width: none; font-size: 15px; line-height: 1.6; }
/* the guide's pages, laid out flat */
.guide-page { display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.guide-page:first-of-type { border-top: 0; }
.guide-page .n { font: 800 44px/.9 var(--disp); color: transparent; -webkit-text-stroke: 1.5px rgba(77,125,255,.6); grid-row: span 3; }
.guide-page h2 { margin: 0; }
.guide-page p { margin: 0; }
/* the profile */
.lookup { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.lookup input { flex: 1 1 320px; min-width: 0; font: 500 14px/1 var(--mono); color: var(--white); background: #0a0c0f; border: 1px solid var(--line-2); border-radius: 6px; padding: 11px 12px; }
.lookup input:focus { outline: 2px solid var(--cobalt-2); outline-offset: 1px; border-color: var(--cobalt-2); }
.holding { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.holding h2 { margin: 0; font-size: 20px; }
.holding .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (min-width: 640px) { .holding .row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.holding .stat { display: grid; gap: 4px; padding: 10px 12px; background: rgba(22,26,31,.7); border: 1px solid var(--line); border-radius: 6px; }
.holding .stat b { font: 800 22px/1 var(--disp); font-variant-numeric: tabular-nums; color: var(--white); }
.holding .stat span { font: 700 10px/1.3 var(--disp); letter-spacing: .14em; color: var(--muted); }
.holding ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.holding li { font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.holding li b { color: var(--white); font-weight: 500; }
.empty { color: var(--muted); padding: 14px 0; }

/* skeletons: a resting state that says "reading", never a fake number */
.skeleton { opacity: .55; }
.skeleton .addr, .skeleton .sig, .skeleton .lbl { color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .fan img { transition: none; }
}

/* ── the keys ── */
.keys { display: contents; }
.key {
  display: grid; gap: 10px; align-content: start; text-align: left; cursor: pointer; color: var(--white); font: inherit;
  padding: 22px 16px 14px 20px; min-height: 128px; transition: transform .15s ease, filter .15s ease;
}
.key:hover { filter: brightness(1.12); }
.key:active { transform: translateY(2px) scale(.995); filter: brightness(.95); }
.key:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 4px; }
.key .tab { top: -13px; left: 12px; }
.key-title { font: 600 16px/1.35 var(--sans); color: var(--white); max-width: 34ch; }
.key-hint { font: 700 11px/1 var(--disp); letter-spacing: .18em; color: var(--cobalt-2); }
.key-hint b { display: inline-block; animation: blink 1.4s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── the modals: a boot sequence ──
   Two edge beams draw the top and left edges (0–.3s); the frame unfolds from that corner to
   the opposite one with a slight tilt-in (.2–.9s); the body ignites with a CRT flicker
   (.5–1.3s); a light sweep passes over; the corner brackets fly in and lock; a scan bar keeps
   moving while it is open. Closing folds it back into the far corner. Behind it the page
   drops back and dims. All of it is off under reduced motion. */
.modal {
  border: 0; padding: 0; background: transparent; color: var(--white);
  width: min(1080px, 94vw); max-width: none; max-height: none; overflow: visible; margin: auto;
}
.modal::backdrop { background: rgba(4,5,8,.78); backdrop-filter: blur(10px) saturate(.7); animation: fade .4s ease both; }
.modal.closing::backdrop { animation: fade .35s ease reverse both; }
body.modal-open .top, body.modal-open .ticker, body.modal-open .shell, body.modal-open .foot { transform: scale(.985); filter: brightness(.5) saturate(.6); }
.top, .ticker, .shell, .foot { transition: transform .6s cubic-bezier(.2,.9,.2,1), filter .6s ease; transform-origin: 50% 20%; }

.modal-frame {
  position: relative; overflow: hidden; background: #050608 padding-box;
  box-shadow: 0 80px 140px -50px #000, 0 0 0 1px #05070a, 0 0 120px -30px rgba(31,91,255,.55);
  transform-origin: 0 0;
}
.modal[open] .modal-frame { animation: unfold .75s cubic-bezier(.2,.9,.2,1) .2s both, tilt .9s cubic-bezier(.2,.9,.2,1) .2s both; }
.modal.closing .modal-frame { animation: fold .45s cubic-bezier(.7,0,.9,.4) both; }
@keyframes unfold { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fold { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 100%); } }
@keyframes tilt { from { transform: perspective(1400px) rotateX(9deg) translateY(36px) scale(.96); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } }

.modal-body { position: relative; padding: 22px 26px 22px 30px; min-height: 360px; }
.modal[open] .modal-body { animation: ignite 1.1s steps(1, end) .5s both; }
@keyframes ignite { 0% { opacity: 0; } 7% { opacity: 1; } 13% { opacity: .12; } 20% { opacity: 1; } 27% { opacity: .45; } 33% { opacity: 1; } 41% { opacity: .7; } 46%, 100% { opacity: 1; } }
/* the sweep */
.modal-frame::after {
  content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform: translateX(-130%);
}
.modal[open] .modal-frame::after { animation: sweep 1.3s ease-out .55s both; }
@keyframes sweep { to { transform: translateX(130%); } }
/* scanlines + a moving scan bar */
.modal-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, transparent, rgba(106,147,255,.6), transparent); box-shadow: 0 0 12px rgba(31,91,255,.6); animation: scan 5s linear infinite; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(100vh); } }
/* the edge beams, outside the clip */
.edge { position: absolute; background: #9ab5ff; box-shadow: 0 0 12px var(--cobalt), 0 0 2px #fff; pointer-events: none; opacity: 0; }
.edge-top { left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; }
.edge-left { left: 0; top: 0; width: 2px; height: 100%; transform-origin: 50% 0; }
.modal[open] .edge-top { animation: beamx .32s cubic-bezier(.2,.9,.2,1) both, beamfade .5s ease .85s both; }
.modal[open] .edge-left { animation: beamy .32s cubic-bezier(.2,.9,.2,1) .06s both, beamfade .5s ease .85s both; }
@keyframes beamx { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes beamy { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes beamfade { from { opacity: 1; } to { opacity: 0; } }
/* corner brackets fly in and lock */
.bracket { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cobalt-2); pointer-events: none; opacity: 0; filter: drop-shadow(0 0 6px rgba(31,91,255,.7)); }
.bracket.tl { left: -10px; top: -10px; border-right: 0; border-bottom: 0; }
.bracket.tr { right: -10px; top: -10px; border-left: 0; border-bottom: 0; }
.bracket.bl { left: -10px; bottom: -10px; border-right: 0; border-top: 0; }
.bracket.br { right: -10px; bottom: -10px; border-left: 0; border-top: 0; }
.modal[open] .bracket { animation: lock .5s cubic-bezier(.2,.9,.2,1) .9s both; }
.modal[open] .bracket.tr { animation-delay: .98s; } .modal[open] .bracket.bl { animation-delay: 1.06s; } .modal[open] .bracket.br { animation-delay: 1.14s; }
@keyframes lock { from { opacity: 0; transform: translate(var(--dx, -30px), var(--dy, -30px)) scale(1.6); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.bracket.tr { --dx: 30px; } .bracket.bl { --dy: 30px; } .bracket.br { --dx: 30px; --dy: 30px; }
/* status strip */
.modal-status { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--line); background: #0a0c0f; font: 700 11px/1 var(--disp); letter-spacing: .16em; color: var(--muted); }
.modal-status .status { flex: 1; color: var(--cobalt-2); }
.modal-status .led { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt-2); box-shadow: 0 0 10px var(--cobalt-glow); animation: blink 1.1s steps(1, end) infinite; }
.modal-close { font: inherit; letter-spacing: inherit; color: var(--white); background: transparent; border: 1px solid var(--line-2); border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.modal-close:hover { border-color: var(--cobalt-2); color: var(--cobalt-2); }
.modal-close:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
/* the manual */
.manual .bignum { position: absolute; right: 18px; top: -6px; font: 800 clamp(120px, 20vw, 220px)/.8 var(--disp); color: transparent; -webkit-text-stroke: 2px rgba(77,125,255,.45); letter-spacing: -.02em; pointer-events: none; user-select: none; }
.manual .stephead { position: relative; }
.manual h2 { font: 800 clamp(32px, 4.6vw, 52px)/1 var(--disp); text-transform: uppercase; margin: 10px 0 14px; letter-spacing: .01em; max-width: 18ch; text-wrap: balance; }
.manual .lede { position: relative; margin: 0 0 22px; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--white); }
.manual .stepnav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.manual .stepnav .dots { display: flex; gap: 8px; }
.modal-body.flip { animation: flip .35s steps(1, end) both; }
@keyframes flip { 0% { opacity: .2; } 30% { opacity: 1; } 45% { opacity: .5; } 60%, 100% { opacity: 1; } }
/* the spec plate */
.program h2 { font: 800 clamp(26px, 3.4vw, 36px)/1 var(--disp); margin: 0 0 8px; letter-spacing: .02em; }
.program .lede { margin: 0 0 18px; max-width: 70ch; color: var(--muted); }
.modal .kv { grid-template-columns: 110px 1fr; }
@media (max-width: 640px) { .modal { width: 100vw; height: 100dvh; overflow: auto; } .modal-frame { min-height: 100dvh; } .modal-body { padding: 18px 14px 18px 18px; } .modal .kv { grid-template-columns: 1fr; gap: 2px 0; } .modal .kv dt { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .modal[open] .modal-frame, .modal.closing .modal-frame, .modal[open] .modal-body, .modal[open] .modal-frame::after, .modal[open] .edge, .modal[open] .bracket, .scan, .modal-status .led, .key-hint b, .modal-body.flip { animation: none !important; }
  .modal[open] .bracket, .modal[open] .edge { opacity: 1; }
  .modal::backdrop { animation: none; }
  .top, .ticker, .shell, .foot { transition: none; }
}

.defs { position: absolute; }

/* ── the landing hero ── */
.hero .lede-hero { max-width: 66ch; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.hero .fan { height: min(46vw, 260px); }
/* the pool readout rows */
.queue.pools .std { font-size: 10px; letter-spacing: .08em; background: rgba(243,245,248,.08); color: var(--white); }
.queue.pools .addr { font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.queue.pools .addr a { text-decoration: none; color: var(--white); }
.queue.pools .addr small { display: block; font: 400 11px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); white-space: normal; }
.queue.pools .when small { margin-left: 3px; }
.railsub a { color: var(--cobalt-2); text-decoration: none; }
.railsub a:hover { text-decoration: underline; }

/* ── explore ── */
.explore-head { margin: 0 0 18px; }
.explore-head h1 { margin-top: 6px; }
.explore-head .lookup input { font-family: var(--sans); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chip { font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--muted); background: rgba(22,26,31,.85); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.chip.on, .chip:hover { color: var(--white); border-color: var(--cobalt-2); }
.chip.on { background: var(--cobalt-soft); }
.chip:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .viewport .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { position: relative; display: grid; gap: 6px; align-content: start; padding: 26px 16px 16px 20px; color: var(--white); text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.card:hover { filter: brightness(1.12); transform: translateY(-2px); }
.card:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 4px; }
.card .tab { top: -13px; left: 12px; }
.card .thumb { position: absolute; right: 18px; top: 26px; width: 84px; height: auto; border-radius: 6px; transform: rotate(6deg); box-shadow: 0 16px 30px -14px #000, 0 0 0 1px rgba(255,255,255,.08); opacity: .95; }
.card h2 { font: 800 clamp(24px, 2.6vw, 32px)/1 var(--disp); text-transform: uppercase; letter-spacing: .01em; margin: 6px 0 0; max-width: 64%; color: var(--white); }
.card .set { margin: 0 0 10px; font-size: 13px; color: var(--muted); max-width: 64%; min-height: 2.6em; }
.card .eyebrow { margin-top: 8px; }
.card-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.card-nums div { padding: 8px 10px; background: rgba(22,26,31,.7); border: 1px solid var(--line); border-radius: 6px; }
.card-nums dt { font: 700 10px/1 var(--disp); letter-spacing: .14em; color: var(--muted); }
.card-nums dd { margin: 4px 0 0; font: 800 18px/1 var(--disp); font-variant-numeric: tabular-nums; }
.card-nums dd small { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.card .key-hint { margin-top: 6px; }
.card.skeleton h2 { color: var(--faint); }

/* ── toasts ── */
.toasts { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
@media (min-width: 640px) { .toasts { left: auto; width: min(440px, calc(100vw - 32px)); } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px 10px 14px; background: #0a0c0f; border: 1px solid var(--line-2); border-left: 3px solid var(--cobalt); border-radius: 6px; color: var(--white); font-size: 13.5px; line-height: 1.4; box-shadow: 0 20px 40px -20px #000, 0 0 0 1px #05070a; }
.toast.alert { border-left-color: #ff8a8a; }
.toast .t-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt-2); box-shadow: 0 0 8px var(--cobalt-glow); flex: none; }
.toast.alert .t-dot { background: #ff8a8a; box-shadow: none; }
.toast .t-text { flex: 1; }
.toast .t-act, .toast .t-x { font: 700 11px/1 var(--disp); letter-spacing: .14em; color: var(--cobalt-2); background: transparent; border: 1px solid var(--line-2); border-radius: 4px; padding: 6px 8px; cursor: pointer; }
.toast .t-x { color: var(--muted); padding: 6px 7px; }
.toast .t-act:hover, .toast .t-x:hover { border-color: var(--cobalt-2); color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .28s cubic-bezier(.2,.9,.2,1) both; }
  .toast.out { animation: toast-out .22s ease both; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
/* copy buttons beside addresses */
.copy { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; vertical-align: middle; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer; }
.copy:hover { color: var(--white); border-color: var(--cobalt-2); }
.copy:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }

/* recent lookups under the profile input */
.chips.recent { justify-content: flex-start; margin: -8px 0 14px; align-items: center; }
.chips.recent .tiny { margin-right: 4px; letter-spacing: .14em; font-weight: 700; font-family: var(--disp); }
.chip.dim { color: var(--faint); }
/* the QR scanner */
.scanner { border: 0; padding: 0; background: transparent; width: min(520px, 94vw); max-width: none; }
.scanner::backdrop { background: rgba(4,5,8,.8); backdrop-filter: blur(8px); }
.scanner-frame { background: #050608; border: 1px solid var(--line-2); border-radius: 8px; padding: 12px; display: grid; gap: 10px; box-shadow: 0 60px 120px -40px #000; }
.scanner video { width: 100%; aspect-ratio: 4 / 3; background: #0a0c0f; border-radius: 6px; object-fit: cover; }
.scanner .ctas { display: flex; gap: 8px; justify-content: flex-end; }
.scanner label.btn { cursor: pointer; }

/* ── the rail's standard instruments ── */
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toc a { display: block; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); background: rgba(22,26,31,.7); color: var(--white); text-decoration: none; font: 700 12px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; }
.toc a:hover, .toc a.on { border-left-color: var(--cobalt); }
.toc .empty { color: var(--faint); font: 400 12.5px/1.4 var(--sans); }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.links a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 5px; border: 1px solid var(--line); background: rgba(22,26,31,.7); color: var(--white); text-decoration: none; font: 700 12px/1 var(--disp); letter-spacing: .12em; }
.links a i { font-style: normal; color: var(--faint); letter-spacing: .06em; font-size: 10px; }
.links a:hover { border-color: var(--cobalt-2); }
.links a[aria-current] { border-left: 3px solid var(--cobalt); }
.state { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font: 700 10.5px/1.5 var(--disp); letter-spacing: .12em; color: var(--muted); }
.state dd { margin: 0; color: var(--white); font: 500 12px/1.5 var(--mono); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }