/* Shared styles for interactive lessons. Tokens first; every colour is a token so dark mode is one block. */
:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --ink: #1d232b;
  --muted: #5d6673;
  --line: #e4e1da;
  --accent: #1f6f5c;
  --accent-soft: #e3f1ec;
  --warn: #9a5b00;
  --warn-soft: #fbf0dc;
  /* Series colours for charts. Rename in your course if you want semantic names (e.g. --c-physics). */
  --s-truth: #1d232b;
  --s1: #c2571a;
  --s2: #2f62c9;
  --s3: #1f8a5c;
  --s4: #b23a6b;
  --s5: #8a8f98;
  --dot: rgba(29, 35, 43, 0.16);
  --good: #1f8a5c;
  --bad: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b;
    --surface: #1c2026;
    --ink: #e9e6df;
    --muted: #a0a7b1;
    --line: #2e343c;
    --accent: #5cc4a4;
    --accent-soft: #19302a;
    --warn: #e8b05c;
    --warn-soft: #2f2616;
    --s-truth: #e9e6df;
    --s1: #f08a4b;
    --s2: #7aa2f7;
    --s3: #5cc49a;
    --s4: #e57ba8;
    --s5: #8a8f98;
    --dot: rgba(233, 230, 223, 0.16);
    --good: #5cc49a;
    --bad: #f2867e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14171b; --surface: #1c2026; --ink: #e9e6df; --muted: #a0a7b1; --line: #2e343c;
  --accent: #5cc4a4; --accent-soft: #19302a; --warn: #e8b05c; --warn-soft: #2f2616;
  --s-truth: #e9e6df; --s1: #f08a4b; --s2: #7aa2f7; --s3: #5cc49a; --s4: #e57ba8; --s5: #8a8f98;
  --dot: rgba(233, 230, 223, 0.16); --good: #5cc49a; --bad: #f2867e; color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
