:root {
  --c-bg:#FFFFFF;
  --c-panel:#F6F8FB;
  --c-panel-2:#EDF1F7;
  --c-line:#E3E8F0;
  --c-line-strong:#C9D3E0;
  --c-accent:#0057FF;
  --c-accent-dark:#003BB8;
  --c-accent-soft:#EBF1FF;
  --c-accent-ring:rgba(0,87,255,.16);
  --c-ink:#0E2A47;
  --c-muted:#55687F;
  --c-muted-2:#8796A9;
  --c-on-accent:#FFFFFF;
  --c-success:#12A867;
  --c-warn:#E89B12;
  --c-error:#E0453F;
  --c-veil:rgba(14,42,71,.28);
  --geo-cobalt:#0057FF;
  --geo-lavender:#9B7BFF;
  --geo-coral:#FF7A9C;
  --shadow-float:0 30px 80px rgba(0,59,184,.15),0 10px 24px rgba(14,42,71,.06),0 1px 2px rgba(14,42,71,.06);
  --shadow-ghost:0 24px 60px rgba(0,59,184,.08);
  --shadow-btn:0 10px 24px rgba(0,87,255,.24),0 2px 4px rgba(0,59,184,.18);
  --shadow-btn-sm:0 6px 14px rgba(0,87,255,.22);
  --shadow-knob:0 1px 3px rgba(14,42,71,.25);
  --r-window:28px;
  --r-card:22px;
  --r-tray:16px;
  --r-btn:12px;
  --r-field:10px;
  --r-tile:10px;
  --r-pill:999px;
  --r-dot:2px;
  --r-round:50%;
  --f-display:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-body:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --fs-xs:12px;
  --fs-small:13px;
  --fs-label:14px;
  --fs-nav:15px;
  --fs-body:16px;
  --fs-lede:17px;
  --fs-brand:19px;
  --fs-h3:22px;
  --fs-h2:clamp(24px,calc(1.6vw + 14px),38px);
  --fs-h1:clamp(34px,calc(2.2vw + 16px),48px);
  --weight-normal:400;
  --weight-medium:600;
  --weight-bold:700;
  --weight-brand:800;
  --weight-display:900;
  --leading-body:1.6;
  --leading-display:1.14;
  --tracking-display:-.02em;
  --tracking-brand:-.02em;
  --gutter:32px;
  --width-body:1200px;
  --width-reading:800px;
  --nav-h:72px;
  --section-space:140px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --time-fast:.2s;
  --time-reveal:.6s;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:24px }
