:root{
  --blue:#0a75b8;
  --deep:#0b4f8a;
  --orange:#f47a20;
  --purple:#8d2fa6;
  --paper:#fff;
  --ink:#1f2937;
  --chrome:#f7f9fc;
  --shadow:0 22px 70px rgba(15,23,42,.22);
  --zoom:1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(145deg,#eef4fa,#f8fafc 42%,#edf1f6);color:var(--ink);overflow:hidden}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,23,42,.08);position:relative;z-index:20}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--blue) 0 62%,var(--orange) 62% 82%,var(--purple) 82%)}
.brand{display:flex;gap:12px;align-items:center;min-width:0}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,var(--blue),var(--deep));color:white;display:grid;place-items:center;font-weight:800;font-size:12px;box-shadow:0 7px 18px rgba(10,117,184,.25)}
.brand strong,.brand span{display:block}.brand strong{font-size:15px}.brand span{font-size:12px;color:#64748b;margin-top:2px}.top-actions{display:flex;gap:8px}.btn{border:0;border-radius:10px;padding:9px 12px;text-decoration:none;font-size:13px;font-weight:650;cursor:pointer}.btn.subtle{color:var(--deep);background:#edf6fc}.btn:hover{filter:brightness(.97)}
.stage{height:calc(100vh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 20px 10px;gap:12px;position:relative}
.book-shell{position:relative;display:flex;align-items:center;justify-content:center;width:min(94vw,1180px);height:min(78vh,760px);perspective:2200px}
.book{position:relative;height:100%;aspect-ratio:1190/842;max-width:100%;transform:scale(var(--zoom));transform-origin:center center;transition:transform .2s ease;filter:drop-shadow(0 20px 28px rgba(15,23,42,.18))}
.page{position:absolute;top:0;width:50%;height:100%;background:var(--paper);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.page img{width:100%;height:100%;object-fit:contain;background:white;display:block;user-select:none}.left-page{left:0;border-radius:10px 0 0 10px}.right-page{right:0;border-radius:0 10px 10px 0}.book.cover-mode{aspect-ratio:595/842}.book.cover-mode .right-page{left:0;right:auto;width:100%;border-radius:12px}.book.cover-mode .gutter{display:none}
.gutter{position:absolute;z-index:5;left:50%;top:0;width:24px;height:100%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(255,255,255,.24) 45%,rgba(0,0,0,.1));mix-blend-mode:multiply;opacity:.4}
.turner{position:absolute;z-index:10;top:0;right:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;pointer-events:none}
.turner>div{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#fff}.turner-front{transform:rotateY(0deg)}.turner-back{transform:rotateY(180deg)}.turner img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}.turner.next{animation:flipNext .58s cubic-bezier(.2,.7,.2,1) forwards}.turner.prev{left:0;right:auto;transform-origin:right center;animation:flipPrev .58s cubic-bezier(.2,.7,.2,1) forwards}.turner.prev .turner-front{transform:rotateY(0)}.turner.prev .turner-back{transform:rotateY(180deg)}
@keyframes flipNext{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes flipPrev{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.nav-hit{position:absolute;top:0;bottom:0;width:18%;border:0;background:transparent;cursor:pointer;z-index:15}.nav-hit:focus-visible{outline:3px solid rgba(10,117,184,.5);outline-offset:-3px}.prev-hit{left:0}.next-hit{right:0}
.controls{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:8px 10px;box-shadow:0 10px 30px rgba(15,23,42,.12);z-index:30}.icon-btn{width:38px;height:36px;border:0;border-radius:9px;background:#f0f5f9;color:var(--deep);font-size:21px;line-height:1;cursor:pointer}.icon-btn:hover{background:#e2eef7}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.divider{width:1px;height:26px;background:#dbe3ea;margin:0 2px}.page-readout{display:flex;align-items:center;gap:5px;font-size:13px;color:#64748b}.page-readout input{width:48px;height:34px;text-align:center;border:1px solid #d6dee7;border-radius:8px;font:inherit;color:var(--ink);background:white}.hint{margin:0;font-size:12px;color:#64748b;text-align:center}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{padding:24px}
body.is-fullscreen .topbar{display:none}body.is-fullscreen .stage{height:100vh}
@media (max-width:760px){
  body{overflow:auto}.topbar{height:auto;min-height:64px;padding:10px 12px}.brand span{display:none}.top-actions .btn:first-child{display:none}.stage{min-height:calc(100vh - 64px);height:auto;padding:12px 8px 18px}.book-shell{height:min(73vh,700px);width:96vw}.book,.book.cover-mode{aspect-ratio:595/842}.book .left-page{display:none!important}.book .right-page{left:0!important;right:auto!important;width:100%!important;border-radius:11px!important}.book .gutter{display:none}.turner{width:100%;left:0;right:auto;transform-origin:left center}.turner.prev{left:0;transform-origin:right center}.nav-hit{width:26%}.controls{gap:5px;flex-wrap:wrap}.icon-btn{width:36px}.hint{padding:0 12px}}
@media (max-height:650px) and (orientation:landscape){.topbar{height:54px}.stage{height:calc(100vh - 54px);padding:8px}.book-shell{height:74vh}.hint{display:none}}