diff --git a/l4d2web/l4d2web/static/css/editor.css b/l4d2web/l4d2web/static/css/editor.css
new file mode 100644
index 0000000..f329423
--- /dev/null
+++ b/l4d2web/l4d2web/static/css/editor.css
@@ -0,0 +1,19 @@
+/* Editor (CodeMirror 6) shell styling. Token / gutter / selection colors
+ * are set inside cm6 themes (themes.js) bound to the --cm-* variables
+ * in tokens.css; this file scopes the editor container's chrome to
+ * match the rest of the app. */
+
+.cm-editor {
+  border: var(--line);
+  border-radius: var(--radius-s);
+  min-height: 8em;
+}
+
+.cm-editor.cm-focused {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+
+textarea[data-editor-language] + .cm-editor {
+  width: 100%;
+}
diff --git a/l4d2web/l4d2web/static/css/tokens.css b/l4d2web/l4d2web/static/css/tokens.css
index 023670b..d69823d 100644
--- a/l4d2web/l4d2web/static/css/tokens.css
+++ b/l4d2web/l4d2web/static/css/tokens.css
@@ -33,6 +33,19 @@
      background to read. Don't redefine these in the dark-mode block. */
   --color-button-primary: #1d4ed8;
   --color-button-danger: #b42318;
+
+  /* Editor (CodeMirror 6) palette — light. */
+  --syntax-keyword: #cc4488;
+  --syntax-string:  #2f8b3a;
+  --syntax-comment: #888;
+  --syntax-number:  #884488;
+  --cm-bg: var(--color-surface);
+  --cm-fg: var(--color-text);
+  --cm-selection: rgba(60, 130, 220, 0.2);
+  --cm-keyword: var(--syntax-keyword);
+  --cm-string:  var(--syntax-string);
+  --cm-comment: var(--syntax-comment);
+  --cm-number:  var(--syntax-number);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,6 +64,14 @@
     --color-focus: #bfdbfe;
     --color-log-bg: #111827;
     --color-log-text: #e5e7eb;
+
+    /* Editor (CodeMirror 6) palette — dark overrides. --cm-bg / --cm-fg
+       cascade automatically through --color-surface / --color-text. */
+    --syntax-keyword: #ff80c0;
+    --syntax-string:  #87d96a;
+    --syntax-comment: #888;
+    --syntax-number:  #c890ff;
+    --cm-selection: rgba(120, 170, 255, 0.25);
   }
 }