.dot-grid{display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:relative}.dot-grid__wrap{width:100%;height:100%;position:relative}.dot-grid__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#lights{width:100%;height:100%;overflow:hidden;position:absolute;inset:0}#lights canvas{width:100%;height:100%;display:block}.galaxy-container{height:100%;position:relative;width:100%}.galaxy-container canvas{display:block;height:100%;width:100%}.border-glow-card{--edge-proximity: 0;--cursor-angle: 45deg;--edge-sensitivity: 30;--color-sensitivity: calc(var(--edge-sensitivity) + 20);--border-radius: 28px;--glow-padding: 40px;--cone-spread: 25;background:var(--card-bg, #120f17);border:1px solid rgb(255 255 255 / 15%);border-radius:var(--border-radius);box-shadow:#0000001a 0 1px 2px,#0000001a 0 2px 4px,#0000001a 0 4px 8px,#0000001a 0 8px 16px,#0000001a 0 16px 32px,#0000001a 0 32px 64px;display:grid;isolation:isolate;overflow:visible;position:relative;transform:translateZ(.01px)}.border-glow-card:before,.border-glow-card:after,.border-glow-card>.edge-light{border-radius:inherit;content:"";inset:0;position:absolute;transition:opacity .25s ease-out;z-index:-1}.border-glow-card:not(:hover):not(.sweep-active):before,.border-glow-card:not(:hover):not(.sweep-active):after,.border-glow-card:not(:hover):not(.sweep-active)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}.border-glow-card:before{background:linear-gradient(var(--card-bg, #120f17) 0 100%) padding-box,linear-gradient(#fff0 0% 100%) border-box,var(--gradient-one) border-box,var(--gradient-two) border-box,var(--gradient-three) border-box,var(--gradient-four) border-box,var(--gradient-five) border-box,var(--gradient-six) border-box,var(--gradient-seven) border-box,var(--gradient-base) border-box;border:1px solid transparent;mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%));opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)))}.border-glow-card:after{background:var(--gradient-one) padding-box,var(--gradient-two) padding-box,var(--gradient-three) padding-box,var(--gradient-four) padding-box,var(--gradient-five) padding-box,var(--gradient-six) padding-box,var(--gradient-seven) padding-box,var(--gradient-base) padding-box;border:1px solid transparent;mask-composite:subtract,add,add,add,add,add;mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);mix-blend-mode:soft-light;opacity:calc(var(--fill-opacity, .5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)))}.border-glow-card>.edge-light{inset:calc(var(--glow-padding) * -1);mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mix-blend-mode:plus-lighter;opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));pointer-events:none;z-index:1}.border-glow-card>.edge-light:before{border-radius:inherit;box-shadow:inset 0 0 0 1px var(--glow-color),inset 0 0 1px 0 var(--glow-color-60),inset 0 0 3px 0 var(--glow-color-50),inset 0 0 6px 0 var(--glow-color-40),inset 0 0 15px 0 var(--glow-color-30),inset 0 0 25px 2px var(--glow-color-20),inset 0 0 50px 2px var(--glow-color-10),0 0 1px 0 var(--glow-color-60),0 0 3px 0 var(--glow-color-50),0 0 6px 0 var(--glow-color-40),0 0 15px 0 var(--glow-color-30),0 0 25px 2px var(--glow-color-20),0 0 50px 2px var(--glow-color-10);content:"";inset:var(--glow-padding);position:absolute}.border-glow-inner{display:flex;flex-direction:column;overflow:auto;position:relative;z-index:1}:root{--linear-ease: linear(0, .068, .19 2.7%, .804 8.1%, 1.037, 1.199 13.2%, 1.245, 1.27 15.8%, 1.274, 1.272 17.4%, 1.249 19.1%, .996 28%, .949, .928 33.3%, .926, .933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%, 1.018 54.4%, 1 63.1%, .995 68%, 1.001 85%, 1)}.gooey-nav-container{position:relative}.gooey-nav-container nav{display:flex;position:relative;transform:translateZ(.01px)}.gooey-nav-container nav ul{color:#fff;display:flex;gap:2em;list-style:none;margin:0;padding:0 1em;position:relative;text-shadow:0 1px 1px hsl(205deg 30% 10% / .2);z-index:3}.gooey-nav-container nav ul li{background:transparent;border:1px solid rgb(200 255 0 / 65%);border-radius:100vw;box-shadow:0 0 .5px 1.5px transparent;color:#fff;cursor:pointer;position:relative;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}.gooey-nav-container nav ul li a{display:inline-block;padding:.6em 1em}.gooey-nav-container nav ul li:focus-within:has(:focus-visible){box-shadow:0 0 .5px 1.5px #fff}.gooey-nav-container nav ul li:after{background:#fff;border-radius:100vw;content:"";inset:0;opacity:0;position:absolute;transform:scale(0);transition:all .3s ease;z-index:-1}.gooey-nav-container nav ul li.active{color:#000;text-shadow:none}.gooey-nav-container nav ul li.active:after{opacity:1;transform:scale(1)}.gooey-nav-container .effect{display:grid;height:0;left:0;opacity:1;place-items:center;pointer-events:none;position:absolute;top:0;width:0;z-index:1}.gooey-nav-container .effect.text{color:#fff;transition:color .3s ease}.gooey-nav-container .effect.text.active{color:#000}.gooey-nav-container .effect.filter{filter:blur(7px) contrast(100) blur(0);mix-blend-mode:lighten}.gooey-nav-container .effect.filter:before{background:#000;content:"";inset:-75px;position:absolute;z-index:-2}.gooey-nav-container .effect.filter:after{background:#fff;border-radius:100vw;content:"";inset:0;opacity:0;position:absolute;transform:scale(0);z-index:-1}.gooey-nav-container .effect.active:after{animation:pill .3s ease both}@keyframes pill{to{opacity:1;transform:scale(1)}}.particle,.point{border-radius:100%;display:block;height:20px;opacity:0;transform-origin:center;width:20px}.particle{--time: 5s;animation:particle var(--time) ease 1 -.35s;left:calc(50% - 8px);position:absolute;top:calc(50% - 8px)}.point{animation:point var(--time) ease 1 -.35s;background:var(--color);opacity:1}@keyframes particle{0%{animation-timing-function:cubic-bezier(.55,0,1,.45);opacity:1;transform:rotate(0) translate(var(--start-x),var(--start-y))}70%{animation-timing-function:ease;opacity:1;transform:rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2),calc(var(--end-y) * 1.2))}85%{opacity:1;transform:rotate(calc(var(--rotate) * .66)) translate(var(--end-x),var(--end-y))}to{opacity:1;transform:rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5),calc(var(--end-y) * .5))}}@keyframes point{0%{animation-timing-function:cubic-bezier(.55,0,1,.45);opacity:0;transform:scale(0)}25%{transform:scale(calc(var(--scale) * .25))}38%{opacity:1}65%{animation-timing-function:ease;opacity:1;transform:scale(var(--scale))}85%{opacity:1;transform:scale(var(--scale))}to{opacity:0;transform:scale(0)}}
