:root {
  color-scheme: light;
  --bg:#F9F0E3;
  --panel:#FFFBF4;
  --groove:#F1E5D3;
  --line:#E4D5BF;
  --accent:#D6336C;
  --accent-deep:#A61E50;
  --ink:#2A1F17;
  --ink-soft:#74655A;
  --ok:#2F8F5B;
  --warn:#C98A12;
  --err:#C2412D;
  --sky-top:#F4D6C2;
  --sky-mid:#F7E3D3;
  --cloud:rgba(255,251,244,.62);
  --cloud-soft:rgba(255,251,244,.34);
  --clear:rgba(255,251,244,0);
  --grain:rgba(42,31,23,.03);
  --glass:rgba(255,251,244,.72);
  --glass-strong:rgba(255,251,244,.88);
  --hi-edge:rgba(255,255,255,.78);
  --hl-gloss:rgba(255,255,255,.28);
  --accent-shadow:rgba(214,51,108,.10);
  --accent-tint:rgba(214,51,108,.12);
  --accent-shadow-strong:rgba(214,51,108,.14);
  --ink-shadow:rgba(42,31,23,.10);
  --ink-shadow-2:rgba(42,31,23,.18);
  --ok-tint:rgba(47,143,91,.12);
  --peach:#FBE6D6;
  --rose-tint:#FBE3EA;
  --dark-card:#2E2430;
  --alu-top:#E6E0D7;
  --alu-hi:#D9D2C8;
  --alu-lo:#BDB4A8;
  --alu-edge:rgba(255,255,255,.72);
  --alu-groove:#A99F92;
  --bezel:rgba(42,31,23,.42);
  --lens:#4A3C33;
  --desk-a:#F8DCC8;
  --desk-b:#FBEADB;
  --desk-c:#F6DAD8;
  --menubar:rgba(255,251,244,.55);
  --ledge-face:#E8D8C2;
  --flag-red:#C8372D;
  --flag-white:#FFFBF4;
  --flag-blue:#24356A;
  --flag-black:#2A1F17;
  --flag-gold:#E2A82B;
  --flag-ring:rgba(42,31,23,.14);
  --veil:rgba(42,31,23,.32);
  --r-pill:999px;
  --r-card:28px;
  --r-lg:18px;
  --r-md:12px;
  --r-sm:8px;
  --r-flag:4px;
  --r-flag-small:3px;
  --r-flag-large:6px;
  --r-lid:22px 22px 10px 10px;
  --r-lid-mobile:16px 16px 8px 8px;
  --r-screen:10px;
  --r-notch:0 0 8px 8px;
  --r-deck:2px 2px 14px 14px;
  --r-ledge:7px 7px 10px 10px;
  --r-highlight:.2em;
  --r-circle:50%;
  --r-tiny:2px;
  --r-micro:1px;
  --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","Microsoft YaHei",-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-heavy:800;
  --weight-display:900;
  --text-small:.8125rem;
  --text-body:1rem;
  --text-lede:1.125rem;
  --text-h3:1.375rem;
  --text-h2:clamp(1.75rem,3vw,2.75rem);
  --text-h1:clamp(52px,5vw,72px);
  --gutter:32px;
  --content-width:1200px;
  --reading-width:800px;
  --header-height:64px;
  --anchor-offset:80px;
  --toc-offset:144px;
  --shadow-card:0 24px 48px var(--accent-shadow),0 4px 12px var(--ink-shadow);
  --shadow-inset:inset 0 1px 0 var(--hi-edge);
  --ease: cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; }
