:root {
  color-scheme: light;
  --bg: #FBF8F9;
  --panel: #FFFFFF;
  --panel-2: #F3EFF2;
  --border: #E8E2E6;
  --accent: #0B93D9;
  --accent-dark: #0670AD;
  --text: #17151C;
  --text-2: #3D3944;
  --muted: #6A6571;
  --success: #1FA45B;
  --warn: #E39A0C;
  --error: #D63A3A;
  --hero-top: #FFFFFF;
  --hero-bottom: #F6F2F4;
  --white-rgb: 255 255 255;
  --accent-rgb: 11 147 217;
  --text-rgb: 23 21 28;
  --border-rgb: 232 226 230;
  --panel2-rgb: 243 239 242;
  --success-rgb: 31 164 91;
  --c-sky: 74 184 240;
  --c-pink: 246 152 198;
  --c-iris: 128 146 240;
  --c-leaf: 112 204 92;
  --c-tang: 255 152 60;
  --c-sun: 255 200 60;
  --flag-white: #FFFFFF;
  --flag-sg: #E8303F;
  --flag-hk: #DE2910;
  --flag-jp: #C8102E;
  --flag-us-red: #C9283A;
  --flag-us-blue: #26337A;
  --flag-fr-blue: #22409A;
  --flag-fr-red: #E1323B;
  --font-display: "Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Microsoft YaHei","Malgun Gothic",sans-serif;
  --font-body: "Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Microsoft YaHei","Malgun Gothic",system-ui,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-block: 36px;
  --r-window: 28px;
  --r-panel: 24px;
  --r-menu: 20px;
  --r-cell: 18px;
  --r-item: 14px;
  --r-tile: 12px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-keyword: .2em;
  --shadow-panel: 0 36px 80px -22px rgb(var(--accent-rgb) / .16),0 14px 34px -12px rgb(var(--accent-rgb) / .10);
  --shadow-chip: 0 6px 16px -8px rgb(var(--accent-rgb) / .26);
  --edge-hi: inset 0 1px 0 rgb(var(--white-rgb)),inset 0 0 0 1px rgb(var(--accent-rgb) / .06);
  --gutter: 24px;
  --wrap-width: 1160px;
  --head-height: 68px;
  --anchor-space: 84px;
  --toc-space: 152px;
  --duration-fast: .2s;
  --duration-reveal: .35s;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--anchor-space); }
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; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.25; text-wrap:balance; }
h1 { font-size:clamp(52px,4.6vw,66px); font-weight:var(--weight-display); letter-spacing:-.02em; }
h2 { font-size:clamp(28px,3vw,40px); font-weight:var(--weight-display); letter-spacing:-.02em; margin:0 0 24px; }
h3 { font-size:22px; margin:0 0 16px; }
p { margin:0 0 20px; }
a { color:var(--accent-dark); text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button,summary,a { -webkit-tap-highlight-color:rgb(var(--accent-rgb) / .12); }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
img,video { display:block; max-width:100%; height:auto; }
svg { flex-shrink:0; }
button { color:inherit; }
[hidden] { display:none !important; }
:where(.grid,.head-inner,.footer-grid,.plan-grid,.platform-grid,.article-grid) > * { min-width:0; }
.wrap { width:100%; max-width:var(--wrap-width); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-top:80px; padding-bottom:80px; }
.section-head { max-width:720px; margin:0 auto 40px; text-align:center; }
.section-head p { color:var(--muted); font-size:18px; }
.reading-wrap,.prose { min-width:0; max-width:800px; margin-inline:auto; }
.prose { overflow-wrap:break-word; }
.prose h2 { margin-top:48px; }
.prose h3 { margin-top:32px; }
.prose li { margin-bottom:10px; }
.prose img { border-radius:var(--r-cell); }
code { font-family:var(--font-mono); font-size:.9em; overflow-wrap:anywhere; background:var(--panel-2); border-radius:var(--r-tile); padding:2px 5px; }
pre { max-width:100%; overflow-x:auto; padding:24px; background:var(--panel-2); border-radius:var(--r-cell); }
pre code { padding:0; overflow-wrap:normal; white-space:pre; }
.no-break { white-space:nowrap; }
.muted { color:var(--muted); }
.mono { font-family:var(--font-mono); }
.panel,.card { background:var(--panel); border-radius:var(--r-panel); box-shadow:var(--shadow-panel),var(--edge-hi); padding:32px; min-width:0; }
.decor-section { position:relative; overflow-x:clip; max-width:100%; }
.counter-number,[data-counter] { display:inline-block; min-width:3ch; font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:center; }
.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; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:10px 30px; border:0; border-radius:var(--r-pill); font-family:var(--font-body); font-size:17px; font-weight:var(--weight-bold); line-height:1.4; text-align:center; text-decoration:none; flex-shrink:0; white-space:nowrap; transition:transform var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast); }
.btn-primary { background:var(--accent); color:var(--panel); box-shadow:0 16px 30px -14px rgb(var(--accent-rgb) / .75),inset 0 1px 0 rgb(var(--white-rgb) / .28); }
.btn-primary:hover,.btn-primary:active { background:var(--accent-dark); transform:translateY(-1px); }
.btn-soft,.btn-secondary { background:var(--panel-2); color:var(--accent-dark); }
.btn-soft:hover,.btn-secondary:hover { background:var(--border); }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); box-shadow:none; cursor:not-allowed; transform:none; }
.btn-small { min-height:44px; padding:8px 20px; font-size:14px; }
.cta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:32px; padding:5px 14px 5px 12px; max-width:100%; border-radius:var(--r-pill); background:var(--panel); box-shadow:0 6px 18px -6px rgb(var(--accent-rgb) / .24),inset 0 0 0 1px rgb(var(--border-rgb) / .9); font-size:13px; font-weight:var(--weight-semibold); color:var(--text-2); }
.badge-dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-circle); background:var(--accent); box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .16); }
.badge b { font-family:var(--font-mono); color:var(--accent-dark); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip,.tag { display:inline-block; max-width:100%; padding:5px 12px; border-radius:var(--r-pill); background:var(--panel); font-family:var(--font-mono); font-size:12px; font-weight:var(--weight-semibold); color:var(--text-2); box-shadow:inset 0 0 0 1px var(--border); overflow-wrap:anywhere; }
.chip.on { background:rgb(var(--accent-rgb) / .1); color:var(--accent-dark); box-shadow:inset 0 0 0 1px rgb(var(--accent-rgb) / .3); }
.site-head { position:sticky; top:0; z-index:50; background:rgb(var(--white-rgb) / .84); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 1px 0 rgb(var(--border-rgb) / .75); }
#site-header { position:sticky; top:0; z-index:50; }
#site-header .site-head { position:relative; }
.head-inner { max-width:1376px; height:var(--head-height); margin-inline:auto; padding-inline:32px; display:flex; flex-wrap:nowrap; align-items:center; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; font-family:var(--font-display); font-weight:var(--weight-display); font-size:20px; letter-spacing:-.02em; color:var(--text); }
.brand img { width:34px; height:34px; filter:drop-shadow(0 6px 10px rgb(var(--accent-rgb) / .28)); }
.nav { display:flex; justify-content:center; flex:1; min-width:0; }
.nav-list { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px; }
.nav-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 16px; border:0; border-radius:var(--r-pill); background:none; font-family:inherit; font-size:15px; font-weight:var(--weight-semibold); color:var(--text); text-decoration:none; white-space:nowrap; transition:background-color var(--duration-fast); }
.nav-link:hover,.nav-link[aria-current="page"] { background:var(--panel-2); }
.caret { font-size:12px; color:var(--muted); }
.nav-more { position:relative; list-style:none; }
.nav-more > summary { list-style:none; cursor:pointer; }
.nav-more > summary::-webkit-details-marker { display:none; }
.more-menu { position:absolute; top:calc(100% + 12px); left:50%; z-index:70; min-width:248px; padding:8px; border-radius:var(--r-menu); background:var(--panel); box-shadow:var(--shadow-panel),var(--edge-hi); transform:translateX(-50%); }
.more-menu a { display:block; min-height:44px; padding:10px 14px; border-radius:var(--r-item); text-decoration:none; color:var(--text); }
.more-menu a:hover,.more-menu a[aria-current="page"] { background:var(--panel-2); }
.more-menu strong { display:block; font-size:14px; }
.more-menu span { display:block; font-size:12px; color:var(--muted); line-height:1.4; }
.head-actions { margin-left:auto; display:flex; align-items:center; flex-shrink:0; gap:8px; }
.lang { position:relative; }
.lang-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; min-width:44px; min-height:44px; padding:6px 10px; background:none; border:0; border-radius:var(--r-pill); color:var(--text-2); cursor:pointer; }
.lang-button svg { width:17px; height:17px; color:var(--muted); }
.lang-text { white-space:nowrap; font-size:14px; }
.lang-panel { position:absolute; right:0; top:calc(100% + 10px); z-index:80; width:190px; padding:8px; background:var(--panel); border-radius:var(--r-menu); box-shadow:var(--shadow-panel),var(--edge-hi); }
.lang-panel a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:var(--r-item); text-decoration:none; color:var(--text); }
.lang-panel a:hover,.lang-panel a[aria-current="true"] { background:var(--panel-2); color:var(--accent-dark); }
.btn-login { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 22px; border-radius:var(--r-pill); background:var(--accent); color:var(--panel); font-size:15px; font-weight:var(--weight-bold); text-decoration:none; white-space:nowrap; box-shadow:0 10px 22px -10px rgb(var(--accent-rgb) / .7),inset 0 1px 0 rgb(var(--white-rgb) / .25); }
.btn-login:hover { background:var(--accent-dark); }
.menu-toggle { display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; min-width:44px; min-height:44px; padding:10px; border:0; border-radius:var(--r-tile); background:var(--panel-2); color:var(--text); }
.menu-line { display:block; width:20px; height:2px; background:currentColor; border-radius:var(--r-pill); }
.mobile-drawer { position:fixed; top:var(--head-height); right:0; left:0; height:calc(100dvh - var(--head-height)); max-height:calc(100dvh - var(--head-height)); z-index:48; overflow-y:auto; overscroll-behavior:contain; padding:20px var(--gutter) 40px; background:var(--panel); }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; color:var(--text); text-decoration:none; border-radius:var(--r-item); }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--panel-2); color:var(--accent-dark); }
.drawer-label { margin:20px 16px 8px; color:var(--muted); font-size:13px; }
html.nav-open { overflow:hidden; }
.site-footer { padding-top:64px; padding-bottom:32px; background:var(--panel-2); box-shadow:inset 0 1px 0 rgb(var(--white-rgb)); }
.footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:48px; }
.footer-brand p { max-width:340px; margin-top:20px; color:var(--text-2); font-size:14px; }
.footer-title { font-size:15px; margin:0 0 16px; font-weight:var(--weight-bold); }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; list-style:none; margin:0; padding:0; }
.footer-links a,.footer-languages a,.footer-legal a { display:inline-flex; align-items:center; min-height:32px; font-size:14px; color:var(--text-2); text-decoration:none; }
.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 24px; margin-top:32px; }
.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-size:13px; color:var(--muted); }
.footer-legal { display:flex; flex-wrap:wrap; gap:8px 20px; }
#server-status { position:relative; display:block; min-width:0; width:100%; max-width:100%; min-height:160px; overflow:hidden; margin-top:24px; margin-bottom:32px; }
#server-status + * { margin-top:32px; }
#server-status > * { min-width:0; max-width:100%; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.fl-white { fill:var(--flag-white); }
.fl-sg { fill:var(--flag-sg); }
.fl-hk { fill:var(--flag-hk); }
.fl-jp { fill:var(--flag-jp); }
.fl-us-r { fill:var(--flag-us-red); }
.fl-us-b { fill:var(--flag-us-blue); }
.fl-fr-b { fill:var(--flag-fr-blue); }
.fl-fr-r { fill:var(--flag-fr-red); }
.st-sky { stop-color:rgb(var(--c-sky)); }
.st-accent { stop-color:var(--accent); }
.st-deep { stop-color:var(--accent-dark); }
.st-leaf { stop-color:rgb(var(--c-leaf)); }
.st-success { stop-color:var(--success); }
.lg-fill { fill:var(--panel); }
.lg-stroke { stroke:var(--panel); }
.hex-hl { stroke:rgb(var(--white-rgb) / .5); }
@media (max-width:1100px) {
  .head-inner { gap:12px; padding-inline:24px; }
  .nav-link { padding-inline:11px; font-size:14px; }
}
@media (max-width:960px) {
  .nav { display:none; }
  .head-actions { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
}
@media (max-width:768px) {
  :root { --head-height:60px; --anchor-space:76px; --toc-space:140px; --gutter:16px; }
  h1 { font-size:clamp(28px,7vw,36px); }
  h2 { font-size:28px; }
  .head-inner { padding-inline:16px; gap:8px; }
  .lang-text { display:none; }
  .section { padding-top:56px; padding-bottom:56px; }
  .panel,.card { padding:24px; }
  .btn { min-height:48px; padding:10px 24px; font-size:16px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .no-break { white-space:normal; }
  .tilt,[data-tilt] { transform:none; }
  .decor-section { max-width:100%; overflow-x:clip; }
  .head-actions { gap:4px; margin-left:auto; }
  .brand { gap:7px; font-size:18px; }
  .brand img { width:30px; height:30px; }
  .btn-login { padding-inline:16px; font-size:14px; }
}
@media (max-width:359px) {
  .head-inner { padding-inline:12px; gap:4px; }
  .brand { font-size:16px; }
  .brand img { width:28px; height:28px; }
  .btn-login { padding-inline:12px; }
}
@media (min-width:961px) {
  .mobile-drawer { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal,.reveal.pending { opacity:1; transform:none; }
}