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

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

/* ChordWalk Academy — calm, cohesive visual system.
   This layer deliberately changes presentation only; lesson structure and behaviour remain untouched. */

html.cwCalmVisual {
  --cw-bg: #07101d;
  --cw-bg-deep: #040a13;
  --cw-nav: #0a1524;
  --cw-surface: #101d2e;
  --cw-surface-raised: #14243a;
  --cw-surface-subtle: #0c1828;
  --cw-border: #2c4664;
  --cw-border-soft: #203750;
  --cw-text: #f3f7fb;
  --cw-text-soft: #c0ccda;
  --cw-text-muted: #91a3b8;
  --cw-blue: #86baf2;
  --cw-blue-strong: #4f8fd4;
  --cw-yellow: #f0d36c;
  --cw-green: #69c988;
  --cw-red: #ef8178;
  --cw-radius-sm: 8px;
  --cw-radius: 12px;
  --cw-radius-lg: 16px;
  --cw-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  color-scheme: dark;
  background: var(--cw-bg-deep);
}

html.cwCalmVisual,
html.cwCalmVisual body,
html.cwCalmVisual button,
html.cwCalmVisual input,
html.cwCalmVisual select,
html.cwCalmVisual textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-synthesis: none;
}

html.cwCalmVisual body {
  color: var(--cw-text) !important;
  background: var(--cw-bg) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55;
}

html.cwCalmVisual :where(p, li, .copy, .lead) {
  max-width: 72ch;
  color: var(--cw-text-soft) !important;
  line-height: 1.6 !important;
}

html.cwCalmVisual :where(h1, h2, h3, h4, strong, b) {
  font-family: inherit !important;
  font-weight: 700 !important;
}

html.cwCalmVisual h1 {
  color: var(--cw-text) !important;
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

html.cwCalmVisual h2 { letter-spacing: -.015em !important; }

html.cwCalmVisual :where(h1, h2, h3, h4) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(h1, h2, h3, h4):focus { outline: none !important; }

html.cwCalmVisual :where(.eyebrow, .navTitle, .navLabel, .sectionLabel, .miniTitle, .kbTitle, .gpsTitle, .cwAcademyIntroductionKicker, .cwAskEyebrow, .cwAcademyCategoryEyebrow, .cwAcademyToolsTitle, .cwAcademyMainLabel) {
  color: var(--cw-blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  line-height: 1.35 !important;
}

/* One navigation rail, one geometry, one interaction vocabulary. */
html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) {
  width: 272px !important;
  padding: 18px 14px 24px !important;
  background: var(--cw-nav) !important;
  border: 0 !important;
  border-right: 1px solid var(--cw-border-soft) !important;
  box-shadow: none !important;
  scrollbar-color: var(--cw-border) transparent;
}

html.cwCalmVisual :where(.app, .academyShell) {
  grid-template-columns: 272px minmax(0, 1fr) !important;
}

html.cwCalmVisual body.cwkUnifiedMenu { margin-left: 272px !important; }

/* Some later lessons ship both a retired in-grid rail and the shared fixed rail. */
html.cwCalmVisual body:not(.cwkUnifiedMenu):has(> .cw-global-side) > .app {
  width: auto !important;
  margin-left: 272px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

html.cwCalmVisual body:not(.cwkUnifiedMenu):has(> .cw-global-side) > .app > .side {
  display: none !important;
}

html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) > :where(.brand, .cw-brand, .academyBrand, .cwkBrand) {
  height: 62px !important;
  min-height: 62px !important;
  margin-bottom: 18px !important;
  background-size: 190px auto !important;
  background-position: left top !important;
}

html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) > :where(.brand, .cw-brand, .academyBrand, .cwkBrand)::after {
  padding-top: 48px !important;
  color: var(--cw-text-muted) !important;
  font: 600 11px/1.2 Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: .16em !important;
}

