:root {
  --bg:#ffffff;
  --bg-panel:#f7f7f9;
  --bg-panel-2:#131218;
  --bg-glass:rgba(255,255,255,.86);
  --border:#e6e6eb;
  --border-strong:#d9d9e0;
  --line-faint:#eeeef2;
  --accent:#6750f2;
  --accent-dark:#4b34d1;
  --accent-soft:#f0eefe;
  --accent-wash:rgba(103,80,242,.06);
  --accent-glow:rgba(103,80,242,.17);
  --accent-ring:rgba(103,80,242,.16);
  --accent-light:#c7bdff;
  --text:#131218;
  --text-muted:#5f5f6b;
  --text-faint:#9b9ba7;
  --text-secondary:#6b6b77;
  --success:#1f9e6a;
  --success-ring:rgba(31,158,106,.16);
  --warn:#c98a12;
  --error:#d6453d;
  --on-dark:#ffffff;
  --dark-muted:#c5c4ce;
  --dark-border:#38363f;
  --mask-solid:#000000;
  --clear:transparent;
  --ink-04:rgba(19,18,24,.04);
  --ink-06:rgba(19,18,24,.06);
  --ink-10:rgba(19,18,24,.10);
  --ink-16:rgba(19,18,24,.16);
  --veil:rgba(19,18,24,.36);
  --sheen:rgba(255,255,255,.14);
  --shadow-nav:0 1px 2px var(--ink-04),0 8px 24px -12px var(--ink-10);
  --shadow-card:0 1px 2px var(--ink-06),0 14px 34px -14px var(--ink-16),0 30px 70px -28px var(--accent-glow);
  --shadow-ghost:0 1px 2px var(--ink-04),0 10px 24px -14px var(--ink-10);
  --shadow-btn:0 1px 0 var(--sheen) inset,0 1px 2px var(--ink-16),0 8px 18px -8px var(--ink-16);
  --r-xs:4px;
  --r-card:8px;
  --r-btn:6px;
  --r-pill:999px;
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1240px;
  --reading:800px;
  --header-width:1280px;
  --gutter:32px;
  --section-space:96px;
  --ease:cubic-bezier(.4,0,.2,1);
  --speed:.2s;
  --weight-display:800;
  --tracking-display:-.02em;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:32px }
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;
}
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg { max-width:100% }
img { height:auto }
svg { vertical-align:middle; flex-shrink:0 }
button svg,a svg { flex-shrink:0 }
[hidden] { display:none!important }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs) }
::selection { background:var(--accent-soft); color:var(--text) }
h1,h2,h3,h4 {
  font-family:var(--font-display);
  line-height:1.2;
  letter-spacing:var(--tracking-display);
  text-wrap:balance;
  overflow-wrap:break-word;
}
h1 { font-size:clamp(34px,3.4vw,48px); font-weight:var(--weight-display) }
h2 { font-size:clamp(26px,2.7vw,36px); font-weight:var(--weight-display) }
h3 { font-size:22px; font-weight:700 }
p { margin-top:0; margin-bottom:1.25em }
code,kbd,pre,samp { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre {
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--bg-panel);
  color:var(--text);
  font-size:14px;
  line-height:1.8;
  tab-size:2;
}
pre code { white-space:pre; overflow-wrap:normal; word-break:normal }
hr { border:0; border-top:1px solid var(--border); margin-block:32px }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  padding:10px 16px;
  background:var(--text);
  color:var(--on-dark);
  border-radius:var(--r-btn);
  transform:translateY(-150%);
}
.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); overflow-x:clip }
.section--panel { background:var(--bg-panel); color:var(--text) }
.section--dark {
  background:var(--bg-panel-2);
  color:var(--on-dark);
  clip-path:polygon(32px 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%,0 32px);
  padding-top:calc(var(--section-space) + 32px);
}
.section--dark p { color:var(--dark-muted) }
.section--dark .eyebrow,.section--dark .text-accent { color:var(--accent-light) }
.section--dark a:focus-visible { outline-color:var(--accent-light) }
.section-heading { max-width:760px; margin-bottom:40px }
.section-heading h2 { margin:12px 0 18px }
.eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--accent-dark) }
.text-muted { color:var(--text-muted) }
.text-accent { color:var(--accent-dark) }
.keep { white-space:nowrap }
.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__grid > *, .footer-grid > *, .feature-layout > * { min-width:0 }
.stack > * + * { margin-top:24px }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:11px 22px;
  max-width:100%;
  border:1px solid var(--clear);
  border-radius:var(--r-btn);
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.005em;
  text-align:center;
  transition:transform var(--speed) var(--ease),background-color var(--speed) var(--ease),border-color var(--speed) var(--ease);
}
.btn svg { width:17px; height:17px }
.btn--solid { background:var(--text); color:var(--on-dark); box-shadow:var(--shadow-btn) }
.btn--solid:hover,.btn--solid.is-hover { transform:translateY(-1px) }
.btn--line { background:var(--bg); color:var(--text); border-color:var(--border); box-shadow:0 1px 2px var(--ink-04) }
.btn--line:hover,.btn--line.is-hover { border-color:var(--border-strong); background:var(--bg-panel); color:var(--text) }
.btn--quiet { background:var(--clear); color:var(--text-muted) }
.btn--quiet:hover { background:var(--bg-panel); color:var(--text) }
.btn:active,.btn.is-active { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel); color:var(--text-muted); border-color:var(--border); box-shadow:none; transform:none }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:3px }
.btn__arrow { color:var(--text-secondary); font-weight:500 }
.card,.panel {
  min-width:0;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--bg);
  color:var(--text);
  box-shadow:var(--shadow-card);
}
.card h3,.panel h3 { margin-top:0 }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.panel--flat { box-shadow:var(--shadow-ghost) }
.prose { min-width:0; overflow-wrap:break-word }
.prose h2 { margin-top:2.2em; margin-bottom:.8em; scroll-margin-top:32px }
.prose h3 { margin-top:1.8em; margin-bottom:.7em }
.prose p,.prose li { line-height:1.85 }
.prose li + li { margin-top:.5em }
.prose a:not(.btn):not(.app-store) { text-decoration:underline; text-underline-offset:4px }
.prose :not(pre) > code { font-size:.9em; background:var(--bg-panel); color:var(--text); border-radius:var(--r-xs); padding:2px 5px }
.prose > :first-child { margin-top:0 }
.reveal { opacity:1; transform:none }
.reveal.reveal-pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none; transition:opacity .65s var(--ease),transform .65s var(--ease) }

