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{margin:0;padding:0;border:0;font-size:100%;font:inherit;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}body{background-color:#011;color:#fef;font:12px "Open Sans","Lucida Grande",Arial,sans-serif}body .h1,body h1{font-size:2em;margin:0}body .p,body p{width:100%;font-size:.75em;margin:0;display:flex;justify-content:space-between}body select{background-color:transparent;color:#fff;border:0}body select:hover{background-color:#000}body select:focus{outline:0}body .full{background:#122;background:radial-gradient(circle,#222224 0,#000 200%);display:flex;position:relative;flex-flow:column nowrap;justify-content:flex-start;align-items:center;width:calc(100vw - 64px);height:calc(100vh - 64px);filter:blur(.5px);padding:32px}body .container{width:calc(100% - 20px);max-width:500px;padding:32px;display:flex;position:relative;flex-flow:column nowrap;margin:10px;text-align:center;justify-content:center;align-items:center;background:#222;box-shadow:0 1px 20px rgba(0,0,0,.5);border-radius:4px;background:radial-gradient(circle,#222 0,#000 200%)}body .container .name{width:100%;display:flex;justify-content:space-between;font-size:2em;filter:blur(1px)}body .container .keyboard{width:100%;height:100px;overflow:hidden;padding:16px 0;margin:16px 0;display:flex;justify-content:center;align-items:center;position:relative;border-radius:4px;background-color:rgba(0,0,0,.125)}body .container .keyboard .key{cursor:pointer;border-radius:2px;width:100%;height:100%;text-align:center;display:flex;justify-content:center;align-items:flex-end;position:relative;margin-right:3px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;z-index:2;transition:all .3s;text-shadow:2px 2px 10px #000}body .container .visualizer{position:absolute;z-index:1;width:100%;max-width:500px;height:100px}body .container .settingsBar{width:100%;max-width:500px;margin:0 auto;display:flex;flex-flow:column wrap;justify-content:space-between}body .container .settingsBar input{width:100%;margin-bottom:10px}body .container .settingsBar .waves{opacity:.65}body .container .settingsBar .waves .waveforms{display:flex;justify-content:space-between;align-items:center;flex-flow:row nowrap}body .container .settingsBar .waves .waveforms .waveform{width:140px;display:flex;justify-content:space-between;padding-right:8px}body .container .settingsBar .waves .waveforms .wave{width:calc(100% - 140px);text-align:center}body .container .settingsBar .controls{width:100%;display:flex;flex-flow:row nowrap;padding-top:16px;opacity:.5}body .container .settingsBar .controls .filters{width:100%;padding-right:10px;text-align:center}body .container .settingsBar .controls .volume{width:100%;padding-left:10px;text-align:center}body .container .about{opacity:.5;margin-top:32px;width:100%}body .container .about .content{font-size:10px;display:flex;justify-content:space-between}body .container .about .content p{text-align:center;justify-content:center}body .container .about .content .fine{text-align:right;justify-content:flex-end}datalist{display:block;display:none;position:relative;width:100%;height:40px;margin:-23px auto 16px auto;width:calc(100% - 14px);padding-top:0;color:#fff}datalist option{left:0;transform:translateX(-12px);width:20px;position:absolute;display:inline-flex;justify-content:center;align-items:end;background-image:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 72 72" style="width: 24px; height: 24px;" preserveAspectRatio="none"><polygon style="fill:%23eceff1;stroke:%23eceff1;stroke-miterlimit:10;" points="72,72 0,72 0,22.5 36,0 72,22.5 "/></svg>');background-size:2px 12px;background-position:top center;background-repeat:no-repeat;height:32px;padding-top:20px;background-position-y:0;background-position-x:center;z-index:-1}datalist option.OctU1{left:50%}datalist option.OctU3{left:100%}[type=range]{-webkit-appearance:none;background:0 0;margin:9px 0;width:100%}[type=range]::-moz-focus-outer{border:0}[type=range]:focus{outline:0}[type=range]:focus::-webkit-slider-runnable-track{background:#fbfbfc}[type=range]:focus::-ms-fill-lower{background:#eceff1}[type=range]:focus::-ms-fill-upper{background:#fbfbfc}[type=range]::-webkit-slider-runnable-track{cursor:default;height:2px;transition:all .2s ease;width:100%;box-shadow:0 2px 0 rgba(0,0,0,.2);background:#eceff1;border:1px solid #cfd8dc;border-radius:1px}[type=range]::-webkit-slider-thumb{box-shadow:0 1px 0 rgba(0,0,0,.2);background:0 0;background-image:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 72 72" style="width: 24px; height: 24px;" preserveAspectRatio="none"><polygon style="fill:%23eceff1;stroke:%23eceff1;stroke-miterlimit:10;" points="72,72 0,72 0,22.5 36,0 72,22.5 "/></svg>');box-sizing:border-box;cursor:default;height:18px;width:12px;transform:rotate(180deg);-webkit-appearance:none;margin-top:-9px}[type=range]::-moz-range-track{box-shadow:0 2px 0 rgba(0,0,0,.2);cursor:default;height:2px;transition:all .2s ease;width:100%;background:#eceff1;border:1px solid #cfd8dc;border-radius:1px;height:1px}[type=range]::-moz-range-thumb{box-shadow:0 1px 0 rgba(0,0,0,.2);background:0 0;background-image:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 72 72" style="width: 24px; height: 24px;" preserveAspectRatio="none"><polygon style="fill:%23eceff1;stroke:%23eceff1;stroke-miterlimit:10;" points="72,72 0,72 0,22.5 36,0 72,22.5 "/></svg>');box-sizing:border-box;cursor:default;height:18px;width:12px;transform:rotate(180deg)}[type=range]::-ms-track{cursor:default;height:2px;transition:all .2s ease;width:100%;background:0 0;border-color:transparent;border-width:9px 0;color:transparent}[type=range]::-ms-fill-lower{box-shadow:0 2px 0 rgba(0,0,0,.2);background:#dde3e6;border:1px solid #cfd8dc;border-radius:2px}[type=range]::-ms-fill-upper{box-shadow:0 2px 0 rgba(0,0,0,.2);background:#eceff1;border:1px solid #cfd8dc;border-radius:2px}[type=range]::-ms-thumb{box-shadow:0 1px 0 rgba(0,0,0,.2);background:0 0;background-image:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 72 72" style="width: 24px; height: 24px;" preserveAspectRatio="none"><polygon style="fill:%23eceff1;stroke:%23eceff1;stroke-miterlimit:10;" points="72,72 0,72 0,22.5 36,0 72,22.5 "/></svg>');box-sizing:border-box;cursor:default;height:18px;width:12px;transform:rotate(180deg);margin-top:.5px}[type=range]:disabled::-moz-range-thumb,[type=range]:disabled::-ms-fill-lower,[type=range]:disabled::-ms-fill-upper,[type=range]:disabled::-ms-thumb,[type=range]:disabled::-webkit-slider-runnable-track,[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}