/* ============================================================================
   Deep Learning I - Course Design System
   One stylesheet, shared by every lesson, the exam center, and the glossary,
   so the whole thing reads as a single hand-made course. Tufte-ish: a calm
   reading column, generous air, restrained color, math and figures first.
   ========================================================================== */

:root {
  /* paper + ink */
  --paper:      #fbfaf7;
  --bg:         #f3f2ec;
  --card:       #ffffff;
  --ink:        #1e232e;
  --ink-soft:   #3b4250;
  --muted:      #687083;
  --faint:      #99a0ae;
  --line:       #e6e3da;
  --line-soft:  #efece4;

  /* accents */
  --teal:       #0e7c6b;   --teal-ink:#0a5a4e;  --teal-soft:#d9efe9;
  --crimson:    #b4244e;   --crimson-ink:#8a1b3c; --crimson-soft:#fbe1e8;
  --amber:      #a96a06;   --amber-soft:#fbedd2;
  --indigo:     #3b46c4;   --indigo-soft:#e4e6fb;
  --violet:     #6d28d9;   --violet-soft:#ede4fb;

  /* difficulty */
  --easy:#1a7f53; --easy-soft:#dcf2e6;
  --med:#9a6a05;  --med-soft:#fbeecf;
  --hard:#b4244e; --hard-soft:#fbe1e8;

  /* type */
  --serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 42rem;        /* reading column width */
  --wide: 60rem;           /* wide blocks: sims, tables */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,25,40,.04), 0 6px 22px rgba(20,25,40,.06);
  --shadow-sm: 0 1px 2px rgba(20,25,40,.05), 0 2px 8px rgba(20,25,40,.05);
}

[data-theme="dark"] {
  --paper:#14161c; --bg:#0f1116; --card:#1a1d26; --ink:#e9ecf2; --ink-soft:#c7ccd8;
  --muted:#9aa2b2; --faint:#6b7280; --line:#2a2e3a; --line-soft:#23262f;
  --teal:#34d0b6; --teal-ink:#7ee3d1; --teal-soft:#10302b;
  --crimson:#f06a92; --crimson-ink:#f7a8c0; --crimson-soft:#3a1320;
  --amber:#e2a93f; --amber-soft:#3a2c10; --indigo:#8c95f3; --indigo-soft:#1c1f3d;
  --violet:#b794f6; --violet-soft:#241636;
  --easy:#4ade80; --easy-soft:#10301f; --med:#e2b85f; --med-soft:#352a10;
  --hard:#f06a92; --hard-soft:#3a1320;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.65;
  font-feature-settings:"kern","liga","onum";
  -webkit-font-smoothing:antialiased;
}

/* ---- layout ---------------------------------------------------------- */
.wrap { max-width:var(--measure); margin:0 auto; padding:0 1.25rem; }
.wrap-wide { max-width:var(--wide); margin:0 auto; padding:0 1.25rem; }
main { padding:2.5rem 0 5rem; }
section { margin:2.6rem 0; }
.bleed { max-width:var(--wide); }       /* let a child escape the text column */

/* ---- top bar --------------------------------------------------------- */
.topbar {
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);
}
.topbar-in { max-width:var(--wide); margin:0 auto; padding:.55rem 1.25rem;
  display:flex; align-items:center; gap:1rem; }
.brand { font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.5rem; }
.brand .dot { width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--indigo)); box-shadow:0 0 0 3px var(--teal-soft); }
.topnav { margin-left:auto; display:flex; gap:.25rem; align-items:center; font-family:var(--sans); font-size:.83rem; }
.topnav a { color:var(--ink-soft); text-decoration:none; padding:.35rem .6rem; border-radius:8px; }
.topnav a:hover { background:var(--line-soft); color:var(--ink); }
.topnav a.active { color:var(--teal-ink); background:var(--teal-soft); }
.icon-btn { border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:.95rem; display:grid; place-items:center; }
.icon-btn:hover { border-color:var(--teal); color:var(--teal-ink); }

