.renolab-intro-stage {
  --ink: #17120f;
  --red: #ec633e;
  --red-hot: #f41419;
  --lab: #a85b47;
  --cream: #f6f1eb;
  --cream-2: #e7ded4;
  --green: #77b255;
  --paper: #fff;
  --muted: #b8b5af;
  --logo-size: clamp(148px, 24vw, 184px);
  --core-size: clamp(31px, 5.1vw, 39px);
  --core-y-shift: clamp(-17px, -2.2vw, -13px);
  --duration: 2.1s;
}

* {
  box-sizing: border-box;
}


.stage {
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(236, 99, 62, 0.14), transparent 18%),
    radial-gradient(circle at 50% 52%, #201815 0%, #0a0706 48%, #000 82%);
  isolation: isolate;
}

.variant-r1 {
  --duration: 2.25s;
}

.variant-r1-33 {
  --duration: 1.65s;
}

.site-page {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: clamp(22px, 4vw, 48px);
  background:
    radial-gradient(circle at 74% 22%, rgba(236, 99, 62, 0.14), transparent 28%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  color: var(--ink);
  opacity: 0;
  clip-path: circle(0vmax at 50% 124%);
  transform: scale(1.025);
  animation: siteIn var(--duration) ease both;
}

.site-page::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.45));
  pointer-events: none;
}

.brand-lab {
  color: var(--lab);
}

.brand-tv {
  color: var(--red);
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro {
  position: relative;
  z-index: 5;
  display: grid;
  min-width: min(86vw, 540px);
  min-height: 390px;
  place-items: center;
  animation: introExit var(--duration) ease both;
}

.logo-stack {
  position: relative;
  width: var(--logo-size);
  height: var(--logo-size);
}

.variant-r1 .logo-stack {
  isolation: isolate;
}

.variant-r1 .logo-stack::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: clamp(198px, 32vw, 247px);
  height: clamp(198px, 32vw, 247px);
  border-radius: 30%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.42), transparent 17%),
    radial-gradient(circle at 50% 43%, rgba(244, 20, 25, 0.46), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(236, 99, 62, 0.28), transparent 58%);
  opacity: 0;
  filter: blur(1px);
  transform: translate(-50%, -50%) scale(0.58);
  animation: iconFocusAura var(--duration) cubic-bezier(0.18, 0.84, 0.2, 1) both;
}

.logo-card {
  will-change: transform, opacity, filter, clip-path;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.84);
  clip-path: circle(0 at 49.2% 41.2%);
  animation: logoReveal var(--duration) cubic-bezier(0.18, 0.84, 0.2, 1) both;
}

.variant-r1 .logo-card {
  animation-name: logoRevealFocus;
}

.variant-r1-33 .logo-card {
  animation-name: logoRevealFocusFast;
}

.core {
  will-change: transform, opacity;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--core-size);
  height: var(--core-size);
  border-radius: 50%;
  background: var(--red-hot);
  box-shadow:
    0 0 20px rgba(244, 20, 25, 0.94),
    0 0 80px rgba(236, 99, 62, 0.54),
    0 0 160px rgba(236, 99, 62, 0.28);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.38);
  animation: coreLife var(--duration) cubic-bezier(0.18, 0.84, 0.2, 1) both;
}

.variant-r1 .core {
  animation-name: coreLifeFocus;
}

.variant-r1-33 .core {
  animation-name: coreLifeFocusFast;
}

.variant-r1-33 .logo-stack::before {
  animation-name: iconFocusAuraFast;
}

.wordmark {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(112px, 17.8vw, 140px));
  width: min(86vw, 520px);
  text-align: center;
  transform: translateX(-50%);
}

