body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) {
  background: #12081b !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > [data-dna-quality] {
  pointer-events: auto !important;
  z-index: 10 !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > [data-dna-quality] canvas {
  pointer-events: auto !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 {
  left: clamp(8rem, 13vw, 13.5rem) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 56rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: absolute !important;
  right: auto !important;
  text-align: left !important;
  top: 45vh !important;
  transform: none !important;
  width: min(56rem, calc(100vw - clamp(8rem, 13vw, 13.5rem) - 2rem)) !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 h1 {
  font-size: clamp(2.75rem, 4.05vw, 4.1rem) !important;
  letter-spacing: 0.08em !important;
  line-height: 1.16 !important;
  text-shadow: 0 22px 56px rgba(0, 0, 0, 0.66) !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 h1 span {
  white-space: nowrap !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 .w-16 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 6rem !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 .mt-14 {
  justify-content: flex-start !important;
}

body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.absolute.bottom-28,
body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.absolute.bottom-0.left-0.right-0.h-32 {
  display: none !important;
}

@media (max-width: 1023px) {
  body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) {
    overscroll-behavior-y: auto !important;
  }

  body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > [data-dna-quality],
  body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > [data-dna-quality] canvas {
    touch-action: pan-y !important;
  }

  body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 {
    left: 1.25rem !important;
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
    max-width: min(32rem, calc(100vw - 2.5rem)) !important;
    top: 34vh !important;
    width: min(32rem, calc(100vw - 2.5rem)) !important;
  }

  body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 h1 {
    font-size: clamp(2.45rem, 9vw, 3.75rem) !important;
  }

  body section:has(> [data-dna-quality]):not([data-ime-dna-hero="vercel"]) > div.relative.z-20 h1 span {
    white-space: normal !important;
  }
}

body main > section:first-of-type:has(canvas),
body section[data-ime-dna-hero="vercel"] {
  align-items: flex-start !important;
  background: #14091f !important;
  color: #f7f0ea !important;
  display: block !important;
  height: 124dvh !important;
  justify-content: flex-start !important;
  min-height: 900px !important;
  overflow: hidden !important;
  position: relative !important;
  text-align: left !important;
}

body > header.fixed,
body header.fixed.top-0,
body header[class*="fixed"][class*="top-0"] {
  isolation: isolate !important;
  pointer-events: auto !important;
  z-index: 2147482500 !important;
}

body > header.fixed *,
body header.fixed.top-0 *,
body header[class*="fixed"][class*="top-0"] * {
  pointer-events: auto !important;
}

body > div.fixed.inset-0[class*="z-[55]"],
body div.fixed.inset-0[class*="z-[55]"][class*="noise-overlay"] {
  z-index: 2147482400 !important;
}

body main > section:first-of-type:has(canvas)::before,
body section[data-ime-dna-hero="vercel"]::before {
  background:
    radial-gradient(circle at 72% 42%, rgba(155, 93, 212, 0.24), transparent 31%),
    radial-gradient(circle at 78% 56%, rgba(201, 164, 107, 0.16), transparent 21%),
    linear-gradient(90deg, rgba(20, 9, 31, 0.92) 0%, rgba(20, 9, 31, 0.74) 34%, rgba(20, 9, 31, 0.24) 58%, rgba(20, 9, 31, 0.34) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 12 !important;
}

body main > section:first-of-type:has(canvas)::after,
body section[data-ime-dna-hero="vercel"]::after {
  background: linear-gradient(180deg, rgba(20, 9, 31, 0) 0%, rgba(20, 9, 31, 0.92) 58%, #0a0a0a 100%) !important;
  bottom: 0 !important;
  content: "" !important;
  height: 24vh !important;
  left: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  z-index: 13 !important;
}

body main > section:first-of-type:has(canvas) > div:has(canvas),
body section[data-ime-dna-hero="vercel"] > div:has(canvas) {
  inset: 0 !important;
  pointer-events: auto !important;
  position: absolute !important;
  z-index: 0 !important;
}

body main > section:first-of-type:has(canvas) canvas,
body section[data-ime-dna-hero="vercel"] canvas {
  filter: blur(0.8px) saturate(0.94) brightness(0.94) !important;
  height: 100% !important;
  pointer-events: auto !important;
  width: 100% !important;
}

body main > section:first-of-type:has(canvas) > div[class*="z-[3]"],
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] {
  backface-visibility: hidden !important;
  isolation: isolate !important;
  position: relative !important;
  transform: translateZ(0) !important;
  z-index: 80 !important;
}

body main > section:first-of-type:has(canvas) .hero-content,
body section[data-ime-dna-hero="vercel"] .hero-content {
  backface-visibility: hidden !important;
  filter: brightness(1.18) contrast(1.06) !important;
  isolation: isolate !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  z-index: 90 !important;
}

body main > section:first-of-type:has(canvas) > div.relative.z-20,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 {
  left: max(3rem, calc((100vw - 1280px) / 2 + 3rem)) !important;
  margin: 0 !important;
  max-width: min(42rem, calc(100vw - max(3rem, calc((100vw - 1280px) / 2 + 3rem)) - 2rem)) !important;
  padding: 0 !important;
  position: absolute !important;
  right: auto !important;
  text-align: left !important;
  top: clamp(25rem, 43dvh, 28rem) !important;
  transform: none !important;
  width: min(42rem, calc(100vw - max(3rem, calc((100vw - 1280px) / 2 + 3rem)) - 2rem)) !important;
  z-index: 30 !important;
}

body main > section:first-of-type:has(canvas) h1,
body section[data-ime-dna-hero="vercel"] h1,
body section[data-ime-dna-hero="vercel"] .ime-vercel-hero-title {
  color: #fffaf3 !important;
  font-family: ChenYuluoyan, var(--font-sans-tc), "Microsoft JhengHei", "微軟正黑", "Noto Sans TC", "PingFang TC", sans-serif !important;
  font-size: clamp(64px, 5.6vw, 91px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.16 !important;
  margin: 0 !important;
  max-width: 44rem !important;
  opacity: 1 !important;
  position: relative !important;
  text-shadow: 0 0 18px rgba(255, 250, 243, 0.18), 0 24px 58px rgba(7, 2, 14, 0.84) !important;
  z-index: 95 !important;
}

body main > section:first-of-type:has(canvas) h1 .block,
body section[data-ime-dna-hero="vercel"] h1 .block {
  display: block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

body main > section:first-of-type:has(canvas) h1 .hero-char,
body section[data-ime-dna-hero="vercel"] h1 .hero-char {
  color: #fffaf3 !important;
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-shadow: 0 0 18px rgba(255, 250, 243, 0.18), 0 24px 58px rgba(7, 2, 14, 0.84) !important;
}

body main > section:first-of-type:has(canvas) h1 .hero-char,
body main > section:first-of-type:has(canvas) .hero-copy-in,
body section[data-ime-dna-hero="vercel"] h1 .hero-char,
body section[data-ime-dna-hero="vercel"] .hero-copy-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body main > section:first-of-type:has(canvas) .hero-gold-line,
body section[data-ime-dna-hero="vercel"] .hero-gold-line {
  animation: none !important;
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

body main > section:first-of-type:has(canvas) h1 .hero-gold-char,
body section[data-ime-dna-hero="vercel"] h1 .hero-gold-char {
  color: #dfbc62 !important;
  text-shadow: 0 0 30px rgba(223, 188, 98, 0.44), 0 24px 58px rgba(7, 2, 14, 0.84) !important;
}

body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] p,
body main > section:first-of-type:has(canvas) > div.relative.z-20 p,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] p,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 p {
  color: rgba(255, 250, 243, 0.86) !important;
  font-size: clamp(1rem, 1.25vw, 1.125rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 2 !important;
  max-width: 34rem !important;
  opacity: 1 !important;
  text-align: left !important;
  text-shadow: 0 12px 28px rgba(14, 8, 24, 0.58) !important;
  white-space: pre-line !important;
}

body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] .w-16,
body main > section:first-of-type:has(canvas) > div.relative.z-20 .w-16,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .w-16,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .w-16 {
  background: #c9a46b !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 6rem !important;
}

body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] .mt-14,
body main > section:first-of-type:has(canvas) > div.relative.z-20 .mt-14,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .mt-14,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .mt-14 {
  justify-content: flex-start !important;
}

body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] a,
body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] button,
body main > section:first-of-type:has(canvas) > div.relative.z-20 a,
body main > section:first-of-type:has(canvas) > div.relative.z-20 button,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] a,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] button,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 a,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 button {
  border-color: rgba(247, 240, 234, 0.95) !important;
  color: #f7f0ea !important;
  opacity: 1 !important;
}

body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] a:nth-of-type(2),
body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] button:nth-of-type(2),
body main > section:first-of-type:has(canvas) > div.relative.z-20 a:nth-of-type(2),
body main > section:first-of-type:has(canvas) > div.relative.z-20 button:nth-of-type(2),
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] a:nth-of-type(2),
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] button:nth-of-type(2),
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .mt-14 a + a,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .mt-14 button + button,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 a:nth-of-type(2),
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 button:nth-of-type(2),
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .mt-14 a + a,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .mt-14 button + button,
body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] .btn-ghost,
body main > section:first-of-type:has(canvas) > div.relative.z-20 .btn-ghost,
body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .btn-ghost,
body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .btn-ghost {
  background-color: transparent !important;
  border-color: rgba(247, 240, 234, 0.95) !important;
  color: #f7f0ea !important;
}

