:root {
  --bg:#F6EFE4;
  --bg-top:#FBF7EF;
  --bg-bottom:#F1E8D8;
  --panel:#FFFCF6;
  --panel-soft:#F9F3E9;
  --panel-2:#EFE6D6;
  --panel-2-hi:#F4ECDF;
  --border:#E3D7C3;
  --border-strong:#D4C4AA;
  --accent:#2C7DA0;
  --accent-dark:#1C5874;
  --accent-soft:#DFEBEE;
  --accent-line:rgba(44,125,160,.28);
  --text:#2A2119;
  --text-muted:#6E6152;
  --success:#2F8A5A;
  --success-ring:rgba(47,138,90,.22);
  --warn:#C98A1A;
  --error:#B9442F;
  --bar:#173F52;
  --on-dark:#FFFFFF;
  --on-dark-86:rgba(255,255,255,.86);
  --on-dark-72:rgba(255,255,255,.72);
  --on-dark-18:rgba(255,255,255,.18);
  --on-dark-10:rgba(255,255,255,.10);
  --grid-line:rgba(42,33,25,.04);
  --glow:rgba(44,125,160,.06);
  --hairline-hi:rgba(255,255,255,.92);
  --tray-sheen:rgba(255,252,246,.65);
  --ink-inset:rgba(28,88,116,.28);
  --veil:rgba(42,33,25,.28);
  --flag-red:#C23B3B;
  --flag-white:#FFFFFF;
  --flag-blue:#2B3A67;
  --flag-green:#1F8A4C;
  --flag-edge:rgba(42,33,25,.14);
  --shadow-nav:0 10px 30px -18px rgba(44,125,160,.22),0 1px 2px rgba(42,33,25,.05);
  --shadow-tray:0 44px 96px -36px rgba(44,125,160,.12),0 24px 60px -30px rgba(44,125,160,.12);
  --shadow-mid:0 22px 48px -24px rgba(44,125,160,.24),0 3px 8px rgba(42,33,25,.05);
  --shadow-front:0 34px 60px -24px rgba(28,88,116,.32),0 12px 24px -14px rgba(42,33,25,.18);
  --shadow-chip:0 16px 30px -16px rgba(44,125,160,.30),0 2px 6px rgba(42,33,25,.06);
  --shadow-btn:0 12px 24px -12px rgba(44,125,160,.60);
  --r-sm:8px;
  --r:10px;
  --r-lg:12px;
  --r-tray:20px;
  --r-pill:999px;
  --r-circle:50%;
  --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-body:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;
  --size-body:16px;
  --size-small:14px;
  --size-h1:66px;
  --size-h2:36px;
  --size-h3:22px;
  --gutter:24px;
  --measure:1200px;
  --reading:800px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-10:80px;
  --duration-fast:.15s;
  --duration-reveal:.36s;
  --header-edge:84px;
  --toc-offset:100px;
  --anchor-offset:176px;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-padding-top:100px; scroll-behavior:smooth }
