diff --git a/e2e/overflow.spec.ts b/e2e/overflow.spec.ts
index 8b31716..393ae53 100644
--- a/e2e/overflow.spec.ts
+++ b/e2e/overflow.spec.ts
@@ -112,6 +112,11 @@ for (const bp of breakpoints.filter((bp) => bp.width <= 768)) {
 
 test('twilight rail supports pointer scrubbing', async ({ page }) => {
 	await page.setViewportSize({ width: 390, height: 844 });
+	// The first-visit tour card overlays the dock rail at this viewport (the
+	// helix strip is taller than the old gantt bar, so the rail's center line
+	// sits under the card); seed the tour-seen flag so the drag reaches the
+	// slider (the aq-dashboard spec's idiom — clicking Skip races tour mount).
+	await page.addInitScript(() => localStorage.setItem('darkmap-tour-v1', '1'));
 	await page.goto('/');
 	await page.waitForLoadState('networkidle');
 	const bar = page.locator('.gantt .bar');
diff --git a/e2e/twilight-compact-webkit.spec.ts b/e2e/twilight-compact-webkit.spec.ts
index dcab93f..314eab4 100644
--- a/e2e/twilight-compact-webkit.spec.ts
+++ b/e2e/twilight-compact-webkit.spec.ts
@@ -1,34 +1,72 @@
 import { expect, test } from '@playwright/test';
 
 /**
- * Bug B — the mobile twilight bar (EphemerisGantt) renders wrong at COMPACT.
- * OBSERVE-FIRST: the gantt auto-opens post-mount (ephemerisOpen=true) and lives in
- * the dock's `.dock-gantt-row`. This spec measures its box + the twilight stripes
- * and screenshots — first run = symptom truth (collapsed? stripeless? fine?), then
- * the gate. Run under webkit-mobile AND chromium-mobile for the engine differential.
+ * H1 — the TimeHelix (the twilight gantt's successor) renders the now-centered
+ * helical ribbon at COMPACT. The helix auto-opens post-mount (ephemerisOpen=true)
+ * and lives in the dock's `.dock-gantt-row`. This spec measures its box, the
+ * phase-colored ribbon segments, and the now-centering acceptance (un-scrubbed
+ * mount = cursor at now = the `[data-now-marker]` staff sits in the central third
+ * of the scrub bar). Run under webkit-mobile AND chromium-mobile for the engine
+ * differential.
  *
  * Run: PLAYWRIGHT_ALL_BROWSERS=1 pnpm exec playwright test --project=webkit-mobile e2e/twilight-compact-webkit.spec.ts
  */
 
-test('B1: twilight gantt renders non-collapsed with stripes at COMPACT', async ({ page }, testInfo) => {
+test('H1: time helix renders now-centered with phase-colored ribbon at COMPACT', async ({ page }, testInfo) => {
 	await page.goto('/');
 	await page.waitForLoadState('networkidle');
-	await page.waitForTimeout(2500); // ephemeris auto-open + the readout/center data land
+	await page.waitForTimeout(2500); // ephemeris auto-open + the per-day readouts land
 
 	const gantt = page.locator('.dock-gantt-row .gantt').first();
 	const present = await gantt.count();
 	const box = present ? await gantt.boundingBox().catch(() => null) : null;
-	const stripeCount = await page
-		.locator('.dock-gantt-row .gantt .bar .stripe')
-		.count()
-		.catch(() => 0);
 	const barBox = await page
 		.locator('.dock-gantt-row .gantt .bar')
 		.first()
 		.boundingBox()
 		.catch(() => null);
+	const stripes = page.locator('.dock-gantt-row .gantt [data-phase]');
+	const stripeCount = await stripes.count().catch(() => 0);
+	const distinctPhases = await stripes
+		.evaluateAll((els) =>
+			Array.from(
+				new Set(
+					els
+						.filter((el) => el.getClientRects().length > 0)
+						.map((el) => el.getAttribute('data-phase'))
+						.filter((p): p is string => p !== null),
+				),
+			),
+		)
+		.catch(() => [] as string[]);
+	const markerBox = await page
+		.locator('.dock-gantt-row .gantt [data-now-marker]')
+		.first()
+		.boundingBox()
+		.catch(() => null);
+	const phaseUnderNow = await page
+		.evaluate(() => {
+			const marker = document.querySelector('.dock-gantt-row .gantt [data-now-marker]');
+			if (!marker) return null;
+			const m = marker.getBoundingClientRect();
+			const cx = m.left + m.width / 2;
+			let best: string | null = null;
+			let bestDist = Infinity;
+			for (const el of document.querySelectorAll('.dock-gantt-row .gantt .stripe')) {
+				const r = el.getBoundingClientRect();
+				const dist = Math.abs((r.left + r.right) / 2 - cx);
+				if (dist < bestDist) {
+					bestDist = dist;
+					best = el.getAttribute('data-phase');
+				}
+			}
+			return best;
+		})
+		.catch(() => null);
 	console.log(
-		`[B1 ${testInfo.project.name}] gantt present=${present} box=${JSON.stringify(box)} bar=${JSON.stringify(barBox)} stripes=${stripeCount}`,
+		`[H1 ${testInfo.project.name}] helix present=${present} box=${JSON.stringify(box)} bar=${JSON.stringify(barBox)} ` +
+			`stripes=${stripeCount} phases=${JSON.stringify(distinctPhases)} nowMarker=${JSON.stringify(markerBox)} ` +
+			`phaseUnderNow=${phaseUnderNow}`,
 	);
 	await page
 		.screenshot({
@@ -38,9 +76,21 @@ test('B1: twilight gantt renders non-collapsed with stripes at COMPACT', async (
 		})
 		.catch(() => {});
 
-	// CORRECT behaviour (red = the reported "not displaying properly"):
-	expect(box, 'the twilight gantt is present in the dock row at COMPACT').not.toBeNull();
-	expect(box!.height, 'gantt is not collapsed (height)').toBeGreaterThan(20);
-	expect(box!.width, 'gantt has real width').toBeGreaterThan(100);
-	expect(stripeCount, 'the twilight bands (stripes) actually render').toBeGreaterThan(0);
+	// CORRECT behaviour:
+	expect(box, 'the time helix is present in the dock row at COMPACT').not.toBeNull();
+	expect(box!.height, 'helix is not collapsed (height)').toBeGreaterThan(20);
+	expect(box!.width, 'helix has real width').toBeGreaterThan(100);
+	expect(stripeCount, 'the ribbon segments actually render').toBeGreaterThan(0);
+	expect(
+		distinctPhases.length,
+		'the ribbon is phase-colored (≥2 distinct data-phase values — not just neutral placeholders)',
+	).toBeGreaterThanOrEqual(2);
+
+	// Now-centering acceptance: un-scrubbed mount = cursor at now, so the now
+	// staff must sit in the central third of the scrub bar.
+	expect(barBox, 'the scrub bar is measurable').not.toBeNull();
+	expect(markerBox, 'the now staff ([data-now-marker]) renders').not.toBeNull();
+	const markerCx = markerBox!.x + markerBox!.width / 2;
+	expect(markerCx, 'now staff right of the central-third left bound').toBeGreaterThan(barBox!.x + barBox!.width / 3);
+	expect(markerCx, 'now staff left of the central-third right bound').toBeLessThan(barBox!.x + (2 * barBox!.width) / 3);
 });
diff --git a/src/lib/components/EphemerisGantt.svelte b/src/lib/components/EphemerisGantt.svelte
deleted file mode 100644
index 674d199..0000000
--- a/src/lib/components/EphemerisGantt.svelte
+++ /dev/null
@@ -1,918 +0,0 @@
-<script lang="ts">
-	import { Effect } from 'effect';
-	import { onDestroy, untrack } from 'svelte';
-	import HelpTooltip from '$lib/components/HelpTooltip.svelte';
-	import { fmtAge, type CacheBadgeView } from '$lib/cache/badge';
-	import type { EphemerisReadout, LatLon } from '$lib/ephemeris/EphemerisClient';
-	import { viewportRangesFor, type ViewportRangeSummarySource } from '$lib/ephemeris/viewportSummaryCache';
-	import {
-		makeEphemerisViewportSummaryRequest,
-		type EphemerisEventKey,
-		type EventRange,
-		type EventRangeMap,
-	} from '$lib/ephemeris/viewportSummary';
-	import {
-		buildPhaseGradient,
-		buildPhaseSegments,
-		phaseAt,
-		PHASE_DEFINITIONS,
-		type TwilightPhaseSegment,
-	} from '$lib/ephemeris/twilight-phases';
-
-	export interface ViewportBounds {
-		readonly north: number;
-		readonly south: number;
-		readonly east: number;
-		readonly west: number;
-	}
-
-	interface Props {
-		location: LatLon;
-		time: Date;
-		bounds?: ViewportBounds;
-		zoom?: number;
-		onTimeChange?: (t: Date) => void;
-	}
-
-	let { location, time, bounds, zoom, onTimeChange }: Props = $props();
-
-	let readout = $state<EphemerisReadout | null>(null);
-	let loading = $state(false);
-	let bar: HTMLDivElement | undefined = $state();
-	let dragging = $state(false);
-	let now = $state(new Date());
-	let online = $state(typeof navigator === 'undefined' ? true : navigator.onLine);
-
-	// Per-event min..max range across a 4x4 grid sampled inside the
-	// tile-cover summary for the current bounds.
-	// Populated asynchronously after the center readout, so the gantt
-	// renders the cursor + bands immediately and the uncertainty stripes
-	// fade in once the corner samples settle.
-	let ranges = $state<EventRangeMap>({});
-
-	type RangeStatus =
-		| { kind: 'idle' }
-		| { kind: 'loading'; key: string }
-		| { kind: 'refreshing'; key: string; previousKey: string }
-		| { kind: 'ready'; computedAtMs: number; key: string; source: ViewportRangeSummarySource }
-		| { kind: 'stale'; key: string; previousKey?: string }
-		| { kind: 'error'; key: string };
-
-	let rangeStatus = $state<RangeStatus>({ kind: 'idle' });
-	let activeRangeKey = '';
-	let hasDisplayedRanges = false;
-
-	// Lazy-load astronomy-engine + EphemerisClient. The ~116 KB chunk only
-	// ships once the overlay actually mounts.
-	type Client = (loc: LatLon, t: Date) => Promise<EphemerisReadout>;
-	let clientPromise: Promise<Client> | null = null;
-	const loadClient = (): Promise<Client> => {
-		if (!clientPromise) {
-			clientPromise = (async () => {
-				const mod = await import('$lib/ephemeris/EphemerisClient');
-				return (loc, t) =>
-					Effect.runPromise(
-						Effect.gen(function* () {
-							const c = yield* mod.EphemerisClient;
-							return yield* c.at(loc, t);
-						}).pipe(Effect.provide(mod.EphemerisClientLive)),
-					);
-			})();
-		}
-		return clientPromise;
-	};
-
-	// Recompute whenever location or the calendar-day part of `time` changes.
-	// (Scrubbing within the same day moves the cursor but the band positions
-	// are stable for the day.)
-	let readoutGen = 0;
-	let rangeGen = 0;
-	const dayKey = $derived(
-		`${time.getUTCFullYear()}-${time.getUTCMonth()}-${time.getUTCDate()}|${location.lat.toFixed(3)},${location.lon.toFixed(3)}`,
-	);
-	$effect(() => {
-		const myGen = ++readoutGen;
-		loading = true;
-		(async () => {
-			try {
-				const c = await loadClient();
-				const r = await c(location, time);
-				if (myGen === readoutGen) {
-					readout = r;
-					loading = false;
-				}
-			} catch (e) {
-				if (myGen === readoutGen) {
-					loading = false;
-					console.warn('EphemerisGantt: failed to compute readout', e);
-				}
-			}
-		})();
-		// dayKey is the dependency; reading it inside $effect tracks it.
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		dayKey;
-	});
-
-	// Grid-sample across a coarse Web-Mercator tile cover, not the raw
-	// viewport rectangle. Small mobile pans inside the same summary tile
-	// cover reuse the same Promise and avoid churn in the dusk rail.
-	const summaryRequest = $derived(bounds ? makeEphemerisViewportSummaryRequest({ bounds, mapZoom: zoom, time }) : null);
-	const boundsKey = $derived(summaryRequest?.key ?? '');
-	$effect(() => {
-		const key = boundsKey;
-		if (!key) {
-			ranges = {};
-			rangeStatus = { kind: 'idle' };
-			activeRangeKey = '';
-			hasDisplayedRanges = false;
-			return;
-		}
-		const req = untrack(() => summaryRequest);
-		if (!req) return;
-		const reqTime = untrack(() => time);
-		const myGen = ++rangeGen;
-		const previousKey = activeRangeKey;
-		rangeStatus =
-			hasDisplayedRanges && previousKey && previousKey !== key
-				? { kind: 'refreshing', key, previousKey }
-				: { kind: 'loading', key };
-		(async () => {
-			const c = await loadClient();
-			const summary = await viewportRangesFor(req, c, reqTime);
-			if (myGen !== rangeGen) return;
-			ranges = summary.ranges;
-			activeRangeKey = summary.key;
-			hasDisplayedRanges = Object.keys(summary.ranges).length > 0;
-			rangeStatus = {
-				kind: 'ready',
-				key: summary.key,
-				source: summary.source,
-				computedAtMs: summary.computedAtMs,
-			};
-		})().catch((e) => {
-			if (myGen === rangeGen) {
-				rangeStatus = hasDisplayedRanges
-					? { kind: 'stale', key, previousKey: activeRangeKey || undefined }
-					: { kind: 'error', key };
-				console.warn('EphemerisGantt: viewport sampling failed', e);
-			}
-		});
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		key;
-	});
-
-	onDestroy(() => {
-		readoutGen++;
-		rangeGen++;
-	});
-
-	$effect(() => {
-		if (typeof window === 'undefined' || typeof navigator === 'undefined') return;
-		const updateOnline = () => {
-			online = navigator.onLine;
-		};
-		window.addEventListener('online', updateOnline);
-		window.addEventListener('offline', updateOnline);
-		return () => {
-			window.removeEventListener('online', updateOnline);
-			window.removeEventListener('offline', updateOnline);
-		};
-	});
-
-	$effect(() => {
-		const id = setInterval(() => {
-			now = new Date();
-		}, 60_000);
-		return () => clearInterval(id);
-	});
-
-	// Strip covers a full UTC day for the date of `time`. Every twilight
-	// event for that day is guaranteed to land somewhere in [0, 1].
-	const dayStart = $derived(
-		new Date(Date.UTC(time.getUTCFullYear(), time.getUTCMonth(), time.getUTCDate(), 0, 0, 0, 0)),
-	);
-	const DAY_MS = 24 * 3600 * 1000;
-
-	const fracOf = (d: Date | null): number | null => {
-		if (!d) return null;
-		const dt = d.getTime() - dayStart.getTime();
-		if (dt < 0 || dt > DAY_MS) return null;
-		return dt / DAY_MS;
-	};
-
-	// Twilight-phase segments (#197). The segment list is the contract;
-	// the gradient and the per-phase popover hitboxes both derive from it.
-	const phaseSegments = $derived<readonly TwilightPhaseSegment[]>(
-		readout ? buildPhaseSegments(readout.events, fracOf) : [],
-	);
-	const bandGradient = $derived(buildPhaseGradient(phaseSegments));
-
-	const cursorFrac = $derived.by(() => {
-		const f = fracOf(time);
-		return f === null ? 0 : f;
-	});
-	const nowFrac = $derived(fracOf(now));
-
-	const events = $derived(readout?.events);
-	const noonAt: Date | null = $derived(events ? events.solarNoon : null);
-	const sunriseAt: Date | null = $derived(events ? events.sunrise : null);
-	const sunsetAt: Date | null = $derived(events ? events.sunset : null);
-	const noonFrac = $derived(fracOf(noonAt));
-	const sunriseFrac = $derived(fracOf(sunriseAt));
-	const sunsetFrac = $derived(fracOf(sunsetAt));
-
-	// Phase under the cursor + current time (the "now" staff). Drive the
-	// header chip and any per-event narration that needs to know which
-	// twilight band a marker falls inside.
-	const cursorPhase = $derived(phaseAt(phaseSegments, cursorFrac));
-	const nowPhase = $derived(nowFrac === null ? undefined : phaseAt(phaseSegments, nowFrac));
-
-	const timeFromClientX = (clientX: number): Date | null => {
-		if (!bar || !onTimeChange) return null;
-		const rect = bar.getBoundingClientRect();
-		const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-		return new Date(dayStart.getTime() + x * DAY_MS);
-	};
-
-	const setTimeFromClientX = (clientX: number): void => {
-		const next = timeFromClientX(clientX);
-		if (next) onTimeChange?.(next);
-	};
-
-	const handleClick = (ev: MouseEvent): void => {
-		setTimeFromClientX(ev.clientX);
-	};
-
-	const handlePointerDown = (ev: PointerEvent): void => {
-		if (!bar || !onTimeChange) return;
-		ev.preventDefault();
-		dragging = true;
-		bar.setPointerCapture?.(ev.pointerId);
-		setTimeFromClientX(ev.clientX);
-	};
-
-	const handlePointerMove = (ev: PointerEvent): void => {
-		if (!dragging) return;
-		ev.preventDefault();
-		setTimeFromClientX(ev.clientX);
-	};
-
-	const handlePointerEnd = (ev: PointerEvent): void => {
-		if (!dragging) return;
-		dragging = false;
-		bar?.releasePointerCapture?.(ev.pointerId);
-	};
-
-	const handleKey = (ev: KeyboardEvent): void => {
-		if (!onTimeChange) return;
-		const minute = 60 * 1000;
-		const step = ev.shiftKey ? 60 * minute : 15 * minute;
-		if (ev.key === 'ArrowLeft') {
-			ev.preventDefault();
-			onTimeChange(new Date(time.getTime() - step));
-		} else if (ev.key === 'ArrowRight') {
-			ev.preventDefault();
-			onTimeChange(new Date(time.getTime() + step));
-		}
-	};
-
-	const fmtClock = (d: Date | null): string => {
-		if (!d) return '—';
-		const hh = d.getUTCHours().toString().padStart(2, '0');
-		const mm = d.getUTCMinutes().toString().padStart(2, '0');
-		return `${hh}:${mm}`;
-	};
-
-	const fmtDate = (d: Date): string => {
-		const pad = (n: number) => n.toString().padStart(2, '0');
-		return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
-	};
-
-	// Six tick labels every 4 UTC hours.
-	const TICKS = [0, 4, 8, 12, 16, 20, 24];
-
-	// Uncertainty stripes — pairs of (left%, width%) for each event whose
-	// viewport-range spans more than 1 minute.
-	type Stripe = { key: EphemerisEventKey; left: number; width: number; deltaMin: number };
-	const stripes = $derived.by((): Stripe[] => {
-		const out: Stripe[] = [];
-		for (const [key, range] of Object.entries(ranges) as [EphemerisEventKey, EventRange][]) {
-			const minF = fracOf(range.min);
-			const maxF = fracOf(range.max);
-			if (minF === null || maxF === null) continue;
-			const deltaMs = range.max.getTime() - range.min.getTime();
-			if (deltaMs < 60 * 1000) continue;
-			out.push({
-				key,
-				left: minF,
-				width: Math.max(0, maxF - minF),
-				deltaMin: deltaMs / 60_000,
-			});
-		}
-		return out;
-	});
-
-	// Range pill — pick the event closest to the cursor and surface its
-	// span as "civil dusk Δ 26 min" in the header.
-	const closestRange = $derived.by(() => {
-		const t = time.getTime();
-		let best: { key: EphemerisEventKey; range: EventRange; distMs: number } | null = null;
-		for (const [key, range] of Object.entries(ranges) as [EphemerisEventKey, EventRange][]) {
-			const mid = (range.min.getTime() + range.max.getTime()) / 2;
-			const dist = Math.abs(t - mid);
-			if (!best || dist < best.distMs) best = { key, range, distMs: dist };
-		}
-		return best;
-	});
-
-	type EventTipLabel = {
-		readonly short: string;
-		readonly long: string;
-		readonly description: string;
-	};
-
-	const eventTipFor = (k: EphemerisEventKey): EventTipLabel => {
-		switch (k) {
-			case 'astronomicalDawn':
-				return {
-					short: 'astro',
-					long: 'Astronomical dawn',
-					description: 'Sun reaches −18° below the horizon. Astronomical twilight begins.',
-				};
-			case 'nauticalDawn':
-				return {
-					short: 'naut',
-					long: 'Nautical dawn',
-					description: 'Sun reaches −12° below the horizon. Horizon visible at sea.',
-				};
-			case 'civilDawn':
-				return {
-					short: 'civil',
-					long: 'Civil dawn',
-					description:
-						'Sun reaches −6° below the horizon. Outdoor activities without artificial light become possible.',
-				};
-			case 'sunrise':
-				return {
-					short: '↑',
-					long: 'Sunrise',
-					description: 'Sun crosses the horizon. Civil twilight ends, daylight begins.',
-				};
-			case 'solarNoon':
-				return {
-					short: 'noon',
-					long: 'Solar noon',
-					description: 'Sun is at its highest altitude for the day at the viewport center.',
-				};
-			case 'sunset':
-				return {
-					short: '↓',
-					long: 'Sunset',
-					description: 'Sun crosses the horizon. Daylight ends, civil twilight begins.',
-				};
-			case 'civilDusk':
-				return {
-					short: 'civil',
-					long: 'Civil dusk',
-					description: 'Sun reaches −6° below the horizon. Nautical twilight begins.',
-				};
-			case 'nauticalDusk':
-				return {
-					short: 'naut',
-					long: 'Nautical dusk',
-					description: 'Sun reaches −12° below the horizon. Astronomical twilight begins.',
-				};
-			case 'astronomicalDusk':
-				return {
-					short: 'astro',
-					long: 'Astronomical dusk',
-					description: 'Sun reaches −18° below the horizon. Full astronomical darkness begins.',
-				};
-		}
-	};
-
-	const labelFor = (k: EphemerisEventKey): string => {
-		switch (k) {
-			case 'astronomicalDawn':
-				return 'astro dawn';
-			case 'nauticalDawn':
-				return 'naut dawn';
-			case 'civilDawn':
-				return 'civil dawn';
-			case 'sunrise':
-				return 'sunrise';
-			case 'solarNoon':
-				return 'solar noon';
-			case 'sunset':
-				return 'sunset';
-			case 'civilDusk':
-				return 'civil dusk';
-			case 'nauticalDusk':
-				return 'naut dusk';
-			case 'astronomicalDusk':
-				return 'astro dusk';
-		}
-	};
-
-	const fmtDelta = (deltaMin: number): string =>
-		deltaMin < 60 ? `Δ ${Math.round(deltaMin)} min` : `Δ ${(deltaMin / 60).toFixed(1)} h`;
-
-	// The viewport-summary pill IS a cache-state badge — it reuses the shared
-	// CacheBadgeView shape + fmtAge from $lib/cache/badge (the module that
-	// generalized this very pill) while keeping its tile-cover-specific labels
-	// and detail copy, which are more informative than the generic strings.
-	const rangeBadge = $derived.by((): CacheBadgeView | null => {
-		switch (rangeStatus.kind) {
-			case 'idle':
-				return null;
-			case 'loading':
-				return {
-					label: online ? 'loading' : 'offline',
-					tone: 'loading',
-					detail: online
-						? 'Computing the tile-cover summary for this viewport.'
-						: 'Browser reports offline while the tile-cover summary is loading.',
-				};
-			case 'refreshing':
-				return {
-					label: online ? 'updating' : 'offline stale',
-					tone: 'stale',
-					detail: 'Showing the previous tile-cover summary until the current viewport summary finishes.',
-				};
-			case 'ready':
-				if (!online) {
-					return {
-						label: 'offline cache',
-						tone: 'cached',
-						detail: `Browser reports offline; using the latest local tile-cover summary from ${fmtAge(rangeStatus.computedAtMs, now.getTime())}.`,
-					};
-				}
-				return rangeStatus.source === 'computed'
-					? {
-							label: 'live',
-							tone: 'live',
-							detail: 'Freshly computed tile-cover summary for the visible viewport.',
-						}
-					: {
-							label: 'cache',
-							tone: 'cached',
-							detail: `Reused a local tile-cover summary computed ${fmtAge(rangeStatus.computedAtMs, now.getTime())}.`,
-						};
-			case 'stale':
-				return {
-					label: online ? 'stale' : 'offline stale',
-					tone: 'stale',
-					detail: 'The current viewport summary failed; the rail is keeping the previous tile-cover summary visible.',
-				};
-			case 'error':
-				return {
-					label: 'no range',
-					tone: 'error',
-					detail: 'The viewport summary failed. Point-level ephemeris can still render independently.',
-				};
-		}
-	});
-</script>
-
-<div class="gantt" aria-label="Twilight strip for viewport center">
-	<div class="header">
-		<span class="date">{fmtDate(dayStart)} UTC</span>
-		<HelpTooltip
-			text={cursorPhase
-				? `Cursor sits in ${cursorPhase.label.toLowerCase()} — ${cursorPhase.description}`
-				: 'Time cursor across the UTC day. Drag the rail or use arrow keys to scrub.'}
-		>
-			{#snippet trigger()}
-				<span class="cursor-label">
-					cursor {fmtClock(time)}
-					{#if cursorPhase}
-						<span class="phase-dot" style="background: {cursorPhase.color};" aria-hidden="true"></span>
-						<span class="phase-name">{cursorPhase.label.toLowerCase()}</span>
-					{/if}
-				</span>
-			{/snippet}
-		</HelpTooltip>
-		{#if nowPhase}
-			<HelpTooltip text="Right now ({fmtClock(now)} UTC) is {nowPhase.label.toLowerCase()} — {nowPhase.description}">
-				{#snippet trigger()}
-					<span class="now-chip">
-						<span class="phase-dot" style="background: {nowPhase.color};" aria-hidden="true"></span>
-						now {fmtClock(now)}
-					</span>
-				{/snippet}
-			</HelpTooltip>
-		{/if}
-		{#if rangeBadge}
-			<HelpTooltip text={rangeBadge.detail}>
-				{#snippet trigger()}
-					<span
-						class="cache-pill"
-						class:cached={rangeBadge.tone === 'cached'}
-						class:error={rangeBadge.tone === 'error'}
-						class:live={rangeBadge.tone === 'live'}
-						class:loading={rangeBadge.tone === 'loading'}
-						class:stale={rangeBadge.tone === 'stale'}>{rangeBadge.label}</span
-					>
-				{/snippet}
-			</HelpTooltip>
-		{/if}
-		{#if closestRange}
-			<HelpTooltip>
-				{#snippet trigger()}
-					<span class="pill">
-						{labelFor(closestRange.key)}
-						{fmtClock(closestRange.range.min)}–{fmtClock(closestRange.range.max)}
-						<span class="delta"
-							>{fmtDelta((closestRange.range.max.getTime() - closestRange.range.min.getTime()) / 60_000)}</span
-						>
-					</span>
-				{/snippet}
-				{#snippet content()}
-					<div>
-						<strong>Event-time spread across the visible viewport.</strong>
-						<br />
-						Sampled at 16 points across the current tile-cover summary. Small pans inside that cover reuse the same cache
-						entry; selected pins and GPS fixes stay point-precise.
-					</div>
-				{/snippet}
-			</HelpTooltip>
-		{/if}
-		{#if readout}
-			{@const moon = readout.moon}
-			<HelpTooltip
-				text="Moon phase angle {moon.phaseDeg.toFixed(1)}° · illumination {(moon.illumination * 100).toFixed(1)}%"
-			>
-				{#snippet trigger()}
-					<span class="phase">
-						{moon.phaseName} · {(moon.illumination * 100).toFixed(0)}%
-					</span>
-				{/snippet}
-			</HelpTooltip>
-		{:else if loading}
-			<span class="phase">…</span>
-		{/if}
-	</div>
-	<div
-		class="bar"
-		bind:this={bar}
-		onclick={handleClick}
-		onpointerdown={handlePointerDown}
-		onpointermove={handlePointerMove}
-		onpointerup={handlePointerEnd}
-		onpointercancel={handlePointerEnd}
-		onkeydown={handleKey}
-		role="slider"
-		tabindex="0"
-		aria-label="Time scrubber (UTC day)"
-		aria-valuemin={0}
-		aria-valuemax={24 * 60}
-		aria-valuenow={time.getUTCHours() * 60 + time.getUTCMinutes()}
-		aria-valuetext={fmtClock(time) + ' UTC'}
-		style="background: {bandGradient};"
-	>
-		{#each stripes as s (s.key)}
-			<span
-				class="stripe"
-				style="left: {(s.left * 100).toFixed(2)}%; width: {(s.width * 100).toFixed(2)}%;"
-				title="{labelFor(s.key)} {fmtDelta(s.deltaMin)} across viewport"
-			></span>
-		{/each}
-		{#if sunriseFrac !== null}
-			<span
-				class="event sunrise"
-				style="left: {(sunriseFrac * 100).toFixed(2)}%;"
-				title="Sunrise {fmtClock(sunriseAt)} UTC"
-			></span>
-		{/if}
-		{#if noonFrac !== null}
-			<span class="event noon" style="left: {(noonFrac * 100).toFixed(2)}%;" title="Solar noon {fmtClock(noonAt)} UTC"
-			></span>
-		{/if}
-		{#if sunsetFrac !== null}
-			<span class="event sunset" style="left: {(sunsetFrac * 100).toFixed(2)}%;" title="Sunset {fmtClock(sunsetAt)} UTC"
-			></span>
-		{/if}
-		{#if nowFrac !== null}
-			<span class="staff" style="left: {(nowFrac * 100).toFixed(2)}%;" title="Current time {fmtClock(now)} UTC"></span>
-		{/if}
-		<span class="cursor" style="left: {(cursorFrac * 100).toFixed(2)}%;" aria-hidden="true"></span>
-	</div>
-	<div class="ticks" aria-hidden="true">
-		{#each TICKS as h (h)}
-			<span class="tick" style="left: {((h / 24) * 100).toFixed(2)}%;">{h.toString().padStart(2, '0')}</span>
-		{/each}
-	</div>
-	{#if readout}
-		<div class="events" aria-label="Twilight events for the day in UTC">
-			{#each ['astronomicalDawn', 'nauticalDawn', 'civilDawn', 'sunrise', 'solarNoon', 'sunset', 'civilDusk', 'nauticalDusk', 'astronomicalDusk'] as evKey, i (evKey)}
-				{@const tip = eventTipFor(evKey as EphemerisEventKey)}
-				{@const at = readout.events[evKey as EphemerisEventKey]}
-				{#if i === 3 || i === 6}
-					<span class="sep">·</span>
-				{/if}
-				<HelpTooltip text="{tip.long} {fmtClock(at)} UTC — {tip.description}">
-					{#snippet trigger()}
-						<span
-							class="event-chip"
-							class:sun-up={evKey === 'sunrise'}
-							class:sun-down={evKey === 'sunset'}
-							aria-label="{tip.long} {fmtClock(at)} UTC">{tip.short} {fmtClock(at)}</span
-						>
-					{/snippet}
-				</HelpTooltip>
-			{/each}
-		</div>
-		<div class="phase-legend" aria-label="Twilight phase legend">
-			{#each Array.from(new Set(phaseSegments.map((s) => s.name))) as phaseName (phaseName)}
-				{@const def = PHASE_DEFINITIONS[phaseName]}
-				<HelpTooltip text="{def.label} — {def.description} ({def.altitudeRange})">
-					{#snippet trigger()}
-						<span class="phase-chip">
-							<span class="phase-dot" style="background: {def.color};" aria-hidden="true"></span>
-							{def.label.toLowerCase()}
-						</span>
-					{/snippet}
-				</HelpTooltip>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.gantt {
-		position: fixed;
-		left: 1rem;
-		/* Leave room for the MapToolbar's column on the right. */
-		right: var(--map-toolbar-inset-rem, 5rem);
-		bottom: calc(var(--gantt-bottom-rem, 0.75rem) + env(safe-area-inset-bottom, 0px));
-		background: rgba(8, 10, 16, 0.85);
-		border: 1px solid rgba(255, 255, 255, 0.08);
-		border-radius: 6px;
-		padding: 0.55rem 0.75rem;
-		color: #e9ecf3;
-		font-family: var(--font-mono, ui-monospace, monospace);
-		font-size: 0.7rem;
-		z-index: 6;
-		pointer-events: auto;
-		backdrop-filter: blur(6px);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-	}
-	.header {
-		display: flex;
-		justify-content: space-between;
-		gap: 1rem;
-		margin-bottom: 0.4rem;
-		font-size: 0.65rem;
-		opacity: 0.85;
-	}
-	.cursor-label {
-		font-variant-numeric: tabular-nums;
-		display: inline-flex;
-		align-items: center;
-		gap: 0.3rem;
-	}
-	.now-chip {
-		font-variant-numeric: tabular-nums;
-		display: inline-flex;
-		align-items: center;
-		gap: 0.3rem;
-		padding: 0.05rem 0.35rem;
-		border-radius: 999px;
-		border: 1px solid rgba(255, 255, 255, 0.18);
-		background: rgba(255, 255, 255, 0.06);
-		color: rgba(233, 236, 243, 0.86);
-		font-size: 0.6rem;
-	}
-	.phase-dot {
-		width: 0.55rem;
-		height: 0.55rem;
-		border-radius: 50%;
-		border: 1px solid rgba(255, 255, 255, 0.35);
-		display: inline-block;
-		flex: 0 0 auto;
-	}
-	.phase-name {
-		opacity: 0.85;
-		text-transform: lowercase;
-	}
-	.bar {
-		position: relative;
-		/* Bumped from 1rem so the touch target meets WCAG 2.5.5 (24x24px).
-		   Desktop reads fine at 1.5rem too — the bands stay visible. */
-		height: 1.5rem;
-		border-radius: 3px;
-		border: 1px solid rgba(255, 255, 255, 0.12);
-		cursor: pointer;
-		touch-action: none;
-		outline: none;
-	}
-	.bar:focus-visible {
-		box-shadow: 0 0 0 2px rgba(127, 187, 255, 0.5);
-	}
-	@media (pointer: coarse) {
-		.bar {
-			/* Even more generous on touch devices. */
-			height: 1.75rem;
-		}
-	}
-	.cursor {
-		position: absolute;
-		top: -0.15rem;
-		bottom: -0.15rem;
-		width: 2px;
-		background: var(--accent-amber);
-		transform: translateX(-50%);
-		box-shadow: 0 0 6px rgba(var(--accent-amber-rgb), 0.7);
-	}
-	.staff {
-		position: absolute;
-		top: -0.28rem;
-		bottom: -0.28rem;
-		width: 3px;
-		background: #ffffff;
-		transform: translateX(-50%);
-		box-shadow:
-			0 0 0 1px rgba(6, 8, 13, 0.85),
-			0 0 8px rgba(255, 255, 255, 0.65);
-		pointer-events: none;
-	}
-	.staff::before {
-		content: 'now';
-		position: absolute;
-		top: -1rem;
-		left: 50%;
-		transform: translateX(-50%);
-		color: rgba(255, 255, 255, 0.82);
-		font-family: var(--font-mono, ui-monospace, monospace);
-		font-size: 0.52rem;
-	}
-	.stripe {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		background: rgba(var(--accent-amber-rgb), 0.22);
-		mix-blend-mode: screen;
-		pointer-events: none;
-	}
-	.event {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 1px;
-		transform: translateX(-50%);
-		background: rgba(255, 255, 255, 0.85);
-	}
-	.event.noon {
-		background: rgba(255, 255, 255, 0.5);
-	}
-	.ticks {
-		position: relative;
-		height: 0.9rem;
-		margin-top: 0.25rem;
-	}
-	.tick {
-		position: absolute;
-		transform: translateX(-50%);
-		opacity: 0.5;
-		font-size: 0.6rem;
-		font-variant-numeric: tabular-nums;
-	}
-	.tick:first-child {
-		transform: translateX(0);
-	}
-	.tick:last-child {
-		transform: translateX(-100%);
-	}
-	.events {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.6rem;
-		margin-top: 0.35rem;
-		opacity: 0.75;
-		font-size: 0.62rem;
-	}
-	.events .sep {
-		opacity: 0.4;
-	}
-	.event-chip {
-		font-variant-numeric: tabular-nums;
-		min-height: 1.1rem;
-		padding: 0.05rem 0.3rem;
-		border-radius: 4px;
-		border: 1px solid rgba(255, 255, 255, 0.12);
-		background: rgba(255, 255, 255, 0.04);
-		color: rgba(233, 236, 243, 0.85);
-		display: inline-block;
-	}
-	.event-chip.sun-up,
-	.event-chip.sun-down {
-		color: var(--accent-amber);
-		border-color: rgba(var(--accent-amber-rgb), 0.32);
-		background: rgba(var(--accent-amber-rgb), 0.08);
-	}
-	.phase-legend {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.35rem;
-		margin-top: 0.35rem;
-		font-size: 0.6rem;
-		opacity: 0.85;
-	}
-	.phase-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.3rem;
-		padding: 0.05rem 0.4rem;
-		border-radius: 999px;
-		border: 1px solid rgba(255, 255, 255, 0.14);
-		background: rgba(255, 255, 255, 0.05);
-		color: rgba(233, 236, 243, 0.86);
-	}
-	.phase {
-		opacity: 0.7;
-	}
-	.cache-pill {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-height: 1.1rem;
-		padding: 0.05rem 0.35rem;
-		border-radius: 999px;
-		border: 1px solid rgba(255, 255, 255, 0.18);
-		background: rgba(255, 255, 255, 0.08);
-		color: rgba(233, 236, 243, 0.86);
-		font-size: 0.58rem;
-		font-variant-numeric: tabular-nums;
-		white-space: nowrap;
-	}
-	.cache-pill.live {
-		border-color: rgba(97, 220, 163, 0.38);
-		background: rgba(97, 220, 163, 0.14);
-		color: #b8f4d7;
-	}
-	.cache-pill.cached {
-		border-color: rgba(127, 187, 255, 0.4);
-		background: rgba(127, 187, 255, 0.14);
-		color: #c7ddff;
-	}
-	.cache-pill.loading {
-		border-color: rgba(255, 255, 255, 0.2);
-		background: rgba(255, 255, 255, 0.09);
-		color: rgba(233, 236, 243, 0.72);
-	}
-	.cache-pill.stale {
-		border-color: rgba(var(--accent-amber-rgb), 0.34);
-		background: rgba(var(--accent-amber-rgb), 0.14);
-		color: var(--accent-amber);
-	}
-	.cache-pill.error {
-		border-color: rgba(255, 118, 117, 0.42);
-		background: rgba(255, 118, 117, 0.14);
-		color: #ffb5b4;
-	}
-	.pill {
-		display: inline-flex;
-		gap: 0.35rem;
-		align-items: baseline;
-		padding: 0.05rem 0.4rem;
-		border-radius: 999px;
-		background: rgba(var(--accent-amber-rgb), 0.12);
-		border: 1px solid rgba(var(--accent-amber-rgb), 0.3);
-		color: var(--accent-amber);
-		font-variant-numeric: tabular-nums;
-		font-size: 0.62rem;
-	}
-	.pill .delta {
-		opacity: 0.7;
-		color: #e9ecf3;
-	}
-	/* W4b — width arm narrowed from 820px to <640px: at MEDIUM (≥640px) the gantt owns
-	   its own full-width dock row, so it keeps the full event clock + the desktop
-	   placement (the COMPACT bottom-strip compaction + the .events{display:none}
-	   concession only apply below 640px). The short-screen arm is unchanged. */
-	@media (max-width: 639.98px), (max-height: 500px) {
-		.gantt {
-			left: 0.75rem;
-			right: var(--map-toolbar-inset-rem, 5rem);
-			padding: 0.5rem 0.65rem;
-		}
-		.header {
-			flex-wrap: wrap;
-			gap: 0.35rem 0.6rem;
-		}
-		.events {
-			/* The 9-event clock row would wrap onto two lines and crowd the
-			   safe-area inset on phones. The phase-legend row below stays
-			   visible and carries the popovers a mobile user actually needs. */
-			display: none;
-		}
-		.phase-legend {
-			/* Compact dots-only on phones; tap still opens the popover. */
-			font-size: 0.58rem;
-		}
-		.now-chip,
-		.cursor-label {
-			font-size: 0.62rem;
-		}
-	}
-</style>
diff --git a/src/lib/components/TimeHelix.svelte b/src/lib/components/TimeHelix.svelte
new file mode 100644
index 0000000..1ad86f5
--- /dev/null
+++ b/src/lib/components/TimeHelix.svelte
@@ -0,0 +1,850 @@
+<script module lang="ts">
+	/**
+	 * TimeHelix — the twilight gantt's successor (and the seed of phasi.space's
+	 * foundational UI). A now-centered helical time ribbon: one revolution = 24h
+	 * of local mean solar time, the axis = the passage of time. Twilight phases
+	 * color the ribbon; sun/moon events ride it as nodules. The 24h "day view"
+	 * is a Hann window CENTERED on the cursor — never a hard UTC-day strip.
+	 *
+	 * All math lives in `$lib/ephemeris/time-helix` (pure, node-tested); this
+	 * component owns measurement, fetching, painting, and interaction.
+	 *
+	 * Contract kept from the gantt (browser smokes + e2e key off these):
+	 * `.gantt` root, `.bar` slider (aria-valuenow = cursor UTC minutes-of-day),
+	 * `.stripe` ribbon segments (+ `data-phase`), the fixed-float CSS block, and
+	 * the ResponsiveDock `.dock-gantt-row :global(.gantt)` de-float overrides.
+	 */
+	import { Effect } from 'effect';
+	import type { EphemerisReadout, LatLon } from '$lib/ephemeris/EphemerisClient';
+
+	// Lazy-load astronomy-engine + EphemerisClient. The ~116 KB chunk only
+	// ships once the overlay actually mounts. (Ported from the gantt.)
+	type Client = (loc: LatLon, t: Date) => Promise<EphemerisReadout>;
+	let clientPromise: Promise<Client> | null = null;
+	const loadClient = (): Promise<Client> => {
+		if (!clientPromise) {
+			clientPromise = (async () => {
+				const mod = await import('$lib/ephemeris/EphemerisClient');
+				return (loc, t) =>
+					Effect.runPromise(
+						Effect.gen(function* () {
+							const c = yield* mod.EphemerisClient;
+							return yield* c.at(loc, t);
+						}).pipe(Effect.provide(mod.EphemerisClientLive)),
+					);
+			})();
+		}
+		return clientPromise;
+	};
+
+	// Module-level day-readout LRU: `dayStartMs|lat,lon` (3-decimal rounding,
+	// the gantt's dayKey idiom) → readout. Scrubbing across the same days and
+	// remounting the dock both hit this instead of recomputing the ephemeris.
+	const READOUT_LRU_MAX = 8;
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- module-level cache, not reactive UI state
+	const readoutLru = new Map<string, EphemerisReadout>();
+	const lruGet = (k: string): EphemerisReadout | undefined => {
+		const v = readoutLru.get(k);
+		if (v) {
+			readoutLru.delete(k);
+			readoutLru.set(k, v);
+		}
+		return v;
+	};
+	const lruSet = (k: string, v: EphemerisReadout): void => {
+		readoutLru.delete(k);
+		readoutLru.set(k, v);
+		if (readoutLru.size > READOUT_LRU_MAX) {
+			const oldest = readoutLru.keys().next().value;
+			if (oldest !== undefined) readoutLru.delete(oldest);
+		}
+	};
+
+	// Per-instance uid for the SVG gradient/mask ids (two helixes on one page
+	// must not share defs).
+	let helixUid = 0;
+</script>
+
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { Popover } from '@skeletonlabs/skeleton-svelte';
+	import HelpTooltip from '$lib/components/HelpTooltip.svelte';
+	import { portal } from '$lib/actions/portal';
+	import {
+		buildDaySegments,
+		buildNodules,
+		buildRibbonSegments,
+		DAY_MS,
+		depthAlpha,
+		fmtClockLocal,
+		fmtClockUtc,
+		hannStops,
+		helixPoint,
+		helixScales,
+		HOUR_MS,
+		NEUTRAL_COLOR,
+		phaseAtMs,
+		SPAN_HOURS,
+		stitchDaySegments,
+		utcDayStart,
+		visibleUtcDayStarts,
+		type DayEvents,
+		type DaySegments,
+		type HelixGeometry,
+		type HelixOrientation,
+	} from '$lib/ephemeris/time-helix';
+
+	export interface ViewportBounds {
+		readonly north: number;
+		readonly south: number;
+		readonly east: number;
+		readonly west: number;
+	}
+
+	interface Props {
+		location: LatLon;
+		time: Date;
+		onTimeChange?: (t: Date) => void;
+		/** Accepted for call-site/prop parity with the gantt; unused in V1
+		 * (the viewport-spread rail returns in a later PR). */
+		bounds?: ViewportBounds;
+		zoom?: number;
+		orientation?: HelixOrientation;
+		spanHours?: number;
+	}
+
+	let {
+		location,
+		time,
+		onTimeChange,
+		bounds: _bounds,
+		zoom: _zoom,
+		orientation = 'horizontal',
+		spanHours = SPAN_HOURS,
+	}: Props = $props();
+
+	const uid = ++helixUid;
+	const gradId = `time-helix-hann-${uid}`;
+	const maskId = `time-helix-mask-${uid}`;
+
+	/** Extra data slack beyond the visible half-span: the cursor may drift this
+	 * far from the last build center before segments/nodules rebuild. */
+	const DATA_MARGIN_H = 6;
+
+	const horizontal = $derived(orientation === 'horizontal');
+	const cursorMs = $derived(time.getTime());
+
+	/* ── geometry: measured .bar box, epoch-anchored absolute coords ────── */
+
+	// Axis epoch is FIXED at mount-day UTC midnight; everything on the tape is
+	// absolute against it and the viewport pans via one translate.
+	const epochMs = utcDayStart(Date.now());
+
+	let barEl: HTMLDivElement | undefined = $state();
+	let boxW = $state(0);
+	let boxH = $state(0);
+
+	$effect(() => {
+		if (!barEl || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				boxW = entry.contentRect.width;
+				boxH = entry.contentRect.height;
+			}
+		});
+		ro.observe(barEl);
+		return () => ro.disconnect();
+	});
+
+	// lonDeg rounded to 0.1° (= 24s of solar time, ~0.1px at strip scale):
+	// the raw viewport lon changes every map-pan frame, and an exact dependency
+	// would rebuild all ~210 ribbon segments per frame for an invisible shift.
+	const lonDeg = $derived(Math.round(location.lon * 10) / 10);
+	const geom = $derived.by((): HelixGeometry | null =>
+		boxW > 0 && boxH > 0 ? { width: boxW, height: boxH, spanHours, epochMs, lonDeg, orientation } : null,
+	);
+	const scales = $derived(geom ? helixScales(geom) : null);
+	const axisLen = $derived(horizontal ? boxW : boxH);
+	const msPerPx = $derived(scales ? HOUR_MS / scales.pxPerHour : 0);
+
+	// The single pan translate that centers the cursor. Scrubbing updates ONLY
+	// this (plus the clock strings) — never the segment lists.
+	const panPx = $derived(scales ? axisLen / 2 - ((cursorMs - epochMs) / HOUR_MS) * scales.pxPerHour : 0);
+	const panTransform = $derived(horizontal ? `translate(${panPx}px, 0)` : `translate(0, ${panPx}px)`);
+
+	const stops = $derived(hannStops(spanHours));
+
+	/* ── data window: rebuild only on >6h drift / day-set / geometry ────── */
+
+	// Seeded from the cursor prop (not wall-clock now): a time-traveled mount
+	// must not paint one neutral frame before the drift effect catches up.
+	// Initial-value capture is the point — the drift effect below tracks `time`.
+	// svelte-ignore state_referenced_locally
+	let buildCenterMs = $state(time.getTime());
+	$effect(() => {
+		const c = cursorMs;
+		if (Math.abs(c - buildCenterMs) > DATA_MARGIN_H * HOUR_MS) buildCenterMs = c;
+	});
+
+	const windowHalfMs = $derived((spanHours / 2 + DATA_MARGIN_H) * HOUR_MS);
+	const windowFromMs = $derived(buildCenterMs - windowHalfMs);
+	const windowToMs = $derived(buildCenterMs + windowHalfMs);
+
+	// UTC days intersecting the slack window (margin = the drift allowance, so
+	// a 6h scrub never outruns the loaded days).
+	const dayStarts = $derived(visibleUtcDayStarts(buildCenterMs, spanHours, DATA_MARGIN_H));
+	const locKey = $derived(`${location.lat.toFixed(3)},${location.lon.toFixed(3)}`);
+
+	/* ── day pipeline: fetch readouts in day order, seam-chained ────────── */
+
+	let dayData = $state<ReadonlyMap<number, EphemerisReadout>>(new Map());
+	let fetchGen = 0;
+
+	$effect(() => {
+		const days = dayStarts;
+		const key = locKey;
+		const myGen = ++fetchGen;
+		(async () => {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local accumulator; published via immutable snapshots
+			const have = new Map<number, EphemerisReadout>();
+			for (const d of days) {
+				const lruKey = `${d}|${key}`;
+				let r = lruGet(lruKey);
+				if (!r) {
+					const c = await loadClient();
+					// `location` is read after the await on purpose: only the rounded
+					// locKey is a tracked dependency (the gantt's dayKey idiom).
+					r = await c(location, new Date(d));
+					if (myGen !== fetchGen) return;
+					lruSet(lruKey, r);
+				}
+				have.set(d, r);
+				// Publish incrementally so the ribbon colors day-by-day; the
+				// chronological loop preserves the seam invariant downstream.
+				dayData = new Map(have);
+			}
+		})().catch((e) => {
+			if (myGen === fetchGen) console.warn('TimeHelix: ephemeris fetch failed', e);
+		});
+	});
+
+	const loading = $derived(dayStarts.some((d) => !dayData.has(d)));
+
+	// Seam invariant: day k+1's initial phase = day k's final phase, chained IN
+	// DAY ORDER. A missing middle day breaks the chain honestly (no fabricated
+	// midnight phase — the next loaded day reseeds from 'night').
+	const stitched = $derived.by(() => {
+		const built: DaySegments[] = [];
+		let prev: DaySegments | undefined;
+		for (const d of dayStarts) {
+			const r = dayData.get(d);
+			if (!r) {
+				prev = undefined;
+				continue;
+			}
+			const day = buildDaySegments(d, r.events, prev && prev.dayStartMs === d - DAY_MS ? prev.segments : undefined);
+			built.push(day);
+			prev = day;
+		}
+		return stitchDaySegments(built);
+	});
+
+	// Ribbon segments in epoch-anchored absolute coords. Pre-data the math
+	// yields NEUTRAL_COLOR placeholders, so `.stripe` elements exist before
+	// the ephemeris lands.
+	const ribbon = $derived(geom ? buildRibbonSegments(stitched, geom, windowFromMs, windowToMs) : []);
+	const backSegments = $derived(ribbon.filter((s) => !s.front));
+	const frontSegments = $derived(ribbon.filter((s) => s.front));
+
+	const nodules = $derived.by(() => {
+		const daysEvents: DayEvents[] = [];
+		for (const d of dayStarts) {
+			const r = dayData.get(d);
+			if (r) daysEvents.push(r.events);
+		}
+		return buildNodules(daysEvents, windowFromMs, windowToMs);
+	});
+	const noduleViews = $derived.by(() => {
+		if (!geom || !scales) return [];
+		return nodules.map((n) => {
+			const p = helixPoint(n.tMs, geom, scales);
+			return {
+				id: `${n.key}-${n.tMs}`,
+				n,
+				x: p.x,
+				y: p.y,
+				alpha: depthAlpha(p.z),
+				glow: n.key === 'sunrise' || n.key === 'sunset',
+			};
+		});
+	});
+
+	const cursorPhase = $derived(phaseAtMs(stitched, cursorMs));
+	const cursorDayReadout = $derived(dayData.get(utcDayStart(cursorMs)) ?? null);
+
+	/* ── NOW vs cursor ──────────────────────────────────────────────────── */
+
+	let now = $state(new Date());
+	$effect(() => {
+		const id = setInterval(() => {
+			now = new Date();
+		}, 30_000);
+		return () => clearInterval(id);
+	});
+
+	const nowMs = $derived(now.getTime());
+	const nowAxisPx = $derived(scales ? ((nowMs - epochMs) / HOUR_MS) * scales.pxPerHour : 0);
+	/** Cursor and wall-clock now coincide (un-scrubbed). */
+	const coincident = $derived(Math.abs(cursorMs - nowMs) < 60_000);
+	const nowDeltaMs = $derived(nowMs - cursorMs);
+	const visibleHalfMs = $derived((spanHours / 2) * HOUR_MS);
+	const nowOffEdge = $derived(nowDeltaMs > visibleHalfMs ? 1 : nowDeltaMs < -visibleHalfMs ? -1 : 0);
+
+	let recentering = $state(false);
+	let recenterTimer: ReturnType<typeof setTimeout> | undefined;
+	const recenter = (): void => {
+		recentering = true;
+		onTimeChange?.(new Date());
+		clearTimeout(recenterTimer);
+		recenterTimer = setTimeout(() => {
+			recentering = false;
+		}, 320);
+	};
+
+	/* ── interaction: tape drag / tap-to-jump / keyboard ────────────────── */
+
+	type DragState = {
+		id: number;
+		p0: number;
+		c0: number;
+		t0: number;
+		claimed: boolean;
+		touch: boolean;
+	};
+	let drag: DragState | null = null;
+	let dragging = $state(false);
+	let rafId = 0;
+	let pendingAxisPx: number | null = null;
+
+	const axisOf = (ev: PointerEvent): number => (horizontal ? ev.clientX : ev.clientY);
+	const crossOf = (ev: PointerEvent): number => (horizontal ? ev.clientY : ev.clientX);
+
+	const flushScrub = (): void => {
+		rafId = 0;
+		if (pendingAxisPx === null || !drag || !msPerPx) return;
+		const next = drag.t0 + (drag.p0 - pendingAxisPx) * msPerPx;
+		pendingAxisPx = null;
+		onTimeChange?.(new Date(next));
+	};
+
+	const handlePointerDown = (ev: PointerEvent): void => {
+		if (!onTimeChange || !barEl || !msPerPx) return;
+		drag = {
+			id: ev.pointerId,
+			p0: axisOf(ev),
+			c0: crossOf(ev),
+			t0: cursorMs,
+			claimed: false,
+			touch: ev.pointerType === 'touch',
+		};
+		barEl.setPointerCapture?.(ev.pointerId);
+	};
+
+	const handlePointerMove = (ev: PointerEvent): void => {
+		if (!drag || ev.pointerId !== drag.id) return;
+		const p = axisOf(ev);
+		const dAxis = p - drag.p0;
+		const dCross = crossOf(ev) - drag.c0;
+		if (!drag.claimed) {
+			// Slope-claiming: 4px mouse slop, ~8px on touch. A touch gesture that
+			// reads as vertical is released so it reaches the dock sheet beneath
+			// (touch-action: pan-y lets the browser keep scrolling it).
+			const slop = drag.touch ? 8 : 4;
+			if (Math.max(Math.abs(dAxis), Math.abs(dCross)) < slop) return;
+			if (drag.touch && Math.abs(dCross) > Math.abs(dAxis)) {
+				barEl?.releasePointerCapture?.(drag.id);
+				drag = null;
+				return;
+			}
+			drag.claimed = true;
+			dragging = true;
+		}
+		ev.preventDefault();
+		pendingAxisPx = p;
+		if (!rafId) rafId = requestAnimationFrame(flushScrub);
+	};
+
+	const handlePointerEnd = (ev: PointerEvent): void => {
+		if (!drag || ev.pointerId !== drag.id) return;
+		const wasClaimed = drag.claimed;
+		// A scrub queued for the next frame must not be dropped by the release:
+		// a fast flick can land pointerup before the rAF fires, and the throttle
+		// would silently discard the gesture's final position.
+		if (wasClaimed && pendingAxisPx !== null) {
+			if (rafId) cancelAnimationFrame(rafId);
+			flushScrub();
+		}
+		barEl?.releasePointerCapture?.(drag.id);
+		if (!wasClaimed && ev.type === 'pointerup' && barEl && onTimeChange && msPerPx) {
+			// Tap-to-jump: the tapped axis position maps through the centered tape.
+			const rect = barEl.getBoundingClientRect();
+			const center = horizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+			onTimeChange(new Date(cursorMs + (axisOf(ev) - center) * msPerPx));
+		}
+		drag = null;
+		dragging = false;
+		pendingAxisPx = null;
+	};
+
+	const handleKey = (ev: KeyboardEvent): void => {
+		if (!onTimeChange) return;
+		if (ev.key === 'Home') {
+			ev.preventDefault();
+			recenter();
+			return;
+		}
+		const step = (ev.shiftKey ? 60 : 15) * 60_000;
+		if (ev.key === 'ArrowLeft') {
+			ev.preventDefault();
+			onTimeChange(new Date(cursorMs - step));
+		} else if (ev.key === 'ArrowRight') {
+			ev.preventDefault();
+			onTimeChange(new Date(cursorMs + step));
+		}
+	};
+
+	onDestroy(() => {
+		fetchGen++;
+		if (rafId) cancelAnimationFrame(rafId);
+		clearTimeout(recenterTimer);
+	});
+
+	/* ── header labels ──────────────────────────────────────────────────── */
+
+	const fmtDayShort = (d: Date): string => d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+	const utcOffsetLabel = (d: Date): string => {
+		const offMin = -d.getTimezoneOffset();
+		const sign = offMin < 0 ? '−' : '+';
+		const abs = Math.abs(offMin);
+		const h = Math.floor(abs / 60);
+		const m = abs % 60;
+		return `UTC${sign}${h}${m ? `:${m.toString().padStart(2, '0')}` : ''}`;
+	};
+	const dateSpanLabel = $derived.by(() => {
+		const a = new Date(cursorMs - visibleHalfMs);
+		const b = new Date(cursorMs + visibleHalfMs);
+		return `${fmtDayShort(a)} → ${fmtDayShort(b)} · ${utcOffsetLabel(time)}`;
+	});
+
+	const ariaValueText = $derived(
+		`${fmtClockLocal(time)} local · ${fmtClockUtc(time)} UTC — ${cursorPhase?.label.toLowerCase() ?? 'loading'}`,
+	);
+</script>
+
+<div class="gantt time-helix" aria-label="Twilight strip for viewport center">
+	<div class="header">
+		<HelpTooltip
+			text={cursorPhase
+				? `Cursor sits in ${cursorPhase.label.toLowerCase()} — ${cursorPhase.description}`
+				: 'Time cursor on the helix. Drag the ribbon or use arrow keys to scrub; Home returns to now.'}
+		>
+			{#snippet trigger()}
+				<span class="clock-chip" title={cursorPhase?.description}>
+					{fmtClockLocal(time)}
+					<span class="phase-dot" style="background: {cursorPhase?.color ?? NEUTRAL_COLOR};" aria-hidden="true"></span>
+				</span>
+			{/snippet}
+		</HelpTooltip>
+		{#if !coincident}
+			<button type="button" class="recenter-chip" onclick={recenter} aria-label="Recenter on the current time">
+				↺ now
+			</button>
+		{/if}
+		<span class="header-spacer" aria-hidden="true"></span>
+		<span class="wide-only date-span">
+			{dateSpanLabel}
+			<span class="utc-clock">UTC {fmtClockUtc(time)}</span>
+		</span>
+		<span class="wide-only">
+			{#if cursorDayReadout}
+				{@const moon = cursorDayReadout.moon}
+				<HelpTooltip
+					text="Moon phase angle {moon.phaseDeg.toFixed(1)}° · illumination {(moon.illumination * 100).toFixed(1)}%"
+				>
+					{#snippet trigger()}
+						<span class="phase">
+							{moon.phaseName} · {(moon.illumination * 100).toFixed(0)}%
+						</span>
+					{/snippet}
+				</HelpTooltip>
+			{:else if loading}
+				<span class="phase">…</span>
+			{/if}
+		</span>
+	</div>
+	<div class="strip">
+		<div
+			class="bar"
+			class:dragging
+			bind:this={barEl}
+			onpointerdown={handlePointerDown}
+			onpointermove={handlePointerMove}
+			onpointerup={handlePointerEnd}
+			onpointercancel={handlePointerEnd}
+			onkeydown={handleKey}
+			role="slider"
+			tabindex="0"
+			aria-label="Time scrubber"
+			aria-orientation={orientation}
+			aria-valuemin={0}
+			aria-valuemax={1439}
+			aria-valuenow={time.getUTCHours() * 60 + time.getUTCMinutes()}
+			aria-valuetext={ariaValueText}
+		>
+			{#if geom && scales}
+				<svg class="ribbon" width="100%" height="100%" viewBox="0 0 {boxW} {boxH}" aria-hidden="true">
+					<defs>
+						<linearGradient id={gradId} x1="0" y1="0" x2={horizontal ? 1 : 0} y2={horizontal ? 0 : 1}>
+							{#each stops as stop (stop.offset)}
+								<stop offset={stop.offset} stop-color="#ffffff" stop-opacity={stop.opacity} />
+							{/each}
+						</linearGradient>
+						<!-- The Hann envelope is SCREEN-FIXED (the cursor is always the
+						     center) — encoded once as a mask; only the pan group moves. -->
+						<mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width={boxW} height={boxH}>
+							<rect x="0" y="0" width={boxW} height={boxH} fill="url(#{gradId})" />
+						</mask>
+					</defs>
+					<g mask="url(#{maskId})">
+						<g class="pan" class:recentering style="transform: {panTransform};">
+							<!-- Painter's order: far limb first, near (dusk) limb on top. -->
+							<g>
+								{#each backSegments as s, i (i)}
+									<line
+										class="stripe"
+										data-phase={s.phase}
+										x1={s.x1}
+										y1={s.y1}
+										x2={s.x2}
+										y2={s.y2}
+										stroke={s.color}
+										stroke-width={s.strokeWidth}
+										stroke-opacity={s.alpha}
+										stroke-linecap="round"
+									/>
+								{/each}
+							</g>
+							<g>
+								{#each frontSegments as s, i (i)}
+									<line
+										class="stripe"
+										data-phase={s.phase}
+										x1={s.x1}
+										y1={s.y1}
+										x2={s.x2}
+										y2={s.y2}
+										stroke={s.color}
+										stroke-width={s.strokeWidth}
+										stroke-opacity={s.alpha}
+										stroke-linecap="round"
+									/>
+								{/each}
+							</g>
+							{#each noduleViews as nv (nv.id)}
+								{#if nv.glow}
+									<circle
+										cx={nv.x}
+										cy={nv.y}
+										r={nv.n.radius + 3.5}
+										fill="none"
+										stroke={nv.n.color}
+										stroke-opacity={0.3 * nv.alpha}
+										stroke-width="1.5"
+									/>
+								{/if}
+								<circle
+									cx={nv.x}
+									cy={nv.y}
+									r={nv.n.radius}
+									fill={nv.n.color}
+									fill-opacity={nv.alpha}
+									stroke="rgba(6, 8, 13, 0.8)"
+									stroke-width="0.75"
+								/>
+							{/each}
+							<!-- Wall-clock now: a thin staff riding the tape at its absolute
+							     position (a rect so its bounding box is real for e2e). -->
+							{#if horizontal}
+								<rect data-now-marker class="now-staff" x={nowAxisPx - 1} y={2} width="2" height={boxH - 4} />
+							{:else}
+								<rect data-now-marker class="now-staff" x={2} y={nowAxisPx - 1} width={boxW - 4} height="2" />
+							{/if}
+						</g>
+					</g>
+					<!-- Screen-fixed center staff = the CURSOR. Bold white-on-amber when
+					     it coincides with now; amber when scrubbed apart. -->
+					{#if horizontal}
+						{#if coincident}
+							<line class="center-halo" x1={boxW / 2} y1="0" x2={boxW / 2} y2={boxH} stroke-width="5" />
+							<line class="center-staff coincident" x1={boxW / 2} y1="0" x2={boxW / 2} y2={boxH} stroke-width="2" />
+							<text class="now-label" x={boxW / 2} y="10" text-anchor="middle">now {fmtClockLocal(now)}</text>
+						{:else}
+							<line class="center-staff" x1={boxW / 2} y1="0" x2={boxW / 2} y2={boxH} stroke-width="2" />
+						{/if}
+					{:else if coincident}
+						<line class="center-halo" x1="0" y1={boxH / 2} x2={boxW} y2={boxH / 2} stroke-width="5" />
+						<line class="center-staff coincident" x1="0" y1={boxH / 2} x2={boxW} y2={boxH / 2} stroke-width="2" />
+						<text class="now-label" x={boxW / 2} y="10" text-anchor="middle">now {fmtClockLocal(now)}</text>
+					{:else}
+						<line class="center-staff" x1="0" y1={boxH / 2} x2={boxW} y2={boxH / 2} stroke-width="2" />
+					{/if}
+					<!-- Now outside the window: an edge chevron pointing toward it. -->
+					{#if nowOffEdge === 1}
+						{#if horizontal}
+							<path
+								class="now-chevron"
+								d="M {boxW - 11} {boxH / 2 - 5} L {boxW - 4} {boxH / 2} L {boxW - 11} {boxH / 2 + 5} Z"
+							/>
+						{:else}
+							<path
+								class="now-chevron"
+								d="M {boxW / 2 - 5} {boxH - 11} L {boxW / 2} {boxH - 4} L {boxW / 2 + 5} {boxH - 11} Z"
+							/>
+						{/if}
+					{:else if nowOffEdge === -1}
+						{#if horizontal}
+							<path class="now-chevron" d="M 11 {boxH / 2 - 5} L 4 {boxH / 2} L 11 {boxH / 2 + 5} Z" />
+						{:else}
+							<path class="now-chevron" d="M {boxW / 2 - 5} 11 L {boxW / 2} 4 L {boxW / 2 + 5} 11 Z" />
+						{/if}
+					{/if}
+				</svg>
+			{/if}
+		</div>
+		<!-- Invisible 24×24 hit targets over the nodules, translated with the same
+		     pan as the tape. A sibling of the slider (not a child) so the buttons
+		     stay real interactive elements in the accessibility tree. -->
+		<div class="nodule-layer" style="transform: {panTransform};">
+			{#each noduleViews as nv (nv.id)}
+				{@const d = new Date(nv.n.tMs)}
+				<div class="nodule-hit-wrap" style="left: {nv.x - 12}px; top: {nv.y - 12}px;">
+					<Popover
+						positioning={{
+							placement: 'top',
+							strategy: 'fixed',
+							overflowPadding: 12,
+							flip: true,
+							slide: true,
+							fitViewport: true,
+						}}
+					>
+						<Popover.Trigger class="nodule-hit" aria-label="{nv.n.tip.long} {fmtClockLocal(d)}"></Popover.Trigger>
+						<Popover.Positioner>
+							{#snippet element(attributes)}
+								<div {...attributes} use:portal>
+									<Popover.Content class="help-tooltip-content">
+										<div>
+											<strong>{nv.n.tip.long}</strong>
+											{fmtClockLocal(d)} local · {fmtClockUtc(d)} UTC
+											<br />
+											{nv.n.tip.description}
+										</div>
+									</Popover.Content>
+								</div>
+							{/snippet}
+						</Popover.Positioner>
+					</Popover>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.gantt {
+		position: fixed;
+		left: 1rem;
+		/* Leave room for the MapToolbar's column on the right. */
+		right: var(--map-toolbar-inset-rem, 5rem);
+		bottom: calc(var(--gantt-bottom-rem, 0.75rem) + env(safe-area-inset-bottom, 0px));
+		background: rgba(8, 10, 16, 0.92);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 6px;
+		padding: 0.45rem 0.75rem 0.55rem;
+		color: #e9ecf3;
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.7rem;
+		z-index: 6;
+		pointer-events: auto;
+		/* The tape pans under a screen-fixed mask — never let it spill into the
+		   document (e2e/overflow.spec gates document-level overflow). No
+		   backdrop-filter here on purpose: iOS compositing hazard. */
+		overflow: hidden;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+	}
+	.header {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		margin-bottom: 0.3rem;
+		font-size: 0.65rem;
+		opacity: 0.9;
+		min-height: 1.25rem;
+	}
+	.header-spacer {
+		flex: 1 1 auto;
+	}
+	.clock-chip {
+		font-variant-numeric: tabular-nums;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+	}
+	.phase-dot {
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: 50%;
+		border: 1px solid rgba(255, 255, 255, 0.35);
+		display: inline-block;
+		flex: 0 0 auto;
+	}
+	.recenter-chip {
+		font: inherit;
+		font-size: 0.6rem;
+		font-variant-numeric: tabular-nums;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.05rem 0.4rem;
+		border-radius: 999px;
+		background: rgba(var(--accent-amber-rgb), 0.12);
+		border: 1px solid rgba(var(--accent-amber-rgb), 0.3);
+		color: var(--accent-amber);
+		cursor: pointer;
+	}
+	.recenter-chip:focus-visible {
+		outline: 2px solid rgba(127, 187, 255, 0.7);
+		outline-offset: 1px;
+	}
+	.date-span {
+		font-variant-numeric: tabular-nums;
+		opacity: 0.75;
+		white-space: nowrap;
+	}
+	.utc-clock {
+		font-size: 0.58rem;
+		opacity: 0.7;
+		margin-left: 0.3rem;
+	}
+	.phase {
+		opacity: 0.7;
+	}
+	.strip {
+		position: relative;
+		height: 78px;
+		overflow: hidden;
+	}
+	.bar {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-radius: 4px;
+		border: 1px solid rgba(255, 255, 255, 0.12);
+		background: rgba(10, 13, 22, 0.55);
+		cursor: grab;
+		touch-action: pan-y;
+		outline: none;
+	}
+	.bar.dragging {
+		cursor: grabbing;
+	}
+	.bar:focus-visible {
+		box-shadow: 0 0 0 2px rgba(127, 187, 255, 0.5);
+	}
+	.ribbon {
+		display: block;
+		width: 100%;
+		height: 100%;
+		/* The phase palette IS the data — keep it under forced colors. The
+		   header chips above take system colors as usual. */
+		forced-color-adjust: none;
+	}
+	.pan {
+		will-change: transform;
+	}
+	.pan.recentering {
+		transition: transform 280ms ease;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.pan.recentering {
+			transition: none;
+		}
+	}
+	.now-staff {
+		fill: rgba(255, 255, 255, 0.8);
+	}
+	.center-staff {
+		stroke: var(--accent-amber);
+	}
+	.center-staff.coincident {
+		stroke: #ffffff;
+	}
+	.center-halo {
+		stroke: var(--accent-amber);
+		stroke-opacity: 0.4;
+	}
+	.now-label {
+		fill: rgba(255, 255, 255, 0.85);
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.55rem;
+	}
+	.now-chevron {
+		fill: var(--accent-amber);
+	}
+	.nodule-layer {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		forced-color-adjust: none;
+	}
+	.nodule-hit-wrap {
+		position: absolute;
+		width: 24px;
+		height: 24px;
+		pointer-events: auto;
+	}
+	:global(.time-helix .nodule-hit) {
+		display: block;
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		background: none;
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+	:global(.time-helix .nodule-hit:focus-visible) {
+		outline: 2px solid rgba(127, 187, 255, 0.7);
+		outline-offset: -2px;
+	}
+	/* Mirrors the gantt's W4b media override: below 640px (or short screens)
+	   the strip compacts and the WIDE-only chips (date span + moon) drop —
+	   COMPACT keeps exactly one clock chip plus the ↺ now chip when scrubbed. */
+	@media (max-width: 639.98px), (max-height: 500px) {
+		.gantt {
+			left: 0.75rem;
+			right: var(--map-toolbar-inset-rem, 5rem);
+			padding: 0.4rem 0.65rem 0.45rem;
+		}
+		.header {
+			gap: 0.35rem 0.6rem;
+		}
+		.strip {
+			height: 60px;
+		}
+		.wide-only {
+			display: none;
+		}
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 90c31b3..59cba3c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -96,7 +96,7 @@
 		X,
 	} from '@lucide/svelte';
 	import Tour, { type TourStep } from '$lib/components/Tour.svelte';
-	import EphemerisGantt from '$lib/components/EphemerisGantt.svelte';
+	import TimeHelix from '$lib/components/TimeHelix.svelte';
 	import GeocoderSearch from '$lib/components/GeocoderSearch.svelte';
 	import LayerRail, { type LayerState } from '$lib/components/LayerRail.svelte';
 	import LensSwitcher from '$lib/components/LensSwitcher.svelte';
@@ -3080,7 +3080,7 @@
 
 {#snippet ganttBlock()}
 	{#if ephemerisOpen}
-		<EphemerisGantt
+		<TimeHelix
 			location={viewCenter}
 			time={ephemerisTime}
 			bounds={viewBounds}