/* 速蹬雷达 — minimal terminal / Matrix: black-green, monospaced numbers, hairlines, light motion. */
:root {
  color-scheme: dark;
  --bg: #050806;
  --panel: #09110c;
  --panel-2: #0c1610;
  --line: #193a29;
  --line-soft: #10251a;
  --ink: #ddeae1;
  --ink-2: #8ba496;
  --ink-3: #718b7a;   /* 5.2:1 on --panel, so 10–12px labels and units stay legible over the rain */
  --accent: #39ff88;
  --accent-2: #22c76a;
  --accent-ink: #032412;
  --glow: rgba(57, 255, 136, .32);
  --mint: #6fe3c2;
  --warn: #f2c14e;
  --down: #ff7a6b;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --gutter: clamp(16px, 3.2vw, 40px);
  --radius: 4px;
  /* Stacked dark halo that hugs ladder text so rain passing beneath never reads as part of a value. */
  --halo: 0 0 1px var(--bg), 0 0 2px var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg), 0 0 10px var(--bg);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.65 var(--sans);
  background-image: radial-gradient(1200px 520px at 18% -8%, rgba(57, 255, 136, .055), transparent 70%);
  background-repeat: no-repeat;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
button, input, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -40px; background: var(--accent); color: var(--accent-ink); padding: 6px 12px; z-index: 50; }
.skip:focus { top: 8px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono, code { font-family: var(--mono); }

/* ---- navigation ---- */
.nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter); background: rgba(5, 8, 6, .88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.back-main { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--accent-2); border-radius: var(--radius); color: var(--accent); background: var(--panel-2); font-size: 14px; font-weight: 650; white-space: nowrap; }
.back-main:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.brand { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; letter-spacing: .06em; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand.small { font-size: 14px; margin: 0 0 8px; }
.cursor { width: 9px; height: 18px; background: var(--accent); box-shadow: 0 0 10px var(--glow); animation: blink 1.1s steps(1) infinite; }
.brand.small .cursor { height: 14px; width: 7px; }
@keyframes blink { 50% { opacity: .15; } }
.live-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-2);
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.live-pill[data-state="live"] { color: var(--accent); border-color: rgba(57, 255, 136, .35); }
.live-pill[data-state="live"] i { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2s ease-in-out infinite; }
.live-pill[data-state="stale"] { color: var(--warn); border-color: rgba(242, 193, 78, .4); }
.live-pill[data-state="stale"] i { background: var(--warn); }
@keyframes pulse { 50% { opacity: .35; } }
.nav-links { margin-left: 0; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-links .cta { color: var(--accent-ink); background: var(--accent); padding: 6px 12px; border: 0; border-radius: var(--radius); font-weight: 650; cursor: pointer; }
.nav-links .cta:hover { text-decoration: none; box-shadow: 0 0 16px var(--glow); color: var(--accent-ink); }
#lang-switch { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); padding: 3px 7px; border-radius: var(--radius); }

/* The project link is secondary to the Join action; the endorsement is attributed. */
.source-recommendation { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.source-link { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 9px;
  border: 1px solid #274535; border-radius: 5px; background: #0b1b12; color: #b7dbc5;
  font-size: 12px; line-height: 1.3; font-weight: 600; white-space: nowrap; }
.source-link:hover { background: #13291c; border-color: #4b775b; color: #d7f2e0; text-decoration: none; }
.source-link svg { flex: none; opacity: .75; }
.source-short { display: none; }
.source-endorsement { margin: 0; max-width: 230px; color: var(--ink-2); font-size: 11px; line-height: 1.45; }
.source-endorsement span { display: block; }
.source-endorsement span:first-child { color: var(--ink-3); font-size: 10px; letter-spacing: .04em; }
@media (min-width: 721px) and (max-width: 1180px) {
  .nav { flex-wrap: wrap; gap: 10px; }
  .nav > .brand { display: none; }
  .source-endorsement { max-width: 195px; }
  .nav-links { margin-left: auto; gap: 12px; }
}
/* Participation guide stays out of the dashboard until requested. */
.join-dialog { color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 100px #0009; }
.join-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
body:has(.join-dialog[open]) { overflow: hidden; }
.join-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.join-heading h2 { margin: 0; font-size: 21px; }
.join-close { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer; font: 28px/1 var(--sans); }
.join-close:hover { color: var(--accent); border-color: var(--accent-2); }
.join-content { padding: 24px; }
.join-step { display: flex; gap: 16px; margin-bottom: 24px; }
.join-number { color: var(--accent); font: 600 18px/1.6 var(--mono); }
.join-step h3 { margin: 0 0 8px; font-size: 17px; }
.join-step p { margin: 0; color: var(--ink-2); font-size: 14px; }
.join-download { display: inline-block; padding: 7px 12px; border: 1px solid var(--accent-2); border-radius: var(--radius); font-size: 14px; }
.join-screenshot { display: block; width: 100%; height: auto; border-radius: 6px; }
.join-feedback { margin: 20px 0 0; text-align: center; font-size: 14px; }
@media (max-width: 480px) { .join-heading { padding: 14px 16px; } .join-content { padding: 20px 16px; } }

.banner { margin: 0; padding: 8px var(--gutter); font-size: 13px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.banner.power-notice { flex-wrap: nowrap; align-items: flex-start; color: #bce4cb; background: #0b1b12; border-bottom: 1px solid var(--line); }
.banner.power-notice span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.banner.demo { color: var(--warn); background: repeating-linear-gradient(135deg, rgba(242, 193, 78, .07) 0 10px, rgba(242, 193, 78, .03) 10px 20px);
  border-bottom: 1px solid rgba(242, 193, 78, .25); }
.banner.demo b { font: 700 11px/1.6 var(--mono); letter-spacing: .12em; border: 1px solid currentColor; padding: 0 6px; border-radius: 3px; }
.banner.stale { color: var(--warn); background: rgba(242, 193, 78, .06); border-bottom: 1px solid rgba(242, 193, 78, .25); }

main { padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
section { scroll-margin-top: 64px; }
.head { margin: 0 0 18px; }
.head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.prompt { margin: 0 0 6px; font: 12px/1.4 var(--mono); color: var(--accent-2); letter-spacing: .02em; overflow-wrap: anywhere; }
.prompt::after { content: "_"; color: var(--accent); animation: blink 1.1s steps(1) infinite; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
h3 { font-size: 15px; }
h4 { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 8px; }
.lede { margin: 10px 0 0; color: var(--ink-2); max-width: 46em; }
.lede.small { font-size: 14px; }
.fine { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.6; }

/* ---- segmented controls ---- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.seg button { background: none; border: 0; padding: 7px 16px; color: var(--ink-2); cursor: pointer; font-size: 14px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); background: var(--panel-2); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); font-weight: 650; }
.seg.small button { padding: 5px 12px; font-size: 13px; }
.seg.tiny button { padding: 3px 10px; font: 12px/1.5 var(--mono); }
/* .seg clips its children, so the focus ring sits inside the button; dark on the pressed green. */
.seg button:focus-visible { outline-offset: -4px; }
.seg button:is([aria-selected="true"], [aria-pressed="true"]):focus-visible { outline-color: var(--accent-ink); }
@media (forced-colors: active) { .seg button:is([aria-selected="true"], [aria-pressed="true"]) { outline: 2px solid Highlight; outline-offset: -3px; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }

[hidden] { display: none !important; }
.ambient-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; }
/* Scan-born streams continue behind the remaining sections all the way to the footer. */
body[data-scan-rain] main { --panel: rgba(9, 17, 12, .72); --panel-2: rgba(11, 23, 16, .8); }
/* Autumn leaves (ui/autumn-leaves.mjs, the default background effect) fall in front of the sections
   (main, .foot, .banner: z-index 1) and under the tracking dock (8), the header (20) and every popover,
   tooltip and dialog. Small, sparse and half transparent; pointer-events none, so clicks, hovers and
   scrolling pass straight through. The panels keep their own colours; the ordinary system cursor stays visible. */
.autumn-leaves { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
/* Compute chips (ui/compute-chips.mjs) take the leaves' layer when chosen instead; one background paints at a time.
   Both react to the shared pointer (ui/effect-pointer.mjs: passive listeners, read inside their own loops) by
   moving their particles only: the leaves ride its air, the chips' magnet and socket ring are drawn on this
   same canvas. Neither layer ever takes pointer events, so clicks, hovers and scrolling
   (including touch) pass straight through. */
.compute-chips { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
/* Magnetic receiving ring (ui/rain.mjs + ui/magnetic-catch.mjs). Open at rest; while it holds a token,
   --heat (0–1) fills the ring around its rim clockwise and warms the core in that token's own heat
   colour (--tc-rgb: green → yellow → orange → red); data-charge="burst" is the release after the
   token bursts. Charge is expressed by the ring and glow, without a numeric readout. Only the
   children move; the ring's own transform is the pointer position. */
.token-catch-score {
  position: fixed; left: 0; top: 0; z-index: 25; width: 48px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  --catch-energy: #8be8e2; --heat: 0; --tc-rgb: 140, 255, 189; pointer-events: none; user-select: none;
  border: 1px solid #67e8f970; border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 10px #22d3ee24;
  color: #eafff6; font: 600 11px/1.1 var(--mono, ui-monospace, monospace);
  will-change: transform; isolation: isolate;
}
.token-catch-score::before {
  content: ''; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from -7deg, #b9faff 0 14deg, #1f677a88 14deg 90deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.token-catch-score::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #b9faff 0 1px, transparent 2px);
  opacity: .55; animation: magnet-breathe 2s ease-in-out infinite; animation-play-state: paused;
}
.tc-field { position: absolute; inset: -41px; border: 1px dashed #67e8f9;
  border-radius: 50%; opacity: 0; transform: scale(.72); transition: opacity .16s, transform .16s; pointer-events: none; }
.token-catch-score[data-magnet="pull"] .tc-field, .token-catch-score[data-magnet="hold"] .tc-field { opacity: .18; transform: scale(1); }
.token-catch-score[data-magnet="pull"], .token-catch-score[data-magnet="hold"] { border-color: #a5f3fc; box-shadow: 0 0 15px #22d3ee44; }
.token-catch-score.running::after { animation-play-state: running; }
/* Charge ring: around the glass itself, 3 px outside its rim, with a spark riding the front. */
.tc-ring, .tc-shock { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; }
.tc-ring { inset: -7px; transition: opacity .15s;
  background: conic-gradient(rgba(var(--tc-rgb), .95) calc(var(--heat) * 1turn), rgba(150, 230, 210, .13) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.tc-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; transform: rotate(calc(var(--heat) * 1turn));
  background: radial-gradient(circle at 50% 1.5px, #fff 0 1.5px, rgba(var(--tc-rgb), .9) 2.5px, transparent 5px); }
.tc-shock { inset: -2px; border: 2px solid #fff2dc;
  box-shadow: 0 0 12px rgba(255, 140, 50, .85), inset 0 0 8px rgba(255, 210, 140, .6); }
.token-catch-score[data-charge="charge"] {
  border-color: rgba(var(--tc-rgb), calc(.45 + var(--heat) * .5));
  box-shadow: inset 0 0 calc(6px + var(--heat) * 10px) rgba(var(--tc-rgb), calc(.12 + var(--heat) * .5)),
    0 0 calc(4px + var(--heat) * 16px) rgba(var(--tc-rgb), calc(.1 + var(--heat) * .55));
}
.token-catch-score[data-charge="charge"]::after { animation: none; opacity: calc(.18 + var(--heat) * .8);
  background: radial-gradient(ellipse at center, #fff8 0 calc(var(--heat) * 30%), rgba(var(--tc-rgb), 1) calc(var(--heat) * 30% + 8%), transparent 70%); }
.token-catch-score[data-charge="charge"] .tc-ring { opacity: 1; }
.token-catch-score[data-stage="4"] .tc-ring { animation: tc-crackle .12s steps(2, jump-none) infinite; }
/* Release: the glass flashes white-hot, the ring blows out as a shock ring and the charge drains. */
.token-catch-score[data-charge="burst"] { animation: tc-release .6s ease-out both; }
.token-catch-score[data-charge="burst"]::after { animation: tc-core-release .6s ease-out both; }
.token-catch-score[data-charge="burst"] .tc-ring { background: #fff2dc; animation: tc-drain .45s ease-out both; }
.token-catch-score[data-charge="burst"] .tc-shock { animation: tc-shock .5s cubic-bezier(.1, .6, .3, 1) both; }
.token-catch-score[hidden] { display: none; }
@keyframes magnet-breathe { 50% { opacity: .9; transform: scale(1.08); } }
@keyframes tc-crackle { 50% { opacity: .55; } }
@keyframes tc-release { from { border-color: #fff2dc; box-shadow: inset 0 0 14px rgba(255, 226, 170, .85), 0 0 22px rgba(255, 130, 40, .9); } }
@keyframes tc-core-release { from { opacity: 1; filter: blur(1px); transform: scale(1.5); } to { opacity: .08; } }
@keyframes tc-drain { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@keyframes tc-shock { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(2.8); } }
@media (pointer: fine) {
  .ladder-wrap[data-catch-cursor], .ladder-wrap[data-catch-cursor] * { cursor: none !important; }
}
main, .foot, .banner { position: relative; z-index: 1; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 600 11.5px/1.4 var(--mono); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }

/* ---- hero: the live ladder is the page ---- */
.hero { padding: 26px 0 30px; }
.ladder-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
.user-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; max-width: 100%; }
.user-search input { width: 190px; min-width: 0; max-width: 60vw; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); font: 12px var(--mono); }
.user-search button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--accent); font: 12px var(--mono); cursor: pointer; }
.user-search input:focus-visible, .user-search button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-search-status { max-width: 100%; overflow-wrap: anywhere; color: var(--ink-2); font: 11px var(--mono); }
/* Keep the ladder landmark named without repeating a large visible page title. */
.ladder-top h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Desktop always shows the token and cost columns; phones fold them behind this toggle. */
.totals-toggle { display: none; }
/* .flow-head (#replay-clock): the radar head above the ladder, see charge-device.css. */
.period-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 10px; }
.metric-note { margin: 0; font: 12px/1.6 var(--mono); color: var(--ink-2); }
.metric-note .tag { color: var(--warn); border: 1px solid rgba(242, 193, 78, .45); border-radius: 3px; padding: 0 5px; margin-right: 6px; font-size: 11px; }
.ladder-wrap { position: relative; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
/* Rain runs unmasked across the full width beneath the text; the text halos below keep glyphs readable. */
.row-rain { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; z-index: 0; will-change: transform; }
.ladder { position: relative; z-index: 1; table-layout: fixed; }
/* Keep column associations for assistive readers without a visible header band. */
.ladder thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ladder td.c-rank { white-space: nowrap; }
.track-user { appearance: none; padding: 0; border: 0; background: none; color: inherit;
  font-family: var(--sans); line-height: inherit; text-align: left; cursor: pointer; }
/* Four states stay apart without relying on colour alone: hover tints the row; keyboard focus is a green
   ring on the control; a locked rider gets a thin warm hairline, a left mark and a lock icon; a pinned
   rider gets a pin icon on its ranked row and its own card above the board (pin.mjs). */
.track-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.ladder tr.tracked-user { outline: 1px solid rgba(242, 193, 78, .38); outline-offset: -1px;
  box-shadow: inset 2px 0 0 rgba(242, 193, 78, .75); background: rgba(242, 193, 78, .03); }
.track-user[aria-pressed="true"]::after, .ladder tr.pinned-user .track-user::before { content: ""; display: inline-block; flex: none; width: 11px; height: 11px;
  vertical-align: -1px; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.track-user[aria-pressed="true"]::after { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2H13v7.5H3V7zm1.8 0h3.4V5a1.7 1.7 0 0 0-3.4 0z'/%3E%3C/svg%3E");
  margin-left: 6px; color: rgba(242, 193, 78, .85); }
.ladder tr.pinned-user .track-user::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1.5h4l-.6 4.2 2.6 2.3v1.5H8.7L8 14.5l-.7-5H4V8l2.6-2.3z'/%3E%3C/svg%3E");
  margin-right: 5px; color: var(--mint); }
.tracking-dock { position: fixed; z-index: 8; border: 1px solid rgba(242, 193, 78, .5); border-radius: 4px;
  background: #0b130d; box-shadow: 0 -6px 24px #0008, inset 2px 0 0 rgba(242, 193, 78, .75); }
.tracking-dock .ladder { width: 100%; }
.tracking-dock .ladder td, .tracking-dock .ladder tbody tr { border-bottom: 0; }
.tracking-clear { position: absolute; z-index: 2; top: -12px; right: 4px; display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 1px solid rgba(242, 193, 78, .6); border-radius: 50%;
  color: var(--warn); background: #10170d; font: 16px/1 var(--mono); cursor: pointer; }
.tracking-hint { position: absolute; right: 12px; bottom: 6px; z-index: 4; display: flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px); padding: 1px 4px 1px 9px; border: 1px solid rgba(242, 193, 78, .38);
  border-radius: 4px; background: rgba(14, 23, 13, .96); color: #d8c983; font: 11px/1.3 var(--mono); }
.tracking-hint button { width: 24px; height: 24px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; font-size: 16px; }
.model-detail-windows { margin-bottom: 10px; }
.ladder .c-rank { width: 100px; padding-left: 20px; }
.ladder .c-tokens, .ladder .c-cost { width: 150px; }
.ladder .c-value { width: 200px; padding-right: 22px; }
.ladder td { height: 76px; padding-top: 10px; padding-bottom: 10px; }
.rec { display: block; font: 600 17px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--halo); }
.rec small { font-size: 10px; font-weight: 400; color: var(--ink-3); margin-left: 5px; }
.rec .approx { margin: 0 4px 0 0; }
.rec.none { color: var(--ink-3); }
.ladder tbody tr { transition: background-color .6s; }
.ladder tbody tr:hover { background: rgba(12, 22, 16, .55); }
.rank { font: 700 24px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; text-shadow: var(--halo); }
.rank.top { color: var(--ink); }
.rank.r1 { color: var(--accent); text-shadow: 0 0 14px var(--glow), 0 0 4px var(--bg); }
.rank.medal { display: inline-flex; width: 32px; height: 36px; vertical-align: middle; text-shadow: none; }
.rank.medal svg { display: block; width: 100%; height: 100%; }
.rank.medal-1 { color: #e5c567; }
.rank.medal-2 { color: #b7c5ce; }
.rank.medal-3 { color: #c7946e; }
.mv { display: inline-block; min-width: 30px; margin-left: 8px; font: 600 11.5px/1 var(--mono); vertical-align: 4px; }
.mv.up { color: var(--accent); }
.mv.down { color: var(--down); }
.mv.new { color: var(--warn); border: 1px solid rgba(242, 193, 78, .55); border-radius: 3px; padding: 2px 4px; min-width: 0; }
.mv.unchanged, .mv.unknown { color: var(--ink-3); }
.name { display: block; font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: var(--halo); }
.name bdi { unicode-bidi: isolate; }
.name-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 24px; min-width: 0; }
.name-cell .name { flex: 0 1 auto; max-width: 100%; }
.row-meta { display: flex; flex: 1 1 180px; gap: 12px; align-items: center; min-width: 0;
  font: 11px/1.4 var(--mono); color: var(--ink-3); text-shadow: var(--halo); }
.row-meta .state { flex: 0 0 auto; }
.row-meta .state::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px 0; border-radius: 50%; background: currentColor; }
.row-meta .state.on { color: var(--accent-2); }
.row-meta .tools { display: flex; flex-wrap: wrap; gap: 3px 10px; min-width: 0; }
.row-meta .tool-group { white-space: nowrap; }
.row-meta .agent-speed { margin-left: 5px; color: #c0dacc; font: 500 10px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.row-meta .agent-speed::after { content: ' tok/s'; font-size: 8px; color: var(--ink-3); }
.me-tag { font: 700 10.5px/1 var(--mono); color: var(--accent-ink); background: var(--accent); border-radius: 3px; padding: 3px 5px; margin-left: 8px; vertical-align: 2px; text-shadow: none; }
.idle-tag { font: 11px/1 var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; margin-left: 8px; vertical-align: 2px; font-weight: 400; }
.value { font: 700 24px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink);
  text-shadow: var(--halo); }
.value small { font: 500 11px var(--mono); color: var(--ink-3); margin-left: 6px; }
.ladder tr.lead .value { color: var(--accent); text-shadow: 0 0 14px var(--glow), 0 0 3px var(--bg); }
tr.me { background: rgba(57, 255, 136, .07); box-shadow: inset 3px 0 0 var(--accent); }
.ladder tbody tr.flash { background: rgba(57, 255, 136, .025); }
.ladder tbody tr.flash-new { background: rgba(242, 193, 78, .025); }
tr.skeleton td, tr.empty td { color: var(--ink-2); padding: 34px 16px; text-align: center; font-family: var(--mono); font-size: 13px; height: auto; }
tr.skeleton td span::after { content: "▍"; color: var(--accent); margin-left: 4px; animation: blink 1.1s steps(1) infinite; }
.ladder-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; min-height: 30px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 12.5px var(--mono); color: var(--ink-2); }
.pager button { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); width: 30px; height: 28px; cursor: pointer; color: var(--ink-2); font-size: 15px; line-height: 1; }
.pager button:hover:not(:disabled) { color: var(--ink); border-color: var(--accent-2); }
.pager button:disabled { opacity: .3; cursor: default; }
.compare-note { margin: 6px 0 0; font: 11.5px/1.6 var(--mono); color: var(--ink-3); }
.howto { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13.5px; }
.howto > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary b { color: var(--accent); font-weight: 650; }
.howto > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--ink-3); }
.howto[open] > summary::after { content: "−"; }
.howto-steps { color: var(--ink-2); }
.howto-body { padding: 0 14px 14px; color: var(--ink-2); }
.howto-body > p { margin: 4px 0; }
.steps { margin: 6px 0; padding-left: 20px; }
.steps li { margin: 4px 0; }
.steps li::marker { font-family: var(--mono); color: var(--accent); }
.fx-toggle { background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-3); font: 12px var(--mono); padding: 3px 8px; cursor: pointer; }
.fx-toggle[aria-pressed="true"] { color: var(--accent-2); border-color: rgba(57, 255, 136, .3); }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 18px; }
.pill-warn { display: inline-block; font: 600 11px/1.5 var(--mono); color: var(--warn); border: 1px solid rgba(242, 193, 78, .5); border-radius: 3px; padding: 0 6px; letter-spacing: .04em; white-space: nowrap; }
.warn-line { color: var(--warn); opacity: .85; }
.dev { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: 13px; color: var(--ink-2); }
.dev summary { cursor: pointer; font: 12.5px var(--mono); color: var(--ink-3); list-style: none; }
.dev summary::-webkit-details-marker { display: none; }
.dev summary::before { content: "+ "; color: var(--accent-2); }
.dev[open] summary::before { content: "− "; }
.dev p { margin: 8px 0 0; }
.service-url { display: flex; gap: 8px; align-items: center; margin: 8px 0; max-width: 520px; }
.service-url code { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.service-url button { background: transparent; color: var(--accent); border: 1px solid rgba(57, 255, 136, .45); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; white-space: nowrap; }

/* ---- overview ---- */
.overview { padding: 34px 0; border-top: 1px solid var(--line-soft); }
.models { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line-soft); }
#models-title { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.models .chart-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters label { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.filters label::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.filters select { appearance: none; -webkit-appearance: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); width: 176px; height: 34px; padding: 0 34px 0 12px; font: 13px var(--mono); color: var(--ink);
  cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.filters select:hover { border-color: var(--ink-3); }
.filters select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent-2); }
.filters label:focus-within::after { border-color: var(--accent-2); }
.filters select:disabled { color: var(--ink-3); border-style: dashed; }
.filters .seg button { height: 32px; padding: 0 12px; line-height: 1; }
.filter-note { margin: -6px 0 14px; font: 12.5px/1.6 var(--mono); color: var(--warn); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kpi { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 18px 20px 16px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.kpi-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.kpi-split > div { min-width: 0; }
.kpi-total { border-left: 1px solid var(--line); padding-left: 16px; }
.kpi-split .kpi-value { font-size: clamp(24px, 3.2vw, 48px); }
.kpi-split .kpi-value small { font-size: 12px; margin-left: 4px; }
.kpi-split .kpi-sub { font-size: 11px; overflow-wrap: anywhere; }
.kpi-label { margin: 0; font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
.kpi-value { margin: 6px 0 4px; font: 700 clamp(38px, 5vw, 64px)/1.05 var(--mono); color: var(--accent); text-shadow: 0 0 22px rgba(57, 255, 136, .22);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value small { font: 500 15px var(--mono); color: var(--ink-2); text-shadow: none; margin-left: 8px; }
.kpi-value.unknown { color: var(--ink-3); text-shadow: none; }
.kpi-sub { margin: 0; font: 12.5px/1.6 var(--mono); color: var(--ink-3); }
.kpi-metrics { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.kpi-metrics > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.kpi-metrics dt { color: var(--ink-3); font-size: 11px; }
.kpi-metrics dd { margin: 0; color: var(--ink-2); font: 600 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.kpi-metrics dd small { font-size: 10px; font-weight: 400; margin-left: 4px; }
.kpis + .models { margin-top: 28px; }

.charts { position: relative; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 16px 10px; }
.chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.models .chart-head { margin-top: 22px; }
.legend { margin: 0 0 0 auto; font: 11.5px var(--mono); color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--accent); margin-left: 8px; }
.legend i.l-peak { border-top: 1px dashed var(--accent); opacity: .7; }
.legend i.l-gap { height: 9px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 4px); }
.chart { position: relative; height: 180px; touch-action: pan-y; }
.models .chart { height: 220px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 6px 4px 0; }
.last-dot { animation: pulse 2s ease-in-out infinite; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .empty-msg { position: absolute; inset: 0; display: grid; place-items: center; font: 13px var(--mono); color: var(--ink-3); text-align: center; padding: 12px; }
/* Placement and rows only; the frame is the shared tooltip look (tooltip.css). */
.chart-tip { position: absolute; z-index: 5; pointer-events: none; font: 12px/1.6 var(--mono); min-width: 180px; }
.chart-tip b { color: var(--ink); font-weight: 600; }
.chart-tip .t { color: var(--accent); margin-bottom: 2px; }
.chart-tip .warn { color: var(--warn); }
.chart-tip .trend-gap-note { max-width: 200px; }

/* Let the top-ten-driven ambient rain show faintly through statistics panels;
   text, chart strokes and tooltips remain in the foreground. */
#site .kpi, #site .table-wrap, #site .models .chart, #site .charts { background: rgba(9, 17, 12, .82); }

.usage-summary { margin-top: 22px; }
.dist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.usage-grid { display: grid; grid-template-columns: minmax(180px, 1.25fr) repeat(4, minmax(0, 1fr)); margin: 0; }
.usage-grid > div { min-width: 0; padding: 4px 16px; border-left: 1px solid var(--line-soft); }
.usage-grid > div:first-child { padding-left: 0; border-left: 0; }
.usage-grid dt { margin: 0 0 8px; color: var(--ink-3); font-size: 12px; }
.usage-grid dd { margin: 0; font: 650 22px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.usage-grid .usage-main dd { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; color: var(--accent); text-shadow: 0 0 18px rgba(57, 255, 136, .2); }
.usage-sub { font: 11.5px/1.5 var(--mono); color: var(--ink-3); margin: 7px 0 0; }
.usage-foot { display: flex; justify-content: flex-end; gap: 6px 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.usage-foot p { margin: 0; font: 11.5px/1.5 var(--mono); color: var(--ink-3); }
.delta { display: block; font: 11.5px/1.5 var(--mono); color: var(--ink-3); margin-top: 2px; }
.delta.up { color: var(--accent-2); }
.delta.down { color: var(--down); }

.dist { margin-top: 22px; }
.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .label { font-family: var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .label.grouped { color: var(--ink-3); font-style: italic; }
.bar-row .track { height: 10px; background: var(--line-soft); border-radius: 0 3px 3px 0; position: relative; }
.bar-row .track i { position: absolute; inset: 0 auto 0 0; background: var(--accent-2); border-radius: 0 3px 3px 0; min-width: 2px; }
.bar-row:first-child .track i { background: var(--accent); }
.bar-row .v { font: 12.5px var(--mono); color: var(--ink); text-align: right; white-space: nowrap; min-width: 72px; }
.bar-row .v small { color: var(--ink-3); margin-left: 4px; }
.bars .none { font: 13px var(--mono); color: var(--ink-3); padding: 10px 0; }

/* ---- model analysis ---- */
.model-table { table-layout: fixed; }
.model-table .m-name { width: 22%; }
.model-table .m-harness { width: 34%; }
.model-table .m-value { width: 14%; }
.model-table .m-spark { width: 16%; }
.model-table .m-req { width: 9%; }
.model-table .m-dev { width: 5%; }
.harness-list { display: flex; flex-wrap: wrap; gap: 5px 14px; font: 12px/1.5 var(--mono); color: var(--ink-2); }
.harness-entry { display: inline-flex; align-items: baseline; gap: 5px; }
.harness-entry small { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }

.model-name { font: 600 14px var(--mono); }
.model-name .sub { display: block; font: 11px var(--mono); color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.flag { font: 10.5px/1 var(--mono); color: var(--warn); border: 1px solid rgba(242, 193, 78, .45); border-radius: 3px; padding: 2px 4px; margin-left: 6px; vertical-align: 1px; }
.flag.grouped { color: var(--ink-3); border-color: var(--line); }
.model-table .value { font-size: 18px; color: var(--accent); }
.spark { width: 120px; height: 28px; display: block; color: var(--accent-2); }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line-soft); margin-top: 20px; padding: 26px var(--gutter) 40px; }
.foot-row { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.foot-row .brand.small { margin: 0; }
.foot-links { margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .usage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .usage-grid .usage-main { grid-column: 1 / -1; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
  .usage-grid > div:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 0; }
  section { scroll-margin-top: 12px; }
  body { font-size: 14.5px; }
  .nav { display: none; }
  .back-main { grid-column: 1 / -1; justify-self: start; }
  .nav > .brand { display: none; }
  .nav > .live-pill { justify-self: start; }
  .brand { font-size: 15px; }
  .nav-links { margin-left: 0; gap: 8px; font-size: 12.5px; white-space: nowrap; }
  .nav-links a:not(.cta):not(#lang-switch):not(.nav-stats):not(.nav-heroes):not(.nav-ladder):not(.source-link) { display: none; }
  .nav-links .cta { padding: 4px 9px; }
  .live-pill { font-size: 11px; padding: 4px 7px; }
  .live-pill .clock { display: none; }
  .banner { font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
  .hero { padding-top: 14px; padding-bottom: 24px; }
  .ladder-top { display: flex; }
  .user-search { width: 100%; }
  .user-search-status:not(:empty) { flex-basis: 100%; }
  .ladder-top > div { min-width: 0; }
  .ladder-top h1 { font-size: 24px; }
  .totals-toggle { display: none; }

  /* Phone rows: one two-line band per user. Rank and movement | avatar, nickname and
     "N 路并发 Codex x3" | live speed over its unit. Collapsed rows keep every field to one
     line and fixed minimum heights, so a new 5 s frame cannot change row heights;
     .show-totals (#ladder-totals) adds a tokens/cost line and lets long nicknames and
     Harness lists wrap. */
  .ladder, .ladder thead, .ladder tbody { display: block; }
  .ladder colgroup { display: none; }
  .ladder tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto;
    grid-template-areas: "rank main main speed" ". tok cost cost"; column-gap: 8px; align-items: center; padding: 8px 10px; }
  .ladder thead tr { padding-top: 0; padding-bottom: 0; background: rgba(9, 17, 12, .6); border-bottom: 1px solid var(--line); }
  .ladder th { width: auto !important; padding: 5px 0 !important; border: 0; font-size: 10px; background: none; }
  .ladder thead .c-tokens, .ladder thead .c-cost { display: none; }
  .ladder tbody tr { border-bottom: 1px solid var(--line-soft); }
  .ladder tbody tr:last-child { border-bottom: 0; }
  .ladder td { width: auto !important; height: auto; border: 0; padding: 0 !important; min-width: 0; }
  .ladder .c-rank { grid-area: rank; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
  .ladder tbody .c-rank { min-height: 40px; }
  .ladder .c-name { grid-area: main; }
  .ladder .c-value { grid-area: speed; }
  .ladder .c-tokens { grid-area: tok; }
  .ladder .c-cost { grid-area: cost; justify-content: flex-end; }
  .ladder tbody tr.empty, .ladder tbody tr.skeleton { display: block; padding: 30px 12px; }
  .rank { font-size: 16px; }
  .rank.medal { width: 24px; height: 27px; }
  .mv { margin: 0; min-width: 0; font-size: 9.5px; vertical-align: 0; }
  .mv.new { padding: 0 3px; }
  .ladder .c-rank .mv:empty { display: none; }
  .ladder .name-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 0; }
  .ladder .profile-avatar { grid-area: 1 / 1; width: 22px; height: 22px; margin-right: 7px; }
  .ladder .name { grid-area: 1 / 2; display: flex; align-items: center; min-width: 0; max-width: none; min-height: 22px; font-size: 15px; line-height: 1.3; }
  .ladder .name bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ladder .me-tag { flex: none; margin-left: 6px; }
  /* The status line starts at the row's text edge whether or not the user has an avatar. */
  .ladder .row-meta { grid-area: 2 / 1 / 3 / 3; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.4; }
  .ladder .row-meta > span, .ladder .row-meta .tool-group { display: inline; margin-right: 8px; }
  .ladder .row-meta > .tools { margin-right: 0; }
  .ladder .row-meta .state, .ladder .row-meta .device-count, .ladder .row-meta .tool-group { white-space: nowrap; }
  .ladder .row-meta .state.on { font-weight: 600; }
  .ladder .row-meta .tool-group { color: var(--ink-2); }
  .ladder .value { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 20px; line-height: 1; }
  .ladder .value small { margin: 3px 0 0; font-size: 10px; line-height: 1; }
  .ladder tbody .c-tokens, .ladder tbody .c-cost { display: none; align-items: baseline; gap: 5px; margin-top: 5px; }
  .ladder .c-tokens::before, .ladder .c-cost::before { content: attr(data-label); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 10px/1.3 var(--mono); color: var(--ink-3); text-shadow: var(--halo); }
  .ladder .rec { flex: none; font-size: 13px; }
  .ladder.show-totals tbody .c-tokens, .ladder.show-totals tbody .c-cost { display: flex; }
  .ladder.show-totals .name bdi { white-space: normal; overflow-wrap: anywhere; }
  /* Expanded: real flex wrapping. The meta spans have no whitespace between them, so
     white-space alone leaves the line nowhere to break. Each group moves to a new line
     whole; only a group wider than the whole line breaks inside. */
  .ladder.show-totals .row-meta, .ladder.show-totals .row-meta > .tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    min-width: 0; max-width: 100%; overflow: visible; white-space: normal; }
  .ladder.show-totals .row-meta > span, .ladder.show-totals .row-meta .tool-group { margin-right: 0; min-width: 0; max-width: 100%;
    white-space: normal; overflow-wrap: anywhere; }
  .ladder-foot { margin-top: 8px; }
  .pager button { width: 44px; height: 44px; font-size: 18px; }
  .howto-steps { display: none; }
  .kpis { grid-template-columns: 1fr; gap: 10px; }
  .filters { width: 100%; }
  .filters label { flex: 1 1 45%; }
  .filters select { flex: 1; max-width: none; min-width: 0; }
  .filters .seg { flex: 1 1 100%; }
  .filters .seg button { flex: 1; }
  .chart { height: 150px; }
  .legend { margin-left: 0; width: 100%; }
  .usage-summary { padding: 16px; }
  .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .usage-grid > div { padding: 0; border-left: 0; }
  .usage-grid .usage-main { margin-bottom: 0; }
  .usage-grid dd { font-size: 20px; }
  .dist-grid { grid-template-columns: 1fr; }
  .model-table thead { display: none; }
  .model-table, .model-table tbody { display: block; }
  .model-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "harness harness" "spark meta"; gap: 4px 10px; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); }
  .model-table td { padding: 0; border: 0; }
  #model-table td { width: auto; }
  .model-table td.m-harness { grid-area: harness; }
  .model-table td.m-name { grid-area: name; min-width: 0; }
  .model-table td.m-value { grid-area: value; }
  .model-table td.m-spark { grid-area: spark; }
  .model-table td.m-req { grid-area: meta; text-align: right; font: 12px var(--mono); color: var(--ink-3); }
  .model-table td.m-dev { display: none; }
  .model-table td.m-req::after { content: attr(data-devices); margin-left: 8px; }
  .model-table tr.empty { display: block; }
}
@media (max-width: 380px) {
  .seg button { padding: 6px 10px; }
  .kpi-value { font-size: 34px; }
  .ladder tr { grid-template-columns: 30px minmax(0, 1fr) auto auto; column-gap: 7px; padding-left: 8px; padding-right: 8px; }
  .ladder .value { font-size: 18px; }
  .ladder .name { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Model history is available on demand from the inline preview. */
.spark-preview { cursor: zoom-in; border-radius: 3px; }
.spark-preview:hover { color: var(--accent); background: rgba(57, 255, 136, .035); }
.spark-preview:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.model-dialog { color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(1000px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 100px #0009; }
.model-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
body:has(.model-dialog[open]) { overflow: hidden; }
.model-dialog h2 { font: 600 19px var(--mono); overflow-wrap: anywhere; }
.model-detail-content { position: relative; padding: 16px 18px 12px; }
.model-detail-content > .legend { margin: 0 0 10px; }
.model-detail-content .chart { height: clamp(220px, 40dvh, 360px); }

/* Inline trends disclose their existing expand action on pointer and keyboard focus. */
.spark-zoom { opacity: 0; transition: opacity 120ms ease; }
.spark-preview:hover .spark-zoom, .spark-preview:focus-visible .spark-zoom { opacity: 1; }
@media (hover: none) { .spark-zoom { opacity: .7; } }
.chart-unit { font-family: var(--mono); white-space: nowrap; }
@media (max-width: 600px) {
  .charts #chart-series { display: flex; flex-wrap: wrap; max-width: 100%; }
  .charts #chart-series button { flex: 1 0 auto; }
}

.profile-avatar{width:32px;height:32px;object-fit:cover;border-radius:50%;flex:none;align-self:center}.mode-details{font-size:.72rem;font-weight:400;color:var(--muted);margin-top:.4rem}.mode-details summary{cursor:pointer}.mode-entry{margin-top:.35rem;white-space:normal;line-height:1.5}

/* ---- live speed LED (ui/led.mjs): the speed cell's own light, live view only ----
   Visual tiers, not a rating: t1 > 0, t2 ≥ 50, t3 ≥ 120, t4 ≥ 200, t5 ≥ 500, t6 ≥ 1000,
   t7 ≥ 2000 tok/s, based on the displayed current rate. Kept: the pixel meter, the number and the
   tier colours (number ink and glow, meter gradient, a static tint behind the number). The
   moving part is the orbit engine (.led-rings and .led-wind, below): rings around the number
   charge, then a plume fires left from the number's left edge, and ui/rain-wind.mjs pushes the
   falling tokens inside exactly that box with the same cycle. Every layer is absolutely
   positioned with pointer-events:none, so layout and clicks never change; loops animate
   transform and opacity only and run on the shared document clock (--led-t, --jet-t), so the
   5 s re-render does not restart them.
   Off: effects switch (data-fx-off), hidden tab (data-led-paused), off-screen cell (data-led-idle).
   Replay hold (data-rain-hold) fades it out. Reduced motion keeps only the static meter and
   tier colours (global rule above). */
.ladder td.c-value { position: relative; }
.c-value { --led-pitch: 8px; --led-cell: 6px; }
.ladder .c-value .value { position: relative; z-index: 1; display: inline-flex; align-items: baseline; }
.ladder .c-name, .ladder .c-rank { position: relative; z-index: 2; }
.led { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity .6s, visibility 0s; }
.ladder-wrap[data-fx-off] .led, .ladder-wrap[data-led-paused] .led, .c-value[data-led-idle] .led { display: none; }
.ladder-wrap[data-rain-hold] .led { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }

/* Pixel meter under the number. Lit cells move in whole cells, stepping from last frame's count. */
.led-meter { position: absolute; right: 22px; top: calc(50% + 17px); width: calc(var(--led-pitch) * 10); height: 4px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(57, 255, 136, .13) 0 var(--led-cell), transparent 0 var(--led-pitch)); }
.led-meter.led-full { box-shadow: 0 0 6px rgba(250, 204, 21, .5), 0 0 14px rgba(129, 140, 248, .3); }   /* a full meter (about 417 tok/s and up) glows */
.led-lit { position: absolute; inset: 0; background: var(--led-lit);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--led-cell), transparent 0 var(--led-pitch));
  mask: repeating-linear-gradient(90deg, #000 0 var(--led-cell), transparent 0 var(--led-pitch));
  transform: translateX(calc((var(--led-cells, 0) - 10) * var(--led-pitch)));
  transition: transform calc(var(--led-steps, 1) * 80ms) steps(var(--led-steps, 1), jump-end); }
.led-lit::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--led-pitch) - var(--led-cell)); width: var(--led-cell);
  background: var(--led-tip); animation: led-tip var(--led-tip-time) var(--led-tip-ease, ease-in-out) infinite var(--led-t, 0s); }
.led-chase { position: absolute; top: 0; bottom: 0; left: 0; width: var(--led-pitch); background: #f2fff7; opacity: 0;
  animation: led-chase var(--led-chase-time) steps(10, jump-none) infinite var(--led-t, 0s); }
.led.t1 { --led-lit: linear-gradient(90deg, rgba(34, 199, 106, .5), rgba(57, 255, 136, .75)); --led-tip: #39ff88; --led-tip-time: 3.2s; }
.led.t2 { --led-lit: linear-gradient(90deg, #178c4b, #39ff88); --led-tip: #c8ffdf; --led-tip-time: 1.6s; --led-chase-time: 2s;
  --led-burst: rgba(57, 255, 136, .55); }
.led.t3 { --led-lit: linear-gradient(90deg, #22c76a, #3ff2ff); --led-tip: #fff7d6; --led-tip-time: .8s; --led-chase-time: 1s;
  --led-burst: rgba(63, 242, 255, .6); }
.led.t4 { --led-lit: linear-gradient(90deg, #3ff2ff, #818cf8 55%, #facc15); --led-tip: #fff7d6; --led-tip-time: .32s;
  --led-tip-ease: steps(2, jump-none); --led-chase-time: .55s; --led-burst: rgba(250, 204, 21, .6); }

/* Tier tints, all behind the number and all still: the colour says the tier, the wind says the speed. */
.led-field { position: absolute; inset: 0; }
.led-field::before, .t4 .led-field::after { content: ""; position: absolute; inset: 0; }
.t2 .led-field::before { background: repeating-linear-gradient(180deg, rgba(57, 255, 136, .09) 0 1px, transparent 0 3px);
  -webkit-mask: linear-gradient(90deg, transparent 10%, #000 65%); mask: linear-gradient(90deg, transparent 10%, #000 65%); }
.t3 .led-field::before { background: radial-gradient(circle, rgba(63, 242, 255, .2) .8px, transparent 1.3px) 0 0 / 5px 5px;
  -webkit-mask: linear-gradient(90deg, transparent 5%, #000 70%); mask: linear-gradient(90deg, transparent 5%, #000 70%); }
.t4 .led-field::before { inset: -45% -10% -45% 20%; background: radial-gradient(closest-side, rgba(129, 140, 248, .3), transparent); }
.t4 .led-field::after { inset: -25% 25% -25% 30%; background: radial-gradient(closest-side, rgba(250, 204, 21, .2), transparent); }

/* One ring when a row climbs a tier between two frames. */
.led-burst { position: absolute; top: 50%; right: 18px; width: 120px; height: 120px; margin-top: -60px; opacity: 0;
  background: radial-gradient(closest-side, transparent 55%, var(--led-burst) 72%, transparent);
  animation: led-burst .9s cubic-bezier(.2, .7, .3, 1); }

/* Crossing a tier: the new backdrop fades in, the old one fades out underneath. */
.led-in > .led-field { transition: opacity .7s ease-out; }
.led.led-out { opacity: 0; visibility: hidden; transition: opacity .8s ease-in, visibility 0s .8s; }

/* The orbit engine (ui/led.mjs, ui/jet-pulse.mjs): two tilted orbit rings around the number and one
   plume firing left from the number's left edge, on one duty cycle per row. The cycle runs on the
   document clock: animation-duration --jet-p (by tier), delay --jet-delay = --jet-t − --jet-off
   (--jet-t pins every restart to the timeline, --jet-off staggers the rows). ui/rain-wind.mjs pushes
   the token rain with the same cycle, so the plume's keyframe stops are the push envelope
   (jet-pulse.mjs JET: fire 60 %, full 63.5 %, fade 86 %, out 94 %, linear in between).
   Charge (to 60 %): the rings converge on the number and the number lifts by at most 2 px.
   Fire (60–94 %): the rings snap open; the plume, its long core streak and up to three energy shots
   run left through the plume's box, which is exactly where the rain is pushed. Rest: a pilot glow.
   Every cycle animation is declared under the one running selector below, so a cell's rings, plume,
   shots and number lift always start and stop together and one --jet-t fits all of them; per-tier and
   per-device differences inside a running engine use visibility, never display, for the same reason. */
.ladder .c-value { --jet-delay: calc(var(--jet-t, 0ms) - var(--jet-off, 0ms)); }

/* Orbit rings, centred on the number and its unit (--led-chars: the number's length; 14.4px per
   24px mono digit, 39px for the unit), 13px clear on either side. Each ring is a circle squashed
   into a tilted ellipse (the static rotate and scale properties); spinning it inside that squash
   (transform) runs its bright arcs around the orbit. They sit under the number (z-index 0 < 1) and
   never take part in layout. .led-rings draws ring A (::before) and its counter-turning twin B
   (::after); .orbit-sky, its sibling on the same box and the same jet cycle, draws what the faster
   orbit tiers add: the wide flat outer ring C (::before), the halo (::after, under the rest) and up to
   three satellites (i), riding A, B and C. The orbit tier (ui/orbit-tiers.mjs, data-orbit-tier,
   exact bounds at 100/200/400/600/800/1000/2000/5000 tok/s) sets which of them exist (led.mjs writes
   the sky's classes), each ring's tilt and arc count (--ra-tilt, --ra-n, …) and the spin
   (--orbit-spin); the tier blocks below hold each tier's palette, stroke and satellite size. */
#ladder-rows .led-rings, #ladder-rows .orbit-sky { position: absolute; z-index: 0; top: 50%; right: 9px; height: 0; pointer-events: none;
  --led-num-w: calc(var(--led-chars, 4) * 14.4px + 39px); width: calc(var(--led-num-w) + 26px);
  opacity: .5; transition: opacity .6s, visibility 0s; }
#ladder-rows .led-rings::before, #ladder-rows .led-rings::after, #ladder-rows .orbit-sky::before { content: ""; position: absolute; left: 0; top: 0;
  width: 100%; aspect-ratio: 1; margin-top: -50%; border-radius: 50%; opacity: calc(.35 + var(--led-air, .6) * .65);
  --seg: calc(1turn / var(--ring-n, 1));   /* one bright arc per segment, its head at the segment's end */
  background: repeating-conic-gradient(transparent 0 calc(var(--seg) * .5), var(--ring-arc) calc(var(--seg) * .84), var(--ring-head) calc(var(--seg) * .995), transparent 0 var(--seg)), var(--ring-base);
  --ring-mask: radial-gradient(closest-side, transparent calc(100% - var(--ring-w, 2px) - .5px), #000 calc(100% - var(--ring-w, 2px)), #000 calc(100% - .5px), transparent);
  -webkit-mask: var(--ring-mask); mask: var(--ring-mask); transform: rotate(0turn); transition: rotate .8s, scale .8s; }
#ladder-rows .led-rings::before { --ring-n: var(--ra-n, 1); --ring-arc: var(--ra-arc, rgba(167, 139, 250, .55)); --ring-head: var(--ra-head, #e4dcff);
  --ring-base: var(--ra-base, rgba(167, 139, 250, .16)); rotate: var(--ra-tilt, -8deg); scale: 1 var(--ra-k, .3); }
/* B turns the other way, so its arcs run mirrored: the head leads. */
#ladder-rows .led-rings::after { --ring-n: var(--rb-n, 1); --ring-arc: var(--rb-arc, rgba(125, 211, 252, .5)); --ring-head: var(--rb-head, #e2f8ff);
  --ring-base: var(--rb-base, rgba(125, 211, 252, .13)); rotate: var(--rb-tilt, 7deg); scale: 1 var(--rb-k, .22);
  background: repeating-conic-gradient(transparent 0 calc(var(--seg) * .005), var(--ring-head) 0, var(--ring-arc) calc(var(--seg) * .16), transparent calc(var(--seg) * .5) var(--seg)), var(--ring-base); }
/* C: wider (--rc-grow) and flatter, clear of the number's glyphs above and below. */
#ladder-rows .orbit-sky::before { --ring-n: var(--rc-n, 1); --ring-arc: var(--rc-arc, rgba(250, 204, 21, .5)); --ring-head: var(--rc-head, #fff3c4);
  --ring-base: var(--rc-base, rgba(250, 204, 21, .14)); rotate: var(--rc-tilt, -3deg); scale: 1 var(--rc-k, .19);
  left: calc(var(--rc-grow, 20px) / -2); width: calc(100% + var(--rc-grow, 20px)); margin-top: calc(-50% - var(--rc-grow, 20px) / 2);
  --ring-mask: var(--rc-mask, radial-gradient(closest-side, transparent calc(100% - var(--ring-w, 2px) - .5px), #000 calc(100% - var(--ring-w, 2px)), #000 calc(100% - .5px), transparent)); }
/* The halo: a soft band along C (its peak on C's line), seen mostly past the number's ends. */
#ladder-rows .orbit-sky::after { content: ""; position: absolute; z-index: -1; top: 0; border-radius: 50%; aspect-ratio: 1;
  left: calc(var(--rc-grow, 20px) / -2 - var(--halo-pad, 14px)); width: calc(100% + var(--rc-grow, 20px) + 2 * var(--halo-pad, 14px));
  margin-top: calc(-50% - var(--rc-grow, 20px) / 2 - var(--halo-pad, 14px));
  rotate: var(--rc-tilt, -3deg); scale: 1 var(--rc-k, .19); transition: rotate .8s, scale .8s;
  background: var(--halo-bg, radial-gradient(closest-side, transparent 66%, var(--halo-c, rgba(192, 160, 255, .17)) 84%, transparent));
  -webkit-mask: var(--halo-mask, none); mask: var(--halo-mask, none); }
#ladder-rows .orbit-sky:not(.ring-c)::before, #ladder-rows .orbit-sky:not(.halo-steady, .halo-corona, .halo-nova)::after { content: none; }
#ladder-rows .c-value[data-orbit-tier="1"] .led-rings::after { content: none; }   /* tier 1 draws ring A only */
/* Satellites: each i is its ring's square (same tilt, squash and centre) turning on its own pace and
   phase, with a short tail on the ring behind it; its ::before is the satellite itself, counter-turned
   and un-squashed so it stays round anywhere on the ellipse. */
#ladder-rows .orbit-sky i { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; margin-top: -50%;
  opacity: calc(.55 + var(--led-air, .6) * .45); transform: rotate(calc(var(--o-ph) * 1turn)); transition: rotate .8s, scale .8s; }
#ladder-rows .orbit-sky i:not(.on) { display: none; }
#ladder-rows .orbit-sky i:nth-child(1) { rotate: var(--ra-tilt, -8deg); scale: 1 var(--ra-k, .3); --o-k: var(--ra-k, .3); --o-ph: .3; --o-pace: .8;
  --sat-c: var(--ra-head, #e4dcff); --sat-glow: var(--ra-arc, rgba(167, 139, 250, .55)); }
#ladder-rows .orbit-sky i:nth-child(2) { rotate: var(--rb-tilt, 7deg); scale: 1 var(--rb-k, .22); --o-k: var(--rb-k, .22); --o-ph: .62; --o-pace: 1.2;
  --sat-c: var(--rb-head, #e2f8ff); --sat-glow: var(--rb-arc, rgba(125, 211, 252, .5)); }
#ladder-rows .orbit-sky i:nth-child(3) { rotate: var(--rc-tilt, -3deg); scale: 1 var(--rc-k, .19); --o-k: var(--rc-k, .19); --o-ph: .85; --o-pace: 1.5;
  --sat-c: var(--rc-head, #fff3c4); --sat-glow: var(--rc-arc, rgba(250, 204, 21, .5));
  left: calc(var(--rc-grow, 20px) / -2); width: calc(100% + var(--rc-grow, 20px)); margin-top: calc(-50% - var(--rc-grow, 20px) / 2); }
#ladder-rows .orbit-sky i::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 calc(1turn - var(--sat-tail, .1turn)), var(--sat-glow) calc(1turn - var(--sat-tail, .1turn) * .45), var(--sat-c) 1turn);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px), #000 calc(100% - .5px), transparent);
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px), #000 calc(100% - .5px), transparent); }
#ladder-rows .orbit-sky i:nth-child(2)::after { background: conic-gradient(var(--sat-c) 0, var(--sat-glow) calc(var(--sat-tail, .1turn) * .45), transparent var(--sat-tail, .1turn)); }
#ladder-rows .orbit-sky i::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 1px; border-radius: 50%;
  width: var(--sat-d, 4px); height: var(--sat-d, 4px); margin: calc(var(--sat-d, 4px) / -2) 0 0 calc(var(--sat-d, 4px) / -2);
  background: radial-gradient(circle, #fff 0 35%, var(--sat-c) 70%); box-shadow: 0 0 6px 1px var(--sat-glow);
  rotate: calc(var(--o-ph) * -1turn); scale: 1 calc(1 / var(--o-k)); transition: scale .8s; }

/* The nine orbit tiers (ui/orbit-tiers.mjs ORBIT_STYLES; the structure itself comes from led.mjs).
   Low tiers stay quiet and thin; every step adds structure, and the brightest heads stay small and
   under the number. */
#ladder-rows .c-value[data-orbit-tier] { --ring-w: 2px; --rc-grow: 20px; --sat-d: 4px; --sat-tail: .1turn; }
/* 1 glimmer (under 100): one thin slate ring, one short arc. */
#ladder-rows .c-value[data-orbit-tier="1"] { --ring-w: 1.5px; --ra-k: .26;
  --ra-arc: rgba(148, 163, 184, .42); --ra-head: #dbe4f0; --ra-base: rgba(148, 163, 184, .1); }
/* 2 twin (100–199): an ice ring and a dashed violet twin turning the other way. */
#ladder-rows .c-value[data-orbit-tier="2"] { --ra-k: .28; --ra-arc: rgba(125, 211, 252, .48); --ra-head: #e2f8ff; --ra-base: rgba(125, 211, 252, .12);
  --rb-k: .2; --rb-arc: rgba(167, 139, 250, .36); --rb-head: #d9d0ff; --rb-base: repeating-conic-gradient(rgba(167, 139, 250, .3) 0 3deg, transparent 0 10deg); }
/* 3 cross (200–399): the violet and ice pair, A split into two arcs, wider crossing. */
#ladder-rows .c-value[data-orbit-tier="3"] { --ra-arc: rgba(167, 139, 250, .56); --ra-head: #e4dcff; --rb-arc: rgba(125, 211, 252, .5); --rb-head: #e2f8ff; }
/* 4 moon (400–599): two arcs on both rings and the first satellite, on A. */
#ladder-rows .c-value[data-orbit-tier="4"] { --ra-arc: rgba(178, 150, 255, .62); --ra-head: #efe9ff; --rb-arc: rgba(125, 211, 252, .56); --rb-head: #e8f9ff; }
/* 5 binary (600–799): a satellite on each ring, cyan twin, steeper crossing. */
#ladder-rows .c-value[data-orbit-tier="5"] { --ra-k: .31; --ra-arc: rgba(192, 160, 255, .66); --ra-head: #f5f0ff;
  --rb-arc: rgba(103, 232, 249, .6); --rb-head: #ecfeff; --rb-base: rgba(103, 232, 249, .14); }
/* 6 triad (800–999): the wide flat ring C, gold dashes and one gold arc. */
#ladder-rows .c-value[data-orbit-tier="6"] { --ra-k: .31; --ra-arc: rgba(192, 160, 255, .66); --ra-head: #f5f0ff;
  --rb-arc: rgba(103, 232, 249, .6); --rb-head: #ecfeff; --rb-base: rgba(103, 232, 249, .14);
  --rc-arc: rgba(250, 204, 21, .5); --rc-head: #fff3c4; --rc-base: repeating-conic-gradient(rgba(250, 204, 21, .24) 0 2deg, transparent 0 8deg); }
/* 7 halo (1000–1999): a soft violet halo band, three arcs on A, a satellite on every ring. */
#ladder-rows .c-value[data-orbit-tier="7"] { --ring-w: 2.5px; --sat-d: 4.5px; --ra-k: .31;
  --ra-arc: rgba(200, 170, 255, .7); --ra-head: #f7f3ff; --rb-arc: rgba(103, 232, 249, .64); --rb-head: #f0feff; --rb-base: rgba(103, 232, 249, .15);
  --rc-arc: rgba(250, 204, 21, .58); --rc-head: #fff6d1; --rc-base: repeating-conic-gradient(rgba(250, 204, 21, .26) 0 2deg, transparent 0 8deg);
  --halo-c: rgba(192, 160, 255, .17); }
/* 8 corona (2000–4999): magenta, cyan and gold; C doubles (a gap like Saturn's), a two-band corona, long tails. */
#ladder-rows .c-value[data-orbit-tier="8"] { --ring-w: 2.5px; --sat-d: 5px; --sat-tail: .16turn; --ra-k: .3;
  --ra-arc: rgba(232, 121, 249, .7); --ra-head: #fdf4ff; --ra-base: rgba(232, 121, 249, .16);
  --rb-arc: rgba(34, 211, 238, .66); --rb-head: #ecfeff; --rb-base: rgba(34, 211, 238, .15);
  --rc-arc: rgba(250, 204, 21, .62); --rc-head: #fffbe6; --rc-base: rgba(250, 204, 21, .2);
  --rc-mask: radial-gradient(closest-side, transparent calc(100% - 8px), #000 calc(100% - 7.5px), #000 calc(100% - 6px), transparent calc(100% - 5.5px), transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 calc(100% - .5px), transparent);
  --halo-bg: radial-gradient(closest-side, transparent 60%, rgba(217, 70, 239, .15) 72%, transparent 79%, rgba(167, 139, 250, .2) 88%, transparent); }
/* 9 nova (5000 and up): white-hot heads, four arcs on A, the double C and a turning spectral halo. */
#ladder-rows .c-value[data-orbit-tier="9"] { --ring-w: 2.5px; --sat-d: 5px; --sat-tail: .22turn; --ra-k: .3;
  --ra-arc: rgba(216, 205, 255, .78); --ra-head: #fff; --ra-base: rgba(216, 205, 255, .18);
  --rb-arc: rgba(125, 240, 255, .74); --rb-head: #fff; --rb-base: rgba(125, 240, 255, .16);
  --rc-arc: rgba(255, 220, 120, .7); --rc-head: #fff; --rc-base: rgba(255, 220, 120, .22);
  --rc-mask: radial-gradient(closest-side, transparent calc(100% - 8px), #000 calc(100% - 7.5px), #000 calc(100% - 6px), transparent calc(100% - 5.5px), transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 calc(100% - .5px), transparent);
  --halo-bg: conic-gradient(rgba(34, 211, 238, .32), rgba(167, 139, 250, .32), rgba(236, 72, 153, .32), rgba(250, 204, 21, .32), rgba(34, 211, 238, .32));
  --halo-mask: radial-gradient(closest-side, transparent 62%, #000 82%, transparent); }

/* The plume is anchored inside .value: its right edge meets the number's left
   edge, and its centre line is half an em below the number's top. The number
   and its plume move together; ledWindRows reads this same box for physics.
   Its width is --led-reach (ledDrive, set per row) of --led-reach-max, which grows with the
   viewport (desktop maximum 360–680px, phone maximum 170–280px) into the empty part of the name column. z-index -1
   puts it in the ladder's own stacking context under every row's text (and above the rain canvas), so
   it never covers a letter; rain-wind.mjs keeps the rain out of text boxes as well. rain-wind.mjs reads
   this box through led.mjs ledWindRows and pushes the token rain only inside it, so plume and push
   coincide. Parked plumes keep their layout (only hidden) so the box can still be measured; the
   effects switch removes them. */
.led-wind { position: absolute; z-index: -1; overflow: hidden; pointer-events: none;
  --led-reach-max: clamp(360px, 45vw, 680px); --led-wind-h: 38px; --led-wind-src: calc(var(--led-wind-h) / 2);
  right: 100%; top: calc(.5em - var(--led-wind-src));
  width: clamp(24px, calc(var(--led-reach-max) * var(--led-reach, 0)), var(--led-reach-max)); height: var(--led-wind-h);
  opacity: var(--led-air, .6); transition: opacity .6s, visibility 0s;
  --jet-core: #eaf8ff; --jet-mid: rgba(125, 211, 252, .5); --jet-tail: rgba(167, 139, 250, .2); }
/* The soft plume: an ellipse anchored at the centered outlet, stretched over the whole box. */
.led-wind::before { content: ""; position: absolute; inset: 0; transform-origin: 100% var(--led-wind-src); opacity: 0; transform: scaleX(.12);
  background: radial-gradient(farthest-side at 100% var(--led-wind-src), var(--jet-core), var(--jet-mid) var(--jet-mid-at, 16%), var(--jet-tail) var(--jet-tail-at, 55%), transparent); }
/* The long core streak along the outlet centre line. */
.led-wind::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--led-wind-src) - var(--jet-core-h, 2px) / 2); height: var(--jet-core-h, 2px);
  border-radius: 1px; transform-origin: 100% 50%; opacity: 0; transform: scaleX(.05);
  background: var(--jet-spectrum, linear-gradient(270deg, var(--jet-core), var(--jet-mid) 25%, var(--jet-tail) 70%, transparent)); }
/* Energy shots: each line is the box's width; its streak leaves the outlet and runs to the far end. */
.led-wind b { position: absolute; left: 0; width: 100%; height: 2px; top: calc(var(--y) - 1px); opacity: 0;
  background: var(--jet-spectrum, linear-gradient(90deg, transparent, var(--jet-mid) 55%, var(--jet-core))) right center / var(--jet-shot, min(72px, 30%)) 100% no-repeat; }
.led-wind b:nth-child(1) { --y: var(--led-wind-src); --k: 0; }
.led-wind b:nth-child(2) { --y: 42%; --k: .035; }
.led-wind b:nth-child(3) { --y: 72%; --k: .07; }
.led-wind.t1 b:nth-child(n + 2), .led-wind.t2 b:nth-child(3), .led-wind.t3 b:nth-child(3) { visibility: hidden; }
.led-wind.t1 { --jet-mid: rgba(125, 211, 252, .34); --jet-tail: rgba(167, 139, 250, .12); }
.led-wind.t5, .led-wind.t6, .led-wind.t7 { --jet-core: #f6f2ff; --jet-mid: rgba(190, 166, 255, .58); --jet-tail: rgba(125, 211, 252, .24); }
/* The jet's look by orbit tier, always inside the same box (its length is ledDrive's reach, which is
   also the push's): under 200 tok/s a hairline core, a narrow plume and short shots; 200–999 the full
   jet; from 1000 a thick core, a fuller plume and long shots, tinted like the rings. */
#ladder-rows .c-value:is([data-orbit-tier="1"], [data-orbit-tier="2"]) .led-wind { --jet-core-h: 1px; --jet-shot: min(40px, 22%); --jet-mid-at: 11%; --jet-tail-at: 42%; }
#ladder-rows .c-value:is([data-orbit-tier="7"], [data-orbit-tier="8"], [data-orbit-tier="9"]) .led-wind { --jet-core-h: 3px; --jet-shot: min(112px, 36%); --jet-mid-at: 20%; --jet-tail-at: 66%; }
#ladder-rows .c-value[data-orbit-tier="7"] .led-wind { --jet-tail: rgba(250, 204, 21, .22); }
#ladder-rows .c-value[data-orbit-tier="8"] .led-wind { --jet-mid: rgba(232, 121, 249, .56); --jet-tail: rgba(34, 211, 238, .24); }
#ladder-rows .c-value[data-orbit-tier="9"] .led-wind { --jet-core: #fff; --jet-mid: rgba(216, 205, 255, .62); --jet-tail: rgba(250, 204, 21, .26); }

/* Palettes come from the actual tok/s orbit band. Higher rates add spectral
   colours to the same pulsing layers; no additional particles or clocks. */
#ladder-rows .c-value[data-orbit-tier="1"] .led-wind { --jet-core: #86efac; --jet-mid: #22c55e77; --jet-tail: #15803d22; --jet-spectrum: linear-gradient(90deg, transparent, #22c55e66 65%, #86efac); }
#ladder-rows .c-value[data-orbit-tier="2"] .led-wind { --jet-core: #ccfbf1; --jet-mid: #2dd4bf99; --jet-tail: #0891b233; --jet-spectrum: linear-gradient(90deg, transparent, #0d9488 40%, #5eead4 78%, #ccfbf1); }
#ladder-rows .c-value[data-orbit-tier="3"] .led-wind { --jet-core: #ecfeff; --jet-mid: #22d3eebb; --jet-tail: #3b82f644; --jet-spectrum: linear-gradient(90deg, transparent, #3b82f6 30%, #22d3ee 70%, #ecfeff); }
#ladder-rows .c-value[data-orbit-tier="4"] .led-wind { --jet-core: #eef2ff; --jet-mid: #818cf8cc; --jet-tail: #22d3ee66; --jet-spectrum: linear-gradient(90deg, transparent, #22d3ee 20%, #818cf8 60%, #eef2ff); }
#ladder-rows .c-value[data-orbit-tier="5"] .led-wind { --jet-core: #fae8ff; --jet-mid: #c084fcee; --jet-tail: #ec489966; --jet-spectrum: linear-gradient(90deg, transparent, #8b5cf6 20%, #ec4899 55%, #e9d5ff 85%, #fff); }
#ladder-rows .c-value[data-orbit-tier="6"] .led-wind { --jet-core: #fef9c3; --jet-mid: #fbbf24ee; --jet-tail: #a855f788; --jet-spectrum: linear-gradient(90deg, transparent, #a855f7 20%, #f472b6 50%, #fbbf24 80%, #fefce8); }
#ladder-rows .c-value[data-orbit-tier="7"] .led-wind { --jet-core: #fff; --jet-mid: #d8b4f8ee; --jet-tail: #38bdf899; --jet-spectrum: linear-gradient(90deg, transparent, #38bdf8 15%, #c084fc 45%, #f9a8d4 68%, #fde68a 86%, #fff); }
#ladder-rows .c-value[data-orbit-tier="8"] .led-wind { --jet-core: #fff; --jet-mid: #f472b6ee; --jet-tail: #2dd4bfaa; --jet-spectrum: linear-gradient(90deg, transparent, #2dd4bf 12%, #38bdf8 30%, #a78bfa 48%, #f472b6 68%, #fbbf24 86%, #fff); }
#ladder-rows .c-value[data-orbit-tier="9"] .led-wind { --jet-core-h: 4px; --jet-core: #fff; --jet-mid: #e9d5ffee; --jet-tail: #22d3eeaa; --jet-spectrum: linear-gradient(90deg, transparent, #5eead4 10%, #38bdf8 25%, #818cf8 42%, #e879f9 59%, #fb7185 73%, #fde047 87%, #fff); }
#ladder-rows .c-value[data-orbit-tier="1"] .led-wind b:nth-child(n + 2) { visibility: hidden; }

/* Running: effects on, live, tab visible, the cell on (or near) the screen. Nothing else animates. */
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .led-rings,
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky {
  animation: led-jet-ring var(--jet-p, 2.4s) linear infinite var(--jet-delay); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .value {
  animation: led-jet-lift var(--jet-p, 2.4s) linear infinite var(--jet-delay); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .led-wind::before {
  animation: led-jet-plume var(--jet-p, 2.4s) linear infinite var(--jet-delay); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .led-wind::after {
  animation: led-jet-core var(--jet-p, 2.4s) linear infinite var(--jet-delay); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .led-wind b {
  animation: led-jet-shot var(--jet-p, 2.4s) linear infinite calc(var(--jet-delay) + var(--k, 0) * var(--jet-p, 2.4s)); }
/* The rings' own spin is continuous (not part of the cycle) and keeps to the LED clock, at the orbit
   tier's pace: A at --orbit-spin, B 1.37× and C 1.9× slower, the nova halo 3× the other way. A
   satellite turns with its ring's tilt at its own pace, its phase in the delay, and its ::before
   counter-turns on exactly the same timing; only satellites that are drawn run. */
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .led-rings::before {
  animation: led-spin-a var(--orbit-spin, 5s) linear infinite var(--led-t, 0s); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .led-rings::after {
  animation: led-spin-b calc(var(--orbit-spin, 5s) * 1.37) linear infinite var(--led-t, 0s); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky.ring-c::before {
  animation: orbit-spin calc(var(--orbit-spin, 5s) * 1.9) linear infinite var(--led-t, 0s); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky.halo-nova::after {
  animation: orbit-spin calc(var(--orbit-spin, 5s) * 3) linear infinite reverse var(--led-t, 0s); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky i.on {
  --o-time: calc(var(--orbit-spin, 5s) * var(--o-pace)); --o-delay: calc(var(--led-t, 0s) - var(--o-ph) * var(--o-time));
  animation: orbit-spin var(--o-time) linear infinite var(--o-delay); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky i.on::before {
  animation: orbit-dot var(--o-time) linear infinite var(--o-delay); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky i.on:nth-child(2),
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]):not([data-led-paused]) #ladder-rows .c-value[data-led]:not([data-led-idle]) .orbit-sky i.on:nth-child(2)::before {
  animation-direction: reverse; }   /* B's rider turns with B */

.ladder-wrap[data-fx-off] .led-wind, .ladder-wrap[data-fx-off] #ladder-rows .led-rings, .ladder-wrap[data-fx-off] #ladder-rows .orbit-sky { display: none; }
.c-value[data-led-idle] .led-wind, .c-value[data-led-idle] .led-rings { visibility: hidden; }
.c-value[data-led-idle] .orbit-sky { visibility: hidden; }
.ladder-wrap[data-rain-hold] .led-wind, .ladder-wrap[data-rain-hold] #ladder-rows .led-rings, .ladder-wrap[data-rain-hold] #ladder-rows .orbit-sky {
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }

/* The number keeps its size and value; only its colour and glow follow the tier. */
.ladder { --led-ink-2: #ecfff3; --led-glow-2: 0 0 9px rgba(57, 255, 136, .5);
  --led-ink-3: #e8feff; --led-glow-3: 0 0 9px rgba(63, 242, 255, .6), 0 0 20px rgba(63, 242, 255, .22);
  --led-ink-4: #fff7d6; --led-glow-4: 0 0 8px rgba(250, 204, 21, .65), 0 0 20px rgba(129, 140, 248, .5); }
.c-value[data-led] .n { transition: color .8s, text-shadow .8s; }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led="2"] .n { color: var(--led-ink-2); text-shadow: var(--led-glow-2), var(--halo); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led="3"] .n { color: var(--led-ink-3); text-shadow: var(--led-glow-3), var(--halo); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led="4"] .n { color: var(--led-ink-4); text-shadow: var(--led-glow-4), var(--halo); }

@starting-style {
  .led-lit { transform: translateX(calc((var(--led-from, 0) - 10) * var(--led-pitch))); }
  .led-in > .led-field { opacity: 0; }
  .led.led-out { opacity: 1; visibility: visible; }
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="1"] .n { color: var(--ink); text-shadow: var(--halo); }
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="2"] .n { color: var(--led-ink-2); text-shadow: var(--led-glow-2), var(--halo); }
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="3"] .n { color: var(--led-ink-3); text-shadow: var(--led-glow-3), var(--halo); }
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="4"] .n { color: var(--led-ink-4); text-shadow: var(--led-glow-4), var(--halo); }
}

@keyframes led-tip { 50% { opacity: .3; } }
@keyframes led-chase { from { opacity: .9; transform: none; } to { opacity: .9; transform: translateX(900%); } }
@keyframes led-burst { from { opacity: 1; transform: scale(.35); } to { opacity: 0; transform: scale(1.35); } }
/* The jet cycle (stops: jet-pulse.mjs JET). Charge: the rings tighten (ease-in) and the number rises;
   60 %: fire, the rings snap open, the plume opens to full in 3.5 % of the period and holds until 86 %,
   gone at 94 %, then a pilot glow returns at the outlet; core streak and shots ride inside that window. */
@keyframes led-jet-ring { 0% { opacity: .5; transform: scale(1); } 30% { opacity: .55; transform: scale(1); animation-timing-function: ease-in; } 57% { opacity: 1; transform: scale(.8); } 60% { opacity: 1; transform: scale(.78); animation-timing-function: cubic-bezier(.2, .9, .3, 1); } 66% { opacity: .9; transform: scale(1.08); animation-timing-function: ease-out; } 84%, 100% { opacity: .5; transform: scale(1); } }
@keyframes led-jet-lift { 0% { transform: translateY(0); } 30% { transform: translateY(0); animation-timing-function: ease-in; } 58% { transform: translateY(-2px); animation-timing-function: ease-out; } 63%, 100% { transform: translateY(0); } }
@keyframes led-jet-plume { 0%, 60% { opacity: .14; transform: scaleX(.12); } 63.5% { opacity: 1; transform: scaleX(1); } 86% { opacity: .85; transform: scaleX(1); } 94% { opacity: 0; transform: scaleX(1.03); } 94.5% { opacity: 0; transform: scaleX(.12); } 100% { opacity: .14; transform: scaleX(.12); } }
@keyframes led-jet-core { 0%, 60.5% { opacity: 0; transform: scaleX(.05); } 65% { opacity: 1; transform: scaleX(1); } 84% { opacity: .85; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes led-jet-shot { 0%, 61% { opacity: 0; transform: translateX(0); } 62.5% { opacity: 1; transform: translateX(-6%); } 79% { opacity: .55; transform: translateX(-100%); } 80%, 100% { opacity: 0; transform: translateX(-100%); } }
/* Spins turn a ring inside its tilt and squash (the static rotate and scale properties compose outside
   transform), so each tier's tilt needs no variables in keyframes. orbit-dot turns a satellite back by
   exactly its ring frame's turn, outside its static un-squash (scale: 1 1/k), so it stays round. */
@keyframes led-spin-a { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
@keyframes led-spin-b { from { transform: rotate(0turn); } to { transform: rotate(-1turn); } }
@keyframes orbit-spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
@keyframes orbit-dot { from { rotate: 0turn; } to { rotate: -1turn; } }

@media (max-width: 720px) {
  /* The phone speed cell is only as wide as its number. The LED spans the row's height,
     reaches into the row padding and the column gap, and stays wide enough for a whole
     meter; it never reaches the nickname except for a low tier's bare meter under a 1-digit speed. */
  .c-value { --led-pitch: 5px; --led-cell: 3px; }
  .led { inset: 50% -10px auto auto; width: max(calc(100% + 18px), 62px); height: 56px; margin-top: -28px; }
  .ladder.show-totals .led { height: 54px; }
  .led-meter { top: auto; right: 10px; bottom: 5px; height: 3px; }
  .ladder.show-totals .led-meter { bottom: 3px; }
  .led-burst { top: 40%; right: 0; width: 72px; height: 72px; margin-top: -36px; }
  /* The unit is below the number on phones. The outlet remains centered on
     the number line, with a narrower physical/visual band. */
  .ladder .c-value .value { flex-direction: column; align-items: flex-end; }
  .led-wind { --led-reach-max: clamp(170px, 62vw, 280px); --led-wind-h: 22px; }
  .led-wind b:nth-child(2) { --y: 60%; }
  .led-wind b:nth-child(3) { visibility: hidden; }
  .ladder.show-totals .led-wind { --led-wind-h: 8px; }
  .ladder.show-totals .led-wind b:nth-child(2) { visibility: hidden; }
  #ladder-rows .led-rings, #ladder-rows .orbit-sky { --led-num-w: max(calc(var(--led-chars, 4) * 12px), 30px); right: -9px; width: calc(var(--led-num-w) + 18px); }
  /* Ring C and the halo stay close to the number, and at most two satellites ride. */
  #ladder-rows .c-value[data-orbit-tier] { --rc-grow: 8px; --halo-pad: 6px; }
  #ladder-rows .orbit-sky i:nth-child(3) { display: none; }
}
@media (max-width: 380px) {
  .led { right: -8px; width: max(calc(100% + 15px), 60px); }
  .led-meter { right: 8px; }
}
/* Without motion there is no engine (the effects switch is off too). */
@media (prefers-reduced-motion: reduce) {
  .led-wind, #ladder-rows .led-rings, #ladder-rows .orbit-sky { display: none; }
}

/* Seven speed bands, with continuous energy/pace inside every band. All extra
   layers remain inside the existing value cell; fixed nodes, no extra clocks. */
.led-field { opacity: var(--led-field-opacity, 1); }
.led-lit::after { animation-duration: var(--led-tip-period, 2s); animation-timing-function: ease-in-out; }
.led-chase { animation-duration: calc(var(--led-chase-time, 2s) * var(--led-pace, 1)); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led] .n {
  filter: brightness(calc(.95 + var(--led-energy, 0) * .15));
}
.led.t5 { --led-lit: linear-gradient(90deg, #675eff, #ea88ff); --led-tip: #fff0ff; --led-chase-time: .8s; --led-burst: #cf8bff99; }
.led.t6 { --led-lit: linear-gradient(90deg, #ff9365, #ffe596); --led-tip: #fff9df; --led-chase-time: .65s; --led-burst: #ffc36c99; }
.led.t7 { --led-lit: linear-gradient(90deg, #6477ff, #c990ff 50%, #f5f4ff); --led-tip: #ffffff; --led-chase-time: .5s; --led-burst: #d6d9ff99; }
.t5 .led-field::before, .t6 .led-field::before, .t7 .led-field::before { inset: -30% 0; }
.t5 .led-field::before { background: radial-gradient(ellipse at 72% 50%, #ac66ff40, transparent 62%); }
.t6 .led-field::before { background: radial-gradient(ellipse at 82% 50%, #ffae4a3a, transparent 65%); }
.t7 .led-field::before { background: radial-gradient(ellipse at 70% 50%, #9c8dff58, #5ccfff1c 32%, transparent 64%); }
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led="5"] .n {
  color: #f4dcff; text-shadow: 0 0 var(--led-halo, 14px) #c178ff99, var(--halo);
}
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led="6"] .n {
  color: #fff0d6; text-shadow: 0 0 var(--led-halo, 16px) #ffa451aa, var(--halo);
}
.ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led="7"] .n {
  color: #f6f4ff; text-shadow: 0 0 var(--led-halo, 18px) #b6a2ffbb, 0 0 6px #dceeff66, var(--halo);
}
@starting-style {
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="5"] .n { color: #f4dcff; }
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="6"] .n { color: #fff0d6; }
  .ladder-wrap:not([data-fx-off]):not([data-rain-hold]) .c-value[data-led-from="7"] .n { color: #f6f4ff; }
}

@media (max-width: 720px) {
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav > .back-main { grid-column: 1 / 3; grid-row: 1; font-size: 12px; padding: 0 8px; }
  .source-recommendation { grid-column: 3; grid-row: 1; margin-left: 0; justify-self: end; }
  .source-link { padding: 7px; font-size: 11px; gap: 5px; }
  .source-link svg { width: 13px; height: 13px; }
  .source-full, .source-endorsement { display: none; }
  .source-short { display: inline; }
  .nav > .live-pill { grid-row: 2; grid-column: 1; }
  .nav-links { grid-row: 2; grid-column: 2 / 4; gap: 7px; justify-self: end; font-size: 11.5px; }
  .nav-links .fx-toggle { font-size: 11px; }
  .nav-links a.nav-stats { display: inline; }
}

/* Default and uploaded avatars share the circular profile-avatar shape. */
.profile-avatar.pixel-avatar { image-rendering: pixelated; }

/* ---- radar head + site readout live in charge-device.css. The details panel and the local demo bar
   below are shared. ---- */
.rs-detail { margin: -4px 0 12px; padding: 12px 18px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.rs-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rs-detail h2 { margin: 0; font: 600 14px/1.3 var(--mono); color: var(--ink); }
.rs-close { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent;
  color: var(--ink-2); font: 12px/1 var(--mono); cursor: pointer; }
.rs-close:hover { color: var(--accent); border-color: var(--accent-2); }
.rs-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 20px; margin: 0 0 8px; }
.rs-facts dt { font: 600 10.5px/1.4 var(--mono); letter-spacing: .05em; color: var(--ink-3); }
.rs-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-detail p { margin: 6px 0; max-width: 96ch; }
.rs-demo-note { color: var(--warn); }
.rs-sources { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rs-sources > span { color: var(--ink-3); }

.rs-demo-bar { position: fixed; left: 50%; bottom: 12px; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px); overflow-x: auto; padding: 6px 8px; border: 1px solid rgba(242, 193, 78, .6); border-radius: 6px;
  background: rgba(5, 8, 6, .95); box-shadow: 0 10px 40px #000c; font: 12px/1 var(--mono); }
.rs-demo-bar b { color: var(--warn); white-space: nowrap; padding: 0 4px; }
.rs-demo-bar button { flex: none; min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2);
  color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.rs-demo-bar button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.rs-demo-bar a { flex: none; padding: 0 6px; color: var(--ink-2); white-space: nowrap; }

@media (max-width: 720px) {
  .rs-detail { padding: 10px 12px 8px; font-size: 12.5px; }
  .rs-facts { grid-template-columns: minmax(0, 1fr); }
  .rs-demo-bar { left: 12px; right: 12px; transform: none; bottom: 8px; }
}

/* Model search filters the current site-wide table without another request. */
.model-search { width: 240px; max-width: 100%; min-width: 0; height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--panel); font: 13px var(--mono); }
.model-search::placeholder { color: var(--ink-3); }
.model-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .models .head.row { gap: 12px; } .model-search { width: 100%; font-size: 16px; } }

/* Totals stay out of the rain field. The speed cell reveals them on demand. */
.ladder .c-tokens, .ladder .c-cost,
.ladder.show-totals tbody .c-tokens, .ladder.show-totals tbody .c-cost { display: none; }
.ladder .c-value:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.totals-peek { position: fixed; z-index: 30; width: 250px; max-width: calc(100vw - 16px); padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 6px; background: rgba(7, 17, 11, .97); color: var(--ink-2);
  box-shadow: 0 6px 24px #0007; font: 12px/1.6 var(--mono); pointer-events: none; }
.totals-peek-name { display: block; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.totals-peek-item { display: flex; justify-content: space-between; gap: 12px; }
.totals-peek-item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.totals-peek-scope { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); line-height: 1.5; }
@media (max-width: 720px) {
  .ladder .row-meta, .ladder .row-meta > .tools { display: flex; flex-wrap: wrap; gap: 2px 7px; overflow: visible; white-space: normal; }
  .ladder .row-meta > span, .ladder .row-meta .tool-group { margin-right: 0; }
  .ladder .row-meta .tool-group { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .row-meta .agent-speed { display: inline-block; white-space: nowrap; }
}

.power-notice[hidden]{display:none}
.notice-close{flex:none;display:grid;place-items:center;min-width:28px;min-height:28px;margin:-4px 0 -4px 8px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.notice-close:hover{border-color:var(--line);color:var(--accent)}
.notice-close:focus-visible{color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}

/* Touch: small controls become 44px targets. In-row and docked buttons grow only their hit area,
   so ladder rows and the dock keep their fixed heights between frames. */
@media (pointer: coarse) {
  .notice-close { min-width: 44px; min-height: 44px; margin: -6px -10px -6px 2px; }
  .pager button { width: 44px; height: 44px; font-size: 18px; }
  .seg button { min-height: 44px; }
  .join-close { width: 44px; height: 44px; }
  .rs-close { min-height: 44px; }
  .tracking-hint button { position: relative; }
  .tracking-clear::after, .tracking-hint button::after { content: ""; position: absolute; inset: -10px; }
}


/* ---- the pinned rider's card, directly above the real first place (pin.mjs) ---- */
.pin-slot { position: relative; z-index: 3; border-bottom: 1px solid var(--line); background: rgba(10, 22, 15, .94); box-shadow: inset 2px 0 0 var(--mint); }
.pin-slot[hidden] { display: none; }
.pin-head { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 4px 12px 0 20px; font: 11px/1.4 var(--mono); color: var(--ink-3); }
.pin-label { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--mint); font-weight: 600; letter-spacing: .04em; }
.pin-icon { width: 12px; height: 12px; fill: currentColor; }
.pin-status { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pin-slot:is([data-stale], [data-status="missing"], [data-status="unknown"]) .pin-status { color: var(--warn); }
.pin-clear { flex: none; min-height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--ink-2); font: 11px var(--mono); cursor: pointer; }
.pin-clear:hover { color: var(--ink); border-color: var(--mint); }
.pin-table { width: 100%; }
.ladder.pin-table td { height: 64px; border-bottom: 0; }
.pin-slot:is([data-status="missing"], [data-status="verifying"]) .pin-table .value { color: var(--ink-3); text-shadow: none; }
@media (pointer: coarse) { .pin-clear { min-height: 44px; } }
@media (max-width: 720px) {
  .pin-head { padding: 4px 10px 0; }
}