/* Shared geometry. Only the colour layer changes between the two HTML pages. */
:root { color-scheme: dark; }
body { background: #000; }
.lp-h5 { width: min(100%, 750px); margin: 0 auto; }
.m-brand img { width: 100%; height: 100%; object-fit: contain; }
.lead { color: #fff; text-shadow: 0 0 3.6px #000, 0 0 21.9px #000, 0 0 53.9px #000; }
.headline { display: block; white-space: nowrap; font-weight: 700; line-height: 1; }
.headline-small { font-size: 50.9px; color: #f1d4bb; }
.headline[data-copy='heroTitle2'] { font-size: 45.2px; }
.headline-accent { font-size: 70.8px; color: var(--pink-text); }
.section-title { font-size: 46.2px; color: #f1d4bb; }
.section-accent { font-size: 64.4px; color: var(--pink-text); }
.final-title { font-size: 48px; color: #f1d4bb; }
.final-accent { font-size: 62.4px; color: var(--pink-text); }
.m-hero .sl { object-position: 50% 30%; }
.m-dots { z-index: 4; }
.m-dot { position: relative; flex-shrink: 0; }
.m-dot::before { content: ''; position: absolute; inset: -15px -8px; }
.m-dots:focus-within { outline: none; }
.m-dot:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
.m-hbtn:focus-visible, .cta:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.m-dlbar { height: calc(144px * var(--zh, 1) + env(safe-area-inset-bottom, 0px)); }
.m-dlbar-in { padding-bottom: 40px; }
.m-frame h1, .m-frame h2 { margin: 0; }
.m-card h3, .m-card p { margin: 0; }
.m-card .go { pointer-events: none; }
.m-frame:first-child { z-index: 1; }
.m-brand, .m-hbtn { z-index: 5 !important; }
.m-install { z-index: 3; }
#entry-dialog { position: fixed; inset: 0; margin: auto; max-width: min(85vw, 400px); width: 100%; padding: 26px; border-radius: 18px; border: 1px solid #465c72; color: #e9f1fa; background: #111d2b; font: 14px/1.7 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif; box-shadow: 0 24px 90px #000b; }
#entry-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
#entry-dialog h2 { font-size: 19px; margin-bottom: 12px; }
#entry-dialog p { color: #becbd7; overflow-wrap: anywhere; }
#entry-dialog button { display: block; width: 100%; margin-top: 22px; padding: 10px; border-radius: 9px; color: #0b1420; background: #c2dcef; font-weight: 700; }
#entry-dialog button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Black / deep mist blue / silver / ice blue. Never filter human imagery. */
body[data-theme='mistblue'] {
  --gold: linear-gradient(102.51deg, #f0f4f8 27.075%, #a9c6db 72.925%);
  --pink-text: #a4d2ef;
  --rose: #678ea8;
  --muted: #a9b4bf;
  --btn-bg: linear-gradient(-20.906deg, rgba(4,8,14,.5) 64.658%, rgba(53,78,102,.4) 95.395%);
  --card-bg: linear-gradient(126.53deg, rgba(226,239,249,.07) 8.455%, rgba(5,9,15,0) 47.851%, rgba(101,144,177,.2) 112.28%);
}
[data-theme='mistblue'] .gold { background-image: var(--gold) !important; }
[data-theme='mistblue'] .headline-small,
[data-theme='mistblue'] .section-title,
[data-theme='mistblue'] .final-title { color: #e5eaf0; }
[data-theme='mistblue'] .headline-accent,
[data-theme='mistblue'] .section-accent,
[data-theme='mistblue'] .final-accent { color: #a4d2ef; text-shadow: 0 0 24px rgba(110,162,204,.15); }
[data-theme='mistblue'] .m-frame { background: #000; }
[data-theme='mistblue'] .m-hero-shade {
  background: linear-gradient(180deg, rgba(2,5,10,.4) 0, transparent 16%, transparent 44%, rgba(0,2,6,.55) 62%, rgba(0,1,3,.82) 80%, #000 100%);
}
[data-theme='mistblue'] .btn-glass::before {
  border: 1px solid rgba(151,191,220,.64);
  background: linear-gradient(180deg, rgba(100,145,180,.2), rgba(71,104,135,.08)), rgba(5,13,22,.55);
  box-shadow: inset 0 0 16px rgba(94,138,175,.38), inset 0 -1px 0 rgba(153,198,233,.28);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}
[data-theme='mistblue'] .btn-glass:hover::before { border-color: #b8d5eb; box-shadow: inset 0 0 20px #82a5c380; }
[data-theme='mistblue'] .m-dot.on { background: #9fc8e6; }
[data-theme='mistblue'] .m-dim { background: rgba(3,8,14,.88); }
[data-theme='mistblue'] .m-s2a,
[data-theme='mistblue'] .m-s2b { opacity: .38; }
[data-theme='mistblue'] .m-card::before {
  border: 1px solid rgba(196,218,237,.29);
  background: linear-gradient(147.48deg, rgba(229,239,249,.07) 8.455%, rgba(5,10,18,.15) 47.851%, rgba(83,121,157,.2) 112.28%);
  box-shadow: inset 0 1px 0 rgba(229,243,255,.17);
  backdrop-filter: blur(16px) saturate(115%) brightness(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(115%) brightness(1.2);
}
[data-theme='mistblue'] .m-card.hot::before {
  border: 1px solid rgba(181,212,239,.34);
  background: rgba(63,97,131,.09);
  backdrop-filter: blur(20px) saturate(115%) brightness(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(115%) brightness(1.25);
}
[data-theme='mistblue'] .m-card-pink {
  background: radial-gradient(ellipse 50% 50% at 60% 45%, rgba(124,169,205,.15), rgba(124,169,205,.06) 45%, rgba(124,169,205,0) 78%);
}
[data-theme='mistblue'] .m-card h3 { color: #dce8f2; }
[data-theme='mistblue'] .m-card p { color: #b7c3ce; }
/* These are decorative film strips and vector icons only. */
[data-theme='mistblue'] .m-film2,
[data-theme='mistblue'] .m-filmb,
[data-theme='mistblue'] .m-beam img,
[data-theme='mistblue'] .m-card .ring > img,
[data-theme='mistblue'] .m-card .glow,
[data-theme='mistblue'] .m-line { filter: hue-rotate(-120deg) saturate(.48); }
[data-theme='mistblue'] .m-glowbit { opacity: .26; }
[data-theme='mistblue'] .m-dlbar { background: rgba(5,11,19,.7); border-top-color: rgba(170,203,230,.14); }
[data-theme='mistblue'] .cta {
  background: linear-gradient(98.38deg, #79a2c3 .139%, #34536f 42.329%, #a6c8e3 99.861%);
  box-shadow: 0 1px 12.4px #769ec366, inset 0 -1px 6px #bbdaf066;
}
[data-theme='mistblue'] .m-dlbar .cta-glass {
  border: 2px solid rgba(151,189,220,.8);
  background: linear-gradient(180deg, rgba(100,145,180,.22), rgba(52,83,113,.1)), rgba(6,14,24,.65);
  box-shadow: 0 0 12px #759bb44d, inset 0 0 18px #739ab64d;
}
[data-theme='mistblue'] .m-dlbar .cta-gold {
  background: linear-gradient(98.38deg, #b4c7d8 .139%, #8ba6be 42.329%, #e8f2fa 99.861%);
  box-shadow: 0 1px 12.4px #a7c9df66, inset 0 -1px 6px #e2f2ff66;
}
[data-theme='mistblue'] .m-dlbar .cta-gold .t { color: #102536; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Brand banner: transparent, editable type and independent contact links. */
.m-brand.mobile-banner { left: 32px; top: 28px; width: 686px; height: 92px; display: flex; align-items: center; gap: 16px; background: transparent; border: 0; box-shadow: none; }
.brand-app-icon { display: block; width: 82px; height: 82px; flex: none; overflow: hidden; border-radius: 19px; }
.m-brand .brand-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.brand-copy { flex: 1; min-width: 0; text-shadow: 0 2px 8px #000b; }
.brand-title-row { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand-title-row strong { font-size: 32px; letter-spacing: 0; color: #fff; }
.official-badge { padding: 2px 12px; border-radius: 28px; font: 700 20px/1.35 var(--sans); color: #fff; background: linear-gradient(120deg,#09bdea,#0088c5); border: 1px solid #d2b47b; text-shadow: none; }
.brand-copy > p { margin-top: 9px; font: 500 18px/1.3 var(--sans); white-space: nowrap; color: #bde9f8; letter-spacing: .1px; }
.banner-actions { display: flex; align-items: center; gap: 17px; margin-left: 2px; }
.banner-actions a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; gap: 4px; font: 500 18px/1.3 var(--sans); color: #fff; text-shadow: 0 2px 6px #000; white-space: nowrap; }
.banner-actions svg { width: 45px; height: 45px; fill: none; stroke: #12c5f2; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px #04b6ef33); }
.banner-actions .spark, .banner-actions .solid, .banner-actions circle { fill: #12c5f2; stroke-width: 1.5; }
.banner-actions a:focus-visible { outline: 2px solid #f3d79b; outline-offset: 5px; border-radius: 6px; }

/* Two rectangular CTAs follow the supplied silhouette and spacing. */
.m-dlbar-in.two { padding: 20px 32px 32px; gap: 28px; }
.m-dlbar-in.two .cta { flex: 1 1 0; min-width: 0; height: 80px; border-radius: 20px; gap: 10px; padding: 0 10px; }
.m-dlbar-in.two .cta .t { font-size: 28px; font-weight: 700; }
.m-dlbar-in.two .cta svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-dlbar-in.two .explore-more svg { width: 28px; height: 28px; stroke-width: 1.6; }

/* Reference 3 palette: vivid cyan, white, warm fine gold edges, black. */
body[data-theme='mistblue'] { --pink-text: #11c6f2; --rose: #11b6e8; --gold: linear-gradient(102deg,#fff 20%,#a4eaff 90%); --muted: #a8bac3; }
[data-theme='mistblue'] .headline-accent,
[data-theme='mistblue'] .section-accent,
[data-theme='mistblue'] .final-accent { color: #18c8f5; text-shadow: 0 0 23px #06b9f52b; }
[data-theme='mistblue'] .m-dot.on { background: #00bde9; }
[data-theme='mistblue'] .brand-app-icon img { filter: none; }
[data-theme='mistblue'] .m-card::before { border-color: #b4d8e63b; background: linear-gradient(147deg,#d9f5ff12 8%,#020b100f 48%,#0087b528 112%); }
[data-theme='mistblue'] .m-card.hot::before { border-color: #15b9e454; background: #008eb51a; }
[data-theme='mistblue'] .m-card-pink { background: radial-gradient(ellipse 50% 50% at 60% 45%,#00b8ed30, #00b8ed0f 45%,transparent 78%); }
[data-theme='mistblue'] .m-film2,
[data-theme='mistblue'] .m-filmb,
[data-theme='mistblue'] .m-beam img,
[data-theme='mistblue'] .m-card .ring > img,
[data-theme='mistblue'] .m-card .glow,
[data-theme='mistblue'] .m-line { filter: hue-rotate(-139deg) saturate(.9); }
[data-theme='mistblue'] .m-dlbar { background: #01090fbd; border-top: 1px solid #53c2e52b; }
[data-theme='mistblue'] .m-dlbar-in.two .download-main { color: #fff; border: 1.5px solid #dcc18b; background: linear-gradient(110deg,#11c4ed 0%,#00a8df 56%,#0089ca 100%); box-shadow: 0 0 14px #00b9ef21,inset 0 1px 0 #c5f4ff70; }
[data-theme='mistblue'] .m-dlbar-in.two .explore-more { color: #d6f2fc; border: 1.5px solid #bca56e; background: linear-gradient(180deg,#0730469c,#020a10b3); box-shadow: inset 0 1px 0 #bcecff19; }
[data-theme='mistblue'] .m-dlbar-in.two .cta:hover { filter: brightness(1.08); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Only the elements identified in the five references change colour. */
[data-theme='mistblue'] .official-badge {
  color: #FFF7FA;
  background: linear-gradient(110deg, #D982AD, #AC91C7);
  border-color: #E7BFD6;
}
[data-theme='mistblue'] .banner-actions svg { stroke: #D982AD; filter: drop-shadow(0 0 7px #D982AD26); }
[data-theme='mistblue'] .banner-actions .spark,
[data-theme='mistblue'] .banner-actions .solid,
[data-theme='mistblue'] .banner-actions circle { fill: #D982AD; }
[data-theme='mistblue'] .section-accent { color: #D982AD; text-shadow: 0 0 23px #D982AD26; }
[data-theme='mistblue'] .final-accent { color: #D982AD; text-shadow: 0 0 23px #AC91C726; }
[data-theme='mistblue'] .m-dot.on { background: linear-gradient(100deg, #D982AD, #AC91C7); }
[data-theme='mistblue'] .m-filmb { filter: hue-rotate(5deg) saturate(.5); }
[data-theme='mistblue'] .m-dlbar-in.two .download-main {
  color: #FFF7FA;
  border-color: #E7BDD7;
  background: linear-gradient(110deg, #D982AD, #AC91C7);
  box-shadow: 0 0 14px #D982AD26, inset 0 1px 0 #FFF7FA52;
}
[data-theme='mistblue'] .m-dlbar-in.two .explore-more {
  color: #FFF7FA;
  border-color: #C89DBF;
  background: linear-gradient(180deg, #D982AD1C, #AC91C70A);
  box-shadow: inset 0 1px 0 #FFF7FA19;
}

/* Compact transparent banner; poster and content positions are unchanged. */
.m-brand.mobile-banner { top: 22px; height: 74px; gap: 14px; }
.brand-app-icon { width: 64px; height: 64px; border-radius: 15px; }
.brand-title-row { gap: 9px; }
.brand-title-row strong { font-size: 28px; }
.official-badge { font-size: 16px; padding: 2px 10px; }
.brand-copy > p { margin-top: 7px; font-size: 16px; }
.banner-actions { gap: 16px; }
.banner-actions a { min-height: 70px; font-size: 16px; }
.banner-actions svg { width: 35px; height: 35px; }

/* Keep the title coordinates, but show hero artwork in its original colours. */
.lp-h5 .m-hero { mask-image: none; -webkit-mask-image: none; }
.lp-h5 .m-hero-shade { display: none; background: none; }
.lp-h5 .m-hero .sl { filter: none; mix-blend-mode: normal; }

/* Additional marked accents: hero heading and the three glass feature cards. */
body[data-theme='mistblue'] {
  --pink-text: #D982AD;
  --rose: #D982AD;
  --gold: linear-gradient(102deg, #FFF7FA 20%, #DEC3D9 90%);
}
[data-theme='mistblue'] .headline-accent { color: #D982AD; text-shadow: 0 0 23px #D982AD26; }
[data-theme='mistblue'] .brand-copy > p { color: #E5CBDF; }
[data-theme='mistblue'] .m-card::before {
  border-color: #D9AFCE52;
  background: linear-gradient(147deg, #FFF7FA12 8%, #0E070D0F 48%, #D982AD28 112%);
}
[data-theme='mistblue'] .m-card.hot::before { border-color: #D982AD66; background: #AC91C71F; }
[data-theme='mistblue'] .m-card-pink { background: radial-gradient(ellipse 50% 50% at 60% 45%, #D982AD30, #AC91C70F 45%, transparent 78%); }
[data-theme='mistblue'] .m-card h3 { color: #FFF7FA; }
[data-theme='mistblue'] .m-card p { color: #CCBBC9; }
[data-theme='mistblue'] .m-film2,
[data-theme='mistblue'] .m-beam img,
[data-theme='mistblue'] .m-card .ring > img,
[data-theme='mistblue'] .m-card .glow,
[data-theme='mistblue'] .m-line { filter: hue-rotate(5deg) saturate(.5); }
[data-theme='mistblue'] .m-dlbar { border-top-color: #D982AD29; }

/* Type colour pairing from the reference: warm ivory titles, rose emphasis. */
body[data-theme='mistblue'] { --gold: linear-gradient(102deg, #FFE9D1 20%, #DDBB98 90%); }
[data-theme='mistblue'] .headline-small,
[data-theme='mistblue'] .section-title,
[data-theme='mistblue'] .final-title { color: #F3DDC4; }
[data-theme='mistblue'] .headline-accent,
[data-theme='mistblue'] .section-accent,
[data-theme='mistblue'] .final-accent { color: #D982AD; }

/* Independent compact navigation, with a cinematic plum/film texture. */
.nav-viewport { position: relative; width: min(100%,750px); height: calc(116px * var(--zh,1)); overflow: hidden; background: #0C0A10; }
.nav-surface { position: absolute; left: 0; top: 0; width: 750px; height: 116px; transform: scale(var(--zh,1)); transform-origin: top left; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 350px 120px at 22% 115%,#D982AD28,transparent 75%), radial-gradient(ellipse 350px 100px at 92% -30%,#AC91C725,transparent 76%), linear-gradient(110deg,#09090D,#19101B 55%,#09090D); }
.nav-surface::before { content: ''; position: absolute; inset: -80px -20px; z-index: -1; pointer-events: none; background: url('../assets/film.webp') 55% 44% / 800px auto no-repeat; opacity: .14; filter: hue-rotate(5deg) saturate(.45); transform: rotate(-7deg); mix-blend-mode: screen; }
.nav-surface::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-bottom: 1px solid #D982AD38; background: linear-gradient(180deg,#FFF7FA04,transparent 55%,#0004); }
.nav-surface .m-brand.mobile-banner { left: 32px; top: 20px; width: 686px; height: 76px; background: transparent; }
.nav-surface .brand-title-row strong { color: #FFF7FA; }

/* Only the image's lower edge blends into the black copy area. */
.lp-h5 .hero-section.hero-flow { position: relative; left: 0; top: 0; height: auto; overflow: visible; background: #000; }
.poster-window { position: relative; width: 750px; height: 1000px; overflow: hidden; background: #000; }
.poster-window .m-hero { inset: 0; width: 750px; height: 1000px; mask: none; -webkit-mask: none; }
.poster-window .m-hero-hit { inset: 0; width: 750px; height: 1000px; }
.hero-bottom-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 210px; pointer-events: none; background: linear-gradient(180deg,transparent 0%,rgba(20,7,17,.12) 32%,rgba(9,3,8,.65) 69%,#000 100%); }
.hero-copy { position: relative; z-index: 3; margin-top: -70px; padding: 0 48px 38px; text-align: center; background: linear-gradient(180deg,transparent 0,#000 74px,#000 100%); }
.hero-copy h1 { margin: 0 0 24px; font-size: 46px; line-height: 1.45; overflow-wrap: anywhere; }
.hero-copy .headline { position: static; display: inline; width: auto; height: auto; white-space: normal; line-height: inherit; }
.hero-copy .hero-title-intro { display: block; font-size: 44px; margin-bottom: 4px; }
.hero-copy .headline[data-copy='heroTitle2'] { font-size: 46px; }
.hero-copy .headline-accent { font-size: 58px; margin-left: 4px; }
.hero-copy .hero-subtitle { position: static; width: 100%; margin: 0 0 18px; font-size: 26px; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
.hero-copy .hero-description { position: static; width: 100%; margin: 0; font-size: 21px; line-height: 33px; color: #CCC1C9; overflow-wrap: anywhere; }
.hero-copy .copy-note { margin-top: 12px; font-size: 20px; line-height: 30px; color: #A898A3; }
.hero-copy .m-dots { position: relative; left: auto; top: auto; transform: none; display: flex; justify-content: center; width: 100%; margin: 28px 0 0; gap: 16px; }
.hero-copy .m-dot { width: 12px; height: 12px; }
.hero-copy .m-dot.on { width: 30px; }
[data-hero-layout="transition"] .feature-section > div[aria-hidden]::after { content: ''; position: absolute; left: 0; top: 0; width: 750px; height: 120px; z-index: 1; pointer-events: none; background: linear-gradient(180deg,#000,transparent); }

/* Vivid coral + fuchsia accents; the black page and image colours stay intact. */
body[data-theme='mistblue'] { --accent-coral: #FF4D5F; --accent-rose: #FF0A8A; --pink-text: #FF2D7A; --rose: #FF4D5F; }
[data-theme='mistblue'] .headline-accent,
[data-theme='mistblue'] .section-accent,
[data-theme='mistblue'] .final-accent { color: #FF2D7A; text-shadow: 0 0 23px #FF0A8A35; }
[data-theme='mistblue'] .official-badge,
[data-theme='mistblue'] .m-dot.on { background: linear-gradient(105deg,#FF4D5F,#FF0A8A); }
[data-theme='mistblue'] .official-badge { border-color: #FF8DA58C; }
[data-theme='mistblue'] .banner-actions svg { stroke: #FF4D6F; filter: drop-shadow(0 0 6px #FF0A8A35); }
[data-theme='mistblue'] .banner-actions .spark,
[data-theme='mistblue'] .banner-actions .solid,
[data-theme='mistblue'] .banner-actions circle { fill: #FF4D6F; }
[data-theme='mistblue'] .brand-copy > p { color: #EDC6D0; }
[data-theme='mistblue'] .m-card::before { border-color: #FF4D5F66; background: linear-gradient(147deg,#FFF7FA14 8%,#0E070D14 48%,#FF0A8A38 112%); }
[data-theme='mistblue'] .m-card.hot::before { border-color: #FF0A8A99; background: #FF0A8A1F; }
[data-theme='mistblue'] .m-card-pink { background: radial-gradient(ellipse 50% 50% at 60% 45%,#FF4D5F48,#FF0A8A1A 45%,transparent 78%); }
[data-theme='mistblue'] .m-card h3 { color: #FFF0EB; }
[data-theme='mistblue'] .m-card p { color: #DDC8CF; }
[data-theme='mistblue'] .m-film2,
[data-theme='mistblue'] .m-filmb,
[data-theme='mistblue'] .m-beam img,
[data-theme='mistblue'] .m-card .ring > img,
[data-theme='mistblue'] .m-card .glow,
[data-theme='mistblue'] .m-line { filter: hue-rotate(5deg) saturate(1.15); }
[data-theme='mistblue'] .m-dlbar-in.two .download-main { color: #FFF7FA; border-color: #FF748A; background: linear-gradient(105deg,#FF4D5F,#FF0A8A); box-shadow: 0 0 14px #FF0A8A35,inset 0 1px 0 #FFFFFF45; }
[data-theme='mistblue'] .m-dlbar-in.two .explore-more { color: #FFD6E0; border-color: #FF4D6F8C; background: linear-gradient(180deg,#FF4D5F14,#FF0A8A08); box-shadow: inset 0 1px 0 #FFF7FA15; }

/* Fixed frosted header. The spacer keeps the initial poster below the header. */
.nav-spacer { height: calc(116px * var(--zh,1) + env(safe-area-inset-top,0px)); }
.nav-viewport { position: fixed; left: 50%; right: auto; top: 0; transform: translateX(-50%); z-index: 70; margin: 0; height: calc(116px * var(--zh,1) + env(safe-area-inset-top,0px)); background: rgba(12,7,13,.26); border-bottom: 1px solid #FF4D6F24; -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.nav-surface { top: env(safe-area-inset-top,0px); background: radial-gradient(ellipse 350px 120px at 22% 115%,#FF4D5F12,transparent 75%),radial-gradient(ellipse 350px 100px at 92% -30%,#FF0A8A0E,transparent 76%),linear-gradient(110deg,#14080D1A,#1C0B1912,#0E0A1012); }
.nav-surface::before { opacity: .055; filter: hue-rotate(5deg) saturate(1.1); }
.nav-surface::after { border-bottom: 0; background: linear-gradient(180deg,#FFF7FA04,transparent 70%); }
html { scroll-padding-top: calc(116px * var(--zh,1) + env(safe-area-inset-top,0px) + 12px); }

/* Slim, transparent frosted download bar: 114 design pixels instead of 144. */
[data-theme='mistblue'] .m-dlbar { height: calc(114px * var(--zh,1) + env(safe-area-inset-bottom,0px)); background: rgba(12,7,13,.12); border-top-color: #FF4D6F24; -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
.m-dlbar-in.two { padding: 14px 28px 22px; gap: 26px; }
.m-dlbar-in.two .cta { height: 68px; border-radius: 18px; }
.m-dlbar-in.two .cta .t { font-size: 26px; }
.m-dlbar-in.two .cta svg { width: 28px; height: 28px; }
.m-dlbar-in.two .cta::after { content: ''; position: absolute; inset: -12px -2px; }