html { background:var(--bg); scroll-padding-top:var(--anchor-offset); scroll-behavior:smooth; }
body {
  font-family:var(--font-body); font-weight:var(--weight-body); font-size:var(--text-body);
  line-height:1.7; color:var(--ink); background-color:var(--bg);
  background-image:radial-gradient(var(--grain) .55px,var(--clear) .9px),radial-gradient(var(--grain) .5px,var(--clear) .85px),radial-gradient(var(--grain) .45px,var(--clear) .8px);
  background-size:3px 3px,5px 5px,7px 7px; background-position:0 0,1px 2px,3px 1px;
  -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 { border:0; background:var(--clear); }
img { display:block; max-width:100%; height:auto; }
svg { flex-shrink:0; vertical-align:middle; }
ul,ol { padding-left:1.4em; }
li { overflow-wrap:anywhere; }
h1,h2,h3 { font-family:var(--font-display); font-weight:var(--weight-display); text-wrap:balance; overflow-wrap:break-word; }
h1 { font-size:var(--text-h1); line-height:1.12; letter-spacing:-.02em; }
h2 { font-size:var(--text-h2); line-height:1.2; letter-spacing:-.02em; }
h3 { font-size:var(--text-h3); line-height:1.35; }
p { overflow-wrap:anywhere; }
strong { font-weight:var(--weight-bold); }
small { font-size:var(--text-small); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; }
pre { max-width:100%; overflow-x:auto; padding:20px; background:var(--groove); border-radius:var(--r-md); }
pre code { white-space:pre; overflow-wrap:normal; }
hr { border:0; border-top:1px solid var(--line); margin-block:24px; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
.no-break { white-space:nowrap; }
.wrap { width:100%; max-width:calc(var(--content-width) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.reading-wrap { width:100%; max-width:calc(var(--reading-width) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.sec { padding-top:80px; padding-bottom:80px; }
.section-head { max-width:760px; margin:0 auto 32px; text-align:center; }
.section-head p { margin-top:16px; color:var(--ink-soft); }
.grid { display:grid; gap:24px; }
.grid > *, .wrap > *, .reading-wrap > *, .grid :where(article,section,div) { min-width:0; }
.grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.panel,.card { min-width:0; padding:28px; border-radius:var(--r-card); background:var(--panel); box-shadow:var(--shadow-inset),var(--shadow-card); }
.panel--groove { background:var(--groove); }
.muted { color:var(--ink-soft); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.prose { min-width:0; }
.prose p,.prose ul,.prose ol,.prose pre,.prose table,.prose blockquote { margin-block:20px; }
.prose h2 { margin-top:48px; margin-bottom:20px; }
.prose h3 { margin-top:32px; margin-bottom:16px; }
.prose a { text-decoration:underline; text-underline-offset:.2em; }
.prose li + li { margin-top:8px; }
.prose :where(img,video) { max-width:100%; }
.decorated,.tilt-frame { position:relative; overflow-x:clip; max-width:100%; }
.tilt { transform:rotate(-.45deg); }
#server-status { position:relative; display:block; min-width:0; width:100%; max-width:100%; overflow:hidden; margin-block:24px; }
#server-status > * { min-width:0; max-width:100%; }
#server-status + * { margin-top:32px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0;
  min-height:48px; padding:0 30px; border-radius:var(--r-pill);
  font-size:var(--text-body); font-weight:var(--weight-bold); white-space:nowrap; max-width:100%;
  transition:transform .2s var(--ease),background-color .2s var(--ease);
}
.btn:hover { transform:translateY(-1px); }
.btn svg { width:16px; height:16px; }
.btn--solid,.btn-primary { background:var(--ink); color:var(--panel); box-shadow:0 12px 26px var(--ink-shadow-2),inset 0 1px 0 var(--hl-gloss); }
.btn--line,.btn-secondary { background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink),0 8px 20px var(--accent-shadow); }
.btn--small { min-height:36px; padding-inline:18px; font-size:var(--text-small); }
.btn:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; background:var(--groove); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line); transform:none; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:var(--r-circle); background:var(--groove); }
.icon-button svg { width:20px; height:20px; }
.cta { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:20px; }
.reveal { transition:opacity .35s var(--ease),transform .35s var(--ease); }
.reveal.pending { opacity:0; transform:translateY(16px); }
.reveal.shown { opacity:1; transform:none; }

/* Shared header */
#site-header { position:relative; z-index:60; min-height:var(--header-height); }
.topbar { position:relative; z-index:60; }
.topbar__in { max-width:1312px; margin:0 auto; padding:0 32px; height:var(--header-height); display:flex; align-items:center; flex-wrap:nowrap; gap:24px; }
.brandmark { display:inline-flex; align-items:center; gap:10px; flex:none; min-height:44px; }
.brandmark img { width:34px; height:34px; filter:drop-shadow(0 4px 8px var(--accent-tint)); }
.brandmark__en { font-family:var(--font-display); font-weight:var(--weight-display); font-size:20px; letter-spacing:-.02em; white-space:nowrap; }
.brandmark__zh { font-size:14px; font-weight:var(--weight-medium); color:var(--ink-soft); }
.mainnav { margin-left:auto; flex:1; min-width:0; }
.mainnav ul { display:flex; align-items:center; justify-content:flex-end; list-style:none; margin:0; padding:0; gap:2px; }
.mainnav li { min-width:0; }
.mainnav a { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 12px; border-radius:var(--r-pill); font-size:14px; font-weight:var(--weight-medium); white-space:nowrap; transition:background-color .2s var(--ease); }
.mainnav a svg { width:16px; height:16px; color:var(--ink-soft); }
.mainnav a:hover { background:var(--glass); }
.mainnav a[aria-current="page"] { background:var(--glass-strong); box-shadow:inset 0 0 0 1px var(--line),0 4px 12px var(--accent-shadow); font-weight:var(--weight-bold); }
.mainnav a[aria-current="page"] svg { color:var(--ink); }
.tools { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.tools__rule { width:1px; height:18px; background:var(--line); }
.loginbtn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 22px; border-radius:var(--r-pill); background:var(--ink); color:var(--panel); font-size:14px; font-weight:var(--weight-bold); white-space:nowrap; box-shadow:0 8px 18px var(--ink-shadow),inset 0 1px 0 var(--hl-gloss); }
.langpick { position:relative; }
.langpick__button { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:auto; min-width:44px; min-height:38px; padding-inline:4px; font-size:14px; color:var(--ink-soft); font-weight:var(--weight-medium); }
.langpick__button span { white-space:nowrap; }
.langpick__button svg { width:12px; height:12px; }
.langpick__panel { position:absolute; right:0; top:calc(100% + 10px); z-index:90; width:184px; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.langpick__panel a { display:flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:var(--r-sm); }
.langpick__panel a:hover,.langpick__panel a[aria-current] { background:var(--groove); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border-radius:var(--r-pill); background:var(--panel); }
.menu-toggle svg { width:22px; height:22px; }
.menu-toggle[aria-expanded="true"] { background:var(--groove); }
.mobile-drawer { display:none; position:fixed; z-index:58; 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; background:var(--panel); padding:16px var(--gutter) 32px; }
.mobile-drawer ul { list-style:none; margin:0; padding:0; }
.mobile-drawer a { display:flex; align-items:center; width:100%; gap:12px; min-height:48px; padding:12px 16px; border-radius:var(--r-md); }
.mobile-drawer a svg { width:18px; height:18px; }
.mobile-drawer a[aria-current] { background:var(--groove); font-weight:var(--weight-bold); }
.mobile-drawer__languages { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.nav-veil { display:none; position:fixed; z-index:57; inset:var(--header-height) 0 0; background:var(--veil); }
html.nav-open { overflow:hidden; }

/* Shared footer */
.site-footer { margin-top:48px; background:var(--groove); border-top:1px solid var(--line); box-shadow:inset 0 1px 0 var(--hi-edge); }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-top:56px; padding-bottom:40px; }
.footer-grid > * { min-width:0; }
.footer-brand p { margin-top:16px; max-width:300px; color:var(--ink-soft); }
.footer-heading { font-size:var(--text-body); margin-bottom:12px; font-weight:var(--weight-heavy); }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.footer-links a { display:inline-flex; align-items:center; min-height:32px; padding-block:3px; text-underline-offset:.2em; }
.footer-links a:hover { text-decoration:underline; }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:20px; padding-bottom:24px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:var(--text-small); }
.footer-legal { display:flex; flex-wrap:wrap; gap:16px; }
.footer-legal a { display:inline-flex; align-items:center; min-height:28px; }

@media (max-width:1240px) {
  .topbar__in { gap:12px; padding-inline:24px; }
  .mainnav a { padding-inline:8px; gap:4px; }
  .tools { gap:8px; }
}
@media (max-width:1080px) {
  .mainnav { display:none; }
  .tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  html.nav-open .mobile-drawer,html.nav-open .nav-veil { display:block; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--five { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  h1 { font-size:clamp(28px,6vw,40px); }
  .grid--three { grid-template-columns:1fr; }
  .sec { padding-top:48px; padding-bottom:48px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .no-break { white-space:normal; }
  .topbar__in { padding-inline:16px; gap:8px; }
  .brandmark { gap:6px; }
  .brandmark img { width:28px; height:28px; }
  .brandmark__en { font-size:17px; }
  .brandmark__zh,.tools__rule { display:none; }
  .tools { margin-left:auto; gap:6px; }
  .langpick__button { font-size:12px; padding-inline:2px; gap:2px; }
  .loginbtn { min-height:36px; padding-inline:12px; font-size:13px; }
  .btn { min-height:46px; padding-inline:24px; }
  .panel,.card { padding:22px; }
  .tilt,.tilt-frame { transform:none; max-width:100%; }
  .decorated { max-width:100%; overflow-x:clip; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-brand { grid-column:1 / -1; }
  .grid--five { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal,.reveal.pending { opacity:1; transform:none; }
}