:root{color-scheme:dark;--bg:#111519;--bg2:#171c22;--white:#f5f5f4;--muted:#9da7ad;--red:#d52c34;--line:#343c43;--paper-w:595;--paper-h:842}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%;overscroll-behavior:none}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;background:var(--bg);color:var(--white)}
button,input{font:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #ff7373;outline-offset:4px}
.app{min-height:100svh;display:flex;flex-direction:column;overflow:hidden;position:relative;background:radial-gradient(ellipse 70% 62% at 50% 42%,#31353a 0%,#1b2025 59%,#111519 100%)}
.topbar{height:77px;min-height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,68px);border-bottom:1px solid rgba(255,255,255,.1);z-index:2;background:rgba(12,16,21,.56)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap}
.brand-mark{color:var(--red);font-size:35px;font-weight:900;line-height:1;transform:rotate(0deg) scaleX(1.35);display:inline-block;margin-right:3px}
.brand-word{font-weight:900;font-size:clamp(23px,2vw,31px);font-style:italic;letter-spacing:-1.6px}
.brand-word span{color:#f3f3f3}
.brand-divider{height:24px;width:1px;background:#58606b;margin:0 6px 0 10px}
.brand-detail{font-size:10px;letter-spacing:2.8px;font-weight:700;color:#aeb6bd}
.topbar-right{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:2px;color:#acb4bc;white-space:nowrap}
.status-dot{width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 13px #db334c}
.topbar-separator{opacity:.35;margin:0 2px}
.reader{flex:1;position:relative;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;overflow:hidden;padding:16px 24px 7px}
.ambient{pointer-events:none;position:absolute;border-radius:50%;filter:blur(70px);opacity:.22}
.ambient-a{width:340px;height:140px;background:#c5bdad;left:50%;top:52%;transform:translate(-50%,-50%)}
.ambient-b{width:280px;height:240px;background:#6b2c32;right:14%;top:26%;opacity:.08}
.book-area{flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.book{position:relative;perspective:2400px;transform-style:preserve-3d;flex:none;filter:drop-shadow(0 14px 20px rgba(0,0,0,.35));user-select:none;-webkit-user-select:none;cursor:pointer;touch-action:pan-y}
.book::before{content:"";position:absolute;inset:0 50% 0 0;background:rgba(255,255,255,.03);box-shadow:inset -8px 0 22px rgba(0,0,0,.22);pointer-events:none}
.book::after{content:"";position:absolute;inset:0 0 0 50%;background:rgba(255,255,255,.024);box-shadow:inset 8px 0 22px rgba(0,0,0,.22);pointer-events:none}
.book-spine{position:absolute;z-index:0;left:calc(50% - 5px);width:10px;top:0;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,.8),#6a6764,rgba(0,0,0,.5));box-shadow:0 0 30px 10px rgba(0,0,0,.22)}
.sheet{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform:rotateY(0deg);transform-style:preserve-3d;transition:transform 820ms cubic-bezier(.35,.04,.15,1);will-change:transform;pointer-events:none}
.sheet.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.22)}
.face.front{border-left:1px solid #c2c2c2}
.face.back{transform:rotateY(180deg);border-right:1px solid #c2c2c2}
.face img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.65}
.face.front::after{background:linear-gradient(to right,rgba(0,0,0,.12),transparent 9%,transparent 87%,rgba(0,0,0,.11))}
.face.back::after{background:linear-gradient(to left,rgba(0,0,0,.15),transparent 10%,transparent 88%,rgba(0,0,0,.07))}
.sheet.active-turn .face{box-shadow:0 8px 25px rgba(0,0,0,.45)}
.book.instant .sheet{transition:none!important}
.reader-note{font-size:11px;letter-spacing:1.5px;color:#a7aeb4;opacity:.78;text-align:center;z-index:1;flex:none}
.hint-sep{color:var(--red);margin:0 8px}
.mobile-book{display:none;position:relative;perspective:1200px;transform-style:preserve-3d;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer;filter:drop-shadow(0 13px 24px rgba(0,0,0,.5))}
.mobile-page{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;background:#fff;backface-visibility:hidden;transform-style:preserve-3d;-webkit-user-drag:none;pointer-events:none}
.mobile-page-back{z-index:1}
.mobile-page-front{z-index:2}
.mobile-page-turn{z-index:3;transform-origin:left center;transform:rotateY(-180deg);visibility:hidden}
.mobile-book.turn-forward .mobile-page-front{transition:transform 680ms ease-in-out;transform-origin:left center;transform:rotateY(-180deg)}
.mobile-book.turn-forward .mobile-page-back{z-index:1}
.mobile-book.turn-back .mobile-page-turn{visibility:visible;transition:transform 680ms ease-in-out;transform:rotateY(0deg)}
.mobile-spine{position:absolute;z-index:8;left:0;top:0;bottom:0;width:7px;background:linear-gradient(to right,rgba(0,0,0,.3),transparent);pointer-events:none}
.controls{z-index:5;flex:none;min-height:120px;background:rgba(12,16,20,.82);border-top:1px solid rgba(255,255,255,.085);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 24px 15px;gap:13px}
.controls-group{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4.4vw,66px)}
.nav-btn{display:flex;align-items:center;gap:8px;border:1px solid #454c54;background:rgba(255,255,255,.025);padding:8px 13px;border-radius:10px;color:#e0e4e7;cursor:pointer;font-size:13px;letter-spacing:.2px;transition:background .2s,border .2s}
.nav-btn:hover:not(:disabled){background:#313940;border-color:#656c74}
.nav-btn:disabled{opacity:.3;cursor:not-allowed}
.nav-btn svg{height:19px;width:19px}
.page-number{min-width:180px;text-align:center;font-size:12px;color:#e6e6e6;letter-spacing:1.6px;font-variant-numeric:tabular-nums}
.seek-row{display:flex;align-items:center;gap:12px;width:min(470px,95vw)}
.seek-label{color:#848e97;font-size:10px;letter-spacing:1px;font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--red) var(--progress,0%),#464c53 var(--progress,0%));cursor:pointer;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#e9e9e9;border:3px solid var(--red);box-shadow:0 0 0 4px rgba(213,44,52,.14)}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e9e9e9;border:3px solid var(--red)}
@media(max-width:760px){
 .topbar{height:62px;min-height:62px;padding:0 18px}
 .brand-mark{font-size:26px}
 .brand-word{font-size:25px}
 .brand-divider,.brand-detail,.topbar-right{display:none}
 .reader{padding:14px 10px 8px;gap:7px}
 .book{display:none!important}
 .mobile-book{display:block}
 .reader-note{font-size:10px;letter-spacing:.5px}
 .controls{min-height:117px;padding:14px 12px max(18px,env(safe-area-inset-bottom));gap:16px}
 .controls-group{width:100%;gap:10px;justify-content:space-between}
 .nav-btn{padding:9px 11px;font-size:12px}
 .page-number{min-width:0;flex:1;letter-spacing:.4px;font-size:12px}
 .seek-row{width:96%}
}
@media(max-width:355px){.nav-label{display:none}.nav-btn{padding:10px}.page-number{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sheet{transition-duration:150ms}.mobile-book.turn-forward .mobile-page-front,.mobile-book.turn-back .mobile-page-turn{transition-duration:150ms}}

/* v2: Larger reading area and compact desktop controls. */
.toolbar-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 28px;width:100%}
.zoom-controls{display:flex;align-items:center;gap:5px;flex:none}
.zoom-label{font-size:10px;letter-spacing:1.4px;color:#b0b9c0;margin-right:5px}
.zoom-btn,.zoom-percent,.zoom-fit{height:31px;display:inline-flex;justify-content:center;align-items:center;border:1px solid #4a535a;background:#222a30;color:#f1f4f6;border-radius:7px;cursor:pointer;transition:background .15s,border-color .15s}
.zoom-btn:hover:not(:disabled),.zoom-percent:hover,.zoom-fit:hover{background:#38434d;border-color:#7b8994}
.zoom-btn:disabled{opacity:.28;cursor:not-allowed}
.zoom-btn{min-width:31px;padding:0 5px;font-size:21px;line-height:1}
.zoom-btn svg{width:17px;height:17px}
.zoom-percent{min-width:57px;padding:0 6px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.zoom-fit{min-width:35px;padding:0 8px;font-size:11px}
.fullscreen-btn{margin-left:5px}
.zoom-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);pointer-events:none;padding:5px 12px;border-radius:18px;background:rgba(16,21,26,.88);border:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.3px;color:#e8edef;z-index:3;white-space:nowrap}
.zoom-hint[hidden]{display:none!important}
.book.is-zoomed{cursor:grab}
.book.is-zoomed.is-panning{cursor:grabbing}
@media(min-width:761px){
 .topbar{height:54px;min-height:54px;padding:0 clamp(18px,2.8vw,44px)}
 .brand-mark{font-size:26px}
 .brand-word{font-size:25px}
 .brand-divider{height:21px}
 .topbar-right{font-size:9px}
 .reader{padding:5px 11px 2px;gap:0}
 .reader-note{display:none}
 .controls{min-height:79px;padding:8px 18px 7px;gap:9px}
 .controls-group{gap:clamp(9px,1.6vw,20px)}
 .nav-btn{padding:6px 9px;font-size:12px}
 .nav-btn svg{height:16px;width:16px}
 .page-number{min-width:170px;letter-spacing:1px;font-size:12px}
 .seek-row{width:min(440px,58vw)}
 .book{transition:filter .18s}
}
@media(max-width:760px){
 .zoom-controls{display:none}
 .toolbar-row{display:block}
 .zoom-hint{display:none}
}
@media(max-height:600px) and (min-width:761px){
 .topbar{height:44px;min-height:44px}
 .controls{min-height:58px;gap:5px;padding:4px 15px}
 .zoom-btn,.zoom-percent,.zoom-fit{height:25px}
 .nav-btn{padding:4px 7px}
}