.demo-module__demo--Y1u0H{--demo-height:300px;--touch-full-anim-duration:3000ms;--hand-width:60px;--hand-height:95px;--hand-top-postion:-20px;--scroll-full-anim-duration:4500ms;--key-width:60px;--key-height:60px;--key-anim-duration:250ms;--profile-full-anim-duration:3000ms;--max-width:600px;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:501}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__touchedDemoWrapper--lU0v8.demo-module__verticalWrapper--MfKNQ{animation:var(--touch-full-anim-duration) ease-in-out forwards demo-module__swipeUp--Eppw5}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__hand--am505{animation:calc(var(--touch-full-anim-duration)/5) ease-in-out 0s forwards demo-module__handUp--vISFP,calc(var(--touch-full-anim-duration)/6) ease-out calc(var(--touch-full-anim-duration)/4) forwards demo-module__handVanish--zHQM1;transform:translate(-50%)}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__verticalMsg--CTvpU{animation:var(--touch-full-anim-duration) ease-in-out forwards demo-module__msgVerticalAnim--HHmyj}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__keyDemoWrapper--jUpTh{animation:var(--scroll-full-anim-duration) ease-in-out forwards demo-module__swipeUpKey--MZE15;transform:translate(-50%)}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__horizontalMsg--gbTGH{animation:var(--profile-full-anim-duration) ease-in-out forwards demo-module__msgHorizontalAnim--UsrDY;transform:translateY(-20%)}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__profileDemo--GKWmn{animation:var(--profile-full-anim-duration) ease-in-out forwards demo-module__swipeLeft--Sp5af}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__rightHand--AraT0{animation:calc(var(--profile-full-anim-duration)/5) ease-in-out 0s forwards demo-module__handRight--J5oQg,calc(var(--profile-full-anim-duration)/6) ease-out calc(var(--profile-full-anim-duration)/4) forwards demo-module__handVanish--zHQM1;transform:translate(-50%)}.demo-module__demo--Y1u0H.demo-module__runAnimate--jZJCn .demo-module__rightHand--AraT0 svg{fill:var(--x-color-demo-icon,#fff);transform:rotate(270deg)}.demo-module__demo--Y1u0H .demo-module__hand--am505{position:absolute}.demo-module__demo--Y1u0H .demo-module__hand--am505 svg{fill:var(--x-color-demo-icon,#fff);display:block;height:var(--hand-height);width:var(--hand-width)}.demo-module__demo--Y1u0H .demo-module__hand--am505.demo-module__rightHand--AraT0{right:calc(var(--hand-height)*-1);top:50%;z-index:502}.demo-module__demo--Y1u0H .demo-module__hand--am505.demo-module__rightHand--AraT0 svg{transform:rotate(270deg)}.demo-module__demo--Y1u0H .demo-module__touchedDemoWrapper--lU0v8{border-radius:.75rem;box-shadow:0 0 30px rgba(0,0,0,.8);height:100vh;margin:0 auto;max-width:var(--max-width)}.demo-module__demo--Y1u0H .demo-module__touchedDemoWrapper--lU0v8.demo-module__verticalWrapper--MfKNQ{align-items:flex-end;border-radius:.75rem .75rem 0 0;bottom:0;display:flex;flex-direction:column;height:var(--demo-height);justify-content:center;left:0;max-width:var(--max-width);position:absolute;right:0;z-index:9}.demo-module__demo--Y1u0H .demo-module__touchedDemoWrapper--lU0v8.demo-module__verticalWrapper--MfKNQ .demo-module__nextEl--SyMlX{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;border-radius:.75rem .75rem 0 0;height:100%;position:relative;width:100%}.demo-module__demo--Y1u0H .demo-module__touchedDemoWrapper--lU0v8 .demo-module__hand--am505{left:50%;position:absolute;z-index:1}.demo-module__demo--Y1u0H .demo-module__verticalMsg--CTvpU{align-items:flex-end;bottom:0;color:var(--x-color-text-demo);display:flex;font-size:2.5rem;font-weight:900;height:100%;justify-content:center;left:0;margin:0 auto;max-width:var(--max-width);position:absolute;right:0;text-align:center;text-shadow:0 0 .5rem rgba(0,0,0,.8);width:100vw;z-index:999}.demo-module__demo--Y1u0H .demo-module__keyDemoWrapper--jUpTh{align-items:center;background-color:var(--x-color-overlay-full-bg);border-radius:.75rem;bottom:0;color:var(--x-color-text-demo);display:flex;flex-flow:column;height:calc(var(--key-height)*2);justify-content:center;left:50%;padding:1rem;position:absolute;transform:translate(-50%);width:var(--demo-height);z-index:9}.demo-module__demo--Y1u0H .demo-module__keyDemoWrapper--jUpTh svg{fill:var(--x-color-demo-icon,#fff);height:var(--key-height);margin-bottom:.5rem;width:var(--key-width)}.demo-module__demo--Y1u0H .demo-module__horizontalMsg--gbTGH{align-items:center;bottom:0;color:var(--x-color-text-demo);display:flex;font-size:2.5rem;font-weight:900;height:100%;justify-content:center;padding-right:1rem;position:absolute;right:160px;text-align:right;text-shadow:0 0 .5rem rgba(0,0,0,.8);top:0;transform:translateY(-20%);width:20rem;z-index:999}.demo-module__demo--Y1u0H .demo-module__profileDemo--GKWmn{bottom:0;height:100%;position:absolute;right:-100vw;top:0;width:100%;z-index:2}@keyframes demo-module__handRight--J5oQg{0%{transform:translate(0)}to{transform:translate(calc(-160px - var(--hand-height) - 3rem))}}@keyframes demo-module__handUp--vISFP{0%{transform:translateY(calc(var(--demo-height)*-1 + var(--hand-top-postion) + 13rem))}to{transform:translateY(calc(var(--demo-height)*-1 + var(--hand-top-postion) - 2rem))}}@keyframes demo-module__handVanish--zHQM1{0%{opacity:1}to{opacity:0}}@keyframes demo-module__msgHorizontalAnim--UsrDY{0%{transform:translate(160px,-20%)}15%{transform:translateY(-20%)}94%{opacity:1}to{opacity:0}}@keyframes demo-module__msgVerticalAnim--HHmyj{0%{transform:translate(0)}10%{transform:translateY(calc(var(--demo-height)/3*-1))}94%{opacity:1}to{opacity:0;transform:translateY(calc(var(--demo-height)/3*-1))}}@keyframes demo-module__swipeUp--Eppw5{0%,to{transform:translateY(calc(var(--demo-height) - var(--hand-top-postion)))}10%,85%{transform:translate(0)}}@keyframes demo-module__swipeLeft--Sp5af{0%,to{transform:translate(0)}10%,85%{transform:translate(calc(min(100vw, 160px)*-1))}}@keyframes demo-module__swipeUpKey--MZE15{0%,to{transform:translate(-50%,var(--demo-height))}4%,96%{transform:translate(-50%,calc(var(--demo-height)*-1 - 2rem))}}