*{box-sizing:border-box} :root{color-scheme:light;font-family:Arial,sans-serif;color:#44483d;background:#ede8df}body{margin:0;background:radial-gradient(ellipse at 50% 50%,#faf7f0 0,#ede8df 72%);min-height:100dvh}button,input{font:inherit}button{cursor:pointer;color:inherit;background:transparent;border:1px solid #b7b5a788;border-radius:6px;padding:10px 14px;transition:background .2s}button:hover{background:#fff9}button:focus-visible,input:focus-visible{outline:3px solid #77836c;outline-offset:4px}button:disabled{opacity:.25;cursor:default}header{display:flex;align-items:center;justify-content:space-between;padding:26px 5%;border-bottom:1px solid #b9b4a744}.eyebrow,.intro{font-size:10px;letter-spacing:2px}.eyebrow{color:#777869}h1{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:8px 0 0}h1 span{font-size:24px;color:#979b85;margin-left:15px}.tools{display:flex;gap:8px;font-size:12px}main{max-width:1400px;margin:auto;padding:22px 5% 12px}.intro{display:flex;justify-content:space-between;margin-bottom:20px}.dedication{font:italic 15px Georgia,serif;letter-spacing:0;color:#777869}.reader{display:flex;align-items:center;gap:24px}.arrow{font:36px Georgia,serif;border-radius:50%;width:48px;height:48px;flex-shrink:0;padding:0;background:#f7f3eb}#viewport{flex:1;min-width:0;height:calc(100dvh - 280px);min-height:250px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:10px 14px 18px}#book{position:relative;max-width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:1600px}#page{display:block;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 14px 28px #403c342d,0 2px 4px #403c3422;border-radius:2px}#page.turn{animation:turn .4s ease-out;transform-origin:left center}@keyframes turn{from{opacity:.45;transform:rotateY(-13deg) translateX(10px)}to{opacity:1;transform:none}}#loading{position:absolute;inset:40% 0;text-align:center;pointer-events:none;background:#f5f1e8e8;padding:20px;height:60px;font:italic 18px Georgia}#loading[hidden]{display:none}.navigation{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#757768;margin:7px 72px 12px}#jump{display:flex;align-items:center;gap:8px}#number{width:55px;text-align:center;padding:5px;border:1px solid #c8c6b8;border-radius:4px;background:#ffffff70;color:#44483d}#progress{display:block;width:calc(100% - 144px);margin:0 72px;accent-color:#78816a;height:10px;cursor:pointer}footer{display:flex;justify-content:space-between;margin:24px 0 0;color:#838475;font-size:10px}footer span:first-child{font:italic 13px Georgia}dialog{border:1px solid #ddd6c9;border-radius:12px;background:#f5f1e8;width:min(1000px,94vw);max-height:88dvh;color:inherit;padding:24px}dialog::backdrop{background:#24271e88;backdrop-filter:blur(5px)}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}h2{font:28px Georgia;margin:8px 0}#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}#thumbs button{padding:7px;font-size:11px;text-align:left}#thumbs img{display:block;width:100%;aspect-ratio:1.29;object-fit:contain;background:#e7e0d4;margin-bottom:8px}#thumbs button[aria-current=true]{border:2px solid #68765b;background:#e3e7db}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body.zoomed #viewport{display:block}body.zoomed #book{max-width:none;width:200%;height:auto;display:block}body.zoomed #page{width:100%;max-height:none}body.zoomed .reader{align-items:flex-start}body.zoomed .arrow{margin-top:20px}@media(max-width:650px){header{padding:20px 5%;align-items:flex-start}h1{font-size:25px}.eyebrow{font-size:8px;letter-spacing:1px}.tools{gap:4px}.tools button{padding:8px;font-size:18px}.tools span{display:none}.intro{font-size:8px;letter-spacing:1px;display:block}.dedication{display:block;margin-top:8px;font-size:13px}.reader{gap:5px}.arrow{width:30px;height:36px;font-size:28px}#viewport{height:calc(100dvh - 295px);padding:3px 0 12px;min-height:210px}.navigation{margin:12px 0}#progress{width:100%;margin:0}footer span:last-child{display:none}#part{max-width:90px}dialog{padding:16px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* A fixed viewing area keeps page-turn transforms from creating scrollbars. */
#viewport{overflow:hidden}
#book{flex:none;max-width:none;position:relative;box-shadow:0 14px 28px #403c342d,0 2px 4px #403c3422;background:#fff}
#book img,#page{display:block;flex:1 1 0;min-width:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;box-shadow:none;border-radius:0}
#book.spread img{width:50%;max-width:50%}
#book img[hidden]{display:none}
#book.spread::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:16px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#0000000e,transparent);pointer-events:none}
#book.turn{animation:spread-turn .3s ease-out;transform-origin:center}
@keyframes spread-turn{from{opacity:.55;transform:scale(.985)}to{opacity:1;transform:none}}
body.zoomed #viewport{display:block;overflow:auto}
body.zoomed #book{display:flex;max-width:none;margin:auto}
body.zoomed #book img{max-height:100%}
body.zoomed .reader{align-items:center}
body.zoomed .arrow{margin-top:0}
/* Keep the reader within the screen; only zoom and the thumbnail dialog scroll. */
html,body{height:100%;overflow:hidden}
body{height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
main{width:100%;min-height:0;display:flex;flex-direction:column;margin:0 auto}
.intro,.navigation,footer,#progress{flex-shrink:0}
.reader{flex:1;min-height:0}
#viewport{height:100%;min-height:0}
/* Wide everyday layout, with navigation floating outside the printed pages. */
header{padding:14px 24px}
h1{font-size:26px;margin-top:5px}
main{max-width:none;padding:12px 20px 10px}
.intro{margin-bottom:8px}
.reader{position:relative;gap:0}
#viewport{padding:10px 0 16px;touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:#f7f3ebda;box-shadow:0 2px 12px #0002}
#prev{left:8px}#next{right:8px}
.navigation{margin:4px 8px 7px}
#progress{width:calc(100% - 16px);margin:0 8px}
footer{margin-top:9px}
/* The expanded reader is a modal overlay, even on browsers without Fullscreen API. */
body.reading-focus main{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;padding:0;z-index:20;background:rgba(10,12,16,.96);backdrop-filter:blur(12px)}
body.reading-focus .intro,body.reading-focus footer{display:none}
body.reading-focus .reader{position:absolute;inset:0;width:100%;height:100%;min-height:0}
body.reading-focus #viewport{height:100%;width:100%;padding:0;flex:1;touch-action:pan-y pinch-zoom}
body.reading-focus #book{box-shadow:0 12px 70px #0008}
body.reading-focus .tools{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:25;padding:5px;border:1px solid #ffffff26;border-radius:9px;background:#171b22dc;color:#fff;box-shadow:0 3px 20px #0004}
body.reading-focus .tools button{border-color:transparent;min-height:36px}
body.reading-focus .tools button:hover{background:#ffffff24}
body.reading-focus .arrow{color:#fff;background:#171b2299;border-color:#ffffff40;width:40px;height:48px;border-radius:7px;z-index:24}
body.reading-focus #prev{left:max(8px,env(safe-area-inset-left))}
body.reading-focus #next{right:max(8px,env(safe-area-inset-right))}
body.reading-focus .navigation{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;padding:7px 12px;gap:18px;border-radius:8px;background:#171b22dc;color:#eee;z-index:25;white-space:nowrap}
body.reading-focus #part,body.reading-focus #percent{display:none}
body.reading-focus #number{color:#fff;background:#ffffff18;border-color:#ffffff40}
body.reading-focus #progress{position:absolute;bottom:0;left:0;width:100%;margin:0;height:8px;z-index:25;accent-color:#b0bba1}
body.reading-focus.controls-hidden .tools,body.reading-focus.controls-hidden .navigation,body.reading-focus.controls-hidden #progress,body.reading-focus.controls-hidden .arrow{opacity:0;pointer-events:none}
body.reading-focus.zoomed #viewport{touch-action:pan-x pan-y pinch-zoom}
@media(max-width:650px){header{padding:12px}main{padding:8px 6px}.brand .eyebrow{font-size:7px}h1{font-size:22px}.tools button{padding:7px}#viewport{padding:4px 0 10px}.arrow{width:28px;height:36px}#prev{left:2px}#next{right:2px}.intro{padding:0 6px}.navigation{margin:4px 6px 7px}body.reading-focus .tools span{display:none}body.reading-focus .tools{padding:2px}body.reading-focus .navigation{bottom:max(12px,env(safe-area-inset-bottom));padding:4px 8px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){body.reading-focus .tools span{display:none}body.reading-focus .tools{top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right));padding:2px}body.reading-focus .tools button{font-size:18px;padding:5px 10px}body.reading-focus .navigation{bottom:max(12px,env(safe-area-inset-bottom));padding:4px 8px}body.reading-focus .arrow{width:30px;height:40px}}