/* JaiScript docs: copper-bar demoscene. Dark-first; light via prefers-color-scheme or [data-theme]. */
:root {
  --display: "Chakra Petch", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, ui-monospace, monospace;
  --r1: #ff5e3a; --r2: #ff9f1a; --r3: #ffd83a; --r4: #6fe04a; --r5: #3ac8ff; --r6: #8a7bff; --r7: #ff4fd8;
  --rainbow: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1));
  --tick: linear-gradient(90deg, var(--r1), var(--r3));

  color-scheme: dark;
  --bg: #0b0d13; --bg2: #10131c; --panel: #141826; --panel2: #191e2e;
  --border: #252b3d; --border-strong: #3d4560;
  --fg: #d5dae6; --fg-dim: #8f98ae; --head: #f1f3f8;
  --accent: #ffb43c; --on-accent: #0b0d13; --link: #66cfff; --link-hover: #a3e2ff;
  --code-bg: #0f121c; --output-bg: #0c1611; --output-fg: #9eeab2; --output-border: #1d3a27;
  --capture-bg: #05070a; --capture-fg: #c8d2e0;
  --kw: #ff9a55; --ty: #6fd3ff; --str: #a6e08a; --num: #ffd84a; --com: #8a93a7; --fn: #d6b1ff;
  --mark: rgba(255,180,60,.13); --glow: rgba(255,180,60,.22); --scan: rgba(255,255,255,.025);
  --shadow: rgba(0,0,0,.55);
  --grad: linear-gradient(90deg, var(--r2), var(--r3), var(--r4), var(--r5));
}
/* CSS-only light fallback: applies when the OS asks for light and no explicit theme is set,
   so the page still has colors with JavaScript disabled. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f5f1; --bg2: #eceae3; --panel: #fffefb; --panel2: #f1efe8;
    --border: #dcd7cb; --border-strong: #aaa392;
    --fg: #2a2e37; --fg-dim: #5a6070; --head: #14161b;
    --accent: #9a5400; --on-accent: #fffefb; --link: #0a5f9c; --link-hover: #07446f;
    --code-bg: #fbfaf6; --output-bg: #edf5ee; --output-fg: #285a33; --output-border: #c6dbc8;
    --capture-bg: #23262d; --capture-fg: #d5dae3;
    --kw: #a8430c; --ty: #0a5f9c; --str: #356f20; --num: #7d5600; --com: #5f6674; --fn: #74399f;
    --mark: rgba(154,84,0,.10); --glow: rgba(154,84,0,.14); --scan: rgba(0,0,0,.025);
    --shadow: rgba(40,30,10,.14);
    --grad: linear-gradient(90deg, #c2410c, #a16207, #3f7d1c, #0a6aa8);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f1; --bg2: #eceae3; --panel: #fffefb; --panel2: #f1efe8;
  --border: #dcd7cb; --border-strong: #aaa392;
  --fg: #2a2e37; --fg-dim: #5a6070; --head: #14161b;
  --accent: #9a5400; --on-accent: #fffefb; --link: #0a5f9c; --link-hover: #07446f;
  --code-bg: #fbfaf6; --output-bg: #edf5ee; --output-fg: #285a33; --output-border: #c6dbc8;
  --capture-bg: #23262d; --capture-fg: #d5dae3;
  --kw: #a8430c; --ty: #0a5f9c; --str: #356f20; --num: #7d5600; --com: #5f6674; --fn: #74399f;
  --mark: rgba(154,84,0,.10); --glow: rgba(154,84,0,.14); --scan: rgba(0,0,0,.025);
  --shadow: rgba(40,30,10,.14);
  --grad: linear-gradient(90deg, #c2410c, #a16207, #3f7d1c, #0a6aa8);
}
/* explicit dark comes last so the toggle beats the light media query */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d13; --bg2: #10131c; --panel: #141826; --panel2: #191e2e;
  --border: #252b3d; --border-strong: #3d4560;
  --fg: #d5dae6; --fg-dim: #8f98ae; --head: #f1f3f8;
  --accent: #ffb43c; --on-accent: #0b0d13; --link: #66cfff; --link-hover: #a3e2ff;
  --code-bg: #0f121c; --output-bg: #0c1611; --output-fg: #9eeab2; --output-border: #1d3a27;
  --capture-bg: #05070a; --capture-fg: #c8d2e0;
  --kw: #ff9a55; --ty: #6fd3ff; --str: #a6e08a; --num: #ffd84a; --com: #8a93a7; --fn: #d6b1ff;
  --mark: rgba(255,180,60,.13); --glow: rgba(255,180,60,.22); --scan: rgba(255,255,255,.025);
  --shadow: rgba(0,0,0,.55);
  --grad: linear-gradient(90deg, var(--r2), var(--r3), var(--r4), var(--r5));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.65;
  overflow-wrap: break-word;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--glow); }