.wordmark strong {
  display: flex;
  justify-content: center;
  color: var(--paper);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.brand-piece {
  will-change: transform, opacity;
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: wordIn 480ms ease both;
}

.brand-reno {
  animation-delay: 0.89s;
}

.brand-lab {
  animation-delay: 0.94s;
}

.brand-tv {
  animation-delay: 0.99s;
}

.variant-r1 .wordmark .brand-reno {
  animation-delay: 1.17s;
}

.variant-r1 .wordmark .brand-lab {
  animation-delay: 1.23s;
}

.variant-r1 .wordmark .brand-tv {
  animation-delay: 1.29s;
}

.variant-r1-33 .wordmark .brand-reno {
  animation-delay: 0.29s;
}

.variant-r1-33 .wordmark .brand-lab {
  animation-delay: 0.33s;
}

.variant-r1-33 .wordmark .brand-tv {
  animation-delay: 0.37s;
}

.tagline-zh,
.tagline-zh-sub,
.tagline-en {
  display: block;
  opacity: 0;
  transform: translateY(8px);
  animation: wordIn 460ms ease both;
}

.tagline-zh {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 700;
  animation-delay: 1.1s;
}

.variant-r1 .tagline-zh {
  animation-delay: 1.41s;
}

.variant-r1-33 .tagline-zh {
  animation-delay: 0.44s;
}

.tagline-zh-sub {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 700;
  animation-delay: 1.13s;
}

.variant-r1 .tagline-zh-sub {
  animation-delay: 1.45s;
}

.variant-r1-33 .tagline-zh-sub {
  animation-delay: 0.5s;
}

.tagline-en {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  animation-delay: 1.17s;
}

.variant-r1 .tagline-en {
  animation-delay: 1.48s;
}

.variant-r1-33 .tagline-en {
  animation-delay: 0.57s;
}

.site-wipe {
  will-change: transform, opacity, clip-path;
  position: absolute;
  left: 50%;
  bottom: -190vh;
  z-index: 8;
  width: 300vw;
  height: 300vw;
  min-width: 1900px;
  min-height: 1900px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(44%);
  background:
    radial-gradient(circle at 50% 50%, rgba(236, 99, 62, 0.2), transparent 24%),
    radial-gradient(circle at 50% 50%, #1a1614 0%, #090807 44%, #020202 74%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 91.5%, rgba(0, 0, 0, 0.45) 92.2%, #000 94% 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 91.5%, rgba(0, 0, 0, 0.45) 92.2%, #000 94% 100%);
  box-shadow:
    inset 0 34px 94px rgba(236, 99, 62, 0.22),
    inset 0 0 190px rgba(255, 255, 255, 0.05);
  animation: siteWipe var(--duration) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: none;
}

.variant-r1 .site-page {
  animation-name: siteInFocus;
}

.variant-r1 .intro {
  animation-name: introExitFocus;
}

.variant-r1 .site-wipe {
  animation-name: siteWipeFocus;
}

.site-wipe::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background: repeating-conic-gradient(
    from 20deg,
    rgba(255, 255, 255, 0.18) 0deg,
    rgba(236, 99, 62, 0.18) 3deg,
    transparent 12deg,
    rgba(0, 0, 0, 0.24) 22deg,
    transparent 34deg
  );
  filter: blur(1.2px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: wipeTexture var(--duration) ease both;
}

.variant-r1 .site-wipe::before {
  animation-name: wipeTextureFocus;
}

.intro-skip-button {
  position: fixed;
  right: clamp(18px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 30px);
  z-index: 20;
  min-width: 0;
  min-height: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.intro-skip-button:hover,
.intro-skip-button:focus-visible {
  outline: 0;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.light-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--core-size);
  height: var(--core-size);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 8%, rgba(255, 207, 126, 0.82) 18%, rgba(236, 99, 62, 0.52) 36%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.2);
  animation: lightBloom var(--duration) cubic-bezier(0.14, 0.82, 0.16, 1) both;
}

.variant-r1 .light-bloom {
  animation-name: lightBloomFocus;
}

.warm-panel {
  position: absolute;
  inset: 0;
  background: var(--cream);
  opacity: 0;
  clip-path: circle(0 at 50% calc(50% + var(--core-y-shift)));
  animation: warmPanel var(--duration) ease both;
}

.variant-r1 .warm-panel {
  animation-name: warmPanelFocus;
}

.is-replaying .site-page,
.is-replaying .intro,
.is-replaying .logo-card,
.is-replaying .core,
.is-replaying .brand-piece,
.is-replaying .tagline-zh,
.is-replaying .tagline-zh-sub,
.is-replaying .tagline-en,
.is-replaying .site-wipe,
.is-replaying .site-wipe::before,
.is-replaying .light-bloom,
.is-replaying .warm-panel {
  animation: none;
}

@keyframes siteIn {
  0%,
  68% {
    opacity: 0;
    clip-path: circle(0vmax at 50% 124%);
    transform: scale(1.025);
  }
  70% {
    opacity: 1;
    clip-path: circle(0vmax at 50% 124%);
    transform: scale(1.025);
  }
  84% {
    opacity: 1;
    clip-path: circle(48vmax at 50% 118%);
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    clip-path: circle(118vmax at 50% 52%);
    transform: scale(1);
  }
}

@keyframes siteInFocus {
  0%,
  72% {
    opacity: 0;
    clip-path: circle(0vmax at 50% 124%);
    transform: scale(1.025);
  }
  74% {
    opacity: 1;
    clip-path: circle(0vmax at 50% 124%);
    transform: scale(1.025);
  }
  88% {
    opacity: 1;
    clip-path: circle(48vmax at 50% 118%);
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    clip-path: circle(118vmax at 50% 52%);
    transform: scale(1);
  }
}

@keyframes logoReveal {
  0%,
  50% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.84);
    clip-path: circle(0 at 49.2% 41.2%);
  }
  66% {
    opacity: 1;
    filter: blur(2px);
    transform: scale(1.06);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    clip-path: circle(72% at 49.2% 41.2%);
  }
}

