:root {
  color-scheme: light;
  --page: #f3eee4;
  --page-glow: #fbf8f1;
  --surface: rgba(248, 244, 236, .94);
  --surface-solid: #f8f4ec;
  --ink: #27251f;
  --muted: #746e62;
  --faint: #aaa194;
  --line: rgba(58, 53, 45, .15);
  --accent: #315f54;
  --accent-soft: rgba(49, 95, 84, .11);
  --shadow: 0 24px 70px rgba(39, 34, 26, .16);
  --reader-scale: 1;
  --reader-leading: 1.7;
  --reader-width: 43rem;
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-left: max(1rem, env(safe-area-inset-left));
  --safe-right: max(1rem, env(safe-area-inset-right));
}

html[data-theme="light"] {
  --page: #fbfaf7; --page-glow: #fff; --surface: rgba(255,255,255,.94); --surface-solid: #fff;
  --ink: #22221f; --muted: #6b6b64; --line: rgba(30,30,25,.12); --accent: #285e52; --accent-soft: rgba(40,94,82,.09);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #171916; --page-glow: #20221e; --surface: rgba(28,30,27,.94); --surface-solid: #1d1f1c;
  --ink: #e8e5dd; --muted: #aaa69c; --faint: #77766f; --line: rgba(245,242,233,.13);
  --accent: #8fc7b5; --accent-soft: rgba(143,199,181,.12); --shadow: 0 28px 80px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; background: radial-gradient(circle at 15% 7%, var(--page-glow), transparent 30rem), var(--page); color: var(--ink); font-family: var(--serif); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem;
  height: calc(4.15rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--safe-right) 0 var(--safe-left);
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px) saturate(115%);
  transition: transform .25s ease;
}
.topbar.hidden-by-focus { transform: translateY(-110%); }
.progress-track { position: fixed; z-index: 50; top: calc(4.15rem + env(safe-area-inset-top)); left: 0; right: 0; height: 2px; background: transparent; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .12s linear; }
.round-button { display: inline-grid; place-items: center; min-width: 2.65rem; height: 2.65rem; padding: 0 .75rem; border: 1px solid transparent; border-radius: 999px; background: transparent; font-family: var(--sans); font-size: 1.2rem; cursor: pointer; }
.round-button:hover { border-color: var(--line); background: var(--accent-soft); }
.round-button:disabled { opacity: .3; cursor: default; }
.round-button:disabled:hover { border-color: transparent; background: transparent; }
.aa-button { font-size: .9rem; font-weight: 780; letter-spacing: -.06em; }
.location { min-width: 0; padding: .35rem .5rem; border: 0; background: none; text-align: center; cursor: pointer; font-family: var(--sans); }
.location strong, .location span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location strong { font-size: .76rem; font-weight: 760; letter-spacing: .035em; }
.location span { margin-top: .25rem; color: var(--muted); font-size: .67rem; }
.top-actions { display: flex; align-items: center; }
.history-button { gap: .4rem; font-size: .95rem; }
.button-word { color: var(--muted); font-size: .68rem; font-weight: 650; }

