/* Harness from First Principles: "The page is a transcript".
   plan/design-system.md is the specification. Order: 1 fonts, 2 tokens, 3 base, 4 chrome and
   layouts, 5 the spine and entries, 6 components, 7 diagrams, 8 pages, 9 print and modes.
   Naming: element + [slot] + [data-state]; classes only for plain-HTML conventions. */

/* == 1 fonts ================================================================================ */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/Newsreader-wght.62981321d9.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/Newsreader-Italic-wght.48bc8861b9.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-Regular.08949f728d.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-SemiBold.0d1f0b8d07.woff2) format("woff2"); }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 104%; }

/* == 2 tokens =============================================================================== */
:root {
  color-scheme: light dark;
  --paper: #FAF7F0; --surface: #FFFDF8; --sunken: #F2EDE1;
  --ink: #1D1B16; --ink-2: #4A463D; --ink-3: #696455;
  --rule: #DDD5C3; --rule-strong: #8A836F;
  --you: #1F5FBF; --model: #6A3FC0; --tool: #0B6B5C; --error: #B3261E; --event: #8A5A00; --log: #75512B;
  --you-bg: #E6EEFB; --model-bg: #EFE9FB; --tool-bg: #E1F2EE; --error-bg: #FBE9E7; --event-bg: #FAEFD6; --log-bg: #F1E8DB;
  --btn-bg: var(--you); --btn-bg-hover: #174C9C; --btn-fg: #FFFFFF; --focus: var(--you);
  --syn-string: #8A4B0F;
  --shadow-pop: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .10);

  --font-prose: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 1.0625rem; --fs--2: .75rem; --fs--1: .875rem; --fs-0: var(--fs-base);
  --fs-1: 1.375rem; --fs-2: 1.75rem; --fs-3: 1.875rem; --fs-4: 2.25rem; --fs-code: .84375rem;
  --lh-prose: 1.6; --lh-tight: 1.2; --lh-code: 1.55; --measure: 66ch;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px; --r-1: 2px; --r-2: 6px; --r-pill: 999px; --bar: 3px; --spine: 1.5px;
  --page-max: 1200px; --lab-max: 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.25rem; --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: #14130F; --surface: #1D1B16; --sunken: #0D0C09;
    --ink: #ECE7DA; --ink-2: #BDB7A6; --ink-3: #9A9484; --rule: #35322A; --rule-strong: #777160;
    --you: #82B1FF; --model: #B9A0FF; --tool: #5CCDB5; --error: #FF8C82; --event: #EDB458; --log: #CFAE84;
    --you-bg: #16243D; --model-bg: #241B3D; --tool-bg: #0F2B27; --error-bg: #3A1917; --event-bg: #33270F; --log-bg: #2B2216;
    --btn-bg-hover: #A6C8FF; --btn-fg: #0B1526; --syn-string: #E0A86A;
    --shadow-pop: 0 0 0 1px var(--rule-strong);
  }
}
:root[data-theme="dark"] {
  --paper: #14130F; --surface: #1D1B16; --sunken: #0D0C09;
  --ink: #ECE7DA; --ink-2: #BDB7A6; --ink-3: #9A9484; --rule: #35322A; --rule-strong: #777160;
  --you: #82B1FF; --model: #B9A0FF; --tool: #5CCDB5; --error: #FF8C82; --event: #EDB458; --log: #CFAE84;
  --you-bg: #16243D; --model-bg: #241B3D; --tool-bg: #0F2B27; --error-bg: #3A1917; --event-bg: #33270F; --log-bg: #2B2216;
  --btn-bg-hover: #A6C8FF; --btn-fg: #0B1526; --syn-string: #E0A86A;
  --shadow-pop: 0 0 0 1px var(--rule-strong);
}
: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-behavior: smooth; 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-prose);
  font-optical-sizing: auto; overflow-wrap: break-word; hanging-punctuation: first; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-tight); text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-3); letter-spacing: -.01em; }
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: 600; }
a { color: var(--you); text-decoration: underline 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, kbd, samp, pre { font-family: var(--font-mono); }
code { font-size: .86em; 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; background: var(--sunken); border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4); overflow-x: auto; white-space: pre; }
pre code, pre samp { font-size: inherit; background: none; padding: 0; }
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; display: block; overflow-x: auto; }
th { font: 600 var(--fs--2) var(--font-mono); color: var(--ink-3); text-align: start; letter-spacing: .04em; }
th, td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
textarea, input, button, select { font: inherit; color: inherit; }
.tok-k { font-weight: 600; } .tok-s { color: var(--syn-string); } .tok-c { color: var(--ink-3); font-style: italic; }
.tok-m { outline: 1px solid var(--rule-strong); 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; }

/* mono meta labels: literal lowercase strings, never uppercase eyebrows */
.label, .role, .kicker, .eyebrow, [slot="cite"], .saved, .meter, .outline-title, .part-title, .state, .minutes, .tag, .chip,
.course-path .num, .row .num, hx-nav .dir, hx-nav .num, .general, figcaption b, [slot="caption"] b {
  font-family: var(--font-mono); font-size: var(--fs--2); letter-spacing: .04em; }
.label, .role, .eyebrow, .outline-title, .part-title { font-weight: 600; text-transform: none; }
.general { color: var(--ink-3); }

/* R10 provenance: one quiet line naming the Tau test, code or dev-note a scripted failure
   comes from. Subordinate to the body text it follows, never competing with it. */
.provenance {
  font-size: var(--fs--1); color: var(--ink-3);
  border-inline-start: 2px solid var(--rule);
  padding-inline-start: var(--s-3); margin-block: var(--s-4); }
.provenance code, .provenance [slot="cite"] { font-size: inherit; }

/* buttons */
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: transparent; 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(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn.primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.quiet, .btn.quiet { border: 0; background: none; color: var(--you); font: 400 var(--fs--1) var(--font-ui); padding: 0 var(--s-1);
  min-height: var(--btn-h); text-decoration: none; text-underline-offset: .18em; }
.quiet:hover { text-decoration: underline; background: none; }
p > .quiet, .rated .quiet, [role="status"] .quiet { min-height: 0; font-size: inherit; }
[aria-disabled="true"] { opacity: .5; 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(--tool); background: var(--tool-bg); border-color: var(--tool); }
.chip[data-tone="fail"] { color: var(--error); background: var(--error-bg); border-color: var(--error); }
.chip[data-tone="busy"] { color: var(--you); border-color: var(--you); }
.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); }

