:root{--bg-0: #0b0d10;--bg-1: #11151a;--bg-2: #181d24;--bg-3: #232a33;--line: #2a323d;--text: #e6ebf2;--text-dim: #8b95a3;--accent: #4f9dff;--accent-2: #6f5cff;--warn: #f5a524;--danger: #ef4444;--ok: #22c55e;--track-video: #2d5a87;--track-audio: #3a6e4a;--clip-video: #4f9dff;--clip-audio: #5fbf75;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,system-ui,sans-serif;font-size:13px;background:var(--bg-0);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;font-size:inherit;background:var(--bg-3);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:#2d3744;border-color:#3a4654}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#0b0d10;font-weight:600}button.primary:hover:not(:disabled){background:#6dabff}button.ghost{background:transparent}input,select{font-family:inherit;font-size:inherit;background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:4px 6px}input[type=range]{padding:0;background:transparent;border:none;width:100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a323d;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#3a4654}.app{display:grid;grid-template-rows:44px 1fr auto;grid-template-columns:260px 1fr 280px;grid-template-areas:"topbar topbar topbar" "library preview properties" "timeline timeline timeline";height:100vh;gap:1px;background:#000}.topbar{grid-area:topbar;background:var(--bg-1);display:flex;align-items:center;padding:0 12px;gap:8px;border-bottom:1px solid var(--line)}.topbar .brand{font-weight:700;letter-spacing:.3px;padding-right:12px;border-right:1px solid var(--line);margin-right:4px}.topbar .brand .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}.topbar .spacer{flex:1}.topbar .status{color:var(--text-dim);font-size:12px;padding:0 6px}.library{grid-area:library;background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.library .header,.properties .header{padding:10px 12px;font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--text-dim);text-transform:uppercase;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}.library .body{flex:1;overflow:auto;padding:8px}.media-card{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:6px;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;margin-bottom:4px}.media-card:hover{background:var(--bg-2)}.media-card.active{background:var(--bg-3)}.media-card .thumb{width:64px;height:40px;background:#000;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-card .thumb img,.media-card .thumb canvas{width:100%;height:100%;object-fit:cover}.media-card .meta{display:flex;flex-direction:column;justify-content:center;min-width:0}.media-card .meta .name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-card .meta .sub{font-size:11px;color:var(--text-dim)}.preview{grid-area:preview;background:var(--bg-0);display:flex;flex-direction:column;min-width:0;min-height:0}.preview .stage{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#0a0a0a 25%,transparent 25%) 0 0/16px 16px,linear-gradient(-45deg,#0a0a0a 25%,transparent 25%) 0 0/16px 16px,linear-gradient(45deg,transparent 75%,#0a0a0a 75%) 8px 8px/16px 16px,linear-gradient(-45deg,transparent 75%,#0a0a0a 75%) 8px 8px/16px 16px,#050505;overflow:hidden;position:relative}.preview canvas{max-width:100%;max-height:100%;background:#000;box-shadow:0 6px 30px #00000080}.preview .transport{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-1);border-top:1px solid var(--line)}.preview .transport .time{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:12px;min-width:130px;text-align:center}.preview .transport button{width:32px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}.properties{grid-area:properties;background:var(--bg-1);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.properties .body{flex:1;overflow:auto;padding:10px 12px}.prop-group{margin-bottom:14px}.prop-group h4{margin:0 0 8px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);font-weight:600}.prop-row{display:grid;grid-template-columns:80px 1fr 48px;align-items:center;gap:8px;margin-bottom:6px}.prop-row label{font-size:12px;color:var(--text-dim)}.prop-row .value{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}.timeline{grid-area:timeline;background:var(--bg-1);border-top:1px solid var(--line);display:flex;flex-direction:column;height:360px;min-height:200px;resize:vertical;overflow:hidden}.timeline .tools{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--bg-2)}.timeline .tools .spacer{flex:1}.timeline .zoom{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:12px}.timeline .zoom input[type=range]{width:140px}.tl-body{flex:1;display:grid;grid-template-columns:140px 1fr;min-height:0;overflow:hidden}.tl-headers{background:var(--bg-2);border-right:1px solid var(--line);overflow-y:scroll;overflow-x:hidden;scrollbar-width:none}.tl-headers::-webkit-scrollbar{display:none}.tl-headers .ruler-space{height:26px;border-bottom:1px solid var(--line)}.tl-headers .track-header{display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--line);gap:8px;background:var(--bg-2)}.tl-headers .track-header .name{flex:1;font-size:12px;color:var(--text)}.tl-headers .track-header.video .dot{background:var(--clip-video)}.tl-headers .track-header.audio .dot{background:var(--clip-audio)}.tl-headers .dot{width:8px;height:8px;border-radius:50%}.tl-scroll{position:relative;overflow:auto;background:var(--bg-1)}.tl-content{position:relative}.ruler{position:sticky;top:0;height:26px;background:var(--bg-2);border-bottom:1px solid var(--line);z-index:5}.ruler canvas{display:block;height:26px}.track-row{position:relative;border-bottom:1px solid var(--line)}.track-row.video{background:#2d5a870d}.track-row.audio{background:#3a6e4a0d}.clip{position:absolute;top:4px;bottom:4px;border-radius:4px;background:var(--clip-video);border:1px solid rgba(0,0,0,.4);cursor:grab;-webkit-user-select:none;user-select:none;overflow:hidden;display:flex;align-items:stretch}.clip.audio{background:var(--clip-audio)}.clip.selected{outline:2px solid #ffffff;outline-offset:-2px;z-index:3}.clip.linked:after{content:"🔗";position:absolute;top:1px;right:4px;font-size:10px;line-height:1;color:#0000008c;pointer-events:none;filter:grayscale(1)}.clip .label{position:absolute;top:2px;left:6px;right:6px;font-size:11px;color:#000000d9;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.clip .handle{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;background:#00000040}.clip .handle.left{left:0}.clip .handle.right{right:0}.clip .thumbs{position:absolute;top:14px;right:0;bottom:0;left:0;display:flex;pointer-events:none;opacity:.65}.clip .thumbs canvas{height:100%}.clip .waveform{position:absolute;top:14px;right:0;bottom:0;left:0;pointer-events:none;opacity:.85}.playhead{position:absolute;top:0;bottom:0;width:1.5px;background:#ff4f5e;pointer-events:none;z-index:4}.playhead .knob{position:absolute;top:0;left:-6px;width:12px;height:12px;background:#ff4f5e;clip-path:polygon(50% 100%,0 0,100% 0)}.empty{padding:20px 12px;color:var(--text-dim);font-size:12px;text-align:center;line-height:1.6}.tooltip{position:fixed;background:var(--bg-3);border:1px solid var(--line);padding:4px 8px;border-radius:4px;font-size:12px;pointer-events:none;z-index:1000}.kbd{display:inline-block;background:var(--bg-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:1px 5px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-1);border:1px solid var(--line);border-radius:8px;width:420px;max-width:90vw;padding:18px}.modal h3{margin:0 0 10px}.modal .row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:8px;margin-bottom:8px}.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}progress{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none}progress::-webkit-progress-bar{background:var(--bg-2);border-radius:3px}progress::-webkit-progress-value{background:var(--accent);border-radius:3px}