#root{margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.channels{display:flex;flex-direction:row;gap:0;height:780px;background:linear-gradient(0deg,#3c3c3c 0%,#444 100%);padding-left:10px;padding-right:10px;border-radius:3px;box-shadow:0 0 20px 10px #0000004d}.strip{width:90%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;grid-auto-flow:column;column-gap:5px;row-gap:5px;background:linear-gradient(0deg,#2b4b85 0%,#2d4d87 100%)}.strip button{width:40px;height:40px}.strip .rotaryWrapper span{font-size:12px}.strip .rotary{top:5px;left:5px;position:absolute;box-sizing:border-box;border:2px solid black;width:30px;height:30px;border-radius:21px;background:radial-gradient(circle,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 100%)}.strip .rotary.green{background-color:#48a340}.strip .rotary.blue{background-color:#2d2d87}.strip .rotary.red{background-color:#872d2d}ul.folderList{min-width:600px;display:flex;flex-direction:column;gap:10px;background-color:#0e395e;box-shadow:0 0 10px 10px #0000004d;padding:50px;border-radius:3px}.folderList li{color:#ffffffde;list-style-type:none;background-color:#1a67ab;border-radius:3px;padding:10px;cursor:pointer;text-align:left;border:1px solid transparent;box-sizing:border-box;box-shadow:5px 5px 10px #0000004d}.folderList li:hover{border:1px solid #76a4cd;box-shadow:5px 5px 10px #00000080}.fader{background-image:url(fader.svg)}.channel{display:grid;grid-auto-flow:column;justify-items:center;gap:20px;grid-template-rows:270px 50px 50px 300px 100px;width:100px;height:750px;box-sizing:border-box;background:none;border-collapse:collapse;padding-top:10px user-select: none;border-left:1px solid #999;border-right:1px solid #999}.channel .fader{height:300px;width:65px}.channel input[type=range]{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;transform:rotate(270deg);transform-origin:center center;margin-top:120px;margin-left:-120px;margin-right:0;width:300px;height:60px;background:transparent;cursor:pointer}.channel input[type=range]::-webkit-slider-runnable-track{background-color:#000;border-radius:.5rem;height:.5rem}.channel input[type=range]::-moz-range-track{background-color:#000;border-radius:.5rem;height:.5rem}.channel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.channel input[type=range]::-moz-range-thumb{border:none;border-radius:3px}.channel input[type=range]::-webkit-slider-thumb{background:linear-gradient(90deg,#111 0%,#444 10%,#ccc 15%,#444 49%,#ddd 49%,#ddd 51%,#444 51%,#222 87%,#444 87%,#ccc 100%);border:1px solid black;border-radius:3px;filter:drop-shadow(-5px 5px 4px #222);height:40px;width:80px;margin-top:-17px}.channel input[type=range]::-moz-range-thumb{background:linear-gradient(90deg,#111 0%,#444 10%,#ccc 15%,#444 49%,#ddd 49%,#ddd 51%,#444 51%,#222 87%,#444 87%,#ccc 100%);border:1px solid black;border-radius:3px;filter:drop-shadow(-5px 5px 4px #222);height:40px;width:80px;margin-top:-17px}.channel .red input[type=range]::-webkit-slider-thumb{background:linear-gradient(90deg,#200 0%,#400 10%,#c00 15%,#400 49%,#ddd 49%,#ddd 51%,#400 51%,#200 87%,#400 87%,#c00 100%)}.channel .red input[type=range]::-moz-range-thumb{background:linear-gradient(90deg,#200 0%,#400 10%,#c00 15%,#400 49%,#ddd 49%,#ddd 51%,#400 51%,#200 87%,#400 87%,#c00 100%)}.channel .blue input[type=range]::-webkit-slider-thumb{background:linear-gradient(90deg,#002 0%,#114 10%,#33e 15%,#114 49%,#ddd 49%,#ddd 51%,#116 51%,#002 87%,#114 87%,#33e 100%)}.channel .blue input[type=range]::-moz-range-thumb{background:linear-gradient(90deg,#002 0%,#114 10%,#33e 15%,#114 49%,#ddd 49%,#ddd 51%,#116 51%,#002 87%,#114 87%,#33e 100%)}.channel .meterWrapper{display:flex;flex-direction:column;justify-content:flex-end;padding:2px;background-color:#222;border-radius:3px;height:100%}.channel button{font-size:10px;display:block;background-color:#999;border:3px solid #333;color:#000;box-shadow:1px 4px 6px #00000026}.channel button.toggledRed{border-color:#6e3243;background:radial-gradient(circle,#e3a8b1 0%,#a85160 100%);filter:drop-shadow(0px 0px 5px #a85160)}.channel button.toggledYellow,.channel button.toggled{border-color:#6e410e;background:radial-gradient(circle,rgba(251,235,63,1) 0%,rgba(252,166,70,1) 100%);filter:drop-shadow(0px 0px 5px rgba(252,166,70,1))}.channel button.toggledGreen{border-color:#628820;background:radial-gradient(circle,#a4e236 0%,#94cb31 100%);filter:drop-shadow(0px 0px 5px #a4e236)}.recPlayWrapper{background-color:#111;font-size:12px;height:50px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.recPlayWrapper button{width:27px;height:27px}div.transportControls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.timelineWrapper{height:120px;padding-left:30px;padding-right:30px;background:linear-gradient(0deg,#111 0%,#222 100%);border-radius:3px;border:1px solid #aaa}.timeline{width:100%;height:100%;position:relative;background:linear-gradient(0deg,transparent 49%,#aaa 49%,#aaa 51%,transparent 51%)}.timeline .scrubber{position:absolute;top:calc(50% - 15px);width:40px;height:30px;border-radius:3px;box-sizing:border-box;border:2px solid #aaa;background:linear-gradient(90deg,#111 47%,#4ec144 47%,#4ec144 53%,#111 53%);transition:.2s left}.timeline .scrubberLine{position:absolute;top:calc(50% - 3px);left:0;height:6px;background-color:#4ec144;transition:.2s width}.timeline .marker{position:absolute;width:30px;height:30px;top:5px;box-sizing:border-box;cursor:pointer}.timeline .marker:hover .tooltip{opacity:1;visibility:visible}.timeline .tooltip{opacity:0;visibility:hidden;transition:.2s opacity;position:relative;left:-110px;top:35px;width:250px;font-size:12px;border-radius:3px;border:1px solid #aaa;box-sizing:border-box;background-color:#444;box-shadow:5px 5px 15px #0006;z-index:2}.tooltip h1{font-size:14px}.player{display:flex;flex-direction:column;gap:20px}.transport{min-width:400px;max-width:400px;border-radius:3px;border:1px solid #aaa;background-color:#111;padding:10px;display:flex;justify-content:space-between;flex-direction:column;gap:10px}.transport .screen{background-color:#baddde;color:#222;border-radius:20px;box-shadow:inset 0 0 10px #222;border:1px solid #111;box-sizing:border-box}.transport span{font-family:monospace;font-size:36px;padding:3px}.transport span.inverted{background-color:#222;color:#baddde}.markerList{overflow-y:scroll;padding-right:10px}.markerList ul{display:flex;flex-direction:column;gap:5px;padding-top:10px;padding-left:0;padding-bottom:10px;background:linear-gradient(90deg,#111 0%,#111 9%,#ddd 9%,#ddd 11%,#111 11%,#111 100%)}.markerList li{display:grid;grid-template-columns:20% 80%;justify-items:center;align-items:center;cursor:pointer;height:40px;list-style-type:none;border-radius:3px;border:1px solid #aaa;box-sizing:border-box}.markerList li .dot{display:inline-block;width:30px;height:30px;border-radius:15px;background-color:#4ec144;border:3px solid #276122;box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overscroll-behavior:none}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.3em .6em;font-size:2em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646464}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}