:root{--bar:#0d315e;--paper:#fff;--ink:#122;--gold:#cfaa42;--shadow:0 18px 45px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#e8ebef;color:var(--ink);overflow:hidden}
.topbar{height:54px;background:var(--bar);color:#fff;display:flex;align-items:center;gap:12px;padding:0 12px;box-shadow:0 2px 9px rgba(0,0,0,.2);position:relative;z-index:20}.title{font-weight:700;letter-spacing:.2px;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tools{display:flex;gap:6px}.tool{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:7px;min-width:38px;height:36px;padding:0 10px;font-size:18px;cursor:pointer}.tool span{font-size:14px}.tool:hover{background:rgba(255,255,255,.2)}
.stage{height:calc(100vh - 98px);display:flex;align-items:center;justify-content:center;position:relative;padding:18px 58px 12px;perspective:1800px;overflow:hidden}.book{display:flex;justify-content:center;align-items:center;transform-origin:center center;transition:transform .18s ease;filter:drop-shadow(0 10px 18px rgba(0,0,0,.16));max-width:100%;max-height:100%}.page{position:relative;background:var(--paper);box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d}.page img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.page.left{border-radius:7px 0 0 7px;box-shadow:-8px 12px 28px rgba(0,0,0,.22)}.page.right{border-radius:0 7px 7px 0;box-shadow:8px 12px 28px rgba(0,0,0,.22)}.page.single{border-radius:7px}.page.left:after,.page.right:before{content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:none}.page.left:after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08))}.page.right:before{left:0;background:linear-gradient(90deg,rgba(0,0,0,.09),transparent)}
.hotspot{position:absolute;background:rgba(207,170,66,0);border-radius:3px;cursor:pointer;z-index:4}.hotspot:hover,.hotspot:focus{background:rgba(207,170,66,.18);outline:2px solid rgba(207,170,66,.55)}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;border:0;border-radius:10px;background:rgba(13,49,94,.88);color:#fff;font-size:48px;line-height:48px;cursor:pointer;z-index:10;box-shadow:0 5px 14px rgba(0,0,0,.22)}.nav:hover{background:#0d315e}.nav:disabled{opacity:.25;cursor:default}.prev{left:8px}.next{right:8px}
.footer{height:44px;background:#fff;border-top:1px solid #cfd5db;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:13px;position:relative;z-index:20}.pager{display:flex;align-items:center;gap:6px}.pager input{width:58px;padding:5px;border:1px solid #bcc5ce;border-radius:5px}.hint{color:#63707c}
.shade{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}.drawer{position:fixed;top:0;left:0;bottom:0;width:min(360px,88vw);background:#fff;z-index:31;box-shadow:8px 0 28px rgba(0,0,0,.25);transform:translateX(-102%);transition:transform .22s ease;overflow:auto}.drawer.open{transform:translateX(0)}.drawerHead{position:sticky;top:0;background:var(--bar);color:#fff;padding:16px;display:flex;justify-content:space-between;align-items:center;font-size:18px}.drawerHead button{border:0;background:none;color:#fff;font-size:30px;cursor:pointer}.jump{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #e7e7e7;background:#fff;padding:13px 16px;cursor:pointer;font-size:14px}.jump:hover{background:#f4f6f8}.jump small{float:right;color:#65717d}.jump.special{font-weight:650;background:#f8fafc}
.turn-next{animation:turnNext .38s ease}.turn-prev{animation:turnPrev .38s ease}@keyframes turnNext{0%{transform:rotateY(0)}48%{transform:rotateY(-8deg) scale(.985)}100%{transform:rotateY(0)}}@keyframes turnPrev{0%{transform:rotateY(0)}48%{transform:rotateY(8deg) scale(.985)}100%{transform:rotateY(0)}}
@media(max-width:760px){.stage{padding:10px 42px 8px}.title{font-size:14px}.tool span{display:none}.nav{width:36px;height:62px;font-size:40px}.prev{left:3px}.next{right:3px}.hint{display:none}.page.left,.page.right{border-radius:7px}.page.left:after,.page.right:before{display:none}}