:root {
  color-scheme: dark;
  --page-bg: #020713;
  --edge: rgba(18, 193, 252, 0.36);
  --light: rgba(255, 255, 255, 0.2);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--page-bg);
  font-family:
    Arial,
    "Microsoft YaHei",
    sans-serif;
}

.home,
.hero {
  width: 100vw;
  height: 100vh;
}

.hero {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 47, 91, 0.22), transparent 52%),
    var(--page-bg);
}

.scene {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #020713;
  cursor: none;
  transform-origin: 50% 50%;
  touch-action: manipulation;
}

.artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.artwork-main {
  z-index: 1;
  will-change: transform, opacity, filter;
}

.artwork-final {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  will-change: transform, opacity, filter;
}

.artwork-work {
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  will-change: transform, opacity, filter;
}

.artwork-work-bg {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  will-change: transform, opacity, filter;
}

.artwork-works-show {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}

.artwork-contact {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  will-change: transform, opacity, filter;
}

.artwork-menu {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  will-change: transform, opacity, filter;
}

.artwork-ghost {
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.artwork-ghost-a {
  filter: hue-rotate(175deg) saturate(1.5);
}

.artwork-ghost-b {
  filter: hue-rotate(300deg) saturate(1.4);
}

.reveal {
  position: absolute;
  left: -2%;
  z-index: 4;
  width: 104%;
  height: 52%;
  background:
    linear-gradient(90deg, transparent, rgba(18, 193, 252, 0.16), transparent),
    #020713;
  will-change: transform;
}

.reveal-top {
  top: -1%;
}

.reveal-bottom {
  bottom: -1%;
}

.scan {
  position: absolute;
  top: -20%;
  left: -18%;
  z-index: 3;
  width: 136%;
  height: 18%;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55), transparent),
    linear-gradient(90deg, transparent, var(--edge), transparent);
  filter: blur(12px);
  transform: rotate(-8deg);
  will-change: transform, opacity;
  pointer-events: none;
}

.count-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(18, 193, 252, 0.34), transparent 24%),
    radial-gradient(circle at 78% 80%, rgba(5, 88, 180, 0.38), transparent 34%),
    linear-gradient(145deg, #020713 0%, #021533 48%, #063f86 100%);
  will-change: transform, opacity;
  pointer-events: none;
}

.count-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 44vmin;
  color: #f7fbff;
  font-family:
    "Arial Narrow",
    Arial,
    "Microsoft YaHei",
    sans-serif;
  font-size: clamp(72px, 13vmin, 180px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0;
  text-shadow:
    0 0 18px rgba(18, 193, 252, 0.64),
    0 0 48px rgba(81, 162, 250, 0.38);
  transform: translateY(-4vmin);
  will-change: transform, opacity;
}

.count-unit {
  margin-left: 0.08em;
  font-size: 0.36em;
  font-weight: 700;
}

.count-track {
  position: absolute;
  top: calc(50% + 8.5vmin);
  left: 50%;
  width: min(38vmin, 420px);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}

.count-progress {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #12c1fc, #ffffff, #51a2fa);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.cursor-light {
  display: none;
  position: absolute;
  z-index: 5;
  width: 28vmin;
  height: 28vmin;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(18, 193, 252, 0.18), transparent 68%);
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  pointer-events: none;
}

.blob-container {
  position: absolute;
  inset: 0;
  z-index: 1600;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}

.blob-filter {
  position: absolute;
  width: 0;
  height: 0;
}

.blob-main {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.blob {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0);
  will-change: transform, opacity;
  backdrop-filter: blur(2px);
}

.blob.is-glass {
  border-width: 0;
  mix-blend-mode: difference;
  backdrop-filter: none;
}

.blob.is-arrow {
  backdrop-filter: blur(3px);
}

.inner-dot {
  position: absolute;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.24);
}

.cursor-arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: rgba(3, 5, 8, 0.96);
  font-family: "鎬濇簮榛戜綋 CN Regular", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.work-wipe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 14%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(18, 193, 252, 0.2), rgba(5, 88, 180, 0.55) 48%, rgba(2, 7, 19, 0.94) 72%),
    rgba(2, 7, 19, 0.86);
  transform: translate3d(-50%, -50%, 0) scale(0.9);
  will-change: transform, opacity;
  pointer-events: none;
}