body main > section:first-of-type:has(canvas) > div.absolute.bottom-0.left-0.right-0.h-32,
body section[data-ime-dna-hero="vercel"] > div.absolute.bottom-0.left-0.right-0.h-32 {
  display: none !important;
}

@media (max-width: 1023px) {
  body main > section:first-of-type:has(canvas),
  body section[data-ime-dna-hero="vercel"] {
    height: calc(var(--ime-mobile-vh, 1vh) * 110) !important;
    min-height: min(760px, calc(var(--ime-mobile-vh, 1vh) * 110)) !important;
    max-height: 940px !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  body main > section:first-of-type:has(canvas) > div:has(canvas),
  body section[data-ime-dna-hero="vercel"] > div:has(canvas),
  body main > section:first-of-type:has(canvas) canvas,
  body section[data-ime-dna-hero="vercel"] canvas {
    touch-action: pan-y !important;
  }

  body main > section:first-of-type:has(canvas) > div.relative.z-20,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 {
    left: clamp(1.25rem, 5.5vw, 1.75rem) !important;
    max-width: calc(100vw - clamp(2.5rem, 11vw, 3.5rem)) !important;
    top: clamp(14.5rem, calc(var(--ime-mobile-vh, 1vh) * 37), 22rem) !important;
    width: calc(100vw - clamp(2.5rem, 11vw, 3.5rem)) !important;
  }

  body main > section:first-of-type:has(canvas) > div:has(canvas),
  body section[data-ime-dna-hero="vercel"] > div:has(canvas),
  body main > section:first-of-type:has(canvas) canvas,
  body section[data-ime-dna-hero="vercel"] canvas {
    backface-visibility: hidden !important;
    contain: paint !important;
    transform: translateZ(0) !important;
  }

  body main > section:first-of-type:has(canvas) h1,
  body section[data-ime-dna-hero="vercel"] h1,
  body section[data-ime-dna-hero="vercel"] .ime-vercel-hero-title {
    font-size: clamp(34px, 11.2vw, 58px) !important;
    letter-spacing: 0.045em !important;
    line-height: 1.18 !important;
    max-width: min(100%, 20rem) !important;
  }

  body section[data-ime-dna-hero="vercel"] h1 .block {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] p,
  body main > section:first-of-type:has(canvas) > div.relative.z-20 p,
  body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] p,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 p {
    font-size: clamp(0.88rem, 3.8vw, 1rem) !important;
    line-height: 1.75 !important;
    max-width: min(100%, 19rem) !important;
  }

  body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] .w-16,
  body main > section:first-of-type:has(canvas) > div.relative.z-20 .w-16,
  body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .w-16,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .w-16 {
    width: clamp(4rem, 24vw, 5.8rem) !important;
  }

  body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] .mt-14,
  body main > section:first-of-type:has(canvas) > div.relative.z-20 .mt-14,
  body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .mt-14,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .mt-14 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    margin-top: clamp(1.65rem, 5vh, 2.55rem) !important;
    max-width: min(100%, 20rem) !important;
  }

  body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] a,
  body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] button,
  body main > section:first-of-type:has(canvas) > div.relative.z-20 a,
  body main > section:first-of-type:has(canvas) > div.relative.z-20 button,
  body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] a,
  body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] button,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 a,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 button {
    flex: 1 1 min(9.35rem, 100%) !important;
    font-size: clamp(0.82rem, 3.4vw, 0.94rem) !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    min-height: 3rem !important;
    min-width: 0 !important;
    padding-left: clamp(0.95rem, 4vw, 1.35rem) !important;
    padding-right: clamp(0.95rem, 4vw, 1.35rem) !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  body main > section:first-of-type:has(canvas) > div.relative.z-20,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 {
    top: clamp(13.5rem, calc(var(--ime-mobile-vh, 1vh) * 35), 20rem) !important;
  }

  body main > section:first-of-type:has(canvas) h1,
  body section[data-ime-dna-hero="vercel"] h1,
  body section[data-ime-dna-hero="vercel"] .ime-vercel-hero-title {
    font-size: clamp(31px, 10.8vw, 45px) !important;
    letter-spacing: 0.03em !important;
    max-width: 17.25rem !important;
  }

  body main > section:first-of-type:has(canvas) > div[class*="z-[3]"] .mt-14,
  body main > section:first-of-type:has(canvas) > div.relative.z-20 .mt-14,
  body section[data-ime-dna-hero="vercel"] > div[class*="z-[3]"] .mt-14,
  body section[data-ime-dna-hero="vercel"] > div.relative.z-20 .mt-14 {
    max-width: 17.25rem !important;
  }
}