/* ---- lesson header --------------------------------------------------- */
.eyebrow { font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-ink); }
h1.title { font-family:var(--sans); font-weight:800; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(2rem,5vw,3rem); margin:.4rem 0 .5rem; }
.subtitle { font-size:1.2rem; color:var(--muted); font-style:italic; margin:0 0 1rem; }
.meta { font-family:var(--sans); font-size:.8rem; color:var(--faint); display:flex; flex-wrap:wrap;
  gap:.4rem 1rem; padding:.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.meta b { color:var(--ink-soft); font-weight:600; }

/* ---- headings -------------------------------------------------------- */
h2 { font-family:var(--sans); font-weight:750; letter-spacing:-.02em; font-size:1.65rem;
  margin:2.6rem 0 .4rem; line-height:1.15; }
h2 .num { color:var(--teal); font-variant-numeric:tabular-nums; margin-right:.4rem; }
h3 { font-family:var(--sans); font-weight:700; font-size:1.2rem; margin:1.8rem 0 .3rem; letter-spacing:-.01em; }
h4 { font-family:var(--sans); font-weight:650; font-size:1rem; margin:1.3rem 0 .2rem; color:var(--ink-soft); }
p { margin:.7rem 0; }
.lead { font-size:1.18rem; line-height:1.6; color:var(--ink-soft); }
a { color:var(--indigo); text-decoration-color:color-mix(in srgb,var(--indigo) 35%,transparent);
  text-underline-offset:2px; }
a:hover { text-decoration-color:var(--indigo); }
strong { font-weight:650; color:var(--ink); }
em { color:var(--ink-soft); }
hr { border:none; border-top:1px solid var(--line); margin:2.4rem 0; }
ul,ol { padding-left:1.3rem; } li { margin:.3rem 0; }
::selection { background:var(--teal-soft); }

/* ---- table of contents ---------------------------------------------- */
.toc { font-family:var(--sans); font-size:.85rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.2rem; box-shadow:var(--shadow-sm); }
.toc-title { font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem; }
.toc ol { margin:0; padding-left:1.2rem; columns:2; column-gap:1.5rem; }
.toc a { color:var(--ink-soft); text-decoration:none; }
.toc a:hover { color:var(--teal-ink); }
@media (max-width:560px){ .toc ol{ columns:1; } }

/* ---- callouts -------------------------------------------------------- */
.callout { position:relative; border:1px solid var(--line); border-left:4px solid var(--muted);
  background:var(--card); border-radius:10px; padding:1rem 1.15rem; margin:1.4rem 0; box-shadow:var(--shadow-sm); }
.callout .label { font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; display:flex; align-items:center; gap:.45rem; margin-bottom:.35rem; }
.callout p:first-of-type { margin-top:.1rem; } .callout p:last-child { margin-bottom:0; }
.callout.intuition { border-left-color:var(--teal); background:color-mix(in srgb,var(--teal-soft) 40%,var(--card)); }
.callout.intuition .label { color:var(--teal-ink); }
.callout.firstprinciples { border-left-color:var(--violet); background:color-mix(in srgb,var(--violet-soft) 35%,var(--card)); }
.callout.firstprinciples .label { color:var(--violet); }
.callout.warning { border-left-color:var(--crimson); background:color-mix(in srgb,var(--crimson-soft) 35%,var(--card)); }
.callout.warning .label { color:var(--crimson-ink); }
.callout.examtip { border-left-color:var(--amber); background:color-mix(in srgb,var(--amber-soft) 45%,var(--card)); }
.callout.examtip .label { color:var(--amber); }
.callout.example { border-left-color:var(--indigo); background:color-mix(in srgb,var(--indigo-soft) 30%,var(--card)); }
.callout.example .label { color:var(--indigo); }

/* takeaway block */
.takeaway { background:var(--ink); color:#f4f5f8; border-radius:var(--radius); padding:1.2rem 1.4rem; margin:1.6rem 0; }
[data-theme="dark"] .takeaway{ background:#0b0d12; border:1px solid var(--line); }
.takeaway .label { font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal); margin-bottom:.5rem; }
.takeaway ul { margin:.2rem 0; padding-left:1.1rem; } .takeaway li { margin:.35rem 0; }
.takeaway a { color:#9fe7d8; }

/* pull quote / key idea */
.keyidea { font-family:var(--sans); font-weight:600; font-size:1.25rem; line-height:1.4;
  color:var(--teal-ink); border-top:2px solid var(--teal); border-bottom:2px solid var(--teal);
  padding:.9rem 0; margin:1.8rem 0; letter-spacing:-.01em; }

/* ---- figures & simulators ------------------------------------------- */
figure { margin:1.6rem 0; }
figure.wide, .sim, .figure-wide { max-width:var(--wide); }
figcaption { font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:.5rem; text-align:center; }
figcaption b { color:var(--ink-soft); }

.sim { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.1rem 1.2rem 1.2rem; margin:1.8rem 0; }
.sim-title { font-family:var(--sans); font-weight:700; font-size:.95rem; display:flex; align-items:center;
  gap:.5rem; margin-bottom:.15rem; }
.sim-title .tag { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-ink);
  background:var(--teal-soft); padding:.12rem .45rem; border-radius:999px; font-weight:700; }
.sim-sub { font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-bottom:.8rem; }
.sim canvas, .sim svg { display:block; max-width:100%; border-radius:8px; }
.sim-stage { display:flex; gap:1.2rem; flex-wrap:wrap; align-items:flex-start; }
.sim-canvas-wrap { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.4rem; }
.sim-controls { display:flex; flex-direction:column; gap:.7rem; min-width:200px; flex:1; font-family:var(--sans); font-size:.85rem; }
.ctrl { display:flex; flex-direction:column; gap:.25rem; }
.ctrl label { font-weight:600; color:var(--ink-soft); display:flex; justify-content:space-between; gap:.5rem; }
.ctrl label .val { font-family:var(--mono); color:var(--teal-ink); font-weight:700; }
.sim-readout { font-family:var(--mono); font-size:.82rem; background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:.6rem .7rem; color:var(--ink-soft); line-height:1.5; }
.sim-readout b { color:var(--teal-ink); }

/* form controls (sliders, buttons, selects) shared */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px;
  background:var(--line); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--teal); cursor:pointer; border:2px solid var(--card); box-shadow:var(--shadow-sm); }
