:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --muted: #bdbdbd;
  --line: #2a2a2a;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.25;

  /* "Non-antialiased" vibe (browser-dependent). */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

a,
a:visited {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1rem 0;
}

code,
pre {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 0;
}

pre {
  padding: 0.75rem;
  overflow: auto;
}

input,
textarea,
select,
button {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.5rem 0.6rem;
  font: inherit;
}

button {
  cursor: pointer;
}

button:hover {
  border-color: #4a4a4a;
}

*:focus {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

small,
.muted {
  color: var(--muted);
}