*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#878278}
body{font-family:Arial,sans-serif}
.reader{height:100%;height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}
.book-stage{position:relative;width:min(84vw,calc(76dvh * 1.414),920px);aspect-ratio:1.414;flex:none}
.book{width:100%;height:100%;position:relative}
.book canvas{display:block;touch-action:none}
.sheet{background:#f5f1e8;overflow:hidden}.sheet img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:64px;border:0;border-radius:3px;color:#eee;background:#0002;font-size:34px;cursor:pointer}
.nav{z-index:1000}.nav:hover{background:#0005}.nav:disabled{visibility:hidden}.prev{left:-48px}.next{right:-48px}
.status{font-size:12px;color:#fff9;letter-spacing:1px;min-height:14px}
@media(max-width:600px){.book-stage{width:90vw}.nav{width:28px;height:48px;background:transparent}.prev{left:-5vw}.next{right:-5vw}}


/* Mobile and tablet reader layout */
html, body { max-width: 100%; overflow-x: hidden; }
.reader { position: relative; width: 100%; max-width: 100vw; box-sizing: border-box; overflow-x: hidden; padding: max(52px, env(safe-area-inset-top)) 12px 16px; }
.book-stage { max-width: 100%; }
.reader-close { position: fixed; z-index: 2000; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; box-sizing: border-box; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(0,0,0,.82); color: #fff; font: 400 30px/1 Arial, sans-serif; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.38); }
.reader-close:hover, .reader-close:focus-visible { background: #b21f2d; color: #fff; }
@media (max-width: 900px) { .reader { min-height: 100dvh; height: auto; } .book-stage { width: min(92vw, calc(76dvh * 1.414)); max-width: 100%; } #book, .stf__parent, .stf__wrapper { max-width: 100%; } .nav { z-index: 2001; } }
@media (max-width: 600px) { .reader { padding-left: 6px; padding-right: 6px; } .book-stage { width: calc(100vw - 56px); max-width: 100%; } .reader-close { width: 42px; height: 42px; } .prev { left: -24px; } .next { right: -24px; } }