:root {
  --bg: #F7F0E2;
  --bg-panel: #FFFCF5;
  --bg-panel-2: #EFE5D2;
  --border: #E1D3BC;
  --accent: #3B35D6;
  --accent-dark: #2A23A6;
  --accent-2: #5A4FEA;
  --accent-3: #7A70F5;
  --copy: #E4E1FB;
  --copy-line: rgba(59,53,214,.28);
  --glow: #FFF4DC;
  --glow-soft: rgba(255,244,220,.55);
  --text: #2A2118;
  --text-muted: #6E5F4D;
  --success: #2E8656;
  --warn: #B9800F;
  --error: #BF3A2C;
  --on-accent: #FFFFFF;
  --on-accent-90: rgba(255,255,255,.9);
  --on-accent-82: rgba(255,255,255,.82);
  --on-accent-60: rgba(255,255,255,.6);
  --on-accent-42: rgba(255,255,255,.42);
  --on-accent-08: rgba(255,255,255,.08);
  --dot: rgba(255,255,255,.06);
  --dot-copy: rgba(59,53,214,.08);
  --hi-line: rgba(255,255,255,.7);
  --vignette: rgba(30,24,140,.32);
  --shadow-tint: rgba(59,53,214,.14);
  --shadow-deep: rgba(28,22,120,.34);
  --shadow-page: rgba(59,53,214,.10);
  --veil: rgba(42,33,24,.32);
  --flag-red: #C8213A;
  --flag-blue: #2E3A84;
  --flag-gold: #F2C21B;
  --flag-black: #1F1A17;
  --flag-white: #FFFFFF;
  --flag-edge: rgba(42,33,24,.2);
  --clear: transparent;
  --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,-apple-system,"Segoe UI",sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --r-panel: 28px;
  --r-card: 24px;
  --r-small: 12px;
  --r-flag: 3px;
  --r-pill: 999px;
  --r-round: 50%;
  --nav-h: 64px;
  --gutter: 24px;
  --wrap-width: 1184px;
  --reading-width: 800px;
  --section-space: 80px;
  --toc-offset: 84px;
  --anchor-offset: 156px;
  --copy-offset: 6px;
  --soft-shadow: 0 20px 56px -20px var(--shadow-page);
  --paper-shadow: var(--copy-offset) var(--copy-offset) 0 var(--copy),var(--soft-shadow);
  --ease-time: .2s;
  --reveal-time: .35s;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); scroll-behavior:smooth; }