html.cwCalmVisual :where(.cwAcademyTools) {
  margin: 0 0 18px !important;
  padding: 10px !important;
  border: 1px solid var(--cw-border-soft) !important;
  border-radius: var(--cw-radius) !important;
  background: rgba(255,255,255,.015) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.mainBtn, .navBtn, .lessonBtn, .navLink, .cw-main-btn, .cwAcademyCategoryButton, .cwAcademyToolButton, .cwAcademyToolGrid button) {
  min-height: 0 !important;
  margin: 3px 0 !important;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: var(--cw-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cw-text-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

html.cwCalmVisual :where(.mainBtn, .navBtn, .lessonBtn, .navLink, .cw-main-btn, .cwAcademyCategoryButton, .cwAcademyToolButton, .cwAcademyToolGrid button):hover,
html.cwCalmVisual :where(.mainBtn, .navBtn, .lessonBtn, .navLink, .cw-main-btn, .cwAcademyCategoryButton, .cwAcademyToolButton, .cwAcademyToolGrid button):focus-visible {
  color: var(--cw-text) !important;
  background: rgba(134,186,242,.09) !important;
  border-color: var(--cw-border) !important;
  outline: none !important;
}

html.cwCalmVisual :where(.mainBtn.active, .navBtn.active, .lessonBtn.active, .navLink.active, .cw-main-btn.active, .cwAcademyCategoryButton.active) {
  color: var(--cw-text) !important;
  background: rgba(79,143,212,.18) !important;
  border-color: var(--cw-blue-strong) !important;
  box-shadow: inset 3px 0 0 var(--cw-blue) !important;
}

html.cwCalmVisual :where(.mainBtn, .lessonBtn, .cwAcademyCategoryButton) small {
  margin-top: 2px !important;
  color: var(--cw-text-muted) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

html.cwCalmVisual .cwAcademyCompactTools { display: none !important; }

/* Main page rhythm and content hierarchy. */
html.cwCalmVisual :where(.main, .homeMain, .introMain) {
  background: var(--cw-bg) !important;
}

html.cwCalmVisual :where(.main) { padding: clamp(18px, 2.5vw, 36px) !important; }

html.cwCalmVisual :where(.wrap, .content, .lessonContent, .introBody) {
  gap: 20px !important;
}

html.cwCalmVisual :where(.card, .panel, .lessonCard, .studio, .messageCard, .visualCard, .toneBox, .info, .cluePanel, .feedback, .testBox, .cwGuidePanel, .haIntroPanel, .cwAcademyIntroductionGrid article, .cwAcademyCategoryGroups section, .cwAskAnswerCard) {
  border: 1px solid var(--cw-border-soft) !important;
  border-radius: var(--cw-radius) !important;
  background: var(--cw-surface) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.card, .panel, .messageCard, .visualCard, .cwGuidePanel, .haIntroPanel) {
  padding: clamp(16px, 2vw, 24px) !important;
}

html.cwCalmVisual :where(.card, .panel, .messageCard, .visualCard) + :where(.card, .panel, .messageCard, .visualCard) {
  margin-top: 16px !important;
}

html.cwCalmVisual :where(.big, .summary, .lessonPath, .lessonPathIntro, .cwLessonPath, .callout) {
  border: 0 !important;
  border-left: 3px solid var(--cw-blue-strong) !important;
  border-radius: var(--cw-radius-sm) !important;
  background: var(--cw-surface-subtle) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}

html.cwCalmVisual :where(.big, .summary) { font-weight: 600 !important; }

/* Controls: quieter by default, clear when primary or selected. */
html.cwCalmVisual :where(button, .btn, select, input[type="text"], input[type="search"]) {
  border-radius: var(--cw-radius-sm) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.btn, button, select) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html.cwCalmVisual :where(.btn, .choice, .noteBtn, .keyBtn, .seriesCard, .chromaticBtn, .shiftStage) {
  border-color: var(--cw-border) !important;
  background: var(--cw-surface-subtle) !important;
  color: var(--cw-text) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.btn.primary, .btn.active, .choice.selected, .noteBtn.active, .keyBtn.active, .seriesCard.active) {
  border-color: var(--cw-blue-strong) !important;
  background: #22466d !important;
}

html.cwCalmVisual :where(.btn.green, .btn.good, .cwNavPill.next) {
  border-color: #4e9c69 !important;
  background: #1c5433 !important;
}

html.cwCalmVisual :where(button, a, input, select):focus-visible {
  outline: 2px solid var(--cw-blue) !important;
  outline-offset: 2px !important;
}

/* Standard lesson navigation, wherever it is generated. */
html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) {
  min-height: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 0 14px !important;
  gap: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cw-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.pill, .cwNavPill, .cwSharedLessonMenu) {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius-sm) !important;
  background: transparent !important;
  color: var(--cw-text-soft) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html.cwCalmVisual :where(.pill.menu, .cwNavPill.menu, .cwSharedLessonMenu) {
  border-color: var(--cw-border) !important;
  background: var(--cw-surface-subtle) !important;
}

/* Dialogs and introductions become reading surfaces, not glowing billboards. */
html.cwCalmVisual :where(#cwAskOverlay, #cwAcademySettingsOverlay, #cwAcademyCategoryOverlay, #cwAcademyIntroductionOverlay) {
  background: rgba(2, 7, 14, .86) !important;
  backdrop-filter: blur(6px);
}

html.cwCalmVisual :where(#cwAskDialog, .cwAcademySettingsPanel, .cwAcademyCategoryPanel, .cwAcademyIntroductionPage) {
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius-lg) !important;
  background: var(--cw-bg) !important;
  box-shadow: var(--cw-shadow) !important;
  padding: clamp(20px, 3vw, 36px) !important;
}

html.cwCalmVisual .cwAcademyIntroductionPage { width: min(1080px, 94vw) !important; }

html.cwCalmVisual .cwAcademyIntroductionPage h1 {
  margin: 8px 0 10px !important;
  color: var(--cw-text) !important;
}

html.cwCalmVisual .cwAcademyIntroductionQuestion {
  max-width: 760px !important;
  margin: 0 0 28px !important;
  color: var(--cw-text-soft) !important;
  font-size: clamp(18px, 2vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

html.cwCalmVisual .cwAcademyIntroductionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html.cwCalmVisual .cwAcademyIntroductionGrid article { padding: 20px !important; }
html.cwCalmVisual .cwAcademyIntroductionGrid h2 { color: var(--cw-blue) !important; font-size: 18px !important; }
html.cwCalmVisual .cwAcademyIntroductionGrid p { font-size: 15px !important; }

html.cwCalmVisual :where(.cwAcademyJourney span, .cwAcademyIntroductionSteps div) {
  border: 1px solid var(--cw-border-soft) !important;
  border-radius: var(--cw-radius-sm) !important;
  background: var(--cw-surface-subtle) !important;
  color: var(--cw-text-soft) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

html.cwCalmVisual .cwAcademyExploreLesson {
  border: 1px solid #4e9c69 !important;
  border-radius: var(--cw-radius-sm) !important;
  background: #1c5433 !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

/* Visual learning artefacts keep their semantic colour, but lose excess glow. */
html.cwCalmVisual :where(.token, .noteBox, .slot, .fcard) {
  border-width: 1px !important;
  border-color: var(--cw-border) !important;
  border-radius: var(--cw-radius-sm) !important;
  background: var(--cw-surface-subtle) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.token.current, .slot.correct, .fcard.active, .fcard.correct, .choice.correct) {
  box-shadow: inset 0 0 0 1px currentColor !important;
}

@media (max-width: 900px) {
  html.cwCalmVisual body { min-width: 0 !important; }
  html.cwCalmVisual :where(.app, .academyShell) { grid-template-columns: 1fr !important; }
  html.cwCalmVisual body > .app,
  html.cwCalmVisual body.cwViewportManaged.cwViewportDense > .app {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.cwCalmVisual body.cwkUnifiedMenu { margin-left: 0 !important; }
  html.cwCalmVisual body:not(.cwkUnifiedMenu):has(> .cw-global-side) > .app { margin-left: 0 !important; }
  html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) { display: none !important; }
  html.cwCalmVisual .cwAcademyCompactTools { display: block !important; }
  html.cwCalmVisual :where(.main, .homeMain, .introMain) { padding-top: 58px !important; }
  html.cwCalmVisual .cwAcademyIntroductionGrid { grid-template-columns: 1fr !important; }
  html.cwCalmVisual .cwAcademyIntroductionAction,
  html.cwCalmVisual .cwAcademyIntroductionListen,
  html.cwCalmVisual .cwAcademyWelcomeJourney { grid-column: auto !important; }
}

/* Keep the learning map present while a lesson guide is open. */
@media (min-width: 901px) {
  html.cwCalmVisual #cwAcademyIntroductionOverlay {
    left: var(--cw-nav-width) !important;
    width: auto !important;
  }

  html.cwCalmVisual #cwAcademyIntroductionOverlay .cwAcademyIntroductionPage {
    max-width: calc(100% - 24px) !important;
  }
}

html.cwCalmVisual .cwAcademySettingsButton > span,
html.cwCalmVisual .cwAcademySearchIcon { display: none !important; }
html.cwCalmVisual .cwAcademyToolSearch input { padding-left: 11px !important; }

/* Remove the last legacy chrome from interactive lesson workspaces. */
html.cwCalmVisual :where(.top) {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(12,19,32,.72) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.top .title, .top h1) {
  color: #f5f7fb !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}

html.cwCalmVisual :where(.top .sub, .muted, .footerNote) {
  color: #8997aa !important;
  font-weight: 450 !important;
}

html.cwCalmVisual :where(.controlbar, .noteSelector) {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(12,19,32,.72) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.refTitle, .controlbar > b) {
  color: #d8dee8 !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  letter-spacing: -.01em !important;
}

html.cwCalmVisual :where(.cwLessonMessage, .cwLessonPath, .callout) {
  border: 0 !important;
  border-left: 2px solid rgba(126,174,255,.58) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
  padding: 13px 15px !important;
}

html.cwCalmVisual :where(.cwLessonMessageLabel, .cwLessonPathLabel) {
  color: #91a3ba !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}

html.cwCalmVisual .cwLessonMessage .lead {
  color: #edf1f7 !important;
  font-size: 14px !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
}

html.cwCalmVisual .cwLessonPathSteps { gap: 5px !important; }

html.cwCalmVisual .cwLessonPathStep {
  min-height: 0 !important;
  padding: 7px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
  color: #c5cedb !important;
  font-size: 10px !important;
  font-weight: 520 !important;
}

html.cwCalmVisual .cwLessonPathStep > :first-child {
  border-color: rgba(126,174,255,.34) !important;
  background: rgba(79,132,218,.16) !important;
  color: #bfd7ff !important;
}

html.cwCalmVisual :where(.waveModeStrip, .keyboardPanel) {
  border-color: rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.canvasCard, .degreeBoard, .progression, .timelineWrap) {
  border-color: rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  background: rgba(4,9,18,.42) !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.canvasCard h3, .canvasCard .eyebrow, .waveModeStrip .eyebrow) {
  color: #9cabc0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

html.cwCalmVisual :where(.waveModeBtn, .localFreezeBtn) {
  border-color: rgba(255,255,255,.1) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.035) !important;
  color: #cbd3df !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

html.cwCalmVisual :where(.waveModeBtn.active, .waveModeBtn[aria-pressed="true"]) {
  border-color: rgba(126,174,255,.36) !important;
  background: rgba(79,132,218,.2) !important;
  color: #eef5ff !important;
}

html.cwCalmVisual :where(.callout) {
  color: #d9e0ea !important;
  font-weight: 560 !important;
}

html.cwCalmVisual .cwAcademyCompactCourseLabel {
  margin: 16px 7px 7px;
  color: #718096;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html.cwCalmVisual .cwAcademyCompactCourse {
  display: grid;
  gap: 2px;
}

@media (max-width: 900px) {
  html.cwCalmVisual .cwAcademyCompactTools {
    left: 10px !important;
    top: 10px !important;
    z-index: 2147483646 !important;
    width: min(360px, calc(100vw - 20px)) !important;
  }

  html.cwCalmVisual .cwAcademyCompactTools summary {
    min-width: 72px;
    padding: 9px 14px !important;
    border-radius: 11px !important;
    color: #e8edf4 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    list-style: none;
  }

  html.cwCalmVisual .cwAcademyCompactTools summary::-webkit-details-marker { display: none; }

  html.cwCalmVisual .cwAcademyCompactTools summary::before {
    content: "☰";
    margin-right: 8px;
    color: #91b8f4;
    font-size: 13px;
  }

  html.cwCalmVisual .cwAcademyCompactTools[open] summary {
    background: #edf2f8 !important;
    color: #111827 !important;
  }

  html.cwCalmVisual .cwAcademyCompactTools[open] summary::before { content: "×"; color: #111827; }

  html.cwCalmVisual .cwAcademyCompactTools > section {
    max-height: calc(100vh - 68px) !important;
    overflow: auto !important;
    margin-top: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    background: rgba(9,15,27,.98) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(20px);
  }

  html.cwCalmVisual .cwAcademyCompactCourse .cwAcademyCategoryButton {
    min-height: 40px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 1100px) {
  html.cwCalmVisual .cwAcademyIntroductionGrid { grid-template-columns: 1fr !important; }
  html.cwCalmVisual .cwAcademyIntroductionAction,
  html.cwCalmVisual .cwAcademyIntroductionListen,
  html.cwCalmVisual .cwAcademyWelcomeJourney { grid-column: auto !important; }
  html.cwCalmVisual body.cwViewportFoundation .wrap {
    width: 100% !important;
    max-width: 760px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.cwCalmVisual #modContent {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
  }
  html.cwCalmVisual #modContent .lessonGrid { grid-template-columns: minmax(0, 1fr) !important; }
  html.cwCalmVisual #modContent :where(.stage, .keyboardPanel, .kbHeader, .keyboard) { min-width: 0 !important; max-width: 100% !important; }
  html.cwCalmVisual #modContent .selected { min-width: 0 !important; white-space: normal !important; }
  html.cwCalmVisual #modContent .kbHeader { height: auto !important; min-height: 24px !important; flex-wrap: wrap !important; }
  html.cwCalmVisual :where(.gpsGrid, .gpsStrip, .degreeBoard) { max-width: 100% !important; overflow-x: auto !important; }
  html.cwCalmVisual body.cwViewportMastery > .app { grid-template-columns: minmax(0, 1fr) !important; }
}

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

/* Modern learning-app shell — presentation only. */
html.cwCalmVisual {
  --cw-nav-width: 248px;
  --cw-bg: #080d17;
  --cw-bg-deep: #050912;
  --cw-nav: #090f1b;
  --cw-surface: rgba(22, 31, 48, .78);
  --cw-surface-raised: #172238;
  --cw-surface-subtle: rgba(18, 27, 43, .82);
  --cw-border: rgba(151, 175, 211, .22);
  --cw-border-soft: rgba(151, 175, 211, .12);
  --cw-text: #f7f9fc;
  --cw-text-soft: #c9d1dd;
  --cw-text-muted: #8795aa;
  --cw-blue: #a7c8ff;
  --cw-blue-strong: #6ea6ff;
  --cw-yellow: #ebd47b;
  --cw-green: #77d59b;
  --cw-radius-sm: 10px;
  --cw-radius: 16px;
  --cw-radius-lg: 24px;
  --cw-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

html.cwCalmVisual body {
  background:
    radial-gradient(circle at 78% -10%, rgba(55, 96, 165, .14), transparent 34rem),
    linear-gradient(180deg, var(--cw-bg), var(--cw-bg-deep)) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) {
  width: var(--cw-nav-width) !important;
  padding: 22px 12px 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 18rem),
    var(--cw-nav) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 18px 0 50px rgba(0,0,0,.12) !important;
}

html.cwCalmVisual :where(.app, .academyShell) {
  grid-template-columns: var(--cw-nav-width) minmax(0, 1fr) !important;
}

html.cwCalmVisual body.cwkUnifiedMenu { margin-left: var(--cw-nav-width) !important; }

html.cwCalmVisual body:not(.cwkUnifiedMenu):has(> .cw-global-side) > .app {
  margin-left: var(--cw-nav-width) !important;
}

html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) > :where(.brand, .cw-brand, .academyBrand, .cwkBrand) {
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 8px 24px !important;
  background-size: 170px auto !important;
  background-position: left 1px !important;
}

html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) > :where(.brand, .cw-brand, .academyBrand, .cwkBrand)::after {
  content: "Learning Academy" !important;
  padding-top: 42px !important;
  color: #75849a !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .18em !important;
}

/* Quick tools behave like a compact command area rather than another card. */
html.cwCalmVisual .cwAcademyTools {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 7px !important;
  margin: 0 4px 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html.cwCalmVisual .cwAcademyToolsTitle {
  margin: 0 6px 2px !important;
  color: #697990 !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
}

html.cwCalmVisual .cwAcademySettingsButton {
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.035) !important;
  color: #cbd5e2 !important;
  font-size: 12px !important;
}

html.cwCalmVisual .cwAcademySettingsButton small { display: none !important; }

html.cwCalmVisual .cwAcademyToolSearch {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 6px !important;
  margin: 0 !important;
}

html.cwCalmVisual .cwAcademyToolSearch input {
  height: 38px !important;
  padding: 8px 9px 8px 31px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--cw-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html.cwCalmVisual .cwAcademyToolSearch button {
  height: 38px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #e8eef8 !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html.cwCalmVisual .cwAcademyToolGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 !important;
}

html.cwCalmVisual .cwAcademyToolGrid button {
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 6px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
  color: #aeb9c9 !important;
  font-size: 10px !important;
  text-align: center !important;
}

/* The course map is a single quiet, numbered sequence. */
html.cwCalmVisual .cwAcademyMainLabel {
  margin: 0 10px 7px !important;
  color: #697990 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html.cwCalmVisual .cwAcademyMainLabel::after {
  content: none;
}

html.cwCalmVisual .cwAcademyCategoryButton {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) 10px !important;
  grid-auto-rows: auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 1px 0 !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #b8c2d1 !important;
  font-size: 12px !important;
  font-weight: 570 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}

html.cwCalmVisual .cwAcademyCategoryButton::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: #718096;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .02em;
}

html.cwCalmVisual .cwAcademyCategoryButton::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #536176;
  font-size: 17px;
  font-weight: 400;
}

html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="welcome"]::before { content: "00"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="why"]::before { content: "01"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="scales"]::before { content: "02"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="intervals"]::before { content: "03"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="rectangle"]::before { content: "04"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="construction"]::before { content: "05"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="chords"]::before { content: "06"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="movement"]::before { content: "07"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="colour"]::before { content: "08"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="modulation"]::before { content: "09"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="mastery"]::before { content: "10"; }
html.cwCalmVisual .cwAcademyCategoryButton[data-cw-category="playing"]::before { content: "11"; }

html.cwCalmVisual .cwAcademyCategoryButton small {
  grid-column: 2 !important;
  margin: 1px 0 0 !important;
  color: #66758b !important;
  font-size: 9px !important;
  font-weight: 450 !important;
}

html.cwCalmVisual .cwAcademyCategoryButton:hover,
html.cwCalmVisual .cwAcademyCategoryButton:focus-visible {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.045) !important;
  color: #eef3fa !important;
}

html.cwCalmVisual .cwAcademyCategoryButton.active {
  border-color: rgba(126,174,255,.2) !important;
  background: linear-gradient(135deg, rgba(80,126,202,.22), rgba(255,255,255,.04)) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html.cwCalmVisual .cwAcademyCategoryButton.active::before {
  border-color: rgba(145,187,255,.38);
  background: rgba(96,146,225,.24);
  color: #cde0ff;
}

html.cwCalmVisual .cwAcademyCategoryButton.active::after { color: #9dc1ff; }

/* Airier Apple-like content surfaces and typography. */
html.cwCalmVisual :where(.main) { padding: clamp(24px, 3.5vw, 52px) !important; }

html.cwCalmVisual :where(h1) {
  max-width: 1000px;
  font-size: clamp(2.45rem, 4.5vw, 4.6rem) !important;
  font-weight: 680 !important;
  letter-spacing: -.055em !important;
  line-height: 1.02 !important;
}

html.cwCalmVisual :where(h2) {
  font-weight: 640 !important;
  letter-spacing: -.025em !important;
}

html.cwCalmVisual :where(p, li, .copy, .lead) {
  color: #c4ccd8 !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
}

html.cwCalmVisual :where(.card, .panel, .lessonCard, .studio, .messageCard, .visualCard, .toneBox, .info, .cluePanel, .feedback, .testBox, .cwGuidePanel, .haIntroPanel, .cwAcademyIntroductionGrid article, .cwAcademyCategoryGroups section, .cwAskAnswerCard) {
  border-color: rgba(255,255,255,.075) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important;
}

html.cwCalmVisual .cwAcademyIntroductionPage {
  width: min(1160px, calc(100vw - 32px)) !important;
  padding: clamp(28px, 4vw, 56px) !important;
  border-color: rgba(255,255,255,.08) !important;
  background:
    radial-gradient(circle at 90% -10%, rgba(79,130,220,.13), transparent 30rem),
    rgba(8,13,23,.96) !important;
}

html.cwCalmVisual .cwAcademyIntroductionQuestion {
  max-width: 850px !important;
  margin-bottom: 34px !important;
  color: #b8c2d1 !important;
  font-size: clamp(19px, 2vw, 26px) !important;
  font-weight: 420 !important;
  letter-spacing: -.018em !important;
}

html.cwCalmVisual .cwAcademyIntroductionGrid { gap: 16px !important; }

html.cwCalmVisual .cwAcademyIntroductionGrid article {
  padding: clamp(22px, 2.3vw, 30px) !important;
  border-radius: 20px !important;
}

html.cwCalmVisual .cwAcademyIntroductionGrid h2 {
  color: #b7d2ff !important;
  font-size: 18px !important;
}

/* A consistent floating lesson toolbar replaces assorted heavy nav strips. */
html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) {
  position: sticky !important;
  top: 12px !important;
  z-index: 180 !important;
  min-height: 50px !important;
  margin: 0 0 26px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 14px !important;
  background: rgba(9,15,27,.82) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(18px) saturate(135%);
}

html.cwCalmVisual :where(.pill, .cwNavPill, .cwSharedLessonMenu) {
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-color: transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #aeb9c9 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html.cwCalmVisual :where(.pill, .cwNavPill, .cwSharedLessonMenu):hover,
html.cwCalmVisual :where(.pill, .cwNavPill, .cwSharedLessonMenu):focus-visible {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

html.cwCalmVisual :where(.pill.menu, .cwNavPill.menu, .cwSharedLessonMenu) {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.05) !important;
  color: #e6ebf2 !important;
}

html.cwCalmVisual :where(.cwNavPill.next, .pill.next) {
  border-color: transparent !important;
  background: #e8eef8 !important;
  color: #101827 !important;
}

html.cwCalmVisual :where(.btn, .choice, .noteBtn, .keyBtn, .seriesCard, .chromaticBtn, .shiftStage) {
  border-color: rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
}

html.cwCalmVisual :where(.btn.primary, .btn.active, .choice.selected, .noteBtn.active, .keyBtn.active, .seriesCard.active) {
  border-color: rgba(126,174,255,.34) !important;
  background: rgba(79,132,218,.28) !important;
}

@media (max-width: 900px) {
  html.cwCalmVisual body.cwkUnifiedMenu { margin-left: 0 !important; }
  html.cwCalmVisual body:not(.cwkUnifiedMenu):has(> .cw-global-side) > .app { margin-left: 0 !important; }
  html.cwCalmVisual .cwAcademyCompactTools summary {
    border: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(9,15,27,.88) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.25) !important;
    backdrop-filter: blur(16px);
  }
}

/* Direct-learning refinement: deeper canvas, clearer wayfinding, optional guides. */
html.cwCalmVisual {
  --cw-bg: #03060c;
  --cw-bg-deep: #010207;
  --cw-nav: #050911;
  --cw-surface: #0b111c;
  --cw-surface-raised: #101826;
  --cw-surface-subtle: #080e17;
  --cw-border: #263449;
  --cw-border-soft: #192536;
  --cw-text: #f7f9fc;
  --cw-text-soft: #c7d0dc;
  --cw-text-muted: #8795a9;
  --cw-blue: #a9c8ff;
  --cw-blue-strong: #6ea5ff;
  --cw-shadow: 0 28px 80px rgba(0, 0, 0, .52);
  background: #010207;
}

html.cwCalmVisual body {
  background:
    radial-gradient(circle at 82% -12%, rgba(70, 113, 190, .13), transparent 35rem),
    radial-gradient(circle at 12% 108%, rgba(45, 106, 122, .055), transparent 32rem),
    linear-gradient(180deg, #03060c 0%, #010207 100%) !important;
}

html.cwCalmVisual :where(.main, .homeMain, .introMain) {
  background: transparent !important;
}

html.cwCalmVisual :where(.side, .cw-global-side, .academyNav, .cwkUnifiedSide) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 17rem),
    rgba(4, 8, 15, .98) !important;
  border-right-color: rgba(255,255,255,.055) !important;
  box-shadow: 22px 0 70px rgba(0,0,0,.25) !important;
}

html.cwCalmVisual :where(.card, .panel, .lessonCard, .studio, .messageCard, .visualCard, .toneBox, .info, .cluePanel, .feedback, .testBox, .cwGuidePanel, .haIntroPanel, .cwAcademyIntroductionGrid article, .cwAcademyCategoryGroups section, .cwAskAnswerCard) {
  border-color: rgba(255,255,255,.065) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.046), rgba(255,255,255,.018)),
    rgba(7, 12, 20, .82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) {
  top: 10px !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(4, 8, 15, .88) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(22px) saturate(145%);
}

html.cwCalmVisual :where(.pill.menu, .cwNavPill.menu, .cwSharedLessonMenu) {
  border-color: rgba(151,190,255,.22) !important;
  background: rgba(79,126,202,.15) !important;
  color: #dbe8ff !important;
}

html.cwCalmVisual :where(.cwNavPill.next, .pill.next) {
  background: #f2f5fa !important;
  color: #0b1220 !important;
}

html.cwCalmVisual :where(#cwAskOverlay, #cwAcademySettingsOverlay, #cwAcademyCategoryOverlay, #cwAcademyIntroductionOverlay) {
  background: rgba(0, 2, 6, .9) !important;
  backdrop-filter: blur(12px) saturate(115%);
}

html.cwCalmVisual .cwAcademyIntroductionPage {
  background:
    radial-gradient(circle at 90% -12%, rgba(79,130,220,.12), transparent 31rem),
    rgba(3, 6, 12, .985) !important;
  box-shadow: 0 32px 100px rgba(0,0,0,.7) !important;
}

html.cwCalmVisual .cwAcademyIntroductionQuestion {
  margin-bottom: 18px !important;
}

html.cwCalmVisual .cwAcademyIntroductionActions {
  position: sticky;
  top: -1px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 0 22px !important;
  padding: 9px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 14px !important;
  background: rgba(5, 9, 16, .88) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.3) !important;
  backdrop-filter: blur(20px) saturate(135%);
}

