:root{--bg: #E4E8F1;--panel: #F8F9FD;--ink: #10152B;--muted: #5B6382;--line: #CBD2E3;--cobalt: #2B44F2;--cobalt-d: #1E31C2;--tape: #FFD23F;--stage: #171C38;--bad: #B3261E;--ok: #1F7A52;--display: "Bricolage Grotesque", system-ui, sans-serif;--body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body)}.app{max-width:1280px;margin:0 auto;padding:24px 20px 56px}header h1{font:800 clamp(26px,4vw,40px)/1.05 var(--display);margin:0 0 6px;letter-spacing:-.02em}header p{margin:0 0 20px;color:var(--muted);max-width:60ch}main{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:18px;align-items:start}.left,.right{display:grid;gap:18px;min-width:0}@media (max-width: 900px){main{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}.panel h2{font:700 18px/1 var(--display);margin:0 0 14px;display:flex;align-items:center;gap:10px}.panel h3{font:600 13px/1 var(--body);color:var(--muted);margin:16px 0 8px}.step{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--ink);color:var(--tape);font-size:13px}button,.linkbtn{font:600 14px var(--body);border:0;border-radius:10px;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block}button:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:3px solid var(--tape);outline-offset:2px}.primary{background:var(--cobalt);color:#fff}.primary:hover:not(:disabled){background:var(--cobalt-d)}.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}.ghost:hover:not(:disabled){border-color:var(--cobalt)}.small{padding:7px 10px;font-weight:500;font-size:13px;text-align:left}.link{color:var(--cobalt);font-weight:500;font-size:14px}.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}.drop{border:2px dashed var(--line);border-radius:12px;padding:22px 14px;text-align:center;display:grid;gap:4px;cursor:pointer;background:#fff}.drop span{color:var(--muted);font-size:13px}.drop:hover,.drop.over{border-color:var(--cobalt);background:#eef1ff}.found{margin:16px 0 0}.chips{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}.chips li{padding:4px 11px;border-radius:999px;font-size:13px;font-weight:500}.chips .on{background:var(--ink);color:#fff}.chips .off{background:transparent;border:1px dashed var(--muted);color:var(--muted);text-decoration:line-through}details{margin-top:14px}summary{cursor:pointer;font-weight:600;font-size:14px}.controls{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}.controls td{padding:5px 0;border-bottom:1px solid var(--line)}.controls td:last-child{color:var(--muted);text-align:right}textarea{width:100%;font:15px/1.5 var(--body);padding:12px;border:1px solid var(--line);border-radius:12px;resize:vertical;background:#fff;color:var(--ink)}.examples{list-style:none;padding:0;margin:10px 0 14px;display:grid;gap:6px}.examples button{width:100%}.hint{color:var(--muted);font-size:13px;margin:10px 0 0}.hint.inline{margin-left:12px}.meta{margin-top:14px;font-size:13px;color:var(--muted)}.meta p{margin:4px 0}.warn{color:var(--bad);font-size:13px;margin:8px 0 0}.error{background:#fdecea;color:var(--bad);border:1px solid #F3B8B3;border-radius:12px;padding:12px 16px;margin-bottom:16px}.stage{width:100%;height:auto;aspect-ratio:16 / 9;border-radius:12px;display:block;background:var(--stage)}.transport{display:flex;align-items:center;gap:14px;margin:12px 0}.time{font-variant-numeric:tabular-nums;color:var(--muted)}.timeline{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;overflow-x:auto}.timeline .hint{margin:4px}.lanes{display:flex;gap:10px;min-width:460px}.labels{width:52px;flex:none;font-size:12px;color:var(--muted)}.labels div{height:30px;line-height:30px}.tracks{position:relative;flex:1;touch-action:none;cursor:ew-resize}.lane{position:relative;height:30px;border-bottom:1px solid #EEF0F6}.bar{position:absolute;top:4px;height:22px;border-radius:6px;background:var(--cobalt);color:#fff;font-size:11px;line-height:22px;padding:0 6px;overflow:hidden;white-space:nowrap;pointer-events:none}.playhead{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--tape);border-radius:2px;box-shadow:0 0 0 1px var(--ink);pointer-events:none}.json{background:var(--ink);color:#dde3ff;padding:12px;border-radius:10px;font-size:12px;max-height:280px;overflow:auto}.progress{position:relative;height:30px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:14px;overflow:hidden}.progress div{position:absolute;inset:0 auto 0 0;background:var(--tape);transition:width .15s}.progress span{position:relative;line-height:28px;padding-left:12px;font-size:13px;font-weight:600}.result{margin-top:14px;display:grid;gap:12px}.result video{width:100%;border-radius:12px;background:#000}.result .linkbtn{justify-self:start}@media (prefers-reduced-motion: reduce){*{transition:none!important}}