:root {
  --bg:#F6FAFD;
  --panel:#FFFFFF;
  --panel-2:#EEF3F8;
  --border:#DFE6EE;
  --border-soft:#E7ECF2;
  --hair:#EDF1F6;
  --row-line:#F2F5F9;
  --accent:#803FDA;
  --accent-dark:#5E28B0;
  --accent-wash:#EBE0FA;
  --accent-wash-soft:#F3EDFC;
  --text:#16141F;
  --muted:#5B6170;
  --faint:#8D94A2;
  --faint-2:#B4BAC5;
  --success:#1F9D6B;
  --warn:#E58A1F;
  --error:#D6453D;
  --on-accent:#FFFFFF;
  --chrome-top:#FBFCFE;
  --metal-1:#F1F3F7;
  --metal-2:#D6DCE3;
  --metal-3:#BCC3CD;
  --metal-groove:#AEB6C1;
  --ink:#16141F;
  --ink-2:#2C2936;
  --switch-off:#D3D9E1;
  --cloud:#FFFFFF;
  --clear:transparent;
  --warn-halo:rgba(229,138,31,.34);
  --bezel-edge:rgba(255,255,255,.09);
  --contact-win:rgba(32,40,62,.30);
  --contact-phone:rgba(22,20,31,.48);
  --veil:rgba(22,20,31,.24);

  --sh-btn-primary:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -10px rgba(128,63,218,.58),0 3px 8px -2px rgba(94,40,176,.26);
  --sh-btn-primary-hover:inset 0 1px 0 rgba(255,255,255,.22),0 16px 30px -10px rgba(128,63,218,.62),0 4px 10px -2px rgba(94,40,176,.30);
  --sh-btn-ghost:0 10px 22px -12px rgba(22,20,31,.24),0 1px 2px rgba(22,20,31,.06);
  --sh-badge:0 6px 16px -10px rgba(22,20,31,.20);
  --sh-window:0 60px 100px -36px rgba(36,48,78,.30),0 26px 44px -26px rgba(36,48,78,.20),0 0 0 1px rgba(22,20,31,.035);
  --sh-phone:0 46px 70px -22px rgba(22,20,31,.42),0 16px 28px -12px rgba(22,20,31,.30);
  --sh-fab:0 10px 18px -8px rgba(94,40,176,.60),0 2px 4px rgba(94,40,176,.30);
  --sh-seg:0 2px 5px -1px rgba(94,40,176,.40);
  --sh-knob:0 1px 2px rgba(22,20,31,.28);
  --sh-peek:0 -1px 0 rgba(22,20,31,.02),0 -16px 40px -30px rgba(36,48,78,.22);
  --sh-card:0 32px 64px -32px rgba(36,48,78,.22),0 8px 16px -10px rgba(22,20,31,.13);

  --r-pill:999px;
  --r-circle:50%;
  --r-window:14px;
  --r-phone:32px;
  --r-screen:26px;
  --r-card:28px;
  --r-sm:6px;
  --r-md:12px;
  --r-highlight:.12em;
  --r-base:3px 3px 14px 14px / 3px 3px 10px 10px;
  --r-groove:0 0 6px 6px;
  --r-phone-key:0 2px 2px 0;

  --font-display:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --weight-body:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;
  --size-body:16px;
  --size-h1:clamp(34px,3.4vw,48px);
  --size-h2:clamp(26px,3vw,40px);
  --size-h3:22px;
  --gutter:56px;
  --content-width:1280px;
  --reading-width:800px;
  --nav-h:72px;
  --phone-clear:96px;
  --section-space:112px;
  --ease-out:cubic-bezier(.2,.75,.2,1);
  --duration:.2s;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:var(--weight-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html.nav-open { overflow:hidden; }
[hidden] { display:none !important; }
a { color:var(--accent-dark); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:.22em; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button,select { max-width:100%; }
img,svg,video { max-width:100%; }
img,svg { display:block; }
img { height:auto; }
svg { flex-shrink:0; }
button svg,a svg { flex-shrink:0; }
button { color:var(--text); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }
::selection { background:var(--accent-wash); color:var(--text); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-display); line-height:1.25; text-wrap:balance; }
h1 { font-size:var(--size-h1); line-height:1.17; letter-spacing:-.015em; }
h2 { font-size:var(--size-h2); letter-spacing:-.015em; }
h3 { font-size:var(--size-h3); }
h1,h2,h3,p,ul,ol,figure { margin-top:0; }
p { margin-bottom:1.25em; }
h2,h3 { margin-bottom:.7em; }
small,.small { font-size:13px; }
strong { font-weight:var(--weight-bold); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; font-size:.9em; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:24px;
  background:var(--panel-2);
  color:var(--text);
  border-radius:var(--r-md);
  line-height:1.7;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
hr { border:0; border-top:1px solid var(--border); margin-block:40px; }
.wrap {
  width:100%;
  max-width:calc(var(--content-width) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:calc(var(--reading-width) + var(--gutter) * 2); }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section-panel { background:var(--panel-2); color:var(--text); }
.section-head { margin-bottom:40px; max-width:760px; }
.center { text-align:center; margin-inline:auto; }
.nowrap { white-space:nowrap; }
.muted { color:var(--muted); }
.mono { font-family:var(--font-mono); }
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid > *, .hero-grid > *, .footer-grid > *, .feature-tabs > *, .tabs > * { min-width:0; }
.stack > * + * { margin-top:24px; }
.flow > * + * { margin-top:1.25rem; }
.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:absolute; top:8px; left:16px; transform:translateY(-160%); z-index:100;
  padding:10px 18px; border-radius:var(--r-pill); background:var(--panel); color:var(--accent-dark);
}
.skip-link:focus { transform:none; }
.card {
  padding:32px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border-soft);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
}
.panel { padding:32px; background:var(--panel-2); color:var(--text); border-radius:var(--r-card); }
.card > :last-child,.panel > :last-child { margin-bottom:0; }
.eyebrow { font-size:13px; font-weight:var(--weight-bold); color:var(--accent-dark); margin-bottom:14px; }

.cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:12px 28px;
  border:1px solid var(--clear); border-radius:var(--r-pill);
  font:var(--weight-bold) 16px/1.3 var(--font-body);
  text-align:center; text-decoration:none;
  transition:transform var(--duration) var(--ease-out),box-shadow var(--duration),background-color var(--duration);
}
.btn svg { width:18px; height:18px; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--sh-btn-primary); }
.btn-primary:hover,.btn-primary.is-hover {
  background:var(--accent-dark); color:var(--on-accent);
  box-shadow:var(--sh-btn-primary-hover); transform:translateY(-1px);
}
.btn-ghost {
  background:var(--panel); color:var(--text); border-color:var(--border);
  box-shadow:var(--sh-btn-ghost); padding-inline:26px 24px;
}
.btn-ghost:hover,.btn-ghost.is-hover { transform:translateY(-1px); border-color:var(--faint-2); }
.btn:active,.btn.is-active { transform:translateY(1px); box-shadow:var(--sh-knob); }
.btn:disabled,.btn[aria-disabled="true"] {
  background:var(--panel-2); color:var(--muted); border-color:var(--border);
  box-shadow:none; cursor:not-allowed; transform:none;
}
.btn-small { min-height:44px; padding:10px 20px; font-size:14px; }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:3px; }

