#funkRoot{
  --funk-bg:#0b0b0b;
  --funk-fg:#e9e9e9;
  --funk-muted:#b6b6b6;
  --funk-rule:#2a2a2a;
  --funk-accent:#00ff66;
  --funk-warn:#ffd400;
  --funk-danger:#ff2d2d;
  --funk-max:980px;
  color:var(--funk-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:16px;
  line-height:1.6;
  background:var(--funk-bg);
  position:relative;
  min-height:100vh;
}

#funkRoot a{
  color:var(--funk-fg);
  text-decoration:none;
}
#funkRoot a:hover{ opacity:.85; }

#funkRoot .funk-wrap{
  max-width:100%;
  margin:0;
  padding:0 0 48px;
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  position:relative;
  z-index:1;
}

#funkRoot.lights-on{
  --light-a: hsla(140, 90%, 55%, 0.85);
  --light-b: hsla(320, 85%, 60%, 0.75);
  --light-c: hsla(200, 90%, 55%, 0.7);
  --light-x: 20%;
  --light-y: 30%;
  --light-x2: 75%;
  --light-y2: 35%;
  --light-x3: 40%;
  --light-y3: 75%;
  --light-angle: 120deg;
  --light-boost: 1;
  --light-opacity: 0.8;
  --light-speed: 16s;
}

#funkRoot.lights-on::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), var(--light-a) 0%, transparent 55%),
    radial-gradient(circle at var(--light-x2) var(--light-y2), var(--light-b) 0%, transparent 60%),
    radial-gradient(circle at var(--light-x3) var(--light-y3), var(--light-c) 0%, transparent 65%),
    linear-gradient(var(--light-angle), rgba(255,255,255,0.08), rgba(0,0,0,0.5));
  mix-blend-mode: screen;
  opacity:var(--light-opacity, 0.8);
  filter: brightness(var(--light-boost)) saturate(1.4);
  transition: opacity 3.6s ease-in-out, filter 4.2s ease-in-out;
  animation: lights-float var(--light-speed) ease-in-out infinite;
  z-index:0;
}

#funkRoot.lights-on.lights-pulse::before{
  animation: lights-float var(--light-speed) ease-in-out infinite, lights-pulse 8s ease-in-out;
}

#funkRoot.lights-on.lights-fade::before{
  transition: opacity 5s ease-in-out, filter 5s ease-in-out;
}

@keyframes lights-float{
  0%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.01) rotate(0.15deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

@keyframes lights-pulse{
  0%{ filter: brightness(calc(var(--light-boost) * 0.98)) saturate(1.35); }
  50%{ filter: brightness(calc(var(--light-boost) * 1.05)) saturate(1.4); }
  100%{ filter: brightness(var(--light-boost)) saturate(1.35); }
}

#funkRoot .funk-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

#funkRoot h1{
  margin:0;
  font-size:20px;
  letter-spacing:.3px;
}

#funkRoot .sub{
  color:var(--funk-muted);
  font-size:14px;
  margin-top:4px;
}

#funkRoot .funk-credit{
  margin:0;
  font-size:11px;
  letter-spacing:0.3px;
  color:var(--funk-muted);
  opacity:0.85;
}

#funkRoot .funk-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 14px 0;
}

#funkRoot .funk-stats{
  display:flex;
  gap:12px;
  font-size:11px;
  letter-spacing:0.3px;
  color:var(--funk-muted);
  opacity:0.85;
}

#funkRoot .funk-stats span{
  white-space:nowrap;
}

#funkRoot .rule{
  border-top:1px solid var(--funk-rule);
  margin:18px 0;
}

#funkRoot .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
  width:100%;
}


#funkRoot .panel{
  border:1px solid var(--funk-rule);
  border-radius:10px;
  padding:14px 14px 12px;
  background:rgba(255,255,255,0.02);
  width:100%;
  max-width:100%;
  display:block;
  box-sizing:border-box;
}

#funkRoot .transport-panel{
  background:rgba(255,255,255,0.012);
}

#funkRoot .transport-actions{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

#funkRoot .master-panel{
  background:rgba(255,255,255,0.02);
}

#funkRoot .drums-panel{
  background:rgba(255,255,255,0.032);
}

