/* One working drawing, one current action. Gray denotes baseline, teal current state. */
body.student-view{background:#f4f7f8;color:#203a48}.student-view .workbench{display:block;max-width:1440px}.student-view main{max-width:none;padding:24px 36px}.student-view header{background:#fff;align-items:center}.student-view header span{display:none}.student-view .workbench>aside{display:none}.student-view.units-open .workbench>aside{display:block;position:fixed;z-index:10;top:62px;left:12px;width:310px;max-height:80vh;background:white;box-shadow:0 12px 32px #203a482a}.student-view h1{font-family:"DengXian","Microsoft YaHei",sans-serif;font-size:32px;max-width:1100px}.student-view #student-progress{float:right;color:#577782;font-size:14px;margin-top:3px}.student-view .question{font-size:17px;margin-bottom:22px;max-width:950px}.student-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}.student-view .student-work{background:#fff;border:1px solid #d4e0e4;border-radius:12px;padding:18px}.student-view .student-work>h2,.student-view .student-work h3:empty{display:none}.student-view .visuals{display:block}.student-view #mechanism{height:clamp(300px,35vw,420px);background:#fff;border:0}.student-view .student-actions{background:#eaf1f4;padding:20px;border-radius:12px}.student-view .student-actions section{padding:0;border:0}.student-view #student-instruction{font-size:18px;margin:0 0 22px;line-height:1.75}.student-view .prediction{background:none;border:0;padding:0}.student-view .prediction h2{font-size:15px;color:#536d78}.student-view .prediction-actions{display:grid;gap:15px}.student-view .primary{background:#216f83;border-color:#216f83;color:#fff;padding:12px 16px;font-size:16px;min-height:46px}.student-view #student-readout{font-size:21px;font-weight:600;color:#175d70;background:#edf5f6;padding:14px;margin:14px 0}.student-view .student-work>.gesture,.student-view .student-work>#insight,.student-view .student-work>details,.student-view .student-work .parameter #demo{display:none}.student-view .parameter{display:grid;grid-template-columns:1fr 105px}.student-view #range{grid-column:1/-1;width:100%;min-width:0;accent-color:#216f83}.student-view .parameter #reset{grid-column:1/-1;justify-self:start}.student-view .student-work #value{width:100%}.student-view .student-tools{padding:16px;margin-top:24px;background:white;border:1px solid #d7e3eb;border-radius:8px}.student-view .student-tools>div:first-of-type{max-width:800px}.student-view .student-tools svg{width:100%}.student-view #student-full{display:block;margin:16px 0;font-size:14px}.student-view .footnote{display:none}.student-view #student-explanation h3{color:#216f83;font-size:16px}.student-view #student-explanation details{margin:16px 0}.student-view #student-next{width:100%;margin-top:22px}.student-view #student-prev{display:block;margin-top:12px}.student-view .challenge{margin-top:20px!important}.student-view .challenge #target{font-size:16px}.student-view .transfer #related{font-size:13px}.student-view .boundary-quiz{display:none}.student-view .student-tools .boundary-quiz{display:block}.student-view .bridge-source-viewer{display:none}.student-view #student-explanation,.student-view .challenge,.student-view .transfer{display:none}.student-view[data-learning-step="0"] .student-work .parameter,.student-view[data-learning-step="0"] #student-readout,.student-view[data-learning-step="0"] .student-tools{display:none}.student-view:not([data-learning-step="0"]) .prediction{display:none}.student-view[data-learning-step="2"] #student-explanation,.student-view[data-learning-step="2"] .challenge,.student-view[data-learning-step="3"] .transfer{display:block}.student-view #student-next[hidden],.student-view #student-prev[hidden],.student-view #draw[hidden]{display:none}.student-view #student-prev{background:transparent;border:0;color:#466b7a}.student-view details summary{padding:5px;line-height:1.6}.student-view input[type=range]{min-height:34px}.student-view .student-actions p{overflow-wrap:anywhere}@media(max-width:850px){.student-view main{padding:18px}.student-workspace{grid-template-columns:1fr}.student-view h1{font-size:25px}.student-view #mechanism{height:290px}.student-view #student-progress{float:none}.student-view .student-actions{padding:18px}.student-view .question{font-size:16px}.student-view #student-readout{font-size:18px}.student-view #student-instruction{font-size:17px}.student-view .student-tools .readouts{grid-template-columns:1fr 1fr}.student-view #student-explanation{max-width:100%}}
/* Default: direct manipulation. The guided class above is only applied for ?view=guided. */
body.direct-view{background:#f3f6f9;color:#173246}
.direct-view .workbench{display:block;max-width:1240px;margin:0 auto}
.direct-view main{max-width:none;padding:24px 32px}
.direct-view header{max-width:1240px;margin:auto;align-items:center;flex-wrap:wrap}
.direct-view header span{display:none}
.direct-view .workbench>aside{display:none}
.direct-view.units-open .workbench>aside{display:block;position:fixed;z-index:20;top:68px;left:16px;width:310px;max-height:78vh;background:white;box-shadow:0 6px 26px #17324628}
.direct-view h1{font-size:28px;line-height:1.45;margin:5px 0 10px}
.direct-view .question{font-size:16px;color:#587083;margin:0 0 20px}
.direct-view .direct-work{background:#fff;border:1px solid #d5e0e8;border-radius:9px;padding:18px 20px}
.direct-view .direct-work>h2{font-size:15px;margin-bottom:14px}
.direct-view .parameter{display:grid;grid-template-columns:minmax(0,1fr) 115px auto auto;gap:9px;margin:0}
.direct-view #parameter-label{font-weight:500}
.direct-view #value{width:100%;min-width:0}
.direct-view #range{grid-column:1/-1;grid-row:2;width:100%;height:30px;margin:0;min-width:0}
.direct-view .parameter button{min-height:44px;white-space:nowrap}
.direct-view #direct-readout{font:600 20px/1.5 Consolas,"Microsoft YaHei",monospace;color:#1669ad;margin:12px 0 5px}
.direct-view .visuals{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px}
.direct-view .visuals h3{font-size:13px;margin:7px 0}
.direct-view .visuals svg{background:#f9fbfc;border:0}
.direct-view .gesture{margin:9px 0;color:#587083}
.direct-view #insight{font-size:14px;margin:12px 0}
.direct-view .comparison{margin:12px 0;font-size:12px}
.direct-view .direct-details{border-top:1px solid #d5e0e8;margin-top:16px}
.direct-view .direct-practice,.direct-view .direct-resources{border-top:1px solid #d5e0e8;margin-top:20px}
.direct-view details>summary{padding:12px 0;min-height:44px;font-size:14px}
.direct-view .direct-practice>section{background:transparent;border-left:0;padding:18px 0}
.direct-view .direct-details>.readouts{margin-top:8px}
.direct-view .direct-guided-link{display:block;margin:15px 0;font-size:13px}
.direct-view .footnote{display:none}
.direct-view button,.direct-view select{min-height:44px}
.direct-view #student-menu{margin-left:auto}
@media(max-width:760px){
 .direct-view main{padding:16px 14px}.direct-view header{padding:10px 14px;gap:10px}
 .direct-view h1{font-size:23px}.direct-view .question{font-size:14px;margin-bottom:15px}
 .direct-view .direct-work{padding:13px 12px}.direct-view .direct-work>h2{font-size:13px;margin-bottom:10px}
 .direct-view .parameter{grid-template-columns:minmax(0,1fr) 95px}
 .direct-view .parameter button{grid-row:3;font-size:13px;padding:7px 5px;min-width:0}.direct-view #reset{grid-column:1}.direct-view #demo{grid-column:2}
 .direct-view #direct-readout{font-size:17px;overflow-wrap:anywhere}
 .direct-view .visuals{grid-template-columns:1fr;gap:10px}
 .direct-view #mechanism{height:210px;max-width:100%}.direct-view #plot{max-height:250px}
 .direct-view .visuals h3{font-size:12px}.direct-view .comparison{gap:7px}
 .direct-view .readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .direct-view .readouts strong{font-size:18px}
 .direct-view.units-open .workbench>aside{max-width:calc(100vw - 28px)}
 .direct-view.units-open aside nav{display:block}.direct-view.units-open aside label{display:block;width:100%}
}

/* A short answer follows the experiment, with assumptions kept in the text. */
.unit-answer{border-top:1px solid #ccd9dc;border-left:3px solid #72918a;background:#f3f6ef;padding:20px 24px;margin-top:25px;line-height:1.9}
.unit-answer h2{font-size:15px;color:#45685a}.unit-answer h3{font-size:19px;line-height:1.6}.unit-answer p{font-size:15px;margin:0}
.student-view[data-learning-step="0"] .unit-answer,.student-view[data-learning-step="1"] .unit-answer{display:none}

.unit-guidance{border-left:3px solid #b89a66;background:#fcfaf4;padding:15px 20px;margin:18px 0 12px}.unit-guidance h2{font-size:14px;color:#786744;margin:0 0 8px}.unit-guidance ol{padding-left:1.4em;margin:0;line-height:1.85}.unit-guidance li+li{margin-top:7px}
.unit-objectives{font-size:14px;padding:12px 20px;background:#f2f6ef;margin:0 0 24px;border-left:3px solid #91a68a}.unit-objectives summary{font-weight:600;cursor:pointer}.unit-objectives ul{padding-left:1.4em;line-height:1.8;margin:8px 0 0}
.unit-answer ol{padding-left:1.4em}.unit-answer li+li{margin-top:18px}.unit-answer h3{font-size:16px}.unit-answer p{font-size:14px}