/* Grad School: "Gemcutter" (spec section 8). Forked from build-an-agent/assets/site.css.
   Order: 1 fonts, 2 tokens, 3 base, 4 chrome and layout, 5 the spine and entries, 6 questions,
   7 labs and the editor, 8 figures and widgets, 9 gems, finish card and thread, 10 pages,
   11 print, motion, forced colours. build.py check 19 parses the three token blocks below. */

/* == 1 fonts: self-hosted, subset by tools/fonts.py, font-display: swap (check 0) ============= */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/build-your-own/neural-network/assets/fonts/YoungSerif-Regular.b17ce78f0a.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/build-your-own/neural-network/assets/fonts/Literata-wght.10fe1427a2.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/build-your-own/neural-network/assets/fonts/Literata-Italic-wght.57db6f3ee3.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/build-your-own/neural-network/assets/fonts/JetBrainsMono-wght.a2fded2f38.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/build-your-own/neural-network/assets/fonts/InstrumentSans-wght.d410c2e9fb.woff2) format("woff2"); }

/* == 2 tokens: light, then dark twice (system preference, and the explicit toggle) ============ */
:root {
  color-scheme: light dark;
  --paper: #FBF9FA; --surface: #FFFFFF; --sunken: #F5EFF2; --ink: #1C1418; --ink-2: #66575E;
  --rule: #EADFE3; --rule-strong: #8F7C85; --garnet: #A1122E; --accent-strong: #C8203F; --on-accent: #FFFFFF;
  --garnet-soft: #FBE8EC; --good: #1E6B53; --good-soft: #E4F2EC;
  --code-bg: #1E1419; --code-ground: #F3E8EC; --code-ink: #F4ECEF; --code-kw: #FFB3C1; --code-str: #9FD8C0; --code-com: #B9A7AF;
  --axis-batch: #4A5A73; --axis-time: #1E6B6B; --axis-space: #8A5A00;
  --shadow-pop: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .10);

  --font-display: "Young Serif", "Literata", Georgia, serif;
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Literata", ui-monospace, Menlo, Consolas, monospace;
  --font-ui: "Instrument Sans", "Literata", system-ui, sans-serif;
  --fs-base: 1.0625rem; --fs--2: .75rem; --fs--1: .875rem; --fs-0: var(--fs-base);
  --fs-1: 1.3125rem; --fs-2: 1.625rem; --fs-3: 2rem; --fs-4: 2.5rem; --fs-code: .875rem;
  --lh-prose: 1.65; --lh-tight: 1.2; --lh-code: 1.55; --measure: 68ch;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px; --r-1: 3px; --r-2: 8px; --r-pill: 999px; --bar: 3px; --spine: 1.5px;
  --page-max: 1240px; --wide: 1080px; --pad: var(--s-4); --inset: 16px; --node: 8px; --btn-h: 44px;
  --t-fast: 120ms; --t-base: 240ms; --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 600px) {
  :root { --fs-base: 1.125rem; --fs-3: 2.5rem; --fs-4: 3.25rem; --fs-code: .9375rem; --gutter: 24px; --pad: var(--s-5); --inset: 32px; --node: 12px; --btn-h: 40px; }
}
@media (min-width: 960px) { :root { --gutter: 32px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17111A; --surface: #221A20; --sunken: #1B1418; --ink: #EDE3E7; --ink-2: #B3A3AA;
    --rule: #3A2A31; --rule-strong: #8A7580; --garnet: #FF8DA1; --accent-strong: #FF8DA1; --on-accent: #17111A;
    --garnet-soft: #3A1A24; --good: #6FD3AE; --good-soft: #13291F; --code-ground: #17111A;
    --axis-batch: #9DB0CF; --axis-time: #6CC4C4; --axis-space: #E0A94A;
    --shadow-pop: 0 0 0 1px #8A7580;
  }
}
:root[data-theme="dark"] {
  --paper: #17111A; --surface: #221A20; --sunken: #1B1418; --ink: #EDE3E7; --ink-2: #B3A3AA;
  --rule: #3A2A31; --rule-strong: #8A7580; --garnet: #FF8DA1; --accent-strong: #FF8DA1; --on-accent: #17111A;
  --garnet-soft: #3A1A24; --good: #6FD3AE; --good-soft: #13291F; --code-ground: #17111A;
  --axis-batch: #9DB0CF; --axis-time: #6CC4C4; --axis-space: #E0A94A;
  --shadow-pop: 0 0 0 1px #8A7580;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* == 3 base ==================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s-5); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-base)/var(--lh-prose) var(--font-body); overflow-wrap: break-word; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-3); }
h2 { font-size: var(--fs-2); margin-block: var(--s-8) var(--s-4); }
h3 { font-size: var(--fs-1); margin-block: var(--s-6) var(--s-3); }
p, ul, ol, dl, pre, table, figure, blockquote { margin-block: 0 var(--s-5); }
p { text-wrap: pretty; }
ul, ol { padding-inline-start: 1.4em; }
li + li { margin-block-start: var(--s-1); }
b, strong { font-weight: 700; }
a { color: var(--garnet); text-decoration: underline 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--garnet); outline-offset: 2px; }
code, kbd, samp, pre, textarea.code { font-family: var(--font-mono); font-variant-ligatures: none; }
code { font-size: .88em; background: var(--sunken); border-radius: var(--r-1); padding: 0 .25em; }
pre { font-size: var(--fs-code); line-height: var(--lh-code); tab-size: 4; border-radius: var(--r-2); padding: var(--s-3) var(--s-4); overflow-x: auto; white-space: pre; }
pre.code, pre[slot="code"], pre[slot="recorded"], .output, .diff { background: var(--code-bg); color: var(--code-ink); }
.kind-page main > pre, .spine > pre { background: var(--code-bg); color: var(--code-ink); }
:root[data-theme="dark"] :is(pre.code, pre[slot="code"], pre[slot="recorded"], .output) { border: 1px solid var(--rule-strong); }
@media (prefers-color-scheme: dark) {                   /* the same edge for a learner on system dark in auto mode */
  :root:not([data-theme="light"]) :is(pre.code, pre[slot="code"], pre[slot="recorded"], .output) { border: 1px solid var(--rule-strong); }
}
pre code, pre samp { font-size: inherit; background: none; padding: 0; color: inherit; }
kbd { font-size: var(--fs--2); border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: var(--r-1); padding: 0 4px; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-6); }
svg { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: var(--fs--1); }
th { font: 600 var(--fs--2) var(--font-ui); color: var(--ink-2); text-align: start; letter-spacing: .04em; text-transform: uppercase; }
th, td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
textarea, input, button, select { font: inherit; color: inherit; }
.tok-k { color: var(--code-kw); } .tok-s { color: var(--code-str); } .tok-c { color: var(--code-com); font-style: italic; }
.tok-m { outline: 1px solid var(--code-com); border-radius: var(--r-1); }
.visually-hidden, .live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-2); top: -4rem; z-index: 99; background: var(--surface); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); }
.skip-link:focus { top: var(--s-2); }
html.js .nojs-note { display: none; }
.label, .kicker, .role, .chip, .tag, .state, .minutes, .saved, .outline-title, .part-title, figcaption b, [slot="caption"] b {
  font-family: var(--font-ui); font-size: var(--fs--2); letter-spacing: .04em; }