html,body { margin:0; padding:0 }
body {
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html.nav-open { overflow:hidden }
[hidden] { display:none!important }
img,svg { display:block; max-width:100% }
img { height:auto }
svg, .icon, .status-dot { flex-shrink:0 }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:var(--c-accent-ring) }
button { border:0 }
a { color:var(--c-accent); text-decoration-thickness:1px; text-underline-offset:4px }
a:hover { color:var(--c-accent-dark) }
:focus-visible { outline:3px solid var(--c-accent); outline-offset:4px }
::selection { background:var(--c-accent-soft); color:var(--c-ink) }
h1,h2,h3,h4 { font-family:var(--f-display); color:var(--c-ink); text-wrap:balance }
h1 { font-size:var(--fs-h1); font-weight:var(--weight-display); line-height:var(--leading-display); letter-spacing:var(--tracking-display) }
h2 { font-size:var(--fs-h2); line-height:1.2; font-weight:var(--weight-display); letter-spacing:var(--tracking-display) }
h3 { font-size:var(--fs-h3); line-height:1.35; font-weight:var(--weight-brand) }
p { margin-top:0 }
code,kbd,pre { font-family:var(--f-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:24px; border-radius:var(--r-tray); background:var(--c-panel); color:var(--c-ink); line-height:1.7 }
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; font-size:var(--fs-label) }
hr { border:0; border-top:1px solid var(--c-line); margin-block:32px }
.wrap { width:100%; max-width:calc(var(--width-body) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter) }
.reading { max-width:calc(var(--width-reading) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section-heading { text-align:center; margin-bottom:56px }
.section-heading h2 { margin:0 }
.section-heading h2 span { display:block }
.section-heading p { max-width:620px; margin:20px auto 0; color:var(--c-muted); font-size:var(--fs-lede) }
.grid { display:grid; gap:24px }
.grid--two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid>* , .hero__inner>* , .footer-grid>* { min-width:0 }
.cluster { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.keep { white-space:nowrap }
.muted { color:var(--c-muted) }
.mono { font-family:var(--f-mono) }
.accent { color:var(--c-accent) }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.skip-link { position:fixed; left:16px; top:8px; z-index:100; padding:12px 20px; background:var(--c-bg); color:var(--c-accent); border-radius:var(--r-btn); transform:translateY(-150%) }
.skip-link:focus { transform:translateY(0) }
.btn {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:10px;
  min-height:54px; padding:12px 26px; border-radius:var(--r-btn);
  font-family:var(--f-display); font-size:var(--fs-body); font-weight:var(--weight-bold);
  text-decoration:none; line-height:1.4;
  transition:background-color var(--time-fast) var(--ease),transform var(--time-fast) var(--ease),box-shadow var(--time-fast) var(--ease);
}
.btn svg { width:18px; height:18px }
.btn--primary { background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--shadow-btn) }
.btn--primary:hover,.btn--primary.is-hover { background:var(--c-accent-dark); color:var(--c-on-accent); transform:translateY(-1px) }
.btn--primary:active,.btn--primary.is-active { background:var(--c-accent-dark); color:var(--c-on-accent); transform:translateY(1px); box-shadow:var(--shadow-btn-sm) }
.btn--ghost { background:var(--c-panel-2); color:var(--c-ink) }
.btn--ghost:hover { background:var(--c-accent-soft); color:var(--c-accent) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-panel-2); color:var(--c-muted); box-shadow:none; cursor:not-allowed; transform:none }
.btn.is-focus { outline:3px solid var(--c-accent); outline-offset:4px }
.card,.panel { background:var(--c-bg); color:var(--c-ink); border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-ghost); min-width:0 }
.panel { border-radius:var(--r-window); background:var(--c-panel); color:var(--c-ink); box-shadow:none }
.card h3 { margin:0 0 12px }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.prose { min-width:0; line-height:1.85 }
.prose h2 { margin-top:64px; margin-bottom:24px; scroll-margin-top:28px }
.prose h3 { margin-top:36px }
.prose p,.prose ul,.prose ol { margin-bottom:24px }
.prose li+li { margin-top:10px }
.prose img { border-radius:var(--r-tray) }
.prose blockquote { margin-inline:0 }
.prose> :first-child { margin-top:0 }
.decorated { position:relative; overflow-x:clip }
.reveal { opacity:1; transform:none }
.reveal-pending .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal { transition:opacity var(--time-reveal) var(--ease),transform var(--time-reveal) var(--ease) }
.reveal.shown { opacity:1; transform:none }

