:root.dark {
  color-scheme: dark;
  --ink: #f2f2f2;
  --muted: #a8a8a8;
  --paper: #0c0c0c;
  --surface: #181818;
  --line: #333333;
  --inverse: #a8a8a8;
  --raised: #202020;
  --control-border: #757575;
  --hover-ink: #d6d6d6;
  --map-block: #272727;
  --map-grid: #414141;
}

:root.dark .button:hover { background: var(--hover-ink); }

:root.dark .language-menu > summary { border-color: var(--control-border); }
:root.dark .language-menu > summary:hover,
:root.dark .language-menu[open] > summary {
  border-color: var(--muted);
  background: var(--surface);
}
:root.dark .language-panel {
  background: var(--surface);
  border-color: var(--control-border);
  box-shadow: 0 16px 48px rgb(0 0 0 / 40%);
}
:root.dark .language-flag { box-shadow: 0 0 0 1px rgb(255 255 255 / 16%); }
:root.dark .language-close:hover,
:root.dark .language-options a:hover { background: var(--raised); }
:root.dark .language-options a[aria-current] {
  background: var(--raised);
  border-color: var(--control-border);
}


:root.dark .diagram { outline: 1px solid var(--line); outline-offset: -1px; }
:root.dark .map-block { fill: var(--map-block); }
:root.dark .map-radius { stroke: var(--control-border); }
:root.dark .map-axis { stroke: var(--map-grid); }
:root.dark .map-label {
  background: var(--raised);
  border: 1px solid var(--line);
}
:root.dark .example-card {
  background: var(--raised);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}


:root.dark .focus-section {
  background: var(--surface);
  color: var(--ink);
  border-block: 1px solid var(--line);
}
:root.dark .focus-footer { border-color: var(--line); }


:root.dark .store-placeholder img { filter: invert(1); opacity: .7; }

@media (forced-colors: active) {
:root.dark .store-placeholder img { filter: none; opacity: 1; }
}