diff --git a/frontend/src/features/notes/NoteEditor.jsx b/frontend/src/features/notes/NoteEditor.jsx
index 09be154..eb24bbd 100644
--- a/frontend/src/features/notes/NoteEditor.jsx
+++ b/frontend/src/features/notes/NoteEditor.jsx
@@ -100,10 +100,6 @@ export function NoteEditor({
       muted: dark ? "#8b949e" : "#656d76",
       active: dark ? "#388bfd" : "#0969da",
       faint: dark ? "#484f58" : "#afb8c1",
-      /* A shade apart from the desk it lies on — enough to read as a surface,
-         not so much that it glares in a dark room. */
-      pageBg: dark ? "#131922" : "#ffffff",
-      desk: dark ? "#0b0f14" : "#e9ecef",
     }),
     [dark]
   );
@@ -502,7 +498,11 @@ export function NoteEditor({
          * width a property of the window, which is what it always looked like. */
         flex: 1,
         minWidth: 0,
-        background: isMobileViewport ? T.pageBg : T.desk,
+        background: isMobileViewport
+          ? T.bg
+          : dark
+            ? "linear-gradient(180deg,#0f141b 0%,#0d1117 60%)"
+            : "linear-gradient(180deg,#f8fafd 0%,#eef3f8 70%)",
       }}
     >
       {/* Main toolbar */}
@@ -716,65 +716,41 @@ export function NoteEditor({
             padding: isMobileViewport ? "10px 0 18px" : "18px 0 28px",
           }}
         >
-          {/* The page is a surface, always.
-              With the text capped at a readable measure and nothing behind it,
-              the right 40% of the pane was simply void. A page gives that space
-              a meaning — it is the margin — and it is what lets "page 2" show as
-              a page rather than as a line across an empty field. */}
           <div
             style={{
               position: "relative",
-              width: stageSize.w,
-              maxWidth: "100%",
-              minHeight: stageSize.h,
-              margin: isMobileViewport ? "0 auto" : "0 0 0 28px",
-              background: T.pageBg,
-              border: isMobileViewport ? "none" : `1px solid ${T.border}`,
-              borderRadius: isMobileViewport ? 0 : 6,
-              boxShadow: isMobileViewport ? "none" : "0 6px 20px rgba(0,0,0,0.16)",
+              // Without a page the column is as wide as it needs to be to read
+              // comfortably, and centred; with one it is the canvas's page.
+              // The text caps its own width in the stylesheet, so this is only
+              // the page when there is one.
+              width: needsPage ? stageSize.w : "100%",
+              minHeight: needsPage ? stageSize.h : undefined,
+              margin: "0 auto",
+              background: needsPage ? T.bg : "transparent",
+              border: needsPage && !isMobileViewport ? `1px solid ${T.border}` : "none",
+              borderRadius: needsPage && !isMobileViewport ? 14 : 0,
+              boxShadow: needsPage && !isMobileViewport ? "0 16px 36px rgba(0,0,0,0.14)" : "none",
             }}
           >
-            {/* Where one page ends and the next begins.
-                A band rather than a hairline, with the new page's number set in
-                the margin — the count in the toolbar should correspond to
-                something that reads as a page, not to a line across a field.
-                The text flows on through: the note is one document, and a real
-                page break would mean laying the text out ourselves. */}
-            {Array.from({ length: Math.max(0, pages.count - 1) }, (_, i) => (
+            {/* A hairline where each page ends, so the count in the toolbar
+                corresponds to something you can see. Drawn behind the text and
+                deaf to the pointer — it marks the paper, it is not part of it. */}
+            {pages.count > 1 && mode === "text" && (
               <div
-                key={i}
                 aria-hidden
-                data-page-break={i + 2}
                 style={{
                   position: "absolute",
-                  left: 0,
-                  right: 0,
-                  top: stageSize.h * (i + 1),
-                  height: 0,
+                  inset: 0,
                   pointerEvents: "none",
-                  borderTop: `1px dashed ${T.border}`,
+                  backgroundImage: `linear-gradient(to bottom, transparent calc(100% - 1px), ${T.border} 100%)`,
+                  backgroundSize: `100% ${stageSize.h}px`,
+                  opacity: 0.55,
                 }}
-              >
-                <span
-                  style={{
-                    position: "absolute",
-                    right: 14,
-                    top: 8,
-                    fontSize: 10.5,
-                    letterSpacing: 0.5,
-                    color: T.faint,
-                    background: T.pageBg,
-                    padding: "0 4px",
-                  }}
-                >
-                  Page {i + 2}
-                </span>
-              </div>
-            ))}
-
+              />
+            )}
             <div
               style={{
-                minHeight: stageSize.h,
+                minHeight: needsPage ? stageSize.h : undefined,
                 width: "100%",
                 pointerEvents: mode === "text" ? "auto" : "none",
               }}
@@ -783,7 +759,7 @@ export function NoteEditor({
                 editor={textEditor}
                 dark={dark}
                 font={noteFont}
-                minHeight={stageSize.h}
+                minHeight={needsPage ? stageSize.h : 0}
                 onOpenNote={onOpenNote}
                 resolveLinkLabel={resolveLinkLabel}
               />