:root{--bg:#171914;--ink:#f4f3ed;--accent:#b8c68b;--zoom:1;--fold:0;--shade:0;--shadow-x:-4px;--shadow-blur:8px;--paper-opacity:.2;--shine-pos:0%}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(circle at 50% 30%,#343a2c 0,#1e211b 38%,#11130f 100%);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;overflow:hidden;display:grid;grid-template-rows:58px 1fr 32px}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;background:rgba(15,17,13,.88);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);z-index:5}.title{font-size:15px;font-weight:700;letter-spacing:.16em}.title span{color:var(--accent);font-weight:500}.counter{font-variant-numeric:tabular-nums;color:#d7dccd;font-size:14px}.actions{display:flex;justify-content:flex-end;gap:7px}.actions button{width:36px;height:36px;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:white;background:#292d24;font-size:19px;cursor:pointer}.actions button:hover{background:#3b4134}
.stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:22px 64px;touch-action:none;overflow:auto}.book{position:relative;display:flex;height:min(calc(100vh - 130px),82vw);max-height:calc(100vh - 130px);aspect-ratio:1.414/1;transform:scale(var(--zoom));transform-origin:center;transition:transform .18s ease;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5));perspective:2600px;isolation:isolate}.book:before,.book:after{content:"";position:absolute;z-index:-2;left:7px;right:7px;height:9px;background:repeating-linear-gradient(to bottom,#d2d0c8 0 1px,#aaa89f 1px 2px);border-radius:0 0 7px 7px;box-shadow:0 3px 7px rgba(0,0,0,.34)}.book:before{bottom:-9px}.book:after{bottom:-5px;left:4px;right:4px;opacity:.8}
.page{height:100%;width:50%;background:#eee;overflow:hidden;position:relative}.page:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 42%,rgba(255,255,255,.10) 49%,transparent 57%);mix-blend-mode:screen}.page img,.turn img{width:100%;height:100%;object-fit:contain;background:white;display:block}.left{border-radius:5px 0 0 5px;box-shadow:inset -12px 0 18px -16px #000}.right{border-radius:0 5px 5px 0;box-shadow:inset 12px 0 18px -16px #000}
.turn{display:none;position:absolute;top:0;right:0;width:50%;height:100%;transform-origin:left center;z-index:4;transform-style:preserve-3d;will-change:transform,filter;filter:drop-shadow(var(--shadow-x) 8px var(--shadow-blur) rgba(0,0,0,.45))}.turn.active{display:block}.turn.forward{right:0;transform-origin:left center}.turn.backward{left:0;right:auto;transform-origin:right center}.turn-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background:#fff}.turn-front{transform:rotateY(0deg)}.turn-back{transform:rotateY(180deg)}.turn-back img{transform:scaleX(-1)}.paper-light{position:absolute;inset:0;z-index:3;pointer-events:none;backface-visibility:hidden;background:linear-gradient(90deg,rgba(0,0,0,.38),transparent 44%,rgba(255,255,255,.58) 76%,rgba(0,0,0,.18));mix-blend-mode:soft-light;opacity:var(--paper-opacity)}.turn:after{content:"";position:absolute;top:0;bottom:0;width:12%;right:var(--shine-pos);z-index:4;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),rgba(0,0,0,.13),transparent);filter:blur(2px);opacity:var(--paper-opacity);pointer-events:none}.cast-shadow{display:none;position:absolute;z-index:3;top:0;bottom:0;left:50%;width:50%;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.44),transparent 68%);mix-blend-mode:multiply}.cast-shadow.active{display:block}.turn.settle{transition:transform 1.25s cubic-bezier(.18,.72,.14,1),filter 1.25s ease}.turn.dragging{transition:none}
.nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:64px;border:0;border-radius:12px;background:rgba(14,16,12,.76);color:#fff;font:300 44px/1 Arial;cursor:pointer;z-index:4}.nav:hover{background:#3a4033}.prev{left:12px}.next{right:12px}.nav:disabled{opacity:.25;cursor:default}.hint{text-align:center;color:#aeb3a7;font-size:12px;letter-spacing:.02em}
@media(max-width:720px){body{grid-template-rows:54px 1fr 28px}.bar{padding:0 10px}.title{font-size:12px}.actions button{width:32px;height:32px}.stage{padding:12px 45px}.book{width:min(calc(100vw - 92px),calc((100vh - 110px)*.707));height:auto;max-height:none;aspect-ratio:.707/1}.page{width:100%}.left{display:none}.right{border-radius:5px}.turn{width:100%}.turn.backward{width:100%;left:0;transform-origin:right center}.cast-shadow{left:0;width:100%}.nav{width:38px;height:56px}.prev{left:4px}.next{right:4px}.hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.turn.settle{transition-duration:.25s}}