: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;
  --page-pad-min: 25px; --page-pad-fluid: 5vw; --page-pad-max: 80px;
  --table-size: 14px; --math-size: 18px; --control-size: 15px; --figure-size: 168px;
  --plot-left: 65; --plot-right: 20; --plot-top: 38; --plot-bottom: 50; --plot-ticks: 4;
  --plot-low-pad: .06; --plot-high-pad: .09; --plot-stroke: 2.5; --plot-label-size: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; padding-left: var(--sidebar-width); background: var(--paper); color: var(--ink); font: var(--body-size)/var(--body-leading) var(--font-body); }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select { font: inherit; }
button, select, input[type=range], summary { cursor: pointer; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
button { background: var(--accent); color: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px var(--space-medium); font-size: var(--control-size); }
button:hover:not(:disabled) { filter: brightness(.9); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secondary { background: transparent; color: var(--accent); }
input[type=number], select { border: 1px solid var(--muted); border-radius: var(--radius); padding: var(--space-small); min-height: 42px; max-width: 100%; background: var(--surface); color: var(--ink); }
input[type=number] { width: 115px; }
input[type=range] { width: min(100%, 400px); accent-color: var(--accent); }
label { display: flex; flex-direction: column; gap: var(--space-small); font-weight: 600; font-size: var(--control-size); margin: var(--space-medium) 0; }
output { font-family: var(--font-mono); }
.contents { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: var(--space-section) var(--space-large); border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
.book-title { display: block; font: 25px/1.3 var(--font-heading); color: var(--ink); text-decoration: none; }
.contents > p, .notes-link { font-size: 13px; color: var(--muted); }
.contents nav { margin: var(--space-section) -8px; }
.contents ol { list-style: none; padding: 0; margin: 0; }
.contents li { margin: 0 0 var(--space-small); }
.contents nav button { display: flex; width: 100%; gap: 10px; text-align: left; background: transparent; color: var(--muted); border: 0; font-size: 13px; line-height: 1.5; padding: 10px var(--space-small); }
.contents nav button span { font-family: var(--font-mono); }
.contents nav button[aria-current=page] { background: var(--goal); color: var(--accent); font-weight: 650; }
.reading-note { border-top: 1px solid var(--line); padding-top: var(--space-large); }
main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-page) clamp(var(--page-pad-min), var(--page-pad-fluid), var(--page-pad-max)) var(--space-section); }
article > p, article > ul, article > ol { max-width: var(--reading-measure); }
.page-heading { margin-bottom: var(--space-large); }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: 1px; font-weight: 650; margin: 0 0 var(--space-small); }
h1 { font: 500 var(--title-size)/1.25 var(--font-heading); margin: 0 0 var(--space-medium); }
h2 { font: 650 var(--section-size)/1.4 var(--font-body); margin: var(--space-section) 0 var(--space-medium); }
h3 { font-size: var(--subsection-size); margin: var(--space-large) 0 var(--space-medium); }
p { margin: 0 0 var(--space-medium); }
li { margin-bottom: var(--space-small); }
strong, b { font-weight: 650; }
.example-context { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: var(--space-medium); margin-bottom: var(--space-large); }
.goal { background: var(--goal); border-left: 4px solid var(--goal-edge); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-large); margin-bottom: var(--space-large); }
.goal h2 { margin-top: 0; font-size: 20px; }
.goal p:last-child, .bridge p:last-child, .readout p:last-child { margin-bottom: 0; }
.recap { border-bottom: 1px solid var(--line); color: var(--muted); padding-bottom: var(--space-medium); margin-bottom: var(--space-section); }
.activity { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-large); margin: var(--space-section) 0; }
.activity > h2:first-child { margin-top: 0; }
.instructions { color: var(--muted); font-size: 16px; }
.controls { display: flex; flex-wrap: wrap; gap: var(--space-large); }
.controls label { flex: 1; min-width: 120px; }
.result { background: var(--wash); padding: var(--space-medium); border-radius: var(--radius); margin: var(--space-large) 0; }
.result .result { background: transparent; }
.readout .equation { background: transparent; }
.readout .table-scroll { margin: 0; }
.questions { border-top: 2px solid var(--line); padding-top: var(--space-medium); margin-top: var(--space-section); }
details { border-bottom: 1px solid var(--line); padding: var(--space-medium) 0; }
summary { color: var(--accent); font-size: var(--body-size); line-height: var(--body-leading); font-weight: 600; }
details > p, details > .equation, details > pre { margin-top: var(--space-medium); }
.derivation { background: var(--panel); padding: var(--space-medium); border: 1px solid var(--line); border-radius: var(--radius); margin: var(--space-large) 0; }
.bridge { background: var(--panel); padding: var(--space-large); border-radius: var(--radius); margin-top: var(--space-section); }
.bridge h2 { margin-top: 0; font-size: 20px; }
.chapter-footer { display: flex; justify-content: space-between; gap: var(--space-medium); padding: var(--space-section) 0; }
.footnote { color: var(--muted); font-size: 13px; }
.notice { padding: var(--space-medium); border: 1px solid var(--focus); background: var(--panel); margin-bottom: var(--space-large); }
.error-banner { padding: var(--space-medium); border: 2px solid var(--negative); background: var(--surface); color: var(--ink); }
.equation { overflow-x: auto; max-width: 100%; padding: var(--space-small); }
.equation.display { background: var(--wash); border-radius: var(--radius); margin: var(--space-large) 0; padding: var(--space-medium) var(--space-small); }
.katex { font-size: var(--math-size); }
.katex-display { margin: .4em 0; }
.math-inline { display: inline-block; vertical-align: middle; line-height: 1.4; max-width: 100%; padding: 3px 0; }
.math-inline .katex { white-space: normal; }
.table-scroll { overflow-x: auto; max-width: 100%; margin: var(--space-large) 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--table-size); }
th { text-align: left; font-weight: 650; background: var(--goal); padding: 12px; }
td { padding: 12px; border-bottom: 1px solid var(--line); }
th .katex, td .katex { font-size: var(--math-size); }
td:not(:first-child) { font-family: var(--font-mono); white-space: nowrap; }
.sample-gallery { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-small); margin: var(--space-large) 0; }
.sample-choice { padding: 5px; color: var(--ink); background: var(--panel); border: 1px solid var(--muted); }
.sample-choice.active { outline: 2px solid var(--accent); background: var(--goal); }
.sample-choice canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.sample-choice span { display: block; font-size: 12px; margin-top: 3px; }
#digit-canvas { width: 196px; height: 196px; max-width: 100%; image-rendering: pixelated; cursor: crosshair; }
.gradient-pair { display: flex; flex-wrap: wrap; gap: var(--space-large); }
.gradient-pair figure { flex: 1; min-width: var(--figure-size); margin: 0; }
.gradient-pair canvas { width: var(--figure-size); height: var(--figure-size); max-width: 100%; image-rendering: pixelated; border: 1px solid var(--line); }
figcaption { font-size: 14px; color: var(--muted); }
.plot { display: block; width: 100%; height: auto; margin: var(--space-large) 0; }
.plot text { fill: var(--muted); font: var(--plot-label-size) var(--font-body); }
pre { overflow-x: auto; background: var(--wash); padding: var(--space-medium); border-radius: var(--radius); }
code { font: 14px/1.8 var(--font-mono); }
.skip-link { position: fixed; top: -100px; left: var(--space-medium); z-index: 20; padding: var(--space-small); background: var(--surface); }
.skip-link:focus { top: var(--space-small); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* Layout setting: below 760px the sidebar moves above the reading column. */
@media (max-width: 760px) {
  body { padding-left: 0; }
  .contents { position: static; width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-large); }
  main { padding: var(--space-section) var(--space-medium); }
  .sample-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .activity, .goal, .bridge { padding: var(--space-medium); }
  .gradient-pair { flex-direction: column; }
  .chapter-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}