html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5edf8;
  --muted: #9aa8bd;
  --line: #334155;
  --blue: #60a5fa;
  --blue-bg: #0d2a47;
  --green: #34d399;
  --green-bg: #062d26;
  --amber: #fbbf24;
  --amber-bg: #352507;
  --pink: #f472b6;
  --violet: #a78bfa;
  --red: #f87171;
  --red-bg: #3a1518;
  --bg: #101827;
  --soft: #090f1d;
  --paper: #111827;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10040;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  cursor: pointer;
  font: 700 13px/1.2 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 7px 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: #2563eb;
  color: #1d4ed8;
  outline: none;
}

html[data-theme="dark"] .theme-toggle {
  border-color: #475569;
  background: rgba(15, 23, 42, 0.92);
  color: #e5edf8;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
  border-color: #60a5fa;
  color: #bfdbfe;
}

html[data-theme="dark"] body {
  background: var(--soft);
  color: var(--ink);
}

html[data-theme="dark"] a {
  color: #93c5fd;
}

html[data-theme="dark"] a:hover {
  color: #bfdbfe;
}

html[data-theme="dark"] header.top,
html[data-theme="dark"] article,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .card,
html[data-theme="dark"] .navbtns a,
html[data-theme="dark"] .note-panel,
html[data-theme="dark"] #TOC,
html[data-theme="dark"] .doc-title {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .topnav a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .card,
html[data-theme="dark"] .navbtns a,
html[data-theme="dark"] .toc li {
  color: var(--ink);
}

html[data-theme="dark"] .sub,
html[data-theme="dark"] .crumb,
html[data-theme="dark"] .card .cb,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] .navbtns .nlabel,
html[data-theme="dark"] .toc li .ln {
  color: var(--muted);
}

html[data-theme="dark"] code {
  background: #182235;
  color: #dbeafe;
}

html[data-theme="dark"] pre {
  background: #07111f;
  color: #dbeafe;
}

html[data-theme="dark"] table th,
html[data-theme="dark"] table td {
  border-color: var(--line);
}

html[data-theme="dark"] thead th {
  background: #121b2d;
}

html[data-theme="dark"] .note,
html[data-theme="dark"] .skip {
  background: #101827;
  border-color: var(--line);
  color: #cbd5e1;
}

html[data-theme="dark"] .example {
  background: #101827;
  border-color: var(--line);
}

html[data-theme="dark"] .ml {
  background: #062d26;
  border-color: #0f766e;
}

html[data-theme="dark"] .key {
  background: #352507;
  border-color: #b45309;
}

html[data-theme="dark"] .pitfall {
  background: #3a1518;
  border-color: #b91c1c;
}

html[data-theme="dark"] .goals,
html[data-theme="dark"] .here,
html[data-theme="dark"] .toc li.cur {
  background: #0d2a47;
  border-color: #1d4ed8;
  color: #dbeafe;
}

html[data-theme="dark"] .goals h4,
html[data-theme="dark"] .here b,
html[data-theme="dark"] .card .cap,
html[data-theme="dark"] .card .cap .lbl {
  color: #bfdbfe;
}

html[data-theme="dark"] .card .cap .lbl {
  background: #1e3a8a;
  border: 1px solid #2563eb;
  color: #dbeafe;
}

html[data-theme="dark"] .card .num,
html[data-theme="dark"] .card-label,
html[data-theme="dark"] .brand-mark {
  background: #182235;
  border-color: var(--line);
  color: #93c5fd;
}

html[data-theme="dark"] .badge {
  background: #263244;
  color: #cbd5e1;
}

html[data-theme="dark"] .hero {
  border-color: var(--line);
  background: var(--soft);
}

html[data-theme="dark"] .hero::before {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.11) 1px, transparent 1px);
}

html[data-theme="dark"] .hero::after {
  background:
    linear-gradient(115deg, rgba(9, 15, 29, 0.98) 0%, rgba(9, 15, 29, 0.86) 54%, rgba(9, 15, 29, 0.54) 100%),
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(52, 211, 153, 0.10) 28px 29px);
}

