:root {
  --docs-bg: #07070B;
  --docs-section: #0D0D13;
  --docs-surface: #13131B;
  --docs-surface-2: #181824;
  --docs-border: #242436;
  --docs-border-strong: #31314A;

  --docs-text-primary: #F6F7FB;
  --docs-text-secondary: #B1B5C9;
  --docs-text-muted: #7E849B;

  --docs-accent: #6C3BFF;
  --docs-accent-hover: #7E57FF;
  --docs-accent-soft: #16112B;
  --docs-accent-line: #8E74FF;

  --docs-code-bg: #101018;
  --docs-code-border: #292940;
  --docs-code-text: #E8EAF6;
  --docs-code-key: #C7AEFF;
  --docs-code-string: #8ED7A7;
  --docs-code-value: #9EC1FF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--docs-bg);
  color: var(--docs-text-primary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }

.docs-page {
  width: 100%;
  padding: 0 32px;
}

.docs-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 32px;
}

.docs-nav {
  position: sticky;
  top: 24px;
  align-self: start;
  background: var(--docs-section);
  border: 1px solid var(--docs-border);
  border-radius: 20px;
  padding: 28px;
  margin-top: 24px;
}

.docs-nav-label {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--docs-text-muted);
}

.docs-nav nav { display: grid; gap: 10px; }
.docs-nav a {
  color: var(--docs-text-secondary);
  font-size: 16px;
  line-height: 28px;
}
.docs-nav a:hover { color: var(--docs-text-primary); }

.docs-main {
  width: min(860px, 100%);
}

.docs-section {
  padding: 88px 0;
  border-bottom: 1px solid var(--docs-border);
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--docs-text-secondary);
}

h1 {
  margin: 0;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.04em;
  max-width: 14ch;
}

h2 {
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 650;
}

h3 {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 650;
}

.body-large {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 30px;
  color: var(--docs-text-secondary);
  max-width: 70ch;
}

.body-regular {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--docs-text-secondary);
}

.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 16px;
  line-height: 28px;
  border: 1px solid var(--docs-border-strong);
}

.button-primary {
  background: var(--docs-accent);
  border-color: var(--docs-accent);
}
.button-primary:hover {
  background: var(--docs-accent-hover);
  border-color: var(--docs-accent-hover);
}

.button-secondary {
  background: transparent;
  color: var(--docs-text-primary);
}
.button-secondary:hover { border-color: var(--docs-accent-line); }

.subnote {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--docs-text-muted);
  max-width: 72ch;
}

.hero-cards {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hero-card {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 20px;
  padding: 28px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
}


.docs-card-grid {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.docs-card-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.docs-card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.docs-card {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 20px;
  padding: 28px;
}

.docs-card .body-regular { margin: 12px 0 0; }

.docs-bullets {
  margin: 20px 0 0;
  padding-left: 20px;
  color: var(--docs-text-secondary);
}

.docs-bullets li {
  font-size: 16px;
  line-height: 28px;
}

.section-note {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--docs-text-muted);
}

.accent-chip {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--docs-accent-line);
  border: 1px solid var(--docs-accent-line);
  border-radius: 999px;
  background: var(--docs-accent-soft);
  padding: 6px 10px;
}

.code-block {
  margin: 20px 0 0;
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-code-border);
  border-radius: 16px;
  padding: 20px;
  overflow-x: auto;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--docs-code-text);
  font-size: 14px;
  line-height: 24px;
}

.code-key { color: var(--docs-code-key); }
.code-string { color: var(--docs-code-string); }
.code-value { color: var(--docs-code-value); }

@media (max-width: 980px) {
  .docs-page { padding: 0 20px; }
  .docs-shell { grid-template-columns: 1fr; }
  .docs-nav {
    position: relative;
    top: 0;
    margin-top: 20px;
    padding: 20px;
  }
  .docs-section { padding: 72px 0; }
  h1 { font-size: 44px; line-height: 52px; }
  .hero-card { padding: 20px; }
  .docs-card-grid-four, .docs-card-grid-three, .docs-card-grid-two { grid-template-columns: 1fr; }
  .docs-card { padding: 20px; }
}