:root {
  --c-bg:#F6FBFD;
  --c-panel:#FFFFFF;
  --c-panel-2:#EDF3F9;
  --c-wash:#EAF1FA;
  --c-wash-0:rgba(234,241,250,0);
  --c-border:#DFE6EF;
  --c-border-soft:#E9EEF5;
  --c-line:#C3CCD9;
  --c-accent:#3F55D6;
  --c-accent-dark:#2A3AA8;
  --c-lilac:#A877E8;
  --c-accent-25:#F7F8FE;
  --c-accent-50:#F1F3FD;
  --c-accent-100:#E3E7FB;
  --c-accent-200:#C9D0F6;
  --c-neutral-50:#F6F9FC;
  --c-text:#0D1220;
  --c-muted:#5B6478;
  --c-faint:#8C95A8;
  --c-success:#2F9E6B;
  --c-warn:#C98A12;
  --c-error:#D9485B;
  --c-on-accent:#FFFFFF;
  --c-code-bg:#F4F7FA;
  --c-nav-bg:rgba(255,255,255,.88);
  --c-clear:transparent;
  --c-success-ink:#216B49;
  --c-warn-ink:#79520B;
  --c-error-ink:#AA2C40;
  --c-veil:rgba(13,18,32,.25);

  --grad-accent:linear-gradient(100deg,var(--c-accent) 0%,var(--c-lilac) 100%);
  --grad-wash:linear-gradient(180deg,var(--c-wash) 0%,var(--c-wash-0) 100%);
  --grad-chapter:linear-gradient(180deg,var(--c-accent-25) 0%,var(--c-panel) 100%);
  --shadow-float:0 24px 64px rgba(40,60,110,.10);
  --shadow-near:0 2px 6px rgba(40,60,110,.04);
  --shadow-plate:0 12px 32px rgba(40,60,110,.06);
  --shadow-soft:0 1px 2px rgba(40,60,110,.05),0 6px 18px rgba(40,60,110,.05);
  --shadow-btn:0 8px 20px rgba(63,85,214,.24),inset 0 1px 0 rgba(255,255,255,.24);
  --shadow-btn-hover:0 12px 28px rgba(63,85,214,.30),inset 0 1px 0 rgba(255,255,255,.24);
  --ring-focus:0 0 0 3px rgba(63,85,214,.26);

  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-btn:12px;
  --r-sm:10px;
  --r-xs:6px;
  --r-icon:8px;
  --r-check:4px;
  --r-pill:999px;
  --r-round:50%;

  --font-display:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --weight-title:400;
  --weight-medium:500;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lead:20px;
  --text-h1:clamp(34px,2.2vw + 12px,44px);
  --text-h2:clamp(25px,2.4vw,34px);
  --text-h3:22px;

  --nav-h:68px;
  --peek:40px;
  --container:1312px;
  --reading:820px;
  --gutter:64px;
  --section-space:96px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --duration-fast:.2s;
  --duration-reveal:.65s;
}
*,*::before,*::after { box-sizing:border-box }
html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
html.nav-open { overflow:hidden }
body {
  margin:0;
  position:relative;
  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;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:640px;
  background:var(--grad-wash);
  color:var(--c-text);
  pointer-events:none;
  z-index:0;
}
main,footer { position:relative }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg { vertical-align:middle; max-width:100% }
img { height:auto }
button svg,a svg,.badge-dot { flex-shrink:0 }
[hidden] { display:none !important }
h1,h2,h3,h4,p,figure,blockquote { margin:0 }
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:var(--weight-title);
  line-height:1.25;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1 { font-size:var(--text-h1) }
h2 { font-size:var(--text-h2) }
h3 { font-size:var(--text-h3) }
ul,ol { padding-left:1.5em }
pre,code,kbd,samp { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-md);
  background:var(--c-code-bg);
  color:var(--c-text);
  font-size:13px;
  line-height:1.8;
  tab-size:2;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre }
