Problem

`FirstPersonOverlay`'s crosshair is wrapped in a `fixed inset-0` div that covers the whole browser viewport. The inner `flex items-center justify-center` then centres the crosshair on the viewport midpoint — but the actual R3F Canvas occupies only the right-hand region of the page, because the editor's v2 layout puts the sidebar on the left. Result: when you enter first-person mode the crosshair shows up noticeably off-centre in your actual view, sitting over the sidebar instead of the scene you're aiming at.

Reproduces on any editor layout where the Canvas is not flush against the left edge of the window (v2 layout, any split view, any scene with a sidebar visible).

Fix

Switch the crosshair wrapper from `fixed inset-0` to a fixed container whose `left` / `top` / `width` / `height` match the canvas's `getBoundingClientRect()`. A `ResizeObserver` on the canvas plus `resize` and `scroll` listeners keep the rect synced so the crosshair follows:

• Sidebar collapses / expands
• Panel toggles (preview mode, split view)
• Window drags / browser resizes
• Zoom changes

If the canvas hasn't been measured yet (first render before the effect runs), the wrapper falls back to `inset: 0` so the crosshair still appears — just full-screen-centred until the next frame. This avoids a visible flash of "no crosshair" at the moment first-person mode is entered.

The exit button (top-right) and controls hint (bottom-centre) are unchanged on purpose — they're edge-anchored chrome that should stay put regardless of sidebar state.

Scope

• `FirstPersonOverlay` only — `FirstPersonControls` (camera/pointer-lock), the scene camera, movement, and pitch/yaw handling are unchanged.
• One new hook + one new effect — `useState` for `canvasRect`, `useEffect` to subscribe to resize signals. ~25 lines net.
• Canvas selector is `document.querySelector('canvas')` — the editor has a single live canvas in the DOM at a time; the thumbnail generator's canvas is offscreen-only and doesn't appear in the DOM, so the query reliably resolves to the main viewer canvas. If a future layout ever grows a second DOM canvas this will need to become more specific (e.g. a ref passed down from ``), but for now the simple selector works.

How to test

1. `bun dev`, open any scene in the v2 editor layout with the sidebar visible.
2. Click the walkthrough / first-person button in the viewer toolbar.
3. Observe where the crosshair lands:
   • On `main`: over the sidebar (approximately at the viewport's horizontal centre), not over the scene.
   • This PR: over the centre of the viewer canvas, where your aim actually is.
4. Collapse or expand the sidebar while in first-person mode — the crosshair should re-centre on the canvas after each layout change.
5. Resize the browser window — the crosshair should follow.
6. `bun check`, `bun check-types`, `bun run build` all clean.

Checklist

• I've tested this locally with `bun dev`
• My code follows the existing code style (`bun check` passes on the touched file — verified via `biome check` at `@biomejs/biome@^2.4.6`)
• I've updated relevant documentation (N/A — no docs affected)
• This PR targets the `main` branch