@layer components{.fx-slot{position:relative;overflow:clip;-moz-user-select:none;user-select:none;-webkit-user-select:none}.fx-slot,.fx-slot>canvas{display:block;border-radius:inherit;pointer-events:none}.fx-slot>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--duration-menu-in,.22s) var(--ease-macos,ease-out)}.fx-slot[data-fx-live]>canvas{opacity:1}.fx-slot:after,.fx-slot:before,.fx-slot>:not(canvas){transition:opacity var(--duration-menu-in,.22s) var(--ease-macos,ease-out)}.fx-slot[data-fx-live]:after,.fx-slot[data-fx-live]:before,.fx-slot[data-fx-live]>:not(canvas){opacity:0}.fx-slot[data-fx=lost]>canvas{display:none}.fx-slot:is([data-fx=lost],[data-fx=off]):after,.fx-slot:is([data-fx=lost],[data-fx=off]):before,.fx-slot:is([data-fx=lost],[data-fx=off])>:not(canvas){transition:none}html[data-fx-max=off] .fx-slot>canvas{display:none}@media (prefers-reduced-motion:reduce){.fx-slot>canvas{display:none}.fx-slot:after,.fx-slot:before,.fx-slot>:not(canvas){transition:none}}:where(html[data-motion=reduce]) .fx-slot>canvas{display:none}:where(html[data-motion=reduce]) .fx-slot:after,:where(html[data-motion=reduce]) .fx-slot:before,:where(html[data-motion=reduce]) .fx-slot>:not(canvas){transition:none}}