.periodic-grid{grid-template-rows:repeat(9,minmax(64px,auto));grid-template-columns:repeat(18,minmax(0,1fr));gap:6px;width:100%;min-width:0;display:grid}.table-band{padding:6px 0 18px;overflow:visible}.element-tile{border:1px solid color-mix(in srgb, var(--tile) 50%, #fff);background:color-mix(in srgb, var(--tile) 18%, #fff);border-radius:8px;grid-template-rows:auto 1fr auto auto;min-width:0;min-height:64px;padding:6px;transition:opacity .16s,transform .16s,border-color .16s;display:grid;position:relative;box-shadow:inset 0 0 0 1px #ffffff85}.element-tile:hover,.element-tile:focus-visible{z-index:5;border-color:color-mix(in srgb, var(--tile) 86%, #111);transform:translateY(-2px)}.element-tile.dimmed{opacity:.22}.element-tile.matched{outline:1px solid color-mix(in srgb, var(--tile) 80%, #111)}.tile-number{color:var(--muted);font-size:.68rem}.element-tile strong{text-overflow:ellipsis;align-self:center;min-width:0;font-size:1.18rem;line-height:1;overflow:hidden}.tile-name,.tile-mass{text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;overflow:hidden}.tile-mass{color:var(--muted)}.element-tooltip{z-index:30;border:1px solid var(--line);width:230px;max-width:72vw;box-shadow:var(--shadow);color:var(--ink);opacity:0;pointer-events:none;background:#fff;border-radius:8px;gap:4px;padding:12px;font-size:.78rem;line-height:1.3;transition:opacity .12s,transform .12s;display:grid;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px)}.element-tile:hover .element-tooltip,.element-tile:focus-visible .element-tooltip{opacity:1;transform:translate(-50%)}.element-tooltip.tooltip-left{left:0;right:auto;transform:translateY(6px)}.element-tooltip.tooltip-right{left:auto;right:0;transform:translateY(6px)}.element-tooltip.tooltip-below{top:calc(100% + 10px);bottom:auto}.element-tile:hover .element-tooltip.tooltip-left,.element-tile:focus-visible .element-tooltip.tooltip-left,.element-tile:hover .element-tooltip.tooltip-right,.element-tile:focus-visible .element-tooltip.tooltip-right{transform:translate(0)}.element-list{gap:8px;display:none}.element-row{border:1px solid var(--line);background:var(--surface);border-radius:8px;grid-template-columns:6px 44px 54px minmax(110px,1fr) minmax(110px,.8fr);align-items:center;min-height:52px;display:grid;overflow:hidden}.category-stripe{background:var(--tile);width:100%;height:100%}.row-number{color:var(--muted);text-align:center;font-size:.82rem}.row-symbol{font-size:1.1rem;font-weight:850}.row-name{font-weight:750}.row-meta{color:var(--muted);font-size:.86rem}.legend-band{flex-wrap:wrap;gap:10px;padding-top:8px;display:flex}.legend-item{color:var(--muted);align-items:center;gap:7px;font-size:.82rem;display:inline-flex}.legend-swatch{background:var(--tile);border-radius:3px;width:12px;height:12px}@media (max-width:1120px){.periodic-grid{grid-template-rows:repeat(9,minmax(56px,auto));gap:4px}.element-tile{min-height:56px;padding:4px}.tile-mass{display:none}}@media (max-width:760px){.show-table .periodic-grid{display:grid}.periodic-grid{grid-template-rows:repeat(9,minmax(36px,auto));gap:2px}.element-tile{border-radius:4px;min-height:36px;padding:2px}.tile-number,.tile-name,.tile-mass{display:none}.element-tile strong{text-align:center;font-size:.68rem}.element-tooltip{width:210px}.show-list .periodic-grid{display:none}.show-list .element-list{display:grid}.element-row{grid-template-columns:6px 38px 48px minmax(86px,1fr)}.row-meta{display:none}}