@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#09131b;--panel:#101e29;--panel2:#12232e;--border:#263943;--muted:#7f94a0;--text:#eff8f9;--mint:#b9f185;--mint2:#8de37d;--orange:#ffae6f;--cyan:#7cc6d6;--radius:17px;color-scheme:dark}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,Arial,sans-serif}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible+span{outline:3px solid #b9f185;outline-offset:3px}button,select{-webkit-tap-highlight-color:transparent}svg{display:block}
.app-shell{min-height:100vh;display:grid;grid-template-columns:76px minmax(0,1fr)}.rail{background:#0e1a23;border-right:1px solid #233540;display:flex;align-items:center;flex-direction:column;gap:22px;padding:22px 12px;min-height:100vh}.brand-icon{width:47px;height:47px;display:grid;place-items:center;color:#0d231f;background:var(--mint);border-radius:13px}.brand-icon svg{width:26px;height:26px}.rail-rule{height:1px;background:#283943;width:32px;margin:4px 0}.rail-btn{width:45px;height:45px;border:0;border-radius:12px;color:#68818d;background:transparent;display:grid;place-items:center;transition:.2s}.rail-btn svg{width:24px;height:24px}.rail-btn:hover,.rail-btn.active{color:var(--mint);background:#263a35}.rail-btn.active{box-shadow:inset 3px 0 0 var(--mint)}.rail-spacer{flex:1}.rail-bottom{color:#c9d8dc;font-family:'Manrope';font-weight:800;font-size:20px}.dot{color:var(--mint)}
.main-wrap{min-width:0}.topbar{height:84px;padding:0 clamp(26px,3.25vw,60px);border-bottom:1px solid #24343f;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar-left,.topbar-right{display:flex;align-items:center;gap:20px}.brand-word{font-family:'Manrope',sans-serif;font-size:21px;font-weight:800;letter-spacing:.03em}.brand-dot{color:var(--mint)}.brand-sep{width:1px;height:27px;background:#344550}.topbar-sub{font-size:10px;color:#90a4ab;font-weight:700;letter-spacing:.17em}.live-pill{display:flex;align-items:center;gap:9px;color:#b3c6c9;font-size:10px;letter-spacing:.1em;font-weight:700;border:1px solid #29423e;border-radius:30px;padding:10px 15px;white-space:nowrap}.live-dot,.stage-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px #b9f18588}.icon-text-btn{background:none;border:0;color:#d5e3e7;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;white-space:nowrap}.icon-text-btn svg{width:20px;height:20px;color:#8fa3aa}.count-pill{min-width:23px;height:23px;border-radius:12px;background:#2b3e46;color:var(--mint);display:grid;place-items:center;font-size:11px}
.content{padding:45px clamp(26px,3.25vw,60px) 23px;max-width:1850px;margin:auto}.hero-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--mint);font-size:10px;font-weight:800;letter-spacing:.19em}.eyebrow-line{height:2px;width:21px;background:var(--mint)}h1,h2,h3,p{margin-top:0}h1{font-family:Manrope,sans-serif;font-size:clamp(30px,3.1vw,50px);line-height:1.25;letter-spacing:-.056em;margin:10px 0 13px;font-weight:800}h1 em{color:var(--mint);font-style:normal}.hero-copy{font-size:14px;color:#96a8af;margin:0}.stats{width:185px;flex-shrink:0}.stats-num{font-family:Manrope,sans-serif;font-size:33px;font-weight:800;line-height:1}.stats-num>span:first-child{color:var(--mint)}.stats-total{font-size:20px;color:#687c86}.stats-label{font-size:11px;color:#8ea4ab;margin:9px 0 12px}.progress-track{height:4px;background:#29404a;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:var(--mint);border-radius:5px;width:0;transition:width .35s}
.workspace-grid{display:grid;grid-template-columns:minmax(255px, .88fr) minmax(390px,1.42fr) minmax(275px,.96fr);align-items:start;gap:16px}.control-panel,.visual-panel,.hypothesis-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);min-width:0;overflow:hidden;box-shadow:0 14px 45px #0000000c}.panel-head{padding:25px 25px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border)}.panel-index{flex-shrink:0;width:41px;height:41px;display:grid;place-items:center;border:1px solid #4c6858;background:#273d36;border-radius:11px;color:var(--mint);font:800 13px Manrope,sans-serif}.panel-index.orange{color:var(--orange);border-color:#614b40;background:#40312b}.panel-head h2{font:800 16px Manrope,sans-serif;letter-spacing:-.025em;margin:0 0 4px}.panel-head p{font-size:11px;color:#8198a1;margin:0}.control-body,.hypothesis-body{padding:24px 25px}.section-kicker{color:#9db0b7;font-size:10px;font-weight:800;letter-spacing:.16em;display:flex;justify-content:space-between;gap:8px}.section-kicker span{color:#647f8a}.select-label{display:flex;align-items:center;gap:9px;color:#d7e6e9;font-size:12px;font-weight:700;margin:22px 0 9px}.reagent-marker{height:9px;width:9px;border-radius:3px;display:inline-block}.reagent-marker.a{background:#59c5d9}.reagent-marker.b{background:var(--mint)}.select-wrap{position:relative}.select-wrap select{width:100%;min-width:0;appearance:none;border:1px solid #344953;background:#182a35;color:#f1f8f9;border-radius:10px;height:48px;padding:0 39px 0 13px;font-size:12px;font-weight:600;outline-offset:2px}.select-wrap select:hover{border-color:#637e7a}.select-wrap svg{width:17px;height:17px;position:absolute;right:13px;top:16px;color:#8da5ad;pointer-events:none}.mix-symbol{display:flex;align-items:center;gap:16px;justify-content:center;color:#b2c7ca;font-size:18px;font-weight:700;margin:6px 0 -3px}.mix-symbol span{width:36px;height:1px;background:#29434d}.form-hint{min-height:17px;color:#91a5ac;font-size:10px;margin-top:12px}.form-hint.warning{color:var(--orange)}.divider{height:1px;background:var(--border);margin:25px 0}.preset-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}.preset-btn{width:100%;text-align:left;border:1px solid #2c414b;background:#152631;color:#b4c6cb;padding:12px 11px;display:flex;align-items:center;gap:10px;border-radius:10px;min-height:57px;transition:.18s}.preset-btn:hover{border-color:#5f807e;background:#1d333b}.preset-btn.selected{border-color:#97cf88;background:#223d39;color:#effdec;box-shadow:inset 3px 0 0 var(--mint)}.preset-num{color:#8ea9aa;font:800 10px Manrope,sans-serif}.preset-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.preset-text strong{font-size:12px;color:#e4f0f1}.preset-text small{font-size:10px;color:#7f9aa3}.preset-tick{color:var(--mint);font-size:15px}
.visual-panel{background:#0b1922}.stage-toolbar{height:63px;display:flex;justify-content:space-between;align-items:center;padding:0 21px;gap:12px;background:#101f2a;border-bottom:1px solid #28404a}.stage-label,.stage-id{font-size:10px;color:#a3b8c1;letter-spacing:.135em;font-weight:800;display:flex;align-items:center;gap:9px}.stage-id{color:#6d8993}.stage{height:525px;background:radial-gradient(ellipse at 50% 65%,#1b3440 0%,#10232e 40%,#0d1c27 75%);position:relative;overflow:hidden;isolation:isolate}.stage-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#5baab820 0%,transparent 44%);pointer-events:none}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#4163711c 1px,transparent 1px),linear-gradient(90deg,#4163711c 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent 5%,black 38%,black 80%,transparent 100%)}.stage:after{position:absolute;content:'';width:70%;height:70px;border-radius:50%;background:#07111877;filter:blur(18px);left:15%;bottom:58px;z-index:-1}.stage-corner{position:absolute;width:18px;height:18px;border-color:#6a9daa80;z-index:6}.stage-corner.tl{top:19px;left:19px;border-left:1px solid;border-top:1px solid}.stage-corner.tr{top:19px;right:19px;border-right:1px solid;border-top:1px solid}.stage-corner.bl{bottom:19px;left:19px;border-left:1px solid;border-bottom:1px solid}.stage-corner.br{bottom:19px;right:19px;border-right:1px solid;border-bottom:1px solid}.stage-bottom-left,.stage-bottom-right{position:absolute;bottom:28px;z-index:4;font:700 9px Manrope,sans-serif;letter-spacing:.13em;color:#6f96a0}.stage-bottom-left{left:33px;display:flex;align-items:center;gap:7px}.stage-bottom-right{right:33px}.crosshair{font-size:19px}.stage-intro{position:absolute;z-index:8;top:25px;left:50%;transform:translateX(-50%);color:#b9cbd0;background:#10262dcc;border:1px solid #36545e;border-radius:22px;padding:10px 15px;white-space:nowrap;display:flex;align-items:center;gap:10px;font-size:11px;box-shadow:0 10px 25px #0002}.intro-dot{width:6px;height:6px;border:1px solid #b0f08b;border-radius:50%}
.flask-unit{position:absolute;left:50%;top:45%;width:230px;height:345px;transform:translate(-50%,-36%);z-index:4}.flask-neck{height:60px;width:82px;left:74px;top:0;position:absolute;border:5px solid #a1ccd85b;border-bottom:0;border-radius:7px 7px 0 0;background:linear-gradient(90deg,#e7ffff19,transparent 28%,#ffffff0d 74%,#bee0e322);z-index:6}.flask-glass{position:absolute;left:29px;top:59px;width:173px;height:255px;overflow:hidden;border:5px solid #b6d6da8d;border-top:0;border-radius:0 0 65px 65px;background:linear-gradient(90deg,#d3f6f510,transparent 19%,#ace3eb11 82%,#daeef515);box-shadow:inset 9px 0 20px #ffffff09,inset -10px 0 20px #ffffff09,0 0 50px #98e2df0a;z-index:5}.flask-glass:before{content:'';position:absolute;top:0;left:0;right:0;height:10px;background:linear-gradient(90deg,#ffffff33,transparent 40%,#ffffff24)}.glass-reflection{position:absolute;z-index:9;top:18px;bottom:25px;left:14px;width:7px;border-radius:10px;background:#e3fbfa35;filter:blur(1px)}.glass-markings{position:absolute;z-index:10;top:70px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:22px}.glass-markings i{display:block;width:18px;height:1px;background:#c4e8e455}.glass-markings i:nth-child(even){width:10px}.flask-liquid{--fluid:#79b7cd;position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(95deg,color-mix(in srgb,var(--fluid),#10232c 22%),var(--fluid) 60%,color-mix(in srgb,var(--fluid),#163845 14%));opacity:.79;transition:background 1s,height .75s,opacity .7s;filter:saturate(1.15);border-radius:5px 5px 65px 65px}.flask-liquid::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffff15,transparent 28%,#ffffff12 78%,transparent);pointer-events:none}.liquid-surface{height:13px;position:absolute;top:-5px;left:-5%;width:110%;background:color-mix(in srgb,var(--fluid),#ddffff 40%);border-radius:50%;opacity:.74;transition:background 1s}.flask-stand{height:8px;width:185px;border-radius:50%;position:absolute;background:#41677755;bottom:13px;left:22px;box-shadow:0 2px 20px #7ad9e328}.source-vial{position:absolute;width:90px;height:154px;top:127px;z-index:5;transition:transform .9s ease}.left-vial{left:10%}.right-vial{right:10%}.vial-neck{position:absolute;left:28px;top:0;width:34px;height:34px;border:3px solid #9abac36b;border-bottom:0;border-radius:5px 5px 0 0;background:#d2f4f10d}.vial-body{position:absolute;top:30px;left:13px;width:64px;height:99px;overflow:hidden;border:3px solid #a7cfd284;border-radius:9px 9px 19px 19px;background:#ecffff0a}.vial-liquid{--vial:#54b8d4;position:absolute;left:0;right:0;bottom:0;height:60%;background:var(--vial);opacity:.66;border-radius:0 0 15px 15px;transition:background .3s}.vial-liquid:before{content:'';position:absolute;top:-3px;left:0;right:0;height:6px;background:#b9f1f182;border-radius:50%}.vial-caption{position:absolute;top:138px;left:-15px;width:120px;text-align:center;font-size:12px;font-weight:700;color:#a7c6cb}.pour-trail{position:absolute;z-index:4;top:205px;opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px}.pour-trail.trail-a{left:29%;transform:rotate(32deg)}.pour-trail.trail-b{right:29%;transform:rotate(-32deg)}.pour-trail i{display:block;width:7px;height:12px;border-radius:50%;background:#9ce5e4;box-shadow:0 0 14px #9ce5e4}.pour-trail i:nth-child(2){opacity:.8}.pour-trail i:nth-child(3){opacity:.65}.pour-trail i:nth-child(4){opacity:.45}.stage.mixing .left-vial{transform:translate(28px,-28px) rotate(32deg)}.stage.mixing .right-vial{transform:translate(-28px,-28px) rotate(-32deg)}.stage.mixing .pour-trail{animation:pour .6s .3s 2 alternate ease-in-out}@keyframes pour{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.stage.reacted .flask-unit{animation:reactionGlow .7s ease}@keyframes reactionGlow{50%{filter:drop-shadow(0 0 24px #d6fff84d)}}
.bubbles,.particles,.clouds{position:absolute;inset:0;overflow:hidden;border-radius:0 0 65px 65px;pointer-events:none}.bubble{position:absolute;bottom:2%;width:var(--w);height:var(--w);left:var(--x);border-radius:50%;border:2px solid #e6ffecbf;background:#efffff20;animation:floatUp var(--speed) linear infinite;animation-delay:var(--delay)}@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:.95}90%{opacity:.95}100%{transform:translateY(-170px) scale(1.4);opacity:0}}.particle{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);background:var(--particle);border-radius:50%;box-shadow:0 0 8px var(--particle);animation:sediment var(--speed) linear infinite;animation-delay:var(--delay);opacity:.9}@keyframes sediment{0%{transform:translateY(-15px) translateX(3px);opacity:.35}30%{opacity:1}100%{transform:translateY(90px) translateX(-6px);opacity:.6}}.cloud{position:absolute;width:65px;height:65px;left:var(--x);bottom:-12px;background:var(--cloud);filter:blur(17px);border-radius:50%;animation:cloudDrift 2.5s infinite alternate ease-in-out;animation-delay:var(--delay);opacity:.85}@keyframes cloudDrift{from{transform:translate(-10px,-2px)}to{transform:translate(12px,-40px)}}.stage-footer{height:55px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2b3f4a;background:#10212c}.stage-status{display:flex;gap:9px;align-items:center;font-size:11px;color:#a8bdc3}.status-led{height:8px;width:8px;background:#83919a;border-radius:50%}.status-led.running{background:#ffd27d;box-shadow:0 0 10px #ffd27d}.status-led.done{background:var(--mint);box-shadow:0 0 10px #b9f185}.stage-zoom{font:700 9px Manrope,sans-serif;letter-spacing:.1em;color:#66808c}.stage-zoom span{color:#a5bbc0;margin-left:10px}
.hypothesis-body .section-kicker{margin-bottom:14px}.predictions{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}.prediction-option{display:flex;align-items:center;gap:10px;border:1px solid #2e444d;padding:11px 12px;border-radius:10px;color:#b6c8cb;cursor:pointer;background:#162832;font-size:12px;font-weight:600;min-height:50px;transition:.2s}.prediction-option:hover{border-color:#729287;background:#1d333b}.prediction-option:has(input:checked){border-color:#a3db8d;background:#263e38;color:#f1ffec}.prediction-option input{position:absolute;opacity:0;width:1px;height:1px}.radio-visual{height:16px;width:16px;border-radius:50%;border:1px solid #6b8791;position:relative;flex-shrink:0}.prediction-option input:checked+.radio-visual{border-color:var(--mint)}.prediction-option input:checked+.radio-visual:after{content:'';position:absolute;inset:4px;background:var(--mint);border-radius:50%}.prediction-icon{margin-left:1px;width:29px;text-align:center;font-size:23px;font-weight:400}.prediction-icon.precipitate{color:#82c5e3}.prediction-icon.gas{color:#78d2c1}.prediction-icon.color{color:#d8a6f0}.prediction-icon.none{color:#d5c17c}.start-button{width:100%;height:53px;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--mint);border:0;border-radius:10px;color:#11251e;font-size:13px;font-weight:800;margin-top:19px;transition:background .2s,transform .2s}.start-button:not(:disabled):hover{background:#cdf7a2;transform:translateY(-1px)}.start-button:disabled{background:#365248;color:#8bafa2}.start-button svg{width:19px;height:19px}.btn-arrow{margin-left:auto;margin-right:15px;font-size:18px}.start-button svg:first-child{margin-left:auto}.reset-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 5px 5px;border:0;background:transparent;color:#8ca4ab;font-size:11px}.reset-button:hover{color:white}.reset-button svg{width:16px;height:16px}.empty-note{border:1px dashed #354b55;border-radius:12px;padding:20px 14px;margin-top:27px;text-align:center;color:#6f8b96}.empty-note svg{width:25px;height:25px;margin:0 auto 9px}.empty-note p{font-size:11px;line-height:1.65;margin:0}.result-panel{margin-top:22px;border-top:1px solid #2e454b;padding-top:18px;animation:fadeIn .35s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.result-verdict{display:inline-flex;border-radius:20px;padding:7px 11px;font-size:10px;font-weight:800;background:#2a483b;color:#bef69e;margin-bottom:12px}.result-verdict.incorrect{background:#47362e;color:#ffd1a5}.result-panel h3{font:800 17px Manrope,sans-serif;margin:0 0 7px}.result-panel>p{color:#9fb5bb;font-size:12px;line-height:1.65;margin-bottom:13px}.equation-box{background:#091923;border:1px solid #2f4852;border-radius:10px;padding:14px;margin-bottom:12px}.equation-label{font-size:9px;color:#87a0a8;letter-spacing:.12em;font-weight:800;margin-bottom:9px}.equation{font-size:13px;font-weight:700;color:#d0efeb;line-height:1.9;overflow-wrap:anywhere}.equation sub{font-size:.7em}.explain{display:flex;gap:9px;color:#91a9ae;font-size:11px;line-height:1.65}.explain-icon{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid #58817e;color:var(--mint);font-size:11px}.explain p{margin:0}.result-actions{display:flex;align-items:stretch;gap:7px;margin-top:15px}.result-actions button{border-radius:8px;padding:11px 8px;font-size:10px;font-weight:700;flex:1}.save-button{color:#13251e;background:var(--mint);border:0}.save-button:disabled{opacity:.55}.next-button{color:#c9dcdc;border:1px solid #3c5157;background:#20343c}.next-button:hover{background:#304a52}
.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:30px 0 10px;color:#647e89;font:700 9px Manrope,sans-serif;letter-spacing:.11em}.footer-star{color:var(--mint)}
.safety-hint{font-size:10px;line-height:1.6;color:#94a9ac;margin:9px 0 0;padding:9px 11px;border-left:2px solid #e4ba75;background:#24312f;border-radius:0 7px 7px 0}
.rail a.rail-btn{text-decoration:none}.teacher-link{white-space:nowrap;color:#c5edb0;border:1px solid #436951;background:#233a32;border-radius:9px;padding:10px 13px;text-decoration:none;font-size:11px;font-weight:800}.teacher-link:hover{background:#365441;color:#f0ffe5}
@media(max-width:1150px){.topbar .live-pill{display:none}}
@media(max-width:720px){.topbar .teacher-link{display:none}}
.journal-dialog{width:min(630px,calc(100vw - 30px));max-height:min(80vh,850px);background:#10212b;color:#f0f8f8;border:1px solid #3b535b;border-radius:20px;padding:0;box-shadow:0 30px 100px #0009}.journal-dialog::backdrop{background:#030a10b9;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;gap:20px;padding:27px 30px;border-bottom:1px solid #2e434c}.dialog-head .section-kicker{color:var(--mint);margin-bottom:10px}.dialog-head h2{font:800 24px Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 5px}.dialog-head p{font-size:12px;color:#91a9b0;margin:0}.close-dialog{background:#253b45;color:#d7e5e8;border:0;border-radius:50%;height:32px;width:32px;font-size:24px;line-height:1}.journal-entries{padding:22px 30px;max-height:50vh;overflow-y:auto}.journal-empty{padding:35px 15px;text-align:center;color:#93abb2;font-size:13px}.journal-entry{border:1px solid #35515b;background:#182d38;border-radius:12px;margin-bottom:10px;padding:16px}.journal-entry-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:8px}.journal-entry strong{font-size:14px}.journal-entry time{font-size:10px;color:#8eaab2}.journal-entry p{font-size:11px;color:#acc2c7;margin:0 0 7px;line-height:1.5}.journal-entry .journal-equation{font-size:12px;color:#c9e9de}.dialog-actions{display:flex;gap:8px;justify-content:space-between;padding:17px 30px;border-top:1px solid #2d444d}.dialog-actions button{padding:10px 13px;border-radius:9px;font-size:12px;font-weight:700}.download-btn{border:0;background:var(--mint);color:#162820}.clear-btn{border:1px solid #5b4949;background:transparent;color:#d0a6a3}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:#bfef9e;color:#13251f;border:1px solid #f1ffd8;padding:13px 18px;border-radius:11px;box-shadow:0 12px 40px #0006;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:30;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important;height:1px!important;width:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}
@media(max-width:1350px){.workspace-grid{grid-template-columns:minmax(225px,.85fr) minmax(350px,1.28fr);gap:14px}.hypothesis-panel{grid-column:1/-1}.hypothesis-body{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;align-items:start}.hypothesis-body>.section-kicker{grid-column:1}.predictions{grid-column:1;grid-row:2/6}.start-button{grid-column:2;grid-row:2;margin:0}.reset-button{grid-column:2;grid-row:3}.empty-note,.result-panel{grid-column:2;grid-row:4/6;margin:0}.stage{height:560px}.source-vial.left-vial{left:12%}.source-vial.right-vial{right:12%}}
@media(max-width:950px){.app-shell{grid-template-columns:1fr}.rail{display:none}.topbar{height:70px;padding:0 22px}.content{padding:31px 22px}.topbar-sub{display:none}.workspace-grid{grid-template-columns:1fr}.visual-panel{grid-row:1}.control-panel{grid-row:2}.hypothesis-panel{grid-row:3}.control-body{display:block}.control-body .select-label{margin-top:14px}.control-body .divider{margin:13px 0}.preset-list{display:grid;grid-template-columns:repeat(2,1fr)}.hypothesis-body{display:block}.predictions{display:grid;grid-template-columns:1fr 1fr}.hypothesis-body .start-button{margin-top:15px}.result-panel{margin-top:20px}.empty-note{margin-top:20px}.stage{height:490px}.flask-unit{transform:translate(-50%,-40%)}.footer{margin-top:15px}}
@media(max-width:600px){.topbar{padding:0 16px}.brand-word{font-size:19px}.live-pill,.brand-sep{display:none}.icon-text-btn span:not(.count-pill){display:none}.icon-text-btn{gap:7px}.content{padding:28px 14px}.hero-row{display:block;margin-bottom:25px}.hero-copy{line-height:1.55}.stats{display:flex;align-items:center;gap:11px;width:auto;margin-top:20px}.stats-num{font-size:27px}.stats-label{margin:0}.progress-track{flex:1}.panel-head{padding:20px}.control-body,.hypothesis-body{padding:20px}.control-body{display:block}.control-body .mix-symbol{display:flex}.preset-list{grid-template-columns:1fr}.predictions{grid-template-columns:1fr}.stage{height:420px}.stage-toolbar{height:50px;padding:0 15px}.stage-label,.stage-id{font-size:8px}.flask-unit{transform:translate(-50%,-42%) scale(.78)}.source-vial{transform:scale(.72);transform-origin:top center;top:118px}.source-vial.left-vial{left:1%}.source-vial.right-vial{right:1%}.stage.mixing .left-vial{transform:scale(.72) translate(22px,-15px) rotate(30deg)}.stage.mixing .right-vial{transform:scale(.72) translate(-22px,-15px) rotate(-30deg)}.stage-intro{font-size:9px;top:15px}.stage-bottom-left,.stage-bottom-right{bottom:18px;font-size:7px}.stage-bottom-left{left:16px}.stage-bottom-right{right:16px}.stage-footer{height:47px}.footer{line-height:1.7}.dialog-head,.journal-entries,.dialog-actions{padding-left:18px;padding-right:18px}.dialog-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}