/* data — v2 editorial site. All-monospace, dark, generous space.
   The live race (assets/race.js) is the centerpiece; everything else reads as a
   short technical essay around it. */

:root {
  --bg:      #0c0c0d;
  --bg-2:    #141417;
  --bg-3:    #1b1b1f;
  --ink:     #edece8;
  --dim:     #9a9a93;
  --faint:   #80807a;          /* lifted from #5c5c58 to reach WCAG AA (~4.6:1 on bg-2) — carries cat-sig, order-book prices, labels */
  --rule:    #26262b;
  --accent:  #ff5e3a;          /* data — alive */
  --peer:    #7d8aa3;          /* mobx — cool */
  --warn:    #ff4d3d;
  --pos:     #67dba1;
  --neg:     #ff7873;
  --ten-1y:  #7aa9ff;
  --ten-2y:  #67dba1;
  --ten-5y:  #c084fc;
  --ten-10y: #f5d36b;
  --ten-30y: #ff7873;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--faint); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 100; background: var(--accent); color: var(--bg); padding: 0.5rem 0.9rem; border: 0; border-radius: 4px; font: 600 0.8rem var(--mono); }
.skip-link:focus { top: 0.5rem; }
.muted { color: var(--dim); }
.dim { color: var(--faint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
code { font: 0.9em var(--mono); color: var(--accent); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ---------- masthead ---------- */
.masthead {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 0 1.2rem; border-bottom: 1px solid var(--rule);
  font: 500 0.76rem var(--mono); letter-spacing: 0.04em; color: var(--dim);
}
.masthead .mark { font: 600 1.1rem var(--mono); color: var(--ink); letter-spacing: -0.02em; border: 0; }
.masthead .mark b { color: var(--accent); }
.masthead .rule { flex: 1; height: 1px; background: var(--rule); }
.masthead .date { text-transform: uppercase; }
.mast-nav { display: flex; align-items: center; gap: 1rem; }
.mast-nav a { border: 0; color: var(--dim); }
.mast-nav a:hover { color: var(--accent); }

/* icon links (github / npm) — tint to accent on hover */
.icon-link { display: inline-flex; align-items: center; border: 0; color: inherit; }
.icon-link svg { display: block; width: 1.05rem; height: 1.05rem; fill: currentColor; }
.icon-link:hover { color: var(--accent); }
@media (max-width: 640px) {
  /* hide the date AND the flex-1 rule (it rendered as a stray dash by the
     wordmark); keep the nav right-aligned without it. */
  .masthead .date, .masthead .rule { display: none; }
  .mast-nav { margin-left: auto; gap: 0.85rem; }
}
/* tiny screens: drop the in-page text anchors (cramped at 390px), keep the
   wordmark + github/npm icons. */
@media (max-width: 460px) { .mast-nav a:not(.icon-link) { display: none; } }
/* touch: bump tappable controls toward the WCAG 2.5.8 (24px) target floor. */
@media (pointer: coarse) {
  .mast-nav a, .cta-link { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .demo-chips .chip, .stream-btn, .race-ctrl button, .race-ctrl .carousel button { min-height: 34px; }
  .race-ctrl .carousel button { min-width: 34px; }
}

/* ---------- lede ---------- */
.lede { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.kicker { font: 500 0.76rem var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.5rem; }
h1.headline { font: 500 clamp(2.3rem, 6.4vw, 4.9rem)/1.04 var(--mono); letter-spacing: -0.03em; margin: 0; max-width: 18ch; color: var(--ink); }
h1.headline em { font-style: normal; color: var(--accent); }
.standfirst { font: 400 clamp(1.05rem, 1.9vw, 1.35rem)/1.55 var(--sans); color: var(--dim); margin: 1.75rem 0 0; max-width: 58ch; }
.standfirst b { color: var(--ink); font-weight: 500; }
.standfirst code { font-size: 0.92em; }
.lede-sub { font: 400 1rem/1.55 var(--sans); color: var(--dim); margin: 1rem 0 0; max-width: 56ch; }
.lede-sub b { color: var(--ink); font-weight: 600; }
.trust { margin: 1.5rem 0 0; font: 500 0.82rem var(--mono); color: var(--dim); letter-spacing: 0.01em; }
.trust b { color: var(--pos); }
.trust .sep { color: var(--faint); margin: 0 0.2rem; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin-top: 2rem; }
.install {
  position: relative; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 5px;
  padding: 0.5rem 0.9rem; font: 0.9rem var(--mono); color: var(--ink); cursor: pointer; user-select: all;
  appearance: none; -webkit-appearance: none; text-align: left;
}
.install:hover { border-color: var(--dim); }
.install .dim { color: var(--accent); margin-right: 0.35em; }
.install[data-state]::after { content: attr(data-state); position: absolute; left: 50%; top: -1.6rem; transform: translateX(-50%); font: 0.7rem var(--mono); color: var(--accent); white-space: nowrap; }
.cta-link { font: 500 0.875rem var(--mono); color: var(--dim); border-bottom: 1px solid var(--faint); }
.cta-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- code ---------- */
pre.code { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.15rem; font: 0.82rem/1.6 var(--mono); overflow-x: auto; margin: 1.25rem 0; color: var(--ink); }
.tok-key { color: #ff9d6f; } .tok-str { color: #b8e872; } .tok-num { color: #b8e872; }
.tok-com { color: var(--faint); font-style: italic; } .tok-pun { color: var(--dim); }
kbd { font: 0.85em var(--mono); background: var(--bg-3); border: 1px solid var(--rule); border-radius: 3px; padding: 0.05em 0.4em; color: var(--ink); }

/* ---------- the race ---------- */
.race { padding: 1rem 0 3.5rem; }
.race-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.race-title { font: 500 0.76rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.race-ctrl { display: flex; align-items: center; gap: 1rem; margin-left: auto; font: 0.76rem var(--mono); color: var(--dim); flex-wrap: wrap; }
.race-ctrl .ctrl { display: inline-flex; align-items: center; gap: 0.45rem; }
.race-ctrl select { background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; font: 0.76rem var(--mono); padding: 0.3rem 0.5rem; cursor: pointer; }
.race-ctrl select:hover { border-color: var(--dim); }
.race-ctrl input[type=range] { accent-color: var(--accent); width: 7rem; }
.race-ctrl .rate { color: var(--accent); font-weight: 500; min-width: 6.5rem; }
.race-ctrl button { background: transparent; color: var(--dim); border: 1px solid var(--rule); font: 500 0.72rem var(--mono); padding: 0.32rem 0.65rem; border-radius: 4px; cursor: pointer; }
.race-ctrl button:hover:not(:disabled) { color: var(--ink); border-color: var(--dim); }
.race-ctrl button:disabled, .race-ctrl select:disabled, .race-ctrl input:disabled { opacity: 0.4; cursor: default; }
.race-ctrl .carousel { gap: 0.35rem; }
.race-ctrl .carousel button { font-size: 1rem; line-height: 1; padding: 0.22rem 0.55rem; }
.race-pos { color: var(--faint); font-variant-numeric: tabular-nums; min-width: 2.6rem; }

/* order-book race — one engine card at a time (carousel) */
.race-grid { display: block; }
.race-grid[hidden] { display: none; }
.rcard { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.rcard.is-data { --rc-line: var(--accent); }
.rcard-head { display: flex; align-items: baseline; gap: 0.85rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--rule); background: var(--bg-3); }
.rcard-name { font: 600 1.05rem var(--mono); letter-spacing: -0.01em; color: var(--ink); }
.rcard.is-data .rcard-name { color: var(--accent); }
.rcard-ver { font: 400 0.68rem var(--mono); color: var(--faint); margin-left: 0.4rem; }
.rcard-tag { flex: 1; font: 0.72rem var(--mono); color: var(--dim); }
.rcard-cpu { font: 500 0.95rem var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.rcard.is-data .rcard-cpu { color: var(--pos); }
.rcard-cpu.over { color: var(--warn); }

.ob-body { display: grid; grid-template-columns: 1fr 250px; grid-template-rows: 248px; align-items: start; gap: 0.75rem; padding: 1rem 1.2rem; }
.ob-depth { width: 100%; height: 248px; background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; display: block; }
.ob-ladder { display: flex; flex-direction: column; overflow: hidden; font: 0.7rem var(--mono); font-variant-numeric: tabular-nums; line-height: 1; }
.ob-ladder-h { display: grid; grid-template-columns: 72px 1fr 1fr; column-gap: 0.4rem; padding: 0 0.3rem 0.35rem; font-size: 0.58rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.ob-ladder-h span:nth-child(2), .ob-ladder-h span:nth-child(3) { text-align: right; }
.ob-row { display: grid; grid-template-columns: 72px 1fr 1fr; column-gap: 0.4rem; padding: 0 0.3rem; height: 14px; align-items: center; }
.ob-cell-price { color: var(--faint); }
.ob-cell-qty { color: var(--ink); text-align: right; }
.ob-cell-cum { color: var(--dim); text-align: right; }
.ob-row-ask .ob-cell-price { color: var(--accent); }
.ob-row-bid .ob-cell-price { color: var(--pos); }
.ob-row.is-empty .ob-cell-qty, .ob-row.is-empty .ob-cell-cum { color: var(--faint); }
.ob-mid { display: flex; align-items: center; justify-content: center; padding: 0.35rem 0.3rem; margin: 0.25rem 0; font: 600 0.82rem var(--mono); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--bg-3); }
.ob-mid-spr { color: var(--faint); font-weight: 400; font-size: 0.68rem; margin-left: 0.6rem; }

.rcard-wave { padding: 0.85rem 1.2rem; border-top: 1px solid var(--rule); }
.rcard-wave .pane-h { display: flex; justify-content: space-between; font: 0.62rem var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.rcard-wave .pane-h-sub { text-transform: none; letter-spacing: 0; }
.rcard-wave .pane-h-sub b { color: var(--accent); font-weight: 600; }
.rcard-wave canvas { display: block; width: 100%; height: 72px; background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; }

.rcard-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.85rem 1.2rem; background: var(--bg-3); border-top: 1px solid var(--rule); }
.fstat { display: flex; flex-direction: column; gap: 0.25rem; }
.fstat-k { font: 0.6rem var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.fstat-v { font: 500 1.15rem var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.fstat-base { color: var(--pos); }

/* second workload — the same engine, brushing 231k rows, co-located below */
.race-md-label { margin: 0.85rem 0 0.6rem; font: 0.72rem var(--mono); letter-spacing: 0.04em; color: var(--faint); text-transform: uppercase; }
.race-multidim { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; min-height: 132px; }
.md-row-building { padding: 2.25rem 1.5rem; text-align: center; color: var(--dim); font: 0.8rem var(--mono); }
.md-loading { padding: 3rem 2.5rem; text-align: center; color: var(--dim); font: 0.85rem var(--mono); }
.md-loading-txt { margin-bottom: 1.1rem; font-variant-numeric: tabular-nums; }
.md-loading-txt b { color: var(--accent); font-weight: 500; }
.md-bar { height: 5px; max-width: 360px; margin: 0 auto; background: var(--bg-3); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.md-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; transition: width 180ms ease-out; box-shadow: 0 0 10px var(--accent); }

.race-status { text-align: center; font: 0.85rem var(--mono); color: var(--accent); padding: 0.5rem 0 0; min-height: 1.2rem; }
.race-caption { max-width: 70ch; margin: 1.5rem 0 0; color: var(--dim); font-size: 0.95rem; }
.race-caption b { color: var(--ink); font-weight: 500; }
.race-caption a { color: var(--accent); border-color: var(--accent); }

/* ---------- essay sections ---------- */
section.essay, section.operators, section.quickstart, section.devtools-section { padding: 3.25rem 0; border-top: 1px solid var(--rule); }
.sec-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.5rem; }
.sec-no { font: 500 0.78rem var(--mono); color: var(--accent); letter-spacing: 0.1em; }
.sec-head h2 { font: 500 clamp(1.5rem, 3.4vw, 2.2rem)/1.1 var(--mono); letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.lead-para { font-size: 1.05rem; max-width: 64ch; margin: 0 0 1.25rem; color: var(--ink); }
.essay p { max-width: 64ch; margin: 0 0 1rem; }
.essay .muted { color: var(--dim); }

.prop-list { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 60ch; }
.prop-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; color: var(--dim); }
.prop-list li:last-child { border-bottom: 0; }
.prop-list .op { display: inline-block; min-width: 11rem; font: 500 0.875rem var(--mono); color: var(--accent); }
.prop-list em { font-style: normal; color: var(--ink); }

/* ---------- operator catalogue ----------
 * Single inline row per operator: [op | desc | sig | ×]. Three operators
 * (filter, sort, group) expand inline into a rich live card directly under
 * their row. Stacks on narrow viewports. */
.catalogue { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.cat-row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.3rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
}
.cat-row:hover { background: var(--bg-3); }
/* collapsible catalogue: each operator is a <details class="cat-item"> with the
 * .cat-row as its <summary>; the live .cat-demo only renders when open. Default
 * one (filter) open. Caret is absolutely-positioned so it never disturbs the
 * row grid (incl. the mobile 1fr-auto reflow). */
.cat-item { background: var(--bg-2); }
.cat-item:last-child:not([open]) > .cat-row { border-bottom: 0; }
summary.cat-row { position: relative; cursor: pointer; list-style: none; padding-left: 1.95rem; }
summary.cat-row::-webkit-details-marker { display: none; }
summary.cat-row::before { content: '▸'; position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 0.72rem; line-height: 1; transition: transform 120ms ease; }
.cat-item[open] > summary.cat-row::before { transform: translateY(-50%) rotate(90deg); }
.cat-op { font: 500 0.85rem var(--mono); color: var(--accent); border: 0; white-space: nowrap; }
.cat-op:hover { text-decoration: underline; }
.cat-desc { color: var(--dim); font-size: 0.86rem; min-width: 0; }
.cat-sig {
  font: 0.74rem var(--mono);
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cat-sig::before { content: '› '; color: var(--rule); }
.cat-x {
  text-align: right;
  font: 600 1.15rem var(--mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.01em;
  min-width: 3.6rem;
  padding-left: 0.3rem;
}
.cat-foot { font-size: 0.82rem; margin: 0 0 2.5rem; }
.cat-foot a { color: var(--accent); }
/* inline expansion under an operator row — the rich live demo card for the
 * operators that get one (filter, sort, group). Reads as a continuation of
 * the row, full-width, not indented. */
.cat-demo {
  background: var(--bg-3);
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 1rem 1rem;
  font: 0.78rem var(--mono);
}
.cat-item:last-child > .cat-demo { border-bottom: 0; }
.cat-demo .demo-chips { margin-bottom: 0.6rem; }
.cat-demo .demo-panel { min-width: 0; }
/* Pin variable-content cards to a stable height so streaming ticks (rows
 * crossing pnl thresholds, chip clicks switching tenor) don't shift the page.
 * Each height is sized for the max plausible row count in that card on our
 * 10-row trades feed; if the dataset grew, these would need to grow too. */
.cat-demo[data-demo-for="filter"]    { min-height: 11rem; }
.cat-demo[data-demo-for="between"]   { min-height: 19rem; }
.cat-demo[data-demo-for="compare"]   { min-height: 16rem; }
.cat-demo[data-demo-for="sort"]      { min-height: 10rem; }
.cat-demo[data-demo-for="intersect"] { min-height: 9rem;  }
.cat-demo[data-demo-for="union"]     { min-height: 13rem; }
.cat-demo[data-demo-for="group"]     { min-height: 22rem; }
.cat-demo[data-demo-for="distinct"]  { min-height: 6rem;  }
.cat-demo[data-demo-for="map"]       { min-height: 19rem; }
.cat-demo[data-demo-for="reduce"]    { min-height: 5rem;  }
.cat-demo[data-demo-for="tap"]       { min-height: 4.5rem; }
.cat-demo[data-demo-for="length"]    { min-height: 6.5rem; }
.cat-demo[data-demo-for="aggregate"] { min-height: 4.5rem; }
.cat-demo[data-demo-for="some"]      { min-height: 4rem;  }
.cat-demo[data-demo-for="keys"]      { min-height: 19rem; }
@media (max-width: 880px) {
  .cat-row {
    grid-template-columns: 1fr auto;
    column-gap: 0.85rem;
    row-gap: 0.3rem;
    padding: 0.7rem 0.85rem;
  }
  .cat-op { font-size: 0.82rem; }
  .cat-desc { grid-column: 1 / -1; font-size: 0.85rem; }
  .cat-sig { grid-column: 1 / -1; white-space: normal; word-break: break-word; }
  .cat-x { font-size: 1rem; padding-left: 0; }
}

/* ---------- live demos ---------- */
.stream-btn { background: transparent; color: var(--dim); border: 1px solid var(--rule); font: 500 0.72rem var(--mono); padding: 0.25rem 0.6rem; border-radius: 4px; cursor: pointer; margin-left: 0.4rem; }
.stream-btn:hover { color: var(--accent); border-color: var(--accent); }
.demo-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.demo-chips .chip { appearance: none; -webkit-appearance: none; background: transparent; color: var(--dim); border: 1px solid var(--rule); font: 500 0.75rem var(--mono); padding: 0.25rem 0.55rem; border-radius: 3px; cursor: pointer; user-select: none; }
.demo-chips .chip:hover { color: var(--ink); border-color: var(--dim); }
.demo-chips .chip.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.demo-panel { font: 0.78rem var(--mono); }

/* mini rows in demos */
.mrow { display: grid; gap: 0.5rem; padding: 0.28rem 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; animation: rowin 240ms ease-out; }
.mrow:last-child { border-bottom: 0; }
.mrow span:first-child { color: var(--dim); }
.mrow .pnl { text-align: right; }
.mrow .pnl.neg { color: var(--neg); } .mrow .pnl.pos { color: var(--pos); }
.mrow .flash { animation: cellflash 600ms ease-out; border-radius: 2px; }
@keyframes cellflash { 0% { background: var(--accent); color: var(--bg); } 100% { background: transparent; } }
@keyframes rowin { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
.f-row { grid-template-columns: 1fr 0.8fr 1fr; }
.f-row .last { color: var(--faint); text-align: right; }
.demo-stat { display: flex; justify-content: space-between; font: 0.72rem var(--mono); color: var(--faint); padding: 0 0 0.5rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.demo-stat .stat-avg { color: var(--dim); }
.z-row { grid-template-columns: 1.4rem 1fr 1fr; }
.z-row .rank { color: var(--accent); }
[data-tenor="1Y"] { color: var(--ten-1y); } [data-tenor="2Y"] { color: var(--ten-2y); }
[data-tenor="5Y"] { color: var(--ten-5y); } [data-tenor="10Y"] { color: var(--ten-10y); }
[data-tenor="30Y"] { color: var(--ten-30y); }
.gbucket { margin-bottom: 0.5rem; }
.gbucket-head { display: flex; justify-content: space-between; font: 500 0.78rem var(--mono); padding: 0.2rem 0; border-bottom: 1px solid var(--rule); }
.gbucket-head .gcount { color: var(--faint); }
.gbucket-body { padding-left: 0.6rem; border-left: 2px solid var(--rule); margin: 0.3rem 0 0 0.2rem; }
.gbucket-body .grow { display: flex; justify-content: space-between; padding: 0.12rem 0; color: var(--dim); }
.gbucket-body .grow .pnl.neg { color: var(--neg); } .gbucket-body .grow .pnl.pos { color: var(--pos); }

/* ---------- demo layouts: extra shapes for the per-operator cards ---------- */
/* multi-column splits — used by compare, intersect, union, keys */
.split { display: grid; gap: 1rem; }
.split-2 { grid-template-columns: 1fr 1fr; }
.split-3 { grid-template-columns: 1fr 1fr 1fr; }
.split-col { min-width: 0; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 0.35rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--rule); font: 0.72rem var(--mono); gap: 0.5rem; }
.col-head-label { color: var(--accent); }
.col-head-count { color: var(--faint); font-variant-numeric: tabular-nums; }
.id-row { grid-template-columns: 1fr 1fr; }

/* 4-scalar grid for sum/avg/max/min */
.agg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.agg-cell { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; padding: 0.55rem 0.75rem 0.65rem; min-width: 0; }
.agg-label { display: block; font: 500 0.62rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 0.2rem; }
.agg-val { font: 600 1.15rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.agg-val.pos { color: var(--pos); }
.agg-val.neg { color: var(--neg); }

/* boolean LEDs for some/every */
.bool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.bool-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.8rem; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; }
.bool-key { font: 0.74rem var(--mono); color: var(--dim); }
.bool-val { font: 500 0.85rem var(--mono); }
.bool-val.tru { color: var(--pos); }
.bool-val.fal { color: var(--neg); }

/* per-tenor count bars for length(fn) */
.tcount-block { display: grid; gap: 0.2rem; }
.tcount-row { display: grid; grid-template-columns: 2.5rem 1fr 2rem; align-items: center; gap: 0.6rem; padding: 0.15rem 0; font-variant-numeric: tabular-nums; }
.tcount-label { font: 500 0.78rem var(--mono); }
.tcount-bar { height: 6px; background: var(--bg); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.tcount-fill { display: block; height: 100%; background: var(--accent); transition: width 180ms ease; }
.tcount-val { text-align: right; font: 0.78rem var(--mono); color: var(--dim); }

/* 2-scalar row for to/reduce */
.scalar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.scalar-cell { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; padding: 0.6rem 0.9rem 0.7rem; }
.scalar-label { display: block; font: 500 0.62rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 0.25rem; }
.scalar-val { font: 600 1.4rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.scalar-val.pos { color: var(--pos); }
.scalar-val.neg { color: var(--neg); }

/* tap counter + last-mutation panel */
.tap-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; align-items: baseline; }
.tap-block { display: flex; flex-direction: column; gap: 0.2rem; }
.tap-label { font: 500 0.62rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.tap-counter { font: 600 1.5rem var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.tap-last { font: 0.8rem var(--mono); color: var(--dim); word-break: break-all; }

/* distinct: a chip per first-seen value */
.distinct-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.distinct-chip { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.6rem; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 3px; font: 500 0.76rem var(--mono); }
.distinct-chip-tenor { font-weight: 600; }
.distinct-chip-id { color: var(--faint); font-size: 0.72rem; }

/* keys/values/reverse: small chips for keys */
.key-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.kchip { font: 0.74rem var(--mono); padding: 0.18rem 0.45rem; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 3px; color: var(--faint); }

@media (max-width: 720px) {
  .split-3 { grid-template-columns: 1fr; }
  .split-2 { grid-template-columns: 1fr; }
  .agg-grid { grid-template-columns: 1fr 1fr; }
  .bool-grid, .scalar-row { grid-template-columns: 1fr; }
}

/* ---------- quickstart ---------- */
.quickstart .install { display: inline-block; margin-bottom: 1.5rem; }
.entries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-bottom: 1.75rem; }
.entry { background: var(--bg-2); padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.entry > code { align-self: flex-start; }
.entry > span { color: var(--dim); }
.snips { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.snip { min-width: 0; }
.snip h3 { font: 500 0.85rem var(--mono); color: var(--ink); margin: 0 0 0.5rem; }
.snip h3::before { content: '// '; color: var(--faint); }
.snip pre.code { margin: 0; }
@media (max-width: 760px) { .entries, .snips { grid-template-columns: 1fr; } }

/* ---------- devtools ---------- */
.dt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.dt-actions .stream-btn { font-size: 0.8rem; padding: 0.45rem 0.85rem; margin-left: 0; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 1.5rem 0 1rem; }
.gcard { background: var(--bg-2); padding: 1.15rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; transition: background 140ms ease; }
.gcard:hover { background: var(--bg-3); }
.gcard-tag { font: 0.6rem var(--mono); text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint); }
.gcard h3 { font: 500 1rem var(--mono); margin: 0; letter-spacing: -0.01em; }
.gcard h3 a { border: 0; color: var(--ink); }
.gcard h3 a:hover { color: var(--accent); }
.gcard p { font-size: 0.85rem; line-height: 1.5; color: var(--dim); margin: 0; flex: 1; }
.gcard p code { color: var(--accent); font-size: 0.78rem; }
.gcard-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font: 0.78rem var(--mono); margin-top: 0.25rem; }
.gcard-links a { border: 0; color: var(--dim); }
.gcard-links a:first-child { color: var(--accent); }
.gcard-links a:hover { color: var(--accent); }
/* Featured card spans the gallery width so the essay reads as the headline
 * entry — distinct from the runnable apps in the rest of the row. */
.gcard-feature { grid-column: 1 / -1; border-left: 3px solid var(--accent); }
.gcard-feature .gcard-tag { color: var(--accent); }
.gcard-feature h3 { font-size: 1.15rem; }

/* ---------- footer ---------- */
footer { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; padding: 2.5rem 0 4rem; border-top: 1px solid var(--rule); font: 0.82rem var(--mono); color: var(--dim); }
footer a { border: 0; }
footer a:hover { color: var(--accent); }
footer .spacer { flex: 1; }
footer .lic { color: var(--faint); }

@media (max-width: 720px) {
  .race-ctrl { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .race-ctrl input[type=range] { flex: 1; width: auto; min-width: 6rem; }
  .race-ctrl .rate { min-width: auto; text-align: left; }
  .ob-body { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .ob-depth { height: 180px; }
  .rcard-foot { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  /* comprehensive reset — the previous block only covered .mrow + .md-bar-fill,
     leaving cellflash/rowin/.tcount-fill/.gcard transitions live. The race rAF
     loop already settles-once under reduced-motion in race.js. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}