:root{color-scheme:light;--ink:#183039;--paper:#f7f6f1;--accent:#c65723;--line:#d7dbd5}*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",sans-serif;color:var(--ink);overflow:hidden}canvas{display:block;width:100vw;height:100vh;touch-action:none;outline:none}button{font:600 13px "Segoe UI",sans-serif;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:11px 17px;border-radius:6px;transition:background .18s}button:hover{background:#e9ede7}button:focus-visible,input:focus-visible{outline:3px solid #b74d19;outline-offset:3px}button:disabled{opacity:.48;cursor:not-allowed}button.active,#approach,#lift:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}header{position:absolute;top:0;left:0;right:0;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#f5f4eeee,transparent)}.brand{display:flex;gap:12px;align-items:center}.mark{display:grid;place-items:center;background:var(--accent);color:white;width:40px;height:40px;font-size:26px;font-weight:700;border-radius:4px}.brand strong{display:block;font-size:19px}.brand span:not(.mark){display:block;font-size:12px;margin-top:3px}nav{position:absolute;left:30px;top:99px;display:flex;gap:5px}aside{position:absolute;top:169px;left:30px;width:270px;padding:23px;background:var(--paper);border:1px solid #e2e4dc;border-radius:7px}h1{font-size:26px;line-height:1.18;font-weight:600;margin:10px 0 16px;letter-spacing:-.6px}.section{font-size:12px;color:#64543d}p{font-size:14px;line-height:1.55;margin:0 0 17px}.specs{display:grid;grid-template-columns:1fr;gap:4px;border-top:1px solid var(--line);padding-top:16px;font-size:12px}.specs span{color:#646f70;margin-top:6px}.note{font-size:11px;color:#677273;margin-top:17px;margin-bottom:0;line-height:1.45}footer{position:absolute;bottom:0;left:0;right:0;background:var(--paper);padding:16px 30px;display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid var(--line)}.controls,.settings{display:flex;gap:8px;align-items:center}.settings{font-size:12px;gap:17px;flex-wrap:wrap}.settings label{white-space:nowrap;cursor:pointer}input{accent-color:var(--accent)}#fps{min-width:38px;color:#5b696b;font-variant-numeric:tabular-nums}#toast{position:absolute;bottom:93px;left:50%;transform:translateX(-50%);max-width:540px;background:var(--ink);color:#fff;font-size:13px;line-height:1.4;padding:12px 20px;border-radius:6px;pointer-events:none;text-align:center}#helpbox{position:absolute;top:100px;right:30px;max-width:370px;padding:25px;background:var(--paper);border:1px solid var(--line);border-radius:8px}h2{font-size:21px;margin-top:0}::selection{background:#f0b07c;color:#152b33}@media(max-width:900px){aside{width:225px;top:153px;padding:17px}h1{font-size:22px}footer{flex-wrap:wrap;padding:12px 18px}.settings{gap:12px}#toast{bottom:135px;max-width:75vw}nav{left:18px;top:88px}nav button{padding:9px 12px}header{padding:18px}.brand strong{font-size:17px}}@media(max-width:600px){aside{display:none}nav{right:14px;overflow-x:auto;white-space:nowrap;top:78px;padding-bottom:5px}nav button{font-size:12px}header{padding:16px 14px}.brand strong{font-size:15px}.brand span:not(.mark){font-size:10px}.mark{width:32px;height:32px}header button{font-size:11px;padding:9px}footer{padding:10px 12px;gap:10px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}.controls button{padding:10px 8px;font-size:12px}.settings{font-size:11px;gap:8px;justify-content:space-between;width:100%}.settings button{font-size:11px;padding:7px}#toast{bottom:165px;width:90vw;max-width:90vw;font-size:12px}#helpbox{left:14px;right:14px;top:125px}#fps{display:none}}
.person-view #info{display:none}

.exercise #info{display:block;max-height:calc(100vh - 285px);overflow-y:auto;width:310px}
#answers{display:grid;gap:8px}#answers button{text-align:left;line-height:1.4;padding:12px}
.progress{font-size:12px;color:#586b63;font-variant-numeric:tabular-nums}
#feedback{margin:12px 0 0}#feedback.wrong{color:#9c351e}
@media(max-width:600px){.exercise #info{top:auto;bottom:158px;left:12px;right:12px;width:auto;max-height:36vh;padding:14px}.exercise #info h1{font-size:19px;margin:0 0 8px}.exercise #info p{font-size:12px;margin-bottom:8px}.exercise #toast{top:122px;bottom:auto;font-size:11px}.exercise #info .note{font-size:10px}#answers button{font-size:12px;padding:9px}}

/* Scene and lesson occupy separate areas; no lesson overlays the equipment. */
body{height:100dvh;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}
header{position:static;flex:0 0 auto;padding:16px 24px;background:var(--paper);border-bottom:1px solid var(--line);gap:16px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;flex:1;min-height:0}
.stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-width:0;min-height:0}
nav{position:static;display:flex;flex-wrap:wrap;gap:4px;padding:10px 16px;overflow:visible;white-space:normal;border-bottom:1px solid var(--line)}
nav button{padding:9px 13px;min-height:40px}
.viewport{position:relative;min-height:0;overflow:hidden;background:#c7d0cb}
#scene{width:100%;height:100%;display:block}
.exercise #info{position:static;display:block;width:auto;max-height:none;overflow-y:auto;border:0;border-left:1px solid var(--line);border-radius:0;padding:24px;margin:0;background:#f0f1eb}
.exercise #info h1{font-size:24px;margin:0 0 12px}.exercise #info p{font-size:14px}.exercise #info .note{font-size:11px}
#answers button{background:var(--paper);min-height:48px}
#toast,.exercise #toast{position:static;transform:none;max-width:none;width:auto;text-align:left;border-radius:0;background:#e8ece5;color:var(--ink);padding:10px 16px;font-size:12px;min-height:38px}
footer{position:static;padding:12px 16px;display:block;border-top:1px solid var(--line)}
.controls{display:flex;flex-wrap:wrap;gap:8px;width:auto}.controls button{min-height:42px}
#helpbox{z-index:10;top:76px;right:16px;max-height:calc(100dvh - 92px);overflow-y:auto;box-shadow:0 12px 36px #18303922}
#helpbox .settings{display:flex;gap:12px;margin:20px 0}.extra-controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
@media(max-width:900px){body{height:auto;min-height:100dvh;overflow:auto}.workspace{display:flex;flex-direction:column;flex:none}.stage{grid-template-rows:auto minmax(300px,48dvh) auto auto}.exercise #info{border-left:0;border-top:1px solid var(--line);overflow:visible;padding:20px 24px}.exercise #info h1{font-size:22px}#answers{grid-template-columns:1fr 1fr}.brand strong{font-size:17px}}
@media(max-width:520px){header{padding:12px;gap:8px}.brand strong{font-size:14px}.brand span:not(.mark){font-size:10px}header button{max-width:115px;min-height:40px;padding:8px}nav{padding:8px;gap:4px}nav button{font-size:11px;padding:8px;flex:1 0 auto}.stage{grid-template-rows:auto minmax(280px,43dvh) auto auto}.controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}footer{padding:10px 12px}.exercise #info{padding:20px 16px}.exercise #info p{font-size:14px}#answers{grid-template-columns:1fr}#answers button{font-size:13px}.exercise #info .note{font-size:11px}#helpbox{left:12px;right:12px;top:76px}}

/* Portal identity: exact Onest font, wordmark and palette from the main portal. */
@font-face{font-family:Onest;src:url('fonts/Onest-Variable.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
:root{color-scheme:dark;--ink:#f7faff;--paper:#071b35;--accent:#d8b45a;--line:rgba(216,180,90,.32);--surface:#0d2a4d;--raised:#12365e;--muted:#c8d6e8}
body,button,input{font-family:Onest,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:4px;font-weight:700}
button:hover{background:var(--raised);border-color:var(--accent)}
button.active,#approach,#lift:not(:disabled){background:var(--accent);border-color:var(--accent);color:#071b35}
button.active:hover,#approach:hover,#lift:not(:disabled):hover{background:#f0c76a}
button:disabled{background:var(--surface);color:var(--muted);opacity:.5}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #63c7ff;outline-offset:3px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.portal-wordmark{display:flex;align-items:baseline;white-space:nowrap;color:var(--ink);font-size:clamp(16px,2.1vw,26px);font-weight:800;letter-spacing:-.04em;line-height:1;text-decoration:none}
.brand .portal-wordmark span{display:inline;font-size:inherit;margin:0}
.wordmark-ai{color:#63c7ff}.wordmark-domain{color:#ff5c57}
.brand .demo-caption{font-size:12px;color:var(--muted);margin:0}
.exercise #info{background:var(--surface);border-color:var(--line)}
.exercise #info h1{font-weight:800;letter-spacing:-.025em}
#answers button{background:var(--paper);border-color:var(--line)}#answers button:hover{background:var(--raised);border-color:var(--accent)}
.progress,.note,.exercise #info .note,#fps{color:var(--muted)}
#feedback.wrong{color:#ff918b}
#toast,.exercise #toast{background:var(--surface);color:var(--muted);border-top:1px solid var(--line)}
#helpbox{background:var(--paper);border-color:var(--line)}#helpbox a{color:#63c7ff;text-underline-offset:3px}
::selection{background:var(--accent);color:#071b35}
@media(max-width:520px){header{flex-wrap:wrap}.brand{width:100%;gap:8px}.portal-wordmark{font-size:clamp(15px,4.7vw,22px)}.brand .demo-caption{font-size:11px}header button{max-width:none;width:auto;padding:8px 12px}}

.lesson-nav{display:flex;flex-direction:column;gap:6px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.lesson-nav button{text-align:left;white-space:normal;padding:10px 12px;font-size:13px;min-height:42px}