.easter-egg-btn{--white:#fff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#3b82f6;--blue-500:#1d4ed8;--radius:18px;border-radius:var(--radius);cursor:pointer;transform-origin:0 0;background:0 0;border:0;outline:none;width:260px;height:80px;font-family:inherit;font-size:23px;position:relative;transform:scale(.5)}.easter-egg-btn .bg{border-radius:inherit;filter:blur(1px);position:absolute;inset:0}.easter-egg-btn .bg:before,.easter-egg-btn .bg:after{content:"";border-radius:calc(var(--radius) * 1.1);background:var(--blue-500);position:absolute;inset:0}.easter-egg-btn .bg:before{display:none}.easter-egg-btn .wrap{border-radius:inherit;background:linear-gradient(to bottom, var(--blue-100) 0%, var(--blue-400) 100%);height:100%;padding:3px;transition:all .3s;position:relative;overflow:hidden}.easter-egg-btn .outline{opacity:1;border-radius:inherit;outline:none;transition:all .4s;position:absolute;inset:0;overflow:hidden}.easter-egg-btn .outline:before{content:"";background:linear-gradient(90deg,#0000 0%,#fff 50%,#0000 100%);width:120px;height:300px;margin:auto;animation:3s linear infinite easterEggSpin;position:absolute;inset:2px}.easter-egg-btn .content{pointer-events:none;z-index:1;border-radius:calc(var(--radius) * .85);background:linear-gradient(to bottom, var(--blue-300) 0%, var(--blue-400) 100%);height:100%;box-shadow:inset -2px 12px 11px -5px var(--blue-200), inset 1px -3px 11px 0px #00000059;justify-content:center;align-items:center;gap:8px;padding:0 20px;font-weight:600;transition:all .3s;display:flex;position:relative}.easter-egg-btn .content:before{content:"";z-index:10;opacity:.7;background:linear-gradient(to bottom, transparent, var(--blue-400));filter:brightness(1.3)blur(5px);width:80%;margin:auto;position:absolute;inset:45% 0 35%}.easter-egg-btn .char{justify-content:center;align-items:center;transition:all .3s;display:flex}.easter-egg-btn .char span{color:#0000;display:block;position:relative}.easter-egg-btn .char.state-1 span{animation:easterEggCharAppear 1.2s ease backwards calc(var(--i) * 30ms)}.easter-egg-btn .char.state-1 span:before,.easter-egg-btn .char span:after{content:attr(data-label);color:var(--white);text-shadow:-1px 1px 0px var(--blue-500);position:absolute;left:0}.easter-egg-btn .char span:before{opacity:0;transform:translateY(-100%)}.easter-egg-btn .char.state-2{position:absolute;left:80px}.easter-egg-btn .char.state-2 span:after{opacity:1}.easter-egg-btn .icon{z-index:10;animation:.8s cubic-bezier(.7,-.5,.3,1.2) forwards easterEggResetArrow}.easter-egg-btn .icon div,.easter-egg-btn .icon div:before,.easter-egg-btn .icon div:after{background-color:var(--white);border-radius:1px;height:3px}.easter-egg-btn .icon div:before,.easter-egg-btn .icon div:after{content:"";transform-origin:100%;border-radius:15px;width:14px;transition:all .3s;position:absolute;right:0}.easter-egg-btn .icon div{width:24px;box-shadow:-2px 2px 5px var(--blue-400);background:linear-gradient(to bottom, var(--white), var(--blue-100));animation:1s ease-in-out infinite paused easterEggSwingArrow;position:relative;transform:scale(.9)}.easter-egg-btn .icon div:before{box-shadow:1px -2px 3px -1px var(--blue-400);animation:1s linear infinite paused easterEggRotateArrowLine;top:1px;transform:rotate(44deg)}.easter-egg-btn .icon div:after{box-shadow:-2px 2px 3px 0 var(--blue-400);background:linear-gradient(200deg, var(--white), var(--blue-100));animation:1s linear infinite paused easterEggRotateArrowLine2;bottom:1px;transform:rotate(316deg)}.easter-egg-btn .path{z-index:12;stroke-dasharray:150 480;stroke-dashoffset:150px;pointer-events:none;position:absolute;bottom:0;left:0;right:0}.easter-egg-btn .splash{pointer-events:none;stroke-dasharray:60 60;stroke-dashoffset:60px;stroke:var(--blue-300);position:absolute;top:0;left:0;transform:translate(-17%,-31%)}.easter-egg-btn:hover .words{opacity:1}.easter-egg-btn:hover .words span{animation-play-state:running}.easter-egg-btn:hover .char.state-1 span:before{animation:easterEggCharAppear .7s ease calc(var(--i) * 30ms)}.easter-egg-btn:hover .char.state-1 span:after{opacity:1;animation:easterEggCharDisappear .7s ease calc(var(--i) * 30ms)}.easter-egg-btn:hover .wrap{transform:scale(1.02)}.easter-egg-btn:hover .outline{opacity:1}.easter-egg-btn:hover .outline:before,.easter-egg-btn:hover .icon div:before,.easter-egg-btn:hover .icon div:after,.easter-egg-btn:hover .icon div{animation-play-state:running}.easter-egg-btn:active .bg:before{filter:blur(5px);opacity:.7;box-shadow:-7px 6px #1d4ed866,-14px 12px #1d4ed840,-21px 18px 4px #1d4ed826}.easter-egg-btn:active .content{box-shadow:inset -1px 12px 8px -5px #1d4ed866, inset 0px -3px 8px 0px var(--blue-200)}.easter-egg-btn:active .words,.easter-egg-btn:active .outline{opacity:0}.easter-egg-btn:active .wrap{transform:scale(.98)}.easter-egg-btn:active .splash{animation:.8s cubic-bezier(.3,0,0,1) 50ms forwards easterEggSplash}.easter-egg-btn:focus .path{animation:1.6s .2s forwards easterEggPath}.easter-egg-btn:focus .icon{animation:1s cubic-bezier(.7,-.5,.3,1.5) forwards easterEggArrow}.easter-egg-btn .char.state-2 span:after,.easter-egg-btn:focus .char.state-1 span{animation:easterEggCharDisappear .5s ease forwards calc(var(--i) * 30ms)}.easter-egg-btn:focus .char.state-2 span:after{animation:easterEggCharAppear 1s ease backwards calc(var(--i) * 30ms)}@keyframes easterEggSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes easterEggCharAppear{0%{opacity:0;filter:blur(20px);transform:translateY(50%)}20%{opacity:1;transform:translateY(70%)}50%{opacity:1;filter:blur();transform:translateY(-15%)}to{opacity:1;transform:translateY(0)}}@keyframes easterEggCharDisappear{0%{opacity:1;transform:translateY(0)}to{opacity:0;filter:blur(3px);transform:translateY(-70%)}}@keyframes easterEggArrow{0%{opacity:1}50%{opacity:0;transform:translate(60px)}51%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(-128px)}}@keyframes easterEggSwingArrow{50%{transform:translate(5px)scale(.9)}}@keyframes easterEggRotateArrowLine{50%{transform:rotate(30deg)}80%{transform:rotate(55deg)}}@keyframes easterEggRotateArrowLine2{50%{transform:rotate(330deg)}80%{transform:rotate(300deg)}}@keyframes easterEggResetArrow{0%{transform:translate(-128px)}to{transform:translate(0)}}@keyframes easterEggPath{0%{stroke:#fff}to{stroke-dashoffset:-480px;stroke:#bfdbfe}}@keyframes easterEggSplash{to{stroke-dasharray:2 60;stroke-dashoffset:-60px}}
