*{box-sizing:border-box}body{margin:0;background:#17201e;color:#f1eadb;font-family:Arial,sans-serif;min-height:100dvh}button,select{font:inherit;font-size:14px}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid #62695e;background:transparent;border-radius:5px;padding:11px 17px}button:hover{background:#ffffff12}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #e8c584;outline-offset:4px}button:disabled{opacity:.3;cursor:default}header{height:92px;max-width:1600px;margin:auto;padding:20px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff14}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px;letter-spacing:3px;font-family:Georgia,serif;font-size:24px}.brand small{display:block;font:10px Arial;letter-spacing:2px;margin-top:6px}.monogram{border:1px solid #cdb07c;color:#d8b777;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-style:italic;font-size:34px}nav{display:flex;padding:4px;background:#101815;border-radius:7px}nav button{border:0}nav button[aria-pressed=true]{background:#d8b777;color:#20291f}.zoom span{margin-left:12px}main{padding:24px 20px 12px}#reader{display:flex;justify-content:center;align-items:center;min-height:250px}#book{position:relative;display:flex;width:min(100%,calc((100dvh - 220px)*1.415));aspect-ratio:1.415;perspective:2400px;filter:drop-shadow(0 18px 22px #0007);isolation:isolate}.paper{width:50%;height:100%;background:#eee3d0;overflow:hidden;position:relative}.paper img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.paper:after{content:"";position:absolute;inset:0;pointer-events:none}#left:after{background:linear-gradient(90deg,transparent 94%,#0002)}#right:after{background:linear-gradient(90deg,#0002,transparent 6%)}#leaf{display:none;position:absolute;left:50%;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;z-index:3}#leaf .paper{position:absolute;inset:0;width:100%;backface-visibility:hidden}#leaf .back{transform:rotateY(180deg)}#leaf .front:after{background:linear-gradient(90deg,#0002,transparent 15%)}#leaf .back:after{background:linear-gradient(90deg,transparent 85%,#0002)}footer{padding:9px 4% 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1600px;margin:auto}footer p,.detail{font-size:12px;color:#b8bdae;line-height:1.5}.detail{letter-spacing:2px}.controls{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:14px}.controls button{font-size:26px;line-height:20px;padding:10px 18px}.controls select{padding:7px;color:#f1eadb;background:#17201e;border:1px solid #62695e;border-radius:4px}.controls label{margin-left:8px}#count{margin-right:8px;color:#b8bdae}#scroll{max-width:850px;margin:auto}#scroll img{display:block;width:100%;height:auto;margin-bottom:20px;cursor:zoom-in}dialog{padding:0;width:96vw;max-width:1400px;height:96dvh;max-height:none;border:1px solid #62695e;background:#17201e;color:#f1eadb}dialog::backdrop{background:#000c}.modalbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:10px}.modalbar button{padding:8px 12px}#zoomArea{height:calc(100% - 62px);overflow:auto;text-align:center;background:#101512}#zoomImage{display:block;width:min(100%,1055px);max-width:none;height:auto;margin:auto}body.scrolling footer{position:sticky;bottom:0;background:#17201ef5;border-top:1px solid #ffffff20}body.scrolling #hint{display:none}[hidden]{display:none!important}@media(max-width:720px){header{height:82px;padding:12px 16px;gap:8px}.brand{font-size:19px;letter-spacing:2px}.brand small{font-size:8px}.monogram{display:none}nav button{padding:10px}.zoom{font-size:0;padding:8px}.zoom span{font-size:23px;margin:0}main{padding:18px 12px 8px}#book{width:min(100%,calc((100dvh - 210px)*.7075));aspect-ratio:.7075}#left{display:none}#right{width:100%}#leaf{left:0;width:100%}footer{padding:6px 12px 16px;flex-direction:column;gap:8px}footer p{order:2;margin:0;font-size:12px}.detail{display:none}.controls{gap:9px}#zoomImage{width:100%}.modalbar{padding:10px;font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