@keyframes logoRevealFocus {
  0%,
  6% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.84);
    clip-path: circle(0 at 49.2% 41.2%);
  }
  16% {
    opacity: 1;
    filter: blur(6px);
    transform: scale(0.94);
    clip-path: circle(30% at 49.2% 41.2%);
  }
  24% {
    opacity: 1;
    filter: blur(1px);
    transform: scale(1.09);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  34% {
    opacity: 1;
    filter: blur(0);
    transform: scale(0.99);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  44% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.025);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  70%,
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    clip-path: circle(72% at 49.2% 41.2%);
  }
}

@keyframes coreLife {
  0%,
  10% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.38);
  }
  26% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1);
  }
  52% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.4);
  }
  74%,
  100% {
    opacity: 0.96;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1);
  }
}

@keyframes coreLifeFocus {
  0%,
  2% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.38);
    box-shadow:
0 0 12px rgba(244, 20, 25, 0.5),
0 0 50px rgba(236, 99, 62, 0.26),
0 0 120px rgba(236, 99, 62, 0.14);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1);
    box-shadow:
0 0 20px rgba(244, 20, 25, 0.94),
0 0 80px rgba(236, 99, 62, 0.54),
0 0 160px rgba(236, 99, 62, 0.28);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.48);
    box-shadow:
0 0 30px rgba(255, 255, 255, 0.7),
0 0 96px rgba(244, 20, 25, 0.75),
0 0 190px rgba(236, 99, 62, 0.34);
  }
  32% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.04);
    box-shadow:
0 0 18px rgba(244, 20, 25, 0.94),
0 0 78px rgba(236, 99, 62, 0.56),
0 0 160px rgba(236, 99, 62, 0.3);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.2);
    box-shadow:
0 0 28px rgba(255, 255, 255, 0.42),
0 0 92px rgba(244, 20, 25, 0.74),
0 0 180px rgba(236, 99, 62, 0.3);
  }
  70%,
  100% {
    opacity: 0.98;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1);
    box-shadow:
