/* components, on site.css's theme. No colour literals: tokens only. */
/* one column for every page, as wide as the window allows (--wrap): the banner and the data take the width, and the
   prose is a readable measure centred under the banner, so no page is text on the left and air on the right */
.doc, .doc.wide { max-width: none; }
.doc > :is(p, ul, ol, h2, h3, h4, blockquote, dl, .lead, .note, .small, .kv, pre, .stamp, .wordstrip),
.doc > :is(section, .scenario) > :is(p, ul, ol, h2, h3, h4, .note, .small) { max-width: var(--measure); margin-inline: auto; }
.doc > table { background: var(--surface-solid); border-radius: var(--radius-s); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
.doc pre, .doc code { font-family: var(--mono); font-size: .88em; }
.doc pre { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px 18px; overflow-x: auto; line-height: 1.5; }
.doc :not(pre) > code { background: var(--tint); border: 1px solid var(--line); border-radius: 6px; padding: .08em .35em; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1em 0 1.4em; background: var(--surface-hi); border-radius: var(--radius-s); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.doc th, .doc td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 500; background: var(--tint); }
.doc tr:last-child td { border-bottom: 0; }
.doc td.num, .doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
.doc .mono { font-family: var(--mono); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll table { min-width: 640px; }
/* a long table scrolls inside its own box, which is then the scroll container its header row sticks to; the corner
   cell sits over both the sticky header and the sticky first column (.datatable th:first-child, phones) */
.scroll.long, .tablewrap.long { max-height: min(80vh, 960px); overflow: auto; }
.scroll.long thead th, .tablewrap.long thead tr:last-child th { position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--tint), var(--tint)), var(--surface-solid); box-shadow: inset 0 -1px 0 var(--line-2); }
.tablewrap.long thead tr:last-child th:first-child { z-index: 3; }
.doc .scroll.long table { overflow: visible; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 15px; margin: 0 0 1.4em; }
.kv dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 13.5px; word-break: break-all; }
.doc .lead { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; }
.copy { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.copy:hover { border-color: var(--text-strong); }
@media (max-width: 640px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 10px; } }
.optable td { font-size: 14px; }
.optable th { white-space: nowrap; }
.optable .sel, .small { font-size: 11.5px; color: var(--muted); }
.optable a { text-decoration: none; }
.optable a:hover { text-decoration: underline; }
.optable tr:target td { background: var(--tint); }

