:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#111;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#f5f5f3;--panel:#ffffffd1;--line:#11111114;--line-strong:#11111138;--text:#111;--muted:#888;--wave:#11111140;--ring:#1111110a;--btn-bg:#1111110d;--btn-active-bg:#111;--btn-active-text:#f5f5f3;--accent:#22c55e;--accent-soft:#22c55e1f;--warn:#ef4444;--warn-soft:#ef44441a;background:#f5f5f3;font-family:IBM Plex Sans,Avenir Next,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color:#eee;--bg:#0e0e0f;--panel:#141416e0;--line:#ffffff14;--line-strong:#fff3;--text:#eee;--muted:#777;--wave:#fff3;--ring:#ffffff0a;--btn-bg:#ffffff0f;--btn-active-bg:#eee;--btn-active-text:#0e0e0f;--accent:#4ade80;--accent-soft:#4ade801f;--warn:#f87171;--warn-soft:#f871711a;background:#0e0e0f}}*{box-sizing:border-box;margin:0}html,body,#app{min-height:100%}body{background:var(--bg);min-width:320px;color:var(--text)}button{font:inherit}.shell{flex-direction:column;align-items:center;gap:16px;min-height:100dvh;padding:20px 16px 32px;display:flex}.top-bar{align-items:center;gap:12px;width:min(520px,100%);display:flex}.mode-toggle{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.mode-btn{color:var(--muted);cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-radius:999px;padding:.55rem 1rem;font-size:.85rem;font-weight:500;transition:all .14s}.mode-btn.active{background:var(--btn-active-bg);color:var(--btn-active-text)}.mic-btn{border:1px solid var(--line);background:var(--btn-bg);color:var(--text);cursor:pointer;letter-spacing:.02em;border-radius:999px;margin-left:auto;padding:.55rem 1.3rem;font-size:.85rem;font-weight:500;transition:all .16s}.mic-btn:hover{border-color:var(--line-strong)}.mic-btn-active{background:var(--warn);color:#fff;border-color:#0000}.mic-btn-active:hover{opacity:.9;border-color:#0000}.chart-toggle{border:1px solid var(--line);background:var(--btn-bg);width:34px;height:34px;color:var(--muted);cursor:pointer;border-radius:50%;flex-shrink:0;place-items:center;margin-left:auto;font-size:.8rem;font-weight:600;transition:all .16s;display:grid}.chart-toggle:hover{border-color:var(--line-strong)}.chart-toggle-active{background:var(--btn-active-bg);color:var(--btn-active-text);border-color:#0000}.mic-btn{margin-left:0}.fingering-chart{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;gap:2px;width:min(520px,100%);padding:10px 12px;display:flex;overflow-x:auto}.chart-note{border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:6px;min-width:0;padding:6px 4px;transition:background .16s;display:flex}.chart-note-active{background:var(--accent-soft)}.chart-name{color:var(--muted);white-space:nowrap;letter-spacing:.02em;font-size:.7rem;font-weight:600}.chart-note-active .chart-name{color:var(--accent)}.chart-holes{flex-direction:column;align-items:center;gap:3px;display:flex}.hole{border:1.5px solid var(--line-strong);border-radius:50%;width:14px;height:14px;transition:background .16s,border-color .16s}.hole-closed{background:var(--text);border-color:var(--text)}.hole-open{background:0 0}.chart-note-active .hole-closed{background:var(--accent);border-color:var(--accent)}.chart-note-active .hole-open{border-color:var(--accent)}.minimal-stage{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:28px;flex-direction:column;flex:1;gap:20px;width:min(520px,100%);padding:24px 24px 20px;transition:border-color .3s;display:flex}.flash-hit{border-color:var(--accent)!important}.flash-miss{border-color:var(--warn)!important}.meta-line{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;justify-content:space-between;align-items:center;min-height:1.2em;font-size:.8rem;font-weight:500;display:flex}.note-core{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-height:180px;padding:8px 0;display:flex;position:relative}.note-ring{aspect-ratio:1;background:radial-gradient(circle, transparent 60%, var(--ring) 62%, transparent 70%);border-radius:50%;width:min(200px,48vw);animation:3s ease-in-out infinite breathe;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.note-ring-hit{background:radial-gradient(circle, transparent 60%, var(--accent-soft) 62%, transparent 70%);animation-duration:1.2s}.note-label{z-index:1;letter-spacing:-.06em;font-size:clamp(4.5rem,18vw,8rem);font-weight:600;line-height:.85;transition:color .2s;position:relative}.note-label-idle{color:var(--muted);opacity:.3}.note-label-off,.note-label-close{color:var(--text)}.note-label-hit{color:var(--accent)}.note-sub{z-index:1;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.4em;font-size:.95rem;position:relative}.gauge{height:36px;margin:0 8px;position:relative}.gauge-track{background:var(--line-strong);border-radius:999px;height:3px;position:absolute;top:16px;left:0;right:0}.gauge-center{background:var(--accent);opacity:.6;border-radius:999px;width:2px;height:24px;margin-left:-1px;position:absolute;top:6px;left:50%}.gauge-dot{border-radius:50%;width:28px;height:28px;transition:left .1s linear,background .2s,box-shadow .2s;position:absolute;top:4px;transform:translate(-50%)}.gauge-dot-idle{background:var(--muted);opacity:.2}.gauge-dot-off{background:var(--text);opacity:.7}.gauge-dot-close{background:var(--text)}.gauge-dot-hit{background:var(--accent);box-shadow:0 0 16px var(--accent-soft)}.gauge-label{color:var(--muted);opacity:.5;-webkit-user-select:none;user-select:none;font-size:.75rem;position:absolute;top:7px}.gauge-label-left{left:4px}.gauge-label-right{right:4px}.wave-wrap{border:1px solid var(--line);background:linear-gradient(to bottom, transparent 49%, var(--line) 50%, transparent 51%);border-radius:16px;height:80px;overflow:hidden}.wave{width:100%;height:100%}.wave-line{fill:none;stroke:var(--wave);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.result-line{text-align:center;font-size:1.8rem;font-weight:600;animation:.3s pop}.result-hit{color:var(--accent)}.result-miss{color:var(--warn);opacity:.5}.error-line{text-align:center;color:var(--warn);font-size:.82rem}@keyframes breathe{0%,to{opacity:.5;transform:translate(-50%,-50%)scale(.97)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.03)}}@keyframes pop{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media (width<=640px){.shell{gap:10px;padding:12px 10px 20px}.top-bar{gap:8px}.mode-btn{padding:.5rem .8rem;font-size:.8rem}.mic-btn{padding:.5rem 1rem;font-size:.8rem}.minimal-stage{border-radius:22px;gap:14px;padding:16px}.meta-line{font-size:.72rem}.wave-wrap{border-radius:12px;height:64px}.gauge{height:32px}.gauge-dot{width:24px;height:24px}}