.circle-of-fifths-container{flex-direction:column;flex:1;align-items:center;gap:1.5rem;width:100%;min-height:0;display:flex}@media (min-width:700px){.circle-of-fifths-container{flex-direction:row;justify-content:center;align-items:center;gap:3rem}}.circle-column{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}.circle-svg{filter:drop-shadow(0 4px 24px #0000004d);width:min(100%,75vmin,100vh - 280px);height:auto}@media (min-width:700px){.circle-svg{width:min(100%,100vh - 200px);max-width:100%;height:auto}}.outer-ring{fill:none;stroke:#facc151a;stroke-width:60px}.inner-ring{fill:none;stroke:#facc150f;stroke-width:50px}.chord-column{flex-shrink:0;justify-content:center;align-items:center;width:clamp(200px,20vw,280px);display:flex}@media (max-width:699px){.chord-column{width:100%;max-width:300px}}.key-circle{cursor:pointer;filter:drop-shadow(0 2px 4px #0000004d);transition:all .25s}.major-key{fill:#facc15;stroke:#a89a00;stroke-width:2px}.major-key:hover,.major-key.active{fill:#fde047;stroke:#facc15;stroke-width:3px;filter:drop-shadow(0 0 12px #facc1580)}.minor-key{fill:#1a1a1a;stroke:#2a2a2a;stroke-width:2px}.minor-key:hover,.minor-key.active{fill:#222;stroke:#facc15;stroke-width:3px;filter:drop-shadow(0 0 10px #facc154d)}.key-text{fill:#0a0a0a;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:#f8f9fa;font-size:13px;font-weight:600}.center-text{fill:#facc15b3;letter-spacing:.05em;text-transform:uppercase;font-size:15px;font-weight:700}.chord-display{color:#111;background:#fff;border:1px solid #e5e7eb;border-radius:20px;width:100%;padding:2rem;box-shadow:0 4px 16px #00000014}.chord-placeholder{color:#6b7280;background:#fff;border:1px dashed #e5e7eb;border-radius:20px;justify-content:center;align-items:center;width:100%;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 #00000026)}.voicing-label{text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:.25rem;font-size:.7rem;font-weight:600;display:block}.voicing-select{color:#374151;cursor:pointer;appearance:none;background:#f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .6rem center no-repeat;border:1px solid #e5e7eb;border-radius:8px;outline:none;width:100%;margin-bottom:.75rem;padding:.4rem 2rem .4rem .6rem;font-size:.8rem;transition:border-color .15s}.voicing-select:focus{border-color:#facc15}