:root {
  --bg:#FFFFFF;
  --bg-panel:#F6F7F9;
  --bg-panel-2:#EEF0F3;
  --border:#E3E6EB;
  --border-strong:#CDD2D9;
  --accent:#2454FF;
  --accent-dark:#1438C8;
  --accent-soft:#ECF1FF;
  --accent-soft-line:#CCD8FF;
  --text:#111317;
  --text-muted:#5D6470;
  --text-faint:#8C929C;
  --ink:#111317;
  --on-ink:#FFFFFF;
  --on-accent:#FFFFFF;
  --success:#1E9E5A;
  --warn:#C98A0B;
  --error:#D6433B;
  --transparent:transparent;
  --veil:rgba(17,19,23,.24);
  --font-display:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-regular:400;
  --weight-medium:500;
  --weight-strong:600;
  --text-xs:12px;
  --text-sm:13px;
  --text-label:14px;
  --text-nav:15px;
  --text-button:15.5px;
  --text-body:16px;
  --text-brand:16.5px;
  --text-lead:18px;
  --text-h3:24px;
  --text-h2:clamp(28px,2.6vw,36px);
  --text-h1:clamp(34px,3.3vw,46px);
  --text-h1-mobile:clamp(24px,7vw,30px);
  --text-question-heading:clamp(30px,3.6vw,48px);
  --r-pill:999px;
  --r-circle:50%;
  --r-container:24px;
  --r-panel:20px;
  --r-window:16px;
  --r-md:10px;
  --r-field:9px;
  --r-sm:8px;
  --r-indicator:2px;
  --r-none:0;
  --shadow-window:0 1px 2px rgba(17,19,23,.06),0 22px 44px -34px rgba(17,19,23,.22);
  --shadow-fab:0 1px 2px rgba(17,19,23,.06),0 10px 24px -14px rgba(17,19,23,.28);
  --wrap:1180px;
  --header-wrap:1280px;
  --reading:780px;
  --gutter:24px;
  --nav-h:64px;
  --section-space:140px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --time-fast:.2s;
  --time-tab:.25s;
  --time-reveal:.6s;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px) }
html.nav-open { overflow:hidden }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--text-body); line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
svg { flex-shrink:0 }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
a { color:var(--accent); text-underline-offset:4px }
a:hover { color:var(--accent-dark) }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm);
}
[hidden] { display:none !important }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-regular); text-wrap:balance; overflow-wrap:break-word }
h1 { font-size:var(--text-h1); line-height:1.14; letter-spacing:-.02em }
h2 { font-size:var(--text-h2); line-height:1.25; letter-spacing:-.02em }
h3 { font-size:var(--text-h3); line-height:1.4 }
p { margin-block:0 1.2em }
strong { font-weight:var(--weight-medium) }
code,kbd,samp,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre { max-width:100%; overflow-x:auto; white-space:pre; overscroll-behavior-inline:contain }
pre code { overflow-wrap:normal; word-break:normal }
hr { border:0; border-top:1px solid var(--border) }
section,article,main,aside,nav,div { min-width:0 }
:where([id]) { scroll-margin-top:calc(var(--nav-h) + 24px) }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link { position:fixed; top:8px; left:16px; z-index:100; transform:translateY(-160%); padding:8px 16px; background:var(--bg); color:var(--accent) }
.skip-link:focus { transform:none }
.wrap { width:100%; max-width:calc(var(--wrap) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter) }
.reading { max-width:calc(var(--reading) + var(--gutter)*2) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section + .section { padding-top:0 }
.section__rule { margin:0 0 56px }
.section__eyebrow { margin:0 0 14px; font-size:var(--text-label); color:var(--text-muted) }
.section__title { margin:0 0 28px }
.keep { white-space:nowrap }
.muted { color:var(--text-muted) }
.accent { color:var(--accent) }
.icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.actions,.chip-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:8px 24px;
  border:1px solid var(--transparent); border-radius:var(--r-pill);
  font-size:var(--text-button); font-weight:var(--weight-medium); line-height:1.4;
  text-align:center; text-decoration:none;
  background:var(--bg); color:var(--text);
  transition:background-color var(--time-fast) var(--ease),border-color var(--time-fast) var(--ease),color var(--time-fast) var(--ease);
}
.btn svg { width:16px; height:16px }
.btn--ink { background:var(--ink); color:var(--on-ink) }
.btn--ink:hover,.btn--ink.is-hover { background:var(--accent); color:var(--on-accent) }
.btn--primary { background:var(--accent); color:var(--on-accent) }
.btn--primary:hover,.btn--primary.is-hover { background:var(--accent-dark); color:var(--on-accent) }
.btn--line { background:var(--bg); color:var(--text); border-color:var(--border-strong) }
.btn--line:hover,.btn--line.is-hover { border-color:var(--text); color:var(--text) }
.btn:active,.btn.is-pressed { border-color:var(--text); transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border); cursor:not-allowed; transform:none }
.btn--small { min-height:34px; padding:6px 18px; font-size:var(--text-sm) }
.panel,.card { border:1px solid var(--border); border-radius:var(--r-panel); background:var(--bg); color:var(--text); padding:28px }
.panel--soft { background:var(--bg-panel); color:var(--text) }
.card h3 { margin-top:0 }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.card-grid > * { min-width:0 }
.prose { min-width:0; overflow-wrap:break-word }
.prose h2 { margin:64px 0 24px }
.prose h3 { margin:36px 0 18px }
.prose li { margin-bottom:10px }
.prose :not(pre) > code { background:var(--bg-panel); color:var(--text); padding:2px 5px; border-radius:var(--r-sm) }
.prose pre { padding:20px; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-md); font-size:var(--text-sm); line-height:1.8 }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(16px) }
.reveal { transition:opacity var(--time-reveal) var(--ease),transform var(--time-reveal) var(--ease) }
.decorated,.hero { overflow-x:clip }

