:root {
  --c-bg:#ffffff;
  --c-bg-veil:rgba(255,255,255,.52);
  --c-panel:#f5f7fa;
  --c-panel-2:#eaf1fd;
  --c-panel-2-hover:#dde8fb;
  --c-border:#e4e7ec;
  --c-accent:#165dd8;
  --c-accent-dark:#0e46a8;
  --c-text:#101418;
  --c-muted:#5b6472;
  --c-faint:#a0a8b4;
  --c-grid:#eceef2;
  --c-success:#1f8f4e;
  --c-success-ring:rgba(31,143,78,.26);
  --c-warn:#b7791f;
  --c-error:#c8322f;
  --c-on-accent:#ffffff;
  --c-focus:rgba(22,93,216,.35);
  --c-mask:#000000;
  --c-clear:transparent;
  --c-veil:rgba(16,20,24,.26);
  --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,'SF Mono',Menlo,Consolas,monospace;
  --r-pill:999px;
  --r-circle:50%;
  --r-board:36px;
  --r-section:40px;
  --r-card:24px;
  --r-mark:9px;
  --r-mark-inner:5px;
  --r-line:8px;
  --r-shot:10px;
  --shadow-board:0 40px 80px -24px rgba(30,41,59,.22),0 14px 28px -16px rgba(30,41,59,.10),0 1px 2px rgba(16,20,24,.04);
  --shadow-disc:0 18px 34px -14px rgba(14,70,168,.50);
  --shadow-btn:0 12px 24px -14px rgba(14,70,168,.60);
  --shadow-fab:0 18px 36px -16px rgba(16,20,24,.40),0 2px 6px rgba(16,20,24,.08);
  --shadow-mark:0 1px 2px rgba(16,20,24,.06);
  --w-shell:1360px;
  --w-axis:1088px;
  --w-read:800px;
  --gutter:40px;
  --h-nav:72px;
  --section-gap:160px;
  --t-fast:.18s;
  --t-reveal:.65s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --weight-body:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;
  --size-body:16px;
  --size-small:14px;
  --size-h1:clamp(34px,1.6vw + 24px,48px);
  --size-h2:clamp(26px,3vw,40px);
  --size-h3:22px;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
html.nav-open { overflow:hidden; }
body {
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:var(--weight-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; vertical-align:middle; }
img { height:auto; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:var(--c-clear); }
button { cursor:pointer; }
a { color:var(--c-accent); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
button:disabled { cursor:not-allowed; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--c-accent); outline-offset:3px; }
h1,h2,h3 { font-family:var(--font-display); color:var(--c-text); text-wrap:balance; overflow-wrap:break-word; }
h1 { margin:0; font-size:var(--size-h1); font-weight:var(--weight-display); line-height:1.12; letter-spacing:-.02em; }
h2 { margin:0 0 24px; font-size:var(--size-h2); font-weight:var(--weight-display); line-height:1.2; letter-spacing:-.02em; }
h3 { margin:0 0 16px; font-size:var(--size-h3); font-weight:var(--weight-bold); line-height:1.4; }
p { margin:0 0 20px; }
strong { font-weight:var(--weight-semibold); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:24px;
  border:1px solid var(--c-border);
  border-radius:var(--r-card);
  background:var(--c-panel);
  color:var(--c-text);
  font-size:var(--size-small);
  line-height:1.9;
  tab-size:2;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
:where(main,section,article,aside,div,li) { min-width:0; }
.wrap { width:100%; max-width:var(--w-axis); margin-inline:auto; padding-inline:var(--gutter); }
.read-wrap { max-width:var(--w-read); }
.section { padding-top:80px; padding-bottom:80px; margin-top:var(--section-gap); }
.section-heading { max-width:720px; margin:0 auto 40px; text-align:center; }
.section-heading p,.muted { color:var(--c-muted); }
.nowrap { white-space:nowrap; }
@media (max-width:767px) {
  :is(h1,h2,h3) .nowrap { white-space:normal; }
}
.vh { 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:absolute; top:8px; left:16px; z-index:100; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:var(--c-bg); color:var(--c-text); border-radius:var(--r-pill); }
.skip-link:focus { width:auto; height:auto; padding:12px 20px; overflow:visible; clip-path:none; }
.pill-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:12px 28px; border:1px solid var(--c-clear);
  border-radius:var(--r-pill); font-size:var(--size-body); font-weight:var(--weight-semibold);
  text-decoration:none; text-align:center; line-height:1.5;
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.pill-btn svg { display:block; flex-shrink:0; width:18px; height:18px; }
.pill-btn:active { transform:translateY(1px); }
.pill-btn--solid { background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--shadow-btn); }
.pill-btn--solid:hover,.pill-btn--solid.is-hover { background:var(--c-accent-dark); color:var(--c-on-accent); }
.pill-btn--soft { background:var(--c-panel-2); color:var(--c-text); }
.pill-btn--soft:hover,.pill-btn--soft.is-hover { background:var(--c-panel-2-hover); color:var(--c-text); }
.pill-btn:disabled,.pill-btn[aria-disabled="true"] { background:var(--c-panel); color:var(--c-muted); box-shadow:none; pointer-events:none; border-color:var(--c-border); }
.pill-btn.is-focus { outline:3px solid var(--c-focus); outline-offset:3px; }
.card,.panel {
  border:1px solid var(--c-border); border-radius:var(--r-card);
  padding:32px; background:var(--c-bg); color:var(--c-text);
}
.panel--wide { border-radius:var(--r-board); box-shadow:var(--shadow-board); }
.panel--soft { border:0; border-radius:var(--r-section); background:var(--c-panel); color:var(--c-text); }
.panel--blue { --c-muted:var(--c-on-accent); border:0; border-radius:var(--r-section); background:var(--c-accent); color:var(--c-on-accent); }
.panel--blue :where(h2,h3,p,a) { color:var(--c-on-accent); }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.prose { overflow-wrap:break-word; }
.prose h2 { margin-top:72px; }
.prose h3 { margin-top:36px; }
.prose li+li { margin-top:10px; }
.prose :where(ul,ol) { padding-left:24px; }
.prose> :first-child { margin-top:0; }
.reveal { opacity:1; transform:none; }
.reveal-pending .reveal:not(.shown) { opacity:0; transform:translateY(18px); }
.reveal-pending .reveal { transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease); }
.topbar { position:relative; z-index:60; background:var(--c-bg); color:var(--c-text); }
.topbar-shell {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:min(100%,calc(1280px + var(--gutter) * 2)); min-height:var(--h-nav);
  margin-inline:auto; padding-inline:var(--gutter);
}
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; text-decoration:none; font-family:var(--font-display); font-weight:var(--weight-bold); font-size:17px; letter-spacing:-.01em; color:var(--c-text); }
.brand-mark { display:block; width:32px; height:32px; flex-shrink:0; border-radius:var(--r-mark); }
.brand-mark--placeholder { position:relative; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); box-shadow:var(--shadow-mark); }
.brand-mark--placeholder::after { content:""; position:absolute; inset:7px; border-radius:var(--r-mark-inner); background:var(--c-panel); }
.topnav { min-width:0; margin-left:auto; }
.topnav-list { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:34px; }
.topnav-list a { display:block; padding-block:12px; text-decoration:none; white-space:nowrap; font-size:15px; font-weight:var(--weight-medium); color:var(--c-muted); transition:color var(--t-fast) var(--ease); }
.topnav-list a:hover,.topnav-list a[aria-current="page"] { color:var(--c-text); }
.topnav-list a[aria-current="page"] { font-weight:var(--weight-bold); }
.header-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lang-control { position:relative; }
.lang-switch { min-height:44px; padding:0 0 0 30px; border:0; border-left:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); font-size:var(--size-small); font-weight:var(--weight-medium); white-space:nowrap; }
.lang-caret { margin-left:4px; color:var(--c-muted); }
.lang-short { display:none; }
.lang-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:180px; margin:0; padding:8px; list-style:none; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-board); }
.lang-menu a { display:block; min-height:44px; padding:10px 16px; color:var(--c-text); text-decoration:none; border-radius:var(--r-pill); }
.lang-menu a:hover,.lang-menu a[aria-current="true"] { background:var(--c-panel-2); color:var(--c-text); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; border:0; border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text); }
.menu-toggle svg { width:22px; height:22px; flex-shrink:0; }
.mobile-drawer { position:absolute; inset:var(--h-nav) 0 auto; z-index:2; padding:16px var(--gutter) 28px; max-height:calc(100dvh - var(--h-nav)); overflow-y:auto; overscroll-behavior:contain; background:var(--c-bg); color:var(--c-text); border-bottom:1px solid var(--c-border); }
.mobile-drawer ul { list-style:none; margin:0; padding:0; }
.mobile-drawer a { display:block; width:100%; min-height:48px; padding:12px 8px; color:var(--c-text); text-decoration:none; }
.mobile-drawer a[aria-current] { font-weight:var(--weight-bold); }
.drawer-languages { margin-top:20px !important; padding-top:12px !important; border-top:1px solid var(--c-border); }
.nav-veil { position:fixed; inset:var(--h-nav) 0 0; z-index:55; border:0; background:var(--c-veil); color:var(--c-text); }
.site-footer { margin-top:var(--section-gap); padding-top:64px; padding-bottom:100px; border-top:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1.4fr; gap:48px; }
.footer-brand p { max-width:340px; margin-top:20px; font-size:var(--size-small); color:var(--c-muted); }
.footer-title { margin:0 0 18px; font-size:var(--size-body); font-weight:var(--weight-bold); }
.footer-links { display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; }
.footer-links a,.footer-languages a { color:var(--c-muted); text-decoration:none; font-size:var(--size-small); }
.footer-links a:hover,.footer-languages a:hover { color:var(--c-accent); }
.footer-languages { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:40px; padding-top:24px; border-top:1px solid var(--c-border); }
.copyright { margin-top:24px; font-size:13px; color:var(--c-muted); }
.hero { position:relative; isolation:isolate; overflow:hidden; overflow-x:clip; padding-top:44px; padding-bottom:56px; }
.hero-copy { position:relative; z-index:2; max-width:var(--w-axis); margin-inline:auto; padding-inline:24px; text-align:center; }
.hero-badge { display:inline-flex; align-items:center; gap:9px; min-height:30px; max-width:100%; margin:0; padding:4px 14px 4px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-size:13px; font-weight:var(--weight-medium); }
.hero-badge-dot { position:relative; width:7px; height:7px; flex-shrink:0; border-radius:var(--r-circle); background:var(--c-success); }
.hero-badge-dot::after { content:""; position:absolute; inset:-4px; border-radius:var(--r-circle); background:var(--c-success-ring); animation:dot-breathe 2.6s var(--ease) infinite; }
@keyframes dot-breathe { 0%,100% { transform:scale(.6); opacity:0; } 45% { transform:scale(1); opacity:1; } }
.hero-title { margin:22px 0 0; }
.hero-lede { max-width:640px; margin:18px auto 0; font-size:17px; line-height:1.65; color:var(--c-muted); }
.hero-lede strong { color:var(--c-text); }
.cta-row { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.plat-bar { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px 22px; margin-top:22px; }
.plat-list { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:8px 22px; list-style:none; margin:0; padding:0; }
.plat-list a { display:inline-flex; align-items:center; gap:7px; min-height:32px; text-decoration:none; font-size:var(--size-small); font-weight:var(--weight-medium); color:var(--c-muted); }
.plat-list a:hover { color:var(--c-text); }
.plat-list svg { width:17px; height:17px; flex-shrink:0; }
.plat-sep { width:1px; height:16px; background:var(--c-border); }
.price-chip { display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; min-height:30px; padding:4px 14px; border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-muted); font-size:13px; }
.price-chip b { color:var(--c-text); font-weight:var(--weight-bold); margin-inline:2px; }
.stage { position:relative; z-index:2; max-width:var(--w-axis); margin:36px auto 0; padding-inline:24px; }
.conf-board { position:relative; width:92%; height:352px; margin-inline:auto; border:1px solid var(--c-border); border-radius:var(--r-board); background:linear-gradient(to bottom,var(--c-bg) 0%,var(--c-bg) 52%,var(--c-bg-veil) 100%); color:var(--c-text); box-shadow:var(--shadow-board); }
.board-name { position:absolute; top:20px; left:50%; transform:translateX(-50%); margin:0; font-family:var(--font-mono); font-size:12px; line-height:20px; letter-spacing:.02em; color:var(--c-muted); }
.board-body { position:absolute; inset:0; padding-top:8px; display:grid; grid-template-columns:1fr 176px 1fr; align-items:center; }
.conf-lines { justify-self:center; max-width:100%; margin:0; overflow-x:auto; font-family:var(--font-mono); font-size:15px; line-height:34px; color:var(--c-text); white-space:pre; }
.conf-line { display:grid; grid-template-columns:30px auto; align-items:center; }
.conf-line .ln { color:var(--c-muted); font-size:12.5px; user-select:none; }
.conf-line--hit .code { margin-left:-10px; padding-inline:10px; border-radius:var(--r-line); background:var(--c-panel); color:var(--c-text); }
.k-sec,.k-proxy { font-weight:var(--weight-bold); }
.k-key,.k-type,.k-proxy { color:var(--c-text); }
.k-type { font-weight:var(--weight-semibold); }
.k-op,.k-val,.k-direct { color:var(--c-muted); }
.router { position:relative; justify-self:center; display:flex; justify-content:center; }
.router-disc { display:grid; place-items:center; width:120px; height:120px; border-radius:var(--r-circle); background:var(--c-accent); color:var(--c-on-accent); box-shadow:0 0 0 8px var(--c-panel-2),var(--shadow-disc); }
.router-disc svg { display:block; width:56px; height:56px; }
.router-tag { position:absolute; top:calc(100% + 22px); left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; height:26px; padding-inline:12px; border-radius:var(--r-pill); background:var(--c-text); color:var(--c-on-accent); font-family:var(--font-mono); font-size:12.5px; font-weight:var(--weight-semibold); letter-spacing:.02em; white-space:nowrap; }
.horizon { position:absolute; inset:auto 0 0; z-index:1; height:360px; overflow:hidden; pointer-events:none; mask-image:radial-gradient(ellipse 60% 100% at 50% 100%,var(--c-mask) 28%,var(--c-clear) 80%); }
.horizon::before { content:""; position:absolute; left:-50%; width:200%; bottom:0; height:900px; background-image:linear-gradient(to right,var(--c-grid) 1px,var(--c-clear) 1px),linear-gradient(to bottom,var(--c-grid) 1px,var(--c-clear) 1px); background-size:64px 64px; background-position:50% 100%; transform-origin:50% 100%; transform:perspective(600px) rotateX(56deg); }
@media (max-width:1280px) {
  .topnav-list { gap:22px; }
  .topbar-shell { gap:20px; }
  .lang-switch { padding-left:20px; }
}
@media (max-width:1100px) {
  .topnav { display:none; }
  .header-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .lang-switch { border-left:0; padding-left:0; }
}
@media (min-width:1101px) {
  .mobile-drawer,.nav-veil { display:none !important; }
}
@media (max-width:900px) {
  :root { --gutter:24px; }
  .hero { padding-top:32px; }
  .hero-lede { font-size:var(--size-body); }
  .conf-board { width:100%; height:auto; padding:56px 20px 40px; }
  .board-body { position:static; padding-top:0; grid-template-columns:minmax(0,1fr); gap:28px; }
  .router { flex-direction:column; align-items:center; gap:20px; order:-1; }
  .router-tag { position:static; transform:none; }
  .conf-lines { justify-self:stretch; font-size:13.5px; line-height:30px; }
  .plat-sep { display:none; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width:768px) {
  :root { --size-h1:clamp(24px,4vw,30px); }
}
@media (max-width:640px) {
  :root { --gutter:20px; --r-board:28px; --section-gap:160px; }
  .topbar-shell { gap:12px; }
  .brand { gap:8px; font-size:15px; }
  .header-tools { margin-left:auto; gap:8px; }
  .lang-full { display:none; }
  .lang-short { display:inline; }
  .lang-switch { padding-inline:4px; }
  .wrap { padding-inline:var(--gutter); }
  .hero-copy,.stage { padding-inline:var(--gutter); }
  .hero-lede { font-size:15px; }
  .pill-btn { min-height:48px; padding:11px 22px; font-size:15px; }
  .card,.panel { padding:24px; }
  .card-grid { grid-template-columns:minmax(0,1fr); }
  .section { padding-top:48px; padding-bottom:48px; }
  .tilt,[data-tilt] { transform:none !important; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-brand { grid-column:auto; }
  .plat-list { gap:8px 16px; }
  .site-footer { padding-bottom:100px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal-pending .reveal:not(.shown) { opacity:1; transform:none; }
}