*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--hud-h: 52px;--bar-h: 48px;--bg: #000;--bg2: #0d0d0d;--accent: #ffffff;--accent-dim: rgba(255,255,255,.3);--dur: .38s;--ease: cubic-bezier(.4, 0, .2, 1)}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:Stellar,Century Gothic,Helvetica Neue,sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}#stage{position:fixed;inset:52px 0 48px;overflow:hidden;background:var(--bg)}.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.slide img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 40px #000000bf;pointer-events:none;-webkit-user-drag:none}#hud{position:fixed;top:0;left:0;right:0;height:52px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;gap:1rem;background:#000000e0;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);transition:opacity .35s}#hud.hide{opacity:0;pointer-events:none}.hud-back{color:#fffc;text-decoration:none;font-size:.8rem;letter-spacing:.08em;padding:.3rem .7rem;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:transparent;white-space:nowrap;transition:color .2s,border-color .2s;font-family:Stellar,Century Gothic,sans-serif}.hud-back:hover{color:#fff;border-color:#fff9}#hud-title{font-size:.85rem;letter-spacing:.18em;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Elianto-Regular,Stellar,sans-serif;text-transform:uppercase}#bottombar{position:fixed;left:0;right:0;bottom:0;height:48px;z-index:20;display:flex;align-items:center;padding:0 1rem;gap:.75rem;background:#000000e0;border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);transition:opacity .35s}#bottombar.hide{opacity:0;pointer-events:none}#progress-track{flex:1;height:3px;border-radius:2px;background:#ffffff1f;cursor:pointer;position:relative}#progress-fill{height:100%;border-radius:2px;background:#fff;min-width:3px;transition:width var(--dur) var(--ease)}#page-counter{font-size:.8rem;letter-spacing:.08em;opacity:.75;white-space:nowrap;min-width:62px;text-align:right;font-family:Stellar,Century Gothic,sans-serif}#thumb-toggle{font-size:.72rem;letter-spacing:.1em;color:#fff9;cursor:pointer;padding:.25rem .65rem;border-radius:4px;border:1px solid rgba(255,255,255,.25);background:transparent;transition:color .2s,border-color .2s;font-family:Stellar,Century Gothic,sans-serif}#thumb-toggle:hover{color:#fff;border-color:#ffffffb3}.click-zone{position:fixed;top:52px;bottom:48px;width:18%;z-index:10;display:flex;align-items:center;cursor:pointer;opacity:0;transition:opacity .25s}.click-zone:hover{opacity:1}#zone-prev{left:0;justify-content:flex-start;padding-left:1rem;background:linear-gradient(to right,rgba(10,6,16,.2),transparent)}#zone-next{right:0;justify-content:flex-end;padding-right:1rem;background:linear-gradient(to left,rgba(10,6,16,.2),transparent)}.zone-icon{width:42px;height:42px;border-radius:50%;background:#0a0610b3;border:1px solid var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--accent);backdrop-filter:blur(8px);transition:transform .15s,background .2s}.click-zone:hover .zone-icon{transform:scale(1.1);background:#1f062ae6;border-color:var(--accent)}#thumb-strip{position:fixed;bottom:48px;left:0;right:0;z-index:25;background:#000000f5;backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);padding:.6rem .75rem;display:flex;gap:.45rem;overflow-x:auto;overflow-y:hidden;transform:translateY(calc(100% + 48px));transition:transform .3s var(--ease);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;height:90px}#thumb-strip.open{transform:translateY(0)}.thumb{flex:0 0 auto;width:64px;height:64px;border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.55;transition:opacity .2s,border-color .2s,transform .15s}.thumb:hover{opacity:.9;transform:translateY(-2px)}.thumb.active{border-color:var(--accent);opacity:1}.thumb img{width:100%;height:100%;object-fit:cover;display:block}#kbd-hint{position:fixed;bottom:calc(var(--bar-h) + 14px);left:50%;transform:translate(-50%);z-index:30;background:#0a0610cc;border:1px solid var(--accent-dim);border-radius:20px;padding:.35rem .9rem;font-size:.72rem;color:#f0e8f4b3;backdrop-filter:blur(10px);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .4s}#kbd-hint.show{opacity:1}#loader{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;transition:opacity .5s}#loader.out{opacity:0;pointer-events:none}.loader-title{font-size:1.4rem;letter-spacing:.28em;color:#fff;font-family:Elianto-Regular,Stellar,sans-serif}.loader-track{width:160px;height:1px;border-radius:1px;background:#ffffff26;overflow:hidden}#loader-fill{height:100%;background:#fff;border-radius:1px;width:0%;transition:width .3s ease}.skip{position:fixed;top:-100%;left:1rem;z-index:999}.skip:focus{top:.5rem}body.reader-mobile #stage{position:fixed;inset:52px 0 48px;overflow-x:hidden;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;overscroll-behavior-y:none;scroll-snap-type:x mandatory;display:flex;flex-direction:row;align-items:stretch;touch-action:pan-x}body.reader-mobile .mobile-page{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;background:var(--bg)}body.reader-mobile .mobile-page.cover{padding:.75rem .65rem}body.reader-mobile .mobile-page.cover .full-img{width:100%;max-width:100%;max-height:calc(100svh - var(--hud-h) - var(--bar-h) - 24px);object-fit:contain;object-position:center center;box-shadow:0 6px 28px #000000a6;pointer-events:none;-webkit-user-drag:none}body.reader-mobile .half-bg{width:100%;height:100%;background-repeat:no-repeat;background-size:200% auto;background-position-y:50%;box-shadow:0 6px 28px #000000a6}body.reader-mobile .half-bg.half-bg-left{background-position-x:0%}body.reader-mobile .half-bg.half-bg-right{background-position-x:100%}body.reader-mobile .click-zone{display:none}@media (min-width: 641px){body:not(.reader-mobile) .click-zone{display:flex}}