body { background:black; padding: 30px; font-family: 'input_mono_regular'; font-size: 11px; line-height: 15px; -webkit-app-region: drag; transition: background-color 500ms; overflow: hidden;}

/* Mixer */

#mixer { line-height: 15px; color:#666; position: relative; text-transform: uppercase;}
#mixer > div { position: absolute; width: 95px}
#mixer > div.channel { position: absolute; }
#mixer > div.effect { width: 85px }
#mixer > div .cid { font-family: 'input_mono_medium'; font-weight: normal; }
#mixer > div canvas { position: absolute; right: -10px;top: 0.5px;}
#mixer span { padding: 0px 2.55px; }

/* Commander */

#commander input { padding: 0px 5px 0px 2.5px; width: calc(100vw - 70px); background: transparent; }

/* Recorder */

#pilot.recording #recorder { animation: blink 500ms linear infinite; }

#pilot #mixer { columns:1 !important; min-width: 0px }
#pilot #mixer > div { max-width: 100%}

#mixer .channel { top:calc(var(--id) * 15px + 15px); left:0px; }
#mixer .effect { top:calc(var(--id) *15px + 15px); left:calc(1 * 110px) }
#mixer #synth_head { top: 0px; left:0px; }
#mixer #effect_head { top: 0px; left:calc(1 * 110px) }

#recorder { position: absolute; top: calc(34 * 15px); color: #333; left: 30px; font-family: 'input_mono_medium'; font-weight: normal;}
#commander { top: calc(34 * 15px); left: 55px; position: absolute; line-height: 11px;  }

