.role-video-figure {
  display: grid;
  gap: 6px;
  margin: 0;
}

.role-video-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  background: #f3e9ee;
}

#role-video .role-video-stage video,
.role-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

#role-video .role-video-stage video {
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}

.role-video-stage:not(.is-playing) video {
  visibility: hidden;
}

#role-video .role-video-stage.is-playing video {
  object-fit: contain;
  background: #1e171b;
}

.role-video-cover {
  z-index: 1;
  object-fit: cover;
  object-position: center 39%;
}

.role-video-play {
  position: absolute;
  z-index: 2;
  inset: auto;
  left: 50%;
  top: var(--role-video-play-top, 50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 28px);
  min-height: 46px;
  padding: 0;
  border: 1px solid #ffffffb3;
  border-radius: 999px;
  background: #fffaf6ed;
  color: #71314a;
  font-weight: 600;
  box-shadow: 0 4px 20px #291a2926;
  white-space: nowrap;
}

.role-video-play:focus-visible {
  outline-offset: -3px;
  outline-color: #fff;
}

.role-video-play span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 999px;
  background: transparent;
}

.role-video-play:disabled { opacity: .92; }
.role-video-play svg { width: 18px; height: 18px; }

.role-video-duration {
  position: absolute;
  z-index: 1;
  right: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #21151cdb;
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.role-video-figure figcaption {
  white-space: pre-line;
}

.showcase-studio .studio-picture {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--brand);
}