/* MLT lesson stylesheet — shared across all lessons in this workspace.
   Use <link rel="stylesheet" href="../assets/lesson.css"> from lessons/*.html
   Designed for clean print and screen, Tufte-inspired. */

:root {
  /* Dark is the default; the print block at the bottom restores light. */
  color-scheme: dark light;
  --ink: #e8e3da;
  --ink-soft: #a8a193;
  --ink-rule: #3b3630;
  --accent: #c3a6ec; /* IITM violet, brightened for dark backgrounds */
  --accent-soft: #292331;
  --paper: #16130f;
  --warn: #eda35d;
  --ok: #7fc383;
  --bad-fg: #e08a8a;
  --code-bg: #201c17;
  --tint-quiz: #1e1a16;
  --tint-ok: #1c291d;
  --tint-bad: #2e1a1a;
  --tint-warn: #302419;
  --serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0 auto;
  max-width: min(60rem, calc(100% - 3rem));
  padding: 2.5rem 1.5rem 6rem;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Header / title block */
header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-rule);
}
header .eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
header h1 {
  font-size: 1.9rem;
  line-height: 1.18;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
header .meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
}
header .meta a { color: var(--accent); text-decoration: none; }
header .meta a:hover { text-decoration: underline; }

/* Sectioning */
h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 2.2rem 0 0.6rem;
  color: var(--ink);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ink-rule);
}
h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.6rem 0 0.4rem;
  color: var(--ink);
}
p { margin: 0 0 1rem; }

/* Inline emphasis */
em { color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }
mark {
  background: #EBCB8B;
  color: #191b1c;
  padding: 0 0.1em;
  border-radius: 2px;
}
::selection {
  background: var(--accent);
  color: var(--paper);
}
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.05em 0.32em;
  border-radius: 3px;
  color: var(--ink);
}

/* Math / display blocks — rendered by KaTeX
   Per AGENTS.md: never use horizontal scroll; prefer wrapping and stacking.
   Do NOT set word-break/overflow-wrap on .katex or .katex .base — it shatters glyphs. */
.math, .display, blockquote.eq, .formula, .eq {
  background: var(--code-bg);
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--accent);
  margin: 1.1rem 0;
  overflow-x: visible;
  overflow-y: visible;
  line-height: 1.5;
}
.display, .math, blockquote.eq, .formula, .eq { overflow-x: visible; }
.display .katex-display,
.math .katex-display,
blockquote.eq .katex-display,
.formula .katex-display {
  margin: 0.15rem 0;
}
.katex-display { overflow-x: visible; overflow-y: visible; padding: 0.15rem 0; white-space: normal; }
.katex-display > .katex { white-space: normal; }
.katex-display > .katex > .katex-html { white-space: normal; }
.katex { font-size: 1.05em; }
katex-display { font-size: 1.05em; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow-x: visible; }
code { overflow-wrap: anywhere; word-break: break-word; }
table { table-layout: fixed; width: 100%; }
th, td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.quiz .options li { white-space: normal; }

/* Editing: show raw LaTeX as pre-wrapped code so Enter inserts a visible line break */
html.__editing .display,
html.__editing .math,
html.__editing blockquote.eq,
html.__editing .formula,
html.__editing .eq {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.95em;
  border-left-color: var(--warn);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Callouts */
aside.note, .callout {
  font-family: var(--sans);
  font-size: 0.92rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 0.7rem 1rem;
  margin: 1.1rem 0;
  color: var(--ink);
}
aside.note::before, .callout::before {
  content: "Note";
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-right: 0.5rem;
}
.callout.warn { background: var(--tint-warn); border-left-color: var(--warn); }
.callout.warn::before { content: "Watch out"; color: var(--warn); }
.callout.ok { background: var(--tint-ok); border-left-color: var(--ok); }
.callout.ok::before { content: "Remember"; color: var(--ok); }
.callout.recap { background: var(--accent-soft); border-left-color: var(--accent); }
.callout.recap::before { content: "Recap"; color: var(--accent); }
.takeaway {
  font-family: var(--sans);
  font-size: 0.95rem;
  border-top: 1px solid var(--ink-rule);
  margin-top: 1.6rem;
  padding-top: 0.9rem;
}
.takeaway strong { color: var(--accent); }

/* Lists */
ul, ol { padding-left: 1.25rem; }
li { margin: 0.2rem 0; }

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
}
th, td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--ink-rule);
}
th { font-weight: 600; background: var(--accent-soft); }

