style.css

body {
  background: lightgray;
}
.wrap {
  max-width: 64em;
  text-align: center;
  margin: auto;
}
.wrap > * {
  text-align: left;
}
.wrap h1 {
  text-align: center;
}
.wrap .ldt {
  background: white;
  min-height: 10em;
}
.wrap .ldt:first-of-type {
  max-height: 10em;
}
.wrap .ldt pre {
  background: white;
  margin: 0 0 1em 0;
}
.wrap .ldt .string {
  color: green;
}
.wrap .ldt .keyword {
  font-weight: bold;
  display: inline-block;
  margin-bottom: -1px;
}
.wrap .ldt .variable {
  color: cyan;
}
.wrap .ldt .define {
  color: blue;
}
.wrap .ldt .number {
  color: navy;
}
.wrap .ldt .comment {
  color: silver;
}
textarea {
  display: block;
  width: 100%;
  font-family: monospace;
}
button {
  padding: .3em 3em;
  margin: 1em;
}
.tab {
  position: relative;
}
.tab:before {
  content: "";
  display: inline;
  position: absolute;
  top: 0;
  border-bottom: solid 1px lightgrey;
  height: .5em;
  left: 2px;
  right: 2px;
}
.space {
  position: relative;
}
.space:before {
  content: "";
  display: inline;
  position: absolute;
  top: .5em;
  left: .25em;
  background: lightgrey;
  height: 2px;
  width: 1px;
}
.option-group {
  display: inline-block;
  vertical-align: top;
  margin-right: 1em;
}
.option-group input:not([disabled]),
.option-group input:not([disabled]) + label {
  cursor: pointer;
}