main { max-width: 780px; margin: 0 auto; padding: 32px 16px 96px; }
a { color: var(--accent); }
h1 { font-size: 2.1rem; line-height: 1.2; margin: 0.2em 0 0.3em; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin: 2.4em 0 0.5em; padding-top: 0.6em; border-top: 1px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.6em 0 0.4em; }
.eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.lede { font-size: 1.15rem; color: var(--muted); }
.term { font-weight: 650; color: var(--accent); }
.callout { background: var(--accent-soft); border-radius: 10px; padding: 14px 18px; margin: 1.2em 0; }
.callout.warn { background: var(--warn-soft); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.fig {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin: 1.4em 0;
}
.fig svg { width: 100%; height: auto; display: block; }
.fig .caption { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.controls { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 10px 0 4px; }
.controls label { font-size: 0.85rem; color: var(--muted); display: block; }
.controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.controls output { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 130px; }
.stat .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 0.78rem; color: var(--muted); }
button {
  font: inherit; font-size: 0.92rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); padding: 6px 12px; cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
button[aria-pressed="true"] { outline: 2px solid var(--accent); }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }
.check { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 1em 0; }
.check p.q { font-weight: 600; margin: 0 0 8px; }
.check .opts { display: grid; gap: 6px; }
.check .opts button { text-align: left; }
.check .opts button.right { border-color: var(--good); color: var(--good); }
.check .opts button.wrong { border-color: var(--bad); color: var(--bad); }
.check .fb { font-size: 0.92rem; margin-top: 8px; min-height: 1.4em; }
.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 3em; font-size: 0.95rem; }
.done-btn { margin-top: 1.5em; }
svg text { fill: var(--muted); font-size: 11px; font-family: inherit; }
svg .axis line, svg .axis path { stroke: var(--line); }
svg .grid line { stroke: var(--line); stroke-dasharray: 2 3; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--surface); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
/* ---- Code components (code-walk, code-step, code-controls, code-review, legacy .py) ---- */
.code-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 1.2em 0; }
.code-box h3 { margin: 0 0 6px; font-size: 1rem; }
.code-box .task { font-size: 0.95rem; margin: 0 0 10px; }
.code-box .bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.code-box .hint { font-size: 0.82rem; color: var(--muted); }
.code-box pre.out {
  margin: 10px 0 0; padding: 10px 12px; background: var(--bg); border-radius: 8px; border: 1px dashed var(--line);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-x: auto; min-height: 1.5em;
}
.code-box pre.out.err { color: var(--bad); }
.code-box .fb { font-size: 0.92rem; margin-top: 8px; min-height: 1.4em; }
.code-box .fb.right { color: var(--good); }
.code-box .fb.wrong { color: var(--bad); }
/* Rendered code: numbered lines, long lines wrap with the number kept in its gutter. */
.code-lines, .walk .lines { font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border-radius: 8px; padding: 6px 0; tab-size: 4; }
.ln { display: flex; padding: 0 10px 0 0; }
.ln .n { flex: none; width: 2.6em; text-align: right; padding-right: 10px; color: var(--muted); opacity: 0.7; user-select: none; }
.ln .t { flex: 1; white-space: pre-wrap; word-break: break-word; min-width: 0; }
.ln .cmt { color: var(--muted); }
.ln .kw { color: var(--accent); font-weight: 600; }
.ln .str { color: var(--s4); }
.ln .num { color: var(--s1); }
/* Steps beside code (code-walk, code-step). Two columns; stacked on phones with each step above its lines. */
.walk { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; column-gap: 14px; margin-top: 6px; }
.walk .step { font-size: 0.9rem; line-height: 1.45; padding: 8px 4px 8px 0; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; }
.walk .step.empty { border-top: none; }
.walk .step .num { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.78rem; margin-top: 1px; }
.walk .lines { border-radius: 0; padding: 3px 0; border-left: 3px solid transparent; }
.walk .lines:nth-of-type(2) { border-radius: 8px 8px 0 0; padding-top: 6px; }
.walk .lines:last-child { border-radius: 0 0 8px 8px; padding-bottom: 6px; }
.walk .step, .walk .lines { cursor: default; }
.walk .step.hl { color: var(--accent); }
.walk .lines.hl { background: var(--accent-soft); border-left-color: var(--accent); }
.walk .step.current .num { background: var(--accent); color: var(--bg); }
.walk .step.current { font-weight: 600; }
.walk .lines.current { border-left-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 700px) {
  .walk { grid-template-columns: 1fr; }
  .walk .step { border-top: none; padding: 10px 0 4px; }
  .walk .lines, .walk .lines:nth-of-type(2), .walk .lines:last-child { border-radius: 8px; padding: 4px 0; }
}
/* Step-through panel: what changed after the step. */
.step-panel { margin-top: 10px; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); font-size: 0.92rem; }
.step-panel .step-title { font-weight: 600; }
.step-panel .why { margin: 4px 0 0; color: var(--muted); }
.step-panel .vars { display: grid; gap: 8px; margin-top: 8px; }
.step-panel .novar { color: var(--muted); font-size: 0.88rem; }
.step-panel .var { border-left: 3px solid var(--good); padding: 2px 10px; }
.step-panel .var.changed { border-left-color: var(--warn); }
.step-panel .var .name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.step-panel .var .kind { color: var(--muted); font-size: 0.82rem; margin-left: 8px; }
.step-panel .var pre { margin: 4px 0 0; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; color: var(--ink); }
.step-panel pre.out { margin-top: 8px; background: var(--surface); }
/* Controls instead of edits: the current values are marked in the code. */
.code-controls .params, .code-controls .controls { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 6px 0 10px; }
.code-controls .params label { font-size: 0.85rem; color: var(--muted); display: block; }
.code-controls .params input[type="range"] { width: 100%; accent-color: var(--accent); }
.code-controls .params output { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.code-controls .params select, .code-controls .params input[type="number"] { font: inherit; font-size: 0.92rem; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 100%; }
mark.param { background: var(--accent-soft); color: var(--accent); font-weight: 700; padding: 0 4px; border-radius: 4px; }
mark.param.active { outline: 2px solid var(--accent); }
/* Code review: pick a version, or click a line. */
.code-review .options { display: grid; gap: 10px; margin: 8px 0; }
.code-review[data-layout="side"] .options { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.code-review .option { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.code-review .option h4 { margin: 0 0 6px; font-size: 0.95rem; }
.code-review .option.right { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.code-review .option.wrong { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.code-review .option .bar { margin-top: 8px; }
.code-lines.pickable .ln { cursor: pointer; }
.code-lines.pickable .ln:hover { background: var(--accent-soft); }
.code-lines .ln.right { background: var(--accent-soft); box-shadow: inset 3px 0 var(--good); }
.code-lines .ln.wrong { background: var(--warn-soft); box-shadow: inset 3px 0 var(--bad); }
/* Legacy .py box (deprecated). */
.py .opts { display: none; }
.py textarea {
  width: 100%; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; tab-size: 4;
  white-space: pre; overflow-x: auto;
}
pre.code-show { font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
#pyStatus { position: fixed; bottom: 12px; right: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; color: var(--muted); }
/* Term cards: a .term with a glossary entry gets a dotted underline and a popover on click. */
.term.has-card { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.term.has-card:hover, .term.has-card:focus-visible { background: var(--accent-soft); border-radius: 3px; outline: none; }
.term-card {
  width: min(900px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); padding: 26px 36px 30px; font-size: 1.1rem; line-height: 1.6;
}
.tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tc-head strong { font-size: 1.7rem; }
.tc-close, .ld-close { border: none; background: none; font-size: 1.5rem; line-height: 1; padding: 2px 6px; color: var(--muted); }
.tc-close:hover, .ld-close:hover { color: var(--ink); }
.tc-back { font-size: 0.8rem; padding: 1px 8px; }
.tc-short { margin: 12px 0 4px; font-weight: 600; font-size: 1.25rem; }
.tc-analogy { margin: 0 0 10px; color: var(--muted); font-style: italic; }
.tc-layers { display: grid; gap: 14px; margin: 16px 0 12px; }
.tc-layer { margin: 0; padding-left: 36px; position: relative; }
.tc-layer .tc-n { position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 700; display: inline-grid; place-items: center; }
.tc-deeper { font-size: 0.82rem; padding: 3px 10px; margin: 0 0 6px; }
.tc-example { margin: 8px 0 12px; font-size: 1rem; }
.tc-example code { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.tc-needs { margin: 12px 0 6px; font-size: 0.95rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tc-chip { font-size: 0.92rem; padding: 3px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tc-chip:hover { outline: 1px solid var(--accent); }
.tc-taught { margin: 8px 0 18px; font-size: 0.92rem; color: var(--muted); }
.tc-flag { font-size: 1rem; width: 100%; padding: 10px 14px; background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.ld-body .tc-layers { margin-top: 6px; }

/* "I'm lost here": a quiet button at the right of every section heading. Offline it opens a modal. */
.lost-btn { float: right; font-size: 0.74rem; font-weight: 500; padding: 2px 9px; margin: 4px 0 0 12px; color: var(--muted); border-radius: 999px; }
.lost-btn:hover { color: var(--accent); border-color: var(--accent); }
.lost-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
.lost-modal {
  width: min(900px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); padding: 24px 32px 28px; font-size: 1rem; line-height: 1.55;
}
.ld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ld-head strong { font-size: 1.5rem; }
.ld-intro { color: var(--muted); font-size: 0.95rem; margin: 12px 0 16px; }
.ld-terms { padding-left: 0; margin: 0; list-style: none; }
.ld-terms li { border-top: 1px solid var(--line); }
.ld-terms details { padding: 9px 0; }
.ld-terms details.prereq summary::after { content: "prerequisite"; white-space: nowrap; font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.ld-terms summary { cursor: pointer; list-style: none; }
.ld-terms summary::-webkit-details-marker { display: none; }
.ld-terms summary::before { content: "▸"; color: var(--muted); display: inline-block; width: 14px; }
.ld-terms details[open] summary::before { content: "▾"; }
.ld-name { font-weight: 650; color: var(--accent); }
.ld-short { color: var(--muted); font-size: 0.95rem; }
.ld-body { padding: 4px 0 6px 14px; }
.ld-body .tc-short { display: none; }
.lost-list { list-style: none; padding: 0; margin: 0; }
.lost-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.ll-term { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 8px; font-size: 0.8rem; }
.cm-hub-msg { flex-basis: 100%; color: var(--muted); }
.muted { color: var(--muted); }
body.lost-open { overflow: hidden; }

/* Live comments. Wide: margin notes beside the text column (Sidenote style). Narrow: an overlay panel. */
/* The text column stays centred. Overlay mode (no room beside the text): only the open card or the
   draft shows, floating over the right of the text; closed threads open from their marks and badges. */
body.cm-overlay .cm-margin .cm-card.collapsed { display: none; }
body.cm-overlay .cm-margin .cm-card { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16); }
.cm-margin { position: absolute; top: 0; display: none; z-index: 30; }
body.cm-wide .cm-margin { display: block; }
.cm-margin .cm-card { position: absolute; left: 0; right: 0; transition: top 0.18s ease; pointer-events: auto; }
/* The column itself takes no clicks: in overlay mode it lies over the text. */
.cm-margin { pointer-events: none; }
.cm-pill { position: fixed; top: 10px; right: 14px; z-index: 39; display: none; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.76rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
body.cm-wide .cm-pill { display: flex; }
.cm-resolved-toggle { font-size: 0.74rem; padding: 1px 8px; border-radius: 999px; }
.cm-rail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; z-index: 40; overflow-y: auto; display: none;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12); padding: 12px 14px 40px; font-size: 0.88rem; line-height: 1.45;
}
body.cm-open:not(.cm-wide) .cm-rail { display: block; }
.cm-fab { position: fixed; right: 14px; bottom: 14px; z-index: 39; border-radius: 999px; padding: 8px 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); font-size: 0.95rem; }
body.cm-open .cm-fab, body.cm-wide .cm-fab { display: none; }
.cm-fab .cm-count:empty { display: none; }
.cm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cm-head strong { font-size: 0.95rem; }
.cm-head .cm-count { color: var(--muted); font-weight: 500; }
.cm-head .cm-count:empty { display: none; }
.cm-status { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.cm-head .cm-status { margin-left: auto; }
.cm-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); margin-right: 5px; vertical-align: 1px; }
.cm-status.on { color: var(--good); }
.cm-status.on::before { background: var(--good); }
.cm-close { border: none; background: none; font-size: 1.2rem; line-height: 1; padding: 2px 4px; color: var(--muted); }
.cm-empty { color: var(--muted); font-size: 0.85rem; }
/* Cards: collapsed = anchor line + last message, one card open at a time. */
.cm-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0 0 10px; font-size: 0.86rem; line-height: 1.45; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); }
.cm-card.collapsed { cursor: pointer; }
.cm-card.collapsed:hover { border-color: var(--accent); }
.cm-card.open { border-color: var(--accent); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
.cm-card.draft { background: var(--accent-soft); }
.cm-card.st-resolved { opacity: 0.6; }
.cm-card-head { padding: 8px 10px 8px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; cursor: pointer; }
.cm-card.draft .cm-card-head { cursor: default; }
.cm-card.open .cm-card-head { border-bottom: 1px solid var(--line); }
.cm-anchor { font-size: 0.76rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; }
.cm-sec { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cm-quote { font-style: italic; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cm-card.open .cm-quote, .cm-card.open .cm-sec { white-space: normal; }
.cm-state { flex-basis: 100%; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.cm-orphan { flex-basis: 100%; color: var(--warn); font-size: 0.72rem; }
.cm-head-right { display: flex; gap: 6px; align-items: center; align-self: start; }
.cm-head-right .cm-resolve, .cm-head-right .cm-reopen { font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; color: var(--muted); }
.cm-head-right .cm-resolve:hover, .cm-head-right .cm-reopen:hover { color: var(--accent); border-color: var(--accent); }
.cm-n { font-size: 0.7rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.cm-dot.waiting { background: var(--warn); }
.cm-dot.typing { background: var(--accent); animation: cm-pulse 1.2s infinite ease-in-out; }
@keyframes cm-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.cm-snippet { grid-column: 1 / 3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-snip-who { color: var(--muted); font-weight: 600; }
.cm-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; }
.cm-card.open { display: flex; flex-direction: column; max-height: min(70vh, 640px); }
.cm-card.open .cm-card-head { flex: none; }
.cm-card.open .cm-card-body { flex: 1 1 auto; min-height: 0; }
.cm-msgs { display: grid; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; align-content: start; padding-right: 2px; }
.cm-card.open .cm-reply, .cm-card.open .cm-actions, .cm-card.open .cm-typing, .cm-card.open .cm-eyes { flex: none; }
.cm-unfold { font-size: 0.76rem; padding: 3px 10px; color: var(--muted); border-style: dashed; justify-self: start; }
.cm-msg { padding: 6px 9px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.cm-msg.claude { background: var(--accent-soft); border-color: transparent; }
.cm-msg p { margin: 0 0 6px; }
.cm-msg p:last-child, .cm-msg ul:last-child { margin-bottom: 0; }
.cm-msg ul { margin: 0 0 6px; padding-left: 18px; }
.cm-msg code { font-size: 0.84em; background: var(--surface); padding: 0 4px; border-radius: 4px; }
.cm-who { display: block; font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.cm-eyes { font-size: 0.76rem; color: var(--muted); margin-top: 6px; }
/* Typing indicator: three dots that pulse in turn while a session works on a reply. */
.cm-typing { display: inline-flex; gap: 4px; align-items: center; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.cm-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: cm-dot 1.2s infinite ease-in-out; }
.cm-typing span:nth-child(2) { animation-delay: 0.2s; }
.cm-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cm-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cm-typing span, .cm-dot.typing { animation: none; opacity: 0.8; } .cm-margin .cm-card { transition: none; } }
.cm-reply { width: 100%; font: inherit; font-size: 0.86rem; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); resize: vertical; }
.cm-card.draft .cm-reply { margin-top: 0; background: var(--surface); }
.cm-actions { display: flex; gap: 6px; margin-top: 6px; }
.cm-actions button { font-size: 0.8rem; padding: 4px 10px; }
mark.cm-mark { background: var(--warn-soft); color: inherit; border-bottom: 2px solid var(--warn); cursor: pointer; padding: 0; }
mark.cm-mark.active { background: var(--accent-soft); border-bottom-color: var(--accent); }
.cm-bubble { position: absolute; z-index: 45; font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); background: var(--surface); }
.cm-target { position: relative; }
.cm-target-btn { position: absolute; top: 6px; right: 6px; font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; opacity: 0; transition: opacity 0.15s; }
.cm-target:hover .cm-target-btn, .cm-target-btn:focus-visible { opacity: 1; }
.cm-badge { position: absolute; top: 6px; right: 6px; font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.cm-target:hover .cm-badge { right: 96px; }
.cm-has.active { outline: 2px solid var(--accent); }
@media (max-width: 700px) {
  .lost-btn { float: none; display: block; margin: 6px 0 0; width: max-content; }
  .cm-rail { width: 100vw; }
}

/* Chalkwork Labs lesson theme, styling pass 2026-10-13. Loaded after common.css, so it only overrides.
   The block gallery in mockups/2026-10-13 Lesson Blocks/ shows every block in this file.
   Three surfaces, one meaning each:
     plain page    = the lesson speaks (read)
     grey panel    = your turn (do)
     hairline card = from somewhere else (a post, a link, a file, a tutor reply)
   Pink marks things you can operate. It never means "wrong", and it stays off fixed parts of a diagram
   or chart: a series, a node, a region. Those use --s1 to --s5. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #f5f5f3;
  --ink: #141414;
  --t1: rgba(20,20,20,.92);
  --t2: rgba(20,20,20,.64);
  --t3: rgba(20,20,20,.40);
  --muted: rgba(20,20,20,.64);
  --line: rgba(20,20,20,.12);
  --line-strong: rgba(20,20,20,.24);
  --accent: #ff2d87;
  --accent-ink: #d4106a;
  --accent-soft: rgba(255,45,135,.10);
  --good: #17734c;
  --good-soft: rgba(23,115,76,.09);
  --bad: #b42318;
  --bad-soft: rgba(180,35,24,.09);
  --warn: #9a5b00;
  --warn-soft: rgba(154,91,0,.09);
  --s-truth: #141414;
  --s1: #ff2d87;
  --s2: #2f62c9;
  --s3: #1f8a5c;
  --s4: #7a4fd0;
  --s5: #8a8f98;
  --dot: rgba(20,20,20,.18);
  --font: Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Spacing scale. Every gap on the page is one of these. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 96px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --tint-pink: #fff0f6; --tint-amber: #fbf3e4; --tint-blue: #eef3fc; --tint-grey: #f1f1ee; --blue-ink: #2450a8;
  --measure: 680px;
  color-scheme: light;
}
/* Lessons are light only, like the site. These two blocks cancel the dark tokens in common.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #ffffff; --surface: #ffffff; --ink: #141414; --muted: rgba(20,20,20,.64); --line: rgba(20,20,20,.12);
    --accent: #ff2d87; --accent-soft: rgba(255,45,135,.10); --warn: #9a5b00; --warn-soft: rgba(154,91,0,.09);
    --s-truth: #141414; --s1: #ff2d87; --s2: #2f62c9; --s3: #1f8a5c; --s4: #7a4fd0; --s5: #8a8f98;
    --dot: rgba(20,20,20,.18); --good: #17734c; --bad: #b42318; color-scheme: light;
  }
}
:root[data-theme="dark"] {
  --bg: #ffffff; --surface: #ffffff; --ink: #141414; --muted: rgba(20,20,20,.64); --line: rgba(20,20,20,.12);
  --accent: #ff2d87; --accent-soft: rgba(255,45,135,.10); --warn: #9a5b00; --warn-soft: rgba(154,91,0,.09);
  --s-truth: #141414; --s1: #ff2d87; --s2: #2f62c9; --s3: #1f8a5c; --s4: #7a4fd0; --s5: #8a8f98;
  --dot: rgba(20,20,20,.18); --good: #17734c; --bad: #b42318; color-scheme: light;
}

/* ---------- Page and type ---------- */
html { scroll-padding-top: 80px; }
body { font: 18px/1.6 var(--font); color: var(--t1); background: var(--bg); -webkit-font-smoothing: antialiased; }
main { max-width: calc(var(--measure) + 48px); padding: 56px 24px 120px; }
p { margin: 0 0 var(--sp-5); text-wrap: pretty; }
a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
strong, b { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; color: var(--ink); }
h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 var(--sp-5); }
h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; margin: var(--sp-8) 0 var(--sp-5); padding: 0; border: 0; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; margin: var(--sp-7) 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.25em; }
li { margin: 0 0 var(--sp-2); padding-left: 4px; }
li::marker { color: var(--t3); }
ol > li::marker { color: var(--t2); font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

/* Small text has two sizes only: 15px (captions, notes, helper text) and 13px (labels). */
.label, .kicker { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--t2); margin: 0 0 var(--sp-2); letter-spacing: 0; }

/* ---------- Lesson bar (course progress) ---------- */
.lessonbar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.lessonbar .in { width: min(1040px, calc(100% - 48px)); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-5); height: 56px; font-size: 15px; }
.lessonbar .brand { font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.lessonbar .brand::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 3px; }
.lessonbar .where { color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.lessonbar .where b { color: var(--t1); font-weight: 500; }
.lessonbar .prog { display: flex; align-items: center; gap: var(--sp-3); color: var(--t2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lessonbar .prog i { display: block; width: 120px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.lessonbar .prog i::after { content: ""; display: block; height: 100%; width: var(--p, 25%); background: var(--ink); border-radius: 2px; }
@media (max-width: 640px) { .lessonbar .in { width: calc(100% - 32px); gap: var(--sp-3); } .lessonbar .prog i { width: 56px; } .lessonbar .where span { display: none; } }

/* ---------- Lesson header ---------- */
.eyebrow { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--t2); margin: 0 0 var(--sp-4); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--t1); }
.lede { font-size: 21px; line-height: 1.5; color: var(--t2); margin: 0 0 var(--sp-6); }
.goals { margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--line); }
.goals .label { margin-bottom: var(--sp-3); }
.goals ul { margin: 0; }
.goals li:last-child { margin-bottom: 0; }

/* ---------- Section heading and "I'm lost here" ---------- */
.lost-btn { float: right; font-size: 13px; font-weight: 500; letter-spacing: 0; padding: 5px 12px; margin: 5px 0 0 var(--sp-4); background: transparent; border: 1px solid var(--line); color: var(--t2); border-radius: 999px; }
.lost-btn:hover { color: var(--t1); border-color: var(--ink); }

/* ---------- Inline ---------- */
.term { color: var(--t1); font-weight: 500; }
.term.has-card { cursor: help; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.term.has-card:hover, .term.has-card:focus-visible { background: var(--accent-soft); border-radius: 3px; outline: 0; }
code { font-family: var(--mono); font-size: .86em; background: var(--panel); border: 0; border-radius: 5px; padding: 2px 6px; }
mark { background: var(--accent-soft); color: inherit; padding: 1px 3px; border-radius: 3px; }

/* ---------- Emphasis in prose: one geometry (2px rule, 20px indent), three roles ---------- */
.callout, .note, .mistake { background: none; border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; padding: 2px 0 2px var(--sp-5); margin: var(--sp-7) 0; font-size: inherit; }
.callout > :last-child, .note > :last-child, .mistake > :last-child { margin-bottom: 0; }
.callout { border-left-color: var(--accent); }
.callout p:not(.label) { color: var(--ink); }
.mistake, .callout.warn { border-left-color: var(--warn); background: none; }
.mistake .label { color: var(--warn); }
.note { color: var(--t2); font-size: 15px; line-height: 1.55; }
.note p { margin-bottom: var(--sp-2); }

/* Quote: larger text, no rule, attribution below. */
.quote, blockquote { margin: var(--sp-7) 0; padding: 0; border: 0; font-style: normal; color: var(--ink); font-size: 24px; line-height: 1.38; letter-spacing: -.015em; font-weight: 400; text-wrap: pretty; }
.quote::before { content: "“"; display: block; font-size: 40px; line-height: .6; height: 20px; color: var(--accent); margin-bottom: var(--sp-2); font-weight: 600; }
.quote .who { display: block; font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--t2); margin-top: var(--sp-4); }

/* Callouts are filled (decided 2026-10-13): one tint per role. */
:is(.callout, .mistake, .note, .quote) { border-left: 0; border-radius: var(--r); padding: var(--sp-5) 24px; }
.callout { background: var(--tint-pink); }
.callout .label { color: var(--accent-ink); }
:is(.mistake, .callout.warn) { background: var(--tint-amber); }
.note { background: var(--tint-blue); color: var(--t1); }
.note b:first-child { color: var(--blue-ink); }
.quote { background: var(--tint-grey); font-size: 21px; line-height: 1.45; letter-spacing: -.01em; }
.quote::before { font-size: 32px; height: 16px; }

/* Formula */
.eq { font-family: var(--font); background: none; border: 0; border-radius: 0; padding: 0; margin: var(--sp-7) 0; white-space: normal; overflow: visible; }
.eq .f { display: block; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); overflow-x: auto; white-space: nowrap; padding-bottom: 2px; font-variant-numeric: tabular-nums; }
.eq .f i { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.eq dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-4) 0 0; font-size: 15px; color: var(--t2); }
.eq dt { font-family: Georgia, serif; font-style: italic; color: var(--t1); }
.eq dd { margin: 0; }

/* ---------- Tables ---------- */
.table-wrap { margin: var(--sp-7) 0; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; text-align: left; font-size: 15px; color: var(--t2); padding-top: var(--sp-3); }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
th { font-size: 13px; font-weight: 500; color: var(--t2); border-bottom-color: var(--line-strong); padding-top: 0; padding-bottom: 10px; }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 600; border-top: 1px solid var(--ink); border-bottom: 0; }

/* ---------- Steps (a fixed procedure) ---------- */
.steps-list { list-style: none; counter-reset: st; padding: 0; margin: var(--sp-7) 0; }
.steps-list > li { counter-increment: st; position: relative; padding: 0 0 var(--sp-5) 48px; margin: 0; }
.steps-list > li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.steps-list > li::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: 6px; width: 1px; background: var(--line); }
.steps-list > li:last-child { padding-bottom: 0; }
.steps-list > li:last-child::after { display: none; }
.steps-list b:first-child { display: block; font-weight: 600; color: var(--ink); }

/* ---------- Compare (two columns, no boxes) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; margin: var(--sp-7) 0; }
.compare > div { padding: 0 var(--sp-6) 0 0; }
.compare > div + div { padding: 0 0 0 var(--sp-6); border-left: 1px solid var(--line); }
.compare p:last-child, .compare ul:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } .compare > div { padding: 0 0 var(--sp-5); } .compare > div + div { padding: var(--sp-5) 0 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Key numbers ---------- */
/* A row of big numbers. It assumes a label of a few words: a sentence-long one wraps, the row goes
   ragged and the columns stop lining up. Shorten the label, or use .stats.list below. */
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); margin: var(--sp-7) 0; padding: 0; border: 0; }
.stat { background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.stat .v { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 13px; line-height: 1.4; color: var(--t2); margin-top: var(--sp-1); font-weight: 500; }
/* Same numbers as a two-column list, for labels that have to be sentences. It holds at any label
   length and at phone width. Each .stat must hold exactly .v and .k: display:contents drops the box. */
.stats.list { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); align-items: baseline; }
.stats.list .stat { display: contents; }
.stats.list .stat .v { font-size: 26px; text-align: right; }
.stats.list .stat .k { font-size: 15px; margin: 0; }

/* ---------- Media: bare, no border, caption below ---------- */
.fig { background: none; border: 0; border-radius: 0; padding: 0; margin: var(--sp-7) 0; }
/* A chart you only look at is the lesson still speaking, so it cannot take the grey "your turn" panel.
   Two hairlines set it off from the prose instead, adding no box and no fill. The rule asks for a bare
   chart: a photograph, a table and a video frame already carry their own edges. */
.fig:not(.live):has(> svg:not(.art)) { padding: var(--sp-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fig:not(.live):has(> svg:not(.art)) + .fig:not(.live):has(> svg:not(.art)) { margin-top: calc(var(--sp-7) * -1); border-top: 0; }
.fig > img, .fig > svg.art, .fig .frame { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--panel); }
.fig .caption, figcaption { font-size: 15px; line-height: 1.5; color: var(--t2); margin-top: var(--sp-3); }
.fig .caption b { color: var(--t1); font-weight: 500; }
svg text { font-family: var(--font); font-size: 12px; fill: var(--t2); }
svg .grid line { stroke: var(--line); stroke-dasharray: none; }
svg .axis line, svg .axis path { stroke: var(--line-strong); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: 13px; font-weight: 500; color: var(--t2); margin: 0 0 var(--sp-3); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }

/* Video and audio */
.video .frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video .frame svg { width: 100%; height: 100%; display: block; }
.video .play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 0; padding: 0; box-shadow: 0 8px 30px -8px rgba(20,20,20,.35); display: grid; place-items: center; }
.video .play::after { content: ""; border-left: 20px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.video .play:hover { transform: scale(1.04); }
.video .dur { position: absolute; right: 12px; bottom: 12px; background: rgba(20,20,20,.82); color: #fff; font-size: 13px; font-weight: 500; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.video.playing .play, .video.playing .dur { display: none; }
.chapters { list-style: none; padding: 0; margin: var(--sp-4) 0 0; font-size: 15px; }
.chapters li { display: flex; gap: var(--sp-4); padding: 9px 0; margin: 0; border-top: 1px solid var(--line); }
.chapters li:last-child { border-bottom: 1px solid var(--line); }
.chapters time { color: var(--t2); font-variant-numeric: tabular-nums; min-width: 40px; }
.chapters a { text-decoration: none; }
.chapters a:hover { text-decoration: underline; }
.audio { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-7) 0; }
.audio .pp { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); border: 0; padding: 0; display: grid; place-items: center; }
.audio .pp::after { content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.audio.on .pp::after { border: 0; width: 4px; height: 14px; margin: 0; box-shadow: -4px 0 0 #fff inset, 0 0 0 transparent; background: transparent; border-left: 4px solid #fff; border-right: 4px solid #fff; width: 14px; box-sizing: border-box; }
.audio .meta { flex: 1; min-width: 0; }
.audio .meta b { display: block; font-weight: 500; font-size: 16px; }
.audio .wave { display: block; width: 100%; height: 28px; margin-top: var(--sp-1); }
.audio .wave rect { fill: var(--line-strong); }
.audio .wave rect.done { fill: var(--ink); }
.audio time { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }

/* ---------- Hairline cards: content from somewhere else ---------- */
.card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5) 24px; margin: var(--sp-7) 0; text-decoration: none; }
.card > :last-child { margin-bottom: 0; }
a.card:hover { border-color: var(--ink); }
.card .from { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; font-weight: 500; color: var(--t2); margin-bottom: var(--sp-3); }
.card .from .av { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); flex: none; display: grid; place-items: center; font-weight: 600; color: var(--t2); font-size: 14px; }
.card .from b { display: block; color: var(--t1); font-weight: 600; font-size: 15px; }
.card .from .src { margin-left: auto; }
.post p { font-size: 18px; }
.post .foot { font-size: 13px; color: var(--t2); margin: 0; }
.linkcard { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-5); align-items: center; }
.linkcard b { font-size: 17px; font-weight: 600; color: var(--ink); }
.linkcard span { grid-column: 1; font-size: 15px; color: var(--t2); line-height: 1.45; }
.linkcard small { grid-column: 1; font-size: 13px; color: var(--t2); margin-top: var(--sp-1); }
.linkcard .go { grid-column: 2; grid-row: 1 / span 3; font-size: 13px; font-weight: 500; color: var(--t1); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
a.linkcard:hover .go { border-color: var(--ink); }
.embed { padding: 0; overflow: hidden; }
.embed .frame { aspect-ratio: 16 / 9; background: var(--panel); display: grid; place-items: center; border-radius: 0; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed .bar { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 12px 20px; font-size: 13px; color: var(--t2); border-top: 1px solid var(--line); }
.ask { display: grid; grid-template-columns: 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5) 24px; margin: var(--sp-7) 0; font-size: 17px; }
.ask .who { font-size: 13px; font-weight: 500; color: var(--t2); text-transform: none; letter-spacing: 0; padding: 0; margin-bottom: var(--sp-1); }
.ask .who.t { color: var(--t2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ask .tutor { background: none; padding: 0; border-radius: 0; }
.ask .src { display: block; font-size: 13px; color: var(--t2); margin-top: var(--sp-2); }

/* ---------- Buttons and form controls ---------- */
button { font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--t1); padding: 9px 18px; cursor: pointer; transition: background 140ms, border-color 140ms, transform 140ms; }
button:hover { border-color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:hover { background: #333; border-color: #333; }
button:disabled { opacity: .4; cursor: default; }
button[aria-pressed="true"] { outline: 0; border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
button[aria-pressed="false"] { color: var(--t2); }
button[aria-pressed="false"] .swatch { opacity: .35; }
.toggles { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.toggles button { font-size: 13px; padding: 6px 13px; }
select, input[type="number"], input[type="text"], textarea { font: inherit; font-size: 16px; color: var(--t1); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 10px 12px; max-width: 100%; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input[type="range"] { width: 100%; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; accent-color: var(--accent); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); margin-top: -8px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(20,20,20,.2); }
input[type="range"]::-moz-range-track { height: 4px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--accent); }
/* Cell alignment (labels at the top, sliders and menus on one line) is set at the end of this file. */
.controls, .code-controls .params { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4) var(--sp-6); margin: 0 0 var(--sp-5); align-items: start; }
.controls label, .code-controls .params label { display: block; font-size: 13px; font-weight: 500; color: var(--t2); }
/* Name left, value right: only when the author wraps both in a span or a .row. A span that holds just
   the name ("<span>Hub height</span>: <output>80</output>") must stay inline, or the value drops a line. */
.controls label .row, .controls label > span:first-child:has(output) { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
/* The value sits in the text, not floated right: a float strands anything written after it, so
   "Hub height: <output>80</output> m" reads "Hub height: m ... 80". */
.controls output, .code-controls .params output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.controls select { width: 100%; font-size: 15px; padding-top: 6px; padding-bottom: 6px; border-radius: var(--r-sm); }

/* ---------- Panels: your turn ---------- */
.panel, .fig.live, .check, .branch, .code-box, .ex, .cards, .order, .numeric, .multi, .reflect {
  background: var(--panel); border: 0; border-radius: var(--r-lg); padding: var(--sp-6); margin: var(--sp-7) 0;
}
.kicker { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.kicker .meta { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 400; }
.panel > :last-child, .fig.live > :last-child, .check > :last-child, .ex > :last-child { margin-bottom: 0; }
.fig.live svg { background: #fff; border-radius: var(--r); display: block; width: 100%; height: auto; }
/* Readout strip (chosen 2026-10-17, mockups/2026-10-17 Readouts/): the outputs of a live graphic sit in
   one white card of equal ruled cells, label above value, so words, times and numbers all read the same.
   Markup stays .stat > .v + .k; the label is moved above by order. A .stat.status cell (tone .good, .warn or .bad)
   is the result: it goes first and takes a full tinted row. Inside a .v, .qual is a small qualifier
   ("on posting") and .v.none an empty value ("none sent"). The -1px margins hide the outer rules. */
.fig.live .stats { display: flex; flex-wrap: wrap; gap: 0; margin: var(--sp-4) 0 0; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.fig.live .stat { flex: 1 1 150px; display: flex; flex-direction: column; margin: 0 -1px -1px 0; padding: 12px 16px; box-shadow: inset -1px 0 var(--line), inset 0 -1px var(--line); }
.fig.live .stat .k { order: -1; margin: 0 0 var(--sp-1); }
.fig.live .stat .v { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.fig.live .stat .v .qual { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--t2); }
.fig.live .stat .v.none { color: var(--t3); font-weight: 400; }
.fig.live .stat.status { --tone: var(--t2); flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-3); background: color-mix(in srgb, var(--tone) 9%, var(--surface)); box-shadow: inset 3px 0 var(--tone), inset 0 -1px var(--line); }
.fig.live .stat.status.good { --tone: var(--good); }
.fig.live .stat.status.bad { --tone: var(--bad); }
.fig.live .stat.status.warn { --tone: var(--warn); }   /* a caution, such as a limit that is close: amber, not the red of a fail */
.fig.live .stat.status .k { order: 0; margin: 0; font-size: 15px; }
.fig.live .stat.status .v { font-size: 18px; color: var(--tone); }
/* On a phone three cells cannot share a row, and two-plus-one leaves a cell alone beside a gap.
   A strip of exactly three plain cells stacks into one column instead (18 Oct 2026). */
@media (max-width: 480px) {
  .fig.live .stats:has(> .stat:not(.status) ~ .stat:not(.status) ~ .stat:not(.status)):not(:has(> .stat:not(.status) ~ .stat:not(.status) ~ .stat:not(.status) ~ .stat:not(.status))) > .stat { flex-basis: 100%; }
}
.fig.live .caption { margin-top: var(--sp-4); }
div.verdict:not(.v) { margin: var(--sp-4) 0 0; padding: 0 0 0 var(--sp-4); border: 0; border-left: 2px solid var(--good); border-radius: 0; background: none; font-size: 16px; }
div.verdict.none { border-left-color: var(--bad); background: none; }
div.verdict:not(.v) p { margin: 0; }

/* Questions: one look for quick check, multi-select, branching case */
.q, .check p.q, .bnode .q { font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--sp-4); }
.facts { font-size: 17px; margin: 0 0 var(--sp-4); }
.opts, .check .opts, .bnode .opts { display: grid; gap: var(--sp-2); }
.opts button, .check .opts button, .bnode .opts button {
  position: relative; text-align: left; font-size: 17px; font-weight: 400; line-height: 1.4; color: var(--t1); background: #fff;
  border: 1px solid transparent; border-radius: var(--r); padding: 14px 44px 14px 16px; box-shadow: 0 0 0 1px var(--line);
}
.opts button:hover { box-shadow: 0 0 0 1px var(--ink); border-color: transparent; }
.opts button.right, .check .opts button.right, .bnode .opts button.right { box-shadow: 0 0 0 2px var(--good); border-color: transparent; background: #fff; color: var(--t1); }
.opts button.wrong, .check .opts button.wrong, .bnode .opts button.wrong { box-shadow: 0 0 0 2px var(--bad); border-color: transparent; background: #fff; color: var(--t1); }
.opts button.right::after, .opts button.wrong::after { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 600; font-size: 16px; }
.opts button.right::after { content: "✓"; color: var(--good); }
.opts button.wrong::after { content: "✕"; color: var(--bad); }
.opts button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.multi .opts button.right { box-shadow: 0 0 0 2px var(--good); }
.multi .opts button.wrong { box-shadow: 0 0 0 2px var(--bad); }
.multi .opts button { padding-left: 46px; }
.multi .opts button::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 5px; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.multi .opts button[aria-checked="true"]::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.fb, .check .fb, .bnode .fb, .code-box .fb { font-size: 16px; line-height: 1.5; color: var(--t1); margin: var(--sp-4) 0 0; padding-left: var(--sp-4); border-left: 2px solid var(--line-strong); min-height: 0; }
.fb:empty { display: none; }
.fb.right, .check:has(.opts button.right) .fb, .code-box .fb.right, .bnode .fb.right { border-left-color: var(--good); color: var(--t1); }
.fb.wrong, .check:has(.opts button.wrong) .fb, .code-box .fb.wrong, .bnode .fb.wrong { border-left-color: var(--bad); color: var(--t1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); }
.actions .hint { font-size: 13px; color: var(--t2); margin-left: var(--sp-2); }

/* Branching case */
.branch { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.bnode { padding: var(--sp-5) 0 0; margin-top: var(--sp-5); border-top: 1px solid var(--line); }
.bnode:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.bnode[hidden], .branch .end[hidden] { display: none; }
.branch .end { padding: var(--sp-5) 0 0; margin-top: var(--sp-5); border-top: 1px solid var(--line); font-size: 16px; }

/* Numeric answer */
.numeric .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.numeric input { width: 140px; font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 10px 14px; }
.numeric .unit { color: var(--t2); margin-right: var(--sp-2); }

/* Order the steps */
.order ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); counter-reset: o; }
.order li { counter-increment: o; display: flex; align-items: center; gap: var(--sp-3); background: #fff; border-radius: var(--r); padding: 10px 10px 10px 16px; margin: 0; box-shadow: 0 0 0 1px var(--line); font-size: 17px; }
.order li::before { content: counter(o); font-size: 13px; font-weight: 600; color: var(--t2); width: 14px; font-variant-numeric: tabular-nums; }
.order li span { flex: 1; }
.order li button { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 14px; border-color: var(--line); }
.order li.right { box-shadow: 0 0 0 2px var(--good); }
.order li.wrong { box-shadow: 0 0 0 2px var(--bad); }

/* Worked example with reveal */
.ex ol { list-style: none; counter-reset: ex; padding: 0; margin: 0; }
/* One left edge: step label, title, text and working all start at the same x. No number circles. */
.ex ol > li { counter-increment: ex; padding: var(--sp-5) 0 0; margin: var(--sp-5) 0 0; border-top: 1px solid var(--line); }
.ex ol > li:first-child { border-top: 0; padding-top: 0; margin-top: var(--sp-1); }
.ex ol > li::before { content: "Step " counter(ex); display: block; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--t2); margin-bottom: var(--sp-1); }
.ex .actions { margin-top: var(--sp-6); }
.ex ol > li[hidden] { display: none; }
.ex li b:first-child { display: block; color: var(--ink); }
.ex .work { display: block; font-family: var(--mono); font-size: 15px; background: #fff; border-radius: var(--r); padding: 12px 16px; margin-top: var(--sp-3); font-variant-numeric: tabular-nums; overflow-x: auto; white-space: pre; }

/* Flashcards */
.cards .face { background: #fff; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); min-height: 180px; display: grid; place-items: center; text-align: center; padding: var(--sp-6); font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.cards .face.back { font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--t1); }

/* Reflect */
.reflect .model { background: #fff; border-radius: var(--r); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4); font-size: 17px; }
.reflect .model[hidden] { display: none; }
.reflect .model p:last-child { margin-bottom: 0; }

/* Reveal (hint, answer): inline disclosure, no surface */
details.reveal { margin: var(--sp-5) 0; }
details.reveal > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 15px; font-weight: 500; color: var(--t1); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 16px 7px 12px; }
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; font-size: 17px; line-height: 1; color: var(--t2); }
details.reveal[open] > summary::before { content: "−"; }
details.reveal > summary:hover { border-color: var(--ink); }
details.reveal > div { margin-top: var(--sp-4); padding-left: var(--sp-5); border-left: 2px solid var(--line-strong); }
details.reveal > div > :last-child { margin-bottom: 0; }

/* ---------- Code ---------- */
pre.snippet, .code-lines, .walk .lines { font: 14px/1.65 var(--mono); tab-size: 4; }
pre.snippet { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4) var(--sp-5); margin: var(--sp-7) 0 var(--sp-3); overflow-x: auto; }
pre.snippet + .caption { font-size: 15px; color: var(--t2); margin: 0 0 var(--sp-7); }
.kw { color: var(--ink); font-weight: 600; }
.str { color: var(--good); }
.cmt { color: var(--t2); }
.ln .kw { color: var(--ink); font-weight: 600; }
.ln .str { color: var(--good); }
.ln .num { color: var(--accent-ink); }
.ln .cmt { color: var(--t2); }
.ln .n { color: var(--t3); opacity: 1; }
.code-box h3 { margin: 0 0 var(--sp-2); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.code-box .task { font-size: 16px; color: var(--t2); margin: 0 0 var(--sp-4); }
.code-lines, .walk .lines { background: #fff; border-radius: var(--r); padding: 10px 0; }
.walk { column-gap: var(--sp-4); margin-top: 0; }
.walk .lines { border-radius: 0; padding: 4px 0; border-left: 2px solid transparent; }
.walk .lines:nth-of-type(2) { border-radius: var(--r) var(--r) 0 0; padding-top: 10px; }
.walk .lines:last-child { border-radius: 0 0 var(--r) var(--r); padding-bottom: 10px; }
.walk .step { font-size: 15px; line-height: 1.45; padding: 6px 4px 6px 0; border-top: 0; gap: var(--sp-3); }
.walk .step .num { width: 22px; height: 22px; background: #fff; color: var(--t1); font-weight: 600; font-size: 12px; box-shadow: 0 0 0 1px var(--line); }
.walk .step.hl { color: var(--ink); }
.walk .lines.hl, .walk .lines.current { background: #fff; border-left-color: var(--accent); box-shadow: inset 0 0 0 999px var(--accent-soft); }
.walk .step.current .num { background: var(--ink); color: #fff; box-shadow: none; }
.walk .step.current { font-weight: 500; }
.code-box .bar { gap: var(--sp-2); margin-top: var(--sp-4); }
.code-box .hint { font-size: 13px; color: var(--t2); margin-left: var(--sp-2); }
.code-box pre.out, .step-panel { background: #fff; border: 0; border-radius: var(--r); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); font: 14px/1.6 var(--mono); color: var(--t1); }
.code-box pre.out.err { color: var(--bad); }
.step-panel { font: inherit; font-size: 15px; }
.step-panel .var { border-left: 2px solid var(--good); }
.step-panel .var.changed { border-left-color: var(--warn); }
.step-panel pre.out { background: var(--panel); }
mark.param { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; padding: 1px 5px; border-radius: 4px; }
mark.param.active { outline: 2px solid var(--accent); }
.code-review .option { background: transparent; border: 0; border-radius: 0; padding: 0; }
.code-review .option h4 { font-size: 13px; font-weight: 500; color: var(--t2); margin: 0 0 var(--sp-2); }
.code-review .option.right .code-lines { box-shadow: 0 0 0 2px var(--good); }
.code-review .option.wrong .code-lines { box-shadow: 0 0 0 2px var(--bad); }
.code-review .option.right, .code-review .option.wrong { border: 0; box-shadow: none; }
.code-review .options { gap: var(--sp-4); }
.code-lines.pickable .ln:hover { background: var(--accent-soft); }
.code-lines .ln.right { background: var(--good-soft); box-shadow: inset 2px 0 var(--good); }
.code-lines .ln.wrong { background: var(--bad-soft); box-shadow: inset 2px 0 var(--bad); }
details.code-fold { margin: var(--sp-7) 0; }
details.code-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 15px; font-weight: 500; border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 16px 7px 12px; }
details.code-fold > summary::-webkit-details-marker { display: none; }
details.code-fold > summary::before { content: "+"; width: 16px; text-align: center; font-size: 17px; line-height: 1; color: var(--t2); }
details.code-fold[open] > summary::before { content: "−"; }
details.code-fold > .code-box { margin: var(--sp-4) 0 0; }
#pyStatus { font-size: 13px; color: var(--t2); border-color: var(--line); background: #fff; }

/* ---------- End of lesson ---------- */
.label:has(+ ul), .label:has(+ ol) { margin-bottom: var(--sp-3); }
.remember { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.remember li { padding: var(--sp-3) 0; margin: 0; border-top: 1px solid var(--line); }
.remember li:last-child { border-bottom: 1px solid var(--line); }
.sources { font-size: 15px; line-height: 1.5; color: var(--t2); }
.sources li { margin-bottom: var(--sp-2); }
.sources a { color: var(--t1); }
.finish { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.done-btn { margin: 0; height: 48px; padding-inline: 24px; font-size: 16px; }
.nextlesson { display: block; margin: var(--sp-6) 0 0; padding: var(--sp-5) 24px; border-radius: var(--r-lg); background: var(--ink); color: #fff; text-decoration: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--sp-4); }
.nextlesson small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.64); }
.nextlesson b { grid-column: 1; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.nextlesson i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 22px; }
.nextlesson:hover { background: #2a2a2a; }
.nav { font-size: 15px; color: var(--t2); margin-top: var(--sp-5); padding: 0; border: 0; }
.nav a { color: var(--t2); text-decoration: none; }
.nav a:hover { color: var(--t1); }

/* ---------- Overlays: term card, "I'm lost here", comments ---------- */
.term-card, .lost-modal { border-radius: var(--r-lg); box-shadow: 0 30px 60px -24px rgba(20,20,20,.45); border: 1px solid var(--line); width: min(680px, 100%); padding: var(--sp-6) 32px 32px; font-size: 17px; }
.lost-backdrop { background: rgba(20,20,20,.5); }
.tc-head strong, .ld-head strong { font-size: 28px; letter-spacing: -.02em; font-weight: 600; line-height: 1.2; }
.term-card { padding: 32px; }
.tc-head { align-items: flex-start; }
.tc-head br { display: none; }
.tc-head .eyebrow { margin: 0 0 var(--sp-1); }
.tc-head strong, .ld-head strong { display: block; }
.tc-close, .ld-close { margin: -6px -8px 0 0; padding: 4px 8px; }
.tc-back { margin: 0 0 var(--sp-2); }
/* Term card rhythm: 16px inside a group, 24px between groups. */
.tc-short { font-weight: 500; font-size: 19px; line-height: 1.4; margin: var(--sp-4) 0 var(--sp-1); }
.tc-analogy { margin: 0 0 24px; }
.tc-layers { gap: var(--sp-4); margin: 0 0 24px; }
.tc-layer { padding-left: 40px; }
.tc-layer .tc-n { top: 2px; }
.tc-deeper { margin: 0 0 24px; }
.tc-example { margin: 0 0 24px; font-size: 15px; }
.tc-needs { margin: 0 0 24px; gap: var(--sp-2); font-size: 15px; }
.tc-taught { margin: 0 0 24px; font-size: 15px; }
.tc-flag { margin: 0; padding: 12px 16px; font-size: 15px; }
.term-card > :last-child { margin-bottom: 0; }
.tc-analogy { font-style: normal; color: var(--t2); }
.tc-layer .tc-n { background: var(--panel); color: var(--t1); font-weight: 600; }
.tc-chip, .ll-term { background: var(--panel); color: var(--t1); }
.tc-chip:hover { outline: 0; border-color: var(--ink); }
.tc-example code { background: var(--panel); border: 0; }
.ld-name { color: var(--t1); font-weight: 600; }
.tc-flag { background: var(--panel); color: var(--t1); border-radius: var(--r); }
/* Comment cards, after Sidenote: a quiet card, a quoted anchor, messages as rows with an avatar and a
   hairline between them (no bubbles), and a reply field that is a pill until it is used. */
.cm-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: none; font-size: 13px; line-height: 1.5; color: var(--t1); margin-bottom: var(--sp-3); }
.cm-card.collapsed:hover { border-color: var(--line-strong); }
.cm-card.open { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 8px 24px rgba(20,20,20,.10); }
.cm-card.draft { background: #fff; }
.cm-card-head, .cm-card.open .cm-card-head { display: block; position: relative; padding: var(--sp-4); border-bottom: 0; }
.cm-anchor { display: block; margin-bottom: var(--sp-3); padding-left: var(--sp-2); border-left: 2px solid var(--line-strong); font-size: 12px; line-height: 1.45; color: var(--t3); }
.cm-quote, .cm-card.open .cm-quote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-style: normal; color: var(--t2); }
.cm-state { display: block; margin-top: 2px; font-size: 12px; color: var(--t3); }
.cm-orphan { display: block; }
.cm-head-right { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.cm-more { padding: 0 var(--sp-4) var(--sp-4); margin-top: calc(var(--sp-1) * -1); font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; }
.cm-card.collapsed:hover .cm-more { color: var(--t1); }
.cm-card-body { padding: 0 var(--sp-4) var(--sp-4); }
.cm-msgs { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.cm-foot { margin-top: var(--sp-3); }
.cm-foot button { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.cm-msgs { display: block; }
.cm-msg, .cm-msg.claude { background: none; border: 0; border-radius: 0; padding: 0; }
.cm-msg + .cm-msg { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.cm-msg-head { display: flex; align-items: center; gap: var(--sp-2); }
.cm-av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--t2); font-size: 11px; font-weight: 600; }
.cm-msg.claude .cm-av { background: var(--ink); color: #fff; font-size: 9px; letter-spacing: .02em; }
.cm-who { display: inline; margin: 0; font-size: 12px; font-weight: 600; color: var(--t1); text-transform: none; letter-spacing: 0; }
.cm-msg-body { margin-top: 6px; }
.cm-msg-body p { margin: 0 0 var(--sp-2); }
.cm-msg-body p:last-child { margin-bottom: 0; }
/* Example mode: the fixed notice that answers a visitor's comment when no AI tutor is connected. */
.cm-msg.sys, .cm-msg + .cm-msg.sys { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: var(--panel); color: var(--t2); font-size: 12px; }
.cm-msg.sys .cm-msg-body { margin-top: 0; }
.cm-unfold { border: 0; background: none; padding: 0; margin-bottom: var(--sp-3); font-size: 12px; font-weight: 500; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.cm-typing { background: var(--panel); }
.cm-typing span { background: var(--t2); }
/* The reply field is a pill until it is focused or holds text; then a box with its button. */
.cm-reply { display: block; margin-top: var(--sp-3); padding: 6px 12px; font-size: 13px; line-height: 1.45; border: 1px solid transparent; border-radius: 16px; background: var(--panel); color: var(--t1); resize: none; overflow: hidden; outline: none; transition: border-radius .12s ease, background .12s ease; }
.cm-reply::placeholder { color: var(--t3); }
.cm-reply:focus, .cm-reply:not(:placeholder-shown), .cm-card.draft .cm-reply { background: #fff; border-color: var(--line-strong); border-radius: var(--r-sm); padding: 8px 12px; outline: none; box-shadow: none; }
.cm-reply:focus-visible { outline: none; border-color: var(--ink); }
.cm-card.draft .cm-reply { margin-top: 0; }
.cm-actions { display: none; gap: var(--sp-2); margin-top: var(--sp-2); }
.cm-reply:focus ~ .cm-actions, .cm-reply:not(:placeholder-shown) ~ .cm-actions, .cm-card.draft .cm-actions { display: flex; }
.cm-actions button { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; }
.cm-actions button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.cm-actions button.primary:disabled { background: var(--panel); border-color: transparent; color: var(--t3); }
.cm-fab { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; transition: opacity .15s ease, visibility .15s; }
/* On a phone the button fades out while it would cover a figure, a check or their controls (common.js). */
.cm-fab.cm-off { opacity: 0; visibility: hidden; pointer-events: none; }
.cm-status.on { color: var(--good); }
mark.cm-mark { background: var(--accent-soft); border-bottom: 2px solid var(--accent); border-radius: 0; padding: 0; }
.cm-badge { background: var(--accent-soft); color: var(--accent-ink); }
.cm-target-btn { font-size: 12px; padding: 3px 10px; top: 10px; right: 10px; }
.cm-pill { top: 68px; }
/* Margin cards scroll under the sticky bar (z-index 5), like the rest of the page. */
.cm-margin { z-index: 4; }
/* Example mode has no session to report on. */
body.cm-demo .cm-pill, body.cm-demo .cm-status { display: none; }


/* ---------- Site top bar on the example lessons (theme.js) ---------- */
/* Top bar, injected by theme.js, same as the site's. */
.topbar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar .top { width: min(1040px, calc(100% - 48px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.topbar .brand { font-weight: 600; font-size: 18px; letter-spacing: -.01em; border: 0; }
.topbar .brand::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 3px; }
.topbar nav { display: flex; align-items: center; gap: 26px; font-size: 15px; color: var(--t2); }
.topbar nav a { border: 0; color: inherit; }
.topbar nav a:hover { color: var(--t1); }
.topbar .pill { display: inline-flex; align-items: center; height: 36px; padding-inline: 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; border: 0; }
.topbar .pill:hover { background: #333; }
.topbar .top { gap: 12px; }
.topbar .brand, .topbar .pill, .topbar nav a { white-space: nowrap; }
@media (max-width: 700px) { .topbar nav .hide-sm { display: none; } .topbar nav { gap: 16px; } }
@media (max-width: 480px) { .topbar .top { width: calc(100% - 32px); height: 56px; } .topbar nav a:not(.pill) { display: none; } .topbar .pill { height: 32px; padding-inline: 12px; font-size: 13px; } main { padding: 28px 16px 80px; } }


.topbar a, .lesson .t a, .nav a { text-decoration: none; }
.topbar .brand { color: var(--ink); }

/* ---------- Blocks the nine example lessons use under older names ---------- */
/* Quiet notes: the example-lesson line under the title, data caveats. Small grey text, no box. */
.note.plain, .example-note, .example { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.55; color: var(--t2); }
h1 + .note.plain, h1 + .example-note, h1 + .example { margin-top: calc(var(--sp-3) - var(--sp-5)); }
.lede + .note.plain, .lede + .example-note, .lede + .example { margin-top: calc(var(--sp-3) - var(--sp-6)); }
/* Formula written as plain text: one line of working on a hairline field. */
.eq:not(:has(.f)), .formula { font-family: var(--mono); font-size: 15px; line-height: 1.7; color: var(--t1); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin: var(--sp-6) 0; overflow-x: auto; white-space: nowrap; }
/* The field is already the box. A code chip inside it would draw a second box round the same words. */
.eq code, .formula code { background: none; border: 0; border-radius: 0; padding: 0; font-size: inherit; }
/* Worked example that is not stepped: plain page, same step rhythm. */
.ex:not([data-reveal]) { background: none; padding: 0; border-radius: 0; }
.ex:not([data-reveal]) ol > li:first-child { margin-top: 0; }
.working { margin: var(--sp-7) 0; }
.working p { padding: var(--sp-4) 0; margin: 0; border-top: 1px solid var(--line); }
.working p:last-child { border-bottom: 1px solid var(--line); }
.try li, ol.sources li { margin-bottom: var(--sp-2); }
.off { font-size: 13px; color: var(--warn); margin: var(--sp-2) 0 0; min-height: 1.2em; }
/* One-of-many buttons. The row wraps and the pills keep their own width: with nowrap they shrink
   instead, so a long label ("Random 70/30") breaks inside the pill or pushes the row off the page. */
.radio { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 0; }
.radio button { flex: 0 0 auto; font-size: 13px; padding: 6px 13px; }
.radio button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.radio button[aria-pressed="false"] { color: var(--t1); }
/* Control grid with menus and tick boxes (lesson 08) */
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4) var(--sp-6); margin: 0 0 var(--sp-5); align-items: start; }
.ctl-grid label { display: block; font-size: 13px; font-weight: 500; color: var(--t2); }
.ctl-grid select { width: 100%; margin-top: var(--sp-1); font-size: 15px; padding-top: 6px; padding-bottom: 6px; border-radius: var(--r-sm); }
.ctl-grid output { color: var(--ink); font-weight: 600; }
.ctl-grid .chk { display: flex; align-items: center; gap: var(--sp-2); color: var(--t1); font-size: 15px; font-weight: 400; }
.ctl-grid .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.ctl-grid [hidden] { display: none; }
.verdict .v-head { font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-1); }
.verdict .v-case { font-size: 13px; color: var(--t2); margin: 0 0 var(--sp-2); }
.verdict p + p { margin-top: var(--sp-2); }
main > table { margin: var(--sp-7) 0; }
.fig.live > svg + .controls, .fig.live > svg + .ctl-grid, .fig.live > svg + .legend, .fig.live > svg + .toggles { margin-top: var(--sp-5); }
.fig.live > .legend:last-of-type { margin-bottom: var(--sp-3); }
.fold-note { font-size: 15px; color: var(--t2); margin: var(--sp-3) 0 var(--sp-5); }
main > .done-btn { margin-top: var(--sp-8); }
main > .nav { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
main > .nav a { color: var(--t1); }

/* Course hub (index.html) */
.lesson { grid-template-columns: 40px 1fr auto; padding: 18px 0; }
.lesson .n { font-weight: 500; color: var(--t3); }
.lesson .t { font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.lesson .t a { border: 0; }
.lesson .t a:hover { color: var(--accent); }
/* The whole row is the link: the title link's ::after covers the row, from divider to divider, so the
   number, description, status and the space between all open the lesson. A locked row has no link. */
.lesson { position: relative; }
.lesson .t a::after { content: ""; position: absolute; inset: 0; }
.lesson:has(.t a):hover .t a { color: var(--accent); }
.lesson .d { font-size: 15px; color: var(--t2); margin-top: 2px; }
.lesson .s { font-size: 13px; color: var(--t3); }
/* A done lesson: a filled pink circle with a white tick, so it reads at a glance. */
.lesson .s.done { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-ink); font-weight: 600; font-size: 14px; }
.lesson .s.done .tick { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: inline-grid; place-items: center; flex: none; }
.lesson .s.done .tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tag { font-size: 12px; font-weight: 500; color: var(--t2); border-color: var(--line); vertical-align: 2px; }
.progress { height: 4px; background: var(--line); }
.progress > div { background: var(--accent); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  main { padding: 36px 16px 96px; }
  h1 { font-size: 34px; }
  .topbar ~ main { padding-top: 28px; }
  h2 { font-size: 24px; margin-top: 72px; }
  .lede { font-size: 19px; }
  .quote { font-size: 21px; }
  .panel, .fig.live, .check, .branch, .code-box, .ex, .cards, .order, .numeric, .multi, .reflect { padding: var(--sp-5) var(--sp-4); margin-inline: -8px; }
  .card, .ask { padding: var(--sp-4) var(--sp-4); }
  .stat .v { font-size: 26px; }
  .lost-btn { float: none; display: block; margin: var(--sp-2) 0 0; width: max-content; }
  .linkcard { grid-template-columns: 1fr; }
  .linkcard .go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-2); }
  .eq .f { font-size: 21px; }
}

/* No stranded last words (17 Oct 2026). Short UI text is balanced across its lines;
   longer text avoids a lone last word. A checkbox sits on the first line of its label.
   Buttons (quick-check options) and table cells use pretty, not balance: balance halves a
   two-line option and leaves a wide empty right side in a full-width button. */
label, legend, summary, th, .k, .bnode, .verdict { text-wrap: balance; }
li, .v, .caption, figcaption, .callout, .note, .stat, .fb, .step .txt, .cm-anchor,
button, .opts > *, .order li, td { text-wrap: pretty; }
.ctl-grid .chk { grid-column: 1 / -1; align-items: flex-start; }
.ctl-grid .chk input { font: inherit; line-height: inherit; margin-top: calc((1lh - 18px) / 2); } /* 1lh = the label line, so the box centres on the first line */

/* Live figure: question line, and less-used controls behind a disclosure (lesson openings, 18 Oct) */
.fig.live > .q { font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-3); }
.fig.live details.more { margin: var(--sp-3) 0 0; font-size: 15px; color: var(--t2); }
.fig.live details.more summary { cursor: pointer; }
.fig.live details.more .controls { margin-top: var(--sp-3); }

/* Controls in one row: labels start at the top, sliders and menus line up at the bottom, whatever the
   label length (Benedict, 18 Oct: a two-line label pushed its slider below its neighbours'). The grid
   stretches every cell to the row's tallest. A div cell (label, then control) is a flex column with the
   control pushed down. A label cell that holds its own control keeps its text inline, reserves the
   control's height as bottom padding, and pins the control to the bottom. Next to a menu, a slider takes
   the menu's height so the two centre on one line. */
:is(.controls, .ctl-grid, .code-controls .params) { align-items: stretch; }
:is(.controls, .ctl-grid, .code-controls .params) > div:has(> :is(input[type="range"], select):last-child) { display: flex; flex-direction: column; }
:is(.controls, .ctl-grid, .code-controls .params) > div > :is(input[type="range"], select):last-child { margin-top: auto; }
:is(:is(.controls, .ctl-grid, .code-controls .params) > label, :is(.controls, .ctl-grid, .code-controls .params) > div > label:only-child):has(> input[type="range"]:last-child) { position: relative; padding-bottom: 24px; }
:is(:is(.controls, .ctl-grid, .code-controls .params) > label, :is(.controls, .ctl-grid, .code-controls .params) > div > label:only-child):has(> select:last-child) { position: relative; padding-bottom: 42px; }
:is(:is(.controls, .ctl-grid, .code-controls .params) > label, :is(.controls, .ctl-grid, .code-controls .params) > div > label:only-child) > :is(input[type="range"], select):last-child { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; }
:is(.controls, .ctl-grid, .code-controls .params):has(select) input[type="range"] { height: 38px; }
:is(:is(.controls, .ctl-grid, .code-controls .params):has(select) > label, :is(.controls, .ctl-grid, .code-controls .params):has(select) > div > label:only-child):has(> input[type="range"]:last-child) { padding-bottom: 38px; }
:is(.controls, .ctl-grid, .code-controls .params) > div:has(> label:only-child > :is(input[type="range"], select):last-child) { display: flex; flex-direction: column; }
:is(.controls, .ctl-grid, .code-controls .params) > div > label:only-child:has(> :is(input[type="range"], select):last-child) { flex: 1; }