/* 页头使用独立的宽版心。 */
.topbar { position:relative; z-index:40; height:var(--nav-h); background:var(--c-bg); color:var(--c-ink); border-bottom:1px solid var(--c-line) }
.topbar__inner {
  position:relative; max-width:min(100%,calc(1280px + var(--gutter)*2));
  height:100%; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center;
}
.brand { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; font-family:var(--f-display); font-size:var(--fs-brand); font-weight:var(--weight-brand); letter-spacing:var(--tracking-brand); color:var(--c-ink); text-decoration:none }
.brand:hover { color:var(--c-ink) }
.brand img { width:36px; height:36px; flex-shrink:0 }
.tabs { margin-left:auto; height:100%; min-width:0 }
.tabs ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; height:100%; gap:0 }
.tabs li { height:100%; min-width:0 }
.tabs a { position:relative; display:flex; align-items:center; height:100%; padding-inline:20px; font-size:var(--fs-nav); font-weight:var(--weight-medium); color:var(--c-muted); text-decoration:none; white-space:nowrap }
.tabs a::after { content:""; position:absolute; left:20px; right:20px; bottom:-1px; height:3px; border-radius:var(--r-dot); background:var(--c-line-strong); transform:scaleX(0); transition:transform var(--time-fast) var(--ease) }
.tabs a:hover { color:var(--c-ink) }
.tabs a:hover::after { transform:scaleX(1) }
.tabs a[aria-current="page"] { color:var(--c-ink) }
.tabs a[aria-current="page"]::after { background:var(--c-accent); transform:scaleX(1) }
.header-tools { display:flex; align-items:center; flex-shrink:0; gap:8px; margin-left:20px }
.language { position:relative }
.lang { padding:0 0 0 24px; border-left:1px solid var(--c-line); min-height:28px; display:inline-flex; align-items:center; gap:8px; background:var(--c-bg); color:var(--c-ink); font-size:var(--fs-label); font-weight:var(--weight-medium); white-space:nowrap; text-decoration:none }
.lang svg { width:17px; height:17px; color:var(--c-muted) }
.lang__caret { color:var(--c-muted); font-size:var(--fs-xs) }
.lang__short { display:none }
.language-menu { position:absolute; top:calc(100% + 18px); right:0; width:200px; margin:0; padding:8px; list-style:none; background:var(--c-bg); color:var(--c-ink); border:1px solid var(--c-line); border-radius:var(--r-tray); box-shadow:var(--shadow-ghost); z-index:45 }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:10px 14px; color:var(--c-ink); border-radius:var(--r-field); text-decoration:none }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--c-accent-soft); color:var(--c-accent) }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:10px; border-radius:var(--r-btn); background:var(--c-panel); color:var(--c-ink) }
.menu-toggle svg { width:24px; height:24px }
.mobile-drawer { display:none }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:30; background:var(--c-veil); color:var(--c-ink) }

/* 拍板首屏：白底、偏心几何、静态订阅浮窗。 */
.hero { position:relative; overflow:hidden; min-height:760px }
.hero__inner { position:relative; z-index:1; max-width:1440px; min-height:760px; margin-inline:auto; padding:40px 48px 64px 80px; display:grid; grid-template-columns:500px minmax(0,1fr); column-gap:64px; align-items:center }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:5px 16px 5px 5px; border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-muted); font-size:var(--fs-small); font-weight:var(--weight-medium); max-width:100% }
.eyebrow img { width:26px; height:26px; flex-shrink:0 }
.eyebrow b { color:var(--c-ink); font-weight:var(--weight-bold) }
.hero h1 { margin:26px 0 0 }
.hero h1 span { display:block }
.lede { margin:22px 0 0; max-width:468px; font-size:var(--fs-lede); line-height:1.78; color:var(--c-muted) }
.lede strong { color:var(--c-ink); font-weight:var(--weight-bold) }
.cta { margin-top:34px; display:flex; flex-wrap:wrap; gap:14px }
.platforms { margin:30px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:24px }
.platforms a { display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-label); font-weight:var(--weight-medium); color:var(--c-ink); text-decoration:none }
.platforms__tile { flex-shrink:0; width:34px; height:34px; border-radius:var(--r-tile); background:var(--c-panel); color:var(--c-ink); display:grid; place-items:center }
.platforms__tile svg { width:17px; height:17px }
.platforms a:hover { color:var(--c-accent) }
.platforms a:hover .platforms__tile { background:var(--c-accent-soft); color:var(--c-accent) }
.facts { margin:24px 0 0; padding:11px 6px; list-style:none; display:inline-flex; align-items:center; flex-wrap:wrap; row-gap:10px; border-radius:var(--r-tray); background:var(--c-panel); color:var(--c-ink); font-family:var(--f-mono); font-size:var(--fs-xs); line-height:1.2; max-width:100% }
.facts li { display:inline-flex; align-items:center; gap:8px; padding-inline:14px }
.facts li+li { border-left:1px solid var(--c-line) }
.facts i { flex-shrink:0; width:6px; height:6px; border-radius:var(--r-dot); background:var(--c-accent) }
.facts em { font-style:normal; color:var(--c-muted) }
.next { padding:30px 24px 0; text-align:center }
.next h2 { margin:0 }
.next h2 span { display:block }
.next p { max-width:620px; margin:20px auto 0; font-size:var(--fs-lede); color:var(--c-muted) }