#reader { min-height: 100vh; padding-top: calc(4.15rem + env(safe-area-inset-top)); }
.book-page { width: min(calc(100% - 2.2rem), var(--reader-width)); margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) 0 2rem; font-size: calc(clamp(1.1rem, 1.02rem + .3vw, 1.26rem) * var(--reader-scale)); line-height: var(--reader-leading); }
.section-opening { min-height: min(48vh, 30rem); display: flex; flex-direction: column; justify-content: center; padding-bottom: 4rem; }
.section-kicker, .kicker { color: var(--accent); font-family: var(--sans); font-size: .66rem; font-weight: 780; letter-spacing: .16em; text-transform: uppercase; }
.section-opening h1 { max-width: 13ch; margin: .9rem 0 1.3rem; font-size: clamp(2.8rem, calc(3.5rem * var(--reader-scale)), 5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.01; }
.section-detail { display: flex; gap: .75rem; color: var(--muted); font-family: var(--sans); font-size: .7rem; }
.section-detail span + span::before { content: "·"; margin-right: .75rem; color: var(--faint); }
.page-anchor { position: relative; scroll-margin-top: 6rem; }
.page-number { position: absolute; right: calc(100% + 1.15rem); top: .35rem; color: var(--faint); font-family: var(--sans); font-size: .58rem; font-variant-numeric: tabular-nums; }
.book-page p { margin: 0 0 1.35em; hanging-punctuation: first last; }
.book-page h2 { margin: 3.1em 0 1em; font-size: 1.55em; font-weight: 530; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.book-page h3 { margin: 2.4em 0 .9em; color: var(--accent); font-family: var(--sans); font-size: .74em; font-weight: 780; letter-spacing: .09em; line-height: 1.45; text-transform: uppercase; }
.book-page blockquote { margin: 2.2em 0 2.4em; padding: 0 0 0 1.35em; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.book-page blockquote p { margin: 0; }
.book-page ul { margin: .4em 0 1.8em; padding-left: 1.3em; }
.book-page li { margin: 0 0 .65em; padding-left: .35em; }
.source-note { color: var(--muted); font-size: .78em; line-height: 1.55; }
.pullquote, .source-aside { margin: 2.35em 0; padding: 1.15em 0 1.15em 1.2em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .86em; line-height: 1.55; }
.pullquote::before { content: "Key idea"; display: block; margin-bottom: .65rem; color: var(--accent); font-family: var(--sans); font-size: .62rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
figure { margin: 3rem auto; scroll-margin-top: 6rem; }
figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: .25rem; background: #fff; mix-blend-mode: multiply; }
html[data-theme="dark"] figure img { mix-blend-mode: normal; filter: invert(.9) hue-rotate(180deg); }
figcaption { max-width: 38rem; margin: .8rem auto 0; color: var(--muted); font-family: var(--sans); font-size: .64rem; line-height: 1.5; }
.glossary-term { padding: 0 .05em; border: 0; border-bottom: 1px dotted color-mix(in srgb, var(--accent) 78%, transparent); background: transparent; color: inherit; cursor: help; }
.glossary-term:hover { color: var(--accent); }
.chapter-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: min(calc(100% - 2rem), 52rem); margin: 4rem auto 0; padding: 2rem 0 max(5rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-family: var(--sans); }
.chapter-link { min-height: 6.2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, var(--surface-solid) 55%, transparent); text-align: left; cursor: pointer; }
.chapter-link.next { text-align: right; }
.chapter-link small, .chapter-link strong { display: block; }
.chapter-link small { margin-bottom: .45rem; color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.chapter-link strong { font-size: .86rem; line-height: 1.35; }
.chapter-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.chapter-link:disabled { visibility: hidden; }
.side-turn { position: fixed; z-index: 10; top: 50%; width: 2.7rem; height: 4.8rem; border: 0; background: transparent; color: var(--faint); font-size: 2.1rem; cursor: pointer; opacity: .55; }
.side-turn:hover { color: var(--accent); opacity: 1; }
.side-turn-left { left: .5rem; }.side-turn-right { right: .5rem; }

.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(22,22,18,.32); backdrop-filter: blur(3px); }
.drawer { position: fixed; z-index: 80; top: 0; bottom: 0; width: min(27rem, 92vw); background: var(--surface-solid); box-shadow: var(--shadow); transition: transform .28s cubic-bezier(.22,.78,.2,1); }
.contents-drawer { left: 0; transform: translateX(-105%); }
.settings-drawer { right: 0; transform: translateX(105%); }
.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: calc(1.5rem + env(safe-area-inset-top)) 1.35rem 1.15rem; border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: .35rem 0 0; font-size: 1.65rem; font-weight: 520; letter-spacing: -.035em; }
.close-button { font-size: 1.55rem; }
.drawer-tabs { display: flex; gap: 1.1rem; padding: 0 1.35rem; border-bottom: 1px solid var(--line); font-family: var(--sans); overflow-x: auto; }
.drawer-tabs button { flex: 0 0 auto; padding: .9rem 0 .8rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 680; cursor: pointer; }
.drawer-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.drawer-body, .settings-body { height: calc(100% - 9.8rem - env(safe-area-inset-top)); padding: 1rem 1.35rem 3rem; overflow-y: auto; overscroll-behavior: contain; }
.page-jump { margin: .35rem 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; font-family: var(--sans); }
.page-jump label { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .68rem; }
.page-jump div { display: grid; grid-template-columns: 1fr auto; }
.page-jump input { min-width: 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .55rem 0 0 .55rem; background: var(--page); color: var(--ink); font-size: .8rem; }
.page-jump button { padding: 0 .9rem; border: 0; border-radius: 0 .55rem .55rem 0; background: var(--accent); color: var(--page-glow); font-size: .72rem; cursor: pointer; }
.contents-list { display: grid; }
.toc-group { margin: 1.2rem 0 .35rem; color: var(--faint); font-family: var(--sans); font-size: .6rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.toc-item { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: baseline; width: 100%; padding: .72rem .2rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.toc-item span { font-size: .92rem; line-height: 1.3; }.toc-item small { color: var(--faint); font-family: var(--sans); font-size: .6rem; }
.toc-item.active { color: var(--accent); }.toc-item:hover { color: var(--accent); }
.empty-state { padding: 3rem 1rem; color: var(--muted); text-align: center; font-family: var(--sans); font-size: .8rem; line-height: 1.6; }
.bookmark-card { display: grid; grid-template-columns: 1fr auto; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.bookmark-card button { border: 0; background: none; text-align: left; cursor: pointer; }
.bookmark-card strong, .bookmark-card small { display: block; }.bookmark-card strong { font-size: .88rem; }.bookmark-card small { margin-top: .35rem; color: var(--muted); font-family: var(--sans); font-size: .65rem; line-height: 1.4; }
.bookmark-card .remove-bookmark { align-self: start; color: var(--faint); font-family: var(--sans); font-size: 1.2rem; }
.glossary-entry { padding: 1rem 0; border-bottom: 1px solid var(--line); }.glossary-entry dt { color: var(--accent); font-weight: 700; }.glossary-entry dd { margin: .3rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

.settings-body { height: calc(100% - 6.3rem - env(safe-area-inset-top)); padding-top: .7rem; }
.settings-body fieldset { margin: 0; padding: 1.25rem 0; border: 0; border-bottom: 1px solid var(--line); }
.settings-body legend { color: var(--muted); font-family: var(--sans); font-size: .68rem; font-weight: 680; }
.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; margin-top: .8rem; }
.stepper button { height: 2.8rem; border: 1px solid var(--line); background: var(--page); cursor: pointer; }.stepper button:first-child { border-radius: .65rem 0 0 .65rem; }.stepper button:last-child { border-radius: 0 .65rem .65rem 0; }.large-a { font-size: 1.25rem; }.stepper output { display: grid; place-items: center; height: 2.8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: .72rem; }
input[type="range"] { width: 100%; margin-top: 1rem; accent-color: var(--accent); }
.segmented { display: grid; grid-template-columns: repeat(3,1fr); margin-top: .8rem; }.segmented button { min-height: 2.7rem; border: 1px solid var(--line); border-right: 0; background: var(--page); font-family: var(--sans); font-size: .68rem; cursor: pointer; }.segmented button:first-child { border-radius: .6rem 0 0 .6rem; }.segmented button:last-child { border-right: 1px solid var(--line); border-radius: 0 .6rem .6rem 0; }.segmented button.active { background: var(--accent); color: var(--page-glow); }
.theme-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin-top: .8rem; }.theme-picker button { display: grid; justify-items: center; gap: .45rem; padding: .65rem .25rem; border: 1px solid var(--line); border-radius: .65rem; background: transparent; font-family: var(--sans); font-size: .65rem; cursor: pointer; }.theme-picker button.active { border-color: var(--accent); color: var(--accent); }.theme-swatch { width: 2.4rem; height: 1.7rem; border: 1px solid rgba(0,0,0,.15); border-radius: .35rem; }.theme-swatch.light { background: #fbfaf7; }.theme-swatch.sepia { background: #f3eee4; }.theme-swatch.dark { background: #171916; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); font-family: var(--sans); }.switch-row strong, .switch-row small { display: block; }.switch-row strong { font-size: .8rem; }.switch-row small { margin-top: .25rem; color: var(--muted); font-size: .66rem; }.switch-row input { width: 2.6rem; height: 1.35rem; accent-color: var(--accent); }
.reset-button { width: 100%; margin-top: 1.5rem; padding: .8rem; border: 1px solid var(--line); border-radius: .65rem; background: transparent; color: var(--muted); font-family: var(--sans); font-size: .7rem; cursor: pointer; }

.search-sheet { position: fixed; z-index: 90; inset: 0; background: var(--surface-solid); overflow-y: auto; }
.search-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: calc(.8rem + env(safe-area-inset-top)) var(--safe-right) .8rem var(--safe-left); border-bottom: 1px solid var(--line); background: var(--surface-solid); }
.search-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem; min-width: 0; padding: .7rem .85rem; border-radius: .7rem; background: var(--page); font-family: var(--sans); }.search-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }.search-field input::placeholder { color: var(--faint); }
.text-action { padding: .55rem .7rem; border: 0; background: transparent; color: var(--accent); font-family: var(--sans); font-size: .75rem; font-weight: 720; cursor: pointer; }
.search-meta { width: min(calc(100% - 2rem), 45rem); margin: 1.4rem auto .5rem; color: var(--muted); font-family: var(--sans); font-size: .7rem; }
.search-results { width: min(calc(100% - 2rem), 45rem); margin: 0 auto 5rem; }
.search-result { display: block; width: 100%; padding: 1.15rem .2rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }.search-result small { color: var(--accent); font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .05em; }.search-result p { margin: .45rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }.search-result mark { background: var(--accent-soft); color: var(--ink); }
.term-popover { position: fixed; z-index: 100; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); width: min(calc(100% - 2rem), 31rem); transform: translateX(-50%); padding: 1.3rem 1.4rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-solid); box-shadow: var(--shadow); }.term-popover h2 { margin: .35rem 2rem .5rem 0; font-size: 1.5rem; font-weight: 520; text-transform: capitalize; }.term-popover p { margin: 0 0 .6rem; color: var(--muted); line-height: 1.55; }.popover-close { position: absolute; top: .65rem; right: .65rem; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.resume-toast { position: fixed; z-index: 65; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .6rem; width: min(calc(100% - 2rem), 28rem); transform: translateX(-50%); padding: .65rem .7rem .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-solid); box-shadow: var(--shadow); font-family: var(--sans); font-size: .68rem; }.resume-toast span { color: var(--muted); }.resume-toast button { border: 0; background: transparent; color: var(--accent); font-weight: 720; cursor: pointer; }.resume-toast button:last-child { margin-left: auto; color: var(--muted); font-size: 1rem; }
.live-region { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

body.modal-open { overflow: hidden; }
body.focus-mode .side-turn { display: none; }
body.focus-mode:not(.controls-visible) .topbar { transform: translateY(-110%); }
body.focus-mode:not(.controls-visible) .progress-track { top: 0; }

@media (max-width: 760px) {
  .topbar { height: calc(3.75rem + env(safe-area-inset-top)); grid-template-columns: auto minmax(0,1fr) auto; }
  .progress-track { top: calc(3.75rem + env(safe-area-inset-top)); }
  #reader { padding-top: calc(3.75rem + env(safe-area-inset-top)); }
  .book-page { width: min(calc(100% - 2rem), var(--reader-width)); padding-top: 3.2rem; }
  .section-opening { min-height: 38vh; padding-bottom: 2.8rem; }
  .section-opening h1 { font-size: clamp(2.55rem, calc(12vw * var(--reader-scale)), 4rem); }
  .side-turn { display: none; }
  .button-word { display: none; }
  .history-button { min-width: 2.3rem; padding: 0 .35rem; }
  .top-actions .round-button { min-width: 2.3rem; width: 2.3rem; padding: 0; }
  .page-number { position: static; float: right; margin: .45rem 0 0 .8rem; }
}

@media (max-width: 430px) {
  .round-button { min-width: 2.35rem; width: 2.35rem; height: 2.35rem; padding: 0; }
  .book-page { width: calc(100% - 1.65rem); }
  .chapter-navigation { grid-template-columns: 1fr; }.chapter-link.next { text-align: left; }
  .location strong { font-size: .7rem; }.location span { font-size: .61rem; }
}

@media print {
  .topbar, .progress-track, .chapter-navigation, .side-turn, .drawer, .search-sheet, .term-popover, .resume-toast { display: none !important; }
  body, html { background: #fff; color: #111; }
  #reader { padding: 0; }.book-page { width: 100%; max-width: none; padding: 0; font-size: 11pt; line-height: 1.5; }
  .section-opening { min-height: 0; page-break-after: always; }.page-number { display: none; } figure { break-inside: avoid; }
}

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