@media (max-width: 1024px) {
  html.main {
    font-size: 0.9px !important;
  }

  html.main .star,
  html.main .stars,
  html.main .crytex-airdrop-spark {
    display: none !important;
  }

  html.main .crytex-airdrop-banner,
  html.main .crytex-airdrop-overlay,
  html.main .crytex-airdrop-close-btn {
    animation: none !important;
  }

  /* The hundreds of animated paths in the inline hero are decorative. */
  html.main .hero__img.hero__content,
  html.main .hero__img.hero__content .cube {
    display: none !important;
  }

  /* Mobile uses a static, horizontally scrollable logo strip. */
  html.main .run-line__wrapper {
    animation: none !important;
    transform: none !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  html.main .run-line__wrapper::-webkit-scrollbar {
    display: none;
  }

  /* These 400px blurred pseudo-elements cover most of the screen and force
     continuous large GPU layers on mobile. */
  html.main .fglow::before,
  html.main .fglow::after,
  html.main .rglow::before,
  html.main .rglow::after,
  html.main .lglow::before,
  html.main .lglow::after {
    content: none !important;
    display: none !important;
    filter: none !important;
  }

  /* Legacy public pages add one or more full-screen 400px blur layers.
     They are the main source of GPU stalls and overheating on phones. */
  html.main .about::before,
  html.main .news::before,
  html.main .algorithm::before,
  html.main .profit::before,
  html.main .profit::after,
  html.main .money::before,
  html.main .company::before,
  html.main .num::before,
  html.main .history::before,
  html.main .history::after,
  html.main .more-about::before,
  html.main .mission::after,
  html.main .important::before,
  html.main .friend::after,
  html.main .how::before,
  html.main .motion::before,
  html.main .vector::before,
  html.main .vector::after,
  html.main .sign-in::before,
  html.main .program::before,
  html.main .participate::before,
  html.main .career::before,
  html.main .inform::after,
  html.main .planned::before,
  html.main .road::before,
  html.main .road::after {
    content: none !important;
    display: none !important;
    filter: none !important;
  }

  /* Do not lay out and paint distant homepage sections until they approach
     the viewport. Native lazy-loaded images inside remain deferred as well. */
  html.main .about,
  html.main .prof,
  html.main .static,
  html.main .model,
  html.main .make,
  html.main .advant,
  html.main .start,
  html.main .part,
  html.main .more-about,
  html.main .news-new,
  html.main .project,
  html.main .num,
  html.main .history,
  html.main .plan,
  html.main .faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }

  /* Stop decorative GPU-heavy loops while keeping form/loading feedback. */
  html.main .star::before,
  html.main .star::after,
  html.main .xbot-nav__icon::before,
  html.main .xbot-nav__robot,
  html.main .xbot-nav__text,
  html.main .hot-label,
  html.main .btn__blue svg,
  html.main .make__profit_coin,
  html.main .make__invest_coin,
  html.main .make__arrow img,
  html.main .why__wrapper_bg span,
  html.main .motion__way div span,
  html.main .participate__arrow img,
  html.main .career__item_way span,
  html.main .crypto-ticker__track,
  html.main [class*="glow"],
  html.main [class*="spark"],
  html.main .crytex-airdrop-banner *,
  html.main .crytex-airdrop-banner *::before,
  html.main .crytex-airdrop-banner *::after {
    animation: none !important;
  }

  html.main [class*="glow"],
  html.main .crytex-airdrop-banner,
  html.main .crytex-airdrop-banner *,
  html.main .crytex-airdrop-overlay {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.main .crypto-ticker {
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.main .crypto-ticker::-webkit-scrollbar {
    display: none;
  }

  /* Preserve the source aspect ratio of History illustrations. */
  html.main .company__img > img,
  html.main .history__img > img,
  html.main .plan__prev > img,
  html.main .faq__container > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}