/* Quiz block */
.quiz {
  background: var(--tint-quiz);
  border: 1px solid var(--ink-rule);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  margin: 1.6rem 0;
  font-family: var(--sans);
}
.quiz h3 { margin-top: 0; }
.quiz .prompt { font-size: 1rem; margin-bottom: 0.5rem; }
.quiz .options { list-style: none; padding: 0; margin: 0; counter-reset: opt; }
.quiz .options li {
  counter-increment: opt;
  margin: 0.45rem 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ink-rule);
  border-radius: 4px;
  cursor: pointer;
  background: var(--paper);
  position: relative;
}
.quiz .options li::before {
  content: counter(opt) ". ";
  font-weight: 600;
  margin-right: 0.4rem;
  color: var(--accent);
}
.quiz .options li:hover { border-color: var(--accent); }
.quiz .options li.correct { background: var(--tint-ok); border-color: var(--ok); }
.quiz .options li.incorrect { background: var(--tint-bad); border-color: var(--bad-fg); }
.quiz .options li.chosen.incorrect::after {
  content: "✗";
  position: absolute; right: 0.7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--bad-fg); font-weight: 700;
}
.quiz .options li.chosen.correct::after {
  content: "✓";
  position: absolute; right: 0.7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ok); font-weight: 700;
}
.quiz .feedback {
  font-size: 0.88rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--ink-rule);
  color: var(--ink-soft);
  display: none;
}
.quiz.revealed .feedback { display: block; }
.quiz .reset {
  background: transparent; color: var(--accent); border: none;
  font-family: var(--sans); font-size: 0.82rem; cursor: pointer;
  text-decoration: underline; padding: 0; margin-top: 0.6rem;
}