.topbar,#site-header { position:relative; z-index:30; min-height:var(--nav-h); }
.header-wrap {
  width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2));
  min-height:var(--nav-h); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:20px;
}
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); flex-shrink:0; }
.brand:hover { text-decoration:none; }
.brand-mark { width:30px; height:30px; flex-shrink:0; }
.brand-name { font:var(--weight-display) 18px/1.4 var(--font-display); letter-spacing:-.01em; }
.nav { display:flex; align-items:center; min-width:0; margin-left:auto; }
.nav-list { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav-link {
  display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:8px 13px;
  border-radius:var(--r-pill); color:var(--muted);
  font-size:14.5px; font-weight:var(--weight-semibold); white-space:nowrap;
  transition:color var(--duration),background-color var(--duration);
}
.nav-link svg { width:16px; height:16px; }
.nav-link:hover { color:var(--text); background:var(--panel-2); text-decoration:none; }
.nav-link[aria-current="page"] { color:var(--accent-dark); background:var(--accent-wash-soft); }
.header-tools { display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; z-index:3; }
.language-picker { position:relative; }
.lang {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:10px 15px 10px 13px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--panel); color:var(--text); box-shadow:var(--sh-btn-ghost);
  font:var(--weight-semibold) 13.5px/1.2 var(--font-body); white-space:nowrap;
}
.lang svg { width:15px; height:15px; color:var(--muted); }
.caret { color:var(--muted); font-size:11px; }
.lang-short { display:none; }
.language-menu {
  position:absolute; top:calc(100% + 12px); right:0; z-index:5; width:190px;
  padding:8px; list-style:none; margin:0;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-card);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:9px 12px; color:var(--text); border-radius:var(--r-sm); }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--accent-wash-soft); color:var(--accent-dark); text-decoration:none; }
