@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";
.demo-root{--demo-bg:#f7f5f0;--demo-panel:#fff;--demo-ink:#101010;--demo-ink-2:#3e3d39;--demo-ink-3:#77736b;--demo-line:#e3ded4;--demo-accent:#2168d9;--demo-green:#21a86b;--demo-red:#ff5a6b;background:linear-gradient(180deg, #ffffffe6, #f7f5f0f0), radial-gradient(circle at 78% 16%, #2168d926, transparent 30%), var(--demo-bg);min-height:100dvh;color:var(--demo-ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.demo-root *{box-sizing:border-box}.demo-root button{font:inherit}.demo-nav{justify-content:space-between;align-items:center;max-width:1240px;margin:0 auto;padding:22px 32px;display:flex}.demo-brand,.demo-nav a{color:inherit;text-decoration:none}.demo-brand{align-items:center;gap:10px;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;font-weight:600;display:inline-flex}.demo-mark{color:#fff;letter-spacing:-.04em;background:#0a0a0a;border-radius:8px;place-items:center;width:30px;height:30px;font-weight:700;display:grid}.demo-mark span{opacity:.72}.demo-nav-actions{align-items:center;gap:10px;display:flex}.demo-btn,.demo-icon-btn{border:1px solid var(--demo-line);min-height:38px;color:var(--demo-ink);cursor:pointer;background:#fff;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:600;text-decoration:none;transition:transform .14s,border-color .14s,background .14s;display:inline-flex}.demo-icon-btn{width:38px;padding:0}.demo-btn:hover,.demo-icon-btn:hover{border-color:#cfc7ba;transform:translateY(-1px)}.demo-btn-primary{color:#fff;background:#0a0a0a;border-color:#0a0a0a}.demo-shell{grid-template-columns:330px minmax(0,1fr);gap:28px;max-width:1240px;margin:0 auto;padding:40px 32px 64px;display:grid}.demo-side{padding-top:28px}.demo-eyebrow,.demo-muted{color:var(--demo-ink-3);text-transform:uppercase;letter-spacing:.08em;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px}.demo-side h1{letter-spacing:0;margin:16px 0 14px;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;font-size:clamp(40px,6vw,70px);line-height:.95}.demo-side p{color:var(--demo-ink-2);margin:0;font-size:16px;line-height:1.6}.demo-steps{gap:8px;margin-top:28px;display:grid}.demo-guide-card{border:1px solid var(--demo-line);background:#ffffffd1;border-radius:8px;margin-top:24px;padding:16px;box-shadow:0 1px 2px #251f140a}.demo-guide-card span{color:var(--demo-accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;display:block}.demo-guide-card strong{color:var(--demo-ink);font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:1.2;display:block}.demo-guide-card p{color:var(--demo-ink-2);margin-top:8px;font-size:13px;line-height:1.5}.demo-guide-actions{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.demo-step{min-height:42px;color:var(--demo-ink-3);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;gap:10px;padding:0 8px;display:flex}.demo-step span{border:1px solid var(--demo-line);background:#fff;border-radius:999px;place-items:center;width:24px;height:24px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;display:grid}.demo-step.is-done{color:var(--demo-ink-2)}.demo-step.is-active{border-color:var(--demo-line);color:var(--demo-ink);background:#ffffffb8}.demo-step.is-active span{background:var(--demo-accent);color:#fff;border-color:var(--demo-accent)}.demo-app{border:1px solid var(--demo-line);background:#ffffffdb;border-radius:8px;overflow:hidden;box-shadow:0 24px 80px #251f141f,0 2px 8px #251f140f}.demo-app-top{border-bottom:1px solid var(--demo-line);justify-content:space-between;align-items:flex-start;gap:20px;padding:22px;display:flex}.demo-app h2,.demo-app h3{letter-spacing:0;margin:6px 0 0;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif}.demo-app h2{font-size:28px}.demo-app h3{font-size:21px}.demo-status,.demo-pill{border:1px solid var(--demo-line);color:var(--demo-ink-2);text-transform:uppercase;background:#fff;border-radius:999px;align-items:center;gap:6px;padding:5px 9px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;display:inline-flex}.demo-status span{background:var(--demo-ink-3);border-radius:999px;width:6px;height:6px}.demo-status.is-live span{background:var(--demo-green);box-shadow:0 0 0 4px #21a86b1f}.demo-progress{background:#eee9df;height:5px}.demo-progress div{background:linear-gradient(90deg, var(--demo-accent), var(--demo-green));height:100%;transition:width .2s}.demo-grid{grid-template-columns:1.2fr 1fr;gap:14px;padding:18px;display:grid}.demo-panel{border:1px solid var(--demo-line);background:#fff;border-radius:8px;min-height:190px}.demo-panel-head{border-bottom:1px solid var(--demo-line);color:var(--demo-ink-2);justify-content:space-between;align-items:center;padding:12px 14px;font-size:13px;font-weight:700;display:flex}.demo-upload{grid-row:span 2}.demo-drop{text-align:center;min-height:322px;color:var(--demo-ink-3);background:#fbfaf7;border:1px dashed #cfc7ba;border-radius:8px;align-content:center;place-items:center;gap:10px;margin:14px;padding:24px;display:grid}.demo-drop strong{color:var(--demo-ink)}.demo-drop.is-active{background:#f6fbf8;border-style:solid}.demo-file-meter{background:#e8e2d8;border-radius:999px;width:min(280px,100%);height:8px;overflow:hidden}.demo-file-meter div{background:var(--demo-green);height:100%;transition:width .2s}.demo-signal-list{gap:14px;padding:18px 14px;display:grid}.demo-signal-list div{gap:7px;display:grid}.demo-signal-list span{color:var(--demo-ink-2);font-size:12px;font-weight:600}.demo-signal-list i{background:#e8e2d8;border-radius:999px;height:7px;transition:width .35s,background .35s;display:block}.demo-signal-list .is-filled i{background:linear-gradient(90deg, var(--demo-accent), var(--demo-green))}.demo-log-lines{color:var(--demo-ink-2);gap:10px;padding:16px 14px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;display:grid}.demo-log-lines div{align-items:center;gap:8px;display:flex}.demo-log-lines span{background:var(--demo-accent);border-radius:999px;width:6px;height:6px}.demo-results,.demo-export{border:1px solid var(--demo-line);opacity:.42;background:#fff;border-radius:8px;margin:0 18px 18px;transition:opacity .25s,transform .25s;transform:translateY(4px)}.demo-results.is-visible,.demo-export.is-visible{opacity:1;transform:none}.demo-results-head,.demo-export{justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex}.demo-clips{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 16px 16px;display:grid}.demo-clip{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px;display:grid}.demo-thumb{aspect-ratio:9/16;color:#fff;border-radius:8px;min-height:164px;position:relative;overflow:hidden}.demo-score,.demo-duration{background:#0000008f;border-radius:999px;padding:3px 7px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;position:absolute;top:8px}.demo-score{align-items:center;gap:4px;display:inline-flex;left:8px}.demo-score span{background:var(--demo-red);border-radius:999px;width:5px;height:5px}.demo-duration{right:8px}.demo-thumb p{text-align:center;text-shadow:0 2px 10px #000000a6;margin:0;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:700;line-height:1.18;position:absolute;bottom:12px;left:10px;right:10px}.demo-clip-meta{min-width:0}.demo-clip-meta strong,.demo-clip-meta span{display:block}.demo-clip-meta strong{font-size:13px;line-height:1.25}.demo-clip-meta span{color:var(--demo-ink-3);margin-top:6px;font-size:12px;line-height:1.35}.demo-export{background:#fbfaf7}.demo-opencut{grid-template-columns:minmax(220px,.55fr) minmax(0,1fr);align-items:stretch;display:grid}.demo-opencut-copy p{color:var(--demo-ink-2);margin:8px 0 0;font-size:13px;line-height:1.5}.demo-timeline{border:1px solid var(--demo-line);color:#f8f8f8;background:#151515;border-radius:8px;min-width:0;overflow:hidden}.demo-timeline-head{border-bottom:1px solid #ffffff1f;justify-content:space-between;gap:12px;padding:10px 12px;font-size:12px;display:flex}.demo-timeline-head span{color:#ffffff94;text-overflow:ellipsis;white-space:nowrap;font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;overflow:hidden}.demo-preview-window{grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px;padding:14px;display:grid}.demo-phone-preview{aspect-ratio:9/16;background:linear-gradient(155deg,#2a0d14,#7a1e31 58%,#050505);border:1px solid #ffffff29;border-radius:14px;position:relative;overflow:hidden}.demo-phone-preview p{color:#fff;text-align:center;margin:0;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:700;line-height:1.18;position:absolute;bottom:16px;left:10px;right:10px}.demo-edit-stack{color:#ffffffa3;gap:9px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;display:grid}.demo-edit-stack div{gap:5px;display:grid}.demo-edit-stack span{background:linear-gradient(90deg,#2168d9,#21a86b);border-radius:5px;height:24px;display:block}.demo-export-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.demo-intel{border:1px solid var(--demo-line);opacity:.42;background:#fff;border-radius:8px;margin:0 18px 18px;transition:opacity .25s,transform .25s;transform:translateY(4px)}.demo-intel.is-visible{opacity:1;transform:none}.demo-intel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 16px 16px;display:grid}.demo-intel-card{border:1px solid var(--demo-line);background:#fbfaf7;border-radius:8px;padding:14px}.demo-intel-card span{color:var(--demo-accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;display:block}.demo-intel-card strong{color:var(--demo-ink);font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;font-size:15px;line-height:1.22;display:block}.demo-intel-card p{color:var(--demo-ink-2);margin:8px 0 0;font-size:12px;line-height:1.45}@media (max-width:980px){.demo-shell{grid-template-columns:1fr;padding-top:16px}.demo-side{padding-top:0}.demo-side h1{max-width:720px}.demo-steps{grid-template-columns:repeat(5,minmax(0,1fr))}.demo-step{text-align:center;flex-direction:column;place-content:center;gap:6px;min-height:70px}}@media (max-width:720px){.demo-nav{padding:18px}.demo-shell{padding:16px 18px 42px}.demo-nav-actions .demo-btn{display:none}.demo-steps,.demo-grid,.demo-clips{grid-template-columns:1fr}.demo-app-top,.demo-results-head,.demo-export{flex-direction:column;align-items:flex-start}.demo-opencut,.demo-intel-grid{grid-template-columns:1fr}.demo-upload{grid-row:auto}.demo-drop{min-height:250px}.demo-clip{grid-template-columns:82px minmax(0,1fr)}.demo-thumb{min-height:146px}}