/* Chord Construction and Harmonic Movement — shared modern workspace layout. */
html.cwApplicationFamily body{height:auto!important;min-width:0!important;min-height:100vh!important;margin:0 0 0 248px!important;overflow-x:hidden!important;overflow-y:auto!important;background:var(--cw-bg)!important;color:var(--cw-text)!important;font-family:var(--cw-font)!important}
html.cwApplicationFamily .app{display:block!important;width:auto!important;min-width:0!important;min-height:100vh!important;margin-left:0!important}
html.cwLearningSystem.cwApplicationFamily.cwCalmVisual body.cwkUnifiedMenu>.app{display:block!important;grid-template-columns:none!important;width:auto!important;margin-left:0!important}
html.cwLearningSystem.cwApplicationFamily.cwCalmVisual body:not(.cwApplicationNoSidebar):has(>.cw-global-side)>.app{display:block!important;grid-template-columns:none!important;width:auto!important;margin-left:0!important}
html.cwApplicationFamily .app>.side{display:block!important;position:fixed!important;inset:0 auto 0 0!important;z-index:2147482990!important;width:248px!important;height:100vh!important;padding:10px 8px!important;overflow-y:auto!important;border-right:1px solid var(--cw-border)!important;background:#060a10!important}
html.cwApplicationFamily .main{display:block!important;width:auto!important;height:auto!important;min-width:0!important;min-height:100vh!important;padding:10px 14px 44px!important;overflow:visible!important}
html.cwApplicationFamily .top{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:14px!important;width:min(100%,1320px)!important;height:auto!important;min-height:52px!important;margin:0 auto 10px!important;padding:7px 8px!important;border:1px solid var(--cw-border)!important;border-radius:10px!important;background:rgba(7,11,17,.88)!important;box-shadow:none!important}
html.cwApplicationFamily .top>div:first-child{display:none!important}
html.cwApplicationFamily .main>.top{display:none!important}
html.cwApplicationFamily .lessonNav{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:6px!important;width:auto!important;margin:0!important}
html.cwApplicationFamily body .main .top .lessonNav{width:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
html.cwApplicationFamily .lessonNav button,
html.cwApplicationFamily .lessonNav .pill,
html.cwApplicationFamily .cwLessonMenuBtn{width:auto!important;min-width:0!important;min-height:38px!important;height:auto!important;padding:8px 12px!important;border:1px solid var(--cw-border)!important;border-radius:6px!important;background:transparent!important;color:var(--cw-text-soft)!important;font-size:.76rem!important;font-weight:700!important;line-height:1.2!important;box-shadow:none!important}
html.cwApplicationFamily .lessonNav .next{border-color:#f1f4f9!important;background:#f1f4f9!important;color:#09101b!important}
html.cwApplicationFamily .cwAcademyIntroButton{border-color:transparent!important}

html.cwApplicationFamily .controlbar{display:block!important;width:min(100%,1320px)!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0 auto 10px!important;padding:9px 10px!important;border:1px solid var(--cw-border)!important;border-radius:10px!important;background:var(--cw-surface)!important;overflow-x:auto!important;overflow-y:visible!important;box-shadow:none!important}
html.cwApplicationFamily .controlbar:before{position:static!important;display:block!important;margin:0 0 7px!important;color:var(--cw-blue)!important;font-size:.68rem!important;letter-spacing:.1em!important;text-align:left!important}
html.cwApplicationFamily #tonicBtns{display:flex!important;align-items:stretch!important;gap:4px!important;width:max-content!important;min-width:100%!important;height:auto!important;min-height:0!important;padding:0!important;overflow:visible!important}
html.cwApplicationFamily #tonicBtns .noteBtn{flex:1 0 66px!important;width:auto!important;min-width:58px!important;height:auto!important;min-height:56px!important;padding:6px 4px!important;border:1px solid var(--cw-border)!important;border-radius:6px!important;background:#080d14!important;color:var(--cw-text)!important;box-shadow:none!important}
html.cwApplicationFamily #tonicBtns .noteBtn.active{border-color:var(--cw-yellow)!important;background:rgba(245,216,99,.12)!important;color:var(--cw-yellow)!important}
html.cwApplicationFamily #tonicBtns .noteName{font-size:1rem!important}.cwApplicationFamily #tonicBtns .absVal{font-size:1.15rem!important}.cwApplicationFamily #tonicBtns .roleMini{font-size:.62rem!important}
html.cwApplicationFamily .controlbar .modeBtns{display:none!important}

html.cwApplicationFamily .content{display:grid!important;grid-template-rows:auto!important;align-content:start!important;gap:12px!important;width:min(100%,1320px)!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:0!important;overflow:visible!important}
html.cwApplicationFamily .row,
html.cwApplicationFamily .flowIntro{display:grid!important;grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr)!important;align-items:start!important;gap:12px!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;overflow:visible!important}
html.cwApplicationFamily .card,
html.cwApplicationFamily .panel,
html.cwApplicationFamily .infoLite,
html.cwApplicationFamily .keyboardPanel,
html.cwApplicationFamily .progressionStrip,
html.cwApplicationFamily .canvasCard{min-width:0!important;height:auto!important;max-height:none!important;margin:0!important;padding:16px!important;border:1px solid var(--cw-border)!important;border-radius:10px!important;background:var(--cw-surface)!important;box-shadow:none!important;overflow:visible!important}
html.cwApplicationFamily h1{margin:5px 0 8px!important;color:var(--cw-text)!important;font-size:clamp(1.8rem,2.6vw,2.45rem)!important;line-height:1.05!important;letter-spacing:-.035em!important;overflow-wrap:anywhere!important}
html.cwApplicationFamily h2,html.cwApplicationFamily h3{color:var(--cw-text)!important;font-family:inherit!important}
html.cwApplicationFamily .eyebrow{margin-bottom:5px!important;color:var(--cw-blue)!important;font-size:.7rem!important;letter-spacing:.1em!important}
html.cwApplicationFamily .lead{margin:6px 0!important;color:var(--cw-text-soft)!important;font-size:.92rem!important;line-height:1.5!important}
html.cwApplicationFamily .muted{color:var(--cw-muted)!important}

html.cwApplicationFamily .cwLessonMessage{margin:10px 0!important;padding:12px!important;border:1px solid var(--cw-border)!important;border-left:2px solid var(--cw-violet)!important;border-radius:7px!important;background:linear-gradient(90deg,rgba(111,92,164,.12),rgba(9,14,21,.5))!important;box-shadow:none!important}
html.cwApplicationFamily .cwLessonMessageLabel{margin:0 0 5px!important;color:var(--cw-violet-soft)!important;font-size:.68rem!important;letter-spacing:.1em!important;text-transform:uppercase!important;font-weight:760!important}
html.cwApplicationFamily .cwLessonMessage .lead{margin:0!important;color:var(--cw-text)!important;font-size:.9rem!important;font-weight:560!important}
html.cwApplicationFamily .cwLessonPath{display:block!important;margin:8px 0!important;padding:10px 11px!important;border:1px solid var(--cw-border)!important;border-radius:7px!important;background:#080d14!important}
html.cwApplicationFamily .cwLessonPath summary{display:flex!important;justify-content:space-between!important;gap:9px!important;color:var(--cw-text)!important;font-size:.8rem!important;font-weight:720!important;cursor:pointer!important;list-style:none!important}
html.cwApplicationFamily .cwLessonPath summary::-webkit-details-marker{display:none!important}.cwApplicationFamily .cwLessonPath summary:after{content:'+';color:var(--cw-muted)}.cwApplicationFamily .cwLessonPath[open] summary:after{content:'−'}
html.cwApplicationFamily .cwLessonPath summary span{margin-left:auto;color:var(--cw-muted);font-size:.68rem;font-weight:540}
html.cwApplicationFamily .cwLessonPathSteps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-top:9px!important}
html.cwApplicationFamily .cwLessonPathStep{display:grid!important;grid-template-columns:23px 1fr!important;align-items:center!important;gap:6px!important;min-width:0!important;min-height:0!important;padding:7px!important;border:1px solid var(--cw-border)!important;border-radius:6px!important;background:#0b1119!important;color:var(--cw-text-soft)!important;font-size:.71rem!important;line-height:1.3!important}
html.cwApplicationFamily .cwLessonPathStep b{display:grid!important;place-items:center!important;width:21px!important;height:21px!important;border:1px solid rgba(143,197,255,.45)!important;border-radius:5px!important;background:rgba(83,132,194,.18)!important;color:var(--cw-blue)!important}

html.cwApplicationFamily button,
html.cwApplicationFamily .pill,
html.cwApplicationFamily select{border-radius:6px!important;font-family:inherit!important}
html.cwApplicationFamily .choice{min-width:0!important;min-height:42px!important;padding:7px 8px!important;border:1px solid var(--cw-border)!important;border-radius:6px!important;background:#080d14!important;color:var(--cw-text)!important;box-shadow:none!important}
html.cwApplicationFamily .choice.active{border-color:var(--cw-violet)!important;background:rgba(104,82,159,.18)!important}
html.cwApplicationFamily .cwConciseChoice{display:grid!important;place-items:center!important}
html.cwApplicationFamily .cwConciseChoice>b{margin:0!important;font-size:1rem!important}
html.cwApplicationFamily .cwConciseChoice>span,
html.cwApplicationFamily .cwConciseChoice>small{display:none!important}
html.cwApplicationFamily .cwDemoTransport,
html.cwApplicationFamily .flowControls,
html.cwApplicationFamily .controlRow,
html.cwApplicationFamily .cwMovementTransportBand{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:9px 0 0!important;padding:8px 9px!important;border:1px solid var(--cw-border)!important;border-radius:7px!important;background:#080d14!important;box-shadow:none!important;overflow:visible!important}
html.cwApplicationFamily .cwDemoTransport::before,
html.cwApplicationFamily .controlRow::before{content:'BUILD CONTROLS';margin-right:4px;color:var(--cw-muted);font-size:.64rem;letter-spacing:.1em;font-weight:760}
html.cwApplicationFamily .flowControls::before{content:'TRANSPORT';margin-right:4px;color:var(--cw-muted);font-size:.64rem;letter-spacing:.1em;font-weight:760}
html.cwApplicationFamily .cwTransportIcon{display:inline-grid!important;place-items:center!important;flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;border-radius:6px!important;font-size:0!important;line-height:0!important}
html.cwApplicationFamily .flowControls label{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;color:var(--cw-muted)!important;font-size:.72rem!important}
html.cwApplicationFamily input[type=range]{max-width:170px!important}

html.cwApplicationFamily .stepLine.cwChordReveal{display:flex!important;align-items:stretch!important;gap:6px!important;min-width:0!important;margin:8px 0!important}
html.cwApplicationFamily .stepLine.cwChordReveal .toneBox{display:flex!important;flex:1 1 0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important;height:auto!important;min-height:68px!important;padding:7px 5px!important;border:1px solid var(--cw-border)!important;border-radius:7px!important;background:#080d14!important;text-align:center!important}
html.cwApplicationFamily .stepLine.cwChordReveal .toneBox b{font-size:1rem!important}.cwApplicationFamily .stepLine.cwChordReveal .toneBox span{margin-top:3px;color:var(--cw-text-soft)!important;font-size:.72rem!important}.cwApplicationFamily .stepLine.cwChordReveal .toneBox small{margin-top:2px;color:var(--cw-blue)!important;font-size:.64rem!important}.cwApplicationFamily .stepLine.cwChordReveal .toneBox.pending{opacity:.38}.cwApplicationFamily .stepLine.cwChordReveal .arrow{display:grid;place-items:center;flex:0 0 18px;color:var(--cw-yellow)!important}

html.cwApplicationFamily .keyboardPanel{display:flex!important;flex-direction:column!important;min-height:0!important;padding:12px!important}
html.cwApplicationFamily .keyboard,
html.cwApplicationFamily .piano:not(.cwKeyboard){width:100%!important;height:auto!important;min-height:180px!important;max-height:230px!important;aspect-ratio:3.55 / 1!important;overflow:hidden!important;border-radius:9px!important}
html.cwApplicationFamily .keyboard>.blackKey{width:clamp(24px,4.2%,36px)!important;height:58%!important;max-height:calc(100% - 20px)!important}
html.cwApplicationFamily .canvasCard canvas{width:100%!important;height:clamp(180px,20vw,260px)!important}
html.cwApplicationFamily .progressionStrip.flow{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;height:auto!important;min-height:0!important;padding:8px!important}
html.cwApplicationFamily .progressionStrip.flow .progStep{min-width:0!important;height:auto!important;min-height:76px!important;padding:8px!important;border-radius:7px!important}
html.cwApplicationFamily .triadText,
html.cwApplicationFamily .currentSelection,
html.cwApplicationFamily .callout,
html.cwApplicationFamily .footerNote,
html.cwApplicationFamily .keySigBox,
html.cwApplicationFamily .localModePanel,
html.cwApplicationFamily .minorModeBadge,
html.cwApplicationFamily .singleGenerated{height:auto!important;max-height:none!important;margin:8px 0!important;padding:10px 11px!important;border-radius:7px!important;overflow:visible!important;line-height:1.4!important}

html.cwApplicationFamily .cwMovementTransportLayout{display:grid!important;grid-template-rows:auto!important;gap:12px!important;overflow:visible!important}
html.cwApplicationFamily .cwMovementTransportLayout>.flowIntro,
html.cwApplicationFamily .cwMovementTransportLayout>.cwMovementTransportBand,
html.cwApplicationFamily .cwMovementTransportLayout>.progressionStrip.flow,
html.cwApplicationFamily .cwMovementTransportLayout>.keyboardPanel{grid-row:auto!important}

@media(max-width:1100px){html.cwApplicationFamily .row,html.cwApplicationFamily .flowIntro{grid-template-columns:minmax(285px,.78fr) minmax(0,1.22fr)!important}.cwApplicationFamily .cwLessonPathSteps{grid-template-columns:1fr!important}.cwApplicationFamily .actionPanel{grid-template-columns:1fr!important}}
@media(max-width:900px){html.cwApplicationFamily body{margin-left:0!important}.cwApplicationFamily .main{padding:8px 12px 36px!important}.cwApplicationFamily .row,.cwApplicationFamily .flowIntro{grid-template-columns:1fr!important}.cwApplicationFamily .flowControls label{width:100%!important;margin-left:0!important}.cwApplicationFamily .progressionStrip.flow{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){html.cwApplicationFamily .top{justify-content:center!important}.cwApplicationFamily .lessonNav{justify-content:center!important}.cwApplicationFamily .controlbar{padding:8px!important}.cwApplicationFamily #tonicBtns .noteBtn{flex-basis:54px!important}.cwApplicationFamily .card,.cwApplicationFamily .panel,.cwApplicationFamily .infoLite,.cwApplicationFamily .keyboardPanel,.cwApplicationFamily .canvasCard{padding:12px!important}.cwApplicationFamily .cwLessonPathSteps{grid-template-columns:1fr!important}.cwApplicationFamily .progressionStrip.flow{grid-template-columns:1fr!important}.cwApplicationFamily .row>.card:last-child,.cwApplicationFamily .keyboardPanel{display:block!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important}.cwApplicationFamily .keyboard,.cwApplicationFamily .piano:not(.cwKeyboard){width:620px!important;min-width:620px!important;height:180px!important;min-height:180px!important;max-height:180px!important;aspect-ratio:auto!important}}