diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx
index 49d9b7f..60d082b 100644
--- a/docker/frontend/src/App.tsx
+++ b/docker/frontend/src/App.tsx
@@ -675,7 +675,10 @@ export function Workspace() {
   );
 
   useEffect(() => {
-    if (!engine || !previewBytes) return;
+    // While the viewfinder is up it grades the camera's frames with this very
+    // recipe, so a preview behind it would only compete for the same renderer —
+    // and the user is watching the live one. It comes back with the camera.
+    if (!engine || !previewBytes || shooting) return;
     const token = ++renderToken.current;
     const timer = setTimeout(async () => {
       setBusy(t('act.exporting'));
@@ -730,7 +733,7 @@ export function Workspace() {
     }, PREVIEW_DEBOUNCE_MS);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [engine, previewBytes, recipe, frameId, cropEditing, cropLive, cropRect, rotation, straighten, flipH, flipV, useGeotag, gpsInfo, gpsStyle, markOn, markText, markStyle, comparing]);
+  }, [engine, previewBytes, recipe, frameId, cropEditing, cropLive, cropRect, rotation, straighten, flipH, flipV, useGeotag, gpsInfo, gpsStyle, markOn, markText, markStyle, comparing, shooting]);
 
   // The source copy behind previewBytes, re-made only when previewMax moves:
   // applying a crop upgrades it, CANCEL/UNDO brings the 1600px one back.
@@ -3215,7 +3218,12 @@ export function Workspace() {
           ) : null}
         </div>
 
-        <ImageStage
+        {/* The stage's place in the workspace. The viewfinder covers the stage
+            while it is open, and nothing else: the rail and the columns stay
+            where they are, so a slider moves the look on the LIVE frames — the
+            loop reads the recipe again for every one of them. */}
+        <div className="stage-slot">
+          <ImageStage
           previewUrl={previewUrl}
           // Nothing to show until the neutral render lands: the file itself is
           // the wrong geometry the moment the photo has been turned or cropped.
@@ -3227,7 +3235,11 @@ export function Workspace() {
           peek={peek}
           onPeek={setPeek}
           onFile={(file) => void loadFile(file)}
-          onCamera={cameraSupported() ? () => setShooting(true) : undefined}
+          onCamera={
+            // PRO, like the frames and the geotag: the button is there for
+            // everyone and the click says why when it is not theirs to open.
+            cameraSupported() ? () => (pro ? setShooting(true) : promptPro()) : undefined
+          }
           cropEditing={cropEditing}
           cropRect={cropRect}
           cropWH={cropWH}
@@ -3318,7 +3330,22 @@ export function Workspace() {
               />
             ) : null
           }
-        />
+          />
+          {shooting && engine ? (
+            <CameraView
+              recipe={recipe}
+              // A crop being framed is not committed, so the live view composes
+              // on the bare photo — the geometry the stage behind it uses.
+              frameId={cropEditing ? 'none' : frameId}
+              options={stageOptions}
+              useGeotag={useGeotag}
+              gpsInfo={gpsInfo}
+              assets={engine.assets}
+              onShot={takeShot}
+              onClose={() => setShooting(false)}
+            />
+          ) : null}
+        </div>
       </div>
 
       {naming === 'recipe' ? (
@@ -3369,21 +3396,6 @@ export function Workspace() {
         />
       ) : null}
 
-      {shooting && engine ? (
-        <CameraView
-          recipe={recipe}
-          // A crop being framed is not committed, so the live view composes on
-          // the bare photo — exactly the geometry the preview behind it uses.
-          frameId={cropEditing ? 'none' : frameId}
-          options={stageOptions}
-          useGeotag={useGeotag}
-          gpsInfo={gpsInfo}
-          assets={engine.assets}
-          onShot={takeShot}
-          onClose={() => setShooting(false)}
-        />
-      ) : null}
-
       {choosingExport ? (
         <ExportModal
           longest={editedLongest}
diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 829b7d4..a1f954d 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -717,13 +717,19 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
 .stage .toolbar .dims { font-family: var(--mono); white-space: nowrap; }
 .err { color: var(--danger); font-size: 12px; max-width: 520px; text-align: center; }
 
+/* The stage and, over it, the live viewfinder: the slot they share in the
+   workspace. The columns beside it are the app's own — a slider there moves the
+   look on the frames the camera is grading right now. */
+.stage-slot { flex: 1 1 auto; min-width: 0; display: flex; position: relative; }
+
 /* --- live viewfinder ---------------------------------------------------- */
-/* Full screen and black whatever the theme: a viewfinder is something the user
-   looks through, not a panel in the page. */
-.camera-backdrop {
-  position: fixed;
+/* Covers the stage, not the app: black whatever the theme, because a viewfinder
+   is something the user looks through, but the tabs stay in reach — that is the
+   whole point of framing through the recipe. */
+.camera-view {
+  position: absolute;
   inset: 0;
-  z-index: 70;
+  z-index: 5;
   background: #000;
   display: flex;
   flex-direction: column;
diff --git a/docker/frontend/src/ui/CameraView.tsx b/docker/frontend/src/ui/CameraView.tsx
index 10dabd7..a0ce6b1 100644
--- a/docker/frontend/src/ui/CameraView.tsx
+++ b/docker/frontend/src/ui/CameraView.tsx
@@ -203,7 +203,7 @@ export function CameraView({
   }, [onShot, shooting, t]);
 
   return (
-    <div className="camera-backdrop" data-key="camera-view">
+    <div className="camera-view" data-key="camera-view">
       {/* The stage and the file are one look; the live frame is shown whole, so
           the user composes against the geometry the export will use. */}
       <canvas ref={canvasRef} className="camera-feed" data-key="camera-feed" />
diff --git a/docker/frontend/src/ui/ImageStage.tsx b/docker/frontend/src/ui/ImageStage.tsx
index 0860101..bf1ef46 100644
--- a/docker/frontend/src/ui/ImageStage.tsx
+++ b/docker/frontend/src/ui/ImageStage.tsx
@@ -292,7 +292,8 @@ export function ImageStage({
   onFile: (file: File) => void;
   // The other way a picture arrives: shot here, on the device's own camera, and
   // graded by the same pipeline the export uses (see CameraView). Absent on a
-  // build with no camera to open.
+  // build with no camera to open, and PRO — the button carries the badge and the
+  // click says why when the account is not one that may open it.
   onCamera?: () => void;
   // Crop editor: shown over the un-cropped preview until APPLY commits it.
   cropEditing?: boolean;
@@ -1440,6 +1441,7 @@ export function ImageStage({
               }}
             >
               {t('cam.open')}
+              <span className="pro">PRO</span>
             </button>
           ) : null}
           <p className="hint">{t('drop.demoLimit', { px: 2048 })}</p>
@@ -2000,6 +2002,7 @@ export function ImageStage({
           {onCamera ? (
             <button type="button" className="btn" data-key="open-camera" onClick={onCamera}>
               {t('cam.open')}
+              <span className="pro">PRO</span>
             </button>
           ) : null}
           {onSaveOriginal ? (