@import url('./palette.css');
@import url('./controls.css');
:root, :root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.appearance-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font: 500 13px/1.4 system-ui, sans-serif;
  color: inherit;
}
.appearance-control select {
  min-height: 38px;
  max-width: 125px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 8px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.appearance-control select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 600px) { .appearance-control > span { display: none; } }