/* Footer */
footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-rule);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Keyboard focus — visible for quiz and edit-mode */
.quiz .options li:focus-visible,
.qopts button:focus-visible,
.quiz button.opt:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- Legacy aliases: keep older DBMS/dsa/MLF lessons rendering on the dark theme --- */
header.course{margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--ink-rule);}
header.course .kicker{font-family:var(--sans); font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin:0 0 0.4rem;}
header.course h1{font-family:var(--sans); font-size:1.9rem; line-height:1.18; margin:0 0 .6rem; letter-spacing:-0.01em; color:var(--ink);}
header.course .meta{font-family:var(--sans); font-size:0.85rem; color:var(--ink-soft); margin:0;}
header .sub{font-family:var(--sans); font-size:0.85rem; color:var(--ink-soft); margin:0;}
.timebadge{display:inline-block; background:var(--code-bg); border:1px solid var(--ink-rule); border-radius:3px; padding:.15rem .6rem; font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); margin:.4rem 0 0;}
.toc{font-family:var(--sans); font-size:.92rem; columns:2; column-gap:2.5rem; margin:1.2rem 0 2rem;}
.toc ol{margin:0; padding-left:1.2rem;}
.toc li{margin-bottom:.5rem;}
.box{font-family:var(--sans); font-size:0.92rem; background:var(--accent-soft); border-left:3px solid var(--accent); padding:0.7rem 1rem; margin:1.1rem 0; color:var(--ink);}
.box h4{margin:0 0 .6rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
.box.example{background:var(--accent-soft); border-left-color:var(--accent);}
.box.trap{background:var(--tint-warn); border-left-color:var(--warn);}
.example,.trap{background:var(--accent-soft);}
.formula,.eq{background:var(--code-bg); padding:0.85rem 1rem; border-left:3px solid var(--accent); margin:1.1rem 0; overflow-x:visible; overflow-y:visible; line-height:1.5;}
.chip{display:inline-block; background:var(--code-bg); border:1px solid var(--ink-rule); border-radius:3px; padding:.1rem .45rem; font-family:var(--mono); font-size:.85em; margin:.1rem .1rem .1rem 0;}
.lead{font-family:var(--sans); font-size:0.9rem; color:var(--ink-soft); margin-top:.4rem;}
.card{font-family:var(--sans); font-size:0.92rem; background:var(--accent-soft); border-left:3px solid var(--accent); padding:0.7rem 1rem; margin:1.1rem 0; color:var(--ink); border:1px solid var(--ink-rule); border-left-width:3px;}
.card.warn{background:var(--tint-warn); border-left-color:var(--warn);}
.card.good{background:var(--tint-ok); border-left-color:var(--ok);}
.keyword{font-family:var(--sans); font-weight:600; color:var(--accent);}
.reveal{margin:1rem 0;}
.reveal button{font-family:var(--sans); font-size:.8rem; padding:.35rem .8rem; border:1px solid var(--ink-rule); border-radius:4px; background:var(--paper); color:var(--accent); cursor:pointer;}
.reveal .hidden-answer{display:none; margin-top:.6rem; background:var(--code-bg); padding:.7rem 1rem; border-left:3px solid var(--accent);}
.reveal.open .hidden-answer{display:block;}
.muted{color:var(--ink-soft);}
.small{font-size:.85rem;}
.callout .label{font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; display:block; margin-bottom:.3rem;}
blockquote{margin:1.2rem 0; padding:0.6rem 1.1rem; border-left:3px solid var(--accent); background:var(--accent-soft); font-style:normal; color:var(--ink);}
blockquote p{margin:.3rem 0;}
/* legacy quiz mappings */
.quiz .q{border:1px solid var(--ink-rule); border-radius:4px; padding:1rem 1.1rem; margin:1rem 0; background:var(--tint-quiz);}
.quiz .q p{margin:0 0 .6rem; font-family:var(--sans); font-size:.92rem;}
.quiz .opts{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.quiz button.opt{font-family:var(--sans); font-size:.85rem; text-align:left; padding:.5rem .7rem; border:1px solid var(--ink-rule); border-radius:4px; background:var(--paper); color:var(--ink); cursor:pointer;}
.quiz button.opt:hover{border-color:var(--accent);}
.quiz button.opt.sel{border-color:var(--accent); background:var(--accent-soft);}
.quiz button.opt.correct{border-color:var(--ok); background:var(--tint-ok);}
.quiz button.opt.wrong{border-color:var(--bad-fg); background:var(--tint-bad);}
.quiz .score{font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); margin-top:.4rem;}
.quiz .feedback{font-size:.85rem; margin-top:.5rem; font-family:var(--sans); color:var(--ink-soft);}
.quiz .feedback.ok{color:var(--ok);}
.quiz .feedback.no{color:var(--bad-fg);}
.quiz .qbody{padding:0 .7rem;}
.qopts{list-style:none; padding:0; margin:.4rem 0;}
.qopts li{margin:.3rem 0;}
.qopts button{width:100%; text-align:left; font:inherit; color:inherit; background:var(--paper); border:1px solid var(--ink-rule); border-radius:4px; padding:.45rem .7rem; cursor:pointer;}
.qopts button:hover{border-color:var(--accent);}
.qopts button.correct{background:var(--tint-ok); border-color:var(--ok); color:var(--ink);}
.qopts button.wrong{background:var(--tint-bad); border-color:var(--bad-fg); color:var(--ink);}
.qopts button.missed{background:var(--tint-warn); border-color:var(--warn); color:var(--ink);}
.qopts button.selected{background:var(--accent-soft); border-color:var(--accent);}
.why{display:none; margin:.5rem 0 0; font-size:.92rem; border-left:3px solid var(--ink-rule); padding:.3rem .7rem; color:var(--ink-soft);}
.quiz .answered .why{display:block;}
.quiz .scorebar{font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); margin:1.2rem .7rem 0;}