/* Independent, wider header container. */
.topbar {
  position:absolute;
  top:16px;
  left:0;
  right:0;
  z-index:40;
  padding-inline:var(--gutter);
  display:flex;
  justify-content:center;
}
.topbar__shell {
  position:relative;
  width:100%;
  max-width:var(--header-width);
  height:56px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 10px 0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-glass);
  color:var(--text);
  box-shadow:var(--shadow-nav);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-right:18px;
  height:28px;
  border-right:1px solid var(--border);
  flex-shrink:0;
}
.brand__mark { display:block; width:28px; height:28px; flex-shrink:0; border-radius:var(--r-pill) }
.brand__mark--placeholder {
  border-radius:7px;
  background:var(--bg-panel);
  color:var(--text);
  border:1px solid var(--border-strong);
  box-shadow:0 1px 2px var(--ink-06);
}
.brand__name { font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap }
.nav { flex:1; min-width:0 }
.nav__list { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0 }
.nav__link {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 14px;
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:500;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color var(--speed) var(--ease),background-color var(--speed) var(--ease);
}
.nav__link:hover { background:var(--bg-panel); color:var(--text) }
.nav__link[aria-current="page"],.drawer a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-dark); font-weight:600 }
.header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto }
.language { position:relative; flex-shrink:0 }
.lang {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:7px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
}
.lang svg { width:14px; height:14px; color:var(--text-muted) }
.lang:hover { border-color:var(--border-strong) }
.language__menu {
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:190px;
  padding:6px;
  list-style:none;
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--bg);
  color:var(--text);
  box-shadow:var(--shadow-card);
}
.language__menu a { display:flex; align-items:center; min-height:44px; width:100%; padding:10px 14px; border-radius:var(--r-xs); font-size:14px }
.language__menu a:hover,.language__menu a[aria-current] { background:var(--accent-soft); color:var(--accent-dark) }
.menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  min-height:44px;
  padding:10px;
  border:0;
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text);
}
.menu-toggle svg { width:20px; height:20px }
.drawer {
  position:absolute;
  top:68px;
  left:0;
  right:0;
  z-index:3;
  padding:16px;
  max-height:calc(100dvh - 104px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
.drawer ul { list-style:none; margin:0; padding:0 }
.drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 16px; border-radius:var(--r-btn); font-size:15px; overflow-wrap:anywhere }
.drawer a:hover { background:var(--bg-panel); color:var(--text) }
.drawer__languages { border-top:1px solid var(--border); margin-top:12px; padding-top:12px }
.nav-veil { position:fixed; inset:0; z-index:30; border:0; background:var(--veil); color:var(--on-dark); cursor:default }
.page-main { padding-top:128px; padding-bottom:80px }
.site-footer { background:var(--bg-panel); color:var(--text); border-top:1px solid var(--border); padding-top:64px; padding-bottom:28px }
.footer-grid { display:grid; grid-template-columns:1.4fr .75fr 1.25fr; gap:56px }
.footer-brand { display:inline-flex; align-items:center; gap:12px; font-weight:700; margin-bottom:18px }
.footer-brand img { width:36px; height:36px; border-radius:var(--r-pill) }
.footer-about { max-width:390px; color:var(--text-muted); font-size:14px; line-height:1.85 }
.footer-heading { font-size:14px; font-weight:600; margin-top:0; margin-bottom:16px }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; color:var(--text-muted) }
.footer-links a { display:inline-block; padding-block:4px; overflow-wrap:anywhere }
.footer-links a:hover,.footer-languages a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:40px; font-size:14px; color:var(--text-muted) }
.footer-languages a { min-height:32px; display:inline-flex; align-items:center }
.footer-languages [aria-current] { color:var(--accent-dark); font-weight:600 }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:24px; padding-top:24px; font-size:12px; color:var(--text-muted) }
.footer-bottom p { margin:0 }
.footer-bottom a { text-decoration:underline; text-underline-offset:3px }