#funkRoot .drum-actions-row{
  padding-left: calc(110px + 6px);
}

#funkRoot .bass-panel{
  background:rgba(255,255,255,0.018);
}

#funkRoot .stab-panel{
  background:rgba(255,255,255,0.024);
}

#funkRoot .sampler-panel{
  background:rgba(255,255,255,0.028);
}

#funkRoot .lead-panel{
  background:rgba(255,255,255,0.036);
}

#funkRoot .drums-panel{
  overflow-x:hidden;
}

#funkRoot .panel h2{
  margin:0 0 10px;
  font-size:14px;
  color:var(--funk-muted);
  text-transform:uppercase;
  letter-spacing:1.2px;
}

#funkRoot .module-toggle{
  background:none;
  border:none;
  padding:0;
  margin:0 0 10px;
  font: inherit;
  font-size:14px;
  font-weight:600;
  color:var(--funk-muted);
  text-transform:uppercase;
  letter-spacing:1.2px;
  cursor:pointer;
}

#funkRoot .module-toggle.is-off{
  opacity:0.45;
}

#funkRoot .panel-head .module-toggle{
  margin:0;
}

#funkRoot .panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#funkRoot .panel-head h2{
  margin:0;
}

#funkRoot .panel-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#funkRoot .hidden-input{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

#funkRoot .kit-select{
  font-size:12px;
  color:var(--funk-muted);
  gap:6px;
}

#funkRoot .kit-select select{
  min-width:84px;
}

#funkRoot .tuning-select{
  font-size:12px;
  color:var(--funk-muted);
  gap:6px;
  margin-left:auto;
}

#funkRoot #dubBtn{
  margin-left:auto;
  position:relative;
  overflow:hidden;
}

#funkRoot #dubBtn::after{
  content:"";
  position:absolute;
  inset:-120% -40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(0,255,140,0.18) 40%,
    rgba(0,255,140,0.0) 70%);
  opacity:0.0;
  transform: translateX(-30%) rotate(6deg);
  animation: dubGlow 7s ease-in-out infinite;
  pointer-events:none;
}

@keyframes dubGlow{
  0%{ opacity:0; transform: translateX(-40%) rotate(6deg); }
  45%{ opacity:0.12; }
  60%{ opacity:0.28; transform: translateX(25%) rotate(6deg); }
  100%{ opacity:0; transform: translateX(40%) rotate(6deg); }
}

#funkRoot #dubBtn.dub-flash{
  animation: dubClick 0.9s ease-out;
}

@keyframes dubClick{
  0%{ background: rgba(0,255,140,0.08); box-shadow: 0 0 0 rgba(0,255,140,0); }
  45%{ background: rgba(0,255,140,0.35); box-shadow: 0 0 14px rgba(0,255,140,0.35); }
  100%{ background: rgba(0,255,140,0.08); box-shadow: 0 0 0 rgba(0,255,140,0); }
}

#funkRoot .tuning-select select{
  min-width:200px;
}

#funkRoot .row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 14px;
  align-items:center;
}

#funkRoot .row + .row{ margin-top:10px; }

#funkRoot .lfo-row{
  flex-wrap: nowrap;
  overflow-x: auto;
}

#funkRoot .lfo-row label{
  flex: 0 0 auto;
}

#funkRoot .lfo-row input[type="range"]{
  width:128px;
  min-width:128px;
}

#funkRoot .lfo-row .lfo-rate-value{
  min-width:64px;
  text-align:right;
  display:inline-block;
}

#funkRoot .export-row{
  gap:10px;
  align-items:center;
}

#funkRoot .export-right{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

#funkRoot .export-note{
  line-height:1.4;
}

#funkRoot .delay-row{
  flex-wrap:nowrap;
}

#funkRoot .delay-row label{
  flex:1 1 0;
  min-width:0;
}

#funkRoot .mix-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px 14px;
  align-items:start;
}

#funkRoot .mix-knob{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

#funkRoot .mix-knob.is-disabled{
  opacity:0.35;
}

#funkRoot .module-control.is-disabled{
  opacity:0.35;
}

#funkRoot .mix-actions{
  display:flex;
  gap:6px;
}

