:root {
  --memory-black-hole-image: none;
}

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

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

.background-theme-toggle {
  min-width: 56px !important;
  white-space: nowrap;
  flex: 0 0 auto;
}

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

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

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

.background-theme-toggle.is-loading {
  cursor: wait;
  opacity: 0.62;
}

body,
body::before,
.memory-art-scene,
.memory-brand,
.view-controls,
.cell,
.cell .en,
.cell .zh,
.cell .num,
.cell .obj,
.glass-panel {
  transition:
    color 220ms ease,
    background-color 320ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    opacity 320ms ease;
}

body.theme-blackhole {
  --mp-ink: #f7f8fb;
  --mp-soft: rgba(244, 247, 255, 0.78);
  --mp-faint: rgba(235, 240, 252, 0.58);
  color-scheme: dark;
  color: #f7f8fb !important;
  background-color: #02050a !important;
  background-image:
    linear-gradient(90deg, rgba(0, 4, 10, 0.30), rgba(0, 3, 8, 0.10) 48%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, rgba(1, 5, 10, 0.10), rgba(0, 0, 0, 0.25)),
    var(--memory-black-hole-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body.theme-blackhole[data-blackhole-source="video"] {
  background-image:
    linear-gradient(90deg, rgba(0, 4, 10, 0.24), rgba(0, 3, 8, 0.08) 48%, rgba(0, 0, 0, 0.15)),
    linear-gradient(180deg, rgba(1, 5, 10, 0.08), rgba(0, 0, 0, 0.20)) !important;
}

body.theme-blackhole::before {
  background:
    radial-gradient(circle at 22% 28%, rgba(16, 54, 84, 0.10), transparent 34%),
    radial-gradient(circle at 79% 42%, rgba(255, 144, 63, 0.07), transparent 29%),
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.20)) !important;
}

body.theme-blackhole .memory-art-scene {
  opacity: 0 !important;
  visibility: hidden;
}

body.theme-blackhole .memory-brand,
body.theme-blackhole .memory-brand__text strong {
  color: #fff !important;
}

body.theme-blackhole .memory-brand__text span {
  color: rgba(239, 244, 255, 0.60) !important;
}

body.theme-blackhole .memory-brand__mark {
  color: #fff !important;
  border-color: rgba(255,255,255,0.50) !important;
  background: rgba(3, 8, 15, 0.18) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.38),
    inset 1px 1px 0 rgba(255,255,255,0.44),
    inset -1px -1px 0 rgba(255,255,255,0.08) !important;
}

body.theme-blackhole .view-controls {
  color: #fff !important;
  border-color: rgba(255,255,255,0.28) !important;
  border-right-color: rgba(255,255,255,0.12) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
  background: rgba(3, 7, 14, 0.25) !important;
  backdrop-filter: blur(12px) saturate(122%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(122%) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,0.40),
    inset 1px 1px 0 rgba(255,255,255,0.19),
    inset -1px -1px 0 rgba(255,255,255,0.045) !important;
}

body.theme-blackhole .view-controls button,
body.theme-blackhole .view-controls .group-label,
body.theme-blackhole .viewport-zoom-button,
body.theme-blackhole .viewport-zoom-readout {
  color: rgba(248,250,255,0.91) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.46) !important;
}

body.theme-blackhole .view-controls .sort-switch,
body.theme-blackhole .viewport-zoom-group {
  background: rgba(255,255,255,0.055) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.28) !important;
}

body.theme-blackhole .view-controls button.is-selected,
body.theme-blackhole .view-controls .recall-toggle[aria-pressed="true"],
body.theme-blackhole .background-theme-toggle[aria-pressed="true"] {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.24),
    inset 1px 1px 0 rgba(255,255,255,0.22) !important;
}

body.theme-blackhole .view-controls button:hover,
body.theme-blackhole .view-controls button:focus-visible,
body.theme-blackhole .viewport-zoom-button:hover,
body.theme-blackhole .viewport-zoom-readout:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.105) !important;
}

