:root {
  --docs-canvas: #020817;
  --docs-surface: rgb(8 18 35 / 0.88);
  --docs-ink: #e2e8f0;
  --docs-muted: #b8c4d6;
  --docs-border: #26364e;
  --docs-accent: #67e8f9;
}

.docs-toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.docs-toolbar .back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin: 0;
  font-weight: 700;
  text-decoration: none;
}

.docs-theme-control {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(125 211 252 / 0.35);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.05);
  padding: 0 13px;
  color: #dbeafe;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.docs-theme-control:hover {
  border-color: rgb(125 211 252 / 0.62);
  background: rgb(125 211 252 / 0.1);
}

.docs-theme-control:focus-visible {
  outline: 3px solid rgb(14 165 233 / 0.52);
  outline-offset: 3px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --docs-canvas: #eef4f8;
  --docs-surface: #fbfdff;
  --docs-ink: #10243a;
  --docs-muted: #4b6073;
  --docs-border: rgb(71 85 105 / 0.18);
  --docs-accent: #036b9e;
  background: var(--docs-canvas);
  color: var(--docs-ink);
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgb(14 116 144 / 0.075), transparent 30rem),
    linear-gradient(155deg, #f8fbfd 0%, var(--docs-canvas) 100%);
  color: var(--docs-ink);
}

:root[data-theme="light"] :is(h1, h2, h3) {
  color: var(--docs-ink);
}

:root[data-theme="light"] :is(p, li, .release-heading span, .lead) {
  color: var(--docs-muted);
}

:root[data-theme="light"] a {
  color: var(--docs-accent);
}

:root[data-theme="light"] :is(.release, .card, .note) {
  border-color: var(--docs-border);
  background: var(--docs-surface);
  box-shadow: 0 1rem 2.75rem rgb(30 64 88 / 0.1);
}

:root[data-theme="light"] code {
  background: #e8f0f5;
  color: #0c4a6e;
}

:root[data-theme="light"] .action {
  border-color: rgb(3 105 161 / 0.25);
  background: #e7f2f9;
  color: #075985;
}

:root[data-theme="light"] .docs-theme-control {
  border-color: rgb(71 85 105 / 0.2);
  background: #f1f6fa;
  color: #163b59;
}

:root[data-theme="light"] .docs-theme-control:hover {
  border-color: rgb(3 105 161 / 0.3);
  background: #e7f2f9;
}

@media (max-width: 520px) {
  .docs-theme-control__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .docs-theme-control {
    width: 44px;
    padding: 0;
    font-size: 1.1rem;
  }
}