/* Print: flip back to light so pages don't waste ink. */
@media print {
  :root {
    color-scheme: light;
    --ink: #1a1a1a;
    --ink-soft: #444;
    --ink-rule: #ccc;
    --accent: #5b3a8c;
    --accent-soft: #efeaf6;
    --paper: #fbfaf8;
    --warn: #b34700;
    --ok: #2e7d32;
    --bad-fg: #b33;
    --code-bg: #f4f1ee;
    --tint-quiz: #fff;
    --tint-ok: #e9f4e9;
    --tint-bad: #ffe9e9;
    --tint-warn: #fff3e6;
  }
}

/* ---- Lab notebook: no runtime nav. Lessons ship KaTeX + quiz only.
   Prev/next + TOC were nav.js runtime; dropped for the 500lb diet.
   Footer link ("all courses & notes") is the navigation. ---- */

/* ---- Teach patterns: hero + trap + bridge + worked + retrieval + demo ----
   Every lesson opens with figure.hero (the thesis), teaches one idea per box,
   traps the exam wording, bridges to other lessons, and closes with retrieval.
   See AGENTS.md "Lesson teaching patterns". */
figure.hero{
  margin:1.4rem 0 1.6rem; padding:1rem 1.1rem;
  background:var(--code-bg);
  border:1px solid var(--ink-rule); border-left:3px solid var(--accent);
}
figure.hero .mental-picture{
  font-family:var(--sans); font-size:.95rem; margin:0 0 .8rem;
}
figure.hero .mental-picture strong{ color:var(--accent); }
figure.hero figcaption{
  font-family:var(--sans); font-size:.82rem; color:var(--ink-soft);
  margin-top:.8rem; padding-top:.6rem;
  border-top:1px dashed var(--ink-rule);
}
figure.hero figcaption a{ color:var(--accent); text-decoration:none; }
figure.hero figcaption a:hover{ text-decoration:underline; }
/* Lesson figure: one image, a caption, and a credit when the image is found.
   Source figures are black-on-white line art; they keep their own ground on a
   paper plate so they stay legible on the dark theme instead of vanishing. */
