@layer overscan {
ov-timeline {
  --ov-timeline-name-w: 12ch;
  --ov-timeline-track-w: 44ch;
  --ov-timeline-lane-h: 34px;
  --ov-timeline-thumb: 10px;
  display: grid;
  inline-size: calc(var(--ov-timeline-name-w) + var(--ov-timeline-track-w) + 9ch + 16px);
  max-inline-size: 100%;
  gap: 6px;
  font-family: var(--ov-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ov-ink);
}
.ov-timeline__head {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  color: var(--ov-faint);
  letter-spacing: .12em;
}
.ov-timeline__now { color: var(--ov-ink); font-variant-numeric: tabular-nums; }
ov-timeline[data-ov-solo-empty="true"] .ov-timeline__mode { color: var(--ov-alarm); }
ov-timeline[data-ov-live] .ov-timeline__now { color: var(--ov-alarm); }
.ov-timeline__axis {
  display: grid;
  grid-template-columns: var(--ov-timeline-name-w) minmax(8ch, 1fr) 9ch;
  column-gap: 8px;
}
.ov-timeline__seek {
  grid-column: 2;
  inline-size: 100%;
  margin: 0;
}
.ov-timeline__axis[data-ov-refusal]::after {
  content: "no duration to place a playhead in";
  grid-column: 2;
  color: var(--ov-alarm);
  font-size: 10px;
}
.ov-timeline__lanes { display: grid; gap: 3px; }
.ov-timeline__lane {
  display: grid;
  grid-template-columns: var(--ov-timeline-name-w) minmax(8ch, 1fr) 9ch;
  column-gap: 8px;
  align-items: stretch;
}
.ov-timeline__name {
  justify-content: flex-start;
  min-inline-size: 0;
  padding-inline: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
}
.ov-timeline__name:focus-visible { outline: 2px solid var(--ov-ink); outline-offset: 2px; }
.ov-timeline__lane[data-ov-solo] .ov-timeline__name {
  outline: 1px solid var(--ov-accent);
  outline-offset: -1px;
  color: var(--ov-accent);
}
.ov-timeline__track {
  position: relative;
  block-size: var(--ov-timeline-lane-h);
  border: 1px solid var(--ov-line);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--ov-faint) 16%, transparent) 0 2px, transparent 2px 7px),
    var(--ov-field);
  cursor: ew-resize;
  touch-action: none;
  overflow: hidden;
}
.ov-timeline__span {
  position: absolute;
  inset-block: 0;
  box-sizing: border-box;
  background: var(--ov-panel);
  border-inline: 1px solid var(--ov-line-strong);
}
.ov-timeline__span svg {
  position: absolute;
  inset: 4px 0;
  inline-size: 100%;
  block-size: calc(100% - 8px);
}
.ov-timeline__line { fill: none; stroke: var(--ov-accent); stroke-width: 1.25; }
.ov-timeline__area--area { fill: var(--ov-accent); fill-opacity: .22; stroke: none; }
.ov-timeline__area--gradient { stroke: none; }
.ov-timeline__stop-top { stop-color: var(--ov-accent); stop-opacity: .5; }
.ov-timeline__stop-base { stop-color: var(--ov-accent); stop-opacity: 0; }
.ov-timeline__bar { fill: var(--ov-accent); fill-opacity: .75; }
.ov-timeline__base { fill: none; stroke: var(--ov-accent); stroke-opacity: .6; stroke-width: 1; }
.ov-timeline__playhead {
  position: absolute;
  inset-block: 0;
  inline-size: 0;
  border-inline-start: 1px solid var(--ov-ink);
  pointer-events: none;
}
.ov-timeline__value {
  align-self: center;
  color: var(--ov-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.ov-timeline__lane[data-ov-at="absent"] .ov-timeline__value { color: var(--ov-faint); }
.ov-timeline__lane[data-ov-muted] .ov-timeline__track { filter: saturate(.2) brightness(.55); }
.ov-timeline__lane[data-ov-muted] .ov-timeline__value { color: var(--ov-faint); }
.ov-timeline__note { margin: 0; color: var(--ov-alarm); font-size: 10px; letter-spacing: .06em; }
}