[data-c-media-well] {
  margin: 0;
  padding: calc(var(--os-space-unit) * 3);
  border: 1px solid color-mix(in oklab, var(--os-rule) 78%, var(--os-ink));
  border-radius: var(--os-radius-md);
  background: color-mix(in oklab, var(--os-ground) 92%, var(--os-ground-void));
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
}

[data-c-media-well] .c-media-well-aperture {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--os-radius-sm);
  overflow: hidden;
  background: var(--os-ground-void);
}

[data-c-media-well] .c-media-well-aperture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--os-ink) 14%, transparent);
}

[data-c-media-well] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

[data-c-media-well] .c-media-well-provenance {
  margin: 0;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--os-muted);
  word-break: break-word;
}

[data-c-media-well] .c-media-well-rcpt {
  color: var(--os-muted);
}

[data-c-media-well] .c-media-well-play {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--os-ink) 18%, transparent);
  border-radius: var(--os-radius-sm);
  background: color-mix(in oklab, var(--os-ground) 84%, var(--os-rule));
  color: var(--os-ink);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 3);
  justify-self: start;
  transition:
    background var(--ss-snap-duration) var(--ss-snap-easing),
    color var(--ss-snap-duration) var(--ss-snap-easing);
}

[data-c-media-well] .c-media-well-play:hover {
  background: color-mix(in oklab, var(--os-ground) 76%, var(--os-rule));
}

[data-c-media-well] .c-media-well-play[hidden] {
  display: none;
}

html:is([data-theme="night"], [data-night="1"]) [data-c-media-well] {
  background: color-mix(in oklab, var(--os-ground-void) 86%, var(--os-ground));
  border-color: color-mix(in oklab, var(--os-ground) 16%, transparent);
}

html:is([data-theme="night"], [data-night="1"]) [data-c-media-well] .c-media-well-provenance {
  color: color-mix(in oklab, var(--os-ground) 68%, var(--os-muted));
}

html:is([data-theme="night"], [data-night="1"]) [data-c-media-well] .c-media-well-play {
  background: color-mix(in oklab, var(--os-ground-void) 78%, var(--os-ground));
  color: var(--os-ground);
  border-color: color-mix(in oklab, var(--os-ground) 24%, transparent);
}