.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}