code {
  font-family: var(--font-code);
  color: var(--color-code-quaternary);
}

pre > code {
  color: var(--color-code-primary);
  line-height: 1.4em;
}

code .token.keyword {
  font-weight: bold;
  color: var(--color-code-tertiary);
}

code .token.class-name,
code .token.constant {
  color: var(--color-code-quaternary);
}

code .token.function {
  color: var(--color-code-quaternary);
}

code .token.operator,
code .token.punctuation {
  color: var(--color-code-tertiary);
}

code .token.comment {
  color: var(--color-code-deemphasized);
}

code .code-line.line-number::before {
  content: attr(line);
  display: inline-block;
  width: 2em;
  text-align: right;
  margin-right: 1em;
  padding-right: 1em;
  color: var(--color-code-deemphasized);
}

.code-line.line-number:first-child::before {
  padding-top: 1em;
}

.code-line.line-number:last-child::before {
  padding-bottom: 1em;
}