.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}}.component-showcase .component-preview-stage:has(>.chromatic-button-demo){padding:0}.chromatic-button-demo{box-sizing:border-box;background:var(--theme-background,#fff);width:100%;min-width:0;height:100%;min-height:560px;color:var(--theme-ink,#171717);grid-template-columns:minmax(0,1fr);place-content:center;justify-items:center;padding:72px 24px 40px;display:grid}.chromatic-button-demo-main{align-items:center;display:flex}.chromatic-demo-swatches{justify-content:center;align-items:center;gap:18px;display:flex}.chromatic-button-swatch{min-width:64px;min-height:64px;padding:18px}.component-showcase:has(.chromatic-message-preview){min-height:0}.component-preview-canvas:has(.chromatic-message-preview){min-height:0}.component-showcase .component-preview-stage:has(>.chromatic-button-demo.is-message){min-height:0}.chromatic-button-demo.is-message{height:auto;min-height:0;padding:0;display:block}.component-showcase:not(.is-fullscreen) .component-preview-stage:has(>.chromatic-button-demo.is-message){flex-direction:column;align-items:stretch;display:flex}.component-showcase:not(.is-fullscreen) .component-preview-stage:has(>.chromatic-button-demo.is-message) .component-preview-actions{align-self:flex-end;margin:.9rem;position:relative;top:auto;right:auto}.chromatic-message-preview{aspect-ratio:566/260;width:100%;min-width:0;position:relative;overflow:hidden;container-type:inline-size}.chromatic-message-bar{box-sizing:border-box;color:#666;background:#f1f1f1;border:1px solid #dedede;border-radius:999px;justify-content:flex-end;align-items:center;gap:6.18375cqw;width:118.322cqw;height:18.3746cqw;padding:2.4735cqw 2.82686cqw;display:flex;position:absolute;top:13.7809cqw;left:calc(1px - 49.1343cqw)}.chromatic-message-microphone{flex:none;width:5.65371cqw;height:5.65371cqw}.chromatic-message-send{flex:none;width:12.7208cqw;min-width:0;height:12.7208cqw;min-height:0;padding:0;overflow:hidden}.chromatic-message-send svg{width:6.71378cqw;height:6.71378cqw}.component-showcase.is-fullscreen .chromatic-button-demo.is-message{place-items:center;display:grid}.component-showcase.is-fullscreen .chromatic-message-preview{width:min(100vw,217.692dvh);max-width:100%}:root[data-theme=dark] .chromatic-button-demo.is-message{background:#000}:root[data-theme=dark] .chromatic-message-bar{color:#b5b5b5;background:#1c1c1c;border-color:#2b2b2b}.chromatic-related{color:var(--theme-text-muted,#888);margin:20px 0;font-size:13px}.chromatic-related a{color:inherit;text-underline-offset:3px;text-decoration:underline}@media (width<=600px){.chromatic-button-demo:not(.is-message){min-height:560px}}