@import url("brand-type.css?v=creators-20261110");
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("space-grotesk-latin.woff") format("woff");unicode-range:U+0000-024F,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+20AC}
/* WebBrand — shared by both official websites. See design-system/components/WebBrand. */
:root {
  color-scheme: light;
  --site-font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", sans-serif;
  --site-zh-display: "Bump Display SC", var(--site-font);
  --site-en-display: "Anton", "Arial Narrow", sans-serif;
  --site-zh-heading-weight: 700;
  --site-zh-heading-tracking: 0;
  --canvas: #fff;
  --text: #171719;
  --secondary: #65656c;
  --quiet: #f5f5f6;
  --surface: #fff;
  --line: #e7e7ea;
  --hover: #eeeef0;
  --header-surface: rgb(255 255 255 / 94%);
  --brand: #e1002d;
  --brand-mark: #ff0000;
  --brand-magenta: #ff2791;
  --brand-action: linear-gradient(45deg, var(--brand-mark) 8%, color-mix(in srgb, var(--brand-magenta) 86%, var(--brand-mark)) 100%);
  --on-brand: #fff;
  --control-radius: 12px;
  --button-radius: 999px;
  --image-radius: 20px;
  --site-width: 1280px;
  --site-gutter: 48px;
  --section-space: clamp(64px, 8vw, 128px);
  --link: var(--text);
  --bg: var(--canvas);
  --fg: var(--text);
  --muted: var(--secondary);
  --soft: var(--quiet);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #101113; --text: #f5f5f7; --secondary: #a5a5ad;
    --quiet: #1a1b1f; --surface: #202126; --line: #303137; --hover: #292a30;
    --header-surface: rgb(16 17 19 / 94%); --brand: #ff4566;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101113; --text: #f5f5f7; --secondary: #a5a5ad;
  --quiet: #1a1b1f; --surface: #202126; --line: #303137; --hover: #292a30;
  --header-surface: rgb(16 17 19 / 94%); --brand: #ff4566;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 104px; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 1rem/1.7 var(--site-font); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
img { max-width: 100%; }
button { border: 0; }
:where(a, button, summary, select, input):focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }
::selection { background: #ffd2dc; color: #171719; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 20; padding: 12px 20px; background: var(--text); color: var(--canvas); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-width { width: min(100% - var(--site-gutter) * 2, var(--site-width)); margin-inline: auto; }
.site-header { position: relative; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 32px; width: min(100% - var(--site-gutter) * 2, var(--site-width)); min-height: 88px; margin: auto; padding: 12px 0; border-bottom: 1px solid var(--line); }
.brand-home { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; min-height: 48px; color: var(--text); font-size: 1.375rem; font-weight: 750; letter-spacing: -.04em; white-space: nowrap; }
.brand-home img { width: 36px; height: 36px; border-radius: 10px; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; margin-left: auto; font-size: .875rem; color: var(--secondary); }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; }
.site-nav a:hover, .site-nav [aria-current="page"] { color: var(--text); }
.header-tools { display: flex; align-items: center; gap: 16px; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; background: var(--brand-action); color: var(--on-brand); border-radius: var(--button-radius); font-size: .9375rem; line-height: 1.5; font-weight: 600; text-align: center; white-space: nowrap; flex-shrink: 0; }
.primary:hover, .primary:active, .app-entry:hover .primary { box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 8%); }
.app-entry { display: inline-flex; align-items: center; min-height: 48px; }
.app-entry > .primary { min-height: 40px; padding: 8px 16px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.quiet-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-size: .9375rem; font-weight: 550; }
.quiet-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.link-arrow { display: inline-block; font-size: 1.25em; line-height: 1; }
.appearance, .mobile-menu { position: relative; }
.appearance { display: none; }
.theme-ready .appearance { display: block; }
.appearance > summary, .mobile-menu > summary { display: flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; border-radius: var(--control-radius); list-style: none; color: var(--secondary); }
.appearance > summary::-webkit-details-marker, .mobile-menu > summary::-webkit-details-marker { display: none; }
.appearance > summary::after, .mobile-menu > summary::after { display: none; }
.appearance svg, .mobile-menu svg { width: 20px; height: 20px; }
.appearance > summary:hover, .mobile-menu > summary:hover { background: var(--quiet); color: var(--text); }
.appearance-options, .mobile-menu nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 8; width: max-content; min-width: 180px; max-width: calc(100vw - 40px); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgb(0 0 0 / 12%); }
.appearance-options button, .mobile-menu nav a { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 10px 16px; font-size: .875rem; text-align: left; border-radius: 8px; background: transparent; }
.appearance-options button:hover, .mobile-menu nav a:hover, .appearance-options [aria-pressed="true"] { background: var(--quiet); }
.appearance-options [aria-pressed="true"]::after { content: "✓"; margin-left: auto; padding-left: 20px; }
.mobile-menu { display: none; }
.kicker { margin: 0 0 24px; font-size: .75rem; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; color: var(--secondary); }
.site-footer { width: min(100% - var(--site-gutter) * 2, var(--site-width)); margin: 80px auto 0; padding: 48px 0 32px; border-top: 1px solid var(--line); color: var(--secondary); font-size: .875rem; }
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -.04em; }
.footer-brand img { border-radius: 9px; }
.site-footer .footer-statement { max-width: 24em; margin: 20px 0 12px; font-size: 1.125rem; color: var(--text); }
.site-footer p { margin: 0; line-height: 1.8; }
.site-footer h2 { margin: 8px 0 12px; font-size: .8125rem; font-weight: 600; color: var(--text); }
.site-footer nav > a { display: flex; align-items: center; min-height: 48px; width: fit-content; max-width: 100%; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-brand:hover { text-decoration: none; }
.site-footer-policies { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 32px 0 20px; }
.site-footer-records { padding-top: 24px; border-top: 1px solid var(--line); font-size: .75rem; }
.site-footer-records p { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; }
.site-footer-records a { display: inline-flex; align-items: center; min-height: 48px; }
.site-footer-police { gap: 6px; }
.site-footer-police img { flex-shrink: 0; }
@media (max-width: 1099px) { :root { --site-gutter: 32px; } .site-header { gap: 20px; } .site-nav { gap: 24px; } }
@media (max-width: 767px) {
  :root { --site-gutter: 24px; --image-radius: 16px; }
  html { scroll-padding-top: 24px; }
  .site-header { min-height: 76px; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
  .brand-home { font-size: 1.25rem; gap: 8px; }
  .brand-home img { width: 30px; height: 30px; border-radius: 8px; }
  .site-nav { display: none; }
  .header-tools { margin-left: auto; gap: 2px; }
  .mobile-menu { display: block; }
  .site-footer { margin-top: 64px; padding-top: 36px; }
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .site-footer-grid > div { grid-column: 1 / -1; }
  .site-footer .footer-statement { margin-top: 12px; }
  .site-footer-policies { gap: 0 20px; }
}
@media (max-width: 359px) {
  :root { --site-gutter: 20px; }
  .site-header { gap: 8px; }
  .header-tools { flex-wrap: wrap; }
  .app-entry > .primary { padding-inline: 12px; }
  .site-footer-grid { gap: 24px 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: background-color .15s ease, color .15s ease; }
}
@media (forced-colors: active) { .primary { background:ButtonFace; color:ButtonText; border: 1px solid ButtonText; } }
@media (prefers-contrast: more) { :root { --brand-action: #e1002d; } }

/* Restrained brand color; one primary action per content area. */
.site-header .app-entry>.primary{background:var(--brand-action);color:var(--on-brand)}
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:48px;font-size:.8125rem;font-weight:600;color:var(--secondary)}
.language-switch:hover{color:var(--text)}
.mobile-menu .language-switch{justify-content:flex-start}
html[lang="en"] :is(h1,h2,h3,.kicker,.brand-home,.footer-brand){font-family:"Space Grotesk","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[lang="en"] :is(h1,h2){letter-spacing:-.045em}
html[lang="en"] .hero-copy h1{font-size:clamp(2.75rem,5.3vw,5rem);line-height:1.08}
html[lang="en"] .company-hero h1{font-size:clamp(3rem,6.1vw,5.75rem);line-height:1.05}
html[lang="en"] .company-wordmark{letter-spacing:-.05em}
@media(max-width:767px){.desktop-language{display:none}html[lang="en"] .hero-copy h1{font-size:clamp(2.5rem,10.5vw,3.5rem)}html[lang="en"] .company-hero h1{font-size:clamp(2.75rem,11.5vw,3.75rem)}html[lang="en"] .brand-home{font-size:1.0625rem;gap:4px}html[lang="en"] .app-entry>.primary{font-size:.8125rem;padding-inline:12px}}

/* WebBrand campaign components. Shared by the product and company websites. */
:is(.brand-home-page, .company-site) {
  --site-zh-display: var(--site-font);
  --site-zh-heading-weight: 600;
  --campaign-gutter: 64px;
  --campaign-space: 104px;
  --campaign-heading: clamp(2.5rem, 4.3vw, 4rem);
  --campaign-accent: #e1002d;
  --campaign-dark: #19191b;
  --campaign-muted-on-dark: #d1d1d5;
}
.campaign-wrap { width: min(100% - var(--campaign-gutter) * 2, var(--site-width)); margin-inline: auto; }
.campaign-heading { margin: 0; font: 600 var(--campaign-heading)/1.3 var(--site-zh-display); letter-spacing: 0; text-wrap: balance; }
.campaign-heading em, .campaign-title em { color: inherit; font-style: normal; }
.campaign-eyebrow { margin: 0 0 20px; font-size: .8125rem; line-height: 1.5; font-weight: 600; }
.campaign-header.site-header { position: sticky; top: 0; z-index: 20; width: 100%; min-height: 64px; padding: 8px 32px; margin: 0; gap: 40px; border: 0; background: var(--canvas); }
.campaign-header .site-nav { margin-left: 0; margin-right: auto; gap: 32px; color: var(--text); }
.campaign-header .header-tools { margin-left: auto; gap: 12px; }
.campaign-header .brand-home { letter-spacing: 0; }
.campaign-header .site-nav a { position: relative; }
.campaign-header .site-nav a::after { content: ''; position: absolute; inset: auto 0 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }
.campaign-header .site-nav a:hover::after, .campaign-header .site-nav [aria-current]::after { transform: scaleX(1); }
.campaign-hero { position: relative; isolation: isolate; background: #101515; color: #fff; }
.campaign-scene { position: absolute; z-index: -1; inset: 0; margin: 0; overflow: hidden; }
.campaign-scene picture { display: block; width: 100%; height: 100%; }
.campaign-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 48%), transparent 42%), linear-gradient(90deg, rgb(0 0 0 / 8%), transparent 55%); }
.campaign-hero-copy { min-height: clamp(700px, calc(100svh - 64px), 820px); padding-block: 72px 48px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 48px; align-items: start; }
.campaign-title { margin: 0; grid-column: 1; grid-row: 1; font: 600 clamp(3.5rem, 6.2vw, 6rem)/1.2 var(--site-zh-display); letter-spacing: 0; }
.campaign-title > span { display: block; }

.campaign-hero-bottom { grid-column: 2; grid-row: 3; max-width: 540px; width: 100%; justify-self: end; margin-top: 56px; }
.campaign-intro { margin: 0 0 28px; font-size: 1.25rem; line-height: 1.7; text-wrap: pretty; }
.campaign-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.campaign-actions .app-entry > .primary { font-size: .9375rem; }
.campaign-actions > a { min-height: 48px; }
.campaign-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; padding: 8px 16px; color: var(--campaign-muted-on-dark); font-weight: 400; font-size: .9375rem; line-height: 1.5; text-align: center; }
.campaign-secondary:hover { text-decoration: underline; text-underline-offset: 5px; }
.campaign-hero :focus-visible { outline-color: #fff; }
.campaign-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 64px 0 0; padding: 0; list-style: none; }
.campaign-columns > * { min-width: 0; }
.campaign-columns h3 { margin: 0 0 20px; font: 600 2.5rem/1.3 var(--site-zh-display); letter-spacing: 0; }
.campaign-columns p { margin: 0; font-size: 1rem; color: var(--secondary); line-height: 1.85; }
.campaign-columns .quiet-link { margin-top: 20px; }
.campaign-footer.site-footer { width: 100%; max-width: none; padding: 64px var(--campaign-gutter, var(--site-gutter)) 24px; border: 0; margin-top: 0; background: var(--quiet); }
.campaign-footer > * { max-width: var(--site-width); margin-inline: auto; }
.campaign-footer .site-footer-policies { margin-top: 40px; margin-bottom: 20px; }
html[lang="en"] :is(.campaign-title, .campaign-heading, .campaign-columns h3) { font-family: var(--site-en-display); font-weight: 400; letter-spacing: 0; }
html[lang="en"] :is(.brand-home-page, .company-site) .campaign-title { font-size: clamp(4.5rem, 8vw, 7.5rem); line-height: 1.02; }
html[lang="en"] .campaign-heading { line-height: 1.12; }
@media (max-width: 1099px) {
  :is(.brand-home-page, .company-site) { --campaign-gutter: 40px; --campaign-space: 80px; }
  .campaign-header.site-header { gap: 24px; padding-inline: 24px; }
  .campaign-header .site-nav { display: none; }
  .campaign-header .mobile-menu { display: block; }
  .campaign-hero-copy { gap: 32px; }
  .campaign-hero-bottom { grid-column: 2; width: 100%; }
  .campaign-columns { gap: 32px; }
}
@media (max-width: 767px) {
  :is(.brand-home-page, .company-site) { --campaign-gutter: 24px; --campaign-space: 64px; --campaign-heading: clamp(2rem, 8.5vw, 2.75rem); }
  .campaign-header.site-header { min-height: 64px; padding: 8px 16px; gap: 8px; flex-wrap: nowrap; }
  .campaign-header .brand-home { font-size: 1.25rem; gap: 8px; }
  .campaign-header .brand-home img { width: 32px; height: 32px; }
  .campaign-header .header-tools { gap: 0; }
  .campaign-header .app-entry, .campaign-header .corporate-product { display: none; }
  .campaign-hero { display: grid; grid-template-areas: "scene" "intro"; }
  .campaign-hero-copy { display: contents; }
  .campaign-hero .campaign-scene { position: relative; grid-area: scene; z-index: 0; width: 100%; min-height: 100%; aspect-ratio: 4016 / 6016; }
  .campaign-hero .campaign-scene::after { background: linear-gradient(180deg, rgb(0 0 0 / 55%), transparent 48%); }
  .campaign-hero .campaign-title { position: relative; z-index: 1; grid-area: scene; align-self: start; width: calc(100% - var(--campaign-gutter) * 2); margin: 32px auto 24px; }
  .campaign-title { font-size: clamp(2.75rem, 11.5vw, 4.25rem); line-height: 1.22; }
  .campaign-hero-bottom { grid-area: intro; width: calc(100% - var(--campaign-gutter) * 2); max-width: none; margin: 28px auto 36px; }
  .campaign-intro { font-size: 1rem; margin-bottom: 24px; }
  .campaign-actions { justify-content: flex-end; }
  .campaign-columns { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .campaign-columns h3 { font-size: 2rem; margin-bottom: 12px; }
  .campaign-columns .quiet-link { margin-top: 12px; }
  .campaign-footer.site-footer { padding-block: 40px 24px; }
  html[lang="en"] :is(.brand-home-page, .company-site) .campaign-title { font-size: clamp(min(4rem, 24vw), 18vw, 5.25rem); line-height: 1.08; }
}
@media (max-width: 359px) { :is(.brand-home-page, .company-site) { --campaign-gutter: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .campaign-header .site-nav a::after { transition: transform .18s ease; }
}
@media (forced-colors: active) {
  .campaign-hero { background: Canvas; color: CanvasText; }
  .campaign-scene { visibility: hidden; }
  .campaign-title em, .campaign-heading em { color: CanvasText; }
  .campaign-hero :focus-visible { outline-color: Highlight; }
}