/* One visual explanation at a time, placed directly below its live model. */
#stage.sequenceScene{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:1.4% 5% 1.7%;gap:1cqw}
.sequenceScene #readingPanel{display:block;min-height:0;width:100%;max-width:1560px;justify-self:center}
.sequenceScene #copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4cqw 2cqw;align-items:center}
.sequenceScene #copy .eyebrow{grid-column:1;grid-row:1;margin:0;font-size:clamp(10px,.64cqw,14px)}
.sequenceScene #copy h2{grid-column:1;grid-row:2;margin:0;font-size:clamp(25px,2cqw,40px);line-height:1.15;letter-spacing:-.045em}
.sequenceScene #copy>.lead,.sequenceScene #stepExplanation,.sequenceScene #copy>.contextTag,.sequenceScene #copy>.caseEvidence,.sequenceScene #copy>.processContext,.sequenceScene #watchHint{display:none!important}
.sequenceScene #mechanismTabs{grid-column:2;grid-row:1/3;margin:0;background:#e5e9e0;border:1px solid #ccd4c8;padding:4px;align-self:center}
.sequenceScene #mechanismTabs button{font-size:clamp(12px,.79cqw,17px);padding:.6em .9em}
.sequenceScene #modelStage{width:100%;max-width:1560px;justify-self:center;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:.5cqw;padding:1cqw 1.7cqw .7cqw;box-shadow:0 14px 38px #263a3a17}
.sequenceScene #modelStage>*{grid-column:1}
.sequenceScene #stageHeading{grid-row:1;font-size:clamp(10px,.62cqw,13px);padding-right:190px;pointer-events:none}
.sequenceScene #visual{grid-row:2;height:100%;min-height:0;width:100%;max-width:1120px;justify-self:center}
.sequenceScene #modelLegend{grid-row:3}
#narrativeCaption{grid-row:3;justify-self:center;width:100%;max-width:1140px;text-align:center;min-height:5.8cqw;padding:.4cqw 0 .75cqw;color:#eff4f1;align-self:end}
#narrativeCaption>div:first-child{display:flex;gap:.8em;justify-content:center;align-items:center;line-height:1.35;margin-bottom:.4em}
#captionPhase{font-size:clamp(10px,.62cqw,14px);letter-spacing:.09em;color:#b4cabf;text-transform:uppercase;white-space:nowrap}
#captionTitle{font-size:clamp(12px,.8cqw,17px);font-weight:400;color:#c5d7cf;border-left:1px solid #71928c66;padding-left:.8em}
#captionText{font-size:clamp(20px,1.47cqw,31px);line-height:1.36;font-weight:400;letter-spacing:-.015em;margin:0 auto;max-width:1000px;min-height:1.4em;text-wrap:balance}
.captionProgress{height:2px;width:90px;background:#d2e4d022;margin:1cqw auto 0;border-radius:3px;overflow:hidden}
#stepProgress{display:block;height:100%;width:0;background:#98c3af}
.sequenceScene #modelControls{grid-row:1;justify-self:end;align-self:center;margin-right:0;z-index:6}
.sequenceScene #modelControls button{padding:.35em .65em;font-size:clamp(11px,.73cqw,15px);color:#adc6be}
.sequenceScene #liveDock{grid-row:4;padding:.35cqw 0 0;display:flex;align-items:center;justify-content:space-between;gap:1.2cqw;border-top:1px solid #a1bdb029;min-height:43px}
.sequenceScene #stepRail{display:flex;gap:1.2cqw;flex:1;max-width:900px}
.sequenceScene #stepRail button{flex:1;border:0;border-radius:0;border-bottom:1px solid transparent;color:#9cb7ad;padding:.4em .1em;font-size:clamp(11px,.76cqw,16px);display:flex;gap:.5em;align-items:baseline;justify-content:center}
.sequenceScene #stepRail button span{font-size:.76em;opacity:.8}
.sequenceScene #stepRail button.active{color:#f0e6d1;border-color:#c8ad7e;background:none}
.sequenceScene #stepRail button.done{color:#82aa98;border-bottom-color:#527668}
.sequenceScene .transport,.sequenceScene.isExploring .transport{display:flex;align-items:center;flex-wrap:nowrap;gap:.55cqw;margin:0;padding:0;border:0;width:auto}
.sequenceScene #playLive{min-width:105px;font-size:clamp(12px,.8cqw,17px);background:#d7e8dc;color:#183b33;border:1px solid #c8e0cf;padding:.55em .9em;white-space:nowrap}
.sequenceScene #restartLive{display:block;font-size:16px;padding:.35em .5em;color:#adc6be;border-color:transparent}
.sequenceScene #scrub,.sequenceScene #backStep,.sequenceScene #forwardStep{display:none}
.sequenceScene #liveTime{font-size:clamp(10px,.61cqw,13px);color:#a7c1b7;white-space:nowrap}
.sequenceScene.manualSequence #backStep,.sequenceScene.manualSequence #forwardStep{display:block}
.sequenceScene.manualSequence #playLive{display:none}
.sequenceScene #inspector{grid-row:3;width:min(100%,1050px);justify-self:center;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto auto;gap:5px 22px;background:#18323c;border:1px solid #617d7759;color:#e5ece7;max-height:none;overflow:visible;padding:12px 20px;margin-bottom:8px}
.sequenceScene #inspector .inspectorHeading{grid-column:1/-1;grid-row:1;color:#adc6be;margin:0}
.sequenceScene #inspector .inspectorHeading button{color:#cbded5}
.sequenceScene #inspector>label{grid-column:1;grid-row:2;color:#adc6be;font-size:11px;margin:0}
.sequenceScene #inspector>select{grid-column:1;grid-row:3;max-width:100%;margin:0;font-size:14px}
.sequenceScene #inspector>#regionDetail{grid-column:2;grid-row:2/4;align-self:center;margin:0}
.sequenceScene.inspection #modelLegend{display:none!important}
.sequenceScene #inspector select{background:#213f48;color:#e6f0e8;border-color:#648279}
.sequenceScene #regionDetail{font-size:clamp(13px,.92cqw,19px);margin:.5em 0 0;line-height:1.5;color:#c7d8d0}
.sequenceScene.inspection #narrativeCaption{display:none}
.sequenceScene.isExploring #modelLegend{grid-row:3;margin:.3cqw 0}
.sequenceScene.isExploring #narrativeCaption{display:none}
.sequenceScene.isExploring #liveDock{grid-row:5}
.sequenceScene.isExploring #exploreHelp{grid-row:4;text-align:center;font-size:12px;margin:.3em 0}
.sequenceScene.isExploring #modelControls{margin-right:0}
.sequenceScene.isExploring #stageHeading .stageLive{display:none}
.sequenceScene.isExploring #scrub{display:block;max-width:120px;min-width:55px;width:9cqw}
.sequenceScene.isExploring #liveTime{display:none}
.sequenceScene .label3d small{display:none}
.sequenceScene .label3d{font-size:clamp(12px,.8cqw,17px);background:#112d39e8;box-shadow:0 4px 16px #00000013}
@media(max-width:1250px),(max-height:680px){
 #stage.sequenceScene{padding:25px 5%;gap:18px;min-height:720px}
 .sequenceScene #copy h2{font-size:29px}.sequenceScene #copy .eyebrow{font-size:11px}
 .sequenceScene #modelStage{min-height:580px;grid-template-rows:auto minmax(350px,1fr) auto auto auto;padding:16px 20px 12px;gap:8px}
 .sequenceScene #visual{height:350px;min-height:350px}
 #narrativeCaption{min-height:80px;padding:0 0 8px}#captionText{font-size:23px}#captionTitle{font-size:13px}#captionPhase{font-size:10px}.captionProgress{margin-top:12px}
 .sequenceScene #liveDock{gap:16px;padding-top:7px}.sequenceScene #liveTime{font-size:10px}.sequenceScene #stepRail{gap:8px}.sequenceScene #stepRail button{font-size:12px}
}
@media(max-width:760px){
 #stage.sequenceScene{padding:22px 5%;gap:17px;min-height:0}
 .sequenceScene #copy{display:block}.sequenceScene #copy h2{font-size:29px;line-height:1.18;margin-top:10px}.sequenceScene #mechanismTabs{margin-top:14px;width:max-content}.sequenceScene #mechanismTabs button{font-size:12px}
 .sequenceScene #modelStage{min-height:0;grid-template-rows:auto minmax(300px,1fr) auto auto auto;padding:13px 10px 15px;gap:10px;border-radius:16px}
 .sequenceScene #stageHeading{font-size:8px;gap:5px;align-items:center;padding-right:0}.sequenceScene .stageLive{font-size:7px}
 .sequenceScene #visual{height:300px;min-height:300px}
 .sequenceScene #modelControls{grid-row:5;margin:0;justify-self:center;gap:6px}
 .sequenceScene #modelControls button{font-size:12px;padding:.45em .7em}
 #narrativeCaption{min-height:118px;padding:0 7px 5px}#narrativeCaption>div:first-child{display:block;margin-bottom:9px}#captionPhase{display:block;font-size:9px;margin-bottom:5px}#captionTitle{font-size:12px;border:0;padding:0}#captionText{font-size:20px;line-height:1.4;min-height:2.8em}.captionProgress{margin-top:14px}
 .sequenceScene #liveDock{display:flex;flex-direction:column;gap:13px;padding-top:10px;align-items:stretch}
 .sequenceScene #stepRail{width:100%;max-width:none;gap:4px}.sequenceScene #stepRail button{font-size:10px;display:block;line-height:1.5}.sequenceScene #stepRail button span{display:block;font-size:9px}
 .sequenceScene .transport{justify-content:center;gap:12px}.sequenceScene #playLive{font-size:13px}.sequenceScene #liveTime{font-size:10px}
 .sequenceScene #inspector{display:block;max-height:none;padding:12px}.sequenceScene #regionDetail{font-size:14px}.sequenceScene #inspector>label{display:block;margin:5px 0}.sequenceScene #inspector>#regionDetail{margin-top:10px}
 .sequenceScene.isExploring #modelControls{grid-row:6;margin:0}.sequenceScene.isExploring #liveDock{grid-row:5}.sequenceScene .label3d{font-size:11px;max-width:46%;padding:.35em .5em}
}
/* Short landscape screens keep the live model and its current sentence together. */
@media(max-height:500px) and (orientation:landscape){
 #stage.sequenceScene{min-height:0;padding:14px 5%;gap:12px}
 #stage.sequenceScene #readingPanel{padding:0}
 #stage.sequenceScene #copy h2{font-size:26px;line-height:1.15}
 #stage.sequenceScene #modelStage{min-height:0;grid-template-rows:auto 190px auto auto auto;padding:10px 16px;gap:6px}
 #stage.sequenceScene #visual{height:190px;min-height:190px}
 #stage.sequenceScene #narrativeCaption{min-height:72px;padding:2px 4px 5px;align-self:center}
 #stage.sequenceScene #narrativeCaption>div:first-child{margin-bottom:6px}
 #stage.sequenceScene #captionText{font-size:20px;line-height:1.3;min-height:1.3em}
 #stage.sequenceScene #captionTitle{font-size:12px}
 #stage.sequenceScene #captionPhase{font-size:10px}
 #stage.sequenceScene .captionProgress{margin-top:8px}
 #stage.sequenceScene #liveDock{min-height:39px;padding-top:5px;gap:12px}
 #stage.sequenceScene #inspector{padding:10px 14px;margin-bottom:0}
 #stage.sequenceScene #exploreHelp{margin:0;line-height:1.35}
}

/* The finished lesson becomes a clear decision, in the same place as playback. */
.completionAnnouncement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sequenceScene #completionPanel{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:17px 22px;background:#e1eee3;color:#193c33;border:1px solid #b7d3bc;border-radius:12px}
.completionMessage{display:flex;align-items:center;gap:14px;min-width:0}
.completionCheck{display:grid;place-items:center;flex:none;width:37px;height:37px;border:1px solid #78a78d;border-radius:50%;font-size:22px;color:#26765a}
#completionTitle{font-size:clamp(18px,1.15cqw,25px);font-weight:600;line-height:1.2;letter-spacing:-.025em;margin:0 0 5px}
#completionDestination{font-size:clamp(12px,.82cqw,17px);line-height:1.4;color:#486359;margin:0}
.completionActions{display:flex;align-items:center;gap:12px;flex:none}
.sequenceScene #completionNext,.sequenceScene #completionRepeat{font-size:clamp(13px,.91cqw,19px);padding:.7em 1em;white-space:nowrap;border-radius:6px}
.sequenceScene #completionNext{background:#205648;border:1px solid #205648;color:#fff;font-weight:600}
.sequenceScene #completionNext:hover{background:#153f35;border-color:#153f35}
.sequenceScene #completionRepeat{background:transparent;border:1px solid #a4bca8;color:#274d3e}
.sequenceScene #completionRepeat:hover{background:#cbded0;border-color:#7da087}
.sequenceScene.showCompletion #liveDock{display:block;padding:0;border-top:0}
.sequenceScene.showCompletion #stepRail,.sequenceScene.showCompletion .transport{display:none}
@media(max-width:1000px){
 .sequenceScene #completionPanel{padding:15px;gap:14px}
 .completionActions{gap:8px}
 .completionCheck{width:30px;height:30px;font-size:18px}
 .completionMessage{gap:10px}
 #completionTitle{font-size:19px}
 .sequenceScene #completionNext,.sequenceScene #completionRepeat{font-size:13px;padding:.7em .8em}
}
@media(max-width:600px){
 .sequenceScene #completionPanel{flex-direction:column;align-items:stretch;gap:16px;padding:16px 13px}
 .completionActions{display:grid;grid-template-columns:1fr;gap:8px}
 .sequenceScene #completionNext,.sequenceScene #completionRepeat{width:100%;padding:.8em}
 #completionTitle{font-size:20px}
 #completionDestination{font-size:13px}
}
@media(max-height:500px) and (orientation:landscape){
 .sequenceScene #completionPanel{padding:10px 14px;gap:12px}
 #completionTitle{font-size:18px;margin-bottom:3px}
 #completionDestination{font-size:12px}
}