body{margin:0;min-height:100vh;background-image:url(/EasySynth/Background.jpg);background-repeat:no-repeat;background-position:center center;background-size:cover;overflow:hidden}.synth-chassis{position:relative;width:100vw;height:100vh;box-sizing:border-box;overflow:hidden}.knob-control{position:absolute;width:4vw;height:auto;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:.8vw;color:#333;white-space:nowrap;display:flex;flex-direction:column;align-items:center;text-align:center}.knob-control p{margin:0 0 5px}.knob-image{width:4vw;height:4vw;aspect-ratio:1 / 1;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;will-change:transform;filter:drop-shadow(-5px -5px 10px #000000);transform-origin:50% 50%}.switch-control{position:absolute;width:3vw;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:.8vw;color:#333;white-space:nowrap;text-align:center;display:flex;flex-direction:column;align-items:center}.switch-control p{margin:0 0 .3vw;line-height:1}.switch-wrapper{position:relative;width:100%;display:inline-block}.switch-nut{width:100%;height:auto;display:block;position:relative;z-index:1}.switch{position:absolute;top:50%;width:100%;height:auto;z-index:2;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .1s ease}.switch[data-works=off],.switch[data-works=on]{transform:translateY(-50%)}.slider-control{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:10;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:.8vw;color:#333;white-space:nowrap;text-align:center}.slider-control p{margin:0 0 5px}.slider-wrapper{position:relative;display:inline-block}.slider{display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.cap{position:absolute;bottom:0;left:50%;transform:translate(-50%);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none;will-change:transform}.cap:active{cursor:grabbing}#start{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;color:#f5f5f5;font-size:20vw;font-family:Arial,Helvetica,sans-serif;text-decoration:underline;border:none;cursor:pointer;z-index:9999}#oscilloscope-canvas{width:100%;height:100%;display:block}#visualizer-modes{position:absolute;bottom:6px;right:6px;display:flex;gap:4px;z-index:10}#sampleOptions{background-color:#000;color:#0f8;font-family:Arial,sans-serif;text-align:center;font-size:.8vw;border:1px solid #444;border-radius:6px;position:absolute;left:38%;top:28%;height:1.8vw;width:6vw;z-index:10}#sampleAddOptions{position:absolute;left:44.5%;top:28%;height:1.8vw;width:1.8vw;cursor:pointer;z-index:10}.switch-control{position:absolute;width:3vw;font-family:Arial,sans-serif;font-weight:700;font-size:.75vw;color:#333;text-align:center;z-index:5}.knob-control{position:absolute;width:4vw;height:4vw;font-family:Arial,sans-serif;font-weight:700;font-size:.75vw;color:#333;display:flex;flex-direction:column;align-items:center;text-align:center}.knobSegment{border:4px solid #929aa5;border-radius:30px;position:absolute}#asdr{position:absolute;top:66%;right:10%;width:27vw;height:9vw}.knobSegment .segment-label{position:absolute;bottom:-.7em;left:50%;transform:translate(-50%);background-color:#2b2b2b;padding:0 10px;color:#929aa5;font-family:sans-serif;font-size:.9vw;font-weight:700;letter-spacing:2px;text-transform:uppercase;pointer-events:none}.noteIs-hovered{opacity:.2}#sampleAddOptions{position:absolute;left:46%;top:31%;height:2vw;width:2vw}.multiple-options{background-color:#000;color:green;font-family:Arial,Helvetica,sans-serif;text-align:center;font-size:1vw;border-radius:8px;position:absolute}#sampleOptions{left:39%;top:31%;height:4vh;width:6vw}#keyboardOptions{left:80%;top:5%}#tempo{background-color:#000;width:8vw;height:5vw;position:absolute;left:39%;top:5%;overflow:hidden;display:flex;align-items:center;justify-content:center}#tempoValue{color:red;font-size:3vw;font-family:Arial,Helvetica,sans-serif;line-height:1;text-shadow:0 0 3px #ff0000,0 0 9px #ff0000;position:absolute;left:6%}.tempoButton{width:2vw;height:2vw;cursor:pointer}#tempoUp{position:absolute;right:.5%;top:0%}#tempDown{position:absolute;right:.5%;bottom:0%}#tempoAside{position:absolute;right:0%;width:2vw}.media{width:2vw;height:2vw;cursor:pointer}#play{position:absolute;top:15%;left:40%}#pause{position:absolute;top:15%;left:42%}#record{position:absolute;top:15%;left:44%}@media screen and (max-width:768px){.knob-control,.switch-control,.slider-control,.knobSegment,#oscilloscope,#tempo,#sampleOptions,#sampleAddOptions,.media{display:none!important}html,body{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden!important;touch-action:none}.synth-chassis{width:100vw;height:100vh;position:relative;overflow:hidden}.white-key-mobile,.black-key-mobile{object-fit:fill}}#oscilloscope{position:absolute;top:4%;left:3%;width:32vw;height:20vw;background-color:#000;border-radius:12px;overflow:hidden}.viz-btn{position:absolute;width:4vw;height:2vw;object-fit:contain;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s ease,filter .15s ease}.viz-btn:hover{filter:brightness(1.2);transform:translateY(-1px)}.viz-btn.active{filter:brightness(1.4) drop-shadow(0 0 5px rgba(0,0,0,.8))}#viz-wave{top:22.5vw;left:21.5%}#viz-FFT{top:22.5vw;left:26%}#viz-stereo{top:22.5vw;left:30.5%}