:root { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.tt {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--surface));
  color: hsl(var(--muted));
  cursor: pointer;
  font: inherit;
}

.tt[hidden] { display: none; }
.tt:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.tt:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
.tt svg { display: none; width: 16px; height: 16px; }
.tt[data-theme-mode="system"] .ic-system,
.tt[data-theme-mode="light"] .ic-sun,
.tt[data-theme-mode="dark"] .ic-moon { display: block; }