.CodeMirror {
    height: 22rem;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.8rem;
    background: var(--pico-form-element-background-color);
    color: var(--pico-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    margin-bottom: var(--pico-spacing);
}

.CodeMirror-focused {
    border-color: var(--pico-form-element-focus-color);
}

.CodeMirror-gutters {
    background: var(--pico-code-background-color);
    border-right: 1px solid var(--pico-muted-border-color);
}

.CodeMirror-linenumber { color: var(--pico-muted-color); }
.CodeMirror-cursor { border-left-color: var(--pico-color); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: var(--pico-text-selection-color); }

/* Keep the UCL mode's token colours legible in both light and dark themes. */
.cm-s-default .cm-comment { color: var(--pico-muted-color); }
.cm-s-default .cm-string { color: var(--pico-ins-color); }
.cm-s-default .cm-keyword, .cm-s-default .cm-builtin { color: var(--pico-primary); }
.cm-s-default .cm-number { color: var(--pico-del-color); }
.cm-s-default .cm-variable-2, .cm-s-default .cm-variable-3 { color: var(--pico-secondary); }
.cm-s-default .cm-string-2 { color: var(--pico-ins-color); font-weight: bold; }
.cm-s-default .cm-keyword { font-weight: bold; }
.cm-s-default .cm-def { color: var(--pico-color); font-style: italic; }
.cm-s-default .cm-operator { color: var(--pico-muted-color); }

.toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: var(--pico-spacing);
}

.toolbar button { margin-bottom: 0; }

#share { margin-left: auto; }

#share-dialog [role="group"] { margin-bottom: 0.5rem; }
#share-url { font-family: var(--pico-font-family-monospace); font-size: 0.85rem; }

#output {
    min-height: 10rem;
    max-height: 28rem;
    overflow: auto;
    padding: var(--pico-spacing);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#output .error { color: var(--pico-del-color); }

#message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}