:root {
  --bg:#FFFFFF;
  --panel:#F5F9FC;
  --panel-2:#EAF2F8;
  --line:#E3E8EE;
  --line-faint:#EEF2F6;
  --accent:#0C7DBF;
  --accent-dark:#075E91;
  --accent-ring:rgba(12,125,191,.16);
  --accent-wash:rgba(12,125,191,.07);
  --ink:#111B27;
  --muted:#5B6876;
  --subtle:#8794A1;
  --placeholder:#A6B1BC;
  --dot:#CDD5DD;
  --success:#1E9E6A;
  --warn:#C98A12;
  --error:#D2453B;
  --on-ink:#FFFFFF;
  --on-ink-soft:rgba(255,255,255,.78);
  --on-accent:#FFFFFF;
  --canvas:#FBFCFD;
  --clear:rgba(255,255,255,0);
  --veil:rgba(17,27,39,.22);
  --blob-peach:#F8CBAE;
  --blob-pink:#F2BCD6;
  --blob-ice:#C4DEF4;
  --shadow-xs:0 1px 2px rgba(17,27,39,.05);
  --shadow-card:0 1px 2px rgba(17,27,39,.04),0 8px 20px -10px rgba(17,27,39,.10);
  --shadow-float:0 2px 4px rgba(17,27,39,.05),0 16px 36px -12px rgba(17,27,39,.18);
  --shadow-shell:0 1px 2px rgba(17,27,39,.03),0 44px 96px -44px rgba(17,27,39,.22);
  --shadow-paper:0 1px 2px rgba(17,27,39,.06),0 10px 24px -8px rgba(17,27,39,.12),0 34px 60px -24px rgba(17,27,39,.22);
  --shadow-sheet:0 6px 16px -6px rgba(17,27,39,.10);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(7,94,145,.30),0 4px 10px -4px rgba(7,94,145,.40);
  --r-field:4px;
  --r-ctl:6px;
  --r-card:10px;
  --r-shell:14px;
  --r-segment:12px;
  --r-segment-item:9px;
  --r-client:8px;
  --r-dot:50%;
  --r-pill:999px;
  --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,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --text-xs:12px;
  --text-sm:13px;
  --text-nav:14px;
  --text-body:15px;
  --text-lg:18px;
  --text-h3:22px;
  --text-h2:clamp(24px,2.6vw,34px);
  --text-h1:clamp(34px,3.4vw,48px);
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;
  --tracking-title:-.02em;
  --gutter:24px;
  --content-width:1120px;
  --reading-width:780px;
  --header-height:60px;
  --section-space:80px;
  --motion-fast:180ms;
  --motion-reveal:600ms;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px }
