.chromatic-button{isolation:isolate;box-sizing:border-box;border-radius:calc(var(--chromatic-button-short-side,100px) * var(--chromatic-button-radius,.5));background:radial-gradient(ellipse at var(--chromatic-fallback-focus,35% 0%), color-mix(in srgb, var(--chromatic-button-color,#b126ff) var(--chromatic-fallback-light,70%), #000), color-mix(in srgb, var(--chromatic-button-color,#b126ff) 6%, #000) 70%);min-width:165.25px;height:48px;min-height:48px;box-shadow:inset 0 -2px 7px color-mix(in srgb, var(--chromatic-button-color,#b126ff) 40%, transparent), inset 2px 0 6px color-mix(in srgb, var(--chromatic-button-color,#b126ff) 20%, transparent);color:#fff;letter-spacing:-.13px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;place-items:center;padding:0 16px;font-family:Inter Variable,Inter,sans-serif;font-size:14px;font-weight:400;line-height:20px;transition:transform .22s,background-position .22s;display:inline-grid;position:relative}.chromatic-button .chromatic-surface{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.chromatic-button:has([data-renderer=webgl]){box-shadow:none;background:0 0}.chromatic-button-content{text-shadow:none;align-items:center;gap:8px;display:inline-flex;position:relative}.chromatic-button[data-entrance=blur-up]{animation:chromatic-button-blur-up calc(.7s / var(--chromatic-entrance-speed,1)) cubic-bezier(.16, 1, .3, 1) backwards}.chromatic-button[data-entrance=zoom]{animation:chromatic-button-zoom calc(.6s / var(--chromatic-entrance-speed,1)) cubic-bezier(.16, 1, .3, 1) backwards}@keyframes chromatic-button-blur-up{0%{opacity:0;filter:blur(var(--chromatic-entrance-blur,10px));translate:0 var(--chromatic-entrance-distance,20px)}to{opacity:var(--chromatic-button-opacity,1);filter:blur();translate:0}}@keyframes chromatic-button-zoom{0%{opacity:0;scale:var(--chromatic-entrance-scale,.65)}to{opacity:var(--chromatic-button-opacity,1);scale:1}}.chromatic-button:not(:has([data-renderer=webgl])):not([data-hover-effect=none]):not(:disabled):is(:hover,:focus-visible){--chromatic-fallback-light:85%}.chromatic-button[data-hover-effect=flow]:not(:has([data-renderer=webgl])):not(:disabled):is(:hover,:focus-visible){--chromatic-fallback-focus:65% 70%}.chromatic-button:focus-visible{outline-offset:5px;outline:2px solid #d8b8ff}.chromatic-button:not([data-hover-effect=brighten]){transition:background-position .22s}.chromatic-button[data-hover-effect=spotlight]:not(:disabled){transform:var(--chromatic-pointer-transform,none)}.chromatic-button[data-hover-effect=brighten]:not(:disabled):focus-visible{transform:translateY(-2px)}@media (hover:hover){.chromatic-button[data-hover-effect=brighten]:not(:disabled):hover{transform:translateY(-2px)}}.chromatic-button:disabled{--chromatic-button-opacity:.45;cursor:not-allowed;opacity:.45}@media (prefers-reduced-motion:reduce){.chromatic-button{transition:none}.chromatic-button[data-entrance]{animation:none}.chromatic-button[data-hover-effect=brighten]:not(:disabled):is(:hover,:focus-visible),.chromatic-button[data-hover-effect=spotlight]:not(:disabled){transform:none}}
