@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("assets/fonts/inter-200.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-300.ttf") format("truetype");
}

:root {
  --page-width: 1920px;
  --grid-columns: 12;
  --grid-margin: clamp(24px, 8.333vw, 160px);
  --grid-margin-block: clamp(72px, 6.25vw, 120px);
  --grid-gutter: 24px;
  --nav-menu-gap: 160px;
  --nav-menu-cn-size: 16px;
  --nav-menu-en-size: 17px;
  --header-height: 80px;
  --nav-offset-top: 0px;
  --nav-height: 80px;
  --color-page: #000000;
  --color-text: #ffffff;
  --font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background: var(--color-page);
  scrollbar-width: none;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body.has-intro {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000;
  transition: background-color 7000ms linear;
}

.intro-overlay__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transform-origin: center center;
}

.intro-overlay.is-leaving {
  background: transparent;
  pointer-events: none;
}

.intro-overlay.is-leaving .intro-overlay__frame {
  pointer-events: none;
}

.page-shell {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: var(--color-page);
}

.is-return-positioning .page-shell {
  opacity: 0;
}

.ghost-cursor-canvas {
  position: fixed;
  z-index: 9;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 180ms linear;
}

body.is-ghost-cursor-disabled .ghost-cursor-canvas {
  opacity: 0;
}

.grid-system {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: var(--header-height);
  background: transparent;
}

body.is-home-tail-visible .site-header {
  opacity: 0;
  pointer-events: none;
}

.site-header.is-nav-card-open {
  height: 200px;
}

.nav-dropdown-card {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100vw;
  height: 200px;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top center;
  transition:
    opacity 220ms linear,
    transform 320ms cubic-bezier(0.16, 0.84, 0.28, 1);
}

.site-header.is-nav-card-open .nav-dropdown-card {
  opacity: 1;
  pointer-events: auto;
  transform: scaleY(1);
}

.nav-dropdown-card__rule {
  position: absolute;
  left: var(--grid-margin);
  right: var(--grid-margin);
  top: 86px;
  height: 1px;
  background: rgba(255, 255, 255, 0.46);
}

.nav-dropdown-card__menu {
  position: absolute;
  left: var(--grid-margin);
  right: var(--grid-margin);
  top: 136px;
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: start;
  column-gap: var(--nav-menu-gap);
  align-items: center;
}

.nav-dropdown-card__item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  isolation: isolate;
  transition:
    color 140ms linear,
    opacity 160ms linear;
}

.nav-dropdown-card__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  height: 1px;
  z-index: 1;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 500ms linear,
    transform 500ms linear;
}

.nav-dropdown-card__item-cn {
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: var(--nav-menu-cn-size);
  font-weight: 300;
  letter-spacing: 0;
}

.nav-dropdown-card__item-en {
  font-family: Inter, Arial, sans-serif;
  font-size: var(--nav-menu-en-size);
  font-weight: 200;
  letter-spacing: 0;
  transform: translate(-2px, 1px);
}

@media (max-width: 1600px) {
  :root {
    --nav-menu-gap: 96px;
  }
}

@media (max-width: 1360px) {
  :root {
    --nav-menu-gap: 56px;
  }
}

@media (max-width: 1120px) {
  :root {
    --nav-menu-gap: 36px;
    --nav-menu-cn-size: 15px;
    --nav-menu-en-size: 16px;
  }
}

.nav-dropdown-card__item:hover,
.nav-dropdown-card__item:focus-visible {
  opacity: 1;
}

.nav-dropdown-card__item:hover::before,
.nav-dropdown-card__item:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.nav-dropdown-card__item:active,
.nav-dropdown-card__item.is-active {
  color: #fff;
  opacity: 1;
}

.nav-dropdown-card__item:active::before,
.nav-dropdown-card__item.is-active::before {
  opacity: 1;
  background: #fff;
  transform: scaleX(1);
}

.primary-nav {
  position: absolute;
  z-index: 1;
  inset: var(--nav-offset-top) 0 auto;
  height: var(--nav-height);
  align-items: center;
  overflow: hidden;
  background: transparent;
}

.chapter-detail .site-header,
.chapter-detail .primary-nav {
  background: transparent;
}

.brand {
  grid-column: 1 / span 2;
  align-self: center;
  display: block;
  width: 115px;
  height: 24.18px;
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
}

.sound-toggle {
  position: relative;
  grid-column: 12;
  justify-self: end;
  align-self: center;
  width: 25px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0;
  font-weight: 300;
  line-height: 0;
  text-align: center;
  transform-origin: center;
  transition: transform 180ms ease;
}

.sound-toggle:hover {
  transform: scale(1.1);
}

.sound-toggle__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  max-width: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.sound-toggle__icon--on {
  width: 18px;
  height: 24px;
}

.sound-toggle__icon--off {
  width: 24.75px;
  height: 24px;
  display: none;
}

.sound-toggle[aria-pressed="true"] .sound-toggle__icon--on {
  display: none;
}

.sound-toggle[aria-pressed="true"] .sound-toggle__icon--off {
  display: block;
}

@media (max-width: 767px) {
  :root {
    --header-height: 100px;
    --nav-offset-top: 46px;
    --nav-height: 54px;
    --grid-margin: 20px;
    --grid-gutter: 16px;
  }

  .site-header {
    height: 100px;
  }

  .site-header.is-nav-card-open {
    height: 100svh;
  }

  .primary-nav {
    height: 54px;
    padding-inline: 20px;
  }

  .brand {
    grid-column: 1 / span 5;
    width: 78px;
    height: 16.4px;
  }

  .sound-toggle {
    grid-column: 12;
    width: 16px;
    height: 16px;
  }

  .sound-toggle:hover {
    transform: none;
  }

  .sound-toggle__icon--on {
    width: 12px;
    height: 16px;
  }

  .sound-toggle__icon--off {
    width: 16.04px;
    height: 16px;
  }

  .nav-dropdown-card {
    height: 100svh;
    background: #000;
  }

  .nav-dropdown-card__rule {
    left: 0;
    right: 0;
    top: 100px;
    background: rgba(255, 255, 255, 0.72);
  }

  .nav-dropdown-card__menu {
    left: 0;
    right: 0;
    top: 0;
    display: block;
    height: 100svh;
  }

  .nav-dropdown-card__item {
    position: absolute;
    left: 50%;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: max-content;
    gap: 5px;
    opacity: 1;
    transform: translateX(-50%);
  }

  .nav-dropdown-card__item:nth-child(1) {
    top: 134px;
  }

  .nav-dropdown-card__item:nth-child(2) {
    top: 231px;
  }

  .nav-dropdown-card__item:nth-child(3) {
    top: 331px;
  }

  .nav-dropdown-card__item:nth-child(4) {
    top: 431px;
  }

  .nav-dropdown-card__item:nth-child(5) {
    top: 531px;
  }

  .nav-dropdown-card__item::before {
    top: calc(100% + 7px);
  }

  .nav-dropdown-card__item-cn {
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
  }

  .nav-dropdown-card__item-en {
    font-size: 17px;
    font-weight: 300;
    line-height: 17px;
    transform: translateY(1px);
  }
}

.page-main {
  width: 100%;
  min-height: 100vh;
  background: var(--color-page);
}

.chapter-scroll {
  position: relative;
  z-index: 1;
  background: var(--color-page);
}

.chapter-stage {
  position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--color-page);
}

.chapter-progress {
  position: fixed;
  z-index: 80;
  right: 48px;
  top: 69.63vh;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 0.625vw, 12px);
  width: clamp(12px, 0.833vw, 16px);
  pointer-events: auto;
}

.chapter-progress__dot {
  --progress-dot-color: #ffffff;
  width: clamp(8px, 0.625vw, 12px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--progress-dot-color);
  box-shadow:
    0 0 clamp(5px, 0.469vw, 9px) rgba(255, 255, 255, 0.92),
    0 0 clamp(12px, 1.042vw, 20px) rgba(255, 255, 255, 0.36);
  cursor: pointer;
  opacity: 0.86;
  transition:
    background-color 260ms ease,
    box-shadow 260ms ease,
    opacity 260ms ease,
    transform 260ms ease;
}

.chapter-progress__dot:hover,
.chapter-progress__dot:focus-visible {
  opacity: 1;
  transform: scale(1.24);
  outline: none;
}

.chapter-progress__dot.is-complete {
  --progress-dot-color: #D6AF6D;
  box-shadow:
    0 0 clamp(6px, 0.521vw, 10px) rgba(214, 175, 109, 0.95),
    0 0 clamp(15px, 1.25vw, 24px) rgba(214, 175, 109, 0.48);
  opacity: 1;
}

.chapter-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-page);
  transform: translate3d(0, 100%, 0);
  backface-visibility: hidden;
  contain: layout paint;
  cursor: pointer;
}

.chapter-layer--intro {
  cursor: default;
}

.chapter-layer--click-advance {
  cursor: pointer;
}

.intro-direct-transition,
.blue-direct-transition {
  --intro-direct-artwork-opacity: 0;
  --intro-direct-pan-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 92;
  overflow: hidden;
  pointer-events: none;
}

.intro-direct-transition__artwork,
.blue-direct-transition__artwork {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: var(--intro-direct-artwork-opacity);
  transform: translate3d(0, var(--intro-direct-pan-y), 0);
  user-select: none;
}

.chapter-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  backface-visibility: hidden;
}

.chapter-image--cover {
  height: 100%;
  object-fit: cover;
}

.chapter-hotspot {
  --hotspot-figma-size: clamp(30px, 2.083vw, 40px);
  --hotspot-pan-y: 0px;
  position: absolute;
  z-index: 4;
  left: var(--hotspot-x);
  top: var(--hotspot-y);
  width: calc(var(--hotspot-figma-size) * 1.35);
  height: calc(var(--hotspot-figma-size) * 1.35);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #d6af6d;
  cursor: pointer;
  transform: translate3d(-50%, calc(-50% + var(--hotspot-pan-y)), 0);
  transform-origin: center;
}

.chapter-hotspot::before,
.chapter-hotspot::after,
.chapter-hotspot__label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 360ms cubic-bezier(0.16, 0.84, 0.28, 1),
    height 360ms cubic-bezier(0.16, 0.84, 0.28, 1),
    opacity 260ms linear,
    background-color 260ms linear,
    box-shadow 260ms linear;
}

.chapter-hotspot::before {
  width: var(--hotspot-figma-size);
  height: var(--hotspot-figma-size);
  border: 0;
  background: url("assets/primary-hotspot-figma.svg") center / contain no-repeat;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.45),
    0 0 18px rgba(255, 255, 255, 0.28),
    0 0 34px rgba(255, 255, 255, 0.16);
  filter: none;
  opacity: 1;
  animation: chapter-hotspot-figma-breathe 2500ms ease-in-out infinite;
}

.chapter-hotspot::after {
  display: none;
}

.chapter-hotspot__label {
  display: none;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 40px;
  color: #d6af6d;
  font-family: "FZShuSong-Z01", "STSong", "Songti SC", serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 220ms linear;
}

.chapter-hotspot__label::before {
  z-index: -1;
  width: var(--hotspot-hover-core-size);
  height: var(--hotspot-hover-core-size);
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 260ms linear;
}

.chapter-hotspot:hover::before,
.chapter-hotspot:focus-visible::before {
  width: var(--hotspot-figma-size);
  height: var(--hotspot-figma-size);
  background: url("assets/primary-hotspot-figma.svg") center / contain no-repeat;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.55),
    0 0 22px rgba(255, 255, 255, 0.34),
    0 0 42px rgba(255, 255, 255, 0.2);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
  animation-play-state: paused;
}

.chapter-hotspot:hover::after,
.chapter-hotspot:focus-visible::after {
  opacity: 0;
  animation-play-state: paused;
}

.chapter-hotspot:hover .chapter-hotspot__label::before,
.chapter-hotspot:focus-visible .chapter-hotspot__label::before,
.chapter-hotspot:hover .chapter-hotspot__label,
.chapter-hotspot:focus-visible .chapter-hotspot__label {
  opacity: 1;
}

.chapter-hotspot:focus-visible {
  outline: none;
}

@keyframes chapter-hotspot-outer-breathe {
  0%,
  100% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0.96);
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.16),
      0 0 24px rgba(255, 255, 255, 0.08),
      inset 0 0 10px rgba(255, 255, 255, 0.07);
  }

  50% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow:
      0 0 16px rgba(255, 255, 255, 0.28),
      0 0 36px rgba(255, 255, 255, 0.16),
      inset 0 0 14px rgba(255, 255, 255, 0.1);
  }
}

@keyframes chapter-hotspot-figma-breathe {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

@keyframes chapter-hotspot-inner-breathe {
  0%,
  100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.96);
    box-shadow:
      0 0 6px rgba(255, 255, 255, 0.16),
      0 0 14px rgba(255, 255, 255, 0.08);
  }

  50% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.28),
      0 0 24px rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 768px) {
  .chapter-progress {
    right: 16px;
    top: 66vh;
    gap: 11px;
    width: 10px;
  }

  .chapter-progress__dot {
    width: 8px;
  }
}

.artist-page {
  min-height: 100vh;
  background: #000;
}

.craftsmanship-page {
  min-height: 100vh;
  background: #000;
}

.craftsmanship-main {
  position: relative;
  min-height: max(100vh, 720px);
  background: #000;
  color: #fff;
  overflow: hidden;
}

.craftsmanship-stage {
  --craft-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  position: absolute;
  left: 50%;
  top: calc(194 * var(--craft-scale));
  display: flex;
  gap: calc(80 * var(--craft-scale));
  width: max-content;
  transform: translateX(-50%);
}

.craftsmanship-card {
  display: grid;
  justify-items: center;
  width: calc(517 * var(--craft-scale));
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.craftsmanship-image {
  display: block;
  width: calc(517 * var(--craft-scale));
  height: calc(692 * var(--craft-scale));
  object-fit: cover;
  max-width: none;
  transition:
    filter 220ms ease,
    transform 220ms ease;
  transform-origin: center center;
}

.craftsmanship-card:hover .craftsmanship-image,
.craftsmanship-card:focus-within .craftsmanship-image {
  filter: drop-shadow(0 0 calc(10 * var(--craft-scale)) rgba(255, 255, 255, 0.24));
  transform: scale(1.03);
}

.craftsmanship-caption {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-top: calc(32 * var(--craft-scale));
  color: #fff;
  text-align: center;
}

.craftsmanship-caption__cn,
.craftsmanship-caption__en {
  width: 100%;
  margin: 0;
  font-weight: 400;
  text-align: center;
}

.craftsmanship-caption__cn {
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: calc(32 * var(--craft-scale));
  line-height: calc(32 * var(--craft-scale));
  letter-spacing: 0;
}

.craftsmanship-caption__en {
  margin-top: calc(8 * var(--craft-scale));
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--craft-scale));
  line-height: calc(14 * var(--craft-scale));
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .craftsmanship-main {
    min-height: auto;
    padding: 104px 24px 80px;
    overflow: visible;
  }

  .craftsmanship-stage {
    width: min(100%, 520px);
    height: auto;
    margin: 0 auto;
    display: grid;
    gap: 24px;
  }

  .craftsmanship-image,
  .craftsmanship-caption {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .craftsmanship-image {
    aspect-ratio: 440 / 588;
    object-fit: cover;
  }

  .craftsmanship-image--center {
    order: 1;
  }

  .craftsmanship-image--left {
    order: 2;
  }

  .craftsmanship-image--right {
    order: 3;
  }

  .craftsmanship-caption {
    order: 4;
    margin-top: 12px;
  }

  .craftsmanship-caption__cn {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.2;
  }

  .craftsmanship-caption__en {
    margin-top: 8px;
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1;
  }
}

@media (max-width: 767px) {
  .craftsmanship-page {
    min-height: 100svh;
  }

  .craftsmanship-main {
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  .craftsmanship-stage {
    --craft-mobile-card-width: calc(272 / 402 * 100vw);
    --craft-mobile-card-height: calc(364 / 884 * 100svh);
    --craft-mobile-gap: calc(24 / 402 * 100vw);
    position: absolute;
    left: 0;
    top: calc(260 / 884 * 100svh);
    display: flex;
    width: 100vw;
    height: calc(500 / 884 * 100svh);
    margin: 0;
    padding-inline: calc((100vw - var(--craft-mobile-card-width)) / 2);
    gap: var(--craft-mobile-gap);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - var(--craft-mobile-card-width)) / 2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none;
  }

  .craftsmanship-stage::-webkit-scrollbar {
    display: none;
  }

  .craftsmanship-card {
    position: relative;
    flex: 0 0 var(--craft-mobile-card-width);
    width: var(--craft-mobile-card-width);
    display: block;
    scroll-snap-align: center;
  }

  .craftsmanship-card--left {
    order: 1;
  }

  .craftsmanship-card--center {
    order: 2;
  }

  .craftsmanship-card--right {
    order: 3;
  }

  .craftsmanship-image {
    width: var(--craft-mobile-card-width);
    height: var(--craft-mobile-card-height);
    aspect-ratio: auto;
    object-fit: cover;
    transition: none;
    transform: none;
  }

  .craftsmanship-card:hover .craftsmanship-image,
  .craftsmanship-card:focus-within .craftsmanship-image {
    filter: none;
    transform: none;
  }

  .craftsmanship-caption {
    position: absolute;
    left: 50%;
    top: calc(444 / 884 * 100svh);
    display: grid;
    width: calc(180 / 402 * 100vw);
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 180ms linear;
  }

  .craftsmanship-card.is-active .craftsmanship-caption {
    opacity: 1;
  }

  .craftsmanship-caption__cn {
    font-size: calc(24 / 402 * 100vw);
    line-height: calc(24 / 884 * 100svh);
  }

  .craftsmanship-caption__en {
    margin-top: calc(4 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(14 / 884 * 100svh);
  }
}

.about-page {
  min-height: 100vh;
  background: #000;
}

.craft-detail-page {
  min-height: 100vh;
  background: #000;
}

.sacredness-page {
  min-height: 100vh;
  background: #000;
}

.sacredness-main {
  min-height: 100vh;
  background: #000;
  color: #fff;
}

.sacredness-stage {
  --sacred-scale: calc(100vw / 1920);
  position: relative;
  width: 100%;
  height: calc(3126 * var(--sacred-scale));
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

.sacredness-line {
  position: absolute;
  left: calc(959 * var(--sacred-scale));
  top: calc(1004 * var(--sacred-scale));
  bottom: 0;
  width: max(1px, calc(1 * var(--sacred-scale)));
  background: rgba(255, 255, 255, 0.5);
}

.sacredness-dot {
  position: absolute;
  left: calc(947 * var(--sacred-scale));
  width: calc(24 * var(--sacred-scale));
  height: calc(24 * var(--sacred-scale));
  border: max(1px, calc(1 * var(--sacred-scale))) solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: #000;
}

.sacredness-dot--faith {
  top: calc(1127 * var(--sacred-scale));
}

.sacredness-dot--daily {
  top: calc(1558 * var(--sacred-scale));
}

.sacredness-dot--gold {
  top: calc(1988 * var(--sacred-scale));
}

.sacredness-dot--consecration {
  top: calc(2417 * var(--sacred-scale));
}

.sacredness-hero {
  position: absolute;
  left: calc(295 * var(--sacred-scale));
  top: calc(118 * var(--sacred-scale));
  width: calc(1330 * var(--sacred-scale));
  height: calc(886 * var(--sacred-scale));
  margin: 0;
  overflow: hidden;
}

.sacredness-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sacredness-block {
  position: absolute;
  inset: 0 auto auto 0;
  color: #fff;
}

.sacredness-title,
.sacredness-subtitle,
.sacredness-copy {
  position: absolute;
  margin: 0;
}

.sacredness-title {
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: calc(32 * var(--sacred-scale));
  font-weight: 400;
  line-height: calc(32 * var(--sacred-scale));
}

.sacredness-subtitle {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--sacred-scale));
  font-weight: 400;
  line-height: calc(21 * var(--sacred-scale));
  text-transform: uppercase;
}

.sacredness-copy p {
  margin: 0;
  overflow: visible;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
}

.sacredness-copy--cn {
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: calc(16 * var(--sacred-scale));
  font-weight: 400;
  line-height: calc(24 * var(--sacred-scale));
}

