/* Jianxiu Tech editorial theme for documentation and policy pages */
:root {
  color-scheme: light;
  --editorial-bg: #f4f3ee;
  --editorial-surface: #fcfcf8;
  --editorial-text: #20221e;
  --editorial-muted: #686c64;
  --editorial-line: #d9dbd3;
  --editorial-accent: #2f6759;
  --editorial-warm: #75664d;
  --editorial-shadow: 0 14px 38px rgba(31, 34, 29, .055);
}

.dark {
  color-scheme: dark;
  --editorial-bg: #171815;
  --editorial-surface: #20211d;
  --editorial-text: #f0efe8;
  --editorial-muted: #a7aaa1;
  --editorial-line: #393b34;
  --editorial-accent: #86b9a8;
  --editorial-warm: #c3ad88;
  --editorial-shadow: 0 16px 44px rgba(0, 0, 0, .18);
}

html,
body {
  background: var(--editorial-bg) !important;
  color: var(--editorial-text) !important;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  font-family: Inter, "SF Pro Display", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  line-height: 1.7;
}

.bg-grid-paper,
.neon-orb,
.orb-a,
.orb-b {
  display: none !important;
}

body > nav {
  border-color: color-mix(in srgb, var(--editorial-line) 76%, transparent) !important;
  background: color-mix(in srgb, var(--editorial-bg) 92%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
}

body > nav > div {
  min-height: 76px !important;
  height: 76px !important;
}

body > nav a > div:first-child {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: var(--editorial-text) !important;
  color: var(--editorial-bg) !important;
  box-shadow: none !important;
}

body > nav button,
body > nav a.hidden {
  border-color: var(--editorial-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--editorial-muted) !important;
  box-shadow: none !important;
}

body > nav button:hover,
body > nav a.hidden:hover {
  background: var(--editorial-surface) !important;
  color: var(--editorial-text) !important;
}

.heavy-card,
.card {
  border: 1px solid var(--editorial-line) !important;
  border-radius: 18px !important;
  background: var(--editorial-surface) !important;
  box-shadow: var(--editorial-shadow) !important;
}

.hero-glow {
  background: var(--editorial-surface) !important;
}

body > section:first-of-type {
  padding-top: 124px !important;
}

body > section:first-of-type .heavy-card,
body > section:first-of-type > div {
  text-align: left !important;
}

body > section:first-of-type .heavy-card {
  padding: 42px !important;
  border-width: 1px !important;
}

body > section:first-of-type h1,
.docs-hero h1 {
  max-width: 880px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: var(--editorial-text) !important;
  font-size: clamp(2.7rem, 6vw, 4.6rem) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
}

body > section:first-of-type p,
.docs-hero p {
  max-width: 720px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: var(--editorial-muted) !important;
}

body > section:first-of-type .inline-flex,
.docs-hero .inline-flex {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--editorial-accent) !important;
  box-shadow: none !important;
}

body > section:first-of-type .inline-flex .rounded-full,
.docs-hero .inline-flex .rounded-full {
  width: 20px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: var(--editorial-accent) !important;
}

.docs-tabs {
  top: 76px !important;
  background: linear-gradient(to bottom, var(--editorial-bg) 78%, transparent) !important;
}

.docs-tabs > div > div,
.switch-btn {
  border-color: var(--editorial-line) !important;
  background: var(--editorial-surface) !important;
  box-shadow: none !important;
}

.switch-btn.active {
  border-color: var(--editorial-text) !important;
  background: var(--editorial-text) !important;
  color: var(--editorial-bg) !important;
}

.doc-link,
.toc-link {
  border-radius: 8px !important;
  color: var(--editorial-muted) !important;
}

.doc-link:hover,
.toc-link:hover,
.doc-link.active,
.toc-link.active {
  background: color-mix(in srgb, var(--editorial-accent) 9%, transparent) !important;
  color: var(--editorial-accent) !important;
}

.policy h2 {
  border-left-color: var(--editorial-accent) !important;
  color: var(--editorial-text) !important;
}

.policy h3,
.policy strong,
.docs-content h2,
.docs-content h3,
.card h2,
.card h3 {
  color: var(--editorial-text) !important;
}

.policy p,
.policy li,
.docs-content p,
.docs-content li,
.card p,
.card li {
  color: var(--editorial-muted) !important;
}

.chip {
  border-radius: 7px !important;
  box-shadow: none !important;
}

.tag-new {
  border-color: color-mix(in srgb, var(--editorial-accent) 34%, var(--editorial-line)) !important;
  background: color-mix(in srgb, var(--editorial-accent) 9%, transparent) !important;
  color: var(--editorial-accent) !important;
}

.tag-perf {
  border-color: color-mix(in srgb, var(--editorial-warm) 34%, var(--editorial-line)) !important;
  background: color-mix(in srgb, var(--editorial-warm) 9%, transparent) !important;
  color: var(--editorial-warm) !important;
}

pre,
code {
  border-color: var(--editorial-line) !important;
}

.floating-btn {
  border-color: var(--editorial-line) !important;
  border-radius: 999px !important;
  background: var(--editorial-surface) !important;
  color: var(--editorial-muted) !important;
  box-shadow: var(--editorial-shadow) !important;
}

footer {
  border-color: var(--editorial-line) !important;
  background: transparent !important;
}

html {
  scroll-behavior: smooth;
}

body,
body > nav,
.heavy-card,
.card,
button,
a {
  transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .72s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms),
    transform .72s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms) !important;
}

.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

body > section:first-of-type h1,
body > section:first-of-type p,
body > section:first-of-type .inline-flex,
.docs-hero h1,
.docs-hero p {
  animation: editorial-legacy-enter .76s cubic-bezier(.2, .8, .2, 1) both;
}

body > section:first-of-type h1,
.docs-hero h1 { animation-delay: 60ms; }
body > section:first-of-type p,
.docs-hero p { animation-delay: 120ms; }

@keyframes editorial-legacy-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) {
  .heavy-card,
  .card {
    transition: transform .28s cubic-bezier(.2, .8, .2, 1),
      border-color .28s ease, box-shadow .28s ease !important;
  }

  .card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--editorial-accent) 28%, var(--editorial-line)) !important;
  }
}

@media (max-width: 640px) {
  body > nav > div {
    min-height: 68px !important;
    height: 68px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body > section:first-of-type {
    padding-top: 96px !important;
  }

  body > section:first-of-type .heavy-card {
    padding: 28px 22px !important;
  }

  body > section:first-of-type h1,
  .docs-hero h1 {
    font-size: 2.75rem !important;
  }

  .docs-tabs {
    top: 68px !important;
  }
}

@media (max-width: 1023px) {
  body > main.grid {
    display: block !important;
  }

  body > main.grid > article,
  body > main.grid > section {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}