/* headings sit below the sticky header when you jump to an anchor */
h1[id], h2[id], h3[id] { scroll-margin-top: 5rem; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: .6rem; top: -3rem; z-index: 100;
  padding: .45rem .8rem; background: var(--panel); color: var(--head);
  border: 1px solid var(--accent); border-radius: 6px;
  font: 600 .8rem var(--mono);
}
.skip:focus { top: .8rem; text-decoration: none; }
main:focus { outline: none; }

/* ---------- copper bars ---------- */
@keyframes copper { from { background-position: 0 0; } to { background-position: -200% 0; } }
.rainbow {
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: copper 14s linear infinite;
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap;
  padding: calc(.6rem + 4px) 1.5rem .6rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--rainbow); background-size: 200% 100%;
  animation: copper 8s linear infinite;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font: 700 1.3rem/1 var(--display); letter-spacing: .02em; color: var(--head);
}
.brand:hover { text-decoration: none; color: var(--head); }
.brand-mark { font: 700 1.02rem/1 var(--mono); color: var(--accent); letter-spacing: 0; }
.brand-sub {
  font: 600 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); border: 1px solid var(--border-strong); border-radius: 4px; padding: .24rem .38rem .2rem;
}
.site-nav { display: flex; gap: .15rem 1.05rem; flex-wrap: wrap; }
.site-nav a {
  font: 600 .95rem var(--display); color: var(--fg-dim); letter-spacing: .01em;
  padding: .3rem 0; position: relative;
}
.site-nav a:hover { color: var(--head); text-decoration: none; }
.site-nav a.active { color: var(--head); box-shadow: inset 0 -2px 0 var(--accent); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
#theme-toggle {
  display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: none;
  background: none; border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
#theme-toggle:hover { border-color: var(--accent); color: var(--head); }

/* ---------- search ---------- */
.search { position: relative; }
#search-box {
  font: .85rem var(--mono); width: 15rem; max-width: 40vw;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .45rem 2.1rem .45rem .65rem;
}
#search-box::placeholder { color: var(--fg-dim); opacity: 1; }
.search::after {
  content: "/"; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font: .72rem/1 var(--mono); color: var(--fg-dim);
  border: 1px solid var(--border-strong); border-radius: 3px; padding: .15rem .34rem;
  pointer-events: none;
}
.search:focus-within::after { opacity: 0; }
#search-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--mark); }
#search-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }
#search-results {
  position: absolute; right: 0; top: calc(100% + 6px); width: 28rem; max-width: 86vw;
  max-height: 62vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 18px 50px -12px var(--shadow), 0 0 0 1px var(--mark); padding: .3rem;
}
#search-results a { display: block; padding: .5rem .65rem; border-radius: 0 6px 6px 0; color: var(--fg); border-left: 2px solid transparent; }
#search-results a:hover, #search-results a.sel { background: var(--mark); border-left-color: var(--accent); text-decoration: none; }
#search-results .sr-title { font: 600 .92rem var(--display); color: var(--head); }
#search-results .sr-ctx { font: .72rem var(--mono); color: var(--fg-dim); }
#search-results .sr-none { padding: .55rem .65rem; color: var(--fg-dim); font: .82rem var(--mono); }