/* == 4 chrome and layouts =================================================================== */
.site-header { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; 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: 600 var(--fs--1) var(--font-mono); text-transform: lowercase; text-decoration: none; letter-spacing: -.01em; }
.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; }   /* the global li + li gap would drop the second link 4px below the first */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu ul { position: absolute; right: 0; z-index: 20; min-width: 10rem; margin: 0; padding: var(--s-2) var(--s-4); list-style: none;
  background: var(--surface); border-radius: var(--r-2); box-shadow: var(--shadow-pop); }
.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-mono); color: var(--ink-2); min-height: 44px; padding: 0; white-space: nowrap; }
.theme-toggle:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 479px) { .site-header { gap: var(--s-3); } .wordmark span { max-width: 8.5rem; line-height: 1.15; } }
.theme-toggle::before { content: "theme: "; }
@media (max-width: 599px) { .theme-toggle::before { content: none; } }
@media (min-width: 600px) { .nav-links { display: flex; } .nav-menu { display: none; } }

.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: 200px 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-3); margin-block-end: var(--s-3); }
.outline ol { list-style: none; margin: 0; padding: 0 0 0 5px; border-inline-start: var(--spine) solid color-mix(in srgb, var(--ink) 35%, transparent); }
.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, .row::before, .course-path li li::before, .spine [data-node]::after {
  content: ""; position: absolute; width: var(--node); height: var(--node); border-radius: var(--r-pill);
  background: var(--paper); border: 1.5px solid var(--rule-strong); transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.outline a::before { --node: 10px; left: -11.5px; top: .72em; }
.outline a[data-state="active"] { color: var(--ink); }
[data-state="active"]::before, [data-node="active"]::after { border-color: var(--you); }
.outline a[data-state="done"]::before, .row[data-state^="done"]::before, .row[data-state="mastered"]::before, [data-node="done"]::after,
.course-path li[data-state^="done"]::before { background: var(--ink); border-color: var(--ink); }

.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(3, minmax(0, 1fr)); } .site-footer > p { grid-column: 1 / -1; } }
.site-footer h2 { font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin: 0 0 var(--s-2); text-transform: lowercase; }
.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); }
.site-footer .quiet { min-height: 0; font-size: inherit; padding-inline: var(--s-2); }

/* == 5 the spine and its entries ============================================================ */
.lesson-head { margin-block-end: var(--s-7); max-width: var(--measure); }
.kicker { color: var(--ink-3); margin-block-end: var(--s-3); }
.lesson-head .problem { font-style: italic; font-size: var(--fs-1); line-height: 1.35; color: var(--ink-2); margin-block: var(--s-3) var(--s-4); }
.lesson-head .meta, .out-of-order { font: var(--fs--1) var(--font-ui); color: var(--ink-3); margin: 0; }

.spine { position: relative; padding-inline-start: var(--inset); margin-inline-start: -4px; }
.spine::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--spine); background: var(--ink); opacity: .35; }
.spine > *, .spine > section > *, hx-recall > * { max-width: var(--measure); }
.spine > section { max-width: none; }
.spine > hx-lab, .spine > hx-cell, .spine > hx-fig[wide], .spine > section > hx-fig[wide], .spine > section > hx-lab { max-width: var(--lab-max); }
.spine > section:first-child > h2:first-child, .spine > h2:first-child { margin-block-start: 0; }
@media (min-width: 600px) { .spine { margin-inline-start: 0; } }

hx-ask, hx-predict, hx-lab, hx-cell, hx-tau, hx-aha, hx-recall, hx-fig, hx-nav, hx-support, hx-option, hx-term { display: block; }
hx-term { display: inline; }
hx-ask, hx-predict, hx-lab, hx-cell, hx-tau, hx-aha[kind="recap"], .entry {
  --role: var(--you); 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(--role); border-radius: var(--r-2); scroll-margin-top: var(--s-5); }
hx-lab, hx-cell, hx-aha[kind="recap"], .entry[data-role="lab"] { --role: var(--ink); }
hx-tau, .entry[data-role="tau"] { --role: var(--log); }
/* the node on the spine, and the tick that ties the entry to it (the "o--" of the log) */
.spine [data-node]::after { inset-inline-start: calc(-1 * var(--inset) - var(--bar) - var(--node) / 2 + .75px); top: calc(var(--pad) + 12px - var(--node) / 2); }
.spine [data-node]::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--inset) - var(--bar)); top: calc(var(--pad) + 11.25px);
  width: var(--inset); height: var(--spine); background: var(--ink); opacity: .35; }
.spine hx-tau hx-predict::before, .spine hx-tau hx-predict::after { display: none; }
.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 { color: var(--ink-3); }
.entry-head .label b { color: var(--role); }
.entry-head h3 { font: inherit; margin: 0; display: inline; }
/* without JS the label still names the role */
html:not(.js) :is(hx-ask, hx-predict) > [slot="stem"]::before, html:not(.js) hx-cell > [slot="brief"]::before,
html:not(.js) hx-tau > [slot="claim"]::before, html:not(.js) hx-aha::before, html:not(.js) hx-lab::before {
  display: block; margin-block-end: var(--s-2); font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--role, var(--ink-3)); }
html:not(.js) hx-ask > [slot="stem"]::before { content: "you · question"; }
html:not(.js) hx-predict > [slot="stem"]::before { content: "you · predict"; }
html:not(.js) hx-lab::before { content: "lab · " attr(title); }
html:not(.js) hx-cell > [slot="brief"]::before { content: "try it"; }
html:not(.js) hx-tau > [slot="claim"]::before { content: "tau · how Tau does it"; }
html:not(.js) hx-aha[kind="aha"]::before { content: "principle"; }
html:not(.js) hx-aha[kind="recap"]::before { content: "recap"; }

