@layer components{.fx-pattern{--fx-pattern-size:20px;--fx-pattern-opacity:.5;--fx-pattern-base-color:var(--fx-tone,var(--foreground));--fx-pattern-strength:40%;--fx-pattern-color:color-mix(in oklch, var(--fx-pattern-base-color) var(--fx-pattern-strength), transparent);--fx-pattern-tempo:1;box-sizing:border-box;width:100%;position:relative}.dark .fx-pattern,.fx-pattern.dark{--fx-pattern-strength:34%}.fx-pattern__layer{pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.fx-pattern__tile{top:calc(-1 * var(--fx-pattern-size));left:calc(-1 * var(--fx-pattern-size));opacity:var(--fx-pattern-opacity);position:absolute;bottom:0;right:0}.fx-pattern__content{z-index:1;position:relative}.fx-pattern--dots .fx-pattern__tile{background-image:radial-gradient(circle at 1px 1px, var(--fx-pattern-color) 1px, transparent 1px);background-size:var(--fx-pattern-size) var(--fx-pattern-size)}.fx-pattern--grid .fx-pattern__tile{background-image:linear-gradient(to right, var(--fx-pattern-color) 1px, transparent 1px), linear-gradient(to bottom, var(--fx-pattern-color) 1px, transparent 1px);background-size:var(--fx-pattern-size) var(--fx-pattern-size)}.fx-pattern--diagonals .fx-pattern__tile{background-image:repeating-linear-gradient(-45deg, var(--fx-pattern-color), var(--fx-pattern-color) 1px, transparent 1px, transparent calc(var(--fx-pattern-size) / 2));background-size:var(--fx-pattern-size) var(--fx-pattern-size)}.fx-pattern--grain .fx-pattern__tile{background-image:var(--fx-pattern-noise-url);background-repeat:repeat;background-size:var(--fx-pattern-size) var(--fx-pattern-size)}.fx-pattern--fade-radial .fx-pattern__layer{-webkit-mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,30%), transparent var(--fx-pattern-fade-end,85%));-webkit-mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,30%), transparent var(--fx-pattern-fade-end,85%));mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,30%), transparent var(--fx-pattern-fade-end,85%))}.fx-pattern--fade-radial-soft .fx-pattern__layer{-webkit-mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,10%), transparent var(--fx-pattern-fade-end,90%));-webkit-mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,10%), transparent var(--fx-pattern-fade-end,90%));mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,10%), transparent var(--fx-pattern-fade-end,90%))}.fx-pattern--fade-radial-edge .fx-pattern__layer{-webkit-mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,55%), transparent var(--fx-pattern-fade-end,100%));-webkit-mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,55%), transparent var(--fx-pattern-fade-end,100%));mask-image:radial-gradient(ellipse var(--fx-pattern-fade-extent,closest-side) at var(--fx-pattern-fade-center,50% 50%), #000 var(--fx-pattern-fade-start,55%), transparent var(--fx-pattern-fade-end,100%))}.fx-pattern--fade-radial-top .fx-pattern__layer{-webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 30%,#0000 85%);mask-image:radial-gradient(120% 90% at 50% 0,#000 30%,#0000 85%)}.fx-pattern--fade-linear-bottom .fx-pattern__layer{-webkit-mask-image:linear-gradient(#000 50%,#0000 95%);mask-image:linear-gradient(#000 50%,#0000 95%)}@keyframes fx-pattern-pan{0%{transform:translate(0,0)}to{transform:translate3d(var(--fx-pattern-size), var(--fx-pattern-size), 0)}}@keyframes fx-pattern-grain-jitter{0%,to{opacity:var(--fx-pattern-opacity,.4);transform:translate(0,0)}25%{opacity:calc(var(--fx-pattern-opacity,.4) * .9);transform:translate(14px,18px)}50%{opacity:var(--fx-pattern-opacity,.4);transform:translate(-10px,14px)}75%{opacity:calc(var(--fx-pattern-opacity,.4) * 1.08);transform:translate(18px,-12px)}}.fx-pattern[data-fx-motion=subtle] .fx-pattern__tile{animation-name:fx-pattern-pan;animation-duration:calc(var(--fx-pattern-cycle,20) * .37s * var(--fx-pattern-tempo,1));animation-timing-function:linear;animation-iteration-count:infinite}.fx-pattern[data-fx-motion=expressive] .fx-pattern__tile{animation-name:fx-pattern-pan;animation-duration:calc(var(--fx-pattern-cycle,20) * .2s * var(--fx-pattern-tempo,1));animation-timing-function:linear;animation-iteration-count:infinite}.fx-pattern--grain .fx-pattern__tile{inset:-24px}.fx-pattern--grain[data-fx-motion=subtle] .fx-pattern__tile{animation-name:fx-pattern-grain-jitter;animation-duration:calc(1.4s * var(--fx-pattern-tempo,1));animation-timing-function:step-end;animation-iteration-count:infinite}.fx-pattern--grain[data-fx-motion=expressive] .fx-pattern__tile{animation-name:fx-pattern-grain-jitter;animation-duration:calc(.8s * var(--fx-pattern-tempo,1));animation-timing-function:step-end;animation-iteration-count:infinite}.fx-pattern[data-fx-running=false] .fx-pattern__tile,.fx-pattern[data-motion-running=false] .fx-pattern__tile{animation-play-state:paused}.fx-pattern[data-fx-motion=none] .fx-pattern__tile{animation:none}@media (prefers-reduced-motion:reduce){.fx-pattern .fx-pattern__tile{animation:none}}}
