💄 the page hovers over the editor.

src/renderer/App.tsx

@@ -225,6 +225,7 @@ export default function App(): JSX.Element {
           <>
             <AnalysisToolbar />
             <div className="editor-body">
+              <div className="page-backdrop" />
               <DocumentOutline />
               <MarkdownEditor />
             </div>

src/renderer/components/Editor/DocumentOutline.css

@@ -8,6 +8,8 @@
   flex-direction: column;
   overflow: hidden;
   transition: width 0.2s ease, border-right-width 0.2s ease;
+  position: relative;
+  z-index: 1;
 }
 
 .outline-panel--open {

src/renderer/components/Editor/Editor.css

@@ -6,6 +6,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  z-index: 1;
 }
 
 .codemirror-host {

src/renderer/components/Editor/MarkdownEditor.tsx

@@ -489,8 +489,8 @@ const paragraphIndentPlugin = ViewPlugin.fromClass(
 
 function buildTheme(fontSize: number, dark: boolean, focusMode = false): ReturnType<typeof EditorView.theme> {
   const displaySize = focusMode ? Math.max(fontSize + 3, 18) : fontSize
-  const maxWidth = focusMode ? '92vw' : '740px'
+  const maxWidth = '100%'
-  const padding = focusMode ? '40px 4vw' : '16px 20px'
+  const padding = focusMode ? '32px 108px' : '36px 96px'
   const lineHeight = focusMode ? '1.9' : '1.8'
   return EditorView.theme(
   {
@@ -503,13 +503,13 @@ function buildTheme(fontSize: number, dark: boolean, focusMode = false): ReturnT
     '.cm-scroller': {
       fontFamily: 'var(--font-serif)',
       lineHeight,
-      overflow: 'auto'
+      overflow: 'auto',
     },
     '.cm-content': {
       padding,
       maxWidth,
       margin: '0 auto',
-      caretColor: 'var(--accent)'
+      caretColor: 'var(--accent)',
     },
     '.cm-cursor': { borderLeftColor: 'var(--accent)' },
     '.cm-selectionBackground': { backgroundColor: 'var(--active-bg)' },

src/renderer/components/Home/HomeScreen.css

@@ -5,6 +5,7 @@
   height: 100%;
   overflow-y: auto;
   padding: 80px 40px 60px;
+  background: var(--page-bg);
 }
 
 .home-content {

src/renderer/styles/app.css

@@ -212,7 +212,7 @@
   grid-row: 2;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
   background: var(--editor-bg);
 }
 
@@ -221,8 +221,22 @@
   flex: 1;
   display: flex;
   flex-direction: row;
-  overflow: hidden;
+  overflow: visible;
   min-height: 0;
+  position: relative;
+}
+
+/* ─── Page backdrop (fixed paper surface, text scrolls over it) ── */
+.page-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--page-bg);
+  box-shadow: 0 0 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
+  pointer-events: none;
+  z-index: 0;
 }
 
 /* ─── Chat area ────────────────────────────────────────────────── */

src/renderer/styles/global.css

@@ -11,7 +11,8 @@
   --bg-base:        #131110;
   --sidebar-bg:     #0f0e0c;
   --toolbar-bg:     #161412;
-  --editor-bg:      #131110;
+  --editor-bg:      #0c0b09;
+  --page-bg:        #1a1714;
   --message-bg:     #1c1a17;
   --user-message-bg:#1e1c17;
   --input-bg:       #1c1a17;
@@ -60,6 +61,9 @@ html.light {
 
   --accent:         #7a5c28;
   --accent-hover:   #9a7030;
+
+  --editor-bg:      #cfc4a8;
+  --page-bg:        #f5ecd8;
 }
 
 /* ─── Base ─────────────────────────────────────────────────────── */