a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}@keyframes fadeout{0%{opacity:1}to{opacity:0;transform:scale(calc(var(--scale-factor)*.5))}}@keyframes fadein{0%{opacity:0;transform:scale(calc(var(--scale-factor)*1.5))}to{opacity:1}}@keyframes reversedfadein{0%{opacity:0}50%{opacity:1}to{opacity:0;transform:scale(calc(var(--scale-factor)*1.2))}}@keyframes lowfadeinwithdelay{0%{opacity:0}40%{opacity:0;transform:scale(calc(var(--scale-factor)*.7))}to{opacity:1}}@keyframes orbit{0%{opacity:0;transform:translateY(250%) rotate(0deg) translateY(-250%) rotate(0deg) scale(1)}5%{opacity:0;transform:translateY(250%) rotate(-18deg) translateY(-250%) rotate(18deg) scale(1)}20%{opacity:1;transform:translateY(250%) rotate(-72deg) translateY(-250%) rotate(72deg) scale(1)}96%{opacity:1;transform:translateY(250%) rotate(-1turn) translateY(-250%) rotate(1turn) scale(1)}to{opacity:.5;transform:translateY(250%) rotate(-1turn) translateY(-250%) rotate(1turn) scale(.3)}}@keyframes mobile-orbit{0%{transform:translateY(150%) rotate(0deg) translateY(-150%) rotate(0deg) scale(.1)}20%{transform:translateY(150%) rotate(-72deg) translateY(-150%) rotate(72deg) scale(1)}96%{transform:translateY(150%) rotate(-359deg) translateY(-150%) rotate(359deg) scale(1)}to{transform:translateY(150%) rotate(-359deg) translateY(-150%) rotate(359deg) scale(.3)}}@keyframes lowbump{50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes bump{50%{transform:scale(2)}to{transform:scale(1)}}@keyframes selector-bump{20%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes selector-bad{0%{background-color:rgba(255,0,0,0)}50%{background-color:rgba(255,0,0,.3);transform:scale(.95)}to{background-color:rgba(255,0,0,0);transform:scale(1)}}@keyframes mobile-selector-bad{0%{background-color:rgba(255,0,0,0)}50%{background-color:rgba(255,0,0,.3)}to{background-color:rgba(255,0,0,0)}}@keyframes ding{0%{opacity:1}60%{opacity:1}to{opacity:0;transform:translateY(-30px)}}@keyframes color-arrow{0%,10%{color:#ff5252;transform:rotate(0deg) translateY(-5px)}15%,35%{color:#00b2ff;transform:rotate(90deg) translateY(-5px)}40%,60%{color:#ff0;transform:rotate(180deg) translateY(-5px)}65%,85%{color:#48ff3b;transform:rotate(270deg) translateY(-5px)}90%,to{color:#ff5252;transform:rotate(359deg) translateY(-5px)}}body{background-color:#181818;color:#e1e1e1;font-family:Inconsolata,monospace;margin:0;overflow-x:hidden;padding-top:20px;text-align:center}body h1,body h2,body h3{font-weight:700}body h1{font-size:16pt;margin-bottom:10px;margin-top:10px}body h2{font-size:14pt;margin-bottom:13px;margin-top:23px}body h3{font-size:12pt;margin-bottom:11px;margin-top:6px}body em{font-style:italic}body a{color:#00b2ff;text-decoration:none}body a,body strong{font-weight:700}body i{padding-left:1px}body hr{border:none;border-top:1px solid #8b8b8b;margin-top:40px}.mobile{background-color:rgba(0,0,0,.5);border-radius:5px;color:#fff;margin:0 auto 20px;max-width:370px;padding:15px 10px;text-align:left}.mobile .centered{text-align:center}.mobile a{color:#fff}.mobile p{padding-bottom:10px}.mobile ul{text-align:center}.mobile ul li{background-color:hsla(0,0%,100%,.1);display:inline-block;margin:5px 0;padding:5px 20px}.fullscreen-container.is-fullscreen .container{height:calc(100vh - 150px);max-width:100vw;width:calc(100vh - 150px)}@media(max-width:1024px){.fullscreen-container.is-fullscreen .container{height:calc(100vh - 350px)}}.fullscreen-container.is-fullscreen .key-selector-container,.fullscreen-container.is-fullscreen .keys-container,.fullscreen-container.is-fullscreen .level-message{transform:scale(var(--scale-factor))}.container{background-color:#000;border-radius:5px;height:390px;margin:0 auto 10px;max-width:390px;padding:0;position:relative;user-select:text}.container .keys-container{left:0;position:absolute;right:0;top:0}.container .keys-container svg{shape-rendering:optimizeSpeed}.container .key-selector-container{padding:10px}.container .key-selector-container.hide{animation:fadeout 1s 1;opacity:0}.container .key-selector-container.show{animation:fadein 1s 1;opacity:1}.container .key-selector-container .key-selector{border-color:#ff5252 #00b2ff #ff0 #48ff3b;border-radius:999px;border-style:solid;border-width:5px;height:64px;left:0;margin:0 auto;opacity:0;position:absolute;right:0;width:64px}.container .key-selector-container .key-selector.show{opacity:1}.container .key-selector-container .key-selector.fade{animation:fadein 1s;transform-origin:50% 0}.container .key-selector-container .key-selector.bump{animation:selector-bump .25s ease-in-out 1;animation-delay:50ms}.container .key-selector-container .key-selector.bad{animation:selector-bad .15s ease-out 1}.container .key-selector-container .key-selector:after{border-radius:999px!important;margin:5px;opacity:.8}.container .key-selector-container .key-selector.s-key-left:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%2348ff3b' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");color:#48ff3b;padding-right:5px;transform:rotate(-90deg);transform-origin:50% 50%;width:54px;width:49px}.container .key-selector-container .key-selector.s-key-left:after,.container .key-selector-container .key-selector.s-key-up:after{background-position:50%;background-repeat:no-repeat;background-size:50%;border:none;border-radius:999px;content:"";display:block;height:54px;line-height:54px;position:absolute;text-align:center}.container .key-selector-container .key-selector.s-key-up:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%23ff5252' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");color:#ff5252;height:49px;line-height:49px;padding-bottom:5px;transform-origin:50% 50%;width:54px}.container .key-selector-container .key-selector.s-key-right:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%2300b2ff' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");color:#00b2ff;padding-left:5px;transform:rotate(90deg);transform-origin:50% 50%;width:54px;width:49px}.container .key-selector-container .key-selector.s-key-down:after,.container .key-selector-container .key-selector.s-key-right:after{background-position:50%;background-repeat:no-repeat;background-size:50%;border:none;border-radius:999px;content:"";display:block;height:54px;line-height:54px;position:absolute;text-align:center}.container .key-selector-container .key-selector.s-key-down:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%23ff0' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");color:#ff0;height:49px;line-height:49px;padding-top:5px;transform:rotate(180deg);transform-origin:50% 50%;width:54px}.container .key-selector-container .key-selector .ding{animation:ding .5s ease-out 1;color:#e1e1e1;font-family:Inconsolata,monospace;font-size:15pt;font-weight:bolder;left:0;margin:0 auto;opacity:0;position:absolute;right:0;top:0}.container .img-logo{height:200px;margin:0 auto 20px;width:200px}.container .key{animation:orbit 2s linear 1;height:60px;left:0;margin:2px auto;position:absolute;right:0;top:15px;width:60px}.container .key.paused{animation-play-state:paused}.container .key.idle{animation:none;display:none}.container .key svg{transition:opacity 1s}.container .key.hide svg{opacity:0}.container .key .key-color-stroke{fill:rgba(0,0,0,.7);stroke:currentColor}.container .key .key-color{fill:currentColor}.container .key.key-left{color:#48ff3b}.container .key.key-left svg{transform:rotate(-90deg) scale(1.15)}.container .key.key-up{color:#ff5252}.container .key.key-up svg{transform:scale(1.15)}.container .key.key-right{color:#00b2ff}.container .key.key-right svg{transform:rotate(90deg) scale(1.15)}.container .key.key-down{color:#ff0}.container .key.key-down svg{transform:rotate(180deg) scale(1.15)}.container .level-message{display:none;font-size:17px;height:100%;left:0;line-height:calc(390px*var(--scale-factor));position:absolute;top:0;width:100%}.container .level-message.show{animation:reversedfadein 1s;display:block}.container .helper-container{bottom:0;height:100%;left:0;position:absolute;top:0;width:100%}.container .helper-container.hide{animation:fadeout 1s;opacity:0}.container .helper-container .top{text-align:left}.container .helper-container .bottom{bottom:170px;left:0;margin:0 auto;max-width:390px;position:absolute;right:0}.container .helper-container .bottom .text{color:hsla(0,0%,88%,.7);font-size:14pt;left:0;margin:0 auto;max-width:292.5px;position:absolute;right:0;top:140px}.container .helper-container .bottom .key{animation:lowbump .8s ease-out infinite;opacity:1;top:0}.container .helper-container .bottom .key.key-left{right:120px;top:70px}.container .helper-container .bottom .key.key-up{top:10px}.container .helper-container .bottom .key.key-down{top:70px}.container .helper-container .bottom .key.key-right{left:120px;right:0;top:70px}.container .results{background-color:#000;border-radius:5px;display:none;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%}.container .results.show{animation:lowfadeinwithdelay 1.8s ease-in-out;display:table;opacity:1}.container .results.hide{animation:fadeout .8s ease-in-out;display:table;opacity:0}.container .results .results-container{display:table-cell;vertical-align:middle}.container .results .results-container .results-content{margin-left:auto;margin-right:auto}.container .results .results-container .results-content p{animation:lowbump .8s ease-out infinite}.container .pause{background-color:#000;border-radius:5px;display:none;height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.container .pause.show{display:table}.container .pause .pause-container{display:table-cell;vertical-align:middle}.container .pause .pause-container .pause-content{margin-left:auto;margin-right:auto}.container .pause .pause-container .pause-content p{animation:lowbump .8s ease-out infinite}.container .total{border-radius:0 0 5px 5px;bottom:0;left:0;margin:0 auto;max-width:390px;position:absolute;right:0}.container .total .percent{background-color:#00db00;border-radius:5px;height:6px;margin:0 auto;transition:width .2s ease-in-out,background-color .2s linear}.container .total .percent.medium{background-color:#ffd000}.container .total .percent.low{background-color:#ff392d}.points-container{font-family:Inconsolata,monospace;margin:0 auto 20px;max-width:410px;opacity:0;text-align:center}.points-container .points{display:inline-block}.points-container .points.bump{animation:selector-bump .3s ease-in-out 1}.points-container.hide{animation:fadeout .5s ease-out;opacity:0}.points-container.show{animation:fadein .5s ease-out;opacity:1}.best{font-size:16px;margin:0 auto;max-width:390px;padding-right:5px;text-align:right}.best .best-points{font-weight:700}.fullscreen-btn{font-size:16px;margin:5px auto 0;max-width:390px;padding-right:5px;text-align:right}.banner{display:inline-block;margin-top:30px}.banner img{max-width:100%}.about{font-size:16px;margin:0 auto;max-width:370px;padding-top:20px;text-align:justify}.about p{padding-bottom:10px;padding-top:10px}.about .prim,.about .sec{color:#e1e1e1;font-weight:700}.about .third{color:#ff5252;font-weight:700}.about .key-up{display:inline-block}.about .key-up:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%23ff5252' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:50%;border-color:#ff5252;border-radius:999px;border-style:solid;color:#ff5252;content:"";display:block;height:17px;line-height:17px;padding-bottom:0;position:absolute;position:relative;text-align:center;transform-origin:50% 50%;width:17px}.about .tiny{font-size:12px}.about .share{min-height:30px;padding-bottom:20px;padding-top:10px;text-align:center}.about .share.big{min-height:100px}.about .share .reddit-share-button{padding-bottom:6px;top:-3px;vertical-align:middle}.about .share .fb-share-button{top:-3px}.about .share .reddit-share-button{vertical-align:top}.about .footer{text-align:right}.mobile-controls{display:none;margin:0 auto;max-width:390px;position:relative;user-select:none}.mobile-controls .top{padding-bottom:10px;text-align:center}.mobile-controls .top .key-up{display:inline-block}.mobile-controls .top .key-up:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%23ff5252' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:50%;border-color:#ff5252;border-radius:999px;border-style:solid;color:#ff5252;content:"";display:block;height:69px;height:64px;line-height:69px;line-height:64px;padding-bottom:5px;position:absolute;position:relative;text-align:center;transform-origin:50% 50%;width:69px}.mobile-controls .bottom{padding-bottom:10px;text-align:center}.mobile-controls .bottom .key-left{display:inline-block}.mobile-controls .bottom .key-left:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%2348ff3b' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:50%;border-color:#48ff3b;border-radius:999px;border-style:solid;color:#48ff3b;content:"";display:block;height:69px;line-height:69px;padding-right:5px;position:absolute;position:relative;text-align:center;transform:rotate(-90deg);transform-origin:50% 50%;width:69px;width:64px}.mobile-controls .bottom .key-down{display:inline-block}.mobile-controls .bottom .key-down:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%23ff0' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:50%;border-color:#ff0;border-radius:999px;border-style:solid;color:#ff0;content:"";display:block;height:69px;height:64px;line-height:69px;line-height:64px;padding-top:5px;position:absolute;position:relative;text-align:center;transform:rotate(180deg);transform-origin:50% 50%;width:69px}.mobile-controls .bottom .key-right{display:inline-block}.mobile-controls .bottom .key-right:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2111 2075'%3E%3Cpath fill='%2300b2ff' d='M794 942v742c0 92-24 226 32 306 87 125 413 111 476-35 37-88 15-215 15-308V959c156 110 262 279 415 391 192 139 423-146 372-337-30-108-151-195-227-271l-541-544c-81-81-164-200-289-198S839 117 758 198L217 742C141 818 28 902 5 1013c-33 161 95 399 284 372 81-12 143-82 198-136 103-100 199-213 307-307z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:50%;border-color:#00b2ff;border-radius:999px;border-style:solid;color:#00b2ff;content:"";display:block;height:69px;line-height:69px;padding-left:5px;position:absolute;position:relative;text-align:center;transform:rotate(90deg);transform-origin:50% 50%;width:69px;width:64px}.mobile-controls .pause-btn{background-color:hsla(0,0%,88%,.1);border-radius:5px;margin-right:7px;padding:13px 17px;position:absolute;right:0;top:0}@media(min-width:1024px){.desktop-only{display:block}.not-desktop{display:none}}@media(max-width:1024px){.mobile-controls{display:block}.desktop-only,.helper-container .key{display:none}.not-desktop{display:block}.container .img-logo{height:80px}}@media(max-width:480px){body{padding-top:0}body h1{margin-top:5px}.container{height:273px;margin-top:0}.container .key-selector-container .key-selector.bump{animation:none}.container .key-selector-container .key-selector.bad{animation:mobile-selector-bad .15s ease-out 1}.container .key{animation:mobile-orbit 2s linear 1;backface-visibility:hidden;opacity:1}.about{padding-left:15px;padding-right:15px}}