.blackhole-source-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
}

.blackhole-source-switch[hidden] {
  display: none !important;
}

.blackhole-source-switch button {
  min-width: 48px !important;
  padding-inline: 10px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

.blackhole-source-switch button.is-selected,
.blackhole-source-switch button[aria-pressed="true"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.20),
    inset 1px 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.memory-black-hole-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #02050a;
  transition: opacity 360ms ease, visibility 360ms ease;
}

body.theme-blackhole[data-blackhole-source="video"] {
  background-color: #02050a !important;
  background-image: none !important;
}

body.theme-blackhole[data-blackhole-source="video"] .memory-black-hole-video.is-active {
  opacity: 1;
  visibility: visible;
}

body.theme-blackhole[data-blackhole-source="video"]::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body.theme-blackhole[data-blackhole-source="image"] .memory-black-hole-video,
body:not(.theme-blackhole) .memory-black-hole-video {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  .blackhole-source-switch {
    order: 4 !important;
  }

  .blackhole-source-switch button {
    min-width: 44px !important;
    padding-inline: 8px !important;
  }

  .viewport-zoom-group { order: 5 !important; }
  .view-controls .group-label { order: 6 !important; }
  #prevGroup { order: 7 !important; }
  #layoutToggle { order: 8 !important; }
  #nextGroup { order: 9 !important; }

  .memory-black-hole-video {
    object-position: 67% center;
  }
}

@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .memory-black-hole-video {
    object-position: 67% 48%;
  }
}