.st-stage{
  --st-ink:#e4eeef;--st-muted:#8ea6ac;--st-accent:#71e4ce;--st-purple:#bfabf4;
  --st-panel-width:clamp(144px,calc((100dvh - 420px)*.35545),250px);
  box-sizing:border-box;height:100%;min-height:0;padding:clamp(12px,1.2vw,24px);
  color:var(--st-ink);font-family:inherit;overflow:auto;scrollbar-width:thin;
  scrollbar-color:#304d56 transparent;background:radial-gradient(ellipse at 25% 15%,#18333355,transparent 60%);
}
.st-stage *{box-sizing:border-box}
.st-stage button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st-stage button:focus-visible{outline:2px solid #b2fff0;outline-offset:5px}
.st-stage [hidden]{display:none!important}
.st-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,18vw,320px);gap:clamp(20px,2.6vw,52px);height:100%;min-height:0}
.st-picture{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0;min-width:0}
.st-source-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.st-source-label{display:inline-flex;align-items:center;gap:7px;color:#a9c5bf;font-size:11px;line-height:1.35;letter-spacing:.035em}
.st-source-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#74d4bd;flex:none}
.st-focus-toggle{border:1px solid #35505c;background:#112630;color:#b3cccf;border-radius:6px;padding:7px 10px;white-space:nowrap;font-size:11px!important;line-height:1.25;flex:none;transition:background .2s,border-color .2s}
.st-focus-toggle:hover{background:#1c3a43;border-color:#668d93}
.st-image-space{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.st-figure{margin:0;max-width:100%;padding:7px 7px 0;border:1px solid #48635e;border-radius:9px;background:#0b151b;box-shadow:0 16px 48px #0005;overflow:hidden}
.st-screen{position:relative;width:100%;aspect-ratio:5/3;background:#202220;overflow:hidden;border-radius:3px;isolation:isolate}
.st-screen-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.st-screen-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.st-dimmer{fill:#000811;fill-opacity:.65}
.st-primary-focus{fill:none;stroke:#a1f4e2;stroke-width:2;vector-effect:non-scaling-stroke}
.st-detail-focus{fill:#ffe5a010;stroke:#ffe19b;stroke-width:2.4;vector-effect:non-scaling-stroke}
.st-caption{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;min-height:31px;padding:8px 1px 9px;color:#a6c6c1;font-size:11px;line-height:1.35}
.st-source-number{white-space:nowrap;flex:none;color:#58737b;font-size:10px;font-variant-numeric:tabular-nums}
.st-focus-label{min-width:0;overflow-wrap:anywhere}
.st-stage[data-cross-language=true] .st-figure{border-color:#8772b6}
.st-stage[data-cross-language=true] .st-source-label{color:#c4b4e5}
.st-stage[data-cross-language=true] .st-source-dot{background:#b39ae8}
.st-image-error{position:absolute;inset:0;display:grid;place-content:center;padding:24px;color:#e8d6b6;background:#19222b;font-size:14px;line-height:1.6}
.st-frame-enter{animation:st-frame-arrive .22s ease-out}
@keyframes st-frame-arrive{from{opacity:.76;filter:brightness(.8)}to{opacity:1;filter:none}}

.st-side{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;scrollbar-width:thin;padding:3px 3px 3px 0}
.st-explanation{height:clamp(150px,20vh,216px);flex:none;overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable;padding-right:3px}
.st-stage[data-complete=true] .st-explanation{height:auto;overflow:visible}
.st-step-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.st-step-ordinal{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;color:#72cabb;font-variant-numeric:tabular-nums}
.st-status{display:inline-flex;align-items:center;gap:6px;font-size:10px;line-height:1.3;color:#aebfc1}
.st-status i{width:5px;height:5px;border-radius:50%;background:#d59b97;display:inline-block;flex:none}
.st-status[data-status=running]{color:#a7d7ee}
.st-status[data-status=running] i{background:#7bc9ee;box-shadow:0 0 7px #76c9ee55}
.st-step-title{font-size:clamp(19px,1.55vw,29px);font-weight:600;line-height:1.45;letter-spacing:.02em;margin:0 0 14px;color:#edf5f3;text-wrap:balance}
.st-instruction{font-size:clamp(12px,1vw,15px);line-height:1.9;color:#b3c8cd;margin:0;overflow-wrap:anywhere}
.st-context-note{font-size:11px;line-height:1.65;color:#9caaa9;border-left:2px solid #6e8b7d;background:#14272c;padding:9px 11px;margin:15px 0 0;overflow-wrap:anywhere}
.st-hardware{margin-top:12px;padding-top:12px;border-top:1px solid #25414b;flex:none}
.st-hardware-head{display:flex;align-items:center;justify-content:space-between;gap:10px;height:22px;line-height:22px;margin:0 0 12px;color:#607f89;font-size:10px;letter-spacing:.03em}
.st-key-name{color:#c7e8e1;font-size:12px;font-weight:500;letter-spacing:0}
.st-panel{position:relative;width:var(--st-panel-width);min-width:144px;max-width:100%;aspect-ratio:4080/5280;overflow:hidden;margin:0 auto;border-radius:9px;border:1px solid #4b5b62;background:#d7dddf;box-shadow:0 7px 24px #0003}
.player:fullscreen .st-stage,.player.theater .st-stage{--st-panel-width:clamp(144px,calc((100dvh - 300px)*.35545),250px)}
.st-panel-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;filter:saturate(.65)}
.st-panel-dim{position:absolute;background:transparent;box-shadow:0 0 0 500px #08141eaa;border-radius:4px;pointer-events:none;transition:left .22s,top .22s,width .22s,height .22s}
.st-key{position:absolute;margin:0;padding:0;background:transparent;border:1px solid transparent;border-radius:4px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.st-key.st-active-key{border-color:#a5f4e2;box-shadow:0 0 0 1px #a5f4e2,0 0 5px #c8ffed88}
.st-key:hover{background:#5de6c926;border-color:#d2fff1}
.st-key-hint{font-size:10px;color:#617f88;text-align:center;line-height:1.5;margin:10px 0 0}
.st-dialog-action{border:1px solid #4d867c;border-radius:7px;background:#173e38;color:#d1f7ea;min-height:40px;padding:10px 12px;font-size:12px!important;margin-top:15px;text-align:left;line-height:1.4}
.st-dialog-action:hover{background:#24574b}
.st-action-area{margin-top:15px;min-width:0;grid-column:1/-1}
.st-action-area .st-dialog-action{display:block;width:100%;margin-top:0;min-height:48px;font-weight:550;font-size:13px!important}
.st-busy-message{font-size:12px;line-height:1.65;color:#b7dfd3;margin:10px 0 0;padding-left:14px;position:relative}
.st-busy-message:before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#8be5c6}
.st-stage [aria-disabled=true]{cursor:wait}
.st-stage .st-dialog-action[aria-disabled=true]{background:#23473f;color:#a9cbbf;border-color:#406f61}
.st-key.st-pressed-key{background:#b8ffe34a;box-shadow:0 0 0 2px #c5ffe7,0 0 11px #86ecc574}
.st-screen-hotspot{position:absolute;z-index:3;padding:0;border:2px solid #b0ffe2;border-radius:4px;background:#b4ffdd12;cursor:pointer;box-shadow:0 0 0 3px #83e0ba33}
.st-screen-hotspot:hover{background:#b4ffdd30}
.st-screen-hotspot:focus-visible{outline:3px solid #ffdf94;outline-offset:4px}
.st-hotspot-label{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#a6f0d5;color:#103a31;border-radius:4px;font-size:clamp(10px,.75vw,13px);font-weight:600;line-height:1.4;padding:4px 7px;box-shadow:0 3px 10px #0005;pointer-events:none}
.st-completion-card{padding:20px;background:linear-gradient(140deg,#183e36,#132c30);border:1px solid #5a9e86;border-radius:12px;box-shadow:0 10px 30px #0002}
.st-completion-mark{display:grid;place-items:center;width:31px;height:31px;margin-bottom:14px;border-radius:50%;border:1px solid #7cccaa;background:#1d503e;color:#b8ffe0;font-size:20px}
.st-completion-title{font-size:clamp(19px,1.4vw,24px);line-height:1.45;margin:0 0 10px;color:#ddfff0;font-weight:600}
.st-completion-body{font-size:12px;line-height:1.8;margin:0 0 19px;color:#a8cec2}
.st-completion-card .st-completion-action{background:#95e9cd;color:#103c31;border:1px solid #aaffdf;min-height:55px;font-size:14px!important;text-align:center;line-height:1.6;padding:10px}
.st-completion-card .st-completion-action:hover{background:#b8f9df}
.st-completion-secondary{display:block;background:transparent;width:100%;padding:11px 4px 0;font-size:11px!important;line-height:1.6;color:#b1d6c9;border:0;text-align:center}
.st-completion-secondary:hover{color:#f3fff8;text-decoration:underline}
.st-practice-note{font-size:10px;line-height:1.6;color:#7fa6aa;margin:12px 0 0}
.st-step-track{height:2px;overflow:hidden;background:#203941;margin-top:auto;padding-top:0;flex:none;min-height:2px}
.st-step-track>span{display:block;width:100%;height:100%;transform-origin:left;background:#76cdbb;transform:scaleX(0);will-change:transform}
.st-stage[data-practice=true] .st-step-track{display:none}

@media(min-width:1600px){
 .st-stage{padding:22px 28px}.st-source-label{font-size:12px}.st-caption{font-size:12px;min-height:34px}
 .st-focus-toggle{font-size:12px!important;padding:8px 12px}.st-step-head{margin-bottom:22px}.st-status{font-size:11px}
 .st-hardware-head{font-size:11px}.st-key-name{font-size:14px}
}
@media(min-width:821px) and (max-height:780px){
 .st-layout{grid-template-columns:minmax(0,1fr) 218px;gap:22px}.st-step-head{margin-bottom:10px}
 .st-step-title{font-size:19px;line-height:1.35;margin-bottom:9px}.st-instruction{font-size:12px;line-height:1.7}
 .st-hardware-head{margin-bottom:8px}
 .st-key-hint{margin-top:7px;font-size:9px}.st-context-note{margin-top:9px;padding:7px 9px}
}
@media(max-width:820px),(max-width:1000px) and (max-height:600px){
 .st-stage{height:auto;min-height:0;overflow:visible;padding:14px}
 .st-layout{display:flex;flex-direction:column;height:auto;gap:22px}
 .st-picture{display:flex;flex-direction:column;gap:12px;min-height:0}
 .st-source-bar{gap:8px;align-items:flex-start}.st-source-label{font-size:10px;max-width:65%;padding-top:7px}
 .st-focus-toggle{font-size:10px!important;padding:7px 8px}.st-image-space{display:block;height:auto;overflow:visible}
 .st-figure{width:100%!important;padding:6px 6px 0;border-radius:7px}.st-caption{font-size:10px;min-height:31px;gap:6px}
 .st-source-number{font-size:9px}.st-side{display:grid;grid-template-columns:1fr minmax(110px,30%);gap:0 18px;overflow:visible;padding:0}
 .st-explanation{display:contents}
 .st-step-head{grid-column:1/-1;margin-bottom:12px}.st-step-title{grid-column:1;font-size:20px;margin-bottom:8px}
 .st-instruction{grid-column:1;font-size:12px;line-height:1.8;margin-bottom:10px}
 .st-context-note{grid-column:1;margin-top:0;font-size:10px}.st-hardware{grid-column:2;grid-row:2/6;border:0;margin:0;padding:0}
 .st-panel{width:120px;min-width:0}.st-hardware-head{display:block;height:auto;line-height:1.4;text-align:center;margin-bottom:8px;font-size:9px}
 .st-key-name{display:block;margin-top:4px;font-size:11px}.st-key-hint{font-size:9px;margin-top:7px}
 .st-dialog-action,.st-practice-note{grid-column:1/-1}.st-step-track{grid-column:1/-1;margin-top:12px}
 .st-action-area{margin-top:10px}.st-completion-card{padding:18px}.st-stage[data-complete=true] .st-step-title,.st-stage[data-complete=true] .st-instruction{grid-column:1/-1}
}
@media(max-width:420px){
 .st-stage{padding:12px 10px}.st-side{grid-template-columns:minmax(0,1fr) 106px;gap:0 12px}
 .st-source-label{max-width:60%;font-size:9px}.st-focus-toggle{font-size:9px!important}
 .st-step-title{font-size:18px}.st-instruction{font-size:12px}.st-panel{width:106px}
 .st-caption{display:block}.st-source-number{display:block;margin-top:3px}.st-step-ordinal{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .st-frame-enter{animation:none}.st-key,.st-panel-dim,.st-focus-toggle{transition:none}
}

.st-diagram{position:absolute;inset:0}.st-diagram-svg{width:100%;height:100%;display:block}
.st-picture{grid-template-rows:auto minmax(0,1fr) auto}
.st-missing-note{border-left:3px solid #e6bb76;background:#3a3223;color:#efd5ad;padding:9px 12px;font-size:11px;line-height:1.65;max-height:85px;overflow:auto}
.st-stage[data-placeholder=true] .st-figure{border:2px solid #d7a966}
.st-stage[data-kind=diagram] .st-source-label{color:#e0c38d}.st-stage[data-kind=diagram] .st-source-dot{background:#dfbe80}
.st-stage[data-hardware=false] .st-explanation{height:auto;min-height:150px;max-height:none}
@media(max-width:820px),(max-width:1000px) and (max-height:600px){.st-stage[data-hardware=false] .st-side{display:block}.st-stage[data-hardware=false] .st-step-head{display:flex}.st-stage[data-hardware=false] .st-explanation{display:block}.st-missing-note{max-height:none}}

.st-missing-note{max-height:160px;padding:0;border-left-width:2px;color:#c5ad88;background:#2b2c2370;font-size:11px;line-height:1.7}
.st-missing-note summary{padding:7px 11px;cursor:pointer;user-select:none}.st-missing-note[open]{background:#302c21;max-height:180px}.st-production-body{padding:1px 13px 13px;white-space:pre-line}
.st-source-label{letter-spacing:.03em}.st-context-note{border-color:#708b80;color:#a3b9b7;background:transparent;padding:5px 0 5px 10px;font-size:11px}
.st-step-title{letter-spacing:0;line-height:1.4}.st-instruction{line-height:1.8}
@media(max-width:820px){.st-missing-note[open]{max-height:none}}

.st-context-note{white-space:pre-line}

/* Dynamic principle scenes own the complete visual field. */
.st-stage[data-dynamic=true] .st-layout{grid-template-columns:minmax(0,1fr);gap:0}
.st-stage[data-dynamic=true] .st-side{display:none}
.st-stage[data-dynamic=true] .st-caption{display:none}
.st-stage[data-dynamic=true] .st-figure{padding:0;border-color:#4b7c77}
.st-stage[data-dynamic=true] .st-screen{background:#0a202a;border-radius:8px}
.st-stage[data-dynamic=true] .st-diagram{height:100%;width:100%}
.st-stage[data-dynamic=true] .st-missing-note{margin-top:0}
/* The continuous principle sequence shares a lecture frame across scene cuts. */
.st-stage:is([data-shot='03'],[data-shot='04'],[data-shot='05'],[data-shot='06'],[data-shot='07'],[data-shot='08'],[data-shot='09'])[data-dynamic=true] .st-source-bar{display:none}
.st-stage:is([data-shot='03'],[data-shot='04'],[data-shot='05'],[data-shot='06'],[data-shot='07'],[data-shot='08'],[data-shot='09'])[data-dynamic=true] .st-picture{grid-template-rows:minmax(0,1fr) auto;gap:6px}
.st-stage:is([data-shot='03'],[data-shot='04'],[data-shot='05'],[data-shot='06'],[data-shot='07'],[data-shot='08'],[data-shot='09'])[data-dynamic=true] .st-figure{border-color:#31474d}
@media(min-width:821px){
 .st-stage:is([data-shot='03'],[data-shot='04'],[data-shot='05'],[data-shot='06'],[data-shot='07'],[data-shot='08'],[data-shot='09']) :is(.pz-scene,.em-scene,.fd-scene,.ld-scene,.ln-scene,.dw-scene,.rt-scene)[data-mode=lecture] :is(.pz-toolbar,.em-toolbar,.fd-toolbar,.ld-toolbar,.ln-toolbar,.dw-toolbar,.rt-toolbar){padding:8px 12px;min-height:50px;gap:8px}
 .st-stage:is([data-shot='03'],[data-shot='04'],[data-shot='05'],[data-shot='06'],[data-shot='07'],[data-shot='08'],[data-shot='09']) :is(.pz-scene,.em-scene,.fd-scene,.ld-scene,.ln-scene,.dw-scene,.rt-scene)[data-mode=lecture] :is(.pz-toolbar,.em-toolbar,.fd-toolbar,.ld-toolbar,.ln-toolbar,.dw-toolbar,.rt-toolbar) button{font-size:12px;line-height:1.4;padding:7px 11px;min-height:33px}
 .st-stage:is([data-shot='03'],[data-shot='04'],[data-shot='05'],[data-shot='06'],[data-shot='07'],[data-shot='08'],[data-shot='09']) :is(.pz-scene,.em-scene,.fd-scene,.ld-scene,.ln-scene,.dw-scene,.rt-scene)[data-mode=lecture] :is(.pz-status,.em-status,.fd-status,.ld-status,.ln-status,.dw-status,.rt-status){display:none}
 .st-stage :is(.ln-scene,.dw-scene,.rt-scene)[data-mode=lecture] :is(.ln-comparison-status,.dw-event-status,.rt-step-status){display:none}
}
/* Keep shot06's incoming presentation frame equal to shot05's outgoing frame. */
.st-stage[data-shot='06'] .ld-scene[data-mode=lecture] .ld-actions button:not([data-action=rotate]),.st-stage[data-shot='06'] .ld-scene[data-mode=lecture] .ld-load-control{display:none}
@media(max-width:820px),(max-width:1000px) and (max-height:600px){
 .st-stage[data-shot='03'] .pz-canvas{flex:none;aspect-ratio:4/3}
 .st-stage[data-shot='04'] .em-canvas{flex:none;aspect-ratio:4/3}
 .st-stage[data-shot='05'] .fd-scene{height:auto;min-height:0}
 .st-stage[data-shot='05'] .fd-viewport{flex:none;aspect-ratio:4/3}
 .st-stage[data-shot='06'] .ld-scene{height:auto;min-height:0}
 .st-stage[data-shot='06'] .ld-viewport{flex:none;aspect-ratio:4/3}
 .st-stage :is(.ln-scene,.dw-scene,.rt-scene){height:auto;min-height:0}
 .st-stage :is(.ln-viewport,.dw-viewport,.rt-viewport){flex:none;aspect-ratio:4/3}
}
/* In full-screen lecture mode, give the moving diagram the presentation area. */
@media(min-width:821px){
 .player:fullscreen:has(.st-stage[data-dynamic=true]) .course-head,
 .player.theater:has(.st-stage[data-dynamic=true]) .course-head,
 .player:fullscreen:has(.st-stage[data-dynamic=true]) .chapters,
 .player.theater:has(.st-stage[data-dynamic=true]) .chapters{display:none}
 .player:fullscreen:has(.st-stage[data-dynamic=true]) .narrative,
 .player.theater:has(.st-stage[data-dynamic=true]) .narrative{height:86px;min-height:86px;padding:11px 24px}
 .player:fullscreen .st-stage[data-dynamic=true],.player.theater .st-stage[data-dynamic=true]{padding:10px 16px}
 .player:fullscreen .st-stage[data-dynamic=true] .st-source-bar,
 .player.theater .st-stage[data-dynamic=true] .st-source-bar{display:none}
 .player:fullscreen .st-stage[data-dynamic=true] .st-picture,
 .player.theater .st-stage[data-dynamic=true] .st-picture{grid-template-rows:minmax(0,1fr) auto;gap:8px}
}
@media(max-width:820px),(max-width:1000px) and (max-height:600px){
 .st-stage[data-dynamic=true] .st-screen{aspect-ratio:auto!important;overflow:visible}
 .st-stage[data-dynamic=true] .st-diagram{height:auto;position:relative}
 .st-stage[data-dynamic=true] .st-figure{width:100%!important}
}