body {
  min-height:100svh; font-family:var(--font-body); font-size:16px; line-height:1.6;
  color:var(--text); background-color:var(--bg); background-image:var(--grain);
  background-size:180px 180px; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button { background:var(--clear); border:0; }
img { display:block; max-width:100%; height:auto; }
svg { display:block; flex-shrink:0; }
ul,ol { list-style:none; }
[hidden] { display:none !important; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--accent); outline-offset:4px;
}
.hero-panel :where(a,button):focus-visible { outline-color:var(--glow); }
:where(h1,h2,h3) { font-family:var(--font-display); font-weight:var(--weight-bold); text-wrap:balance; overflow-wrap:break-word; }
h1 { font-size:clamp(52px,4.6vw,66px); line-height:1.1; letter-spacing:-.02em; }
h2 { font-size:clamp(28px,3vw,42px); line-height:1.25; letter-spacing:-.02em; }
h3 { font-size:22px; line-height:1.4; }
p { overflow-wrap:break-word; }
code { font-family:var(--font-mono); overflow-wrap:anywhere; }
pre { max-width:100%; overflow-x:auto; padding:24px; border-radius:var(--r-small); background:var(--bg-panel-2); }
pre code { white-space:pre; overflow-wrap:normal; }
.wrap { width:100%; max-width:var(--wrap-width); margin-inline:auto; padding-inline:var(--gutter); min-width:0; }
.reading-wrap { width:100%; max-width:var(--reading-width); margin-inline:auto; padding-inline:var(--gutter); min-width:0; }
.sec { padding-top:var(--section-space); padding-bottom:var(--section-space); }
.section-head { max-width:800px; margin-bottom:32px; }
.section-head p { margin-top:16px; color:var(--text-muted); }
.no-break { white-space:nowrap; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--text-muted); }
.mono { font-family:var(--font-mono); }
.accent-text { color:var(--accent); }
.prose { min-width:0; overflow-wrap:break-word; }
.prose > * + * { margin-top:20px; }
.prose h2 { margin-top:48px; }
.prose h3 { margin-top:32px; }
.prose p,.prose li { line-height:1.85; }
.prose a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
.prose ul { padding-left:24px; list-style:disc; }
.prose ol { padding-left:24px; list-style:decimal; }
.prose section + section { margin-top:56px; }
.prose section > * + * { margin-top:20px; }
.panel,.paper-card { min-width:0; padding:32px; border-radius:var(--r-card); background:var(--bg-panel); box-shadow:var(--paper-shadow); border:1px solid var(--hi-line); }
.grid-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.grid-five { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.grid-three > *,.grid-five > * { min-width:0; }
.cta-row { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  gap:10px; min-height:52px; padding:12px 28px; border-radius:var(--r-pill);
  font-size:16px; font-weight:var(--weight-semibold); line-height:1.5; white-space:nowrap;
  transition:transform var(--ease-time),box-shadow var(--ease-time),background-color var(--ease-time);
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--on-accent); color:var(--text); box-shadow:0 16px 36px -14px var(--shadow-deep),inset 0 -2px 0 var(--bg-panel-2); }
.btn-primary svg { color:var(--accent); }
.btn-primary:hover { transform:translateY(-1px); }
.btn-ghost { color:var(--on-accent); box-shadow:inset 0 0 0 1.5px var(--on-accent-60); }
.btn-ghost:hover { background:var(--on-accent-08); }
.btn-ink,.prose .btn-ink { background:var(--accent); color:var(--on-accent); text-decoration:none; box-shadow:3px 3px 0 var(--copy),var(--soft-shadow); }
.btn-ink:hover { background:var(--accent-dark); transform:translateY(-1px); }
.btn-secondary { color:var(--accent-dark); background:var(--copy); box-shadow:inset 0 0 0 1px var(--copy-line); }
.btn-secondary:hover { background:var(--bg-panel-2); }
.btn:active { transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; opacity:.55; }
.btn-small { min-height:40px; padding:8px 18px; font-size:14px; }
.masthead {
  position:relative; z-index:60; height:var(--nav-h); display:flex; align-items:center;
  flex-wrap:nowrap; gap:24px; padding:0 32px; border-bottom:1px dashed var(--border);
  background-color:var(--bg);
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-family:var(--font-display); font-weight:var(--weight-bold); font-size:19px; letter-spacing:-.02em; color:var(--text); white-space:nowrap; }
.brand-mark { width:32px; height:32px; filter:drop-shadow(0 4px 10px var(--shadow-tint)); }
.brand-name .tail { color:var(--accent); }
.primary-nav { flex:1; min-width:0; display:flex; justify-content:center; }
.nav-list { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px; }
.nav-link { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:var(--r-pill); font-size:14.5px; font-weight:var(--weight-medium); color:var(--text-muted); white-space:nowrap; transition:color var(--ease-time),background-color var(--ease-time); }
.nav-link svg { width:16px; height:16px; }
.nav-link:hover { color:var(--text); background:var(--bg-panel-2); }
.nav-link[aria-current="page"] { color:var(--text); background:var(--bg-panel); box-shadow:inset 0 0 0 1px var(--border); }
.nav-link[aria-current="page"] svg { color:var(--accent); }
.tools { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.language-picker { position:relative; }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 14px; border-radius:var(--r-pill); background:var(--bg-panel); box-shadow:inset 0 0 0 1px var(--border); font-size:14px; color:var(--text); white-space:nowrap; width:auto; min-width:44px; }
.lang svg { width:16px; height:16px; color:var(--text-muted); }
.lang .caret { font-size:11px; color:var(--text-muted); }
.language-panel { position:absolute; z-index:90; right:0; top:calc(100% + 10px); min-width:180px; padding:8px; border:1px solid var(--border); border-radius:var(--r-small); background:var(--bg-panel); box-shadow:var(--paper-shadow); }
.language-panel a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-small); white-space:nowrap; }
.language-panel a:hover,.language-panel a[aria-current="true"] { background:var(--copy); color:var(--accent-dark); }
.login { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 18px 0 15px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-size:14.5px; font-weight:var(--weight-semibold); box-shadow:3px 3px 0 var(--copy),0 10px 24px -10px var(--shadow-deep); white-space:nowrap; transition:background-color var(--ease-time); }
.login svg { width:16px; height:16px; }
.login:hover { background:var(--accent-dark); }
.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-pill); background:var(--bg-panel); }
.menu-toggle svg { width:20px; height:20px; }
.menu-drawer { display:none; position:fixed; z-index:52; inset:var(--nav-h) 0 auto; height:calc(100dvh - var(--nav-h)); max-height:calc(100dvh - var(--nav-h)); padding:20px var(--gutter) 40px; background:var(--bg-panel); overflow-y:auto; overscroll-behavior:contain; }
.menu-drawer a { display:flex; width:100%; align-items:center; gap:12px; min-height:48px; padding:12px 16px; border-radius:var(--r-small); }
.menu-drawer a svg { width:18px; height:18px; }
.menu-drawer a:hover,.menu-drawer a[aria-current] { color:var(--accent-dark); background:var(--copy); }
.drawer-languages { margin-top:24px; border-top:1px dashed var(--border); padding-top:16px; }
.menu-veil { display:none; position:fixed; z-index:51; inset:var(--nav-h) 0 0; background:var(--veil); }
html.nav-open { overflow:hidden; }
.site-footer { margin-top:48px; padding-top:56px; padding-bottom:24px; border-top:1px dashed var(--border); background:var(--bg-panel-2); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
.footer-grid > * { min-width:0; }
.footer-brand p { color:var(--text-muted); max-width:360px; margin-top:18px; }
.footer-title { font-size:16px; margin-bottom:12px; }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; }
.footer-links a,.footer-languages a,.legal-links a { display:inline-flex; align-items:center; min-height:32px; padding-block:4px; }
.footer-links a:hover,.footer-languages a:hover,.legal-links a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px; }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:28px; padding-bottom:20px; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--text-muted); }
.legal-links { display:flex; flex-wrap:wrap; gap:16px; }
.reveal { transition:opacity var(--reveal-time),transform var(--reveal-time); }
.reveal.pending { opacity:0; transform:translateY(16px); }
.reveal.shown { opacity:1; transform:none; }
[data-count] { display:inline-block; min-width:3ch; font-variant-numeric:tabular-nums; font-family:var(--font-mono); text-align:right; }
#server-status { position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px; width:100%; max-width:100%; min-width:0; min-height:80px; overflow:hidden; margin-top:24px; margin-bottom:24px; }
#server-status > * { min-width:0; max-width:100%; }
#server-status + * { margin-top:24px; }
body:has(.toc-tabs) section[id] { scroll-margin-top:var(--anchor-offset); }
@media (max-width:1200px) {
  .masthead { gap:16px; padding-inline:24px; }
  .nav-link { padding-inline:9px; font-size:14px; }
}
@media (max-width:1100px) {
  .primary-nav { display:none; }
  .tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .menu-drawer:not([hidden]),.menu-veil:not([hidden]) { display:block; }
}
@media (min-width:1101px) {
  .menu-drawer,.menu-veil { display:none !important; }
}
@media (max-width:768px) {
  h1 { font-size:clamp(28px,6vw,40px); }
  .grid-three { grid-template-columns:1fr; }
  .grid-five { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  :root { --section-space:56px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; --copy-offset:4px; }
  .no-break { white-space:normal; }
  .masthead { padding-inline:14px; gap:10px; }
  .brand { font-size:17px; gap:7px; }
  .brand-mark { width:28px; height:28px; }
  .tools { margin-left:auto; gap:6px; }
  .lang { padding-inline:10px; font-size:13px; gap:4px; }
  .lang svg { display:none; }
  .login { padding:0 14px 0 12px; font-size:13.5px; }
  .login svg { display:none; }
  .panel,.paper-card { padding:24px 20px; }
  .btn { min-height:48px; padding:12px 22px; font-size:15px; }
  .btn-small { min-height:40px; padding:8px 16px; font-size:14px; }
  .tilt,.tilt-card { transform:none; }
  .decoration,.stripe-halo { max-width:100%; }
  .footer-grid { gap:28px 20px; }
  .footer-links { grid-template-columns:1fr; }
}
@media (max-width:380px) {
  .brand { font-size:15px; gap:5px; }
  .brand-mark { width:25px; height:25px; }
  .lang { font-size:11px; padding-inline:7px; }
  .login { font-size:12px; padding-inline:11px; }
  .tools { gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal,.reveal.pending { opacity:1; transform:none; transition:none; }
  .btn,.nav-link,.login { transition:none; }
}