:root {
  --bg:#FEFEFE;
  --bg-soft:#FAFAFB;
  --bg-panel:#F5F6F7;
  --bg-panel-2:#EEF0F2;
  --bg-glass:rgba(254,254,254,.86);
  --surface:#FFFFFF;
  --border:#E4E6EA;
  --border-strong:#D3D6DB;
  --accent:#2264FF;
  --accent-dark:#0F45C8;
  --accent-soft:rgba(34,100,255,.08);
  --on-accent:#FFFFFF;
  --text:#0A0A0B;
  --text-muted:#5B5F66;
  --text-faint:#8A8E95;
  --success:#1F9D57;
  --warn:#C98A0B;
  --error:#D93A2B;
  --ink:#0B0C0E;
  --ink-2:#15171A;
  --ink-line:#26292E;
  --ink-text:#E8EAED;
  --ink-muted:#A4A9B1;
  --grid-line:#EEF0F2;
  --grid-horizon:#E4E6EA;
  --mask-show:#FFFFFF;
  --mask-hide:#000000;
  --clear:transparent;
  --veil:rgba(11,12,14,.32);
  --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;
  --r-control:6px;
  --r-card:10px;
  --r-float:8px;
  --r-pill:999px;
  --r-dot:50%;
  --r-check:4px;
  --r-icon:5px;
  --wrap:1360px;
  --reading:848px;
  --gutter:24px;
  --header-height:65px;
  --shadow-xs:0 1px 2px rgba(10,10,11,.05);
  --shadow-btn:0 1px 2px rgba(10,10,11,.14),inset 0 1px 0 rgba(255,255,255,.16);
  --shadow-knob:0 1px 2px rgba(10,10,11,.22);
  --shadow-window:0 1px 2px rgba(10,10,11,.04),0 4px 10px -4px rgba(10,10,11,.08),0 16px 30px -18px rgba(10,10,11,.16);
  --shadow-float:0 1px 1px rgba(11,12,14,.20),0 4px 8px -2px rgba(11,12,14,.18),0 14px 26px -8px rgba(11,12,14,.28),0 30px 50px -22px rgba(11,12,14,.30);
  --shadow-card-hover:0 2px 4px rgba(10,10,11,.04),0 20px 40px -20px rgba(10,10,11,.24);
  --shadow-band:0 30px 60px -30px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px rgba(34,100,255,.28);
  --ease-ui:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
html.nav-open { overflow:hidden; }
body { margin: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; }
a { color:var(--accent-dark); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
button,input,select,textarea { font:inherit; color:inherit; }
button,summary { cursor:pointer; }
button { border:0; }
button:disabled,[aria-disabled="true"] { cursor:not-allowed; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent); color:var(--on-accent); }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text); text-wrap:balance; overflow-wrap:break-word; }
h1 { margin:0 0 24px; font-size:clamp(34px,3.4vw,48px); line-height:1.15; font-weight:900; letter-spacing:-.02em; }
h2 { margin:0 0 24px; font-size:clamp(26px,2.5vw,36px); line-height:1.25; font-weight:800; letter-spacing:-.02em; }
h3 { margin:0 0 12px; font-size:22px; line-height:1.4; font-weight:800; }
p { margin:0 0 20px; }
ul,ol { padding-left:1.5em; }
figure { margin:0; }
code,kbd,pre { font-family:var(--font-mono); }
code { font-size:.9em; overflow-wrap:anywhere; }
:not(pre)>code { padding:2px 5px; background:var(--bg-panel-2); color:var(--text); border-radius:var(--r-check); }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:20px; background:var(--ink); color:var(--ink-text); border:1px solid var(--ink-line); border-radius:var(--r-card); line-height:1.7; }
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
.wrap { width:100%; max-width:var(--wrap); padding-inline:var(--gutter); margin-inline:auto; }
.reading { max-width:var(--reading); }
.section { padding-top:88px; padding-bottom:88px; }
.section--soft { background:var(--bg-panel); color:var(--text); }
.section__intro { max-width:720px; margin-bottom:40px; }
.muted { color:var(--text-muted); }
.mono { font-family:var(--font-mono); }
.nowrap { white-space:nowrap; }
.flow>*+* { margin-top:24px; }
.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>*,.entry-cards>*,.footer-grid>*,.feature-layout>* { min-width:0; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:var(--gutter); top:12px; z-index:100; padding:10px 16px; transform:translateY(-180%); background:var(--surface); color:var(--text); border-radius:var(--r-control); }
.skip-link:focus { transform:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 22px; border:1px solid var(--clear); border-radius:var(--r-control); font-size:15px; font-weight:600; line-height:1.3; text-align:center; text-decoration:none; transition:background-color .15s ease,border-color .15s ease; }
.btn:hover { text-decoration:none; }
.btn svg { width:17px; height:17px; flex-shrink:0; }
.btn--primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-btn); }
.btn--primary:hover,.btn--primary.is-hover { background:var(--accent-dark); color:var(--on-accent); }
.btn--ghost { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn--ghost:hover,.btn--ghost.is-hover { background:var(--bg-panel); color:var(--text); }
.btn--text { background:var(--clear); color:var(--accent-dark); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border); box-shadow:none; }
.btn.is-focus { box-shadow:var(--focus-ring); }
.btn__arrow { transition:transform .2s ease; }
.btn--ghost:hover .btn__arrow { transform:translateX(3px); }
.card,.panel { min-width:0; padding:28px; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card); }
.panel--second { background:var(--bg-panel-2); color:var(--text); }
.card__title { margin-bottom:12px; }
.card__link { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.prose { min-width:0; font-size:16px; line-height:1.9; overflow-wrap:break-word; }
.prose h2 { margin-top:64px; scroll-margin-top:96px; }
.prose h3 { margin-top:36px; scroll-margin-top:96px; }
.prose a { text-decoration:underline; text-underline-offset:3px; }
.prose li+li { margin-top:10px; }
.prose> :last-child { margin-bottom:0; }
.decorated,.hero { position:relative; overflow-x:clip; }
.reveal { opacity:1; transform:none; }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(16px); }
.reveal-ready .reveal { transition:opacity .55s ease,transform .55s var(--ease-ui); }

