.periodic-table{display:grid;gap:1rem}.periodic-table__filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}.periodic-table__grid{display:grid;grid-template-columns:repeat(18,minmax(3rem,1fr));grid-template-rows:repeat(9,minmax(4.8rem,auto));gap:.3rem;overflow:auto;padding:.5rem;border:1px solid var(--border,#dbe2ea);border-radius:1rem;background:var(--surface,#fff)}.periodic-table__grid>[role=listitem]{min-width:0}.periodic-table__element{display:grid;width:100%;height:100%;align-content:center;justify-items:center;gap:.08rem;min-width:0;padding:.2rem .1rem;border:1px solid var(--border,#dbe2ea);border-radius:.5rem;background:var(--surface,#fff);color:var(--text,#182230);cursor:pointer;text-align:center}.periodic-table__element:hover,.periodic-table__element:focus-visible{outline:2px solid var(--accent,#526bff);outline-offset:1px}.periodic-table__element--metal{background:color-mix(in srgb,#76a9fa 16%,white)}.periodic-table__element--nonmetal{background:color-mix(in srgb,#a3e635 18%,white)}.periodic-table__element--metalloid{background:color-mix(in srgb,#fbbf24 20%,white)}.periodic-table__element--lanthanide{background:color-mix(in srgb,#c084fc 17%,white)}.periodic-table__element--actinide{background:color-mix(in srgb,#fb7185 16%,white)}.periodic-table__number{font-size:.65rem;opacity:.75}.periodic-table__symbol{font-size:1.2rem;line-height:1}.periodic-table__name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6rem}.periodic-table__panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1rem}.periodic-table__details{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem}.periodic-table__details dt{font-weight:600}.periodic-table__details dd{margin:0;text-align:end}.periodic-table__quiz{display:grid;gap:.8rem}@media(max-width:600px){.periodic-table__grid{grid-template-columns:repeat(18,3.1rem);grid-template-rows:repeat(9,4.4rem);gap:.2rem}.periodic-table__name{font-size:.54rem}}