:root{--bg:#fafbf8;--paper:white;--ink:#243b36;--muted:#71817b;--accent:#155e52;--line:#dce5df;--size:21px;--spacing:1.9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,sans-serif}body[data-theme=sepia]{--bg:#f4eddf;--paper:#fff8eb;--ink:#4e4234;--line:#ded1b9}body[data-theme=dark]{--bg:#16231f;--paper:#21332b;--ink:#e5ede6;--muted:#a2b3a8;--line:#3d5146}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 15px;border-radius:10px;cursor:pointer}button:hover{border-color:var(--accent)}a{color:var(--accent)}body[data-theme=dark] a{color:#9dd7b8}header{position:sticky;top:0;z-index:3;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;gap:10px}.brand{font-size:25px;font-weight:700;text-decoration:none}header>div{display:flex;gap:6px}.library{max-width:1100px;margin:65px auto;padding:0 25px}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,6vw,66px);line-height:1.15}.eyebrow{letter-spacing:3px;font-size:12px;font-weight:700;color:var(--accent)}.muted,small{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:24px;margin-top:45px}.book{background:var(--paper);padding:30px;border:1px solid var(--line);border-radius:18px;text-decoration:none;min-height:230px}.book>span{font-size:40px}.book h2{font-family:Georgia,serif;font-weight:400}.booknav{max-width:950px;margin:25px auto;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:0 20px}.booknav strong{font-size:14px}.booknav select{max-width:180px}#reader{max-width:760px;min-height:65vh;margin:55px auto 100px;padding:0 28px;font-family:Georgia,serif;font-size:var(--size);line-height:var(--spacing)}#reader h1{font-size:2em;margin-bottom:40px}#reader img{max-width:100%;height:auto;border-radius:12px}figure{margin:25px 0}.sentence{padding:8px 12px;margin:4px -12px;border-radius:8px;cursor:pointer}.sentence sup{font:11px system-ui;color:var(--muted);margin-right:12px;user-select:none}.sentence.selected{background:#cce9df;color:#183c30;outline:1px solid #8cbaaa}.sentence.highlight{background:#f5e8aa;color:#403b24}.sentence.selected.highlight{outline:2px solid #227960}footer{max-width:760px;margin:20px auto 100px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:13px}#toolbar{position:fixed;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);border:1px solid var(--line);background:var(--paper);padding:10px;box-shadow:0 10px 45px #0002;border-radius:16px;white-space:nowrap}#toolbar span{font-size:12px;padding:8px}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;width:min(94vw,520px);padding:30px;max-height:85vh}dialog::backdrop{background:#102b2480;backdrop-filter:blur(3px)}dialog h2{font:30px Georgia,serif}.close{float:right;padding:3px 10px;font-size:24px}label{display:block;margin:18px 0;font-size:14px}input,select,textarea{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}input[type=range]{padding:0}article{border-bottom:1px solid var(--line);padding:15px 0}blockquote{margin:15px 0;font-family:Georgia,serif}.error{color:#af382d;padding:10px 25px}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:10px;padding:10px;z-index:10}#toast:empty{display:none}iframe,video{width:100%;aspect-ratio:16/9;border:0}.panel{max-width:570px;padding:35px;margin:30px auto}.panel h1{font-size:42px}@media(max-width:600px){header{padding:12px}.brand span{display:none}header button{padding:9px;font-size:13px}.booknav{flex-wrap:wrap;font-size:13px}.booknav strong{flex:1}#reader{margin-top:32px;padding:0 24px}#toolbar{bottom:12px;padding:8px;max-width:98vw}#toolbar button{font-size:12px;padding:10px 8px}#toolbar span{display:none}.library{margin-top:40px}}

/* Combined sticky reading controls and fixed navigation. */
:root{--reader-header-height:160px;--reader-footer-height:78px}
html{scroll-padding-top:calc(var(--reader-header-height) + 20px);scroll-padding-bottom:calc(var(--reader-footer-height) + 90px)}
.reader-header{display:block;padding:0;position:sticky;top:0;z-index:10;background:var(--bg);box-shadow:0 3px 16px #00000006}
.reader-header .header-main{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;padding:14px 24px}
.header-main>div{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.reader-header .booknav{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(160px,260px);align-items:center;gap:24px;max-width:1200px;width:100%;margin:0 auto;padding:12px 24px;border-top:1px solid var(--line)}
.booknav strong{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.booknav select{width:100%;max-width:none;margin:0}
#reader{margin-top:36px;margin-bottom:calc(var(--reader-footer-height) + 115px)}
.sentence{scroll-margin-top:calc(var(--reader-header-height) + 20px)}
footer{position:fixed;inset:auto 0 0;z-index:11;max-width:none;width:100%;margin:0;min-height:74px;gap:12px;background:var(--bg);border-top:1px solid var(--line);padding:12px max(20px,calc((100vw - 760px)/2));padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -3px 16px #00000006}
footer button{white-space:nowrap}footer #location{text-align:center}
#toolbar{z-index:12;bottom:calc(var(--reader-footer-height) + 12px)}
#toast{z-index:30;bottom:calc(var(--reader-footer-height) + 95px);max-width:90vw}
#video{width:min(96vw,1440px);max-width:96vw;max-height:96vh;max-height:96dvh;padding:0;border-radius:16px;background:#0b1210;color:#fff;overflow:auto}
.video-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 14px;border-bottom:1px solid #ffffff26}
.video-actions>span{margin-right:auto;font-size:14px;color:#d5e3dc}
.video-actions button{background:#ffffff12;color:#fff;border-color:#ffffff35}
.video-actions .close{float:none;line-height:1.2}
#videoBody{background:#000;display:flex;align-items:center;justify-content:center;min-height:120px}
#videoBody video,#videoBody iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(96vh - 66px);max-height:calc(96dvh - 66px);object-fit:contain;border:0}
#video:fullscreen{width:100vw;max-width:none;height:100vh;max-height:none;border:0;border-radius:0;margin:0}
#video:fullscreen #videoBody{height:calc(100vh - 66px)}
#video:fullscreen video,#video:fullscreen iframe{width:100%;height:100%;max-height:none}
@media(max-width:600px){
.reader-header .header-main{padding:10px 12px;gap:8px}
.reader-header .booknav{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 12px}
.booknav strong{text-align:right;font-size:12px}
.booknav select{grid-column:1 / -1;padding:9px;font-size:13px}
.header-main button{padding:9px 8px;font-size:12px}
#reader{margin-top:24px}
footer{padding-left:12px;padding-right:12px;font-size:12px;gap:6px}
footer button{font-size:12px;padding:10px}
#video{width:98vw;max-width:98vw;border-radius:10px}
.video-actions{padding:8px 10px}.video-actions button{font-size:12px}
#toolbar{bottom:calc(var(--reader-footer-height) + 8px)}
}

/* Intrinsic grid/flex widths must never stretch the mobile reading viewport. */
html,body{width:100%;max-width:100%;margin:0;overflow-x:clip}
.reader-header,.header-main,.booknav,footer,#reader{min-width:0;max-width:100%;box-sizing:border-box}
.reader-header .header-main,.reader-header .booknav{width:100%}
.header-main>div{min-width:0;flex-shrink:1}
.reader-header .booknav{grid-template-columns:auto minmax(0,1fr) minmax(0,260px)}
.booknav>*{min-width:0}.booknav strong{display:block;max-width:100%}
.booknav select{min-width:0;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#reader{width:min(100%,760px);overflow-wrap:anywhere}
#reader h1,#reader p,#reader a{overflow-wrap:anywhere}
#reader figure{width:100%;max-width:100%;margin-left:0;margin-right:0}
#reader img{display:block;width:auto;max-width:100%;height:auto;margin:auto}
#reader figcaption{font:13px system-ui;color:var(--muted);padding:10px}
#reader [data-chapter]{scroll-margin-top:calc(var(--reader-header-height) + 20px)}
footer #location{min-width:0;flex:1}footer button:disabled{opacity:.4;cursor:default}
@media(max-width:600px){.reader-header .booknav{grid-template-columns:auto minmax(0,1fr)}.reader-header .booknav select{grid-column:1 / -1}.reader-header .header-main{max-width:100%}.header-main>div{gap:4px}.brand{flex-shrink:0}#reader{padding-left:24px;padding-right:24px}}

#location{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:13px;white-space:normal}
#location:hover{background:var(--paper);border-color:var(--line)}
#jumpDialog{width:min(94vw,660px);padding:26px;overscroll-behavior:contain}
#jumpDialog h2{margin:14px 0 22px}#jumpDialog h3{font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.quick-jump label{margin:10px 0;font-size:13px;color:var(--muted)}
.quick-jump>div{display:flex;gap:8px}.quick-jump input{min-width:0;margin:0;flex:1}.quick-jump button{flex-shrink:0}
.jump-tabs{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
#jumpStep{font-size:12px;color:var(--muted)}#jumpError{color:#bb4837;font-size:14px}#jumpError:empty{display:none}
.jump-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:7px;margin:18px 0}
.jump-grid button{min-height:48px;padding:8px;font-weight:600;border-radius:9px}
.jump-grid button.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.jump-empty{grid-column:1 / -1;color:var(--muted)}#jumpSectionStart{margin-top:6px}
.jump-flash{animation:passage-arrival 2.6s ease-out}
@keyframes passage-arrival{0%,45%{background:#d7edbe;box-shadow:0 0 0 3px #8bbf65;color:#203522}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.jump-flash{animation:none;outline:2px solid #8bbf65;background:#d7edbe;color:#203522}}
@media(max-width:600px){#jumpDialog{padding:20px}footer #location{font-size:12px;padding:10px 4px}.jump-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}}