.btn{--_bg: var(--color-primary);--_fg: var(--color-on-primary, #ffffff);--_bd: transparent;--_bg-hover: var(--_fg);--_fg-hover: var(--_bg);--_bd-hover: var(--_bg);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding-inline:var(--space-4);min-height:44px;line-height:1;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-base);color:var(--_fg);background:var(--_bg);border:1px solid var(--_bd);border-radius:var(--radius-md);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .06s ease}.btn .btn__inner{display:inline-flex;align-items:center;gap:var(--space-2)}.btn .btn__label{white-space:nowrap}.btn__label--srOnly{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.btn:hover{background:var(--_bg-hover);color:var(--_fg-hover);border-color:var(--_bd-hover)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid transparent;background:var(--_bg-hover);color:var(--_fg-hover);border-color:var(--_bd-hover);box-shadow:0 0 0 3px var(--color-focus-ring)}.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}.btn.is-loading{cursor:progress}.btn.is-loading .btn__inner:after{content:"";display:inline-block;inline-size:1rem;block-size:1rem;margin-inline-start:var(--space-2);border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:btn-spin .7s linear infinite}.btn-primary{--_bg: var(--color-primary);--_fg: var(--color-neutral-0);--_bd: color-mix(in oklab, var(--color-primary) 50%, transparent);--_bg-hover: color-mix(in oklab, var(--color-neutral-0) 86%, #000000 14%);--_fg-hover: var(--color-primary);--_bd-hover: var(--color-primary)}.btn-accent{--_bg: var(--color-accent);--_fg: var(--color-neutral-0);--_bd: color-mix(in oklab, var(--color-accent) 50%, transparent);--_bg-hover: var(--_fg);--_fg-hover: var(--_bg);--_bd-hover: var(--color-accent)}.btn-ghost{--_bg: color-mix( in oklab, var(--color-neutral-0) 88%, var(--color-primary) 12% );--_fg: var(--color-primary);--_bd: color-mix(in oklab, var(--color-primary) 35%, transparent);--_bg-hover: var(--_fg);--_fg-hover: var(--_bg);--_bd-hover: var(--color-primary)}.btn-link{--_bg: var(--color-light);--_fg: var(--color-accent);--_bd: transparent;--_bg-hover: var(--color-accent);--_fg-hover: var(--color-neutral-0);--_bd-hover: transparent;padding-inline:0;border:0;text-decoration:underline;text-underline-offset:2px}.btn-link:hover{text-decoration-thickness:2px}.btn-tone-success{--_bg: color-mix( in oklab, var(--color-success, #14805d) 95%, var(--color-neutral-0) 5% );--_fg: var(--color-neutral-0);--_bd: color-mix( in oklab, var(--color-success, #14805d) 40%, transparent );--_bg-hover: var(--_fg);--_fg-hover: var(--_bg);--_bd-hover: var(--color-success, #14805d)}.btn-tone-danger{--_bg: color-mix( in oklab, var(--color-error, #d64545) 95%, var(--color-neutral-0) 5% );--_fg: var(--color-neutral-0);--_bd: color-mix( in oklab, var(--color-error, #d64545) 40%, transparent );--_bg-hover: var(--_fg);--_fg-hover: var(--_bg);--_bd-hover: var(--color-error, #d64545)}.btn-tone-subtle{--_bg: color-mix( in oklab, var(--color-surface) 96%, var(--color-primary) 4% );--_fg: var(--color-primary);--_bd: color-mix( in oklab, var(--color-primary) 18%, transparent );--_bg-hover: var(--_fg);--_fg-hover: var(--_bg);--_bd-hover: var(--color-primary)}.btn-sm{padding-inline:var(--space-3);min-height:38px;font-size:var(--fs-sm)}.btn-md{padding-inline:var(--space-4);min-height:44px;font-size:var(--fs-base)}.btn-lg{padding-inline:var(--space-5);min-height:52px;font-size:var(--fs-lg)}.btn--iconOnly{padding-inline:var(--space-2);min-inline-size:44px}.btn-block{width:100%}.btn :where([slot=icon-left],[slot=icon-right]){display:inline-flex;inline-size:1.125em;block-size:1.125em;line-height:1}.btn-primary .btn__label,.btn-accent .btn__label{color:inherit}@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn.is-loading .btn__inner:after{animation:none}}@media(min-width:768px){.btn-sm{min-height:40px}.btn-md{min-height:46px}.btn-lg{min-height:54px;padding-inline:calc(var(--space-5) + var(--space-1))}}@media(min-width:1024px){.btn{font-size:max(var(--fs-base),.98rem)}}a.btn{text-decoration:none}@keyframes btn-spin{to{transform:rotate(360deg)}}