@property --bright-dark-stars-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
div.bg-content.darkStars {
  --star-element-width: clamp(100px, 18vw, 400px);
  --star-ring-width: clamp(320px, 75vw, 1180px);
}
div.bg-content.darkStars .bg-layer.bg {
  background: url(../images/landing-bg3.jpg) no-repeat right center;
  background-size: cover;
}
div.bg-content.darkStars .bg-layer.bg0 {
  opacity: 0.8;
}
div.bg-content.darkStars .bg-layer.bg1,
div.bg-content.darkStars .bg-layer.bg2 {
  transform: translateY(3vw);
}
div.bg-content.darkStars .bg-layer.bg2 .arrow-left,
div.bg-content.darkStars .bg-layer.bg2 .arrow-right {
  position: absolute;
  bottom: 10%;
  width: clamp(38px, 4vw, 68px);
  aspect-ratio: 100 / 48;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  pointer-events: all;
  z-index: 1000;
}
div.bg-content.darkStars .bg-layer.bg2 .arrow-left:focus-visible,
div.bg-content.darkStars .bg-layer.bg2 .arrow-right:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}
div.bg-content.darkStars .bg-layer.bg2 .arrow-left {
  background-image: url('../images/bright-star-l-arrow.png');
  right: 55%;
}
div.bg-content.darkStars .bg-layer.bg2 .arrow-right {
  background-image: url('../images/bright-star-r-arrow.png');
  left: 55%;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper {
  pointer-events: none;
  position: absolute;
  transition: all 300ms ease-in-out, --bright-dark-stars-scale 300ms ease-in-out;
  height: auto;
  background-size: contain;
  left: 50%;
  bottom: 50%;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.is-front {
  pointer-events: none;
  animation: floatSymbol 6s ease-in-out infinite;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.is-front::before {
  cursor: pointer;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center / 100% 100%;
  pointer-events: all;
}
div.bg-content.darkStars .bg-layer.bg9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
}
div.bg-content.darkStars .bg-layer.bg9 .app-logo {
  margin-top: 20vh;
  width: 20%;
  height: auto;
}
div.bg-content.darkStars .bg-layer.bg9 .navigation-button {
  margin-top: 3vh;
}
@media (orientation: portrait) {
  div.bg-content.darkStars .bg-layer.bg9 .app-logo {
    margin-top: 25vh;
    width: 30%;
  }
}
div.bg-content.darkStars .bg-layer.bg4 .pageTopTitle {
  color: #000;
  margin: 90px 0 0 20px;
}
div.bg-content.darkStars .bg-layer.bg4 .pageTopTitle p {
  text-align: justify;
  text-align-last: justify;
  width: max-content;
  font-size: clamp(18px, 1.8vw, 28px);
}
div.bg-content.darkStars .bg-layer.bg4 .pageTopTitle p span {
  font-size: 1.2em;
  font-weight: 400;
}
div.bg-content.darkStars .bg-layer.bg4 .star-menu-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  width: max-content;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  margin: 20px 0 0 20px;
  transform-origin: top left;
  transition: transform 0.3s ease;
}
div.bg-content.darkStars .bg-layer.bg4 .star-menu-container .navigation-button2 {
  width: auto;
  max-width: none;
}
@media (max-width: 1366px) {
  div.bg-content.darkStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.9);
  }
}
@media (max-width: 1024px) {
  div.bg-content.darkStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.8);
  }
}
@media (max-width: 768px) {
  div.bg-content.darkStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.7);
  }
}
@media (max-width: 480px) {
  div.bg-content.darkStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.6);
  }
}
div.bg-content.darkStars .bg-layer.bg4 .star-menu-container .text-sub {
  min-width: 155px;
}
div.bg-content.darkStars .bg-layer.bg0 {
  background: url('../images/dark-stars-aura1.png') right top / 25% auto no-repeat, url('../images/dark-stars-aura2.png') left bottom / 21.35% auto no-repeat;
}
div.bg-content.darkStars .bg-layer.bg1 {
  background: url('../images/dark-stars-ring.png') center center / var(--star-ring-width) auto no-repeat;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper {
  width: var(--star-element-width);
  aspect-ratio: 586 / 550;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper .dark-stars-label {
  position: absolute;
  left: 0;
  top: calc(100% + 5vh);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 24px);
  white-space: nowrap;
  top: calc(100% + 25.9% * var(--bright-dark-stars-scale) + 1.5vh + var(--bottom-dark-adjustment, 0vh));
  transform: translate(-50%, 0);
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper .dark-stars-label__name {
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1;
  font-weight: 500;
  color: #000;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
  transition: color 180ms ease, text-shadow 180ms ease, font-weight 180ms ease;
  font-size: min(1.8em, calc(1.4em * var(--bright-dark-stars-scale)));
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.is-front .dark-stars-label__name {
  text-shadow: none;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper::before {
  transform: translate(-50%, 18%) scale(var(--bright-dark-stars-scale));
  transform-origin: 50% 82%;
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.element1::before {
  background-image: url('../images/dark-star-element01.png');
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.element2::before {
  background-image: url('../images/dark-star-element02.png');
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.element3::before {
  background-image: url('../images/dark-star-element03.png');
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.element4::before {
  background-image: url('../images/dark-star-element04.png');
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.element5::before {
  background-image: url('../images/dark-star-element05.png');
}
div.bg-content.darkStars .bg-layer.bg2 .elementWrapper.element6::before {
  background-image: url('../images/dark-star-element06.png');
}
div.bg-content.darkStars .bg-layer.bg3 {
  background: url('../images/12Astral Decree.png') right 5% bottom 5% / clamp(90px, 15%, 220px) auto no-repeat;
}
div.bg-content.brightStars {
  --star-element-width: clamp(100px, 18vw, 400px);
  --star-ring-width: clamp(320px, 75vw, 1180px);
}
div.bg-content.brightStars .bg-layer.bg {
  background: url(../images/landing-bg3.jpg) no-repeat right center;
  background-size: cover;
}
div.bg-content.brightStars .bg-layer.bg0 {
  opacity: 0.8;
}
div.bg-content.brightStars .bg-layer.bg1,
div.bg-content.brightStars .bg-layer.bg2 {
  transform: translateY(3vw);
}
div.bg-content.brightStars .bg-layer.bg2 .arrow-left,
div.bg-content.brightStars .bg-layer.bg2 .arrow-right {
  position: absolute;
  bottom: 10%;
  width: clamp(38px, 4vw, 68px);
  aspect-ratio: 100 / 48;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  pointer-events: all;
  z-index: 1000;
}
div.bg-content.brightStars .bg-layer.bg2 .arrow-left:focus-visible,
div.bg-content.brightStars .bg-layer.bg2 .arrow-right:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}
div.bg-content.brightStars .bg-layer.bg2 .arrow-left {
  background-image: url('../images/bright-star-l-arrow.png');
  right: 55%;
}
div.bg-content.brightStars .bg-layer.bg2 .arrow-right {
  background-image: url('../images/bright-star-r-arrow.png');
  left: 55%;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper {
  pointer-events: none;
  position: absolute;
  transition: all 300ms ease-in-out, --bright-dark-stars-scale 300ms ease-in-out;
  height: auto;
  background-size: contain;
  left: 50%;
  bottom: 50%;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.is-front {
  pointer-events: none;
  animation: floatSymbol 6s ease-in-out infinite;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.is-front::before {
  cursor: pointer;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center / 100% 100%;
  pointer-events: all;
}
div.bg-content.brightStars .bg-layer.bg9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
}
div.bg-content.brightStars .bg-layer.bg9 .app-logo {
  margin-top: 20vh;
  width: 20%;
  height: auto;
}
div.bg-content.brightStars .bg-layer.bg9 .navigation-button {
  margin-top: 3vh;
}
@media (orientation: portrait) {
  div.bg-content.brightStars .bg-layer.bg9 .app-logo {
    margin-top: 25vh;
    width: 30%;
  }
}
div.bg-content.brightStars .bg-layer.bg4 .pageTopTitle {
  color: #000;
  margin: 90px 0 0 20px;
}
div.bg-content.brightStars .bg-layer.bg4 .pageTopTitle p {
  text-align: justify;
  text-align-last: justify;
  width: max-content;
  font-size: clamp(18px, 1.8vw, 28px);
}
div.bg-content.brightStars .bg-layer.bg4 .pageTopTitle p span {
  font-size: 1.2em;
  font-weight: 400;
}
div.bg-content.brightStars .bg-layer.bg4 .star-menu-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  width: max-content;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  margin: 20px 0 0 20px;
  transform-origin: top left;
  transition: transform 0.3s ease;
}
div.bg-content.brightStars .bg-layer.bg4 .star-menu-container .navigation-button2 {
  width: auto;
  max-width: none;
}
@media (max-width: 1366px) {
  div.bg-content.brightStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.9);
  }
}
@media (max-width: 1024px) {
  div.bg-content.brightStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.8);
  }
}
@media (max-width: 768px) {
  div.bg-content.brightStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.7);
  }
}
@media (max-width: 480px) {
  div.bg-content.brightStars .bg-layer.bg4 .star-menu-container {
    transform: scale(0.6);
  }
}
div.bg-content.brightStars .bg-layer.bg4 .star-menu-container .text-sub {
  min-width: 155px;
}
div.bg-content.brightStars .bg-layer.bg1 {
  background: url('../images/bright-stars-ring.png') center center / var(--star-ring-width) auto no-repeat;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper {
  width: var(--star-element-width);
  aspect-ratio: 676 / 550;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper .bright-stars-label {
  position: absolute;
  left: 0;
  top: calc(100% + 5vh);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 24px);
  white-space: nowrap;
  top: calc(100% + 18.4% * var(--bright-dark-stars-scale) + 1.5vh);
  transform: translate(-50%, 0);
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper .bright-stars-label__name {
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1;
  font-weight: 500;
  color: #000;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
  transition: color 180ms ease, text-shadow 180ms ease, font-weight 180ms ease;
  font-size: min(1.8em, calc(1.4em * var(--bright-dark-stars-scale)));
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.is-front .bright-stars-label__name {
  text-shadow: none;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper::before {
  transform: translate(-50.4%, 18.4%) scale(var(--bright-dark-stars-scale));
  transform-origin: 50.4% 81.6%;
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.element1::before {
  background-image: url('../images/bright-star-element01.png');
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.element2::before {
  background-image: url('../images/bright-star-element02.png');
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.element3::before {
  background-image: url('../images/bright-star-element03.png');
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.element4::before {
  background-image: url('../images/bright-star-element04.png');
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.element5::before {
  background-image: url('../images/bright-star-element05.png');
}
div.bg-content.brightStars .bg-layer.bg2 .elementWrapper.element6::before {
  background-image: url('../images/bright-star-element06.png');
}
div.bg-content.brightStars .bg-layer.bg3 {
  background: url('../images/12Astral Decree.png') right 5% bottom 5% / clamp(90px, 15%, 220px) auto no-repeat;
}
div.bg-content.star .bg-layer.bg {
  background: url(../images/stars-bg.jpg) no-repeat right center;
  background-size: cover;
}
@media (max-width: 960px) {
  .bg-content.darkStars .bg-layer.bg2 .elementWrapper[class*="element"] [class*="-label"],
  .bg-content.brightStars .bg-layer.bg2 .elementWrapper[class*="element"] [class*="-label"] {
    top: calc(100% + 2.2vh);
    gap: clamp(6px, 1vw, 12px);
  }
  .bg-content.brightStars .bg-layer.bg2 .elementWrapper[class*="element"] .bright-stars-label {
    top: calc(100% + 18.4% * var(--bright-dark-stars-scale) + 1.5vh);
    gap: clamp(6px, 1vw, 12px);
  }
  .bg-content.brightStars .bg-layer.bg2 .elementWrapper[class*="element"] .bright-stars-label .bright-stars-label__name {
    font-size: min(1.2em, calc(0.9em * var(--bright-dark-stars-scale)));
  }
  .bg-content.darkStars .bg-layer.bg2 .elementWrapper[class*="element"] .dark-stars-label {
    gap: clamp(6px, 1vw, 12px);
  }
  .bg-content.darkStars .bg-layer.bg2 .elementWrapper[class*="element"] .dark-stars-label .dark-stars-label__name {
    font-size: min(1.2em, calc(0.9em * var(--bright-dark-stars-scale)));
  }
}