.syntax-editor-host { min-width: 0; }
.syntax-editor-host .cm-editor { border: 1px solid #3b484c; border-radius: 7px; background: #101617; color: #e0e6e5; overflow: hidden; }
.syntax-editor-host .cm-editor.cm-focused { outline: 2px solid #74e2bf; outline-offset: -2px; }
.syntax-editor-host .cm-scroller { font: 14px/1.8 "JetBrains Mono", monospace; min-height: 320px; max-height: 65vh; overflow: auto; scrollbar-color: #405953 #101617; }
.syntax-editor-host .cm-content { padding: 18px 0; caret-color: #74e2bf; }
.syntax-editor-host .cm-line { padding: 0 18px; overflow-wrap: anywhere; }
.syntax-editor-host .cm-content:focus-visible { outline: none !important; }
.syntax-editor-host .cm-selectionBackground, .syntax-editor-host .cm-content ::selection { background: #31584c !important; }
.syntax-editor-host .cm-cursor { border-left-color: #74e2bf; }
.syntax-editor-host .cm-editor[aria-disabled="true"] { opacity: .65; }
.note-language { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: #9caeaf; }
.note-language label { margin: 0; }
.note-language select { color: #c8d9d4; background: #101617; border: 1px solid #3b484c; border-radius: 6px; font: inherit; min-height: 36px; padding: 5px 8px; max-width: 100%; }
.note-language .detected-language { color: #aec8bd; }
@media (pointer: coarse) { .note-language select { min-height: 44px; } }