diff --git a/apps/control-station/src/App.tsx b/apps/control-station/src/App.tsx
index 98f49a9..a0c5609 100644
--- a/apps/control-station/src/App.tsx
+++ b/apps/control-station/src/App.tsx
@@ -137,6 +137,14 @@ export default function App() {
     runtime.state?.observationSources ?? [],
     runtime.setObservationSourceActive,
   );
+  const focusedObservationSource = runtime.state?.observationSources?.find(
+    (source) => source.id === observationLayout.focusedSourceId,
+  );
+  const observationFullscreenActive = Boolean(
+    activeDefinition?.kind === "spatial"
+      ? observationLayout.maximizedFloatingSourceId || focusedObservationSource?.modality === "point-cloud"
+      : activeDefinition?.kind === "cameras" && focusedObservationSource,
+  );
 
   useEffect(() => {
     const remote = runtime.state?.viewerSettings;
@@ -290,6 +298,7 @@ export default function App() {
       <ApplicationShell
         data-nodedc-ui
         className="control-station"
+        data-observation-fullscreen={observationFullscreenActive ? "true" : undefined}
         navigationOpen={workspace.navigationOpen && activeRoot !== null}
         contentOpen={workspace.contentOpen && activeDefinition !== null}
         contentExpanded={workspace.contentExpanded}
diff --git a/apps/control-station/src/components/FloatingObservationWindow.tsx b/apps/control-station/src/components/FloatingObservationWindow.tsx
index dbf0f7c..2209a2a 100644
--- a/apps/control-station/src/components/FloatingObservationWindow.tsx
+++ b/apps/control-station/src/components/FloatingObservationWindow.tsx
@@ -1,22 +1,56 @@
-import type { RefObject } from "react";
+import { useLayoutEffect, useState, type RefObject } from "react";
 import { WorkspaceWindow } from "@nodedc/ui-react";
 
 import type { ObservationWindowRect } from "../core/observation/useObservationLayout";
 import type { ObservationSourceDescriptor } from "../core/runtime/contracts";
 import { ObservationMedia, observationSourceStatusLabel } from "./ObservationSources";
 
-export function initialObservationWindowRect(index: number): ObservationWindowRect {
+const WINDOW_WIDTH = 336;
+const WINDOW_HEIGHT = 210;
+const WINDOW_GAP = 16;
+const WINDOW_INSET = 18;
+const TIMELINE_CLEARANCE = 64;
+
+export function initialObservationWindowRect(
+  index: number,
+  count = 1,
+  bounds: { width: number; height: number } = { width: 1280, height: 720 },
+): ObservationWindowRect {
+  const availableWidth = Math.max(0, bounds.width - WINDOW_INSET * 2);
+  const width = Math.max(1, Math.min(WINDOW_WIDTH, availableWidth || WINDOW_WIDTH));
+  const availableHeight = Math.max(0, bounds.height - WINDOW_INSET - TIMELINE_CLEARANCE);
+  const maxColumns = Math.max(
+    1,
+    Math.floor((availableWidth + WINDOW_GAP) / (width + WINDOW_GAP)),
+  );
+  const columns = Math.max(1, Math.min(Math.max(1, count), maxColumns));
+  const rows = Math.max(1, Math.ceil(Math.max(1, count) / columns));
+  const rowHeight = Math.max(
+    1,
+    (availableHeight - Math.max(0, rows - 1) * WINDOW_GAP) / rows,
+  );
+  const height = Math.max(1, Math.min(WINDOW_HEIGHT, rowHeight));
+  const row = Math.floor(index / columns);
+  const column = index % columns;
+  const rowItemCount = Math.min(columns, Math.max(1, count - row * columns));
+  const rowWidth = rowItemCount * width + Math.max(0, rowItemCount - 1) * WINDOW_GAP;
+  const rowStart = Math.max(0, bounds.width - WINDOW_INSET - rowWidth);
+
   return {
-    x: 18 + (index % 3) * 354,
-    y: 78 + Math.floor(index / 3) * 226,
-    width: 336,
-    height: 210,
+    x: rowStart + Math.min(column, rowItemCount - 1) * (width + WINDOW_GAP),
+    y: Math.max(
+      0,
+      bounds.height - TIMELINE_CLEARANCE - height - row * (height + WINDOW_GAP),
+    ),
+    width,
+    height,
   };
 }
 
 export function FloatingObservationWindow({
   source,
   index,
+  count,
   boundsRef,
   rect,
   maximized,
@@ -28,6 +62,7 @@ export function FloatingObservationWindow({
 }: {
   source: ObservationSourceDescriptor;
   index: number;
+  count: number;
   boundsRef: RefObject<HTMLElement | null>;
   rect?: ObservationWindowRect;
   maximized: boolean;
@@ -37,10 +72,33 @@ export function FloatingObservationWindow({
   onActivate: () => void;
   onClose: () => void;
 }) {
+  const [bounds, setBounds] = useState<{ width: number; height: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const element = boundsRef.current;
+    if (!element) return;
+
+    const measure = () => {
+      const next = { width: element.clientWidth, height: element.clientHeight };
+      setBounds((current) => (
+        current?.width === next.width && current.height === next.height ? current : next
+      ));
+    };
+
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [boundsRef]);
+
+  const initialRect = bounds ? initialObservationWindowRect(index, count, bounds) : null;
+  const windowRect = rect ?? initialRect;
+  if (!windowRect) return null;
+
   return (
     <WorkspaceWindow
       boundsRef={boundsRef}
-      rect={rect ?? initialObservationWindowRect(index)}
+      rect={windowRect}
       onRectChange={onRectChange}
       maximized={maximized}
       onMaximizedChange={onMaximizedChange}
@@ -60,8 +118,8 @@ export function FloatingObservationWindow({
           <span>{source.capabilities.timelineMode === "live-only" ? "Эфир без буфера" : "Временная шкала"}</span>
         </span>
       )}
-      minWidth={280}
-      minHeight={190}
+      minWidth={Math.min(280, windowRect.width)}
+      minHeight={Math.min(190, windowRect.height)}
       resizable={source.capabilities.resizable}
       active={active}
       zIndex={maximized ? 15 : active ? 9 : 7}
diff --git a/apps/control-station/src/styles/base.css b/apps/control-station/src/styles/base.css
index 8497ff2..76c3e63 100644
--- a/apps/control-station/src/styles/base.css
+++ b/apps/control-station/src/styles/base.css
@@ -15,6 +15,7 @@ body,
 
 body {
   margin: 0;
+  font-family: var(--nodedc-font-family);
 }
 
 #root[data-nodedc-theme="dark"],
@@ -331,7 +332,6 @@ body {
   display: grid;
   grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.1fr);
   gap: 1rem;
-  border-top: 1px solid var(--station-hairline);
   padding: 0.7rem 0;
 }
 
diff --git a/apps/control-station/src/styles/device.css b/apps/control-station/src/styles/device.css
index ee1116b..c3e3137 100644
--- a/apps/control-station/src/styles/device.css
+++ b/apps/control-station/src/styles/device.css
@@ -20,7 +20,6 @@
   display: grid;
   min-width: 0;
   gap: 0.9rem;
-  border: 1px solid var(--station-hairline);
   border-radius: 1rem;
   background: rgb(255 255 255 / 0.025);
   padding: 1rem;
@@ -74,8 +73,6 @@
 .device-model-card dl {
   display: grid;
   gap: 0.42rem;
-  border-top: 1px solid var(--station-hairline);
-  border-bottom: 1px solid var(--station-hairline);
   padding: 0.7rem 0;
 }
 
@@ -441,7 +438,6 @@
   justify-content: space-between;
   gap: 1rem;
   margin-top: 1rem;
-  border-top: 1px solid var(--station-hairline);
   padding-top: 0.9rem;
 }
 
@@ -469,7 +465,6 @@
   min-width: 0;
   grid-template-columns: minmax(7rem, 0.72fr) minmax(0, 1.28fr);
   gap: 1rem;
-  border-top: 1px solid var(--station-hairline);
   padding: 0.7rem 0;
 }
 
diff --git a/apps/control-station/src/styles/observation.css b/apps/control-station/src/styles/observation.css
index f73c2db..04d8ee0 100644
--- a/apps/control-station/src/styles/observation.css
+++ b/apps/control-station/src/styles/observation.css
@@ -69,6 +69,7 @@
 
 .observation-source-menu {
   overflow: hidden;
+  font-family: var(--nodedc-font-family);
 }
 
 .observation-source-menu__head,
@@ -81,7 +82,6 @@
   align-items: flex-end;
   justify-content: space-between;
   gap: 1rem;
-  border-bottom: 1px solid var(--station-hairline);
 }
 
 .observation-source-menu__head strong,
@@ -92,13 +92,13 @@
 .observation-source-menu__head strong {
   margin-top: 0.34rem;
   color: var(--nodedc-text-primary);
-  font-size: 0.76rem;
+  font-size: var(--nodedc-font-size-md);
 }
 
 .observation-source-menu__head small,
 .observation-source-menu__foot {
   color: var(--nodedc-text-muted);
-  font-size: 0.55rem;
+  font-size: var(--nodedc-font-size-xs);
   line-height: 1.4;
 }
 
@@ -176,7 +176,7 @@ i[data-availability="error"] {
 }
 
 .observation-source-menu__foot {
-  border-top: 1px solid var(--station-hairline);
+  border-top: 0;
 }
 
 .observation-media__asset,
@@ -307,13 +307,21 @@ i[data-availability="error"] {
   background: #06070a;
 }
 
+.floating-observation-window.nodedc-material-rim::after {
+  display: none;
+}
+
+.floating-observation-window[data-active="true"] {
+  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.34);
+}
+
 .observation-timeline {
   display: grid;
   min-width: 0;
   grid-template-columns: auto auto minmax(0, 1fr) auto auto;
   align-items: center;
   gap: 0.6rem;
-  border: 1px solid rgb(255 255 255 / 0.055);
+  border: 0;
   border-radius: 0.9rem;
   background: rgb(9 10 13 / 0.78);
   padding: 0.4rem;
@@ -432,7 +440,7 @@ i[data-availability="error"] {
   min-height: 18rem;
   border-radius: 1rem;
   background: #07080a;
-  box-shadow: inset 0 0 0 1px var(--station-hairline);
+  box-shadow: none;
 }
 
 .camera-slot {
diff --git a/apps/control-station/src/styles/shell.css b/apps/control-station/src/styles/shell.css
index a7832e0..37032be 100644
--- a/apps/control-station/src/styles/shell.css
+++ b/apps/control-station/src/styles/shell.css
@@ -29,6 +29,36 @@
   background: rgb(var(--nodedc-danger-rgb));
 }
 
+.control-station[data-observation-fullscreen="true"] .nodedc-app-shell__content {
+  z-index: calc(var(--nodedc-layer-panel) + 1);
+  right: var(--nodedc-app-page-pad);
+  left: var(--nodedc-app-page-pad);
+  width: auto;
+  transition: none;
+}
+
+.control-station[data-observation-fullscreen="true"] .nodedc-app-shell__navigation {
+  pointer-events: none;
+}
+
+.control-station[data-observation-fullscreen="true"] .nodedc-application-panel {
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+  background: #06070a;
+  padding: 0;
+  box-shadow: none;
+  animation: none;
+}
+
+.control-station[data-observation-fullscreen="true"] .nodedc-application-panel__head {
+  display: none;
+}
+
+.control-station[data-observation-fullscreen="true"] .nodedc-application-panel__body {
+  height: 100%;
+  overflow: hidden;
+}
+
 .landing-stage {
   position: relative;
   min-width: 0;
@@ -79,7 +109,6 @@
   display: grid;
   width: min(24rem, 30vw);
   gap: 0.6rem;
-  border: 1px solid rgb(255 255 255 / 0.055);
   border-radius: 1.25rem;
   background: rgb(10 10 12 / 0.58);
   padding: 1rem;
diff --git a/apps/control-station/src/styles/spatial.css b/apps/control-station/src/styles/spatial.css
index 1e204ae..5919e91 100644
--- a/apps/control-station/src/styles/spatial.css
+++ b/apps/control-station/src/styles/spatial.css
@@ -32,7 +32,7 @@
   overflow: hidden;
   border-radius: 1rem;
   background: #06070a;
-  box-shadow: inset 0 0 0 1px var(--station-hairline);
+  box-shadow: none;
 }
 
 .rerun-viewport,
@@ -45,6 +45,19 @@
   min-height: 0;
 }
 
+.rerun-viewport {
+  --rerun-tab-bar-height: 24px;
+  overflow: hidden;
+}
+
+/* Rerun WebViewer 0.34.1 draws its selected recording tab inside WASM.
+   The native panels are already disabled; crop only that fixed tab row. */
+.rerun-viewport__canvas {
+  top: calc(-1 * var(--rerun-tab-bar-height));
+  bottom: auto;
+  height: calc(100% + var(--rerun-tab-bar-height));
+}
+
 .rerun-viewport__canvas canvas {
   display: block;
   width: 100% !important;
@@ -63,7 +76,7 @@
   display: flex;
   align-items: center;
   gap: 0.8rem;
-  border: 1px solid var(--station-hairline);
+  border: 0;
   border-radius: 1rem;
   background: rgb(10 11 14 / 0.82);
   padding: 0.9rem 1rem;
@@ -179,7 +192,7 @@
   width: 3.4rem;
   height: 3.4rem;
   place-items: center;
-  border: 1px solid var(--station-hairline-strong);
+  border: 0;
   border-radius: 50%;
   background: rgb(255 255 255 / 0.035);
   color: var(--nodedc-text-secondary);
@@ -204,7 +217,7 @@
 .scene-timeline {
   position: absolute;
   z-index: 3;
-  border: 1px solid rgb(255 255 255 / 0.055);
+  border: 0;
   background: rgb(9 10 13 / 0.74);
   backdrop-filter: blur(16px);
 }
@@ -240,7 +253,7 @@
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
-  border-bottom: 1px solid var(--station-hairline);
+  border-bottom: 0;
   padding: 0.38rem 0;
 }
 
diff --git a/apps/control-station/src/styles/workspaces.css b/apps/control-station/src/styles/workspaces.css
index 7aee791..3e8d568 100644
--- a/apps/control-station/src/styles/workspaces.css
+++ b/apps/control-station/src/styles/workspaces.css
@@ -16,7 +16,6 @@
   min-width: 0;
   grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.6fr);
   gap: 1.6rem;
-  border-top: 1px solid var(--station-hairline);
   padding-top: 1.2rem;
 }
 
@@ -47,7 +46,6 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.8rem;
-  border-bottom: 1px solid var(--station-hairline);
   padding: 0.78rem 0;
 }
 
@@ -270,7 +268,7 @@
   overflow: hidden;
   border-radius: 1rem;
   background: #090a0c;
-  box-shadow: inset 0 0 0 1px var(--station-hairline);
+  box-shadow: none;
 }
 
 .camera-slot[data-primary="true"] {
@@ -347,7 +345,7 @@
   overflow: hidden;
   border-radius: 1rem;
   background: #0a0b0d;
-  box-shadow: inset 0 0 0 1px var(--station-hairline);
+  box-shadow: none;
 }
 
 .map-canvas__grid,
@@ -484,7 +482,6 @@
 }
 
 .timeline-ruler span {
-  border-left: 1px solid var(--station-hairline);
   padding-left: 0.2rem;
 }
 
