:root {
  color-scheme: light;
  --bg: #F8F1E6;
  --bg-top: #FBF6EE;
  --bg-bottom: #F3EADB;
  --panel: #FFFCF7;
  --panel-2: #F1E6D5;
  --chrome: #F8F0E4;
  --border: #E4D5C0;
  --border-strong: #D3BFA4;
  --accent: #4F2B66;
  --accent-2: #7A4C93;
  --accent-dark: #361C47;
  --apricot: #F6DCC2;
  --apricot-tint: #FAEBDC;
  --apricot-warm: #EFC6A0;
  --apricot-line: #E5BC93;
  --text: #2A1F1A;
  --muted: #6E5F55;
  --success: #3E7D4F;
  --warn: #B7791F;
  --error: #B23A3A;
  --transparent: transparent;
  --accent-06: rgba(79,43,102,.06);
  --accent-10: rgba(79,43,102,.10);
  --accent-14: rgba(79,43,102,.14);
  --accent-20: rgba(79,43,102,.20);
  --accent-28: rgba(79,43,102,.28);
  --accent-2-40: rgba(122,76,147,.40);
  --ink-08: rgba(42,31,26,.08);
  --ink-14: rgba(42,31,26,.14);
  --ink-20: rgba(42,31,26,.20);
  --hi: rgba(255,255,255,.75);
  --hi-soft: rgba(255,255,255,.24);
  --tile-edge: rgba(255,255,255,.14);
  --glass: rgba(255,252,247,.9);
  --panel-veil: rgba(255,252,247,.45);
  --head-bg: rgba(251,246,238,.78);
  --line-head: rgba(228,213,192,.8);
  --apricot-glow: rgba(246,220,194,.42);
  --sky-rose: #D9A3A1;
  --scene-ink-2: rgba(54,28,71,.55);
  --mist-1: #E9E1EA;
  --mist-2: #F7EBDD;
  --mist-veil: rgba(255,252,247,.6);
  --mt-far: #C7B3CE;
  --mt-near: #9A7EA8;
  --mt-deep: #6E4F80;
  --steel-1: #A9B5C3;
  --steel-2: #DCDDDB;
  --stone: #B29C82;
  --stone-dark: #7A6553;
  --stone-far: #C3C3C6;
  --river: #76879A;
  --river-hi: #D2DAE2;
  --cloud: rgba(255,255,255,.55);
  --alpine-1: #B9C7D4;
  --alpine-2: #EEF1EF;
  --snow: #FDFCF9;
  --snow-shade: #CDD3DE;
  --pine: #24402F;
  --pine-2: #3B5A47;
  --flag-red: #C8323A;
  --flag-blue: #22386B;
  --flag-white: #FFFFFF;
  --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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-opacity: .03;
  --grain-size: 180px;
  --font-display: Georgia,'Times New Roman','Songti SC','STSong','Source Han Serif SC','Noto Serif CJK SC',serif;
  --font-body: 'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --title-h1: clamp(52px,4.73vw,68px);
  --title-h2: clamp(30px,3.2vw,44px);
  --title-h3: 24px;
  --r-card: 12px;
  --r-tag: 10px;
  --r-pill: 999px;
  --r-logo: 11px;
  --r-small: 3px;
  --r-circle: 50%;
  --gutter: 24px;
  --content-width: 1248px;
  --reading-width: 816px;
  --head-height: 72px;
  --toc-height: 64px;
  --anchor-gap: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-14: 112px;
  --speed-fast: .2s;
  --speed-reveal: .35s;
  --shadow-panel: 0 0 0 1px var(--border),inset 0 1px 0 var(--hi),0 28px 56px -22px var(--accent-14),0 8px 18px -10px var(--accent-10);
  --shadow-tile: 0 34px 60px -26px var(--accent-28),0 10px 22px -12px var(--accent-14);
  --shadow-tag: 0 10px 22px -12px var(--accent-28),inset 0 1px 0 var(--hi);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--head-height) + var(--anchor-gap)); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -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, a, summary { -webkit-tap-highlight-color: var(--accent-10); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-regular); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--title-h1); line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: var(--title-h2); line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: var(--title-h3); line-height: 1.3; }