/* == 6 components =========================================================================== */
/* 6.1 questions: hx-ask and hx-predict share one skeleton */
[slot="stem"] { font-size: var(--fs-1); line-height: 1.35; margin-block-end: var(--s-4); }
hx-tau [slot="stem"], 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, .strip { background: var(--event-bg); border-inline-start: var(--bar) solid var(--event); 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; }
[slot="nudge"]::before { content: "nudge"; display: block; font: 600 var(--fs--2) var(--font-mono); color: var(--event); letter-spacing: .04em; }
.privacy-note { font: var(--fs--1) var(--font-ui); color: var(--ink-3); margin: var(--s-3) 0 0; }

hx-option { position: relative; margin-block: var(--s-2); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--paper);
  transition: border-color var(--t-fast); }
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: .3em; border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface); transition: box-shadow var(--t-fast), border-color var(--t-fast); }
[type="checkbox"] + .ring { border-radius: var(--r-1); }
input:checked + .ring { border-color: var(--you); background: var(--you); box-shadow: inset 0 0 0 3px var(--surface); }
input:focus-visible + .ring { outline: 2px solid var(--focus); outline-offset: 2px; }
hx-option:has(input:checked), .items > li:has(input:checked) { border-color: var(--you); box-shadow: 0 0 0 1px var(--you); }
hx-option:has(input:disabled) > label, .items > li:has(input:disabled) > label { cursor: default; }
.opt-text { flex: 1; min-width: 0; }
.opt-text > :last-child { margin-block-end: 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; }
.tag[data-tag="yours"] { color: var(--event); background: var(--event-bg); }
.tag[data-tag="actual"] { color: var(--tool); background: var(--tool-bg); }
[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) [slot="why"]::before { content: "why: "; font-family: var(--font-mono); font-size: var(--fs--2); color: var(--ink-3); }
html:not(.js) hx-option[correct]::after { content: "what happens"; font: var(--fs--2) var(--font-mono); color: var(--tool); }
/* defer-reveal: this copy of the prediction shows its explanation but never gives the answer away
   (engine.js withholds the result line and the tag; this is the same for a reader without JS). */
html:not(.js) hx-predict[defer-reveal] hx-option[correct]::after { content: none; }

.items { list-style: none; padding: 0; margin: 0 0 var(--s-4); counter-reset: item; }
.items > li { position: relative; margin-block: var(--s-2); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--paper); }
.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-3); width: 1.2em; }
.items[data-form="order"] .opt-text { font-size: var(--fs--1); }
.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); }
.move:hover { background: var(--sunken); }

.slips, .transcript { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 4px; }
.slip { --role: var(--ink); margin: 0; background: var(--surface); border: 1px solid var(--rule); border-inline-start: var(--bar) solid var(--role);
  border-radius: var(--r-1); padding: var(--s-2) var(--s-3); font: var(--fs--1)/1.5 var(--font-mono); min-width: 0; }
.slip .body { display: block; white-space: pre-wrap; }
.slips .slip, hx-ask .slip.you, hx-predict .slip.you { font: var(--fs-0)/1.5 var(--font-prose); background: var(--you-bg); border-color: transparent; border-inline-start-color: var(--you); }
.slip .role { display: block; color: var(--role); font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; }
.slip[data-role="user"], .slip.you { --role: var(--you); }
.slip[data-role="assistant"] { --role: var(--model); }
.slip[data-role="tool"], .slip[data-role="toolResult"] { --role: var(--tool); }
.slip[data-error] { --role: var(--error); }
.slip[data-mark]::after { content: attr(data-mark); float: inline-end; font-size: var(--fs--2); color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding: 0 4px; }
.slip[data-mark="expected, missing"] { border-style: dashed; border-inline-start-style: solid; opacity: .85; }
.slip[data-clamped] .body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.slip .more { min-height: 24px; font-size: var(--fs--2); }
.call { display: inline-block; border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding: 0 6px; margin-block: 2px; }
.call i { color: var(--ink-3); }
.call[data-orphan] { border: 1px dashed var(--error); }
.call[data-orphan]::after { content: " no result"; color: var(--error); }
[data-pair] { outline: 2px solid var(--tool); outline-offset: 1px; }
.transcript.numbered { counter-reset: slip -1; padding-inline-start: 2.2em; }
.transcript.numbered > .slip { counter-increment: slip; position: relative; }
.transcript.numbered > .slip::before { content: counter(slip); position: absolute; inset-inline-start: calc(-2.2em - var(--bar)); width: 1.6em; text-align: end;
  color: var(--ink-3); font-size: var(--fs--2); top: var(--s-2); }