0 0 20px rgba(244, 20, 25, 0.94),
0 0 80px rgba(236, 99, 62, 0.54),
0 0 160px rgba(236, 99, 62, 0.28);
  }
}

@keyframes iconFocusAura {
  0%,
  6% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }
  16% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.82);
  }
  32% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.02);
  }
  46% {
    opacity: 0.46;
    transform: translate(-50%, -50%) scale(1.1);
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes logoRevealFocusFast {
  0%,
  2% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.84);
    clip-path: circle(0 at 49.2% 41.2%);
  }
  7% {
    opacity: 1;
    filter: blur(5px);
    transform: scale(0.96);
    clip-path: circle(32% at 49.2% 41.2%);
  }
  15% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.08);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  24% {
    opacity: 1;
    filter: blur(0);
    transform: scale(0.99);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  44% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.025);
    clip-path: circle(72% at 49.2% 41.2%);
  }
  70%,
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    clip-path: circle(72% at 49.2% 41.2%);
  }
}

@keyframes coreLifeFocusFast {
  0%,
  1% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.38);
    box-shadow:
0 0 12px rgba(244, 20, 25, 0.5),
0 0 50px rgba(236, 99, 62, 0.26),
0 0 120px rgba(236, 99, 62, 0.14);
  }
  4% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1);
    box-shadow:
0 0 20px rgba(244, 20, 25, 0.94),
0 0 80px rgba(236, 99, 62, 0.54),
0 0 160px rgba(236, 99, 62, 0.28);
  }
  8% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.48);
    box-shadow:
0 0 30px rgba(255, 255, 255, 0.7),
0 0 96px rgba(244, 20, 25, 0.75),
0 0 190px rgba(236, 99, 62, 0.34);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.04);
    box-shadow:
0 0 18px rgba(244, 20, 25, 0.94),
0 0 78px rgba(236, 99, 62, 0.56),
0 0 160px rgba(236, 99, 62, 0.3);
  }
  32% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1.2);
    box-shadow:
0 0 28px rgba(255, 255, 255, 0.42),
0 0 92px rgba(244, 20, 25, 0.74),
0 0 180px rgba(236, 99, 62, 0.3);
  }
  70%,
  100% {
    opacity: 0.98;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(1);
    box-shadow:
0 0 20px rgba(244, 20, 25, 0.94),
0 0 80px rgba(236, 99, 62, 0.54),
0 0 160px rgba(236, 99, 62, 0.28);
  }
}

@keyframes iconFocusAuraFast {
  0%,
  2% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }
  7% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.82);
  }
  15% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.02);
  }
  30% {
    opacity: 0.46;
    transform: translate(-50%, -50%) scale(1.1);
  }
  50%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes wordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introExit {
  0%,
  77% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  91%,
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-12px) scale(0.98);
  }
}

@keyframes introExitFocus {
  0%,
  82% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  94%,
  100% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-12px) scale(0.98);
  }
}

@keyframes siteWipe {
  0%,
  64% {
    opacity: 0;
    transform: translateX(-50%) translateY(48%);
  }
  70% {
    opacity: 1;
  }
  84% {
    opacity: 1;
    transform: translateX(-50%) translateY(-8%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-142%);
  }
}

@keyframes siteWipeFocus {
  0%,
  70% {
    opacity: 0;
    transform: translateX(-50%) translateY(48%);
  }
  75% {
    opacity: 1;
  }
  88% {
    opacity: 1;
    transform: translateX(-50%) translateY(-8%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-142%);
  }
}

@keyframes wipeTexture {
  0%,
  64% {
    opacity: 0;
    transform: rotate(-20deg);
  }
  82% {
    opacity: 0.58;
    transform: rotate(120deg);
  }
  100% {
    opacity: 0.2;
    transform: rotate(260deg);
  }
}

@keyframes wipeTextureFocus {
  0%,
  70% {
    opacity: 0;
    transform: rotate(-20deg);
  }
  88% {
    opacity: 0.58;
    transform: rotate(120deg);
  }
  100% {
    opacity: 0.2;
    transform: rotate(260deg);
  }
}

