:root {
  --bg:#F5F4F1;
  --bg-top:#FAF9F7;
  --bg-bottom:#EFEDE8;
  --panel:#FFFFFF;
  --panel-2:#ECEAE5;
  --panel-soft:#F7F6F3;
  --border:#DEDAD3;
  --accent:#C8462D;
  --accent-dark:#9C3220;
  --text:#1F1D1B;
  --muted:#6B665F;
  --faint:#9A948B;
  --success:#2F8F5B;
  --success-dark:#226B44;
  --warn:#C08A14;
  --warn-dark:#86600F;
  --error:#B42318;
  --graphite:#2B2926;
  --gray-1:#B8B2A9;
  --gray-2:#A39D94;
  --gray-3:#8E887F;
  --gray-4:#7A746B;
  --gray-5:#ADA79E;
  --on-accent:#FFFFFF;
  --on-dark:#F5F4F1;
  --on-dark-muted:rgba(245,244,241,.74);
  --arc:rgba(245,244,241,.18);
  --doodle:#8F8980;
  --grid-ink:rgba(31,29,27,.04);
  --accent-05:rgba(200,70,45,.05);
  --accent-08:rgba(200,70,45,.08);
  --accent-10:rgba(200,70,45,.10);
  --accent-14:rgba(200,70,45,.14);
  --ink-04:rgba(31,29,27,.04);
  --ink-08:rgba(31,29,27,.08);
  --ink-14:rgba(31,29,27,.14);
  --ink-30:rgba(31,29,27,.30);
  --success-12:rgba(47,143,91,.12);
  --success-20:rgba(47,143,91,.20);
  --warn-14:rgba(192,138,20,.14);
  --sheen:rgba(255,255,255,.55);
  --sheen-soft:rgba(255,255,255,.16);
  --white-0:rgba(255,255,255,0);
  --clear:rgba(0,0,0,0);
  --veil:rgba(31,29,27,.34);
  --device-ink:#161513;
  --device-ink-2:#3A3733;
  --device-rim:#7A756E;
  --alu-hi:#F7F6F3;
  --alu-mid:#E2DFD9;
  --alu-lo:#C4BFB7;
  --key-top:#FFFFFF;
  --key-bottom:#E7E5E0;
  --key-edge:rgba(31,29,27,.20);
  --flag-red:#BE3A2E;
  --flag-blue:#2B3D68;
  --flag-white:#FFFFFF;
  --flag-edge:rgba(31,29,27,.16);
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','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-xs:4px;
  --r-folder:6px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:12px;
  --r-pill:999px;
  --r-circle:50%;
  --r-kbd:14px;
  --r-tab:24px;
  --r-tab-screen:14px;
  --r-phone:28px;
  --r-phone-screen:22px;
  --shadow-card:0 18px 44px -16px rgba(200,70,45,.10),0 2px 6px rgba(31,29,27,.06);
  --shadow-lift:0 36px 72px -22px rgba(200,70,45,.10),0 18px 30px -20px rgba(31,29,27,.34);
  --shadow-phone:0 26px 48px -10px rgba(200,70,45,.10),0 12px 22px -12px rgba(31,29,27,.42);
  --shadow-btn:0 12px 26px -12px rgba(200,70,45,.55);
  --gutter:32px;
  --content-width:1304px;
  --header-height:72px;
  --anchor-offset:88px;
  --toc-offset:88px;
  --toc-landing:168px;
  --duration-fast:.2s;
  --duration-reveal:.35s;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--anchor-offset) }
