:root{--ink:#eafff9;--muted:#6e8887;--paper:#030809;--white:#0a1415;--navy:#020708;--navy2:#081516;--cyan:#35f2d0;--blue:#6384ff;--pink:#ff4db8;--acid:#c6ff4a;--line:#173132;--shadow:0 30px 90px #000a}
html{background:#020607}body{background:#030809;color:#e9f7f4;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.15;background:repeating-linear-gradient(to bottom,transparent 0 3px,#b8fff708 4px);mix-blend-mode:screen}.site-header{height:72px;background:#030809e8;border-bottom:1px solid #294647;box-shadow:0 12px 40px #0008}.site-header::after{content:"CHEMICAL LEARNING INTERFACE // 04";position:absolute;right:clamp(24px,5vw,76px);bottom:-22px;color:#35f2d04d;font:600 7px ui-monospace,SFMono-Regular,monospace;letter-spacing:.22em}.brand-mark{border:1px solid #35f2d066;border-radius:2px;background:#071213;color:var(--cyan);box-shadow:inset 0 0 16px #35f2d018,0 0 20px #35f2d014;clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,22% 100%,0 78%)}.brand-name{color:#ecfffb;text-transform:uppercase;letter-spacing:.03em;font-family:ui-monospace,SFMono-Regular,monospace}.brand-name b{color:var(--cyan)}.site-header nav a{position:relative;color:#708988;font:600 9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em}.site-header nav a::before{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:.2s}.site-header nav a:hover{color:var(--cyan)}.site-header nav a:hover::before{right:0}.open-badge{border-color:#294647;border-radius:2px;background:#081314;color:#77908f;font:600 8px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}.open-badge i{background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:systemBlink 2s steps(2) infinite}
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 72px);grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);background:#030809;padding-top:88px}.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(#35f2d008 1px,transparent 1px),linear-gradient(90deg,#35f2d008 1px,transparent 1px),radial-gradient(circle at 78% 45%,#17565138,transparent 32%),radial-gradient(circle at 35% 52%,#24365b28,transparent 40%);background-size:48px 48px,48px 48px,auto,auto}.hero::after{content:"";position:absolute;left:0;bottom:0;width:42%;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan)}.eyebrow,.kicker{color:#587170}.eyebrow span{border:1px solid #35f2d04a;border-radius:2px;background:#35f2d00b;color:var(--cyan);box-shadow:inset 0 0 14px #35f2d00c}.hero h1{color:#eafff9;text-shadow:0 0 45px #dfffff10}.hero h1 em{color:var(--cyan);filter:drop-shadow(0 0 18px #35f2d03a)}.hero-lead{color:#829695}.grade-picker{max-width:640px;border-color:#284444;background:#040b0c}.grade-choice{min-height:112px;border-color:#284444;color:#dcebe8;clip-path:polygon(0 0,90% 0,100% 14%,100% 100%,0 100%)}.grade-choice small,.grade-choice span{color:#55706f;font-family:ui-monospace,SFMono-Regular,monospace}.grade-choice strong{font-family:ui-monospace,SFMono-Regular,monospace}.grade-choice::before{content:attr(data-grade);position:absolute;right:8px;top:5px;color:#35f2d014;font:800 45px ui-monospace,SFMono-Regular,monospace}.grade-choice::after{left:0;right:0;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.grade-choice:hover,.grade-choice.active{background:linear-gradient(135deg,#0b1c1c,#071011)}.grade-choice.active strong{color:var(--cyan);text-shadow:0 0 16px #35f2d046}.button{border-radius:2px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em}.button.primary{border:1px solid var(--cyan);background:var(--cyan);color:#02100e;box-shadow:0 0 25px #35f2d023}.button.ghost{border-color:#315050;background:#081011;color:#77908e}.hero-lab{border-color:#2b5352;border-radius:4px;background:#040a0b;box-shadow:0 35px 100px #000,0 0 70px #35f2d00d;clip-path:polygon(0 0,94% 0,100% 7%,100% 100%,6% 100%,0 93%)}.lab-window-bar{border-color:#244342;background:linear-gradient(90deg,#071314,#0a1718);color:#59716f}.lab-window-bar::after{content:"///";color:#35f2d055;margin-left:auto;margin-right:13px}.particle-window{height:390px;background:radial-gradient(circle at 50% 50%,#0e3331,#061111 45%,#020607 77%)}.grid-lines{background-image:linear-gradient(#35f2d00d 1px,transparent 1px),linear-gradient(90deg,#35f2d00d 1px,transparent 1px);background-size:28px 28px}.particle-window::after{content:"";position:absolute;inset:24px;border:1px solid #35f2d014;clip-path:polygon(0 0,35% 0,35% 1px,65% 1px,65% 0,100% 0,100% 38%,calc(100% - 1px) 38%,calc(100% - 1px) 62%,100% 62%,100% 100%,65% 100%,65% calc(100% - 1px),35% calc(100% - 1px),35% 100%,0 100%,0 62%,1px 62%,1px 38%,0 38%)}.lab-metrics{border-color:#1d3534;background:#050d0e}.lab-metrics>div{border-color:#1d3534}.lab-metrics small{color:#526967}.lab-metrics strong{color:#d9fdf6;font-family:ui-monospace,SFMono-Regular,monospace}.reaction-status p{color:#6f8583}
.quick-strip{background:#060d0e;border-color:#1d3434}.quick-strip div{border-color:#1d3434}.quick-strip strong{color:var(--cyan)}.quick-strip span{color:#78908e;font:600 9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em}.section{position:relative}.section::before{content:"";position:absolute;left:clamp(24px,7vw,108px);top:60px;width:48px;height:1px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.section-heading h2,.lab-intro h2,.practice-copy h2,.closing h2{font-weight:720;color:#eafff9}.section-heading>p,.lab-intro>p:not(.kicker),.practice-copy>p:not(.kicker){color:#718684}.kicker{color:var(--cyan);font-family:ui-monospace,SFMono-Regular,monospace}.learning-path{background:#050b0c}.topic-grid{border-color:#1d3938;border-radius:3px;background:#061011;box-shadow:var(--shadow);clip-path:polygon(0 0,97% 0,100% 7%,100% 100%,3% 100%,0 93%)}.topic-card{background:#061011;border-color:#1d3938;color:#dff9f4}.topic-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#35f2d009,transparent 36%);opacity:0;transition:.25s}.topic-card:hover{background:#091718}.topic-card:hover::before{opacity:1}.topic-card .topic-index{color:#3f5c59}.topic-icon,.topic-card:nth-child(n) .topic-icon{position:relative;border:1px solid #254c49;border-radius:2px;background:#091a1a;color:var(--cyan);box-shadow:inset 0 0 20px #35f2d00d;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%)}.topic-card h3{font-family:ui-monospace,SFMono-Regular,monospace}.topic-card p{color:#637a78}.topic-card .topic-arrow{border-color:#294845;border-radius:2px;color:var(--cyan)}.topic-card:hover .topic-arrow{background:var(--cyan);border-color:var(--cyan);color:#02100e}
.explore-section{background:#020607}.explore-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 62%,#35f2d006 62% 63%,transparent 63%)}.tool-grid{gap:16px}.tool-card{position:relative;border-color:#23403f;border-radius:3px;background:#050d0e;clip-path:polygon(0 0,96% 0,100% 4%,100% 100%,4% 100%,0 96%)}.tool-card::before{content:"DATA // ACTIVE";position:absolute;right:17px;bottom:12px;color:#35f2d02b;font:600 7px ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}.tool-card header{border-color:#1c3433;background:#071112}.tool-card header h3{font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.03em}.tool-no{border-color:#31504e;border-radius:2px}.element-list{border-color:#1c3433}.element{border-color:#193332;border-radius:2px;background:#03090a;color:#76908e;clip-path:polygon(0 0,83% 0,100% 17%,100% 100%,0 100%)}.element:hover{border-color:var(--cyan);color:var(--cyan)}.element.active{background:#0b211f;border-color:var(--cyan);box-shadow:inset 0 0 26px #35f2d011,0 0 14px #35f2d00c}.element-kind{border:1px solid #35f2d036;border-radius:2px}.element-symbol strong{color:#eafff9;text-shadow:0 0 26px #35f2d01f}.reaction-tabs button{border-color:#25413f;border-radius:2px;background:#03090a}.reaction-tabs button.active{border-color:var(--cyan);background:#0a1e1c}.particle-stage{border-color:#1a3332;border-radius:2px;background:radial-gradient(circle,#0e2928,#020708 72%)}.particle-stage::after{content:"";position:absolute;inset:10px;border-left:1px solid #35f2d01f;border-bottom:1px solid #35f2d01f;pointer-events:none}
.lab-section{background:#07100f}.lab-section::after{content:"";position:absolute;right:0;top:0;width:42%;height:100%;background:repeating-linear-gradient(135deg,#35f2d005 0 1px,transparent 1px 14px);pointer-events:none}.lab-facts span,.practice-tags span{border-color:#2c4b48;border-radius:2px;background:#081312;color:#66a59e}.lab-console{position:relative;z-index:2;border:1px solid #294745;border-radius:3px;background:#050c0d;box-shadow:0 30px 90px #000b;clip-path:polygon(0 0,96% 0,100% 6%,100% 100%,4% 100%,0 94%)}.console-top{border-color:#1d3533;background:#081211;color:#5a7471}.experiment-view{background:linear-gradient(180deg,#0a1b1a,#06100f)}.experiment-view::before{background:#244944;box-shadow:0 0 20px #35f2d020}.burette{border-color:#55a89f}.burette-scale{background:repeating-linear-gradient(to bottom,transparent 0 8px,#76d9cc42 8px 9px)}.burette-liquid{background:linear-gradient(#61f4df,#149888);box-shadow:0 0 15px #35f2d04d}.tap,.tap::after{background:#477b76}.flask{border-color:#589d95;box-shadow:0 0 25px #35f2d010}.flask::before{border-color:#589d95;background:#0a1b1a}.digital-readout{border:1px solid #2a504d;border-radius:2px;background:#020908;color:var(--acid);box-shadow:inset 0 0 25px #c6ff4a09,0 0 24px #000}.digital-readout strong{text-shadow:0 0 15px #c6ff4a3b}.lab-control{border-top:1px solid #193230;background:#071110}.control-label{color:#7b908d}.control-label output{color:var(--cyan)}.lab-control p{color:#5f7773}input[type=range]{accent-color:var(--cyan)}
.practice-section{background:#030809}.quiz-card{position:relative;border-color:#243e3d;border-radius:3px;background:#071111;color:#e5f8f4;box-shadow:0 30px 90px #0008;clip-path:polygon(0 0,96% 0,100% 6%,100% 100%,0 100%)}.quiz-card::before{content:"QUESTION MODULE";position:absolute;right:24px;top:9px;color:#35f2d02d;font:600 7px ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em}.quiz-top{border-color:#1d3533;color:#526866}.answers button{border-color:#203b39;border-radius:2px;background:#050b0c;color:#b8cfcb}.answers button b{border-radius:1px;background:#10201f;color:#6a817e;font-family:ui-monospace,SFMono-Regular,monospace}.answers button:hover{border-color:var(--cyan);color:var(--cyan)}.answers button.correct{border-color:var(--cyan);background:#0a211e}.answers button.correct b{background:var(--cyan);color:#02100e}.answers button.wrong{border-color:#ff4d83;background:#200a12}.answers button.wrong b{background:#ff4d83}.feedback{border:1px solid #203836;border-radius:2px;background:#081211;color:#617a76}.feedback.success{border-color:#257968;background:#081d19;color:#70c7b9}.feedback.error{border-color:#7a263e;background:#1b0910;color:#e482a0}.quiz-reset{color:#67827e}
.video-section{background:#06100f}.video-card{border-color:#203b39;border-radius:3px;background:#050c0d;clip-path:polygon(0 0,94% 0,100% 8%,100% 100%,0 100%)}.video-art{filter:saturate(.72) contrast(1.15)}.oxygen-art{background:linear-gradient(135deg,#072b31,#169f9b)}.titration-art{background:linear-gradient(135deg,#331027,#b12a79)}.metal-art{background:linear-gradient(135deg,#172305,#71881a)}.video-art::before{border-color:#ffffff45;box-shadow:0 0 0 25px #ffffff08,0 0 0 50px #ffffff05}.video-art::after{border:1px solid #ffffff29;border-radius:3px;background:#02070742;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%)}.video-art button{border:1px solid #ffffff85;border-radius:2px;background:#04100edb;color:var(--cyan)}.video-card>div:last-child>span{color:var(--cyan)}.video-card h3{color:#dff6f2}.video-card p{color:#5f7774}.closing{position:relative;border:1px solid #35f2d051;border-radius:3px;background:linear-gradient(110deg,#0b2622,#07110f);box-shadow:inset 0 0 70px #35f2d00b;clip-path:polygon(0 0,97% 0,100% 13%,100% 100%,3% 100%,0 87%)}.closing::before{content:"READY // AWAITING INPUT";position:absolute;right:28px;top:20px;color:#35f2d047;font:600 7px ui-monospace,SFMono-Regular,monospace;letter-spacing:.17em}.light-button{background:var(--acid);color:#07100a;box-shadow:0 0 25px #c6ff4a20}footer{border-color:#1a3231;background:#020607}footer p{color:#536966}footer>span{color:#38504d}.toast{border:1px solid #35f2d04b;border-radius:2px;background:#071413;color:#dffaf5;box-shadow:0 18px 60px #000,0 0 24px #35f2d015}
@keyframes systemBlink{50%{opacity:.25}}

.open-tools{background:#040b0c}.open-tools::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,#35f2d008 50%,transparent 50.1%)}.oss-tool-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:16px}.oss-panel{border:1px solid #244240;background:#050d0e;clip-path:polygon(0 0,96% 0,100% 5%,100% 100%,4% 100%,0 95%);box-shadow:0 28px 80px #0006}.module-head{height:56px;padding:0 19px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;border-bottom:1px solid #1e3735;background:#071313;font:600 8px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}.module-head span{color:#506b67}.module-head strong{color:#b9d3ce}.module-head i{color:var(--cyan);font-style:normal}.module-head i::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.module-body{padding:25px}.module-body>label,.reagent-row label{display:grid;gap:8px;color:#58726f;font:600 8px ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em}.module-body select{width:100%;height:44px;padding:0 12px;border:1px solid #284744;border-radius:2px;outline:0;background:#020809;color:#bcd3cf;font:500 11px ui-monospace,SFMono-Regular,monospace}.module-body select:focus{border-color:var(--cyan);box-shadow:0 0 0 2px #35f2d00d}.equation-display{min-height:96px;margin:18px 0;display:flex;align-items:center;justify-content:center;border:1px solid #1e3836;background:radial-gradient(circle,#0e2825,#030909 70%);color:#effffb;font:600 clamp(17px,2vw,25px) ui-monospace,SFMono-Regular,monospace;text-shadow:0 0 14px #35f2d02b}.equation-display .coef{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-right:3px;border:1px solid #35f2d06b;color:var(--cyan);font-size:12px;vertical-align:middle}.atom-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.balance-chip{padding:9px;border:1px solid #213b38;background:#071110}.balance-chip small{display:block;color:#4e6965;font:600 7px ui-monospace,SFMono-Regular,monospace}.balance-chip strong{display:block;margin-top:4px;color:#9bc2bb;font:600 10px ui-monospace,SFMono-Regular,monospace}.balance-chip strong b{color:var(--cyan);font-weight:600}.method-note{margin-top:14px;padding:13px 15px;border-left:2px solid var(--cyan);background:#071312}.method-note small,.reaction-result small{color:var(--cyan);font:600 7px ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em}.method-note p{margin:6px 0 0;color:#718a85;font-size:10px;line-height:1.6}.module-instruction{margin:0 0 19px;color:#718885;font-size:10px;line-height:1.6}.reagent-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}.reagent-row>span{height:44px;display:grid;place-items:center;color:var(--cyan)}.analyze-button{width:100%;height:45px;margin:16px 0;border:1px solid var(--cyan);border-radius:2px;background:#35f2d010;color:var(--cyan);font:700 9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.11em}.analyze-button:hover{background:var(--cyan);color:#03100e;box-shadow:0 0 25px #35f2d025}.analyze-button span{float:right;margin-right:12px}.reaction-result{display:grid;gap:8px}.reaction-result>div{padding:11px 13px;border:1px solid #1e3835;background:#071110}.reaction-result strong{display:block;margin-top:7px;color:#d9efea;font:600 12px ui-monospace,SFMono-Regular,monospace}.reaction-result p{margin:6px 0 0;color:#78918c;font-size:9px;line-height:1.55}.reaction-result .safety-result{border-color:#59491d;background:#171306}.reaction-result .safety-result small{color:#f2c752}.reaction-result.loading{opacity:.35;filter:blur(2px)}footer a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.site-header::after{display:none}}
@media(max-width:1050px){.oss-tool-grid{grid-template-columns:1fr}}
@media(max-width:680px){body::before{opacity:.08}.hero{background:#030809}.site-header{height:66px}.open-badge{font-size:0}.open-badge::after{content:"ONLINE";font-size:8px}.hero h1{font-size:55px}.grade-choice{clip-path:none}.hero-lab,.topic-grid,.tool-card,.lab-console,.quiz-card,.video-card,.closing,.oss-panel{clip-path:none}.particle-window{height:300px}.section::before{top:38px}.quick-strip span{font-size:8px}.closing::before{display:none}.reagent-row{grid-template-columns:1fr}.reagent-row>span{height:auto}.atom-balance{grid-template-columns:1fr 1fr}footer p{line-height:1.7}}