:root{--bg-dark: #07090d;--bg-surface: #0f1218;--bg-panel: #151922;--bg-panel-elevated: #1d2330;--border-color: #262e3d;--border-subtle: #181e28;--text-main: #f1f5f9;--text-muted: #8b99ae;--accent-orange: #f97316;--accent-amber: #f59e0b;--accent-cyan: #06b6d4;--accent-blue: #38bdf8;--accent-emerald: #10b981;--accent-red: #ef4444;--step-active: #f97316;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-family);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,#120e0a,#050608);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s cubic-bezier(.16,1,.3,1),visibility .6s ease}.splash-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.splash-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:820px;width:90%;padding:40px}.splash-hero-logo{max-width:680px;width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.95)) drop-shadow(0 0 25px rgba(249,115,22,.4));margin-bottom:28px;animation:logo-glow 3s ease-in-out infinite alternate}@keyframes logo-glow{0%{transform:scale(.99);filter:drop-shadow(0 10px 30px rgba(0,0,0,.95)) drop-shadow(0 0 20px rgba(249,115,22,.3))}to{transform:scale(1.01);filter:drop-shadow(0 15px 40px rgba(0,0,0,.98)) drop-shadow(0 0 35px rgba(245,158,11,.5))}}.splash-loader-bar{width:320px;height:4px;background:#1a1e28;border-radius:4px;overflow:hidden;margin-bottom:16px;box-shadow:0 0 8px #000c}.splash-loader-progress{height:100%;width:0%;background:linear-gradient(90deg,#f97316,#f59e0b,#eab308);border-radius:4px;transition:width .3s ease;box-shadow:0 0 10px #f97316cc}.splash-status-text{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:24px}.splash-enter-btn{background:linear-gradient(135deg,#ea580c,#c2410c);border:1px solid #f97316;color:#fff;font-size:13px;font-weight:900;letter-spacing:2px;padding:12px 36px;border-radius:30px;cursor:pointer;box-shadow:0 4px 20px #f9731666;transition:all .2s ease;text-transform:uppercase;display:none}.splash-enter-btn.ready{display:inline-block;animation:pulse-orange 2s infinite}.splash-enter-btn:hover{transform:translateY(-1px);box-shadow:0 6px 25px #f97316b3;border-color:#fff}@keyframes pulse-orange{0%{box-shadow:0 0 #f97316b3}70%{box-shadow:0 0 0 12px #f9731600}to{box-shadow:0 0 #f9731600}}header.app-header{background:var(--bg-surface);border-bottom:1px solid var(--border-color);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 20px #0009;z-index:10;gap:16px}.brand-section{display:flex;align-items:center;gap:14px}.brand-icon-synth{width:32px;height:32px;stroke:var(--accent-orange);fill:none}.brand-titles{display:flex;flex-direction:column}.brand-title{font-size:16px;font-weight:900;letter-spacing:1.5px;color:#fff;display:flex;align-items:center;gap:8px}.brand-badge{font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;background:#f9731626;border:1px solid rgba(249,115,22,.4);color:var(--accent-orange)}.brand-subtitle{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text-muted)}.preset-selector-group{display:flex;align-items:center;gap:8px;background:#090c12;padding:6px 12px;border-radius:6px;border:1px solid var(--border-subtle)}.preset-label{font-size:10px;font-weight:900;color:var(--accent-orange);letter-spacing:1px}.preset-dropdown{background:#141822;border:1px solid var(--border-color);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px;outline:none;cursor:pointer}.transport-bar{display:flex;align-items:center;gap:12px;background:#0d1017;padding:6px 14px;border-radius:8px;border:1px solid var(--border-subtle)}.btn-transport{background:var(--bg-panel-elevated);border:1px solid var(--border-color);color:#fff;padding:6px 14px;font-size:11px;font-weight:800;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s ease}.btn-transport:hover{background:var(--border-color)}.btn-transport.playing{background:var(--accent-orange);border-color:#fb923c;color:#000;box-shadow:0 0 14px #f9731680}.bpm-control{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.bpm-input{width:52px;background:#000;border:1px solid var(--border-color);color:var(--accent-orange);font-family:var(--font-mono);font-size:13px;font-weight:800;padding:4px 6px;border-radius:4px;text-align:center;outline:none}.arp-control-group{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--text-muted)}.arp-select{background:#090c12;border:1px solid var(--border-color);color:var(--accent-cyan);font-size:10px;font-weight:800;padding:4px 6px;border-radius:4px;outline:none;cursor:pointer}.btn-random-acid{background:#1e2430;color:var(--accent-amber);border-color:#f59e0b66}main.synth-studio{flex:1;display:flex;flex-direction:column;gap:16px;padding:18px 24px;max-width:1720px;margin:0 auto;width:100%}.visualizer-container{width:100%}.oscilloscope-canvas{width:100%;height:55px;background:#040508;border-radius:6px;border:1px solid var(--border-subtle);display:block}.synth-rack{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.rack-module{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px #00000080}.module-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);padding-bottom:8px}.module-title{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-orange)}.module-knobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:center}.knob-unit{display:flex;flex-direction:column;align-items:center;gap:4px}.knob-label{font-size:9px;font-weight:800;color:var(--text-muted);letter-spacing:.5px}.rotary-knob{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#252d3a,#151a24);border:2px solid #333d4e;position:relative;cursor:ns-resize;box-shadow:0 4px 8px #0009}.rotary-knob-pointer{position:absolute;top:4px;left:50%;transform:translate(-50%);width:3px;height:12px;background:var(--accent-orange);border-radius:2px}.waveform-selector{width:100%;background:#090c12;border:1px solid var(--border-color);color:var(--text-main);padding:6px;font-size:11px;font-weight:700;border-radius:6px;outline:none;cursor:pointer}.sequencer-panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px #00000080}.sequencer-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);padding-bottom:8px}.seq-title-group{display:flex;align-items:center;gap:12px}.sequencer-title{font-size:12px;font-weight:900;letter-spacing:1.5px;color:var(--accent-orange)}.seq-hint{font-size:10px;color:var(--text-muted);font-weight:700}.step-channels-container{display:flex;flex-direction:column;gap:8px}.channel-row{display:grid;grid-template-columns:240px 1fr;gap:12px;align-items:center;background:#0d1017;padding:6px 12px;border-radius:6px;border:1px solid var(--border-subtle)}.channel-info{display:flex;align-items:center;gap:8px}.channel-btn-mute,.channel-btn-solo{width:20px;height:20px;font-size:9px;font-weight:800;border-radius:4px;border:1px solid var(--border-color);background:#1a202c;color:var(--text-muted);cursor:pointer}.channel-btn-mute.active{background:var(--accent-red);color:#fff;border-color:#f87171}.channel-btn-solo.active{background:var(--accent-amber);color:#000;border-color:#fde047}.channel-vol-slider{width:50px;height:4px;cursor:pointer;accent-color:var(--accent-orange)}.channel-name{font-size:11px;font-weight:800;color:#fff;white-space:nowrap}.steps-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:6px}.step-btn{height:32px;background:#181d28;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .1s ease}.step-btn:nth-child(4n+1),.step-btn:nth-child(4n+2),.step-btn:nth-child(4n+3),.step-btn:nth-child(4n+4){background:#151922}.step-btn:nth-child(n+5):nth-child(-n+8),.step-btn:nth-child(n+13):nth-child(-n+16){background:#202634}.step-btn.active{background:var(--accent-orange)!important;box-shadow:0 0 10px #f97316cc;border-color:#fb923c}.step-btn.current-step-tick{border-color:#fff!important;box-shadow:0 0 8px #fff}.fl-mode-toggle-group{display:flex;background:#0f131a;padding:2px;border-radius:6px;border:1px solid var(--border-color);gap:2px}.fl-mode-btn{background:transparent;border:none;color:var(--text-muted);font-family:var(--font-mono);font-size:11px;font-weight:800;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s ease}.fl-mode-btn.active{background:var(--accent-orange);color:#fff;box-shadow:0 0 10px #f9731680}.pattern-selector-group{display:flex;align-items:center;gap:6px;background:#11151f;border:1px solid var(--border-color);padding:4px 10px;border-radius:6px}.pat-label{font-family:var(--font-mono);font-size:10px;font-weight:800;color:var(--text-muted)}.pattern-dropdown{background:#1b212d;color:#fff;border:1px solid #2d3748;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:700;cursor:pointer;outline:none}.btn-preset-action{background:#1e2532;border:1px solid #334155;color:#94a3b8;font-family:var(--font-mono);font-size:10px;font-weight:800;padding:5px 8px;border-radius:4px;cursor:pointer;transition:all .15s ease}.btn-preset-action:hover{background:#334155;color:#fff;border-color:#64748b}.btn-record-audio{background:#1e1919;border-color:#7f1d1d;color:#f87171}.btn-record-audio:hover{background:#2b1717;border-color:#ef4444;color:#fff}.btn-record-audio.recording{background:#ef4444!important;color:#fff!important;border-color:#fca5a5!important;animation:pulse-red 1s infinite alternate}@keyframes pulse-red{0%{box-shadow:0 0 5px #ef444466}to{box-shadow:0 0 16px #ef4444e6}}.rec-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block;margin-right:2px}.btn-record-audio.recording .rec-dot{background:#fff}.btn-send-localdaw{background:#0f242a;border-color:#0e7490;color:#38bdf8;font-weight:800}.btn-send-localdaw:hover{background:#083344;border-color:#38bdf8;color:#fff}.step-btn{position:relative}.step-pitch-tag{position:absolute;bottom:2px;right:2px;font-size:8px;font-family:var(--font-mono);font-weight:900;color:#ffffffd9;pointer-events:none}.playlist-panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px #00000080}.playlist-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);padding-bottom:8px}.playlist-title-group{display:flex;align-items:center;gap:12px}.playlist-title{font-size:12px;font-weight:900;letter-spacing:1.5px;color:var(--accent-cyan)}.playlist-hint{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}.playlist-tools{display:flex;align-items:center;gap:8px}.playlist-legend-label{font-size:10px;font-family:var(--font-mono);color:var(--text-muted)}.brush-badge{font-size:10px;font-weight:800;font-family:var(--font-mono);padding:2px 8px;border-radius:4px;background:#f9731633;color:var(--accent-orange);border:1px solid var(--accent-orange)}.playlist-container{display:flex;flex-direction:column;gap:6px;background:#090c12;border:1px solid var(--border-color);border-radius:6px;padding:10px;overflow-x:auto}.playlist-ruler-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #1a202c;padding-bottom:6px}.track-header-spacer{width:170px;min-width:170px;font-size:10px;font-weight:800;font-family:var(--font-mono);color:var(--text-muted);letter-spacing:1px}.playlist-ruler-bars{display:grid;grid-template-columns:repeat(16,minmax(40px,1fr));gap:6px;flex:1}.ruler-bar-tick{text-align:center;font-size:10px;font-family:var(--font-mono);font-weight:800;color:var(--text-muted);padding:2px 0;border-radius:2px;background:#11151f}.ruler-bar-tick.current-bar-tick{background:var(--accent-cyan);color:#000;box-shadow:0 0 10px var(--accent-cyan)}.playlist-tracks-body{display:flex;flex-direction:column;gap:6px}.playlist-track-row{display:flex;align-items:center;gap:10px}.playlist-track-label{width:170px;min-width:170px;font-size:11px;font-weight:800;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-track-slots{display:grid;grid-template-columns:repeat(16,minmax(40px,1fr));gap:6px;flex:1}.track-bar-slot{height:38px;background:#131722;border:1px dashed #242c3d;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;font-family:var(--font-mono);transition:all .15s ease;position:relative;overflow:hidden}.track-bar-slot:hover{border-color:#475569;background:#1a202c}.track-bar-slot.filled-pat_1{background:linear-gradient(135deg,#f97316cc,#c2410ce6);border:1px solid #f97316;color:#fff;box-shadow:0 0 8px #f9731666}.track-bar-slot.filled-pat_2{background:linear-gradient(135deg,#06b6d4cc,#0e7490e6);border:1px solid #06b6d4;color:#fff;box-shadow:0 0 8px #06b6d466}.track-bar-slot.filled-pat_3{background:linear-gradient(135deg,#a855f7cc,#7e22cee6);border:1px solid #a855f7;color:#fff;box-shadow:0 0 8px #a855f766}.track-bar-slot.current-bar-active{outline:2px solid #fff;box-shadow:0 0 12px #fff}.piano-keyboard-panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px #00000080}.keyboard-container{display:flex;position:relative;height:120px;background:#000;border-radius:6px;overflow:hidden;border:1px solid var(--border-color)}.key-white{flex:1;background:#e2e8f0;border-right:1px solid #94a3b8;cursor:pointer;border-radius:0 0 4px 4px;position:relative;z-index:1}.key-white:hover{background:#f8fafc}.key-white.active{background:var(--accent-orange)!important;box-shadow:0 0 12px var(--accent-orange)}.key-black{position:absolute;width:3.2%;height:65%;background:#111;border-radius:0 0 3px 3px;z-index:2;cursor:pointer;border:1px solid #000}.key-black:hover{background:#222}.key-black.active{background:var(--accent-orange)!important;box-shadow:0 0 12px var(--accent-orange)}footer.app-footer{background:var(--bg-surface);border-top:1px solid var(--border-color);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted)}.footer-links{display:flex;gap:16px}.footer-link{color:var(--text-muted);text-decoration:none}.footer-link:hover{color:var(--accent-orange)}