:root{
--bg:#E5EEF4;--bg-fog:#DDEBF0;--panel:#F7FBFD;--panel-2:#D8E6EE;--border:#C6D7E1;--accent:#0F9F96;--accent-dark:#0A6F6A;--accent-2:#3BC9B8;--text:#0E1B26;--text-muted:#4E6170;--ink-2:#123A44;--success:#1E9E62;--warn:#C7841A;--error:#D2463B;--tile:#FFFFFF;--on-accent:#FFFFFF;--flag-blue:#24406E;--transparent:transparent;
--accent-a06:rgba(15,159,150,.06);--accent-a10:rgba(15,159,150,.10);--accent-a14:rgba(15,159,150,.14);--accent-a22:rgba(15,159,150,.22);--aqua-a16:rgba(59,201,184,.16);--aqua-a28:rgba(59,201,184,.28);--white-a40:rgba(255,255,255,.40);--white-a70:rgba(255,255,255,.70);--white-a90:rgba(255,255,255,.90);--ink-a06:rgba(14,27,38,.06);--ink-a12:rgba(14,27,38,.12);--on-dark:rgba(247,251,253,.80);--on-dark-line:rgba(247,251,253,.42);--glass:rgba(247,251,253,.66);--nav-glass:rgba(247,251,253,.84);--veil:rgba(14,27,38,.42);
--hl:inset 0 1px 0 rgba(255,255,255,.95);--shadow-float:0 30px 64px -26px rgba(15,159,150,.30),0 12px 44px rgba(15,159,150,.10),0 1px 2px rgba(14,27,38,.06);--shadow-hero:0 40px 80px -30px rgba(15,159,150,.38),0 18px 56px rgba(15,159,150,.12),0 1px 2px rgba(14,27,38,.06);--shadow-chip:0 10px 24px -10px rgba(15,159,150,.34),0 2px 6px rgba(14,27,38,.05);--shadow-tile:0 6px 14px -8px rgba(15,159,150,.32);--shadow-nav:0 14px 36px -20px rgba(15,159,150,.34);--shadow-login:0 8px 18px -10px rgba(15,159,150,.7);--shadow-button:0 16px 30px -14px rgba(15,159,150,.75),0 2px 4px rgba(10,111,106,.2);
--r-xs:6px;--r-sm:8px;--r:10px;--r-lg:16px;--r-pill:999px;--r-round:50%;
--font-display:"Inter","Noto Sans SC","PingFang SC","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;--font-mono-zh:"JetBrains Mono","Noto Sans SC","PingFang SC",ui-monospace,Menlo,Consolas,monospace;
--gutter:24px;--content-width:1328px;--reading-width:820px;--section-space:88px;--anchor-gap:96px;--toc-offset:16px;--toc-landing:92px;--display-size:66px;--heading-size:40px;--body-size:16px;--small-size:13px;--ease:cubic-bezier(.2,.7,.2,1);--fast:.2s;--reveal-time:.35s;--mobile-header:130px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--anchor-gap)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--body-size);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed}
button{border:0}
a,button,summary,[tabindex]{-webkit-tap-highlight-color:var(--accent-a14)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
[hidden]{display:none!important}
img,svg{vertical-align:middle}
img{max-width:100%;height:auto}
svg{flex-shrink:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(52px,5vw,var(--display-size));line-height:1.1;font-weight:900;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.5vw,var(--heading-size));font-weight:900;line-height:1.2;letter-spacing:-.02em}
h3{font-size:22px;line-height:1.35;font-weight:800}
p{overflow-wrap:break-word}
code{font-family:var(--font-mono);overflow-wrap:anywhere;background:var(--accent-a06);border-radius:var(--r-xs);padding:2px 5px}
pre{max-width:100%;overflow-x:auto;padding:20px;background:var(--text);color:var(--panel);border-radius:var(--r);font-family:var(--font-mono)}
pre code{padding:0;background:var(--transparent);white-space:pre;overflow-wrap:normal}
.no-break{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--content-width);margin-inline:auto;padding-inline:var(--gutter)}
.reading-wrap{max-width:var(--reading-width);margin-inline:auto;min-width:0}
.sec{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.section-head{margin-bottom:32px;max-width:780px}
.section-head p{margin-top:16px;color:var(--text-muted)}
.grid{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.grid>*{min-width:0}
.mono{font-family:var(--font-mono-zh)}
.muted{color:var(--text-muted)}
.kicker{font:700 12px/1.5 var(--font-mono-zh);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:16px}
.panel,.card{position:relative;min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--hl),var(--shadow-float)}
.panel{padding:28px}
.card{transition:box-shadow .45s var(--ease)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 24px;border:1px solid var(--transparent);border-radius:var(--r);font-size:16px;font-weight:700;letter-spacing:-.005em;line-height:1.4;flex-shrink:0;white-space:nowrap;transition:transform var(--fast),box-shadow var(--fast),filter var(--fast)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{position:relative;overflow:hidden;color:var(--on-accent);background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 52%,var(--accent-2) 135%);box-shadow:inset 0 1px 0 var(--white-a40),var(--shadow-button)}
.btn-primary::before{content:"";position:absolute;inset:0 0 50%;background:linear-gradient(180deg,var(--white-a40),var(--transparent));opacity:.45;pointer-events:none}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost,.btn-secondary{color:var(--text);background:var(--panel);border-color:var(--border);box-shadow:var(--hl),var(--shadow-tile)}
.btn-ghost:hover,.btn-secondary:hover{border-color:var(--accent);color:var(--accent-dark)}
.btn-small{min-height:40px;padding:8px 16px;font-size:14px;border-radius:var(--r-sm)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;box-shadow:none}
.cta-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.topbar{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;min-height:40px;padding:6px 24px;background:linear-gradient(90deg,var(--text),var(--ink-2) 62%,var(--text));color:var(--on-dark);font-size:13.5px}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2) 55%,var(--accent))}
.topbar-msg strong{color:var(--panel);font-weight:700}
.topbar-sep{margin:0 8px;color:var(--on-dark-line)}
.topbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:0 12px;border:1px solid var(--on-dark-line);border-radius:var(--r-pill);color:var(--panel);font-size:12.5px;font-weight:600}
.topbar-btn:hover{border-color:var(--accent-2);background:var(--aqua-a16)}
#site-header{position:relative;z-index:50}
.navwrap{position:relative;z-index:53;background:var(--bg-fog);padding-top:14px}
.nav{width:min(1280px,100% - 32px);margin-inline:auto;height:60px;display:flex;align-items:center;flex-wrap:nowrap;gap:28px;padding:0 12px 0 18px;background:var(--nav-glass);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--hl),var(--shadow-nav)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:-.02em;color:var(--text);flex-shrink:0;white-space:nowrap;min-height:30px}
.brand img{width:30px;height:30px;flex-shrink:0}
.desktop-nav{flex:1;min-width:0}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links li{flex-shrink:0}
.nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--text-muted);opacity:.86;white-space:nowrap}
.nav-link:hover{color:var(--text);opacity:1}
.nav-link.is-current{background:var(--accent-a10);color:var(--accent-dark);font-weight:700;opacity:1;box-shadow:inset 0 0 0 1px var(--accent-a14)}
.nav-tools{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.language{position:relative}
.lang-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;width:auto;min-height:36px;padding:0 12px;background:var(--transparent);border-radius:var(--r-sm);font-size:13.5px;color:var(--text-muted);white-space:nowrap}
.lang-button span{white-space:nowrap}
.lang-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.language-panel{position:absolute;z-index:60;right:0;top:calc(100% + 10px);min-width:170px;padding:6px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-float)}
.language-panel a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:var(--r-xs)}
.language-panel a:hover,.language-panel a[aria-current]{background:var(--accent-a10);color:var(--accent-dark)}
.btn-login{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border-radius:var(--r-sm);background:linear-gradient(180deg,var(--accent),var(--accent-dark) 130%);color:var(--on-accent);font-size:14px;font-weight:700;box-shadow:inset 0 1px 0 var(--white-a40),var(--shadow-login);white-space:nowrap}
.btn-login:hover{filter:brightness(1.06)}
.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:44px;min-height:44px;padding:8px;border-radius:var(--r-sm);background:var(--accent-a06);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(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:52;top:var(--mobile-header);right:0;left:0;height:calc(100dvh - var(--mobile-header));max-height:calc(100dvh - var(--mobile-header));overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gutter) 32px;background:var(--panel);border-top:1px solid var(--border)}
.mobile-drawer a{display:flex;align-items:center;width:100%;min-height:44px;padding:12px 16px;border-radius:var(--r-sm)}
.mobile-drawer a:hover,.mobile-drawer a.is-current{background:var(--accent-a10);color:var(--accent-dark)}
.drawer-languages{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
.menu-veil{position:fixed;z-index:51;inset:var(--mobile-header) 0 0;background:var(--veil)}
html.nav-open{overflow:hidden}
.site-footer{border-top:1px solid var(--border);background:var(--panel-2);padding-top:56px;padding-bottom:28px}
.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px}
.footer-grid>*{min-width:0}
.footer-brand p{margin-top:18px;max-width:350px;color:var(--text-muted);font-size:14px}
.footer-title{font-size:14px;font-weight:800;margin-bottom:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-links a,.footer-languages a,.footer-legal a{display:inline-flex;align-items:center;min-height:28px;font-size:13px;color:var(--text-muted)}
.footer-links a:hover,.footer-languages a:hover,.footer-legal a:hover{color:var(--accent-dark);text-decoration:underline}
.footer-languages{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:32px}
.footer-languages a[aria-current]{font-weight:700;color:var(--accent-dark)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border);font:12px/1.7 var(--font-mono-zh);color:var(--text-muted)}
.footer-legal{display:flex;flex-wrap:wrap;gap:16px}
.prose{min-width:0;line-height:1.85}
.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote{margin-block:18px}
.prose h2{margin-top:48px;margin-bottom:20px}
.prose h3{margin-top:28px;margin-bottom:12px}
.prose ul{list-style:disc;padding-left:24px}
.prose ol{list-style:decimal;padding-left:24px}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.reveal{transition:opacity var(--reveal-time),transform var(--reveal-time)}
.reveal.pending{opacity:0;transform:translateY(16px)}
.reveal.shown{opacity:1;transform:none}
#server-status{position:relative;display:block;min-height:120px;max-width:100%;overflow:hidden;margin-block:24px}
#server-status>*{min-width:0;max-width:100%}
#server-status+*{margin-top:32px}
@media(max-width:1180px){
.nav{gap:16px}
.desktop-nav{display:none}
.menu-toggle{display:inline-flex}
.nav-tools{margin-left:auto}
.topbar{height:56px}
.navwrap{height:74px}
}
@media(min-width:1181px){.mobile-drawer,.menu-veil{display:none!important}}
@media(max-width:768px){
:root{--gutter:20px;--section-space:56px}
h1{font-size:38px;line-height:1.15}
.grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
:root{--gutter:16px}
.no-break{white-space:normal}
.topbar{flex-wrap:wrap;gap:2px;font-size:11px;text-align:center;padding:4px 16px}
.topbar-msg{width:100%}
.topbar-btn{min-height:24px;font-size:11px}
.topbar-sep{margin-inline:3px}
.nav{gap:6px;padding-inline:10px}
.brand{font-size:16px;gap:6px}
.brand img{width:26px;height:26px}
.nav-tools{gap:4px;margin-left:auto}
.lang-button{padding-inline:6px;font-size:11px;gap:3px}
.lang-button svg{display:none}
.btn-login{padding-inline:10px;font-size:13px}
.menu-toggle{min-width:44px}
.panel{padding:20px}
.tilt,.float-tip,.float-pill,[data-tilt]{transform:none}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.reveal,.reveal.pending{opacity:1;transform:none}
}