:root{--navy:#092638;--deep:#061827;--ink:#15373c;--muted:#527078;--mint:#1b8c78;--mint-light:#e4f4eb;--cream:#f8f9f3;--border:#d9e5de;--white:#ffffff;--gold:#f4cb7c;color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f3f8f3,#f8f8f3 55%,#f4f8f4);color:var(--ink)}button,select{font:inherit}button{cursor:pointer}a{color:inherit}button,select,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,canvas:focus-visible,select:focus-visible{outline:3px solid #d59335;outline-offset:3px}[hidden]{display:none!important}.skip-link{position:absolute;top:-100px;left:10px;z-index:20;padding:12px;background:#fff;color:#143c40}.skip-link:focus{top:10px}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.035em}p{line-height:1.6}
.site-nav{height:77px;display:flex;align-items:center;justify-content:space-between;padding:11px max(25px,calc((100vw - 1410px)/2));background:#fff;box-shadow:0 1px 0 #dbe7e1;gap:12px}.logo-link{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap;color:#0d343a}.logo-link img{display:block}.logo-link b{font-size:18px;font-weight:840;letter-spacing:-.045em}.logo-link small{display:block;color:#648482;font-size:9px;letter-spacing:.13em;font-weight:800;margin-top:2px}.nav-actions{display:flex;align-items:center;gap:18px}.back-link{font-size:13px;font-weight:750;text-decoration:none;padding:10px;color:#205f53}.back-link:hover{text-decoration:underline}.language-label{display:flex;gap:9px;align-items:center;font-size:12px;color:#4f7075}.language-label select{border:1px solid #cbdbd6;border-radius:11px;padding:9px 10px;background:white;color:#17454a;min-height:42px}
.shell{max-width:1450px;padding:0 24px;margin:auto}.hero{position:relative;overflow:hidden;background:linear-gradient(116deg,#092e39 0%,#092b40 60%,#102d54);color:#f4fff9;min-height:260px;border-radius:0 0 24px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:32px 52px 34px;margin-bottom:18px}.hero:before{content:'';position:absolute;inset:-110px -60px auto auto;width:450px;height:450px;background:radial-gradient(circle,#63d6a61c,transparent 65%)}.hero-text{position:relative;z-index:2;max-width:785px}.eyebrow{font-size:11px;letter-spacing:.14em;color:#9ce9d3;font-weight:800;margin-bottom:12px}.hero-dot,.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#78ebc5;box-shadow:0 0 0 4px #6de7bd1d;margin-right:9px}.hero h1{font-size:clamp(33px,4.5vw,58px);font-weight:850;line-height:1.06;margin:0 0 15px;letter-spacing:-.065em}.hero h1 em{font-style:normal;color:#b9f2dc}.lead{max-width:735px;font-size:15px;color:#c4e1e1;margin:0 0 21px;line-height:1.6}.hero-tags{display:flex;flex-wrap:wrap;gap:8px}.hero-tags span{color:#b4eadd;background:#e9fff00d;border:1px solid #a5ebd230;border-radius:999px;font-size:10px;letter-spacing:.045em;font-weight:780;padding:8px 10px}.hero-figure{width:260px;height:200px;position:relative;flex:none;transform:rotate(-9deg);z-index:1}.hero-halo{position:absolute;inset:4px;background:radial-gradient(circle,#57d8b52d,transparent 68%)}.hero-atom{position:absolute;display:grid;place-items:center;border-radius:50%;color:white;font-weight:900;box-shadow:inset -10px -14px 15px #12324d78,inset 8px 10px 13px #ffffff7d,0 0 38px #64e3ce25;z-index:2}.hero-atom.o{width:95px;height:95px;top:35px;left:80px;background:radial-gradient(circle at 32% 25%,#ffc0c4,#f26e7d 55%,#b23154);font-size:30px}.hero-atom.h{width:66px;height:66px;background:radial-gradient(circle at 33% 25%,#fff,#d4e9ed 55%,#8aa5b2);color:#4c6570;font-size:23px}.hero-atom.first{top:125px;left:17px}.hero-atom.second{top:125px;right:17px}.hero-link{position:absolute;height:14px;width:100px;top:128px;background:linear-gradient(180deg,#e7f5ff,#6786a3);z-index:1;border-radius:8px}.hero-link.first{left:55px;transform:rotate(-47deg);transform-origin:left center}.hero-link.second{left:139px;transform:rotate(47deg);transform-origin:left center}.hero-figure p{position:absolute;bottom:-3px;left:94px;color:#f7dfa5;font-size:13px;font-weight:800}
.mode-nav{display:flex;gap:7px;margin:0 0 16px;padding:6px;background:#e9f0e9;border:1px solid #d5e3d9;border-radius:16px;width:max-content;max-width:100%;overflow:auto}.mode-nav button{display:flex;align-items:center;justify-content:center;gap:9px;border:0;background:transparent;color:#466863;padding:11px 17px;min-height:46px;border-radius:11px;font-size:13px;font-weight:800;white-space:nowrap}.mode-nav button[aria-pressed=true]{background:white;color:#135d4e;box-shadow:0 3px 13px #2b56431c}.mode-icon{font-size:18px;line-height:1}
.lab-layout{display:grid;grid-template-columns:minmax(0,1.57fr) minmax(330px,.9fr);align-items:start;gap:18px}.stage-card,.tools-card,.compare-section,.learning-section{border:1px solid #d8e5dd;background:#fff;border-radius:23px;box-shadow:0 12px 30px #22453c0b;min-width:0}.stage-card{overflow:hidden}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 23px 16px}.section-kicker{font-size:10px;color:#348371;letter-spacing:.13em;font-weight:850;margin:0 0 8px}.stage-heading h2{font-size:clamp(25px,2.4vw,33px);letter-spacing:-.045em;line-height:1.14;margin:0 0 4px}.scene-subtitle{font-size:13px;color:#66817c;margin:0}.model-status{font-size:10px;letter-spacing:.07em;font-weight:830;color:#1e816c;background:#eaf6ed;border:1px solid #cbe8dc;padding:9px 10px;border-radius:99px;white-space:nowrap}.model-status .live-dot{width:6px;height:6px;margin-right:5px}
.scene-frame{margin:0 16px;border-radius:18px;background:#061827;position:relative;overflow:hidden;min-height:410px}.scene-frame canvas{display:block;width:100%;height:410px;touch-action:none;cursor:grab}.scene-frame canvas.dragging{cursor:grabbing}.scene-help{pointer-events:none;position:absolute;bottom:15px;left:16px;z-index:2;max-width:calc(100% - 125px)}.scene-help span{display:inline-block;font-size:12px;font-weight:650;color:#d0ebee;padding:8px 11px;border-radius:40px;background:#092637d6;border:1px solid #47748788}.scene-zoom{position:absolute;bottom:14px;right:14px;display:flex;gap:5px}.scene-zoom button{background:#11334bdc;color:#e2fafc;border:1px solid #53718b;border-radius:9px;min-width:35px;min-height:37px;font-size:21px}.scene-zoom button:hover{background:#195171}.scene-options{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 19px;border-bottom:1px solid #e6ebe5}.view-toggle,.switch-tools{display:flex;flex-wrap:wrap;gap:5px}.scene-options button{border:1px solid transparent;background:#f0f5f0;color:#54706a;padding:9px 11px;min-height:39px;border-radius:9px;font-size:12px;font-weight:760}.scene-options button[aria-pressed=true]{background:#dff3e8;color:#176c5c;border-color:#88d5bb}.scene-options button:hover{border-color:#92bbae}
.measurements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 16px 19px;gap:9px}.measurements>div{background:#f2f7f3;border:1px solid #e1ede4;border-radius:12px;padding:13px;min-width:0;min-height:84px}.measurements small{font-size:11px;color:#69827d;display:block;margin-bottom:8px}.measurements strong{font-size:16px;color:#193f3c;line-height:1.25;display:block;overflow-wrap:anywhere}.atom-inspector{margin:0 19px 11px;border-top:1px solid #e4ece6;padding:17px 0 5px;display:grid;grid-template-columns:.7fr 1.3fr;gap:18px;align-items:center}.atom-inspector h3{font-size:19px;margin:0}.atom-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.atom-values div{min-width:0}.atom-values dt{color:#728a85;font-size:11px;line-height:1.3}.atom-values dd{margin:5px 0 0;font-size:12px;font-weight:800;color:#26544d;overflow-wrap:anywhere}.science-disclaimer{font-size:11px;color:#6c827e;background:#fafbf8;border-top:1px solid #e5eee8;margin:13px 0 0;padding:12px 21px;line-height:1.6}
.tools-card{padding:24px 21px;min-height:610px}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:15px}.panel-header h2{font-size:24px;line-height:1.2;margin:0}.library-count{border-radius:99px;border:1px solid #d9e7da;background:#f4f8ed;color:#4b755c;padding:7px 9px;font-size:11px;font-weight:820;white-space:nowrap}.panel-description{font-size:13px;color:#617972;line-height:1.65;margin-bottom:18px}.category-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}.category-tabs button{border:1px solid #dce8dd;background:#fff;color:#4d6c62;min-height:37px;padding:8px 11px;border-radius:10px;font-size:12px;font-weight:720}.category-tabs button[aria-pressed=true]{background:#1d705d;color:white;border-color:#1d705d}
.molecule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:390px;overflow:auto;padding:1px 2px 2px 1px;scrollbar-width:thin}.molecule-tile{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:9px;min-height:74px;padding:10px;text-align:left;border:1px solid #dce7df;border-radius:13px;background:#fff;min-width:0}.molecule-tile:hover{border-color:#69bd9e;background:#f5fbf7}.molecule-tile[aria-pressed=true]{border-color:#23785f;background:#edf8ef;box-shadow:inset 0 0 0 1px #23785f}.molecule-tile .tile-orb{width:36px;height:36px;display:grid;place-items:center;background:#123f52;color:#ebfdf3;border-radius:50%;font-size:16px;font-weight:850;letter-spacing:-.05em}.molecule-tile b{display:block;font-size:12px;line-height:1.3;font-weight:800;white-space:normal}.molecule-tile small{display:block;color:#72857d;font-size:11px;margin-top:4px}.explain-card{margin-top:15px;border:1px solid #d3e7d8;background:linear-gradient(115deg,#f0f8ec,#f7f9f0);padding:18px;border-radius:16px}.explain-card p:not(.section-kicker){font-size:13px;line-height:1.7;color:#385d51;margin:0 0 10px}.inline-button{border:0;background:transparent;padding:9px 0;color:#146b5e;font-size:12px;font-weight:830;text-align:left;text-decoration:underline;text-underline-offset:4px}
.micro-label{font-size:11px;color:#3d6b61;font-weight:800;margin:14px 0 9px}.bond-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.bond-picker button{display:grid;gap:4px;place-items:center;border:1px solid #d9e4dd;border-radius:12px;background:#f9fbf6;color:#4a6861;min-height:60px}.bond-picker button[aria-pressed=true]{background:#e3f6ea;color:#135e4d;border-color:#2d9479}.bond-picker b{font-size:21px}.bond-picker span{font-size:11px;font-weight:750}
.atom-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.atom-button{border:1px solid #dbe5dd;background:#f8fbf8;border-radius:11px;min-height:63px;padding:6px 2px;text-align:center;display:grid;place-items:center;align-content:center;gap:2px}.atom-button span{display:block;font-weight:900;font-size:19px;line-height:1.25}.atom-button small{font-size:9px;color:#718881;line-height:1.3}.atom-button:hover{border-color:#3d9780;background:#effaf2}.builder-focus{margin:13px 0;padding:12px 13px;border-radius:10px;background:#edf4ee;color:#4d6a5e;font-size:12px}.builder-focus strong{color:#194f40}.builder-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.outline-button,.save-button{background:#fff;border:1px solid #d0dfd6;border-radius:10px;min-height:42px;padding:9px 12px;color:#2e5f50;font-size:12px;font-weight:760}.outline-button:hover,.save-button:hover{background:#ebf7ef}.builder-check{border:1px solid #d4e9da;border-radius:14px;background:#f5f9f5;padding:15px}.check-head{display:flex;justify-content:space-between;gap:12px}.check-head span{font-size:11px;font-weight:800;color:#a66c22}.check-head span.is-good{color:#147351}.builder-check p:not(.section-kicker){font-size:12px;color:#507163;line-height:1.6;margin-bottom:11px}.bond-list{display:grid;gap:5px;margin:8px 0 15px;max-height:195px;overflow:auto}.bond-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #dbe9dd;padding:6px 0;font-size:12px;color:#385e56}.bond-row button{font-size:11px;border:1px solid #cfded4;border-radius:7px;background:white;padding:6px 9px;color:#1b6857}.bond-row .bond-row-actions{display:flex;gap:4px}.primary-button{border:1px solid #176c58;border-radius:11px;background:#176c58;color:#fff;min-height:46px;padding:12px 17px;font-size:13px;font-weight:830}.primary-button:hover{background:#0b594a}.builder-check .primary-button{width:100%}.save-button{width:100%;margin-top:8px}.builder-check .inline-button{display:block;margin:5px auto 0;text-align:center}
.mission-list{display:grid;gap:8px}.mission-tile{display:flex;gap:12px;align-items:center;text-align:left;min-height:58px;border-radius:12px;border:1px solid #dce6df;padding:12px;background:#fff;color:#23433e}.mission-tile:hover{background:#f5faf5}.mission-tile[aria-pressed=true]{border-color:#2c967a;background:#eff9f0}.mission-tile .mission-num{display:grid;place-items:center;background:#e4f0e7;border-radius:11px;width:38px;height:38px;flex:none;color:#246b5c;font-weight:800;font-size:12px}.mission-tile strong{font-size:13px}.mission-tile small{display:block;font-size:11px;color:#617d71;margin-top:3px}.mission-work{margin-top:17px;padding:17px;background:#f1f7ed;border:1px solid #d5e8d7;border-radius:14px}.mission-work h3{margin:0 0 7px;font-size:19px}.mission-work p:not(.section-kicker){font-size:12px;color:#456a5a;margin:0 0 12px}.mission-actions{display:flex;flex-wrap:wrap;gap:8px}.mission-feedback{padding-top:8px;font-weight:760}
.compare-section,.learning-section{margin-top:18px;padding:28px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:19px}.section-heading h2{font-size:clamp(24px,3vw,34px);margin:0 0 7px}.section-heading p:not(.section-kicker){margin:0;font-size:13px;max-width:730px;color:#637d77}.compare-selects{display:flex;gap:10px}.compare-selects label{display:grid;gap:6px;font-size:11px;color:#5a796e;font-weight:750}.compare-selects select{border:1px solid #cbddd2;background:#fff;border-radius:9px;padding:10px;color:#224f43;max-width:180px;min-height:42px}.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.compare-card{border:1px solid #d8e8df;border-radius:15px;background:linear-gradient(140deg,#f4faf5,#f9faf8);padding:17px 18px}.compare-card>div:first-child{display:flex;justify-content:space-between;gap:10px}.compare-card h3{font-size:21px;margin:0 0 4px}.compare-card .mini-formula{border-radius:10px;padding:7px 10px;background:#193e4b;color:#d5f7e9;font-size:13px;font-weight:800}.compare-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0 0}.compare-card dt{font-size:11px;color:#789087}.compare-card dd{margin:4px 0 0;font-size:14px;font-weight:800;overflow-wrap:anywhere}.compare-explainer{margin-top:13px;padding:14px 18px;background:#edf6ed;color:#345e50;border-radius:11px;font-size:13px;line-height:1.65}.learning-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.learning-cards article{background:#f4f8f2;padding:22px;border-radius:15px;border:1px solid #e1ebe0}.learning-index{font-size:12px;color:#2b866e;font-weight:850}.learning-cards h3{font-size:18px;margin:12px 0 8px}.learning-cards p{font-size:13px;color:#5b746b;margin:0}.page-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;margin:30px 6px 40px;padding:23px 0;border-top:1px solid #d5e3dc}.page-footer p{font-size:12px;color:#628076;margin:0;max-width:700px}.page-footer>div{display:flex;gap:17px;flex-wrap:wrap}.page-footer a{color:#1d705b;font-size:13px;font-weight:800;text-decoration:none}.page-footer a:hover{text-decoration:underline}
.toast{position:fixed;z-index:40;bottom:24px;left:50%;transform:translateX(-50%) translateY(140%);background:#173e45;color:#fff;border-radius:12px;padding:13px 20px;box-shadow:0 15px 50px #09252955;font-size:13px;line-height:1.5;max-width:calc(100vw - 30px);width:max-content;transition:transform .18s;pointer-events:none}.toast.shown{transform:translateX(-50%) translateY(0)}
@media(max-width:1120px){.hero{padding:29px}.hero-figure{transform:scale(.85) rotate(-9deg);transform-origin:right center;margin-left:-35px}.lab-layout{grid-template-columns:minmax(0,1.2fr) minmax(320px,.95fr)}.scene-frame,.scene-frame canvas{min-height:340px;height:340px}.measurements{grid-template-columns:repeat(2,minmax(0,1fr))}.atom-inspector{grid-template-columns:1fr}.tools-card{padding:20px 16px}.molecule-list{grid-template-columns:1fr 1fr}.molecule-tile{grid-template-columns:32px 1fr;padding:8px}.molecule-tile .tile-orb{width:30px;height:30px;font-size:13px}}
@media(max-width:840px){.lab-layout{grid-template-columns:1fr}.stage-card{order:0}.tools-card{order:1;min-height:0}.scene-frame,.scene-frame canvas{height:385px;min-height:385px}.molecule-list{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}.hero-figure{display:none}.hero h1{font-size:clamp(31px,6vw,48px)}}
@media(max-width:600px){.site-nav{height:68px;padding:9px 15px}.logo-link b{font-size:16px}.logo-link small{font-size:8px;letter-spacing:.07em}.logo-link img{width:27px;height:27px}.nav-actions{gap:5px}.back-link{font-size:12px;padding:7px}.language-label span{display:none}.language-label select{max-width:91px;padding:8px 5px;font-size:11px}.shell{padding:0 10px}.hero{border-radius:0 0 18px 18px;margin:0 0 11px;padding:25px 19px 23px;min-height:auto}.hero h1{font-size:clamp(29px,8.4vw,41px);line-height:1.12;margin-bottom:12px}.eyebrow{font-size:9px;margin-bottom:11px}.lead{font-size:13px;line-height:1.65;margin-bottom:15px}.hero-tags{gap:6px}.hero-tags span{font-size:9px;padding:7px}.mode-nav{width:100%;margin-bottom:11px;border-radius:12px;gap:3px;padding:4px}.mode-nav button{flex:1;min-width:0;padding:8px 6px;gap:4px;min-height:48px;font-size:11px;line-height:1.3;white-space:normal}.mode-icon{font-size:15px;flex:none}.stage-card,.tools-card,.compare-section,.learning-section{border-radius:17px}.stage-heading{padding:16px 14px 12px}.stage-heading h2{font-size:25px}.model-status{font-size:9px;padding:7px;max-width:115px;text-align:center;white-space:normal}.scene-frame{margin:0 9px}.scene-frame,.scene-frame canvas{height:308px;min-height:308px;border-radius:13px}.scene-help{bottom:12px;left:8px;max-width:calc(100% - 110px)}.scene-help span{font-size:10px;line-height:1.3;padding:7px 8px}.scene-zoom{right:8px;bottom:9px;gap:3px}.scene-zoom button{min-width:32px;min-height:35px}.scene-options{padding:10px;gap:8px}.scene-options button{font-size:11px;padding:8px 10px;min-height:39px}.measurements{padding:10px;gap:7px}.measurements>div{padding:11px 10px;min-height:70px}.measurements small{font-size:10px;margin-bottom:4px}.measurements strong{font-size:15px}.atom-inspector{margin:0 12px 10px;padding-top:12px;gap:10px}.atom-inspector h3{font-size:16px}.atom-values{gap:6px}.atom-values dt{font-size:10px}.atom-values dd{font-size:11px}.science-disclaimer{padding:10px 13px;font-size:10px}.tools-card{padding:20px 13px}.panel-header h2{font-size:22px}.molecule-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:420px}.molecule-tile{min-height:67px}.molecule-tile b{font-size:11px}.molecule-tile small{font-size:10px}.atom-palette{gap:5px}.atom-button{min-height:57px}.compare-section,.learning-section{padding:18px 14px;margin-top:12px}.section-heading{gap:12px}.section-heading h2{font-size:26px}.compare-selects{width:100%}.compare-selects label{flex:1;min-width:0}.compare-selects select{width:100%;max-width:none;font-size:12px}.comparison-grid{grid-template-columns:1fr;gap:9px}.compare-card{padding:14px}.learning-cards{grid-template-columns:1fr;gap:9px}.learning-cards article{padding:17px}.page-footer{margin:24px 8px;display:block}.page-footer>div{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}