@media (min-width:0px){.piano-key{background:#f5f5f5;height:52px;width:7px;outline:1px solid rgba(63,63,63,.95);-webkit-transition:background .5s ease-in;transition:background .5s ease-in;-webkit-user-drag:none;position:relative}.piano-key:first-of-type{border-left:none}.piano-key:last-of-type{border-right:none}.piano-key.is-black-key{background:#23252d;width:5px;height:37px;outline:1px solid rgba(63,63,63,.95)}.piano-key .piano-key-user{position:absolute;content:"";width:100%;height:100%}.piano-key.is-playing.brown{background:#50514f}.piano-key.is-playing.red{background:#f25f5c}.piano-key.is-playing.rose{background:#f272a5}.piano-key.is-playing.light_green{background:#75f2a1}.piano-key.is-playing.violet{background:#ac43f2}.piano-key.is-playing.orange{background:#f26c51}.piano-key.is-playing.pale_red{background:#f2473f}.piano-key.is-playing.cyan{background:#8be5f2}.piano-key.is-playing.yellow{background:#ffe066}.piano-key.is-playing.dark_green{background:#599e52}.piano-key.is-playing.blue{background:#247ba0}.piano-key.is-playing.green{background:#70c1b3}}@media (min-width:960px){.piano-key{background:#f5f5f5;height:105px;width:15px;outline:1px solid rgba(63,63,63,.95);-webkit-user-drag:none;position:relative}.piano-key:first-of-type{border-left:none}.piano-key:last-of-type{border-right:none}.piano-key.is-black-key{background:#23252d;width:10px;height:75px;outline:1px solid rgba(63,63,63,.95)}.piano-key .piano-key-user{position:absolute;content:"";width:100%;height:100%}.piano-key.is-playing.brown{background:#50514f}.piano-key.is-playing.red{background:#f25f5c}.piano-key.is-playing.rose{background:#f272a5}.piano-key.is-playing.light_green{background:#75f2a1}.piano-key.is-playing.violet{background:#ac43f2}.piano-key.is-playing.orange{background:#f26c51}.piano-key.is-playing.pale_red{background:#f2473f}.piano-key.is-playing.cyan{background:#8be5f2}.piano-key.is-playing.yellow{background:#ffe066}.piano-key.is-playing.dark_green{background:#599e52}.piano-key.is-playing.blue{background:#247ba0}.piano-key.is-playing.green{background:#70c1b3}}@media (min-width:1600px){.piano-key{background:#f5f5f5;height:210px;width:30px;outline:1px solid rgba(63,63,63,.95);-webkit-transition:background .5s ease-in;transition:background .5s ease-in;-webkit-user-drag:none;position:relative}.piano-key:first-of-type{border-left:none}.piano-key:last-of-type{border-right:none}.piano-key.is-black-key{background:#23252d;width:20px;height:150px;outline:1px solid rgba(63,63,63,.95)}.piano-key .piano-key-user{position:absolute;content:"";width:100%;height:100%}.piano-key.is-playing.brown{background:#50514f}.piano-key.is-playing.red{background:#f25f5c}.piano-key.is-playing.rose{background:#f272a5}.piano-key.is-playing.light_green{background:#75f2a1}.piano-key.is-playing.violet{background:#ac43f2}.piano-key.is-playing.orange{background:#f26c51}.piano-key.is-playing.pale_red{background:#f2473f}.piano-key.is-playing.cyan{background:#8be5f2}.piano-key.is-playing.yellow{background:#ffe066}.piano-key.is-playing.dark_green{background:#599e52}.piano-key.is-playing.blue{background:#247ba0}.piano-key.is-playing.green{background:#70c1b3}}@media (min-width:0px){.piano{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;z-index:50;margin:10px 0 5px;-webkit-box-shadow:0 0 40px rgba(0,0,0,.42);box-shadow:0 0 40px rgba(0,0,0,.42);overflow:hidden;border-radius:10px;border:2px solid hsla(0,0%,78%,.32)}.piano,.piano .keys{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.piano .keys{padding:0;margin:0;list-style:none}.piano .keys .is-black-key{position:absolute;z-index:1}.piano .keys .is-black-key:nth-of-type(2){left:3px}.piano .keys .is-black-key:nth-of-type(5){left:17px}.piano .keys .is-black-key:nth-of-type(7){left:24px}.piano .keys .is-black-key:nth-of-type(10){left:38px}.piano .keys .is-black-key:nth-of-type(12){left:45px}.piano .keys .is-black-key:nth-of-type(14){left:52px}.piano .keys .is-black-key:nth-of-type(17){left:66px}.piano .keys .is-black-key:nth-of-type(19){left:73px}.piano .keys .is-black-key:nth-of-type(22){left:87px}.piano .keys .is-black-key:nth-of-type(24){left:94px}.piano .keys .is-black-key:nth-of-type(26){left:101px}.piano .keys .is-black-key:nth-of-type(29){left:115px}.piano .keys .is-black-key:nth-of-type(31){left:122px}.piano .keys .is-black-key:nth-of-type(34){left:136px}.piano .keys .is-black-key:nth-of-type(36){left:143px}.piano .keys .is-black-key:nth-of-type(38){left:150px}.piano .keys .is-black-key:nth-of-type(41){left:164px}.piano .keys .is-black-key:nth-of-type(43){left:171px}.piano .keys .is-black-key:nth-of-type(46){left:185px}.piano .keys .is-black-key:nth-of-type(48){left:192px}.piano .keys .is-black-key:nth-of-type(50){left:199px}.piano .keys .is-black-key:nth-of-type(53){left:213px}.piano .keys .is-black-key:nth-of-type(55){left:220px}.piano .keys .is-black-key:nth-of-type(58){left:234px}.piano .keys .is-black-key:nth-of-type(60){left:241px}.piano .keys .is-black-key:nth-of-type(62){left:248px}.piano .keys .is-black-key:nth-of-type(65){left:262px}.piano .keys .is-black-key:nth-of-type(67){left:269px}.piano .keys .is-black-key:nth-of-type(70){left:283px}.piano .keys .is-black-key:nth-of-type(72){left:290px}.piano .keys .is-black-key:nth-of-type(74){left:297px}.piano .keys .is-black-key:nth-of-type(77){left:311px}.piano .keys .is-black-key:nth-of-type(79){left:318px}.piano .keys .is-black-key:nth-of-type(82){left:332px}.piano .keys .is-black-key:nth-of-type(84){left:339px}.piano .keys .is-black-key:nth-of-type(86){left:346px}}@media (min-width:960px){.piano{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;z-index:50;margin:20px 0 10px;-webkit-box-shadow:0 0 40px rgba(0,0,0,.42);box-shadow:0 0 40px rgba(0,0,0,.42);overflow:hidden;border-radius:15px;border:2px solid hsla(0,0%,78%,.32)}.piano,.piano .keys{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.piano .keys{padding:0;margin:0;list-style:none}.piano .keys .is-black-key{position:absolute;z-index:1}.piano .keys .is-black-key:nth-of-type(2){left:10px}.piano .keys .is-black-key:nth-of-type(5){left:40px}.piano .keys .is-black-key:nth-of-type(7){left:55px}.piano .keys .is-black-key:nth-of-type(10){left:85px}.piano .keys .is-black-key:nth-of-type(12){left:100px}.piano .keys .is-black-key:nth-of-type(14){left:115px}.piano .keys .is-black-key:nth-of-type(17){left:145px}.piano .keys .is-black-key:nth-of-type(19){left:160px}.piano .keys .is-black-key:nth-of-type(22){left:190px}.piano .keys .is-black-key:nth-of-type(24){left:205px}.piano .keys .is-black-key:nth-of-type(26){left:220px}.piano .keys .is-black-key:nth-of-type(29){left:250px}.piano .keys .is-black-key:nth-of-type(31){left:265px}.piano .keys .is-black-key:nth-of-type(34){left:295px}.piano .keys .is-black-key:nth-of-type(36){left:310px}.piano .keys .is-black-key:nth-of-type(38){left:325px}.piano .keys .is-black-key:nth-of-type(41){left:355px}.piano .keys .is-black-key:nth-of-type(43){left:370px}.piano .keys .is-black-key:nth-of-type(46){left:400px}.piano .keys .is-black-key:nth-of-type(48){left:415px}.piano .keys .is-black-key:nth-of-type(50){left:430px}.piano .keys .is-black-key:nth-of-type(53){left:460px}.piano .keys .is-black-key:nth-of-type(55){left:475px}.piano .keys .is-black-key:nth-of-type(58){left:505px}.piano .keys .is-black-key:nth-of-type(60){left:520px}.piano .keys .is-black-key:nth-of-type(62){left:535px}.piano .keys .is-black-key:nth-of-type(65){left:565px}.piano .keys .is-black-key:nth-of-type(67){left:580px}.piano .keys .is-black-key:nth-of-type(70){left:610px}.piano .keys .is-black-key:nth-of-type(72){left:625px}.piano .keys .is-black-key:nth-of-type(74){left:640px}.piano .keys .is-black-key:nth-of-type(77){left:670px}.piano .keys .is-black-key:nth-of-type(79){left:685px}.piano .keys .is-black-key:nth-of-type(82){left:715px}.piano .keys .is-black-key:nth-of-type(84){left:730px}.piano .keys .is-black-key:nth-of-type(86){left:745px}}@media (min-width:1600px){.piano{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;z-index:50;margin:40px 0 20px;-webkit-box-shadow:0 0 40px rgba(0,0,0,.42);box-shadow:0 0 40px rgba(0,0,0,.42);overflow:hidden;border-radius:20px;border:2px solid hsla(0,0%,78%,.32)}.piano,.piano .keys{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.piano .keys{padding:0;margin:0;list-style:none}.piano .keys .is-black-key{position:absolute;z-index:1}.piano .keys .is-black-key:nth-of-type(2){left:20px}.piano .keys .is-black-key:nth-of-type(5){left:80px}.piano .keys .is-black-key:nth-of-type(7){left:110px}.piano .keys .is-black-key:nth-of-type(10){left:170px}.piano .keys .is-black-key:nth-of-type(12){left:200px}.piano .keys .is-black-key:nth-of-type(14){left:230px}.piano .keys .is-black-key:nth-of-type(17){left:290px}.piano .keys .is-black-key:nth-of-type(19){left:320px}.piano .keys .is-black-key:nth-of-type(22){left:380px}.piano .keys .is-black-key:nth-of-type(24){left:410px}.piano .keys .is-black-key:nth-of-type(26){left:440px}.piano .keys .is-black-key:nth-of-type(29){left:500px}.piano .keys .is-black-key:nth-of-type(31){left:530px}.piano .keys .is-black-key:nth-of-type(34){left:590px}.piano .keys .is-black-key:nth-of-type(36){left:620px}.piano .keys .is-black-key:nth-of-type(38){left:650px}.piano .keys .is-black-key:nth-of-type(41){left:710px}.piano .keys .is-black-key:nth-of-type(43){left:740px}.piano .keys .is-black-key:nth-of-type(46){left:800px}.piano .keys .is-black-key:nth-of-type(48){left:830px}.piano .keys .is-black-key:nth-of-type(50){left:860px}.piano .keys .is-black-key:nth-of-type(53){left:920px}.piano .keys .is-black-key:nth-of-type(55){left:950px}.piano .keys .is-black-key:nth-of-type(58){left:1010px}.piano .keys .is-black-key:nth-of-type(60){left:1040px}.piano .keys .is-black-key:nth-of-type(62){left:1070px}.piano .keys .is-black-key:nth-of-type(65){left:1130px}.piano .keys .is-black-key:nth-of-type(67){left:1160px}.piano .keys .is-black-key:nth-of-type(70){left:1220px}.piano .keys .is-black-key:nth-of-type(72){left:1250px}.piano .keys .is-black-key:nth-of-type(74){left:1280px}.piano .keys .is-black-key:nth-of-type(77){left:1340px}.piano .keys .is-black-key:nth-of-type(79){left:1370px}.piano .keys .is-black-key:nth-of-type(82){left:1430px}.piano .keys .is-black-key:nth-of-type(84){left:1460px}.piano .keys .is-black-key:nth-of-type(86){left:1490px}}.picker-modal .picker-modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.picker-modal .btn-submit{margin-top:20px;float:right}.user-badge{list-style:none;padding:10px 20px;border-radius:5px;display:inline-block;margin:10px 20px;-webkit-transition:all .3s;transition:all .3s}.user-badge:first-of-type{margin-left:0}.user-badge:last-of-type{margin-right:0}.user-badge input:not(.editing){border:none;color:#000;text-align:center}ul.users{padding:0;margin:0;list-style:none;position:relative;z-index:200}.chat-message input{color:#000}.chat{position:absolute;bottom:140px;left:40px;right:40px}.chat input{width:100%}.chat .chat-messages-container{padding:0 20px;height:calc(100vh - 320px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:scroll;position:relative;margin-bottom:20px;-webkit-transition:all .3s;transition:all .3s}.chat .chat-messages-container::-webkit-scrollbar{width:.25rem}.chat .chat-messages-container::-webkit-scrollbar-track{display:none}.chat .chat-messages-container::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.22)}.chat .chat-messages-container.opened{background:rgba(0,0,0,.31);z-index:300;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.chat .chat-messages-container .chat-messages{margin-top:auto;list-style:none;padding:0}.room{width:inherit;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.room h1{text-align:center;text-transform:uppercase;font-size:4rem;text-shadow:0 3px 0 #828282,0 8px 10px rgba(0,0,0,.15)}ul.rooms{padding:0;margin:0;list-style:none}ul.rooms li{margin:10px 20px;display:inline-block}ul.rooms li.active{font-weight:700}ul.rooms a{color:#49a09d}.octave-selector{margin-left:20px}.octave-selector button{margin:0 5px}.bottom-bar{position:absolute;bottom:0;left:0;right:0;padding:30px;background:rgba(0,0,0,.28);-webkit-box-shadow:0 -8px 30px rgba(0,0,0,.2);box-shadow:0 -8px 30px rgba(0,0,0,.2);height:140px}.bottom-bar ul.midi-inputs,.bottom-bar ul.midi-outputs{padding:0;margin:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;height:100%}.bottom-bar ul.midi-inputs li,.bottom-bar ul.midi-outputs li{margin:16px 0}.bottom-bar h2{color:#000;margin-bottom:0}.bottom-bar h2:first-of-type{margin-top:0}@-webkit-keyframes introduction{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes introduction{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fullscreen-loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:300;background:rgba(0,0,0,.45)}.fullscreen-loader,.fullscreen-loader .inner-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fullscreen-loader .inner-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.fullscreen-loader .inner-content .loader-icon{width:64px;height:64px}.fullscreen-loader .inner-content .loader-icon,.fullscreen-loader .inner-content .loader-message{-webkit-animation:introduction .5s;animation:introduction .5s}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}*{-webkit-box-sizing:border-box;box-sizing:border-box}@font-face{font-family:Signika;src:url(../fonts/Signika-Bold.f84e0b36.woff2) format("woff2"),url(../fonts/Signika-Bold.ae501d37.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Signika;src:url(../fonts/Signika-Light.98e26ce4.woff2) format("woff2"),url(../fonts/Signika-Light.e7e97535.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Signika;src:url(../fonts/Signika-Semibold.c89b12e6.woff2) format("woff2"),url(../fonts/Signika-Semibold.84314346.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Signika;src:url(../fonts/Signika-Regular.4da30a92.woff2) format("woff2"),url(../fonts/Signika-Regular.f126e9cb.woff) format("woff");font-weight:400;font-style:normal}.fade-up-enter-active,.fade-up-leave-active{-webkit-transition:opacity .3s,-webkit-filter .4s;transition:opacity .3s,-webkit-filter .4s;transition:opacity .3s,filter .4s;transition:opacity .3s,filter .4s,-webkit-filter .4s}.fade-up-enter,.fade-up-leave-to{opacity:0;-webkit-filter:blur(15px);filter:blur(15px)}.fade-piano-key-enter-active,.fade-piano-key-leave-active{-webkit-transition:opacity .1s,-webkit-filter .15s;transition:opacity .1s,-webkit-filter .15s;transition:opacity .1s,filter .15s;transition:opacity .1s,filter .15s,-webkit-filter .15s}.fade-piano-key-enter,.fade-piano-key-leave-to{opacity:0;-webkit-filter:blur(10px);filter:blur(10px)}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .3s;transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.fade-scale-enter-active,.fade-scale-leave-active{-webkit-transition:opacity .15s,-webkit-transform .35s;transition:opacity .15s,-webkit-transform .35s;transition:opacity .15s,transform .35s;transition:opacity .15s,transform .35s,-webkit-transform .35s}.fade-scale-enter,.fade-scale-leave-to{opacity:0;-webkit-transform:scale3d(.98,.98,.98);transform:scale3d(.98,.98,.98)}.vue-js-switch#changed-font{font-size:16px!important}div[data-popover]{color:#000!important}.v--modal-overlay{background:rgba(95,44,130,.5)!important}.v--modal-box{background:#f5f5f5!important;padding:40px!important}.v--modal-box h2{color:#000}.v--modal-box h2:first-of-type{margin-top:0}.vue-js-switch.changed-font{font-size:2rem!important}.vc-chrome{font-family:Signika,sans-serif!important}.vue-notification{font-size:1.4rem!important}html{font-size:100%}body{background:linear-gradient(45deg,#5f2c82,#49a09d);min-height:100vh;font-family:Signika,sans-serif;color:#f5f5f5;overflow:hidden}.wrapper,body{display:-webkit-box;display:-ms-flexbox;display:flex}.wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}label{color:#000;margin:10px}.modal p{color:#333}