:root {
  --c-bg:#ffffff;
  --c-panel:#f7f8fc;
  --c-panel-2:#eef0f8;
  --c-border:#e4e6ef;
  --c-accent:#5148d6;
  --c-accent-dark:#3a32a8;
  --c-text:#16171d;
  --c-muted:#5d6170;
  --c-faint:#9a9eab;
  --c-success:#3f9a5c;
  --c-success-ink:#27683c;
  --c-warn:#c98a12;
  --c-warn-ink:#785109;
  --c-error:#d1434b;
  --c-error-ink:#a12c34;
  --c-sage:#62b57a;
  --c-pine:#185335;
  --c-accent-soft:#ecebfc;
  --c-accent-line:#d3d0f6;
  --c-sage-soft:#e9f5ed;
  --c-neutral-block:#eceef3;
  --c-on-accent:#ffffff;
  --c-ref-line:#eef0f8;
  --c-mask:#000000;
  --c-clear:transparent;
  --c-veil:rgba(22,23,29,.18);
  --c-pattern-light:rgba(255,255,255,.18);
  --c-pattern-dark:rgba(22,23,29,.12);
  --grad-keyword:linear-gradient(90deg,var(--c-accent) 0%,var(--c-sage) 100%);
  --font-display:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-card:10px;
  --r-btn:8px;
  --r-pill:999px;
  --r-shot:8px;
  --r-block:6px;
  --r-mark:7px;
  --shadow-near:0 1px 2px rgba(22,23,29,.05);
  --shadow-far:0 24px 48px rgba(52,58,92,.08);
  --shadow-card:var(--shadow-near),var(--shadow-far);
  --shadow-btn:0 1px 2px rgba(58,50,168,.18),0 6px 14px rgba(81,72,214,.16);
  --shell:1120px;
  --shell-reading:800px;
  --shell-nav:1280px;
  --gutter:32px;
  --nav-h:64px;
  --section-gap:140px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lede:17px;
  --title-h1:clamp(34px,2.6vw + 11px,48px);
  --title-h2:clamp(26px,2.4vw,36px);
  --title-h3:22px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --tracking-title:-.02em;
  --ease:160ms ease;
  --reveal-time:500ms;
}
*,*::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(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button,a { -webkit-tap-highlight-color:var(--c-clear); }
button:disabled { cursor:not-allowed; }
:focus-visible { outline:2px solid var(--c-accent); outline-offset:3px; border-radius:var(--r-btn); }
img { max-width:100%; }
svg { display:block; flex-shrink:0; }
figure { margin:0; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); text-wrap:balance; }
h1 { font-size:var(--title-h1); line-height:1.18; letter-spacing:var(--tracking-title); }
h2 { font-size:var(--title-h2); line-height:1.3; letter-spacing:var(--tracking-title); }
h3 { font-size:var(--title-h3); line-height:1.4; }
p { margin:0 0 1em; }
code,kbd,samp,pre { font-family:var(--font-mono); }
code { font-size:.88em; overflow-wrap:anywhere; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--c-border);
  border-radius:var(--r-block);
  background:var(--c-panel);
  color:var(--c-text);
  line-height:1.85;
  -webkit-overflow-scrolling:touch;
}
pre code { font-size:inherit; white-space:pre; overflow-wrap:normal; word-break:normal; }
hr { border:0; border-top:1px solid var(--c-border); margin-block:32px; }
.wrap {
  width:100%;
  max-width:calc(var(--shell) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:calc(var(--shell-reading) + var(--gutter) * 2); }
.section { padding-top:var(--section-gap); padding-bottom:var(--section-gap); }
.section-panel { background:var(--c-panel); color:var(--c-text); }
.section-head { max-width:720px; margin:0 auto 40px; text-align:center; }
.section-head h2 { margin:12px 0; }
.section-head p,.muted { color:var(--c-muted); }
.eyebrow { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.06em; color:var(--c-accent-dark); }
.nowrap { white-space:nowrap; }
.grid-two,.grid-three { 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-two > *,.grid-three > *,main,section,article,aside { min-width:0; }
.flow > * + * { margin-top:24px; }
.prose,.article-body { min-width:0; overflow-wrap:break-word; }
.prose h2,.article-body h2 { margin-top:64px; margin-bottom:20px; }
.prose h3,.article-body h3 { margin-top:32px; }
.prose p,.article-body p { line-height:1.9; }
.prose a:not([class*="btn"]):not([class*="button"]),.article-body a:not([class*="btn"]):not([class*="button"]),.text-link { color:var(--c-accent-dark); text-decoration:underline; text-underline-offset:4px; }
.prose li,.article-body li { margin-block:8px; }
.prose img,.article-body img { max-width:100%; }
.skip {
  position:absolute; left:16px; top:12px; z-index:100;
  padding:8px 14px; border-radius:var(--r-btn);
  background:var(--c-accent); color:var(--c-on-accent); font-size:var(--text-sm);
}
.skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.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;
}
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:11px 24px;
  border:1px solid var(--c-clear); border-radius:var(--r-btn);
  font-size:15px; font-weight:var(--weight-medium); line-height:1.5;
  text-align:center; max-width:100%;
  transition:background-color var(--ease),border-color var(--ease),color var(--ease);
}
.btn svg { width:17px; height:17px; }
.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); }
.btn-ghost { background:var(--c-bg); color:var(--c-accent); border-color:var(--c-accent); }
.btn-ghost:hover,.btn-ghost.is-hover { background:var(--c-accent-soft); color:var(--c-accent-dark); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-neutral-block); color:var(--c-muted); border-color:var(--c-border); box-shadow:none; }
.btn.is-focus { outline:2px solid var(--c-accent); outline-offset:3px; }
.card,.panel {
  min-width:0; padding:28px; border:1px solid var(--c-border);
  border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text);
}
.card { box-shadow:var(--shadow-near); }
.card h3,.panel h3 { margin-top:0; }
.panel-soft { background:var(--c-panel); color:var(--c-text); }
.reveal { opacity:1; }
.reveal.reveal-pending { opacity:0; transform:translateY(12px); transition:opacity var(--reveal-time) ease,transform var(--reveal-time) ease; }
.reveal.shown { opacity:1; transform:none; }