#funkRoot button.mix-btn{
  font-size:11px;
  line-height:1;
  padding:4px 7px;
  border:1px solid var(--funk-rule);
  border-radius:6px;
  background:#101010;
  color:var(--funk-muted);
}

#funkRoot button.mix-btn.active{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.12);
  color: var(--funk-fg);
}

#funkRoot button.mix-btn:disabled{
  cursor:not-allowed;
  opacity:0.5;
}

#funkRoot .mix-knob .knob{
  width:40px;
}

#funkRoot .mix-label{
  font-size:11px;
  color:var(--funk-muted);
  letter-spacing:0.4px;
}

#funkRoot .mix-ghost{
  min-height:1px;
}

#funkRoot .mix-row{
  flex-wrap:nowrap;
}

#funkRoot .mix-row label{
  flex:1 1 0;
  min-width:0;
}

#funkRoot .control-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:12px 14px;
  align-items:center;
}

#funkRoot .control-grid label{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  white-space:normal;
}

#funkRoot .control-grid label > input[type="range"],
#funkRoot .control-grid label > select,
#funkRoot .control-grid label > input[type="number"]{
  width:100%;
  max-width:100%;
}

#funkRoot .control-grid label > .tiny{
  align-self:flex-end;
}

#funkRoot .knob-strip{
  overflow-x:hidden;
  overflow-y:visible;
  padding:6px 0 2px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

#funkRoot .knob-grid-wrap{
  display:grid;
  grid-template-columns: 70px auto;
  align-items:end;
}

#funkRoot .knob-grid-wrap .step-row-label{
  min-height:36px;
  color:var(--funk-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
}

#funkRoot .knob-grid-wrap .knob-grid{
  padding-left:0;
}

#funkRoot .knob-grid{
  display:grid;
  grid-template-columns: repeat(16, 40px);
  gap:8px;
  align-items:end;
  min-width: 760px;
  justify-items:center;
}

#funkRoot .knob{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:40px;
  position:relative;
  --knob-angle: 0deg;
  touch-action:none;
}

#funkRoot .knob.off-len{
  opacity:.35;
  pointer-events:none;
}

#funkRoot .knob-range{
  position:absolute;
  width:36px;
  height:36px;
  opacity:0;
  cursor:pointer;
  left:0;
  top:0;
  pointer-events:none;
}

#funkRoot .knob-ui{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--funk-rule);
  background: radial-gradient(circle at 30% 30%, #1a1a1a, #0d0d0d);
  position:relative;
  touch-action:none;
  cursor:pointer;
}

#funkRoot .knob-ui::after{
  content:"";
  position:absolute;
  width:2px;
  height:12px;
  background:var(--funk-accent);
  top:6px;
  left:50%;
  transform: translateX(-50%) rotate(var(--knob-angle));
  transform-origin: 50% 12px;
}

#funkRoot .lead-knob-controls,
#funkRoot .knob-controls{
  margin-top:6px;
}

#funkRoot .step-row{
  display:grid;
  grid-template-columns: 70px auto;
  gap:6px 0;
  align-items:center;
}

#funkRoot .step-row-label{
  font-size:11px;
  color:var(--funk-muted);
  text-transform:uppercase;
  letter-spacing:1px;
}

#funkRoot .step-row-grid{
  display:grid;
  grid-template-columns: repeat(16, 40px);
  gap:8px;
  min-width: 760px;
  align-items:center;
  justify-items:center;
}

#funkRoot .step-toggle{
  width:24px;
  height:24px;
  padding:0;
  border-radius:6px;
  border:1px solid var(--funk-rule);
  background:#0f0f0f;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#funkRoot .step-toggle.on{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.10);
}

#funkRoot .step-toggle.accent.on{
  border-color: rgba(255,212,0,0.6);
  background: rgba(255,212,0,0.12);
}

#funkRoot .step-toggle.slide.on{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.08);
}

#funkRoot .step-toggle:disabled{
  opacity:.35;
  cursor:default;
}

#funkRoot label{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--funk-muted);
  font-size:13px;
  white-space:nowrap;
}

#funkRoot input[type="range"]{
  width:128px;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background:#1a1a1a;
  outline:none;
}

#funkRoot input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:transparent;
}

