@keyframes gradient-shift{0%{background-position:0% 40%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}.switcheroo{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.333rem;padding:0.5rem 0.5rem;border-radius:50px;color:#64657a;border:1px solid transparent;font-size:0.833rem;font-weight:500;cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:transform 0.06s ease,filter 0.25s ease,background 0.35s ease,color 0.25s ease,box-shadow 0.35s ease;transform:none;}.switcheroo--open,.switcheroo:hover{border:none;color:#ffffff;background:linear-gradient(45deg,#fa1eff,#1a66ff);background-size:300% 300%;background-position:0% 50%;animation:gradient-shift 1s ease infinite;transform:translateY(-1px) scale(1.02);}.switcheroo::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2.778rem;background:linear-gradient(45deg,#fa1eff,#1a66ff,#fa1eff,#1a66ff);background-size:300% 300%;transition:background 0.3s;filter:blur(0.444rem);z-index:-1;}.switcheroo--open:before,.switcheroo:hover:before{filter:blur(0.333rem);animation:gradient-shift 4s ease infinite;}.switcheroo__twinkle{font-weight:700;background-image:linear-gradient(currentColor,transparent);-webkit-text-fill-color:rgba(255,255,255,0);background-clip:text;.switcheroo--open &,.switcheroo:hover &{background-image:linear-gradient(rgba(255,255,255,0),currentColor 75%);}}