/* B077PA — compact desktop density for Harmonic Movement.
   Uses the existing visual system; essential interaction fits before optional theory. */
.explanation{display:block}
.explanation>summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 20px;
  gap:10px;
  align-items:center;
  padding:13px 16px;
  cursor:pointer;
  list-style:none;
}
.explanation>summary::-webkit-details-marker{display:none}
.explanation>summary .section-label{margin:0;color:#8cbaff}
.explanation>summary strong{font-size:.8rem;font-weight:660}
.explanation-chevron{color:#718096;text-align:center;font-size:1rem}
.explanation[open] .explanation-chevron{transform:rotate(45deg)}
.supporting-grid{display:grid;grid-template-columns:.8fr 1.6fr;gap:30px;padding:0 20px 20px}
.supporting-grid .explanation-copy>p{margin:0;color:#939dab;font-size:.8rem;line-height:1.5}

@media (min-width:1181px) and (min-height:820px){
  html.cwProgressionModernFamily .lesson-content{
    padding-top:17px!important;
    padding-bottom:14px!important;
  }
  html.cwProgressionModernFamily .lesson-intro{
    gap:24px!important;
    padding-bottom:14px!important;
  }
  html.cwProgressionModernFamily .lesson-intro .eyebrow{margin-bottom:4px!important}
  html.cwProgressionModernFamily .lesson-intro h1{
    margin-bottom:5px!important;
    font-size:2.35rem!important;
  }
  html.cwProgressionModernFamily .lesson-summary{
    font-size:.88rem!important;
    line-height:1.35!important;
  }
  html.cwProgressionModernFamily .objective{padding:10px 13px!important}
  html.cwProgressionModernFamily .objective p{font-size:.74rem!important;line-height:1.32!important}

  html.cwProgressionModernFamily .start-card{
    min-height:0!important;
    margin-bottom:10px!important;
    padding:9px 14px!important;
  }
  html.cwProgressionModernFamily .start-heading p:last-child{font-size:.74rem!important;line-height:1.28!important}
  html.cwProgressionModernFamily select,
  html.cwProgressionModernFamily .segmented{height:34px!important}

  html.cwProgressionModernFamily .activity{padding:12px 14px!important}
  html.cwProgressionModernFamily .activity-toolbar{margin-bottom:9px!important}
  html.cwProgressionModernFamily .activity-toolbar .section-label{margin-bottom:2px!important}
  html.cwProgressionModernFamily .activity-toolbar h2{font-size:1rem!important}
  html.cwProgressionModernFamily .activity-grid{
    grid-template-columns:270px minmax(0,1fr)!important;
    gap:12px!important;
  }
  html.cwProgressionModernFamily .control-panel{gap:8px!important}
  html.cwProgressionModernFamily .control-section{padding:10px!important}
  html.cwProgressionModernFamily .control-title{margin-bottom:7px!important}
  html.cwProgressionModernFamily .inversion-options{gap:4px!important}
  html.cwProgressionModernFamily .inversion-option{
    grid-template-columns:27px 1fr!important;
    gap:7px!important;
    min-height:43px!important;
    padding:5px 7px!important;
  }
  html.cwProgressionModernFamily .option-icon{width:26px!important;height:26px!important}
  html.cwProgressionModernFamily .inversion-option strong{font-size:.71rem!important}
  html.cwProgressionModernFamily .inversion-option small{font-size:.6rem!important}
  html.cwProgressionModernFamily .listen-item{min-height:39px!important;padding:4px 6px!important}
  html.cwProgressionModernFamily .notice-card{
    margin-top:0!important;
    padding:8px 10px!important;
  }
  html.cwProgressionModernFamily .notice-card p{font-size:.68rem!important;line-height:1.3!important}

  html.cwProgressionModernFamily .workspace{gap:7px!important}
  html.cwProgressionModernFamily .chord-step{
    min-height:48px!important;
    padding:6px 8px!important;
  }
  html.cwProgressionModernFamily .chord-step-index{width:22px!important;height:22px!important}
  html.cwProgressionModernFamily .chord-step strong{font-size:.76rem!important}
  html.cwProgressionModernFamily .chord-step small{font-size:.59rem!important}
  html.cwProgressionModernFamily .keyboard-card{padding:9px 10px 7px!important}
  html.cwProgressionModernFamily .keyboard-heading{margin-bottom:7px!important}
  html.cwProgressionModernFamily .piano{height:166px!important}
  html.cwProgressionModernFamily .keyboard-legend{margin-top:5px!important}
  html.cwProgressionModernFamily .live-feedback{
    min-height:52px!important;
    padding:7px 9px!important;
  }
  html.cwProgressionModernFamily .live-feedback p{font-size:.7rem!important;line-height:1.3!important}

  html.cwProgressionModernFamily .explanation{margin-top:9px!important}
  html.cwProgressionModernFamily .explanation>summary{padding:9px 13px!important}
  html.cwProgressionModernFamily .why-card{margin-top:8px!important}
  html.cwProgressionModernFamily .why-card summary{padding:9px 13px!important}
  html.cwProgressionModernFamily .summary-icon{width:25px!important;height:25px!important}
  html.cwProgressionModernFamily .lesson-footer{display:none!important}
}

@media (min-width:901px) and (max-height:819px){
  html.cwProgressionModernFamily .explanation>summary{padding:9px 13px}
  html.cwProgressionModernFamily .supporting-grid{gap:18px;padding:0 14px 14px}
  html.cwProgressionModernFamily .lesson-footer{display:none}
}

@media (max-width:1180px){
  .supporting-grid{grid-template-columns:1fr;gap:16px}
}