body {
  --hue: 220;
  --sat: 32%;
  --main-bg: hsl(var(--hue), var(--sat), 16%);
  --input-bg: hsl(var(--hue), var(--sat), 8%);
  --alt-bg: hsl(var(--hue), var(--sat), 13%);
  --border: hsl(var(--hue), var(--sat), 30%);
  --accent: hsl(var(--hue), var(--sat), 75%);
  --text-hue: 39;
  --text-sat: 70%;
  --text: hsl(var(--text-hue), var(--text-sat), 88%);
  --debug: hsl(290, var(--text-sat), 55%);
  --info: hsl(215, var(--text-sat), 55%);
  --warning: hsl(45, var(--text-sat), 55%);
  --error: hsl(355, var(--text-sat), 55%);
  font-family: Helvetica, Arial, sans-serif;
  background: var(--main-bg);
  color: var(--text);
  max-width: 60em;
  margin: 2em auto;
  > * {
    margin: 0 1em;
  }
}
textarea,
pre {
  padding: 0.8em 1em;
}
a {
  color: var(--accent);
  &:hover {
    color: hsl(var(--hue), var(--sat), 90%);
  }
}
textarea,
select {
  color: inherit;
  &:focus {
    border-color: var(--accent);
    outline: none;
  }
}
textarea {
  background: var(--input-bg);
  resize: vertical;
  border: solid 1px var(--border);
}
pre {
  margin: 0;
  white-space: pre-wrap;
}
select {
  background: var(--input-bg);
  border: solid 1px var(--border);
  padding: 0.5em 1em;
}
body[data-compiling] {
  & .output {
    opacity: 0.5;
  }
}
.main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto repeat(3, minmax(2.5em, auto));
  gap: 1em 1em;
  > h2 {
    text-align: right;
  }
  > * {
    margin: 0;
  }
}
.header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
  > h1 {
    padding-left: 3em;
    margin: 0;
  }
}
#input,
#examples,
.output {
  border-radius: 0.3em;
}
.output {
  border: solid 1px var(--border);
  background: var(--alt-bg);
  > :not(:last-child) {
    border-bottom: solid 1px var(--border);
  }
}
#json {
  padding: 1em;
}
.diag-debug {
  --diag-colour: var(--debug);
}
.diag-info {
  --diag-colour: var(--info);
}
.diag-warning {
  --diag-colour: var(--warning);
}
.diag-error {
  --diag-colour: var(--error);
}
[class^="ann-"] {
  color: var(--diag-colour);
  font-weight: bold;
}