.synth-integration-wrapper{--bg-color: #0a0118;--panel-bg: linear-gradient(135deg, #16082f 0%, #0a0118 100%);--panel-border: #a855f744;--mod-bg: rgba(168, 85, 247, .05);--mod-border: rgba(168, 85, 247, .2);--mod-highlight: rgba(168, 85, 247, .1);--text-primary: #e0e7ff;--text-muted: #94a3b8;--accent-color: #22d3ee;--accent-glow: rgba(34, 211, 238, .5);--knob-base: #111;--knob-top: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);--knob-border: #000;--knob-indicator: #fff;--font-ui: "Outfit", "Inter", sans-serif;--font-display: "JetBrains Mono", monospace;width:100%;height:100%;overflow-y:auto;background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-ui)}.synth-integration-wrapper::-webkit-scrollbar{width:6px}.synth-integration-wrapper::-webkit-scrollbar-track{background:#0a0118}.synth-integration-wrapper::-webkit-scrollbar-thumb{background:#a855f744;border-radius:10px}.synth-integration-wrapper::-webkit-scrollbar-thumb:hover{background:#a855f7}.synth-integration-wrapper *{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.synth-integration-wrapper .app-container{padding:1rem;max-width:1000px;margin:0 auto;width:100%}.synth-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 5px}.midi-controls-header{display:flex;align-items:center;gap:15px}.synth-header h1{font-size:1.5rem;font-weight:800;letter-spacing:2px;background:linear-gradient(90deg,#d946ef,#f472b6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.midi-status{font-family:var(--font-display);font-size:.7rem;color:var(--accent-color);border:1px solid var(--accent-color);padding:3px 10px;border-radius:4px}.midi-status.connected{color:#0fc;border-color:#0fc}.synth-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;padding:15px 20px;box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column;gap:10px}.display-glass{background:#05010d;padding:8px;border-radius:8px;box-shadow:inset 0 0 20px #000c,0 0 15px #a855f71a;border:1px solid #a855f744;margin-bottom:5px}.synth-integration-wrapper canvas#oscilloscope{display:block;background:#000;border-radius:4px;width:100%;height:60px;border:1px solid rgba(168,85,247,.2)}.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.synth-module{background:var(--mod-bg);border:1px solid var(--mod-border);border-radius:8px;padding:10px;position:relative}.module-title{font-size:.6rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:3px}.module-controls{display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px}.control-group{display:flex;flex-direction:column;align-items:center;gap:5px}.control-group label{font-size:.65rem;font-weight:600;text-transform:uppercase}.value-display{font-family:var(--font-display);font-size:.7rem;color:var(--accent-color);background:#111;padding:1px 5px;border-radius:3px;min-width:40px;text-align:center}.knob{width:40px;height:40px;border-radius:50%;background:var(--knob-base);position:relative;box-shadow:0 5px 15px #0009,0 0 5px #a855f733;cursor:ns-resize;display:flex;justify-content:center;align-items:center;transition:box-shadow .3s ease}.knob:hover{box-shadow:0 5px 20px #000c,0 0 15px #a855f766}.knob:before{content:"";position:absolute;width:34px;height:34px;border-radius:50%;background:var(--knob-top)}.knob-indicator{position:absolute;width:2px;height:10px;background:var(--knob-indicator);top:4px;border-radius:1px;transform-origin:50% 16px;pointer-events:none}.knob-large{width:55px;height:55px}.knob-large:before{width:48px;height:48px}.knob-large .knob-indicator{top:5px;height:12px;transform-origin:50% 22px}.toggle-switch{display:flex;align-items:center;gap:5px;font-family:var(--font-display)}.switch-slider{width:30px;height:16px;background:#111;border-radius:8px;position:relative;cursor:pointer;border:1px solid #222}.switch-slider:after{content:"";position:absolute;width:12px;height:12px;background:#eee;border-radius:50%;top:1px;left:1px;transition:.2s}.synth-integration-wrapper input[type=checkbox]:checked+.switch-slider:after{transform:translate(14px)}.waveform-icon{width:18px;height:18px;stroke:#888;stroke-width:2;fill:none;transition:.3s}#waveform-switch:not(:checked)~.waveform-icon[title=Square]{stroke:var(--accent-color);filter:drop-shadow(0 0 3px var(--accent-glow))}#waveform-switch:checked~.waveform-icon[title=Sawtooth]{stroke:var(--accent-color);filter:drop-shadow(0 0 3px var(--accent-glow))}.bottom-controls{display:flex;justify-content:space-between;align-items:center;background:#a855f70d;padding:8px 15px;border-radius:8px;border:1px solid var(--panel-border)}.arp-controls{display:flex;align-items:center;gap:10px;position:relative;z-index:10}.synth-button{background:#16082f;color:var(--text-primary);border:1px solid var(--panel-border);padding:4px 10px;border-radius:4px;font-size:.65rem;cursor:pointer;text-transform:uppercase;position:relative;z-index:20;transition:all .2s ease}.synth-button:hover{border-color:var(--accent-color);background:#a855f71a}.synth-button[data-active=true]{background:var(--accent-color);box-shadow:0 0 10px var(--accent-glow)}.synth-select{background:#0a0118;color:var(--text-primary);border:1px solid var(--panel-border);padding:4px;border-radius:4px;font-size:.65rem;outline:none}.synth-select:focus{border-color:var(--accent-color)}.synth-integration-wrapper input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.synth-integration-wrapper input[type=range]::-webkit-slider-runnable-track{background:#0a0118;height:4px;border-radius:2px;border:1px solid rgba(168,85,247,.2)}.synth-integration-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;background-color:var(--accent-color);height:16px;width:16px;border-radius:50%;border:2px solid #0a0118;box-shadow:0 0 10px var(--accent-glow)}.synth-integration-wrapper input[type=range]::-moz-range-track{background:#0a0118;height:4px;border-radius:2px}.synth-integration-wrapper input[type=range]::-moz-range-thumb{background-color:var(--accent-color);height:16px;width:16px;border:2px solid #0a0118;border-radius:50%;box-shadow:0 0 10px var(--accent-glow)}.keyboard{height:100px;display:flex;position:relative;margin-top:10px;background:#05010d;padding:2px;border-radius:6px;border:1px solid var(--panel-border);box-shadow:0 10px 30px #00000080;overflow:hidden}.key{flex:1;background:linear-gradient(180deg,#fff,#e0e0e0);border:1px solid #999;border-radius:0 0 5px 5px;cursor:pointer;position:relative;z-index:1;transition:all .1s ease}.key.white:hover{background:linear-gradient(180deg,#f0f0f0,#d0d0d0)}.key.white.active{background:linear-gradient(180deg,#ffffff 0%,var(--accent-color) 100%)!important;box-shadow:inset 0 0 10px #0000001a,0 0 15px var(--accent-glow);border-color:var(--accent-color);transform:translateY(2px);z-index:2}.key.black.active{background:linear-gradient(180deg,#442255 0%,var(--accent-color) 100%)!important;box-shadow:0 0 20px var(--accent-glow);border-color:var(--accent-glow);transform:translateY(2px);z-index:11}.key.playing{background:#fff!important;box-shadow:0 0 30px #fff,0 0 50px var(--accent-color)!important;transform:translateY(3px);z-index:3}.key.black.playing{z-index:12}.key.black{background:linear-gradient(180deg,#314,#000);position:absolute;width:4%;height:55%;z-index:10;border-radius:0 0 4px 4px;border:1px solid #000;box-shadow:0 5px 10px #00000080}.key.black:hover{background:linear-gradient(180deg,#425,#111)}.synth-footer{text-align:center;margin-top:15px;color:var(--text-muted);font-size:.7rem}.copyright-inline{margin-left:15px;font-size:.55rem;opacity:.3;letter-spacing:.5px;white-space:nowrap;font-family:var(--font-display)}@media(max-width:768px){.synth-integration-wrapper .app-container{display:flex;flex-direction:column}.synth-header{order:1}.keyboard{order:2;margin-top:0;margin-bottom:15px;height:80px}.synth-panel{order:3}.bottom-controls{order:4;margin-top:15px}.synth-footer{order:5}.controls-grid{grid-template-columns:repeat(2,1fr)}.arp-controls{flex-direction:column;align-items:stretch;width:100%}.bottom-controls{height:auto;padding:15px}.copyright-inline{margin-left:0;margin-top:10px;text-align:center}}@media(max-width:480px){.controls-grid{grid-template-columns:1fr}}