#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.table{display:grid;grid-template-columns:repeat(17,auto) 1fr;margin-right:100px;width:90%;max-width:100%}.group-two{padding-top:100%}.group-three,.group-four,.group-five,.group-six,.group-seven,.group-eight,.group-nine,.group-ten,.group-eleven,.group-twelve{padding-top:300%}.group-thirteen,.group-fourteen,.group-fifteen,.group-sixteen,.group-seventeen{padding-top:100%}.group-eighteen{padding-right:150%}.f-block{padding-top:25%}.storybook-chemical-element{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;width:60px;height:60px;border:1px solid #ccc;opacity:1;transition:.3s;padding:2px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.storybook-chemical-element #atomic-number{font-size:10px;text-align:left;line-height:1;margin:0}.storybook-chemical-element #symbol{font-size:16px;text-align:center;font-weight:700;line-height:1;margin:-2px 0}.storybook-chemical-element #name{font-size:8px;text-align:center;line-height:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.storybook-chemical-element:hover{opacity:1;transition:.6s}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .2s ease-out}.modal-container{background-color:#fff;border-radius:12px;padding:24px;position:relative;width:440px;box-shadow:0 10px 25px #0003;animation:slideIn .3s ease-out;border:1px solid rgba(255,255,255,.1)}.modal-close{background:none;border:none;font-size:1.5rem;position:absolute;top:16px;right:16px;cursor:pointer;color:#666;width:32px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-close:hover{background-color:#0000000d;color:#333}.modal-content{margin-top:8px}.modal-header{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid #eee;margin-bottom:16px}.element-symbol{font-size:2.5rem;font-weight:700;color:#333}.element-name{font-size:1.5rem;color:#666}.element-details{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}.detail-item{background-color:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #eee}.detail-label{font-size:.875rem;color:#666;margin-bottom:4px}.detail-value{font-size:1.125rem;color:#333;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.periodic-table{display:grid;grid-template-columns:repeat(18,62px);gap:2px;padding:20px;background-color:#f5f5f5;border-radius:8px;margin:0 auto}.element-container{width:60px;height:60px;position:relative}[data-group="1"]{grid-column:1}[data-group="2"]{grid-column:2}[data-group="3"]{grid-column:3}[data-group="4"]{grid-column:4}[data-group="5"]{grid-column:5}[data-group="6"]{grid-column:6}[data-group="7"]{grid-column:7}[data-group="8"]{grid-column:8}[data-group="9"]{grid-column:9}[data-group="10"]{grid-column:10}[data-group="11"]{grid-column:11}[data-group="12"]{grid-column:12}[data-group="13"]{grid-column:13}[data-group="14"]{grid-column:14}[data-group="15"]{grid-column:15}[data-group="16"]{grid-column:16}[data-group="17"]{grid-column:17}[data-group="18"]{grid-column:18}[data-period="1"]{grid-row:1}[data-period="2"]{grid-row:2}[data-period="3"]{grid-row:3}[data-period="4"]{grid-row:4}[data-period="5"]{grid-row:5}[data-period="6"]{grid-row:6}[data-period="7"]{grid-row:7}.lanthanide{grid-row:9}.actinide{grid-row:10}.periodic-table:after{content:"";grid-row:8;grid-column:1 / -1;height:20px}.lanthanides-label{grid-row:9;grid-column:1 / 3;align-self:center;font-size:.8em;color:#666}.actinides-label{grid-row:10;grid-column:1 / 3;align-self:center;font-size:.8em;color:#666}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#fff;color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}