@font-face{font-family:'Karla';src:url('/fonts/karla-regular-webfont.eot');src:url('/fonts/karla-regular-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/karla-regular-webfont.woff2') format('woff2'),url('/fonts/karla-regular-webfont.woff') format('woff'),url('/fonts/karla-regular-webfont.ttf') format('truetype'),url('/fonts/karla-regular-webfont.svg#karlaregular') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'Karla';src:url('/fonts/karla-bold-webfont.eot');src:url('/fonts/karla-bold-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/karla-bold-webfont.woff2') format('woff2'),url('/fonts/karla-bold-webfont.woff') format('woff'),url('/fonts/karla-bold-webfont.ttf') format('truetype'),url('/fonts/karla-bold-webfont.svg#karlabold') format('svg');font-weight:bold;font-style:normal}#keyboard_icon{position:fixed;z-index:6;left:50%;bottom:2rem;width:35px;height:35px;margin-left:-17.5px;background-image:url('/images/keyboard_icon.svg');background-size:contain;background-position:center;background-repeat:no-repeat;cursor:pointer}#keyboard{position:fixed;z-index:7;bottom:2rem;left:50%;margin-left:-448px;width:900px;height:90px;font-size:0;transform:translateY(calc(100% + 2rem));transition:transform .1s ease-out}@media screen and (max-width:1000px){#keyboard{left:1rem;right:1rem;margin-left:0;width:auto;height:110px}}@media (max-width:700px){#keyboard{display:none}}#keyboard::before{position:absolute;content:'';top:-1rem;bottom:-1rem;left:-1rem;right:-1rem}#keyboard.visible{transform:translateY(0)}#keyboard.visible #down_icon{opacity:0.25;visibility:visible}#keyboard.visible #down_icon:hover{opacity:1}#keyboard #down_icon{position:absolute;bottom:calc(100% + 1rem);left:50%;width:28px;height:20px;margin-left:-14px;background-image:url('/images/down_icon.svg');background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0;cursor:pointer;visibility:hidden}#keyboard #down_icon::before{position:absolute;content:'';top:-1rem;bottom:-1rem;left:-1rem;right:-1rem}#keyboard .key_container{width:100%;height:100%;border-radius:4px;overflow:hidden}#keyboard .key{position:relative;z-index:0;display:inline-block;width:3.57142857%;height:100%;background-color:#c0c0c0;border-left:1px solid #282526;border-right:1px solid #282526;cursor:pointer}#keyboard .key:first-child{border-left:none}#keyboard .key:last-child{border-right:none}#keyboard .key.active::after{position:absolute;content:'';bottom:5px;left:50%;margin-left:-5px;width:10px;height:10px;background-color:#FFFB3E;border-radius:100%}#keyboard .sharp{position:absolute;z-index:1;top:0;width:1.77777778%;height:50%;background-color:#282526;cursor:pointer}#keyboard .sharp.s1{left:2.66666667%}#keyboard .sharp.s2{left:6.22222222%}#keyboard .sharp.s3{left:13.33333333%}#keyboard .sharp.s4{left:17%}#keyboard .sharp.s5{left:20.55555556%}#keyboard .sharp.s6{left:27.66666667%}#keyboard .sharp.s7{left:31.22222222%}#keyboard .sharp.s8{left:38.33333333%}#keyboard .sharp.s9{left:41.88888889%}#keyboard .sharp.s10{left:45.44444444%}#keyboard .sharp.s11{left:52.66666667%}#keyboard .sharp.s12{left:56.33333333%}#keyboard .sharp.s13{left:63.44444444%}#keyboard .sharp.s14{left:67%}#keyboard .sharp.s15{left:70.55555556%}#keyboard .sharp.s16{left:77.66666667%}#keyboard .sharp.s17{left:81.11111111%}#keyboard .sharp.s18{left:88.44444444%}#keyboard .sharp.s19{left:92%}#keyboard .sharp.s20{left:95.55555556%}#keyboard .sharp.active::after{position:absolute;content:'';bottom:5px;left:50%;margin-left:-5px;width:10px;height:10px;background-color:#FFFB3E;border-radius:100%}@media (max-width: 625px){.but_not_on_mobile{display:none}}.only_on_mobile{display:none}@media (max-width: 625px){.only_on_mobile{display:block}}p.label{margin:0;margin-top:0.5rem;font-size:12px;text-align:center}@media (max-width: 625px){p.label{vertical-align:bottom;margin-bottom:1rem;padding-right:0.5rem}}#controls{position:fixed;z-index:5;top:0;left:0;width:100%;display:flex;background-color:#282526;box-shadow:0 2px 16px rgba(0,0,0,0.8)}@media (max-width: 625px){#controls{display:block;transition:transform 0.2s, opacity 0.2s}#controls.mobile_hide{transform:translateY(-100%)}}.control_group{flex:0 0 auto;border-right:2px solid #383436}.control_group.right{align-self:center;border-right:none}@media (max-width: 625px){.control_group{width:100%;border-bottom:2px solid #383436;border-right:none}.control_group .label{display:inline-block;width:33%;text-align:right}.control_group .control_group_controls{display:inline-block;width:66%;text-align:right}.control_group .control_group_controls.left{text-align:left}}.spacer{flex:2 0 auto;border-right:2px solid #383436;text-align:center}@media (max-width:850px){.spacer{display:none}}#note{padding:.5rem 1rem;color:white;min-width:100px;text-align:center;font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width: 625px){#note{display:none}}#time{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 1rem}@media (max-width: 625px){#time{padding:0}}#time .time-button{position:relative;display:inline-block;vertical-align:top;padding:.5rem;margin-right:10px;min-width:40px;text-align:center;font-weight:bold;cursor:pointer}#time .time-button.active{color:#fffb3e}#time .time-button:last-child{margin-right:0}@media (max-width: 625px){#time .time-button{min-width:0;width:23%;margin-right:2%;text-align:center}#time .time-button:last-child{margin-right:2%}}#oscillators{padding:0 1rem}@media (max-width: 625px){#oscillators{padding:0}}#oscillators .oscillator{display:inline-block;vertical-align:top;padding:.5rem .75rem;cursor:pointer}#oscillators .oscillator svg{width:28px;height:15px;fill:none;stroke:#c0c0c0 !important;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px}#oscillators .oscillator #drums_icon{fill:#c0c0c0 !important}#oscillators .oscillator.active svg{stroke:#fffb3e !important}#oscillators .oscillator.active #drums_icon{fill:#fffb3e !important}@media (max-width: 625px){#oscillators .oscillator{width:23%;margin-right:2%;text-align:center}}#metronome #metronome_icon{width:16px;height:16px;margin:.5rem 1rem;cursor:pointer}@media (max-width: 625px){#metronome .metronome_control{padding-bottom:.5rem}#metronome #metronome_icon{width:23%;height:20px;margin:.5rem 0;text-align:center}#metronome #metronome_icon svg{width:20px;height:20px}}#record{padding:0 0 0 1rem;font-size:15px;cursor:pointer;width:174px}@media (max-width:850px){#record{display:none}}#record_control{display:inline-block;vertical-align:middle;margin-right:0.5rem;width:16px;height:16px;border-radius:16px;background-color:#FF3436;transition:border-radius .25s}#record_control.recording{border-radius:0}.mobile_menu_button{position:absolute;top:100%;left:calc(50% - 23px);width:46px;height:50px;background-image:url('/images/menu.svg');background-size:24px;background-position:center;background-repeat:no-repeat}#controls:not(.mobile_hide) .mobile_menu_button{background-image:url('/images/menu_close.svg')}#mobile_menu{display:none}#minikeyboard{display:none;position:fixed;z-index:6;right:0;bottom:0;left:0;height:132px;background-color:#282526;max-width:400px;margin:0 auto}@media (max-width:700px){#minikeyboard{display:block}}.minikeyboard_keys{position:absolute;right:1rem;bottom:1rem;width:225px;height:90px;overflow:hidden;border-radius:4px}.minikeyboard_keys .key{position:relative;z-index:0;display:inline-block;width:14.28571429%;height:100%;background-color:#c0c0c0;border-left:1px solid #282526;border-right:1px solid #282526;cursor:pointer}.minikeyboard_keys .key:first-child{border-left:none}.minikeyboard_keys .key:last-child{border-right:none}.minikeyboard_keys .key.active::after{position:absolute;content:'';bottom:5px;left:50%;margin-left:-5px;width:10px;height:10px;background-color:#FFFB3E;border-radius:100%}.minikeyboard_keys .sharp{position:absolute;z-index:1;top:0;width:7.11111111%;height:50%;background-color:#282526;cursor:pointer}.minikeyboard_keys .sharp.s1{left:10.66666667%}.minikeyboard_keys .sharp.s2{left:24.88888889%}.minikeyboard_keys .sharp.s3{left:53.33333333%}.minikeyboard_keys .sharp.s4{left:68%}.minikeyboard_keys .sharp.s5{left:82.22222222%}.minikeyboard_keys .sharp.active::after{position:absolute;content:'';bottom:5px;left:50%;margin-left:-5px;width:10px;height:10px;background-color:#FFFB3E;border-radius:100%}.octave_bar{position:absolute;top:0;left:0;right:0;height:10px;background-color:#383436}.octave_bar .octave_bar_indicator{position:absolute;left:0%;width:25%;height:10px;background-color:#fffb3e}.octave_bar .octave_bar_indicator.octave0{left:0}.octave_bar .octave_bar_indicator.octave1{left:25%}.octave_bar .octave_bar_indicator.octave2{left:50%}.octave_bar .octave_bar_indicator.octave3{left:75%}.note_readout{position:absolute;left:0;top:10px;bottom:0;width:calc(100% - 225px - 1rem);padding:1rem}.note_readout .current_note{position:absolute;top:calc(22px + 1rem);bottom:calc(22px + 1rem);left:0;right:0;z-index:1;padding-top:0.25rem;text-align:center;font-size:30px;font-weight:bold;color:white;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.note_readout .octave_control{position:absolute;left:1rem;right:1rem;height:40px;z-index:2;background-size:21px 10px;background-repeat:no-repeat;cursor:pointer}.note_readout .octave_control.disabled{opacity:0.15}.note_readout .octave_up{top:1rem;background-image:url('/images/up_arrow.svg');background-position:center top}.note_readout .octave_down{bottom:1rem;background-image:url('/images/down_arrow.svg');background-position:center bottom}*{box-sizing:border-box}body{margin:0;padding:0;background-color:#282526;overflow:hidden;font-family:Karla, Helvetica, monospace;letter-spacing:1px;font-size:24px;color:#c0c0c0;-webkit-font-smoothing:antialiased}canvas{width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1}.noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#start_touch_popover{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background-image:url('/images/logo.png');background-position:center;background-size:200px;background-repeat:no-repeat;background-color:#282526}#start_touch_popover .centered_text{position:fixed;top:calc(50% + 120px);left:50%;transform:translate(-50%, -50%);font-size:12px;color:#fffb3e}#start_touch_popover.show{display:block}.credit,.about{color:rgba(255,255,255,0.3);font-size:12px}.credit a,.about a{color:#29A0BC;text-decoration:none}.credit{position:absolute;z-index:10;bottom:0.6rem;left:50%;transform:translateX(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.about{border-bottom:none;color:rgba(255,255,255,0.3)}.about p.label{margin:1em 0}.about .control_group_controls{padding-left:1rem;text-align:left !important}#draw_something{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);font-size:12px;color:rgba(255,255,255,0.3);font-weight:bold;letter-spacing:0.04em;transition:opacity 0.5s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#draw_something.hide{opacity:0;pointer-events:none}