/* Compact equal details on phones; the full timeline with a compact curve on desktop. */
.editor-composition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 28px);
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
  align-items: start;
}
.editor-composition .editor-capture {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 11 / 12;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: 100px;
}
.editor-composition .editor-capture picture,
.editor-composition .editor-capture img {
  display: block;
  width: 100%;
  height: 100%;
}
.editor-composition .editor-capture img { object-fit: contain; }

/* Feather only the UI perimeter, keeping the tracks and handles legible. */
.editor-composition .editor-capture {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (min-width: 901px) {
  .editor-composition {
    max-width: none;
    grid-template-columns: minmax(0, 2422fr) minmax(0, 309fr);
    align-items: stretch;
  }
  .editor-composition .editor-composition__timeline {
    aspect-ratio: 2422 / 337;
    /* Keep the toolbar readable; feather only the outermost desktop edges. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 1%, #000 91%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 1%, #000 91%, transparent);
  }
}