html.cwCalmVisual .cwAcademyIntroductionActions .cwAcademyWelcomeReturn {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #9aa8ba !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html.cwCalmVisual .cwAcademyIntroductionActions .cwAcademyExploreLesson {
  min-height: 40px !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f2f5fa !important;
  color: #0b1220 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html.cwCalmVisual .cwAcademyIntroductionActions button:hover,
html.cwCalmVisual .cwAcademyIntroductionActions button:focus-visible {
  filter: brightness(1.08);
}

@media (max-width: 700px) {
  html.cwCalmVisual .top:has(> .lessonNav),
  html.cwCalmVisual .top:has(> .topNav) {
    display: block !important;
    height: auto !important;
    min-height: 215px !important;
    min-block-size: 215px !important;
    padding: 16px 14px 14px !important;
  }

  html.cwCalmVisual .main:has(> .cwLessonHeader) {
    grid-template-rows: auto !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) {
    position: sticky !important;
    top: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 14px 0 0 !important;
    padding: 6px !important;
    gap: 5px !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 6px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > :where(.menu, .cwSharedLessonMenu, .cwLessonMenuBtn) { order: 1; }
  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > :where(.next, [id="nextBtn"]) { order: 2; }
  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > .cwAcademyIntroButton { order: 3; }
  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > :where(.prev, [id="prevBtn"]) { order: 4; }

  html.cwCalmVisual .cwAcademyIntroductionActions {
    top: 0;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  html.cwCalmVisual .cwAcademyIntroductionActions button {
    width: 100% !important;
  }
}

/* The Start Composing introduction owns its own scrolling main column. Keep the
   shared toolbar inside that column so the academy sidebar still starts at the top. */
html.cwCalmVisual .introMain:has(> .cwUnifiedLessonBar) {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  overflow-y: auto !important;
}
html.cwCalmVisual .introMain:has(> .cwUnifiedLessonBar) > .introTop {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 20px 14px !important;
  align-items: flex-start !important;
}
html.cwCalmVisual .introMain:has(> .cwUnifiedLessonBar) > .introTop h1 {
  max-width: 980px !important;
  margin: 0 !important;
  font-size: clamp(27px, 3vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}
html.cwCalmVisual .introMain:has(> .cwUnifiedLessonBar) > .introTop p {
  margin: 8px 0 0 !important;
  line-height: 1.4 !important;
}

/* Keep headings inside lesson surfaces instructional, not billboard-sized. */
html.cwCalmVisual :where(.card, .panel, .lessonCard, .messageCard, .visualCard, .studio, .cwGuidePanel, .haIntroPanel) h1 {
  max-width: 24ch !important;
  font-size: clamp(1.75rem, 2.15vw, 2.35rem) !important;
  font-weight: 670 !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
}

/* Large simulations use a centred learning canvas rather than filling every pixel. */
html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .main > :where(.top, .keySection, .workspace) {
  width: min(calc(100% - 32px), 1440px) !important;
  margin-inline: auto !important;
}

html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .workspace {
  grid-template-columns: minmax(360px, 400px) minmax(0, 1fr) !important;
  min-width: 0 !important;
  gap: 14px !important;
  padding-inline: 0 !important;
}

html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .lessonCard h1 {
  max-width: none !important;
  font-size: clamp(1.8rem, 1.8vw, 2.05rem) !important;
}

html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .studio {
  min-width: 0 !important;
}

@media (min-width: 901px) and (max-height: 900px) {
  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .timelineWrap {
    flex-basis: clamp(190px, 27vh, 245px) !important;
    min-height: 180px !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .timeline {
    min-height: 155px !important;
  }
}

@media (min-width: 1151px) {
  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .workspace {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) :where(.lessonCard, .studio) {
    height: auto !important;
    min-height: 0 !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .timelineWrap {
    flex: 0 0 245px !important;
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .timeline {
    height: 216px !important;
    min-height: 216px !important;
  }
}

@media (max-width: 1150px) and (min-width: 701px) {
  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .lessonCard {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* B077KZ — sharper lesson typography, stable navigation and safer overview spacing. */
html.cwCalmVisual {
  --cw-radius-sm: 6px;
  --cw-radius: 10px;
  --cw-radius-lg: 14px;
}

/* Keep the four shared lesson controls in predictable slots on every desktop page. */
@media (min-width: 701px) {
  html.cwCalmVisual .cwAcademyLessonNav {
    display: grid !important;
    grid-template-columns: 128px 86px 132px 112px !important;
    justify-content: end !important;
    align-items: center !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav) {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-left: auto !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > .cwAcademyIntroButton {
    width: 128px !important;
    text-align: center !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > :where(.menu, .cwSharedLessonMenu, .cwLessonMenuBtn) {
    width: 86px !important;
    text-align: center !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > :where(.prev, [id="prevBtn"]) {
    width: 132px !important;
    text-align: center !important;
  }

  html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) > :where(.next, [id="nextBtn"]) {
    width: 112px !important;
    text-align: center !important;
  }
}

html.cwCalmVisual :where(.topNav, .lessonNav, .cwAcademyLessonNav) {
  border-radius: 10px !important;
}

html.cwCalmVisual :where(.pill, .cwNavPill, .cwSharedLessonMenu) {
  border-radius: 7px !important;
  font-weight: 570 !important;
}

/* Overview cards must occupy their own flow space and never crowd the lesson heading. */
html.cwCalmVisual .cwLessonOrientation {
  position: relative !important;
  z-index: 2 !important;
  min-height: 0 !important;
  margin: 12px auto 26px !important;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  overflow: visible !important;
}

html.cwCalmVisual .main > .cwLessonOrientation + * {
  margin-top: 0 !important;
}

html.cwCalmVisual .workspace > .cwLessonOrientation {
  margin: 0 0 12px !important;
}

html.cwCalmVisual .cwLessonOrientationOutcome strong {
  max-width: 70ch !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
}

html.cwCalmVisual :where(.cwLearningMode, .cwLearningMode button, .cwCheckButton) {
  border-radius: 6px !important;
}

html.cwCalmVisual :where(.card, .panel, .lessonCard, .studio, .messageCard, .visualCard, .toneBox, .info, .cluePanel, .feedback, .testBox, .cwGuidePanel, .haIntroPanel, .cwAcademyIntroductionGrid article, .cwAcademyCategoryGroups section, .cwAskAnswerCard) {
  border-radius: 10px !important;
}

/* Older Sound Foundations lessons now use the same compact type hierarchy as the Academy. */
html.cwCalmVisual body.cwViewportIntroduction #academyLessonTitle {
  max-width: 28ch !important;
  margin: 0 0 14px !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  font-weight: 640 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04 !important;
}

html.cwCalmVisual body.cwViewportIntroduction #academyLessonCategory {
  margin: 0 0 14px !important;
  color: #8dbbfa !important;
  font-size: 13px !important;
  font-weight: 640 !important;
  letter-spacing: .015em !important;
  line-height: 1.35 !important;
}

html.cwCalmVisual body.cwViewportIntroduction :where(.question, .teachTitle) {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem) !important;
  font-weight: 640 !important;
  letter-spacing: -.025em !important;
  line-height: 1.25 !important;
}

html.cwCalmVisual body.cwViewportIntroduction :where(.answer, .takeaway, .teachBox) {
  font-size: 15px !important;
  line-height: 1.58 !important;
}

html.cwCalmVisual body.cwViewportIntroduction .introWorkspace .stage {
  align-items: start !important;
}

html.cwCalmVisual body.cwViewportIntroduction .introWorkspace .stage > .panel:first-child {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Previous and Next keep fixed edge positions; optional audio remains centred. */
html.cwCalmVisual body.cwViewportIntroduction .navFooter {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) 104px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 18px !important;
}

html.cwCalmVisual body.cwViewportIntroduction .navFooter > :first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

html.cwCalmVisual body.cwViewportIntroduction .navFooter > :last-child {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

html.cwCalmVisual body.cwViewportIntroduction .navFooter > .cwIntroTransport {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.cwCalmVisual body.cwViewportIntroduction .cwIntroTransport > :where(.cwIntroReplay, .cwIntroStop) {
  position: static !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/* Compatibility for an already-cached audio helper that inserted both buttons directly. */
html.cwCalmVisual body.cwViewportIntroduction .navFooter > .cwIntroReplay {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  max-width: calc(100% - 82px) !important;
}

html.cwCalmVisual body.cwViewportIntroduction .navFooter > .cwIntroStop {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

@media (max-width: 1450px) {
  html.cwCalmVisual body.cwViewportIntroduction .navFooter > .cwIntroTransport {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  html.cwCalmVisual body.cwViewportIntroduction .navFooter > .cwIntroReplay {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  html.cwCalmVisual body.cwViewportIntroduction .navFooter > .cwIntroStop {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }
}

html.cwCalmVisual body.cwViewportIntroduction .navFooter > :where(:first-child, :last-child) {
  width: 96px !important;
  min-width: 96px !important;
  text-align: center !important;
}

/* Cards are deliberately squarer and text panels are content-led rather than oversized. */
html.cwCalmVisual :where(.card, .panel, .lessonCard, .studio, .messageCard, .visualCard, .toneBox, .info, .cluePanel, .feedback, .testBox, .cwGuidePanel, .haIntroPanel, .cwAcademyIntroductionGrid article, .cwAcademyCategoryGroups section, .cwAskAnswerCard) {
  border-radius: 10px !important;
}

html.cwCalmVisual :where(.takeaway, .teachBox, .teachMini, .intervalCard, .shiftCard, .musicCard, .seriesCard, .bridgeCard, .rectCell, .miniWave) {
  border-radius: 8px !important;
}

html.cwCalmVisual :where(.btn, .choice, .noteBtn, .keyBtn, .chromaticBtn, .shiftStage, .launch, .viewBtn) {
  border-radius: 7px !important;
  font-weight: 620 !important;
}

html.cwCalmVisual :where(.cwUnderstandingPanel, .cwAcademyIntroductionPage) {
  border-radius: 14px !important;
}

@media (max-width: 700px) {
  html.cwCalmVisual .cwLessonOrientation {
    margin: 10px auto 20px !important;
  }

  html.cwCalmVisual .workspace > .cwLessonOrientation {
    margin-bottom: 12px !important;
  }

  html.cwCalmVisual body.cwViewportIntroduction #academyLessonTitle {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
  }

  html.cwCalmVisual body.cwViewportIntroduction .navFooter {
    grid-template-columns: 84px minmax(0, 1fr) 84px !important;
    gap: 7px !important;
  }

  html.cwCalmVisual body.cwViewportIntroduction .cwIntroTransport > .cwIntroReplay {
    width: min(100%, 190px) !important;
    white-space: normal !important;
  }

  html.cwCalmVisual body.cwViewportIntroduction .cwIntroTransport > .cwIntroStop {
    flex: 0 0 auto !important;
  }

}

/* Learner-first course stages. */
html.cwCalmVisual .cwAcademyStage {
  margin: 3px 0 !important;
  border: 0 !important;
}

html.cwCalmVisual .cwAcademyStage > summary {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #aeb9c9 !important;
  cursor: pointer !important;
  list-style: none !important;
}

html.cwCalmVisual .cwAcademyStage > summary::-webkit-details-marker { display: none; }

html.cwCalmVisual .cwAcademyStage > summary::after {
  content: "+";
  grid-column: 3;
  grid-row: 1;
  color: #64738a;
  font-size: 15px;
}

html.cwCalmVisual .cwAcademyStage[open] > summary::after { content: "−"; }

html.cwCalmVisual .cwAcademyStage > summary > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #7890ad;
  font-size: 9px;
  font-weight: 750;
}

html.cwCalmVisual .cwAcademyStage > summary > b {
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

html.cwCalmVisual .cwAcademyStage > summary > .cwStageProgress {
  grid-column: 2;
  margin-top: -7px;
  color: #617087 !important;
  font-size: 8px !important;
  font-weight: 550 !important;
}

html.cwCalmVisual .cwAcademyStage > summary:hover,
html.cwCalmVisual .cwAcademyStage > summary:focus-visible,
html.cwCalmVisual .cwAcademyStage[open] > summary {
  border-color: rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.035) !important;
  color: #f2f5fa !important;
  outline: none !important;
}

html.cwCalmVisual .cwAcademyStageItems {
  margin: 3px 0 8px 14px !important;
  padding-left: 9px !important;
  border-left: 1px solid rgba(151,190,255,.13) !important;
}

html.cwCalmVisual .cwStagePathLabel {
  padding: 7px 9px 3px !important;
  color: #6f7d91 !important;
  font-size: 8px !important;
  font-weight: 650 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html.cwCalmVisual .cwAcademyStageItems .cwAcademyCategoryButton {
  min-height: 38px !important;
  grid-template-columns: minmax(0,1fr) 10px !important;
  padding-left: 9px !important;
}

html.cwCalmVisual .cwAcademyStageItems .cwAcademyCategoryButton::before { display: none !important; }
html.cwCalmVisual .cwAcademyStageItems .cwAcademyCategoryButton::after { grid-column: 2 !important; }
html.cwCalmVisual .cwAcademyStageItems .cwAcademyCategoryButton small { grid-column: 1 !important; }

html.cwCalmVisual .cwAcademyStartButton {
  margin-bottom: 8px !important;
  border-color: rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.025) !important;
}

/* Consistent purpose, progress and completion checkpoint for every lesson. */
html.cwCalmVisual .cwLessonOrientation {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 18px !important;
  width: min(calc(100% - 32px), 1440px) !important;
  margin: 10px auto 4px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 15px !important;
  background: rgba(7, 12, 20, .8) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.02) !important;
  backdrop-filter: blur(16px);
}

html.cwCalmVisual .workspace > .cwLessonOrientation {
  width: 100% !important;
  margin: 0 0 2px !important;
}

html.cwCalmVisual .cwLessonOrientationMeta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

html.cwCalmVisual .cwLessonOrientationMeta span {
  color: #8292a8 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html.cwCalmVisual .cwLessonOrientationMeta span + span::before {
  content: "•";
  margin-right: 7px;
  color: #45536a;
}

html.cwCalmVisual .cwLessonOrientationOutcome {
  min-width: 0;
}

html.cwCalmVisual .cwLessonOrientationOutcome small,
html.cwCalmVisual .cwLearningEyebrow {
  display: block;
  margin-bottom: 3px;
  color: #9fc2ff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html.cwCalmVisual .cwLessonOrientationOutcome strong {
  display: block;
  max-width: 78ch;
  color: #e9eef6 !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.4 !important;
}

html.cwCalmVisual .cwLessonOrientationActions {
  display: flex;
  align-items: end;
  gap: 8px;
}

html.cwCalmVisual .cwLearningMode {
  display: flex;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

html.cwCalmVisual .cwLearningMode[hidden] { display: none !important; }

html.cwCalmVisual .cwLearningMode button,
html.cwCalmVisual .cwCheckButton {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #9ba8ba !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

html.cwCalmVisual .cwLearningMode button.active {
  background: rgba(117,159,226,.18) !important;
  color: #dce9ff !important;
}

html.cwCalmVisual .cwCheckButton {
  border: 1px solid rgba(255,255,255,.095) !important;
  background: rgba(255,255,255,.045) !important;
  color: #dce3ec !important;
}

html.cwCalmVisual .cwLessonOrientation.complete .cwCheckButton {
  border-color: rgba(105,201,136,.24) !important;
  background: rgba(57,135,83,.16) !important;
  color: #a9e6bc !important;
}

html.cwCalmVisual body.cwLearningExplore .workspace:has(> .lessonCard + .studio) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.cwCalmVisual body.cwLearningExplore .workspace > .lessonCard {
  display: none !important;
}

/* Reflection dialog: completion remains a learner decision, never a gate. */
html.cwCalmVisual #cwUnderstandingOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483642;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(0,2,6,.88);
  backdrop-filter: blur(12px);
}

html.cwCalmVisual #cwUnderstandingOverlay.open { display: grid; }

html.cwCalmVisual .cwUnderstandingPanel {
  width: min(620px, calc(100vw - 28px));
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: radial-gradient(circle at 90% -10%, rgba(79,130,220,.14), transparent 24rem), #080d16;
  box-shadow: 0 30px 100px rgba(0,0,0,.7);
}

html.cwCalmVisual .cwUnderstandingPanel h2 {
  margin: 7px 0 12px;
  color: #f4f7fb !important;
  font-size: clamp(1.55rem, 3vw, 2.2rem) !important;
}

html.cwCalmVisual .cwUnderstandingPanel p {
  color: #d5dde8 !important;
  font-size: 17px !important;
}

html.cwCalmVisual .cwUnderstandingPanel > small {
  display: block;
  color: #8e9caf;
  line-height: 1.45;
}

html.cwCalmVisual .cwUnderstandingPanel footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

html.cwCalmVisual .cwUnderstandingPanel button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: transparent;
  color: #b8c3d1;
}

html.cwCalmVisual .cwUnderstandingPanel .cwUnderstandingComplete {
  border: 0;
  background: #f2f5fa;
  color: #0b1220;
}

/* Homepage becomes a short starting dashboard; the full rationale remains optional. */
html.cwCalmVisual .cwWelcomeDashboard {
  margin: 20px 0 22px;
}

html.cwCalmVisual .cwWelcomeActions {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

html.cwCalmVisual .cwWelcomeActions button {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
}

html.cwCalmVisual .cwWelcomePrimary {
  border: 0 !important;
  background: #f2f5fa !important;
  color: #0b1220 !important;
}

html.cwCalmVisual .cwWelcomeSecondary {
  background: rgba(255,255,255,.04) !important;
  color: #c6d0dd !important;
}

html.cwCalmVisual .cwWelcomeProgress {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

html.cwCalmVisual .cwWelcomeProgress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #cbd4df;
  font-size: 11px;
}

html.cwCalmVisual .cwWelcomeProgressTrack {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

html.cwCalmVisual .cwWelcomeProgressFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b9dea, #8ed6ae);
}

html.cwCalmVisual .cwWelcomeStages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

html.cwCalmVisual .cwWelcomeStages button {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 142px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  color: #eef3fa;
  text-align: left;
}

html.cwCalmVisual .cwWelcomeStages button:hover,
html.cwCalmVisual .cwWelcomeStages button:focus-visible {
  border-color: rgba(155,193,255,.28);
  background: rgba(79,126,202,.12);
  outline: none;
}

html.cwCalmVisual .cwWelcomeStages span {
  margin-bottom: 16px;
  color: #7fa5df;
  font-size: 10px;
  font-weight: 750;
}

html.cwCalmVisual .cwWelcomeStages b {
  color: #f2f5fa !important;
  font-size: 14px !important;
}

html.cwCalmVisual .cwWelcomeStages small {
  align-self: end;
  margin-top: 12px;
  color: #8f9daf;
  font-size: 10px;
  line-height: 1.4;
}

/* B077LL — recognisable, restrained line icons for the Academy journey. */
html.cwCalmVisual .cwWelcomeStages button {
  --cw-stage-accent: #86baf2;
  --cw-stage-glow: rgba(134,186,242,.13);
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "number icon" "title title" "copy copy";
  min-height: 168px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

html.cwCalmVisual .cwWelcomeStages button:nth-child(2) { --cw-stage-accent: #72c9d7; --cw-stage-glow: rgba(114,201,215,.13); }
html.cwCalmVisual .cwWelcomeStages button:nth-child(3) { --cw-stage-accent: #a89af2; --cw-stage-glow: rgba(168,154,242,.14); }
html.cwCalmVisual .cwWelcomeStages button:nth-child(4) { --cw-stage-accent: #7ccfa9; --cw-stage-glow: rgba(124,207,169,.13); }
html.cwCalmVisual .cwWelcomeStages button:nth-child(5) { --cw-stage-accent: #e0aa76; --cw-stage-glow: rgba(224,170,118,.13); }

html.cwCalmVisual .cwWelcomeStages button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -58px;
  right: -54px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cw-stage-glow), transparent 68%);
  pointer-events: none;
}

html.cwCalmVisual .cwWelcomeStages button > span {
  grid-area: number;
  align-self: start;
  margin: 4px 0 0;
  color: var(--cw-stage-accent);
}

html.cwCalmVisual .cwWelcomeStageIcon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid color-mix(in srgb, var(--cw-stage-accent) 32%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cw-stage-accent) 7%, transparent);
  color: var(--cw-stage-accent);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

html.cwCalmVisual .cwWelcomeStageIcon svg {
  width: 25px;
  height: 25px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.cwCalmVisual .cwWelcomeStages button > b {
  grid-area: title;
  align-self: end;
  margin-top: 13px;
}

html.cwCalmVisual .cwWelcomeStages button > small {
  grid-area: copy;
}

html.cwCalmVisual .cwWelcomeStages button:hover,
html.cwCalmVisual .cwWelcomeStages button:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cw-stage-accent) 42%, transparent);
  background: color-mix(in srgb, var(--cw-stage-accent) 8%, rgba(255,255,255,.02));
}

html.cwCalmVisual .cwWelcomeStages button:hover .cwWelcomeStageIcon,
html.cwCalmVisual .cwWelcomeStages button:focus-visible .cwWelcomeStageIcon {
  transform: translateY(-1px) scale(1.04);
  border-color: color-mix(in srgb, var(--cw-stage-accent) 52%, transparent);
  background: color-mix(in srgb, var(--cw-stage-accent) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html.cwCalmVisual .cwWelcomeStages button,
  html.cwCalmVisual .cwWelcomeStageIcon { transition: none; }
}

html.cwCalmVisual .cwWelcomeMore {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.075);
  padding-top: 15px;
}

html.cwCalmVisual .cwWelcomeMore > summary {
  width: fit-content;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  color: #aeb9c8;
  cursor: pointer;
}

html.cwCalmVisual .cwWelcomeMore > .cwAcademyIntroductionGrid { margin-top: 14px; }
html.cwCalmVisual .cwWelcomeLegacyAction { display: none !important; }

@media (max-width: 1000px) {
  html.cwCalmVisual .cwWelcomeStages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  html.cwCalmVisual .cwLessonOrientation {
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
  }

  html.cwCalmVisual .workspace > .cwLessonOrientation { width: 100% !important; }
  html.cwCalmVisual .cwLessonOrientationActions { align-items: stretch; flex-direction: column; }
  html.cwCalmVisual .cwLearningMode { display: grid; grid-template-columns: 1fr 1fr; }
  html.cwCalmVisual .cwCheckButton { width: 100%; }
  html.cwCalmVisual .cwWelcomeStages { grid-template-columns: minmax(0, 1fr); }
  html.cwCalmVisual .cwWelcomeStages button { min-height: 108px; }
  html.cwCalmVisual .cwWelcomeActions { flex-direction: column; }
  html.cwCalmVisual .cwUnderstandingPanel footer { flex-direction: column-reverse; }
  html.cwCalmVisual .cwUnderstandingPanel button { width: 100%; }
}

/* Intermediate-width laptops keep the fixed rail without inheriting legacy page minimums. */
@media (min-width: 901px) {
  html.cwCalmVisual body.cwkUnifiedMenu {
    width: calc(100vw - var(--cw-nav-width)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - var(--cw-nav-width)) !important;
  }

  html.cwCalmVisual body.cwkUnifiedMenu > .app {
    width: calc(100vw - var(--cw-nav-width)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - var(--cw-nav-width)) !important;
  }

  html.cwCalmVisual body.cwkUnifiedMenu > .app > :where(.main, main),
  html.cwCalmVisual body.cwkUnifiedMenu :where(.wrap, .content, .lessonContent, .workspace) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 901px) and (max-width: 1450px) {
  html.cwCalmVisual body.cwViewportFoundation .wrap {
    grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr) !important;
  }

  html.cwCalmVisual body.cwViewportFoundation .haIntroGrid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.15fr) !important;
  }

  html.cwCalmVisual body.cwViewportFoundation :where(.haKeyboardArea, .ha-build .haKeyboardArea, .ha-quiz .haKeyboardArea) {
    grid-template-columns: minmax(0, 1.75fr) minmax(250px, .7fr) !important;
  }

  html.cwCalmVisual body.cwViewportFoundation :where(.card, aside, .cwGuidePanel) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.cwCalmVisual body.cwViewportFocused .actionPanel {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr) minmax(170px, .62fr) !important;
  }
}

@media (max-width: 700px) {
  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .main > :where(.top, .keySection, .workspace) {
    width: 100% !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  html.cwCalmVisual body:has(.workspace > .lessonCard + .studio) .lessonCard {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Final cascade guard for the learner overview rules declared above. */
html.cwCalmVisual .cwLessonOrientation {
  position: relative !important;
  z-index: 2 !important;
  min-height: 0 !important;
  margin: 12px auto 26px !important;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  overflow: visible !important;
}

html.cwCalmVisual .workspace > .cwLessonOrientation {
  margin: 0 0 12px !important;
}

html.cwCalmVisual .cwLessonOrientationOutcome strong {
  max-width: 70ch !important;
  font-weight: 520 !important;
  line-height: 1.45 !important;
}

html.cwCalmVisual :where(.cwLearningMode, .cwLearningMode button, .cwCheckButton) {
  border-radius: 6px !important;
}

html.cwCalmVisual :where(.card, .panel, .lessonCard, .studio, .messageCard, .visualCard, .toneBox, .info, .cluePanel, .feedback, .testBox, .cwGuidePanel, .haIntroPanel, .cwAcademyIntroductionGrid article, .cwAcademyCategoryGroups section, .cwAskAnswerCard) {
  border-radius: 10px !important;
}

/* Foundation lessons pre-date the shared overview and used a one-screen fixed grid.
   Let their rows follow their content so the overview and title can never collide. */
html.cwCalmVisual body.cwViewportFoundation {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.cwCalmVisual body.cwViewportFoundation .main {
  display: block !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

html.cwCalmVisual body.cwViewportFoundation .wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html.cwCalmVisual body.cwViewportFoundation .haIntroGrid {
  grid-template-columns: minmax(250px, .82fr) minmax(280px, 1fr) minmax(340px, 1.15fr) !important;
  height: auto !important;
  min-height: 128px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html.cwCalmVisual body.cwViewportFoundation :where(.haTitlePanel, .haIntroPanel) {
  min-height: 106px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html.cwCalmVisual body.cwViewportFoundation .haTitlePanel h1 {
  max-width: none !important;
  margin: 3px 0 0 !important;
  font-size: clamp(1.8rem, 2.4vw, 2.35rem) !important;
  font-weight: 640 !important;
  letter-spacing: -.04em !important;
  line-height: 1.04 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html.cwCalmVisual body.cwViewportFoundation .haIntroPanel b {
  margin-bottom: 5px !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
}

html.cwCalmVisual body.cwViewportFoundation .haIntroPanel span {
  font-size: 13px !important;
  font-weight: 520 !important;
  line-height: 1.3 !important;
}

html.cwCalmVisual body.cwViewportFoundation .haGuideSteps li {
  min-height: 24px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 620 !important;
}

html.cwCalmVisual body.cwViewportFoundation.ha-sharp .wrap,
html.cwCalmVisual body.cwViewportFoundation.ha-flat .wrap {
  grid-template-rows: auto 150px auto minmax(420px, auto) auto auto !important;
}

html.cwCalmVisual body.cwViewportFoundation.ha-tonic .wrap {
  grid-template-rows: auto minmax(720px, auto) auto !important;
}

html.cwCalmVisual body.cwViewportFoundation :where(.haStackedLesson) {
  grid-template-rows: auto auto auto !important;
}

html.cwCalmVisual body.cwViewportFoundation.ha-quiz .main:has(> .cwAcademyLessonNav) {
  display: block !important;
}

html.cwCalmVisual body.cwViewportFoundation.ha-quiz .main > .cwAcademyLessonNav {
  height: auto !important;
  min-height: 50px !important;
  margin-bottom: 26px !important;
}

@media (max-width: 1450px) and (min-width: 901px) {
  html.cwCalmVisual body.cwViewportFoundation .haIntroGrid {
    grid-template-columns: minmax(230px, .78fr) minmax(270px, 1fr) minmax(310px, 1.1fr) !important;
  }

  html.cwCalmVisual body.cwViewportFoundation .haTitlePanel h1 {
    font-size: clamp(1.75rem, 2.5vw, 2.1rem) !important;
  }
}

@media (max-width: 980px) {
  html.cwCalmVisual body.cwViewportFoundation .haIntroGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  html.cwCalmVisual body.cwViewportFoundation :where(.haTitlePanel, .haIntroPanel) {
    min-height: 0 !important;
  }
}

/* B077LB — restrained product-style lesson surfaces inspired by modern software sites. */
html.cwCalmVisual {
  --cw-editorial-accent: #b9afff;
  --cw-editorial-accent-strong: #9e91f2;
  --cw-editorial-accent-soft: rgba(185, 175, 255, .105);
  --cw-editorial-surface: #0d121b;
  --cw-editorial-surface-raised: #111722;
  --cw-editorial-line: rgba(184, 198, 219, .14);
  --cw-editorial-line-strong: rgba(185, 175, 255, .42);
}

/* Headings speak first through hierarchy; colour becomes a quiet supporting cue. */
html.cwCalmVisual :where(.question, .teachTitle, .sectionTitle, .studioHeader h2, .demonstration h2, .chooser h1, .haProgressTitle b) {
  color: #f0f3f8 !important;
  font-weight: 620 !important;
  letter-spacing: -.025em !important;
}

html.cwCalmVisual :where(.lessonNum, .intervalEquation, .birthEquation, .ratio) {
  color: var(--cw-editorial-accent) !important;
  font-weight: 650 !important;
}

html.cwCalmVisual :where(.harmonicRolesLabel, .cwLessonOrientationOutcome small, .cwLearningEyebrow) {
  color: #aeb9d8 !important;
}

html.cwCalmVisual body.cwViewportIntroduction #academyLessonCategory {
  color: #aeb8c8 !important;
}

/* Text-led cards use graphite depth and hairline borders instead of saturated navy fills. */
html.cwCalmVisual :where(.takeaway, .teachBox, .teachMini, .intervalCard, .shiftCard, .musicCard, .bridgeCard, .resultBox, .rule, .haProgressTitle) {
  border-color: var(--cw-editorial-line) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--cw-editorial-surface) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

html.cwCalmVisual body.cwViewportIntroduction :where(.stage > .panel, #visual.panel) {
  border-color: var(--cw-editorial-line) !important;
  background: linear-gradient(150deg, rgba(255,255,255,.025), transparent 42%), #0b1018 !important;
  box-shadow: none !important;
}

html.cwCalmVisual :where(.takeaway, .teachBox) {
  border-left: 2px solid rgba(185,175,255,.46) !important;
}

html.cwCalmVisual :where(.takeaway b, .teachMini b, .intervalCard > b, .shiftCard > b, .musicCard > b, .bridgeCard > b) {
  color: #eef2f7 !important;
  font-weight: 620 !important;
}

html.cwCalmVisual :where(.intervalCard, .shiftCard, .musicCard, .bridgeCard) {
  border-radius: 8px !important;
}

html.cwCalmVisual :where(.intervalCard.hot, .shiftCard.hot, .bridgeCard.hot) {
  border-color: var(--cw-editorial-line-strong) !important;
  background: radial-gradient(circle at 12% 0%, var(--cw-editorial-accent-soft), transparent 19rem), var(--cw-editorial-surface-raised) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

html.cwCalmVisual .intervalPanel > .teachTitle {
  margin: 0 0 11px !important;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important;
}

html.cwCalmVisual :where(.chromaticBtn.active, .viewBtn.active, button.chip.active) {
  border-color: var(--cw-editorial-accent-strong) !important;
  outline: 0 !important;
  background: var(--cw-editorial-accent-soft) !important;
  color: #f4f1ff !important;
  box-shadow: 0 0 0 1px rgba(185,175,255,.24) !important;
}

html.cwCalmVisual :where(.intervalCard .distanceNote, .tiny, .harmonicRoleValue) {
  color: #9ca8ba !important;
  font-weight: 500 !important;
}

html.cwCalmVisual .harmonicRoles {
  border-color: var(--cw-editorial-line) !important;
}

html.cwCalmVisual .harmonicRoleRow + .harmonicRoleRow {
  border-color: var(--cw-editorial-line) !important;
}

html.cwCalmVisual .lessonCard .why {
  border-color: var(--cw-editorial-line) !important;
  border-left: 2px solid rgba(185,175,255,.46) !important;
  background: var(--cw-editorial-surface) !important;
  box-shadow: none !important;
}

html.cwCalmVisual .haIntroPanel.message {
  border-color: var(--cw-editorial-line) !important;
  box-shadow: inset 2px 0 var(--cw-editorial-accent-strong) !important;
}

html.cwCalmVisual .haIntroPanel.message b {
  color: #b8c3d3 !important;
}

/* A fine-line lightbulb marks the main takeaway without adding another colour block. */
html.cwCalmVisual :where(body.cwViewportIntroduction .stage > .panel:first-child > .takeaway, .lessonCard .why) > b:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html.cwCalmVisual :where(body.cwViewportIntroduction .stage > .panel:first-child > .takeaway, .lessonCard .why) > b:first-child::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  background: var(--cw-editorial-accent) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M8.4 14.7A7 7 0 1 1 15.6 14.7C14.7 15.4 14.3 16.2 14.2 18h-4.4c-.1-1.8-.5-2.6-1.4-3.3Z'/%3E%3Cpath d='M12 3v2M4.2 6.2l1.4 1.4M19.8 6.2l-1.4 1.4M2 12h2M20 12h2'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M8.4 14.7A7 7 0 1 1 15.6 14.7C14.7 15.4 14.3 16.2 14.2 18h-4.4c-.1-1.8-.5-2.6-1.4-3.3Z'/%3E%3Cpath d='M12 3v2M4.2 6.2l1.4 1.4M19.8 6.2l-1.4 1.4M2 12h2M20 12h2'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Keep the shared lesson switcher visually neutral across older lesson templates. */
html.cwCalmVisual :where(.pill.menu, .cwNavPill.menu, .cwSharedLessonMenu, .cwLessonMenuBtn) {
  border-color: rgba(185,175,255,.24) !important;
  background: rgba(185,175,255,.075) !important;
  color: #e9e6ff !important;
  box-shadow: none !important;
}

/* Legacy transport strips are useful controls, but should not read as giant blue callouts. */
html.cwCalmVisual :where(.controlbar, .metronomePane) {
  border-color: var(--cw-editorial-line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), #0b1018 !important;
  box-shadow: none !important;
}

/* The three Scale Foundations lessons depend on seeing the keyboard while working.
   Restore their original split workspace on larger screens and keep the visual column in view. */
@media (min-width: 1200px) {
  html.cwCalmVisual body.cwViewportFoundation:has(#bridgeCard):has(#keyboard) .wrap,
  html.cwCalmVisual body.cwViewportFoundation:has(#keyboardFormulaStrip) .wrap,
  html.cwCalmVisual body.cwViewportFoundation:has(#testTitle):has(#keyboard) .wrap {
    grid-template-columns: minmax(500px, .84fr) minmax(0, 1.16fr) !important;
    align-items: start !important;
    gap: 14px !important;
  }

  html.cwCalmVisual body.cwViewportFoundation:has(#bridgeCard):has(#keyboard) .wrap > :where(section, aside),
  html.cwCalmVisual body.cwViewportFoundation:has(#keyboardFormulaStrip) .wrap > :where(section, aside),
  html.cwCalmVisual body.cwViewportFoundation:has(#testTitle):has(#keyboard) .wrap > :where(section, aside) {
    min-width: 0 !important;
  }

  html.cwCalmVisual body.cwViewportFoundation:has(#keyboardFormulaStrip) .wrap > .haIntroGrid,
  html.cwCalmVisual body.cwViewportFoundation:has(#testTitle):has(#keyboard) .wrap > .haIntroGrid {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html.cwCalmVisual body.cwViewportFoundation:has(#keyboardFormulaStrip) .wrap > .haActivity,
  html.cwCalmVisual body.cwViewportFoundation:has(#testTitle):has(#keyboard) .wrap > .haActivity {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html.cwCalmVisual body.cwViewportFoundation:has(#keyboardFormulaStrip) .wrap > .haKeyboardArea,
  html.cwCalmVisual body.cwViewportFoundation:has(#testTitle):has(#keyboard) .wrap > .haKeyboardArea {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html.cwCalmVisual body.cwViewportFoundation:has(#bridgeCard):has(#keyboard) .wrap > aside,
  html.cwCalmVisual body.cwViewportFoundation:has(#keyboardFormulaStrip) .wrap > aside,
  html.cwCalmVisual body.cwViewportFoundation:has(#testTitle):has(#keyboard) .wrap > aside {
    position: sticky !important;
    top: 66px !important;
    align-self: start !important;
    max-height: calc(100vh - 78px) !important;
    overflow: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin;
  }
}

/* B077LF — quiet gradient cues for the two most important teaching summaries. */
html.cwCalmVisual .cwLessonOrientationOutcome {
  position: relative !important;
  padding: 9px 11px !important;
  border-left: 1px solid rgba(185,175,255,.48) !important;
  border-radius: 6px !important;
  background: linear-gradient(105deg, rgba(185,175,255,.09), rgba(132,196,255,.035) 54%, transparent 88%) !important;
}

html.cwCalmVisual .cwLessonOrientationOutcome small,
html.cwCalmVisual :where(body.cwViewportIntroduction .stage > .panel:first-child > .takeaway, .lessonCard .why) > b:first-child {
  color: transparent !important;
  background: linear-gradient(90deg, #c7beff 0%, #8ecbff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html.cwCalmVisual :where(body.cwViewportIntroduction .stage > .panel:first-child > .takeaway, .lessonCard .why) {
  background: linear-gradient(105deg, rgba(185,175,255,.10), rgba(132,196,255,.035) 54%, transparent 88%), var(--cw-editorial-surface) !important;
}

html.cwCalmVisual :where(body.cwViewportIntroduction .stage > .panel:first-child > .takeaway, .lessonCard .why) > b:first-child::before {
  background: linear-gradient(145deg, #c7beff, #79c2ff) !important;
}

/* B077LG — the lesson picker reads as a learning path instead of a button wall. */
html.cwCalmVisual #cwAcademyCategoryOverlay {
  padding: 22px !important;
  background: rgba(0, 3, 8, .91) !important;
  backdrop-filter: blur(14px) saturate(115%) !important;
}

html.cwCalmVisual .cwAcademyCategoryPanel {
  width: min(1020px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 44px) !important;
  padding: 26px 28px 28px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 92% -8%, rgba(125,112,235,.12), transparent 27rem),
    #050a12 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.62) !important;
}

html.cwCalmVisual .cwAcademyCategoryPanel > header {
  align-items: center !important;
  gap: 24px !important;
  padding: 0 0 19px !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

html.cwCalmVisual .cwAcademyCategoryEyebrow {
  margin-bottom: 8px !important;
  color: #aebeff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}

html.cwCalmVisual .cwAcademyCategoryPanel h2 {
  margin: 0 !important;
  color: #f2f5fb !important;
  font-size: clamp(24px, 3vw, 31px) !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
}

html.cwCalmVisual .cwAcademyCategoryPanel > header p {
  margin: 9px 0 0 !important;
  color: #9da7b6 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html.cwCalmVisual .cwAcademyCategoryHeaderActions {
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
}

html.cwCalmVisual :where(.cwAcademyCategoryIntroduction, .cwAcademyCategoryClose) {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html.cwCalmVisual .cwAcademyCategoryIntroduction {
  border: 1px solid rgba(174,190,255,.28) !important;
  background: rgba(154,139,255,.09) !important;
  color: #d7dfff !important;
}

html.cwCalmVisual .cwAcademyCategoryClose {
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.035) !important;
  color: #b8c0cc !important;
}

html.cwCalmVisual .cwAcademyCategoryClose span {
  margin-right: 4px !important;
  color: #818c9c !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

html.cwCalmVisual :where(.cwAcademyCategoryIntroduction, .cwAcademyCategoryClose):hover,
html.cwCalmVisual :where(.cwAcademyCategoryIntroduction, .cwAcademyCategoryClose):focus-visible {
  border-color: rgba(174,190,255,.55) !important;
  background: rgba(154,139,255,.14) !important;
  color: #fff !important;
}

html.cwCalmVisual .cwAcademyCategoryIntroductionRow {
  display:grid !important;
  grid-template-columns:32px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:11px !important;
  width:100% !important;
  margin-top:16px !important;
  padding:12px 14px !important;
  border-radius:9px !important;
  text-align:left !important;
}
html.cwCalmVisual .cwAcademyCategoryIntroductionRow > span:nth-child(2) {
  display:grid !important;
  gap:3px !important;
}
html.cwCalmVisual .cwAcademyCategoryIntroductionRow b { color:#f1f3ff !important; font-size:14px !important; }
html.cwCalmVisual .cwAcademyCategoryIntroductionRow small { color:#9da9bd !important; font-size:12px !important; }
html.cwCalmVisual .cwAcademyIntroductionIcon {
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  border:1px solid rgba(174,190,255,.5) !important;
  border-radius:50% !important;
  color:#d7dfff !important;
  font-weight:750 !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups {
  gap: 14px !important;
  margin-top: 18px !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups section {
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups section:only-child {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups h3 {
  display: flex !important;
  grid-column: 1 / -1 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 2px 8px !important;
  padding: 2px 2px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  color: #cbd3df !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .045em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups h3 small {
  color: #778395 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups a {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 18px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  margin: 5px 0 0 !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: rgba(3,8,15,.52) !important;
  color: #dce2eb !important;
  font-size: 14px !important;
  font-weight: 540 !important;
  line-height: 1.28 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}

html.cwCalmVisual .cwAcademyLessonNumber {
  display: grid !important;
  place-items: center !important;
  min-height: 27px !important;
  padding: 0 5px !important;
  border: 1px solid rgba(174,190,255,.18) !important;
  border-radius: 6px !important;
  background: rgba(144,132,238,.07) !important;
  color: #aebeff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

html.cwCalmVisual .cwAcademyLessonName {
  min-width: 0 !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups a.cwAcademyLessonNoNumber {
  grid-template-columns: minmax(0,1fr) 18px !important;
}

html.cwCalmVisual .cwAcademyLessonArrow {
  color: #748196 !important;
  font-size: 15px !important;
  opacity: .6 !important;
  transition: transform .16s ease, color .16s ease, opacity .16s ease !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups a:hover,
html.cwCalmVisual .cwAcademyCategoryGroups a:focus-visible {
  border-color: rgba(174,190,255,.26) !important;
  background: linear-gradient(100deg, rgba(154,139,255,.11), rgba(117,191,255,.035)) !important;
  color: #fff !important;
  outline: none !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups a:hover .cwAcademyLessonArrow,
html.cwCalmVisual .cwAcademyCategoryGroups a:focus-visible .cwAcademyLessonArrow {
  color: #b9c7ff !important;
  opacity: 1 !important;
  transform: translateX(2px) !important;
}

html.cwCalmVisual .cwAcademyCategoryGroups a.cwAcademyCurrentLesson {
  border-color: rgba(174,190,255,.34) !important;
  background: linear-gradient(100deg, rgba(154,139,255,.16), rgba(117,191,255,.05)) !important;
  color: #fff !important;
}

html.cwCalmVisual .cwAcademyCurrentLesson .cwAcademyLessonNumber {
  border-color: rgba(188,179,255,.55) !important;
  background: linear-gradient(145deg, rgba(172,158,255,.32), rgba(112,184,255,.18)) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  html.cwCalmVisual #cwAcademyCategoryOverlay { padding: 10px !important; }
  html.cwCalmVisual .cwAcademyCategoryPanel {
    width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    padding: 19px 16px 20px !important;
  }
  html.cwCalmVisual .cwAcademyCategoryPanel > header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  html.cwCalmVisual .cwAcademyCategoryHeaderActions { justify-content: flex-start !important; }
  html.cwCalmVisual .cwAcademyCategoryGroups,
  html.cwCalmVisual .cwAcademyCategoryPanel-why .cwAcademyCategoryGroups section { grid-template-columns: 1fr !important; }
}

/* B077LH — make canvas-based choices unmistakably interactive. */
html.cwCalmVisual .cwInteractivePrompt {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(174,190,255,.24) !important;
  border-radius: 8px !important;
  background: linear-gradient(105deg, rgba(154,139,255,.11), rgba(117,191,255,.035) 68%, transparent) !important;
}

html.cwCalmVisual .cwInteractivePrompt > span {
  display: grid !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(186,177,255,.42) !important;
  border-radius: 50% !important;
  background: rgba(157,143,255,.13) !important;
  color: #c6c0ff !important;
  font-size: 11px !important;
  padding-left: 2px !important;
}

html.cwCalmVisual .cwInteractivePrompt b,
html.cwCalmVisual .cwInteractivePrompt small {
  display: block !important;
}

html.cwCalmVisual .cwInteractivePrompt b {
  color: #eef2f9 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

html.cwCalmVisual .cwInteractivePrompt small {
  margin-top: 2px !important;
  color: #8f9bad !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html.cwCalmVisual .cwCanvasHit {
  overflow: hidden !important;
  border-radius: 5px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(154,139,255,.18) !important;
}

html.cwCalmVisual .cwCanvasHit::after {
  content: "▶" !important;
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  padding-left: 1px !important;
  border: 1px solid rgba(214,221,236,.34) !important;
  border-radius: 50% !important;
  background: rgba(2,7,14,.72) !important;
  color: #dce5f4 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  opacity: .82 !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease !important;
}

html.cwCalmVisual .cwCanvasHit:hover,
html.cwCalmVisual .cwCanvasHit:focus-visible {
  border-color: rgba(184,175,255,.72) !important;
  background: rgba(154,139,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(184,175,255,.24), 0 0 14px rgba(125,154,255,.16) !important;
}

html.cwCalmVisual .cwCanvasHit:hover::after,
html.cwCalmVisual .cwCanvasHit:focus-visible::after {
  border-color: rgba(199,190,255,.78) !important;
  background: rgba(139,124,242,.30) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

html.cwCalmVisual .cwCanvasHit:active {
  background: rgba(154,139,255,.12) !important;
}

html.cwCalmVisual .cwCanvasHit[aria-pressed="true"]::after {
  content: "↻" !important;
  border-color: rgba(255,226,115,.72) !important;
  background: rgba(255,226,115,.14) !important;
  color: #ffe273 !important;
  font-size: 13px !important;
}

/* B077LI — one predictable lesson toolbar across every lesson engine. */
html.cwCalmVisual .cwUnifiedLessonBar {
  position: sticky !important;
  top: 10px !important;
  z-index: 190 !important;
  display: grid !important;
  grid-template-columns: 132px 88px 148px 118px !important;
  justify-content: end !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: auto !important;
  margin: 0 0 20px !important;
  padding: 6px !important;
  gap: 6px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 10px !important;
  background: rgba(4,8,15,.91) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  box-sizing: border-box !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavControl {
  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: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #aeb8c7 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavAbout {
  color: #9fa9b8 !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavMenu {
  border-color: rgba(174,190,255,.26) !important;
  background: rgba(149,135,240,.09) !important;
  color: #d7deff !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavPrevious {
  color: #b7c0ce !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavNext {
  border-color: rgba(255,255,255,.78) !important;
  background: #eef2f8 !important;
  color: #101622 !important;
  font-weight: 680 !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavControl:hover,
html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavControl:focus-visible {
  border-color: rgba(174,190,255,.36) !important;
  background: rgba(154,139,255,.11) !important;
  color: #fff !important;
  filter: none !important;
  outline: 2px solid rgba(174,190,255,.52) !important;
  outline-offset: 1px !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavNext:hover,
html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavNext:focus-visible {
  border-color: #fff !important;
  background: #fff !important;
  color: #070b12 !important;
}

html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavControl.disabled,
html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavControl[aria-disabled="true"] {
  border-color: transparent !important;
  background: transparent !important;
  color: #566172 !important;
  cursor: default !important;
  opacity: .7 !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  html.cwCalmVisual .cwUnifiedLessonBar {
    top: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-bottom: 14px !important;
    padding: 5px !important;
    gap: 5px !important;
  }
  html.cwCalmVisual .cwUnifiedLessonBar > .cwUnifiedNavControl {
    width: 100% !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 7px 6px !important;
    white-space: normal !important;
  }
}

@media (max-width: 700px) {
  html.cwCalmVisual .cwLessonOrientation {
    margin: 10px auto 20px !important;
  }

  html.cwCalmVisual .workspace > .cwLessonOrientation {
    margin-bottom: 12px !important;
  }
}