.site-footer { margin-top:80px; padding-top:64px; padding-bottom:32px; border-top:1px solid var(--c-line); background:var(--c-bg); color:var(--c-ink) }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr 1.2fr .8fr; gap:40px }
.footer-brand p { max-width:300px; margin-top:20px; color:var(--c-muted); font-size:var(--fs-label) }
.footer-title { margin:0 0 16px; font-size:var(--fs-label); font-weight:var(--weight-bold) }
.footer-links { list-style:none; margin:0; padding:0 }
.footer-links li+li { margin-top:10px }
.footer-links a { display:inline-block; color:var(--c-muted); text-decoration:none; font-size:var(--fs-label); padding-block:3px }
.footer-links a:hover { color:var(--c-accent) }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--c-line); font-size:var(--fs-small); color:var(--c-muted) }
.footer-bottom a { color:var(--c-muted) }
@media(min-width:1440px) {
  .topbar__inner { max-width:1440px; padding-left:80px; padding-right:64px }
}
@media(max-width:1279px) {
  .tabs { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:grid; place-items:center }
  .mobile-drawer { position:absolute; top:var(--nav-h); left:0; right:0; display:block; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; padding:20px var(--gutter) 28px; border-bottom:1px solid var(--c-line); background:var(--c-bg); color:var(--c-ink); box-shadow:var(--shadow-ghost); z-index:42 }
  .mobile-drawer ul { list-style:none; padding:0; margin:0 }
  .mobile-drawer a { display:flex; width:100%; align-items:center; min-height:48px; padding:12px 16px; text-decoration:none; color:var(--c-ink); border-radius:var(--r-field) }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--c-accent-soft); color:var(--c-accent) }
  .drawer-languages { border-top:1px solid var(--c-line); margin-top:16px!important; padding-top:16px!important }
}
@media(max-width:1180px) {
  .hero__inner { grid-template-columns:minmax(0,1fr); row-gap:56px; padding:48px var(--gutter) 64px }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:768px) {
  :root { --fs-h1:clamp(24px,4.5vw,30px); --section-space:80px }
  .grid--three,.grid--two { grid-template-columns:minmax(0,1fr) }
}
@media(max-width:640px) {
  :root { --gutter:20px }
  .topbar__inner { padding-inline:var(--gutter) }
  .header-tools { margin-left:auto; gap:6px }
  .brand { gap:8px; font-size:var(--fs-body) }
  .brand img { width:30px; height:30px }
  .lang { min-height:44px; padding-left:10px; gap:5px }
  .lang__full { display:none }
  .lang__short { display:inline }
  .hero__inner { padding-top:32px; row-gap:32px }
  .hero h1 { margin-top:20px }
  .lede { font-size:var(--fs-body) }
  .cta { margin-top:24px; gap:10px }
  .btn { padding-inline:18px }
  .platforms { gap:12px 18px; margin-top:24px }
  .platforms a { gap:7px }
  .facts li { padding-inline:9px; gap:6px }
  .card,.panel { padding:22px }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:28px }
  .tilt,[data-tilt] { transform:none!important }
  .section-heading { margin-bottom:32px }
}
@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 }
}