:focus-visible { outline:2px solid var(--c-accent); outline-offset:4px }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:none; box-shadow:var(--ring-focus) }
::selection { background:var(--c-accent-100); color:var(--c-text) }
.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) }
.sec { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section-white { background:var(--c-panel); color:var(--c-text) }
.section-band { background:var(--c-panel-2); color:var(--c-text) }
.section-head { max-width:760px; margin-bottom:36px }
.section-head p { margin-top:16px; color:var(--c-muted) }
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.grid-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.grid-two > *,.grid-three > * { min-width:0 }
.stack > * + * { margin-top:20px }
.muted { color:var(--c-muted) }
.small { font-size:var(--text-sm) }
.keep { white-space:nowrap }
.text-link { color:var(--c-accent-dark); text-decoration:underline; text-underline-offset:4px }
.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;
  top:8px;
  left:16px;
  z-index:100;
  padding:10px 16px;
  border-radius:var(--r-sm);
  background:var(--c-panel);
  color:var(--c-text);
  transform:translateY(-160%);
}
.skip-link:focus { transform:none }
.panel,.card {
  min-width:0;
  padding:28px;
  background:var(--c-panel);
  color:var(--c-text);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.panel { border-radius:var(--r-xl); box-shadow:var(--shadow-float) }
.card p { margin-top:12px; color:var(--c-muted) }
.card-link { transition:transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) }
.card-link:hover { transform:translateY(-3px); box-shadow:var(--shadow-float) }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:10px 22px;
  border-radius:var(--r-btn);
  font-size:15px;
  font-weight:var(--weight-medium);
  letter-spacing:.01em;
  line-height:1.5;
  text-align:center;
  border:1px solid var(--c-clear);
  cursor:pointer;
  transition:transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast);
}
.btn svg { width:17px; height:17px; flex-shrink:0 }
.btn svg path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.btn-primary { background:var(--grad-accent); color:var(--c-on-accent); border:0; box-shadow:var(--shadow-btn) }
.btn-primary:hover,.btn-primary.is-hover { transform:translateY(-1px); box-shadow:var(--shadow-btn-hover) }
.btn-ghost { background:var(--c-panel); color:var(--c-text); border-color:var(--c-border); box-shadow:var(--shadow-soft) }
.btn-ghost:hover,.btn-ghost.is-hover { transform:translateY(-1px); border-color:var(--c-accent-200); color:var(--c-accent-dark) }
.btn:active,.btn.is-active { transform:translateY(1px); box-shadow:var(--shadow-near) }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.55; transform:none; box-shadow:none; pointer-events:none }
.btn.is-focus { box-shadow:var(--ring-focus) }
.btn-sm { min-height:38px; padding:8px 16px; font-size:14px; border-radius:var(--r-sm) }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }

#site-header { position:sticky; top:0; z-index:50 }
.topbar {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--c-nav-bg);
  color:var(--c-text);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--c-border-soft);
}
.topbar-inner {
  width:100%;
  max-width:min(100%,calc(1312px + var(--gutter) * 2));
  margin:0 auto;
  padding-inline:var(--gutter);
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; border-radius:var(--r-sm) }
.brand-mark { width:32px; height:32px; display:block; flex-shrink:0 }
.brand-name { font-family:var(--font-display); font-size:16px; font-weight:var(--weight-medium); letter-spacing:-.01em }
.mainnav { margin-left:auto; min-width:0 }
.mainnav-list {
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  gap:2px;
}
.mainnav-list > li > a,.nav-more-btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:38px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-size:14.5px;
  color:var(--c-muted);
  background:var(--c-clear);
  border:0;
  cursor:pointer;
  white-space:nowrap;
  transition:color var(--duration-fast),background-color var(--duration-fast);
}
.mainnav-list > li > a:hover,.nav-more-btn:hover,.nav-more[open] .nav-more-btn { color:var(--c-text); background:var(--c-panel-2) }
.mainnav-list a[aria-current="page"],.nav-more-btn.is-current { color:var(--c-text) }
.mainnav-list > li > a[aria-current="page"]::after,.nav-more-btn.is-current::after {
  content:""; position:absolute; left:50%; bottom:3px;
  width:18px; height:2px; margin-left:-9px;
  border-radius:var(--r-pill); background:var(--grad-accent);
}
.chev { width:12px; height:12px; flex-shrink:0; transition:transform var(--duration-fast) }
.chev path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.nav-more { position:relative; list-style:none }
.nav-more summary { list-style:none }
.nav-more summary::-webkit-details-marker { display:none }
.nav-menu,.lang-menu {
  position:absolute;
  top:calc(100% + 10px);
  padding:8px;
  background:var(--c-panel);
  color:var(--c-text);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-near),var(--shadow-float);
}
.nav-menu { left:50%; width:260px; margin-left:-130px }
.nav-menu-label { padding:6px 10px 4px; font-size:11.5px; letter-spacing:.06em; color:var(--c-muted) }
.nav-menu a,.lang-menu a { display:block; min-height:44px; padding:10px; border-radius:var(--r-sm) }
.nav-menu a:hover,.lang-menu a:hover { background:var(--c-accent-50); color:var(--c-text) }
.nav-menu-title { display:block; font-size:14px }
.nav-menu-sub { display:block; font-size:12px; color:var(--c-muted); margin-top:2px }
.nav-more[open] .chev { transform:rotate(180deg) }
.topbar-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.lang-picker { position:relative }
.lang-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:8px 12px;
  background:var(--c-clear); color:var(--c-muted);
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  font-size:13.5px; white-space:nowrap;
}
.lang-btn:hover { color:var(--c-text); border-color:var(--c-accent-200) }
.globe { width:15px; height:15px; flex-shrink:0 }
.globe circle,.globe path { fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round }
.lang-menu { right:0; width:190px }
.lang-menu a[aria-current="true"] { background:var(--c-accent-50); color:var(--c-accent-dark) }
.lang-short { display:none }
.nav-toggle {
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:10px;
  background:var(--c-panel); color:var(--c-text);
  border:1px solid var(--c-border); border-radius:var(--r-sm);
}
.nav-toggle svg { width:20px; height:20px }
.nav-toggle path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }
.mobile-drawer { display:none }
.nav-veil {
  position:fixed; inset:var(--nav-h) 0 0;
  background:var(--c-veil); color:var(--c-text);
  border:0; width:100%; z-index:0;
}
.mobile-drawer {
  position:absolute; top:var(--nav-h); left:0; right:0; z-index:2;
  background:var(--c-panel); color:var(--c-text);
  border-bottom:1px solid var(--c-border);
  padding:16px var(--gutter) 24px;
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:var(--shadow-float);
}
.mobile-drawer a { display:flex; align-items:center; min-height:46px; width:100%; padding:11px 12px; border-radius:var(--r-sm) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--c-accent-50); color:var(--c-accent-dark) }
.drawer-label { margin-top:12px; padding:12px; border-top:1px solid var(--c-border); color:var(--c-muted); font-size:12px }