.menu-toggle {
  display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  padding:10px; border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--panel); color:var(--text);
}
.menu-toggle svg { width:20px; height:20px; }
.mobile-drawer {
  position:absolute; z-index:2; top:var(--nav-h); left:0; right:0;
  max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain;
  padding:16px var(--gutter) 28px;
  background:var(--panel); color:var(--text); border-top:1px solid var(--border);
  box-shadow:var(--sh-card);
}
.mobile-drawer ul { list-style:none; margin:0; padding:0; }
.mobile-drawer a { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 16px; color:var(--text); border-radius:var(--r-md); }
.mobile-drawer a svg { width:18px; height:18px; }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--accent-wash-soft); color:var(--accent-dark); text-decoration:none; }
.drawer-label { margin:20px 16px 8px; font-size:13px; color:var(--muted); }
.nav-veil { position:fixed; z-index:0; inset:var(--nav-h) 0 0; background:var(--veil); color:var(--text); border:0; width:100%; }
.preview-menu { display:none; }
.preview-menu summary { list-style:none; cursor:pointer; }
.preview-menu summary::-webkit-details-marker { display:none; }
.preview-language summary { list-style:none; cursor:pointer; }
.preview-language summary::-webkit-details-marker { display:none; }

.site-footer { position:relative; padding-top:72px; padding-bottom:32px; background:var(--panel-2); color:var(--text); }
.footer-grid { display:grid; grid-template-columns:1.25fr .8fr 1.3fr .7fr; gap:48px; }
.footer-brand p { max-width:28em; color:var(--muted); font-size:14px; margin-top:20px; }
.footer-title { font-size:14px; font-weight:var(--weight-bold); margin-bottom:18px; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-links a { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.footer-links a:hover { color:var(--accent-dark); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 24px; margin-top:56px; padding-top:24px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.footer-legal { display:flex; flex-wrap:wrap; gap:18px; }
.footer-legal a { color:var(--muted); }

.prose { min-width:0; overflow-wrap:break-word; }
.prose h2 { margin-top:2.3em; scroll-margin-top:28px; }
.prose h3 { margin-top:1.7em; }
.prose a { text-decoration:underline; text-underline-offset:.2em; }
.prose li + li { margin-top:.5em; }
.prose blockquote { margin-inline:0; }
.prose > :first-child { margin-top:0; }
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px); }
.reveal { transition:opacity .65s var(--ease-out),transform .65s var(--ease-out); }
.reveal.shown { opacity:1; transform:none; }
.decorated,.hero,.sky { overflow-x:clip; }
.tilt { transform:rotate(-.45deg); }

@media (max-width:1280px) {
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1279px) {
  .nav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .preview-menu { display:block; }
  .preview-menu .mobile-drawer { z-index:4; }
}
@media (min-width:1280px) {
  .mobile-drawer,.nav-veil { display:none !important; }
}
@media (max-width:768px) {
  :root { --gutter:24px; --section-space:72px; --size-h1:clamp(24px,5vw,30px); --size-h2:clamp(24px,5vw,32px); }
  .grid-3,.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .header-wrap { gap:12px; }
}
@media (max-width:640px) {
  :root { --gutter:20px; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:minmax(0,1fr); }
  .card,.panel { padding:24px; }
  .tilt,[data-tilt] { transform:none; }
  .brand-name { font-size:16px; }
  .brand-mark { width:26px; height:26px; }
  .header-tools { gap:8px; margin-left:auto; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .lang { padding-inline:11px; min-height:44px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  .footer-bottom { margin-top:36px; }
  pre { padding:18px; }
}
@media (max-width:359px) {
  :root { --gutter:16px; }
  .brand-name { font-size:14px; }
  .header-wrap { gap:8px; }
  .brand { gap:7px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal,html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none; transition:none; }
  .btn,.nav-link { transition:none; }
}