@keyframes lightBloom {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.2);
  }
  34% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(3);
  }
  62% {
    opacity: 0.85;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(42);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(58);
  }
}

@keyframes lightBloomFocus {
  0%,
  4% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(0.2);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(2.8);
  }
  30% {
    opacity: 0.88;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(30);
  }
  50% {
    opacity: 0.32;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(48);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--core-y-shift)) scale(58);
  }
}

@keyframes warmPanel {
  0%,
  26% {
    opacity: 0;
    clip-path: circle(0 at 50% calc(50% + var(--core-y-shift)));
  }
  54% {
    opacity: 0.92;
    clip-path: circle(42vmax at 50% calc(50% + var(--core-y-shift)));
  }
  72%,
  100% {
    opacity: 0;
    clip-path: circle(140vmax at 50% calc(50% + var(--core-y-shift)));
  }
}

@keyframes warmPanelFocus {
  0%,
  6% {
    opacity: 0;
    clip-path: circle(0 at 50% calc(50% + var(--core-y-shift)));
  }
  34% {
    opacity: 0.9;
    clip-path: circle(42vmax at 50% calc(50% + var(--core-y-shift)));
  }
  58%,
  100% {
    opacity: 0;
    clip-path: circle(140vmax at 50% calc(50% + var(--core-y-shift)));
  }
}

@media (max-width: 640px) {
  .intro {
    min-height: 330px;
  }

  .wordmark strong {
    font-size: 31px;
  }

  .tagline-zh {
    font-size: 14px;
  }

  .tagline-zh-sub {
    font-size: 13px;
  }

  .tagline-en {
    font-size: 11px;
  }

  .site-page {
    padding: 20px;
    gap: 20px;
  }
}



body.renolab-intro-active {
  overflow: hidden;
}

.renolab-intro-stage.stage {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(100dvh, auto);
  place-items: center;
}

.renolab-real-page {
  --ink: #303033;
  --ink-soft: #4b4b4f;
  --muted: #737373;
  --muted-soft: #9a9a9a;
  --line: #efdfd8;
  --cream: #fff8f5;
  --soft: #f8e3da;
  --soft-2: #fff1eb;
  --brand: #ec633e;
  --brand-dark: #bd4b25;
  --navy: #1e536a;
  --green: #58ad62;
  --shadow: 0 10px 22px rgba(48, 48, 51, 0.08);
}

body.renolab-intro-active .renolab-real-page {
  gap: 0;
  padding: 0;
  background: #fff;
  color: inherit;
}

body.renolab-intro-active .renolab-real-page::after,
body.renolab-intro-done .renolab-real-page::after {
  display: none;
}

body.renolab-intro-active .renolab-real-page .app {
  width: 100%;
  min-height: 100dvh;
}

body.renolab-intro-done {
  overflow-y: auto;
  overflow-x: clip;
}

body.renolab-intro-done .renolab-intro-stage.stage {
  display: block;
  min-height: auto;
  overflow: visible;
  background: transparent;
  isolation: auto;
}

body.renolab-intro-done .renolab-real-page {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  gap: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  opacity: 1;
  clip-path: none;
  transform: none;
  animation: none;
}

body.renolab-intro-done .renolab-real-page .app {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body.renolab-intro-done .renolab-intro-only {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-scroll-cue::before {
    animation: none;
  }

  body.renolab-intro-active {
    overflow: auto;
  }

  body.renolab-intro-active .renolab-intro-stage.stage {
    display: block;
    min-height: auto;
    overflow: visible;
    background: transparent;
    isolation: auto;
  }

  body.renolab-intro-active .renolab-real-page {
    position: static;
    display: block;
    opacity: 1;
    clip-path: none;
    transform: none;
    animation: none;
  }

  .renolab-intro-only {
    display: none !important;
  }
}