:root {
  --bg: #E7ECF7;
  --bg-panel: #F8FAFE;
  --bg-panel-2: #DCE3F2;
  --panel-deep: #F1F5FC;
  --panel-glass: rgba(248,250,254,.86);
  --border: #C9D3E6;
  --border-soft: rgba(201,211,230,.72);
  --border-strong: #A9B6CF;
  --accent: #0B80AE;
  --accent-dark: #075C80;
  --accent-2: #5BB8DA;
  --accent-soft: #BFE3F0;
  --accent-pale: #E6F3F9;
  --text: #111A2E;
  --text-soft: #2B3752;
  --text-muted: #56627A;
  --success: #14875A;
  --warn: #B7791F;
  --error: #C43C3C;
  --white: #FFFFFF;
  --stage-top: #F1F4FB;
  --stage-bottom: #E2E8F5;
  --bar-from: #16233F;
  --bar-to: #2B2C5E;
  --on-dark: #F4F6FD;
  --on-dark-muted: rgba(214,222,245,.72);
  --on-dark-a04: rgba(255,255,255,.04);
  --on-dark-a08: rgba(255,255,255,.08);
  --on-dark-a45: rgba(255,255,255,.45);
  --drum-edge: #AEBDD6;
  --drum-tint: #DDEDF4;
  --flag-red: #C8323C;
  --flag-blue: #24356B;
  --flag-white: #FFFFFF;
  --accent-a06: rgba(11,128,174,.06);
  --accent-a08: rgba(11,128,174,.08);
  --accent-a10: rgba(11,128,174,.10);
  --accent-a12: rgba(11,128,174,.12);
  --accent-a18: rgba(11,128,174,.18);
  --accent-a24: rgba(11,128,174,.24);
  --accent-a30: rgba(11,128,174,.30);
  --accent-a60: rgba(11,128,174,.60);
  --ink-a04: rgba(17,26,46,.04);
  --ink-a06: rgba(17,26,46,.06);
  --ink-a08: rgba(17,26,46,.08);
  --ink-a10: rgba(17,26,46,.10);
  --ink-a14: rgba(17,26,46,.14);
  --white-a18: rgba(255,255,255,.18);
  --white-a30: rgba(255,255,255,.30);
  --white-a90: rgba(255,255,255,.90);
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --gutter: 40px;
  --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;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px }
