.periodic-shell{position:relative}
.periodic-hint{display:none;margin:0 0 10px;color:#60758a;font-size:11px;font-weight:700}
.ptable.periodic-grid{
  --cell:46px;
  display:grid;
  grid-template-columns:repeat(18,var(--cell));
  grid-template-rows:20px repeat(7,var(--cell)) 12px repeat(2,var(--cell));
  gap:4px;
  width:max-content;
  min-width:100%;
  justify-content:center;
  align-items:stretch;
}
.periodic-grid .group-label{
  color:#7890a4;
  font-size:8px;
  font-weight:800;
  text-align:center;
  align-self:end;
}
.periodic-grid .series-label{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:5px;
  color:#60758a;
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
}
.periodic-grid .pel{
  position:relative;
  width:auto;
  min-width:0;
  height:auto;
  aspect-ratio:auto;
  padding:3px;
  border:1px solid rgba(11,47,91,.13);
  border-radius:7px;
  box-shadow:none;
  overflow:hidden;
}
.periodic-grid .pel:nth-last-child(2),
.periodic-grid .pel:nth-last-child(1){grid-column:auto}
.periodic-grid .pel .z{position:absolute;top:3px;left:4px;margin:0;font-size:6px}
.periodic-grid .pel .s{font-size:13px;line-height:1}
.periodic-grid .pel .m{max-width:100%;margin-top:3px;overflow:hidden;font-size:5.5px;line-height:1;white-space:nowrap;text-overflow:ellipsis}
.periodic-grid .pel.is-common{border-color:rgba(255,200,61,.85);box-shadow:inset 0 0 0 1px rgba(255,200,61,.28)}
.periodic-grid .pel:not(.is-common){cursor:default}
.periodic-grid .cat-alkali{background:#ffc6c6}
.periodic-grid .cat-alkaline{background:#ffd6ad}
.periodic-grid .cat-transition{background:#c7ddff}
.periodic-grid .cat-post{background:#bfeee6}
.periodic-grid .cat-metalloid{background:#d9c8ff}
.periodic-grid .cat-nonmetal{background:#c9f1cf}
.periodic-grid .cat-halogen{background:#fff0a6}
.periodic-grid .cat-noble{background:#ffd0e8}
.periodic-grid .cat-lanthanide{background:#e3f5b5}
.periodic-grid .cat-actinide{background:#ffcabd}
.periodic-legend{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:12px;color:#60758a;font-size:9px;font-weight:700}
.periodic-legend span{display:flex;align-items:center;gap:4px}
.periodic-legend i{width:10px;height:10px;border:1px solid rgba(11,47,91,.15);border-radius:3px}
@media(max-width:980px){
  .periodic-shell{margin:0 -8px;padding:0 8px 8px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
  .periodic-hint{display:block}
  .ptable.periodic-grid{--cell:43px;min-width:860px;justify-content:start}
}
@media(max-width:560px){
  .periodic-shell{margin:0 -14px;padding:0 14px 10px}
  .ptable.periodic-grid{--cell:42px;min-width:840px;gap:3px}
  .periodic-grid .pel{border-radius:6px}
  .periodic-legend{font-size:8px}
}