:root {
  color-scheme: light;
  --bg: #F5F4F7;
  --bg-0: rgba(245,244,247,0);
  --panel: #FFFFFF;
  --panel-2: #ECEAF0;
  --border: #DEDAE4;
  --accent: #9E1B4F;
  --accent-2: #C2356A;
  --accent-dark: #741237;
  --text: #17141C;
  --muted: #5E5868;
  --success: #1F8A5B;
  --warn: #C9731A;
  --error: #D0362B;
  --on-accent: #FFFFFF;
  --aura-amber: #F6C9A8;
  --aura-rose: #E9B4CC;
  --aura-lav: #C9D2F2;
  --amber-tint: #FBEADB;
  --rose-tint: #F7E4EC;
  --veil: rgba(255,255,255,.34);
  --glass: rgba(255,255,255,.62);
  --hl-white: rgba(255,255,255,.85);
  --hl-soft: rgba(255,255,255,.22);
  --accent-a10: rgba(158,27,79,.10);
  --accent-a15: rgba(158,27,79,.15);
  --accent-a32: rgba(158,27,79,.32);
  --accent-a40: rgba(158,27,79,.40);
  --ink: #1B1820;
  --ink-side: #1E1A24;
  --ink-2: #24202B;
  --ink-3: #2D2834;
  --ink-4: #342D3D;
  --ink-line: rgba(255,255,255,.08);
  --ink-edge: rgba(255,255,255,.06);
  --ink-hl: rgba(255,255,255,.07);
  --ink-text: #F1EEF5;
  --ink-muted: #A39CB0;
  --shade: rgba(0,0,0,.40);
  --rose-ink: #F2B3CD;
  --amber-ink: #F6C9A8;
  --lav-ink: #C9D2F2;
  --ok-ink: #86D4AF;
  --rose-a16: rgba(233,180,204,.15);
  --amber-a16: rgba(246,201,168,.14);
  --lav-a16: rgba(201,210,242,.13);
  --flag-red: #D8263A;
  --flag-white: #FFFFFF;
  --flag-navy: #2B3A78;
  --flag-green: #1E8A4C;
  --flag-edge: rgba(23,20,28,.16);
  --shadow-frame: 0 28px 60px rgba(158,27,79,.12);
  --shadow-win: 0 22px 40px -20px rgba(23,20,28,.55);
  --shadow-float: 0 14px 32px -10px rgba(158,27,79,.18),0 2px 6px rgba(23,20,28,.06);
  --shadow-chip: 0 1px 2px rgba(23,20,28,.05);
  --shadow-pop: 0 18px 40px -12px rgba(158,27,79,.16),0 2px 6px rgba(23,20,28,.05);
  --shadow-cta: 0 10px 22px -10px rgba(158,27,79,.55);
  --r-xs: 2px;
  --r-flag: 3px;
  --r-key: 4px;
  --r-tag: 5px;
  --r-input: 6px;
  --r-s: 8px;
  --r-m: 10px;
  --r-win: 12px;
  --r-mobile-frame: 20px;
  --r-l: 28px;
  --r-pill: 999px;
  --r-circle: 50%;
  --font-display: "Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Microsoft YaHei","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-body: "Inter","Noto Sans SC","PingFang SC","Hiragino Sans","Microsoft YaHei","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 700;
  --weight-brand: 800;
  --weight-display: 900;
  --size-body: 16px;
  --size-small: 14px;
  --size-caption: 12px;
  --size-h1: 64px;
  --size-h2: 40px;
  --size-h3: 26px;
  --wrap: 1200px;
  --gutter: 24px;
  --section-space: 72px;
  --header-height: 97px;
  --toc-top: 12px;
  --anchor-space: 88px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --duration-fast: .15s;
  --duration-reveal: .35s;
}
* { 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:var(--size-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
html.nav-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
svg { flex-shrink:0; }
ul { list-style:none; margin:0; padding:0; }
p { margin:0; }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; overflow-wrap:break-word; }
h1 { font-size:clamp(52px,5vw,72px); font-weight:var(--weight-display); line-height:1.12; letter-spacing:-.02em; margin:0 0 24px; }
h2 { font-size:var(--size-h2); font-weight:var(--weight-display); line-height:1.15; letter-spacing:-.02em; margin:0 0 24px; }
h3 { font-size:var(--size-h3); font-weight:var(--weight-brand); line-height:1.25; margin:0 0 16px; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
.wrap { width:100%; max-width:calc(var(--wrap) + 48px); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section--compact { padding-top:32px; padding-bottom:32px; }
.no-break { white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
.muted { color:var(--muted); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.text-link { display:inline-flex; align-items:center; gap:6px; min-height:24px; color:var(--accent); font-weight:var(--weight-semibold); }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.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)); }
.grid > *, .wrap > *, .panel > * { min-width:0; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-m); padding:24px; box-shadow:inset 0 1px 0 var(--hl-white),var(--shadow-chip); }
.panel--soft { background:linear-gradient(135deg,var(--panel),var(--rose-tint)); }
.prose { max-width:800px; margin-inline:auto; overflow-wrap:break-word; }
.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre { margin-block:0 24px; }
.prose p,.prose li { line-height:1.85; }
.prose h2 { margin-top:48px; }
.prose h3 { margin-top:32px; }
.prose ul { list-style:disc; padding-left:24px; }
.prose ol { padding-left:24px; }
.prose a:not(:where(.btn)) { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
code { font-family:var(--font-mono); overflow-wrap:anywhere; font-size:.9em; background:var(--panel-2); border-radius:var(--r-key); padding:2px 5px; }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:20px; background:var(--ink); color:var(--ink-text); border-radius:var(--r-m); }
pre code { padding:0; background:none; color:inherit; white-space:pre; overflow-wrap:normal; }
.decor-zone { position:relative; overflow-x:clip; max-width:100%; }
.reveal { transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease); }
.reveal.pending { opacity:0; transform:translateY(16px); }
.reveal.shown { opacity:1; transform:none; }
#server-status { display:block; position:static; min-width:0; width:100%; max-width:100%; overflow:hidden; margin-top:24px; margin-bottom:24px; }
#server-status + * { margin-top:24px; }

