@font-face{font-family:'Fira Sans';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnPKruQQ.ttf) format('truetype')}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5VfkA.ttf) format('truetype')}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKvuQQ.ttf) format('truetype')}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnSKzuQQ.ttf) format('truetype')}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3uQQ.ttf) format('truetype')}body{margin:0;overflow:hidden;font-family:"Fira Sans",sans-serif;color:#1d1d1d;background:#fff;-webkit-text-size-adjust:100%;font-size:16px;width:100%;height:100%}html{width:100%;height:100%;font-size:62.5%}a{color:#2559af}a:hover{text-decoration:none}p{line-height:1.5em}.material-icons{max-width:1em;overflow:hidden;vertical-align:bottom}.center{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.noselect{user-select:none}.interactive{pointer-events:auto}.about{background-color:#e6e6e6;position:absolute;top:45%;transform:translateY(-50%);left:1rem;right:1rem;margin:auto;max-width:600px;border-radius:5px;padding:1em;z-index:100;pointer-events:auto}.about .text-content{max-height:60vh;overflow-y:scroll}.about h2{margin:0}.about .close{position:absolute;top:.5em;right:.5em}.about figure{text-align:center;margin:auto}.about figure img{width:90%;max-width:250px;margin:auto}.about figure figcaption{color:#666;font-size:.8em;margin-top:.5em}.process-illustration{display:flex;flex-direction:row;align-items:center;justify-content:center}@media screen and (max-width:600px){.process-illustration{flex-direction:column}}.process-illustration .arrow{margin:1em;display:flex;flex-direction:column;align-items:center;font-size:.8em}@media screen and (max-width:600px){.process-illustration .arrow{flex-direction:row;padding-left:3.5em}.process-illustration .arrow i{transform:rotate(90deg)}}.process-illustration .arrow span{color:#666}.process-illustration .waveform{display:flex;flex-direction:row;align-items:center;height:70px}.process-illustration .waveform .bar{width:3px;margin:1px;height:10px;background-color:#999;transition:all 250ms ease-out}.process-illustration .tags{font-size:12px;margin-right:4em}.process-illustration .tags .genreTag{width:8em}.process-illustration .tags .genreBar{margin-left:8em}.process-illustration .color{border-radius:500px;width:50px;height:50px;transition:all 250ms ease-out}.Button{pointer-events:auto;user-select:none;color:white;padding:.5rem;margin:.5rem;border-radius:500px;cursor:pointer;transition:all .5s cubic-bezier(.215, .61, .355, 1);background:rgba(25,25,25,0.85);display:flex;align-items:center;justify-content:center}.Button:hover{transition:all .25s cubic-bezier(.215, .61, .355, 1);background:#646464}.Button:active{transition:all .1s cubic-bezier(.215, .61, .355, 1);background:#7d7d7d}.isHidden{height:0}.genreTag{color:#555;font-size:.8em;width:12em;float:left;text-align:right;padding-right:.5em;box-sizing:border-box;text-transform:capitalize;overflow:hidden;white-space:nowrap}.genreBar{font-size:.8em;padding:.5em;margin:.5em 0;transition:all 250ms ease-out;white-space:nowrap;margin-left:12em}.Header{user-select:none;font-size:24px;font-weight:300}.IconButton{pointer-events:auto;user-select:none;padding:.5rem;margin:.5rem;border-radius:500px;cursor:pointer;transition:all .5s cubic-bezier(.215, .61, .355, 1);display:flex;align-items:center;justify-content:center}.IconButton:hover{transition:all .25s cubic-bezier(.215, .61, .355, 1);background:rgba(0,0,0,0.1)}.IconButton:active{transition:all .1s cubic-bezier(.215, .61, .355, 1);background:rgba(0,0,0,0.2)}.JonLogo{pointer-events:auto;user-select:none;color:white;width:3em;height:3em;z-index:11;margin-left:auto;display:block;box-sizing:border-box;border-radius:500px;cursor:pointer;transition:all .5s cubic-bezier(.215, .61, .355, 1);background:rgba(25,25,25,0.85);margin-top:-0.4rem}.logo-container{height:100%;width:100%;perspective:5000px;transform:scale(.25)}.logo-container *{position:absolute;top:50%;left:50%;transform-style:preserve-3d}.JonLogo:hover .rotate{transform:rotateY(325deg)}@keyframes rotate{0%{transform:rotateY(90deg)}100%{transform:rotateY(0deg)}}.logo{transform:rotateZ(45deg)}.rotate{animation:rotate 1s ease-out;transition:transform 500ms ease}.top{transform:rotateZ(90deg) translate(-40px, 20px)}.top .face{position:absolute;margin:-24px -10px;width:20px;height:48px}.top .face:nth-child(n + 5){margin-top:-10px;height:20px}.top .face:nth-child(1){transform:rotateY(0deg) translateZ(10px);background:#ddd}.top .face:nth-child(2){transform:rotateY(90deg) translateZ(10px);background:#bbb}.top .face:nth-child(3){transform:rotateY(180deg) translateZ(10px);background:#ddd}.top .face:nth-child(4){transform:rotateY(270deg) translateZ(10px);background:#fff}.top .face:nth-child(5){transform:rotateX(90deg) translateZ(24px);background:#bbb}.top .face:nth-child(6){transform:rotateX(-90deg) translateZ(24px);background:#fff}.bottom{transform:rotateZ(90deg) translate3d(40px, -20px, 0)}.bottom .face{position:absolute;margin:-24px -10px;width:20px;height:48px}.bottom .face:nth-child(n + 5){margin-top:-10px;height:20px}.bottom .face:nth-child(1){transform:rotateY(0deg) translateZ(10px);background:#ddd}.bottom .face:nth-child(2){transform:rotateY(90deg) translateZ(10px);background:#bbb}.bottom .face:nth-child(3){transform:rotateY(180deg) translateZ(10px);background:#ddd}.bottom .face:nth-child(4){transform:rotateY(270deg) translateZ(10px);background:#fff}.bottom .face:nth-child(5){transform:rotateX(90deg) translateZ(24px);background:#bbb}.bottom .face:nth-child(6){transform:rotateX(-90deg) translateZ(24px);background:#fff}.middle{transform:rotateZ(90deg)}.middle .face{position:absolute;margin:-44px -10px;width:20px;height:88px}.middle .face:nth-child(n + 5){margin-top:-10px;height:20px}.middle .face:nth-child(1){transform:rotateY(0deg) translateZ(10px);background:#ddd}.middle .face:nth-child(2){transform:rotateY(90deg) translateZ(10px);background:#bbb}.middle .face:nth-child(3){transform:rotateY(180deg) translateZ(10px);background:#ddd}.middle .face:nth-child(4){transform:rotateY(270deg) translateZ(10px);background:#fff}.middle .face:nth-child(5){transform:rotateX(90deg) translateZ(44px);background:#bbb}.middle .face:nth-child(6){transform:rotateX(-90deg) translateZ(44px);background:#fff}.side{transform:translate3d(34px, 20px, 0)}.side .face{position:absolute;margin:-12px -10px;width:20px;height:24px}.side .face:nth-child(n + 5){margin-top:-10px;height:20px}.side .face:nth-child(1){transform:rotateY(0deg) translateZ(10px);background:#ddd}.side .face:nth-child(2){transform:rotateY(90deg) translateZ(10px);background:#bbb}.side .face:nth-child(3){transform:rotateY(180deg) translateZ(10px);background:#ddd}.side .face:nth-child(4){transform:rotateY(270deg) translateZ(10px);background:#fff}.side .face:nth-child(5){transform:rotateX(90deg) translateZ(12px);background:#bbb}.side .face:nth-child(6){transform:rotateX(-90deg) translateZ(12px);background:#fff}.MaterialButton{pointer-events:auto;user-select:none;color:white;padding:1rem 2rem;font-size:14px;border-radius:2px;cursor:pointer;transition:all .5s cubic-bezier(.215, .61, .355, 1);background:rgba(25,25,25,0.85);transform:scale(.95);opacity:0}.MaterialButton:hover{transition:all .25s cubic-bezier(.215, .61, .355, 1);background:#191919;transform:scale(1)}.MaterialButton:active{transition:all .1s cubic-bezier(.215, .61, .355, 1);background:#d54646}.SeekBar{width:100%;border-radius:50px}.SeekBar input[type="range"]{width:100%;margin:8px 0;background-color:transparent;-webkit-appearance:none;border-radius:50px;height:8px}.SeekBar input[type="range"]:focus{outline:none}.SeekBar input[type="range"]::-webkit-slider-runnable-track{border:0;border-radius:25px;width:100%;height:8px;cursor:pointer}.SeekBar input[type="range"]::-webkit-slider-thumb{margin-top:-8px;width:6px;height:22px;background:#ffffff;border:0;box-shadow:0 2px 3px 0 rgba(0,0,0,0.3);border-radius:50px;cursor:pointer;-webkit-appearance:none;transition:transform 250ms ease}.SeekBar input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}.SeekBar input[type="range"]::-moz-range-track{border:0;border-radius:25px;width:100%;height:8px;cursor:pointer}.SeekBar input[type="range"]::-moz-range-thumb{width:6px;height:22px;background:#ffffff;border:0;box-shadow:0 2px 3px 0 rgba(0,0,0,0.3);border-radius:50px;cursor:pointer;transition:transform 250ms ease}.SeekBar input[type="range"]::-moz-range-thumb:hover{transform:scale(1.2)}.SeekBar input[type="range"]::-ms-track{background:transparent;border-color:transparent;border-width:9px 0;color:transparent;width:100%;height:8px;cursor:pointer}.SeekBar input[type="range"]::-ms-fill-lower{border:0;border-radius:50px}.SeekBar input[type="range"]::-ms-fill-upper{border:0;border-radius:50px}.SeekBar input[type="range"]::-ms-thumb{width:6px;height:22px;background:#ffffff;border:0;box-shadow:0 2px 3px 0 rgba(0,0,0,0.3);border-radius:50px;cursor:pointer;margin-top:0;transition:transform 250ms ease}.SeekBar input[type="range"]::-ms-thumb:hover{transform:scale(1.2)}@supports (-ms-ime-align: auto){.SeekBar input[type="range"]{margin:0}}.spinner{text-align:center}.spinner>div{width:16px;height:16px;background-color:#fff;margin:8px;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.spinner .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.TrackSelector{pointer-events:auto;user-select:none;font-family:"Fira Sans",sans-serif;width:60%;display:block}.TrackSelector .dropdownArrow{transition:all 200ms cubic-bezier(.215, .61, .355, 1)}.TrackSelector.isOpen .dropdownArrow{transform:rotate(180deg)}.TrackSelector .dropdown{padding:.5em .7em;border-radius:5px;background-color:rgba(255,255,255,0.7);backdrop-filter:blur(4px);transition:all .5s cubic-bezier(.215, .61, .355, 1);cursor:pointer;display:flex;align-items:center;max-width:300px;box-sizing:border-box}.TrackSelector .dropdown .dropdownTitle{flex-grow:1;margin-left:.3em}.TrackSelector .dropdown:hover{background-color:#fff}.TrackSelector .optionContainer{background-color:rgba(255,255,255,0.7);backdrop-filter:blur(4px);max-width:300px;box-sizing:border-box;border-radius:5px;list-style-type:none;margin:0;padding:0;overflow:scroll;max-height:50vh;margin-top:.3em}.TrackSelector .optionContainer li{padding:.5em .8em;cursor:pointer;transition:all 250ms cubic-bezier(.215, .61, .355, 1)}.TrackSelector .optionContainer li:hover{background-color:rgba(255,255,255,0.9)}.TrackSelector .optionContainer li.selected{font-weight:bold}.TrackSelector select{display:none}.Landing{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:space-between}.Landing .Header{margin-top:2rem}.Landing .MaterialButton{margin-bottom:2rem}.Muser{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:space-between;opacity:1;transition:opacity 300ms ease}.Muser.hidden{opacity:0;transition:opacity 3s ease}.Muser .loader{background-color:rgba(0,0,0,0.5);backdrop-filter:blur(4px);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;flex-direction:column;pointer-events:auto;padding:1.5em;box-sizing:border-box;border-radius:5px;z-index:100;transition:all 300ms ease}.Muser .loader.hidden{opacity:0;pointer-events:none}.Muser .loader h3{margin-top:2em;font-weight:normal;color:#fff}.Muser .top-bar{z-index:10;position:absolute;left:0;line-height:1.3em;padding:1em;width:100%;box-sizing:border-box;display:flex;align-items:flex-start}.Muser .help{display:block;padding:0;margin-right:1em;border-radius:500px;box-sizing:border-box;background-color:rgba(255,255,255,0.7);backdrop-filter:blur(4px)}.Muser .ui-wrapper{bottom:1rem;left:1rem;right:1rem;border-radius:5px;padding:.5em 1em;position:absolute;background-color:rgba(255,255,255,0.7);backdrop-filter:blur(4px)}.Muser .controls{float:left;display:flex;align-items:center;width:100%}.Muser .controls .currentTime{opacity:.8;margin-right:.8em;text-align:right}.Muser .controls .songInfo{margin:.4em 0 .4em .8em;flex-grow:1}.Preloader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-start;justify-content:flex-start;pointer-events:none}strong{font-weight:600}