Use CodeMirror editor

assets/style.css

@@ -167,7 +167,7 @@ footer {
 .btn::after { content: "]"; color: var(--secondary); }
 .btn:hover { color: var(--primary-hover); }
 .btn-small { font-size: 0.65rem; font-weight: normal; vertical-align: middle; }
-.btn-tool { font-size: var(--font-sm); padding: 0 0.15rem; }
+.btn-tool { padding: 0 0.15rem; }
 .btn-block {
     display: flex;
     justify-content: space-between;
@@ -372,16 +372,11 @@ main > h2 {
 /* === Edit form === */
 .edit-form { display: flex; flex-direction: column; }
 body.editor-wide .page-wrap { max-width: none; }
-.editor-textarea {
-    min-height: 60vh;
-    background: var(--bg);
-    border-top: none;
-    font-family: "Iosevka Slab", monospace;
-    font-size: 0.9rem;
-    line-height: 1.6;
-    padding: var(--space-4);
-    resize: vertical;
-}
+/* CodeMirror mount. The .cm-editor visual treatment (border, bg, font, padding)
+   lives in the CM theme (editor-build/entry.js), keyed off the same :root
+   variables; this only sizes the container. */
+.editor-cm { min-height: 60vh; }
+.editor-cm .cm-editor { height: 100%; }
 
 /* === Search === */
 .search-form {
@@ -678,7 +673,7 @@ aside.sidebar:empty { display: none; }
 @media (max-width: 600px) {
     header, footer { padding: var(--space-2) var(--space-3); }
     main { padding: var(--space-4) var(--space-3); }
-    .editor-textarea { min-height: 50vh; }
+    .editor-cm { min-height: 50vh; }
     .sidebar { width: calc(100% - 1.5rem); }
     .modal-backdrop { padding: var(--space-2); align-items: flex-start; }
     .modal { max-width: none; margin-top: var(--space-4); }