:root {
  --hydrogen:#b1d4ed; --alkaliMetals:#ffc29c; --alkaliEarthMetals:#ecd68e;
  --transitionMetals:#8dc6ef; --otherMetals:#b7b9ef; --metalloids:#96dbc6;
  --nonMetals:#b0dfa1; --halogens:#e3b8dd; --nobleGases:#f3acc0;
  --lanthanides:#b8d995; --actinides:#ebc99e;
  --phase-S:#b2d5ef; --phase-L:#88e6d4; --phase-G:#f4c69c; --phase-U:#c8bfd6;
}
[data-category="hydrogen"] {--category:var(--hydrogen)}
[data-category="alkaliMetals"] {--category:var(--alkaliMetals)}
[data-category="alkaliEarthMetals"] {--category:var(--alkaliEarthMetals)}
[data-category="transitionMetals"] {--category:var(--transitionMetals)}
[data-category="otherMetals"] {--category:var(--otherMetals)}
[data-category="metalloids"] {--category:var(--metalloids)}
[data-category="nonMetals"] {--category:var(--nonMetals)}
[data-category="halogens"] {--category:var(--halogens)}
[data-category="nobleGases"] {--category:var(--nobleGases)}
[data-category="lanthanides"] {--category:var(--lanthanides)}
[data-category="actinides"] {--category:var(--actinides)}
[data-phase="S"] {--phase:var(--phase-S)}
[data-phase="L"] {--phase:var(--phase-L)}
[data-phase="G"] {--phase:var(--phase-G)}
[data-phase="U"] {--phase:var(--phase-U)}
.filters {display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:16px;align-items:end;margin:24px 0 14px;padding:22px}
.filters label {margin-top:0}
.filters button {min-height:49px}
.table-options {display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:18px}
.table-options>div:first-child {min-width:210px}
.table-options label {margin-top:0}
.view-switch {display:flex;gap:10px}
.view-switch button[aria-pressed="true"] {border-color:var(--accent);color:var(--accent)}
.periodic-scroll {overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:16px;padding:14px;background:#0c192b}
.periodic-grid {display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:26px repeat(7,82px) 104px 82px;gap:4px;min-width:1060px;align-items:end}
.element-cell {display:flex;flex-direction:column;align-items:center;justify-content:center;height:82px;min-width:0;overflow:hidden;padding:4px 2px;border:2px solid var(--category);border-radius:7px;background:#142539;color:var(--category);text-decoration:none;line-height:1.2}
.element-cell:hover {background:#29405a;transform:translateY(-2px)}
.element-cell:focus-visible {outline-offset:-4px;outline-color:white}
.element-cell strong {font-size:23px;font-weight:600;margin:2px 0}
.element-number {align-self:flex-start;font-size:11px;padding-left:3px;color:var(--ink)}
.element-name {font-size:10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.element-weight {font-size:10px;margin-top:3px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.axis-label {text-align:center;color:var(--muted);align-self:center;font-size:14px}
.series-placeholder {align-self:center;text-align:center;color:var(--muted);font-size:12px}
.series-label {text-align:center;align-self:center;color:var(--muted);font-size:14px;line-height:1.6}
.periodic-grid[data-color="phase"] .element-cell {color:var(--phase);border-color:var(--phase)}
.element-legend {display:flex;flex-wrap:wrap;gap:12px 22px;list-style:none;padding:0;margin:22px 0}
.element-legend li {display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.element-legend li::before {content:"";width:10px;height:10px;border-radius:50%;background:var(--category);flex-shrink:0}
.element-legend li[data-phase]::before {background:var(--phase)}
.periodic-grid.is-list {min-width:0;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));grid-template-rows:none;gap:10px;align-items:stretch}
.is-list .axis-label,.is-list .series-label,.is-list .series-placeholder {display:none}
.periodic-grid.is-list .element-cell {grid-column:auto!important;grid-row:auto!important;height:122px;padding:9px}
.is-list .element-name,.is-list .element-weight {font-size:12px;white-space:normal;text-align:center}
.is-list .element-number {font-size:13px}
.is-list .element-cell strong {font-size:30px}
.element-records {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.element-record {display:flex;gap:16px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:18px;color:var(--ink);text-decoration:none;background:var(--card);min-width:0}
.element-record:hover {border-color:var(--accent)}
.element-record>span:last-child {min-width:0;overflow-wrap:anywhere}
.element-record strong {display:block;font-size:18px;font-weight:500}
.record-symbol {font-size:30px;color:var(--category);min-width:48px;text-align:center}
.record-meta {display:block;font-size:13px;color:var(--muted);line-height:1.6}
.element-heading {display:flex;gap:26px;align-items:center;margin:24px 0}
.element-heading .lead {margin-bottom:0}
.identity-tile {display:flex;flex-direction:column;justify-content:center;min-width:120px;min-height:130px;border:2px solid var(--category);border-radius:18px;padding:12px 18px;color:var(--category);background:var(--card)}
.identity-tile strong {font-size:48px;text-align:center;font-weight:500;line-height:1.3}
.identity-tile span {font-size:16px;color:var(--ink)}
.breadcrumbs {color:var(--muted);font-size:14px}
.element-actions {display:flex;gap:14px;flex-wrap:wrap;margin:26px 0}
.element-details {display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.element-details .result-list>div {display:block;padding:14px 0}
.element-details dt {font-size:15px;margin-bottom:4px}
.element-details dd {font-size:17px;max-width:none;text-align:left;white-space:pre-line;line-height:1.7;overflow-wrap:anywhere}
.atomic-details {grid-column:1 / -1}
.atomic-details .result-list {display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.source-link {margin:24px 0;font-size:15px;color:var(--muted)}
.reference-note {border-left:3px solid var(--accent);padding:16px 20px;background:var(--card);color:var(--muted)}
.element-neighbors {padding:10px 0;justify-content:space-between}
@media(max-width:900px) {
 .filters {grid-template-columns:1fr 1fr}
 .element-records {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px) {
 .filters {padding:18px;gap:14px}
 .filters>div:first-child {grid-column:1/-1}
 .filters button {grid-column:1/-1}
 .table-options {align-items:stretch;gap:14px}
 .table-options>div:first-child {width:100%}
 .view-switch {width:100%}
 .view-switch button {flex:1 1 0;width:0;min-width:0}
 .periodic-scroll {padding:8px}
 .element-records {grid-template-columns:1fr}
 .element-heading {gap:16px;align-items:start}
 .identity-tile {min-width:78px;min-height:100px;padding:10px}
 .identity-tile strong {font-size:34px}
 .element-heading h1 {font-size:29px}
 .element-heading .kicker {font-size:11px;margin-top:0}
 .element-heading .lead {font-size:15px}
 .element-details {grid-template-columns:1fr}
 .atomic-details .result-list {grid-template-columns:1fr}
 .element-actions .button {width:100%;text-align:center}
 .element-legend {gap:12px 16px}
 .element-legend li {font-size:13px}
}
@media(prefers-reduced-motion:reduce) {.element-cell:hover {transform:none}}
.element-heading>div:last-child {min-width:0}
.element-heading h1 {overflow-wrap:anywhere}