:root {
  --bg:#F7F0E5;
  --bg-panel:#FFFCF7;
  --bg-panel-2:#EFE6D7;
  --border:#E2D6C3;
  --border-soft:#EADFCF;
  --accent:#2E55E6;
  --accent-dark:#1D3BB5;
  --text:#231B14;
  --text-muted:#6E6156;
  --text-faint:#9A8C7E;
  --success:#2F8A57;
  --warn:#C98A1A;
  --error:#C2412D;
  --paper-top:#FBF7EF;
  --paper-bottom:#F1E8DA;
  --ink-soft:#4A3B2E;
  --on-ink:#FFFCF7;
  --pure:#FFFFFF;
  --clear:transparent;
  --glow-blue:#B4C5F8;
  --glow-peach:#F7C4A0;
  --glow-rose:#F0B1C8;
  --glow-butter:#F6DF9C;
  --glass:rgba(255,252,247,.58);
  --glass-thin:rgba(255,252,247,.32);
  --glass-edge:rgba(255,255,255,.86);
  --card-face:rgba(255,252,247,.92);
  --hi-line:rgba(255,255,255,.2);
  --shade-blue:rgba(46,85,230,.10);
  --shade-warm:rgba(110,74,40,.08);
  --shade-card:rgba(35,27,20,.08);
  --shade-ink:rgba(35,27,20,.24);
  --flag-red:#D0352D;
  --flag-navy:#2C3E8C;
  --flag-white:#FFFFFF;
  --flag-black:#1F1A16;
  --flag-gold:#EDBB2C;
  --flag-edge:rgba(35,27,20,.18);
  --grain-opacity:.03;
  --paper-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-window:28px;
  --r-shell:38px;
  --r-pill:999px;
  --r-corner:4px;
  --r-icon:8px;
  --r-bubble:12px;
  --r-tray:16px;
  --r-round:50%;
  --r-highlight:.08em;
  --frame-w:1280px;
  --reading-w:840px;
  --gutter:24px;
  --header-h:60px;
  --anchor-gap:76px;
  --toc-offset:12px;
  --toc-landing:100px;
  --font-display:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR","PingFang SC","Hiragino Sans","Microsoft YaHei",system-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;
  --weight-display:800;
  --display-size:64px;
  --display-leading:1.04;
  --display-tracking:-.03em;
  --body-size:16px;
  --shadow-panel:inset 0 1px 0 var(--glass-edge),0 16px 28px -20px var(--shade-ink);
  --shadow-window:inset 0 1px 0 var(--glass-edge),0 44px 80px -34px var(--shade-blue),0 30px 64px -30px var(--shade-warm),0 2px 6px var(--shade-card);
  --ease-ui:cubic-bezier(.2,.7,.3,1);
  --time-ui:.2s;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:var(--anchor-gap); scroll-behavior:smooth; }
