@font-face{font-family:'ballsFont';src:url(../fonts/TronicaMono-Regular.woff) format('woff2'),url(../fonts/TronicaMono-Regular.woff2) format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'FuturaXBold';src:url(../fonts/FuturaNowHeadline-XBold.woff) format('woff2'),url(../fonts/FuturaNowHeadline-XBold.woff2) format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{.intro .logo .logoanime font-family:'FuturaThin';src:url(../fonts/Futura-Thin.woff) format('woff2'),url(../fonts/Futura-Thin.woff2) format('woff');font-weight:400;font-style:normal;font-display:swap}html,body{background-color:#000;color:#fff;font-family:'ballsFont',sans-serif;display:flex;justify-content:center;align-items:center;height:100%;margin:0;background-color:#000;overflow:hidden}h2{font-size:1.4em}body{overflow:hidden}body video{transition:filter 250ms linear}body.loading video{filter:grayscale(1) brightness(.25)}body.loading:before{content:"Loading Model";color:#fff;text-align:center;width:100%;position:absolute;top:20px;font-size:atan2();em;font-weight:700;z-index:100}html,body,video{width:100%;height:100%;margin:0;padding:0}video{position:fixed;top:0;left:0}#fps{position:fixed;bottom:10px;left:10px}#fps:empty{display:none}#fps:after{content:" fps"}.intro{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background:url(../images/bg.jpg?v=2.0);background-color:#000;background-size:100% 100%}.intro .logo{position:absolute;width:80%;left:50%;top:50%;transform:translate3d(-50%,-50%,0);text-align:center;height:100vh}.intro .logo .logoanime{position:absolute;left:50%;top:50%;transform:translate3D(-50%,-50%,0) scale(.8);width:480px;height:400px;overflow:hidden;background:url(../images/logoanime.png);margin:0 auto;-webkit-animation:playh 1.5s steps(23) forwards}.intro .logo h2{position:absolute;top:50%;left:50%;transform:translate3d(-50%,calc(-50% + 200px),0);animation:glow 1.5s ease-in-out infinite}@keyframes glow{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}@-webkit-keyframes playh{0%{background-position-x:0}100%{background-position-x:-11040px}}.step-1,.step-2,.step-3,.step-4{position:fixed;width:100%;height:100%;top:0;left:0;z-index:99;display:none}.step-1 .silhouete,.step-2 .silhouete,.step-3 .silhouete{position:absolute;left:50%;top:50%;width:70vw;transform:translate3d(-50%,-60%,0)}.step-1:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;opacity:1;background:url(../images/bg.jpg?v=2)}.step-1.initFade:before{animation-name:bgFade;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-delay:2s}@keyframes bgFade{from{opacity:1}to{opacity:0}}.step-1 .footer{position:absolute;bottom:0;width:100vw;height:280px;text-align:center;background:rgb(0 0 0 / .3)}.step-1 .footer .instruction h2{font-size:1.4em}.step-1 .footer .instruction h2 i{font-size:1.8em}.step-1 .footer .takepic .camera-svg{height:100px}@keyframes changedash{from{stroke-dashoffset:12.18px;stroke-dasharray:12.18 24.37}to{stroke-dashoffset:0;stroke-dasharray:12.18 24.37}}path{animation-duration:.5s;animation-name:changedash;animation-iteration-count:infinite;animation-direction:alternate}.step-2 .footer,.step-3 .footer{position:absolute;bottom:0;width:100vw;height:320px;text-align:center;background:rgb(0 0 0 / .3)}.step-2 .footer .instruction,.step-3 .footer .instruction{width:90vw;margin:0 auto;margin-bottom:10px;height:80px}.step-2 .footer .instruction h2 .step-3 .footer .instruction h2{font-size:1.4em}.step-2 .silhouete svg{position:absolute;top:50%;transform:translateY(-60%)}.step-2 .silhouete #scanning{position:absolute;top:50%;left:50%;transform:translate3D(-50%,-60%,0)}scanning .step-2 .footer .loading{position:absolute;left:50%;transform:translateX(-50%);height:130px;width:130px;border-radius:100px}.step-2 .footer .loading #loadingC{position:absolute;height:130px;width:130px;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.step-2 .footer .loading .pct{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-40%,0)}.step-2 .footer .loading .pct h3{font-family:'FuturaXBold',sans-serif;font-weight:200;font-size:1.6em;padding:0;margin:0}.step-3 .footer .steps{position:absolute;left:50%;transform:translateX(-50%);height:130px;width:130px;background:#752280;border-radius:100px}.step-3 .footer .steps .step{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.step-3 .footer .steps:after{content:'';position:absolute;top:-7px;left:-7px;border:2px solid #fff;width:140px;height:140px;border-radius:100%}.step-3 .footer .steps .step p{font-family:'FuturaXBold',sans-serif;padding:0;margin:0}.step-3 .footer .steps .step h3{font-family:'FuturaXBold',sans-serif;font-weight:200;font-size:4em;padding:0;margin:0}.step-3 .silhouete #capture{width:100vw;height:100vh;min-width:100vw;top:50%;transform:translateY(-35%)}.step-3 .silhouete .anime{position:absolute;width:100vw;height:100vh;min-width:100vw;top:50%;transform:translateY(-50%)}.step-3 .silhouete .anime .anime-step{position:absolute;width:480px;height:640px;top:50%;min-width:100%;transform:translateY(-40%);display:none}.step-3 .silhouete .anime .anime-step img{min-width:100vw}.step-3 .silhouete .anime .anime-step.anime-2 #animeHands{position:absolute;width:480px;height:640px;top:50%;min-width:100%;transform:translateY(-40%)}.step-4 .console{position:absolute;left:50%;top:20%;width:80vw;transform:translate3d(-50%,-50%,0);text-align:center}.step-4 .hitarea{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:-1}.step-4 .console .head{font-size:1.4em}.step-4 .console .head ul{padding:0;margin:0}.step-4 .console .head ul li{display:inline-block;list-style:none}.step-4 .console .head ul li img{width:50px;height:auto}.step-4 .console .head h2{position:relative;display:inline-block;font-size:.8em;margin:0;line-height:1.6em;margin-bottom:10px}.step-4 .console .head h2:after,.step-4 .console .head h2:before{content:'';position:absolute;width:80px;. height:25px;background:url(../images/line.svg);background-size:100% auto;background-repeat:no-repeat;background-position:center center}.step-4 .console .head h2:after{transform:translateX(10px)}.step-4 .console .head h2:before{transform:translateX(-90px)}.step-4 .console .footer{font-size:1.4em;color:#fff}.step-4 .console .footer p{font-family:'FuturaThin',sans-serif;margin:.2em;font-size:.8em}.step-4 .console .footer p:nth-child(3){font-family:'FuturaXBold',sans-serif}.step-4 .console .footer a{color:#fff;text-decoration:none}.step-4 .console .footer .logo-client{width:30vw;height:auto;margin-top:50px;margin-bottom:50px}.step-1{display:block}