@media (max-width:1280px) {
  .topbar__shell { gap:12px }
  .nav__link { padding-inline:10px }
  html:not([lang="zh-CN"]):not([lang="zh-TW"]) .nav { display:none }
  html:not([lang="zh-CN"]):not([lang="zh-TW"]) .menu-toggle { display:inline-flex }
}
@media (max-width:1100px) {
  .nav { display:none }
  .menu-toggle { display:inline-flex }
  .header-tools { margin-left:auto }
}
@media (min-width:1101px) {
  html[lang="zh-CN"] .drawer,html[lang="zh-TW"] .drawer { display:none }
}
@media (max-width:980px) {
  .brand__name { display:none }
  .brand { padding-right:12px }
  .footer-grid { gap:32px; grid-template-columns:1.2fr 1fr }
  .footer-grid > :first-child { grid-column:1/-1 }
}
@media (max-width:768px) {
  :root { --section-space:64px }
  h1 { font-size:clamp(24px,4vw,30px) }
  h2 { font-size:26px }
  h3 { font-size:20px }
  .grid--three { grid-template-columns:1fr }
}
@media (max-width:640px) {
  :root { --gutter:18px }
  .topbar { top:10px; padding-inline:12px }
  .topbar__shell { gap:10px; padding:0 8px 0 10px }
  .lang { padding-inline:10px }
  .header-tools { gap:4px; margin-left:auto }
  .drawer { max-height:calc(100dvh - 94px) }
  .grid--two { grid-template-columns:1fr }
  .card,.panel { padding:22px }
  .footer-grid { grid-template-columns:1fr; gap:28px }
  .footer-grid > :first-child { grid-column:auto }
  .footer-links { gap:4px }
  .tilt,[data-tilt] { transform:none!important }
  .page-main { padding-top:104px }
  .section--dark { clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%,0 20px) }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .reveal.reveal-pending { opacity:1; transform:none }
}