.water-wine-area{--radius:18px;--color-1:#42d5c6;--color-2:#10a7c1;--color-3:#2b67de;--color-4:#2b4883;--color-5:#a2267b;--color-6:#d35b7d;--color-7:#97175b;--color-8:#631e67;cursor:pointer;user-select:none;perspective:40px;transform:translateY(-30px);position:relative;display:inline-block}.water-wine-area>svg{position:absolute;pointer-events:none;transform:translateX(-50%);left:50%;opacity:0}.water-wine-area-button{transform-style:preserve-3d;animation:floating 2.5s ease-in-out infinite}.water-wine-area-button>svg{position:absolute;transform:translateX(-50%);margin:auto;inset:0;left:50%;top:-8px;z-index:9;animation:splashFeedback2 .7s cubic-bezier(.18,.94,1,1) forwards;color:#ffc1d9;pointer-events:none;stroke-width:3px;stroke-dasharray:0 173;stroke-dashoffset:174}.water-wine-area:before{inset:0;height:20%;transform:translateY(214px);background:black;border-radius:var(--radius);filter:blur(40px)}.water-wine-area:after,.water-wine-area:before{content:"";position:absolute;pointer-events:none}.water-wine-area:after{box-shadow:0 -60px 50px rgba(84,1,110,.9);background:rgba(27,49,102,.5);top:-50px;left:-80px;right:-80px;bottom:-100px;filter:blur(110px);z-index:-1}.water-wine-button{outline:none;cursor:pointer;font-size:30px;border:0;color:rgba(0,0,0,.5);border-radius:var(--radius);position:relative;width:230px;height:80px;pointer-events:none;transform-style:preserve-3d;transition:background-color .5s linear,box-shadow .5s ease,transform .5s ease;box-shadow:0 0 30px rgba(7,15,61,.5);background:linear-gradient(180deg,#00e1ff 80%,#0f2547);transform:rotateX(4deg)}.water-wine-wrap{border-radius:calc(var(--radius) * .85);height:100%;transform:translateY(-4px);padding:2px;background:linear-gradient(180deg,#6988a4 0,#00ffac 50%,#1a3147);position:relative;transition:all .5s ease}.water-wine-reflex{position:absolute;z-index:9;inset:0;overflow:hidden;border-radius:inherit}.water-wine-reflex:before{content:"";position:absolute;width:300px;background-color:rgba(255,255,255,.2);background:linear-gradient(90deg,rgba(244,221,255,.1) 10%,rgba(244,221,255,.5) 60%,rgba(244,221,255,.3) 0,rgba(244,221,255,.1) 90%);top:-40%;bottom:-40%;left:-140%;opacity:.5;transform:translateX(0) skew(-30deg);transition:all .7s cubic-bezier(.5,0,.3,1)}.water-wine-area:hover .water-wine-reflex:before{transform:translate(190%) skew(30deg)}.water-wine-outline{position:absolute;overflow:hidden;inset:0;opacity:0;outline:none;border-radius:inherit;transition:all .4s ease}.water-wine-outline:before{content:"";position:absolute;inset:2px;width:120px;height:300px;margin:auto;background:linear-gradient(90deg,transparent 0,white 50%,transparent);animation:spin 3s linear infinite}.water-wine-text{pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;height:100%;gap:14px;font-weight:600;transition:all .3s ease;overflow:hidden;border-radius:calc(var(--radius) * .85)}.water-wine-text:after,.water-wine-text:before{content:"";inset:0;position:absolute;transition:all 1s ease;z-index:-1;filter:blur(5px)}.water-wine-text:before{background:linear-gradient(180deg,#2b4883 0,#42d5c6 70%,#2b67de)}.water-wine-text:after{background:linear-gradient(to bottom,var(--color-8) 0,var(--color-5) 70%,var(--color-7) 100%);transform:translateY(100%);opacity:0}.water-wine-text p{position:absolute}.water-wine-text span{display:inline-block}.water-wine-text span>span{animation:waveText 1.5s ease-in-out calc(var(--i) * .17s) infinite}.water-wine-text p.water-wine-state-1,.water-wine-text p.water-wine-state-2{letter-spacing:4px}.water-wine-text p.water-wine-state-1>span{opacity:0;animation:appear 1.5s ease forwards calc(var(--i) * .1s);text-shadow:0 0 7px rgba(255,255,255,.5)}.water-wine-text p.water-wine-state-2>span{opacity:1;animation:disappear .6s ease forwards calc(var(--i) * .05s);color:rgba(255,255,255,.7);text-shadow:0 0 10px rgba(200,200,200,.4)}.water-wine-liquid{position:absolute;box-shadow:inset 0 0 50px rgb(14 23 67),inset 0 -15px 20px -20px black;transition:.5s;z-index:2;inset:2px;overflow:hidden;border-radius:inherit}.water-wine-liquid:before{content:"";position:absolute;left:-40%;right:-40%;opacity:0;top:-110px;bottom:35px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.1));transition:all .4s linear}.water-wine-waves{position:absolute;inset:0;margin:auto;transition:transform .8s cubic-bezier(.5,-.5,.5,1.5);transform:translateY(-220px)}.water-wine-waves>div{content:"";width:1000px;height:1000px;position:absolute;left:50%}.water-wine-wave-1{border-radius:48%;background:radial-gradient(rgba(255,255,255,1) 67%,rgba(255,255,255,1) 73%);animation:wave 5s linear infinite;filter:blur(2px);top:-8px}.water-wine-wave-2{border-radius:46%;background:radial-gradient(rgba(255,255,255,.5) 67%,rgba(255,255,255,.01) 73%);animation:wave 7s linear infinite;filter:blur(2px)}.water-wine-wave-3{border-radius:44%;background:radial-gradient(rgba(0,0,0,.5) 67%,rgba(0,0,0,.01) 73%);animation:wave 8s linear infinite;filter:blur(1px);top:8px}.water-wine-drops{filter:url(#liquid);position:absolute;left:0;right:0;top:0;bottom:-7px;z-index:9;pointer-events:none;transition:all .5s ease}.water-wine-drops:after,.water-wine-drops:before{content:"";width:20px;height:23px;border-radius:50%;position:absolute;left:0;right:0;bottom:0;margin:auto}.water-wine-drops:before{width:120px;height:20px;bottom:0;filter:blur(9px);border-radius:30%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,var(--color-4) 50%);animation:drop1 2.5s ease infinite}.water-wine-drops:after{top:100%;background-color:var(--color-2);animation:drop2 2.5s ease infinite}.water-wine-splash{transform-style:preserve-3d;transform:rotateX(3deg);position:absolute;left:0;right:0;top:220px;display:flex;align-items:center;justify-content:center;transition:opacity .4s linear;pointer-events:none;color:rgba(255,255,255,.5)}.water-wine-splash:after,.water-wine-splash:before{content:"";display:block;position:absolute;border-radius:50%;height:100px;width:300px;border:2px solid;animation:splash 2.5s ease infinite backwards}.water-wine-splash:after{animation-delay:.2s}.water-wine-particles{--duration:2.5s;--delay:1.45s}.water-wine-particles,.water-wine-particles>div{position:absolute;inset:0}.water-wine-left{transform:scaleX(-1)}.water-wine-particle{--distance:70px;--delay:0s;width:var(--distance);height:var(--distance);position:absolute;margin-left:50%;animation:rotateParticle 2.5s cubic-bezier(.18,.94,1,1) infinite forwards;animation-delay:calc(var(--delay) + 1.6s)}.water-wine-particle:before{content:"";inset:0;border-radius:100%;position:absolute;background-color:currentColor;width:3px;height:3px;opacity:0;animation:particle 2.5s cubic-bezier(.18,.94,1,1) infinite forwards;animation-delay:calc(var(--delay) + 1.6s)}.water-wine-right .water-wine-particle-2{--distance:140px;--delay:0.2s}.water-wine-left .water-wine-particle-2{--distance:160px;--delay:0.1s}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes wave{0%{transform:translate(-50%,-75%) rotate(0deg)}to{transform:translate(-50%,-75%) rotate(1turn)}}@keyframes particle{0%{opacity:1;transform:translate(0)}40%,to{transform:translateY(-100px);opacity:0}}@keyframes rotateParticle{0%{transform:rotate(0deg)}40%,to{transform:rotate(85deg)}}@keyframes drop1{0%{transform:scale(.5)}30%,60%{transform:scale(1)}to{transform:scale(.5)}}@keyframes drop2{0%,20%{top:100%;opacity:0;transform:scale(0) translateY(0)}50%{transform:scale(1) translateY(16px);opacity:1}60%{opacity:1}to{transform:scale(1) translateY(140px);opacity:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes splash{0%,62%{opacity:.5;transform:scale(0)}to{opacity:0;transform:scale(1)}}@keyframes floating{0%{transform:translate(0)}50%{transform:translateY(10px)}to{transform:translate(0)}}@keyframes waveText{0%{transform:translateY(-2px) rotate(0)}50%{transform:translateY(2px) rotate(0)}to{transform:translateY(-2px) rotate(0)}}@keyframes appear{0%{transform:translateY(-40px) rotate(-90deg);filter:blur(10px)}30%{transform:translateY(7px) rotate(0)}60%{filter:blur(0);transform:translateY(-5px) rotate(0);opacity:1}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes disappear{0%{opacity:1}to{transform:translateY(40px);filter:blur(6px);opacity:0;color:black}}@keyframes splashFeedback{to{stroke-dasharray:0 241;stroke-dashoffset:174;opacity:0}}@keyframes splashFeedback2{to{stroke-dasharray:0 241;stroke-dashoffset:174;opacity:0}}.water-wine-area input:checked+.water-wine-area-button>svg{animation:splashFeedback .7s cubic-bezier(.18,.94,1,1) forwards;color:#9ad1ff}.water-wine-area:hover .water-wine-area-button,.water-wine-area:hover .water-wine-drops:after,.water-wine-area:hover .water-wine-drops:before,.water-wine-area:hover .water-wine-particle,.water-wine-area:hover .water-wine-particle:before,.water-wine-area:hover .water-wine-splash:after,.water-wine-area:hover .water-wine-splash:before{animation-play-state:paused}.water-wine-area:hover .water-wine-button{transform:rotateX(0deg)}.water-wine-area:hover .water-wine-wrap{transform:translate(0)}.water-wine-area:hover .water-wine-outline{opacity:1}.water-wine-area:hover .water-wine-waves{transform:translateY(-245px)}.water-wine-area:hover .water-wine-liquid:before{opacity:1}.water-wine-area:hover .water-wine-splash{opacity:0}.water-wine-area:active .water-wine-wrap{transform:scale(.98,.94)}.water-wine-area input:checked+.water-wine-area-button p.water-wine-state-1>span{opacity:1;animation:disappear .6s ease forwards calc(var(--i) * .05s)}.water-wine-area input:checked+.water-wine-area-button p.water-wine-state-2>span{opacity:0;animation:appear 1.5s ease forwards calc(var(--i) * .1s)}.water-wine-area input:checked+.water-wine-area-button{--color-1:var(--color-5);--color-2:var(--color-6);--color-3:var(--color-7);--color-4:var(--color-8)}.water-wine-area input:checked+.water-wine-area-button .water-wine-button{box-shadow:0 0 30px rgba(21,0,47,.5);background:linear-gradient(180deg,#d064ff 80%,#301132)}.water-wine-area input:checked+.water-wine-area-button .water-wine-drops:after{background-color:var(--color-1)}.water-wine-area input:checked+.water-wine-area-button .water-wine-wrap{background:linear-gradient(180deg,#6988a4 0,#bb88db 50%,#472b59)}.water-wine-area input:checked+.water-wine-area-button .water-wine-text:before{transform:translateY(-100%);opacity:0}.water-wine-area input:checked+.water-wine-area-button .water-wine-text:after{transform:translateY(0);opacity:1}@media (pointer:coarse),(pointer:none){.water-wine-drops{display:none}}.split-flap-container{justify-content:center;padding:2rem 0}.board,.split-flap-container{display:flex;align-items:center}.board{gap:.5ch;position:relative;flex-direction:row;font-family:Roboto Mono,Courier New,monospace;padding:1rem;background:hsl(0 0% 10%);border-radius:.5rem;box-shadow:0 10px 30px -5px rgba(0,0,0,.3)}.board>span[data-key]{display:inline-block;width:0;opacity:.5;height:100%;position:relative}.board>span[data-key]:after,.board>span[data-key]:before{content:"";position:absolute;width:.5ch;top:50%;left:50%;translate:-50% -150%;aspect-ratio:1;background:currentColor;border-radius:50%}.board>span[data-key]:after{translate:-50% 75%}.flip{font-size:3rem;color:#fff;width:1.5ch;line-height:1.2;display:inline-block;height:1lh;text-align:center;position:relative;transform-style:preserve-3d;perspective:300px}.flip:after,.flip:before{content:"";position:absolute;width:calc(10% - .05em);height:calc(20% - .05em);background:rgba(255,255,255,.1);top:50%;translate:0 -50%;border-radius:2px;z-index:10}.flip:before{left:0}.flip:after{right:0}.flip div{position:absolute;transform-style:preserve-3d;overflow:hidden;inset:0;background:radial-gradient(100% 100% at 50% 100%,rgba(136,136,136,.2),transparent),hsl(0 0% 20%);border:1px solid rgba(255,255,255,.1);font-weight:700}.flip div:nth-of-type(odd){clip-path:polygon(0 0,100% 0,100% 40%,calc(90% + .025em) 40%,calc(90% + .025em) 48%,calc(10% - .025em) 48%,calc(10% - .025em) 40%,0 40%)}.flip div:nth-of-type(2n){clip-path:polygon(0 60%,calc(10% - .025em) 60%,calc(10% - .025em) 52%,calc(90% + .025em) 52%,calc(90% + .025em) 60%,100% 60%,100% 100%,0 100%)}.flip>div:nth-of-type(2){z-index:2;transform:rotateX(-180deg);backface-visibility:hidden}.flip div:nth-of-type(3){z-index:3;backface-visibility:hidden}@media (max-width:640px){.flip{font-size:2rem}.board{padding:.75rem}}