:root{color-scheme:light dark;--bg: #0e0e10;--fg: #ececec;--muted: #8b8b93;--chrome-bg: rgba(20, 20, 24, .78);--chrome-border: rgba(255, 255, 255, .08);--accent: #6aa9ff}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,Segoe UI,system-ui,sans-serif;height:100%;overscroll-behavior:none}a{color:inherit}#app{width:100vw;min-height:100dvh}.empty{padding:3rem 1rem;text-align:center;color:var(--muted)}.empty h1{color:var(--fg)}.empty code{background:#1b1b20;padding:.1em .35em;border-radius:3px;font-size:.9em}.viewer-root{width:100vw;height:100dvh;overflow:hidden}.viewer-shell{width:100%;height:100%;position:relative}.viewer-swiper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;background:var(--bg)}.slide-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:0}.slide-inner .page-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.slide-inner.is-spread .page-img{max-width:50%;max-height:100%}.controls{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:.75rem;padding:.55rem .85rem calc(.55rem + env(safe-area-inset-bottom));background:var(--chrome-bg);border-top:1px solid var(--chrome-border);backdrop-filter:blur(8px);font-size:.85rem;z-index:10;direction:ltr;transform:translateY(0);opacity:1;transition:transform .18s ease,opacity .18s ease}.controls.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none}.controls .ctrl-title{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.controls .ctrl-page{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--muted)}.controls .ctrl-spread{flex:0 0 auto;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:#ffffff0f;color:var(--fg);border:1px solid var(--chrome-border);border-radius:4px;font:inherit;cursor:pointer}.controls .ctrl-share{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--chrome-border);border-radius:4px;background:#ffffff0a;color:var(--fg);text-decoration:none}.controls .ctrl-share:hover{background:#ffffff1a}.controls .ctrl-spread[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.tap-hint{position:absolute;top:0;bottom:0;width:33.333%;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5;animation:tap-hint-show 3.6s ease forwards}.tap-hint.is-left{left:0}.tap-hint.is-right{right:0}.tap-hint-ripple{position:relative;width:64px;height:64px;border-radius:50%;background:#ffffff2e}.tap-hint-ripple:before,.tap-hint-ripple:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:tap-hint-ripple 1.6s ease-out infinite}.tap-hint-ripple:after{animation-delay:.8s}@keyframes tap-hint-ripple{0%{transform:scale(.6);opacity:1}to{transform:scale(2);opacity:0}}@keyframes tap-hint-show{0%{opacity:0}8%{opacity:1}85%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tap-hint,.tap-hint-ripple:before,.tap-hint-ripple:after{animation:none}.tap-hint{opacity:1}}
