*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#080808;color:#eee;font-family:system-ui,sans-serif}body{overflow:hidden}#viewer{position:relative;width:100%;height:100%;height:100dvh;display:grid;place-items:center;touch-action:pan-y pinch-zoom}#slide{display:block;width:100%;height:100%;object-fit:contain;user-select:none}button{color:inherit;background:#151515b8;border:1px solid #ffffff24;border-radius:6px;cursor:pointer;min-width:40px;min-height:40px;font:24px system-ui}button:focus-visible{outline:2px solid #f5de28;outline-offset:2px}button:disabled{opacity:.25;cursor:default}.edge{position:absolute;top:0;bottom:64px;width:32%;background:none;border:0;border-radius:0}#left{left:0}#right{right:0}nav{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:#080808a8;border-radius:9px;padding:4px;white-space:nowrap}#counter{font-size:12px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}#status{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:12px;background:#080808b0;border-radius:5px;padding:4px 9px;pointer-events:none}#status:empty{display:none}#retry{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:16px}body.immersive nav{opacity:0;pointer-events:none}body.immersive nav:focus-within{opacity:1;pointer-events:auto}@media(prefers-reduced-motion:no-preference){nav{transition:opacity .2s}}