.btn{--btn-bg:var(--ink);--btn-fg:var(--white);--btn-border:transparent;border-radius:var(--r-pill);background:var(--btn-bg);height:48px;color:var(--btn-fg);border:1px solid var(--btn-border);font-weight:520;font-size:var(--fs-15);letter-spacing:-.01em;white-space:nowrap;isolation:isolate;transition:transform var(--dur-ui) var(--ease-out), background-color var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out), color var(--dur-m) var(--ease-out), opacity var(--dur-ui);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:10px;padding-inline:22px;display:inline-flex;position:relative;overflow:hidden}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{cursor:not-allowed;opacity:.45}.btn.is-loading{opacity:.8;cursor:progress}.btn--s{height:38px;font-size:var(--fs-14);padding-inline:16px}.btn--l{height:58px;font-size:var(--fs-16);padding-inline:28px}.btn--block{width:100%}.btn:before{content:"";z-index:-1;border-radius:inherit;background:var(--btn-hover,var(--peri-700));transition:transform .5s var(--ease-out);position:absolute;inset:0;transform:translateY(101%)}@media (hover:hover){.btn:hover:not(:disabled):before{transform:translateY(0)}}.btn--primary{--btn-bg:var(--ink);--btn-hover:var(--peri-700)}.btn--secondary{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-border:var(--line-2);--btn-hover:var(--peri-50)}.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-hover:color-mix(in srgb, var(--peri-200) 45%, transparent)}.btn--yield{--btn-bg:var(--yield-500);--btn-fg:var(--white);--btn-hover:var(--yield-ink)}.btn--danger{--btn-bg:var(--white);--btn-fg:var(--danger);--btn-border:color-mix(in srgb, var(--danger) 30%, transparent);--btn-hover:var(--danger-soft)}.btn__label{line-height:1.25;display:inline-flex;position:relative;overflow:hidden}.btn__roll{transition:transform .55s var(--ease-out);display:inline-block;position:relative}.btn__roll:after{content:attr(data-text);position:absolute;top:100%;left:0}@media (hover:hover){.btn:hover:not(:disabled) .btn__roll{transform:translateY(-100%)}}.btn__arrow{width:16px;height:16px;margin-right:-4px;display:inline-grid;position:relative;overflow:hidden}.btn__arrow svg{transition:transform .5s var(--ease-out);grid-area:1/1}.btn__arrow svg+svg{transform:translate(-120%)}@media (hover:hover){.btn:hover:not(:disabled) .btn__arrow svg:first-child{transform:translate(120%)}.btn:hover:not(:disabled) .btn__arrow svg+svg{transform:translate(0)}}.btn__spinner{border:1.6px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite btn-spin}@keyframes btn-spin{to{transform:rotate(360deg)}}.magnetic{display:inline-flex}