:root{color-scheme:dark;background:#17181c;color:#eee9e1;font:16px system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;height:100dvh;display:flex;flex-direction:column}button,select{font:inherit;color:inherit;background:#24252b;border:1px solid #45444a;border-radius:5px;min-height:42px;padding:8px 14px}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.3;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #dcb374;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 32px;border-bottom:1px solid #33343a;background:#1b1c20}.brand{display:flex;gap:14px;align-items:center;color:#eee9e1;text-decoration:none;font:26px Georgia,serif;letter-spacing:3px}.brand b{font-size:34px;color:#dcb374;font-weight:400}.brand small{display:block;font:11px system-ui,sans-serif;letter-spacing:3px;color:#a5a1a2;margin-top:5px}.tools{display:flex;gap:10px;align-items:center}main{flex:1;min-height:0;overflow:auto;text-align:center;padding:22px 24px 12px;background:radial-gradient(ellipse at center,#2d2929,#17181c 75%)}.page-heading{max-width:800px;margin:0 auto 16px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#b5a99c}figure{margin:0}#page{display:block;max-width:100%;max-height:calc(100dvh - 245px);width:auto;height:auto;margin:auto;box-shadow:0 8px 40px #0008}.wide #page{max-height:none;width:min(100%,1100px)}#message{color:#b3aaab;font-size:13px;margin:16px 0 0}footer{position:relative;flex-shrink:0;min-height:64px;padding:8px 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#1b1c20;border-top:1px solid #33343a}footer nav{display:flex;align-items:center;gap:8px}footer button{font-size:26px;line-height:1;min-width:44px}footer select{border:0;background:transparent}.footer-label,#progress-label{font-size:12px;letter-spacing:1.5px;color:#a5a1a2}#progress-label{text-align:right}progress{position:absolute;bottom:0;left:0;width:100%;height:2px;border:0;background:#33343a;appearance:none}progress::-webkit-progress-bar{background:#33343a}progress::-webkit-progress-value{background:#dcb374}progress::-moz-progress-bar{background:#dcb374}dialog{max-width:960px;width:90vw;max-height:85dvh;border:1px solid #514638;background:#1b1c20;color:inherit;padding:24px;border-radius:8px}dialog::backdrop{background:#000b}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dialog-heading h1{font:28px Georgia,serif;margin:0}#thumbnails{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}#thumbnails button{padding:6px;background:#232329;min-width:0}#thumbnails button[aria-current=page]{border-color:#dcb374;color:#e2be88}#thumbnails img{width:100%;aspect-ratio:2/3;object-fit:contain;display:block;margin-bottom:8px}#thumbnails span{font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.focused .brand{display:none}.focused header{justify-content:flex-end;padding:8px 24px}.focused #page{max-height:calc(100dvh - 190px)}.focused.wide #page{max-height:none}@media(max-width:768px){header{padding:14px 12px;gap:12px;flex-wrap:wrap;justify-content:center}.brand{font-size:23px}.brand b{font-size:29px}.brand small{display:none}.tools{gap:8px}button,select{font-size:14px;padding:8px 11px}main{padding:14px 0 10px}.page-heading{font-size:11px;margin:0 12px 12px}.fit-control{display:none}#page,.wide #page,.focused #page,.focused.wide #page{width:100%;max-width:100%;height:auto;max-height:none}footer{grid-template-columns:1fr;padding:8px;justify-items:center}.footer-label,#progress-label{display:none}footer nav{gap:8px}footer select{font-size:15px}#message{font-size:12px;padding-inline:12px}dialog{padding:18px;width:94vw}#thumbnails{grid-template-columns:repeat(3,1fr);gap:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}


/* Keep horizontal page gestures clipped while allowing vertical reading and pinch zoom. */
#surface{overflow-x:hidden}#frame{overflow:hidden;touch-action:pan-y pinch-zoom}#page{transform-origin:center center;user-select:none;-webkit-user-drag:none}
@media(max-width:768px){
 body{width:100%;overflow:hidden}main{padding-inline:0}#frame{width:100%}
 .focused header{position:fixed;top:env(safe-area-inset-top,0px);right:0;z-index:10;padding:6px;background:transparent;border:0}
 .focused .tools>:not(#focus),.focused footer,.focused .page-heading,.focused #message{display:none}
 .focused #focus{background:transparent}
 .focused main{padding:0}.focused #page{width:100%;max-height:none;box-shadow:none}
}
.focused #focus{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:transparent;color:#fff;font:30px/1 system-ui,sans-serif;text-shadow:0 1px 3px #000}