@font-face{font-family:Noto Sans Mono;src:url(/NotoSansMono-Regular.ttf)}html,body,#app{margin:0;padding:0}#app{justify-content:center;width:100vw;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;display:flex;overflow:hidden}canvas{z-index:0;padding:0;position:absolute}.audio{opacity:0;align-self:center;transition:opacity 1s}.audio:hover,.audio.paused{opacity:.8}.well{z-index:1;background:#ffffff80;width:100%;height:fit-content;padding:5px}.inputs{display:flex}.inputs input{flex:1}.pick-song{color:#fff;position:absolute;top:5px;left:5px}.pick-song a{color:#fff;text-decoration:none}.center{color:#000;text-align:center;z-index:1;background:#efefef;border:1px solid #f0615b;width:50vh;height:20vh;margin:auto;font-family:Arial;font-size:4vh;line-height:10vh}.desc{color:#000;margin:-3vh 0 0;padding:0;font-size:2vh;line-height:3vh}.desc a{color:#5892d8;font-weight:700;text-decoration:none}.hide-scrollbar::-webkit-scrollbar{display:none}.flocking{background:#673ab7}.flocking circle{stroke:#fff;stroke-opacity:.25;stroke-width:2px}.disc{background-color:#5892d8;border-radius:100%;position:absolute}.ground{background:#2f3436;position:absolute;inset:100% 0 0}.instruct{-webkit-user-select:none;user-select:none;color:#844f00;text-align:center;position:absolute;top:calc(50% - 200px);left:0%;right:0%}.instruct h1{text-align:center;width:100%}progress[value]{appearance:none;background-color:red;width:100%;height:20px;position:absolute}progress[value]::-webkit-progress-bar{background-color:red}progress[value]::-webkit-progress-value{background-color:#0f0}.btn{color:#fff;margin:2px 0 0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body,.chars{transition:background .5s ease-in-out,color .1s ease-in-out}.chars{align-self:center;font-family:Noto Sans Mono;font-size:3vh;line-height:100vh}input[type=range].cool-slider{-webkit-appearance:none;background:0 0}input[type=range].cool-slider:focus{outline:none}input[type=range].cool-slider::-webkit-slider-runnable-track{cursor:pointer;width:100%;height:4px;box-shadow:none;border:none;border-radius:0}input[type=range].cool-slider.light::-webkit-slider-runnable-track{background:#312d32}input[type=range].cool-slider.dark::-webkit-slider-runnable-track{background:#ebe8e7}input[type=range].cool-slider::-webkit-slider-thumb{box-shadow:none;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;border:none;border-radius:0;width:4px;height:4px;transform:scale(4)}input[type=range].cool-slider.light::-webkit-slider-thumb{background:#312d32}input[type=range].cool-slider.dark::-webkit-slider-thumb{background:#ebe8e7}input[type=range].cool-slider.light:focus::-webkit-slider-runnable-track{background:#4ed9d8}input[type=range].cool-slider.dark:focus::-webkit-slider-runnable-track{background:#76f1f1}input[type=range].cool-slider::-moz-range-track{cursor:pointer;background:#3071a9;border:.2px solid #010101;border-radius:1.3px;width:100%;height:8.4px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range].cool-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:1px solid #000;border-radius:3px;width:16px;height:36px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range].cool-slider::-ms-track{cursor:pointer;color:#0000;background:0 0;border-width:16px 0;border-color:#0000;width:100%;height:8.4px}input[type=range].cool-slider::-ms-fill-lower{background:#2a6495;border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range].cool-slider::-ms-fill-upper{background:#3071a9;border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range].cool-slider::-ms-thumb{cursor:pointer;background:#fff;border:1px solid #000;border-radius:3px;width:16px;height:36px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range].cool-slider:focus::-ms-fill-lower{background:#3071a9}input[type=range].cool-slider:focus::-ms-fill-upper{background:#367ebd}.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate(0,0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translateY(-30px)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translateY(-15px)}90%{transform:translateY(-4px)}}.bounce{transform-origin:bottom;animation-name:bounce}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scale(1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}to{transform:scale(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translate(0,0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translate(0)}6.5%{transform:translate(-6px)rotateY(-9deg)}18.5%{transform:translate(5px)rotateY(7deg)}31.5%{transform:translate(-3px)rotateY(-5deg)}43.5%{transform:translate(2px)rotateY(3deg)}50%{transform:translate(0)}}.headShake{animation-name:headShake;animation-timing-function:ease-in-out}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0)}}.swing{transform-origin:top;animation-name:swing}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale3d(.9,.9,.9)rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1)rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1)rotate(-3deg)}to{transform:scale(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate(-25%)rotate(-5deg)}30%{transform:translate(20%)rotate(3deg)}45%{transform:translate(-15%)rotate(-3deg)}60%{transform:translate(10%)rotate(2deg)}75%{transform:translate(-5%)rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skew(-12.5deg)skewY(-12.5deg)}33.3%{transform:skew(6.25deg)skewY(6.25deg)}44.4%{transform:skew(-3.125deg)skewY(-3.125deg)}55.5%{transform:skew(1.5625deg)skewY(1.5625deg)}66.6%{transform:skew(-.78125deg)skewY(-.78125deg)}77.7%{transform:skew(.390625deg)skewY(.390625deg)}88.8%{transform:skew(-.195313deg)skewY(-.195313deg)}}.jello{transform-origin:50%;animation-name:jello}