.draft-timeline{--dt-thumbnail-image:url("assets/trim-video-track.png");--dt-thumbnail-size:23.58px 50.98px;--dt-thumbnail-position:0 0;--dt-trim-fill:#f9f9f9;display:flex;align-items:center;gap:12px;position:relative;width:100%;height:68px;padding:16px;border-radius:12px;background:#fff;color:#00000080;box-shadow:0 1px 1px #00000017,0 0 .5px #00000045,0 0 0 0 #00000003;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums}
.draft-timeline.is-trimmed{--dt-trim-fill:#ffba18}
.dt-play{position:relative;flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:18px;background:transparent;cursor:pointer;transition:background-color 150ms var(--ease,cubic-bezier(.2,0,0,1)),scale 150ms var(--ease,cubic-bezier(.2,0,0,1))}
.dt-play::after{content:"";position:absolute;inset:-2px 0 -2px -4px;border-radius:20px}.dt-play:hover{background:#00000006}.dt-play:active{scale:.96}
.dt-play-icon{position:absolute;width:13px;height:13px;display:grid;place-items:center;pointer-events:none;opacity:1;scale:1;filter:blur(0);transition:opacity 300ms cubic-bezier(.2,0,0,1),scale 300ms cubic-bezier(.2,0,0,1),filter 300ms cubic-bezier(.2,0,0,1)}
.dt-play-icon img{display:block;width:11px;height:12px;object-fit:contain}.dt-play-icon--play{translate:.5px 0}.dt-play-icon--pause img{width:9px;height:11px}.dt-play-icon--pause,.draft-timeline.is-playing .dt-play-icon--play{opacity:0;scale:.25;filter:blur(4px)}.draft-timeline.is-playing .dt-play-icon--pause{opacity:1;scale:1;filter:blur(0)}
.dt-track{position:relative;flex:1;min-width:90px;height:36px;border-radius:9px;touch-action:none;cursor:crosshair;outline-offset:3px}
.dt-film{position:absolute;inset:0;border-radius:9px;background-image:var(--dt-thumbnail-image);background-size:var(--dt-thumbnail-size);background-position:var(--dt-thumbnail-position);background-repeat:repeat-x;opacity:.8;box-shadow:inset 0 0 0 1px #00000017;pointer-events:none}
.dt-scrubber{position:absolute;inset:-2px 28px;border-radius:6px;pointer-events:none}.dt-scrubber:focus-visible{outline-offset:3px}
.dt-selection{position:absolute;inset:0 auto 0 0;background:var(--dt-trim-fill);border-radius:9px;box-shadow:0 1px 2px #00000017,0 0 1px #00000045,0 0 0 1px #00000003;pointer-events:none;transition:background-color 140ms cubic-bezier(.2,0,0,1)}
.dt-selected-frames{position:absolute;left:28px;right:28px;top:4px;height:28px;min-width:0;border-radius:6px;overflow:hidden;background-image:var(--dt-thumbnail-image);background-size:var(--dt-thumbnail-size);background-position:var(--dt-selected-position,0 0);background-repeat:repeat-x;box-shadow:inset 0 0 0 1px #00000017}
.dt-handle{position:absolute;top:-2px;width:40px;height:40px;padding:0;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;touch-action:none;cursor:ew-resize;z-index:4;transition:none!important}
.dt-handle:active{scale:1}.dt-handle--start{left:calc(var(--dt-start-x,0px) - 6px - var(--dt-hit-shift,0px))}.dt-handle--end{left:calc(var(--dt-end-x,100%) - 34px + var(--dt-hit-shift,0px))}
.dt-handle--start .dt-handle-visual{translate:var(--dt-hit-shift,0px) 0}.dt-handle--end .dt-handle-visual{translate:calc(-1 * var(--dt-hit-shift,0px)) 0}
.dt-handle-visual{position:relative;display:grid;place-items:center;width:28px;height:28px;pointer-events:none}.dt-handle-icon{position:absolute;display:block;width:12px;height:20px;overflow:visible}
.dt-current-head,.dt-hover-head{position:absolute;top:0;height:36px;transform:translateX(-50%);border-radius:4.5px;pointer-events:none;z-index:3}.dt-current-head{width:2px;background:white;box-shadow:0 1px 2px #00000017,0 0 1px #00000045,0 0 0 1px #00000003}
.dt-hover-head{width:1px;background:#3a3a3a;opacity:0;transition:opacity 100ms cubic-bezier(.2,0,0,1)}
.dt-tooltip{position:absolute;bottom:44px;left:var(--dt-tooltip-x,50%);translate:-50% 0;padding:5px 7px;white-space:nowrap;border-radius:6px;font-size:11px;font-weight:500;line-height:14px;color:#fff;background:#353437;box-shadow:0 2px 5px #0002;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity 100ms cubic-bezier(.2,0,0,1),transform 150ms cubic-bezier(.2,0,0,1);z-index:6}
.draft-timeline.is-hovering:not(.is-playing) .dt-hover-head,.draft-timeline.is-hovering:not(.is-playing) .dt-tooltip,.draft-timeline.is-trimming .dt-tooltip{opacity:1}.draft-timeline.is-hovering:not(.is-playing) .dt-tooltip,.draft-timeline.is-trimming .dt-tooltip{transform:translateY(0)}
.draft-timeline.is-playing .dt-hover-head,.draft-timeline.is-playing .dt-tooltip{opacity:0}
.dt-duration{position:relative;flex:0 0 60px;width:60px;min-width:60px;padding:0 4px;height:36px;line-height:20px;text-align:center;font-size:10px;font-weight:510;white-space:nowrap;color:#00000080;background:transparent;border-radius:999px;cursor:default;transition:background-color 150ms var(--ease)}
.dt-duration::after{content:"";position:absolute;inset:-2px 0}.dt-duration:hover{background:#00000006}.dt-duration:active{scale:1}
.draft-timeline :focus-visible{outline:2px solid #007aff80;outline-offset:3px}
.dt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.draft-timeline.is-inactive{pointer-events:none}.draft-timeline.is-trimming .dt-track{cursor:ew-resize}
@media(prefers-reduced-motion:reduce){.dt-play,.dt-play-icon,.dt-selection,.dt-handle-icon,.dt-hover-head,.dt-tooltip{transition:none!important}}