:root{--page-ratio:1.374444;--spread-ratio:2.748889;--chrome:58px;font-family:Arial,sans-serif;color:#f4f2ed;background:#111318}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;min-width:320px;background:radial-gradient(circle at 45% 36%,#273449 0,#171b23 46%,#0d0f13 100%)}button{font:inherit}.controls{position:fixed;z-index:200;inset:0 0 auto;height:var(--chrome);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;color:#f4f2ed;background:linear-gradient(to bottom,rgba(8,10,14,.82),transparent);font-size:10px;letter-spacing:.2em;text-transform:uppercase}.controls a{color:inherit;text-decoration:none}.controls span{font-variant-numeric:tabular-nums}.controls b{font-weight:400}.controls button{justify-self:end;padding:8px 0;border:0;color:inherit;background:none;letter-spacing:inherit;text-transform:inherit;cursor:pointer}.book{position:relative;width:100%;height:100%;perspective:2400px;overflow:hidden;touch-action:pan-y;cursor:pointer}.spread{position:absolute;top:50%;left:50%;display:flex;width:min(1480px,calc(100vw - 180px),calc((100svh - 130px) * var(--spread-ratio)));aspect-ratio:2474/900;overflow:hidden;border-radius:clamp(8px,1vw,18px);background:#111;box-shadow:0 32px 90px rgba(0,0,0,.42);transform-origin:center center;transform:translate(calc(-50% + min(var(--offset) * 30px,120px)),calc(-50% + min(var(--offset) * 5px,20px))) scale(calc(1 - min(var(--offset) * .018,.075))) rotateY(calc(var(--offset) * -1deg));transition:transform .78s cubic-bezier(.2,.72,.18,1),opacity .48s ease,filter .48s ease;z-index:var(--z);will-change:transform;user-select:none}.spread.single{width:min(1060px,calc(100vw - 190px),calc((100svh - 130px) * var(--page-ratio)));aspect-ratio:1237/900}.spread::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 73%,rgba(0,0,0,calc(min(var(--offset) * .075,.26))))}.page{position:relative;width:50%;height:100%;overflow:hidden;background:#111}.single .page{width:100%}.spread:not(.single) .page:first-child{box-shadow:inset -18px 0 24px -24px rgba(0,0,0,.8)}.spread:not(.single) .page:last-child{box-shadow:inset 18px 0 24px -24px rgba(0,0,0,.8)}.spread:not(.single)::before{content:"";position:absolute;z-index:4;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(to right,rgba(0,0,0,.2),rgba(255,255,255,.12),rgba(0,0,0,.22));pointer-events:none}.page img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.spread.is-future{filter:brightness(calc(1 - min(var(--offset) * .075,.3)))}.spread.is-past{opacity:0;pointer-events:none;transform:translate(-105%,-50%) rotateY(-30deg) scale(.96)}.spread.is-far{visibility:hidden}.spread.no-transition{transition:none}.turning-leaf{position:fixed;z-index:190;transform-style:preserve-3d;transition:transform .82s cubic-bezier(.2,.72,.15,1);pointer-events:none}.turning-leaf.turn-forward{transform-origin:left center}.turning-leaf.turn-backward{transform-origin:right center;transform:rotateY(-180deg)}.turning-leaf.turn-forward.is-turning{transform:rotateY(-180deg)}.turning-leaf.turn-backward.is-turning{transform:rotateY(0deg)}.leaf-face{position:absolute;inset:0;overflow:hidden;background:#111;backface-visibility:hidden;box-shadow:0 0 34px rgba(0,0,0,.34)}.leaf-face img{display:block;width:100%;height:100%;object-fit:contain}.leaf-back{transform:rotateY(180deg);filter:brightness(.82)}.turning-leaf::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 35%,rgba(255,255,255,.12) 68%,rgba(0,0,0,.22));opacity:0;transition:opacity .38s ease;backface-visibility:hidden}.turning-leaf.is-turning::after{opacity:1}.page-nav{position:fixed;z-index:220;top:50%;width:54px;height:112px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.11);border-radius:28px;background:rgba(0,0,0,.72);color:white;font-size:30px;font-weight:200;cursor:pointer;backdrop-filter:blur(10px);transition:opacity .2s,background .2s}.page-nav:hover{background:rgba(20,20,24,.9)}.page-nav:disabled{opacity:.18;cursor:default}.page-nav.previous{left:24px}.page-nav.next{right:24px}.progress{position:fixed;z-index:230;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,.08)}.progress span{display:block;width:0;height:100%;background:#3157c7;transition:width .55s ease}.overview{overflow:auto}.overview .book{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;height:auto;min-height:100%;padding:calc(var(--chrome) + 20px) 20px 20px;background:#c9c8c3;overflow:visible;perspective:none}.overview .spread{display:contents}.overview .page{width:100%;aspect-ratio:1237/900;box-shadow:0 8px 25px rgba(0,0,0,.14)}.overview .spread::before,.overview .spread::after{display:none}.overview .page-nav{display:none}@media(max-width:800px){:root{--chrome:48px}.controls{padding:0 14px}.spread,.spread.single{width:calc(100vw - 28px);aspect-ratio:2474/900;border-radius:8px;transform:translate(calc(-50% + min(var(--offset) * 8px,32px)),calc(-50% + min(var(--offset) * 3px,12px))) scale(calc(1 - min(var(--offset) * .01,.05)))}.spread.single{width:min(calc(100vw - 28px),calc((100svh - 130px) * var(--page-ratio)));aspect-ratio:1237/900}.page-nav{top:auto;bottom:18px;width:56px;height:42px;transform:none;border-radius:22px;font-size:22px}.page-nav.previous{left:calc(50% - 64px)}.page-nav.next{right:calc(50% - 64px)}.overview .book{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:calc(var(--chrome) + 8px) 8px 8px}}