.code {
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: auto;
  border-radius: 6px;
  counter-reset: line;
  line-break: strict;
}

.code code {
  display: flex;
  flex-direction: column;
}

.code code > span {
  display: block;
  counter-increment: line;
}

.code code > span::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  text-align: right;
  color: #666;
  user-select: none;
}

#theme-select {
  border: none;
  background-color: var(--main-bg);
  color: inherit;
  cursor: pointer;
  color: var(--code-string);
}

.code.json span.string { color: var(--code-string); }
.code.json span.bracket { color: var(--code-bracket); }
.code.json span.brace { color: var(--code-brace); }
.code.json span.key { color: var(--code-key); }
.code.json span.colon { color: var(--code-colon); }
.code.json span.double-quote { color: var(--code-double-quote); }
.code.json span.double-quote.alt { color: var(--code-double-quote-alt); }