@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#173b3a;--green:#146b56;--cream:#f6f5ee;--lime:#d9ed9a}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px 'DM Sans',Arial,sans-serif;line-height:1.6}header{padding:22px 6%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce1d5}header a{font-size:22px;font-weight:800;color:var(--ink);text-decoration:none}header a span{display:block;font-size:10px;letter-spacing:4px}.badge,.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:bold}main{max-width:1160px;margin:auto;padding:0 28px}.hero{display:flex;align-items:center;justify-content:space-between;padding:48px 0 38px}.hero p{max-width:630px}h1{font:800 clamp(32px,4.6vw,53px)/1.16 Manrope,Arial;letter-spacing:-2px;margin:15px 0}h1 em{font-style:normal;color:var(--green)}.atom{position:relative;border:1px solid #a7ba98;border-radius:50%;width:175px;height:175px;background:#e5eccf;text-align:center;font-size:80px;transform:rotate(-15deg);margin:0 35px}.atom i{position:absolute;font-size:70px;top:45px;right:-15px}.atom b{position:absolute;font-size:38px;top:-15px;left:10px}.atom small{position:absolute;font-size:15px;bottom:8px;left:67px;font-weight:bold}nav{display:flex;gap:8px;border-bottom:1px solid #cbd6ca;padding-bottom:14px;margin-bottom:28px}button{font:inherit;cursor:pointer;border:1px solid #b6c5bc;background:white;border-radius:9px;padding:11px 17px;color:var(--ink)}button:hover{border-color:var(--green);background:#edf4e2}button.active,.primary{background:var(--green);color:white;border-color:var(--green)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b36523;outline-offset:3px}button:disabled{opacity:.55;cursor:default}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card,.panel{background:white;border:1px solid #d8ded3;border-radius:16px;padding:25px}.card h2{font:800 25px/1.25 Manrope,Arial;margin:15px 0}.card p{min-height:76px}.num{font-size:13px;font-weight:bold;color:var(--green)}.pill{display:inline-block;background:#edf2e5;border-radius:20px;padding:3px 10px;font-size:12px}.notice{padding:17px 22px;background:#e8eecf;border-radius:12px;margin:20px 0}.muted{font-size:14px;color:#566b66}.steps{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.step{padding:5px 11px;background:#e9eee6;border-radius:20px;font-size:13px}.step.current{background:var(--lime);font-weight:bold}label{display:block;margin:15px 0 6px;font-weight:600}input,select,textarea{font:inherit;border:1px solid #aabcb1;padding:12px;border-radius:8px;max-width:100%;background:white;color:var(--ink)}textarea{width:100%;min-height:120px}.options{display:grid;gap:10px;margin:20px 0}.options label{font-weight:400;border:1px solid #cad5cd;padding:12px;border-radius:8px;margin:0}.options input{margin-right:10px}.feedback{border-left:4px solid var(--green);background:#eff5e8;padding:18px;margin:18px 0}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.experiment{background:#eef3f3;border-radius:12px;padding:24px;text-align:center}.particles{font-size:38px;letter-spacing:12px;line-height:1.8}.measure{display:flex;justify-content:center;gap:28px}.tube{height:130px;width:75px;border:3px solid #547b7c;border-top:0;border-radius:0 0 12px 12px;display:flex;align-items:end;background:linear-gradient(to top,#a9d8d6 60%,transparent 60%);padding:8px;font-weight:bold}.tube.after{background:linear-gradient(to top,#a9d8d6 83%,transparent 83%)}table{border-collapse:collapse;width:100%;font-size:14px}td,th{padding:12px;text-align:left;border-bottom:1px solid #dce3d9;vertical-align:top}.scroll{overflow-x:auto}details{margin:12px 0}summary{cursor:pointer;font-weight:bold}footer{font-size:12px;color:#5d706b;padding:35px 0}.trace{border-left:3px solid #a6be78;margin:15px 0;padding:5px 20px;overflow-wrap:anywhere}progress{width:100%;accent-color:var(--green)}@media(max-width:700px){.grid{grid-template-columns:1fr}.hero{padding:30px 0}.atom{display:none}header .badge{max-width:130px;font-size:9px}main{padding:0 18px}nav{flex-wrap:wrap}.card p{min-height:0}.panel{padding:20px}h1{letter-spacing:-1px}}@media print{header,nav,.hero,button,footer{display:none}.panel{border:0}body{background:white}}
.portions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0}.portions>div{padding:14px;border:2px solid #458577;border-radius:0 0 15px 15px;background:#d7eee5;min-width:85px}.dataBars{display:flex;justify-content:center;align-items:end;gap:30px}.dataBars>div{display:flex;flex-direction:column;align-items:center}.dataBars span{display:block;width:65px;background:#458577;margin:10px;border-radius:8px 8px 0 0}
.gate{margin:22px 0;background:#fffef7}.gate-heading{display:flex;justify-content:space-between;gap:15px;align-items:center}.gate-heading h2{margin:5px 0}.gate-score{font-size:34px;color:var(--green);white-space:nowrap}.gate progress{height:16px}@media(max-width:500px){.gate-heading{align-items:start;flex-direction:column}.gate-score{font-size:28px}}
.structure-schema{display:block;width:100%;max-width:560px;height:auto;margin:16px auto;background:#fff;border-radius:12px}.structure-schema text{font:18px system-ui;fill:#173f49}.experiment table{width:100%;border-collapse:collapse}.experiment th,.experiment td{padding:10px;border-bottom:1px solid #c6dad8;text-align:left}.experiment caption{padding:10px;font-weight:700}
