:root{--ink: #3e3358;--ink-soft: #6f6390;--paper: rgba(255, 248, 242, .78);--rose: #ee8a86;--gold: #ffd98a;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--ease: cubic-bezier(.2, .8, .2, 1)}html,body{background:#a9a3d0;color:var(--ink);font-family:var(--serif)}.stage{background:#b9aed4}.chip{position:absolute;top:calc(10px + var(--safe-t));z-index:5;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff6f06b;border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);text-decoration:none;padding:0;transition:transform .2s var(--ease),background .2s}.chip:active{transform:scale(.92);background:#fff6f0b3}.chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#back{left:calc(10px + var(--safe-l))}#mute{right:calc(10px + var(--safe-r))}#mute .spk{fill:currentColor;stroke:none}#mute .off,#mute[aria-pressed=true] .on{display:none}#mute[aria-pressed=true] .off{display:inline}#hud{position:absolute;left:0;right:0;top:calc(12px + var(--safe-t));z-index:4;text-align:center;pointer-events:none}#dist{font-size:44px;line-height:1;font-weight:500;color:#fffaf4;letter-spacing:-.01em;text-shadow:0 1px 0 rgba(80,60,110,.35),0 2px 14px rgba(80,60,110,.35);font-variant-numeric:lining-nums tabular-nums}#dist small{font-size:18px;margin-left:3px;font-style:italic;opacity:.85}#streak{margin-top:4px;height:22px;font-style:italic;font-size:17px;color:var(--gold);text-shadow:0 1px 6px rgba(80,60,110,.5);transition:opacity .25s}#dist{display:inline-block;transform-origin:50% 70%}#dist.mile{animation:mile .55s cubic-bezier(.3,1.6,.5,1)}#dist.best{animation:bestpop 1.1s cubic-bezier(.3,1.6,.5,1)}@keyframes mile{0%{transform:scale(1)}30%{transform:scale(1.16);color:#fff3d6}to{transform:scale(1)}}@keyframes bestpop{0%{transform:scale(1)}25%{transform:scale(1.3) rotate(-2deg);color:#ffd2bc;text-shadow:0 0 18px rgba(255,170,140,.8),0 2px 14px rgba(80,60,110,.35)}to{transform:scale(1)}}#streak.pop{animation:spop .35s cubic-bezier(.3,1.8,.5,1)}@keyframes spop{0%{transform:scale(1.35);opacity:.6}to{transform:scale(1);opacity:1}}#title{position:absolute;left:0;right:0;top:calc(13% + var(--safe-t));text-align:center;z-index:3;pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}#title h1{margin:0;font-size:clamp(52px,17vw,84px);font-weight:400;font-style:italic;letter-spacing:-.02em;color:#fffaf3;text-shadow:0 2px 0 rgba(120,90,140,.25),0 6px 30px rgba(110,80,140,.35)}#title p{margin:4px 0 0;font-size:17px;font-style:italic;color:#fff3ea;opacity:.92;text-shadow:0 1px 8px rgba(90,70,120,.45)}#title.gone{opacity:0;transform:translateY(-14px)}#best{position:absolute;left:0;right:0;bottom:calc(22px + var(--safe-b));z-index:3;text-align:center;font-style:italic;font-size:16px;color:#fff7ef;text-shadow:0 1px 8px rgba(60,40,90,.6);pointer-events:none}.hand{position:absolute;z-index:6;width:54px;height:72px;margin:-6px 0 0 -22px;pointer-events:none}.hand svg{position:absolute;inset:0;width:100%;height:100%;fill:#fffaf5;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 3px 6px rgba(60,40,90,.35))}.hand.swipe{left:50%;top:84%;animation:flick 1.9s var(--ease) infinite}.hand.swipe .trail{position:absolute;left:20px;top:8px;width:6px;height:120px;border-radius:3px;transform-origin:top;background:linear-gradient(#fffaf400,#fffaf4d9);animation:trail 1.9s var(--ease) infinite}@keyframes flick{0%{transform:translateY(40px) scale(1);opacity:0}12%{opacity:1;transform:translateY(40px) scale(.94)}30%{transform:translateY(40px) scale(.94)}55%{transform:translateY(-110px) scale(1);opacity:1}75%,to{transform:translateY(-140px) scale(1);opacity:0}}@keyframes trail{0%,30%{opacity:0;transform:translateY(0) scaleY(.1)}55%{opacity:1;transform:translateY(0) scaleY(1)}80%,to{opacity:0}}.hand.tap{transition:transform .08s}.hand.tap .pulse{position:absolute;left:5px;top:-15px;width:36px;height:36px;border-radius:50%;border:3px solid #fff3c4;opacity:0}.hand.tap.press{transform:translateY(6px) scale(.9)}.hand.tap.press .pulse{animation:pulse .45s ease-out}@keyframes pulse{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}#over{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 45%,#4632641f,#46326457)}#over .card{position:relative;width:min(320px,86%);padding:26px 22px 18px;border-radius:26px;text-align:center;background:var(--paper);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 20px 60px #3c285a4d,inset 0 1px #ffffffe6;animation:rise .5s var(--ease) both}@keyframes rise{0%{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}#over .card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,238,220,.65) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:sheen 1.4s ease-out .45s both}@keyframes sheen{0%{background-position:130% 0}to{background-position:-30% 0}}#over .card:before{content:"";position:absolute;left:18%;right:18%;bottom:-14px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,40,90,.28),transparent);filter:blur(2px)}#over .why{font-style:italic;font-size:16px;color:var(--ink-soft);min-height:20px}#over .big{font-size:72px;line-height:1.05;font-weight:500;letter-spacing:-.03em;margin:2px 0 10px;font-variant-numeric:lining-nums}#over .big small{font-size:26px;font-style:italic;margin-left:4px;color:var(--ink-soft)}#over .stats{display:flex;justify-content:center;gap:0;margin:0 0 16px;padding:12px 0 0;border-top:1px solid rgba(110,90,150,.2)}#over .stats div{flex:1}#over dt{font-size:13px;font-style:italic;color:var(--ink-soft)}#over dd{margin:2px 0 0;font-size:21px;font-weight:600;font-variant-numeric:lining-nums}#over .again{display:flex;align-items:center;justify-content:center;gap:6px;font-style:italic;font-size:16px;color:var(--ink);padding:10px;border-radius:999px;background:#ffffff8c;animation:nudge 1.8s ease-in-out infinite .6s}#over .again svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}@keyframes nudge{0%,to{transform:none}50%{transform:translateY(-3px)}}.ribbon:after{content:"✦";position:absolute;right:-14px;top:-10px;color:#ffd98a;font-size:18px;font-style:normal;text-shadow:0 0 8px rgba(255,220,150,.9);animation:twinkle 1.6s ease-in-out infinite .8s}@keyframes twinkle{0%,to{opacity:.3;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}.ribbon{position:absolute;left:50%;top:-15px;transform:translate(-50%) rotate(-3deg);padding:6px 16px;border-radius:999px;background:linear-gradient(90deg,#f4a38f,#ee8a86 50%,#e48ca9);color:#fff;font-style:italic;font-weight:600;font-size:16px;white-space:nowrap;box-shadow:0 6px 18px #c85a6e66;animation:pop .6s cubic-bezier(.3,1.6,.5,1) .25s both}@keyframes pop{0%{transform:translate(-50%) rotate(-3deg) scale(0)}to{transform:translate(-50%) rotate(-3deg) scale(1)}}#paused{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#46376959;color:#fffaf4;font-size:34px;font-style:italic;text-align:center}#paused small{display:block;font-size:16px;opacity:.9;margin-top:4px}@media(prefers-reduced-motion:reduce){.hand.swipe,.hand.swipe .trail,#over .again,.ribbon,#over .card,#dist.mile,#dist.best,#streak.pop,.ribbon:after{animation-duration:0s;animation-iteration-count:1}#over .card:after{animation:none;opacity:0}.hand.swipe{animation:none;transform:translateY(-40px)}}@media(max-height:700px){#title{top:calc(9% + var(--safe-t))}#over .big{font-size:60px}}#over .card{color:#f6eee4;background:radial-gradient(120% 80% at 70% -10%,rgba(255,206,160,.26),transparent 58%),linear-gradient(166deg,transparent 58%,rgba(236,224,204,.34) 58.6%,rgba(236,224,204,.1) 59.5%,transparent 60.2%),linear-gradient(171deg,transparent 77%,rgba(236,224,204,.18) 77.3%,transparent 77.8%),repeating-linear-gradient(176deg,rgba(255,255,255,.028) 0 2px,transparent 2px 9px),linear-gradient(160deg,#50596e,#363d50 52%,#272c3c);border:1px solid rgba(255,232,206,.28);box-shadow:0 26px 60px #120e2880,0 4px #1416248c,inset 0 1px #ffecd673,inset 0 -10px 24px #0a0c1a59}#over .card:after{background:linear-gradient(105deg,transparent 38%,rgba(255,230,200,.22) 50%,transparent 62%) no-repeat;background-size:250% 100%}#over .card:before{background:radial-gradient(closest-side,rgba(20,16,44,.45),transparent)}#over .why{color:#f0deccc7}#over .big{color:#fff7ec;text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 26px rgba(255,210,160,.18)}#over .big small{color:#e9cfa6}#over .stats{border-top-color:#ffe8ce2e}#over dt{color:#e2d4c8b8}#over dd{color:#fbf2e6}#over .again{color:#fbf2e6;background:#fff0de1a;border:1px solid rgba(255,232,206,.22)}#over{background:radial-gradient(ellipse at 50% 45%,#1e1a3c1a,#1e1a3c6b)}
