.overview-player {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0e16;
}
.overview-screen { position: relative; background: #080b16; }
.overview-screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  color-scheme: dark;
}
.overview-launch {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  background: linear-gradient(180deg, #06080e05, #06080e35 50%, #06080e8c);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  text-shadow: 0 2px 12px #000;
  cursor: pointer;
}
.overview-launch[hidden], .overview-error[hidden] { display: none; }
.overview-play-icon {
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 88px);
  aspect-ratio: 1;
  border: 1px solid #e1ddffb3;
  border-radius: 50%;
  background: #12182bdb;
  color: #e8e3ff;
  box-shadow: 0 0 0 9px #bcb2ff0e, 0 8px 40px #0005;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.overview-play-icon svg { width: 40%; height: 40%; }
.overview-launch:hover .overview-play-icon {
  transform: scale(1.07);
  background: #514886;
  box-shadow: 0 0 0 12px #bcb2ff14, 0 8px 40px #0005;
}
.overview-launch:focus-visible { outline: 3px solid #c4b9ff; outline-offset: -5px; }
.overview-screen video:focus-visible { outline: 3px solid #c4b9ff; outline-offset: -3px; }
.overview-player figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px 26px;
  border-top: 1px solid var(--line);
  color: #a4adc5;
  font-size: .875rem;
  line-height: 1.5;
}
.overview-player figcaption a { color: #d2caff; text-underline-offset: 4px; }
.overview-player figcaption a:hover { text-decoration: underline; }
.overview-player figcaption a span { margin-left: 6px; }
.overview-error { margin: 0; padding: 0 26px 20px; color: #c4cadd; font-size: .875rem; }
@media (max-width: 640px) {
  .overview-player { border-radius: 9px; }
  .overview-player figcaption { padding: 16px; gap: 8px 16px; }
  .overview-launch { gap: 10px; }
  .overview-error { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .overview-play-icon { transition: none; }
}