:root{color-scheme:light;font-family:Arial,sans-serif;color:#33483c;background:#e9e8e0}*{box-sizing:border-box}body{margin:0}header{padding:23px 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #33483c22;font-family:Georgia,serif;font-size:22px}header small{font-size:14px;margin-left:8px}header>span:last-child{font:12px Arial;letter-spacing:.18em}main{padding:20px 14px}.viewport{width:100%;min-height:230px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px 0 36px}.book{position:relative;flex:none;width:min(94vw,1500px,calc((100svh - 235px)*2.824));aspect-ratio:1500/531;perspective:2600px;touch-action:pan-y;user-select:none;transition:transform .65s ease;transform:translateX(-25%)}.book.open{transform:translateX(0)}.leaf{position:absolute;left:50%;top:0;height:100%;transform-origin:left center;transform-style:preserve-3d;cursor:grab;transition:transform .72s cubic-bezier(.2,.65,.2,1)}.leaf:active{cursor:grabbing}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:1px 3px 8px #182b2826;overflow:hidden;background:#5b7d64}.face img{width:100%;height:100%;display:block;pointer-events:none}.back{transform:rotateY(180deg)}.face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#00000014,transparent 3%,transparent 98%,#00000010)}.back:after{background:linear-gradient(270deg,#00000018,transparent 4%)}.leaf.turned{transform:rotateY(-180deg)}.leaf.dragging{transition:none}.leaf:last-child{cursor:default}nav{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}button{background:transparent;border:1px solid #33483c55;border-radius:4px;color:inherit;padding:11px 17px;font:14px Arial;cursor:pointer}button:hover:enabled{background:#33483c;color:#fff}button:focus-visible{outline:3px solid #da875f;outline-offset:3px}button:disabled{opacity:.35;cursor:default}#status{font-size:14px;min-width:120px;text-align:center}.hint{text-align:center;font-size:14px;color:#667268;margin-top:18px}.viewport.enlarged{justify-content:flex-start}.viewport.enlarged .book{width:1800px;max-width:none;margin:0 auto;transform:none}@media(max-width:650px){header{font-size:19px}.book{width:96vw}.viewport{min-height:45vh}main{padding:8px}nav{gap:8px}button{padding:10px 12px}.hint{max-width:290px;margin:20px auto;line-height:1.5}}@media(prefers-reduced-motion:reduce){.leaf,.book{transition:none}}
.leaf.bending{transition:none}.leaf.bending>.face{visibility:hidden}.paper-strip{display:none;position:absolute;top:0;left:0;height:100%;transform-origin:left center;transform-style:preserve-3d;pointer-events:none}.bending>.paper-strip{display:block}.paper-strip>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-size:2400% 100%;background-repeat:no-repeat}.strip-back{transform:rotateY(180deg)}
/* Folding is animated in JavaScript. Settling must not start a second CSS turn. */
.leaf{transition:none}