*,div{box-sizing:border-box}body,html{margin:0;padding:0}body{background:#000;color:#000;font-family:Karla,sans-serif;font-size:18px;height:100%;overflow:hidden;width:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333}::-webkit-scrollbar-thumb:hover{background:#555}.information ::-webkit-scrollbar-track{background:#eee}.wrapper{height:900px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1200px}.wrapper .wrapper__inner{height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}.wrapper .wrapper__background-image{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.wrapper .wrapper__background-image img{height:100%;object-fit:contain;width:100%}@media screen and (max-width:1200px){.wrapper{height:768px;width:1024px}}@media screen and (max-width:1024px){.wrapper{height:576px;width:768px}}@media screen and (max-width:768px){.wrapper{height:75vw;width:100vw}}.container{height:100%;left:0;position:fixed;top:0;width:100%}.keyboard-wrapper{left:49.5%;opacity:1;position:absolute;top:62.25%;transform:translate(-50%,-50%)}.keyboard-wrapper .keyboard{color:#444;font-size:15px;font-weight:700;text-transform:uppercase;user-select:none}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row{display:flex;justify-content:center;width:100%}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row:not(:last-child){margin-bottom:2px}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key{cursor:pointer;height:60px;position:relative;width:60px}@media screen and (max-width:1200px){.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key{height:51.2px;width:51.2px}}@media screen and (max-width:1024px){.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key{height:38.4px;width:38.4px}}@media screen and (max-width:768px){.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key{height:5vw;width:5vw}}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key .key__label,.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key .key__symbol{display:none}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key img{height:145%;left:50%;object-fit:contain;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:145%;z-index:2}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key img.key__image{filter:contrast(120%) brightness(92%) saturate(125%)}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key img.key__image-hover{display:none}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key img.key__image-shadow{opacity:.75;z-index:1}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key:hover img.key__image{filter:brightness(110%)}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key.active img.key__image,.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key:active img.key__image{display:none}.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key.active img.key__image-hover,.keyboard-wrapper .keyboard .keyboard__inner .keyboard__row .key:active img.key__image-hover{display:block;transform:translate(-50%,-47.5%)}#controls{height:25%;left:50%;position:absolute;top:33%;transform:translate(-50%,-50%);width:74%}#controls .converter{height:100%;left:0;position:absolute;top:0;user-select:none;width:100%}#controls .converter .converter__inner{align-items:flex-start;display:flex;height:100%;left:0;position:absolute;top:0;width:100%}#controls .converter .converter__inner .converter__pane{display:flex;flex-direction:column;font-weight:700;height:100%;justify-content:flex-start;margin-right:10px;position:relative;text-transform:uppercase;width:44%}#controls .converter .converter__inner .converter__pane .converter__pane-header{display:none}#controls .converter .converter__inner .converter__pane .converter__buttons{align-items:center;display:flex;flex-direction:column;justify-content:center;width:100%}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button{cursor:pointer;height:60px;position:relative;width:60px}@media screen and (max-width:1200px){#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button{height:51.2px;width:51.2px}}@media screen and (max-width:1024px){#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button{height:38.4px;width:38.4px}}@media screen and (max-width:768px){#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button{height:5vw;width:5vw}}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:not(:last-child){margin-bottom:13%}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button img{height:145%;left:50%;object-fit:contain;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:145%}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button img.button__image-active,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button img.button__image-hover,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:hover img.button__image{display:none}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:hover img.button__image-hover{display:block}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button.active img.button__image,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button.active img.button__image-hover,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:active img.button__image,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:active img.button__image-hover,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:hover img.button__image-active{display:none}#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button.active img.button__image-active,#controls .converter .converter__inner .converter__pane.converter__pane--controls .converter__buttons .button:active img.button__image-active{display:block}#controls .converter .converter__inner .converter__pane.converter__pane--textarea .textarea,#controls .converter .converter__inner .converter__pane.converter__pane--textarea textarea{background:#fff;background:transparent;border:none;color:#000;font-family:Karla,sans-serif;font-size:18px;font-weight:400;font-weight:700;height:75%;left:0;outline:none;overflow-x:hidden;overflow-y:scroll;padding:15px;position:absolute;resize:none;text-shadow:2px 2px 12px rgba(255,0,0,.5);text-transform:none;top:50%;transform:translateY(-50%);user-select:text;width:100%}#controls .converter .converter__inner .converter__pane.converter__pane--textarea .textarea:focus,#controls .converter .converter__inner .converter__pane.converter__pane--textarea textarea:focus{border-color:#888}#controls .converter .converter__inner .converter__pane.converter__pane--textarea .textarea span,#controls .converter .converter__inner .converter__pane.converter__pane--textarea textarea span{color:#000}#controls .converter .converter__inner .converter__pane.converter__pane--textarea .textarea span.highlight,#controls .converter .converter__inner .converter__pane.converter__pane--textarea textarea span.highlight{background:#e26904;box-shadow:0 0 12px #fff;color:#fff;outline:1px solid #fff;outline-width:2px}#controls .converter .converter__inner .converter__pane.converter__pane--textarea .button{align-items:center;background:#efa960;border-radius:100%;box-shadow:-2px 2px 12px #e26904;color:#222;cursor:pointer;display:flex;font-size:15px;height:20px;justify-content:center;line-height:1;position:absolute;right:15px;top:calc(12.5% + 15px);width:20px}#controls .converter .converter__inner .converter__pane:first-child{width:44%}#controls .converter .converter__inner .converter__pane:nth-child(2){width:12.75%}#controls .converter .converter__inner .converter__pane:nth-child(3){width:43.25%}@media screen and (max-width:1024px){#controls .converter .converter__inner .converter__pane.converter__pane--textarea .textarea,#controls .converter .converter__inner .converter__pane.converter__pane--textarea textarea{font-size:13.5px}}.information-panel{background:rgba(0,0,0,.75);height:100%;left:0;position:fixed;top:0;transition:opacity .5s;width:100%;z-index:999}.information-panel .information-panel__inner{background:#fff;height:840px;left:50%;max-height:90vh;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:transform .5s;width:816px}.information-panel .information-panel__inner .information-panel__text{height:100%;overflow-x:hidden;overflow-y:scroll;padding:46px 52px;width:100%}.information-panel .information-panel__inner .information-panel__text h1{margin:10px 0}.information-panel .information-panel__inner .information-panel__text p{margin:26px 0}.information-panel .information-panel__inner .information-panel__text p:last-child{margin-bottom:0}.information-panel .information-panel__inner .information-panel__text ul{list-style:none}.information-panel .information-panel__inner .information-panel__text ul [data-audio]{cursor:pointer;text-decoration:underline}.information-panel .information-panel__close{color:#fff;cursor:pointer;font-size:70px;line-height:1;padding:5px 30px;position:absolute;right:0;top:0}.information-panel:not(.information-panel--visible){display:none}.information-panel:not(.information-panel--active){opacity:0}.information-panel:not(.information-panel--active) .information-panel__inner{transform:translate(-50%,calc(-50% + 10px))}@media screen and (max-width:1200px){.information-panel .information-panel__inner{height:716.8px;width:696.32px}}@media screen and (max-width:1024px){.information-panel .information-panel__inner{height:537.6px;width:522.24px}}@media screen and (max-width:768px){.information-panel .information-panel__inner{height:75vh;padding:10px;width:85vw}}.information-button{cursor:pointer;height:60px;left:12.1%;position:absolute;top:50.25%;transform:translate(-50%,-50%);user-select:none;width:60px;z-index:1}@media screen and (max-width:1200px){.information-button{height:51.2px;width:51.2px}}@media screen and (max-width:1024px){.information-button{height:38.4px;width:38.4px}}@media screen and (max-width:768px){.information-button{height:5vw;width:5vw}}.information-button img{height:145%;left:50%;object-fit:contain;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);user-select:none;width:145%}.information-button img.information-button__image-active,.information-button img.information-button__image-hover,.information-button:hover img.information-button__image{display:none}.information-button:hover img.information-button__image-hover{display:block}.information-button:active img.information-button__image,.information-button:active img.information-button__image-hover,.information-button:hover img.information-button__image-active{display:none}.information-button:active img.information-button__image-active{display:block}.live #button-live img.button__image{display:none}.live #button-live img.button__image-active{display:block!important}.live #button-download,.live #button-play{filter:saturate(0);pointer-events:none}.live .textarea,.live textarea{pointer-events:none}