body{color:#fff;background-color:#333;justify-content:center;margin:0;padding:20px;font-family:Microsoft JhengHei,Noto Sans TC,sans-serif;display:flex}h1{text-align:center;color:#333;margin-bottom:20px}.bonding-controls{z-index:101;justify-content:center;gap:15px;margin-bottom:20px;display:flex;position:relative}.btn-mode:disabled{cursor:not-allowed;pointer-events:none;color:#666!important;opacity:.8!important;background-color:#aaa!important;border-color:#999!important}@media (width<=768px){body{align-items:stretch!important}.main-container{-webkit-overflow-scrolling:touch;width:100vw;max-width:100vw;padding:10px 0;overflow:auto;align-items:stretch!important}.main-container h1{text-align:center;z-index:10;background:#fff;width:100%;margin:0;padding:10px 0;position:sticky;left:0;right:0}.bonding-controls{z-index:10;background:#fff;justify-content:center;width:100%;padding:10px 0;position:sticky;left:0;right:0}#periodic-table{min-width:max-content;margin:0 15px}}.landscape-overlay{z-index:10000;color:#fff;text-align:center;background:#000000f2;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:none;position:fixed;top:0;left:0}.landscape-overlay .rotate-icon{margin-bottom:20px;font-size:60px;animation:2s ease-in-out infinite rotate-phone}.landscape-overlay p{margin-bottom:20px;font-size:18px}@keyframes rotate-phone{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}@media (width<=1024px) and (orientation:portrait){body.force-landscape .landscape-overlay{display:flex}body.force-landscape #ionic-bonding-area,body.force-landscape #covalent-bonding-area{display:none!important}}.skip-link{color:#fff;z-index:10000;background:#06c;border-radius:0 0 8px 8px;padding:10px 20px;font-weight:700;text-decoration:none;position:absolute;top:-100px;left:50%;transform:translate(-50%)}.skip-link:focus{outline-offset:2px;outline:3px solid #fc0;top:0}.label-cell{color:#666;pointer-events:none;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.label-title{font-size:14px}.label-cell.group-label{flex-direction:column;line-height:1.1}.group-ab{color:#888;font-size:9px;font-weight:400}.label-corner{flex-direction:column;justify-content:space-between;align-items:flex-start;padding:2px 4px;display:flex}.corner-group{align-self:flex-end}.corner-period{align-self:flex-start}.clickable-group{pointer-events:auto;cursor:pointer;background-color:#4fc3f733;border:1px solid #4fc3f780;border-radius:4px;padding:2px 4px;transition:all .2s}.clickable-group:hover{background-color:#4fc3f766;transform:scale(1.05)}.clickable-group:focus{outline-offset:2px;background-color:#4fc3f766;outline:2px solid #06c}.clickable-period{pointer-events:auto;cursor:pointer;background-color:#ff980033;border:1px solid #ff980080;border-radius:4px;padding:2px 4px;transition:all .2s}.clickable-period:hover{background-color:#ff980066;transform:scale(1.05)}.clickable-period:focus{outline-offset:2px;background-color:#ff980066;outline:2px solid #06c}.legend-box{flex-wrap:wrap;grid-area:2/4/4/13;place-content:center;gap:8px 15px;padding:10px;display:flex}.legend-row{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.legend-item{color:#333;align-items:center;font-size:14px;display:flex}.legend-color{border:1px solid #ccc;border-radius:3px;width:20px;height:20px;margin-right:5px}:root{--pt-axis:30px;--pt-cell-w:62px;--pt-cell-h:88px}#periodic-table{grid-template-columns:var(--pt-axis) repeat(18, var(--pt-cell-w));grid-template-rows:var(--pt-axis) repeat(7, var(--pt-cell-h)) 0px 0px 0px;background-color:#fff;border-radius:8px;gap:4px;width:fit-content;padding:10px;transition:grid-template-rows .3s ease-out;display:grid}#periodic-table.show-lanthanoids{grid-template-rows:var(--pt-axis) repeat(7, var(--pt-cell-h)) 20px var(--pt-cell-h) 0px}#periodic-table.show-actinoids{grid-template-rows:var(--pt-axis) repeat(7, var(--pt-cell-h)) 20px 0px var(--pt-cell-h)}#periodic-table.show-lanthanoids.show-actinoids{grid-template-rows:var(--pt-axis) repeat(7, var(--pt-cell-h)) 20px var(--pt-cell-h) var(--pt-cell-h)}.element{box-sizing:border-box;color:#000;cursor:pointer;border-radius:4px;flex-direction:column;justify-content:space-between;padding:4px;transition:transform .1s,box-shadow .1s;display:flex;position:relative}.element:hover,.element:focus{z-index:10;border:1px solid #000;transform:scale(1.15);box-shadow:0 0 10px #00000080}.element:focus,.element:focus-visible{outline-offset:2px;outline:3px solid #06c}.at-num{text-align:left;font-size:12px;font-weight:700}.symbol{text-align:center;margin-top:-5px;font-size:22px;font-weight:700}.t-name{text-align:center;font-size:15px}.hidden{opacity:0;pointer-events:none;display:none!important}.range-cell{cursor:pointer;color:#333;background-color:#fff;border:3px solid #ccc;border-radius:4px;justify-content:center;align-items:center;font-size:14px;font-weight:700;transition:all .2s;display:flex}.range-cell .at-num{width:100%;font-size:11px}.range-cell .symbol{margin-top:auto;margin-bottom:auto;font-size:20px}.range-cell:hover,.range-cell:focus{background-color:#f0f0f0;transform:scale(1.05);box-shadow:0 0 8px #0000004d}.modal{z-index:1000;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal[aria-hidden=false]{display:flex}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0009;width:100%;height:100%;position:absolute;top:0;left:0}.modal-content{background:linear-gradient(145deg,#fff,#d9e2ec);border:1px solid #fffc;border-bottom-color:#0052cc33;border-radius:16px;flex-direction:row;max-width:90vw;max-height:90vh;animation:.3s ease-out modalSlideIn;display:flex;position:relative;overflow:hidden;box-shadow:10px 10px 20px #b8c2cc,-10px -10px 20px #fff,0 0 40px #00b4d826}#element-modal .modal-content{max-width:600px}.modal-main-content{flex-direction:column;flex-shrink:0;width:580px;max-width:100%;max-height:90vh;display:flex;overflow-y:auto}.modal-content:before{content:"";pointer-events:none;z-index:0;background:linear-gradient(90deg,#0000,#00b4d81a,#0000);width:100%;height:100%;position:absolute;top:0;left:-50%;transform:skew(-25deg)}.modal-content>*{z-index:1;position:relative}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-close{color:#102a43;cursor:pointer;z-index:10;background:linear-gradient(145deg,#fff,#d9e2ec);border:1px solid #00b4d84d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:28px;transition:background-color .2s,transform .2s,box-shadow .2s;display:flex;position:absolute;top:12px;right:12px;box-shadow:3px 3px 6px #b8c2cc,-3px -3px 6px #fff}.modal-close:hover,.modal-close:focus{background:linear-gradient(145deg,#d9e2ec,#fff);transform:scale(1.1);box-shadow:0 0 15px #00b4d866,3px 3px 6px #b8c2cc,-3px -3px 6px #fff}.modal-close:focus{outline-offset:2px;outline:3px solid #00b4d8}.card-model-section{flex-shrink:0;justify-content:center;align-items:center;min-height:225px;padding:30px 20px 15px;display:flex;position:relative;background:linear-gradient(#4f7194 0%,#8fa7bd 55%,#e8eef3 100%)!important}.card-model-section.mode-lewis,.card-model-section.mode-2d{background:linear-gradient(#e8eef3 0%,#f2f4f8 100%)!important}model-viewer{--poster-color:transparent;background:0 0;border-radius:50%;width:360px;height:300px;display:block}model-viewer::part(default-ar-button){display:none!important}.model-loading{color:#fff;white-space:nowrap;pointer-events:none;z-index:5;background:#1e1e1ea6;border-radius:20px;padding:8px 18px;font-size:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-model-section.mode-lewis .model-loading,.card-model-section.mode-2d .model-loading{display:none!important}.ar-launch-btn{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#102a43;cursor:pointer;background:linear-gradient(145deg,#fffffff2,#d9e2ecf2);border:1px solid #00b4d866;border-radius:24px;align-items:center;gap:5px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s;display:none;position:absolute;bottom:10px;right:15px;box-shadow:3px 3px 6px #b8c2cc80,-2px -2px 4px #fffc,0 0 10px #00b4d826}.ar-launch-btn .material-symbols-outlined{color:#00b4d8;font-size:20px}.ar-launch-btn:hover,.ar-launch-btn:focus{background:linear-gradient(145deg,#d9e2ecf2,#fffffff2);transform:scale(1.05);box-shadow:0 0 15px #00b4d866,3px 3px 6px #b8c2cc80,-2px -2px 4px #fffc}.ar-launch-btn:focus{outline-offset:2px;outline:3px solid #00b4d8}.ar-launch-btn:active{transform:scale(.97)}.card-model-section.mode-lewis .ar-launch-btn,.card-model-section.mode-2d .ar-launch-btn{display:none!important}.lewis-dot-display{justify-content:center;align-items:center;width:100%;height:225px;display:none;position:relative}.card-model-section.mode-lewis .lewis-dot-display{display:flex!important}.card-model-section.mode-2d #main-atom-canvas{display:block!important}.card-model-section.mode-lewis model-viewer,.card-model-section.mode-2d model-viewer{display:none!important}#main-atom-canvas{background:radial-gradient(#00b4d80d 0%,#0000 70%);border-radius:50%;width:360px;height:300px;display:none}#lewis-symbol{z-index:1;background:linear-gradient(#102a43 0%,#1a3a5c 30%,#2d5a87 60%,#102a43 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(2px 2px 4px #102a434d);-webkit-background-clip:text;background-clip:text;font-family:Times New Roman,serif;font-size:3rem;font-weight:700;position:relative}.lewis-dot-display .dot{opacity:0;visibility:hidden;background:radial-gradient(circle at 30% 30%,#4dd8ff 0%,#00b4d8 40%,#0096c7 100%);border-radius:50%;width:12px;height:12px;transition:opacity .3s,visibility .3s;position:absolute;box-shadow:0 0 8px #00b4d899,0 0 15px #00b4d84d,inset 1px 1px 2px #ffffff80}.lewis-dot-display .dot.show{opacity:1;visibility:visible}.lewis-dot-display .dot-right-1{margin-left:45px;top:50%;left:50%;right:auto;transform:translateY(-12px)}.lewis-dot-display .dot-right-2{margin-left:45px;top:50%;left:50%;right:auto;transform:translateY(6px)}.lewis-dot-display .dot-left-1{margin-left:-57px;top:50%;left:50%;transform:translateY(-12px)}.lewis-dot-display .dot-left-2{margin-left:-57px;top:50%;left:50%;transform:translateY(6px)}.lewis-dot-display .dot-top-1{top:65px;left:50%;transform:translate(-12px)}.lewis-dot-display .dot-top-2{top:65px;left:50%;transform:translate(6px)}.lewis-dot-display .dot-bottom-1{bottom:65px;left:50%;transform:translate(-12px)}.lewis-dot-display .dot-bottom-2{bottom:65px;left:50%;transform:translate(6px)}.toggle-model-btn{cursor:pointer;color:#102a43;background:linear-gradient(145deg,#fff,#d9e2ec);border:1px solid #00b4d84d;border-radius:8px;margin:0 auto 20px;padding:8px 16px;font-family:inherit;font-size:13px;transition:background-color .2s,transform .2s,box-shadow .2s;display:block;box-shadow:4px 4px 8px #b8c2cc,-4px -4px 8px #fff}.toggle-model-btn:hover,.toggle-model-btn:focus{background:linear-gradient(145deg,#d9e2ec,#fff);transform:scale(1.02);box-shadow:0 0 15px #00b4d84d,4px 4px 8px #b8c2cc,-4px -4px 8px #fff}.toggle-model-btn:focus{outline-offset:2px;outline:3px solid #00b4d8}.toggle-model-btn[aria-pressed=true]{color:#fff;background:linear-gradient(145deg,#00b4d8,#0096c7);border-color:#0077b6;box-shadow:inset 2px 2px 4px #0003,0 0 15px #00b4d866}.card-middle-section{align-items:stretch;gap:20px;padding:0 20px 20px 45px;display:flex}.element-box{border:1px solid #00b4d84d;border-bottom-color:#0052cc33;border-radius:12px;justify-content:center;align-items:center;min-width:100px;padding:10px 15px;display:flex;box-shadow:5px 5px 10px #b8c2cc,-5px -5px 10px #fff}.mass-number-wrapper,.atomic-number-wrapper{align-items:center;display:inline-flex;position:relative}.atomic-number-wrapper{align-self:flex-end}.number-tooltip{color:#fff;white-space:nowrap;opacity:0;visibility:hidden;z-index:100;pointer-events:none;background:linear-gradient(145deg,#00b4d8,#0096c7);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:700;transition:opacity .2s,visibility .2s;position:absolute;box-shadow:0 2px 8px #00b4d866,0 0 15px #00b4d833}.number-tooltip:after{content:"";border:6px solid #0000;position:absolute}#mass-tooltip{margin-right:8px;top:50%;right:100%;transform:translateY(-50%)}#mass-tooltip:after{border-left-color:#00b4d8;top:50%;left:100%;transform:translateY(-50%)}#atomic-tooltip{margin-right:8px;top:50%;right:100%;transform:translateY(-50%)}#atomic-tooltip:after{border-left-color:#00b4d8;top:50%;left:100%;transform:translateY(-50%)}.mass-number-wrapper:hover #mass-tooltip,.mass-number-wrapper:focus-within #mass-tooltip,.atomic-number-wrapper:hover #atomic-tooltip,.atomic-number-wrapper:focus-within #atomic-tooltip{opacity:1;visibility:visible}.element-box-inner{flex-direction:column;align-items:flex-start;display:flex;position:relative}.isotope-info-btn{cursor:pointer;z-index:10;background:0 0;border:none;padding:2px;line-height:1;transition:transform .2s;position:absolute;top:0;right:-5px}.isotope-info-btn[aria-hidden=true]{display:none}.isotope-info-btn .info-icon{color:#00b4d8;text-shadow:0 0 5px #00b4d880;font-size:16px}.isotope-info-btn:hover,.isotope-info-btn:focus{transform:scale(1.2)}.isotope-info-btn:focus{outline-offset:2px;border-radius:50%;outline:2px solid #00b4d8}.isotope-panel{z-index:50;box-sizing:border-box;background:linear-gradient(#f2f4f8 0%,#d9e2ec 100%);border:1px solid #00b4d84d;border-right:none;border-radius:12px 0 0 12px;flex-shrink:0;min-width:180px;padding:15px;display:none;box-shadow:-6px 0 15px #b8c2cc80,inset 0 1px #fffc}.isotope-panel[aria-hidden=false]{flex-direction:column;justify-content:center;animation:.3s ease-out slideInFromLeft;display:flex}@keyframes slideInFromLeft{0%{opacity:0;margin-left:-50px}to{opacity:1;margin-left:0}}.isotope-panel-title{color:#102a43;text-align:center;border-bottom:2px solid #00b4d8;margin:0 0 10px;padding-bottom:6px;font-size:14px;font-weight:700}.isotope-table{border-collapse:collapse;color:#102a43;width:100%;font-size:12px}.isotope-table th,.isotope-table td{text-align:center;border:1px solid #00b4d84d;padding:4px 6px}.isotope-table thead th{color:#fff;background:linear-gradient(#00b4d8 0%,#0096c7 100%);font-weight:700}.isotope-table thead th:first-child{background:0 0;border:none}.isotope-table tbody th{color:#fff;text-align:center;white-space:nowrap;background:linear-gradient(#00b4d8 0%,#0096c7 100%);font-weight:700}.isotope-table tbody td{background:#ffffffe6}.isotope-symbol{color:#102a43;align-items:flex-end;font-weight:700;display:inline-flex}.isotope-mass{vertical-align:super;margin-right:1px;font-size:10px;position:relative;top:-4px}.isotope-atomic{vertical-align:sub;margin-right:1px;font-size:10px;position:relative;bottom:-2px}.isotope-element{font-size:16px}.isotope-note{color:#102a43;border-top:1px dashed #00b4d880;margin:10px 0 0;padding-top:8px;font-size:11px;line-height:1.5}.nuclide-layout{align-items:center;gap:8px;margin-bottom:5px;padding:2px 10px;display:flex}.nuclide-numbers-col{flex-direction:column;justify-content:space-between;align-items:flex-end;gap:0;min-height:60px;margin-top:-2px;display:flex}.box-mass-number{color:#000;margin-bottom:auto;padding-top:0;font-size:20px;font-weight:700;line-height:1}.box-atomic-number{color:#000;align-self:auto;margin-top:auto;margin-right:0;padding-bottom:0;font-size:20px;font-weight:700;line-height:1}.box-symbol{color:#000;text-align:center;margin-top:-4px;font-size:72px;font-weight:400;line-height:.85}.box-chinese-name{color:#000;align-self:center;margin-top:2px;font-size:36px;font-weight:700}.quiz-section{flex-direction:column;flex:1;justify-content:center;gap:10px;display:flex}.quiz-row{flex-wrap:wrap;align-items:center;gap:4px;line-height:1.5;display:flex}.quiz-label{color:#00b4d8;white-space:nowrap;font-size:15px;font-weight:700}.quiz-input{text-align:center;color:#102a43;background:linear-gradient(145deg,#fff,#f2f4f8);border:1px solid #00b4d866;border-radius:6px;width:45px;height:28px;font-family:inherit;font-size:15px;font-weight:700;transition:border-color .2s,box-shadow .2s,background-color .2s;box-shadow:inset 2px 2px 4px #d9e2ec,inset -2px -2px 4px #fff}.quiz-input:focus{border-color:#00b4d8;outline:none;box-shadow:0 0 10px #00b4d866,inset 2px 2px 4px #d9e2ec,inset -2px -2px 4px #fff}.quiz-input.correct{color:#2e7d32;background:linear-gradient(145deg,#e8f5e9,#c8e6c9);border-color:#4caf50}.quiz-input.incorrect{background:linear-gradient(145deg,#ffebee,#ffcdd2);border-color:#f44336}.quiz-input-small{width:35px}.electron-config-display{color:#102a43;background:linear-gradient(145deg,#fff,#f2f4f8);border:1px solid #00b4d866;border-radius:6px;align-items:center;padding:2px 8px;font-size:15px;display:inline-flex;box-shadow:inset 2px 2px 4px #d9e2ec,inset -2px -2px 4px #fff}#electron-config-prefix,#electron-config-suffix{font-weight:700}.electron-config-display .quiz-input{text-underline-offset:3px;background:0 0;border:none;width:30px;height:24px;text-decoration:underline;text-decoration-thickness:2px}.electron-config-display .quiz-input:focus{box-shadow:none;background-color:#fc03}.electron-config-display .quiz-input.correct{color:#2e7d32;background-color:#4caf504d}.electron-config-display .quiz-input.incorrect{background-color:#f443364d}.quiz-hint{color:#f06;opacity:0;visibility:hidden;margin-left:4px;font-size:12px;transition:opacity .3s,visibility .3s}.quiz-hint.show{opacity:1;visibility:visible}.card-bottom-section{background:linear-gradient(145deg,#00b4d814 0%,#d9e2ec80 100%);border-top:1px solid #00b4d833;border-radius:0 0 14px 14px;padding:20px 20px 20px 45px}.info-row-simple{margin-bottom:8px;line-height:1.6}.info-row-description{margin-top:12px;line-height:1.8}.card-bottom-section .info-label{color:#00b4d8;font-size:15px;font-weight:700}.card-bottom-section .info-value{color:#102a43;font-size:15px}.info-label{color:#00b4d8;font-size:15px;font-weight:700}.info-value{color:#102a43;font-size:15px}@media (prefers-reduced-motion:reduce){.modal-content{animation:none}.element,.quiz-input,.quiz-hint,.dot,#periodic-table,.modal-close,.toggle-model-btn,.range-cell{transition:none}}@media screen and (width<=1300px){:root{--pt-axis:24px;--pt-cell-w:50px;--pt-cell-h:72px}.element .at-num{font-size:10px}.element .symbol{font-size:18px}.element .t-name{font-size:13px}.element.range-cell .symbol{font-size:20px}}@media screen and (width<=600px){.modal-content{border-radius:16px;width:95%;max-width:95%;max-height:90vh}.card-middle-section{flex-direction:column;align-items:center}.element-box{margin-bottom:15px}.quiz-section{width:100%}model-viewer,.lewis-dot-display{width:240px;height:200px}}@media screen and (height<=520px){.modal-content,.modal-main-content{max-height:96vh}.card-model-section{min-height:140px;padding:10px 8px 8px}model-viewer,#main-atom-canvas{width:240px;height:180px}.lewis-dot-display{height:180px}.toggle-model-btn{margin-bottom:8px;padding:5px 10px;font-size:11px}}@media (prefers-contrast:high){.modal-content{border:4px solid #fff}.element:focus{outline:4px solid #000}.quiz-label,.info-label{color:#fc0}.quiz-hint{color:#f06}.card-bottom-section .info-value{color:#fff}.dot{width:14px;height:14px}.isotope-panel{border:3px solid #000}.isotope-table th,.isotope-table td,.number-tooltip{border:2px solid #000}}@media print{.modal{display:none!important}body{background-color:#fff}#periodic-table{box-shadow:none}}.group-modal{z-index:2000;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.group-modal[aria-hidden=false]{display:flex}.group-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0009;width:100%;height:100%;position:absolute;top:0;left:0}.group-modal-content{background:linear-gradient(#fff 0%,#f5f5f5 100%);border-radius:16px;width:95%;max-width:900px;max-height:90vh;padding:25px;animation:.3s ease-out modalSlideIn;position:relative;overflow-y:auto;box-shadow:0 20px 60px #0006}.group-modal-close{color:#333;cursor:pointer;z-index:10;background:#0000001a;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:28px;transition:background-color .2s;display:flex;position:absolute;top:15px;right:15px}.group-modal-close:hover,.group-modal-close:focus{background-color:#0003}.group-modal-close:focus{outline-offset:2px;outline:3px solid #06c}.group-modal-title{color:#333;text-align:center;border-bottom:2px solid #4fc3f7;margin:0 0 20px;padding-bottom:15px;font-size:24px;font-weight:700}.group-comparison-body{justify-content:center;align-items:flex-start;gap:0;display:flex}.group-desc-left{writing-mode:vertical-rl;text-orientation:mixed;color:#333;flex-shrink:0;align-self:stretch;align-items:center;padding:10px 5px;font-size:16px;line-height:1.8;display:flex}.group-elements-list{flex-direction:column;flex-shrink:0;align-items:center;gap:5px;display:flex}.group-element-card{box-sizing:border-box;border:2px solid #ccc;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:70px;height:80px;padding:5px;display:flex;position:relative;box-shadow:0 2px 5px #0000001a}.group-card-atomic{color:#666;font-size:10px;position:absolute;top:5px;left:8px}.group-card-name{color:#666;font-size:10px;position:absolute;top:5px;right:8px}.group-card-symbol{color:#333;font-size:28px;font-weight:700;line-height:1}.group-card-mass{color:#666;margin-top:2px;font-size:9px}.group-models-container{flex-direction:column;align-items:center;gap:15px;display:flex}.group-model-wrapper{justify-content:center;align-items:center;display:flex}.atom-model-canvas{display:block}.group-model-dots{color:#333;text-align:center;width:100%;font-size:28px;line-height:1}.group-desc-right{color:#333;background:#4fc3f71a;border-radius:8px;flex-shrink:0;align-self:center;max-width:180px;margin-left:15px;padding:15px;font-size:14px;line-height:1.8}.highlight-orange{color:#ff6b35;font-weight:700}@media screen and (width<=768px){.group-comparison-body{flex-direction:column;align-items:center}.group-desc-left{writing-mode:horizontal-tb;text-align:center}.group-elements-list{flex-flow:wrap;justify-content:center;align-items:flex-start}.group-models-container{align-items:center}.group-model-dots{margin-left:0}.group-desc-right{max-width:100%;margin-top:15px;margin-left:0}}.period-modal{z-index:2000;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.period-modal[aria-hidden=false]{display:flex}.period-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0009;width:100%;height:100%;position:absolute;top:0;left:0}.period-modal-content{background:#fff;border-radius:16px;max-width:95vw;max-height:90vh;padding:25px;animation:.3s ease-out modalSlideIn;position:relative;overflow:auto;box-shadow:0 20px 60px #0006}.period-modal-close{color:#333;cursor:pointer;z-index:10;background:#0000001a;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:28px;transition:background-color .2s;display:flex;position:absolute;top:15px;right:15px}.period-modal-close:hover,.period-modal-close:focus{background-color:#0003}.period-modal-close:focus{outline-offset:2px;outline:3px solid #06c}.period-arrow-banner{justify-content:center;align-items:center;margin:10px 0 20px;padding:0 30px;display:flex;position:relative}.period-arrow-line{z-index:1;background:linear-gradient(90deg,#ffcc80 0%,#ff9800 50%,#ff5722 100%);border-radius:4px 0 0 4px;height:8px;position:absolute;left:0;right:30px}.period-arrow-head{z-index:1;border-top:20px solid #0000;border-bottom:20px solid #0000;border-left:30px solid #ff5722;width:0;height:0;position:absolute;right:0}.period-desc-top{z-index:2;color:#333;background:#ffffffe6;border:1px solid #ddd;border-radius:4px;padding:5px 15px;font-size:16px;font-weight:500;position:relative}.period-modal-title{color:#333;text-align:center;margin:15px 0;font-size:24px;font-weight:700}.period-content-area{flex-flow:wrap;justify-content:center;align-items:flex-start;gap:10px;padding:10px 0;display:flex}.period-item-wrapper{flex-direction:column;align-items:center;gap:8px;display:flex}.period-element-card{box-sizing:border-box;border:2px solid #ccc;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:65px;height:75px;padding:5px;display:flex;position:relative;box-shadow:0 2px 5px #0000001a}.period-card-atomic{color:#666;font-size:9px;position:absolute;top:4px;left:6px}.period-card-name{color:#666;font-size:9px;position:absolute;top:4px;right:6px}.period-card-symbol{color:#333;font-size:24px;font-weight:700;line-height:1}.period-card-mass{color:#666;margin-top:2px;font-size:8px}.period-model-wrapper{justify-content:center;align-items:center;display:flex}.period-atom-canvas{display:block}.period-desc-bottom{color:#333;text-align:center;margin-top:10px;padding:15px;font-size:14px;line-height:1.8}@media screen and (width<=768px){.period-content-area{gap:5px}.period-element-card{width:50px;height:60px}.period-card-symbol{font-size:18px}.period-desc-top{padding:3px 10px;font-size:12px}.period-arrow-head{border-top-width:15px;border-bottom-width:15px;border-left-width:20px}}.lewis-tooltip{color:#fff;white-space:nowrap;opacity:0;visibility:hidden;z-index:100;pointer-events:none;background:linear-gradient(145deg,#00b4d8,#0096c7);border-radius:6px;margin-left:120px;padding:6px 12px;font-size:14px;font-weight:700;transition:opacity .2s,visibility .2s;position:absolute;top:50%;left:45%;transform:translateY(-50%);box-shadow:0 2px 8px #00b4d866,0 0 15px #00b4d833}.lewis-tooltip:after{content:"";border:6px solid #0000;border-right-color:#00b4d8;position:absolute;top:50%;right:100%;transform:translateY(-50%)}.lewis-dot-display:hover .lewis-tooltip{opacity:1;visibility:visible}.lewis-container{transition:transform 1s ease-in-out;position:relative}.spdf-value{letter-spacing:.5px;color:#102a43;font-weight:700}.spdf-value sup{font-size:.65em}.config-num-btn{cursor:pointer;color:#00b4d8;border:1px solid #0000;border-radius:4px;padding:2px 4px;font-weight:700;transition:all .2s;display:inline-block}.config-num-btn:hover{text-shadow:0 0 5px #00b4d866;background-color:#00b4d81a;transform:scale(1.1)}.attribution-footer{text-align:center;color:#666;width:100%;margin-top:20px;padding:10px;font-size:.85rem;line-height:1.5}.attribution-footer a{color:#08c;font-weight:500;text-decoration:none;transition:color .2s}.attribution-footer a:hover{color:#005580;text-decoration:underline}.config-num-btn:active{transform:scale(.95)}.cs-floating-btn{color:#fff;cursor:pointer;z-index:1001;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;text-decoration:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);animation:.5s ease-out forwards cs-fade-in;display:flex;position:fixed;top:7px;right:30px;box-shadow:0 4px 12px #6366f14d}.cs-floating-btn:hover{transform:translateY(-4px)scale(1.05);box-shadow:0 8px 20px #6366f166}.cs-floating-btn:active{transform:translateY(0)scale(.95)}.cs-floating-btn .material-symbols-rounded{color:#fff;font-size:28px}@keyframes cs-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.cs-floating-btn{width:48px;height:48px;top:11px;right:20px}.cs-floating-btn .material-symbols-rounded{font-size:24px}}