.harmony-unified .answers{overflow:hidden;padding:4px 12px;justify-content:flex-start}
.harmony-unified .choices{min-height:0;align-content:stretch}
#choices button{min-height:0!important;min-width:0;padding:3px 4px!important;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#choices b{font-size:var(--answer-size,18px)!important;line-height:1.15;overflow-wrap:anywhere}
.harmony-unified .choices small{font-size:12px;line-height:1.2;margin-top:2px}
.harmony-unified .choices.compact-labels small{display:none}
.harmony-unified .choices.reflow-tonal button{grid-row:auto!important;grid-column:auto!important}
.harmony-unified .roots{flex-shrink:0;gap:4px;margin:0;padding:0 0 6px}
.harmony-unified .roots:empty{padding:0}
.harmony-unified #reveal{padding:4px 12px}
.harmony-unified .keyboard-legend{margin-top:0}
.harmony-unified .dense-options #custom-edit{min-height:26px;padding:2px 8px;margin-bottom:2px;font-size:13px}
.harmony-unified .dense-options .keyboard-legend{display:none}
.harmony-unified .dense-options #keyboard svg{height:30px}
.harmony-unified .dense-options .feedback-heading{min-height:16px}
.harmony-unified .dense-options .feedback-heading strong,.harmony-unified .dense-options .feedback-heading p{font-size:11px}
.harmony-unified .dense-options #choices button{padding:1px!important;border-radius:4px}
.harmony-unified .dense-options #choices b{line-height:1;font-size:10px!important}
.harmony-unified .dense-options>header{padding:0 8px;gap:2px}
.harmony-unified .dense-options>header small{display:none}
.harmony-unified .dense-options>header h1{font-size:15px}
.harmony-unified .dense-options #modes{grid-template-columns:repeat(7,minmax(0,1fr));padding:2px 8px;gap:2px}
.harmony-unified .dense-options #modes button{min-height:26px;padding:2px 0;font-size:11px}
.harmony-unified .dense-options #modes button[data-mode=custom]{grid-column:auto}
.harmony-unified .dense-options .session{display:none}
.harmony-unified .dense-options #custom-edit{min-height:22px;font-size:12px;margin:0 8px;padding:1px 4px}
.harmony-unified .dense-options #reveal{padding:2px 8px}
.harmony-unified .dense-options #keyboard svg{height:22px}
.harmony-unified .dense-options .feedback-heading{min-height:12px;line-height:12px}
.harmony-unified .dense-options>footer{padding:2px 8px max(2px,env(safe-area-inset-bottom))}
#progression-panel .progression-content{display:grid;grid-template-rows:44px 44px 24px 28px minmax(80px,1fr) 55px 30px;gap:4px}
#progression-panel .progression-content>*{margin:0;min-height:0}
#progression-panel .progression-tools{gap:8px}
#progression-panel .progression-choices{align-content:stretch;grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;gap:6px}
#progression-panel .progression-choices button{min-height:0;padding:4px 6px;display:flex;flex-direction:column;justify-content:center}
#progression-panel .progression-chords{flex-direction:row;justify-content:center;gap:3px}
#progression-panel .progression-chords b{font-size:clamp(12px,3.6vw,18px);line-height:1.15}
#progression-panel .progression-chords i{font-size:0;line-height:1}
#progression-panel .progression-chords i::after{content:'→';font-size:10px}
#progression-panel .progression-choices strong{font-size:14px;margin-bottom:2px}
#progression-panel .progression-choices small{font-size:12px;margin-top:2px}
#progression-panel #progression-feedback{height:55px;padding:0}
#progression-panel #progression-keyboard svg{height:36px}
#progression-panel #progression-status{font-size:12px;line-height:15px}
@media(max-height:650px){
 .harmony-unified main>header{padding-block:2px;gap:4px}
 .harmony-unified main>header small{display:none}
 .harmony-unified main>header h1{font-size:16px}
 .harmony-unified #modes{padding-block:4px;gap:4px}
 .harmony-unified #modes button{min-height:32px;padding:3px 2px}
 .harmony-unified .session{padding-bottom:3px}
 .harmony-unified .tonal-kind{padding-bottom:4px}
 .harmony-unified .tonal-kind button{min-height:32px;padding:3px}
 .harmony-unified #keyboard svg{height:32px}
 .harmony-unified footer{padding-top:4px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
 #progression-panel .progression-content{grid-template-rows:36px 38px 20px 24px minmax(100px,1fr) 46px 30px;gap:3px}
 #progression-panel .progression-tools button,#progression-panel .progression-targets button{min-height:0;padding:3px}
 #progression-panel .progression-beats span{min-height:0;padding:1px}
 #progression-panel #progression-feedback{height:46px}
 #progression-panel #progression-keyboard svg{height:29px}
}
@media(max-height:450px) and (min-width:600px){
 .harmony-unified .roots{grid-template-columns:repeat(12,minmax(0,1fr))}
 .harmony-unified .roots button{min-height:32px;padding:3px}
 #progression-panel .progression-content{grid-template-columns:1fr 1fr;grid-template-rows:34px 24px minmax(60px,1fr) 32px;gap:3px 8px}
 #progression-panel .progression-context{grid-row:2;grid-column:1}
 #progression-panel .progression-beats{grid-row:2;grid-column:2}
 #progression-panel .progression-choices{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr}
 #progression-panel #progression-feedback{grid-column:1;height:32px}
 #progression-panel #progression-feedback-title{font-size:11px;line-height:12px}
 #progression-panel #progression-keyboard svg{height:20px}
 #progression-panel #progression-status{grid-column:2}
}