:root {
  --c-bg:#FFFFFF;
  --c-panel:#F5F5F3;
  --c-panel-2:#ECECE9;
  --c-border:#E2E2DE;
  --c-accent:#8C6A1F;
  --c-accent-dark:#5E4613;
  --c-text:#1A1A19;
  --c-muted:#5F5F5A;
  --c-success:#3E7A55;
  --c-warn:#A35A12;
  --c-error:#B33A2E;
  --c-sage:#C9D3C4;
  --c-ink:#1A1A19;
  --c-ui:#17181A;
  --c-ui-line:#2A2B2E;
  --c-ui-field:#202124;
  --c-ui-seg:#323337;
  --c-ui-dot:#46474C;
  --c-ui-text:#EDEDEA;
  --c-ui-muted:#A2A3A7;
  --c-on-dark:#FFFFFF;
  --c-clear:transparent;
  --c-veil:rgba(23,24,26,.24);
  --shadow-window:0 22px 34px -22px rgba(23,24,26,.62);
  --shadow-fab:0 10px 26px -14px rgba(26,26,25,.34);
  --r-container:32px;
  --r-panel:28px;
  --r-card:20px;
  --r-window:10px;
  --r-field:6px;
  --r-focus:4px;
  --r-segment:7px;
  --r-option:5px;
  --r-pill:999px;
  --r-round:50%;
  --f-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --f-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --shell:1440px;
  --reading:1128px;
  --gutter:48px;
  --weight-normal:400;
  --weight-medium:500;
  --size-body:16px;
  --size-small:14px;
  --size-h1:clamp(34px,2.2vw + 16px,48px);
  --size-h2:clamp(28px,3.5vw,48px);
  --size-h3:24px;
  --duration:.2s;
  --ease:ease;
  --header-height:72px;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-size:var(--size-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-underline-offset:4px }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed }
img,svg,video { max-width:100%; vertical-align:middle }
img { height:auto }
svg { flex-shrink:0 }
figure { margin:0 }
h1,h2,h3,h4,p,dl { margin-top:0 }
h1,h2,h3,h4 { font-family:var(--f-display); font-weight:var(--weight-normal); text-wrap:balance; overflow-wrap:break-word }
h1 { font-size:var(--size-h1); line-height:1.12; letter-spacing:-.02em }
h2 { font-size:var(--size-h2); line-height:1.18; letter-spacing:-.02em }
h3 { font-size:var(--size-h3); line-height:1.35; letter-spacing:-.01em }
p { margin-bottom:1.25em }
strong { font-weight:var(--weight-medium) }
code,kbd,samp,pre { font-family:var(--f-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:24px;
  background:var(--c-ui);
  color:var(--c-ui-text);
  border-radius:var(--r-window);
  line-height:1.7;
  -webkit-overflow-scrolling:touch;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; font-size:13px }
blockquote { margin-inline:0 }
[hidden] { display:none !important }
:focus-visible { outline:2px solid var(--c-accent); outline-offset:3px; border-radius:var(--r-focus) }
::selection { background:var(--c-panel-2); color:var(--c-text) }
.shell,.wrap { width:100%; margin-inline:auto; padding-inline:var(--gutter) }
.shell { max-width:var(--shell) }
.wrap { max-width:var(--reading) }
.section { padding-top:96px; padding-bottom:96px }
.section__intro { max-width:720px; margin-bottom:40px }
.muted { color:var(--c-muted) }
.nowrap { white-space:nowrap }
.accent { color:var(--c-accent) }
.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:var(--gutter); z-index:100;
  padding:10px 18px; transform:translateY(-160%);
  background:var(--c-ui); color:var(--c-on-dark); border-radius:var(--r-pill);
}
.skip-link:focus { transform:none }
.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 > *, .shell > *, .wrap > *, .panel > *, .card > * { min-width:0 }
.panel { padding:48px; border-radius:var(--r-container); background:var(--c-panel); color:var(--c-text) }
.card { padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.card h3 { margin-bottom:14px }
.card p:last-child,.panel p:last-child { margin-bottom:0 }
.btn-solid,.btn-outline {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:10px 26px; font-size:15px; line-height:1.5;
  border:1px solid var(--c-clear); border-radius:var(--r-pill); text-decoration:none;
  transition:background-color var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.btn-solid { background:var(--c-ui); color:var(--c-on-dark) }
.btn-solid:hover,.btn-solid.is-hover { background:var(--c-ui-line); color:var(--c-on-dark) }
.btn-solid:active { background:var(--c-ui-field); color:var(--c-on-dark) }
.btn-outline { background:var(--c-bg); color:var(--c-text); border-color:var(--c-border) }
.btn-outline:hover,.btn-outline.is-hover { background:var(--c-panel); color:var(--c-text); border-color:var(--c-muted) }
.btn-solid:disabled,.btn-outline:disabled {
  background:var(--c-panel-2); color:var(--c-muted); border-color:var(--c-border);
}
.is-focus { outline:2px solid var(--c-accent); outline-offset:3px }
.link-rule {
  font-size:15px; color:var(--c-text); text-decoration:underline;
  text-decoration-color:var(--c-accent); text-decoration-thickness:1px; text-underline-offset:7px;
}
.link-rule:hover { color:var(--c-accent-dark) }
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px }
.prose { min-width:0; max-width:100%; overflow-wrap:break-word }
.prose h2 { margin-top:64px; margin-bottom:24px; scroll-margin-top:24px }
.prose h3 { margin-top:36px; margin-bottom:16px }
.prose p,.prose li { line-height:1.9 }
.prose li + li { margin-top:8px }
.prose a { text-decoration-color:var(--c-accent) }
.prose :not(pre) > code { background:var(--c-panel); color:var(--c-text); padding:2px 5px; border-radius:var(--r-focus) }
.prose img { display:block; margin-block:28px }
.reveal { opacity:1; transform:none }
.reveal.is-pending { opacity:0; transform:translateY(12px) }
.reveal.shown { opacity:1; transform:none; transition:opacity .55s var(--ease),transform .55s var(--ease) }
.decorated,.lede,.geometry-band { overflow-x:clip }

/* Header has its own, wider measure. */
.masthead { position:relative; z-index:50; background:var(--c-bg); color:var(--c-text) }
.masthead__inner {
  width:100%; max-width:min(100%,calc(1344px + var(--gutter) * 2));
  margin-inline:auto; padding-inline:var(--gutter);
  height:var(--header-height); display:flex; align-items:center; gap:32px;
}
.brandmark {
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  text-decoration:none; color:var(--c-text); font-size:16px; letter-spacing:-.01em; line-height:1.5;
}
.brandmark__glyph { width:30px; height:30px; flex-shrink:0 }
.topnav { min-width:0; margin-inline:auto }
.topnav__list {
  display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px;
}
.topnav__link {
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px;
  font-size:14.5px; color:var(--c-muted); white-space:nowrap; text-decoration:none;
  border-radius:var(--r-pill);
  transition:color var(--duration) var(--ease),background-color var(--duration) var(--ease);
}
.topnav__link svg,.drawer__link svg {
  width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.topnav__link:hover { color:var(--c-text); background:var(--c-panel) }
.topnav__link[aria-current="page"] { color:var(--c-text) }
.topnav__link[aria-current="page"] .topnav__text {
  text-decoration:underline; text-decoration-color:var(--c-accent);
  text-decoration-thickness:1px; text-underline-offset:6px;
}
.header-tools { display:flex; gap:8px; align-items:center; flex-shrink:0; margin-left:auto }
.language { position:relative }
.langpick {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px; font:inherit; font-size:14px;
  color:var(--c-text); background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-pill); white-space:nowrap;
}
.langpick__caret { color:var(--c-muted); font-size:11px }
.langpick__short { display:none }
.language__menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:180px;
  margin:0; padding:8px; list-style:none; background:var(--c-bg); color:var(--c-text);
  border:1px solid var(--c-border); border-radius:var(--r-card); z-index:5;
}
.language__menu a {
  display:flex; align-items:center; min-height:44px; padding:10px 14px;
  text-decoration:none; border-radius:var(--r-window);
}
.language__menu a:hover,.language__menu a[aria-current="true"] { background:var(--c-panel); color:var(--c-text) }
.menu-toggle {
  display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  padding:10px; background:var(--c-bg); color:var(--c-text);
  border:1px solid var(--c-border); border-radius:var(--r-pill);
}
.menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5 }
.drawer { display:none }
.nav-veil { position:fixed; inset:72px 0 0; z-index:40; border:0; background:var(--c-veil); color:var(--c-text) }