.start-spin-ring {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

.gallery-shell {
  position: absolute;
  inset: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.scene.is-work .gallery-shell {
  background: transparent;
  z-index: 140;
  inset: 0;
  height: auto;
  overflow: hidden;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.gallery-shell.is-previewing {
  z-index: 1300;
  inset: 0;
  mask-image: none;
  filter: none;
}

.keep-projects {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}

.keep-project-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.keep-project-motion {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: auto;
}

.keep-project-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 16 / 9;
  overflow: visible;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  color: rgba(255, 255, 255, 0.94);
  background: transparent;
  box-shadow: none;
  cursor: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.keep-project-float {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--card-color);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.26);
  transform-origin: 50% 50%;
  will-change: transform, box-shadow;
}

.keep-project-float::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.16), transparent 44%);
  pointer-events: none;
}

.keep-project-card:hover .keep-project-float {
  transform: scale(1.2);
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.4);
}

.keep-project-hover-title {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.keep-project-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 7%;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.12);
  transform: translateY(8px);
  will-change: transform, opacity;
  pointer-events: none;
}

.keep-project-number,
.keep-project-title {
  position: static;
  font-family: "鎬濇簮榛戜綋 CN Regular", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.keep-project-number {
  display: none;
}

.keep-project-title {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(14px, 2.25vmin, 34px);
  font-weight: 700;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.keep-project-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.12);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.86;
  pointer-events: none;
  will-change: transform, opacity;
}

.keep-project-more,
.works-type-button {
  position: absolute;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.98em;
  width: clamp(152px, 17.34vw, 311px);
  height: clamp(33px, 4.99vmin, 55px);
  padding: 0 clamp(17px, 2.21vw, 42px);
  border: 0;
  border-radius: 2px;
  color: #06080c;
  background: rgba(255, 255, 255, 0.96);
  font-family: "鎬濇簮榛戜綋 CN Regular", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(11px, 1.62vmin, 25px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: none;
  transform: translateX(-50%);
  will-change: transform, opacity;
}

.keep-project-more {
  bottom: 3.2%;
}

.works-type-button {
  bottom: 3.2%;
}

.works-type-button .works-type-chevron {
  font-size: 0.92em;
  line-height: 1;
  transition: transform 0.28s ease;
}

.works-type-button.is-open .works-type-chevron {
  transform: rotate(180deg);
}

.keep-project-more:hover,
.works-type-button:hover {
  transform: translateX(-50%) scale(1.025);
}

.works-type-menu {
  position: absolute;
  left: 50%;
  bottom: calc(3.2% + clamp(33px, 4.99vmin, 55px) + 12px);
  z-index: 6;
  display: flex;
  gap: clamp(8px, 1vw, 18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px);
  will-change: transform, opacity;
}

.works-type-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(96px, 10vw, 168px);
  height: clamp(38px, 5.2vmin, 58px);
  padding: 0 clamp(18px, 2vw, 34px);
  border: 0;
  border-radius: 2px;
  color: #06080c;
  background: rgba(255, 255, 255, 0.94);
  font-family: "鎬濇簮榛戜綋 CN Regular", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(12px, 1.55vmin, 22px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}

.works-type-option:hover,
.works-type-option.is-active {
  background: #ffffff;
  transform: translateY(-2px);
}

.keep-project-preview {
  position: absolute;
  inset: 0;
  z-index: 1300;
  opacity: 0;
  visibility: hidden;
  background: #020713;
  pointer-events: none;
}

.keep-project-preview-card {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  color: rgba(255, 255, 255, 0.94);
  background: var(--card-color);
  border-radius: 0;
  box-shadow: none;
  will-change: transform, width, height;
}

.gallery-shell.is-previewing .keep-project-preview {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.scene.is-project-previewing .gallery-shell,
.scene.is-project-previewing .gallery-shell.is-previewing {
  z-index: 1500 !important;
  inset: 0 !important;
  height: 100% !important;
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.scene.is-project-previewing .keep-project-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1500 !important;
}

.scene.is-project-previewing .artwork-work,
.scene.is-project-previewing .nav-overlay,
.scene.is-project-previewing .nav-button,
.scene.is-project-previewing .project-works-orbit,
.scene.is-project-previewing .music-toggle-button,
.scene.is-project-previewing .gallery-count {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.scene:not(.is-contact):not(.is-menu) .contact-exit-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.scene.is-works-previewing .works-masonry,
.scene.is-works-previewing .works-masonry.is-previewing {
  z-index: 4000 !important;
  inset: 0 !important;
}

.scene.is-works-previewing .masonry-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(2, 7, 19, 0.98) !important;
}

.scene.is-works-previewing .masonry-preview-frame {
  z-index: 5001 !important;
}

.scene.is-works-previewing .masonry-preview-close {
  z-index: 5002 !important;
  pointer-events: auto !important;
}

.scene.is-works-preview-closing .nav-overlay,
.scene.is-works-preview-closing .nav-button,
.scene.is-works-preview-closing .mobile-nav-hit,
.scene.is-works-preview-closing .project-works-orbit,
.scene.is-works-preview-closing .music-toggle-button,
.scene.is-works-preview-closing .contact-exit-button,
.scene.is-works-preview-closing .menu-exit-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.keep-project-preview-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 22%;
  background: linear-gradient(180deg, rgba(2, 7, 19, 0.78), rgba(2, 7, 19, 0));
  pointer-events: none;
}

.keep-project-preview-index,
.keep-project-preview-title {
  position: absolute;
  left: 4%;
  z-index: 3;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1;
}

.keep-project-preview-index {
  top: 5%;
  font-size: clamp(12px, 1.24vmin, 19px);
  font-weight: 700;
  opacity: 0.72;
}

.keep-project-preview-title {
  top: 12%;
  max-width: min(72%, 980px);
  font-size: clamp(20px, 3.2vmin, 48px);
  font-weight: 700;
  line-height: 1.05;
}

.keep-project-preview-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  background: #020713;
  opacity: 1;
  pointer-events: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-width: thin;
}

