.pill{--pill-ground:var(--tone-ink);--pill-ink:var(--tone-page);--pill-edge:transparent;--pill-focus:var(--pill-ground);--pill-height:48px;--pill-circle:36px;--pill-inset:calc((var(--pill-height) - var(--pill-circle)) / 2);--pill-lead:24px;--pill-gap:36px;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;height:var(--pill-height);padding-left:var(--pill-lead);padding-right:calc(var(--pill-inset) + var(--pill-circle) + var(--pill-gap));border:0;border-radius:999px;font:inherit;font-size:var(--text-sub);line-height:24px;letter-spacing:var(--tracking-normal);font-weight:500;text-align:left;text-decoration:none;background:var(--pill-ground);color:var(--pill-ink);box-shadow:inset 0 0 0 1px var(--pill-edge);cursor:pointer;transition:opacity .2s ease}.pill:hover{opacity:.85}.pill:focus-visible{outline:2px solid var(--pill-focus);outline-offset:2px}.pill-arrow{position:absolute;right:var(--pill-inset);top:var(--pill-inset);width:var(--pill-circle);height:var(--pill-circle);border-radius:999px;display:grid;place-items:center;background:var(--pill-ink);color:var(--pill-ground)}.pill-arrow svg{transition:rotate .3s var(--ease-swing)}.pill:focus-visible .pill-arrow svg,.pill:hover .pill-arrow svg{rotate:45deg}@media (prefers-reduced-motion:reduce){.pill-arrow svg{transition:none}}.pill-accent{--pill-ground:var(--tone-acid);--pill-ink:var(--tone-acid-ink)}.pill-outline{--pill-ground:var(--tone-page);--pill-ink:var(--tone-ink);--pill-edge:var(--tone-rule);--pill-focus:var(--pill-ink)}.pill-theme{--pill-ground:var(--tone-ink);--pill-ink:var(--tone-page)}