.see-overview-page {
  min-height: 100vh;
}

.see-overview-main {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 148px);
  padding: 52px 24px 44px;
  display: grid;
  place-items: start center;
}

.see-overview-stage {
  position: relative;
  width: min(100%, calc(100dvh - 180px), 920px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(167, 172, 189, 0.24);
  border-radius: 6px;
  background: #080d13;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

.see-overview-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080d13;
  filter: none;
  opacity: 1;
  cursor: pointer;
}

.see-overview-video:hover {
  filter: none;
  opacity: 1;
}

.see-overview-poster-play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232, 234, 240, 0.46);
  border-radius: 50%;
  background: rgba(8, 13, 19, 0.76);
  color: #e8eaf0;
  cursor: pointer;
}

.see-overview-poster-play[hidden],
.see-overview-stage.is-playing .see-overview-poster-play {
  display: none;
}

.see-overview-poster-play:hover,
.see-overview-poster-play:focus-visible {
  border-color: #5fe6b8;
  color: #5fe6b8;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(95, 230, 184, 0.22);
}

.see-overview-poster-play svg {
  width: 25px;
  height: 25px;
  margin-left: 1px;
}

.see-overview-controls {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  bottom: 10px;
  display: grid;
  grid-template-columns: 30px auto minmax(52px, 1fr) 30px 64px 30px 30px;
  align-items: center;
  gap: 7px;
  color: #e8eaf0;
  opacity: 1;
  transition: opacity 160ms ease;
}

.see-overview-controls[hidden] {
  display: none;
}

.see-overview-stage.is-playing:not(:hover):not(:focus-within) .see-overview-controls {
  pointer-events: none;
  opacity: 0;
}

.see-overview-control {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: rgba(8, 13, 19, 0.72);
  color: #e8eaf0;
  cursor: pointer;
}

.see-overview-control:hover,
.see-overview-control:focus-visible {
  background: rgba(8, 13, 19, 0.9);
  color: #5fe6b8;
  outline: 0;
}

.see-overview-control:focus-visible,
.see-overview-range:focus-visible {
  box-shadow: 0 0 0 2px #5fe6b8;
}

.see-overview-icon {
  width: 17px;
  height: 17px;
}

.see-overview-icon-pause,
.see-overview-icon-muted,
.see-overview-icon-contract,
.see-overview-stage.is-playing .see-overview-icon-play,
.see-overview-stage.is-muted .see-overview-icon-volume,
.see-overview-stage.is-fullscreen .see-overview-icon-expand {
  display: none;
}

.see-overview-stage.is-playing .see-overview-icon-pause,
.see-overview-stage.is-muted .see-overview-icon-muted,
.see-overview-stage.is-fullscreen .see-overview-icon-contract {
  display: block;
}

.see-overview-time {
  min-width: 66px;
  color: #e8eaf0;
  font: 500 10px/1 'IBM Plex Mono', monospace;
  white-space: nowrap;
  text-shadow: 0 1px 3px #080d13;
}

.see-overview-range {
  --range-value: 0%;
  width: 100%;
  height: 16px;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, #5fe6b8 0 var(--range-value), rgba(232, 234, 240, 0.42) var(--range-value) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  cursor: pointer;
}

.see-overview-range::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: #5fe6b8;
}

.see-overview-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #5fe6b8;
}

.see-overview-volume {
  --range-value: 100%;
}

.see-overview-cc {
  font: 600 9px/1 'IBM Plex Mono', monospace;
}

.see-overview-cc[aria-pressed="true"] {
  color: #5fe6b8;
}

.see-overview-video:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: -4px;
}

.see-overview-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-theme="light"] .see-overview-stage {
  border-color: rgba(28, 52, 72, 0.2);
  box-shadow: 0 24px 60px rgba(28, 52, 72, 0.18);
}

@media (max-width: 760px) {
  .see-overview-main {
    min-height: calc(100vh - 126px);
    padding: 52px 12px 28px;
  }

  .see-overview-stage {
    width: 100%;
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .see-overview-controls {
    transition: none;
  }
}

@media (max-width: 480px) {
  .see-overview-controls {
    left: 8px;
    right: 8px;
    bottom: 7px;
    grid-template-columns: 30px auto minmax(42px, 1fr) 30px 30px 30px;
    gap: 5px;
  }

  .see-overview-volume {
    display: none;
  }

  .see-overview-time {
    min-width: 59px;
    font-size: 9px;
  }
}

@media (hover: none) {
  .see-overview-stage.is-playing .see-overview-controls {
    pointer-events: auto;
    opacity: 1;
  }
}