.harmony{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-items:start}@media(min-width:1024px){.harmony{grid-template-columns:minmax(300px,420px) minmax(0,1fr)}.harmony__circle{position:sticky;top:calc(var(--header-h) + var(--space-4))}}.diatonic{list-style:none;padding:0;margin:var(--space-3) 0;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.diatonic__item button{width:100%;display:grid;gap:2px;justify-items:center;padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);border:1px solid var(--color-border);border-top:4px solid var(--fn-color, var(--color-border));background:var(--color-surface-raised);color:var(--color-text);font:inherit;cursor:pointer;min-height:var(--target)}.diatonic__item[data-fn=T]{--fn-color: var(--color-success)}.diatonic__item[data-fn=PD]{--fn-color: var(--color-info)}.diatonic__item[data-fn=D]{--fn-color: var(--color-danger)}.diatonic__item[data-active] button{background:var(--color-selected-bg);border-color:var(--color-wood)}.diatonic__item[data-playing] button{box-shadow:0 0 0 2px var(--color-playing)}.diatonic__roman{font-family:var(--font-data);font-size:var(--text-small);color:var(--color-text-muted)}.diatonic__symbol{font-weight:700;font-size:var(--text-body)}.diatonic__fn{font-family:var(--font-data);font-size:var(--text-label);font-weight:700}.cadence{display:flex;gap:var(--space-3);align-items:flex-start}.prog-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}.prog-item{display:grid;justify-items:center;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--color-border);border-top:4px solid var(--fn-color, var(--color-border-strong));border-radius:var(--radius-md);background:var(--color-surface)}.prog-item[data-fn=T]{--fn-color: var(--color-success)}.prog-item[data-fn=PD]{--fn-color: var(--color-info)}.prog-item[data-fn=D]{--fn-color: var(--color-danger)}.prog-item[data-fn=x]{border-top-style:dashed}.prog-item[data-playing]{box-shadow:0 0 0 3px var(--color-playing);background:var(--color-selected-bg)}.prog-item__head{display:grid;justify-items:center;gap:2px}