:root { --reader-scale: 1; }
.reader-page { color: #282a28; background: #ddd7ca; }
.reader-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 4rem; padding: 0.65rem clamp(0.75rem, 3vw, 2rem); border-bottom: 1px solid rgba(25, 27, 25, 0.14); background: rgba(221, 215, 202, 0.92); backdrop-filter: blur(16px); }
.reader-home { font-weight: 600; text-decoration: none; }
.reader-book { overflow: hidden; padding: 0 1rem; font-size: 0.76rem; letter-spacing: 0.05em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.reader-controls { display: flex; gap: 0.25rem; }
.reader-control { display: grid; min-width: 2.5rem; min-height: 2.5rem; place-items: center; padding: 0 0.65rem; border: 1px solid rgba(25, 27, 25, 0.2); color: inherit; background: transparent; font: 600 0.76rem var(--font-ui); }
.reader-progress { position: fixed; z-index: 30; top: 0; left: 0; width: 0; height: 2px; background: var(--ember); }
.reader-layout { display: grid; min-height: calc(100vh - 4rem); }
.chapter-drawer { position: fixed; z-index: 25; inset: 4rem 0 0; overflow: auto; padding: 1.5rem; color: var(--paper-bright); background: rgba(22, 26, 25, 0.985); opacity: 0; pointer-events: none; transform: translateX(-100%); transition: opacity 180ms ease, transform 220ms ease; }
.chapter-drawer.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.chapter-drawer h2 { margin: 0 0 1.25rem; font: 500 2rem var(--font-display); }
.chapter-list { list-style: none; margin: 0; padding: 0; }
.chapter-list a { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid rgba(238, 232, 220, 0.12); color: rgba(238, 232, 220, 0.7); text-decoration: none; }
.chapter-list a.current { color: var(--ember-bright); }
.chapter-list span { color: rgba(238, 232, 220, 0.4); font-size: 0.72rem; }
.reader-main { width: 100%; max-width: calc(47rem * var(--reader-scale)); margin: 0 auto; padding: clamp(3.5rem, 10vw, 7rem) clamp(1.25rem, 5vw, 3rem) 2rem; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.reader-chapter-head { margin-bottom: 4rem; text-align: center; }
.reader-chapter-number { display: block; margin-bottom: 0.75rem; color: #8a4b22; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.reader-chapter-head h1 { margin: 0; font: 500 clamp(3.2rem, 10vw, 6.5rem)/0.86 var(--font-display); letter-spacing: -0.05em; }
.reader-chapter-head p { margin: 1.25rem 0 0; color: #6a6f6a; font-size: 0.83rem; }
.audio-player { margin: -1rem 0 4rem; padding: 1rem; border: 1px solid rgba(25, 27, 25, 0.18); background: rgba(238, 232, 220, 0.42); }
.audio-main { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; }
.audio-toggle { display: grid; width: 3rem; height: 3rem; place-items: center; border: 0; border-radius: 50%; color: var(--paper-bright); background: #8a4b22; font-size: 0.85rem; cursor: pointer; }
.audio-toggle:disabled { color: #7b7f7a; background: rgba(25, 27, 25, 0.1); cursor: default; }
.audio-copy { min-width: 0; }
.audio-copy strong, .audio-copy span { display: block; }
.audio-copy strong { font: 500 1.08rem var(--font-display); }
.audio-copy span { overflow: hidden; margin-top: 0.1rem; color: #717670; font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.audio-speed { min-width: 2.8rem; min-height: 2.4rem; padding: 0.35rem; border: 1px solid rgba(25, 27, 25, 0.18); color: inherit; background: transparent; font: 600 0.74rem var(--font-ui); cursor: pointer; }
.audio-speed:disabled { opacity: 0.35; cursor: default; }
.audio-timeline { display: none; margin: 1rem 0 0 3.9rem; }
.audio-player[data-state="ready"] .audio-timeline, .audio-player[data-state="playing"] .audio-timeline { display: block; }
.audio-timeline input { display: block; width: 100%; height: 1.25rem; margin: 0; accent-color: #8a4b22; cursor: pointer; touch-action: pan-x; }
.audio-time { display: flex; justify-content: space-between; color: #777c77; font-size: 0.66rem; font-variant-numeric: tabular-nums; }
.audio-player[data-state="unavailable"] { border-style: dashed; }
.chapter-body { font: 400 calc(1.23rem * var(--reader-scale))/1.82 var(--font-display); }
.chapter-body p { margin: 0 0 1.55em; text-indent: 1.5em; }
.chapter-body p:first-of-type, .chapter-body .reader-loading, .chapter-body .reader-error { text-indent: 0; }
.chapter-body p:first-of-type::first-letter { float: left; margin: 0.06em 0.08em -0.08em 0; color: #8a4b22; font: 500 4.4em/0.75 var(--font-display); }
.chapter-body em { color: #4f514e; }
.reader-illustration { margin: clamp(3rem, 9vw, 5.5rem) calc(-1 * clamp(1.25rem, 5vw, 3rem)); }
.reader-illustration img { display: block; width: 100%; max-height: 78svh; object-fit: cover; background: rgba(25, 27, 25, 0.08); }
.reader-illustration figcaption { max-width: 42rem; margin: 0.8rem auto 0; padding: 0 clamp(1.25rem, 5vw, 3rem); color: #6e736e; font: 400 0.78rem/1.5 var(--font-ui); text-align: center; }
.reader-loading, .reader-error { padding: 5rem 0; color: #676b67; text-align: center; }
.reader-error a { color: #8a4b22; }
.reader-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 58rem; margin: 5rem auto 0; background: rgba(25, 27, 25, 0.16); }
.reader-nav a { min-height: 8rem; padding: 1.5rem; background: rgba(238, 232, 220, 0.52); text-decoration: none; }
.reader-nav a:last-child { text-align: right; }
.reader-nav small, .reader-nav strong { display: block; }
.reader-nav small { color: #747974; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.reader-nav strong { margin-top: 0.4rem; font: 500 1.2rem var(--font-display); }
.reader-buy { margin: 5rem calc(-1 * clamp(1.25rem, 5vw, 3rem)) -2rem; padding: 2.5rem clamp(1.25rem, 5vw, 3rem); color: var(--paper-bright); background: var(--ink); text-align: center; }
.reader-buy p { margin: 0 0 1rem; font: 400 1.2rem var(--font-display); }
.reader-buy a { color: var(--ember-bright); font-weight: 600; }
.reader-page.night { color: #ddd7ca; background: #191d1c; }
.reader-page.night .reader-header { border-color: rgba(238, 232, 220, 0.12); background: rgba(25, 29, 28, 0.94); }
.reader-page.night .reader-chapter-head p, .reader-page.night .reader-loading { color: #9ea49e; }
.reader-page.night .chapter-body em { color: #b7b8b2; }
.reader-page.night .reader-illustration figcaption { color: #9ea49e; }
.reader-page.night .reader-control { border-color: rgba(238, 232, 220, 0.2); }
.reader-page.night .audio-player { border-color: rgba(238, 232, 220, 0.15); background: rgba(238, 232, 220, 0.05); }
.reader-page.night .audio-copy span, .reader-page.night .audio-time { color: #9ea49e; }
.reader-page.night .audio-speed { border-color: rgba(238, 232, 220, 0.18); }
.reader-page.night .reader-nav { background: rgba(238, 232, 220, 0.12); }
.reader-page.night .reader-nav a { background: rgba(238, 232, 220, 0.06); }

@media (min-width: 900px) {
    .reader-header { grid-template-columns: 12rem 1fr 12rem; }
    .chapter-drawer { right: auto; width: 24rem; border-right: 1px solid rgba(238, 232, 220, 0.12); }
    .reader-illustration { margin-right: -5rem; margin-left: -5rem; }
}