/* 品牌、导航与移动抽屉共用一套 DOM；顶栏不做模糊处理。 */
.topbar,#site-header { position:relative; z-index:50; background:var(--c-bg); color:var(--c-text); border-bottom:1px solid var(--c-border); }
.topbar-inner {
  position:relative; width:100%;
  max-width:min(100%,calc(var(--shell-nav) + var(--gutter) * 2));
  min-height:var(--nav-h); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:15px; font-weight:var(--weight-medium); letter-spacing:-.01em; }
.brand img,.brandmark { display:block; width:30px; height:30px; border-radius:var(--r-mark); flex-shrink:0; }
.brandmark {
  background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border);
  box-shadow:inset 0 0 0 4px var(--c-panel),var(--shadow-near);
}
.desktop-nav { margin-left:auto; min-width:0; }
.navlist { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px; }
.navlist a {
  display:inline-flex; align-items:center; min-height:34px; padding:6px 14px;
  border-radius:var(--r-pill); font-size:var(--text-sm); color:var(--c-muted); white-space:nowrap;
  transition:background-color var(--ease),color var(--ease);
}
.navlist a:hover { color:var(--c-text); }
.navlist a[aria-current="page"] { background:var(--c-accent-soft); color:var(--c-accent-dark); font-weight:var(--weight-medium); }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.navsep { width:1px; height:18px; background:var(--c-border); color:var(--c-text); }
.language-control { position:relative; }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:34px; padding:6px 12px; border:1px solid var(--c-border);
  border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-size:13px;
}
.lang svg { width:15px; height:15px; }
.lang-short { display:none; }
.language-menu {
  position:absolute; right:0; top:calc(100% + 10px); min-width:180px;
  padding:6px; margin:0; list-style:none; border:1px solid var(--c-border);
  border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card); z-index:5;
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:var(--r-btn); }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--c-accent-soft); color:var(--c-accent-dark); }
.menu-toggle {
  display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  border:1px solid var(--c-border); border-radius:var(--r-btn); background:var(--c-bg); color:var(--c-text);
}
.menu-toggle svg { width:22px; height:22px; }
.mobile-drawer { display:none; }
.menu-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:0; border:0; background:var(--c-veil); color:var(--c-text); }
.site-footer {
  background:var(--c-panel); color:var(--c-text); border-top:1px solid var(--c-border);
  padding-top:64px; padding-bottom:32px;
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1.4fr; gap:48px; }
.footer-grid > * { min-width:0; }
.footer-brand p { margin-top:18px; max-width:340px; color:var(--c-muted); font-size:var(--text-sm); line-height:1.9; }
.footer-title { font-size:var(--text-sm); font-weight:var(--weight-medium); margin:0 0 16px; }
.footer-links { margin:0; padding:0; list-style:none; }
.footer-links a { display:inline-block; padding-block:5px; color:var(--c-muted); font-size:var(--text-sm); }
.footer-links a:hover,.footer-languages a:hover { color:var(--c-accent-dark); text-decoration:underline; }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:40px; font-size:var(--text-sm); color:var(--c-muted); }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:24px; padding-top:24px; border-top:1px solid var(--c-border); color:var(--c-muted); font-size:var(--text-xs); }
.footer-bottom p { margin:0; }
.footer-legal { display:flex; gap:20px; }

