@media (min-width: 813px) {
  html.huiling-reference-home {
    --base-padding-x: clamp(32px, 4vw, 72px);
  }
}

@media (min-width: 981px) {
  html.huiling-reference-home #huiling-reference-hero {
    left: 0 !important;
    width: calc(100vw / var(--ref-scale, 1)) !important;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-device-card {
    right: 92px !important;
    width: auto !important;
  }
}

@media (max-width: 980px) {
  html.huiling-reference-home #huiling-reference-hero .ref-orb-field {
    isolation: isolate;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-orb-field::before {
    top: 78px;
    width: min(420px, 112vw);
    height: 250px;
    filter: blur(12px);
    opacity: 0.88;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-orb-field::after {
    top: 246px;
    width: min(310px, 82vw);
    height: 84px;
    filter: blur(8px);
  }

  html.huiling-reference-home #huiling-reference-hero .ref-fluid-halo {
    top: 132px;
    width: min(350px, 94vw);
    height: 158px;
    filter: blur(6px);
    opacity: 0.7;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-lightband {
    filter: blur(0.6px);
  }

  html.huiling-reference-home #huiling-reference-hero .ref-lightband-one {
    top: 198px;
    width: min(340px, 90vw);
    height: 24px;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-lightband-two {
    top: 144px;
    width: min(294px, 78vw);
    height: 32px;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-lightband-three {
    top: 232px;
    display: block;
    width: min(286px, 76vw);
    height: 22px;
    opacity: 0.54;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-depth-shadow {
    top: 248px;
    width: min(280px, 74vw);
    height: 62px;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-caustic {
    left: 50%;
    top: 42px;
    width: min(320px, 84vw);
    height: 252px;
    animation-name: refCausticMobile;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-stardust {
    display: block;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-stardust-one {
    left: 18%;
    top: 186px;
    animation-name: refDustMobileOne;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-stardust-two {
    left: 76%;
    top: 142px;
    animation-name: refDustMobileTwo;
  }

  html.huiling-reference-home #huiling-reference-hero .ref-stardust-three {
    left: 38%;
    top: 252px;
    animation-name: refDustMobileThree;
  }
}

@keyframes refCausticMobile {
  0%, 32% { opacity: 0; transform: translateX(-64%) rotate(-14deg); }
  54% { opacity: 0.48; }
  82%, 100% { opacity: 0; transform: translateX(-36%) rotate(-14deg); }
}

@keyframes refDustMobileOne {
  0%, 100% { opacity: 0.28; transform: translate3d(0, 0, 0) scale(0.72); }
  52% { opacity: 0.92; transform: translate3d(118px, -34px, 0) scale(1.18); }
}

@keyframes refDustMobileTwo {
  0%, 100% { opacity: 0.42; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.86; transform: translate3d(-142px, 52px, 0) scale(0.78); }
}

@keyframes refDustMobileThree {
  0%, 100% { opacity: 0.24; transform: translate3d(0, 0, 0); }
  48% { opacity: 0.84; transform: translate3d(86px, -68px, 0); }
}