[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 > [slot="test-list"] { display: none; }
[slot="reveal"]::before, [slot="recorded"]::before { display: block; margin-block-end: var(--s-3); font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); content: "the answer"; }
html:not(.js) [slot="reveal"]::before { content: "Think first, then read on"; }
[slot="recorded"]::before { content: "recorded output"; }
html.js hx-predict[mode="run"] > [slot="reveal"]::before { content: "what happened"; }
[slot="reveal"] .out-label:first-child { margin-block-start: 0; }
[data-animate] > [slot="reveal"], [data-animate].hints > li:last-child, .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 { margin-block-start: var(--s-5); font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.rate .actions { margin-block-start: var(--s-2); }
.rated { font: var(--fs--1) var(--font-ui); color: var(--ink-2); margin: var(--s-4) 0 0; }

/* 6.2 program output (run-mode predictions, cells, the lab's Output tab) */
.output { margin: 0; background: var(--sunken); 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: 28em; overflow: auto; }
/* A cell or a prediction sits in the page flow, which already scrolls. Clipping its output at 28em
   cut the last line of lesson 1's 18-line run in half and asked for a scroll inside the box; the
   bound here is well above the longest recorded output in the course (43 lines), so only a runaway
   loop is ever clipped. A lab's Output tab keeps its own bound: .panel, below. */
hx-cell .output, hx-predict .output { max-height: 72em; }
.output .err { display: block; border-inline-start: var(--bar) solid var(--error); padding-inline-start: var(--s-3); color: var(--error); }
.output .stage, .output .muted { color: var(--ink-3); }
.out-label { font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin: var(--s-4) 0 var(--s-2); }
.dots i { animation: dot 1.2s infinite; font-style: normal; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

/* 6.3 hx-lab and hx-cell */
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); }
.loadbar { position: absolute; inset: -1px 0 auto 0; height: 2px; background: transparent; overflow: hidden; border-radius: var(--r-2) var(--r-2) 0 0; }
.loadbar i { display: block; height: 100%; width: 0; background: var(--you); transition: width var(--t-base) linear; }
.hints { margin-block: 0 var(--s-4); padding-inline-start: calc(var(--s-4) + 1.4em); list-style: decimal; }
.hints::before { content: "hints"; display: block; margin-inline-start: -1.4em; font: 600 var(--fs--2) var(--font-mono); color: var(--event); letter-spacing: .04em; }
html.js hx-lab > [slot="hints"] { display: none; }
html:not(.js) [slot="hints"]::before { content: "Hints, in order. Try between each."; display: block; font: var(--fs--2) var(--font-mono); color: var(--event); margin-inline-start: -1.4em; }
[slot="diff"] { margin-block-end: var(--s-4); font: var(--fs--1) var(--font-ui); }
[slot="diff"] summary, details summary { cursor: pointer; color: var(--you); min-height: 32px; }
[slot="diff"] summary { list-style: none; }
.diff { margin-block-start: var(--s-2); max-height: 24em; overflow: auto; }
.diff > * { display: block; text-decoration: none; min-width: 100%; width: max-content; }
.diff ins { background: var(--tool-bg); } .diff del { background: var(--error-bg); } .diff .hunk { color: var(--ink-3); }

.panes { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule-strong); border-radius: var(--r-2); overflow: hidden; background: var(--sunken); }
.tabs { display: flex; gap: 0; 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; font-variant-numeric: tabular-nums; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tabs button:focus-visible { outline-offset: -3px; }
.pane-code { min-width: 0; display: flex; flex-direction: column; }
.pane-head { display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-4) var(--s-1); min-height: 44px; background: var(--surface); border-bottom: 1px solid var(--rule-strong);
  font: var(--fs--2) var(--font-mono); color: var(--ink-2); }
.pane-head .file { margin-inline-end: auto; font-weight: 600; color: var(--ink); }
.pane-head button { border: 0; background: none; min-width: 44px; min-height: 44px; color: var(--ink-2); font: var(--fs--1) var(--font-mono); }
.pane-head button:hover { color: var(--ink); }
.panels { min-width: 0; }
.panel { padding: var(--s-4); min-height: 14em; max-height: 44em; overflow: auto; }
.panel:focus-visible { outline-offset: -2px; }
.panel > .output { padding: 0; max-height: none; background: none; }
@container lab (max-width: 719px) { .panes[data-view="code"] .panels, .panes:not([data-view="code"]) .pane-code { display: none; } }
@container lab (min-width: 720px) {
  .panes { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .panes .pane-code { display: flex; grid-row: 1 / 3; grid-column: 1; border-inline-end: 1px solid var(--rule-strong); }
  .panes .tabs { grid-column: 2; } .panes .panels { display: block; grid-column: 2; }
  .tabs button[data-tab="code"] { display: none; }
  .panes .panels > .panel { max-height: 43.4em; }
}
/* the editor: a transparent textarea over a highlighted copy of its own text */
.editor { position: relative; flex: 1; display: grid; font: var(--fs-code)/var(--lh-code) var(--font-mono); --gut: 3.4em; background: var(--sunken); }
.editor > * { grid-area: 1 / 1; margin: 0; border: 0; border-radius: 0; font: inherit; 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(28 * var(--lh-code) * 1em + 2 * var(--s-3)); }
.editor textarea { padding-inline: var(--gut) var(--s-4); background: transparent; color: transparent; caret-color: var(--ink); resize: none; outline-offset: -2px; width: 100%;
  overscroll-behavior-x: contain; }
.editor textarea::selection { background: color-mix(in srgb, var(--you) 30%, transparent); color: transparent; }
.backdrop { pointer-events: none; overflow: hidden; counter-reset: ln; scrollbar-width: none; }
.ln { display: block; counter-increment: ln; min-width: max-content; padding-inline-end: var(--s-4); opacity: .8; border-inline-start: var(--bar) solid transparent; }
.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(--ink-3); background: var(--sunken); font-size: var(--fs--2); user-select: none; }
.ln[data-gap] { background: var(--you-bg); border-inline-start-color: var(--you); opacity: 1; }
.ln[data-gap]::before { background: var(--you-bg); }
.editor:focus-within .ln, .editor[data-edited] .ln { opacity: 1; }
pre.code .ln, [slot] > code .ln { opacity: 1; border: 0; } 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 > li:last-child { border-bottom: 0; }
.tests .glyph { position: absolute; inset-inline-start: 0; top: var(--s-2); width: 1.3em; text-align: center; font: 600 var(--fs--1) var(--font-mono); color: var(--ink-3); }
.tests [data-result="pass"] .glyph { color: var(--tool); } .tests [data-result="fail"] .glyph { color: var(--error); }
.tests [data-result="todo"] { color: var(--ink-2); }
.tests button.sentence { border: 0; background: none; padding: 0; text-align: start; font: inherit; color: inherit; min-height: 28px; }
.tests button.sentence:hover { text-decoration: underline; }
.tests .detail { margin-block: var(--s-2) var(--s-1); padding: var(--s-3); background: var(--error-bg); border-inline-start: var(--bar) solid var(--error); border-radius: var(--r-1); }
.tests .detail p { margin: 0 0 var(--s-2); white-space: pre-wrap; }
.tests .detail > :last-child { margin-block-end: 0; }
.tests .detail .out-label { margin-block-start: var(--s-3); }
.tests .detail .output { background: var(--surface); min-height: 0; padding: var(--s-2) var(--s-3); }
.meter { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); color: var(--ink-2); }
.meter .light::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: var(--r-pill); background: var(--tool); }
.meter .light[data-valid="false"] { color: var(--error); } .meter .light[data-valid="false"]::before { background: var(--error); border-radius: 0; }
.empty { font: var(--fs--1) var(--font-ui); color: var(--ink-3); margin: 0; }

