.cc-selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cc-tones{display:flex;flex-wrap:wrap;gap:8px 20px;padding-left:20px}.cc-voicings{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.cc-card{min-width:0;border:1px solid #dbe2ea;border-radius:10px;padding:12px;background:#fff}.cc-card h3{margin:0 0 8px}.cc-diagram{display:block;width:100%;max-width:230px;height:auto;margin:auto}.cc-card p{font-size:.88rem;overflow-wrap:anywhere}.cc-common{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cc-common .cc-card{padding:8px}.cc-common .btn{width:100%;padding:6px;font-size:1rem}.cc-common p{font-size:.78rem;margin:4px 0}.cc-keyboard{width:100%;max-width:520px;height:auto;display:block}.cc-dot,.cc-barre{fill:#1d4ed8}.cc-finger{fill:white;font-size:12px;text-anchor:middle;dominant-baseline:middle}.cc-grid{stroke:#697586;stroke-width:1}.cc-nut{stroke:#263449;stroke-width:4}.cc-string-name,.cc-fret-label{fill:#263449;font-size:12px;text-anchor:middle}.cc-key{stroke:#475569;stroke-width:1}.cc-key-white{fill:#fff}.cc-key-black{fill:#263449}.cc-key-on{fill:#7dd3fc}.cc-key-dot{fill:#1d4ed8}.cc-key-label{fill:#263449;font-size:11px;text-anchor:middle}@media(max-width:600px){.cc-selects{grid-template-columns:1fr}.cc-voicings{grid-template-columns:1fr}.cc-common{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-common .cc-string-name{font-size:13px}}