/* 页头拥有独立的宽版心。 */
#site-header,.topbar { position:sticky; top:0; z-index:50; background:var(--bg); color:var(--text); border-bottom:1px solid var(--border) }
.topbar__inner {
  width:100%; max-width:min(100%,calc(var(--header-wrap) + var(--gutter)*2));
  margin-inline:auto; padding-inline:var(--gutter);
  height:var(--nav-h); display:flex; align-items:center; gap:48px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; color:var(--text); text-decoration:none }
.brand:hover { color:var(--text) }
.brand__mark { width:30px; height:30px; display:block; flex-shrink:0 }
.brand__name { font-size:var(--text-brand); font-weight:var(--weight-medium); letter-spacing:-.01em }
.tabs-nav { min-width:0 }
.tabs-nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px }
.tabs-nav li { flex-shrink:0 }
.tabs-nav a {
  position:relative; display:flex; align-items:center; height:var(--nav-h); padding:0 14px;
  font-size:var(--text-nav); color:var(--text-muted); text-decoration:none; white-space:nowrap;
  transition:color var(--time-fast) var(--ease);
}
.tabs-nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; border-radius:var(--r-indicator) var(--r-indicator) 0 0; background:var(--accent); color:var(--on-accent); transform:scaleX(0); transition:transform var(--time-tab) var(--ease) }
.tabs-nav a:hover,.tabs-nav a.is-active { color:var(--text) }
.tabs-nav a.is-active { font-weight:var(--weight-medium) }
.tabs-nav a.is-active::after { transform:scaleX(1) }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0 }
.language { position:relative }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 14px; border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--bg); color:var(--text); font-size:var(--text-label); white-space:nowrap;
}
.lang:hover { border-color:var(--border-strong) }
.lang__caret { font-size:var(--text-xs); color:var(--text-muted) }
.lang__short { display:none }
.language__menu {
  position:absolute; right:0; top:calc(100% + 12px); min-width:180px; 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; color:var(--text); text-decoration:none; border-radius:var(--r-sm) }
.language__menu a:hover,.language__menu a[aria-current] { background:var(--bg-panel); color:var(--accent) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); color:var(--text) }
.mobile-nav { position:absolute; inset:var(--nav-h) 0 auto; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; padding:16px var(--gutter) 24px; border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); z-index:3 }
.mobile-nav ul { margin:0; padding:0; list-style:none }
.mobile-nav a { display:flex; align-items:center; width:100%; min-height:46px; padding:10px 12px; text-decoration:none; color:var(--text) }
.mobile-nav a.is-active { border-left:3px solid var(--accent); background:var(--bg-panel); color:var(--text) }
.mobile-nav__languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }
.mobile-nav__languages a[aria-current] { color:var(--accent) }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:40; border:0; background:var(--veil); color:var(--text); cursor:default }

