@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(to bottom,#000,#000 80%,#333);color:#fff;font-size:16px;font-weight:200;font-family:Roboto,sans-serif;position:relative}button{background:linear-gradient(to bottom,#222,#444);border:solid 2px #444;padding:.5rem 1rem;color:inherit;border-radius:.5em;cursor:pointer}button[disabled]{opacity:.5;color:#888}button:not([disabled]):hover{background:linear-gradient(to bottom,#444,#888)}footer{font-size:.8em}footer a{color:inherit;text-decoration:none}footer li:not(:first-child){border-left:solid 1px gray;padding-left:.5rem}footer ul{display:flex;gap:.5rem;justify-content:center;align-items:center;list-style:none}html,body{min-height:100vh}input,select{font-size:inherit;font-family:inherit}select{cursor:pointer}.channel-select{width:5em}.encoder-knob{aspect-ratio:1;border-radius:100%;background:radial-gradient(#000,#777);border:solid 2px #111;position:relative}.encoder-knob:hover input,.encoder-knob:hover select,.encoder-knob.active input,.encoder-knob.active select{opacity:.5}.encoder-knob input,.encoder-knob select{opacity:0}.encoder-knob>input,.encoder-knob>select{position:absolute}.encoder-knob>input.min,.encoder-knob>select.min{left:-2em;bottom:-.5em;text-align:right}.encoder-knob>input.max,.encoder-knob>select.max{right:-1.5em;bottom:-.5em}.encoder-knob>input.channel-select,.encoder-knob>select.channel-select{left:50%;top:-1em;transform:translate(-50%,-50%)}.encoder-knob label{display:none}.encoder-knob.pressed .knob{background:#fff4}.encoder-knob .codes{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.encoder-knob .codes input{text-align:center}.encoder-knob .knob{display:block;width:70%;height:70%;margin-left:-35%;margin-top:-35%;position:absolute;left:50%;top:50%;background:#444;border:solid 2px #222;border-radius:100%}.encoder-knob .knob:before{content:"";display:block;width:10%;background:#aaa;height:20%;left:50%;top:-25%;position:absolute;margin-left:-5%}.push-button{aspect-ratio:1;border-radius:100%;background:radial-gradient(#0a6,#0a6 60%,#111);box-shadow:.2em .2em .5em #0003;border:solid 1px #111;position:relative;display:flex;justify-content:center;align-items:center}.push-button:hover input,.push-button.active input{transition:none;opacity:.8}.push-button input{opacity:0;text-align:center}.push-button input.min{position:absolute;left:-2em;bottom:-.5em;text-align:right}.push-button input.max{position:absolute;right:-1.5em;bottom:-.5em}.push-button.disabled input{display:none}.push-button.pressed{background:radial-gradient(#5ca,#5ca 60%,#111);box-shadow:inset .1em .1em .5em #00000080;transform:translate(1px,1px)}.horizontal-fader{display:flex;flex-direction:column;justify-content:center;position:relative}.horizontal-fader:hover input,.horizontal-fader:hover select,.horizontal-fader.active input,.horizontal-fader.active select{transition:none;opacity:.5}.horizontal-fader:hover .handle input,.horizontal-fader.active .handle input{opacity:1}.horizontal-fader input,.horizontal-fader select{opacity:0;text-align:center}.horizontal-fader .bg{position:absolute;z-index:0;width:82%;height:100%;left:10%;background:repeating-linear-gradient(to right,transparent,transparent 95%,#ccc 95%,#ccc),repeating-linear-gradient(to right,transparent,transparent 98%,#ccc 98%,#ccc);background-size:24% 100%;background-position:2% 0,18% 0}.horizontal-fader .handle{position:absolute;height:80%;aspect-ratio:1;background:#666;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 .5em #000c;background:linear-gradient(to right,#333,#777 47%,#fff 47% 53%,#555 53%,#333)}.horizontal-fader .handle input{background:#000!important}.horizontal-fader .min,.horizontal-fader .max,.horizontal-fader .channel-select{position:absolute;top:50%;z-index:2;transform:translate(-50%,-50%)}.horizontal-fader .min.channel-select,.horizontal-fader .max.channel-select,.horizontal-fader .channel-select.channel-select{left:50%;top:-2em}.horizontal-fader .min.min,.horizontal-fader .max.min,.horizontal-fader .channel-select.min{left:-2em}.horizontal-fader .min.max,.horizontal-fader .max.max,.horizontal-fader .channel-select.max{right:-5.5em}.horizontal-fader .track{position:relative;z-index:1;background:#000;border-radius:1rem;height:15%;width:100%}.midi-monitor{background:#8884;min-height:50em;padding:0 1rem 1rem}.midi-monitor ol{list-style:none;font-family:monospace}.midi-monitor ol>li{animation:highlight 1s;animation-delay:2s;animation-fill-mode:both}.midi-monitor .format-selector{margin-bottom:1rem;display:flex;list-style:none;justify-content:flex-end;gap:.5em;color:#888}.midi-monitor .format-selector li{border:solid 1px #888;padding:.2em .5em;cursor:pointer}.midi-monitor .format-selector li.active,.midi-monitor .format-selector li:hover{border-color:#fff;color:#fff}@keyframes highlight{0%{color:#fff}to{color:#666}}.notifications{list-style:none}.notifications .list-enter-active,.notifications .list-leave-active{transition:all .5s ease}.notifications .list-enter-from,.notifications .list-leave-to{opacity:0;transform:translate(-50%,-10em)}.notifications li{position:absolute;z-index:100;left:50%;top:10em;transform:translate(-50%);padding:.5rem 1rem;border-radius:.5rem}.notifications li.error{background:#c33}.notifications li.info{background:#0a6}.vertical-fader{display:flex;justify-content:center;position:relative}.vertical-fader:hover input,.vertical-fader:hover select,.vertical-fader.active input,.vertical-fader.active select{transition:none;opacity:.5}.vertical-fader:hover .handle input,.vertical-fader.active .handle input{opacity:1}.vertical-fader input,.vertical-fader select{opacity:0;text-align:center}.vertical-fader .bg{position:absolute;z-index:0;width:100%;height:90%;top:5%;background:repeating-linear-gradient(to bottom,transparent,transparent 95%,#ccc 95%,#ccc),repeating-linear-gradient(to bottom,transparent,transparent 98%,#ccc 98%,#ccc);background-size:100% 24%;background-position:0 2%,0 18%}.vertical-fader .handle{position:absolute;bottom:0;width:70%;aspect-ratio:1;background:#666;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 .5em #000c;background:linear-gradient(to bottom,#333,#777 47%,#fff 47% 53%,#555 53%,#333)}.vertical-fader .handle input{background:#000!important}.vertical-fader .min,.vertical-fader .max,.vertical-fader .channel-select{position:absolute;left:50%;z-index:2;transform:translate(-50%,-50%)}.vertical-fader .min.channel-select,.vertical-fader .max.channel-select,.vertical-fader .channel-select.channel-select{top:-3em}.vertical-fader .min.min,.vertical-fader .max.min,.vertical-fader .channel-select.min{bottom:-3em}.vertical-fader .min.max,.vertical-fader .max.max,.vertical-fader .channel-select.max{top:-1.5em}.vertical-fader .track{position:relative;z-index:1;background:#000;border-radius:1rem;width:15%;height:100%}main{padding:2rem;display:flex;flex-direction:column;align-items:center}main>div>.actions{padding:2rem}main>div>.actions button{width:12em}main>div>.actions ul{display:flex;list-style:none;justify-content:space-around}main aside.monitor{position:absolute;right:0;top:0;overflow-x:hidden;font-size:.8em}main aside.monitor.active h3:after{transform:rotate(90deg)}main aside.monitor h3{padding:.5rem 1rem;cursor:pointer;background:#8884;font-family:Audiowide;text-transform:uppercase;font-size:.8em;display:flex;gap:.5em;align-items:center;justify-content:flex-end}main aside.monitor h3:after{content:"▶";display:block;transition:transform .5s}main aside.monitor h3:hover{background:#8886}main h1{font-size:1.5em;margin-bottom:.5em;text-align:center;font-family:Audiowide;text-transform:uppercase}main p{text-align:center;margin-bottom:1em}main .cross-fader{display:flex;justify-content:space-between;align-items:center;padding:.5rem 3rem;margin-bottom:1em}main .cross-fader .horizontal-fader{height:4rem;width:50%}main .cross-fader .push-button{width:2.5em}main .device{background:#333;width:35rem;padding:.5rem;border-radius:.5rem;position:relative}main .device.waitingForMode .faders,main .device.waitingForMode .horizontal-fader,main .device.waitingForMode .green-buttons,main .device.waitingForMode .encoder-knob,main .device.waitingForMode .group{transition:opacity .3s;opacity:.1;pointer-events:none}main .device.waitingForMode.load .encoder-knob:nth-child(4){opacity:1}main .device.waitingForMode.send .encoder-knob:nth-child(7){opacity:1}main .device input{width:3.5em}main .device input[type=number]::-webkit-inner-spin-button,main .device input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}main .device input,main .device select{transition:all .5s;background:transparent;border:inset 1px #666;border-color:transparent;border-radius:.5em;padding:.2em .5em;color:#fff;display:block;font-size:.7em}main .device input:hover,main .device select:hover{border-color:#666;background-color:#222;opacity:1;transition:none}main .device .section{border:solid 2px #ccc;border-radius:.5rem;margin-bottom:.2rem}main .encoders{display:flex;padding:2rem .5rem;flex-wrap:wrap;width:100%;gap:5rem 2rem;justify-content:space-between;position:relative}main .encoders .encoder-knob{flex-basis:18%}main .faders{display:flex;padding:3rem .5rem 2rem;height:22rem;margin-bottom:3rem;gap:.5rem;justify-content:space-between}main .faders>*{flex-grow:1}main .green-buttons{display:flex;padding:.5rem;gap:1rem}main .green-buttons>*{flex-grow:1}main .group{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.2em;color:#000;display:flex;border-radius:.5em;background:#666;overflow:hidden}main .group select,main .group input{padding:.3em .5em;width:4em;color:inherit;background:inherit;border:none;font-size:inherit}main .group select:focus,main .group input:focus{outline:none}main .group select:hover,main .group input:hover{background-color:inherit;color:inherit}main .group select{padding-right:0;width:6em}main .instructions{list-style:none;line-height:1.3em}main .instructions kbd{color:#000;padding:0 .5em;background:#ccc;border-radius:.5em;font-family:inherit;font-weight:700}main .instructions li{position:fixed;top:-1em;left:2em;padding:.5em 1em;max-width:15em;opacity:0;font-weight:100;border-radius:.4em;background:#26413c;border:solid 1px white;animation:appear 1s;animation-fill-mode:forwards;box-shadow:.3em .3em .2em #0000004d}main .instructions li:nth-child(1){animation-delay:0s}main .instructions li:nth-child(1):after{content:"1";position:absolute;font-size:1.2em;border:solid 1px white;background:#26413c;font-weight:500;top:-1em;left:-1em;width:1.5em;height:1.5em;border-radius:1em;display:flex;justify-content:center;align-items:center}main .instructions li:nth-child(2){animation-delay:.5s}main .instructions li:nth-child(2):after{content:"2";position:absolute;font-size:1.2em;border:solid 1px white;background:#26413c;font-weight:500;top:-1em;left:-1em;width:1.5em;height:1.5em;border-radius:1em;display:flex;justify-content:center;align-items:center}main .instructions li:nth-child(3){animation-delay:1s}main .instructions li:nth-child(3):after{content:"3";position:absolute;font-size:1.2em;border:solid 1px white;background:#26413c;font-weight:500;top:-1em;left:-1em;width:1.5em;height:1.5em;border-radius:1em;display:flex;justify-content:center;align-items:center}main .instructions li:nth-child(4){animation-delay:1.5s}main .instructions li:nth-child(4):after{content:"4";position:absolute;font-size:1.2em;border:solid 1px white;background:#26413c;font-weight:500;top:-1em;left:-1em;width:1.5em;height:1.5em;border-radius:1em;display:flex;justify-content:center;align-items:center}main .instructions li:nth-child(5){animation-delay:2s}main .instructions li:nth-child(5):after{content:"5";position:absolute;font-size:1.2em;border:solid 1px white;background:#26413c;font-weight:500;top:-1em;left:-1em;width:1.5em;height:1.5em;border-radius:1em;display:flex;justify-content:center;align-items:center}@keyframes appear{0%{opacity:0}to{opacity:1}}main .status{position:absolute;padding:1em 3em;background:linear-gradient(to bottom,#03120e,#262626,#262626,#03120e);background-size:100% 50%;border:solid 2px #888;font-weight:400;animation:gleam 2s linear infinite;border-radius:.5rem;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:.2em .2em .5em #0000004d;display:flex;flex-direction:column;justify-content:center;align-items:center}main .status button{display:block}main .status .actions{display:flex;list-style:none;gap:1rem;justify-content:center}@keyframes gleam{0%{background-position:0 100%}to{background-position:0 -100%}}main .slide-enter-active,main .slide-leave-active{transition:all .3s ease-in-out}main .slide-enter-from,main .slide-leave-to{transform:translate(30em)}