.elixir-code {
  color-scheme: dark;
  --syntax-bg: #0d1020;
  --syntax-text: #f4f2fc;
  --syntax-muted: #c1bdd2;
  --syntax-purple: #b5a1ff;
  --syntax-mint: #88e5c6;
  --syntax-gold: #f5cf86;
  --syntax-red: #ffadaf;
  color: var(--syntax-text);
  background: var(--syntax-bg);
}
.elixir-code .hljs-comment, .elixir-code .hljs-quote { color: var(--syntax-muted); font-style: normal; }
.elixir-code .hljs-keyword, .elixir-code .hljs-selector-tag, .elixir-code .hljs-literal { color: var(--syntax-purple); }
.elixir-code .hljs-string, .elixir-code .hljs-doctag, .elixir-code .hljs-regexp { color: var(--syntax-mint); }
.elixir-code .hljs-number, .elixir-code .hljs-symbol, .elixir-code .hljs-bullet { color: var(--syntax-gold); }
.elixir-code .hljs-title, .elixir-code .hljs-section, .elixir-code .hljs-built_in { color: var(--syntax-text); }
.elixir-code .hljs-meta, .elixir-code .hljs-type, .elixir-code .hljs-attr { color: var(--syntax-purple); }
.elixir-code .hljs-subst, .elixir-code .hljs-variable, .elixir-code .hljs-params { color: var(--syntax-text); }
.code-editor {
  position: relative;
  min-width: 0;
  height: calc(var(--editor-lines, 8) * 1.5em + 40px);
  border: 1px solid var(--border, #39455e);
  border-radius: 12px;
  font: 18px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-editor:focus-within { outline: 2px solid var(--syntax-purple); outline-offset: 2px; }
.code-editor > .code-editor__highlight,
.code-editor > .code-editor__input {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  padding: 20px;
  font: inherit;
  line-height: inherit;
  letter-spacing: normal;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
.code-editor > .code-editor__highlight {
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  color: inherit;
}
.code-editor__highlight > code { font: inherit; line-height: inherit; color: inherit; padding: 0; background: none; }
.code-editor > .code-editor__input {
  resize: none;
  overflow: auto;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--syntax-text);
  outline: none;
}
.code-editor__input::selection { background: rgb(181 161 255 / 30%); }
@media (max-width: 700px) { .code-editor { font-size: 16px; } }