:root {
  --bg:#100836;
  --bg-panel:#1A1148;
  --bg-panel-2:#F5F4FA;
  --border:#2E2566;
  --accent:#7266FF;
  --accent-dark:#4C3FD9;
  --accent-2:#E0409A;
  --accent-soft:#A39BFF;
  --text:#F1EFFF;
  --text-muted:#A8A2CF;
  --success:#3DD6A0;
  --warn:#F5B94A;
  --error:#FF5D6C;
  --ink:#17142B;
  --surface-light:#FFFFFF;
  --ink-muted:#615C80;
  --ink-faint:#9A96B4;
  --line-light:#E8E5F2;
  --surface-sunken:#F8F7FC;
  --track-off:#D9D6E8;
  --success-ink:#0F8A5F;
  --warn-ink:#75510B;
  --error-ink:#AC233B;
  --clear:transparent;
  --accent-tint:rgba(114,102,255,.09);
  --accent-tint-2:rgba(114,102,255,.22);
  --success-tint:rgba(61,214,160,.16);
  --warn-tint:rgba(245,185,74,.16);
  --error-tint:rgba(255,93,108,.12);
  --star:rgba(255,255,255,.35);
  --star-faint:rgba(255,255,255,.2);
  --glow-violet:rgba(114,102,255,.42);
  --glow-magenta:rgba(224,64,154,.30);
  --hairline-dark:rgba(241,239,255,.08);
  --shade-1:rgba(8,4,30,.20);
  --shade-2:rgba(6,3,24,.60);
  --shade-ink-1:rgba(23,20,43,.05);
  --shade-ink-2:rgba(23,20,43,.10);
  --sheen:rgba(255,255,255,.18);
  --veil:rgba(6,3,24,.72);
  --grad-accent:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);
  --grad-text-dark:linear-gradient(100deg,var(--accent-soft) 0%,var(--accent) 100%);
  --grad-text-light:linear-gradient(100deg,var(--accent) 0%,var(--accent-dark) 100%);
  --grad-orb:conic-gradient(from 200deg,var(--accent) 0%,var(--accent-2) 36%,var(--success) 68%,var(--accent) 100%);
  --shadow-window:0 1px 2px var(--shade-1),0 48px 96px -32px var(--shade-2);
  --shadow-card:0 1px 2px var(--shade-ink-1),0 14px 32px -14px var(--shade-ink-2);
  --shadow-button:inset 0 1px 0 var(--sheen),0 10px 28px -10px var(--glow-violet);
  --shadow-core:0 0 0 4px var(--accent-tint-2),0 0 44px var(--glow-violet),0 28px 56px -18px var(--shade-2);
  --radius:6px;
  --radius-sm:4px;
  --radius-round:50%;
  --radius-pill:999px;
  --container:1120px;
  --reading:800px;
  --header-container:1280px;
  --gutter:32px;
  --header-height:72px;
  --font-display:"Inter","Noto Sans SC","PingFang SC","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;
  --weight-title:400;
  --weight-medium:500;
  --weight-bold:600;
  --ease:200ms ease;
  --reveal-duration:520ms;
}
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { background:var(--bg); color:var(--text); scroll-behavior:smooth; scroll-padding-top:24px; }
html.nav-open { overflow:hidden; }
body {
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main,section,article,aside,nav,header,footer,div { min-width:0; }
img { display:block; max-width:100%; height:auto; }
svg { display:block; flex-shrink:0; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { color:inherit; background:var(--clear); border:0; cursor:pointer; }
button:disabled { cursor:not-allowed; }
input,select,textarea { max-width:100%; }
button,a,input,summary { -webkit-tap-highlight-color:var(--accent-tint-2); }
:focus-visible { outline:2px solid var(--accent-soft); outline-offset:3px; border-radius:var(--radius-sm); }
[hidden] { display:none !important; }
::selection { background:var(--accent-dark); color:var(--surface-light); }
h1,h2,h3,h4 {
  font-family:var(--font-display); font-weight:var(--weight-title);
  line-height:1.25; letter-spacing:normal; text-wrap:balance;
}
h1 { font-size:clamp(34px,3.6vw,48px); }
h2 { font-size:clamp(28px,3vw,36px); }
h3 { font-size:24px; }
h4 { font-size:19px; }
strong,b { font-weight:var(--weight-bold); }
code,kbd,pre,samp { font-family:var(--font-mono); }
code { font-size:.88em; overflow-wrap:anywhere; }
pre { max-width:100%; overflow-x:auto; padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text); font-size:13px; line-height:1.8; }
pre code { font-size:inherit; white-space:pre; overflow-wrap:normal; word-break:normal; }
ul,ol { padding-left:1.4em; }
li+li { margin-top:.3em; }
hr { border:0; border-top:1px solid var(--line-light); margin-block:32px; }
.wrap { width:100%; max-width:calc(var(--container) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.reading { max-width:calc(var(--reading) + var(--gutter) * 2); }
.section { padding-top:96px; padding-bottom:96px; }
.section-head { max-width:720px; margin-bottom:40px; }
.section-head p { margin-top:16px; color:var(--ink-muted); }
.light-section { background:var(--bg-panel-2); color:var(--ink); }
.dark-section { background:var(--bg); color:var(--text); }
.dark-section .section-head p { color:var(--text-muted); }
.nowrap { white-space:nowrap; }
.muted { color:var(--text-muted); }
.light-section .muted,.card .muted { color:var(--ink-muted); }
.grad-text { background:var(--grad-text-dark); color:var(--clear); -webkit-background-clip:text; background-clip:text; }
.grad-text-light { background:var(--grad-text-light); color:var(--clear); -webkit-background-clip:text; background-clip:text; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ico { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pf { fill:currentColor; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:10px 22px; border:1px solid var(--clear); border-radius:var(--radius);
  font-size:15.5px; font-weight:var(--weight-medium); line-height:1.5;
  text-align:center; transition:transform var(--ease),box-shadow var(--ease);
}
.btn svg { width:17px; height:17px; }
.btn:hover { transform:translateY(-1px); }
.btn:active,.btn.is-pressed { transform:translateY(1px); box-shadow:none; }
.btn-primary { background:var(--grad-accent); color:var(--surface-light); box-shadow:var(--shadow-button); }
.btn-ghost { background:var(--bg-panel); color:var(--text); border-color:var(--border); }
.btn-light { background:var(--surface-light); color:var(--accent-dark); border-color:var(--line-light); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--line-light); color:var(--ink-muted); border-color:var(--line-light); box-shadow:none; transform:none; cursor:not-allowed; }
.btn[aria-disabled="true"] { pointer-events:none; }
.btn.is-hover { transform:translateY(-1px); box-shadow:var(--shadow-core); }
.btn.is-focus { outline:2px solid var(--accent-soft); outline-offset:3px; }
.cta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px; }
.text-link { display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-size:15px; font-weight:var(--weight-medium); color:var(--accent-dark); }
.text-link svg { width:16px; height:16px; }
.dark-section .text-link { color:var(--accent-soft); }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.card,.panel { min-width:0; padding:28px; background:var(--surface-light); color:var(--ink); border:1px solid var(--line-light); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.panel-dark { background:var(--bg-panel); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-window); }
.card p { margin-top:12px; color:var(--ink-muted); }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.prose { min-width:0; overflow-wrap:break-word; }
.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote { margin-block:20px; }
.prose h2 { margin-top:64px; margin-bottom:24px; scroll-margin-top:32px; }
.prose h3 { margin-top:36px; margin-bottom:16px; scroll-margin-top:32px; }
.prose a:not(.btn) { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
.dark-section .prose a:not(.btn) { color:var(--accent-soft); }
.prose :not(pre)>code { padding:2px 5px; background:var(--accent-tint); color:var(--accent-dark); border-radius:var(--radius-sm); }
.dark-section .prose :not(pre)>code { background:var(--bg-panel); color:var(--accent-soft); }
.prose li { padding-left:4px; }
.prose> :first-child { margin-top:0; }
.reveal { opacity:1; transform:none; }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(14px); }
.reveal-ready .reveal { transition:opacity var(--reveal-duration) ease,transform var(--reveal-duration) ease; }
.reveal-ready .reveal.shown { opacity:1; transform:none; }

/* 独立页头版心，导航与工具区互不挤压。 */
#site-header { position:relative; z-index:100; background:var(--bg); color:var(--text); }
.topbar {
  position:relative; z-index:102; width:100%;
  max-width:min(100%,calc(var(--header-container) + var(--gutter) * 2));
  min-height:var(--header-height); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:44px;
}
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; font-size:17px; font-weight:var(--weight-medium); color:var(--text); }
.brand img { width:30px; height:30px; flex-shrink:0; }
.desktop-nav { min-width:0; }
.desktop-nav ul { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.desktop-nav li { margin:0; }
.nav-link { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 12px; border-radius:var(--radius); color:var(--text-muted); font-size:14.5px; white-space:nowrap; }
.nav-link svg { width:16px; height:16px; }
.nav-link:hover,.nav-link[aria-current="page"] { color:var(--text); }
.nav-link[aria-current="page"] svg { color:var(--accent-soft); }
.nav-link[aria-current="page"]::after { content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:var(--radius-sm); background:var(--grad-accent); }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.language-picker { position:relative; }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text-muted); font-size:13.5px; white-space:nowrap; }
.lang svg { width:15px; height:15px; }
.lang:hover { color:var(--text); }
.lang-short { display:none; }
.language-menu { position:absolute; z-index:105; top:calc(100% + 10px); right:0; width:196px; padding:8px; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-window); }
.language-menu a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; border-radius:var(--radius); font-size:14px; }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--border); color:var(--text); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text); }
.menu-veil { position:fixed; z-index:100; inset:var(--header-height) 0 0; width:100%; background:var(--veil); color:var(--text); }
.mobile-drawer { position:absolute; z-index:104; top:100%; left:0; right:0; max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; padding:16px var(--gutter) 24px; background:var(--bg-panel); color:var(--text); border-bottom:1px solid var(--border); }
.mobile-drawer ul { margin:0; padding:0; list-style:none; }
.mobile-drawer li { margin:0; }
.mobile-drawer a { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px; border-radius:var(--radius); }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--border); color:var(--text); }
.drawer-label { padding:20px 12px 8px; font-size:13px; color:var(--text-muted); }
.site-footer { background:var(--bg); color:var(--text); border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1.3fr .8fr; gap:48px; padding-top:72px; padding-bottom:56px; }
.footer-brand p { max-width:290px; margin-top:20px; font-size:14px; color:var(--text-muted); }
.footer-heading { margin-bottom:16px; font-size:14px; font-weight:var(--weight-medium); }
.footer-links { display:grid; gap:10px; list-style:none; margin:0; padding:0; font-size:14px; color:var(--text-muted); }
.footer-links li { margin:0; }
.footer-links a { display:inline-block; padding-block:3px; overflow-wrap:anywhere; }
.footer-links a:hover { color:var(--text); text-decoration:underline; text-underline-offset:4px; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:24px; padding-bottom:88px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px; }

@media (max-width:1279px) {
  .topbar { gap:24px; }
  .desktop-nav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
}
@media (min-width:1280px) {
  .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,4.5vw,30px); }
}
@media (max-width:640px) {
  :root { --gutter:16px; --header-height:72px; }
  .topbar { gap:10px; }
  .brand { font-size:16px; gap:8px; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .lang { padding-inline:10px; }
  .header-tools { gap:8px; margin-left:auto; }
  .section { padding-top:64px; padding-bottom:64px; }
  .card-grid { grid-template-columns:minmax(0,1fr); }
  .card,.panel { padding:22px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); padding-top:56px; gap:32px; }
  .footer-bottom { padding-bottom:88px; }
  .tilt,[class*="tilt-"] { transform:none !important; }
  pre { padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal-ready .reveal:not(.shown) { opacity:1; transform:none; }
}