body.theme-blackhole .cell,
body.theme-blackhole .focus-cells .cell {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow:
    0 17px 38px rgba(0,0,0,0.28),
    0 3px 10px rgba(0,0,0,0.15) !important;
}

body.theme-blackhole .cell::after {
  background:
    linear-gradient(125deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.18) 19%,
      rgba(106,185,255,0.44) 39%,
      rgba(177,128,255,0.31) 57%,
      rgba(255,137,83,0.37) 78%,
      rgba(255,222,166,0.84) 100%) !important;
  opacity: 0.82 !important;
}

body.theme-blackhole .cell .en,
body.theme-blackhole .cell:hover .en,
body.theme-blackhole .cell.is-active .en {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.70) !important;
}

body.theme-blackhole .cell .zh,
body.theme-blackhole .cell:hover .zh,
body.theme-blackhole .cell.is-active .zh {
  color: rgba(242,246,255,0.80) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.62) !important;
}

body.theme-blackhole .cell .num,
body.theme-blackhole .cell:hover .num,
body.theme-blackhole .cell.is-active .num {
  color: rgba(239,244,255,0.62) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.68) !important;
}

body.theme-blackhole .cell .obj,
body.theme-blackhole .cell:hover .obj,
body.theme-blackhole .cell.is-active .obj {
  color: rgba(250,251,255,0.90) !important;
  border-color: rgba(255,255,255,0.27) !important;
  background: rgba(2,7,14,0.18) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.68) !important;
  box-shadow:
    0 5px 15px rgba(0,0,0,0.24),
    inset 1px 1px 0 rgba(255,255,255,0.14) !important;
}

body.theme-blackhole .glass-panel {
  color: #fff !important;
  border-color: rgba(255,255,255,0.26) !important;
  background: rgba(2,7,14,0.36) !important;
  backdrop-filter: blur(15px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(120%) !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,0.48),
    inset 1px 1px 0 rgba(255,255,255,0.18),
    inset -1px -1px 0 rgba(255,255,255,0.04) !important;
}

body.theme-blackhole .glass-panel .gp-num,
body.theme-blackhole .glass-panel .gp-en,
body.theme-blackhole .glass-panel .gp-zh,
body.theme-blackhole .glass-panel .gp-obj,
body.theme-blackhole .glass-panel .gp-pos,
body.theme-blackhole .glass-panel .gp-audio-status,
body.theme-blackhole .glass-panel .gp-audio,
body.theme-blackhole .glass-panel .gp-close {
  color: #fff !important;
}

body.theme-blackhole .glass-panel .gp-pos,
body.theme-blackhole .glass-panel .gp-audio,
body.theme-blackhole .glass-panel .gp-close {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

body.theme-blackhole .glass-panel .gp-note {
  color: #fff !important;
  background: rgba(255,255,255,0.065) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

body.theme-blackhole .glass-panel .gp-note::placeholder {
  color: rgba(242,246,255,0.46) !important;
}

body.theme-blackhole .focus-title,
body.theme-blackhole .focus-title .range,
body.theme-blackhole .focus-title .name {
  color: #fff !important;
  text-shadow: 0 1px 7px rgba(0,0,0,0.68) !important;
}

body.theme-blackhole .focus-image-wrap,
body.theme-blackhole .focus-title {
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(2,7,14,0.18) !important;
}

body.theme-blackhole.mp-hide-english .cell .en::after {
  border-bottom-color: rgba(255,255,255,0.68) !important;
}

body.theme-blackhole.mp-hide-english .cell.is-english-revealed .en,
body.theme-blackhole.mp-hide-english.mp-panel-english-revealed .glass-panel .gp-en {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.70) !important;
}

body.theme-blackhole.mp-hide-english .glass-panel .gp-en::after {
  color: rgba(245,248,255,0.62) !important;
}

@media (max-width: 768px) {
  body.theme-blackhole {
    background-attachment: scroll !important;
    background-position: 67% center !important;
  }

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

  .background-theme-toggle { order: 3 !important; }
  .blackhole-source-switch { order: 4 !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; }
}

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