:root {
  color-scheme: light;
  --bg: #f0f2f5;
  --panel: #ffffff;
  --panel-bg: #ffffff;
  --text: #1c1e21;
  --muted: #65676b;
  --primary: #1877f2;
  --secondary: #e7f3ff;
  --accent: #d2e2ff;
  --accent-bg: rgba(24, 119, 242, 0.08);
  --success: #27ae60;
  --warning: #e67e22;
  --error: #e74c3c;
  --border: #ccd0d5;
  --border-light: #e4e6eb;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 2px 8px rgba(24, 119, 242, 0.25);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  --surface-radius: 16px;

  --font-sans: "Quicksand", "Nunito", system-ui, -apple-system, sans-serif;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 320ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: var(--motion-duration-fast) var(--motion-ease-standard);
  --transition-base: var(--motion-duration-base) var(--motion-ease-standard);
  --transition-slow: var(--motion-duration-slow) var(--motion-ease-emphasized);
  --focus-ring: 0 0 0 3px rgba(24, 119, 242, 0.3);
  --gradient: linear-gradient(135deg, #f0f2f5 0%, #e7f3ff 100%);
  --soft-panel: rgba(255, 255, 255, 0.82);
  --app-scroll-y: 0px;
  --app-scroll-progress: 0;

  --mobile-padding: 16px;
  --mobile-touch-target: 48px;
}

body.dark {
  color-scheme: dark;
  --bg: #000000;
  --panel: #050505;
  --panel-bg: #050505;
  --text: #f5f7fb;
  --muted: #9aa3b2;
  --primary: #4f8cff;
  --secondary: #0c1f45;
  --accent: #101b33;
  --accent-bg: rgba(79, 140, 255, 0.14);
  --success: #42d392;
  --warning: #ffb54a;
  --error: #ff8fab;
  --border: #131313;
  --border-light: #1f1f1f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.48);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.64);
  --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.78);
  --shadow-primary: 0 12px 34px rgba(79, 140, 255, 0.24);
  --focus-ring: 0 0 0 3px rgba(79, 140, 255, 0.38);
  --gradient: radial-gradient(circle at top, rgba(79, 140, 255, 0.12) 0%, transparent 32%), linear-gradient(180deg, #000000 0%, #040404 48%, #080808 100%);
  --soft-panel: rgba(8, 8, 8, 0.84);
}

* { box-sizing: border-box; }

body.docs-root {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--panel);
  line-height: var(--leading-normal);
  transition: background-color var(--transition-slow), background-image var(--transition-slow), color var(--transition-slow);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
.header,
.docs-sidebar,
.docs-base-url-box,
.top-nav a,
.doc-section,
.endpoint-card,
.example-card,
.error-grid article,
.code-block,
.base-url-pill,
.branding-footer {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    box-shadow var(--transition-slow),
    transform var(--transition-base),
    filter var(--transition-base);
}

@media (min-width: 768px) {
  body.docs-root {
    background: var(--gradient);
  }
}

.app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  isolation: isolate;
}

.app::before,
.app::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: -1;
  opacity: 0.42;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app::before {
  top: -8vh;
  left: -10vw;
  width: min(38vw, 420px);
  height: min(38vw, 420px);
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 70%);
  filter: blur(26px);
  transform: translate3d(0, calc(var(--app-scroll-progress) * -22px), 0);
}

.app::after {
  right: -8vw;
  bottom: 8vh;
  width: min(32vw, 320px);
  height: min(32vw, 320px);
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 14%, transparent) 0%, transparent 72%);
  filter: blur(34px);
  transform: translate3d(0, calc(var(--app-scroll-progress) * 18px), 0);
}

body.docs-root::before,
body.docs-root::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  min-width: 260px;
  min-height: 260px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(38px);
  opacity: 0.18;
}

body.docs-root::before {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--primary) 45%, transparent) 0%, transparent 72%);
  top: -14vh;
  right: -14vw;
  animation: driftBlobA 20s ease-in-out infinite;
}

body.docs-root::after {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--success) 34%, transparent) 0%, transparent 70%);
  bottom: -18vh;
  left: -14vw;
  animation: driftBlobB 24s ease-in-out infinite;
}

