@font-face{font-family:LabUI;src:local("Segoe UI");font-display:swap}
:root{color-scheme:dark;--night:#0c1723;--panel:#142638;--raised:#1b3146;--line:#345067;--white:#f0f6fa;--muted:#bdcedc;--mint:#a7ead7;--ink:#10352d;--good:#91e5b7;--bad:#ffb7b7;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 32% -16%,#213b53 0%,transparent 56%),var(--night);color:var(--white);font:16px/1.5 LabUI,system-ui,sans-serif;min-height:100vh}button,a,select,textarea{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b8f1db;outline-offset:3px}a{color:var(--mint)}h1,h2,h3,p{margin:0}h1,h2{line-height:1.08;text-wrap:balance}h1{font:600 clamp(2.25rem,5.4vw,5.4rem)/1.02 var(--serif);letter-spacing:-.047em}h2{font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.04em}h3{font-size:1.05rem;line-height:1.3}p{color:var(--muted)}[hidden]{display:none!important}
.topbar{width:min(1240px,100%);margin:auto;display:flex;align-items:center;gap:17px;padding:14px 24px;border-bottom:1px solid #3b576d88}.brand{display:flex;align-items:center;background:#fff;padding:5px 8px;border-radius:6px}.brand img{width:98px;height:25px;object-fit:contain}.top-label,.eyebrow,.phase-tag{font-weight:750;font-size:.72rem;letter-spacing:.15em;color:var(--mint)}.top-label span{opacity:.5;margin-inline:3px}.top-actions{display:flex;gap:7px;margin-left:auto}.top-actions button,.ghost,.side-nav button,.slot,.chip,.tab,.answer-toggle{min-height:40px;border:1px solid var(--line);background:#132638;color:var(--white);border-radius:10px;padding:8px 13px;font-weight:650}.top-actions button{font-size:.79rem;min-height:34px;padding:5px 10px}.top-actions button:hover,.ghost:hover,.chip:hover,.tab:hover,.slot:hover{background:#224359}.top-actions button[aria-pressed=true],.tab[aria-pressed=true],.chip[aria-pressed=true]{border-color:var(--mint);color:var(--mint);background:#22443f}
main{width:min(1240px,100%);margin:auto;padding:clamp(15px,2.4vw,32px) 24px 36px}.intro,.bench{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(285px,1fr);gap:clamp(16px,2.3vw,29px);align-items:start}.intro{grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr);align-items:center}.intro-copy{padding:10px 0 12px}.intro-copy h1{margin:10px 0 14px}.intro-copy>p{font-size:1.02rem;max-width:43ch}.intro-copy .eyebrow{color:var(--mint);font-size:.72rem}.possible{margin:19px 0 21px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#152a3d}.possible p{font-size:.85rem}.possible ul{margin:6px 0 0;padding-left:20px;color:var(--white);font-size:.91rem}.button{min-height:47px;border:1px solid var(--mint);background:var(--mint);color:var(--ink);border-radius:10px;padding:10px 16px;font-weight:800}.button:hover{background:#cefff0;border-color:#cefff0}.intro-note{margin-top:14px!important;font-size:.79rem!important;color:#a9bacb}
.scene-frame{position:relative;isolation:isolate;margin:0;overflow:hidden;border-radius:16px;border:1px solid #42647c;background:#233e54;box-shadow:0 20px 62px #010b1266}.scene{display:block;width:100%;height:auto;aspect-ratio:4/3;overflow:hidden}.phase-tag{position:absolute;top:12px;left:12px;z-index:2;background:#102538ec;padding:5px 9px;border:1px solid #526f84;border-radius:6px;color:#e0f5ff;font-size:.61rem;letter-spacing:.12em;pointer-events:none}.stagebar{display:flex;align-items:center;gap:8px;margin:0 0 17px;list-style:none;padding:0}.stagebar li{flex:1;min-width:0;display:flex;align-items:center;gap:9px;border-radius:9px;border:1px solid #314c62;background:#142536;color:#9eb1c2;min-height:38px;padding:6px 10px;font-size:.82rem;font-weight:700}.stagebar .active{border-color:#78bbae;color:#e8fff6;background:#1d3a3e}.stagebar .done{color:#b8e8d8}.stagebar .number{color:var(--mint);font-size:.75rem}
.side{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:clamp(15px,2.3vw,23px)}.side h2{margin:7px 0 10px}.side p{font-size:.95rem}.side .button{margin-top:15px;width:100%}.small{font-size:.82rem!important;color:var(--muted)}.step-line{border-top:1px solid var(--line);margin-top:17px;padding-top:13px}.tool-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tool-row button{font-size:.84rem}.clock{font-variant-numeric:tabular-nums;font-weight:800;color:var(--mint);background:#0b1a27;display:inline-block;padding:5px 10px;border-radius:7px;margin-top:9px}.scene-caption{padding:9px 12px;background:#102231;font-size:.82rem;color:#dcebf6;min-height:42px}.table-wrap{overflow-x:auto;margin-top:12px}.record{border-collapse:collapse;width:100%;font-size:.83rem;text-align:left}.record th,.record td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}.record th{color:var(--mint);font-weight:740}.record td:first-child{font-weight:800}.record select{min-height:35px;background:#0f2131;border:1px solid #4c667b;color:var(--white);border-radius:6px;padding:3px;max-width:100%;width:100%}.feedback{margin-top:10px!important;color:var(--bad)!important;min-height:1.4em}.feedback.good{color:var(--good)!important}.legend{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 0;font-size:.8rem}.legend b{color:var(--white)}.dot{display:inline-block;width:.74em;height:.74em;border-radius:50%;margin-right:5px;background:#d24659}.dot.blue{background:#4069cf}.comparison{margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.comparison .record{margin:0}.comparison .record td,.comparison .record th{padding:10px}.match{width:min(920px,100%);margin:auto}.match h1{font-size:clamp(2.2rem,6vw,4.1rem);margin:8px 0 11px}.match-header{margin-bottom:18px}.match-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px;margin-top:15px}.match-card h3{margin-bottom:6px}.chip-row,.slot-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.chip{border-color:#7194a7;touch-action:none;user-select:none;text-align:left}.chip[aria-disabled=true]{opacity:.55}.slot{flex:1;min-width:130px;text-align:left;min-height:66px;border-style:dashed}.slot span{display:block}.slot .letter{font-weight:850;color:var(--mint);font-size:.87rem}.slot.ok{border-style:solid;border-color:#70d7a8;color:#c5f9d8}.slot.error{border-color:#ffa7a8}.slot.ready{border-color:#afe7d6;background:#203c44}.ghost-drag{position:fixed;z-index:8;pointer-events:none;padding:8px 12px;border-radius:8px;background:var(--mint);color:var(--ink);font-weight:800;box-shadow:0 5px 20px #0008}.match-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.celebration{padding:18px;background:#143b34;border:1px solid #72c6a7;border-radius:14px;margin-top:16px}.celebration h2{color:#c7fae1}.celebration p{margin-top:6px;color:#def8ef}.celebration .button{margin-top:13px}.count{display:inline-block;background:#1d3549;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-weight:700;color:var(--mint)}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}.tab{font-size:.88rem}.practice{padding:15px;border:1px solid var(--line);border-radius:12px;margin-top:9px;background:#122638}.practice summary{cursor:pointer;color:var(--white);font-weight:750}.practice p{margin-top:10px}.practice textarea{display:block;width:100%;background:#0e1c29;border:1px solid var(--line);border-radius:8px;min-height:65px;padding:8px;color:var(--white);margin:10px 0}.answer{border-left:3px solid #7fdac2;background:#123932;padding:9px 12px;margin-top:9px;color:#e1f9ee}.answer-toggle{font-size:.83rem}.paper-note{font-size:.83rem;color:#bed0da;margin:12px 0}.pagefooter{margin-top:16px}footer{width:min(1240px,100%);margin:auto;border-top:1px solid #35506980;padding:14px 24px 20px;color:#9db0c2;font-size:.77rem}footer span{padding:0 6px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@media(max-width:850px){.intro,.bench{grid-template-columns:1fr}.intro{gap:15px}.intro .scene-frame{order:2}.intro .intro-copy{order:1}.intro-copy h1{font-size:clamp(2.5rem,10vw,4.8rem)}.bench{gap:12px}.bench .side{order:2}.bench .scene-frame{order:1}.scene{aspect-ratio:1.22}}
@media(max-width:500px){.topbar{padding:10px 12px;gap:7px}.brand{padding:3px 5px}.brand img{width:77px;height:22px}.top-label{font-size:.58rem;letter-spacing:.06em}.top-label span{margin:0}.top-actions{gap:4px}.top-actions button{font-size:.69rem;padding:4px 6px}main{padding:12px 10px 25px}.stagebar{gap:4px;margin-bottom:8px}.stagebar li{font-size:.64rem;gap:4px;padding:4px;min-height:34px}.stagebar .number{font-size:.67rem}.scene{aspect-ratio:1.05}.scene-frame{border-radius:12px}.phase-tag{font-size:.54rem;top:7px;left:7px;padding:4px 6px}.side{border-radius:12px;padding:13px}.record th,.record td,.comparison .record th,.comparison .record td{padding:6px;font-size:.75rem}.record select{font-size:.77rem}.match-card{padding:11px}.slot{min-width:100px;font-size:.76rem;padding:6px}.chip{font-size:.82rem}.scene-caption{font-size:.77rem;padding:7px 9px}.possible{margin:13px 0}.intro-copy{padding:4px}.intro .scene-frame{order:1}.intro .intro-copy{order:2}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.slot.ok:disabled{opacity:1;cursor:default}.chip:disabled{cursor:default}

/* OK Teacher's ice-blue lab palette. Keep the photographic scene in cool contrast. */
:root{color-scheme:light;--night:#edf7ff;--panel:#f8fcff;--raised:#e2f3ff;--line:#b7d4e7;--white:#112e48;--muted:#466480;--mint:#185d89;--ink:#fff;--good:#12614a;--bad:#9d3042}
body{background:radial-gradient(ellipse at 35% 0,#d9effe 0%,transparent 68%),#eff8ff}
.topbar{border-color:#a9cde3}.brand{box-shadow:0 1px 5px #365a7522}.top-actions button,.ghost,.slot,.chip,.tab,.answer-toggle{background:#edf7fe;color:#183e5d;border-color:#9dc3db}
.top-actions button:hover,.ghost:hover,.chip:hover,.tab:hover,.slot:hover{background:#dcefff}.top-actions button[aria-pressed=true],.tab[aria-pressed=true],.chip[aria-pressed=true]{background:#d9efff;border-color:#3985b2;color:#154e77}
.possible{background:#f5fbff}.intro-note,.small{color:#4a6981!important}
.button{background:#185e8f;color:#fff;border-color:#185e8f;box-shadow:0 2px 4px #25435f22}.button:hover{background:#104e78;border-color:#104e78}
.stagebar li{background:#e4f3ff;color:#46637e;border-color:#b5d6eb}.stagebar .active{background:#d7efff;color:#143d60;border-color:#5c9bbf}.stagebar .done{color:#176459;background:#e3f3f5}
.side,.match-card{box-shadow:0 10px 29px #44688210}.clock{background:#d8edf9;color:#173f60}.record select{background:#f6fbff;color:#16394f;border-color:#a9c7dc}.record th{color:#154f77}
.slot.ready{border-color:#4a8cb6;background:#dff2ff}.slot.ok{border-color:#52a78b;background:#e7f7f0;color:#155a43}.slot.error{border-color:#c66875;background:#fff1f5}.slot .letter{color:#225a7c}
.celebration{background:#e7f8ef;border-color:#7cbea5}.celebration h2,.celebration p{color:#1d5845}.count{background:#dceefc;color:#163e5e}
.practice{background:#f7fcff}.practice textarea{background:#fff;color:#16394f}.answer{background:#e8f8f1;color:#194d3d}.paper-note,footer{color:#45647d}
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#377da9}
.work-area{min-width:0}.worktray{margin-top:10px;border-radius:13px;border:1px solid #aecfe5;background:#f8fcff;padding:10px 12px;box-shadow:0 8px 22px #355c7410}.worktray .eyebrow{font-size:.65rem}.lab-tools,.lab-targets{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.lab-tool{min-height:45px;border:1px solid #86b4d0;border-radius:9px;background:#e5f4ff;color:#143e5e;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font-size:.86rem;font-weight:800;touch-action:none;user-select:none;cursor:grab}.lab-tool:active{cursor:grabbing}.lab-tool:hover,.lab-tool[aria-pressed=true]{background:#cbeaff;border-color:#367eab}
.lab-tool svg,.ghost-drag svg{width:34px;height:33px;flex-shrink:0}.tray-help{font-size:.77rem;color:#4a6780;margin-top:7px}
.lab-target{min-height:34px;border:1px dashed #85adca;border-radius:7px;background:#f3faff;padding:5px 8px;color:#1d4e72;font-weight:700;font-size:.79rem;white-space:nowrap}.lab-target:hover,.dragging .lab-target{background:#d8eeff;border-color:#337da8}
.paper-chip{display:inline-block;vertical-align:middle;width:.58em;height:1.05em;border-radius:2px;margin-right:5px}.paper-chip.red{background:#b9475d}.paper-chip.blue{background:#365eaf}
.ghost-drag{display:flex;align-items:center;gap:7px;background:#f5fcff;color:#143a56;border:1px solid #77a8c7;white-space:nowrap}.dragging .scene [data-lab-target] rect{fill-opacity:.18}
.scene[data-kind=shake]{touch-action:none}.active-instruction{margin-bottom:6px;color:#123e60}.scene-caption strong{color:#fff}.scene-caption{background:#12344e;color:#eaf7ff}
.explanations{margin-top:22px}.explanations>p{margin:6px 0 12px}.evidence-card{margin:12px 0;padding:15px;border:1px solid #aed0e6;background:#f8fcff;border-radius:12px}.evidence-card>h3{color:#164c75;margin-bottom:9px}.evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.evidence-grid article{border:1px solid #c2dbec;border-radius:9px;padding:10px;background:#edf7ff}.evidence-grid h4{margin:0 0 7px;font-size:.9rem;color:#133b58}.evidence-grid h4 b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:3px;background:#184f7a;color:#fff;border-radius:5px}.evidence-grid p{font-size:.82rem;line-height:1.45;margin:6px 0}.evidence-grid strong{display:block;color:#235274;font-size:.76rem}
@media(max-width:850px){.bench .work-area{order:1}.bench .side{order:2}}
@media(max-width:500px){.top-label{display:none}.top-actions button{font-size:.7rem}.lab-tool{min-height:39px;padding:3px 5px;font-size:.75rem}.lab-tool svg{width:24px;height:27px}.worktray{padding:8px}.lab-tools,.lab-targets{gap:4px}.lab-target{font-size:.71rem;min-height:29px;padding:3px 6px}.tray-help{font-size:.71rem}.evidence-grid{grid-template-columns:1fr}}

.shake-progress{margin-top:9px;color:#245f83!important;font-weight:750;font-size:.84rem!important}

.shake-handle{position:absolute;top:8%;bottom:15%;left:39%;right:39%;z-index:3;cursor:ns-resize;touch-action:none;user-select:none}
.shake-handle:active{cursor:grabbing}.scene{user-select:none;-webkit-user-drag:none}

.result-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.result-thumb{display:block;min-width:0;width:100%;padding:0;overflow:hidden;background:#f8fcff;border:1px solid #a4c9e2;border-radius:11px;color:#17476b;text-align:left;font-size:.89rem;font-weight:750;box-shadow:0 4px 13px #3a678014}
.result-thumb:hover{border-color:#4186b1;background:#e8f6ff}.result-picture{display:block;width:100%;height:auto;aspect-ratio:4/3;background:#203e54}.result-thumb>span{display:block;padding:7px 8px;line-height:1.3}.result-thumb b{color:#1c739f;font-size:.76em;margin-right:3px}
.result-dialog{box-sizing:border-box;width:min(870px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 28px);padding:0;margin:auto;overflow:auto;border:1px solid #93c0df;border-radius:18px;background:#f5fbff;color:#143752;box-shadow:0 20px 90px #142e46a0}
.result-dialog::backdrop{background:#14344ac9}.result-dialog-head,.result-dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:#edf8ff;z-index:1}.result-dialog-head{position:sticky;top:0;border-bottom:1px solid #c1d9eb}.result-dialog-head h2{margin:3px 0 0}.result-close{padding:0;min-width:36px;font-size:1.4rem;line-height:1}
.result-dialog-body{padding:14px 18px}.result-zoom{width:min(100%,430px);margin:0 auto 12px;border-radius:11px;overflow:hidden;border:1px solid #7da9c8}.result-description{max-width:52ch;margin:0 auto;text-align:center}
.result-dialog-actions{position:sticky;bottom:0;justify-content:flex-end;border-top:1px solid #c1d9eb}.result-dialog-actions .button{min-height:42px}.lab-tool svg{width:38px;height:35px}
@media(max-width:500px){.result-gallery{gap:5px}.result-thumb>span{font-size:.69rem;padding:5px}.result-thumb b{margin-right:1px}.result-dialog{width:calc(100% - 16px)}.result-dialog-head,.result-dialog-actions{padding:9px 10px}.result-dialog-body{padding:10px}.result-zoom{width:min(100%,330px)}.lab-tool{font-size:.69rem}.lab-tool svg{width:25px;height:25px}}

/* Physical objects share a slate work surface beneath the macro shot. */
.work-area{position:relative}
.work-area .scene{aspect-ratio:4/3}
.worktray{padding:10px 14px 9px;border-color:#52738a;background:linear-gradient(180deg,#19354a55,#162b3fbd),url("assets/glass.webp") left bottom/650% auto;color:#eff9ff}
.worktray .eyebrow{color:#c1ddeb;font-size:.62rem}
.lab-tools{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,26px);margin-top:1px}
.lab-tool{position:relative;display:flex;flex:0 1 130px;min-width:0;min-height:100px;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;padding:2px 4px;border:0;border-radius:6px;background:transparent;color:#f3f9ff;text-align:center;cursor:grab;line-height:1.2}
.lab-tool:hover,.lab-tool[aria-pressed=true]{background:transparent}
.lab-tool:focus-visible{outline:2px solid #b8eaff;outline-offset:1px}
.lab-tool:active{cursor:grabbing}
.object-art,.paper-stack{position:relative;display:block;filter:drop-shadow(1px 7px 5px #091925a0);transition:filter .18s,transform .18s}
.lab-tool:hover .object-art,.lab-tool:hover .paper-stack,.lab-tool[aria-pressed=true] .object-art{transform:translateY(-4px);filter:drop-shadow(0 0 7px #b8eaffbc)}
.lab-tool .object-art svg,.lab-ghost .object-art svg{display:block;width:70px;height:73px;overflow:hidden}
.lab-tool .object-forceps,.lab-ghost .object-forceps{transform:rotate(56deg);transform-origin:center}
.lab-tool:hover .object-forceps,.lab-tool[aria-pressed=true] .object-forceps{transform:translateY(-4px) rotate(56deg)}
.lab-tool .object-forceps svg,.lab-ghost .object-forceps svg{width:10px;height:83px}
.object-art b{position:absolute;bottom:25%;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:2px;background:#e9f5fa;color:#142f43;font-size:.9rem;font-weight:850;box-shadow:1px 2px 3px #0f273785}
.lab-tool[data-lab-source="sample-A"] .object-beaker svg{filter:sepia(.29)}
.object-label{min-height:1.15em;font-size:clamp(.68rem,1.7vw,.8rem);font-weight:750;line-height:1.2;text-shadow:0 1px 2px #0a1720}
.bench-paper{cursor:crosshair}
.paper-stack{padding:11px 13px 9px;margin-bottom:7px;border-radius:3px;background:linear-gradient(145deg,#f5f3ef,#cacbca);box-shadow:inset 0 0 2px #8498a0}
.lab-tool .paper-stack svg{display:block;width:12px;height:47px;transform:rotate(-13deg);filter:drop-shadow(2px 2px 1px #183b5150)}
.scene [data-lab-target]{cursor:crosshair;outline:none}
.scene [data-lab-target]:hover rect,.scene [data-lab-target]:focus-visible rect,.dragging .scene [data-lab-target] rect{fill-opacity:.16;stroke-opacity:1}
.lab-ghost{background:none;border:0;box-shadow:none;padding:0}
.lab-ghost .object-art{filter:drop-shadow(0 4px 8px #10243895)}
.shake-handle{cursor:grab}
.keyboard-shake:not(:focus){position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.scene-clock{position:absolute;top:10px;right:11px;margin:0;z-index:2;background:#0f3049;color:#eff9ff;box-shadow:0 2px 6px #0b263b70}
.evidence-grid .acid-card{background:#fff0f3;border-color:#e5b2c0}
.evidence-grid .acid-card h4 b{background:#9b3c59}
.evidence-grid .layers-card{background:#fff7e7;border-color:#e5c795}
.evidence-grid .layers-card h4 b{background:#855414}
.victory-banner{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:12px;padding:5px 14px 5px 8px;margin:0 0 12px;border:1px solid #e9c786;border-radius:12px;background:linear-gradient(112deg,#fff1cd,#f7fbff 76%);color:#533f37}
.victory-star{display:block;width:100%;overflow:visible}
.victory-banner strong{display:block;color:#173e60;font-size:clamp(1rem,2.4vw,1.3rem);line-height:1.18}
.victory-banner p{margin-top:3px;font-size:.86rem;line-height:1.3}
.victory-score{padding:4px 10px;border-radius:20px;background:#ffedb3;color:#63410b;font-weight:850;white-space:nowrap}
.victory-mascot{transform-origin:50px 61px;animation:star-hop .95s ease-out both}
.victory-wand{transform-origin:79px 64px;animation:wand-wave 1.05s ease-in-out both}
.victory-sparkles{color:#ba7c20;transform-origin:60px 44px;animation:sparkle-burst 1s ease-out both}
@keyframes star-hop{0%{transform:translateY(4px) scale(.83,.9)}32%{transform:translateY(-9px) rotate(-9deg)}64%{transform:translateY(2px) rotate(5deg)}100%{transform:none}}
@keyframes wand-wave{0%,100%{transform:none}25%{transform:rotate(-21deg)}50%{transform:rotate(13deg)}72%{transform:rotate(-8deg)}}
@keyframes sparkle-burst{0%{opacity:0;transform:scale(.72)}48%{opacity:1;transform:scale(1.12)}100%{opacity:.76;transform:none}}
@media(max-width:500px){.victory-banner{grid-template-columns:62px minmax(0,1fr) auto;gap:6px;padding-inline:5px 8px}.victory-banner p{font-size:.76rem}.victory-score{font-size:.8rem;padding-inline:7px}}
@media(prefers-reduced-motion:reduce){.victory-mascot,.victory-wand,.victory-sparkles{animation:none}}
@media(min-width:851px){
  .bench{grid-template-columns:minmax(0,clamp(420px,calc((100svh - 332px) * 1.333),740px)) minmax(285px,400px);justify-content:center}
}
@media(max-width:500px){
  .top-actions button{font-size:.67rem;padding-inline:5px}
  .lab-tool{min-height:91px}
  .lab-tool .object-art svg{width:61px;height:65px}
  .lab-tool .object-forceps svg{width:8px;height:71px}
  .scene-clock{top:6px;right:7px;font-size:.82rem}
}
@media(max-width:360px){.brand img{width:60px}.topbar{padding-inline:7px}}

.intro-copy .mission-label{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;background:#fff0ce;color:#77460d;letter-spacing:.11em}
.mission-label span{color:#9c5e13;font-size:1.2em}
.mission-start{box-shadow:0 4px 0 #0e4369,0 8px 16px #1648752b}
.mission-start:active{transform:translateY(2px);box-shadow:0 2px 0 #0e4369}
.stagebar .active .number,.stagebar .done .number{display:grid;place-items:center;flex:none;min-width:1.5em;height:1.5em;border-radius:50%;background:#fff0ce;color:#784b16}
.stagebar .done .number{background:#c9f0dd;color:#176047}
.side .lab-praise{display:flex;align-items:center;gap:7px;width:fit-content;margin:0 0 10px;padding:5px 11px 5px 6px;border:1px solid #a5dfc1;border-radius:99px;background:#e2faed;color:#15533a;font-weight:800;animation:praise-pop .46s cubic-bezier(.22,1.48,.43,1) both}
.lab-praise b{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#167257;color:#fff;font-size:.76rem}
.lab-praise span{color:#a45f10}
@keyframes praise-pop{from{opacity:0;transform:translateY(5px) scale(.9)}to{opacity:1;transform:none}}
.speaker-button:enabled,#voice{cursor:pointer}
.speaker-button:enabled:hover,#voice:hover{background:#d8efff;border-color:#3788b6;box-shadow:0 2px 7px #1c669633}
.scene-clock span{font-size:.7em;color:#c4e5ff;margin-right:3px}

.solved-mark{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:20px;background:#fff0ce;color:#714a15;letter-spacing:0;text-transform:none}
.ion-explanation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;margin:0 0 14px;align-items:start}
.ion-photo{width:100%;margin:0;background:#eff7fc}
.ion-photo .result-picture{aspect-ratio:914/575}
.ion-photo figcaption{padding:7px 10px;color:#244764;font-size:.83rem}
.ion-photo figcaption b{color:#8a3452}
.ion-panel{padding:11px 13px;border:1px solid #bdd6eb;border-radius:11px;background:#edf7ff}
.ion-panel h3{margin:3px 0 0;color:#153c5c}
.ion-stage{display:block;width:100%;height:auto;overflow:visible;font:700 15px LabUI,system-ui,sans-serif;text-anchor:middle}
.acid-field{fill:#fff0f4;stroke:#e6b5c5}.water-field{fill:#f7fcff;stroke:#a9cce6}
.ion-formula{font-size:22px;fill:#1a4667}.ion-name{fill:#355a76}
.ion-bond{stroke:#ad4c6c;stroke-width:2;stroke-linecap:round}
.ethanoate .ion-formula{fill:#963653}
.proton-token circle{fill:#b24d70}.proton-token text{fill:#fff}
.ion-before,.proton-token,.proton-after{opacity:0}
.ion-equation{color:#143f63;font-size:clamp(.82rem,2vw,1.06rem);font-weight:800;white-space:nowrap}
.ion-detail{margin-top:5px;font-size:.82rem;line-height:1.4}
.ion-replay{min-height:34px;margin-top:8px;padding:4px 9px;font-size:.8rem}
.is-playing .acid-before,.is-playing .proton-before{animation:acid-reacts 5s both}
.is-playing .water-before{animation:water-reacts 5s both}
.is-playing .ethanoate,.is-playing .proton-after{animation:ethanoate-forms 5s both}
.is-playing .hydronium{animation:hydronium-forms 5s both}
.is-playing .proton-token{animation:proton-transfer 5s ease-in-out both}
.is-playing .litmus-turn{transform-box:fill-box;transform-origin:center;animation:paper-turn 1.65s .12s both}
.is-playing .litmus-wet-end{animation:wet-end 1.65s .12s both}
@keyframes acid-reacts{0%,30%{opacity:1}36%,100%{opacity:0}}
@keyframes water-reacts{0%,65%{opacity:1}71%,100%{opacity:0}}
@keyframes ethanoate-forms{0%,30%{opacity:0}36%,100%{opacity:1}}
@keyframes hydronium-forms{0%,65%{opacity:0}71%,100%{opacity:1}}
@keyframes proton-transfer{
  0%,30%{opacity:1;transform:translate(0,0)}
  50%{opacity:1;transform:translate(75px,-32px)}
  65%{opacity:1;transform:translate(153px,0)}
  71%,100%{opacity:0;transform:translate(153px,0)}
}
@keyframes paper-turn{0%,16%,100%{transform:none}49%{transform:scaleX(.08)}73%{transform:scaleX(1.08)}}
@keyframes wet-end{0%,48%{opacity:0}60%,100%{opacity:1}}
@media(max-width:580px){.ion-explanation{grid-template-columns:1fr}.ion-photo{max-width:380px}}
@media(prefers-reduced-motion:reduce){
  .lab-praise,.is-playing .litmus-turn{animation:none}
  .is-playing .proton-token{animation-name:proton-fade}
  .mission-start:active{transform:none}
}
@keyframes proton-fade{0%,65%{opacity:1}71%,100%{opacity:0}}

.intro-copy .experiment-name{margin-bottom:6px;color:#175b84;font-weight:800}
.start-form{display:grid;gap:6px;max-width:360px}
.start-form label,.topic-label,.rating-field legend{color:#153d5d;font-weight:750}
.start-form input,.result-dialog textarea{width:100%;padding:10px 12px;border:1px solid #86b3d0;border-radius:9px;background:#fff;color:#183e5b;font:inherit}
.start-form .mission-start{margin-top:3px;justify-self:start}
.evidence-context{margin-bottom:8px;font-size:.82rem}
.rating-field{margin:0 0 20px;padding:0;border:0}
.stars,.rating-scale{display:flex;gap:6px;max-width:335px}
.stars label{position:relative;display:grid;place-items:center;flex:1;min-height:52px;cursor:pointer}
.stars input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.stars label span{display:grid;place-items:center;width:100%;height:100%;min-height:52px;border:1px solid #b8d6e8;border-radius:9px;background:#e9f5ff;color:#597c98;font-size:1.65rem}
.stars label:has(input:checked) span,.stars label:has(~ label input:checked) span,.stars label:hover span{background:#fff0c9;border-color:#dda749;color:#8b5613}
.stars input:focus-visible+span,.start-form input:focus-visible{outline:2px solid #2a80b6;outline-offset:2px}
.rating-scale{justify-content:space-between;margin-top:4px;color:#4a6981;font-size:.78rem}
.topic-label{display:block;margin-bottom:6px}
.topic-label span{font-weight:400}
.feedback-save-status{margin-top:4px;color:#8e2a3c}
