diff --git a/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css b/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css
index 3bf03f9..c14f08e 100644
--- a/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css
@@ -1,3 +1,42 @@
+/* Encapsulate Milkdown editor wrapper & ProseMirror container */
+::deep .milkdown-editor-wrapper,
+::deep .crepe,
+::deep .milkdown,
+::deep .milkdown .editor {
+    background-color: var(--bg-base) !important;
+    background: var(--bg-base) !important;
+    color: var(--text-main) !important;
+}
+
+/* Headings and inline typography styles */
+::deep .milkdown .editor h1,
+::deep .crepe h1 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1rem !important;
+    font-size: 2rem !important;
+    font-weight: 700 !important;
+    color: var(--text-main) !important;
+}
+
+::deep .milkdown .editor h2,
+::deep .crepe h2 {
+    margin-top: 1.25rem !important;
+    margin-bottom: 0.75rem !important;
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+    color: var(--text-main) !important;
+}
+
+::deep .milkdown .editor code,
+::deep .crepe code {
+    background-color: rgba(16, 185, 129, 0.1) !important;
+    color: var(--accent) !important;
+    padding: 0.2rem 0.4rem !important;
+    border-radius: var(--radius-sm, 4px) !important;
+    font-family: 'Azeret Mono', monospace !important;
+    font-size: 0.85em !important;
+}
+
 .creator-test-container {
     max-width: 1000px;
     margin: 2rem auto;
@@ -83,22 +122,23 @@
 }
 
 .pre-wrapper {
-    background-color: #121214 !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    background: #121214;
+    border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-md);
     padding: 1.2rem;
     max-height: 300px;
     overflow-y: auto;
+    overflow-x: auto;
 }
 
 .pre-wrapper pre {
     margin: 0;
     white-space: pre-wrap;
     word-break: break-all;
-    font-family: 'Azeret Mono', monospace !important;
-    font-size: 0.9rem;
+    font-family: 'Azeret Mono', SFMono-Regular, Consolas, Menlo, monospace;
+    font-size: 0.85rem;
     color: #e4e4e7;
-    line-height: 1.5;
+    line-height: 1.6;
 }
 
 .placeholder {
@@ -106,31 +146,3 @@
     font-size: 0.9rem;
     font-style: italic;
 }
-
-/* 2. Deep target Crepe/ProseMirror to use --bg-base and --text-main */
-::deep .crepe,
-::deep .milkdown,
-::deep .ProseMirror {
-    background-color: var(--bg-base) !important;
-    color: var(--text-main) !important;
-}
-
-/* 3. Deep target heading margins and inline code elements */
-::deep .crepe h1,
-::deep .crepe h2,
-::deep .ProseMirror h1,
-::deep .ProseMirror h2 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 0.75rem !important;
-    color: var(--text-main) !important;
-}
-
-::deep .crepe code,
-::deep .ProseMirror code {
-    background-color: rgba(16, 185, 129, 0.1) !important;
-    color: var(--accent) !important;
-    padding: 0.2rem 0.4rem !important;
-    border-radius: 4px !important;
-    font-family: 'Azeret Mono', monospace !important;
-    font-size: 0.9em !important;
-}
diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css
index ebb1893..f9b834e 100644
--- a/src/NexusReader.UI.Shared/wwwroot/app.css
+++ b/src/NexusReader.UI.Shared/wwwroot/app.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Azeret+Mono:wght@300;400;500;600&display=swap');
 
 :root {
     /* Semantic design tokens - default to Modern Deep Dark (Dark Mode) */