[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(--tool-bg); border-inline-start: var(--bar) solid var(--tool); }
html.js hx-lab:not([data-state="passed"]) > [slot="passed"] { display: none; }
html:not(.js) [slot="passed"]::before { content: "when it passes: "; font: var(--fs--2) var(--font-mono); color: var(--tool); }
.banner { background: var(--error-bg); border-inline-start: var(--bar) solid var(--error); }
.banner[data-tone="info"] { background: var(--event-bg); border-inline-start-color: var(--event); }
.banner .actions { margin-block-start: var(--s-2); }
.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-3); margin: var(--s-3) 0 0; }
.legend, .first-run { font: var(--fs--2) var(--font-ui); }
@container lab (max-width: 719px) {
  .toolbar { position: sticky; bottom: 0; z-index: 5; background: var(--surface); margin-inline: calc(-1 * var(--pad)); padding: var(--s-2) var(--pad);
    border-top: 1px solid var(--rule-strong); }
  .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); }
  .toolbar .more[data-open] .quiet-group { display: flex; }
  .toolbar .quiet { justify-content: flex-start; text-align: start; }
}
@container lab (min-width: 720px) {
  .toolbar .more { display: contents; } .toolbar .more-btn { display: none; }
  .toolbar .quiet-group { display: contents; }
}
hx-lab[data-focus] { position: fixed; inset: 0; z-index: 50; margin: 0; max-width: none; border-radius: 0; overflow: auto; border-width: 0 0 0 var(--bar); }
.spine hx-lab[data-focus]::before, .spine hx-lab[data-focus]::after { display: none; }
hx-lab[data-focus] .editor > * { max-height: calc(100vh - 17rem); }
hx-cell .editor > * { min-height: calc(3 * var(--lh-code) * 1em + 2 * var(--s-3)); }
hx-cell .output { margin-block-start: var(--s-3); }

/* full-bleed under 600px: labs, code and figures leave the spine and span the viewport */
@media (max-width: 599px) {
  .spine > :is(hx-lab, hx-cell, hx-fig, pre), .spine > section > :is(hx-lab, hx-cell, hx-fig, pre), .spine > details > hx-cell {
    margin-inline: calc(4px - var(--inset) - var(--gutter)) calc(-1 * var(--gutter)); max-width: none; border-radius: 0; border-inline-end: 0; }
  .spine > :is(hx-lab, hx-cell), .spine > section > :is(hx-lab, hx-cell), .spine > details > hx-cell { border-inline-start-width: var(--bar); }
  .spine :is(hx-lab, hx-cell)[data-node]::before, .spine :is(hx-lab, hx-cell)[data-node]::after { display: none; }
  .panes { margin-inline: calc(-1 * var(--pad)); border-inline: 0; border-radius: 0; }
  .spine > pre, .spine > section > pre, hx-fig { padding-inline: var(--gutter); }
}

/* 6.4 hx-tau */
hx-tau { container: tau / inline-size; }
hx-tau > [slot="claim"] { font-size: var(--fs-1); line-height: 1.35; margin-block-end: var(--s-4); }
.tau-panes { display: grid; gap: var(--s-3); margin-block-end: var(--s-4); }
@container tau (min-width: 760px) { .tau-panes[data-two] { grid-template-columns: 1fr 1fr; } }
hx-tau pre { margin: 0; border: 1px solid var(--rule); }
hx-tau pre::before { display: block; margin-block-end: var(--s-2); font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); }
hx-tau pre[slot="yours"]::before { content: "yours"; color: var(--you); }
hx-tau pre[slot="excerpt"]::before, hx-tau pre[slot="tau"]::before { content: "tau · " attr(data-where); color: var(--log); }
hx-tau pre[slot="yours"] { margin-block-end: var(--s-3); } .tau-panes pre[slot="yours"] { margin: 0; }
[data-match] { text-decoration: underline dotted var(--rule-strong); text-underline-offset: .25em; }
[slot="gap"]::before, [slot="differences"]::before { content: "the honest gap"; display: block; font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin-block: var(--s-4) var(--s-2); }
[slot="gap"] { font-size: var(--fs--1); }
[slot="cite"] { color: var(--ink-3); margin: var(--s-4) 0 0; padding-block-start: var(--s-3); border-top: 1px solid var(--rule); letter-spacing: 0; }
[slot="cite"] code, a.cite code { background: none; padding: 0; font-size: inherit; }
a.cite { font-size: var(--fs--1); }
hx-tau hx-predict { background: var(--paper); margin-block: var(--s-4) 0; padding: var(--s-4); }

/* 6.5 hx-aha */
hx-aha[kind="aha"] { position: relative; margin-block: var(--s-7); padding: var(--s-4) 0; border-block: var(--spine) solid var(--ink); --pad: var(--s-4); --bar: 0px; }
hx-aha[kind="aha"] > p, hx-aha[kind="aha"] .ours { font-style: italic; font-size: var(--fs-1); line-height: 1.35; margin: 0; }
hx-aha .label { display: block; color: var(--ink-3); margin-block-end: var(--s-2); }
hx-aha .own { margin-block-end: var(--s-4); }
hx-aha .own textarea { display: block; width: 100%; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: var(--s-3); font-size: var(--fs-0); line-height: 1.5; }
html.js hx-aha[kind="aha"][data-state="idle"] > p { display: none; }
hx-aha dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0; font-size: var(--fs--1); }
hx-aha dt { font: var(--fs--2)/1.9 var(--font-mono); color: var(--ink-3); margin-block-start: var(--s-2); }
hx-aha dd { margin: 0; }
@media (min-width: 600px) { hx-aha dl { grid-template-columns: 9rem minmax(0, 1fr); } hx-aha dt { margin: 0; } hx-aha dd { padding-block-end: var(--s-2); } }
.parts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; padding: 0; margin: 0; }
.parts li { margin: 0; font: var(--fs--2) var(--font-mono); border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding: 1px 6px; }
.parts li[data-new] { background: var(--you-bg); border-color: var(--you); } .parts li[data-new]::before { content: "+ "; color: var(--you); }

