:root {
  --bg:#E5EDF4;
  --bg-panel:#F7FAFD;
  --bg-panel-2:#D6E2EC;
  --border:#C5D3E0;
  --accent:#0B8A7A;
  --accent-dark:#066258;
  --accent-2:#14B3A1;
  --coral:#F0644B;
  --text:#0F1B2A;
  --text-muted:#4F6072;
  --success:#1C9A5B;
  --warn:#C9821A;
  --error:#D3443A;
  --hero-top:#EEF4F9;
  --hero-end:#E1EAF2;
  --white:#FFFFFF;
  --ghost-card:#E9F0F6;
  --chip-bg:#E6EDF4;
  --tag-bg:rgba(247,250,253,.72);
  --hairline:rgba(197,211,224,.75);
  --line-soft:rgba(197,211,224,.6);
  --grid-ink:rgba(15,27,42,.04);
  --mask:#000000;
  --shadow-accent:rgba(11,138,122,.10);
  --shadow-accent-deep:rgba(11,138,122,.18);
  --shadow-ink:rgba(15,27,42,.07);
  --accent-wash:rgba(11,138,122,.08);
  --accent-soft:rgba(11,138,122,.10);
  --accent-line:rgba(11,138,122,.26);
  --white-a18:rgba(255,255,255,.18);
  --white-a45:rgba(255,255,255,.45);
  --white-a85:rgba(255,255,255,.85);
  --btn-glow:rgba(6,98,88,.28);
  --flag-red:#D7363C;
  --flag-white:#FFFFFF;
  --flag-navy:#22396B;
  --flag-ring:rgba(15,27,42,.14);
  --veil:rgba(15,27,42,.28);
  --clear:transparent;
  --font-display:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Yu Gothic","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Yu Gothic","Apple SD Gothic Neo","Malgun Gothic","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-chip:4px;
  --r-card:8px;
  --r-tray:14px;
  --r-pill:999px;
  --r-round:50%;
  --r-indicator:3px;
  --gutter:32px;
  --page-width:1264px;
  --reading-width:840px;
  --header-height:64px;
  --anchor-offset:80px;
  --toc-offset:144px;
  --size-body:16px;
  --size-small:14px;
  --size-label:12px;
  --size-h1:clamp(52px,5vw,64px);
  --size-h2:clamp(28px,3vw,40px);
  --size-h3:22px;
  --weight-display:900;
  --ease-entry:cubic-bezier(.2,.75,.25,1);
  --shadow-panel:inset 0 1px 0 var(--white),0 12px 28px var(--shadow-accent);
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-padding-top:var(--anchor-offset); scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--size-body); line-height:1.6; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img { display:block; max-width:100%; height:auto }
svg { flex-shrink:0 }
p { margin:0 }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; overflow-wrap:break-word }
h1 { margin:0 0 24px; 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:800; line-height:1.35 }
ul,ol { padding-left:24px }
button,a,summary,input,select,textarea { -webkit-tap-highlight-color:var(--accent-soft) }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px }
[hidden] { display:none!important }
.no-break { white-space:nowrap }
.wrap { width:100%; max-width:var(--page-width); margin-inline:auto; padding-inline:var(--gutter); min-width:0 }
.reading-wrap { max-width:var(--reading-width); margin-inline:auto; padding-inline:var(--gutter); min-width:0 }
.section { padding-top:64px; padding-bottom:64px }
.section-head { max-width:820px; margin:0 auto 32px; text-align:center }
.section-head p,.muted { color:var(--text-muted) }
.section-head p { font-size:18px }
.panel,.card { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-panel); padding:24px; min-width:0 }
.tray-panel { padding:24px; background:var(--bg-panel-2); border-radius:var(--r-tray); box-shadow:inset 0 1px 0 var(--white-a85); min-width:0 }
.grid { display:grid; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid > *,.feature-detail > *,.footer-grid > * { min-width:0 }
.stack { display:grid; gap:16px; min-width:0 }
.prose { min-width:0; overflow-wrap:break-word }
.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre,.prose table { margin-top:0; margin-bottom:24px }
.prose h2 { margin-top:48px }
.prose h3 { margin-top:32px }
.prose a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
code { font-family:var(--font-mono); overflow-wrap:anywhere; background:var(--chip-bg); border-radius:var(--r-chip); padding:2px 5px }
pre { max-width:100%; overflow-x:auto; padding:20px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:var(--r-card); font-family:var(--font-mono) }
pre code { padding:0; background:var(--clear); overflow-wrap:normal; white-space:pre }
section[id] { scroll-margin-top:var(--anchor-offset) }
body:has(.toc-tabs) section[id] { scroll-margin-top:var(--toc-offset) }
.decorated-section { position:relative; overflow-x:clip }
.sprite { position:absolute; width:0; height:0; overflow:hidden }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:8px; padding:10px 24px; border:1px solid var(--clear); border-radius:var(--r-pill); font-family:var(--font-body); font-weight:600; text-align:center; white-space:nowrap; flex-shrink:0; transition:transform .15s,box-shadow .15s,border-color .15s }
.btn-primary { height:50px; padding:0 34px; font-size:17px; color:var(--white); background:linear-gradient(180deg,var(--accent),var(--accent-dark)); box-shadow:inset 0 1px 0 var(--white-a45),0 10px 24px var(--btn-glow) }
.btn-primary:hover,.btn-primary.is-hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--white-a45),0 14px 30px var(--btn-glow) }
.btn-primary:active,.btn-primary.is-pressed { transform:translateY(1px) }
.btn-secondary { color:var(--accent-dark); background:var(--bg-panel); border-color:var(--border); box-shadow:inset 0 1px 0 var(--white) }
.btn-secondary:hover { border-color:var(--accent) }
.btn-text { height:50px; padding:0 4px; font-size:17px; color:var(--accent-dark); border:0; background:var(--clear); gap:6px }
.btn-text:hover { text-decoration:underline; text-underline-offset:5px }
.btn-arrow { display:inline-block; transition:transform .15s }
.btn-text:hover .btn-arrow { transform:translateX(3px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel-2); color:var(--text-muted); box-shadow:none; transform:none; border-color:var(--border) }
.btn.is-focus { outline:2px solid var(--accent-dark); outline-offset:3px }
.ctas { display:flex; justify-content:center; align-items:center; gap:32px; margin-bottom:20px; flex-wrap:wrap }
.badge,.chip { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 11px; max-width:100%; border-radius:var(--r-pill); border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--accent-dark); font-size:var(--size-label); font-weight:600; overflow-wrap:anywhere }
.badge-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round); background:var(--accent) }
.data-tag { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 9px; border-radius:var(--r-chip); background:var(--chip-bg); color:var(--text-muted); font-size:var(--size-label) }
.fact-number,[data-count] { display:inline-block; min-width:3ch; font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right }
.reveal { transition:opacity .5s var(--ease-entry),transform .5s var(--ease-entry) }
.reveal.pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none }
#server-status { position:relative; display:block; min-height:80px; min-width:0; max-width:100%; overflow:hidden; margin-top:24px; margin-bottom:24px }
#server-status + * { margin-top:24px }
#server-status :where(.grid) { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)) }
.topbar { background:var(--hero-top); border-bottom:1px solid var(--line-soft); position:relative; z-index:30 }
.topbar-in { display:flex; align-items:center; min-height:var(--header-height); position:relative; gap:0 }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; min-height:44px }
.brand-mark { display:block; width:32px; height:32px; flex-shrink:0 }
.brand-word { font-family:var(--font-display); font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--text) }
.brand-ji { color:var(--accent-dark) }
.brand-zh { font-size:var(--size-small); font-weight:500; color:var(--text-muted) }
.tabs { margin-left:36px }
.tabs ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; height:var(--header-height) }
.tabs a { position:relative; display:flex; align-items:center; height:var(--header-height); padding:0 12px; font-size:15px; font-weight:500; color:var(--text-muted); white-space:nowrap }
.tabs a:hover { color:var(--text) }
.tabs a.is-active { color:var(--text); font-weight:600 }
.tabs a.is-active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:var(--r-indicator) var(--r-indicator) 0 0; background:var(--accent) }
.topbar-end { margin-left:auto; display:flex; align-items:center; gap:12px; flex-shrink:0 }
.language-box { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; width:auto; height:36px; padding:0 12px; border:0; border-radius:var(--r-pill); background:var(--clear); font-size:var(--size-small); color:var(--text-muted); cursor:pointer }
.lang span { white-space:nowrap }
.lang:hover { background:var(--chip-bg); color:var(--text) }
.ico-stroke { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.language-menu { position:absolute; right:0; top:calc(100% + 10px); width:180px; padding:8px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); box-shadow:0 12px 28px var(--shadow-accent-deep); z-index:35 }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-chip); font-size:var(--size-small) }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--chip-bg); color:var(--accent-dark) }
.nav-login { display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:64px; padding:0 20px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--bg-panel); font-size:var(--size-small); font-weight:600; color:var(--accent-dark); box-shadow:inset 0 1px 0 var(--white),0 2px 6px var(--shadow-ink) }
.nav-login:hover { border-color:var(--accent) }
.nav-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.mobile-drawer { display:none; position:absolute; inset-inline:0; top:100%; z-index:32; background:var(--bg-panel); padding:16px var(--gutter); border-bottom:1px solid var(--border); box-shadow:0 12px 28px var(--shadow-accent); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain }
.mobile-drawer ul { list-style:none; margin:0; padding:0 }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; border-radius:var(--r-chip) }
.mobile-drawer a.is-active,.mobile-drawer a[aria-current] { background:var(--chip-bg); color:var(--accent-dark); font-weight:600 }
.drawer-languages { margin-top:12px; padding-top:12px; border-top:1px solid var(--border) }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; z-index:20; border:0; background:var(--veil) }
html.nav-open { overflow:hidden }
.site-footer { padding-top:48px; padding-bottom:24px; background:var(--bg-panel-2); border-top:1px solid var(--white-a85) }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px }
.footer-brand p { margin-top:16px; max-width:360px; color:var(--text-muted); font-size:var(--size-small) }
.footer-heading { margin:0 0 12px; font-size:var(--size-small); font-weight:800 }
.footer-links { display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none; margin:0; padding:0 }
.footer-links a { display:inline-flex; align-items:center; min-height:32px; font-size:var(--size-small); color:var(--text-muted) }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:32px; padding-top:20px; border-top:1px solid var(--border) }
.footer-languages a,.footer-legal a { display:inline-flex; align-items:center; min-height:32px; font-size:var(--size-small) }
.footer-languages a[aria-current] { color:var(--accent-dark); font-weight:600 }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:16px; color:var(--text-muted); font-size:var(--size-small) }
.footer-legal { display:flex; flex-wrap:wrap; gap:16px }
@media (max-width:1180px) {
  .tabs { margin-left:20px }
  .tabs a { padding-inline:8px; font-size:var(--size-small) }
  .topbar-end { gap:6px }
}
@media (max-width:1040px) {
  .tabs { display:none }
  .topbar-end { margin-left:auto }
  .nav-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) { display:block }
  .lang-t { display:none }
}
@media (max-width:768px) {
  :root { --gutter:24px; --size-h1:38px; --size-h2:30px }
  .section { padding-top:40px; padding-bottom:40px }
  .grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr; gap:28px }
  h1 { font-size:var(--size-h1) }
  .ctas { gap:20px }
  .decorated-section { max-width:100% }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .no-break { white-space:normal }
  .tilt { transform:none }
  .topbar-end { margin-left:auto; gap:4px }
  .nav-login { padding-inline:14px }
  .brand { gap:7px }
  .lang { padding-inline:8px }
  .panel,.card,.tray-panel { padding:20px }
  .footer-bottom { display:block }
  .footer-legal { margin-top:12px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition-duration:0s!important; animation-duration:0s!important; animation-iteration-count:1!important }
  .reveal,.reveal.pending { opacity:1; transform:none }
}