.chromatic{--chromatic-color:var(--tint);isolation:isolate;color:#fff;background:radial-gradient(ellipse at var(--chromatic-fallback-focus,35% 0%), color-mix(in srgb, var(--chromatic-color) var(--chromatic-fallback-light,70%), #000), color-mix(in srgb, var(--chromatic-color) 6%, #000) 70%);box-shadow:inset 0 -2px 7px color-mix(in srgb, var(--chromatic-color) 40%, transparent), inset 2px 0 6px color-mix(in srgb, var(--chromatic-color) 20%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--chromatic-color) 75%, transparent);-webkit-tap-highlight-color:transparent;transition:translate .22s,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,opacity .2s;animation:.7s cubic-bezier(.16,1,.3,1) backwards chromatic-blur-up;position:relative;overflow:hidden}.chromatic:has(>[data-renderer=webgl]){box-shadow:0 10px 24px -12px color-mix(in srgb, var(--chromatic-color) 75%, transparent);background:0 0}.chromatic>.chromatic-surface{z-index:-1;border-radius:inherit;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.chromatic:not(:disabled,[aria-disabled=true]):focus-visible{--chromatic-fallback-light:85%;translate:0 -2px}@media (hover:hover){.chromatic:not(:disabled,[aria-disabled=true]):hover{--chromatic-fallback-light:85%;translate:0 -2px}}@keyframes chromatic-blur-up{0%{opacity:0;filter:blur(10px);translate:0 20px}}@media (prefers-reduced-motion:reduce){.chromatic{transition:none;animation:none}.chromatic:is(:hover,:focus-visible){translate:none}}.chromatic>.chromatic-surface:not([data-renderer=webgl]){visibility:hidden}