body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;font-family:Generation Sans,sans-serif;margin:0;padding:0}#root,body,html{width:100%}@media (device-width:820px) and (device-height:1180px) and (orientation:portrait){body,html{zoom:.9}}*{font-family:Generation Sans,sans-serif}code{font-family:Generation Sans}.drop-area{align-items:center;border:2px dashed #c3c3c3;border-radius:12px;color:#555;display:flex;flex-flow:column nowrap;font-size:24px;height:50vh;justify-content:center;margin:15px auto;padding:50px;width:80%}.upload-button{background-color:#5016ef;border-color:#7e5ff2;border-radius:10px;color:#fff;cursor:pointer;font-size:large;padding:12px;transition:opacity .2s}.upload-button:hover{opacity:.9}.upload-button:active{opacity:.8}.header-container{align-items:center;display:flex;flex-direction:row;flex-shrink:0;justify-content:space-between;min-height:60px;padding:1%}.header-column{align-content:stretch;display:flex;flex-direction:column}.knob{column-gap:10px;padding:2px 0}.knob-label{font-size:medium}.progress-bar-track{background:#00000080;border-radius:5px;height:6px;position:relative;width:72px}.progress-bar-fill{background:#fff;border-radius:5px;height:100%}.drummer-custom-param{align-items:center;background:#000;border:2px solid gold;border-radius:5px;color:#fff;display:flex;font-family:monospace;font-size:10px;font-weight:700;height:24px;justify-content:center;margin-left:5px;opacity:.9;padding:1px;width:24px}.keyboard-range-param{align-items:center;display:flex;height:48px;justify-content:end;margin-right:5px;width:24px}img.left-arrow,img.right-arrow{align-self:center;height:24px;padding:1px;width:24px}img.right-arrow{margin-left:auto;margin-right:8px}img.left-arrow{margin-left:8px}.icon-container{display:flex;flex-direction:column;height:72px;justify-content:center;position:relative}.icon-container--with-keyboard{margin:0 0 20px}.icon-rows{display:flex;flex-direction:column;justify-content:space-between}.icon-rows,.icon-rows--with-keyboard{margin-top:-80px}.icon-rows--without-keyboard{margin-top:0}.keyboard-range-container{margin-bottom:70px;margin-left:50px;width:100px}.box{background-color:#5016ef;border:1px solid #7e5ff2;border-radius:5px;color:#fff;flex-wrap:nowrap;font-size:smaller;height:120px;margin:0;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:7px 8px}.box,.expanded-box{align-items:center;column-gap:15px;display:flex;flex-direction:row}.expanded-container{align-items:center;display:flex;flex-direction:column;justify-content:flex-start}.knob-container{align-items:flex-start;display:flex;flex-direction:column;gap:5px;justify-content:space-evenly}.knob{align-items:center;column-gap:8px;display:flex;flex-direction:row;justify-content:flex-start}.free{background-color:#f7b000;border:1px solid #ffdf80}.break{background-color:#7c7c91;border:1px solid #d3d3da}.ambience{background-color:#00a693;border:1px solid #04d0b8}.rhythm{background-color:#e51a4c;border:1px solid #ff2b60}.melody{background-color:#773c1c;border:1px solid #a46340}.chords,.harmony{background-color:#ef16d9;border:1px solid #ff9af5}img.left-arrow,img.right-arrow{align-self:center;height:24px;margin-left:5px;padding:1px;width:24px}img.icon-on{border:1px solid #000;border-radius:5px;opacity:.9}img.icon-off,img.icon-on{background:#fff;filter:invert(100%) sepia(0) saturate(1%) hue-rotate(315deg) brightness(104%) contrast(101%);height:24px;margin-left:5px;padding:1px;width:24px}img.icon-off{border:1px solid #fff;border-radius:5px;opacity:50%;opacity:.25}img.icon-on-off{background:#fff;border:1px dashed #fff;border-radius:5px;filter:invert(100%) sepia(0) saturate(1%) hue-rotate(315deg) brightness(104%) contrast(101%);opacity:.25}.filter-icon-on,img.icon-on-off{height:24px;margin-left:5px;padding:1px;width:24px}.filter-icon-on{background:#000;border:1px solid #fff;border-radius:5px;opacity:.9}.filter-icon-off{background:#000;border:1px solid #fff;border-radius:5px;opacity:.25}.filter-icon-off,.filter-icon-on-off{height:24px;margin-left:5px;padding:1px;width:24px}.filter-icon-on-off{border:1px dashed #fff;border-radius:5px;opacity:.9}img.icons-background{height:72px;opacity:25%;position:absolute;width:148px;z-index:-1}.icon-row{align-items:center;display:flex;flex-direction:row;gap:2px;margin-bottom:6px}.icon-row:last-child{margin-bottom:0}.bar{background:#00000080;border-radius:5px;height:4px;width:40px}.expanded-region-width{width:80vw}.expanded-background{background-color:#000000b3;color:#fff;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.expanded-background>*{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:999}.grid-container{font-size:smaller;position:relative;width:100%}.regions-grid{position:relative;z-index:1}.numbers-grid,.regions-grid{grid-row-gap:30px;display:grid;grid-template-columns:1fr repeat(8,2fr) 1fr;grid-template-rows:repeat(6,140px);padding-bottom:10px;padding-top:15px;row-gap:30px}.numbers-grid{align-content:start;bottom:0;left:0;margin-top:-20px;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.number-dark{opacity:.5}.number-dark,.number-light{align-items:flex-start;display:flex;justify-content:center;padding-top:2px}.number-light{background-image:linear-gradient(90deg,#0000 .1em,#000 0)}.grid-lines{grid-row-gap:30px;bottom:-20px;display:grid;grid-template-columns:1fr repeat(8,2fr) 1fr;grid-template-rows:repeat(6,140px);left:0;padding-bottom:30px;padding-top:35px;pointer-events:none;position:absolute;right:0;row-gap:30px;top:-20px;z-index:.5}.grid-line{border-left:1px solid #ffffff80;grid-row:1/-1;height:calc(100% + 40px);position:relative;top:-20px}.region-segment{display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:1}.footer-container{align-items:center;display:flex;flex-direction:row;flex-shrink:0;justify-content:space-between;min-height:50px;padding:1%;text-align:center}img.nav-arrow-left,img.nav-arrow-right{cursor:pointer;height:24px;transition:opacity .2s;width:24px}img.nav-arrow-left{justify-self:start}img.nav-arrow-right{justify-self:end}img.nav-arrow-left:hover,img.nav-arrow-right:hover{opacity:.7}.page{background:#000;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;font-size:large;min-height:100vh;padding:0 2%;width:100vw}@font-face{font-feature-settings:"salt";font-display:swap;font-family:Generation Sans;font-style:normal;font-weight:300;src:url(https://uploads-ssl.webflow.com/630224bc2731adfdaf6fedd7/6302332e64d1f1f878a52413_GenerationSans-Light.ttf) format("truetype")}
/*# sourceMappingURL=main.bf2df34b.css.map*/