.harmony-unified .tonal-kind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex-shrink:0;padding-inline:12px}
.harmony-unified .tonal-kind button{min-width:0;min-height:44px;padding:5px 2px;font-size:15px;line-height:1.25;text-wrap:balance}
#inversion-toolbar{display:contents}
#inversion-mode{display:none!important}
.harmony-unified .tonal-inversions .answers{padding:0 12px 4px;gap:3px;overflow:visible}
.inversion-columns{display:grid;grid-template-columns:74px minmax(0,1fr);gap:4px;flex-shrink:0;color:var(--site-muted);font-size:13px;line-height:18px}
.inversion-columns>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;text-align:center}
[data-tonal-kind=triads-inversions] .inversion-columns>div{grid-template-columns:repeat(3,minmax(0,1fr))}
.harmony-unified .tonal-inversions #choices{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(7,minmax(0,1fr));flex:1;min-height:0;gap:4px;width:100%}
.degree-card{display:grid;grid-template-columns:74px minmax(0,1fr);gap:4px;align-items:stretch;min-width:0;min-height:0}
.degree-card h2{display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;font-size:16px;line-height:1.15;font-weight:650;color:var(--site-ink)}
.degree-card h2 small{font-size:12px;line-height:14px;font-weight:400;color:var(--site-muted)}
.inversion-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;min-width:0;min-height:0}
[data-tonal-kind=triads-inversions] .inversion-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.harmony-unified #choices .inversion-answer{min-height:24px!important;padding:2px!important;align-items:center;text-align:center;border-radius:7px;background:var(--site-raised);color:var(--site-ink);overflow:visible}
.harmony-unified #choices .inversion-answer b{font-size:17px!important;line-height:1.15;white-space:nowrap}
.harmony-unified #choices .inversion-answer small{display:none}
.harmony-unified #choices .inversion-answer[aria-pressed=true],.harmony-unified #choices .inversion-answer.correct{background:var(--site-soft);color:var(--site-ink);border-color:var(--site-accent);box-shadow:inset 0 0 0 1px var(--site-accent)}
.harmony-unified #choices .inversion-answer.wrong{border:2px dashed var(--feedback-actual);background:var(--site-surface);color:var(--site-ink)}
.harmony-unified #choices .inversion-answer:disabled{color:var(--site-muted);opacity:1}
.harmony-unified #choices .inversion-answer:focus-visible{outline:2px solid var(--site-accent);outline-offset:-3px}
@media(max-height:750px){
 .harmony-unified #choices .degree-card h2 small{display:none}
 .harmony-unified #choices .inversion-answer{padding:0 2px!important}
 .harmony-unified #choices .inversion-answer b{font-size:16px!important;line-height:18px}
}