:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #18000f;
  color: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Reserve classic scrollbar space so viewport units use the available width. */
html { overflow-y: scroll; }
body { display: grid; justify-items: center; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, canvas { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
.landing { width: 100%; min-height: 100%; min-height: 100dvh; }
/* Loading occupies the document instead of placing an overlay over the links. */
.is-loading .landing { display: none; }
.page-loader {
  width: 100%; min-height: 100%; min-height: 100dvh;
  display: grid; place-content: center; justify-items: center;
  background: linear-gradient(#18000fc2, #18000fc2), url("./assets/jw002/pc-background-581-5789.webp") center top / cover;
  color: #ffe5fb;
}
.page-loader p { margin: 18px 0 0; font-size: 14px; letter-spacing: 4px; }
.loader-ring { width: 36px; height: 36px; border: 3px solid #ff75ec38; border-top-color: #ff5ce5; border-radius: 50%; animation: loader-spin 750ms linear infinite; }
.is-ready .page-loader { display: none; }
.is-loading[data-button-list-status="loading"] [data-aggregation-status] { display: none; }
[data-aggregation-status] { grid-row: 1; align-self: end; z-index: 1; margin: 24px; }
.page-loader { grid-row: 1; grid-column: 1; }
@keyframes loader-spin { to { transform: rotate(1turn); } }
.artboard {
  /* Fill the available viewport at every size; the long page scrolls vertically. */
  width: 100%;
  margin: 0;
  display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh;
  background: #18000f url("./assets/jw002/pc-background-581-5789.webp") center top / 100% auto no-repeat;
}
.artboard-mobile { display: none; }
.hero-section { display: flex; flex-direction: column; padding-top: 1.875vw; }
.hero-scene { display: grid; grid-template-columns: 48.333333% 44.479167%; align-items: start; }
.hero-entry { grid-column: 1; grid-row: 1; width: 73.060345%; margin-left: 27.693966%; }
.hero-entry > img { width: 100%; }
.hero-copy { grid-column: 2; grid-row: 1; width: 100%; margin-top: 4.800937%; pointer-events: none; }
.hero-benefits { width: 39.375%; margin-left: 6.302083%; margin-top: -4.427083vw; }
.design-link { display: block; cursor: pointer; touch-action: manipulation; transition: filter 160ms ease; }
.design-link:hover { filter: brightness(1.1); }
.design-link:active { filter: brightness(.9); }
.design-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.access-section { margin-top: 7.8125vw; }
.access-heading { display: block; width: 40%; margin-inline: auto; }
.pc-access-heading { position: relative; aspect-ratio: 768 / 139; overflow: hidden; }
/* Figma imageTransform crop: x=0.17446044, width=0.69064754. */
.pc-access-heading > img { position: absolute; width: 144.79%; max-width: none; height: 100%; left: -25.26%; top: 0; }
.access-grid { display: grid; grid-template-columns: 463fr 1217fr; align-items: start; gap: 3.333333vw; margin: 2.5vw 4.53125% 0 4.635417%; }
.help-grid { display: grid; grid-template-columns: 391fr 391fr 396fr; gap: 1.197917vw; margin-top: 1.041667vw; }
.help-card > img { width: 100%; }
.download-card { display: grid; align-items: start; }
.qr-panel, .download-entry { grid-area: 1 / 1; }
.qr-panel { display: grid; align-items: start; }
.qr-panel > img, .qr-panel .dynamic-qr, .qr-panel::before { grid-area: 1 / 1; }
.qr-panel > img { width: 100%; }
.dynamic-qr { z-index: 1; aspect-ratio: 1; height: auto; background: #fff; border-radius: 4%; image-rendering: pixelated; pointer-events: none; }
.pc-qr-panel .dynamic-qr { width: 32.397408%; margin: 34.989201% 0 0 8.207343%; }
.download-entry {
  z-index: 2; justify-self: start; display: flex; justify-content: center; align-items: center;
  width: 42.116631%; min-height: max(44px, 2.708333vw); margin: 46.00432% 0 0 47.516199%;
  border: 1px solid #fa85fe; border-radius: 65px; background: #de12b2;
  color: #fff; font-size: max(12px, 1.5625vw); font-weight: 500; line-height: 1.4;
}
.services-section { margin-top: 4.583333vw; }
.services-heading, .channels-heading { width: 32.083333%; margin-inline: auto; }
.services-content { display: grid; margin-top: 2.5vw; }
.services-artwork { grid-area: 1 / 1; width: 86.614583%; margin-left: 6.510417%; margin-bottom: -3.958333vw; pointer-events: none; }
[data-related-products-mount] { grid-area: 1 / 1; align-self: start; margin: 15.416667vw 6.614583% 0 7.291667%; }
.channels-section { margin-top: 0; }
.channels-grid { display: grid; grid-template-columns: 459fr 466fr 462fr; gap: 1.197917vw; margin: 2.395833vw 11.666667% 0 13.75%; }
.social-link { position: relative; overflow: hidden; aspect-ratio: 459 / 150; }
.social-group { aspect-ratio: 466 / 152; }
.social-x { aspect-ratio: 462 / 151; }
/* Only the image is positioned: these three crops match the Figma fills. */
.social-link > img { position: absolute; left: 0; width: 100%; max-width: none; }
.social-channel > img { top: -4.05%; height: 110.36%; }
.social-group > img { top: -3.11%; height: 105.78%; }
.social-x > img { top: -10.76%; height: 117.49%; }
.site-footer {
  margin-top: 3.489583vw; padding: 2.708333vw 3% max(24px, 2.395833vw);
  padding-bottom: max(24px, 2.395833vw, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 1.145833vw;
  text-align: center; background: linear-gradient(to right, #39031029, #23050d 47.115%, #39031026);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: max(10px, .729167vw); line-height: 1.25;
}
.site-footer p { margin: 0; opacity: .7; max-width: 100%; overflow-wrap: anywhere; }
.site-footer .footer-notice { font-size: max(10px, .833333vw); opacity: 1; }
html[data-layout="mobile"] .artboard-pc { display: none; }
html[data-layout="mobile"] .artboard-mobile { display: flex; }
html[data-layout="mobile"] .page-loader { background-image: linear-gradient(#18000fc2, #18000fc2), url("./assets/jw002/h5-background-581-5796.webp"); }
.artboard-mobile { background-image: url("./assets/jw002/h5-background-581-5796.webp"); }
.artboard-mobile .hero-section { padding-top: .4vw; }
.artboard-mobile .hero-scene { grid-template-columns: 37.333333% 62.533333%; }
.artboard-mobile .hero-entry { width: 145%; margin-left: -.357143%; }
.artboard-mobile .hero-copy { margin-top: 10.234542%; }
/* Decorative slogan overlaps the hero artwork, within its local grid cell. */
.hero-slogan { grid-column: 2; grid-row: 1; width: 15.991471%; margin: 17.697228% 0 0 10.660981%; pointer-events: none; }
.artboard-mobile .hero-benefits { width: 90.4%; margin: 2.266667vw 0 0 4.666667%; }
.artboard-mobile .access-section { margin-top: 13.733333vw; }
.artboard-mobile .access-heading { width: 100%; }
.artboard-mobile .access-grid { display: flex; flex-direction: column; gap: 5.866667vw; margin: 5.866667vw 4.666667% 0; }
.artboard-mobile .download-card { width: 98.529412%; margin-inline: auto; }
.artboard-mobile .help-grid { width: 100%; grid-template-columns: minmax(0, 219fr) minmax(0, 216fr) minmax(0, 216fr); align-items: end; gap: 1.866667vw; margin: 0; }
/* Grid keeps the live button inside its frame; the frame can grow for enlarged text. */
.h5-qr-panel { align-self: stretch; }
.h5-qr-panel > img { height: 100%; }
.h5-qr-panel .dynamic-qr { width: 17.462687%; margin: 6.119403% 0 0 7.38806%; }
/* Grid overlay masks the old QR in the source panel, as in Figma's white slot. */
.h5-qr-panel::before { content: ""; width: 18.507463%; aspect-ratio: 124 / 117; margin: 6.119403% 0 0 6.865672%; background: #fff; pointer-events: none; }
.artboard-mobile .download-entry {
  width: 29.104478%; margin: 19.701493% 0 3.283582% 44.179104%;
  min-width: 0; min-height: max(24px, 6.933333vw); font-size: max(12px, 4vw);
  text-align: center; overflow-wrap: anywhere;
}
.artboard-mobile .help-card {
  display: flex; flex-direction: column; align-items: center; min-width: 0; overflow-wrap: anywhere;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  padding: 9.466667vw 1vw 2.933333vw; text-align: center; line-height: 1.4;
}
/* Figma's H5 card exports contain their icon and frame, not their live text. */
.artboard-mobile .help-card > img { display: none; }
.artboard-mobile .help-card-faq { padding-top: 9.866667vw; background-image: url("./assets/jw002/h5-faq-background-710-1027.webp"); }
.help-card-backup { background-image: url("./assets/jw002/h5-backup-background-710-1028.webp"); }
.help-card-install { background-image: url("./assets/jw002/h5-install-background-710-1029.webp"); }
/* Figma's 750px H5 artboard: 20/28 title, 14/20 description, 20/28 action. */
.help-card-title, .help-card-action { font-size: 2.666667vw; font-weight: 600; }
.help-card-description { font-size: 1.866667vw; font-weight: 400; color: rgb(255 255 255 / 90%); line-height: 1.428571; flex: 1; }
.help-card-action { margin-top: 2vw; font-weight: 500; }
.artboard-mobile .services-section { margin-top: 13.2vw; }
.artboard-mobile .services-heading, .artboard-mobile .channels-heading { width: 57.6%; margin-left: 22.266667%; }
.artboard-mobile .services-content { margin-top: 10.266667vw; }
.artboard-mobile .services-artwork { width: 99.866667%; margin-left: 0; margin-bottom: 0; }
.artboard-mobile [data-related-products-mount] { margin: 29.6vw 1.466667% 0 .8%; }
.artboard-mobile .channels-section { margin-top: 17.2vw; }
/* Standard H5 keeps the design row; the extreme narrow fallback is below. */
.artboard-mobile .channels-grid { grid-template-columns: 214fr 218fr 216fr; gap: 1.333333vw; margin: 8.8vw 5.6% 0; }
.artboard-mobile .social-link { aspect-ratio: 214 / 70; }
.artboard-mobile .social-group { aspect-ratio: 218 / 71; }
.artboard-mobile .social-x { aspect-ratio: 216 / 70; }
.artboard-mobile .site-footer { margin-top: 12.133333vw; padding-top: 3.6vw; padding-bottom: max(3.6vw, env(safe-area-inset-bottom)); gap: 2vw; font-size: max(10px, 1.866667vw); }
.artboard-mobile .footer-notice { font-size: max(10px, 2.133333vw); }
/* Missing API entries leave no empty tracks; populated designs retain their geometry. */
.download-card:not(:has(> :not([hidden]))) { display: none; }
.access-grid:not(:has(.download-card > :not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.download-card:has(> .qr-panel[hidden]) > .download-entry {
  grid-area: auto; justify-self: center; margin: 0; width: 100%; min-height: 44px;
}
.help-grid:has(> [hidden]), .artboard-mobile .help-grid:has(> [hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.channels-section:not(:has(.social-link:not([hidden]))) { display: none; }
.channels-grid:has(> [hidden]) { display: flex; flex-wrap: wrap; justify-content: center; }
.channels-grid:has(> [hidden]) > .social-link { flex: 0 1 32%; }
.artboard-mobile .channels-grid:has(> [hidden]) { flex-wrap: nowrap; }
.artboard-mobile .channels-grid:has(> [hidden]) > .social-link { flex-basis: 32%; }
@media (max-width: 600px) {
  .artboard-mobile .site-footer { font-size: 12px; line-height: 1.6; gap: 10px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .artboard-mobile .footer-notice { font-size: 12px; }
}
@media (max-width: 319px) {
  /* Below a normal phone width, keep complete cards in a single document-flow column. */
  .artboard-mobile .help-grid,
  .artboard-mobile .help-grid:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); gap: 4vw; }
  .artboard-mobile .help-card {
    --help-design-width: 216;
    --help-top: 71;
    --help-unit: calc(90.666667vw / var(--help-design-width));
    padding: calc(var(--help-unit) * var(--help-top)) 3.5% calc(var(--help-unit) * 22);
  }
  .artboard-mobile .help-card-faq { --help-design-width: 219; --help-top: 74; }
  .artboard-mobile .help-card-title,
  .artboard-mobile .help-card-action { font-size: calc(var(--help-unit) * 20); }
  .artboard-mobile .help-card-description { font-size: calc(var(--help-unit) * 14); }
  .artboard-mobile .help-card-action { margin-top: calc(var(--help-unit) * 15); }
  .artboard-mobile .channels-grid,
  .artboard-mobile .channels-grid:has(> [hidden]) {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4vw;
  }
}
@media (max-height: 520px) {
  /* A short viewport scrolls normally; no locked screen or floating controls. */
  .landing, .artboard { min-height: auto; }
  .hero-section { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .design-link { transition: none; }
  .loader-ring { animation-duration: 1.5s; }
}