html.nav-open { overflow:hidden }
body { margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip }
a { color:inherit;text-decoration:none }
button { font:inherit }
button,a,summary,[role="tab"] { -webkit-tap-highlight-color:transparent }
:is(a,button,summary,[role="tab"]):focus-visible { outline:2px solid var(--accent);outline-offset:3px }
ul { list-style:none;margin:0;padding:0 }
p { margin:0 }
img,svg { max-width:100% }
img { height:auto }
svg { flex-shrink:0 }
h1,h2,h3 { font-family:var(--font-display);color:var(--text);text-wrap:balance }
h1 { font-size:clamp(52px,5vw,72px);line-height:1.1;letter-spacing:-.02em;font-weight:900 }
h2 { font-size:clamp(32px,3.5vw,48px);line-height:1.16;letter-spacing:-.02em;font-weight:900 }
h3 { font-size:clamp(23px,2.5vw,34px);line-height:1.2;font-weight:900 }
.no-break { white-space:nowrap }
.wrap { width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter) }
.wrap > *,main > *,section > *,article > * { min-width:0 }
.sec { padding-top:88px;padding-bottom:88px }
.prose { max-width:78ch;line-height:1.85 }
.prose p,.prose ul,.prose ol { margin-block:0 1.25em }
.prose h2 { margin:2em 0 .65em }
.prose h3 { margin:1.5em 0 .6em }
.prose a { color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere }
pre { max-width:100%;overflow-x:auto;padding:20px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--bg-panel-2) }
pre code { overflow-wrap:normal;white-space:pre }
.reveal { transition:opacity .65s ease,transform .65s ease }
.reveal.pending { opacity:0;transform:translateY(16px) }
.reveal.shown { opacity:1;transform:none }
.panel { min-width:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 var(--white),0 20px 42px -25px var(--accent-a24) }
.eyebrow { font:700 11px/1.4 var(--font-mono);letter-spacing:.14em;color:var(--accent-dark) }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--radius-l);font-size:16px;font-weight:700;line-height:1.25;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease }
.btn:hover { transform:translateY(-1px) }
.btn-primary { color:var(--white);background:linear-gradient(100deg,var(--accent-dark),var(--accent) 48%,var(--accent-2) 130%);box-shadow:inset 0 1px 0 var(--white-a30),0 12px 26px -12px var(--accent-a60),0 2px 5px var(--accent-a18) }
.btn-ghost,.btn-secondary { background:var(--white);border-color:var(--border);color:var(--text);box-shadow:0 2px 6px -2px var(--ink-a06) }
.btn:disabled { opacity:.55;cursor:not-allowed;transform:none }
.announce { position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:16px;min-height:38px;padding:5px 20px;background:linear-gradient(90deg,var(--bar-from),var(--bar-to));color:var(--on-dark);font-size:13.5px;line-height:1.3 }
.announce::before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--on-dark-a04) 0 1px,transparent 1px 14px);pointer-events:none }
.announce-key { position:relative;font:10.5px var(--font-mono);letter-spacing:.16em;color:var(--on-dark-muted) }
.announce-text { position:relative }
.announce-dot { margin-inline:8px;color:var(--on-dark-muted) }
.pill-ghost { position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:2px 12px;border:1px solid var(--on-dark-a45);border-radius:var(--radius-pill);color:var(--on-dark);font-size:12.5px;font-weight:600;white-space:nowrap }
.pill-ghost:hover { background:var(--on-dark-a08) }
.stage { position:relative;overflow:clip;max-width:100%;background:linear-gradient(180deg,var(--stage-top),var(--stage-bottom)) }
.glow { position:absolute;inset:-22% -16% 30% 44%;background:radial-gradient(closest-side,var(--accent-a06) 0%,var(--accent-a06) 38%,transparent 100%);pointer-events:none;animation:drift 26s ease-in-out infinite alternate }
@keyframes drift { to { transform:translate3d(-5%,4%,0) scale(1.06) } }
.site-head { position:relative;z-index:5;padding:12px var(--gutter) 0 }
.nav-island { position:relative;max-width:1200px;min-height:56px;margin:auto;display:flex;align-items:center;gap:24px;padding:0 10px 0 18px;background:var(--panel-glass);border:1px solid var(--border-soft);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 var(--white),0 14px 32px -18px var(--accent-a30),0 2px 6px var(--ink-a04);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2) }
.brand { display:inline-flex;align-items:center;gap:10px;flex:none;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap }
.brand img { width:26px;height:26px;flex:none }
.brand-zh { color:var(--text-muted);font-weight:500 }
.dotnav { flex:1;display:flex;justify-content:center;min-width:0 }
.dotnav ul { display:flex;align-items:center;list-style:none;margin:0;padding:0 }
.dotnav li { display:flex;align-items:center }
.dotnav li+li::before { content:"·";margin:0 11px;color:var(--border-strong);font-weight:700 }
.dotnav a { position:relative;padding:6px 2px;font-size:14.5px;font-weight:500;color:var(--text-muted);white-space:nowrap }
.dotnav a:hover,.dotnav a[aria-current="page"] { color:var(--text) }
.dotnav a[aria-current="page"] { font-weight:700 }
.dotnav a[aria-current="page"]::after { content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;margin-left:-2px;border-radius:1px;background:var(--accent) }
.head-actions { display:flex;align-items:center;gap:6px;flex:none;margin-left:auto }
.lang-control { position:relative }
.lang { display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:36px;width:auto;padding:0 12px;border:0;border-radius:var(--radius-m);background:transparent;color:var(--text-muted);font-size:13.5px;white-space:nowrap;cursor:pointer }
.lang:hover { background:var(--accent-a06);color:var(--text) }
.lang-menu { position:absolute;right:0;top:calc(100% + 8px);z-index:10;min-width:150px;padding:6px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:0 18px 35px -15px var(--accent-a30) }
.lang-menu[hidden] { display:none }
.lang-menu a { display:flex;align-items:center;min-height:40px;padding:7px 12px;border-radius:var(--radius-s);white-space:nowrap }
.lang-menu a:hover,.lang-menu a[aria-current="true"] { background:var(--accent-a10);color:var(--accent-dark) }
.login { display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 18px;border-radius:var(--radius-m);background:var(--text);color:var(--white);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:inset 0 1px 0 var(--white-a18),0 6px 14px -8px var(--ink-a14) }
.login:hover { background:var(--text-soft) }
.menu-toggle { display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:var(--radius-m);background:transparent;color:var(--text);cursor:pointer }
.menu-toggle svg { width:22px;height:22px }
.mobile-nav { display:none }
.site-foot { margin-top:72px;padding-top:56px;background:var(--bar-from);color:var(--on-dark) }
.foot-grid { display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1fr;gap:36px }
.foot-grid h2 { margin:0 0 16px;color:var(--on-dark);font:700 12px var(--font-mono);letter-spacing:.12em }
.foot-grid p { margin:14px 0 0;color:var(--on-dark-muted);font-size:14px }
.foot-grid a:not(.brand) { display:inline-flex;align-items:center;min-height:28px;color:var(--on-dark-muted);font-size:14px }
.foot-grid a:hover { color:var(--white) }
.foot-grid li { margin-bottom:6px }
.foot-grid .brand { color:var(--white) }
.foot-keywords { display:flex;flex-wrap:wrap;gap:4px 14px }
.foot-bottom { display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;padding-bottom:24px;border-top:1px solid var(--on-dark-a18);color:var(--on-dark-muted);font:12px var(--font-mono) }
.foot-bottom a { display:inline-flex;align-items:center;min-height:24px;margin-left:16px }
#server-status { position:relative;display:block;max-width:100%;overflow:hidden;margin-bottom:32px }
#server-status + * { margin-top:32px }
@media (max-width:1200px) {
  .nav-island { gap:12px }
  .dotnav li+li::before { margin-inline:7px }
  .dotnav a { font-size:13px }
}
@media (max-width:1040px) {
  .dotnav { display:none }
  .head-actions { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-nav { position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:8;max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain;padding:10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:0 22px 42px -15px var(--accent-a30) }
  .mobile-nav.is-open { display:block }
  .mobile-nav a { display:flex;align-items:center;width:100%;min-height:44px;padding:10px 14px;border-radius:var(--radius-m);color:var(--text) }
  .mobile-nav a:hover,.mobile-nav a[aria-current="page"] { background:var(--accent-a10);color:var(--accent-dark) }
  .mobile-nav ul { list-style:none;margin:0;padding:0 }
  .mobile-nav .mobile-languages { margin-top:8px;padding-top:8px;border-top:1px solid var(--border) }
}
@media (max-width:768px) {
  :root { --gutter:16px }
  h1 { font-size:clamp(28px,8vw,40px);line-height:1.18;letter-spacing:-.02em }
  .announce { flex-wrap:wrap;gap:8px 12px;padding:8px 14px;font-size:12px }
  .announce-key { display:none }
  .site-head { padding-top:10px }
  .nav-island { padding:0 6px 0 12px }
  .sec { padding-top:64px;padding-bottom:64px }
  .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:30px }
}
@media (max-width:640px) {
  .no-break { white-space:normal }
  .lang { padding-inline:8px }
  .brand { font-size:15px }
  .login { padding-inline:12px }
  .foot-grid { grid-template-columns:1fr 1fr }
  .foot-grid > :first-child { grid-column:1 / -1 }
}
@media (max-width:360px) {
  .brand { gap:5px;font-size:13px }
  .brand img { width:23px;height:23px }
  .head-actions { gap:0 }
  .lang { padding-inline:4px;font-size:12px }
  .login { padding-inline:9px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .glow { animation:none }
  .reveal,.reveal.pending { opacity:1;transform:none;transition:none }
  .btn { transition:none }
}