:root {
  color-scheme: light;
  --ink: #17332d;
  --ink-soft: #50645e;
  --navy: #17324d;
  --green: #176b5b;
  --green-dark: #0f5145;
  --mist: #f4f7f4;
  --paper: #ffffff;
  --wash: #e9f0ec;
  --line: #c8d6d0;
  --line-subtle: #e4ebe8;
  --danger: #a33d32;
  --focus: #075a94;
  --focus-ring: #075a94;
  --action-text: #ffffff;
  --action-disabled: #5f7971;
  --danger-surface: #f8e9e7;
  --danger-hover: #efd2ce;
  --sidebar: #edf3f0;
  --surface-hover: #f8faf8;
  --field-border: #80978d;
  --code-surface: #17324d;
  --code-text: #f4f7f4;
  --code-muted: #b9cbc5;
  --code-hover: rgba(255, 255, 255, 0.14);
  --overlay: rgba(23, 50, 77, 0.38);
  --notification-surface: #17324d;
  --notification-text: #ffffff;
  --shadow: 0 24px 60px rgba(23, 50, 77, 0.12);
  --shadow-soft: 0 3px 14px rgba(23, 50, 77, 0.04);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e2ece7;
  --ink-soft: #a9bcb3;
  --navy: #d7e7f1;
  --green: #85c9b1;
  --green-dark: #a2dbc6;
  --mist: #101b1c;
  --paper: #172628;
  --wash: #253b3b;
  --line: #395050;
  --line-subtle: #2a3e3e;
  --danger: #ffb4a9;
  --focus: #99cdec;
  --focus-ring: #99cdec;
  --action-text: #102d23;
  --action-disabled: #8aa59a;
  --danger-surface: #492d2c;
  --danger-hover: #603b37;
  --sidebar: #122022;
  --surface-hover: #203537;
  --field-border: #728f84;
  --code-surface: #0d171d;
  --code-text: #e2ece7;
  --code-muted: #a8bfb6;
  --code-hover: rgba(215, 231, 241, 0.12);
  --overlay: rgba(3, 9, 12, 0.72);
  --notification-surface: #d7e7f1;
  --notification-text: #17324d;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ink: #e2ece7;
    --ink-soft: #a9bcb3;
    --navy: #d7e7f1;
    --green: #85c9b1;
    --green-dark: #a2dbc6;
    --mist: #101b1c;
    --paper: #172628;
    --wash: #253b3b;
    --line: #395050;
    --line-subtle: #2a3e3e;
    --danger: #ffb4a9;
    --focus: #99cdec;
    --focus-ring: #99cdec;
    --action-text: #102d23;
    --action-disabled: #8aa59a;
    --danger-surface: #492d2c;
    --danger-hover: #603b37;
    --sidebar: #122022;
    --surface-hover: #203537;
    --field-border: #728f84;
    --code-surface: #0d171d;
    --code-text: #e2ece7;
    --code-muted: #a8bfb6;
    --code-hover: rgba(215, 231, 241, 0.12);
    --overlay: rgba(3, 9, 12, 0.72);
    --notification-surface: #d7e7f1;
    --notification-text: #17324d;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.16);
  }
}

.appearance-control {
  align-items: center;
  color: var(--ink-soft);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.5rem;
  white-space: nowrap;
}

.appearance-control select {
  background: var(--paper);
  border: 1px solid var(--field-border);
  border-radius: 0.5rem;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  max-width: 9rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.55rem;
  width: auto;
}

.appearance-control select:hover {
  background: var(--wash);
  border-color: var(--field-border);
}

.appearance-control select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .appearance-control select {
    border-color: ButtonText;
  }

  .appearance-control select:focus-visible {
    outline-color: Highlight;
  }
}