:root{--color-1:#f50;--color-2:#f73;--color-3:#fa0;--color-4:#e04b00}.gooey-nav-container{isolation:isolate;align-items:center;display:inline-flex;position:relative}.gooey-nav-container nav{z-index:2;display:flex;position:relative;transform:translateZ(.01px)}.gooey-nav-container nav ul{z-index:3;align-items:center;gap:.35rem;margin:0;padding:.25rem .35rem;list-style:none;display:flex;position:relative}.gooey-nav-container nav ul li{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:9999px;font-size:.8125rem;font-weight:700;transition:color .25s;position:relative}.gooey-nav-container nav ul li a{color:inherit;z-index:4;border-radius:9999px;align-items:center;gap:.35rem;padding:.45rem .95rem;text-decoration:none;transition:color .2s;display:inline-flex;position:relative}.gooey-nav-container nav ul li.active a{text-shadow:0 1px 2px #00000040;color:#fff!important}.gooey-nav-container nav ul li:focus-within:has(:focus-visible){box-shadow:0 0 0 2px #f50}.gooey-nav-container .effect{opacity:1;pointer-events:none;z-index:1;place-items:center;width:0;height:0;transition:left .42s cubic-bezier(.165,.84,.44,1),top .42s cubic-bezier(.165,.84,.44,1),width .42s cubic-bezier(.165,.84,.44,1),height .42s cubic-bezier(.165,.84,.44,1);display:grid;position:absolute;top:0;left:0}.gooey-nav-container .effect.filter{filter:url(#gooey-nav-filter)}.gooey-nav-container .effect.filter:after{content:"";opacity:1;z-index:-1;background:#f50;border-radius:9999px;position:absolute;inset:0;transform:scale(1);box-shadow:0 4px 18px #ff550059}.gooey-nav-container .effect.text{color:#fff;pointer-events:none;z-index:3;justify-content:center;align-items:center;font-size:.8125rem;font-weight:700;display:flex}.gooey-nav-container .particle,.gooey-nav-container .point{opacity:0;transform-origin:50%;border-radius:50%;display:block}.gooey-nav-container .particle{pointer-events:none;animation:gooey-particle var(--time,.6s) ease-out 1 forwards;position:absolute;top:calc(50% - 9px);left:calc(50% - 9px)}.gooey-nav-container .point{background:var(--color,#f50);opacity:1;width:18px;height:18px;animation:gooey-point var(--time,.6s) ease-out 1 forwards}@keyframes gooey-particle{0%{transform:rotate(0deg) translate(var(--start-x), var(--start-y));opacity:1}60%{transform:rotate(calc(var(--rotate) * .6)) translate(calc(var(--end-x) * 1.15), calc(var(--end-y) * 1.15));opacity:.95}to{transform:rotate(var(--rotate)) translate(var(--end-x), var(--end-y));opacity:0}}@keyframes gooey-point{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.2)}65%{transform:scale(var(--scale,1));opacity:.9}to{opacity:0;transform:scale(0)}}