:root {
  --paper: #faf9f5; --surface: #ffffff; --panel: #f0f2e9; --goal: #eaf2e4;
  --wash: #edf3e8; --ink: #223a36; --muted: #5b6c64; --line: #dbe2d6;
  --accent: #286953; --goal-edge: #6b9467; --positive: #317f73; --negative: #bc604d; --focus: #9b6b1d;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Iowan Old Style", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --body-size: 17px; --body-leading: 1.8; --title-size: 38px;
  --section-size: 23px; --subsection-size: 18px;
  --sidebar-width: 230px; --content-max: 980px; --reading-measure: 72ch;
  --space-small: 8px; --space-medium: 16px; --space-large: 24px;
  --space-section: 32px; --space-page: 48px; --radius: 6px;
  --focus-width: 3px; --focus-offset: 4px;
  --caption-size: 14px; --code-size: 13px; --border-width: 1px;
  --goal-edge-width: 4px; --math-size: 1.1em; --digit-size: 58px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-large); }
body { margin: 0; color: var(--ink); background: var(--paper); font: var(--body-size)/var(--body-leading) var(--font-body); }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: var(--focus-offset); }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.skip-link { position: absolute; top: -100px; left: var(--space-medium); z-index: 10; padding: var(--space-small); background: var(--surface); }
.skip-link:focus { top: var(--space-small); }
.contents { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: var(--space-section) var(--space-large); background: var(--panel); border-right: var(--border-width) solid var(--line); overflow-y: auto; }
.book-title { color: var(--ink); font: var(--section-size)/1.3 var(--font-heading); text-decoration: none; display: block; }
.contents p, .contents > a:not(.book-title) { font-size: var(--code-size); line-height: var(--body-leading); }
.contents > p { color: var(--muted); margin-top: var(--space-small); }
.contents nav { margin: var(--space-section) 0; }
.contents ol { list-style: none; padding: 0; }
.contents li { margin: 0 0 var(--space-small); }
.contents nav a { display: block; padding: var(--space-small); text-decoration: none; font-size: var(--code-size); color: var(--ink); border-radius: var(--radius); }
.contents nav a[aria-current] { color: var(--accent); background: var(--wash); font-weight: 700; }
.contents .reading-note { border-top: var(--border-width) solid var(--line); padding-top: var(--space-medium); }
.contents > a:not(.book-title) { display: block; margin-top: var(--space-medium); }
.lesson { margin-left: var(--sidebar-width); max-width: var(--content-max); padding: var(--space-page); }
h1 { font: var(--title-size)/1.25 var(--font-heading); margin: var(--space-medium) 0 var(--space-large); }
h2 { font: 650 var(--section-size)/1.4 var(--font-body); margin: var(--space-medium) 0 var(--space-large); }
h3 { font: 650 var(--subsection-size)/1.5 var(--font-body); margin: var(--space-section) 0 var(--space-medium); }
p { max-width: var(--reading-measure); margin: 0 0 var(--space-medium); }
ul, ol { padding-left: var(--space-large); }
li { margin-bottom: var(--space-small); }
.eyebrow { font-size: var(--code-size); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lesson-section { border-top: var(--border-width) solid var(--line); padding-top: var(--space-section); margin-top: var(--space-page); }
.goal { background: var(--goal); border-left: var(--goal-edge-width) solid var(--goal-edge); padding: var(--space-large); margin: var(--space-large) 0; border-radius: 0 var(--radius) var(--radius) 0; }
.goal h2, .goal h3 { margin-top: 0; font-size: var(--subsection-size); }
.goal [data-source-unit]:last-child > :last-child, .bridge [data-source-unit]:last-child > :last-child { margin-bottom: 0; }
.activity { padding: var(--space-large); margin: var(--space-section) 0; border: var(--border-width) solid var(--line); background: var(--surface); border-radius: var(--radius); }
.activity > [data-source-unit]:first-child h3 { margin-top: 0; }
.controls { margin: var(--space-medium) 0; display: grid; gap: var(--space-small); grid-template-columns: minmax(0, 1fr); max-width: 100%; }
.controls label { font-size: var(--caption-size); font-weight: 650; }
.controls:has(> button) { display: flex; flex-wrap: wrap; gap: var(--space-medium); }
button, select, input { font: inherit; accent-color: var(--accent); }
select, input { min-width: 0; max-width: 100%; background: var(--surface); color: var(--ink); border: var(--border-width) solid var(--muted); padding: var(--space-small); border-radius: var(--radius); }
select { justify-self: start; font-size: var(--caption-size); }
button { justify-self: start; padding: var(--space-small) var(--space-medium); border: var(--border-width) solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--surface); cursor: pointer; font-size: var(--caption-size); }
button:disabled, select:disabled, input:disabled { cursor: default; opacity: 1; background: var(--panel); color: var(--muted); border-color: var(--muted); }
.check-control { display: flex; gap: var(--space-small); align-items: center; }
.check-control input { flex-shrink: 0; }
.result { margin: var(--space-medium) 0; padding: var(--space-medium); background: var(--wash); border-left: var(--focus-width) solid var(--goal-edge); }
.result.is-wrong { border-left-color: var(--focus); }
.result > :last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; margin: var(--space-medium) 0 var(--space-large); max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: var(--caption-size); line-height: var(--body-leading); }
th, td { border-bottom: var(--border-width) solid var(--line); padding: var(--space-small) var(--space-medium); text-align: left; vertical-align: top; }
th { font-weight: 700; background: var(--panel); }
code { font: .9em/var(--body-leading) var(--font-mono); background: var(--wash); padding: 0 var(--focus-offset); border-radius: var(--radius); overflow-wrap: anywhere; }
pre { border: var(--border-width) solid var(--line); background: var(--panel); padding: var(--space-medium); border-radius: var(--radius); overflow-x: auto; margin: var(--space-medium) 0 var(--space-large); max-width: 100%; }
pre code { display: block; font-size: var(--code-size); white-space: pre; overflow-wrap: normal; background: transparent; padding: 0; }
.step-code { padding: var(--space-small); }
#step-lines { white-space: normal; }
.code-line { display: block; white-space: pre; padding: var(--focus-offset); border-left: var(--focus-width) solid transparent; }
.code-line.current { border-color: var(--accent); background: var(--goal); }
.code-line.done { color: var(--muted); }
.math .katex { font-size: var(--math-size); }
.math.display { overflow-x: auto; max-width: 100%; margin: var(--space-large) 0; padding: var(--space-small); background: var(--wash); }
.math.display .katex-display { margin: var(--space-small) 0; width: max-content; min-width: 100%; }
.digit-strip { display: flex; flex-wrap: wrap; gap: var(--space-small); margin: var(--space-medium) 0; }
.digit-strip figure { margin: 0; }
.digit-strip canvas { display: block; width: var(--digit-size); height: var(--digit-size); image-rendering: pixelated; border: var(--border-width) solid var(--muted); }
figcaption { font: var(--code-size)/var(--body-leading) var(--font-body); color: var(--muted); }
[data-source-figure] > p { font-size: var(--caption-size); color: var(--muted); }
.questions { margin-top: var(--space-section); padding-top: var(--space-medium); border-top: var(--border-width) solid var(--line); }
.questions h3 { margin-top: 0; }
details { padding: var(--space-medium) 0; border-bottom: var(--border-width) solid var(--line); }
summary { cursor: pointer; font-weight: 650; color: var(--accent); }
details p { margin: var(--space-medium) 0 0; }
.bridge { background: var(--panel); border-radius: var(--radius); padding: var(--space-large); margin-top: var(--space-section); }
.bridge h3 { margin-top: 0; }
.error-banner { border: var(--focus-width) solid var(--focus); padding: var(--space-medium); margin-bottom: var(--space-large); }
footer { margin-top: var(--space-page); border-top: var(--border-width) solid var(--line); padding-top: var(--space-large); font-size: var(--caption-size); }
.footnote { color: var(--muted); margin-top: var(--space-medium); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Design breakpoint: 850px, chosen for the 230px sidebar plus a usable reading column. */
@media (max-width: 850px) {
  .contents { position: static; width: auto; padding: var(--space-large); border-right: 0; }
  .contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-small); }
  .lesson { margin-left: 0; padding: var(--space-large); }
  .goal, .activity, .bridge { padding: var(--space-medium); }
  select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }