:root {
  --bg:#F7F8F5;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#ECEDE8;
  --border:#DEDFD8;
  --border-strong:#BEBFB7;
  --accent:#7A2418;
  --accent-dark:#561810;
  --text:#161615;
  --text-hover:#2E2E2C;
  --text-muted:#5E605A;
  --success:#3F7A4A;
  --warn:#A8761C;
  --error:#B3261E;
  --mist:#9AAFC9;
  --mist-mid:#8398B5;
  --mist-deep:#35465B;
  --mist-ink:#2C3A4C;
  --mist-row:#435770;
  --mist-line:#4B5D74;
  --mist-soft:#A9B8CB;
  --mist-paper:#E8EDF3;
  --olive:#A8A47A;
  --olive-mid:#939061;
  --olive-deep:#4A4730;
  --olive-ink:#3D3A26;
  --olive-dim:#8D8964;
  --olive-soft:#CBC7A3;
  --cream:#F4EFDA;
  --wine:#7A2418;
  --wine-mid:#933B2C;
  --paper:#F7F2E7;
  --clear:transparent;
  --r-plate:28px;
  --r-card:20px;
  --r-panel:16px;
  --r-stack:14px;
  --r-phone:30px;
  --r-small:8px;
  --r-tiny:6px;
  --r-pill:999px;
  --r-circle:50%;
  --font-display:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-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-display:800;
  --size-body:16px;
  --size-small:14px;
  --size-caption:12px;
  --size-h1:clamp(34px,2.2vw + 16px,48px);
  --size-h2:clamp(26px,3vw,38px);
  --size-h3:22px;
  --leading-body:1.7;
  --gutter:24px;
  --reading-width:1120px;
  --header-width:1280px;
  --section-space:112px;
  --header-height:72px;
  --motion-reveal:460ms;
  --layer-veil:30;
  --layer-header:40;
  --layer-fab:20;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:32px}
