.tool-page__topbar[data-astro-cid-rptytfrh]{justify-content:space-between;align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.tool-page[data-astro-cid-rptytfrh]{padding-block:var(--space-12) var(--space-24)}.tool-page[data-astro-cid-rptytfrh] h1[data-astro-cid-rptytfrh]{margin-top:var(--space-4);font-size:clamp(1.75rem,4vw,2.5rem)}.tool-page__intro[data-astro-cid-rptytfrh]{margin-top:var(--space-4);color:var(--color-text-muted);max-width:42rem;line-height:1.7}.compare{margin-top:var(--space-8)}.compare__chips{align-items:flex-start;gap:var(--space-3);flex-wrap:wrap;display:flex}.compare__chip{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-full);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-left:4px solid var(--tile-color,var(--color-border-strong));font-size:.875rem;font-weight:600;display:inline-flex}.compare__chip[data-category=alkali-metal]{--tile-color:var(--cat-alkali-metal)}.compare__chip[data-category=alkaline-earth-metal]{--tile-color:var(--cat-alkaline-earth-metal)}.compare__chip[data-category=transition-metal]{--tile-color:var(--cat-transition-metal)}.compare__chip[data-category=post-transition-metal]{--tile-color:var(--cat-post-transition-metal)}.compare__chip[data-category=metalloid]{--tile-color:var(--cat-metalloid)}.compare__chip[data-category=nonmetal]{--tile-color:var(--cat-nonmetal)}.compare__chip[data-category=halogen]{--tile-color:var(--cat-halogen)}.compare__chip[data-category=noble-gas]{--tile-color:var(--cat-noble-gas)}.compare__chip[data-category=lanthanide]{--tile-color:var(--cat-lanthanide)}.compare__chip[data-category=actinide]{--tile-color:var(--cat-actinide)}.compare__chip button{background:var(--color-bg-sunken);width:1.25rem;height:1.25rem;color:var(--color-text-muted);cursor:pointer;border:none;border-radius:50%;place-items:center;font-size:1rem;line-height:1;display:grid}.compare__add{position:relative}.compare__add input{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px dashed var(--color-border-strong);color:var(--color-text);background:0 0;min-width:12rem;font-size:.875rem}.compare__add input:focus-visible{border-style:solid;border-color:var(--color-primary);outline:none}.compare__suggestions{z-index:10;width:max-content;min-width:100%;max-height:16rem;padding:var(--space-2);border-radius:var(--radius-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);margin:0;list-style:none;position:absolute;top:calc(100% + .4rem);left:0;overflow-y:auto}.compare__suggestions button{text-align:left;width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;background:0 0;border:none;font-size:.875rem;display:block}.compare__suggestions button:hover{background:var(--color-bg-sunken)}.compare__hint{margin-top:var(--space-6);color:var(--color-text-muted);font-style:italic}.compare__scroll-hint{margin:var(--space-8) 0 var(--space-2);color:var(--color-text-muted);font-size:.75rem;display:none}.compare__table-wrap{margin-top:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-x:auto}@media (width<=640px){.compare__scroll-hint{display:block}.compare__table-wrap{margin-top:var(--space-2)}}.compare__table{border-collapse:collapse;width:100%;font-size:.875rem}.compare__table th,.compare__table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border);white-space:nowrap}.compare__table thead th{background:var(--color-bg-sunken);font-size:.8125rem}.compare__table thead th a{color:var(--color-primary-strong);text-decoration:none}.compare__table thead th a:hover{text-decoration:underline}.compare__table tbody th{color:var(--color-text-muted);background:var(--color-bg-elevated);font-weight:600}.compare__table tr:last-child td,.compare__table tr:last-child th{border-bottom:none}.compare__copy{margin-top:var(--space-6);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);border:1px solid var(--color-border-strong);color:var(--color-text);cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast);background:0 0;font-size:.875rem;font-weight:600}.compare__copy:hover{border-color:var(--color-primary);color:var(--color-primary-strong)}