.xp-el{--el-radius:16;--el-bleed:14;--el-line:1.4;--el-halo:5;--el-lap:2.6;--el-beat:0.9;--el-dash:7;--el-power:1;--el-rate:1;--el-hop:0;--el-a:#5ed7ff;--el-b:#ffffff;--el-c:#1f5fd0;position:relative;display:block;border-radius:calc(var(--el-radius) * 1px)}.xp-el-content{position:relative;z-index:2;border-radius:inherit}.xp-el-art{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}.xp-el-art[data-face=in]{z-index:3}.xp-el-band{stroke-width:calc(var(--el-halo) * 5px);filter:blur(calc(var(--el-halo) * 1.2px))}.xp-el-edge{fill:none;stroke-linejoin:round}.xp-el-crackle{filter:var(--el-warp);animation:xp-el-jitter calc(var(--el-beat) * 1s / var(--el-rate)) step-end infinite}.xp-el-halo{stroke:var(--el-a);stroke-width:calc(var(--el-halo) * 1px);opacity:calc(.2 * var(--el-power));filter:blur(calc(var(--el-halo) * .45px))}.xp-el-core{stroke:var(--el-a);stroke-width:calc(var(--el-line) * 2.2px);opacity:calc(.7 * var(--el-power))}.xp-el-hot{stroke:var(--el-b);stroke-width:calc(var(--el-line) * .75px);opacity:calc(.9 * var(--el-power))}.xp-el-base{stroke:var(--el-a);stroke-width:1px;opacity:.34}.xp-el-arcs{filter:var(--el-warp)}.xp-el-arc{stroke:#fff;stroke-width:calc(var(--el-line) * 1.5px);stroke-linecap:round;stroke-dasharray:var(--el-dash) calc(100 - var(--el-dash));animation:xp-el-run calc(var(--el-lap) * 1s / var(--el-rate)) linear infinite;animation-delay:calc(var(--i) * var(--el-lap) * -.37s / var(--el-rate))}@keyframes xp-el-run{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}@keyframes xp-el-jitter{0%{transform:translateZ(0)}20%{transform:translate3d(.7px,-1.1px,0)}40%{transform:translate3d(-1.2px,.5px,0)}60%{transform:translate3d(.4px,1.3px,0)}80%{transform:translate3d(-.6px,-.4px,0)}}.xp-el-sheet{pointer-events:none}.xp-el-tide{transform-box:fill-box;transform-origin:50% 100%}.xp-el-sheet[data-from=bottom] .xp-el-tide{transform-origin:50% 0}@keyframes xp-el-drift{0%{transform:translate3d(0,calc(var(--i) * -8px),0)}to{transform:translate3d(calc(var(--el-tide) * -1px),calc(var(--i) * -8px),0)}}.xp-el-wash{fill:color-mix(in oklab,var(--el-c) 55%,var(--el-a));opacity:0}.xp-el[data-variant=electric]{--el-a:#5ed7ff;--el-b:#ffffff;--el-c:#1f5fd0}.xp-el[data-variant=electric] .xp-el-crackle{filter:var(--el-warp) drop-shadow(0 0 3px color-mix(in oklab,var(--el-a) 62%,transparent))}.xp-el[data-variant=electric] .xp-el-base{opacity:.46}.xp-el[data-variant=electric] .xp-el-arcs{filter:var(--el-warp) drop-shadow(0 0 6px color-mix(in oklab,var(--el-a) 80%,transparent))}.xp-el[data-variant=electric] .xp-el-crackle{animation:none}.xp-el[data-variant=electric] .xp-el-shift{animation:xp-el-hop calc(var(--el-beat) * 1s / var(--el-rate)) step-end infinite}.xp-el[data-variant=electric] .xp-el-back{animation:xp-el-hop-back calc(var(--el-beat) * 1s / var(--el-rate)) step-end infinite}@keyframes xp-el-hop{0%{transform:translateZ(0)}17%{transform:translate3d(calc(var(--el-hop) * .52px),calc(var(--el-hop) * -.81px),0)}29%{transform:translate3d(calc(var(--el-hop) * -.9px),calc(var(--el-hop) * .41px),0)}44%{transform:translate3d(calc(var(--el-hop) * 1.24px),calc(var(--el-hop) * .95px),0)}58%{transform:translate3d(calc(var(--el-hop) * -.37px),calc(var(--el-hop) * -1.35px),0)}71%{transform:translate3d(calc(var(--el-hop) * .78px),calc(var(--el-hop) * .26px),0)}86%{transform:translate3d(calc(var(--el-hop) * -1.1px),calc(var(--el-hop) * -.58px),0)}}@keyframes xp-el-hop-back{0%{transform:translateZ(0)}17%{transform:translate3d(calc(var(--el-hop) * -.52px),calc(var(--el-hop) * .81px),0)}29%{transform:translate3d(calc(var(--el-hop) * .9px),calc(var(--el-hop) * -.41px),0)}44%{transform:translate3d(calc(var(--el-hop) * -1.24px),calc(var(--el-hop) * -.95px),0)}58%{transform:translate3d(calc(var(--el-hop) * .37px),calc(var(--el-hop) * 1.35px),0)}71%{transform:translate3d(calc(var(--el-hop) * -.78px),calc(var(--el-hop) * -.26px),0)}86%{transform:translate3d(calc(var(--el-hop) * 1.1px),calc(var(--el-hop) * .58px),0)}}.xp-el[data-variant=electric] .xp-el-arc{stroke-width:calc(var(--el-line) * 2.4px);stroke-linecap:butt;opacity:calc(.95 * var(--el-power));stroke-dasharray:calc(var(--el-dash) + var(--i) * 2.5) calc(100 - var(--el-dash) - var(--i) * 2.5);animation-duration:calc((var(--el-lap) + var(--i) * .43) * 1s / var(--el-rate));animation-delay:calc(var(--i) * var(--el-lap) * -.29s / var(--el-rate))}.xp-el[data-variant=electric] .xp-el-halo{animation:xp-el-surge calc(var(--el-lap) * 3.1s / var(--el-rate)) ease-out infinite}@keyframes xp-el-flicker{0%,to{opacity:calc(.9 * var(--el-power))}43%{opacity:calc(.55 * var(--el-power))}47%{opacity:var(--el-power)}}.xp-el[data-variant=electric] .xp-el-hot{animation:xp-el-flicker calc(var(--el-beat) * 2.7s / var(--el-rate)) ease-in-out infinite}@keyframes xp-el-surge{0%,12%,22%,64%,72%,to{opacity:calc(.2 * var(--el-power))}15%{opacity:calc(.62 * var(--el-power))}68%{opacity:calc(.4 * var(--el-power))}}.xp-el[data-variant=fire]{--el-a:#ff8a2b;--el-b:#ffd980;--el-c:#c62f18}.xp-el[data-variant=fire] .xp-el-crackle{filter:var(--el-warp) drop-shadow(0 -2px 6px color-mix(in oklab,var(--el-a) 42%,transparent));animation-name:xp-el-rise;animation-timing-function:ease-in-out;animation-direction:alternate}.xp-el[data-variant=fire] .xp-el-halo{stroke:var(--el-c);opacity:calc(.3 * var(--el-power))}.xp-el[data-variant=fire] .xp-el-core{stroke:var(--el-a);opacity:calc(.75 * var(--el-power))}.xp-el[data-variant=fire] .xp-el-hot{stroke:var(--el-b);opacity:calc(.85 * var(--el-power))}.xp-el[data-variant=fire] .xp-el-base{stroke:var(--el-b);opacity:.4}.xp-el[data-variant=fire] .xp-el-arc{stroke:var(--el-b);stroke-width:calc(var(--el-line) * 1.6px);opacity:calc(.6 * var(--el-power))}.xp-el[data-variant=fire] .xp-el-p0{stop-color:var(--el-c);stop-opacity:0}.xp-el[data-variant=fire] .xp-el-p1{stop-color:var(--el-a);stop-opacity:.7}.xp-el[data-variant=fire] .xp-el-p2{stop-color:var(--el-b);stop-opacity:1}.xp-el[data-variant=fire] .xp-el-sheet{filter:blur(.6px)}.xp-el[data-variant=fire] .xp-el-tide{opacity:calc((.72 - var(--i) * .18) * var(--el-power));animation:xp-el-lick calc((1.7 + var(--i) * .55) * 1s / var(--el-rate)) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.43s / var(--el-rate))}@keyframes xp-el-lick{0%{transform:translate3d(-5px,7px,0) scaleY(.82)}to{transform:translate3d(5px,-3px,0) scaleY(1.14)}}@keyframes xp-el-rise{0%{transform:translate3d(-.8px,1.6px,0)}to{transform:translate3d(.8px,-2.2px,0)}}.xp-el[data-variant=frost]{--el-a:#a5dcff;--el-b:#f2fbff;--el-c:#5f92c9}.xp-el[data-variant=frost] .xp-el-crackle{animation-name:xp-el-settle;animation-timing-function:ease-in-out;animation-direction:alternate}.xp-el[data-variant=frost] .xp-el-halo{stroke:var(--el-c);opacity:calc(.24 * var(--el-power))}.xp-el[data-variant=frost] .xp-el-core{stroke:var(--el-a);stroke-width:calc(var(--el-line) * 2.4px);stroke-linejoin:miter;stroke-miterlimit:2;opacity:calc(.6 * var(--el-power))}.xp-el[data-variant=frost] .xp-el-hot{stroke:var(--el-b);stroke-linejoin:miter;stroke-miterlimit:2;opacity:calc(.85 * var(--el-power))}.xp-el[data-variant=frost] .xp-el-base{stroke:var(--el-a);opacity:.42}.xp-el[data-variant=frost] .xp-el-arc{stroke:#fff;stroke-width:calc(var(--el-line) * 2.4px);stroke-linecap:butt;opacity:calc(.5 * var(--el-power));filter:blur(1.5px)}.xp-el[data-variant=frost] .xp-el-p0{stop-color:var(--el-b);stop-opacity:.95}.xp-el[data-variant=frost] .xp-el-p1{stop-color:var(--el-a);stop-opacity:.38}.xp-el[data-variant=frost] .xp-el-p2{stop-color:var(--el-c);stop-opacity:.55}.xp-el[data-variant=frost] .xp-el-wash{opacity:calc(.13 * var(--el-power))}.xp-el[data-variant=frost] .xp-el-tide{opacity:calc((.24 - var(--i) * .07) * var(--el-power));animation:xp-el-drift calc((54 + var(--i) * 17) * 1s / var(--el-rate)) linear infinite}@keyframes xp-el-settle{0%{transform:translate3d(-.4px,-.3px,0) scale(1)}to{transform:translate3d(.4px,.3px,0) scale(1.002)}}.xp-el[data-variant=water]{--el-a:#3fb6e8;--el-b:#cdeeff;--el-c:#0f5580}.xp-el[data-variant=water] .xp-el-crackle{animation-name:xp-el-swell;animation-timing-function:ease-in-out;animation-direction:alternate}.xp-el[data-variant=water] .xp-el-halo{stroke:var(--el-a);opacity:calc(.3 * var(--el-power))}.xp-el[data-variant=water] .xp-el-core{stroke:var(--el-a);stroke-width:calc(var(--el-line) * 1.8px);opacity:calc(.7 * var(--el-power))}.xp-el[data-variant=water] .xp-el-hot{stroke:var(--el-b);stroke-width:calc(var(--el-line) * .5px);opacity:calc(.5 * var(--el-power))}.xp-el[data-variant=water] .xp-el-base{stroke:var(--el-b);opacity:.3}.xp-el[data-variant=water] .xp-el-arc{stroke:#fff;stroke-width:calc(var(--el-line) * 1.1px);stroke-linecap:butt;opacity:calc(.7 * var(--el-power));filter:blur(.8px)}.xp-el[data-variant=water] .xp-el-p0{stop-color:var(--el-b);stop-opacity:1}.xp-el[data-variant=water] .xp-el-p1{stop-color:var(--el-a);stop-opacity:.42}.xp-el[data-variant=water] .xp-el-p2{stop-color:var(--el-c);stop-opacity:.62}.xp-el[data-variant=water] .xp-el-tide{opacity:calc((.26 - var(--i) * .06) * var(--el-power));animation:xp-el-drift calc((6.5 + var(--i) * 2.1) * 1s / var(--el-rate)) linear infinite;animation-delay:calc(var(--i) * -1.7s / var(--el-rate))}@keyframes xp-el-swell{0%{transform:translate3d(-1.6px,.8px,0)}to{transform:translate3d(1.6px,-.8px,0)}}.xp-el-bits{position:absolute;inset:calc(var(--el-bleed) * -1px);z-index:1;overflow:hidden;border-radius:calc((var(--el-radius) + var(--el-bleed)) * 1px);pointer-events:none}.xp-el-bit{position:absolute;left:calc(var(--x) * 1%);width:calc(var(--s) * 1px);height:calc(var(--s) * 1px);border-radius:50%;opacity:0;animation-duration:calc(var(--d) * 1s / var(--el-rate));animation-delay:calc(var(--w) * -1s);animation-iteration-count:infinite;animation-timing-function:linear}@keyframes xp-el-fall{0%{opacity:0;transform:translate3d(0,-8px,0)}14%{opacity:.8}78%{opacity:.45}to{opacity:0;transform:translate3d(calc(var(--dx) * 1px),var(--reach),0)}}@keyframes xp-el-lift{0%{opacity:0;transform:translateZ(0) scale(1)}18%{opacity:.85}to{opacity:0;transform:translate3d(calc(var(--dx) * 1px),var(--reach),0) scale(.3)}}@keyframes xp-el-bead{0%,58%{opacity:0;transform:translateZ(0) scale(.3)}66%{opacity:.85;transform:translateZ(0) scale(1)}76%{opacity:.85;transform:translate3d(0,2px,0) scale(1)}to{opacity:0;transform:translate3d(0,var(--reach),0) scale(.55)}}.xp-el[data-bits=in] .xp-el-bits{z-index:3}.xp-el[data-variant=frost] .xp-el-bit{opacity:0;top:0;--reach:calc((var(--el-h) + 40) * 1px);background:var(--el-b);box-shadow:0 0 3px color-mix(in oklab,var(--el-b) 55%,transparent);animation-name:xp-el-fall}.xp-el[data-variant=fire] .xp-el-bit{top:calc(var(--el-bleed) * 1px);--reach:-46px;background:var(--el-b);box-shadow:0 0 4px color-mix(in oklab,var(--el-a) 70%,transparent);animation-name:xp-el-lift;animation-timing-function:ease-out}.xp-el[data-variant=water] .xp-el-bit{bottom:calc(var(--el-bleed) * .7px);--reach:42px;background:color-mix(in oklab,var(--el-b) 78%,transparent);box-shadow:inset 0 -1px 1px color-mix(in oklab,var(--el-c) 65%,transparent);border-radius:50% 50% 55% 55%;animation-name:xp-el-bead;animation-timing-function:ease-in}.xp-el[data-live=true] .xp-el-base{transition:opacity .3s ease}.xp-el[data-live=true]:hover .xp-el-arc{animation-duration:calc(var(--el-lap) * .72s / var(--el-rate))}.xp-el[data-live=true]:hover .xp-el-base{opacity:.5}.xp-el[data-cursor=true]{cursor:none}.xp-el-cursor{position:absolute;top:0;left:0;z-index:4;width:0;height:0;opacity:0;pointer-events:none;transition:opacity .18s ease;will-change:transform}.xp-el-cursor[data-on=true]{opacity:1}.xp-el-cursor:after,.xp-el-cursor:before{content:"";position:absolute;border-radius:50%;transform:translate(-50%,-50%)}.xp-el-cursor:before{width:5px;height:5px;background:var(--el-b);box-shadow:0 0 7px color-mix(in oklab,var(--el-a) 85%,transparent)}.xp-el-cursor:after{width:20px;height:20px;border:1px solid color-mix(in oklab,var(--el-a) 65%,transparent)}.xp-el[data-variant=fire] .xp-el-cursor:after{width:17px;height:17px;border-color:transparent;background:radial-gradient(circle,color-mix(in oklab,var(--el-a) 52%,transparent),transparent 70%)}.xp-el[data-variant=frost] .xp-el-cursor:after{width:18px;height:18px;border-radius:3px;border-color:color-mix(in oklab,var(--el-b) 72%,transparent);transform:translate(-50%,-50%) rotate(45deg)}.xp-el[data-variant=water] .xp-el-cursor:after{width:22px;height:22px;border-color:color-mix(in oklab,var(--el-b) 58%,transparent);animation:xp-el-ripple 1.8s ease-out infinite}@keyframes xp-el-ripple{0%{transform:translate(-50%,-50%) scale(.55);opacity:.85}to{transform:translate(-50%,-50%) scale(1.15);opacity:0}}.xp-el[data-still=true] .xp-el-arc,.xp-el[data-still=true] .xp-el-back,.xp-el[data-still=true] .xp-el-core,.xp-el[data-still=true] .xp-el-crackle,.xp-el[data-still=true] .xp-el-cursor:after,.xp-el[data-still=true] .xp-el-halo,.xp-el[data-still=true] .xp-el-hot,.xp-el[data-still=true] .xp-el-shift,.xp-el[data-still=true] .xp-el-tide{animation:none!important}.xp-el[data-still=true] .xp-el-tide{transform:translate3d(0,2px,0) scaleY(1.04)}.xp-el[data-still=true] .xp-el-arc{stroke-dashoffset:calc(var(--i) * -21 - 12)}.xp-el[data-still=true] .xp-el-crackle{transform:translate3d(.6px,-.9px,0)}.xp-el[data-still=true] .xp-el-shift{transform:translate3d(calc(var(--el-hop) * .52px),calc(var(--el-hop) * -.81px),0)}.xp-el[data-still=true] .xp-el-back{transform:translate3d(calc(var(--el-hop) * -.52px),calc(var(--el-hop) * .81px),0)}@media (prefers-reduced-motion:reduce){.xp-el-cursor{transition:none}}