:root { color-scheme: dark; --navy:#071c2c; --deep:#092c3d; --panel:#0d3a49; --cyan:#45f2e7; --lime:#c5f45b; --amber:#ffc84a; --coral:#ff6e72; --cream:#f8f1d0; --ink:#08212f; --muted:#a9d4d2; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family:ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif; color:var(--cream); background:var(--navy); }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid white; outline-offset:4px; }
.lesson,.lab { width:100%; height:100%; min-width:1080px; min-height:680px; }
.lab { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(rgba(3,20,29,.2),rgba(3,15,23,.68)),url("art/lab-backdrop-01.webp") center/cover no-repeat; }
.world-glow { position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 65% 55%,rgba(58,244,225,.17),transparent 34%),linear-gradient(90deg,rgba(4,25,36,.9),transparent 25%,transparent 84%,rgba(4,25,36,.72)); }
.bubbles i { position:absolute; bottom:-30px; width:10px; height:10px; border:2px solid rgba(141,255,244,.38); border-radius:50%; animation:float 8s linear infinite; }
.bubbles i:nth-child(1){left:8%;animation-delay:-2s}.bubbles i:nth-child(2){left:27%;width:18px;height:18px;animation-delay:-5s}.bubbles i:nth-child(3){left:48%;animation-delay:-1s}.bubbles i:nth-child(4){left:70%;width:14px;height:14px;animation-delay:-6s}.bubbles i:nth-child(5){left:88%;animation-delay:-3s}.bubbles i:nth-child(6){left:56%;width:7px;height:7px;animation-delay:-7s}
.lab-hud { position:absolute; z-index:10; left:24px; right:24px; top:20px; height:76px; display:grid; grid-template-columns:190px minmax(340px,1fr) 210px auto; gap:14px; align-items:stretch; }
.lab-badge,.mission-track,.difficulty,.scoreboard { border:2px solid rgba(118,247,234,.36); border-radius:20px; background:linear-gradient(180deg,rgba(12,58,72,.96),rgba(5,35,48,.96)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 24px rgba(0,8,14,.34); }
.lab-badge { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; transform:rotate(-1deg); }
.lab-badge span { color:var(--cyan); font-size:12px; font-weight:1000; letter-spacing:.16em; }.lab-badge strong { color:var(--amber); font-size:25px; }.lab-badge i { width:12px;height:25px;border:2px solid var(--cyan);border-radius:3px 3px 8px 8px;background:linear-gradient(to top,var(--coral) 45%,transparent 45%); }
.mission-track { display:grid; place-content:center; gap:7px; padding:8px 22px; }.mission-track>span { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.13em; text-align:center; text-transform:uppercase; }.mission-track>div { display:flex; align-items:center; justify-content:center; }.mission-track i { width:30px;height:30px;display:grid;place-items:center;border:2px solid #4d8490;border-radius:50%;color:#8fb9bd;background:#092d3b;font-size:12px;font-style:normal;font-weight:1000;transition:all 160ms ease-out; }.mission-track b { width:46px;height:3px;background:#2f6771; }.mission-track i.is-current { color:var(--ink);border-color:white;background:var(--cyan);box-shadow:0 0 0 5px rgba(69,242,231,.13),0 0 18px rgba(69,242,231,.5); }.mission-track i.is-complete { color:var(--ink);border-color:#f8e89a;background:var(--lime); }.mission-track b.is-complete { background:var(--lime); }
.difficulty { padding:10px 15px; }.difficulty>span { display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase; }.difficulty>span b { color:var(--amber);font-size:14px; }.difficulty>i { height:8px;display:block;margin:7px 0;border-radius:9px;background:#061d28;overflow:hidden; }.difficulty>i b { height:100%;display:block;border-radius:9px;background:linear-gradient(90deg,var(--cyan),var(--lime),var(--amber));transition:width 300ms ease-out; }.difficulty>strong { display:block;font-size:10px;text-align:center; }
.scoreboard { display:flex;padding:7px 9px; }.scoreboard div { min-width:70px;display:grid;place-content:center;padding:0 12px;text-align:center;border-left:1px solid rgba(113,231,220,.18); }.scoreboard div:first-child{border-left:0}.scoreboard span { color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }.scoreboard strong { color:white;font-size:19px; }.scoreboard strong b{color:var(--amber)}
.game-shell { position:absolute; left:28px; right:28px; top:113px; bottom:24px; display:grid; grid-template-columns:245px minmax(720px,1fr); gap:18px; }
.mascot-bay { position:relative; overflow:hidden; border:2px solid rgba(96,224,213,.27);border-radius:28px;background:linear-gradient(180deg,rgba(7,41,54,.78),rgba(5,28,39,.94));box-shadow:inset 0 1px rgba(255,255,255,.09),0 12px 35px rgba(0,8,14,.38); }
.mascot { position:absolute; left:9px; bottom:72px; width:226px; max-height:360px; object-fit:contain; filter:drop-shadow(0 13px 9px rgba(0,0,0,.35)); transform-origin:50% 90%; animation:mascot-idle 2.8s ease-in-out infinite; }
.speech { position:absolute; z-index:2; left:18px; right:18px; top:22px; min-height:74px; display:grid;place-items:center;padding:13px 15px;border:3px solid #093344;border-radius:21px;color:var(--ink);background:var(--cream);box-shadow:0 6px 0 #06212d;font-size:14px;font-weight:1000;text-align:center; }.speech::after { position:absolute;left:50%;bottom:-15px;content:"";border-left:13px solid transparent;border-right:13px solid transparent;border-top:16px solid var(--cream);transform:translateX(-50%); }
.specimen-stack { position:absolute;left:20px;right:20px;bottom:20px;height:62px;display:flex;align-items:end;justify-content:center;gap:12px; }.specimen-stack i { width:42px;height:50px;border:3px solid #4bcabd;border-radius:13px 13px 18px 18px;background:linear-gradient(to top,rgba(197,244,91,.7) 58%,rgba(71,214,210,.12) 58%);box-shadow:inset 0 0 12px rgba(255,255,255,.23),0 5px 0 #041e2a; }.specimen-stack i:nth-child(2){height:42px;background:linear-gradient(to top,rgba(255,110,114,.7) 46%,rgba(71,214,210,.12) 46%)}.specimen-stack i:nth-child(3){height:57px;background:linear-gradient(to top,rgba(255,200,74,.72) 68%,rgba(71,214,210,.12) 68%)}
.mascot-bay.is-cheering .mascot{animation:mascot-cheer 650ms ease-out}.mascot-bay.is-oops .mascot{animation:mascot-oops 420ms ease-out}.mascot-bay.is-level-up .mascot{animation:mascot-level 850ms cubic-bezier(.2,.8,.2,1.2)}
.console { position:relative; display:grid; grid-template-rows:auto minmax(310px,1fr) 38px minmax(72px,auto); min-width:0;padding:21px 30px 24px;border:2px solid rgba(104,244,231,.34);border-radius:30px;background:linear-gradient(180deg,rgba(8,49,62,.94),rgba(5,29,41,.97));box-shadow:inset 0 1px rgba(255,255,255,.1),0 13px 0 rgba(2,18,26,.8),0 20px 44px rgba(0,6,11,.34); }
.challenge-copy { text-align:center; }.challenge-copy>span { color:var(--cyan);font-size:10px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase; }.challenge-copy h1 { margin:3px 0 2px;color:white;font-size:34px;line-height:1.05;letter-spacing:-.03em; }.challenge-copy p { margin:0;color:var(--muted);font-size:14px;font-weight:750; }
.instrument-stage { position:relative; min-height:310px; margin:14px 0 4px; overflow:hidden;border:2px solid #226272;border-radius:24px;background:radial-gradient(circle at 50% 60%,rgba(63,246,229,.12),transparent 45%),linear-gradient(180deg,#061e2c,#092f3d 80%,#0d3b46);box-shadow:inset 0 0 40px rgba(0,0,0,.34),inset 0 -6px #061c27; }
.instrument-stage::before { position:absolute;left:0;right:0;bottom:0;height:38px;content:"";background:linear-gradient(#1a6070,#0a3542);border-top:3px solid #2d8891; }
.instrument { position:absolute;inset:12px 15px 38px;display:grid;place-items:center; }
.prop-shelf img { position:absolute;z-index:2;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));opacity:.22;transition:opacity 180ms ease-out,transform 180ms ease-out; }.prop-shelf img.is-active{opacity:1;transform:translateY(-3px) scale(1.05)}#rulerProp{width:110px;height:105px;left:12px;bottom:20px}#scaleProp{width:108px;height:108px;right:9px;bottom:18px}#jugProp{width:95px;height:100px;right:110px;bottom:16px}
.scan-line { position:absolute;z-index:5;left:8%;right:8%;top:20%;height:3px;opacity:0;background:linear-gradient(90deg,transparent,var(--cyan),white,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan); }.instrument-stage.is-scanning .scan-line{animation:scan 700ms ease-in-out}.instrument-stage.is-miss{animation:gentle-shake 390ms ease-out;box-shadow:inset 0 0 40px rgba(0,0,0,.34),inset 0 -6px #061c27,0 0 0 4px rgba(255,110,114,.3)}
.result-burst { position:absolute;z-index:8;left:50%;top:50%;pointer-events:none}.result-burst i{position:absolute;width:10px;height:10px;opacity:0;background:var(--lime);clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}.instrument-stage.is-success .result-burst i{animation:burst 700ms ease-out}.result-burst i:nth-child(1){--x:-160px;--y:-80px}.result-burst i:nth-child(2){--x:-110px;--y:90px}.result-burst i:nth-child(3){--x:-40px;--y:-120px}.result-burst i:nth-child(4){--x:55px;--y:115px}.result-burst i:nth-child(5){--x:120px;--y:-95px}.result-burst i:nth-child(6){--x:175px;--y:20px}.result-burst i:nth-child(7){--x:10px;--y:-135px}.result-burst i:nth-child(8){--x:-175px;--y:15px}
.ruler-wrap { width:min(720px,80%); }.object-capsule { position:relative;height:68px;margin:0 0 14px 4px;border:3px solid #163f50;border-radius:34px;background:linear-gradient(90deg,#ff7e79,#ffc95c);box-shadow:inset 0 5px rgba(255,255,255,.35),0 8px 0 #061f2c,0 0 26px rgba(255,114,111,.32); }.object-capsule::after{position:absolute;right:14px;top:15px;width:36px;height:20px;content:"";border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-12deg)}
.ruler-svg,.scale-svg,.jug-svg { width:100%;overflow:visible;filter:drop-shadow(0 8px 5px rgba(0,0,0,.28)); }.tick{stroke:#082432;stroke-width:3}.tick.minor{stroke-width:2}.mark-label{fill:#092331;font:900 13px ui-rounded,system-ui}.pointer{fill:var(--coral);stroke:#fff1c0;stroke-width:3}.liquid{fill:url(#liquidGlow)}
.choice-row { width:min(780px,100%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }.choice,.primary,.explain { min-height:61px;border:2px solid #4ea5ad;border-radius:17px;background:linear-gradient(180deg,#176274,#0d4353);box-shadow:inset 0 2px rgba(255,255,255,.1),0 6px 0 #041d28;color:white;font-weight:1000;transition:transform 140ms ease-out,filter 140ms ease-out,box-shadow 140ms ease-out; }.choice:hover,.primary:hover,.explain:hover{transform:translateY(-2px);filter:brightness(1.13);box-shadow:inset 0 2px rgba(255,255,255,.1),0 8px 0 #041d28}.choice:active,.primary:active,.explain:active{transform:translateY(4px);box-shadow:inset 0 2px rgba(255,255,255,.1),0 2px 0 #041d28}.choice strong{display:block;color:var(--amber);font-size:22px}.choice small,.explain small{display:block;margin-top:3px;color:#a8d6d5;font-size:10px;font-weight:800}.choice.is-conversion strong{color:var(--lime)}
.primary { min-width:250px;padding:0 24px;color:var(--ink);border-color:#f5ffbd;background:linear-gradient(180deg,var(--lime),#8ecf3e);box-shadow:inset 0 2px white,0 6px 0 #37681c;font-size:15px}.primary:hover{box-shadow:inset 0 2px white,0 8px 0 #37681c}.explain-row{width:min(780px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.explain{padding:8px 13px;font-size:13px}.action-area{min-height:72px;display:flex;align-items:end;justify-content:center}.feedback{min-height:38px;display:grid;place-items:center;color:var(--lime);font-size:13px;font-weight:900;text-align:center}.feedback.is-error{color:#ff9da0}
.readout { display:grid;place-content:center;min-width:250px;min-height:150px;padding:18px;border:3px solid #2d8a92;border-radius:24px;background:linear-gradient(145deg,#062530,#0b4552);box-shadow:inset 0 0 20px rgba(55,245,229,.13),0 9px 0 #031b24;text-align:center}.readout span{color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}.readout strong{color:white;font-size:46px}.readout small{color:var(--muted);font-weight:800}.portal-ring{position:absolute;width:270px;height:270px;border:16px solid #1c7882;border-radius:50%;box-shadow:inset 0 0 0 8px var(--cyan),0 0 30px rgba(69,242,231,.5);animation:portal 5s linear infinite}.conversion-card{position:relative;z-index:2;display:flex;align-items:center;gap:30px}.conversion-card .arrow{color:var(--amber);font-size:38px}.conversion-card .measure{min-width:155px;padding:20px;border:3px solid #3e9aa0;border-radius:22px;background:#082f3c;text-align:center}.conversion-card .measure span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.conversion-card .measure strong{font-size:34px}.conversion-card .measure.is-mystery strong{color:var(--lime)}
.toast{position:absolute;z-index:30;left:50%;bottom:30px;max-width:75%;padding:11px 19px;opacity:0;transform:translate(-50%,12px);border:2px solid #d9ff8b;border-radius:999px;color:var(--ink);background:var(--lime);box-shadow:0 6px 0 #355e1d,0 12px 24px rgba(0,0,0,.35);pointer-events:none;font-size:13px;font-weight:1000;transition:opacity 150ms ease-out,transform 150ms ease-out}.toast.is-showing{opacity:1;transform:translate(-50%,0)}
@keyframes float{to{transform:translateY(-110vh);opacity:0}}@keyframes mascot-idle{50%{transform:translateY(-5px) rotate(1deg)}}@keyframes mascot-cheer{35%{transform:translateY(-22px) rotate(-5deg) scale(1.06)}70%{transform:translateY(-4px) rotate(4deg)}}@keyframes mascot-oops{25%{transform:translateX(-6px) rotate(-4deg)}60%{transform:translateX(5px) rotate(4deg)}}@keyframes mascot-level{35%{transform:translateY(-30px) scale(1.1) rotate(-7deg)}70%{transform:translateY(-5px) rotate(7deg)}}@keyframes scan{0%{top:18%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:82%;opacity:0}}@keyframes gentle-shake{25%{transform:translateX(-7px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.3)}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(160deg) scale(1.25)}}@keyframes portal{to{transform:rotate(360deg)}}
@media(max-height:760px){.lab-hud{top:12px;height:66px}.game-shell{top:91px;bottom:16px}.console{padding-top:14px;grid-template-rows:auto minmax(280px,1fr) 32px minmax(66px,auto)}.challenge-copy h1{font-size:29px}.instrument-stage{min-height:280px}.mascot{bottom:62px;max-height:310px}.speech{top:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}