.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;--btn-pad: 26px;--btn-shift: 14px;min-height:3rem;padding:0 var(--btn-pad);font-family:Geist,ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:20px;font-weight:600;text-decoration:none;color:var(--btn-ink);background-color:var(--btn);border:1px solid transparent;border-radius:.75rem;white-space:nowrap;cursor:pointer}@media (prefers-reduced-motion: no-preference){.btn{transition:color .2s,background-color .2s,border-color .2s,padding .25s cubic-bezier(.2,.7,.2,1)}}.btn:after{content:"";position:absolute;top:50%;right:calc(var(--btn-pad) + var(--btn-shift) - 16px - 6px);width:1rem;height:1rem;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translate(-6px,-50%)}@media (prefers-reduced-motion: no-preference){.btn:after{transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1)}}@media (hover: hover) and (pointer: fine){.btn:hover,.btn:focus-visible{padding-left:calc(var(--btn-pad) - var(--btn-shift));padding-right:calc(var(--btn-pad) + var(--btn-shift))}.btn:hover:after,.btn:focus-visible:after{opacity:1;transform:translateY(-50%)}}.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (hover: hover) and (pointer: fine){.btn:not(.btn--secondary,.btn--ghost):hover,.btn:not(.btn--secondary,.btn--ghost):focus-visible{color:#0a0a0a;background-color:var(--ok-vivid)}}.btn--secondary{color:var(--ink);background-color:transparent;border-color:var(--line-strong)}@media (hover: hover) and (pointer: fine){.btn--secondary:hover,.btn--secondary:focus-visible{color:var(--ink);border-color:var(--ink)}}.btn--ghost{color:var(--ink);background-color:transparent}@media (hover: hover) and (pointer: fine){.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--muted)}}@media (prefers-reduced-motion: no-preference){.btn[data-magnetic]{transition:background-color .2s,color .2s,border-color .2s,padding .25s cubic-bezier(.2,.7,.2,1)}}.btn__container{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}