:root{--navy:#173e69;--navy2:#0e2f52;--cyan:#11a6c4;--ink:#18314f;--paper:#fff;--bg:#e8f0f4;--shadow:0 18px 55px rgba(14,42,70,.18)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 50% 10%,#fff 0,#eef5f8 42%,#dce8ee 100%)}body{min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px clamp(14px,3vw,38px);background:rgba(255,255,255,.95);border-bottom:1px solid rgba(23,62,105,.11);backdrop-filter:blur(12px);z-index:3000;position:relative}.eyebrow{font-size:.69rem;font-weight:900;letter-spacing:.085em;color:var(--cyan)}h1{font-size:clamp(1.04rem,2vw,1.62rem);margin:3px 0 0;color:var(--navy)}.top-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end}.btn,.mini-btn,.start-btn,.skip-btn,.toc button,.more-menu button,.more-menu a{border:0;font:inherit;cursor:pointer;text-decoration:none;transition:.2s}.btn,.mini-btn{border-radius:10px;padding:9px 12px;font-weight:800}.btn.primary{background:var(--navy);color:#fff}.secondary{background:#edf5f8;color:var(--navy);border:1px solid rgba(23,62,105,.12)}.btn.icon{min-width:42px}.btn:hover,.mini-btn:hover{transform:translateY(-1px);filter:brightness(.97)}.more-wrap{position:relative}.more-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:205px;padding:8px;background:#fff;border:1px solid rgba(23,62,105,.12);border-radius:14px;box-shadow:var(--shadow);z-index:5000}.more-menu button,.more-menu a{display:block;width:100%;text-align:left;padding:10px 11px;border-radius:9px;background:transparent;color:var(--navy);font-weight:750}.more-menu button:hover,.more-menu a:hover{background:#edf5f8}.viewer{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px clamp(44px,6vw,84px) 10px;overflow:auto}.stage{width:min(96vw,calc(76vh * 1.4142));max-width:1400px;transition:transform .25s ease;transform-origin:center center}.book{position:relative;width:100%;aspect-ratio:1.4142/1;perspective:3200px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,.61,.36,1);filter:drop-shadow(0 20px 30px rgba(13,40,63,.08))}.book.closed{transform:translateX(25%)}.book::before{content:"";position:absolute;inset:3% 0 -2%;background:rgba(15,42,65,.17);filter:blur(22px);border-radius:16px;z-index:-2}.book::after{content:"";position:absolute;left:50%;top:.6%;bottom:.6%;width:10px;transform:translateX(-5px);background:radial-gradient(ellipse at center,rgba(0,0,0,.25) 0,rgba(0,0,0,.10) 32%,rgba(255,255,255,.42) 57%,transparent 75%);z-index:1000;pointer-events:none;transition:opacity .4s}.book.closed::after{opacity:0}.book-bg{position:absolute;top:0;width:50%;height:100%;background:#fff;border:1px solid rgba(16,55,88,.12)}.book-bg-left{left:0;border-radius:12px 2px 2px 12px;box-shadow:inset -22px 0 32px rgba(8,38,65,.08)}.book-bg-right{right:0;border-radius:2px 12px 12px 2px;box-shadow:inset 22px 0 32px rgba(8,38,65,.08)}.closed .book-bg-left{visibility:hidden}.sheet{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .92s cubic-bezier(.2,.72,.18,1),filter .35s;will-change:transform;cursor:pointer}.sheet.flipped{transform:rotateY(-180deg)}.page{position:absolute;inset:0;overflow:hidden;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(12,40,70,.1)}.front{border-radius:2px 12px 12px 2px;box-shadow:inset 24px 0 34px rgba(7,35,60,.055),9px 5px 17px rgba(12,40,70,.08)}.back{transform:rotateY(180deg);border-radius:12px 2px 2px 12px;box-shadow:inset -24px 0 34px rgba(7,35,60,.055)}.page img,.mobile-reader img{width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}.sheet.turning{filter:drop-shadow(25px 13px 19px rgba(10,35,58,.30))}.nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:16px;background:rgba(23,62,105,.94);color:#fff;font-size:2.6rem;line-height:1;cursor:pointer;z-index:2500;box-shadow:0 8px 24px rgba(14,42,70,.22);transition:.2s}.nav:hover{background:var(--cyan);transform:translateY(-50%) scale(1.04)}.nav:disabled{opacity:.2;cursor:not-allowed}.nav-left{left:clamp(8px,2vw,28px)}.nav-right{right:clamp(8px,2vw,28px)}.controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:10px 18px 16px;color:#52667b;font-size:.88rem}.mini-btn{background:#fff;color:var(--navy);border:1px solid rgba(23,62,105,.15);padding:8px 11px}.page-indicator{font-weight:900;color:var(--navy);min-width:180px;text-align:center}.hint{opacity:.78}.mobile-reader{display:none}.welcome{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(7,27,45,.58);backdrop-filter:blur(9px);z-index:10000;transition:opacity .35s,visibility .35s}.welcome.hidden{opacity:0;visibility:hidden}.welcome-card{width:min(470px,92vw);padding:34px 30px 28px;text-align:center;background:linear-gradient(180deg,#fff,#f5fbfd);border-radius:24px;box-shadow:0 30px 90px rgba(5,25,42,.38);border:1px solid rgba(255,255,255,.6)}.welcome-badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#e5f6fa;color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.08em}.welcome h2{margin:16px 0 8px;color:var(--navy);font-size:clamp(1.55rem,4vw,2.15rem)}.welcome p{margin:0 auto 22px;line-height:1.55;color:#53697c}.start-btn{width:100%;padding:13px 18px;border-radius:13px;background:var(--navy);color:#fff;font-weight:900;font-size:1rem}.start-btn:hover{background:var(--cyan)}.skip-btn{margin-top:13px;background:none;color:#708496;font-size:.82rem}.drawer{position:fixed;left:0;top:0;bottom:0;width:min(390px,90vw);background:#fff;z-index:8500;box-shadow:25px 0 55px rgba(8,30,50,.22);transform:translateX(-105%);transition:transform .3s ease;overflow:auto;padding:20px}.drawer.open{transform:translateX(0)}.drawer-backdrop{position:fixed;inset:0;background:rgba(8,28,45,.36);z-index:8000;opacity:0;visibility:hidden;transition:.3s}.drawer-backdrop.open{opacity:1;visibility:visible}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:sticky;top:-20px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:20px 0 12px;z-index:5}.drawer-head h2{margin:3px 0;color:var(--navy)}.close-btn{border:0;background:#edf5f8;color:var(--navy);width:38px;height:38px;border-radius:11px;font-size:1.6rem;cursor:pointer}.toc{display:grid;gap:6px}.toc button{text-align:left;padding:9px 11px;border-radius:9px;background:#f3f8fa;color:var(--ink);font-weight:750}.toc button:hover{background:#e3f3f7;color:var(--navy)}.thumb-title{margin:22px 0 10px;font-weight:900;color:var(--navy)}.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.thumb{padding:0;border:2px solid transparent;background:#fff;border-radius:8px;overflow:hidden;cursor:pointer;position:relative}.thumb img{display:block;width:100%;aspect-ratio:1/1.4142;object-fit:cover}.thumb span{position:absolute;right:4px;bottom:4px;background:rgba(12,40,70,.82);color:#fff;border-radius:5px;padding:2px 6px;font-size:.68rem;font-weight:800}.thumb.active{border-color:var(--cyan)}
@media(max-width:780px){.topbar{padding:9px 10px;gap:8px}.brandblock{min-width:0;flex:1}.eyebrow{font-size:.58rem}.topbar h1{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}.top-actions{gap:5px}.btn{padding:7px 9px;font-size:.78rem}.btn span{display:none}.viewer{padding:10px 42px 4px;overflow:auto}.stage{width:min(88vw,calc(76vh / 1.4142));max-width:680px}.book{display:none}.mobile-reader{display:block;width:100%;aspect-ratio:1/1.4142;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 18px 42px rgba(14,42,70,.19);touch-action:pan-y pinch-zoom}.mobile-reader img{object-fit:contain;background:#fff}.nav{width:34px;height:50px;border-radius:11px;font-size:2rem}.nav-left{left:3px}.nav-right{right:3px}.hint{display:none}.controls{padding:7px 8px 12px;gap:8px}.page-indicator{font-size:.78rem;min-width:140px}.mini-btn{font-size:.76rem}.more-menu{right:0}.welcome-card{padding:28px 22px 23px}.thumbs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.btn.primary span{display:none}.topbar h1{max-width:42vw}.stage{width:min(86vw,calc(72vh / 1.4142))}.drawer{width:94vw}}
@media(prefers-reduced-motion:reduce){.sheet,.book,.stage,.nav,.btn,.mini-btn,.drawer,.drawer-backdrop,.welcome{transition:none}}
.qr-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(7,27,45,.62);backdrop-filter:blur(8px)}.qr-modal[hidden]{display:none}.qr-card{position:relative;width:min(390px,92vw);padding:28px;text-align:center;background:#fff;border-radius:22px;box-shadow:0 30px 90px rgba(5,25,42,.4)}.qr-card h2{margin:8px 0 16px;color:var(--navy)}.qr-card img{width:min(245px,70vw);height:auto;border-radius:14px}.qr-card p{margin:12px 0 0;font-weight:800;color:var(--navy)}.qr-close{position:absolute;right:12px;top:12px;border:0;background:#edf5f8;color:var(--navy);width:38px;height:38px;border-radius:11px;font-size:1.5rem;cursor:pointer}.toast{position:fixed;left:50%;bottom:24px;z-index:13000;transform:translate(-50%,20px);padding:11px 16px;border-radius:999px;background:#173e69;color:#fff;font-weight:800;opacity:0;visibility:hidden;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.2)}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}