*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;background:#080808;overflow:hidden;font-family:Roboto,Arial,sans-serif}#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:2600px;transform-style:preserve-3d}.slide{position:absolute;background:#111 center/contain no-repeat;overflow:hidden;box-shadow:0 16px 52px #0009;backface-visibility:hidden}.slide img.anim,.slide video{position:absolute;display:block}.slide img.anim{object-fit:fill;opacity:0}.slide img.anim.go{animation:fadeIn var(--dur) ease forwards;animation-delay:var(--delay)}@keyframes fadeIn{to{opacity:1}}.turn-page{position:absolute;transform-style:preserve-3d;transform-origin:left center;z-index:12;will-change:transform;pointer-events:none}.turn-face{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;backface-visibility:hidden;overflow:hidden}.turn-front{transform:rotateY(0deg)}.turn-back{transform:rotateY(180deg);filter:brightness(.82)}.turn-page.forward{animation:turnForward var(--tdur) cubic-bezier(.52,.02,.24,.99) forwards}.turn-page.backward{transform-origin:right center;animation:turnBackward var(--tdur) cubic-bezier(.52,.02,.24,.99) forwards}@keyframes turnForward{0%{transform:rotateY(0deg) translateZ(1px)}18%{transform:rotateY(-18deg) translateZ(10px)}52%{transform:rotateY(-94deg) translateZ(22px)}82%{transform:rotateY(-164deg) translateZ(8px)}100%{transform:rotateY(-180deg) translateZ(0)}}@keyframes turnBackward{0%{transform:rotateY(0deg) translateZ(1px)}18%{transform:rotateY(18deg) translateZ(10px)}52%{transform:rotateY(94deg) translateZ(22px)}82%{transform:rotateY(164deg) translateZ(8px)}100%{transform:rotateY(180deg) translateZ(0)}}.turn-page:after{content:"";position:absolute;inset:0;backface-visibility:hidden;background:linear-gradient(90deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.02) 55%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.42) 100%);opacity:0;animation:turnShade var(--tdur) ease-in-out forwards}@keyframes turnShade{0%,100%{opacity:0}38%,65%{opacity:1}}.page-shadow{position:absolute;z-index:11;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,0));transform-origin:left center;opacity:0;animation:shadowSweep var(--tdur) ease-in-out forwards}@keyframes shadowSweep{0%,100%{opacity:0;transform:scaleX(.04)}48%{opacity:.85;transform:scaleX(.42)}}#start{position:absolute;inset:0;background:#000c;display:grid;place-items:center;z-index:20}.startcard{text-align:center;color:white;padding:32px}.startcard h1{font-family:"Roboto Condensed",Roboto,Arial,sans-serif;font-weight:700;font-size:clamp(28px,5vw,72px);line-height:1.02;margin:0 0 12px}.startcard button{border:0;border-radius:999px;padding:14px 30px;font-size:18px;cursor:pointer}#hud{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#0008;padding:6px 10px;border-radius:20px;opacity:0;transition:.2s;z-index:30;color:#fff}#app:hover #hud,#hud:focus-within{opacity:1}#hud button{border:0;background:#ffffff22;color:#fff;border-radius:999px;width:34px;height:34px;font-size:18px;cursor:pointer}#counter{min-width:70px;text-align:center;font-size:13px}@media (pointer:coarse){#hud{opacity:.75}}