.cb-panel{background:var(--sim-bg);color:var(--sim-ink);border-radius:var(--radius);--cb-cov:#5b9bff;--cb-coord:#ff9d3c;--cb-ionic:#c792ea;--cb-hb:#4cc26a;--cb-line:#8a9bb2;margin:20px 0;padding:12px}.cb-panel svg{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}.cb-panel text{font-family:var(--font)}.cb-panel .sim-btn{color:var(--sim-ink);background:#16212f;border-color:#33445a}.cb-panel .sim-btn:disabled{opacity:.45;cursor:default}.cb-panel .sim-btn[aria-pressed=true],.cb-panel .sim-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.cb-row{flex-wrap:wrap;align-items:center;gap:6px 8px;display:flex}.cb-row+.cb-row{margin-top:8px}.cb-caption{min-height:2.6em;margin:8px 0 0;font-size:15.5px;line-height:1.55}.cb-note{color:var(--sim-dim);margin:6px 0 0;font-size:13px}.cb-steps{gap:6px;margin:10px 0 0;padding:0;font-size:14.5px;list-style:none;display:grid}.cb-steps li{color:var(--sim-dim);grid-template-columns:24px minmax(0,1fr);gap:8px;display:grid}.cb-steps li span{border:1.5px solid #4a5b72;border-radius:50%;place-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:grid}.cb-steps li[data-done]{color:var(--sim-ink)}.cb-steps li[data-done] span{color:#fff;background:#2f9e55;border-color:#2f9e55}.cb-panel .atom circle{stroke:#00000059;stroke-width:1.5px}.cb-panel .atom text{text-anchor:middle;dominant-baseline:central;fill:#0e1726;pointer-events:none;font-size:21px;font-weight:700}.cb-panel .el-H circle{fill:#e9eef5}.cb-panel .el-N circle{fill:#6ea8ff}.cb-panel .el-O circle{fill:#ff7a6b}.cb-panel .el-B circle{fill:#f4a98a}.cb-panel .el-F circle{fill:#a6e3a1}.cb-panel .el-Cl circle{fill:#7fd17a}.cb-panel .el-S circle{fill:#f2d264}.cb-panel .el-Al circle{fill:#b8c2cf}.cb-panel .el-Cu circle{fill:#e39a5f}.cb-panel .el-Ag circle{fill:#d6dbe2}.cb-panel .el-Co circle{fill:#ef8fb8}.cb-panel .el-K circle,.cb-panel .el-Na circle{fill:#b99cf0}.cb-panel .stick{stroke:var(--cb-line);stroke-width:6px;stroke-linecap:round}.cb-panel .bracket{fill:none;stroke:#c9d4e3;stroke-width:2.5px}.cb-panel .charge{fill:var(--sim-ink);font-size:22px;font-weight:700}.cb-panel .lbl{fill:var(--sim-dim);font-size:18px}.cb-panel .lbl.mid{text-anchor:middle}.cb-panel .lbl.ink{fill:var(--sim-ink)}.cb-panel .lp{fill:#ffd36b}.cb-panel .lobe{fill:#ffd36b29;stroke:#ffd36b;stroke-width:1.5px;stroke-dasharray:4 3}.cb-panel .empty-orb{fill:none;stroke:#9fc3ea;stroke-width:1.5px;stroke-dasharray:5 4}.cb-cards{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px;display:grid}.cb-card{min-height:64px;color:var(--sim-ink);font:inherit;cursor:pointer;background:#16212f;border:1.5px solid #33445a;border-radius:12px;align-content:center;justify-items:center;gap:2px;padding:6px 4px;transition:transform .15s,border-color .15s;display:grid}.cb-card b{font-size:19px}.cb-card small{color:var(--sim-dim);text-align:center;font-size:12px;line-height:1.25}.cb-card[aria-pressed=true]{border-color:#ffd36b;transform:translateY(-3px);box-shadow:0 4px #ffd36b59}.cb-card .role{border-radius:8px;margin-top:2px;padding:1px 6px;font-size:11.5px}.cb-card .role.donor{color:#9cc2ff;background:#5b9bff33}.cb-card .role.acceptor{color:#ffbf80;background:#ff9d3c33}.cb-card .role.none{color:var(--sim-dim);background:#8fa0b533}.cb-result{background:#121d2c;border:1px solid #33445a;border-radius:12px;margin-top:10px;padding:10px 12px}.cb-result[data-ok=true]{border-color:#2f9e55}.cb-result[data-ok=false]{border-color:#c4554d}.cb-result h4{margin:0 0 4px;font-size:16px}.cb-eq{overflow-wrap:anywhere;font-size:17px;font-weight:600}.cb-result p{margin:4px 0 0;font-size:14.5px;line-height:1.5}.cb-made{color:var(--sim-dim);flex-wrap:wrap;gap:6px;margin-top:8px;font-size:13.5px;display:flex}.cb-made span{color:#9fe0b0;background:#4cc26a29;border-radius:8px;padding:2px 8px}.cb-panel .e-pair{transition:transform .7s ease-in-out}.cb-panel .shared .e-pair{transform:translateX(var(--cb-shift,0px))}.cb-heater{grid-template-columns:minmax(0,1fr);gap:10px;display:grid}@media (width>=720px){.cb-heater{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}.cb-slider{accent-color:#ff9d3c;width:100%;height:40px}.cb-readout{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px;display:grid}.cb-readout div{color:var(--sim-dim);background:#121d2c;border-radius:10px;padding:6px 8px;font-size:13px}.cb-readout b{color:var(--sim-ink);font-size:16px;display:block}.cb-panel .flame{transform-origin:50% 100%;transition:transform .3s,opacity .3s}.cb-panel .solid{transition:fill .6s}.cb-panel .vapour{fill:none;stroke:#cfe3ff;stroke-width:3px;stroke-linecap:round;opacity:0}.cb-panel[data-steam] .vapour{animation:1.6s ease-out 2 cb-steam}@keyframes cb-steam{0%{opacity:0;transform:translateY(10px)}30%{opacity:.9}to{opacity:0;transform:translateY(-40px)}}.cb-panel .water{transition:opacity .5s,transform .6s}.cb-panel .water[data-gone]{opacity:0;transform:translateY(-30px)}@media (prefers-reduced-motion:reduce){.cb-panel *{transition:none!important;animation:none!important}}.cb-hook .hit{fill:#0000;stroke:none}.cb-hook .hook-bond{transition:stroke 1.4s .3s}.cb-hook .hook-bond[data-new]{stroke:var(--cb-coord);transition:none}.cb-hook .hook-proton[data-free]{cursor:grab}.cb-hook .hook-proton[data-free] circle:not(.hit){fill:#ffe3b3;animation:1.6s ease-in-out infinite cb-pulse}.cb-hook .hook-proton[data-new] circle:not(.hit){stroke:var(--cb-coord);stroke-width:4px}@keyframes cb-pulse{50%{stroke:#ffd36b;stroke-width:5px}}.cb-hook .hook-h[data-pickable]{cursor:pointer}.cb-hook .hook-h[data-pickable] circle:not(.hit){stroke:#ffd36b;stroke-width:2.5px;stroke-dasharray:5 4}.cb-hook .hook-h[data-picked] circle:not(.hit){stroke:#e6edf6;stroke-width:4px;stroke-dasharray:none}.cb-hook .hook-h[data-truth] circle:not(.hit){stroke:var(--cb-coord);stroke-width:6px;stroke-dasharray:none}.cb-hook .hook-hint{fill:none;stroke:#ffd36b;stroke-width:2px;stroke-dasharray:6 6;opacity:.7}.cb-matcher .cb-darrow{stroke-dasharray:300;stroke-dashoffset:300px;animation:.8s ease-out .2s forwards cb-draw}@keyframes cb-draw{to{stroke-dashoffset:0}}.cb-matcher .cb-pairfig{max-width:520px;margin-bottom:4px}@media (prefers-reduced-motion:reduce){.cb-matcher .cb-darrow{stroke-dashoffset:0}}.cbl{margin:0}.cbl-compounds{flex-wrap:wrap;gap:6px;display:flex}.cbl-compounds .sim-btn.small{min-height:40px}.cbl-name{margin:8px 0 6px;font-size:15px}.cbl-brushes{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;display:grid}.cbl-brush{justify-content:flex-start;font-size:14px}.cbl-brush i,.cbl-tally i{border-top:4px solid var(--cb-line);width:22px;height:0;margin-right:2px;display:inline-block}.t-covalent i{border-top-color:var(--cb-cov)}.t-coordinate i{border-top-color:var(--cb-coord)}.t-ionic i{border-top:4px dashed var(--cb-ionic)}.t-hbond i{border-top:4px dotted var(--cb-hb)}.cb-panel .cbl-brush[aria-pressed=true]{color:var(--sim-ink);background:#24344a;border-color:#ffd36b;box-shadow:inset 0 0 0 1px #ffd36b}.cbl-svg{margin-top:10px;cursor:pointer;max-width:680px;margin-inline:auto}.cbl-bond .line{fill:none;stroke:var(--cb-line);stroke-width:6px;stroke-linecap:round}.cbl-bond[data-dash] .line{stroke-width:4px;stroke-dasharray:8 8}.cbl-bond .halo{fill:none;stroke:#0000;stroke-width:18px;stroke-linecap:round}.cbl-bond[data-type=covalent] .line{stroke:var(--cb-cov);stroke-dasharray:none;stroke-width:7px}.cbl-bond[data-type=coordinate] .line{stroke:var(--cb-coord);stroke-dasharray:none;stroke-width:7px}.cbl-bond[data-type=ionic] .line{stroke:var(--cb-ionic);stroke-dasharray:10 8;stroke-width:5px}.cbl-bond[data-type=hbond] .line{stroke:var(--cb-hb);stroke-dasharray:2 8;stroke-width:6px}.cbl-bond[data-verdict=wrong-type] .halo{stroke:#e6504673}.cbl-bond[data-verdict=wrong-count] .halo{stroke:#ffd36b66}.cbl-mark circle{fill:#0e1726;stroke-width:2px}.cbl-mark text{text-anchor:middle;dominant-baseline:central;font-size:15px;font-weight:700}.cbl-mark[data-verdict=ok] circle{stroke:#4cc26a}.cbl-mark[data-verdict=ok] text{fill:#4cc26a}.cbl-mark[data-verdict=wrong-type] circle{stroke:#ff6b5b}.cbl-mark[data-verdict=wrong-type] text{fill:#ff6b5b}.cbl-mark[data-verdict=wrong-count] circle{stroke:#ffd36b}.cbl-mark[data-verdict=wrong-count] text{fill:#ffd36b}.cbl-chips{flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;display:flex}.cb-panel .cbl-chip{border-width:2px;font-size:14px}.cb-panel .cbl-chip[data-type=covalent]{border-color:var(--cb-cov)}.cb-panel .cbl-chip[data-type=coordinate]{border-color:var(--cb-coord)}.cb-panel .cbl-chip[data-type=ionic]{border-color:var(--cb-ionic);border-style:dashed}.cb-panel .cbl-chip[data-type=hbond]{border-color:var(--cb-hb);border-style:dotted}.cb-panel .cbl-chip[data-verdict=wrong-type]{box-shadow:0 0 0 3px #e6504680}.cb-panel .cbl-chip[data-verdict=ok]{box-shadow:0 0 0 3px #4cc26a73}.cbl-tally{color:var(--sim-dim);flex-wrap:wrap;gap:4px 14px;margin:10px 0 8px;font-size:14px;display:flex}.cbl-tally b{color:var(--sim-ink)}.cbl-status[data-ok]{color:#9fe0b0}.cbl-centre{background:#121d2c;border-radius:12px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:8px;padding:10px;font-size:14px;display:grid}.cbl-centre b{font-size:17px;display:block}.cbl-arrow{color:#ffd36b;font-size:24px}.cbl-ag,.cbl-probe{border-top:1px solid #2a3a50;margin-top:12px;padding-top:10px;font-size:14.5px}.cbl-ag{grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:10px;display:grid}.cbl-tube{width:64px}.cbl-ppt{animation:1.2s ease-out cbl-settle}@keyframes cbl-settle{0%{opacity:0;transform:translateY(-50px)}}.cb-panel .cbl-probe-btn[data-state=wrong]{opacity:.55;text-decoration:line-through}.cb-panel .cbl-probe-btn[data-state=right]{color:#fff;background:#2f9e55;border-color:#2f9e55}.cbl-bottom{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px;display:grid}@media (width>=900px){.cbl-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}.cbl-foot{color:var(--text-muted);margin:10px 0 0;font-size:13px}.cb-panel .cbl-brush{text-align:left;padding:4px 10px;line-height:1.25}