html.nav-open { overflow:hidden }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden] { display:none !important }
a { color:inherit; text-decoration:none }
a,button,summary { -webkit-tap-highlight-color:var(--accent-ring) }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg { display:block; max-width:100% }
img { height:auto }
svg,img,.icon,.dots,.status-dot { flex-shrink:0 }
button svg,a svg { flex-shrink:0 }
h1,h2,h3,h4,p,ul,ol,blockquote,pre,figure { margin-top:0 }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); text-wrap:balance }
h1,.h1 { font-size:var(--text-h1); line-height:1.12; font-weight:var(--weight-display); letter-spacing:var(--tracking-title) }
h2 { font-size:var(--text-h2); line-height:1.25; font-weight:var(--weight-display); letter-spacing:var(--tracking-title) }
h3 { font-size:var(--text-h3); line-height:1.4; font-weight:var(--weight-bold) }
h4 { font-size:var(--text-lg); line-height:1.4 }
p { margin-bottom:1.2em }
li+li { margin-top:.3em }
strong { font-weight:var(--weight-semibold) }
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:20px;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  -webkit-overflow-scrolling:touch;
}
pre code { white-space:pre; overflow-wrap:normal; word-break:normal }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
::selection { background:var(--accent-ring); color:var(--ink) }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip-link { position:fixed; left:16px; top:8px; z-index:100; padding:10px 16px; transform:translateY(-160%); background:var(--ink); color:var(--on-ink); border-radius:var(--r-ctl) }
.skip-link:focus { transform:none }
.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-head { max-width:720px; margin-bottom:32px }
.section-head p,.muted { color:var(--muted) }
.nowrap { white-space:nowrap }
.kw,.text-link { color:var(--accent-dark) }
.text-link { text-decoration:underline; text-underline-offset:4px }
.text-link:hover { color:var(--accent) }
.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>* , .bento>* , .footer-grid>* , .feature-tabs>* { min-width:0 }
.stack>*+* { margin-top:20px }
.card,.panel {
  padding:24px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.panel { background:var(--panel); color:var(--ink); box-shadow:none }
.panel-section { background:var(--panel); color:var(--ink) }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.stripe {
  height:48px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg,var(--bg) 0,var(--bg) 5px,var(--line-faint) 5px,var(--line-faint) 6px);
  color:var(--ink);
}
.cta,.button-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.cta { justify-content:center; margin-top:18px }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:9px 18px;
  border:1px solid var(--clear);
  border-radius:var(--r-ctl);
  font-size:var(--text-body);
  font-weight:var(--weight-semibold);
  letter-spacing:-.005em;
  line-height:1.4;
  text-align:center;
  transition:background var(--motion-fast),box-shadow var(--motion-fast);
}
.btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.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--primary:active,.btn--primary.is-active { background:var(--accent-dark); color:var(--on-accent); box-shadow:var(--shadow-xs) }
.btn--ghost { background:var(--bg); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-xs) }
.btn--ghost:hover,.btn--ghost.is-hover { background:var(--panel); color:var(--ink) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); border-color:var(--line); box-shadow:none }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:3px }
.topbar {
  position:sticky;
  top:0;
  z-index:50;
  height:var(--header-height);
  background:var(--bg);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.topbar__inner {
  position:relative;
  height:100%;
  width:calc(100% - 80px);
  max-width:min(100%,calc(1312px + var(--gutter)*2));
  margin-inline:auto;
  padding-inline:24px;
  display:flex;
  align-items:center;
  gap:28px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-family:var(--font-display); font-size:16.5px; font-weight:var(--weight-display); letter-spacing:-.01em; white-space:nowrap; color:var(--ink) }
.brand img { width:30px; height:30px; flex-shrink:0 }
.mainnav { margin-left:auto; min-width:0 }
.mainnav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px }
.mainnav li { margin:0 }
.mainnav a { display:flex; align-items:center; gap:7px; min-height:34px; padding:6px 11px; border-radius:var(--r-ctl); font-size:var(--text-nav); font-weight:var(--weight-medium); color:var(--muted); white-space:nowrap }
.mainnav svg,.mobile-nav svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.mainnav a:hover,.mainnav a[aria-current="page"] { background:var(--panel); color:var(--ink) }
.mainnav a[aria-current="page"] svg { color:var(--accent) }
.header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.language { position:relative }
.lang {
  display:flex; align-items:center; gap:6px;
  min-height:34px; padding:6px 10px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-ctl);
  box-shadow:var(--shadow-xs); font-size:13.5px; font-weight:var(--weight-medium);
  white-space:nowrap; list-style:none;
}
.lang::-webkit-details-marker { display:none }
.lang svg { width:15px; height:15px; fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.lang-short { display:none }
.caret { color:var(--muted); font-size:11px }
.language-menu {
  position:absolute; right:0; top:calc(100% + 8px); z-index:54;
  min-width:180px; padding:6px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-float);
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:var(--r-ctl) }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--panel); color:var(--accent-dark) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-ctl) }
.menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round }
.mobile-nav { display:none }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; z-index:40; border:0; background:var(--veil); color:var(--ink) }
.site-footer { background:var(--bg); color:var(--ink); border-top:1px solid var(--line); padding-top:56px; padding-bottom:90px }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr 1.3fr .8fr; gap:40px }
.footer-brand p { color:var(--muted); max-width:310px; margin-top:16px; font-size:var(--text-nav) }
.footer-title { font-size:var(--text-nav); margin-bottom:16px; font-weight:var(--weight-bold) }
.footer-links { list-style:none; margin:0; padding:0 }
.footer-links li { margin:0 }
.footer-links a { display:block; padding-block:5px; font-size:var(--text-nav); color:var(--muted); overflow-wrap:anywhere }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:var(--text-sm); color:var(--muted) }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap }
.prose { min-width:0; line-height:1.85 }
.prose h2 { margin-top:2.2em; margin-bottom:.8em }
.prose h3 { margin-top:1.7em; margin-bottom:.6em }
.prose a:not(.btn) { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.prose li { padding-left:.15em }
.prose div,.prose section { min-width:0; max-width:100% }
.reveal { opacity:1; transform:none }
.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(12px) }
.reveal-ready .reveal { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease }
.reveal.shown { opacity:1; transform:none }
.decorated,.hero { position:relative; overflow-x:clip }
@media (min-width:1600px) {
  .topbar__inner { max-width:calc(1312px + var(--gutter)*2) }
}
@media (max-width:1280px) {
  .mainnav a { padding-inline:8px; gap:6px }
  .topbar__inner { gap:18px }
}
@media (max-width:1100px) {
  .mainnav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:flex }
  .mobile-nav {
    position:absolute; top:100%; left:0; right:0; z-index:53;
    padding:16px var(--gutter) 24px;
    max-height:calc(100dvh - var(--header-height));
    overflow-y:auto; overscroll-behavior:contain;
    background:var(--bg); color:var(--ink);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-float);
  }
  .mobile-nav:not([hidden]) { display:block }
  .mobile-nav ul { list-style:none; margin:0; padding:0 }
  .mobile-nav li { margin:0 }
  .mobile-nav a { display:flex; width:100%; align-items:center; gap:10px; min-height:44px; padding:12px; border-radius:var(--r-ctl) }
  .mobile-nav a:hover,.mobile-nav a[aria-current] { background:var(--panel); color:var(--accent-dark) }
  .mobile-nav__languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--line) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  :root { --section-space:48px; --text-h1:28px }
  .grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .topbar__inner { width:100%; padding-inline:16px; gap:10px }
  .brand { font-size:var(--text-body) }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .grid--2,.grid--3,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .card,.panel { padding:20px }
  .tilt,[data-tilt] { transform:none !important }
  .lang-full { display:none }
  .lang-short { display:inline }
  .header-tools { margin-left:auto; gap:6px }
  .footer-grid { gap:28px }
  .button-row { align-items:stretch }
  .btn { max-width:100% }
  .footer-bottom { align-items:flex-start; flex-direction:column }
}
@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 }
}