.button-group{display:flex;gap:12px;align-items:stretch;min-width:0;max-width:100%;font-family:inherit}.button-group--horizontal{flex-flow:row wrap}.button-group--vertical{flex-direction:column}.group-button{--button-color:#2563eb;--button-secondary:#7c3aed;--button-text:#fff;--button-fill:var(--button-color);display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;min-width:0;max-width:100%;padding:14px 22px;border:1px solid transparent;border-radius:8px;background:var(--button-fill);color:var(--button-text);font-family:inherit;font-size:15px;font-weight:600;line-height:1.4;text-decoration:none!important;overflow-wrap:anywhere;transition:transform .18s,box-shadow .18s,filter .18s;isolation:isolate}.group-button>span{min-width:0}.group-button:hover{color:var(--button-text);filter:brightness(1.07);transform:translateY(-2px)}.group-button:focus-visible{outline:3px solid #0f172a;outline-offset:4px}.group-button-external{font-size:11px;opacity:.8}.button-group--vertical>.group-button{width:100%;box-sizing:border-box}.button-group--pill>.group-button{border-radius:999px}.button-group--outline>.group-button{background:transparent;color:var(--button-color);border:2px solid var(--button-color)}.button-group--outline>.group-button:hover{background:var(--button-fill);color:var(--button-text)}.button-group--soft>.group-button{background:color-mix(in srgb,var(--button-color) 12%,white);color:color-mix(in srgb,var(--button-color) 72%,black);border-color:color-mix(in srgb,var(--button-color) 25%,white)}.button-group--raised>.group-button{box-shadow:0 5px 0 color-mix(in srgb,var(--button-color) 65%,black),0 8px 16px #0f172a22}.button-group--raised>.group-button:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--button-color) 65%,black)}.button-group--glass>.group-button{background:linear-gradient(135deg,#ffffff55,#ffffff08),var(--button-fill);border-color:#ffffff88;box-shadow:inset 0 1px 0 #ffffff88,0 4px 14px #0f172a20}.button-group--underline>.group-button{border-radius:0;background:transparent;color:var(--button-color);border-bottom:3px solid var(--button-color)}.button-group--square>.group-button{border-radius:0}.button-group--ribbon>.group-button{border-radius:3px 18px 18px 3px;border-left:5px solid color-mix(in srgb,var(--button-color) 60%,black)}.button-group--tile>.group-button{padding:24px;flex:1 1 160px;flex-direction:column;border-radius:16px;box-shadow:0 6px 18px #0f172a18}.button-group--tile>.group-button>i:first-child{font-size:24px}.button-group--vertical.button-group--tile>.group-button{flex:auto}
.group-button--gradient{--button-fill:linear-gradient(120deg,var(--button-color),var(--button-secondary))}.group-button--aurora{--button-fill:linear-gradient(35deg,var(--button-color),var(--button-secondary) 55%,var(--button-color))}.group-button--granite{--button-fill:radial-gradient(circle at 2px 2px,#ffffff44 1px,transparent 1.7px) 0 0/6px 7px,radial-gradient(circle at 1px 1px,#0005 1px,transparent 1.5px) 3px 2px/8px 9px,var(--button-color)}.group-button--marble{--button-fill:repeating-linear-gradient(155deg,transparent 0 9px,#ffffff25 10px,#ffffff08 12px,transparent 17px),linear-gradient(120deg,var(--button-color),var(--button-secondary))}.group-button--metal{--button-fill:linear-gradient(180deg,#ffffff55,transparent 42%,#0003 50%,#ffffff22 70%,#0002),var(--button-color)}.group-button--stripes{--button-fill:repeating-linear-gradient(135deg,#ffffff20 0 6px,transparent 6px 12px),var(--button-color)}.group-button--dots{--button-fill:radial-gradient(#ffffff55 1px,transparent 1.5px) 0 0/8px 8px,var(--button-color)}.group-button--mesh{--button-fill:radial-gradient(ellipse at 10% 10%,#ffffff66,transparent 60%),radial-gradient(ellipse at 90% 90%,var(--button-secondary),transparent 70%),var(--button-color)}.group-button--carbon{--button-fill:repeating-conic-gradient(#0003 0% 25%,transparent 0% 50%) 0 0/8px 8px,var(--button-color)}
.button-group-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.group-button{transition:none}.group-button:hover{transform:none}}@media(max-width:480px){.button-group--horizontal>.group-button{flex:1 1 140px}.group-button{padding:12px 16px}}
.group-button{font-family:inherit;font-size:15px;font-weight:600;line-height:1.4}
.button-group--outline>.group-button{border-width:1px;border-color:color-mix(in srgb,var(--button-color) 45%,transparent)}.button-group--underline>.group-button{border-bottom-width:2px;border-bottom-color:color-mix(in srgb,var(--button-color) 50%,transparent)}.button-group[data-button-height]>.group-button{box-sizing:border-box;min-height:var(--button-height);padding-block:4px}
.button-group>.group-button[data-button-border]{border-color:var(--button-border)}
.button-group[data-button-border-width]>.group-button{border-width:var(--button-border-width)}
.button-group[data-button-height]>.group-button{padding-block:0}
.button-group{gap:var(--button-gap,1px)}
.button-group[data-button-typography]>.group-button{font-family:var(--button-font,inherit);font-size:var(--button-font-size,15px);font-weight:var(--button-font-weight,600);font-style:var(--button-font-style,normal)}
.button-group[data-idle-effect=breathe]>.group-button{animation:bg-breathe 3s ease-in-out infinite}.button-group[data-idle-effect=float]>.group-button{animation:bg-float 3s ease-in-out infinite}.button-group[data-idle-effect=sway]>.group-button{animation:bg-sway 4s ease-in-out infinite}.button-group[data-idle-effect=glow]>.group-button{animation:bg-glow 3s ease-in-out infinite}.button-group[data-idle-effect=gradient]>.group-button{animation:bg-color 5s ease-in-out infinite}.button-group[data-idle-effect=border]>.group-button{animation:bg-border 3s ease-in-out infinite}.button-group[data-idle-effect=tilt]>.group-button{animation:bg-tilt 4s ease-in-out infinite}.button-group[data-idle-effect=heartbeat]>.group-button{animation:bg-heart 3s ease-in-out infinite}.button-group[data-idle-effect=shadow]>.group-button{animation:bg-shadow 4s ease-in-out infinite}.button-group[data-idle-effect=shimmer]>.group-button::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff44 48%,transparent 70%);background-size:300% 100%;animation:bg-shimmer 4s linear infinite}
@keyframes bg-breathe{50%{scale:1.025}}@keyframes bg-float{50%{translate:0 -3px}}@keyframes bg-sway{25%{translate:2px 0}75%{translate:-2px 0}}@keyframes bg-glow{50%{box-shadow:0 0 12px color-mix(in srgb,var(--button-color) 35%,transparent)}}@keyframes bg-color{50%{filter:saturate(1.5) brightness(1.08)}}@keyframes bg-border{50%{border-color:var(--button-secondary)}}@keyframes bg-tilt{25%{rotate:1deg}75%{rotate:-1deg}}@keyframes bg-heart{15%,35%{scale:1.035}25%,45%,100%{scale:1}}@keyframes bg-shadow{0%,100%{box-shadow:0 3px 8px #0f172a18}50%{box-shadow:0 7px 16px #0f172a30}}@keyframes bg-shimmer{0%{background-position:100% 0;opacity:0}15%,85%{opacity:1}100%{background-position:-100% 0;opacity:0}}
.button-group[data-hover-effect]>.group-button:is(:hover,:focus-visible){animation-play-state:paused;transform:none;filter:none}.button-group[data-hover-effect]>.group-button:is(:hover,:focus-visible)::after{animation-play-state:paused}.button-group[data-hover-effect=lift]>.group-button:is(:hover,:focus-visible){transform:translateY(-3px)}.button-group[data-hover-effect=grow]>.group-button:is(:hover,:focus-visible){transform:scale(1.04)}.button-group[data-hover-effect=shrink]>.group-button:is(:hover,:focus-visible){transform:scale(.96)}.button-group[data-hover-effect=tilt]>.group-button:is(:hover,:focus-visible){transform:rotate(-2deg)}.button-group[data-hover-effect=nudge]>.group-button:is(:hover,:focus-visible){transform:translateX(4px)}.button-group[data-hover-effect=glow]>.group-button:is(:hover,:focus-visible){box-shadow:0 0 16px color-mix(in srgb,var(--button-color) 40%,transparent)}.button-group[data-hover-effect=ring]>.group-button:is(:hover,:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--button-color) 25%,transparent)}.button-group[data-hover-effect=press]>.group-button:is(:hover,:focus-visible){transform:translateY(2px);box-shadow:inset 0 2px 4px #0002}.button-group[data-hover-effect=bounce]>.group-button:is(:hover,:focus-visible){animation:bg-bounce .55s ease both}.button-group[data-hover-effect=sweep]>.group-button:is(:hover,:focus-visible)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff55 48%,transparent 70%);background-size:300% 100%;animation:bg-shimmer .7s ease both}@keyframes bg-bounce{35%{translate:0 -5px}65%{translate:0 -2px}100%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.button-group[data-idle-effect]>.group-button,.button-group[data-hover-effect]>.group-button,.button-group[data-hover-effect]>.group-button:is(:hover,:focus-visible){animation:none!important;transition:none!important;transform:none!important;translate:none!important;scale:none!important;rotate:none!important}.button-group[data-idle-effect]>.group-button::after,.button-group[data-hover-effect]>.group-button::after{animation:none!important;display:none}}