.reader-heading{margin-bottom:20px}.reader-heading h1{font-size:32px}#reader{background:#343638;color:#fff;position:relative;border:1px solid #343638}#stage.book-stage{background:#343638;height:min(76vh,780px);min-height:500px;position:relative;padding:25px 54px;overflow:hidden;perspective:none;touch-action:pan-y}#flipbook{height:100%;width:100%;margin:auto;transform-origin:50% 0;transition:transform .2s}#stage.zoomed{overflow:auto}#loading{position:absolute;inset:45% 0 auto;text-align:center;color:#ddd}.side-turn{position:absolute;top:45%;z-index:5;background:#202224a8;color:#fff;border:1px solid #ffffff30;width:38px;height:58px;font-size:30px;cursor:pointer}.side-turn:hover{background:#111}.side-turn:disabled{opacity:.2;cursor:default}#prev{left:8px}#next{right:8px}.flip-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px;background:#26282a;border-top:1px solid #ffffff15}.flip-toolbar button{background:none;border:1px solid #ffffff35;color:#fff;padding:8px 13px;font:13px Jost,Arial,sans-serif;border-radius:2px}.flip-toolbar button:hover{background:#ffffff18}.flip-toolbar button:disabled{opacity:.3}.flip-toolbar #counter{font-size:13px;min-width:105px;text-align:center}.flip-toolbar #zoomvalue{font-size:11px;color:#ccc;min-width:40px;text-align:center}#thumbs{background:#26282a;padding:12px 20px;display:flex;overflow:auto;gap:12px}#thumbs[hidden]{display:none}#thumbs button{flex:0 0 65px;background:#343638;color:white;border:2px solid transparent;padding:3px}#thumbs button.active{border-color:#d28a43}#thumbs img{display:block;width:55px}#thumbs span{font-size:11px}.reader-note{margin:16px 0}#reader:fullscreen,#reader.fullscreen-fallback{width:100vw;height:100vh;border:0}#reader.fullscreen-fallback{position:fixed;inset:0;z-index:999}#reader:fullscreen #stage,#reader.fullscreen-fallback #stage{height:calc(100vh - 70px);min-height:0}#reader:fullscreen #thumbs,#reader.fullscreen-fallback #thumbs{position:absolute;bottom:65px;width:100%;z-index:8}@media(max-width:650px){#stage.book-stage{height:65vh;min-height:390px;padding:16px 36px}.side-turn{width:28px;height:48px;font-size:24px}#prev{left:3px}#next{right:3px}.flip-toolbar{gap:5px;padding:9px 5px}.flip-toolbar button{padding:8px;font-size:11px}.flip-toolbar #counter{min-width:75px}.reader-heading h1{font-size:27px}main{padding-left:12px;padding-right:12px}}
/* Let the reader fit narrow screens; the library's 300px threshold chooses one leaf. */
#flipbook{min-width:0!important;min-height:0!important}
@media(max-width:650px){#stage.book-stage{height:min(72svh,690px);min-height:360px;padding:16px 22px}.side-turn{background:#20222480;border:0}}
/* Use more screen area for the magazine, with a separate scrollable reading view. */
#stage.book-stage{height:min(86svh,1000px);padding:12px 38px}
@media(max-width:650px){main{padding-left:5px;padding-right:5px}#stage.book-stage{padding:8px 4px;height:min(78svh,760px)}.side-turn{width:24px;opacity:.7}.reader-heading{padding:0 12px}.flip-toolbar #readpage{background:#fff;color:#202224;font-size:14px;padding:10px 14px}}
#read-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#343638;color:white;overflow:hidden}
#read-dialog::backdrop{background:#202224}
#read-dialog[open]{display:flex;flex-direction:column}
.read-tools{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:8px;background:#26282a;font:14px Jost,Arial,sans-serif}
.read-tools button{background:#404244;color:#fff;border:1px solid #777;padding:9px 15px;font:inherit;cursor:pointer}
.read-tools button:disabled{opacity:.3}.read-tools #read-close{margin-left:auto;background:white;color:#222}#read-scale{min-width:40px}
#read-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;background:#fff}
#read-image{display:block;max-width:none;height:auto;margin:0;user-select:none}
@media(max-width:650px){.read-tools{gap:5px;font-size:12px}.read-tools button{padding:10px}.read-tools #read-label{white-space:nowrap}}
/* Native image leaves keep full device-pixel resolution throughout page turns. */
.magazine-leaf{background:#fff;overflow:hidden}
.magazine-leaf img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
@media(max-width:650px){#stage.book-stage{height:calc((100vw - 20px)*1.28 + 16px);min-height:0;padding:8px 4px}}