.page-wrapper:has(#periodic-grid){max-width:1160px}.page-wrapper:has(#unsur-detail){max-width:980px}.page-hero .lead,.section>p{max-width:80ch}.periodic-toolbar{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.periodic-scroll{-webkit-overflow-scrolling:touch;margin:0 -4px;padding-bottom:10px;padding-left:4px;padding-right:4px;overflow-x:auto}.periodic-grid,.periodic-fblock{grid-template-columns:repeat(18,minmax(34px,1fr));gap:4px;min-width:660px;display:grid}.periodic-fblock{margin-top:14px}.pt-cell{aspect-ratio:1;border:1px solid var(--card-border);background:var(--card-bg);color:var(--fg);cursor:pointer;transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:2px 1px;font-family:inherit;display:flex;position:relative}.pt-cell:hover,.pt-cell:focus-visible{box-shadow:var(--shadow-card-hover);z-index:2;outline:none;transform:translateY(-2px)}.pt-cell.selected{outline:2px solid var(--accent);outline-offset:1px;z-index:3}.pt-cell.dimmed{opacity:.22}.pt-num{color:var(--fg-subtle);font-size:.5rem;line-height:1;position:absolute;top:2px;left:3px}.pt-symbol{font-size:clamp(.82rem,1.3vw,1.35rem);font-weight:800;line-height:1}.pt-name{color:var(--fg-muted);text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:0 2px;font-size:.55rem;line-height:1.1;display:none;overflow:hidden}.pt-num{font-size:clamp(.5rem,.7vw,.68rem)}@media (width>=1100px){.pt-name{margin-top:2px;display:block}.pt-cell{border-radius:8px}.periodic-hint{display:none}}.pt-placeholder{border:1px dashed var(--card-border);color:var(--fg-subtle);text-align:center;cursor:pointer;aspect-ratio:1;border-radius:6px;justify-content:center;align-items:center;padding:2px;font-size:.5rem;line-height:1.1;display:flex}.pt-placeholder:hover{color:var(--fg-muted);border-color:var(--card-border-hover)}.pt-cell[data-cat=nonlogam]{background:#38bdf81f}.pt-cell[data-cat=gas-mulia]{background:#a78bfa29}.pt-cell[data-cat=alkali]{background:#f8717129}.pt-cell[data-cat=alkali-tanah]{background:#fbbf2424}.pt-cell[data-cat=metaloid]{background:#2dd4bf24}.pt-cell[data-cat=halogen]{background:#4ade8024}.pt-cell[data-cat=pasca-transisi]{background:#60a5fa24}.pt-cell[data-cat=transisi]{background:#f472b61f}.pt-cell[data-cat=lantanida]{background:#e879f924}.pt-cell[data-cat=aktinida]{background:#fda4af24}.pt-cell[data-cat=tidak-diketahui]{background:#94a3b81f}.element-detail{border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);margin-top:18px;padding:18px}.element-detail-grid{gap:14px;display:grid}@media (width>=760px){.element-detail-grid{grid-template-columns:minmax(0,1fr) minmax(280px,400px);align-items:start}.element-detail-grid .atom-box{margin-top:0}}.element-detail-grid+.btn{margin-top:14px}.element-detail-actions{grid-template-columns:auto 1fr;gap:10px;margin-top:14px;display:grid}.element-detail-actions .btn{white-space:normal}.atom-box{text-align:center}.atom-mount{flex-direction:column;align-items:center;width:100%;max-width:380px;min-height:300px;margin:6px auto 0;display:flex}.atom-canvas{background:radial-gradient(circle,#38bdf81a 0%,#0000 65%);border-radius:50%;display:block}.atom-legend{color:var(--fg);flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:8px;font-size:.82rem;font-weight:650;display:flex}.atom-legend-item{align-items:center;gap:6px;display:inline-flex}.atom-legend-item:before{content:"";border-radius:50%;width:11px;height:11px}.atom-legend-proton:before{background:radial-gradient(circle at 35% 30%,#fff,#f87171 35%,#b91c1c)}.atom-legend-neutron:before{background:radial-gradient(circle at 35% 30%,#fff,#cbd5e1 35%,#475569)}.atom-legend-electron:before{background:radial-gradient(circle at 35% 30%,#fff,#38bdf8 35%,#0284c7);box-shadow:0 0 6px #38bdf8cc}.element-link-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:14px;display:grid}.element-link{background:var(--card-bg);border:1px solid var(--card-border);color:var(--fg-muted);text-align:center;border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;font-size:.7rem;text-decoration:none;display:flex}.element-link strong{color:var(--fg);font-size:.98rem;font-weight:800}.element-link span{color:var(--fg-subtle);font-size:.62rem}.element-link:hover{border-color:var(--card-border-hover);color:var(--fg)}.periodic-legend{color:var(--fg-muted);flex-wrap:wrap;gap:10px 16px;margin-top:14px;font-size:.78rem;display:flex}.periodic-legend-item{align-items:center;gap:6px;display:flex}.periodic-legend-swatch{border-radius:3px;flex-shrink:0;width:12px;height:12px}