.label { font-weight: 600; text-transform: uppercase; color: var(--ink-2); }

/* buttons: filled accent for the one main action, outlined for the rest */
button, .btn { cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--btn-h); padding: 0 var(--s-4); border-radius: var(--r-2);
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: 600 var(--fs--1) var(--font-ui); text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast); }
.btn:hover { background: var(--sunken); }
.btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(.94); }
.quiet { border: 0; background: none; color: var(--garnet); font: 400 var(--fs--1) var(--font-ui); padding: 0 var(--s-1); min-height: var(--btn-h); text-decoration: none; }
.quiet:hover { text-decoration: underline; }
[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.reason { font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-block-start: var(--s-4); }
.chip { display: inline-block; white-space: nowrap; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); padding: 2px 8px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip[data-tone="pass"] { color: var(--good); background: var(--good-soft); border-color: var(--good); }
.chip[data-tone="fail"] { color: var(--garnet); background: var(--garnet-soft); border-color: var(--garnet); }
.chip[data-tone="busy"] { color: var(--garnet); border-color: var(--garnet); }
.tick::before { content: ""; display: inline-block; width: .42em; height: .78em; margin: 0 .5em .05em .15em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.empty { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin: 0; }

/* == 4 chrome and layout: one ~68ch reading column; labs and figures break out to 1080px ======= */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); min-height: 60px; max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--gutter); border-bottom: 1px solid var(--rule); font: var(--fs--1) var(--font-ui); }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-2); margin-inline-end: auto; min-height: 44px; color: var(--ink); font: 400 var(--fs-1) var(--font-display); text-decoration: none; }
.wordmark .mark { fill: var(--garnet); } .wordmark .mark .mark-table { fill: none; stroke: var(--on-accent); stroke-width: 1; opacity: .7; }
.site-header a:not(.wordmark) { color: var(--ink); text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
.nav-links { display: none; list-style: none; gap: var(--s-5); margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-menu, .ember-menu { position: relative; }
.nav-menu summary, .ember-menu summary { list-style: none; cursor: pointer; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.nav-menu summary::-webkit-details-marker, .ember-menu summary::-webkit-details-marker { display: none; }
.nav-menu ul, .ember-menu-body { position: absolute; right: 0; z-index: 20; min-width: 14rem; margin: 0; padding: var(--s-3) var(--s-4); list-style: none;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop); }
.ember-menu-body p { margin: var(--s-2) 0; color: var(--ink-2); font-size: var(--fs--2); }
.nav-menu li a { display: block; padding-block: var(--s-3); }
.counter { font: var(--fs--2) var(--font-mono); color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.theme-toggle { border: 0; background: none; font: var(--fs--2) var(--font-ui); color: var(--ink-2); min-height: 44px; padding: 0; white-space: nowrap; }
.theme-toggle::before { content: "theme: "; }
@media (max-width: 599px) { .theme-toggle::before { content: none; } .wordmark { font-size: var(--fs-0); } }
@media (min-width: 600px) { .nav-links { display: flex; } .nav-menu { display: none; } }
.paused-banner { position: sticky; top: 0; z-index: 60; background: var(--garnet-soft); color: var(--ink); border-bottom: 2px solid var(--garnet); padding: var(--s-3) var(--gutter); font: 600 var(--fs--1) var(--font-ui); }

.page { max-width: var(--page-max); margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-8); }
.outline { display: none; }
main { min-width: 0; }
@media (min-width: 1200px) {
  .page:has(.outline) { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--s-7); }
  .outline { display: block; position: sticky; top: var(--s-5); align-self: start; max-height: calc(100vh - var(--s-7)); overflow-y: auto; font: var(--fs--1)/1.35 var(--font-ui); padding: 2px 2px 2px 8px; }
}
.outline-title { color: var(--ink-2); font-weight: 600; text-transform: uppercase; margin-block-end: var(--s-3); }
.outline ol { list-style: none; margin: 0; padding: 0 0 0 5px; border-inline-start: var(--spine) solid var(--rule-strong); }
.outline li { margin: 0; }
.outline a { position: relative; display: block; padding: 6px 0 6px var(--s-4); color: var(--ink-2); text-decoration: none; }
.outline a:hover { color: var(--ink); text-decoration: underline; }
.outline a::before { content: ""; position: absolute; left: -11px; top: .75em; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--paper); border: 1.5px solid var(--rule-strong); }
.outline a[data-state="active"] { color: var(--ink); } .outline a[data-state="active"]::before { border-color: var(--garnet); }
.outline a[data-state="done"]::before { background: var(--garnet); border-color: var(--garnet); }

