:root {
  color-scheme: light dark;
  --bg: light-dark(#fff, #000);
  --text: light-dark(#000, #fff);
  --mid: light-dark(#ccc, #555);
  --highlight: light-dark(#ffc, #115);
  --sort: light-dark(#6bbdd6, #1b7a96);
  --link: light-dark(#0000ee, #88f);
  --visited: light-dark(#551a8b, #c8a2ff);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: sans-serif;
  margin: 1em;
}

a { color: var(--link); }
a:visited { color: var(--visited); }

h1, h2, h3 { font-weight: normal; }

hr { border: 0; border-top: 1px solid var(--mid); }

table {
  background-color: var(--mid);
  border-width: 0;
  border-spacing: 1px;
  padding: 1px;
  width: 100%;
}
th {
  text-align: left;
  background-color: var(--highlight);
  padding: 2px 4px;
}
th.sort { background: var(--sort); }
tr { background-color: var(--bg); }
td { padding: 1px 4px; }

input, select, textarea, button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--mid);
}

pre, code, tt {
  background: var(--mid);
  padding: 0 2px;
}

.diff-removed { color: light-dark(#a00, #f88); }
.diff-added   { color: light-dark(#080, #8f8); }