.keep-project-preview-media img,
.keep-project-preview-media video {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  background: #020713;
  user-select: none;
  -webkit-user-drag: none;
}

.keep-project-preview-media::-webkit-scrollbar {
  width: 8px;
}

.keep-project-preview-media::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.keep-project-preview-close {
  position: absolute;
  top: 3.2%;
  right: 3.2%;
  z-index: 12;
  display: grid;
  place-items: center;
  width: clamp(44px, 5.2vmin, 74px);
  height: clamp(44px, 5.2vmin, 74px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.16);
  font: 400 clamp(30px, 3.6vmin, 52px) / 1 Arial, sans-serif;
  cursor: none;
}

.scene.is-work .gallery-shell {
  pointer-events: auto;
}

.gallery-count {
  position: absolute;
  right: 3.35%;
  bottom: 12.5%;
  z-index: 11;
  color: rgba(255, 255, 255, 0.56);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: clamp(14px, 1.65vmin, 21px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene.is-work .gallery-count {
  opacity: 1;
  visibility: visible;
  z-index: 24;
}

.works-masonry {
  position: absolute;
  inset: 0;
  z-index: 340;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-works-orbit {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 125;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  transform-origin: var(--orbit-x, 94.382%) var(--orbit-y, 18.044%);
  clip-path: none;
  -webkit-clip-path: none;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

.music-toggle-button {
  position: absolute;
  left: var(--orbit-x, 94.382%);
  top: var(--orbit-y, 18.044%);
  z-index: 900;
  width: clamp(42px, 6.7vmin, 88px);
  height: clamp(42px, 6.7vmin, 88px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  background: transparent;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  cursor: none;
}

.music-toggle-button::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: opacity 0.24s ease;
}

.scene.is-work .music-toggle-button,
.scene.is-works-show .music-toggle-button {
  pointer-events: auto;
}

.scene.is-music-paused .project-works-orbit {
  opacity: 0.58 !important;
}

.scene.is-music-paused .music-toggle-button::after {
  opacity: 1;
}

.scene.is-works-show .works-masonry {
  pointer-events: auto;
}

.masonry-viewport {
  position: absolute;
  top: 8.6%;
  left: 2.6%;
  width: 94.8%;
  height: 87.8%;
  overflow: hidden;
  perspective: 900px;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.18));
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 94%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
    radial-gradient(ellipse 42% 27% at 0% 0%, transparent 0 33%, rgba(0, 0, 0, 0.26) 48%, #000 70%);
  mask-composite: intersect, intersect;
}

.masonry-field {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
}

.masonry-column {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: visible;
}

.masonry-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.masonry-item {
  position: relative;
  flex: 0 0 auto;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 3px;
  appearance: none;
  background: rgba(218, 224, 228, 0.105);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  cursor: none;
}

.masonry-item.is-wide {
  background: rgba(222, 228, 232, 0.12);
}

.masonry-item.is-portrait {
  background: rgba(212, 219, 224, 0.095);
}

.masonry-media {
  position: absolute;
  inset: 9%;
  display: block;
  border: 0;
  overflow: hidden;
  background: rgba(233, 238, 241, 0.2);
  opacity: 0.82;
  pointer-events: none;
}

.masonry-media img,
.masonry-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.masonry-shade {
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 26%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 34%);
  opacity: 0.72;
  pointer-events: none;
}

.masonry-preview {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.masonry-preview-frame {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: rgba(230, 235, 238, 0.14);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.56);
  will-change: transform, opacity;
}

.masonry-preview-frame.is-long {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.masonry-preview-frame.is-long::-webkit-scrollbar {
  width: 8px;
}

.masonry-preview-frame.is-long::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
}

.masonry-preview-content {
  display: block;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: rgba(232, 238, 242, 0.2);
  transform-origin: 50% 50%;
  will-change: transform;
}

.masonry-preview-content img,
.masonry-preview-content video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.masonry-preview-content video {
  height: 100%;
}

.masonry-preview-frame.is-long .masonry-preview-content img {
  height: auto;
}

.masonry-preview-close {
  position: absolute;
  top: 5.2%;
  right: 4.2%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(32px, 3.45vmin, 48px);
  height: clamp(32px, 3.45vmin, 48px);
  padding: 0;
  border: 1px solid rgba(229, 235, 239, 0.58);
  border-radius: 50%;
  background: rgba(10, 14, 19, 0.42);
  cursor: none;
}

.masonry-preview-close::before,
.masonry-preview-close::after {
  content: "";
  position: absolute;
  width: 48%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  transform-origin: 50% 50%;
}

.masonry-preview-close::before {
  transform: rotate(45deg);
}

.masonry-preview-close::after {
  transform: rotate(-45deg);
}

.nav-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-label {
  position: absolute;
  top: 4.55%;
  color: rgba(255, 255, 255, 0);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: clamp(8px, 1.45vmin, 18px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 0.42s ease;
}

.nav-label-project {
  left: 65.55%;
}

.nav-label-works {
  left: 79.45%;
}

.nav-label-contact {
  left: 93.45%;
}

.scene.is-work .nav-overlay {
  opacity: 1;
  visibility: visible;
}

.scene.is-contacting .nav-label-project,
.scene.is-contacting .nav-label-works {
  color: rgba(255, 255, 255, 0.42);
}

.scene.is-contacting .nav-label-contact {
  color: rgba(255, 255, 255, 0.94);
}

.nav-color-wipe {
  position: absolute;
  inset: 0;
  z-index: 1180;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.nav-color-panel {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: block;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: auto;
}

.start-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: 14%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  background: transparent;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  cursor: none;
}

.nav-button {
  position: absolute;
  top: 2.2%;
  z-index: 920;
  height: 8%;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  cursor: none;
}

.mobile-nav-hit {
  display: none;
}

.project-button {
  left: 60.6%;
  width: 12.7%;
}

.works-button {
  left: 72.8%;
  width: 12.9%;
}

.contact-button {
  left: 84.9%;
  width: 13.4%;
}

.contact-exit-button {
  position: absolute;
  top: 4.4%;
  right: 3.2%;
  z-index: 16;
  width: clamp(29px, 3.92vmin, 49px);
  height: clamp(29px, 3.92vmin, 49px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), inset 0 0 18px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  pointer-events: none;
  cursor: none;
  transition: background 0.24s ease, border-color 0.24s ease;
}

.contact-exit-button::before,
.contact-exit-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  transform-origin: 50% 50%;
}

.contact-exit-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-exit-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-exit-button:hover {
  border-color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.17);
}

.contact-action {
  position: absolute;
  top: 64.83%;
  z-index: 118;
  width: 11.33%;
  height: 7.55%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  cursor: none;
}

.contact-resume-download {
  left: 21.01%;
}

.contact-wechat-button {
  left: 7.85%;
}

.scene.is-contact .contact-action {
  pointer-events: auto;
}

.contact-qr-popup {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: min(7vmin, 72px);
  border: 0;
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  background: rgba(2, 8, 20, 0.76);
  box-shadow: none;
  transform: translate3d(0, 0, 0) scale(0.98);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, opacity;
  backdrop-filter: blur(12px);
}

.contact-qr-popup.is-open {
  pointer-events: auto;
}

.contact-qr-popup img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78vw, 620px);
  max-height: 78vh;
  object-fit: contain;
  padding: min(2.4vmin, 22px);
  border-radius: 8px;
  background: rgba(229, 233, 238, 0.96);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.38);
  user-select: none;
  pointer-events: none;
}