.site-footer { max-width: var(--page-max); margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-7); border-top: 1px solid var(--rule);
  display: grid; gap: var(--s-5) var(--s-7); font: var(--fs--1)/1.5 var(--font-ui); color: var(--ink-2); }
@media (min-width: 600px) { .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer > p { grid-column: 1 / -1; } }
.site-footer h2 { font: 600 var(--fs--2) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding-block: var(--s-1); }
.site-footer p { margin: 0; max-width: var(--measure); }

/* == 5 the spine and its entries ================================================================ */
.lesson-head { position: relative; margin-block-end: var(--s-7); max-width: var(--measure); }
.lesson-head .head-gem { float: inline-end; margin-inline-start: var(--s-4); }
.kicker { color: var(--ink-2); font-weight: 600; text-transform: uppercase; margin-block-end: var(--s-3); }
.lesson-head .problem { font-style: italic; font-size: var(--fs-1); line-height: 1.4; color: var(--ink-2); margin-block: var(--s-3) var(--s-4); }
.lesson-head .meta { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin: 0; }
.spine > *, .spine > section > *, hx-recall > * { max-width: var(--measure); }
.spine > section { max-width: none; }
.spine > :is(hx-lab, hx-cell, hx-plot, hx-graph, hx-slider-fit, .thread), .spine > section > :is(hx-lab, hx-cell, hx-plot, hx-graph, hx-slider-fit) { max-width: var(--wide); }
.spine > :first-child { margin-block-start: 0; }
hx-ask, hx-predict, hx-lab, hx-cell, hx-recall, hx-nav, hx-end, hx-option, hx-plot, hx-graph, hx-slider-fit, hx-hero, hx-finish, hx-requeue, hx-record, hx-fig { display: block; }
hx-term { display: inline; }
hx-ask, hx-predict, hx-lab, hx-cell {
  position: relative; margin-block: var(--s-6); padding: var(--pad); background: var(--surface); border: 1px solid var(--rule-strong);
  border-inline-start: var(--bar) solid var(--garnet); border-radius: var(--r-2); scroll-margin-top: var(--s-5); }
