:root {
  color-scheme: light;
  --appearance-background: #fff;
  --appearance-muted: #626262;
  --appearance-border: #d7d7d7;
  --appearance-accent: #167a58;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --appearance-background: #1d1f21;
    --appearance-muted: #aaa;
    --appearance-border: #555;
    --appearance-accent: #2bbc8a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --appearance-background: #1d1f21;
  --appearance-muted: #aaa;
  --appearance-border: #555;
  --appearance-accent: #2bbc8a;
}
.appearance-control {
  position: absolute;
  top: 1rem;
  right: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--appearance-muted);
  font-size: .8rem;
}
.appearance-control[hidden] { display: none; }
.appearance-control select {
  min-height: 32px;
  padding: .2rem .4rem;
  border: 1px solid var(--appearance-border);
  border-radius: 3px;
  background: var(--appearance-background);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.appearance-control select:focus-visible {
  outline: 2px solid var(--appearance-accent);
  outline-offset: 2px;
}