:root {
  color-scheme: dark;
}

html[data-theme='light'] {
  --bg: #fafafa;
  --fg: #475569;
  --hd: #1a1d21;
  --mut: #6e7683;
  --acc: #2563eb;
  --line: rgba(26, 29, 33, 0.1);
  --panel: #ffffff;
  --chip: rgba(37, 99, 235, 0.09);
  color-scheme: light;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

html[data-theme='light'] body {
  background: var(--bg);
  color: var(--fg);
}

html[data-theme='light'] .sitebar {
  background: var(--bg);
  border-bottom-color: var(--line);
}

html[data-theme='light'] .sitebar .brand,
html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] th,
html[data-theme='light'] td:first-child,
html[data-theme='light'] .article-card h2,
html[data-theme='light'] .toc strong {
  color: var(--hd);
}

html[data-theme='light'] .sitebar .logo {
  border-color: var(--acc);
  background: var(--chip);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.08);
  color: var(--acc);
}

html[data-theme='light'] .sitebar nav a {
  color: var(--mut);
}

html[data-theme='light'] .sitebar nav a:hover,
html[data-theme='light'] a {
  color: var(--acc);
}

html[data-theme='light'] .sitebar nav a.active {
  color: var(--acc);
  background: var(--chip);
  border-color: var(--acc);
}

html[data-theme='light'] .lede,
html[data-theme='light'] .article-card p {
  color: var(--fg);
}

html[data-theme='light'] .search,
html[data-theme='light'] .article-card,
html[data-theme='light'] .toc,
html[data-theme='light'] figure.fig svg {
  background: var(--panel);
  border-color: var(--line);
}

html[data-theme='light'] code,
html[data-theme='light'] .formula,
html[data-theme='light'] .f,
html[data-theme='light'] .eq,
html[data-theme='light'] .tag {
  color: var(--hd);
  background: var(--chip);
}

html[data-theme='light'] .eq {
  border-left-color: var(--acc);
}

html[data-theme='light'] th,
html[data-theme='light'] td {
  border-bottom-color: var(--line);
}

html[data-theme='light'] .note,
html[data-theme='light'] footer,
html[data-theme='light'] .empty {
  border-color: var(--line);
}

html[data-theme='light'] .fig text,
html[data-theme='light'] .figcaption,
html[data-theme='light'] figure.fig figcaption,
html[data-theme='light'] .crumb,
html[data-theme='light'] label,
html[data-theme='light'] .tag,
html[data-theme='light'] .note,
html[data-theme='light'] footer {
  color: var(--mut);
  fill: var(--mut);
}

html[data-theme='light'] .fig .sym {
  fill: var(--hd);
}

html[data-theme='light'] .fig .acc {
  fill: var(--acc);
}

html[data-theme='light'] .fig .beam {
  stroke: var(--acc);
}

html[data-theme='light'] .fig .beamfill {
  fill: rgba(37, 99, 235, 0.08);
}

html[data-theme='light'] .fig .axis {
  stroke: rgba(26, 29, 33, 0.25);
}

html[data-theme='light'] .fig .dash {
  stroke: var(--mut);
}

html[data-theme='light'] .fig .lens {
  fill: rgba(37, 99, 235, 0.1);
  stroke: var(--acc);
}

.theme-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--mut);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.theme-toggle:hover {
  border-color: var(--acc);
  color: var(--acc);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.theme-toggle .moon-icon {
  display: none;
}

html[data-theme='light'] .theme-toggle .sun-icon {
  display: none;
}

html[data-theme='light'] .theme-toggle .moon-icon {
  display: block;
}