.clip-item{position:absolute;border:1px solid rgba(226,232,240,.35);box-sizing:border-box;cursor:grab;overflow:hidden;color:#e2e8f0;font-size:12px;display:flex;align-items:center;gap:10px}.clip-item-selected{outline:2px solid #fbbf24;outline-offset:-2px}.clip-item-dragging{cursor:grabbing;opacity:0}.clip-item-dimmed{opacity:.42}.clip-item-trim-handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}.clip-item-trim-left{left:0}.clip-item-trim-right{right:0}.clip-item-icon{width:24px;height:24px;border-radius:6px;background:#ffffff2e;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.clip-item-content{min-width:0}.clip-item-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:16px}.drag-preview{position:absolute;border:1px solid rgba(226,232,240,.35);box-sizing:border-box;cursor:grabbing;overflow:hidden;color:#e2e8f0;font-size:12px;z-index:6;display:flex;align-items:center;gap:10px}.drag-preview-valid{border-color:#e2e8f059}.drag-preview-invalid{border:1px solid #f87171}.drag-preview-content{min-width:0}.drag-preview-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:16px}.timeline-root{position:relative;width:100%;height:500px;overflow:hidden;border:1px solid #2b3342;background:#0f1115;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y}.timeline-main{position:absolute;top:0;right:0;bottom:0;overflow:hidden}.timeline-bg-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.timeline-ruler-canvas{position:absolute;left:0;right:0;top:0;height:44px;pointer-events:auto;z-index:7;cursor:pointer}.timeline-playhead-layer{position:absolute;left:0;top:0;pointer-events:none;z-index:10;overflow:hidden}.timeline-playhead{position:absolute;top:0;bottom:0;left:-5px;width:12px;transform:translate(0);will-change:transform;pointer-events:auto;cursor:ew-resize}.timeline-playhead-arrow{position:absolute;left:50%;top:0;margin-left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #ef4444}.timeline-playhead-line{position:absolute;left:50%;margin-left:-1px;top:8px;bottom:0;width:2px;background:#ef4444}.timeline-scroll-area{position:absolute;top:0;right:0;bottom:0;left:0;overflow-x:auto;overflow-y:scroll;z-index:1}.timeline-content{position:relative;min-height:100%;box-sizing:border-box}.timeline-snap-line{position:absolute;top:0;bottom:0;width:1px;background:#22d3ee;z-index:3}.timeline-insert-line{position:absolute;left:0;right:0;height:2px;background:#38bdf8;z-index:4;pointer-events:none}.timeline-scroll{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.62) rgba(17,24,39,.45)}.timeline-scroll::-webkit-scrollbar{width:10px;height:10px}.timeline-scroll::-webkit-scrollbar-track{background:#11182773;border-radius:999px}.timeline-scroll::-webkit-scrollbar-track:horizontal{background:transparent}.timeline-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#64748b9e,#4755699e);border-radius:999px;border:2px solid rgba(17,24,39,.45);transition:background .18s ease}.timeline-scroll::-webkit-scrollbar-corner{background:#11182773}:root{font-family:Inter,Segoe UI,PingFang SC,sans-serif;color:#e2e8f0}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{padding:20px}body{background:radial-gradient(circle at 10% -10%,#1f2b45 0%,transparent 40%),radial-gradient(circle at 100% 0%,#1b2f3a 0%,transparent 38%),#0b111b}.demo-page{width:min(1280px,96vw);margin:0 auto}.demo-header{margin-bottom:14px}.demo-header-row{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:12px}.demo-brand{text-align:center}.demo-header-links{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:8px}.header-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid #2f4160;background:#131d2e;color:#cbd5e1;font-size:13px;font-weight:600;text-decoration:none}.header-link-icon{width:14px;height:14px;flex:none}.header-link-icon-npm{width:18px;height:12px;object-fit:contain}.header-link:hover{background:#1b2a43}.demo-header h1{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.01em}.demo-title-group{display:flex;align-items:center}.demo-logo{height:66px;width:auto;max-width:220px;object-fit:contain;display:block}.demo-subtitle{margin:8px auto 0;color:#94a3b8;font-size:14px;text-align:center}.panel{background:#0f172acc;border:1px solid #233147;border-radius:12px;padding:12px;margin-bottom:12px}.panel-row{display:flex;align-items:center;gap:10px}.panel-row+.panel-row{margin-top:10px}.panel-row-wrap{flex-wrap:wrap}.primary-btn,.ghost-btn{border-radius:8px;border:1px solid #324660;padding:6px 12px;font-size:13px;cursor:pointer}.primary-btn{background:#2563eb;border-color:#1d4ed8;color:#eff6ff}.play-btn{width:84px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}.play-btn-icon{font-size:12px;line-height:1}.play-btn-paused{background:#2563eb;border-color:#1d4ed8;color:#eff6ff}.play-btn-playing{background:#0f766e;border-color:#0d5f58;color:#ecfeff}.play-btn-playing:hover{background:#115e59}.play-btn-paused:hover{background:#1d4ed8}.ghost-btn{background:#162235;color:#dbeafe}.primary-btn:disabled,.ghost-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.2)}.meta-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#cbd5e1;font-size:13px}.meta-item{min-width:100px;font-variant-numeric:tabular-nums}.control-group{margin:0;border:1px solid #2e3f58;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:12px;min-height:46px}.control-group legend{padding:0 6px;color:#9fb0c7;font-size:12px}.control-group label{display:inline-flex;align-items:center;gap:6px;color:#cbd5e1;font-size:13px;white-space:nowrap}.control-group input[type=checkbox]{margin:0}.control-group-zoom{gap:8px}.zoom-btn{width:30px;padding:4px 0;line-height:1}.zoom-slider{width:140px}.zoom-value{min-width:46px;text-align:right;font-size:12px;color:#9fb0c7;font-variant-numeric:tabular-nums}.hint{margin:0;color:#94a3b8;font-size:12px}.timeline-track-panel-header{height:30px;display:flex;align-items:center;padding:0 10px;color:#8fa4c5;font-size:12px;border-bottom:1px solid #253046;letter-spacing:.02em}.timeline-track-panel{position:absolute;left:0;top:0;bottom:0;border-right:1px solid #263245;background:#0d121c;z-index:12}.timeline-track-panel-body{position:absolute;left:0;right:0;top:30px;bottom:0;overflow:hidden}.timeline-track-row{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:0 8px;border-bottom:1px solid rgba(45,60,85,.35);background:#131b289e;overflow:hidden}.timeline-row-dim-overlay{position:absolute;left:0;right:0;background:#0a0e167a;pointer-events:none;z-index:2}.timeline-row-lock-overlay{position:absolute;left:0;right:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(-45deg,#b4bcc933 0,#b4bcc933 6px,#545e7033 6px,#545e7033 12px)}.timeline-track-controls{display:inline-flex;align-items:center;gap:8px}.timeline-track-btn{width:22px;height:22px;border-radius:6px;border:1px solid #31425f;background:#111a2a;color:#c8d6ee;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.timeline-track-btn.active{border-color:#60a5fa;color:#dbeafe;background:#1f3b63}.timeline-track-btn.danger{border-color:#5b3040;color:#fca5a5;background:#2a151f}.timeline-track-btn:disabled{opacity:.42;cursor:not-allowed}.stage{margin-bottom:12px}.timeline-root{border-radius:12px}.clip-item,.clip-item-dragging,.drag-preview{border-radius:8px;padding:4px 10px}.snippet{background:#0f172acc;border:1px solid #233147;border-radius:12px;padding:12px}.snippet h2{margin:0 0 8px;font-size:14px;color:#cbd5e1}.snippet pre{margin:0;padding:10px 12px;border-radius:8px;background:#0a1323;border:1px solid #22314a;color:#cbd5e1;font-size:12px;line-height:1.45;overflow:auto}@media (max-width: 900px){.demo-page{width:min(1280px,98vw)}.panel-row{align-items:flex-start;flex-wrap:wrap}.demo-header-row{position:static;justify-content:space-between;flex-wrap:wrap}.demo-brand{width:100%}.demo-header-links{position:static}}