/* 用户确认首屏：全静态、居中文案与宽幅规则对照纸。 */
.hero { position:relative; overflow-x:clip; padding:44px 40px 140px; background:var(--c-bg); color:var(--c-text); }
.hero-copy { max-width:var(--shell); margin:0 auto; text-align:center; }
.storetag {
  display:inline-flex; align-items:center; gap:9px; min-height:30px; padding:4px 13px;
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-muted);
  font-family:var(--font-mono); font-size:var(--text-xs); box-shadow:var(--shadow-near);
}
.storetag svg { width:13px; height:13px; color:var(--c-text); }
.storetag .dot { width:3px; height:3px; border-radius:var(--r-pill); background:var(--c-faint); color:var(--c-text); flex-shrink:0; }
.storetag b { font-weight:var(--weight-medium); color:var(--c-text); }
.storetag:hover { border-color:var(--c-accent-line); }
.hero h1 { margin:22px auto 0; font-size:clamp(26px,2.6vw + 11px,48px); font-weight:var(--weight-normal); line-height:1.18; letter-spacing:var(--tracking-title); }
.kw { background:var(--grad-keyword); color:var(--c-clear); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:var(--c-clear); }
.lede { max-width:720px; margin:18px auto 0; font-size:var(--text-lede); line-height:1.7; color:var(--c-muted); }
.lede strong { font-weight:var(--weight-strong); color:var(--c-text); }
.lede code { color:var(--c-text); }
.cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.devices { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin:22px auto 0; padding:0; list-style:none; }
.devices a { display:inline-flex; align-items:center; gap:7px; min-height:28px; font-size:13.5px; color:var(--c-muted); }
.devices a:hover { color:var(--c-accent-dark); }
.devices svg { width:18px; height:18px; }
.devices .rule { width:1px; height:16px; background:var(--c-border); color:var(--c-text); }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 11px; border:1px solid var(--c-border); border-radius:var(--r-pill); font-size:12.5px; max-width:100%; overflow-wrap:anywhere; }
.devices .chip { font-size:12.5px; }
.chip-store { border-color:var(--c-accent-line); color:var(--c-accent-dark) !important; background:var(--c-accent-soft); }
.chip-plain { background:var(--c-bg); color:var(--c-muted); }
.decorated,.hero-visual { position:relative; overflow-x:clip; }
@media (max-width:1100px) {
  .desktop-nav { display:none; }
  .header-tools { margin-left:auto; }
  .navsep { display:none; }
  .menu-toggle { display:inline-flex; }
  .mobile-drawer {
    display:block; position:absolute; top:100%; left:0; right:0; z-index:2;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain;
    padding:16px var(--gutter) 24px; border-bottom:1px solid var(--c-border);
    background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card);
  }
  .mobile-drawer ul { margin:0; padding:0; list-style:none; }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 16px; border-radius:var(--r-btn); font-size:var(--text-sm); }
  .mobile-drawer a[aria-current] { background:var(--c-accent-soft); color:var(--c-accent-dark); }
  .drawer-language-title { margin:20px 16px 8px; font-size:var(--text-xs); color:var(--c-muted); }
}
@media (max-width:900px) {
  :root { --gutter:20px; }
  .hero { padding:36px 20px 100px; }
  .hero h1 { font-size:28px; line-height:1.3; }
  .lede { font-size:15.5px; }
  .cta { flex-direction:column; align-items:stretch; max-width:320px; margin-inline:auto; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:1 / -1; }
  .preview-topbar .topbar-inner { flex-wrap:wrap; padding-block:12px; gap:10px; }
  .preview-topbar .desktop-nav { display:block; order:3; width:100%; overflow-x:auto; }
  .preview-topbar .navlist a { padding-inline:11px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; --section-gap:80px; --title-h1:28px; --title-h2:26px; --title-h3:20px; }
  .topbar-inner { gap:8px; }
  .topbar-inner > .brand { min-width:0; flex-shrink:1; }
  .topbar-inner > .brand span { min-width:0; overflow-wrap:anywhere; }
  .brand { gap:7px; font-size:12px; }
  .brand img,.brandmark { width:26px; height:26px; }
  .header-tools { gap:6px; margin-left:auto; }
  .lang { padding-inline:9px; min-height:40px; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .lang svg { display:none; }
  .grid-two,.grid-three { grid-template-columns:minmax(0,1fr); }
  .card,.panel { padding:20px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-brand { grid-column:auto; }
  .tilt,[class*="tilt-"] { transform:none !important; }
  .devices { gap:8px 14px; }
  .hero { padding-inline:var(--gutter); }
  .hero h1 { font-size:26px; }
  .storetag { font-size:11px; gap:7px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal.reveal-pending { opacity:1; transform:none; }
}