.trio-pills{background:var(--trio-surface);border-bottom:1px solid var(--trio-hairline)}.trio-pills__inner{align-items:center;display:flex;flex-wrap:wrap;gap:12px 20px;padding-block:18px}.trio-pills__label{color:var(--trio-muted);font-family:var(--trio-font-mono);font-size:.66rem;letter-spacing:.12em;margin:0;text-transform:uppercase}.trio-pills__list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}.trio-pills__pill{background:var(--trio-surface);border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--trio-hairline);color:var(--trio-n-600);display:flex;flex-direction:column;gap:2px;justify-content:center;min-height:38px;padding:0 18px;text-decoration:none;transition:border-color .2s ease,background .2s ease,transform .2s ease}.trio-pills__pill:hover{box-shadow:inset 0 0 0 1px var(--trio-primary);color:var(--trio-primary)}.trio-pills__pill:focus-visible{outline:2px solid var(--trio-primary);outline-offset:3px}.trio-pills__pill-text{font-size:.90625rem;font-weight:500;line-height:1.2}.trio-pills__pill-note{color:var(--trio-n-400);font-family:var(--trio-font-mono);font-size:.62rem;letter-spacing:.04em}.trio-pills__pill:has(.trio-pills__pill-note){padding-block:9px}.trio-pills__pill--current{background:linear-gradient(var(--trio-surface),var(--trio-surface)) padding-box,var(--trio-gradient) border-box;border-color:transparent;cursor:default}.trio-pills__all,.trio-pills__pill--current .trio-pills__pill-text{color:var(--trio-primary)}.trio-pills__all{font-family:var(--trio-font-mono);font-size:.66rem;letter-spacing:.1em;margin-left:auto;text-transform:uppercase}.trio-pills__all:after{content:" ↗";font-family:var(--trio-font-body)}@media (prefers-reduced-motion:reduce){.trio-pills__pill{transition:none}.trio-pills__pill:hover{transform:none}}.trio-pills:not(:has(.trio-pills__label)){background:var(--trio-surface-alt);border-bottom:0}.trio-pills:not(:has(.trio-pills__label)) .trio-pills__inner{padding-block:0 76px}.trio-pills:not(:has(.trio-pills__label)) .trio-pills__list{gap:12px}.trio-pills:not(:has(.trio-pills__label)) .trio-pills__pill{background:transparent}@media (max-width:680px){.trio-pills__inner{gap:10px 14px;padding-block:14px}.trio-pills__all{margin-left:0}.trio-pills:not(:has(.trio-pills__label)) .trio-pills__inner{padding-block:0 48px}}