@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#081529;--bg2:#0c1e32;--panel:#11273a;--line:#315167;--muted:#9ab7c8;--text:#eaf8ff;--aqua:#72f9d9;--gold:#ffc76d;--rose:#ff8587;--font:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:#081529;color:var(--text);min-width:280px;overflow-x:clip}
button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.43}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,.terminal:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}
.ambient{position:fixed;pointer-events:none;border-radius:50%;filter:blur(80px);z-index:-1}
.ambient-a{width:660px;height:660px;right:-200px;top:-250px;background:#14606523}
.ambient-b{width:480px;height:480px;left:-260px;top:600px;background:#1264a51c}
.app{max-width:1580px;padding:0 clamp(16px,4.2vw,74px);margin:auto}
.topbar{min-height:94px;border-bottom:1px solid #244154;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:13px;font:700 14px var(--display);letter-spacing:.3px}
.logo strong{color:var(--aqua)}.logo small{display:block;letter-spacing:2.4px;font-size:9px;color:#8ca9c0;font-weight:600;margin-top:4px}
.logo-mark{width:47px;height:47px;background:var(--aqua);color:#072538;position:relative;display:grid;place-items:center;border-radius:12px;font-size:33px;font-weight:800;letter-spacing:-3px}.logo-mark i{width:6px;height:6px;border-radius:50%;position:absolute;right:11px;bottom:10px;background:#0b5371}
.top-center{font:600 10px var(--display);letter-spacing:2px;color:#9ebacc}
.online-dot{background:#74fdd9;width:6px;height:6px;display:inline-block;border-radius:50%;box-shadow:0 0 10px #6bfac7;margin-right:12px}
.top-actions{display:flex;gap:9px;align-items:center}.icon-button,.back-link{background:#10253a;border:1px solid #39576d;padding:12px 15px;min-height:44px;border-radius:7px;color:#d2e9f4;font:700 10px var(--display);letter-spacing:.7px}.icon-button{font-size:20px;min-width:46px}.icon-button[aria-pressed="false"]{color:#879da9}.back-link span{color:var(--aqua);margin-left:13px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,330px);gap:32px;align-items:center;padding:44px 0 42px}
.eyebrow,.section-kicker,.score-label,.side-label{font:700 10px var(--display);letter-spacing:1.5px;color:var(--aqua)}
.eyebrow span{display:inline-block;width:24px;height:2px;background:var(--aqua);vertical-align:middle;margin-right:12px}
h1,h2,h3,p{margin-top:0}
.intro h1{font:800 clamp(36px,4.1vw,68px)/1.09 var(--display);letter-spacing:-2.4px;margin:18px 0 15px}
.intro h1 em{font-style:normal;color:var(--aqua)}.intro-copy>p{max-width:680px;color:#b5cddd;line-height:1.8;font-size:14px}
.lesson-tags{display:flex;gap:15px;flex-wrap:wrap;margin-top:25px}.lesson-tags span{font:700 10px var(--display);color:#8bb8b9;letter-spacing:.6px}
.intro-score{border:1px solid #376c72;border-radius:12px;background:linear-gradient(145deg,#142d3e,#0e2334);padding:23px 26px;box-shadow:0 10px 34px #020c1e35}.score-value{font:800 62px/1.25 var(--display);letter-spacing:1px;font-variant-numeric:tabular-nums;color:#e7fafc;margin:9px 0}.score-line{height:4px;background:linear-gradient(90deg,#7bf9dc,#204f65);border-radius:3px}.score-bottom{display:flex;justify-content:space-between;gap:8px;padding-top:18px;font:700 10px var(--display);color:#8faabd}.score-bottom b{color:var(--aqua);display:block;margin-top:5px}
.experiment{border-top:1px solid #304355;padding-top:28px}
.experiment-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 24px}.experiment-heading h2{font:800 clamp(26px,2.5vw,35px)/1.2 var(--display);letter-spacing:-.8px;margin:10px 0 5px}.experiment-heading p{color:#adc7d7;font-size:13px;margin:0}
.levels{display:flex;gap:8px}.level-button{width:49px;height:45px;background:#102237;border:1px solid #3b5769;color:#88a7b8;border-radius:7px;font:800 13px var(--display)}.level-button.active{color:#052d33;background:var(--aqua);border-color:var(--aqua)}.level-button.completed:not(.active){border-color:#64c9b0;color:#b4ffdd}
.game-layout{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(275px,.75fr);gap:22px;align-items:start}.bench-column{min-width:0}.lab-top{height:48px;border:1px solid #36516b;border-bottom:0;background:#152a3d;border-radius:11px 11px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 19px;gap:10px;font:700 10px var(--display);letter-spacing:.7px;color:#bcdae3}.lab-top i{width:7px;height:7px;background:#74fadb;display:inline-block;border-radius:50%;box-shadow:0 0 10px #6affcc;margin-right:8px}.circuit-state{color:#f6c66d}.circuit-state.on{color:#89facb}.circuit-state.short{color:#ff8686}
.workbench{position:relative;border:1px solid #36516b;background:radial-gradient(ellipse at 50% 52%,#16374a,#0d2033 67%,#0b1b2d);border-radius:0 0 10px 10px;isolation:isolate;overflow:hidden;min-height:380px}
.bench-grid{position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:linear-gradient(#36718514 1px,transparent 1px),linear-gradient(90deg,#36718514 1px,transparent 1px);background-size:27px 27px}
#circuitSvg{width:100%;height:auto;display:block;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.bench-floating{position:absolute;top:15px;left:16px;right:16px;pointer-events:none;max-width:480px;font:600 11px/1.5 var(--display);color:#aed0dd;display:flex;align-items:center;gap:11px}
.bench-floating .hand{font-size:20px;color:var(--aqua)}
.bench-bottom{position:absolute;left:16px;right:16px;bottom:12px;display:flex;justify-content:space-between;gap:5px;color:#729bad;font:700 9px var(--display);letter-spacing:.7px;pointer-events:none}
#deviceLayer text,#terminalLayer text{font-family:var(--display);text-anchor:middle;user-select:none;pointer-events:none}
.device-tag{font-size:12px;fill:#b4d4df;font-weight:700;letter-spacing:1.2px}
.device-subtag{font-size:10px;fill:#719bac;font-weight:700;letter-spacing:.7px}
.battery-shell{fill:url(#batteryBody);stroke:#497f90;stroke-width:2}
.battery-detail{fill:#203a52;stroke:#456d7f;stroke-width:1.2}
.wire-under{stroke:#041625;stroke-width:16;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wire-main{stroke:#e99a48;stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #03132080)}
.wire-flow{stroke:#ffe3a0;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:4 18;animation:flow 1.05s linear infinite;opacity:0}
.wire-on .wire-main{stroke:#76e7cb}.wire-on .wire-flow{opacity:.95}
@keyframes flow{to{stroke-dashoffset:-44}}
.wire-hit{stroke:transparent;stroke-width:26;fill:none;cursor:pointer}
.wire-selected .wire-main{stroke:#f6cb72}
.terminal{cursor:crosshair}.terminal .halo{fill:#60eadc;opacity:.035}.terminal .outer{fill:#193f50;stroke:#8fb1be;stroke-width:2}.terminal .core{fill:#cbeaf3;stroke:#d5f7ff;stroke-width:1.5}
.terminal.plus .outer{stroke:#ffad81}.terminal.plus .core{fill:#ff9a70}.terminal.minus .outer{stroke:#a8b6ff}.terminal.minus .core{fill:#a9baff}
.terminal.pending .halo,.terminal:hover .halo,.terminal:focus .halo{opacity:.34}
.terminal.pending .outer{stroke:#f7d77d;stroke-width:4}.terminal.pending .core{fill:#ffe184}
.terminal .terminal-text{font-size:12px;fill:#d8f5ff;font-weight:800}
.terminal:focus{outline:none}.terminal:focus .outer{stroke:#f7d77d;stroke-width:4}
.draft-wire{stroke:#ffdc93;stroke-width:7;stroke-linecap:round;fill:none;stroke-dasharray:12 10;pointer-events:none}
.lamp-glass{fill:url(#lampGlass);stroke:#aacbd8;stroke-width:3}.lamp-glass.on{fill:url(#lampLit);stroke:#fff1b7}
.lamp-filament{fill:none;stroke:#c78535;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.lamp-filament.on{stroke:#fffce3;filter:drop-shadow(0 0 5px #fffcaa)}
.lamp-halo{opacity:0;transition:opacity .3s}.lamp-halo.on{opacity:1}
.switch-toggle{cursor:pointer}.switch-lever{stroke:#f2b773;stroke-width:7;stroke-linecap:round;transition:all .25s}
.feedback-bar{margin-top:14px;padding:14px 16px;border:1px solid #346777;border-radius:8px;background:#103143;color:#c7e6ed;display:flex;align-items:center;gap:12px;font:600 12px/1.6 var(--display);min-height:59px}.feedback-icon{font-size:22px;color:var(--aqua);width:24px;text-align:center}.feedback-bar.ok{background:#163c37;border-color:#358f79}.feedback-bar.warn{background:#352b2c;border-color:#9f604a}.feedback-bar.warn .feedback-icon{color:#ffbd72}
.bench-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.control{border-radius:7px;border:1px solid #3d6476;background:#122a3d;color:#c8e0e8;font:800 10px var(--display);letter-spacing:.6px;min-height:43px;padding:12px 14px}.control:hover:not(:disabled){border-color:#a3f7e2;background:#183e48}.control.primary{margin-left:auto;color:#042e33;background:#74f8d8;border-color:#74f8d8}.control.primary:hover:not(:disabled){background:#c1ffeb;color:#07272c}.control.secondary{color:#a8f9de}
.lab-sidebar{display:flex;flex-direction:column;gap:15px;min-width:0}.side-panel{background:linear-gradient(140deg,#14293d,#102337);border:1px solid #36546b;border-radius:10px;padding:19px}.side-panel h3{font:800 20px var(--display);letter-spacing:-.3px;margin:8px 0 15px}.component-items{display:flex;flex-direction:column;gap:9px}.component-item{display:flex;align-items:center;gap:12px;border:1px solid #365267;border-radius:7px;padding:9px 11px;background:#122337}.component-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:7px;background:#214958;color:var(--aqua);font-size:22px;flex-shrink:0}.component-item strong{display:block;font:700 12px var(--display);color:#e2f7ff}.component-item small{display:block;font-size:10px;color:#90b0bf;margin-top:3px}.switch-control{margin-top:14px;padding:13px;border:1px solid #6f794e;background:#33392e;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}.switch-control strong{display:block;font:700 11px var(--display)}.switch-control small{display:block;font-size:9px;color:#d0bc87;margin-top:4px}.switch-control button{border:1px solid #ffd28a;background:#f5bd61;color:#3b2810;font:800 10px var(--display);padding:11px;border-radius:6px;white-space:nowrap}.switch-control button[aria-pressed="true"]{background:#72f5d5;border-color:#72f5d5;color:#073b36}
.readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.readings>div{border:1px solid #33596b;border-radius:6px;background:#102b3f;padding:10px 7px}.readings small{display:block;color:#8eaebc;font:700 8px var(--display);letter-spacing:.45px;min-height:23px}.readings b{display:block;color:#affbe2;font:800 18px var(--display);margin-top:7px;font-variant-numeric:tabular-nums}.concept{border-left:2px solid var(--aqua);margin-top:17px;display:flex;gap:9px;padding:3px 0 3px 12px}.concept span{color:var(--aqua);font-size:20px}.concept p{font-size:12px;color:#b5cfda;line-height:1.7;margin:0}.concept b{color:#dffdf4}
.sensor-note,.privacy-note{font-size:11px;line-height:1.7;color:#9ebdcc}.sensor-buttons{display:flex;gap:8px;flex-wrap:wrap}.sensor-buttons button{flex:1;border:1px solid #49657c;background:#1b3347;color:#d0eef0;padding:12px 7px;border-radius:7px;font:700 10px var(--display);min-width:100px}.sensor-buttons button.active{background:#1b5b56;border-color:#70efbd}.sensor-buttons span{color:#76ffd0;margin-right:6px}.sensor-state{font:600 10px/1.7 var(--display);color:#b3daee;margin-top:12px;min-height:35px}.privacy-note{color:#7fa0b0;margin:6px 0 0;font-size:10px}#sensorVideo{width:150px;max-width:100%;aspect-ratio:4/3;object-fit:cover;transform:scaleX(-1);border-radius:7px;border:1px solid #4f8c8f;margin-top:10px}
.bottom-lesson{border-top:1px solid #2f4c5d;margin-top:46px;padding:33px 0 50px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.lesson-grid article{background:#102439;border:1px solid #2e5165;padding:19px;border-radius:10px}.lesson-grid h3{font:800 16px var(--display);margin:10px 0}.lesson-grid p{font-size:12px;color:#9fbfcf;line-height:1.75;margin:0}.lesson-icon{font-size:24px;color:var(--aqua)}
.footer{border-top:1px solid #2b4355;min-height:80px;padding:22px 0;display:flex;gap:17px;justify-content:space-between;flex-wrap:wrap;color:#799baa;font:700 9px var(--display);letter-spacing:.6px}.footer a{color:var(--aqua)}
.celebrate{position:fixed;inset:0;background:#041220d9;z-index:50;display:grid;place-items:center;padding:16px;backdrop-filter:blur(9px)}.celebrate[hidden]{display:none}.celebrate-body{width:min(440px,100%);border:1px solid #69c3a7;border-radius:16px;background:radial-gradient(circle at 50% 0,#1d5651,#132e40 63%);text-align:center;padding:38px 28px;box-shadow:0 22px 80px #0006}.trophy{font-size:58px;color:#ffe58a;text-shadow:0 0 23px #e8ca6c}.celebrate h2{font:800 30px/1.25 var(--display);margin:12px 0;color:#f0fff9}.celebrate p{color:#b6d5de;font-size:13px;line-height:1.7}.celebrate strong{display:block;font:800 33px var(--display);color:var(--aqua);margin:20px 0}.celebrate button{border:1px solid var(--aqua);background:var(--aqua);border-radius:7px;color:#083339;font:800 12px var(--display);padding:14px 22px;display:block;margin:9px auto;width:100%}.celebrate .dismiss{color:#b7dfe3;background:transparent;border-color:#54847f}
@media(max-width:1120px){.game-layout{grid-template-columns:minmax(0,1.38fr) minmax(260px,.8fr)}.readings b{font-size:15px}.intro h1{font-size:48px}}
@media(max-width:900px){.top-center{display:none}.game-layout{grid-template-columns:minmax(0,1fr)}.lab-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sensor-panel{grid-column:1/-1}.intro{grid-template-columns:1fr 260px}.intro h1{font-size:clamp(33px,5vw,48px)}}
@media(max-width:650px){.app{padding:0 15px}.topbar{min-height:80px;gap:5px}.logo{font-size:11px;gap:8px}.logo small{font-size:7px;letter-spacing:1.1px}.logo-mark{width:36px;height:36px;font-size:26px}.top-actions{gap:5px}.back-link{font-size:8px;padding:9px}.back-link span{margin-left:3px}.icon-button{min-width:39px;padding:7px}.intro{padding:27px 0 28px;grid-template-columns:1fr;gap:16px}.intro h1{font-size:clamp(31px,9vw,44px);letter-spacing:-1.7px}.intro-copy>p{font-size:12px}.lesson-tags{gap:9px}.lesson-tags span{font-size:8px}.intro-score{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}.score-label{font-size:9px}.score-value{font-size:33px;margin:0}.score-line{display:none}.score-bottom{display:block;padding:0;font-size:9px}.score-bottom span:last-child{display:none}.experiment-heading{align-items:start;flex-direction:column;gap:15px}.experiment-heading h2{font-size:27px}.levels{width:100%}.level-button{flex:1}.workbench{min-height:350px}.lab-top{height:44px;padding:0 12px;font-size:9px}.bench-floating{font-size:9px;top:9px;left:9px;right:9px}.bench-floating .hand{font-size:16px}.bench-bottom{font-size:8px;bottom:8px;left:9px;right:9px}.bench-controls{gap:7px}.control{flex:1 1 calc(50% - 7px);padding:11px 6px;font-size:9px}.control.primary{margin-left:0}.lab-sidebar{grid-template-columns:1fr}.sensor-panel{grid-column:auto}.lesson-grid{grid-template-columns:1fr}.footer{font-size:8px}.feedback-bar{font-size:11px}}
@media(max-width:350px){.logo{font-size:10px}.back-link{max-width:77px;line-height:1.4}.intro h1{font-size:30px}.readings small{font-size:7px}.readings b{font-size:14px}.lab-top{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Respect semantic hidden state even for flex/grid components. */
[hidden]{display:none!important}
/* Keep the current/connection legend legible against parallel return rails. */
.bench-bottom{z-index:3;pointer-events:none}
.bench-bottom span{background:#0a2037d9;padding:4px 6px;border-radius:3px}

/* EduMotion Science Hand-Control V2 — real-time finger tracking UI */
[hidden]{display:none!important}
.hand-mode-badge{position:absolute;z-index:5;right:15px;top:50px;border:1px solid #67dfc7;background:#102e39ec;color:#aafdeb;border-radius:6px;padding:8px 11px;font:800 9px var(--display);letter-spacing:.7px;pointer-events:none}
.hand-led,.record-led{width:7px;height:7px;background:#68ffd0;border-radius:50%;box-shadow:0 0 9px #53e6bb;display:inline-block;margin-right:7px}
.hand-pointer-halo{fill:#66eadd33;stroke:#78ffe4aa;stroke-width:1.4;animation:hand-cursor-pulse 1.2s infinite}
.hand-pointer-outer{fill:#2a7863cc;stroke:#b9fff0;stroke-width:3;filter:drop-shadow(0 0 7px #71efd5)}
.hand-pointer-core{fill:#e3fff3;stroke:#0c7966;stroke-width:2}
#handCursor{pointer-events:none;filter:drop-shadow(0 2px 4px #041728)}
#handCursor.pinching .hand-pointer-halo{fill:#fbd06835;stroke:#ffd77e}
#handCursor.pinching .hand-pointer-outer{fill:#d6a544;stroke:#fff5bb}
#handCursor.pinching .hand-pointer-core{fill:#fff0a1}
#handCursor.hovering .hand-pointer-halo{fill:#a4ffdd44;stroke-width:3;stroke:#c1ffe7}
.terminal.hand-hover .halo{opacity:.5!important;fill:#f3e49a}
.terminal.hand-hover .outer{stroke:#fff0ab;stroke-width:4}
@keyframes hand-cursor-pulse{50%{opacity:.62}}
.gesture-next-control{cursor:pointer;pointer-events:all}
.gesture-next-control rect{fill:#70f5d6;stroke:#b4ffe5;stroke-width:2}
.gesture-next-control text{fill:#073936;font:800 18px var(--display);letter-spacing:.9px}
.gesture-next-control:hover rect{fill:#c7ffef}
.camera-primary{width:100%;min-height:49px;border:1px solid #7ffde4;border-radius:7px;background:#75f5d9;color:#05382d;font:800 11px var(--display);letter-spacing:.3px;padding:12px 8px;display:flex;justify-content:center;align-items:center;gap:7px}
.camera-primary:hover{background:#b6ffea}
.camera-primary.active{background:#1d5852;color:#c6fff0;border-color:#60d5bd}
.camera-primary span{font-size:23px;line-height:1}
.gesture-steps{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.gesture-steps>div{display:flex;gap:11px;align-items:center;padding:10px;background:#102e40;border:1px solid #315568;border-radius:7px}
.gesture-steps>div>b{font:800 13px var(--display);color:#a3f9e1;min-width:25px}
.gesture-steps strong{display:block;color:#d3f5f6;font:800 11px var(--display)}
.gesture-steps small{display:block;color:#9bbac6;font-size:10px;margin-top:2px;line-height:1.4}
.gesture-actions{display:flex;gap:8px;margin-top:10px}
.gesture-actions button{flex:1;min-width:0;border:1px solid #3c6980;background:#173447;border-radius:6px;color:#bce9ed;min-height:39px;padding:7px 4px;font:700 9px var(--display)}
.gesture-actions button:hover:not(:disabled){border-color:#7af9d8}
.gesture-actions button.active{background:#20594f;border-color:#66e8bc}
.camera-preview{position:relative;width:100%;aspect-ratio:16/10;background:#0c1e2d;border-radius:8px;overflow:hidden;border:1px solid #467783;margin-top:13px}
.camera-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-preview canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.camera-top,.camera-bottom{position:absolute;left:9px;z-index:2;right:9px;background:#071c2cba;border-radius:4px;padding:6px 8px;color:#bdfce9;font:700 9px var(--display)}
.camera-top{top:9px}.camera-bottom{bottom:9px;text-align:center}
.camera-bottom.active{background:#164a3edd;color:#d4ffe3}
.sensor-note b{color:#d8fff1}
.sensor-state{margin:12px 0 6px;min-height:38px}
@media(max-width:650px){.gesture-steps{gap:6px}.camera-preview{aspect-ratio:16/9}.hand-mode-badge{top:44px;right:8px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.hand-pointer-halo{animation:none}}
/* Camera feed fills its card; override the legacy #sensorVideo size. */
#cameraPreview #sensorVideo{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;transform:scaleX(-1);border:0;margin:0;border-radius:0}

/* Floating webcam monitor stays visible while wiring on desktop and mobile. */
body.hand-control-enabled #cameraPreview{
 position:fixed;right:18px;bottom:18px;z-index:30;
 width:238px;max-width:44vw;aspect-ratio:16/10;
 margin:0;border:2px solid #73f9d7;border-radius:10px;
 box-shadow:0 10px 35px #0009,0 0 18px #5af1c02a;
 pointer-events:none;
}
body.hand-control-enabled #cameraPreview .camera-top,
body.hand-control-enabled #cameraPreview .camera-bottom{font-size:8px}
@media(max-width:650px){
 body.hand-control-enabled #cameraPreview{
  width:150px;max-width:42vw;right:9px;bottom:9px;
  aspect-ratio:4/3;
 }
 body.hand-control-enabled #cameraPreview .camera-top,
 body.hand-control-enabled #cameraPreview .camera-bottom{padding:3px 5px;font-size:7px}
}

.intro-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-camera-btn{border:1px solid #6cf6d9;background:#69f4d5;color:#093b38;border-radius:7px;padding:13px 17px;font:800 11px var(--display);min-height:47px}
.hero-camera-btn:hover{background:#aaffeb}.hero-camera-btn span{font-size:19px;vertical-align:middle;margin-right:6px}
.hero-camera-btn[aria-pressed=true]{background:#184d4a;border-color:#52e4c9;color:#c9fff0}
.intro-actions small{font:600 10px var(--display);color:#8abdc5}
@media(max-width:650px){.intro-actions{gap:7px;margin-top:16px}.hero-camera-btn{width:100%;font-size:10px}}

/* EduMotion Science AR — 2026-10-21. Full-screen camera under the original live SVG. */
body.camera-ar-mode{overflow:hidden;overscroll-behavior:none}
body.camera-ar-mode #workbench{
 position:fixed!important;inset:0!important;
 width:100vw!important;height:100vh!important;height:100dvh!important;
 min-height:0!important;max-height:none!important;
 z-index:1000!important;border:0!important;border-radius:0!important;
 overflow:hidden!important;background:#071525!important;
 isolation:isolate;
}
body.camera-ar-mode #workbench .bench-grid{display:none!important}
body.camera-ar-mode #workbench::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,rgba(4,13,27,.65) 0%,rgba(3,10,20,.08) 22%,rgba(4,14,25,.03) 58%,rgba(4,13,27,.70) 100%);
}
body.camera-ar-mode #workbench #cameraPreview{
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;max-width:none!important;
 min-height:0!important;margin:0!important;padding:0!important;
 aspect-ratio:auto!important;z-index:0!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 overflow:hidden;background:#0b1b2d;pointer-events:none!important;
}
body.camera-ar-mode #workbench #sensorVideo,
body.camera-ar-mode #workbench #handCameraOverlay{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 max-width:none!important;margin:0!important;padding:0!important;border:0!important;
 border-radius:0!important;aspect-ratio:auto!important;object-fit:cover!important;
 pointer-events:none!important;
}
body.camera-ar-mode #workbench #sensorVideo{transform:scaleX(-1)!important}
body.camera-ar-mode #workbench #handCameraOverlay{z-index:1;opacity:.60}
body.camera-ar-mode #workbench .camera-top,
body.camera-ar-mode #workbench .camera-bottom{display:none!important}
body.camera-ar-mode #circuitSvg{
 position:absolute!important;inset:0!important;
 display:block!important;width:100%!important;height:100%!important;
 z-index:3!important;overflow:visible!important;touch-action:none;
 pointer-events:auto;
 filter:drop-shadow(0 7px 7px #0009);
}
body.camera-ar-mode #workbench #benchHelp,
body.camera-ar-mode #workbench .bench-bottom,
body.camera-ar-mode #workbench #handModeBadge{display:none!important}
body.camera-ar-mode #workbench #wireLayer .wire-under{stroke:#03111fd9;stroke-width:21}
body.camera-ar-mode #workbench #wireLayer .wire-main{stroke-width:10;filter:drop-shadow(0 3px 6px #031827)}
body.camera-ar-mode #workbench #wireLayer .wire-flow{stroke-width:4}
body.camera-ar-mode #workbench .terminal .outer{stroke-width:3.5}
body.camera-ar-mode #workbench .terminal .core{r:8}
body.camera-ar-mode #workbench .device-tag{fill:#edfdff;filter:drop-shadow(0 2px 3px #000)}
body.camera-ar-mode #workbench .device-subtag{fill:#b5e4ee;filter:drop-shadow(0 2px 3px #000)}
.ar-hud[hidden],.ar-loading[hidden]{display:none!important}
body.camera-ar-mode .ar-hud{
 position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;pointer-events:none;
 font-family:var(--display);
}
.ar-hud button{pointer-events:auto}
.ar-top{display:flex;align-items:center;gap:16px;justify-content:space-between;
 padding:calc(13px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
 10px max(16px,env(safe-area-inset-left,0px));color:#e4fff5;
}
.ar-brand{display:flex;gap:8px;align-items:center;border:1px solid #99f8df72;
 background:#071a2acc;border-radius:9px;padding:12px 13px;font:700 11px var(--display);letter-spacing:.6px}
.ar-brand b{color:#8fffe4}
.ar-rec{display:inline-block;width:8px;height:8px;background:#72ffd0;border-radius:50%;
 box-shadow:0 0 10px #73ffd3}
.ar-progress{display:flex;gap:17px;align-items:center;justify-content:center;
 color:#e1fff8;font:800 12px var(--display);letter-spacing:.4px}
.ar-progress strong{color:#baffdf;background:#0a2737a8;border:1px solid #457b7d;
 border-radius:7px;padding:10px}
.ar-exit{padding:12px 14px;border:1px solid #d6e9efa1;background:#051a2dcf;color:#f2fbff;
 border-radius:9px;font:800 11px var(--display);min-height:43px}
.ar-exit:hover{background:#9c3038}
.ar-headline{text-align:center;max-width:min(600px,68vw);margin:1px auto 0;
 background:#081e2bc2;border-radius:10px;border:1px solid #6ca8a156;
 padding:8px 13px;display:flex;flex-direction:column;gap:4px}
.ar-headline strong{font:800 clamp(13px,1.5vw,19px) var(--display);color:white}
.ar-headline small{font:700 9px var(--display);color:#b0ffde;letter-spacing:1px}
.ar-footer{margin-top:auto;padding:12px max(18px,env(safe-area-inset-right,0px))
 calc(15px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));
 display:flex;flex-direction:column;gap:8px;align-items:center}
.ar-readout{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ar-pill{font:800 10px var(--display);letter-spacing:.4px;color:#e9fff8;border-radius:7px;
 border:1px solid #8ce9c47d;background:#071b2cd9;padding:8px 11px}
.ar-feedback{font:700 11px/1.35 var(--display);background:#061a2ddd;border:1px solid #699c9688;
 color:#e5fcff;padding:10px 15px;border-radius:8px;text-align:center;max-width:min(670px,95vw);
 min-height:34px}
.ar-toolbar{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:wrap}
.ar-toolbar button{min-height:42px;background:#08223ce0;color:#eaffff;border:1px solid #589c9c;
 border-radius:8px;padding:9px 13px;font:800 10px var(--display);backdrop-filter:blur(9px)}
.ar-toolbar button:disabled{opacity:.36}
.ar-toolbar button:not(:disabled):hover{background:#236568}
.ar-toolbar button.ar-next{color:#052b29;background:#90f8de;border-color:#90f8de}
.ar-toolbar button.ar-next:not(:disabled):hover{background:#d0ffef}
.ar-loading{position:absolute;inset:0;display:flex;z-index:5;flex-direction:column;
 justify-content:center;align-items:center;gap:12px;background:#07192cbb;color:white;pointer-events:none;text-align:center;padding:20px}
.ar-loading-mark{font-size:72px;color:#85ffe2;animation:ar-pulse 1.6s infinite}
.ar-loading strong{font:800 18px var(--display);letter-spacing:1px}
.ar-loading p{color:#cbfff1;font-size:13px}
@keyframes ar-pulse{50%{opacity:.35;transform:scale(.93)}}
@media(max-width:680px){
 .ar-top{padding-top:calc(9px + env(safe-area-inset-top,0px));gap:6px}
 .ar-brand{padding:8px;font-size:8px;white-space:nowrap}
 .ar-progress{font-size:9px;gap:5px}
 .ar-progress strong{padding:7px;font-size:10px}
 .ar-exit{padding:7px 9px;min-height:36px}
 .ar-exit span{display:none}
 .ar-headline{max-width:88vw;padding:6px 10px}
 .ar-headline strong{font-size:13px}
 .ar-headline small{font-size:8px;letter-spacing:.15px}
 .ar-footer{gap:6px;padding:6px 8px calc(9px + env(safe-area-inset-bottom,0px))}
 .ar-readout{gap:5px}.ar-pill{font-size:8px;padding:6px}
 .ar-feedback{max-width:99vw;padding:6px 9px;font-size:9px}
 .ar-toolbar{gap:5px;flex-wrap:nowrap;width:100%}
 .ar-toolbar button{flex:1;padding:8px 3px;font-size:9px;min-width:0}
 .ar-toolbar button span{display:none}
 .ar-toolbar .ar-next{flex:1.7}
 body.camera-ar-mode #workbench #handCameraOverlay{opacity:.40}
}
@media(max-height:560px){
 .ar-headline{display:none}
 .ar-footer{padding-top:0;gap:4px}
 .ar-top{padding-top:6px;padding-bottom:4px}
 .ar-feedback{font-size:9px;padding:5px}
 .ar-toolbar button{min-height:34px}
}
@media(prefers-reduced-motion:reduce){.ar-loading-mark{animation:none}}

/* Twelve real challenges: selectable mission ribbon. */
.mission-nav{min-width:0;width:min(100%,670px);max-width:100%;display:flex;flex-direction:column;gap:7px}
.mission-label{display:flex;justify-content:space-around;color:#86b9bc;font:700 9px var(--display);letter-spacing:.7px}
.mission-label b{color:#aefce2}
.mission-nav .levels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;width:100%}
.mission-nav .level-button{width:100%;min-width:0;height:39px;padding:0;font:800 11px var(--display)}
.mission-nav .level-button:nth-child(4),.mission-nav .level-button:nth-child(8){margin-right:3px}
.switch-two{border-color:#5b859c;background:#22394a}
.switch-two button{background:#8ddfc2;border-color:#8ddfc2;color:#07383a}
.ar-switched-on{border-color:#76ffd8!important;background:#24644f!important;color:#eafff5!important}
@media(min-width:901px){.experiment-heading{align-items:end}.heading-main{flex:1;min-width:250px}.mission-nav{flex:1.4}}
@media(max-width:900px){.mission-nav{width:100%}}
@media(max-width:650px){
 .mission-nav .levels{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
 .mission-nav .level-button{height:38px}
 .mission-nav .level-button:nth-child(4),.mission-nav .level-button:nth-child(8){margin-right:0}
 .mission-label{font-size:8px}
}
@media(max-width:350px){.ar-toolbar button{padding:7px 2px;font-size:8px}}