.demo-after {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8vh 6vw;
    text-align: center;
  }

  .demo-after {
    background:
      radial-gradient(circle at 18% 22%, rgba(135, 215, 230, 0.28), rgba(135, 215, 230, 0) 34%),
      linear-gradient(135deg, #132d55 0%, #32145d 58%, #120532 100%);
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 0;
    margin-top: -100vh;
    margin-top: -100svh;
  }

  .demo-block {
    width: min(860px, 100%);
  }

  .demo-block__eyebrow {
    margin-bottom: 14px;
    font-family: system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .demo-block__title {
    font-size: clamp(40px, 6vw, 104px);
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .demo-block__text {
    margin: 24px auto 0;
    max-width: 640px;
    font-family: system-ui, "Microsoft JhengHei", sans-serif;
    font-size: clamp(15px, 1.35vw, 20px);
    line-height: 1.8;
    letter-spacing: 0.06em;
  }

  





  .scene-wrap { position: relative; height: 420vh; pointer-events: none; } 

  
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    padding: 8vh 6vw;
    text-align: center;
    
    background:
      radial-gradient(circle at 72% 24%, rgba(255, 232, 150, 0.42), rgba(255, 232, 150, 0) 28%),
      linear-gradient(135deg, #ffe17d 0%, #f3af59 45%, #8a52c4 100%);
    color: #2f1749;
    transform: translateY(0);
    will-change: transform;
  }
  
  .preface-panel {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
  height: 100dvh; 
    z-index: var(--z-intro-overlay, 300); 
    overflow: hidden;
    margin-top: calc(-1 * var(--stage-h));
    transform: translateY(0);
    will-change: transform;
  }

  #fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
  }

  .intro-svg-effects-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
    opacity: 1;
    visibility: hidden;
    mix-blend-mode: screen;
  }

  .intro-twinkle-star {
    position: absolute;
    left: var(--tw-star-left, auto);
    top: var(--tw-star-top, auto);
    right: var(--tw-star-right, auto);
    bottom: var(--tw-star-bottom, auto);
    z-index: var(--tw-star-z, 1);
    mix-blend-mode: screen;
  }

  .tw-star-twinkle {
    --tw-star-size: 72px;
    --tw-star-min-opacity: 0.34;
    --tw-star-max-opacity: 0.94;
    --tw-star-duration: 3200ms;
    --tw-star-delay: 0ms;
    --tw-star-blend-mode: screen;
    --tw-star-gate-opacity: 1;
    display: block;
    width: var(--tw-star-size);
    height: var(--tw-star-size);
    pointer-events: none;
    user-select: none;
    opacity: calc(var(--tw-star-min-opacity) * var(--tw-star-gate-opacity));
    object-fit: contain;
    mix-blend-mode: var(--tw-star-blend-mode);
    animation: twStarOpacityTwinkle var(--tw-star-duration) ease-in-out var(--tw-star-delay) infinite both;
    will-change: opacity;
  }

  @keyframes twStarOpacityTwinkle {
    0%,
    100% {
      opacity: calc(var(--tw-star-min-opacity) * var(--tw-star-gate-opacity));
    }

    50% {
      opacity: calc(var(--tw-star-max-opacity) * var(--tw-star-gate-opacity));
    }
  }

  .intro-svg-effects-layer .intro-shooting-star {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    mix-blend-mode: screen;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__viewport {
    position: relative;
    aspect-ratio: 315 / 297;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    max-width: 315px;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__svg mask {
    mask-type: alpha;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__source {
    mix-blend-mode: screen;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--meteor-mask-width, 16);
    stroke-dasharray: var(--meteor-mask-dash, 220);
    stroke-dashoffset: var(--meteor-mask-dash, 220);
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--a {
    --meteor-delay: 0ms;
    --meteor-duration: 1400ms;
    --meteor-mask-width: 24;
    --meteor-mask-dash: 207;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--b {
    --meteor-delay: 180ms;
    --meteor-duration: 1180ms;
    --meteor-mask-width: 16;
    --meteor-mask-dash: 110;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--c {
    --meteor-delay: 320ms;
    --meteor-duration: 1500ms;
    --meteor-mask-width: 24;
    --meteor-mask-dash: 207;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--d {
    --meteor-delay: 520ms;
    --meteor-duration: 1180ms;
    --meteor-mask-width: 16;
    --meteor-mask-dash: 110;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--e {
    --meteor-delay: 680ms;
    --meteor-duration: 1560ms;
    --meteor-mask-width: 24;
    --meteor-mask-dash: 207;
  }

  .intro-svg-effects-layer .intro-shooting-star.is-active {
    visibility: visible;
    opacity: 1;
  }

  .intro-svg-effects-layer .intro-shooting-star.is-active .tw-overlay-shooting-star__mask-line {
    animation: introShootingStarMaskReveal var(--meteor-duration) cubic-bezier(0.19, 0.01, 0.2, 1) var(--meteor-delay) 1 both;
  }

  @keyframes introShootingStarMaskReveal {
    0% {
      stroke-dashoffset: var(--meteor-mask-dash, 220);
    }

    100% {
      stroke-dashoffset: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tw-star-twinkle {
      animation: none;
      opacity: 0.72;
    }

    .intro-svg-effects-layer .intro-shooting-star.is-active .tw-overlay-shooting-star__mask-line {
      animation: none;
      stroke-dashoffset: 0;
    }
  }

  .preface-text {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(20px, 4.2vw, 38px);
    padding: 0 2rem;
    text-align: center;
    pointer-events: none;
  }

  .preface-zh,
  .preface-en {
    display: block;
    opacity: 0;
    transform: translateY(16px);
    transition: none;
    will-change: opacity, transform, filter;
  }

  .preface-zh {
    width: min(744px, calc(100vw - 48px));
  }

  .preface-en {
    width: min(464px, calc(100vw - 80px));
    height: auto;
  }

  .preface-copy-img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (max-width: 767px) {
    .preface-text {
      gap: clamp(16px, 7vw, 28px);
      padding: 0 20px;
    }

    .preface-zh {
      width: min(526px, calc(100vw - 40px));
    }

    .preface-en {
      width: min(360px, calc(100vw - 64px));
    }
  }

  
  .section-p1 {
    display: none;
    position: relative;
    min-height: 100vh;
    background: #3d1f72;
    color: rgba(240, 235, 255, 0.85);
    font-size: 18px;
    letter-spacing: 0.08em;
  }
  .p1-inner {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }