:root {
  --bg: #ffffff;
  --bg-panel: #f5f4f1;
  --bg-panel-2: #eceae6;
  --bg-lane: #faf9f7;
  --border: #e8e5e0;
  --border-soft: #f0eeea;
  --border-strong: #d3cdc5;
  --accent: #f2753a;
  --accent-dark: #d4552a;
  --accent-ink: #a73d1a;
  --text: #1f1d1b;
  --text-muted: #6b6660;
  --text-faint: #a8a199;
  --on-accent: #ffffff;
  --success: #34b26a;
  --warn: #d98a1c;
  --error: #e5484d;
  --direct-bg: #e8efe9;
  --direct-ink: #3f7357;
  --reject-bg: #fbe9e8;
  --reject-ink: #a93231;
  --glow-1: #ffd9c2;
  --glow-2: #fff1e8;
  --glow-0: rgba(255, 241, 232, 0);
  --accent-a06: rgba(242, 117, 58, 0.06);
  --accent-a10: rgba(242, 117, 58, 0.10);
  --accent-a16: rgba(242, 117, 58, 0.16);
  --accent-a24: rgba(242, 117, 58, 0.24);
  --accent-a35: rgba(242, 117, 58, 0.35);
  --accent-a50: rgba(242, 117, 58, 0.50);
  --success-a18: rgba(52, 178, 106, 0.18);
  --white-a60: rgba(255, 255, 255, 0.60);
  --white-a80: rgba(255, 255, 255, 0.80);
  --white-a85: rgba(255, 255, 255, 0.85);
  --white-a30: rgba(255, 255, 255, 0.30);
  --veil: rgba(31, 29, 27, 0.28);
  --clear: transparent;
  --grad-accent: linear-gradient(90deg, var(--accent), var(--accent-dark));
  --grad-accent-btn: linear-gradient(100deg, var(--accent), var(--accent-dark));
  --shadow-soft: 0 1px 2px rgba(31, 29, 27, 0.04), 0 4px 12px rgba(120, 72, 40, 0.05);
  --shadow-card: 0 1px 2px rgba(31, 29, 27, 0.04), 0 12px 32px rgba(140, 84, 46, 0.08);
  --shadow-mini: 0 1px 1px rgba(31, 29, 27, 0.04), 0 6px 14px -8px rgba(140, 84, 46, 0.22);
  --shadow-board: 0 1px 2px rgba(31, 29, 27, 0.05), 0 12px 32px rgba(140, 84, 46, 0.08), 0 44px 90px -30px rgba(212, 85, 42, 0.22);
  --shadow-shell: 0 30px 80px -34px rgba(212, 85, 42, 0.30);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 4px rgba(212, 85, 42, 0.18), 0 12px 26px -10px rgba(212, 85, 42, 0.55);
  --r-pill: 999px;
  --r-card: 20px;
  --r-section: 36px;
  --r-shell: 28px;
  --r-lane: 14px;
  --r-mini: 10px;
  --r-tag: 12px;
  --r-logo: 8px;
  --r-tick: 6px;
  --r-line: 3px;
  --r-circle: 50%;
  --font-display: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-body: 16px;
  --fs-h1: clamp(34px, 3.1vw, 44px);
  --fs-h2: clamp(24px, 2.4vw, 34px);
  --fs-h3: 21px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-title: -0.02em;
  --tracking-brand: -0.01em;
  --tracking-button: -0.005em;
  --gutter: 48px;
  --wrap-max: 1440px;
  --reading-max: 800px;
  --header-content: 1280px;
  --header-height: 76px;
  --section-space: 88px;
  --sweep-dur: 8s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --motion-fast: 200ms;
  --motion-reveal: 650ms;
  --focus-width: 2px;
  --stroke: 1px;
  --layer-header: 40;
  --layer-veil: 30;
  --layer-fab: 20;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html.nav-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: var(--accent-a16); }
img { max-width: 100%; }
svg { display: block; flex-shrink: 0; }
button svg, a svg { flex-shrink: 0; }
ul, ol { padding-inline-start: 1.4em; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin-block: 0 1.2em; }
code, pre, kbd { font-family: var(--font-mono); }
code { overflow-wrap: anywhere; font-size: .88em; }
pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 20px;
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-mini);
  background: var(--bg-lane);
  color: var(--text);
  line-height: 1.8;
  -webkit-overflow-scrolling: touch;
}
pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }
:focus-visible { outline: var(--focus-width) solid var(--accent-ink); outline-offset: 4px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 96px; }
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.reading { max-width: calc(var(--reading-max) + var(--gutter) * 2); }
.grid { display: grid; gap: 24px; }
.grid > *, .hero__grid > *, .footer-grid > *, .tabs-layout > *, .comparison > * { min-width: 0; }
.grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.section-panel {
  margin-inline: 24px;
  border-radius: var(--r-section);
  background: var(--bg-panel);
  color: var(--text);
  overflow-x: clip;
}
.section-heading { margin-block: 14px 32px; }
.section-intro { max-width: 46em; color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.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;
  left: 16px;
  top: 8px;
  z-index: 100;
  transform: translateY(-150%);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
}
.skip-link:focus { transform: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 24px;
  border: var(--stroke) solid var(--clear);
  border-radius: var(--r-pill);
  font-size: 15.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-button);
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  padding-inline: 22px 26px;
  background: var(--grad-accent-btn);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
}
.btn--ghost {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
.btn--text { background: var(--clear); color: var(--accent-ink); }
.btn:hover, .btn.is-hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn:active, .btn.is-active { transform: translateY(1px); box-shadow: var(--shadow-soft); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--bg-panel-2); color: var(--text-muted); box-shadow: none; transform: none; }
.btn.is-focus { outline: var(--focus-width) solid var(--accent-ink); outline-offset: 4px; }
.cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.card, .panel {
  min-width: 0;
  padding: 28px;
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
.card h3, .panel h3 { margin-top: 0; }
.card > :last-child, .panel > :last-child { margin-bottom: 0; }
.prose { min-width: 0; overflow-wrap: break-word; }
.prose h2 { margin-top: 2.4em; margin-bottom: .8em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .7em; }
.prose p, .prose li { line-height: 1.85; }
.prose a:not(.btn):not(.app-store-button) { color: var(--accent-ink); }
.prose li + li { margin-top: .5em; }
.prose :not(pre) > code { background: var(--bg-panel); color: var(--text); border-radius: var(--r-line); padding: .1em .3em; }

/* The header owns its wide container; it does not borrow the reading width. */
#site-header, .site-head { position: relative; z-index: var(--layer-header); }
.nav {
  width: 100%;
  max-width: min(100%, calc(var(--header-content) + var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 16.5px;
  letter-spacing: var(--tracking-brand);
  text-decoration: none;
  white-space: nowrap;
}
.brand__mark {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-logo);
}
.brand__mark--placeholder {
  background: linear-gradient(150deg, var(--bg), var(--bg-panel));
  color: var(--text);
  border: var(--stroke) solid var(--border);
  box-shadow: var(--shadow-soft);
}
.desktop-nav { margin-left: auto; min-width: 0; }
.menu, .menu ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.menu li { min-width: 0; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14.5px;
  white-space: nowrap;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.menu a:hover { color: var(--text); background: var(--white-a80); }
.menu a[aria-current="page"] { background: var(--bg-panel); color: var(--text); font-weight: var(--weight-semibold); }
.nav-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.language { position: relative; }
.lang, .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white-a80);
  color: var(--text);
  font-size: 13.5px;
  white-space: nowrap;
}
.lang svg { width: 16px; height: 16px; color: var(--text-muted); }
.lang__short { display: none; }
.lang__caret { color: var(--text-muted); font-size: 11px; }
.language-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-card);
  z-index: 2;
}
.language-list a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: var(--r-mini); text-decoration: none; }
.language-list a:hover, .language-list a[aria-current] { background: var(--bg-panel); color: var(--text); }
.menu-toggle { display: none; min-width: 44px; min-height: 44px; padding: 10px; }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 16px var(--gutter) 24px;
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--text);
  border-bottom: var(--stroke) solid var(--border);
  box-shadow: var(--shadow-card);
}
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav a { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-mini); text-decoration: none; }
.mobile-nav a:hover, .mobile-nav a[aria-current] { background: var(--bg-panel); color: var(--text); }
.mobile-nav__languages { margin-top: 16px; padding-top: 16px; border-top: var(--stroke) solid var(--border); }
.nav-veil { position: fixed; inset: var(--header-height) 0 0; border: 0; padding: 0; background: var(--veil); color: var(--text); z-index: var(--layer-veil); cursor: default; }
.preview-mobile { display: none; }

