.ch4-visualizer-container[data-astro-cid-sgsgmwls]{background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 8px 30px var(--shadow-subtle);border-radius:16px;margin:24px 0 32px;padding:24px;transition:background-color .25s,border-color .25s}.ch4-header[data-astro-cid-sgsgmwls]{& .ch4-visualizer-container{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;max-width:960px;margin:0 auto 28px;padding:18px 20px;font-family:Inter,system-ui,-apple-system,sans-serif;box-shadow:0 10px 30px #0000001f}& .ch4-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}& .ch4-badge{text-transform:uppercase;letter-spacing:.05em;background:var(--gold-wash);color:var(--gold);border:1px solid var(--gold-dim);border-radius:20px;align-items:center;gap:6px;margin-bottom:6px;padding:3px 8px;font-size:.75rem;font-weight:600;display:inline-flex}& .ch4-title{color:var(--text);margin:0 0 4px;font-family:Inter,system-ui,sans-serif;font-size:1.3rem;font-weight:700}& .ch4-subtitle{color:var(--text-dim);max-width:680px;margin:0;font-size:.88rem;line-height:1.45}& .ch4-controls-top{flex-wrap:wrap;align-items:center;gap:8px;display:flex}& .ch4-view-tabs{background:var(--bg);border:1px solid var(--border);border-radius:9px;gap:3px;padding:2px;display:flex}& .ch4-tab-btn{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:7px;padding:5px 10px;font-size:.8rem;font-weight:600;transition:all .2s}& .ch4-tab-btn:hover{color:var(--text)}& .ch4-tab-btn.active{background:var(--gold);color:var(--btn-active-text);box-shadow:0 2px 8px #cf9d2c40}& #ch4ToggleCallouts{background:var(--bg);border:1px solid var(--border);color:var(--text)}& #ch4ToggleCallouts.active{color:#34d399;background:linear-gradient(135deg,#10b98133 0%,#38bdf833 100%);border-color:#10b981}& .ch4-sound-toggle{background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:.95rem;transition:all .2s;display:flex}& .ch4-mol-tabs{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;display:flex}& .ch4-mol-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;border-radius:8px;flex:auto;justify-content:center;align-items:center;gap:5px;min-width:fit-content;padding:6px 12px;font-size:.88rem;font-weight:600;transition:all .2s;display:inline-flex}& .ch4-mol-btn:hover{border-color:var(--gold);color:var(--text);transform:translateY(-1px)}& .ch4-mol-btn.active{border-color:var(--gold);color:var(--gold);background:linear-gradient(135deg,#cf9d2c2e 0%,#38bdf81f 100%);box-shadow:0 2px 8px #cf9d2c1f}& .mol-icon{font-size:.95rem;line-height:1}& .mol-name{letter-spacing:.02em}& .ch4-typing-bar{background:var(--bg);border:1px solid var(--border-soft);border-radius:10px;flex-direction:column;gap:8px;margin-bottom:14px;padding:10px 14px;display:flex}& .ch4-input-wrap{align-items:center;gap:10px;display:flex}& .ch4-input-label{color:var(--text-dim);white-space:nowrap;font-size:.84rem;font-weight:600}& .ch4-input{background:var(--bg-raised);border:1.5px solid var(--border);color:var(--text);letter-spacing:.05em;border-radius:7px;outline:none;flex:1;padding:7px 12px;font-family:JetBrains Mono,monospace;font-size:1.05rem;font-weight:600;transition:border-color .2s,box-shadow .2s}& .ch4-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash-strong)}& .ch4-quick-buttons{flex-wrap:wrap;align-items:center;gap:6px;display:flex}& .ch4-btn{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:7px;align-items:center;gap:5px;padding:5px 10px;font-size:.8rem;font-weight:600;transition:all .2s;display:inline-flex}& .ch4-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}& .btn-atom-dot{border-radius:50%;width:9px;height:9px;display:inline-block}& .primary-dot{background:#10b981;box-shadow:0 0 5px #10b981}& .secondary-dot{background:#fbbf24;box-shadow:0 0 5px #fbbf24}& .ch4-btn-quick-ch4{border-color:var(--gold-dim);color:var(--gold);background:linear-gradient(135deg,#cf9d2c26 0%,#38bdf81a 100%)}& .ch4-btn-autoplay{color:#38bdf8;background:#38bdf81a;border-color:#38bdf866}& .ch4-stage-card{background:radial-gradient(circle at 50% 50%, var(--bg-raised) 0%, var(--bg) 100%);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden}& .ch4-stage-wrap{justify-content:center;align-items:center;width:100%;height:440px;display:flex;position:relative}& .ch4-svg-stage{width:100%;height:100%;overflow:visible}& .ch4-atom-group{transition:transform .65s cubic-bezier(.34,1.56,.64,1),opacity .5s}& .shared-pair{transition:opacity .4s,transform .4s}& .callout-group{transition:opacity .45s,transform .45s}& ellipse[id*=_ov]{transition:opacity .5s}& line[id^=lewis],& text[id^=lewis]{transition:opacity .4s}& .ch4-spin-ring{transform-origin:320px 240px;animation:22s linear infinite spinSlow}& .ch4-status-panel{background:var(--bg-raised);border-top:1px solid var(--border);padding:14px 16px}& .ch4-status-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:12px;display:grid}& .ch4-metric-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:7px;flex-direction:column;gap:3px;padding:8px 12px;display:flex}& .metric-label{text-transform:uppercase;color:var(--text-faint);letter-spacing:.04em;font-size:.7rem;font-weight:600}& .metric-val{color:var(--text);font-family:JetBrains Mono,monospace;font-size:1.05rem;font-weight:700}& .octet-bar-wrap{background:var(--bg-raised);border:1px solid var(--border);border-radius:3px;height:6px;margin-top:2px;overflow:hidden}& .octet-bar{background:linear-gradient(90deg,#10b981 0%,#38bdf8 50%,#fbbf24 100%);border-radius:3px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}& .metric-sub{color:var(--text-dim);font-size:.75rem;font-weight:600}& .ch4-explanation-box{border:1px solid var(--gold-wash-strong);border-left:4px solid var(--gold);background:linear-gradient(135deg,#cf9d2c14 0%,#38bdf80a 100%);border-radius:7px;align-items:center;gap:10px;padding:10px 14px;display:flex}& .explanation-icon{flex-shrink:0;font-size:1.3rem}& .explanation-text{color:var(--text);font-size:.86rem;line-height:1.45}& .ch4-legend{color:var(--text-dim);flex-wrap:wrap;justify-content:center;gap:12px;padding-top:4px;font-size:.78rem;display:flex}& .legend-item{align-items:center;gap:5px;display:inline-flex}& .legend-dot{border-radius:50%;width:8px;height:8px;display:inline-block}@media (width<=768px){& .ch4-visualizer-container{margin-bottom:20px;padding:12px 10px}& .ch4-header{flex-direction:column;align-items:stretch;gap:10px}& .ch4-controls-top{justify-content:space-between;width:100%}& .ch4-mol-tabs{gap:4px;margin-bottom:10px}& .ch4-mol-btn{gap:4px;padding:5px 8px;font-size:.8rem}& .ch4-stage-wrap{height:330px}& .ch4-status-row{grid-template-columns:1fr 1fr;gap:6px}& .ch4-metric-card{padding:6px 8px}& .ch4-metric-card:last-child{grid-column:span 2}& .ch4-typing-bar{gap:6px;padding:8px 10px}& .ch4-btn{padding:4px 8px;font-size:.76rem}}@media (width<=480px){& .ch4-stage-wrap{height:290px}& .ch4-mol-tabs{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}& .ch4-mol-btn:last-child{grid-column:span 2}& .ch4-mol-btn{padding:5px 4px;font-size:.78rem}& .ch4-input-label{font-size:.78rem}}}.ch4-edu-section[data-astro-cid-ufzremjg]{margin:32px 0 40px}.ch4-edu-grid[data-astro-cid-ufzremjg]{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:20px;display:grid}.ch4-edu-card[data-astro-cid-ufzremjg]{background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 4px 16px var(--shadow-subtle);border-radius:12px;padding:20px;transition:transform .2s,border-color .2s}.ch4-edu-card[data-astro-cid-ufzremjg]:hover{border-color:var(--gold);transform:translateY(-2px)}.ch4-edu-card[data-astro-cid-ufzremjg] h4[data-astro-cid-ufzremjg]{color:var(--gold);margin:0 0 10px;font-size:1.05rem;font-weight:600}.ch4-edu-card[data-astro-cid-ufzremjg] p[data-astro-cid-ufzremjg]{color:var(--text-dim);margin:0;font-size:.9rem;line-height:1.6}