@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;padding-bottom:2rem;overflow-x:hidden}button{background:#333;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,#222,#444)}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;background-color:#222;border:inset 1px #666;color:#fff;display:block;border-radius:.5em;padding:.2em .5em}input:focus,select:focus{outline:solid 1px #26aa3C;background-color:#222;opacity:1!important}select{cursor:pointer}@font-face{font-family:FontAwesome;src:url(/assets/fa-solid-900-8GirhLYJ.woff2) format("woff2")}.channel-select{width:5em}.edit-window:not(.dragging){transition:transform .3s ease-in-out}.edit-window .close{position:absolute;top:0;right:0;background:none;border:none;color:#888;padding:.5rem}.edit-window .close:hover{background:none;border:none;color:#fff}.edit-window h3{font-family:Audiowide;text-transform:uppercase;font-size:.7em;margin-bottom:1em;text-align:center;cursor:move;-webkit-user-select:none;user-select:none}.edit-window form{background:#333;border:solid 2px #ccc;border-radius:.5rem;padding:.5rem 1rem 1rem;box-shadow:.3em .3em .2em #0000004d}.edit-window form>div{display:flex;align-items:center;gap:1em;justify-content:space-between}.edit-window form input,.edit-window form select{width:5em}.encoder-knob{aspect-ratio:1;border-radius:100%;background:radial-gradient(#000,#777);border:solid 2px #111;position:relative}.encoder-knob span{position:absolute}.encoder-knob span.cc{right:0;top:-1em}.encoder-knob span.channel{left:0;top:-1em}.encoder-knob label{display:none}.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;flex-direction:column;justify-content:center;align-items:center}.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 .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 span{background:#000!important;padding:.4em}.horizontal-fader .channel{position:absolute;z-index:2;transform:translate(-50%,-50%);left:50%;top:-2em}.horizontal-fader .track{position:relative;z-index:1;background:#000;border-radius:1rem;height:15%;width:100%}.midi-monitor{background:#444c;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 ol>li:first-child{color:#fff!important}.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 .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 span{background:#000!important;padding:.4em}.vertical-fader .channel{position:absolute;left:50%;z-index:2;transform:translate(-50%,-50%);top:-1em}.vertical-fader .track{position:relative;z-index:1;background:#000;border-radius:1rem;width:15%;height:100%}header .actions button{border:none;border-radius:0;-webkit-font-smoothing:antialiased}header .actions button:before{content:"";font-family:FontAwesome}header .actions button span{display:none}header{display:flex;justify-content:space-between;background:#333;position:relative}header h1{font-size:1.2em;text-align:center;position:absolute;left:50%;transform:translate(-50%);font-family:Audiowide;text-transform:uppercase}@media(min-width:700px){header h1{font-size:1.5em}}header input[type=file]{display:none}header .actions{list-style:none;display:flex}header .actions button{border-right:solid 1px #666;color:#fff8;height:100%}header .actions button:hover{color:#fff}header .actions .load button:before{content:""}header .actions .playback button:before{content:""}header .actions .playback.active button{background:#050}header .actions .new button:before{content:""}header .actions .save button:before{content:""}header .midi-monitor{position:absolute;right:0;top:100%;z-index:30;font-size:.8em}header aside.monitor.active h3:after{transform:rotate(90deg)}header aside.monitor h3{padding:.5rem 1rem;cursor:pointer;font-family:Audiowide;text-transform:uppercase;font-size:.8em;display:flex;gap:.5em;align-items:center;justify-content:flex-end}header aside.monitor h3:after{content:"▶";display:block;transition:transform .5s}header aside.monitor h3:hover{background:#8886}header aside.other-devices{position:absolute;left:0;top:100%;font-size:.8em;background:#8884;padding:1em}header aside.other-devices h3{margin-bottom:1em;font-family:Audiowide;text-transform:uppercase;font-size:.8em;gap:.5em}header aside.other-devices li{display:flex;gap:1em;align-items:center}header aside.other-devices ul{list-style:none}main{padding:1rem;display:flex;flex-direction:column;align-items:center}@media(min-width:700px){main{padding:2rem}}main>div>.actions{padding:2rem}main>div>.actions button{width:14em;margin-bottom:1em;display:flex;justify-content:center;gap:.5em;align-items:center}main>div>.actions button:before{font-family:FontAwesome;-webkit-font-smoothing:antialiased}main>div>.actions button.read:before{content:""}main>div>.actions button.write:before{content:""}main>div>.actions li{position:relative}main>div>.actions ul{display:flex;list-style:none;justify-content:space-around}main>div>.actions .warning{position:absolute;left:50%;top:-1em;white-space:nowrap;transform:translate(-50%,-50%);background:#c44;font-size:.8em;padding:.2em 1em;border-radius:.5em}main p{text-align:center;margin-bottom:1em}main .cross-fader{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;margin-bottom:1em}@media(min-width:500px){main .cross-fader{padding:.5rem 3rem}}main .cross-fader .horizontal-fader{height:4rem;width:50%}main .cross-fader .push-button{width:2.5em}main .device{background:#333;padding:.5rem;border-radius:.5rem;position:relative}main .device.playbackMode .control:hover{outline:none}main .device.waitingForMode .faders,main .device.waitingForMode .horizontal-fader,main .device.waitingForMode .green-buttons,main .device.waitingForMode .encoder-wrapper,main .device.waitingForMode .group{transition:opacity .3s;opacity:.1;pointer-events:none}main .device.waitingForMode.load .encoder-wrapper:nth-child(4 of.encoder-wrapper){opacity:1}main .device.waitingForMode.send .encoder-wrapper:nth-child(7 of.encoder-wrapper){opacity:1}main .device input{max-width:3em}main .device input[type=number]::-webkit-inner-spin-button,main .device input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}main .device .control{-webkit-user-select:none;user-select:none}main .device .control:hover{outline:solid rgba(255,255,255,.2666666667) 1px;cursor:pointer}main .device .control:hover span{opacity:1}main .device .control.editing{outline:solid 2px #26aa3C}main .device .control.modified{outline:dashed 1px red}main .device .control.modified.editing{outline:dashed 2px #26aa3C}main .device .control span{opacity:0;font-size:.7em;color:#ccc}main .device .section{border:solid 2px #ccc;border-radius:.5rem;margin-bottom:.2rem}main .edit-window{position:absolute;left:0;top:0;z-index:10}main .encoders{display:flex;padding:2rem .5rem;flex-wrap:wrap;width:100%;gap:5rem 2rem;justify-content:space-between;position:relative}main .encoders .encoder-wrapper{flex-basis:17%;flex-grow:1;position:relative}main .encoders .push-button{position:absolute;top:50%;width:70%;box-shadow:none;background:#444!important;flex-direction:column;left:50%;transform:translate(-50%,-50%)}main .encoders .push-button.pressed{background:radial-gradient(#ccc6,#ccc6 60%,#111)!important}main .encoders .push-button .channel-select{position:static}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:.5rem}main .green-buttons>*{flex-grow:1}main .green-buttons span{color:#000!important;display:block}main .green-buttons .cc{font-size:.6em!important}@media(min-width:700px){main .green-buttons{gap:1rem}}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;color:inherit;background:inherit;border:none;font-size:inherit}main .group select:hover,main .group input:hover{background-color:inherit;color:inherit}main .group input{max-width:6em}main .group select{padding-right:0;width:1em;background:#555;position:relative}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:absolute;z-index:20;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}main .instructions li.right-anchor{left:auto;right:1em;top:-4em}@keyframes appear{0%{opacity:0}to{opacity:1}}main .status{position:absolute;z-index:20;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}main .wrapper{width:100%;max-width:35rem}@keyframes gleam{0%{background-position:0 100%}to{background-position:0 -100%}}main .appear-enter-active form,main .appear-leave-active form{transition:all .3s ease-in-out}main .appear-enter-from form,main .appear-leave-to form{opacity:0;transform:scale(.8) translateY(-1em)}.slide-enter-active,.slide-leave-active{transition:all .3s ease-in-out}.slide-enter-from,.slide-leave-to{transform:translate(30em)}