input[type=range]::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:var(--teal);
  cursor:pointer; border:2px solid var(--card); }
.btn { font-family:var(--sans); font-weight:600; font-size:.85rem; border:1px solid var(--line);
  background:var(--card); color:var(--ink); padding:.45rem .85rem; border-radius:9px; cursor:pointer; }
.btn:hover { border-color:var(--teal); color:var(--teal-ink); }
.btn.primary { background:var(--teal); color:#fff; border-color:var(--teal); }
.btn.primary:hover { background:var(--teal-ink); color:#fff; }
.btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }
select, .seg { font-family:var(--sans); font-size:.85rem; padding:.4rem .55rem; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--ink); }

/* segmented toggle */
.seg-group { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg-group button { border:none; background:var(--card); color:var(--ink-soft); font-family:var(--sans);
  font-size:.8rem; font-weight:600; padding:.4rem .7rem; cursor:pointer; }
.seg-group button.on { background:var(--teal); color:#fff; }

/* ---- code ------------------------------------------------------------ */
code { font-family:var(--mono); font-size:.86em; background:var(--line-soft); padding:.1em .35em;
  border-radius:5px; color:var(--crimson-ink); }
[data-theme="dark"] code{ color:var(--teal-ink); }
.codeblock { margin:1.4rem 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.codeblock .cb-head { font-family:var(--sans); font-size:.74rem; letter-spacing:.04em; color:var(--muted);
  background:var(--line-soft); padding:.4rem .9rem; display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--line); }
.codeblock .cb-head .fname { font-weight:600; color:var(--ink-soft); }
.codeblock pre { margin:0; padding:.9rem 1rem; overflow-x:auto; background:var(--card); }
.codeblock pre code { background:none; padding:0; color:var(--ink); font-size:.82rem; line-height:1.55; }

/* ---- tables ---------------------------------------------------------- */
.table-wrap { overflow-x:auto; margin:1.4rem 0; }
table { border-collapse:collapse; width:100%; font-family:var(--sans); font-size:.86rem; }
th,td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
thead th { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  border-bottom:2px solid var(--line); }
tbody tr:hover { background:var(--line-soft); }
td.num, th.num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---- KaTeX sizing ---------------------------------------------------- */
.katex { font-size:1.04em; }
.katex-display { overflow-x:auto; overflow-y:hidden; padding:.4rem 0; margin:1.1rem 0; }

/* ---- difficulty badge ------------------------------------------------ */
.diff { font-family:var(--sans); font-weight:700; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.14rem .5rem; border-radius:999px; }
.diff.easy { color:var(--easy); background:var(--easy-soft); }
.diff.med  { color:var(--med);  background:var(--med-soft); }
.diff.hard { color:var(--hard); background:var(--hard-soft); }

/* ======================================================================
   QUIZ ENGINE (used by lessons' quick-checks AND the exam center)
   ====================================================================== */
.quiz { margin:1.6rem 0; }
.q { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1.1rem 1.2rem; margin:1rem 0; }
.q-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--sans);
  font-size:.72rem; margin-bottom:.55rem; }