html,body {margin:0;padding:0}
html.nav-open {overflow:hidden}
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:var(--weight-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a {color:inherit;text-decoration:none}
a,button,summary {-webkit-tap-highlight-color:var(--clear)}
button,input,select,textarea {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed}
button {color:var(--text)}
img,svg,video {max-width:100%}
img {height:auto}
svg {flex-shrink:0}
button svg,a svg {flex-shrink:0}
button {border:0}
[hidden] {display:none!important}
:focus-visible {outline:2px solid var(--text);outline-offset:4px}
a:focus-visible,button:focus-visible {border-radius:var(--r-small)}
::selection {background:var(--mist);color:var(--text)}
h1,h2,h3,h4 {
  font-family:var(--font-display);
  color:var(--text);
  font-weight:var(--weight-display);
  text-wrap:balance;
  overflow-wrap:break-word;
}
h1 {font-size:var(--size-h1);line-height:1.15;letter-spacing:-0.02em}
h2 {font-size:var(--size-h2);line-height:1.25;letter-spacing:-0.02em}
h3 {font-size:var(--size-h3);line-height:1.4;letter-spacing:-0.01em}
p {margin:0 0 1.25em}
strong {font-weight:var(--weight-semibold)}
code,kbd,pre {font-family:var(--font-mono)}
code {overflow-wrap:anywhere}
pre {
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  padding:24px;
  border-radius:var(--r-panel);
  background:var(--olive-deep);
  color:var(--cream);
  font-size:var(--size-small);
  line-height:1.7;
}
pre code {overflow-wrap:normal;white-space:pre;word-break:normal}
kbd {padding:2px 6px;border:1px solid var(--border-strong);border-radius:var(--r-tiny)}
hr {border:0;border-top:1px solid var(--border);margin:40px 0}
.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:0 auto 48px;text-align:center}
.section-heading p {color:var(--text-muted)}
.section-heading h2 {margin:0 0 20px}
.grid {display:grid;gap:24px}
.grid-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid > *, .split > *, .footer-grid > *, .topbar > * {min-width:0}
.flow > * + * {margin-top:24px}
.flow > :first-child {margin-top:0}
.flow > :last-child {margin-bottom:0}
.muted {color:var(--text-muted)}
.mono {font-family:var(--font-mono)}
.keep {white-space:nowrap}
.text-link {text-decoration:underline;text-underline-offset:4px}
.text-link:hover {color:var(--accent)}
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link {
  position:fixed;top:12px;left:var(--gutter);z-index:calc(var(--layer-header) + 2);
  padding:10px 18px;background:var(--text);color:var(--bg-panel);
  border-radius:var(--r-pill);transform:translateY(-160%);
}
.skip-link:focus {transform:none}
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:10px 26px;
  border:1.5px solid var(--clear);
  border-radius:var(--r-pill);
  font-size:15px;font-weight:var(--weight-semibold);
  letter-spacing:0.005em;line-height:1.5;
  text-align:center;max-width:100%;
  background:var(--clear);color:var(--text);
}
.btn svg {width:15px;height:15px}
.btn-solid {background:var(--text);color:var(--bg)}
.btn-solid:hover,.btn-solid.is-hover {background:var(--text-hover);color:var(--bg)}
.btn-solid:active,.btn-solid.is-active {background:var(--accent-dark);color:var(--bg-panel)}
.btn-line {border-color:var(--border-strong);padding-inline:24px}
.btn-line:hover,.btn-line.is-hover {border-color:var(--text)}
.btn-line:active,.btn-line.is-active {background:var(--bg-panel-2);color:var(--text)}
.btn:disabled,.btn[aria-disabled="true"] {
  background:var(--bg-panel-2);color:var(--text-muted);border-color:var(--border);
}
.btn.is-focus {outline:2px solid var(--text);outline-offset:4px}
.cta-row {display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.panel,.surface-card {
  background:var(--bg-panel);color:var(--text);
  border-radius:var(--r-card);padding:32px;min-width:0;
}
.panel {border-radius:var(--r-plate)}
.case-band {
  margin-inline:var(--gutter);
  padding:64px;
  border-radius:var(--r-plate);
  background:var(--bg-panel-2);color:var(--text);
}
.prose {max-width:780px;min-width:0}
.prose h2 {margin-top:64px;margin-bottom:24px}
.prose h3 {margin-top:36px;margin-bottom:16px}
.prose a {text-decoration:underline;text-underline-offset:4px}
.prose p,.prose li {overflow-wrap:break-word}
.prose li + li {margin-top:10px}
.prose > :first-child {margin-top:0}
.prose img {display:block}
.reveal {opacity:1}
.reveal.is-observed {opacity:0;transform:translateY(16px);transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease}
.reveal.shown {opacity:1;transform:none}
#site-header {position:relative;z-index:var(--layer-header)}
.topbar {
  height:var(--header-height);padding-inline:var(--gutter);
  width:100%;max-width:min(100%,calc(var(--header-width) + var(--gutter) * 2));
  margin-inline:auto;display:flex;align-items:center;gap:24px;
}
.brand {display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark {width:30px;height:30px;display:block;flex-shrink:0}
.brand-name {
  font-family:var(--font-display);font-size:17px;font-weight:var(--weight-display);
  letter-spacing:-0.02em;line-height:1.3;
}
.desktop-nav {min-width:0;margin-inline:auto}
.nav-links {display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:30px}
.nav-links a {font-size:15px;font-weight:var(--weight-medium);color:var(--text-muted);white-space:nowrap}
.nav-links a:hover {color:var(--text)}
.nav-links a[aria-current="page"] {color:var(--text);font-weight:var(--weight-bold)}
.header-tools {display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.language-picker {position:relative}
.lang {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:6px 14px;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--clear);color:var(--text);
  font-size:14px;font-weight:var(--weight-medium);white-space:nowrap;
}
.lang:hover {background:var(--bg-panel);color:var(--text)}
.lang svg {width:10px;height:10px}
.lang-short {display:none}
.language-list {
  position:absolute;right:0;top:calc(100% + 10px);width:180px;
  list-style:none;margin:0;padding:8px;
  border:1px solid var(--border);border-radius:var(--r-panel);
  background:var(--bg-panel);color:var(--text);
}
.language-list a {display:block;min-height:44px;padding:10px 12px;border-radius:var(--r-small)}
.language-list a:hover,.language-list a[aria-current="true"] {background:var(--bg-panel-2);color:var(--text)}
.menu-toggle {
  display:none;min-width:44px;min-height:44px;padding:10px;
  background:var(--clear);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.menu-toggle svg {width:22px;height:22px;display:block}
.mobile-drawer {display:none}
.nav-veil {
  position:fixed;inset:var(--header-height) 0 0;z-index:var(--layer-veil);
  background:var(--bg-panel-2);color:var(--text);opacity:0.8;
}
.site-footer {margin-top:80px;padding-top:64px;padding-bottom:32px;border-top:1px solid var(--border)}
.footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr 0.8fr;gap:40px}
.footer-brand p {color:var(--text-muted);margin-top:20px;max-width:310px;font-size:14px}
.footer-heading {font-size:14px;margin:0 0 18px;font-weight:var(--weight-bold)}
.footer-links {list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-links a {display:inline-block;padding-block:4px;font-size:14px;color:var(--text-muted)}
.footer-links a:hover {color:var(--text);text-decoration:underline;text-underline-offset:4px}
.footer-bottom {
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  color:var(--text-muted);font-size:12px;
}
.footer-legal {display:flex;flex-wrap:wrap;gap:20px}
.footer-bottom p {margin:0}
.hero {position:relative;padding-top:44px;overflow-x:clip}
.hero-copy {display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:24px}
.kicker {
  display:inline-flex;align-items:center;gap:10px;min-height:30px;
  padding:4px 14px 4px 10px;margin:13px 0;
  border-radius:var(--r-pill);background:var(--bg-panel-2);color:var(--text-muted);
  font-size:13px;font-weight:var(--weight-medium);letter-spacing:0.01em;
}
.kicker-dots {display:inline-flex;flex-shrink:0}
.kicker-dots i {display:block;width:9px;height:9px;border:1.5px solid var(--bg-panel-2);border-radius:var(--r-circle);flex-shrink:0}
.kicker-dots i + i {margin-left:-3px}
.kicker-dots i:nth-child(1) {background:var(--mist)}
.kicker-dots i:nth-child(2) {background:var(--olive)}
.kicker-dots i:nth-child(3) {background:var(--wine)}
.hero-title {
  margin:22px 0 0;font-size:clamp(28px,2.2vw + 16px,48px);
  font-weight:var(--weight-display);line-height:1.04;letter-spacing:-0.035em;
}
.hero-title > span {display:block}
.hero-lede {margin:20px 0 0;max-width:640px;font-size:16.5px;line-height:1.65;color:var(--text-muted)}
.hero-lede strong {color:var(--text)}
.os-row {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:18px 0 0;padding:0}
.os-row a {
  display:inline-flex;align-items:center;gap:8px;min-height:34px;
  padding:6px 15px 6px 12px;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--bg-panel);color:var(--text);font-size:13.5px;font-weight:var(--weight-medium);
}
.os-row a:hover {border-color:var(--border-strong)}
.os-row svg {width:15px;height:15px}
.statusline {
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 30px;
  margin:64px auto 0;padding:0 24px 80px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.04em;color:var(--text-muted);
}
.statusline span {display:inline-flex;align-items:center;gap:9px}
.statusline i {width:6px;height:6px;border-radius:var(--r-circle);display:block;flex-shrink:0}
.statusline span:nth-child(1) i {background:var(--mist)}
.statusline span:nth-child(2) i {background:var(--olive)}
.statusline span:nth-child(3) i {background:var(--wine)}
.statusline em {font-style:normal;color:var(--text)}
@media (max-width:1100px) {
  .desktop-nav {display:none}
  .header-tools {margin-left:auto}
  .menu-toggle {display:inline-flex;align-items:center;justify-content:center}
  .mobile-drawer:not([hidden]) {
    display:block;position:absolute;inset:var(--header-height) 0 auto;
    background:var(--bg-panel);color:var(--text);
    max-height:calc(100dvh - var(--header-height));overflow-y:auto;
    overscroll-behavior:contain;padding:16px var(--gutter) 24px;border-bottom:1px solid var(--border);
  }
  .mobile-drawer ul {display:block;list-style:none;padding:0;margin:0}
  .mobile-drawer a {display:flex;align-items:center;min-height:48px;width:100%;padding:12px 16px;border-radius:var(--r-small)}
  .mobile-drawer a:hover,.mobile-drawer a[aria-current] {background:var(--bg-panel-2);color:var(--text);font-weight:var(--weight-bold)}
  .drawer-languages {border-top:1px solid var(--border);margin-top:16px!important;padding-top:16px!important}
  .preview-header .desktop-nav {display:block;margin:0;width:100%;overflow-x:auto}
  .preview-header .topbar {height:auto;min-height:var(--header-height);flex-wrap:wrap;padding-block:16px}
  .preview-header .desktop-nav {order:3}
  .preview-header .nav-links a {display:block;padding-block:10px}
}
@media (max-width:960px) {
  .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-band {padding:40px}
  .grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px) {
  :root {--section-space:72px;--size-h1:30px}
  .hero {padding-top:32px}
  .hero-title {font-size:clamp(24px,4vw,30px);line-height:1.15;letter-spacing:-0.02em}
  .hero-lede {font-size:15px}
}
@media (max-width:640px) {
  :root {--gutter:20px}
  .wrap {padding-inline:var(--gutter)}
  .grid-2,.grid-3 {grid-template-columns:minmax(0,1fr)}
  .case-band {padding:28px 20px}
  .panel,.surface-card {padding:24px}
  .brand-name {font-size:14px}
  .brand {gap:8px}
  .topbar {gap:10px}
  .header-tools {gap:6px;margin-left:auto}
  .lang {padding-inline:11px}
  .lang-full {display:none}
  .lang-short {display:inline}
  .footer-grid {gap:32px 24px}
  .footer-brand {grid-column:1 / -1}
  .tilt,[data-tilt] {transform:none!important}
  .hero-title > span {text-wrap:balance}
  .statusline {font-size:11px;padding-bottom:40px}
  .cta-row {gap:10px}
  .btn {padding-inline:22px}
  pre {padding:18px}
}
@media (max-width:360px) {
  :root {--gutter:16px}
  .brand-name {font-size:12px}
  .brand-mark {width:26px;height:26px}
  .hero-copy {padding-inline:16px}
  .os-row {gap:8px}
  .os-row a {padding-inline:12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .reveal.is-observed {opacity:1;transform:none;transition:none}
}