@property --mx{syntax:"<percentage>";inherits:true;initial-value:50%}@property --my{syntax:"<percentage>";inherits:true;initial-value:50%}@property --jelly-dent{syntax:"<number>";inherits:true;initial-value:0}@property --jelly-press{syntax:"<number>";inherits:true;initial-value:0}@property --jelly-depth{syntax:"<number>";inherits:true;initial-value:0}@property --jelly-rim{syntax:"<number>";inherits:true;initial-value:.5}@property --jelly-bloom-boost{syntax:"<number>";inherits:true;initial-value:1}@property --jelly-bloom-dx{syntax:"<length>";inherits:true;initial-value:0}@property --jelly-bloom-dy{syntax:"<length>";inherits:true;initial-value:0}@property --halo-y{syntax:"<percentage>";inherits:true;initial-value:33%}@property --holo-angle{syntax:"<angle>";inherits:false;initial-value:200deg}:root{--jelly-size:52px;--jelly-icon-scale:.4;--jelly-radius:30%;--jelly-radius-press:36% 37% 27% 26% / 47% 46% 25% 24%;--mx:38%;--my:26%;--jelly-ink:#0c0316;--jelly-emissive:1;--jf-frost:.5;--jf-glow:.82;--jf-hot:.55;--jf-shadow:.58;--jelly-bloom:.85;--jelly-bloom-size:42px;--jelly-dent:0;--jelly-dent-hover:.34;--jelly-cast:.4;--jelly-rim-hover:.72;--jelly-press-shadow:.42;--jf-lighten:0;--jf-saturate:1}[data-theme=light]{--jelly-ink:#2a2350;--jelly-emissive:.62;--jf-frost:.68;--jf-glow:.7;--jf-hot:.62;--jf-shadow:.4;--jelly-bloom:.42;--jelly-bloom-size:24px;--jelly-cast:.02;--jelly-dent-hover:.15;--jelly-rim-hover:1;--jelly-press-shadow:.12;--jf-lighten:.07;--jf-saturate:1.22}.jelly{--c:#a855f7;--c2:var(--c);--grad:0;--grad-angle:120deg;--c-base:oklch(from color-mix(in oklab, var(--c), var(--c2) 50%) calc(l + var(--jf-lighten)) calc(c * var(--jf-saturate)) h);--c-mid:color-mix(in oklab, var(--c), var(--c2) 50%);--frost:color-mix(in oklab, var(--c-base) calc((1 - var(--jf-frost)) * 100%), white);--light:color-mix(in oklab, var(--c-base) calc((1 - var(--jf-frost) * .5) * 100%), white);--mid:var(--c-base);--glow:color-mix(in oklab, var(--c-base) calc(var(--jf-glow) * 100%), white);--hot:color-mix(in oklab, var(--c-base) calc(var(--jf-hot) * 100%), white);--jelly-tint:var(--jelly-ink);--shadow:color-mix(in oklab, var(--c-base) calc(var(--jf-shadow) * 100%), var(--jelly-tint));--jelly-rim:calc(var(--jelly-rim-hover) * .5);inline-size:var(--jelly-size);block-size:var(--jelly-size);border-radius:var(--jelly-radius);isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 78%;box-shadow: 0 8px 11px -16px rgba(0, 0, 0, calc(var(--jelly-press-shadow) * var(--jelly-depth))),  0 17px 28px -13px rgba(0, 0, 0, var(--jelly-cast)), 0 5px 10px -4px rgba(0, 0, 0, calc(var(--jelly-cast) * .6)), var(--jelly-bloom-dx) calc(11px + var(--jelly-bloom-dy)) var(--jelly-bloom-size) -10px color-mix(in oklab, var(--c-mid) calc(var(--jelly-bloom) * var(--jelly-bloom-boost) * 100%), transparent), var(--jelly-bloom-dx) calc(4px + var(--jelly-bloom-dy)) calc(var(--jelly-bloom-size) * .7) -6px color-mix(in oklab, var(--hot) calc(var(--jelly-bloom) * var(--jelly-bloom-boost) * 90%), transparent),  0 0 0 1px color-mix(in oklab, var(--shadow) 52%, transparent),  inset 0 0 0 1.5px color-mix(in oklab, color-mix(in oklab, white 74%, var(--frost)) calc(var(--jelly-rim) * 100%), transparent), inset 0 2px 2px #ffffff4d, inset 0 -9px 13px -9px color-mix(in oklab, white 45%, var(--frost));background:0 0;border:0;place-items:center;padding:0;transition:transform .34s cubic-bezier(.34,1.3,.4,1),border-radius .3s,box-shadow .34s,--jelly-dent .3s,--jelly-press .16s,--jelly-depth .22s,--jelly-rim .3s,--jelly-bloom-boost .3s,--jelly-bloom-dx .3s,--jelly-bloom-dy .3s,filter .34s;display:grid;position:relative}.jelly__body{z-index:0;border-radius:inherit;pointer-events:none;background: radial-gradient(64% 58% at 50% 56%, color-mix(in oklab, var(--shadow) calc(var(--jelly-press) * 100%), transparent) 0%, transparent 72%),  radial-gradient(62% 52% at var(--mx) var(--my), color-mix(in oklab, var(--shadow) calc(var(--jelly-dent) * 100%), transparent) 0%, transparent 66%),  radial-gradient(66% 58% at 50% 62%, color-mix(in oklab, var(--glow) 60%, transparent) 0%, color-mix(in oklab, var(--mid) 30%, transparent) 42%, transparent 70%),  linear-gradient(180deg, color-mix(in oklab, var(--frost) 94%, white) 0%, color-mix(in oklab, var(--frost) 76%, transparent) 14%, color-mix(in oklab, var(--light) 42%, var(--mid)) 33%, var(--mid) 56%, var(--glow) 82%, var(--hot) 95%, color-mix(in oklab, var(--hot) 50%, white) 100%);opacity:.8;transition:filter .13s,opacity .3s;position:absolute;inset:0;-webkit-mask:radial-gradient(66% 96% at 50% 46%,#000 52%,#0000 100%);mask:radial-gradient(66% 96% at 50% 46%,#000 52%,#0000 100%)}.jelly:hover .jelly__body,.jelly-host:hover .jelly .jelly__body{opacity:1}.jelly:active .jelly__body{filter:brightness(.9)}.jelly__body:before{content:"";border-radius:inherit;background:linear-gradient(var(--grad-angle), var(--c) 2%, var(--c2) 98%);opacity:var(--grad);position:absolute;inset:0}.jelly:before{content:"";z-index:2;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, color-mix(in oklab, white 55%, var(--frost)) 0%, transparent 72%);box-shadow:inset 0 7px 12px -3px var(--shadow), inset 0 -6px 10px -4px var(--frost);opacity:.03;position:absolute;inset:4% 4.5% 6%;-webkit-mask:radial-gradient(122% 122% at 50% 42%,#000 48%,#0000 94%);mask:radial-gradient(122% 122% at 50% 42%,#000 48%,#0000 94%)}.jelly:after{content:"";z-index:4;border-radius:inherit;pointer-events:none;background: radial-gradient(24% 24% at 26% 22%, color-mix(in oklab, white 40%, var(--light)) 0%, transparent 82%),  linear-gradient(100deg, color-mix(in oklab, white 24%, var(--light)) 0%, color-mix(in oklab, var(--light) 14%, transparent) 20%, transparent 46%),  linear-gradient(180deg, #ffffff09 0%, transparent 32%);mix-blend-mode:screen;opacity:calc(var(--jelly-gloss,1) * .7);position:absolute;inset:0}.jelly__core{z-index:1;border-radius:inherit;pointer-events:none;background:radial-gradient(62% 52% at 50% 76%, var(--hot) 0%, color-mix(in oklab, var(--glow) 78%, transparent) 40%, transparent 73%), radial-gradient(98% 82% at 50% 68%, color-mix(in oklab, var(--mid) 40%, transparent) 0%, transparent 72%);filter:blur(2.5px);opacity:calc(var(--jelly-emissive) * (1 - var(--grad) * .5));position:absolute;inset:0}.jelly__halo{z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(44% 32% at 50% var(--halo-y), #ffffff80 0%, #fff0 64%);mix-blend-mode:screen;transition:--halo-y .14s cubic-bezier(.05,.8,.2,1);position:absolute;inset:0}.jelly:active .jelly__halo{--halo-y:15%}.jelly__halo:before,.jelly__halo:after{content:"";width:38%;height:24%;filter:blur(calc(var(--jelly-size) * .024));mix-blend-mode:screen;opacity:0;background:radial-gradient(closest-side,#ffffff57 0%,#fff0 74%);border-radius:50%;transition:opacity .2s;position:absolute;bottom:4%}.jelly__halo:before{left:-8%;transform:rotate(-45deg)}.jelly__halo:after{right:-8%;transform:rotate(45deg)}.jelly:active .jelly__halo:before,.jelly:active .jelly__halo:after{opacity:.55}.jelly>svg{z-index:3;pointer-events:none;inline-size:calc(var(--jelly-size) * var(--jelly-icon-scale));block-size:calc(var(--jelly-size) * var(--jelly-icon-scale));transform:translateY(calc(var(--jelly-size) * -.05));color:color-mix(in oklab, var(--c) 40%, var(--jelly-ink));stroke:currentColor;fill:none;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;opacity:.72;filter:drop-shadow(0 calc(var(--jelly-size) * .03) 2.5px color-mix(in oklab, var(--jelly-ink) 58%, transparent)) drop-shadow(0 -.5px .6px #ffffff80);transition:color .3s,filter .35s,opacity .3s,transform .16s cubic-bezier(.34,1.4,.5,1);position:relative}.jelly:hover,.jelly-host:hover .jelly{filter:brightness(1.07)saturate(1.07);--jelly-rim:var(--jelly-rim-hover)}.jelly:hover{--jelly-dent:var(--jelly-dent-hover)}.jelly:hover>svg{opacity:1;color:color-mix(in oklab, var(--c) 32%, white);filter:drop-shadow(0 0 4px #ffffffd9) drop-shadow(0 0 10px color-mix(in oklab, var(--glow) 78%, transparent)) drop-shadow(0 0 19px color-mix(in oklab, var(--c) 60%, transparent))}.jelly-host:hover .jelly>svg{opacity:1;color:#fff;filter:drop-shadow(0 0 4px #ffffffe6) drop-shadow(0 0 11px color-mix(in oklab, var(--glow) 78%, transparent)) drop-shadow(0 0 19px color-mix(in oklab, var(--c) 55%, transparent))}.jelly:active{border-radius:var(--jelly-radius-press);--jelly-press:.3;--jelly-depth:1;--jelly-bloom-boost:1.1;--jelly-bloom-dy:calc(var(--jelly-size) * .1);filter:brightness(1.04);transition:transform .12s cubic-bezier(.05,.8,.2,1),border-radius .17s cubic-bezier(.12,.7,.25,1),filter .12s,--jelly-press .1s,--jelly-depth .1s,--jelly-bloom-boost .16s,--jelly-bloom-dx .16s,--jelly-bloom-dy .16s;transform:perspective(200px)translateY(2%)rotateX(15deg)scale(1.05,.95)}.jelly:active>svg{transform:translateY(calc(var(--jelly-size) * -.04)) scale(1.05) scaleY(.93)}@keyframes jelly-bounce{0%{border-radius:var(--jelly-radius-press);transform:perspective(200px)translateY(2%)rotateX(15deg)scale(1.05,.95)}34%{transform:perspective(220px)translateY(-.75%)rotateX(-3.75deg)scale(.979,1.034)}60%{transform:perspective(240px)rotateX(1.8deg)scale(1.013,.993)}82%{transform:perspective(260px)rotateX(-.6deg)scale(.997,1.006)}to{border-radius:var(--jelly-radius);transform:perspective(260px)rotateX(0)scale(1)}}.jelly--bounce{animation:.5s cubic-bezier(.32,.7,.4,1) 75ms backwards jelly-bounce}.jelly[aria-current=true],.jelly.is-active{--jelly-emissive:1.3;--jelly-bloom:1.1}.jelly[aria-current=true]>svg,.jelly.is-active>svg{color:color-mix(in oklab, var(--c) 42%, white)}.jelly--pill,.jelly--rect{align-items:center;block-size:auto;inline-size:auto;display:inline-flex}.jelly--pill{--jelly-radius:999px;--jelly-radius-press:999px}.jelly--rect{--jelly-radius:calc(var(--jelly-size) * .34);--jelly-radius-press:calc(var(--jelly-size) * .34)}.jelly--pill .jelly__halo:before,.jelly--pill .jelly__halo:after,.jelly--rect .jelly__halo:before,.jelly--rect .jelly__halo:after{content:none}.jelly--pill .jelly__body,.jelly--rect .jelly__body{-webkit-mask:radial-gradient(88% 92% at 50% 46%,#000 74%,#0000 100%);mask:radial-gradient(88% 92% at 50% 46%,#000 74%,#0000 100%)}.jelly__label{z-index:3;align-items:center;gap:calc(var(--jelly-size) * .2);padding:calc(var(--jelly-size) * .28) calc(var(--jelly-size) * .44) calc(var(--jelly-size) * .28) calc(var(--jelly-size) * .34);pointer-events:none;transform-origin:50%;opacity:.55;transition:transform .12s cubic-bezier(.05,.8,.2,1),opacity .3s .1s;display:inline-flex;position:relative}.jelly:hover .jelly__label{opacity:1;transition-delay:0s}.jelly:active .jelly__label{transform:scale(1.07)}.jelly__label svg{inline-size:calc(var(--jelly-size) * var(--jelly-icon-scale));block-size:calc(var(--jelly-size) * var(--jelly-icon-scale));color:color-mix(in oklab, var(--c) 40%, var(--jelly-ink));stroke:currentColor;fill:none;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 calc(var(--jelly-size) * .03) 2.5px color-mix(in oklab, var(--jelly-ink) 58%, transparent));transition:color .3s .1s,filter .35s .1s}.jelly__label>span{font-family:Bricolage Grotesque,inherit;font-weight:700;font-size:calc(var(--jelly-size) * .3);letter-spacing:-.01em;white-space:nowrap;color:color-mix(in oklab, var(--c) 40%, var(--jelly-ink));text-shadow:0 calc(var(--jelly-size) * .02) 2px color-mix(in oklab, var(--jelly-ink) 45%, transparent);transition:color .3s .1s,text-shadow .3s .1s}.jelly:hover .jelly__label svg,.jelly:hover .jelly__label>span{color:color-mix(in oklab, var(--c) 32%, white);transition-delay:0s}.jelly:hover .jelly__label svg{filter:drop-shadow(0 0 4px #fffc) drop-shadow(0 0 11px color-mix(in oklab, var(--glow) 75%, transparent))}.jelly:active .jelly__label{opacity:1}.jelly:active .jelly__label svg,.jelly:active .jelly__label>span{color:color-mix(in oklab, var(--c) 26%, white);transition-delay:0s}.jelly:active .jelly__label>span{text-shadow:0 0 5px #ffffffa6, 0 0 14px color-mix(in oklab, var(--glow) 72%, transparent)}.jelly:active .jelly__label svg{filter:drop-shadow(0 0 4px #ffffffd9) drop-shadow(0 0 13px color-mix(in oklab, var(--glow) 78%, transparent))}.jelly--holo .jelly__core{background:conic-gradient(from var(--holo-angle,200deg) at 50% 66%, #f877b873, #ad77f873, #77cdf873, #71f4c873, #f877b873), radial-gradient(62% 52% at 50% 76%, var(--hot) 0%, color-mix(in oklab, var(--glow) 78%, transparent) 40%, transparent 73%);transition:--holo-angle .9s}.jelly--holo:hover .jelly__core{--holo-angle:380deg}.jelly--clear{--jelly-emissive:0;--jelly-bloom:.3;--jelly-rim:.4;--jelly-rim-hover:.62;--jelly-clear-tone:#fff}[data-theme=light] .jelly--clear{--jelly-rim:.9;--jelly-rim-hover:1;--jelly-clear-tone:var(--jelly-ink)}.jelly--clear .jelly__body{opacity:.16;-webkit-mask:none;mask:none}.jelly--clear:hover .jelly__body,.jelly-host:hover .jelly--clear .jelly__body{opacity:.3}.jelly--clear .jelly__core{opacity:0}.jelly--clear:hover .jelly__core,.jelly-host:hover .jelly--clear .jelly__core{opacity:.35}.jelly--clear:before{opacity:.4;inset:0}.jelly--clear>svg{color:color-mix(in oklab, var(--c) 64%, var(--jelly-clear-tone));opacity:.95;filter:drop-shadow(0 calc(var(--jelly-size) * .02) 2px color-mix(in oklab, var(--jelly-ink) 32%, transparent)) drop-shadow(0 -.5px .6px #ffffff80)}.jelly--clear .jelly__label svg,.jelly--clear .jelly__label>span{color:color-mix(in oklab, var(--c) 64%, var(--jelly-clear-tone))}.jelly--clear:hover>svg,.jelly--clear:hover .jelly__label svg,.jelly--clear:hover .jelly__label>span{color:color-mix(in oklab, var(--c) 78%, var(--jelly-clear-tone))}.jelly--neutral{--c-base:#e9eef7;--c-mid:#fff;--neutral-tone:#fff}[data-theme=light] .jelly--neutral{--neutral-tone:var(--jelly-ink)}.jelly--neutral>svg,.jelly--neutral .jelly__label svg,.jelly--neutral .jelly__label>span{color:color-mix(in oklab, var(--neutral-tone) 80%, var(--jelly-ink))}.jelly--neutral:hover>svg,.jelly--neutral:hover .jelly__label svg,.jelly--neutral:hover .jelly__label>span{color:color-mix(in oklab, var(--neutral-tone) 95%, var(--jelly-ink))}@media (prefers-reduced-motion:reduce){.jelly{transition:box-shadow .2s,filter .2s}.jelly:hover,.jelly:active,.jelly[aria-current=true],.jelly.is-active{transform:none}}.jelly:focus-visible{outline:2px solid color-mix(in oklab, var(--c) 70%, white);outline-offset:3px}