.q-num { font-weight:800; color:var(--teal-ink); }
.q-type { color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.q-topic { margin-left:auto; color:var(--faint); font-weight:600; }
.q-stem { font-size:1.04rem; line-height:1.5; }
.q-stem code { font-size:.85em; }
.opts { list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.opt { font-family:var(--sans); font-size:.92rem; border:1px solid var(--line); background:var(--paper);
  border-radius:9px; padding:.6rem .8rem; cursor:pointer; display:flex; gap:.6rem; align-items:flex-start;
  transition:border-color .12s, background .12s; }
.opt:hover { border-color:var(--teal); }
.opt .mark { font-family:var(--mono); font-weight:700; color:var(--muted); flex:none; width:1.2rem; }
.opt.sel { border-color:var(--teal); background:var(--teal-soft); }
.opt.correct { border-color:var(--easy); background:var(--easy-soft); }
.opt.correct .mark { color:var(--easy); }
.opt.wrong { border-color:var(--crimson); background:var(--crimson-soft); }
.opt.wrong .mark { color:var(--crimson); }
.opt.muted-correct { border-style:dashed; border-color:var(--easy); }   /* missed correct answer */
.q-actions { display:flex; gap:.5rem; margin-top:.8rem; align-items:center; flex-wrap:wrap; }
.q-verdict { font-family:var(--sans); font-weight:700; font-size:.85rem; }
.q-verdict.ok { color:var(--easy); } .q-verdict.no { color:var(--crimson); }
.q-explain { margin-top:.8rem; padding:.8rem .9rem; border-radius:9px; background:var(--paper);
  border:1px solid var(--line); font-size:.92rem; display:none; }
.q-explain.show { display:block; }
.q-explain .why { font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal-ink); margin-bottom:.3rem; }

/* fill in the blank */
.fill-in { font-family:var(--mono); font-size:.9rem; border:none; border-bottom:2px solid var(--teal);
  background:var(--teal-soft); color:var(--ink); padding:.1rem .4rem; min-width:5rem; border-radius:4px 4px 0 0; text-align:center; }
.fill-in.ok { border-color:var(--easy); background:var(--easy-soft); }
.fill-in.no { border-color:var(--crimson); background:var(--crimson-soft); }

/* match the following */
.match { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; margin-top:.8rem; font-family:var(--sans); font-size:.88rem; }
.match .col-h { font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.match-item { border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; background:var(--paper); margin-bottom:.5rem; }
.match-item .stem { font-weight:600; margin-bottom:.3rem; }
.match-item select { width:100%; }
.match-item.ok { border-color:var(--easy); background:var(--easy-soft); }
.match-item.no { border-color:var(--crimson); background:var(--crimson-soft); }
.bank { font-size:.85rem; } .bank .bank-row { border:1px dashed var(--line); border-radius:8px; padding:.4rem .55rem; margin-bottom:.4rem; background:var(--card); }
.bank .bk { font-family:var(--mono); font-weight:700; color:var(--teal-ink); margin-right:.4rem; }
@media (max-width:600px){ .match{ grid-template-columns:1fr; } }

/* code question: reveal-based self-check */
.codeq textarea { width:100%; min-height:8rem; font-family:var(--mono); font-size:.82rem; border:1px solid var(--line);
  border-radius:9px; padding:.7rem; background:var(--paper); color:var(--ink); resize:vertical; line-height:1.5; }
.solution { display:none; margin-top:.8rem; } .solution.show { display:block; }

/* ---- exam center specifics ------------------------------------------ */
.filters { position:sticky; top:3.4rem; z-index:20; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem;
  margin:1.4rem 0; box-shadow:var(--shadow-sm); }
.filter-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; font-family:var(--sans); font-size:.8rem; }
.chip { font-family:var(--sans); font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer; }
.chip.on { background:var(--teal); color:#fff; border-color:var(--teal); }
.scoreboard { font-family:var(--sans); font-weight:700; font-size:.85rem; color:var(--ink-soft);
  margin-left:auto; font-variant-numeric:tabular-nums; }
.scoreboard .neg { color:var(--crimson); }

/* ---- hub / cards ----------------------------------------------------- */
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin:1.6rem 0; }
.card { display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, border-color .12s; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--teal); }
.card .knum { font-family:var(--mono); font-size:.74rem; color:var(--teal-ink); font-weight:700; }
.card .ktitle { font-family:var(--sans); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; margin:.2rem 0; }
.card .kdesc { font-size:.86rem; color:var(--muted); line-height:1.45; }
.card .kmeta { font-family:var(--sans); font-size:.72rem; color:var(--faint); margin-top:.6rem; display:flex; gap:.6rem; flex-wrap:wrap; }

