*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#111;touch-action:none;overscroll-behavior:none}
body{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}
#book,#stage{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}
#stage{overflow:hidden;user-select:none}
#page{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;pointer-events:none;opacity:1;transform:translateX(0);transition:opacity .2s ease,transform .2s ease}
#page.turn-next{opacity:.15;transform:translateX(-2.5%)}
#page.turn-prev{opacity:.15;transform:translateX(2.5%)}
.tap-zone{position:absolute;top:0;bottom:0;width:50%;z-index:3;cursor:pointer}
#tap-left{left:0}#tap-right{right:0}
#dots{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;z-index:5;opacity:.55;pointer-events:none}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.dot.on{background:#fff;transform:scale(1.25)}
@media (orientation:portrait){#page{width:100%;height:auto}}
@media (orientation:landscape){#page{width:auto;height:100%}}
@media (prefers-reduced-motion:reduce){#page{transition:none}}