input[type=text]{font-family:var(--font-family);font-size:1.2rem;font-weight:300;color:var(--black);padding:0}input[type=text]:disabled{color:var(--border-color);background:var(--white)}input[type=range]{-webkit-appearance:none;height:1.5rem;margin:0;padding:0;outline:none;background-color:transparent}input[type=range]::-webkit-slider-runnable-track{height:2px;background-color:#ccc}input[type=range]::-moz-range-track{height:2px;background-color:#ccc}input[type=range]::-ms-track{height:2px;background-color:#ccc}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:1.5rem;width:1.5rem;margin-top:calc(-.75rem + 1px);border-radius:50%;background:var(--black);border:0;box-shadow:none}input[type=range]::-moz-range-thumb{height:1.5rem;width:1.5rem;border-radius:50%;background:var(--black);border:0}input[type=range]::-ms-thumb{height:1.5rem;width:1.5rem;border-radius:50%;background:var(--black);border:0}input[type=range]::-webkit-slider-thumb:active{background:var(--orange)}input[type=range]::-moz-range-thumb:active{background:var(--orange)}input[type=range]::-ms-thumb:active{background:var(--orange)}@media(hover){input[type=range]::-webkit-slider-thumb:hover{background:var(--orange)}input[type=range]::-moz-range-thumb:hover{background:var(--orange)}input[type=range]::-ms-thumb:hover{background:var(--orange)}}input[type=range]::-moz-focus-outer{border:0}button{outline:none;font-size:1rem;font-family:var(--font-family);cursor:pointer;margin:0}button:disabled{border-color:var(--border-color);color:var(--border-color);cursor:default}.button-link{background:none;color:var(--link-color);border:0;font-weight:300;text-decoration:underline;padding-left:0;padding-right:0}.button-standard{background:var(--white);color:var(--black);border-style:solid;border-color:#ccc}@media(hover){.button-standard:enabled:hover{background:var(--light-orange);border-color:var(--orange);color:var(--orange)}}.button-standard-tiny{border-radius:.25rem;border-width:2px;padding:0rem .5rem}.button-standard-small{border-radius:.5rem;border-width:2px;padding:.25rem .5rem}.button-standard-full{border-radius:.75rem;border-width:3px;padding:var(--size-half)}.button-standard-toggled{background:var(--orange);border-color:var(--orange);color:var(--white)}button.button-standard-error:disabled{background:var(--white);border-style:solid;border-color:var(--light-red);color:var(--light-red)}.button-standard-tab-list{border-width:3px 1.5px;padding:var(--size-half)}.button-standard-tab-list:first-child{border-radius:.75rem 0 0 .75rem;border-left-width:3px}.button-standard-tab-list:last-child{border-radius:0 .75rem .75rem 0;border-right-width:3px}.input-underlined{outline:none;border:solid var(--black);border-width:0 0 1px 0;border-radius:0}.input-underlined:disabled{border-color:var(--border-color)}.control{display:flex;flex-direction:row;align-items:center}.control-label{width:30%;box-sizing:border-box}.control input[type=range]{flex:1}.control-value{width:5rem;padding-left:.5rem;box-sizing:border-box}@media(max-width:768px){.control{align-items:flex-start}.control-label{width:35%}.control input[type=range]{margin-bottom:calc(.75rem - 1px)}}@media(max-width:480px){.control{flex-wrap:wrap}.control-label{order:0;width:auto}.control-value{order:1}.control input[type=range]{order:2;flex:0 0 100%;margin-bottom:calc(1rem - 1px)}}.keyboard-outer-container{height:11rem}.keyboard-scroll-button{background:#c1c1c1;flex:0 0 40px}@media(hover){.keyboard-scroll-button:hover{background:#a1a1a1}}.keyboard-keys-container{display:flex;overflow-x:hidden;background:var(--white)}.keyboard-key{flex-shrink:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:1rem;line-height:1.5rem;text-align:center;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.keyboard-white-key{width:3.5rem;border:solid var(--black);border-width:2px 1px;background:var(--white);color:var(--black)}.keyboard-white-key:first-child{border-left-width:2px}.keyboard-white-key:last-child{border-right-width:2px}.keyboard-black-key{background:var(--black);height:60%;width:2.5rem;margin-left:-1.25rem;margin-right:-1.25rem;z-index:2;color:var(--white);border:2px solid var(--black)}.keyboard-key-root-indicator{border-radius:6px;padding:0rem .25rem;background:var(--red);color:var(--white);font-size:.75rem;pointer-events:none}.keyboard-key.pressed,.keyboard-scroll-button.pressed{background:var(--orange)}@media(min-width:768px){.keyboard-outer-container{height:15rem;margin-left:0;margin-right:0}.keyboard-keys-container{background:none}.keyboard-white-key{width:4rem}.keyboard-black-key{width:3rem;margin-left:-1.5rem;margin-right:-1.5rem}.keyboard-key-root-indicator{font-size:1rem}}.list-style-none{list-style-type:none}.h2{font-size:3rem}.h3{font-size:1.5rem}.h4{font-size:1rem}.lh-2{line-height:3rem}.lh-3{line-height:1.5rem}.lh-4{line-height:1rem}.m0{margin:0}.mt0{margin-top:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.mr-half{margin-right:var(--size-half)}.mt1{margin-top:var(--size-1)}.mr1{margin-right:var(--size-1)}.mb1{margin-bottom:var(--size-1)}.ml1{margin-left:var(--size-1)}.mt3{margin-top:var(--size-3)}.pl0{padding-left:0}.pt-half{padding-top:var(--size-half)}.pb-half{padding-bottom:var(--size-half)}.pl-half{padding-left:var(--size-half)}.pr-half{padding-right:var(--size-half)}.p1{padding:var(--size-1)}.pl1{padding-left:var(--size-1)}.pr1{padding-right:var(--size-1)}.pt1{padding-top:var(--size-1)}.pb1{padding-bottom:var(--size-1)}.pr-half-safe{padding-right:var(--size-half)}.pl1-safe{padding-left:var(--size-1)}.pr1-safe{padding-right:var(--size-1)}@supports (padding: max(0px)){.pr-half-safe{padding-right:max(.75rem,env(safe-area-inset-right))}.pl1-safe{padding-left:max(1.5rem,env(safe-area-inset-left))}.pr1-safe{padding-right:max(1.5rem,env(safe-area-inset-right))}}.relative{position:relative}.absolute{position:absolute}.t0{top:0}.b0{bottom:0}.r0{right:0}.b-all{border:1px solid var(--border-color)}.bb{border-bottom:1px solid var(--border-color)}.bl{border-left:1px solid var(--border-color)}.br{border-right:1px solid var(--border-color)}.bt-thick{border-top:2px solid var(--border-color)}.outline-none{outline:none}.center{text-align:center}.vertical-top{vertical-align:top}.round{border-radius:50%}.bold{font-weight:700}.flex{display:flex}.block{display:block}.inline-block{display:inline-block}.display-none{display:none}.flex-uniform-size{flex:1}.flex-column{flex-direction:column}.flex-align-center{align-items:center}.flex-align-end{align-items:flex-end}.flex-justify-center{justify-content:center}.flex-justify-end{justify-content:flex-end}.flex-justify-space-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.overflow-scroll-x{overflow-x:scroll}.overflow-ellipsis{text-overflow:ellipsis}.border-box{box-sizing:border-box}.whitespace-wrap-none{white-space:nowrap}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.user-select-none{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.width-1{width:var(--size-1)}.width-2{width:var(--size-2)}.width-3{width:var(--size-3)}.full-width{width:100%}.full-height{height:100%}.height-1{height:var(--size-1)}.height-2{height:var(--size-2)}.height-3{height:var(--size-3)}.bg-black{background:var(--black)}.bg-orange{background:var(--orange)}.bg-light-orange{background:var(--light-orange)}.red{color:var(--red)}.bg-light-red{background:var(--light-red)}.bg-red{background:var(--red)}.bg-light-gray{background:var(--light-gray)}.bg-lighter-gray{background:var(--lighter-gray)}.white{color:var(--white)}@media(min-width:769px){.block-l{display:block}.inline-l{display:inline}.display-none-l{display:none}.ml-half-l{margin-left:var(--size-half)}.mr1-l{margin-right:var(--size-1)}.pr1-l{padding-right:var(--size-1)}.br-l{border-right:1px solid var(--border-color)}}:root{--font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", helvetica, arial, sans-serif;--orange: orange;--light-orange: papayawhip;--dark-orange: darkorange;--red: #c00;--light-red: #faa;--black: #130f30;--white: #fff;--border-color: #ddd;--light-gray: #f1f1f1;--lighter-gray: #fafafa;--link-color: #0af;--size-half: .75rem;--size-1: 1.5rem;--size-2: 3rem;--size-3: 4.5rem}html{font-size:16px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;overscroll-behavior:none}body{margin:0;padding:0;font-family:var(--font-family);font-size:20px;background:var(--white);color:var(--black);line-height:1.5em;font-weight:300}a{color:var(--link-color)}#transport{justify-content:center}.play-icon{display:block;width:0;height:0;overflow:hidden;border-style:solid;border-width:.5rem 0rem .5rem 1rem;border-color:transparent transparent transparent var(--black)}.play-icon-enabled{border-color:var(--white)}.rewind-icon{display:block;width:1rem;height:1rem;overflow:hidden;border-style:solid;border-width:0 0 0 3px;border-color:var(--black);box-sizing:border-box}.rewind-icon:before{content:"\a0";display:block;width:0px;height:0px;margin-left:-3px;border-style:solid;border-width:.5rem 1rem .5rem 0rem;border-color:transparent var(--black) transparent transparent}@media(hover){.button-standard-tab-list:hover .play-icon{border-color:transparent transparent transparent var(--orange)}.button-standard-tab-list:hover .play-icon-enabled,.button-standard-tab-list:hover .rewind-icon{border-color:var(--orange)}.button-standard-tab-list:hover .rewind-icon:before{border-color:transparent var(--orange) transparent transparent}}.popup-box{background:var(--white);position:absolute;right:0;border:2px solid var(--border-color);border-radius:10px;width:15rem;z-index:1000}.popup-box:before{content:"";position:absolute;bottom:100%;right:1.5rem;border-width:0 1.25rem 1.25rem 1.25rem;border-style:solid;border-color:transparent transparent var(--border-color) transparent}.popup-box:after{content:"";position:absolute;bottom:100%;right:1.7rem;padding-top:.1875rem;border-width:0 1.0625rem 1.0625rem 1.0625rem;border-style:solid;border-color:transparent transparent var(--white) transparent}.spinner-icon{width:1rem;height:1rem;border-radius:50%;border-style:solid;border-width:2px;border-color:var(--black) var(--black) var(--black) transparent;animation:spinner 1s linear infinite}@keyframes spinner{to{transform:rotate(360deg)}}.tab-strip{overflow:hidden;border-radius:5px;flex:1}.tab-strip-item{border-right:1px solid var(--border-color)}.tab-strip-item:last-child{border-right:0}@media(max-width:480px){body{font-size:16px}.tab-strip{flex:0 0 100%;order:1}}@media(max-width:666px){#header{flex-flow:row wrap}#logo-container{order:1;flex:1 50%}#transport{order:3;flex:1 100%;padding-top:1.5rem;justify-content:space-between}.transport-inner{flex:1}#download-container{order:2;flex:1 50%}}.sequencer-step-timeline{width:100%;height:1.5rem;position:absolute;bottom:1px}input[type=range].sequencer-playback-header::-webkit-slider-runnable-track{height:0px;background-color:red}input[type=range].sequencer-playback-header::-moz-range-track{height:0px;background-color:red}input[type=range].sequencer-playback-header::-ms-track{height:0px;background-color:red}input[type=range].sequencer-playback-header::-webkit-slider-thumb{background:#aaaa;border:2px solid black;box-sizing:border-box;margin-top:-.75rem}input[type=range].sequencer-playback-header::-moz-range-thumb{background:#aaaa;border:2px solid black;box-sizing:border-box}input[type=range].sequencer-playback-header::-ms-thumb{background:#aaaa;border:2px solid black;box-sizing:border-box}input[type=range].sequencer-playback-header::-webkit-slider-thumb:active{background:#666a}input[type=range].sequencer-playback-header::-moz-range-thumb:active{background:#666a}input[type=range].sequencer-playback-header::-ms-thumb:active{background:#666a}@media(hover){input[type=range].sequencer-playback-header::-webkit-slider-thumb:hover{background:#666a}input[type=range].sequencer-playback-header::-moz-range-thumb:hover{background:#666a}input[type=range].sequencer-playback-header::-ms-thumb:hover{background:#666a}}.sequencer-playback-line{position:absolute;top:calc(3rem - 1px);bottom:0;width:5px;background:var(--orange);opacity:.5}.sequencer-cell{flex:0 0 9rem}.sequencer-body-left-padding{flex:0 0 1rem;background-image:url(images/sequencer_row_background.png);background-size:144px 72px;background-position:bottom right;image-rendering:pixelated}.sequencer-body{background-image:url(images/sequencer_row_background.png);background-size:144px 72px;background-position:bottom right;image-rendering:pixelated}.sequencer-body-right-padding{flex:1;min-width:1rem;background-image:url(images/sequencer_row_background.png);background-size:1px 72px;background-position:bottom;image-rendering:pixelated}.sequencer-cell-header{background-image:url(images/sequencer_timeline_ticks.png);background-repeat:repeat-x;background-position:bottom left;background-size:36px 20px}.timeline-pattern{position:absolute;display:block;height:calc(100% - 1px);box-sizing:border-box;border:1px solid var(--black);border-radius:5px;background:var(--light-gray)}.timeline-pattern-transparent{opacity:.5}.timeline-pattern-selected{background:var(--light-orange);border-color:var(--orange)}.timeline-pattern-error{background:var(--light-red);border-color:var(--red)}.timeline-pattern-divider{display:block;background:var(--light-gray);height:calc(100% - 10px);width:0;margin-top:5px;border-width:0 0 0 1px;border-color:var(--light-gray);border-style:solid}.timeline-pattern-divider-selected{background:var(--light-orange);border-color:var(--light-orange)}.timeline-pattern-divider-error{background:var(--light-red);border-color:var(--light-red)}.timeline-pattern-name{position:absolute;background:var(--light-gray);margin-left:.25rem;margin-top:1px;line-height:1.25rem;max-width:calc(100% - 2rem - 2px);overflow:hidden;font-size:1rem;text-overflow:ellipsis}.timeline-pattern-name-selected{background:var(--light-orange)}.timeline-pattern-name-error{background:var(--light-red)}.timeline-pattern-overlay{opacity:.8}.timeline-sidebar-button{color:#aaa}.timeline-sidebar-button-enabled{color:var(--black)}.timeline-sidebar-button-enabled:active{color:var(--white);background:var(--dark-orange)}.timeline-pattern-menu{display:block;border:2px solid var(--border-color);border-radius:.75rem;padding:.5rem;box-sizing:border-box;background:var(--lighter-gray);pointer-events:auto}.timeline-pattern-menu-arrow-container{position:relative;display:block;width:2rem;height:1rem;margin-top:-2px}.timeline-pattern-menu-arrow-outline{position:absolute;bottom:0;width:0;border-width:1rem 1rem 0 1rem;border-style:solid;border-color:var(--border-color) transparent transparent transparent;pointer-events:auto;clip-path:polygon(0 0,100% 0,50% 100%,0 0)}.timeline-pattern-menu-arrow-fill{position:absolute;top:0;left:3px;width:0;border-width:.8125rem .8125rem 0 .8125rem;border-style:solid;border-color:var(--lighter-gray) transparent transparent transparent}.expanded{width:200px}.expanded>li>.short-name{display:none}.contracted>li>input{display:none}.contracted>li>.sequencer-name-container,.contracted>li>.sequencer-volume-container{display:none}.instrument-panel{min-width:600px}@media(max-width:768px){.instrument-panel-container{flex-direction:column;align-items:stretch;width:100%}.instrument-panel{flex:1;min-width:0;margin:0;padding-left:0;padding-right:0;border-left:0;border-right:0}}.pane-tab-unselected{padding-bottom:2px;border-bottom:2px solid var(--border-color)}.pane-tab-selected{border-bottom:4px solid var(--orange)}.note-container{flex:1;min-width:3rem;box-sizing:border-box;padding:1px}.note-column-header{color:#ccc}.note-box{display:block;height:2rem;width:calc(100% - 4px);text-align:center;border:1px solid var(--border-color);margin:1px;font-size:1rem;font-weight:400;line-height:2rem;outline:none}.note-box-focused{background:var(--light-orange);border:2px solid var(--orange);margin:0}.note-box-invalid{background:var(--light-red);border:2px solid var(--red);margin:0}.indented{padding-left:1rem}.lightText{color:#aaa}@media(max-width:480px){.indented{padding-left:0}}