diff --git a/website/src/components/DiffEditorMonaco.tsx b/website/src/components/DiffEditorMonaco.tsx
index 30502db1d6ae..2bbda466f390 100644
--- a/website/src/components/DiffEditorMonaco.tsx
+++ b/website/src/components/DiffEditorMonaco.tsx
@@ -34,6 +34,9 @@ export default function DiffEditor({ documents, fallback }: DiffMonacoProps) {
     (editor: MonacoDiffEditor) => {
       handleMount(editor);
       const panes = [editor.getOriginalEditor(), editor.getModifiedEditor()];
+      // Side-by-side forces a glyph margin on the original pane; nothing
+      // renders there in this read-only diff, so it only indents the code
+      panes[0].updateOptions({ glyphMargin: false });
       const updateOffsets = () => {
         const left = editor.getContainerDomNode().getBoundingClientRect().left;
         const next = panes.map(
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 612b450ee2de..7c3e8cf842bd 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -96,6 +96,14 @@
   --pg-tab-selected: #e3e8f2;
   --pg-tab-selected-bg: var(--monoco-code-background);
 }
+/* Dark mode: the editor column sits a step above the code, darker than the
+   neutral preview headers, so the two sides read apart without a divider */
+:root[data-theme='dark']
+  .playgroundContainer:not(.endpointPlayground)
+  .playgroundTextEdit {
+  --pg-bar: hsl(229, 14%, 21%);
+  --pg-tab-hover-bg: hsl(229, 14%, 26%);
+}
 /* EndpointPlayground's right column is code, so it always uses the dark bar */
 .endpointPlayground {
   --pg-bar: hsl(229, 8%, 26%);
@@ -543,6 +551,10 @@ div.fixtureJson {
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
+/* Match the space below the last line */
+.playgroundContainer.standaloneEditor .diffLabels + .playgroundEditor {
+  padding-top: 10px;
+}
 .diffLabels > span {
   position: absolute;
   left: 0.75rem;