/* unit divider on hub */
.unit-h { font-family:var(--sans); font-weight:800; letter-spacing:-.01em; font-size:1.1rem; color:var(--ink);
  display:flex; align-items:center; gap:.6rem; margin:2.2rem 0 .2rem; }
.unit-h .ribbon { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--teal);
  padding:.15rem .5rem; border-radius:6px; }

/* ---- glossary -------------------------------------------------------- */
.gloss dt { font-family:var(--sans); font-weight:700; color:var(--teal-ink); margin-top:1.1rem; scroll-margin-top:5rem; }
.gloss dd { margin:.2rem 0 0; }
.gloss .alpha-nav { position:sticky; top:3.4rem; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px); padding:.5rem 0; font-family:var(--mono); font-size:.8rem; display:flex; flex-wrap:wrap; gap:.3rem; z-index:10; }
.gloss .alpha-nav a { text-decoration:none; padding:.1rem .4rem; border-radius:5px; color:var(--muted); }
.gloss .alpha-nav a:hover { background:var(--teal-soft); color:var(--teal-ink); }

/* ---- lesson nav (prev/next) + footer -------------------------------- */
.lesson-nav { display:flex; justify-content:space-between; gap:1rem; margin:3rem 0 1rem; font-family:var(--sans); }
.lesson-nav a { flex:1; text-decoration:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem 1rem; background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.lesson-nav a:hover { border-color:var(--teal); }
.lesson-nav .dir { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lesson-nav .ttl { font-weight:700; font-size:.95rem; }
.lesson-nav a.next { text-align:right; }

.teacher-note { font-family:var(--sans); background:var(--teal-soft); border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));
  border-radius:var(--radius); padding:1rem 1.2rem; margin:2rem 0; font-size:.9rem; color:var(--teal-ink); }
.teacher-note b { color:var(--teal-ink); }

.source-cite { font-family:var(--sans); font-size:.82rem; color:var(--muted); }
.source-cite a { color:var(--indigo); }

footer.site { border-top:1px solid var(--line); margin-top:3rem; padding:2rem 0 3rem; color:var(--muted);
  font-family:var(--sans); font-size:.8rem; }
footer.site a { color:var(--ink-soft); }

/* ---- misc ------------------------------------------------------------ */
.pill { font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:999px; background:var(--line-soft); color:var(--muted); }
.center { text-align:center; } .muted { color:var(--muted); } .small { font-size:.85rem; }
.hide { display:none !important; }
mark { background:var(--amber-soft); color:inherit; padding:.05em .25em; border-radius:4px; }
.kbd { font-family:var(--mono); font-size:.78rem; border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:.05rem .35rem; background:var(--card); }

/* ---- print ----------------------------------------------------------- */
@media print {
  body { background:#fff; color:#000; font-size:11pt; }
  .topbar,.filters,.q-actions,.btn,.icon-btn,.lesson-nav,.sim-controls,.teacher-note { display:none !important; }
  .sim,.q,.card,.callout { box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  a { color:#000; text-decoration:underline; }
  h2,h3 { break-after:avoid; }
}
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; } }