*{box-sizing:border-box}html{background:#181b19;color:#f4f1e9;font-family:system-ui,-apple-system,sans-serif}body{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));border-bottom:1px solid #363d36}.title{font-family:serif;font-size:19px;text-decoration:none;color:inherit}.title small{font:11px system-ui;color:#bfc6bc}header label{font-size:12px;color:#bfc6bc}select,button{font:inherit;color:inherit;background:#282e28;border:1px solid #697163;border-radius:6px;min-height:44px;padding:8px 12px}select{max-width:100%}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.3;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #d5c89d;outline-offset:2px}#viewer{min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;display:flex;align-items:center;justify-content:center;outline-offset:-3px}#spread{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;width:100%;height:100%;gap:2px;padding:4px}.page{margin:0;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.page img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.page.failed img{visibility:hidden}.page .error{position:absolute;padding:20px;text-align:center;background:#282e28;border-radius:8px;font-size:14px}.page.two{width:50%}.page.one{width:100%}footer{padding:6px 12px max(8px,env(safe-area-inset-bottom));border-top:1px solid #363d36}.controls{display:flex;justify-content:center;gap:10px;align-items:center}.jump-label{max-width:48%}.controls button{white-space:nowrap}#position{text-align:center;font-size:12px;color:#d8dece;margin:5px 0 0}.hint{text-align:center;font-size:10px;color:#aeb5aa;margin:3px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(orientation:landscape) and (max-height:500px){header{padding-top:2px;padding-bottom:2px}.title{font-size:16px}header select{min-height:32px;padding:3px}.hint{display:none}footer{padding-top:3px;padding-bottom:3px}.controls button,.controls select{min-height:34px;padding:4px 8px}#position{margin:2px 0 0;font-size:10px}}

a{color:inherit}header{flex-wrap:wrap}.landscape-help{display:none;text-align:center;font-size:12px;margin:3px 0}@media(orientation:landscape) and (max-height:500px){.landscape-help{display:block}header{gap:6px}header button{min-height:32px;padding:3px 8px}}

/* Keep intrinsic page widths from expanding the mobile grid; align spread pages at the binding. */
body{grid-template-columns:minmax(0,1fr)}#viewer,#spread{min-width:0}.page.two:first-child img{object-position:left center}.page.two:last-child img{object-position:right center}

/* Width-fit reading keeps long pages legible and scrolls within the viewer. */
#viewer.fit-width{overflow-y:auto;align-items:flex-start}#viewer.fit-width #spread{height:auto;align-items:flex-start}#viewer.fit-width .page{height:auto}#viewer.fit-width .page img{height:auto}