*{box-sizing:border-box}body{margin:0;background:#e6e7e1;color:#18251e;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}a{color:inherit;text-underline-offset:4px}header{padding:22px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f8f8f3;border-bottom:1px solid #ccd0c5}header a{text-decoration:none;font-size:14px}h1{margin:0;font-size:28px;font-family:Georgia,serif;font-weight:400}header p{font-size:14px;margin:3px 0 0;color:#586057}header>div{text-align:center}.toolbar{position:sticky;top:0;z-index:2;background:#18251e;color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:35px;box-shadow:0 2px 10px #0001}button,select{font:inherit;border:1px solid #ffffff50;border-radius:0;background:transparent;color:inherit;padding:9px 15px;min-height:44px}button{cursor:pointer}button:hover:not(:disabled){background:#d1ee76;color:#18251e}button:disabled{opacity:.4;cursor:default}select{margin:0 8px;color:#18251e;background:#f8f8f3;min-width:72px}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #9cb948;outline-offset:4px}.book-stage{padding:32px 20px 8px}figure{margin:0 auto;max-width:830px}figure img{display:block;width:100%;height:auto;background:white;box-shadow:0 8px 25px #18251e22}figcaption{font-size:14px;text-align:center;margin-top:15px;color:#586057}footer{max-width:1000px;margin:20px auto;padding:15px 20px 35px;display:flex;justify-content:space-between;gap:20px;font-size:14px}#error,noscript p{text-align:center;padding:20px}@media(max-width:560px){header{padding:15px 18px;gap:10px;flex-wrap:wrap}header>div{order:3;flex-basis:100%;text-align:left}h1{font-size:25px}.toolbar{gap:12px;padding:10px 8px}button{font-size:14px;padding:8px 10px}.toolbar label{font-size:14px}select{margin:0 3px;min-width:57px;padding:8px 5px}.book-stage{padding:18px 8px 8px}footer{flex-direction:column;align-items:center;gap:12px}}
.book-figure{max-width:1440px}.spread{position:relative;display:grid;grid-template-columns:1fr 1fr;perspective:2400px;isolation:isolate;filter:drop-shadow(0 14px 18px #18251e20)}.paper{position:relative;min-width:0;aspect-ratio:1037/1361;background:#fff}.paper img,.leaf-face img{display:block;width:100%;height:100%;object-fit:contain;box-shadow:none}.paper img[hidden]{display:none}.paper.blank{background:transparent}.paper:not(.blank)::after{content:'';position:absolute;inset:0;pointer-events:none}.paper.left:not(.blank)::after{background:linear-gradient(to left,#18251e22,transparent 6%)}.paper.right:not(.blank)::after{background:linear-gradient(to right,#18251e22,transparent 6%)}.turning-leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:3}.turn-forward{left:50%;transform-origin:left center}.turn-back{left:0;transform-origin:right center}.leaf-face{position:absolute;inset:0;background:#faf9f5;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.leaf-face.back{transform:rotateY(180deg)}.leaf-face::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#18251e18,transparent 15%,transparent 80%,#18251e12);pointer-events:none}.spread.single{display:block;max-width:640px;margin:auto}.spread.single>.left{display:none}.spread.single .paper::after{display:none}@media(max-width:650px){.book-stage{padding:18px 10px 8px}}@media(prefers-reduced-motion:reduce){.spread{perspective:none}}
