:root{color-scheme:light;--ink:#17374a;--accent:#007a86}*{box-sizing:border-box}body{margin:0;background:#edf2f1;color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{padding:18px 5%;background:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce6e5;gap:16px}.brand{display:flex;gap:12px;align-items:center}.mark{background:var(--ink);color:#fff;font-family:Georgia,serif;font-size:22px;padding:10px;border-radius:4px}.brand strong{font-size:19px}.brand small{display:block;margin-top:5px;font-size:12px;letter-spacing:.5px}a{color:var(--accent);font-size:14px}main{max-width:1300px;margin:auto;padding:20px}.intro{text-align:center;margin:4px 0 20px}.intro>span{font-size:10px;letter-spacing:2px;color:#507780}h1{font-family:Georgia,serif;font-size:clamp(22px,3vw,32px);font-weight:normal;margin:10px 0}.intro p{font-size:13px;color:#5d7178;margin:0}#viewport{overflow:auto;padding:18px 16px 30px;min-height:240px}#book{position:relative;display:flex;justify-content:center;margin:0 auto;width:max-content;perspective:1800px;filter:drop-shadow(0 12px 14px #17374a29)}.sheet{position:relative;flex-shrink:0;width:min(39vw, calc((100dvh - 300px)*.7071),480px);aspect-ratio:420.96/595.32;background:white}.sheet img{display:block;width:100%;height:100%}.sheet.left:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 93%,#00000013);pointer-events:none}.sheet.right:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#00000012,transparent 7%);pointer-events:none}.turn{position:absolute;top:0;z-index:5;backface-visibility:hidden}.turn.forward{right:0;transform-origin:left;animation:forward .48s ease-in-out forwards}.turn.backward{left:0;transform-origin:right;animation:backward .48s ease-in-out forwards}@keyframes forward{to{transform:rotateY(-90deg);filter:brightness(.7)}}@keyframes backward{to{transform:rotateY(90deg);filter:brightness(.7)}}#viewport.zoomed .sheet{width:min(85vw,840px)}nav{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}button{border:1px solid #cbdad9;border-radius:6px;background:#fff;color:var(--ink);padding:10px 13px;min-height:40px;font:inherit;font-size:14px;cursor:pointer}button:hover:not(:disabled){background:#deeded;border-color:var(--accent)}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #d99624;outline-offset:3px}#next{background:var(--accent);color:#fff}form{font-size:13px;white-space:nowrap}input{width:48px;padding:8px 2px;text-align:center;border:1px solid #cbdad9;border-radius:4px;background:white;color:var(--ink);font:inherit}.divider{width:10px}#status,.hint{text-align:center;font-size:12px;color:#60777d;margin:12px 0}.hint{font-size:11px}details{max-width:1000px;margin:22px auto 0;border-top:1px solid #cfdddc;padding-top:14px}summary{cursor:pointer;font-size:13px;width:max-content}#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:12px;margin-top:18px}#thumbs button{padding:5px;font-size:11px}#thumbs img{width:100%;display:block;margin-bottom:6px}footer{text-align:center;padding:16px;font-size:10px;color:#5d7178}body:fullscreen{overflow:auto}@media(max-width:700px){header{padding:12px 16px}.brand strong{font-size:15px}.brand small{font-size:10px}header a{font-size:11px}.mark{font-size:18px;padding:8px}main{padding:14px 8px}.intro{margin-bottom:8px}.intro p{font-size:12px}.sheet{width:min(86vw,calc((100dvh - 310px)*.7071));min-width:220px}#viewport{padding:12px 6px 24px}.divider{display:none}button{padding:9px 10px}#full{font-size:12px}.intro>span{font-size:9px}}@media(prefers-reduced-motion:reduce){.turn{animation:none!important}}