hx-lab, hx-cell { border-inline-start-color: var(--ink); }
.entry-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 24px; margin-block-end: var(--s-3); }
.entry-head .label b { color: var(--garnet); }
.entry-head h3 { font: inherit; margin: 0; display: inline; text-transform: none; }
html:not(.js) :is(hx-ask, hx-predict) > [slot="stem"]::before, html:not(.js) hx-lab::before, html:not(.js) hx-cell > [slot="brief"]::before {
  display: block; margin-block-end: var(--s-2); font: 600 var(--fs--2) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
html:not(.js) hx-ask > [slot="stem"]::before { content: "question"; }
html:not(.js) hx-predict > [slot="stem"]::before { content: "predict"; }
html:not(.js) hx-lab::before { content: "lab · " attr(title); }
html:not(.js) hx-cell > [slot="brief"]::before { content: "try it"; }
.pause { position: relative; margin-block: var(--s-7); text-align: center; font: italic var(--fs--1) var(--font-body); color: var(--ink-2); display: flex; align-items: center; gap: var(--s-4); }
.pause::before, .pause::after { content: ""; flex: 1; border-top: 1px dashed var(--rule-strong); }
hx-recall { margin-block: 0 var(--s-7); }
hx-recall::before { content: "Recall"; display: block; font: 600 var(--fs--2) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-block-end: var(--s-3); }
hx-recall > hx-ask { margin-block: var(--s-3); }
.math-display { display: block; overflow-x: auto; overflow-y: hidden; max-width: 100%; margin-block: var(--s-4); padding-block: var(--s-2); }
.math-display:focus-visible { outline: 2px solid var(--garnet); outline-offset: 2px; }
.katex { font-size: 1em; color: inherit; }
.katex-display { margin: 0; }

/* == 6 questions: commit before reveal ============================================================ */
[slot="stem"] { font-size: var(--fs-1); line-height: 1.4; margin-block-end: var(--s-4); }
hx-recall [slot="stem"] { font-size: var(--fs-0); }
hx-ask textarea, .commit input[type="number"], .commit input[type="text"] { display: block; width: 100%; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: var(--s-3); line-height: 1.5; resize: vertical; }
.commit input[type="number"] { width: 9rem; font-family: var(--font-mono); display: inline-block; }
.commit .unit { margin-inline-start: var(--s-2); color: var(--ink-2); font-size: var(--fs--1); }
.commit .why-line { margin-block-start: var(--s-3); }
.commit label { font: var(--fs--1) var(--font-ui); color: var(--ink-2); display: block; margin-block-end: var(--s-1); }
[slot="nudge"], .hints { background: var(--garnet-soft); border-inline-start: var(--bar) solid var(--garnet); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); margin-block: var(--s-4) 0; font-size: var(--fs--1); }
html.js [slot="nudge"]:not([data-open]) { display: none; }
.privacy-note { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin: var(--s-3) 0 0; }
hx-option, .items > li { position: relative; margin-block: var(--s-2); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--paper); }
hx-option > label, .items > li > label { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); cursor: pointer; min-height: 44px; }
html:not(.js) hx-option { padding: var(--s-3) var(--s-4); }
hx-option input, .items input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ring { flex: none; width: 16px; height: 16px; margin-block-start: .35em; border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--surface); }
[type="checkbox"] + .ring { border-radius: var(--r-1); }
input:checked + .ring { border-color: var(--garnet); background: var(--garnet); box-shadow: inset 0 0 0 3px var(--surface); }
input:focus-visible + .ring { outline: 2px solid var(--garnet); outline-offset: 2px; }
hx-option:has(input:checked), .items > li:has(input:checked) { border-color: var(--garnet); box-shadow: 0 0 0 1px var(--garnet); }
.opt-text { flex: 1; min-width: 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-4) var(--s-2) calc(var(--s-4) + 16px + var(--s-3)); }
.tags:empty { display: none; }
.tag { border-radius: var(--r-1); padding: 1px 6px; font-weight: 600; }
.tag[data-tag="yours"] { color: var(--ink); background: var(--sunken); border: 1px solid var(--rule-strong); }
.tag[data-tag="yours"]::before { content: "● "; }
.tag[data-tag="actual"] { color: var(--good); background: var(--good-soft); }
[slot="why"] { font-size: var(--fs--1); color: var(--ink-2); padding: 0 var(--s-4) var(--s-3) calc(var(--s-4) + 16px + var(--s-3)); }
html.js :is(hx-predict, hx-ask):not([data-state="revealed"], [data-state="reflected"]) [slot="why"] { display: none; }
html:not(.js) [slot="why"] { padding: var(--s-1) 0 0; }
html:not(.js) hx-option[correct]::after { content: "answer"; font: 600 var(--fs--2) var(--font-ui); color: var(--good); }
.items { list-style: none; padding: 0; margin: 0 0 var(--s-4); counter-reset: item; }
.items[data-form="order"] > li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); counter-increment: item; }
.items[data-form="order"] > li::before { content: counter(item); font: var(--fs--2) var(--font-mono); color: var(--ink-2); width: 1.2em; }
.move { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--r-2); width: 44px; height: 40px; font: var(--fs--1) var(--font-mono); }
.slips { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 4px; }
.slip { margin: 0; background: var(--garnet-soft); border-inline-start: var(--bar) solid var(--garnet); border-radius: var(--r-1); padding: var(--s-2) var(--s-3); }
.slip .role { display: block; color: var(--garnet); font-weight: 600; text-transform: uppercase; }
.slip .body { display: block; white-space: pre-wrap; }
[slot="reveal"] { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
[slot="reveal"]:focus { outline: none; }
[slot="reveal"] > :last-child { margin-block-end: 0; }
html.js :is(hx-ask, hx-predict):not([data-state="revealed"], [data-state="reflected"]) > [slot="reveal"],
html.js :is(hx-predict, hx-cell) > [slot="recorded"], html.js hx-lab > :is([slot="test-list"], [slot="hints"]) { display: none; }
[slot="reveal"]::before, [slot="recorded"]::before { display: block; margin-block-end: var(--s-3); font: 600 var(--fs--2) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); content: "the answer"; }
html:not(.js) [slot="reveal"]::before { content: "Think first, then read on"; }
[slot="recorded"]::before { content: "recorded output"; }
[data-animate] > [slot="reveal"], .pop { animation: rise var(--t-base) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.result-line { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin-block: var(--s-4) 0; }
.rate, .rated { margin-block-start: var(--s-5); font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.output { margin: 0; border-radius: var(--r-2); padding: var(--s-3) var(--s-4); min-height: 3.2em; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs--1)/1.55 var(--font-mono); max-height: 36em; overflow: auto; }
.output .err { display: block; border-inline-start: var(--bar) solid var(--code-kw); padding-inline-start: var(--s-3); color: var(--code-kw); }
.output .stage, .output .muted { color: var(--code-com); }
.out-label { font: 600 var(--fs--2) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: var(--s-4) 0 var(--s-2); }
.dots i { font-style: normal; }                         /* a still "..." while code runs: nothing loops (spec 8.1) */

/* == 7 labs and the editor ========================================================================= */
hx-lab, hx-cell { container: lab / inline-size; }
hx-lab > [slot="brief"], hx-cell > [slot="brief"] { max-width: var(--measure); margin-block-end: var(--s-4); }
.spine > [slot="cold"] { font: var(--fs--1) var(--font-ui); color: var(--ink-2); background: var(--sunken); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); }
html.js .spine > [slot="cold"]:not([data-needed]) { display: none; }
.loadbar { position: absolute; inset: -1px 0 auto 0; height: 2px; overflow: hidden; border-radius: var(--r-2) var(--r-2) 0 0; }
.loadbar i { display: block; height: 100%; width: 0; background: var(--garnet); transition: width var(--t-base) linear; }
.hints { padding-inline-start: calc(var(--s-4) + 1.4em); list-style: decimal; margin-block-end: var(--s-4); }
.hints::before { content: "Hints"; display: block; margin-inline-start: -1.4em; font: 600 var(--fs--2) var(--font-ui); text-transform: uppercase; color: var(--garnet); letter-spacing: .04em; }
.panes { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule-strong); border-radius: var(--r-2); overflow: hidden; background: var(--code-ground); }
.tabs { display: flex; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--rule-strong); }
.tabs button { flex: none; border: 0; background: none; min-height: 44px; padding: 0 var(--s-4); font: var(--fs--1) var(--font-ui); color: var(--ink-2); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--garnet); font-weight: 600; }
.tabs button:focus-visible { outline-offset: -3px; }
.pane-code { min-width: 0; display: flex; flex-direction: column; background: var(--code-bg); }
.pane-head { display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-4); min-height: 40px; background: var(--code-bg); color: var(--code-com); border-bottom: 1px solid #3a2a31; font: var(--fs--2) var(--font-mono); }
.pane-head .file { color: var(--code-ink); font-weight: 700; }
.lock-note { margin: 0; padding: var(--s-2) var(--s-4); background: var(--code-bg); color: var(--code-ink); border-top: 1px solid #3a2a31; border-inline-start: var(--bar) solid var(--code-kw); font: var(--fs--1)/1.45 var(--font-ui); }
.panel { padding: var(--s-4); min-height: 12em; max-height: 44em; overflow: auto; background: var(--surface); }
.panel:focus-visible { outline-offset: -2px; }
.editor { position: relative; flex: 1; display: grid; font: var(--fs-code)/var(--lh-code) var(--font-mono); font-variant-ligatures: none; --gut: calc(3.4 * var(--fs-code)); background: var(--code-bg); color: var(--code-ink); }
.editor > :where(textarea, .backdrop) { grid-area: 1 / 1; margin: 0; border: 0; border-radius: 0; font: inherit; font-variant-ligatures: none; tab-size: 4; white-space: pre; overflow: auto;
  padding: var(--s-3) 0; min-height: calc(12 * var(--lh-code) * 1em + 2 * var(--s-3)); max-height: calc(30 * var(--lh-code) * 1em + 2 * var(--s-3)); }
.editor textarea { padding-inline: var(--gut) var(--s-4); background: transparent; color: transparent; caret-color: var(--code-ink); resize: none; outline-offset: -2px; width: 100%; }
.editor textarea::selection { background: rgb(255 179 193 / .3); color: transparent; }
.editor[data-readonly] textarea { cursor: default; }
.backdrop { pointer-events: none; counter-reset: ln; scrollbar-color: transparent transparent; background: var(--code-bg); color: var(--code-ink); }
.ln { display: block; counter-increment: ln; min-width: max-content; border-inline-start: var(--bar) solid transparent; opacity: .72; }
.ln::before { content: counter(ln); display: inline-block; position: sticky; inset-inline-start: 0; width: calc(var(--gut) - var(--bar)); padding-inline-end: 1.1em; text-align: end; color: var(--code-com); background: var(--code-bg); font-size: var(--fs--2); user-select: none; }
.ln[data-region="own"] { opacity: 1; background: rgb(255 141 161 / .12); border-inline-start-color: var(--code-kw); }
.ln[data-region="gap"] { opacity: .9; }
.ln[data-region="given"] { opacity: 1; background: rgb(159 216 192 / .10); border-inline-start-color: var(--code-str); }
.ln[data-hot] { background: rgb(255 179 193 / .30); border-inline-start-color: var(--code-kw); opacity: 1; }
pre.code .ln, [slot] > code .ln { opacity: 1; } pre.code .ln::before, [slot] > code .ln::before { content: none; }
.tests { list-style: none; margin: 0; padding: 0; font: var(--fs--1)/1.45 var(--font-ui); }
.tests > li { margin: 0; padding: var(--s-2) 0 var(--s-2) 1.9em; position: relative; border-bottom: 1px solid var(--rule); }
.tests .glyph { position: absolute; inset-inline-start: 0; top: var(--s-2); width: 1.3em; text-align: center; font: 700 var(--fs--1) var(--font-mono); color: var(--ink-2); }
.tests [data-result="pass"] .glyph { color: var(--good); } .tests [data-result="fail"] .glyph { color: var(--garnet); }
.tests button.sentence { border: 0; background: none; padding: 0; text-align: start; font: inherit; color: inherit; min-height: 28px; }
.tests .detail { margin-block: var(--s-2) var(--s-1); padding: var(--s-3); background: var(--garnet-soft); border-inline-start: var(--bar) solid var(--garnet); border-radius: var(--r-1); }
.tests .detail p { margin: 0 0 var(--s-2); white-space: pre-wrap; } .tests .detail .where { font: var(--fs--2) var(--font-mono); color: var(--ink-2); }
[slot="passed"], .banner { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-1); font-size: var(--fs--1); }
[slot="passed"] { background: var(--good-soft); border-inline-start: var(--bar) solid var(--good); }
html.js hx-lab:not([data-state="passed"]) > [slot="passed"] { display: none; }
.banner { background: var(--garnet-soft); border-inline-start: var(--bar) solid var(--garnet); }
.banner[data-tone="info"] { background: var(--sunken); border-inline-start-color: var(--rule-strong); }
.banner p { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-block-start: var(--s-4); }
.toolbar .spacer { flex: 1; }
.toolbar .more { position: relative; }
.saved, .legend, .first-run { color: var(--ink-2); margin: var(--s-3) 0 0; font-size: var(--fs--2); font-family: var(--font-ui); }
@container lab (max-width: 759px) {
  .toolbar .quiet-group { display: none; position: absolute; right: 0; bottom: calc(100% + var(--s-2)); flex-direction: column; align-items: stretch; min-width: 15rem;
    background: var(--surface); border-radius: var(--r-2); box-shadow: var(--shadow-pop); padding: var(--s-2) var(--s-4); border: 1px solid var(--rule-strong); z-index: 5; }
  .toolbar .more[data-open] .quiet-group { display: flex; }
}
@container lab (min-width: 760px) { .toolbar .more, .toolbar .quiet-group { display: contents; } .toolbar .more-btn { display: none; } }
details.workspace { margin-block-start: var(--s-4); font: var(--fs--1) var(--font-ui); }
details.workspace summary, .data summary, hx-requeue summary { cursor: pointer; color: var(--garnet); min-height: 36px; }
.ws-files { list-style: none; padding: 0; display: grid; gap: 2px; } .ws-files li { display: flex; gap: var(--s-3); align-items: center; margin: 0; }
.ws-files .quiet { font-family: var(--font-mono); min-height: 32px; }
.badge { font: 600 var(--fs--2) var(--font-ui); text-transform: uppercase; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); padding: 0 8px; color: var(--ink-2); }
.badge[data-badge="reference"] { border-style: dashed; } .badge[data-badge="yours"] { color: var(--garnet); border-color: var(--garnet); }
.ws-code { max-height: 28em; overflow: auto; }
.thread:empty, .thread-status:empty { display: none; }
.thread { max-width: var(--wide); font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
hx-cell .editor > :is(textarea, .backdrop) { min-height: calc(3 * var(--lh-code) * 1em + 2 * var(--s-3)); }
hx-cell .output { margin-block-start: var(--s-3); }
@media (max-width: 599px) {
  .spine > :is(hx-lab, hx-cell) { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline-end: 0; }
  .panes { margin-inline: calc(-1 * var(--pad)); border-inline: 0; border-radius: 0; }
}

/* == 8 figures and widgets (7.3 item 5): series 1 garnet solid, 2 slate dashed, 3 teal dotted ===== */
hx-plot, hx-graph, hx-slider-fit, hx-hero, figure.train { margin-block: var(--s-6); }
.chart { display: block; width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); }
.chart text { font: 11px var(--font-ui); fill: var(--ink-2); }
.chart .axes line { stroke: var(--rule-strong); stroke-width: 1; }
.chart .series { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.chart .s1 { stroke: var(--garnet); } .chart .s2 { stroke: var(--axis-batch); stroke-dasharray: 7 5; } .chart .s3 { stroke: var(--axis-time); stroke-dasharray: 2 4; }
.chart .pt.c0 { fill: var(--axis-batch); } .chart .pt.c1 { fill: var(--garnet); } .chart .pt.c2 { fill: var(--axis-time); }
.chart .cell.b0 { fill: var(--surface); } .chart .cell.b1 { fill: var(--garnet-soft); }
.chart .fit-line { stroke: var(--garnet); stroke-width: 2.5; }
.plot-error { font: var(--fs--1) var(--font-ui); color: var(--garnet); }
details.data { font: var(--fs--1) var(--font-ui); margin-block-start: var(--s-2); }
.train-caption, [slot="caption"] { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin: var(--s-2) 0 0; }
.graph-view { outline-offset: 2px; }
svg.graph { display: block; width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); }
svg.graph .edge { stroke: var(--rule-strong); stroke-width: 1.5; }
svg.graph .edge.hot { stroke: var(--garnet); stroke-width: 3; }
svg.graph .node rect { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.5; }
svg.graph .node.now rect { stroke: var(--garnet); stroke-width: 3; }
svg.graph text { font: 12px var(--font-mono); fill: var(--ink); } svg.graph .node-name { font-weight: 700; } svg.graph .node-grad { fill: var(--garnet); }
.graph-say { font: var(--fs--1) var(--font-ui); min-height: 1.5em; margin: var(--s-2) 0; }
.graph-controls, .fit-controls { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.fit-controls > div { display: flex; align-items: center; gap: var(--s-2); font: var(--fs--1) var(--font-mono); }
.fit-controls input[type="range"] { accent-color: var(--garnet); width: 12rem; max-width: 60vw; }
.fit-text { font: var(--fs--1) var(--font-mono); }
hx-hero canvas { display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--r-2); border: 1px solid var(--rule); }
.hero-toggle { margin-block-start: var(--s-3); }
svg.boundary { width: 100%; max-width: 640px; border-radius: var(--r-2); border: 1px solid var(--rule); }
svg.boundary .b0 { fill: var(--surface); } svg.boundary .b1 { fill: var(--garnet-soft); }
svg.boundary .c0 { fill: var(--axis-batch); } svg.boundary .c1 { fill: var(--garnet); }
hx-fig > svg { display: block; width: 100%; }