/* ---------- layout ---------- */
.layout { display: flex; max-width: 82rem; margin: 0 auto; align-items: flex-start; }
.sidebar {
  position: sticky; top: 4.2rem; flex: 0 0 16rem;
  max-height: calc(100vh - 4.2rem); overflow-y: auto;
  padding: 2rem 1rem 2.5rem 1.5rem; font-size: .92rem;
  scrollbar-width: thin;
}
.sidebar-box { border: 0; }
.sidebar-box + .sidebar-box { margin-top: 1.6rem; }
.sidebar-title {
  font: 600 .72rem var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: .7rem;
  list-style: none; pointer-events: none;   /* inert on desktop; a real control at <=900px */
}
.sidebar-title::-webkit-details-marker { display: none; }
.chapter-list { list-style: none; counter-reset: ch; margin: 0; padding: 0; display: grid; gap: .1rem; }
.chapter-list > li { counter-increment: ch; margin: 0; }
.chapter-list > li > a {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr);
  color: var(--fg); line-height: 1.4;
  padding: .3rem .6rem .3rem .55rem; border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
}
.chapter-list > li > a::before {
  content: counter(ch, decimal-leading-zero); font: .76rem/1.85 var(--mono); color: var(--fg-dim);
}
.chapter-list > li > a:hover { background: var(--mark); color: var(--head); text-decoration: none; }
.chapter-list > li.current > a {
  color: var(--head); background: var(--glow); border-left-color: var(--accent); font-weight: 700;
}
.chapter-list > li.current > a::before { color: var(--accent); }
/* in-page table of contents, filled by site.js */
.page-toc { list-style: none; margin: .25rem 0 .6rem 2.3rem; padding: 0; border-left: 1px solid var(--border); }
.sidebar > .sidebar-box > .page-toc { margin: 0; }
.page-toc:empty { display: none; }
.page-toc li { margin: 0; }
.page-toc li.lvl3 { padding-left: .75rem; }
.page-toc a {
  display: block; font-size: .84rem; line-height: 1.4; color: var(--fg-dim);
  padding: .2rem .55rem; margin-left: -1px;
  border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
}
.page-toc a::before { content: none; }
.page-toc a:hover { color: var(--head); background: var(--mark); text-decoration: none; }
.page-toc a.active { color: var(--head); border-left-color: var(--accent); }
.content { flex: 1 1 auto; min-width: 0; padding: 2rem 2.5rem 4rem; }
.chapter { max-width: 54rem; }