/* Footer */
.site-footer { margin-top:64px; padding-top:64px; padding-bottom:92px; border-top:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text) }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.3fr .8fr; gap:48px }
.footer-grid > * { min-width:0 }
.footer-brand p { max-width:320px; margin-top:20px; color:var(--c-muted); font-size:14px }
.footer-title { margin-bottom:20px; font-size:15px; font-weight:var(--weight-medium) }
.footer-list { margin:0; padding:0; list-style:none }
.footer-list a { display:inline-block; padding-block:6px; font-size:14px; text-decoration:none; color:var(--c-muted); overflow-wrap:anywhere }
.footer-list a:hover { color:var(--c-accent-dark); text-decoration:underline; text-decoration-color:var(--c-accent) }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--c-border); font-size:13px; color:var(--c-muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
@media (max-width:1199px) {
  .masthead__inner { gap:20px }
  .topnav { display:none }
  .menu-toggle { display:inline-flex }
  .header-tools { margin-left:auto }
  .drawer:not([hidden]) {
    display:block; position:absolute; top:100%; left:0; right:0;
    max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain;
    padding:16px var(--gutter) 28px; background:var(--c-bg); color:var(--c-text);
    border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); z-index:4;
  }
  .drawer ul { list-style:none; padding:0; margin:0 }
  .drawer__link,.drawer__languages a {
    display:flex; align-items:center; gap:12px; width:100%; min-height:48px;
    padding:12px 8px; text-decoration:none; color:var(--c-text);
  }
  .drawer__link[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:6px }
  .drawer__languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--c-border) }
  .drawer__languages a[aria-current="true"] { color:var(--c-accent-dark) }
}
@media (max-width:1023px) {
  :root { --gutter:24px }
  .grid--three { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px }
}
@media (max-width:768px) {
  :root { --size-h1:clamp(24px,4vw,30px); --size-h2:clamp(26px,5vw,34px) }
  .section { padding-top:64px; padding-bottom:64px }
  .panel { padding:32px }
}
@media (max-width:640px) {
  :root { --gutter:20px }
  .grid--two,.grid--three { grid-template-columns:minmax(0,1fr) }
  .panel { padding:24px }
  .card { padding:24px }
  .tilt,[data-tilt] { transform:none !important }
  .brandmark { font-size:14px; gap:8px }
  .brandmark__glyph { width:28px; height:28px }
  .masthead__inner { gap:8px }
  .langpick { padding-inline:12px }
  .langpick__full { display:none }
  .langpick__short { display:inline }
  .footer-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 20px }
  .footer-brand { grid-column:1 / -1 }
  .site-footer { padding-top:48px }
  pre { padding:18px }
}
@media (max-width:359px) {
  :root { --gutter:16px }
  .brandmark { font-size:12px }
  .header-tools { gap:4px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none !important; animation:none !important }
  .reveal.is-pending { opacity:1; transform:none }
}