/* == 9 gems, the finish card, the thread banner, share links ======================================== */
.gem { flex: none; overflow: visible; }
.gem .gem-outline { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-dasharray: 5 4; }
.gem .gem-table, .gem .gem-facets { fill: none; stroke: var(--ink-2); stroke-width: 1; opacity: .5; }
.gem .gem-hint { display: none; }
.gem .gem-label { font: 700 15px var(--font-ui); fill: var(--ink-2); }
.gem[data-state="cut"] .gem-outline { fill: var(--garnet); stroke: var(--garnet); stroke-dasharray: none; }
.gem[data-state="cut"] :is(.gem-table, .gem-facets) { stroke: var(--on-accent); opacity: .55; }
.gem[data-state="cut"] .gem-label { fill: var(--on-accent); }
.gem[data-state="rough"] .gem-outline { stroke: var(--garnet); stroke-dasharray: none; }
.gem[data-state="rough"] :is(.gem-table, .gem-facets) { stroke: var(--garnet); }
.gem[data-state="rough"] .gem-hint { display: inline; fill: var(--garnet); }
.gem[data-state="rough"] .gem-label { fill: var(--garnet); }
hx-finish { margin-block: var(--s-7); padding: var(--s-5); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--surface); max-width: var(--measure); }
html.js hx-finish[data-state="hidden"] { display: none; }
hx-finish .finish-gem { float: inline-end; margin-inline-start: var(--s-4); }
hx-finish .finish-title { font-size: var(--fs-1); margin-block-end: var(--s-3); }
hx-finish[data-animate] .gem-outline { animation: cut 600ms var(--ease); }
@keyframes cut { from { fill-opacity: 0; } }
.finish-now b { color: var(--garnet); font-weight: 700; }
.finish-label { font: 600 var(--fs--2) var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin-block-end: var(--s-2); }
.finish-recent, .finish-part { font-size: var(--fs--1); color: var(--ink-2); }
.finish-next { font-size: var(--fs--1); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font: var(--fs--1) var(--font-ui); margin-block: var(--s-3); }
.share .label { width: 100%; margin: 0; }
hx-requeue { margin-block: var(--s-7); max-width: var(--measure); }
hx-end { max-width: var(--measure); margin-block: var(--s-7) 0; padding: var(--s-3); border: 1px solid var(--rule); background: var(--paper); font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
hx-end .label { margin-block-end: var(--s-2); }
hx-end form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
hx-end input[type="email"] { flex: 1 1 14rem; min-height: var(--btn-h); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: 0 var(--s-3); }
.report { font: var(--fs--2) var(--font-ui); margin-block-start: var(--s-6); }
hx-nav { display: grid; gap: var(--s-3); margin-block: var(--s-8) 0; }
hx-nav a { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); line-height: 1.35; background: var(--surface); }
hx-nav a:hover { background: var(--sunken); }
hx-nav .dir { display: block; color: var(--ink-2); font: var(--fs--2) var(--font-ui); text-transform: uppercase; letter-spacing: .04em; } hx-nav .num { color: var(--ink-2); }
hx-nav .question { display: block; font-size: var(--fs--1); color: var(--ink-2); margin-block-start: var(--s-1); }
hx-nav[data-state="done"] a[rel="next"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
hx-nav[data-state="done"] a[rel="next"] :is(.dir, .num, .question) { color: inherit; }
@media (min-width: 600px) { hx-nav { grid-template-columns: 1fr 1fr; } hx-nav a[rel="next"] { grid-column: 2; text-align: end; } hx-nav a[rel="prev"] { grid-column: 1; grid-row: 1; } }
hx-term, hx-term a { color: inherit; text-decoration: underline dotted var(--ink-2); text-underline-offset: .2em; cursor: help; }
.term-pop { position: absolute; z-index: 40; max-width: 320px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop); padding: var(--s-3) var(--s-4); font-size: var(--fs--1); }
.term-pop b { display: block; font: 700 var(--fs--1) var(--font-mono); } .term-pop p { margin: 0 0 var(--s-2); }

