.lamp-button-root{display:inline-block;position:relative}.area{--ease-elastic:cubic-bezier(.5,2,.3,.8);--ease-elastic-2:cubic-bezier(.5,-1,.3,.8);--primary:#f80;--rounded-max:100px;--rounded-min:10px;--h:78px;justify-content:center;align-items:center;display:flex;position:relative;inset:auto}.area .area-wrapper{cursor:pointer;padding:20px 5px;position:relative}.area .area-wrapper:hover .wrapper{transform:translateY(0)scale(1)}.area .area-wrapper:hover .wrapper .case .mask{box-shadow:inset 8px -15px 15px -10px #000,inset 10px -17px 12px -12px #fff,0 20px 50px -5px #111}.area .area-wrapper:hover .wrapper .part-2 .glass{box-shadow:inset 0 0 7px -4px #fff,inset 0 -10px 10px -8px #fff6,inset 8px -15px 15px -10px #000,inset 8px -10px 12px -12px #fff,0 20px 50px -5px #111}.area svg{overflow:visible}.wrapper{z-index:2;transition:all .6s var(--ease-elastic);border-radius:100px;display:block;position:relative;transform:translateY(-10px)scale(1.02)}.wrapper input{opacity:0;z-index:1;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none;background:0 0;outline:none;width:100%;height:100%;position:absolute;inset:0}.wrapper .button{background:0 0;border:none;margin:0;padding:0;display:flex}.wrapper .button:before{content:"";pointer-events:none;background:var(--primary);background:linear-gradient(to right,var(--primary)0%,transparent 100%);z-index:1;filter:blur(30px);mix-blend-mode:color-dodge;opacity:0;border-radius:0 50% 50% 0;width:70%;height:100%;margin:auto;transition:all 1s .4s;position:absolute;top:0;bottom:0;left:25%}.wrapper .button:after{content:"";pointer-events:none;background:var(--primary);z-index:2;filter:blur(15px);mix-blend-mode:color-dodge;opacity:0;border-radius:50%;width:50px;height:50px;margin:auto;transition:all 1s .4s;position:absolute;top:0;bottom:0;left:28%}.wrapper .button .part-1{z-index:1;height:var(--h);border-radius:var(--rounded-max)var(--rounded-min)var(--rounded-min)var(--rounded-max);width:80px;position:relative}.wrapper .button .part-1 .line{transition:all .4s;position:absolute;top:0;bottom:0;right:-1px}.wrapper .button .part-1 .line:before{content:"";background:#fff;border-radius:50%;width:1px;height:0%;margin:auto;animation:1.8s infinite line;position:absolute;top:0;bottom:0;right:0;box-shadow:1px 0 10px 3px #ffa600}.wrapper .button .part-1 .screw{z-index:-1;margin:auto;padding:10px 0;position:absolute;top:0;bottom:0;right:0;overflow:hidden}.wrapper .button .part-1 .screw svg{width:auto;height:60px}.wrapper .button .part-1 .screw svg g{transform-origin:50%}.wrapper .button .part-1 .screw svg .dot{color:#8e8c8b}.wrapper .button .part-1 .case{height:var(--h);border-radius:inherit;width:80px;transition:all .9s var(--ease-elastic);transform:translate(-40px)}.wrapper .button .part-1 .case .mask{border-radius:inherit;box-shadow:none;transition:all .9s var(--ease-elastic);background:linear-gradient(#2c2e31 0%,#31343e 20%,#212329 100%);position:absolute;inset:0;overflow:hidden}.wrapper .button .part-1 .case .mask:before{content:"";border-radius:inherit;filter:blur(12px);background:#fff;width:100%;height:30%;position:absolute;top:23%;left:30%}.wrapper .button .part-1 .case .mask:after{content:"";mix-blend-mode:overlay;background-color:#fff3;width:4px;position:absolute;top:0;bottom:0;right:0}.wrapper .button .part-2{height:var(--h);border-radius:var(--rounded-min)var(--rounded-max)var(--rounded-max)var(--rounded-min);justify-content:center;align-items:center;width:190px;transition:all .6s;display:flex;position:relative}.wrapper .button .part-2 .glass{width:100%;height:100%;transition:all .9s var(--ease-elastic);border-radius:inherit;box-shadow:none;background:linear-gradient(#ffffff26 0%,#fff3 50%,#00000080 100%);border-left:1px solid #0000004d;position:relative;overflow:hidden}.wrapper .button .part-2 .glass:before{content:"";background:linear-gradient(#ffffff80 0%,#fff0 60%);border-radius:0 25px 0 0;height:70%;position:absolute;top:10%;left:0;right:14%}.wrapper .button .part-2 .glass:after{content:"";filter:blur(3px);border-radius:0 30px 30px 0;height:75%;position:absolute;bottom:15%;left:0;right:5%;box-shadow:inset -2px -6px 5px -5px #fffc}.wrapper .button .part-2 .glass .glass-reflex{background:linear-gradient(90deg,#ffffff08 0%,#fff3 100%);border-radius:0 50% 50% 0;width:70%;position:absolute;inset:0;transform:translate(-115%)skew(30deg)}.wrapper .button .part-2 .glass .glass-noise{opacity:.2;position:absolute;inset:0}.wrapper .button .part-2 .path-glass{opacity:0;transition:opacity .6s linear;position:absolute;inset:0}.wrapper .button .part-2 .path-glass path{stroke-dashoffset:430px;stroke-dasharray:430 430;animation:1.4s infinite path-glass}@keyframes path-glass{0%{stroke-dasharray:430 430;color:#adff2f;opacity:1;filter:blur(2px)}50%{stroke-dasharray:860 430;opacity:1;filter:blur(4px)}to{stroke-dasharray:860 430;color:var(--primary);opacity:0}}.simple-lamp-button{color:#fff;letter-spacing:.02em;background:linear-gradient(135deg,#ff88002e,#ffffff0f);border:1px solid #ffffff26;border-radius:9999px;justify-content:center;align-items:center;padding:10px 18px;font-weight:600;transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex;box-shadow:0 12px 30px -16px #0009,0 0 0 1px #ffffff14}.simple-lamp-button:hover{transform:translateY(-1px);box-shadow:0 16px 32px -18px #000000a6,0 0 0 1px #ffffff1f}.simple-lamp-button:active{transform:translateY(0);box-shadow:0 10px 24px -14px #0009,0 0 0 1px #ffffff1f}@media (hover:none),(pointer:coarse){.lamp-button-root{transition:transform .6s ease-in-out,filter .6s ease-in-out}.lamp-button-root:before{opacity:.65}.wrapper .button .part-2{width:145px}.lamp-button-root .noise{width:200px;height:150px}}.wrapper .button .part-2 .filament{stroke-width:2px;opacity:.3;width:auto;height:26px;margin:auto;position:absolute;top:0;bottom:0;left:0}.wrapper .button .part-2 .filament path{transition:all .6s ease-in-out}.wrapper .button .part-2 .filament-on{opacity:1}.wrapper .button .part-2 .filament-on path{stroke-dashoffset:100px;stroke-dasharray:100 100}.wrapper .button .part-2 .filament-blur{opacity:1;filter:blur(8px);color:#ffd000;stroke-width:10px}.text{letter-spacing:.16em;justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;inset:0;transform:translateY(-4px)}.text span{color:#0000;display:block;position:relative}.text.state-1 span:nth-child(3),.text.state-2 span:nth-child(4),.text.state-2 span:nth-child(6){margin-right:5px}.text span:before,.text span:after{content:attr(data-label);color:#ffffffe6;font-size:18px;position:absolute;left:0}.text span:before{opacity:0;transform:translateY(-100%)}.area-wrapper input:checked~.button .filament path{transition-delay:.6s}.area-wrapper:hover input:checked~.button .filament path{stroke-dasharray:100 0}.area-wrapper input:checked~.button .part-1 .case{transition:all 1.25s var(--ease-elastic-2);transform:translate(0)}.area-wrapper:hover input:checked~.button:before,.area-wrapper:hover input:checked~.button:after,.area-wrapper:hover input:checked~.button .path-glass{opacity:1}.area-wrapper:hover .button .part-1 .line{opacity:0}.area-wrapper input:not(:checked)~.button .part-1 .line:before{background:#8c8c8c;box-shadow:1px 0 10px 3px #ffdc9166}.area-wrapper:hover .glass-reflex{animation:.6s reflex}.area-wrapper:hover .text span:before{animation:char-in 1s ease calc(var(--i)*30ms)forwards}.area-wrapper:hover .text span:after,.area-wrapper input:not(:checked)~.button .text.state-1 span:before,.area-wrapper input:not(:checked)~.button .text.state-1 span:after,.area-wrapper input:checked~.button .text.state-2 span:before,.area-wrapper input:checked~.button .text.state-2 span:after{opacity:0;animation:char-out 1.3s ease calc(var(--i)*40ms)backwards}.area-wrapper input:not(:checked)~.button .part-1 .screw g{animation:pulse .8s ease calc(var(--i)*.1s)backwards}.area-wrapper input:checked~.button .part-1 .screw g{animation:pulse-out .8s ease calc((5 - var(--i))*.2s)backwards}.area-wrapper input:not(:checked)~.button .part-1 .screw .dot{animation:dot .7s ease calc(var(--i)*.15s)backwards}.area-wrapper input:checked~.button .part-1 .screw .dot{animation:dot-out .7s ease calc((3 - var(--i))*.15s)forwards}@keyframes line{0%{opacity:1;height:0%}50%{opacity:1;height:100%}to{opacity:0;height:140%}}@keyframes dot{30%{color:var(--primary);filter:blur(2px)}}@keyframes dot-out{40%{color:#fff;filter:blur(2px)}}@keyframes pulse{30%{transform:scaleY(.8)}}@keyframes pulse-out{40%{transform:scaleY(.8)}}@keyframes char-in{0%{opacity:0;filter:blur(10px);color:#00fbff;transform:scale(10)translate(-25%)}25%{opacity:1;filter:blur(1px);color:var(--primary);transform:translateY(-15%)}50%{opacity:1;filter:blur();transform:translateY(7%)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes char-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;filter:blur(4px);transform:translateY(-70%)}}@keyframes reflex{0%{transform:translate(-115%)}to{transform:translate(140%)}}.lamp-button-root .noise{opacity:.06;filter:grayscale()blur(18px);pointer-events:none;z-index:1;border-radius:9999px;width:320px;height:220px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(circle,#0000 0%,#fff 50%,#0000 100%);mask-image:radial-gradient(circle,#0000 0%,#fff 50%,#0000 100%)}.bg{position:absolute;inset:0}.bg svg{z-index:999;position:absolute;inset:0;overflow:visible}.bg:before{content:"";background-color:var(--primary);filter:blur(130px);z-index:1;border-bottom:10px solid #fff;border-left:10px solid #fff;border-radius:50%;width:50%;height:50%;position:absolute;top:-25%;right:-25%}.bg .light-1{filter:blur(90px);background-color:#fff;border-radius:0 0 50% 50%;width:8%;height:70%;position:absolute;top:-35%;right:20%;transform:rotate(65deg)}.bg .light-2{background-color:var(--primary);filter:blur(80px);border-radius:50%;width:2%;height:90%;position:absolute;top:-25%;right:20%;transform:rotate(50deg)}.bg .light-3{filter:blur(80px);background-color:#fff;border-radius:0 0 50% 50%;width:3%;height:80%;position:absolute;top:-20%;right:0%;transform:rotate(35deg)}.lamp-button-root{transform-origin:50%;transition:transform .5s ease-in-out,filter .5s ease-in-out;transform:scale(1)}.lamp-button-root:before{content:"";opacity:.7;filter:blur(18px);pointer-events:none;z-index:0;background:radial-gradient(circle,#ff880073,#0000 65%);border-radius:999px;position:absolute;inset:-12px}@media (max-width:768px){.lamp-button-root{transform:scale(.8)}.area{--h:60px}.wrapper .button .part-2{width:160px}.lamp-button-root .noise{width:240px;height:180px}}@media (max-width:480px){.lamp-button-root{transform:scale(.65)}.wrapper .button .part-2{width:160px}.lamp-button-root .noise{width:200px;height:150px}}@media (hover:hover) and (pointer:fine){.lamp-button-root:hover{filter:drop-shadow(0 0 14px #ff880038);transform:scale(1.04)}.lamp-button-root:hover:before{opacity:.7;filter:blur(16px)}}