/* Lecture slides. Each slide is one 1280 × 720 canvas: the screen scales it to the window and print uses it as the page,
   so the deck and its PDF share one layout. Fonts are bundled (ET Book for text, KaTeX for mathematics).
   One visual grammar in every lecture: a rail at the top shows the part and the slide's place in it; blue marks a
   definition, a framed card a key formula, grey a result, green a worked example, amber why economists care, red a
   common mistake and teal a question for the room. */
@font-face { font-family: ETBook; src: url('vendor/et-book/roman.woff') format('woff'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: ETBook; src: url('vendor/et-book/italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: ETBook; src: url('vendor/et-book/bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: block; }

:root {
  --paper: #fff; --ink: #1b1b1b; --muted: #5d6268; --faint: #9aa0a6; --rule: #dadcdf; --panel: #f5f6f8;
  --accent: #1d4f7a; --accent-soft: #e7eff7;
  --def: #1d5a84; --def-bg: #edf4fa;
  --formula: #8a5d00; --formula-bg: #fcf7e9; --formula-edge: #2a2a2a;
  --result: #4f5459; --result-bg: #f5f5f3;
  --example: #2e6b3a; --example-bg: #eff6ee;
  --econ: #9a5517; --econ-bg: #fbf2e7;
  --pitfall: #a3392b; --pitfall-bg: #fbefed;
  --check: #17696d; --check-bg: #eaf5f5;
  --stage: #1d1e21; --film: #101217; --film-accent: #58C4DD;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--stage); color: var(--ink); }

/* ---------- The canvas ---------- */
.slide { width: 1280px; height: 720px; position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); font: 26px/1.42 ETBook, Georgia, serif; padding: 74px 64px 54px;
  font-kerning: normal; -webkit-font-smoothing: antialiased; }
.slide .body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.slide p { margin: 0 0 .5em; }
.slide a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.slide strong, .slide b { font-weight: 700; }
.slide em { font-style: italic; }
.slide .katex { font-size: 1.05em; }
.slide .katex-display { margin: .3em 0 .4em; }
.slide .katex-display > .katex { font-size: 1.08em; }
.kicker { font: 700 14px/1 ETBook, Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px !important; }
.kicker-ref { letter-spacing: .04em; margin-right: 10px; padding-right: 10px; border-right: 1.5px solid #b9c9d8; }
.slide h2 { font: 400 40px/1.14 ETBook, Georgia, serif; margin: 0 0 22px; letter-spacing: -.004em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 22px; line-height: 1.38; }
.smaller { font-size: 19px; line-height: 1.38; }
.muted { color: var(--muted); }
.centre { text-align: center; }
.nowrap { white-space: nowrap; }
dfn { font-style: normal; font-weight: 700; color: #174a70; }

/* The rail: Opening · Part 1 · Part 2 · Part 3 · Review, each with a dot per slide. */
.rail { position: absolute; left: 0; right: 0; top: 0; height: 48px; display: flex; padding: 0 40px; border-bottom: 1px solid var(--rule);
  font: 14px/1 ETBook, Georgia, serif; color: var(--faint); background: var(--paper); z-index: 3; }
.slide .rail-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 14px;
  color: inherit; text-decoration: none !important; border-top: 3px solid transparent; }
.slide .rail-seg.open, .slide .rail-seg.close { flex: 0 0 auto; }
.slide .rail-seg.done { color: var(--muted); }
.slide .rail-seg.now { color: var(--ink); border-top-color: var(--accent); }
.rail-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .03em; }
.rail-name b { font-weight: 700; margin-right: 3px; }
.rail-seg.now .rail-name { font-weight: 700; }
.rail-dots { display: flex; gap: 4px; height: 7px; }
.rail-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; opacity: .55; }
.rail-dots i.seen { background: currentColor; }
.rail-dots i.here { background: var(--accent); border-color: var(--accent); opacity: 1; }
.slide-footer { position: absolute; left: 64px; right: 64px; bottom: 18px; display: flex; justify-content: space-between; gap: 24px;
  font: 15px/1 ETBook, Georgia, serif; color: var(--faint); letter-spacing: .02em; }
.slide-footer a { color: var(--muted); text-decoration: none; }
.slide-footer a:hover { color: var(--accent); text-decoration: underline; }
.slide-number { font-variant-numeric: tabular-nums; }

/* Lists: an en dash, as in the notes; numbered steps. */
.slide ul { list-style: none; margin: 0 0 .5em; padding: 0; }
.slide ul > li { position: relative; padding-left: 1.05em; margin: 0 0 .28em; }
.slide ul > li::before { content: '–'; position: absolute; left: 0; color: var(--faint); }
.slide ol { margin: 0 0 .5em; padding: 0; list-style: none; counter-reset: step; }
.slide ol > li { position: relative; padding-left: 1.5em; margin: 0 0 .28em; counter-increment: step; }
.slide ol > li::before { content: counter(step) '.'; position: absolute; left: 0; font-weight: 700; color: var(--muted); }

/* ---------- Blocks ---------- */
.blk { position: relative; margin: 0 0 18px; padding: 12px 20px 12px 22px; border-radius: 6px; }
.blk > :last-child { margin-bottom: 0; }
.blk-label { display: flex; align-items: baseline; gap: 10px; font: 700 13.5px/1.1 ETBook, Georgia, serif; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 9px !important; }
.blk-name { letter-spacing: .02em; text-transform: none; font-size: 17px; font-style: italic; font-weight: 400; color: var(--ink); }
.blk-lead { margin: 0 0 .25em !important; font-size: 28px; }
.blk-aside { font-size: 19px; color: var(--muted); }
.blk-def { background: var(--def-bg); border-left: 5px solid var(--def); }
.blk-def > .blk-label { color: var(--def); }
.blk-formula { background: var(--formula-bg); border: 2px solid var(--formula-edge); border-radius: 5px; box-shadow: 5px 5px 0 #eadfbf; padding: 12px 22px 14px; }
.blk-formula > .blk-label { color: var(--formula); }
.f-tag { font-size: 11.5px; letter-spacing: .12em; padding: 3px 7px 2px; border: 1px solid #d9c38d; border-radius: 3px; color: #6d5a2b; background: #fff; }
.sum-tag { font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.f-num { margin-left: auto; letter-spacing: 0; font-size: 18px; color: var(--formula); font-weight: 700; }
.f-name { font-weight: 700; font-size: 24px; margin: 0 0 2px !important; }
.f-tex .katex-display { margin: 4px 0 8px; }
.f-tex .katex-display > .katex { font-size: 1.16em; }
.f-note { font-size: 20px; line-height: 1.35; margin: 0 0 4px !important; color: #383838; }
.f-note b { font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--formula); margin-right: 6px; }
.f-ref { color: var(--formula); font-weight: 700; }
.blk-result { background: var(--result-bg); border: 1.5px solid #a9adb1; }
.blk-result > .blk-label { color: var(--result); }
.blk-example { background: var(--example-bg); border-left: 5px solid var(--example); }
.blk-example > .blk-label { color: var(--example); }
.blk-econ { background: var(--econ-bg); border-left: 5px solid var(--econ); }
.blk-econ > .blk-label { color: var(--econ); }
.blk-pitfall { background: var(--pitfall-bg); border-left: 5px solid var(--pitfall); }
.blk-pitfall > .blk-label { color: var(--pitfall); }
.blk-check { background: var(--check-bg); border-left: 5px solid var(--check); }
.blk-check > .blk-label { color: var(--check); }
.blk-answer { background: var(--example-bg); border-left: 5px solid var(--example); }
.blk-answer > .blk-label { color: var(--example); }
.idea { font-style: italic; color: #3b3f44; border-left: 2px solid var(--rule); padding-left: 16px; }
.takeaway { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 24px; }
.takeaway::before { content: 'Takeaway'; font: 700 13.5px/1 ETBook, Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-right: 12px; }
.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin: 2px 0 12px; }
.ladder > span { font-size: 19px; line-height: 1.2; padding: 6px 10px; border: 1.5px solid #8fb0cc; border-radius: 6px; background: var(--accent-soft); }
.ladder > b { color: var(--accent); font-size: 22px; }
.chip { display: inline-block; font-size: 17px; line-height: 1; padding: 6px 10px 5px; margin: 0 6px 6px 0; border-radius: 999px; background: var(--accent-soft); color: #174a70; white-space: nowrap; }

/* Columns. */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }
.cols.wide-left { grid-template-columns: 3fr 2fr; }
.cols.wide-right { grid-template-columns: 2fr 3fr; }
.cols.three { grid-template-columns: 1fr 1fr 1fr; gap: 0 28px; }
.cols.stretch { align-items: stretch; }
.cols.tight { gap: 0 18px; }
.slide table.compact th, .slide table.compact td { padding: 4px 12px; }
.cols.stretch > div > .blk:only-child { height: 100%; }
.col-head { font-weight: 700; margin-bottom: .3em !important; }

/* Tables follow the booktabs convention. */
.slide table { border-collapse: collapse; font-size: 23px; line-height: 1.3; margin: 2px 0 16px; }
.slide th, .slide td { padding: 6px 18px; text-align: left; vertical-align: baseline; }
.slide th:first-child, .slide td:first-child { padding-left: 4px; }
.slide thead tr { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.slide tbody tr:last-child { border-bottom: 2px solid var(--ink); }
.slide thead th { font-weight: 700; }
.slide .num { text-align: right; }
.slide tr.total td, .slide tr.total th { border-top: 1px solid var(--rule); }
.slide td.hit { background: #fbf1cf; }
.slide caption { caption-side: top; text-align: left; font-size: 18px; color: var(--muted); padding: 0 0 6px 4px; }

/* Figures from the notes. */
.fig { margin: 0; }
.fig-narrow { max-width: 400px; margin: 0 auto 6px; }
.fig-bare .print-figure > p { display: none; }
.fig .figure-heading { font: 700 18px/1.3 ETBook, Georgia, serif; margin: 0 0 8px; }
.fig .geometry { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.geometry .outline { fill: none; stroke: currentColor; stroke-width: 1.5; }
.geometry .hatch { stroke: currentColor; stroke-width: 1; opacity: .42; fill: none; }
.geometry .dot { fill: currentColor; opacity: .35; }
.geometry .event-boundary { fill: none; stroke: currentColor; stroke-width: 1.7; }
.geometry .information-boundary { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-dasharray: 6 4; }
.geometry .axis { fill: none; stroke: currentColor; stroke-width: 1; }
.geometry .interval { fill: none; stroke: currentColor; stroke-width: 4; }
.geometry .endpoint { fill: currentColor; }
.geometry .open-endpoint { fill: var(--paper); stroke: currentColor; stroke-width: 1.5; }
.geometry .outcome-marker { fill: var(--paper); stroke: currentColor; stroke-width: .8; }
.geometry .tree-branch { stroke: currentColor; stroke-width: 1.7; fill: none; }
.geometry .conditional-piece { fill: currentColor; opacity: .12; }
.geometry .diagram-words { font: 17px ETBook, Georgia, serif; fill: currentColor; }
.diagram-label { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 4px; white-space: nowrap; font: 18px/1.2 ETBook, Georgia, serif; color: var(--ink); }
.diagram-label .katex { font-size: 1em; }
.diagram-label.region-number { font-size: 17px; }
.diagram-label.piece-label { font-size: 16px; }
.diagram-label.leaf-number { font-size: 24px; font-weight: 700; }
.diagram-label:is(.region-number,.piece-label,.boundary-label) > .katex { background: var(--paper); padding: 0 3px; }
.fig .diagram-lead, .fig .diagram-panel-note { font-size: 18px; line-height: 1.4; margin: 0 0 8px; }
.fig figcaption { display: none; }   /* the notes' long captions belong in the notes; the slide says it aloud */
.notes-fig .geometry { max-width: 100%; }
.notes-fig .screen-figure, .notes-fig .screen-caption, .notes-fig .print-caption { display: none; }
.notes-fig .print-figure { display: block; }
.notes-fig .print-figure > p { font-size: 16px; line-height: 1.35; color: var(--muted); margin: 4px 0 0; }
.diagram-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.diagram-panel-title { font: 700 17px/1.3 ETBook, Georgia, serif; margin: 0 0 6px !important; }
.t4-geometry .t4-axis-title { font: 600 15px ETBook, Georgia, serif; fill: var(--muted); }
.t4-geometry .t4-grid { stroke: currentColor; stroke-width: 1; opacity: .12; fill: none; }

/* ---------- Title slide: the lecture in the course ---------- */
.layout-title { padding: 0; }
.layout-title .body { position: absolute; inset: 0; }
.title-main { position: absolute; left: 88px; top: 70px; width: 720px; }
.title-course { font: 700 15px/1 ETBook, Georgia, serif; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin: 0 0 26px !important; }
.layout-title h1 { font: 400 80px/1.02 ETBook, Georgia, serif; margin: 0 0 20px; letter-spacing: -.01em; }
.title-sub { font-style: italic; font-size: 30px; line-height: 1.3; color: var(--muted); margin: 0 0 26px !important; }
.title-parts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 25px; margin: 0 !important; }
.title-parts b { color: var(--accent); margin-right: 4px; }
.title-parts i { font-style: normal; color: var(--faint); font-size: 20px; }
.title-motif { position: absolute; right: 92px; top: 78px; width: 300px; height: 300px; margin: 0; color: var(--ink); }
.title-motif svg { width: 100%; height: 100%; display: block; }
.course-map { position: absolute; left: 88px; right: 88px; top: 486px; display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.course-map li { flex: 1 1 0; padding: 0 !important; margin: 0 !important; position: relative; }
.course-map li::before { content: none !important; }
.course-map li + li::after { content: '→'; position: absolute; left: -12px; top: 50px; width: 10px; text-align: center; color: var(--faint); font-size: 16px; }
.course-map a { display: flex; flex-direction: column; gap: 6px; height: 128px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 8px; color: var(--muted); text-decoration: none; }
.course-map .cm-num { font: 700 15px/1 ETBook, Georgia, serif; letter-spacing: .12em; color: var(--faint); }
.course-map .cm-num::before { content: 'Lecture '; }
.course-map .cm-title { font-size: 20px; line-height: 1.15; color: var(--ink); }
.course-map .cm-q { font-size: 15.5px; line-height: 1.3; font-style: italic; }
.course-map li.now a { border: 2px solid var(--accent); background: var(--accent-soft); }
.course-map li.now .cm-num, .course-map li.now .cm-title { color: var(--accent); font-weight: 700; }
.course-map li.done a { background: var(--panel); }
.title-credit { position: absolute; left: 88px; bottom: 30px; font-size: 16px; color: var(--faint); margin: 0 !important; }
.title-credit a { color: var(--muted); }

/* ---------- Opening question ---------- */
.stats { display: flex; gap: 22px; margin: 4px 0 22px; }
.stat { flex: 1 1 0; border-top: 4px solid var(--accent); background: var(--panel); border-radius: 0 0 8px 8px; padding: 12px 18px 14px; }
.stat b { display: block; font: 400 50px/1 ETBook, Georgia, serif; color: var(--accent); margin-bottom: 6px; }
.stat b .katex { font-size: 1em; }
.stat > span { font-size: 21px; line-height: 1.3; display: block; }
.vote { display: grid; grid-template-columns: 250px 1fr; gap: 0 26px; align-items: center; margin-bottom: 18px; }
.vote > p { font-size: 22px; line-height: 1.35; margin: 0 !important; }
.vote > p b { display: block; font: 700 13.5px/1 ETBook, Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: var(--check); margin-bottom: 8px; }
.options { display: flex; gap: 22px; margin: 0; }
.option { flex: 1 1 0; border: 2px solid var(--rule); border-radius: 10px; padding: 12px 16px 14px; text-align: center; }
.option b { display: block; font: 700 14px/1 ETBook, Georgia, serif; letter-spacing: .15em; color: var(--muted); margin-bottom: 8px; }
.option > span { font-size: 42px; line-height: 1.1; }
.option > span.opt-text { font-size: 28px; line-height: 1.2; }
.wide-table { width: 100%; }
.wide-table th { width: 120px; }

/* ---------- Roadmap ---------- */
.route { display: flex; align-items: stretch; margin: 0 0 18px; }
.route-part { flex: 1 1 0; display: flex; flex-direction: column; background: var(--panel); border-top: 4px solid var(--accent); border-radius: 0 0 8px 8px; padding: 14px 18px 12px; }
.route-num { font: 700 13.5px/1 ETBook, Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px !important; }
.route-title { font-size: 27px; line-height: 1.12; font-weight: 700; margin: 0 0 8px !important; }
.route-q { font-size: 20px; line-height: 1.3; font-style: italic; color: #3b3f44; margin: 0 0 12px !important; }
.route-terms { margin: auto 0 4px !important; line-height: 1; }
.route-ref { font-size: 15px; color: var(--muted); margin: 4px 0 0 !important; }
.route-arrow { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 26px; }
.outcomes { border-top: 1px solid var(--rule); padding-top: 12px; }
.outcomes ul { columns: 2; column-gap: 40px; font-size: 21px; line-height: 1.35; }
.outcomes li { break-inside: avoid; }
.outcomes li::before { content: '✓' !important; color: var(--accent) !important; }

/* ---------- Part opener ---------- */
.layout-part { padding-top: 74px; }
.part-grid { display: grid; grid-template-columns: 500px 1fr; gap: 56px; align-items: center; }
.part-num { font: 700 15px/1 ETBook, Georgia, serif; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px !important; }
.part-num b { font-weight: 700; }
.part-num > span { color: var(--faint); }
.layout-part::before { content: ''; position: absolute; left: 0; top: 48px; bottom: 0; width: 592px; background: var(--accent-soft); }
.layout-part .body { justify-content: center; position: relative; }
.part-numeral { position: absolute; left: 404px; bottom: -58px; font: 400 250px/1 ETBook, Georgia, serif; color: #d2e0ed; pointer-events: none; margin: 0 !important; }
.part-grid > * { position: relative; z-index: 1; }
.layout-part h2 { font-size: 52px; line-height: 1.05; margin: 0 0 18px; }
.part-q { font-size: 28px; line-height: 1.3; font-style: italic; color: var(--accent); border-left: 3px solid var(--accent); padding-left: 18px; }
.part-terms { margin-top: 22px !important; line-height: 1; }
.part-terms .blk-label { margin-bottom: 10px !important; }
.part-terms .chip { background: #fff; }
.part-ref { font-size: 17px; margin-top: 14px !important; }
.part-ref a { color: var(--muted); }
.part-side { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.part-bridge { font-size: 20px; line-height: 1.35; color: var(--muted); background: var(--panel); border-radius: 6px; padding: 10px 16px; }
.part-bridge b { font-size: 13.5px; letter-spacing: .15em; text-transform: uppercase; margin-right: 8px; color: var(--muted); }
.part-why { margin-bottom: 8px; }
.part-why p:last-child { font-size: 23px; line-height: 1.38; }
.part-why .blk-label { color: var(--econ); }
.part-list ol { font-size: 21px; line-height: 1.3; }
.part-list li { margin-bottom: 6px !important; padding-left: 92px !important; }
.part-list li::before { content: none !important; }
.part-list .pl-ref { position: absolute; left: 0; width: 84px; font-size: 16px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.part-list li.is-video { color: #3d5466; }
.part-list li.is-video .pl-ref { color: #2a9bbd; font-size: 15px; }

/* ---------- Concept map and summary sheet ---------- */
.concept-map { position: relative; width: 1152px; height: 500px; margin: 0 auto; }
.map-layer { position: absolute; inset: 0; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-edge { stroke: #5d6670; stroke-width: 1.6; fill: none; }
.map-edge.dashed { stroke-dasharray: 5 4; }
.map-label { position: absolute; transform: translate(-50%, -50%); background: var(--paper); padding: 1px 6px; font: italic 16px/1.2 ETBook, Georgia, serif; color: #4a4f55; white-space: nowrap; }
.map-node { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid #8c96a0; background: #fff; font: 19px/1.22 ETBook, Georgia, serif; }
.map-node > span { display: block; }
.map-node .katex { white-space: nowrap; }
.map-node.key { border-width: 2.5px; font-weight: 700; }
.map-node.p1 { background: #eaf2f9; border-color: #6b93b6; }
.map-node.p2 { background: #edf5eb; border-color: #6f9a74; }
.map-node.p3 { background: #f8f0e3; border-color: #b78a4d; }
.map-node.p4 { background: #f1edf8; border-color: #8a7bb0; }
.map-col { position: absolute; top: -8px; margin: 0 !important; text-align: center; font: 700 13.5px/1 ETBook, Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.summary-sheet { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 36px; font-size: 18px; line-height: 1.3; }
.sum-col > .blk-label { color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 8px !important; }
.sum-part { margin-bottom: 8px; }
.sum-head { font: 700 13px/1 ETBook, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px !important; }
.sum-head b { color: var(--accent); }
.sum-term { margin: 0 0 4px !important; }
.sum-term dfn { margin-right: 4px; display: inline-block; }
.sum-term dfn::first-letter { text-transform: uppercase; }
.sum-formula { display: grid; grid-template-columns: 30px 170px 1fr; column-gap: 8px; align-items: baseline; margin: 0 0 6px; }
.sum-formula .f-num { font-size: 15px; }
.sum-name { font-weight: 700; font-size: 16px; line-height: 1.2; }
.sum-tex { white-space: nowrap; }
.sum-tex .katex { font-size: 1.04em; }
.summary-sheet.dense { font-size: 16.5px; line-height: 1.25; grid-template-columns: 1fr 1.75fr; gap: 0 30px; }
.summary-sheet.dense .sum-term { margin-bottom: 3px !important; }
.summary-sheet.dense .sum-formulas { columns: 2; column-gap: 26px; }
.summary-sheet.dense .sum-formulas > .blk-label { column-span: all; }
.summary-sheet.dense .sum-head { break-after: avoid; }
.summary-sheet.dense .sum-formula { display: block; break-inside: avoid; margin-bottom: 7px; }
.summary-sheet.dense .sum-formula .f-num { margin-right: 4px; }
.summary-sheet.dense .sum-name { font-size: 15.5px; }
.summary-sheet.dense .sum-tex { display: block; padding-left: 28px; white-space: normal; }
.summary-sheet.dense .sum-tex .katex { font-size: .98em; }
.summary-sheet.dense .sum-when { display: block; padding-left: 28px; font-size: 14px; }
.sum-when { grid-column: 3; font-size: 14.5px; line-height: 1.25; color: var(--muted); font-style: italic; }

/* ---------- Animation slides: the clip large on a dark stage, inside the route ---------- */
.layout-video { padding: 0; background: var(--film); }
.layout-video .rail { background: var(--film); border-bottom-color: #2a2e35; color: #6f7680; }
.layout-video .rail-seg.done { color: #8b929b !important; }
.layout-video .rail-seg.now { color: #e8eaed !important; border-top-color: var(--film-accent) !important; }
.layout-video .rail-dots i.here { background: var(--film-accent); border-color: var(--film-accent); }
.layout-video .body { position: absolute; inset: 0; }
.slide-video { margin: 0; position: absolute; left: 88px; top: 58px; width: 1104px; height: 621px; background: var(--film); }
.slide-video video, .slide-video .video-still { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--film); }
.slide-video .video-still { display: none; }
.video-play { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); background: rgba(16,18,23,.55); color: #fff; font: 46px/1 var(--ui); cursor: pointer;
  padding-left: 9px; transition: opacity .3s; }
.video-play:hover { background: rgba(16,18,23,.8); }
.slide-video.ended .video-play { left: auto; top: auto; right: 18px; bottom: 18px; margin: 0; width: 58px; height: 58px; padding: 0; font-size: 28px; }
.video-prompt { position: absolute; left: 40px; right: 40px; bottom: 34px; margin: 0 !important; padding: 12px 22px; background: rgba(16,18,23,.9);
  color: #ececec; font: 24px/1.38 ETBook, Georgia, serif; border-left: 3px solid var(--film-accent); transition: opacity .3s; }
.video-prompt-label { font: 700 13px/1 ETBook, Georgia, serif; letter-spacing: .15em; text-transform: uppercase; color: var(--film-accent); margin-right: 10px; }
.video-prompt .katex { font-size: 1.05em; }
.slide-video.playing .video-play, .slide-video.playing .video-prompt, .slide-video.ended .video-prompt { opacity: 0; pointer-events: none; }
.video-progress { position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; background: rgba(255,255,255,.12); }
.video-progress > span { display: block; height: 100%; width: 0; background: var(--film-accent); }
.layout-video .slide-footer { color: #7d838b; z-index: 2; left: 88px; right: 88px; bottom: 14px; }
.layout-video .slide-footer a { color: #b7bdc4; }
.layout-video .slide-footer a b { color: var(--film-accent); }

/* ---------- Presenting (JavaScript on) ---------- */
html.js, html.js body { height: 100%; overflow: hidden; }
.js .deck { position: fixed; inset: 0; }
.js .deck > .slide { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--scale, 1)); box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 18px 60px rgba(0,0,0,.35); }
.js .deck > .slide.current { display: flex; }
.js .build { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; }
.js .build.shown { opacity: 1; visibility: visible; }
.deck-ui { font-family: var(--ui); }
.deck-ui .progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); z-index: 5; }
.deck-ui .progress > span { display: block; height: 100%; width: 0; background: #6aa7d1; transition: width .25s; }
.deck-ui .controls { position: fixed; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 10px;
  background: rgba(20,21,24,.82); color: #eee; z-index: 6; opacity: 0; transition: opacity .3s; }
.deck-ui.active .controls, .deck-ui .controls:focus-within { opacity: 1; }
.deck-ui button { font: 600 17px/1 var(--ui); color: #eee; background: transparent; border: 0; border-radius: 7px; min-width: 38px; height: 38px; cursor: pointer; }
.deck-ui button:hover, .deck-ui button:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.deck-ui .counter { font: 14px/1 var(--ui); color: #bbb; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.deck-ui .blank { position: fixed; inset: 0; background: #000; z-index: 20; }
.deck-ui .help { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 21; width: 560px; max-width: calc(100vw - 32px);
  background: #fff; color: #161616; border-radius: 14px; padding: 26px 30px; box-shadow: 0 24px 80px rgba(0,0,0,.5); font: 16px/1.5 var(--ui); }
.deck-ui .help h2 { font: 700 19px/1.2 var(--ui); margin: 0 0 14px; }
.deck-ui .help dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; }
.deck-ui .help dt { font-weight: 700; }
.deck-ui .help dd { margin: 0; }
.deck-ui .help p { margin: 14px 0 0; color: #555; }
.deck-ui .sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.notes { display: none; }

/* Overview: every slide as a thumbnail; choose one to go there. */
.overview .deck { overflow-y: auto; padding: 36px 40px 60px; display: grid; grid-template-columns: repeat(auto-fill, 256px); gap: 26px 22px; justify-content: center; align-content: start; }
.overview .deck > .slide { display: flex; position: relative; left: auto; top: auto; transform: scale(.2); transform-origin: 0 0; margin: 0 -1024px -576px 0; cursor: pointer; box-shadow: none; }
.overview .deck > .slide.current { outline: 22px solid #6aa7d1; }
.overview .deck > .slide:hover { outline: 22px solid rgba(106,167,209,.5); }
.overview .build { opacity: 1; visibility: visible; }

/* Presenter window: the current slide, the next one, the notes and a timer. */
.presenter body { background: #121316; color: #e8e8e8; }
.presenter .deck { inset: 64px 34vw 16px 16px; }
.presenter .deck-ui .controls { display: none; }
.presenter-panel { position: fixed; top: 64px; right: 16px; bottom: 16px; width: calc(34vw - 32px); display: flex; flex-direction: column; gap: 14px; font-family: var(--ui); }
.presenter-bar { position: fixed; left: 16px; right: 16px; top: 12px; height: 40px; display: flex; align-items: center; gap: 22px; font: 600 18px/1 var(--ui); color: #ddd; }
.presenter-bar .p-timer { font: 700 26px/1 var(--ui); font-variant-numeric: tabular-nums; color: #fff; background: none; border: 0; cursor: pointer; padding: 0; }
.presenter-bar .p-hint { margin-left: auto; font: 13px/1.3 var(--ui); color: #8d939b; }
.p-next { flex: 0 0 auto; }
.p-next > p, .p-notes-head { font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #8d939b; margin: 0 0 8px; }
.p-next-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 4px; }
.p-next-frame > .slide { position: absolute; left: 0; top: 0; transform: scale(var(--next-scale, .3)); transform-origin: 0 0; display: flex; }
.p-next-frame .p-end { position: absolute; inset: 0; display: grid; place-items: center; color: #888; font: 16px var(--ui); }
.p-notes { flex: 1 1 auto; overflow-y: auto; background: #1b1c20; border-radius: 6px; padding: 16px 20px; font: 21px/1.5 var(--ui); color: #f0f0f0; }
.p-notes p { margin: 0 0 .7em; }
.p-notes ul { margin: 0 0 .7em; padding-left: 1.2em; }
.p-notes .katex { font-size: 1.05em; }

/* ---------- Print and the PDF: one page per slide, every reveal shown, each animation as its final frame ---------- */
@page { size: 1280px 720px; margin: 0; }
@media print {
  html, body, html.js, html.js body { height: auto; overflow: visible; background: #fff; }
  .deck, .js .deck, .presenter .deck { position: static; display: block; padding: 0; overflow: visible; }
  .deck > .slide, .js .deck > .slide, .overview .deck > .slide { display: flex !important; position: relative !important; left: auto !important; top: auto !important;
    transform: none !important; margin: 0 !important; box-shadow: none !important; outline: none !important; break-after: page; page-break-after: always; }
  .deck > .slide:last-child { break-after: auto; page-break-after: auto; }
  .build, .js .build { opacity: 1 !important; visibility: visible !important; transition: none; }
  .deck-ui, .presenter-panel, .presenter-bar, .notes { display: none !important; }
  .slide-video video, .video-play, .video-progress, .video-prompt { display: none !important; }
  .slide-video .video-still { display: block; }
}
/* The same flow on screen for a handout preview (?print). The PDF script loads it too; print rules above then apply. */
@media screen {
  .print-mode body { background: #8a8a8a; }
  .print-mode .deck { display: grid; justify-content: center; gap: 24px; padding: 24px 0; }
  .print-mode .notes, .print-mode .slide-video video, .print-mode .video-play, .print-mode .video-progress, .print-mode .video-prompt { display: none; }
  .print-mode .slide-video .video-still { display: block; }
}