*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f0f23;--text-primary: #eee;--text-secondary: #888;--accent: #e94560;--accent-hover: #ff6b6b;--success: #4ecca3;--border: #333}body{font-family:JetBrains Mono,Fira Code,SF Mono,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#app{display:flex;flex-direction:column;height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}header h1{font-size:1.5rem;font-weight:600;background:linear-gradient(90deg,var(--accent),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#controls{display:flex;gap:.5rem}.control-btn{padding:.5rem 1.5rem;font-size:1rem;font-family:inherit;border:none;border-radius:6px;cursor:pointer;transition:all .2s}#play-btn{background:var(--success);color:var(--bg-primary)}#play-btn:hover:not(:disabled){background:#6ee6b8;transform:scale(1.02)}#stop-btn{background:var(--accent);color:#fff}#stop-btn:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.02)}#eval-btn{background:#6366f1;color:#fff}#eval-btn:hover:not(:disabled){background:#818cf8;transform:scale(1.02)}#eval-btn.pulse{animation:evalPulse .2s ease-out}@keyframes evalPulse{0%{box-shadow:0 0 #6366f1b3;transform:scale(1)}50%{box-shadow:0 0 0 8px #6366f100;transform:scale(1.03)}to{box-shadow:0 0 #6366f100;transform:scale(1)}}#reset-btn{background:#64748b;color:#fff}#reset-btn:hover{background:#94a3b8;transform:scale(1.02)}.live-mode-btn{background:#1e293b;color:var(--text-secondary);border:1px solid var(--border);display:flex;align-items:center;gap:.4rem}.live-mode-btn:hover{background:#334155;color:var(--text-primary)}.live-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.live-mode-btn.active .live-icon{animation:livePulse 1s infinite}.live-icon{font-size:.8rem}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.5}}body.live-mode #editor{font-size:18px}.live-status{position:fixed;top:70px;right:20px;background:#e94560e6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;display:none;align-items:center;gap:.5rem;z-index:100;animation:fadeIn .3s ease}body.live-mode .live-status{display:flex}.live-status .layer-name{font-weight:700}.live-status .live-dot{color:#f44;animation:dotPulse 1s infinite}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cm-editor.eval-flash{animation:editorFlash .15s ease-out}@keyframes editorFlash{0%{box-shadow:inset 0 0 0 2px #6366f1cc}to{box-shadow:inset 0 0 0 2px #6366f100}}.cm-editor.updating{animation:editorUpdate .15s ease-out}@keyframes editorUpdate{0%{box-shadow:inset 0 0 0 2px #4ecca399}to{box-shadow:inset 0 0 0 2px #4ecca300}}#editor.typing .cm-cursor{border-left-color:var(--success)!important;border-left-width:2px!important;animation:typingCursor .15s ease-in-out infinite}#editor.typing .cm-editor{border-color:var(--success)}@keyframes typingCursor{0%,to{opacity:1}50%{opacity:.5}}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}main{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0}#live-coding-area{flex:1;display:flex;flex-direction:row;min-width:0;overflow:hidden;border-bottom:1px solid var(--border)}#editor{flex:1;overflow:auto;min-width:0;border-right:1px solid var(--border)}.editor-thinking-panel{width:350px;min-width:280px;background:var(--bg-tertiary);padding:.75rem;overflow-y:auto;display:flex;flex-direction:column}#pipeline-section{background:var(--bg-secondary);border-top:1px solid var(--border)}#input-section{background:var(--bg-secondary);padding:.75rem 1rem;border-top:1px solid var(--border)}#nl-input-section{display:flex;gap:.75rem;align-items:flex-start}#nl-input{flex:1;height:60px;padding:.75rem;font-family:inherit;font-size:.95rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);resize:none}#nl-input:focus{outline:none;border-color:var(--accent)}#input-controls{display:flex;flex-direction:column;gap:.5rem;align-items:stretch}#input-controls #nl-submit{padding:.75rem 1.5rem;font-size:.9rem}.thinking-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.thinking-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.thinking-status{font-size:.65rem;padding:.2rem .5rem;border-radius:10px;background:var(--bg-secondary);color:var(--text-secondary)}.thinking-status.analyzing{background:#6366f133;color:#818cf8}.thinking-status.generating{background:#4ecca333;color:var(--success)}.thinking-content{font-size:.8rem;line-height:1.5;color:var(--text-secondary);font-family:JetBrains Mono,monospace;white-space:pre-wrap;word-break:break-word}.thinking-content:empty:before{content:"Waiting for input...";opacity:.5;font-style:italic}.cm-editor{height:100%;font-size:16px}.cm-scroller{font-family:JetBrains Mono,Fira Code,monospace!important}.cm-content{padding:1rem}.cm-gutters{background:var(--bg-tertiary)!important;border-right:1px solid var(--border)!important}.cm-activeLineGutter{background:var(--bg-secondary)!important}.cm-activeLine{background:#e945601a!important}#right-panel{width:max(400px,30vw);min-width:350px;max-width:500px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg-tertiary);overflow-y:auto;overflow-x:hidden;padding:.75rem;gap:.5rem}#nl-header{padding:1rem;border-bottom:1px solid var(--border)}#nl-header h2{font-size:1rem;font-weight:500;margin-bottom:.25rem;color:var(--text-primary)}.nl-hint{font-size:.75rem;color:var(--text-secondary)}#specialist-indicator{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.specialist-badge{font-size:1.2rem;padding:.3rem .5rem;border-radius:6px;background:var(--bg-secondary);border:2px solid var(--border);opacity:.5;transition:all .3s;cursor:default}.specialist-badge:hover{opacity:.8}.specialist-badge.active{opacity:1;border-color:var(--accent);background:#e9456033;animation:specialistPulse 1s ease-in-out infinite}@keyframes specialistPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.specialist-badge[data-specialist=rhythm].active{border-color:#ff6b35;background:#ff6b3533}.specialist-badge[data-specialist=harmony].active{border-color:#9b59b6;background:#9b59b633}.specialist-badge[data-specialist=sound].active{border-color:#3498db;background:#3498db33}.specialist-badge[data-specialist=structure].active{border-color:#f39c12;background:#f39c1233}.specialist-badge[data-specialist=style].active{border-color:#e91e63;background:#e91e6333}.specialist-badge[data-specialist=variation].active{border-color:var(--success);background:#4ecca333}.console-entry.specialist-rhythm{border-left-color:#ff6b35}.console-entry.specialist-harmony{border-left-color:#9b59b6}.console-entry.specialist-sound{border-left-color:#3498db}.console-entry.specialist-structure{border-left-color:#f39c12}.console-entry.specialist-style{border-left-color:#e91e63}.console-entry.specialist-variation{border-left-color:var(--success)}.console-entry.director{border-left-color:#6366f1}.console-entry.memory{border-left-color:#8b5cf6}.console-entry.integrator{border-left-color:#64748b}#layer-indicator{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-size:.7rem}.layer-badge{padding:.2rem .5rem;border-radius:4px;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);transition:all .3s}.layer-badge.active{background:var(--accent);color:#fff;border-color:var(--accent)}.layer-arrow{color:var(--text-secondary);font-size:.6rem}#nl-input::placeholder{color:var(--text-secondary);opacity:.7}#nl-submit{background:var(--accent);color:#fff}#nl-submit:hover:not(:disabled){background:var(--accent-hover)}#nl-submit:disabled{opacity:.5;cursor:not-allowed}#nl-console{flex:1;display:flex;flex-direction:column;overflow:hidden}#console-header{padding:.5rem 1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);background:var(--bg-secondary);border-bottom:1px solid var(--border)}#console-output{flex:1;overflow-y:auto;padding:.5rem;font-size:.8rem}.console-entry{padding:.5rem .75rem;margin-bottom:.5rem;border-radius:4px;border-left:3px solid var(--border);background:var(--bg-secondary)}.console-entry.system{border-left-color:var(--text-secondary);color:var(--text-secondary)}.console-entry.system:has-text("✓"){border-left-color:var(--success);color:var(--success)}.console-entry.system:has-text("⚠️"){border-left-color:#f39c12;color:#f39c12}.console-entry.layer-4{border-left-color:#ff6b35}.console-entry.layer-3{border-left-color:#9b59b6}.console-entry.layer-2{border-left-color:#3498db}.console-entry.layer-1{border-left-color:#f39c12}.console-entry.layer-0{border-left-color:var(--success)}.console-entry.error{border-left-color:var(--accent);color:var(--accent)}.console-entry .layer-label{font-weight:600;margin-bottom:.25rem;font-size:.7rem;text-transform:uppercase}.console-entry.layer-4 .layer-label{color:#ff6b35}.console-entry.layer-3 .layer-label{color:#9b59b6}.console-entry.layer-2 .layer-label{color:#3498db}.console-entry.layer-1 .layer-label{color:#f39c12}.console-entry.layer-0 .layer-label{color:var(--success)}.console-entry .content{color:var(--text-primary)}.console-entry code{background:var(--bg-tertiary);padding:.1rem .3rem;border-radius:3px;font-size:.85em}footer{display:flex;justify-content:space-between;align-items:center;padding:.5rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border)}#status{font-size:.85rem;color:var(--text-secondary)}.build-timestamp{font-size:.75rem;color:var(--text-secondary);opacity:.6;font-family:monospace}.footer-contact{font-size:.8rem}.footer-contact a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer-contact a:hover{color:var(--accent)}.attribution{font-size:.75rem;color:var(--text-secondary);opacity:.7}.beta-badge{font-size:.6rem;font-weight:700;padding:.2rem .5rem;margin-left:.5rem;background:#f59e0b;color:#000;border-radius:4px;vertical-align:middle;-webkit-text-fill-color:#000}#status.playing{color:var(--success)}#status.error{color:var(--accent)}#debug-log-container{margin-top:.5rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-tertiary);overflow:hidden}#debug-log-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}#debug-log-header span{flex:1}.toggle-btn,.clear-btn{padding:.25rem .5rem;font-size:.7rem;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-secondary);border-radius:3px;cursor:pointer;transition:all .2s;margin-left:.5rem}.toggle-btn:hover,.clear-btn:hover{background:var(--border);color:var(--text-primary)}#debug-log-output{max-height:150px;overflow-y:auto;overflow-x:auto;padding:.5rem;font-size:.75rem;font-family:JetBrains Mono,monospace;white-space:nowrap}.debug-entry{padding:.25rem .5rem;margin-bottom:.25rem;border-left:2px solid var(--border);display:inline-block;width:100%;background:var(--bg-secondary);border-radius:3px}.debug-entry.api-request{border-left-color:#3498db}.debug-entry.api-response{border-left-color:#9b59b6}.debug-entry.validation{border-left-color:var(--success)}.debug-entry.debug{border-left-color:#f39c12}.debug-timestamp{color:var(--text-secondary);font-size:.7rem;margin-right:.5rem}.debug-category{font-weight:600;margin-right:.5rem}.debug-entry.api-request .debug-category{color:#3498db}.debug-entry.api-response .debug-category{color:#9b59b6}.debug-entry.validation .debug-category{color:var(--success)}.debug-entry.debug .debug-category{color:#f39c12}.debug-message{color:var(--text-primary)}.debug-metadata{color:var(--text-secondary);font-size:.7rem;margin-left:.5rem;cursor:help}.debug-details{margin-top:.5rem;padding:.5rem;background:var(--bg-primary);border-radius:3px;white-space:pre-wrap;font-size:.7rem;color:var(--text-secondary)}#auth-controls{display:flex;align-items:center;gap:.75rem}#user-info{font-size:.85rem;color:var(--text-secondary);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-btn{padding:.4rem 1rem;font-size:.85rem;font-family:inherit;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s;background:var(--bg-tertiary);color:var(--text-primary)}.auth-btn:hover{background:var(--bg-secondary);border-color:var(--accent)}#logout-btn{background:transparent;color:var(--text-secondary);border-color:var(--border)}#logout-btn:hover{color:var(--accent);border-color:var(--accent)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:2rem;width:100%;max-width:400px;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;transition:color .2s;line-height:1}.modal-close:hover{color:var(--accent)}.modal-content h2{margin-bottom:1.5rem;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.85rem;color:var(--text-secondary)}.form-group input{width:100%;padding:.75rem;font-family:inherit;font-size:.9rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--accent)}.error-message{padding:.75rem;margin-bottom:1rem;background:#e945601a;border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-size:.85rem}#auth-form .control-btn{width:100%;margin-top:.5rem}.auth-switch{margin-top:1.5rem;text-align:center;font-size:.85rem;color:var(--text-secondary)}.auth-switch a{color:var(--accent);text-decoration:none;margin-left:.25rem}.auth-switch a:hover{text-decoration:underline}@media (max-width: 1200px){#right-panel{min-width:350px}}@media (max-width: 900px){main{flex-direction:column;min-width:auto}#live-coding-area{flex-direction:column;border-right:none;border-bottom:1px solid var(--border);min-height:50%;min-width:auto}#live-coding-area .editor-thinking-panel{width:100%;max-height:150px;border-top:1px solid var(--border)}#right-panel{width:100%;min-width:auto;max-width:none;min-height:250px;flex-shrink:1}#debug-log-output{max-height:100px}}#thoughts-container{padding:.5rem 1rem;border-bottom:1px solid var(--border)}.thoughts-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;overflow:hidden}.pipeline-flow{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem 1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.pipeline-stage{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem .6rem;border-radius:6px;transition:all .3s ease;opacity:.4}.pipeline-stage .stage-icon{font-size:1.1rem;line-height:1}.pipeline-stage .stage-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.pipeline-stage.active{opacity:1;background:#e91e6326;animation:stage-pulse 1s ease-in-out infinite}.pipeline-stage.active .stage-label{color:#ec4899}.pipeline-stage.complete{opacity:1}.pipeline-stage.complete .stage-label{color:var(--success)}.pipeline-arrow{font-size:.9rem;color:var(--text-secondary);opacity:.3;transition:all .3s ease}.pipeline-arrow.active{opacity:1;color:var(--success)}@keyframes stage-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pipeline-detail{padding:.5rem .75rem;min-height:2.5rem}.detail-prompt,.detail-thinking{padding:.25rem 0;font-size:.8rem;animation:fade-in .3s ease}.detail-prompt.hidden,.detail-thinking.hidden{display:none}.detail-prompt .detail-text{color:var(--accent);font-style:italic}.detail-thinking .detail-text{color:var(--text-secondary)}@keyframes fade-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.detail-layers .layer-list{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;max-height:none}.detail-layers .layer-item{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:20px;font-size:.75rem;font-weight:500;transition:all .3s ease;animation:layer-appear .3s ease}@keyframes layer-appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.detail-layers .layer-item.pending{background:var(--bg-tertiary);color:var(--text-secondary)}.detail-layers .layer-item.typing{background:#e91e6333;color:#ec4899;animation:layer-appear .3s ease,typing-glow 1s ease-in-out infinite}.detail-layers .layer-item.done{background:#4ecca333;color:var(--success)}.detail-layers .layer-icon{font-size:.8rem}.detail-layers .layer-name{font-weight:600}.detail-layers .layer-status{font-size:.65rem;opacity:.8;margin-left:.25rem}@keyframes typing-glow{0%,to{box-shadow:0 0 #e91e6366}50%{box-shadow:0 0 8px 2px #e91e634d}}.thoughts-panel .thoughts-header{display:none}.agent-badge{font-size:.75rem;padding:.25rem .5rem;border-radius:4px;font-weight:600;white-space:nowrap;transition:all .2s}.agent-badge.idle{background:var(--bg-primary);color:var(--text-secondary)}.agent-badge.quick{background:#fbbf2433;color:#fbbf24}.agent-badge.creative{background:#e91e6333;color:#ec4899}.agent-badge.deep{background:#8b5cf633;color:#a78bfa;animation:pulse 1.5s ease-in-out infinite}.agent-badge.context{background:#3498db33;color:#60a5fa}.agent-badge.complete{background:#4ecca34d;color:var(--success)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.status-text{flex:1;font-size:.8rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.expand-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;font-size:.7rem;opacity:.6;transition:opacity .2s}.expand-btn:hover{opacity:1}.thoughts-content{transition:max-height .3s ease,padding .3s ease;overflow:hidden}.thoughts-content.collapsed{max-height:0;padding:0}.thought-section{display:flex;align-items:flex-start;gap:.5rem;padding:.4rem .75rem;border-top:1px solid var(--border);font-size:.8rem}.thought-section.hidden{display:none}.thought-label{color:var(--text-secondary);font-weight:500;min-width:85px;flex-shrink:0}.thought-value{color:var(--text-primary);flex:1}.prompt-value{color:var(--accent);font-style:italic}.understanding-value{color:#60a5fa}.approach-value{color:#a78bfa}.layers-section{flex-direction:column;gap:.25rem}.layers-section .thought-label{margin-bottom:.25rem}.thinking-area{max-height:300px;overflow-y:auto;transition:max-height .3s ease}.thinking-area.collapsed{max-height:0;overflow:hidden}.thinking-area pre{padding:.75rem;margin:0;font-size:.8rem;line-height:1.5;color:var(--text-primary);background:var(--bg-tertiary);border-top:1px solid var(--border);white-space:pre-wrap;word-wrap:break-word}.layer-list{max-height:200px;overflow-y:auto;transition:max-height .3s ease;padding:.5rem;display:flex;flex-wrap:wrap;gap:.5rem}.layer-list.collapsed{max-height:0;overflow:hidden;padding:0}.layer-item{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500;transition:all .2s}.layer-item.pending{background:var(--bg-tertiary);color:var(--text-secondary)}.layer-item.typing{background:#e91e6333;color:#ec4899;animation:typing-pulse .8s ease-in-out infinite}.layer-item.done{background:#4ecca333;color:var(--success)}.layer-icon{font-size:.7rem}@keyframes typing-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}#structure-container{padding:.5rem 1rem}.music-structure{background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;overflow:hidden}.music-structure .structure-header{display:flex;justify-content:space-between;align-items:center;padding:.4rem .75rem;background:var(--bg-tertiary);font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.layer-count{font-size:.7rem;opacity:.7}.structure-layers{padding:.5rem;display:flex;flex-direction:column;gap:.4rem}.structure-layer{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;padding:.4rem .5rem;background:var(--bg-tertiary);border-radius:4px;border-left:3px solid var(--border)}.structure-layer.drums{border-left-color:#e94560}.structure-layer.bass{border-left-color:#4ecca3}.structure-layer.melody{border-left-color:#fbbf24}.structure-layer.chords{border-left-color:#818cf8}.structure-layer.fx{border-left-color:#ec4899}.layer-header{display:flex;align-items:center;gap:.4rem;min-width:70px}.layer-icon{font-size:.9rem}.layer-name{font-size:.75rem;font-weight:500;color:var(--text-primary)}.layer-bar{height:6px;background:var(--bg-primary);border-radius:3px;overflow:hidden}.energy-fill{height:100%;background:linear-gradient(90deg,var(--success),#4ecca3);border-radius:3px;transition:width .3s ease}.layer-pattern{font-size:.7rem;color:var(--text-secondary);font-family:JetBrains Mono,monospace;opacity:.7}.structure-empty{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;color:var(--text-secondary);font-size:.8rem}.empty-icon{font-size:1.2rem;opacity:.5}.structure-overview{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:.75rem 1rem}.structure-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.structure-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.structure-info{font-size:.7rem;color:var(--text-secondary)}.structure-timeline{display:flex;height:48px;background:var(--bg-primary);overflow:hidden}.structure-empty{display:flex;align-items:center;justify-content:center;width:100%;color:var(--text-secondary);font-size:.8rem;font-style:italic}.timeline-section{position:relative;display:flex;align-items:center;justify-content:center;min-width:40px;cursor:pointer;transition:all .2s;border-right:1px solid var(--bg-primary)}.timeline-section:hover{filter:brightness(1.2)}.timeline-section.current{box-shadow:inset 0 0 0 2px #fff}.section-label{font-size:.65rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:.02em;z-index:1}.energy-bar{position:absolute;bottom:0;left:0;right:0;background:#ffffff4d;transition:height .3s ease}.structure-suggestions{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.75rem;min-height:32px}.suggestions-label{color:var(--text-secondary)}.suggestion-chip{padding:.2rem .5rem;border:1px solid;border-radius:4px;font-size:.7rem;font-weight:500;cursor:pointer;transition:all .2s}.suggestion-chip:hover{background:#ffffff1a}.timeline-structure{padding:.5rem 1rem}.timeline-wrapper{background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;overflow:hidden}.timeline-header{display:flex;justify-content:space-between;align-items:center;padding:.4rem .75rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.timeline-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.timeline-info{font-size:.7rem;color:var(--text-secondary);opacity:.7}.timeline-empty{display:flex;align-items:center;justify-content:center;padding:1rem;color:var(--text-secondary);font-size:.8rem;font-style:italic}.timeline-content{padding:.5rem}.beat-ruler{display:flex;margin-bottom:.25rem}.ruler-label{width:60px;flex-shrink:0}.ruler-beats{display:flex;flex:1;gap:1px}.beat-marker{flex:1;height:16px;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--text-secondary);background:var(--bg-primary);border-radius:2px}.beat-marker.downbeat{background:var(--bg-tertiary);color:var(--text-primary);font-weight:600}.pattern-tracks{display:flex;flex-direction:column;gap:2px}.pattern-track{display:flex;align-items:center}.track-label{width:60px;flex-shrink:0;padding:.25rem .5rem;border-left:3px solid var(--border);background:var(--bg-tertiary);border-radius:2px 0 0 2px}.track-name{font-size:.7rem;font-weight:500;color:var(--text-primary)}.track-cells{display:flex;flex:1;gap:1px}.beat-cell{flex:1;height:20px;background:var(--bg-primary);border-radius:2px;transition:background .15s ease}.beat-cell.active{opacity:.9}.beat-cell.active:hover{opacity:1;transform:scale(1.05)}.sections-row{display:flex;padding:.5rem;border-bottom:1px solid var(--border);align-items:center}.section-label{width:60px;flex-shrink:0;font-size:.7rem;color:var(--text-secondary)}.section-blocks{display:flex;flex:1;gap:2px;height:28px}.section-block{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:4px;border:2px solid;padding:.2rem;min-width:50px;cursor:pointer;transition:all .2s}.section-block:hover{filter:brightness(1.2)}.section-name{font-size:.65rem;font-weight:600;color:var(--text-primary);text-transform:uppercase}.section-bars{font-size:.55rem;color:var(--text-secondary)}.api-mode-btn{background:#1e293b;color:var(--text-secondary);border:1px solid var(--border);display:flex;align-items:center;gap:.4rem}.api-mode-btn:hover{background:#334155;color:var(--text-primary)}.api-mode-btn.active{background:#6366f1;color:#fff;border-color:#6366f1}.api-mode-btn.active .api-icon{animation:apiPulse 1s infinite}.api-icon{font-size:.9rem}@keyframes apiPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.api-status{position:fixed;top:70px;right:200px;background:#6366f1e6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;display:flex;align-items:center;gap:.5rem;z-index:100;animation:fadeIn .3s ease}.api-status .api-dot{animation:apiDotPulse 1.5s infinite}.api-status .api-state{font-weight:500}.api-status .api-state.connected{color:#4ade80}.api-status .api-state.disconnected{color:#f87171}@keyframes apiDotPulse{0%,to{opacity:1}50%{opacity:.4}}.evolve-mode-btn{background:#1e293b;color:var(--text-secondary);border:1px solid var(--border);display:flex;align-items:center;gap:.4rem}.evolve-mode-btn:hover{background:#334155;color:var(--text-primary)}.evolve-mode-btn.active{background:#10b981;color:#fff;border-color:#10b981}.evolve-mode-btn.active .evolve-icon{animation:evolvePulse 2s infinite}.evolve-icon{font-size:.9rem}@keyframes evolvePulse{0%,to{opacity:1;transform:scale(1) rotate(0)}25%{opacity:.8;transform:scale(1.1) rotate(5deg)}50%{opacity:1;transform:scale(1) rotate(0)}75%{opacity:.8;transform:scale(1.1) rotate(-5deg)}}.evolve-status{position:fixed;top:70px;right:20px;background:#10b981e6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;display:flex;align-items:center;gap:.5rem;z-index:100;animation:fadeIn .3s ease}.evolve-status .evolve-dot{animation:evolveDotPulse 2s infinite}.evolve-status .evolve-state{font-weight:500}.evolve-status .evolve-intensity{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.2rem .5rem;border-radius:10px;font-size:.8rem;cursor:pointer}.evolve-status .evolve-intensity:hover{background:#ffffff4d}.evolve-status .evolve-intensity option{background:#1e293b;color:#fff}@keyframes evolveDotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}#nl-input.api-mode-typing{border-color:#6366f1!important;box-shadow:0 0 0 2px #6366f14d;animation:apiInputPulse .3s ease}@keyframes apiInputPulse{0%{box-shadow:0 0 0 2px #6366f199}to{box-shadow:0 0 0 2px #6366f14d}}body.api-mode #nl-input-section{border-left:3px solid #6366f1;padding-left:calc(.75rem - 3px)}body.api-mode #nl-input::placeholder{color:#818cf8}body.api-mode #nl-input:focus{border-color:#6366f1}