:root {
  --c-bg:#FCFBF9;
  --c-bg-0:rgba(252,251,249,0);
  --c-panel:#FFFFFF;
  --c-panel-0:rgba(255,255,255,0);
  --c-panel-2:#F3F2EF;
  --c-panel-3:#E9E7E2;
  --c-border:#E7E5E0;
  --c-border-soft:#F0EEEA;
  --c-border-strong:#CFCCC6;
  --c-dot:#D6D3CD;
  --c-accent:#E99A0F;
  --c-accent-from:#F2A516;
  --c-accent-dark:#C9740A;
  --c-accent-tint:#FDF4E4;
  --c-accent-tint-2:#FBE6C2;
  --c-accent-line:#F4DDB3;
  --c-accent-ink:#8A4F07;
  --c-accent-ink-soft:#B07A35;
  --c-accent-halo:rgba(233,154,15,.16);
  --c-text:#1A1916;
  --c-text-2:#3B3935;
  --c-muted:#6B6965;
  --c-faint:#9E9B95;
  --c-ink:#171614;
  --c-on-accent:#FFFFFF;
  --c-on-dark:#FCFBF9;
  --c-success:#2E9E62;
  --c-success-halo:rgba(46,158,98,.18);
  --c-warn:#D98A06;
  --c-error:#D2463A;
  --c-veil:rgba(23,22,20,.24);
  --c-success-ink:#236C45;
  --c-error-ink:#A32D25;

  --grad-accent:linear-gradient(160deg,var(--c-accent-from) 0%,var(--c-accent-dark) 100%);
  --grad-accent-h:linear-gradient(90deg,var(--c-accent-from) 0%,var(--c-accent-dark) 100%);
  --shadow-near:0 24px 48px rgba(64,50,30,.075);
  --shadow-far:0 60px 120px rgba(64,50,30,.10);
  --shadow-edge:0 1px 2px rgba(64,50,30,.06);
  --shadow-chip:0 1px 2px rgba(64,50,30,.05),0 4px 12px rgba(64,50,30,.04);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px rgba(150,86,6,.25),0 10px 24px rgba(201,116,10,.26);
  --shadow-btn-hover:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px rgba(150,86,6,.25),0 14px 30px rgba(201,116,10,.32);
  --shadow-menu:0 2px 6px rgba(64,50,30,.05),0 24px 48px rgba(64,50,30,.10);
  --shadow-fab:0 2px 6px rgba(23,22,20,.18),0 16px 36px rgba(23,22,20,.22);
  --shadow-knob:0 1px 2px rgba(23,22,20,.22);
  --shadow-logo:0 2px 6px rgba(201,116,10,.28);

  --r-window:22px;
  --r-card:20px;
  --r-panel:28px;
  --r-menu-item:14px;
  --r-block:10px;
  --r-sm:8px;
  --r-xs:6px;
  --r-pill:999px;
  --r-circle:50%;
  --f-display:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-body:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:40px;
  --nav-h:72px;
  --peek:30px;
  --page-width:1400px;
  --reading-width:820px;
  --section-space:96px;
  --ease:200ms ease;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:24px }
