.cf{border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;gap:16px;margin:1em 0 1.6em;padding:22px;display:flex}.cf-pick{flex-direction:column;gap:12px;display:flex}.cf-search{gap:8px;margin:0;display:flex}.cf-search input{min-width:0;font:600 1.05rem var(--font-body);color:var(--ink);background:var(--surface);border:2px solid var(--border);border-radius:12px;flex:1;padding:10px 14px}.cf-search input:focus{border-color:var(--accent);outline:none}.cf-msg{color:var(--ink-soft);margin:0;font-size:.95rem}.cf-msg:empty{display:none}.cf-sugg{font:700 .95rem var(--font-body);border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);cursor:pointer;border-radius:99px;margin:2px;padding:2px 12px}.cf-field{flex-direction:column;gap:6px;display:flex}.cf-label,.cf-vol{color:var(--ink-soft);font-size:.85rem;font-weight:700}.cf-vol{flex-direction:column;gap:6px;display:flex}.cf-vol input{accent-color:var(--accent)}.cf-seg{flex-wrap:wrap;gap:4px;display:flex}.cf-seg button{font:700 .9rem var(--font-body);border:2px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;border-radius:10px;min-height:36px;padding:6px 11px}.cf-seg button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}.cf-roots{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;display:grid}.cf-root{font:800 1rem var(--font-body);color:#2a2850;cursor:pointer;background:#fffdf8;border:2px solid #cfc8b8;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:2px 0;line-height:1.1;display:flex}.cf-root.black{color:#fff;background:#1c1b33;border-color:#1c1b33;font-size:.8rem}.cf-root[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.cf-root:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.cf-types{flex-wrap:wrap;gap:10px 22px;display:flex}.cf-result{background:var(--bg-2);border-radius:var(--radius-md);flex-direction:column;gap:14px;padding:16px 18px;display:flex}.cf-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.cf-title{flex-wrap:wrap;align-items:baseline;gap:6px 14px;display:flex}.cf-title b{font:800 3rem/1 var(--font-display);color:var(--accent)}.cf-full{font:700 1.15rem var(--font-body);color:var(--ink-soft)}.cf-alt{font:600 .9rem var(--font-body);color:var(--accent-text);cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.cf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;display:grid}.cf-insts{display:contents}.cf-card[data-inst=piano]{flex-direction:column;display:flex}.cf-card[data-inst=piano] .cf-keys{margin:auto 0}.cf-cardhead{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.cf-cardhead h3{margin:0;font-size:1.05rem}.cf-hear{font:700 .85rem var(--font-body);border:2px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;white-space:nowrap;border-radius:99px;padding:4px 12px}.cf-hear:hover{border-color:var(--accent);color:var(--accent-text)}.cf-num{color:var(--accent-text);font-weight:800}.cf-keys{width:100%;height:auto;display:block}.cf-key{cursor:pointer}.cf-key.white rect{fill:#fffdf8;stroke:#cfc8b8;stroke-width:1.5px}.cf-key.black rect{fill:#1c1b33}.cf-key text{font:800 12px var(--font-body);fill:#fff;pointer-events:none}.cf-key .cf-c{fill:#9a96b0;font-size:10px;font-weight:600}.cf-key.on rect{fill:var(--indigo)}.cf-key.on.root rect{fill:var(--accent)}.cf-key.ping rect{stroke:#1c1b33;stroke-width:3px}.cf-key.black.ping rect{fill:#5a56a8}.cf-box{width:100%;max-width:230px;height:auto;margin:0 auto;display:block}[data-inst=ukulele] .cf-box{max-width:180px}.cf-fret,.cf-string{stroke:var(--ink-soft);stroke-width:1.5px}.cf-nut{stroke:var(--ink);stroke-width:6px;stroke-linecap:round}.cf-fr{font:700 13px var(--font-body);fill:var(--muted)}.cf-mute{font:700 20px var(--font-body);fill:var(--muted)}.cf-sname{font:700 11px var(--font-body);fill:var(--muted)}.cf-barre{fill:var(--indigo);opacity:.3}.cf-dot{cursor:pointer}.cf-dot circle{fill:var(--indigo);transform-box:fill-box;transform-origin:50%;transition:transform .15s}.cf-dot.root circle{fill:var(--accent)}.cf-dot text{font:800 10.5px var(--font-body);fill:#fff;pointer-events:none}.cf-dot.open circle{fill:var(--surface);stroke:var(--ink-soft);stroke-width:2.2px}.cf-dot.open.root circle{stroke:var(--accent)}.cf-dot.ping circle{transform:scale(1.2)}.cf-nav{justify-content:center;align-items:center;gap:12px;margin-top:6px;display:flex}.cf-nav span{color:var(--ink-soft);font-size:.92rem;font-weight:700}.cf-step{border:2px solid var(--border);background:var(--surface);width:38px;height:38px;color:var(--ink);cursor:pointer;border-radius:50%;font-size:.9rem}.cf-step:disabled{opacity:.35;cursor:default}.cf-shapenote{text-align:center;color:var(--muted);margin:4px 0 0;font-size:.82rem}.cf-link{color:var(--muted);margin:8px 0 0;font-size:.88rem}.cf-none{color:var(--muted);font-style:italic}.cf-settings{border-top:1.5px solid var(--border);flex-wrap:wrap;align-items:flex-end;gap:14px 26px;padding-top:14px;display:flex}.cf-compact{border-radius:var(--radius-md);box-shadow:none;gap:10px;margin:0;padding:14px}.cf-compact .cf-only-full{display:none}.cf-compact .cf-title b{font-size:2.2rem}.cf-compact .cf-root{min-height:38px}.cf-compact .cf-settings{gap:10px 18px;padding-top:10px}@media (prefers-reduced-motion:reduce){.cf-dot circle,.cf-note ellipse{transition:none}.cf-dot.ping circle{stroke:var(--ink);stroke-width:3px;transform:none}}@media (width<=700px){.cf{border-radius:var(--radius-md);padding:14px}.cf-grid{grid-template-columns:1fr}.cf-roots{grid-template-columns:repeat(6,minmax(0,1fr))}.cf-result{padding:12px}}