@font-face { font-family: "STIX Two Text"; src: url("df7466d8cd44a4e376d14f28af7aff5e25d77f475aa2164988360db07db96966.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("0f124a2036164b5901e596a7e58caa3811f759251415fcaa23acb76edd63636a.otf") format("opentype"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("1682cfa1e2e60e3bc3c63655c9020ba398d45b61e16fe5d863f2cd43909beb66.otf") format("opentype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("0c9c3124f6edbc5c07658bdecb1028aceb6e22ea6c0f34e46ec6ffb4fefb41a7.otf") format("opentype"); font-style: italic; font-weight: 600; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("3465fca932b801fec1b241cc9561ac082d22d86e400b68fd2395636316781133.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("ec2fc287b9c48b39bdad8ecd707a0270201911f90ee48ae287ab307a5601ca09.otf") format("opentype"); font-style: italic; font-weight: 700; font-display: swap; }

:root {
  --ink: #14201d;
  --muted: #66716d;
  --paper: #fbfaf6;
  --panel: #f1f0ea;
  --line: #d9d8d0;
  --accent: #ac4b32;
  --accent-soft: #fff0ea;
  --green: #26725d;
  --green-soft: #e8f3ef;
  --blue: #496c83;
  --surface: #fff;
  --surface-muted: #f6f7f5;
  --blue-soft: #f0f5f8;
  --blue-line: #b8cbd6;
  --green-line: #b9cec5;
  --criterion: #845b24;
  --criterion-soft: #fcf7ed;
  --criterion-line: #d9c6a7;
  --radius-control: 6px;
  --font-reading: "STIX Two Text", Georgia, serif;
  --font-interface: Inter, ui-sans-serif, system-ui, sans-serif;
  --shadow: 0 16px 48px rgba(31, 38, 35, 0.13);
}

/* Presentation-only theme tokens. Reader and scientific artwork retain their
   existing palette; artwork is isolated on an explicit light plate. */
[data-presentation-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2f3; --muted: #b7c4c9; --paper: #142129;
  --panel: #21343e; --line: #526772; --surface: #1b2c35;
  --surface-muted: #253942; --blue: #89cdec; --blue-soft: #243d4b;
  --blue-line: #507589; --green: #88d6b9; --green-soft: #203e38;
  --green-line: #538472; --accent: #ffb192; --accent-soft: #49352f;
  --criterion: #f0cc91; --criterion-soft: #3c3528; --criterion-line: #8c7955;
}
[data-high-contrast="true"] { --muted: #354641; --line: #75877f; }
[data-presentation-theme="dark"][data-high-contrast="true"] { --ink: #fff; --muted: #e2edf2; --line: #a8b9c2; --paper: #09151d; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell :is(button, a, input, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.search-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }

.app-shell { --left-panel-width: 272px; --right-panel-width: 380px; height: 100vh; display: grid; grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width); grid-template-rows: 58px minmax(0, 1fr); background: var(--paper); }
.topbar { grid-column: 1 / -1; display: grid; grid-template-columns: var(--left-panel-width) 1fr var(--right-panel-width); align-items: center; border-bottom: 1px solid var(--line); background: rgba(251, 250, 246, .96); z-index: 30; }
.brand { height: 100%; display: flex; align-items: center; gap: 11px; padding: 0 18px; border-right: 1px solid var(--line); }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--accent); font: 700 20px/1 Georgia, serif; }
.brand div { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font: 700 16px/1.1 Georgia, serif; letter-spacing: .01em; }
.brand div span { margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.mode-switch { justify-self: center; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #ecebe5; }
.mode-switch button { min-width: 76px; padding: 7px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.mode-switch button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.topbar-actions { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 12px; border-left: 1px solid var(--line); }
.source-trust { display: none; color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.source-trust i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.intake-link { padding: 6px 8px; border: 1px solid var(--blue-line); border-radius: var(--radius-control); color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.intake-link:hover, .intake-link:focus-visible { border-color: var(--accent); outline: 0; }
.refresh-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.refresh-button:hover:not(:disabled) { color: var(--ink); border-color: #bdbbb1; }
.refresh-button:disabled { opacity: .55; cursor: wait; }
.refresh-button > span { font-size: 14px; line-height: 1; }
.panel-toggle, .comments-toggle { padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 750; cursor: pointer; }
.panel-toggle:hover, .comments-toggle:hover, .panel-toggle.is-active, .comments-toggle.is-active { border-color: var(--line); color: var(--ink); background: #fff; }
.comments-toggle b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; border-radius: 10px; color: #fff; background: var(--accent); }

.panel-minimize { flex: 0 0 auto; display: inline-grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.75); font: 700 18px/1 Georgia, serif; cursor: pointer; }
.panel-minimize:hover, .panel-minimize:focus-visible { border-color: #9fb4c1; color: var(--blue); background: #fff; outline: 0; box-shadow: 0 0 0 2px rgba(73,108,131,.16); }
.panel-restore { display: none; width: 100%; height: 100%; padding: 12px 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.panel-restore:hover, .panel-restore:focus-visible { color: var(--blue); background: rgba(255,255,255,.72); outline: 0; }
.panel-restore span { font: 700 23px/1 Georgia, serif; }
.panel-restore strong { margin-top: 12px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }

.panel-resizer { --panel-resizer-hit-width: 12px; position: fixed; z-index: 45; top: 58px; bottom: 0; width: var(--panel-resizer-hit-width); padding: 0; border: 0; outline: 0; background: transparent; cursor: col-resize; touch-action: none; }
/* Keep resize hit areas inside their owning side panels. In particular, the
   right handle must never cover the main reader's native scrollbar. */
.panel-resizer-left { left: calc(var(--left-panel-width) - var(--panel-resizer-hit-width)); }
.panel-resizer-right { right: calc(var(--right-panel-width) - var(--panel-resizer-hit-width)); }
.panel-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: transparent; transition: width .12s, background .12s; }
.panel-resizer-left::before { right: 0; }
.panel-resizer-right::before { left: 0; }
.panel-resizer > span { position: absolute; top: 50%; width: 4px; height: 36px; transform: translateY(-50%); border-radius: 3px; background: #aab7b3; box-shadow: 0 0 0 3px rgba(251,250,246,.88); opacity: 0; transition: opacity .12s; }
.panel-resizer-left > span { right: 2px; }
.panel-resizer-right > span { left: 2px; }
.panel-resizer:hover::before, .panel-resizer:focus-visible::before { width: 3px; background: var(--blue); }
.panel-resizer:hover > span, .panel-resizer:focus-visible > span { opacity: 1; }
.panel-resizer:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
body.margin-panel-resizing, body.margin-panel-resizing * { cursor: col-resize !important; user-select: none !important; }

.lecture-nav { grid-row: 2; padding: 18px 12px; overflow: hidden; border-right: 1px solid var(--line); background: var(--panel); }
.panel-heading, .comments-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 14px; }
.panel-heading-actions { display: flex; align-items: center; gap: 5px; }
.panel-heading > div:first-child, .comments-head > div:first-child { display: flex; flex-direction: column; }
.panel-heading span, .comments-head > div:first-child > span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.panel-heading strong, .comments-head > div:first-child > strong { margin-top: 4px; font: 600 16px/1.2 Georgia, serif; }
.search-field { display: flex; align-items: center; gap: 7px; height: 36px; margin: 0 3px 12px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.lecture-nav nav { height: calc(100% - 92px); overflow-y: auto; scrollbar-width: thin; }
.lecture-link { width: 100%; display: grid; grid-template-columns: 31px 1fr; gap: 8px; align-items: start; padding: 9px 8px; border: 0; border-radius: 8px; text-align: left; background: transparent; cursor: pointer; }
.lecture-link:hover { background: rgba(255,255,255,.65); }
.lecture-link.is-active { background: #fff; box-shadow: inset 3px 0 var(--blue), 0 1px 4px rgba(0,0,0,.04); }
.lecture-link > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: var(--muted); background: #e4e3dc; font: 700 10px/1 ui-monospace, monospace; }
.lecture-link.is-active > span { color: #fff; background: var(--blue); }
.lecture-link div { min-width: 0; display: flex; flex-direction: column; }
.lecture-link strong { color: var(--ink); font-size: 12px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.lecture-link small { margin-top: 4px; color: var(--muted); font-size: 11px; }

.reader-pane { grid-row: 2; min-width: 0; display: grid; grid-template-rows: 38px minmax(0,1fr); background: var(--paper); container-type: inline-size; }
.reader-status { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.6); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.reader-status div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.reader-status div span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-status i { width: 3px; height: 3px; border-radius: 50%; background: #aaa; }
.reader-status strong { color: var(--accent); font-size: 9px; text-transform: uppercase; white-space: nowrap; }
.lecture-scroll { overflow-y: auto; scroll-behavior: smooth; }
.lecture-html { max-width: 900px; margin: 0 auto; padding: 48px clamp(24px, 7cqi, 64px) 80px; color: #222a27; background: var(--surface); font: 17px/1.72 var(--font-reading); }
.lecture-html h1 { margin: 0 0 28px; padding-bottom: 19px; border-bottom: 1px solid #c9c8c0; color: #17221f; font-size: 35px; line-height: 1.14; letter-spacing: -.025em; }
.lecture-html h2 { margin: 47px 0 14px; color: #1e312b; font-size: 24px; line-height: 1.22; }
.lecture-html h3 { margin: 32px 0 10px; font-size: 19px; line-height: 1.3; }
.lecture-html .section-number { color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lecture-html h2.advanced-appendix .section-number { color: #7a4b1e; }
.lecture-html p { margin: 0 0 17px; }
.lecture-html blockquote { margin: 24px 0; padding: 14px 20px; border-left: 2px solid var(--line); background: var(--surface-muted); color: #3c4642; }
.lecture-html blockquote p:last-child { margin-bottom: 0; }
.lecture-html strong { color: #172b25; }
.lecture-html code { border-radius: 4px; padding: 1px 4px; background: #f0efe9; font: .82em/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.lecture-html .semantic-block { --block-rule: var(--green); --block-line: var(--green-line); margin: 32px 0; padding: 20px 22px 6px; border: 0; border-left: 2px solid var(--block-rule); border-bottom: 1px solid var(--block-line); border-radius: 0; background: var(--surface-muted); scroll-margin-top: 24px; }
.lecture-html .semantic-block.theorem, .lecture-html .semantic-block.lemma, .lecture-html .semantic-block.proposition, .lecture-html .semantic-block.corollary { --block-rule: var(--blue); --block-line: var(--blue-line); background: var(--surface); }
.lecture-html .semantic-block[data-semantic-kind="criterion"] { --block-rule: var(--criterion); --block-line: var(--criterion-line); background: var(--criterion-soft); }
.lecture-html .semantic-block-label { margin: 0 0 16px; color: var(--ink); font: 600 18px/1.4 var(--font-reading); }
.lecture-html .semantic-block-label strong { color: inherit; }
.lecture-html .semantic-block.worked-example { --block-rule: var(--blue); --block-line: var(--blue-line); background: var(--surface); padding: 0; }
.lecture-html .worked-example > .semantic-block-label { margin: 0; padding: 20px 22px; font-size: 20px; line-height: 1.35; break-after: avoid; }
.lecture-html .worked-example-part { padding: 20px 22px; }
.lecture-html .worked-example-problem { background: var(--blue-soft); border-block: 1px solid var(--blue-line); }
.lecture-html .worked-example-solution { background: var(--surface); }
.lecture-html .worked-example .worked-example-part-label { display: none; }
.lecture-html .worked-example-part > :last-child { margin-bottom: 0; }
.lecture-html .semantic-block.worked-example > :last-child { margin-bottom: 0; }
.lecture-html .worked-example-part-label > p { margin: 0; }
.lecture-html .semantic-block > :last-child { margin-bottom: 10px; }
.lecture-html .course-perspective { margin: 28px 0 36px; padding: 18px 22px; border: 0; border-block: 1px solid var(--line); border-radius: 0; color: #35413d; background: var(--surface-muted); font-size: .96em; line-height: 1.66; scroll-margin-top: 24px; }
.lecture-html .course-perspective-label { margin: 0 0 10px; color: var(--muted); font: 600 12px/1.4 var(--font-interface); letter-spacing: .055em; text-transform: uppercase; }
.lecture-html .course-perspective > p:last-child { margin-bottom: 0; }
.lecture-html mjx-container[jax="CHTML"] { color: inherit; }
.lecture-html mjx-container[jax="CHTML"][display="true"] { display: flex; justify-content: safe center; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: 6px; margin: 23px auto; text-align: center; font-size: 1.08em; }
.lecture-html mjx-container[display="true"] > mjx-math { flex: 0 0 auto; }
.lecture-html .equation { position: relative; scroll-margin-top: 24px; }
.lecture-html .equation-number { position: absolute; right: -56px; top: 50%; transform: translateY(-50%); color: var(--muted); font: .8em/1.2 "MJX-STX-N", "STIX Two Math", serif; white-space: nowrap; }
.lecture-html .worked-example .equation { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.lecture-html .worked-example .equation > :not(.equation-number) { grid-column: 1; grid-row: 1; min-width: 0; }
.lecture-html .worked-example .equation-number { position: static; grid-column: 2; grid-row: 1; transform: none; }
.lecture-html :is(.semantic-reference, .logical-reference) { color: var(--blue); font-weight: 620; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lecture-html :is(.semantic-reference, .logical-reference):hover, .lecture-html :is(.semantic-reference, .logical-reference):focus-visible { color: var(--accent); text-decoration-thickness: 2px; }
.lecture-html .logical-unit-anchor { display: block; position: relative; top: -24px; visibility: hidden; }
.lecture-html .citation { color: #315b70; }
.lecture-html .citation a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lecture-html h1#bibliography { margin: 52px 0 16px; padding: 0 0 10px; border-bottom: 1px solid #c9c8c0; color: #1e312b; font-size: 24px; line-height: 1.22; letter-spacing: 0; }
.lecture-html .references { margin-top: 48px; padding-top: 8px; border-top: 1px solid #c9c8c0; }
.lecture-html h1#bibliography + .references { margin-top: 0; border-top: 0; }
.lecture-html .csl-entry { margin: 0 0 14px; padding-left: 1.7em; text-indent: -1.7em; font-size: .94em; line-height: 1.55; }
.lecture-html .csl-left-margin { float: left; padding-right: .6em; }
.lecture-html .csl-right-inline { margin-left: 1.7em; }
.lecture-html .csl-entry::after { display: block; clear: both; content: ""; }
.lecture-html a { color: var(--blue); overflow-wrap: anywhere; text-underline-offset: 3px; }
.lecture-html .citation[data-source-kind="citation-occurrence"] { border-radius: 3px; }
.lecture-html .csl-entry[data-source-kind="bibliography-record"] { scroll-margin-top: 24px; }
.lecture-html :is(h2, h3, figure, .figure, .equation, .semantic-block, .course-perspective)[id] { scroll-margin-top: 24px; }
.lecture-html .equation:target { background: #fff7dc; box-shadow: -5px 0 #e0aa31; }
.lecture-html :is(img, .course-inline-figure) { display: block; max-width: 100%; height: auto; margin: 30px auto 12px; }
.lecture-html .numbered-figure { margin: 30px 0 24px; }
.lecture-html .numbered-figure > p:first-child { margin-bottom: 0; }
.lecture-html .numbered-figure :is(img, .course-inline-figure) { margin-top: 0; }
/* Figure dimensions are native CSS pixels, not PDF points. Small screens pan
   the artwork rather than shrinking scientific labels; captions still wrap. */
.lecture-html .numbered-figure > p:first-child,
.lecture-html .interactive-static {
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
}
.lecture-html .numbered-figure > p:first-child :is(img, .course-inline-figure)[data-figure-width-pt],
.lecture-html .interactive-static :is(img, .course-inline-figure)[data-figure-width-pt] {
  min-width: var(--figure-native-width); max-width: none; height: auto;
}
.lecture-html .numbered-figure > p:first-child:focus-visible,
.lecture-html .interactive-static:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}
.lecture-html .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lecture-html .figure-web-fill > p:first-child .image-comment-stage,
.lecture-html .figure-web-fill > p:first-child :is(img, .course-inline-figure) { width: 100%; }
.lecture-html :is(figcaption, .figure-caption) { max-width: 100%; margin: 12px auto 0; padding-top: 10px; border-top: 1px solid var(--line); color: #46514d; font-size: 15px; line-height: 1.5; }
.lecture-html .figure-label { color: #172b25; font-weight: 760; }
.lecture-html .numbered-figure:target { background: #fff7dc; box-shadow: -5px 0 #e0aa31; }
.lecture-html table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.lecture-html th, .lecture-html td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lecture-html th { background: var(--surface-muted); font-family: var(--font-interface); font-size: 12px; font-weight: 600; }
.lecture-html table { display: block; max-width: 100%; overflow-x: auto; }
.lecture-html ol, .lecture-html ul { padding-inline-start: 25px; }
.lecture-html ol { list-style-position: outside; }
.lecture-html ol:not([type]), .lecture-html ol.list-decimal { list-style-type: decimal; }
.lecture-html ol.list-lower-alpha { list-style-type: lower-alpha; }
.lecture-html ol.list-upper-alpha { list-style-type: upper-alpha; }
.lecture-html ol.list-lower-roman { list-style-type: lower-roman; }
.lecture-html ol.list-upper-roman { list-style-type: upper-roman; }
.lecture-html ul { list-style: disc outside; }
.lecture-html ul ul { list-style-type: circle; }
.lecture-html ul ul ul { list-style-type: square; }
.lecture-html li { margin-bottom: 8px; }
.lecture-html [data-commentable="block"] { position: relative; transition: background .16s, box-shadow .16s; }
.reader-pane.is-comment-mode .lecture-html [data-commentable="block"] { cursor: crosshair; }
.reader-pane.is-comment-mode .lecture-html [data-commentable="block"]:hover { background: var(--accent-soft); box-shadow: -7px 0 var(--accent-soft), 7px 0 var(--accent-soft); }
.reader-pane.is-inspect-mode .lecture-html [data-commentable] { cursor: help; }
.reader-pane.is-inspect-mode .lecture-html [data-commentable="block"]:hover { background: #edf4f8; box-shadow: -7px 0 #edf4f8, 7px 0 #edf4f8; }
.lecture-html [data-comment-count]:not([data-comment-count=""])::after { content: attr(data-comment-count); position: absolute; right: -36px; top: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--accent); font: 700 10px/1 ui-sans-serif, sans-serif; box-shadow: 0 0 0 3px #fff; }
.lecture-html .is-draft-anchor { background: var(--accent-soft) !important; box-shadow: -4px 0 var(--accent) !important; }
.lecture-html .is-active-comment-anchor { background: #fff7dc; box-shadow: -4px 0 #e0aa31; }
.lecture-html .is-source-anchor { background: #edf4f8 !important; box-shadow: -4px 0 var(--blue) !important; }
.image-comment-stage { position: relative; display: block; width: fit-content; max-width: 100%; margin: 30px auto 12px; line-height: 0; }
.image-comment-stage :is(img, .course-inline-figure) { margin: 0; }
.reader-pane.is-comment-mode .image-comment-stage { cursor: crosshair; outline: 1px dashed rgba(214,90,58,.4); outline-offset: 5px; }
.reader-pane.is-inspect-mode .image-comment-stage { cursor: crosshair; outline: 1px dashed rgba(73,108,131,.55); outline-offset: 5px; }
.draft-image-region, .saved-image-region { position: absolute; z-index: 4; border: 2px solid var(--accent); background: rgba(214,90,58,.16); }
.draft-image-region.is-source-region { border-color: var(--blue); background: rgba(73,108,131,.16); }
.saved-image-region { display: grid; place-items: center; min-width: 20px; min-height: 20px; padding: 0; color: #fff; background: rgba(214,90,58,.22); font: 800 10px/1 ui-sans-serif, sans-serif; cursor: pointer; }
.saved-image-region::after { content: attr(aria-label); position: absolute; left: -2px; top: -22px; padding: 3px 5px; color: #fff; background: var(--accent); font-size: 8px; white-space: nowrap; opacity: 0; }
.saved-image-region:hover::after { opacity: 1; }
.saved-image-region.is-active { border-width: 3px; background: rgba(224,170,49,.25); border-color: #d19b24; }
.saved-image-region.is-resolved { opacity: .45; }
.reader-loading { max-width: 700px; margin: 70px auto; padding: 40px; }
.reader-loading span { display: block; height: 14px; margin: 15px 0; border-radius: 3px; background: linear-gradient(90deg,#e9e8e2,#f6f5ef,#e9e8e2); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.reader-loading span:nth-child(1) { width: 65%; height: 32px; }.reader-loading span:nth-child(2) { width: 100%; }.reader-loading span:nth-child(3) { width: 93%; }.reader-loading span:nth-child(4) { width: 74%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.error-banner { position: fixed; z-index: 80; left: 50%; top: 70px; transform: translateX(-50%); padding: 10px 14px; border: 1px solid #e3a999; border-radius: 8px; color: #8b301c; background: #fff0ea; font-size: 12px; box-shadow: var(--shadow); }

.comments-panel { grid-row: 2; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #f8f7f3; overflow: hidden; }
.comments-head { flex: 0 0 auto; padding: 17px 18px 13px; border-bottom: 1px solid var(--line); }
.comments-head-actions { display: flex; align-items: center; gap: 5px; }
.history-action { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.history-action:hover:not(:disabled) { color: var(--ink); border-color: #bdbbb1; }
.history-action:disabled { opacity: .38; cursor: default; }
.history-action > span { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
.comment-instruction { display: flex; gap: 12px; margin: 14px; padding: 13px; border: 1px dashed #d3a596; border-radius: var(--radius-control); background: var(--accent-soft); }
.comment-instruction > span { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff; background: var(--accent); }
.comment-instruction strong { font-size: 12px; }.comment-instruction p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.comment-composer { flex: 0 0 auto; margin: 12px; padding: 12px; border: 1px solid #e1ad9f; border-radius: var(--radius-control); background: #fff; box-shadow: 0 9px 30px rgba(67,49,43,.08); }
.composer-kicker { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.composer-kicker button, .copy-locator { border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.anchor-proof { margin-bottom: 10px; padding: 9px; border-radius: var(--radius-control); background: #f4f3ed; }
.anchor-proof-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 11px; }
.anchor-proof-title span { color: var(--green); text-transform: uppercase; }
.anchor-proof code { display: block; overflow: hidden; color: var(--blue); font: 11px/1.35 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.anchor-proof small { display: block; margin-top: 5px; color: var(--muted); font: 11px/1.4 ui-monospace, monospace; }
.anchor-proof pre { max-height: 70px; margin: 8px 0 5px; overflow: auto; white-space: pre-wrap; color: #3f4845; font: 11px/1.4 ui-monospace, monospace; }
.copy-locator { padding: 0; color: var(--green); }
.comment-composer label > span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; }
.comment-composer textarea { width: 100%; resize: vertical; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-control); outline: 0; font-size: 12px; line-height: 1.45; }
.comment-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-footer { display: flex; gap: 8px; margin-top: 8px; }
.composer-footer input { min-width: 0; flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-control); font-size: 11px; }
.primary-button { padding: 8px 12px; border: 0; border-radius: var(--radius-control); color: #fff; background: var(--accent); font-size: 11px; font-weight: 800; cursor: pointer; }
.primary-button:disabled { opacity: .45; cursor: default; }
.comment-tabs { display: flex; gap: 16px; flex: 0 0 auto; padding: 0 18px; border-bottom: 1px solid var(--line); }
.comment-tabs button { padding: 11px 0 9px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.comment-tabs button.is-active { color: var(--ink); border-color: var(--accent); }
.comment-tabs span { margin-left: 4px; color: #999; }
.comment-list { min-height: 0; flex: 1; overflow-y: auto; padding: 10px 12px 90px; }
.comment-card { margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; cursor: pointer; transition: border .15s, box-shadow .15s, opacity .15s; }
.comment-card:hover { border-color: #c6c4bb; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.comment-card.is-active { border-color: #dfad9e; box-shadow: 0 0 0 2px var(--accent-soft); }
.comment-card.is-resolved { opacity: .58; }
.comment-meta { display: flex; align-items: center; gap: 7px; }
.comment-index { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; background: var(--accent); font-size: 11px; font-weight: 800; }
.comment-meta strong { font-size: 11px; }.comment-meta time { margin-left: auto; color: #999; font-size: 11px; }
.comment-card > p { margin: 9px 0; color: #35403c; font-size: 13px; line-height: 1.5; }
.source-link { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border: 0; border-radius: 6px; background: var(--green-soft); color: var(--green); cursor: pointer; }
.source-link.is-stale { color: #93631f; background: #fff4d8; }
.source-link span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.source-link code { font: 11px/1 ui-monospace, monospace; }
.region-label { display: block; margin-top: 6px; color: var(--muted); font: 11px/1.2 ui-monospace, monospace; }
.comment-actions { display: flex; gap: 12px; margin-top: 8px; }
.comment-actions button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.comment-actions button:disabled { opacity: .4; cursor: default; }
.comment-actions .delete-action { margin-left: auto; color: #a23e2b; }
.delete-confirm { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 8px; border: 1px solid #e2b1a5; border-radius: 6px; background: var(--accent-soft); }
.delete-confirm > span { margin-right: auto; color: #7f3424; font-size: 11px; font-weight: 800; }
.delete-confirm button { padding: 3px 6px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.delete-confirm .danger-action { color: #fff; background: #a9432e; }
.delete-confirm button:disabled { opacity: .45; cursor: default; }
.empty-comments { display: grid; justify-items: center; padding: 60px 25px; color: var(--muted); text-align: center; }
.empty-comments > span { font-size: 29px; }.empty-comments strong { margin-top: 8px; color: var(--ink); font: 600 14px/1.3 Georgia, serif; }.empty-comments p { max-width: 210px; margin: 6px 0; font-size: 13px; line-height: 1.5; }
.source-drawer { position: absolute; z-index: 20; right: 12px; bottom: 12px; left: calc(100% - 368px); max-height: 42vh; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; box-shadow: var(--shadow); overflow: auto; }
.comments-panel { position: relative; }
.source-drawer-head { display: flex; justify-content: space-between; gap: 8px; }
.source-drawer-head div { min-width: 0; display: flex; flex-direction: column; }
.source-drawer-head span { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.source-drawer-head strong { margin-top: 4px; overflow: hidden; color: var(--blue); font: 11px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.source-drawer-head button, .mobile-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.checksum { display: grid; grid-template-columns: auto 1fr; gap: 7px; margin: 10px 0; color: var(--muted); font-size: 11px; }
.checksum code { overflow: hidden; color: #777; font: 11px/1.2 ui-monospace, monospace; text-overflow: ellipsis; }
.source-drawer pre { max-height: 160px; overflow: auto; padding: 9px; border-radius: 6px; background: #f3f2ec; white-space: pre-wrap; font: 11px/1.45 ui-monospace, monospace; }
.source-drawer > p { color: var(--muted); font-size: 11px; line-height: 1.45; }
.source-inspector { position: absolute; z-index: 30; inset: 0; display: flex; min-height: 0; flex-direction: column; background: #f8f7f3; }
.source-inspector-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: #f1f4f5; }
.source-inspector-head > div:first-child { min-width: 0; display: flex; flex-direction: column; }
.source-inspector-head > div:first-child span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.source-inspector-head > div:first-child strong { margin-top: 4px; overflow: hidden; font: 600 15px/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.source-inspector-head > div:last-child { display: flex; align-items: center; gap: 6px; }
.source-inspector-head > div:last-child > button:first-child { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.source-inspector-head > div:last-child > button:first-child.is-active { border-color: #9fb4c1; color: var(--blue); background: #edf4f8; }
.source-inspector-empty { flex: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 38px; color: var(--muted); text-align: center; }
.source-inspector-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #b9c9d2; border-radius: 14px; color: var(--blue); background: #edf4f8; font-size: 25px; }
.source-inspector-empty strong { margin-top: 16px; color: var(--ink); font: 600 17px/1.25 Georgia, serif; }
.source-inspector-empty p { max-width: 295px; margin: 9px 0 0; font-size: 13px; line-height: 1.55; }
.source-inspector-empty button { margin-top: 18px; padding: 8px 13px; border: 0; border-radius: var(--radius-control); color: #fff; background: var(--blue); font-size: 11px; font-weight: 800; cursor: pointer; }
.source-inspector-body { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.source-target-card { flex: 0 0 auto; margin: 12px 13px 9px; padding: 11px; border: 1px solid #c9d5dc; border-radius: var(--radius-control); background: #fff; }
.source-target-card > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.source-target-card > div:first-child span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.source-target-card > div:first-child b { padding: 2px 5px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.source-target-card > code { display: block; margin-top: 7px; overflow: hidden; color: #3f647a; font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.source-target-card blockquote { margin: 9px 0 0; padding: 7px 9px; border-left: 2px solid var(--blue); color: #3f4c52; background: #f1f5f7; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.source-target-card blockquote span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.source-target-card small { display: block; margin-top: 7px; color: var(--muted); font: 11px/1.4 ui-monospace, monospace; }
.source-target-card > button { margin-top: 7px; padding: 0; border: 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.source-loading, .source-warning { flex: 0 0 auto; margin: 0 13px 8px; padding: 8px 10px; border-radius: var(--radius-control); color: var(--muted); background: #ecebe5; font-size: 11px; }
.source-warning { color: #8b5d1b; background: #fff4d8; }
.source-stage-card { flex: 0 0 auto; margin: 0 13px 9px; border: 1px solid #c7b47d; border-radius: var(--radius-control); background: #fffdf6; overflow: hidden; }
.source-stage-card header, .source-stage-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; }
.source-stage-card header { border-bottom: 1px solid #e4dcc3; }.source-stage-card header div { min-width: 0; display: flex; flex-direction: column; }
.source-stage-card header span { color: #8b6d20; font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.source-stage-card header strong { margin-top: 2px; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.source-stage-card header b { flex: 0 0 auto; padding: 2px 5px; border-radius: var(--radius-control); color: #8b5d1b; background: #fff0c2; font-size: 11px; text-transform: uppercase; }
.source-stage-previews { display: grid; gap: 1px; background: #e4dcc3; }
.source-stage-previews figure { margin: 0; background: #fff; }
.source-stage-previews figcaption { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-bottom: 1px solid #ece7d7; }
.source-stage-previews figcaption strong { color: var(--ink); font-size: 11px; }
.source-stage-previews figcaption span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.source-stage-card :is(img, .course-inline-figure) { display: block; width: 100%; max-height: 205px; object-fit: contain; background: #fff; }
.source-stage-card footer { border-top: 1px solid #e4dcc3; color: var(--muted); font-size: 11px; }
.source-stage-card footer code { min-width: 0; overflow: hidden; color: #7c6940; text-overflow: ellipsis; white-space: nowrap; }
.source-stage-card footer span { flex: 0 0 auto; text-transform: uppercase; }
.source-document-tabs { flex: 0 0 auto; display: flex; gap: 6px; padding: 2px 13px 9px; overflow-x: auto; scrollbar-width: thin; }
.source-document-tabs button { min-width: 116px; max-width: 156px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--muted); background: #fff; text-align: left; cursor: pointer; }
.source-document-tabs button.is-active { border-color: #91aab9; color: var(--blue); background: #edf4f8; box-shadow: inset 0 -2px var(--blue); }
.source-document-tabs span, .source-document-tabs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-document-tabs span { font-size: 11px; font-weight: 800; }
.source-document-tabs small { margin-top: 3px; color: #8a918e; font: 11px/1.2 ui-monospace, monospace; }
.source-document { min-height: 240px; flex: 1; display: flex; flex-direction: column; margin: 0 13px 13px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; overflow: hidden; }
.source-document > header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.source-document-title { min-width: 0; display: flex; flex-direction: column; }
.source-document > header span { color: var(--ink); font-size: 11px; font-weight: 800; }
.source-document > header code { margin-top: 3px; overflow: hidden; color: var(--blue); font: 11px/1.25 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.source-document > header button { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--muted); background: #fafafa; font-size: 11px; font-weight: 750; cursor: pointer; }
.source-document-actions { flex: 0 0 auto; display: flex; gap: 5px; }
.source-document-actions button.is-active { border-color: #9fb4c1; color: var(--blue); background: #edf4f8; }
.source-document-meta { flex: 0 0 auto; display: flex; gap: 9px; align-items: center; padding: 6px 10px; color: var(--muted); background: #f4f3ed; font: 11px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.source-document-meta code { margin-left: auto; overflow: hidden; color: #858b88; text-overflow: ellipsis; white-space: nowrap; }
.source-document pre { min-height: 0; flex: 1; margin: 0; padding: 12px; overflow: auto; color: #26302d; background: #fbfbf8; tab-size: 2; white-space: pre; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.source-document pre.is-wrapped { overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.source-document pre code { font: inherit; }

/* Review UI shares one readable scale and predictable native-control geometry. */
:is(.comments-panel, .source-inspector, .source-drawer) button { min-height: 30px; }
:is(.comments-panel, .source-inspector, .source-drawer) :is(input, textarea) { font-size: 13px; }
.source-inspector-head, .source-document > header, .source-stage-card footer { flex-wrap: wrap; }
.source-target-card blockquote { max-height: 120px; overflow-y: auto; }
.source-target-card small, .anchor-proof small { overflow-wrap: anywhere; }
.source-target-card > div:first-child { flex-wrap: wrap; gap: 6px; }
.source-document-meta { flex-wrap: wrap; line-height: 1.4; }
.source-document-meta code { max-width: 100%; }

.mobile-icon, .mobile-close, .mobile-scrim { display: none; }

.topbar-actions :is(button, a) { min-height: 32px; font-size: 11px; white-space: nowrap; border-radius: var(--radius-control); }
.panel-heading span, .comments-head > div:first-child > span { font-size: 11px; letter-spacing: .06em; }

@media (min-width: 921px) {
  .lecture-nav.is-minimized, .comments-panel.is-minimized { padding: 0; }
  .lecture-nav.is-minimized > :not(.panel-restore), .comments-panel.is-minimized > :not(.panel-restore) { display: none; }
  .lecture-nav.is-minimized > .panel-restore, .comments-panel.is-minimized > .panel-restore { display: flex; align-items: center; flex-direction: column; }
  .app-shell.is-left-minimized .brand { justify-content: center; padding: 0; }
  .app-shell.is-left-minimized .brand div { display: none; }
  .app-shell.is-left-minimized .brand-mark { width: 28px; height: 28px; }
  .app-shell.is-right-minimized .topbar-actions { padding: 0; }
  .app-shell.is-right-minimized .topbar-actions > * { display: none; }
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: var(--left-panel-width) minmax(0,1fr) var(--right-panel-width); }
  .topbar { grid-template-columns: var(--left-panel-width) 1fr var(--right-panel-width); }
}

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 96px minmax(0, 1fr); }
  .topbar { grid-template-columns: 1fr auto; grid-template-rows: 58px 38px; padding-right: 9px; }
  .brand { grid-column: 1; grid-row: 1; border: 0; }
  .mode-switch { grid-column: 1 / -1; grid-row: 2; display: flex; align-self: start; padding: 0; background: transparent; border: 0; }
  .mode-switch button { min-width: 86px; padding: 7px 16px; }
  .topbar-actions { grid-column: 2; grid-row: 1; border: 0; }.source-trust { display: none; }.comments-toggle { display: block; }
  .mobile-icon, .mobile-close { display: block; }
  .mobile-icon { padding: 5px; border: 0; background: transparent; font-size: 18px; }
  .lecture-nav, .comments-panel { position: fixed; z-index: 60; top: 96px; bottom: 0; width: min(88vw, 360px); box-shadow: var(--shadow); transition: transform .2s ease; }
  .lecture-nav { left: 0; transform: translateX(-105%); }.lecture-nav.is-open { transform: translateX(0); }
  .comments-panel { right: 0; transform: translateX(105%); }.comments-panel.is-open { transform: translateX(0); }
  .reader-pane { grid-column: 1; }
  .mobile-scrim { position: fixed; z-index: 50; inset: 96px 0 0; display: block; border: 0; background: rgba(20,32,29,.28); }
  .panel-resizer { display: none; }
  .panel-minimize, .panel-restore { display: none; }
  .source-drawer { left: 12px; }
}

@container (max-width: 820px) {
  .lecture-html .equation { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .lecture-html .equation > :not(.equation-number) { grid-column: 1; grid-row: 1; min-width: 0; }
  .lecture-html .equation-number { position: static; grid-column: 2; grid-row: 1; transform: none; }
}

@media (max-width: 620px) {
  .topbar-actions { padding: 0 5px; }.brand { padding-left: 8px; }.brand div span { display: none; }
  .intake-link { display: none; }
  .topbar-actions .refresh-button { padding: 6px; font-size: 0; }.refresh-button > span { font-size: 16px; }
  .reader-status { padding: 0 11px; }.reader-status div span:last-child { max-width: 45vw; }.reader-status strong { display: none; }
  .lecture-html { padding: 35px 24px 70px; font-size: 16px; }.lecture-html h1 { font-size: 29px; }.lecture-html h2 { font-size: 22px; }
  .lecture-html [data-comment-count]:not([data-comment-count=""])::after { right: -19px; }

}

@media (max-width: 360px) {
  .brand { gap: 7px; padding-right: 6px; }
  .brand-mark { width: 24px; height: 26px; font-size: 18px; }
  .brand strong { font-size: 15px; }
  .topbar-actions { gap: 2px; padding-inline: 2px; }
  .topbar-actions :is(button, a) { padding-inline: 5px; }
}

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

/* Interactive study elements (Document 28 §6; Margin visual design policy row). The
   element is a semantic block with the blue interaction cue; its static form is
   the figure in place until the widget mounts; controls use the system sans. */
.lecture-html .semantic-block.interactive-element { --block-rule: var(--blue); --block-line: var(--blue-line); background: var(--surface); }
.lecture-html .interactive-static { margin: 0 0 14px; }
.lecture-html .interactive-static :is(img, .course-inline-figure) { display: block; max-width: 100%; height: auto; }
.lecture-html .interactive-element.is-live .interactive-static { display: none; }
/* Print the authored static example, never a partial playback or live controls.
   Restrict this to legacy studies with a declared fallback composition. */
@media print {
  .lecture-html .interactive-element[data-fallback] .interactive-static { display: block !important; }
  .lecture-html .interactive-element[data-fallback] .interactive-stage { display: none !important; }
}
.lecture-html .interactive-stage { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); font: 14px/1.4 var(--font-ui, system-ui, sans-serif); color: var(--ink); }
.lecture-html .interactive-description > p:last-child { margin-bottom: 0; }
/* Two palettes stay apart (Document 28 §6.2): Margin's blue is the interaction cue on the
   rule, the controls, and the focus ring; inside the stage the scientific palette of
   Document 08 encodes model state and data, and none of Margin's semantic colours appears. */
.lecture-html { --ix-blue: #0072B2; --ix-orange: #D55E00; --ix-green: #009E73; --ix-gray: #666666; --ix-blue-tint: #e3eef7; --ix-orange-tint: #fbeade; --ix-state-tint: #e9e6de; }
.lecture-html .interactive-notice { margin: -6px 0 12px; font: 12px/1.45 var(--font-ui, system-ui, sans-serif); color: var(--muted); }
.lecture-html .check-answer { margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.lecture-html .check-answer p { margin: 0; }
.lecture-html .check.is-live .check-answer[hidden] { display: none; }
.ix-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 8px; }
/* Keep Reset beside the first control on narrow Fermi panels. Preserve both
   plots and normal-sized labels instead of clipping the final tail readout. */
[data-ix-stage="ix_lec05_fermi_filling"][data-ix-compact] .ix-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 8px; }
[data-ix-stage="ix_lec05_fermi_filling"][data-ix-compact] .ix-range { width: 100%; }
[data-ix-stage="ix_lec05_fermi_filling"][data-ix-compact] .ix-button-reset { grid-column: 2; grid-row: 1; }
[data-ix-stage="ix_lec05_fermi_filling"][data-ix-compact] .ix-segmented { grid-column: 1 / -1; grid-row: 2; }
.ix-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.ix-control-label, .ix-segmented legend { font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--muted); }
.ix-range { grid-column: 1 / -1; grid-row: 2; width: 180px; max-width: 100%; accent-color: var(--blue); }
.ix-control-value { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.ix-segmented { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; border: 0; }
.ix-segmented legend { padding: 0; margin-bottom: 4px; }
.ix-segment { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.ix-segment input { accent-color: var(--blue); }
.ix-button { min-height: 30px; padding: 4px 12px; border: 1px solid var(--blue); border-radius: 4px; background: var(--surface); color: var(--blue); font: inherit; cursor: pointer; }
.ix-button:hover { background: var(--blue-soft); }
.ix-button:focus-visible, .ix-spin:focus-visible, .ix-range:focus-visible, .ix-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ix-button:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.ix-button-run { min-width: 70px; }
.ix-stage { margin: 0 0 8px; }
.ix-cell-stage { display: flex; justify-content: space-evenly; align-items: center; gap: 10px; }
.ix-cell-panel { margin: 0 !important; min-width: 0; text-align: center; }
.lecture-html .ix-cell-panel { padding: 0; border: 0; }
.ix-cell-panel > figcaption { font: 14px/1.3 var(--font-ui, system-ui, sans-serif) !important; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; }
.ix-cell-plot { display: block; margin: 0 auto; max-width: 100%; height: auto; color: var(--ink); }
.ix-cell-axis { font-size: 13px; }
.ix-cell-legend { display: flex; justify-content: center; gap: 18px; font-size: 13px; }
.ix-cell-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.ix-reciprocal-cell .ix-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; }
.ix-reciprocal-cell .ix-control { min-width: 0; }
.ix-reciprocal-cell .ix-range { width: 100%; }
.ix-reciprocal-cell .ix-button-reset { justify-self: start; grid-column: 3; grid-row: 1 / 3; align-self: center; }
.ix-reciprocal-cell .ix-readouts { font-size: 13px; gap: 4px 14px; }
@media (max-width: 480px) { .ix-reciprocal-cell .ix-controls { grid-template-columns: minmax(0,1fr); } .ix-reciprocal-cell .ix-button-reset { grid-column: auto; grid-row: auto; } }
[data-ix-presentation] .ix-cell-panel > figcaption, [data-ix-presentation] .ix-cell-axis, [data-ix-presentation] .ix-cell-legend { font-size: 17px !important; }
[data-ix-presentation].ix-reciprocal-cell { padding: 6px !important; }
[data-ix-presentation].ix-reciprocal-cell .ix-controls { gap: 8px; margin-bottom: 6px; }
.lecture-html .ix-stage .ix-legend { margin: 0 0 6px; }
.ix-chain-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 6px 0 4px; }
.ix-spin.is-down { background: var(--ix-state-tint); }
.ix-bond { display: inline-block; width: 26px; height: 3px; background: var(--ix-blue); }
.ix-bond.is-wall { background: var(--ix-orange); height: 5px; }
.ix-ledger-row { display: flex; flex-wrap: wrap; gap: 0; padding-left: 20px; font-variant-numeric: tabular-nums; }
.ix-ledger-cell { display: inline-block; width: 66px; font-size: 12px; color: var(--muted); }
.ix-ledger-cell.is-wall { color: var(--ix-orange); }
.ix-chain .ix-bond-state { display: block; }
.ix-chain .ix-closure-label .ix-bond-state { display: inline; margin-right: 4px; }
.ix-closing { font-size: 13px; color: var(--muted); }
.ix-closing.is-wall { color: var(--ix-orange); }
.ix-readouts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ix-readout { display: inline-flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.ix-readout-symbol { color: var(--muted); font-family: var(--font-reading); }
.ix-readout-value { color: var(--ink); font-family: var(--font-reading); font-weight: 400; }
.ix-quiz { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); font: 14px/1.45 var(--font-ui, system-ui, sans-serif); }
.ix-quiz-stem { margin: 0 0 8px; font-family: var(--font-reading); font-size: 16px; }
.ix-quiz-item { display: grid; gap: 8px; margin: 0 0 12px; }
.ix-quiz-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ix-input { width: 120px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.ix-choice { display: flex; gap: 8px; align-items: baseline; }
.ix-quiz-actions { display: flex; gap: 10px; }
.ix-quiz-feedback { margin: 0; min-height: 1.4em; }
/* A quiz outcome is a word in ink, not a colour (Document 28 §6.9). */
.ix-quiz-feedback[data-state] { padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ix-button, .ix-spin { transition: none; } }

.ix-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.ix-column-title { margin: 0 0 6px; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.ix-note { margin: 6px 0 0; font-size: 13px; color: var(--ink); }
.ix-bar-row { display: grid; grid-template-columns: minmax(120px, auto) 1fr; align-items: center; gap: 10px; margin: 4px 0; font-size: 12px; color: var(--muted); }
.ix-bar { display: block; height: 8px; border-radius: 2px; background: #e9e6de; overflow: hidden; }
.ix-bar-fill { display: block; height: 100%; background: var(--ix-blue); }
.ix-bar-fill.is-green { background: var(--ix-green); }
.ix-bar-fill.is-orange { background: var(--ix-orange); }
.ix-plot { display: block; max-width: 100%; color: var(--ink); }
.ix-vector-handle { cursor: grab; touch-action: none; }
.ix-vector-handle { fill: var(--surface); fill-opacity: .12; stroke: var(--blue); stroke-width: 2; }
.ix-vector-handle:hover, .ix-vector-handle:focus-visible { fill-opacity: .25; stroke-width: 3.5; outline: none; }
.ix-cell-stage.is-dragging, .ix-cell-stage.is-dragging * { cursor: grabbing; }
.ix-cell-drag-help { max-width: 70ch; }
.ix-cell-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ix-cell-numeric { flex: 1; }
.ix-cell-numeric summary { cursor: pointer; font-size: 14px; padding: 6px 0; }
.ix-cell-numeric .ix-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
[data-ix-presentation].ix-reciprocal-cell .ix-controls { grid-template-columns: repeat(4,minmax(0,1fr)); }
[data-ix-presentation] .ix-cell-drag-help { max-width: none; font-size: 17px; margin: 0 0 6px; }
[data-ix-presentation] .ix-cell-numeric summary { font-size: 17px; }
@media (max-width: 480px) { .ix-cell-numeric .ix-controls { grid-template-columns: minmax(0,1fr); } }
.ix-record { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; font-variant-numeric: tabular-nums; }
.ix-outcome { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; font-size: 12px; }
.ix-outcome.is-plus { background: var(--ix-blue-tint); color: var(--ix-blue); }
.ix-outcome.is-minus { background: var(--ix-orange-tint); color: var(--ix-orange); }

/* Rendered mathematics inside an element: the same MathJax CommonHTML the note
   uses, at the surrounding size (Document 28 §6.4). */
.ix-math { display: inline-block; }
.ix-math mjx-container { display: inline-block; margin: 0; font-size: 108%; }
.ix-math mjx-container[display="true"] { display: inline-block; margin: 0; }
.ix-control-label .ix-math { margin-left: 5px; text-transform: none; letter-spacing: normal; }
.ix-readout-symbol { display: inline-flex; align-items: baseline; gap: 5px; }
.ix-readout-value .ix-math { margin-left: 3px; }
/* A plot's axis labels and legend are HTML beside the drawing, because rendered
   mathematics cannot live inside the SVG. */
.ix-plot-frame { margin: 0; }
.ix-plot-area { display: grid; grid-template-columns: 1.5em 1fr; align-items: stretch; gap: 6px; }
.ix-plot-area > svg { align-self: center; }
/* The vertical axis label is laid out horizontally and rotated as one piece: in a vertical
   writing mode the rendered mathematics of the label would stack its glyphs one per line. */
.ix-plot-ylabel { position: relative; font-size: 12px; color: var(--muted); }
.ix-plot-ylabel > span { position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.ix-plot-xlabel { margin-top: 2px; text-align: center; font-size: 12px; color: var(--muted); }
.ix-plot-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.ix-plot-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ix-plot-swatch { display: inline-block; width: 20px; height: 0; border-top: 2px solid var(--swatch, var(--ix-blue)); }
.ix-plot-swatch.is-dashed { border-top-style: dashed; }

/* A site and the bond that follows it wrap as one unit, so a long chain never
   separates a bond from its ledger entry. */
.lecture-html .ix-chain-row { align-items: start; gap: 0 0; }
.ix-chain-unit { display: grid; grid-template-columns: 40px 26px; grid-template-rows: auto auto; align-items: center; justify-items: center; }
.ix-chain-unit.is-last { grid-template-columns: 40px; }
.ix-chain-unit > .ix-spin { grid-column: 1; grid-row: 1; }
.ix-chain-unit > .ix-bond { grid-column: 2; grid-row: 1; width: 100%; }
.ix-chain-unit > .ix-ledger-cell { grid-column: 2; grid-row: 2; width: max-content; padding-top: 3px; text-align: center; }
.ix-record.is-dense .ix-outcome { width: 15px; height: 15px; font-size: 10px; border-radius: 2px; }
.ix-record.is-dense { gap: 2px; }
.ix-quiz-state { color: inherit; }
.ix-note .ix-math { margin: 0 3px; }

/* The chain of Figure 1.2: a circle for each site carrying its spin arrow, a
   coloured segment for each bond, and the closure drawn as an explicit bond. */
.ix-chain-stage { display: inline-block; padding-top: 26px; }
.ix-closure { height: 24px; margin: 0 18px; border: 2px solid var(--ix-blue); border-bottom: 0; border-radius: 11px 11px 0 0; }
.ix-closure.is-wall { border-color: var(--ix-orange); }
.ix-closure-label { margin-bottom: 2px; text-align: center; font-size: 13px; color: var(--muted); }
.ix-open-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.ix-spin { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font: 19px/1 var(--font-reading); cursor: pointer; }
.ix-spin.is-down { background: var(--ix-state-tint); border-color: var(--ix-gray); }
.ix-spin:hover { border-color: var(--blue); }
.ix-chain-unit { grid-template-columns: 36px 22px; }
.ix-chain-unit.is-last { grid-template-columns: 36px; }
.ix-bond { width: 22px; height: 3px; }
.ix-bond.is-wall { height: 5px; }

/* Scientific plates inherit the figure typography, not the control chrome.
   Model colours remain distinct from the blue manipulation outline. */
.ix-stage, .ix-plot-frame, .ix-cell-panel, .ix-readouts { font-family: var(--font-reading); }
.ix-cell-panel > figcaption { font-family: var(--font-reading) !important; color: var(--ink); }
.ix-plot-xlabel, .ix-plot-ylabel, .ix-plot-legend { color: var(--ink); }
.ix-plot text, .ix-plot > path, .ix-plot > line { opacity: 1; }
.ix-spin { outline: 1px solid var(--blue); outline-offset: 2px; }
.ix-spin:hover, .ix-spin:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ix-chain .ix-spin, .ix-chain .ix-spin.is-down { background: white; border-color: #666; }
.ix-chain .ix-bond, .ix-chain .ix-bond.is-wall { height: 2px; }
.ix-chain .ix-energy-legend { margin-top: 16px; }
.ix-range { appearance: none; height: 4px; margin-block: 9px; border: 1px solid var(--line); border-radius: 2px; background: var(--blue-line); cursor: pointer; }
.ix-range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border: 2px solid var(--blue); border-radius: 50%; background: var(--surface); }
.ix-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--blue); border-radius: 50%; background: var(--surface); }
.ix-range:disabled { opacity: .5; cursor: default; }
@media (min-width: 640px) {
  [data-ix-presentation].ix-paired-plots .ix-stage { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; align-items: start; }
}

/* Available reading-column width, not window width, governs scientific labels. */
.lecture-html { container-type: inline-size; container-name: lecture; }
.lecture-html .figure-pan-native > p:first-child { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.lecture-html .figure-pan-native > p:first-child .image-comment-stage,
.lecture-html .figure-pan-native > p:first-child :is(img, .course-inline-figure) { min-width: 620px; }
@container lecture (max-width: 620px) {
  .lecture-html .figure-pan-native > p:first-child {
    position: relative;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 24px 0 8px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  .lecture-html .figure-pan-native > p:first-child::before {
    content: "Scroll figure horizontally to inspect labels";
    position: absolute;
    top: 2px;
    left: 0;
    color: #5b6964;
    font: 600 11px/1.25 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .025em;
  }
  .lecture-html .figure-pan-native > p:first-child:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  .lecture-html .figure-pan-native > p:first-child .image-comment-stage {
    width: 620px;
    max-width: none;
    margin: 0;
  }
  .lecture-html .figure-pan-native > p:first-child :is(img, .course-inline-figure) {
    width: 620px;
    max-width: none;
  }
}