code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15em 0.35em;
  font-size: 0.9em;
}

.sourceCode {
  position: relative;
}

pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--code);
  border-radius: 8px;
}

pre code {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
}

code .kw {
  color: #cba6f7;
} /* keyword */
code .dt {
  color: #89dceb;
} /* datatype */
code .dv {
  color: #fab387;
} /* decimal value */
code .bn {
  color: #fab387;
} /* base-n number */
code .fl {
  color: #fab387;
} /* float */
code .ch {
  color: #f9e2af;
} /* character */
code .st {
  color: #a6e3a1;
} /* string */
code .co {
  color: #6c7086;
} /* comment */
code .ot {
  color: #89dceb;
} /* other */
code .fu {
  color: #89b4fa;
} /* function */
code .bu {
  color: #89b4fa;
} /* builtin */
code .op {
  color: #89dceb;
} /* operator */
code .va {
  color: #f5c2e7;
} /* variable */
code .cf {
  color: #cba6f7;
} /* control flow */
code .pp {
  color: #f38ba8;
} /* preprocessor */
code .im {
  color: #cba6f7;
} /* import */
code .at {
  color: #f9e2af;
} /* attribute */
code .do {
  color: #6c7086;
} /* documentation */
code .an {
  color: #6c7086;
} /* annotation */
code .ex {
  color: #89b4fa;
} /* extension */
code .bu {
  color: #89b4fa;
} /* builtin */
code .er {
  color: #f38ba8;
} /* error */

.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--subtext);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.copy-button:hover {
  color: var(--text);
  background: var(--border);
}