.imf-lab{--imf:#287f9c;display:grid;gap:1rem}.imf-hero{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border:1px solid #c7dce2;border-radius:22px;background:linear-gradient(135deg,#f8fcfc,#e8f3f5)}.imf-hero span{color:#387f94;font-size:.62rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.imf-hero h2{margin:.18rem 0;font-size:1.45rem;color:#183e4a}.imf-hero p{max-width:760px;margin:0;color:#58727b;font-size:.7rem;line-height:1.55}.imf-mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.imf-mode{display:grid;gap:.12rem;padding:.75rem;border:1px solid #c9d9de;border-radius:17px;background:#fff;color:#385662;text-align:left;cursor:pointer}.imf-mode strong{font-size:.75rem}.imf-mode small{font-size:.54rem;color:#72878e}.imf-mode.active{border-color:var(--imf);background:linear-gradient(135deg,#e3f2f5,#eef0fb);box-shadow:0 8px 20px rgba(38,101,123,.15)}.imf-workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.65fr);gap:.8rem}.imf-stage{position:relative;min-height:430px;overflow:hidden;border:1px solid #c8d9de;border-radius:24px;background:radial-gradient(circle at 50% 45%,#fff 0,#edf6f7 62%,#dfedef);touch-action:none}.imf-stage-head{position:absolute;z-index:5;top:.75rem;left:.85rem;right:.85rem;display:flex;justify-content:space-between;gap:.6rem;pointer-events:none}.imf-stage-head span{padding:.34rem .55rem;border-radius:999px;background:rgba(255,255,255,.88);color:#51727c;font-size:.55rem}.imf-stage-head b{color:#287f9c}.imf-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.imf-force-line{stroke:var(--imf);stroke-width:3;stroke-dasharray:9 7;opacity:0}.imf-force-hit{stroke:transparent;stroke-width:24;pointer-events:stroke;cursor:pointer}.imf-force-label{fill:#28596a;font-size:13px;font-weight:850;text-anchor:middle;opacity:0}.imf-molecule{position:absolute;z-index:3;width:150px;height:120px;cursor:grab;user-select:none;touch-action:none;will-change:transform}.imf-molecule.dragging{cursor:grabbing;z-index:6}.imf-molecule button{position:absolute;inset:0;border:0;background:transparent;cursor:inherit}.particle{position:absolute;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;font-weight:850;box-shadow:0 8px 20px rgba(38,76,88,.18)}.particle em{position:absolute;top:-17px;color:#536c75;font-size:.55rem;font-style:normal}.water .oxygen{left:48px;top:36px;width:54px;height:54px;background:#e67c72;color:#fff}.water .hydrogen{width:36px;height:36px;background:#e8eef0;color:#31515c}.water .h1{left:20px;top:73px}.water .h2{right:20px;top:73px}.hcl .hydrogen{left:20px;top:43px;width:42px;height:42px;background:#edf2f4;color:#31515c}.hcl .chlorine{right:20px;top:32px;width:64px;height:64px;background:#70bd88;color:#fff}.iodine .iodine-atom{top:31px;width:66px;height:66px;background:#9071b6;color:#fff}.iodine .i1{left:16px}.iodine .i2{right:16px}.molecule-bond{position:absolute;z-index:-1;left:50%;top:58%;width:62px;height:5px;border-radius:4px;background:#57727b;transform:translate(-50%,-50%)}.water .molecule-bond{width:76px;top:72%;transform:translate(-50%,-50%) rotate(0deg)}.electron-cloud{position:absolute;top:19px;width:80px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(115,90,169,.3),rgba(115,90,169,.05) 65%,transparent 68%);will-change:transform}.iodine .cloud1{left:8px}.iodine .cloud2{right:8px}.imf-panel{display:grid;align-content:start;gap:.7rem;padding:1rem;border:1px solid #ccdadd;border-radius:22px;background:#fff}.imf-panel span{color:#397f94;font-size:.57rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.imf-panel h3{margin:0;color:#183f4b;font-size:1.05rem}.imf-panel p{margin:0;color:#5d737b;font-size:.66rem;line-height:1.6}.imf-facts{display:grid;gap:.45rem}.imf-facts div{padding:.6rem;border-radius:13px;background:#eef6f7}.imf-facts small{display:block;color:#6b8188;font-size:.51rem}.imf-facts strong{display:block;margin-top:.12rem;color:#285667;font-size:.7rem}.imf-controls{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.imf-controls button{padding:.62rem;border:1px solid #a9c8d1;border-radius:999px;background:#fff;color:#286378;font:inherit;font-size:.61rem;font-weight:800;cursor:pointer}.imf-controls .primary{border-color:#287f9c;background:#287f9c;color:#fff}.imf-status{padding:.65rem;border-radius:14px;background:#f2f5ef;color:#546c72;font-size:.61rem;line-height:1.5}.imf-status.connected{background:#e5f3ed;color:#28664d}@media(max-width:760px){.imf-mode-tabs{grid-template-columns:1fr}.imf-workspace{grid-template-columns:1fr}.imf-stage{min-height:360px}.imf-hero h2{font-size:1.15rem}.imf-molecule{transform:scale(.88)}}
.imf-molecule.selected:after{content:'selected';position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);padding:.16rem .42rem;border-radius:999px;background:#287f9c;color:#fff;font-size:.46rem;font-weight:800;letter-spacing:.04em}.imf-molecule.selected .particle{box-shadow:0 0 0 3px rgba(40,127,156,.2),0 8px 20px rgba(38,76,88,.18)}.imf-source{width:max-content;color:#287f9c;font-size:.56rem;font-weight:750;text-decoration:none;border-bottom:1px solid #9bc5d1}.imf-status.incorrect{background:#fff0e6;color:#9b4e2f}
