.instrument{display:grid;grid-template-columns:1fr 11fr;grid-gap:10px}.instrument .label{text-anchor:middle}.instrument.right{grid-template-columns:11fr 1fr}.instrument.right .scenes{order:2}.instrument.right .buttons svg{left:0}.instrument.right .buttons .send-midi{left:20px}.scenes{display:grid;background-color:var(--fg);padding:10px;grid-gap:2px;border:2px solid var(--fg)}.scenes.active{border:2px solid var(--white);border-radius:2px}.scenes .scene{font-size:12px;font-weight:700;display:flex;color:var(--fg);width:20px;height:20px;align-items:center;justify-content:center;background-color:var(--bg)}.scenes .scene.active{background:var(--color);color:#000}.scenes .scene.pending{background:blue;color:red}.points-circle{fill:none;stroke:#f5f5f5;stroke-width:3px}.sequence,.sequence .svg{position:relative}.sequence .svg{width:100%;background-color:var(--fg);height:100%;fill:var(--color);stroke:var(--color);border:2px solid var(--fg)}.sequence .svg .point{stroke:var(--fg)}.sequence .svg .point.playing{fill:red!important;stroke:red}.sequence .svg circle,.sequence .svg polygon{stroke-width:2px}.sequence .svg text{text-align:center;z-index:1000;stroke-width:.5;font-size:13px}.sequence .svg.active{border:2px solid var(--white);border-radius:2px}.arc{fill:none;stroke:var(--white);stroke-width:3px}.buttons svg{color:var(--bg);position:absolute;right:0;margin:10px;transform:scale(.8)}.buttons svg.active{color:var(--color)}.buttons .play{top:0}.buttons .settings{bottom:0}.buttons .send-midi{bottom:0;right:20px}.colored{color:var(--color)}.root[data-v-3beb5bb0]{color:#000;display:grid;grid-template-columns:11fr 1fr;background-color:var(--fg);grid-gap:10px;padding:10px}.timeline[data-v-3beb5bb0]{background:var(--bg);height:20px}.play-grid[data-v-3beb5bb0]{color:var(--bg)}.play-grid.playing[data-v-3beb5bb0]{color:var(--white)}.grid[data-v-3beb5bb0]{display:grid;grid-template-columns:repeat(15,1fr);grid-gap:5px}.grid .grid-item[data-v-3beb5bb0]{background:var(--bg);width:20px;height:20px}.grid .grid-item.active[data-v-3beb5bb0]{border:2px solid #a9a9a9;border-radius:2px}.grid .grid-item[data-v-3beb5bb0]:hover{cursor:pointer}.bpms[data-v-3beb5bb0]{background:var(--bg)}.control{height:18px;font-size:13px;font-weight:700;background:var(--color);margin:3px auto}.control svg{width:10px;height:10px}.control div{display:inline-block;width:80%}.control .arrow{fill:#000}.control .arrow.disabled{opacity:.3}.controls{border:2px solid var(--white);border-radius:2px;background:var(--fg);padding:10px;position:absolute;top:30%;margin:0 auto;width:50%;left:0;right:0}.grid-footer{position:absolute;width:100%;display:grid;grid-template-columns:repeat(2,1fr);bottom:0;color:var(--white)}.grid-footer .title{font-size:50px;margin:0}.grid-footer .authors{position:relative;text-align:left;font-size:11px}.grid-footer .authors div{position:absolute;bottom:0}.middle{position:relative}.middle .buttons{float:right;width:90px;height:45px;background:var(--fg)}:root{--fg:#303030;--bg:#161616;--white:#b9b9b9}body,html{background-color:var(--bg)}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)!important;user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}:focus{outline:none!important}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;padding:20px 20px 0;max-width:1200px;margin:0 auto}.app-grid{display:grid;grid-template-columns:4fr 5fr 4fr;grid-gap:20px}#middle{grid-row:span 2}.footer{display:grid;grid-template-columns:10fr 2fr;text-align:left;margin:10px 0;font-size:13px;color:var(--white)}.footer .lang-chooser{display:inline;text-align:right}.footer .lang-chooser .lang{color:var(--fg);display:inline}.footer .lang-chooser .lang.active{color:var(--white);font-weight:700}.footer .lang-chooser .lang:first-child{margin-right:5px}