:root{color-scheme:dark;--bg:#111315;--panel:#191c1f;--line:#34383c;--text:#f3f1ec;--muted:#a9adb2;--accent:#d9c8a5;--bar-h:72px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}body{min-height:100vh}.app-shell{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#24282b 0,#141719 52%,#0e1011 100%)}
.topbar{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,48px);border-bottom:1px solid #ffffff14;gap:16px}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}.monogram{font:46px/1 Georgia,serif;color:#f5f2eb;border-right:1px solid #777;padding-right:14px}.brand-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.brand-copy strong{font:500 13px/1.2 Georgia,serif;letter-spacing:.22em;white-space:nowrap}.brand-copy small{font-size:8px;letter-spacing:.17em;color:var(--muted);white-space:nowrap}.top-actions{display:flex;align-items:center;gap:5px}.icon-btn,.small-btn{display:grid;place-items:center;min-width:36px;height:36px;padding:0 9px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:4px;text-decoration:none;font-size:20px;cursor:pointer}.icon-btn:hover,.small-btn:hover{background:#ffffff12;border-color:#ffffff20}.reader-layout{flex:1;display:flex;min-height:0;padding:clamp(12px,2.3vw,32px);gap:14px}.reader{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid #ffffff1b;border-radius:8px;background:#0b0c0dcc;box-shadow:0 18px 60px #0006;overflow:hidden}.reader-heading{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#151719;border-bottom:1px solid #ffffff12;flex-shrink:0}.nav-arrow{border:0;background:transparent;color:#f4f1e9;font-size:32px;line-height:1;width:42px;height:42px;cursor:pointer}.nav-arrow:disabled{opacity:.25;cursor:default}.page-status{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;letter-spacing:.08em}.load-status{font-size:10px;color:var(--muted);letter-spacing:0}.book-stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:350px;padding:12px;overflow:hidden;background:radial-gradient(ellipse at center,#2b2e30 0,#141617 70%)}.book{position:relative;width:min(100%,1100px);height:min(68vh,760px);min-height:320px;margin:auto;visibility:hidden}.book.ready{visibility:visible}.book .page{background:#f6f3ed;overflow:hidden}.book .page canvas{display:block;width:100%;height:100%;object-fit:contain}.book .page.--left{box-shadow:inset -8px 0 14px -12px #0008}.book .page.--right{box-shadow:inset 8px 0 14px -12px #0008}.empty-state{position:absolute;inset:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);pointer-events:none}.empty-state[hidden]{display:none}.empty-mark{font:80px/1 Georgia,serif;color:#e9e2d3}.empty-state h1{font:26px Georgia,serif;color:var(--text);font-weight:400;margin:18px 0 8px}.empty-state p{max-width:420px;line-height:1.6;margin:5px 0}.empty-state code{color:#f1ddae}.hint{font-size:12px}.reader-footer{height:54px;display:flex;align-items:center;gap:18px;padding:0 20px;border-top:1px solid #ffffff12;background:#151719;flex-shrink:0}.reader-footer>span{font-size:11px;white-space:nowrap;letter-spacing:.1em}.reader-footer input[type=range]{flex:1;min-width:50px;accent-color:var(--accent)}.jump-control{font-size:11px;color:var(--muted);white-space:nowrap}.jump-control input{width:54px;background:#222629;border:1px solid #44494d;color:white;padding:6px;border-radius:3px;margin-left:4px}.thumbnail-panel{width:220px;flex-shrink:0;border:1px solid var(--line);background:#171a1c;border-radius:6px;overflow:hidden}.thumbnail-panel[hidden]{display:none}.panel-heading{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--line)}.panel-heading strong{font-size:12px}.small-btn{font-size:11px;min-width:auto;height:28px}.thumbnail-list{height:calc(100% - 44px);overflow:auto;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px;padding:10px}.thumb{padding:4px;border:1px solid #ffffff1a;background:#0e1011;color:var(--muted);font-size:10px;cursor:pointer}.thumb canvas{display:block;width:100%;height:auto;background:#eee}.thumb.active{border-color:var(--accent);color:white}.footer-note{display:flex;justify-content:space-between;padding:12px clamp(16px,3vw,48px);font-size:9px;letter-spacing:.18em;color:#858a8e;border-top:1px solid #ffffff10}.reader-menu{position:fixed;z-index:20;right:24px;top:62px;display:flex;flex-direction:column;min-width:190px;padding:6px;background:#202427;border:1px solid #44494d;box-shadow:0 12px 40px #0009;border-radius:6px}.reader-menu[hidden]{display:none}.reader-menu button{text-align:left;padding:11px 12px;color:var(--text);border:0;background:transparent;cursor:pointer;border-radius:3px;font-size:12px}.reader-menu button:hover{background:#ffffff12}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e7decb;color:#181a1b;padding:10px 16px;border-radius:4px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}
@media(max-width:760px){:root{--bar-h:62px}.topbar{padding:0 12px}.monogram{font-size:35px;padding-right:9px}.brand{gap:9px}.brand-copy strong{font-size:10px;letter-spacing:.12em}.brand-copy small{font-size:7px;letter-spacing:.08em;max-width:185px;overflow:hidden;text-overflow:ellipsis}.top-actions{gap:0}.icon-btn{min-width:30px;height:34px;padding:0 5px;font-size:17px}.reader-layout{padding:8px;gap:0}.thumbnail-panel{position:fixed;z-index:10;left:8px;top:70px;bottom:65px;width:min(230px,75vw);box-shadow:0 10px 30px #000a}.book-stage{min-height:300px;padding:4px}.book{height:min(66vh,700px);min-height:280px;width:100%}.reader-heading{height:42px}.reader-footer{height:48px;padding:0 10px;gap:9px}.reader-footer>span{font-size:10px}.jump-control{font-size:0}.jump-control input{font-size:11px;width:45px}.footer-note{font-size:8px;padding:10px 12px}.empty-state h1{font-size:21px}.empty-state p{font-size:12px}}
@media(max-width:390px){.brand-copy small{display:none}.top-actions .icon-btn{min-width:27px}.reader-footer{gap:6px;padding:0 7px}.reader-footer>span{letter-spacing:0}.book{min-height:250px}}