@font-face{font-family:Space Grotesk;font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk.woff2) format("woff2")}:root{--rush: #c77dd9;--drag: #f09a6a;--spot: #6fcf97;--display: "Space Grotesk", var(--font)}html,body{height:100%;background:#14101a}body{color:#f6f4f2;overscroll-behavior:none;background:radial-gradient(ellipse 90% 55% at 50% -10%,rgba(167,83,144,.55),transparent 70%),#14101a}#app{min-height:100%;display:flex;flex-direction:column;max-width:520px;margin:0 auto}#top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 14px 0}#title b{font:700 18px var(--display);color:#e6d6e0}.top-link{color:#cfc6c0;font-size:14px;text-decoration:none;min-width:64px}.top-spacer{min-width:64px}.screen{padding:4px 16px calc(10px + env(safe-area-inset-bottom))}.screen[hidden]{display:none!important}.hero{font:700 30px/1.1 var(--display);text-align:center;color:#fff;margin:8px 0 10px;text-wrap:balance}.hero em{font-style:normal}.hero .rush{color:var(--rush)}.hero .drag{color:var(--drag)}.sound-banner{display:flex;align-items:center;gap:10px;justify-content:center;background:#a7539038;border:1.5px solid rgba(199,125,217,.6);border-radius:999px;padding:8px 14px;font-size:14px;color:#f6eaf2;margin:0 auto 8px;width:fit-content;max-width:100%}.sound-banner .speaker{font-size:22px}.disc-wrap{position:relative;width:min(56vw,230px);height:min(56vw,230px);margin:0 auto;display:grid;place-items:center}.disc{width:84%;height:84%;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#3b3340,#221c27 70%);box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff14;transition:transform .08s,background .08s;border:0;color:#fff;font-family:var(--font);cursor:pointer;touch-action:manipulation}.disc.start{background:radial-gradient(circle at 35% 30%,#c06aa9,#8f4a7c 70%);animation:breathe 2.4s ease-in-out infinite}.disc.start .disc-top{display:block;font-size:14px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}.disc.start .disc-main{display:block;font:700 22px var(--display);margin-top:2px}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@media(prefers-reduced-motion:reduce){.disc.start{animation:none}}.disc.beat{transform:scale(1.07);background:radial-gradient(circle at 35% 30%,#c06aa9,#8f4a7c 70%)}.disc.tap{transform:scale(.95);background:radial-gradient(circle at 35% 30%,#4a4150,#2a242e 70%)}#count{font:700 92px var(--display);color:#fff}.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#ffffff1a;stroke-width:4}.ring-fill{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:295.3;stroke-dashoffset:295.3}.tempo{text-align:center;color:#b9a6b4;font-size:14px;letter-spacing:.12em;text-transform:uppercase;min-height:18px}.choose{margin-top:26px}.choose-label{font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#b9a6b4;margin:0 0 8px;text-align:center}.choose-label+.roles{margin-bottom:22px}.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.role{min-height:58px;border-radius:14px;border:1.5px solid rgba(255,255,255,.12);background:#ffffff0a;color:#f6f4f2;font:600 13px var(--font);cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px}.role .ico{font-size:22px;line-height:1}.role[aria-pressed=true]{background:var(--accent);border-color:var(--accent);box-shadow:0 6px 18px #a7539066}.seg{display:flex;background:#ffffff0f;border-radius:999px;padding:4px}.seg-btn{flex:1;min-height:40px;border-radius:999px;border:0;background:transparent;color:#d9d2cc;font:600 15px var(--font);cursor:pointer;touch-action:manipulation}.seg-btn[aria-pressed=true]{background:var(--accent);color:#fff}#best{text-align:center;margin:6px 0 0}.small{font-size:13px;color:#9a8f97}#play{flex:1;display:flex;flex-direction:column}#play .disc-wrap{width:min(64vw,260px);height:min(64vw,260px)}#stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}#prompt{color:#e6dde3;font-size:18px;margin:0;text-align:center;min-height:24px}#stop{align-self:center;margin-bottom:8px}#result{text-align:center}#result.settling{pointer-events:none}#result .actions{transition:opacity .4s}#result.settling .actions{opacity:.25}.verdict{font:800 14px var(--font);letter-spacing:.16em;text-transform:uppercase;margin-top:14px}.verdict.rusher{color:var(--rush)}.verdict.dragger{color:var(--drag)}.verdict.spot{color:var(--spot)}.big-off{font:700 58px/1.05 var(--display);margin:6px 0 2px}.tier{font-size:18px;color:#d9d2cc;margin-bottom:18px}.meter{position:relative;margin:0 8px 18px}.meter-track{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#2a242e}.band{flex:1}.b-pro{background:linear-gradient(90deg,#d9d2cc 0,#3f9b6b,#d9d2cc);opacity:.18}.b-semi,.b-gig,.b-rehearsal{display:none}.meter-track:before,.meter-track:after{content:""}.meter-marker{position:absolute;top:-6px;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--accent);transform:translate(-50%);box-shadow:0 4px 12px #00000080;transition:left .6s cubic-bezier(.2,.8,.2,1)}.meter-labels{display:flex;justify-content:space-between;font-size:12px;color:#9a8f97;margin-top:10px;letter-spacing:.06em;text-transform:uppercase}.facts-line{color:#c9bfc5;font-size:15px;margin:0 0 18px}.actions{display:flex;flex-direction:column;gap:10px}.actions .btn{width:100%}.linkish{background:none;border:0;color:#b9a6b4;font:500 14px var(--font);text-decoration:underline;cursor:pointer;touch-action:manipulation;padding:8px}