/* == 10 pages ======================================================================================== */
.kind-page main > :where(h1, h2, h3, p, ul, ol, dl, details, table, section, hx-hero, form) { max-width: var(--measure); }
.kind-page main > h1 { margin-block-end: var(--s-5); }
.kind-page main > .syllabus-map { max-width: 62rem; }
.subtitle { font-size: var(--fs-1); color: var(--ink-2); }
.map-summary { font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.syllabus-map, .syllabus-map ol { list-style: none; margin: 0; padding: 0; }
.syllabus-map .part-title { font-size: var(--fs-1); margin: var(--s-7) 0 var(--s-3); }
.syllabus-map .coming { display: inline-block; margin-inline-start: var(--s-2); font: 600 var(--fs--2) var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); border: 1px dashed var(--rule-strong); border-radius: var(--r-pill); padding: 0 8px; vertical-align: middle; }
.row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: start; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.row .gem { grid-row: 1 / 3; }
.row-title { font-weight: 700; color: var(--ink); text-decoration: none; grid-column: 2; } a.row-title:hover { text-decoration: underline; }
.row[data-unreleased] .row-title { color: var(--ink-2); font-weight: 400; }
.row .num { color: var(--ink-2); font-weight: 400; margin-inline-end: var(--s-2); font-family: var(--font-mono); }
.row .state { grid-column: 3; grid-row: 1; color: var(--ink-2); text-align: end; }
.row .question { grid-column: 2 / -1; font-style: italic; color: var(--ink-2); font-size: var(--fs--1); }
.row .minutes { grid-column: 3; grid-row: 2; color: var(--ink-2); text-align: end; }
.share-row { list-style: none; }
.ember-tree ul { list-style: none; padding: 0; columns: 2 16rem; font-size: var(--fs--1); }
.ember-tree li { margin: 0 0 2px; break-inside: avoid; }
.ember-tree li code { background: none; padding: 1px 6px; border: 1px solid transparent; border-radius: var(--r-1); }
.ember-tree li[data-state="future"] code { color: var(--ink-2); font-style: italic; }
.ember-tree li[data-state="done"] code { color: var(--garnet); font-weight: 700; }
.ember-tree li[data-state="reference"] code { border: 1px dashed var(--garnet); color: var(--garnet); }
.progress-tools { margin-block: var(--s-7); }
.gem-grid, .gem-row, .part-gems { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gem-grid li, .gem-row li, .part-gems li { margin: 0; }
.record-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); font: var(--fs--1) var(--font-ui); }
.record-facts dt { color: var(--ink-2); } .record-facts dd { margin: 0; font-weight: 600; }
dl.glossary > div { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
dl.glossary dt { font: 700 var(--fs--1) var(--font-mono); } dl.glossary dd { margin: 0; color: var(--ink-2); }

/* the landing page, the syllabus and glossary introductions, the 404 page, and the closing "where this goes" of a lesson (handoff H4) */
.hero-line { font: 400 var(--fs-1) var(--font-display); color: var(--garnet); margin-block: var(--s-4) var(--s-3); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block: var(--s-5); }
.fine { font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.lede { font-size: var(--fs-1); line-height: 1.45; color: var(--ink-2); }
.syl-lede, .gloss-lede { color: var(--ink-2); font-size: var(--fs-0); }
.syl-how { font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.home-lesson-figure { margin: var(--s-6) 0; max-width: var(--measure); }
.home-lesson-figure figcaption { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin-block-start: var(--s-2); }
.mini { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-2); box-shadow: var(--shadow-pop); padding: var(--s-4) var(--s-5); }
.mini p { margin-block: 0 var(--s-3); }
.mini-label { font: 600 var(--fs--2) var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.mini-options { font: var(--fs--1) var(--font-mono); color: var(--garnet); }
.mini pre { margin: 0; background: var(--code-bg); color: var(--code-ink); }
.nf { max-width: var(--measure); padding-block: var(--s-7); }
.nf h1 { margin-block-end: var(--s-4); }
.nf-code { font: 600 var(--fs--1) var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--garnet); margin-block-end: var(--s-3); }
.nf-more { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: var(--fs--1) var(--font-ui); }
.nf-more li { margin: 0; }
.where-next { margin-block: var(--s-7) var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); }
.where-next h2 { margin-block-start: 0; font-size: var(--fs-1); }

/* == 11 print, motion, forced colours ================================================================= */
@media print {
  .site-header, .outline, .site-footer, .toolbar, .tabs, hx-nav, hx-end, .skip-link, .actions, .commit, .saved, .legend, .first-run, .theme-toggle { display: none !important; }
  body { font-size: 11pt; background: #fff; color: #000; } .page { display: block !important; padding: 0; }
  html.js :is(hx-ask, hx-predict) > [slot="reveal"], html.js [slot="why"] { display: block !important; }
  .editor textarea { display: none; } .editor > .backdrop { max-height: none !important; overflow: visible !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .gem .gem-outline { stroke: CanvasText; } .gem[data-state="cut"] .gem-outline { fill: Highlight; }
  .ln[data-region="own"] { border-inline-start-color: Highlight; } input:checked + .ring { background: Highlight; }
  .editor textarea { color: CanvasText; } .backdrop { visibility: hidden; }
}