/* Start Composing: keep the four-bar teaching surface visible at lesson entry. */
@media (min-width: 901px) {
  html.cwRhythmFamily .studio { display:flex!important; flex-direction:column!important; gap:7px!important; }
  html.cwRhythmFamily .studioHeader { order:1; }
  html.cwRhythmFamily .metronomePane { order:2; }
  html.cwRhythmFamily .visualMetronomeWrap { order:3; }
  html.cwRhythmFamily .timelineWrap { order:4; }
  html.cwRhythmFamily .newConcept { order:5; }
  html.cwRhythmFamily .readoutRow { order:6; }
  html.cwRhythmFamily .demonstration { order:7; }
  html.cwRhythmFamily .timelineWrap { min-height:0!important; height:auto!important; overflow-x:auto!important; }
  html.cwRhythmFamily .timeline { height:clamp(155px,21vh,220px)!important; min-height:155px!important; }
  html.cwRhythmFamily .studioHeader { min-height:0!important; }
  html.cwRhythmFamily .studioHeader .eyebrow { margin:0!important; }
  html.cwRhythmFamily .studioHeader h2 { margin:2px 0!important; }
  html.cwRhythmFamily .visualMetronomeWrap { padding:4px 6px!important; }
}
@media (max-width: 900px) {
  html.cwRhythmFamily .studio { display:flex!important; flex-direction:column!important; }
  html.cwRhythmFamily .studioHeader { order:1; }
  html.cwRhythmFamily .metronomePane { order:2; }
  html.cwRhythmFamily .visualMetronomeWrap { order:3; }
  html.cwRhythmFamily .timelineWrap { order:4; min-height:0!important; }
  html.cwRhythmFamily .newConcept { order:5; }
  html.cwRhythmFamily .readoutRow { order:6; }
  html.cwRhythmFamily .demonstration { order:7; }
  html.cwRhythmFamily .timeline { height:200px!important; min-height:180px!important; }
}

/* Let the control content set its height instead of reserving empty rows. */
@media (min-width: 901px) {
  html.cwRhythmFamily .studio { gap:5px!important; padding:9px!important; }
  html.cwRhythmFamily .newConcept { height:auto!important; min-height:70px!important; max-height:none!important; padding:7px 9px!important; gap:7px!important; overflow:visible!important; }
  html.cwRhythmFamily .guidedArp { height:auto!important; min-height:0!important; max-height:none!important; display:flex!important; flex-direction:column!important; justify-content:center!important; padding:5px!important; overflow:visible!important; }
  html.cwRhythmFamily .guidedArp .focusRow { min-height:38px!important; width:100%!important; }
  html.cwRhythmFamily .guidedArp .focusSummary { min-height:38px!important; padding:5px 8px!important; }
  html.cwRhythmFamily .guidedArp .arpMainRow:not(.focusRow),
  html.cwRhythmFamily .guidedArp .arpDetailRow { min-height:34px!important; }
  html.cwRhythmFamily .newConcept .lessonControls { align-items:stretch!important; }
  html.cwRhythmFamily .demonstration { height:auto!important; min-height:54px!important; padding:5px!important; }
  html.cwRhythmFamily .demonstration :where(.demoMessage,.chordDisplay,.statusBox) { padding:5px 7px!important; }
  html.cwRhythmFamily .demonstration .toneRow { height:34px!important; }
  html.cwRhythmFamily .demonstration .tone { width:31px!important; height:31px!important; }
}