html{box-sizing:border-box}body{margin:0;padding:0;border:0}*{box-sizing:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0)}*:before,*:after{box-sizing:inherit}h1{font-size:1.5em}h2{font-size:1.375em}h3{font-size:1.25em}h4{font-size:1.125em}h5{font-size:1.0625em}h6{font-size:1em}base,basefont,datalist,head,meta,script,style,title,noembed,param,template{display:none}a{text-decoration:none;color:inherit}button{cursor:pointer;font-size:1em}button::-moz-focus-inner{border:0}sup{font-size:.6em}table{padding:0;margin:0;border:0;border-spacing:0;border-collapse:collapse}hr{border:none;height:1px;background-color:#888;margin:0;padding:0}nav>ul{list-style:none}:root{--clr-bg: #3C3B3D;--clr-bg-hi: #303030;--clr-fg: #E0E0E0;--clr-fg-hi: #FFF;--clr-red: #C00;--clr-red-hi: #F10;--clr-border: #99A;--clr-focus: #AAB;--clr-txti-bg: #333;--clr-txti-bg-focus: #222}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}body{color:var(--clr-fg);background-color:var(--clr-bg);font-size:16px}body,td,th,button,select,input{font-family:sans-serif}h1,h2,h3,h4,h5,h6{font-family:din-bold,sans-serif;font-weight:400;margin:0 0 .5em;-webkit-user-select:none;user-select:none}p{margin:0 0 .5em}a{color:#ace;cursor:pointer}a:hover,a:active{color:var(--clr-red-hi)}hr{margin-top:.5em;margin-bottom:.5em}button,input,select,textarea{font-size:1em;font-family:sans-serif;color:var(--clr-fg)}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.675;cursor:default}button,select,textarea,input[type=text],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=password],input[type=email]{border:1px solid var(--clr-border);padding:.5em}textarea,input[type=text],input[type=number],input[type=tel],input[type=url],input[type=search],input[type=password],input[type=email]{background-color:var(--clr-txti-bg)}textarea:focus,input[type=text]:focus,input[type=number]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=search]:focus,input[type=password]:focus,input[type=email]:focus{background-color:var(--clr-txti-bg-focus)}textarea:disabled,input[type=text]:disabled,input[type=number]:disabled,input[type=tel]:disabled,input[type=url]:disabled,input[type=search]:disabled,input[type=password]:disabled,input[type=email]:disabled{background-color:var(--clr-bg)}input[type=search]{background:url(../img/magnifying-glass.svg);background-size:1em;background-repeat:no-repeat;background-position:.2em center;padding-left:1.75em}button{border:1px solid var(--clr-border);color:var(--clr-fg);background-color:var(--clr-bg)}button:hover,button:active{background-color:var(--clr-bg-hi)}button:disabled{background-color:var(--clr-bg)}select{padding:.5em 2.5em .5em .75em;border-radius:0;cursor:pointer}h1{text-transform:uppercase}main{padding:1em}.left{text-align:left}.center{text-align:center}.right{text-align:right}.va-top{vertical-align:top}.nobr{white-space:nowrap}.lbr{white-space:pre-line}.bold{font-weight:700}.italic{font-style:italic}.large{font-size:1.5em}.small{font-size:.75em}.tiny{font-size:.5em}.light{color:#888}.mb1{margin-bottom:1em}.mb05{margin-bottom:.5em}.mt1{margin-top:1em}.mt05{margin-top:.5em}.ml1{margin-left:1em}.ml05{margin-left:.5em}.mr1{margin-right:1em}.mr05{margin-right:.5em}.mr025{margin-right:.25em}.pb1{padding-bottom:1em}.pt1{padding-top:1em}.pt05{padding-top:.5em}.pl1{padding-left:1em}.pr1{padding-right:1em}.h1{height:1em}.h2{height:2em}.h3{height:3em}.h4{height:4em}.h5{height:5em}.h6{height:6em}.h7{height:7em}.h8{height:8em}.h9{height:9em}.w1{width:1em}.w2{width:2em}.w3{width:3em}.w4{width:4em}.w5{width:5em}.w6{width:6em}.w7{width:7em}.w8{width:8em}.w9{width:9em}.w50{width:50%}.spacer{display:inline-block;width:1em;height:1em}.mono{font-family:monospace}.error{color:#c00}.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.fx-c{display:flex;justify-content:center;align-items:center}.fx-jc{display:flex;justify-content:space-between;align-items:center}.buttons>button{margin-left:1em}.buttons>button:first-child{margin-left:0}.app{margin-bottom:1.5em}.footer-text{text-align:center}.piano{width:100%}.key-black,.key-white{stroke:#111;stroke-width:.25;stroke-linejoin:round;-webkit-tap-highlight-color:rgba(255,255,255,0)}.key-black{fill:#333}.key-white{fill:#eee}.key-active,.key-active:hover{fill:#69c}.key-pressed,.key-pressed:hover{fill:#ca6}.key-combined,.key-combined:hover{fill:#6c9}.button-dialog .panel{position:relative;height:0;width:0;overflow:visible}.button-dialog .panel .panel-content{position:absolute;padding:.5em;background-color:var(--clr-bg);white-space:nowrap;min-width:max-content}.options{position:absolute;right:0;top:0;padding:1em;background-color:var(--clr-bg);box-shadow:-.25em .25em .5em #00000040}.options .inputs{margin-bottom:.75em}.options .text-col{line-height:1.375em;font-size:.875em;max-width:24em}.options .text-col p:last-child{margin-bottom:0}.transport{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.5em;border:var(--clr-border) 1px solid;border-radius:.5em}.transport .controls{display:flex;justify-content:space-between;align-items:center}.transport .controls .bpm{font-size:.75em;padding:0 .5em}.transport button.ctrl{min-width:3em;border-radius:.25em}.step-sequencer{width:100%;display:flex;flex-direction:row}.step-sequencer .track{display:flex;width:100%;margin-bottom:.25em}.step-sequencer .track-info{font-size:.65em;background-color:#222;padding:.25em}.step-sequencer .track-info input[type=number]{width:4.2em}.step-sequencer .step-group{display:inline-flex;flex-direction:row;padding:.125em}button.step-button{flex:1;height:5em;display:inline-flex;justify-content:center;align-items:flex-end;border:#56C 1px solid;border-radius:.375em;margin-right:.25em;background-color:#338;color:#779;padding:.25em 0}button.step-button:last-child{margin-right:0}button.step-button.beat{color:#ccc}button.step-button.flash{animation:beat-flash .5s}button.step-button.active{background-color:#67f}button.step-button.active.flash{animation:beat-flash-active .5s}@keyframes beat-flash{0%{background-color:#449}to{background-color:#338}}@keyframes beat-flash-active{0%{background-color:#cdf}to{background-color:#67f}}.tabset{border-bottom:var(--clr-border) 1px solid;margin-bottom:.5em}.tabset button.tab{border-radius:0}.tabset button.tab.active{background-color:#973}.app{position:relative}.app .piano-container{width:100%;text-align:center;overflow-x:auto;margin-bottom:1.5em}.app button.btn-options{position:absolute;top:0;right:0;border:none;background:transparent;padding:.875em}.app button.btn-options img{width:1.5em;height:1.5em}