:root{--bg:#fefefe;--fg:#1a1a2e;--muted:#6b6b80;--accent:#4a90e2;--good:#7ed321;--warn:#f5a623;--error:#d0021b;--panel:#f5f5f7;--border:#e0e0e8;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-family:var(--sans);color:var(--fg);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{margin:0}main{flex-direction:column;gap:24px;max-width:1100px;margin:0 auto;padding:24px;display:flex}header{text-align:center}header h1{letter-spacing:-.5px;margin:0;font-size:2.5rem}header p{color:var(--muted);margin:4px 0 0;font-size:1.05rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}.toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.btn.play{background:var(--good)}.btn.play.playing{background:var(--warn)}.btn.play:disabled,.btn.ghost:disabled{opacity:.5;cursor:not-allowed;filter:none}.btn.ghost{color:var(--fg);border:1px solid var(--border);background:0 0}.tempo{color:var(--muted);align-items:center;gap:8px;margin-left:auto;font-size:.9rem;display:inline-flex}.tempo input[type=range]{width:140px}.bpm-value{font-variant-numeric:tabular-nums;min-width:6ch;color:var(--fg)}.btn{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;font-size:1rem;font-weight:600;transition:filter .15s;display:inline-flex}.btn:hover{filter:brightness(1.06)}.btn:active{filter:brightness(.95)}.score{background:#fff;border-radius:12px;min-height:200px;padding:16px;overflow-x:auto}.mic-panel{flex-direction:column;align-items:center;gap:20px;display:flex}.btn.mic{background:var(--good);border-radius:999px;padding:16px 32px;font-size:1.3rem}.btn.mic.active{background:var(--error)}.pitch-readout{text-align:center;gap:6px;display:grid}.pitch-readout .note{font-size:5rem;font-weight:700;line-height:1}.pitch-readout .note sub{color:var(--muted);vertical-align:sub;font-size:.4em;font-weight:500}.pitch-readout .cents{color:var(--good);font-variant-numeric:tabular-nums;font-size:1.3rem}.pitch-readout .cents.flat{color:var(--accent)}.pitch-readout .cents.sharp{color:var(--warn)}.pitch-readout .freq{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.95rem}.pitch-readout.idle{color:var(--muted);padding:40px 0;font-size:1.2rem}.error{color:var(--error);background:#ffe5e5;border:1px solid #fcc;border-radius:8px;padding:12px 16px}.score-counter{font-variant-numeric:tabular-nums;background:#7ed32114;border-radius:8px;align-items:center;gap:10px;margin-left:10px;padding:6px 12px;font-size:.95rem;display:inline-flex}.score-counter span{align-items:center;gap:4px;display:inline-flex}.difficulty-panel{padding:14px 18px}.diff-header{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:12px;display:flex}.diff-title{font-size:1rem;font-weight:700}.diff-tabs{background:var(--bg);border:1px solid var(--border);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.diff-tab{color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 14px;font-family:inherit;font-size:.9rem}.diff-tab.active{background:var(--accent);color:#fff;font-weight:600}.diff-rows{gap:6px;display:grid}.diff-row{grid-template-columns:150px 1fr auto;align-items:center;gap:12px;font-size:.95rem;display:grid}.diff-row .diff-label{color:var(--muted)}.diff-row .diff-value{font-variant-numeric:tabular-nums;text-align:right;min-width:9ch;font-weight:600}.diff-row .diff-value em{color:var(--muted);margin-left:4px;font-size:.85em;font-style:normal;font-weight:400}.diff-row input[type=range]{width:100%}.mic-hint{color:#a36b00;background:#f5a6231f;border:1px solid #f5a62359;border-radius:10px;align-items:center;gap:8px;margin:0 0 12px;padding:8px 14px;font-size:.95rem;display:inline-flex}@media (prefers-color-scheme:dark){.mic-hint{color:var(--warn);background:#f5a62329}}.score-area{position:relative}.count-in{color:var(--muted);align-items:center;gap:6px;font-size:.9rem;display:inline-flex}.count-in select{border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:6px;padding:4px 8px;font-family:inherit;font-size:.9rem}.countin-badge{color:var(--accent);text-shadow:0 4px 16px #4a90e259;pointer-events:none;z-index:5;font-size:7rem;font-weight:800;animation:.6s ease-out forwards countin-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes countin-pulse{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}to{opacity:.55;transform:translate(-50%,-50%)scale(1)}}.verdict-pop{pointer-events:none;background:#fff;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:1.05rem;font-weight:700;animation:1.6s ease-out forwards pop-fade;display:inline-flex;position:absolute;top:10px;right:14px;box-shadow:0 4px 12px #00000026}.verdict-pop .cents{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:500}.verdict-pop.verdict-hit{border:2px solid var(--good)}.verdict-pop.verdict-close{border:2px solid var(--warn)}.verdict-pop.verdict-missed{border:2px solid var(--border);color:var(--muted)}.verdict-pop.verdict-advance{border:2px solid var(--good);color:var(--good)}.verdict-pop.verdict-skip{border:2px solid var(--border);color:var(--muted)}.mode-tabs{background:var(--bg);border:1px solid var(--border);border-radius:999px;gap:2px;margin:0 0 12px;padding:3px;display:inline-flex}.mode-tab{color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 18px;font-family:inherit;font-size:.9rem}.mode-tab.active{background:var(--accent);color:#fff;font-weight:600}.btn.skip{background:var(--bg);color:var(--fg);border:1px solid var(--border)}.btn.skip:hover:not(:disabled){background:var(--border)}.btn.skip:disabled{opacity:.4;cursor:not-allowed}.hold-time{color:var(--muted);align-items:center;gap:8px;font-size:.9rem;display:inline-flex}.hold-time input[type=range]{width:140px}.hold-value{font-variant-numeric:tabular-nums;color:var(--fg);text-align:right;min-width:5ch;font-weight:600}.learn-counter{font-variant-numeric:tabular-nums;color:var(--muted);margin-left:auto;font-size:.95rem;font-weight:600}.learn-progress{background:var(--border);border-radius:999px;height:6px;margin:0 0 10px;overflow:hidden}.learn-progress-fill{background:var(--good);height:100%;transition:width 60ms linear}@keyframes pop-fade{0%{opacity:0;transform:translateY(-6px)scale(.7)}15%{opacity:1;transform:translateY(0)scale(1.1)}30%{opacity:1;transform:scale(1)}85%{opacity:1}to{opacity:0}}.results-panel{text-align:center}.results-panel h2{margin:0;font-size:1.6rem}.big-score{color:var(--good);margin:12px 0;font-size:4rem;font-weight:800;line-height:1}.results-breakdown{font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center;gap:18px;font-size:1rem;display:inline-flex}.results-breakdown .of-total{color:var(--muted)}.results-panel .hint{color:var(--muted);margin-top:16px;font-size:.95rem}.timeline-summary{color:var(--muted);background:#4a90e214;border-radius:6px;margin-top:10px;padding:6px 10px;font-family:ui-monospace,monospace;font-size:.85rem}.loading-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;color:#fff;background:#14141e8c;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:fixed;inset:0}.loading-overlay .spinner{border:5px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:56px;height:56px;animation:.9s linear infinite spin}.loading-overlay .loading-msg{text-shadow:0 1px 4px #0009;font-size:1.15rem;font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme:dark){:root{--bg:#16171d;--fg:#f3f4f6;--muted:#9ca3af;--panel:#1f2028;--border:#2e303a}.error{color:#ffb3b3;background:#3a1414;border-color:#5a1a1a}.score{color:#000;background:#fff}}