/* White canvas, two restrained warm light fields. */
.top { position: relative; isolation: isolate; overflow-x: clip; }
.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1320px;
  height: 1120px;
  right: -300px;
  top: -440px;
  background: radial-gradient(closest-side, var(--glow-1) 0%, var(--glow-2) 54%, var(--glow-0) 100%);
  pointer-events: none;
}
.top::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 820px;
  height: 640px;
  left: 44%;
  top: 340px;
  background: radial-gradient(closest-side, var(--glow-2), var(--glow-0));
  pointer-events: none;
}
.hero { padding-top: 28px; padding-bottom: 60px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 40px; align-items: center; }
.h1 { margin: 22px 0 0; font-size: var(--fs-h1); line-height: 1.16; }
.h1 > span { display: block; }
.h1__grad {
  background: var(--grad-accent);
  color: var(--accent-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--clear);
  padding-bottom: 2px;
}
.lede { margin: 22px 0 0; max-width: 31em; font-size: 15.5px; line-height: 1.78; color: var(--text-muted); }
.lede strong { color: var(--text); font-weight: var(--weight-semibold); }
.next { padding-top: 30px; padding-bottom: 96px; }
.next__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.next h2 { margin: 14px 0 0; font-size: 28px; }
.next__link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14.5px; text-decoration: none; padding-bottom: 4px; }
.next__link:hover { color: var(--text); }

.site-footer { padding-top: 64px; padding-bottom: 28px; border-top: var(--stroke) solid var(--border); background: var(--bg); color: var(--text); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; }
.footer-brand p { margin-top: 18px; max-width: 26em; color: var(--text-muted); font-size: 14px; }
.footer-title { margin: 0 0 16px; font-size: 15px; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-block; padding-block: 5px; font-size: 14px; color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent-ink); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: var(--stroke) solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 12.5px; color: var(--text-muted); }
.footer-bottom p { margin: 0; }
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal:not(.shown) { opacity: 0; transform: translateY(16px); }
.reveal-ready .reveal { transition: opacity var(--motion-reveal) var(--ease), transform var(--motion-reveal) var(--ease); }
.reveal.shown { opacity: 1; transform: none; }

@media (max-width: 1380px) {
  .menu a { padding-inline: 10px; font-size: 14px; }
  .nav { gap: 18px; }
}
@media (max-width: 1279px) {
  .desktop-nav { display: none; }
  .nav-tools { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .preview-mobile { display: block; margin-left: auto; }
  .preview-mobile summary { list-style: none; }
  .preview-mobile summary::-webkit-details-marker { display: none; }
  .preview-mobile .menu-toggle { display: inline-flex; }
  .preview-mobile + .nav-tools { margin-left: 0; }
}
@media (min-width: 1280px) {
  .mobile-nav, .nav-veil { display: none; }
}
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .device { max-width: 860px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --gutter: 24px; --section-space: 64px; --fs-h1: 30px; }
  .grid--three { grid-template-columns: minmax(0, 1fr); }
  .h1 { font-size: var(--fs-h1); }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --fs-h1: 27px; }
  .wrap, .nav { padding-inline: var(--gutter); }
  .brand { flex: 1 1 auto; min-width: 0; font-size: 15px; gap: 8px; white-space: normal; line-height: 1.3; }
  .brand > span { min-width: 0; overflow-wrap: anywhere; }
  .brand__mark { width: 30px; height: 30px; }
  .nav { gap: 8px; }
  .nav-tools { gap: 6px; margin-left: auto; }
  .lang { min-height: 44px; padding-inline: 10px; }
  .lang__full { display: none; }
  .lang__short { display: inline; }
  .lang > svg { display: none; }
  .hero { padding-top: 20px; padding-bottom: 44px; }
  .hero__grid { gap: 32px; }
  .lede { font-size: 15px; }
  .btn { min-height: 48px; font-size: 15px; padding-inline: 20px; }
  .grid--two { grid-template-columns: minmax(0, 1fr); }
  .section-panel { margin-inline: 16px; }
  .section-panel .wrap { padding-inline: 20px; }
  .card, .panel { padding: 22px; }
  .next__row { flex-direction: column; align-items: flex-start; }
  .next h2 { font-size: 22px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-bottom { flex-direction: column; }
  .tilt, [data-tilt] { transform: none !important; }
}
@media (max-width: 370px) {
  .nav .brand { font-size: 12.5px; max-width: 180px; }
  .nav .brand__mark { width: 26px; height: 26px; }
  .nav-tools { gap: 4px; }
  .lang { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-ready .reveal:not(.shown) { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}
@media print {
  .nav-tools, .mobile-nav, .nav-veil, .dl-fab { display: none !important; }
  .reveal-ready .reveal:not(.shown) { opacity: 1; transform: none; }
  .top::before, .top::after { display: none; }
}