/* 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));
  --title: linear-gradient(90deg, var(--r3), #ffffff); --pitch1: linear-gradient(90deg, var(--r1), var(--r2), var(--r3)); --pitch2: linear-gradient(90deg, var(--r3), var(--r4), var(--r5)); --pitch3: linear-gradient(90deg, var(--r5), var(--r6), var(--r7));
}
/* 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);
    --title: linear-gradient(90deg, #a16207, #14161b); --pitch1: linear-gradient(90deg, #b91c1c, #c2410c, #a16207); --pitch2: linear-gradient(90deg, #a16207, #3f7d1c, #0a6aa8); --pitch3: linear-gradient(90deg, #0a6aa8, #6d28d9, #a21caf);
  }
}
: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);
  --title: linear-gradient(90deg, #a16207, #14161b); --pitch1: linear-gradient(90deg, #b91c1c, #c2410c, #a16207); --pitch2: linear-gradient(90deg, #a16207, #3f7d1c, #0a6aa8); --pitch3: linear-gradient(90deg, #0a6aa8, #6d28d9, #a21caf);
}
/* 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));
  --title: linear-gradient(90deg, var(--r3), #ffffff); --pitch1: linear-gradient(90deg, var(--r1), var(--r2), var(--r3)); --pitch2: linear-gradient(90deg, var(--r3), var(--r4), var(--r5)); --pitch3: linear-gradient(90deg, var(--r5), var(--r6), var(--r7));
}

* { 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); }
.gh-link {
  display: inline-flex; align-items: center; gap: .4rem; height: 2.15rem; padding: 0 .65rem; flex: none;
  border: 1px solid var(--border-strong); border-radius: 6px; color: var(--head); font: 600 .88rem var(--display);
}
.gh-link:hover { border-color: var(--accent); background: var(--mark); color: var(--head); text-decoration: none; }

/* ---------- 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-none, #search-results .sr-note { padding: .55rem .65rem; color: var(--fg-dim); font: .82rem var(--mono); }
#search-results .sr-note { font-size: .72rem; }
#search-results .sr-group {
  font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
  padding: .6rem .65rem .2rem; overflow-wrap: anywhere;
}
#search-results .sr-group:not(:first-child) { border-top: 1px solid var(--border); margin-top: .3rem; }
#search-results .sr-title { overflow-wrap: anywhere; }
#search-results .sr-snip { font-size: .8rem; line-height: 1.45; color: var(--fg-dim); margin-top: .15rem; overflow-wrap: anywhere; }
#search-results mark { background: var(--glow); color: var(--head); border-radius: 2px; padding: 0 .1em; }

/* ---------- 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; }
.sidebar-current { 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, .receipt a, .home-section p a, .home-section li 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, .home-section li 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, .home-section 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, .home-section details > summary {
  cursor: pointer; font: 600 .76rem var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-dim);
}
article.chapter details > summary:hover, .home-section details > summary:hover { color: var(--head); }
article.chapter details[open] > summary, .home-section details[open] > summary { margin-bottom: .35rem; }
article.chapter details p, .home-section 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); }
/* example screenshots: real frames, two to a row, the first of a set often spanning both */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .9rem; margin: 1.1rem 0 1.5rem; }
.shot { margin: 0; min-width: 0; }
.shot-wide { grid-column: 1 / -1; }
.shot a { display: block; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #000; }
.shot a:hover { border-color: var(--border-strong); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: .45rem; font-size: .86rem; line-height: 1.45; color: var(--fg-dim); }
.shot-step { max-width: 560px; margin: 1rem 0 1.4rem; }
/* a screenshot not yet taken: the frame it will fill, saying what it must show */
.shot-pending { margin: 1rem 0 1.4rem; padding: .8rem 1rem; border: 1px dashed var(--border-strong); border-radius: 6px; font-size: .88rem; color: var(--fg-dim); }
.shot-pending p { margin: 0; }
/* 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; } }
/* a runnable sample (samples.js): reset, run and copy share the strip's right end, and its code edits in place */
.cb-tools { position: absolute; top: 0; right: 0; display: flex; }
.cb-tools .cb-copy { position: static; }
.cb-tool {
  height: 2.1rem; padding: 0 .8rem; font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--link); background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.cb-tool:hover { color: var(--head); background: var(--mark); }
.cb-tool:focus-visible { outline-offset: -3px; }
.cb-run { color: var(--accent); }
.cb-reset { display: none; color: var(--fg-dim); }
.cb-edited .cb-reset, .cb-touched .cb-reset { display: inline-block; }
.codeblock[data-run] > .cb-label { padding-right: 15rem; }
.codeblock:not(:has(> .cb-label)) .cb-tools .cb-copy { opacity: 1; }
.codeblock[data-run] pre > code, .codeblock[data-file] pre > code { outline: none; cursor: text; }
.codeblock[data-run]:focus-within, .codeblock[data-file]:focus-within { border-color: var(--accent); }
.cb-output.cb-ran > .cb-label { color: var(--accent); }
.run-error { color: var(--kw); }

/* 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); }

/* ---------- tabs: site.js shows the strip; without script every panel shows, stacked ---------- */
.tabs { margin: 1.2rem 0; }
.tab-list { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--border); }
.tab-list[hidden] { display: none; }
.tab-list [role="tab"] {
  margin-bottom: -1px; padding: .55rem 1rem; cursor: pointer;
  font: 600 .78rem/1.3 var(--mono); letter-spacing: .06em; color: var(--fg-dim);
  background: none; border: 1px solid transparent; border-radius: 7px 7px 0 0;
}
.tab-list [role="tab"]:hover { color: var(--head); background: var(--mark); }
.tab-list [role="tab"][aria-selected="true"] {
  color: var(--head); background: var(--bg); border-color: var(--border); border-bottom-color: var(--bg);
  box-shadow: inset 0 2px 0 var(--accent);
}
.tab-list [role="tab"]:focus-visible { outline-offset: -3px; }
.tab-panel:focus-visible { outline-offset: 4px; }
.tab-panel > p { max-width: 70ch; }
.tab-panel > h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }
.tab-panel > h3 + .codeblock { margin-top: .5rem; }

