@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/Manrope-VF.woff2) format("woff2")}:root{--bg-color: #f0efea;--bg-color-darker: #e4e3de;--text-color: #4a4845;--knob-color: #faf9f6;--knob-color-secondary: #f3f2ed;--knob-border: rgba(80, 70, 60, .1);--knob-shine: rgba(255, 254, 252, .7);--knob-shadow: rgba(60, 50, 40, .15);--slider-track: var(--accent-color-blue);--accent-color: #dddcd7;--accent-color-orange: #ff9500;--accent-color-white: #fcfbf8;--accent-color-blue: #110237;--eq-center-color: #ff9500;--button-color: #110237;--button-color-secondary: #080031ee;--button-hover: #221247;--button-active: #110237;--button-orange: #ff9500;--button-orange-hover: #ff8000;--button-orange-active: #e67e00;--label-color: #110237;--select-bg: #f7f6f2;--select-border: rgba(80, 70, 60, .1);--border-color: #d4d3ce;--text-inverse: #fffefa;--space-xxs: .125rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--space-2xl: 2rem;--space-3xl: 3rem;--knob-box-shadow: 0 0 0 2px var(--knob-color-secondary), 0 0 0 4px rgba(180, 175, 165, .4), 0 4px 8px rgba(60, 50, 40, .12), 0 8px 16px rgba(60, 50, 40, .08), 0 2px 4px rgba(60, 50, 40, .15), 4px 4px 12px rgba(60, 50, 40, .06), -2px -2px 8px rgba(255, 254, 252, .4);--knob-gradient: radial-gradient(ellipse 80% 50% at 50% 15%, rgba(255, 254, 252, .9) 0%, rgba(255, 254, 252, .3) 25%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(60, 50, 40, .08) 0%, transparent 50%), repeating-linear-gradient(0deg, transparent 0px, rgba(0, 0, 0, .01) 1px, transparent 2px), var(--knob-color);--tab-box-shadow: 0 2px 4px rgba(60, 50, 40, .1), 0 1px 2px rgba(60, 50, 40, .06), inset 0 1px 0 rgba(255, 254, 252, .6);--tab-hover-box-shadow: 0 3px 6px rgba(60, 50, 40, .12), 0 1px 2px rgba(60, 50, 40, .08), inset 0 1px 0 rgba(255, 254, 252, .8);--top-bar-bg: rgba(240, 239, 234, .95);--tab-nav-bg: rgba(228, 227, 222, .85);--key-white: #fcfbf8;--key-white-active: #ebebea;--key-white-hover: #f5f4f0;--tab-bg: linear-gradient(180deg, #faf9f6 0%, #f0efea 30%, #e4e3de 60%, #d6d5d0 100%);--tab-bg-hover: linear-gradient(180deg, #fcfbf8 0%, #f5f4f0 30%, #eae9e4 60%, #dcdbd6 100%);--tab-bg-active: linear-gradient(180deg, #e0dfda 0%, #d2d1cc 40%, #c4c3be 100%);--tab-border: #c8c7c2;--tab-border-bottom: #c8c7c2;--tab-border-right: #d0cfca;--tab-border-active: #c8c7c2;--tab-border-active-bottom: #c8c7c2;--tab-text-shadow: 0 1px 0 rgba(255, 254, 252, .5);--tab-highlight: rgba(255, 254, 252, .6);--button-border: #555;--key-border: rgba(80, 70, 60, .15);--key-shadow: 0 2px 4px rgba(60, 50, 40, .08);--key-disabled: linear-gradient(to bottom, #5a5a5a, #4a4a4a);--slider-overlay-opacity: .3;--play-button-shadow: inset 0 -.0625rem .25rem rgba(0, 0, 0, .02), 0 .125rem .25rem rgba(0, 0, 0, .15), -.125rem -.125rem .1875rem rgba(255, 255, 255, .15)}:root.dark-theme,html.dark-theme,body.dark-theme{--bg-color: #1a1a1a;--bg-color-darker: #111;--text-color: #b0b0b0;--knob-color: #2a2a2a;--knob-color-secondary: #333;--knob-border: rgba(255, 255, 255, .1);--knob-shine: rgba(255, 255, 255, .1);--knob-shadow: rgba(0, 0, 0, .4);--slider-track: #000;--accent-color: #aaa;--accent-color-orange: #aaa;--accent-color-white: #aaa;--accent-color-blue: #aaa;--eq-center-color: #888;--button-color: #888;--button-color-secondary: #666;--button-hover: #999;--button-active: #777;--button-orange: #888;--button-orange-hover: #999;--button-orange-active: #777;--label-color: #aaa;--select-bg: #2a2a2a;--select-border: rgba(255, 255, 255, .1);--border-color: #444;--key-white-hover: #3a3a3a;--text-inverse: #1a1a1a;--tab-bg: #2a2a2a;--tab-bg-hover: #333;--tab-bg-active: #1a1a1a;--tab-border: #333;--tab-border-bottom: #333;--tab-border-right: #333;--tab-border-active: #333;--tab-border-active-bottom: #1a1a1a;--tab-text-shadow: none;--tab-highlight: rgba(255, 255, 255, .1);--button-border: #444;--key-disabled: linear-gradient(to bottom, #333, #222);--key-border: #000;--key-shadow: none;--key-disabled-bg: #1a1a1a;--key-disabled-color: #444;--slider-overlay-opacity: .6;--play-button-shadow: 0 .125rem .25rem rgba(0, 0, 0, .5);--knob-box-shadow: 0 0 0 2px var(--knob-color-secondary), 0 0 0 4px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25), 0 8px 16px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .3), 4px 4px 12px rgba(0, 0, 0, .15), -2px -2px 8px rgba(255, 255, 255, .03);--knob-gradient: radial-gradient(ellipse 80% 50% at 50% 15%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 30%, transparent 50%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 0, 0, .12) 0%, transparent 50%), var(--knob-color);--tab-box-shadow: none;--tab-hover-box-shadow: none;--top-bar-bg: rgba(26, 26, 26, .95);--tab-nav-bg: rgba(26, 26, 26, .95);--key-white: #333333;--key-white-active: #404040}*,*:before,*:after{box-sizing:border-box}.no-transitions,.no-transitions *,.no-transitions *:before,.no-transitions *:after{transition:none!important}[x-cloak]{display:none!important}button:focus{outline:none}html,body{font-size:min(1.25rem,5vw);overscroll-behavior:none;margin:0;padding:0;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-color);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;text-align:center;background-image:linear-gradient(to bottom,rgba(0,0,0,.001) 1px,transparent 1px),linear-gradient(to right,rgba(0,0,0,.001) 1px,transparent 1px);background-size:.625rem .625rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{padding:6rem 0 0}h1{font-size:1.8rem;font-weight:500;margin-bottom:.5rem}.top-bar{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;border-bottom:1px solid var(--knob-border);background:var(--top-bar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100}.top-bar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-lg)}.header-controls{display:flex;align-items:center;gap:var(--space-sm)}.header-button{background:transparent;border:none;padding:var(--space-xs);cursor:pointer;color:var(--text-color);display:flex;align-items:center;justify-content:center;transition:opacity .2s}.header-button:hover{opacity:.7}.header-button svg{width:20px;height:20px}.connection-footer{position:fixed;bottom:0;left:0;right:0;background:var(--top-bar-bg);border-top:1px solid var(--knob-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:99;padding:var(--space-sm) var(--space-lg);transition:opacity .3s ease,transform .3s ease}[x-cloak] .connection-footer{display:none}.connection-footer-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);max-width:20rem;margin:0 auto}.app-title{font-size:1rem;font-weight:200;margin:0;letter-spacing:1px;text-transform:uppercase;color:var(--text-color);opacity:.8;cursor:pointer;transition:opacity .2s}.app-title:hover{opacity:1}.title-menu-wrapper{position:relative}.title-dropdown{position:absolute;top:100%;left:0;margin-top:.5rem;background:var(--knob-color);border:1px solid var(--knob-border);border-radius:.5rem;box-shadow:0 4px 12px #00000026;overflow:hidden;min-width:100px;z-index:1000}.options-menu-wrapper{position:relative}.options-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:var(--knob-color);border:1px solid var(--knob-border);border-radius:.5rem;box-shadow:0 4px 12px #00000026;overflow:hidden;min-width:120px;z-index:1000}.dropdown-item{display:block;width:100%;padding:var(--space-md) var(--space-lg);background:transparent;border:none;text-align:left;cursor:pointer;font-size:.9rem;color:var(--text-color);text-decoration:none;transition:background .2s;border-bottom:1px solid var(--knob-border)}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:var(--bg-color-darker)}.info-view{max-width:40rem}.info-text{font-size:1rem;text-align:left;line-height:1.6;padding:0 var(--space-lg)}.info-text p{margin:var(--space-sm) 0}.info-text h3{font-size:1rem;font-weight:600;margin:var(--space-xl) 0 var(--space-sm) 0;color:var(--button-color)}.info-text ul{margin:var(--space-sm) 0;padding-left:var(--space-xl)}.info-text li{margin:var(--space-xs) 0}.version-info{font-family:monospace;font-size:.75rem;opacity:.7;word-break:break-all}.back-button{margin-top:var(--space-2xl);margin-bottom:6rem;padding:var(--space-md) var(--space-xl);background:var(--button-color);color:#fff;border:none;border-radius:.5rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s}.back-button:hover{background:var(--button-hover)}.status{font-size:1rem;max-width:calc(100vw - 2rem);background:#fff;padding:.5rem 1rem;border-radius:.25rem;box-shadow:0 .125rem .25rem #0000001a}.ios-safari-warning{display:flex;align-items:center;gap:var(--space-sm);background:#fff3cd;border:1px solid #ffc107;border-radius:.5rem;padding:var(--space-md) var(--space-lg);font-size:.85rem;color:#856404;text-align:left;max-width:100%}.ios-safari-warning .warning-icon{font-size:1.2rem;flex-shrink:0}.ios-safari-warning a{color:#533f03;font-weight:600;text-decoration:underline}.ios-safari-warning a:hover{color:#3d2e02}:root.dark-theme .ios-safari-warning,html.dark-theme .ios-safari-warning,body.dark-theme .ios-safari-warning{background:#332701;border-color:#664d00;color:#ffc107}:root.dark-theme .ios-safari-warning a,html.dark-theme .ios-safari-warning a,body.dark-theme .ios-safari-warning a{color:#ffda6a}.update-banner{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:var(--space-md);background:var(--bg-color-darker);border-bottom:1px solid var(--knob-border);color:var(--text-color);padding:var(--space-sm) var(--space-lg);font-size:.85rem;z-index:1000}.update-banner .update-btn{background:var(--button-color);color:var(--text-inverse);border:none;border-radius:.25rem;padding:var(--space-xs) var(--space-md);font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s}.update-banner .update-btn:hover{background:var(--button-hover)}.update-banner .dismiss-btn{background:transparent;border:none;color:var(--text-color);font-size:1rem;cursor:pointer;padding:var(--space-xs);opacity:.5;transition:opacity .2s}.update-banner .dismiss-btn:hover{opacity:1}.knob-container{max-width:20rem;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);gap:min(var(--space-lg),3vw);margin:0 auto;position:relative;justify-items:center;align-items:start}.main-knob{flex:0 0 auto;align-self:flex-end}.knob-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;gap:var(--space-sm)}.knob{background:var(--knob-gradient);border-radius:50%;position:relative;border:1px solid var(--knob-border);box-shadow:var(--knob-box-shadow);touch-action:none;cursor:pointer;overflow:visible;width:25vw;aspect-ratio:1;min-width:4rem;min-height:4rem;max-width:5.6rem}.rate-buttons-row{display:flex;gap:1px;width:100%}.rate-button-small{flex:1;border:1px solid var(--knob-border);border-radius:.15rem;padding:.25rem .1rem;margin:.15rem;cursor:pointer;background-color:var(--knob-color);color:var(--text-color);transition:all .15s ease;font-size:.6rem;text-align:center;font-weight:500;min-width:0;position:relative}.rate-button-small:before{content:"";position:absolute;inset:-.25rem -.15rem}.rate-button-small:hover{background-color:var(--button-hover);color:var(--bg-color)}.rate-button-small.active{background-color:var(--button-color);border-color:var(--button-color);color:var(--text-inverse);font-weight:700}.rate-button-small.rate-label{flex:1.5;font-size:.55rem}.rate-button-small.rate-label:not(.active){opacity:.6}.bpm-input{width:50px;text-align:center;border-radius:0;border-left:none;border-right:none;padding:.26rem 0}.bpm-controls{display:flex;flex-direction:column;align-items:center;gap:.25rem}.bpm-input-group{display:flex;align-items:center}.bpm-adjust-btn{width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background:var(--knob-color);border:1px solid var(--knob-border);color:var(--text-color);font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s}.bpm-adjust-btn:first-child{border-radius:.25rem 0 0 .25rem}.bpm-adjust-btn:last-child{border-radius:0 .25rem .25rem 0}.bpm-adjust-btn:hover{background:var(--button-hover);color:var(--bg-color)}.bpm-adjust-btn:active{background:var(--button-color);color:var(--text-inverse)}.bpm-label{cursor:pointer;transition:color .15s,transform .1s,text-shadow .15s;user-select:none}.bpm-label:hover{color:var(--button-color)}.bpm-label:active{color:var(--button-color);transform:scale(1.15);text-shadow:0 0 8px var(--button-color);animation:bpm-pulse .15s ease-out}@keyframes bpm-pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1.15)}}.seq-input{width:60px}.seq-preview-grid{display:flex;flex-direction:column;gap:2px}.seq-preview-cell{border-radius:1px;transition:background-color .1s ease}.seq-preview-cell.active{background-color:var(--accent-color-blue)!important}input{background-color:var(--knob-color);border:1px solid var(--knob-border);border-radius:4px;text-align:center;font-size:1rem;padding:.35rem .5rem;color:var(--text-color)}input:focus{outline:none;border-color:var(--button-color);box-shadow:0 0 0 1px var(--button-color)}.main-controls{display:flex;gap:var(--space-2xl);align-items:center}.volume-slider{width:3rem;height:10.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:1rem 0}.volume-slider input[type=range]{--width: 10.5rem;--height: 1.68rem;appearance:none;width:var(--width);height:var(--height);background:linear-gradient(to top,var(--knob-shadow) 1.96%,var(--bg-color) 11.76%,var(--slider-track) 13.73%,var(--slider-track) 52.94%,var(--slider-track) 88.16%,var(--bg-color) 90.16%,var(--knob-shadow) 98%);outline:none;transform:rotate(-90deg);transform-origin:center;border-radius:1.5rem;margin:0;padding:0;touch-action:none}.volume-slider input[type=range]::-webkit-slider-thumb{appearance:none;width:1.5rem;height:1.5rem;background:var(--knob-color-secondary);border-radius:50%;box-shadow:.0625rem .0625rem .125rem var(--knob-shadow),-.0625rem 0 .0625rem var(--bg-color),-.0625rem 0 .25rem var(--knob-shadow)}.volume-slider input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;background:var(--knob-color-secondary);border-radius:50%;cursor:pointer;box-shadow:0 .0625rem .125rem var(--knob-shadow),0 .125rem .0625rem var(--bg-color),0 .125rem .25rem var(--knob-shadow)}.volume-slider input[type=range].slider-overlay{position:absolute;opacity:var(--slider-overlay-opacity);pointer-events:none;z-index:1;background:none}.volume-slider .slider-overlay::-webkit-slider-thumb{background:var(--accent-color-orange);opacity:.7}.volume-slider .slider-overlay::-moz-range-thumb{background:var(--accent-color-orange);opacity:.7}.knob-indicator{position:absolute;background:linear-gradient(to bottom,var(--accent-color) 85%,transparent 85%);transform-origin:bottom center;z-index:2;left:50%;transform:translate(-50%,-50%) rotate(-150deg)}.indicator-small{width:.1875rem;height:50%}.knob-ghost{pointer-events:none;z-index:1}.indicator-master{width:.1875rem;height:50%}.slider-mode{align-self:flex-end;display:flex;flex-direction:column;padding:var(--space-sm);background:var(--select-bg);border:1px solid var(--select-border);border-radius:.5rem;height:100%;justify-content:center}.mode-select,.fx-engine-select{--select-bg: var(--knob-color);--select-border: var(--knob-border);--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2350514f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background:var(--select-bg) var(--select-chevron) no-repeat right .5rem center/.75rem .75rem;border:1px solid var(--select-border);border-radius:.25rem;padding:.5rem 1.25rem .5rem .75rem;font-size:.85rem;color:var(--text-color);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-align:left;min-width:3.35rem;position:relative;z-index:2;pointer-events:auto}.value-display .mode-select,.value-display .fx-engine-select{margin-bottom:0}.fx-engine-select{width:100%;max-width:7.5rem}#lfo-canvas{margin-left:2.1rem;border:1px solid var(--knob-border);border-radius:0 .25rem .25rem 0;z-index:1}.lfo-shape{position:absolute;transform:rotate(-90deg) translate(-100%);transform-origin:top left;top:0;left:1px;width:102px;border-radius:0}.lfo-nav-btn,.octave-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:var(--knob-color);border:1px solid var(--knob-border);border-radius:.25rem;color:var(--text-color);cursor:pointer;transition:all .15s ease;padding:0}.lfo-nav-btn:hover:not(:disabled),.octave-button:hover:not(:disabled){border-color:var(--button-color)}.lfo-nav-btn:disabled,.octave-button:disabled{opacity:.3;cursor:not-allowed}.lfo-nav-btn svg,.octave-button svg{width:14px;height:14px}.lfo-add-btn{font-size:1.25rem;font-weight:700;line-height:1}.lfo-number-display{min-width:1.5rem;text-align:center;font-size:.9rem;font-weight:600;color:var(--text-color)}.mode-select:focus,.fx-engine-select:focus{outline:none}.mode-select::-ms-expand,.fx-engine-select::-ms-expand{display:none}.mode-select::-webkit-inner-spin-button,.mode-select::-webkit-outer-spin-button,.mode-select::-webkit-calendar-picker-indicator,.fx-engine-select::-webkit-inner-spin-button,.fx-engine-select::-webkit-outer-spin-button,.fx-engine-select::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;margin:0}@-moz-document url-prefix(){.mode-select,.fx-engine-select{text-indent:.01px;text-overflow:""}}.radio-label{display:flex;align-items:center;gap:var(--space-sm);font-size:.8rem;color:var(--text-color);cursor:pointer}.radio-input{appearance:none;width:1rem;height:1rem;border:2px solid var(--knob-border);border-radius:50%;margin:0;cursor:pointer;position:relative}.radio-input:checked{border-color:var(--button-color)}.radio-input:checked:after{content:"";position:absolute;width:.5rem;height:.5rem;background:var(--button-color);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.value-display{pointer-events:none;display:flex;align-items:center;gap:.1rem}.knob-value{font-size:1rem;font-weight:600;color:var(--text-color);min-width:3ch;text-align:center;display:inline-block;font-variant-numeric:tabular-nums}.knob-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-color);opacity:.8;font-weight:500}.knob:before{content:"";position:absolute;top:50%;left:50%;width:15%;height:15%;background-color:var(--accent-color);border-radius:50%;transform:translate(-50%,-50%);z-index:3;box-shadow:inset .0625rem .0625rem .125rem #0003}.knob-blue:before{background-color:var(--accent-color-blue)}.knob-orange:before{background-color:var(--accent-color-orange)}.knob-ghost-indicator{position:absolute;top:50%;left:50%;width:.1875rem;height:50%;background-color:var(--accent-color);opacity:.5;transform-origin:bottom center;z-index:1;pointer-events:none;transition:transform .05s linear;margin-top:-50%}.knob-blue .knob-ghost-indicator{background-color:var(--accent-color-blue)}.knob-orange .knob-ghost-indicator{background-color:var(--accent-color-orange)}.connection-info{margin-top:var(--space-2xl);font-size:.9rem;color:#777}header{grid-column:span 3}.app-header{padding:0 var(--space-lg);margin-bottom:var(--space-lg)}.view-container{max-width:20rem;width:100%;margin:0 auto}.view-content{display:flex;flex-direction:column;gap:var(--space-sm);align-items:center}.view-title{font-size:1.2rem;font-weight:500;margin:0 0 var(--space-lg) 0;text-transform:uppercase;letter-spacing:2px}.tab-navigation{display:flex;background:var(--tab-nav-bg);border-top:1px solid var(--knob-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.tab-button{flex:1;padding:var(--space-lg);background:var(--tab-bg);border:1px solid var(--tab-border);border-bottom:2px solid var(--tab-border-bottom);border-right:1px solid var(--tab-border-right);color:var(--text-color);font-size:.85rem;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all .1s ease;position:relative;box-shadow:var(--tab-box-shadow);text-shadow:var(--tab-text-shadow)}.tab-button:before{content:"";position:absolute;top:2px;left:4px;right:4px;height:1px;background:linear-gradient(90deg,transparent,var(--tab-highlight),transparent);border-radius:50%}.tab-button:hover{background:var(--tab-bg-hover);box-shadow:var(--tab-hover-box-shadow)}.tab-button:active{transform:translateY(2px);box-shadow:0 0 2px #0000001a,inset 0 1px 2px #0000001a}.tab-button.active{background:var(--tab-bg-active);border-color:var(--tab-border-active, #a0a0a4);border-bottom-color:var(--tab-border-active-bottom, #909094);box-shadow:inset 0 3px 6px #0000002e,inset 0 1px 1px #00000026,inset 0 0 0 1px #0000001a,0 1px #0000000d;color:var(--button-color);text-shadow:var(--tab-text-shadow-active, 0 1px 0 rgba(255, 255, 255, .3));transform:translateY(2px)}.tab-button.active:before{background:linear-gradient(90deg,transparent,rgba(17,2,55,.15),transparent)}.fx-toggle-buttons{display:flex;gap:var(--space-lg);justify-content:center}.fx-view-container{max-width:24rem}.fx-channel-selector{display:flex;justify-content:center}.fx-channel-radio-group{display:flex;gap:var(--space-sm);background:var(--select-bg);border-radius:62.4375rem;padding:.4rem var(--space-sm);box-shadow:0 .125rem .625rem #0000001a}.fx-channel-radio-label{display:flex;align-items:center;padding:var(--space-xs) var(--space-md);background:transparent;border-radius:62.4375rem;cursor:pointer;transition:all .2s ease;font-size:.75rem;font-weight:500;color:var(--text-color)}.fx-channel-radio-label:has(input:checked){background:var(--button-color);color:var(--text-inverse)}.fx-channel-radio-label:has(input[value="8"]:checked){background:var(--button-orange)}.fx-channel-radio{display:none}.fx-engine-section{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-xl)}.fx-engine-section .fx-engine-select{width:100%;max-width:100%;padding:var(--space-md) 1.25rem var(--space-md) var(--space-md);font-size:1rem}.fx-engine-with-toggle{display:flex;align-items:flex-start;gap:var(--space-lg);justify-content:center}.fx-engine-controls-wrapper{display:flex;gap:var(--space-sm)}.fx-engine-radio-group{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:auto auto auto;flex-wrap:wrap;gap:var(--space-sm)}.fx1-slider-wrapper{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0}.fx1-slider{flex:1;height:1.68rem;appearance:none;background:linear-gradient(to bottom,var(--knob-shadow) 1.96%,var(--bg-color) 11.76%,var(--slider-track) 13.73%,var(--slider-track) 52.94%,var(--slider-track) 88.16%,var(--bg-color) 90.16%,var(--knob-shadow) 98%);border-radius:1.5rem;outline:none;cursor:pointer;touch-action:none;margin:0;padding:0}.fx1-slider::-webkit-slider-thumb{appearance:none;width:1.5rem;height:1.5rem;background:var(--knob-color-secondary);border-radius:50%;cursor:pointer;box-shadow:.0625rem .0625rem .125rem var(--knob-shadow),-.0625rem 0 .0625rem var(--bg-color),-.0625rem 0 .25rem var(--knob-shadow)}.fx1-slider::-moz-range-thumb{width:1.5rem;height:1.5rem;background:var(--knob-color-secondary);border-radius:50%;cursor:pointer;border:none;box-shadow:0 .0625rem .125rem var(--knob-shadow),0 .125rem .0625rem var(--bg-color),0 .125rem .25rem var(--knob-shadow)}.fx1-slider-value{font-size:1rem;font-weight:600;color:var(--text-color);min-width:3ch;text-align:right}.fx-engine-radio-label{display:flex;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--knob-color);border:2px solid var(--knob-border);border-radius:.25rem;cursor:pointer;font-size:.85rem;font-weight:500}.fx-engine-radio-label:has(input:checked){background:var(--button-color);border-color:var(--button-color);color:#fff}.fx-engine-section:has(input[name=fx-engine-8]:checked) .fx-engine-radio-label:has(input:checked){background:var(--button-orange);border-color:var(--button-orange)}.fx-engine-radio{display:none}.fx-knobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-bottom:var(--space-2xl);justify-items:center}.fx-track-select-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.fx-track-select{min-width:5rem}.fx-toggle-section{display:flex;flex-direction:column;gap:var(--space-lg);align-items:center}.lfo-transport-section{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--knob-border);width:100%;display:flex;flex-direction:column;gap:var(--space-lg);align-items:center}.lfo-transport-controls{display:flex;gap:var(--space-xl);align-items:center;justify-content:center}.slider-with-switcher{display:flex;flex-direction:row;align-items:stretch;gap:var(--space-sm)}.master-channel-section{writing-mode:vertical-lr;text-orientation:mixed;margin:0;flex-shrink:0;display:flex;align-items:center;position:relative}.master-channel-section:after{content:"";position:absolute;bottom:calc(-1 * var(--space-xl));left:50%;transform:rotate(-35deg);transform-origin:top center;width:1px;height:var(--space-3xl);background:var(--border-color, #ccc)}.master-channel-section:before{content:"";position:absolute;right:calc(-1 * var(--space-xl));top:50%;transform:translateY(-50%);width:var(--space-xl);height:1px;background:var(--border-color, #ccc)}.slider-with-switcher .volume-slider{flex-shrink:0}.slider-with-switcher .value-display{writing-mode:horizontal-tb}.master-channel-radio-group{display:flex;flex-direction:row;gap:0;height:calc(100% - var(--space-xl));justify-content:space-between;background:var(--select-bg);border-radius:62.4375rem;padding:.4rem .25rem;box-shadow:0 .125rem .625rem #0000001a}.master-channel-radio-label{display:flex;align-items:center;padding:.5rem .25rem;background:transparent;border-radius:62.4375rem;cursor:pointer;transition:all .2s ease;font-size:.6rem;font-weight:500;color:var(--text-color)}.master-channel-radio-label:has(input:checked){background:var(--button-color);color:var(--text-inverse)}.master-channel-radio{display:none}.track-selector{background:var(--select-bg);border-radius:62.4375rem;padding:.4rem var(--space-sm);display:flex;justify-content:space-around;box-shadow:0 .125rem .625rem #0000001a;margin:0 auto var(--space-lg) auto}.track-button{background:none;border:none;padding:var(--space-xs) var(--space-sm);max-width:12vw;border-radius:62.4375rem;font-size:.9rem;color:var(--text-color);cursor:pointer;transition:all .2s;font-weight:500}.track-button:hover{background:#0000000d}.track-button.active{background:var(--button-color);color:var(--text-inverse)}.track-button.active:hover{background:var(--button-hover)}.master-controls{margin-top:auto;margin-top:.25rem}.master-title{font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;margin:var(--space-sm) 0;grid-column:span 3}.connection-buttons{display:flex;gap:var(--space-lg);justify-content:center}.connect-btn{background-color:var(--button-color);color:#fff;border:none;padding:var(--space-md) var(--space-lg);font-size:1rem;border-radius:.5rem;cursor:pointer;transition:box-shadow .4s ease;position:relative;overflow:hidden;box-shadow:0 0 0 1px var(--bg-color),0 .125rem .25rem #00000005,0 .25rem .5rem #00000003,inset 0 .0625rem .0625rem #ffffff05;text-shadow:0 .0625rem .0625rem rgba(0,0,0,.3)}.connect-btn:hover{background-color:var(--button-hover);box-shadow:0 0 0 1px var(--bg-color),0 .25rem .5rem #00000008,0 .375rem .75rem #00000004,inset 0 .0625rem .0625rem #ffffff05}.connect-btn:active{transform:translateY(.0625rem);box-shadow:0 0 0 1px var(--bg-color),0 .0625rem .125rem #0003,0 .125rem .25rem #0000001a,inset 0 .0625rem .0625rem #ffffff1a}.connect-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .7s ease}.connect-btn:hover:before{left:100%}.fx-button{--active-color: var(--button-color);background-color:var(--knob-color);color:var(--text-inverse);border:1px solid var(--knob-border);padding:var(--space-sm) var(--space-lg);font-size:.9rem;border-radius:50%;overflow:hidden;cursor:pointer;transition:all .2s ease;font-weight:500;min-width:4rem;aspect-ratio:1;max-width:6rem;width:30vw;box-shadow:0 .125rem .25rem #0003;position:relative;align-self:flex-start}.fx-button-inner{width:70%;height:30%;content:"";position:absolute;top:35%;left:15%;background-color:var(--active-color);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.fx-button:hover{box-shadow:0 .1875rem .375rem #00000040}.fx-button:active{border-radius:50%;box-shadow:0 .0625rem .125rem #0003,inset 0 .0625rem .1875rem #0000001a}.fx-button.orange{--active-color: var(--button-orange)}.fx-button.white{--active-color: var(--key-white)}.fx-button.active{background-color:var(--active-color);border-color:var(--active-color);box-shadow:inset 0 .0625rem .1875rem #0000004d}.fx-button.white.active{color:var(--button-color)}.fx-param-button.ghost{background-color:transparent;box-shadow:inset 0 0 0 1px var(--button-color);opacity:.6;color:var(--button-color)}.fx-button.ghost{animation:fx-ghost-pulse 1.5s ease-in-out infinite}@keyframes fx-ghost-pulse{0%,to{box-shadow:0 .125rem .25rem #0003}50%{box-shadow:0 .125rem .5rem var(--active-color),0 0 .75rem color-mix(in srgb,var(--active-color) 40%,transparent)}}.start-stop-button{color:var(--text-color);border:none;border-radius:50%;overflow:hidden;cursor:pointer;transition:all .2s ease;width:3.25rem;height:3.25rem;box-shadow:var(--play-button-shadow);position:relative;--background-color: var(--knob-color);background:linear-gradient(to bottom right,var(--background-color),var(--knob-color-secondary));padding:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;align-items:center;justify-content:center;align-self:flex-start}.start-stop-button.active{--background-color: var(--knob-color-secondary);box-shadow:inset 0 .0625rem .1875rem #0000004d,0 .0625rem .0625rem #0000000d}.start-stop-button svg{grid-row-start:1;grid-column-start:1;width:1.25rem;height:1.25rem;fill:var(--text-color);opacity:1;transition:all .2s ease}.start-stop-button.active .play-icon{opacity:0}.start-stop-button:not(.active) .stop-icon{opacity:0}.start-stop-button:hover{background-color:#0000000d}.start-stop-button:active{box-shadow:inset 0 .0625rem .1875rem #0003,0 .0625rem .0625rem #00000005}.fx-engine-select option{background-color:var(--knob-color);color:var(--text-color)}.flex{display:flex}.gap-1{gap:var(--space-lg)}.control-buttons{display:flex;flex-direction:column;gap:var(--space-lg);align-items:center}.synth-controls{display:flex;flex-direction:column;gap:var(--space-xl);width:100%}.synth-input-wrapper{display:flex;align-items:center;gap:var(--space-sm)}.seq-input{width:4em}.keyboard-section,.keyboard-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);position:relative}.keyboard-controls{display:flex;align-items:center;gap:var(--space-lg)}.octave-button{position:absolute;top:var(--space-xl);transform:translateY(-100%);z-index:10}.octave-button.octave-left{left:0}.octave-button.octave-right{right:0}.octave-display{font-size:.9rem;font-weight:600;color:var(--text-color);text-align:center}.keyboard{position:relative;display:flex;width:100vw;height:7rem;background:var(--bg-color);border-radius:.25rem;margin:0 calc(-1 * var(--space-lg));perspective:1000px;touch-action:none}.key{flex:1;background:var(--key-white);border:1px solid var(--key-border);border-radius:0 0 var(--space-xs) var(--space-xs);cursor:pointer;transition:all .08s ease-out;font-size:.7rem;font-weight:500;color:var(--text-color);display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--space-sm);box-shadow:var(--key-shadow);position:relative;z-index:1;transform-origin:bottom center;transform-style:preserve-3d}.key:active,.key.pressed{background:var(--key-white-active);transform:translateY(-2px) rotateX(-2deg) scaleY(.98);box-shadow:0 1px 2px #00000026,inset 0 2px 3px #0000001a}.black-key{position:absolute;width:8%;height:60%;background:linear-gradient(to bottom,#2a2a2a,#1a1a1a);border:1px solid #000;border-radius:0 0 var(--space-xs) var(--space-xs);z-index:2;box-shadow:0 3px 6px #0000004d;transition:all .08s ease-out;transform-origin:top center;transform-style:preserve-3d}@media(hover:hover){.black-key:hover{background:linear-gradient(to bottom,#3a3a3a,#2a2a2a)}}.black-key:active,.black-key.pressed{background:linear-gradient(to bottom,#1a1a1a,#0a0a0a);transform:translateY(0) rotateX(-3deg) scaleY(.95);box-shadow:0 1px 3px #0006,inset 0 2px 4px #0000004d}.key.disabled{background:var(--key-disabled-bg, #d0d0d0);color:var(--key-disabled-color, #a0a0a0);cursor:not-allowed;opacity:.4;pointer-events:none}.key.disabled:hover,.key.disabled:active{background:var(--key-disabled-bg, #d0d0d0);transform:none}.black-key.disabled{background:var(--key-disabled);opacity:.3;cursor:not-allowed;pointer-events:none}.black-key.disabled:hover,.black-key.disabled:active{background:var(--key-disabled);transform:none}.fx-param-grid{display:grid;gap:var(--space-md);width:25vw;height:25vw;max-width:6rem;max-height:6rem;min-width:4rem;min-height:4rem;align-content:center;justify-content:center}.fx-param-button{width:100%;height:100%;min-width:0;border-radius:.25rem;font-weight:600;padding:var(--space-md) 0;display:flex;align-items:center;justify-content:center;text-align:center;background-color:var(--knob-color);color:var(--text-color);border:1px solid var(--knob-border);cursor:pointer;transition:all .15s ease;word-break:break-all;line-height:1}.fx-param-button:hover{background-color:var(--button-hover);border-color:var(--button-hover);color:#fff}.fx-param-button.active{background-color:var(--button-color);color:var(--text-inverse);border-color:var(--button-color);box-shadow:inset 0 1px 3px #0003}.fx-param-button.orange:hover{background-color:var(--button-orange-hover, #e67e22);border-color:var(--button-orange-hover, #e67e22)}.fx-param-button.orange.active{background-color:var(--button-orange);border-color:var(--button-orange)}.fx-param-button span{pointer-events:none}.col-span-2{grid-column:span 2;width:100%}.col-span-2 .fx-param-grid{width:100%;max-width:16rem;height:auto;max-height:8rem;aspect-ratio:auto}