.site-footer { background:var(--c-panel); color:var(--c-text); border-top:1px solid var(--c-border) }
.footer-grid { display:grid; grid-template-columns:1.35fr 1fr 1.4fr 1fr; gap:48px }
.footer-grid > * { min-width:0 }
.footer-intro { margin-top:18px; max-width:27em; color:var(--c-muted); font-size:14px }
.footer-title { font-size:14px; margin-bottom:16px; font-weight:var(--weight-medium) }
.footer-links { list-style:none; padding:0; margin:0 }
.footer-links li + li { margin-top:8px }
.footer-links a { display:inline-block; padding-block:4px; font-size:14px; color:var(--c-muted); overflow-wrap:anywhere }
.footer-links a:hover { color:var(--c-accent-dark); text-decoration:underline; text-underline-offset:4px }
.footer-bottom { margin-top:52px; padding-top:24px; border-top:1px solid var(--c-border-soft); font-size:13px; color:var(--c-muted) }

.prose { min-width:0; overflow-wrap:break-word }
.prose > * + * { margin-top:22px }
.prose h2 { margin-top:56px }
.prose h3 { margin-top:32px }
.prose p,.prose li { line-height:1.95 }
.prose a { color:var(--c-accent-dark); text-decoration:underline; text-underline-offset:4px }
.prose :not(pre) > code { padding:2px 5px; border-radius:var(--r-xs); background:var(--c-code-bg); color:var(--c-accent-dark); font-size:.88em }
.prose img { display:block; max-width:100%; height:auto; border-radius:var(--r-md) }
.prose div,.prose section { min-width:0; max-width:100% }
.reveal { opacity:1; transform:none }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(16px) }
.reveal-ready .reveal { transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease) }
.reveal.shown { opacity:1; transform:none }
.hero,.decorated { overflow-x:clip }

@media (max-width:1400px) {
  :root { --gutter:48px }
}
@media (max-width:1279px) {
  .mainnav { display:none }
  .topbar-actions { margin-left:auto }
  .nav-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) { display:block }
  .topbar-inner { gap:16px }
}
@media (max-width:900px) {
  :root { --gutter:28px; --section-space:72px }
  .grid-three { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px }
}
@media (max-width:768px) {
  :root { --text-h1:clamp(24px,4vw,30px) }
}
@media (max-width:640px) {
  :root { --gutter:20px; --section-space:56px }
  .topbar-inner { gap:10px }
  .brand { gap:8px }
  .brand-name { font-size:14px }
  .brand-mark { width:28px; height:28px }
  .topbar-actions { margin-left:auto; gap:8px }
  .topbar-actions > .btn { display:none }
  .lang-full { display:none }
  .lang-short { display:inline }
  .lang-btn { min-height:44px; padding-inline:10px }
  .lang-btn .globe { display:none }
  .grid-two,.grid-three { grid-template-columns:minmax(0,1fr) }
  .panel,.card { padding:22px }
  .tilt,[data-tilt] { transform:none !important }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:30px }
  .footer-bottom { margin-top:32px }
}
@media (max-width:360px) {
  :root { --gutter:16px }
  .brand-name { font-size:13px }
  .topbar-actions { gap:6px }
}
@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 }
}