/* 页头独立版心，不复用阅读版心。 */
#site-header,.topbar { position:sticky; top:0; z-index:40; }
.topbar { background:var(--bg-glass); color:var(--text); border-bottom:1px solid var(--border); -webkit-backdrop-filter:saturate(1.2) blur(12px); backdrop-filter:saturate(1.2) blur(12px); }
#site-header>.topbar { position:relative; }
.topbar__in { position:relative; width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2)); margin-inline:auto; padding-inline:var(--gutter); height:64px; display:flex; align-items:center; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; margin-right:auto; flex-shrink:0; color:var(--text); font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.01em; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand__mark { width:30px; height:30px; flex-shrink:0; }
.mainnav { min-width:0; }
.mainnav ul { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.mainnav a { display:block; padding:7px 13px; border-radius:var(--r-pill); font-size:14px; font-weight:500; line-height:20px; color:var(--text-muted); white-space:nowrap; text-decoration:none; transition:color .15s ease,background-color .15s ease; }
.mainnav a:hover { background:var(--bg-panel); color:var(--text); }
.mainnav a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.topbar__tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.topbar__sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.language { position:relative; }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 10px 0 9px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap; list-style:none; }
.lang::-webkit-details-marker { display:none; }
.lang:hover { border-color:var(--border-strong); }
.lang svg { width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }
.lang__caret { font-size:10px; color:var(--text-muted); }
.lang__short { display:none; }
.language__list { position:absolute; right:0; top:calc(100% + 10px); width:190px; padding:6px; margin:0; list-style:none; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-float); box-shadow:var(--shadow-float); z-index:45; }
.language__list a { display:flex; align-items:center; min-height:44px; padding:9px 12px; color:var(--text); border-radius:var(--r-control); text-decoration:none; }
.language__list a:hover { background:var(--bg-panel); color:var(--text); }
.language__list a[aria-current="true"] { background:var(--accent-soft); 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-control); background:var(--surface); color:var(--text); }
.menu-toggle svg { width:20px; height:20px; }
.mobile-nav { display:none; }
.nav-veil { position:fixed; inset:65px 0 0; z-index:-1; background:var(--veil); color:var(--text); }
.site-footer { padding-top:64px; padding-bottom:100px; border-top:1px solid var(--border); background:var(--bg-panel); color:var(--text); }
.footer-grid { display:grid; grid-template-columns:1.2fr .9fr 1.4fr .7fr; gap:40px; }
.footer-grid p { margin-top:18px; max-width:320px; color:var(--text-muted); font-size:14px; }
.footer-title { margin:0 0 18px; font-size:14px; font-weight:700; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-links a { color:var(--text-muted); font-size:14px; }
.footer-links a:hover { color:var(--accent-dark); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; }
.footer-bottom p { margin:0 auto 0 0; }
.footer-bottom a { color:var(--text-muted); }

@media (max-width:1180px) {
  .mainnav a { padding:7px 9px; }
  .topbar__in { gap:14px; }
}
@media (max-width:1100px) {
  .mainnav { display:none; }
  .topbar__tools { margin-left:auto; }
  .topbar__sep { display:none; }
  .menu-toggle { display:inline-flex; }
  .mobile-nav:not([hidden]) { display:block; position:absolute; top:64px; inset-inline:0; padding:16px var(--gutter) 24px; max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; background:var(--surface); color:var(--text); border-bottom:1px solid var(--border); z-index:2; }
  .mobile-nav ul { list-style:none; padding:0; margin:0; }
  .mobile-nav a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 14px; color:var(--text-muted); border-radius:var(--r-control); text-decoration:none; }
  .mobile-nav a:hover { background:var(--bg-panel); color:var(--text); }
  .mobile-nav a[aria-current] { background:var(--accent-soft); color:var(--accent-dark); }
  .mobile-nav__languages { padding-top:16px !important; margin-top:16px !important; border-top:1px solid var(--border); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-mobile { position:relative; }
  .preview-mobile>summary { list-style:none; }
  .preview-mobile>summary::-webkit-details-marker { display:none; }
  .preview-mobile nav { position:absolute; right:0; top:54px; width:min(320px,calc(100vw - var(--gutter) * 2)); max-height:75dvh; overflow-y:auto; padding:12px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-float); box-shadow:var(--shadow-float); }
  .preview-mobile nav a { display:flex; min-height:44px; align-items:center; padding:10px 12px; color:var(--text); }
}
@media (min-width:1101px) {
  .preview-mobile { display:none; }
  .nav-veil { display:none; }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,4vw,30px); }
  .grid--three { grid-template-columns:1fr; }
  .section { padding-top:56px; padding-bottom:56px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .grid--two,.footer-grid { grid-template-columns:1fr; }
  .card,.panel { padding:22px; }
  .tilt,[data-tilt] { transform:none !important; }
  .topbar__in { gap:8px; }
  .topbar__tools { margin-left:auto; gap:6px; }
  .brand { gap:7px; font-size:14px; }
  .brand__mark { width:26px; height:26px; }
  .lang__full { display:none; }
  .lang__short { display:inline; }
  .lang { min-height:44px; }
  .lang svg { display:none; }
  .footer-grid { gap:32px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal-ready .reveal:not(.shown) { opacity:1; transform:none; }
}