@@ -24,7 +24,7 @@ const AgentsPage = lazyWithReload(() => import('./pages/DevTools').then(m => ({
 const DataDog = lazyWithReload(() => import('./pages/DataDog'));
 const FlowsDoc = lazyWithReload(() => import('./pages/FlowsDoc'));
 const GitHub = lazyWithReload(() => import('./pages/GitHub'));
-const CyberCity = lazyWithReload(() => import('./pages/CyberCity'));
+const OpenWorld = lazyWithReload(() => import('./pages/OpenWorld'));
 const AppDetail = lazyWithReload(() => import('./pages/AppDetail'));
 const FeatureAgents = lazyWithReload(() => import('./pages/FeatureAgents'));
 const FeatureAgentDetail = lazyWithReload(() => import('./pages/FeatureAgentDetail'));
@@ -195,6 +195,10 @@ const MEDIA_3D_PREFIX = /^\/media\/3d/;
 // is what a bookmark, a typed URL, or a half-remembered path lands on — alias it
 // rather than letting the catch-all swallow it (issue #3793).
 const ANNOTATE_PREFIX = /^\/annotate/;
+// CyberCity became OpenWorld. Bookmarks, pinned sidebar entries, stored palette
+// history, and peers' deep links all still say /city — alias the whole prefix
+// (including /city/settings and /city/apps/:appId) rather than 404ing them.
+const CITY_PREFIX = /^\/city/;
 
 // Normalize a tab-less /creative-director/:id URL to its overview tab while
 // preserving any query string + hash. A bare `<Navigate to="overview">` would
@@ -342,9 +346,12 @@ export default function App() {
           <Route path="jira" element={<Navigate to="/devtools/jira" replace />} />
           <Route path="devtools/jira" element={<Jira />} />
           <Route path="devtools/jira/reports" element={<JiraReports />} />
-          <Route path="city" element={<CyberCity />} />
-          <Route path="city/settings" element={<CyberCity />} />
-          <Route path="city/apps/:appId" element={<CyberCity />} />
+          <Route path="openworld" element={<OpenWorld />} />
+          <Route path="openworld/settings" element={<OpenWorld />} />
+          <Route path="openworld/apps/:appId" element={<OpenWorld />} />
+          <Route path="openworld/region/:regionId" element={<OpenWorld />} />
+          <Route path="city" element={<PrefixRedirect from={CITY_PREFIX} to="/openworld" />} />
+          <Route path="city/*" element={<PrefixRedirect from={CITY_PREFIX} to="/openworld" />} />
           <Route path="data" element={<DataManager />} />
           <Route path="character" element={<CharacterSheet />} />
           <Route path="ask" element={<Ask />} />
 
@@ -10,7 +10,8 @@ These apply to React/Vite client code. Universal constraints (functional program
 - **Above the fold** - keep actionable content and info above the fold and design pages for maximum information and access without scrolling
 - **No hardcoded localhost** - use `window.location.hostname` for URLs; app accessed via Tailscale remotely
 - **Chrome floating over media uses `.port-media-overlay`** - a label, status bar, badge, or control panel sitting on top of an image, a video, or a 3D canvas takes its surface and ink from the theme (`.port-media-overlay`, or `.port-media-overlay-strong` for a small label directly on photography; `.port-media-overlay-item` for its buttons, `.port-media-overlay-divider` for its separators — all defined in `index.css`, which carries the mechanism and the rule for picking between this, `.always-dark`, and the City HUD remap). **Don't write `bg-black/NN` + `text-white`/`text-gray-N00` for this** — day mode remaps the text to the theme's dark ink while the black scrim stays black, so the label renders dark-on-black. Older overlays outside the 3D/Three.js pages still carry that idiom (migration tracked in #3796), so match the new convention rather than the nearest neighbor.
-- **Alphabetical navigation** - sidebar nav items in `Layout.jsx` are alphabetically ordered after the Dashboard+CyberCity top section and separator; children within collapsible sections are also alphabetical
+- **Alphabetical navigation** - sidebar nav items in `Layout.jsx` are alphabetically ordered after the Dashboard+OpenWorld top section and separator; children within collapsible sections are also alphabetical
+- **OpenWorld's `city*` prefix is legacy, not a naming convention to follow.** The 3D world was renamed CyberCity → OpenWorld at the route/label level; the ~150 `city*` files (`components/city/`, `utils/city*.js`, `hooks/useCity*.js`) and the `.cybercity-themed` CSS scope did NOT move, and the `nav.cybercity` command ids are deliberately frozen (they're opaque and persisted in ⌘K history). **Name new files in that tree `openWorld*` / `OpenWorld*`** — matching the nearest neighbor would half-rename the directory by accretion, which is worse than either end state. The mechanical sweep is tracked in #4571.
 - **Reactive UI updates** - after mutations (delete, create, update), update local state directly instead of refetching the entire list from the server. Use `setState(prev => prev.filter(...))` or similar patterns for immediate feedback
 
 ## API errors and save gating
 
@@ -43,7 +43,7 @@ import {
   SquareTerminal,
   Globe,
   Newspaper,
-  Building2,
+  Globe2,
   Ticket,
   Network,
   Flame,
@@ -144,7 +144,7 @@ import * as api from '../services/api';
 const navItems = [
   { to: '/', label: 'Dashboard', icon: Home, single: true },
   { to: '/review', label: 'Review Hub', icon: ClipboardList, single: true },
-  { to: '/city', label: 'City', icon: Building2, single: true },
+  { to: '/openworld', label: 'OpenWorld', icon: Globe2, single: true },
   { separator: true },
   { label: 'Apps', icon: Package, dynamic: 'apps', defaultTo: '/apps', children: [] },
   {
@@ -545,7 +545,7 @@ const FULL_WIDTH_PATH_PREFIXES = [
   '/writers-room',
   '/agents',
   '/shell/',
-  '/city',
+  '/openworld',
   '/timeline/',
   // Every SongBook route — index (/songbook), import (/songbook/import),
   // and viewer (/songbook/:id) — is full-bleed and owns its own scroll
 
@@ -6,7 +6,7 @@ import * as api from '../services/api';
 
 // This suite locks the *integration* path that SingleNavRow.test.jsx can't reach:
 // pinning a top-level `single: true` row (Dashboard `/`, Review Hub `/review`,
-// City `/city`, Goals `/goals/list`) must make it render in the sidebar Pinned
+// OpenWorld `/openworld`, Goals `/goals/list`) must make it render in the sidebar Pinned
 // section. That resolution lives in Layout itself — `navEntryByPath` indexes
 // `item.single` leaves, `resolveNavEntry` maps a stored path to a row, and
 // `useNavWorkingSet` feeds the Pinned-section render. We exercise the real
@@ -107,13 +107,13 @@ describe('Layout — pinned single nav rows', () => {
   });
 
   it('resolves every top-level single row by path into the Pinned section', async () => {
-    localStorage.setItem(PINNED_KEY, JSON.stringify(['/', '/review', '/city', '/goals/list']));
+    localStorage.setItem(PINNED_KEY, JSON.stringify(['/', '/review', '/openworld', '/goals/list']));
     await renderLayout();
 
     const pinned = pinnedSection();
     expect(within(pinned).getByRole('link', { name: /Dashboard/i })).toHaveAttribute('href', '/');
     expect(within(pinned).getByRole('link', { name: /Review Hub/i })).toHaveAttribute('href', '/review');
-    expect(within(pinned).getByRole('link', { name: /City/i })).toHaveAttribute('href', '/city');
+    expect(within(pinned).getByRole('link', { name: /OpenWorld/i })).toHaveAttribute('href', '/openworld');
     expect(within(pinned).getByRole('link', { name: /Goals/i })).toHaveAttribute('href', '/goals/list');
   });
 
@@ -127,12 +127,12 @@ describe('Layout — pinned single nav rows', () => {
     // null and is dropped by resolveNavEntry; a known path beside it still renders.
     // Asserting the survivor (not just absence) proves the filter, not merely that
     // the section failed to render.
-    localStorage.setItem(PINNED_KEY, JSON.stringify(['/this/path/does/not/exist', '/city']));
+    localStorage.setItem(PINNED_KEY, JSON.stringify(['/this/path/does/not/exist', '/openworld']));
     await renderLayout();
 
     const pinned = pinnedSection();
     expect(pinned).toBeTruthy();
-    expect(within(pinned).getByRole('link', { name: /City/i })).toHaveAttribute('href', '/city');
+    expect(within(pinned).getByRole('link', { name: /OpenWorld/i })).toHaveAttribute('href', '/openworld');
     // The unknown path contributes no row.
     expect(within(pinned).getAllByRole('link')).toHaveLength(1);
   });
 
@@ -416,7 +416,9 @@ export default function Building({ app, position, agentCount, onClick, playSfx,
   const displayedColorRef = useRef(null);
   const targetColorRef = useRef(null);
 
-  const { getBuildingColor, getAccentColor, tintStructure } = useCityPalette();
+  // `surface` carries the world style's finish (flat shading + matte under the low-poly
+  // style); spread last on the facade material so it wins over the cyber defaults.
+  const { getBuildingColor, getAccentColor, tintStructure, surface } = useCityPalette();
   const height = getBuildingHeight(app);
   const edgeColor = getBuildingColor(app.overallStatus, app.archived);
   const accentColor = getAccentColor(app);
@@ -464,17 +466,21 @@ export default function Building({ app, position, agentCount, onClick, playSfx,
   );
   useEffect(() => () => haloEdgesGeom.dispose(), [haloEdgesGeom]);
 
-  // Window texture with pixel art icon
+  // Window texture with pixel art icon. Built ONLY when the facade will actually bind it:
+  // the daytime material drops `map`/`emissiveMap` entirely, and the Vibes world style is
+  // daytime at both times of day — so without this gate every install on the default style
+  // would rasterize a full canvas per building (nested fillRect loops, ~1–2k 2D ops each)
+  // at scene mount and again on every theme-accent change, and bind none of them.
   const windowTexture = useMemo(
-    () => createWindowTexture(accentColor, width, height, seed, tintStructure),
-    [accentColor, width, height, seed, tintStructure]
+    () => (daytime ? null : createWindowTexture(accentColor, width, height, seed, tintStructure)),
+    [daytime, accentColor, width, height, seed, tintStructure]
   );
 
   // R3F does NOT dispose a CanvasTexture handed in via `map`/`emissiveMap` — it
   // only frees objects it owns on unmount. Since the city no longer remounts on
   // theme switch (issue-1064), each recolor recreates this texture and would
   // strand the previous one in VRAM per building. Dispose it on replace + unmount.
-  useEffect(() => () => windowTexture.dispose(), [windowTexture]);
+  useEffect(() => () => windowTexture?.dispose(), [windowTexture]);
 
   // Format name for building face
   const displayName = useMemo(() => {
@@ -561,10 +567,11 @@ export default function Building({ app, position, agentCount, onClick, playSfx,
           color={daytime ? bodyColor : '#ffffff'}
           emissive={edgeColor}
           emissiveIntensity={0.7 * neonBrightness * dimMul * (1 - dayMix * 0.88)}
-          map={daytime ? undefined : windowTexture}
-          emissiveMap={daytime ? undefined : windowTexture}
+          map={windowTexture || undefined}
+          emissiveMap={windowTexture || undefined}
           roughness={daytime ? 0.9 : 0.78}
           metalness={daytime ? 0.05 : 0.08}
+          {...surface}
           transparent
           opacity={(app.archived ? 0.78 : 1) * dimMul}
         />
 
@@ -1,12 +1,17 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useMemo } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
 import { smoothstep } from '../../utils/easing';
-import { computeFocusCamera } from '../../utils/cityFocusCamera';
+import { computeFocusCamera, computeRegionCamera } from '../../utils/cityFocusCamera';
 
-// In-canvas camera controller for CyberCity's building focus mode (issue #2593). When the
-// `/city/apps/:appId` route resolves to a placed building, it flies the orbital camera (and the
-// OrbitControls target) to frame that borough; when focus clears it flies back to the overview.
+// In-canvas camera controller for OpenWorld's two URL-addressed camera targets: a single
+// building (`/openworld/apps/:appId`, issue #2593) and a whole fast-travel region
+// (`/openworld/region/:regionId`). Either one flies the orbital camera (and the OrbitControls
+// target) to frame its subject; when both clear, it flies back to the overview.
+//
+// A building focus wins over a region when both are somehow set — the two live on separate
+// routes, so that only happens transiently mid-navigation, and framing the tighter subject is
+// the less jarring resolution.
 //
 // Staleness / unmount safety: all motion runs inside useFrame, which is inherently frame-gated —
 // there is NO setTimeout, so a stale deferred emit is impossible. Retargeting to a newly-selected
@@ -25,11 +30,17 @@ const deriveLookAt = (camera) => {
   return camera.position.clone().add(dir.multiplyScalar(10));
 };
 
-export default function CityFocusCamera({ focusedAppId, positions, orbitRef, active = true, hudSafe }) {
+export default function CityFocusCamera({ focusedAppId, focusedRegion, positions, orbitRef, active = true, hudSafe }) {
   const { camera, size } = useThree();
-  // `null` = overview (no fly needed on a plain /city mount). A transition into/out of focus flips
+  // `null` = overview (no fly needed on a plain /openworld mount). A transition into/out of focus flips
   // this and starts a fly.
   const currentKeyRef = useRef(null);
+  // The region fly's identity, built once per target change rather than inside useFrame —
+  // the live loop runs ~60×/s and must not allocate a string per frame.
+  const regionKey = useMemo(
+    () => (focusedRegion?.anchor ? `region:${focusedRegion.id}` : null),
+    [focusedRegion?.anchor, focusedRegion?.id],
+  );
   const animRef = useRef(null);
   const controlsWasEnabledRef = useRef(true);
 
@@ -46,7 +57,9 @@ export default function CityFocusCamera({ focusedAppId, positions, orbitRef, act
     const pos = wantFocus ? positions?.get?.(focusedAppId) : null;
     // Focus wanted but the layout position isn't ready yet → hold and retry next frame.
     if (wantFocus && !pos) return;
-    const key = wantFocus ? focusedAppId : null;
+    // Regions come straight from the static plan, so there is no equivalent wait.
+    const wantRegion = !wantFocus && active && regionKey !== null;
+    const key = wantFocus ? focusedAppId : wantRegion ? regionKey : null;
 
     if (key !== currentKeyRef.current) {
       currentKeyRef.current = key;
@@ -64,7 +77,9 @@ export default function CityFocusCamera({ focusedAppId, positions, orbitRef, act
       } else {
         const aspect = size.height > 0 ? size.width / size.height : 1;
         const fovDeg = camera.isPerspectiveCamera ? camera.fov : undefined;
-        const framed = computeFocusCamera({ building: pos, aspect, fovDeg, hudSafe });
+        const framed = wantFocus
+          ? computeFocusCamera({ building: pos, aspect, fovDeg, hudSafe })
+          : computeRegionCamera({ region: focusedRegion, aspect, fovDeg, hudSafe });
         endPos = new THREE.Vector3(...framed.position);
         endTarget = new THREE.Vector3(...framed.target);
       }
 
@@ -48,6 +48,7 @@ function ControlsHint({ visible }) {
           <div>WASD: MOVE · Q/E: DOWN/UP</div>
           <div>SHIFT: SPRINT</div>
           <div>F: INTERACT WITH BUILDING</div>
+          <div>M: FAST TRAVEL</div>
           <div>TAB: FLY OUT</div>
         </div>
       </div>
@@ -69,7 +70,7 @@ function Crosshair() {
   );
 }
 
-export default function CityHud({ cosStatus, cosAgents, agentMap, eventLogs, connected, apps, reviewCounts, instances, productivityData, systemHealth, notificationCounts, character, filter, onFilterChange, onJumpToFirst, matchCount, onToggleExploration, explorationMode, onSelectApp, onEnterPhotoMode, onEnterPlayback, focusedAppId, focusedApp, focusNotFound, focusAgents, onCloseFocus, onOpenApp }) {
+export default function CityHud({ cosStatus, cosAgents, agentMap, eventLogs, connected, apps, reviewCounts, instances, productivityData, systemHealth, notificationCounts, character, filter, onFilterChange, onJumpToFirst, matchCount, onToggleExploration, explorationMode, onSelectApp, onEnterPhotoMode, onEnterPlayback, focusedAppId, focusedApp, focusNotFound, focusAgents, onCloseFocus, onOpenApp, onOpenFastTravel, activeRegion }) {
   const isFocused = Boolean(focusedApp || focusNotFound);
   const navigate = useNavigate();
   const location = useLocation();
@@ -267,6 +268,24 @@ export default function CityHud({ cosStatus, cosAgents, agentMap, eventLogs, con
               </div>
             </div>
 
+            {/* Fast travel (M) — warp to any named region of the world */}
+            {onOpenFastTravel && (
+              <button
+                onClick={onOpenFastTravel}
+                className="pointer-events-auto mb-2 relative bg-black/85 backdrop-blur-sm border border-cyan-500/30 rounded-lg px-3 py-2 hover:border-cyan-400/60 hover:bg-cyan-500/10 transition-all w-full"
+                title="Fast travel to a region (M)"
+              >
+                <HudCorner position="tl" />
+                <HudCorner position="br" />
+                <div className="font-pixel text-[10px] text-cyan-400 tracking-wider truncate" style={{ textShadow: '0 0 6px rgba(6,182,212,0.4)' }}>
+                  [ FAST TRAVEL ]
+                </div>
+                <div className="font-pixel text-[7px] text-cyan-500/40 tracking-wide mt-0.5 text-center truncate">
+                  {activeRegion ? activeRegion.label.toUpperCase() : '(M)'}
+                </div>
+              </button>
+            )}
+
             {/* Drop In / Fly Out button */}
             <button
               onClick={onToggleExploration}
@@ -319,10 +338,10 @@ export default function CityHud({ cosStatus, cosAgents, agentMap, eventLogs, con
             )}
 
             <button
-              onClick={() => navigate(location.pathname === '/city/settings' ? `/city${location.search}` : `/city/settings${location.search}`)}
+              onClick={() => navigate(location.pathname === '/openworld/settings' ? `/openworld${location.search}` : `/openworld/settings${location.search}`)}
               className="pointer-events-auto mb-2 relative bg-black/85 backdrop-blur-sm border border-cyan-500/30 rounded-lg w-10 h-10 flex items-center justify-center hover:border-cyan-400/60 hover:bg-cyan-500/10 transition-all group"
               title="Settings"
-              aria-label="City settings"
+              aria-label="OpenWorld settings"
             >
               <HudCorner position="tl" />
               <HudCorner position="br" />
@@ -369,6 +388,7 @@ export default function CityHud({ cosStatus, cosAgents, agentMap, eventLogs, con
           focusAgents={focusAgents}
           onCloseFocus={onCloseFocus}
           onOpenApp={onOpenApp}
+          onOpenFastTravel={onOpenFastTravel}
         />
       )}