/* B077IX Academy-wide viewport containment. Standard desktop geometry is unchanged. */
body.cwViewportManaged :is(.card,.panel,.lessonCard,.studio,.messageCard,.visualCard,.toneBox,.choice,.cwLessonPathStep,.cwGuidePanel,.haIntroPanel){min-width:0;overflow-wrap:break-word}
body.cwViewportManaged :is(.lessonPath li,.lessonPathIntro li,.cwLessonPathStep,.cwGuideStep,.focusedGuideSteps>div)>:first-child{flex:0 0 auto}
body.cwViewportManaged :is(img,canvas,svg,video){max-width:100%}
body.cwViewportManaged :is(.noteConfigPopup,.cwAskPanel,.soundStudio){max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important}

/* Start Composing with ChordWalk introduction: numbers own a real grid column and can never cover headings. */
body.cwViewportStartIntro .roadStep{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:8px!important;align-content:start!important;justify-content:stretch!important;padding:10px!important}
body.cwViewportStartIntro .roadStep::before{position:static!important;grid-column:1!important;grid-row:1 / span 2!important;align-self:start!important;width:27px!important;height:27px!important}
body.cwViewportStartIntro .roadStep b{grid-column:2!important;grid-row:1!important;align-self:start!important;min-width:0!important}
body.cwViewportStartIntro .roadStep span{grid-column:2!important;grid-row:2!important;min-width:0!important}
body.cwViewportStartIntro.cwViewportCompact{overflow:auto!important}
body.cwViewportStartIntro.cwViewportCompact .introMain{height:auto!important;min-height:940px!important;overflow:visible!important}
body.cwViewportStartIntro.cwViewportCompact .introBody{overflow:visible!important}
body.cwViewportStartIntro.cwViewportCompact .stagePanel.active{min-height:740px!important}
body.cwViewportStartIntro.cwViewportCompact .roadmap{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.cwViewportStartIntro.cwViewportCompact .roadStep{min-height:88px!important}
body.cwViewportStartIntro.cwViewportCompact .messageCard{padding:17px!important}
body.cwViewportStartIntro.cwViewportCompact .messageCard h2{font-size:29px!important}
body.cwViewportStartIntro.cwViewportDense{overflow:auto!important}
body.cwViewportStartIntro.cwViewportDense .introMain{height:auto!important;min-height:100vh!important;overflow:visible!important}
body.cwViewportStartIntro.cwViewportDense .introBody{display:block!important;overflow:visible!important}
body.cwViewportStartIntro.cwViewportDense .stageTabs{margin-bottom:10px!important}
body.cwViewportStartIntro.cwViewportDense .stagePanel.active{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
body.cwViewportStartIntro.cwViewportDense .roadmap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.cwViewportStartIntro.cwViewportDense .messageCard,body.cwViewportStartIntro.cwViewportDense .visualCard{padding:14px!important}

/* Start Composing with ChordWalk practical lessons: undo conflicting low-height compression. */
body.cwViewportRhythm.cwViewportCompact{overflow:auto!important}
body.cwViewportRhythm.cwViewportCompact .app{height:auto!important;min-height:100vh!important;grid-template-columns:235px minmax(0,1fr)!important}
body.cwViewportRhythm.cwViewportCompact .main{overflow:visible!important;min-width:0!important}
body.cwViewportRhythm.cwViewportCompact .top{position:relative!important}
body.cwViewportRhythm.cwViewportCompact .workspace{height:auto!important;min-height:790px!important;min-width:0!important;grid-template-columns:270px minmax(0,1fr)!important;align-items:stretch!important}
body.cwViewportRhythm.cwViewportCompact .lessonCard,body.cwViewportRhythm.cwViewportCompact .studio{height:auto!important;min-height:770px!important;overflow:visible!important}
body.cwViewportRhythm.cwViewportCompact .metronomePane{grid-template-columns:140px minmax(125px,.75fr) 88px 96px 58px minmax(230px,1.25fr)!important}
body.cwViewportRhythm.cwViewportCompact .timelineWrap{min-height:150px!important}
body.cwViewportRhythm.cwViewportCompact .timeline{min-height:135px!important}
body.cwViewportRhythm.cwViewportCompact .demonstration{min-height:58px!important}
body.cwViewportRhythm.cwViewportDense{overflow:auto!important}
body.cwViewportRhythm.cwViewportDense .app{height:auto!important;min-height:100vh!important;grid-template-columns:215px minmax(0,1fr)!important}
body.cwViewportRhythm.cwViewportDense .main{overflow:visible!important}
body.cwViewportRhythm.cwViewportDense .top{position:relative!important;height:auto!important;min-height:60px!important;flex-wrap:wrap!important}
body.cwViewportRhythm.cwViewportDense .workspace{display:grid!important;grid-template-columns:1fr!important;height:auto!important;min-height:0!important;min-width:0!important}
body.cwViewportRhythm.cwViewportDense .lessonCard{min-height:0!important;height:auto!important}
body.cwViewportRhythm.cwViewportDense .studio{min-height:790px!important;height:auto!important;overflow:visible!important}
body.cwViewportRhythm.cwViewportDense .metronomePane{grid-template-columns:repeat(3,minmax(0,1fr))!important;height:auto!important;min-height:112px!important}
body.cwViewportRhythm.cwViewportDense .newConcept{height:auto!important;min-height:170px!important;max-height:none!important}
body.cwViewportRhythm.cwViewportDense .timelineWrap{min-height:165px!important}
body.cwViewportRhythm.cwViewportDense .timeline{min-height:145px!important}

/* Foundation and focused lessons retain their frozen geometry at standard size and scroll intact below it. */
body.cwViewportFoundation:is(.cwViewportCompact,.cwViewportDense){overflow:auto!important}
body.cwViewportFoundation:is(.cwViewportCompact,.cwViewportDense) .main{height:auto!important;min-height:940px!important;overflow:visible!important}
body.cwViewportFoundation:is(.cwViewportCompact,.cwViewportDense) .wrap{height:auto!important;min-height:920px!important;overflow:visible!important}
body.cwViewportFoundation.cwViewportDense .cw-global-side{width:220px!important}
body.cwViewportFoundation.cwViewportDense.cwkUnifiedMenu{margin-left:220px!important;min-width:0!important}
body.cwViewportFocused:is(.cwViewportCompact,.cwViewportDense){overflow:auto!important}
body.cwViewportFocused:is(.cwViewportCompact,.cwViewportDense) .academyShell{height:auto!important;min-height:940px!important}
body.cwViewportFocused:is(.cwViewportCompact,.cwViewportDense) .lesson{min-height:920px!important}
body.cwViewportFocused.cwViewportDense .academyShell{grid-template-columns:220px minmax(0,1fr)!important}

/* Chord Construction, Harmonic Movement, Introduction, Modulation and Mastery. */
body:is(.cwViewportChord,.cwViewportIntroduction,.cwViewportModulation,.cwViewportMastery).cwViewportCompact{overflow:auto!important}
body:is(.cwViewportChord,.cwViewportIntroduction,.cwViewportModulation,.cwViewportMastery).cwViewportCompact>.app{height:auto!important;min-height:940px!important}
body:is(.cwViewportChord,.cwViewportIntroduction,.cwViewportModulation,.cwViewportMastery).cwViewportCompact .main{height:auto!important;min-height:920px!important;overflow:visible!important}
body.cwViewportChord.cwViewportCompact .content{overflow:visible!important}
body:is(.cwViewportChord,.cwViewportIntroduction,.cwViewportModulation,.cwViewportMastery).cwViewportDense{overflow:auto!important}
body:is(.cwViewportChord,.cwViewportIntroduction,.cwViewportModulation,.cwViewportMastery).cwViewportDense>.app{height:auto!important;min-height:980px!important;grid-template-columns:220px minmax(0,1fr)!important}
body:is(.cwViewportChord,.cwViewportIntroduction,.cwViewportModulation,.cwViewportMastery).cwViewportDense .main{height:auto!important;min-height:960px!important;overflow:visible!important}
body.cwViewportChord.cwViewportDense .content{overflow:visible!important}
body.cwViewportChord.cwViewportDense .row,body.cwViewportChord.cwViewportDense .flowIntro{grid-template-columns:1fr!important}

/* Last-resort containment: readable scrolling is preferred to hidden or overlapping content. */
body.cwViewportDense :is(.content,.wrap,.introBody,.lesson,.workspace){max-width:100%!important}
body.cwViewportDense :is(.lessonNav,.controls,.transport,.modeBtns,.waveModeBtns){flex-wrap:wrap!important}

/* B077JA Academy-wide transport vocabulary: one scalable vector icon set. */
.cwTransportIcon{position:relative!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;border-radius:999px!important;font-size:0!important;line-height:0!important;display:inline-block!important;vertical-align:middle!important;flex:0 0 42px!important}
.cwTransportIcon::before{content:"";position:absolute!important;display:block!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:21px;height:21px;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.cwTransportIcon[data-cw-transport-icon="play"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E")}
.cwTransportIcon[data-cw-transport-icon="pause"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E")}
.cwTransportIcon[data-cw-transport-icon="stop"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v14H5z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v14H5z'/%3E%3C/svg%3E")}
.cwTransportIcon[data-cw-transport-icon="step-forward"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4v16l10-8zm11 0h3v16h-3z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4v16l10-8zm11 0h3v16h-3z'/%3E%3C/svg%3E")}
.cwTransportIcon[data-cw-transport-icon="step-back"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4v16L9 12zm-14 0h3v16H5z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4v16L9 12zm-14 0h3v16H5z'/%3E%3C/svg%3E")}
.cwTransportIcon[data-cw-transport-icon="restart"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 1-6.7 9H2l4-5 4 5H7.4A5 5 0 1 0 12 7c-1.4 0-2.7.6-3.6 1.5L7 7.1A7 7 0 0 1 12 5z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 1-6.7 9H2l4-5 4 5H7.4A5 5 0 1 0 12 7c-1.4 0-2.7.6-3.6 1.5L7 7.1A7 7 0 0 1 12 5z'/%3E%3C/svg%3E")}
.cwTransportIcon:focus-visible{outline:3px solid #ffe36d!important;outline-offset:2px!important}
@media(max-width:1250px),(max-height:760px){.cwTransportIcon{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex-basis:38px!important}.cwTransportIcon::before{width:19px;height:19px}}