.timeline.recast-filmstrip {
  height: 65px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: repeating-linear-gradient(125deg, #2c2335 0 9px, #231c2a 9px 18px);
  touch-action: pan-y;
  user-select: none;
}

.timeline.has-filmstrip-source { cursor: ew-resize; }

.recast-filmstrip-frames {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.recast-filmstrip-frames canvas {
  display: block;
  width: 0;
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  object-fit: cover;
}

.recast-filmstrip #trim-selection {
  background: transparent;
  border: 2px solid var(--lime);
  border-inline-width: 7px;
  border-radius: 5px;
  box-shadow: 0 0 0 1200px #120d18be;
  pointer-events: none;
}

.recast-filmstrip:not(.has-filmstrip-source) #trim-selection { visibility: hidden; }

.recast-filmstrip #trim-selection::before,
.recast-filmstrip #trim-selection::after {
  position: absolute;
  top: calc(50% - 7px);
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: #263611;
  content: "";
}

.recast-filmstrip #trim-selection::before { left: -5px; }
.recast-filmstrip #trim-selection::after { right: -5px; }

@media (max-width: 520px) {
  .timeline.recast-filmstrip { height: 53px; }
}