body.doc-page {
  color-scheme: light;
  --bg: #f7f2ea;
  --bg-strong: #f3e1d2;
  --card: rgba(255, 255, 255, 0.84);
  --card-strong: rgba(255, 255, 255, 0.94);
  --bg-soft: rgba(255, 255, 255, 0.78);
  --text: #231a16;
  --muted: rgba(35, 26, 22, 0.7);
  --line: rgba(54, 38, 31, 0.12);
  --brand: #4f8cff;
  --brand-2: #74b3ff;
  --brand-soft: rgba(79, 140, 255, 0.14);
  --accent: #4f8cff;
  --accent-2: #74b3ff;
  --warning: rgba(239, 159, 95, 0.14);
  --warning-text: #8a4d1f;
  --shadow: 0 24px 70px rgba(69, 45, 31, 0.12);
  --font: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.7;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 196, 156, 0.55), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(127, 182, 255, 0.28), transparent 24%),
    radial-gradient(circle at 55% 88%, rgba(74, 195, 177, 0.16), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, #f5e4d7 54%, #f1d0bf 100%);
}

body.doc-page::before {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(35, 26, 22, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 26, 22, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 92%);
}

body.doc-page,
body.doc-page * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.doc-page .topbar,
body.doc-page .hero,
body.doc-page .section,
body.doc-page .callout,
body.doc-page .controls,
body.doc-page .hero-main,
body.doc-page .hero-side,
body.doc-page .card,
body.doc-page .simple-card {
  border-color: var(--line);
  background: rgba(255, 252, 247, 0.88);
  box-shadow: var(--shadow);
}

body.doc-page .topbar,
body.doc-page .hero,
body.doc-page .section,
body.doc-page .callout,
body.doc-page .controls,
body.doc-page .hero-main,
body.doc-page .hero-side,
body.doc-page .card,
body.doc-page .simple-card,
body.doc-page .lang-switch {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.doc-page .brand-mark,
body.doc-page .logo,
body.doc-page .theme-toggle {
  border: 1px solid rgba(54, 38, 31, 0.1);
  background: linear-gradient(145deg, rgba(79, 140, 255, 0.14), rgba(239, 159, 95, 0.14));
  box-shadow: 0 10px 24px rgba(69, 45, 31, 0.1);
  color: var(--text);
}

body.doc-page .eyebrow,
body.doc-page .pill,
body.doc-page .lang-switch,
body.doc-page .lang-toggle,
body.doc-page .chip,
body.doc-page .hero-meta span,
body.doc-page .label {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(54, 38, 31, 0.1);
  color: rgba(35, 26, 22, 0.82);
}

body.doc-page .eyebrow,
body.doc-page .section h2,
body.doc-page .section h3,
body.doc-page .hero-main h2,
body.doc-page .hero-side h3,
body.doc-page .title h1,
body.doc-page h1,
body.doc-page h2,
body.doc-page h3,
body.doc-page h4,
body.doc-page .brand-text strong,
body.doc-page .brand-copy strong,
body.doc-page .metric strong,
body.doc-page .step h4,
body.doc-page .panel-title,
body.doc-page .card-item h3,
body.doc-page .timeline-step strong,
body.doc-page .doc-head h1 {
  color: var(--text);
}

body.doc-page p,
body.doc-page li,
body.doc-page .hero p,
body.doc-page .section p,
body.doc-page .lead,
body.doc-page .subtitle,
body.doc-page .hero-main p,
body.doc-page .hero-side p,
body.doc-page .card-item p,
body.doc-page .metric span,
body.doc-page .step p,
body.doc-page .contact span,
body.doc-page .doc-body p {
  color: var(--muted);
}

body.doc-page .eyebrow,
body.doc-page .section h2,
body.doc-page .section h3 {
  letter-spacing: 0.08em;
}

body.doc-page .eyebrow,
body.doc-page .pill {
  color: #a86f39;
}

body.doc-page a,
body.doc-page .contact a,
body.doc-page .card-link {
  color: #2f68d7;
}

body.doc-page .button-primary,
body.doc-page .nav-cta,
body.doc-page .tab-btn.active,
body.doc-page .lang-switch button.active,
body.doc-page .lang-toggle button.active,
body.doc-page .theme-toggle:hover,
body.doc-page .theme-toggle:focus-visible {
  background: linear-gradient(135deg, #4f8cff, #74b3ff);
  color: #fff;
  box-shadow: 0 14px 34px rgba(79, 140, 255, 0.18);
}

body.doc-page .button-secondary,
body.doc-page .tab-btn,
body.doc-page .card-link,
body.doc-page .nav-cta,
body.doc-page .lang-switch button,
body.doc-page .lang-toggle button {
  border-color: rgba(54, 38, 31, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #332722;
}

body.doc-page .tab-btn.active,
body.doc-page .lang-switch button.active,
body.doc-page .lang-toggle button.active {
  border-color: transparent;
}

body.doc-page .hero-panel,
body.doc-page .hero-main {
  overflow: hidden;
}

body.doc-page .hero-panel::before,
body.doc-page .hero-main::after {
  opacity: 0.9;
}

body.doc-page .hero-panel::before {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 204, 153, 0.42), transparent 20%),
    radial-gradient(circle at 70% 15%, rgba(127, 182, 255, 0.18), transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(74, 195, 177, 0.12), transparent 24%);
}

body.doc-page .hero-main::after {
  background: radial-gradient(circle, rgba(255, 196, 156, 0.2) 0%, transparent 68%);
}

body.doc-page .stat,
body.doc-page .feature-chip,
body.doc-page .card-item,
body.doc-page .metric,
body.doc-page .note,
body.doc-page .warning {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(54, 38, 31, 0.08);
}

body.doc-page .section,
body.doc-page .card,
body.doc-page .simple-card,
body.doc-page .hero,
body.doc-page .hero-panel,
body.doc-page .hero-main,
body.doc-page .hero-side,
body.doc-page .callout,
body.doc-page .controls {
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 249, 242, 0.9)),
    rgba(255, 255, 255, 0.86);
}

body.doc-page .section {
  padding: 22px 24px;
}

body.doc-page .section h2,
body.doc-page .section h3 {
  position: relative;
  padding-left: 0;
  border-left: 0;
  margin-top: 4px;
}

body.doc-page .section h2::before,
body.doc-page .section h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.55), rgba(239, 159, 95, 0.42));
}

body.doc-page .badge,
body.doc-page .step-num,
body.doc-page .timeline-step .dot {
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.16), rgba(239, 159, 95, 0.16));
  color: #2249af;
  box-shadow: 0 0 0 1px rgba(54, 38, 31, 0.04) inset;
}

body.doc-page .callout {
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.12), rgba(239, 159, 95, 0.09));
}

body.doc-page .callout p {
  color: var(--muted);
}

body.doc-page .section h2,
body.doc-page .doc-head h1 {
  border-color: rgba(79, 140, 255, 0.9);
}

body.doc-page .footer {
  color: rgba(35, 26, 22, 0.66);
}