@layer components{.btn{--x:50%;--y:50%;isolation:isolate;white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;outline:none;justify-content:center;align-items:center;gap:.5rem;font-weight:600;line-height:1;text-decoration:none;transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1),border-color .22s cubic-bezier(.4,0,.2,1),background-color .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1),opacity .22s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative;overflow:hidden;transform:translateZ(0)}.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}.btn:active{transform:translateZ(0)scale(.97)}.btn:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--c-bg) 100%, transparent), 0 0 0 4px color-mix(in srgb, var(--c-primary) 80%, transparent)}.btn--sm{height:2.25rem;padding:0 1rem;font-size:.875rem}.btn--md{height:2.75rem;padding:0 1.25rem;font-size:.875rem}.btn--lg{height:3.25rem;padding:0 1.75rem;font-size:1rem}.btn__glow,.btn__sheen,.btn__border{pointer-events:none;position:absolute;inset:0}.btn__glow{opacity:0;background:radial-gradient(280px circle at var(--x) var(--y), color-mix(in srgb, var(--c-accent) 40%, transparent), transparent 60%);transition:opacity .26s cubic-bezier(.4,0,.2,1)}.btn__sheen{opacity:.4;background:linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 15%, transparent), transparent 72%)}.btn__border{border-radius:inherit;opacity:0;transition:opacity .26s cubic-bezier(.4,0,.2,1)}.btn:hover .btn__glow,.btn:hover .btn__border{opacity:1}.btn__content{z-index:2;align-items:center;gap:.5rem;display:inline-flex;position:relative}.btn--primary{color:var(--c-bg);border:1px solid color-mix(in srgb, var(--c-secondary) 40%, transparent);background:linear-gradient(140deg, var(--c-primary), var(--c-secondary));box-shadow:0 12px 30px color-mix(in srgb, var(--c-primary) 25%, transparent), 0 0 34px color-mix(in srgb, var(--c-secondary) 15%, transparent)}.btn--primary:hover{background:linear-gradient(140deg, color-mix(in srgb, var(--c-primary) 80%, white), var(--c-secondary));box-shadow:0 16px 38px color-mix(in srgb, var(--c-primary) 35%, transparent), 0 0 44px color-mix(in srgb, var(--c-secondary) 25%, transparent)}.btn--primary .btn__border{box-shadow:0 0 0 1px color-mix(in srgb, var(--c-bg) 30%, transparent) inset, 0 0 26px color-mix(in srgb, var(--c-accent) 40%, transparent)}.btn--secondary{color:var(--c-text);border:1px solid color-mix(in srgb, var(--c-text) 15%, transparent);background:color-mix(in srgb, var(--c-bg) 85%, transparent);-webkit-backdrop-filter:saturate(140%)blur(8px);backdrop-filter:saturate(140%)blur(8px)}.btn--secondary:hover{background:var(--c-bg);border-color:var(--c-primary);box-shadow:0 12px 30px color-mix(in srgb, var(--c-text) 10%, transparent)}.btn--secondary .btn__border{box-shadow:0 0 0 1px color-mix(in srgb, var(--c-primary) 40%, transparent) inset, 0 0 18px color-mix(in srgb, var(--c-primary) 20%, transparent)}.btn--ghost{color:color-mix(in srgb, var(--c-text) 80%, transparent);background:0 0;border:1px solid #0000}.btn--ghost:hover{color:var(--c-text);background:color-mix(in srgb, var(--c-text) 8%, transparent);border-color:color-mix(in srgb, var(--c-text) 15%, transparent)}.btn--ghost .btn__border{box-shadow:0 0 0 1px color-mix(in srgb, var(--c-text) 10%, transparent) inset}@media (prefers-reduced-motion:reduce){.btn,.btn__glow,.btn__border{transition:none!important}.btn:active{transform:none}}}