html {
  color-scheme: dark;
  font-size: clamp(12px, 3svw, 20px);
}

body {
  color: color-mix(in oklab, CanvasText, green 10%);
  font-family: monospace;
  line-height: 1.5;
  max-width: 80ch;
  margin-inline: auto;
  padding-inline: 1em;
}

hr {
  border: thin solid;
  margin-block: 1lh;
}

code {
  background: color-mix(in oklab, Canvas, CanvasText 10%);
  font-style: italic;
  padding-inline: 0.5em;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
}

input[type="range"] {
  vertical-align: middle;
  margin-inline: 1em;
}

button {
    padding: 0.5em 1em;
    margin-block: 0.25lh;
    font-weight: bold;
}


#log {
    list-style: none;
}
#log > .command {
    list-style: '> ';
    border-bottom: thin dashed;
}

#log > li {
    margin-bottom: 1lh;
}

footer {
  margin-top: 5lh;
}