/* 6.6 hx-term and its popover */
hx-term, hx-term a { color: inherit; text-decoration: underline dotted var(--ink-3); text-underline-offset: .2em; cursor: help; }
.term-pop { position: absolute; z-index: 40; max-width: 320px; background: var(--surface); border-radius: var(--r-2); box-shadow: var(--shadow-pop); padding: var(--s-3) var(--s-4);
  font-size: var(--fs--1); line-height: 1.45; }
.term-pop b { display: block; font: 600 var(--fs--1) var(--font-mono); margin-block-end: var(--s-1); }
.term-pop p { margin: 0 0 var(--s-2); }
.term-pop .close { display: none; }
@media (hover: none) { .term-pop[role="dialog"] { position: fixed; inset: auto 0 0 0 !important; max-width: none; border-radius: var(--r-2) var(--r-2) 0 0; padding: var(--s-5) var(--gutter); box-shadow: 0 -1px 0 var(--rule-strong), var(--shadow-pop); }
  .term-pop[role="dialog"] .close { display: inline-flex; float: inline-end; } }

/* 6.7 hx-nav */
hx-nav { position: relative; display: grid; gap: var(--s-3); margin-block: var(--s-8) 0; padding-block-end: 2px; }
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; }
hx-nav a:hover { background: var(--sunken); }
hx-nav a[rel="next"] { order: -1; } hx-nav a[rel="prev"] { border-color: transparent; padding-inline: 0; color: var(--ink-2); }
hx-nav .dir { display: block; color: var(--ink-3); } hx-nav .num { color: var(--ink-3); }
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(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
hx-nav[data-state="done"] a[rel="next"] :is(.dir, .num, .question) { color: inherit; }
hx-nav[data-state="done"] a[rel="next"]:hover { background: var(--btn-bg-hover); }
hx-nav { --pad: 0px; --bar: 0px; }
.spine hx-aha[kind="aha"][data-node]::before { width: calc(var(--inset) - 10px); }
.spine hx-nav[data-node]::after { top: calc(var(--s-3) + 6px); } .spine hx-nav[data-node]::before { display: none; }
@media (min-width: 600px) { hx-nav { grid-template-columns: 1fr 1fr; } hx-nav a[rel="next"] { order: 0; grid-column: 2; text-align: end; } hx-nav a[rel="prev"] { border-color: var(--rule-strong); padding-inline: var(--s-4); grid-column: 1; grid-row: 1; } }
.spine:has(> hx-nav:last-child) { padding-block-end: 0; }

/* 6.8 hx-fig */
hx-fig { margin-block: var(--s-6); }
hx-fig > svg { display: block; width: 100%; font-family: var(--font-mono); }
hx-fig[data-scroll] { overflow-x: auto; }
[slot="caption"] { font-size: var(--fs--1); color: var(--ink-2); margin: var(--s-3) 0 0; }
[slot="caption"] b { font-weight: 600; color: var(--ink-3); }
.steps { display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-3); font: var(--fs--1) var(--font-ui); flex-wrap: wrap; }
.steps .btn { width: 44px; height: var(--btn-h); padding: 0; }
.steps .count { font: var(--fs--2) var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.steps .text { flex: 1 1 16rem; margin: 0; color: var(--ink-2); }
.steps .quiet { white-space: nowrap; }
html.js hx-fig[steps] > [slot="step-text"], html.js hx-fig[data-stepped] > [slot="step-text"] { display: none; }
[slot="step-text"] { font-size: var(--fs--1); color: var(--ink-2); }

/* 6.9 hx-support: not part of the log */
hx-support { max-width: var(--measure); margin-block: var(--s-8) 0; padding-block-start: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs--1); color: var(--ink-2); }
hx-support[kind="sponsor"] { min-height: 120px; }
hx-support .label { color: var(--ink-3); margin-block-end: var(--s-2); }
hx-support p { margin-block-end: var(--s-2); }
hx-support .creative { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); }
hx-support img { max-width: 120px; max-height: 40px; }
hx-support form { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* a network unit (EthicalAds, Carbon): the vendor writes the markup; keep its image at the vendor's size, inside our frame */
hx-support .unit:not([hidden]) { border: 1px solid var(--rule-strong); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); overflow: hidden; }
hx-support .unit img { max-width: 130px; max-height: 100px; float: left; margin-inline-end: var(--s-4); }
hx-support .unit a { color: inherit; }
hx-support .unit .carbon-poweredby, hx-support .unit .ea-callout { display: block; clear: both; padding-block-start: var(--s-2); color: var(--ink-3); font-size: var(--fs--2, 0.75rem); }
hx-support 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); font: var(--fs--1) var(--font-ui); }
.lesson > hx-support { margin-inline-start: var(--inset); }