/* ---------- 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; }
tr[id] { scroll-margin-top: 5rem; }
tr:target td { background: var(--glow); }

/* ---------- 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); }
@keyframes rainbow-edge { from { background-position: 0 0, 0 0; } to { background-position: 0 0, -200% 0; } }
.btn-rainbow {
  border: 2px solid transparent; padding: calc(.65rem - 1px) calc(1.15rem - 1px);
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--rainbow) border-box;
  background-size: 100% 100%, 200% 100%; animation: rainbow-edge 6s linear infinite; box-shadow: 0 0 22px -6px var(--r3);
}
.btn-rainbow:hover { border-color: transparent; filter: brightness(1.15); box-shadow: 0 0 26px -4px var(--r3); }

/* ---------- 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 {
  width: fit-content; font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.04; margin: 0 0 .7rem; letter-spacing: -.015em;
  background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero .pitch { font-size: clamp(min(1.3rem, 4.6vw), 2vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 1.1rem; }
.hero .pitch .grad:nth-of-type(1) { background-image: var(--pitch1); }
.hero .pitch .grad:nth-of-type(2) { background-image: var(--pitch2); }
.hero .pitch .grad:nth-of-type(3) { background-image: var(--pitch3); }
.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-status.bad { color: var(--kw); }
.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); }
.demo .val { border-radius: 3px; padding: 0 .15rem; background: var(--mark); transition: background-color .5s; }
.demo .val.flash { background: var(--glow); }
.demo-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.3rem; padding: .6rem .9rem;
  border-top: 1px solid var(--border); background: var(--panel2); font: .76rem var(--mono); color: var(--fg-dim);
}
.demo-slider { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.demo-slider span { min-width: 3.3em; }
.demo-slider input { width: 6.5rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.demo-say { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.demo-say label { position: relative; cursor: pointer; }
.demo-say label + label { border-left: 1px solid var(--border-strong); }
.demo-say input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.demo-say span { display: block; padding: .22rem .7rem; }
.demo-say input:checked + span { background: var(--accent); color: var(--on-accent); }
.demo-say input:focus-visible + span { outline: 2px solid var(--link); outline-offset: -2px; }
.demo-engine { margin: 0; padding: .5rem .9rem; border-top: 1px solid var(--border); font: .74rem/1.5 var(--mono); color: var(--fg-dim); }
.demo-engine code { font-size: inherit; }
.demo-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.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); }
.home-section { max-width: 60rem; margin: 0 auto; padding: 0 0 1.2rem; }
.home-section > h2 { font-size: 1.6rem; }
.home-section .section-lead { font-size: 1.12rem; color: var(--head); }

/* ---------- 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 ---------- */
/* between the one-row header and the stacked one: the search box gives up width before anything wraps */
@media (min-width: 901px) and (max-width: 1180px) {
  .site-header { gap: .6rem 1rem; }
  .site-nav { gap: .15rem .8rem; }
  .gh-link { padding: 0 .55rem; }
  .gh-link span { display: none; }
  .header-tools { flex: 1 1 13rem; min-width: 0; justify-content: flex-end; }
  .search { flex: 0 1 15rem; min-width: 0; }
  #search-box { width: 100%; max-width: none; }
}
@media (min-width: 901px) and (max-width: 980px) {
  .brand-sub { display: none; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 900px) {
  /* relative, not static: the header keeps its z-index, so the search results stay above the page */
  .site-header { position: relative; 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; }
  .sidebar details:not([open]) .sidebar-current {
    display: inline; margin-left: .6rem; font: 600 .86rem var(--display); letter-spacing: 0; text-transform: none; color: var(--head);
  }
  .content { padding: 1.2rem 1rem 3rem; }
  h1[id], h2[id], h3[id], tr[id] { scroll-margin-top: 1rem; }
}
@media (max-width: 600px) {
  .gh-link span { display: none; }
  body { font-size: 1rem; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .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; }
  /* a two-column table stacks each row (label over its text); wider tables keep scrolling sideways */
  .tablewrap table:not(:has(tr > :nth-child(3))) { min-width: 0; }
  .tablewrap table:not(:has(tr > :nth-child(3))) :is(thead, tbody, tr, th, td) { display: block; }
  .tablewrap table:not(:has(tr > :nth-child(3))) :is(th, td):first-child { padding-bottom: .1rem; border-bottom: none; }
  .tablewrap table:not(:has(tr > :nth-child(3))) td:first-child { font-weight: 700; }
  .tablewrap table:not(:has(tr > :nth-child(3))) tr:last-child td:last-child { border-bottom: none; }
  .tablewrap table:not(:has(tr > :nth-child(3))) thead tr { display: flex; border-bottom: 1px solid var(--border); background: var(--panel2); }
  .tablewrap table:not(:has(tr > :nth-child(3))) thead th { border-bottom: none; padding-bottom: .55rem; }
}
/* bigger touch targets for the demo controls */
@media (pointer: coarse) {
  .demo-slider input { width: 8rem; height: 1.6rem; }
  .demo-say span { padding: .4rem .85rem; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rainbow, .site-header::before, .btn-rainbow { animation: none; }
  html { scroll-behavior: auto; }
  .demo .edit, .demo .val, .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, .hero h1 { 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; }
}