.contact-qr-close {
  position: absolute;
  top: max(28px, 4.2%);
  right: max(28px, 3.4%);
  width: clamp(42px, 4.4vmin, 58px);
  height: clamp(42px, 4.4vmin, 58px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32), inset 0 0 18px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  cursor: none;
}

.contact-qr-close::before,
.contact-qr-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  transform-origin: 50% 50%;
}

.contact-qr-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-qr-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-exit-button {
  z-index: 18;
}

.menu-button {
  position: absolute;
  z-index: 16;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  cursor: none;
}

.menu-home-button {
  left: 24.6%;
  top: 39.2%;
  width: 25.8%;
  height: 12.3%;
}

.menu-works-button {
  left: 24.6%;
  top: 52.3%;
  width: 25.8%;
  height: 12.3%;
}

.menu-contact-button {
  left: 24.6%;
  top: 65.3%;
  width: 25.8%;
  height: 12.3%;
}

.menu-contact-info-button {
  position: absolute;
  left: 65.2%;
  top: 9.7%;
  z-index: 17;
  width: 11.4%;
  height: 7.7%;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  cursor: none;
}

.menu-wechat-popup {
  position: absolute;
  left: 65.15%;
  top: 24.6%;
  z-index: 24;
  width: min(18.6%, 224px);
  padding: clamp(10px, 1.25vmin, 16px);
  border: 0;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  background: rgba(202, 208, 216, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  transform: translate3d(0, 10px, 0) scale(0.96);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  pointer-events: none;
}

.menu-wechat-popup img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.scene.is-final:not(.is-work):not(.is-works-show):not(.is-contact) .start-button {
  pointer-events: auto;
}

.scene.is-work .nav-button,
.scene.is-works-show .nav-button {
  pointer-events: auto;
}

.scene.is-contact #contactExitButton {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scene.is-contact.is-qr-open #contactExitButton {
  opacity: 0;
  pointer-events: none;
}

