.electron-transfer-animation{width:min(100%,620px);padding:.65rem}.transfer-step-label,.covalent-animation-label{margin-bottom:.5rem;color:var(--bond-accent);font-size:.56rem;font-weight:850;text-align:center;text-transform:uppercase;letter-spacing:.06em}.transfer-atoms{display:grid;grid-template-columns:100px minmax(120px,1fr) 100px;align-items:center;gap:.45rem}.shell-atom{position:relative;display:grid;place-items:center;width:88px;height:88px;margin:auto;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,transparent 19%),radial-gradient(circle,transparent 0 42%,rgba(59,117,138,.24) 43% 45%,transparent 46% 68%,rgba(59,117,138,.18) 69% 71%,transparent 72%)}.shell-atom strong{font-size:1.05rem}.shell-atom small{position:absolute;top:96px;width:110px;color:#5e747e;font-size:.46rem;line-height:1.3;text-align:center}.shell-ring:before,.shell-ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#3b8fb1;box-shadow:0 0 0 3px #fff}.shell-ring:before{left:5px;top:39px}.shell-ring:after{right:7px;bottom:15px}.nonmetal-atom .shell-ring:after{box-shadow:0 0 0 3px #fff,18px -47px 0 #3b8fb1}.transfer-lane{position:relative;height:68px;border-bottom:2px dashed #86aab7}.transfer-lane b{position:absolute;left:0;right:0;bottom:-22px;color:#607983;font-size:.45rem;text-align:center}.transfer-electron{position:absolute;z-index:3;left:-4px;top:18px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#287fa4;color:#fff;font-size:.52rem;font-style:normal;font-weight:800;box-shadow:0 0 0 6px rgba(40,127,164,.12);animation:electronFly 2.2s var(--electron-delay) cubic-bezier(.45,0,.3,1) infinite}.formed-ions{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:2.2rem auto .45rem}.formed-ions span{display:grid;place-items:center;min-width:62px;height:55px;padding:.25rem;border:2px solid #fff;border-radius:15px;background:linear-gradient(145deg,#fff,var(--bond-soft));font-size:.9rem;font-weight:850;box-shadow:0 0 0 2px #6da4b8}.formed-ions span:last-child{box-shadow:0 0 0 2px #8672bd}.formed-ions b{color:#526f7a;font-size:.47rem}.transfer-formula{color:#536f7b;font-size:.53rem;text-align:center}.transfer-formula strong{color:#234653;font-size:.85rem}.covalent-animation-label{position:absolute;top:.55rem;left:.5rem;right:.5rem;z-index:4}.molecule-board svg{margin-top:.55rem;overflow:visible}.joining-atom{transform-box:fill-box;transform-origin:center;animation:atomsJoin 1.2s var(--join-delay) cubic-bezier(.2,.9,.2,1) both}.forming-bonds{stroke-dasharray:110;stroke-dashoffset:110;animation:bondDraw 1s .7s ease forwards}.shared-electron-pair{transform-box:fill-box;transform-origin:center;opacity:0;animation:sharedPair 1.2s calc(.8s + var(--pair-delay)) ease-in-out infinite alternate}.shared-pair-key{position:absolute;left:0;right:0;bottom:.4rem;color:#5b737e;font-size:.49rem;text-align:center}.shared-pair-key i{display:inline-flex;gap:3px;margin-right:.25rem}.shared-pair-key b{display:block;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #765fae}@keyframes electronFly{0%{left:-4px;transform:scale(.75);opacity:0}15%{opacity:1}72%{left:calc(100% - 21px);transform:scale(1)}88%,100%{left:calc(100% - 21px);transform:scale(.65);opacity:0}}@keyframes atomsJoin{from{opacity:.25;transform:scale(.75)}to{opacity:1;transform:none}}@keyframes bondDraw{to{stroke-dashoffset:0}}@keyframes sharedPair{0%{opacity:.45;transform:scale(.78)}100%{opacity:1;transform:scale(1.28);filter:drop-shadow(0 0 4px #8d72ca)}}@media(max-width:480px){.transfer-atoms{grid-template-columns:75px minmax(80px,1fr) 75px}.shell-atom{width:70px;height:70px}.shell-atom small{top:78px;width:86px}.formed-ions{margin-top:2rem;gap:.4rem}.electron-transfer-animation{padding:.25rem}.covalent-animation-label{font-size:.48rem}}@media(prefers-reduced-motion:reduce){.transfer-electron,.joining-atom,.forming-bonds,.shared-electron-pair{animation-duration:.01ms!important;animation-iteration-count:1!important}}