Constant CODE_EDITOR_STYLE 

pub const CODE_EDITOR_STYLE: &str = r#"
.code-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--studio-surface, #0f1419);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Math sets its text in Logos Math Mono, whose ligatures draw the kernel's ASCII spellings as the
   symbols they stand for (forall as ∀, fun as λ, -> as →). Both layers shape the same glyphs, so
   the caret, selection and clicks stay on the text; the file stays ASCII. */
@font-face {
    font-family: 'Logos Math Mono';
    src: url('/assets/fonts/LogosMathMono.woff2') format('woff2');
    font-display: swap;
}
.code-editor.lang-vernacular .code-editor-textarea,
.code-editor.lang-vernacular .code-editor-highlight {
    font-family: 'Logos Math Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-variant-ligatures: contextual;
}

.code-editor-input {
    position: relative;
    flex: 1;
    min-height: 200px;
}

.code-editor-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* The host's inset, and room to scroll the last line up the editor — which the Studio
       declines, ending every column's scroll at its last line. */
    padding: var(--studio-inset, 16px);
    padding-bottom: var(--editor-overscroll, 50%);
    margin: 0;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    tab-size: 4;
    background: transparent;
    color: transparent;
    caret-color: #667eea;
    border: none;
    outline: none;
    resize: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: auto;
    z-index: 2;
    box-sizing: border-box;
}

.code-editor-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* The host's inset, and room to scroll the last line up the editor — which the Studio
       declines, ending every column's scroll at its last line. */
    padding: var(--studio-inset, 16px);
    padding-bottom: var(--editor-overscroll, 50%);
    margin: 0;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    tab-size: 4;
    color: #e8eaed;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: auto;
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
    /* Hide scrollbar but keep scroll functionality for sync */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.code-editor-highlight::-webkit-scrollbar {
    display: none;
}

/* Syntax highlighting colors - no font-weight/style changes to keep heights identical */
.tok-keyword { color: #c678dd; }
.tok-type { color: #e5c07b; }
.tok-string { color: #98c379; }
.tok-number { color: #d19a66; }
.tok-comment { color: var(--studio-text-secondary, #9ca3af); }
.tok-operator { color: #56b6c2; }
.tok-punctuation { color: #abb2bf; }
.tok-identifier { color: #e8eaed; }
.tok-builtin { color: #61afef; }

/* A hover hint in VS Code's manner: a quiet panel over the code, never in the pointer's way.
   Its parts (a problem and its source, code, prose, lists, rules) sit one even gap apart, and
   nothing inside adds space of its own. */
.hover-hint {
    position: fixed;
    z-index: 1000;
    max-width: 520px;
    max-height: 40vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
    background: #252526;
    border: 1px solid #454545;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    color: #cccccc;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Problems, VS Code's way: a wavy underline in the severity's colour; unused code faded. */
.sq-error, .sq-warning, .sq-info {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
    text-underline-offset: 3px;
}
.sq-error { text-decoration-color: #f14c4c; }
.sq-warning { text-decoration-color: #cca700; }
.sq-info { text-decoration-color: #3794ff; }
.sq-hint {
    text-decoration: underline dotted rgba(238, 238, 238, 0.55);
    text-underline-offset: 3px;
}
.sq-unnecessary { opacity: 0.6; }

.hover-hint .hint-problem { display: flex; flex-direction: column; gap: 4px; }
.hover-hint > *, .hover-hint .hint-problem > * { flex: none; margin: 0; }
.hover-hint .hint-source { color: #9ca3af; font-size: 12px; }
.hover-hint a { color: #3794ff; text-decoration: none; }
.hover-hint a:hover { text-decoration: underline; }
.hover-hint hr { border: none; border-top: 1px solid #454545; margin: 0 -8px; }
.hover-hint strong { color: #e8eaed; }
.hover-hint code { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; background: rgba(255, 255, 255, 0.06); padding: 0 3px; border-radius: 3px; }
.hover-hint pre { padding: 4px 8px; background: #1e1e1e; border-radius: 3px; overflow-x: auto; }
.hover-hint pre code { background: none; padding: 0; }
.hover-hint ul { padding-left: 18px; }

/* Mobile optimizations */
@media (max-width: 768px) {
    .code-editor-textarea,
    .code-editor-highlight {
        font-size: 16px; /* Prevent iOS zoom */
        padding: var(--studio-inset, 12px);
    }
}
"#;

The editor’s stylesheet: inlined ahead of each editor, unless its host places it once ahead of its own markup (see CodeEditor’s stylesheet).