.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))}}.circle-of-fifths{width:100%;max-width:420px;height:auto;margin-inline:auto}.circle-of-fifths:focus{outline:none}.circle-of-fifths:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px;border-radius:50%}.circle-of-fifths:not(:focus-visible) .cof-focus{display:none}.cof-seg{cursor:pointer}.cof-seg path{fill:var(--color-surface-raised);stroke:var(--color-border);stroke-width:1.5;transition:fill var(--dur-fast)}.cof-seg--minor path{fill:var(--color-surface)}.cof-seg text{fill:var(--color-text);pointer-events:none}.cof-seg .cof-sig{fill:var(--color-text-muted);font-family:var(--font-data)}.cof-seg[data-hi] path{fill:var(--color-selected-bg)}.cof-seg:hover path{stroke:var(--color-wood)}.cof-seg[data-selected] path{fill:var(--color-primary);stroke:var(--color-primary)}.cof-seg[data-selected] text{fill:var(--color-on-primary)}.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}