/* Announcement and shared navigation */
.announce { background:var(--panel-2); border-bottom:1px solid var(--border); font-size:13.5px; color:var(--muted); }
.announce__in { display:flex; align-items:center; gap:10px; height:36px; }
.announce__dot { width:8px; height:8px; border-radius:var(--r-circle); background:var(--accent); box-shadow:0 0 0 3px var(--accent-a15); flex:none; }
.announce__msg { min-width:0; }
.announce__link { color:var(--accent); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; min-height:24px; }
.announce__link svg { width:14px; height:14px; transition:transform .2s ease; }
.announce__link:hover svg { transform:translateX(3px); }
#site-header { position:relative; z-index:50; }
.topbar { position:relative; z-index:50; background:var(--panel); border-bottom:1px solid var(--border); }
.topbar__in { display:flex; align-items:center; flex-wrap:nowrap; gap:36px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:var(--weight-brand); font-size:19px; letter-spacing:-.02em; color:var(--text); flex:none; min-height:30px; }
.brand__mark { width:30px; height:30px; border-radius:var(--r-s); flex:none; }
.mainnav { flex:1; min-width:0; }
.nav-list { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px; }
.nav-link { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:36px; padding:0 12px; border-radius:var(--r-s); font-size:15px; font-weight:var(--weight-medium); color:var(--muted); background:none; border:0; cursor:pointer; white-space:nowrap; transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease; }
.nav-link:hover,.nav-link:focus-visible { color:var(--text); background:var(--panel-2); }
.nav-link[aria-current="page"] { color:var(--text); font-weight:var(--weight-semibold); }
.more { position:relative; }
.more__menu { position:absolute; z-index:60; top:calc(100% + 10px); left:-8px; width:340px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-m); box-shadow:var(--shadow-pop); visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity var(--duration-fast) ease,transform var(--duration-fast) ease,visibility var(--duration-fast); }
.more__menu::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.more:hover .more__menu,.more:focus-within .more__menu,.more.is-open .more__menu { opacity:1; visibility:visible; transform:none; }
.more__cap { font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:4px 10px 6px; }
.more__menu .nav-link { width:100%; justify-content:flex-start; height:34px; font-size:14.5px; color:var(--text); }
.topbar__tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lang { position:relative; font-size:14px; }
.lang__button { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:auto; min-width:44px; min-height:36px; padding:0 8px; border:0; border-radius:var(--r-s); background:none; white-space:nowrap; }
.lang__label { white-space:nowrap; }
.lang__panel { display:none; position:absolute; z-index:70; top:calc(100% + 10px); right:0; min-width:176px; padding:8px; border:1px solid var(--border); border-radius:var(--r-m); background:var(--panel); box-shadow:var(--shadow-pop); }
.lang.is-open .lang__panel { display:block; }
.lang__panel a { display:flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:var(--r-s); white-space:nowrap; }
.lang__panel a:hover,.lang__panel a[aria-current] { color:var(--accent); background:var(--rose-tint); }
.btn-login { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 18px; border:1.5px solid var(--text); border-radius:var(--r-s); font-size:14.5px; font-weight:var(--weight-semibold); white-space:nowrap; color:var(--text); transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease; }
.btn-login:hover { background:var(--text); color:var(--panel); }
.burger { display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; min-width:44px; min-height:44px; padding:10px; color:var(--text); background:none; border:1px solid var(--border); border-radius:var(--r-s); }
.burger__line { display:block; width:20px; height:2px; background:currentColor; border-radius:var(--r-xs); transition:transform var(--duration-fast),opacity var(--duration-fast); }
.burger[aria-expanded="true"] .burger__line:first-child { transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] .burger__line:last-child { transform:translateY(-6px) rotate(-45deg); }
.mobile-drawer { display:none; position:fixed; z-index:45; top:var(--header-height); right:0; left:0; height:calc(100dvh - var(--header-height)); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; padding:16px var(--gutter) 32px; background:var(--panel); border-top:1px solid var(--border); }
.mobile-drawer.is-open { display:block; }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 14px; border-radius:var(--r-s); }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { color:var(--accent); background:var(--rose-tint); }
.mobile-drawer__langs { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.mobile-veil { display:none; position:fixed; z-index:40; inset:var(--header-height) 0 0; background:var(--shade); border:0; }
.mobile-veil.is-open { display:block; }

/* Buttons */
.cta { display:flex; justify-content:center; gap:12px; margin-bottom:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 24px; border:0; border-radius:var(--r-s); font-size:16px; font-weight:var(--weight-bold); letter-spacing:.01em; flex-shrink:0; white-space:nowrap; transition:background-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease,transform var(--duration-fast) ease; }
.btn svg { width:16px; height:16px; flex:none; }
.btn--primary,.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 var(--hl-soft),var(--shadow-cta); }
.btn--primary:hover,.btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); }
.btn--ghost { border:1.5px solid var(--text); color:var(--text); background:var(--glass); }
.btn--ghost:hover { background:var(--panel); }
.btn:active { transform:translateY(1px); box-shadow:var(--shadow-chip); }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn--small { min-height:36px; padding:7px 14px; font-size:var(--size-small); }

