.docs-body {
  margin: 0;
  padding: 0;
  background: var(--sp-color-hero-bg);
  color: var(--sp-color-text-primary);
  font-family: var(--sp-font-sans);
}

.docs-background {
  position: fixed;
  inset: 0;
  z-index: var(--sp-z-behind);
  background: var(--sp-color-hero-bg);
}

.docs-background::before {
  content: '';
  position: fixed;
  top: -250px;
  right: -250px;
  width: 800px;
  height: 800px;
  border-radius: var(--sp-radius-full);
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sp-color-primary) 10%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 6%, transparent) 40%,
    color-mix(in oklch, var(--sp-color-primary) 2%, transparent) 70%,
    transparent 100%
  );
  animation: pulse-soft 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

.docs-background::after {
  content: '';
  position: fixed;
  bottom: -300px;
  right: -300px;
  width: 700px;
  height: 700px;
  border-radius: var(--sp-radius-full);
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sp-color-primary) 8%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 4%, transparent) 45%,
    color-mix(in oklch, var(--sp-color-primary) 1%, transparent) 75%,
    transparent 100%
  );
  animation: pulse-soft 8s cubic-bezier(0.4, 0, 0.6, 1) infinite 2s;
  pointer-events: none;
}

.docs-shape-left {
  position: fixed;
  left: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  border-radius: var(--sp-radius-full);
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sp-color-primary) 8%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 4%, transparent) 40%,
    color-mix(in oklch, var(--sp-color-primary) 1%, transparent) 70%,
    transparent 100%
  );
  animation: pulse-soft 8s cubic-bezier(0.4, 0, 0.6, 1) infinite 4s;
  pointer-events: none;
  z-index: var(--sp-z-behind);
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.9; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateY(-50%) scale(1.05); }
}


.docs-tabs {
  display: flex;
  gap: 0;
  max-width: 1340px;
  margin: 0 auto;
  margin-top: var(--sp-header-height);
  border-bottom: 1px solid var(--sp-color-border);
  background: transparent;
  backdrop-filter: blur(var(--sp-space-5));
  position: sticky;
  top: var(--sp-header-height);
  z-index: var(--sp-z-sticky);
}

.docs-tab {
  padding: 0.75rem 1.5rem;
  font-size: var(--sp-text-sm);
  font-weight: 500;
  font-family: var(--sp-font-sans);
  color: var(--sp-color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--sp-duration-fast) var(--sp-ease-default), border-color var(--sp-duration-fast) var(--sp-ease-default);
}

.docs-tab:hover {
  color: var(--sp-color-text-primary);
}

.docs-tab--active {
  color: var(--sp-color-primary);
  border-bottom: 3px solid var(--sp-color-primary);
  margin-bottom: -1px;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--sp-sidebar-left-width) 1fr var(--sp-sidebar-right-width);
  min-height: calc(100vh - var(--sp-header-height));
  max-width: 1340px;
  margin: 0 auto;
}

.docs-layout--list {
  grid-template-columns: var(--sp-sidebar-left-width) 1fr;
}

.docs-sidebar {
  padding: var(--sp-space-6);
  border-right: 1px solid var(--sp-color-border);
}

.docs-sidebar .docs-nav {
  position: sticky;
  top: calc(var(--sp-header-height) + 45px);
  max-height: calc(100vh - var(--sp-header-height) - 45px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-main {
  padding: var(--sp-space-6) var(--sp-space-8);
  min-width: 0;
}

.docs-article {
  max-width: 780px;
}