.fig{ margin:1.5rem 0 1.8rem; }
.fig img{
  display:block; width:100%; height:auto;
  border:1px solid var(--ink-rule); border-radius:4px;
}
.fig--source img{ background:#fff; padding:12px; box-sizing:border-box; }
.fig figcaption{
  font-family:var(--sans); font-size:.85rem; color:var(--ink-soft);
  margin-top:.55rem; line-height:1.45;
}
.fig figcaption a{ color:var(--accent); text-decoration:none; }
.fig figcaption a:hover{ text-decoration:underline; }
/* A strip of real samples — one class per cell. */
.fig--strip .strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.fig--strip .strip img{ width:100%; height:180px; object-fit:cover; }
/* Trap: exam-wording danger. h4 must start with "Trap —". */
.box.trap h4{ color:var(--warn); }
/* Bridge: same idea in another lesson. h4 must start with "Bridge —". */
.box.bridge{
  background:transparent;
  border:1px dashed var(--accent); border-left:3px solid var(--accent);
}
.box.bridge h4{
  margin:0 0 .6rem; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--accent);
}
.box.bridge a{ color:var(--accent); }
/* Worked example: Setup → numbered steps → takeaway. One idea per box. */
.box.example ol.steps{ margin:.6rem 0; padding-left:1.4rem; }
.box.example ol.steps li{ margin:.55rem 0; }
.box.example .takeaway{
  margin:.8rem 0 0; padding-top:.6rem;
  border-top:1px dashed var(--ink-rule);
}
/* Retrieval: end-of-lesson quiz band. Minimum 3 canonical quizzes. */
section.retrieval{ border-top:2px solid var(--accent); margin-top:2.5rem; padding-top:.5rem; }
section.retrieval > p.lead{ font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); }
/* Ask line: every lesson ends by inviting followup questions. */
p.ask{
  font-family:var(--sans); font-size:.9rem; color:var(--ink-soft);
  border-top:1px solid var(--ink-rule); margin-top:2rem; padding-top:1rem;
}
/* Live demo widget (progressive enhancement: useful without JS). */
.bayes-demo{
  font-family:var(--sans); font-size:.88rem;
  background:var(--paper);
  border:1px solid var(--ink-rule); border-radius:6px;
  padding:.9rem 1rem; margin:.4rem 0 .2rem;
}
.bayes-demo .bd-row{
  display:grid; grid-template-columns:minmax(11rem,1fr) 2fr 3.5rem;
  gap:.7rem; align-items:center; margin:.5rem 0;
}
.bayes-demo label{ color:var(--ink-soft); }
.bayes-demo output{ font-family:var(--mono); text-align:right; }
.bayes-demo input[type="range"]{ width:100%; accent-color:var(--accent); }
.bayes-demo .bd-bar{
  height:.9rem; border-radius:5px; overflow:hidden;
  background:var(--code-bg); border:1px solid var(--ink-rule);
  margin:.7rem 0 .3rem;
}
.bayes-demo .bd-fill{ height:100%; width:50%; background:var(--accent); }
.bayes-demo .bd-readout{ margin:.3rem 0 .6rem; }
.bayes-demo .bd-readout strong{ color:var(--accent); }
.bayes-demo button{
  font-family:var(--sans); font-size:.8rem;
  padding:.35rem .8rem; border:1px solid var(--ink-rule); border-radius:4px;
  background:var(--paper); color:var(--accent); cursor:pointer;
}
.bayes-demo button:hover{ border-color:var(--accent); }
@media (max-width:40rem){ .bayes-demo .bd-row{ grid-template-columns:1fr; gap:.2rem; } }

/* ---- Disk lab widgets (assets/disk-lab.js) ----
   Timing lab, platter, elevator. Static taxonomies stay tables; only
   processes (spin, head travel, queue evolution) earn a widget. */
.disk-timing, .platter, .elevator{
  font-family:var(--sans); font-size:.9rem;
  background:var(--paper);
  border:1px solid var(--ink-rule); border-radius:6px;
  padding:.9rem 1rem; margin:1rem 0;
}
.disk-timing .dt-row{
  display:grid; grid-template-columns:minmax(11rem,1fr) 2fr 4.5rem;
  gap:.7rem; align-items:center; margin:.5rem 0;
}
.disk-timing label, .platter label{ color:var(--ink-soft); }
.disk-timing output{ font-family:var(--mono); text-align:right; }
.disk-timing input[type="range"]{ width:100%; accent-color:var(--accent); }
.disk-timing button, .platter button, .elevator button{
  font-family:var(--sans); font-size:.8rem;
  padding:.35rem .8rem; border:1px solid var(--ink-rule); border-radius:4px;
  background:var(--paper); color:var(--accent); cursor:pointer; margin:.15rem .15rem .15rem 0;
}
.disk-timing button:hover, .platter button:hover, .elevator button:hover{ border-color:var(--accent); }
.disk-timing button.sel, .elevator button.sel{ border-color:var(--accent); background:var(--accent-soft); }
.costbar{ display:flex; height:1rem; border-radius:5px; overflow:hidden;
  background:var(--code-bg); border:1px solid var(--ink-rule); margin:.7rem 0 .3rem; }