/* ---------- breadcrumbs ---------- */
.crumbs { margin: 0 0 .5rem; font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.crumbs a { color: var(--fg-dim); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs .sep { margin: 0 .5em; opacity: .7; }
.crumbs + .chapter > h1:first-child, .crumbs + h1 { margin-top: 0; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); color: var(--head); line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.01em; margin: .3rem 0 1rem; }
h2 { font-size: 1.55rem; font-weight: 700; margin: 2.8rem 0 .8rem; }
h2::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .95rem; height: 3px; margin: -.15em .6rem 0 0; border-radius: 2px;
  background: var(--tick);
}
h3 { font-size: 1.2rem; font-weight: 600; margin: 2rem 0 .55rem; }
h4 { font-size: 1.02rem; font-weight: 600; margin: 1.5rem 0 .4rem; }
h1:first-child, h2:first-child { margin-top: .3rem; }
h1 code, h2 code, h3 code, h4 code, .toc > li > a code {
  background: none; border: 0; padding: 0; font-size: .9em; color: inherit;
}
.hlink { opacity: 0; margin-left: .35rem; font-size: .8em; color: var(--accent); }
h1:hover .hlink, h2:hover .hlink, h3:hover .hlink { opacity: .8; }
.hlink:focus-visible,
h1:focus-within .hlink, h2:focus-within .hlink, h3:focus-within .hlink { opacity: 1; }
.hlink::after { content: "#"; color: var(--accent); font-family: var(--mono); }
p { margin: .8rem 0; }
p.lead { font-size: 1.12rem; color: var(--head); }
em { color: inherit; }
strong { color: var(--head); }
.muted { color: var(--fg-dim); }
code {
  font-family: var(--mono); font-size: .86em;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 4px; padding: .05em .32em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
kbd {
  font: .82em var(--mono); color: var(--head);
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: .02em .35em;
}
ul, ol { padding-left: 1.5rem; }
li { margin: .35rem 0; }
li::marker { color: var(--fg-dim); }
/* prose measure: ~70 characters. Code blocks and tables keep the full column. */
.chapter > p, .chapter > ul, .chapter > ol, .chapter .callout,
.home-section > p { max-width: 70ch; }
/* section index pages have no .chapter wrapper; give them the same column width */
.content > h1, .content > .toc { max-width: 54rem; }
.content > p { max-width: 70ch; }
/* prose links carry an underline, not just a hue */
.chapter p a, .chapter li a, .chapter td a, .toc-desc a, .content > p a,
.pillar p a, .tradeoffs a, .receipt a, .home-section > p a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
.chapter p a:hover, .chapter li a:hover, .chapter td a:hover, .content > p a:hover,
.home-section > p a:hover { text-decoration-color: currentColor; }

/* ---------- callouts ---------- */
.callout, blockquote {
  --tag: var(--link); --on-tag: var(--bg);
  position: relative; margin: 1.4rem 0; padding: .85rem 1.1rem .85rem 6.1rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; color: var(--fg);
}
.callout::before {
  content: "note"; position: absolute; left: 1rem; top: 1.05rem;
  font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-tag); background: var(--tag); border-radius: 4px; padding: .3rem .45rem .26rem;
}
.callout.tip { --tag: var(--output-fg); }
.callout.tip::before { content: "tip"; }
.callout.warn { --tag: var(--accent); --on-tag: var(--on-accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.callout.warn::before { content: "careful"; }
.callout.cpp { --tag: var(--accent); --on-tag: var(--on-accent); }
.callout.cpp::before { content: "C++"; }
blockquote { padding-left: 1.1rem; border-left: 3px solid var(--border-strong); border-radius: 0 8px 8px 0; }
.callout p, blockquote p { margin: .35rem 0; }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout code { background: var(--bg2); }
article.chapter details {
  margin: 1.3rem 0; padding: .6rem 1.1rem .7rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
article.chapter details > summary {
  cursor: pointer; font: 600 .76rem var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-dim);
}
article.chapter details > summary:hover { color: var(--head); }
article.chapter details[open] > summary { margin-bottom: .35rem; }
article.chapter details p { margin: .45rem 0; }

/* ---------- code blocks ---------- */
.codeblock {
  position: relative; margin: 1.2rem 0; border: 1px solid var(--border);
  border-radius: 8px; background: var(--code-bg); overflow: hidden;
}
.codeblock + p { margin-top: 1rem; }
.codeblock pre {
  margin: 0; padding: .9rem 1rem; overflow-x: auto; tab-size: 4;
  font-family: var(--mono); font-size: .84rem; line-height: 1.6;
  scrollbar-width: thin;
}
.codeblock pre code { background: none; border: none; padding: 0; font-size: 1em; display: block; }
/* line-number gutter (added by site.js): sticky so numbers survive horizontal scroll,
   non-selectable so copied code never picks them up */
.cb-numbered { display: flex; }
.cb-gutter {
  user-select: none; -webkit-user-select: none; flex: none; white-space: pre;
  text-align: right; min-width: 2ch; padding-right: .75rem; margin-right: .85rem;
  border-right: 1px solid var(--border); color: var(--fg-dim); opacity: .75;
  position: sticky; left: 0; background: var(--code-bg);
}
.cb-numbered code { flex: 1 1 auto; min-width: 0; }
/* the label is the pane's title strip; the copy button sits at its right end */
.cb-label {
  display: block; padding: .5rem 5.2rem .46rem 1rem;
  font: 600 .68rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); background: var(--panel2); border-bottom: 1px solid var(--border);
  user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-label.cb-file { text-transform: none; letter-spacing: .02em; }
.cb-jai > .cb-label::before, .cb-cpp > .cb-label::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .7rem; height: 3px; margin: -.12em .5rem 0 0; border-radius: 2px; background: var(--tick);
}
.cb-cpp > .cb-label::before { background: linear-gradient(90deg, var(--r5), var(--r6)); }
.cb-jai[data-host] > .cb-label::after { content: " \00b7  runs inside its host"; color: var(--fg-dim); opacity: .8; }
.cb-output { background: var(--output-bg); border-color: var(--output-border); }
.cb-output pre code { color: var(--output-fg); }
.cb-output > .cb-label { padding-right: 1rem; color: var(--output-fg); background: transparent; border-bottom-color: var(--output-border); }
.cb-capture { background: var(--capture-bg); border-color: #2a3242; }
.cb-capture pre code { color: var(--capture-fg); font-size: .95em; }
.cb-capture > .cb-label { padding-right: 1rem; color: var(--capture-fg); background: #11151d; border-bottom-color: #2a3242; }
.cb-capture .cb-gutter { background: var(--capture-bg); }
/* a verified-output block that directly follows a code sample docks under it */
.codeblock:has(+ .codeblock.cb-output) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.codeblock + .codeblock.cb-output { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* copy button: the right end of the title strip */
.cb-copy {
  position: absolute; top: 0; right: 0; height: 2.1rem; padding: 0 .95rem;
  font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--link); background: none; border: 0; border-radius: 0 7px 0 6px; cursor: pointer;
}
.cb-copy:hover { color: var(--head); background: var(--mark); }
.cb-copy:focus-visible { outline-offset: -3px; }
.cb-copy.done { color: var(--output-fg); }
/* a block without a title strip keeps the button as a corner overlay */
.codeblock:not(:has(> .cb-label)) .cb-copy {
  top: .35rem; right: .45rem; height: auto; padding: .3rem .5rem;
  background: var(--panel2); border: 1px solid var(--border-strong); border-radius: 5px;
  opacity: 0; transition: opacity .12s;
}
.codeblock:not(:has(> .cb-label)):hover .cb-copy,
.codeblock:not(:has(> .cb-label)):focus-within .cb-copy { opacity: 1; }
@media (hover: none) { .codeblock:not(:has(> .cb-label)) .cb-copy { opacity: 1; } }

/* code + output side by side: site.js wraps a sample and its output in .pair and sets
   --code-ch / --out-ch to their longest lines, so the panes sit beside each other only
   when both fit and stack (output under code) otherwise. The 1px gap shows the pair's
   background as the divider in either arrangement. The pair's font sets what 1ch measures. */
.pair {
  display: flex; flex-wrap: wrap; gap: 1px; margin: 1.2rem 0;
  background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  font-family: var(--mono); font-size: .84rem;
}
.pair > .codeblock {
  margin: 0; border: 0; border-radius: 0; min-width: 0;
  flex: 1.6 1 calc(var(--code-ch, 40) * 1ch + 5.5rem);
}
.pair > .codeblock.cb-output { flex: 1 1 calc(var(--out-ch, 24) * 1ch + 2.4rem); }
.pair + p { margin-top: 1rem; }

/* syntax colors */
.tk-kw { color: var(--kw); } .tk-ty { color: var(--ty); } .tk-str { color: var(--str); }
.tk-num { color: var(--num); } .tk-com { color: var(--com); font-style: italic; } .tk-fn { color: var(--fn); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; line-height: 1.5; }
.tablewrap table { min-width: 32rem; }
th, td { text-align: left; padding: .55rem .85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); background: var(--panel2);
}
th code { text-transform: none; letter-spacing: 0; }
td:first-child { color: var(--head); }
td code { font-size: .86em; }
tbody tr:hover td { background: var(--mark); }
tr:last-child td { border-bottom: none; }

/* ---------- prev/next ---------- */
.prevnext {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
  margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid var(--border);
}
.prevnext a {
  display: grid; gap: .25rem; align-content: start;
  padding: .85rem 1.05rem .95rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--head); font: 600 1.05rem/1.3 var(--display); overflow-wrap: anywhere;
  transition: border-color .15s, box-shadow .15s;
}
.prevnext a span {
  display: block; font: 600 .7rem var(--mono); color: var(--fg-dim); letter-spacing: .12em; text-transform: uppercase;
}
.prevnext a:hover { border-color: var(--accent); box-shadow: 0 0 22px -6px var(--glow); text-decoration: none; color: var(--head); }
.prevnext .next { grid-column: 2; text-align: right; }

/* ---------- TOC pages ---------- */
.toc { list-style: none; padding: 0; counter-reset: toc; display: grid; gap: .75rem; margin: 1.6rem 0; }
.toc > li {
  counter-increment: toc; margin: 0; padding: .85rem 1.1rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); transition: border-color .15s;
}
.toc > li:hover { border-color: var(--border-strong); }
.toc > li > a { font: 600 1.12rem var(--display); color: var(--head); }
.toc > li > a::before { content: counter(toc, decimal-leading-zero); font: 600 .8rem var(--mono); color: var(--accent); margin-right: .7rem; }
.toc-desc { margin: .3rem 0 0; font-size: .92rem; color: var(--fg-dim); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font: 600 .95rem var(--display); letter-spacing: .01em;
  padding: .65rem 1.15rem; border-radius: 6px; border: 1px solid var(--border-strong);
  color: var(--head); background: transparent;
}
.btn:hover { background: var(--mark); border-color: var(--accent); color: var(--head); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 26px var(--glow); }
.btn-primary:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }

