@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}@font-face{font-family:'Cousine';src:url('/fonts/cousine-bold-webfont.woff2') format('woff2'),url('/fonts/cousine-bold-webfont.woff') format('woff');font-weight:bold;font-style:normal}@font-face{font-family:'Cousine';src:url('/fonts/cousine-regular-webfont.woff2') format('woff2'),url('/fonts/cousine-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-webkit-slider-thumb{height:7px;width:7px;background:#feac68;cursor:pointer;margin-top:0}input[type=range]::-moz-range-thumb{box-sizing:border-box;border:none;height:7px;width:7px;background:#feac68;cursor:pointer;margin-top:0;border-radius:0}input[type=range]::-moz-range-track{box-sizing:border-box;border:none;width:7px;background-color:white}input[type=range]::-ms-thumb{height:7px;width:7px;background:#ff4000;cursor:pointer;margin-top:0}.slider__container{position:relative;width:14px;height:90px;margin-right:1rem}.slider__container::before{position:absolute;bottom:calc(100% + 4px);content:attr(data-label);left:50%;transform:translateX(-50%);font-size:12px}.slider__container:last-child{margin-right:0}.slider__container.disabled{opacity:0.2;pointer-events:none}.slider{-webkit-appearance:none;background:transparent;height:15px;width:90px;border:2px solid black;margin:0;cursor:pointer}body:not(.ff) .slider.vertical{transform-origin:12px 3px;transform:rotate(90deg)}.slider:not(.vertical){position:relative;display:block;margin-bottom:10px}.slider:not(.vertical):last-child{margin-bottom:0}.slider:not(.vertical)::before{position:absolute;bottom:-2px;right:calc(100% + 4px);content:attr(data-label);transform:translateX(-50%);font-family:'Cousine';font-size:12px;width:8px;text-align:center;color:black}.slider:not(.vertical).inline_block{display:inline-block}.slider:not(.vertical).long_label::before{text-align:right;width:auto}body.ff .slider[orient="vertical"]{width:15px;height:90px;transform:rotate(180deg)}.slider__group{position:relative;margin-left:1rem;margin-right:1rem}.slider__group::before{position:absolute;bottom:calc(100% + 4px);content:attr(data-label);left:50%;transform:translateX(-50%);font-size:12px}.slider__group.disabled{opacity:0.2;pointer-events:none}.slider__pan{margin-left:2rem;margin-top:15px}.multiselect{position:relative;border:2px solid black;height:90px;font-size:12px;margin-right:1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.multiselect::before{position:absolute;bottom:calc(100% + 6px);content:attr(data-label);left:50%;transform:translateX(-50%)}.multiselect.short{height:46px}.multiselect.disabled{opacity:0.2;pointer-events:none}.multiselect__option{padding:2px;border-bottom:2px solid black;cursor:pointer}.multiselect__option:last-child{border-bottom:none}.multiselect__option.active{background-color:#feac68}.lsystem__controls{position:fixed;right:0;bottom:39px;left:0;height:140px;z-index:2;text-align:center;background-color:white}.lsystem__controls.lsystem__controls--disable .lsystem__panel.drawing{opacity:0.2;pointer-events:none}.lsystem__controls.lsystem__controls--disable .lsystem__panel.drawing .disabled_for_drums{opacity:1}.lsystem__panel_tabs{display:flex;position:absolute;bottom:100%;width:100%;left:0;padding:0 10px;pointer-events:none}.lsystem__tab{padding:4px 16px;font-size:16px;background-color:#e8e9ed;margin-right:10px;cursor:pointer;pointer-events:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lsystem__tab.active{background-color:white}.lsystem__tab.right{margin-left:auto}.lsystem__tab.small{padding:4px}.lsystem__tab .icon{pointer-events:none}.lsystem__panel{padding:1rem}.lsystem__panel.drawing{display:flex;justify-content:center;padding-top:2rem}.lsystem__panel.drawing.drums .disabled_for_drums{opacity:0.2;pointer-events:none}.lsystem__notes{display:inline-flex;height:30px;margin-top:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lsystem__octave_wrapper{display:flex}.lsystem__octave:not(:last-child){padding-right:2px}@media only screen and (max-width:1023px){.lsystem__notes{height:auto;margin-top:0;flex-wrap:wrap;padding-top:14px}.lsystem__octave_wrapper{display:flex;margin:auto;align-items:center;height:50px;width:100%}.lsystem__octave_wrapper:nth-child(1){order:1}.lsystem__octave_wrapper:nth-child(2){order:0}.octave-0,.octave-2{margin-left:auto}.octave-1,.octave-3{margin-right:auto}}.lsystem__note{position:relative;display:inline-block;vertical-align:middle;width:15px;height:15px;border-radius:50%;cursor:pointer}.lsystem__note.upper{border:2px solid white}.lsystem__note[data-note="0"]{background-color:#ff4000}.lsystem__note[data-note="1"]{background-color:#ff8000}.lsystem__note[data-note="2"]{background-color:#ffbf00}.lsystem__note[data-note="3"]{background-color:#ff0}.lsystem__note[data-note="4"]{background-color:#bfff00}.lsystem__note[data-note="5"]{background-color:#80ff00}.lsystem__note[data-note="6"]{background-color:#40ff00}.lsystem__note[data-note="7"]{background-color:#0f0}.lsystem__note[data-note="8"]{background-color:#00ff40}.lsystem__note[data-note="9"]{background-color:#00ff80}.lsystem__note[data-note="10"]{background-color:#00ffbf}.lsystem__note[data-note="11"]{background-color:#0ff}.lsystem__note[data-note="12"]{background-color:#00bfff}.lsystem__note[data-note="13"]{background-color:#007fff}.lsystem__note[data-note="14"]{background-color:#0040ff}.lsystem__note[data-note="15"]{background-color:#00f}.lsystem__note[data-note="16"]{background-color:#4000ff}.lsystem__note[data-note="17"]{background-color:#7f00ff}.lsystem__note[data-note="18"]{background-color:#bf00ff}.lsystem__note[data-note="19"]{background-color:#f0f}.lsystem__note[data-note="20"]{background-color:#ff00bf}.lsystem__note[data-note="21"]{background-color:#ff0080}.lsystem__note[data-note="22"]{background-color:#ff0040}.lsystem__note[data-note="23"]{background-color:#f00}.lsystem__note[data-note="24"]{border-color:#ff4000}.lsystem__note[data-note="24"].lsystem__note--active{background-color:#ff4000}.lsystem__note[data-note="25"]{border-color:#ff8000}.lsystem__note[data-note="25"].lsystem__note--active{background-color:#ff8000}.lsystem__note[data-note="26"]{border-color:#ffbf00}.lsystem__note[data-note="26"].lsystem__note--active{background-color:#ffbf00}.lsystem__note[data-note="27"]{border-color:#ff0}.lsystem__note[data-note="27"].lsystem__note--active{background-color:#ff0}.lsystem__note[data-note="28"]{border-color:#bfff00}.lsystem__note[data-note="28"].lsystem__note--active{background-color:#bfff00}.lsystem__note[data-note="29"]{border-color:#80ff00}.lsystem__note[data-note="29"].lsystem__note--active{background-color:#80ff00}.lsystem__note[data-note="30"]{border-color:#40ff00}.lsystem__note[data-note="30"].lsystem__note--active{background-color:#40ff00}.lsystem__note[data-note="31"]{border-color:#0f0}.lsystem__note[data-note="31"].lsystem__note--active{background-color:#0f0}.lsystem__note[data-note="32"]{border-color:#00ff40}.lsystem__note[data-note="32"].lsystem__note--active{background-color:#00ff40}.lsystem__note[data-note="33"]{border-color:#00ff80}.lsystem__note[data-note="33"].lsystem__note--active{background-color:#00ff80}.lsystem__note[data-note="34"]{border-color:#00ffbf}.lsystem__note[data-note="34"].lsystem__note--active{background-color:#00ffbf}.lsystem__note[data-note="35"]{border-color:#0ff}.lsystem__note[data-note="35"].lsystem__note--active{background-color:#0ff}.lsystem__note[data-note="36"]{border-color:#00bfff}.lsystem__note[data-note="36"].lsystem__note--active{background-color:#00bfff}.lsystem__note[data-note="37"]{border-color:#007fff}.lsystem__note[data-note="37"].lsystem__note--active{background-color:#007fff}.lsystem__note[data-note="38"]{border-color:#0040ff}.lsystem__note[data-note="38"].lsystem__note--active{background-color:#0040ff}.lsystem__note[data-note="39"]{border-color:#00f}.lsystem__note[data-note="39"].lsystem__note--active{background-color:#00f}.lsystem__note[data-note="40"]{border-color:#4000ff}.lsystem__note[data-note="40"].lsystem__note--active{background-color:#4000ff}.lsystem__note[data-note="41"]{border-color:#7f00ff}.lsystem__note[data-note="41"].lsystem__note--active{background-color:#7f00ff}.lsystem__note[data-note="42"]{border-color:#bf00ff}.lsystem__note[data-note="42"].lsystem__note--active{background-color:#bf00ff}.lsystem__note[data-note="43"]{border-color:#f0f}.lsystem__note[data-note="43"].lsystem__note--active{background-color:#f0f}.lsystem__note[data-note="44"]{border-color:#ff00bf}.lsystem__note[data-note="44"].lsystem__note--active{background-color:#ff00bf}.lsystem__note[data-note="45"]{border-color:#ff0080}.lsystem__note[data-note="45"].lsystem__note--active{background-color:#ff0080}.lsystem__note[data-note="46"]{border-color:#ff0040}.lsystem__note[data-note="46"].lsystem__note--active{background-color:#ff0040}.lsystem__note[data-note="47"]{border-color:#f00}.lsystem__note[data-note="47"].lsystem__note--active{background-color:#f00}.lsystem__note.minor{top:-24px;margin-left:-16px}.lsystem__note.minor::before{top:-5px;right:-5px;bottom:-5px;left:-5px}.lsystem__note.minor+.lsystem__note:not(.minor){margin-left:-16px}.lsystem__note::before{display:block;content:'';position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}.lsystem__note.lsystem__note--active::before{display:block;position:absolute;top:-2px;right:0;bottom:0;left:-2px;content:'';width:15px;height:15px;border:2px solid black;border-radius:50%}.lsystem__note.upper.lsystem__note--active::before{top:-4px;right:0;bottom:0;left:-4px}.lsystem__button{outline:none;border:none;margin-right:4px;background-color:transparent;color:black;font-family:Cousine;cursor:pointer}.lsystem__x{position:absolute;top:50%;right:8%;font-size:11px;background-color:black;color:white;transform:translateY(-50%)}@media only screen and (max-width:1200px){.lsystem__x{right:4%}}.lsystem__textbox_container{position:relative;text-align:left;margin-right:1rem;z-index:1;flex-grow:1;max-width:700px;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center}.lsystem__textbox{display:block;width:100%;height:60px;text-align:left;padding:1rem;font-size:24px;font-family:"Cousine";font-weight:400;outline:none;border:2px solid black;box-shadow:3px 3px 10px rgba(0,0,0,0.2)}.lsystem__remove{position:relative;outline:none;background-color:transparent;border:none;cursor:pointer;height:24px;font-family:"Cousine";font-size:11px}.lsystem__remove:hover::before{display:block}.lsystem__remove::before{display:none;content:'delete line';white-space:nowrap;position:absolute;top:0;right:100%;padding:4px 6px;background-color:#feac68;pointer-events:none}.lsystem__remove.lsystem__x{position:absolute;top:50%;right:8%}.lsystem__remove.lsystem__x::before{content:'clear all';white-space:nowrap;width:70px;text-align:center;padding:4px 0;background-color:#feac68;color:black}@media only screen and (max-width:1200px){.lsystem__remove.lsystem__x{right:4%}}.lsystem__input_error{position:absolute;bottom:calc(100% + 4px);left:0;color:#ff4000;font-size:12px}.lsystem__input_error_indicator{position:absolute;top:18px;left:0;width:14px;height:24px;border:1px solid #ff4000}canvas[resize]{width:100%;height:100%}.canvas__grid{position:fixed;z-index:0}.canvas__play{position:fixed;z-index:1;cursor:url('/images/cursor-18.png') 4 17,auto}._control_block{display:flex;align-items:center}._control_block .lsystem__button{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lsystem__top_controls{position:fixed;bottom:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:6px 0.25rem;border-top:2px solid #f0f0f0;background-color:white;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lsystem__top_controls .spacer{width:255px}.lsystem__play_controls{display:flex;align-items:center;padding:0 0.25rem;position:absolute;left:50%;transform:translateX(-50%)}.lsystem__play_controls .lsystem__button{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lsystem__play_controls .lsystem__player{width:140px;text-align:center}.lsystem__play_controls .lsystem__button{font-size:15px;padding:0;background-color:transparent}.lsystem__play_controls .lsystem__button:disabled{color:rgba(255,255,255,0.5)}.lsystem__play_controls .lsystem__counter{width:140px;color:black;font-size:11px;padding-left:4px;cursor:default;text-align:center}.lsystem__file_controls{display:flex;align-items:center}.lsystem__file_controls .lsystem__button{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lsystem__file_controls .icon{vertical-align:middle}.lsystem__file_controls .lsystem__url{font-size:11px;background-color:white}.lsystem__file_controls .lsystem__url a{display:block;padding:0.55em 1em}.lsystem__file_controls .lsystem__button{padding:2px 4px}.lsystem__file_controls .lsystem__button:active{background-color:#feac68}.lsystem__tempo_controls{width:140px;font-size:12px}.lsystem__tempo_controls .tempo{width:60px;padding:2px 0 2px 4px;text-align:right;color:black;font-size:12px;font-family:'Cousine',monospace;border:none;outline:none;border:2px solid transparent}.lsystem__tempo_controls .tempo:focus{border-color:#feac68}.credits{font-size:12px;margin-left:1rem}.credits a{color:#f1750f;text-decoration:none}.lsystem__tutorials{display:flex;justify-content:space-around;padding:2rem}.lsystem__tutorial{font-size:16px;padding:1rem;border:2px solid #f0f0f0;text-align:left;cursor:pointer}.lsystem__tutorial p{font-size:12px;font-weight:bold;color:rgba(0,0,0,0.6)}.lsystem__tutorial:hover h4{color:#feac68}.lsystem__tutorial:not(:last-child){margin-right:0.5rem}@media screen and (max-width:1000px){.lsystem__tutorial h4{font-size:12px}}.lsystem__tutorial_screen{position:fixed;top:0;left:0;right:0;bottom:0;background-color:white;z-index:20;overflow-y:scroll;opacity:0;transform:scale(.95);pointer-events:none;transition:opacity 0.15s, transform 0.15s}.lsystem__tutorial_screen.show{opacity:1;transform:scale(1);pointer-events:auto}.tutorial{position:relative;width:100%;max-width:900px;margin:2rem auto;font-size:14px;background-color:white;padding:3rem;letter-spacing:0;line-height:1.6}.tutorial p,.tutorial h3,.tutorial h4,.tutorial h5{margin-bottom:1rem;margin-left:auto;margin-right:auto}.tutorial h2{margin-bottom:1rem}.tutorial h2 .icon{margin-left:-38px}.tutorial h3{margin-bottom:0.25rem}.tutorial h5{font-size:14px}.tutorial ul{-webkit-margin-before:0;-webkit-padding-start:0}.tutorial li{margin-bottom:0.3rem}.tutorial video{display:block;width:100%;max-width:480px;margin:3rem auto}.tutorial__x_button{position:absolute;top:3rem;right:3rem;width:24px;height:24px;cursor:pointer}.tutorial__x_button .icon.trash{width:24px;height:24px}.lsystem__tooltip{position:fixed;top:0;left:0;transform:translate(calc(-50% + 10px), -100%);z-index:3;padding:0.2rem 0.3rem;background-color:black;color:white;border-radius:4px;font-size:11px;pointer-events:none}.lsystem__tooltip.no-center{transform:translate(0, -100%)}.lsystem__tool_palette{position:fixed;top:calc((100vh - 215px) / 2 - 90px);left:0px;padding:3px;background-color:white;box-shadow:1px 1px 1px rgba(0,0,0,0.25);font-size:18px;z-index:2;user-select:none}.lsystem__tool_palette .lsystem__tool_group{padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid #ebedf6}.lsystem__tool_palette .lsystem__tool{width:32px;height:32px;padding:2px;padding-top:4px;text-align:center;cursor:pointer}.lsystem__tool_palette .lsystem__tool.selected{background-color:rgba(254,172,104,0.75)}.icon{display:inline-block;width:24px;height:24px;background-position:center;background-size:contain;vertical-align:sub}.icon.paint{background-image:url('/images/icon-01.svg')}.icon.mouse{background-image:url('/images/icon-02.svg')}.icon.mouse_add{background-image:url('/images/icon-03.svg')}.icon.eyedropper{background-image:url('/images/icon-04.svg')}.icon.hand{background-image:url('/images/icon-05.svg')}.icon.pencil{background-image:url('/images/icon-06.svg')}.icon.sound{background-image:url('/images/icon-07.svg')}.icon.url{background-image:url('/images/icon-13.svg')}.icon.save{background-image:url('/images/icon-14.svg')}.icon.open{background-image:url('/images/icon-15.svg')}.icon.clear_all{background-image:url('/images/icon-20.svg')}.icon.cog{background-image:url('/images/icon-22.svg')}.icon.trash{width:18px;height:18px;pointer-events:none;background-image:url('/images/icon-16.svg')}.icon--player{display:inline-block;width:14px;height:14px;background-position:center;background-size:contain;border:none;outline:none;padding:0;background-color:transparent;cursor:pointer}body.ff .icon--player{vertical-align:middle}.icon--player:active{background-color:#feac68}.icon--player:disabled{opacity:0.4;cursor:default}.icon--player.back{background-image:url('/images/icon-08.svg')}.icon--player.stop{background-image:url('/images/icon-09.svg')}.icon--player.play{background-image:url('/images/icon-10.svg')}.icon--player.pause{background-image:url('/images/icon-11.svg')}.icon--player.forward{background-image:url('/images/icon-12.svg')}.icon--player.record{width:10px;height:10px;margin-bottom:1px;border-radius:100%;background-color:black;vertical-align:middle}.icon--player.record.recording{background-color:#feac68}.lsystem__toast{position:fixed;display:flex;top:0;right:10px;width:400px;height:40px;transform:translateY(-50px);z-index:4;transition:transform 0.3s;background-color:white;padding:12px 10px;box-shadow:1px 1px 1px rgba(0,0,0,0.25)}.lsystem__toast_left{flex:1 0 auto}.lsystem__toast_right{flex:0 0 10px;margin-left:auto;align-self:center}.lsystem__toast_text{display:inline-block;font-size:12px;vertical-align:top}.lsystem__toast.showing{transform:translateY(10px)}.lsystem__toast_copy{display:inline-block;padding:0 4px;outline:none;border:none;font-size:12px;font-family:Cousine;vertical-align:top;background-color:#feac68}.lsystem__toast_x{cursor:pointer}.lsystem__phone_takeover{display:none;position:fixed;top:20px;left:20px;right:20px;bottom:60px;padding:16px;background-color:white;z-index:1000;overflow-y:scroll}.lsystem__phone_takeover h4{text-align:center;margin-bottom:12px}.lsystem__phone_takeover h4,.lsystem__phone_takeover{font-size:14px}.lsystem__phone_takeover p{margin-bottom:12px}.lsystem__phone_takeover h4 .icon{vertical-align:bottom}.lsystem__phone_takeover.showing{display:block}.lsystem__phone_takeover ul{text-align:center;padding:0;padding-inline-start:0}.lsystem__phone_takeover li{margin-bottom:4px}.lsystem__phone_takeover_close{padding:6px 10px;background-color:#feac68;font-size:14px}.lsystem__advanced_inner{display:flex;width:100%;height:105px;max-width:980px;margin:0 auto;font-size:12px;text-align:left}.lsystem__advanced_controls{flex:1 1 33%}.lsystem__advanced_label{margin-right:1em}.lsystem__inactive_area{flex:1 1 66%;position:relative;background-color:#f1f3f8}.lsystem__inactive_area_text{position:absolute;width:100%;left:0;top:50%;transform:translateY(-50%);opacity:0.25;text-align:center}*{box-sizing:border-box}body{margin:0;padding:0;background-color:#d1d3db;font-family:"Cousine",Helvetica,monospace;font-weight:normal;letter-spacing:1px;font-size:24px;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul,li{list-style:none}h1,h2,h3,h4,h5,h6,p{margin:0}a{color:black}.highlight{color:#f1750f}.hidden{display:none !important}.display_none{display:none}.noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.white{color:white}.red{color:#ff4000}.small{font-size:11px}.center{text-align:center}.code{padding:2px 4px;border-radius:3px;background-color:#e8e9ed;color:#994601}@media screen and (max-width:800px){.hide_at_small_size{display:none}}body.mobile .no-mobile{display:none}