.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}.liquid-button{display:none}.button-li{background-color:#e8e8e8;border-radius:60px;padding:40px}.water-drop{cursor:pointer;background:0 0;border:none;border-radius:58% 58% 28%;justify-content:center;align-items:center;width:150px;height:150px;transition:all .5s ease-in-out;display:flex;position:relative;overflow:hidden;transform:rotate(-137deg);box-shadow:inset -6px -33px 30px #5497c6,inset -20px -80px 15px #dbf6ff96,inset -30px -100px 15px #c8ebf7b0,inset 0 -120px 15px #b0eafd9c,-10px -20px 20px #b7b7b7}.water-drop:before{content:"";background:#fff;border-radius:38% 55% 46% 48%;width:45px;height:14px;transition:all .5s ease-in-out;position:absolute;bottom:10px;right:60px;transform:rotate(12deg);box-shadow:-6px -4px 20px #cae5ee,inset 2px 2px 10px #e2f5fa93}.water-drop:after{content:"";background:#fff;border-radius:50%;width:10px;height:8px;transition:all .5s ease-in-out;position:absolute;bottom:25px;left:30px;transform:rotate(40deg)}.bubble{background:0 0;border-radius:50%;transition:all .5s ease-in-out;position:absolute}.bubble1{width:10px;height:10px;top:50px;right:35px;box-shadow:inset 2px 6px 6px -4px #7ca4b2}.liquid-button:checked+.button-li .donut-transform .bubble1{top:20px;right:35px}.bubble2{width:14px;height:14px;top:30px;right:30px;box-shadow:inset 2px 6px 6px -2px #84adc8}.liquid-button:checked+.button-li .donut-transform .bubble2{right:20px}.bubble3{width:5px;height:5px;top:45px;right:22px;box-shadow:inset 0 0 4px -1px #618fa8}.liquid-button:checked+.button-li .donut-transform .bubble3{top:58px;left:12px}.bubble4{width:20px;height:20px;top:70px;left:30px;box-shadow:inset 2px 4px 6px -1px #97c3da}.liquid-button:checked+.button-li .donut-transform .bubble4{top:78px;left:8px}.bubble5{width:12px;height:12px;top:90px;left:25px;box-shadow:inset 2px 4px 6px -1px #8cb6cb}.liquid-button:checked+.button-li .donut-transform .bubble5{top:65px;left:10px}.ripple{width:100px;height:100px;transition:all .5s ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.wave{opacity:0;filter:blur(2px);background-color:#0000;border:2px solid #dae9f3;border-radius:100%;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:6px 6px 18px #3754aa33,inset 6px 6px 18px #3754aa33,-6px -6px 18px #fff,inset -6px -6px 18px #fff}.wave2{width:125%;height:125%}.wave3{width:150%;height:150%}.circle{opacity:0;z-index:10;background-color:#fff;border-radius:50%;width:75px;height:75px;transition:opacity .5s ease-in-out;box-shadow:6px 33px 30px -10px #5497c6,15px -10px 15px #89c1e9a8,30px -10px 15px #c4eefc,-5px -10px 15px #9bccef,inset -10px -15px 20px #b7b7b7}@keyframes size{0%{border-radius:50%}25%{border-radius:30%}50%{border-radius:30%}75%{border-radius:40%}to{border-radius:50%}}@keyframes wave{0%{transform:translate(-50%,-50%)scale(0)}50%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.liquid-button:checked+.button-li .donut-transform{border-radius:50%;width:150px;height:150px;animation:1s ease-in-out 2 size;transform:rotate(-137deg);box-shadow:inset -4.5px -24.75px 22.5px -7.5px #5497c6,inset -15px -60px 11.25px #96dbf396,inset -7.5px 15px 11.25px #96dbf396,inset -7.5px 15px 22.5px -7.5px #84bfea,-7.5px -15px 15px #b7b7b7}.liquid-button:checked+.button-li .donut-transform:before{z-index:11;background-color:#fff;border-radius:38% 50% 50% 38%;width:15px;height:7.5px;bottom:30px;left:22.5px;transform:rotate(45deg)}.liquid-button:checked+.button-li .donut-transform:after{background:#fff;border-radius:50%;width:6px;height:5.25px;bottom:43.5px;left:16.5px;transform:rotate(40deg)}.liquid-button:checked+.button-li .donut-transform .bubble{animation:3s linear wave}.liquid-button:checked+.button-li .donut-transform .ripple .wave{animation:2s ease-in-out -1s wave,2s linear .5s wave}.liquid-button:checked+.button-li .donut-transform .circle{opacity:1;animation:1s ease-in-out 2 size}
:root{--circle-center-center-out:circle(0% at center);--circle-center-center-in:circle(125% at center);--circle-hesitate:circle(40% at center);--circle-top-left-out:circle(0% at top left);--circle-top-right-out:circle(0% at top right);--circle-bottom-right-out:circle(0% at bottom right);--circle-bottom-left-out:circle(0% at bottom left);--circle-top-left-in:circle(150% at top left);--circle-top-right-in:circle(150% at top right);--circle-bottom-right-in:circle(150% at bottom right);--circle-bottom-left-in:circle(150% at bottom left);--wipe-in:inset(0 0 0 0);--wipe-bottom:inset(100% 0 0 0);--wipe-left:inset(0 100% 0 0);--wipe-top:inset(0 0 100% 0);--wipe-right:inset(0 0 0 100%);--wipe-top-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-top-right-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-left-in:polygon(50% -50%,150% 50%,50% 150%,-50% 50%);--wipe-bottom-right-in:polygon(-50% 0%,200% 0,0 200%,0 -50%);--wipe-top-left-out:polygon(0 0,0 0,0 0,0 50%);--wipe-top-right-out:polygon(50% -50%,150% 50%,150% 50%,50% -50%);--wipe-bottom-left-out:polygon(-50% 50%,50% 150%,50% 150%,-50% 50%);--wipe-bottom-right-out:polygon(150% 50%,150% 50%,50% 150%,50% 150%);--wipe-cinematic-out:inset(100% 0 100% 0);--wipe-cinematic-mid:inset(10% 0 10% 0);--square-hesitate:inset(33% 33% 33% 33%);--square-out:inset(100% 100% 100% 100%);--square-in:var(--wipe-in);--square-top-left-out:inset(0 100% 100% 0);--square-top-right-out:inset(0 0 100% 100%);--square-bottom-left-out:inset(100% 100% 0 0);--square-bottom-right-out:inset(100% 0 0 100%);--diamond-center-in:polygon(-50% 50%,50% -50%,150% 50%,50% 150%);--diamond-center-out:polygon(50% 50%,50% 50%,50% 50%,50% 50%);--diamond-hesitate:polygon(45% 50%,50% 25%,55% 50%,50% 75%);--opposing-corners-in:polygon(0 0,0 100%,100% 100%,100% 0);--opposing-corners-out:polygon(0 0,50% 50%,100% 100%,50% 50%);--surface:#0d1a26;--surfaceHSL:0 0% 6%;--text:#abc9e3;--white:#e0f2ff;--brand:#4c88bd;--brandHSL:208 46% 52%;--brand-alt:#003c66;--pink:#d45498;--high-contrast:#ebf7ff;--layer-surface:1;--layer-tooltip:2;--layer-sticky:3}
::view-transition-new(root){animation:1.5s cubic-bezier(.25,1,.3,1) both diamond-in-center}.dark::view-transition-new(root){animation:1.5s cubic-bezier(.25,1,.3,1) both diamond-in-center}::view-transition-old(root){animation:none}.dark::view-transition-old(root){animation:none}@keyframes diamond-in-center{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(-50% 50%,50% -50%,150% 50%,50% 150%)}}@keyframes diamond-out-center{0%{clip-path:polygon(-50% 50%,50% -50%,150% 50%,50% 150%)}to{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}:root{background:linear-gradient(90deg,#0f0,#0ff)}.dark{background:linear-gradient(90deg,orange,#ac4eea)}