:root {
  --bg:#FFFFFF;
  --bg-panel:#F5F7FB;
  --bg-panel-2:#EDF0F6;
  --border:#DDE2EC;
  --border-strong:#B9C1D3;
  --accent:#1659F5;
  --accent-hover:#0E4BDB;
  --accent-dark:#0B2E8A;
  --accent-tint:rgba(22,89,245,.07);
  --text:#0C1433;
  --text-muted:#5A6380;
  --success:#12A150;
  --success-ink:#087239;
  --success-ring:rgba(18,161,80,.28);
  --warn:#D98A00;
  --warn-ink:#845400;
  --error:#D93A3A;
  --hero-top:#06123F;
  --hero-mid:#2348C8;
  --hero-low:#9A9CF0;
  --accent-2a:#7B61FF;
  --accent-2b:#F0569B;
  --card-deep:#0F2F9E;
  --on-dark:#FFFFFF;
  --on-dark-muted:rgba(255,255,255,.84);
  --on-dark-faint:rgba(255,255,255,.5);
  --line-on-dark:rgba(255,255,255,.34);
  --line-on-dark-soft:rgba(255,255,255,.2);
  --fill-on-dark:rgba(255,255,255,.08);
  --fill-on-dark-hover:rgba(255,255,255,.14);
  --glass-top:rgba(255,255,255,.17);
  --glass-low:rgba(154,156,240,.36);
  --pill-soft:rgba(214,216,255,.92);
  --pill-soft-hover:rgba(228,229,255,.96);
  --clear:transparent;
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.16),0 26px 50px -34px rgba(6,18,63,.55);
  --shadow-window:0 -6px 22px -16px rgba(6,18,63,.4);
  --shadow-knob:0 1px 2px rgba(12,20,51,.22);
  --r-card:28px;
  --r-canvas:32px;
  --r-window:16px;
  --r-ctl:10px;
  --r-small:7px;
  --r-check:5px;
  --r-logo:9px;
  --r-pill:999px;
  --r-round:50%;
  --font-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Malgun Gothic","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-regular:400;
  --weight-medium:500;
  --weight-strong:600;
  --gutter:40px;
  --content-width:1200px;
  --reading-width:820px;
  --header-width:1280px;
  --header-height:72px;
  --field-cut:214px;
  --motion-fast:180ms;
  --motion-reveal:550ms;
  color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important }
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
a { color:var(--accent); text-decoration:none }
a:hover { text-decoration:underline; text-underline-offset:4px }
a,button,input,summary,select,textarea { -webkit-tap-highlight-color:var(--accent-tint) }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  line-height:1.22;
  letter-spacing:-.01em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
h1 { font-size:clamp(34px,3.2vw,48px) }
h2 { font-size:clamp(28px,3vw,36px) }
h3 { font-size:24px }
p { margin:0 0 1em }
strong { font-weight:var(--weight-strong) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--r-window);
  background:var(--bg-panel);
  color:var(--text);
  line-height:1.8;
}
pre code { overflow-wrap:normal; white-space:pre; font-size:13px }
hr { border:0; border-top:1px solid var(--border); margin:40px 0 }
.wrap {
  width:100%;
  max-width:var(--content-width);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:var(--reading-width) }
