.timeline.svelte-i8psd8{--h:64px;--grip:14px;-webkit-user-select:none;user-select:none;gap:10px;display:grid}.disabled.svelte-i8psd8{opacity:.55;pointer-events:none}.bar.svelte-i8psd8{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.times.svelte-i8psd8,.tools.svelte-i8psd8{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.time.svelte-i8psd8{border:1px solid var(--color-line-2);background:#141312;border-radius:10px;align-items:center;gap:6px;padding:4px 4px 4px 10px;display:inline-flex;& input:where(.svelte-i8psd8){width:10.5ch;color:var(--color-chalk);background:0 0;border:0;border-radius:6px;padding:4px 6px;font-size:13px;&:focus{color:var(--color-sun);background:#ffd25e1a;outline:none}}&:focus-within{border-color:var(--color-sun)}}.length.svelte-i8psd8{padding-left:4px;& b:where(.svelte-i8psd8){color:var(--color-chalk);margin-left:4px;font-weight:500}}.chip.svelte-i8psd8{font:400 12.5px var(--font-mono);color:var(--color-soft);background:var(--color-panel-2);border:1px solid var(--color-line-2);cursor:pointer;transition:transform .18s var(--ease-spring), border-color .15s, color .15s;border-radius:9px;align-items:center;gap:6px;padding:6px 10px;display:inline-flex;&:hover:not(:disabled){border-color:var(--color-muted);color:var(--color-chalk)}&:active:not(:disabled){transform:scale(.95)}&:disabled{opacity:.4;cursor:default}}.zoom.svelte-i8psd8{gap:4px;display:inline-flex}@media (width<=560px){.chip.svelte-i8psd8 span:where(.svelte-i8psd8){display:none}}.viewport.svelte-i8psd8{overflow:hidden;&.zoomed{overflow-x:auto}padding:10px calc(var(--grip) + 2px) 2px;scrollbar-width:thin;scrollbar-color:var(--color-line-2) transparent}.track.svelte-i8psd8{height:var(--h);background:var(--color-panel-2);outline:1px solid var(--color-line-2);cursor:pointer;touch-action:none;border-radius:12px;position:relative}.strip.svelte-i8psd8{border-radius:12px;position:absolute;inset:0;overflow:hidden;& canvas:where(.svelte-i8psd8){width:100%;height:100%;display:block}}.placeholder.svelte-i8psd8{background:repeating-linear-gradient(-45deg,#0000 0 10px,#f2ede408 10px 11px);place-items:center;display:grid;position:absolute;inset:0}.shade.svelte-i8psd8{pointer-events:none;background:#131211c4;position:absolute;top:0;bottom:0;&.l{border-radius:12px 0 0 12px;left:0}&.r{border-radius:0 12px 12px 0;right:0}}.sel.svelte-i8psd8{border-top:3px solid var(--color-sun);border-bottom:3px solid var(--color-sun);cursor:grab;transition:box-shadow .2s;position:absolute;top:-3px;bottom:-3px;box-shadow:0 0 0 1px #00000040,0 6px 24px -8px #ffd25e66;&.active{cursor:grabbing;box-shadow:0 0 0 1px #00000040,0 8px 30px -6px #ffd25e99}}.seg.svelte-i8psd8{opacity:.8;background:#ffd25e1f;&.picked{opacity:1;z-index:1}&.cut{--cut:var(--color-bad);border-color:var(--cut);box-shadow:none;background:repeating-linear-gradient(-45deg,#ff7a6b33 0 6px,#ff7a6b14 6px 12px);& .handle:where(.svelte-i8psd8){background:var(--cut)}}}.tag.svelte-i8psd8{color:var(--color-bg);background:var(--color-sun);pointer-events:none;border-radius:5px;padding:0 5px;font-size:11px;position:absolute;top:3px;left:6px}.cut.svelte-i8psd8 .tag:where(.svelte-i8psd8){background:var(--color-bad)}.handle.svelte-i8psd8{width:var(--grip);background:var(--color-sun);cursor:ew-resize;touch-action:none;transition:transform .2s var(--ease-spring);border:0;place-items:center;padding:0;display:grid;position:absolute;top:-3px;bottom:-3px;&:before{content:"";position:absolute;inset:-6px -10px}& i:where(.svelte-i8psd8){background:#13121199;border-radius:2px;width:2px;height:18px;translate:-2px;box-shadow:4px 0 #13121166}&.start{left:calc(-1 * var(--grip));border-radius:9px 0 0 9px}&.end{right:calc(-1 * var(--grip));border-radius:0 9px 9px 0}&:hover,&.active{transform:scaleX(1.12)}&:focus-visible{outline:2px solid var(--color-chalk);outline-offset:1px;z-index:2}}.playhead.svelte-i8psd8{background:var(--color-chalk);pointer-events:none;z-index:3;width:2px;margin-left:-1px;position:absolute;top:-8px;bottom:-4px;box-shadow:0 0 0 1px #13121180;& span:where(.svelte-i8psd8){background:var(--color-chalk);border-radius:3px 3px 7px 7px;width:12px;height:12px;position:absolute;top:0;left:50%;translate:-50% -2px}}.ghost.svelte-i8psd8{pointer-events:none;z-index:2;background:#f2ede466;width:1px;position:absolute;top:0;bottom:0;& span:where(.svelte-i8psd8){background:var(--color-bg);border:1px solid var(--color-line-2);color:var(--color-chalk);white-space:nowrap;border-radius:6px;padding:2px 6px;font-size:11px;position:absolute;top:4px;left:6px}}.ruler.svelte-i8psd8{height:18px;margin-top:6px;position:relative;& span:where(.svelte-i8psd8){white-space:nowrap;font-size:10.5px;position:absolute;translate:-50%;&:before{content:"";background:var(--color-line-2);width:1px;height:4px;position:absolute;top:-5px;left:50%}}& span:where(.svelte-i8psd8):first-child{translate:0;&:before{left:0}}& span.last:where(.svelte-i8psd8){translate:-100%;&:before{left:100%}}}