diff --git a/src/uix/eidos/components/words/words.svelte b/src/uix/eidos/components/words/words.svelte
index e1ec37ba1..59af48adb 100644
--- a/src/uix/eidos/components/words/words.svelte
+++ b/src/uix/eidos/components/words/words.svelte
@@ -87,19 +87,22 @@
 					<WordsInspector {api} />
 				</aside>
 			{:else if inspector === 'drawer'}
-				<Button
-					data-words-drawer-toggle
-					variant="ghost"
-					size="xs"
-					iconOnly
-					rounded="md"
-					aria-label="Block settings"
-					aria-pressed={drawerOpen}
-					data-active={drawerOpen ? '' : undefined}
-					onclick={() => (drawerOpen = !drawerOpen)}
-				>
-					{#snippet icon()}<SlidersHorizontal />{/snippet}
-				</Button>
+				<!-- Open affordance only while CLOSED. The open panel carries its
+				     own X close in the header; keeping the toggle visible too made
+				     both buttons collide in the same top-right corner. -->
+				{#if !drawerOpen}
+					<Button
+						data-words-drawer-toggle
+						variant="ghost"
+						size="xs"
+						iconOnly
+						rounded="md"
+						aria-label="Block settings"
+						onclick={() => (drawerOpen = true)}
+					>
+						{#snippet icon()}<SlidersHorizontal />{/snippet}
+					</Button>
+				{/if}
 				<aside data-words-drawer-panel data-open={drawerOpen ? '' : undefined}>
 					<header data-words-drawer-panel-head>
 						<span>Block</span>
diff --git a/web/routes/uix/components/words/+page.svelte b/web/routes/uix/components/words/+page.svelte
index fa02b67aa..2dc0d6184 100644
--- a/web/routes/uix/components/words/+page.svelte
+++ b/web/routes/uix/components/words/+page.svelte
@@ -410,20 +410,42 @@
 		font-size: var(--font-size-md);
 		line-height: 1.7;
 	}
+	/* Headings mirror the editor recipe tokens (words `heading-*`): same
+	   sizes (h1 = xl, h2 = lg+4, h3 = lg), semibold weight, heading
+	   line-height + primary color, top-only rhythm — so Preview reads
+	   like Edit mode rather than a louder, bolder variant. */
+	.demo-preview :global(:first-child) {
+		margin-block-start: 0;
+	}
+	.demo-preview :global(h1),
+	.demo-preview :global(h2),
+	.demo-preview :global(h3) {
+		font-weight: var(--font-weight-semibold);
+		line-height: var(--leading-heading);
+		color: var(--color-content-primary);
+		margin-block: calc(var(--space-3) * 1.5) 0;
+	}
 	.demo-preview :global(h1) {
-		font-size: var(--font-size-2xl);
-		font-weight: 700;
-		margin-block: var(--space-5) var(--space-3);
+		font-size: var(--font-size-xl);
 	}
 	.demo-preview :global(h2) {
-		font-size: var(--font-size-xl);
-		font-weight: 700;
-		margin-block: var(--space-4) var(--space-2);
+		font-size: calc(var(--font-size-lg) + 4px);
 	}
 	.demo-preview :global(h3) {
 		font-size: var(--font-size-lg);
-		font-weight: 600;
-		margin-block: var(--space-4) var(--space-2);
+	}
+	/* Columns serialize to `<div data-words-columns><div data-words-column>` —
+	   plain divs, so without this they stack. Mirror the editor's row flex. */
+	.demo-preview :global([data-words-columns]) {
+		display: flex;
+		flex-direction: row;
+		gap: var(--space-3);
+		align-items: stretch;
+		margin-block: var(--space-3);
+	}
+	.demo-preview :global([data-words-column]) {
+		flex: 1 1 0;
+		min-inline-size: 0;
 	}
 	.demo-preview :global(p) {
 		margin-block: var(--space-3);