.chord-diagram{width:100%;max-width:280px;margin:0 auto}.chord-diagram svg{width:100%;height:auto}
.chords-page__subtitle{color:#9fb6df;margin:6px 0 0;font-size:15px}.chords-page__layout{z-index:1;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;max-width:1120px;margin:0 auto;padding:8px 0 40px;display:grid;position:relative}.chords-page__controls{flex-direction:column;gap:20px;display:flex}.chords-page__instruments{background:#0a122599;border:1px solid #86a5d847;border-radius:12px;gap:6px;width:fit-content;padding:4px;display:inline-flex}.chords-page__instrument{color:#d7e5ff;cursor:pointer;background:0 0;border:0;border-radius:9px;padding:8px 16px;font-size:14px}.chords-page__instrument.is-active{color:#fff;background:#4ea5ff38}.chords-page__group{flex-direction:column;gap:10px;display:flex}.chords-page__group-label{text-transform:uppercase;letter-spacing:.06em;color:#9fb6df;font-size:13px}.chords-page__keys,.chords-page__suffixes{flex-wrap:wrap;gap:8px;display:flex}.chords-page__chip{color:#d7e5ff;cursor:pointer;background:#ffffff0a;border:1px solid #86a5d847;border-radius:10px;min-height:38px;padding:7px 13px;font-size:14px}.chords-page__chip:hover{background:#86a5d81f;border-color:#86a5d885}.chords-page__chip.is-active{color:#fff;background:#4ea5ff38;border-color:#4ea5ffb3}.chords-page__diagram-panel{background:#0a1225b3;border:1px solid #86a5d847;border-radius:16px;flex-direction:column;align-items:center;gap:16px;padding:22px;display:flex;position:sticky;top:16px}.chords-page__chord-name{color:#fff;margin:0;font-size:28px}.chords-page__variations{align-items:center;gap:14px;display:flex}.chords-page__arrow{color:#d7e5ff;cursor:pointer;background:#ffffff0a;border:1px solid #86a5d859;border-radius:50%;width:44px;height:44px;font-size:24px;line-height:1}.chords-page__arrow:hover:not(:disabled){background:#4ea5ff2e;border-color:#4ea5ffb3}.chords-page__arrow:disabled{opacity:.35;cursor:default}.chords-page__variation-label{text-align:center;color:#9fb6df;min-width:130px;font-size:14px}.chords-page__empty{color:#9fb6df}@media (max-width:860px){.chords-page__layout{grid-template-columns:1fr}.chords-page__diagram-panel{order:-1;position:static}}