/* B077TV: ordered original Rectangle lesson CSS; active only for this lesson. */

:root{
  --bg:#06101e;--panel:#132745;--panel2:#091426;--line:#436a98;--text:#f7fbff;
  --muted:#c9d9ee;--blue:#67a1ff;--orange:#ff9a31;--green:#71e37e;--purple:#c06cff;
  --red:#ff5d5d;--yellow:#ffe36d;--whiteW:76px;--blackW:46px;--whiteH:180px;--blackH:110px;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 0 0,#17345e 0%,var(--bg) 45%,#02050b 100%);font-family:Arial,system-ui,sans-serif;color:var(--text)}
.main{min-height:100vh;padding:22px}.wrap{max-width:1540px;margin:auto}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 30px #0007;margin-bottom:16px}
.hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.eyebrow,.card h2{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:#9fd0ff;font-weight:950;margin:0 0 12px}
h1{font-size:clamp(38px,4.4vw,64px);line-height:.96;margin:8px 0 10px}
.lead{font-size:20px;line-height:1.34;color:#e8f2ff;max-width:1120px;margin:0}
.lesson{border:1px solid var(--line);border-radius:16px;background:#071426;padding:14px 22px;text-align:center;min-width:168px}
.lesson b{display:block;color:var(--purple);font-size:23px;margin-bottom:7px}.lesson span{font-weight:950;font-size:18px}
.blue{color:var(--blue);font-weight:950}.orange{color:var(--orange);font-weight:950}.green{color:var(--green);font-weight:950}.purple{color:var(--purple);font-weight:950}.yellow{color:var(--yellow);font-weight:950}
.copy{font-size:18px;line-height:1.42;color:#e9f2ff;margin:7px 0}
.keyRow{display:grid;grid-template-columns:repeat(11,1fr);gap:10px;margin-top:14px}
.keyBtn{border:1px solid var(--line);border-radius:14px;background:#07101f;color:#fff;min-height:82px;padding:9px;cursor:pointer;text-align:center;font-weight:950}
.keyBtn .name{font-size:24px}.keyBtn .t{font-size:13px;margin-top:5px;color:#cfe0f5}
.keyBtn.active{background:#2d2450;border-color:#d9a3ff;box-shadow:0 0 18px #c06cff77;transform:translateY(-2px)}
.grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.relationships{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rel{background:#07101f;border:2px solid var(--blue);border-radius:16px;text-align:center;padding:12px;min-height:105px}
.rel.iv{border-color:var(--orange)}.rel.v{border-color:var(--green)}.rel.vi{border-color:var(--purple)}
.rel .roman{font-size:22px;font-weight:950}.rel .chord{font-size:36px;font-weight:950;margin:3px 0}.rel .formula{font-size:15px;font-weight:950}.rel .label{font-size:12px;color:#e1edff}
.scaleStrip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:10px}
.deg{background:#07101f;border:2px solid #415f89;border-radius:12px;text-align:center;padding:9px 3px;font-weight:950}
.deg.i{border-color:var(--blue)}.deg.iv{border-color:var(--orange)}.deg.v{border-color:var(--green)}.deg.vi{border-color:var(--purple)}.deg.soft{border-color:var(--red)}
.deg .rn{font-size:17px}.deg .note{font-size:22px;margin-top:3px}
.keyboardShell{background:#020712;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:16px 18px 20px}
.legend{text-align:center;font-size:16px;margin-bottom:12px;color:#e9f2ff}
.viewport{overflow-x:auto;padding-top:10px}
.keyboard{position:relative;width:calc(var(--whiteW) * 15);height:var(--whiteH);margin:auto}
.whiteRow{position:absolute;inset:0;display:flex;z-index:1}
.white{position:relative;width:var(--whiteW);height:var(--whiteH);background:linear-gradient(90deg,#e8e8e8,#fff,#dedede);border:1px solid #aaa;border-radius:0 0 8px 8px;color:#06101e;display:flex;align-items:flex-end;justify-content:center;padding-bottom:34px;font-size:24px;font-weight:950;flex:none}
.black{position:absolute;top:0;width:var(--blackW);height:var(--blackH);background:linear-gradient(#272727,#020202);border:1px solid #333;border-radius:0 0 8px 8px;z-index:9;color:#fff;text-align:center;font-size:13px;font-weight:950;padding-top:62px;box-shadow:0 10px 16px #000a}
.badge{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);border-radius:999px;padding:3px 8px;font-size:12px;color:#fff;background:#0a1424;border:1px solid currentColor}
.hlI{box-shadow:inset 0 0 0 4px var(--blue),0 0 15px #67a1ff99!important}.hlI .badge{background:#123f91;color:#fff}
.hlIV{box-shadow:inset 0 0 0 4px var(--orange),0 0 15px #ff9a3199!important}.hlIV .badge{background:#f5821f;color:#fff}
.hlV{box-shadow:inset 0 0 0 4px var(--green),0 0 15px #71e37e99!important}.hlV .badge{background:#43b650;color:#fff}
.hlVI{box-shadow:inset 0 0 0 4px var(--purple),0 0 15px #c06cff99!important}.hlVI .badge{background:#8c45d9;color:#fff}
.theoryGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.theory{background:#07101f;border:1px solid var(--line);border-radius:14px;padding:14px}
.theory .rule{font-size:24px;font-weight:950;margin-bottom:4px}.theory .label{font-size:13px;color:#e1edff}
.footer{font-size:12px;color:#c8d6ea;margin-top:12px}
@media(max-width:980px){.grid,.theoryGrid{grid-template-columns:1fr}.keyRow{grid-template-columns:repeat(3,1fr)}.main{padding:14px}:root{--whiteW:66px;--blackW:41px}}

.enharmonicNote{margin-top:10px;text-align:center;color:#9fd0ff;font-weight:900;font-size:15px}
.deg{min-height:82px;padding:12px 4px!important}
.deg .rn{font-size:18px!important;margin-bottom:8px}
.deg .note{font-size:24px!important;line-height:1.05}
.keyboardTitleNote{font-size:14px;color:#dfeeff;text-align:center;font-weight:900;margin-bottom:10px}

/* B062D tonic strip relationship map */
.keyRow{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  overflow-x:auto!important;
  padding-bottom:8px!important;
  scrollbar-width:thin;
}
.keyBtn{
  flex:0 0 102px!important;
  min-height:96px!important;
  position:relative!important;
}
.keyBtn .role{
  display:block;
  font-size:18px;
  font-weight:950;
  margin-top:6px;
  min-height:20px;
}
.keyBtn.roleI{
  border-color:var(--blue)!important;
  box-shadow:0 0 18px #67a1ff88!important;
}
.keyBtn.roleIV{
  border-color:var(--orange)!important;
  box-shadow:0 0 18px #ff9a3188!important;
}
.keyBtn.roleV{
  border-color:var(--green)!important;
  box-shadow:0 0 18px #71e37e88!important;
}
.keyBtn.roleVI{
  border-color:var(--purple)!important;
  box-shadow:0 0 18px #c06cff88!important;
}
.keyBtn.roleI .role{color:var(--blue)}
.keyBtn.roleIV .role{color:var(--orange)}
.keyBtn.roleV .role{color:var(--green)}
.keyBtn.roleVI .role{color:var(--purple)}
.stripLegend{
  margin-top:8px;
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:#dfeeff;
}
.stripLegend span{margin:0 8px;white-space:nowrap}
@media(max-width:980px){
  .keyRow{grid-template-columns:none!important}
  .keyBtn{flex-basis:96px!important}
}

/* B062E completion pass: compact one-focus learning area */
.main{padding:14px!important}
.card{padding:13px!important;margin-bottom:10px!important;border-radius:15px!important}
.hero{align-items:center!important}
h1{font-size:clamp(30px,3.4vw,46px)!important;margin:4px 0 6px!important}
.lead{font-size:17px!important;line-height:1.25!important}
.lesson{padding:10px 16px!important;min-width:140px!important}
.lesson b{font-size:19px!important;margin-bottom:4px!important}
.lesson span{font-size:15px!important}
.eyebrow,.card h2{font-size:11px!important;letter-spacing:4px!important;margin-bottom:8px!important}
.copy{font-size:15px!important;line-height:1.28!important;margin:4px 0!important}
.keyBtn{flex:0 0 92px!important;min-height:78px!important;padding:7px!important}
.keyBtn .name{font-size:22px!important}
.keyBtn .t{font-size:12px!important;margin-top:3px!important}
.keyBtn .role{font-size:16px!important;margin-top:4px!important}
.stripLegend{font-size:13px!important;margin-top:4px!important}
.enharmonicNote{font-size:12px!important;margin-top:5px!important}
.focusGrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:10px;align-items:stretch}
.relationships{grid-template-columns:repeat(4,1fr)!important;gap:7px!important}
.rel{min-height:86px!important;padding:8px!important;border-radius:13px!important}
.rel .roman{font-size:16px!important}
.rel .chord{font-size:28px!important;margin:2px 0!important}
.rel .formula{font-size:12px!important}
.rel .label{font-size:10px!important}
.scaleStrip{gap:6px!important;margin-top:4px!important}
.deg{min-height:70px!important;padding:9px 3px!important}
.deg .rn{font-size:16px!important;margin-bottom:9px!important}
.deg .note{font-size:21px!important;line-height:1.05!important}
#scaleLine{font-size:13px!important;margin-top:6px!important}
.keyboardShell{padding:10px 12px 12px!important}
.legend{font-size:13px!important;margin-bottom:7px!important}
.keyboardTitleNote{font-size:12px!important;margin-bottom:6px!important}
:root{--whiteW:70px!important;--blackW:42px!important;--whiteH:142px!important;--blackH:84px!important}
.keyboard{height:var(--whiteH)!important}
.white{font-size:20px!important;padding-bottom:27px!important}
.black{font-size:11px!important;padding-top:47px!important}
.badge{bottom:5px!important;font-size:10px!important;padding:2px 7px!important}
.black .badge{bottom:3px!important;font-size:9px!important;padding:1px 5px!important}
.theoryGrid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.theory{padding:10px!important}
.theory .rule{font-size:18px!important}
.theory .label{font-size:11px!important}
@media(max-width:1100px){
  .focusGrid{grid-template-columns:1fr!important}
  .relationships{grid-template-columns:repeat(2,1fr)!important}
  .theoryGrid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:760px){
  .keyBtn{flex-basis:86px!important}
  :root{--whiteW:62px!important;--blackW:38px!important}
}

/* B062F keyboard readability pass */
:root{
  --whiteH:164px!important;
  --blackH:94px!important;
}
.keyboardShell{
  padding:10px 12px 14px!important;
}
.keyboard{
  height:var(--whiteH)!important;
}
.white{
  height:var(--whiteH)!important;
  padding-bottom:44px!important;
  font-size:22px!important;
  align-items:flex-end!important;
}
.white > div:first-child{
  transform:translateY(-7px);
}
.black{
  height:var(--blackH)!important;
  padding-top:55px!important;
  font-size:12px!important;
}
.badge{
  bottom:10px!important;
  min-width:34px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:15px!important;
  font-weight:950!important;
  padding:3px 9px!important;
  border-radius:999px!important;
}
.black .badge{
  bottom:5px!important;
  min-width:30px!important;
  height:24px!important;
  font-size:12px!important;
  padding:2px 7px!important;
}
.deg .rn{
  font-size:18px!important;
  margin-bottom:10px!important;
}
.deg .note{
  font-size:23px!important;
}
.legend{
  font-size:14px!important;
}
.keyboardTitleNote{
  font-size:13px!important;
}

/* B062G black-key separation */
.black{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding-top:18px!important;
}
.black .badge{
  position:absolute!important;
  top:8px!important;
  bottom:auto!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  min-width:30px!important;
  z-index:20!important;
}

/* B077GG scale audition + single-screen completion */
.coreTheoryCard{padding-top:9px!important;padding-bottom:9px!important;margin-bottom:0!important}
.coreTheoryCard h2{margin-bottom:5px!important}
.coreTheoryCard .theory{padding:7px 10px!important}
.coreTheoryCard .theory .rule{font-size:17px!important;margin-bottom:1px!important}
.coreTheoryCard .theory .label{font-size:10px!important}
.scalePlayed::after,.scalePulse::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  pointer-events:none;
  z-index:14;
}
.scalePlayed::after{
  background:rgba(103,161,255,.15);
  box-shadow:inset 0 0 0 2px rgba(159,208,255,.65);
}
.scalePulse::after{
  background:rgba(255,227,109,.46);
  box-shadow:inset 0 0 0 4px #ffe36d,0 0 20px #ffe36dcc;
}
.black.scalePlayed::after{background:rgba(103,161,255,.28)}
.black.scalePulse::after{background:rgba(255,227,109,.72)}
.white.scalePulse>div:first-child,.black.scalePulse{color:#07101f!important}
.deg.degreePlayed{
  background:linear-gradient(180deg,rgba(103,161,255,.22),#07101f);
  box-shadow:inset 0 0 0 2px rgba(159,208,255,.58);
}
.deg.degreePulse{
  background:linear-gradient(180deg,rgba(255,227,109,.58),rgba(255,227,109,.18));
  border-color:#ffe36d!important;
  box-shadow:inset 0 0 0 3px #ffe36d,0 0 20px #ffe36daa;
  color:#fff;
  transform:translateY(-2px);
}
.deg.degreePulse .rn,.deg.degreePulse .note{color:#fff;text-shadow:0 2px 4px #000}


.cwkUnifiedSide{position:fixed;left:0;top:0;bottom:0;width:270px;background:#0b1729;border-right:1px solid #416895;z-index:999999;overflow:auto;padding:13px 10px;font-family:Arial,system-ui,sans-serif;color:white;box-shadow:4px 0 18px #0008}
.cwkUnifiedSide .cwkBrand{font-size:28px;font-weight:950;line-height:.9;margin:3px 0 16px}.cwkUnifiedSide .cwkBrand span{display:block;color:#84c4ff}
.cwkUnifiedSide .cwkTitle{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#84c4ff;font-weight:950;margin:10px 0 8px}
.cwkUnifiedSide a{display:block;color:white;text-decoration:none;border:1px solid #416895;background:#091527;border-radius:11px;padding:9px 10px;margin:6px 0;font-weight:900;line-height:1.15}.cwkUnifiedSide a:hover{background:#173a66}.cwkUnifiedSide a.active{background:#31578f;border-color:#84c4ff;box-shadow:0 0 12px #84c4ff44}.cwkUnifiedSide .build{display:block;font-size:11px;color:#ffe36d;margin-top:3px}.cwkUnifiedSide .cwkCurrent{border-left:4px solid #ffe36d;background:#081424;border-radius:10px;padding:8px 10px;margin:0 0 12px;font-size:12px;line-height:1.25}.cwkUnifiedSide .cwkPN{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 13px}.cwkUnifiedSide .cwkPN a{text-align:center;margin:0;background:#31578f;border-color:#84c4ff}.cwkUnifiedSide .cwkPN a.disabled{opacity:.35;pointer-events:none;background:#091527;border-color:#416895}
body.cwkUnifiedMenu{margin-left:270px!important;padding-top:0!important;overflow:auto!important;min-width:1180px!important}
body.cwkUnifiedMenu .side{display:none!important}
body.cwkUnifiedMenu .app{display:block!important;grid-template-columns:none!important;height:auto!important;min-height:100vh!important;overflow:visible!important}
body.cwkUnifiedMenu .main{display:block!important;width:100%!important;max-width:none!important;padding:14px!important;overflow:visible!important}
body.cwkUnifiedMenu .wrap{margin-left:auto!important;margin-right:auto!important}
@media(max-width:900px){.cwkUnifiedSide{position:relative;width:auto;height:auto;border-right:0;border-bottom:1px solid #416895}.cwkUnifiedSide a{display:inline-block;margin:4px;vertical-align:top}.cwkUnifiedSide .cwkPN{display:flex}.cwkUnifiedSide .cwkPN a{display:inline-block}body.cwkUnifiedMenu{margin-left:0!important;min-width:0!important}.cwkUnifiedSide .build{display:none}}

/* ChordWalk Learning System — pilot component layer
   First used by Scale Discovery. The component names are intentionally generic
   so approved patterns can be migrated to other lesson families later. */

html.cwLearningSystem {
  color-scheme: dark;
  --cw-bg: #05070b;
  --cw-surface: #0b0f16;
  --cw-surface-raised: #101620;
  --cw-surface-soft: #141b27;
  --cw-border: rgba(174, 193, 219, 0.14);
  --cw-border-strong: rgba(166, 194, 235, 0.28);
  --cw-text: #f5f7fb;
  --cw-text-soft: #c6d0de;
  --cw-muted: #8d9aae;
  --cw-blue: #8fc5ff;
  --cw-violet: #b6a5ff;
  --cw-yellow: #f5d863;
  --cw-green: #77dea0;
  --cw-orange: #ffb36a;
  --cw-radius: 10px;
  --cw-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cw-bg);
}

html.cwLearningSystem *,
html.cwLearningSystem *::before,
html.cwLearningSystem *::after { box-sizing: border-box; }

html.cwLearningSystem body {
  margin: 0;
  min-width: 0 !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 62% -15%, rgba(77, 101, 155, 0.15), transparent 35rem),
    var(--cw-bg) !important;
  color: var(--cw-text);
  font-family: inherit !important;
}

html.cwLearningSystem button,
html.cwLearningSystem input,
html.cwLearningSystem summary { font: inherit; }

html.cwLearningSystem .app {
  min-width: 0 !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
}

@media (min-width: 901px) {
  html.cwLearningSystem .app {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    align-items: start !important;
  }
  html.cwLearningSystem .side {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    width: 248px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
  }
}

/* The first-paint stylesheet hides seed-brand children before shared navigation loads. */
html.cwLearningSystem body .side .cwAcademyBrandLockup > img {
  display: block !important;
}

html.cwLearningSystem .main {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* The shared Academy runtime owns these. This layer only makes its lesson
   header deliberately compact for the pilot. */
html.cwLearningSystem .main > .cwUnifiedLessonBar,
html.cwLearningSystem .main > .cwLessonOrientation {
  width: min(1320px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.cwLearningSystem .main > .cwUnifiedLessonBar {
  min-height: 52px !important;
  margin-top: 18px !important;
  margin-bottom: 12px !important;
  border-color: var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background: rgba(8, 11, 17, 0.92) !important;
  box-shadow: none !important;
}

html.cwLearningSystem .main > .cwLessonOrientation {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 11px 14px !important;
  border-color: var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background: rgba(9, 13, 20, 0.8) !important;
  box-shadow: none !important;
}

html.cwLearningSystem .cwLessonOrientationMeta {
  margin-bottom: 5px !important;
  color: var(--cw-muted) !important;
  font-size: 0.7rem !important;
}

html.cwLearningSystem .cwLessonOrientationOutcome small {
  background: linear-gradient(90deg, var(--cw-blue), var(--cw-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

html.cwLearningSystem .cwLessonOrientationOutcome strong {
  color: var(--cw-text-soft) !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
}

.cwLessonPage {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 64px;
}

.cwLessonHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 18px;
}

.cwLessonEyebrow,
.cwSectionLabel {
  margin: 0 0 7px;
  color: var(--cw-blue);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cwLessonHeader h1 {
  margin: 0;
  color: var(--cw-text);
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.cwLessonHeader p {
  max-width: 650px;
  margin: 9px 0 0;
  color: var(--cw-text-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.cwLessonProgress {
  min-width: 170px;
  padding: 10px 12px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  background: rgba(12, 17, 25, 0.72);
}

.cwLessonProgress span {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--cw-muted);
  font-size: 0.72rem;
}

.cwLessonProgress span b { color: var(--cw-text-soft); font-weight: 700; }
.cwLessonProgressTrack { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #222b38; }
.cwLessonProgressTrack i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cw-blue), var(--cw-violet)); transition: width 220ms ease; }

.cwStartBar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  background: var(--cw-surface);
}

.cwStartInstruction { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cwStartNumber {
  width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center;
  border: 1px solid rgba(143, 197, 255, 0.44); border-radius: 8px;
  background: linear-gradient(145deg, rgba(90, 138, 199, 0.26), rgba(145, 113, 208, 0.19));
  color: #dbeaff; font-size: 0.75rem; font-weight: 800;
}
.cwStartInstruction strong { display: block; color: var(--cw-text); font-size: 0.84rem; }
.cwStartInstruction p { margin: 2px 0 0; color: var(--cw-muted); font-size: 0.76rem; line-height: 1.35; }

.cwSegmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  background: #080c12;
}

.cwSegmented button,
.cwSecondaryButton,
.cwPrimaryButton,
.cwTextButton {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--cw-text-soft);
  background: transparent;
  font-size: 0.79rem;
  font-weight: 720;
  cursor: pointer;
}

.cwSegmented button:hover,
.cwSegmented button:focus-visible,
.cwSecondaryButton:hover,
.cwSecondaryButton:focus-visible,
.cwTextButton:hover,
.cwTextButton:focus-visible { color: white; background: var(--cw-surface-soft); outline: none; }

.cwSegmented button.active {
  color: white;
  background: linear-gradient(135deg, rgba(79, 122, 180, 0.62), rgba(104, 82, 159, 0.52));
  box-shadow: inset 0 0 0 1px rgba(177, 206, 248, 0.25);
}

.cwActionGroup { display: flex; align-items: center; gap: 6px; }
.cwPrimaryButton {
  color: #09101b;
  background: #f1f4f9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.cwPrimaryButton:hover,.cwPrimaryButton:focus-visible { background: white; outline: 2px solid var(--cw-blue); outline-offset: 2px; }
.cwSecondaryButton { border: 1px solid var(--cw-border); background: #0c1119; }
.cwTextButton { color: var(--cw-muted); }

.cwCompareButton {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  border: 1px solid var(--cw-border);
  border-radius: 6px;
  background: transparent;
  color: var(--cw-muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.cwCompareButton:hover,.cwCompareButton:focus-visible { border-color: var(--cw-border-strong); color: var(--cw-text); outline: none; }

.cwActivity {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.72fr);
  grid-template-areas: "keyboard feedback";
  gap: 12px;
  align-items: stretch;
}

.cwKeyboardCard,
.cwFeedbackPanel,
.cwDisclosure,
.cwCompletion {
  min-width: 0;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  background: var(--cw-surface);
  box-shadow: var(--cw-shadow);
}

.cwKeyboardCard { grid-area: keyboard; padding: 16px; }
.cwFeedbackPanel { grid-area: feedback; display: flex; flex-direction: column; padding: 16px; }

.cwPanelHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cwPanelHeading h2 { margin: 0; color: var(--cw-text); font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.cwPanelHeading p { margin: 3px 0 0; color: var(--cw-muted); font-size: 0.76rem; }
.cwPanelTag { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--cw-border); border-radius: 6px; color: var(--cw-muted); font-size: 0.68rem; font-weight: 700; }

.keyboard {
  --cwkBlackW: 7.5%;
  --cwkBlackH: 57%;
  position: relative;
  height: clamp(245px, 25vw, 330px);
  min-height: 245px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(143, 197, 255, 0.38);
  border-radius: 9px;
  background: #050911;
}

.whiteRow { display: flex; height: 100%; }
.w {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: 0 3px 36px;
  border: 1px solid #b4bdc8;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #dce3eb, #fbfdff 48%, #d4dce6);
  color: #10151d;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 800;
  text-align: center;
}
.w.selected,.w.target { z-index: 5; outline: 3px solid var(--cw-yellow); outline-offset: -3px; box-shadow: inset 0 0 0 999px rgba(245, 216, 99, 0.26); }
.w.completed { z-index: 2; box-shadow: inset 0 0 0 999px rgba(143, 197, 255, 0.30); }
.w.next { z-index: 4; outline: 3px solid var(--cw-blue); outline-offset: -3px; }
.w.target { outline-color: var(--cw-green); box-shadow: inset 0 0 0 999px rgba(119, 222, 160, 0.33); }
.b {
  position: absolute;
  top: 10px !important;
  z-index: 7;
  width: var(--cwkBlackW) !important;
  height: var(--cwkBlackH) !important;
  transform: translateX(-50%) !important;
  padding-top: 22px !important;
  border-radius: 0 0 6px 6px !important;
  background: linear-gradient(90deg, #0a0d12, #252b34 47%, #080a0e);
  box-shadow: 0 10px 18px rgba(0,0,0,.48) !important;
  color: #e8edf5;
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
}
.b.unused { opacity: .62; }
.b.skip { outline: 3px solid var(--cw-orange); outline-offset: -2px; background: linear-gradient(#e9a860,#7c4216); color: #fff; opacity: 1; }
.badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); min-width: 20px; padding: 3px 6px; border-radius: 99px; background: #111a26; color: white; font-size: 0.66rem; }
.arrowLayer { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.jump { position: absolute; top: 7px; display: flex; align-items: flex-start; justify-content: center; height: 58px; padding-top: 1px; border-top: 3px solid var(--cw-yellow); border-radius: 50% 50% 0 0; color: var(--cw-yellow); font-size: 0.72rem; font-weight: 800; }
.jump.semi { border-color: var(--cw-green); color: var(--cw-green); }
.cwKeyboardCaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; color: var(--cw-muted); font-size: 0.76rem; line-height: 1.4; }
.cwKeyboardLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.cwKeyboardLegend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cwKeyboardLegend i { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-blue); }
.cwKeyboardLegend span:nth-child(2) i { background: var(--cw-yellow); }
.cwKeyboardLegend span:nth-child(3) i { background: var(--cw-green); }

.cwCurrentMove {
  min-height: 108px;
  padding: 14px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(45, 68, 101, .2), rgba(73, 53, 105, .12));
}
.cwCurrentMove span { display: block; color: var(--cw-muted); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.cwCurrentMove p { margin: 8px 0 0; color: var(--cw-text); font-size: 1rem; line-height: 1.46; }
.cwCurrentMove p b { color: var(--cw-blue); }

.formulaStrip { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; margin: 12px 0; min-width: 0; }
.token { min-width: 0; min-height: 72px; overflow: hidden; padding: 8px 3px 6px; border: 1px solid var(--cw-border); border-radius: 7px; background: #090e15; text-align: center; }
.token b,.token span,.token small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token b { min-height: 18px; color: var(--cw-text); font-size: .75rem; }
.token span { margin-top: 4px; color: var(--cw-muted); font-size: .67rem; font-weight: 800; }
.token small { margin-top: 5px; color: var(--cw-muted); font-size: .62rem; }
.token.pending { opacity: .38; }
.token.tone b { color: var(--cw-blue); }
.token.semi b { color: var(--cw-yellow); }
.token.current { border-color: rgba(182,165,255,.72); background: rgba(104,82,159,.14); box-shadow: inset 0 2px 0 var(--cw-violet); }

.cwResultBlock { margin-top: auto; padding-top: 4px; }
.status { margin: 0; color: var(--cw-text-soft); font-size: .82rem; font-weight: 700; }
.notesResult { min-height: 24px; margin-top: 7px; color: var(--cw-text-soft); font-size: 1rem; font-weight: 720; letter-spacing: .08em; }
.result { min-height: 35px; margin-top: 3px; color: var(--cw-yellow); font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 760; letter-spacing: .11em; }

.cwDisclosure { margin-top: 12px; box-shadow: none; }
.cwDisclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; color: var(--cw-text-soft); font-size: .88rem; font-weight: 720; cursor: pointer; list-style: none; }
.cwDisclosure summary::-webkit-details-marker { display: none; }
.cwDisclosure summary::after { content: "+"; color: var(--cw-muted); font-size: 1.1rem; font-weight: 400; }
.cwDisclosure[open] summary::after { content: "−"; }
.cwDisclosure summary span { display: block; margin-top: 3px; color: var(--cw-muted); font-size: .74rem; font-weight: 500; }
.cwDisclosureContent { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.cwTheoryCard { padding: 14px; border: 1px solid var(--cw-border); border-radius: 8px; background: #090e15; }
.cwTheoryCard h3 { margin: 0 0 7px; color: var(--cw-blue); font-size: .86rem; }
.cwTheoryCard p { margin: 0; color: var(--cw-text-soft); font-size: .88rem; line-height: 1.58; }
.cwTheoryTakeaway { grid-column: 1/-1; padding: 12px 14px; border-left: 2px solid var(--cw-violet); border-radius: 7px; background: linear-gradient(90deg, rgba(111,92,164,.12), rgba(9,14,21,.45)); color: var(--cw-text-soft); font-size: .87rem; line-height: 1.5; }

.cwCompletion { margin-top: 12px; padding: 18px; box-shadow: none; }
.cwCompletion.hidden { display: none; }
.cwCompletion h2 { margin: 0; color: var(--cw-green); font-size: 1.1rem; }
.cwCompletionLead { margin: 6px 0 14px; color: var(--cw-text); font-size: 1rem; font-weight: 650; }
.cwSummaryTable { width: 100%; border-spacing: 0; overflow: hidden; border: 1px solid var(--cw-border); border-radius: 8px; }
.cwSummaryTable th,.cwSummaryTable td { padding: 11px 12px; border-bottom: 1px solid var(--cw-border); color: var(--cw-text-soft); font-size: .83rem; text-align: left; }
.cwSummaryTable tr:last-child td { border-bottom: 0; }
.cwSummaryTable th { color: var(--cw-muted); background: #090e15; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.cwSummaryTable td:last-child { color: var(--cw-yellow); font-weight: 750; letter-spacing: .08em; }

@media (max-width: 1120px) {
  .cwStartBar { grid-template-columns: 1fr auto; }
  .cwStartInstruction { grid-column: 1/-1; }
  .cwActivity { grid-template-columns: minmax(0,1fr) minmax(330px,.72fr); }
  .formulaStrip { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  html.cwLearningSystem .main > .cwUnifiedLessonBar,
  html.cwLearningSystem .main > .cwLessonOrientation,
  .cwLessonPage { width: min(100% - 28px, 760px) !important; }
  .cwLessonHeader { align-items: flex-start; flex-direction: column; }
  .cwLessonProgress { width: 100%; }
  .cwActivity { grid-template-columns: 1fr; grid-template-areas: "feedback" "keyboard"; }
  .cwFeedbackPanel { min-height: 0; }
  .formulaStrip { grid-template-columns: repeat(7,minmax(0,1fr)); }
  .keyboard { height: 280px; }
}

@media (max-width: 640px) {
  .cwLessonPage { padding-top: 18px; }
  .cwLessonHeader h1 { font-size: 2.15rem; }
  .cwStartBar { display: block; }
  .cwSegmented { margin: 12px 0 8px; }
  .cwSegmented button { flex: 1; }
  .cwActionGroup { display: grid; grid-template-columns: 1fr 1fr; }
  .cwPrimaryButton { grid-column: 1/-1; }
  .formulaStrip { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .keyboard { min-height: 220px; height: 56vw; padding: 7px; }
  .b { top: 7px !important; }
  .cwKeyboardCaption { display: block; }
  .cwKeyboardLegend { justify-content: flex-start; margin-top: 7px; }
  .cwDisclosureContent { grid-template-columns: 1fr; }
  .cwTheoryTakeaway { grid-column: auto; }
  .cwSummaryTable { display: block; overflow-x: auto; }
}

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

/* ChordWalk foundation-family adapter.
   Layout rules live here; page-local CSS is retained only for musical diagrams. */

html.cwFoundationFamily body {
  height: auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 0 0 248px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--cw-bg) !important;
  color: var(--cw-text) !important;
  font-family: var(--cw-font) !important;
}

html.cwFoundationFamily .app {
  display: block !important;
  min-width: 0 !important;
  min-height: 100vh !important;
}

html.cwFoundationFamily .app > .side,
html.cwFoundationFamily .cwkUnifiedSide { display: none !important; }

html.cwFoundationFamily .main {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  padding: 10px 14px 42px !important;
  overflow: visible !important;
}

html.cwFoundationFamily .wrap {
  display: grid !important;
  width: min(100%, 1320px) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  gap: 12px !important;
  overflow: visible !important;
}

html.cwFoundationFamily .hero,
html.cwFoundationFamily .card,
html.cwFoundationFamily .formulaBox,
html.cwFoundationFamily .resultBox,
html.cwFoundationFamily .footer,
html.cwFoundationFamily .haKeyMessage,
html.cwFoundationFamily .haAccidentalProgress {
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background: var(--cw-surface) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.cwFoundationFamily .card { padding: 16px !important; }
html.cwFoundationFamily .lesson { display: none !important; }
html.cwFoundationFamily h1,
html.cwFoundationFamily h2,
html.cwFoundationFamily h3 { color: var(--cw-text) !important; font-family: inherit !important; }
html.cwFoundationFamily h1 { margin: 5px 0 7px !important; font-size: clamp(2rem, 3vw, 2.8rem) !important; line-height: 1.04 !important; letter-spacing: -.04em !important; }
html.cwFoundationFamily .lead,
html.cwFoundationFamily .copy { color: var(--cw-text-soft) !important; font-size: .92rem !important; line-height: 1.55 !important; }
html.cwFoundationFamily .eyebrow,
html.cwFoundationFamily .card > h2,
html.cwFoundationFamily .card > h3 {
  color: var(--cw-blue) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
html.cwFoundationFamily .big { border-radius: 7px !important; font-size: .94rem !important; line-height: 1.45 !important; }
html.cwFoundationFamily b,
html.cwFoundationFamily strong { font-weight: 720 !important; }

html.cwFoundationFamily button,
html.cwFoundationFamily select,
html.cwFoundationFamily .btn {
  min-height: 38px !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}
html.cwFoundationFamily .btn.primary,
html.cwFoundationFamily .btn.good {
  border-color: #f1f4f9 !important;
  background: #f1f4f9 !important;
  color: #09101b !important;
  box-shadow: none !important;
}
html.cwFoundationFamily .btn.active {
  border-color: rgba(182,165,255,.55) !important;
  background: linear-gradient(135deg,rgba(78,122,181,.55),rgba(104,82,159,.46)) !important;
  color: #fff !important;
}
html.cwFoundationFamily .controls { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
html.cwFoundationFamily .cwTransportIcon { width: auto !important; min-width: 0 !important; padding: 8px 12px !important; font-size: .82rem !important; }
html.cwFoundationFamily .cwTransportIcon::before,
html.cwFoundationFamily .cwTransportIcon::after { display: none !important; content: none !important; }

/* Compact, content-driven lesson introduction. */
html.cwFoundationFamily .haIntroGrid {
  display: grid !important;
  grid-template-columns: minmax(245px,.9fr) minmax(320px,1.35fr) minmax(190px,.65fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  height: auto !important;
  padding: 10px !important;
  overflow: visible !important;
}
html.cwFoundationFamily .haTitlePanel,
html.cwFoundationFamily .haIntroPanel,
html.cwFoundationFamily .haPathDisclosure {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  background: #090e15;
}
html.cwFoundationFamily .haTitlePanel { display: flex; flex-direction: column; justify-content: center; }
html.cwFoundationFamily .haTitlePanel h1 { overflow-wrap: anywhere; }
html.cwFoundationFamily .haTitlePanel > .big { display: none !important; }
html.cwFoundationFamily .haIntroPanel { display: flex; flex-direction: column; justify-content: center; }
html.cwFoundationFamily .haIntroPanel > b { margin-bottom: 7px; color: var(--cw-violet-soft); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; }
html.cwFoundationFamily .haIntroPanel > span { color: var(--cw-text); font-size: .92rem; line-height: 1.48; }
html.cwFoundationFamily .haPathDisclosure { align-self: stretch; }
html.cwFoundationFamily .haPathDisclosure summary { display: flex; justify-content: space-between; gap: 8px; color: var(--cw-text); font-size: .83rem; font-weight: 720; cursor: pointer; list-style: none; }
html.cwFoundationFamily .haPathDisclosure summary::-webkit-details-marker { display: none; }
html.cwFoundationFamily .haPathDisclosure summary::after { content: '+'; color: var(--cw-muted); }
html.cwFoundationFamily .haPathDisclosure[open] summary::after { content: '−'; }
html.cwFoundationFamily .haPathDisclosure summary span { color: var(--cw-muted); font-size: .7rem; font-weight: 550; }
html.cwFoundationFamily .haGuideSteps { margin: 12px 0 0; padding: 0 0 0 19px; color: var(--cw-text-soft); }
html.cwFoundationFamily .haGuideSteps li { margin: 7px 0; padding-left: 3px; font-size: .78rem; line-height: 1.35; }

/* Build and quiz: activity beside the keyboard, theory after the task. */
html.cwFoundationFamily .haStackedLesson {
  grid-template-columns: minmax(340px,.82fr) minmax(520px,1.18fr) !important;
  align-items: start !important;
}
html.cwFoundationFamily .haStackedLesson > .haIntroGrid { grid-column: 1 / -1 !important; grid-row: auto !important; }
html.cwFoundationFamily .haStackedLesson > .haActivity { grid-column: 1 !important; grid-row: auto !important; display: grid !important; gap: 12px !important; min-width: 0 !important; }
html.cwFoundationFamily .haStackedLesson > .haKeyboardArea { grid-column: 2 !important; grid-row: auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; min-width: 0 !important; }
html.cwFoundationFamily .haActivity > .card,
html.cwFoundationFamily .haKeyboardArea > .card { height: auto !important; min-height: 0 !important; overflow: visible !important; }
html.cwFoundationFamily .haKeyboardArea > .card:first-child { order: 1; }
html.cwFoundationFamily .haKeyboardArea > .card:nth-child(2) { order: 2; }
html.cwFoundationFamily .haKeyboardArea > .card:nth-child(3) { order: 3; }
html.cwFoundationFamily .haActivity .infoGrid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
html.cwFoundationFamily .haActivity .info { min-width: 0 !important; padding: 12px !important; border-radius: 7px !important; }
html.cwFoundationFamily .haActivity .formulaStrip,
html.cwFoundationFamily .haActivity .scaleRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; min-width: 0 !important; }
html.cwFoundationFamily .haActivity .scaleRow { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
html.cwFoundationFamily .haActivity .token,
html.cwFoundationFamily .haActivity .noteBox { min-width: 0 !important; overflow: hidden !important; }
html.cwFoundationFamily .testBox { margin-top: 10px !important; padding: 12px !important; border-radius: 7px !important; }
html.cwFoundationFamily .summary { margin-top: 10px !important; padding: 12px !important; border-radius: 7px !important; }

html.cwFoundationFamily .haKeyboardArea .keyboard {
  width: 100% !important;
  height: clamp(275px,28vw,380px) !important;
  min-height: 275px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
}
html.cwFoundationFamily .keyboardFormulaStrip,
html.cwFoundationFamily .haKeyboardTheory {
  display: grid !important;
  grid-template-columns: repeat(8,minmax(0,1fr)) !important;
  gap: 4px !important;
  position: relative !important;
  height: auto !important;
  min-height: 82px !important;
  margin: 8px 0 !important;
  padding: 7px !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 8px !important;
  background: #080d14 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
html.cwFoundationFamily .haTheoryPoint {
  position: static !important;
  width: auto !important;
  min-width: 64px !important;
  transform: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html.cwFoundationFamily .haTheoryPoint span,
html.cwFoundationFamily .haTheoryPoint b,
html.cwFoundationFamily .haTheoryPoint small { display: block !important; overflow: hidden !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html.cwFoundationFamily .haTheoryPoint span { color: var(--cw-blue) !important; font-size: .65rem !important; }
html.cwFoundationFamily .haTheoryPoint b { margin: 4px 0 !important; color: var(--cw-text) !important; font-size: 1rem !important; }
html.cwFoundationFamily .haTheoryPoint small { color: var(--cw-muted) !important; font-size: .62rem !important; }

/* Quiz controls are allowed to wrap instead of being squeezed into one row. */
html.cwFoundationFamily.ha-quiz .testTabs { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 6px !important; }
html.cwFoundationFamily .testTabs .btn { white-space: normal !important; }
html.cwFoundationFamily #formulaRow,
html.cwFoundationFamily .formulaRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; min-width: 0 !important; }
html.cwFoundationFamily .choiceRow { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
html.cwFoundationFamily .feedback { max-height: none !important; min-height: 0 !important; overflow: visible !important; }
html.cwFoundationFamily .haInlineScore { position: static !important; display: block !important; margin-top: 8px !important; }
html.cwFoundationFamily.ha-quiz .haIntroGrid {
  grid-template-columns: minmax(0,1fr) minmax(250px,.45fr) !important;
  align-items: start !important;
}
html.cwFoundationFamily.ha-quiz .haIntroPanel.message,
html.cwFoundationFamily.ha-quiz .haTitlePanel .lead { display: none !important; }
html.cwFoundationFamily.ha-quiz .haTitlePanel { min-height: 96px !important; }
html.cwFoundationFamily.ha-quiz .haPathDisclosure { grid-column: 2 !important; align-self: start !important; }
html.cwFoundationFamily .haQuizSetup { padding: 0 !important; overflow: hidden !important; }
html.cwFoundationFamily .haQuizOptions { min-width: 0 !important; }
html.cwFoundationFamily .haQuizOptions > summary {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 52px !important;
  padding: 12px 14px !important;
  color: var(--cw-text) !important;
  cursor: pointer !important;
  list-style: none !important;
}
html.cwFoundationFamily .haQuizOptions > summary::-webkit-details-marker { display: none !important; }
html.cwFoundationFamily .haQuizOptions > summary::after { content: '+'; color: var(--cw-muted); }
html.cwFoundationFamily .haQuizOptions[open] > summary::after { content: '−'; }
html.cwFoundationFamily .haQuizOptions > summary span { font-size: .86rem !important; font-weight: 720 !important; }
html.cwFoundationFamily .haQuizOptions > summary small { color: var(--cw-muted) !important; font-size: .7rem !important; font-weight: 550 !important; }
html.cwFoundationFamily .haQuizOptionsBody { padding: 0 14px 14px !important; border-top: 1px solid var(--cw-border) !important; }
html.cwFoundationFamily .haQuizQuestion { padding: 15px !important; }
html.cwFoundationFamily .haQuizQuestion .question { margin-top: 4px !important; }
html.cwFoundationFamily .haQuizQuestion #choices { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
html.cwFoundationFamily .haQuizQuestion #choices > .choiceRow { order: 1 !important; }
html.cwFoundationFamily .haQuizQuestion #choices > .cluePanel { order: 2 !important; margin-top: 4px !important; margin-bottom: 0 !important; padding: 8px 10px !important; }
html.cwFoundationFamily .haQuizQuestion #choices > .cluePanel .copy { display: none !important; }
html.cwFoundationFamily .haQuizActionRow { display: flex !important; justify-content: flex-end !important; margin: 10px 0 0 !important; }
html.cwFoundationFamily .haQuizCheck { min-width: 132px !important; border-color: #f1f4f9 !important; background: #f1f4f9 !important; color: #09101b !important; }
html.cwFoundationFamily .haQuizProgress { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 7px 12px !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--cw-border) !important; }
html.cwFoundationFamily .haQuizProgress .progress { grid-column: 1 !important; width: 100% !important; }
html.cwFoundationFamily .haQuizProgress .copy { grid-column: 1 !important; margin: 0 !important; }
html.cwFoundationFamily .haQuizProgress .score { grid-column: 2 !important; grid-row: 1 / span 2 !important; margin: 0 !important; font-size: 1rem !important; white-space: nowrap !important; }

/* Tonic values: selection, keyboard, then optional supporting cards. */
html.cwFoundationFamily.ha-tonic .wrap { display: grid !important; grid-template-rows: auto !important; }
html.cwFoundationFamily.ha-tonic .grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; gap: 12px !important; }
html.cwFoundationFamily .haTonicSelect,
html.cwFoundationFamily .haTonicKeyboard { grid-column: 1 / -1 !important; grid-row: auto !important; height: auto !important; overflow: visible !important; }
html.cwFoundationFamily .haTonicKeyboard { display: block !important; }
html.cwFoundationFamily .haTonicKeyboard .keyboard { width: 100% !important; height: clamp(280px,30vw,400px) !important; min-height: 280px !important; }
html.cwFoundationFamily .haAlignedTonicStrip { display: grid !important; grid-template-columns: repeat(8,minmax(0,1fr)) !important; gap: 4px !important; margin: 8px 0 !important; padding: 0 !important; }
html.cwFoundationFamily .haTonicContext1,
html.cwFoundationFamily .haTonicContext2 { grid-column: auto !important; grid-row: auto !important; display: block !important; height: auto !important; overflow: visible !important; }
html.cwFoundationFamily .haTonicContext3,
html.cwFoundationFamily .haTonicContext4 { display: block !important; }
html.cwFoundationFamily .haTonicQuiz { border-color: var(--cw-border-strong) !important; }
html.cwFoundationFamily .haTonicQuiz .checkBtns { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
html.cwFoundationFamily .haTonicQuiz .choice { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 72px !important; min-height: 42px !important; }

/* Accidental-order lessons: simple vertical learning sequence. */
html.cwFoundationFamily.ha-sharp .wrap,
html.cwFoundationFamily.ha-flat .wrap { display: grid !important; grid-template-rows: auto !important; gap: 12px !important; }
html.cwFoundationFamily .tRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 6px !important; }
html.cwFoundationFamily .tBtn { width: auto !important; height: auto !important; min-height: 94px !important; padding: 10px 5px !important; border-radius: 7px !important; }
html.cwFoundationFamily .haAccidentalProgress { display: grid !important; grid-template-columns: minmax(210px,.55fr) minmax(0,1.45fr) !important; gap: 8px !important; padding: 8px !important; }
html.cwFoundationFamily .haProgressTitle { display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 7px; background: #090e15; }
html.cwFoundationFamily .haProgressTitle b { color: var(--cw-text) !important; font-size: .88rem !important; }
html.cwFoundationFamily .haProgressTitle span { margin-top: 4px; color: var(--cw-muted) !important; font-size: .75rem !important; line-height: 1.4 !important; }
html.cwFoundationFamily .haProgressRow { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 5px !important; }
html.cwFoundationFamily.ha-flat .haProgressRow { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
html.cwFoundationFamily .haProgressStep { min-width: 0; min-height: 64px; padding: 6px 3px; border: 1px solid var(--cw-border); border-radius: 6px; background: #080d14; color: var(--cw-text); }
html.cwFoundationFamily .haProgressStep small,
html.cwFoundationFamily .haProgressStep span { display: block; color: var(--cw-muted); font-size: .65rem; }
html.cwFoundationFamily .haProgressStep b { display: block; margin: 2px 0; font-size: 1rem; }
html.cwFoundationFamily .haProgressStep.previous { border-color: rgba(143,197,255,.55); background: rgba(83,132,194,.18); }
html.cwFoundationFamily .haProgressStep.current { border-color: var(--cw-yellow); background: rgba(245,216,99,.12); }
html.cwFoundationFamily .keyboardShell { height: auto !important; padding: 12px !important; }
html.cwFoundationFamily .viewport { min-height: 300px !important; padding-top: 34px !important; overflow-x: auto !important; overflow-y: visible !important; }
html.cwFoundationFamily .result { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
html.cwFoundationFamily .resultBox { padding: 12px !important; }
html.cwFoundationFamily .rule,
html.cwFoundationFamily .rectReminder { display: block !important; }
html.cwFoundationFamily .footer,
html.cwFoundationFamily .haKeyMessage { padding: 12px 14px !important; color: var(--cw-text-soft) !important; font-size: .84rem !important; line-height: 1.45 !important; }

@media (max-width: 1120px) {
  html.cwFoundationFamily .haIntroGrid { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr) !important; }
  html.cwFoundationFamily .haPathDisclosure { grid-column: 1 / -1; }
  html.cwFoundationFamily .haStackedLesson { grid-template-columns: minmax(310px,.78fr) minmax(430px,1.22fr) !important; }
  html.cwFoundationFamily .haAccidentalProgress { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  html.cwFoundationFamily body,
  html.cwFoundationFamily body.cwViewportFoundation.cwViewportDense.cwkUnifiedMenu { margin-left: 0 !important; }
  html.cwFoundationFamily .main { padding: 8px 12px 36px !important; }
  html.cwFoundationFamily .haIntroGrid,
  html.cwFoundationFamily .haStackedLesson,
  html.cwFoundationFamily.ha-tonic .grid { grid-template-columns: 1fr !important; }
  html.cwFoundationFamily .haIntroGrid > *,
  html.cwFoundationFamily .haStackedLesson > .haIntroGrid,
  html.cwFoundationFamily .haStackedLesson > .haActivity,
  html.cwFoundationFamily .haStackedLesson > .haKeyboardArea,
  html.cwFoundationFamily .haTonicSelect,
  html.cwFoundationFamily .haTonicKeyboard { grid-column: 1 !important; }
  html.cwFoundationFamily.ha-quiz .haIntroGrid { grid-template-columns: minmax(0,1fr) !important; }
  html.cwFoundationFamily.ha-quiz .haPathDisclosure { grid-column: 1 !important; }
}

@media (max-width: 640px) {
  html.cwFoundationFamily .haIntroGrid { padding: 8px !important; }
  html.cwFoundationFamily.ha-quiz .testTabs { grid-template-columns: 1fr 1fr !important; }
  html.cwFoundationFamily .haActivity .formulaStrip,
  html.cwFoundationFamily #formulaRow,
  html.cwFoundationFamily .formulaRow { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .haActivity .scaleRow,
  html.cwFoundationFamily .haAlignedTonicStrip { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .tRow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .haProgressRow { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  html.cwFoundationFamily .result { grid-template-columns: 1fr !important; }
  html.cwFoundationFamily .haTonicKeyboard .belowRules { grid-template-columns: minmax(0,1fr) !important; }
  html.cwFoundationFamily .haTonicKeyboard .rule { min-width: 0 !important; }
  html.cwFoundationFamily .haTonicKeyboard .seq { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 6px !important; }
  html.cwFoundationFamily .haQuizOptions > summary { grid-template-columns: 1fr auto !important; }
  html.cwFoundationFamily .haQuizOptions > summary small { display: none !important; }
  html.cwFoundationFamily .haQuizActionRow .haQuizCheck { width: 100% !important; }
  html.cwFoundationFamily .haQuizProgress { grid-template-columns: 1fr !important; }
  html.cwFoundationFamily .haQuizProgress .score { grid-column: 1 !important; grid-row: auto !important; }
}

.cwUnifiedLessonGuide{display:grid!important;grid-template-columns:minmax(250px,.8fr) minmax(330px,1.2fr) minmax(190px,.62fr)!important;gap:10px!important;align-items:stretch!important;min-height:0!important;height:auto!important;padding:10px!important;overflow:visible!important;background:var(--cw-surface,#0d121a)!important;border:1px solid var(--cw-border,#28313f)!important;border-radius:10px!important;box-shadow:none!important}
.cwGuideTitle,.cwGuidePanel{min-width:0;height:auto!important;max-height:none!important;overflow:visible!important;border:1px solid var(--cw-border,#28313f)!important;border-radius:8px!important;background:#090e15!important;padding:14px!important;box-shadow:none!important}
.cwGuideTitle{display:flex;flex-direction:column;justify-content:center}.cwGuideTitle .big,.cwGuideTitle .copy,.cwGuideTitle .lesson{display:none!important}.cwGuideTitle h1{margin:5px 0 7px!important;font-size:clamp(2rem,3vw,2.7rem)!important;line-height:1.04!important;letter-spacing:-.04em!important;overflow-wrap:anywhere}.cwGuideTitle .lead{display:none!important}
.cwGuidePanel.message{display:flex;flex-direction:column;justify-content:center}.cwGuideLabel{margin-bottom:7px;color:var(--cw-violet-soft,#b6a5ff)!important;font-size:.69rem!important;letter-spacing:.12em!important;text-transform:uppercase;font-weight:760}.cwGuidePanel.message p{margin:0;color:var(--cw-text,#f5f7fb)!important;font-size:.92rem!important;line-height:1.48!important;font-weight:560!important}
.cwGuidePanel.path summary{display:flex;justify-content:space-between;gap:8px;color:var(--cw-text,#f5f7fb);font-size:.82rem;font-weight:720;cursor:pointer;list-style:none}.cwGuidePanel.path summary::-webkit-details-marker{display:none}.cwGuidePanel.path summary:after{content:'+';color:var(--cw-muted,#8f9aae)}.cwGuidePanel.path[open] summary:after{content:'−'}.cwGuidePanel.path summary span{margin-left:auto;color:var(--cw-muted,#8f9aae);font-size:.68rem;font-weight:540}.cwGuideSteps{display:grid;gap:6px;margin-top:10px}.cwGuideStep{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:7px;padding:6px;border:1px solid var(--cw-border,#28313f);border-radius:6px;background:#0b1119;color:var(--cw-text-soft,#c7cfdb);font-size:.72rem;line-height:1.3}.cwGuideStep b{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(143,197,255,.45);border-radius:6px;background:rgba(83,132,194,.18);color:var(--cw-blue,#8fc5ff);font-size:.65rem}
@media(max-width:1120px){.cwUnifiedLessonGuide{grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr)!important}.cwGuidePanel.path{grid-column:1/-1}}
@media(max-width:720px){.cwUnifiedLessonGuide{grid-template-columns:1fr!important}.cwGuidePanel.path{grid-column:1!important}}

/*
  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}
}

/* B077OV — shared keyboard-label readability standard.
   Geometry remains lesson-owned; this layer standardises contrast, type and clipping safety. */
:root{--cw-key-label-bg:#07101f;--cw-key-label-fg:#f7fbff;--cw-key-label-border:#dcecff;--cw-key-distance:#9bc7ff}
.toneBadge,.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge,.whiteCountBadge,.geometryCountBadge{box-sizing:border-box;font-family:Arial,system-ui,sans-serif;font-weight:950;line-height:1;text-shadow:none}
.toneBadge{display:inline-flex!important;align-items:center;justify-content:center;min-width:36px;min-height:20px;max-width:76px;padding:3px 6px!important;border:1px solid var(--cw-key-label-border)!important;border-radius:7px!important;background:var(--cw-key-label-bg)!important;color:var(--cw-key-label-fg)!important;font-size:10px!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(0,0,0,.66)!important;z-index:50!important}
.blackKey .toneBadge,.b .toneBadge{min-width:34px;max-width:68px;font-size:9.5px!important}
.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge{min-width:22px;min-height:20px;padding:3px 5px!important;border:1px solid var(--cw-key-label-border)!important;border-radius:7px!important;background:var(--cw-key-label-bg)!important;color:var(--cw-key-label-fg)!important;font-size:10px!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(0,0,0,.62)!important;z-index:48!important}
.whiteCountBadge,.geometryCountBadge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:19px!important;width:19px!important;height:19px!important;padding:0!important;border:1px solid #806d17!important;border-radius:50%!important;background:#ffe36d!important;color:#06101e!important;font-size:10px!important;z-index:48!important}
.intervalDistanceLabel,.intervalOctaveLabel{padding:2px 7px!important;border:1px solid #5f88ba;border-radius:6px;background:var(--cw-key-label-bg)!important;color:#e8f4ff!important;box-shadow:0 2px 8px rgba(0,0,0,.7);text-shadow:none!important}
.intervalDistanceBracket{border-color:var(--cw-key-distance)!important}
.intervalAnchor{color:var(--cw-key-distance)!important;text-shadow:0 1px 2px #000,0 0 4px #07101f}
@media(max-width:760px){.toneBadge{font-size:9px!important;min-width:32px;padding:3px 4px!important}.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge{font-size:9px!important;padding:3px 4px!important}}

/* B077PF · Scale Degree Positions: tonic → relationships → degrees → keyboard. */
html.cwLearningSystem.cwFoundationFamily.ha-degree .wrap { padding-top: 8px !important; gap: 6px !important; }
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwUnifiedLessonGuide { grid-template-columns: minmax(280px,.9fr) minmax(0,1.55fr) minmax(180px,.55fr) !important; gap: 6px !important; padding: 6px !important; }
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwGuideTitle,
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwGuidePanel { padding: 8px 10px !important; }
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwGuideTitle h1 { margin: 2px 0 !important; font-size: clamp(1.75rem,2.35vw,2.25rem) !important; line-height: 1 !important; }
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwGuidePanel.message p { font-size: .8rem !important; line-height: 1.3 !important; }
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwGuideLabel { margin-bottom: 3px !important; }
html.cwLearningSystem.cwFoundationFamily.ha-degree .cwGuidePanel.path { padding: 9px 10px !important; }

html.cwFoundationFamily.ha-degree .cwDegreeSelector { padding: 7px 9px !important; margin-bottom: 0 !important; }
html.cwFoundationFamily.ha-degree .cwDegreeSelector h2 { margin-bottom: 3px !important; }
html.cwFoundationFamily.ha-degree .cwDegreeSelector > .copy { display: none !important; }
html.cwFoundationFamily.ha-degree .keyRow { display: grid !important; grid-template-columns: repeat(14,minmax(0,1fr)) !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
html.cwFoundationFamily.ha-degree .keyBtn { min-width: 0 !important; min-height: 46px !important; height: 46px !important; padding: 3px 2px !important; border-radius: 7px !important; display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; justify-content: center !important; column-gap: 5px !important; }
html.cwFoundationFamily.ha-degree .keyBtn .name { grid-row: 1 / 3; font-size: 17px !important; }
html.cwFoundationFamily.ha-degree .keyBtn .t { margin: 0 !important; font-size: 9px !important; line-height: 1 !important; }
html.cwFoundationFamily.ha-degree .keyBtn .role { min-height: 0 !important; margin: 0 !important; font-size: 10px !important; line-height: 1 !important; }
html.cwFoundationFamily.ha-degree .stripLegend { margin-top: 3px !important; font-size: 10px !important; line-height: 1.1 !important; }

html.cwFoundationFamily.ha-degree .cwDegreeFocus { grid-template-columns: .9fr 1.1fr !important; gap: 6px !important; }
html.cwFoundationFamily.ha-degree .cwDegreeFocus > .card { min-height: 0 !important; margin-bottom: 0 !important; padding: 7px 9px !important; }
html.cwFoundationFamily.ha-degree .cwDegreeFocus h2 { margin-bottom: 4px !important; }
html.cwFoundationFamily.ha-degree .relationships { gap: 4px !important; }
html.cwFoundationFamily.ha-degree .rel { min-height: 56px !important; padding: 4px !important; border-radius: 8px !important; display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important; align-items: center !important; justify-content: center !important; column-gap: 7px !important; }
html.cwFoundationFamily.ha-degree .rel .roman { font-size: 13px !important; }
html.cwFoundationFamily.ha-degree .rel .chord { margin: 0 !important; font-size: 21px !important; }
html.cwFoundationFamily.ha-degree .rel .formula { font-size: 10px !important; }
html.cwFoundationFamily.ha-degree .rel .label { font-size: 9px !important; }
html.cwFoundationFamily.ha-degree .scaleStrip { gap: 4px !important; margin-top: 0 !important; }
html.cwFoundationFamily.ha-degree .deg { min-height: 56px !important; padding: 5px 2px !important; border-radius: 8px !important; }
html.cwFoundationFamily.ha-degree .deg .rn { margin-bottom: 3px !important; font-size: 13px !important; }
html.cwFoundationFamily.ha-degree .deg .note { font-size: 17px !important; }

html.cwFoundationFamily.ha-degree .cwDegreeKeyboard { margin-bottom: 0 !important; padding: 7px 9px !important; }
html.cwFoundationFamily.ha-degree .cwDegreeKeyboard h2 { margin-bottom: 4px !important; }
html.cwFoundationFamily.ha-degree .keyboardShell { padding: 6px 9px 8px !important; }
html.cwFoundationFamily.ha-degree .legend { margin-bottom: 3px !important; font-size: 11px !important; }
html.cwFoundationFamily.ha-degree .viewport { padding-top: 2px !important; }
html.cwFoundationFamily.ha-degree .keyboardTitleNote { margin-bottom: 3px !important; font-size: 11px !important; }

html.cwFoundationFamily.ha-degree .cwDegreeSupport { border: 1px solid var(--cw-border,#28313f); border-radius: 8px; background: #090e15; overflow: hidden; }
html.cwFoundationFamily.ha-degree .cwDegreeSupport > summary { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 6px 10px; cursor: pointer; color: var(--cw-text,#f5f7fb); font-size: 12px; font-weight: 750; }
html.cwFoundationFamily.ha-degree .cwDegreeSupport > summary small { color: var(--cw-muted,#8f9aae); font-size: 10px; font-weight: 550; }
html.cwFoundationFamily.ha-degree .cwDegreeSupportBody { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 0 7px 7px; }
html.cwFoundationFamily.ha-degree .cwDegreeSupportBody .enharmonicNote,
html.cwFoundationFamily.ha-degree .cwDegreeSupportBody #scaleLine { margin: 0 !important; padding: 6px 8px; border: 1px solid var(--cw-border,#28313f); border-radius: 6px; background: #0b1119; font-size: 11px !important; }
html.cwFoundationFamily.ha-degree .cwDegreeSupportBody .coreTheoryCard { margin: 0 !important; }

@media (max-width:1180px) {
  html.cwFoundationFamily.ha-degree .keyRow { grid-template-columns: repeat(7,minmax(0,1fr)) !important; }
  html.cwFoundationFamily.ha-degree .cwDegreeFocus { grid-template-columns: 1fr !important; }
}