.header,
.docs-sidebar,
.docs-base-url-box,
.top-nav,
.doc-section {
  border: 1px solid var(--border);
  border-radius: var(--surface-radius);
  background: var(--panel-bg);
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    box-shadow var(--transition-slow),
    transform var(--transition-base);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--panel-bg);
  padding: 1rem var(--mobile-padding);
  box-shadow: var(--shadow-lg);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  border-radius: 0;
  animation: liftIn 420ms ease both;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base);
  overflow: clip;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.16) 0%, transparent 28%, transparent 72%, rgba(255, 255, 255, 0.12) 100%),
    radial-gradient(circle at 12% 24%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 34%);
  opacity: calc(0.55 - (var(--app-scroll-progress) * 0.18));
  transform: translate3d(0, calc(var(--app-scroll-progress) * -10px), 0);
}

.header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary) 28%, var(--border-light) 72%) 50%, transparent 100%);
  opacity: 0.72;
  pointer-events: none;
}

@media (min-width: 768px) {
  .app {
    max-width: 960px;
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .header {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    position: relative;
    top: auto;
  }
}

.docs-layout {
  width: 100%;
  display: grid;
  gap: 18px;
}

.docs-sidebar-column {
  display: grid;
  gap: 14px;
}

.docs-scroll-title {
  display: none;
}

.docs-sidebar {
  margin: 12px var(--mobile-padding) 0;
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-md);
  animation: liftIn 480ms ease both;
  background: var(--soft-panel);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base);
  position: relative;
  overflow: clip;
}

.docs-sidebar::before,
.doc-section::before,
.endpoint-card::before,
.example-card::before,
.error-grid article::before,
.code-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 28%);
  opacity: 0.55;
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.docs-base-url-box {
  margin: 0;
  padding: 0;
  box-shadow: none;
  animation: none;
  background: transparent;
  border: none;
}

.route-transition {
  width: 100%;
  animation: route-fade-slide var(--transition-slow) ease both;
  position: relative;
  perspective: 1200px;
}

.route-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 34%);
  animation: routeLightSweep 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes route-fade-slide {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.986);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes routeLightSweep {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  45% {
    opacity: 0.75;
  }
  100% {
    opacity: 0.28;
    transform: translateY(0) scale(1);
  }
}

.stage-section {
  --section-index: 0;
  opacity: 0;
  transform: translateY(18px);
  animation: stageStaggerRise 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--section-index) * 90ms);
  will-change: opacity, transform, filter;
}

@keyframes stageStaggerRise {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(28px) scale(0.978);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.header .subtitle {
  display: block;
}

@media (max-width: 767px) {
  .header .subtitle {
    display: none;
  }
}

.header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brand h1,
.code-block pre {
  margin: 0;
}

.brand h1 {
  font-weight: var(--font-bold);
  color: var(--primary);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 78%, #667eea 22%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  filter: drop-shadow(0 6px 18px rgba(24, 119, 242, 0.12));
  animation: brandTitleEnter 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (min-width: 480px) {
  .brand h1 {
    font-size: var(--text-3xl);
  }
}

.brand .subtitle,
.section-note,
.endpoint-meta span {
  color: var(--muted);
}

.brand .subtitle {
  margin: 10px 0 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  opacity: 1;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  animation: brandSubtitleEnter 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes brandTitleEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    letter-spacing: 0.02em;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: -0.025em;
  }
}

@keyframes brandSubtitleEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-label {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: color-mix(in srgb, var(--text) 86%, var(--muted) 14%);
}

.base-url-pill {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border) 62%);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 10%, var(--panel-bg) 90%);
  color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  max-width: 100%;
  overflow-wrap: anywhere;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
  animation: pulseFocus 2.8s ease-in-out infinite;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.ghost {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: pointer;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  font-family: inherit;
  background: transparent;
  color: var(--text);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mobile-touch-target);
}

.ghost:hover {
  background: var(--accent-bg);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}

.ghost:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.dark-mode-toggle {
  padding: var(--space-2) !important;
  font-size: 20px;
  min-width: var(--mobile-touch-target);
  min-height: var(--mobile-touch-target);
}

