@import"https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:wght@600;800&display=swap";:root{color-scheme:light;--bg: #fdf8ef;--bg-soft: #f4ecdd;--fg: #2a2438;--muted: #8a8299;--accent: #f5a623;--accent-soft: rgba(245, 166, 35, .16);--good: #16a34a;--warn: #d97706;--bad: #dc2626;--late: #eab308;--card: rgba(255, 255, 255, .65);--border: rgba(42, 36, 56, .12);font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}:root.dark{color-scheme:dark;--bg: #12121c;--bg-soft: #1a1a28;--fg: #f2f0ff;--muted: #9a95b8;--accent: #f5a623;--accent-soft: rgba(245, 166, 35, .14);--good: #4ade80;--warn: #fbbf24;--bad: #f87171;--late: #facc15;--card: rgba(255, 255, 255, .05);--border: rgba(242, 240, 255, .14)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--bg);color:var(--fg);overscroll-behavior:none}.app{height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 16px);gap:4px;max-width:640px;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:default}.logo{display:inline-flex;font-size:23px}.logo-btn{display:inline-flex;align-items:center;gap:8px;border:none;background:none;padding:0;font:inherit;font-weight:800;color:var(--accent);cursor:pointer}.logo-btn:active{transform:scale(.97)}.topbar-buttons{display:inline-flex;gap:8px}.icon-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--fg);font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.icon-btn:active{transform:scale(.92)}.daily-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--fg);font-family:inherit;font-size:13.5px;font-weight:800;white-space:nowrap;cursor:pointer}.daily-btn:active{transform:scale(.95)}@media (max-width: 430px){.logo{font-size:19px}.logo-btn{gap:6px}.logo-btn svg{width:25px;height:25px}.topbar-buttons{gap:6px}.daily-btn{gap:5px;padding:6px 10px;font-size:12.5px}}@media (max-width: 350px){.daily-word{display:none}}.squiggle{font-family:Caveat,Segoe Script,cursive;color:var(--muted);font-weight:500}.tagline{text-align:center;font-size:clamp(18px,5vmin,26px);transform:rotate(-1.5deg)}.bpm-zone{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0}.bpm-big{font-size:clamp(72px,24vmin,150px);font-weight:800;line-height:.95;letter-spacing:-.03em;animation:pop .25s ease-out;font-variant-numeric:tabular-nums}.bpm-empty{color:var(--muted)!important}@keyframes pop{0%{transform:scale(1.14)}to{transform:scale(1)}}.bpm-label{font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}.bpm-row{width:100%;display:flex;align-items:center;gap:8px}.bpm-side{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px}.bpm-side-right{justify-content:flex-end}.bpm-stack{flex-direction:column;align-items:flex-start;justify-content:center}.bpm-mid{display:flex;flex-direction:column;align-items:center;gap:2px}.target-btn{width:auto;min-width:36px;padding:0 10px;gap:6px;border-radius:999px}.target-btn.target-set{border-color:var(--accent);background:var(--accent-soft)}.target-emoji{font-size:17px;line-height:1}.target-val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}.target-hint{align-self:flex-end;display:flex;align-items:flex-start;gap:4px;margin-right:28px;font-size:clamp(14px,3.8vmin,17px);transform:rotate(-1.5deg)}.target-hint-arrow{width:24px;height:20px;flex:0 0 auto;color:var(--accent)}.chip-x{opacity:.6;padding:0 2px}.chip-x:hover{opacity:1}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 1.6s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}.challenge-progress{color:var(--accent)}.challenge-total{font-size:.38em;color:var(--muted);letter-spacing:0}.tagline.challenge-song{display:block;color:var(--fg)}.challenge-title{text-align:center;padding:2px 0}.challenge-title strong{display:block;font-size:clamp(20px,6vmin,28px);font-weight:800}.challenge-title span{display:block;margin-top:2px;font-size:15px;font-weight:700;color:var(--muted)}.clip-wrong-prefix{text-align:center;font-size:21px;color:var(--warn);transform:rotate(-2deg);margin-bottom:-8px}.clip-wrong{font-size:clamp(34px,10vmin,52px);font-weight:800;color:var(--warn);text-align:center;transform:rotate(-2deg);animation:pop .25s ease-out,blink 1.6s ease-in-out infinite}.demo-lyric{font-size:clamp(48px,16vmin,96px);color:var(--accent)}.graph-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border:1.5px solid var(--border);border-radius:18px;background:var(--card);padding:6px 6px 0;position:relative}.graph-reset{position:absolute;top:8px;right:8px;z-index:5;width:40px;height:40px}.graph-hint-label{font-family:Caveat,Segoe Script,cursive;font-size:16px;font-weight:500;fill:var(--accent)}.graph-seekable{cursor:pointer}.graph-wrap{flex:1 1 auto;min-height:0}.graph-wrap svg{display:block}.graph-target-label{font-size:11px;font-weight:700;fill:var(--accent)}.graph-grid{stroke:var(--border);stroke-width:1}.graph-tick{stroke:var(--muted);stroke-width:1}.graph-axis-label{font-size:10px;font-weight:600;fill:var(--muted)}.graph-empty{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:clamp(17px,4.5vmin,24px);padding:0 24px;transform:rotate(-1deg)}.stats-row{display:flex;justify-content:space-around;align-items:center;gap:8px;padding:6px 4px 8px;font-size:13px;color:var(--muted);flex-wrap:nowrap;white-space:nowrap}.stats-row strong{color:var(--fg);font-weight:800}.stats-placeholder{font-family:Caveat,cursive;font-size:17px}.controls-hint{min-height:38px;display:flex;align-items:flex-end;font-size:clamp(15px,4vmin,19px);padding:2px 6px 0;cursor:default}.hint-inner{display:inline-flex;align-items:flex-start;gap:6px;transform:rotate(-1.5deg)}.hint-left{margin-right:auto}.hint-center{margin:0 auto}.hint-right{margin-left:auto}.hint-arrow{width:20px;height:32px;flex:0 0 auto;margin-top:6px;color:var(--accent)}.controls{display:flex;gap:8px;cursor:default}.btn{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 7px;border-radius:14px;border:1.5px solid var(--border);background:var(--card);color:var(--fg);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:transform .1s ease,background .15s ease}.btn:active:not(:disabled){transform:scale(.95)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-icon{font-size:18px;line-height:1;height:18px;display:inline-flex;align-items:center;justify-content:center}.btn-active{background:var(--accent-soft);border-color:var(--accent)}.btn-recording{background:#dc26261f;border-color:var(--bad);color:var(--bad);animation:blink 1.2s ease-in-out infinite}@keyframes blink{50%{opacity:.6}}.ripple{position:fixed;width:24px;height:24px;border-radius:50%;background:var(--accent);pointer-events:none;transform:translate(-50%,-50%) scale(.5);animation:ripple .65s ease-out forwards;z-index:50}@keyframes ripple{0%{opacity:.75;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(-50%,-50%) scale(6)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a081273;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;z-index:100;cursor:default}.sheet{width:100%;max-width:560px;max-height:85dvh;overflow-y:auto;touch-action:auto;background:var(--bg);border-radius:22px 22px 0 0;border:1.5px solid var(--border);border-bottom:none;padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 20px);display:flex;flex-direction:column;gap:14px;animation:slide-up .22s ease-out}@keyframes slide-up{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.overlay-center{align-items:center;padding:16px}.overlay-center .sheet{max-width:480px;border-radius:22px;border-bottom:1.5px solid var(--border);padding-bottom:20px}.sheet-header{display:flex;align-items:center;justify-content:space-between}.sheet-header-btns{display:inline-flex;gap:8px}.sheet-header h2{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}.sheet-hint{font-size:13px;color:var(--muted)}.sheet-fineprint{font-size:11.5px;text-align:center;opacity:.85}.sheet-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.btn-primary{flex:0 0 auto;flex-direction:row;padding:10px 22px;background:var(--accent);border-color:var(--accent);color:#241a05;font-size:15px;border-radius:999px}.btn-ghost{flex:0 0 auto;flex-direction:row;padding:10px 18px;font-size:15px;border-radius:999px}.target-value-row{display:flex;align-items:center;justify-content:center;gap:22px}.target-value{font-size:56px;font-weight:800;min-width:110px;text-align:center;font-variant-numeric:tabular-nums}.step-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--fg);font-size:24px;font-weight:700;cursor:pointer}.step-btn:active{transform:scale(.92)}.sheet input[type=range]{width:100%;accent-color:var(--accent);height:32px}.preset-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip{border:1.5px solid var(--border);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 14px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}.chip-active{border-color:var(--accent);background:var(--accent-soft)}.daily-song{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.daily-song strong{font-size:24px;font-weight:800}.daily-artist{color:var(--muted);font-size:15px;font-weight:700}.reveal-row{display:flex;justify-content:center;gap:44px}.reveal-cell{text-align:center}.reveal-num{font-size:54px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.reveal-cap{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}.reveal-actual{animation:fade-in .4s ease-out .9s backwards}.reveal-actual .reveal-num{color:var(--accent)}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.reveal-score{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:17px;font-weight:700}.reveal-score strong{font-size:22px}.octave-note{font-family:Caveat,Segoe Script,cursive;font-size:17px;font-weight:500;color:var(--accent)}.wobble-note{font-family:Caveat,Segoe Script,cursive;font-size:17px;font-weight:500;color:var(--warn);text-align:center}.rank-note{font-size:13px;font-weight:700;color:var(--muted)}.ghost-note{font-family:Caveat,Segoe Script,cursive;font-size:18px;font-weight:700;color:var(--accent);text-align:center}.ghost-banner strong{color:var(--accent)}.preview-line{text-align:center}.linklike:disabled{color:var(--muted);text-decoration:none;cursor:default}.start-error{color:var(--bad)}.daily-streak-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;color:var(--muted)}.history-dots{display:flex;gap:7px}.history-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border)}.dot-empty{background:transparent}.dot-skip{background:var(--muted);opacity:.45}.dot-good{background:var(--good);border-color:var(--good)}.dot-warn{background:var(--warn);border-color:var(--warn)}.dot-bad{background:var(--bad);border-color:var(--bad)}.cal-toggle-on{border-color:var(--accent);background:var(--accent-soft)}.cal-head{display:flex;align-items:center;justify-content:space-between}.cal-head .icon-btn:disabled{opacity:.35;cursor:default}.cal-month{font-size:15px;font-weight:800}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;justify-items:center}.cal-wd{font-size:11px;font-weight:700;color:var(--muted)}.cal-cell{width:36px;height:36px;max-width:100%;padding:0;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--fg);font-family:inherit;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:default}.cal-blank{visibility:hidden}.cal-off{background:transparent;color:var(--muted);opacity:.4}.cal-missed{border-color:var(--bad);color:var(--bad);cursor:pointer}.cal-missed:enabled:active{transform:scale(.9)}.cal-done{background:var(--good);border-color:var(--good);color:#fff}.cal-late{background:var(--late);border-color:var(--late);color:#3f3005}.cal-today{outline:2px solid var(--accent);outline-offset:1.5px}.cal-busy{animation:cal-busy .9s ease-in-out infinite}@keyframes cal-busy{50%{opacity:.35}}.cal-legend{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:11.5px;font-weight:700;color:var(--muted)}.cal-legend span{display:inline-flex;align-items:center;gap:5px}.cal-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--border);display:inline-block}.lb-join{display:flex;gap:10px}.nick-input{flex:1 1 auto;min-width:0;border:1.5px solid var(--border);border-radius:999px;background:var(--card);color:var(--fg);font-family:inherit;font-size:15px;font-weight:700;padding:10px 16px}.nick-input:focus{outline:2px solid var(--accent);border-color:transparent}.lb-list{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:45dvh;overflow-y:auto}.lb-row{display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:10px;font-size:15px;font-weight:700}.lb-row:nth-child(2n){background:var(--card)}.lb-you{background:var(--accent-soft)!important;outline:1.5px dashed var(--accent)}.lb-rank{flex:0 0 34px;text-align:center}.lb-nick{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-games{color:var(--muted);font-size:12px}.lb-score{font-variant-numeric:tabular-nums}.lb-you-line,.lb-playing-as{text-align:center}.help-body{display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.55;color:var(--fg)}.help-body h3{font-size:16px;margin-top:6px}.help-body strong{color:var(--accent)}.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);left:50%;transform:translate(-50%);background:var(--bad);color:#fff;font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;z-index:60;white-space:nowrap}.linklike{border:none;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent);text-decoration:underline;cursor:pointer}@media (max-height: 620px){.tagline{display:none}.bpm-big{font-size:clamp(56px,16vmin,96px)}.controls-hint{display:none}}