:root{--ink:#153b50;--muted:#527183;--teal:#167d89;--line:#cbdde4;--pgf:#ff902b;--cor:#518dff;--velocity:#ed55d7;--friction:#47c789}*{box-sizing:border-box}body{margin:0;background:linear-gradient(150deg,#e9f4f6,#f5f8f7 48%,#dce9eb);color:var(--ink);font:17px/1.6 "PingFang SC","Microsoft YaHei",sans-serif}button,select{font:inherit}button{cursor:pointer;border:1px solid #c3d6dd;background:#ffffffb8;border-radius:9px;color:var(--ink);padding:9px 14px;min-height:43px;transition:background .18s,transform .18s}button:hover{background:#e3f1f2}button:active{transform:translateY(1px)}button:disabled{opacity:.36;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #d99833;outline-offset:3px}button.primary{background:#116e7d;color:#fff;border-color:#116e7d;box-shadow:0 5px 15px #0a596024}.full{width:100%}.quiet{background:transparent}.masthead{max-width:1640px;margin:auto;padding:20px 32px 14px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:13px;letter-spacing:3px;color:#347d87}h1{margin:3px 0;font-size:30px;letter-spacing:3px;line-height:1.3}h1 small{font-size:14px;letter-spacing:2px;font-weight:400;margin-left:14px;color:#668897}.labs{display:flex;gap:10px;max-width:1576px;margin:0 auto 21px}.labs button{display:flex;flex:1;align-items:center;justify-content:center;gap:16px;background:#dae8ed94;border:1px solid #fff;border-radius:12px}.labs button>span{font-size:13px;opacity:.6}.labs button.active{background:#173f52;color:#fff;border-color:#173f52}.labs b{font-size:18px}.labs small{font-size:13px;opacity:.75}main{max-width:1640px;margin:auto;padding:0 32px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.kicker{font-size:12px;color:#52808a;letter-spacing:2px;margin:0 0 4px}h2{font-size:25px;font-weight:650;margin:0;letter-spacing:1px}.pill{background:#fff9;border:1px solid #b9d2d8;border-radius:30px;font-size:13px;padding:5px 14px;color:#2d707d}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:22px;align-items:start}.scene-wrap{position:relative;background:#fff;border:1px solid #c8dce3;border-radius:16px;overflow:hidden;box-shadow:0 12px 36px #24475710}.scene-wrap.dark{background:#071723;border-color:#123d53;box-shadow:0 20px 48px #0a30492b}.webgl-stage{position:relative;height:min(59vh,620px);min-height:440px;background:radial-gradient(ellipse at 50% 35%,#112b3c,#06121d 75%);touch-action:none}.webgl-stage canvas{display:block;width:100%;height:100%;outline:none}.view-tools{position:relative;display:flex;gap:7px;padding:14px 16px 2px;align-items:center;background:#091b29;color:#bfd8e5;z-index:3}.view-tools button{font-size:12px;color:#b8d4e3;padding:5px 12px;min-height:30px;background:#112d41;border-color:#254455;border-radius:6px}.view-tools button:hover{background:#21495e}.scene-badge{font-size:12px;letter-spacing:1px;margin-right:auto;color:#82a8bc}.drag-hint{position:absolute;top:61px;right:18px;z-index:2;color:#708ea1;font-size:11px;pointer-events:none}.caption{margin:0;padding:10px 18px;font-size:12px;color:#5f7d8a;border-top:1px solid #dee9ee}.dark .caption{color:#809cae;border-color:#183646;background:#0a1c2a}.legend{display:flex;flex-wrap:wrap;gap:7px 25px;justify-content:center;padding:11px 14px;background:#0a1c2a;border-top:1px solid #1b3949;font-size:12px;color:#c2d6e2}.legend i{font-size:20px;font-weight:800;font-style:normal;display:inline-block;margin-right:7px;line-height:1}.pgf{color:var(--pgf)}.cor{color:var(--cor)}.velocity{color:var(--velocity)}.friction{color:var(--friction)}.label3d{position:absolute;pointer-events:none;transform:translate(-50%,-50%);padding:3px 8px;border-radius:5px;background:#081724df;border:1px solid #31546670;font-size:13px;color:#d9eaf4;white-space:nowrap;z-index:2;text-shadow:0 1px 3px #0008;line-height:1.5}.label3d.small{font-size:11px;padding:2px 5px;background:#0c21319c;border:0}.label3d.ground{font-size:16px;font-weight:700;padding:5px 14px}.label3d.heat{color:#ffa987;border-color:#99563877}.label3d.cool{color:#79cbea;border-color:#3682ad77}.label3d.pressure-high{color:#ffd099;border-color:#97663366}.label3d.pressure-low{color:#93d8ff;border-color:#3f7caa66}.label3d.force-label{font-size:13px;font-weight:650}.stage-heading{border-bottom:1px solid #bed6de;padding-bottom:10px}.step-number{display:block;font-size:13px;font-weight:500;letter-spacing:3px;color:#62909b}.stage-title{font-size:23px;margin:5px 0}.question{font-size:18px;line-height:1.6;margin:15px 0}.stage-note{color:#547381;font-size:15px;line-height:1.75;margin-bottom:15px;min-height:78px}.row{display:flex;gap:8px;margin:11px 0}.row>*{flex:1;min-width:0}.switches{border-top:1px solid #ccdde2;border-bottom:1px solid #ccdde2;padding:9px 0;margin:17px 0}.check{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.4;padding:6px 0}.check input{width:17px;height:17px;accent-color:#137988}.text-button{border:0;background:transparent;text-decoration:underline;font-size:13px;color:#577988;padding:7px 0;min-height:30px}.task{border-left:3px solid #69a1ad;background:#ffffff73;padding:13px 15px;border-radius:0 10px 10px 0;margin:16px 0}.task h3{font-size:15px;margin:0 0 7px}.task p{font-size:14px;margin:5px 0}.task .row button{font-size:13px;padding:7px}.chain{padding:12px 0;color:#327785;font-size:14px}.hint{font-size:12px!important;line-height:1.6;color:#79919a;margin:7px 0}.training-tabs{display:flex;gap:8px;margin:0 0 16px}.training-tabs button{font-size:14px;border-radius:8px;padding:7px 20px}.training-tabs button.active{background:#176a7d;color:white;border-color:#176a7d}.field{display:block;font-size:13px;color:#5a7a87;margin-bottom:10px}.field select{display:block;width:100%;border:1px solid #bed5de;background:#fff;color:#214c60;border-radius:8px;padding:8px 12px;font-size:16px;margin-top:3px}.angle-readout{font-size:13px;color:#ac347f;border-radius:6px;background:#ffffff80;padding:5px 10px}.feedback{font-size:14px;background:#ddefe9;color:#17574d;border-radius:9px;padding:11px 14px;line-height:1.8}.feedback.error{background:#fff0d8;color:#885722}.answer-button{width:100%;color:#126c7b;border-color:#86b2bd;background:#eaf6f8;font-size:15px}#speed-choices button.selected{background:#175e77;color:#fff;border-color:#175e77}#smoke{display:block;width:100%;height:auto}.scene-status{position:absolute;top:16px;left:20px;font-size:13px;padding:5px 12px;background:#ffffffe8;border-radius:20px;color:#587987}aside>h3{font-size:20px;margin:0 0 10px}footer{max-width:1576px;margin:24px auto 15px;padding-top:12px;border-top:1px solid #c8dce2;color:#75919d;font-size:12px;display:flex;justify-content:space-between}[hidden]{display:none!important}@media(max-width:1640px){.labs{margin-left:32px;margin-right:32px}footer{margin-left:32px;margin-right:32px}}@media(max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr) 265px;gap:15px}.labs small{display:none}h2{font-size:21px}.webgl-stage{min-height:400px}.legend{gap:4px 15px;font-size:11px}.stage-note{min-height:0}}@media(max-width:800px){main{padding:0 16px}.masthead{padding:17px 16px}.labs{margin-left:16px;margin-right:16px;gap:5px}.labs button{padding:10px 6px;gap:7px}.labs b{font-size:13px}.labs button>span{font-size:11px}h1{font-size:25px}h1 small{display:none}.eyebrow{font-size:10px}.workspace{grid-template-columns:1fr}.webgl-stage{height:420px;min-height:0}.pill{display:none}.section-head{margin-top:15px}h2{font-size:20px}.training-tabs button{font-size:12px;padding:8px;flex:1}.view-tools{gap:4px;padding:10px 8px 0}.view-tools button{padding:3px 8px;font-size:11px}.scene-badge{font-size:10px;letter-spacing:0}.label3d{font-size:11px}.label3d.ground{font-size:13px}.label3d.force-label{font-size:11px}.drag-hint{font-size:10px;top:53px}.scene-status{font-size:10px;top:9px;left:9px}footer{margin:20px 16px}footer span:last-child{display:none}}

/* Compact in-slide WebShape layout. Sidebar remains scrollable at small heights. */
body.embedded{min-height:100vh;padding:0;overflow:auto}
.embedded .masthead,.embedded .labs,.embedded footer,.embedded .kicker{display:none}
.embedded main{max-width:none;padding:10px 12px}
.embedded .section-head{height:30px;margin:0 0 8px;min-height:0}
.embedded h2{font-size:20px}
.embedded .workspace{grid-template-columns:minmax(0,1fr) 276px;gap:14px;height:calc(100vh - 58px);min-height:360px;align-items:stretch}
.embedded .scene-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}
.embedded .webgl-stage{height:auto;min-height:0;flex:1}
.embedded .workspace>aside{overflow-y:auto;padding-right:5px;min-height:0}
.embedded .view-tools{padding:8px 10px 3px;flex-shrink:0}
.embedded .drag-hint{top:47px;right:12px}
.embedded .caption{padding:6px 11px;font-size:11px;flex-shrink:0}
.embedded .legend{padding:6px 8px;gap:3px 12px;flex-shrink:0}
.embedded .question{font-size:16px;margin:9px 0}
.embedded .stage-note{font-size:14px;line-height:1.65;margin:8px 0;min-height:0}
.embedded .stage-title{font-size:21px;margin:2px 0}
.embedded .stage-heading{padding-bottom:5px}
.embedded .row{margin:8px 0}
.embedded .switches{margin:9px 0;padding:5px 0}
.embedded .check{font-size:13px;padding:4px 0}
.embedded .task{padding:8px 10px;margin:10px 0}
.embedded .field{margin-bottom:6px}
.embedded .field select{padding:5px 9px;font-size:14px}
.embedded .training-tabs{margin:0 0 8px;gap:7px}
.embedded .training-tabs button{padding:5px 15px;min-height:32px}
.embedded #wind .workspace{height:calc(100vh - 102px)}
.embedded #smoke{height:calc(100% - 31px);object-fit:contain;min-height:0}
.embedded button{min-height:32px;padding:6px 10px}
.embedded .text-button{min-height:25px;padding:4px 0}
@media(max-width:720px){.embedded .workspace{grid-template-columns:1fr;height:auto}.embedded .webgl-stage{height:330px;flex:none}.embedded .workspace>aside{max-height:none;overflow:visible}.embedded #wind .workspace{height:auto}.embedded #smoke{height:auto}.embedded .scene-wrap{min-height:0}.embedded .section-head{height:auto;min-height:30px}}
/* V4.2: force names are outside the model, leaving arrow tips clear. */
.vector-choices{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.vector-choices button{font-size:12px;padding:6px 9px;min-height:35px}
.vector-choices button.active{background:#176a7d;color:#fff;border-color:#176a7d}
.vector-choices button[data-done="true"]:after{content:' ✓';font-size:11px}
.label3d.uniform-label{font-size:16px;font-weight:650;letter-spacing:2px;background:#0b253bd9;padding:7px 18px}
.embedded .vector-choices{gap:4px}.embedded .vector-choices button{font-size:11px;padding:4px 7px}
@media(max-width:800px){.label3d.uniform-label{font-size:12px;padding:5px 12px}.training-tabs{gap:5px}.training-tabs button{font-size:11px;padding:7px 5px}.view-tools{flex-wrap:wrap}.view-tools .scene-badge{flex:1;min-width:90px}.label3d.small{font-size:10px;padding:1px 3px}}
/* In-slide compact view. Keep the model and its controls in the allotted frame. */
body.lesson-embed{height:100vh;min-height:0;overflow:hidden}
.lesson-embed main{height:100vh;padding:0;overflow:hidden}
.lesson-embed .section-head,.lesson-embed .masthead,.lesson-embed .labs,.lesson-embed footer{display:none}
.lesson-embed .lab{height:100%}
.lesson-embed #cause .workspace,.lesson-embed #experiment .workspace{display:flex;flex-direction:column;height:100%;min-height:0;gap:0}
.lesson-embed #cause .scene-wrap,.lesson-embed #experiment .scene-wrap{flex:1;min-height:0;border-radius:11px 11px 0 0;box-shadow:none}
.lesson-embed #cause-stage{height:auto;min-height:0;flex:1}
.lesson-embed .view-tools{padding:7px 10px;gap:6px;min-height:39px}
.lesson-embed .view-tools button{min-height:28px;padding:4px 11px;font-size:12px}
.lesson-embed .scene-badge{font-size:12px}
.lesson-embed .drag-hint{top:49px;right:13px;font-size:10px}
.lesson-embed .caption{display:none}
.lesson-embed #cause aside,.lesson-embed #experiment aside{flex:none;overflow:hidden;max-height:none;padding:8px 10px;background:#eaf4f5;border:1px solid #c6dce2;border-top:0;border-radius:0 0 11px 11px}
.lesson-embed #stage-question,.lesson-embed #stage-note,.lesson-embed #chain{display:none!important}
.lesson-stage-bar{display:flex;align-items:center;gap:8px}
.lesson-stage-bar .stage-heading{display:flex;align-items:center;gap:8px;border:0;padding:0;margin:0 auto 0 0}
.lesson-stage-bar .stage-title{font-size:16px;margin:0;white-space:nowrap}
.lesson-stage-bar .step-number{font-size:11px;letter-spacing:1px;white-space:nowrap}
.lesson-stage-bar button{font-size:13px;min-height:32px;padding:5px 13px;white-space:nowrap}
.lesson-embed #cause aside>.row{display:none}
.lesson-embed #cause .switches{display:flex;align-items:center;gap:15px;border:0;padding:4px 0 0;margin:0}
.lesson-embed #cause .check{font-size:11px;padding:2px 0;gap:5px;white-space:nowrap}
.lesson-embed .check input{width:14px;height:14px}
.lesson-embed #experiment .scene-wrap{display:flex;align-items:stretch;justify-content:center}
.lesson-embed #smoke{width:100%;height:100%;min-height:0;object-fit:contain;flex:1}
.lesson-embed #smoke-status{font-size:11px;top:9px;left:12px;padding:3px 10px}
.lesson-embed #experiment aside>h3,.lesson-embed #experiment aside>.row,.lesson-embed #experiment .task,.lesson-embed #smoke-explanation{display:none!important}
.lesson-experiment-bar{display:flex;align-items:end;flex-wrap:wrap;gap:6px}
.lesson-experiment-bar .field{flex:1;min-width:105px;max-width:170px;font-size:10px;line-height:1.2;margin:0}
.lesson-experiment-bar select{padding:3px 7px;height:31px;font-size:12px;margin-top:3px}
.lesson-experiment-bar button{width:auto;min-height:31px;padding:4px 10px;font-size:12px;white-space:nowrap}
.lesson-experiment-bar #swap{font-size:11px;padding:4px 7px}
.lesson-embed #cause .label3d{font-size:12px}
.lesson-embed #cause .label3d.small{font-size:10px}
.lesson-embed #cause .label3d.ground{font-size:14px;padding:4px 10px}
@media(max-width:720px){
 .lesson-embed #cause .workspace,.lesson-embed #experiment .workspace{height:100%;min-height:0}
 .lesson-embed #cause-stage{height:auto;min-height:0;flex:1}
 .lesson-embed #cause aside,.lesson-embed #experiment aside{padding:6px 7px}
 .lesson-stage-bar{gap:4px;flex-wrap:wrap}
 .lesson-stage-bar .stage-heading{flex:1 1 100%;gap:7px}
 .lesson-stage-bar button{padding:4px 11px}
 .lesson-embed #cause .switches{gap:4px 12px;flex-wrap:wrap}
 .lesson-embed #cause .check{font-size:10px}
 .lesson-experiment-bar{gap:5px;align-items:end}
 .lesson-experiment-bar .field{max-width:none;flex:1 1 40%;min-width:90px}
 .lesson-experiment-bar button{padding:4px 8px;font-size:11px}
 .lesson-embed .view-tools{padding:5px 7px;gap:4px}
 .lesson-embed .view-tools button{padding:3px 7px;font-size:11px}
 .lesson-embed .scene-badge{font-size:10px}
}
/* V4.4: compact panels fit inside the teacher's existing slide figures. */
body.compact-embed{height:100vh;min-height:0;overflow:hidden;font-size:12px}
.compact-embed main{height:100%;max-width:none;padding:0;overflow:hidden}
.compact-embed #wind{height:100%}
.compact-embed .section-head,.compact-embed .training-tabs,.compact-embed .masthead,.compact-embed .labs,.compact-embed footer{display:none}
.compact-embed #wind .workspace{height:100%;min-height:0;display:flex;flex-direction:column;gap:0;align-items:stretch}
.compact-embed #wind .scene-wrap{flex:1;min-height:0;border-radius:8px 8px 0 0;box-shadow:none}
.compact-embed #wind-stage{height:auto;min-height:0;flex:1}
.compact-embed .view-tools{padding:3px 7px;min-height:28px;gap:4px;flex-wrap:nowrap}
.compact-embed .view-tools button{min-height:22px;padding:2px 6px;font-size:10px;border-radius:4px;white-space:nowrap}
.compact-embed .scene-badge{font-size:10px;letter-spacing:0;min-width:0;white-space:nowrap}
.compact-embed .drag-hint,.compact-embed .caption,.compact-embed #pause-wind{display:none}
.compact-embed .legend{padding:3px 5px;font-size:10px;line-height:1.3;gap:5px 12px;min-height:20px}
.compact-embed .legend i{font-size:15px;margin-right:4px}
.compact-embed .label3d{font-size:10px;padding:1px 4px}
.compact-embed .label3d.small{font-size:10px;padding:0 3px;line-height:1.2}
.compact-embed .label3d.ground{font-size:11px;padding:1px 5px}
.compact-embed #wind aside{position:relative;flex:none;min-height:0;max-height:none;overflow:hidden;padding:5px 7px;background:#eaf4f5;border:1px solid #c6dce2;border-top:0;border-radius:0 0 8px 8px}
.compact-embed #wind aside>.task,.compact-embed #wind aside>.text-button,.compact-embed #wind aside>#check-wind{display:none}
.compact-embed[data-compact-mode="gradient"] #arrow-controls,.compact-embed[data-compact-mode="speed"] #speed-choices{display:none!important}
.compact-answer-bar{display:flex;align-items:center;gap:5px;white-space:nowrap}
.compact-answer-bar button{font-size:11px;min-height:28px;height:28px;padding:3px 9px;border-radius:5px;flex:none}
.compact-answer-bar #check-wind{width:auto;margin-left:auto}
.compact-answer-bar #reset-wind{min-width:30px;padding:3px 4px}
.compact-answer-bar .angle-readout{font-size:10px;line-height:1.3;padding:3px 4px;background:transparent}
.compact-embed #wind-feedback{position:absolute;z-index:5;bottom:23px;left:7px;right:7px;margin:0;padding:6px 10px;font-size:11px;line-height:1.5;background:#e4f4ecf5;box-shadow:0 2px 9px #0002;pointer-events:none}
.compact-embed #wind-feedback.error{background:#fff3dff5}
.compact-embed[data-compact-mode="speed"] .legend{display:none}
.compact-embed[data-compact-mode="speed"] #wind-feedback{bottom:7px}
.compact-embed[data-compact-mode="speed"] .compact-answer-bar [data-speed]{flex:1}
.compact-embed[data-compact-mode="speed"] .compact-answer-bar #check-wind{margin-left:2px}
.compact-embed[data-compact-mode="speed"] .compact-answer-bar [data-speed].selected{background:#175e77;color:#fff;border-color:#175e77}
/* Direction keeps the existing set of conditions and independent arrow controls. */
.compact-embed[data-compact-mode="direction"] #wind .workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:10px}
.compact-embed[data-compact-mode="direction"] #wind .scene-wrap{border-radius:10px}
.compact-embed[data-compact-mode="direction"] #wind aside{border:1px solid #c6dce2;border-radius:10px;padding:10px}
.compact-embed[data-compact-mode="direction"] #wind-conditions{display:flex;gap:7px;flex-wrap:wrap}
.compact-embed[data-compact-mode="direction"] .field{flex:1;margin:0;font-size:10px}
.compact-embed[data-compact-mode="direction"] .field select{height:31px;font-size:12px;padding:4px 5px;margin-top:2px;border-radius:5px}
.compact-embed[data-compact-mode="direction"] #surface-field{flex:1 1 100%;margin:0;font-size:10px!important;line-height:1.5}
.compact-embed[data-compact-mode="direction"] #wind-question{font-size:13px;line-height:1.5;margin:9px 0}
.compact-embed[data-compact-mode="direction"] .vector-choices{gap:5px;margin:7px 0}
.compact-embed[data-compact-mode="direction"] .vector-choices button{min-height:28px;padding:3px 6px;font-size:11px}
.compact-embed[data-compact-mode="direction"] .row{margin:7px 0;gap:6px}
.compact-embed[data-compact-mode="direction"] .row button{min-height:30px;padding:3px 6px;font-size:12px}
.compact-embed[data-compact-mode="direction"] .angle-readout{font-size:11px;padding:4px 6px}
.compact-embed[data-compact-mode="direction"] #arrow-controls>.hint{font-size:10px!important;line-height:1.5;margin:6px 0}
.compact-embed[data-compact-mode="direction"] #wind aside>#check-wind{display:block;min-height:31px;padding:4px 8px;font-size:13px;margin-top:7px}
.compact-embed[data-compact-mode="direction"] #show-forces{min-height:29px;font-size:12px;padding:3px 5px;margin-top:7px}
.compact-embed[data-compact-mode="direction"] #wind aside>#reset-wind{display:block;font-size:11px;padding:4px 0;margin-top:4px;min-height:24px}
.compact-embed[data-compact-mode="direction"] #wind-feedback{bottom:30px;font-size:13px;line-height:1.6}
.compact-embed[data-compact-mode="direction"] .view-tools{padding:7px 10px;min-height:34px}
.compact-embed[data-compact-mode="direction"] .scene-badge{font-size:12px}
.compact-embed[data-compact-mode="direction"] .view-tools button{font-size:11px;min-height:25px;padding:3px 9px}
.compact-embed[data-compact-mode="direction"] .legend{font-size:11px;padding:7px;min-height:30px}
.compact-embed[data-compact-mode="direction"] .label3d.small{font-size:12px}