:root {
  color-scheme: light;
  --bg: #F5F6FA;
  --panel: #FFFFFF;
  --panel-2: #ECEDF5;
  --panel-soft: #FAFAFD;
  --tile: #F6F6FB;
  --border: #E1E2EC;
  --line-soft: #EAEBF2;
  --accent: #5B4FF5;
  --accent-dark: #3B2FC9;
  --accent-2: #3D8EF0;
  --ink: #16142B;
  --ink-2: #221F3D;
  --ink-3: #332F55;
  --muted: #5E5C74;
  --muted-2: #8A889E;
  --success: #14A58A;
  --warn: #C8870F;
  --error: #D63B3B;
  --accent-tint: #E2DFFD;
  --accent-tint-2: #EEEDFE;
  --blue-tint: #E7F0FD;
  --toggle-track: #9C94F2;
  --dot: #D3D4E1;
  --on-dark: #FFFFFF;
  --on-dark-muted: #A9A6C4;
  --grad-light-a: #A49CFF;
  --grad-light-b: #7FB8FF;
  --wash-top: rgb(91 79 245 / .04);
  --wash-bottom: rgb(72 112 242 / .07);
  --blob-a: rgb(91 79 245 / .06);
  --blob-b: rgb(61 142 240 / .05);
  --accent-06: rgb(91 79 245 / .06);
  --accent-08: rgb(91 79 245 / .08);
  --accent-12: rgb(91 79 245 / .12);
  --accent-18: rgb(91 79 245 / .18);
  --accent-28: rgb(91 79 245 / .28);
  --ink-06: rgb(22 20 43 / .06);
  --ink-10: rgb(22 20 43 / .10);
  --white-72: rgb(255 255 255 / .72);
  --hl: rgb(255 255 255 / .9);
  --hl-dark: rgb(255 255 255 / .16);
  --flag-red: #D8343A;
  --flag-blue: #2C3A8C;
  --flag-green: #1E9A57;
  --flag-white: #FFFFFF;
  --flag-edge: rgb(22 20 43 / .12);
  --clear: transparent;
  --font-display: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-button: 12px;
  --r-icon: 11px;
  --r-tag: 13px;
  --r-inset: 8px;
  --r-flag: 4px;
  --r-round: 50%;
  --r-pill: 999px;
  --size-xs: 11px;
  --size-chip: 11.5px;
  --size-sm: 12px;
  --size-label: 12.5px;
  --size-small: 13px;
  --size-item: 13.5px;
  --size-nav: 14.5px;
  --size-base: 16px;
  --size-nav-small: 14px;
  --size-tab: 15px;
  --size-mobile-lede: 17px;
  --size-section-sub: 19px;
  --size-lede: 20px;
  --size-heading-small: 24px;
  --size-heading: clamp(28px, 3vw, 40px);
  --size-display: clamp(52px, 4.45vw, 64px);
  --size-display-mobile: 36px;
  --size-band: clamp(30px, 3.3vw, 48px);
  --size-price: 40px;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-strong: 650;
  --weight-bold: 700;
  --weight-display: 800;
  --gutter: 48px;
  --content-max: 1408px;
  --head-height: 72px;
  --anchor-offset: 88px;
  --toc-offset: 148px;
  --shadow-window: 0 2px 6px var(--ink-06), 0 32px 60px var(--accent-12);
  --shadow-card: 0 4px 10px var(--ink-06), 0 26px 48px var(--accent-18);
  --shadow-tag: 0 1px 2px var(--ink-06), 0 10px 22px var(--accent-12);
  --gradient: linear-gradient(90deg, var(--accent), var(--accent-2));
  --gradient-light: linear-gradient(90deg, var(--grad-light-a), var(--grad-light-b));
  --ease-ui: 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; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--size-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, fieldset { border: 0; }
button { background: var(--clear); }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; overflow-wrap: break-word; }
h1 { margin: 24px 0 0; font-weight: var(--weight-display); font-size: var(--size-display); line-height: 1.08; letter-spacing: -.03em; color: var(--ink); }
h2 { margin: 0 0 24px; font-size: var(--size-heading); font-weight: var(--weight-display); line-height: 1.2; letter-spacing: -.02em; }
h3 { margin: 0 0 16px; font-size: var(--size-heading-small); font-weight: var(--weight-bold); line-height: 1.35; }
:lang(zh-CN) h1, :lang(zh-TW) h1, :lang(ja) h1, :lang(ko) h1 { letter-spacing: -.02em; }
h1 .line { display: block; }
code { font-family: var(--font-mono); overflow-wrap: anywhere; font-size: .9em; }
pre { max-width: 100%; overflow-x: auto; padding: 20px; border-radius: var(--r-md); background: var(--panel-2); }
pre code { white-space: pre; overflow-wrap: normal; }
hr { border: 0; border-top: 1px solid var(--border); }
[hidden] { display: none !important; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:where(main, section, article, aside, .grid) > * { min-width: 0; }
.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: 72px; padding-bottom: 72px; }
.reading-wrap { max-width: 880px; }
.prose { overflow-wrap: break-word; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote { margin-top: 20px; margin-bottom: 20px; }
.prose h2 { margin-top: 48px; }
.prose h3 { margin-top: 32px; }
.prose a:not(.btn) { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose li + li { margin-top: 8px; }
.prose section[id], [id] { scroll-margin-top: var(--anchor-offset); }
.no-break { white-space: nowrap; }
.grad, .grad-light { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: var(--clear); -webkit-text-fill-color: var(--clear); }
.grad-light { background-image: var(--gradient-light); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; }
.panel, .card { min-width: 0; padding: 28px; background: var(--panel); border: 1px solid var(--hl); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--accent-08), var(--shadow-tag); }
.grid { display: grid; gap: 24px; }
.grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stack { display: grid; gap: 24px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: var(--r-md); font-size: var(--size-base); font-weight: var(--weight-semibold); white-space: nowrap; flex-shrink: 0; transition: transform .15s ease, box-shadow .15s ease; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { color: var(--on-dark); background: linear-gradient(100deg, var(--accent), var(--accent-2)); box-shadow: inset 0 1px 0 var(--hl-dark), 0 10px 24px var(--accent-28); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost, .btn-secondary { color: var(--ink); background: var(--panel); border: 1px solid var(--border); box-shadow: 0 1px 2px var(--ink-06); }
.btn-ghost:hover, .btn-secondary:hover { border-color: var(--accent-tint); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--panel-2); color: var(--muted); box-shadow: none; transform: none; }
.btn-small { height: 44px; padding-inline: 16px; font-size: var(--size-nav-small); }
.site-head { position: sticky; top: 0; z-index: 30; background: var(--white-72); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-soft); }
.head-row { display: flex; align-items: center; height: var(--head-height); gap: 36px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-section-sub); letter-spacing: -.02em; color: var(--ink); }
.brand img { width: 32px; height: 32px; flex: none; }
.brand-zh { color: var(--muted); font-weight: var(--weight-medium); }
.nav { flex: 1; min-width: 0; }
.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--size-nav); font-weight: var(--weight-medium); color: var(--muted); white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.nav a svg { width: 17px; height: 17px; flex: none; }
.nav a:hover { color: var(--ink); background: var(--panel-2); }
.nav a[aria-current="page"] { color: var(--accent-dark); background: var(--accent-tint-2); }
.head-tools { display: flex; align-items: center; gap: 14px; flex: none; }
.language-box { position: relative; }
.lang { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; min-width: 44px; width: auto; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--size-nav-small); color: var(--muted); white-space: nowrap; }
.lang span { white-space: nowrap; }
.lang svg { width: 16px; height: 16px; }
.language-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 184px; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-tag); }
.language-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); }
.language-menu a:hover, .language-menu a[aria-current="true"] { background: var(--accent-tint-2); color: var(--accent-dark); }
.head-sep { width: 1px; height: 22px; background: var(--border); }
.login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--r-button); background: var(--ink); color: var(--on-dark); font-size: var(--size-nav); font-weight: var(--weight-semibold); white-space: nowrap; box-shadow: inset 0 1px 0 var(--hl-dark), 0 6px 14px var(--ink-10); }
.login svg { width: 16px; height: 16px; }
.menu-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-button); background: var(--panel); }
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-drawer { display: none; }
.nav-veil { position: fixed; inset: var(--head-height) 0 0; z-index: 29; border: 0; border-radius: 0; background: var(--ink-10); }
html.nav-open { overflow: hidden; }
.site-footer { padding-top: 64px; padding-bottom: 28px; background: var(--panel-2); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer-brand p { margin-top: 20px; max-width: 30em; color: var(--muted); }
.footer-title { font-size: var(--size-base); font-weight: var(--weight-bold); margin-bottom: 16px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; list-style: none; padding: 0; margin: 0; }
.footer-links a, .footer-languages a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 28px; color: var(--muted); font-size: var(--size-nav-small); }
.footer-links a:hover, .footer-languages a:hover, .footer-bottom a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.footer-languages { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.footer-languages a[aria-current="true"] { color: var(--accent-dark); font-weight: var(--weight-semibold); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; color: var(--muted); font-size: var(--size-small); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.reveal { transition: opacity .6s var(--ease-ui), transform .6s var(--ease-ui); }
.reveal.pending { opacity: 0; transform: translateY(16px); }
.reveal.shown { opacity: 1; transform: none; }
#server-status { position: relative; display: block; min-height: 120px; width: 100%; max-width: 100%; overflow: hidden; margin-top: 24px; margin-bottom: 24px; }
#server-status > * { min-width: 0; max-width: 100%; }
#server-status + * { margin-top: 24px; }
@media (max-width: 1180px) {
  .lang span { display: none; }
  .head-row { gap: 20px; }
  .nav a { padding-inline: 8px; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .head-tools { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .mobile-drawer:not([hidden]) { display: block; position: absolute; top: var(--head-height); left: 0; right: 0; z-index: 31; max-height: calc(100dvh - var(--head-height)); overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--gutter) 24px; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-tag); }
  .mobile-drawer ul { list-style: none; margin: 0; padding: 0; }
  .mobile-drawer a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px; border-radius: var(--r-sm); font-size: var(--size-base); }
  .mobile-drawer a svg { width: 18px; height: 18px; }
  .mobile-drawer a[aria-current] { background: var(--accent-tint-2); color: var(--accent-dark); }
  .drawer-languages { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  h1 { font-size: var(--size-display-mobile); }
  .grid-three { grid-template-columns: minmax(0, 1fr); }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .head-sep, .language-box { display: none; }
  .head-tools { gap: 10px; margin-left: auto; }
  .footer-grid { gap: 32px; }
}
@media (max-width: 640px) {
  .no-break { white-space: normal; }
  .tilt, [data-tilt], .stage { transform: none; }
  .grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-brand { grid-column: auto; }
  .head-row { gap: 12px; }
  .login { padding-inline: 14px; }
  .footer-links { gap: 10px 16px; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .brand { gap: 7px; font-size: var(--size-base); }
  .head-tools { gap: 6px; }
  .login { padding-inline: 12px; }
  .btn { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal, .reveal.pending { opacity: 1; transform: none; }
}