/* demo: tabs, chart, ladder table */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2em 0 1.6em; }
.tabs a { font-size: 14px; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.tabs a:hover { border-color: var(--text-strong); }
.tabs a.on { border-color: var(--text-strong); background: var(--text-strong); color: var(--bg); }
.doc .scenario h2 { font-family: var(--sans); font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; text-transform: none; color: var(--text-strong); margin-block: 1.2em .4em; }
.chart svg text { font-family: var(--sans); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { font-size: 12px; fill: var(--faint); }
.chart polyline { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart circle { stroke: var(--surface-solid); stroke-width: 2; }
.chart .lbl { font-size: 12.5px; font-weight: 600; }
/* one colour per family, the same in the deck (scripts/talk/deck.py): ours emerald and ink, the WAD libraries one gold told apart by dash, the protocols one slate */
:root { --violet: color-mix(in oklab, var(--sapphire) 55%, var(--red)); --slate: color-mix(in oklab, var(--sapphire) 50%, var(--faint)); }
:root { --c-bl127: var(--emerald); --c-bl19: var(--text-strong); --c-wad: var(--gold); --c-quad: var(--violet); --c-6464: var(--sapphire); --c-protocol: var(--slate); }
.s-bl127 { --c: var(--c-bl127); } .s-bl19 { --c: var(--c-bl19); } .s-quad { --c: var(--c-quad); } .s-abdk { --c: var(--c-6464); }
.s-solady, .s-prb, .s-balancer { --c: var(--c-wad); } .s-aave, .s-morpho, .s-maker, .s-fraxlend, .s-euler { --c: var(--c-protocol); }
.chart polyline, .chart circle[class*="s-"] { stroke: var(--c); } .chart circle, .chart text[class*="s-"], .chart polygon { fill: var(--c); }
.chart polyline.s-quad { stroke-dasharray: 4 2; } .chart polyline.s-abdk { stroke-dasharray: 2 3; }
.chart polyline.s-solady { stroke-dasharray: 6 4; } .chart polyline.s-prb { stroke-dasharray: 10 3 2 3; } .chart polyline.s-balancer { stroke-dasharray: 8 3; }
.chart polyline.s-aave { stroke-dasharray: 1 3; } .chart polyline.s-morpho { stroke-dasharray: 6 2 2 2; } .chart polyline.s-maker { stroke-dasharray: 3 3; } .chart polyline.s-fraxlend { stroke-dasharray: 8 3; } .chart polyline.s-euler { stroke-dasharray: 2 2; }
.ladder { min-width: 1400px; font-size: 13px; }
.ladder td.val { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.ladder .ok { color: var(--emerald); } .ladder .wrong { color: var(--red); } .ladder .truth { color: var(--text-strong); }
.ladder .rev { color: var(--red); font-weight: 600; }
.ladder .meta { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.verify { margin-top: 4px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.verify:hover:not(:disabled) { border-color: var(--text-strong); }
.verify:disabled { color: var(--rule); cursor: default; }
.verify.match { border-color: var(--emerald); color: var(--emerald); } .verify.mismatch { border-color: var(--red); color: var(--red); }
.gasrow { font-size: 14px; }

/* archive cards and islands */
.archive { padding-block: 0 clamp(40px, 6vw, 72px); }
.archive .addr { font-family: var(--mono); font-size: 12px; word-break: break-all; margin: 8px 0 0; }
.archive .links { margin-top: 12px; display: flex; gap: 16px; }
.island { margin: 0 0 clamp(48px, 7vw, 96px); box-shadow: var(--shadow); }
.island-open { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }

/* demo v2: methodology, toggle, band chart, summary */
.method { background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 20px; margin: 1.2em 0; }
.method summary { cursor: pointer; font-weight: 600; }
.method dl { margin: 12px 0 4px; }
.method dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.method dd { margin: 4px 0 0; font-size: 15px; }
.doc .scenario h3 { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-block: 2em .6em; font-weight: 500; }
.toggle { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; margin: 0 0 10px; }
.toggle label { cursor: pointer; }
.chart .band { opacity: .14; stroke: none; }
.ladder { min-width: 2800px; }
.summary { font-size: 14px; } .summary .meta { color: var(--muted); font-size: 12px; }
.inputs { margin: 1em 0 1.4em; } .inputs summary { cursor: pointer; font-weight: 600; }
.inputlist td { font-size: 13.5px; }

/* fonts: self-hosted (SIL OFL 1.1), preloaded in base.html, and optional: a font that is not ready for the first paint waits for the next page instead of swapping in */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(/fonts/instrument-sans.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: optional; src: url(/fonts/instrument-sans-italic.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: optional; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); }

/* page changes: the old page eases out, then the new one eases in, one after the other so no frame shows both;
   between them the transition layer shows the same backdrop, and the bar stays put */
::view-transition { background: var(--mesh), var(--bg); }
::view-transition-group(root), ::view-transition-group(topbar) { animation: none; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root) { mix-blend-mode: normal; animation: page-out var(--t-out) var(--ease-in) both; }
::view-transition-new(root) { mix-blend-mode: normal; animation: page-in var(--t-in) var(--ease-out) 60ms both; }
::view-transition-old(topbar) { display: none; }
::view-transition-new(topbar) { animation: none; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

/* the banner holds still between pages (site.css .banner): its old and new pictures cross-fade in place, dark to dark */
::view-transition-group(banner) { animation-duration: var(--t-in); animation-timing-function: var(--ease-out); }
::view-transition-old(banner), ::view-transition-new(banner) { animation-duration: var(--t-in); }
/* phones: the wordmark stays (smaller), so the home link reads as Blockulator; on narrow phones the mark gives way to it */
@media (max-width: 640px) { .top { gap: 8px; } .links { gap: 2px; font-size: 14px; flex-wrap: nowrap; } .links a { padding: 6px 8px; white-space: nowrap; } .links .cta { margin-left: 2px; } .brand { gap: 8px; font-size: 16px; } .brand img { width: 28px; height: 28px; } }
@media (max-width: 439px) { .brand img { display: none; } }
@media (max-width: 399px) { .brand { font-size: 15px; } .links { font-size: 13px; } .links a { padding: 6px 6px; } }
@media (max-width: 359px) { .top { padding-inline: 10px; gap: 4px; } .brand { font-size: 13.5px; } .links { font-size: 12.5px; } .links a { padding: 5px 4px; } }

/* the shader stays hidden until hero.js has drawn its first frame (it adds .on), then fades in over the page background */
canvas.cloth { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
canvas.cloth.on { opacity: 1; }

/* inner page header: the banner (pagehead.html) */
.doc > .pagehead { margin: 0 0 clamp(32px, 4vw, 52px); }
.doc .pagehead h1 { margin: 0 0 .3em; color: var(--on-dark); }
.doc h2 { font-family: var(--sans); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.02em; text-transform: none; color: var(--text-strong); font-weight: 600; margin-block: 1.8em .5em; }

/* home: correct digits against N, one line per family, the WAD libraries as one band. Drawn twice (components.html ladderchart); one shows */
.digitchart { margin: 0 0 14px; max-width: 820px; }
.digitchart svg { display: block; }
.digitchart .narrow { display: none; }
@media (max-width: 560px) { .digitchart .wide { display: none; } .digitchart .narrow { display: block; } }
.digitchart .guide { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.digitchart .ours polyline { stroke-width: 3; }
.digitchart .wband { opacity: .3; }
.digitchart .hi { stroke-width: 1; } .digitchart .lo { stroke-width: 2.5; }
.digitchart .s-abdk polyline { stroke-dasharray: 5 3; }
/* the punchline: the protocols' own accrual drawn at full strength in a warning hue; the WAD band stays muted */
:root { --c-warn: color-mix(in oklab, var(--red) 70%, var(--gold)); }
.digitchart .s-aave { --c: var(--c-warn); }
.digitchart .s-aave.band { opacity: 1; }
.digitchart .s-aave .wband { opacity: .12; }
.digitchart .s-aave .hi, .digitchart .s-aave .lo { stroke-width: 2.5; }
.digitchart circle { stroke: none; } .digitchart circle.yr { stroke: var(--surface-solid); stroke-width: 1.5; }
.digitchart .lbl { fill: var(--c); font-size: 13px; font-weight: 600; }
.digitchart .s-solady .lbl { fill: color-mix(in oklab, var(--c) 70%, var(--text-strong)); }
.digitchart .narrow .tick { font-size: 11px; } .digitchart .narrow .lbl { font-size: 11.5px; }
/* an exact result is a ring, not a number */
.chart circle.exact { fill: var(--surface-solid); stroke: var(--c, var(--text-strong)); stroke-width: 2; }
.digitchart circle.exact { stroke: var(--c); stroke-width: 2; }
.block .note { margin: 0 0 24px; }
.block h2 { text-shadow: none; }
.home .ask { padding-block: clamp(48px, 7vw, 80px); }

/* results overview */
.matrix td, .matrix th { white-space: nowrap; padding: 9px 8px; }
.matrix td { font-size: 14px; }
.matrix th:first-child, .matrix td:first-child { padding-left: 14px; white-space: normal; min-width: 12em; }
.matrix td.ours { font-weight: 600; color: var(--text-strong); background: var(--tint); }
.matrix a { text-decoration: none; }
.matrix a:hover { text-decoration: underline; }
.matrix .rev { color: var(--red); font-size: 12px; }
.matrix .meta { color: var(--muted); }
.stamp { font-size: 14px; background: var(--surface-hi); border-left: 3px solid var(--emerald); border-radius: 8px; box-shadow: var(--shadow); padding: 10px 14px; margin: 1em 0 1.4em; }
.stamp.pending { border-left-color: var(--gold); }
.stamp.bad { border-left-color: var(--red); }

/* footer */
.foot { padding-block: 28px 40px; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-2); font-size: 14px; color: var(--faint); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 8px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text-strong); text-decoration: underline; }
.foot p { margin: 0; }

/* the scrollbar always has its gutter, so a short page and a long one line up and a page change never shifts the layout sideways */
html { scrollbar-gutter: stable; }

/* tabular numerals: every figure on the site takes the same width, so columns of digits line up; headlines keep proportional figures */
body, table, .mono, code, pre, kbd, .chart svg text, .kv dd, .stamp { font-variant-numeric: tabular-nums; }
/* no programming ligatures: bl127/= must read as typed, not as ≠ */
code, pre, kbd, .mono { font-variant-ligatures: none; }
h1, .hero .sub, .block h2, .askcard h2, .doc h2, .step h3 { font-variant-numeric: proportional-nums; }

/* vernier dividers: a 1px rule with a fine tick every 8px and a long one every 80px. Static, so nothing to reduce under prefers-reduced-motion; the ticks repeat, so any width works */
:root { --vernier: linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 80px) 0 100% / 100% 9px no-repeat, repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 8px) 0 100% / 100% 4px no-repeat; }
.doc hr { border: 0; height: 9px; margin: 2.4em 0; background: var(--vernier); }
.home .block + .block, .home .block + .ask { position: relative; }
.home .block + .block::before, .home .block + .ask::before { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(48px, 7vw, 88px) / 2 - 5px); height: 9px; background: var(--vernier); }

/* word strip: where a format spends its 256-bit word (components.html wordstrip) */
.s-wad { --c: var(--c-wad); }
.wordstrip { display: grid; gap: 16px; margin: 1.2em 0 1.6em; }
.ws-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 5px 12px; align-items: center; }
.ws-name { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text-strong); }
.ws-bar { position: relative; height: 26px; }
.ws-bar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ws-bar rect.pr { fill: var(--c); } .ws-bar rect.rg { fill: color-mix(in oklab, var(--c) 30%, var(--surface-solid)); }
.ws-bar rect.sg { fill: var(--faint); } .ws-bar rect.un { fill: var(--line); }
.ws-bar .radix { stroke: var(--red); stroke-width: 3; }
.ws-bar .n { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11.5px; color: var(--text-strong); pointer-events: none; white-space: nowrap; }
.ws-bar .n.pr { color: var(--surface-solid); } .s-wad .ws-bar .n.pr { color: var(--text-strong); } .ws-bar .n.un { color: var(--faint); }
.ws-key { grid-column: 2; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .ws-row { grid-template-columns: 1fr; } .ws-key { grid-column: 1; } }
.step h3 a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.step h3 a:hover { text-decoration-color: var(--text-strong); }

/* phone: a Markdown table wider than the column scrolls inside itself, and long inline code or a long number wraps, so no page scrolls sideways */
@media (max-width: 640px) { .doc > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .doc :not(pre) > code { overflow-wrap: anywhere; } .doc p, .doc li { overflow-wrap: break-word; } }

/* the pitch table (components.html pitch): ours in weight, the typical-input mark small */
.pitch tr.ours td, .pitch td.ours, .pitch th.ours, .gasall td.ours, .gasall th.ours { font-weight: 600; color: var(--text-strong); }
.pitch tr.ours td, .pitch td.ours, .gasall td.ours { background: var(--tint); }
.pitch td { white-space: nowrap; }
@media (max-width: 640px) { .pitch .what { display: none; } .pitch th, .pitch td { padding-inline: 8px; } }
sup.t { font-family: var(--mono); font-size: 10px; text-transform: none; color: var(--muted); }
.pitchblock .doc { padding-block: 0; }
.pitchblock .doc table { margin-top: 0; }
.pitchblock .doc .note { margin: 12px 0 0; font-size: 14.5px; max-width: none; }
/* op tables: the method folds away under a one-line summary */
.optable details.what summary, .scroll details.what summary { cursor: pointer; }
.scroll details.what[open] { white-space: normal; overflow-wrap: anywhere; }
/* what hover shows, written out under a table for screens without hover: the call per cell, the revert reasons, and
   the note of a tapped cell (notes.js) */
details.calls { margin: 8px auto 0; max-width: var(--measure); font-size: 13.5px; color: var(--muted); }
details.calls summary { cursor: pointer; font-size: 13px; }
details.calls dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 0; }
details.calls dt { font-weight: 600; color: var(--text); }
details.calls dd { margin: 0; }
details.calls ul { margin: 8px 0 0; padding-left: 1.2em; }
details.calls code { font-size: 12px; }
@media (max-width: 640px) { details.calls dl { grid-template-columns: 1fr; } details.calls dd { margin-bottom: 6px; } }
.cellnote { margin: 8px auto 0; max-width: var(--measure); font: 12.5px/1.5 var(--mono); color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.optable details.what[open] summary { margin-bottom: 4px; }
/* edges: digits only, the detail in each cell's title; the last row is the fewest digits per library */
.edges td.val { font-size: 14px; white-space: nowrap; }
.edges td.truth { font-family: var(--mono); font-size: 12.5px; color: var(--text-strong); }
.edges .ok { color: var(--emerald); }
.edges .rev { color: var(--red); font-weight: 600; font-size: 12.5px; }
.edges .meta { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.edges tfoot td { font-weight: 600; color: var(--text-strong); background: var(--tint); border-top: 2px solid var(--line-2); white-space: nowrap; }
.edges th, .edges td { padding-inline: 8px; }

/* /proofs/: the status of each core op, from proofs.json */
.proofs-pitch { font-size: 18px; }
.proofs td { vertical-align: top; }
.proofs .st { font-weight: 600; white-space: nowrap; }
.proofs .st-proven { color: var(--emerald); }
.proofs .st-proven-except, .proofs .st-proven-given-lemma { color: var(--gold); }
.proofs .st-fuzzed, .proofs .st-unproven, .proofs .st-in-progress { color: var(--muted); }
.proofs .st-counterexample { color: var(--red); }
.proofs .meta { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.proofs code.repro { font-size: 11.5px; white-space: normal; word-break: break-all; }
.optable a.proven { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--emerald); text-decoration: none; margin-left: 6px; }

/* ---- comfy pass (#164): sheets, glass charts, the home charts ---- */

/* inner pages sit on the backdrop: one layer of glass, on the data itself (tables, charts), never a sheet under it */
.doc th { background: var(--tint); }
.doc tbody tr { transition: background var(--t-fast) var(--ease-out); }
.doc tbody tr:hover td { background: var(--tint); }
.card.story:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--edge), var(--shadow-lift); }

/* home: sections breathe; the pitch table sits on glass like the charts */
.home main { padding-bottom: 8px; }
.home .figure { padding: clamp(14px, 2.4vw, 26px) clamp(12px, 2.4vw, 28px) clamp(10px, 2vw, 20px); margin: 0 0 18px; }
.home .small { color: var(--muted); max-width: 52em; }
.step { display: grid; align-content: start; gap: 2px; }

/* charts drawn twice (wide and narrow); one shows */
.duo svg { display: block; }
.duo .narrow { display: none; }
@media (max-width: 560px) { .duo .wide { display: none; } .duo .narrow { display: block; } }
.chart .tick { fill: var(--faint); }
.chart stop { stop-color: var(--c); }
.chart stop.a0 { stop-opacity: .2; } .chart stop.a1 { stop-opacity: 0; }
.chart .area { stroke: none; }
.digitchart .s-aave stop.a0 { stop-opacity: .16; } .digitchart .s-bl19 stop.a0 { stop-opacity: .09; }
.digitchart .note-a { fill: var(--c-warn); font-size: 12.5px; font-weight: 600; }
.digitchart .s-aave circle.yr { fill: var(--c-warn); stroke: var(--surface-solid); stroke-width: 2; }
.digitchart .ours polyline { stroke-width: 3.25; stroke-linecap: round; }
.digitchart .narrow .note-a { font-size: 11px; }

/* gas against digits */
.gd { max-width: 860px; }
.gd .better { stroke: none; }
.gd stop.glow0 { stop-color: var(--c-bl127); stop-opacity: .16; } .gd stop.glow1 { stop-color: var(--c-bl127); stop-opacity: 0; }
.gd .corner { fill: var(--c-bl127); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.gd .arrow { stroke: var(--faint); stroke-width: 1.4; stroke-dasharray: 3 4; fill: none; }
.gd .ahead { fill: var(--faint); }
.gd .ratio { fill: var(--muted); font-size: 12px; }
.gd .pt { fill: var(--c); stroke: var(--surface-solid); stroke-width: 2.5; }
.gd .ours .pt { stroke-width: 3; }
.gd .lbl { fill: var(--c); font-size: 13px; font-weight: 600; }
.gd .ours .lbl { font-size: 15px; }
.gd .s-solady .lbl, .gd .s-prb .lbl { fill: color-mix(in oklab, var(--c) 66%, var(--text-strong)); }
.gd .cap { margin: 10px 4px 2px; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .gd .cap strong { color: var(--text-strong); } .gd .cap code { font-family: var(--mono); font-size: .9em; } .gd .narrow .lbl { font-size: 11.5px; } .gd .narrow .ours .lbl { font-size: 13px; } .gd .narrow .corner { font-size: 10.5px; }

/* correct to the last wei */
.wb { max-width: 760px; }
.wb .s-blockulator { --c: var(--c-bl127); }
.wb .track { fill: var(--tint); }
.wb .bar { fill: var(--c); }
.wb .s-prb .bar { fill: color-mix(in oklab, var(--c-wad) 55%, var(--surface-solid)); stroke: var(--c-wad); stroke-width: 1; }
.wb .zero { fill: none; stroke: var(--c); stroke-width: 2.5; }
.wb .fn { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--text-strong); }
.wb .name { font-size: 12.5px; fill: var(--muted); }
.wb .ours .name { fill: var(--text-strong); font-weight: 600; }
.wb .val { font-size: 12.5px; fill: var(--text); font-weight: 600; }
.wb .ours .val { fill: var(--c); }
.wb .val.none { fill: var(--faint); font-weight: 400; }
.wb .narrow .fn, .wb .narrow .name, .wb .narrow .val { font-size: 11.5px; }


/* home units: a chart over its table, from the same rows (static/data/home.json); wider than the text column,
   up to 1320px, so every library's column fits without scrolling on a desktop */
.unit { margin: 72px 0 0; }
.unit > h2 { margin-bottom: .3em; }
.f-bl127 { --c: var(--c-bl127); } .f-bl19 { --c: var(--c-bl19); } .f-quad { --c: var(--c-quad); } .f-6464 { --c: var(--c-6464); } .f-wad { --c: var(--c-wad); } .f-protocol { --c: var(--c-protocol); }
.plot { margin: 18px 0 10px; min-height: 120px; }
.plot svg { display: block; max-width: 100%; height: auto; }
.plot .panelhead, .datatable tr.group th, .datatable th.group { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.plot .panelhead { margin: 10px 0 2px 128px; }
.plotlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.plotlegend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.plotlegend .sym { color: var(--faint); }
.tablewrap { overflow-x: auto; border-radius: var(--radius-s); background: var(--surface); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.datatable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.datatable th, .datatable td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.datatable thead th { font: 500 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--faint); vertical-align: bottom; }
.datatable .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.datatable tbody th { font-weight: 500; }
.datatable tr.group th { padding-top: 14px; border-bottom: 1px solid var(--line-2); }
.datatable tr.ours th, .datatable tr.ours td, .datatable td.ours, .datatable th.ours { font-weight: 700; color: var(--text-strong); }
.datatable .key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 0; }
.datatable thead th[class*="f-"] { border-top: 3px solid var(--c); }
.datatable .na { color: var(--rule); }
.datatable tbody tr:last-child th, .datatable tbody tr:last-child td { border-bottom: 0; }
.datatable.heat td[style] { background: color-mix(in oklab, var(--emerald) calc(min(var(--h), 1) * 42%), transparent); }
/* a table of losses (share wrong): the shade is red, darker for worse */
.datatable.heat.loss td[style] { background: color-mix(in oklab, var(--red) calc(min(var(--h), 1) * 32%), transparent); }
.datatable.heat th.group { text-align: center; border-bottom: 1px solid var(--line-2); }
.datatable.heat th a { color: inherit; text-decoration: none; } .datatable.heat th a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .unit { margin-top: 52px; }
  .datatable th:first-child { position: sticky; left: 0; background: var(--surface-solid); z-index: 1; }
}
.datatable.heat { font-size: 12.5px; }
.datatable.heat th, .datatable.heat td { padding: 6px 7px; }
.datatable.heat thead th { white-space: normal; min-width: 4em; line-height: 1.25; }
.datatable.heat tbody th { white-space: normal; min-width: 9em; max-width: 15em; }

/* the same page change where cross-document view transitions are missing (html.nvt, set in base.html):
   the page eases in on arrival and out before leaving; the bar is outside .page and stays put */
html.nvt .page { animation: page-in var(--t-in) var(--ease-out) both; }
html.nvt.leaving .page { animation: page-out var(--t-out) var(--ease-in) both; }
.datatable.edges tbody th { white-space: normal; min-width: 12em; max-width: 20em; font-weight: 400; }
.datatable.edges tbody th code { font-size: 12px; overflow-wrap: anywhere; }
.datatable td.aside { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.datatable tfoot th, .datatable tfoot td { border-top: 1px solid var(--line-2); font-weight: 600; }
.doc > pre { max-width: min(100%, 52em); }
/* each chart's space is held before it draws, so the table under it never moves */
.plot[data-chart="gas"] { min-height: 520px; } .plot[data-chart="accrual"] { min-height: 440px; } .plot[data-chart="wad"] { min-height: 600px; }
.plot[data-chart="ladder"] { min-height: 440px; } .plot[data-chart="edges"] { min-height: 440px; }
.plot[data-chart="steps"] { min-height: 400px; } .plot[data-chart="edgeop"] { min-height: 300px; } .plot[data-chart="gasops"] { min-height: 1200px; } .plot[data-chart="libops"] { min-height: 460px; } .plot[data-chart="deployed"] { min-height: 520px; } .plot[data-chart="live"] { min-height: 340px; }
@media (max-width: 760px) { .plot[data-chart] { min-height: 320px; } }
.datatable tr.unitrow th, .datatable tr.unitrow td { color: var(--muted); font-style: italic; border-bottom: 1px solid var(--line-2); }
/* a chart fades in once, as it comes near the viewport (plots.js); a redraw (resize, theme, truth toggle) does not fade.
   On hover the nearest dot takes a halo in its own colour. Stroke only: a CSS transform would replace the SVG
   translate that places the dot. */
.plot > * { opacity: 0; transition: opacity var(--t-in) var(--ease-out); }
.plot.in > * { opacity: 1; }
.plot .dotm { transition: stroke-width var(--t-fast) var(--ease-out), stroke-opacity var(--t-fast) var(--ease-out); }
.plot .dotm.hot { stroke: var(--dc); stroke-width: 12px; stroke-opacity: .3; }

/* home units: the takeaway on the left, its chart on the right, the table folded under both; one column below 1100px */
.home .unit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(56px, 7vw, 96px); }
.home .unit-text { position: sticky; top: 88px; }
.home .unit-text h2 { margin: 0 0 .5em; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; color: var(--text-strong); text-wrap: balance; }
.home .unit-text .note { margin: 0 0 1em; font-size: 18px; color: var(--text); }
.home .unit-chart { padding: clamp(12px, 1.8vw, 22px); }
.home .unit-chart .plot { margin: 0; }
.numbers { grid-column: 1 / -1; }
.numbers > summary { cursor: pointer; width: max-content; font-size: 14.5px; font-weight: 600; color: var(--text-strong); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); list-style: none; transition: border-color var(--t-fast) var(--ease-out); }
.numbers > summary::-webkit-details-marker { display: none; }
.numbers > summary::before { content: "+"; display: inline-block; width: 1em; font-family: var(--mono); color: var(--faint); }
.numbers[open] > summary::before { content: "−"; }
.numbers > summary:hover { border-color: var(--text-strong); }
.numbers[open] > summary { margin-bottom: 14px; }
@media (max-width: 1100px) { .home .unit { grid-template-columns: 1fr; } .home .unit-text { position: static; max-width: var(--measure); } }
.home .more h2 { margin-bottom: 24px; }
.home .stories { grid-template-columns: repeat(4, 1fr); }
.home a.story { text-decoration: none; }
.home a.story h3 { margin-top: 6px; }
@media (max-width: 1100px) { .home .stories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .home .stories { grid-template-columns: 1fr; } }
.home .block:first-of-type { padding-top: clamp(28px, 4vw, 44px); }
/* a chart's held space shows a faint frame until it draws (plots.js adds .in), so a section never looks empty */
.plot:not(.in) { border-radius: var(--radius-s); background: repeating-linear-gradient(180deg, transparent 0 63px, var(--line) 63px 64px), var(--tint); }
/* results: where to go next, one card per page */
.doc > .stories.next { margin: clamp(32px, 4vw, 48px) 0 0; grid-template-columns: repeat(3, 1fr); }
.doc a.story { text-decoration: none; }
@media (max-width: 900px) { .doc > .stories.next { grid-template-columns: 1fr; } }
.doc details.record { max-width: var(--measure); margin: -.4em auto 1.4em; }
.doc details.record > summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--text-strong); margin-bottom: 12px; }
@media (max-width: 640px) { .home .unit-chart { padding: 8px 6px; } }
/* an inner page's chart is a readable size on a wide screen, centred like the prose; its table keeps the full width */
.doc .plot { max-width: 1180px; margin-inline: auto; }
/* /results/cdf/: the library and its representation as plain text; on a phone the two detail columns give way */
.cdftable tbody th { font: 500 14px/1.35 var(--sans); text-transform: none; letter-spacing: normal; color: var(--text-strong); }
.cdftable tbody th .meta { font-weight: 400; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .cdftable .wide { display: none; } .cdftable thead th { white-space: normal; line-height: 1.3; } .cdftable th, .cdftable td { padding-inline: 8px; } }