ul { list-style: none; margin: 0; padding: 0; }
code, pre { font-family: var(--font-mono); }
code { overflow-wrap: anywhere; font-size: .9em; background: var(--panel-2); border-radius: var(--r-small); padding: 2px 5px; }
pre { max-width: 100%; overflow-x: auto; padding: var(--space-3); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-card); }
pre code { padding: 0; background: var(--transparent); overflow-wrap: normal; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-4); }
.no-break { white-space: nowrap; }
.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); }
.section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.section-head { max-width: 760px; margin-bottom: var(--space-5); }
.section-head p { margin-top: var(--space-2); color: var(--muted); }
.grid-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }
.grid-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
:where(.grid-three,.grid-two,.feat-in,.footer-grid,.split-feature) > * { min-width: 0; }
.panel { padding: var(--space-4); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-panel); min-width: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 168px; height: 52px; padding: 0 30px; border: 0; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 17px; font-weight: var(--weight-medium); line-height: 1.2; letter-spacing: .01em; flex-shrink: 0; white-space: nowrap; transition: transform var(--speed-fast),box-shadow var(--speed-fast),background-color var(--speed-fast); }
.btn svg { width: 18px; height: 18px; }
.btn-ghost, .btn-secondary { border: 1.5px solid var(--text); color: var(--text); background: var(--panel-veil); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--panel); transform: translateY(-1px); }
.btn-solid, .btn-primary { color: var(--panel); background: linear-gradient(120deg,var(--accent),var(--accent-2)); box-shadow: inset 0 1px 0 var(--hi-soft),0 16px 30px -14px var(--accent-28),0 4px 10px -4px var(--accent-20); }
.btn-solid:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--hi-soft),0 20px 36px -14px var(--accent-28),0 6px 12px -4px var(--accent-20); }
.btn:active { transform: translateY(0); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 22px; margin-top: var(--space-3); border: 1.5px solid var(--text); border-radius: var(--r-pill); font-size: 15px; background: var(--transparent); }
.btn-line:hover { background: var(--panel); }
.cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 28px; }
.site-head { position: relative; z-index: 60; background: var(--head-bg); border-bottom: 1px solid var(--line-head); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#site-header { position: relative; z-index: 60; }
.head-in { max-width: 1440px; margin: 0 auto; padding: 0 40px; height: var(--head-height); display: flex; align-items: center; flex-wrap: nowrap; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; }
.brand-mark { width: 34px; height: 34px; border-radius: var(--r-logo); flex: none; }
.brand-en { font-weight: var(--weight-bold); font-size: 19px; letter-spacing: .04em; color: var(--text); }
.main-nav { flex: 1; min-width: 0; }
.main-nav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 2px; }
.main-nav a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--r-pill); font-size: 15px; color: var(--muted); white-space: nowrap; min-height: 40px; transition: color var(--speed-fast),background-color var(--speed-fast); }
.main-nav a:hover { color: var(--text); background: var(--accent-06); }
.main-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-06); }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lang-wrap { position: relative; }
.lang { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; width: auto; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--transparent); color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.lang span { white-space: nowrap; }
.lang:hover { background: var(--accent-06); color: var(--text); }
.lang-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 90; min-width: 188px; padding: var(--space-1); border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-panel); }
.lang-panel a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-tag); }
.lang-panel a:hover, .lang-panel a[aria-current="true"] { background: var(--accent-06); color: var(--accent); }
.login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--r-pill); border: 1.5px solid var(--text); font-size: 15px; font-weight: var(--weight-medium); color: var(--text); background: var(--panel-veil); white-space: nowrap; }
.login:hover { background: var(--panel); }
.nav-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-tag); background: var(--panel); color: var(--text); }
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-toggle[aria-expanded="true"] { background: var(--panel-2); }
.nav-drawer { display: none; position: fixed; inset-inline: 0; top: var(--head-height); z-index: 55; height: calc(100dvh - var(--head-height)); max-height: calc(100dvh - var(--head-height)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--gutter); background: var(--panel); }
.nav-drawer a { display: flex; align-items: center; width: 100%; gap: 12px; min-height: 48px; padding: 12px 16px; border-radius: var(--r-tag); }
.nav-drawer a:hover, .nav-drawer a[aria-current="page"] { color: var(--accent); background: var(--accent-06); }
.drawer-languages { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.nav-veil { display: none; position: fixed; inset: var(--head-height) 0 0; z-index: 50; background: var(--ink-20); border: 0; width: 100%; }
html.nav-open { overflow: hidden; }
.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.3fr 1fr 1fr 1fr; gap: var(--space-5); }
.footer-brand p { max-width: 310px; margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.footer-heading { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; padding-block: 3px; color: var(--muted); font-size: var(--text-sm); }
.footer-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.legal-links a { display: inline-flex; align-items: center; min-height: 28px; }
.prose { min-width: 0; overflow-wrap: anywhere; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote { margin-top: var(--space-3); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-4); }
.prose ul { list-style: disc; padding-left: var(--space-3); }
.prose ol { padding-left: var(--space-3); }
.prose li + li { margin-top: var(--space-1); }
.prose a:not(.btn):not(.btn-line) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose section[id] { scroll-margin-top: calc(var(--head-height) + var(--anchor-gap)); }
.reveal { transition: opacity var(--speed-reveal) ease,transform var(--speed-reveal) ease; }
.reveal.pending { opacity: 0; transform: translateY(16px); }
.reveal.shown { opacity: 1; transform: none; }
#server-status { display: block; position: relative; min-height: 80px; max-width: 100%; overflow: hidden; margin-top: var(--space-3); margin-bottom: var(--space-4); }
#server-status + * { margin-top: var(--space-4); }
#server-status > * { min-width: 0; max-width: 100%; }
@media (max-width: 1399px) {
  .head-in { gap: 18px; padding-inline: 32px; }
  .main-nav a { padding-inline: 9px; gap: 6px; }
}
@media (max-width: 1100px) {
  .head-in { padding-inline: var(--gutter); gap: 16px; }
  .main-nav { display: none; }
  .head-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  html.nav-open .nav-drawer, html.nav-open .nav-veil { display: block; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-three { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  h1 { font-size: clamp(28px,7.2vw,40px); }
  .section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .grid-two, .grid-three { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --head-height: 64px; --title-h2: 30px; }
  .no-break { white-space: normal; }
  .tilt, [data-tilt] { transform: none; }
  .head-in { gap: 8px; }
  .brand { gap: 7px; }
  .brand-en { font-size: 16px; }
  .brand-mark { width: 30px; height: 30px; }
  .head-actions { margin-left: auto; gap: 4px; }
  .lang { padding-inline: 8px; font-size: 12px; }
  .lang > .ico { display: none; }
  .login { padding-inline: 12px; font-size: 14px; }
  .login .ico { display: none; }
  .footer-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
  .panel { padding: var(--space-3); }
  .btn { min-width: 140px; padding-inline: 22px; font-size: 16px; }
}
@media (max-width: 359px) {
  .brand-en { font-size: 14px; }
  .brand-mark { width: 26px; height: 26px; }
  .head-in { gap: 4px; }
  .lang { padding-inline: 5px; }
  .login { padding-inline: 9px; }
}
@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, .reveal.shown { opacity: 1; transform: none; }
}