:root{--reader-bg:radial-gradient(ellipse at 30% 20%,#382116 0%,#181411 52%,#090807 100%);--reader-glass:rgba(255,255,255,.09);--reader-border:rgba(255,255,255,.14);--reader-hover:rgba(255,255,255,.17);--reader-orange:#f15a16;--reader-font:Inter,Aptos,"Segoe UI",Arial,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{width:100%;height:100%;overflow:hidden;background:var(--reader-bg);color:#fff;font-family:var(--reader-font);-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
.reader-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;overflow:hidden}
.reader-wrapper::before{position:absolute;inset:-50%;content:"";background:radial-gradient(circle 320px at 18% 28%,rgba(241,90,22,.1),transparent),radial-gradient(circle 450px at 82% 74%,rgba(255,255,255,.045),transparent);pointer-events:none}
.flipbook-stage{position:relative;z-index:10;height:80vh;max-width:90vw;aspect-ratio:1.414/1;transition:transform .15s ease;transform-origin:center center}
#flipbook{width:100%;height:100%;border-radius:4px;box-shadow:0 30px 65px -12px rgba(0,0,0,.72)}
.magazine-page{overflow:hidden;background:#fff}
.magazine-page img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
#panOverlay{position:fixed;z-index:15;inset:0;display:none;cursor:grab;touch-action:none}
#panOverlay.is-active{display:block}
#panOverlay:active{cursor:grabbing}
.reader-back{position:fixed;z-index:100;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:7px;padding:9px 17px;border:1px solid var(--reader-border);border-radius:999px;background:var(--reader-glass);color:rgba(255,255,255,.88);font-size:.82rem;font-weight:750;text-decoration:none;backdrop-filter:blur(20px);transition:.2s}
.reader-back:hover{background:var(--reader-hover);color:#fff}
.reader-back svg,.control-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reader-title{position:fixed;z-index:99;top:max(20px,env(safe-area-inset-top));left:50%;max-width:42%;overflow:hidden;color:rgba(255,255,255,.48);font-size:.78rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap;transform:translateX(-50%)}
.preview-ribbon{position:fixed;z-index:120;top:0;left:50%;padding:7px 18px;border-radius:0 0 12px 12px;background:var(--reader-orange);color:#fff;font-size:.72rem;font-weight:850;transform:translateX(-50%)}
.is-preview .reader-title{top:42px}
.reader-loader,.reader-error{position:absolute;z-index:80;display:flex;align-items:center;gap:10px;padding:14px 24px;border:1px solid var(--reader-border);border-radius:999px;background:rgba(0,0,0,.65);font-size:.88rem;font-weight:750;backdrop-filter:blur(14px)}
.reader-loader span{width:18px;height:18px;border:2px solid #fff4;border-top-color:var(--reader-orange);border-radius:50%;animation:reader-spin .8s linear infinite}
.reader-error{flex-direction:column;border-radius:18px;text-align:center}
.reader-error button{border:0;border-radius:10px;background:var(--reader-orange);color:#fff;padding:9px 14px;font-weight:800;cursor:pointer}
@keyframes reader-spin{to{transform:rotate(360deg)}}
.zoom-badge{position:fixed;z-index:100;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:none;padding:7px 14px;border:1px solid var(--reader-border);border-radius:999px;background:var(--reader-glass);color:#fffc;font-size:.72rem;font-weight:800;backdrop-filter:blur(16px)}
.zoom-badge.is-visible{display:block}
.controls-bar{position:fixed;z-index:100;bottom:max(24px,env(safe-area-inset-bottom));left:50%;display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--reader-border);border-radius:999px;background:var(--reader-glass);box-shadow:0 8px 34px rgba(0,0,0,.45);backdrop-filter:blur(20px);transform:translateX(-50%)}
.control-button{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;transition:.12s}
.control-button:hover{background:var(--reader-hover);color:#fff}
.control-button:active{transform:scale(.9)}
.control-button--small{width:33px;height:33px}
.control-button--small svg{width:17px;height:17px}
.control-divider{width:1px;height:20px;background:#fff2}
.page-counter{padding:7px 16px;border:1px solid #fff2;border-radius:999px;background:#fff1;color:#fffc;font-size:.74rem;font-weight:750;white-space:nowrap;cursor:pointer;transition:.15s}
.page-counter:hover{border-color:#ffffff40;background:#ffffff1c;color:#fff}
.goto-overlay{position:fixed;z-index:1000;inset:0;display:none;align-items:center;justify-content:center;background:#000a;backdrop-filter:blur(9px)}
.goto-overlay.is-open{display:flex}
.goto-box{width:320px;max-width:90vw;padding:30px;border:1px solid var(--reader-border);border-radius:20px;background:linear-gradient(145deg,#332218,#17120f);box-shadow:0 24px 65px #0009;text-align:center;animation:reader-dialog .2s ease}
@keyframes reader-dialog{from{opacity:0;transform:scale(.9) translateY(10px)}}
.goto-box h2{margin-bottom:20px;color:#fffb;font-size:.95rem}
.goto-input-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;color:#fff7;font-weight:700}
.goto-input-row input{width:90px;height:48px;border:2px solid #fff3;border-radius:12px;outline:0;background:#fff1;color:#fff;font-size:1.35rem;font-weight:800;text-align:center;user-select:text}
.goto-input-row input:focus{border-color:var(--reader-orange);box-shadow:0 0 0 3px rgba(241,90,22,.25)}
.goto-actions{display:flex;justify-content:center;gap:10px}
.reader-button{padding:10px 28px;border:0;border-radius:999px;background:var(--reader-orange);color:#fff;font-size:.84rem;font-weight:800;cursor:pointer}
.reader-button--ghost{border:1px solid #fff3;background:transparent;color:#fffb}
@media(max-width:768px){.flipbook-stage{width:98vw;height:auto;min-height:55vh;aspect-ratio:auto}.controls-bar{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 16px);justify-content:center;gap:2px;padding:5px 8px}.control-button{width:38px;height:38px}.control-button--small{width:35px;height:35px}.navigation-extra,.hide-mobile{display:none}.reader-back{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));padding:8px 11px;font-size:.73rem}.reader-title{display:none}.page-counter{padding:6px 10px;font-size:.68rem}.zoom-badge{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}.preview-ribbon{max-width:65vw;text-align:center}}
@media(max-width:390px){.controls-bar{gap:0}.control-button{width:35px}.control-button--small{width:32px}.page-counter{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}