:root {
  --bg:#E8EDF6;
  --bg-top:#EEF2F9;
  --bg-bottom:#E2E8F3;
  --panel:#F8FAFE;
  --panel-2:#DCE3F0;
  --border:#C9D3E4;
  --accent:#B8128A;
  --accent-dark:#8A0B66;
  --text:#121726;
  --muted:#586176;
  --success:#13865A;
  --warn:#B26A00;
  --error:#C62A3A;
  --white:#FFFFFF;
  --ink-blue:#1D2759;
  --flag-red:#C62A3A;
  --flag-blue:#26386F;
  --flag-white:#FFFFFF;
  --clear:transparent;
  --accent-0:rgba(184,18,138,0);
  --accent-10:rgba(184,18,138,.10);
  --accent-12:rgba(184,18,138,.12);
  --accent-22:rgba(184,18,138,.22);
  --success-10:rgba(19,134,90,.10);
  --ink-04:rgba(18,23,38,.04);
  --ink-06:rgba(18,23,38,.06);
  --ink-14:rgba(18,23,38,.14);
  --ink-veil:rgba(18,23,38,.40);
  --white-12:rgba(255,255,255,.12);
  --white-60:rgba(255,255,255,.6);
  --white-72:rgba(255,255,255,.72);
  --white-90:rgba(255,255,255,.9);
  --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,'SFMono-Regular',Menlo,Consolas,monospace;
  --fs-xxs:9.5px;
  --fs-micro:10.5px;
  --fs-label:11px;
  --fs-xs:12px;
  --fs-code:12.5px;
  --fs-sm:13px;
  --fs-detail:13.5px;
  --fs-note:14px;
  --fs-nav-small:14.5px;
  --fs-nav:15px;
  --fs-body:16px;
  --fs-lede-mobile:17px;
  --fs-brand-small:18px;
  --fs-lede:20px;
  --fs-h3:24px;
  --fs-h2:clamp(28px,3vw,40px);
  --fs-h1:clamp(52px,5vw,68px);
  --fs-price:44px;
  --fs-hero:68px;
  --fs-hero-mid:60px;
  --fs-hero-small:40px;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:600;
  --r-xs:2px;
  --r-sm:4px;
  --r-md:6px;
  --r-pill:999px;
  --r-round:50%;
  --gutter:max(24px, calc((100vw - 1280px) / 2));
  --wrap-gutter:24px;
  --content-width:1328px;
  --reading-width:840px;
  --head-height:64px;
  --announce-height:40px;
  --menu-top:104px;
  --anchor-offset:80px;
  --toc-offset:88px;
  --hl-edge:inset 0 0 0 1px var(--white-90);
  --lift:0 1px 2px var(--ink-06),0 24px 64px -18px var(--accent-12),0 44px 100px -36px var(--accent-10);
  --lift-sm:0 1px 2px var(--ink-06),0 16px 36px -14px var(--accent-12);
  --duration-fast:.18s;
  --duration-reveal:.35s;
  --ease-out:cubic-bezier(.2,.65,.3,1);
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:var(--anchor-offset); scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.nav-open { overflow:hidden; }
[hidden] { display:none !important; }
img { max-width:100%; height:auto; display:block; }
svg { flex-shrink:0; }
button,input,select,textarea { font:inherit; color:inherit; }
button,summary { cursor:pointer; }
button { border-radius:var(--r-xs); }
a { color:inherit; text-underline-offset:.2em; }
:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
::selection { background:var(--accent-22); color:var(--text); }
h1,h2,h3,h4,p,ul,ol,figure,blockquote { margin-top:0; }
h1,h2,h3 { font-family:var(--font-display); font-weight:var(--weight-regular); text-wrap:balance; }
h1 { font-size:var(--fs-h1); line-height:1.12; letter-spacing:-.02em; margin-bottom:24px; }
h2 { font-size:var(--fs-h2); line-height:1.2; letter-spacing:-.02em; margin-bottom:24px; }
h3 { font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.015em; margin-bottom:16px; }
p { margin-bottom:20px; }
strong,b { font-weight:var(--weight-bold); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; font-size:.9em; }
pre { overflow-x:auto; max-width:100%; padding:20px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); }
pre code { overflow-wrap:normal; white-space:pre; }
hr { border:0; border-top:1px solid var(--border); margin:32px 0; }
.wrap { width:100%; max-width:var(--content-width); margin-inline:auto; padding-inline:var(--wrap-gutter); }
.reading-wrap { width:100%; max-width:var(--reading-width); margin-inline:auto; padding-inline:var(--wrap-gutter); }
.sec { padding-top:80px; padding-bottom:80px; }
.section-head { max-width:760px; margin-bottom:40px; }
.section-head p { color:var(--muted); }
.prose { min-width:0; line-height:1.85; overflow-wrap:break-word; }
.prose h2 { margin-top:56px; }
.prose h3 { margin-top:32px; }
.prose li + li { margin-top:8px; }
.prose img { border-radius:var(--r-sm); }
.no-break { white-space:nowrap; }
.muted { color:var(--muted); }
.mono { font-family:var(--font-mono); }
.eyebrow { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.skip { position:absolute; left:16px; top:8px; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip:focus { width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; z-index:99; background:var(--panel); padding:8px 12px; border:1px solid var(--border); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.icon { width:24px; height:24px; flex-shrink:0; }
.panel,.card { min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--hl-edge),var(--lift-sm); }
.card { padding:24px; }
.panel-inset { background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.content-grid { position:relative; overflow-x:clip; background-image:linear-gradient(var(--ink-04) 1px,var(--clear) 1px),linear-gradient(90deg,var(--ink-04) 1px,var(--clear) 1px); background-size:48px 48px; }
.decorated { position:relative; overflow-x:clip; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.grid-5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.grid-3 > *,.grid-5 > * { min-width:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:12px 28px; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.5; text-decoration:none; border-radius:var(--r-xs); border:1px solid var(--text); flex-shrink:0; white-space:nowrap; cursor:pointer; }
.btn svg { width:14px; height:14px; }
.btn-solid,.btn-primary { background:var(--text); color:var(--white); }
.btn-solid:hover,.btn-primary:hover { background:var(--ink-blue); border-color:var(--ink-blue); }
.btn-line,.btn-secondary { background:var(--white); color:var(--text); }
.btn-line:hover,.btn-secondary:hover { background:var(--panel-2); }
.btn:active { transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.btn-small { min-height:44px; padding:9px 16px; font-size:var(--fs-note); }
.cta-row { margin-top:40px; display:flex; flex-wrap:wrap; gap:16px; }
.reveal { transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out); }
.reveal.pending { opacity:0; transform:translateY(16px); }
.reveal.shown { opacity:1; transform:none; }
#server-status { position:relative; display:block; min-height:160px; width:100%; max-width:100%; overflow:hidden; margin-block:24px; }
#server-status > * { min-width:0; max-width:100%; }
#server-status + * { margin-top:24px; }

/* Shared header */
#site-header { position:relative; z-index:60; }
.announce { height:var(--announce-height); display:flex; align-items:center; justify-content:center; gap:16px; padding:0 16px; background:linear-gradient(90deg,var(--text) 0%,var(--ink-blue) 36%,var(--accent-dark) 78%,var(--accent) 100%); color:var(--white); font-size:var(--fs-note); letter-spacing:-.005em; }
.announce p { margin:0; }
.announce-btn { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:28px; padding:0 12px; background:var(--text); color:var(--white); font-size:var(--fs-detail); text-decoration:none; border-radius:var(--r-xs); white-space:nowrap; }
.announce-btn:hover { background:var(--ink-blue); }
.announce-btn svg { width:12px; height:12px; }
.site-head { position:relative; z-index:63; height:var(--head-height); display:flex; align-items:stretch; flex-wrap:nowrap; padding-left:var(--gutter); background:var(--panel); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-size:var(--fs-lede); font-weight:var(--weight-medium); letter-spacing:-.02em; flex-shrink:0; white-space:nowrap; }
.brand img { width:30px; height:30px; flex:none; }
.brand-zh { color:var(--muted); font-weight:var(--weight-regular); }
.desktop-nav { display:flex; flex:1; min-width:0; margin-left:48px; }
.nav-links { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px; height:100%; }
.nav-links > li { display:flex; position:relative; height:100%; }
.nav-links a,.more > .more-toggle { display:flex; align-items:center; gap:6px; padding:0 14px; font-size:var(--fs-nav); color:var(--text); text-decoration:none; cursor:pointer; position:relative; white-space:nowrap; }
.nav-links a:hover,.more > .more-toggle:hover { background:var(--bg-top); }
.nav-links a[aria-current="page"]::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--text); }
.more { display:flex; position:relative; }
.more > .more-toggle { background:transparent; border:0; border-radius:0; }
.caret { font-size:var(--fs-label); color:var(--muted); }
.more-menu { position:absolute; top:100%; left:0; z-index:65; width:264px; padding:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--hl-edge),var(--lift-sm); }
.more-group + .more-group { margin-top:4px; padding-top:4px; border-top:1px solid var(--border); }
.more-label { display:block; padding:8px 10px 4px; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.more-menu a { display:block; height:auto; padding:8px 10px; border-radius:var(--r-sm); }
.more-menu a small { display:block; font-size:var(--fs-code); color:var(--muted); }
.more-menu a:hover { background:var(--panel-2); }
.more.has-current > .more-toggle { box-shadow:inset 0 -2px var(--text); }
.head-right { margin-left:auto; display:flex; align-items:stretch; flex-shrink:0; }
.lang-picker { position:relative; display:flex; }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; width:auto; padding:0 24px; background:var(--clear); border:0; border-left:1px solid var(--border); font:inherit; font-size:var(--fs-nav-small); color:var(--text); cursor:pointer; }
.lang span { white-space:nowrap; }
.lang:hover { background:var(--bg-top); }
.lang-menu { position:absolute; right:0; top:100%; z-index:70; width:184px; padding:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--hl-edge),var(--lift-sm); }
.lang-menu a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; text-decoration:none; font-size:var(--fs-note); border-radius:var(--r-sm); }
.lang-menu a:hover,.lang-menu a[aria-current] { background:var(--panel-2); }
.login { display:inline-flex; align-items:center; justify-content:center; padding:0 40px; min-height:44px; background:var(--text); color:var(--white); font-size:var(--fs-nav); text-decoration:none; white-space:nowrap; }
.login:hover { background:var(--ink-blue); }
.menu-toggle { display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; min-width:44px; min-height:44px; background:var(--panel); color:var(--text); border:0; border-left:1px solid var(--border); }
.menu-line { display:block; width:20px; height:2px; background:currentColor; }
.menu-toggle[aria-expanded="true"] .menu-line:first-child { transform:translateY(6px) 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(-6px) rotate(-45deg); }
.mobile-drawer { position:fixed; z-index:62; top:var(--menu-top); left:0; right:0; height:calc(100dvh - var(--menu-top)); max-height:calc(100dvh - var(--menu-top)); padding:20px var(--wrap-gutter) 40px; overflow-y:auto; overscroll-behavior:contain; background:var(--panel); border-top:1px solid var(--border); }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; text-decoration:none; border-bottom:1px solid var(--border); }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--panel-2); }
.drawer-label { display:block; margin-top:24px; padding:12px 16px; color:var(--muted); font-family:var(--font-mono); font-size:var(--fs-xs); }
.nav-veil { position:fixed; z-index:61; top:var(--menu-top); bottom:0; left:0; right:0; background:var(--ink-veil); border:0; width:100%; }

