:root {
  color-scheme: light;
  --lesson-bg: #fbfdff;
  --lesson-fg: #172a40;
  --lesson-muted: #506a84;
  --lesson-accent: #3975b8;
  --lesson-line: #dfe9f2;
  --lesson-surface: #fff;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --lesson-bg: #111a29;
  --lesson-fg: #e7edf5;
  --lesson-muted: #9aadc4;
  --lesson-accent: #6da9e8;
  --lesson-line: #26354a;
  --lesson-surface: #172337;
}

:root[data-theme="sage"] {
  --lesson-bg: #eff4e8;
  --lesson-fg: #263422;
  --lesson-muted: #526649;
  --lesson-accent: #456c45;
  --lesson-line: #dce6d1;
  --lesson-surface: #f8fbf4;
}

:root[data-theme="berry"] {
  --lesson-bg: #f6eaf4;
  --lesson-fg: #38273a;
  --lesson-muted: #725674;
  --lesson-accent: #81438e;
  --lesson-line: #ead5e6;
  --lesson-surface: #fcf5fb;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lesson-bg);
  color: var(--lesson-fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.72;
}

a { color: var(--lesson-accent); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--lesson-accent);
  outline-offset: 4px;
}

.lesson-shell { width: min(100% - 40px, 790px); margin-inline: auto; }
.lesson-header { padding-block: 28px 34px; border-bottom: 1px solid var(--lesson-line); }
.lesson-header nav { margin-bottom: 34px; font-size: .9rem; font-weight: 650; }
.lesson-kicker { margin: 0 0 12px; color: var(--lesson-accent); font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { color: var(--lesson-fg); line-height: 1.2; text-wrap: balance; }
h1 { max-width: 15ch; margin: 0; font-size: clamp(2.4rem, 7vw, 4.4rem); letter-spacing: -.055em; font-weight: 620; }
h2 { margin: 2.5em 0 .65em; font-size: clamp(1.55rem, 4vw, 2rem); letter-spacing: -.035em; }
h3 { margin: 1.8em 0 .5em; font-size: 1.2rem; }
.lesson-deck { max-width: 66ch; margin: 20px 0 0; color: var(--lesson-muted); font-size: 1.14rem; line-height: 1.65; }
.lesson-meta { margin: 16px 0 0; color: var(--lesson-muted); font-size: .85rem; }
main { padding-block: 28px 48px; }
p, ul, ol, dl, figure { max-width: 72ch; }
li + li { margin-top: .45em; }
.outcome, .example, .reflection { margin-block: 24px; padding: 20px 23px; border-left: 3px solid var(--lesson-accent); background: var(--lesson-surface); }
.outcome > :first-child, .example > :first-child, .reflection > :first-child { margin-top: 0; }
.outcome > :last-child, .example > :last-child, .reflection > :last-child { margin-bottom: 0; }
.diagram { margin-block: 24px; padding: 18px; border: 1px solid var(--lesson-line); border-radius: 12px; }
.diagram ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.diagram li { min-width: 0; padding: 10px 12px; border: 1px solid var(--lesson-line); border-radius: 8px; background: var(--lesson-surface); font-size: .88rem; font-weight: 650; text-align: center; }
pre { max-width: 100%; margin: 20px 0; overflow: auto; padding: 18px; border: 1px solid var(--lesson-line); border-radius: 10px; background: var(--lesson-surface); color: var(--lesson-fg); font: 500 .84rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
:not(pre) > code { padding: .08em .32em; border-radius: 4px; background: var(--lesson-surface); }
table { width: 100%; margin-block: 20px; border-collapse: collapse; text-align: left; font-size: .93rem; }
caption { padding: 0 0 10px; text-align: left; font-weight: 700; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--lesson-line); vertical-align: top; }
th { font-size: .82rem; }
.quiz { margin-block: 32px; padding: 22px; border: 1px solid var(--lesson-line); border-radius: 12px; }
.quiz legend { padding-inline: 6px; font-weight: 700; }
.quiz label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; cursor: pointer; }
.quiz input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .3em; accent-color: var(--lesson-accent); }
.quiz button { margin-top: 12px; padding: 9px 14px; border: 1px solid var(--lesson-accent); border-radius: 7px; background: var(--lesson-accent); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.quiz button:hover { filter: brightness(.9); }
.quiz-feedback { min-height: 1.7em; margin: 12px 0 0; font-weight: 650; }
.quiz-feedback[data-correct="true"] { color: var(--lesson-accent); }
.quiz-feedback[data-correct="false"] { color: #8b2e38; }
:root[data-theme="midnight"] .quiz button { color: #111a29; }
:root[data-theme="midnight"] .quiz-feedback[data-correct="false"] { color: #ffafb4; }
.source { padding: 16px 18px; border: 1px solid var(--lesson-line); border-radius: 10px; }
.lesson-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--lesson-line); font-size: .93rem; font-weight: 700; }
.lesson-footer { padding-block: 0 40px; color: var(--lesson-muted); font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .lesson-shell { width: min(100% - 30px, 790px); }
  .lesson-header { padding-block: 18px 28px; }
  .lesson-header nav { margin-bottom: 26px; }
  .outcome, .example, .reflection { padding: 17px; }
  .quiz { padding: 17px; }
  th, td { padding: 9px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  body { font-size: 12pt; }
  .lesson-shell { width: 100%; }
  .lesson-header { padding-top: 0; }
  .lesson-header nav, .quiz button { display: none; }
  a { color: inherit; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}