/*
  ChordWalk Academy — shared rebuild layer
  ----------------------------------------
  This is the single visual source of truth for every legacy lesson family.
  Family styles keep only the geometry needed by their musical diagrams.
  Colour, type, navigation, surfaces, controls and responsive behaviour live here.
*/

@font-face{
  font-family:Inter;
  src:url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

html.cwLearningSystem{
  color-scheme:dark;
  --cw-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cw-bg:#07090d;
  --cw-rail:#090c11;
  --cw-surface:#0d1117;
  --cw-surface-raised:#111620;
  --cw-surface-soft:#0a0e14;
  --cw-border:rgba(170,187,214,.14);
  --cw-border-strong:rgba(170,194,229,.26);
  --cw-text:#f4f6fa;
  --cw-text-soft:#c3cad5;
  --cw-muted:#8a95a6;
  --cw-subtle:#697588;
  --cw-blue:#78adf0;
  --cw-blue-soft:#a7ccff;
  --cw-violet:#9a8cff;
  --cw-violet-soft:#bcb4ff;
  --cw-yellow:#f2d55c;
  --cw-green:#63d391;
  --cw-orange:#f1a85f;
  --cw-radius:10px;
  --cw-shadow:0 24px 70px rgba(0,0,0,.28);
  background:var(--cw-bg);
  font-family:var(--cw-font)!important;
}

html.cwLearningSystem *,html.cwLearningSystem *::before,html.cwLearningSystem *::after{box-sizing:border-box}
html.cwLearningSystem body{
  min-width:0!important;
  min-height:100vh!important;
  background:
    radial-gradient(900px 430px at 82% -180px,rgba(128,101,255,.075),transparent 68%),
    radial-gradient(760px 380px at 42% -190px,rgba(73,145,255,.06),transparent 70%),
    var(--cw-bg)!important;
  background-attachment:fixed!important;
  color:var(--cw-text)!important;
  font-family:var(--cw-font)!important;
  font-size:16px;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html.cwLearningSystem.cwStandaloneFamily body.cwViewportManaged,
html.cwLearningSystem body.cwAcademyHome.cwViewportManaged{
  background:
    radial-gradient(900px 430px at 82% -180px,rgba(128,101,255,.075),transparent 68%),
    radial-gradient(760px 380px at 42% -190px,rgba(73,145,255,.06),transparent 70%),
    var(--cw-bg)!important;
}
html.cwLearningSystem :where(button,input,select,textarea,summary){font:inherit!important}
html.cwLearningSystem :where(button,a,select,summary){touch-action:manipulation}
html.cwLearningSystem :where(button,a,select,input,summary):focus-visible{outline:2px solid var(--cw-blue)!important;outline-offset:3px!important}
html.cwLearningSystem :where(h1,h2,h3,h4){font-family:var(--cw-font)!important;color:var(--cw-text)!important;text-wrap:balance}
html.cwLearningSystem :where(p,li){text-wrap:pretty}

/* Shared Academy rail */
html.cwLearningSystem :where(.side,.academyNav,.cwkUnifiedSide){
  scrollbar-width:thin;
  scrollbar-color:#344052 transparent;
}
html.cwLearningSystem :where(.side,.academyNav,.cwkUnifiedSide){
  border-right:1px solid #181e28!important;
  background:rgba(8,11,16,.96)!important;
  box-shadow:none!important;
}
html.cwLearningSystem :where(.cwAcademyBrandLockup,.academyBrand){
  min-height:58px!important;
  margin:0 4px 18px!important;
  padding:4px 0 13px!important;
  border-bottom:1px solid var(--cw-border)!important;
  color:var(--cw-text)!important;
  font-family:var(--cw-font)!important;
  font-size:1.15rem!important;
  font-weight:760!important;
  letter-spacing:-.035em!important;
  background:none!important;
}
html.cwLearningSystem .cwAcademyBrandLockup>img{width:auto!important;max-width:178px!important;height:32px!important;object-fit:contain!important;object-position:left center!important}
html.cwLearningSystem .cwAcademyBrandLockup>span{display:none!important}
html.cwLearningSystem :where(.cwAcademyBrandLockup,.academyBrand)::before,
html.cwLearningSystem :where(.cwAcademyBrandLockup,.academyBrand)::after{display:none!important;content:none!important}
html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup{
  height:58px!important;
  min-height:58px!important;
  margin:0 4px 18px!important;
  padding:4px 0 13px!important;
  background:none!important;
}
html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup::before,
html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup::after{display:none!important;content:none!important}
html.cwLearningSystem body :is(.side,.cw-global-side,.academyNav,.cwkUnifiedSide)>.cwAcademyBrandLockup>img{display:block!important}
html.cwLearningSystem :where(.cwAcademyToolsTitle,.cwAcademyRoadmapTitle,.navLabel,.navTitle){
  color:var(--cw-subtle)!important;
  font-size:.66rem!important;
  font-weight:720!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
html.cwLearningSystem :where(.cwAcademyTools,.cwAcademyRoadmap){font-family:var(--cw-font)!important}
html.cwLearningSystem :where(.cwAcademyToolButton,.cwAcademyToolSearch,.cwAcademyToolGrid button){
  border-color:var(--cw-border)!important;
  border-radius:7px!important;
  background:#0d1118!important;
  color:#aeb7c5!important;
  box-shadow:none!important;
}
html.cwLearningSystem .cwAcademyToolSearch input{background:transparent!important;color:var(--cw-text)!important}
html.cwLearningSystem .cwAcademyToolSearch button{border-radius:6px!important;background:#eef2f8!important;color:#111720!important}
html.cwLearningSystem :where(.cwAcademyRoadmapStage,.cwAcademyRoadmapGroup,.cwAcademyRoadmap a,.mainBtn){border-radius:7px!important;box-shadow:none!important}
html.cwLearningSystem :where(.cwAcademyRoadmapStage,.cwAcademyRoadmapGroup){border-color:transparent!important;background:transparent!important}
html.cwLearningSystem :where(.cwAcademyRoadmap a,.mainBtn){color:#98a3b3!important;transition:background-color .18s ease,color .18s ease,border-color .18s ease!important}
html.cwLearningSystem :where(.cwAcademyRoadmap a,.mainBtn):hover{background:#111720!important;color:var(--cw-text)!important}
html.cwLearningSystem :where(.cwAcademyRoadmap a.active,.cwAcademyRoadmap .active,.mainBtn.active){
  border-color:#2d4e76!important;
  background:#111d2d!important;
  color:#edf4ff!important;
}

/* One consistent top navigation */
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar{
  position:sticky!important;
  top:0!important;
  z-index:2147482500!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  width:100%!important;
  max-width:none!important;
  min-height:64px!important;
  margin:0!important;
  padding:0 30px!important;
  border:0!important;
  border-bottom:1px solid rgba(41,49,64,.72)!important;
  border-radius:0!important;
  background:rgba(7,9,13,.86)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.018)!important;
  backdrop-filter:blur(20px) saturate(125%)!important;
  font-family:var(--cw-font)!important;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#aeb6c4!important;
  box-shadow:none!important;
  font-size:.76rem!important;
  font-weight:620!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease!important;
}
html.cwLearningSystem body .cwAcademyLessonNav .cwUnifiedNavControl:hover{background:#121720!important;color:var(--cw-text)!important;filter:none!important}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar::before{
  content:"Lesson navigation";
  margin-right:auto;
  color:#78869a;
  font-size:.66rem;
  font-weight:680;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavAbout{
  color:#929eaf!important;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavMenu{
  border-color:#2b3442!important;
  background:#0e131b!important;
  color:#c0c9d6!important;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavPrevious{
  margin-left:10px!important;
  border-color:#354052!important;
  background:#0c1118!important;
  color:#d8dfea!important;
  box-shadow:-11px 0 0 -10px #303948!important;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavNext:not(.disabled){
  margin-left:2px!important;
  border-color:rgba(226,233,255,.52)!important;
  background:linear-gradient(135deg,#91c7ff 0%,#a394ff 100%)!important;
  color:#0a0e16!important;
  box-shadow:0 6px 18px rgba(92,111,229,.2),inset 0 1px 0 rgba(255,255,255,.46)!important;
  font-weight:730!important;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavPrevious:hover{
  border-color:#5b6b82!important;
  background:#151b24!important;
  color:#fff!important;
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavNext:not(.disabled):hover{
  border-color:#eef2ff!important;
  background:linear-gradient(135deg,#afd7ff 0%,#b9adff 100%)!important;
  color:#060910!important;
  transform:translateY(-1px);
}
html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl:focus-visible{
  outline:2px solid #9abfff!important;
  outline-offset:2px!important;
}
html.cwLearningSystem body .cwAcademyLessonNav .disabled{opacity:.42!important}

/* Compact learning objective used by every family */
html.cwLearningSystem body .cwLessonOrientation{
  position:relative!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:18px 0 14px!important;
  padding:14px 16px!important;
  overflow:visible!important;
  border:1px solid #292842!important;
  border-radius:var(--cw-radius)!important;
  background:linear-gradient(110deg,rgba(104,84,205,.105),rgba(38,73,124,.055) 65%,rgba(14,18,25,.14))!important;
  box-shadow:inset 2px 0 0 rgba(154,140,255,.48),0 12px 34px rgba(19,12,52,.08)!important;
}
html.cwLearningSystem body .cwLessonOrientationMeta{margin-bottom:5px!important;color:var(--cw-subtle)!important;font-size:.7rem!important;letter-spacing:.08em!important}
html.cwLearningSystem body .cwLessonOrientationOutcome small{
  display:block!important;
  margin-bottom:4px!important;
  background:linear-gradient(90deg,var(--cw-blue),var(--cw-violet))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  font-size:.68rem!important;
  font-weight:760!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}
html.cwLearningSystem body .cwLessonOrientationOutcome strong{display:block!important;color:#d9dde5!important;font-size:.86rem!important;line-height:1.45!important}
html.cwLearningSystem body .cwLessonOrientation button{min-height:34px!important;border:1px solid var(--cw-border)!important;border-radius:6px!important;background:#11161d!important;color:#bdc5d1!important;box-shadow:none!important;font-size:.7rem!important}

/* Shared content surfaces and hierarchy */
html.cwLearningSystem :where(.card,.panel,.hero,.formulaBox,.resultBox,.footer,.keyboardPanel,.lessonCard,.studio,.chooser,.stage,.messageCard,.visualCard,.exercisePanel,.summaryPanel,.cwKeyboardCard,.cwFeedbackPanel,.cwDisclosure,.cwCompletion){
  border-color:var(--cw-border)!important;
  border-radius:var(--cw-radius)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 38%),var(--cw-surface)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.018),0 18px 55px rgba(0,0,0,.08)!important;
}
html.cwLearningSystem :where(.card,.panel,.hero,.lessonCard,.studio,.chooser,.stage,.messageCard,.visualCard,.exercisePanel,.summaryPanel){height:auto!important;max-height:none!important;overflow:visible!important}
html.cwLearningSystem :where(.cwLessonPage,.wrap,.content,.assessmentMain,.modContent,.introMain){max-width:1500px!important}
html.cwLearningSystem :where(.eyebrow,.step,.guideHeading,.cwLessonEyebrow,.cwSectionLabel,.sectionLabel,.sectionTitle,.gpsTitle){
  color:var(--cw-blue)!important;
  font-family:var(--cw-font)!important;
  font-size:.72rem!important;
  font-weight:720!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}
html.cwLearningSystem :where(h1,.lessonTitle h1,.chooser h1,.introTop h1){
  color:var(--cw-text)!important;
  font-size:clamp(2rem,3.4vw,3.25rem)!important;
  font-weight:710!important;
  letter-spacing:-.05em!important;
  line-height:1.03!important;
}
html.cwLearningSystem :where(.lead,.copy,.context,.lessonTitle p,.introTop p){color:#b8c0cc!important;font-size:.95rem!important;line-height:1.58!important}
html.cwLearningSystem :where(.haIntroPanel.message,.cwLessonMessage,.why,.takeaway,.notice,.listenFor,.keyIdea,.cwCurrentMove){
  border-color:#2d2945!important;
  border-left:2px solid rgba(154,140,255,.55)!important;
  border-radius:8px!important;
  background:linear-gradient(120deg,rgba(76,62,142,.105),rgba(14,18,25,.32))!important;
  box-shadow:none!important;
}
html.cwLearningSystem :where(.haIntroPanel.message> b,.messageHeading,.takeaway b,.why b,.notice b,.keyIdea b){color:var(--cw-violet-soft)!important}

/* Controls: white primary, blue selected, neutral secondary */
html.cwLearningSystem :where(button,.btn,select,input[type="button"],input[type="submit"]){
  border-radius:7px!important;
  box-shadow:none!important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
html.cwLearningSystem :where(button,.btn):not(.white-key):not(.black-key){min-height:38px}
html.cwLearningSystem :where(button,.btn):not(.primary):not(.good):not(.cwPrimaryButton):not(.cwUnifiedNavNext):not(.cwCanvasHit):not(.cwHearingStageHit):not(.keyHit):not(.white-key):not(.black-key):not([data-ui="hit-area"]){border-color:var(--cw-border-strong)!important;background:#0c1118!important;color:#b7c0cd!important}
html.cwLearningSystem :where(button,.btn):not(.primary):not(.good):not(.cwPrimaryButton):not(.cwUnifiedNavNext):not(.cwCanvasHit):not(.cwHearingStageHit):not(.keyHit):not(.white-key):not(.black-key):not([data-ui="hit-area"]):hover{border-color:#445268!important;background:#121923!important;color:var(--cw-text)!important}
html.cwLearningSystem :where(button.primary,button.good,a.primary,a.good,input.primary,input.good,.btn.primary,.btn.good,.cwPrimaryButton){border-color:#f0f3f8!important;background:#f0f3f8!important;color:#11151c!important}
html.cwLearningSystem :where(button.primary,button.good,a.primary,a.good,input.primary,input.good,.btn.primary,.btn.good,.cwPrimaryButton):hover{background:#fff!important;color:#080a0d!important}
html.cwLearningSystem :where(button.active,.btn.active,[aria-pressed="true"],.selected):not(.cwCanvasHit):not(.cwHearingStageHit):not(.keyHit):not([data-ui="hit-area"]){border-color:#3b6596!important;background:#13233a!important;color:#eaf3ff!important;box-shadow:inset 0 -2px 0 rgba(111,168,255,.72)!important}
html.cwLearningSystem :where(select,input,textarea){border:1px solid var(--cw-border-strong)!important;border-radius:7px!important;background:#0a0e14!important;color:var(--cw-text)!important;box-shadow:none!important}

/*
  Diagram hit areas are controls for accessibility, not visible buttons.  Keep
  them transparent so the canvas/SVG artwork beneath remains visible.
*/
html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"]){
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border-color:transparent!important;
  border-radius:5px!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
}
html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"]):hover,
html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"])[aria-pressed="true"],
html.cwLearningSystem :where(button.cwCanvasHit,button.cwHearingStageHit,button.keyHit,[data-ui="hit-area"]).active{
  border-color:transparent!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
}

/* Music remains the only place for yellow or green emphasis. */
html.cwLearningSystem :where(.tone,.semi,.current,.activeNote,.currentNote,.newest,.bass,.tonic,.dominant,.subdominant){text-shadow:none!important}
html.cwLearningSystem :where(.tone,.current,.newest,.bass){--music-accent:var(--cw-yellow)}
html.cwLearningSystem :where(.success,.correct,.complete,.completed){--status-accent:var(--cw-green)}

/* Foundation family: title and objective never compete for width. */
html.cwLearningSystem.cwFoundationFamily .main{padding:0 30px 54px!important}
html.cwLearningSystem.cwFoundationFamily .wrap{width:min(1500px,100%)!important;margin:0!important;padding-top:18px!important;gap:14px!important}
html.cwLearningSystem.cwFoundationFamily .haIntroGrid{
  grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr)!important;
  gap:10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html.cwLearningSystem.cwFoundationFamily .haTitlePanel{padding:17px 18px!important;background:var(--cw-surface)!important}
html.cwLearningSystem.cwFoundationFamily .haIntroPanel{padding:17px 18px!important}
html.cwLearningSystem.cwFoundationFamily .haPathDisclosure{grid-column:1/-1!important;padding:12px 15px!important;background:var(--cw-surface-soft)!important}
html.cwLearningSystem.cwFoundationFamily .haPathDisclosure:not([open]){max-height:48px!important;overflow:hidden!important}
html.cwLearningSystem.cwFoundationFamily .haTitlePanel h1{font-size:clamp(1.9rem,3vw,2.75rem)!important;overflow-wrap:normal!important}
html.cwLearningSystem.cwFoundationFamily .haStackedLesson{grid-template-columns:minmax(330px,.75fr) minmax(520px,1.25fr)!important;gap:14px!important}
html.cwLearningSystem.cwFoundationFamily .haKeyboardArea>.card:not(:first-child){margin-top:0!important}

/* Focused comparisons: keep the interaction and keyboard together. */
html.cwLearningSystem.cwFocusedFamily .academyShell{grid-template-columns:248px minmax(0,1fr)!important;background:transparent!important}
html.cwLearningSystem.cwFocusedFamily .lesson{width:auto!important;max-width:none!important;padding:0 30px 54px!important}
html.cwLearningSystem.cwFocusedFamily .lessonHeader{margin-top:18px!important;grid-template-columns:minmax(320px,.7fr) minmax(460px,1.3fr)!important;gap:14px!important}
html.cwLearningSystem.cwFocusedFamily .actionPanel{margin-top:14px!important}
html.cwLearningSystem.cwFocusedFamily .demo{margin-top:14px!important;grid-template-rows:auto auto minmax(280px,auto)!important}
html.cwLearningSystem.cwFocusedFamily .takeaway{margin-top:14px!important}

/* Chord construction and application workspaces. */
html.cwLearningSystem.cwApplicationFamily .main{padding:0 30px 54px!important}
html.cwLearningSystem.cwApplicationFamily :where(.top,.controlbar,.content,.workspace){width:min(1500px,100%)!important;margin-left:0!important;margin-right:0!important}
html.cwLearningSystem.cwApplicationFamily .top{margin-top:18px!important}
html.cwLearningSystem.cwApplicationFamily .row{gap:14px!important}
html.cwLearningSystem.cwApplicationFamily :where(.card,.panel,.infoLite,.keyboardPanel,.canvasCard){border-radius:var(--cw-radius)!important}

/* Standalone families share the same left-aligned content measure. */
html.cwLearningSystem.cwStandaloneFamily .main{padding:0 30px 54px!important}
html.cwLearningSystem.cwStandaloneFamily :where(.top,.gpsPanel,.modContent,.workspace,.introMain,.content,.assessmentMain){width:min(1500px,100%)!important;margin-left:0!important;margin-right:0!important}
html.cwLearningSystem.cwStandaloneFamily :where(.top,.introTop){margin-top:18px!important}

/* Rhythm and modulation: activity first, theory is visually quieter. */
html.cwLearningSystem.cwRhythmFamily .workspace{grid-template-columns:minmax(290px,.64fr) minmax(0,1.36fr)!important;gap:14px!important}
html.cwLearningSystem.cwRhythmFamily .lessonCard{padding:18px!important}
html.cwLearningSystem.cwRhythmFamily .studio{padding:16px!important}
html.cwLearningSystem.cwRhythmFamily :where(.timelineWrap,.demonstration,.metronomePane,.newConcept,.readoutRow,.visualMetronomeWrap){border-color:var(--cw-border)!important;background:var(--cw-surface-soft)!important}
html.cwLearningSystem.cwRhythmFamily .metronomePane.transportOnly .transport,
html.cwLearningSystem.cwModulationFamily .transport{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important}
html.cwLearningSystem.cwRhythmFamily .cwTransportIcon,
html.cwLearningSystem.cwModulationFamily .cwTransportIcon{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:70px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 11px!important;
  overflow:visible!important;
  border-radius:7px!important;
  font-size:.72rem!important;
  line-height:1!important;
  text-indent:0!important;
  white-space:nowrap!important;
}
html.cwLearningSystem.cwRhythmFamily .cwTransportIcon::before,
html.cwLearningSystem.cwRhythmFamily .cwTransportIcon::after,
html.cwLearningSystem.cwModulationFamily .cwTransportIcon::before,
html.cwLearningSystem.cwModulationFamily .cwTransportIcon::after{display:none!important;content:none!important}
html.cwLearningSystem.cwModulationFamily .lessonGrid{grid-template-columns:minmax(300px,.68fr) minmax(0,1.32fr)!important;gap:14px!important}
html.cwLearningSystem.cwModulationFamily :where(.degreeBoard,.chordTonesPanel,.transport,.stepCard){border-color:var(--cw-border)!important;background:var(--cw-surface-soft)!important}

/* Reading and introduction pages: shorter lines and progressive disclosure. */
html.cwLearningSystem.cwReadingFamily .introMain{max-width:1220px!important;padding-bottom:64px!important}
html.cwLearningSystem.cwReadingFamily .introTop h1{max-width:900px!important}
html.cwLearningSystem.cwReadingFamily .messageCard{max-width:720px!important}
html.cwLearningSystem.cwIntroFlowFamily .main{max-width:1500px!important;margin:0!important}
html.cwLearningSystem.cwStandaloneFamily body.cwViewportIntroduction .main{margin-left:0!important}
html.cwLearningSystem.cwStandaloneFamily body.cwViewportIntroduction:has(>.cw-global-side)>.app{margin-left:0!important}
html.cwLearningSystem.cwIntroFlowFamily .stage{grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr)!important;gap:14px!important}
html.cwLearningSystem.cwIntroFlowFamily .answer{max-width:65ch!important}

/* Mastery keeps the prompt and response as the primary working surface. */
html.cwLearningSystem.cwMasteryFamily :where(.content,.assessmentMain){margin-left:0!important;margin-right:0!important}
html.cwLearningSystem.cwMasteryFamily :where(.compactAssessmentBar,.exercisePanel,.summaryPanel){border-color:var(--cw-border)!important;background:var(--cw-surface)!important}
html.cwLearningSystem.cwMasteryFamily :where(.prompt,.answerArea,.feedback,.resultBanner,.visual){border-color:var(--cw-border-strong)!important;background:var(--cw-surface-soft)!important;box-shadow:none!important}
html.cwLearningSystem.cwMasteryFamily .choice{border-color:var(--cw-border)!important;background:#0c1118!important;color:var(--cw-text-soft)!important}
html.cwLearningSystem.cwMasteryFamily .choice:hover{border-color:#44648c!important;background:#111b29!important;color:var(--cw-text)!important}

/* Lesson menus become scannable lists rather than dense walls of boxes. */
html.cwLearningSystem :where(.lessonOverlay,.cwAcademyOverlay,#cwAcademyIntroductionOverlay){background:rgba(3,5,8,.82)!important;backdrop-filter:blur(12px)!important}
html.cwLearningSystem :where(.menuPanel,.cwAcademyIntroductionPage,.cwAcademyRoadmapDialog){
  border:1px solid var(--cw-border-strong)!important;
  border-radius:12px!important;
  background:#0b1017!important;
  box-shadow:var(--cw-shadow)!important;
}
html.cwLearningSystem :where(.menuGroup,.menuLesson,.cwAcademyIntroductionGrid article,.cwAcademyPathGrid div){
  border-color:var(--cw-border)!important;
  border-radius:8px!important;
  background:var(--cw-surface)!important;
  box-shadow:none!important;
}
html.cwLearningSystem :where(.menuLesson,.cwAcademyPathGrid div):hover{border-color:#3a5577!important;background:#101923!important}

/* Welcome page uses the same system, without presenting as a pop-up. */
html.cwLearningSystem body.cwAcademyHome #cwAcademyIntroductionOverlay{
  position:absolute!important;
  inset:0 0 0 248px!important;
  padding:28px 34px 54px!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionPage{
  width:min(1220px,100%)!important;
  max-height:none!important;
  margin:0!important;
  padding:40px!important;
  border-color:var(--cw-border)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.012),transparent 38%),var(--cw-surface)!important;
}
html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionGrid{gap:12px!important}
html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionGrid article{padding:18px!important}
html.cwLearningSystem body.cwAcademyHome :where(.cwAcademyJourney button,.cwAcademyWelcomeReturn,.cwAcademyExploreLesson){border-radius:7px!important;box-shadow:none!important}
html.cwLearningSystem body.cwAcademyHome .cwAcademyExploreLesson{
  border-color:#f0f3f8!important;
  background:#f0f3f8!important;
  color:#11151c!important;
}
html.cwLearningSystem body.cwAcademyHome .cwAcademyExploreLesson:hover{background:#fff!important;color:#080a0d!important}
html.cwLearningSystem body.cwAcademyHome .cwAcademyWelcomeReturn{border-color:var(--cw-border-strong)!important;background:#0c1118!important;color:var(--cw-text-soft)!important}

/* Reusable course rail — one hierarchy, with the active path's lessons inline. */
html.cwLearningSystem :where(.side,.cw-global-side,.academyNav,.cwkUnifiedSide){
  padding:18px 12px 22px!important;
}
html.cwLearningSystem .cwAcademyTools{
  margin:0 0 16px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html.cwLearningSystem .cwAcademyToolsTitle{margin:0 6px 8px!important}
html.cwLearningSystem .cwAcademyMainLabel{margin:0 7px 8px!important}
html.cwLearningSystem .cwAcademyStage{
  margin:2px 0!important;
  border:0!important;
  background:transparent!important;
}
html.cwLearningSystem .cwAcademyStage>summary{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 14px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:46px!important;
  padding:7px 8px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#9aa4b4!important;
  cursor:pointer!important;
  list-style:none!important;
}
html.cwLearningSystem .cwAcademyStage>summary::-webkit-details-marker{display:none!important}
html.cwLearningSystem .cwAcademyStage>summary::after{
  content:"+"!important;
  grid-column:3!important;
  grid-row:1!important;
  color:#637087!important;
  font-size:.82rem!important;
  font-weight:500!important;
}
html.cwLearningSystem .cwAcademyStage[open]>summary::after{content:"−"!important}
html.cwLearningSystem .cwAcademyStage>summary>span{
  display:grid!important;
  grid-row:1/span 2!important;
  place-items:center!important;
  width:27px!important;
  height:27px!important;
  border:1px solid var(--cw-border)!important;
  border-radius:7px!important;
  color:#748198!important;
  font-size:.63rem!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums!important;
}
html.cwLearningSystem .cwAcademyStage>summary>b{
  grid-column:2!important;
  color:inherit!important;
  font-size:.76rem!important;
  font-weight:650!important;
  line-height:1.2!important;
}
html.cwLearningSystem .cwAcademyStage>summary>.cwStageProgress{
  grid-column:2!important;
  color:#647187!important;
  font-size:.61rem!important;
  line-height:1.2!important;
}
html.cwLearningSystem .cwAcademyStage>summary:hover,
html.cwLearningSystem .cwAcademyStage[open]>summary{
  border-color:rgba(255,255,255,.06)!important;
  background:rgba(255,255,255,.028)!important;
  color:#edf1f7!important;
}
html.cwLearningSystem .cwAcademyStageItems{
  margin:3px 0 10px 14px!important;
  padding:1px 0 1px 13px!important;
  border-left:1px solid rgba(120,173,240,.16)!important;
}
html.cwLearningSystem .cwStagePathLabel{
  padding:7px 8px 3px!important;
  color:#68758a!important;
  font-size:.6rem!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 12px!important;
  min-height:38px!important;
  margin:1px 0!important;
  padding:7px 8px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#909bad!important;
  font-size:.7rem!important;
  font-weight:600!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton::before{display:none!important}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton::after{
  content:"›"!important;
  grid-column:2!important;
  color:#617089!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton small{
  grid-column:1!important;
  color:#657187!important;
  font-size:.59rem!important;
  font-weight:450!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton:hover{
  border-color:rgba(255,255,255,.055)!important;
  background:rgba(255,255,255,.032)!important;
  color:#eef3fa!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton.active{
  border-color:rgba(120,173,240,.2)!important;
  background:linear-gradient(100deg,rgba(68,111,180,.2),rgba(110,87,190,.07))!important;
  color:#f4f7fb!important;
  box-shadow:inset 2px 0 0 var(--cw-blue)!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton[aria-expanded="true"]{
  background:#171d29!important;
  border-color:#64748b!important;
  color:#f8fafc!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton[aria-expanded="true"]::after{
  color:#b8c7dc!important;
  transform:rotate(90deg)!important;
}
html.cwLearningSystem .cwAcademyStageItems>.cwAcademyCategoryButton.active[aria-expanded="true"]{
  border-color:rgba(120,173,240,.32)!important;
  background:linear-gradient(100deg,rgba(68,111,180,.2),rgba(110,87,190,.07))!important;
  box-shadow:inset 2px 0 0 var(--cw-blue)!important;
}
html.cwLearningSystem .cwStageLessonList{
  display:grid!important;
  gap:1px!important;
  margin:3px 0 7px 5px!important;
  padding:3px 0 3px 9px!important;
  border-left:1px solid rgba(170,187,214,.12)!important;
}
html.cwLearningSystem .cwStageLessonList[hidden]{display:none!important}
html.cwLearningSystem .cwStageLessonListLabel{
  padding:4px 6px!important;
  color:#66758b!important;
  font-size:.58rem!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
html.cwLearningSystem .cwStageLessonLink{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:start!important;
  gap:4px!important;
  min-width:0!important;
  padding:6px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#7f8a9b!important;
  font-size:.66rem!important;
  font-weight:520!important;
  line-height:1.3!important;
  text-decoration:none!important;
}
html.cwLearningSystem .cwStageLessonLink>span{
  color:#60718a!important;
  font-size:.59rem!important;
  font-variant-numeric:tabular-nums!important;
}
html.cwLearningSystem .cwStageLessonLink:hover{background:rgba(255,255,255,.035)!important;color:#eef3fa!important}
html.cwLearningSystem .cwStageLessonLink.active{
  background:rgba(87,132,203,.13)!important;
  color:#dceaff!important;
}
html.cwLearningSystem .cwStageIntroductionLink{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  margin:0 0 4px!important;
  padding:8px 6px!important;
  border:1px solid rgba(154,139,255,.25)!important;
  border-radius:6px!important;
  background:rgba(154,139,255,.08)!important;
  color:#d9ddff!important;
  font:600 .66rem/1.3 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  text-align:left!important;
  cursor:pointer!important;
}
html.cwLearningSystem .cwStageIntroductionLink>span{
  display:grid!important;
  place-items:center!important;
  width:19px!important;
  height:19px!important;
  border:1px solid rgba(174,190,255,.45)!important;
  border-radius:50%!important;
  color:#cbd4ff!important;
  font-size:.65rem!important;
  font-weight:750!important;
}
html.cwLearningSystem .cwStageIntroductionLink:hover,
html.cwLearningSystem .cwStageIntroductionLink:focus-visible{
  border-color:rgba(174,190,255,.6)!important;
  background:rgba(154,139,255,.14)!important;
  color:#fff!important;
  outline:none!important;
}

/* On-demand lesson guides share the same restrained, readable panel system. */
html.cwLearningSystem #cwAcademyIntroductionOverlay{font-family:var(--cw-font)!important}
html.cwLearningSystem #cwAcademyIntroductionOverlay .cwAcademyIntroductionPage{
  width:min(1040px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 32px)!important;
  padding:clamp(20px,3vw,34px)!important;
  border-radius:12px!important;
  background:#0b1017!important;
}
html.cwLearningSystem #cwAcademyIntroductionOverlay .cwAcademyIntroductionKicker{
  background:linear-gradient(90deg,var(--cw-blue),var(--cw-violet))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  font-family:var(--cw-font)!important;
  font-size:.69rem!important;
  font-weight:720!important;
  letter-spacing:.12em!important;
}
html.cwLearningSystem #cwAcademyIntroductionOverlay h1{
  margin:9px 0 8px!important;
  font-size:clamp(2rem,4vw,3.3rem)!important;
  font-weight:690!important;
  letter-spacing:-.05em!important;
}
html.cwLearningSystem #cwAcademyIntroductionOverlay .cwAcademyIntroductionQuestion{
  max-width:760px!important;
  color:#c6ced9!important;
  font-size:clamp(1.05rem,1.8vw,1.35rem)!important;
  font-weight:480!important;
  line-height:1.5!important;
}

@media(max-width:1120px){
  html.cwLearningSystem.cwFoundationFamily .haIntroGrid{grid-template-columns:1fr!important}
  html.cwLearningSystem.cwFoundationFamily .haPathDisclosure{grid-column:1!important}
  html.cwLearningSystem.cwFoundationFamily .haStackedLesson{grid-template-columns:minmax(290px,.72fr) minmax(430px,1.28fr)!important}
  html.cwLearningSystem.cwFocusedFamily .lessonHeader{grid-template-columns:1fr!important}
}

@media(max-width:900px){
  html.cwLearningSystem body{margin-left:0!important}
  html.cwLearningSystem.cwFoundationFamily body.cwViewportFoundation.cwViewportDense.cwkUnifiedMenu{margin-left:0!important}
  html.cwLearningSystem body.cwkUnifiedMenu{width:100%!important;max-width:100%!important;margin-left:0!important}
  html.cwLearningSystem body.cwkUnifiedMenu>.app{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important}
  html.cwLearningSystem :where(.side,.academyNav,.cwkUnifiedSide,.cw-global-side){display:none!important}
  html.cwLearningSystem body.cwkUnifiedMenu>.cw-global-side{display:none!important}
  html.cwLearningSystem.cwStandaloneFamily body .app>.side{display:none!important}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar{padding:0 16px!important}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar::before{content:"";min-width:78px}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavAbout{display:inline-flex!important}
  html.cwLearningSystem.cwFoundationFamily .main,
  html.cwLearningSystem.cwFocusedFamily .lesson,
  html.cwLearningSystem.cwApplicationFamily .main,
  html.cwLearningSystem.cwStandaloneFamily .main{padding:0 18px 44px!important}
  html.cwLearningSystem.cwFoundationFamily .haStackedLesson,
  html.cwLearningSystem.cwRhythmFamily .workspace,
  html.cwLearningSystem.cwModulationFamily .lessonGrid,
  html.cwLearningSystem.cwIntroFlowFamily .stage{grid-template-columns:1fr!important}
  html.cwLearningSystem.cwRhythmFamily body .workspace{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%!important}
  html.cwLearningSystem.cwRhythmFamily body .workspace>.cwLessonOrientation,
  html.cwLearningSystem.cwRhythmFamily body .workspace>.lessonCard,
  html.cwLearningSystem.cwRhythmFamily body .workspace>.studio{grid-column:1/-1!important;width:100%!important;max-width:100%!important;min-width:0!important}
  html.cwLearningSystem body.cwAcademyHome #cwAcademyIntroductionOverlay{inset:0!important;padding:16px!important}
}

@media(max-width:760px){
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:0!important;gap:6px!important;padding:8px 10px 10px!important}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar::before{content:"";display:block;grid-column:1/-1;width:100%;height:40px;min-width:0;margin:0!important}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl{width:100%!important;min-height:38px!important;padding:0 8px!important;font-size:.72rem!important}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavAbout{order:1}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavMenu{order:2}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavPrevious{order:3;max-width:none!important;margin-left:0!important;overflow:visible!important;box-shadow:none!important}
  html.cwLearningSystem body .cwAcademyLessonNav.cwUnifiedLessonBar>.cwUnifiedNavControl.cwUnifiedNavNext{order:4;margin-left:0!important}
}

@media(max-width:640px){
  html.cwLearningSystem :where(h1,.lessonTitle h1,.chooser h1,.introTop h1){font-size:clamp(1.8rem,9vw,2.5rem)!important}
  html.cwLearningSystem.cwFoundationFamily .main,
  html.cwLearningSystem.cwFocusedFamily .lesson,
  html.cwLearningSystem.cwApplicationFamily .main,
  html.cwLearningSystem.cwStandaloneFamily .main{padding-left:12px!important;padding-right:12px!important}
  html.cwLearningSystem body.cwAcademyHome .cwAcademyIntroductionPage{padding:22px 18px!important}
}

@media(prefers-reduced-motion:reduce){
  html.cwLearningSystem *,html.cwLearningSystem *::before,html.cwLearningSystem *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Keyboard geometry system: consistent proportions for one-octave, comparison and extended instruments. */
html.cwLearningSystem.cwScalePilot .cwKeyboardCard>.keyboard,
html.cwLearningSystem.cwFoundationFamily .haKeyboardArea .keyboard{
  width:min(100%,780px)!important;
  height:auto!important;
  min-height:160px!important;
  max-height:280px!important;
  aspect-ratio:2.8 / 1!important;
  margin-right:auto!important;
  margin-left:auto!important;
}

html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard{
  width:min(100%,900px)!important;
  height:300px!important;
  min-height:0!important;
  max-height:300px!important;
  margin-right:auto!important;
  margin-left:auto!important;
}
html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow{
  height:230px!important;
}
html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .haAlignedTonicStrip{
  width:min(100%,900px)!important;
  margin-right:auto!important;
  margin-left:auto!important;
}

html.cwLearningSystem.cwFocusedFamily .demo{
  grid-template-rows:auto auto auto!important;
}
html.cwLearningSystem.cwFocusedFamily .demo>.choiceStrip,
html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{
  width:min(100%,1180px)!important;
  margin-right:auto!important;
  margin-left:auto!important;
}
html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{
  height:auto!important;
  min-height:220px!important;
  max-height:290px!important;
  aspect-ratio:4 / 1!important;
}

html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel{
  grid-template-rows:auto auto!important;
  min-height:0!important;
}
html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel>.keyboard{
  width:100%!important;
  height:auto!important;
  min-height:220px!important;
  max-height:330px!important;
  aspect-ratio:4.2 / 1!important;
}
html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel>.keyboard>.blackKey{
  height:58%!important;
  min-height:0!important;
  max-height:58%!important;
}

/* B077OO — keyboard paint ownership.
   These lesson engines own their musical overlays and note-role colours.
   Shared surface styling may size the instrument, but must not repaint it. */
html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key,
html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key{
  min-height:0!important;
}
html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key{
  border-width:0 1px 0 0!important;
  border-color:#88919d!important;
  background:linear-gradient(90deg,#f1f3f6,#dfe3e8 53%,#f6f7f8)!important;
  color:#171b22!important;
}
html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key.highlight-tone{
  background:linear-gradient(180deg,#dceaff,#9dc4fb)!important;
}
html.cwLearningSystem.cwProgressionModernFamily .piano>.white-key.highlight-bass{
  background:linear-gradient(180deg,#fff8c7,#f2d55c)!important;
  box-shadow:inset 0 0 0 2px #d4b83a!important;
}
html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key{
  border-color:#05070a!important;
  background:linear-gradient(90deg,#07090c,#1d222a 54%,#050608)!important;
  color:#b8c0cc!important;
}
html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key.highlight-tone{
  border-color:#78adf0!important;
  background:linear-gradient(180deg,#34679f,#162c48)!important;
  color:#e9f3ff!important;
}
html.cwLearningSystem.cwProgressionModernFamily .piano>.black-key.highlight-bass{
  border-color:#ffe878!important;
  background:linear-gradient(180deg,#d9bd42,#776014)!important;
  color:#fff8d8!important;
  box-shadow:0 0 18px rgba(242,213,92,.32)!important;
}
html.cwLearningSystem.cwModulationFamily #keyboard>.noteOverlay,
html.cwLearningSystem.cwModulationFamily #keyboard>.whiteKey>.noteOverlay,
html.cwLearningSystem.cwModulationFamily #keyboard>.blackKey>.noteOverlay{
  display:block!important;
  visibility:visible!important;
}

@media(max-width:640px){
  html.cwLearningSystem.cwScalePilot .cwKeyboardCard>.keyboard,
  html.cwLearningSystem.cwFoundationFamily .haKeyboardArea .keyboard{
    min-height:150px!important;
    max-height:190px!important;
    aspect-ratio:2.35 / 1!important;
  }
  html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .keyboard{
    height:260px!important;
    max-height:260px!important;
  }
  html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard .whiteRow{
    height:190px!important;
  }
  html.cwLearningSystem.cwFocusedFamily .demo{
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  html.cwLearningSystem.cwFocusedFamily .demo>.choiceStrip,
  html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{
    width:690px!important;
    min-width:690px!important;
    max-width:690px!important;
  }
  html.cwLearningSystem.cwFocusedFamily .demo>.keyboard{
    height:210px!important;
    min-height:210px!important;
    max-height:210px!important;
    aspect-ratio:auto!important;
  }
  html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel{
    display:block!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  html.cwLearningSystem.cwModulationFamily #modContent .keyboardPanel>.keyboard{
    width:760px!important;
    min-width:760px!important;
    max-width:none!important;
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
    aspect-ratio:auto!important;
  }
}

/* B077OA — one course rail and one keyboard sizing contract.
   Legacy lesson files may retain their original class names, but the shared
   runtime marks the active rail and each rendered instrument with these
   semantic classes.  Family files no longer decide the final proportions. */
html.cwLearningSystem .cwLegacyRailSuppressed{display:none!important}
html.cwLearningSystem .cwCourseRail{
  width:248px!important;
  min-width:248px!important;
  max-width:248px!important;
  height:100vh!important;
  padding:18px 12px 22px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border-right:1px solid #181e28!important;
  background:#080b10!important;
  box-shadow:none!important;
  scrollbar-width:thin!important;
  scrollbar-color:#344052 transparent!important;
}
html.cwLearningSystem .cwCourseRail>.cwAcademyBrandLockup{margin-bottom:18px!important}
html.cwLearningSystem .cwCourseRail .cwAcademyStage,
html.cwLearningSystem .cwCourseRail .cwAcademyCategoryButton,
html.cwLearningSystem .cwCourseRail .cwStageLessonLink{font-family:var(--cw-font)!important}

html.cwLearningSystem .cwKeyboardViewport{
  min-width:0!important;
  max-width:100%!important;
}
html.cwLearningSystem .cwKeyboardInstrument{
  box-sizing:border-box!important;
  margin-right:auto!important;
  margin-left:auto!important;
  transform:none!important;
}
html.cwLearningSystem .cwKeyboardOctave{
  width:min(100%,780px)!important;
  height:auto!important;
  min-height:160px!important;
  max-height:280px!important;
  aspect-ratio:2.8 / 1!important;
}
html.cwLearningSystem .cwKeyboardOctave>.whiteRow{
  width:100%!important;
}
html.cwLearningSystem .cwKeyboardOctave>.whiteRow>:is(.white,.w){
  flex:1 1 0!important;
  min-width:0!important;
}
html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated{
  width:min(100%,780px)!important;
  height:284px!important;
  min-height:284px!important;
  max-height:284px!important;
  aspect-ratio:auto!important;
  padding:54px 18px 16px!important;
}
html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  height:214px!important;
}
html.cwLearningSystem .cwKeyboardCompactExtended{
  width:min(100%,1080px)!important;
  height:auto!important;
  min-height:210px!important;
  max-height:280px!important;
  aspect-ratio:4 / 1!important;
}
html.cwLearningSystem .cwKeyboardTwoOctave{
  width:min(100%,1100px)!important;
  height:auto!important;
  min-height:200px!important;
  max-height:280px!important;
  aspect-ratio:4.05 / 1!important;
}
html.cwLearningSystem .cwKeyboardWide{
  width:min(100%,1180px)!important;
  height:auto!important;
  min-height:220px!important;
  max-height:300px!important;
  aspect-ratio:4.65 / 1!important;
}
html.cwLearningSystem :is(.cwKeyboardCompactExtended,.cwKeyboardTwoOctave,.cwKeyboardWide)>.blackKey,
html.cwLearningSystem :is(.cwKeyboardCompactExtended,.cwKeyboardTwoOctave,.cwKeyboardWide)>.black-key{
  height:60%!important;
  min-height:0!important;
  max-height:60%!important;
}

@media(max-width:1180px){
  html.cwLearningSystem body .cwKeyboardViewport{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important}
  html.cwLearningSystem .cwKeyboardCompactExtended{width:700px!important;min-width:700px!important;height:210px!important;min-height:210px!important;max-height:210px!important;aspect-ratio:auto!important}
  html.cwLearningSystem .cwKeyboardTwoOctave{width:760px!important;min-width:760px!important;height:210px!important;min-height:210px!important;max-height:210px!important;aspect-ratio:auto!important}
  html.cwLearningSystem .cwKeyboardWide{width:920px!important;min-width:920px!important;height:230px!important;min-height:230px!important;max-height:230px!important;aspect-ratio:auto!important}
}

@media(max-width:900px){
  html.cwLearningSystem .cwCourseRail{display:none!important}
  html.cwLearningSystem .cwKeyboardOctave{width:min(100%,620px)!important;min-height:150px!important;max-height:220px!important;aspect-ratio:2.55 / 1!important}
  html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated{width:620px!important;min-width:620px!important;height:250px!important;min-height:250px!important;max-height:250px!important;padding:48px 14px 14px!important}
  html.cwLearningSystem .cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{height:188px!important}
}

html.cwLearningSystem .cwKeyboardInstrument.cwKeyboardFixedMap{
  width:calc(var(--whiteW) * 15)!important;
  min-width:calc(var(--whiteW) * 15)!important;
  max-width:none!important;
  height:calc(var(--whiteH) + 2px)!important;
  min-height:calc(var(--whiteH) + 2px)!important;
  max-height:calc(var(--whiteH) + 2px)!important;
  aspect-ratio:auto!important;
}
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwKeyboardInstrument.cwKeyboardFixedMap{
  --whiteH:218px!important;
  height:220px!important;
  min-height:220px!important;
  max-height:220px!important;
}
html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated{
  width:min(100%,780px)!important;
  min-width:0!important;
  max-width:780px!important;
  height:284px!important;
  min-height:284px!important;
  max-height:284px!important;
  padding:54px 18px 16px!important;
}
html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  width:100%!important;
  height:214px!important;
}
html.cwLearningSystem.cwModulationFamily #modContent .cwKeyboardViewport>.cwKeyboardWide{
  width:min(100%,1180px)!important;
  min-width:0!important;
  max-width:1180px!important;
  height:auto!important;
  min-height:220px!important;
  max-height:300px!important;
  aspect-ratio:4.65 / 1!important;
}

/* B077OQ — all Interval lessons share the primary full-width keyboard.
   Its compact height keeps the complete lesson visible at the reference viewport. */
html.cwLearningSystem .cwIntervalKeyboardCard>.intervalKeyboard.cwKeyboardInstrument{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:220px!important;
  min-height:220px!important;
  max-height:220px!important;
  aspect-ratio:auto!important;
}
@media(max-width:760px){
  html.cwLearningSystem .cwIntervalKeyboardCard>.intervalKeyboard.cwKeyboardInstrument{
    width:760px!important;
    min-width:760px!important;
    max-width:760px!important;
  }
}
@media(max-width:1180px){
  html.cwLearningSystem.cwModulationFamily #modContent .cwKeyboardViewport>.cwKeyboardWide{
    width:920px!important;
    min-width:920px!important;
    max-width:920px!important;
    height:230px!important;
    min-height:230px!important;
    max-height:230px!important;
    aspect-ratio:auto!important;
  }
}
@media(max-width:900px){
  html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated{
    width:620px!important;
    min-width:620px!important;
    max-width:620px!important;
    height:250px!important;
    min-height:250px!important;
    max-height:250px!important;
    padding:48px 14px 14px!important;
  }
  html.cwLearningSystem.cwFoundationFamily.ha-tonic .haTonicKeyboard>.cwKeyboardOctave.cwKeyboardAnnotated>.whiteRow{height:188px!important}
}