html,body { margin:0; padding:0 }
html.nav-open { overflow:hidden }
body {
  background:var(--c-bg); color:var(--c-text); font-family:var(--f-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
[hidden] { display:none !important }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
svg { flex-shrink:0 }
button svg,a svg { flex-shrink:0 }
:focus-visible { outline:2px solid var(--c-accent-ink); outline-offset:3px; border-radius:var(--r-sm) }
::selection { background:var(--c-accent-tint-2); color:var(--c-text) }
.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 }
.skip-link { position:fixed; top:8px; left:16px; z-index:100; padding:10px 16px; background:var(--c-ink); color:var(--c-on-dark); border-radius:var(--r-pill); transform:translateY(-160%) }
.skip-link:focus { transform:none }
.wrap { width:100%; max-width:var(--page-width); 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) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section-heading { max-width:760px; margin-bottom:36px }
.grid { display:grid; gap:24px }
.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid > *, .hero-grid > *, .footer-grid > *, .head-inner > *, .config-reader > * { min-width:0 }
.stack > * + * { margin-top:24px }
h1,h2,h3,h4 { font-family:var(--f-display); color:var(--c-text); text-wrap:balance; overflow-wrap:break-word }
h1 { margin:0 0 24px; font-size:clamp(34px,3.1vw,48px); line-height:1.15; font-weight:900; letter-spacing:-.02em }
h2 { margin:0 0 20px; font-size:clamp(26px,2.4vw,36px); line-height:1.25; font-weight:800; letter-spacing:-.02em }
h3 { margin:0 0 14px; font-size:22px; line-height:1.4; font-weight:750; letter-spacing:-.015em }
p { margin:0 0 18px }
.nowrap { white-space:nowrap }
.muted,.meta { color:var(--c-muted) }
.meta { font-size:13px }
.lead { font-size:20px; line-height:1.75; color:var(--c-muted) }
code,kbd,pre { font-family:var(--f-mono) }
code { font-size:.9em; overflow-wrap:anywhere }
pre { max-width:100%; min-width:0; margin:24px 0; padding:24px; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel-2); color:var(--c-text); font-size:13px; line-height:1.85; tab-size:2 }
pre code { font-size:inherit; white-space:pre; overflow-wrap:normal; word-break:normal }
.prose { min-width:0 }
.prose h2 { margin-top:56px }
.prose h3 { margin-top:32px }
.prose p,.prose li { line-height:1.9 }
.prose a:not(.btn) { color:var(--c-accent-ink); text-decoration:underline; text-underline-offset:4px }
.prose li + li { margin-top:8px }
.prose > :first-child { margin-top:0 }
.prose :is(h2,h3,[id]) { scroll-margin-top:28px }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--c-muted) }
.eyebrow i { width:6px; height:6px; border-radius:var(--r-circle); background:var(--grad-accent); flex-shrink:0 }
.btn {
  display:inline-flex; justify-content:center; align-items:center; gap:9px;
  min-height:52px; padding:12px 26px; border:1px solid transparent; border-radius:var(--r-pill);
  font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.5;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.btn svg { width:18px; height:18px }
.btn-primary { background:var(--grad-accent); color:var(--c-ink); box-shadow:var(--shadow-btn) }
.btn-primary:hover,.btn-primary.is-hover { transform:translateY(-1px); box-shadow:var(--shadow-btn-hover) }
.btn-ghost { background:var(--c-panel); color:var(--c-text); border-color:var(--c-border); box-shadow:var(--shadow-chip); padding-inline:24px }
.btn-ghost:hover,.btn-ghost.is-hover { border-color:var(--c-border-strong); transform:translateY(-1px) }
.btn-dark,.btn-nav { background:var(--c-ink); color:var(--c-on-dark); box-shadow:var(--shadow-chip) }
.btn:active { transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--c-panel-2); color:var(--c-muted); border-color:var(--c-border); box-shadow:none; transform:none; pointer-events:none }
.btn-small { min-height:40px; padding:8px 18px; font-size:14px }
.btn-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.text-link { color:var(--c-accent-ink); text-decoration:underline; text-underline-offset:4px }
.panel,.card { padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-edge),var(--shadow-near) }
.panel { border-radius:var(--r-panel) }
.card > :last-child,.panel > :last-child { margin-bottom:0 }
.card-head { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-bottom:20px }
.card-head h3 { margin:0 }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal { transition:opacity 600ms ease,transform 600ms ease }
.reveal.shown { opacity:1; transform:none }

.site-head { position:relative; z-index:30; height:var(--nav-h); background:var(--c-bg); color:var(--c-text) }
.head-inner {
  position:relative; width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2));
  height:100%; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; font-family:var(--f-display); font-size:17px; font-weight:800; letter-spacing:-.015em; color:var(--c-text) }
