.chord-finder{--cf-ink:#18181b;--cf-paper:#fff;--cf-accent:#21b3a0;--cf-root:#e0483d;--cf-third:#2f7ae0;--cf-fifth:#f0a020;--cf-other:#8a8a90;& .picker{z-index:20;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;padding:12px;position:sticky;top:0}& .tabs,& .keys{flex-wrap:wrap;gap:4px;display:flex}& .keys{margin-top:8px}& .tab{border:1px solid var(--border);background:var(--card);color:var(--foreground);cursor:pointer;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:700}& .tab[aria-selected=true]{background:var(--cf-accent);border-color:var(--cf-accent);color:#fff}& .k,& .kind{border:1px solid var(--border);background:var(--card);color:var(--foreground);cursor:pointer;border-radius:8px;font-weight:700}& .k{flex-direction:column;justify-content:flex-start;align-items:center;min-width:44px;padding:6px 8px;font-size:14px;line-height:1.2;display:flex}& .k em{color:var(--muted-foreground);font-size:10px;font-style:normal;font-weight:600;line-height:12px;display:block}& .k:not(.half):after{content:"";min-height:12px;display:block}& .k[aria-pressed=true]{background:var(--foreground);border-color:var(--foreground);color:var(--background)}& .k[aria-pressed=true] em{color:var(--background);opacity:.75}& .kind{padding:7px 12px;font-size:13px}& .kind[aria-pressed=true]{background:var(--cf-accent);border-color:var(--cf-accent);color:#fff}& .now{letter-spacing:-.02em;margin:12px 0 0;font-size:28px;font-weight:800}& .now .alias{color:var(--muted-foreground);margin-left:6px;font-size:15px;font-weight:700}& .now small{color:var(--muted-foreground);margin-top:2px;font-size:13px;font-weight:600;display:block}& .block{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;padding:16px}& .block h3{margin:0 0 4px;font-size:18px;font-weight:700}& .lead{color:var(--muted-foreground);margin:0 0 12px;font-size:13px}& .strip-wrap{overflow-x:auto}& .strip{gap:8px;padding:4px 0 8px;display:flex}& .dia-card{background:var(--cf-paper);border:1px solid var(--border);cursor:pointer;text-align:center;border-radius:10px;flex-direction:column;flex:none;align-items:center;gap:2px;min-width:132px;padding:8px 4px;display:flex}& .dia-card:hover{border-color:var(--cf-accent)}& .dia-card.on{border-color:var(--cf-accent);box-shadow:inset 0 0 0 1px var(--cf-accent)}& .dia-lb{color:var(--cf-ink);font-size:12px;font-weight:700}& .dia-keys{color:#6b6b72;font-size:11px}& .lv{border:1px solid;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:800}& .lv-easy{color:#1f9254}& .lv-barre{color:#d9820a}& .lv-high{color:#7c47cc}& .how{color:var(--muted-foreground);border-top:1px dashed var(--border);margin:4px 0 0;padding-top:10px;font-size:12.5px;line-height:1.8}& .how b{color:var(--foreground)}& .fretboard,& .kbd-full{background:var(--cf-paper);border-radius:10px;padding:8px 4px;overflow-x:auto}& .fretboard svg,& .kbd-full svg{margin:0 auto;display:block}& .fb-fret,& .fb-str{stroke:#c9c9d0;stroke-width:1px}& .fb-fret.nut{stroke:var(--cf-ink);stroke-width:4px}& .fb-num,& .fb-open{fill:#8a8a90;font:700 10px system-ui,sans-serif}& .fb-num{text-anchor:middle}& .fb-lb{text-anchor:middle;fill:#fff;font:800 8.5px system-ui,sans-serif}& .fb-sel{fill:none;stroke:var(--cf-ink);stroke-width:2px}& .fb-dot.r-root{fill:var(--cf-root)}& .fb-dot.r-third{fill:var(--cf-third)}& .fb-dot.r-fifth{fill:var(--cf-fifth)}& .fb-dot.r-other{fill:var(--cf-other)}& .legend{color:var(--muted-foreground);flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px;display:flex}& .legend i{border-radius:50%;width:10px;height:10px;margin-right:4px;display:inline-block}& .legend .r-root{background:var(--cf-root)}& .legend .r-third{background:var(--cf-third)}& .legend .r-fifth{background:var(--cf-fifth)}& .legend .r-other{background:var(--cf-other)}& .others{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}& .other{background:var(--cf-paper);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;display:flex}& .other:hover{border-color:var(--cf-accent)}& .other-h{color:var(--cf-ink);font-size:13px;font-weight:700}& .other-h em{color:#6b6b72;font-style:normal;font-weight:600}& .other-go{color:var(--cf-accent);font-size:11.5px;font-weight:700}& .kw{fill:#fff;stroke:#c8c8d0}& .kb{fill:#26262c;stroke:#26262c}& .kw.on,& .kb.on{fill:var(--cf-accent)}}.chord-finder .cs-dia{display:block;overflow:visible}.chord-finder .cs-dia .fn{text-anchor:end;fill:var(--cf-ink);font:700 9px/1 system-ui,sans-serif}.chord-finder .cs-dia .dq{text-anchor:middle;fill:#bbb;font:700 14px/1 system-ui,sans-serif}.chord-finder .cs-dia .gl{stroke:var(--cf-ink);stroke-width:1.1px}.chord-finder .cs-dia .nut{fill:var(--cf-ink)}.chord-finder .cs-dia .br{stroke:var(--cf-ink);stroke-width:7px;stroke-linecap:round}.chord-finder .cs-dia .dot{fill:var(--cf-ink)}.chord-finder .cs-dia .op{fill:none;stroke:var(--cf-ink);stroke-width:1.2px}.chord-finder .cs-dia .mk{text-anchor:middle;fill:var(--cf-ink);font:700 8px/1 system-ui,sans-serif}.chord-finder .cs-dia .fo{text-anchor:start;fill:var(--cf-ink);font-family:system-ui,sans-serif;font-weight:700}@media (width<=640px){.chord-finder .now{font-size:24px}.chord-finder .k{min-width:40px}.chord-finder .tab{padding:8px 12px;font-size:13px}}