.section { padding-top:72px; padding-bottom:72px }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid > *, .canvas > *, .footer-grid > *, .prose > * { min-width:0 }
.nowrap { white-space:nowrap }
.muted { color:var(--text-muted) }
.small { font-size:14px }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip {
  position:absolute; left:16px; top:-80px; z-index:100;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--accent); font-size:14px;
}
.skip:focus { top:12px }
.btn,.nav-dl,.pill-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:10px 26px;
  border:1px solid var(--clear);
  border-radius:var(--r-pill);
  font-size:16px;
  font-weight:var(--weight-medium);
  line-height:1.3;
  text-align:center;
  text-decoration:none;
}
.btn:hover,.nav-dl:hover,.pill-link:hover { text-decoration:none }
.btn svg { width:18px; height:18px; flex-shrink:0 }
.btn-main,.nav-dl,.pill-link { background:var(--accent); color:var(--on-dark) }
.btn-main:hover,.nav-dl:hover,.pill-link:hover,.btn-main.is-hover { background:var(--accent-hover); color:var(--on-dark) }
.btn-soft { background:var(--pill-soft); color:var(--accent-dark); box-shadow:inset 0 0 0 1px var(--line-on-dark) }
.btn-soft:hover { background:var(--pill-soft-hover); color:var(--accent-dark) }
.btn-outline { background:var(--bg); color:var(--accent); border-color:var(--border) }
.btn-outline:hover { background:var(--bg-panel); color:var(--accent-dark) }
.btn:active { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border); transform:none }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:4px }
.cta-row { margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.panel,.content-card {
  min-width:0;
  padding:28px;
  border-radius:var(--r-card);
  background:var(--bg-panel);
  color:var(--text);
}
.content-card h3 { margin-top:0 }
.content-card p:last-child { margin-bottom:0 }
.prose { min-width:0; overflow-wrap:break-word }
.prose h2 { margin-top:2.2em }
.prose h3 { margin-top:1.6em }
.prose p,.prose li { line-height:1.9 }
.prose li + li { margin-top:8px }
.prose img { max-width:100% }
.reveal { opacity:1; transform:none }
.reveal-pending .reveal:not(.shown) { opacity:0; transform:translateY(16px) }
.reveal { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease }

/* 页头独立宽版心；白底为默认，首屏内使用白字皮肤。 */
#site-header { position:relative; z-index:30; min-width:0; background:var(--bg); color:var(--text) }
.topbar {
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  gap:24px;
  height:var(--header-height);
  width:100%;
  min-width:0;
  max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--gutter);
  color:var(--text);
}
.brand {
  display:inline-flex; align-items:center; gap:11px;
  color:inherit; font-size:17px; font-weight:var(--weight-medium);
  letter-spacing:-.005em; white-space:nowrap; flex-shrink:0;
}
.brand:hover { text-decoration:none }
.brand img { width:32px; height:32px; flex-shrink:0; border-radius:var(--r-logo) }
.desktop-nav { min-width:0; margin-left:auto }
.menu {
  display:flex; align-items:center; list-style:none;
  margin:0; padding:0; font-size:14.5px; white-space:nowrap;
}
.menu li { display:flex; align-items:center }
.menu li + li::before { content:"·"; padding:0 11px; color:var(--text-muted); flex-shrink:0 }
.menu a { display:block; padding:6px 1px; color:var(--text-muted) }
.menu a:hover { color:var(--text); text-decoration:none }
.menu a[aria-current="page"] { color:var(--accent); box-shadow:inset 0 -1.5px 0 var(--accent) }
.header-tools { display:flex; align-items:center; gap:16px; flex-shrink:0 }
.language { position:relative }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:36px; padding:6px 14px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text);
  font:inherit; font-size:13.5px; white-space:nowrap;
}
.lang svg { width:15px; height:15px; flex-shrink:0 }
.lang-short { display:none }
.language-menu {
  position:absolute; right:0; top:calc(100% + 10px); z-index:33;
  min-width:176px; padding:8px;
  border:1px solid var(--border); border-radius:var(--r-window);
  background:var(--bg); color:var(--text);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-ctl); color:var(--text) }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--bg-panel); color:var(--accent); text-decoration:none }