.brand-mark { width:30px; height:30px; flex-shrink:0; filter:drop-shadow(var(--shadow-logo)) }
.desktop-nav { min-width:0; margin-inline:auto }
.nav-main { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0 }
.nav-link,.nav-more-btn {
  position:relative; display:inline-flex; align-items:center; gap:5px; min-height:38px; padding:8px 16px;
  border:0; background:var(--c-bg-0); color:var(--c-text-2); border-radius:var(--r-pill);
  font-size:15px; font-weight:500; white-space:nowrap; transition:background-color var(--ease);
}
.nav-link:hover,.nav-more-btn:hover { background:var(--c-panel-2); color:var(--c-text) }
.nav-link[aria-current="page"],.nav-more-btn.is-current { color:var(--c-text); font-weight:650 }
.nav-link[aria-current="page"]::after,.nav-more-btn.is-current::after { content:""; position:absolute; left:50%; bottom:3px; width:16px; height:3px; margin-left:-8px; border-radius:var(--r-pill); background:var(--grad-accent-h) }
.nav-more { position:relative }
.nav-more-btn svg { width:12px; height:12px }
.nav-menu,.lang-menu {
  position:absolute; top:calc(100% + 10px); z-index:35; width:272px; margin:0; padding:8px; list-style:none;
  border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-menu);
}
.nav-menu { left:50%; transform:translateX(-50%) }
.nav-menu a,.lang-menu a { display:block; width:100%; min-height:44px; padding:10px 14px; border-radius:var(--r-menu-item) }
.nav-menu a:hover,.lang-menu a:hover,.lang-menu a[aria-current="true"] { background:var(--c-panel-2); color:var(--c-text) }
.nav-menu b { display:block; font-size:14.5px; font-weight:600 }
.nav-menu span { display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:var(--c-muted) }
.head-tools { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.lang-picker { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:var(--r-pill); background:var(--c-bg-0); color:var(--c-muted); font-size:14px; font-weight:500; white-space:nowrap }
.lang:hover { border-color:var(--c-border); color:var(--c-text) }
.lang svg { width:15px; height:15px }
.lang-short { display:none }
.lang-menu { right:0; width:188px }
.btn-nav { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; white-space:nowrap; transition:transform var(--ease) }
.btn-nav svg { width:15px; height:15px }
.btn-nav:hover { transform:translateY(-1px) }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text) }
.menu-toggle svg { width:22px; height:22px }
.mobile-drawer { position:absolute; top:var(--nav-h); left:0; right:0; z-index:34; padding:16px var(--gutter) 28px; max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; background:var(--c-panel); color:var(--c-text); border-bottom:1px solid var(--c-border); box-shadow:var(--shadow-near) }
.mobile-drawer ul { list-style:none; margin:0; padding:0 }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 16px; border-radius:var(--r-sm) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--c-panel-2); color:var(--c-text) }
.drawer-label { margin:20px 16px 6px; color:var(--c-muted); font-size:13px }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:31; width:100%; height:calc(100dvh - var(--nav-h)); padding:0; border:0; border-radius:0; background:var(--c-veil); color:var(--c-text) }
.preview-more { position:relative; list-style:none }
.preview-more > summary { list-style:none; cursor:pointer }
.preview-more > summary::-webkit-details-marker { display:none }
.preview-mobile { display:none }

.site-footer { border-top:1px solid var(--c-border); padding-top:64px; padding-bottom:100px; background:var(--c-panel-2); color:var(--c-text) }
.footer-grid { display:grid; grid-template-columns:1.35fr .8fr 1.4fr .7fr; gap:48px }
.footer-brand p { max-width:27em; margin-top:20px; color:var(--c-muted); font-size:14px; line-height:1.85 }
.footer-title { margin:0 0 16px; font-size:14px; font-weight:700 }
.footer-links { list-style:none; padding:0; margin:0 }
.footer-links a { display:block; width:100%; padding-top:5px; padding-bottom:5px; color:var(--c-muted); font-size:14px; overflow-wrap:break-word }
.footer-links a:hover { color:var(--c-text); text-decoration:underline; text-underline-offset:4px }
.footer-bottom { margin-top:40px; padding-top:24px; border-top:1px solid var(--c-border); font-size:13px; color:var(--c-muted) }
.dark-band { padding-top:96px; padding-bottom:96px; background:var(--c-ink); color:var(--c-on-dark) }
.dark-band h2,.dark-band h3,.dark-band p { color:var(--c-on-dark) }
.dark-band h2 { max-width:920px; font-size:clamp(28px,3.4vw,46px); line-height:1.4 }
.dark-band p { max-width:760px; line-height:1.9 }
@media (max-width:1200px) {
  .head-inner { gap:16px }
  .nav-link,.nav-more-btn { padding-inline:11px }
  .head-tools { gap:4px }
  .footer-grid { gap:28px }
}
@media (max-width:1100px) {
  .desktop-nav,.head-tools > .btn-nav { display:none }
  .head-tools { margin-left:auto }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center }
  .preview-mobile { display:block }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  h1 { font-size:clamp(24px,4.5vw,30px) }
  .grid-three { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px) {
  :root { --gutter:20px; --section-space:64px }
  .wrap,.reading-wrap,.head-inner { padding-inline:var(--gutter) }
  .head-inner { gap:8px }
  .brand { font-size:15px; gap:8px }
  .brand-mark { width:28px; height:28px }
  .head-tools { margin-left:auto; gap:4px }
  .lang { padding-inline:10px; min-height:44px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .grid-two,.grid-three,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .panel,.card { padding:24px }
  pre { padding:18px; font-size:12px }
  .btn { min-height:48px; padding:11px 22px; font-size:15px }
  .lead { font-size:18px }
  .tilt,[data-tilt] { transform:none !important }
  .footer-grid { gap:32px }
}
@media (max-width:360px) {
  :root { --gutter:16px }
  .brand { font-size:14px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important; transition:none !important }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}