@@ -498,7 +495,6 @@
   grid-template-columns: 7.5rem minmax(0, 1fr) 10rem;
   align-items: center;
   gap: 1rem;
-  border-top: 1px solid var(--station-hairline);
   padding: 0.82rem 0;
 }
 
diff --git a/apps/control-station/src/workspaces/Workspaces.tsx b/apps/control-station/src/workspaces/Workspaces.tsx
index 4a7d62b..30201b8 100644
--- a/apps/control-station/src/workspaces/Workspaces.tsx
+++ b/apps/control-station/src/workspaces/Workspaces.tsx
@@ -301,7 +301,10 @@ function SpatialWorkspace({
   const viewerStatusTone = viewerStatus === "ready" ? "success" : viewerStatus === "error" ? "danger" : "neutral";
 
   return (
-    <div className="spatial-workspace" data-focused={pointCloudFocused ? "true" : undefined}>
+    <div
+      className="spatial-workspace"
+      data-focused={pointCloudFocused || floatingSourceMaximized ? "true" : undefined}
+    >
       <div className="spatial-toolbar">
         <div className="spatial-toolbar__mode">
           <span className="section-eyebrow">СЦЕНА 3D · RERUN</span>
@@ -325,120 +328,125 @@ function SpatialWorkspace({
         data-primary-focused={pointCloudFocused ? "true" : undefined}
         data-media-maximized={floatingSourceMaximized ? "true" : undefined}
       >
-        {sourceUrl.trim() && pointCloudVisible ? (
-          <RerunViewport
-            sourceUrl={sourceUrl}
-            followLive={state?.sourceMode === "live"}
-            onStatusChange={onStatusChange}
-            onSelectionChange={onSelectionChange}
-          />
-        ) : (
-          <EmptySpatialStage settings={sceneSettings} />
-        )}
-
-        {pointCloudFocused ? (
-          <button
-            type="button"
-            className="scene-focus-exit"
-            aria-label="Выйти из полноэкранного режима облака точек"
-            onClick={() => observationLayout.setFocusedSourceId(null)}
-          >
-            <Icon name="minimize" size={16} />
-          </button>
-        ) : !floatingSourceMaximized ? (
-          <div className="scene-source-controls">
-            <ObservationSourcePicker
-              sources={observationSources}
-              visibleSourceIds={observationLayout.visibleSourceIds}
-              pendingSourceIds={observationLayout.pendingSourceIds}
-              onToggle={observationLayout.toggleSource}
+          {sourceUrl.trim() && pointCloudVisible ? (
+            <RerunViewport
+              sourceUrl={sourceUrl}
+              followLive={state?.sourceMode === "live"}
+              onStatusChange={onStatusChange}
+              onSelectionChange={onSelectionChange}
             />
-            {pointCloudSource?.capabilities.fullscreen && pointCloudVisible && sourceUrl.trim() ? (
-              <button
-                type="button"
-                className="scene-source-control"
-                aria-label="Развернуть облако точек"
-                onClick={() => observationLayout.setFocusedSourceId(pointCloudSource.id)}
-              >
-                <Icon name="expand" size={16} />
-              </button>
-            ) : null}
-          </div>
-        ) : null}
+          ) : (
+            <EmptySpatialStage settings={sceneSettings} />
+          )}
 
-        <div
-          className="scene-status scene-status--top-left"
-          aria-hidden={pointCloudFocused || floatingSourceMaximized}
-        >
-          <span className="section-eyebrow">ВИЗУАЛЬНЫЙ ДВИЖОК</span>
-          <StatusBadge tone={viewerStatusTone}>{viewerStatusLabel}</StatusBadge>
-          {viewerMessage ? <small>{viewerMessage}</small> : null}
-        </div>
+          {pointCloudFocused ? (
+            <button
+              type="button"
+              className="scene-focus-exit"
+              aria-label="Выйти из полноэкранного режима облака точек"
+              onClick={() => observationLayout.setFocusedSourceId(null)}
+            >
+              <Icon name="minimize" size={16} />
+            </button>
+          ) : !floatingSourceMaximized ? (
+            <div className="scene-source-controls">
+              <ObservationSourcePicker
+                sources={observationSources}
+                visibleSourceIds={observationLayout.visibleSourceIds}
+                pendingSourceIds={observationLayout.pendingSourceIds}
+                onToggle={observationLayout.toggleSource}
+              />
+              {pointCloudSource?.capabilities.fullscreen && pointCloudVisible && sourceUrl.trim() ? (
+                <button
+                  type="button"
+                  className="scene-source-control"
+                  aria-label="Развернуть облако точек"
+                  onClick={() => observationLayout.setFocusedSourceId(pointCloudSource.id)}
+                >
+                  <Icon name="expand" size={16} />
+                </button>
+              ) : null}
+            </div>
+          ) : null}
 
-        <div
-          className="scene-metrics"
-          aria-label="Метрики пространственной сцены"
-          aria-hidden={pointCloudFocused || floatingSourceMaximized}
-        >
-          <div>
-            <span>КАДР/С</span>
-            <strong>{formatNumber(frameRate)}</strong>
+          <div
+            className="scene-status scene-status--top-left"
+            aria-hidden={pointCloudFocused || floatingSourceMaximized}
+          >
+            <span className="section-eyebrow">ВИЗУАЛЬНЫЙ ДВИЖОК</span>
+            <StatusBadge tone={viewerStatusTone}>{viewerStatusLabel}</StatusBadge>
+            {viewerMessage ? <small>{viewerMessage}</small> : null}
           </div>
-          <div>
-            <span>Точек</span>
-            <strong>{points === null ? "—" : points.toLocaleString("ru-RU", { maximumFractionDigits: 0 })}</strong>
-          </div>
-          <div>
-            <span>До публикации</span>
-            <strong>{formatNumber(latency)}<small> мс</small></strong>
-          </div>
-        </div>
 
-        {!pointCloudFocused && !floatingSourceMaximized && state?.sourceMode && state.sourceMode !== "idle" && !sourceUrl.trim() ? (
-          <div className="scene-adapter-note">
-            <Icon name="alert" />
-            <span>
-              Локальный поток <strong>{sourceModeLabel(state.sourceMode).toLocaleLowerCase("ru-RU")}</strong> активен,
-              Rerun-мост запускается и опубликует адрес автоматически.
-            </span>
+          <div
+            className="scene-metrics"
+            aria-label="Метрики пространственной сцены"
+            aria-hidden={pointCloudFocused || floatingSourceMaximized}
+          >
+            <div>
+              <span>КАДР/С</span>
+              <strong>{formatNumber(frameRate)}</strong>
+            </div>
+            <div>
+              <span>Точек</span>
+              <strong>{points === null ? "—" : points.toLocaleString("ru-RU", { maximumFractionDigits: 0 })}</strong>
+            </div>
+            <div>
+              <span>До публикации</span>
+              <strong>{formatNumber(latency)}<small> мс</small></strong>
+            </div>
           </div>
-        ) : null}
 
-        {!pointCloudFocused && !floatingSourceMaximized && selection ? (
-          <div className="scene-selection">
-            <span>Выбрано</span>
-            <strong>{selection.entityPath}</strong>
-            {selection.viewName ? <small>{selection.viewName}</small> : null}
-          </div>
-        ) : null}
+          {!pointCloudFocused && !floatingSourceMaximized && state?.sourceMode && state.sourceMode !== "idle" && !sourceUrl.trim() ? (
+            <div className="scene-adapter-note">
+              <Icon name="alert" />
+              <span>
+                Локальный поток <strong>{sourceModeLabel(state.sourceMode).toLocaleLowerCase("ru-RU")}</strong> активен,
+                Rerun-мост запускается и опубликует адрес автоматически.
+              </span>
+            </div>
+          ) : null}
 
-        {!pointCloudFocused && !floatingSourceMaximized ? (
-          <ObservationTimeline
-            active={viewerStatus === "ready"}
-            sourceCount={Math.max(1, 1 + visibleMediaSources.length)}
-            mode={timeline?.mode}
-            seekable={timeline?.seekable}
-            synchronization={timeline?.synchronization}
-            className="scene-timeline"
-          />
-        ) : null}
+          {!pointCloudFocused && !floatingSourceMaximized && selection ? (
+            <div className="scene-selection">
+              <span>Выбрано</span>
+              <strong>{selection.entityPath}</strong>
+              {selection.viewName ? <small>{selection.viewName}</small> : null}
+            </div>
+          ) : null}
 
-        {!pointCloudFocused ? visibleMediaSources.map((source, index) => (
-          <FloatingObservationWindow
-            key={source.id}
-            source={source}
-            index={index}
-            boundsRef={viewportRef}
-            rect={observationLayout.windowRects[source.id]}
-            maximized={observationLayout.maximizedFloatingSourceId === source.id}
-            active={observationLayout.activeFloatingSourceId === source.id}
-            onRectChange={(rect) => observationLayout.setWindowRect(source.id, rect)}
-            onMaximizedChange={(maximized) =>
-              observationLayout.setFloatingMaximized(source.id, maximized)}
-            onActivate={() => observationLayout.activateFloatingSource(source.id)}
-            onClose={() => void observationLayout.hideSource(source.id)}
-          />
-        )) : null}
+          {!pointCloudFocused && !floatingSourceMaximized ? (
+            <ObservationTimeline
+              active={viewerStatus === "ready"}
+              sourceCount={Math.max(1, 1 + visibleMediaSources.length)}
+              mode={timeline?.mode}
+              seekable={timeline?.seekable}
+              synchronization={timeline?.synchronization}
+              className="scene-timeline"
+            />
+          ) : null}
+
+          {!pointCloudFocused ? visibleMediaSources.map((source, index) => (
+            <FloatingObservationWindow
+              key={source.id}
+              source={source}
+              index={index}
+              count={visibleMediaSources.length}
+              boundsRef={viewportRef}
+              rect={observationLayout.windowRects[source.id]}
+              maximized={observationLayout.maximizedFloatingSourceId === source.id}
+              active={observationLayout.activeFloatingSourceId === source.id}
+              onRectChange={(rect) => observationLayout.setWindowRect(source.id, rect)}
+              onMaximizedChange={(maximized) =>
+                observationLayout.setFloatingMaximized(source.id, maximized)}
+              onActivate={() => observationLayout.activateFloatingSource(source.id)}
+              onClose={() => {
+                if (observationLayout.pendingSourceIds.has(source.id)) return;
+                observationLayout.setFloatingMaximized(source.id, false);
+                void observationLayout.hideSource(source.id);
+              }}
+            />
+          )) : null}
       </div>
 
       <div className="spatial-contract-strip">
@@ -461,6 +469,7 @@ function CameraSourceCard({
   selectedPeer,
   onToggle,
   onFocus,
+  onClose,
 }: {
   source: ObservationSourceDescriptor;
   focused: boolean;
@@ -469,6 +478,7 @@ function CameraSourceCard({
   selectedPeer: boolean;
   onToggle: () => void;
   onFocus: () => void;
+  onClose: () => void;
 }) {
   const deliveryActive = Boolean(
     (source.delivery || source.previewUrl) &&
@@ -500,7 +510,7 @@ function CameraSourceCard({
             <i data-availability={source.availability} aria-hidden="true" />
             {observationSourceStatusLabel(source)}
           </span>
-          {source.activation ? (
+          {source.activation && !focused ? (
             <button
               type="button"
               className="camera-slot__activation"
@@ -510,7 +520,7 @@ function CameraSourceCard({
               {activationLabel}
             </button>
           ) : null}
-          {source.capabilities.fullscreen && deliveryActive ? (
+          {source.capabilities.fullscreen && (focused || deliveryActive) ? (
             <button
               type="button"
               aria-label={focused ? `Свернуть ${source.label}` : `Развернуть ${source.label}`}
@@ -519,6 +529,16 @@ function CameraSourceCard({
               <Icon name={focused ? "minimize" : "expand"} size={15} />
             </button>
           ) : null}
+          {focused ? (
+            <button
+              type="button"
+              aria-label={`Закрыть ${source.label}`}
+              disabled={pending}
+              onClick={onClose}
+            >
+              <Icon name="close" size={15} />
+            </button>
+          ) : null}
         </div>
       </header>
       <div className="camera-slot__body">
@@ -563,6 +583,10 @@ function CamerasWorkspace({ definition, state, observationLayout }: WorkspaceRen
             onFocus={() => observationLayout.setFocusedSourceId(
               focusedSource?.id === source.id ? null : source.id,
             )}
+            onClose={() => {
+              observationLayout.setFocusedSourceId(null);
+              void observationLayout.hideSource(source.id);
+            }}
           />
         )) : (
           <div className="camera-grid__empty">
diff --git a/apps/control-station/test/observationSources.test.mjs b/apps/control-station/test/observationSources.test.mjs
index 5e9a502..d147042 100644
--- a/apps/control-station/test/observationSources.test.mjs
+++ b/apps/control-station/test/observationSources.test.mjs
@@ -10,6 +10,7 @@ let openObservationSource;
 let shouldRestartObservationSource;
 let consumeCameraLeaseRetry;
 let resetCameraLeaseRetryBudget;
+let initialObservationWindowRect;
 
 before(async () => {
   server = await createServer({
@@ -29,6 +30,49 @@ before(async () => {
   ({ consumeCameraLeaseRetry, resetCameraLeaseRetryBudget } = await server.ssrLoadModule(
     "/src/components/MseFmp4WebSocketPlayer.tsx",
   ));
+  ({ initialObservationWindowRect } = await server.ssrLoadModule(
+    "/src/components/FloatingObservationWindow.tsx",
+  ));
+});
+
+test("observation camera windows tile from the bottom-right above the live timeline", () => {
+  const bounds = { width: 1280, height: 720 };
+  const left = initialObservationWindowRect(0, 2, bounds);
+  const right = initialObservationWindowRect(1, 2, bounds);
+
+  assert.equal(left.y, right.y);
+  assert.ok(left.x + left.width < right.x);
+  assert.equal(right.x + right.width, bounds.width - 18);
+  assert.ok(right.y + right.height <= bounds.height - 64);
+});
+
+test("observation camera windows stack without overlap when the viewport is narrow", () => {
+  const bounds = { width: 420, height: 700 };
+  const lower = initialObservationWindowRect(0, 2, bounds);
+  const upper = initialObservationWindowRect(1, 2, bounds);
+
+  assert.equal(lower.x, upper.x);
+  assert.ok(upper.y + upper.height < lower.y);
+  for (const rect of [lower, upper]) {
+    assert.ok(rect.x >= 0 && rect.y >= 0);
+    assert.ok(rect.x + rect.width <= bounds.width);
+    assert.ok(rect.y + rect.height <= bounds.height - 64);
+  }
+});
+
+test("observation camera tiling remains in bounds on a constrained viewport", () => {
+  const bounds = { width: 260, height: 280 };
+  const rects = Array.from({ length: 2 }, (_, index) => (
+    initialObservationWindowRect(index, 2, bounds)
+  ));
+
+  for (const rect of rects) {
+    assert.ok(rect.width > 0 && rect.height > 0);
+    assert.ok(rect.x >= 0 && rect.y >= 0);
+    assert.ok(rect.x + rect.width <= bounds.width);
+    assert.ok(rect.y + rect.height <= bounds.height - 64);
+  }
+  assert.ok(rects[1].y + rects[1].height <= rects[0].y);
 });
 
 after(async () => {
diff --git a/src/k1link/viewer/rerun_bridge.py b/src/k1link/viewer/rerun_bridge.py
index 855f440..cf98d7e 100644
--- a/src/k1link/viewer/rerun_bridge.py
+++ b/src/k1link/viewer/rerun_bridge.py
@@ -102,7 +102,7 @@ class RerunBridge:
             recording.log("/world", rr.ViewCoordinates.RIGHT_HAND_Z_UP, static=True)
             recording.log(
                 "/world/sensor_pose",
-                rr.TransformAxes3D(axis_length=0.45, show_frame=True),
+                rr.TransformAxes3D(axis_length=0.45, show_frame=False),
                 static=True,
             )
             # Do not expose a URL whose StoreInfo, blueprint and static scene are
@@ -142,7 +142,7 @@ class RerunBridge:
         self._recording.log("/world", rr.ViewCoordinates.RIGHT_HAND_Z_UP, static=True)
         self._recording.log(
             "/world/sensor_pose",
-            rr.TransformAxes3D(axis_length=0.45, show_frame=True),
+            rr.TransformAxes3D(axis_length=0.45, show_frame=False),
             static=True,
         )
         self._recording.send_blueprint(