:root {
  --bg:#F7F7F2;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#EFF0EA;
  --border:#E0E3D8;
  --accent:#C8E43F;
  --accent-dark:#3E6A1E;
  --text:#17190F;
  --text-muted:#5C6055;
  --success:#2F8F4E;
  --warn:#C4860F;
  --error:#C5402D;
  --ink:#15160F;
  --ink-text:#F2F4E6;
  --lime-soft:#D9EC86;
  --moss-mid:#5B8A2B;
  --board-from:#F2F5E4;
  --board-to:#DCE8B0;
  --bg-deep:#F0F1E8;
  --lime-mist:rgba(200,228,63,.30);
  --lime-half:rgba(200,228,63,.58);
  --lime-atmo:rgba(200,228,63,.06);
  --moss-dot:rgba(62,106,30,.03);
  --moss-08:rgba(62,106,30,.08);
  --moss-10:rgba(62,106,30,.10);
  --moss-12:rgba(62,106,30,.12);
  --moss-16:rgba(62,106,30,.16);
  --moss-24:rgba(62,106,30,.24);
  --ink-06:rgba(23,25,15,.06);
  --ink-10:rgba(23,25,15,.10);
  --ink-40:rgba(23,25,15,.40);
  --white-0:rgba(255,255,255,0);
  --white-55:rgba(255,255,255,.55);
  --white-70:rgba(255,255,255,.70);
  --white-90:rgba(255,255,255,.90);
  --flag-red:#D52B2B;
  --flag-blue:#22408F;
  --flag-white:#FFFFFF;

  --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;
  --r-board:32px;
  --r-container:28px;
  --r-window:20px;
  --r-card:16px;
  --r-field:14px;
  --r-mini:12px;
  --r-sm:10px;
  --r-pill:999px;
  --r-circle:50%;
  --r-square:0;
  --fs-h1:64px;
  --fs-h2:40px;
  --fs-h3:24px;
  --fs-sub:18px;
  --fs-body:16px;
  --fs-small:13px;
  --weight-body:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:800;
  --tracking-display:-.025em;
  --tracking-cjk:-.02em;
  --gutter:24px;
  --content-width:1376px;
  --reading-width:800px;
  --nav-height:68px;
  --anchor-offset:84px;
  --toc-offset:16px;
  --chapter-offset:100px;
  --space-section:80px;
  --shadow-float:0 24px 48px var(--moss-10),0 2px 8px var(--ink-06);
  --shadow-float-near:0 30px 56px var(--moss-16),0 4px 10px var(--ink-06);
  --shadow-window:0 40px 72px -12px var(--moss-16),0 24px 48px var(--moss-12),0 3px 6px var(--ink-10);
  --edge-hl:inset 0 1px 0 var(--white-90);
  --transition-quick:180ms;
  --transition-reveal:480ms;
  --focus-width:2px;
  --focus-offset:3px;
}
*,*::before,*::after { box-sizing:border-box; }
html {
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-padding-top:var(--anchor-offset);
  scroll-behavior:smooth;
}
body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--weight-body);
  line-height:1.6;
  color:var(--text);
  background:
    linear-gradient(180deg,var(--lime-atmo) 0,var(--white-0) 560px),
    linear-gradient(180deg,var(--bg) 0,var(--bg) 420px,var(--bg-deep) 860px,var(--bg) 1200px);
  -webkit-font-smoothing:antialiased;
}
[hidden] { display:none !important; }
img { display:block; max-width:100%; height:auto; }
svg { flex-shrink:0; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
a { color:var(--accent-dark); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:var(--focus-width) solid var(--accent-dark); outline-offset:var(--focus-offset); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-display); text-wrap:balance; }
h1 { margin:0 0 24px; font-size:var(--fs-h1); line-height:1.1; letter-spacing:var(--tracking-display); }
h2 { margin:0 0 20px; font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--tracking-cjk); }
h3 { margin:0 0 12px; font-size:var(--fs-h3); line-height:1.35; letter-spacing:var(--tracking-cjk); }
:lang(zh) h1,:lang(ja) h1,:lang(ko) h1 { letter-spacing:var(--tracking-cjk); }
p { margin:0 0 20px; }
small { font-size:var(--fs-small); }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; word-break:break-word; }
pre {
  max-width:100%;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--bg-panel-2);
  font-size:14px;
}
pre code { overflow-wrap:normal; word-break:normal; }
hr { border:0; border-top:1px solid var(--border); margin:32px 0; }
.wrap { width:100%; max-width:var(--content-width); margin-inline:auto; padding-inline:var(--gutter); }
.reading-wrap { width:100%; max-width:var(--reading-width); margin-inline:auto; padding-inline:var(--gutter); }
.sec { padding-top:var(--space-section); padding-bottom:var(--space-section); }
.grid { display:grid; gap:24px; }
.grid > *, .board > *, .footer-grid > *, .feature-panel > * { min-width:0; }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.stack > * + * { margin-top:24px; }
.panel { padding:32px; border-radius:var(--r-container); background:var(--bg-panel-2); box-shadow:var(--edge-hl); }
.card { padding:24px; border-radius:var(--r-card); background:var(--bg-panel); box-shadow:var(--shadow-float),var(--edge-hl); border:1px solid var(--border); }
.muted { color:var(--text-muted); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.center { text-align:center; }
.no-break { white-space:nowrap; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.icon { display:block; width:20px; height:20px; flex-shrink:0; }
.symbol-bank { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.btn,.btn-primary,.btn-ghost,.btn-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 22px;
  border-radius:var(--r-field);
  font-size:var(--fs-body);
  font-weight:var(--weight-bold);
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  border:1px solid var(--border);
}
.btn-primary {
  height:56px;
  padding:0 28px;
  border:0;
  background:var(--accent);
  color:var(--text);
  box-shadow:inset 0 1px 0 var(--white-55),inset 0 -2px 0 var(--moss-12),0 10px 24px var(--moss-16);
  transition:transform var(--transition-quick) ease,box-shadow var(--transition-quick) ease;
}
.btn-primary:hover,.btn-primary.is-hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 var(--white-55),inset 0 -2px 0 var(--moss-12),0 14px 28px var(--moss-24);
}
.btn-primary:active { transform:translateY(1px); }
.btn-ghost {
  height:56px;
  padding:0 22px;
  border:1.5px solid var(--text);
  background:var(--white-55);
  color:var(--text);
  font-size:15px;
  font-weight:var(--weight-semibold);
  transition:background var(--transition-quick) ease;
}
.btn-ghost:hover,.btn-ghost.is-hover { background:var(--bg-panel); }
.btn-secondary,.btn { background:var(--bg-panel); color:var(--accent-dark); }
.btn-secondary:hover,.btn:hover { background:var(--bg-panel-2); border-color:var(--accent-dark); }
.btn-primary:disabled,.btn-secondary:disabled { background:var(--bg-panel-2); color:var(--text-muted); box-shadow:none; transform:none; }
.is-focus { outline:var(--focus-width) solid var(--accent-dark); outline-offset:var(--focus-offset); }
.button-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.notice {
  background:var(--ink);
  color:var(--lime-soft);
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:8px 24px;
  font-size:13px;
  line-height:1.4;
  letter-spacing:.01em;
}
.notice-label { color:var(--ink-text); font-weight:var(--weight-bold); }
.notice-link {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  color:var(--ink-text);
  font-weight:var(--weight-semibold);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  white-space:nowrap;
}
.notice-link:hover { color:var(--lime-soft); }
#site-header { position:relative; z-index:90; }
.topnav {
  position:relative;
  z-index:92;
  max-width:var(--content-width);
  margin:0 auto;
  height:var(--nav-height);
  display:flex;
  align-items:center;
  gap:32px;
  padding:0 8px;
}
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; color:var(--text); }
.brand-mark { width:34px; height:34px; border-radius:var(--r-sm); flex:none; }
.brand-word { font-family:var(--font-display); font-weight:var(--weight-display); font-size:19px; letter-spacing:-.02em; color:var(--text); }
.brand-local { color:var(--text-muted); font-weight:var(--weight-medium); }
.desktop-nav { flex:1; min-width:0; }
.navline {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14.5px;
  white-space:nowrap;
}
.navline li { display:flex; align-items:center; }
.navline li + li::before { content:"·"; margin:0 13px; color:var(--text-muted); opacity:.55; }
.navline a { display:inline-flex; align-items:center; min-height:32px; text-decoration:none; color:var(--text-muted); font-weight:var(--weight-medium); padding:6px 0; }
.navline a:hover { color:var(--text); }
.navline a[aria-current="page"] { color:var(--accent-dark); font-weight:var(--weight-bold); }
.nav-tools { display:flex; align-items:center; gap:14px; flex:none; }
.language-control { position:relative; }
.lang {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:32px;
  min-width:44px;
  width:auto;
  font:inherit;
  font-size:14px;
  color:var(--text-muted);
  background:var(--white-0);
  border:0;
  padding:6px 4px;
  cursor:pointer;
}
.lang span { white-space:nowrap; }
.lang svg { width:16px; height:16px; display:block; }
.language-menu {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:176px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--bg-panel);
  box-shadow:var(--shadow-float);
  z-index:95;
}
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; color:var(--text); text-decoration:none; border-radius:var(--r-sm); }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--bg-panel-2); color:var(--accent-dark); }
.btn-login {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  padding:0 18px;
  border-radius:var(--r-pill);
  background:var(--ink);
  color:var(--ink-text);
  font-size:14px;
  font-weight:var(--weight-semibold);
  text-decoration:none;
  box-shadow:0 6px 16px var(--ink-10);
}
.btn-login svg { width:15px; height:15px; display:block; }
.btn-login:hover { background:var(--accent-dark); }
.menu-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  color:var(--text);
}
.menu-toggle svg { width:20px; height:20px; }
.mobile-drawer { display:none; }
.nav-veil { position:fixed; inset:0; z-index:91; border:0; background:var(--ink-40); }
html.nav-open { overflow:hidden; }
.site-footer { margin-top:40px; padding-top:56px; padding-bottom:28px; background:var(--bg-panel-2); border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr .85fr; gap:40px; }
.footer-brand p { color:var(--text-muted); margin-top:16px; max-width:28em; }
.footer-heading { margin:0 0 14px; font-size:16px; font-weight:var(--weight-bold); }
.footer-links { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.footer-links a { display:inline-flex; align-items:center; min-height:28px; text-decoration:none; color:var(--text-muted); }
.footer-links a:hover { color:var(--accent-dark); text-decoration:underline; }
.footer-bottom { margin-top:36px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; color:var(--text-muted); font-size:13px; }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px; }
.footer-legal a { display:inline-flex; align-items:center; min-height:28px; color:var(--text); }
.prose { min-width:0; overflow-wrap:break-word; }
.prose p,.prose li { line-height:1.85; }
.prose h2 { margin-top:48px; font-size:32px; }
.prose h3 { margin-top:28px; }
.prose ul,.prose ol { padding-left:24px; }
.prose li + li { margin-top:8px; }
.decorated-section,.tilt-region { overflow-x:clip; max-width:100%; }
#server-status { position:static; display:block; min-height:48px; width:100%; max-width:100%; overflow:hidden; margin-top:20px; margin-bottom:24px; }
#server-status + * { margin-top:24px; }
.reveal { transition:opacity var(--transition-reveal) ease,transform var(--transition-reveal) ease; }
.reveal.pending { opacity:0; transform:translateY(16px); }
.reveal.shown { opacity:1; transform:none; }
@media (max-width:1320px) {
  :root { --fs-h1:56px; }
  .topnav { padding-inline:var(--gutter); gap:24px; }
  .navline li + li::before { margin:0 9px; }
}
@media (max-width:1180px) {
  .navline { font-size:13.5px; }
  .nav-tools { gap:10px; }
}
@media (max-width:1080px) {
  .desktop-nav { display:none; }
  .nav-tools { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .mobile-drawer:not([hidden]) {
    position:absolute;
    top:100%;
    left:var(--gutter);
    right:var(--gutter);
    z-index:94;
    display:block;
    max-height:calc(100dvh - 124px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--r-card);
    background:var(--bg-panel);
    box-shadow:var(--shadow-float-near);
  }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px; color:var(--text); text-decoration:none; border-radius:var(--r-sm); }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--bg-panel-2); color:var(--accent-dark); }
  .drawer-languages { border-top:1px solid var(--border); margin-top:12px; padding-top:12px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-five { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  :root { --fs-h1:40px; --fs-h2:32px; --space-section:56px; --gutter:20px; }
  h1 { line-height:1.12; }
  .grid-three { grid-template-columns:1fr; }
  .grid-five { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topnav { gap:12px; }
  .nav-tools { margin-left:auto; gap:8px; }
  .language-control .lang span { display:none; }
  .notice { gap:12px; padding-inline:var(--gutter); font-size:12px; }
  .panel { padding:24px; }
}
@media (max-width:640px) {
  :root { --gutter:16px; }
  .no-break { white-space:normal; }
  .tilt,.tilt-card,.client-wrap { transform:none; }
  .decorated-section,.tilt-region { max-width:100%; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .grid-five { grid-template-columns:1fr; }
  .brand-word { font-size:17px; }
  .brand-mark { width:30px; height:30px; }
  .brand { gap:7px; }
  .btn-login { padding-inline:13px; }
  .btn-login svg { display:none; }
  .nav-tools { gap:4px; margin-left:auto; }
  .notice { flex-wrap:wrap; gap:2px 12px; }
  .notice-link { min-height:24px; }
  .card { padding:20px; }
  .prose h2 { font-size:28px; }
}
@media (max-width:360px) {
  :root { --fs-h1:34px; }
  .topnav { gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal,.reveal.pending,.reveal.shown { opacity:1; transform:none; transition:none; }
  .btn-primary,.btn-ghost { transition:none; }
  .btn-primary:hover,.btn-primary.is-hover { transform:none; }
}