@font-face{font-family:Segment7;src:url(/wr-110/fonts/Segment7Standard.woff) format("woff")}*{box-sizing:border-box}body,html{height:100vh;background-color:#6e5e5e}.container{height:100%;flex-direction:row}#outline,.container{display:flex;justify-content:space-evenly;align-items:center}#outline{width:900px;height:556.23062px;background-color:#d3d3d3;flex-direction:column}#steps{height:100px}#panel,#steps{width:100%;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}#panel{height:481.39655px}.step{width:46.25px;height:74.83407px;background-color:#b62592}.step.active{background-color:#df62c0}.led{height:10px;margin:5px auto;clip-path:circle(5px);background-color:red}#left-panel,#right-panel{height:100%;width:25%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}#mid-panel{width:50%;flex-direction:row}#mid-panel,.track{height:100%;display:flex}.track{width:12.5%;flex-direction:column;justify-content:space-evenly;align-items:center}.pot{height:12.5%;width:100%}.fader{height:40%;width:100%;position:relative}.select{height:10%;width:100%}#tempo{height:25%;width:100%;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}#tempo-pot,#tempo-pot-fine{width:50px;height:50px}#tempo-display{width:80px;height:50px;color:red;font-family:Segment7;font-size:40px;text-align:right;user-select:none;background-color:#000;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}#tempo-segments{padding-top:7px}#groove{height:50%;width:100%}#transport{height:25%;width:100%;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}#play,#rec,#stop{height:50px;width:50px}#output,#pattern,#sequence{width:100%}#output,#pattern{width:100%;height:25%}#sequence{width:100%;height:50%}#pattern{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;flex-wrap:wrap;align-content:space-around}.pattern-pad{width:25%;height:50%}.play-picto{clip-path:polygon(20% 20%,80% 50%,20% 80%)}.play-picto,.rec-picto{background-color:#000;width:100%;height:100%}.rec-picto{clip-path:circle(30%)}.stop-picto{clip-path:polygon(20% 20%,80% 20%,80% 80%,20% 80%)}.pot-handle,.stop-picto{background-color:#000;width:100%;height:100%}.pot-handle{clip-path:circle(35%)}.pot-cursor{background-color:#ff4500;width:100%;height:100%;clip-path:polygon(45% 60%,55% 60%,55% 90%,45% 90%);transform:rotate(45deg)}.fader-handle{position:absolute;height:15px;width:100%;background-color:brown}#play.active{background-color:green}#rec.active{background-color:red}.pattern-pad.active{background-color:#8a2be2}.led.active,.select.active{background-color:#ff0}.viz{border:1px solid #000}.pot.viz{border:none}