*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--page-w: 386px;--page-h: 500px;--book-w: min(860px, calc(100vw - 112px) );--spine-w: 6px;--bg1: #0d1b35;--bg2: #1a2744;--sky: #b8dff0;--navy: #1a2744;--gold: #c9a84c;--cover-bg: #141E30}body{background:linear-gradient(155deg,var(--bg1) 0%,var(--bg2) 50%,#0f3460 100%);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:Segoe UI,system-ui,sans-serif;color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 0 8px}.shopify-section-group-header-group,.shopify-section-group-footer-group,.topbar{display:none}.topbar-brand{font-size:.95rem;font-weight:700;letter-spacing:.18em;color:var(--sky);text-transform:uppercase}.topbar-info{font-size:.72rem;letter-spacing:.08em;color:#ffffff73;text-transform:uppercase}.stage-wrap{position:relative;margin-top:0;display:flex;align-items:center;gap:10px;width:100%;justify-content:center;padding:0 10px}.book{position:relative;width:min(var(--book-w),calc(100vw - 112px),calc((100svh - 86px) * 1224 / 792));aspect-ratio:1224 / 792;height:auto;max-height:calc(100svh - 86px);perspective:2000px;perspective-origin:50% 50%;box-shadow:0 18px 52px #00000070;overflow:hidden}.book-bg-left,.book-bg-right{position:absolute;top:0;width:50%;height:100%;background:#fff;overflow:hidden;box-shadow:none}.book-bg-left{left:0;border-radius:0}.book-bg-right{left:50%;border-radius:0}.book-bg-left.blank-page,.book-bg-right.blank-page{background:var(--cover-bg)}.book-bg-left.blank-page img,.book-bg-right.blank-page img{display:none}.book-bg-left img,.book-bg-right img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;pointer-events:none;transform:translateZ(0) scale(1);transform-origin:center center}.spine{position:absolute;left:calc(50% - var(--spine-w)/2);top:0;width:var(--spine-w);height:100%;background:linear-gradient(to right,#0000004d,#ffffff2e 40%,#ffffff2e 60%,#00000038);z-index:50;pointer-events:none}.book-shadow{position:absolute;bottom:-18px;left:30px;right:30px;height:22px;background:radial-gradient(ellipse 80% 100% at center,rgba(0,0,0,.55) 0%,transparent 80%);pointer-events:none;z-index:-1}.flip-sheet{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:100;pointer-events:none;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);filter:none;contain:paint}.flip-front,.flip-back{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-front img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;transform:translateZ(0) scale(1);transform-origin:center center}.flip-back img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;transform:translateZ(0) scale(1);transform-origin:center center;pointer-events:none}.flip-back{transform:rotateY(180deg);background:#fff}.flip-shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5;opacity:0;will-change:opacity}.cast-shadow{position:absolute;top:0;width:50%;height:100%;pointer-events:none;z-index:60;opacity:0;will-change:opacity}.nav-btn{width:42px;height:42px;border-radius:50%;background:#b8dff01a;border:1.5px solid rgba(184,223,240,.28);color:var(--sky);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent}.nav-btn:hover:not(:disabled){background:#b8dff038;border-color:var(--sky);transform:scale(1.07)}.nav-btn:disabled{opacity:.25;cursor:default}.controls{margin-top:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.page-counter{font-size:.75rem;letter-spacing:.08em;color:#ffffff8c;min-width:120px;text-align:center}.scrubber{-webkit-appearance:none;width:170px;height:4px;border-radius:4px;background:#b8dff02e;outline:none;cursor:pointer}.scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--sky);box-shadow:0 0 6px #b8dff080;cursor:pointer}.hint{font-size:.68rem;color:#ffffff4d;letter-spacing:.06em;margin-top:4px;animation:blink 3s ease-in-out infinite}@keyframes blink{0%,to{opacity:.4}50%{opacity:.9}}.thumb-strip{display:flex;gap:5px;max-width:min(780px,calc(100vw - 40px));overflow-x:auto;padding:5px 4px 2px;scrollbar-width:thin;scrollbar-color:rgba(184,223,240,.3) transparent}.thumb-strip::-webkit-scrollbar{height:3px}.thumb-strip::-webkit-scrollbar-thumb{background:#b8dff04d;border-radius:2px}.thumb{flex-shrink:0;width:34px;height:44px;overflow:hidden;border-radius:2px;cursor:pointer;border:1.5px solid rgba(255,255,255,.08);transition:border-color .2s,transform .15s;opacity:.55}.thumb:hover{transform:scale(1.08);opacity:.85}.thumb.active{border-color:var(--sky);opacity:1}.thumb img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;background:#fff}@media (max-width: 700px){body{justify-content:flex-start;overflow-x:hidden;overflow-y:auto;min-height:100svh;padding:12px 0 14px}.stage-wrap{gap:8px;padding:0 8px;margin-top:0}.book{width:min(92vw,430px);aspect-ratio:612 / 792;box-shadow:0 18px 44px #00000070}.book-bg-left,.book-bg-right,.flip-sheet,.cast-shadow{width:100%;left:0!important}.book-bg-right,.spine{display:none!important}.nav-btn{width:38px;height:38px;font-size:1.15rem}.controls{margin-top:12px;gap:10px;padding:0 10px}.scrubber{width:min(58vw,210px)}.page-counter{min-width:86px}.thumb-strip{max-width:96vw;padding-top:8px}.thumb{width:40px;height:51px}.hint{display:none}}@media (prefers-reduced-motion: reduce){.flip-sheet{transition:none!important;animation:none!important}}