body {
  margin:0;
  font:var(--weight-normal) var(--body-size)/1.5 var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  opacity:var(--grain-opacity);
  mix-blend-mode:multiply;
  background-image:var(--paper-grain);
  background-size:180px 180px;
}
a { color:inherit; text-underline-offset:.2em; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
img { max-width:100%; height:auto; }
svg { flex-shrink:0; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--text); outline-offset:3px; border-radius:var(--r-xs); }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; }
h1 { font-size:clamp(52px,5vw,68px); font-weight:var(--weight-display); line-height:1.12; letter-spacing:-.02em; margin:0 0 24px; }
h2 { font-size:clamp(28px,3vw,40px); line-height:1.2; letter-spacing:-.02em; margin:0 0 20px; }
h3 { font-size:22px; line-height:1.3; margin:0 0 12px; }
p { margin:0 0 16px; }
code { font-family:var(--font-mono); overflow-wrap:anywhere; }
pre { max-width:100%; overflow-x:auto; padding:20px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:var(--r-md); }
pre code { overflow-wrap:normal; white-space:pre; }
fieldset { min-width:0; }
.wrap { width:100%; max-width:var(--frame-w); margin-inline:auto; padding-inline:var(--gutter); }
.reading-wrap { width:100%; max-width:var(--reading-w); margin-inline:auto; padding-inline:var(--gutter); }
.sec { padding-top:64px; padding-bottom:64px; }
.stack > * + * { margin-top:24px; }
.grid { display:grid; gap:24px; }
.grid > *, .topbar-inner > *, .footer-grid > * { min-width:0; }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.muted { color:var(--text-muted); }
.mono { font-family:var(--font-mono); font-size:11.5px; }
.no-break { white-space:nowrap; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; display:block; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.panel,.card {
  background:var(--card-face);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-panel);
}
.panel { padding:24px; }
.decorated-region { position:relative; overflow-x:clip; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 26px;
  border:1px solid var(--clear);
  border-radius:var(--r-pill);
  font-size:16px;
  font-weight:var(--weight-semibold);
  text-decoration:none;
  flex-shrink:0;
  white-space:nowrap;
  transition:background var(--time-ui) ease,border-color var(--time-ui) ease,transform var(--time-ui) ease;
}
.btn svg { width:16px; height:16px; display:block; }
.btn-primary {
  background:var(--text);
  color:var(--on-ink);
  box-shadow:inset 0 1px 0 var(--hi-line),0 12px 24px -12px var(--shade-ink),0 6px 18px -10px var(--shade-blue);
}
.btn-primary:hover { background:var(--ink-soft); transform:translateY(-1px); }
.btn-ghost,.btn-secondary { background:var(--pure); color:var(--text); border:1px solid var(--border); box-shadow:0 1px 2px var(--shade-card); }
.btn-ghost:hover,.btn-secondary:hover { border-color:var(--text-muted); }
.btn:active { transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"] { color:var(--text-muted); background:var(--bg-panel-2); box-shadow:none; transform:none; }
.cta-row { margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.badge {
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:28px;
  padding:3px 14px 3px 10px;
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  border:1px solid var(--border);
  font-size:13px;
  color:var(--text-muted);
  box-shadow:inset 0 1px 0 var(--glass-edge),0 6px 14px -10px var(--shade-ink);
  max-width:100%;
  overflow-wrap:anywhere;
}
.badge-dot { width:8px; height:8px; flex:none; border-radius:var(--r-round); background:var(--text); box-shadow:0 0 0 3px var(--bg-panel-2); }
.topbar { position:relative; z-index:50; background:var(--paper-top); border-bottom:1px solid var(--border); }
.topbar-inner {
  position:relative;
  width:min(var(--frame-w),calc(100% - 48px));
  margin:0 auto;
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:24px;
}
.brand { justify-self:start; display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-height:36px; }
.brand-mark { width:30px; height:30px; display:block; flex:none; border-radius:var(--r-round); }
.brand-word { font-family:var(--font-display); font-weight:var(--weight-display); font-size:19px; letter-spacing:-.02em; }
.brand-zh { font-weight:var(--weight-medium); color:var(--text-muted); }
.nav-list { list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.nav-list li { display:flex; align-items:center; }
.nav-list li+li::before { content:"·"; color:var(--text-faint); margin:0 12px; font-weight:var(--weight-bold); }
.nav-list a { font-size:14.5px; color:var(--text-muted); text-decoration:none; padding:6px 2px; min-height:24px; white-space:nowrap; transition:color var(--time-ui) ease; }
.nav-list a:hover { color:var(--text); }
.nav-list a[aria-current="page"] { color:var(--text); font-weight:var(--weight-semibold); }
.actions { justify-self:end; display:flex; align-items:center; gap:16px; }
.language-control { position:relative; }
.lang { font:inherit; font-size:14px; color:var(--text-muted); background:var(--clear); border:0; min-height:36px; min-width:44px; width:auto; padding:6px 4px; cursor:pointer; white-space:nowrap; }
.lang span { white-space:nowrap; }
.language-menu { position:absolute; right:0; top:calc(100% + 8px); width:180px; padding:8px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-panel); }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; text-decoration:none; border-radius:var(--r-sm); }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--bg-panel-2); }
.login { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 20px; border-radius:var(--r-pill); border:1.5px solid var(--text); background:var(--bg-panel); color:var(--text); font-size:14px; font-weight:var(--weight-semibold); text-decoration:none; white-space:nowrap; transition:background var(--time-ui) ease,color var(--time-ui) ease; }
.login:hover { background:var(--text); color:var(--on-ink); }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); background:var(--bg-panel); }
.menu-toggle svg { width:22px; height:22px; display:block; }
.mobile-drawer { display:none; }
.nav-veil { position:fixed; inset:var(--header-h) 0 0; z-index:49; background:var(--shade-ink); border:0; width:100%; }
html.nav-open { overflow:hidden; }
.footer { border-top:1px solid var(--border); background:var(--bg-panel-2); padding-top:48px; padding-bottom:32px; }
.footer-grid { display:grid; grid-template-columns:1.35fr 1fr 1.1fr; gap:40px; }
.footer-intro { margin-top:16px; color:var(--text-muted); max-width:34em; }
.footer-title { font-size:15px; font-weight:var(--weight-bold); margin:0 0 12px; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; }
.footer-links a,.footer-languages a,.legal-links a { display:inline-flex; align-items:center; min-height:28px; padding-block:3px; color:var(--text-muted); font-size:14px; text-decoration:none; }
.footer-links a:hover,.footer-languages a:hover,.legal-links a:hover { color:var(--text); text-decoration:underline; }
.footer-languages { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; color:var(--text-muted); font-size:13px; }
.footer-bottom p { margin:0; }
.legal-links { display:flex; flex-wrap:wrap; gap:16px; }
.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; width:100%; min-height:120px; max-width:100%; overflow:hidden; margin-block:24px; }
#server-status > * { min-width:0; max-width:100%; }
#server-status + * { margin-top:24px; }
.prose { line-height:1.85; overflow-wrap:anywhere; min-width:0; }
.prose h2 { margin-top:48px; }
.prose h3 { margin-top:28px; }
.prose li { margin-block:8px; }
.prose a:not(.btn) { color:var(--accent-dark); }
.prose > :first-child { margin-top:0; }
@media (max-width:1100px) {
  .topbar-inner { grid-template-columns:auto 1fr auto; gap:16px; }
  .nav-list li+li::before { margin-inline:7px; }
  .actions { gap:10px; }
}
@media (max-width:960px) {
  .topbar-inner { display:flex; }
  .desktop-nav { display:none; }
  .actions { margin-left:auto; gap:8px; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .mobile-drawer:not([hidden]) { display:block; position:absolute; top:100%; left:-24px; right:-24px; padding:16px 24px 24px; background:var(--bg-panel); border-bottom:1px solid var(--border); max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; box-shadow:0 24px 40px -24px var(--shade-ink); }
  .mobile-drawer ul { display:block; list-style:none; margin:0; padding:0; }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 8px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--border-soft); }
  .mobile-drawer a[aria-current] { font-weight:var(--weight-bold); }
  .drawer-label { margin:20px 8px 8px; font-size:13px; color:var(--text-muted); }
}
@media (max-width:768px) {
  h1 { font-size:clamp(28px,7vw,40px); }
  .grid-three { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .no-break { white-space:normal; }
  .wrap,.reading-wrap { padding-inline:var(--gutter); }
  .sec { padding-top:40px; padding-bottom:40px; }
  .topbar-inner { width:calc(100% - 32px); gap:8px; }
  .brand { gap:6px; }
  .brand-word { font-size:17px; }
  .brand-mark { width:27px; height:27px; }
  .actions { gap:5px; margin-left:auto; }
  .login { padding-inline:12px; }
  .lang { font-size:12px; }
  .mobile-drawer:not([hidden]) { left:-16px; right:-16px; padding-inline:16px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .tilt,.shell { transform:none; }
  .decorated-region { max-width:100%; }
  .panel { padding:20px; }
  .btn { padding-inline:20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal,.reveal.pending,.reveal.shown { opacity:1; transform:none; transition:none; }
  .btn,.login,.nav-list a { transition:none; }
  .btn-primary:hover { transform:none; }
}