/* 6.10 recall, warm-up, pause, capability list, notes */
hx-recall { margin-block: 0 var(--s-7); }
hx-recall::before { content: "recall"; display: block; font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin-block-end: var(--s-3); }
hx-recall > [slot="cold"] { font-size: var(--fs--1); color: var(--ink-2); margin: 0; }
html.js hx-recall[data-state="cold"] > :not([slot="cold"]), html.js hx-recall[data-state="warm"] > [slot="cold"] { display: none; }
hx-recall[data-state="cold"] .show-recall { display: inline; }
details.warmup, details.deeper { margin-block: var(--s-5); border-block: 1px solid var(--rule); padding-block: var(--s-2); }
details.warmup > summary, details.deeper > summary { font: var(--fs--1) var(--font-ui); min-height: 44px; display: flex; align-items: center; gap: var(--s-2); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.warmup > summary::before, details.deeper > summary::before, [slot="diff"] summary::before { content: "+"; font-family: var(--font-mono); width: 1em; display: inline-block; }
details[open] > summary::before { content: "−"; }
details.deeper { font-size: var(--fs--1); color: var(--ink-2); }
details.deeper + details.deeper { margin-top: calc(-1 * var(--s-5)); border-top: 0; }   /* a run of them shares its rules */
.pause { position: relative; margin-block: var(--s-7); text-align: center; font: italic var(--fs--1) var(--font-prose); color: var(--ink-3); display: flex; align-items: center; gap: var(--s-4); }
.pause::before, .pause::after { content: ""; flex: 1; border-top: 1px dashed var(--rule-strong); }
.note { margin-block: var(--s-5); padding: var(--s-1) 0 var(--s-1) var(--s-4); border-inline-start: var(--bar) solid var(--ink-3); font-size: var(--fs--1); color: var(--ink-2); }
.note::before { content: "honest note"; display: block; font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); }
.note > :last-child { margin-block-end: 0; }
.can-do { list-style: none; padding: 0; font-size: var(--fs--1); }
.can-do::before { content: "what your harness can do now"; display: block; font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin-block-end: var(--s-2); }
.can-do-label { font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin-block-end: var(--s-2); }
.can-do--labelled::before { content: none; }   /* the page wrote its own qualified label */
.can-do li { position: relative; padding-inline-start: 1.6em; color: var(--ink-2); }
.can-do li::before { content: ""; position: absolute; inset-inline-start: .25em; top: .38em; width: .38em; height: .7em; border: solid var(--tool); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.can-do li:last-child { color: var(--ink); } .can-do li:last-child::after { content: " new"; font: var(--fs--2) var(--font-mono); color: var(--you); }

/* == 7 diagram helpers ====================================================================== */
svg text { font-family: var(--font-mono); }
.d-ink { stroke: var(--ink); } .d-you { stroke: var(--you); } .d-model { stroke: var(--model); } .d-tool { stroke: var(--tool); }
.d-error { stroke: var(--error); } .d-event { stroke: var(--event); } .d-log { stroke: var(--log); } .d-guide { stroke: var(--rule-strong); stroke-width: 1; }
.d-slip { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; } .d-emph { stroke-width: 2.5; } .d-dash { stroke-dasharray: 4 4; }
.d-tether { stroke: var(--tool); stroke-width: 1; stroke-dasharray: 1 3; } .d-dim { opacity: .4; }
.d-text { fill: var(--ink); font-size: 13px; stroke: none; } .d-label { fill: var(--ink-2); font-size: 12px; stroke: none; } .d-strong { font-weight: 600; }
svg [data-from] { transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
svg [data-off] { opacity: 0; transform: translateY(8px); visibility: hidden; }
svg [data-now] .d-edge, svg .d-edge[data-now] { stroke-width: 2.5; }

/* == 8 pages ================================================================================ */
.kind-page main > :where(h1, h2, h3, p, ul, ol, dl, details, aside, table, pre, hx-support, form) { max-width: var(--measure); }
.kind-page main > h1 { margin-block-end: var(--s-5); }
.kind-page main > :is(.syllabus-map, .course-path, .tiers) { max-width: 62rem; }
/* one column until 960px, and minmax(0,1fr) with min-width:0 inside it: a grid item's automatic
   minimum size is its content, so without these a <pre> in the hero makes the whole page scroll. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; padding-block: var(--s-5) var(--s-7); }
.hero > * { min-width: 0; }
.hero h1 { font-size: var(--fs-4); letter-spacing: -.02em; line-height: 1.08; margin-block-end: var(--s-5); }
.hero .lede { font-size: var(--fs-1); line-height: 1.4; color: var(--ink-2); max-width: 30ch; }
.hero hx-predict { margin: 0; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); padding-block: var(--s-8); } }
.band { border-top: 1px solid var(--rule); padding-block: var(--s-7); }
.band > h2 { font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); margin: 0 0 var(--s-5); }
.band > h2 + p { font-size: var(--fs-1); line-height: 1.35; max-width: var(--measure); }
.cols-2, .how { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (min-width: 960px) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.how h3 { font: 600 var(--fs--1) var(--font-mono); margin: 0 0 var(--s-3); }
.how h3 .num, .how h3 b { color: var(--ink-3); font-weight: 400; margin-inline-end: var(--s-2); }
.how > div > p { font-size: var(--fs--1); color: var(--ink-2); }
.mini { pointer-events: none; font-size: var(--fs--1); margin-block-end: var(--s-4); --pad: var(--s-4); }
.mini .entry { margin: 0; } .mini .entry > * { margin-block: 0 var(--s-2); } .mini .entry > :last-child { margin: 0; }
.mini .label { color: var(--role); display: flex; justify-content: space-between; align-items: center; }

/* the path: the spine drawn horizontally (>= 960px), or as a vertical list */
.course-path, .course-path ol, .syllabus-map, .syllabus-map ol { list-style: none; margin: 0; padding: 0; }
.course-path .part-title, .syllabus-map .part-title { display: block; color: var(--ink-3); text-transform: lowercase; margin: var(--s-5) 0 var(--s-2); }
.course-path li li { position: relative; margin: 0; padding: 6px 0 6px var(--s-6); font-size: var(--fs--1); }
.course-path li li::before { left: 0; top: .8em; --node: 10px; }
.course-path li li::after { content: ""; position: absolute; left: 4.25px; top: 0; bottom: 0; width: var(--spine); background: var(--ink); opacity: .35; z-index: -1; }
.course-path a { color: var(--ink); text-decoration: none; } .course-path a:hover { text-decoration: underline; }
.course-path .num { color: var(--ink-3); margin-inline-end: var(--s-2); }
.course-path li, .syllabus-map li { margin: 0; }
.course-path li[data-page="l16"]::before { border-radius: 1px; }
@media (min-width: 960px) {
  .course-path { display: flex; gap: 0; }
  .course-path > .part { flex: var(--n, 3) 1 0; min-width: 0; }
  .course-path > .part > ol { display: flex; }
  .course-path .part-title { margin: 0 var(--s-3) var(--s-4) 0; height: 4.2em; display: flex; align-items: flex-end; line-height: 1.4; }
  .course-path li li { flex: 1; padding: var(--s-5) 0 0; }
  .course-path li li::before { top: 0; } .course-path li li::after { top: 4.25px; bottom: auto; left: 0; right: 0; width: auto; height: var(--spine); }
  .course-path li li a { display: block; padding-inline-end: var(--s-2); } .course-path li li a .num { display: block; }
  .course-path li li a { font-size: var(--fs--2); font-family: var(--font-ui); line-height: 1.3; color: var(--ink-2); }
}

.map-summary { font: var(--fs--1) var(--font-ui); color: var(--ink-2); }
.continue { margin-block-end: var(--s-6); }
.syllabus-map > .part { display: grid; grid-template-columns: minmax(0, 1fr); }
.syllabus-map .part-title { font-size: var(--fs--2); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); padding: var(--s-3) 0 var(--s-4) var(--s-6); }
.row::before { left: calc(-1 * var(--node) / 2 + 6px); top: calc(var(--s-3) + .5em); z-index: 1; }
.row::after { content: ""; position: absolute; left: 5.25px; top: 0; bottom: 0; width: var(--spine); background: var(--ink); opacity: .35; }
.row[data-kind="checkpoint"]::before, .row[data-page="l16"]::before { border-radius: 1px; }
.row[data-state="progress"]::before { background: linear-gradient(to top, var(--ink) 50%, var(--paper) 50%); border-color: var(--ink); }
.row-title { font-weight: 600; font-size: var(--fs-0); color: var(--ink); text-decoration: none; grid-column: 1; } .row-title:hover { text-decoration: underline; }
.row .num { color: var(--ink-3); font-weight: 400; margin-inline-end: var(--s-2); }
.row .state { grid-column: 2; grid-row: 1; color: var(--ink-2); align-self: start; padding-block-start: .45em; text-align: end; }
.row .question { grid-column: 1 / -1; grid-row: 2; font-style: italic; color: var(--ink-2); font-size: var(--fs--1); }
.row .yields { grid-column: 1; grid-row: 3; } .row .minutes { grid-column: 2; grid-row: 3; text-align: end; }
.row:not(:has(.question)) .minutes { grid-row: 2; }
.row :is(.yields, .harness, .minutes) { font: var(--fs--2) var(--font-mono); color: var(--ink-3); letter-spacing: 0; }
.row .harness { display: none; } .row .harness code { background: none; padding: 0; color: var(--ink-2); }
.row[data-kind="side-quest"] .row-title, .row[data-kind="checkpoint"] .row-title { font-weight: 400; }
@media (min-width: 960px) { .syllabus-map > .part { grid-template-columns: 11rem minmax(0, 1fr); } .syllabus-map .part-title { margin-block-start: var(--s-3); }
  .row { grid-template-columns: minmax(0, 1fr) 15rem 8rem; } .row .harness { display: block; grid-column: 2; grid-row: 1 / 4; align-self: start; padding-block-start: .45em; }
  .row .state, .row .minutes { grid-column: 3; } .row .question { grid-column: 1; } }

.tiers { display: grid; gap: var(--s-4); margin-block: var(--s-6); }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.tier { background: var(--surface); border: 1px solid var(--rule-strong); border-inline-start: var(--bar) solid var(--you); border-radius: var(--r-2); padding: var(--s-5); display: flex; flex-direction: column; }
.tier[data-tier="free"] { border-inline-start-color: var(--ink); }
.tier h2 { font: 600 var(--fs--2) var(--font-mono); letter-spacing: .04em; text-transform: lowercase; margin: 0 0 var(--s-3); color: var(--ink-3); }
.tier .price { font-size: var(--fs-2); font-variant-numeric: tabular-nums; margin-block-end: var(--s-3); } .tier .price span { font-size: var(--fs--1); color: var(--ink-2); }
.tier .btn { margin-block-start: auto; align-self: flex-start; }
.tip-line, .supporter-toggle, .ads-policy { font-size: var(--fs--1); color: var(--ink-2); }
.supporter-toggle input { width: 18px; height: 18px; vertical-align: -3px; margin-inline-end: var(--s-2); accent-color: var(--you); }
dl.glossary > div { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); scroll-margin-top: var(--s-5); }
dl.glossary dt { font: 600 var(--fs--1) var(--font-mono); } dl.glossary dd { margin: 0; color: var(--ink-2); }
dl.glossary dt[data-lesson]::after { content: "lesson " attr(data-lesson); font-weight: 400; font-size: var(--fs--2); color: var(--ink-3); margin-inline-start: var(--s-3); }
dl.glossary dt:target, dl.glossary div:has(dt:target) { background: var(--event-bg); }