.costbar .cb-seek{ background:var(--warn); }
.costbar .cb-lat{ background:var(--accent); }
.costbar .cb-xfer{ background:var(--ok); }
.dt-readout{ margin:.3rem 0; }
.dt-compare{ margin:.3rem 0 .2rem; color:var(--ink-soft); }
.dt-compare::before{ content:"⇄ "; color:var(--accent); }
.platter canvas{ display:block; max-width:min(300px,100%); height:auto; margin:.2rem auto .6rem; }
.pl-controls{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.platter select{ font:inherit; background:var(--paper); color:var(--ink); border:1px solid var(--ink-rule); border-radius:4px; padding:.3rem .5rem; }
.elevator .el-track{
  position:relative; height:2.4rem; margin:.8rem 0 .1rem;
  background:var(--code-bg); border:1px solid var(--ink-rule); border-radius:5px;
}
.elevator .el-dot{
  position:absolute; top:50%; width:.65rem; height:.65rem; border-radius:50%;
  background:var(--ink-soft); transform:translate(-50%,-50%);
}
.elevator .el-dot.done{ background:var(--ok); }
.elevator .el-head{
  position:absolute; top:-.35rem; bottom:-.35rem; width:3px;
  background:var(--warn); transform:translateX(-50%);
}
.elevator .el-scale{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-soft); }
.elevator .el-served{ font-size:.82rem; color:var(--ink-soft); columns:3; margin:.4rem 0 0; }
.elevator .el-readout{ margin:.4rem 0 0; }
/* Storage ladder: static log-scale bars, no JS. Print-safe by construction. */
.ladder{ font-family:var(--sans); font-size:.88rem; margin:1.1rem 0; }
.ladder .rung{ display:grid; grid-template-columns:7.5rem 1fr 5.5rem; gap:.7rem; align-items:center; margin:.35rem 0; }
.ladder .ltrack{ background:var(--code-bg); border:1px solid var(--ink-rule); border-radius:4px; }
.ladder .lbar{ height:.75rem; border-radius:3px; background:var(--accent); min-width:3px; }
@media (max-width:40rem){
  .disk-timing .dt-row{ grid-template-columns:1fr; gap:.2rem; }
  .ladder .rung{ grid-template-columns:6rem 1fr 4.5rem; }
  .elevator .el-served{ columns:2; }
}
@media print{ .platter canvas, .elevator .el-track{ display:none; } }

/* ---- Drive tour: paced concrete narrative (drive-tour.js dropped) ----
   One real photo, one mechanism per frame. Frames are .tour-frame divs in
   the lesson; they read as a normal numbered list with zero JS
   (lab-notebook static) and print as a normal list. */
.drive-tour{
  font-family:var(--sans); font-size:.92rem;
  border:1px solid var(--ink-rule); border-radius:6px;
  background:var(--paper);
  padding:1rem 1.1rem; margin:1.4rem 0;
  counter-reset: tour;
}
.drive-tour figure{ margin:0 0 .8rem; }
.drive-tour figure img{
  display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--ink-rule);
}
.drive-tour figcaption{ font-size:.78rem; color:var(--ink-soft); margin-top:.4rem; }
.drive-tour figcaption a{ color:var(--accent); text-decoration:none; }
.drive-tour .tour-frame{
  display:block;
  border-top:1px dashed var(--ink-rule);
  padding:.7rem 0 .2rem;
}
.drive-tour .tour-frame:first-of-type{ border-top:none; padding-top:.2rem; }
.drive-tour .tour-frame h4{ margin:.2rem 0 .5rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); }
.drive-tour .tour-frame p{ margin:0 0 .6rem; }
.drive-tour .tour-cost{
  display:inline-block; font-family:var(--mono); font-size:.85rem;
  background:var(--code-bg); border:1px solid var(--ink-rule); border-radius:4px;
  padding:.15rem .6rem; margin:0 0 .4rem;
}
.drive-tour .tour-cost::before{ content:"⏱ "; }
/* tour-nav / dots were drive-tour.js controls; HTML keeps an empty nav div
   for history, CSS hides it — frames are a static list now. */
.drive-tour .tour-nav{ display:none; }
@media print{ .drive-tour .tour-nav{ display:none; } }