Apply world background style to RunnerCanvas and ViewportCanvas

src/runner-web/RunnerCanvas.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import type { FirstPersonTelemetry } from "../runtime-three/navigation-controller";
 import { RuntimeHost } from "../runtime-three/runtime-host";
 import type { RuntimeNavigationMode, RuntimeSceneDefinition } from "../runtime-three/runtime-scene-build";
+import { createWorldBackgroundStyle } from "../shared-ui/world-background-style";
 
 interface RunnerCanvasProps {
   runtimeScene: RuntimeSceneDefinition;
@@ -67,7 +68,13 @@ export function RunnerCanvas({
   }, [navigationMode]);
 
   return (
-    <div ref={containerRef} className="runner-canvas" data-testid="runner-shell" aria-label="Built-in scene runner">
+    <div
+      ref={containerRef}
+      className="runner-canvas"
+      data-testid="runner-shell"
+      aria-label="Built-in scene runner"
+      style={createWorldBackgroundStyle(runtimeScene.world.background)}
+    >
       {runnerMessage === null ? null : (
         <div className="runner-canvas__fallback" role="status">
           <div className="runner-canvas__fallback-title">Runner Unavailable</div>

src/viewport-three/ViewportCanvas.tsx

@@ -6,6 +6,7 @@ import type { Vec3 } from "../core/vector";
 import { DEFAULT_BOX_BRUSH_CENTER, DEFAULT_BOX_BRUSH_SIZE } from "../document/brushes";
 import type { SceneDocument, WorldSettings } from "../document/scene-document";
 import { DEFAULT_GRID_SIZE } from "../geometry/grid-snapping";
+import { createWorldBackgroundStyle } from "../shared-ui/world-background-style";
 
 import { ViewportHost } from "./viewport-host";
 
@@ -120,6 +121,7 @@ export function ViewportCanvas({
       className={`viewport-canvas viewport-canvas--${toolMode}`}
       data-testid="viewport-shell"
       aria-label="Editor viewport"
+      style={createWorldBackgroundStyle(world.background)}
     >
       <div className="viewport-canvas__overlay" data-testid="viewport-overlay">
         <div className="viewport-canvas__overlay-badge">{toolMode === "box-create" ? "Box Create" : "Select"}</div>