/* Reserve the screen for the menu; keep navigation at the bottom. */
body{height:100svh;display:flex;flex-direction:column;overflow:hidden}
header{flex:none;padding:9px 20px;font-size:18px;min-height:40px}header small{font-size:12px}header>span:last-child{font-size:10px}
main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 8px max(5px,env(safe-area-inset-bottom))}
main .viewport{flex:1;height:auto;min-height:0;width:100%;container-type:size}
.book{width:min(98cqw,calc((100cqh - 20px)*2.824));max-width:none}
main nav{flex:none;position:static;gap:18px;padding:0;height:38px;flex-wrap:nowrap;background:transparent}
main nav button{width:40px;height:36px;min-height:36px;padding:0;border:0;font-size:0;background:transparent}
main nav #prev:after{content:'←';font-size:24px}main nav #next:after{content:'→';font-size:24px}
main nav #status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);min-width:0}
main nav button:not(#prev):not(#next){display:none}
main .hint{flex:none;font-size:10px;line-height:1.25;margin:2px auto 0;padding:0 6px;max-width:none;text-align:center}
.viewport:not(.zoomed){cursor:default}
@media(max-width:650px) and (orientation:portrait){header{padding:8px 14px;font-size:17px}main{padding-left:5px;padding-right:5px}main .viewport{height:auto;min-height:0}.book{width:min(98cqw,calc((100cqh - 16px)*2.824))}body:not(.full-book) .reader{max-width:min(96cqw,calc(92cqh * 1.05))}main .hint{font-size:9px}}
.view-mode{font-size:0;border:0;padding:0;width:32px;height:28px;min-height:28px}.view-mode:after{content:'▤';font-size:21px}.view-mode[hidden]{display:none}header>span:nth-child(2){margin-left:auto;font:10px Arial;letter-spacing:.18em}header{gap:12px}
@media(max-width:650px) and (orientation:portrait){body.full-book .book:not(.open){width:min(196cqw,calc((100cqh - 20px)*2.824))}}