/* Shared page colors. Illustration materials keep their original palette. */
:root {
  color-scheme: light;
  --site-paper: #f4f2eb;
  --site-ink: #242e28;
  --site-muted: #62695f;
  --site-line: #cdcec3;
  --site-accent: #b74324;
  --site-grid: #c6c6bb;
  --site-input: #faf9f5;
  --site-input-focus: #fffdf8;
  --site-input-border: #a9ada1;
  --site-control-border: #91998b;
  --site-quiet-hover: #e9e9df;
  --site-button: #242e28;
  --site-button-text: #f4f2eb;
  --site-button-hover: #39463d;
  --site-object-shadow: #dedfd4;
  --site-print-shadow: #d8dbce;
  --site-hardware-shadow: #dfdfd5;
  --site-guide: #b3b5a8;
  --site-orbit: #cdcec3;
  --site-preview-shadow: #242e2866;
}

/* System appearance also works when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --site-paper: #18221d;
    --site-ink: #f4f2eb;
    --site-muted: #adbab0;
    --site-line: #3b4b40;
    --site-accent: #ed9c7e;
    --site-grid: #405247;
    --site-input: #202e25;
    --site-input-focus: #25372b;
    --site-input-border: #647967;
    --site-control-border: #788d7b;
    --site-quiet-hover: #26382c;
    --site-button: #f4f2eb;
    --site-button-text: #18221d;
    --site-button-hover: #dee5d7;
    --site-object-shadow: #0b130e;
    --site-print-shadow: #0b130e;
  --site-hardware-shadow: #0b130e;
    --site-guide: #4b6154;
    --site-orbit: #42584a;
    --site-preview-shadow: #000000b3;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --site-paper: #18221d;
  --site-ink: #f4f2eb;
  --site-muted: #adbab0;
  --site-line: #3b4b40;
  --site-accent: #ed9c7e;
  --site-grid: #405247;
  --site-input: #202e25;
  --site-input-focus: #25372b;
  --site-input-border: #647967;
  --site-control-border: #788d7b;
  --site-quiet-hover: #26382c;
  --site-button: #f4f2eb;
  --site-button-text: #18221d;
  --site-button-hover: #dee5d7;
  --site-object-shadow: #0b130e;
  --site-print-shadow: #0b130e;
  --site-hardware-shadow: #0b130e;
  --site-guide: #4b6154;
  --site-orbit: #42584a;
  --site-preview-shadow: #000000b3;
}

html { background: transparent; color: var(--site-muted); }
.site-header-actions { display: flex; align-items: center; gap: 24px; }
.site-theme-control { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--site-muted); font: 11px monospace; }
.site-theme-control[hidden] { display: none !important; }
.site-theme-label {
  white-space: nowrap;
}
.site-theme-control select {
  box-sizing: border-box; min-height: 44px; min-width: 82px; width: auto;
  border: 0; border-radius: 3px;
  background: transparent; color: var(--site-muted);
  font: 11px monospace; padding: 10px 5px; cursor: pointer;
}
.site-theme-control select:hover { color: var(--site-ink); }
.site-theme-control option { background: var(--site-paper); color: var(--site-ink); }
#nitpick-page .nl-footer { flex-wrap: wrap; align-items: center; }
.site-theme-control select:focus-visible {
  outline: 2px solid var(--site-accent); outline-offset: 4px;
}
.site-wordmark g { fill: var(--site-ink); }
.site-wordmark rect { fill: var(--site-accent); }

@media (max-width: 480px) {
  .site-header-actions { gap: 12px; }
  #nitpick-page .nl-header, .page .header { gap: 12px; }
  #nitpick-page .nl-wordmark, .page .brand svg { width: 150px; }
}