.composer-container{--font-display:"Outfit",system-ui,sans-serif;--font-body:"DM Sans",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--bg-primary:#0f0f12;--bg-secondary:#1a1a1f;--bg-elevated:#252529;--bg-card:#1e1e24;--bg-card-hover:#262630;--text-primary:#f5f5f7;--text-secondary:#a1a1aa;--text-muted:#71717a;--color-brand:#f97316;--color-brand-light:#fb923c;--color-brand-dark:#ea580c;--color-brand-glow:rgba(249,115,22,.2);--color-success:#22c55e;--color-success-glow:rgba(34,197,94,.2);--color-error:#ef4444;--color-error-glow:rgba(239,68,68,.15);--color-warning:#f59e0b;--color-warning-glow:rgba(245,158,11,.15);--border-subtle:hsla(0,0%,100%,.06);--border-medium:hsla(0,0%,100%,.1);--border-focus:rgba(249,115,22,.5);--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 6px rgba(0,0,0,.4);--shadow-lg:0 10px 15px rgba(0,0,0,.5);--transition-fast:150ms ease;--transition-normal:200ms ease;--transition-slow:300ms ease;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);min-height:100vh}.composer-heading{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}.composer-heading-xl{font-size:2rem;line-height:1.2}.composer-heading-lg{font-size:1.5rem;line-height:1.3}.composer-heading-md{font-size:1.25rem;line-height:1.4}.composer-heading-sm{font-size:1rem;line-height:1.5}.card-enter{animation:cardEnter .5s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}@keyframes cardEnter{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.card-enter:first-child{animation-delay:0ms}.card-enter:nth-child(2){animation-delay:50ms}.card-enter:nth-child(3){animation-delay:.1s}.card-enter:nth-child(4){animation-delay:.15s}.card-enter:nth-child(5){animation-delay:.2s}.card-enter:nth-child(6){animation-delay:.25s}.generating-pulse{animation:generatingPulse 2s ease-in-out infinite}@keyframes generatingPulse{0%,to{box-shadow:0 0 0 0 var(--color-brand-glow)}50%{box-shadow:0 0 20px 4px var(--color-brand-glow)}}.waveform-bar{animation:waveformBounce .8s ease-in-out infinite}.waveform-bar:first-child{animation-delay:0ms}.waveform-bar:nth-child(2){animation-delay:.1s}.waveform-bar:nth-child(3){animation-delay:.2s}.waveform-bar:nth-child(4){animation-delay:.3s}.waveform-bar:nth-child(5){animation-delay:.4s}@keyframes waveformBounce{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.scene-thumbnail{overflow:hidden}.scene-thumbnail img{transition:transform 3s ease-out}.scene-thumbnail:hover img{transform:scale(1.1)}.btn-primary{background:linear-gradient(135deg,var(--color-brand),var(--color-brand-dark));color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:500;transition:all var(--transition-fast);border:none;cursor:pointer}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--color-brand-glow)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:500;transition:all var(--transition-fast);border:1px solid var(--border-subtle);cursor:pointer}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-medium)}.composer-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.25rem;transition:all var(--transition-normal)}.composer-card:hover{background:var(--bg-card-hover);border-color:var(--border-medium);transform:translateY(-2px);box-shadow:var(--shadow-md)}.sidebar-nav-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:var(--radius-md);font-weight:500;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--transition-fast);width:100%;text-align:left}.sidebar-nav-item.active,.sidebar-nav-item:hover{color:var(--text-primary);background:var(--bg-elevated)}.sidebar-nav-item.active{border-left:3px solid var(--color-brand)}.composer-input{width:100%;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.75rem 1rem;color:var(--text-primary);font-family:var(--font-body);font-size:.9375rem;transition:all var(--transition-fast)}.composer-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--color-brand-glow)}.composer-input::-moz-placeholder{color:var(--text-muted)}.composer-input::placeholder{color:var(--text-muted)}.composer-textarea{min-height:200px;resize:vertical}.composer-select{width:100%;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.75rem 1rem;color:var(--text-primary);font-family:var(--font-body);font-size:.9375rem;cursor:pointer;transition:all var(--transition-fast)}.composer-select:focus{outline:none;border-color:var(--border-focus)}.composer-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;background:var(--color-brand-glow);color:var(--color-brand)}.composer-spinner{width:20px;height:20px;border:2px solid var(--border-subtle);border-top-color:var(--color-brand);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.composer-empty{flex-direction:column;padding:3rem;text-align:center}.composer-empty,.composer-empty-icon{display:flex;align-items:center;justify-content:center}.composer-empty-icon{width:80px;height:80px;background:var(--bg-secondary);border-radius:var(--radius-xl);margin-bottom:1.5rem;font-size:2rem}.composer-empty-title{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.composer-empty-description{color:var(--text-secondary);max-width:300px;margin-bottom:1.5rem}.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.scene-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-normal)}.scene-card:hover{border-color:var(--border-medium);transform:translateY(-2px);box-shadow:var(--shadow-md)}.scene-card-image{aspect-ratio:9/16;width:100%;-o-object-fit:cover;object-fit:cover;background:var(--bg-secondary)}.scene-card-content{padding:.75rem}.scene-card-actions{display:flex;gap:.5rem;margin-top:.5rem}.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--border-subtle);padding:.5rem .25rem calc(.5rem + env(safe-area-inset-bottom));z-index:100}.mobile-bottom-nav-inner{display:flex;justify-content:space-around;max-width:400px;margin:0 auto}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .75rem;border-radius:var(--radius-md);background:transparent;border:none;cursor:pointer;transition:all var(--transition-fast);min-width:64px}.mobile-nav-item-icon{font-size:1.25rem;line-height:1}.mobile-nav-item-label{font-size:.625rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.025em}.mobile-nav-item.active{background:var(--color-brand-glow)}.mobile-nav-item.active .mobile-nav-item-label{color:var(--color-brand)}@media (max-width:768px){.mobile-bottom-nav{display:block}.composer-sidebar{display:none}.composer-main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}.scene-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.scene-grid{grid-template-columns:1fr}.composer-heading-xl{font-size:1.5rem}.composer-card{padding:1rem}}@media (prefers-reduced-motion:reduce){.card-enter,.composer-spinner,.generating-pulse,.scene-thumbnail img,.waveform-bar{animation:none;transition:none}}:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}.composer-container ::-webkit-scrollbar{width:8px;height:8px}.composer-container ::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}.composer-container ::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}.composer-container ::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}