.power-button-container{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:10;width:100%}.wrap{--radius: 30px;--bg: #101215;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;pointer-events:none;transform:scale(.65)}.wrap:before{content:"";position:absolute;width:150vw;height:300px;border-radius:50px;background-color:#ffffff05;filter:blur(60px)}.wrap:after{content:"";position:absolute;width:200vw;height:150px;border-radius:50%;background-color:#000000f2;filter:blur(40px);z-index:-1}.wrap input{position:absolute;opacity:0;width:100%;height:100%;top:0;right:0;bottom:0;left:0;z-index:999;cursor:pointer;pointer-events:all;-webkit-user-select:none;user-select:none}.button{position:relative;overflow:hidden;width:154px;height:150px;background-color:var(--bg);z-index:2;border:transparent;border-radius:var(--radius);box-shadow:inset 0 1px 1px #ffffff26,inset 0 -6px 1px -4px #0084ff80,inset 0 -15px 6px -8px #003cff80;transition:all .3s ease}.button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--radius) * .8);border-top:50px solid #232528;border-left:40px solid #181a1c;border-right:40px solid #181a1c;border-bottom:50px solid #0a0b0c;filter:blur(6px);transition:all .5s ease}.button:after{content:"";position:absolute;left:0;right:0;margin:auto;top:101%;height:50px;width:120px;border-radius:50px 50px 0 0;background:#009cff;filter:contrast(10) blur(7px);transition:all .3s ease;opacity:1}.button .corner{transition:all .4s ease;opacity:.1}.button .corner:before,.button .corner:after{content:"";position:absolute;top:0;border-top:55px solid white;border-left:15px solid transparent;border-right:15px solid transparent;filter:blur(6px)}.button .corner:before{left:8px;transform:rotate(-40deg)}.button .corner:after{right:8px;transform:rotate(40deg)}.wrap input:hover+.button .corner{opacity:.15}.button .inner{z-index:9;position:absolute;display:flex;align-items:center;justify-content:center;top:22px;right:20px;bottom:22px;left:20px;border-radius:calc(var(--radius) * .85);background:linear-gradient(180deg,#161719 5%,#232528);transition:all .3s ease;box-shadow:inset 0 -5px 15px -1px #0009,inset 0 -4px 3px -3px #000,inset 0 -10px 20px -8px #ffffff26,inset 0 1px 0 1px #ffffff1a}.button .inner svg{display:block;overflow:visible;height:100%;width:100%}.button .inner svg .symbol{fill:#1e2024}.button .inner svg .symbol-path text{stroke-dasharray:650;stroke-dashoffset:-650;stroke-width:1.5;stroke:#3c69ff;animation:symbolPath 2s ease-in-out}.button .inner svg .symbol-path-glow text{stroke-dasharray:650;stroke-dashoffset:-650;stroke-width:8;stroke:#0231ce;filter:blur(10px);animation:symbolPath 2s ease-in-out}.bg{background-color:#000;position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;border-radius:calc(var(--radius) * 1.25);box-shadow:0 30px 40px -10px #000000e6;transition:all .3s ease;overflow:hidden;z-index:1}.bg:before{content:"";position:absolute;border-radius:inherit;box-shadow:inset 0 -2px 0 -1px #78b0ff52,inset 0 0 5px 1px #000,inset 0 0 0 1px #000;top:0;right:0;bottom:0;left:0;z-index:1}.bg .shine-1,.bg .shine-2:before{content:"";position:absolute;z-index:0;transition:all .3s ease;background:#003cff;width:10px;height:10px;left:0;right:0;bottom:0;margin:auto;border-radius:50%;filter:blur(2px);transform:translateY(0) scale(0);animation:bg 2.4s linear .3s}.bg .shine-2:before{animation:bg 2.4s linear infinite}.bg .shine-2{transition:all .5s linear;opacity:0}.led{position:absolute;z-index:10;top:100%;border-radius:50%;width:6px;height:6px;margin-top:22px;transition:all .3s ease;background-color:#3aeaf3;box-shadow:0 -10px 35px 17px #003cff,inset 0 1px 2px #fff9,0 0 0 3px #0009,0 0 2px 4px #004f98cc}.noise{position:absolute;top:-20px;bottom:-20px;left:0;right:0;opacity:.08;-webkit-mask-image:linear-gradient(transparent 5%,white 30%,white 70%,transparent 95%);mask-image:linear-gradient(transparent 5%,white 30%,white 70%,transparent 95%);filter:grayscale(1)}.wrap input:active+.button .inner svg .symbol-path text,.wrap input:active+.button .inner svg .symbol-path-glow text,.wrap input:active+.button~.bg .shine-1{animation:none}.wrap input:checked+.button .inner svg .symbol-path text,.wrap input:checked+.button .inner svg .symbol-path-glow text{stroke-dashoffset:0}.wrap input:checked+.button .inner svg .symbol-path text{stroke:#0f8;animation:symbolPathDraw 1s ease-in-out forwards,pulseStroke 4s ease-in-out 1s infinite alternate}.wrap input:checked+.button .inner svg .symbol-path-glow text{stroke:#0c6;animation:symbolPathDraw 1s ease-in-out forwards,pulseStrokeGlow 4s ease-in-out 1s infinite alternate}.wrap input:checked+.button .inner svg .symbol{fill:#fff;transition:fill .5s;animation:pulseTextFill 4s ease-in-out 1s infinite alternate}.wrap input:hover+.button{transform:scale(1.02)}.wrap input:active+.button{transform:scale(.97);filter:contrast(1.07);background-color:transparent}.wrap input:active+.button:before{box-shadow:0 -10px 10px 10px #000}.wrap input:active+.button .inner{background:linear-gradient(180deg,#0a0b0d 5%,#161719);box-shadow:inset 0 -5px 15px -1px #000c,inset 0 -4px 3px -3px #000,inset 0 -10px 20px -8px #ffffff1a,inset 0 1px 0 1px #ffffff0d;transform:scale(.95)}.wrap input:checked+.button~.bg .shine-1{background-color:#ffbb00b3}.wrap input:not(:checked):hover+.button~.bg .shine-2{opacity:1}.wrap input:active+.button .corner,.wrap input:active+.button~.bg-glow,.wrap input:not(:checked):active+.button~.bg .shine-2{opacity:0}.bg-glow{transition:all .5s linear}.bg-glow:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:30px;background:linear-gradient(to bottom,#984fff,#000);filter:blur(12px);opacity:0;animation:bgGlow 3s linear backwards}@keyframes bgGlow{0%{opacity:0}40%{opacity:1}80%,to{opacity:0}}.wrap input:checked+.button~.bg-glow:before{background:linear-gradient(to bottom,#0f8,#000);opacity:1;animation:pulseBgGlow 4s ease-in-out infinite alternate}.wrap input:checked+.button~.led{animation:pulseLed 4s ease-in-out infinite alternate}.wrap input:checked+.button{animation:pulseButton 4s ease-in-out infinite alternate}.wrap input:checked+.button:after{animation:pulseButtonAfter 4s ease-in-out infinite alternate}.wrap input:checked+.button~.bg:before{animation:pulseBgBefore 4s ease-in-out infinite alternate}@keyframes bg{0%{transform:translateY(0) scale(0)}12%{transform:translateY(0) scale(25)}60%,to{transform:translateY(-280px) scale(20,18)}}@keyframes symbolPath{0%{stroke-dashoffset:-650}50%{stroke-dashoffset:0}to{stroke-dashoffset:650}}@keyframes symbolPathDraw{0%{stroke-dashoffset:-650}to{stroke-dashoffset:0}}@keyframes pulseStroke{0%{stroke:#0f8}to{stroke:#08f}}@keyframes pulseStrokeGlow{0%{stroke:#0c6}to{stroke:#06c}}@keyframes pulseTextFill{0%{fill:#e6fff2;text-shadow:0 0 10px rgba(0,255,136,.5)}to{fill:#e6f2ff;text-shadow:0 0 10px rgba(0,136,255,.5)}}@keyframes pulseLed{0%{background-color:#0f8;box-shadow:0 -10px 35px 17px #0f89,inset 0 1px 2px #fff,0 0 0 3px #0009,0 0 2px 4px #0098514d}to{background-color:#08f;box-shadow:0 -10px 35px 17px #08f9,inset 0 1px 2px #fff,0 0 0 3px #0009,0 0 2px 4px #0051984d}}@keyframes pulseBgGlow{0%{background:linear-gradient(to bottom,#0f8,#000)}to{background:linear-gradient(to bottom,#08f,#000)}}@keyframes pulseBgBefore{0%{box-shadow:inset 0 -2px 0 -1px #0f86,inset 0 0 5px 1px #000,inset 0 0 0 1px #000}to{box-shadow:inset 0 -2px 0 -1px #08f6,inset 0 0 5px 1px #000,inset 0 0 0 1px #000}}@keyframes pulseButtonAfter{0%{background:#0f8;filter:contrast(10) blur(7px)}to{background:#08f;filter:contrast(10) blur(7px)}}@keyframes pulseButton{0%{box-shadow:inset 0 1px 1px #fff6,inset 0 -6px 1px -4px #0c6,inset 0 -15px 6px -8px #00331a}to{box-shadow:inset 0 1px 1px #fff6,inset 0 -6px 1px -4px #06c,inset 0 -15px 6px -8px #001a33}}
