:root {
  color-scheme: light dark;
  --page: light-dark(#fff, #171715);
  --ink: light-dark(#141210, #e9e5de);
  --graphite: light-dark(#6f6b66, #aba69e);
  --hair: light-dark(#d8d2c8, #45413c);
  --marble: light-dark(#f5f1ea, #23231f);
  --sinopia: light-dark(#a3452d, #d78c70);
  --veil: light-dark(rgb(255 255 255 / 90%), rgb(23 23 21 / 92%));
  background: var(--page);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.theme-control { position: relative; display: inline-flex; margin-right: 8px; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--graphite);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-status:not(:empty) {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  width: 190px;
  padding: 12px;
  border: 1px solid var(--hair);
  background: var(--page);
  color: var(--ink);
  font-size: 12px;
  text-align: left;
}