.circle-of-fifths-container{flex-direction:column;align-items:center;gap:2rem;display:flex}@media (min-width:900px){.circle-of-fifths-container{flex-direction:row;justify-content:center;align-items:center;gap:3rem}}.circle-column{justify-content:center;align-items:center;display:flex}.circle-svg{filter:drop-shadow(0 4px 24px #00000026);flex-shrink:0}.outer-ring{fill:none;stroke:#3b82f61f;stroke-width:60px}.inner-ring{fill:none;stroke:#3b82f614;stroke-width:50px}.chord-column{justify-content:center;align-items:center;width:300px;min-height:300px;display:flex}.key-circle{cursor:pointer;filter:drop-shadow(0 2px 4px #0003);transition:all .25s}.major-key{fill:#3b82f6;stroke:#2563eb;stroke-width:2px}.major-key:hover,.major-key.active{fill:#2563eb;stroke:#1d4ed8;stroke-width:3px;filter:drop-shadow(0 0 12px #3b82f680)}.minor-key{fill:#e5e7eb;stroke:#d1d5db;stroke-width:2px}.minor-key:hover,.minor-key.active{fill:#d1d5db;stroke:#9ca3af;stroke-width:3px;filter:drop-shadow(0 0 10px #6b728066)}.key-text{fill:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:-.02em;font-size:16px;font-weight:700}.key-text.active{font-weight:800}.minor-text{fill:#374151;font-size:13px;font-weight:600}.center-text{fill:#37415199;letter-spacing:.05em;text-transform:uppercase;font-size:15px;font-weight:700}.chord-display{color:#111827;background:#f9fafb;border:1px solid #e5e7eb;border-radius:20px;width:100%;min-width:230px;max-width:300px;padding:2rem;box-shadow:0 8px 32px #00000014}.chord-placeholder{color:#6b7280;background:#f9fafb;border:1px dashed #d1d5db;border-radius:20px;justify-content:center;align-items:center;width:100%;min-width:230px;max-width:300px;padding:2rem;display:flex}.chord-diagram{flex-direction:column;align-items:center;margin-top:1rem;display:flex}.chord-diagram svg{filter:drop-shadow(0 1px 3px #00000014)}