:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: #09000d;
  color: #f5d6fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --space: max(12px, 1.3vw);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
p, h1, h2 { margin: 0; }
[hidden] { display: none !important; }
/* Accessible names stay in flow with a zero-size clipped box; no layout coordinates. */
.sr-only { display: block; width: 0; height: 0; clip-path: inset(50%); white-space: nowrap; overflow: clip; }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.visual-link { min-width: 0; transition: filter .15s ease; }
.visual-link:hover { filter: brightness(1.15); }
.landing { width: 100%; }
.is-loading .landing { display: none; }
.is-ready .page-loader { display: none; }
.page-loader { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; text-align: center; padding: 24px; }
.page-loader span { width: 40px; height: 40px; border: 3px solid #623367; border-top-color: #f496ff; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Reuse the existing retry control in document flow, never as a floating bar. */
[data-flow-layout] [data-aggregation-status] { position: static !important; transform: none !important; margin: 0 auto 24px; width: fit-content; }
[data-button-list-status="loading"] [data-aggregation-status] { display: none; }
[data-aggregation-retry] { min-height: 44px; min-width: 60px; }
.stage { width: 100%; }
.stage-mobile { display: none; }
.artboard { width: 100%; padding-bottom: max(24px, env(safe-area-inset-bottom)); background: #09000d url('./assets/jw042-zcqy/pc/background.webp') center top / 100% auto no-repeat; }
.site-header { display: flex; align-items: center; gap: var(--space); padding: 0 max(3%, env(safe-area-inset-right)) 0 max(3%, env(safe-area-inset-left)); }
.pc-logo { width: 18%; height: auto; margin-left: 12%; }
.official-nav { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; align-items: center; gap: max(4px, .4vw); }
.official-nav a { display: grid; place-items: center; flex: 0 1 14vw; min-width: min(104px, 100%); min-height: 44px; }
.official-nav img { width: 100%; height: auto; }
.hero { display: grid; isolation: isolate; }
/* The illustration and copy share one grid cell. Both contribute to the row's
   intrinsic height; the next section cannot be covered when copy grows. */
.hero-art, .hero-content { grid-area: 1 / 1; min-width: 0; }
.hero-art { width: 56%; justify-self: end; align-self: start; pointer-events: none; }
.hero-art img { width: 100%; height: auto; }
.hero-content { position: relative; z-index: 1; width: 62%; padding: 1vw 2.5vw max(20px, 3vw); display: flex; flex-direction: column; align-items: stretch; gap: max(14px, 2.4vw); align-self: start; }
.hero-titles { width: 100%; }
.hero-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(8px, .6vw); }
.feature { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: .3em; padding: max(8px, .8vw) .5vw; border: 1px solid #9231ad; border-radius: 9px; background: linear-gradient(#5b216a, #250c31); }
.feature strong { font-size: max(14px, 1.5vw); }
.feature > span:last-child { grid-column: 2; font-size: max(12px, 1.22vw); overflow-wrap: anywhere; }
/* Exact source icon windows from the original feature sprite. */
.feature-icon { grid-row: span 2; width: max(24px, 3vw); aspect-ratio: 1; background: url('./assets/jw042-zcqy/pc/hero-feature-shell.webp') no-repeat; background-size: 1251% 151%; background-position: 5.3% 51%; }
.feature-icon-1 { background-position: 35.7% 51%; }
.feature-icon-2 { background-position: 66.5% 51%; }
.download-area { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: max(14px, 2vw); }
.qr-panel { display: grid; grid-template: auto / minmax(0,1fr); width: max(152px, 16vw); max-width: 100%; align-items: start; }
.qr-panel > img, .dynamic-qr { grid-area: 1 / 1; }
.qr-panel > img { width: 100%; height: auto; }
.dynamic-qr { width: 66%; height: auto; aspect-ratio: 1; margin: 12.25% auto 0; background: white; image-rendering: pixelated; }
.download-entry { display: grid; place-items: center; flex: 0 1 max(180px,21vw); min-height: max(44px, 4.95vw); padding: .55em .65em; border: 2px solid #de52eb; border-radius: 20px; background: #2f0d41; font-size: max(1.125rem, 2.08vw); font-weight: 500; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.contacts { display: grid; gap: max(4px,.5vw); }
.contact-link { display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; font-size: max(.875rem, 1.7vw); font-weight: 700; text-shadow: 0 0 6px #a94bb7; }
.contact-label { flex: 0 1 auto; }
[data-contact-value] { min-width: 0; overflow-wrap: anywhere; }
.pc-contact-icon { flex: 0 0 max(24px, 3vw); height: max(24px, 3vw); background: url('./assets/jw042-zcqy/pc/contacts.webp') 0 100% / 640% auto no-repeat; }
.pc-contact-group .pc-contact-icon { background-position: 0 0; }
.value-strip { width: 100%; height: auto; }
.section-heading { display: grid; justify-items: center; margin: max(20px, 2.5vw) auto max(12px, 1.8vw); text-align: center; width: 90%; }
.section-heading img { width: 52%; height: auto; }
.pc-access-heading img { width: 84%; }
.pc-official-heading img { width: 48%; }
/* PC heading artwork contains its subtitle. H5 exports leave space for native copy. */
.artboard-pc .section-heading p { display: none; }
.help-grid { display: flex; justify-content: center; flex-wrap: wrap; align-items: stretch; gap: max(14px, .8vw); width: 72%; margin: auto; }
.help-card { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; flex: 1 1 26%; min-width: min(210px,100%); padding: max(18px, 1.8vw); border: 2px solid #b86bd2; border-radius: max(14px, 1.4vw); background: linear-gradient(145deg,#5b216de8,#170821 70%); box-shadow: inset 0 0 12px #e600ff40, 0 0 10px #ac25da30; text-align: center; gap: max(12px,1.1vw); }
/* Crop only the original design icon. Text below is native and can grow/zoom. */
.help-icon { display: block; width: max(36px,4vw); aspect-ratio: 1; position: relative; overflow: clip; }
.help-icon img { position: absolute; width: 403%; max-width: none; height: auto; left: -151.5%; top: -53%; }
.help-copy { display: grid; align-content: start; gap: .65em; min-width: 0; }
.help-copy strong { font-size: max(1.0625rem, 1.65vw); line-height: 1.5; }
.help-description { font-size: max(.875rem, 1.28vw); line-height: 1.7; overflow-wrap: anywhere; }
.help-action { display: grid; grid-template-columns: auto auto; gap: .7em; align-items: center; justify-content: center; min-height: 44px; width: 100%; padding: .5em; border: 1px solid #c784e1; border-radius: 100px; box-shadow: 0 0 7px #c750ff80; font-size: max(.875rem, 1.3vw); font-weight: 700; }
.services-section > img { width: 100%; height: auto; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: max(10px, 1vw); width: 95%; margin: auto; }
.social-links a { display: grid; align-items: center; flex: 0 1 31%; min-width: min(220px, 100%); min-height: 44px; }
.social-links img { width: 100%; height: auto; }
.site-footer { position: relative; isolation: isolate; text-align: center; padding: max(24px, 3vw) max(5%, env(safe-area-inset-right)) max(20px, 2vw) max(5%, env(safe-area-inset-left)); color: #ddade9; font-size: max(.75rem, 1vw); line-height: 1.8; overflow-wrap: anywhere; }
.pc-footer-logo { width: 46%; height: auto; margin: auto auto max(12px, 1vw); }
.pc-footer-age { width: 20%; min-width: min(150px,100%); margin: 0 0 max(12px,1vw) auto; }
/* Decorative signature only; cannot intercept content or establish page height. */
.pc-footer-script { position: absolute; right: 2%; bottom: 0; width: 17%; height: auto; z-index: -1; opacity: .8; pointer-events: none; }
.pc-footer-legal, .h5-footer-legal { margin-top: 1em; }
@media (max-width: 900px) {
 .stage-pc { display: none; }
 .stage-mobile { display: block; }
 .artboard-mobile { background-image: url('./assets/jw042-zcqy/h5/background.webp'); }
 .site-header { padding-inline: max(2%, env(safe-area-inset-left)) max(2%, env(safe-area-inset-right)); }
 /* H5 design places the channel group against the right edge of the header. */
 .official-nav { justify-content: flex-end; }
 .official-nav a { flex-basis: 19%; min-width: min(72px,100%); }
 .hero-art { width: 60%; }
 .hero-content { width: 62%; padding: 2vw 2vw 4vw; gap: max(12px,2vw); }
 .h5-hero-title-one { width: 89%; }
 .h5-hero-title-two { width: 100%; }
 .h5-hero-subtitle { margin-top: 1vw; }
 .h5-hero-features { width: 90%; height: auto; }
 .download-area { flex-direction: column; gap: max(12px,1.2vw); }
 .qr-panel { width: max(144px,22vw); }
 .h5-qr-panel .dynamic-qr { width: 72.73%; margin-top: 7.58%; }
 .download-entry { flex: auto; width: 90%; font-size: max(1.125rem, 2.7vw); }
 .section-heading { margin-block: max(20px,2.8vw) max(16px,2vw); gap: 0; }
 .section-heading img { width: 78%; }
 .section-heading p { font-size: max(.75rem, 2vw); line-height: 1.6; }
 .h5-official-heading img { width: 55%; }
 /* Keep the three design cards on one row at ordinary phone widths. The
    minimum is content-sized, so extreme widths can wrap without tiny text. */
 .help-grid { width: 94%; gap: max(4px,1.2vw); }
 .help-card { flex: 1 1 0; min-width: min(6rem,100%); padding: max(6px,1.3vw) max(4px,1vw); gap: max(6px,1vw); }
 .help-icon { width: max(28px,5vw); }
 .help-copy strong { font-size: max(.75rem,2.1vw); overflow-wrap: anywhere; }
 .help-description { font-size: max(.75rem,1.6vw); line-height: 1.6; }
 .help-action { display: flex; flex-wrap: wrap; gap: .25em; padding: .35em; font-size: max(.75rem,1.7vw); }
 .help-icon img { width: 333%; left: -116.5%; top: -41.7%; }
 .help-icon-backup img { width: 348%; left: -124%; top: -41.7%; }
 .help-icon-faq img { width: 352%; left: -126%; top: -41.7%; }
 .h5-value-strip { margin-top: max(20px,3vw); }
 .social-links { width: 94%; gap: 8px; }
 .social-links a { flex-basis: 30%; min-width: min(180px,100%); }
 .site-footer { text-align: left; padding: max(20px,3vw) max(5%,env(safe-area-inset-right)) max(20px,3vw) max(5%,env(safe-area-inset-left)); font-size: max(.75rem,1.8vw); }
 .footer-brand { display: flex; align-items: center; gap: 2vw; margin-bottom: 1em; }
 .h5-footer-logo { width: 13%; height: auto; flex-shrink: 0; }
 .footer-brand > div { min-width: 0; }
 .h5-footer-title { font-family: serif; font-size: max(1.375rem,4.2vw); font-weight: 400; margin-right: .6em; }
 .h5-footer-tagline { font-size: max(.75rem,1.9vw); }
 .h5-footer-en { display: block; font-size: max(.625rem,1.45vw); }
 /* Original footer flourish is decoration behind the native brand text. */
 .h5-footer-decoration { position: absolute; width: 83%; height: auto; left: 3%; top: 2vw; z-index: -1; pointer-events: none; }
 .h5-footer-copyright { text-align: center; margin-top: 1em; }
}
@media (max-width: 600px) {
 /* Reserve enough width for the original six-character feature descriptions:
    one title line and one description line at normal text size. */
 .hero-content { width: max(63%,calc(252px + 4vw)); max-width: 100%; }
 .hero-titles { width: min(100%,59vw); }
 .hero-art { width: 61%; }
}
/* At extreme widths the content uses the full row; the portrait remains a
   separate proportional image in the same grid layer, behind title art only. */
@media (max-width: 280px) {
 .hero-content { width: 100%; padding-inline: 4%; }
 .hero-titles { width: 66%; }
 .download-area { flex-direction: row; margin-top: 4vw; }
 .qr-panel { width: min(160px,65%); }
 .download-entry { width: 100%; flex-basis: 100%; }
 .section-heading img { width: 100%; }
 .h5-official-heading img { width: 75%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Narrow PC keeps the same useful help width as a tablet; a 1px layout switch
   must not force three readable cards into an extra row. */
@media (min-width: 901px) and (max-width: 1200px) { .help-grid { width: 92%; } }
/* H5's original icon artwork stays proportional in local background windows;
   its labels are native text so they remain readable instead of shrinking with
   the four-button strip or 750px export. */
.h5-hero-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: max(6px,.8vw); width: 100%; }
.h5-feature { display: flex; flex-direction: column; align-items: center; gap: .35em; min-width: 0; padding: max(8px,1.2vw) 3px; border: 1px solid #a950d1; border-radius: 10px; background: linear-gradient(#321042,#17071f); text-align: center; font-size: max(.75rem,1.8vw); line-height: 1.5; overflow-wrap: anywhere; }
.h5-feature strong { font-size: max(.8125rem,2.3vw); }
.h5-feature-icon { display: block; width: max(28px,5vw); aspect-ratio: 1; background: url('./assets/jw042-zcqy/h5/hero-features.webp') no-repeat; background-size: 804% 312%; background-position: 16% 31%; }
.h5-feature-icon-1 { background-position: 51% 31%; }
.h5-feature-icon-2 { background-position: 88% 31%; }
.h5-value-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: max(10px,1vw); width: 94%; margin-inline: auto; }
.h5-value { display: flex; align-items: center; gap: .5em; padding: max(10px,1vw); border: 1px solid #bf56eb; border-radius: 10px; background: #16081ee8; min-width: 0; font-size: max(.75rem,1.55vw); line-height: 1.6; }
.h5-value strong, .h5-value span { display: block; }
.h5-value strong { font-size: max(.8125rem,1.8vw); }
.h5-value-icon { flex: 0 0 max(24px,3vw); aspect-ratio: 1; background: url('./assets/jw042-zcqy/h5/value-strip.webp') no-repeat; background-size: 1805% 172.5%; background-position: 4.7% 50%; }
.h5-value-icon-1 { background-position: 30.5% 50%; }
.h5-value-icon-2 { background-position: 56.3% 50%; }
.h5-value-icon-3 { background-position: 82.3% 50%; }
@media (min-width: 601px) and (max-width: 900px) { .h5-value-strip { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 319px) { .h5-value-strip { grid-template-columns: minmax(0,1fr); } }