html.nav-open { overflow:hidden }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--size-body); font-weight:var(--weight-body); line-height:1.6; -webkit-font-smoothing:antialiased }
[hidden] { display:none !important }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer; background:none; border:0; padding:0 }
button:disabled { cursor:not-allowed }
img { max-width:100%; height:auto }
svg { flex-shrink:0; vertical-align:middle }
ul { list-style:none; margin:0; padding:0 }
p { margin:0 }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text); font-weight:var(--weight-display); text-wrap:balance }
h1 { margin:0; font-size:clamp(52px,5vw,var(--size-h1)); line-height:1.12; letter-spacing:-.02em }
h2 { margin:0 0 var(--space-3); font-size:var(--size-h2); line-height:1.25; letter-spacing:-.02em }
h3 { margin:0 0 var(--space-2); font-size:var(--size-h3); line-height:1.35 }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm) }
::selection { background:var(--accent-soft); color:var(--accent-dark) }
.no-break { white-space:nowrap }
.wrap { width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); min-width:0 }
.reading-wrap { width:100%; max-width:var(--reading); margin-inline:auto; padding-inline:var(--gutter); min-width:0 }
.sec { padding-top:var(--space-10); padding-bottom:var(--space-10) }
.section-head { max-width:800px; margin-bottom:var(--space-5) }
.section-head p,.muted { color:var(--text-muted) }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.grid-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3) }
.grid-five { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-2) }
.grid-three>*,.grid-five>*,.wrap>* { min-width:0 }
.panel,.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:inset 0 1px 0 var(--hairline-hi),var(--shadow-mid); min-width:0 }
.card { padding:var(--space-4) }
.panel-inset { background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r) }
.icon-board { display:grid; place-items:center; width:48px; height:48px; margin-bottom:var(--space-3); background:var(--accent-soft); color:var(--accent); border-radius:var(--r-sm); flex-shrink:0 }
.icon-board svg { width:24px; height:24px }
.prose { min-width:0; overflow-wrap:break-word }
.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote { margin:0 0 var(--space-3) }
.prose ul { list-style:disc; padding-left:var(--space-3) }
.prose ol { padding-left:var(--space-3) }
.prose h2 { margin-top:var(--space-8) }
.prose h3 { margin-top:var(--space-5) }
.prose a:not(.btn) { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
code { font-family:var(--font-mono); overflow-wrap:anywhere; font-size:.9em }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:var(--space-3); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r) }
pre code { overflow-wrap:normal; white-space:pre }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 28px; border-radius:var(--r-pill); font-size:var(--size-body); font-weight:var(--weight-semibold); white-space:nowrap; flex-shrink:0; transition:background-color var(--duration-fast),color var(--duration-fast) }
.btn svg { width:16px; height:16px }
.btn-solid,.btn-primary { background:var(--accent); color:var(--on-dark); box-shadow:inset 0 1px 0 var(--on-dark-18),var(--shadow-btn) }
.btn-solid:hover,.btn-primary:hover,.btn-solid:active,.btn-primary:active,.btn.is-pressed { background:var(--accent-dark) }
.btn-ghost,.btn-secondary { background:var(--panel); color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent) }
.btn-ghost:hover,.btn-secondary:hover,.btn.is-hover { background:var(--accent-soft); color:var(--accent-dark) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--text-muted); box-shadow:inset 0 0 0 1px var(--border); pointer-events:none }
.btn.is-focused { outline:2px solid var(--accent); outline-offset:3px }
.cta-pair { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:22px }
.notice { background:var(--bar); color:var(--on-dark); font-size:14px; line-height:20px; padding:8px 24px; text-align:center }
.notice a { display:inline-block; min-height:24px; margin-left:14px; font-weight:var(--weight-medium); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
.notice a:hover { text-decoration-thickness:2px }
.masthead { position:relative; z-index:40; padding:12px 24px 0 }
.masthead-bar { position:relative; z-index:43; max-width:1200px; height:60px; margin:0 auto; display:flex; align-items:center; flex-wrap:nowrap; gap:24px; padding:0 10px 0 18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:inset 0 1px 0 var(--hairline-hi),var(--shadow-nav) }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:var(--weight-display); font-size:19px; letter-spacing:-.02em; color:var(--text); white-space:nowrap; flex-shrink:0 }
.brand-mark { display:block; flex:none; width:32px; height:32px }
.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-list>li>a,.nav-more-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:38px; padding:0 14px; border-radius:var(--r-pill); font-size:15px; font-weight:var(--weight-medium); color:var(--text-muted); white-space:nowrap; transition:color var(--duration-fast),background-color var(--duration-fast) }
.nav-list>li>a:hover,.nav-more-btn:hover { color:var(--text); background:var(--panel-soft) }
.nav-list a[aria-current="page"],.nav-more-btn[aria-current="page"] { color:var(--accent); font-weight:var(--weight-semibold) }
.nav-more { position:relative }
.nav-more-btn { list-style:none; cursor:pointer }
.nav-more-btn::-webkit-details-marker { display:none }
.nav-more-btn svg { width:12px; height:12px }
.nav-menu { position:absolute; z-index:45; top:calc(100% + 10px); left:50%; transform:translateX(-50%); min-width:220px; padding:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:inset 0 1px 0 var(--hairline-hi),var(--shadow-front) }
.nav-menu-label { padding:8px 10px 4px; font-size:11px; font-weight:var(--weight-bold); letter-spacing:.08em; color:var(--text-muted) }
.nav-menu a { display:block; padding:8px 10px; border-radius:var(--r-sm); font-size:14px; color:var(--text) }
.nav-menu a:hover { background:var(--accent-soft); color:var(--accent-dark) }
.masthead-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto }
.lang-picker { position:relative }
.lang-switch { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; width:auto; height:38px; padding:0 12px; border-radius:var(--r-pill); font-size:14px; color:var(--text-muted); white-space:nowrap; cursor:pointer; list-style:none }
.lang-switch::-webkit-details-marker { display:none }
.lang-switch:hover { background:var(--panel-soft); color:var(--text) }
.lang-switch svg { width:16px; height:16px }
.lang-panel { position:absolute; right:0; top:calc(100% + 12px); z-index:46; width:180px; padding:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-front) }
.lang-panel a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sm); white-space:nowrap; font-size:14px }
.lang-panel a:hover,.lang-panel a[aria-current] { background:var(--accent-soft); color:var(--accent-dark) }
.btn-login { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 22px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-dark); font-size:15px; font-weight:var(--weight-semibold); box-shadow:var(--shadow-btn); white-space:nowrap; flex-shrink:0 }
.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; color:var(--accent-dark); border-radius:var(--r-sm) }
.menu-line { display:block; width:20px; height:2px; background:currentColor; flex-shrink:0 }
.mobile-drawer { position:fixed; z-index:42; top:var(--header-edge); right:12px; left:12px; height:calc(100dvh - var(--header-edge) - 12px); max-height:calc(100dvh - var(--header-edge) - 12px); overflow-y:auto; overscroll-behavior:contain; padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-front) }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 16px; border-radius:var(--r-sm) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--accent-soft); color:var(--accent-dark) }
.drawer-label { margin:16px 16px 8px; padding-top:16px; border-top:1px solid var(--border); color:var(--text-muted); font-size:var(--size-small) }
.menu-veil { position:fixed; z-index:41; inset:var(--header-edge) 0 0; background:var(--veil); cursor:pointer }
.site-footer { border-top:1px solid var(--border); background:var(--panel-2); padding-top:var(--space-8); padding-bottom:var(--space-4) }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--space-6); min-width:0 }
.footer-brand p { margin-top:var(--space-2); max-width:340px; color:var(--text-muted) }
.footer-title { margin-bottom:var(--space-2); font-size:var(--size-small); font-weight:var(--weight-bold); color:var(--accent-dark) }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px }
.footer-links a,.footer-langs a,.footer-legal a { display:inline-flex; align-items:center; min-height:32px; font-size:var(--size-small) }
.footer-links a:hover,.footer-langs a:hover,.footer-legal a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.footer-langs { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:var(--space-5); padding-top:var(--space-3); border-top:1px solid var(--border-strong) }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; padding-top:var(--space-3); color:var(--text-muted); font-size:var(--size-small) }
.footer-legal { display:flex; flex-wrap:wrap; gap:16px }
.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 }
#server-status { position:relative; display:block; min-width:0; min-height:96px; max-width:100%; overflow:hidden; margin-top:var(--space-4); margin-bottom:var(--space-4) }
#server-status+* { margin-top:var(--space-4) }
#server-status>* { min-width:0; max-width:100% }
.tilt { transform:rotate(-.45deg) }
.decorated-section { position:relative; isolation:isolate; overflow-x:clip; max-width:100% }
@media (max-width:1080px) {
  .masthead-bar { gap:16px }
  .nav-list>li>a,.nav-more-btn { padding-inline:10px }
}
@media (max-width:960px) {
  .primary-nav { display:none }
  .masthead-bar { justify-content:space-between }
  .masthead-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
}
@media (max-width:768px) {
  :root { --gutter:16px; --size-h2:28px; --size-h3:20px; --space-10:56px }
  h1 { font-size:38px; line-height:1.14 }
  .masthead { padding:10px 12px 0 }
  .grid-three { grid-template-columns:minmax(0,1fr) }
  .grid-five { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:32px }
  .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .no-break { white-space:normal }
  .tilt { transform:none }
  .decorated-section { max-width:100%; overflow-x:clip }
  .notice { padding:8px 16px; font-size:12px }
  .notice a { margin-left:8px }
  .masthead-bar { gap:8px; padding-inline:10px }
  .brand { gap:6px; font-size:16px }
  .brand-mark { width:28px; height:28px }
  .masthead-tools { gap:2px; margin-left:auto }
  .lang-switch { padding-inline:6px; font-size:12px }
  .lang-switch svg { display:none }
  .btn-login { padding-inline:14px; font-size:14px }
  .card { padding:24px }
  .footer-bottom { display:block }
  .footer-legal { margin-top:8px }
}
@media (max-width:360px) {
  .brand { font-size:14px }
  .brand-mark { width:24px; height:24px }
  .lang-switch { font-size:11px; padding-inline:4px }
  .btn-login { padding-inline:10px }
  .masthead-bar { gap:4px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .reveal,.reveal.pending,.reveal.shown { opacity:1; transform:none; transition:none }
  .btn,.nav-list>li>a,.nav-more-btn { transition:none }
}