.concept-picture{display:block;width:100%;max-width:440px;margin:12px auto 2px;overflow:visible}
.concept-picture text{font-family:inherit;fill:var(--ink);font-size:13px}
.concept-picture .picture-kicker{font-size:11px;font-weight:750;letter-spacing:1.1px;fill:#426a5c}
.concept-picture .picture-subtitle{font-size:13px;fill:#486158}
.concept-picture .concept-ring{fill:none;stroke:#bac9b8;stroke-width:1.5}
.concept-picture .highlight-ring{stroke:#b89344;stroke-width:2;stroke-dasharray:4 5}
.concept-dot circle{stroke:#fff;stroke-width:1.5}
.concept-dot text{fill:#fff;font-size:14px;font-weight:650}
.plus-dot circle{fill:var(--coral)}.minus-dot circle{fill:var(--blue)}
.concept-nucleus{fill:var(--ink)}
.concept-picture .mini-symbol{font-size:17px;font-weight:650;fill:white}
.concept-picture .state-symbol{font-size:23px;font-weight:650}
.concept-picture .count-label{font-size:13px;font-weight:650}
.concept-picture .shell-label{font-size:12px;letter-spacing:2px;fill:#597365}
.concept-arrow,.callout-line,.nucleus-pointer{fill:none;stroke:#4a7663;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nucleus-pointer{stroke-dasharray:3 4;opacity:.6}
.concept-picture .arrow-label{font-size:12px;font-weight:700}
.concept-banner{fill:#d8e5d2}
.concept-picture .banner-title{font-size:14px;font-weight:700}
.concept-picture .banner-subtitle{font-size:12px;fill:#4d6556}
.charge-pair{fill:#ffffffa6;stroke:#cfddcc}
.unpaired-box{fill:#f9ead0;stroke:#bb8b35;stroke-width:2}
.concept-picture .balance-equation{font-size:17px;font-weight:700}
.concept-picture .charge-result{font-size:34px;font-weight:750}
.concept-picture .charge-classification{font-size:13px;font-weight:750;letter-spacing:.5px}
.charge-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.charge-button{padding:13px 10px;min-height:48px;border-radius:11px;border:1px solid #adc3b8;font-size:13px;font-weight:650;color:var(--ink);background:#fff}
.charge-button:not(:disabled):hover{background:#e7f0e2;border-color:var(--green)}
.add-electron{background:#e6eff8;border-color:#b0c9dd;color:#225782}
.charge-reset{padding:8px 0;margin-top:4px;font-size:12px}
.charge-range{font-size:11px;color:var(--muted);margin:0 0 6px}
.lab-electron-exit{opacity:0;pointer-events:none}
.motion-on .lab-electron-enter{animation:charge-enter .7s ease-out both}
.motion-on .lab-electron-exit{animation:charge-exit .7s ease-in both}
@keyframes charge-enter{from{transform:translate(35px,-30px);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes charge-exit{from{transform:translate(0,0);opacity:1}to{transform:translate(35px,-30px);opacity:0}}
.zoom-wash{fill:#f8faf399}
.electron-space{fill:#fff7;stroke:#a68546;stroke-width:2;stroke-dasharray:3 3}
.concept-picture .zoom-symbol{font-size:39px;font-weight:650}
.concept-picture .callout-label{font-size:12px;font-weight:650}
.completion-tick{fill:none;stroke:#4f8163;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
.concept-picture .fill-count{font-size:30px;font-weight:650}
.symbol-tile{fill:var(--ink);stroke:#a6ba9f;stroke-width:2}
.concept-picture .huge-symbol{fill:#fff;font-size:76px;font-weight:600}
.concept-picture .superscript-charge{fill:#f1cf88;font-size:42px;font-weight:650}
.concept-picture .tile-kicker{fill:#cde0d0;font-size:12px;letter-spacing:3px;font-weight:650}
.motion-on .charge-pair{animation:pair-light 1.4s ease-in-out 2}
.motion-on .unpaired-box,.motion-on .superscript-charge{animation:emphasize-charge 1.5s ease-in-out 2}
.motion-on .completion-tick{animation:draw-tick 1.2s ease-out both}
@keyframes pair-light{0%,100%{stroke:#cfddcc}50%{stroke:#5a8a69;fill:#e0ebdc}}
@keyframes emphasize-charge{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes draw-tick{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.concept-picture *{animation:none!important}}
@media(max-width:760px){.concept-picture{max-width:380px;margin-top:12px}}