.sacredness-copy--en {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(20 * var(--sacred-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(24 * var(--sacred-scale));
}

.sacredness-block--faith,
.sacredness-block--gold {
  text-align: right;
}

.sacredness-title--faith {
  left: calc(703 * var(--sacred-scale));
  top: calc(1124 * var(--sacred-scale));
  width: calc(196 * var(--sacred-scale));
}

.sacredness-subtitle--faith {
  left: calc(520 * var(--sacred-scale));
  top: calc(1172 * var(--sacred-scale));
  width: calc(379 * var(--sacred-scale));
}

.sacredness-copy--faith-cn {
  left: calc(626 * var(--sacred-scale));
  top: calc(1241 * var(--sacred-scale));
  width: calc(285 * var(--sacred-scale));
  text-align: right;
}

.sacredness-copy--faith-en {
  left: calc(463 * var(--sacred-scale));
  right: auto;
  top: calc(1337 * var(--sacred-scale));
  width: calc(442 * var(--sacred-scale));
  text-align: right;
}

.sacredness-title--daily {
  left: calc(1028 * var(--sacred-scale));
  top: calc(1554 * var(--sacred-scale));
  width: calc(196 * var(--sacred-scale));
}

.sacredness-subtitle--daily {
  left: calc(1033 * var(--sacred-scale));
  top: calc(1602 * var(--sacred-scale));
  width: calc(213 * var(--sacred-scale));
}

.sacredness-copy--daily-cn {
  left: calc(1032 * var(--sacred-scale));
  top: calc(1671 * var(--sacred-scale));
  width: calc(339 * var(--sacred-scale));
}

.sacredness-copy--daily-en {
  left: calc(1032 * var(--sacred-scale));
  top: calc(1767 * var(--sacred-scale));
  width: calc(304 * var(--sacred-scale));
}

.sacredness-title--gold {
  left: calc(777 * var(--sacred-scale));
  top: calc(1984 * var(--sacred-scale));
  width: calc(115 * var(--sacred-scale));
}

.sacredness-subtitle--gold {
  left: calc(683 * var(--sacred-scale));
  top: calc(2032 * var(--sacred-scale));
  width: calc(209 * var(--sacred-scale));
}

.sacredness-copy--gold-cn {
  left: calc(583 * var(--sacred-scale));
  top: calc(2101 * var(--sacred-scale));
  width: calc(325 * var(--sacred-scale));
  text-align: right;
}

.sacredness-copy--gold-en {
  left: calc(454 * var(--sacred-scale));
  top: calc(2197 * var(--sacred-scale));
  width: calc(442 * var(--sacred-scale));
  text-align: right;
}

.sacredness-title--consecration {
  left: calc(1010 * var(--sacred-scale));
  top: calc(2414 * var(--sacred-scale));
  width: calc(196 * var(--sacred-scale));
}

.sacredness-subtitle--consecration {
  left: calc(1010 * var(--sacred-scale));
  top: calc(2462 * var(--sacred-scale));
  width: calc(213 * var(--sacred-scale));
}

.sacredness-copy--consecration-cn {
  left: calc(1013 * var(--sacred-scale));
  top: calc(2531 * var(--sacred-scale));
  width: calc(358 * var(--sacred-scale));
}

.sacredness-copy--consecration-en {
  left: calc(1013 * var(--sacred-scale));
  top: calc(2653 * var(--sacred-scale));
  width: calc(357 * var(--sacred-scale));
}

@media (max-width: 767px) {
  .sacredness-page,
  .sacredness-main {
    min-height: calc(2180 / 402 * 100vw);
  }

  .sacredness-stage {
    --sacred-scale: calc(100vw / 402);
    height: calc(2180 * var(--sacred-scale));
    min-height: calc(2180 * var(--sacred-scale));
    overflow: hidden;
  }

  .sacredness-hero {
    left: calc(-188 * var(--sacred-scale));
    top: calc(2 * var(--sacred-scale));
    width: calc(872 * var(--sacred-scale));
    height: calc(581 * var(--sacred-scale));
  }

  .sacredness-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sacredness-line {
    left: calc(80 * var(--sacred-scale));
    top: calc(580 * var(--sacred-scale));
    bottom: 0;
    width: max(1px, calc(1 * var(--sacred-scale)));
    background: rgba(255, 255, 255, 0.52);
  }

  .sacredness-dot {
    left: calc(72 * var(--sacred-scale));
    width: calc(16 * var(--sacred-scale));
    height: calc(16 * var(--sacred-scale));
    border-width: max(1px, calc(1 * var(--sacred-scale)));
  }

  .sacredness-dot--faith {
    top: calc(662 * var(--sacred-scale));
  }

  .sacredness-dot--daily {
    top: calc(1072 * var(--sacred-scale));
  }

  .sacredness-dot--gold {
    top: calc(1438 * var(--sacred-scale));
  }

  .sacredness-dot--consecration {
    top: calc(1813 * var(--sacred-scale));
  }

  .sacredness-block {
    text-align: left;
  }

  .sacredness-title {
    font-size: calc(24 * var(--sacred-scale));
    line-height: calc(32 * var(--sacred-scale));
  }

  .sacredness-subtitle {
    font-size: calc(20 * var(--sacred-scale));
    line-height: calc(20 * var(--sacred-scale));
  }

  .sacredness-copy p {
    white-space: normal;
  }

  .sacredness-copy--cn {
    font-size: calc(12 * var(--sacred-scale));
    line-height: calc(18 * var(--sacred-scale));
  }

  .sacredness-copy--en {
    font-size: calc(10 * var(--sacred-scale));
    line-height: calc(15 * var(--sacred-scale));
  }

  .sacredness-title--faith {
    left: calc(111 * var(--sacred-scale));
    top: calc(654 * var(--sacred-scale));
    width: calc(196 * var(--sacred-scale));
  }

  .sacredness-subtitle--faith {
    left: calc(113 * var(--sacred-scale));
    top: calc(685 * var(--sacred-scale));
    width: calc(228 * var(--sacred-scale));
    line-height: calc(30 * var(--sacred-scale));
  }

  .sacredness-copy--faith-cn {
    left: calc(111 * var(--sacred-scale));
    top: calc(776 * var(--sacred-scale));
    width: calc(217 * var(--sacred-scale));
    text-align: left;
  }

  .sacredness-copy--faith-en {
    left: calc(111 * var(--sacred-scale));
    top: calc(842 * var(--sacred-scale));
    width: calc(228 * var(--sacred-scale));
    text-align: left;
  }

  .sacredness-title--daily {
    left: calc(111 * var(--sacred-scale));
    top: calc(1064 * var(--sacred-scale));
    width: calc(101 * var(--sacred-scale));
  }

  .sacredness-subtitle--daily {
    left: calc(114 * var(--sacred-scale));
    top: calc(1094 * var(--sacred-scale));
    width: calc(213 * var(--sacred-scale));
  }

  .sacredness-copy--daily-cn {
    left: calc(115 * var(--sacred-scale));
    top: calc(1146 * var(--sacred-scale));
    width: calc(236 * var(--sacred-scale));
  }

  .sacredness-copy--daily-en {
    left: calc(115 * var(--sacred-scale));
    top: calc(1220 * var(--sacred-scale));
    width: calc(152 * var(--sacred-scale));
  }

  .sacredness-title--gold {
    left: calc(111 * var(--sacred-scale));
    top: calc(1434 * var(--sacred-scale));
    width: calc(115 * var(--sacred-scale));
  }

  .sacredness-subtitle--gold {
    left: calc(111 * var(--sacred-scale));
    top: calc(1464 * var(--sacred-scale));
    width: calc(166 * var(--sacred-scale));
  }

  .sacredness-copy--gold-cn {
    left: calc(111 * var(--sacred-scale));
    top: calc(1516 * var(--sacred-scale));
    width: calc(253 * var(--sacred-scale));
    text-align: left;
  }

  .sacredness-copy--gold-en {
    left: calc(111 * var(--sacred-scale));
    top: calc(1588 * var(--sacred-scale));
    width: calc(206 * var(--sacred-scale));
    text-align: left;
  }

  .sacredness-title--consecration {
    left: calc(111 * var(--sacred-scale));
    top: calc(1805 * var(--sacred-scale));
    width: calc(65 * var(--sacred-scale));
  }

  .sacredness-subtitle--consecration {
    left: calc(111 * var(--sacred-scale));
    top: calc(1838 * var(--sacred-scale));
    width: calc(166 * var(--sacred-scale));
  }

  .sacredness-copy--consecration-cn {
    left: calc(111 * var(--sacred-scale));
    top: calc(1885 * var(--sacred-scale));
    width: calc(238 * var(--sacred-scale));
  }

  .sacredness-copy--consecration-en {
    left: calc(111 * var(--sacred-scale));
    top: calc(1992 * var(--sacred-scale));
    width: calc(174 * var(--sacred-scale));
  }
}

.craft-detail-main {
  --craft-panel-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  color: #fff;
  touch-action: pan-y;
}

.craft-detail-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: 400vw;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.craft-detail-panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.craft-detail-panel__rule {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(850 * var(--craft-panel-scale));
  height: calc(2 * var(--craft-panel-scale));
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.14) 45%,
      rgba(255, 255, 255, 0.86) 74%,
      rgba(255, 255, 255, 0.18) 100%
    );
  box-shadow:
    calc(220 * var(--craft-panel-scale)) 0 calc(18 * var(--craft-panel-scale)) rgba(255, 255, 255, 0.26),
    calc(360 * var(--craft-panel-scale)) 0 calc(28 * var(--craft-panel-scale)) rgba(214, 175, 109, 0.22);
  transform: translateY(-50%);
}

.craft-detail-panel__index {
  position: absolute;
  left: calc(431 * var(--craft-panel-scale));
  top: calc(263 * var(--craft-panel-scale));
  display: grid;
  width: calc(80 * var(--craft-panel-scale));
  height: calc(80 * var(--craft-panel-scale));
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.72);
  border-radius: 50%;
}

.craft-detail-panel__index span {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(48 * var(--craft-panel-scale));
  font-weight: 400;
  line-height: calc(48 * var(--craft-panel-scale));
}

.craft-detail-panel__title {
  position: absolute;
  left: calc(162 * var(--craft-panel-scale));
  top: calc(391 * var(--craft-panel-scale));
  width: calc(350 * var(--craft-panel-scale));
  text-align: right;
}

.craft-detail-panel__title h1 {
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: calc(32 * var(--craft-panel-scale));
  font-weight: 400;
  line-height: calc(32 * var(--craft-panel-scale));
}

.craft-detail-panel__title p {
  margin: calc(10 * var(--craft-panel-scale)) 0 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--craft-panel-scale));
  font-weight: 400;
  line-height: calc(21 * var(--craft-panel-scale));
  text-transform: uppercase;
  white-space: nowrap;
}

.craft-detail-panel__image {
  position: absolute;
  left: calc(592 * var(--craft-panel-scale));
  top: 50%;
  width: calc(492 * var(--craft-panel-scale));
  height: calc(554 * var(--craft-panel-scale));
  margin: 0;
  overflow: hidden;
  transform: translateY(-50%);
}

.craft-detail-panel__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craft-detail-panel__copy {
  position: absolute;
  left: calc(1164 * var(--craft-panel-scale));
  top: calc(550 * var(--craft-panel-scale));
  width: calc(518 * var(--craft-panel-scale));
}

.craft-detail-panel--canvas .craft-detail-panel__image img {
  width: 206.25%;
  max-width: none;
  transform: translateX(-34.62%);
}

.craft-detail-panel__copy p {
  margin: 0;
}

.craft-detail-panel__body-cn {
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: calc(16 * var(--craft-panel-scale));
  font-weight: 400;
  line-height: calc(24 * var(--craft-panel-scale));
}