.top-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  justify-content: flex-start;
  align-items: stretch;
  box-shadow: none;
  animation: none;
  background: transparent;
  border: none;
}

.top-nav a {
  display: flex;
  width: 100%;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: 0.01em;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  position: relative;
  overflow: hidden;
  background: var(--panel-bg);
  justify-content: flex-start;
  align-items: center;
}

.top-nav a:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--accent-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}

.top-nav a.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--panel-bg) 86%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}


.docs-main {
  padding: 0 var(--mobile-padding) var(--space-6);
  display: grid;
  gap: 20px;
  width: 100%;
}

.doc-section {
  padding: var(--space-3) var(--mobile-padding);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: clip;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
}
.doc-section h2 {
  margin: 0 0 18px;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  transition:
    color var(--transition-base),
    transform var(--transition-base);
}

.page-subtitle {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.page-subtitle.left {
  text-align: left;
}

.section-note {
  margin: 0 0 18px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.branding-footer {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--mobile-padding);
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--border-light);
  background: var(--panel-bg);
  width: 100%;
  position: relative;
  overflow: hidden;
  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.branding-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 48%, transparent 100%);
  opacity: calc(0.18 + (var(--app-scroll-progress) * 0.12));
  transform: translate3d(calc(var(--app-scroll-progress) * 14px), 0, 0);
}

.endpoint-head,
.endpoint-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.endpoint-head {
  gap: 12px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  position: relative;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid var(--border-light);
}

.endpoint-card header {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.endpoint-head input {
  width: min(360px, 100%);
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base);
}

.endpoint-head input::placeholder {
  font-size: 0.95em;
}

.endpoint-head input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.endpoint-head input:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border) 62%);
  transform: translateY(-1px);
}

.endpoint-list,
.examples-grid,
.error-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.error-grid { grid-template-columns: 1fr; }

.endpoint-card,
.example-card,
.error-grid article,
.code-block,
.endpoint-meta span {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--panel-bg);
}

.endpoint-card,
.example-card,
.error-grid article,
.code-block {
  padding: 20px;
  position: relative;
  overflow: clip;
}

.endpoint-card,
.example-card,
.error-grid article {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.endpoint-card:hover,
.example-card:hover,
.error-grid article:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border) 48%);
}

.endpoint-card {
  display: grid;
  gap: var(--space-3);
}

.endpoint-card p {
  margin: 0 0 14px;
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
}
.endpoint-card p,
.example-card p,
.error-grid li {
  overflow-wrap: anywhere;
}

.endpoint-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.endpoint-meta span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--accent) 18%);
  border-color: color-mix(in srgb, var(--border-light) 68%, var(--primary) 32%);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.endpoint-meta span:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border-light) 58%);
  box-shadow: var(--shadow-sm);
}

.endpoint-card code,
.example-card code,
.error-grid code,
.brand code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.method {
  display: inline-block;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}

.method.get { background: #0d6fe6; }
.method.post,
.method.put,
.method.patch,
.method.delete { background: #0a8e7f; }

.code-block {
  background: color-mix(in srgb, var(--primary) 4%, var(--panel-bg) 96%);
  overflow: auto;
  position: relative;
  border-color: color-mix(in srgb, var(--border-light) 64%, var(--primary) 36%);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

body.dark .code-block {
  background: #1f2835;
}

.code-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border-light) 58%);
}

.code-block pre,
.code-block.compact pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--text-sm);
  line-height: 1.72;
  color: color-mix(in srgb, var(--text) 86%, var(--muted) 14%);
}

.code-block::before {
  content: "";
  position: relative;
  left: 0;
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 45%, transparent), transparent);
  opacity: 0.75;
}

.reveal-item {
  opacity: 0;
  transform: translateY(18px) scale(0.988);
  filter: blur(8px);
}

.reveal-item.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  transition:
    opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.docs-shell-item {
  opacity: 0;
  transform: translateY(16px) scale(0.988);
  filter: blur(8px);
}

.docs-shell-item.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  transition:
    opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.endpoint-card,
.example-card,
.error-grid article,
.doc-section,
.top-nav,
.header {
  min-width: 0;
}

