.periodic-table-mode{--cell-min: 3.75rem;--detail-width: 23rem;--cell-hover-scale: 1.45;--cell-hover-bleed: 1rem}.periodic-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(var(--cell-min),1fr));grid-template-rows:repeat(7,auto) var(--space-6) repeat(2,auto);gap:.3rem;min-width:min-content;padding-bottom:var(--space-2)}.periodic-table-mode{overflow-x:auto}.periodic-grid__placeholder{display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);color:var(--color-text-subtle);border:1px dashed var(--glass-border);border-radius:var(--radius-md);aspect-ratio:1}.element-cell{aspect-ratio:1;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;grid-template-areas:"number mass" "symbol symbol" "name name";column-gap:.2rem;padding:.25rem .3rem;background:linear-gradient(155deg,color-mix(in srgb,var(--cell-color) var(--cell-fill-top),transparent),color-mix(in srgb,var(--cell-color) var(--cell-fill-bottom),transparent));border:1px solid color-mix(in srgb,color-mix(in oklab,var(--color-text-strong) var(--cell-border-tint),var(--cell-color)) var(--cell-border-alpha),transparent);border-radius:var(--radius-md);box-shadow:var(--cell-ring-geometry) color-mix(in srgb,var(--cell-color) var(--cell-ring-alpha),transparent),var(--cell-glow-geometry) color-mix(in srgb,color-mix(in oklab,var(--cell-color) var(--cell-glow-depth),var(--color-bg-end)) var(--cell-glow-alpha),transparent),var(--cell-highlight);backdrop-filter:blur(var(--blur-cell));-webkit-backdrop-filter:blur(var(--blur-cell));color:var(--color-text);font:inherit;text-align:left;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.element-cell__number{grid-area:number;font-size:var(--text-3xs);font-weight:var(--weight-bold);line-height:1;color:color-mix(in oklab,var(--color-text-strong) var(--tint-number),var(--cell-color))}.element-cell__symbol{grid-area:symbol;align-self:center;font-size:1.05rem;font-weight:var(--weight-black);line-height:1;letter-spacing:var(--tracking-tight);color:var(--color-text-strong)}.element-cell__name,.element-cell__mass{line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-cell__name{grid-area:name;font-size:.5rem;font-weight:var(--weight-semibold);color:color-mix(in oklab,var(--color-text-strong) var(--tint-name),var(--cell-color))}.element-cell__mass{grid-area:mass;justify-self:end;font-size:.5rem;color:color-mix(in oklab,var(--color-text-strong) var(--tint-mass),var(--cell-color))}.element-cell[data-selected]{outline:2px solid var(--cell-color);outline-offset:1px}@media(hover:hover)and (min-width:56rem){.periodic-table-mode:not([data-detail-open]),.periodic-table-mode[data-detail-open] .periodic-grid{padding:var(--cell-hover-bleed);margin:calc(var(--cell-hover-bleed) * -1)}.element-cell:hover{transform:scale(var(--cell-hover-scale));box-shadow:var(--cell-ring-geometry) color-mix(in srgb,var(--cell-color) var(--cell-ring-alpha-hover),transparent),var(--cell-glow-geometry-hover) color-mix(in srgb,color-mix(in oklab,var(--cell-color) var(--cell-glow-depth),var(--color-bg-end)) var(--cell-glow-alpha-hover),transparent),var(--cell-highlight-hover);z-index:5}}.element-detail{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.element-detail__header{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);align-items:center}.element-detail__badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:2.875rem;height:2.875rem;background:linear-gradient(155deg,color-mix(in srgb,var(--cell-color) var(--badge-fill-top),transparent),color-mix(in srgb,var(--cell-color) var(--badge-fill-bottom),transparent));border:1px solid color-mix(in srgb,var(--cell-color) var(--badge-border-alpha),transparent);border-radius:var(--radius-md);box-shadow:var(--glass-highlight)}.element-detail__badge-number{font-size:var(--text-3xs);line-height:1;color:color-mix(in oklab,var(--color-text-strong) var(--tint-number),var(--cell-color))}.element-detail__badge-symbol{font-size:var(--text-lg);font-weight:var(--weight-black);line-height:1.15;color:var(--color-text-strong)}.element-detail__name{margin:0;font-size:var(--text-xl);font-weight:var(--weight-black);letter-spacing:var(--tracking-tight);color:var(--color-text-strong)}.element-detail__category{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--cell-color)}.element-detail__review{margin:.2rem 0 0;font-size:var(--text-xs);color:var(--color-warning)}.element-detail__close{align-self:start}.bohr-model{width:100%;aspect-ratio:1;min-height:13rem;max-height:18rem;background:radial-gradient(circle at 50% 45%,var(--glass-raised-top),var(--color-bg-end));border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden}.bohr-model canvas{display:block;border-radius:var(--radius-lg)}.element-detail__nav{display:flex;justify-content:space-between;gap:var(--space-2)}.element-detail__nav button{flex:1;text-align:center}.element-detail__description{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text)}.element-detail__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-4);margin:0;padding-top:var(--space-3);border-top:1px solid var(--glass-border)}.element-detail__fact{display:flex;flex-direction:column;gap:.15rem;min-width:0}.element-detail__prose h3{margin:0 0 .2rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-accent)}.element-detail__prose p{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed)}.element-detail__sources{display:flex;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--glass-border)}.element-detail__sources a{font-size:var(--text-sm);color:var(--color-accent);text-decoration:underline}@media(min-width:56rem){.periodic-table-mode[data-detail-open]{display:grid;grid-template-columns:minmax(0,1fr) var(--detail-width);gap:var(--space-6);align-items:start;overflow-x:visible}.periodic-table-mode[data-detail-open] .periodic-grid{min-width:0;overflow-x:auto}.element-detail{position:sticky;top:var(--space-4);max-height:calc(100vh - var(--navbar-height) - var(--space-8));overflow-y:auto}}@media(max-width:55.99rem){.element-detail{position:fixed;inset:0;z-index:50;max-width:32rem;margin:0 auto;overflow-y:auto;border-radius:0;border-width:0}}