@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap";:root{--color-black: #000000;--color-void: #0a0a0a;--color-surface: #111111;--color-surface-raised: #181818;--color-surface-hover: #1f1f1f;--color-gray-900: #1a1a1a;--color-gray-800: #262626;--color-gray-700: #333333;--color-gray-600: #444444;--color-gray-500: #666666;--color-gray-400: #888888;--color-gray-300: #aaaaaa;--color-gray-200: #cccccc;--color-gray-100: #e5e5e5;--color-white: #ffffff;--color-accent: #ffffff;--color-accent-dim: #888888;--color-active: #ffffff;--color-error: #ff3333;--color-text-primary: #ffffff;--color-text-secondary: #888888;--color-text-tertiary: #555555;--color-text-muted: #333333;--color-border: #2a2a2a;--color-border-strong: #444444;--color-border-subtle: #1a1a1a;--font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;--font-display: var(--font-mono);--font-body: var(--font-mono);--text-2xs: .6875rem;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .875rem;--text-lg: 1rem;--text-xl: 1.25rem;--text-2xl: 1.625rem;--text-3xl: 2.25rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-none: 0;--radius-sm: 2px;--radius-md: 2px;--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .03);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--transition-fast: .08s ease;--transition-base: .15s ease;font-family:var(--font-mono);font-size:13px;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text-primary);background-color:var(--color-black);font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--color-black)}#root{width:100%}::selection{background:var(--color-white);color:var(--color-black)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-black)}::-webkit-scrollbar-thumb{background:var(--color-gray-700);border:2px solid var(--color-black)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-600)}.grid-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:4px 4px}.scanlines:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.15) 1px,rgba(0,0,0,.15) 2px);z-index:100}.keyboard{--pad-size: 44px;--pad-gap: 4px;display:grid;grid-template-columns:repeat(14,var(--pad-size));gap:var(--pad-gap);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);margin:0 auto}.white-keys,.black-keys{display:contents}.key{width:var(--pad-size);height:var(--pad-size);border:1px solid var(--color-border);background:var(--color-gray-900);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;transition:all var(--transition-fast);position:relative}.key:focus{outline:none}.key:hover{background:var(--color-gray-800);border-color:var(--color-gray-600)}.key:active,.key.active{background:var(--color-white);border-color:var(--color-white)}.key-label{font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;letter-spacing:-.5px}.key:hover .key-label{color:var(--color-text-secondary)}.key:active .key-label,.key.active .key-label{color:var(--color-black);font-weight:600}.white-key{background:var(--color-gray-800)}.black-key{background:var(--color-gray-900);position:relative}.black-key:after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;background:var(--color-gray-600)}.black-key:active:after,.black-key.active:after{background:var(--color-black)}@media(max-width:768px){.keyboard{--pad-size: 36px;--pad-gap: 3px;grid-template-columns:repeat(14,var(--pad-size))}.key-label{font-size:9px}}@media(max-width:600px){.keyboard{--pad-size: 32px;--pad-gap: 2px;grid-template-columns:repeat(7,var(--pad-size))}}@media(max-width:400px){.keyboard{--pad-size: 28px;grid-template-columns:repeat(7,var(--pad-size))}.key-label{font-size:8px}}.module-panel{background:var(--color-surface);border:1px solid var(--color-border);padding:0;position:relative;min-width:140px}.module-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-gray-900);border-bottom:1px solid var(--color-border)}.module-title{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:2px;margin:0}.module-led{width:6px;height:6px;background:var(--color-gray-700);flex-shrink:0}.module-panel-primary .module-led,.module-panel-secondary .module-led,.module-panel-hot .module-led,.module-panel-cool .module-led{background:var(--color-white)}.module-panel-primary,.module-panel-secondary,.module-panel-hot,.module-panel-cool{border-top:1px solid var(--color-border)}.module-content{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;padding:var(--space-4)}.patch-point{display:flex;flex-direction:column;align-items:center;gap:2px}.patch-jack{width:10px;height:10px;background:var(--color-black);border:1px solid var(--color-gray-600);position:relative}.patch-jack:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;transform:translate(-50%,-50%);background:var(--color-gray-600)}.patch-output .patch-jack{border-color:var(--color-white)}.patch-output .patch-jack:after{background:var(--color-white)}.patch-label{font-family:var(--font-mono);font-size:8px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}.module-row{display:flex;gap:var(--space-3);align-items:flex-end;width:100%;justify-content:center}.module-column{display:flex;flex-direction:column;gap:var(--space-3);align-items:center}.module-divider{width:1px;height:48px;background:var(--color-border);margin:0 var(--space-1)}.knob-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);-webkit-user-select:none;user-select:none}.knob-small{--knob-size: 48px;--stroke-width: 3px;--indicator-size: 4px}.knob-medium{--knob-size: 64px;--stroke-width: 4px;--indicator-size: 6px}.knob-large{--knob-size: 80px;--stroke-width: 5px;--indicator-size: 8px}.knob-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px;text-align:center}.knob{width:var(--knob-size);height:var(--knob-size);position:relative;cursor:ns-resize}.knob.dragging{cursor:grabbing}.knob-ticks{position:absolute;width:100%;height:100%;pointer-events:none}.knob-tick{position:absolute;width:1px;height:4px;background:var(--color-gray-700);left:50%;top:2px;transform-origin:center calc(var(--knob-size) / 2 - 2px)}.knob-tick.major{height:6px;background:var(--color-gray-500)}.knob-tick.center{background:var(--color-text-secondary)}.knob-body{position:absolute;top:50%;left:50%;width:calc(var(--knob-size) - 16px);height:calc(var(--knob-size) - 16px);transform:translate(-50%,-50%);border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);transition:border-color var(--transition-fast)}.knob:hover .knob-body{border-color:var(--color-border-strong)}.knob.dragging .knob-body{border-color:var(--color-white)}.knob-indicator{position:absolute;width:2px;height:10px;background:var(--color-white);left:50%;top:4px;transform:translate(-50%)}.knob-small .knob-indicator{height:8px;width:2px}.knob-large .knob-indicator{height:12px;width:2px}.knob-cap{position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--color-gray-700);pointer-events:none}.knob-value{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--color-text-primary);letter-spacing:-.5px;min-width:60px;text-align:center;padding:var(--space-1) 0;background:var(--color-surface);border:1px solid var(--color-border)}.knob.dragging+.knob-value{border-color:var(--color-white);color:var(--color-white)}.knob-unit{color:var(--color-text-tertiary);margin-left:1px;font-weight:400}.knob-arc{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.knob-arc circle{fill:none;stroke-linecap:butt}.knob-arc .arc-track{stroke:var(--color-gray-800)}.knob-arc .arc-value{stroke:var(--color-white);transition:stroke-dashoffset .05s ease}.knob.dragging .knob-arc .arc-value,.knob-color-secondary .knob-arc .arc-value,.knob-color-hot .knob-arc .arc-value,.knob-color-cool .knob-arc .arc-value{stroke:var(--color-white)}.switch-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.switch-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px}.switch{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:var(--space-1);cursor:pointer}.switch-track{width:32px;height:16px;background:var(--color-surface);border:1px solid var(--color-border);position:relative;transition:all var(--transition-fast)}.switch:hover .switch-track{border-color:var(--color-border-strong)}.switch.on .switch-track{background:var(--color-white);border-color:var(--color-white)}.switch-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--color-gray-600);transition:all var(--transition-fast)}.switch.on .switch-thumb{left:calc(100% - 12px);background:var(--color-black)}.switch-led{width:4px;height:4px;background:var(--color-gray-700);transition:all var(--transition-fast)}.switch-led.active{background:var(--color-white)}.toggle-group{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.toggle-group-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px}.toggle-group-options{display:flex;border:1px solid var(--color-border);background:var(--color-surface)}.toggle-group-vertical .toggle-group-options{flex-direction:column}.toggle-option{display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--space-2) var(--space-3);background:transparent;border:none;border-right:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast);min-width:40px}.toggle-option:last-child{border-right:none}.toggle-group-vertical .toggle-option{border-right:none;border-bottom:1px solid var(--color-border)}.toggle-group-vertical .toggle-option:last-child{border-bottom:none}.toggle-option:hover{background:var(--color-surface-hover)}.toggle-option.active{background:var(--color-white)}.toggle-option-label{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.toggle-option:hover .toggle-option-label{color:var(--color-text-primary)}.toggle-option.active .toggle-option-label{color:var(--color-black);font-weight:600}.toggle-led{display:none}.synth-root{display:flex;flex-direction:column;align-items:center;padding:var(--space-6) var(--space-4);min-height:100vh;background:var(--color-black);position:relative}.page-header{text-align:center;margin-bottom:var(--space-10);padding:var(--space-6) 0;width:100%;max-width:1000px;border-bottom:1px solid var(--color-border)}.brand{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:600;margin:0;letter-spacing:6px;text-transform:uppercase;color:var(--color-white);position:relative;display:inline-block}.brand:before{content:"◼";margin-right:var(--space-3);font-size:var(--text-lg);vertical-align:middle}.brand:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--color-white)}.instrument-header{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);width:100%;max-width:1000px}.instrument-name{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:500;margin:0;letter-spacing:2px;text-transform:uppercase;color:var(--color-text-primary)}.instrument-type{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:1px}.instrument-version{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px;margin-left:auto}.instrument-version:before{content:"// "}.synth-housing{background:var(--color-black);border:1px solid var(--color-border);padding:var(--space-4);position:relative;max-width:1000px;width:100%}.synth-housing:before{content:"SYS.AUDIO.SYNTH";position:absolute;top:0;left:0;padding:2px var(--space-2);font-family:var(--font-mono);font-size:9px;color:var(--color-text-muted);background:var(--color-black);letter-spacing:1px;transform:translateY(-50%)}.synth-inner{position:relative}.synth-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--color-border);margin-bottom:var(--space-4)}.synth-modules>*{background:var(--color-surface)}.env-knobs{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.patch-row{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.status-bar{position:fixed;bottom:0;left:0;right:0;height:24px;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-tertiary);z-index:1000}.status-bar-left,.status-bar-right{display:flex;align-items:center;gap:var(--space-4)}.status-item{display:flex;align-items:center;gap:var(--space-1)}.status-item:before{content:"";width:6px;height:6px;background:var(--color-gray-600)}.status-item.active:before{background:var(--color-white)}.status-divider{width:1px;height:12px;background:var(--color-border)}.status-bar kbd{background:var(--color-gray-800);border:1px solid var(--color-border);padding:1px 4px;font-family:var(--font-mono);font-size:9px;color:var(--color-text-secondary)}.synth-root{padding-bottom:48px}.noise-overlay{display:none}@media(max-width:768px){.synth-root{padding:var(--space-4) var(--space-2)}.synth-header h1{font-size:var(--text-lg);letter-spacing:2px}.synth-housing{padding:var(--space-3)}.synth-modules{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}