@media (max-width: 1024px) {
  .error-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .header {
    padding: 14px 12px 12px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .brand {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .brand h1 {
    font-size: 1.62rem;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .header-actions {
    width: auto;
    justify-content: flex-end;
    gap: 8px;
  }

  .base-url-pill {
    width: 100%;
    padding: 9px 12px;
    font-size: 0.95rem;
  }

  .endpoint-head {
    flex-direction: column;
    align-items: stretch;
    position: static;
    margin: 0 0 12px;
    padding: 0;
    border-bottom: none;
    background: transparent;
  }

  .endpoint-list,
  .examples-grid,
  .error-grid,
  .examples-grid .wide {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .top-nav a {
    min-height: 46px;
    font-size: 0.95rem;
  }

  .endpoint-card header code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .doc-section {
    padding: var(--space-3) var(--mobile-padding);
  }

  .doc-section h2 {
    margin-bottom: 14px;
    font-size: var(--text-xl);
  }

  .section-note {
    margin-bottom: 14px;
    font-size: var(--text-base);
  }

  .docs-main {
    gap: 16px;
  }

  .endpoint-card,
  .example-card,
  .error-grid article,
  .code-block {
    padding: 16px;
  }

  .endpoint-card p {
    font-size: 1.02rem;
    line-height: 1.65;
  }

  .endpoint-meta {
    gap: 7px;
  }

  .endpoint-meta span {
    font-size: 0.9rem;
    padding: 6px 11px;
  }

  .method {
    font-size: 0.85rem;
    padding: 7px 12px;
  }

  .endpoint-head input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size: 1rem;
  }

  .endpoint-head input::placeholder {
    font-size: 0.9rem;
  }

  .code-block pre,
  .code-block.compact pre {
    font-size: 0.96rem;
    line-height: 1.66;
  }
}

@media (min-width: 768px) {
  .docs-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .docs-sidebar-column {
    position: sticky;
    top: calc(var(--space-3) + 72px);
    align-self: start;
    gap: 8px;
  }

  .docs-scroll-title {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--space-1);
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-14px) scale(0.94);
    transform-origin: top left;
    pointer-events: none;
    transition:
      opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
  }

  .docs-scroll-title span {
    display: inline-block;
    font-weight: var(--font-bold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 76%, #667eea 24%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: normal;
  }

  body.docs-scroll-title-visible .docs-scroll-title {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  .docs-sidebar {
    margin: 0;
    position: static;
  }

  .docs-main {
    padding: 0 0 var(--space-8);
  }

  .docs-main > .doc-section,
  .docs-main > .branding-footer {
    width: 100%;
    margin-inline: 0;
  }

  .doc-section {
    background: var(--panel-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-lg);
  }

  .docs-sidebar:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 26%, var(--border) 74%);
  }

  .docs-sidebar:hover .base-url-pill {
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
      var(--shadow-primary);
  }

  .doc-section:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border-light) 78%);
  }

  .docs-sidebar:hover::before,
  .doc-section:hover::before,
  .endpoint-card:hover::before,
  .example-card:hover::before,
  .error-grid article:hover::before,
  .code-block:hover::after {
    opacity: 0.82;
    transform: translate3d(0, -4px, 0) scale(1.01);
  }

  .doc-section:hover h2 {
    transform: translateX(2px);
  }

  .endpoint-card:hover .method,
  .example-card:hover .method {
    transform: translateX(2px);
  }

  .endpoint-list {
    gap: 16px;
  }

  .examples-grid,
  .error-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .examples-grid .wide {
    grid-column: span 2;
  }

  .branding-footer {
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    margin-top: var(--space-3);
    background: transparent;
    border-top: none;
  }
}

@keyframes liftIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseFocus {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 0 0 rgba(24, 119, 242, 0.25);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
      0 0 0 6px rgba(24, 119, 242, 0);
  }
}

@keyframes driftBlobA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-20px, 16px, 0) scale(1.08); }
}

@keyframes driftBlobB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -16px, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .app::before,
  .app::after,
  .header::before,
  .header::after,
  .route-transition::before,
  .stage-section,
  .docs-sidebar::before,
  .doc-section::before,
  .endpoint-card::before,
  .example-card::before,
  .error-grid article::before,
  .code-block::after,
  .branding-footer::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}