.alp-hl { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; background: #fbfcfe; }
.alp-hl > pre { position: absolute; inset: 0; margin: 0; border: 0; overflow: hidden; white-space: pre; pointer-events: none; color: #1f2328; background: transparent; }
.alp-hl > textarea { position: relative; z-index: 1; flex: 1 1 auto; white-space: pre; overflow: auto; color: transparent !important; caret-color: #1f2328; background: transparent !important; }
.alp-hl > textarea::selection { background: rgba(37, 99, 235, 0.22); color: transparent; }

.hl-delim { color: #8250df; font-weight: 600; }
.hl-kw { color: #cf222e; font-weight: 600; }
.hl-fn { color: #0550ae; }
.hl-str { color: #0a7d3b; }
.hl-var { color: #b35900; }
.hl-num { color: #0969da; }
.hl-com { color: #6e7781; font-style: italic; }
.hl-punc { color: #8250df; }

.dark .alp-hl { background: #0d1117; }
.dark .alp-hl > pre { color: #e6edf3; }
.dark .alp-hl > textarea { caret-color: #e6edf3; }
.dark .hl-delim, .dark .hl-punc { color: #d2a8ff; }
.dark .hl-kw { color: #ff7b72; }
.dark .hl-fn { color: #79c0ff; }
.dark .hl-str { color: #7ee787; }
.dark .hl-var { color: #ffa657; }
.dark .hl-num { color: #a5d6ff; }
.dark .hl-com { color: #8b949e; }