html[data-theme="dark"] .button {
  background: #111827;
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .button.primary {
  background: #2563eb;
  border-color: #60a5fa;
  color: #fff;
}

html[data-theme="dark"] .doc-header,
html[data-theme="dark"] footer {
  background: #090f1d;
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .doc-page {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 28rem),
    var(--soft);
}

html[data-theme="dark"] figure.fig svg {
  background: #0f172a;
  border-radius: 8px;
}

html[data-theme="dark"] figure.fig svg [fill="#ffffff"],
html[data-theme="dark"] figure.fig svg [fill="#fff"],
html[data-theme="dark"] figure.fig svg [fill="#f8fafc"],
html[data-theme="dark"] figure.fig svg [fill="#f1f5f9"] {
  fill: #111827 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#eff6ff"],
html[data-theme="dark"] figure.fig svg [fill="#dbeafe"] {
  fill: #0d2a47 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#ecfdf5"] {
  fill: #062d26 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#d1fae5"],
html[data-theme="dark"] figure.fig svg [fill="#f0fdf4"],
html[data-theme="dark"] figure.fig svg [fill="#dcfce7"],
html[data-theme="dark"] figure.fig svg [fill="#bbf7d0"],
html[data-theme="dark"] figure.fig svg [fill="#a7f3d0"],
html[data-theme="dark"] figure.fig svg [fill="#e7f6ef"] {
  fill: #06382e !important;
}

html[data-theme="dark"] figure.fig svg [fill="#fff7ed"],
html[data-theme="dark"] figure.fig svg [fill="#fffbeb"],
html[data-theme="dark"] figure.fig svg [fill="#fef3c7"],
html[data-theme="dark"] figure.fig svg [fill="#fde68a"],
html[data-theme="dark"] figure.fig svg [fill="#fed7aa"],
html[data-theme="dark"] figure.fig svg [fill="#fde9d0"] {
  fill: #352507 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#fdf2f8"],
html[data-theme="dark"] figure.fig svg [fill="#fef2f8"],
html[data-theme="dark"] figure.fig svg [fill="#fff1f2"],
html[data-theme="dark"] figure.fig svg [fill="#fde7f1"],
html[data-theme="dark"] figure.fig svg [fill="#fce7f3"],
html[data-theme="dark"] figure.fig svg [fill="#fbcfe8"],
html[data-theme="dark"] figure.fig svg [fill="#fbd6e8"] {
  fill: #351424 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#fef2f2"],
html[data-theme="dark"] figure.fig svg [fill="#fca5a5"] {
  fill: #3a1518 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#dbe4ee"],
html[data-theme="dark"] figure.fig svg [fill="#eef2f7"] {
  fill: #111827 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#1f2937"],
html[data-theme="dark"] figure.fig svg [fill="#0f172a"],
html[data-theme="dark"] figure.fig svg [fill="#111827"],
html[data-theme="dark"] figure.fig svg [fill="#334155"],
html[data-theme="dark"] figure.fig svg [fill="#475569"],
html[data-theme="dark"] figure.fig svg [fill="#4b5563"],
html[data-theme="dark"] figure.fig svg [fill="#6b7280"] {
  fill: #e5edf8 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#64748b"],
html[data-theme="dark"] figure.fig svg [fill="#94a3b8"] {
  fill: #cbd5e1 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#1e3a8a"],
html[data-theme="dark"] figure.fig svg [fill="#1e40af"],
html[data-theme="dark"] figure.fig svg [fill="#1d4ed8"],
html[data-theme="dark"] figure.fig svg [fill="#1e3a5f"] {
  fill: #bfdbfe !important;
}

html[data-theme="dark"] figure.fig svg [fill="#065f46"],
html[data-theme="dark"] figure.fig svg [fill="#047857"],
html[data-theme="dark"] figure.fig svg [fill="#166534"] {
  fill: #86efac !important;
}

html[data-theme="dark"] figure.fig svg [fill="#9a3412"],
html[data-theme="dark"] figure.fig svg [fill="#92400e"],
html[data-theme="dark"] figure.fig svg [fill="#92600a"],
html[data-theme="dark"] figure.fig svg [fill="#b45309"] {
  fill: #fdba74 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#9d174d"],
html[data-theme="dark"] figure.fig svg [fill="#831843"],
html[data-theme="dark"] figure.fig svg [fill="#be185d"] {
  fill: #f9a8d4 !important;
}

html[data-theme="dark"] figure.fig svg [fill="#7f1d1d"] {
  fill: #fca5a5 !important;
}

html[data-theme="dark"] figure.fig svg [stroke="#1f2937"],
html[data-theme="dark"] figure.fig svg [stroke="#0f172a"],
html[data-theme="dark"] figure.fig svg [stroke="#111827"],
html[data-theme="dark"] figure.fig svg [stroke="#334155"],
html[data-theme="dark"] figure.fig svg [stroke="#475569"],
html[data-theme="dark"] figure.fig svg [stroke="#4b5563"],
html[data-theme="dark"] figure.fig svg [stroke="#6b7280"] {
  stroke: #e5edf8 !important;
}

html[data-theme="dark"] figure.fig svg [stroke="#e2e8f0"],
html[data-theme="dark"] figure.fig svg [stroke="#cbd5e1"],
html[data-theme="dark"] figure.fig svg [stroke="#94a3b8"],
html[data-theme="dark"] figure.fig svg [stroke="#64748b"] {
  stroke: #475569 !important;
}

html[data-theme="dark"] figure.fig svg [stroke="#1e40af"] {
  stroke: #93c5fd !important;
}

html {
  overflow-x: hidden;
}

mjx-container {
  max-width: 100%;
  vertical-align: middle;
}

mjx-container:not([display="true"]) {
  display: inline-block;
  max-width: none;
  overflow: visible;
}

mjx-container[display="true"] {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

mjx-container[display="true"] > svg {
  max-width: none;
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  .theme-toggle {
    top: auto;
    right: 12px;
    bottom: 70px;
    min-height: 34px;
    padding: 7px 10px;
  }
}