@keyframes twinkle{0%{opacity:var(--twinkle-amount)}to{opacity:1}}@keyframes hueRotate{to{filter:hue-rotate(var(--hue-rotation))}}@keyframes fadeToTransparent{to{opacity:0}}@keyframes fadeFromOpaque{0%{opacity:1}}@keyframes colorShift{0%{background:var(--from-color)}}@keyframes disperse{to{transform:translate(calc(cos(var(--angle))*var(--distance)),calc(sin(var(--angle))*var(--distance)))}}@keyframes fromShrunken{0%{transform:scale(0)}}.particle{width:var(--size);height:var(--size);background:var(--color);pointer-events:none;animation:twinkle var(--twinkle-duration)infinite alternate ease-in-out,fadeToTransparent var(--fade-duration)var(--fade-delay)forwards,hueRotate 1s linear forwards,disperse var(--pop-duration)forwards var(--particle-curve);border-radius:50%;margin:auto;position:absolute;inset:0}.particleButton{--red:#ff002b;--particle-curve:cubic-bezier(.2,.56,0,1);cursor:pointer;background:0 0;border:none;border-radius:50%;padding:8px;transition:background .15s;position:relative}.particleButton:hover:not(:disabled){background:#ffffff1a}.particleButton:hover:not(:disabled) path{stroke:var(--red)}.particleButton:disabled{cursor:not-allowed;opacity:.7}.particleButton svg{width:1.75rem;height:1.75rem;display:block;position:relative;overflow:visible}.particleButton path{stroke:currentColor;stroke-width:2px;stroke-linecap:round;transition:stroke .15s}.particleButton.liked svg{animation:fromShrunken 2s var(--pop-circle-duration)backwards linear(0,.04 1.1%,.156 2.3%,1.015 8.5%,1.157 10.4%,1.217 12.4%,1.217 13.6%,1.193 15%,.992 21.7%,.964 23.5%,.952 25.3%,.957 27.9%,1.002 34.7%,1.01 38.2%,.998 51%,1)}.particleButton.liked path{fill:var(--red);stroke:var(--red)}.popCircle{--from-color:#f35;opacity:0;animation:fromShrunken var(--pop-circle-duration),colorShift var(--pop-circle-duration)forwards,fadeFromOpaque .3s var(--pop-circle-duration)backwards;background-color:#c9f;border-radius:50%;position:absolute;inset:0}