/* Reading edition: paper, typography, navigation and restrained motion. */
:root {
  --paper: #f3f2ec;
  --white: #fffefb;
  --ink: #24483b;
  --text: #354139;
  --muted: #748074;
  --line: #dfe3d9;
  --soft: #e8eee3;
  --accent: #b75b3e;
  --reading-font: var(--serif);
  --leading: 2.06;
  --book-padding: 46px;
  --book-width: 770px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
body {
  background-image: radial-gradient(ellipse at 83% 2%, #dee7d766, transparent 46%);
  transition: background-color .35s ease, color .25s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a, summary { -webkit-user-select: none; user-select: none; }
.prose a { -webkit-user-select: text; user-select: text; }
.topbar {
  height: 82px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
  transition: height .25s var(--ease), box-shadow .3s ease;
}
body.has-scrolled .topbar { box-shadow: 0 4px 22px #17342406; }
.brand-mark {
  width: 40px; height: 40px; line-height: 39px;
  background: var(--white); border-color: #859689;
  box-shadow: inset 0 0 0 4px var(--paper);
  transition: transform .6s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-10deg); }
.topnav a { position: relative; transition: color .2s; }
.topnav a::after {
  content: ''; position: absolute; bottom: -6px; left: 0;
  height: 2px; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.topnav a:hover::after, .topnav a.active::after { transform: scaleX(1); }
.topnav a.active { box-shadow: none; padding-bottom: 0; }
.search-trigger {
  padding: 10px 13px; background: color-mix(in srgb, var(--white) 65%, transparent);
  border-radius: 7px; transition: border-color .2s, box-shadow .2s;
}
.search-trigger:hover { border-color: #adbaaa; box-shadow: 0 3px 12px #1d42270a; }
.search-trigger kbd { background: var(--paper); border: 1px solid var(--line); padding: 1px 5px; border-radius: 3px; }
.hero { padding: 78px 0 68px; gap: 68px; }
.hero h1 { font-size: clamp(47px, 4.6vw, 68px); line-height: 1.22; letter-spacing: -.035em; }
.hero-description { line-height: 2; font-size: 15px; }
.hero > div:first-child { position: relative; z-index: 1; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .17em; margin-bottom: 23px; }
.hero .eyebrow::before { content: ''; width: 23px; height: 1px; background: var(--accent); }
.hero .actions { margin-top: 34px; gap: 23px; }
.button { padding: 13px 23px; border-radius: 5px; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, background .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 9px 24px #234b3620; }
.button span { transition: transform .35s var(--ease); }
.button:hover span { transform: translate(3px, -3px); }
.button:active { transform: translateY(0); box-shadow: none; }
.text-link { transition: color .2s, border-color .2s; border-bottom-color: #bbc6b6; }
.text-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hero-map {
  border: 1px solid #d8dfd0;
  border-radius: 18px;
  background: linear-gradient(150deg, #fcfcf8f2, #edf1e6dd);
  padding: 33px 17px 20px;
  box-shadow: 0 20px 50px #2e49240b, 0 3px 7px #ffffff;
  isolation: isolate; transform-style: preserve-3d;
}
.hero-map::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid #dce3d3;
  border-radius: 12px; pointer-events: none; z-index: -1;
}
.hero-map::after {
  content: 'CONCEPT ATLAS'; position: absolute; top: 19px; left: 28px;
  color: #8a9980; font: 8px var(--sans); letter-spacing: .18em;
}
.hero-map svg { overflow: visible; }
.hero-map svg a { cursor: pointer; outline-offset: 4px; }
.hero-map svg a rect { transition: stroke .2s, filter .25s; }
.hero-map svg a:hover rect, .hero-map svg a:focus-visible rect { stroke: #6d8560; filter: drop-shadow(0 4px 5px #55734320); }
.hero-map .map-caption { margin: 15px 14px 0; font-size: 9px; }
.stats-strip { padding: 26px 0; }
.stat strong { font-size: 36px; font-variant-numeric: lining-nums; }
.stat span { font-size: 11px; }
.strip-note { font-size: 11px; line-height: 1.9; }
.section-head { margin-top: 59px; margin-bottom: 28px; }
.section-head h2 { font-size: 31px; letter-spacing: -.015em; }
.chapter-grid { gap: 0 35px; }
.chapter-row {
  border-top-color: var(--line); position: relative; padding: 28px 13px 26px 0;
  transition: transform .4s var(--ease), background .3s, border-color .3s;
}
.chapter-row::before {
  content: ''; position: absolute; inset: 7px -12px; border-radius: 8px;
  background: var(--white); border: 1px solid transparent;
  opacity: 0; z-index: -1; transform: scale(.98);
  transition: opacity .35s, transform .4s var(--ease), border-color .35s;
}
.chapter-row:hover { padding-left: 0; transform: translateX(5px); border-top-color: transparent; }
.chapter-row:hover::before { opacity: 1; transform: scale(1); border-color: var(--line); box-shadow: 0 8px 20px #25482e06; }
.chapter-row .arrow { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 12px; transition: background .3s, color .3s, transform .3s var(--ease); }
.chapter-row:hover .arrow { background: var(--ink); color: var(--white); transform: rotate(6deg); }
.chapter-number { font-size: 33px; color: #9baa93; min-width: 40px; transition: color .3s; }
.chapter-row:hover .chapter-number { color: var(--accent); }
.chapter-row h3 { line-height: 1.5; font-size: 17px; }
.chapter-row p { line-height: 1.9; margin-top: 4px; }
.feature-note { padding-top: 32px; }
.feature-note h3 { font-size: 26px; margin-bottom: 16px; }
.feature-note p { line-height: 1.95; }
.site-footer { margin-bottom: 10px; padding-top: 32px; }

/* The text lives on one continuous sheet; explanations are never hidden. */
.reading-layout {
  max-width: 1460px;
  grid-template-columns: 200px minmax(0, var(--book-width)) 162px;
  justify-content: center;
  gap: 27px;
  padding: 34px 25px 92px;
  align-items: start;
}
.reader {
  padding: 30px var(--book-padding) 50px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px 5px 2px 2px;
  box-shadow: 0 7px 24px #263d2704, 0 1px 3px #203e2504;
  position: relative;
}
.reader::before {
  content: ''; position: absolute; top: -5px; left: 6px; right: 6px; height: 5px;
  background: color-mix(in srgb, var(--white) 80%, var(--soft));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.reader-header { padding: 10px 0 14px; }
.reader-header .breadcrumb { font-size: 10px; margin-bottom: 29px; }
.reader-header .eyebrow { font-size: 9px; letter-spacing: .2em; margin-bottom: 18px; }
.reader-header h1 { font-size: 37px; line-height: 1.4; letter-spacing: -.02em; margin-bottom: 17px; }
.reader-header .subtitle { font-size: 13px; line-height: 1.95; max-width: 94%; }
.reading-tabs { margin: 27px 0 18px; gap: 22px; }
.reading-tabs > *, .reading-tabs a, .reading-tabs button { font-size: 11px; }
.reader-tools { margin-bottom: 32px; gap: 7px; }
.reader-tools .small-button { padding: 5px 9px; font-size: 10px; border-radius: 4px; }
.reader-intro { font: 17px/2.05 var(--reading-font); margin-bottom: 30px; color: var(--text); }
.objective-list { border: 0; border-left: 2px solid #a6b997; background: color-mix(in srgb, var(--soft) 45%, var(--white)); border-radius: 0 6px 6px 0; padding: 20px 24px; font-size: 12px; margin: 30px 0 35px; }
.objective-list strong { color: var(--ink); font-size: 12px; }
.objective-list ul { padding-left: 17px; }
.objective-list li { margin: 10px 0; line-height: 1.85; }
.unit { padding: 43px 0 46px; border-bottom-color: var(--line); scroll-margin-top: 108px; }
.unit-label { font-family: var(--sans); font-size: 9px; letter-spacing: .09em; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.unit-label::before { content: ''; width: 15px; height: 1px; background: var(--accent); flex: 0 0 auto; }
.unit > h2 { font-size: 27px; line-height: 1.55; letter-spacing: -.02em; margin-bottom: 27px; text-wrap: pretty; }
.prose { font-family: var(--reading-font); font-size: var(--reader); line-height: var(--leading); color: var(--text); }
.prose p { margin-bottom: 1.5em; text-align: left; }
.prose strong { font-weight: 700; text-decoration-color: #bdcba6; text-underline-offset: .25em; }
.prose h3 { margin-top: 2em; margin-bottom: .8em; line-height: 1.5; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li { padding-left: .18em; margin: .8em 0; }
.prose li::marker { color: #849577; }
.prose blockquote { padding: 14px 22px; background: color-mix(in srgb, var(--soft) 35%, var(--white)); border-color: #a4b393; font-size: .94em; border-radius: 0 5px 5px 0; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { background: var(--soft); color: var(--ink); font-size: .77em; padding: .12em .32em; }
.prose pre { background: color-mix(in srgb, var(--soft) 60%, var(--white)); border-color: var(--line); border-radius: 7px; padding: 22px; font-size: 11px; }
.prose pre code { font-size: 1em; }
.prose table { border-radius: 5px; font-size: 12px; line-height: 1.8; }
.prose th { background: var(--soft); color: var(--ink); }
.source-prose { font-size: var(--reader); line-height: var(--leading); }
.source-prose h1 { font-size: 27px; }
.source-anchor { margin-top: 35px; opacity: .65; }
.source-prose .source-anchor + p { margin-top: 0; }
.source-links { padding-top: 3px; color: var(--muted); gap: 6px; }
.source-links > span { font-size: 10px; margin-right: 3px; }
.source-links a { background: transparent; border-radius: 4px; border-color: var(--line); transition: color .2s, background .2s, border-color .2s; }
.source-links a:hover { color: var(--ink); background: var(--soft); border-color: #b4c2a9; }
.anchor-details summary { font-size: 10px; }
.chapter-visual { border: 1px solid var(--line); border-radius: 9px; padding: 24px 21px 20px; margin: 37px -12px 20px; background: #f4f6ee; }
.chapter-visual h3 { font-size: 18px; margin: 11px 0 15px; }
.chapter-visual svg { margin: 7px 0 10px; }
.chapter-visual figcaption { font-size: 10px; line-height: 1.95; }
.diagram { margin: 29px 0; border: 1px solid #dfe5d5; border-radius: 8px; padding: 22px; background: #f0f3e9; }
.diagram-node { border-radius: 4px; border-color: #c6d0bc; font-size: 11px; }
.diagram h3 { line-height: 1.8; }
.lab { background: #f1f5e9; border-radius: 9px; border-color: #d9e2ce; margin: 32px 0; padding: 25px; }
.lab h3 { font-size: 16px; line-height: 1.7; }
.lab p { font-size: 12px; line-height: 1.95; }
.lab-controls select { border-radius: 4px; }
.lab-controls input[type=range] { height: 4px; cursor: pointer; }
.attention-table td { border-radius: 6px; border-width: 4px; transition: background-color .25s ease; }
.recall { background: color-mix(in srgb, var(--soft) 36%, var(--white)); border: 1px solid var(--line); border-radius: 8px; padding: 23px; margin-top: 30px; }
.recall h3 { font-size: 12px; display: flex; gap: 9px; align-items: center; color: var(--ink); }
.recall h3::before { content: '↳'; color: var(--accent); font-size: 17px; }
.recall .prompt { font-family: var(--reading-font); font-size: 16px; line-height: 1.95; margin: 15px 0 18px; }
.recall textarea, .note-input { background: var(--white); border-color: var(--line); border-radius: 5px; min-height: 94px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s; }
.recall textarea:focus, .note-input:focus { border-color: #859e76; box-shadow: 0 0 0 3px #93a78012; outline: 0; }
.recall summary { font-size: 11px; line-height: 1.9; }
.recall .answer { font-size: 13px; line-height: 1.95; padding-top: 17px; }
.unit-actions { margin-top: 17px; gap: 13px; font-size: 10px; }
.unit-actions label { transition: color .2s; }
.unit-actions label:has(input:checked) { color: var(--ink); }
.unit-actions .small-button { font-size: 10px; padding: 5px 9px; }
.small-button { transition: background .2s, border-color .2s; }
.small-button:hover { border-color: #b1bfa5; }
.application { margin-top: 48px; padding: 32px 0; }
.application h2 { font-size: 25px; line-height: 1.5; }
.application p { font-family: var(--reading-font); line-height: 2; }
.connection { border-radius: 6px; padding: 20px; transition: background .2s, transform .3s var(--ease); }
.connection:hover { background: var(--soft); transform: translateY(-3px); }
.editorial { margin-top: 34px; font-size: 11px; }
.side-nav { top: 112px; max-height: calc(100vh - 144px); font-size: 11px; padding: 8px 5px 15px 0; scrollbar-width: thin; scrollbar-color: #c6cebc transparent; }
.side-nav a { border-radius: 0 5px 5px 0; padding: 10px 10px; line-height: 1.7; margin-bottom: 4px; transition: background .2s, color .2s; }
.side-nav a.active { border-left-color: var(--ink); background: color-mix(in srgb, var(--soft) 80%, transparent); }
.side-nav .num { font-size: 12px; }
.side-nav .nav-label { font-size: 8px; letter-spacing: .17em; margin: 0 0 17px 11px; }
.margin-toc { top: 117px; padding-top: 8px; max-height: calc(100vh - 145px); scrollbar-width: thin; scrollbar-color: #c6cebc transparent; }
.margin-toc h3 { font-size: 8px; letter-spacing: .16em; margin-bottom: 20px; }
.margin-toc a { font-size: 10px; padding: 8px 0 8px 12px; transition: background .2s, color .2s; border-left-color: var(--line); }
.margin-toc a.toc-current { background: var(--soft); border-left-color: var(--accent); color: var(--ink); }
.reading-state { color: var(--muted); }
.reading-state progress { height: 3px; }

/* A persistent, small reading dock keeps controls within reach. */
#reading-progress { position: fixed; top: 81px; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 31; opacity: 0; transition: opacity .2s; }
#reading-progress.visible { opacity: 1; }
#reading-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.reading-dock {
  position: fixed; bottom: 23px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 2px; padding: 7px 9px;
  background: color-mix(in srgb, var(--white) 93%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 12px;
  box-shadow: 0 10px 40px #243c2417, 0 2px 5px #152b2006;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.reading-dock[hidden] { display: none; }
.dock-status { width: 99px; padding: 2px 11px 2px 7px; border-right: 1px solid var(--line); margin-right: 5px; }
.dock-status small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.dock-status strong { font-size: 11px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.reading-dock button { border: 0; background: transparent; padding: 9px 13px; color: var(--muted); font-size: 11px; border-radius: 7px; display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .2s, color .2s; }
.reading-dock button:hover, .reading-dock button[aria-pressed=true] { background: var(--soft); color: var(--ink); }
.reading-dock svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dock-divider { width: 1px; height: 23px; background: var(--line); margin: 0 5px; }
.appearance-dialog { width: min(420px, calc(100vw - 30px)); padding: 30px; border-radius: 15px; background: var(--white); }
.appearance-dialog h2 { font-size: 25px; }
.appearance-intro { color: var(--muted); font-size: 12px; margin-top: -6px; margin-bottom: 24px; }
.preference-group { margin: 23px 0; padding: 0; border: 0; }
.preference-group legend { font-size: 11px; color: var(--muted); margin-bottom: 12px; padding: 0; }
.preference-options { display: flex; gap: 7px; }
.preference-options button { flex: 1; border: 1px solid var(--line); background: transparent; border-radius: 6px; padding: 10px 8px; font-size: 11px; transition: background .2s, border-color .2s; }
.preference-options button[aria-pressed=true] { border-color: #9bac8a; background: var(--soft); color: var(--ink); }
.preference-options .theme-swatch { height: 23px; width: 23px; display: inline-block; border-radius: 50%; border: 1px solid #ccd1c5; vertical-align: middle; margin-right: 7px; }
.theme-swatch[data-swatch=warm] { background: #f1eee4; }
.theme-swatch[data-swatch=white] { background: #ffffff; }
.theme-swatch[data-swatch=night] { background: #26352e; border-color: #546356; }
.font-control { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.font-control button { width: 63px; padding: 12px; border: 0; background: var(--paper); color: var(--ink); font-size: 17px; }
.font-control output { flex: 1; text-align: center; font-size: 12px; color: var(--muted); }
.preference-check { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.preference-check input { accent-color: var(--ink); width: 16px; height: 16px; }
.appearance-footnote { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.outline-dialog { width: min(520px, calc(100vw - 30px)); max-height: 78vh; padding: 28px; border-radius: 12px; }
.outline-dialog h2 { margin-bottom: 9px; font-size: 23px; }
.outline-dialog .outline-subtitle { font-size: 11px; color: var(--muted); margin-bottom: 21px; }
.outline-links a { display: flex; gap: 15px; padding: 11px 12px; border-radius: 5px; font-size: 12px; line-height: 1.7; }
.outline-links a span { color: var(--accent); font-family: var(--serif); min-width: 20px; }
.outline-links a:hover, .outline-links a.current { background: var(--soft); color: var(--ink); }
body.reading-focus .reading-layout { display: block; max-width: calc(var(--book-width) + 70px); margin: auto; }
body.reading-focus .side-nav, body.reading-focus .margin-toc { display: none; }
body.reading-focus .topnav { visibility: hidden; }
.global-appearance { border: 0; background: transparent; color: var(--muted); width: 32px; height: 34px; display: grid; place-items: center; border-radius: 6px; margin-left: -27px; }
.global-appearance:hover { background: var(--soft); color: var(--ink); }
.global-appearance svg { width: 17px; height: 17px; }

/* The three reading palettes keep diagrams legible with their own light canvas. */
html[data-reading-theme=white] { --paper: #f3f5f5; --white: #fff; --soft: #edf2ef; --line: #e0e7e3; }
html[data-reading-theme=night] {
  --paper: #161f1b; --white: #1d2822; --text: #cbd3c9; --ink: #e3e9de;
  --muted: #95a493; --line: #334438; --soft: #29392e; --accent: #ce9672;
  color-scheme: dark;
}
html[data-reading-theme=night] body { background-image: radial-gradient(ellipse at 80% 0%, #344b3025, transparent 45%); }
html[data-reading-theme=night] .button:not(.secondary) { color: #19221c; background: #cfddc6; border-color: #cfddc6; }
html[data-reading-theme=night] .brand-mark { background: var(--white); }
html[data-reading-theme=night] .hero-map { background: linear-gradient(145deg, #e4e9d9, #d8e0ca); border-color: #607456; box-shadow: 0 20px 55px #0002; }
html[data-reading-theme=night] .hero-map .map-caption { color: #55634b; }
html[data-reading-theme=night] .hero-map::before { border-color: #bdcaae; }
html[data-reading-theme=night] .hero-map::after { color: #6c7e5c; }
html[data-reading-theme=night] .chapter-visual, html[data-reading-theme=night] .diagram, html[data-reading-theme=night] .lab {
  --ink: #294737; --text: #344235; --muted: #65745b; --line: #c7d1bb; --soft: #dce5cf; --white: #f4f7ed; --paper: #e7eddf;
  color: var(--text); background: #e4ebd8; border-color: #52684a;
}
html[data-reading-theme=night] .chapter-number { color: #718269; }
html[data-reading-theme=night] .chapter-row:hover::before { box-shadow: 0 8px 20px #0001; }
html[data-reading-theme=night] .reader { box-shadow: 0 6px 28px #0001; }
html[data-reading-font=sans] { --reading-font: var(--sans); }
html[data-reading-spacing=compact] { --leading: 1.82; }
html[data-reading-width=wide] { --book-width: 880px; --book-padding: 43px; }
html[data-reading-width=wide] .reading-layout { grid-template-columns: 170px minmax(0, var(--book-width)) 146px; }
@media (min-width: 1600px) { .reading-layout { max-width: 1510px; grid-template-columns: 220px minmax(0, var(--book-width)) 185px; gap: 37px; } }
@media (max-width: 1220px) {
  .reading-layout, html[data-reading-width=wide] .reading-layout { grid-template-columns: 172px minmax(0, 770px); gap: 25px; padding-inline: 25px; }
  .margin-toc { display: none; }
  .global-appearance { margin-left: -10px; }
  .hero { gap: 37px; }
}
@media (max-width: 850px) {
  .reading-layout, html[data-reading-width=wide] .reading-layout { display: block; max-width: 800px; padding: 25px 25px 96px; }
  .side-nav { display: none; }
  .reader { --book-padding: 37px; }
  .mobile-chapter-select { display: block; margin-bottom: 25px; }
  .topbar { gap: 18px; }
  .topnav { gap: 16px; }
  .search-trigger span { display: none; }
  .hero h1 { font-size: 49px; }
  .hero-map { padding: 32px 10px 15px; }
  .global-appearance { margin-left: -7px; }
}
@media (max-width: 760px) {
  .topbar { height: 72px; padding: 0 17px; gap: 10px; }
  .brand-mark { width: 33px; height: 33px; line-height: 33px; }
  .search-trigger { padding: 6px; border: 0; background: transparent; }
  .search-trigger kbd { font-size: 9px; }
  .global-appearance { margin: 0 0 0 -5px; width: 26px; }
  .topnav { gap: 12px; }
  .topnav a { font-size: 10px; }
  .hero { padding: 39px 0 30px; gap: 35px; }
  .hero h1 { font-size: 45px; line-height: 1.24; }
  .hero .eyebrow { font-size: 8px; margin-bottom: 20px; }
  .hero-description { font-size: 13px; line-height: 2; }
  .hero .actions { gap: 20px; margin-top: 24px; }
  .button { padding: 12px 18px; }
  .hero-map { width: 100%; max-width: 450px; border-radius: 12px; padding-top: 36px; }
  .hero-map svg { max-height: none; }
  .hero-map .map-caption { font-size: 8px; }
  .stats-strip { padding: 22px 0; }
  .stat strong { font-size: 29px; }
  .stat { padding-right: 15px; }
  .section-head h2 { font-size: 25px; }
  .chapter-row { padding: 23px 0; }
  .chapter-number { font-size: 29px; }
  .chapter-row h3 { font-size: 16px; }
  .chapter-row .arrow { width: 24px; height: 24px; flex: 0 0 auto; }
  .reading-layout, html[data-reading-width=wide] .reading-layout { padding: 20px 12px 87px; }
  .reader { --book-padding: 22px; padding-top: 20px; border-radius: 4px; }
  .reader-header h1 { font-size: 31px; }
  .reader-header .subtitle { max-width: 100%; font-size: 12px; }
  .reader-intro { font-size: 16px; line-height: 2; }
  .prose, .source-prose { font-size: var(--reader); line-height: var(--leading); }
  .unit { padding: 33px 0 36px; }
  .unit > h2 { font-size: 24px; line-height: 1.6; }
  .objective-list { padding: 17px; font-size: 11px; }
  .objective-list li { line-height: 1.95; }
  .reader-tools { gap: 6px; }
  .reader-tools .small-button { font-size: 9px; padding: 5px 7px; }
  .reading-tabs { gap: 19px; }
  .reading-tabs > *, .reading-tabs a { font-size: 10px; }
  .chapter-visual { padding: 18px 13px; margin-inline: -5px; }
  .chapter-visual h3 { font-size: 17px; }
  .chapter-visual figcaption { font-size: 10px; }
  .lab { padding: 18px 14px; margin-inline: -5px; }
  .diagram { padding: 18px 14px; }
  .recall { padding: 18px; }
  .recall .prompt { font-size: 15px; }
  .unit-actions { gap: 10px; font-size: 9px; }
  .unit-actions .small-button { font-size: 9px; }
  .reading-dock { bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px; border-radius: 10px; max-width: calc(100vw - 24px); }
  .reading-dock button { padding: 9px 10px; font-size: 10px; gap: 5px; }
  .dock-status { width: 65px; padding: 1px 7px; margin-right: 1px; }
  .dock-status strong { font-size: 10px; }
  .dock-status small { font-size: 7px; }
  .dock-divider { margin: 0 1px; }
  .reading-dock svg { width: 13px; height: 13px; }
  #reading-progress { top: 71px; }
  body.reading-focus .reading-layout { padding-inline: 7px; }
  body.reading-focus .topnav { display: none; }
  body.reading-focus .search-trigger { margin-left: auto; }
  .appearance-dialog { padding: 25px; }
}
@media (max-width: 370px) { .reading-dock button { padding-inline: 8px; } .reading-dock button svg { display: none; } .global-appearance { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html[data-reading-motion=off] *, html[data-reading-motion=off] *::before, html[data-reading-motion=off] *::after { transition: none !important; animation: none !important; }
html[data-reading-motion=off] { scroll-behavior: auto; }
@media print {
  body { background: white !important; background-image: none !important; }
  .reading-dock, #reading-progress, .global-appearance { display: none !important; }
  .reading-layout, html[data-reading-width=wide] .reading-layout, body.reading-focus .reading-layout { display: block; max-width: none; padding: 0; }
  .reader { background: white; border: 0; box-shadow: none; padding: 0; }
  .reader::before { display: none; }
  .unit { padding-block: 20px; }
  .prose, .source-prose { color: #111; font-size: 11pt; line-height: 1.75; }
  .reader-header h1 { font-size: 26pt; }
  .unit > h2 { font-size: 18pt; }
  .chapter-visual { margin-inline: 0; }
  .recall { background: white; border: 1px solid #ddd; }
}

.chapter-visual { position: relative; }
.figure-zoom { display: flex; gap: 5px; align-items: center; position: absolute; top: 19px; right: 18px; border: 0; background: transparent; font: 9px var(--sans); color: var(--muted); cursor: pointer; padding: 5px; border-radius: 4px; }
.figure-zoom:hover { color: var(--ink); background: #dce5d199; }
.figure-zoom svg { width: 12px; height: 12px; margin: 0; }
.figure-dialog { width: min(1080px, calc(100vw - 35px)); padding: 30px; border-radius: 12px; }
.figure-dialog .dialog-head h2 { font-size: 24px; padding-right: 25px; line-height: 1.5; }
.zoom-canvas { padding: 25px; border-radius: 8px; background: #f2f5e9; overflow-x: auto; }
.zoom-canvas > svg { width: 100%; min-width: 650px; height: auto; display: block; }
.zoom-caption { font-size: 12px; color: var(--muted); line-height: 1.9; margin: 20px 0 0; }
.zoom-hint { color: var(--muted); font-size: 10px; margin: 10px 0 0; }
@media(max-width:760px){.figure-zoom { right: 10px; top: 12px; font-size: 8px; }.figure-dialog { padding: 20px; }.figure-dialog .dialog-head h2 { font-size: 20px; }.zoom-canvas { padding: 12px; }.figure-zoom svg { width: 11px; }.chapter-visual > .supplement-tag { font-size: 8px; }}
@media print{.figure-zoom { display: none; }}

@media print { html[data-reading-theme] { --paper:#fff; --white:#fff; --text:#111; --ink:#111; --muted:#555; --line:#ddd; --soft:#f4f4f4; --accent:#555; color-scheme:light; } }

.chapter-row { isolation: isolate; }