.chromalex-editor label{display:flex;flex-direction:column;gap:.4rem;margin:.8rem 0}
.chromalex-editor textarea{width:100%;min-height:16rem;resize:vertical;font-family:monospace;white-space:pre;tab-size:2}
.chromalex-editor pre{max-height:24rem;overflow:auto;padding:1rem;border:1px solid var(--line,#d5dce3);border-radius:.4rem}

:root {
  --chroma-keyword: #7c3aed;
  --chroma-string: #047857;
  --chroma-number: #b45309;
  --chroma-comment: #64748b;
  --chroma-operator: #be123c;
  --chroma-punctuation: #475569;
  --chroma-type: #0369a1;
  --chroma-function: #1d4ed8;
  --chroma-variable: #0f766e;
  --chroma-key: #0f766e;
  --chroma-value: #92400e;
  --chroma-section: #7c2d12;
  --chroma-prompt: #0f766e;
}
[data-theme="dark"] {
  --chroma-keyword: #c4b5fd;
  --chroma-string: #86efac;
  --chroma-number: #fcd34d;
  --chroma-comment: #94a3b8;
  --chroma-operator: #fda4af;
  --chroma-punctuation: #cbd5e1;
  --chroma-type: #7dd3fc;
  --chroma-function: #93c5fd;
  --chroma-variable: #5eead4;
  --chroma-key: #5eead4;
  --chroma-value: #fdba74;
  --chroma-section: #fbbf24;
  --chroma-prompt: #5eead4;
}
.chromalex {
  color: inherit;
  white-space: inherit;
}
.chroma-keyword { color: var(--chroma-keyword); font-weight: 700; }
.chroma-string { color: var(--chroma-string); }
.chroma-number { color: var(--chroma-number); }
.chroma-comment { color: var(--chroma-comment); font-style: italic; }
.chroma-operator { color: var(--chroma-operator); font-weight: 650; }
.chroma-punctuation { color: var(--chroma-punctuation); }
.chroma-type { color: var(--chroma-type); font-weight: 650; }
.chroma-function { color: var(--chroma-function); font-weight: 650; }
.chroma-variable { color: var(--chroma-variable); }
.chroma-key { color: var(--chroma-key); font-weight: 650; }
.chroma-value { color: var(--chroma-value); }
.chroma-section { color: var(--chroma-section); font-weight: 700; }
.chroma-prompt { color: var(--chroma-prompt); font-weight: 700; }
.chroma-error {
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
}