diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte
index e7f5a67..42a0bbe 100644
--- a/src/lib/components/Preview.svelte
+++ b/src/lib/components/Preview.svelte
@@ -188,7 +188,7 @@
         class="stage"
         class:paper={store.theme !== 'dark'}
         class:animate
-        style="transform: translate({pan.x}px, {pan.y}px) scale({zoom});"
+        style="transform: translate(-50%, -50%) translate({pan.x}px, {pan.y}px) scale({zoom});"
       >
         {@html svg}
       </div>
@@ -263,6 +263,9 @@
   }
   .canvas {
     height: 100%;
+    /* `position: relative` makes this the containing block for the absolutely
+       centred .stage; the grid still centres the empty/error messages. */
+    position: relative;
     display: grid;
     place-items: center;
     overflow: hidden;
@@ -274,6 +277,12 @@
     cursor: grabbing;
   }
   .stage {
+    /* Centre via the canvas centre regardless of the (unscaled) stage size —
+       grid centring left an oversized stage anchored off to the right. The
+       transform prepends translate(-50%, -50%) to recentre it. */
+    position: absolute;
+    left: 50%;
+    top: 50%;
     transform-origin: center center;
     /* Promote to its own compositor layer so panning doesn't ghost/stutter.
        No transition by default → drag-pan and pinch track the input 1:1. */