/* 全站页脚。 */
.site-footer { border-top:1px solid var(--border); padding-top:64px; padding-bottom:100px; background:var(--bg); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.25fr .8fr 1.1fr .7fr; gap:40px }
.footer-brand p { max-width:300px; margin:20px 0; color:var(--text-muted); font-size:var(--text-label) }
.footer-heading { margin:0 0 16px; font-size:var(--text-label); font-weight:var(--weight-medium) }
.footer-links { list-style:none; margin:0; padding:0 }
.footer-links a { display:inline-flex; align-items:center; min-height:36px; color:var(--text-muted); font-size:var(--text-label); text-decoration:none; overflow-wrap:anywhere }
.footer-links a:hover { color:var(--accent) }
.footer-bottom { margin-top:48px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:var(--text-sm) }

/* 已确认的首屏比例，不追加轨道、光晕或纹理。 */
.hero { min-height:calc(100svh - var(--nav-h) - 1px); display:grid; align-content:center; padding-top:26px; padding-bottom:22px }
.hero__head { display:grid; grid-template-columns:minmax(0,1fr) 468px; column-gap:72px; align-items:end }
.kicker { display:inline-flex; align-items:center; gap:12px; font-size:14.5px; color:var(--text-muted); text-decoration:none; line-height:1.5 }
.kicker__chip { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 13px; flex-shrink:0; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); font-weight:var(--weight-medium) }
.kicker__dot { width:7px; height:7px; border-radius:var(--r-circle); background:var(--accent); color:var(--on-accent); flex-shrink:0 }
.kicker__arrow { flex-shrink:0 }
.hero__title { margin:18px 0 0; font-size:var(--text-h1); font-weight:var(--weight-regular); line-height:1.14; letter-spacing:-.02em }
.hero__line { display:block }
.hero__hl { color:var(--accent) }
.hero__desc { margin:0; font-size:var(--text-body); line-height:1.7; color:var(--text-muted) }
.hero__desc strong { color:var(--text); font-weight:var(--weight-medium) }
.hero__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px }
.platforms { list-style:none; margin:18px 0 0; padding:0; display:flex; gap:8px }
.platforms a { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:30px; padding:4px 12px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); text-decoration:none }
.platforms svg { width:13px; height:13px; color:var(--text); flex-shrink:0 }
.platforms a:hover { color:var(--accent); border-color:var(--accent-soft-line) }
.platforms a:hover svg { color:var(--accent) }

@media (max-width:1180px) {
  .topbar__inner { gap:24px }
  .tabs-nav a { padding-inline:10px }
  .hero__head { grid-template-columns:minmax(0,1fr) 440px; column-gap:48px }
  .platforms { flex-wrap:wrap }
}
@media (max-width:1080px) {
  .topbar__inner { gap:16px }
  .tabs-nav--desktop { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:1081px) {
  .mobile-nav,.nav-veil { display:none !important }
}
@media (max-width:860px) {
  .hero { min-height:auto; padding-top:36px; padding-bottom:40px }
  .hero__head { grid-template-columns:1fr; row-gap:22px }
  .hero__title { font-size:var(--text-h1-mobile) }
  .hero__desc { font-size:var(--text-nav) }
  .btn { min-height:44px; padding-inline:20px; font-size:var(--text-nav) }
  .card-grid { grid-template-columns:1fr }
}
@media (max-width:768px) {
  h1 { font-size:var(--text-h1-mobile) }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .section { padding-top:var(--section-space); padding-bottom:80px }
  .tilt,[data-tilt] { transform:none !important }
  .brand__name { font-size:var(--text-label) }
  .lang { padding-inline:10px }
  .lang__full { display:none }
  .lang__short { display:inline }
  .topbar__inner { gap:8px }
  .footer-grid { grid-template-columns:1fr; gap:28px }
  .panel,.card { padding:20px }
  .kicker { flex-wrap:wrap; gap:8px }
  .kicker__text { font-size:var(--text-xs) }
  .hero__line { max-width:100% }
  .hero__title .keep { white-space:normal }
  .platforms { flex-direction:row; flex-wrap:wrap }
  .platforms a { padding-inline:9px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}