:root{--bg:#0a0a0f;--surface:#111118;--surface2:#1a1a24;--surface3:#222230;--border:#ffffff12;--border-active:#8b5cf680;--text:#f0f0f5;--muted:#889;--accent:#8b5cf6;--accent2:#06b6d4;--success:#10b981;--error:#ef4444;--sans:"Inter", "Helvetica Neue", sans-serif;--mono:"JetBrains Mono", "SFMono-Regular", monospace;font:16px/1.6 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{background:radial-gradient(ellipse at 20% 0%, #8b5cf61f 0%, transparent 50%), radial-gradient(ellipse at 80% 0%, #06b6d414 0%, transparent 50%), var(--bg);min-height:100vh;margin:0}img{max-width:100%}button,input,select{font:inherit}#root{width:min(1100px,100% - 2rem);margin:0 auto;padding:2rem 0 4rem}h1,h2,h3{letter-spacing:-.02em;margin:0;line-height:1.1}h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800}h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700}h3{font-size:1.1rem;font-weight:600}p{margin:0}.app-shell{border:1px solid var(--border);background:var(--surface);border-radius:1.5rem;padding:2.5rem;box-shadow:0 0 0 1px #ffffff08,0 32px 80px #00000080}.hero-panel{gap:.75rem;margin-bottom:2.5rem;display:grid}.hero-panel__kicker{letter-spacing:.15em;text-transform:uppercase;color:var(--accent);align-items:center;gap:.5rem;margin:0;font-size:.75rem;font-weight:700;display:flex}.hero-panel__kicker:before{content:"";background:var(--accent);width:8px;height:8px;box-shadow:0 0 8px var(--accent);border-radius:50%;display:inline-block}.hero-panel h1 span{background:linear-gradient(135deg, var(--accent), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-panel__lede{color:var(--muted);max-width:38rem;font-size:.95rem}@media (width<=720px){.app-shell{border-radius:1rem;padding:1.25rem}#root{padding:.75rem 0 2rem}}.style-selector{margin-bottom:2rem}.style-selector__label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;font-size:.8rem;font-weight:600;display:block}.style-selector__grid{flex-wrap:wrap;gap:.5rem;display:flex}.style-chip{border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:500;transition:all .15s}.style-chip:hover{border-color:var(--accent);color:var(--text)}.style-chip.is-active{border-color:var(--accent);color:var(--accent);background:#8b5cf626;box-shadow:0 0 0 1px #8b5cf633}.upload-zone{border:2px dashed var(--border);text-align:center;cursor:pointer;background:var(--surface2);-webkit-user-select:none;user-select:none;border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;min-height:160px;margin-bottom:1.5rem;padding:2.5rem;transition:border-color .2s,background .2s;display:flex;position:relative}.upload-zone:hover,.upload-zone.is-dragging{border-color:var(--accent);background:#8b5cf60f}.upload-zone.is-disabled{cursor:not-allowed;opacity:.55;pointer-events:none}.upload-zone input[type=file]{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;position:absolute;inset:0}.upload-icon{pointer-events:none;font-size:2.5rem;line-height:1}.upload-zone__text{color:var(--text);pointer-events:none;font-size:1rem;font-weight:600}.upload-zone__sub{color:var(--muted);pointer-events:none;font-size:.8rem}.pipeline{grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:2rem;display:grid}@media (width<=600px){.pipeline{grid-template-columns:repeat(2,1fr)}}.pipeline-step{border:1px solid var(--border);background:var(--surface2);border-radius:.75rem;gap:.4rem;padding:1rem;transition:all .3s;display:grid}.pipeline-step.is-active{border-color:var(--accent);background:#8b5cf614;box-shadow:0 0 0 1px #8b5cf61a}.pipeline-step.is-done{background:#10b9810d;border-color:#10b98166}.pipeline-step.is-error{background:#ef44440d;border-color:#ef444466}.step-icon{font-size:1.3rem}.step-name{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.75rem;font-weight:700}.pipeline-step.is-active .step-name{color:var(--accent)}.pipeline-step.is-done .step-name{color:var(--success)}.pipeline-step.is-error .step-name{color:var(--error)}.step-status{color:var(--muted);min-height:1.1em;font-size:.78rem}.step-bar{background:var(--border);border-radius:999px;height:3px;margin-top:.25rem;overflow:hidden}.step-bar__fill{background:var(--accent);border-radius:999px;height:100%;transition:width .4s}.pipeline-step.is-active .step-bar__fill{animation:1.5s ease-in-out infinite bar-pulse}.pipeline-step.is-done .step-bar__fill{background:var(--success);width:100%!important}.pipeline-step.is-error .step-bar__fill{background:var(--error)}@keyframes bar-pulse{0%,to{width:15%}50%{width:85%}}.error-box{color:#fca5a5;background:#ef444414;border:1px solid #ef44444d;border-radius:.75rem;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;padding:1rem 1.25rem;font-size:.88rem;display:flex}.frames-section{margin-bottom:2rem}.section-title{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.75rem;font-weight:700;display:flex}.section-title:after{content:"";background:var(--border);flex:1;height:1px}.frames-grid{grid-template-columns:repeat(5,1fr);gap:.6rem;display:grid}@media (width<=600px){.frames-grid{grid-template-columns:repeat(3,1fr)}}.frame-card{border:1px solid var(--border);background:var(--surface2);border-radius:.6rem;overflow:hidden}.frame-card img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}.frame-card figcaption{color:var(--muted);font-size:.7rem;font-family:var(--mono);justify-content:space-between;margin:0;padding:.4rem .5rem;display:flex}.timeline-section{margin-bottom:2rem}.timeline-list{gap:.5rem;display:grid}.timeline-entry{border:1px solid var(--border);background:var(--surface2);border-radius:.6rem;grid-template-columns:3.5rem 5rem 5rem 1fr;align-items:center;gap:.5rem 1rem;padding:.9rem 1.1rem;display:grid}@media (width<=720px){.timeline-entry{grid-template-columns:1fr 1fr}}.tl-time{font-size:.8rem;font-family:var(--mono);color:var(--accent2);font-weight:600}.tl-mood{color:var(--text);font-size:.78rem;font-weight:600}.tl-tempo{color:var(--muted);text-transform:capitalize;font-size:.75rem}.tl-prompt{color:var(--muted);font-size:.78rem;line-height:1.4}.audio-section{margin-bottom:2rem}.audio-list{gap:.5rem;display:grid}.audio-entry{border:1px solid var(--border);background:var(--surface2);border-radius:.6rem;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.audio-label{font-size:.78rem;font-family:var(--mono);color:var(--accent2);min-width:6rem}.audio-entry audio{height:32px;accent-color:var(--accent);flex:1}.result-section{background:#10b9810d;border:1px solid #10b9814d;border-radius:1rem;gap:1.25rem;padding:1.5rem;display:grid}.result-section h3{color:var(--success)}.result-section video{background:#000;border-radius:.6rem;width:100%}.download-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:.6rem;align-items:center;gap:.5rem;width:fit-content;padding:.65rem 1.5rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:opacity .15s;display:inline-flex}.download-btn:hover{opacity:.85}