@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#f3f5f1;--ink:#162c29;--green:#21765c;--muted:#65736b;--line:#dce2d9;--lime:#d9f68d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px 'DM Sans',sans-serif}button,input,select{font:inherit}button,a,input,select{accent-color:var(--green)}button,a{cursor:pointer}header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{font:600 21px 'Space Grotesk',sans-serif;display:flex;align-items:center;gap:12px}.logo{background:var(--ink);color:var(--lime);padding:10px;border-radius:12px}header span:last-child{color:var(--muted);font-size:12px;letter-spacing:1.5px}main{max-width:1320px;margin:auto;padding:42px 5%}h1,h2,h3{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(38px,5vw,64px);letter-spacing:-3px;line-height:1.05;margin:15px 0 20px}h2{font-size:29px;letter-spacing:-1px;margin:0 0 12px}h3{font-size:18px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--green)}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;margin-bottom:35px}.hero p{color:var(--muted);line-height:1.7;max-width:480px}.hero-art{background:var(--ink);border-radius:22px;padding:24px;color:white;position:relative}.hero-art svg{width:100%;height:210px}.hero-art small{color:#b3c9bb}.pill{display:inline-block;background:#e4ebdf;padding:7px 11px;border-radius:30px;font-size:11px;margin-right:6px}nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:30px;overflow:auto}nav button{border:0;background:none;padding:15px 18px;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent}nav button.active{color:var(--ink);border-color:var(--green);font-weight:700}.panel{display:none}.panel.active{display:block}.grid{display:grid;grid-template-columns:340px 1fr;gap:24px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;margin-bottom:20px}.card.dark{background:var(--ink);color:white}.intro{display:flex;justify-content:space-between;align-items:start;gap:25px;margin-bottom:25px}.intro p,p.sub{color:var(--muted);line-height:1.7;margin:5px 0 0}.step{width:28px;height:28px;background:#eaf0e6;border-radius:50%;display:inline-grid;place-items:center;margin-right:8px;font-size:12px}label{display:block;font-size:12px;font-weight:600;margin:19px 0 7px}input[type=number],select{width:100%;border:1px solid var(--line);background:#f8faf6;padding:11px;border-radius:8px;color:var(--ink)}input[type=range]{width:100%}.metric{font:500 32px 'Space Grotesk';margin:8px 0}.muted,small{color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat{background:#f1f5ed;padding:17px;border-radius:12px}.stat strong{display:block;font:500 23px 'Space Grotesk';margin-top:10px}.diagram{width:100%;height:auto;min-height:150px}.equation{padding:13px;background:#f1f5ed;border-radius:8px;margin:10px 0;font-family:'Space Grotesk';font-size:14px;line-height:1.6}table{width:100%;border-collapse:collapse;font-size:13px}td,th{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px}.note{font-size:12px;line-height:1.7;color:var(--muted)}.btn{border:0;border-radius:8px;background:var(--green);color:white;padding:12px 18px;text-decoration:none;display:inline-block;margin-top:14px}.btn.light{background:#edf3e7;color:var(--ink)}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.feedback{padding:15px;border-radius:8px;background:#eaf3dd;line-height:1.6;margin-top:12px}.quiz{padding:20px 0;border-bottom:1px solid var(--line)}.quiz button{background:#f1f5ed;border:1px solid var(--line);padding:10px 15px;border-radius:8px;margin:10px 6px 0 0}footer{border-top:1px solid var(--line);margin-top:40px;padding:25px 0;font-size:11px;color:var(--muted);line-height:1.8}svg text{font-family:'DM Sans',sans-serif}a{color:var(--green)}@media(max-width:850px){.hero,.grid,.two{grid-template-columns:1fr}.hero{gap:20px}header{padding:0 5%}header span:last-child{display:none}.stats{grid-template-columns:1fr}main{padding-top:25px}.intro{display:block}h1{letter-spacing:-2px}td,th{padding:10px 4px;font-size:11px}}@media print{header,nav,.hero,button,.btn{display:none}.panel{display:block!important;break-before:page}.grid{display:block}.card{break-inside:avoid}body{background:white}}