html.nav-open { overflow:hidden }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased }
[hidden] { display:none!important }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img { display:block; max-width:100%; height:auto }
svg { flex-shrink:0 }
p,h1,h2,h3,h4 { margin:0 }
h1,h2,h3 { font-family:var(--font-display); text-wrap:balance }
h1 { font-size:clamp(52px,4.6vw,66px); font-weight:800; line-height:1.12; letter-spacing:-.02em }
h2 { font-size:clamp(28px,3vw,40px); line-height:1.2; font-weight:800; letter-spacing:-.02em }
h3 { font-size:22px; line-height:1.35; font-weight:700 }
ul { margin:0; padding:0; list-style:none }
button,a,summary,input,select,textarea { -webkit-tap-highlight-color:var(--accent-10) }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:4px }
button { color:inherit }
code { font-family:var(--font-mono); overflow-wrap:anywhere; font-size:.88em }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:20px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel-2) }
pre code { overflow-wrap:normal; white-space:pre }
.shell,.wrap { width:100%; max-width:var(--content-width); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:80px; padding-bottom:80px }
.section-heading { margin-bottom:32px; max-width:760px }
.section-heading p { margin-top:16px; color:var(--muted) }
.grid-two,.grid-three { display:grid; gap:24px }
.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
:where(.grid-two,.grid-three,.hero-grid,.footer-grid,.feature-layout)>* { min-width:0 }
.no-break { white-space:nowrap }
.muted { color:var(--muted) }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.sprite { position:absolute; width:0; height:0; overflow:hidden }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.panel,.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); min-width:0; padding:24px }
.panel-inset { padding:20px; border-radius:var(--r-sm); background:var(--panel-2) }
.prose { max-width:820px; min-width:0; overflow-wrap:break-word }
.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote { margin-top:20px; margin-bottom:20px }
.prose h2 { margin-top:56px; margin-bottom:24px }
.prose h3 { margin-top:32px; margin-bottom:16px }
.prose ul { list-style:disc; padding-left:24px }
.prose ol { padding-left:24px }
.prose li+li { margin-top:8px }
.prose a { text-decoration:underline; text-underline-offset:4px }
.prose :first-child { margin-top:0 }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 26px; border:1px solid var(--clear); border-radius:var(--r-md); font-size:16px; font-weight:600; letter-spacing:.01em; line-height:1.3; flex-shrink:0; white-space:nowrap; transition:transform var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast) }
.btn svg { width:16px; height:16px }
.btn svg path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.btn-primary { background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 150%); color:var(--on-accent); box-shadow:var(--shadow-btn),inset 0 1px 0 var(--sheen-soft) }
.btn-primary:hover,.btn-primary.is-hover { transform:translateY(-1px); background:var(--accent-dark) }
.btn-primary:active { transform:translateY(0) }
.btn-outline,.btn-secondary { border-color:var(--text); background:var(--clear); color:var(--text) }
.btn-outline:hover,.btn-secondary:hover { background:var(--ink-04) }
.btn-dark-outline { border-color:var(--on-dark); color:var(--on-dark); background:var(--clear) }
.btn-dark-outline:hover { background:var(--arc) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); box-shadow:none; transform:none; border-color:var(--border) }
.btn-small { height:42px; padding-inline:18px; font-size:14px }
.cta-row { margin-top:32px; display:flex; flex-wrap:wrap; gap:12px }
.topbar { position:relative; z-index:50; background:var(--bg-top); border-bottom:1px solid var(--border) }
.topbar-inner { height:var(--header-height); display:flex; flex-wrap:nowrap; align-items:center; gap:28px }
.brand { display:flex; align-items:center; gap:10px; flex:none; min-height:44px }
.brand-mark { display:block; width:34px; height:34px; flex:none }
.brand-en { font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--text); white-space:nowrap }
.brand-zh { font-size:14px; font-weight:500; color:var(--muted); white-space:nowrap }
.mainnav { margin-left:auto; flex:1; min-width:0 }
.mainnav ul { display:flex; align-items:center; justify-content:flex-end; gap:2px; list-style:none; margin:0; padding:0 }
.mainnav a { position:relative; display:flex; align-items:center; gap:7px; height:40px; padding:0 12px; border-radius:var(--r-sm); font-size:15px; font-weight:500; white-space:nowrap; color:var(--muted); transition:color var(--duration-fast),background-color var(--duration-fast) }
.mainnav a svg { width:16px; height:16px; flex:none }
.mainnav svg path,.mainnav svg circle,.mainnav svg rect { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.mainnav a:hover { color:var(--text); background:var(--ink-04) }
.mainnav a[aria-current="page"] { color:var(--text); font-weight:600 }
.mainnav a[aria-current="page"]::after { content:""; position:absolute; left:12px; right:12px; bottom:-16px; height:2px; border-radius:var(--r-xs); background:var(--text) }
.tools { display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; z-index:53 }
.language { position:relative }
.lang { display:flex; align-items:center; justify-content:center; gap:6px; height:38px; width:auto; min-width:44px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); color:var(--text); font-size:14px; cursor:pointer }
.lang-name { white-space:nowrap }
.lang svg { width:15px; height:15px }
.lang svg path,.lang svg circle { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }
.lang-caret { font-size:11px; color:var(--muted) }
.lang-panel { position:absolute; right:0; top:calc(100% + 10px); width:180px; z-index:60; padding:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-card) }
.lang-panel a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sm); font-size:14px }
.lang-panel a:hover,.lang-panel a[aria-current="true"] { background:var(--panel-2); color:var(--text) }
.btn-login { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; padding:0 18px; border-radius:var(--r-sm); background:var(--text); color:var(--bg-top); font-size:14px; font-weight:600; white-space:nowrap; transition:background-color var(--duration-fast) }
.btn-login svg { width:15px; height:15px }
.btn-login svg path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.btn-login:hover { background:var(--graphite) }
.menu-toggle { display:none; min-width:44px; min-height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); color:var(--text) }
.menu-line { display:block; width:20px; height:2px; background:currentColor; border-radius:var(--r-xs) }
.menu-toggle[aria-expanded="true"] .menu-line:first-child { transform:translateY(7px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) { opacity:0 }
.menu-toggle[aria-expanded="true"] .menu-line:last-child { transform:translateY(-7px) rotate(-45deg) }
.mobile-drawer { position:fixed; top:var(--header-height); right:0; width:min(420px,100%); height:calc(100dvh - var(--header-height)); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; padding:20px var(--gutter) 36px; z-index:52; background:var(--panel); border-left:1px solid var(--border) }
.mobile-drawer a { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px; border-radius:var(--r-sm); color:var(--text) }
.mobile-drawer a svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--panel-2) }
.drawer-languages { border-top:1px solid var(--border); margin-top:20px; padding-top:16px }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; z-index:51; background:var(--veil); border:0; width:100%; height:calc(100dvh - var(--header-height)); padding:0 }
.footer { padding-top:64px; padding-bottom:24px; border-top:1px solid var(--border); background:var(--panel-soft) }
.footer-grid { display:grid; grid-template-columns:1.35fr 1fr 1.2fr; gap:48px }
.footer-brand p { color:var(--muted); max-width:30em; margin-top:16px; font-size:14px }
.footer-title { font-size:15px; font-weight:700; margin-bottom:16px }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px }
.footer-links a,.footer-languages a,.footer-legal a { display:inline-flex; align-items:center; min-height:28px; padding-block:2px; font-size:14px; color:var(--muted) }
.footer a:hover { text-decoration:underline; text-underline-offset:4px; color:var(--text) }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border) }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:24px; font-size:13px; color:var(--muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:16px }
.reveal { transition:opacity var(--duration-reveal) ease,transform var(--duration-reveal) ease }
.reveal.pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none }
#server-status { position:relative; display:block; min-width:0; max-width:100%; overflow:hidden; margin-top:24px; margin-bottom:32px }
#server-status+* { margin-top:32px }
.decorated-section { position:relative; overflow-x:clip }
@media (max-width:1200px) {
  .topbar-inner { gap:18px }
  .mainnav a { padding-inline:8px; font-size:14px; gap:5px }
}
@media (max-width:1080px) {
  .mainnav { display:none }
  .tools { margin-left:auto }
  .menu-toggle { display:flex }
  .topbar-inner { gap:16px }
}
@media (min-width:1081px) {
  .mobile-drawer,.nav-veil { display:none!important }
}
@media (max-width:768px) {
  h1 { font-size:clamp(28px,7.2vw,40px) }
  .grid-three { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
  .footer-brand { grid-column:1/-1 }
  .section { padding-top:56px; padding-bottom:56px }
}
@media (max-width:640px) {
  :root { --gutter:20px; --header-height:64px; --anchor-offset:80px; --toc-offset:16px; --toc-landing:96px }
  .no-break { white-space:normal }
  .grid-two { grid-template-columns:1fr }
  .topbar-inner { gap:8px }
  .brand { gap:7px }
  .brand-mark { width:28px; height:28px }
  .brand-en { font-size:17px }
  .tools { margin-left:auto; gap:6px }
  .lang { padding-inline:8px; height:38px; font-size:12px; gap:4px }
  .lang svg,.lang-caret { display:none }
  .btn-login { padding-inline:12px; font-size:13px }
  .btn-login svg { display:none }
  .panel,.card { padding:20px }
  .footer-grid { gap:28px 20px }
  .footer-links { grid-template-columns:1fr }
  .tilt,.content-tilt,[data-tilt] { transform:none!important }
  .decorated-section::before,.decorated-section::after { max-width:100% }
}
@media (max-width:359px) {
  :root { --gutter:16px }
  .brand-en { font-size:15px }
  .brand-mark { width:25px; height:25px }
  .lang { padding-inline:6px; font-size:11px }
  .tools { gap:4px }
  .btn-login { padding-inline:9px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .reveal,.reveal.pending { opacity:1; transform:none }
}