.nav-dl { min-height:38px; padding:7px 18px; gap:7px; font-size:14px }
.nav-dl svg { width:15px; height:15px; flex-shrink:0 }
.menu-toggle {
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:8px;
  border:1px solid var(--border); border-radius:var(--r-ctl);
  background:var(--bg); color:var(--text);
}
.menu-toggle svg { width:22px; height:22px }
.mobile-drawer {
  position:absolute; top:var(--header-height); left:0; right:0; z-index:32;
  max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain;
  padding:16px var(--gutter) 24px;
  background:var(--bg); color:var(--text); border-bottom:1px solid var(--border);
}
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; color:var(--text); border-radius:var(--r-ctl) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel); color:var(--accent); text-decoration:none }
.drawer-languages { border-top:1px solid var(--border); margin-top:12px; padding-top:12px }
.drawer-languages p { margin:8px 12px; font-size:13px; color:var(--text-muted) }
.nav-veil {
  position:fixed; inset:var(--header-height) 0 0; z-index:20;
  border:0; background:var(--hero-top); color:var(--on-dark); opacity:.4;
}
.stage {
  position:relative;
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto;
  overflow:hidden; background:var(--bg); color:var(--on-dark);
}
.stage::before {
  content:""; position:absolute; top:0; left:0; right:0; bottom:var(--field-cut);
  background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-mid) 46%,var(--hero-low) 84%,var(--bg) 100%);
  color:var(--on-dark); pointer-events:none;
}
.stage > * { position:relative; z-index:1 }
.stage > #site-header { z-index:30; background:var(--hero-top); color:var(--on-dark) }
.stage .topbar { color:var(--on-dark) }
.stage .menu a { color:var(--on-dark-muted) }
.stage .menu a:hover,.stage .menu a[aria-current="page"] { color:var(--on-dark) }
.stage .menu a[aria-current="page"] { box-shadow:inset 0 -1.5px 0 var(--on-dark) }
.stage .menu li + li::before { color:var(--on-dark-faint) }
.stage .lang { border-color:var(--line-on-dark-soft); background:var(--fill-on-dark); color:var(--on-dark-muted) }
.stage .lang:hover { background:var(--fill-on-dark-hover); color:var(--on-dark) }
.stage .menu-toggle { border-color:var(--line-on-dark); background:var(--fill-on-dark); color:var(--on-dark) }
.stage .copy a:focus-visible,.stage .topbar > a:focus-visible { outline-color:var(--on-dark) }
.copy { display:grid; align-content:center; justify-items:center; text-align:center; padding:14px 24px 6px; background:var(--hero-top) }
.badge {
  display:inline-flex; align-items:center; gap:9px; min-height:30px;
  padding:4px 15px 4px 11px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted);
  font-size:13px; letter-spacing:.01em; max-width:100%; overflow-wrap:anywhere;
}
.stage .badge { border-color:var(--line-on-dark); background:var(--hero-top); color:var(--on-dark) }
.badge-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round); background:var(--success); color:var(--on-dark); box-shadow:0 0 0 3px var(--success-ring) }
.headline { margin:20px 0 0; font-size:clamp(28px,3.2vw,46px); line-height:1.18; letter-spacing:-.012em; color:var(--on-dark) }
.headline-line { display:block }
.kw {
  background:linear-gradient(90deg,var(--accent-2a) 0%,var(--accent-2b) 100%);
  -webkit-background-clip:text; background-clip:text; color:var(--clear);
  -webkit-text-fill-color:var(--clear); padding-bottom:.06em;
}
.lede { margin:20px auto 0; max-width:760px; font-size:16px; line-height:1.65; color:var(--text-muted) }
.lede strong { color:var(--text); font-weight:var(--weight-strong) }
.stage .lede { color:var(--on-dark-muted) }
.stage .lede strong { color:var(--on-dark) }
.platforms { margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:13.5px }
.platforms a { display:inline-flex; align-items:center; gap:8px; min-height:28px; color:var(--on-dark-muted) }
.platforms a:hover { color:var(--on-dark); text-decoration:none }
.pf-ico { width:26px; height:26px; flex-shrink:0; border-radius:var(--r-round); display:grid; place-items:center; border:1px solid var(--line-on-dark); color:var(--on-dark) }
.pf-ico svg { width:13px; height:13px; display:block }
.peek { max-width:1200px; margin:0 auto; padding:72px var(--gutter) 96px }
.peek-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px }
.peek-title { margin:0; font-size:36px; line-height:1.22; color:var(--text) }
.peek-title span { display:block }
.pill-link { flex-shrink:0; min-height:44px; padding:9px 22px; font-size:15px }
.site-footer { padding-top:64px; padding-bottom:24px; border-top:1px solid var(--border); background:var(--bg); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1.3fr; gap:48px }
.footer-brand p { max-width:300px; margin-top:18px; color:var(--text-muted); font-size:14px }
.footer-title { margin:0 0 16px; font-size:16px; font-weight:var(--weight-medium) }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px }
.footer-links a { color:var(--text-muted) }
.footer-links a:hover { color:var(--accent) }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:32px; font-size:14px }
.footer-languages a { padding-block:6px; color:var(--text-muted) }
.footer-languages a[aria-current="true"] { color:var(--accent) }
.footer-bottom { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:24px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px }
.footer-bottom p { margin:0 }
.footer-bottom a { color:inherit }
@media (max-width:1240px) {
  .menu { font-size:13.5px }
  .menu li + li::before { padding-inline:8px }
  .topbar { gap:18px }
}
@media (max-width:1120px) {
  .desktop-nav { display:none }
  .header-tools { margin-left:auto; gap:12px }
  .menu-toggle { display:inline-flex }
}
@media (min-width:1121px) {
  .mobile-drawer,.nav-veil { display:none !important }
}
@media (max-width:860px) {
  :root { --gutter:20px; --header-height:64px }
  .stage { --field-cut:196px }
  .copy { padding:28px 20px 4px }
  .headline { font-size:clamp(24px,6.6vw,30px); margin-top:18px }
  .lede { font-size:15px }
  .btn { min-height:46px; padding-inline:22px; font-size:15px }
  .platforms { gap:10px 18px }
  .peek { padding-top:56px; padding-bottom:72px }
  .peek-head { flex-direction:column; align-items:flex-start; gap:20px }
  .peek-title { font-size:26px }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
  .footer-brand { grid-column:1 / -1 }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,6vw,30px) }
}
@media (max-width:640px) {
  :root { --gutter:20px }
  .grid,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .footer-brand { grid-column:auto }
  .section { padding-top:48px; padding-bottom:48px }
  .panel,.content-card { padding:24px; border-radius:var(--r-card) }
  .tilt,[data-tilt] { transform:none !important }
  .topbar { gap:10px }
  .header-tools { margin-left:auto; gap:8px }
  .brand { font-size:15px; gap:8px }
  .brand img { width:28px; height:28px }
  .header-tools .language { display:none }
  .lang { padding-inline:10px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .header-tools .nav-dl { display:none }
  .copy .badge { font-size:11px }
  .footer-languages { gap:6px 18px }
}
@media (max-width:360px) {
  :root { --gutter:16px }
  .brand { font-size:14px }
  .header-tools { gap:5px }
  .lang { padding-inline:8px }
  .copy { padding-inline:16px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  .reveal-pending .reveal:not(.shown) { opacity:1; transform:none }
}