/* Footer */
.site-footer { padding-top:48px; padding-bottom:24px; border-top:1px solid var(--border); background:linear-gradient(180deg,var(--panel),var(--bg)); }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.footer-grid > * { min-width:0; }
.footer-brand p { margin-top:16px; max-width:300px; font-size:var(--size-small); line-height:1.8; color:var(--muted); }
.footer-title { font-size:var(--size-small); font-weight:var(--weight-bold); margin:0 0 12px; }
.footer-links { display:grid; gap:6px; }
.footer-links a { display:inline-flex; align-items:center; min-height:28px; font-size:var(--size-small); color:var(--muted); }
.footer-links a:hover { color:var(--accent); text-decoration:underline; }
.footer-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:32px; padding-top:20px; border-top:1px solid var(--border); font-size:var(--size-caption); color:var(--muted); }
.footer-bottom a { display:inline-flex; align-items:center; min-height:24px; }
.footer-bottom a:hover { color:var(--accent); }

@media(max-width:1100px) {
  .topbar__in { gap:20px; }
  .nav-link { padding-inline:9px; }
}
@media(max-width:960px) {
  .mainnav { display:none; }
  .burger { display:inline-flex; }
  .topbar__tools { margin-left:auto; }
  .grid--five { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:961px) {
  .mobile-drawer.is-open,.mobile-veil.is-open { display:none; }
}
@media(max-width:768px) {
  h1 { font-size:36px; line-height:1.15; }
  h2 { font-size:30px; }
  h3 { font-size:23px; }
  .grid--three { grid-template-columns:minmax(0,1fr); }
  .section { padding-top:48px; padding-bottom:48px; }
}
@media(max-width:640px) {
  :root { --gutter:16px; }
  .no-break { white-space:normal; }
  .announce__msg { display:none; }
  .topbar__in { gap:8px; }
  .brand { font-size:17px; gap:7px; }
  .brand__mark { width:28px; height:28px; }
  .topbar__tools { gap:4px; margin-left:auto; }
  .lang__label { display:none; }
  .lang__button { padding:0 6px; }
  .btn-login { padding-inline:12px; font-size:14px; }
  .cta { flex-direction:column; width:100%; max-width:320px; }
  .grid--five,.footer-grid { grid-template-columns:minmax(0,1fr); }
  .tilt,[data-tilt] { transform:none; }
  .decor-zone { max-width:100%; overflow-x:clip; }
  .panel { padding:20px; }
}
@media(max-width:360px) {
  .brand { font-size:15px; gap:5px; }
  .brand__mark { width:24px; height:24px; }
  .btn-login { padding-inline:9px; }
  .topbar__tools { gap:2px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal,.reveal.pending { opacity:1; transform:none; }
}