:root {
  color-scheme: light;
  --surface: #f5f7f2;
  --surface-raised: #ffffff;
  --surface-soft: #e8efe5;
  --surface-input: #f5f8f2;
  --surface-glass: #ffffffed;
  --surface-glass-alt: #f1f6eef2;
  --text: #192d22;
  --text-secondary: #3d5846;
  --muted: #536b5b;
  --subtle: #566c5c;
  --accent: #24633e;
  --accent-hover: #194e2f;
  --on-accent: #ffffff;
  --accent-soft: #24633e0e;
  --border: #cbd8cc;
  --border-strong: #8ba68f;
  --hover: #24633e0b;
  --ambient: #a9cba530;
  --shadow: #24422e15;
  --backdrop: #e6eee4d9;
  --warning: #8d540e;
  --success: #287044;
  --scene-background: #f5f7f2;
  --scene-status-background: rgba(255, 255, 255, 0.85);
  --scene-status-text: #157a52;
  --logo-filter: brightness(0);
  --green: var(--accent);
  --line: var(--border);
  background: var(--surface);
  color: var(--text);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface: #090e0c;
  --surface-raised: #101a14;
  --surface-soft: #192c20;
  --surface-input: #0c1710;
  --surface-glass: #14221aed;
  --surface-glass-alt: #0f1c16f2;
  --text: #f2f6f0;
  --text-secondary: #b6c9bd;
  --muted: #93ab9b;
  --subtle: #859e8d;
  --accent: #adf9b6;
  --accent-hover: #d0ffd5;
  --on-accent: #102d19;
  --accent-soft: #adf9b615;
  --border: #93be9f2e;
  --border-strong: #93be9f70;
  --hover: #ffffff09;
  --ambient: #2b55362e;
  --shadow: #00000055;
  --backdrop: #040905e8;
  --warning: #e7c185;
  --success: #98e6ad;
  --scene-background: #000000;
  --scene-status-background: rgba(0, 0, 0, 0.6);
  --scene-status-text: #5fcc93;
  --logo-filter: none;
}
button.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font:
    500 11px Fustat,
    Arial,
    sans-serif;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}
button.theme-switch:hover {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--hover);
}
button.theme-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.theme-switch svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
:root[data-theme='dark'] .theme-moon,
:root:not([data-theme='dark']) .theme-sun {
  display: none;
}
img[src$='logo.svg'] {
  filter: var(--logo-filter);
}
@media (max-width: 700px) {
  button.theme-switch {
    padding: 9px;
    width: 36px;
  }
  .theme-switch .theme-label {
    display: none;
  }
}