.scene.is-menu .menu-exit-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scene.is-menu .menu-button {
  pointer-events: auto;
}

.scene.is-menu .menu-contact-info-button {
  pointer-events: auto;
}

.scene.is-ready .artwork-main {
  will-change: auto;
}

.scene.is-final .artwork-final {
  will-change: auto;
}

.scene.is-work .artwork-work {
  z-index: 320;
  will-change: auto;
  clip-path: none;
  -webkit-clip-path: none;
  filter: none;
  pointer-events: none;
}

.scene.is-works-show .artwork-works-show {
  z-index: 320;
  will-change: auto;
  pointer-events: none;
}

.scene.is-contact .artwork-contact {
  will-change: auto;
}

.scene.is-menu .artwork-menu {
  will-change: auto;
}

.keep-project-more,
.works-type-button,
.works-type-menu {
  display: none !important;
  pointer-events: none !important;
}

@media (min-width: 761px) {
  .scene.is-work .artwork-work {
    z-index: 1000 !important;
    pointer-events: none !important;
  }

  .scene.is-work .nav-overlay {
    z-index: 1010 !important;
    pointer-events: none !important;
  }

  .scene.is-work .project-works-orbit {
    z-index: 1015 !important;
    pointer-events: none !important;
  }

  .scene.is-work .music-toggle-button,
  .scene.is-work .nav-button {
    z-index: 1020 !important;
    pointer-events: auto !important;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .artwork,
  .reveal,
  .scan,
  .count-layer,
  .work-wipe,
  .start-spin-ring,
  .gallery-count,
  .works-masonry,
  .project-works-orbit,
  .nav-color-panel,
  .menu-wechat-popup,
  .masonry-preview-frame,
  .blob-container,
  .cursor-light {
    transition: none;
    animation: none;
  }
}

@media (max-width: 720px) {
  .masonry-viewport {
    top: 10.5%;
    left: 5%;
    width: 90%;
    height: 84%;
  }

  .masonry-viewport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .masonry-track {
    gap: 12px;
  }
}

@media (max-width: 760px) {
  .scene,
  button,
  .keep-project-card,
  .masonry-item {
    cursor: default !important;
  }

  .blob-container,
  .cursor-light {
    display: none !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    min-height: 100%;
    overflow: hidden;
  }

  .home,
  .hero {
    width: 100vw;
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
  }

  .hero {
    place-items: stretch;
    background:
      radial-gradient(circle at 50% 18%, rgba(18, 193, 252, 0.24), transparent 38%),
      linear-gradient(180deg, #020713 0%, #031633 52%, #0759aa 100%);
  }

  .scene {
    width: 100vw;
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    aspect-ratio: auto;
    background:
      radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.08), transparent 18%),
      linear-gradient(180deg, #020713 0%, #021635 52%, #075cad 100%);
    transform: none !important;
    touch-action: none;
  }

  .scene.is-final::before {
    content: none;
  }

  .artwork {
    object-fit: contain;
    object-position: 50% 50%;
  }

  .scene:not(.is-final) .artwork-main {
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 100;
  }

  .scene:not(.is-final) .artwork-final,
  .scene:not(.is-final) .artwork-work-bg,
  .scene:not(.is-final) .artwork-work,
  .scene:not(.is-final) .artwork-works-show,
  .scene:not(.is-final) .artwork-contact,
  .scene:not(.is-final) .artwork-menu,
  .scene:not(.is-final) .artwork-ghost,
  .scene:not(.is-final) .reveal,
  .scene:not(.is-final) .scan,
  .scene:not(.is-final) .start-spin-ring,
  .scene:not(.is-final) .gallery-shell,
  .scene:not(.is-final) .works-masonry,
  .scene:not(.is-final) .nav-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .artwork-work,
  .artwork-works-show,
  .artwork-contact,
  .artwork-menu,
  .artwork-main,
  .artwork-final,
  .start-spin-ring,
  .project-works-orbit {
    object-fit: contain;
    object-position: 50% 50%;
  }

  .artwork-work-bg {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .count-value {
    min-width: 68vw;
    font-size: clamp(72px, 27vw, 126px);
    transform: translateY(-5svh);
  }

  .count-track {
    top: calc(50% + 12svh);
    width: min(66vw, 280px);
  }

  .start-button {
    width: clamp(112px, 30vw, 156px);
    min-width: 0;
    z-index: 220;
    pointer-events: none !important;
    touch-action: manipulation;
  }

  .scene.is-final:not(.is-work):not(.is-works-show):not(.is-contact):not(.is-menu) .start-button {
    pointer-events: auto !important;
  }

  .nav-label {
    display: none;
  }

  .start-spin-ring {
    top: -3svh;
    object-fit: contain;
    transform-origin: 50% 50% !important;
    z-index: 95;
  }

  .scene.is-final:not(.is-work):not(.is-works-show):not(.is-contact):not(.is-menu) .start-spin-ring {
    opacity: 1;
    visibility: visible;
  }

  .scene.is-final .artwork-work-bg {
    z-index: 1;
    pointer-events: none;
  }

  .scene.is-final:not(.is-work):not(.is-works-show):not(.is-contact):not(.is-menu) .artwork-final,
  .scene.is-work .artwork-work,
  .scene.is-works-show .artwork-works-show,
  .scene.is-contact .artwork-contact,
  .scene.is-menu .artwork-menu {
    z-index: 80;
    pointer-events: none;
  }

  .scene.is-final:not(.is-work):not(.is-works-show):not(.is-contact):not(.is-menu) .artwork-final,
  .scene.is-work .artwork-work,
  .scene.is-works-show .artwork-works-show {
    translate: 0 -3svh;
  }

  .scene.is-contact .artwork-contact,
  .scene.is-menu .artwork-menu {
    translate: 0 0;
  }

  .scene.is-work .gallery-shell,
  .scene.is-works-show .works-masonry {
    z-index: 115;
  }

  .keep-projects,
  .masonry-viewport {
    z-index: 1;
  }

  .scene.is-work .gallery-shell {
    inset: max(148px, 18.5svh) 0 max(24px, 3svh) 0;
    height: auto;
    overflow: hidden;
    mask-image:
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 4%, #000 11%, #000 94%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 4%, #000 11%, #000 94%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }

  .scene.is-work .gallery-shell.is-previewing {
    position: absolute;
    inset: 0;
    z-index: 1450;
    height: 100%;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .scene.is-work .gallery-shell.is-previewing .keep-projects {
    pointer-events: none;
  }

  .scene.is-work .gallery-shell.is-previewing .keep-project-preview {
    position: fixed;
    inset: 0;
    z-index: 1450;
  }

  .scene.is-work .keep-projects {
    inset: 0;
    overflow: hidden;
    mask-image:
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.36) 13%, rgba(0, 0, 0, 0.78) 23%, #000 34%, #000 88%, rgba(0, 0, 0, 0.62) 94%, transparent 100%);
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 4%, rgba(0, 0, 0, 0.36) 13%, rgba(0, 0, 0, 0.78) 23%, #000 34%, #000 88%, rgba(0, 0, 0, 0.62) 94%, transparent 100%);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }

  .scene.is-works-show .works-masonry {
    inset: 0;
    height: 100%;
  }

  .project-works-orbit {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: var(--orbit-x, 87.29%) var(--orbit-y, 8.20%) !important;
    translate: 0 -3svh;
    clip-path: none;
    -webkit-clip-path: none;
    object-fit: contain;
    z-index: 115;
  }

  .music-toggle-button {
    left: var(--orbit-x, 87.29%) !important;
    top: calc(var(--orbit-y, 8.20%) - 5.8svh) !important;
    width: var(--orbit-size, 52px);
    height: var(--orbit-size, 52px);
    transform: translate3d(-50%, -50%, 0) !important;
    z-index: 340;
  }

  .keep-projects {
    inset: 0 0 max(42px, 5svh);
  }

  .keep-project-card {
    width: var(--w);
    min-width: 132px;
    max-width: 82vw;
    touch-action: manipulation;
  }

  .keep-project-card::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: 4;
    display: block;
    background: rgba(0, 0, 0, 0);
  }

  .keep-project-card .keep-project-float {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  }

  .keep-project-card:hover .keep-project-float {
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
  }

  .keep-project-caption {
    padding: 8%;
    background: rgba(0, 0, 0, 0.18);
  }

  .keep-project-title {
    font-size: clamp(13px, 4.1vw, 22px);
  }

  .keep-project-preview-card {
    max-width: none;
    max-height: none;
  }

  .scene.is-project-previewing .keep-project-preview,
  .scene.is-project-previewing .keep-project-preview-card {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    aspect-ratio: auto !important;
  }

  .scene.is-project-previewing .keep-project-preview-card {
    left: 0 !important;
    top: 0 !important;
  }

  .keep-project-preview-index {
    font-size: clamp(12px, 3.2vw, 16px);
  }

  .keep-project-preview-title {
    font-size: clamp(22px, 7vw, 34px);
  }

  .keep-project-preview-close,
  .masonry-preview-close {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .contact-exit-button {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  .contact-exit-button::before,
  .contact-exit-button::after {
    height: 2px;
  }

  .contact-action {
    top: 80.78%;
    width: 19.83%;
    height: 4.18%;
    z-index: 420;
  }

  .contact-resume-download {
    left: 30.88%;
  }

  .contact-wechat-button {
    left: 7.86%;
  }

  .contact-qr-popup {
    inset: 0;
    z-index: 1200;
    width: 100%;
    height: 100%;
    padding: max(54px, 7svh) 7vw;
    border-radius: 0;
    box-shadow: none;
  }

  .contact-qr-popup img {
    width: auto;
    height: auto;
    max-width: 76vw;
    max-height: 76svh;
    object-fit: contain;
    padding: 10px;
  }

  .contact-qr-close {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 42px;
    height: 42px;
  }

  .gallery-count {
    right: 5vw;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
    z-index: 90;
    font-size: clamp(13px, 3.8vw, 18px);
  }

  .masonry-viewport {
    top: max(168px, 21svh);
    left: 4vw;
    width: 92vw;
    height: min(74svh, calc(100svh - max(198px, 25svh)));
    perspective: 620px;
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }

  .masonry-item {
    border-radius: 2px;
    background: rgba(218, 224, 228, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  }

  .masonry-media {
    inset: 8%;
    opacity: 0.96;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .masonry-shade {
    opacity: 0.38;
  }

  .masonry-preview {
    padding: max(64px, 8svh) 6vw max(44px, 6svh);
  }

  .masonry-preview-frame {
    max-width: 88vw;
    max-height: 72svh;
  }

  .nav-overlay {
    z-index: 150;
    pointer-events: none;
  }

  .scene.is-work .nav-overlay,
  .scene.is-works-show .nav-overlay {
    opacity: 1;
    visibility: visible;
  }

  .nav-label {
    top: max(14px, calc(env(safe-area-inset-top) + 14px));
    bottom: auto;
    font-size: clamp(5px, 1.42vw, 6.7px);
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
    transform: none;
  }

  .nav-label-project {
    left: auto;
    right: max(118px, calc(env(safe-area-inset-right) + 118px));
  }

  .nav-label-works {
    left: auto;
    right: max(58px, calc(env(safe-area-inset-right) + 58px));
  }

  .nav-label-contact {
    left: auto;
    right: max(8px, calc(env(safe-area-inset-right) + 8px));
  }

  .nav-button {
    top: calc(18.55% - 3svh);
    bottom: auto;
    z-index: 310;
    height: 3.85%;
    min-height: 44px;
    pointer-events: none;
  }

  .nav-button::before {
    content: none;
  }

  .mobile-nav-hit {
    position: absolute;
    top: calc(18.2% - 3svh);
    bottom: auto;
    z-index: 420;
    display: block;
    height: 4.8%;
    min-height: 54px;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    pointer-events: none;
    touch-action: manipulation;
  }

  .project-button {
    left: auto;
    right: auto;
    left: 28.85%;
    width: 19.8%;
  }

  .works-button {
    left: auto;
    right: auto;
    left: 50.3%;
    width: 19.8%;
  }

  .contact-button {
    left: auto;
    right: auto;
    left: 71.8%;
    width: 19.8%;
  }

  .scene.is-work .nav-button,
  .scene.is-works-show .nav-button {
    opacity: 1;
    z-index: 560;
    pointer-events: auto !important;
  }

  .mobile-project-hit {
    left: 27.2%;
    width: 22%;
  }

  .mobile-works-hit {
    left: 49%;
    width: 22%;
  }

  .mobile-contact-hit {
    left: 70.7%;
    width: 24%;
  }

  .scene.is-work .mobile-nav-hit,
  .scene.is-works-show .mobile-nav-hit {
    z-index: 780;
    pointer-events: auto !important;
  }

  .project-works-orbit {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: var(--orbit-x, 87.29%) var(--orbit-y, 8.20%) !important;
    clip-path: none;
    -webkit-clip-path: none;
    object-fit: contain;
    z-index: 115;
  }

  .music-toggle-button {
    left: var(--orbit-x, 87.29%) !important;
    top: calc(var(--orbit-y, 8.20%) - 3svh) !important;
    width: var(--orbit-size, 52px);
    height: var(--orbit-size, 52px);
    transform: translate3d(-50%, -50%, 0) !important;
    z-index: 340;
  }

  .works-masonry.is-previewing ~ .project-works-orbit,
  .works-masonry.is-previewing ~ .music-toggle-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .menu-home-button,
  .menu-works-button,
  .menu-contact-button {
    left: 28%;
    width: 58%;
    height: 8%;
    z-index: 960;
    pointer-events: none !important;
    touch-action: manipulation;
  }

  .menu-home-button {
    top: 40%;
  }

  .menu-works-button {
    top: 47.25%;
  }

  .menu-contact-button {
    top: 54.5%;
  }

  .menu-contact-info-button {
    display: none !important;
    pointer-events: none !important;
  }

  .menu-wechat-popup {
    display: none !important;
    left: 50%;
    top: max(188px, 25svh);
    z-index: 700;
    width: min(42vw, 156px);
    margin-left: calc(min(42vw, 156px) / -2);
    padding: 8px;
    border-radius: 6px;
    background: rgba(185, 193, 204, 0.74);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  }

  .menu-exit-button {
    z-index: 980;
  }

  .contact-exit-button,
  .menu-contact-info-button {
    z-index: 650;
  }

  .scene.is-menu .menu-button {
    z-index: 960;
    pointer-events: auto !important;
  }

  .scene.is-contact .contact-exit-button {
    z-index: 1000;
    pointer-events: auto !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .scene {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }

  .keep-projects {
    inset: 9% 0 8%;
  }

  .masonry-viewport {
    top: 9%;
    height: 84%;
  }

  .nav-label {
    top: max(12px, calc(env(safe-area-inset-top) + 12px));
    bottom: auto;
  }
}