.craft-detail-panel__body-en {
  margin-top: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(16 * var(--craft-panel-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(20 * var(--craft-panel-scale));
}

.craft-particle-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.craft-particle-field__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(214, 175, 109, 0.76);
  box-shadow: 0 0 8px rgba(214, 175, 109, 0.45);
  animation: craft-particle-drift var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes craft-particle-drift {
  0%,
  100% {
    opacity: 0.25;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.8;
    transform: translate3d(18px, -22px, 0);
  }
}

@media (max-width: 960px) {
  .craft-detail-main {
    --craft-panel-scale: calc(100vw / 960);
  }

  .craft-detail-panel__rule {
    width: 45vw;
  }

  .craft-detail-panel__index {
    left: 10vw;
    top: calc(50% - 23vh);
  }

  .craft-detail-panel__title {
    left: 8vw;
    top: 29vh;
    width: 28vw;
  }

  .craft-detail-panel__image {
    left: 36vw;
    width: 26vw;
    height: 46vh;
  }

  .craft-detail-panel__copy {
    left: 65vw;
    top: 51vh;
    width: 29vw;
  }
}

@media (max-width: 767px) {
  .craft-detail-page {
    min-height: 100svh;
  }

  .craft-detail-main {
    --craft-panel-scale: calc(100vw / 402);
    height: 100svh;
    min-height: 100svh;
  }

  .craft-detail-panel__rule {
    left: 0;
    top: 46svh;
    width: 100vw;
  }

  .craft-detail-panel__index {
    left: calc(32 * var(--craft-panel-scale));
    top: calc(108 * var(--craft-panel-scale));
    width: calc(62 * var(--craft-panel-scale));
    height: calc(62 * var(--craft-panel-scale));
  }

  .craft-detail-panel__index span {
    font-size: calc(34 * var(--craft-panel-scale));
    line-height: calc(34 * var(--craft-panel-scale));
  }

  .craft-detail-panel__title {
    left: calc(32 * var(--craft-panel-scale));
    top: calc(190 * var(--craft-panel-scale));
    width: calc(160 * var(--craft-panel-scale));
    text-align: left;
  }

  .craft-detail-panel__title h1 {
    font-size: calc(24 * var(--craft-panel-scale));
    line-height: calc(26 * var(--craft-panel-scale));
  }

  .craft-detail-panel__title p {
    font-size: calc(16 * var(--craft-panel-scale));
    line-height: calc(18 * var(--craft-panel-scale));
  }

  .craft-detail-panel__image {
    left: calc(118 * var(--craft-panel-scale));
    top: calc(354 * var(--craft-panel-scale));
    width: calc(220 * var(--craft-panel-scale));
    height: calc(248 * var(--craft-panel-scale));
    transform: none;
  }

  .craft-detail-panel__copy {
    left: calc(32 * var(--craft-panel-scale));
    top: calc(650 * var(--craft-panel-scale));
    width: calc(338 * var(--craft-panel-scale));
  }

  .craft-detail-panel__body-cn {
    font-size: calc(12 * var(--craft-panel-scale));
    line-height: calc(18 * var(--craft-panel-scale));
  }

  .craft-detail-panel__body-en {
    font-size: calc(10 * var(--craft-panel-scale));
    line-height: calc(15 * var(--craft-panel-scale));
  }
}

.minerality-page {
  min-height: 100vh;
  background: #000;
}

.minerality-main {
  min-height: 100vh;
  background: #000;
  color: #fff;
}

.minerality-stage {
  position: relative;
  width: 100%;
  min-height: min(2010px, 104.6875vw);
  overflow: hidden;
}

.minerality-hero {
  position: absolute;
  left: 50%;
  top: min(184px, 9.5833vw);
  width: min(1600px, 83.3333vw);
  height: min(474px, 24.6875vw);
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
}

.minerality-hero img {
  position: absolute;
  left: 0;
  top: -50.4%;
  display: block;
  width: 100%;
  height: 188.47%;
  max-width: none;
}

.minerality-hero-track {
  display: contents;
}

.minerality-hero-duplicate {
  display: none;
}

.minerality-process {
  position: absolute;
  left: 50%;
  top: min(973px, 50.6771vw);
  width: min(516px, 26.875vw);
  height: min(690px, 35.9375vw);
  margin: 0;
  transform: translateX(-50%);
}

.minerality-process img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.minerality-copy {
  position: absolute;
  left: 50%;
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
}

.minerality-copy p {
  margin: 0;
}

.minerality-mobile-break {
  display: none;
}

.minerality-copy--intro {
  position: absolute;
  left: 50%;
  top: min(758px, 39.4792vw);
  width: min(1200px, 92vw);
  margin: 0;
  transform: translateX(-50%);
}

.minerality-copy--process {
  top: min(1743px, 90.7813vw);
  width: min(628px, 32.7083vw);
}

.minerality-copy__cn {
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: min(16px, 0.8333vw);
  font-weight: 400;
  line-height: min(20px, 1.0417vw);
}

.minerality-copy__en {
  margin-top: min(2px, 0.1042vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: min(20px, 1.0417vw);
  font-style: italic;
  font-weight: 400;
  line-height: min(24px, 1.25vw);
}

.minerality-copy--intro .minerality-copy__en {
  margin-top: min(2px, 0.1042vw);
  font-size: clamp(10px, 1.0417vw, 20px);
  line-height: min(20px, 1.0417vw);
  white-space: nowrap;
}

.minerality-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 900ms linear,
    transform 900ms linear;
}

.minerality-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.minerality-text-reveal {
  display: block;
  position: relative;
  overflow: visible;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 900ms linear,
    transform 900ms linear;
}

.minerality-text-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 960px) {
  .minerality-stage {
    --minerality-scale: 1;
    min-height: auto;
    padding: 104px 24px 88px;
    display: grid;
    gap: 48px;
  }

  .minerality-hero,
  .minerality-process,
  .minerality-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .minerality-hero {
    aspect-ratio: 1600 / 474;
  }

  .minerality-process {
    width: min(100%, 516px);
    margin: 0 auto;
  }

  .minerality-copy--intro,
  .minerality-copy--process {
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .minerality-copy__cn {
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.6;
  }

  .minerality-copy__en {
    margin-top: 8px;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.25;
  }

  .minerality-copy--intro .minerality-copy__en {
    font-size: clamp(9px, 2.4vw, 16px);
    line-height: 1.2;
    white-space: nowrap;
  }
}

@keyframes mineralityMobilePan {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 767px) {
  .minerality-page {
    min-height: calc(1683 / 884 * 100svh);
  }

  .minerality-main {
    min-height: calc(1683 / 884 * 100svh);
  }

  .minerality-stage {
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(1683 / 884 * 100svh);
    padding: 0;
    overflow: hidden;
  }

  .minerality-hero {
    position: absolute;
    left: calc(-36 / 402 * 100vw);
    top: calc(100 / 884 * 100svh);
    width: calc(1907 / 402 * 100vw);
    height: calc(565 / 884 * 100svh);
    margin: 0;
    overflow: hidden;
    transform: none;
  }

  .minerality-hero-track {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    width: max-content;
    height: 100%;
    animation: mineralityMobilePan 18s linear infinite;
    will-change: transform;
  }

  .minerality-hero img {
    position: relative;
    left: auto;
    top: -50.4%;
    display: block;
    flex: 0 0 auto;
    width: calc(1907 / 402 * 100vw);
    height: 188.47%;
    max-width: none;
    object-fit: cover;
    opacity: 1;
    transition: none;
  }

  .minerality-hero-duplicate {
    display: block;
  }

  .minerality-process {
    position: absolute;
    left: 0;
    top: calc(819 / 884 * 100svh);
    width: calc(401 / 402 * 100vw);
    height: calc(536 / 884 * 100svh);
    margin: 0;
    transform: none;
  }

  .minerality-process img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .minerality-copy {
    position: absolute;
    left: 50%;
    margin: 0;
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
  }

  .minerality-copy--intro {
    top: calc(665 / 884 * 100svh);
    width: calc(309 / 402 * 100vw);
  }

  .minerality-copy--process {
    top: calc(1419 / 884 * 100svh);
    width: calc(257 / 402 * 100vw);
  }

  .minerality-copy__cn {
    font-size: calc(12 / 402 * 100vw);
    line-height: calc(20 / 884 * 100svh);
    text-align: center;
  }

  .minerality-copy--intro .minerality-copy__cn {
    line-height: calc(24 / 884 * 100svh);
  }

  .minerality-copy--process .minerality-copy__cn {
    width: calc(250 / 402 * 100vw);
    margin-inline: auto;
  }

  .minerality-copy__en {
    margin-top: 0;
    font-size: calc(10 / 402 * 100vw);
    line-height: calc(15 / 884 * 100svh);
    text-align: center;
  }

  .minerality-copy--intro .minerality-copy__en {
    margin-top: calc(3 / 884 * 100svh);
    font-size: calc(12 / 402 * 100vw);
    line-height: calc(20 / 884 * 100svh);
    white-space: normal;
  }

  .minerality-copy--process .minerality-copy__en {
    margin-top: 0;
    width: calc(257 / 402 * 100vw);
  }

  .minerality-copy--process .minerality-copy__cn p,
  .minerality-copy--process .minerality-copy__en p {
    margin: 0;
  }

  .minerality-mobile-break {
    display: block;
  }
}

.about-page::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.about-main {
  position: relative;
  min-height: max(100vh, 1024px);
  color: #fff;
}

.about-copy {
  position: absolute;
  left: calc(50% + 0.5px);
  top: 176px;
  width: 651px;
  text-align: center;
  transform: translateX(-50%);
}

.about-copy p {
  margin: 0;
}

.about-mobile-break {
  display: none;
}

.about-copy__cn {
  margin-left: auto;
  margin-right: auto;
  width: 568px;
  color: #fff;
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
}

.about-copy__en {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 651px;
  color: #fff;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

@media (max-width: 960px) {
  .about-page::after {
    position: fixed;
  }

  .about-main {
    min-height: auto;
    padding: 78px 24px 88px;
  }

  .about-copy {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .about-copy {
    width: min(100%, 651px);
    margin: 0 auto;
  }

  .about-copy__cn,
  .about-copy__en {
    width: min(100%, 680px);
    margin-inline: auto;
    white-space: normal;
  }

  .about-copy__cn {
    font-size: clamp(17px, 4.8vw, 24px);
    line-height: 1.5;
  }

  .about-copy__en {
    margin-top: 16px;
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1.36;
  }
}

@media (max-width: 767px) {
  .about-page {
    min-height: 100svh;
  }

  .about-main {
    min-height: 100svh;
    padding: 0;
  }

  .about-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100vw;
    min-height: 100svh;
    margin: 0;
    transform: none;
  }

  .about-copy__cn {
    position: absolute;
    left: calc(50% + 1px);
    top: calc(218 / 884 * 100svh);
    width: calc(228 / 402 * 100vw);
    margin: 0;
    color: #fff;
    font-size: calc(12 / 402 * 100vw);
    line-height: calc(20 / 884 * 100svh);
    text-align: center;
    white-space: normal;
    transform: translateX(-50%);
  }

  .about-copy__en {
    position: absolute;
    left: calc(50% + 0.5px);
    top: calc(458 / 884 * 100svh);
    width: calc(273 / 402 * 100vw);
    margin: 0;
    color: #fff;
    font-size: calc(10 / 402 * 100vw);
    line-height: calc(15 / 884 * 100svh);
    text-align: center;
    white-space: normal;
    transform: translateX(-50%);
  }

  .about-copy__cn p,
  .about-copy__en p {
    margin: 0;
  }

  .about-mobile-break {
    display: block;
  }
}

.artist-main {
  position: relative;
  --artist-content-left: calc(972 / 1920 * 100vw);
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
}

.artist-portrait {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(831 / 1920 * 100vw);
  height: calc(1110 / 1080 * 100vh);
  object-fit: cover;
}

.artist-heading {
  position: absolute;
  left: var(--artist-content-left);
  top: calc(342 / 1080 * 100vh);
  width: 248px;
  text-align: left;
}

.artist-heading__cn {
  margin: 0;
  color: #fff;
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.artist-heading__en {
  margin: 12px 0 0;
  color: #fff;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 14px;
  text-transform: uppercase;
}

.artist-bio {
  position: absolute;
  left: var(--artist-content-left);
  top: calc(599 / 1080 * 100vh);
  width: calc(788 / 1920 * 100vw);
  min-width: 620px;
}

.artist-bio p {
  margin: 0;
}

.artist-bio p + p {
  margin-top: 24px;
}

.artist-bio__cn {
  color: #fff;
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;
}

.artist-bio__en {
  margin-top: 29px;
  color: #fff;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

@media (max-width: 960px) {
  .artist-main {
    min-height: auto;
    padding: 112px 24px 80px;
  }

  .artist-portrait,
  .artist-heading,
  .artist-bio {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .artist-portrait {
    width: min(245px, 54vw);
    margin: 0 auto;
  }

  .artist-heading {
    width: auto;
    margin: 48px auto 0;
  }

  .artist-bio {
    width: min(100%, 720px);
    margin: 48px auto 0;
  }
}

@media (max-width: 767px) {
  .artist-page {
    min-height: 100svh;
  }

  .artist-main {
    min-height: calc(985 / 884 * 100svh);
    padding: 0;
  }

  .artist-portrait {
    position: absolute;
    left: calc(50% + 0.5px);
    top: calc(148 / 884 * 100svh);
    width: calc(173 / 402 * 100vw);
    height: calc(231 / 884 * 100svh);
    margin: 0;
    object-fit: cover;
    transform: translateX(-50%);
  }

  .artist-heading {
    position: absolute;
    left: calc(50% + 0.5px);
    top: calc(427 / 884 * 100svh);
    width: calc(202 / 402 * 100vw);
    margin: 0;
    text-align: center;
    transform: translateX(-50%);
  }

  .artist-heading__cn {
    font-size: calc(18 / 402 * 100vw);
    line-height: calc(19 / 884 * 100svh);
  }

  .artist-heading__en {
    margin-top: calc(4 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(14 / 884 * 100svh);
    white-space: nowrap;
  }

  .artist-bio {
    position: absolute;
    left: 50%;
    top: calc(515 / 884 * 100svh);
    width: calc(286 / 402 * 100vw);
    margin: 0;
    transform: translateX(-50%);
  }

  .artist-bio__cn {
    font-size: calc(12 / 402 * 100vw);
    line-height: calc(18 / 884 * 100svh);
    text-align: justify;
  }

  .artist-bio__en {
    margin-top: calc(14 / 884 * 100svh);
    font-size: calc(10 / 402 * 100vw);
    line-height: calc(15 / 884 * 100svh);
  }

  .artist-bio__cn p + p {
    margin-top: calc(18 / 884 * 100svh);
  }

  .artist-bio__en p + p {
    margin-top: calc(15 / 884 * 100svh);
  }
}

.primary-intro-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
  text-align: center;
  pointer-events: none;
  word-break: break-word;
}

.primary-intro-floating-copy {
  z-index: 90;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.primary-intro-copy p {
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.primary-intro-copy div {
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.primary-intro-copy div p {
  position: static;
  left: auto;
  transform: none;
}

.primary-intro-copy__cn {
  font-family: "FZShuSong-Z01", "Songti SC", "STSong", serif;
  font-weight: 400;
}

.primary-intro-copy__en {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-weight: 400;
}

.primary-intro-copy__title-cn {
  top: calc(341 / 1080 * 100vh);
  width: calc(106 / 1920 * 100vw);
  height: calc(154 / 1080 * 100vh);
  font-size: calc(64 / 1920 * 100vw);
  line-height: calc(77 / 1080 * 100vh);
  letter-spacing: calc(16 / 1920 * 100vw);
}

.primary-intro-copy__title-en {
  top: calc(527 / 1080 * 100vh);
  width: calc(476 / 1920 * 100vw);
  height: calc(32 / 1080 * 100vh);
  font-size: calc(32 / 1920 * 100vw);
  line-height: calc(32 / 1080 * 100vh);
  letter-spacing: calc(3.2 / 1920 * 100vw);
  text-transform: uppercase;
}

.primary-intro-copy__subtitle-cn {
  left: calc(50% - 0.5px);
  top: calc(679 / 1080 * 100vh);
  width: max-content;
  height: auto;
  font-size: calc(32 / 1920 * 100vw);
  line-height: calc(32 / 1080 * 100vh);
  letter-spacing: calc(8 / 1920 * 100vw);
  white-space: nowrap;
  word-break: normal;
}

.primary-intro-copy__subtitle-en {
  left: calc(50% - 1px);
  top: calc(720 / 1080 * 100vh);
  width: max-content;
  height: auto;
  font-size: calc(20 / 1920 * 100vw);
  font-style: italic;
  line-height: calc(20 / 1080 * 100vh);
  letter-spacing: calc(1 / 1920 * 100vw);
  text-transform: capitalize;
  white-space: nowrap;
  word-break: normal;
}

.primary-intro-copy--black .primary-intro-copy__title-cn {
  top: calc(274 / 1080 * 100vh);
}

.primary-intro-copy--black .primary-intro-copy__title-en {
  top: calc(460 / 1080 * 100vh);
}

.primary-intro-copy__black-subtitle-cn {
  left: calc(50% - 0.5px);
  top: calc(612 / 1080 * 100vh);
  width: calc(551 / 1920 * 100vw);
  height: calc(96 / 1080 * 100vh);
  font-size: calc(32 / 1920 * 100vw);
  letter-spacing: calc(8 / 1920 * 100vw);
}

.primary-intro-copy__black-subtitle-cn p {
  height: calc(48 / 1080 * 100vh);
  line-height: calc(48 / 1080 * 100vh);
}

.primary-intro-copy__black-subtitle-en {
  left: calc(50% - 0.5px);
  top: calc(717 / 1080 * 100vh);
  width: calc(385 / 1920 * 100vw);
  height: calc(89 / 1080 * 100vh);
  font-size: calc(20 / 1920 * 100vw);
  font-style: italic;
  letter-spacing: calc(1 / 1920 * 100vw);
  text-transform: capitalize;
}

.primary-intro-copy__black-subtitle-en p {
  height: calc(30 / 1080 * 100vh);
  line-height: calc(30 / 1080 * 100vh);
}

.primary-intro-copy--red .primary-intro-copy__title-cn {
  top: calc(217 / 1080 * 100vh);
  width: calc(106 / 1920 * 100vw);
  height: calc(299 / 1080 * 100vh);
  line-height: calc(77 / 1080 * 100vh);
}

.primary-intro-copy--red .primary-intro-copy__title-en {
  top: calc(548 / 1080 * 100vh);
  width: calc(476 / 1920 * 100vw);
  height: calc(32 / 1080 * 100vh);
  line-height: calc(32 / 1080 * 100vh);
}

.primary-intro-copy__red-subtitle-cn {
  left: calc(50% - 0.5px);
  top: calc(700 / 1080 * 100vh);
  width: calc(551 / 1920 * 100vw);
  height: calc(96 / 1080 * 100vh);
  font-size: calc(32 / 1920 * 100vw);
  line-height: 0;
  letter-spacing: calc(8 / 1920 * 100vw);
}

.primary-intro-copy__red-subtitle-cn p {
  height: calc(48 / 1080 * 100vh);
  line-height: calc(48 / 1080 * 100vh);
}

.primary-intro-copy__red-subtitle-en {
  left: calc(50% - 0.5px);
  top: calc(805 / 1080 * 100vh);
  width: calc(385 / 1920 * 100vw);
  height: calc(59 / 1080 * 100vh);
  font-size: calc(20 / 1920 * 100vw);
  line-height: 0;
  font-style: italic;
  letter-spacing: calc(1 / 1920 * 100vw);
  text-transform: capitalize;
}

.primary-intro-copy__red-subtitle-en p {
  height: calc(30 / 1080 * 100vh);
  line-height: calc(30 / 1080 * 100vh);
  white-space: nowrap;
}

.primary-intro-copy--color .primary-intro-copy__title-cn {
  top: calc(217 / 1080 * 100vh);
  height: calc(299 / 1080 * 100vh);
}

.primary-intro-copy--color .primary-intro-copy__title-en {
  top: calc(548 / 1080 * 100vh);
  width: calc(533 / 1920 * 100vw);
}

.primary-intro-copy__color-subtitle-cn {
  left: calc(50% - 0.5px);
  top: calc(700 / 1080 * 100vh);
  width: calc(551 / 1920 * 100vw);
  height: calc(96 / 1080 * 100vh);
  font-size: calc(32 / 1920 * 100vw);
  letter-spacing: calc(8 / 1920 * 100vw);
}

.primary-intro-copy__color-subtitle-cn p {
  height: calc(48 / 1080 * 100vh);
  line-height: calc(48 / 1080 * 100vh);
}

.primary-intro-copy__color-subtitle-en {
  left: calc(50% - 0.5px);
  top: calc(805 / 1080 * 100vh);
  width: calc(429 / 1920 * 100vw);
  height: calc(59 / 1080 * 100vh);
  font-size: calc(20 / 1920 * 100vw);
  font-style: italic;
  letter-spacing: calc(1 / 1920 * 100vw);
  text-transform: capitalize;
}

.primary-intro-copy__color-subtitle-en p {
  height: calc(30 / 1080 * 100vh);
  line-height: calc(30 / 1080 * 100vh);
}

.primary-intro-copy--gold .primary-intro-copy__title-cn {
  top: calc(341 / 1080 * 100vh);
  height: calc(154 / 1080 * 100vh);
}

.primary-intro-copy--gold .primary-intro-copy__title-en {
  top: calc(527 / 1080 * 100vh);
  width: calc(476 / 1920 * 100vw);
}

.primary-intro-copy__gold-subtitle-cn {
  left: calc(50% - 0.5px);
  top: calc(679 / 1080 * 100vh);
  width: max-content;
  height: auto;
  font-size: calc(32 / 1920 * 100vw);
  line-height: calc(32 / 1080 * 100vh);
  letter-spacing: calc(8 / 1920 * 100vw);
  white-space: nowrap;
  word-break: normal;
}

.primary-intro-copy__gold-subtitle-en {
  top: calc(720 / 1080 * 100vh);
  width: max-content;
  height: auto;
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(20 / 1080 * 100vh);
  font-style: italic;
  letter-spacing: calc(1 / 1920 * 100vw);
  text-transform: capitalize;
  white-space: nowrap;
  word-break: normal;
}

.home-tail {
  position: relative;
  z-index: 2;
  width: 100vw;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: #f2f0eb;
  color: #000000;
}

.home-tail__bg {
  position: absolute;
  left: 0;
  top: calc(-355 / 640 * 100%);
  width: 100%;
  height: calc(1080 / 640 * 100%);
  object-fit: cover;
  pointer-events: none;
}

.home-tail__logo {
  position: absolute;
  left: calc(160 / 1920 * 100%);
  top: calc(348 / 640 * 100%);
  width: calc(517 / 1920 * 100%);
  height: calc(109 / 640 * 100%);
  display: block;
}

.home-tail__record {
  position: absolute;
  left: calc((80 + 80) / 1920 * 100%);
  top: calc(505 / 640 * 100%);
  width: calc(148 / 1920 * 100%);
  height: calc(16 / 640 * 100%);
  margin: 0;
  color: #000000;
  font-family: "Source Han Sans CN", "Source Han Sans SC", Arial, sans-serif;
  font-size: calc(16 / 1920 * 100vw);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.home-tail__nav {
  position: absolute;
  inset: 0;
  color: #000000;
  font-family: "Inter", "Source Han Sans SC", "Source Han Sans CN", Arial, sans-serif;
  font-weight: 300;
}

.home-tail__nav-item {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: calc(8 / 1920 * 100vw);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  isolation: isolate;
  transition:
    color 140ms linear,
    opacity 160ms linear;
}

.home-tail__nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  height: 1px;
  z-index: 1;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 500ms linear,
    transform 500ms linear;
}

.home-tail__nav-item:hover,
.home-tail__nav-item:focus-visible {
  opacity: 1;
}

.home-tail__nav-item:hover::before,
.home-tail__nav-item:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.home-tail__nav-item:active,
.home-tail__nav-item.is-active {
  color: #000000;
  opacity: 1;
}

.home-tail__nav-item:active::before,
.home-tail__nav-item.is-active::before {
  opacity: 1;
  background: #000000;
  transform: scaleX(1);
}

.home-tail__nav-cn {
  font-family: "Source Han Sans SC", "Source Han Sans CN", Arial, sans-serif;
  font-size: calc(16 / 1920 * 100vw);
  font-weight: 300;
  line-height: 1;
}

.home-tail__nav-en {
  font-family: "Inter", Arial, sans-serif;
  font-size: calc(17 / 1920 * 100vw);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}

.home-tail__nav-item--home {
  left: calc((1760 - 92) / 1920 * 100%);
  top: calc(168 / 640 * 100%);
}

.home-tail__nav-item--artist {
  left: calc((1760 - 114) / 1920 * 100%);
  top: calc(233 / 640 * 100%);
}

.home-tail__nav-item--craft {
  left: calc((1600 - 52) / 1920 * 100%);
  top: calc(301 / 640 * 100%);
}

.home-tail__nav-item--about {
  left: calc((1600 - 42.73) / 1920 * 100%);
  top: calc(369 / 640 * 100%);
}

.home-tail__nav-item--inquiry {
  left: calc((1600 - 67) / 1920 * 100%);
  top: calc(437 / 640 * 100%);
}

@media (max-width: 767px) {
  .primary-intro-copy--blue .primary-intro-copy__title-cn {
    left: calc(50% - 0.5px);
    top: calc(332 / 884 * 100svh);
    width: calc(51 / 402 * 100vw);
    height: calc(80 / 884 * 100svh);
    font-size: calc(32 / 402 * 100vw);
    line-height: calc(40 / 884 * 100svh);
    letter-spacing: calc(8 / 402 * 100vw);
    white-space: normal;
  }

  .primary-intro-copy--blue .primary-intro-copy__title-en {
    left: calc(50% - 0.5px);
    top: calc(428 / 884 * 100svh);
    width: calc(221 / 402 * 100vw);
    height: calc(24 / 884 * 100svh);
    font-size: calc(24 / 402 * 100vw);
    line-height: calc(24 / 884 * 100svh);
    letter-spacing: calc(2.4 / 402 * 100vw);
  }

  .primary-intro-copy--blue .primary-intro-copy__subtitle-cn {
    left: calc(50% - 1px);
    top: calc(516 / 884 * 100svh);
    width: calc(240 / 402 * 100vw);
    height: calc(16 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(16 / 884 * 100svh);
    letter-spacing: calc(4 / 402 * 100vw);
  }

  .primary-intro-copy--blue .primary-intro-copy__subtitle-en {
    left: calc(50% - 0.5px);
    top: calc(540 / 884 * 100svh);
    width: calc(281 / 402 * 100vw);
    height: calc(12 / 884 * 100svh);
    font-size: calc(12 / 402 * 100vw);
    line-height: calc(12 / 884 * 100svh);
    letter-spacing: calc(0.6 / 402 * 100vw);
  }

  .primary-intro-copy--black .primary-intro-copy__title-cn {
    left: calc(50% - 0.5px);
    top: calc(302 / 884 * 100svh);
    width: calc(53 / 402 * 100vw);
    height: calc(80 / 884 * 100svh);
    font-size: calc(32 / 402 * 100vw);
    line-height: calc(40 / 884 * 100svh);
    letter-spacing: calc(8 / 402 * 100vw);
    white-space: normal;
  }

  .primary-intro-copy--black .primary-intro-copy__title-en {
    left: 50%;
    top: calc(398 / 884 * 100svh);
    width: calc(158 / 402 * 100vw);
    height: calc(16 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(16 / 884 * 100svh);
    letter-spacing: calc(1.6 / 402 * 100vw);
  }

  .primary-intro-copy--black .primary-intro-copy__black-subtitle-cn {
    left: 50%;
    top: calc(478 / 884 * 100svh);
    width: calc(230 / 402 * 100vw);
    height: calc(46 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    letter-spacing: calc(4 / 402 * 100vw);
  }

  .primary-intro-copy--black .primary-intro-copy__black-subtitle-cn p {
    height: calc(24 / 884 * 100svh);
    line-height: calc(24 / 884 * 100svh);
  }

  .primary-intro-copy--black .primary-intro-copy__black-subtitle-en {
    left: calc(50% - 0.5px);
    top: calc(526 / 884 * 100svh);
    width: calc(219 / 402 * 100vw);
    height: calc(57 / 884 * 100svh);
    font-size: calc(12 / 402 * 100vw);
    letter-spacing: calc(0.6 / 402 * 100vw);
  }

  .primary-intro-copy--black .primary-intro-copy__black-subtitle-en p {
    height: calc(19 / 884 * 100svh);
    line-height: calc(19 / 884 * 100svh);
  }

  .primary-intro-copy--red .primary-intro-copy__title-cn {
    left: 50%;
    top: calc(271 / 884 * 100svh);
    width: calc(36 / 402 * 100vw);
    height: calc(160 / 884 * 100svh);
    font-size: calc(32 / 402 * 100vw);
    line-height: calc(40 / 884 * 100svh);
    letter-spacing: calc(8 / 402 * 100vw);
    white-space: normal;
  }

  .primary-intro-copy--red .primary-intro-copy__title-en {
    left: 50%;
    top: calc(447 / 884 * 100svh);
    width: calc(226 / 402 * 100vw);
    height: calc(16 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(16 / 884 * 100svh);
    letter-spacing: calc(1.6 / 402 * 100vw);
  }

  .primary-intro-copy--red .primary-intro-copy__red-subtitle-cn {
    left: calc(50% - 0.5px);
    top: calc(527 / 884 * 100svh);
    width: calc(223 / 402 * 100vw);
    height: calc(47 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    letter-spacing: calc(4 / 402 * 100vw);
  }

  .primary-intro-copy--red .primary-intro-copy__red-subtitle-cn p {
    height: calc(24 / 884 * 100svh);
    line-height: calc(24 / 884 * 100svh);
  }

  .primary-intro-copy--red .primary-intro-copy__red-subtitle-en {
    left: calc(50% - 0.5px);
    top: calc(576 / 884 * 100svh);
    width: calc(239 / 402 * 100vw);
    height: calc(37 / 884 * 100svh);
    font-size: calc(12 / 402 * 100vw);
    letter-spacing: calc(0.6 / 402 * 100vw);
  }

  .primary-intro-copy--red .primary-intro-copy__red-subtitle-en p {
    height: calc(19 / 884 * 100svh);
    line-height: calc(19 / 884 * 100svh);
  }

  .primary-intro-copy--color .primary-intro-copy__title-cn {
    left: calc(50% - 1px);
    top: calc(272 / 884 * 100svh);
    width: calc(34 / 402 * 100vw);
    height: calc(160 / 884 * 100svh);
    font-size: calc(32 / 402 * 100vw);
    line-height: calc(40 / 884 * 100svh);
    letter-spacing: calc(8 / 402 * 100vw);
    white-space: normal;
  }

  .primary-intro-copy--color .primary-intro-copy__title-en {
    left: calc(50% - 0.5px);
    top: calc(448 / 884 * 100svh);
    width: calc(257 / 402 * 100vw);
    height: calc(16 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(16 / 884 * 100svh);
    letter-spacing: calc(1.6 / 402 * 100vw);
  }

  .primary-intro-copy--color .primary-intro-copy__color-subtitle-cn {
    left: 50%;
    top: calc(528 / 884 * 100svh);
    width: calc(232 / 402 * 100vw);
    height: calc(46 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    letter-spacing: calc(4 / 402 * 100vw);
  }

  .primary-intro-copy--color .primary-intro-copy__color-subtitle-cn p {
    height: calc(24 / 884 * 100svh);
    line-height: calc(24 / 884 * 100svh);
  }

  .primary-intro-copy--color .primary-intro-copy__color-subtitle-en {
    left: 50%;
    top: calc(576 / 884 * 100svh);
    width: calc(276 / 402 * 100vw);
    height: calc(37 / 884 * 100svh);
    font-size: calc(12 / 402 * 100vw);
    letter-spacing: calc(0.6 / 402 * 100vw);
  }

  .primary-intro-copy--color .primary-intro-copy__color-subtitle-en p {
    height: calc(19 / 884 * 100svh);
    line-height: calc(19 / 884 * 100svh);
  }

  .primary-intro-copy--gold .primary-intro-copy__title-cn {
    left: calc(50% - 1px);
    top: calc(336 / 884 * 100svh);
    width: calc(34 / 402 * 100vw);
    height: calc(80 / 884 * 100svh);
    font-size: calc(32 / 402 * 100vw);
    line-height: calc(40 / 884 * 100svh);
    letter-spacing: calc(8 / 402 * 100vw);
    white-space: normal;
  }

  .primary-intro-copy--gold .primary-intro-copy__title-en {
    left: calc(50% - 0.5px);
    top: calc(432 / 884 * 100svh);
    width: calc(185 / 402 * 100vw);
    height: calc(18 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(16 / 884 * 100svh);
    letter-spacing: calc(1.6 / 402 * 100vw);
  }

  .primary-intro-copy--gold .primary-intro-copy__gold-subtitle-cn {
    left: calc(50% - 1px);
    top: calc(514 / 884 * 100svh);
    width: calc(154 / 402 * 100vw);
    height: calc(15 / 884 * 100svh);
    font-size: calc(16 / 402 * 100vw);
    line-height: calc(16 / 884 * 100svh);
    letter-spacing: calc(4 / 402 * 100vw);
  }

  .primary-intro-copy--gold .primary-intro-copy__gold-subtitle-en {
    left: calc(50% - 0.5px);
    top: calc(531 / 884 * 100svh);
    width: calc(331 / 402 * 100vw);
    height: calc(17 / 884 * 100svh);
    font-size: calc(12 / 402 * 100vw);
    line-height: calc(19 / 884 * 100svh);
    letter-spacing: calc(0.6 / 402 * 100vw);
  }
}

.chapter-zoom-transition {
  position: fixed;
  z-index: 200;
  inset: 0;
  overflow: hidden;
  background: var(--color-page);
  pointer-events: none;
}

.chapter-zoom-transition__image {
  position: fixed;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  transform: translate3d(0, 0, 0);
  transition:
    left 780ms cubic-bezier(0.74, 0, 0.22, 1),
    top 780ms cubic-bezier(0.74, 0, 0.22, 1),
    width 780ms cubic-bezier(0.74, 0, 0.22, 1),
    height 780ms cubic-bezier(0.74, 0, 0.22, 1);
  will-change: left, top, width, height;
}

body.is-chapter-zooming {
  overflow: hidden;
}

.entry-portal-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  overflow: hidden;
  background: #08101e;
  pointer-events: auto;
  --entry-overlay-image: none;
  --entry-overlay-left: 0px;
  --entry-overlay-top: 0px;
  --entry-overlay-width: 100vw;
  --entry-overlay-height: 100vh;
  --entry-target-left: 0px;
  --entry-target-top: 0px;
  --entry-target-width: 100vw;
  --entry-target-height: 100vh;
  --entry-target-opacity: 0;
  --entry-blackout-opacity: 0;
}

.entry-portal-overlay::before,
.entry-portal-overlay::after {
  content: "";
  position: fixed;
  z-index: 0;
  background-image: var(--entry-overlay-image);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.entry-portal-overlay::before {
  left: var(--entry-overlay-left);
  top: var(--entry-overlay-top);
  z-index: 1;
  width: var(--entry-overlay-width);
  height: var(--entry-overlay-height);
  opacity: 1;
  transition: opacity 220ms ease;
}

.entry-portal-overlay::after {
  left: var(--entry-target-left);
  top: var(--entry-target-top);
  width: var(--entry-target-width);
  height: var(--entry-target-height);
  opacity: var(--entry-target-opacity);
}

.entry-portal-overlay.is-entry-started::before {
  opacity: 0;
}

.entry-portal-start-image {
  position: fixed;
  z-index: 2;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity 160ms linear;
}

.entry-portal-overlay.is-entry-started .entry-portal-start-image {
  opacity: 0;
}

.entry-portal-blackout {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: #000000;
  opacity: var(--entry-blackout-opacity);
  pointer-events: none;
  transition: none;
}

.entry-portal-overlay.is-entry-blackout .entry-portal-blackout {
  opacity: 1;
}

.entry-portal-shell {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  --entry-hotspot-x: 52%;
  --entry-hotspot-y: 38%;
  --entry-zoom: 1;
  --entry-pan-x: 0px;
  --entry-pan-y: 0px;
  --entry-rotate: 0deg;
  --entry-blur: 0px;
  --entry-vignette: 0.34;
  --entry-vignette-clear: 18%;
  --entry-vignette-fade: 34%;
  --entry-shell-opacity: 1;
  --entry-left: 0px;
  --entry-top: 0px;
  --entry-width: 100vw;
  --entry-height: 100vh;
  --entry-transform: matrix(1, 0, 0, 1, 0, 0);
  opacity: var(--entry-shell-opacity);
}

.entry-portal-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(
      circle at var(--entry-hotspot-x) var(--entry-hotspot-y),
      transparent 0 var(--entry-vignette-clear),
      rgb(0 0 0 / 0.15) var(--entry-vignette-fade),
      rgb(0 0 0 / 0.66) 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.34));
  opacity: var(--entry-vignette);
  mix-blend-mode: multiply;
}

.entry-portal-plane {
  position: absolute;
  left: var(--entry-left);
  top: var(--entry-top);
  width: var(--entry-width);
  height: var(--entry-height);
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: var(--entry-transform) rotate(var(--entry-rotate));
  transform-origin: 0 0;
  will-change: transform, opacity, filter;
}

.entry-portal-plane {
  z-index: 1;
  opacity: 0;
  filter: saturate(1.08) contrast(1.04) blur(var(--entry-blur));
}

.entry-portal-blur {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.entry-portal-overlay--mobile {
  background: #000000;
}

.entry-portal-overlay--mobile::before {
  display: none;
}

.detail-main {
  display: grid;
  justify-items: center;
  gap: 48px;
  width: 100%;
  min-height: 100vh;
  padding: 136px var(--grid-margin) 80px;
  background: var(--color-page);
}

.detail-main h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0;
}

.detail-main img {
  display: block;
  width: min(100%, 960px);
  height: auto;
}

.detail-main--ershiyidumu {
  --ershiyidumu-stage-width: max(100vw, calc(100vh * 16 / 9));
  --ershiyidumu-stage-height: calc(var(--ershiyidumu-stage-width) * 9 / 16);
  --ershiyidumu-stage-left: calc((100vw - var(--ershiyidumu-stage-width)) / 2);
  --ershiyidumu-stage-top: calc((100vh - var(--ershiyidumu-stage-height)) / 2);
  --ershiyidumu-panel-04-left: 0px;
  --ershiyidumu-panel-04-top: calc(-765 / 1920 * 100vw);
  --ershiyidumu-panel-04-width: 100vw;
  --panel-04-left: var(--ershiyidumu-panel-04-left);
  --panel-04-top: var(--ershiyidumu-panel-04-top);
  --panel-04-width: var(--ershiyidumu-panel-04-width);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --local-next-delay: 4170ms;
  --local-next-in-duration: 520ms;
  --local-next-breathe-duration: 2500ms;
  --local-line-stagger: 0ms;
  --detail-panel-04-paper-duration: 1000ms;
  --detail-panel-04-intro-wait: 500ms;
  --detail-panel-04-image-delay: calc(var(--detail-panel-04-paper-duration) + var(--detail-panel-04-intro-wait));
  --detail-panel-04-intro-reveal-duration: 2000ms;
  --detail-panel-04-copy-delay: calc(var(--detail-panel-04-image-delay) + var(--detail-panel-04-intro-reveal-duration));
  --detail-panel-04-intro-copy-duration: 2000ms;
  --detail-panel-04-intro-icon-delay: calc(var(--detail-panel-04-copy-delay) + var(--detail-panel-04-intro-copy-duration));
  --detail-panel-04-intro-width: calc(620.361 / 1920 * 100vw);
  --detail-panel-04-intro-left: calc(50vw - (310.1805 / 1920 * 100vw));
  --detail-panel-04-intro-top: calc(50vh - (413.574 / 1920 * 100vw));
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.ershiyidumu-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2723 / 1920 * 100vw) calc(2725 / 1920 * 100vw) at calc(1148 / 1920 * 100vw) calc(418 / 1080 * 100vh),
      rgb(0 0 0 / 0) 0 28%,
      rgb(0 0 0 / 0.16) 42%,
      rgb(0 0 0 / 0.58) 61%,
      rgb(0 0 0 / 0.9) 78%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0.04) 36%, rgb(0 0 0 / 0.35) 68%, rgb(0 0 0 / 0.82) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.74) 0%, rgb(0 0 0 / 0.08) 35%, rgb(0 0 0 / 0.1) 67%, rgb(0 0 0 / 0.74) 100%);
  opacity: 1;
  pointer-events: none;
  transition: background 650ms ease;
}

body.ershiyidumu-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.ershiyidumu-detail-page.is-ershiyidumu-panel-02::after {
  opacity: 0;
}

body.ershiyidumu-detail-page.is-ershiyidumu-panel-04::after {
  opacity: 0;
}

.detail-main--ershiyidumu.is-panel-04::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

.detail-main--ershiyidumu.is-panel-02::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(
      ellipse calc(2250 / 1920 * var(--ershiyidumu-stage-width)) calc(2253 / 1080 * var(--ershiyidumu-stage-height)) at calc(var(--ershiyidumu-stage-left) + 950 / 1920 * var(--ershiyidumu-stage-width)) calc(var(--ershiyidumu-stage-top) + 547.5 / 1080 * var(--ershiyidumu-stage-height)),
      rgb(0 0 0 / 0) 0 22%,
      rgb(0 0 0 / 0.16) 36%,
      rgb(0 0 0 / 0.58) 56%,
      rgb(0 0 0 / 0.9) 76%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0.04) 40%, rgb(0 0 0 / 0.38) 70%, rgb(0 0 0 / 0.82) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.46) 0%, rgb(0 0 0 / 0.08) 18%, rgb(0 0 0 / 0.16) 46%, rgb(0 0 0 / 0.72) 68%, rgb(0 0 0 / 0.98) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / 0.42) 78%, rgb(0 0 0 / 0.86) 100%);
  pointer-events: none;
}

.detail-main--ershiyidumu.is-panel-02-leaving::after {
  animation: ershiyidumu-spotlight-out 1200ms linear forwards;
}

.detail-main--ershiyidumu.is-panel-01-leaving:not(.is-panel-04)::before,
.detail-main--ershiyidumu.is-panel-02-entering:not(.is-panel-04)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  pointer-events: none;
}

.detail-main--ershiyidumu.is-panel-01-leaving:not(.is-panel-04)::before {
  animation: ershiyidumu-black-in 1800ms linear forwards;
}

.detail-main--ershiyidumu.is-panel-02-entering:not(.is-panel-04)::before {
  animation: ershiyidumu-black-out 2200ms linear forwards 260ms;
}

body.is-entry-portal-handoff .detail-main--ershiyidumu .ershiyidumu-panel-image {
  transition: none;
}

.detail-main--ershiyidumu .ershiyidumu-panel-image {
  position: absolute;
  left: calc(-27 / 1920 * 100vw);
  top: calc(-1274 / 1920 * 100vw);
  width: calc(2460 / 1920 * 100vw);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transition:
    opacity 2300ms ease,
    transform 1800ms linear,
    visibility 220ms ease;
}

.detail-main--ershiyidumu.is-panel-01-leaving .ershiyidumu-panel-image {
  opacity: 0;
  transform: translate3d(0, -14vh, 0);
}

.detail-main--ershiyidumu.is-panel-01-leaving .ershiyidumu-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms linear,
    visibility 420ms linear;
}

.ershiyidumu-panel-01-copy {
  position: absolute;
  left: calc(339 / 1920 * 100vw);
  top: calc(325 / 1080 * 100vh);
  z-index: 4;
  width: calc(294 / 1920 * 100vw);
  color: #ffffff;
  text-align: center;
  transform: translateX(-50%);
}

.detail-main--ershiyidumu.is-panel-02 .ershiyidumu-panel-01-copy {
  opacity: 0;
  visibility: hidden;
}

.ershiyidumu-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(1800ms + var(--line-index) * 90ms);
}

.ershiyidumu-panel-01-copy__cn {
  width: calc(294 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  line-height: calc(36 / 1080 * 100vh);
  letter-spacing: calc(6 / 1920 * 100vw);
  white-space: nowrap;
}

.ershiyidumu-panel-01-copy__en {
  width: calc(278 / 1920 * 100vw);
  margin: calc(5 / 1080 * 100vh) auto 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 / 1080 * 100vh);
}

.ershiyidumu-panel-01-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.ershiyidumu-panel-02-copy {
  position: absolute;
  left: calc(var(--ershiyidumu-stage-left) + 1567 / 1920 * var(--ershiyidumu-stage-width));
  top: calc(var(--ershiyidumu-stage-top) + 555 / 1080 * var(--ershiyidumu-stage-height));
  z-index: 4;
  width: calc(387 / 1920 * var(--ershiyidumu-stage-width));
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
}

.detail-main--ershiyidumu.is-panel-02-copy-ready .ershiyidumu-panel-02-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--ershiyidumu.is-panel-02-entering .ershiyidumu-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--ershiyidumu.is-panel-02-leaving .ershiyidumu-panel-02-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.ershiyidumu-panel-02-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--ershiyidumu.is-panel-02-copy-ready .ershiyidumu-panel-02-copy span {
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(560ms + var(--line-index) * 90ms);
}

.ershiyidumu-panel-02-copy__cn {
  width: calc(314 / 1920 * var(--ershiyidumu-stage-width));
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * var(--ershiyidumu-stage-width));
  font-weight: 400;
  line-height: calc(36 / 1080 * var(--ershiyidumu-stage-height));
  letter-spacing: calc(6 / 1920 * var(--ershiyidumu-stage-width));
  white-space: nowrap;
}

.ershiyidumu-panel-02-copy__en {
  width: calc(387 / 1920 * var(--ershiyidumu-stage-width));
  margin: calc(2 / 1080 * var(--ershiyidumu-stage-height)) auto 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * var(--ershiyidumu-stage-width));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 / 1080 * var(--ershiyidumu-stage-height));
}

.ershiyidumu-panel-02-copy__next {
  position: relative;
  z-index: 20;
  margin: calc(32 / 1080 * var(--ershiyidumu-stage-height)) auto 0;
  visibility: hidden;
  pointer-events: none;
}

.detail-main--ershiyidumu.is-panel-02-copy-ready .ershiyidumu-panel-02-copy__next {
  visibility: visible;
  pointer-events: auto;
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 2400ms;
}

.detail-main--ershiyidumu .ershiyidumu-panel-02-image {
  position: absolute;
  left: calc(var(--ershiyidumu-stage-left) + -33 / 1920 * var(--ershiyidumu-stage-width));
  top: calc(var(--ershiyidumu-stage-top) + -1865 / 1920 * var(--ershiyidumu-stage-width));
  width: calc(3687 / 1920 * var(--ershiyidumu-stage-width));
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width, opacity;
}

.detail-main--ershiyidumu.is-panel-02 .ershiyidumu-panel-image {
  opacity: 0;
  visibility: hidden;
}

.detail-main--ershiyidumu.is-panel-02 .ershiyidumu-panel-02-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--ershiyidumu.is-panel-02-entering .ershiyidumu-panel-02-image {
  animation: ershiyidumu-panel-02-image-in 5000ms cubic-bezier(0.18, 0.84, 0.28, 1) forwards;
  transform-origin: center center;
}

.detail-main--ershiyidumu.is-panel-02-leaving .ershiyidumu-panel-02-image {
  animation: ershiyidumu-panel-02-image-out 3000ms ease-in forwards;
  transform-origin: center center;
}

.detail-main--ershiyidumu.is-panel-04 .ershiyidumu-panel-image,
.detail-main--ershiyidumu.is-panel-04 .ershiyidumu-panel-02-image,
.detail-main--ershiyidumu.is-panel-04 .ershiyidumu-panel-01-copy,
.detail-main--ershiyidumu.is-panel-04 .ershiyidumu-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--ershiyidumu .ershiyidumu-detail-image {
  position: absolute;
  left: var(--ershiyidumu-panel-04-left);
  top: var(--ershiyidumu-panel-04-top);
  z-index: 1;
  width: var(--ershiyidumu-panel-04-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width;
}

.detail-main--ershiyidumu.is-panel-04 .ershiyidumu-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--ershiyidumu.is-panel-04.is-dragging .ershiyidumu-detail-image {
  cursor: grabbing;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .ershiyidumu-detail-image {
  transition: none;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-revealing .ershiyidumu-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms linear forwards;
  transform-origin: 50% 50%;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-intro .ershiyidumu-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.ershiyidumu-panel-04-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.ershiyidumu-panel-04-intro__prompt--en {
  left: calc(1551.8 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

.detail-main--ershiyidumu .ershiyidumu-panel-return {
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--ershiyidumu.is-panel-02 .ershiyidumu-panel-return {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.detail-main--huangcaishen {
  --huangcaishen-panel-04-left: 0px;
  --huangcaishen-panel-04-top: calc(-636 / 1920 * 100vw);
  --huangcaishen-panel-04-width: 100vw;
  --panel-04-left: var(--huangcaishen-panel-04-left);
  --panel-04-top: var(--huangcaishen-panel-04-top);
  --panel-04-width: var(--huangcaishen-panel-04-width);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --local-next-delay: 4170ms;
  --local-next-in-duration: 520ms;
  --local-next-breathe-duration: 2500ms;
  --local-line-stagger: 0ms;
  --detail-panel-04-paper-duration: 1000ms;
  --detail-panel-04-intro-wait: 500ms;
  --detail-panel-04-image-delay: calc(var(--detail-panel-04-paper-duration) + var(--detail-panel-04-intro-wait));
  --detail-panel-04-intro-reveal-duration: 2000ms;
  --detail-panel-04-copy-delay: calc(var(--detail-panel-04-image-delay) + var(--detail-panel-04-intro-reveal-duration));
  --detail-panel-04-intro-copy-duration: 2000ms;
  --detail-panel-04-intro-icon-delay: calc(var(--detail-panel-04-copy-delay) + var(--detail-panel-04-intro-copy-duration));
  --detail-panel-04-intro-width: calc(620.361 / 1920 * 100vw);
  --detail-panel-04-intro-left: calc(50vw - (310.1805 / 1920 * 100vw));
  --detail-panel-04-intro-top: calc(50vh - (413.574 / 1920 * 100vw));
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.huangcaishen-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    linear-gradient(90deg, rgb(0 0 0 / 0.98) 0%, rgb(0 0 0 / 0.88) 12%, rgb(0 0 0 / 0.58) 25%, rgb(0 0 0 / 0.18) 43%, rgb(0 0 0 / 0) 58%),
    radial-gradient(
      ellipse calc(2395 / 1920 * 100vw) calc(2397 / 1920 * 100vw) at calc(1031.5 / 1920 * 100vw) calc(507.5 / 1080 * 100vh),
      rgb(0 0 0 / 0) 0 24%,
      rgb(0 0 0 / 0.18) 39%,
      rgb(0 0 0 / 0.6) 60%,
      rgb(0 0 0 / 0.92) 78%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0.04) 38%, rgb(0 0 0 / 0.42) 70%, rgb(0 0 0 / 0.84) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.86) 0%, rgb(0 0 0 / 0.24) 34%, rgb(0 0 0 / 0.12) 62%, rgb(0 0 0 / 0.84) 100%);
  pointer-events: none;
}

body.huangcaishen-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.huangcaishen-detail-page.is-huangcaishen-panel-02::after {
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2250 / 1920 * 100vw) calc(2253 / 1080 * 100vh) at calc(1034 / 1920 * 100vw) calc(508.5 / 1080 * 100vh),
      rgb(0 0 0 / 0) 0 22%,
      rgb(0 0 0 / 0.16) 36%,
      rgb(0 0 0 / 0.58) 56%,
      rgb(0 0 0 / 0.9) 76%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0.04) 40%, rgb(0 0 0 / 0.38) 70%, rgb(0 0 0 / 0.82) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0.06) 35%, rgb(0 0 0 / 0.28) 66%, rgb(0 0 0 / 0.88) 100%);
}

body.huangcaishen-detail-page.is-huangcaishen-panel-02-leaving::after {
  animation: huangcaishen-spotlight-out 3000ms linear forwards;
}

body.huangcaishen-detail-page.is-huangcaishen-panel-04::after {
  opacity: 0;
}

.detail-main--huangcaishen.is-panel-04::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

.detail-main--huangcaishen.is-panel-01-leaving:not(.is-panel-04)::before,
.detail-main--huangcaishen.is-panel-02-entering:not(.is-panel-04)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  pointer-events: none;
}

.detail-main--huangcaishen.is-panel-01-leaving:not(.is-panel-04)::before {
  animation: huangcaishen-black-in 3000ms linear forwards;
}

.detail-main--huangcaishen.is-panel-02-entering:not(.is-panel-04)::before {
  animation: huangcaishen-black-out 2200ms linear forwards 260ms;
}

body.is-entry-portal-handoff .detail-main--huangcaishen .huangcaishen-panel-image {
  transition: none;
}

body.is-entry-portal-handoff .detail-main--sibiguanyin .sibiguanyin-panel-image,
body.is-entry-portal-handoff .detail-main--matoumingwang .matoumingwang-panel-image,
body.is-entry-portal-handoff .detail-main--qianshouguanyin .qianshouguanyin-panel-image,
body.is-entry-portal-handoff .detail-main--jintang .jintang-panel-image,
body.is-entry-portal-handoff .detail-main--ludumu .ludumu-panel-image {
  transition: none;
}

.detail-main--huangcaishen .huangcaishen-panel-image {
  position: absolute;
  left: calc(-406 / 1920 * 100vw);
  top: calc(-993 / 1920 * 100vw);
  width: calc(3087 / 1920 * 100vw);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transition:
    opacity 1800ms ease,
    transform 1800ms cubic-bezier(0.18, 0.84, 0.28, 1),
    visibility 220ms ease;
  transform-origin: 45% 42%;
}

.detail-main--huangcaishen.is-panel-01-leaving .huangcaishen-panel-image {
  animation: huangcaishen-panel-01-image-out 3000ms cubic-bezier(0.18, 0.84, 0.28, 1) both;
}

.detail-main--huangcaishen.is-panel-01-leaving .huangcaishen-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms linear,
    visibility 420ms linear;
}

