:root{--ink: #070a1e;--cream: #f4ead9;--cream-dim: rgba(244, 234, 217, .72);--amber: #ffb85c;--rose: #ff7aa6;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, serif;--sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, sans-serif}html,body{background:var(--ink);color:var(--cream);font-family:var(--sans)}.stage{background:var(--ink)}.hud{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;display:grid;grid-template-columns:56px 1fr 56px;align-items:start;padding:calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) 0 calc(8px + var(--safe-l))}.hud a,.hud button{pointer-events:auto}.back,.mute{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffffff29,#0a0e286b 70%);border:1px solid rgba(244,234,217,.28);color:var(--cream);padding:0;box-shadow:inset 0 -2px 6px #00000059}.back svg,.mute svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mute .spk{fill:currentColor;stroke-width:1.4}.mute .x,.mute.off .wave{display:none}.mute.off .x{display:inline}.mute{justify-self:end}.back:active,.mute:active{transform:scale(.94)}.scorebox{text-align:center;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}.hud.playing .scorebox{opacity:1;transform:none}.score{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1.05;letter-spacing:.01em;font-variant-numeric:lining-nums tabular-nums;color:var(--cream);text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 18px rgba(255,190,120,.25)}.meter{--v: .25;position:relative;width:84px;height:6px;margin:4px auto 0;border-radius:3px;background:#f4ead929;overflow:hidden;box-shadow:inset 0 1px 2px #00000080}.meter i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);border-radius:3px;background:linear-gradient(90deg,#9fc6ff,#e6f0ff);transition:width .25s ease-out}.meter.low i{background:repeating-linear-gradient(90deg,var(--amber) 0 4px,transparent 4px 7px);animation:blink .6s steps(2) infinite}@keyframes blink{50%{opacity:.45}}.title{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(70px + var(--safe-t)) 24px calc(40px + var(--safe-b));background:radial-gradient(ellipse 80% 55% at 50% 42%,rgba(7,10,30,.3),rgba(7,10,30,.08) 75%,transparent);text-align:center;pointer-events:none}.title h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(76px,26vw,128px);line-height:.95;letter-spacing:-.01em;color:var(--cream);color:transparent;text-shadow:none}.title .sub{margin:6px 0 18px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--cream-dim);animation:fade 1.2s .3s both}.title .cta{margin:2px 0 0;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--cream);animation:fade 1s .6s both}.title .best{margin:14px 0 0;font-size:13px;letter-spacing:.12em;color:var(--cream-dim)}.title .best b{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--amber);font-weight:400;margin-left:4px}.title .tap{position:absolute;bottom:calc(34px + var(--safe-b));margin:0;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--cream);animation:breathe 2.4s ease-in-out infinite}@keyframes settle{0%{opacity:0;transform:translateY(-26px) scaleY(1.12);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}@keyframes fade{0%{opacity:0;transform:translateY(6px)}}@keyframes breathe{50%{opacity:.4}}.hint-demo{width:170px;height:118px;animation:fade 1s .5s both}.hint-demo svg{width:100%;height:100%;overflow:visible}.demo-drop{animation:drop-x 2.6s cubic-bezier(.45,0,.55,1) infinite}.demo-hand{animation:hand-x 2.6s cubic-bezier(.45,0,.55,1) infinite}.demo-hand .press{fill:#ffb85c00;stroke:#ffb85ccc;stroke-width:2;animation:press 2.6s infinite;transform-origin:0 11px}@keyframes drop-x{0%,to{transform:translate(80px,30px)}30%{transform:translate(44px,34px) rotate(8deg)}70%{transform:translate(116px,34px) rotate(-8deg)}}@keyframes hand-x{0%,to{transform:translate(80px,58px)}25%{transform:translate(40px,58px)}65%{transform:translate(120px,58px)}}@keyframes press{0%,to{opacity:.9;transform:scale(1)}50%{opacity:.3;transform:scale(1.5)}}.hint{position:absolute;left:50%;bottom:calc(18% + var(--safe-b));width:150px;margin-left:-75px;z-index:2;pointer-events:none;opacity:.9;animation:fade .6s both}.hint svg{width:100%;overflow:visible}.hint .track{stroke:#f4ead980;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;fill:none}.demo-hand.small{animation:hand-s 1.8s cubic-bezier(.45,0,.55,1) infinite}@keyframes hand-s{0%,to{transform:translate(60px,14px)}30%{transform:translate(22px,14px)}70%{transform:translate(98px,14px)}}.over{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b));background:radial-gradient(ellipse at 50% 45%,#070a1e40,#070a1eb3);opacity:0;transition:opacity .35s ease-out}.over.show{opacity:1}.card{position:relative;width:min(84vw,320px);padding:26px 22px 22px;text-align:center;border-radius:22px;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.1) 0 1.2px,transparent 2px) 0 0 / 11px 13px,radial-gradient(circle at 70% 60%,rgba(255,255,255,.08) 0 1px,transparent 1.6px) 0 0 / 7px 9px,linear-gradient(160deg,#c4d2f54d,#7882be33 45%,#2824508c);border:1px solid rgba(244,234,217,.35);box-shadow:0 18px 50px #00000080,inset 0 1px #ffffff40,inset 0 0 0 6px #f4ead90f;transform:translateY(18px) scale(.96);transition:transform .5s cubic-bezier(.2,1.3,.3,1)}.over.show .card{transform:none}.cause{margin:0 0 4px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim)}.final{font-family:var(--serif);font-style:italic;font-size:84px;line-height:1;margin:4px 0 6px;color:var(--cream);font-variant-numeric:lining-nums;text-shadow:0 0 1px rgba(255,255,255,.6),0 2px 0 rgba(0,0,0,.35),0 0 30px rgba(170,200,255,.35)}.newbest{margin:0 0 6px}.newbest span{display:inline-block;padding:5px 14px;border-radius:99px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#2a1606;background:linear-gradient(90deg,#ffd08a,var(--amber),#ffd9a6);box-shadow:0 0 22px #ffb85c8c;animation:pop .7s .2s cubic-bezier(.2,1.6,.4,1) both,shine 2.2s 1s ease-in-out infinite}@keyframes pop{0%{transform:scale(.3) rotate(-8deg);opacity:0}}@keyframes shine{50%{box-shadow:0 0 34px #ffb85ce6}}.bestline{margin:0 0 18px;font-size:13px;letter-spacing:.14em;color:var(--cream-dim)}.bestline b{font-family:var(--serif);font-style:italic;font-size:22px;font-weight:400;color:var(--cream);margin-left:4px}.again{min-width:160px;min-height:52px;padding:0 26px;border-radius:99px;border:0;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);background:linear-gradient(180deg,#fff6e6,var(--cream) 50%,#d8c6a8);box-shadow:0 6px 18px #0006,inset 0 -3px #785a3240}.again:active{transform:translateY(2px) scale(.98)}.pause{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#070a1e99;font-family:var(--serif);font-style:italic;font-size:22px}.scorebox{position:relative}.scorebox:before{content:"";position:absolute;left:50%;top:-6px;width:150px;height:74px;margin-left:-75px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#070a1e6b,#070a1e00 70%)}.score.pop{animation:score-pop .6s cubic-bezier(.2,1.6,.4,1)}.score.gold{color:#ffd9a0;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 22px rgba(255,184,92,.7);transition:color 2s 1.5s,text-shadow 2s 1.5s}@keyframes score-pop{0%{transform:scale(1)}35%{transform:scale(1.22) translateY(2px)}to{transform:scale(1)}}.toast{margin:8px auto 0;width:max-content;padding:4px 12px;border-radius:99px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#2a1606;background:linear-gradient(90deg,#ffd08a,var(--amber),#ffd9a6);box-shadow:0 0 18px #ffb85c8c;opacity:0;transform:translateY(-4px) scale(.8)}.toast.show{animation:toast 2.6s cubic-bezier(.2,1.4,.4,1) both}@keyframes toast{0%{opacity:0;transform:translateY(-4px) scale(.6)}12%{opacity:1;transform:none}80%{opacity:1;transform:none}to{opacity:0;transform:translateY(-3px)}}.card{overflow:hidden}.card:after{content:"";position:absolute;inset:-20% auto -20% -60%;width:40%;transform:skew(-18deg);pointer-events:none;background:linear-gradient(90deg,#fff0,#e6f0ff29,#fff0)}.over.show .card:after{animation:sheen 1.6s .35s ease-out both}@keyframes sheen{0%{left:-60%}to{left:130%}}@media(prefers-reduced-motion:reduce){.title h1,.title .sub,.title .cta,.hint-demo,.title .tap,.newbest span{animation:none}.score.pop,.over.show .card:after{animation:none}.toast.show{animation-name:toast-fade}}@keyframes toast-fade{0%,to{opacity:0;transform:none}12%,80%{opacity:1;transform:none}}@media(max-height:640px){.title .sub{margin-bottom:8px}.hint-demo{height:92px}}.cardfog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.card>:not(.cardfog){position:relative;z-index:1}.card{backdrop-filter:none;box-shadow:0 22px 60px #0009,0 2px #ffecce26 inset,0 -10px 24px #00000a40 inset}.card{background:#e8d9bd;border:0}.card .cause{color:#7a6448}.card .final{color:#1a1f3e;text-shadow:0 1px 0 rgba(255,252,240,.9),0 -1px 0 rgba(90,70,40,.25)}.card .bestline{color:#6e604e}.card .bestline b{color:#1a1f3e}.card .again{color:var(--cream);background:linear-gradient(180deg,#2c3463,#151a38 60%,#0b0e24);box-shadow:0 6px 16px #14100a73,inset 0 1px #fff3}.card:after{background:linear-gradient(90deg,#fff0,#fffaeb59,#fff0)}