@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: #0a0a0d;--surface: #141319;--surface-2: #1c1b23;--line: #29282f;--text: #eeedf2;--text-muted: #8d8b98;--accent: #a78bfa;--accent-dim: #786099;--accent-ink: #17141f;--danger: #e5837a;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 14px;--radius-sm: 8px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:var(--accent-ink)}button{font-family:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em}.brand-mark{width:9px;height:9px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent)}.limits-pill{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}main{flex:1}.hero{max-width:880px;margin:0 auto;padding:72px 24px 24px;text-align:center}.hero h1{font-family:var(--font-display);font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}.hero p{color:var(--text-muted);font-size:17px;max-width:540px;margin:0 auto 40px;line-height:1.5}.karaoke-demo{display:inline-flex;gap:.4em;font-family:var(--font-display);font-size:clamp(20px,3vw,28px);font-weight:600;padding:18px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:48px}.karaoke-demo span{color:var(--text-muted);transition:color .15s ease}.karaoke-demo span.active{color:var(--accent);text-shadow:0 0 18px var(--accent-dim)}.dropzone{border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--surface);padding:56px 24px;transition:border-color .15s ease,background .15s ease}.dropzone.dragover{border-color:var(--accent);background:var(--surface-2)}.dropzone-inner{display:flex;flex-direction:column;align-items:center;gap:14px}.dropzone-title{font-family:var(--font-display);font-size:18px;font-weight:600}.dropzone-sub{color:var(--text-muted);font-size:13px}.btn-primary{background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius-sm);padding:12px 22px;font-weight:600;font-size:14px}.btn-primary:hover{filter:brightness(1.08)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 22px;font-weight:500;font-size:14px}.btn-secondary:hover{border-color:var(--accent-dim)}.card{max-width:880px;margin:0 auto;padding:0 24px 48px}.preview-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}.preview-card video{width:100%;border-radius:var(--radius-sm);background:#000}.meta-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}.meta-row:last-child{border-bottom:none}.meta-label{color:var(--text-muted)}.meta-value{font-family:var(--font-mono)}.progress-list{display:flex;flex-direction:column;gap:10px;max-width:880px;margin:0 auto;padding:0 24px 48px}.progress-step{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);font-size:14px;color:var(--text-muted)}.progress-step.active{border-color:var(--accent-dim);color:var(--text);background:var(--surface)}.progress-step.done{color:var(--text)}.dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0}.progress-step.active .dot{background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.1s ease-in-out infinite}.progress-step.done .dot{background:var(--text)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.editor{max-width:1080px;margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr 380px;gap:24px}@media (max-width: 860px){.editor{grid-template-columns:1fr}}.editor-video-pane{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:14px}.stage{position:relative;aspect-ratio:9/16;background:#000;border-radius:var(--radius-sm);overflow:hidden;max-height:70vh;margin:0 auto}.stage video{width:100%;height:100%;object-fit:contain}.sub-overlay{position:absolute;left:6%;right:6%;display:flex;flex-wrap:wrap;justify-content:center;gap:.3em;font-family:var(--font-display);font-weight:700;font-size:clamp(15px,4.2vw,22px);text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.5);pointer-events:none}.sub-overlay span.karaoke-word.sung{color:var(--accent)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:18px;max-height:80vh;overflow-y:auto}.panel h3{font-family:var(--font-display);font-size:14px;margin:0 0 6px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.field-group{display:flex;flex-direction:column;gap:8px}.pill-select{display:flex;gap:6px;flex-wrap:wrap}.pill-btn{border:1px solid var(--line);background:transparent;color:var(--text-muted);border-radius:999px;padding:7px 14px;font-size:12.5px}.pill-btn.selected{border-color:var(--accent);color:var(--text);background:var(--surface-2)}.line-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px}.line-row input[type=text]{flex:1;background:transparent;border:none;color:var(--text);font-size:13px;border-bottom:1px solid transparent}.line-row input[type=text]:focus{outline:none;border-bottom-color:var(--accent)}.line-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);white-space:nowrap}.result-card{max-width:460px;margin:0 auto;padding:24px;text-align:center}.result-card video{width:100%;border-radius:var(--radius);margin-bottom:20px}.result-actions{display:flex;gap:12px;justify-content:center;margin-top:16px}.error-banner{max-width:880px;margin:0 auto 24px;padding:14px 18px;border:1px solid var(--danger);color:var(--danger);border-radius:var(--radius-sm);font-size:14px}footer{text-align:center;padding:24px;color:var(--text-muted);font-size:12px;border-top:1px solid var(--line)}