.magazine-app{color:#1f2937;background:#f4f4f7;flex-direction:column;min-height:100vh;display:flex}.magazine-header{z-index:50;backdrop-filter:blur(10px);background:#fffffff2;border-bottom:1px solid #0000000d;position:relative}.header-inner{align-items:center;gap:1rem;max-width:1400px;margin:0 auto;padding:.75rem 1rem;display:flex}.magazine-stage{flex:1;justify-content:center;align-items:center;padding:1rem 1rem .75rem;display:flex;position:relative;overflow:hidden}.stage-viewport{--zoom-scale:1;aspect-ratio:1.414;perspective:2400px;width:100%;max-width:min(95vw,1100px);transform-style:preserve-3d;transform:scale(var(--zoom-scale));transform-origin:50%;transition:transform .35s;position:relative}.stage-viewport.zoomed{overflow:visible}.flipbook{width:100%;height:100%;transform-style:preserve-3d;border-radius:6px;position:relative;box-shadow:0 25px 80px -25px #00000040,0 10px 30px -10px #00000026}.flipbook:before{content:"";z-index:1000;pointer-events:none;background:linear-gradient(#0000002e 0%,#0000000a 50%,#0000002e 100%);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)translateZ(1px)}.sheet{transform-origin:0;width:50%;height:100%;transform-style:preserve-3d;z-index:calc(var(--sheet-count) - var(--sheet-index));border-radius:4px;transition:transform .8s cubic-bezier(.25,1,.45,1);position:absolute;top:0;left:50%;transform:rotateY(0)}.sheet.turned{z-index:calc(var(--sheet-index) + 1);transform:rotateY(-180deg)}.sheet.animating{z-index:9999!important}.page{backface-visibility:hidden;background:#fff;border-radius:4px;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 1px #00000008}.page-front{transform:rotateY(0)}.page-back{transform:rotateY(180deg)}.page-image-wrap{background:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.page img{object-fit:contain;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.blank-page{background:linear-gradient(135deg,#fafafa 0%,#f2f2f2 100%);width:100%;height:100%}.page-shadow{opacity:0;pointer-events:none;background:#00000024;transition:opacity .4s;position:absolute;inset:0}.sheet.animating .page-shadow{opacity:1}.sheet.turned .page-shadow{opacity:0}.page-curl{pointer-events:none;opacity:0;width:28px;transition:opacity .4s;position:absolute;top:0;bottom:0}.front-curl{background:linear-gradient(90deg,#0003 0%,#00000014 40%,#0000 100%);left:0}.back-curl{background:linear-gradient(270deg,#0003 0%,#00000014 40%,#0000 100%);right:0}.sheet.animating .page-curl{opacity:1}.sheet.turned .page-curl{opacity:0}.page-gloss{opacity:0;pointer-events:none;background:linear-gradient(105deg,#0000 40%,#ffffff14 50%,#0000 60%);transition:opacity .4s;position:absolute;inset:0}.sheet.animating .page-gloss{opacity:1}.nav-arrow{color:#334155;cursor:pointer;z-index:50;background:#ffffffeb;border:1px solid #0000000f;border-radius:9999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;transition:background .2s,transform .2s,opacity .2s,box-shadow .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 4px 20px #0000001a}.nav-arrow:hover:not(:disabled){background:#fff;transform:translateY(-50%)scale(1.05);box-shadow:0 6px 24px #00000024}.nav-arrow:disabled{opacity:.25;cursor:not-allowed}.nav-arrow svg{width:1.25rem;height:1.25rem}.nav-prev{left:1rem}.nav-next{right:1rem}.magazine-toolbar{z-index:40;background:#fff;border-top:1px solid #0000000f;padding:.5rem .75rem}.toolbar-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;max-width:1100px;margin:0 auto;display:flex}.toolbar-group{align-items:center;gap:.35rem;display:flex}.toolbar-btn{color:#475569;cursor:pointer;background:0 0;border:1px solid #0000000f;border-radius:9999px;justify-content:center;align-items:center;gap:.35rem;min-height:2.25rem;padding:.45rem .85rem;font-size:.8rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s,opacity .2s;display:inline-flex}.toolbar-btn:hover:not(:disabled){color:#0ea5e9;background:#0ea5e914;border-color:#0ea5e94d}.toolbar-btn:disabled{opacity:.35;cursor:not-allowed}.toolbar-btn.active{color:#0284c7;background:#0ea5e91f;border-color:#0ea5e980}.toolbar-btn svg{width:1rem;height:1rem}.toolbar-btn.icon-only{width:2.25rem;padding:.5rem}.page-group{border-left:1px solid #00000014;border-right:1px solid #00000014;margin:0 .25rem;padding:0 .5rem}.page-indicator{text-align:center;color:#334155;user-select:none;min-width:120px;font-size:.85rem;font-weight:500;display:inline-block}.thumbnail-panel{opacity:0;max-width:1100px;max-height:0;margin:.5rem auto 0;transition:max-height .35s,opacity .3s;overflow:hidden}.thumbnail-panel.open{opacity:1;max-height:180px}.thumbnail-scroll{scrollbar-width:thin;scrollbar-color:#0003 transparent;gap:.75rem;padding:.5rem .25rem 1rem;display:flex;overflow-x:auto}.thumbnail-scroll::-webkit-scrollbar{height:6px}.thumbnail-scroll::-webkit-scrollbar-thumb{background:#0003;border-radius:9999px}.thumbnail{cursor:pointer;color:#64748b;background:0 0;border:none;flex-direction:column;flex:none;align-items:center;gap:.4rem;padding:0;font-size:.7rem;font-weight:500;transition:transform .2s,color .2s;display:flex}.thumbnail:hover{color:#0ea5e9;transform:translateY(-2px)}.thumbnail.active{color:#0284c7}.thumbnail.active .thumbnail-image{box-shadow:0 0 0 2px #0ea5e9}.thumbnail-image{background:#f1f5f9;border-radius:4px;width:72px;height:102px;transition:box-shadow .2s;overflow:hidden;box-shadow:0 2px 8px #00000014}.thumbnail-image img{object-fit:cover;width:100%;height:100%;display:block}@media (width<=768px){.magazine-stage{padding:.75rem .5rem .5rem}.stage-viewport{max-width:100%}.nav-arrow{width:2.25rem;height:2.25rem}.nav-arrow svg{width:1rem;height:1rem}.nav-prev{left:.5rem}.nav-next{right:.5rem}.magazine-toolbar{padding:.4rem .5rem}.toolbar-btn{min-height:2rem;padding:.4rem .6rem;font-size:.75rem}.toolbar-btn.icon-only{width:2rem}.page-indicator{min-width:90px;font-size:.8rem}.thumbnail-image{width:56px;height:80px}}@media (width<=480px){.toolbar-group:first-child,.toolbar-group:last-child{display:none}.page-group{border:none;margin:0;padding:0}.nav-arrow{display:none}}.magazine-stage:fullscreen{background:#1a1a2e;padding:1.5rem}.magazine-stage:fullscreen .stage-viewport{max-width:min(90vw,1300px)}