/* ---------- landing ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.6rem; align-items: center;
  padding: 1.8rem 0 3rem; max-width: 78rem; margin: 0 auto;
}
.eyebrow { margin: 0 0 .8rem; font: 600 .78rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.04; margin: 0 0 1.1rem; letter-spacing: -.015em; }
.hero .tagline { font-size: 1.1rem; line-height: 1.6; color: var(--fg); max-width: 36rem; margin: 0 0 .9rem; }
.hero .sub { font: .8rem/1.5 var(--mono); color: var(--fg-dim); margin: 0 0 1.5rem; max-width: 36rem; }
.hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.chips li { margin: 0; font: .76rem var(--mono); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 999px; padding: .22rem .72rem; }

.demo {
  min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--panel);
  box-shadow: 0 0 0 1px var(--mark), 0 30px 70px -34px var(--glow);
}
.demo-bar {
  display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem .45rem .8rem; min-width: 0;
  background: var(--panel2); border-bottom: 1px solid var(--border); font: .76rem var(--mono); color: var(--fg-dim);
}
.demo-bar .dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--border-strong); }
.demo-bar .file { margin-left: .35rem; color: var(--fg); white-space: nowrap; }
.demo-status {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--output-fg);
}
.demo-status.idle { color: var(--fg-dim); }
.demo-save {
  flex: none; font: 600 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--link); background: none; border: 1px solid var(--border-strong); border-radius: 4px;
  padding: .32rem .45rem; cursor: pointer;
}
.demo-save:hover { color: var(--head); border-color: var(--accent); }
.demo pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; font: .84rem/1.6 var(--mono); color: var(--fg); background: var(--code-bg); }
.demo .edit { border-radius: 3px; padding: 0 .15rem; transition: background-color .5s; }
.demo .edit.flash { background: var(--glow); }
.scene {
  position: relative; border-top: 1px solid var(--border);
  background: repeating-linear-gradient(0deg, var(--scan) 0 2px, transparent 2px 4px), var(--bg2);
}
.scene canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 150; }
.scene-label { position: absolute; left: .8rem; bottom: .45rem; font: .72rem var(--mono); color: var(--fg-dim); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 1.4rem 0; }
.pillar {
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 1.05rem 1.15rem; position: relative; overflow: hidden; transition: border-color .15s;
}
.pillar:hover { border-color: var(--border-strong); }
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--rainbow); background-size: 200% 100%; opacity: .85;
}
.pillar h3 { margin: .25rem 0 .45rem; font-size: 1.08rem; }
.pillar h3 .pnum { font: 600 .8rem var(--mono); color: var(--accent); margin-right: .55em; }
.pillar p { font-size: .94rem; color: var(--fg); margin: .35rem 0; }
.receipts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 1.3rem 0; }
.receipt { border: 1px solid var(--border); border-radius: 8px; padding: .95rem 1.05rem; background: var(--bg2); }
.receipt .big { font: 700 1.5rem/1.2 var(--display); color: var(--head); display: block; margin-bottom: .2rem; }
.receipt .what { font-size: .9rem; color: var(--fg-dim); }
.tradeoffs li { margin: .7rem 0; }
.home-section { max-width: 60rem; margin: 0 auto; padding: 0 0 1.2rem; }
.home-section > h2 { font-size: 1.6rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 3rem;
  padding: 1.6rem 1.5rem 2.2rem; text-align: center;
  font: .76rem/1.9 var(--mono); color: var(--fg-dim);
}
.site-footer p { margin: .1rem 0; }
.site-footer a { color: var(--fg); }
.site-footer a:hover { color: var(--link-hover); }

/* ---------- full API reference ---------- */
.api-controls {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: end;
  padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.api-controls label { display: flex; flex-direction: column; gap: .35rem; font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.api-controls input { min-width: min(24rem, 75vw); }
.api-controls input, .api-controls select {
  font: .9rem var(--mono); letter-spacing: 0; text-transform: none; padding: .5rem .6rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px;
}
.api-controls input:focus, .api-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--mark); }
.api-controls input:focus-visible, .api-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.api-controls p { flex-basis: 100%; margin: 0; font: .8rem var(--mono); color: var(--fg-dim); }
.api-group > h2 { margin-top: 2.4rem; }
.api-entry { border-top: 1px solid var(--border); padding: .55rem 0 .1rem; margin-top: .9rem; }
.api-entry h3 { margin: .2rem 0 .3rem; font-size: 1rem; }
.api-entry h3 code { font-size: .92em; color: var(--head); white-space: normal; overflow-wrap: anywhere; }
.api-entry p { margin: .3rem 0; font-size: .94rem; }
.api-entry[hidden], .api-group[hidden] { display: none; }