.huangcaishen-panel-01-copy {
  position: absolute;
  left: calc(350 / 1920 * 100vw);
  top: calc(357 / 1080 * 100vh);
  z-index: 4;
  width: calc(360 / 1920 * 100vw);
  color: #ffffff;
  text-align: center;
  transform: translateX(-50%);
}

.detail-main--huangcaishen.is-panel-02 .huangcaishen-panel-01-copy {
  opacity: 0;
  visibility: hidden;
}

.huangcaishen-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(1800ms + var(--line-index) * 90ms);
}

.huangcaishen-panel-01-copy__cn {
  width: calc(294 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  line-height: calc(36 / 1080 * 100vh);
  letter-spacing: calc(6 / 1920 * 100vw);
  white-space: nowrap;
}

.huangcaishen-panel-01-copy__en {
  width: calc(360 / 1920 * 100vw);
  margin: calc(5 / 1080 * 100vh) auto 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 / 1080 * 100vh);
  overflow: visible;
}

.huangcaishen-panel-01-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.detail-main--huangcaishen .huangcaishen-panel-02-image {
  position: absolute;
  left: calc(-2150 / 1920 * 100vw);
  top: calc(-2553 / 1920 * 100vw);
  width: calc(4570 / 1920 * 100vw);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--huangcaishen.is-panel-02 .huangcaishen-panel-image {
  opacity: 0;
  visibility: hidden;
}

.detail-main--huangcaishen.is-panel-02 .huangcaishen-panel-02-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--huangcaishen.is-panel-02-entering .huangcaishen-panel-02-image {
  opacity: 0;
  transform: scale(3);
  animation: huangcaishen-panel-02-image-in 5000ms cubic-bezier(0.18, 0.84, 0.28, 1) both;
  transform-origin: 45% 42%;
}

.detail-main--huangcaishen.is-panel-02-leaving .huangcaishen-panel-02-image {
  animation: huangcaishen-panel-02-image-out 3000ms ease-in both;
  transform-origin: 45% 42%;
}

.detail-main--huangcaishen.is-panel-04 .huangcaishen-panel-image,
.detail-main--huangcaishen.is-panel-04 .huangcaishen-panel-02-image,
.detail-main--huangcaishen.is-panel-04 .huangcaishen-panel-01-copy,
.detail-main--huangcaishen.is-panel-04 .huangcaishen-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--huangcaishen .huangcaishen-detail-image {
  position: absolute;
  left: var(--huangcaishen-panel-04-left);
  top: var(--huangcaishen-panel-04-top);
  z-index: 1;
  width: var(--huangcaishen-panel-04-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width;
}

.detail-main--huangcaishen.is-panel-04 .huangcaishen-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--huangcaishen.is-panel-04.is-dragging .huangcaishen-detail-image {
  cursor: grabbing;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .huangcaishen-detail-image {
  transition: none;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-revealing .huangcaishen-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms linear forwards;
  transform-origin: 50% 50%;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-intro .huangcaishen-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.huangcaishen-panel-04-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.huangcaishen-panel-04-intro__prompt--en {
  left: calc(1551.8 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

.huangcaishen-panel-02-copy {
  position: absolute;
  left: calc((75 / 100 * 100vw) + (159 / 1920 * 100vw));
  top: calc(676 / 1080 * 100vh);
  z-index: 4;
  width: calc(460 / 1920 * 100vw);
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
}

.detail-main--huangcaishen.is-panel-02-copy-ready .huangcaishen-panel-02-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--huangcaishen.is-panel-02-entering .huangcaishen-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--huangcaishen.is-panel-02-leaving .huangcaishen-panel-02-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.huangcaishen-panel-02-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--huangcaishen.is-panel-02-copy-ready .huangcaishen-panel-02-copy span {
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(560ms + var(--line-index) * 90ms);
}

.huangcaishen-panel-02-copy__cn {
  width: calc(294 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  line-height: calc(36 / 1080 * 100vh);
  letter-spacing: calc(6 / 1920 * 100vw);
  white-space: nowrap;
}

.huangcaishen-panel-02-copy__en {
  width: calc(460 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 / 1080 * 100vh);
  overflow: visible;
}

.huangcaishen-panel-02-copy__next {
  margin: calc(32 / 1080 * 100vh) auto 0;
  pointer-events: none;
}

.detail-main--huangcaishen.is-panel-02-copy-ready .huangcaishen-panel-02-copy__next {
  pointer-events: auto;
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 1100ms;
}

.detail-main--huangcaishen .huangcaishen-panel-return {
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--huangcaishen.is-panel-02 .huangcaishen-panel-return {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.detail-main--sibiguanyin {
  --sibiguanyin-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  --sibiguanyin-stage-left: calc((100vw - 1920 * var(--sibiguanyin-scale)) / 2);
  --sibiguanyin-stage-top: calc((100vh - 1080 * var(--sibiguanyin-scale)) / 2);
  --sibiguanyin-panel-04-left: calc(var(--sibiguanyin-stage-left) + -1 * var(--sibiguanyin-scale));
  --sibiguanyin-panel-04-top: calc(var(--sibiguanyin-stage-top) + -480 * var(--sibiguanyin-scale));
  --sibiguanyin-panel-04-width: calc(1921 * var(--sibiguanyin-scale));
  --panel-04-left: var(--sibiguanyin-panel-04-left);
  --panel-04-top: var(--sibiguanyin-panel-04-top);
  --panel-04-width: var(--sibiguanyin-panel-04-width);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --local-next-delay: 4170ms;
  --local-next-in-duration: 520ms;
  --local-next-breathe-duration: 2500ms;
  --local-line-stagger: 0ms;
  --detail-panel-04-paper-duration: 1000ms;
  --detail-panel-04-intro-wait: 500ms;
  --detail-panel-04-image-delay: calc(var(--detail-panel-04-paper-duration) + var(--detail-panel-04-intro-wait));
  --detail-panel-04-intro-reveal-duration: 2000ms;
  --detail-panel-04-copy-delay: calc(var(--detail-panel-04-image-delay) + var(--detail-panel-04-intro-reveal-duration));
  --detail-panel-04-intro-copy-duration: 2000ms;
  --detail-panel-04-intro-icon-delay: calc(var(--detail-panel-04-copy-delay) + var(--detail-panel-04-intro-copy-duration));
  --detail-panel-04-intro-width: calc(620.361 / 1920 * 100vw);
  --detail-panel-04-intro-left: calc(50vw - (310.1805 / 1920 * 100vw));
  --detail-panel-04-intro-top: calc(50vh - (413.574 / 1920 * 100vw));
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.sibiguanyin-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2395 / 1920 * 100vw) calc(2397 / 1920 * 100vw) at calc(960 / 1920 * 100vw) calc(528 / 1080 * 100vh),
      rgb(0 0 0 / 0) 0 25%,
      rgb(0 0 0 / 0.18) 42%,
      rgb(0 0 0 / 0.68) 63%,
      rgb(0 0 0 / 0.96) 82%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.56) 76%, rgb(0 0 0 / 0.92) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0) 34%, rgb(0 0 0 / 0) 58%, rgb(0 0 0 / 0.92) 100%);
  pointer-events: none;
}

body.sibiguanyin-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.sibiguanyin-detail-page.is-sibiguanyin-panel-01-leaving::after {
  animation: sibiguanyin-spotlight-out 3000ms linear forwards;
}

body.sibiguanyin-detail-page.is-sibiguanyin-panel-04::after {
  opacity: 0;
}

.detail-main--sibiguanyin.is-panel-04::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

.detail-main--sibiguanyin .sibiguanyin-panel-image {
  position: absolute;
  left: calc(var(--sibiguanyin-stage-left) + -790 * var(--sibiguanyin-scale));
  top: calc(var(--sibiguanyin-stage-top) + -900 * var(--sibiguanyin-scale));
  width: calc(3500 * var(--sibiguanyin-scale));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.detail-main--sibiguanyin.is-panel-01-leaving .sibiguanyin-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.detail-main--sibiguanyin.is-panel-01-leaving .sibiguanyin-panel-image {
  animation: sibiguanyin-panel-01-image-out 3000ms linear both;
  transform-origin: 50% 46%;
}

.detail-main--sibiguanyin.is-panel-04 .sibiguanyin-panel-image,
.detail-main--sibiguanyin.is-panel-04 .sibiguanyin-panel-01-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--sibiguanyin .sibiguanyin-detail-image {
  position: absolute;
  left: var(--sibiguanyin-panel-04-left);
  top: var(--sibiguanyin-panel-04-top);
  z-index: 1;
  width: var(--sibiguanyin-panel-04-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width;
}

.detail-main--sibiguanyin.is-panel-04 .sibiguanyin-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--sibiguanyin.is-panel-04.is-dragging .sibiguanyin-detail-image {
  cursor: grabbing;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .sibiguanyin-detail-image {
  transition: none;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-revealing .sibiguanyin-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms linear forwards;
  transform-origin: 50% 50%;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-intro .sibiguanyin-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.sibiguanyin-panel-04-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.sibiguanyin-panel-04-intro__prompt--en {
  left: calc(1551.8 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

.sibiguanyin-panel-01-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  transform: none;
  pointer-events: none;
}

.sibiguanyin-panel-01-copy span {
  display: block;
  padding-inline: calc(12 * var(--sibiguanyin-scale));
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(1800ms + var(--line-index) * 90ms);
}

.sibiguanyin-panel-01-copy__cn {
  position: absolute;
  left: calc(var(--sibiguanyin-stage-left) + 1555 * var(--sibiguanyin-scale));
  top: calc(var(--sibiguanyin-stage-top) + 624 * var(--sibiguanyin-scale));
  width: calc(330 * var(--sibiguanyin-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--sibiguanyin-scale));
  font-weight: 400;
  line-height: calc(36 * var(--sibiguanyin-scale));
  letter-spacing: calc(6 * var(--sibiguanyin-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.sibiguanyin-panel-01-copy__en {
  position: absolute;
  left: calc(var(--sibiguanyin-stage-left) + 1555 * var(--sibiguanyin-scale));
  top: calc(var(--sibiguanyin-stage-top) + 767 * var(--sibiguanyin-scale));
  width: calc(500 * var(--sibiguanyin-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--sibiguanyin-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--sibiguanyin-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.detail-main--sibiguanyin .sibiguanyin-panel-01-copy__next {
  position: absolute;
  left: calc(var(--sibiguanyin-stage-left) + 1535 * var(--sibiguanyin-scale));
  top: calc(var(--sibiguanyin-stage-top) + 920 * var(--sibiguanyin-scale));
  margin: 0;
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.detail-main--sibiguanyin .sibiguanyin-panel-return {
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
}

body.matoumingwang-detail-page,
body.matoumingwang-detail-page,
.detail-main--matoumingwang {
  --matoumingwang-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  --matoumingwang-stage-left: calc((100vw - 1920 * var(--matoumingwang-scale)) / 2);
  --matoumingwang-stage-top: calc((100vh - 1080 * var(--matoumingwang-scale)) / 2);
  --matoumingwang-panel-04-left: calc(var(--matoumingwang-stage-left) + 0 * var(--matoumingwang-scale));
  --matoumingwang-panel-04-top: calc(var(--matoumingwang-stage-top) + -514 * var(--matoumingwang-scale));
  --matoumingwang-panel-04-width: calc(1919 * var(--matoumingwang-scale));
  --panel-04-left: var(--matoumingwang-panel-04-left);
  --panel-04-top: var(--matoumingwang-panel-04-top);
  --panel-04-width: var(--matoumingwang-panel-04-width);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --local-next-delay: 4170ms;
  --local-next-in-duration: 520ms;
  --local-next-breathe-duration: 2500ms;
  --local-line-stagger: 0ms;
  --detail-panel-04-paper-duration: 1000ms;
  --detail-panel-04-intro-wait: 500ms;
  --detail-panel-04-image-delay: calc(var(--detail-panel-04-paper-duration) + var(--detail-panel-04-intro-wait));
  --detail-panel-04-intro-reveal-duration: 2000ms;
  --detail-panel-04-copy-delay: calc(var(--detail-panel-04-image-delay) + var(--detail-panel-04-intro-reveal-duration));
  --detail-panel-04-intro-copy-duration: 2000ms;
  --detail-panel-04-intro-icon-delay: calc(var(--detail-panel-04-copy-delay) + var(--detail-panel-04-intro-copy-duration));
  --detail-panel-04-intro-width: calc(620.361 / 1920 * 100vw);
  --detail-panel-04-intro-left: calc(50vw - (310.1805 / 1920 * 100vw));
  --detail-panel-04-intro-top: calc(50vh - (413.574 / 1920 * 100vw));
}

.detail-main--matoumingwang {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.matoumingwang-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2237 * var(--matoumingwang-scale)) calc(2239 * var(--matoumingwang-scale)) at calc(var(--matoumingwang-stage-left) + 974.5 * var(--matoumingwang-scale)) calc(var(--matoumingwang-stage-top) + 539.5 * var(--matoumingwang-scale)),
      rgb(0 0 0 / 0) 0 24%,
      rgb(0 0 0 / 0.18) 39%,
      rgb(0 0 0 / 0.6) 60%,
      rgb(0 0 0 / 0.92) 78%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / 0.56) 70%, rgb(0 0 0 / 0.92) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 58%, rgb(0 0 0 / 0.92) 100%);
  pointer-events: none;
  will-change: opacity;
  contain: paint;
}

body.matoumingwang-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.matoumingwang-detail-page.is-matoumingwang-panel-02::after {
  background:
    radial-gradient(
      ellipse calc(2287 * var(--matoumingwang-scale)) calc(2289 * var(--matoumingwang-scale)) at calc(var(--matoumingwang-stage-left) + 964.5 * var(--matoumingwang-scale)) calc(var(--matoumingwang-stage-top) + 551.5 * var(--matoumingwang-scale)),
      rgb(0 0 0 / 0) 0 24%,
      rgb(0 0 0 / 0.18) 39%,
      rgb(0 0 0 / 0.6) 60%,
      rgb(0 0 0 / 0.92) 78%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / 0.56) 70%, rgb(0 0 0 / 0.92) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0) 32%, rgb(0 0 0 / 0) 58%, rgb(0 0 0 / 0.92) 100%);
}

body.matoumingwang-detail-page.is-matoumingwang-panel-02-leaving::after {
  animation: matoumingwang-spotlight-out 3000ms linear both;
}

body.matoumingwang-detail-page.is-matoumingwang-panel-04::after {
  opacity: 0;
}

.detail-main--matoumingwang.is-panel-04::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

.detail-main--matoumingwang.is-panel-01-leaving::before,
.detail-main--matoumingwang.is-panel-02-entering::before,
.detail-main--matoumingwang.is-panel-02-leaving:not(.is-panel-04)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  pointer-events: none;
  will-change: opacity;
  contain: paint;
}

.detail-main--matoumingwang.is-panel-01-leaving::before {
  animation: matoumingwang-black-in 3000ms linear both;
}

.detail-main--matoumingwang.is-panel-02-entering::before {
  animation: matoumingwang-black-out 3000ms linear both;
}

.detail-main--matoumingwang.is-panel-02-leaving::before {
  animation: matoumingwang-black-in 3000ms linear both;
}

.detail-main--matoumingwang .matoumingwang-panel-image {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + -509 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + -963 * var(--matoumingwang-scale));
  width: calc(3228 * var(--matoumingwang-scale));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: opacity, transform;
}

.detail-main--matoumingwang.is-panel-01-leaving .matoumingwang-panel-image {
  animation: matoumingwang-panel-01-image-out 3000ms linear both;
  transform-origin: 58% 38%;
  transition: none;
}

.detail-main--matoumingwang.is-panel-01-leaving .matoumingwang-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.matoumingwang-panel-01-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  transform: none;
  pointer-events: none;
}

.matoumingwang-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(1800ms + var(--line-index) * 90ms);
}

.matoumingwang-panel-01-copy__cn {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + 307 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + 594 * var(--matoumingwang-scale));
  width: calc(294 * var(--matoumingwang-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--matoumingwang-scale));
  font-weight: 400;
  line-height: calc(36 * var(--matoumingwang-scale));
  letter-spacing: calc(6 * var(--matoumingwang-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.matoumingwang-panel-01-copy__en {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + 307.5 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + 737 * var(--matoumingwang-scale));
  width: calc(293 * var(--matoumingwang-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--matoumingwang-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--matoumingwang-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.detail-main--matoumingwang .matoumingwang-panel-01-copy__next {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + 287 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + 920 * var(--matoumingwang-scale));
  margin: 0;
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.detail-main--matoumingwang .matoumingwang-panel-02-image {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + -994 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + -593 * var(--matoumingwang-scale));
  width: calc(3244 * var(--matoumingwang-scale));
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: opacity, transform;
}

.detail-main--matoumingwang.is-panel-02-leaving .matoumingwang-panel-02-image {
  animation: matoumingwang-panel-02-image-out 3000ms linear both;
  transform-origin: 50% 50%;
  transition: none;
}

.matoumingwang-panel-02-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
}

.detail-main--matoumingwang.is-panel-02-copy-ready .matoumingwang-panel-02-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--matoumingwang.is-panel-02-entering .matoumingwang-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--matoumingwang.is-panel-02-leaving .matoumingwang-panel-02-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.matoumingwang-panel-02-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--matoumingwang.is-panel-02-copy-ready .matoumingwang-panel-02-copy span {
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(560ms + var(--line-index) * 90ms);
}

.matoumingwang-panel-02-copy__cn {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + 1567 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + 354 * var(--matoumingwang-scale));
  width: calc(294 * var(--matoumingwang-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--matoumingwang-scale));
  font-weight: 400;
  line-height: calc(36 * var(--matoumingwang-scale));
  letter-spacing: calc(6 * var(--matoumingwang-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.matoumingwang-panel-02-copy__en {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + 1567.5 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + 534 * var(--matoumingwang-scale));
  width: calc(293 * var(--matoumingwang-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--matoumingwang-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--matoumingwang-scale));
  transform: translateX(-50%);
}

.detail-main--matoumingwang .matoumingwang-panel-02-copy__next {
  position: absolute;
  left: calc(var(--matoumingwang-stage-left) + 1547 * var(--matoumingwang-scale));
  top: calc(var(--matoumingwang-stage-top) + 687 * var(--matoumingwang-scale));
  margin: 0;
  cursor: default;
  pointer-events: none;
}

.detail-main--matoumingwang.is-panel-02-copy-ready .matoumingwang-panel-02-copy__next {
  cursor: pointer;
  pointer-events: auto;
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 1700ms;
}

.detail-main--matoumingwang.is-panel-02 .matoumingwang-panel-image,
.detail-main--matoumingwang.is-panel-02 .matoumingwang-panel-01-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--matoumingwang.is-panel-02 .matoumingwang-panel-02-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--matoumingwang.is-panel-02-entering .matoumingwang-panel-02-image {
  opacity: 0;
  transform: scale(3);
  animation: matoumingwang-panel-02-image-in 3000ms cubic-bezier(0.18, 0.84, 0.28, 1) both;
  transform-origin: 50% 50%;
  transition: none;
}

.detail-main--matoumingwang.is-panel-04 .matoumingwang-panel-image,
.detail-main--matoumingwang.is-panel-04 .matoumingwang-panel-02-image,
.detail-main--matoumingwang.is-panel-04 .matoumingwang-panel-01-copy,
.detail-main--matoumingwang.is-panel-04 .matoumingwang-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--matoumingwang .matoumingwang-detail-image {
  position: absolute;
  left: var(--matoumingwang-panel-04-left);
  top: var(--matoumingwang-panel-04-top);
  z-index: 1;
  width: var(--matoumingwang-panel-04-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width;
}

.detail-main--matoumingwang.is-panel-04 .matoumingwang-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--matoumingwang.is-panel-04.is-dragging .matoumingwang-detail-image {
  cursor: grabbing;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .matoumingwang-detail-image {
  transition: none;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-revealing .matoumingwang-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms linear forwards;
  transform-origin: 50% 50%;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-intro .matoumingwang-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.matoumingwang-panel-04-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.matoumingwang-panel-04-intro__prompt--en {
  left: calc(1551.8 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

.detail-main--matoumingwang .matoumingwang-panel-return {
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--matoumingwang.is-panel-02 .matoumingwang-panel-return {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

body.qianshouguanyin-detail-page,
.detail-main--qianshouguanyin {
  --qianshouguanyin-scale: calc(100vw / 1920);
  --qianshouguanyin-stage-left: 0px;
  --qianshouguanyin-stage-top: 0px;
  --qianshouguanyin-panel-03-left: var(--qianshouguanyin-stage-left);
  --qianshouguanyin-panel-03-top: calc(var(--qianshouguanyin-stage-top) + -511 * var(--qianshouguanyin-scale));
  --qianshouguanyin-panel-03-width: calc(1920 * var(--qianshouguanyin-scale));
  --panel-04-left: var(--qianshouguanyin-panel-03-left);
  --panel-04-top: var(--qianshouguanyin-panel-03-top);
  --panel-04-width: var(--qianshouguanyin-panel-03-width);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --local-next-delay: 4170ms;
  --local-next-in-duration: 520ms;
  --local-next-breathe-duration: 2500ms;
  --local-line-stagger: 0ms;
  --detail-panel-04-paper-duration: 1000ms;
  --detail-panel-04-intro-wait: 500ms;
  --detail-panel-04-image-delay: calc(var(--detail-panel-04-paper-duration) + var(--detail-panel-04-intro-wait));
  --detail-panel-04-intro-reveal-duration: 2000ms;
  --detail-panel-04-copy-delay: calc(var(--detail-panel-04-image-delay) + var(--detail-panel-04-intro-reveal-duration));
  --detail-panel-04-intro-copy-duration: 2000ms;
  --detail-panel-04-intro-icon-delay: calc(var(--detail-panel-04-copy-delay) + var(--detail-panel-04-intro-copy-duration));
  --detail-panel-04-intro-width: calc(620.361 / 1920 * 100vw);
  --detail-panel-04-intro-left: calc(50vw - (310.1805 / 1920 * 100vw));
  --detail-panel-04-intro-top: calc(50vh - (413.574 / 1920 * 100vw));
}

.detail-main--qianshouguanyin {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.qianshouguanyin-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2189 * var(--qianshouguanyin-scale)) calc(2191 * var(--qianshouguanyin-scale)) at calc(var(--qianshouguanyin-stage-left) + 959.5 * var(--qianshouguanyin-scale)) calc(var(--qianshouguanyin-stage-top) + 539.5 * var(--qianshouguanyin-scale)),
      rgb(0 0 0 / 0) 0 42%,
      rgb(0 0 0 / 0) 52%,
      rgb(0 0 0 / 0.68) 72%,
      rgb(0 0 0 / 0.96) 88%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.52) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.48) 78%, rgb(0 0 0 / 0.96) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.96) 0%, rgb(0 0 0 / 0.48) 24%, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.48) 78%, rgb(0 0 0 / 0.96) 100%);
  pointer-events: none;
}

body.qianshouguanyin-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.qianshouguanyin-detail-page.is-qianshouguanyin-panel-01-leaving::after {
  animation: qianshouguanyin-spotlight-out 3000ms linear both;
}

body.qianshouguanyin-detail-page.is-qianshouguanyin-panel-02::after {
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(3148 * var(--qianshouguanyin-scale)) calc(3151 * var(--qianshouguanyin-scale)) at calc(var(--qianshouguanyin-stage-left) + 1394 * var(--qianshouguanyin-scale)) calc(var(--qianshouguanyin-stage-top) + 539.5 * var(--qianshouguanyin-scale)),
      rgb(0 0 0 / 0) 0 42%,
      rgb(0 0 0 / 0) 50%,
      rgb(0 0 0 / 0.5) 70%,
      rgb(0 0 0 / 0.9) 86%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.38) 78%, rgb(0 0 0 / 0.92) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.96) 0%, rgb(0 0 0 / 0.78) 16%, rgb(0 0 0 / 0.34) 32%, rgb(0 0 0 / 0) 44%, rgb(0 0 0 / 0) 64%, rgb(0 0 0 / 0.28) 78%, rgb(0 0 0 / 0.86) 92%, #000 100%);
  opacity: 1;
}

body.qianshouguanyin-detail-page.is-qianshouguanyin-panel-02-leaving::after {
  animation: qianshouguanyin-spotlight-out 900ms linear both;
}

body.qianshouguanyin-detail-page.is-qianshouguanyin-panel-03::after {
  opacity: 0;
}

.detail-main--qianshouguanyin.is-panel-03::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

.detail-main--qianshouguanyin.is-panel-01-leaving::before,
.detail-main--qianshouguanyin.is-panel-02-entering::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  pointer-events: none;
  will-change: opacity;
  contain: paint;
}

.detail-main--qianshouguanyin.is-panel-01-leaving::before {
  animation: qianshouguanyin-black-in 3000ms linear both;
}

.detail-main--qianshouguanyin.is-panel-02-entering::before {
  animation: qianshouguanyin-black-out 3000ms linear both;
}

.detail-main--qianshouguanyin .qianshouguanyin-panel-image {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + -413 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + -613 * var(--qianshouguanyin-scale));
  width: calc(2745 * var(--qianshouguanyin-scale));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: opacity, transform;
}

.detail-main--qianshouguanyin.is-panel-01-leaving .qianshouguanyin-panel-image {
  animation: qianshouguanyin-panel-01-image-out 3000ms linear both;
  transform-origin: 0% 0%;
  transition: none;
}

.detail-main--qianshouguanyin.is-panel-01-leaving .qianshouguanyin-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.detail-main--qianshouguanyin .qianshouguanyin-panel-02-image {
  position: absolute;
  left: var(--qianshouguanyin-stage-left);
  top: calc(var(--qianshouguanyin-stage-top) + -1110 * var(--qianshouguanyin-scale));
  width: calc(2262 * var(--qianshouguanyin-scale));
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: opacity, transform;
}

.detail-main--qianshouguanyin.is-panel-02 .qianshouguanyin-panel-image {
  opacity: 0;
  visibility: hidden;
}

.detail-main--qianshouguanyin.is-panel-02 .qianshouguanyin-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.detail-main--qianshouguanyin.is-panel-02 .qianshouguanyin-panel-02-image {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 3000ms cubic-bezier(0.18, 0.84, 0.28, 1),
    visibility 3000ms linear;
}

.detail-main--qianshouguanyin.is-panel-02-entering .qianshouguanyin-panel-02-image {
  animation: qianshouguanyin-panel-02-image-in 3000ms cubic-bezier(0.18, 0.84, 0.28, 1) both;
  transition: none;
}

.detail-main--qianshouguanyin.is-panel-02-entering .qianshouguanyin-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--qianshouguanyin.is-panel-02-leaving .qianshouguanyin-panel-02-image {
  animation: qianshouguanyin-panel-02-image-out 2200ms linear 800ms both;
  transform-origin: 50% 50%;
  transition: none;
}

.detail-main--qianshouguanyin.is-panel-02-leaving .qianshouguanyin-panel-02-copy {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none;
  transition:
    opacity 160ms linear,
    visibility 160ms linear;
}

.detail-main--qianshouguanyin.is-panel-02-leaving .qianshouguanyin-panel-02-copy *,
.detail-main--qianshouguanyin.is-panel-02-leaving .qianshouguanyin-panel-02-copy__next {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.detail-main--qianshouguanyin.is-panel-03 .qianshouguanyin-panel-image,
.detail-main--qianshouguanyin.is-panel-03 .qianshouguanyin-panel-02-image,
.detail-main--qianshouguanyin.is-panel-03 .qianshouguanyin-panel-01-copy,
.detail-main--qianshouguanyin.is-panel-03 .qianshouguanyin-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--qianshouguanyin .qianshouguanyin-detail-image {
  position: absolute;
  left: var(--qianshouguanyin-panel-03-left);
  top: var(--qianshouguanyin-panel-03-top);
  z-index: 1;
  width: var(--qianshouguanyin-panel-03-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width;
}

.detail-main--qianshouguanyin.is-panel-03 .qianshouguanyin-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--qianshouguanyin.is-panel-03.is-dragging .qianshouguanyin-detail-image {
  cursor: grabbing;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .qianshouguanyin-detail-image {
  transition: none;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-revealing .qianshouguanyin-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms linear forwards;
  transform-origin: 50% 50%;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-intro .qianshouguanyin-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-intro .detail-panel-04-intro {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-revealing .detail-panel-04-intro,
.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .detail-panel-04-intro {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-intro .detail-panel-04-intro__prompt span {
  animation: xukongzang-panel-copy-mask var(--detail-panel-04-intro-copy-duration) linear forwards;
  animation-delay: calc(var(--detail-panel-04-copy-delay) + var(--line-index, 0) * var(--local-line-stagger));
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-intro .detail-panel-04-intro__prompt img {
  animation: xukongzang-panel-04-intro-icon-in 500ms ease var(--detail-panel-04-intro-icon-delay) both,
    xukongzang-panel-04-intro-icon-wiggle 2500ms ease-in-out calc(var(--detail-panel-04-intro-icon-delay) + 500ms) infinite;
}

.qianshouguanyin-panel-03-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.qianshouguanyin-panel-03-intro__prompt--en {
  left: calc(1551.8 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

.qianshouguanyin-panel-01-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  transform: none;
  pointer-events: none;
}

.qianshouguanyin-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(1800ms + var(--line-index) * 90ms);
}

.qianshouguanyin-panel-01-copy__cn {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + 1610 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + 290 * var(--qianshouguanyin-scale));
  width: calc(364 * var(--qianshouguanyin-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--qianshouguanyin-scale));
  font-weight: 400;
  line-height: calc(36 * var(--qianshouguanyin-scale));
  letter-spacing: calc(6 * var(--qianshouguanyin-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.qianshouguanyin-panel-01-copy__en {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + 1610 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + 505 * var(--qianshouguanyin-scale));
  width: calc(302 * var(--qianshouguanyin-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--qianshouguanyin-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--qianshouguanyin-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.detail-main--qianshouguanyin .qianshouguanyin-panel-01-copy__next {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + 1590 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + 750 * var(--qianshouguanyin-scale));
  margin: 0;
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.qianshouguanyin-panel-02-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
}

.detail-main--qianshouguanyin.is-panel-02-copy-ready .qianshouguanyin-panel-02-copy {
  opacity: 1;
  visibility: visible;
}

.qianshouguanyin-panel-02-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--qianshouguanyin.is-panel-02-copy-ready .qianshouguanyin-panel-02-copy span {
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--line-index) * 90ms);
}

.qianshouguanyin-panel-02-copy__cn {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + 362 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + 306 * var(--qianshouguanyin-scale));
  width: calc(364 * var(--qianshouguanyin-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--qianshouguanyin-scale));
  font-weight: 400;
  line-height: calc(36 * var(--qianshouguanyin-scale));
  letter-spacing: calc(6 * var(--qianshouguanyin-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.qianshouguanyin-panel-02-copy__en {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + 362 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + 521 * var(--qianshouguanyin-scale));
  width: calc(302 * var(--qianshouguanyin-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--qianshouguanyin-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--qianshouguanyin-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.detail-main--qianshouguanyin .qianshouguanyin-panel-02-copy__next {
  position: absolute;
  left: calc(var(--qianshouguanyin-stage-left) + 342 * var(--qianshouguanyin-scale));
  top: calc(var(--qianshouguanyin-stage-top) + 734 * var(--qianshouguanyin-scale));
  margin: 0;
}

.detail-main--qianshouguanyin.is-panel-02-copy-ready .qianshouguanyin-panel-02-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 860ms;
}

.detail-main--qianshouguanyin .qianshouguanyin-panel-return {
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--qianshouguanyin.is-panel-02 .qianshouguanyin-panel-return {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

body.ludumu-detail-page,
.detail-main--ludumu {
  --ludumu-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  --ludumu-stage-left: calc((100vw - 1920 * var(--ludumu-scale)) / 2);
  --ludumu-stage-top: calc((100vh - 1080 * var(--ludumu-scale)) / 2);
  --ludumu-panel-01-left: calc(var(--ludumu-stage-left) + -2633 * var(--ludumu-scale));
  --ludumu-panel-01-top: calc(var(--ludumu-stage-top) + -598 * var(--ludumu-scale));
  --ludumu-panel-01-width: calc(7128 * var(--ludumu-scale));
  --ludumu-panel-01-out-left: calc(var(--ludumu-stage-left) + -2106 * var(--ludumu-scale));
  --ludumu-panel-01-out-top: calc(var(--ludumu-stage-top) + -1528 * var(--ludumu-scale));
  --ludumu-panel-01-out-width: calc(9725 * var(--ludumu-scale));
  --ludumu-panel-02-left: calc(var(--ludumu-stage-left) + -540 * var(--ludumu-scale));
  --ludumu-panel-02-top: calc(var(--ludumu-stage-top) + -1928 * var(--ludumu-scale));
  --ludumu-panel-02-width: calc(3072 * var(--ludumu-scale));
  --ludumu-panel-02-out-left: calc(var(--ludumu-stage-left) + -238 * var(--ludumu-scale));
  --ludumu-panel-02-out-top: calc(var(--ludumu-stage-top) + -317 * var(--ludumu-scale));
  --ludumu-panel-02-out-width: calc(2158 * var(--ludumu-scale));
  --ludumu-panel-02-in-left: calc(var(--ludumu-stage-left) + 0 * var(--ludumu-scale));
  --ludumu-panel-02-in-top: calc(var(--ludumu-stage-top) + -1160 * var(--ludumu-scale));
  --ludumu-panel-02-in-width: calc(1920 * var(--ludumu-scale));
  --ludumu-panel-03-left: calc(var(--ludumu-stage-left) + -260 * var(--ludumu-scale));
  --ludumu-panel-03-top: calc(var(--ludumu-stage-top) + -84 * var(--ludumu-scale));
  --ludumu-panel-03-width: calc(2440 * var(--ludumu-scale));
  --ludumu-panel-03-in-left: calc(var(--ludumu-stage-left) + 0 * var(--ludumu-scale));
  --ludumu-panel-03-in-top: calc(var(--ludumu-stage-top) + -180 * var(--ludumu-scale));
  --ludumu-panel-03-in-width: calc(1920 * var(--ludumu-scale));
  --ludumu-panel-03-out-left: calc(var(--ludumu-stage-left) + -1035 * var(--ludumu-scale));
  --ludumu-panel-03-out-top: calc(var(--ludumu-stage-top) + -1072 * var(--ludumu-scale));
  --ludumu-panel-03-out-width: calc(3001 * var(--ludumu-scale));
  --ludumu-panel-04-left: calc(var(--ludumu-stage-left) + -541 * var(--ludumu-scale));
  --ludumu-panel-04-top: calc(var(--ludumu-stage-top) + -841 * var(--ludumu-scale));
  --ludumu-panel-04-width: calc(2539 * var(--ludumu-scale));
  --ludumu-panel-04-out-left: calc(var(--ludumu-stage-left) + -1835 * var(--ludumu-scale));
  --ludumu-panel-04-out-top: calc(var(--ludumu-stage-top) + -2447 * var(--ludumu-scale));
  --ludumu-panel-04-out-width: calc(6449 * var(--ludumu-scale));
  --ludumu-panel-04-in-left: calc(var(--ludumu-stage-left) + 0 * var(--ludumu-scale));
  --ludumu-panel-04-in-top: calc(var(--ludumu-stage-top) + 0 * var(--ludumu-scale));
  --ludumu-panel-04-in-width: calc(1920 * var(--ludumu-scale));
  --ludumu-panel-05-left: calc(var(--ludumu-stage-left) + -18 * var(--ludumu-scale));
  --ludumu-panel-05-top: var(--ludumu-stage-top);
  --ludumu-panel-05-width: calc(1956 * var(--ludumu-scale));
  --panel-04-left: var(--ludumu-panel-05-left);
  --panel-04-top: var(--ludumu-panel-05-top);
  --panel-04-width: var(--ludumu-panel-05-width);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --local-next-delay: 4170ms;
  --local-next-in-duration: 520ms;
  --local-next-breathe-duration: 2500ms;
  --local-line-stagger: 0ms;
  --detail-panel-04-paper-duration: 1000ms;
  --detail-panel-04-intro-wait: 500ms;
  --detail-panel-04-image-delay: calc(var(--detail-panel-04-paper-duration) + var(--detail-panel-04-intro-wait));
  --detail-panel-04-intro-reveal-duration: 2000ms;
  --detail-panel-04-copy-delay: calc(var(--detail-panel-04-image-delay) + var(--detail-panel-04-intro-reveal-duration));
  --detail-panel-04-intro-copy-duration: 2000ms;
  --detail-panel-04-intro-icon-delay: calc(var(--detail-panel-04-copy-delay) + var(--detail-panel-04-intro-copy-duration));
  --detail-panel-04-intro-width: calc(836 / 1920 * 100vw);
  --detail-panel-04-intro-left: calc(50vw - (418 / 1920 * 100vw));
  --detail-panel-04-intro-top: calc(50vh - (230.941 / 1920 * 100vw));
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.ludumu-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2239 * var(--ludumu-scale)) calc(2243 * var(--ludumu-scale)) at calc(var(--ludumu-stage-left) + 959.5 * var(--ludumu-scale)) calc(var(--ludumu-stage-top) + 542.5 * var(--ludumu-scale)),
      rgb(0 0 0 / 0) 0 48%,
      rgb(0 0 0 / 0.18) 62%,
      rgb(0 0 0 / 0.74) 78%,
      rgb(0 0 0 / 0.96) 90%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.64) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.64) 80%, #000 100%),
    linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.64) 22%, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.64) 78%, #000 100%);
  opacity: 1;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity;
}

body.ludumu-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.ludumu-detail-page.is-ludumu-panel-01-ready::after {
  opacity: 1;
}

body.ludumu-detail-page.is-ludumu-panel-01-leaving::after {
  animation: ludumu-spotlight-out 2000ms linear 800ms forwards;
}

body.ludumu-detail-page.is-ludumu-panel-02::after,
body.ludumu-detail-page.is-ludumu-panel-03::after,
body.ludumu-detail-page.is-ludumu-panel-04::after,
body.ludumu-detail-page.is-ludumu-panel-05::after {
  opacity: 0;
}

.detail-main--ludumu .ludumu-panel-image {
  position: absolute;
  left: var(--ludumu-panel-01-left);
  top: var(--ludumu-panel-01-top);
  width: var(--ludumu-panel-01-width);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: opacity, transform;
}

.detail-main--ludumu::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  opacity: 0;
  pointer-events: none;
}

.detail-main--ludumu.is-panel-05-revealing::before {
  opacity: 1;
  animation: ludumu-panel-black-out 3000ms linear forwards;
}

.detail-main--ludumu.is-panel-01-leaving .ludumu-panel-image {
  animation: ludumu-panel-01-image-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-01-leaving .ludumu-panel-01-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.detail-main--ludumu.is-panel-02-leaving .ludumu-panel-02-image {
  animation: ludumu-panel-02-image-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-02-leaving .ludumu-panel-02-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.detail-main--ludumu.is-panel-03-leaving .ludumu-panel-03-image {
  animation: ludumu-panel-03-image-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-03-leaving .ludumu-panel-03-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.detail-main--ludumu.is-panel-04-leaving .ludumu-panel-04-image {
  animation: ludumu-panel-04-image-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-04-leaving .ludumu-panel-04-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 800ms linear,
    visibility 800ms linear;
}

.ludumu-panel-01-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: visible;
  transform: none;
  pointer-events: none;
}

body.ludumu-detail-page.is-ludumu-panel-01-ready .ludumu-panel-01-copy {
  animation: ludumu-panel-copy-in 1ms linear 3500ms forwards;
}

.ludumu-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

body.ludumu-detail-page.is-ludumu-panel-01-ready .ludumu-panel-01-copy span {
  animation: xukongzang-panel-copy-mask 2000ms linear forwards;
  animation-delay: 3500ms;
}

.ludumu-panel-01-copy__cn {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1626 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 323 * var(--ludumu-scale));
  width: calc(364 * var(--ludumu-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-weight: 400;
  line-height: calc(36 * var(--ludumu-scale));
  letter-spacing: calc(6 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.ludumu-panel-01-copy__en {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1626 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 503 * var(--ludumu-scale));
  width: calc(302 * var(--ludumu-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.detail-main--ludumu .ludumu-panel-01-copy__next {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1604 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 716 * var(--ludumu-scale));
  margin: 0;
}

body.ludumu-detail-page.is-ludumu-panel-01-ready .ludumu-panel-01-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 5500ms;
}

.detail-main--ludumu .ludumu-panel-02-image {
  position: absolute;
  left: var(--ludumu-panel-02-left);
  top: var(--ludumu-panel-02-top);
  width: var(--ludumu-panel-02-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--ludumu.is-panel-02-entering .ludumu-panel-02-image {
  animation: ludumu-panel-02-image-in 2000ms linear 1500ms both;
}

.detail-main--ludumu.is-panel-03-entering .ludumu-panel-03-image {
  animation: ludumu-panel-03-image-in 2000ms linear 1500ms both;
}

.detail-main--ludumu.is-panel-04-entering .ludumu-panel-04-image {
  animation: ludumu-panel-04-image-in 2000ms linear 1500ms both;
}

.detail-main--ludumu::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(
      ellipse calc(3302 * var(--ludumu-scale)) calc(3305 * var(--ludumu-scale)) at calc(var(--ludumu-stage-left) + 1697 * var(--ludumu-scale)) calc(var(--ludumu-stage-top) + 539.5 * var(--ludumu-scale)),
      rgb(0 0 0 / 0) 0 42%,
      rgb(0 0 0 / 0.08) 56%,
      rgb(0 0 0 / 0.72) 74%,
      rgb(0 0 0 / 0.98) 86%,
      #000 100%
    ),
    linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.74) 20%, rgb(0 0 0 / 0.08) 42%, rgb(0 0 0 / 0.02) 68%, rgb(0 0 0 / 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.detail-main--ludumu.is-panel-02::after {
  opacity: 1;
}

.detail-main--ludumu.is-panel-03::after {
  background:
    radial-gradient(
      circle calc(1025 * var(--ludumu-scale)) at calc(var(--ludumu-stage-left) + 959.5 * var(--ludumu-scale)) calc(var(--ludumu-stage-top) + 503.5 * var(--ludumu-scale)),
      rgb(0 0 0 / 0) 0 38%,
      rgb(0 0 0 / 0.1) 50%,
      rgb(0 0 0 / 0.76) 72%,
      rgb(0 0 0 / 0.98) 86%,
      #000 100%
    ),
    linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.62) 18%, rgb(0 0 0 / 0.04) 42%, rgb(0 0 0 / 0.08) 70%, rgb(0 0 0 / 0.72) 86%, #000 100%);
  opacity: 1;
}

.detail-main--ludumu.is-panel-04::after {
  background:
    radial-gradient(
      ellipse calc(3370 * var(--ludumu-scale)) calc(3373 * var(--ludumu-scale)) at calc(var(--ludumu-stage-left) + 371 * var(--ludumu-scale)) calc(var(--ludumu-stage-top) + 506.5 * var(--ludumu-scale)),
      rgb(0 0 0 / 0) 0 36%,
      rgb(0 0 0 / 0.1) 50%,
      rgb(0 0 0 / 0.76) 72%,
      rgb(0 0 0 / 0.98) 88%,
      #000 100%
    ),
    linear-gradient(90deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0.02) 34%, rgb(0 0 0 / 0.16) 58%, rgb(0 0 0 / 0.78) 84%, #000 100%);
  opacity: 1;
}

.detail-main--ludumu.is-panel-02-entering::after {
  opacity: 0;
  animation: ludumu-panel-02-spotlight-in 2000ms linear forwards;
}

.detail-main--ludumu.is-panel-02-leaving::after {
  animation: ludumu-panel-spotlight-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-03-entering::after {
  opacity: 0;
  animation: ludumu-panel-02-spotlight-in 2000ms linear forwards;
}

.detail-main--ludumu.is-panel-03-leaving::after {
  animation: ludumu-panel-spotlight-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-04-entering::after {
  opacity: 0;
  animation: ludumu-panel-02-spotlight-in 2000ms linear forwards;
}

.detail-main--ludumu.is-panel-04-leaving::after {
  animation: ludumu-panel-spotlight-out 2000ms linear 800ms forwards;
}

.detail-main--ludumu.is-panel-05::after {
  opacity: 0;
}

.detail-main--ludumu.is-panel-05::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.detail-main--ludumu.is-panel-05.is-panel-05-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

.ludumu-panel-02-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--ludumu.is-panel-02 .ludumu-panel-02-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-02-entering .ludumu-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--ludumu.is-panel-02-ready .ludumu-panel-02-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-02.is-panel-02-leaving .ludumu-panel-02-copy {
  opacity: 0;
  visibility: hidden;
}

.ludumu-panel-02-copy span,
.ludumu-panel-03-copy span,
.ludumu-panel-04-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--ludumu.is-panel-02-ready .ludumu-panel-02-copy span,
.detail-main--ludumu.is-panel-03-ready .ludumu-panel-03-copy span,
.detail-main--ludumu.is-panel-04-ready .ludumu-panel-04-copy span {
  animation: xukongzang-panel-copy-mask 2000ms linear forwards;
  animation-delay: 0ms;
}

.ludumu-panel-02-copy__cn {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 555 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 306 * var(--ludumu-scale));
  width: calc(364 * var(--ludumu-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-weight: 400;
  line-height: calc(36 * var(--ludumu-scale));
  letter-spacing: calc(6 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.ludumu-panel-02-copy__en {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 555.5 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 522 * var(--ludumu-scale));
  width: calc(253 * var(--ludumu-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.detail-main--ludumu .ludumu-panel-02-copy__next {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 535 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 735 * var(--ludumu-scale));
  margin: 0;
}

.detail-main--ludumu.is-panel-02-ready .ludumu-panel-02-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 2000ms;
}

.detail-main--ludumu .ludumu-panel-03-image {
  position: absolute;
  left: var(--ludumu-panel-03-left);
  top: var(--ludumu-panel-03-top);
  width: var(--ludumu-panel-03-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.ludumu-panel-03-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--ludumu.is-panel-03 .ludumu-panel-03-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-03-entering .ludumu-panel-03-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--ludumu.is-panel-03-ready .ludumu-panel-03-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-03-leaving .ludumu-panel-03-copy {
  opacity: 0;
  visibility: hidden;
}

.ludumu-panel-03-copy__cn {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1624 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 120 * var(--ludumu-scale));
  width: calc(364 * var(--ludumu-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-weight: 400;
  line-height: calc(36 * var(--ludumu-scale));
  letter-spacing: calc(6 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.ludumu-panel-03-copy__en {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1624 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 300 * var(--ludumu-scale));
  width: calc(270 * var(--ludumu-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.detail-main--ludumu .ludumu-panel-03-copy__next {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1603 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 483 * var(--ludumu-scale));
  margin: 0;
}

.detail-main--ludumu.is-panel-03-ready .ludumu-panel-03-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 2000ms;
}

.detail-main--ludumu .ludumu-panel-04-image {
  position: absolute;
  left: var(--ludumu-panel-04-left);
  top: var(--ludumu-panel-04-top);
  width: var(--ludumu-panel-04-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--ludumu .ludumu-detail-image {
  position: absolute;
  left: var(--ludumu-panel-05-left);
  top: var(--ludumu-panel-05-top);
  z-index: 1;
  width: var(--ludumu-panel-05-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: left, top, width, clip-path;
}

.detail-main--ludumu.is-panel-05 .ludumu-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--ludumu.is-panel-05.is-dragging .ludumu-detail-image {
  cursor: grabbing;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .ludumu-detail-image {
  transition: none;
  clip-path: inset(0);
  transform: none;
}

.detail-main--ludumu.is-panel-05.is-panel-05-revealing .ludumu-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform-origin: 50% 50%;
}

.detail-main--ludumu.is-panel-05.is-panel-05-intro .ludumu-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.detail-main--ludumu.is-panel-05.is-panel-05-intro .detail-panel-04-intro {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.detail-main--ludumu.is-panel-05.is-panel-05-revealing .detail-panel-04-intro,
.detail-main--ludumu.is-panel-05.is-panel-05-ready .detail-panel-04-intro {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.detail-main--ludumu.is-panel-05.is-panel-05-intro .detail-panel-04-intro__prompt span {
  animation: xukongzang-panel-copy-mask var(--detail-panel-04-intro-copy-duration) linear forwards;
  animation-delay: calc(var(--detail-panel-04-copy-delay) + var(--line-index, 0) * var(--local-line-stagger));
}

.detail-main--ludumu.is-panel-05.is-panel-05-intro .detail-panel-04-intro__prompt img {
  animation: xukongzang-panel-04-intro-icon-in 500ms ease var(--detail-panel-04-intro-icon-delay) both,
    xukongzang-panel-04-intro-icon-wiggle 2500ms ease-in-out calc(var(--detail-panel-04-intro-icon-delay) + 500ms) infinite;
}

.ludumu-panel-05-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  color: #d9ab56;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.ludumu-panel-05-intro__prompt--en {
  left: calc(1631.864 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  color: #d9ab56;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

.ludumu-panel-04-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.detail-main--ludumu.is-panel-04-ready .ludumu-panel-04-copy {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-04-entering .ludumu-panel-04-copy {
  opacity: 0;
  visibility: hidden;
}

.ludumu-panel-04-copy__cn {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1566 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 593 * var(--ludumu-scale));
  width: calc(364 * var(--ludumu-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-weight: 400;
  line-height: calc(36 * var(--ludumu-scale));
  letter-spacing: calc(6 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.ludumu-panel-04-copy__en {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1566 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 737 * var(--ludumu-scale));
  width: calc(350 * var(--ludumu-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--ludumu-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--ludumu-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.detail-main--ludumu .ludumu-panel-04-copy__next {
  position: absolute;
  left: calc(var(--ludumu-stage-left) + 1546 * var(--ludumu-scale));
  top: calc(var(--ludumu-stage-top) + 920 * var(--ludumu-scale));
  margin: 0;
}

.detail-main--ludumu.is-panel-04-ready .ludumu-panel-04-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards 2000ms;
}

.detail-main--ludumu.is-panel-02 .ludumu-panel-image,
.detail-main--ludumu.is-panel-02 .ludumu-panel-01-copy,
.detail-main--ludumu.is-panel-02-leaving .ludumu-panel-image,
.detail-main--ludumu.is-panel-02-leaving .ludumu-panel-01-copy,
.detail-main--ludumu.is-panel-03 .ludumu-panel-image,
.detail-main--ludumu.is-panel-03 .ludumu-panel-01-copy,
.detail-main--ludumu.is-panel-03 .ludumu-panel-02-image,
.detail-main--ludumu.is-panel-03 .ludumu-panel-02-copy,
.detail-main--ludumu.is-panel-04 .ludumu-panel-image,
.detail-main--ludumu.is-panel-04 .ludumu-panel-01-copy,
.detail-main--ludumu.is-panel-04 .ludumu-panel-02-image,
.detail-main--ludumu.is-panel-04 .ludumu-panel-02-copy,
.detail-main--ludumu.is-panel-04 .ludumu-panel-03-image,
.detail-main--ludumu.is-panel-04 .ludumu-panel-03-copy,
.detail-main--ludumu.is-panel-05 .ludumu-panel-image,
.detail-main--ludumu.is-panel-05 .ludumu-panel-01-copy,
.detail-main--ludumu.is-panel-05 .ludumu-panel-02-image,
.detail-main--ludumu.is-panel-05 .ludumu-panel-02-copy,
.detail-main--ludumu.is-panel-05 .ludumu-panel-03-image,
.detail-main--ludumu.is-panel-05 .ludumu-panel-03-copy,
.detail-main--ludumu.is-panel-05 .ludumu-panel-04-image,
.detail-main--ludumu.is-panel-05 .ludumu-panel-04-copy {
  opacity: 0;
  visibility: hidden;
}

.detail-main--ludumu.is-panel-02 .ludumu-panel-02-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-02-entering .ludumu-panel-02-image {
  left: var(--ludumu-panel-02-in-left);
  top: var(--ludumu-panel-02-in-top);
  width: var(--ludumu-panel-02-in-width);
  opacity: 0;
  visibility: visible;
  transition: none;
}

.detail-main--ludumu.is-panel-02-leaving .ludumu-panel-02-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-03 .ludumu-panel-03-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-03-entering .ludumu-panel-03-image {
  left: var(--ludumu-panel-03-in-left);
  top: var(--ludumu-panel-03-in-top);
  width: var(--ludumu-panel-03-in-width);
  opacity: 0;
  visibility: visible;
  transition: none;
}

.detail-main--ludumu.is-panel-03-leaving .ludumu-panel-03-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-04 .ludumu-panel-04-image {
  opacity: 1;
  visibility: visible;
}

.detail-main--ludumu.is-panel-04-entering .ludumu-panel-04-image {
  left: var(--ludumu-panel-04-in-left);
  top: var(--ludumu-panel-04-in-top);
  width: var(--ludumu-panel-04-in-width);
  opacity: 0;
  visibility: visible;
  transition: none;
}

.detail-main--ludumu.is-panel-04-leaving .ludumu-panel-04-image {
  opacity: 1;
  visibility: visible;
}

@keyframes ludumu-spotlight-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ludumu-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ludumu-panel-copy-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ludumu-panel-black-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ludumu-panel-black-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ludumu-panel-01-image-out {
  0% {
    left: var(--ludumu-panel-01-left);
    top: var(--ludumu-panel-01-top);
    width: var(--ludumu-panel-01-width);
    opacity: 1;
  }
  100% {
    left: var(--ludumu-panel-01-out-left);
    top: var(--ludumu-panel-01-out-top);
    width: var(--ludumu-panel-01-out-width);
    opacity: 0;
  }
}

@keyframes ludumu-panel-02-image-in {
  0% {
    left: var(--ludumu-panel-02-in-left);
    top: var(--ludumu-panel-02-in-top);
    width: var(--ludumu-panel-02-in-width);
    opacity: 0;
  }
  100% {
    left: var(--ludumu-panel-02-left);
    top: var(--ludumu-panel-02-top);
    width: var(--ludumu-panel-02-width);
    opacity: 1;
  }
}

@keyframes ludumu-panel-02-image-out {
  0% {
    left: var(--ludumu-panel-02-left);
    top: var(--ludumu-panel-02-top);
    width: var(--ludumu-panel-02-width);
    opacity: 1;
  }
  100% {
    left: var(--ludumu-panel-02-out-left);
    top: var(--ludumu-panel-02-out-top);
    width: var(--ludumu-panel-02-out-width);
    opacity: 0;
  }
}

@keyframes ludumu-panel-03-image-in {
  0% {
    left: var(--ludumu-panel-03-in-left);
    top: var(--ludumu-panel-03-in-top);
    width: var(--ludumu-panel-03-in-width);
    opacity: 0;
  }
  100% {
    left: var(--ludumu-panel-03-left);
    top: var(--ludumu-panel-03-top);
    width: var(--ludumu-panel-03-width);
    opacity: 1;
  }
}

@keyframes ludumu-panel-03-image-out {
  0% {
    left: var(--ludumu-panel-03-left);
    top: var(--ludumu-panel-03-top);
    width: var(--ludumu-panel-03-width);
    opacity: 1;
  }
  100% {
    left: var(--ludumu-panel-03-out-left);
    top: var(--ludumu-panel-03-out-top);
    width: var(--ludumu-panel-03-out-width);
    opacity: 0;
  }
}

@keyframes ludumu-panel-04-image-in {
  0% {
    left: var(--ludumu-panel-04-in-left);
    top: var(--ludumu-panel-04-in-top);
    width: var(--ludumu-panel-04-in-width);
    opacity: 0;
  }
  100% {
    left: var(--ludumu-panel-04-left);
    top: var(--ludumu-panel-04-top);
    width: var(--ludumu-panel-04-width);
    opacity: 1;
  }
}

@keyframes ludumu-panel-04-image-out {
  0% {
    left: var(--ludumu-panel-04-left);
    top: var(--ludumu-panel-04-top);
    width: var(--ludumu-panel-04-width);
    opacity: 1;
  }
  100% {
    left: var(--ludumu-panel-04-out-left);
    top: var(--ludumu-panel-04-out-top);
    width: var(--ludumu-panel-04-out-width);
    opacity: 0;
  }
}

@keyframes ludumu-panel-02-spotlight-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ludumu-panel-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.detail-main--multi-panel {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

.detail-panel-image {
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
}

.detail-panel-next {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.detail-local-next {
  position: relative;
  display: block;
  width: calc(40 / 1920 * 100vw);
  min-width: 24px;
  height: calc(40 / 1920 * 100vw);
  min-height: 24px;
  margin: 32px auto 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transform: scale(1);
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    scale 180ms ease,
    transform 180ms ease;
}

.detail-local-next::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--local-panel-next-hover-icon) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.detail-local-next:hover {
  filter: drop-shadow(0 0 10px rgb(255 216 133 / 0.9));
  opacity: 1;
  scale: 1.45;
  transform: scale(1);
}

.detail-local-next:hover::after {
  opacity: 1;
}

.detail-local-next img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transform: scale(1);
  transform-origin: center;
}

.detail-local-next:hover img {
  animation: none;
  filter: drop-shadow(0 0 10px rgb(255 216 133 / 0.9));
  opacity: 1;
  transform: scale(1);
}

.detail-main--local-panels .detail-local-next img {
  animation: xukongzang-panel-next-breathe var(--local-next-breathe-duration) ease-in-out infinite;
}

.detail-main--local-panels .detail-local-next:hover img {
  animation: none;
}

.detail-main--xukongzang {
  --panel-04-left: 0px;
  --panel-04-top: calc(var(--header-height) - 600px);
  --panel-04-width: 100vw;
  --xukongzang-panel-02-width: max(calc(3806 / 1920 * 100vw), 166dvh);
  --local-panel-next-hover-icon: url("assets/xukongzang-panel-next-hover-icon.png");
  --xukongzang-local-spotlight-duration: 2000ms;
  --xukongzang-local-bg-delay: 1500ms;
  --xukongzang-local-bg-duration: 2000ms;
  --xukongzang-local-copy-delay: 3500ms;
  --xukongzang-local-copy-duration: 2000ms;
  --xukongzang-local-line-stagger: 0ms;
  --xukongzang-local-next-delay: 5500ms;
  --xukongzang-local-next-in-duration: 260ms;
  --xukongzang-local-next-breathe-delay: 5760ms;
  --xukongzang-local-next-breathe-duration: 2500ms;
  --xukongzang-local-leave-copy-duration: 800ms;
  --xukongzang-local-leave-visual-delay: var(--xukongzang-local-leave-copy-duration);
  --xukongzang-local-leave-visual-duration: 2000ms;
  --xukongzang-panel-04-paper-duration: 1000ms;
  --xukongzang-panel-04-intro-wait: 500ms;
  --xukongzang-panel-04-image-delay: calc(var(--xukongzang-panel-04-paper-duration) + var(--xukongzang-panel-04-intro-wait));
  --xukongzang-panel-04-intro-reveal-duration: 2000ms;
  --xukongzang-panel-04-copy-delay: calc(var(--xukongzang-panel-04-image-delay) + var(--xukongzang-panel-04-intro-reveal-duration));
  --xukongzang-panel-04-intro-copy-duration: 2000ms;
  --xukongzang-panel-04-intro-icon-delay: calc(var(--xukongzang-panel-04-copy-delay) + var(--xukongzang-panel-04-intro-copy-duration));
  --xukongzang-panel-04-intro-width: calc(620.361 / 1920 * 100vw);
  --xukongzang-panel-04-intro-left: calc(50vw - (310.1805 / 1920 * 100vw));
  --xukongzang-panel-04-intro-top: calc(50vh - (420 / 1920 * 100vw));
  --local-spotlight-duration: var(--xukongzang-local-spotlight-duration);
  --local-bg-delay: var(--xukongzang-local-bg-delay);
  --local-bg-duration: var(--xukongzang-local-bg-duration);
  --local-copy-delay: var(--xukongzang-local-copy-delay);
  --local-copy-duration: var(--xukongzang-local-copy-duration);
  --local-line-stagger: var(--xukongzang-local-line-stagger);
  --local-next-delay: var(--xukongzang-local-next-delay);
  --local-next-in-duration: var(--xukongzang-local-next-in-duration);
  --local-next-breathe-duration: var(--xukongzang-local-next-breathe-duration);
  --local-leave-copy-duration: var(--xukongzang-local-leave-copy-duration);
  --local-leave-visual-delay: var(--xukongzang-local-leave-visual-delay);
  --local-leave-visual-duration: var(--xukongzang-local-leave-visual-duration);
  --detail-panel-04-paper-duration: var(--xukongzang-panel-04-paper-duration);
  --detail-panel-04-intro-wait: var(--xukongzang-panel-04-intro-wait);
  --detail-panel-04-image-delay: var(--xukongzang-panel-04-image-delay);
  --detail-panel-04-intro-reveal-duration: var(--xukongzang-panel-04-intro-reveal-duration);
  --detail-panel-04-copy-delay: var(--xukongzang-panel-04-copy-delay);
  --detail-panel-04-intro-copy-duration: var(--xukongzang-panel-04-intro-copy-duration);
  --detail-panel-04-intro-icon-delay: var(--xukongzang-panel-04-intro-icon-delay);
  --detail-panel-04-intro-width: var(--xukongzang-panel-04-intro-width);
  --detail-panel-04-intro-left: var(--xukongzang-panel-04-intro-left);
  --detail-panel-04-intro-top: var(--xukongzang-panel-04-intro-top);
}

.detail-main--xukongzang::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-474 / 1920 * 100vw);
  z-index: 0;
  width: 100vw;
  height: calc(2593 / 1920 * 100vw);
  background: url("assets/xukongzang-secondary-hero-node199253.jpg") center top / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

body.is-entry-portal-handoff .detail-main--xukongzang::before {
  opacity: 1;
}

.detail-main--xukongzang.is-panel-04::before {
  position: fixed;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: url("assets/xukongzang-panel04-paper-bg.png") center / cover no-repeat;
  opacity: 1;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-intro::before {
  opacity: 0;
  animation: xukongzang-panel-04-paper-in var(--detail-panel-04-paper-duration) linear forwards;
}

body.xukongzang-detail-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  opacity: 0;
  pointer-events: none;
}

body.xukongzang-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    var(--xukongzang-panel-mask);
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.detail-main--xukongzang::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.34) 22%, rgb(0 0 0 / 0.02) 48%),
    radial-gradient(
      ellipse calc(880 / 1920 * 100vw) calc(760 / 1920 * 100vw) at calc(50% + 400px) calc(545 / 1920 * 100vw),
      rgb(0 0 0 / 0) 0 42%,
      rgb(0 0 0 / 0.22) 58%,
      rgb(0 0 0 / 0.56) 78%,
      rgb(0 0 0 / 0.92) 100%
    );
  opacity: 0;
  pointer-events: none;
}

.detail-main--xukongzang:not(.is-panel-02):not(.is-panel-03):not(.is-panel-04)::after {
  opacity: 1;
  background: #000000;
  animation: xukongzang-panel-01-bg-cover-out var(--xukongzang-local-bg-duration) linear var(--xukongzang-local-bg-delay) both;
}

body.xukongzang-detail-page {
  --xukongzang-panel-mask: linear-gradient(
    106.322deg,
    #000000 3.8976%,
    rgb(0 0 0 / 0.5) 31.782%,
    rgb(0 0 0 / 0) 47.532%,
    rgb(0 0 0 / 0.5) 73.677%,
    #000000 96.847%
  );
}

body.xukongzang-detail-page.is-xukongzang-panel-02-mask {
  --xukongzang-panel-mask:
    linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.04) 26%, rgb(0 0 0 / 0.42) 68%, rgb(0 0 0 / 0.9) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.94) 0%, rgb(0 0 0 / 0.58) 16%, rgb(0 0 0 / 0.08) 38%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.08) 62%, rgb(0 0 0 / 0.58) 84%, rgb(0 0 0 / 0.94) 100%),
    radial-gradient(
      ellipse calc(1448 / 1920 * 100vw) calc(1449 / 1920 * 100vw) at calc(50% + 300px) calc(30 / 1920 * 100vw),
      rgb(0 0 0 / 0) 0 36%,
      rgb(0 0 0 / 0.1) 48%,
      rgb(0 0 0 / 0.56) 72%,
      #000000 100%
    );
}

body.xukongzang-detail-page.is-xukongzang-panel-03-mask {
  --xukongzang-panel-mask: transparent;
}

body.xukongzang-detail-page.is-xukongzang-panel-03-mask::after {
  background: transparent;
  animation: none;
}

body.xukongzang-detail-page.is-xukongzang-panel-03-transition::before {
  animation: xukongzang-panel-02-to-03-black 3500ms linear forwards;
}

.detail-main--xukongzang.is-panel-03::after {
  opacity: 1;
  animation: xukongzang-panel-03-spotlight-in var(--xukongzang-local-spotlight-duration) linear forwards;
}

.detail-main--xukongzang.is-panel-03.is-panel-03-leaving::after {
  opacity: 1;
  animation: xukongzang-panel-03-spotlight-out var(--xukongzang-local-leave-visual-duration) linear var(--xukongzang-local-leave-visual-delay) forwards;
}

@keyframes xukongzang-panel-02-to-03-black {
  0% {
    opacity: 0;
  }
  34%,
  48% {
    opacity: 1;
  }
  76% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
  }
}

@keyframes xukongzang-panel-03-spotlight-in {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.34;
  }
  70% {
    opacity: 0.72;
  }
  100% {
    opacity: 1;
  }
}

@keyframes xukongzang-panel-03-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes xukongzang-panel-03-copy-out {
  0% {
    opacity: 1;
    transform: translateX(-50%);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%);
  }
}

@keyframes xukongzang-panel-03-image-in {
  0% {
    left: calc(-475.05 / 1920 * 100vw);
    top: calc(-1618.81 / 1920 * 100vw);
    width: calc(2495.322 / 1920 * 100vw);
    opacity: 0;
  }
  100% {
    left: calc((-1404 / 1920 * 100vw) + 50px);
    top: calc(-3415 / 1920 * 100vw);
    width: calc(4390 / 1920 * 100vw);
    opacity: 1;
  }
}

@keyframes xukongzang-panel-03-image-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

body.xukongzang-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.xukongzang-detail-page.is-xukongzang-panel-mask-hidden::after {
  opacity: 0;
  animation: none;
}

body.xukongzang-detail-page.is-xukongzang-panel-mask-hidden .detail-main--xukongzang::after {
  opacity: 0;
  animation: none;
}


.tertiary-main {
  position: relative;
  min-height: 100vh;
  background: #000000;
}

.tertiary-main--preview {
  cursor: none;
  overflow: hidden;
}

.preview-scene-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: min(783px, calc(100vh - var(--header-height) - 120px));
  max-width: none;
  object-fit: cover;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 260ms ease;
}

.preview-scene-image.is-switching {
  opacity: 0;
}

.preview-mobile-frame,
.preview-mobile-switch {
  display: none;
}

.preview-cursor-arrow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  will-change: transform;
}

.tertiary-main--preview.is-cursor-active .preview-cursor-arrow {
  opacity: 1;
}

.preview-cursor-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
}

.tertiary-main--preview.is-cursor-left .preview-cursor-arrow img {
  transform: rotate(135deg);
}

.preview-return-link {
  position: absolute;
  left: 50%;
  bottom: 32.5px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  cursor: pointer;
  transform: translateX(-50%);
}

.preview-return-link img {
  display: block;
  width: 40px;
  height: 40px;
  transition: transform 180ms ease;
}

.preview-return-link:hover img {
  transform: scale(1.1);
}

.detail-main--xukongzang .xukongzang-panel-image {
  position: absolute;
  left: 49.6vw;
  top: 24.82vw;
  width: 100vw;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition:
    left 2000ms linear,
    top 2000ms linear,
    width 2000ms linear,
    opacity 2300ms ease;
  opacity: 1;
  transform: translate(-49.6%, -36.65%);
  will-change: left, top, width, opacity;
}

.detail-main--xukongzang:not(.is-panel-02):not(.is-panel-03):not(.is-panel-04) .xukongzang-panel-image {
  animation: none;
}

.detail-main--xukongzang.is-panel-02 .xukongzang-panel-image {
  left: 50%;
  top: 50%;
  width: var(--xukongzang-panel-02-width);
}

.detail-main--xukongzang.is-panel-03 .xukongzang-panel-image {
  left: calc(1018.823 / 1920 * 100vw);
  top: calc(-790.023 / 1920 * 100vw);
  width: calc(3931.862 / 1920 * 100vw);
  opacity: 0;
  pointer-events: none;
  transition:
    left 2600ms linear,
    top 2600ms linear,
    width 2600ms linear,
    opacity 900ms ease 320ms;
}

.detail-main--xukongzang .xukongzang-panel-03-image {
  position: absolute;
  left: calc((-1404 / 1920 * 100vw) + 50px);
  top: calc(-3415 / 1920 * 100vw);
  width: calc(4390 / 1920 * 100vw);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition:
    opacity var(--xukongzang-local-bg-duration) linear var(--xukongzang-local-bg-delay);
  will-change: left, top, width, opacity;
}

.detail-main--xukongzang.is-panel-03 .xukongzang-panel-03-image {
  z-index: 3;
  opacity: 1;
  animation: xukongzang-panel-03-image-in var(--xukongzang-local-bg-duration) linear var(--xukongzang-local-bg-delay) both;
}

.detail-main--xukongzang.is-panel-04 .xukongzang-panel-image,
.detail-main--xukongzang.is-panel-04 .xukongzang-panel-03-image {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.detail-main--xukongzang.is-panel-03.is-panel-03-leaving .xukongzang-panel-03-image {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  animation: xukongzang-panel-03-image-out var(--xukongzang-local-leave-visual-duration) ease-in var(--xukongzang-local-leave-visual-delay) forwards;
  transform-origin: center center;
}

.xukongzang-panel-01-copy {
  position: absolute;
  left: calc(83.33vw + 45px);
  top: calc(466 / 1080 * 100vh);
  z-index: 4;
  width: calc(264 / 1920 * 100vw);
  color: #ffffff;
  text-align: center;
  transform: translateX(-50%);
}

.detail-main--xukongzang.is-panel-02 .xukongzang-panel-01-copy,
.detail-main--xukongzang.is-panel-03 .xukongzang-panel-01-copy,
.detail-main--xukongzang.is-panel-04 .xukongzang-panel-01-copy {
  opacity: 0;
  visibility: hidden;
}

.xukongzang-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: xukongzang-panel-copy-mask var(--xukongzang-local-copy-duration) linear forwards;
  animation-delay: calc(var(--xukongzang-local-copy-delay) + var(--line-index) * var(--xukongzang-local-line-stagger));
}

.xukongzang-panel-01-copy__cn {
  width: calc(164 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  line-height: calc(36 / 1080 * 100vh);
  letter-spacing: calc(6 / 1920 * 100vw);
}

.xukongzang-panel-01-copy__en {
  width: calc(264 / 1920 * 100vw);
  margin: calc(5 / 1080 * 100vh) auto 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 / 1080 * 100vh);
}

.xukongzang-panel-01-copy__zodiac {
  margin-top: calc(36 / 1080 * 100vh);
}

.xukongzang-panel-01-copy__zodiac-cn {
  width: calc(125 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(12 / 1920 * 100vw);
  font-weight: 400;
  line-height: calc(18 / 1080 * 100vh);
}

.xukongzang-panel-01-copy__zodiac-en {
  width: calc(237 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(14 / 1920 * 100vw);
  font-style: italic;
  font-weight: 400;
  line-height: calc(18 / 1080 * 100vh);
}

.xukongzang-panel-01-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.xukongzang-panel-02-copy {
  position: absolute;
  left: 50%;
  top: calc(692 / 1080 * 100dvh);
  z-index: 4;
  width: clamp(220px, calc(264 / 1920 * 100vw), 264px);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
  visibility: hidden;
}

.detail-main--xukongzang.is-panel-02 .xukongzang-panel-02-copy {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.detail-main--xukongzang.is-panel-03 .xukongzang-panel-02-copy,
.detail-main--xukongzang.is-panel-04 .xukongzang-panel-02-copy {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.xukongzang-panel-02-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--xukongzang.is-panel-02 .xukongzang-panel-02-copy span {
  animation: xukongzang-panel-copy-mask var(--xukongzang-local-copy-duration) linear forwards;
  animation-delay: calc(var(--xukongzang-local-copy-delay) + var(--line-index) * var(--xukongzang-local-line-stagger));
}

.xukongzang-panel-02-copy__cn {
  width: clamp(150px, calc(164 / 1920 * 100vw), 164px);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: clamp(3px, calc(6 / 1920 * 100vw), 6px);
}

.xukongzang-panel-02-copy__en {
  width: clamp(220px, calc(264 / 1920 * 100vw), 264px);
  margin: 3px auto 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

.detail-main--xukongzang.is-panel-02 .xukongzang-panel-02-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

.xukongzang-panel-03-copy {
  position: absolute;
  left: calc(286 / 1920 * 100vw);
  top: calc(308 / 1080 * 100vh);
  z-index: 6;
  width: calc(206 / 1920 * 100vw);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
  visibility: hidden;
}

.detail-main--xukongzang.is-panel-03 .xukongzang-panel-03-copy {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.detail-main--xukongzang.is-panel-04 .xukongzang-panel-03-copy {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.detail-main--xukongzang.is-panel-03.is-panel-03-leaving .xukongzang-panel-03-copy {
  animation: xukongzang-panel-03-copy-out var(--xukongzang-local-leave-copy-duration) linear forwards;
  pointer-events: none;
}

.xukongzang-panel-03-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--xukongzang.is-panel-03 .xukongzang-panel-03-copy span {
  animation: xukongzang-panel-copy-mask var(--xukongzang-local-copy-duration) linear forwards;
  animation-delay: calc(var(--xukongzang-local-copy-delay) + var(--line-index) * var(--xukongzang-local-line-stagger));
}

.xukongzang-panel-03-copy__cn {
  width: calc(193 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  line-height: calc(36 / 1080 * 100vh);
  letter-spacing: calc(6 / 1920 * 100vw);
}

.xukongzang-panel-03-copy__en {
  width: calc(206 / 1920 * 100vw);
  margin: 0 auto;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 / 1080 * 100vh);
}

.detail-main--xukongzang.is-panel-03 .xukongzang-panel-03-copy__next {
  animation:
    xukongzang-panel-next-in var(--local-next-in-duration) ease forwards var(--local-next-delay);
}

@keyframes xukongzang-panel-copy-mask {
  0% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes xukongzang-panel-01-bg-cover-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes xukongzang-panel-next-in {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes xukongzang-panel-next-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgb(255 216 133 / 0.3));
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgb(255 216 133 / 0.9));
    opacity: 1;
    transform: scale(1.1);
  }
}

.detail-main--xukongzang .xukongzang-detail-image {
  position: absolute;
  left: var(--panel-04-left);
  top: var(--panel-04-top);
  width: var(--panel-04-width);
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: left, top, width;
}

.detail-main--xukongzang.is-panel-04 .xukongzang-detail-image {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  visibility: visible;
  -webkit-user-drag: none;
  user-drag: none;
}

.detail-main--xukongzang.is-panel-04.is-dragging .xukongzang-detail-image {
  cursor: grabbing;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .xukongzang-detail-image {
  transition: none;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-revealing .xukongzang-detail-image {
  animation: xukongzang-panel-04-image-zoom-out 3000ms linear forwards;
  transform-origin: 50% 50%;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-intro .xukongzang-detail-image {
  left: var(--detail-panel-04-intro-left);
  top: var(--detail-panel-04-intro-top);
  z-index: 2;
  width: var(--detail-panel-04-intro-width);
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  visibility: visible;
  clip-path: inset(50% 50% 50% 50%);
  transform: none;
  transition: none;
  animation: xukongzang-panel-04-intro-image-reveal var(--detail-panel-04-intro-reveal-duration) linear var(--detail-panel-04-image-delay) forwards;
}

.detail-panel-04-intro {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.detail-main--local-panels.is-panel-04.is-panel-04-intro .detail-panel-04-intro {
  opacity: 1;
  pointer-events: none;
  visibility: visible;
  transition: opacity 600ms ease 180ms;
}

.detail-main--local-panels.is-panel-04.is-panel-04-revealing .detail-panel-04-intro,
.detail-main--local-panels.is-panel-04.is-panel-04-ready .detail-panel-04-intro {
  opacity: 0;
  visibility: hidden;
}

.detail-panel-04-intro__prompt {
  position: absolute;
  top: calc(540 / 1080 * 100vh);
  display: flex;
  width: calc(476.044 / 1920 * 100vw);
  flex-direction: column;
  align-items: center;
  color: #1a65c2;
  text-align: center;
  transform: translate(-50%, -50%);
}

.detail-panel-04-intro__prompt img {
  display: block;
  width: calc(48 / 1920 * 100vw);
  height: calc(48 / 1920 * 100vw);
  margin-bottom: calc(16 / 1080 * 100vh);
  opacity: 0;
  transform-origin: center;
}

.detail-panel-04-intro__prompt p {
  margin: 0;
}

.detail-panel-04-intro__prompt span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.detail-main--local-panels.is-panel-04.is-panel-04-intro .detail-panel-04-intro__prompt span {
  animation: xukongzang-panel-copy-mask var(--detail-panel-04-intro-copy-duration) linear forwards;
  animation-delay: calc(var(--detail-panel-04-copy-delay) + var(--line-index) * var(--local-line-stagger));
}

.detail-main--local-panels.is-panel-04.is-panel-04-intro .detail-panel-04-intro__prompt img {
  animation: xukongzang-panel-04-intro-icon-in 500ms ease var(--detail-panel-04-intro-icon-delay) both,
    xukongzang-panel-04-intro-icon-wiggle 2500ms ease-in-out calc(var(--detail-panel-04-intro-icon-delay) + 500ms) infinite;
}

.xukongzang-panel-04-intro__prompt--cn {
  left: calc(318.98 / 1920 * 100vw);
  width: calc(217.189 / 1920 * 100vw);
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1.2;
}

.xukongzang-panel-04-intro__prompt--en {
  left: calc(1551.8 / 1920 * 100vw);
  width: calc(476.044 / 1920 * 100vw);
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 / 1920 * 100vw);
  line-height: 1;
  text-transform: uppercase;
}

body.is-entry-portal-handoff .detail-main--xukongzang .xukongzang-detail-image {
  transition: none;
}

@keyframes panel-04-image-zoom-in {
  0% {
    opacity: 0;
    transform: scale(3);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes xukongzang-panel-04-image-zoom-out {
  0% {
    left: var(--detail-panel-04-intro-left);
    top: var(--detail-panel-04-intro-top);
    width: var(--detail-panel-04-intro-width);
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
  100% {
    left: var(--panel-04-left);
    top: var(--panel-04-top);
    width: var(--panel-04-width);
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

@keyframes xukongzang-panel-04-intro-image-reveal {
  0% {
    clip-path: inset(50% 50% 50% 50%);
  }
  100% {
    clip-path: inset(0);
  }
}

@keyframes xukongzang-panel-04-paper-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes xukongzang-panel-04-intro-icon-in {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes xukongzang-panel-04-intro-icon-wiggle {
  0%,
  40%,
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  10% {
    opacity: 1;
    transform: rotate(-10deg) scale(1);
  }
  20% {
    opacity: 1;
    transform: rotate(9deg) scale(1);
  }
  30% {
    opacity: 1;
    transform: rotate(-6deg) scale(1);
  }
}

@keyframes ershiyidumu-black-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ershiyidumu-black-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ershiyidumu-panel-02-image-in {
  0% {
    left: calc(var(--ershiyidumu-stage-left) + -33 / 1920 * var(--ershiyidumu-stage-width));
    top: calc(var(--ershiyidumu-stage-top) + -783.53 / 1920 * var(--ershiyidumu-stage-width));
    width: calc(2064.796 / 1920 * var(--ershiyidumu-stage-width));
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  100% {
    left: calc(var(--ershiyidumu-stage-left) + -33 / 1920 * var(--ershiyidumu-stage-width));
    top: calc(var(--ershiyidumu-stage-top) + -1865 / 1920 * var(--ershiyidumu-stage-width));
    width: calc(3687 / 1920 * var(--ershiyidumu-stage-width));
    opacity: 1;
  }
}

@keyframes ershiyidumu-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ershiyidumu-panel-02-image-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes huangcaishen-black-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes huangcaishen-black-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes huangcaishen-panel-01-image-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-18vw, -16vh, 0) scale(1.52);
  }
}

@keyframes huangcaishen-panel-02-image-in {
  0% {
    opacity: 0;
    transform: scale(3);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes huangcaishen-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes huangcaishen-panel-02-image-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes sibiguanyin-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sibiguanyin-panel-01-image-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -14vh, 0) scale(2.2);
  }
}

@keyframes matoumingwang-black-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes matoumingwang-black-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes matoumingwang-panel-01-image-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(14vw, -14vh, 0) scale(2.2);
  }
}

@keyframes matoumingwang-panel-02-image-in {
  0% {
    opacity: 0;
    transform: scale(3);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes matoumingwang-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes matoumingwang-panel-02-image-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes qianshouguanyin-black-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes qianshouguanyin-black-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes qianshouguanyin-spotlight-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes qianshouguanyin-panel-01-image-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  82% {
    opacity: 1;
    transform: translate3d(calc(104 * var(--qianshouguanyin-scale)), calc(-1377 * var(--qianshouguanyin-scale)), 0) scale(1.752);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(104 * var(--qianshouguanyin-scale)), calc(-1377 * var(--qianshouguanyin-scale)), 0) scale(1.752);
  }
}

@keyframes qianshouguanyin-panel-02-image-in {
  0% {
    opacity: 0;
    transform: scale(3);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qianshouguanyin-panel-02-image-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  78% {
    opacity: 1;
    transform: scale(2.35);
  }
  100% {
    opacity: 0;
    transform: scale(2.65);
  }
}

body.jintang-detail-page,
.detail-main--jintang {
  --jintang-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  --jintang-stage-left: calc((100vw - 1920 * var(--jintang-scale)) / 2);
  --jintang-stage-top: calc((100vh - 1080 * var(--jintang-scale)) / 2);
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000000;
}

body.jintang-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
    radial-gradient(
      ellipse calc(2239 * var(--jintang-scale)) calc(2243 * var(--jintang-scale)) at calc(var(--jintang-stage-left) + 959.5 * var(--jintang-scale)) calc(var(--jintang-stage-top) + 542.5 * var(--jintang-scale)),
      rgb(0 0 0 / 0) 0 42%,
      rgb(0 0 0 / 0.04) 52%,
      rgb(0 0 0 / 0.68) 72%,
      rgb(0 0 0 / 0.96) 88%,
      #000 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0.52) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.48) 78%, rgb(0 0 0 / 0.96) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.96) 0%, rgb(0 0 0 / 0.48) 24%, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / 0.48) 78%, rgb(0 0 0 / 0.96) 100%);
  opacity: 0;
  pointer-events: none;
}

body.jintang-detail-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #000000;
  pointer-events: none;
  animation: jintang-opening-black-out 2200ms linear 220ms forwards;
}

body.jintang-detail-page.is-entry-portal-handoff {
  --spotlight-black-opacity: 1;
}

body.jintang-detail-page.is-jintang-panel-01-ready::after {
  animation: jintang-spotlight-in 2200ms linear 220ms forwards;
}

.detail-main--jintang .jintang-panel-image {
  position: absolute;
  left: calc(var(--jintang-stage-left) + -2633 * var(--jintang-scale));
  top: calc(var(--jintang-stage-top) + -598 * var(--jintang-scale));
  width: calc(7128 * var(--jintang-scale));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  will-change: opacity, transform;
}

.jintang-panel-01-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  visibility: visible;
  transform: none;
  pointer-events: none;
}

body.jintang-detail-page.is-jintang-panel-01-ready .jintang-panel-01-copy {
  animation: jintang-panel-copy-in 520ms linear 2600ms forwards;
}

.jintang-panel-01-copy span {
  display: block;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

body.jintang-detail-page.is-jintang-panel-01-ready .jintang-panel-01-copy span {
  animation: xukongzang-panel-copy-mask 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(2600ms + var(--line-index) * 80ms);
}

.jintang-panel-01-copy__cn {
  position: absolute;
  left: calc(var(--jintang-stage-left) + 1626 * var(--jintang-scale));
  top: calc(var(--jintang-stage-top) + 323 * var(--jintang-scale));
  width: calc(364 * var(--jintang-scale));
  margin: 0;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--jintang-scale));
  font-weight: 400;
  line-height: calc(36 * var(--jintang-scale));
  letter-spacing: calc(6 * var(--jintang-scale));
  transform: translateX(-50%);
  white-space: nowrap;
}

.jintang-panel-01-copy__en {
  position: absolute;
  left: calc(var(--jintang-stage-left) + 1626 * var(--jintang-scale));
  top: calc(var(--jintang-stage-top) + 503 * var(--jintang-scale));
  width: calc(302 * var(--jintang-scale));
  margin: 0;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: calc(24 * var(--jintang-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(30 * var(--jintang-scale));
  transform: translateX(-50%);
  white-space: normal;
}

.jintang-panel-01-copy__next {
  display: block;
  position: absolute;
  left: calc(var(--jintang-stage-left) + 1604 * var(--jintang-scale));
  top: calc(var(--jintang-stage-top) + 716 * var(--jintang-scale));
  width: calc(40 * var(--jintang-scale));
  min-width: 24px;
  height: calc(40 * var(--jintang-scale));
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transform: scale(1);
}

body.jintang-detail-page.is-jintang-panel-01-ready .jintang-panel-01-copy__next {
  animation:
    xukongzang-panel-next-in 520ms ease forwards 3360ms,
    xukongzang-panel-next-breathe 1800ms ease-in-out infinite 3880ms;
}

.jintang-panel-01-copy__next:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 0 10px rgb(255 216 133 / 0.62));
  opacity: 1;
  transform: scale(1.1);
}

.jintang-panel-01-copy__next img {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes jintang-opening-black-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes jintang-spotlight-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes jintang-panel-copy-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.panel-floating-nav {
  position: fixed;
  left: 50%;
  bottom: 36px;
  z-index: 6;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 48px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 16px, 0);
  transition:
    width 1000ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 360ms ease,
    transform 360ms ease;
  overflow: visible;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav {
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .panel-floating-nav {
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .panel-floating-nav {
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .panel-floating-nav {
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .panel-floating-nav {
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .panel-floating-nav {
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .panel-floating-nav {
  bottom: calc((100vh - 1080 * var(--ludumu-scale)) / 2 + 120 * var(--ludumu-scale));
  width: 338px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}

.panel-floating-nav__item {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  text-decoration: none;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .panel-floating-nav__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .panel-floating-nav__item:nth-child(1) {
  transition-delay: 420ms;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .panel-floating-nav__item:nth-child(2) {
  transition-delay: 540ms;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .panel-floating-nav__item:nth-child(3) {
  transition-delay: 660ms;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .panel-floating-nav__item:nth-child(4) {
  transition-delay: 780ms;
}

.panel-floating-nav__item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  transition: transform 220ms ease;
}

.panel-floating-nav__item:hover img {
  transform: scale(1.1);
}

.panel-floating-nav__item:nth-child(1) img {
  width: 24px;
  height: 24px;
}

.panel-floating-nav__item:nth-child(2) img {
  width: 24px;
  height: 24px;
}

.panel-floating-nav__item:nth-child(3) img {
  width: 21px;
  height: 24px;
}

.panel-floating-nav__item:nth-child(4) img {
  width: 24px;
  height: 24px;
}

.panel-floating-nav__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  color: #ffffff;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate3d(-50%, 6px, 0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.panel-floating-nav__item:hover .panel-floating-nav__label {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.detail-zoom-hint {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: flex;
  width: 200px;
  height: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 54%;
  transition: opacity 360ms ease;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--xukongzang.is-panel-04.is-panel-04-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--xukongzang.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--ershiyidumu.is-panel-04.is-panel-04-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--ershiyidumu.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--huangcaishen.is-panel-04.is-panel-04-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--huangcaishen.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--sibiguanyin.is-panel-04.is-panel-04-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--sibiguanyin.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--matoumingwang.is-panel-04.is-panel-04-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--matoumingwang.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--qianshouguanyin.is-panel-03.is-panel-03-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--qianshouguanyin.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-main--ludumu.is-panel-05.is-panel-05-ready.is-zoom-hint-dismissed .detail-zoom-hint,
.detail-main--ludumu.is-zoom-hint-dismissed .detail-zoom-hint {
  opacity: 0;
  animation: none;
}

.detail-zoom-hint__icon {
  display: block;
  width: 64px !important;
  height: 64px !important;
  max-width: none;
  margin: 0 auto 18px;
}

.detail-zoom-hint__copy {
  margin: 0;
  color: #ffffff;
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
}

.detail-zoom-hint__copy span {
  display: block;
}

@keyframes detail-zoom-hint-nudge {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  18% {
    transform: translate3d(-50%, -50%, 0) rotate(-3deg);
  }
  36% {
    transform: translate3d(-50%, -50%, 0) rotate(3deg);
  }
  54% {
    transform: translate3d(-50%, -50%, 0) rotate(-2deg);
  }
  72% {
    transform: translate3d(-50%, -50%, 0) rotate(2deg);
  }
  88% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
}

@media (max-width: 960px) {
  .detail-main--xukongzang {
    min-height: 100dvh;
    --xukongzang-mobile-hero-width: min(283.582vw, 128.959dvh);
    --xukongzang-mobile-hero-height: min(383.085vw, 174.208dvh);
    --xukongzang-panel-02-width: max(360vw, 166dvh);
  }

  .detail-main--xukongzang::before {
    left: calc(50vw - min(141.791vw, 64.48dvh));
    top: calc(50dvh - min(179.353vw, 81.334dvh));
    width: var(--xukongzang-mobile-hero-width);
    height: var(--xukongzang-mobile-hero-height);
    background-size: cover;
  }

  .detail-main--xukongzang::after {
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.12) 0%, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / 0.55) 100%),
      radial-gradient(
        ellipse 92vw 68vh at 50% 42%,
        rgb(0 0 0 / 0) 0 44%,
        rgb(0 0 0 / 0.2) 70%,
        rgb(0 0 0 / 0.82) 100%
      );
  }

  body.xukongzang-detail-page {
    --xukongzang-panel-mask:
      linear-gradient(180deg, rgb(0 0 0 / 0.1) 0%, rgb(0 0 0 / 0) 34%, rgb(0 0 0 / 0.72) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.1) 28%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.1) 72%, rgb(0 0 0 / 0.72) 100%);
  }

  body.xukongzang-detail-page.is-xukongzang-panel-02-mask {
    --xukongzang-panel-mask:
      radial-gradient(
        ellipse min(340.547vw, 154.864dvh) min(340.299vw, 154.751dvh) at 50% calc(50dvh - min(44.527vw, 20.249dvh)),
        rgb(0 0 0 / 0) 0 39%,
        rgb(0 0 0 / 0.28) 63%,
        rgb(0 0 0 / 0.88) 100%
      ),
      linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.06) 55%, rgb(0 0 0 / 0.78) 100%);
  }

  body.xukongzang-detail-page.is-xukongzang-panel-03-mask {
    --xukongzang-panel-mask:
      radial-gradient(
        ellipse min(293.532vw, 133.484dvh) min(293.532vw, 133.484dvh) at 50% calc(50dvh + min(6.716vw, 3.054dvh)),
        rgb(0 0 0 / 0) 0 42%,
        rgb(0 0 0 / 0.16) 57%,
        rgb(0 0 0 / 0.64) 78%,
        rgb(0 0 0 / 0.96) 100%
      ),
      linear-gradient(180deg, rgb(0 0 0 / 0.96) 0%, rgb(0 0 0 / 0.76) 17%, rgb(0 0 0 / 0.24) 35%, rgb(0 0 0 / 0) 46%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / 0.58) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 0.86) 0%, rgb(0 0 0 / 0.2) 34%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.2) 66%, rgb(0 0 0 / 0.86) 100%);
  }

  body.xukongzang-detail-page.is-xukongzang-panel-03-mask::after {
    background:
      linear-gradient(rgba(0, 0, 0, var(--spotlight-black-opacity, 0)), rgba(0, 0, 0, var(--spotlight-black-opacity, 0))),
      var(--xukongzang-panel-mask);
  }

  .detail-main--xukongzang.is-panel-03::after {
    background: transparent;
  }

  .detail-main--xukongzang .xukongzang-panel-image {
    left: calc(50vw - min(1.134vw, 0.516dvh));
    top: calc(50dvh - min(38.953vw, 17.714dvh));
    width: var(--xukongzang-mobile-hero-width);
    transform: translate(-49.6%, -36.65%);
  }

  .detail-main--xukongzang.is-panel-02 .xukongzang-panel-image {
    left: calc(50vw + min(0.062vw, 0.028dvh));
    top: calc(50dvh + min(14.862vw, 6.759dvh));
    width: min(575.373vw, 261.652dvh);
  }

  .detail-main--xukongzang.is-panel-03 .xukongzang-panel-image {
    left: calc(50vw + min(0.062vw, 0.028dvh));
    top: calc(50dvh + min(14.862vw, 6.759dvh));
    width: min(575.373vw, 261.652dvh);
    transition:
      opacity 1200ms linear,
      visibility 1200ms linear;
  }

  .detail-main--xukongzang .xukongzang-panel-03-image {
    left: calc(50vw - min(292.04vw, 132.805dvh));
    top: calc(50dvh - min(394.527vw, 179.412dvh));
    width: min(500.746vw, 227.715dvh);
  }

  .detail-main--xukongzang.is-panel-03 .xukongzang-panel-03-image {
    animation: none;
    transition-delay: 1600ms;
  }

  .xukongzang-panel-01-copy,
  .xukongzang-panel-02-copy,
  .xukongzang-panel-03-copy {
    width: min(76vw, 340px);
  }

  .xukongzang-panel-01-copy {
    left: 50vw;
    top: calc(50dvh + min(9.95vw, 4.525dvh));
    bottom: auto;
    width: min(40.796vw, 18.552dvh);
  }

  .xukongzang-panel-02-copy {
    left: 50vw;
    top: calc(50dvh + min(42.537vw, 19.344dvh));
    bottom: auto;
    width: min(30.348vw, 13.801dvh);
    transform: translateX(-50%);
  }

  .xukongzang-panel-03-copy {
    left: 50vw;
    top: calc(50dvh - min(87.313vw, 39.706dvh));
    width: min(27.861vw, 12.67dvh);
    transform: translateX(-50%);
  }

  .xukongzang-panel-01-copy__cn,
  .xukongzang-panel-02-copy__cn,
  .xukongzang-panel-03-copy__cn {
    width: min(100%, 260px);
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.5;
    letter-spacing: 0.18em;
  }

  .xukongzang-panel-01-copy__cn {
    width: min(40.796vw, 18.552dvh);
    font-size: min(3.98vw, 1.81dvh);
    line-height: min(5.97vw, 2.715dvh);
    letter-spacing: min(0.995vw, 0.452dvh);
  }

  .xukongzang-panel-02-copy__cn {
    width: min(30.348vw, 13.801dvh);
    font-size: min(3.98vw, 1.81dvh);
    line-height: min(5.97vw, 2.715dvh);
    letter-spacing: min(0.995vw, 0.452dvh);
  }

  .xukongzang-panel-03-copy__cn {
    width: min(27.861vw, 12.67dvh);
    font-size: min(3.98vw, 1.81dvh);
    line-height: min(5.97vw, 2.715dvh);
    letter-spacing: min(0.995vw, 0.452dvh);
  }

  .xukongzang-panel-01-copy__en,
  .xukongzang-panel-02-copy__en,
  .xukongzang-panel-03-copy__en {
    width: min(100%, 340px);
    margin-top: 6px;
    font-size: clamp(17px, 4.8vw, 22px);
    line-height: 1.26;
  }

  .xukongzang-panel-01-copy__en {
    width: min(30.1vw, 13.688dvh);
    margin-top: min(0.249vw, 0.113dvh);
    font-size: min(2.985vw, 1.357dvh);
    line-height: min(4.975vw, 2.262dvh);
  }

  .xukongzang-panel-02-copy__en {
    width: min(29.602vw, 13.462dvh);
    margin-top: max(-0.249vw, -0.113dvh);
    font-size: min(2.985vw, 1.357dvh);
    line-height: min(4.975vw, 2.262dvh);
  }

  .xukongzang-panel-03-copy__en {
    width: min(25.871vw, 11.765dvh);
    margin-top: 0;
    font-size: min(2.985vw, 1.357dvh);
    line-height: min(4.975vw, 2.262dvh);
  }

  .xukongzang-panel-01-copy__zodiac {
    margin-top: min(4.229vw, 1.923dvh);
  }

  .xukongzang-panel-01-copy__zodiac-cn {
    width: min(31.095vw, 14.14dvh);
    font-size: min(2.239vw, 1.018dvh);
    line-height: min(3.358vw, 1.527dvh);
  }

  .xukongzang-panel-01-copy__zodiac-en {
    width: min(34.577vw, 15.724dvh);
    margin-top: max(-0.498vw, -0.226dvh);
    font-size: min(2.239vw, 1.018dvh);
    line-height: min(3.731vw, 1.697dvh);
  }

  .detail-main--local-panels .detail-local-next {
    width: min(7.96vw, 3.62dvh);
    min-width: 0;
    height: min(7.96vw, 3.62dvh);
    min-height: 0;
    margin-top: min(7.96vw, 3.62dvh);
  }

  .detail-main--xukongzang .xukongzang-detail-image {
    min-width: 100vw;
  }

  .detail-main--xukongzang {
    --xukongzang-panel-04-intro-width: min(61.728vw, 28.077dvh);
    --xukongzang-panel-04-intro-left: calc(50vw - min(30.864vw, 14.0385dvh));
    --xukongzang-panel-04-intro-top: calc(50dvh - min(41.78vw, 18.995dvh));
  }

  .xukongzang-panel-04-intro__prompt {
    width: min(34vw, 160px);
  }

  .xukongzang-panel-04-intro__prompt img {
    width: min(8vw, 32px);
    height: min(8vw, 32px);
    margin-bottom: 8px;
  }

  .xukongzang-panel-04-intro__prompt--cn {
    left: 16vw;
    font-size: min(3.2vw, 14px);
  }

  .xukongzang-panel-04-intro__prompt--en {
    left: 84vw;
    font-size: min(3vw, 13px);
  }

  .detail-main--xukongzang.is-panel-04.is-panel-04-ready .panel-floating-nav {
    left: calc(50vw - min(2.239vw, 1.018dvh));
    top: calc(50dvh + min(77.612vw, 35.294dvh));
    bottom: auto;
    width: min(84.08vw, 38.235dvh);
    height: min(13.93vw, 6.335dvh);
    gap: min(11.94vw, 5.43dvh);
  }

  .detail-main--xukongzang.is-panel-04,
  .detail-main--xukongzang.is-panel-04 .xukongzang-detail-image {
    touch-action: none;
  }

  .panel-floating-nav {
    bottom: max(24px, env(safe-area-inset-bottom));
    height: 52px;
    gap: clamp(32px, 10vw, 48px);
  }

  .tertiary-main--preview {
    cursor: auto;
    min-height: 100dvh;
  }

  .tertiary-main--preview .preview-scene-image,
  .tertiary-main--preview .preview-cursor-arrow {
    display: none;
  }

  .preview-mobile-frame {
    position: absolute;
    left: 50%;
    top: calc(50dvh - min(0.124vw, 0.057dvh));
    display: block;
    width: min(90.05vw, 40.95dvh);
    height: min(120.647vw, 54.864dvh);
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
  }

  .preview-mobile-frame__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 260ms ease;
  }

  .preview-mobile-frame__image.is-switching {
    opacity: 0;
  }

  .tertiary-main--preview[data-preview-index="1"] .preview-mobile-frame__image {
    width: 187.57%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    transform: translate3d(-32.11%, 0, 0);
  }

  .preview-mobile-switch {
    position: absolute;
    top: calc(50dvh + min(63.93vw, 29.072dvh));
    z-index: 5;
    display: grid;
    width: min(3.98vw, 1.81dvh);
    height: min(3.483vw, 1.584dvh);
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
  }

  .tertiary-main--preview[data-preview-index="0"] .preview-mobile-switch--next,
  .tertiary-main--preview[data-preview-index="1"] .preview-mobile-switch--prev {
    opacity: 1;
    pointer-events: auto;
  }

  .preview-mobile-switch--next {
    left: calc(50vw + min(41.045vw, 18.665dvh));
  }

  .preview-mobile-switch--prev {
    left: calc(50vw - min(44.279vw, 20.136dvh));
  }

  .preview-mobile-switch span,
  .preview-mobile-switch span::before {
    display: block;
    width: min(2.239vw, 1.018dvh);
    height: min(2.239vw, 1.018dvh);
    border-right: min(0.746vw, 0.339dvh) solid #ffffff;
    border-bottom: min(0.746vw, 0.339dvh) solid #ffffff;
    transform: rotate(-45deg);
  }

  .preview-mobile-switch span::before {
    content: "";
    margin-left: max(-1.493vw, -0.679dvh);
  }

  .preview-mobile-switch--prev span,
  .preview-mobile-switch--prev span::before {
    transform: rotate(135deg);
  }

  .preview-return-link {
    left: 50vw;
    top: calc(50dvh + min(92.537vw, 42.081dvh));
    bottom: auto;
    width: min(5.97vw, 2.715dvh);
    height: min(5.97vw, 2.715dvh);
    overflow: visible;
  }

  .preview-return-link img {
    width: min(8.955vw, 4.073dvh);
    height: min(8.955vw, 4.073dvh);
    transform: translate3d(max(-1.493vw, -0.679dvh), max(-1.493vw, -0.679dvh), 0);
  }
}

.panel-intro--xukongzang {
  position: absolute;
  z-index: 3;
  --panel-scale: min(
    calc(100vw / 1440),
    calc((100vh - var(--header-height) - 36px) / 880)
  );
  right: calc(56 * var(--panel-scale));
  top: calc(var(--header-height) + 18px);
  width: calc(678 * var(--panel-scale));
  height: calc(880 * var(--panel-scale));
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--panel-scale));
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
  transform: translate3d(0, calc(100vh + 40px), 0);
  transform-origin: 50% 100%;
  visibility: visible;
  transition: transform 1000ms cubic-bezier(0.18, 0.84, 0.28, 1);
  will-change: transform;
}

.panel-intro__content {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition:
    opacity 320ms ease,
    visibility 320ms ease;
  visibility: visible;
}

.panel-intro__content--panel-01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--panel-scale));
}

.panel-intro__content--panel-02 {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.panel-intro__preview,
.panel-intro__title,
.panel-intro__subtitle {
  position: relative;
  z-index: 2;
}

body.is-detail-intro-frame-mounted .panel-intro--xukongzang {
  display: flex;
}

body.is-detail-intro-frame-visible .panel-intro--xukongzang {
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.detail-main--xukongzang.is-panel-03 .panel-intro--xukongzang {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.detail-main--xukongzang.is-panel-02 .panel-intro__content--panel-01 {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.detail-main--xukongzang.is-panel-02 .panel-intro__content--panel-02 {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.panel-intro__preview {
  width: calc(332 * var(--panel-scale));
  aspect-ratio: 332 / 448;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.86) 96%),
    radial-gradient(circle at 50% 26%, rgba(0, 0, 0, 0) 0 28%, rgba(0, 0, 0, 0.64) 72%),
    url("assets/xukongzang-panel-preview.jpg") center / cover no-repeat;
}

.panel-intro__preview {
  opacity: 0;
  transform: translate3d(0, calc(14 * var(--panel-scale)), 0);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

body.is-detail-intro-content-visible .panel-intro__preview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.panel-intro__panel02-preview {
  position: absolute;
  top: calc(131 * var(--panel-scale));
  left: 50%;
  width: calc(333 * var(--panel-scale));
  aspect-ratio: 1;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  transition:
    opacity 1520ms ease;
  transition-delay: 1000ms;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.78) 100%),
    radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 0 34%, rgba(0, 0, 0, 0.36) 84%),
    url("assets/xukongzang-panel-02-preview.jpg") center / cover no-repeat;
}

.detail-main--xukongzang.is-panel-02 .panel-intro__panel02-preview {
  opacity: 1;
}

.panel-intro__panel02-copy,
.panel-intro__panel02-copy p {
  margin: 0;
}

.panel-intro__panel02-copy-cn,
.panel-intro__panel02-copy-en {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition:
    -webkit-mask-position 5000ms cubic-bezier(0.2, 0.8, 0.2, 1),
    mask-position 5000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.panel-intro__panel02-copy-cn {
  top: calc(512 * var(--panel-scale));
  width: calc(461 * var(--panel-scale));
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(16 * var(--panel-scale));
  line-height: calc(20 * var(--panel-scale));
  transition-delay: 1000ms;
}

.panel-intro__panel02-copy-en {
  top: calc(609 * var(--panel-scale));
  width: calc(588 * var(--panel-scale));
  font-family: "EB Garamond", Georgia, serif;
  font-size: calc(20 * var(--panel-scale));
  font-style: italic;
  line-height: calc(20 * var(--panel-scale));
  transition-delay: 1000ms;
}

.detail-main--xukongzang.is-panel-02 .panel-intro__panel02-copy-cn,
.detail-main--xukongzang.is-panel-02 .panel-intro__panel02-copy-en {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.panel-intro__body,
.panel-intro__body p,
.panel-intro__title,
.panel-intro__subtitle {
  margin: 0;
}

.panel-intro__body {
  display: grid;
  justify-items: center;
  color: #ffffff;
  text-align: center;
}

.panel-intro__body-cn {
  width: calc(461 * var(--panel-scale));
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(16 * var(--panel-scale));
  font-weight: 400;
  line-height: calc(20 * var(--panel-scale));
}

.panel-intro__body-en {
  width: calc(588 * var(--panel-scale));
  margin-top: calc(-4 * var(--panel-scale));
  font-family: "EB Garamond", Georgia, serif;
  font-size: calc(20 * var(--panel-scale));
  font-style: italic;
  font-weight: 400;
  line-height: calc(20 * var(--panel-scale));
}

.panel-intro__title-cn {
  margin: 0 0 calc(4 * var(--panel-scale));
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(48 * var(--panel-scale));
  font-weight: 400;
  line-height: 1;
}

.panel-intro__title-en {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: calc(48 * var(--panel-scale));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.panel-intro__title,
.panel-intro__subtitle {
  clip-path: inset(0);
  opacity: 1;
}

.panel-intro__title-cn,
.panel-intro__title-en,
.panel-intro__subtitle-cn,
.panel-intro__subtitle-en span {
  --text-reveal-delay: 0ms;
  display: block;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 58%,
    transparent 100%
  );
  -webkit-mask-size: 230% 100%;
  mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition:
    -webkit-mask-position 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--text-reveal-delay),
    mask-position 3000ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--text-reveal-delay);
}

body.is-detail-intro-content-visible .panel-intro__title-cn,
body.is-detail-intro-content-visible .panel-intro__title-en,
body.is-detail-intro-content-visible .panel-intro__subtitle-cn,
body.is-detail-intro-content-visible .panel-intro__subtitle-en span {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.panel-intro__title-cn {
  --text-reveal-delay: 90ms;
}

.panel-intro__title-en {
  --text-reveal-delay: 150ms;
}

.panel-intro__subtitle {
  margin-top: 0;
}

.panel-intro__subtitle-cn {
  margin: 0 0 calc(3 * var(--panel-scale));
  font-family: "FZShuSong-Z01", "Songti SC", "SimSun", serif;
  font-size: calc(24 * var(--panel-scale));
  font-weight: 400;
  line-height: 1;
}

.panel-intro__subtitle-en {
  display: grid;
  gap: 0;
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: calc(26 * var(--panel-scale));
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  text-transform: capitalize;
}

.panel-intro__subtitle-cn {
  --text-reveal-delay: 260ms;
}

.panel-intro__subtitle-en span:first-child {
  --text-reveal-delay: 320ms;
}

.panel-intro__subtitle-en span:last-child {
  --text-reveal-delay: 380ms;
}

body.is-detail-intro-content-visible .panel-intro__subtitle {
  transition-delay: 180ms;
}

.magic-line-canvas {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.scroll-spacer {
  height: 100vh;
}

.record-footer {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: 36px;
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 180ms linear;
}

body.is-page-end .record-footer {
  opacity: 1;
}

.record-footer__text {
  width: max-content;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.site-footer {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 480px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  background: var(--color-page);
  color: var(--color-text);
}

.footer-contact {
  position: absolute;
  top: 80px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 300;
  line-height: 24px;
  text-decoration: none;
  transform: translateX(-50%);
}

.footer-contact img {
  display: block;
  width: 28px;
  height: 28px;
}

.footer-logo {
  position: absolute;
  top: 183px;
  left: 50%;
  display: block;
  width: min(47.1vw, 678px);
  height: auto;
  transform: translateX(-50%);
}

.footer-record {
  position: absolute;
  bottom: 36px;
  left: 50%;
  width: max-content;
  margin: 0;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}