@charset "UTF-8";*{margin:0;padding:0}html,body{overflow:hidden}#canvas{position:fixed;top:0;left:0;z-index:0}#unsupported-page{position:fixed;min-width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:center;text-align:center;margin-bottom:40px;font-size:20px;color:#323232;font-family:Arial,Helvetica,sans-serif;z-index:1}#unsupported-browser,#unsupported-device{margin-bottom:40px}#loading-container{position:fixed;width:100vw;height:100vh;background-color:#fff;opacity:0;transition:opacity .75s ease;z-index:1}#loading-container #loading-title{position:absolute;display:flex;flex-direction:row;justify-content:center;top:30%;left:50%;transform:translate(-50%,-50%);width:30%;height:10%;font-size:3em;color:#323232;font-family:Arial,Helvetica,sans-serif}#loading-container #loading-title .loading-dot{padding-left:.15em}#loading-container #loading-title #loading-title-dot-1{opacity:0;animation:dot-fade-1 8s ease infinite}#loading-container #loading-title #loading-title-dot-2{opacity:0;animation:dot-fade-2 8s ease infinite}#loading-container #loading-title #loading-title-dot-3{opacity:0;animation:dot-fade-3 8s ease infinite}@keyframes dot-fade-1{0%{opacity:0}5%{opacity:1}25%{opacity:1}50%{opacity:1}75%{opacity:1}80%{opacity:0}to{opacity:0}}@keyframes dot-fade-2{0%{opacity:0}25%{opacity:0}30%{opacity:1}50%{opacity:1}75%{opacity:1}80%{opacity:0}to{opacity:0}}@keyframes dot-fade-3{0%{opacity:0}25%{opacity:0}50%{opacity:0}55%{opacity:1}75%{opacity:1}80%{opacity:0}to{opacity:0}}#loading-container #loading-bar{position:absolute;top:50%;left:0%;height:2px;width:0%;background-color:gray}#loading-container.show{opacity:1}#loading-container.hide{opacity:0}#guide-container{position:fixed;top:50%;left:50%;transform-origin:center center;width:750px;height:500px;background-color:#000000b3;pointer-events:none;opacity:0;transition:opacity .5s ease;z-index:2}#guide-container.show{opacity:1}#guide-container.hide{opacity:0}#key-cap-title{position:absolute;top:25%;left:30%;transform:translate(-50%,-50%);color:#fff;font-size:2.25em}#key-cap-container{position:absolute;top:60%;left:30%;transform:translate(-50%,-50%);width:15em;height:12.5em}#key-cap-container #key-cap-s-container{position:absolute;width:4em;height:4em;top:50%;left:50%;transform:translate(-50%,-50%) translate(0)}#key-cap-container #key-cap-a-container{position:absolute;width:4em;height:4em;top:50%;left:50%;transform:translate(-50%,-50%) translate(-100%)}#key-cap-container #key-cap-d-container{position:absolute;width:4em;height:4em;top:50%;left:50%;transform:translate(-50%,-50%) translate(100%)}#key-cap-container #key-cap-w-container{position:absolute;width:4em;height:4em;top:50%;left:50%;transform:translate(-50%,-50%) translateY(-100%)}#key-cap-container #key-cap-body{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;border:1px solid #fff;border-radius:.5em;color:#e9eef7;font-weight:700;z-index:10}#key-cap-container #key-cap-word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#key-cap-container #key-cap-bottom{position:absolute;left:50%;bottom:3%;transform:translate(-50%);width:75%;height:10%;border:1px solid #fff;border-top:none;border-radius:0 0 .75em .75em;z-index:9}#key-cap-container #key-cap-setnence{position:absolute;top:70%;left:50%;transform:translate(-50%,-50%) translateY(135.25%);text-align:center;width:90%;font-size:1em;color:#fff;font-family:Arial,Helvetica,sans-serif}#mouse-title{position:absolute;top:25%;right:30%;transform:translate(50%,-50%);color:#fff;font-size:2.25em}#mouse-container{position:absolute;top:65%;right:30%;transform:translate(50%,-50%);width:20em;height:17.5em}#mouse-container #mouse-body{position:absolute;top:50%;left:50%;width:50%;height:70%;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%)}#mouse-container #mouse-body #mouse-border-horizontal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:2.5px;background-color:#fff}#mouse-container #mouse-body #mouse-border-vertical{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(-50%);width:2.5px;height:50%;background-color:#fff}#mouse-container #mouse-body #mouse-left-drag-line-diagonal{position:absolute;top:25%;left:25%;transform-origin:bottom;transform:translate(-100%,-100%) rotate(-45deg);width:.75%;height:35%;border-radius:50%;background-color:#fff}#mouse-container #mouse-body #mouse-left-drag-line-horizontal{position:absolute;top:.5%;left:-6.25%;transform-origin:top;transform:rotate(90deg);width:.8%;height:35%;border-radius:50%;background-color:#fff}#mouse-container #mouse-body #mouse-left-drag-sentence{position:absolute;top:-5%;left:-27.5%;transform:translate(-50%,-50%);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:.85em}#mouse-container #mouse-body #mouse-left-click-line-diagonal{position:absolute;top:45%;left:25%;transform-origin:bottom;transform:translate(-100%,-100%) rotate(-45deg);width:.75%;height:35%;border-radius:50%;background-color:#fff}#mouse-container #mouse-body #mouse-left-click-line-horizontal{position:absolute;top:20.5%;left:-6%;transform-origin:top;transform:rotate(90deg);width:.8%;height:35%;border-radius:50%;background-color:#fff}#mouse-container #mouse-body #mouse-left-click-sentence{position:absolute;top:15%;left:-27.5%;transform:translate(-50%,-50%);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:.85em}#mouse-container #mouse-body #mouse-right-drag-line-diagonal{position:absolute;top:25%;right:25%;transform-origin:bottom;transform:translate(-100%,-100%) rotate(45deg);width:.75%;height:35%;border-radius:50%;background-color:#fff}#mouse-container #mouse-body #mouse-right-drag-line-horizontal{position:absolute;top:.25%;right:-4%;transform-origin:top;transform:rotate(-90deg);width:.8%;height:35%;border-radius:50%;background-color:#fff}#mouse-container #mouse-body #mouse-right-drag-sentence{position:absolute;top:-5%;right:-63%;transform:translate(-50%,-50%);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:.85em}#mobile-keys-container{position:fixed;bottom:0%;left:50%;transform:translate(-50%);height:90vw;width:80vw;z-index:20;pointer-events:none}#mobile-keys-container #mobile-key-forward{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%) translateY(-16vw);height:17vw;width:17vw;border:1px solid #fff;border-radius:50%;background:radial-gradient(#ffffff1a,#ffffff80);pointer-events:auto}#mobile-keys-container #mobile-key-left{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%) translate(-16vw);height:17vw;width:17vw;border:1px solid #fff;border-radius:50%;background:radial-gradient(#ffffff1a,#ffffff80);pointer-events:auto}#mobile-keys-container #mobile-key-right{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%) translate(16vw);height:17vw;width:17vw;border:1px solid #fff;border-radius:50%;background:radial-gradient(#ffffff1a,#ffffff80);pointer-events:auto}#mobile-keys-container #mobile-key-backward{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%) translateY(16vw);height:17vw;width:17vw;border:1px solid #fff;border-radius:50%;background:radial-gradient(#ffffff1a,#ffffff80);pointer-events:auto}