*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #1a1a2e;--bg-medium: #16213e;--bg-light: #0f3460;--accent: #e94560;--text: #eee;--text-dim: #888}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-dark);color:var(--text);min-height:100vh}#app{display:flex;flex-direction:column;height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-medium);border-bottom:1px solid var(--bg-light)}header h1{font-size:1.25rem;font-weight:600;color:var(--accent)}.controls{display:flex;gap:.5rem}button{background:var(--bg-light);border:none;color:var(--text);padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background .2s}button:hover{background:var(--accent)}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}main{display:flex;flex:1;overflow:hidden}aside{width:180px;background:var(--bg-medium);padding:.75rem;overflow-y:auto;flex-shrink:0}aside h2{font-size:.8rem;text-transform:uppercase;color:var(--text-dim);margin-bottom:.75rem;letter-spacing:.05em}#module-browser{border-right:1px solid var(--bg-light)}#inspector{border-left:1px solid var(--bg-light);width:220px}#center-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}#patch-editor-container{flex:1;position:relative;min-height:200px}#patch-editor{position:absolute;top:0;left:0;width:100%;height:100%}#preview{height:200px;display:flex;align-items:center;justify-content:center;background:#000;padding:.5rem;border-top:1px solid var(--bg-light);flex-shrink:0}#output{max-width:100%;max-height:100%;border:1px solid var(--bg-light);border-radius:4px}.hint{color:var(--text-dim);font-size:.8rem;font-style:italic}footer{padding:.4rem 1rem;background:var(--bg-medium);border-top:1px solid var(--bg-light);font-size:.8rem;color:var(--text-dim)}.module-category{margin-bottom:.75rem}.module-category h3{font-size:.7rem;color:var(--text-dim);margin-bottom:.4rem;text-transform:capitalize}.module-item{padding:.35rem .5rem;margin-bottom:.2rem;background:var(--bg-light);border-radius:4px;cursor:pointer;font-size:.8rem;transition:background .2s}.module-item:hover{background:var(--accent)}#inspector h3{font-size:.9rem;margin-bottom:.5rem;color:var(--accent)}.param-group{margin-bottom:.75rem}.param-group label{display:block;font-size:.7rem;color:var(--text-dim);margin-bottom:.2rem;text-transform:capitalize}.param-group input[type=range]{width:100%;margin:0}.param-group input[type=number],.param-group select{width:100%;background:var(--bg-dark);border:1px solid var(--bg-light);color:var(--text);padding:.25rem;border-radius:4px;font-size:.8rem}.param-group input[type=color]{width:100%;height:28px;border:none;border-radius:4px;cursor:pointer}.param-group input[type=checkbox]{width:auto}.mode-buttons{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.75rem}.mode-btn{padding:.25rem .5rem;font-size:.7rem;background:var(--bg-dark);border:1px solid var(--bg-light)}.mode-btn.active{background:var(--accent);border-color:var(--accent)}.io-section{margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--bg-light)}.io-section label{color:var(--text-dim);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em}.io-item{font-size:.75rem;color:var(--text-dim);padding:.1rem 0}.input-monitor{display:flex;align-items:center;gap:.4rem;margin:.3rem 0;font-size:.75rem}.input-label{width:50px;color:var(--text-dim);flex-shrink:0}.input-bar-bg{flex:1;height:8px;background:var(--bg-dark);border-radius:4px;overflow:hidden}.input-bar{height:100%;width:0%;background:#ffe66d;border-radius:4px;transition:width .05s ease-out}.output-bar{height:100%;width:0%;background:#4ecdc4;border-radius:4px;transition:width .05s ease-out}.input-value{width:35px;text-align:right;color:var(--text);font-family:monospace;font-size:.7rem}.trigger-indicator{width:12px;height:12px;border-radius:50%;background:var(--bg-dark);border:2px solid #ff6b6b;transition:background .05s}.trigger-indicator.active{background:#ff6b6b;box-shadow:0 0 8px #ff6b6b}#preview-resizer{height:4px;background:var(--bg-light);cursor:ns-resize}#preview-resizer:hover{background:var(--accent)}.frame-monitor{display:flex;align-items:center;gap:.4rem;margin:.3rem 0}.frame-preview{background:var(--bg-dark);border:1px solid var(--bg-light);border-radius:4px}.audio-monitor{display:flex;flex-direction:column;gap:.2rem;margin:.3rem 0}.audio-label{font-size:.7rem;color:var(--text-dim)}.audio-waveform{width:100%;height:40px;background:var(--bg-dark);border:1px solid var(--bg-light);border-radius:4px}