.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(--staff-bg);border:1px solid var(--staff-border);--nf-line:color-mix(in oklab, var(--ink) 34%, transparent);border-radius:10px;width:100%;min-width:340px;height:auto;display:block}html[data-staff-theme=light] .note-finder .staff-surface{--nf-line:#18161180}@supports (color:lab(0% 0 0)){html[data-staff-theme=light] .note-finder .staff-surface{--nf-line:lab(7.24722% .654019 3.2768/.5)}}.note-finder .nf-line{stroke:var(--nf-line);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}