/* Fade the demo shells, leaving their content and focus indicators crisp. */
.reel-creator,
.transcript-story.transcript-example {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.reel-creator::before,
.transcript-story.transcript-example::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid #ffffff12;
  border-radius: inherit;
  background: #111113;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, #000a 74%, transparent 100%), linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, #000a 74%, transparent 100%), linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.reel-creator .reel-creator__toolbar,
.transcript-story.transcript-example .transcript-motion__top {
  border-bottom-color: transparent;
  background: linear-gradient(to right, transparent, #ffffff03 20%, #ffffff03 80%, transparent);
}

.reel-creator .reel-creator__setup {
  border-right-color: transparent;
}

.transcript-story.transcript-example .transcript-story__audio {
  border-top-color: transparent;
  background: transparent;
}

@media (max-width: 650px) {
  .reel-creator::before,
  .transcript-story.transcript-example::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, #000a 76%, transparent 100%), linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to bottom, #000 0%, #000 48%, #000a 76%, transparent 100%), linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
}