.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);height:auto}@media (min-width:700px){.circle-svg{width:min(45vw,480px);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)}