body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
pre {
  background-color: #eee;
  white-space: pre-line;
  padding: 16px;
  line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0d1117;
    color: #ccc;
  }
  input, textarea {
    background-color: #aaa;
  }
  pre {
    background-color: #333;
    color: #eee;
  }
}
@media (min-width: 640px) {
  #container {
    display: grid;
    grid-template-areas:
      "value code"
      "algo code"
      "display code"
      "length length"
      "txt txt";
    grid-template-columns: 300px auto;
    grid-gap: 20px;
  }
}
#input_value { grid-area: value; }
#input_algo { grid-area: algo; }
#input_display { grid-area: display; }
#output_code { grid-area: code; padding: 10px; }
#output_text { grid-area: txt; }
#output_length { grid-area: length; }