:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#e2e8f0;background-color:#0a0a0f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}:root{--bg-primary: #0a0a0f;--bg-secondary: #14141f;--bg-tertiary: #1e1e2e;--accent: #7c3aed;--accent-glow: #a855f7;--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-muted: #64748b;--success: #10b981;--warning: #f59e0b;--border: #2d2d3f}*{box-sizing:border-box;margin:0;padding:0}.app{max-width:900px;margin:0 auto;padding:24px;min-height:100vh}.app-header{text-align:center;margin-bottom:32px;position:relative}.app-header h1{font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);margin-top:4px;font-size:.95rem}.listen-section{text-align:center;margin-bottom:24px}.input-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.midi-status{font-size:.8rem;color:var(--text-muted);margin-top:6px}.midi-error{font-size:.85rem;color:var(--warning);margin-top:8px}.error-card{display:flex;align-items:center;gap:12px;background:#f871711a;border:1px solid rgba(248,113,113,.3);border-radius:10px;padding:10px 14px;margin-top:10px;font-size:.85rem;color:#f87171}.error-retry-btn{background:#f8717126;color:#f87171;border:1px solid rgba(248,113,113,.3);border-radius:8px;padding:6px 14px;font-size:.8rem;cursor:pointer;white-space:nowrap;transition:background .2s}.error-retry-btn:hover{background:#f8717140}.listen-btn{padding:14px 48px;font-size:1.1rem;font-weight:600;border:2px solid var(--accent);background:transparent;color:var(--accent-glow);border-radius:50px;cursor:pointer;transition:all .2s}.listen-btn:hover{background:var(--accent);color:#fff}.listen-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 20px #7c3aed66;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 20px #7c3aed66}50%{box-shadow:0 0 30px #7c3aed99}}.volume-meter{margin-top:12px;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden;max-width:300px;margin-left:auto;margin-right:auto}.volume-bar{height:100%;background:linear-gradient(90deg,var(--success),var(--accent-glow));border-radius:3px;transition:width .05s}.collapsible-section{margin-bottom:12px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-secondary)}.collapsible-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-tertiary);border:none;color:var(--text-primary);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s}.collapsible-header:hover{background:#7c3aed1a}.collapsible-chevron{color:var(--text-muted);font-size:.8rem}.collapsible-content{padding:16px}.collapsible-section.closed .collapsible-content{display:none}.collapsible-section .chord-history,.collapsible-section .display-grid{margin-bottom:0}.visualizer-wrap{margin-bottom:16px;border-radius:8px;overflow:hidden;background:var(--bg-primary);border:1px solid var(--border)}.audio-visualizer-canvas{border-radius:8px}.section-group{margin-bottom:20px;border:1px solid var(--border);border-radius:14px;background:#14141f80;padding:4px}.section-group .collapsible-section{margin-bottom:4px;border-radius:8px}.section-group .collapsible-section:last-child{margin-bottom:0}.section-group-header{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;padding:8px 14px 4px;-webkit-user-select:none;user-select:none}.mode-switcher{display:flex;justify-content:center;gap:0;margin:20px auto 16px;background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--border);padding:4px;max-width:320px}.mode-tab{flex:1;padding:10px 20px;font-size:.9rem;font-weight:600;border:none;background:transparent;color:var(--text-secondary);border-radius:9px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.mode-tab:hover{color:var(--text-primary)}.mode-tab.active{background:linear-gradient(135deg,#7c3aed4d,#a855f733);color:var(--text-primary);box-shadow:0 0 12px #7c3aed26}.mode-active-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse-dot 1.5s ease-in-out infinite;flex-shrink:0}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.mode-panel{animation:fadeSlideIn .2s ease-out}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chord-history{text-align:center;margin-bottom:24px}.chord-history h3{font-size:.85rem;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.history-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.history-chip{padding:4px 12px;background:var(--bg-tertiary);border-radius:16px;font-size:.85rem;color:var(--text-secondary);border:1px solid var(--border)}.history-chip:last-child{color:var(--accent-glow);border-color:var(--accent)}.display-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}@media (max-width: 700px){.display-grid{grid-template-columns:1fr}}.chroma-display{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px}.chroma-display h3{font-size:.85rem;color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.chroma-bars{display:flex;gap:4px;align-items:stretch;min-height:120px}.chroma-bar-container{display:flex;flex-direction:column;align-items:center;flex:1;height:120px}.chroma-bar-wrapper{flex:1;width:100%;display:flex;align-items:flex-end}.chroma-bar{width:100%;background:var(--bg-tertiary);border-radius:3px 3px 0 0;transition:height .08s,background .15s;min-height:2px}.chroma-bar.active{background:linear-gradient(180deg,var(--accent-glow),var(--accent));box-shadow:0 0 8px #a855f74d}.chroma-label{font-size:.7rem;color:var(--text-muted);margin-top:4px;font-weight:500}.chroma-label.active{color:var(--accent-glow)}.chroma-bar-container{cursor:pointer;transition:transform .1s}.chroma-bar-container:hover{transform:scaleY(1.05)}.chroma-bar-container:hover .chroma-label{color:var(--text-primary)}.chroma-bar-container.pinned{position:relative}.chroma-bar-container.pinned:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#10b981;border-radius:0 0 3px 3px}.chroma-bar.pinned-bar{background:linear-gradient(180deg,#10b98180,#10b98133);position:absolute;bottom:0;left:0;width:100%;border-radius:3px 3px 0 0;pointer-events:none}.chroma-bar-wrapper{position:relative}.chroma-label.pinned{color:#10b981;font-weight:700}.pin-dot{display:inline-block;width:4px;height:4px;background:#10b981;border-radius:50%;margin-left:2px;vertical-align:middle}.chroma-pin-badge{font-size:.6rem;font-weight:500;color:#10b981;background:#10b9811f;padding:1px 6px;border-radius:8px;margin-left:8px;text-transform:none;letter-spacing:0}.chroma-hint{text-align:center;font-size:.7rem;color:var(--text-muted);margin-top:8px;font-style:italic}.key-chord-display{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px}.detection-box{margin-bottom:16px}.detection-box h3{font-size:.85rem;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:1px}.detected-value{font-size:1.8rem;font-weight:700;color:var(--text-primary);line-height:1.2}.confidence{font-size:.75rem;color:var(--text-muted)}.diatonic-chords{margin-top:12px}.diatonic-chords h3{font-size:.8rem;color:var(--text-muted);margin-bottom:8px}.chord-chips{display:flex;gap:6px;flex-wrap:wrap}.chord-chip{display:flex;flex-direction:column;align-items:center;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;transition:all .15s}.chord-chip.active{background:var(--accent);border-color:var(--accent-glow);box-shadow:0 0 10px #7c3aed4d}.chord-roman{font-size:.65rem;color:var(--text-muted)}.chord-chip.active .chord-roman{color:#ffffffb3}.chord-name{font-size:.85rem;font-weight:600}.chord-chip.clickable{cursor:pointer}.chord-chip.clickable:hover{border-color:var(--accent-glow);transform:translateY(-1px);box-shadow:0 2px 8px #7c3aed26}.chord-chip.selected{background:linear-gradient(135deg,#065f46,#10b981);border-color:#10b981;box-shadow:0 0 12px #10b9814d;animation:chord-pulse 1.5s ease-in-out infinite}.chord-chip.selected .chord-roman{color:#fffc}.chord-chip.selected .chord-name{color:#fff}.chords-hint{font-size:.55rem;font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0;margin-left:6px;opacity:.6}.detected-value.pulsing{animation:chord-pulse 1.5s ease-in-out infinite}@keyframes chord-pulse{0%,to{opacity:1}50%{opacity:.7;box-shadow:0 0 16px #10b98166}}.chroma-col{flex:1;display:flex;flex-direction:column;align-items:center}.chroma-quick-chords{display:flex;gap:2px;margin-top:4px}.chroma-qc-btn{padding:1px 4px;font-size:.5rem;font-weight:600;border-radius:3px;cursor:pointer;background:#10b9811f;border:1px solid rgba(16,185,129,.3);color:#10b981;transition:all .1s;line-height:1.2}.chroma-qc-btn:hover{background:#10b98140;border-color:#10b981;transform:scale(1.05)}.response-controls{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}.response-controls h3{font-size:.85rem;color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.selector-label{display:block;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px}.voice-selector{margin-bottom:14px}.voice-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.voice-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:10px;cursor:pointer;transition:all .15s;min-width:60px}.voice-chip:hover{border-color:var(--accent);color:var(--text-primary);transform:translateY(-1px)}.voice-chip.active{background:var(--accent);border-color:var(--accent-glow);color:#fff;box-shadow:0 0 12px #7c3aed4d}.voice-emoji{font-size:1.2rem;line-height:1}.voice-name{font-size:.7rem;font-weight:600;letter-spacing:.5px}.mode-selector{margin-bottom:16px}.mode-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.mode-btn{padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .15s}.mode-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.ai-volume-slider{max-width:260px}.respond-btn{padding:12px 40px;font-size:1rem;font-weight:600;background:linear-gradient(135deg,var(--accent),var(--accent-glow));border:none;color:#fff;border-radius:50px;cursor:pointer;transition:all .2s}.respond-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 0 20px #7c3aed66}.respond-btn:disabled{opacity:.5;cursor:not-allowed}.status-indicator{margin-top:12px;font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.ready{background:var(--success);box-shadow:0 0 6px #10b98180}.status-dot.loading{background:var(--warning);animation:blink 1s ease-in-out infinite}.status-dot.failed{background:#ef4444;box-shadow:0 0 6px #ef444466}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.selector-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}.selector-row .selector-label{margin-bottom:0}.auto-voice-btn{padding:3px 10px;font-size:.72rem;font-weight:600;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-muted);border-radius:12px;cursor:pointer;transition:all .2s;letter-spacing:.5px}.auto-voice-btn:hover{border-color:var(--accent);color:var(--text-secondary)}.auto-voice-btn.active{background:linear-gradient(135deg,#7c3aed,#ec4899);border-color:#ec4899;color:#fff;box-shadow:0 0 10px #ec48994d}.voice-chips.dimmed{opacity:.35;pointer-events:none}.voice-chip:disabled{cursor:not-allowed}.jam-recorder{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:0;margin-top:20px;overflow:hidden}.recorder-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.rec-btn{display:flex;align-items:center;gap:6px;padding:8px 18px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s}.rec-btn:hover{border-color:#ef4444;color:var(--text-primary)}.rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;opacity:.5;transition:all .2s}.rec-btn:hover .rec-dot{opacity:1}.rec-btn.recording{border-color:#ef4444;background:#ef44441a;color:#fca5a5}.rec-dot.active{opacity:1;box-shadow:0 0 8px #ef444499;animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{0%,to{box-shadow:0 0 8px #ef444499}50%{box-shadow:0 0 16px #ef4444e6}}.wav-rec-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;cursor:pointer;font-size:.8rem;font-weight:500;transition:all .2s}.wav-rec-btn:hover{border-color:#f59e0b;color:var(--text-primary)}.wav-rec-btn.active{border-color:#f59e0b;background:#f59e0b1a;color:#fbbf24;animation:wav-pulse 2s ease-in-out infinite}@keyframes wav-pulse{0%,to{box-shadow:0 0 #f59e0b33}50%{box-shadow:0 0 0 4px #f59e0b00}}.playback-status{font-size:.8rem;color:var(--accent-glow);animation:blink 1.5s ease-in-out infinite}.saved-sequences{border-top:1px solid var(--border);padding:12px 16px}.no-sequences{font-size:.85rem;color:var(--text-muted);text-align:center;padding:12px 0}.sequence-list{display:flex;flex-direction:column;gap:8px}.sequence-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;transition:border-color .15s}.sequence-item:hover{border-color:var(--accent)}.sequence-info{display:flex;flex-direction:column;gap:2px}.section-tags{display:flex;gap:4px;width:100%;order:3}.section-tag-chip{font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}.section-tag-chip:hover{border-color:var(--tag-color);color:var(--tag-color)}.section-tag-chip.active{font-weight:700}.section-badge{display:inline-block;font-size:.6rem;font-weight:700;color:#000;padding:1px 6px;border-radius:6px;margin-left:6px;vertical-align:middle}.song-builder{display:flex;flex-direction:column;gap:16px}.sb-section-title{font-size:.85rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}.sb-hint{font-size:.72rem;color:var(--text-muted);margin:0 0 8px}.sb-untagged-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;margin-bottom:6px}.sb-seq-name{font-size:.8rem;font-weight:600;color:var(--text-primary);flex:1}.sb-seq-meta{font-size:.7rem;color:var(--text-muted)}.sb-suggest-btn{font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:10px;border:1px solid;background:transparent;cursor:pointer;transition:all .15s}.sb-suggest-btn:hover{background:color-mix(in srgb,var(--tag-color) 20%,transparent)}.sb-parts-grid{display:flex;gap:8px;flex-wrap:wrap}.sb-part{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid;border-radius:8px;background:var(--bg-tertiary)}.sb-part-label{font-size:.75rem;font-weight:700}.sb-part-count{font-size:.65rem;color:var(--text-muted)}.sb-part-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text-muted);font-size:.6rem;cursor:pointer}.sb-part-preview:hover{border-color:var(--accent);color:var(--text-primary)}.sb-part-preview:disabled{opacity:.4;cursor:default}.sb-template-chips{display:flex;gap:6px;flex-wrap:wrap}.sb-template-chip{font-size:.72rem;font-weight:600;padding:5px 14px;border-radius:16px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:all .15s}.sb-template-chip:hover{border-color:var(--accent);color:var(--text-primary)}.sb-template-chip.active{background:#7c3aed33;border-color:var(--accent);color:var(--text-primary)}.sb-timeline{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.sb-timeline-block{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid;border-radius:8px;position:relative;overflow:hidden}.sb-timeline-block:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--dur-pct, 0%);background:currentColor;opacity:.08;border-radius:8px 0 0 8px;transition:width .4s ease}.sb-timeline-block.empty{opacity:.5;border-style:dashed}.sb-block-label{font-size:.75rem;font-weight:700;min-width:50px;position:relative;z-index:1}.sb-block-dur{font-size:.6rem;color:var(--text-muted);opacity:.7;position:relative;z-index:1}.sb-block-missing{font-size:.6rem;color:var(--text-muted);font-style:italic;position:relative;z-index:1}.sb-block-actions{margin-left:auto;display:flex;gap:4px;position:relative;z-index:1}.sb-block-actions button{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-muted);font-size:.6rem;cursor:pointer}.sb-block-actions button:hover{border-color:var(--accent);color:var(--text-primary)}.sb-block-actions button:disabled{opacity:.3;cursor:default}.sb-add-section{display:flex;gap:6px;flex-wrap:wrap}.sb-add-btn{font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:10px;border:1px dashed var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}.sb-add-btn:hover{border-color:var(--tag-color);color:var(--tag-color);border-style:solid}.sb-arrangement-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.sb-play-btn,.sb-stop-btn{font-size:.72rem;font-weight:700;padding:5px 14px;border-radius:16px;border:none;cursor:pointer;transition:all .15s}.sb-play-btn{background:var(--accent);color:#fff}.sb-play-btn:hover{background:#7c3aed}.sb-play-btn:disabled{opacity:.4;cursor:default}.sb-stop-btn{background:#ef4444;color:#fff}.sb-stop-btn:hover{background:#dc2626}.sb-now-playing{font-size:.72rem;font-weight:600;color:var(--accent);padding:4px 8px;background:#7c3aed1a;border-radius:6px;margin-bottom:6px;animation:pulse 1.5s ease-in-out infinite}.sb-timeline-block.playing{box-shadow:0 0 12px #7c3aed4d;border-width:2px}.sb-timeline-block.playing:after{content:"";position:absolute;left:var(--play-pct, 0%);top:0;bottom:0;width:2px;background:#ef4444;box-shadow:0 0 6px #ef4444;border-radius:1px;transition:left .15s linear;z-index:2}.sequence-name{font-size:.9rem;font-weight:600;color:var(--text-primary)}.sequence-meta{font-size:.72rem;color:var(--text-muted)}.sequence-actions{display:flex;gap:6px}.seq-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .15s}.seq-btn:hover{border-color:var(--accent);color:var(--text-primary);transform:translateY(-1px)}.seq-btn.play:hover{border-color:var(--success);color:var(--success)}.seq-btn.loop:hover{border-color:var(--accent-glow);color:var(--accent-glow)}.seq-btn.export:hover{border-color:var(--warning);color:var(--warning)}.seq-btn.share:hover{border-color:#22d3ee;color:#22d3ee}.seq-btn.delete:hover{border-color:#ef4444;color:#ef4444}.seq-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.style-selector-v2{margin-bottom:18px}.style-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}.style-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px 12px;background:var(--bg-tertiary);border:2px solid var(--border);border-radius:14px;cursor:pointer;overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);z-index:0}.style-card-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--style-gradient);opacity:0;transition:opacity .3s;z-index:-1}.style-card:hover{border-color:var(--style-color);transform:translateY(-3px) scale(1.02);box-shadow:0 6px 20px var(--style-glow)}.style-card:hover .style-card-bg{opacity:.12}.style-card.active{border-color:var(--style-color);box-shadow:0 0 18px var(--style-glow),0 0 40px #0000004d;transform:translateY(-2px);animation:styleCardPulse 2.5s ease-in-out infinite}.style-card.active .style-card-bg{opacity:.2}.style-card-icon{font-size:1.6rem;line-height:1;filter:drop-shadow(0 0 6px var(--style-glow));transition:transform .3s,filter .3s}.style-card:hover .style-card-icon{transform:scale(1.15);filter:drop-shadow(0 0 10px var(--style-glow))}.style-card.active .style-card-icon{animation:iconBounce 2s ease-in-out infinite}.style-card-name{font-size:.82rem;font-weight:700;color:var(--text-primary);letter-spacing:.5px;text-transform:uppercase;transition:color .2s}.style-card.active .style-card-name{color:var(--style-color);text-shadow:0 0 12px var(--style-glow)}.style-card-vibe{font-size:.62rem;color:var(--text-muted);font-weight:400;letter-spacing:.3px;transition:color .2s}.style-card:hover .style-card-vibe{color:var(--text-secondary)}.style-card-wave{font-size:.6rem;color:var(--style-color);font-family:monospace;letter-spacing:2px;opacity:0;animation:waveAppear .4s ease forwards;margin-top:2px}@keyframes styleCardPulse{0%,to{box-shadow:0 0 18px var(--style-glow),0 0 40px #0000004d}50%{box-shadow:0 0 24px var(--style-glow),0 0 50px #0003}}@keyframes iconBounce{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.1) translateY(-2px)}}@keyframes waveAppear{0%{opacity:0;transform:translateY(4px)}to{opacity:.7;transform:translateY(0)}}.style-chip{display:none}.voice-chip{min-width:52px;padding:6px 8px}.voice-emoji{font-size:1.1rem}.voice-name{font-size:.65rem}.piano-keyboard{margin-bottom:20px;overflow-x:auto}.piano-keys{display:flex;position:relative;height:100px;max-width:600px;margin:0 auto;border-radius:0 0 8px 8px;overflow:hidden}.piano-key{position:relative;display:flex;align-items:flex-end;justify-content:center;transition:background .08s,box-shadow .08s;border:1px solid var(--border)}.piano-key.white{flex:1;height:100%;background:#1e1e2e;border-radius:0 0 4px 4px;z-index:1}.piano-key.black{width:24px;height:62%;background:#0a0a0f;margin-left:-12px;margin-right:-12px;z-index:2;border-radius:0 0 3px 3px;border-color:#111}.piano-key.white.active{background:linear-gradient(180deg,var(--accent-glow),var(--accent));box-shadow:0 0 12px #a855f780;border-color:var(--accent)}.piano-key.black.active{background:linear-gradient(180deg,var(--accent-glow),#6d28d9);box-shadow:0 0 10px #a855f780}.piano-key.white.in-scale{background:#252540;border-color:#7c3aed33}.piano-key.black.in-scale{background:#1a1a30}.piano-key.white.played{background:linear-gradient(180deg,#10b981,#059669);box-shadow:0 0 14px #10b98180;border-color:#10b981}.piano-key.black.played{background:linear-gradient(180deg,#10b981,#047857);box-shadow:0 0 10px #10b98180}.piano-key.played .key-label{color:#fff}.key-label{font-size:.55rem;color:var(--text-muted);padding-bottom:4px;pointer-events:none;-webkit-user-select:none;user-select:none}.piano-key.active .key-label{color:#fff}@media (max-width: 500px){.piano-keys{height:70px}.piano-key.black{width:18px;margin-left:-9px;margin-right:-9px}}.jam-controls{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;text-align:center;position:relative;overflow:hidden}.jam-controls.active{border-color:transparent;background-clip:padding-box}.jam-controls-header{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}.jam-controls-header h3{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.jam-state-indicator{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:600;transition:all .3s ease}.jam-state-indicator.idle{background:var(--bg-tertiary);color:var(--text-muted)}.jam-state-indicator.listening{background:#10b9811f;color:#34d399;border:1px solid rgba(16,185,129,.25);animation:state-breathe 2s ease-in-out infinite}.jam-state-indicator.thinking{background:#f59e0b1f;color:#fbbf24;border:1px solid rgba(245,158,11,.25);animation:state-think .8s ease-in-out infinite}.jam-state-indicator.playing{background:#7c3aed26;color:var(--accent-glow);border:1px solid rgba(124,58,237,.3);animation:state-play .6s ease-in-out infinite}.jam-state-indicator.breathing{background:#06b6d41a;color:#22d3ee;border:1px solid rgba(6,182,212,.2);animation:state-breathe 3s ease-in-out infinite}@keyframes state-breathe{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}@keyframes state-think{0%,to{opacity:.7}50%{opacity:1}}@keyframes state-play{0%,to{box-shadow:0 0 #7c3aed00}50%{box-shadow:0 0 12px #7c3aed4d}}.state-emoji{font-size:.9rem;line-height:1}.state-label{letter-spacing:.3px}.cycle-count{font-size:.7rem;opacity:.6;margin-left:2px}.jam-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.jam-start-btn,.jam-stop-btn,.jam-with-beat-btn,.ai-mode-btn,.vibe-lock-btn{display:flex;align-items:center;gap:6px;padding:10px 20px;font-size:.88rem;font-weight:600;border-radius:24px;cursor:pointer;transition:all .2s ease;border:1.5px solid transparent}.jam-btn-icon{font-size:1.05rem;line-height:1}.jam-start-btn{background:linear-gradient(135deg,#059669,#10b981);border-color:#10b981;color:#fff;box-shadow:0 2px 10px #10b98140}.jam-start-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #10b98166}.jam-start-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.jam-with-beat-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px #7c3aed59}.jam-with-beat-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #7c3aed73}.jam-stop-btn{background:linear-gradient(135deg,#dc2626,#ef4444);border-color:#ef4444;color:#fff;box-shadow:0 2px 10px #ef444440}.jam-stop-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #ef444466}.ai-mode-btn{background:var(--bg-tertiary);border-color:var(--border);color:var(--text-secondary)}.ai-mode-btn:hover:not(:disabled){border-color:#f59e0b;color:var(--text-primary)}.ai-mode-btn.active{background:linear-gradient(135deg,#b45309,#f59e0b);border-color:#f59e0b;color:#fff;box-shadow:0 0 14px #f59e0b4d;animation:ai-glow 2.5s ease-in-out infinite}@keyframes ai-glow{0%,to{box-shadow:0 0 14px #f59e0b4d}50%{box-shadow:0 0 22px #f59e0b80}}.ai-mode-btn:disabled{opacity:.35;cursor:not-allowed}.vibe-lock-btn{background:var(--bg-tertiary);border-color:var(--border);color:var(--text-secondary)}.vibe-lock-btn:hover:not(:disabled){border-color:#06b6d4;color:var(--text-primary)}.vibe-lock-btn.active{background:linear-gradient(135deg,#0e7490,#06b6d4);border-color:#06b6d4;color:#fff;box-shadow:0 0 12px #06b6d44d}.vibe-lock-btn:disabled{opacity:.35;cursor:not-allowed}.jam-session-stats{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px;font-size:.78rem;font-weight:600;color:var(--text-muted);letter-spacing:.3px}.stat-item{color:var(--text-secondary)}.stat-key{color:var(--accent-glow)}.stat-sep{opacity:.35}.jam-context-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-size:.75rem;color:var(--text-muted)}.context-heard{color:#34d399}.context-arrow{opacity:.4}.context-playing{color:var(--accent-glow)}.auto-rec-btn{padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:16px;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .2s}.auto-rec-btn:hover{border-color:#ef4444;color:var(--text-primary)}.auto-rec-btn.active{background:#ef44441a;border-color:#ef4444;color:#fca5a5}.save-to-creator-btn{padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:16px;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .2s}.save-to-creator-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-glow)}.save-to-creator-btn:disabled{opacity:.35;cursor:not-allowed}.practice-loop-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px}.practice-loop-header h3{font-size:.95rem;color:var(--text-primary);margin-bottom:4px}.practice-loop-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:16px;line-height:1.4}.practice-progression-select label,.practice-bpm label,.practice-volume label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.progression-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.progression-chip{padding:6px 12px;font-size:.82rem;font-weight:500;border-radius:16px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.progression-chip:hover{border-color:var(--accent);color:var(--text-primary)}.progression-chip.active{background:#7c3aed33;border-color:var(--accent);color:var(--text-primary)}.practice-controls-row{display:flex;gap:24px;margin-bottom:16px;flex-wrap:wrap}.practice-bpm,.practice-volume{flex:1;min-width:140px}.practice-bpm input,.practice-volume input{width:100%;margin-right:8px}.practice-bpm span{font-size:.85rem;color:var(--text-secondary);margin-left:6px}.practice-toggle-row{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}.practice-start-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;border-radius:24px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.practice-start-btn:hover{border-color:var(--accent);color:var(--text-primary)}.practice-start-btn.active{background:linear-gradient(135deg,#10b98140,#05966933);border-color:#10b981;color:#10b981}.practice-scale-toggle{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary);cursor:pointer}.practice-scale-toggle input{cursor:pointer}.practice-current{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.practice-chords{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.practice-chord-chip{padding:6px 12px;font-size:.9rem;font-weight:600;border-radius:8px;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}.practice-chord-chip.current{background:#7c3aed40;border-color:var(--accent);color:var(--text-primary)}.practice-notes-hint{font-size:.8rem;color:var(--text-muted);display:flex;flex-direction:column;gap:2px}.jam-ring-container{display:flex;justify-content:center;margin-top:16px;perspective:200px}.jam-ring{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:all .5s ease}.jam-ring:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:2px solid transparent;transition:all .5s ease}.jam-ring.listening:before{border-color:#10b981;box-shadow:0 0 20px #10b9814d;animation:ring-rotate 4s linear infinite}.jam-ring.thinking:before{border-color:#f59e0b;border-style:dashed;box-shadow:0 0 16px #f59e0b4d;animation:ring-rotate 1.5s linear infinite}.jam-ring.playing:before{border-color:var(--accent-glow);box-shadow:0 0 24px #a855f766;animation:ring-pulse-border .8s ease-in-out infinite}.jam-ring.breathing:before{border-color:#06b6d4;box-shadow:0 0 12px #06b6d433;animation:ring-breathe 3s ease-in-out infinite}@keyframes ring-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ring-pulse-border{0%,to{top:-4px;right:-4px;bottom:-4px;left:-4px;opacity:.7}50%{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}}@keyframes ring-breathe{0%,to{top:-4px;right:-4px;bottom:-4px;left:-4px;opacity:.5}50%{top:-6px;right:-6px;bottom:-6px;left:-6px;opacity:.8}}.jam-ring-inner{width:60px;height:60px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;z-index:1}.ring-emoji{font-size:1.6rem;line-height:1}.jam-ring.listening .jam-ring-inner{background:radial-gradient(circle,rgba(16,185,129,.08),var(--bg-tertiary))}.jam-ring.thinking .jam-ring-inner{background:radial-gradient(circle,rgba(245,158,11,.08),var(--bg-tertiary))}.jam-ring.playing .jam-ring-inner{background:radial-gradient(circle,rgba(124,58,237,.12),var(--bg-tertiary))}.jam-ring.breathing .jam-ring-inner{background:radial-gradient(circle,rgba(6,182,212,.06),var(--bg-tertiary))}@media (max-width: 500px){.jam-buttons{flex-direction:column;align-items:stretch}.jam-start-btn,.jam-stop-btn,.jam-with-beat-btn,.ai-mode-btn,.vibe-lock-btn{justify-content:center}.jam-ring{width:64px;height:64px}.jam-ring-inner{width:48px;height:48px}.ring-emoji{font-size:1.3rem}}.beat-controls{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}.beat-controls.active{border-color:#f59e0b4d}.beat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.beat-header h3{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.beat-toggle{display:flex;align-items:center;gap:6px;padding:6px 16px;font-size:.82rem;font-weight:600;border-radius:20px;cursor:pointer;transition:all .2s;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary)}.beat-toggle:hover{border-color:#f59e0b;color:var(--text-primary)}.beat-toggle.playing{background:linear-gradient(135deg,#b45309,#f59e0b);border-color:#f59e0b;color:#fff;box-shadow:0 0 10px #f59e0b40}.beat-toggle-icon{font-size:.9rem}.beat-step-indicator{display:flex;gap:4px;justify-content:center;margin-bottom:12px}.beat-step-dot{width:8px;height:8px;border-radius:50%;background:var(--bg-tertiary);border:1px solid var(--border);transition:all .05s}.beat-step-dot.downbeat{width:10px;height:10px;border-color:#f59e0b4d}.beat-step-dot.active{background:#f59e0b;border-color:#f59e0b;box-shadow:0 0 8px #f59e0b80;transform:scale(1.3)}.beat-patterns{margin-bottom:12px}.beat-pattern-chips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:6px}.beat-pattern-chip{padding:5px 10px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .15s}.beat-pattern-chip:hover{border-color:#f59e0b;color:var(--text-primary)}.beat-pattern-chip.active{background:linear-gradient(135deg,#92400e,#d97706);border-color:#f59e0b;color:#fff;box-shadow:0 0 8px #f59e0b33}.beat-sliders{display:flex;gap:16px}.beat-slider-group{flex:1;display:flex;flex-direction:column;gap:4px}.beat-slider-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;display:flex;justify-content:space-between}.beat-slider-value{color:#f59e0b;font-weight:600}.beat-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--bg-tertiary);outline:none}.beat-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#f59e0b;cursor:pointer;border:2px solid var(--bg-secondary);box-shadow:0 0 6px #f59e0b4d}.beat-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#f59e0b;cursor:pointer;border:2px solid var(--bg-secondary)}@media (max-width: 500px){.beat-sliders{flex-direction:column;gap:10px}}.step-sequencer{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}.seq-preset-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:8px}.seq-preset-label{font-size:.7rem;color:var(--text-muted);font-weight:600;margin-right:2px}.seq-preset-chip{padding:3px 10px;border-radius:12px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);font-size:.68rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.seq-preset-chip:hover{border-color:#a855f7;color:var(--text-primary);background:#a855f71a}.seq-beatbox-chip{border-color:#f97316;color:#fb923c;background:#f9731614}.seq-beatbox-chip:hover{border-color:#f97316;background:#f9731633;color:#fb923c;box-shadow:0 0 8px #f9731626}.beatbox-status{display:flex;align-items:center;justify-content:center;padding:10px;margin-top:6px;border-radius:8px;background:#f973161a;border:1px solid rgba(249,115,22,.3);font-weight:600;color:#fb923c;font-size:.85rem}.beatbox-countdown{font-size:1.4rem;font-weight:800;animation:beatboxPulse .8s ease-in-out infinite}.beatbox-recording{animation:rec-pulse 1s ease-in-out infinite}@keyframes beatboxPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}.live-rec-status{background:#ef44441a;border-color:#ef44444d;color:#f87171}.live-rec-pulse{color:#ef4444}.seq-transport{display:flex;flex-direction:column;gap:8px}.seq-transport-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.seq-btn{padding:6px 16px;font-size:.82rem;font-weight:600;border-radius:20px;cursor:pointer;transition:all .2s;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap}.seq-btn:hover{border-color:#f59e0b;color:var(--text-primary)}.seq-btn.playing{background:linear-gradient(135deg,#b45309,#f59e0b);border-color:#f59e0b;color:#fff;box-shadow:0 0 10px #f59e0b40}.seq-btn:disabled{opacity:.4;cursor:default}.seq-transport-group{display:flex;align-items:center;gap:6px;flex:1;min-width:100px}.seq-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.seq-val{color:#f59e0b;font-weight:600}.seq-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:var(--bg-tertiary);outline:none}.seq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#f59e0b;cursor:pointer;border:2px solid var(--bg-secondary)}.seq-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f59e0b;cursor:pointer;border:2px solid var(--bg-secondary)}.seq-step-btns{display:flex;gap:4px}.seq-btn-sm{padding:3px 10px;font-size:.72rem;font-weight:600;border-radius:6px;cursor:pointer;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-muted);transition:all .15s}.seq-btn-sm.active{background:#f59e0b26;border-color:#f59e0b;color:#f59e0b}.seq-step-indicator{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}.seq-step-dot{width:6px;height:6px;border-radius:50%;background:var(--bg-tertiary);border:1px solid var(--border);transition:all .05s}.seq-step-dot.beat{width:8px;height:8px;border-color:#f59e0b4d}.seq-step-dot.active{background:#f59e0b;border-color:#f59e0b;box-shadow:0 0 6px #f59e0b80;transform:scale(1.3)}.seq-grid-area{display:flex;gap:0;overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:#0a0a14}.seq-row-controls{display:flex;flex-direction:column;flex-shrink:0;width:140px;border-right:1px solid var(--border)}.seq-row-ctrl{display:flex;flex-direction:column;gap:2px;padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.04);min-height:32px;justify-content:center}.seq-row-ctrl:last-child{border-bottom:none}.seq-row-header{display:flex;align-items:center;gap:4px}.seq-row-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.seq-row-label{font-size:.7rem;color:var(--text-secondary);cursor:default;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px}.seq-row-label-input{font-size:.7rem;background:var(--bg-tertiary);border:1px solid #f59e0b;color:var(--text-primary);border-radius:4px;padding:1px 4px;width:80px;outline:none}.seq-row-btns{display:flex;align-items:center;gap:3px}.seq-btn-mini{padding:1px 5px;font-size:.6rem;font-weight:700;border-radius:3px;cursor:pointer;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-muted);transition:all .1s}.seq-btn-mini:hover{border-color:var(--text-muted)}.seq-btn-mini.active-mute{background:#ef444433;border-color:#ef4444;color:#ef4444}.seq-btn-mini.active-solo{background:#f59e0b33;border-color:#f59e0b;color:#f59e0b}.seq-btn-del{color:#ef444480}.seq-btn-del:hover{color:#ef4444;border-color:#ef4444}.seq-btn-rec{display:flex;align-items:center;justify-content:center;min-width:20px;padding:2px 4px}.seq-btn-rec:hover{border-color:#ef4444}.seq-btn-rec:hover .rec-dot{background:#ef4444}.rec-dot{width:8px;height:8px;border-radius:50%;background:#ef444499}.seq-btn-rec.recording .rec-dot{background:#ef4444;animation:rec-pulse .8s ease-in-out infinite}.seq-btn-rec.recording{border-color:#ef4444}@keyframes rec-pulse{0%,to{opacity:1;box-shadow:0 0 4px #ef444466}50%{opacity:.4;box-shadow:0 0 10px #ef4444cc}}.seq-btn-swap:hover{color:#a855f7;border-color:#a855f7}.seq-btn-fx{font-size:.55rem}.seq-btn-fx:hover{color:#22d3ee;border-color:#22d3ee}.seq-row-vol{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:3px;border-radius:2px;background:var(--bg-tertiary);outline:none}.seq-row-vol::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--text-muted);cursor:pointer}.seq-row-vol::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--text-muted);cursor:pointer}.seq-row-fx{display:flex;gap:8px;padding:2px 0}.seq-fx-label{font-size:.58rem;color:var(--text-muted);display:flex;align-items:center;gap:3px}.seq-fx-val{color:#22d3ee;font-weight:600;min-width:24px}.seq-fx-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:2px;border-radius:1px;background:var(--bg-tertiary);outline:none}.seq-fx-slider::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:6px;border-radius:50%;background:#22d3ee;cursor:pointer}.seq-grid{display:flex;flex-direction:column;flex:1;min-width:0}.seq-grid-row{display:grid;grid-template-columns:repeat(var(--seq-steps, 16),1fr);border-bottom:1px solid rgba(255,255,255,.04);min-height:32px}.seq-grid-row:last-child{border-bottom:none}.seq-cell{min-width:0;min-height:32px;border-right:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background-color .05s;position:relative;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;overflow:hidden}.seq-cell:last-child{border-right:none}.seq-cell.beat{border-left:1px solid rgba(255,255,255,.1)}.seq-cell:hover{background-color:#ffffff0f}.seq-cell.active{border-radius:2px;box-shadow:inset 0 0 4px #0000004d}.seq-cell.stretched{z-index:2}.seq-cell.continuation{visibility:hidden}.seq-stretch-handle{position:absolute;right:0;top:0;width:6px;height:100%;cursor:ew-resize;background:#ffffff26;border-radius:0 2px 2px 0;opacity:0;transition:opacity .15s}.seq-cell.stretched:hover .seq-stretch-handle,.seq-cell.active:hover .seq-stretch-handle{opacity:1}.seq-cell-note{font-size:.55rem;font-weight:700;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;letter-spacing:-.02em}.seq-cell.has-note{cursor:ns-resize}.seq-cell.playhead{background-color:#f59e0b1f!important}.seq-cell.playhead:after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:#f59e0b}.seq-toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}.seq-btn-tool{padding:5px 10px;font-size:.72rem;font-weight:500;border-radius:6px;cursor:pointer;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);transition:all .15s;white-space:nowrap}.seq-btn-tool:hover{border-color:#a855f7;color:var(--text-primary)}.seq-btn-tool:disabled{opacity:.4;cursor:default}.seq-dropdown-wrap{position:relative}.seq-dropdown{position:absolute;top:100%;left:0;z-index:50;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:4px;margin-top:4px;min-width:150px;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px #0006}.seq-dropdown-item{display:block;width:100%;padding:6px 10px;font-size:.72rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;text-align:left;border-radius:4px;transition:background .1s}.seq-dropdown-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.seq-dropdown-item-row{display:flex;align-items:center;gap:4px}.seq-dropdown-item-row .seq-dropdown-item{flex:1}.seq-dropdown-del{padding:4px 6px;font-size:.65rem;background:none;border:none;color:#ef444480;cursor:pointer;border-radius:4px}.seq-dropdown-del:hover{color:#ef4444;background:#ef44441a}.seq-dropdown-meta{color:var(--text-muted);font-size:.65rem;margin-left:4px}.seq-dropdown-empty{padding:8px;font-size:.7rem;color:var(--text-muted);text-align:center}.seq-browser-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0009;display:flex;align-items:center;justify-content:center;padding:20px}.seq-browser{background:var(--bg-primary);border:1px solid var(--border);border-radius:12px;width:100%;max-width:480px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000080}.seq-browser-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}.seq-browser-header h3{font-size:.9rem;color:var(--text-primary);margin:0}.seq-browser-search{flex:1;padding:5px 10px;font-size:.78rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);outline:none}.seq-browser-search:focus{border-color:#a855f7}.seq-browser-close{padding:4px 8px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem}.seq-browser-close:hover{color:var(--text-primary)}.seq-browser-cats{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--border)}.seq-cat-tab{padding:4px 10px;font-size:.68rem;font-weight:500;border-radius:12px;cursor:pointer;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap;transition:all .15s}.seq-cat-tab:hover{color:var(--text-primary);border-color:var(--text-muted)}.seq-cat-tab.active{background:#a855f726;border-color:#a855f7;color:#a855f7}.seq-browser-list{flex:1;overflow-y:auto;padding:8px}.seq-browser-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:.78rem}.seq-browser-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;transition:background .1s}.seq-browser-item:hover{background:var(--bg-tertiary)}.seq-browser-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.seq-browser-name{flex:1;font-size:.78rem;color:var(--text-secondary)}.seq-browser-preview,.seq-browser-select{padding:3px 8px;font-size:.68rem;font-weight:500;border-radius:4px;cursor:pointer;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-muted);transition:all .1s}.seq-browser-preview:hover{color:#10b981;border-color:#10b981}.seq-browser-select:hover{background:#a855f726;color:#a855f7;border-color:#a855f7}@media (max-width: 600px){.seq-transport-row{gap:8px}.seq-transport-group{min-width:80px}.seq-row-controls{width:100px}.seq-browser{max-width:95vw}}.app-nav{display:flex;gap:4px;justify-content:center;margin-top:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:4px;display:inline-flex}.app-header{display:flex;flex-direction:column;align-items:center}.nav-link{padding:8px 24px;font-size:.88rem;font-weight:600;color:var(--text-secondary);text-decoration:none;border-radius:8px;transition:all .15s;letter-spacing:.3px}.nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-link.active{color:#fff;background:var(--accent);box-shadow:0 0 12px #7c3aed4d}.page-subtitle{color:var(--text-secondary);text-align:center;margin:8px 0 24px;font-size:.92rem}.quick-start-presets{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}.presets-hero{text-align:center;margin-bottom:4px}.presets-hero-title{font-size:1.4rem;font-weight:700;color:var(--text-primary);margin:0 0 4px}.presets-hero-sub{font-size:.9rem;color:var(--text-muted);margin:0}.preset-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:900px}.preset-chip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 18px 10px;font-size:.85rem;font-weight:500;border-radius:14px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;min-width:90px}.preset-chip:hover:not(:disabled){border-color:var(--accent);color:var(--text-primary);background:var(--bg-tertiary);transform:translateY(-2px);box-shadow:0 4px 12px #7c3aed33}.preset-chip.active{background:linear-gradient(135deg,#7c3aed40,#a855f733);border-color:var(--accent);color:var(--text-primary);box-shadow:0 0 12px #7c3aed4d}.preset-emoji{font-size:1.4rem;line-height:1}.preset-label{font-weight:600;font-size:.85rem}.preset-desc{font-size:.7rem;color:var(--text-muted);white-space:nowrap}.quick-start-presets.collapsed{margin-bottom:8px;gap:0}.preset-chips.compact{gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin}.preset-chips.compact::-webkit-scrollbar{height:3px}.preset-chips.compact::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.preset-chips.compact .preset-chip{flex-direction:row;padding:6px 12px;min-width:unset;gap:5px;border-radius:20px;white-space:nowrap;flex-shrink:0}.preset-chips.compact .preset-emoji{font-size:1rem}.preset-chips.compact .preset-label{font-size:.75rem}.page-content{padding-top:8px}.creator-controls{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}.creator-section{margin-bottom:16px}.genre-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.genre-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;background:var(--bg-tertiary);border:1.5px solid var(--border);color:var(--text-secondary);border-radius:10px;cursor:pointer;min-width:72px;transition:all .15s}.genre-btn:hover{border-color:var(--genre-color, var(--accent));color:var(--text-primary);transform:translateY(-1px)}.genre-btn.active{border-color:var(--genre-color, var(--accent));background:color-mix(in srgb,var(--genre-color, var(--accent)) 15%,var(--bg-tertiary));color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--genre-color, var(--accent)) 40%,transparent)}.genre-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.genre-icon{font-size:1.3rem;font-weight:800;line-height:1}.genre-label{font-size:.72rem;font-weight:600}.key-grid{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.key-btn{width:40px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1.5px solid var(--border);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .15s}.key-btn:hover{border-color:var(--accent);color:var(--text-primary)}.key-btn.active{background:var(--accent);border-color:var(--accent-glow);color:#fff;box-shadow:0 0 10px #7c3aed4d}.key-btn:disabled{opacity:.4;cursor:not-allowed}.mode-toggle{display:flex;gap:8px}.mode-btn{padding:10px 24px;font-size:.95rem;font-weight:500;border:2px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:8px;cursor:pointer;transition:all .2s}.mode-btn:hover{border-color:var(--accent);color:var(--text-primary)}.mode-btn.active{background:var(--accent);border-color:var(--accent-glow);color:#fff}.mode-btn:disabled{opacity:.4;cursor:not-allowed}.creator-generate{text-align:center;margin-top:20px}.generate-quality-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.quality-label{color:var(--text-secondary);font-size:.9rem}.quality-select{padding:6px 12px;font-size:.9rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer}.quality-select:disabled{opacity:.6;cursor:not-allowed}.generate-btn{padding:14px 48px;font-size:1.05rem;font-weight:700;background:linear-gradient(135deg,var(--genre-color, var(--accent)),color-mix(in srgb,var(--genre-color, var(--accent)) 70%,white));border:none;color:#fff;border-radius:50px;cursor:pointer;transition:all .2s;letter-spacing:.5px}.generate-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 4px 24px color-mix(in srgb,var(--genre-color, var(--accent)) 40%,transparent)}.generate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.generating-text{display:flex;align-items:center;gap:8px}.gen-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.creator-error{text-align:center;margin-top:12px;padding:10px 16px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#fca5a5;font-size:.85rem}.creator-server-offline{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;background:#f59e0b26;border:1px solid rgba(245,158,11,.4);border-radius:8px;color:var(--warning);font-size:.85rem}.creator-server-offline code{background:#0003;padding:2px 6px;border-radius:4px;font-size:.8rem}.candidates-picker{margin-top:20px;padding:16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px}.candidates-picker-title{font-size:.95rem;margin-bottom:12px;color:var(--text-primary)}.candidates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:12px}.candidate-card{padding:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;transition:all .15s}.candidate-card.playing{border-color:var(--accent);box-shadow:0 0 12px #7c3aed4d}.candidate-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;border-bottom:1px solid var(--border)}.candidate-label{font-weight:600;font-size:.85rem}.candidate-score{font-size:.8rem;color:var(--success)}.candidate-meta{font-size:.75rem;color:var(--text-muted);margin:6px 0}.candidate-actions{display:flex;gap:8px;margin-top:8px}.candidate-play,.candidate-pick{flex:1;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:600}.candidate-play:hover,.candidate-pick:hover{border-color:var(--accent);color:var(--accent-glow)}.candidate-play.active{background:var(--accent);border-color:var(--accent-glow);color:#fff}.candidate-pick{background:var(--accent);border-color:var(--accent);color:#fff}.candidate-pick:hover{background:var(--accent-glow);border-color:var(--accent-glow)}.candidates-dismiss{display:block;margin:0 auto;padding:6px 20px;border:1px solid var(--border);background:transparent;color:var(--text-muted);border-radius:6px;cursor:pointer;font-size:.8rem}.candidates-dismiss:hover{color:var(--text-secondary)}.samples-loading{text-align:center;padding:8px 16px;color:#7dd3fc;font-size:.8rem;display:flex;align-items:center;justify-content:center;gap:8px;animation:pulse-progress 1.5s ease-in-out infinite}.gen-progress{text-align:center;margin-top:8px;padding:6px 12px;color:#a78bfa;font-size:.8rem;opacity:.85;animation:pulse-progress 1.5s ease-in-out infinite}@keyframes pulse-progress{0%,to{opacity:.6}50%{opacity:1}}.generate-buttons-row{display:flex;gap:10px;justify-content:center;align-items:center}.generate-btn.deep-btn{background:linear-gradient(135deg,var(--genre-color, #7c3aed) 0%,#f59e0b 100%);font-size:.85rem}.generate-btn.deep-btn:hover:not(:disabled){box-shadow:0 0 20px #f59e0b66}.deep-progress{margin-top:12px;padding:12px 16px;background:#7c3aed14;border:1px solid rgba(124,58,237,.2);border-radius:10px}.deep-stages{display:flex;gap:4px;margin-bottom:8px}.deep-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}.deep-stage-bar{width:100%;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.deep-stage-fill{height:100%;border-radius:3px;background:#7c3aed4d;transition:width .3s ease}.deep-stage.active .deep-stage-fill{background:linear-gradient(90deg,#a855f7,#f59e0b);animation:pulse-progress 1.5s ease-in-out infinite}.deep-stage.done .deep-stage-fill{background:#10b981}.deep-stage-label{font-size:.65rem;color:#ffffff40}.deep-stage.active .deep-stage-label{color:#a855f7;font-weight:600}.deep-stage.done .deep-stage-label{color:#10b981}.deep-info{text-align:center;font-size:.75rem;color:#c4b5fd;animation:pulse-progress 1.5s ease-in-out infinite}.songs-list{margin-top:8px}.songs-list-header{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.songs-count{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--accent);color:#fff;border-radius:50%;font-size:.72rem;font-weight:700}.no-songs{text-align:center;color:var(--text-muted);padding:32px 16px;background:var(--bg-secondary);border:1px dashed var(--border);border-radius:12px;font-size:.9rem}.songs-grid{display:flex;flex-direction:column;gap:10px}.song-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:all .15s}.song-card:hover{border-color:var(--accent)}.song-card.playing{border-color:var(--accent-glow);box-shadow:0 0 16px #a855f733}.song-card-header{border-left:3px solid var(--accent);padding-left:12px;margin-bottom:10px}.song-card-title{font-size:1rem;font-weight:700;color:var(--text-primary)}.song-card-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}.song-card-tracks{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.track-badge{padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:600;background:var(--bg-tertiary);border:1px solid var(--border)}.track-badge.melody{color:#a855f7;border-color:#a855f74d}.track-badge.bass{color:#3b82f6;border-color:#3b82f64d}.track-badge.chords{color:#10b981;border-color:#10b9814d}.track-badge.drums{color:#f59e0b;border-color:#f59e0b4d}.song-card-actions{display:flex;gap:6px}.song-action-btn{padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .15s}.song-action-btn:hover{border-color:var(--accent);color:var(--text-primary)}.song-action-btn.play{min-width:36px;text-align:center}.song-action-btn.play:hover,.song-action-btn.play.active{border-color:var(--accent-glow);color:var(--accent-glow)}.song-action-btn.edit:hover{border-color:#10b981;color:#10b981}.song-action-btn.delete:hover{border-color:#ef4444;color:#ef4444}.song-action-btn.delete.confirming{border-color:#ef4444;color:#ef4444;background:#ef444426;animation:pulse-delete .6s ease-in-out infinite alternate;min-width:48px}@keyframes pulse-delete{0%{opacity:.8}to{opacity:1}}.song-quality-badge{display:inline-block;margin-left:8px;padding:1px 6px;font-size:.7rem;font-weight:600;border-radius:6px;background:#a855f733;color:#a855f7;vertical-align:middle}.song-progress-bar{position:relative;height:20px;background:#ffffff1a;border-radius:4px;margin:6px 0 8px;overflow:hidden;border:1px solid rgba(168,85,247,.2)}.song-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-glow),#a855f7);border-radius:4px;transition:width .15s linear}.song-progress-time{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fffc;font-weight:500;letter-spacing:.02em}.cancel-btn{padding:8px 16px;border-radius:8px;border:1px solid rgba(239,68,68,.4);background:#ef44441a;color:#ef4444;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease;margin-left:8px}.cancel-btn:hover{background:#ef444433;border-color:#ef4444}.midi-editor-page{max-width:100%}.editor-empty{text-align:center;padding:64px 24px;color:var(--text-muted);font-size:.95rem}.back-btn{margin-top:16px;padding:10px 28px;background:var(--accent);border:none;color:#fff;border-radius:24px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .15s}.back-btn:hover{transform:scale(1.03);box-shadow:0 0 16px #7c3aed66}.editor-header-info{text-align:center;margin-bottom:16px}.editor-song-title{font-size:1.2rem;font-weight:700;color:var(--text-primary)}.editor-song-meta{font-size:.8rem;color:var(--text-muted);margin-top:4px}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:12px}.track-toggles{display:flex;gap:6px;flex-wrap:wrap}.track-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-muted);border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .15s}.track-toggle:hover{border-color:var(--track-color);color:var(--text-primary)}.track-toggle.active{border-color:var(--track-color);color:var(--track-color);background:color-mix(in srgb,var(--track-color) 10%,var(--bg-tertiary))}.track-dot{width:8px;height:8px;border-radius:50%;background:var(--track-color);opacity:.3;transition:opacity .15s}.track-toggle.active .track-dot{opacity:1;box-shadow:0 0 6px var(--track-color)}.track-count{opacity:.5;font-size:.7rem}.track-toggle-group{display:flex;align-items:center;gap:2px}.track-solo-btn{width:24px;height:28px;padding:0;border-radius:4px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-muted);cursor:pointer;font-size:.7rem;font-weight:700;transition:all .15s}.track-solo-btn:hover{color:var(--warning);border-color:var(--warning)}.track-solo-btn.active{background:var(--warning);border-color:var(--warning);color:var(--bg-primary)}.transport-btn.fit-btn,.transport-btn.export-btn,.transport-btn.save-btn{padding:8px 14px;font-size:.8rem}.transport-btn.save-btn:disabled{opacity:.5;cursor:not-allowed}.editor-unsaved{font-size:.8rem;color:var(--warning);margin-top:6px}.transport-btn.analyze-btn{padding:8px 14px;font-size:.8rem}.transport-btn.analyze-btn.active{background:#dc2626;border-color:#ef4444;color:#fff;box-shadow:0 0 12px #ef44444d}.transport-btn.analyze-btn:not(.active):hover{background:#1e293b;border-color:#f97316;color:#f97316}.analysis-summary{display:flex;align-items:center;gap:16px;padding:8px 14px;background:#0f0f1ecc;border:1px solid var(--border);border-radius:8px;font-size:.8rem;color:var(--text-secondary);flex-wrap:wrap}.analysis-score{font-weight:700;color:var(--text-primary);font-size:.9rem}.analysis-counts{display:flex;align-items:center;gap:8px}.sev-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:700}.sev-badge.sev-high{background:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.4)}.sev-badge.sev-medium{background:#f9731633;color:#f97316;border:1px solid rgba(249,115,22,.4)}.sev-badge.sev-low{background:#eab30833;color:#eab308;border:1px solid rgba(234,179,8,.4)}.analysis-criteria{display:flex;gap:8px;flex-wrap:wrap}.criteria-chip{padding:2px 8px;border-radius:10px;font-size:.7rem;background:#7c3aed26;color:var(--text-muted);border:1px solid rgba(124,58,237,.3)}.flag-detail{display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:8px;font-size:.8rem;margin-top:4px}.flag-detail.sev-high{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444}.flag-detail.sev-medium{background:#f973161a;border:1px solid rgba(249,115,22,.3);color:#f97316}.flag-detail.sev-low{background:#eab3081a;border:1px solid rgba(234,179,8,.3);color:#eab308}.flag-reason{font-weight:700}.flag-detail-text{font-size:.75rem;color:var(--text-muted)}.transport-controls{display:flex;align-items:center;gap:12px}.transport-btn{padding:8px 20px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;font-weight:700;font-size:.85rem;transition:all .15s}.transport-btn.play:hover,.transport-btn.play.active{background:var(--accent);border-color:var(--accent-glow);color:#fff;box-shadow:0 0 12px #7c3aed4d}.zoom-control{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-muted)}.zoom-control input[type=range]{width:80px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:2px;outline:none}.zoom-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.piano-roll-container{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:400px;margin-bottom:12px;cursor:crosshair}.piano-roll-canvas{display:block;image-rendering:pixelated}.structure-bar{display:flex;border-radius:8px;overflow:hidden;height:28px;background:var(--bg-secondary);border:1px solid var(--border)}.structure-section{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);transition:all .15s}.structure-section:nth-child(odd){background:var(--bg-tertiary)}.structure-section:nth-child(2n){background:var(--bg-secondary)}.structure-section:last-child{border-right:none}.structure-section:hover{background:color-mix(in srgb,var(--accent) 15%,var(--bg-tertiary))}.structure-label{font-size:.65rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}.chat-panel{display:flex;flex-direction:column;gap:8px}.chat-messages{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.chat-msg{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;border-radius:12px;font-size:.8rem;line-height:1.4;max-width:90%;animation:chatFadeIn .2s ease-out}@keyframes chatFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.chat-msg.ai{background:#7c3aed1f;border:1px solid rgba(124,58,237,.2);align-self:flex-start;border-bottom-left-radius:4px}.chat-msg.ai.llm{background:#f973161a;border-color:#f9731633}.chat-msg.ai.llm .chat-avatar{color:#fb923c;background:#f9731633}.chat-msg.thinking{opacity:.6}.chat-thinking-dots:after{content:"";animation:thinkingDots 1.2s steps(4,end) infinite}@keyframes thinkingDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.chat-msg.user{background:#34d3991f;border:1px solid rgba(52,211,153,.2);align-self:flex-end;border-bottom-right-radius:4px}.chat-avatar{font-size:.55rem;font-weight:800;color:#a78bfa;background:#7c3aed33;padding:2px 5px;border-radius:4px;flex-shrink:0;margin-top:1px}.chat-text{color:var(--text-primary)}.chat-starters{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}.chat-starter-chip{font-size:.7rem;padding:4px 10px;border-radius:12px;border:1px solid rgba(124,58,237,.3);background:#7c3aed14;color:#c4b5fd;cursor:pointer;transition:background .15s,border-color .15s}.chat-starter-chip:hover{background:#7c3aed33;border-color:#7c3aed80}.chat-input-row{display:flex;gap:6px}.chat-input{flex:1;padding:8px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:.8rem;outline:none;transition:border-color .15s}.chat-input:focus{border-color:#7c3aed}.chat-input::placeholder{color:var(--text-muted);transition:opacity .3s ease}.chat-input.placeholder-fading::placeholder{opacity:0}.chat-input.placeholder-visible::placeholder{opacity:1}.chat-send{padding:6px 14px;border-radius:20px;border:none;background:#7c3aed;color:#fff;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .15s}.chat-send:hover:not(:disabled){background:#6d28d9}.chat-send:disabled{opacity:.4;cursor:default}.command-bar{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:16px}.command-form{display:flex;align-items:center;gap:8px}.command-input-wrap{flex:1;position:relative;min-width:0}.command-input{width:100%;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.9rem;font-family:Fira Code,Cascadia Code,JetBrains Mono,monospace;color:var(--text-primary);outline:none;transition:border-color .2s}.command-input::placeholder{color:var(--text-muted);font-family:inherit}.command-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #7c3aed26}.command-suggestions{position:absolute;top:100%;left:0;right:0;margin-top:2px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;max-height:200px;overflow-y:auto;z-index:100;box-shadow:0 8px 24px #0006}.command-suggestion{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;font-size:.85rem;color:var(--text-secondary);border-bottom:1px solid var(--border)}.command-suggestion:last-child{border-bottom:none}.command-suggestion:hover,.command-suggestion.active{background:color-mix(in srgb,var(--accent) 15%,var(--bg-tertiary));color:var(--text-primary)}.suggestion-example{color:var(--accent-glow);font-weight:600}.suggestion-desc{font-size:.75rem;color:var(--text-muted)}.command-submit{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s,opacity .2s;flex-shrink:0}.command-submit:hover:not(:disabled){background:var(--accent-glow)}.command-submit:disabled{opacity:.4;cursor:not-allowed}.command-voice-row{display:flex;justify-content:center;margin-top:6px}.command-voice-btn{background:transparent;border:1px solid var(--border);border-radius:6px;padding:4px 12px;font-size:.75rem;color:var(--text-muted);cursor:pointer;transition:all .2s}.command-voice-btn:hover{color:#10b981;border-color:#10b981}.command-voice-btn.active{background:#10b98133;color:#10b981;border-color:#10b981;animation:voice-listening 1s ease-in-out infinite}@keyframes voice-listening{0%,to{box-shadow:0 0 #10b9814d}50%{box-shadow:0 0 0 6px #10b98100}}.command-feedback{margin-top:8px;padding:8px 12px;background:var(--bg-tertiary);border-radius:8px;color:var(--text-secondary);font-size:.82rem;font-family:Fira Code,Cascadia Code,JetBrains Mono,monospace;line-height:1.5;animation:feedbackFadeIn .2s ease;position:relative}.command-feedback.multi-line{white-space:pre-wrap;max-height:300px;overflow-y:auto;padding-right:28px}.command-feedback.multi-line>div{padding:1px 0}.command-feedback-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:0 4px;line-height:1}.command-feedback-close:hover{color:var(--text-primary)}@keyframes feedbackFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 700px){.editor-toolbar{flex-direction:column;align-items:stretch}.transport-controls,.track-toggles{justify-content:center}.command-form{flex-wrap:wrap}.command-input{min-width:0}.style-cards{grid-template-columns:repeat(2,1fr);gap:8px}.style-card{padding:10px 6px 8px}.style-card-icon{font-size:1.3rem}.style-card-name{font-size:.72rem}.style-card-vibe{font-size:.55rem}}.loop-controls{display:flex;flex-direction:column;gap:8px}.loop-buttons{display:flex;gap:8px;align-items:center}.loop-that-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:opacity .2s,transform .1s}.loop-that-btn:hover:not(:disabled){opacity:.9;transform:scale(1.02)}.loop-that-btn:disabled{opacity:.35;cursor:not-allowed}.stop-loop-btn{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:opacity .2s}.stop-loop-btn:hover{opacity:.9}.loop-info{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#c4b5fd;background:#7c3aed1f;padding:4px 10px;border-radius:6px;border:1px solid rgba(124,58,237,.25)}.loop-sep{color:#6b5b95;font-size:.75rem}.init-banner{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;margin-bottom:16px;background:#f59e0b14;border:1px solid rgba(245,158,11,.2);border-radius:10px;font-size:.85rem;color:#fbbf24;animation:pulse-progress 1.5s ease-in-out infinite}.init-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(251,191,36,.3);border-top-color:#fbbf24;border-radius:50%;animation:spin .6s linear infinite}.btn-loading{display:inline-flex;align-items:center;gap:8px}.btn-spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}.listen-btn:disabled{opacity:.6;cursor:wait}@media (max-width: 768px){.app{padding:16px 12px}.app-header h1{font-size:1.6rem}.page-subtitle{font-size:.85rem}.app-nav{width:100%}.nav-link{padding:8px 16px;font-size:.82rem}.voice-chips{gap:5px}.voice-chip{min-width:48px;padding:6px}.voice-emoji{font-size:1rem}.voice-name{font-size:.6rem}.style-cards{grid-template-columns:repeat(2,1fr);gap:8px}.mode-chips{gap:6px}.mode-btn{padding:6px 12px;font-size:.8rem}.quick-start-presets{gap:10px}.preset-chip{padding:10px 12px 8px;font-size:.8rem;min-width:80px}.presets-hero-title{font-size:1.1rem}.collapsible-content{padding:12px}.beat-step-dot{width:6px;height:6px}.beat-step-dot.downbeat{width:8px;height:8px}.genre-btn{padding:8px 10px;min-width:60px}.genre-icon{font-size:1.1rem}.genre-label{font-size:.65rem}.song-card-actions{flex-wrap:wrap}.editor-toolbar{flex-direction:column;align-items:stretch}.track-toggles{justify-content:center}.section-group{margin-bottom:14px}.mode-switcher{max-width:280px}.mode-tab{padding:8px 14px;font-size:.82rem}}@media (max-width: 480px){.app{padding:12px 8px}.app-header h1{font-size:1.4rem}.input-buttons{flex-direction:column;align-items:stretch}.listen-btn{padding:12px 24px;font-size:1rem}.style-cards{grid-template-columns:1fr;gap:6px}.style-card{flex-direction:row;gap:10px;padding:10px 14px}.style-card-icon{font-size:1.3rem}.chroma-bars{height:80px}.display-grid{grid-template-columns:1fr;gap:12px}.practice-controls-row{flex-direction:column;gap:12px}.progression-chips{gap:6px}.progression-chip{padding:5px 10px;font-size:.78rem}.command-input{font-size:.85rem}.candidates-grid{grid-template-columns:1fr}.beat-pattern-chips{gap:4px}.beat-pattern-chip{padding:4px 8px;font-size:.7rem}.key-grid{gap:4px}.key-btn{width:36px;height:32px;font-size:.75rem}.mode-switcher{max-width:100%}}@media (pointer: coarse){.listen-btn,.jam-start-btn,.jam-stop-btn,.jam-with-beat-btn,.ai-mode-btn,.vibe-lock-btn,.respond-btn,.beat-toggle,.practice-start-btn,.rec-btn,.auto-rec-btn,.save-to-creator-btn,.generate-btn,.preset-chip{min-height:44px}.voice-chip{min-height:44px;min-width:52px}.style-card{min-height:44px}.mode-btn,.genre-btn,.key-btn,.beat-pattern-chip,.progression-chip{min-height:40px}.seq-btn{width:40px;height:40px}.song-action-btn{min-height:40px;padding:8px 14px}.collapsible-header{min-height:48px}}:focus-visible{outline:2px solid var(--accent-glow);outline-offset:2px}:focus:not(:focus-visible){outline:none}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#fff;padding:8px 16px;z-index:100;font-size:.9rem;border-radius:0 0 8px;transition:top .2s}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.listen-btn.active,.jam-state-indicator,.jam-ring:before,.style-card.active,.ai-mode-btn.active,.rec-dot.active{animation:none}}.keyboard-btn{font-size:.9rem!important;padding:10px 24px!important}.keyboard-btn.active{background:#10b981!important;border-color:#10b981!important;color:#fff!important;box-shadow:0 0 12px #10b98166!important}.tracker-loop{display:flex;flex-direction:column;gap:10px}.tracker-canvas{width:100%;height:160px;border-radius:8px;border:1px solid var(--border)}.tracker-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tracker-btn{padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}.tracker-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text-primary)}.tracker-btn:disabled{opacity:.3;cursor:not-allowed}.tracker-btn.rec{color:#ef4444;border-color:#ef44444d}.tracker-btn.rec.active{background:#ef4444;color:#fff;border-color:#ef4444;animation:pulse-rec 1s ease-in-out infinite}@keyframes pulse-rec{0%,to{box-shadow:0 0 #ef444400}50%{box-shadow:0 0 12px #ef444466}}.tracker-btn.loop.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tracker-btn.save{color:#10b981;border-color:#10b9814d}.tracker-btn.clear{color:var(--text-muted)}.tracker-info{font-size:.75rem;color:var(--text-muted);margin-left:auto}.tracker-saved{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:10px}.tracker-saved-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.tracker-saved-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-tertiary);border-radius:6px;border:1px solid var(--border)}.tracker-saved-name{font-size:.85rem;font-weight:600;color:var(--text-primary)}.tracker-saved-meta{font-size:.7rem;color:var(--text-muted);margin-right:auto}.tracker-saved-btn{padding:4px 10px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .15s}.tracker-saved-btn:hover{border-color:var(--accent);color:var(--text-primary)}.tracker-saved-btn.del:hover{border-color:#ef4444;color:#ef4444}.transport-bar{position:fixed;bottom:0;left:0;right:0;height:56px;z-index:50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:#0a0a12eb;border-top:1px solid rgba(124,58,237,.2);display:flex;align-items:center;padding:0 12px;gap:8px;font-size:.75rem}.page-content{padding-bottom:72px!important}.tb-cluster{display:flex;align-items:center;gap:4px}.tb-cluster+.tb-cluster{border-left:1px solid rgba(255,255,255,.06);padding-left:8px}.tb-inputs{gap:2px}.tb-input-btn{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:4px 6px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:3px;color:var(--text-muted);transition:all .2s;position:relative}.tb-input-btn:hover{background:#ffffff14;border-color:#ffffff26}.tb-input-btn.on{border-color:#22c55e;color:var(--text-primary)}.tb-input-dot{width:5px;height:5px;border-radius:50%;background:#ffffff26;transition:background .2s}.tb-input-btn.on .tb-input-dot{background:#22c55e;box-shadow:0 0 6px #22c55e80}.tb-transport{gap:6px}.tb-jam-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);background:transparent;color:var(--accent);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.tb-jam-btn:hover{background:#7c3aed33}.tb-jam-btn.jamming{background:var(--accent);color:#fff;animation:jam-pulse 2s ease-in-out infinite}@keyframes jam-pulse{0%,to{box-shadow:0 0 #7c3aed4d}50%{box-shadow:0 0 0 6px #7c3aed00}}.tb-rec-btn{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.15);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0}.tb-rec-btn:hover{border-color:#ef4444}.tb-rec-dot{width:12px;height:12px;border-radius:50%;background:#ef4444;transition:all .2s}.tb-rec-btn.recording{border-color:#ef4444;box-shadow:0 0 8px #ef444466}.tb-rec-btn.recording .tb-rec-dot{border-radius:2px;width:10px;height:10px;animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.4}}.tb-mix-btn{height:28px;border-radius:14px;border:1.5px solid rgba(255,255,255,.15);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0 8px;gap:4px}.tb-mix-btn:hover{border-color:#f97316;background:#f973161a}.tb-mix-icon{font-size:.6rem;font-weight:700;color:#f97316;letter-spacing:.05em}.tb-mix-btn.recording{border-color:#f97316;background:#f9731626;box-shadow:0 0 8px #f973164d}.tb-mix-active{display:flex;align-items:center;gap:4px}.tb-mix-time{font-family:SF Mono,Fira Code,monospace;font-size:.65rem;color:#f97316;font-weight:600}.tb-bpm{font-family:SF Mono,Fira Code,monospace;font-size:.75rem;color:var(--text-secondary);min-width:28px;text-align:center}.tb-steps{gap:2px;flex-shrink:1;overflow:hidden}.tb-dot{width:4px;height:4px;border-radius:50%;background:#ffffff1a;transition:all .1s;flex-shrink:0}.tb-dot.beat{background:#fff3}.tb-dot.active{background:var(--accent);box-shadow:0 0 4px #7c3aed80;transform:scale(1.5)}.tb-detection{gap:4px}.tb-badge{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 8px;font-size:.72rem;font-weight:600;color:var(--text-primary);white-space:nowrap}.tb-chord{border-color:#a855f74d;background:#a855f714}.tb-key{border-color:#10b9814d;background:#10b98114;font-size:.65rem}.tb-sound{gap:4px}.tb-voice,.tb-style{display:flex;align-items:center;gap:3px;font-size:.7rem}.tb-badge-label{font-weight:500;text-transform:capitalize}.tb-volume{gap:4px;margin-left:auto}.tb-vol-icon{font-size:.7rem}.tb-vol-slider{width:50px;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1f;border-radius:2px;outline:none;cursor:pointer}.tb-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent);cursor:pointer}@media (max-width: 700px){.transport-bar{height:48px;padding:0 8px;gap:4px;font-size:.65rem}.tb-steps,.tb-badge-label{display:none}.tb-vol-slider{width:36px}.tb-key{display:none}}@media (max-width: 480px){.tb-sound,.tb-volume{display:none}}.section-theme-stage{--room-accent: 168, 85, 247;--room-accent-hex: #a855f7}.section-theme-jamroom{--room-accent: 245, 158, 11;--room-accent-hex: #f59e0b}.section-theme-beatlab{--room-accent: 6, 182, 212;--room-accent-hex: #06b6d4}.section-theme-studio{--room-accent: 34, 197, 94;--room-accent-hex: #22c55e}.collapsible-header.themed{border-left:3px solid rgba(var(--room-accent),.5)}.collapsible-header.themed:hover{background:rgba(var(--room-accent),.06)}.collapsible-content.themed{background:linear-gradient(135deg,rgba(var(--room-accent),.015),transparent 60%)}.section-icon{margin-right:6px;font-size:.85rem;opacity:.7}.section-theme-stage:hover,.section-theme-jamroom:hover,.section-theme-beatlab:hover,.section-theme-studio:hover{border-color:rgba(var(--room-accent),.15)}.effects-rack{position:relative;background:linear-gradient(180deg,#0f0c14f2,#0a0a0ffa),repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 4px);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:16px;box-shadow:inset 0 1px #ffffff0a,0 4px 20px #0006}.fx-rack-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}.fx-rack-title{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#ffffff80}.fx-rack-led{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e80,0 0 12px #22c55e40;animation:led-pulse 3s ease-in-out infinite}@keyframes led-pulse{0%,to{opacity:.8}50%{opacity:1}}.fx-presets{display:flex;gap:4px}.fx-preset-btn{padding:3px 8px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:4px;color:#ffffff73;font-size:.65rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .15s}.fx-preset-btn:hover{background:#f59e0b1a;border-color:#f59e0b4d;color:#f59e0b}.fx-units{display:flex;gap:8px;flex-wrap:wrap}.fx-unit{flex:1 1 180px;min-width:140px;max-width:280px;background:#00000040;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s}.fx-unit:hover{border-color:#ffffff1a}.fx-unit:before,.fx-unit:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.fx-unit-label{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;text-align:center;opacity:.85}.fx-knobs{display:flex;gap:6px;justify-content:center;align-items:flex-start}.fx-delay-time{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}.fx-time-btn{padding:2px 5px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:3px;color:#ffffff59;font-size:.6rem;font-family:SF Mono,Fira Code,monospace;cursor:pointer;transition:all .15s}.fx-time-btn:hover{border-color:#f59e0b4d;color:#ffffffb3}.fx-time-btn.active{background:#f59e0b1a;font-weight:600}.fx-lock-badge{position:absolute;top:8px;right:12px;font-size:.6rem;color:#f59e0b99;letter-spacing:.05em}.knob-container{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;-webkit-user-select:none;user-select:none}.knob-container.disabled{opacity:.35;pointer-events:none}.knob-svg{cursor:ns-resize;transition:filter .15s}.knob-svg:hover{filter:brightness(1.15)}.knob-svg:active{filter:brightness(1.25)}.knob-value{font-size:.6rem;font-family:SF Mono,Fira Code,monospace;color:#ffffffb3;text-align:center;min-height:14px;opacity:0;transition:opacity .15s;white-space:nowrap}.knob-value.visible{opacity:1}.knob-label{font-size:.55rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ffffff59;text-align:center}.knob-container.sm .knob-value,.knob-container.sm .knob-label{font-size:.5rem}.knob-container.lg .knob-value{font-size:.7rem}.knob-container.lg .knob-label{font-size:.6rem}@media (max-width: 700px){.fx-units{gap:6px}.fx-unit{min-width:100px;padding:8px 6px}.fx-presets{flex-wrap:wrap}.fx-rack-header{flex-direction:column;gap:8px;align-items:flex-start}}@media (max-width: 480px){.fx-units{flex-direction:column}.fx-unit{min-width:unset}.fx-knobs{flex-wrap:wrap}}.user-menu{position:absolute;top:8px;right:0;z-index:40}.user-menu-signin{position:absolute;top:8px;right:0;padding:6px 14px;background:#7c3aed26;border:1px solid rgba(124,58,237,.3);border-radius:20px;color:var(--accent);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;z-index:40}.user-menu-signin:hover{background:#7c3aed40;border-color:var(--accent)}.user-menu-avatar-btn{background:none;border:2px solid rgba(255,255,255,.1);border-radius:50%;padding:0;cursor:pointer;width:34px;height:34px;overflow:hidden;transition:border-color .2s}.user-menu-avatar-btn:hover{border-color:var(--accent)}.user-menu-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%}.user-menu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--accent);color:#fff;font-weight:700;font-size:.85rem;border-radius:50%}.user-menu-dropdown{position:absolute;top:42px;right:0;min-width:200px;background:#0f0f19fa;border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 8px 32px #00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden;z-index:100}.user-menu-info{padding:12px 14px;display:flex;flex-direction:column;gap:2px}.user-menu-name{font-size:.85rem;font-weight:600;color:var(--text-primary)}.user-menu-email{font-size:.7rem;color:var(--text-muted)}.user-menu-divider{height:1px;background:#ffffff0f}.user-menu-item{display:block;width:100%;padding:10px 14px;background:none;border:none;color:var(--text-secondary);font-size:.8rem;text-align:left;cursor:pointer;transition:all .15s}.user-menu-item:hover{background:#ffffff0d;color:var(--text-primary)}.auth-gate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}.auth-gate-modal{background:linear-gradient(180deg,#14121efa,#0c0c14fc);border:1px solid rgba(124,58,237,.2);border-radius:16px;padding:32px;max-width:380px;width:90%;box-shadow:0 20px 60px #0009,0 0 40px #7c3aed1a;animation:slideUp .25s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-gate-header{text-align:center;margin-bottom:24px}.auth-gate-icon{font-size:2rem;display:block;margin-bottom:8px}.auth-gate-title{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin:0 0 8px}.auth-gate-subtitle{font-size:.8rem;color:var(--text-muted);line-height:1.5;margin:0}.auth-gate-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.1)}.auth-btn:disabled{opacity:.6;cursor:wait}.auth-btn-google{background:#ffffff0f;color:var(--text-primary)}.auth-btn-google:hover:not(:disabled){background:#ffffff1a;border-color:#fff3}.auth-btn-github{background:#ffffff0a;color:var(--text-secondary)}.auth-btn-github:hover:not(:disabled){background:#ffffff14;border-color:#ffffff26;color:var(--text-primary)}.auth-gate-error{color:#ef4444;font-size:.8rem;text-align:center;margin:8px 0}.auth-gate-unconfigured{padding:16px;background:#f59e0b14;border:1px solid rgba(245,158,11,.2);border-radius:8px;color:#f59e0bcc;font-size:.8rem;text-align:center;margin-bottom:16px}.auth-gate-footer{text-align:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}.auth-gate-skip{background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer;padding:8px;transition:color .15s}.auth-gate-skip:hover{color:var(--text-secondary)}.paywall-price{text-align:center;margin:16px 0}.paywall-amount{font-size:2.5rem;font-weight:800;color:var(--text-primary)}.paywall-period{font-size:1rem;color:var(--text-muted)}.paywall-features{list-style:none;padding:0;margin:16px 0 20px}.paywall-features li{padding:6px 0;color:var(--text-secondary);font-size:.85rem}.paywall-features li:before{content:"✓";color:#10b981;margin-right:8px}.auth-btn-subscribe{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;width:100%}.auth-btn-subscribe:hover:not(:disabled){background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 20px #7c3aed4d}.sub-badge{display:inline-block;font-size:.75rem;padding:3px 10px;border-radius:12px;margin-bottom:8px}.sub-badge-free{background:#ffffff0f;color:var(--text-muted)}.sub-badge-limit{background:#ef44441f;color:#ef4444}.sub-badge-pro{background:#10b9811f;color:#10b981;font-weight:600}.user-menu-sub-status{padding:6px 12px}.user-menu-pro-badge{display:inline-block;background:#10b98126;color:#10b981;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:4px}.user-menu-free-status{font-size:.75rem;color:var(--text-muted)}:root{--accent-warm: #d4a574;--accent-warm-glow: #e8c097;--accent-warm-dim: #8b6a42;--accent-cool: #5b8fb9;--accent-cool-glow: #7db4d8;--bg-warm: #0d0907;--bg-warm-secondary: #120e0a;--room-border: rgba(212, 165, 116, .1);--room-border-hover: rgba(212, 165, 116, .2);--glass-bg: rgba(14, 12, 18, .65);--glass-bg-header: rgba(22, 18, 28, .75);--glass-border: rgba(212, 165, 116, .08);--brick-tint: rgba(139, 90, 55, .03)}body{background:var(--bg-warm)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:radial-gradient(ellipse 250px 200px at 15% 6%,rgba(232,192,151,.12) 0%,transparent 70%),radial-gradient(ellipse 220px 180px at 38% 5%,rgba(245,200,140,.1) 0%,transparent 70%),radial-gradient(ellipse 200px 160px at 62% 7%,rgba(232,192,151,.1) 0%,transparent 70%),radial-gradient(ellipse 230px 190px at 85% 6%,rgba(240,195,135,.09) 0%,transparent 70%),radial-gradient(ellipse 600px 700px at 5% 35%,rgba(212,165,116,.1) 0%,transparent 65%),radial-gradient(ellipse 400px 550px at 78% 28%,rgba(91,143,185,.06) 0%,transparent 65%),radial-gradient(ellipse 350px 600px at 95% 55%,rgba(200,150,80,.07) 0%,transparent 70%),radial-gradient(ellipse 100% 400px at 50% 100%,rgba(160,100,50,.07) 0%,transparent 55%),radial-gradient(ellipse 120% 60% at 50% 40%,rgba(139,90,55,.04) 0%,transparent 70%),radial-gradient(ellipse 60% 60% at 50% 45%,transparent 30%,rgba(5,3,1,.8) 100%),linear-gradient(175deg,#0e0a07,#0b0810,#09070f);pointer-events:none}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;pointer-events:none}.jam-page,.song-creator-page,.midi-editor-page{position:relative;isolation:isolate}@keyframes roomFadeOut{0%{opacity:1;height:200px;filter:brightness(.45) saturate(.7)}60%{opacity:1;height:200px;filter:brightness(.45) saturate(.7)}to{opacity:.15;height:80px;filter:brightness(.2) saturate(.3)}}.jam-page:after{content:"";position:absolute;top:-40px;left:0;right:0;height:80px;z-index:-1;background:url(/images/rooms/studio-room.png) center 8% / cover no-repeat;filter:brightness(.2) saturate(.3);opacity:.15;mask-image:linear-gradient(to bottom,black 0%,black 20%,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 20%,transparent 85%);pointer-events:none;animation:roomFadeOut 3s ease-out forwards}.song-creator-page:after{content:"";position:absolute;top:-80px;left:0;right:0;height:200px;z-index:-1;background:url(/images/rooms/jam-room.png) center 8% / cover no-repeat;filter:brightness(.45) saturate(.7);mask-image:linear-gradient(to bottom,black 0%,black 20%,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 20%,transparent 85%);pointer-events:none}.midi-editor-page:after{content:"";position:absolute;top:-80px;left:0;right:0;height:200px;z-index:-1;background:url(/images/rooms/loft-room.png) center 5% / cover no-repeat;filter:brightness(.45) saturate(.7);mask-image:linear-gradient(to bottom,black 0%,black 20%,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 20%,transparent 85%);pointer-events:none}@keyframes roomFadeOutBottom{0%{opacity:1;height:200px;filter:brightness(.4) saturate(.6)}60%{opacity:1;height:200px;filter:brightness(.4) saturate(.6)}to{opacity:.12;height:60px;filter:brightness(.15) saturate(.2)}}.jam-page:before{content:"";position:absolute;bottom:-30px;left:0;right:0;height:60px;z-index:-1;background:url(/images/rooms/studio-room.png) center 92% / cover no-repeat;filter:brightness(.15) saturate(.2);opacity:.12;mask-image:linear-gradient(to top,black 0%,black 20%,transparent 85%);-webkit-mask-image:linear-gradient(to top,black 0%,black 20%,transparent 85%);pointer-events:none;animation:roomFadeOutBottom 3s ease-out forwards}.song-creator-page:before{content:"";position:absolute;bottom:-80px;left:0;right:0;height:200px;z-index:-1;background:url(/images/rooms/jam-room.png) center 92% / cover no-repeat;filter:brightness(.4) saturate(.6);mask-image:linear-gradient(to top,black 0%,black 20%,transparent 85%);-webkit-mask-image:linear-gradient(to top,black 0%,black 20%,transparent 85%);pointer-events:none}.midi-editor-page:before{content:"";position:absolute;bottom:-80px;left:0;right:0;height:200px;z-index:-1;background:url(/images/rooms/loft-room.png) center 95% / cover no-repeat;filter:brightness(.4) saturate(.6);mask-image:linear-gradient(to top,black 0%,black 20%,transparent 85%);-webkit-mask-image:linear-gradient(to top,black 0%,black 20%,transparent 85%);pointer-events:none}.collapsible-section{background:var(--glass-bg)!important;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-color:var(--glass-border)!important;box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff05;transition:border-color .3s,box-shadow .3s}.collapsible-section:hover{border-color:var(--room-border-hover)!important;box-shadow:0 4px 16px #00000059,0 0 20px #d4a57408,inset 0 1px #ffffff08}.collapsible-header{background:var(--glass-bg-header)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(212,165,116,.04)}.collapsible-header:hover{background:#d4a5740f!important}.section-group{background:#0c0a1066!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:#d4a5740f!important;box-shadow:0 4px 24px #00000040}.section-group-header{color:var(--accent-warm)!important;letter-spacing:.15em!important;text-shadow:0 0 25px rgba(212,165,116,.2);font-weight:500!important;opacity:.8}.room-zone{position:relative;margin-bottom:28px;padding:0;border-radius:18px;overflow:hidden;border:1.5px solid rgba(255,255,255,.06);transition:border-color .3s,box-shadow .3s}.zone-label{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;padding:14px 20px;-webkit-user-select:none;user-select:none;border-bottom:1px solid rgba(255,255,255,.06)}.zone-icon{font-size:1.1rem;line-height:1}.zone-hint{font-size:.72rem;font-weight:400;text-transform:none;letter-spacing:.02em;opacity:.55;margin-left:auto;font-style:italic}.zone-body{padding:16px 16px 12px}.zone-stage{border-color:#e8c09740;box-shadow:0 0 30px #e8c0970a,inset 0 0 60px #e8c09705}.zone-stage .zone-label{background:linear-gradient(135deg,#e8c09726,#d4a5740f);color:var(--accent-warm-glow);text-shadow:0 0 20px rgba(232,192,151,.3);border-bottom-color:#e8c0971f}.zone-stage .zone-hint{color:var(--accent-warm)}.zone-stage .zone-body{background:radial-gradient(ellipse 80% 160px at 50% 0%,rgba(232,192,151,.05) 0%,transparent 70%),#0e0c1259}.zone-stage .listen-section{position:relative}.zone-stage .listen-section:before{content:"";position:absolute;top:-30px;left:50%;transform:translate(-50%);width:300px;height:150px;background:radial-gradient(ellipse,rgba(232,192,151,.06) 0%,transparent 70%);pointer-events:none;z-index:0}.stage-input-status{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 4px}.input-status-item{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:500;letter-spacing:.04em;padding:4px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a}.input-status-item.mic-active{color:#4ade80;border-color:#4ade8033;background:#4ade800f}.input-status-item.midi-active{color:#60a5fa;border-color:#60a5fa33;background:#60a5fa0f}.input-status-item.keys-active{color:var(--accent-warm);border-color:#d4a57433;background:#d4a5740f}.pulse-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulseDot 1.5s ease-in-out infinite}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.stage-piano-wrap{margin:8px auto 4px;max-width:520px;transform:scale(.85);transform-origin:center top;opacity:.92}.preset-toast{text-align:center;font-size:.75rem;font-weight:500;letter-spacing:.03em;color:var(--accent-warm-glow);padding:6px 16px;margin:6px auto 2px;border-radius:20px;background:#d4a5741a;border:1px solid rgba(212,165,116,.15);max-width:fit-content;animation:toastIn .3s ease-out}@keyframes toastIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.loop-toast{text-align:center;font-size:.75rem;font-weight:500;letter-spacing:.03em;color:#34d399;padding:6px 16px;margin:6px auto 2px;border-radius:20px;background:#10b9811f;border:1px solid rgba(16,185,129,.25);max-width:fit-content;display:flex;align-items:center;gap:6px;animation:toastIn .3s ease-out}.loop-toast-icon{font-size:.9rem}.loop-controls.loop-active{border-color:#a855f766;box-shadow:0 0 10px #a855f726}.loop-pulse-dot{width:8px;height:8px;border-radius:50%;background:#10b981;animation:loopDotPulse 1.2s ease-in-out infinite}@keyframes loopDotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.zone-rack{border-color:#f59e0b33;box-shadow:0 0 25px #f59e0b08,inset 0 0 50px #8b5a3705}.zone-rack .zone-label{background:linear-gradient(135deg,#f59e0b1f,#8b5a370f);color:#f5a623;text-shadow:0 0 20px rgba(245,158,11,.25);border-bottom-color:#f59e0b1a}.zone-rack .zone-hint{color:#f5a623}.zone-rack .zone-body{background:linear-gradient(180deg,rgba(139,90,55,.04) 0%,transparent 40%),#0e0c1259}.zone-rack .section-group{border-left:none!important;box-shadow:none!important;background:transparent!important;border-color:transparent!important;padding:0!important}.zone-rack .section-group-header{display:none}.zone-floor{border-color:#7c3aed33;box-shadow:0 0 30px #7c3aed0a,inset 0 0 60px #5b8fb905}.zone-floor .zone-label{background:linear-gradient(135deg,#7c3aed24,#5b8fb90f);color:var(--accent-glow);text-shadow:0 0 20px rgba(168,85,247,.3);border-bottom-color:#7c3aed1a}.zone-floor .zone-hint{color:var(--accent-cool-glow)}.zone-floor .zone-body{background:radial-gradient(ellipse 90% 200px at 50% 20%,rgba(91,143,185,.03) 0%,transparent 70%),radial-gradient(ellipse 100% 300px at 50% 80%,rgba(168,85,247,.02) 0%,transparent 60%),#0e0c1259}.zone-booth{border-color:#10b98133;box-shadow:0 0 25px #10b98108,inset 0 0 50px #10b98103}.zone-booth .zone-label{background:linear-gradient(135deg,#10b9811f,#5b8fb90d);color:#10b981;text-shadow:0 0 18px rgba(16,185,129,.25);border-bottom-color:#10b9811a}.zone-booth .zone-hint{color:#10b981}.zone-booth .zone-body{background:linear-gradient(180deg,#10b98108,#5b8fb905),#0e0c1259}.zone-booth .section-group{border-left:none!important;box-shadow:none!important;background:transparent!important;border-color:transparent!important;padding:0!important}.zone-booth .section-group-header{display:none}.room-zone:hover{box-shadow:0 0 40px #d4a5740f,inset 0 0 60px #d4a57405}.zone-stage:hover{border-color:#e8c09759}.zone-rack:hover{border-color:#f59e0b4d}.zone-floor:hover{border-color:#7c3aed4d}.zone-booth:hover{border-color:#10b9814d}.listen-btn.active{border-color:var(--accent-warm)!important;box-shadow:0 0 20px #d4a57440,0 0 40px #7c3aed26!important;background:linear-gradient(135deg,var(--accent),rgba(212,165,116,.6))!important}.volume-bar{background:linear-gradient(90deg,rgba(212,165,116,.6) 0%,var(--accent-warm) 40%,var(--accent-glow) 80%,#e879f9 100%)!important;box-shadow:0 0 8px #d4a5744d}.section-theme-stage .collapsible-header.themed{border-left-color:#d4a5744d!important}.section-theme-stage .collapsible-content.themed{background:linear-gradient(135deg,rgba(212,165,116,.02),transparent 60%)!important}.section-theme-jamroom .collapsible-header.themed{border-left-color:#f59e0b59!important}.section-theme-beatlab .collapsible-header.themed{border-left-color:#06b6d44d!important}.section-theme-studio .collapsible-header.themed{border-left-color:#22c55e4d!important}.app-nav{background:#0e0c12b3!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--glass-border)!important;box-shadow:0 2px 12px #0000004d}.nav-link{position:relative;transition:all .25s!important}.nav-link .nav-icon{margin-right:5px;font-size:.82rem;opacity:.7}.nav-link:hover{background:#d4a57414!important;color:var(--accent-warm-glow)!important}.nav-link.active{background:linear-gradient(135deg,#7c3aedb3,#d4a57459)!important;box-shadow:0 0 16px #d4a57426,0 0 8px #7c3aed33!important;color:#fff!important}.nav-link.active:after{content:"";position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-warm),transparent);border-radius:2px}.app-header h1{background:linear-gradient(135deg,var(--accent-glow),var(--accent-warm-glow))!important;-webkit-background-clip:text!important;background-clip:text!important;text-shadow:none}.transport-bar{background:#0d0907f0!important;border-top:1px solid rgba(212,165,116,.12)!important;box-shadow:0 -4px 20px #00000080,0 -1px #d4a5740d!important}.tb-cluster+.tb-cluster{border-left-color:#d4a57414!important}.tb-badge.active{border-color:#d4a5744d;background:#d4a57414}.app:before{content:"";position:fixed;top:0;left:0;width:600px;height:500px;background:radial-gradient(ellipse at 15% 15%,rgba(232,192,151,.07) 0%,transparent 65%);animation:roomGlow 8s ease-in-out infinite;pointer-events:none;z-index:-1}.app:after{content:"";position:fixed;bottom:80px;right:0;width:500px;height:600px;background:radial-gradient(ellipse at 85% 65%,rgba(200,140,70,.05) 0%,transparent 65%);animation:roomGlow 12s ease-in-out 4s infinite;pointer-events:none;z-index:-1}@keyframes roomGlow{0%,to{opacity:.5}50%{opacity:1}}.app-main:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 30%,rgba(8,5,2,.3) 100%);pointer-events:none;z-index:-1}.mode-switcher{background:#0e0c1299!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--glass-border)!important}.mode-tab.active{background:linear-gradient(135deg,#7c3aed99,#d4a57440)!important;box-shadow:0 0 12px #d4a5741a}.style-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.style-card.active{box-shadow:0 0 20px rgba(var(--style-r, 124),var(--style-g, 58),var(--style-b, 237),.3),0 0 40px #d4a5740d}.preset-btn{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.piano-key.active-note{box-shadow:0 0 10px #d4a5744d}.visualizer-wrap{border-color:var(--glass-border)!important;box-shadow:0 2px 8px #0000004d}.creator-controls{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.genre-btn{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.song-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--glass-border);box-shadow:0 2px 12px #0000004d}.song-card:hover{border-color:var(--room-border-hover)}.editor-toolbar{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--glass-border)}.jam-ring:before{box-shadow:0 0 30px #d4a57433,0 0 60px #7c3aed26!important}.error-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.init-banner{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--glass-border)}@keyframes dustFloat{0%{transform:translateY(0) translate(0);opacity:0}10%{opacity:.4}90%{opacity:.4}to{transform:translateY(-100vh) translate(30px);opacity:0}}.app>main:after{content:"";position:fixed;width:2px;height:2px;background:#d4a57459;border-radius:50%;top:80%;left:25%;animation:dustFloat 20s linear infinite;pointer-events:none;z-index:0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0d090780}::-webkit-scrollbar-thumb{background:#d4a57426;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#d4a57440}@media (max-width: 700px){.collapsible-section,.collapsible-header,.section-group,.app-nav,.mode-switcher{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.room-zone{margin-bottom:16px;border-radius:12px}.zone-label{font-size:.75rem;padding:10px 14px}.zone-body{padding:12px 10px 8px}.zone-hint{display:none}.app:before,.app:after,.app>main:after{display:none}}@media (prefers-reduced-motion: reduce){.app:before,.app:after,.app>main:after{animation:none!important}@keyframes roomGlow{0%,to{opacity:.75}}}.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;z-index:2000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.onboarding-modal{background:var(--bg-primary, #1a1625);border:1px solid rgba(124,58,237,.3);border-radius:20px;padding:32px;max-width:600px;width:90vw;position:relative;box-shadow:0 20px 60px #00000080}.onboarding-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-muted, #888);font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px}.onboarding-close:hover{color:var(--text-primary, #fff)}.onboarding-title{text-align:center;font-size:1.3rem;font-weight:700;color:var(--text-primary, #fff);margin:0 0 24px}.onboarding-steps{display:flex;gap:16px;margin-bottom:24px}.onboarding-step{flex:1;text-align:center;padding:16px 8px;border-radius:12px;cursor:pointer;opacity:.35;transition:all .3s ease;border:1px solid transparent}.onboarding-step.active{opacity:1;background:#7c3aed1a;border-color:#7c3aed4d}.onboarding-step.done{opacity:.7}.step-number{width:32px;height:32px;border-radius:50%;background:var(--accent, #7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:700;font-size:.85rem}.step-icon{font-size:1.8rem;margin-bottom:8px}.step-title{font-weight:600;font-size:.9rem;color:var(--text-primary, #fff);margin-bottom:4px}.step-desc{font-size:.75rem;color:var(--text-muted, #999);line-height:1.4}.onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.onboarding-next,.onboarding-start{padding:10px 28px;border-radius:10px;border:none;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}.onboarding-next{background:var(--accent, #7c3aed);color:#fff}.onboarding-next:hover{background:#6d28d9}.onboarding-start{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.onboarding-start:hover{box-shadow:0 6px 20px #7c3aed66;transform:translateY(-1px)}.onboarding-dismiss-label{font-size:.75rem;color:var(--text-muted, #888);display:flex;align-items:center;gap:6px;cursor:pointer}.onboarding-dismiss-label input[type=checkbox]{accent-color:var(--accent, #7c3aed)}@media (max-width: 600px){.onboarding-steps{flex-direction:column;gap:8px}.onboarding-step{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px}.step-number{margin:0;flex-shrink:0}.step-icon{font-size:1.3rem;margin:0;flex-shrink:0}.onboarding-modal{padding:24px 20px}}