#funkRoot input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:transparent;
  border:2px solid var(--funk-accent);
  box-shadow:0 0 0 2px rgba(0,0,0,0.35);
  margin-top:-5px;
}

#funkRoot input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#1a1a1a;
}

#funkRoot input[type="range"]::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:var(--funk-accent);
}

#funkRoot input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:transparent;
  border:2px solid var(--funk-accent);
  box-shadow:0 0 0 2px rgba(0,0,0,0.35);
}

#funkRoot input[type="number"],
#funkRoot select,
#funkRoot button{
  font: inherit;
  background:#0f0f0f;
  color:var(--funk-fg);
  border:1px solid var(--funk-rule);
  border-radius:8px;
  padding:7px 10px;
}

#funkRoot button{
  cursor:pointer;
  padding:8px 12px;
}
#funkRoot button:hover{ opacity:.92; }
#funkRoot button:disabled{
  cursor:not-allowed;
  opacity:0.45;
  color:var(--funk-muted);
  border-color:var(--funk-rule);
  background:#121212;
}
#funkRoot button:disabled:hover{
  opacity:0.45;
}
#funkRoot button.primary{
  border-color: rgba(0,255,102,0.35);
}
#funkRoot button.danger{
  border-color: rgba(255,45,45,0.45);
}

#funkRoot .btn-compact{
  padding:4px 10px;
  font-size:13px;
  line-height:1.1;
}

#funkRoot .btn-compact.active{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.10);
  color: var(--funk-fg);
}

#funkRoot .lights-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#funkRoot .btn-compact.is-exporting{
  border-color: rgba(255,45,45,0.7);
  color: var(--funk-fg);
  animation: exportFlash 0.8s ease-in-out infinite;
}

#funkRoot .btn-compact.is-dubbing{
  border-color: rgba(255,255,255,0.7);
  color: var(--funk-fg);
  animation: dubFlash 0.9s ease-in-out;
}

#funkRoot .waza-btn{
  border-color: rgba(255,212,0,0.5);
  animation: wazaFlash 1.2s ease-in-out infinite;
}

@keyframes wazaFlash{
  0%{ background: rgba(255,212,0,0.08); box-shadow: 0 0 0 rgba(255,212,0,0); }
  45%{ background: rgba(255,120,0,0.18); box-shadow: 0 0 10px rgba(255,120,0,0.25); }
  70%{ background: rgba(255,45,45,0.28); box-shadow: 0 0 12px rgba(255,45,45,0.35); }
  100%{ background: rgba(255,212,0,0.08); box-shadow: 0 0 0 rgba(255,212,0,0); }
}

@keyframes exportFlash{
  0%{ background: rgba(255,45,45,0.08); }
  50%{ background: rgba(255,45,45,0.35); }
  100%{ background: rgba(255,45,45,0.08); }
}

@keyframes dubFlash{
  0%{ background: rgba(255,255,255,0.04); box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%{ background: rgba(255,255,255,0.35); box-shadow: 0 0 12px rgba(255,255,255,0.35); }
  100%{ background: rgba(255,255,255,0.04); box-shadow: 0 0 0 rgba(255,255,255,0); }
}

#funkRoot .knob-step{
  width:24px;
  height:24px;
  padding:0;
  border-radius:6px;
  border:1px solid var(--funk-rule);
  background:#0f0f0f;
  color:var(--funk-muted);
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#funkRoot .knob-step.on{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.10);
  color: var(--funk-fg);
}

#funkRoot .knob-readout{
  font-size:10px;
  color:var(--funk-muted);
  text-align:center;
  line-height:1.2;
  max-width:60px;
  white-space:nowrap;
  opacity:0;
  transition: opacity 120ms ease;
  pointer-events:none;
}

#funkRoot .knob.show-readout .knob-readout,
#funkRoot .knob.dragging .knob-readout{
  opacity:1;
}

#funkRoot .knob.playing .knob-ui{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}

#funkRoot .tiny{
  font-size:12px;
  color:var(--funk-muted);
}

#funkRoot .status{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  font-size:13px;
  color:var(--funk-muted);
}

#funkRoot .pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--funk-rule);
  background:rgba(255,255,255,0.02);
}

