:root{--green:#58cc02;--green-dark:#46a302;--orange:#ff9600;--blue:#1cb0f6;--purple:#ce82ff;--red:#ff4b4b;--ink:#3c3c3c;--muted:#777;--line:#e5e5e5;--bg:#f7f7f7;--card:#fff;color:var(--ink);background:var(--bg);font-family:Nunito,ui-rounded,SF Pro Rounded,system-ui,-apple-system,sans-serif}@media (prefers-color-scheme:dark){:root{--ink:#f1f7fb;--muted:#9aa8b2;--line:#37464f;--bg:#131f24;--card:#1b2b33}}*{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2,h3{margin:0 0 8px}a{color:inherit}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center;padding:32px}.small-caps{text-transform:uppercase;letter-spacing:.08em;opacity:.8;font-size:13px;font-weight:800}.card{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:20px}.btn{border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border-bottom-width:4px;border-radius:16px;justify-content:center;align-items:center;padding:12px 22px;font-weight:800;text-decoration:none;display:inline-flex}.btn:active{border-bottom-width:2px;transform:translateY(2px)}.btn.primary{background:var(--green);border-color:var(--green-dark);color:#fff}.btn.big{width:100%;padding:16px 32px;font-size:18px}.btn:disabled{opacity:.6;cursor:default}.link{color:var(--blue);font:inherit;cursor:pointer;background:0 0;border:none;padding:4px;font-weight:700}.error{color:var(--red);margin:0;font-weight:700}.topbar{border-bottom:2px solid var(--line);background:var(--card);z-index:10;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 24px;display:flex;position:sticky;top:0}.brand{color:var(--green);font-size:22px;font-weight:900;text-decoration:none}.stats{gap:14px;margin-left:auto;font-weight:800;display:flex}.stat.streak{color:var(--orange)}.stat.streak.cold{filter:grayscale();opacity:.6}.stat.level{color:var(--blue)}nav{align-items:center;gap:4px;display:flex}nav a{color:var(--muted);border-radius:12px;padding:8px 12px;font-weight:800;text-decoration:none}nav a.active{color:var(--blue);background:color-mix(in srgb, var(--blue) 12%, transparent)}main{max-width:1100px;margin:0 auto;padding:24px 16px 64px}.login{grid-template-columns:1fr 1fr;align-items:center;gap:48px;max-width:920px;min-height:100vh;margin:0 auto;padding:24px 16px;display:grid}.login-hero h1{color:var(--green);font-size:48px}.login-hero p{color:var(--muted);font-size:20px}.sun{font-size:96px;animation:2.4s ease-in-out infinite bob}.login-card{flex-direction:column;gap:14px;display:flex}.login-card label{flex-direction:column;gap:6px;font-weight:700;display:flex}input{font:inherit;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:12px 14px}input:focus{border-color:var(--blue);outline:none}@media (width<=720px){.login{grid-template-columns:1fr;gap:16px}}.goal{grid-template-columns:1.2fr 1fr;align-items:center;gap:24px;margin-bottom:32px;display:grid}@media (width<=720px){.goal{grid-template-columns:1fr}}.bar-label{justify-content:space-between;margin:8px 0 4px;font-size:14px;font-weight:800;display:flex}.bar{background:var(--line);border-radius:999px;height:16px;overflow:hidden}.bar-fill{border-radius:999px;height:100%;transition:width .6s}.goal-fill{background:var(--orange)}.xp-fill{background:var(--blue)}.path{flex-direction:column;gap:28px;max-width:640px;margin:0 auto;display:flex}.node-row{align-items:center;gap:20px;display:flex}.node-row.right{text-align:right;flex-direction:row-reverse}.node-row.right .chips{justify-content:flex-end}.node{background:var(--green);width:88px;height:88px;box-shadow:0 8px 0 var(--green-dark);border-radius:50%;flex:none;place-items:center;text-decoration:none;transition:transform .1s;display:grid}.node:hover{transform:translateY(-2px)}.node:active{box-shadow:0 2px 0 var(--green-dark);transform:translateY(6px)}.node.done{background:#ffc800;box-shadow:0 8px #e0a800}.node.locked{background:var(--line);box-shadow:0 8px 0 color-mix(in srgb, var(--line) 70%, #000);cursor:not-allowed}.node-icon{font-size:40px}.node-info{flex-direction:column;gap:4px;display:flex}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:2px solid var(--line);border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700}.play{grid-template-columns:1fr 300px;align-items:start;gap:20px;display:grid}@media (width<=860px){.play{grid-template-columns:1fr}}.stage{aspect-ratio:16/9;background:#111;border-radius:20px;width:100%;min-width:0;min-height:440px;position:relative;overflow:hidden}.stage.hidden{display:none}.stage video,.stage canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.mirror{transform:scaleX(-1)}.dev-banner{background:var(--purple);color:#fff;text-align:center;z-index:3;padding:6px;font-size:14px;font-weight:800;position:absolute;top:0;left:0;right:0}.hud{color:#fff;z-index:2;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:36px;left:16px;right:16px}.hud-left{flex-direction:column;gap:8px;display:flex}.steps-dots{gap:6px;display:flex}.dot{background:#ffffff4d;border-radius:99px;width:28px;height:8px}.dot.done{background:var(--green)}.dot.current{background:#fff}.timer{text-shadow:0 2px 8px #00000080;font-size:32px;font-weight:900}.hud-score{text-shadow:0 2px 8px #00000080;font-size:40px;font-weight:900}.overlay-msg{text-align:center;color:#fff;z-index:2;background:#00000059;place-content:center;font-size:28px;font-weight:900;display:grid;position:absolute;inset:0}.overlay-msg.countdown{font-size:160px;animation:1s ease-out infinite pop}.overlay-msg.intro{gap:8px;font-size:44px}.countdown-small{color:var(--orange);font-size:64px}.overlay-card{z-index:3;width:min(420px,90%);height:fit-content;max-height:calc(100% - 24px);margin:auto;position:absolute;inset:0;overflow-y:auto}.step-list{padding-left:20px;font-weight:700;line-height:1.8}.judge{text-align:center;color:#fff;-webkit-text-stroke:2px #00000040;text-shadow:0 4px #00000040;pointer-events:none;z-index:2;font-size:56px;font-weight:900;animation:.9s ease-out forwards judge;position:absolute;top:38%;left:0;right:0}.judge span{font-size:32px}.judge-perfect{color:#ffd900}.judge-good{color:var(--green)}.judge-ok{color:var(--blue)}.tip{color:#fff;-webkit-text-stroke:0;font-size:22px}.hint{color:#fff;white-space:nowrap;z-index:2;background:#000000b3;border-radius:12px;padding:8px 16px;font-weight:800;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.coach{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.guide{width:200px;height:250px;stroke:var(--green);stroke-width:6px;stroke-linecap:round;fill:none}.guide circle{fill:var(--green);stroke:none}.guide .guide-shadow{fill:var(--line);stroke:none}.guide.on-beat circle{fill:var(--orange)}.reps{color:var(--muted);font-weight:800}.reps-num{color:var(--ink);font-size:48px}.results{flex-direction:column;grid-column:1/-1;gap:16px;width:100%;max-width:520px;margin:0 auto;animation:.4s ease-out pop;display:flex}.results-points{text-align:center}.big-number{color:var(--orange);font-size:72px;font-weight:900;line-height:1.1}.results-badges{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.badge{border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:800}.badge.streak{color:var(--orange)}.badge.level{color:var(--blue)}.badge.goal{color:var(--green)}.breakdown{border-collapse:collapse;width:100%;font-weight:700}.breakdown td{border-bottom:2px solid var(--line);padding:8px 0}.num{text-align:right}.results-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.center-card{text-align:center;max-width:420px;margin:48px auto}.leaderboard{max-width:640px;margin:0 auto}.tabs{gap:8px;margin:16px 0;display:flex}.tabs button{font:inherit;border:2px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;border-radius:14px;flex:1;padding:10px;font-weight:800}.tabs button.active{color:var(--blue);border-color:var(--blue);background:color-mix(in srgb, var(--blue) 10%, var(--card))}.board{padding:8px}.board-row{border-radius:14px;grid-template-columns:44px 1fr auto auto 80px;align-items:center;gap:12px;padding:12px;font-weight:800;display:grid}.board-row.me{background:color-mix(in srgb, var(--green) 14%, transparent)}.rank{text-align:center;font-size:22px}.points{text-align:right;color:var(--orange)}.board-gap{text-align:center;color:var(--muted)}@media (width<=520px){.board-row{grid-template-columns:36px 1fr auto 64px}.board-row>:nth-child(4){display:none}}@keyframes bob{50%{transform:translateY(-10px)}}@keyframes pop{0%{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes judge{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-30px)}}.challenges{flex-direction:column;gap:12px;margin-bottom:32px;display:flex}.challenge{background:linear-gradient(135deg, color-mix(in srgb, var(--purple) 18%, var(--card)), var(--card));border-color:color-mix(in srgb, var(--purple) 50%, var(--line));align-items:center;gap:16px;text-decoration:none;transition:transform .1s;display:flex}.challenge:hover{transform:translateY(-2px)}.challenge-icon{font-size:56px;animation:2.4s ease-in-out infinite bob}.challenge-info{flex-direction:column;flex:1;gap:2px;display:flex}.challenge-info strong{font-size:22px}.challenge-best{color:var(--purple);flex-direction:column;align-items:flex-end;display:flex}.challenge-best strong{font-size:26px}.balloon-page{max-width:1100px;margin:0 auto}.balloon-stage{min-height:520px}.game-canvas{pointer-events:none;z-index:1}.rules{padding-left:0;font-weight:700;line-height:1.8;list-style:none}.combo{color:var(--orange);text-shadow:0 2px 6px #00000080;font-size:22px;font-weight:900;animation:.3s ease-out pop}.timer.urgent{color:var(--red);animation:1s ease-out infinite pop}.shake{animation:.4s shake}.tabs.boards button.active{color:var(--purple);border-color:var(--purple);background:color-mix(in srgb, var(--purple) 10%, var(--card))}@keyframes shake{20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.challenge-egg-catch{background:linear-gradient(135deg, #d3dbbd, var(--card));border-color:#a9b38c}.challenge-egg-catch .challenge-best{color:#4a5a3a}.egg-page{max-width:1100px;margin:0 auto}.egg-stage{background:#6b6f63;border:10px solid #8c2f2f;border-radius:28px}.stage .lcd{object-fit:contain;background:#c9d1b4;width:100%;height:100%;position:absolute;inset:0}.pip{aspect-ratio:16/9;z-index:2;background:#111;border:3px solid #fffc;border-radius:12px;width:24%;min-width:140px;position:absolute;bottom:12px;right:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.stage .pip video,.stage .pip canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.quadrants{pointer-events:none;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;display:grid;position:absolute;inset:0}.quadrants span{border:1px dashed #ffffff40}.quadrants span.on{border:2px solid var(--green);background:#58cc0259}.pip-off{color:#fff9;place-items:center;font-size:13px;font-weight:800;display:grid;position:absolute;inset:0}.challenge-subway-run{background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, var(--card)), var(--card));border-color:color-mix(in srgb, var(--blue) 45%, var(--line))}.challenge-subway-run .challenge-best{color:var(--blue)}.subway-page{max-width:1100px;margin:0 auto}.subway-stage{min-height:520px}.stage .runner-canvas{width:100%;height:100%;position:absolute;inset:0}.tabs.boards{flex-wrap:wrap}.lane-indicator{justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;bottom:6px;left:0;right:0}.lane-indicator span{background:#ffffff59;border-radius:99px;width:18px;height:8px}.lane-indicator span.on{background:var(--green)}.lane-indicator b{font-size:18px;position:absolute;right:8px}.hearts{letter-spacing:2px;font-size:26px}.hearts .lost{filter:grayscale();opacity:.35}.coins{color:#fff;text-shadow:0 2px 6px #00000080;font-size:22px;font-weight:900}.crash-flash{pointer-events:none;z-index:1;background:#ff4b4b73;animation:.4s ease-out forwards flash;position:absolute;inset:0}@keyframes flash{to{opacity:0}}.challenge-pong{background:linear-gradient(135deg, color-mix(in srgb, var(--red) 14%, var(--card)), color-mix(in srgb, var(--blue) 14%, var(--card)));border-color:color-mix(in srgb, var(--blue) 40%, var(--line))}.challenge-pong .challenge-best{color:var(--red)}.pong-page{max-width:1100px;margin:0 auto}.pong-stage{min-height:480px}.stage .pong-video{opacity:.55}.stage .pong-canvas{z-index:1;width:100%;height:100%;position:absolute;inset:0}.pong-players{pointer-events:none;z-index:2;justify-content:space-between;display:flex;position:absolute;top:40px;left:12px;right:12px}.pong-player{color:#fff;background:#0000008c;border:2px solid;border-radius:999px;padding:4px 10px;font-size:14px;font-weight:800}.pong-final{justify-content:center;gap:10px;font-size:40px;font-weight:900;display:flex}.challenge-dance{background:linear-gradient(135deg, color-mix(in srgb, #ff4fa3 20%, var(--card)), color-mix(in srgb, var(--purple) 16%, var(--card)));border-color:color-mix(in srgb, #ff4fa3 45%, var(--line))}.challenge-dance .challenge-best{color:#ff4fa3}.dance-page{max-width:1100px;margin:0 auto}.dance-stage{min-height:520px}.stage .dance-canvas{width:100%;height:100%;position:absolute;inset:0}.pip.pip-top{width:22%;top:40px;bottom:auto}.dance-hud{right:calc(22% + 28px)}.dance-score{flex-direction:column;align-items:flex-end;display:flex}.star-meter,.result-stars{letter-spacing:2px;color:#ffffff40;font-size:26px}.star-meter .on{color:#ffd900;text-shadow:0 0 10px #ffd900}.result-stars{color:var(--line);font-size:44px}.result-stars .on{color:#ffc800}.count-in{background:0 0;animation:.6s ease-out pop}.dance-judge{top:20%;left:40%;right:auto;transform:translate(-50%)}.judge-miss{color:#aaa}.or{text-align:center;color:var(--muted);font-weight:700}.center-text{text-align:center;margin:0}.stat.guest{color:var(--muted);border:2px solid var(--line);border-radius:999px;padding:0 10px}.stat.pro,nav a.go-pro{color:#e0a800}.xp-balance{margin:8px 0 0}button.challenge{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}.challenge.locked .challenge-icon,.challenge.locked .challenge-info{opacity:.6}.modal-backdrop{z-index:50;background:#00000073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{flex-direction:column;gap:12px;width:min(560px,100%);display:flex}.lock-icon{font-size:56px}.locked-card{flex-direction:column;gap:12px;max-width:560px;display:flex}.unlock-options{text-align:left;flex-direction:column;gap:10px;display:flex}.unlock-option{border:2px solid var(--line);border-radius:16px;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;display:flex}.unlock-option p{margin:2px 0 0}.unlock-option.featured{background:#ffc8001a;border-color:#ffc800}.unlock-option .btn{white-space:nowrap;flex:none}.pro-page{flex-direction:column;gap:20px;max-width:760px;margin:0 auto;display:flex}.pro-hero h1{font-size:40px}.plans{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.plan{font:inherit;color:inherit;text-align:left;cursor:pointer;flex-direction:column;gap:6px;display:flex}.plan.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}.plan-price{font-size:32px;font-weight:900}.checkout{flex-direction:column;gap:14px;display:flex}.checkout label{flex-direction:column;flex:1;gap:6px;font-weight:700;display:flex}.checkout .row{gap:12px;display:flex}.test-banner{background:color-mix(in srgb, var(--purple) 16%, transparent);border:2px dashed var(--purple);border-radius:12px;padding:10px 14px;font-size:14px}
