:root{--bg-dark: #050505;--panel-bg: #111;--border: #333;--primary: #00ff9d;--secondary: #00b8ff;--accent: #ff0055;--text: #eee;--font-mono: "Courier New", Courier, monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg-dark);color:var(--text);font-family:var(--font-mono);height:100vh;overflow:hidden;display:flex;flex-direction:column}.main-header{background:linear-gradient(90deg,#0a0a0a,#1a1a2e,#0a0a0a);border-bottom:2px solid var(--primary);padding:12px 25px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.logo-section{display:flex;align-items:center;gap:12px}.logo-icon{font-size:1.8rem;animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-header h1{margin:0;font-size:1.4rem;letter-spacing:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,255,157,.3)}.tagline{margin:0;font-size:.75rem;color:#666;letter-spacing:1px}.tagline a{color:var(--secondary);text-decoration:none;transition:color .2s}.tagline a:hover{color:var(--primary);text-decoration:underline}.app-layout{display:flex;flex:1;overflow:hidden}.sidebar{width:340px;min-width:340px;flex-shrink:0;background:var(--panel-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px;gap:15px;z-index:10;overflow-y:auto}.panel-header{border-bottom:2px solid var(--primary);margin-bottom:5px}.panel-header h2,h3{margin:0 0 5px;color:var(--primary);font-size:1.2rem;letter-spacing:2px}h3{font-size:.9rem;color:#888;border-bottom:1px solid #333;padding-bottom:5px}.separator{height:1px;background:#333;margin:5px 0}.transport-controls{display:flex;gap:10px}.transport-btn{flex:1;background:#222;border:1px solid #444;color:#eee;padding:10px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s;border-radius:4px}.transport-btn.play:hover{background:var(--primary);color:#000;border-color:var(--primary)}.transport-btn.stop:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.transport-btn.mute:hover{background:var(--secondary);color:#fff;border-color:var(--secondary)}.transport-btn.active{background:var(--accent);box-shadow:0 0 10px var(--accent)}.preset-section{display:flex;flex-direction:column;gap:10px;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:10px;border:1px solid #4a4a6a;border-radius:4px}.preset-section h3{color:#9d4edd;border-bottom-color:#9d4edd}.generator-section{display:flex;flex-direction:column;gap:10px;background:#1a1a1a;padding:10px;border:1px solid #333;border-radius:4px}.cyber-input{background:#000;border:1px solid #444;color:var(--primary);font-family:var(--font-mono);padding:5px;width:100%;resize:vertical}.status-text{font-size:.7rem;color:#666;text-align:right;min-height:1em}.toggle-group{margin:5px 0}.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.8rem}.toggle-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--secondary);cursor:pointer}.toggle-text{color:var(--secondary)}.sequencer-grid{display:flex;flex-direction:column;gap:8px;background:#000;padding:10px;border:1px solid var(--border)}.seq-row{display:flex;align-items:center;gap:5px}.track-label{width:30px;font-weight:700;font-size:.8rem;color:#888}.step-btn{flex:1;height:25px;background:#222;border:1px solid #444;cursor:pointer;transition:all .1s}.step-btn:hover{border-color:var(--secondary)}.step-btn.active{background:var(--secondary);box-shadow:0 0 5px var(--secondary);border-color:#fff}.control-group{display:flex;flex-direction:column;gap:5px}.control-group label{font-size:.7rem;color:var(--primary)}.volume-control{display:flex;align-items:center;gap:5px}input[type=range]{width:100%;accent-color:var(--primary);cursor:pointer}.cyber-select{background:#000;color:var(--text);border:1px solid #444;padding:5px;font-family:var(--font-mono);width:100%}.cyber-btn{background:transparent;border:1px solid var(--primary);color:var(--primary);padding:10px;font-family:var(--font-mono);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;text-transform:uppercase;font-size:.9rem}.cyber-btn:hover{background:var(--primary);color:#000;box-shadow:0 0 15px var(--primary)}.cyber-btn.secondary{border-color:var(--secondary);color:var(--secondary)}.cyber-btn.secondary:hover{background:var(--secondary);color:#000;box-shadow:0 0 15px var(--secondary)}.main-content{flex:1;display:flex;flex-direction:column;position:relative}.visualizer-wrapper{height:180px;background:#000;position:relative;border-bottom:1px solid var(--border)}#audio-viz{width:100%;height:100%;display:block}.viz-overlay{position:absolute;top:10px;right:10px;color:var(--accent);font-size:.7rem;opacity:.7}.editor-wrapper{flex:1;display:flex;flex-direction:column;background:#080808;position:relative}.panel-label{background:#111;color:#fff;padding:5px 15px;font-size:.8rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.editor-actions{display:flex;align-items:center;gap:8px}.panel-label .hint{color:var(--secondary);font-size:.7rem;background:#00b8ff26;padding:3px 8px;border-radius:3px;border:1px solid rgba(0,184,255,.3)}.update-btn{background:var(--primary);border:none;color:#000;padding:4px 10px;font-family:var(--font-mono);font-size:.7rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;border-radius:3px;transition:all .2s}.update-btn:hover{background:#00ffb8;box-shadow:0 0 10px var(--primary)}.update-btn .material-icons{font-size:14px}.update-btn .btn-text{display:none}strudel-editor{display:none}strudel-editor+div{flex:1;height:100%!important}.cm-editor{height:100%!important}.cm-editor input[type=range]{pointer-events:auto!important;cursor:pointer!important;-webkit-appearance:auto!important;-moz-appearance:auto!important;appearance:auto!important;position:relative;z-index:100}.cm-line input[type=range]{pointer-events:auto!important}.ai-tips{margin:8px 0;font-size:.75rem}.ai-tips details{background:#00ff9d0d;border:1px solid rgba(0,255,157,.2);border-radius:4px;padding:6px 10px}.ai-tips summary{cursor:pointer;color:var(--primary);font-weight:700;-webkit-user-select:none;user-select:none}.ai-tips summary:hover{color:#00ffb8}.ai-tips ul{margin:8px 0 4px;padding-left:18px;color:#aaa;line-height:1.6}.ai-tips li{margin-bottom:4px}.ai-tips strong{color:var(--secondary)}.ai-tips code{background:#00b8ff26;color:var(--primary);padding:1px 4px;border-radius:3px;font-size:.85em}@media (max-width: 1024px){.sidebar{width:280px;padding:15px}.main-header h1{font-size:1.2rem;letter-spacing:2px}.tagline{display:none}}@media (max-width: 768px){body{height:auto;min-height:100vh;overflow:auto}.main-header{padding:10px 15px;flex-direction:column;gap:5px}.main-header h1{font-size:1rem;letter-spacing:2px}.logo-icon{font-size:1.4rem}.tagline{display:block;font-size:.65rem;text-align:center}.app-layout{flex-direction:column;overflow:visible}.sidebar{width:100%;padding:15px;gap:12px;order:2;border-right:none;border-top:1px solid var(--border);max-height:none}.main-content{order:1;min-height:350px}.visualizer-wrapper{height:120px}.editor-wrapper{min-height:200px}.desktop-only{display:none!important}.update-btn{padding:6px 12px;font-size:.75rem}.update-btn .btn-text{display:inline}.update-btn .material-icons{font-size:16px}.transport-controls{gap:8px}.transport-btn{padding:12px 8px}.cyber-btn{padding:12px;font-size:.85rem}.panel-header h2,h3{font-size:1rem}h3{font-size:.85rem}.preset-section,.generator-section{padding:12px}.control-group label{font-size:.75rem}.ai-tips{font-size:.7rem}.ai-tips ul{padding-left:15px}.panel-label{padding:8px 12px;font-size:.75rem}.viz-overlay{font-size:.6rem;top:5px;right:5px}}@media (max-width: 480px){.main-header{padding:8px 10px}.main-header h1{font-size:.9rem;letter-spacing:1px}.logo-icon{font-size:1.2rem}.sidebar{padding:12px;gap:10px}.transport-btn{padding:10px 5px}.transport-btn .material-icons{font-size:20px}.cyber-btn{padding:10px;font-size:.8rem;gap:6px}.cyber-btn .material-icons{font-size:18px}.cyber-input,.cyber-select{font-size:.85rem;padding:8px}.visualizer-wrapper{height:100px}.editor-wrapper{min-height:180px}.preset-section,.generator-section{padding:10px}input[type=range]{height:20px}}@media (max-width: 768px) and (orientation: landscape){.app-layout{flex-direction:row}.sidebar{width:45%;order:1;border-right:1px solid var(--border);border-top:none;max-height:calc(100vh - 60px);overflow-y:auto}.main-content{order:2;width:55%}.visualizer-wrapper{height:80px}}