/* dna-v3-quiz-overlay-hidden-20260702
   The old v3 WebGL DNA frame must not show stale self-quiz UI on desktop or mobile. */
[data-ime-quiz-held="hero"],
[data-ime-quiz-held="hero"] * {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body section[data-ime-dna-renderer="official-standalone"],
body section[data-ime-dna-hero="vercel"][data-ime-dna-renderer="official-standalone"] {
  background: #12081b !important;
}

body section[data-ime-dna-renderer="official-standalone"]::before,
body section[data-ime-dna-hero="vercel"][data-ime-dna-renderer="official-standalone"]::before {
  background:
    radial-gradient(circle at 70% 42%, rgba(182, 137, 255, 0.18), transparent 28%),
    radial-gradient(circle at 76% 58%, rgba(240, 214, 155, 0.11), transparent 18%),
    linear-gradient(90deg, rgba(20, 9, 31, 0.94) 0%, rgba(20, 9, 31, 0.68) 32%, rgba(20, 9, 31, 0.10) 58%, rgba(20, 9, 31, 0.16) 100%) !important;
  z-index: 8 !important;
}

body section[data-ime-dna-renderer="official-standalone"]::after,
body section[data-ime-dna-hero="vercel"][data-ime-dna-renderer="official-standalone"]::after {
  z-index: 9 !important;
}

body section[data-ime-dna-renderer="official-standalone"] > div:has(canvas),
body section[data-ime-dna-renderer="official-standalone"] canvas {
  filter: saturate(1.14) brightness(1.08) !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  body section[data-ime-dna-renderer="official-standalone"]::before,
  body section[data-ime-dna-hero="vercel"][data-ime-dna-renderer="official-standalone"]::before {
    background:
      radial-gradient(circle at 58% 38%, rgba(182, 137, 255, 0.18), transparent 34%),
      radial-gradient(circle at 64% 54%, rgba(240, 214, 155, 0.10), transparent 22%),
      linear-gradient(180deg, rgba(20, 9, 31, 0.74) 0%, rgba(20, 9, 31, 0.16) 36%, rgba(20, 9, 31, 0.54) 100%) !important;
  }
}

/* dna-v3-frame-embed-source-20260702
   Use the original v3 WebGL frame as the home DNA source, with page copy above it. */
body section[data-ime-dna-hero="vercel"][data-ime-dna-renderer="v3-webgl-frame"],
body section[data-ime-dna-renderer="v3-webgl-frame"] {
  background: #12081b !important;
  isolation: isolate !important;
  min-height: 900px !important;
  overflow: hidden !important;
  position: relative !important;
}

body section[data-ime-dna-renderer="v3-webgl-frame"] > [data-ime-dna-v3-frame-layer] {
  background: #12081b !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 0 !important;
}

body section[data-ime-dna-renderer="v3-webgl-frame"] iframe[data-ime-dna-v3-frame-embed] {
  background: #12081b !important;
  border: 0 !important;
  display: block !important;
  height: 100% !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 100% !important;
}

body section[data-ime-dna-renderer="v3-webgl-frame"] canvas[data-ime-dna-canvas] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body section[data-ime-dna-renderer="v3-webgl-frame"] > :not([data-ime-dna-v3-frame-layer]) {
  position: relative !important;
  z-index: 30 !important;
}

body section[data-ime-dna-renderer="v3-webgl-frame"]::before {
  z-index: 12 !important;
}

body section[data-ime-dna-renderer="v3-webgl-frame"]::after {
  z-index: 13 !important;
}

@media (max-width: 760px) {
  body section[data-ime-dna-hero="vercel"][data-ime-dna-renderer="v3-webgl-frame"],
  body section[data-ime-dna-renderer="v3-webgl-frame"] {
    min-height: 840px !important;
  }
}