/* Footer */
.site-foot { background:var(--panel-2); border-top:1px solid var(--border); padding-top:56px; padding-bottom:24px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.footer-grid > * { min-width:0; }
.footer-brand p { max-width:320px; margin-top:24px; color:var(--muted); font-size:var(--fs-note); }
.footer-title { font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em; margin-bottom:16px; }
.footer-list { display:grid; gap:4px; list-style:none; margin:0; padding:0; }
.footer-list a { display:inline-flex; align-items:center; min-height:32px; padding-block:4px; text-decoration:none; font-size:var(--fs-note); }
.footer-list a:hover { text-decoration:underline; }
.footer-bottom { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; font-size:var(--fs-code); color:var(--muted); }
.footer-bottom p { margin:0; }
.legal-links { display:flex; flex-wrap:wrap; gap:16px; }
.legal-links a { display:inline-flex; align-items:center; min-height:28px; }

@media (max-width:1180px) {
  .desktop-nav { margin-left:28px; }
}
@media (max-width:1050px) {
  .desktop-nav { margin-left:20px; }
  .nav-links a,.more > .more-toggle { padding-inline:10px; }
  .lang { padding-inline:16px; }
  .login { padding-inline:24px; }
}
@media (max-width:900px) {
  .desktop-nav { display:none; }
  .head-right { margin-left:auto; }
  .menu-toggle { display:flex; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:901px) {
  .mobile-drawer,.nav-veil { display:none; }
}
@media (max-width:768px) {
  h1 { font-size:var(--fs-hero-small); }
  .sec { padding-top:48px; padding-bottom:48px; }
  .grid-3 { grid-template-columns:1fr; }
  .announce p { font-size:var(--fs-sm); }
  .lang { padding-inline:14px; }
  .login { padding-inline:20px; }
}
@media (max-width:640px) {
  :root { --wrap-gutter:16px; --gutter:16px; }
  .no-break { white-space:normal; }
  .announce-btn { display:none; }
  .announce p { font-size:var(--fs-xs); text-align:center; }
  .brand { font-size:var(--fs-brand-small); gap:8px; }
  .lang { padding-inline:8px; gap:4px; font-size:var(--fs-xs); }
  .login { padding-inline:14px; font-size:var(--fs-note); }
  .tilt,.decorated .tilt { transform:none; }
  .decorated > [aria-hidden="true"] { max-width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .footer-brand { grid-column:1 / -1; }
  .grid-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:360px) {
  .brand { font-size:var(--fs-body); gap:6px; }
  .brand img { width:26px; height:26px; }
  .login { padding-inline:10px; }
  .lang { padding-inline:6px; font-size:var(--fs-label); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal,.reveal.pending,.reveal.shown { opacity:1; transform:none; transition:none; }
  .btn:active { transform:none; }
}