:root {
  --bg:#FBFCFC;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#F3EFFC;
  --bg-panel-3:#F8F6FD;
  --bg-sunk:#F2F2F4;
  --bg-code:#FAF9FD;
  --border:#E4E4E8;
  --border-strong:#D2D2D9;
  --chrome-dot:#D6D6DC;
  --accent:#8A6FE0;
  --accent-dark:#5A42B5;
  --accent-ring:rgba(138,111,224,.18);
  --accent-line:rgba(138,111,224,.24);
  --text:#111113;
  --text-muted:#5F6068;
  --text-faint:#8D8E96;
  --on-dark:#FFFFFF;
  --ink-hover:#2A2A2F;
  --success:#2F9E5B;
  --warn:#B7861A;
  --error:#D2463C;
  --clear:transparent;
  --veil:rgba(17,17,19,.32);
  --field-1:rgba(138,111,224,.30);
  --field-2:rgba(122,96,212,.52);
  --field-3:rgba(90,66,181,.72);
  --field-mask:linear-gradient(90deg,#000 0%,#000 9%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.34) 36%,rgba(0,0,0,.26) 50%,rgba(0,0,0,.34) 64%,rgba(0,0,0,.6) 80%,#000 91%,#000 100%);
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --font-mono-zh:'JetBrains Mono','Noto Sans SC','PingFang SC','Microsoft YaHei',ui-monospace,monospace;
  --weight-regular:400;
  --weight-medium:500;
  --r-ctl:4px;
  --r-win:8px;
  --r-knob:2px;
  --r-round:50%;
  --shadow-window:0 1px 2px rgba(17,17,19,.05),0 22px 44px -18px rgba(52,36,120,.20),0 56px 120px -30px rgba(52,36,120,.28);
  --shadow-key:0 1px 0 var(--border);
  --shadow-fab:0 1px 2px rgba(17,17,19,.12),0 14px 32px -10px rgba(17,17,19,.32);
  --shadow-menu:0 12px 40px rgba(17,17,19,.10);
  --nav-h:60px;
  --content:1200px;
  --reading:800px;
  --header-content:1280px;
  --gutter:32px;
  --section-space:104px;
  --ease:180ms ease;
}
*,*::before,*::after { box-sizing:border-box; }
html { margin:0; padding:0; scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html.nav-open { overflow:hidden; }
::selection { background:var(--bg-panel-2); color:var(--text); }
[hidden] { display:none !important; }
a { color:var(--accent-dark); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px; border-radius:var(--r-ctl); }
svg { display:block; flex-shrink:0; }
img { display:block; max-width:100%; height:auto; }
p { margin:0 0 1.2em; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-regular); text-wrap:balance; overflow-wrap:break-word; }
h1 { margin:0 0 24px; font-size:clamp(34px,2.2vw + 16px,48px); line-height:1.1; letter-spacing:-.02em; }
h2 { margin:0 0 24px; font-size:clamp(26px,2.1vw,36px); line-height:1.25; letter-spacing:-.015em; }
h3 { margin:0 0 16px; font-size:22px; line-height:1.4; }
h4 { font-size:18px; line-height:1.4; }
strong { font-weight:var(--weight-medium); }
code,kbd,pre { font-family:var(--font-mono-zh); }
code { overflow-wrap:anywhere; font-size:.9em; }
pre { margin:24px 0; padding:20px; max-width:100%; min-width:0; overflow-x:auto; background:var(--bg-code); color:var(--text); border:1px solid var(--border); border-radius:var(--r-ctl); font-size:13px; line-height:1.8; tab-size:2; }
pre code { font-size:inherit; overflow-wrap:normal; word-break:normal; white-space:pre; }
hr { border:0; border-top:1px solid var(--border); margin:32px 0; }
.wrap { width:100%; max-width:calc(var(--content) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.reading { width:100%; max-width:calc(var(--reading) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section-head { max-width:720px; margin-bottom:40px; }
.eyebrow { margin:0 0 16px; font-family:var(--font-mono-zh); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.muted { color:var(--text-muted); }
.nowrap { white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.grid > *, .intro > *, .footer-grid > *, .console > *, .app-body > * { min-width:0; }
.stack { display:flex; flex-direction:column; gap:24px; min-width:0; }
.flow-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.prose { min-width:0; line-height:1.9; }
.prose h2 { margin-top:64px; scroll-margin-top:24px; }
.prose h3 { margin-top:36px; scroll-margin-top:24px; }
.prose li + li { margin-top:8px; }
.prose :not(pre) > code { background:var(--bg-sunk); color:var(--text); border-radius:var(--r-knob); padding:2px 5px; }
.prose a { overflow-wrap:anywhere; }
.prose img { margin-block:24px; }
.button,.btn-primary,.btn-secondary,.btn-line {
  display:inline-flex; justify-content:center; align-items:center; gap:10px;
  min-height:48px; padding:0 22px; max-width:100%;
  border:1px solid var(--clear); border-radius:var(--r-ctl);
  font-family:var(--font-mono-zh); font-size:13.5px; font-weight:var(--weight-regular);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  transition:background-color var(--ease),border-color var(--ease),color var(--ease);
}
.button,.btn-primary { background:var(--text); color:var(--on-dark); }
.button:hover,.btn-primary:hover,.button.is-hover { background:var(--ink-hover); color:var(--on-dark); text-decoration:none; }
.button:active,.btn-primary:active,.button.is-active { background:var(--text-muted); color:var(--on-dark); }
.button:disabled,.button[aria-disabled="true"] { background:var(--bg-sunk); color:var(--text-muted); border-color:var(--border); }
.button.is-focus { outline:2px solid var(--accent-dark); outline-offset:3px; }
.btn-secondary { background:var(--bg-panel); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg-sunk); color:var(--text); border-color:var(--border-strong); }
.btn-line { padding:0; background:none; color:var(--text); border:0; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:9px; }
.btn-line:hover { color:var(--accent-dark); }
.button svg,.btn-primary svg { width:15px; height:15px; }
.btn-line svg { width:14px; height:14px; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:28px; }
.card,.panel { min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-win); background:var(--bg-panel); color:var(--text); }
.card p:last-child,.panel p:last-child { margin-bottom:0; }
.card-title { font-size:22px; margin-bottom:12px; }
.card-link { color:var(--text); text-decoration:none; }
.card-link:hover { color:var(--accent-dark); }
.panel--floating { box-shadow:var(--shadow-window); }
.product-strip { position:relative; overflow-x:clip; background:var(--bg-panel-2); color:var(--text); }
.decorated { position:relative; overflow-x:clip; }
.decorated > .decoration { position:absolute; inset:0; pointer-events:none; }
.decoration svg { width:100%; height:100%; }
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(16px); }
.reveal.shown { opacity:1; transform:none; transition:opacity 600ms ease,transform 600ms ease; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* 页头独立宽版心，不复用正文阅读宽度。 */
.top,#site-header { position:relative; z-index:50; height:var(--nav-h); background:var(--bg); color:var(--text); border-bottom:1px solid var(--border); }
.top-inner { max-width:min(100%,calc(var(--header-content) + var(--gutter)*2)); height:100%; margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:40px; }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; color:var(--text); font-size:15px; font-weight:var(--weight-medium); letter-spacing:-.01em; white-space:nowrap; }
.brand-mark { width:26px; height:26px; flex-shrink:0; }
.desktop-nav { min-width:0; height:100%; }
.tabs { display:flex; align-items:center; height:100%; list-style:none; margin:0; padding:0; gap:0; }
.tabs li { display:flex; height:100%; }
.tabs a { position:relative; display:flex; align-items:center; min-height:44px; padding:0 14px; color:var(--text-muted); text-decoration:none; font-size:14px; white-space:nowrap; }
.tabs a::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--clear); }
.tabs a:hover { color:var(--text); }
.tabs a:hover::after { background:var(--border-strong); }
.tabs a[aria-current="page"] { color:var(--text); }
.tabs a[aria-current="page"]::after { background:var(--accent-dark); }
.header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.language-control { position:relative; }
.lang { display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg-panel); color:var(--text-muted); font-size:13px; white-space:nowrap; }
.lang:hover { color:var(--text); border-color:var(--border-strong); }
.lang svg { width:14px; height:14px; }
.lang-short { display:none; }
.language-menu { position:absolute; right:0; top:calc(100% + 12px); width:190px; padding:6px; list-style:none; margin:0; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-ctl); box-shadow:var(--shadow-menu); }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; color:var(--text-muted); text-decoration:none; }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--bg-panel-2); color:var(--accent-dark); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg-panel); color:var(--text); }
.menu-toggle svg { width:20px; height:20px; }
.mobile-drawer { position:absolute; top:var(--nav-h); left:0; right:0; z-index:2; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; background:var(--bg-panel); color:var(--text); padding:16px var(--gutter) 28px; border-bottom:1px solid var(--border); }
.mobile-drawer ul { list-style:none; margin:0; padding:0; }
.mobile-drawer a { display:flex; width:100%; align-items:center; min-height:48px; padding:12px 14px; color:var(--text-muted); text-decoration:none; border-bottom:1px solid var(--border); }
.mobile-drawer a[aria-current],.mobile-drawer a:hover { background:var(--bg-panel-2); color:var(--accent-dark); }
.drawer-languages { margin-top:20px; }
.menu-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:1; border:0; padding:0; background:var(--veil); color:var(--text); cursor:default; }
.site-footer { border-top:1px solid var(--border); background:var(--bg); color:var(--text); padding-top:64px; padding-bottom:88px; }
.footer-grid { display:grid; grid-template-columns:1.3fr .8fr 1.2fr .7fr; gap:48px; }
.footer-brand p { color:var(--text-muted); max-width:300px; margin-top:18px; font-size:13px; }
.footer-title { margin:0 0 18px; font:var(--weight-regular) 11px/1.5 var(--font-mono-zh); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.footer-links { list-style:none; margin:0; padding:0; }
.footer-links li + li { margin-top:10px; }
.footer-links a { color:var(--text-muted); font-size:13px; text-decoration:none; }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:12px; }
.footer-bottom a { color:var(--text-muted); }

@media (max-width:1023px) {
  .top-inner { gap:24px; }
  .desktop-nav { display:none; }
  .menu-toggle { display:flex; }
  .header-tools { margin-left:auto; }
}
@media (min-width:1024px) {
  .mobile-drawer,.menu-veil { display:none !important; }
}
@media (max-width:900px) {
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,4vw,30px); }
  .grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  :root { --gutter:20px; --section-space:64px; }
  .wrap,.reading { padding-inline:var(--gutter); }
  .brand-name { display:none; }
  .top-inner { gap:12px; }
  .lang { min-height:44px; }
  .lang-text { display:none; }
  .lang-short { display:inline; }
  .card,.panel { padding:22px; }
  .actions { gap:20px; }
  .tilt,[data-tilt] { transform:none !important; }
  .footer-grid { gap:32px 24px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none; }
}