.chord-listener{border:1px solid var(--line-strong);background:var(--bg-elevated);border-radius:16px;margin:28px 0;padding:18px}.chord-listener .cl-row{flex-wrap:wrap;gap:6px;display:flex}.chord-listener .cl-row+.cl-row{margin-top:8px}.chord-listener .cl-pill{border:1px solid var(--line);height:32px;color:var(--ink-muted);font-family:var(--font-sans);cursor:pointer;transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);background:0 0;border-radius:999px;padding:0 12px;font-size:13px;line-height:1}.chord-listener .cl-pill.small{height:28px;padding:0 10px;font-size:12px}.chord-listener .cl-pill:hover{color:var(--ink);border-color:var(--line-strong)}.chord-listener .cl-pill.active{color:var(--ink);border-color:var(--accent-amber-line);background:var(--accent-amber-soft)}.chord-listener .cl-bar{align-items:center;gap:14px;margin-top:14px;display:flex}.chord-listener .cl-play{background:var(--accent);height:34px;color:var(--accent-foreground);font-family:var(--font-sans);cursor:pointer;transition:background var(--dur) var(--ease);border:1px solid #0000;border-radius:10px;padding:0 16px;font-size:13px;font-weight:500}.chord-listener .cl-play:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 88%, white)}.chord-listener .cl-play:disabled{opacity:.6;cursor:default}.chord-listener .cl-toggle{color:var(--ink-muted);cursor:pointer;align-items:center;gap:7px;font-size:13px;display:inline-flex}.chord-listener .cl-toggle input{accent-color:var(--accent);cursor:pointer}.chord-listener .cl-keys{max-width:100%;margin:16px auto 0;display:block}.chord-listener .cl-caption{color:var(--ink-subtle);margin:14px 0 0;font-size:13px;line-height:1.6}.chord-listener .cl-caption b{color:var(--ink);font-weight:600}
.note-finder{border:1px solid var(--line-strong);background:var(--bg-elevated);border-radius:16px;margin:28px 0;padding:18px}.note-finder .nf-scroll{padding-bottom:2px;overflow-x:auto}.note-finder .nf-staff{background:var(--bg-sunken);border:1px solid var(--line);border-radius:10px;width:100%;min-width:340px;height:auto;display:block}.note-finder .nf-line{stroke:color-mix(in oklab, var(--ink) 34%, transparent);stroke-width:1px}.note-finder .nf-clef{font-family:var(--font-music), serif;fill:var(--ink-muted);font-size:74px}.note-finder .nf-note{cursor:pointer}.note-finder .nf-head{fill:var(--ink-muted);transform-box:fill-box;transform-origin:50%;transition:fill var(--dur) var(--ease), transform var(--dur) var(--ease)}.note-finder .nf-note:hover .nf-head{fill:var(--ink)}.note-finder .nf-note.active .nf-head{fill:var(--accent);transform:scale(1.25)}.note-finder .nf-note:focus-visible{outline:none}.note-finder .nf-note:focus-visible .nf-head{fill:var(--accent);stroke:var(--accent-amber-strong);stroke-width:2px}.note-finder .nf-label{font-family:var(--font-sans);text-anchor:middle;fill:var(--ink-faint);transition:fill var(--dur) var(--ease);font-size:11px}.note-finder .nf-note.active .nf-label{fill:var(--accent)}.note-finder .nf-keys{gap:4px;margin-top:14px;display:flex}.note-finder .nf-key{color:#383227;color:lab(21.1607% 1.45669 7.78621);height:76px;font-family:var(--font-sans);cursor:pointer;transition:background var(--dur) var(--ease);background:#f6f5f2;background:lab(96.5365% .107437 1.52061);border:1px solid #58554f;border:1px solid lab(36.2267% .614822 3.79653);border-radius:0 0 5px 5px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;font-size:12px;display:flex}.note-finder .nf-key:hover{background:#e7e4df;background:lab(90.7523% .225663 3.04817)}.note-finder .nf-key.active{background:var(--accent);color:var(--accent-foreground);font-weight:600}.note-finder .nf-caption{color:var(--ink-subtle);margin:14px 0 0;font-size:13px;line-height:1.6}.note-finder .nf-caption b{color:var(--ink);font-weight:600}
.scale-fingering{border:1px solid var(--line-strong);background:var(--bg-elevated);border-radius:16px;margin:28px 0;padding:18px}.scale-fingering .sf-scales,.scale-fingering .sf-hands{flex-wrap:wrap;gap:6px;display:flex}.scale-fingering .sf-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;display:flex}.scale-fingering .sf-pill{border:1px solid var(--line);height:32px;color:var(--ink-muted);font-family:var(--font-sans);cursor:pointer;transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);background:0 0;border-radius:999px;padding:0 12px;font-size:13px;line-height:1}.scale-fingering .sf-pill:hover{color:var(--ink);border-color:var(--line-strong)}.scale-fingering .sf-pill.active{color:var(--ink);border-color:var(--accent-amber-line);background:var(--accent-amber-soft)}.scale-fingering .sf-play{background:var(--accent);height:34px;color:var(--accent-foreground);font-family:var(--font-sans);cursor:pointer;transition:background var(--dur) var(--ease);border:1px solid #0000;border-radius:10px;padding:0 16px;font-size:13px;font-weight:500}.scale-fingering .sf-play:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 88%, white)}.scale-fingering .sf-play:disabled{opacity:.6;cursor:default}.scale-fingering .sf-scroll{margin-top:16px;padding-bottom:4px;overflow-x:auto}.scale-fingering .sf-keyboard{min-width:450px;height:132px;position:relative}.scale-fingering .sf-whites{display:flex;position:absolute;inset:0}.scale-fingering .sf-blacks{pointer-events:none;position:absolute;inset:0}.scale-fingering .sf-white{transition:background var(--dur) var(--ease);background:#f6f5f2;background:lab(96.5365% .107437 1.52061);border:1px solid #58554f;border:1px solid lab(36.2267% .614822 3.79653);border-radius:0 0 4px 4px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;display:flex}.scale-fingering .sf-black{height:60%;transition:background var(--dur) var(--ease);background:#151411;background:lab(6.20848% .32647 1.81975);border:1px solid #070604;border:1px solid lab(1.5654% .14127 .70779);border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;padding-bottom:6px;display:flex;position:absolute;top:0}.scale-fingering .sf-white.in-scale{background:color-mix(in oklab, var(--accent) 26%, #f6f5f2)}@supports (color:lab(0% 0 0)){.scale-fingering .sf-white.in-scale{background:color-mix(in oklab, var(--accent) 26%, lab(96.5365% .107437 1.52061))}}.scale-fingering .sf-black.in-scale{background:color-mix(in oklab, var(--accent) 42%, #151411)}@supports (color:lab(0% 0 0)){.scale-fingering .sf-black.in-scale{background:color-mix(in oklab, var(--accent) 42%, lab(6.20848% .32647 1.81975))}}.scale-fingering .sf-white.sounding{background:var(--accent)}.scale-fingering .sf-black.sounding{background:color-mix(in oklab, var(--accent) 80%, black)}.scale-fingering .in-scale.tuck{box-shadow:inset 0 0 0 2px var(--accent-amber-strong)}.scale-fingering .sf-finger{font-family:var(--font-mono);font-size:12px;font-weight:600;line-height:1}.scale-fingering .sf-white .sf-finger{color:#2e281e;color:lab(16.5179% 1.50545 7.83714)}.scale-fingering .sf-black .sf-finger{color:#f3f2ee;color:lab(95.3805% .135958 1.90178)}.scale-fingering .sf-legend{color:var(--ink-subtle);margin:14px 0 0;font-size:12.5px;line-height:1.55}.scale-fingering .sf-legend b{color:var(--ink-muted);font-family:var(--font-mono);font-weight:600}