.round-button{position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);-webkit-transform:translateZ(0);transition:all .15s ease-out}.large-encoder{position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:all .12s ease-out}.round-button svg,.large-encoder svg{shape-rendering:auto;text-rendering:optimizeQuality;image-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);-webkit-transform:translateZ(0);width:100%;height:100%}.icon-track,.icon-preset,.icon-transport,.icon-navigation,.icon-function{color:#000;transition:all .2s ease-out}.round-button:hover{transform:translateZ(0) translateY(-.5px)}.large-encoder:hover{transform:translateZ(0) scale(1.002)}.button-track:hover .icon-track,.button-preset:hover .icon-preset,.button-transport:hover .icon-transport,.button-navigation:hover .icon-navigation,.button-function:hover .icon-function{color:#1a1a1a;opacity:.85}.round-button[data-button-name=Record] .icon-transport{color:#ef3e23}.round-button[data-button-name=Record]:hover .icon-transport{color:#ef3e23;opacity:.9}.round-button:active{transform:translateZ(0) translateY(.25px);transition:all .05s ease-out}.large-encoder:active{transform:translateZ(0) scale(.998);transition:all .05s ease-out}.cluster-screen{width:100%;height:100%;background:#000;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}.cluster-parameters{display:flex;justify-content:center;align-items:center;padding:12px 10px 4px 20px;flex:0 0 auto;gap:20px}.cluster-param{display:flex;flex-direction:column;align-items:center;gap:8px}.param-circle{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:all .3s ease;box-shadow:0 2px 8px #0006}.blue-circle{background-color:#2c4362}.brown-circle{background-color:#8b663c}.gray-circle{background-color:#a1a3a5}.red-circle{background-color:#cb2427}.param-circle .param-value{color:#fff;font-family:Courier New,monospace;font-size:14px;text-shadow:0px 1px 2px rgba(0,0,0,.7)}.gray-circle .param-value{color:#000;text-shadow:0px 1px 2px rgba(255,255,255,.3)}.param-label{font-family:Courier New,monospace;font-size:8px;font-weight:700;text-align:center;letter-spacing:.8px;text-shadow:0px 1px 2px rgba(0,0,0,.8);text-transform:uppercase}.waves-param .param-label{color:#2c4362}.waveenv-param .param-label{color:#8b663c}.spread-param .param-label{color:#a1a3a5}.unitor-param .param-label{color:#cb2427}.cluster-wavelines{flex:1;position:relative;padding:2px 8px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:40px}.wave-line{width:98%;height:8px;position:relative;opacity:.85;transition:opacity .3s ease;overflow:visible;display:flex;align-items:center;justify-content:center}.wave-line svg{width:100%;height:auto;transform:scaleY(.8)}.blue-wave{animation:wave-pulse 4s ease-in-out infinite;animation-delay:0s}.brown-wave{animation:wave-pulse 4s ease-in-out infinite;animation-delay:.5s}.gray-wave{animation:wave-pulse 4s ease-in-out infinite;animation-delay:1s}.red-wave{animation:wave-pulse 4s ease-in-out infinite;animation-delay:1.5s}@keyframes wave-pulse{0%,to{opacity:.7;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}.cluster-param:hover .param-circle{transform:scale(1.05);box-shadow:0 4px 16px #fff3}.cluster-param:hover .param-label{color:#fff}.param-value{transition:all .3s ease}.param-value.changing{color:gold;transform:scale(1.15)}.rotary-dial{display:flex;flex-direction:column;align-items:center;gap:8px;user-select:none}.dial-container{position:relative;width:30px;height:30px;cursor:pointer;transition:all .2s ease}.dial-container:hover{transform:scale(1.05)}.dial-container:active{transform:scale(.98)}.dial-background{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:transform .1s ease-out;transform-origin:49% 59%}.dial-background svg{width:100%;height:100%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.dial-center{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:transparent;border:none;pointer-events:none;z-index:1}.dial-value{font-family:Courier New,monospace;font-size:12px;color:#fff;text-shadow:0px 1px 3px rgba(0,0,0,1)}.spread-dial .dial-value{color:#000;text-shadow:0px 1px 3px rgba(255,255,255,.9)}.dial-label{font-family:Courier New,monospace;font-size:8px;font-weight:700;text-align:center;letter-spacing:.8px;text-shadow:0px 1px 2px rgba(0,0,0,.8);text-transform:uppercase;transition:color .2s ease}.waves-label{color:#2c4362}.waveenv-label{color:#8b663c}.spread-label{color:#a1a3a5}.unitor-label{color:#cb2427}.rotary-dial:hover .dial-label{color:#fff}.rotary-dial:hover .dial-value{color:gold}.rotary-dial.dragging .dial-container{cursor:grabbing}.rotary-dial.dragging .dial-background{transition:none}.dial-value.changing{color:gold;transform:scale(1.2);transition:all .2s ease}@media (max-width: 768px){.rotary-dial{gap:6px}.dial-container{width:25px;height:25px}.dial-center{width:15px;height:15px}.dial-value,.dial-label{font-size:7px}}.adsr-screen{width:100%;height:100%;background:#000;position:relative;overflow:hidden;display:flex;flex-direction:column;color:#cdd0c3;font-family:Courier New,monospace;padding:4px}.adsr-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px;min-height:0}.curve-type-indicator{font-size:8px;color:#666;text-transform:uppercase;letter-spacing:1px;opacity:.7;font-family:Courier New,monospace}.adsr-title{font-size:12px;font-weight:400;margin:0;color:#cdd0c3;letter-spacing:.5px}.adsr-info{flex:1;margin-left:20px}.adsr-description{font-size:8px;color:#8b8b8b;line-height:1.3;display:block;text-align:right;max-width:180px;margin-left:auto}.adsr-buttons{display:flex;justify-content:flex-start;align-items:center;gap:12px;margin-bottom:2px;padding-left:4px;min-height:0}.button-group{display:flex;align-items:center;gap:4px}.button-indicator{width:20px;height:20px;border:1px solid #3A3A3A;border-radius:2px;display:flex;align-items:center;justify-content:center;background:#0a0a0a}.button-indicator.waveform{position:relative;overflow:hidden}.button-indicator.waveform:after{content:"";position:absolute;width:14px;height:2px;background:#cdd0c3;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:1px}.encoder-indicators{display:flex;gap:2px;background:#0a0a0a;padding:2px;border-radius:2px;border:1px solid #2A2A2A}.encoder-indicator{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border-radius:2px;color:#fff}.encoder-indicator.blue{background-color:#2c4362}.encoder-indicator.ochre{background-color:#8b663c}.encoder-indicator.gray{background-color:#a1a3a5;color:#000}.encoder-indicator.orange{background-color:#cb2427}.adsr-visualization{flex:1;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid #1A1A1A;border-radius:4px;padding:2px;margin-bottom:4px;position:relative;max-height:65px}.adsr-canvas{cursor:crosshair;display:block;width:280px;height:60px}.adsr-canvas:active{cursor:grabbing}.adsr-parameters{display:flex;justify-content:space-between;align-items:flex-start;padding:0 4px;gap:4px}.adsr-param{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1;transition:all .2s ease}.adsr-param.active{transform:scale(1.05)}.param-indicator{width:6px;height:6px;border-radius:50%;margin-bottom:1px}.param-indicator.blue{background-color:#2c4362}.param-indicator.ochre{background-color:#8b663c}.param-indicator.gray{background-color:#a1a3a5}.param-indicator.orange{background-color:#cb2427}.param-label{font-size:8px;letter-spacing:.5px;text-transform:lowercase;opacity:.8}.attack-param .param-label{color:#2c4362}.decay-param .param-label{color:#8b663c}.sustain-param .param-label{color:#a1a3a5}.release-param .param-label{color:#cb2427}.param-value{font-size:10px;font-weight:700;color:#cdd0c3;font-variant-numeric:tabular-nums;min-width:40px;text-align:center}.adsr-param.active .param-label{opacity:1;color:#fff}.adsr-param.active .param-value{color:gold;text-shadow:0 0 4px rgba(255,215,0,.4)}.adsr-param:hover,.adsr-param:hover .param-label{opacity:1}.adsr-param:hover .param-indicator{transform:scale(1.3);box-shadow:0 0 8px #cdd0c366}@keyframes value-flash{0%{color:#cdd0c3}50%{color:gold}to{color:#cdd0c3}}.param-value.changing{animation:value-flash .3s ease}@media (max-width: 320px){.adsr-screen{padding:2px}.adsr-canvas{width:240px;height:50px}.adsr-description{display:none}.param-value{font-size:9px;min-width:35px}}.volume-control{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:opacity .2s ease}.volume-control.disabled{pointer-events:none}.volume-control.dragging{filter:brightness(1.05)}.volume-control svg{pointer-events:none}.knob-interaction-area{transition:all .1s ease}.knob-interaction-area:hover:not([style*=not-allowed]){transform:scale(1.02)}.knob-interaction-area:active{transform:scale(.98)}@media (max-width: 768px){.knob-interaction-area{left:6px!important;top:6px!important;width:60px!important;height:60px!important}}.volume-control:focus-within{outline:2px solid #4CAF50;outline-offset:2px;border-radius:8px}.volume-control rect{transition:fill .1s ease}.volume-control rect[fill="#4CAF50"]{filter:drop-shadow(0 0 2px rgba(76,175,80,.3))}.volume-control rect[fill="#FF9800"]{filter:drop-shadow(0 0 2px rgba(255,152,0,.3))}.volume-control rect[fill="#F44336"]{filter:drop-shadow(0 0 2px rgba(244,67,54,.3))}.op1-field{display:inline-block;font-family:Inter,sans-serif;user-select:none;transition:filter .5s ease-in-out}.device-shell{width:1389px;height:495px;position:relative}.device-frame{width:1374px;height:495px;position:absolute;top:0;left:0;background:linear-gradient(90deg,#d7d7d74d,#0000001a),var(--frame2-bg);background-size:cover,cover;background-repeat:no-repeat,no-repeat;background-position:center,center;border-radius:20px;box-shadow:inset 0 5px 2px #dfdfdf,inset 0 2px 1px #a5a5a5,inset -2px 0 #868686,inset 0 -3px 1px #888,inset 1px 0 #838383,inset 0 2px 7px 1px #f7f7f7}.control-surface{width:1261px;height:446px;position:absolute;top:24px;left:24px;background:#000;border-radius:5px;box-shadow:3px 3px 7px #0006}.power-button-side{background:#e8e5e4;border-radius:0 4px 4px 0}.power-button-side.power-on{box-shadow:inset 0 0 1px #0000004d,inset 6px 0 4px #00000026,0 2px 4px #0003;filter:brightness(1.02)}.power-button-side.power-off{box-shadow:inset 0 0 3px #0009,inset 6px 0 8px #00000059,0 1px 2px #0000001a;filter:brightness(.92)}.power-button-glow{position:absolute;top:393px;right:-1px;width:17px;height:50px;border-radius:0 4px 4px 0;pointer-events:none;z-index:9;background:transparent;animation:powerPulse 2s ease-in-out infinite}@keyframes powerPulse{0%,to{box-shadow:0 0 8px 2px #cdd0c326,0 0 20px 4px #cdd0c30d}50%{box-shadow:0 0 14px 4px #cdd0c359,0 0 30px 8px #cdd0c31f}}.power-button-arrow{position:absolute;top:410px;right:-28px;font-size:18px;font-family:Inter,system-ui,sans-serif;font-weight:300;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.4),0 0 40px rgba(255,255,255,.2);pointer-events:none;z-index:11;animation:arrowBounce 1.5s ease-in-out infinite}@keyframes arrowBounce{0%,to{transform:translate(0);opacity:.5}50%{transform:translate(-3px);opacity:.9}}.round-button:hover,.vertical-button:hover,.large-encoder:hover,.black-button:hover{transform:translateY(1px);transition:transform .1s ease}.round-button:active,.vertical-button:active,.large-encoder:active,.black-button:active{transform:translateY(2px);transition:transform .05s ease}.button-grid,.function-buttons,.lcd-display,.speaker,.special-controls,.branding{position:relative}.round-button,.vertical-button,.large-encoder,.black-button,.brand-logo,.status-lights{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}