#gas-diffusion-lab{--gd-ink:#17323d;--gd-muted:#607883;--gd-blue:#3589c8;--gd-green:#5e9c67;--gd-teal:#27816d;--gd-paper:#fbfdfc;color:var(--gd-ink)}
.gd-shell{padding:clamp(1rem,2.5vw,1.65rem);border:1px solid #d9e5e7;border-radius:24px;background:radial-gradient(circle at 12% 0%,rgba(65,159,204,.1),transparent 32%),linear-gradient(145deg,#fbfdfc,#f4f8f6);box-shadow:0 16px 45px rgba(34,67,77,.08)}
.gd-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}.gd-kicker{display:block;margin-bottom:.3rem;color:var(--gd-teal);font-size:.68rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.gd-heading h2{margin:0;font:700 clamp(1.55rem,3vw,2.25rem)/1.05 Helvetica,Arial,sans-serif;letter-spacing:-.045em}.gd-heading p{max-width:720px;margin:.45rem 0 0;color:var(--gd-muted);font-size:.88rem;line-height:1.55}.gd-heading-equation{display:flex;align-items:center;gap:.45rem;flex:none;padding:.7rem .85rem;border:1px solid #cfe0e3;border-radius:14px;background:#fff;font-size:.9rem;box-shadow:0 6px 18px rgba(34,67,77,.06)}.gd-heading-equation span:first-child{color:var(--gd-blue)}.gd-heading-equation span:nth-of-type(2){color:var(--gd-green)}.gd-heading-equation strong{color:var(--gd-ink)}
.gd-layout{display:grid;grid-template-columns:minmax(210px,.52fr) minmax(0,1.48fr);gap:1rem}.gd-controls{display:flex;flex-direction:column;gap:.7rem;padding:.9rem;border:1px solid #d5e3e5;border-radius:18px;background:rgba(255,255,255,.88)}.gd-control-intro span{display:block;color:var(--gd-teal);font-size:.62rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.gd-control-intro strong{display:block;margin-top:.22rem;font-size:.75rem;line-height:1.42}.gd-play{display:flex;align-items:center;gap:.65rem;width:100%;padding:.72rem;border:0;border-radius:13px;background:linear-gradient(135deg,#237b68,#3c93ae);color:#fff;text-align:left;cursor:pointer;box-shadow:0 8px 20px rgba(35,123,104,.2);transition:transform .18s ease,box-shadow .18s ease}.gd-play:hover{transform:translateY(-1px);box-shadow:0 11px 25px rgba(35,123,104,.25)}.gd-play:active{transform:translateY(1px) scale(.99)}.gd-play-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:rgba(255,255,255,.17);font-size:.9rem}.gd-play span:last-child{display:flex;flex-direction:column}.gd-play b{font-size:.78rem}.gd-play small{margin-top:.08rem;color:rgba(255,255,255,.78);font-size:.58rem}.gd-reset{padding:.52rem;border:1px solid #cadadd;border-radius:10px;background:#fff;color:#496672;font-size:.66rem;font-weight:780;cursor:pointer}.gd-steps{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}.gd-steps li{display:flex;align-items:center;gap:.55rem;padding:.48rem;border:1px solid transparent;border-radius:11px;color:#6d8189;transition:.25s ease}.gd-steps i{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;background:#edf2f2;font-size:.6rem;font-style:normal;font-weight:850}.gd-steps span{display:flex;flex-direction:column}.gd-steps b{font-size:.65rem}.gd-steps small{font-size:.53rem}.gd-steps li.active{border-color:#9dcfc1;background:#edf8f4;color:#205f50}.gd-steps li.active i{background:#2d8c70;color:#fff}.gd-steps li.complete i{background:#2fa970;color:#fff}.gd-steps li.complete i::before{content:'✓';font-size:.65rem}.gd-steps li.complete i{font-size:0}.gd-mass-cards{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:auto}.gd-mass-cards div{padding:.55rem;border-radius:11px;background:#f1f6f6}.gd-mass-cards span,.gd-mass-cards strong,.gd-mass-cards small{display:block}.gd-mass-cards span{font-size:.72rem;font-weight:850}.gd-mass-cards div:first-child span{color:var(--gd-blue)}.gd-mass-cards div:last-child span{color:var(--gd-green)}.gd-mass-cards strong{margin-top:.08rem;font-size:.66rem}.gd-mass-cards small{color:var(--gd-muted);font-size:.52rem}
.gd-visual-column{display:flex;min-width:0;flex-direction:column;gap:.7rem}.gd-stage-wrap{position:relative;padding:.4rem;border:1px solid #d3e0e2;border-radius:18px;background:linear-gradient(#edf6f7,#fbfdfc);overflow:hidden}.gd-stage{display:block;width:100%;height:auto;min-height:330px}.gd-stage text{font-family:Helvetica,Arial,sans-serif}.gd-pad text:first-of-type{font-size:17px;font-weight:850;text-anchor:middle;fill:#294a57}.gd-pad text:last-of-type{font-size:11px;text-anchor:middle;fill:#607883}.gd-pad-nh3 text:last-of-type{transform:translateX(18px)}.gd-pad-hcl text:last-of-type{transform:translateX(-18px)}.gd-molecule{will-change:transform,opacity}.gd-molecule text{font-size:7px;font-weight:850;text-anchor:middle;fill:#fff}.gd-molecule line{stroke:#53666e;stroke-width:3}.gd-atom{stroke:#fff;stroke-width:1.7}.gd-n{fill:#3589c8}.gd-h{fill:#f7fafc;stroke:#aabec5}.gd-cl{fill:#65a66d}.gd-hcl text{font-size:5.5px}.gd-nh3-cloud,.gd-hcl-cloud{will-change:transform}.gd-ring,.gd-ring-label,.gd-measure{will-change:transform,opacity}.gd-ring-label path,.gd-ring-label circle{fill:none;stroke:#73929a;stroke-width:2}.gd-ring-label text{font-size:13px;font-weight:800;text-anchor:middle;fill:#294a57}.gd-measure path{fill:none;stroke:#829ba3;stroke-width:1.7}.gd-measure text{font-size:12px;font-weight:700;text-anchor:middle;fill:#59727c}.gd-reaction-sparks circle{fill:#fff;stroke:#d8e4e6;stroke-width:1;will-change:transform,opacity}.gd-stage-key{position:absolute;left:.85rem;bottom:.65rem;display:flex;gap:.7rem;padding:.36rem .5rem;border:1px solid rgba(176,199,204,.75);border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);font-size:.55rem}.gd-stage-key span{display:flex;align-items:center;gap:.25rem}.gd-stage-key i{width:8px;height:8px;border-radius:50%}.gd-stage-key .nh3{background:var(--gd-blue)}.gd-stage-key .hcl{background:var(--gd-green)}.gd-stage-key .solid{background:#fff;border:1px solid #b9c9cd}
.gd-readout{display:grid;grid-template-columns:1.2fr .8fr;gap:.9rem;padding:.8rem .9rem;border:1px solid #d3e0e2;border-left:5px solid var(--gd-teal);border-radius:15px;background:#fff}.gd-readout-label{color:var(--gd-teal);font-size:.57rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.gd-readout h3{margin:.12rem 0 .2rem;font-size:.88rem}.gd-readout p{margin:0;color:var(--gd-muted);font-size:.65rem;line-height:1.5}.gd-position span,.gd-position strong,.gd-position small{display:block}.gd-position span{color:var(--gd-muted);font-size:.54rem}.gd-position strong{margin:.08rem 0 .3rem;font-size:.72rem}.gd-position>div{position:relative;height:7px;border-radius:999px;background:linear-gradient(90deg,#62a9d8,#c9d9d9 58%,#79ad7e)}.gd-position i{position:absolute;left:var(--position);top:50%;width:15px;height:15px;border:3px solid #fff;border-radius:50%;background:#263d46;box-shadow:0 2px 7px rgba(0,0,0,.22);transform:translate(-50%,-50%)}.gd-position small{margin-top:.3rem;color:var(--gd-muted);font-size:.51rem}.gd-position small b{color:var(--gd-ink)}
.gd-explanation{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:.8rem}.gd-explanation article{display:flex;gap:.55rem;padding:.7rem;border:1px solid #d7e3e5;border-radius:14px;background:rgba(255,255,255,.72)}.gd-explanation article>span{color:#80a2aa;font-size:.58rem;font-weight:850}.gd-explanation h3{margin:0 0 .2rem;font-size:.7rem}.gd-explanation p{margin:0;color:var(--gd-muted);font-size:.58rem;line-height:1.5}.gd-safety{margin:.7rem 0 0;padding:.55rem .7rem;border-radius:10px;background:#fff6e7;color:#7a6132;font-size:.56rem;line-height:1.45}
.gd-progress{position:absolute;top:.8rem;right:.8rem;display:flex;align-items:center;gap:.38rem;width:125px;padding:.3rem .4rem;border:1px solid rgba(176,199,204,.78);border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px)}.gd-progress::before{content:'';position:absolute;left:.4rem;right:2rem;height:5px;border-radius:999px;background:#dce8e9}.gd-progress span{position:relative;z-index:1;width:87px;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--gd-blue),var(--gd-teal));transform:scaleX(0);transform-origin:left center;will-change:transform}.gd-progress b{position:relative;z-index:1;margin-left:auto;color:#48636d;font-size:.48rem;font-variant-numeric:tabular-nums}
@media(max-width:900px){.gd-heading{align-items:flex-start;flex-direction:column}.gd-layout{grid-template-columns:1fr}.gd-controls{display:grid;grid-template-columns:1fr 1fr}.gd-control-intro,.gd-steps,.gd-mass-cards{grid-column:1/-1}.gd-steps{grid-template-columns:repeat(3,1fr)}.gd-stage{min-height:0}.gd-explanation{grid-template-columns:1fr}.gd-readout{grid-template-columns:1fr}}
@media(max-width:560px){.gd-shell{padding:.75rem;border-radius:17px}.gd-heading-equation{font-size:.7rem}.gd-controls{grid-template-columns:1fr}.gd-control-intro,.gd-steps,.gd-mass-cards{grid-column:auto}.gd-steps{grid-template-columns:1fr}.gd-stage-wrap{overflow-x:auto}.gd-stage{width:800px;max-width:none}.gd-stage-key{position:sticky;width:max-content}.gd-readout{padding:.7rem}.gd-explanation{gap:.45rem}}
@media(prefers-reduced-motion:reduce){.gd-play,.gd-steps li{transition:none}.gd-molecule,.gd-nh3-cloud,.gd-hcl-cloud,.gd-ring,.gd-ring-label,.gd-measure,.gd-progress span{will-change:auto}}