:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf1ff;background:#0b1640;--navy:#0b1640;--blue:#17275b;--gold:#ffd168;--ink:#10244c;--bookw:1420px;--bookh:946.67px}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-width:280px;min-height:100vh;background:radial-gradient(ellipse 1000px 640px at 50% 16%,#264b96 0%,#162758 48%,#0b163b 100%);overflow-x:hidden}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.32;cursor:not-allowed}
button:focus-visible{outline:3px solid #ffdc72;outline-offset:3px}
button{-webkit-tap-highlight-color:transparent}
.reader-shell{min-height:100dvh;display:flex;flex-direction:column;isolation:isolate}
.reader-shell::before,.reader-shell::after{content:"✦";position:fixed;color:rgba(255,209,104,.17);pointer-events:none;z-index:-1;font-size:clamp(70px,12vw,190px)}
.reader-shell::before{left:2%;top:23%;transform:rotate(-19deg)}
.reader-shell::after{right:2%;bottom:15%;transform:rotate(12deg);font-size:clamp(50px,8vw,100px)}
.topbar{min-height:62px;padding:11px clamp(14px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(5,13,39,.66);border-bottom:1px solid rgba(255,255,255,.10)}
.brand{display:flex;align-items:center;gap:12px}.brand-emblem{width:38px;height:38px;background:#ffd068;border-radius:10px;color:#102047;font-size:22px;font-weight:1000;display:grid;place-items:center;position:relative;box-shadow:0 5px 18px #0004}.brand-emblem span{color:#8544ae;position:absolute;right:2px;top:2px;font-size:10px}
.brand-text{display:flex;flex-direction:column;gap:2px}.brand-text strong{font-weight:900;font-size:15px;letter-spacing:.08em}.brand-text small{font-weight:700;font-size:8px;letter-spacing:.22em;color:#b0bfdf}
.header-right{display:flex;align-items:center;gap:21px}.chapter-mark{color:#cdd9f0;font-size:10px;font-weight:750;letter-spacing:.15em}.header-btn{border:1px solid #849ac65c;background:rgba(255,255,255,.065);color:white;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:700}.header-btn>span:first-child{font-size:18px;margin-right:6px;vertical-align:middle}
.book-heading{text-align:center;flex:0 0 auto;margin:15px 12px 8px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.22em;color:#ffd478}.star-dot{margin:0 5px}.book-heading h1{margin:2px 0 0;font-size:clamp(21px,2.1vw,31px);font-weight:900;letter-spacing:-.045em;line-height:1.24}.book-heading p{color:#bbcae8;margin:3px 0 0;font-size:12px}
.reading-room{flex:1 0 auto;min-height:360px;height:min(82vh,calc(100dvh - 225px));max-height:1100px;display:grid;grid-template-columns:minmax(38px,70px) minmax(0,1fr) minmax(38px,70px);align-items:stretch;position:relative;margin:0 auto;width:min(100%,1650px);padding:0 10px}
.turn-nav{display:flex;align-items:center;justify-content:center}.turn-nav button{border:1px solid #b5c5ed5b;background:rgba(255,255,255,.07);color:#fff;width:45px;height:72px;border-radius:18px;font-size:45px;line-height:1;box-shadow:0 12px 24px #050f275c;transition:background .15s,transform .15s}.turn-nav button:not(:disabled):hover{background:#254781;transform:scale(1.035)}
.zoom-viewport{overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;width:100%;height:100%;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff47 transparent;touch-action:pan-x pan-y}
.zoom-canvas{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center}
.book-stage{width:var(--bookw);height:var(--bookh);perspective:1800px;flex:none;transform-style:preserve-3d;will-change:transform;position:relative;transform-origin:center center}
.book{width:var(--bookw);height:var(--bookh);position:relative;border-radius:8px;filter:drop-shadow(0 23px 19px rgba(3,7,27,.45));transform-style:preserve-3d;background:#fdfbf7}
.book::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:15px;z-index:5;pointer-events:none;transform:translateX(-50%);background:linear-gradient(to right,rgba(18,33,72,.22),rgba(255,255,255,.3) 48%,rgba(0,0,0,.16))}
.spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;backface-visibility:hidden;background:#f9f5f0;border:3px solid #f8e8d9;border-radius:8px;overflow:hidden}
.spread[hidden]{display:none!important}
.book-page{position:relative;width:100%;height:100%;background:#fcf8f3;overflow:hidden}.book-page .page-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center center}
.book-page.art-page{background:#1a244b}.book-page.art-page .page-image{background:#1a244b;object-fit:contain;object-position:center center}
.live-story{display:none}
.reader-controls{flex:0 0 auto;max-width:1200px;width:calc(100% - 36px);margin:9px auto 0;background:rgba(6,16,43,.79);border:1px solid #a6c7fc42;border-radius:15px;padding:11px 17px 10px;box-shadow:0 5px 25px #0003}
.nav-controls{display:flex;align-items:center;gap:16px;justify-content:space-between}.move-btn{display:flex;align-items:center;justify-content:center;gap:7px;color:#1b2851;background:#ffd576;border:0;border-radius:12px;min-width:122px;height:42px;font-size:13px;font-weight:850}.move-btn>span:first-child{font-size:26px;font-weight:400;line-height:.7}.move-btn#nextBtn>span:last-child{font-size:26px;font-weight:400;line-height:.7}
.page-middle{text-align:center;display:flex;flex-direction:column;gap:2px}.page-middle strong{font-size:12px;letter-spacing:.14em}.page-middle span{font-size:12px;color:#b6c7ed}
.progress-track{width:100%;height:4px;border-radius:8px;background:#6382bc36;margin:10px 0;overflow:hidden}.progress-track span{height:100%;width:16.67%;display:block;background:linear-gradient(90deg,#e9b75d,#ffd980);border-radius:10px;transition:width .24s ease}
.extra-controls{display:flex;justify-content:space-between;align-items:center;gap:14px}.sound-controls{display:flex;align-items:center;gap:12px;min-width:0}.read-btn{border:1px solid #75a1df66;color:#fff;background:#24528b;border-radius:10px;min-height:39px;padding:7px 13px;font-size:13px;font-weight:750;display:inline-flex;align-items:center;gap:9px}.read-btn[aria-pressed=true]{background:#5d2e79;border-color:#b98cc8}.read-btn>span:first-child{font-size:12px}.speech-status{color:#d1dcef;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoom-controls{display:flex;gap:2px;align-items:center;background:#091735;border:1px solid #a6bee94a;border-radius:10px;padding:3px}.zoom-controls button{border:0;background:transparent;color:white;border-radius:6px;height:30px;min-width:35px;font-size:20px;font-weight:500}.zoom-controls button:hover:not(:disabled){background:#243b67}.zoom-controls #zoomResetBtn{font-weight:750;font-size:12px;min-width:55px}
.friendly-footer{text-align:center;color:#aabce1;font-size:9px;letter-spacing:.15em;padding:8px 14px 11px;font-weight:800;flex:0 0 auto}
.status-notice{pointer-events:none;position:fixed;bottom:16px;left:50%;transform:translate(-50%,15px);background:#fff;color:#14264e;padding:11px 17px;border-radius:11px;box-shadow:0 10px 30px #0006;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;z-index:20;max-width:90vw;text-align:center}.status-notice.show{opacity:1;transform:translate(-50%,0)}
.is-dragging{cursor:grabbing}.is-turning .turn-nav button{pointer-events:none}
@media(min-width:801px) and (max-height:710px){.book-heading{margin:8px 0 2px}.book-heading p{display:none}.reading-room{height:calc(100dvh - 205px);min-height:310px}.reader-controls{margin:4px auto;padding:6px 12px}.progress-track{margin:6px 0}.friendly-footer{padding:4px 12px}}
@media(max-width:1000px){.chapter-mark{display:none}.reading-room{grid-template-columns:45px minmax(0,1fr) 45px;padding:0 2px}.turn-nav button{width:38px;height:64px;font-size:38px;border-radius:12px}}
/* On narrow screens, preserve the magazine reader's single-page flow for legibility. */
@media(max-width:920px){
 body{background:radial-gradient(ellipse 600px 900px at 50% 0,#294784,#101e49 68%,#0b1639)}
 .topbar{min-height:56px;padding:8px 12px}.brand-emblem{width:33px;height:33px;font-size:19px}.brand-text strong{font-size:12px}.brand-text small{font-size:7px;letter-spacing:.12em}.header-btn{padding:6px 9px;font-size:11px}.header-btn>span:first-child{margin-right:3px}
 .book-heading{margin:13px 10px 9px}.book-heading h1{font-size:25px}.book-heading p{font-size:11px}
 .reading-room{height:auto;min-height:0;max-height:none;width:100%;display:block;padding:0;flex:1 0 auto}
 .turn-nav{display:none}
 .zoom-viewport{height:auto;min-height:0;display:block;overflow:visible;touch-action:pan-y}
 .zoom-canvas{display:block;min-height:0;min-width:0}
 .book-stage{width:100%!important;height:auto!important;transform:none!important;filter:none!important;will-change:auto;perspective:none}
 .book{width:100%;height:auto;min-height:0;filter:none;background:transparent;border-radius:0}
 .book::after{display:none}
 .spread{position:relative;display:block;border:0;border-radius:0;background:transparent;min-height:0;overflow:visible;inset:auto}
 .book-page{height:auto;max-width:650px;margin:0 auto;min-height:410px;width:100%;border-radius:10px;box-shadow:0 14px 42px #020e2d70}
 .book-page[hidden]{display:none!important}
 .text-page{background:#fdf9f3;border:2px solid #d9c9eb}
 .text-page .page-image{display:none}
 .live-story{display:block;padding:clamp(21px,5.5vw,40px);color:#1d2b48;min-height:420px}
 .mini-eyebrow{color:#7634b1;font-size:10px;font-weight:850;letter-spacing:.1em}
 .live-story h2{font-size:clamp(28px,7vw,42px);line-height:1.06;margin:23px 0 17px;color:#112957;letter-spacing:-.04em}
 .story-copy p{margin:0 0 8px;font-size:clamp(16.5px,4.45vw,19px);line-height:1.48;color:#22304a}
 .tech-lesson{margin:19px 0 0;padding:16px;border-radius:15px;background:#ffefc1;border:2px solid #f4c86a;display:flex;flex-direction:column;gap:6px}.tech-lesson .lesson-chip{font-size:11px;font-weight:900;color:#8b5914;text-transform:uppercase;letter-spacing:.04em}.tech-lesson strong{font-size:20px;color:#172956}.tech-lesson p{margin:0;font-size:16px;line-height:1.4}
 .live-page-num{display:block;text-align:center;font-size:12px;color:#8588a3;border-top:1px solid #eee2de;margin:24px 0 0;padding:8px 0 0}
 .art-page{background:#1a244b;overflow:hidden;border:2px solid #d2c7da}
 .art-page .page-image{height:auto;width:100%;display:block;object-fit:contain}
 .reader-controls{position:sticky;bottom:0;z-index:8;width:100%;border:0;border-top:1px solid #8fb5fa65;border-radius:14px 14px 0 0;margin:13px 0 0;background:rgba(8,20,50,.97);padding:10px 10px max(10px,env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
 .nav-controls{gap:6px}.move-btn{min-width:76px;height:42px;border-radius:9px;padding:0 7px;font-size:12px}.page-middle strong{font-size:10px}.page-middle span{font-size:11px}.progress-track{margin:9px 0}
 .extra-controls{gap:8px}.read-btn{padding:7px 9px;min-height:38px;font-size:12px}.speech-status{font-size:10px}.zoom-controls button{min-width:31px}.zoom-controls #zoomResetBtn{min-width:47px;font-size:11px}
 .friendly-footer{font-size:8px;padding:10px 5px 16px;line-height:1.4}
}
@media(max-width:370px){.brand-text small{display:none}.desktop-label{display:none}.move-label{display:none}.move-btn{min-width:46px}.reader-controls{padding-left:7px;padding-right:7px}.read-btn{font-size:11px}.book-heading h1{font-size:22px}.story-copy p{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important}}

.cover-page{background:#0d1946;}
.cover-page .page-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#0d1946;}
.inside-cover{background:#fcf8f3;}

.book.cover-mode{background:transparent;filter:drop-shadow(0 23px 19px rgba(3,7,27,.45));}
.book.cover-mode::after{display:none;}
.spread.cover-closed{grid-template-columns:1fr;place-items:stretch;background:transparent;border:0;overflow:visible;}
.spread.cover-closed .inside-cover{display:none!important;}
.spread.cover-closed .cover-page{width:100%;height:100%;background:#0d1946;border:3px solid #f8e8d9;border-radius:8px;overflow:hidden;box-shadow:0 18px 30px rgba(3,7,27,.35);}
@media(max-width:920px){.cover-page{max-width:650px;margin:0 auto;}.inside-cover{display:none!important;}}