:root { --reader-bg:#f7f5ef; --reader-fg:#25231f; --reader-panel:rgba(247,245,239,.96); --reader-border:rgba(37,35,31,.16); --reader-accent:#96752d; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--reader-bg); color: var(--reader-fg); font: 400 15px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.reader-shell { height: 100dvh; min-height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: var(--reader-bg); transition: background .25s,color .25s; }
.reader-bar { z-index: 20; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 14px; min-height: 64px; padding: max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left)); background: var(--reader-panel); border-bottom: 1px solid var(--reader-border); backdrop-filter: blur(14px); transition: transform .25s; }
.reader-title { margin: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 600 17px/1.2 Georgia,serif; letter-spacing: .035em; }
.reader-actions { display:flex; justify-content:flex-end; gap:7px; }
.reader-button, .reader-select { min-width: 44px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--reader-border); border-radius: 6px; color: inherit; background: transparent; font: inherit; cursor: pointer; touch-action: manipulation; }
.reader-button:hover, .reader-select:hover { border-color: var(--reader-accent); }
.reader-button:focus-visible, .reader-select:focus-visible, .toc a:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
.reader-back { text-decoration:none; display:inline-flex; align-items:center; width:max-content; }
.reader-stage { position:relative; min-height:0; overflow:hidden; }
#viewer { width:min(100%,1100px); height:100%; margin:auto; background:var(--reader-bg); }
.reader-loading, .reader-error { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:30px; text-align:center; background:var(--reader-bg); }
.reader-loading img { width:min(190px,42vw); max-height:42vh; object-fit:contain; box-shadow:0 18px 45px rgba(0,0,0,.28); }
.reader-loading h2 { margin:4px 0 0; font:600 24px Georgia,serif; }
.spinner { width:30px;height:30px;border:2px solid var(--reader-border);border-top-color:var(--reader-accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.reader-error[hidden], .reader-loading[hidden] { display:none; }
.reader-download { display:inline-flex; align-items:center; text-decoration:none; }
.reader-footer { z-index:20; display:grid; grid-template-columns:1fr minmax(150px,420px) 1fr; align-items:center; gap:16px; padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:var(--reader-panel); border-top:1px solid var(--reader-border); transition:transform .25s; }
.reader-footer .next { justify-self:end; }.reader-progress { text-align:center; }.reader-progress label { display:block;font-size:12px;margin-bottom:5px; }.reader-progress progress { display:block;width:100%;height:4px;accent-color:var(--reader-accent); }
.toc { position:fixed; z-index:40; top:0; bottom:0; left:0; width:min(390px,88vw); padding:max(20px,env(safe-area-inset-top)) 22px 28px; overflow:auto; background:var(--reader-panel); border-right:1px solid var(--reader-border); box-shadow:15px 0 45px rgba(0,0,0,.2); transform:translateX(-105%); transition:transform .25s; }
.toc.open { transform:none; }.toc-head { display:flex;justify-content:space-between;align-items:center;position:sticky;top:-20px;background:var(--reader-panel);padding:5px 0 12px; }.toc h2{font:600 24px Georgia,serif}.toc ul{list-style:none;padding:0;margin:0}.toc ul ul{padding-left:16px}.toc a{display:block;color:inherit;text-decoration:none;padding:10px 4px;border-bottom:1px solid var(--reader-border)}
.settings { position:absolute; z-index:30; top:66px; right:16px; width:min(320px,calc(100vw - 32px)); padding:16px; border:1px solid var(--reader-border); border-radius:8px; background:var(--reader-panel); box-shadow:0 18px 50px rgba(0,0,0,.22); }.settings[hidden]{display:none}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0}.font-value{min-width:48px;text-align:center}
.reader-shell.controls-hidden .reader-bar { transform:translateY(-110%); }.reader-shell.controls-hidden .reader-footer{transform:translateY(110%)}
@media(max-width:720px){.reader-bar{grid-template-columns:auto minmax(0,1fr) auto}.reader-title{max-width:none;font-size:14px}.reader-back span,.optional-action{display:none}.reader-actions{gap:4px}.reader-footer{grid-template-columns:auto 1fr auto;gap:10px}.reader-footer .reader-button{font-size:0}.reader-footer .reader-button span{font-size:22px}.reader-progress{min-width:0}.reader-progress label{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}