:root {
  color-scheme: light;
  --ink: #202923;
  --muted: #58645b;
  --paper: #fffef9;
  --canvas: #eeeede;
  --line: #cbd2c7;
  --accent: #245442;
  --soft: #e4efe6;
  --warm: #fff0d2;
  --error: #983e30;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 17px/1.75 "Iowan Old Style", "Songti SC", Georgia, serif; overflow-wrap: anywhere; }
main { width: min(960px, calc(100% - 32px)); margin: 28px auto 60px; background: var(--paper); border: 1px solid var(--line); }
header, section, footer { padding: 32px clamp(22px, 6vw, 64px); }
section, footer { border-top: 1px solid var(--line); }
header { padding-top: 48px; }
h1, h2, h3 { line-height: 1.3; font-family: "Avenir Next", "PingFang SC", system-ui, sans-serif; font-weight: 650; }
h1 { margin: 14px 0; font-size: clamp(2.1rem, 5.5vw, 3.8rem); letter-spacing: -.04em; }
h2 { margin-top: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.14rem; }
p { max-width: 72ch; }
.eyebrow, .meta { font-family: var(--mono); color: var(--accent); font-size: .78rem; letter-spacing: .05em; }
.lead { font-size: 1.15rem; color: var(--muted); }
a { color: var(--accent); text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: #803b15; }
.skip-link { position: absolute; left: 12px; top: 12px; transform: translateY(-200%); background: white; padding: 8px; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #b36524; outline-offset: 4px; }
.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.chain article { padding: 18px; border: 1px solid var(--line); background: var(--soft); }
.chain strong { font-family: var(--mono); color: var(--accent); }
.chain p { margin-bottom: 0; font-size: .93rem; }
.callout { padding: 18px 22px; background: var(--soft); border-left: 4px solid var(--accent); }
.aside { padding: 18px 22px; background: var(--warm); border-left: 4px solid #b36524; }
.callout p, .aside p { margin: 0; }
code { font: .87em var(--mono); overflow-wrap: anywhere; }
pre { padding: 20px; background: #25372e; color: #f8faef; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
pre code { color: inherit; }
.quiz { padding: 20px; border: 1px solid var(--line); margin: 20px 0; }
.quiz h3 { margin-top: 0; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
button, select, textarea, input { font: inherit; }
button { min-height: 46px; cursor: pointer; padding: 10px 16px; background: white; color: var(--ink); border: 1px solid #9ca99e; }
button:hover { background: var(--soft); }
button.check { background: var(--accent); color: white; }
button.choice.is-correct { border: 2px solid var(--accent); background: var(--soft); }
button.choice.is-wrong { border: 2px solid var(--error); background: #fae7de; }
.feedback { min-height: 1.7em; color: var(--muted); margin-bottom: 0; }
.feedback.is-success { color: var(--accent); }
.feedback.is-error { color: var(--error); }
label { display: block; margin: 18px 0 8px; font-weight: 600; }
textarea { width: 100%; min-height: 90px; padding: 12px; border: 1px solid #9ca99e; background: white; font-family: var(--mono); font-size: .9rem; resize: vertical; }
select { min-height: 42px; padding: 7px; background: white; border: 1px solid #9ca99e; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .93rem; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { background: var(--soft); font-family: system-ui, sans-serif; font-size: .85rem; }
dl { display: grid; grid-template-columns: minmax(145px, .38fr) 1fr; }
dt, dd { margin: 0; padding: 14px 12px; border-bottom: 1px solid var(--line); }
dt { font-weight: bold; color: var(--accent); }
details { padding: 16px; border: 1px solid var(--line); margin: 20px 0; }
summary { cursor: pointer; font-weight: 600; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 24px; padding: 0; list-style: none; }
.answer-note { color: var(--muted); }
.lesson-link { display: inline-block; min-height: 46px; padding: 10px 18px; color: white; background: var(--accent); text-decoration: none; font-family: system-ui, sans-serif; }
.lesson-link:hover { color: white; background: #183f30; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  main { width: calc(100% - 16px); margin-top: 8px; }
  header, section, footer { padding: 26px 20px; }
  .chain, .choices { grid-template-columns: 1fr; }
  dl { grid-template-columns: 1fr; }
  dt { padding-bottom: 0; border-bottom: 0; }
  dd { padding-top: 4px; }
  th, td { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  @page { margin: 16mm; }
  body { background: white; color: black; font-size: 10.5pt; }
  main { width: 100%; margin: 0; border: 0; }
  header, section, footer { padding: 16px 0; }
  h1 { font-size: 25pt; }
  h2 { font-size: 16pt; }
  .skip-link, button { display: none; }
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain article, .callout, .aside, pre, th { background: white; color: black; }
  .table-scroll { overflow: visible; }
  tr, .quiz, .chain article { break-inside: avoid; }
  a { color: black; }
  .lesson-link { color: black; background: white; border: 1px solid #aaa; }
  pre { border: 1px solid #aaa; }
  details { display: block; }
}