#funkRoot .pill-compact{
  padding:4px 10px;
  font-size:13px;
  line-height:1.1;
}

#funkRoot .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#555;
}

#funkRoot .dot.on{ background: var(--funk-accent); }
#funkRoot .dot.warn{ background: var(--funk-warn); }
#funkRoot .dot.danger{ background: var(--funk-danger); }

/* Sequencers */
#funkRoot .seq{
  overflow:auto;
  padding-bottom:4px;
  width:100%;
  max-width:100%;
}

#funkRoot .drums-panel .seq{
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

#funkRoot .drums-panel .seq::-webkit-scrollbar{
  display:none;
}

#funkRoot .drums-panel .seq-grid{
  min-width:0;
  width:100%;
}

#funkRoot .seq-grid{
  display:grid;
  grid-template-columns: 110px repeat(16, 26px);
  gap:6px;
  align-items:center;
  min-width: 110px;
}

#funkRoot .seq-grid.has-vol{
  grid-template-columns: 110px repeat(16, 26px) 56px 56px 56px 56px 56px;
}

#funkRoot .seq-grid .head{
  color:var(--funk-muted);
  font-size:12px;
  text-align:center;
  opacity:.9;
}

#funkRoot .seq-grid .head.vol{
  text-align:center;
}

#funkRoot .seq-grid .head.len{
  text-align:center;
}

#funkRoot .seq-grid .head.pitch{
  text-align:center;
}

#funkRoot .track-name{
  color:var(--funk-muted);
  font-size:13px;
}

#funkRoot .track-vol,
#funkRoot .track-len,
#funkRoot .track-pitch,
#funkRoot .track-rev,
#funkRoot .track-decay{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}


#funkRoot .step{
  width:26px;
  height:26px;
  border-radius:7px;
  border:1px solid var(--funk-rule);
  background:#0f0f0f;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
}

#funkRoot .step.on{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.10);
}

#funkRoot .step.vel-1{
  border-color: rgba(255,212,0,0.65);
  background: rgba(255,212,0,0.18);
}

#funkRoot .step.vel-2{
  border-color: rgba(255,153,51,0.7);
  background: rgba(255,153,51,0.18);
}

#funkRoot .step.vel-3{
  border-color: rgba(255,45,45,0.7);
  background: rgba(255,45,45,0.18);
}

#funkRoot .step.playing::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.25);
  pointer-events:none;
}

#funkRoot .step.off-len{
  opacity:.25;
  pointer-events:none;
}

#funkRoot .note-step{
  width:26px;
  height:26px;
  border-radius:7px;
  border:1px solid var(--funk-rule);
  background:#0f0f0f;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:12px;
  color:var(--funk-muted);
  user-select:none;
  position:relative;
  box-sizing:border-box;
}

#funkRoot .note-step.on{
  border-color: rgba(0,255,102,0.45);
  background: rgba(0,255,102,0.10);
  color: var(--funk-fg);
}

#funkRoot .note-step.playing::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.25);
  pointer-events:none;
}

#funkRoot .note-step.off-len{
  opacity:.25;
  pointer-events:none;
}

#funkRoot .note-editor{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
  margin-top:10px;
}

#funkRoot .note-editor select{
  min-width:150px;
}

#funkRoot .flash-green{
  color:var(--funk-accent);
  animation: greenblink 1.15s steps(2,end) infinite;
}

@keyframes greenblink{
  0%{ opacity:1; }
  50%{ opacity:.25; }
  100%{ opacity:1; }
}

#funkRoot .two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

@media (max-width: 860px){
  #funkRoot .grid{ grid-template-columns: 1fr; }
  #funkRoot .two-col{ grid-template-columns: 1fr; }
  #funkRoot .seq-grid{ grid-template-columns: 92px repeat(16, 24px); }
  #funkRoot .seq-grid.has-vol{ grid-template-columns: 92px repeat(16, 24px) 44px 44px 44px 44px 44px; }
  #funkRoot .drum-actions-row{ padding-left: calc(92px + 6px); }
  #funkRoot .step,
  #funkRoot .note-step{ width:24px; height:24px; border-radius:7px; }
  #funkRoot input[type="range"]{ width:120px; }
}