/* == 9 print, motion, forced colours ======================================================== */
@media print {
  :root { --paper: #fff; --surface: #fff; --sunken: #f4f4f4; }
  .site-header, .outline, .site-footer, .toolbar, .tabs, hx-support, hx-nav, .skip-link, .actions, .commit, .steps, .saved, .legend, .first-run, .pane-head button, .theme-toggle { display: none !important; }
  body { font-size: 11pt; } .page { display: block !important; padding: 0; }
  html.js :is(hx-ask, hx-predict) > [slot="reveal"], html.js [slot="why"], html.js [slot="nudge"] { display: block !important; }
  .panes { display: block; border: 0; } .panes .panels { display: none !important; } .panes .pane-code { display: block !important; border: 0 !important; }
  hx-lab[data-solution] .panels, hx-lab[data-solution] .panel[data-panel="solution"] { display: block !important; }
  .editor > * { max-height: none !important; overflow: visible !important; } .editor textarea { display: none; }
  hx-ask, hx-predict, hx-lab, hx-tau, pre, figure, hx-fig { break-inside: avoid; }
  a { color: inherit; } pre { white-space: pre-wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .dots i { opacity: 1; }
}
@media (forced-colors: active) {
  [data-node]::after, .outline a::before, .row::before { border-color: CanvasText; forced-color-adjust: none; }
  [data-node="done"]::after, .outline a[data-state="done"]::before, .row[data-state^="done"]::before { background: CanvasText; }
  .ln[data-gap] { border-inline-start-color: Highlight; } input:checked + .ring { background: Highlight; }
  svg [stroke] { stroke: currentColor; } .editor textarea { color: CanvasText; } .backdrop { visibility: hidden; }
}