*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{color:#8a9ab8;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;background:#080b12;font-family:Share Tech Mono,Courier New,monospace}#app{width:100%;height:100%}#synth-root{flex-direction:column;height:100vh;display:flex;overflow:hidden}#synth-header{background:#050810;border-bottom:1px solid #0f1628;flex-shrink:0;align-items:center;gap:24px;height:52px;padding:0 20px;display:flex;position:relative}#synth-header:after{content:"";background:linear-gradient(90deg,#0000,#1a2a50 20%,#2a4080 50%,#1a2a50 80%,#0000);height:1px;position:absolute;bottom:0;left:0;right:0}#header-logo{flex-shrink:0;align-items:center;gap:10px;display:flex}.logo-mark{color:#4a9eff;text-shadow:0 0 12px #4a9eff;font-size:20px;animation:3s ease-in-out infinite pulse-glow}@keyframes pulse-glow{0%,to{text-shadow:0 0 8px #4a9eff}50%{text-shadow:0 0 20px #4a9eff,0 0 40px #4a9eff44}}.logo-text{letter-spacing:6px;color:#c8d8f0;text-transform:uppercase;font-family:Orbitron,sans-serif;font-size:18px;font-weight:900}.logo-sub{letter-spacing:3px;color:#3a4860;text-transform:uppercase;padding-top:2px;font-family:Share Tech Mono,monospace;font-size:9px}#header-hint{letter-spacing:2px;color:#2a3850;text-align:center;text-transform:uppercase;flex:1;font-size:9px}#header-status{flex-shrink:0;align-items:center;gap:8px;display:flex}#status-dot{background:#1a2030;border-radius:50%;width:8px;height:8px;transition:background .4s,box-shadow .4s}#status-text{letter-spacing:3px;color:#3a4860;text-transform:uppercase;font-family:Share Tech Mono,monospace;font-size:10px}#canvas-container{background:radial-gradient(at 30% 20%,#0a0f2020 0%,#0000 60%),radial-gradient(at 70% 80%,#0a1a0a18 0%,#0000 60%),#080b12;flex:1;position:relative;overflow:hidden}#canvas-svg{width:100%;height:100%;display:block}.module-panel{fill:#0d1120;stroke:#1a2038;stroke-width:1.5px;filter:drop-shadow(0 4px 24px #0009)}.module-group:hover .module-panel{stroke:#243060}.module-title{letter-spacing:2px;text-anchor:middle;dominant-baseline:auto;font-family:Orbitron,sans-serif;font-size:10px;font-weight:700}.module-subtitle{letter-spacing:1.5px;fill:#2a3450;text-anchor:middle;dominant-baseline:auto;font-family:Share Tech Mono,monospace;font-size:6px}.waveform-btn{cursor:pointer}.waveform-btn:hover rect{opacity:.8}.waveform-label{text-anchor:middle;dominant-baseline:auto;pointer-events:none;font-family:Share Tech Mono,monospace;font-size:10px}.knob-group{cursor:ns-resize}.knob-label{letter-spacing:1.5px;fill:#3a4868;text-anchor:middle;dominant-baseline:auto;text-transform:uppercase;pointer-events:none;font-family:Share Tech Mono,monospace;font-size:7px}.knob-tooltip{opacity:0;pointer-events:none;transition:opacity .15s}.knob-group:hover .knob-tooltip{opacity:1}.knob-tooltip-text{text-anchor:middle;dominant-baseline:auto;pointer-events:none;font-family:Share Tech Mono,monospace;font-size:8px}.port-group{cursor:crosshair}.port-group:hover .port-circle{stroke-width:3px}.port-label{letter-spacing:1px;fill:#2a3450;text-anchor:middle;dominant-baseline:auto;pointer-events:none;font-family:Share Tech Mono,monospace;font-size:7px}.port-arrow{text-anchor:middle;dominant-baseline:auto;pointer-events:none;font-size:6px}.cable-path{cursor:pointer;transition:stroke-width .1s,opacity .1s}#keyboard-bar{background:#050810;border-top:1px solid #0d1628;flex-shrink:0;align-items:center;gap:20px;height:120px;padding:10px 20px;display:flex;position:relative;overflow:hidden}#keyboard-bar:before{content:"";background:linear-gradient(90deg,#0000,#1a2a50 20%,#2a4080 50%,#1a2a50 80%,#0000);height:1px;position:absolute;top:0;left:0;right:0}#keyboard-label{flex-direction:column;flex-shrink:0;gap:4px;display:flex}.kb-title{letter-spacing:4px;color:#3a5080;text-transform:uppercase;font-family:Orbitron,sans-serif;font-size:9px;font-weight:700}.kb-range{letter-spacing:2px;color:#2a3850;font-family:Share Tech Mono,monospace;font-size:10px}#piano-container{flex-shrink:0;position:relative}#keyboard-legend{flex-direction:column;flex-shrink:0;gap:6px;margin-left:12px;display:flex}.legend-row{align-items:center;gap:8px;display:flex}.legend-key{letter-spacing:1px;color:#4a6090;background:#0d1628;border:1px solid #1a2840;border-radius:3px;padding:2px 5px;font-family:Share Tech Mono,monospace;font-size:9px}.legend-desc{letter-spacing:2px;color:#2a3850;font-family:Share Tech Mono,monospace;font-size:8px}.piano-key{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;padding-bottom:6px;transition:background 50ms,transform 50ms;display:flex;position:absolute;top:0}.white-key{z-index:1;background:linear-gradient(#c8c8d0 0%,#e8e8f0 60%,#d0d0dc 100%);border:1px solid #888898;border-top:none;height:88px;box-shadow:inset 0 -2px 4px #00000026,2px 4px 8px #0006}.white-key:hover{background:linear-gradient(#d8d8e8 0%,#f0f0ff 60%,#e0e0f0 100%)}.white-key.pressed{background:linear-gradient(#7ab0ff 0%,#a0c4ff 60%,#80aaee 100%);transform:translateY(2px);box-shadow:inset 0 -1px 2px #0003,1px 2px 4px #0000004d}.black-key{z-index:2;background:linear-gradient(#1a1a28 0%,#282838 60%,#181828 100%);border:1px solid #0a0a14;border-top:none;padding-bottom:4px;box-shadow:inset 0 -2px 3px #ffffff0d,3px 5px 12px #000000b3}.black-key:hover{background:linear-gradient(#242438 0%,#343450 60%,#202030 100%)}.black-key.pressed{background:linear-gradient(#1a3a7a 0%,#2a4a9a 60%,#1a3080 100%);transform:translateY(2px);box-shadow:inset 0 -1px 2px #0000004d,1px 2px 6px #0009}.key-hint{color:#666680;letter-spacing:0;pointer-events:none;text-transform:uppercase;font-family:Share Tech Mono,monospace;font-size:8px}.black-key .key-hint{color:#444458;font-size:7px}.black-hint{color:#3a3a50!important}#canvas-svg canvas{background:#030805;border:1px solid #0d2018;border-radius:3px;display:block}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#080b12}::-webkit-scrollbar-thumb{background:#1a2038;border-radius:3px}.drag-handle{cursor:grab}.drag-handle:active{cursor:grabbing}