/* JetBrains Mono ligatures would draw <=> as one arrow glyph; a language reference shows the characters typed.
   Last, so no font shorthand in a component rule resets it. */
code, pre, kbd, samp, .cb-gutter, .demo pre, #search-box, .api-controls input {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}

/* ---------- narrow widths ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 900px) {
  .site-header { position: static; padding: calc(.55rem + 4px) 1rem .6rem; gap: .5rem 1rem; }
  .header-tools { margin-left: 0; width: 100%; }
  .search { flex: 1; }
  #search-box { width: 100%; max-width: none; }
  #search-results { left: 0; right: auto; width: 100%; max-width: none; }
  /* stretch, not flex-start: a column flex item sized to fit-content would take its
     width from the longest line of code and push the whole page sideways */
  .layout { flex-direction: column; align-items: stretch; }
  .sidebar {
    display: block; position: static; flex: none; width: 100%; min-width: 0;
    max-height: none; padding: .9rem 1rem 0;
  }
  .sidebar-box { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: .55rem .7rem; }
  .sidebar-title {
    cursor: pointer; pointer-events: auto; display: list-item; list-style: disclosure-closed;
    margin: 0 0 0 1rem; padding: .15rem 0;
  }
  .sidebar details[open] > .sidebar-title { list-style: disclosure-open; margin-bottom: .5rem; }
  .content { padding: 1.2rem 1rem 3rem; }
  h1[id], h2[id], h3[id] { scroll-margin-top: 1rem; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .site-nav { gap: .1rem .85rem; }
  .site-nav a { font-size: .9rem; }
  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .prevnext .next { grid-column: auto; }
  .hero { padding: 1rem 0 1.6rem; }
  .receipt .big { font-size: 1.3rem; }
  .codeblock pre, .demo pre { font-size: .78rem; }
  .pair { font-size: .78rem; }
  .callout { padding: .8rem 1rem; }
  .callout::before { position: static; display: inline-block; margin-bottom: .45rem; }
  .demo-bar .dot { display: none; }
  .demo-bar .file { margin-left: 0; }
  .scene-label { position: static; display: block; padding: .2rem .8rem .35rem; font-size: .66rem; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rainbow, .site-header::before { animation: none; }
  html { scroll-behavior: auto; }
  .demo .edit, .prevnext a, .toc > li, .pillar { transition: none; }
}

/* ---------- print / save-as-PDF ---------- */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --bg2: #fff; --panel: #fff; --panel2: #f4f4f4; --border: #bbb; --border-strong: #999;
    --fg: #111; --fg-dim: #555; --head: #000;
    --link: #0b4a7a; --link-hover: #0b4a7a; --accent: #8a5f00; --on-accent: #fff;
    --code-bg: #f7f7f7; --output-bg: #f3f7f3; --output-fg: #233; --output-border: #bbb;
    --capture-bg: #f4f4f4; --capture-fg: #111;
    --kw: #8a2d00; --ty: #0b4a7a; --str: #2a5a18; --num: #6a4a00; --com: #666; --fn: #5a2a80;
    --mark: transparent; --glow: transparent; --shadow: transparent;
  }
  .site-header, .sidebar, .prevnext, .cb-copy, #search-results, .skip, .hlink, .demo, .crumbs { display: none !important; }
  .layout, .content { display: block; max-width: none; padding: 0; }
  .chapter { max-width: none; }
  .hero { display: block; padding: 0; }
  body { font-size: 11pt; line-height: 1.45; }
  .rainbow, .site-header::before { animation: none; }
  .rainbow, .grad { background: none; color: #000; -webkit-text-fill-color: #000; }
  .pair { display: block; background: none; }
  .codeblock, .tablewrap, .callout, .pillar, .receipt, .pair { break-inside: avoid; box-shadow: none; }
  .codeblock pre { overflow: visible; white-space: pre-wrap; word-break: break-word; }
  .cb-gutter { position: static; }
  a { color: inherit; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  h2 { break-after: avoid; }
}