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