/* Shared look for both versions of the fictional AIKloop docs, plus the demo pages. */
:root { color-scheme:light; --ink:#1b2430; --muted:#5b6876; --rule:#dde3e8; --rule-strong:#b8c4cc; --bg:#ffffff; --side:#f6f8fa; --surface:#ffffff; --brand:#3d5afe; --on-brand:#ffffff;
  --before:#b4472b; --before-soft:#fbeee9; --after:#6d4f96; --after-soft:#ece7f3; --blue:#2f6f8f; --blue-soft:#e3eef4;
  --ok:#1e6b38; --ok-soft:#e3f4e8; --code-bg:#eef1f4; --pre-bg:#0f1720; --hover:#e4e9ee; --note-bg:#fff8e1; --note-rule:#e0a100; --promo-bg:#eef2ff; --hit:rgba(27,36,48,.06);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", Consolas, monospace; }
/* Dark mode. baseof.html sets data-theme on <html>: the visitor's choice, or what their device asks for. */
:root[data-theme="dark"] { color-scheme:dark; --ink:#e6edf1; --muted:#9fb2bf; --rule:#2a3c48; --rule-strong:#3d5361; --bg:#0f1a22; --side:#16242e; --surface:#16242e; --brand:#9fb0ff; --on-brand:#0f1a22;
  --before:#e8907a; --before-soft:#3a211b; --after:#b7a1dd; --after-soft:#2a2438; --blue:#7fb7d4; --blue-soft:#1c3341;
  --ok:#7fd19a; --ok-soft:#1c3324; --code-bg:#1d2d38; --pre-bg:#16242e; --hover:#22343f; --note-bg:#3a3118; --note-rule:#c99a2e; --promo-bg:#1c2540; --hit:rgba(255,255,255,.08); }
* { box-sizing: border-box; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.6; }
a { color:var(--brand); }
code, pre { font-family:var(--mono); font-size:.9em; }
pre { background:var(--pre-bg); color:#e6edf3; padding:1rem; border-radius:6px; overflow-x:auto; }
:not(pre) > code { background:var(--code-bg); padding:.1em .35em; border-radius:4px; }
table { border-collapse:collapse; width:100%; margin:1rem 0; font-size:.95rem; }
th, td { border:1px solid var(--rule); padding:.5rem .7rem; text-align:left; vertical-align:top; }
th { background:var(--side); }
blockquote { margin:1rem 0; padding:.6rem 1rem; border-left:4px solid var(--note-rule); background:var(--note-bg); }

/* Demo bar: not part of the fictional site */
.demo-bar { display:flex; gap:1rem; align-items:center; padding:0 1rem; background:#14232e; color:#cfd9df; font-size:.85rem; }
.demo-top { display:contents; }
.demo-bar a.home { font-weight:600; white-space:nowrap; }
.demo-bar nav { display:flex; flex-wrap:wrap; gap:0 1.1rem; white-space:nowrap; }
.demo-bar a { color:#fff; text-decoration:none; padding:.75rem 0; }
.demo-bar a[aria-current] { box-shadow:inset 0 -3px 0 #9fd3ee; }
.demo-tag { white-space:nowrap; }
.demo-bar a.b { color:#ffb59f; } .demo-bar a.a { color:#cbbcf0; }
.demo-tag { background:#2a3c48; padding:.15rem .5rem; border-radius:4px; }

/* Fictional site chrome (before) */
.cookie-banner { background:var(--note-bg); padding:.6rem 1rem; font-size:.9rem; border-bottom:1px solid var(--note-rule); }
.cookie-banner button { margin-left:.4rem; }
nav.top { padding:.6rem 1rem; border-bottom:1px solid var(--rule); font-size:.9rem; }
.promo { margin-top:1.5rem; padding:1rem; background:var(--promo-bg); border-radius:6px; }
.site-foot { border-top:1px solid var(--rule); padding:1rem; font-size:.85rem; color:var(--muted); }

/* Docs layout (both versions) */
.docs { display:grid; grid-template-columns:15rem minmax(0,1fr) 13rem; min-height:80vh; }
.sidebar { background:var(--side); border-right:1px solid var(--rule); padding:1.2rem 1rem; }
.logo { display:block; font-weight:700; color:var(--ink); text-decoration:none; font-size:1.1rem; margin-bottom:1rem; }
.logo span { font-weight:400; color:var(--muted); font-size:.85rem; }
.nav-group { text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--muted); margin:1rem 0 .3rem; }
.sidebar ul, .toc ul { list-style:none; padding:0; margin:0; }
.nav-toggle, .nav-button { display:none; }
.sidebar li a { display:block; padding:.25rem .5rem; border-radius:4px; color:var(--ink); text-decoration:none; font-size:.93rem; }
.sidebar li a.current, .sidebar li a:hover { background:var(--hover); }
.doc { padding:1.5rem 2.2rem 3rem; max-width:52rem; }
.doc h1 { margin:.2rem 0 1rem; }
.toc { padding:1.5rem 1rem; font-size:.88rem; border-left:1px solid var(--rule); }
.toc a { color:var(--muted); text-decoration:none; display:block; padding:.15rem 0; }
.toc ul ul { padding-left:.8rem; }
.version { display:inline-block; font-size:.78rem; padding:.1rem .5rem; border-radius:999px; margin:0; }
.current-v { background:var(--ok-soft); color:var(--ok); }
.md-link { font-size:.88rem; margin:-.5rem 0 1rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.8rem; margin-top:1.5rem; }
.card { display:block; border:1px solid var(--rule); border-radius:6px; padding:.9rem; text-decoration:none; color:var(--ink); }
.card strong { display:block; } .card span { font-size:.88rem; color:var(--muted); }
.card:hover { border-color:var(--brand); }

/* Demo pages */
.overview { max-width:60rem; margin:0 auto; padding:2.5rem 1.25rem 3rem; }
.overview.wide { max-width:78rem; }
.kicker { text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--muted); margin:0; }
.overview h1 { font-size:2.2rem; margin:.3rem 0 .8rem; line-height:1.15; }
.lead { font-size:1.15rem; color:var(--muted); max-width:46rem; }
.choices { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1.2rem; align-items:center; margin:2rem 0 1.5rem; }
.choice { display:flex; flex-direction:column; align-self:stretch; border-radius:8px; padding:1.4rem; text-decoration:none; color:var(--ink); border:2px solid; }
.choice.b { border-color:var(--before); background:var(--before-soft); }
.choice.a { border-color:var(--after); background:var(--after-soft); }
.choice .label { font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; }
.choice.b .label { color:var(--before); } .choice.a .label { color:var(--after); }
.choice strong { display:block; font-size:1.3rem; margin:.3rem 0 .5rem; }
.choice .price { font-family:var(--display, var(--sans)); font-size:2.4rem; font-weight:750; line-height:1.1; letter-spacing:-.02em; }
.choice .who { font-weight:600; margin:.2rem 0 .7rem; }
.choice .what { margin-bottom:1rem; }
/* Looks like a button so the card reads as something to open; the whole card is the link. */
.choice .open { margin-top:auto; align-self:flex-start; padding:.5rem .9rem; border-radius:6px; border:2px solid; font-weight:600; background:var(--surface); }
.choice.b .open { color:var(--before); } .choice.a .open { color:var(--after); }
.choice:hover .open, .choice:focus-visible .open { text-decoration:underline; }
/* The Overview's result box: the headline first, then the two versions, as on the Agent view card. */
.deal { border:2px solid var(--rule); border-radius:12px; background:var(--surface); padding:1.6rem 1.6rem 1.4rem; margin:2rem 0 1.5rem; text-align:center; }
.deal-hero { margin:0; font-family:var(--display, var(--sans)); font-size:3rem; font-weight:750; line-height:1.05; letter-spacing:-.03em; color:var(--after); text-wrap:balance; }
.deal-sub { margin:.7rem auto 0; max-width:40rem; color:var(--muted); font-size:1.05rem; text-wrap:balance; }
.deal .choices { margin:1.4rem 0 0; text-align:left; }
.choices .vs { margin:0; font-weight:700; color:var(--muted); text-align:center; }
.agent-link { display:inline-block; font-weight:600; font-size:1.05rem; }
.fine { font-size:.85rem; color:var(--muted); margin-top:2rem; max-width:46rem; }
.pair { margin-top:2.5rem; border-top:1px solid var(--rule); padding-top:1.5rem; }
.pair h2 { margin:0 0 .3rem; }
.pair .note { color:var(--muted); margin:0 0 1rem; max-width:52rem; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.col { border-radius:6px; padding:.8rem; }
.col.b { background:var(--before-soft); border-top:4px solid var(--before); }
.col.a { background:var(--after-soft); border-top:4px solid var(--after); }
.col-head { margin:0 0 .5rem; font-weight:600; font-size:.9rem; }
.col pre { white-space:pre-wrap; word-break:break-word; max-height:28rem; overflow:auto; background:var(--surface); color:var(--ink); border:1px solid var(--rule); font-size:.82rem; margin:0; }

@media (max-width: 1000px) { .docs { grid-template-columns:13rem minmax(0,1fr); } .toc { display:none; } }
@media (max-width: 700px) {
  /* minmax(0, 1fr), not 1fr: a wide table or code sample must scroll inside the page, not widen it. */
  .docs { grid-template-columns:minmax(0,1fr); }
  .doc { padding:1.2rem 1rem 2rem; } .choices, .cols { grid-template-columns:1fr; }
  .doc table { display:block; overflow-x:auto; }
  /* The table of contents folds behind a menu icon, so the page starts at the top of the screen. */
  .sidebar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:.2rem 1rem;
    border-right:0; border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:3; max-height:100vh; overflow-y:auto; }
  .sidebar .logo { margin:0; }
  .nav-toggle { display:block; position:absolute; right:1rem; width:44px; height:44px; margin:0; opacity:0; cursor:pointer; }
  .nav-button { display:block; width:44px; height:44px; margin-right:-.6rem; border-radius:6px;
    background:linear-gradient(var(--ink) 0 0) center 14px / 20px 2px no-repeat, linear-gradient(var(--ink) 0 0) center 21px / 20px 2px no-repeat, linear-gradient(var(--ink) 0 0) center 28px / 20px 2px no-repeat; }
  .nav-toggle:checked + .nav-button { background-color:var(--hover); }
  .nav-toggle:focus-visible + .nav-button { outline:2px solid var(--brand); }
  .sidebar .nav-group, .sidebar ul { display:none; flex-basis:100%; }
  .nav-toggle:checked ~ .nav-group, .nav-toggle:checked ~ ul { display:block; }
  .sidebar .nav-group:last-of-type + ul, .sidebar ul:last-child { margin-bottom:.8rem; }
  .sidebar li a { padding:.6rem .5rem; }
}

/* JavaScript-rendered reference (before) */
h2 .method { display:inline-block; font-family:var(--mono); font-size:.8rem; background:#1e6b38; color:#fff; padding:.1rem .45rem; border-radius:4px; vertical-align:middle; }
.spec-link { font-size:.88rem; color:var(--muted); margin:-.4rem 0 1rem; }

/* Docs tests */
.md-link .tested { margin-left:.8rem; font-size:.82rem; padding:.1rem .5rem; border-radius:999px; background:var(--ok-soft); color:var(--ok); text-decoration:none; }
.md-link .tested.failing { background:var(--before-soft); color:var(--before); }
.agent-link + br + .agent-link { margin-top:.5rem; }
.scores { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.5rem 0; }
.score { border-radius:8px; padding:1rem 1.4rem; border:2px solid; }
.score.b { border-color:var(--before); background:var(--before-soft); }
.score.a { border-color:var(--after); background:var(--after-soft); }
.score .label { display:block; font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; }
/* The model names in labels: Opus a solid pill, Haiku an outlined one. The name is always written out;
   the shape only helps the eye. Not orange or purple, which mean Before and After. */
.model { display:inline-block; padding:.08em .6em; border-radius:999px; font-weight:700; line-height:1.45; white-space:nowrap; }
.model.m-opus { background:var(--ink); color:var(--bg); }
.model.m-haiku { box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); }
/* "Before" and "After" in the text: bold, in their colours. */
.v-b { color:var(--before); font-weight:700; } .v-a { color:var(--after); font-weight:700; }
.score.b .label { color:var(--before); } .score.a .label { color:var(--after); }
.score strong { font-size:1.8rem; margin-right:.3rem; }
table.tests { font-size:.9rem; }
table.tests thead th { position:sticky; top:0; }
table.tests tbody th { background:var(--surface); width:11rem; }
table.tests tr.first > * { border-top:2px solid var(--rule-strong); }
table.tests td.pass, table.tests td.fail { width:32%; }
table.tests td.pass .mark { color:var(--ok); font-weight:600; }
table.tests td.fail { background:var(--before-soft); }
table.tests td.fail .mark { color:var(--before); font-weight:600; }
table.tests .why { display:block; margin-top:.2rem; }
table.tests .why p { margin:0; }
table.tests code.line { display:block; margin-top:.35rem; font-size:.78rem; background:var(--surface); border:1px solid var(--rule); padding:.2rem .4rem; border-radius:4px; white-space:pre-wrap; word-break:break-word; }
.drift { margin-top:2.5rem; border-top:1px solid var(--rule); padding-top:1.5rem; }
.drift h2 { margin:0 0 .3rem; }
.drift .note { color:var(--muted); margin:0 0 1rem; max-width:52rem; }
table.checks td:first-child { width:16rem; font-weight:600; }
@media (max-width: 760px) { table.checks td:first-child { width:35%; } }
.steps > li { margin-bottom:1rem; }
table.tests th .spec-link { display:block; font-size:.8rem; font-weight:400; }
.cta { display:inline-block; margin-top:.5rem; padding:.6rem 1.2rem; background:var(--brand); color:var(--on-brand); font-weight:600; text-decoration:none; border-radius:6px; }
.cta:hover, .cta:focus-visible { filter:brightness(1.1); }
@media (max-width: 760px) {
  .scores { grid-template-columns:1fr; }
  table.tests, table.tests tbody, table.tests tr, table.tests th, table.tests td { display:block; width:auto; }
  table.tests thead { display:none; }
  table.tests td.pass, table.tests td.fail, table.tests tbody th { width:auto; }
  table.tests tbody th { background:var(--side); border-top:2px solid var(--rule-strong); }
  table.tests td:not([data-label]) { font-weight:600; }
  table.tests td[data-label]::before { content:attr(data-label) ": "; font-weight:700; }
}

/* Agent view: the agent test results. Chart marks use the before/after hues, stepped to pass the
   chart palette checks (contrast, colour-blind separation); text keeps the ink colours. */
.agent-view { --mark-before:#b4472b; --mark-after:#6d4f96; --grid:#e8ecef; --base:#c3ccd3; }
:root[data-theme="dark"] .agent-view { --mark-before:#e8907a; --mark-after:#b7a1dd; --grid:#22343f; --base:#3d5361; }
.results { margin-top:2rem; }
.results > .saving:first-child { margin-top:0; }
.results > h2, .sees > h2 { margin:0 0 .3rem; }
.results .note, .sees .note { color:var(--muted); margin:0 0 1rem; max-width:52rem; }
.models { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:1.5rem 0 1rem; }
.model h3 { margin:0 0 .5rem; }
.model .scores { margin:0; gap:.8rem; }
.model .score { padding:.8rem 1rem; }
.score .cost { display:block; font-size:.85rem; color:var(--muted); margin-top:.3rem; }
.model .why { font-size:.95rem; margin:.8rem 0 0; }
.viz-legend { display:flex; gap:.4rem 1rem; align-items:center; font-size:.88rem; color:var(--muted); margin:2rem 0 .2rem; }
.viz-legend .key { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:-.6rem; }
.viz-legend .key.b { background:var(--mark-before); } .viz-legend .key.a { background:var(--mark-after); }
.viz-title { margin:1.2rem 0 .3rem; font-size:1.05rem; }
.multiples { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.chart { position:relative; margin:0; }
.chart figcaption { font-size:.88rem; font-weight:600; color:var(--muted); }
.chart .plot { min-height:230px; }
.chart svg { display:block; overflow:visible; }
.chart .grid { stroke:var(--grid); stroke-width:1; }
.chart .base { stroke:var(--base); stroke-width:1; }
.chart .tick { font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums; }
.chart .mark.before { fill:var(--mark-before); } .chart .mark.after { fill:var(--mark-after); }
.chart .hit { fill:transparent; outline:none; }
.chart .hit:hover, .chart .hit:focus-visible { fill:var(--hit); }
.viz-tip { position:absolute; transform:translate(-50%,-100%); background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 2px 8px rgba(27,36,48,.12); padding:.35rem .6rem; font-size:.82rem; pointer-events:none; white-space:nowrap; z-index:2; }
.viz-tip strong { display:block; font-size:.95rem; }
.viz-tip span { display:block; color:var(--muted); }
.qkey { font-size:.85rem; color:var(--muted); margin:.6rem 0 0; }
.qkey b { color:var(--ink); }
.results h3 { margin-top:2rem; }
.scroll { overflow-x:auto; }
.failures-head { font-size:.95rem; font-weight:400; color:var(--muted); margin:1.5rem 0 .5rem; }
.failures-head strong { color:var(--ink); }
table.failures code { white-space:nowrap; }
details.numbers { margin-top:2rem; }
details.numbers summary { cursor:pointer; font-weight:600; }
table.by-question { font-size:.85rem; }
table.by-question th.b { color:var(--before); } table.by-question th.a { color:var(--after); }
table.by-question th.b, table.by-question th.a { text-transform:capitalize; }
table.by-question td { white-space:nowrap; font-variant-numeric:tabular-nums; }
table.by-question th .avg { font-weight:400; font-size:.8em; color:var(--muted); }
table.by-question .split { border-left:4px double var(--rule-strong); }
.sees { margin-top:3.5rem; border-top:2px solid var(--rule); padding-top:2rem; }
@media (max-width: 760px) { .models, .multiples { grid-template-columns:1fr; } }
.model .score strong { display:block; margin:0; line-height:1.2; }
.model .score .what { display:block; }
table.failures td p { margin:0; }
table.failures .why-note { display:block; margin-top:.6rem; padding:.5rem .7rem; font-size:.92rem; color:var(--ink);
  background:var(--blue-soft, var(--side)); border-left:4px solid var(--brand, var(--blue)); border-radius:0 6px 6px 0; }
table.failures .why-note p { margin:0; }
table.failures .why-note p + p { margin-top:.5rem; }
table.failures .why-note strong { color:var(--brand, var(--blue)); }
.headline { font-size:1.15rem; font-weight:600; margin:1.5rem 0 0; max-width:52rem; }
.score .figs { display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:.3rem 0 .2rem; }
.score .fig strong { display:block; font-size:1.8rem; line-height:1.15; margin:0; }
.score .fig span { display:block; font-size:.9rem; }
.versus { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:stretch; margin:1.2rem 0 .5rem; }
.versus .score { margin:0; }
.versus .score .label { text-transform:none; letter-spacing:0; font-size:.95rem; }
.versus .score .cost { color:var(--ink); font-size:.9rem; }
.versus .vs { align-self:center; font-weight:700; color:var(--muted); }
table.combos { max-width:46rem; }
table.combos th.b { color:var(--before); } table.combos th.a { color:var(--after); }
table.combos .small { display:block; font-size:.82rem; color:var(--muted); }
@media (max-width: 760px) { .versus { grid-template-columns:1fr; } .versus .vs { justify-self:center; } }
.footnote { font-size:.85rem; color:var(--muted); margin:.2rem 0 0; }
.chart-note { font-size:.88rem; color:var(--muted); margin:.4rem 0 0; }
details.prompts { margin-top:1.2rem; max-width:52rem; }
details.prompts summary { cursor:pointer; font-weight:600; }
details.prompts ol { padding-left:1.4rem; }
details.prompts li { margin:.6rem 0; }
details.prompts .title { font-weight:600; }
blockquote.prompt { margin:.3rem 0; padding:.5rem .8rem; border-left:4px solid var(--rule); background:var(--side); font-size:.92rem; }
blockquote.prompt p { margin:0; }
.chart .axis-title { font-size:11px; fill:var(--muted); }
.saving { border:2px solid var(--rule); border-radius:12px; padding:1.6rem 1.6rem 1.4rem; margin:1.5rem 0 1rem; background:var(--surface); text-align:center; }
.saving .hero { margin:0; }
.saving .hero strong { display:block; font-size:4.5rem; line-height:1; letter-spacing:-.03em; color:var(--after); }
.saving .headline { margin:.8rem auto 0; max-width:44rem; }
.saving .versus { text-align:left; margin-bottom:0; }
@media (max-width: 760px) { .saving { padding:1.2rem 1rem; } .saving .hero strong { font-size:3.2rem; } }
.versus .figs { align-items:flex-end; }
.versus .fig.main strong { font-size:2.6rem; }
.versus .fig.minor strong { font-size:1.25rem; }
.versus .fig.minor { padding-bottom:.25rem; }
.chart .plot { min-height:0; }
.qkey.narrow-only { display:none; }
@media (max-width: 760px) { .qkey.narrow-only { display:block; } }

/* Demo pages: the asergaz look. The docs sites keep the plain one above. */
.overview { --brand:var(--blue); --display:"Archivo", var(--sans); }
/* Purple is for what belongs to the "after" docs. On the Docs tests page the two tiles compare releases, not docs versions, so the first one stays blue. */
.doctests { --after:var(--blue); --after-soft:var(--blue-soft); }
.overview h1, .overview h2, .overview h3, .overview h4, .kicker, .cta, .hook strong, .saving .hero strong, .score strong, .demo-bar { font-family:var(--display, "Archivo", var(--sans)); }
.overview h1 { font-stretch:108%; font-weight:750; text-wrap:balance; }
.cta.ghost { background:transparent; color:var(--brand); box-shadow:inset 0 0 0 2px var(--brand); }
.cta.ghost:hover, .cta.ghost:focus-visible { background:var(--blue-soft); filter:none; }
.next { display:flex; flex-wrap:wrap; gap:.8rem; }
.next .cta { margin-top:0; }
.seg, .show-pass, table.tests .tally { display:none; }

@media (max-width: 760px) {
  .overview { padding-top:1.5rem; }
  .overview h1 { font-size:1.8rem; }
  .lead { font-size:1.05rem; }
  .choices { grid-template-columns:1fr; gap:.8rem; margin:1.2rem 0; } .choice { padding:1rem; }
  .next .cta { flex:1 1 100%; text-align:center; }
  .deal { padding:1.2rem 1rem; } .deal-hero { font-size:2.1rem; }
  .choice .price { font-size:2rem; }
  /* Two rows: the way back and the tag, then the five parts of the demo, all in view (they wrap, they don't scroll). */
  .demo-bar { flex-direction:column; align-items:stretch; gap:0; padding:.2rem 1rem .3rem; }
  .demo-top { display:flex; justify-content:space-between; align-items:center; gap:.8rem; border-bottom:1px solid #2a3c48; }
  .demo-bar a.home { padding:.55rem 0; }
  .demo-tag { font-size:.75rem; }
  .demo-bar nav { gap:0 .8rem; font-size:.82rem; }
  .demo-bar nav a { padding:.55rem 0; }

  /* "What went wrong": one card per failure, in place of a table wider than the screen. */
  table.failures, table.failures tbody, table.failures tr, table.failures td { display:block; width:auto; }
  table.failures thead { display:none; }
  table.failures tr { border:1px solid var(--rule); border-radius:6px; margin-bottom:.8rem; padding:.3rem .8rem; }
  table.failures td { border:0; border-top:1px solid var(--rule); padding:.5rem 0; }
  table.failures td:first-child { border-top:0; font-weight:600; white-space:normal; }
  table.failures td[data-label]:not(:first-child)::before { content:attr(data-label); display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  table.failures code { white-space:pre-wrap; word-break:break-word; }
  details.numbers .scroll::before { content:"Scroll sideways for more columns →"; display:block; font-size:.8rem; color:var(--muted); position:sticky; left:0; }

  /* Before and after, one at a time. The switch is added by the page's script. */
  .seg { display:flex; margin:0 0 .6rem; border:1px solid var(--rule); border-radius:8px; overflow:hidden; position:sticky; top:0; z-index:2; background:var(--surface); }
  .seg button { flex:1; padding:.65rem; border:0; background:var(--surface); font:inherit; font-weight:600; color:var(--muted); cursor:pointer; }
  .seg button.b[aria-pressed="true"] { background:var(--before-soft); color:var(--before); box-shadow:inset 0 -3px 0 var(--before); }
  .seg button.a[aria-pressed="true"] { background:var(--after-soft); color:var(--after); box-shadow:inset 0 -3px 0 var(--after); }
  .cols[data-show="b"] .col.a, .cols[data-show="a"] .col.b { display:none; }
  .col pre { max-height:24rem; }

  /* Docs tests: the failures first. Tests that pass with both releases are folded away until asked for. */
  .show-pass { display:flex; align-items:center; gap:.5rem; margin:1rem 0 .2rem; font-size:.95rem; padding:.4rem 0; }
  .show-pass input { width:1.2rem; height:1.2rem; }
  table.tests .tally { display:block; font-weight:400; font-size:.85rem; color:var(--ok); margin-top:.15rem; }
  table.tests .tally.failing { color:var(--before); }
  main:has(#show-pass:not(:checked)) table.tests tr.allpass > td { display:none; }
}

/* The footer of the demo pages: the same as the asergaz site, with the light/dark button. */
.demo-foot { margin-top:1rem; border-top:1px solid var(--rule); padding:1.5rem 0; color:var(--muted); font-size:.9rem; }
.demo-foot .wrap { max-width:64rem; margin:0 auto; padding:0 1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; }
.demo-foot p { margin:0; }
.demo-foot a { color:var(--blue); }
.theme-toggle { font:inherit; font-size:.9rem; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.55rem .9rem; cursor:pointer; }
.theme-toggle:hover { border-color:var(--brand); }
.when-dark, :root[data-theme="dark"] .when-light { display:none; }
:root[data-theme="dark"] .when-dark { display:inline; }