/* Light Lab v2 — light-weight mobile workbench enhancement (no framework, no image requests). */
:root{--light-gold:#f3d69c;--light-aqua:#74f8de}
.intro{padding:13px 0 12px}
.intro h1{max-width:830px}
.intro-copy>p:last-of-type{color:var(--muted);font-size:clamp(12px,1.03vw,15px);line-height:1.4;margin:0;max-width:770px}
.intro-progress{margin-top:9px;display:flex;align-items:center;gap:11px;font-size:11px;font-weight:760;color:#bbefed}
.progress-track{width:100px;height:6px;border-radius:12px;background:#244558;overflow:hidden;flex-shrink:0}
#progressFill{height:100%;width:0%;border-radius:inherit;display:block;background:linear-gradient(90deg,#55dacf,#f9dd8e);transition:width .25s ease-out}
.mode-strip button:focus-visible,.visual-tools button:focus-visible{outline-offset:0}
.visual-card{isolation:isolate;background:linear-gradient(155deg,#0c253d,#050f22)}
.visual-top{padding:11px 17px;min-height:61px}
.visual-tools{display:flex;justify-content:flex-start;align-items:center;gap:7px;padding:8px 13px;background:linear-gradient(90deg,#08192a,#102a40);border-top:1px solid #335369;border-bottom:1px solid #335369;min-height:46px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#45738a transparent}
.visual-tools button{flex-shrink:0;min-height:34px;padding:7px 11px;background:#142f44;color:#b9deeb;border:1px solid #38596e;border-radius:999px;font-size:11px;font-weight:820;line-height:1.1;transition:background .15s,box-shadow .15s}
.visual-tools button[aria-pressed=true]{background:#276b69;color:#f4fffc;border-color:#8cffe1;box-shadow:0 0 13px #65d9d822}
.visual-tools button.motion-button{margin-left:auto;color:#fff0c4;border-color:#84714a;background:#37352f}
.visual-tools button.motion-button[aria-pressed=true]{background:#71552b;color:white}
.canvas-box{background:radial-gradient(circle at 46% 38%,#163a54,#071629 75%);border-bottom:1px solid #36526d}
.canvas-box:after{content:'SIMULATION · NOT CAMERA FOOTAGE';position:absolute;bottom:14px;right:12px;color:#b5cbdaaa;font-size:9px;font-weight:850;letter-spacing:.1em;pointer-events:none}
.visual-bottom{min-height:45px;padding:9px 17px}
.visual-bottom #visualCaption{color:#c2e6eb}
.visual-bottom #modelStamp{color:#a8d8d2}
.control-card{gap:10px;padding:15px}
.control-heading h2{font-size:clamp(20px,1.7vw,26px)}
.mode-description{min-height:0}
.control-field input[type=range]{accent-color:#78f6de;min-height:25px}
.control-field select{min-height:42px}
.control-fields{row-gap:8px}
.sub-mode{scrollbar-width:thin}
.sub-mode button{min-height:37px}
.sub-mode button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #69e6e8}
.metrics{gap:6px}
.metric{padding:9px 10px;border-color:#345b6f;background:linear-gradient(125deg,#102c44,#0b2539)}
.metric strong{margin-top:3px;font-size:clamp(16px,1.45vw,20px)}
.discovery{padding:9px 10px;background:#11333c}
.discovery p{line-height:1.42}
.mission{padding:10px;gap:8px}
.mission button{min-height:42px}
.challenge-drawer{border:1px solid #547389;border-radius:13px;background:linear-gradient(120deg,#122d42,#192c40);overflow:hidden}
.challenge-drawer>summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 13px;color:#d1f5f3;font-size:12px;font-weight:850;list-style:none;min-height:43px}
.challenge-drawer>summary::-webkit-details-marker{display:none}
.challenge-drawer>summary:before{content:'+';order:3;font-size:19px;color:#ffd894;line-height:1}
.challenge-drawer[open]>summary:before{content:'−'}
.challenge-drawer>summary #challengeBadge{color:#ffdea0;background:#26394d;border-radius:999px;padding:4px 8px;font-size:11px;white-space:nowrap}
.challenge-question{color:#e3f1f4;margin:0 12px 9px;font-size:13px;line-height:1.5;font-weight:770}
.challenge-answers{display:grid;grid-template-columns:1fr;gap:6px;margin:0 11px}
.challenge-answers button{border-radius:10px;text-align:left;padding:10px 11px;border:1px solid #467187;background:#18374c;color:#e7f4fd;font-size:12px;line-height:1.4;min-height:43px}
.challenge-answers button:active{transform:scale(.99)}
.challenge-answers button.answer-correct{background:#20594e;border-color:#89edca}
.challenge-answers button.answer-incorrect{background:#553842;border-color:#d37f86}
.challenge-feedback{color:#d1f5e1;font-size:12px;line-height:1.45;min-height:0;margin:9px 12px 11px}
.challenge-feedback:empty{display:none}
.control-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.control-bottom button{width:100%;padding:8px 6px;min-height:42px;white-space:normal}
.speak-btn{min-width:89px;justify-content:center}
@media(min-width:1220px){.experiment{grid-template-columns:minmax(0,1.43fr) minmax(350px,.87fr)}
.visual-card{align-self:start}
.control-card{padding:17px;gap:11px}
.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:1200px){
 .intro{padding-top:10px}
 .visual-top{padding:10px}
 .visual-tools{padding:7px}
 .visual-tools button{font-size:10px;padding:7px 8px}
 .visual-bottom #modelStamp{display:none}
}
@media(max-width:760px){
 .intro{padding-top:11px}
 .intro h1{font-size:clamp(23px,4.8vw,32px)}
 .intro-progress{margin-top:7px}
 .page-shell{padding-inline:10px}
 .mode-strip{scroll-snap-type:x proximity}
 .mode-strip button{scroll-snap-align:start}
 .experiment{grid-template-columns:minmax(0,1fr);align-items:start}
 .visual-card{position:sticky;top:0;align-self:start;z-index:5;max-height:min(48vh,390px);box-shadow:0 16px 40px #0009}
 .visual-top{min-height:43px;padding:7px 10px}
 .visual-top strong{font-size:12px}
 .visual-tools{min-height:39px;padding:5px 8px;gap:5px}
 .visual-tools button{min-height:32px;padding:6px 8px;font-size:10px}
 .canvas-box{aspect-ratio:1.98;min-height:0!important;max-height:31vh}
 .visual-bottom{min-height:36px;padding:6px 10px}
 .visual-bottom #visualCaption{max-width:100%;font-size:10px;line-height:1.22}
 .visual-bottom #modelStamp{display:none}
 .canvas-box:after{font-size:7px;bottom:5px;right:5px}
 .control-card{padding:13px;gap:9px}
 .control-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .control-heading h2{font-size:21px}
 .metric strong{font-size:17px}
 .teaching-notes{margin-top:11px}
}
@media(max-width:450px){
 .sitebar .return{font-size:11px}
 .intro h1{font-size:24px}
 .intro-copy>p:last-child{font-size:11px}
 .mode-strip{padding-bottom:7px}
 .mode-strip button{font-size:10px;padding:7px 10px;min-height:39px}
 .visual-tools button{font-size:9.5px;min-height:32px}
 .visual-tools button.motion-button{padding:6px 8px}
 .canvas-box{max-height:29vh;aspect-ratio:2.04}
 .control-card{gap:8px}
 .control-fields{gap:7px}
 .control-field label{font-size:11px}
 .metric{padding:8px}
 .discovery p{font-size:11px}
 .mission{flex-direction:row}
 .mission p{font-size:11px}
 .mission button{max-width:120px;min-width:98px}
 .control-bottom button{font-size:10px}
}
@media(max-height:670px) and (max-width:760px){.visual-card{max-height:41vh}.canvas-box{max-height:22vh}}
@media(prefers-reduced-motion:reduce){.progress-track #progressFill,.visual-tools button{transition:none}}

/* Readable live values overlay the compact model on phones; full readouts stay in controls. */
.mobile-readings{display:none}
@media(max-width:760px){
 .mobile-readings{position:absolute;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;z-index:2;bottom:7px;left:9px;right:9px;pointer-events:none}
 .mobile-reading{display:flex;align-items:center;gap:6px;justify-content:space-between;min-width:0;padding:6px 8px;border-radius:9px;background:#041526e9;border:1px solid #477387;color:#fff3ce;box-shadow:0 4px 15px #0006}
 .mobile-reading small{font-size:10px;color:#b8e7e2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-reading strong{font-size:13px;font-weight:850;white-space:nowrap;font-variant-numeric:tabular-nums}
}
@media(max-width:380px){.mobile-reading{gap:4px;padding:5px}.mobile-reading strong{font-size:11px}.mobile-reading small{font-size:9px}}