:root{--bg: #e8e2d6;--bg-deep: #d9d1c3;--paper: #f7f3ea;--ink: #2c241c;--muted: #6b6156;--line: rgba(44, 36, 28, .12);--toolbar: rgba(247, 243, 234, .92);--accent: #6b4f3a;--shadow: rgba(40, 28, 18, .28);--focus: #8a6a4e;--toolbar-h: 56px;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;max-height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Noto Serif TC","Source Han Serif TC",Songti TC,PMingLiU,serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{overflow:hidden;overscroll-behavior:none}button,a.tool-btn{font-family:inherit}#app{height:100%;height:100dvh;max-height:100dvh;width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;overflow:hidden}.toolbar{height:calc(var(--toolbar-h) + var(--safe-t));min-height:calc(var(--toolbar-h) + var(--safe-t));padding:var(--safe-t) max(10px,var(--safe-r)) 0 max(10px,var(--safe-l));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;background:var(--toolbar);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20}.book-title{margin:0;font-size:15px;font-weight:600;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}.toolbar-center,.toolbar-right,.toolbar-left{display:flex;align-items:center;gap:4px;min-width:0}.toolbar-left{justify-self:start}.toolbar-center{justify-self:center;flex-shrink:0}.toolbar-right{justify-self:end;justify-content:flex-end;flex-wrap:nowrap;position:relative}.tool-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--ink);width:38px;height:38px;flex-shrink:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;touch-action:manipulation}.tool-btn svg{width:20px;height:20px;fill:currentColor}.tool-btn.is-unavailable,#btn-download.is-unavailable{display:none!important}.share-wrap{position:relative}.share-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:148px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px #281c1229;z-index:40}.share-menu button{width:100%;border:0;background:transparent;color:var(--ink);text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px}.share-menu button:hover{background:#6b4f3a1a}.page-indicator{min-width:88px;display:flex;align-items:center;justify-content:center;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}.page-input{width:5.4em;min-width:3.2em;height:28px;margin:0;padding:0 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;text-align:center;font:inherit;font-variant-numeric:tabular-nums;-webkit-appearance:none;-moz-appearance:none;appearance:none}.page-input:hover{border-color:var(--line);background:var(--paper)}.page-input:focus{border-color:var(--focus);background:var(--paper);color:var(--ink);outline:none}.page-sep{margin:0 4px;opacity:.6}.stage{flex:1;min-height:0;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;padding-left:var(--safe-l);padding-right:var(--safe-r);padding-bottom:var(--safe-b);background:radial-gradient(1200px 500px at 50% 100%,rgba(107,79,58,.08),transparent 60%),var(--bg);overflow:hidden}.nav-arrow{position:absolute;top:0;bottom:0;z-index:12;width:52px;padding:0;border:0;background:transparent;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease,color .22s ease;filter:drop-shadow(0 1px 1px rgba(255,255,255,.85));-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.nav-arrow svg{width:34px;height:34px;pointer-events:none}.nav-arrow:hover{color:#4a3426}.nav-arrow:disabled{cursor:default;pointer-events:none}.nav-arrow-left{left:0;transform:translate(-100%)}.nav-arrow-right{right:0;transform:translate(100%)}.book-wrap.is-cover .nav-arrow-left{left:50%}.book-wrap.is-back .nav-arrow-right{right:50%}@media(hover:hover)and (pointer:fine){.nav-arrow:hover,.nav-arrow:focus-visible{opacity:1}.nav-arrow:disabled:hover,.nav-arrow:disabled:focus-visible{opacity:.22}}@media(hover:none){.nav-arrow{opacity:.4;width:44px}.nav-arrow-left{transform:translate(-70%)}.nav-arrow-right{transform:translate(70%)}.nav-arrow:disabled{opacity:.16}.nav-arrow:active{opacity:.85}}.tool-btn .icon-sound-off,.tool-btn.is-muted .icon-sound-on{display:none}.tool-btn.is-muted .icon-sound-off{display:block}.book-wrap{position:relative;display:flex;align-items:center;justify-content:center;transition:transform .85s ease;will-change:transform;overflow:visible}.book-wrap.is-instant,.book-wrap.is-instant .book-shadow{transition:none}.book-wrap.is-cover .stf__wrapper.--landscape .stf__block:after,.book-wrap.is-back .stf__wrapper.--landscape .stf__block:after{opacity:0}.book-wrap.is-cover .stf__block{clip-path:inset(0 0 0 50%)}.book-wrap.is-back .stf__block{clip-path:inset(0 50% 0 0)}.book-shadow{position:absolute;inset:4% 3% auto 3%;height:92%;border-radius:4px;background:#ffffff59;box-shadow:0 18px 50px var(--shadow),0 2px #fff6 inset;pointer-events:none;transition:left .85s ease,right .85s ease}.book-wrap.is-cover .book-shadow{left:50%;right:2%}.book-wrap.is-back .book-shadow{left:2%;right:50%}.book{position:relative;z-index:1}.stf__wrapper{position:relative;width:100%;height:100%}.stf__block{width:100%;height:100%}.stf__wrapper.--landscape .stf__block:after{content:"";position:absolute;top:0;right:0;bottom:0;left:50%;width:48px;margin-left:-24px;pointer-events:none;z-index:5;background:linear-gradient(to right,transparent,rgba(40,28,18,.08) 45%,rgba(40,28,18,.22) 50%,rgba(40,28,18,.08) 55%,transparent)}.stf__item{background:var(--paper)}.stf__item img,.page-image{width:100%;height:100%;object-fit:fill;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.page{width:100%;height:100%;background:var(--paper)}.page.blank{background:#fff}.page-pending{background:linear-gradient(90deg,#efe8dc 25%,#f6f1e7 37%,#efe8dc 63%);background-size:400% 100%;animation:shimmer 1.2s ease infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}.loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);z-index:50;color:var(--muted)}.loading[hidden],.lightbox[hidden],.thumbs-panel[hidden]{display:none!important}.spinner{width:36px;height:36px;border:3px solid rgba(107,79,58,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.thumbs-panel{position:fixed;top:calc(var(--toolbar-h) + var(--safe-t));right:0;bottom:0;width:min(340px,92vw);background:var(--paper);border-left:1px solid var(--line);z-index:30;display:flex;flex-direction:column;box-shadow:-12px 0 30px #281c121f}.thumbs-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 16px;border-bottom:1px solid var(--line)}.thumbs-head h2{margin:0;font-size:14px;letter-spacing:.12em}.thumbs-list{overflow:auto;padding:14px 12px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}.thumb-item{border:0;background:transparent;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}.thumb-item img{width:100%;aspect-ratio:1691 / 2400;object-fit:contain;display:block;background:#fff;border:1px solid var(--line);border-radius:4px}.thumb-item span{display:block;padding:0;font-size:12px;color:var(--muted);text-align:center}.thumb-item.active img{outline:2px solid var(--accent);outline-offset:1px}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#14100ceb;z-index:80;display:flex;flex-direction:column;color:#f4efe6}.lightbox-toolbar{height:52px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:0 12px}#lightbox-caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;justify-self:start}.lightbox-nav,.lightbox-actions{display:flex;align-items:center;gap:2px;min-width:0}.lightbox-nav{justify-self:center}.lightbox-actions{justify-self:end}.lightbox .page-indicator{color:#f4efe6}.lightbox .page-input:hover,.lightbox .page-input:focus{border-color:#f4efe673;background:#ffffff14;color:#f4efe6}.lightbox .tool-btn{color:#f4efe6;width:auto;padding:0 10px;min-width:38px}.lightbox .tool-btn:disabled{opacity:.35;cursor:default}.lightbox-stage{flex:1;overflow:auto;cursor:default;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:16px;-webkit-overflow-scrolling:touch}.lightbox-stage img{display:block;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;background:#fff;box-shadow:0 8px 28px #00000059}.zoom-field,.zoom-unit{font-size:13px;color:#f4efe6;opacity:.85}#zoom-input{width:64px;height:32px;border:1px solid rgba(244,239,230,.35);border-radius:6px;background:#ffffff14;color:#f4efe6;text-align:center;font:inherit;font-variant-numeric:tabular-nums}@media(min-width:1100px){.book-title{max-width:32vw}}@media(max-width:1099px){.book-title{max-width:18vw;font-size:14px}.toolbar{gap:6px}}@media(max-width:820px){:root{--toolbar-h: 96px}.book-title{display:none}.toolbar{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-items:center;justify-content:stretch;gap:2px 0;width:100%;max-width:100%;min-width:0;height:auto;min-height:calc(var(--toolbar-h) + var(--safe-t));box-sizing:border-box;padding:calc(4px + var(--safe-t)) max(6px,var(--safe-r)) 6px max(6px,var(--safe-l));overflow:visible}.toolbar-left{display:none}.toolbar-center{grid-row:1;grid-column:1;width:100%;justify-content:center;gap:2px;min-width:0}.toolbar-right{grid-row:2;grid-column:1;width:100%;justify-content:space-between;gap:0;min-width:0;flex-wrap:nowrap}.tool-wide{display:inline-flex}.tool-btn{width:44px;height:44px;flex:0 0 auto}.toolbar-right .tool-btn,.toolbar-right .share-wrap{flex:1 1 0;max-width:52px}.toolbar-right .share-wrap{display:inline-flex;justify-content:center}.toolbar-right .share-wrap .tool-btn{width:44px;max-width:none;flex:0 0 auto}.tool-btn svg{width:22px;height:22px}.page-indicator{min-width:84px;font-size:14px;flex:0 0 auto}.page-input{width:4.8em;height:32px;font-size:15px}.stage,.book-wrap{max-width:100%;min-width:0}.nav-arrow{width:44px;opacity:.55}.nav-arrow svg{width:24px;height:24px}.thumbs-panel{width:100%;left:0;border-left:0;box-shadow:none}.thumbs-list{grid-template-columns:repeat(3,1fr);gap:10px 8px;padding:12px 10px calc(18px + var(--safe-b))}.lightbox-toolbar{display:flex;height:auto;min-height:48px;flex-wrap:wrap;gap:8px;padding:calc(8px + var(--safe-t)) 10px 8px}#lightbox-caption{width:100%;font-size:13px}.lightbox-nav{flex:1;justify-content:center}.lightbox-actions{margin-left:auto}.zoom-field,#zoom-input,.zoom-unit{display:none}.lightbox-stage{padding:8px 8px calc(12px + var(--safe-b))}}@media(max-width:420px){.page-indicator{min-width:78px;font-size:13px}.page-input{width:4.4em}.tool-btn{width:42px;height:42px}.toolbar-right .tool-btn,.toolbar-right .share-wrap{max-width:48px}}@media(max-height:500px)and (orientation:landscape){:root{--toolbar-h: 42px}.tool-btn{width:36px;height:36px}.nav-arrow{width:36px}}#btn-install.is-installable{color:var(--accent)}.install-dialog{border:0;padding:0;background:transparent;max-width:min(92vw,420px)}.install-dialog::backdrop{background:#281c1273}.install-dialog-card{position:relative;margin:0;padding:22px 22px 18px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px var(--shadow)}.install-dialog-card h2{margin:0 28px 12px 0;font-size:18px;font-weight:600;letter-spacing:.04em}.install-body{font-size:14px;line-height:1.55;color:var(--muted)}.install-body ol{margin:0;padding-left:1.2em}.install-body li{margin:.35em 0}.install-body strong{color:var(--ink);font-weight:600}.install-note{margin:12px 0 0;font-size:13px}.install-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}.install-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.install-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:8px;min-height:36px;padding:0 14px;font:inherit;font-size:13px;cursor:pointer}.install-btn-secondary{background:transparent;color:var(--muted)}.install-btn-primary{background:var(--accent);border-color:var(--accent);color:#f4efe6}