.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);filter:drop-shadow(0 4px 24px lab(0% 0 0/.3));width:min(100%,75vmin,100vh - 280px);height:auto}@media (min-width:700px){.circle-svg{width:min(100%,100vh - 200px);max-width:100%;height:auto}}.chord-preview{z-index:50;pointer-events:none;padding:var(--ds-space-8);border-radius:var(--ds-radius-12);background:var(--ds-color-surface-overlay);border:1px solid var(--ds-color-border-subtle);box-shadow:var(--ds-shadow-overlay);position:fixed}.outer-ring{fill:none;stroke:color-mix(in oklab,var(--ds-color-primary-solid)10%,transparent);stroke-width:60px}.inner-ring{fill:none;stroke:color-mix(in oklab,var(--ds-color-primary-solid)6%,transparent);stroke-width:50px}.key-circle{cursor:pointer;transition:fill var(--ds-duration-240)var(--ds-ease-out),stroke var(--ds-duration-240)var(--ds-ease-out),filter var(--ds-duration-240)var(--ds-ease-out);filter:drop-shadow(0 2px 4px #0000004d);filter:drop-shadow(0 2px 4px lab(0% 0 0/.3))}@media (prefers-reduced-motion:reduce){.key-circle{transition:none}}.major-key{fill:var(--ds-color-primary-solid);stroke:var(--ds-color-border-strong);stroke-width:2px}.major-key:hover,.major-key.active{fill:var(--ds-color-primary-hover);stroke:var(--ds-color-primary-text);stroke-width:3px;filter:drop-shadow(0 0 12px color-mix(in oklab,var(--ds-color-primary-solid)50%,transparent))}.minor-key{fill:var(--ds-color-surface-raised);stroke:var(--ds-color-border-strong);stroke-width:2px}.minor-key:hover,.minor-key.active{fill:var(--ds-color-surface-overlay);stroke:var(--ds-color-primary-text);stroke-width:3px;filter:drop-shadow(0 0 10px color-mix(in oklab,var(--ds-color-primary-solid)30%,transparent))}.key-text{font-size:var(--ds-font-size-16);font-weight:var(--ds-font-weight-emphasis);fill:var(--ds-color-text-on-primary);cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:var(--ds-font-tracking-16)}.key-text.active{font-weight:var(--ds-font-weight-emphasis)}.minor-text{font-size:var(--ds-font-size-13);fill:var(--ds-color-text-primary);font-weight:var(--ds-font-weight-ui)}.center-text{font-size:var(--ds-font-size-15);font-weight:var(--ds-font-weight-emphasis);fill:var(--ds-color-primary-text);letter-spacing:.05em;text-transform:uppercase}