/* JUNIOR SCIENCE LAB / OFFLINE UI DESIGN SYSTEM */
:root{color-scheme:dark;--bg:#081321;--side:#0b192a;--panel:#102136;--panel2:#132940;--panel3:#172e47;--line:#253a4e;--line2:#31516c;--text:#eaf6ff;--muted:#9ab0c6;--weak:#7891a8;--cyan:#5cd9e5;--mint:#6ce6ba;--gold:#f6c77a;--red:#ff8e91;--blue:#79a8ff;--shadow:0 14px 50px rgba(0,0,0,.17);font-family:Segoe UI,Arial,Helvetica,sans-serif;font-size:15px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);line-height:1.55}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 50% 33% at 70% 0%,rgba(23,107,124,.1),transparent 75%)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.47}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.terminal-hit:focus-visible{outline:3px solid var(--gold);outline-offset:3px}h1,h2,h3,h4,p{margin:0}h1{font-size:clamp(29px,3.2vw,42px);line-height:1.18;letter-spacing:-.9px}h2{font-size:clamp(19px,2vw,25px);letter-spacing:-.35px}h3{font-size:18px;line-height:1.35}p{color:var(--muted)}small{font-size:12px}svg{max-width:100%}
.app-shell{min-height:100vh;display:flex}.sidebar{width:251px;background:linear-gradient(180deg,#0a1b2d 0%,#0b1829 90%);border-right:1px solid var(--line);padding:29px 15px 20px;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;z-index:10}.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 33px}.brand-mark{color:var(--mint);width:44px;height:44px;display:block}.brand-copy strong{display:block;font-size:19px;letter-spacing:.1px;font-weight:850;line-height:1.1}.brand-copy strong span,.mobile-brand span{color:var(--mint)}.brand-copy small{font-size:8px;letter-spacing:2.1px;color:#7fabb7;font-weight:800}.sidebar-label{font-size:10px;color:#647f9a;padding:10px 18px;letter-spacing:2.2px;font-weight:800}.second-label{margin-top:23px}.nav-list{display:flex;flex-direction:column;gap:4px}.nav-list a{padding:12px 17px;display:flex;align-items:center;gap:16px;border-radius:11px;color:#a7bbd0;font-size:13px;font-weight:650;min-height:46px;border:1px solid transparent;transition:.2s}.nav-list a:hover{background:#152b42;color:#eff9fe}.nav-list a.active{background:linear-gradient(90deg,rgba(72,183,200,.18),rgba(40,87,107,.14));border-color:rgba(65,192,197,.19);color:#7ee9db}.nav-symbol{font-size:24px;width:23px;line-height:1;text-align:center;font-weight:600}.sidebar-bottom{margin-top:auto;border:1px solid var(--line);border-radius:14px;padding:17px 16px;background:rgba(21,47,65,.45)}.demo-icon{color:var(--mint);font-size:10px;letter-spacing:1px;font-weight:900}.demo-icon span{padding-left:4px}.sidebar-bottom p{font-size:12px;margin:9px 0;color:#8ba9bd;line-height:1.6}.sidebar-help{border:0;background:transparent;color:var(--cyan);font-size:12px;padding:8px 0 0;font-weight:750}.app-main{flex:1;min-width:0}.topbar{height:83px;border-bottom:1px solid var(--line);padding:0 clamp(20px,3.2vw,48px);display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(10,23,37,.75);position:sticky;top:0;z-index:6;backdrop-filter:blur(14px)}.topbar-breadcrumb{font-size:10px;letter-spacing:1.1px;color:#728da4;font-weight:850}.topbar-breadcrumb strong{color:#d2e5f5;font-weight:850}.topbar-right,.top-stats,.user-pill{display:flex;align-items:center;gap:18px}.online-pill{color:#8ac9ba;font-size:10px;font-weight:800;letter-spacing:.5px;display:flex;align-items:center;gap:6px;white-space:nowrap}.online-dot{background:#59dbab;width:7px;height:7px;display:block;border-radius:100%;box-shadow:0 0 11px #49c9a5}.top-stats{color:#e4c68c;font-weight:800;font-size:12px;gap:16px;white-space:nowrap}.top-stats span+span{color:#91c8ea}.user-pill{gap:8px;color:#c7d7e9;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 6px;white-space:nowrap}.user-avatar{background:#21475d;color:#9bf1e2;padding:8px;border-radius:50%;font-size:10px;font-weight:900}.mobile-brand{display:none}.page{max-width:1600px;margin:0 auto;padding:38px clamp(20px,3.2vw,48px) 70px;min-height:calc(100vh - 144px)}.footer{max-width:1600px;margin:0 auto;border-top:1px solid var(--line);padding:19px clamp(20px,3.2vw,48px);display:flex;justify-content:space-between;gap:12px;color:#67829b;font-size:11px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:850;color:#76c9c9}.btn{border:1px solid transparent;min-height:44px;display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:10px 18px;border-radius:10px;font-weight:750;font-size:13px;transition:background .15s,transform .15s,border .15s;line-height:1.2}.btn:active:not(:disabled){transform:scale(.985)}.btn-primary{background:linear-gradient(125deg,#5ce1d3,#64c9e4);color:#0a2438;box-shadow:0 7px 24px rgba(79,222,205,.14)}.btn-primary:hover:not(:disabled){background:linear-gradient(125deg,#9af7e0,#88d9eb)}.btn-outline{background:#183047;color:#d0e7f0;border:1px solid #38566d}.btn-outline:hover:not(:disabled){border-color:#62b8c1;background:#24445a}.btn-ghost{color:#d3e5f4;background:transparent}.btn-ghost:hover{color:var(--mint)}.btn-large{min-height:51px;padding:13px 23px}.btn-small{min-height:38px;padding:8px 11px;font-size:11px}.btn-danger{background:#a6394a;color:white}.btn-danger-outline{color:#ffb2b5;border-color:#7d4950;background:#35252f}.text-link{color:var(--mint);font-weight:750;font-size:12px}.muted-paragraph{margin:12px 0 20px}
/* HOME */
.hero{min-height:454px;display:grid;grid-template-columns:1.07fr .93fr;align-items:center;gap:14px;border:1px solid #244358;border-radius:20px;background:radial-gradient(circle at 84% 37%,rgba(27,141,152,.2),transparent 35%),linear-gradient(120deg,#10283b,#102032 66%,#122d3d);position:relative;overflow:hidden;padding:42px clamp(26px,4vw,55px)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#3c7a9011 1px,transparent 1px),linear-gradient(90deg,#3c7a9011 1px,transparent 1px);background-size:35px 35px;pointer-events:none}.hero-copy,.hero-art{z-index:1;position:relative}.hero-kicker{display:inline-flex;align-items:center;gap:8px;color:#a9e7df;font-weight:850;letter-spacing:1.8px;font-size:10px;margin-bottom:22px}.sparkle{color:var(--gold);font-size:21px}.hero h1{font-size:clamp(33px,4.4vw,56px);letter-spacing:-1.4px;line-height:1.13;max-width:690px}.hero h1 span{background:linear-gradient(110deg,#70e9c7,#71d8ef);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-copy>p{max-width:550px;line-height:1.85;font-size:14px;margin:23px 0 25px}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.hero-features{display:flex;flex-wrap:wrap;gap:17px;font-size:11px;margin-top:28px;color:#95c7c6;font-weight:700}.hero-art{min-height:330px;display:grid;place-items:center}.hero-art svg{max-width:430px;width:100%;filter:drop-shadow(0 14px 26px #0003)}.orbit-ring{position:absolute;left:13%;top:17%;width:70%;height:65%;border:1px solid #20657a55;border-radius:50%;box-shadow:0 0 35px #246d7440}.floating-note{position:absolute;border:1px solid #2e6072;background:#132e42dd;backdrop-filter:blur(10px);padding:10px 13px;border-radius:12px;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow)}.floating-note>span{display:grid;place-items:center;width:35px;height:35px;background:#214f5e;border-radius:9px;color:#88efd8;font-size:22px}.floating-note strong,.floating-note small{display:block}.floating-note strong{font-size:10px;letter-spacing:1px}.floating-note small{color:#86acbd;font-size:9px}.note-left{top:40%;left:2%}.note-right{bottom:7%;right:0}.welcome-strip{margin:20px 0 43px;display:flex;align-items:center;gap:17px;border:1px solid #284c4b;border-radius:13px;background:linear-gradient(90deg,#12312f,#12263a);padding:16px 22px}.welcome-icon{color:#77f4be;font-size:29px}.welcome-strip>div:nth-child(2){flex:1}.welcome-strip strong{font-size:13px}.welcome-strip p{font-size:11px;margin-top:3px}.section{margin:42px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:21px}.section-heading h2{margin-top:7px}.section-heading p{font-size:12px;margin-top:7px}.section-subline{font-size:12px;color:var(--muted)}.lab-category-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.category-card{position:relative;display:flex;gap:21px;overflow:hidden;padding:28px;border-radius:16px;min-height:204px;border:1px solid #285375;background:radial-gradient(circle at 94% 13%,#214d6e,transparent 45%),linear-gradient(145deg,#153d5c,#13273b)}.category-card.chemistry-category{background:radial-gradient(circle at 92% 12%,#2f5365,transparent 48%),linear-gradient(145deg,#1a4649,#112b39);border-color:#24665e}.category-card:hover{transform:translateY(-3px);border-color:#4acbd6}.category-icon{display:grid;place-items:center;border:1px solid #4995b1;background:#27557444;min-width:64px;height:68px;border-radius:14px;font-size:43px;color:#80ccff}.chemistry-category .category-icon{color:#78e8ca;border-color:#3a9283}.category-card>div:nth-child(2){z-index:1}.category-card h3{font-size:23px;margin:8px 0}.category-card p{font-size:12px;max-width:350px;line-height:1.6}.category-card strong{display:block;color:#85e8e0;margin-top:19px;font-size:11px;letter-spacing:1px}.category-card strong span{margin-left:7px}.category-decoration{font-size:111px;color:#8fe8ff0b;font-weight:900;position:absolute;right:-8px;bottom:-38px}.exp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.experiment-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:22px;min-height:246px;transition:.2s}.experiment-card:hover{transform:translateY(-4px);border-color:#488e9f;box-shadow:var(--shadow)}.experiment-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}.exp-icon{border-radius:12px;background:linear-gradient(135deg,#1c5370,#1b3b55);width:52px;height:52px;display:grid;place-items:center;font-size:29px;color:#8fe0ff}.exp-icon.chemistry{color:#8af4ce;background:linear-gradient(135deg,#1b5b56,#163d46)}.mini-label{font-size:10px;color:#a8bdcb;border:1px solid #3d4e66;padding:5px 9px;border-radius:999px}.mini-label.done{color:var(--mint);border-color:#427c6c}.experiment-card .eyebrow{font-size:9px;color:#87a9bd}.experiment-card h3{margin:8px 0;font-size:17px}.experiment-card p{font-size:11px;line-height:1.72;min-height:50px}.experiment-bottom{border-top:1px solid var(--line);margin-top:20px;padding-top:13px;display:flex;justify-content:space-between;font-size:10px;color:#809db3;font-weight:650}.card-link{color:var(--cyan)}.card-link b{font-size:15px}.progress-banner{display:flex;align-items:center;gap:22px;background:linear-gradient(110deg,#17443f,#123443 70%,#182e45);border:1px solid #2b655b;border-radius:16px;padding:25px 28px;margin-top:40px}.progress-banner>div:nth-child(2){flex:1}.progress-banner h3{margin:6px 0}.progress-banner p{font-size:11px}.banner-badge{font-size:32px;color:var(--gold);background:#28574a;border-radius:14px;padding:10px 20px}
/* PAGE LAYOUT */
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:29px}.page-heading .eyebrow{margin-bottom:9px;display:block}.page-heading p{font-size:12px;margin-top:11px;max-width:780px;line-height:1.7}.heading-actions{display:flex;flex-wrap:wrap;gap:10px}.lab-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:23px}.lab-picker-item{padding:12px 15px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:#112238;min-height:74px;transition:.18s}.lab-picker-item:hover{background:#1c3650}.lab-picker-item.active{border-color:#55bfb5;background:linear-gradient(115deg,#1a4649,#142e42);box-shadow:inset 3px 0 var(--mint)}.lab-picker-icon{font-size:29px;color:var(--mint);width:39px;text-align:center}.lab-picker-item small,.lab-picker-item strong{display:block}.lab-picker-item small{font-size:9px;color:#81a8b4}.lab-picker-item strong{font-size:12px;line-height:1.4;margin-top:4px}.lab-intro{border:1px solid #315370;background:radial-gradient(circle at 96% 15%,#2a597533,transparent 25%),linear-gradient(130deg,#1a3d55,#13283b);padding:24px 29px;border-radius:15px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}.lab-intro h2{margin:8px 0}.lab-intro p{font-size:12px;max-width:730px;line-height:1.6}.lab-chips{display:flex;gap:13px;flex-wrap:wrap;margin-top:13px;color:#a7cddd;font-size:10px}.lab-chips span{background:#213d52;border-radius:50px;padding:5px 10px}.lab-step-bubble{width:70px;height:70px;background:#1e5261;border-radius:18px;display:grid;place-items:center;font-size:44px;color:var(--mint)}.lab-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.72fr);gap:19px;align-items:stretch}.bench-surface,.control-panel,.panel,.quiz-card{background:#112338;border:1px solid var(--line);border-radius:16px}.bench-surface{padding:19px 20px;min-width:0}.bench-header,.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.bench-header h3{margin-top:5px}.chip{font-size:10px;padding:6px 10px;border:1px solid #436078;color:#aec5d6;border-radius:50px;white-space:nowrap}.chip-ok{color:#82edcb;border-color:#327d68;background:#1b403b}.chip-idle{color:#bed0dd}.dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:var(--mint);margin-right:6px}.circuit-wrap{background:#0c1b2c;border:1px solid #214259;border-radius:13px;margin-top:16px;overflow:hidden}.circuit-svg{width:100%;display:block;touch-action:manipulation;user-select:none}.svg-caption{font-size:12px;fill:#78adb9;letter-spacing:2px;font-weight:700}.svg-label{fill:#d7edf7;font-size:15px;font-weight:650}.svg-footer{fill:#83abbc;font-size:12px}.device-stem{stroke:#a3c1d2;stroke-width:6;fill:none}.component-body{fill:#19425b;stroke:#569cb2;stroke-width:3}.terminal{fill:#67e3c4;stroke:#e7fff8;stroke-width:3;transition:.12s}.terminal-selected{fill:#ffd280;stroke:#fff7db;filter:drop-shadow(0 0 6px #fac477)}.terminal-hit{cursor:crosshair;fill:transparent;outline:none}.terminal-hit:hover+.terminal-label{fill:#fff}.terminal-label{font-size:12px;fill:#97c8d4;font-weight:700}.wire-wire{stroke:#81bbc9;stroke-width:6;stroke-linecap:round;pointer-events:none}.wire-live{stroke:#67e3c4}.wire-alert{stroke:#fc868c;stroke-dasharray:8 5}.wire-hit{stroke:transparent;stroke-width:28;stroke-linecap:round;cursor:pointer}.bench-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.science-message{display:flex;align-items:flex-start;gap:12px;border-radius:11px;padding:13px 15px;font-size:11px;line-height:1.65;margin-top:16px;border:1px solid #36556f;background:#1a3349;color:#bcd8e8}.science-message p{color:inherit;font-size:12px;line-height:1.7}.science-message-icon{font-weight:900;border-radius:50%;width:22px;min-width:22px;height:22px;display:grid;place-items:center;background:#2c5669;color:#e5f9fe}.science-message.success{background:#183b38;border-color:#2d6456;color:#b9f2da}.science-message.success .science-message-icon{background:#367a5d}.science-message.danger{background:#412b36;border-color:#774554;color:#ffd4d4}.science-message.danger .science-message-icon{background:#854656}.control-panel{padding:21px 22px}.control-section+.control-section{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.control-section h3{margin:6px 0 18px}.range-field{display:block;margin:18px 0}.range-field>span{display:flex;justify-content:space-between;gap:7px;font-size:12px;color:#b7cddd}.range-field strong{color:#ddf7f7;white-space:nowrap}.range-field input{accent-color:#65dace;cursor:pointer;width:100%;margin:12px 0 3px;height:19px}.field-label{display:block;color:#bdd2e1;font-size:12px;margin:15px 0 8px}select{display:block;width:100%;min-height:43px;color:#e7f6ff;border:1px solid #45637a;border-radius:8px;background:#1c3a50;padding:8px 10px}.toggle-label{display:flex;align-items:center;gap:10px;font-size:12px;color:#d4e9f1;min-height:40px;margin-top:15px}.toggle-label input{accent-color:var(--mint);width:19px;height:19px}.metric-readout{display:grid;gap:10px;margin-top:14px}.metric-readout>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;background:#0b1d30;border:1px solid #223c55;border-radius:9px}.metric-readout small{color:#93b3c9;font-size:10px}.metric-readout strong{font-size:19px;color:#a3f1e5;white-space:nowrap}.metric-readout em{font-size:11px;color:#84b9c6;font-style:normal}.panel-hint{background:#172d3e;border-radius:10px;padding:14px;border:1px solid #30536b}.panel-hint strong{font-size:12px;color:#bce4db}.panel-hint p{font-size:11px;line-height:1.65;margin-top:9px}.panel-hint small{display:block;color:#7fa4bd;margin-top:10px;line-height:1.5}.lab-lower{display:grid;grid-template-columns:minmax(270px,.68fr) minmax(0,1fr);gap:18px;margin-top:20px;align-items:stretch}.panel{padding:22px}.panel-title h2{font-size:18px}.small-note{font-size:10px;color:#8ca8b9;line-height:1.5}.steps-list{padding:0 0 0 26px;counter-reset:step;margin:22px 0 19px}.steps-list li{font-size:12px;color:#b9d2df;margin:12px 0;line-height:1.65;padding-left:7px}.steps-list li::marker{color:#79e4d0;font-weight:bold}.tool-list{border-top:1px solid var(--line);padding-top:20px}.tool-list>div{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.tool-list span:not(.eyebrow){color:#a7c8d6;background:#19364d;border-radius:6px;padding:6px 9px;font-size:10px}.quiz-card{padding:23px}.quiz-header{display:flex;align-items:center;justify-content:space-between}.quiz-step{color:var(--cyan);font-size:10px;letter-spacing:1.4px;font-weight:900}.quiz-heading{display:flex;align-items:center;gap:14px;margin:17px 0}.quiz-ico,.quiz-mark{display:grid;place-items:center;width:47px;height:47px;border-radius:11px;background:#194959;font-size:23px;color:var(--mint);font-weight:900;flex-shrink:0}.quiz-heading h3{font-size:17px}.quiz-heading p{font-size:11px;margin-top:4px}.quiz-question>strong{font-size:13px;display:block;margin:18px 0 13px;color:#e8f5f9}.answers{display:grid;gap:8px}.answer-option{display:flex;text-align:left;align-items:center;gap:12px;min-height:47px;padding:8px 12px;border:1px solid #3b566c;background:#192e42;border-radius:9px;color:#d1e4f0;font-size:12px}.answer-option:hover:not(:disabled){border-color:#6bd9cc;background:#1d3a4b}.answer-option.answer-right{border-color:#5bd3ab;background:#1b463c}.answer-option.answer-wrong{border-color:#d67c89;background:#513343}.choice-letter{display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#284961;color:#add4df;flex-shrink:0;font-size:11px;font-weight:850}.btn-complete{margin-top:16px;width:100%}.quiz-done{display:flex;align-items:flex-start;gap:17px;border-color:#3c846e;background:linear-gradient(135deg,#153e3b,#14283b)}.quiz-done .quiz-mark{background:#225e4a}.quiz-body h3{font-size:20px;margin:6px 0}.quiz-body p{font-size:12px;margin:8px 0 14px}.rewards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.rewards span{color:#fbe1a0;font-weight:800;border:1px solid #82684c;border-radius:20px;padding:6px 12px;font-size:12px}.text-success{color:#83e6c8!important}.caution-strip{margin-top:18px;border:1px solid #6a573b;border-radius:10px;padding:13px 17px;background:#292a2e;display:flex;gap:15px;align-items:center;font-size:11px;color:#bdad9b}.caution-strip strong{color:#f6ca8c;white-space:nowrap}
/* CHEMISTRY */
.formula-strip{margin-top:15px;padding:11px;background:#1c3649;border:1px solid #32546b;border-radius:8px;color:#bfeee6;font-size:13px;text-align:center;letter-spacing:.2px;font-weight:700}.chem-workspace{display:grid;grid-template-columns:172px minmax(0,1fr);gap:13px;margin-top:15px;min-height:357px}.reagent-shelf{background:#0c2034;border:1px solid #2b435a;border-radius:11px;padding:13px;min-width:0}.tiny-muted{font-size:10px;line-height:1.6;margin:8px 0 17px}.reagent-card{display:flex;align-items:center;gap:9px;border-radius:10px;padding:9px 6px;margin-bottom:12px;border:1px solid #3a5e77;background:#173449;min-height:77px;cursor:grab;transition:.15s}.reagent-card:hover,.reagent-selected{border-color:#72d7db;background:#20485a}.reagent-added{border-color:#497b67}.reagent-vial{width:30px;min-width:30px;height:49px;position:relative;border:3px solid #9dd2dd;border-top-width:6px;border-radius:2px 2px 8px 8px;background:linear-gradient(180deg,transparent 34%,var(--liquid) 34%);transform:scale(.79)}.reagent-vial span{position:absolute;left:3px;right:3px;bottom:10px;border-top:1px solid #fff8}.reagent-card strong,.reagent-card small{display:block;overflow-wrap:anywhere}.reagent-card strong{font-size:11px}.reagent-card small{font-size:9px;color:#9bb5c8}.reagent-check{margin-left:auto;color:var(--mint);font-size:15px}.beaker-zone{position:relative;background:radial-gradient(circle at 51% 45%,#17475b,#0a1c2f 67%);border:2px dashed #31596c;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:8px;min-width:0;touch-action:manipulation}.beaker-zone:hover{border-color:#66d6d0}.beaker-zone:focus-visible{outline:3px solid var(--gold)}.beaker-background{position:absolute;inset:0;background-image:linear-gradient(#9ebbc507 1px,transparent 1px),linear-gradient(90deg,#9ebbc507 1px,transparent 1px);background-size:25px 25px}.beaker-scene{width:100%;z-index:1;max-width:360px}.beaker-svg{width:100%;display:block}.beaker-instruction{font-size:10px;color:#83bac7;text-align:center;z-index:1;margin-top:-5px}.solution-result{fill:#fef6ff;font-size:15px;font-weight:850}.reaction-active{filter:drop-shadow(0 0 11px #75ddca55)}.bubble{transform-box:fill-box;transform-origin:center;animation:bubbles 1.35s linear infinite}@keyframes bubbles{from{transform:translateY(0);opacity:0}25%{opacity:.85}to{transform:translateY(-85px);opacity:0}}
.density-stage{margin-top:16px;background:radial-gradient(circle at 50% 50%,#1a455b,#0b1f30 65%);border:1px solid #30506a;border-radius:13px;min-height:330px;display:grid;place-items:center}.density-stage svg{max-width:580px;width:100%}
/* MISSION, PROFILE & DASHBOARD */
.mission-banner{background:linear-gradient(120deg,#194d4c,#112a3c);border:1px solid #32766d;border-radius:16px;padding:25px 30px;display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:36px}.mission-banner p{font-size:12px;margin:8px 0 16px}.mission-orb{background:linear-gradient(135deg,#3f8974,#25536d);color:#e6d18e;border:1px solid #5d9381;border-radius:22px;width:93px;height:93px;display:grid;place-items:center;font-size:52px}.missions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.mission-card{padding:22px;border:1px solid var(--line);border-radius:14px;background:#11273a;display:flex;flex-direction:column;gap:15px;transition:.2s}.mission-card:hover{transform:translateY(-2px);border-color:#4bbcac}.mission-card.mission-complete{border-color:#33725d}.mission-status{font-size:10px;color:#96aebf}.mission-complete .mission-status{color:var(--mint)}.mission-icon{font-size:33px;width:56px;height:56px;display:grid;place-items:center;background:#215366;border-radius:13px;color:#95eada}.mission-card small{color:#8aa6b8;font-size:9px;font-weight:800;letter-spacing:1px}.mission-card h3{margin:7px 0}.mission-card p{font-size:11px;line-height:1.6;min-height:56px}.mission-reward{border-top:1px solid var(--line);padding-top:11px;display:flex;justify-content:space-between;color:#f5ce83;font-size:11px;font-weight:700;margin-top:auto}.supply-store{display:flex;gap:21px;align-items:center;margin-top:33px}.supply-illustration{font-size:38px;display:grid;place-items:center;background:#1d4956;width:75px;height:75px;border-radius:14px;flex-shrink:0}.supply-store>div:nth-child(2){flex:1}.supply-store h2{margin:6px 0 8px}.supply-store p{font-size:11px}.supply-actions{display:grid;gap:9px;min-width:230px}.content-grid.two{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin:20px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.stat-card{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.stat-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;color:var(--mint);background:#215260;font-size:24px}.stat-value{font-weight:850;font-size:30px;margin:10px 0 0;letter-spacing:-1px}.stat-label{color:#bdd3df;font-size:12px;font-weight:750}.stat-card small{color:#7c98ae}.progress-row{margin-top:19px}.progress-title{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c4d9e6;font-size:12px;margin-bottom:8px}.progress-title strong{font-size:10px;color:#89bbbc}.progress-track{border-radius:20px;height:9px;background:#263d52;overflow:hidden}.progress-track>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#51c7b4,#69d9ea);border-radius:20px;transition:width .35s}.progress-track.wide{max-width:400px}.profile-mini{display:flex;align-items:center;gap:14px;margin:20px 0}.avatar{display:grid;place-items:center;background:#254e66;border:2px solid #619fb2;color:#bdf5e8;border-radius:16px;width:56px;height:56px;font-weight:900}.profile-mini p{font-size:11px;margin-top:4px}.reading-lines p{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.reading-lines p strong{color:#cae9ea}.profile-mini+.reading-lines{margin-bottom:13px}.table-scroll{overflow:auto;max-width:100%}.data-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:11px;min-width:540px}.data-table th{background:#1a3349;color:#aac5d7;text-align:left;padding:13px 12px;font-size:10px;white-space:nowrap}.data-table td{border-bottom:1px solid #284259;padding:13px 12px;color:#bfd4df}.data-table tbody tr:hover{background:#173249}.empty-state{text-align:center;padding:48px 20px}.empty-art{font-size:56px;color:#477e90}.empty-state h3{margin:12px 0}.empty-state p{font-size:12px;max-width:450px;margin:0 auto 21px}.profile-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(125deg,#17433f,#182c43);border-color:#35766b}.avatar-large{width:90px;height:90px;font-size:25px;border-radius:20px}.profile-hero-info{flex:1}.profile-hero-info h2{margin:7px 0 4px}.profile-hero-info p{font-size:12px}.profile-hero-info .progress-track{margin:17px 0 8px}.profile-hero-info small{color:#aac7ce}.coin-display{font-weight:900;color:#ffe29d;font-size:27px;text-align:center;padding:12px 16px;background:#1d3b47;border-radius:11px}.coin-display small{display:block;font-size:10px;font-weight:500;color:#9fb9c7}.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:19px}.achievement{background:#172e42;border:1px solid #2f5065;border-radius:11px;padding:16px;text-align:center;min-height:143px}.achievement-icon{font-size:32px;color:#e8bd70}.achievement strong{display:block;margin-top:9px;font-size:11px}.achievement small{display:block;color:#9badbf;font-size:10px;margin-top:5px;line-height:1.45}.ach-locked{filter:grayscale(.7);opacity:.48}.data-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.small-notice{background:#183646;border:1px solid #2e5b6c;border-radius:9px;padding:12px 14px;color:#abcbd8;font-size:11px;line-height:1.65;margin-top:18px}
/* FEEDBACK + MODALS */
.toast-container{position:fixed;right:24px;bottom:24px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:min(430px,calc(100vw - 35px))}.toast{background:#19483f;border:1px solid #49ab8c;color:#e4fff1;border-radius:10px;padding:13px 18px;font-size:12px;box-shadow:0 12px 35px #0007;animation:toastin .22s ease}.toast.error{background:#51303b;border-color:#b66b74}.toast.info{background:#193d53;border-color:#4e8caa}.toast.leaving{opacity:0;transform:translateX(12px);transition:.3s}@keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-backdrop{position:fixed;z-index:50;inset:0;background:rgba(3,10,17,.78);backdrop-filter:blur(8px);display:grid;place-items:center;padding:15px;overflow:auto}.modal{border:1px solid #3c6771;border-radius:17px;background:#122b3f;padding:27px 29px;box-shadow:0 20px 80px #0008;max-width:560px;width:100%;max-height:90vh;overflow:auto}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.modal-close{background:#214456;border:0;border-radius:8px;color:white;width:39px;height:39px;font-size:24px}.modal h2{font-size:26px;margin-bottom:9px}.modal>p{font-size:12px;line-height:1.75}.help-steps{display:grid;gap:10px;margin:22px 0}.help-steps>div{display:flex;gap:14px;align-items:center;border:1px solid #345568;background:#19394d;border-radius:10px;padding:12px}.help-steps b{color:var(--mint);font-size:17px}.help-steps strong,.help-steps small{display:block}.help-steps strong{font-size:12px}.help-steps small{color:#9dbacd;font-size:11px;margin-top:4px}.modal>.btn{margin-top:21px;width:100%}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px}.confirm-modal{max-width:480px}.confirm-modal p{line-height:1.8}
@media(max-width:1350px){.sidebar{width:218px}.topbar{padding:0 24px}.page{padding:28px 27px 60px}.hero{padding:35px}.hero h1{font-size:clamp(32px,4vw,48px)}.lab-layout{grid-template-columns:minmax(0,1.45fr) minmax(245px,.75fr)}.chem-workspace{grid-template-columns:135px minmax(0,1fr)}.reagent-card{gap:5px;padding:6px 4px}.reagent-vial{width:25px;min-width:25px}}
@media(max-width:1080px){.sidebar{width:76px;padding:26px 8px}.brand{padding:5px 6px 29px;justify-content:center}.brand-copy,.sidebar-label,.nav-list a>span:nth-child(2),.sidebar-bottom{display:none}.nav-list a{justify-content:center;padding:9px 6px}.nav-symbol{font-size:26px}.second-label{margin-top:18px}.hero{grid-template-columns:1fr .8fr}.hero-art{min-height:260px}.floating-note{display:none}.exp-grid,.missions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-layout{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.control-section+.control-section{border:0;margin:0;padding:0}.control-panel .panel-hint{grid-column:1/-1}.range-field{margin:12px 0}.metric-readout{grid-template-columns:1fr 1fr}.chem-workspace{grid-template-columns:190px 1fr}.lab-lower{grid-template-columns:1fr 1.2fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:68px;border-top:1px solid #37586c;border-right:0;padding:6px 5px;flex-direction:row;align-items:center;justify-content:center;background:#0c2033;z-index:12}.brand,.sidebar-bottom,.sidebar-label{display:none!important}.sidebar .nav-list{display:contents}.sidebar .nav-list a{width:16.66%;min-height:56px;flex-direction:column;gap:2px;padding:5px 3px;border:0;border-radius:8px;font-size:8px}.sidebar .nav-list a>span:nth-child(2){display:block;font-size:8px;font-weight:650;white-space:nowrap}.sidebar .nav-symbol{font-size:24px}.app-main{padding-bottom:67px}.topbar{height:64px;padding:0 16px;position:sticky}.topbar-breadcrumb,.online-pill,.user-pill span:last-child{display:none}.mobile-brand{display:block;font-size:19px;font-weight:900;letter-spacing:.2px}.topbar-right{gap:11px}.top-stats{gap:9px;font-size:11px}.user-pill{padding:4px}.user-avatar{padding:7px}.page{padding:20px 14px 40px}.footer{padding:16px;font-size:10px;display:block;text-align:center}.footer span{display:block;margin:4px 0}.hero{grid-template-columns:1fr;padding:29px 23px;min-height:unset}.hero h1{font-size:39px}.hero-copy>p{font-size:13px;line-height:1.75}.hero-art{min-height:240px;margin-top:-8px}.hero-art svg{max-width:315px}.hero-features{gap:10px;font-size:10px}.welcome-strip{padding:15px;align-items:flex-start;gap:11px;margin-bottom:31px}.welcome-strip .text-link{display:none}.lab-category-grid,.exp-grid,.missions-grid,.stats-grid,.content-grid.two{grid-template-columns:1fr}.category-card{min-height:175px;padding:21px}.section{margin:34px 0}.experiment-card{min-height:210px}.experiment-card p{min-height:0}.progress-banner{padding:20px;flex-wrap:wrap}.progress-banner .btn{width:100%}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:30px}.heading-actions{width:100%}.heading-actions .btn{flex:1}.lab-picker{grid-template-columns:1fr;gap:8px}.lab-picker-item{min-height:51px;padding:8px 10px}.lab-picker-icon{font-size:21px}.lab-intro{padding:19px}.lab-step-bubble{width:45px;height:45px;font-size:29px}.lab-chips{gap:6px}.lab-chips span{font-size:9px}.bench-surface{padding:14px 12px}.control-panel{display:block;padding:18px}.control-section+.control-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.metric-readout{grid-template-columns:1fr}.lab-lower{grid-template-columns:1fr}.chem-workspace{grid-template-columns:100px minmax(0,1fr);gap:7px}.reagent-shelf{padding:7px}.reagent-vial{width:23px;min-width:23px}.reagent-card{display:block;text-align:center;padding:6px 2px}.reagent-vial{margin:0 auto 5px}.reagent-card strong{font-size:10px}.reagent-card small{font-size:8px}.reagent-check{display:block}.beaker-zone{padding:0;min-height:280px}.beaker-instruction{font-size:9px;padding:4px}.density-stage{min-height:250px}.caution-strip{align-items:flex-start;flex-direction:column;gap:7px}.supply-store{flex-direction:column;align-items:flex-start}.supply-actions{min-width:0;width:100%}.stats-grid{grid-template-columns:1fr 1fr}.stat-value{font-size:26px}.profile-hero{flex-wrap:wrap}.coin-display{width:100%}.badge-grid{grid-template-columns:1fr 1fr}.data-actions{grid-template-columns:1fr 1fr}.modal{padding:19px}.experiment-card-top{margin-bottom:13px}}
@media(max-width:395px){.sidebar .nav-list a>span:nth-child(2){font-size:7px}.top-stats{font-size:9px}.hero h1{font-size:32px}.hero-kicker{font-size:9px}.hero-actions .btn{width:100%}.hero-features{flex-direction:column;gap:5px}.category-card{gap:10px}.category-icon{min-width:50px;width:50px;height:54px;font-size:31px}.stats-grid{grid-template-columns:1fr 1fr}.lab-intro p{font-size:11px}.data-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}