#sideFx{ position:fixed;inset:0;z-index:1;  pointer-events:none;overflow:clip; contain:strict;  display:none; } html[data-fx] #sideFx{display:block} #sideFx .sideFx__rail{ position:absolute;top:0;bottom:0;overflow:clip; opacity:var(--fx-op,.26); --fx-dur:30s; } #sideFx .sideFx__rail[hidden]{display:none} #sideFx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}  #sideFx .sideFx__rail::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, var(--fx-edge, rgba(0,0,0,.0)) 0%, transparent 12%, transparent 88%, var(--fx-edge, rgba(0,0,0,0)) 100%); }  #sideFx .fx{position:absolute;inset:-10% 0;will-change:transform} @media (prefers-reduced-motion:no-preference){ #sideFx .fx--move{animation:fxFlow var(--fx-dur) linear infinite} #sideFx .fx--move-rev{animation:fxFlow var(--fx-dur) linear infinite reverse} #sideFx .fx--wave{animation:fxWave calc(var(--fx-dur) * 1.4) ease-in-out infinite alternate} #sideFx .fx--glint{animation:fxGlint var(--fx-dur) ease-in-out infinite} #sideFx .fx--drift{animation:fxDrift calc(var(--fx-dur) * 1.8) ease-in-out infinite alternate} } @keyframes fxFlow{from{transform:translate3d(0,-20%,0)}to{transform:translate3d(0,20%,0)}} @keyframes fxWave{from{transform:translate3d(-6%,-4%,0) rotate(-1.2deg)}to{transform:translate3d(6%,4%,0) rotate(1.2deg)}} @keyframes fxGlint{0%,100%{opacity:.15}45%{opacity:1}55%{opacity:.35}} @keyframes fxDrift{from{transform:translate3d(0,-6%,0) scale(1)}to{transform:translate3d(0,6%,0) scale(1.06)}}   #sideFx .fx--silk{ background-image:linear-gradient(180deg, transparent 0%, var(--fx-c1) 42%, var(--fx-glow) 50%, var(--fx-c1) 58%, transparent 100%); filter:blur(.4px); }  #sideFx .fx--edge{ background-image:linear-gradient(90deg, var(--fx-c1) 0 var(--fx-w,2px), transparent var(--fx-w,2px)); filter:drop-shadow(0 0 1px var(--fx-outline)) drop-shadow(0 0 4px var(--fx-glow)); } #sideFx .sideFx__rail--right .fx--edge{background-image:linear-gradient(270deg, var(--fx-c1) 0 var(--fx-w,2px), transparent var(--fx-w,2px))}  #sideFx .fx--ribbon{ background-image:linear-gradient(180deg, transparent, var(--fx-c1) 20%, var(--fx-glow) 50%, var(--fx-c1) 80%, transparent); -webkit-mask-image:repeating-linear-gradient(180deg, #000 0 60px, transparent 60px 120px); mask-image:repeating-linear-gradient(180deg, #000 0 60px, transparent 60px 120px); }  #sideFx .fx--rain{ background-image:repeating-linear-gradient(180deg, var(--fx-c1) 0 14px, transparent 14px var(--fx-gap,34px)); -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%, transparent); mask-image:linear-gradient(90deg, transparent, #000 40%, transparent); }  #sideFx .fx--carrier{ background-image:repeating-linear-gradient(180deg, #3617CE 0 3px, transparent 3px 40px, #E6002D 40px 43px, transparent 43px 80px, #E6007E 80px 83px, transparent 83px 120px, var(--fx-glow) 120px 123px, transparent 123px 170px); }  #sideFx .fx--silk,#sideFx .fx--ribbon,#sideFx .fx--rain,#sideFx .fx--carrier,#sideFx .fx--geo{ filter:drop-shadow(0 0 1px var(--fx-outline)); } #sideFx .fx--geo{ background-image:repeating-linear-gradient(135deg, var(--fx-c1) 0 1px, transparent 1px var(--fx-gap,30px)), radial-gradient(circle at 50% 10%, var(--fx-c1) 0 1.2px, transparent 1.4px); background-size:auto, 100% 90px; }  #sideFx.is-static .fx{animation:none !important} #sideFx.is-static{opacity:.7} @media (prefers-reduced-motion:reduce){ #sideFx .fx{animation:none !important} html[data-fx-rm="off"] #sideFx{display:none !important} }