Click the map to snap to the {ZARR_STORE.spatialResolutionDeg}°
grid used by the Zarr Store.
-
{selection ? (
-
-
-
- Click
- - {formatGeoPoint(selection.click)}
-
-
-
- Grid cell
- - {formatGeoPoint(selection.grid)}
-
-
-
- Indices
- -
- lon {selection.grid.lonIndex}, lat {selection.grid.latIndex}
-
-
-
-
- Variable
- - {ZARR_STORE.defaultVariable}
-
-
-
- Time series
- -
- {loadingSeries && "Fetching from Zarr…"}
- {!loadingSeries && seriesError && seriesError}
- {!loadingSeries &&
- !seriesError &&
- seriesPreview &&
- seriesLength !== null &&
- `${seriesLength} steps · first ${seriesPreview
- .map((value) => value.toFixed(2))
- .join(", ")}${seriesUnits ? ` ${seriesUnits}` : ""}`}
-
-
-
+ <>
+
+
+
- Click
+ - {formatGeoPoint(selection.click)}
+
+
+
- Grid cell
+ - {formatGeoPoint(selection.grid)}
+
+
+
- Indices
+ -
+ lon {selection.grid.lonIndex}, lat {selection.grid.latIndex}
+
+
+
+
- Variable
+ - {ZARR_STORE.defaultVariable}
+
+
+
+
+ Time series
+
+ {loadingSeries && (
+
+ )}
+ {!loadingSeries && seriesError && (
+
{seriesError}
+ )}
+ {!loadingSeries && !seriesError && seriesValues && (
+
+ )}
+
+
) : (
-
No pixel selected yet.
+
No pixel selected yet.
)}
diff --git a/src/components/map/TimeSeriesPlot.tsx b/src/components/map/TimeSeriesPlot.tsx
new file mode 100644
index 0000000..0df1854
--- /dev/null
+++ b/src/components/map/TimeSeriesPlot.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+ CartesianGrid,
+ Line,
+ LineChart,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import {
+ formatSeriesValue,
+ TIME_SERIES_CHART_MARGIN,
+ TIME_SERIES_PLOT_HEIGHT,
+ timeSeriesChartTheme,
+} from "@/components/map/timeSeriesChartConfig";
+import { dailyMeanSeries } from "@/lib/zarr/series";
+import { useTheme } from "@/providers/ThemeProvider";
+
+export { TIME_SERIES_PLOT_HEIGHT } from "@/components/map/timeSeriesChartConfig";
+
+type TimeSeriesPlotProps = {
+ values: Float32Array;
+ units?: string | null;
+ hoursPerDay?: number;
+};
+
+export function TimeSeriesPlot({
+ values,
+ units,
+ hoursPerDay = 24,
+}: TimeSeriesPlotProps) {
+ const { isLight } = useTheme();
+ const data = useMemo(
+ () => dailyMeanSeries(values, hoursPerDay),
+ [values, hoursPerDay],
+ );
+
+ const { stroke, grid, tick, tooltipBg, tooltipBorder } =
+ timeSeriesChartTheme(isLight);
+
+ if (data.length === 0) return null;
+
+ return (
+
+
+
+
+
+
+ `Day ${day}`}
+ formatter={(value) => [
+ `${formatSeriesValue(Number(value))}${units ? ` ${units}` : ""}`,
+ "Daily mean",
+ ]}
+ />
+
+
+
+
+ {values.length.toLocaleString()} hourly steps · {data.length} daily means
+ {units ? ` · ${units}` : ""}
+
+
+ );
+}
diff --git a/src/components/map/TimeSeriesPlotLoading.tsx b/src/components/map/TimeSeriesPlotLoading.tsx
new file mode 100644
index 0000000..d5c3db9
--- /dev/null
+++ b/src/components/map/TimeSeriesPlotLoading.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import {
+ CartesianGrid,
+ LineChart,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from "recharts";
+import {
+ dayCountForHistory,
+ formatSeriesValue,
+ TIME_SERIES_CHART_MARGIN,
+ TIME_SERIES_PLOT_HEIGHT,
+ timeSeriesChartTheme,
+} from "@/components/map/timeSeriesChartConfig";
+import { useTheme } from "@/providers/ThemeProvider";
+
+type TimeSeriesPlotLoadingProps = {
+ historyYears: number;
+};
+
+export function TimeSeriesPlotLoading({
+ historyYears,
+}: TimeSeriesPlotLoadingProps) {
+ const { isLight } = useTheme();
+ const { grid, tick } = timeSeriesChartTheme(isLight);
+ const dayCount = dayCountForHistory(historyYears);
+
+ return (
+
+
+
+
+
+
+
+
+
Loading…
+
+ );
+}
diff --git a/src/components/map/timeSeriesChartConfig.ts b/src/components/map/timeSeriesChartConfig.ts
new file mode 100644
index 0000000..f91c029
--- /dev/null
+++ b/src/components/map/timeSeriesChartConfig.ts
@@ -0,0 +1,32 @@
+import { colors } from "@/lib/design-system/tokens";
+import { yearsToDayRange } from "@/lib/zarr/timeRange";
+
+export const TIME_SERIES_PLOT_HEIGHT = 220;
+
+export const TIME_SERIES_CHART_MARGIN = {
+ top: 12,
+ right: 8,
+ left: 0,
+ bottom: 20,
+} as const;
+
+export function formatSeriesValue(value: number): string {
+ return value.toFixed(2);
+}
+
+export function dayCountForHistory(historyYears: number): number {
+ const [start, stop] = yearsToDayRange(historyYears);
+ return stop - start;
+}
+
+export function timeSeriesChartTheme(isLight: boolean) {
+ return {
+ stroke: isLight ? colors.accentSolid : colors.accentDark,
+ grid: isLight ? "rgba(10, 10, 10, 0.08)" : "rgba(255, 255, 255, 0.08)",
+ tick: isLight ? "rgba(10, 10, 10, 0.56)" : "rgba(255, 255, 255, 0.56)",
+ tooltipBg: isLight ? colors.pageLight : colors.pageDark,
+ tooltipBorder: isLight
+ ? "rgba(10, 10, 10, 0.16)"
+ : "rgba(255, 255, 255, 0.18)",
+ };
+}
diff --git a/src/components/nav/Brand.tsx b/src/components/nav/Brand.tsx
index bcbc235..c02d709 100644
--- a/src/components/nav/Brand.tsx
+++ b/src/components/nav/Brand.tsx
@@ -8,7 +8,7 @@ export function Brand() {
-
+
{SITE_NAME}
diff --git a/src/components/nav/MapNav.tsx b/src/components/nav/MapNav.tsx
new file mode 100644
index 0000000..9a9f2d6
--- /dev/null
+++ b/src/components/nav/MapNav.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { useId, useState } from "react";
+import { BrandMark } from "@/icons/BrandMark";
+import { ThemeToggle } from "@/components/ui/ThemeToggle";
+import { MobileMenuButton } from "@/components/nav/MobileMenuButton";
+import { MapNavMenu } from "@/components/nav/MapNavMenu";
+import { SITE_NAME } from "@/lib/constants/site";
+
+export function MapNav() {
+ const [menuOpen, setMenuOpen] = useState(false);
+ const menuId = useId();
+
+ return (
+ <>
+
+
+ setMenuOpen(false)}
+ menuId={menuId}
+ />
+
+ );
+}
diff --git a/src/components/nav/MapNavMenu.tsx b/src/components/nav/MapNavMenu.tsx
new file mode 100644
index 0000000..a5cd039
--- /dev/null
+++ b/src/components/nav/MapNavMenu.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+import { NAV_LINKS } from "@/lib/constants/nav";
+import { isActiveLink } from "@/lib/nav/isActiveLink";
+
+type MapNavMenuProps = {
+ open: boolean;
+ onClose: () => void;
+ menuId: string;
+};
+
+export function MapNavMenu({ open, onClose, menuId }: MapNavMenuProps) {
+ const pathname = usePathname();
+
+ useEffect(() => {
+ onClose();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [pathname]);
+
+ if (!open) return null;
+
+ return (
+
+ );
+}
diff --git a/src/components/nav/MobileMenuButton.tsx b/src/components/nav/MobileMenuButton.tsx
index 4d7fecc..4955c95 100644
--- a/src/components/nav/MobileMenuButton.tsx
+++ b/src/components/nav/MobileMenuButton.tsx
@@ -7,12 +7,14 @@ type MobileMenuButtonProps = {
open: boolean;
onToggle: () => void;
controlsId: string;
+ className?: string;
};
export function MobileMenuButton({
open,
onToggle,
controlsId,
+ className,
}: MobileMenuButtonProps) {
return (
diff --git a/src/components/nav/MobileMenuDropdown.tsx b/src/components/nav/MobileMenuDropdown.tsx
index 0d22520..fa149e4 100644
--- a/src/components/nav/MobileMenuDropdown.tsx
+++ b/src/components/nav/MobileMenuDropdown.tsx
@@ -5,12 +5,7 @@ import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { ArrowUpRight } from "@/icons/ArrowUpRight";
import { NAV_LINKS } from "@/lib/constants/nav";
-
-function isActive(pathname: string, href: string): boolean {
- if (href === "#") return false;
- if (href === "/") return pathname === "/";
- return pathname === href || pathname.startsWith(`${href}/`);
-}
+import { isActiveLink } from "@/lib/nav/isActiveLink";
type MobileMenuDropdownProps = {
open: boolean;
@@ -58,13 +53,13 @@ export function MobileMenuDropdown({
{link.label}
))}
- {!isActive(pathname, "/map") && (
+ {!isActiveLink(pathname, "/map") && (
Open Map
diff --git a/src/components/nav/NavLinks.tsx b/src/components/nav/NavLinks.tsx
index f7c6ea8..1d0a2c0 100644
--- a/src/components/nav/NavLinks.tsx
+++ b/src/components/nav/NavLinks.tsx
@@ -3,12 +3,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { NAV_LINKS } from "@/lib/constants/nav";
-
-function isActive(pathname: string, href: string): boolean {
- if (href === "#") return false;
- if (href === "/") return pathname === "/";
- return pathname === href || pathname.startsWith(`${href}/`);
-}
+import { isActiveLink } from "@/lib/nav/isActiveLink";
export function NavLinks() {
const pathname = usePathname();
@@ -19,7 +14,7 @@ export function NavLinks() {
{link.label}
diff --git a/src/components/ui/ThemeToggle.tsx b/src/components/ui/ThemeToggle.tsx
index 6250f43..32ec93e 100644
--- a/src/components/ui/ThemeToggle.tsx
+++ b/src/components/ui/ThemeToggle.tsx
@@ -5,11 +5,19 @@ import { MoonIcon } from "@/icons/MoonIcon";
import { SunIcon } from "@/icons/SunIcon";
import { useTheme } from "@/providers/ThemeProvider";
-export function ThemeToggle() {
+type ThemeToggleProps = {
+ className?: string;
+};
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
const { toggleTheme } = useTheme();
return (
-
+
diff --git a/src/lib/constants/theme.ts b/src/lib/constants/theme.ts
index 1bda4ab..f85441b 100644
--- a/src/lib/constants/theme.ts
+++ b/src/lib/constants/theme.ts
@@ -1,16 +1,26 @@
+import {
+ accentRgb,
+ coldRgb,
+ heroBaseColor,
+} from "@/lib/design-system/tokens";
+
+export {
+ accentBrightRgb,
+ accentRgb,
+ coldRgb,
+ colors,
+ heroBaseColor,
+ primitives,
+ radius,
+ spacing,
+} from "@/lib/design-system/tokens";
+
export const HERO_SEED = 41.7;
-export const TEAL_RGB = [0, 108, 102] as const;
+export const TEAL_RGB = accentRgb.light;
-/** Bright teal for dark UI (matches --accent in dark mode). */
-export const TEAL_ON_DARK_RGB = [82, 212, 200] as const;
+export const TEAL_ON_DARK_RGB = accentRgb.onDark;
-export const COLD_RGB = {
- light: [120, 120, 118] as const,
- dark: [150, 150, 150] as const,
-};
+export const COLD_RGB = coldRgb;
-export const HERO_BASE_COLOR = {
- light: "#F4F4F2",
- dark: "#070707",
-} as const;
+export const HERO_BASE_COLOR = heroBaseColor;
diff --git a/src/lib/design-system/tokens.ts b/src/lib/design-system/tokens.ts
new file mode 100644
index 0000000..938a384
--- /dev/null
+++ b/src/lib/design-system/tokens.ts
@@ -0,0 +1,60 @@
+/** Design tokens for canvas, WebGL, and other non-CSS consumers. */
+
+export const colors = {
+ accentSolid: "#006c66",
+ accentDark: "#52d4c8",
+ accentBrightLight: "#00837b",
+ accentBrightDark: "#7df5e8",
+ pageLight: "#f2f1ee",
+ pageDark: "#242424",
+ mapLight: "#f4f4f2",
+ mapDark: "#000000",
+ textLight: "#0a0a0a",
+ textDark: "#ffffff",
+} as const;
+
+/** RGB tuples aligned with `--accent` / `--accent-solid` in tokens.css */
+export const accentRgb = {
+ light: [0, 108, 102] as const,
+ onDark: [82, 212, 200] as const,
+} as const;
+
+export const accentBrightRgb = {
+ light: [0, 131, 123] as const,
+ dark: [125, 245, 232] as const,
+} as const;
+
+export const coldRgb = {
+ light: [120, 120, 118] as const,
+ dark: [150, 150, 150] as const,
+} as const;
+
+export const heroBaseColor = {
+ light: colors.pageLight,
+ dark: colors.pageDark,
+} as const;
+
+export const spacing = {
+ pageX: "clamp(16px, 3vw, 28px)",
+ pageWide: "clamp(22px, 6vw, 84px)",
+} as const;
+
+export const radius = {
+ sm: "10px",
+ md: "14px",
+ lg: "18px",
+ pill: "100px",
+} as const;
+
+/** CSS class names for shared primitives — use in components for consistency. */
+export const primitives = {
+ island: "island",
+ elevatedChip: "elevated-chip",
+ brandWord: "ds-brand-word",
+ title: "ds-title",
+ kicker: "ds-kicker",
+ label: "ds-label",
+ hint: "ds-hint",
+ navLink: "ds-nav-link",
+ enter: "ds-enter",
+} as const;
diff --git a/src/lib/hero/drawHeroField.ts b/src/lib/hero/drawHeroField.ts
index 4616867..5ce97df 100644
--- a/src/lib/hero/drawHeroField.ts
+++ b/src/lib/hero/drawHeroField.ts
@@ -1,10 +1,53 @@
-import { fbm } from "@/lib/hero/noise";
+import { fbm, hash } from "@/lib/hero/noise";
+import { HERO_BASE_COLOR } from "@/lib/constants/theme";
const HERO_SEED = 41.7;
+/** Soft cluster hotspots — main group sits behind hero copy. */
+const HERO_CLUSTERS: Array<[number, number, number, number]> = [
+ [0.38, 0.48, 1.65, 0.62],
+ [0.68, 0.22, 2.15, 0.4],
+ [0.2, 0.34, 2.35, 0.34],
+ [0.78, 0.5, 2.05, 0.36],
+ [0.54, 0.7, 2.45, 0.28],
+ [0.14, 0.6, 2.7, 0.24],
+];
+
+function clusterBand(nx: number, ny: number): number {
+ let band = 0;
+ for (const [cx, cy, falloff, weight] of HERO_CLUSTERS) {
+ const dx = nx - cx;
+ const dy = ny - cy;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+ band = Math.max(band, Math.max(0, 1 - dist * falloff) * weight);
+ }
+ return band;
+}
+
+function dotPhase(i: number, j: number, salt: number): number {
+ return hash(i * 1.17 + salt, j * 0.93 + salt * 0.5, HERO_SEED) * Math.PI * 2;
+}
+
+/** Oscillate around the grid anchor; offset is zero at time 0. */
+function dotDrift(
+ time: number,
+ phase: number,
+ phaseB: number,
+ amp: number,
+): { x: number; y: number } {
+ return {
+ x:
+ (Math.sin(time * 0.55 + phase) - Math.sin(phase)) * amp +
+ (Math.cos(time * 0.37 + phaseB) - Math.cos(phaseB)) * amp * 0.55,
+ y:
+ (Math.cos(time * 0.48 + phaseB) - Math.cos(phaseB)) * amp +
+ (Math.sin(time * 0.41 + phase) - Math.sin(phase)) * amp * 0.55,
+ };
+}
+
function readHeroTokens(isLight: boolean) {
return {
- baseFill: isLight ? "#F4F4F2" : "#070707", // --bg-deep
+ baseFill: isLight ? HERO_BASE_COLOR.light : HERO_BASE_COLOR.dark,
dotFaint: isLight
? "rgba(10,10,10,.05)"
: "rgba(255,255,255,.045)", // --grid-line tint
@@ -14,20 +57,24 @@ function readHeroTokens(isLight: boolean) {
tealRgb: isLight
? ([0, 108, 102] as [number, number, number]) // --accent-solid / TEAL_RGB
: ([82, 212, 200] as [number, number, number]), // --accent / TEAL_ON_DARK_RGB
+ tealBrightRgb: isLight
+ ? ([0, 131, 123] as [number, number, number]) // --accent-bright light
+ : ([125, 245, 232] as [number, number, number]), // --accent-bright dark
coldRgb: isLight
? ([120, 120, 118] as [number, number, number]) // COLD_RGB.light
: ([150, 150, 150] as [number, number, number]), // COLD_RGB.dark
tealGlowDark: isLight
- ? (t: number) => `rgba(0,108,102,${(t - 0.8) * 0.5})` // TEAL_RGB
- : (t: number) => `rgba(82,212,200,${(t - 0.8) * 0.45})`, // TEAL_ON_DARK_RGB
- dotAlphaBase: isLight ? 0.1 : 0.16,
- dotAlphaScale: isLight ? 0.55 : 0.72,
+ ? (t: number) => `rgba(0,108,102,${(t - 0.65) * 0.62})`
+ : (t: number) => `rgba(125,245,232,${(t - 0.65) * 0.55})`,
+ dotAlphaBase: isLight ? 0.12 : 0.2,
+ dotAlphaScale: isLight ? 0.62 : 0.88,
};
}
export function drawHeroField(
canvas: HTMLCanvasElement,
isLight: boolean,
+ time = 0,
): void {
const ctx = canvas.getContext("2d");
if (!ctx) return;
@@ -51,6 +98,7 @@ export function drawHeroField(
const cold = tok.coldRgb;
const teal = tok.tealRgb;
+ const tealBright = tok.tealBrightRgb;
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
@@ -58,12 +106,11 @@ export function drawHeroField(
const y = j * step;
let n = fbm(i * 0.11 + 0.5, j * 0.13 + 0.5, HERO_SEED);
- const dx = x / w - 0.24;
- const dy = y / h - 0.78;
- const band = Math.max(0, 1 - Math.sqrt(dx * dx + dy * dy) * 1.5);
- n = Math.min(1, n * 0.85 + band * 0.5);
+ const patch = fbm(i * 0.21 + 1.7, j * 0.18 + 0.9, HERO_SEED + 13);
+ const band = clusterBand(x / w, y / h);
+ n = Math.min(1, n * 0.48 + patch * 0.4 + band * 0.52);
- const t = Math.max(0, (n - 0.34) / 0.66);
+ const t = Math.max(0, (n - 0.3) / 0.7);
if (t <= 0.02) {
ctx.fillStyle = tok.dotFaint;
@@ -73,22 +120,32 @@ export function drawHeroField(
continue;
}
- const r = 0.9 + t * 2.6;
- const mix = Math.pow(t, 1.3);
- const cr = Math.round(cold[0] + (teal[0] - cold[0]) * mix);
- const cg = Math.round(cold[1] + (teal[1] - cold[1]) * mix);
- const cb = Math.round(cold[2] + (teal[2] - cold[2]) * mix);
+ const phase = dotPhase(i, j, 0);
+ const phaseB = dotPhase(i, j, 1);
+ const drift = dotDrift(time, phase, phaseB, 2.4 + t * 3.2);
+ const drawX = x + drift.x;
+ const drawY = y + drift.y;
+
+ const r = 0.9 + t * 3;
+ const mix = Math.pow(t, 1.15);
+ const spark = Math.pow(Math.max(0, (t - 0.55) / 0.45), 0.75);
+ let cr = Math.round(cold[0] + (teal[0] - cold[0]) * mix);
+ let cg = Math.round(cold[1] + (teal[1] - cold[1]) * mix);
+ let cb = Math.round(cold[2] + (teal[2] - cold[2]) * mix);
+ cr = Math.round(cr + (tealBright[0] - cr) * spark);
+ cg = Math.round(cg + (tealBright[1] - cg) * spark);
+ cb = Math.round(cb + (tealBright[2] - cb) * spark);
const a = tok.dotAlphaBase + t * tok.dotAlphaScale;
ctx.fillStyle = `rgba(${cr},${cg},${cb},${a})`;
ctx.beginPath();
- ctx.arc(x, y, r, 0, 6.283);
+ ctx.arc(drawX, drawY, r, 0, 6.283);
ctx.fill();
- if (t > 0.8) {
+ if (t > 0.65) {
ctx.fillStyle = tok.tealGlowDark(t);
ctx.beginPath();
- ctx.arc(x, y, r * 2.6, 0, 6.283);
+ ctx.arc(drawX, drawY, r * 2.8, 0, 6.283);
ctx.fill();
}
}
diff --git a/src/lib/nav/isActiveLink.ts b/src/lib/nav/isActiveLink.ts
new file mode 100644
index 0000000..4f61be2
--- /dev/null
+++ b/src/lib/nav/isActiveLink.ts
@@ -0,0 +1,5 @@
+export function isActiveLink(pathname: string, href: string): boolean {
+ if (href === "#") return false;
+ if (href === "/") return pathname === "/";
+ return pathname === href || pathname.startsWith(`${href}/`);
+}
diff --git a/src/lib/zarr/series.test.ts b/src/lib/zarr/series.test.ts
new file mode 100644
index 0000000..d372bc1
--- /dev/null
+++ b/src/lib/zarr/series.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { dailyMeanSeries } from "@/lib/zarr/series";
+
+describe("dailyMeanSeries", () => {
+ it("averages each block of hourly values", () => {
+ const hourly = new Float32Array([
+ 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22,
+ 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46,
+ 100, 200,
+ ]);
+
+ expect(dailyMeanSeries(hourly, 24)).toEqual([
+ { day: 1, value: 23 },
+ { day: 2, value: 150 },
+ ]);
+ });
+
+ it("returns an empty array for empty input", () => {
+ expect(dailyMeanSeries(new Float32Array(), 24)).toEqual([]);
+ });
+});
diff --git a/src/lib/zarr/series.ts b/src/lib/zarr/series.ts
new file mode 100644
index 0000000..192cbad
--- /dev/null
+++ b/src/lib/zarr/series.ts
@@ -0,0 +1,32 @@
+export type DailyMeanPoint = {
+ day: number;
+ value: number;
+};
+
+/** Collapse hourly (or sub-daily) steps into one mean per day. */
+export function dailyMeanSeries(
+ values: ArrayLike,
+ hoursPerDay = 24,
+): DailyMeanPoint[] {
+ if (values.length === 0 || hoursPerDay <= 0) return [];
+
+ const dayCount = Math.ceil(values.length / hoursPerDay);
+ const points: DailyMeanPoint[] = [];
+
+ for (let day = 0; day < dayCount; day++) {
+ const start = day * hoursPerDay;
+ const end = Math.min(start + hoursPerDay, values.length);
+ let sum = 0;
+
+ for (let i = start; i < end; i++) {
+ sum += values[i]!;
+ }
+
+ points.push({
+ day: day + 1,
+ value: sum / (end - start),
+ });
+ }
+
+ return points;
+}
diff --git a/src/styles/primitives.css b/src/styles/primitives.css
new file mode 100644
index 0000000..94fd5a5
--- /dev/null
+++ b/src/styles/primitives.css
@@ -0,0 +1,175 @@
+/* Shared UI primitives — compose these classes in components. */
+
+.island,
+.map-island {
+ border: 1px solid var(--map-island-border, var(--elevated-border));
+ border-radius: var(--radius-lg);
+ color: var(--text);
+ background: var(--elevated-bg);
+ backdrop-filter: blur(var(--blur-elevated));
+ -webkit-backdrop-filter: blur(var(--blur-elevated));
+ box-shadow: var(--elevated-shadow);
+}
+
+.elevated-chip,
+.map-nav-chip:not(.icon-btn) {
+ border: 1px solid var(--elevated-border);
+ border-radius: var(--radius-md);
+ background: var(--elevated-bg);
+ backdrop-filter: blur(var(--blur-elevated));
+ -webkit-backdrop-filter: blur(var(--blur-elevated));
+ box-shadow: var(--elevated-shadow);
+ color: var(--text);
+ transition:
+ border-color var(--duration-fast),
+ background var(--duration-fast);
+}
+
+.map-nav-chip.icon-btn {
+ border: 1px solid var(--elevated-border);
+ border-radius: 50%;
+ background: var(--elevated-bg);
+ backdrop-filter: blur(var(--blur-elevated));
+ -webkit-backdrop-filter: blur(var(--blur-elevated));
+ box-shadow: var(--elevated-shadow);
+ color: var(--text);
+ transition:
+ border-color var(--duration-fast),
+ background var(--duration-fast);
+}
+
+.elevated-chip:hover,
+.map-nav-theme.icon-btn:hover,
+.map-nav-brand:hover,
+.map-nav-chip.icon-btn:hover {
+ border-color: color-mix(in srgb, var(--elevated-border) 60%, var(--text));
+ background: color-mix(in srgb, var(--elevated-bg) 88%, var(--surface-2));
+}
+
+.ds-brand-word,
+.brand .word,
+.map-nav-brand-word {
+ font-weight: 600;
+ font-size: var(--font-size-lg);
+ letter-spacing: var(--tracking-snug);
+ white-space: nowrap;
+}
+
+.brand .word {
+ font-size: var(--font-size-brand);
+}
+
+.ds-brand-word b,
+.brand .word b,
+.map-nav-brand-word b {
+ font-weight: 600;
+}
+
+.ds-title,
+.map-readout-title {
+ font-size: var(--font-size-xl);
+ font-weight: 600;
+ letter-spacing: var(--tracking-tight);
+ margin-bottom: 0;
+ color: var(--text);
+}
+
+.ds-kicker,
+.map-readout-kicker {
+ display: inline-flex;
+ align-items: center;
+ width: fit-content;
+ flex-shrink: 0;
+ font-size: var(--font-size-xs);
+ font-weight: 600;
+ letter-spacing: var(--tracking-wider);
+ text-transform: uppercase;
+ color: var(--accent);
+ padding: 5px 10px;
+ border-radius: var(--radius-pill);
+ border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
+ background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+.ds-label,
+.map-readout-control-label {
+ font-size: var(--font-size-sm);
+ letter-spacing: var(--tracking-wide);
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ font-weight: 500;
+}
+
+.ds-hint,
+.map-readout-hint,
+.map-readout-empty {
+ color: var(--text-secondary);
+ font-size: var(--font-size-meta);
+ line-height: 1.55;
+}
+
+.ds-nav-link,
+.map-nav-menu-links a {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ font-size: var(--font-size-base);
+ color: var(--text-secondary);
+ padding: 7px 10px;
+ border-radius: var(--radius-sm);
+ letter-spacing: var(--tracking-normal);
+ transition:
+ color var(--duration-fast),
+ background var(--duration-fast);
+}
+
+.ds-nav-link:hover,
+.map-nav-menu-links a:hover {
+ color: var(--text);
+ background: var(--surface-2);
+}
+
+.ds-nav-link.active,
+.map-nav-menu-links a.active {
+ color: var(--text);
+ background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
+}
+
+.ds-nav-link.active::before,
+.map-nav-menu-links a.active::before {
+ content: "";
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: var(--accent);
+ flex-shrink: 0;
+}
+
+.ds-enter {
+ animation: fadeIn var(--duration-enter) var(--ease-out);
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.map-panel {
+ position: fixed;
+ top: var(--map-panel-top);
+ padding: var(--space-5) var(--space-5) var(--space-4);
+}
+
+.map-panel--left {
+ left: var(--space-page-x);
+ z-index: 2;
+}
+
+.map-panel--right {
+ right: var(--space-page-x);
+ z-index: 81;
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..683cf2b
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,112 @@
+/* EarthPrints design tokens — single source of truth for CSS variables. */
+
+:root {
+ /* ── Color: surfaces ── */
+ --bg: var(--page-bg);
+ --page-bg: #242424;
+ --map-bg: #000000;
+ --bg-deep: var(--map-bg);
+ --surface: #161616;
+ --surface-2: #1f1f1f;
+ --nav-bg: #121212;
+
+ /* ── Color: text (contrast notes kept for a11y audits) ── */
+ --text: #ffffff;
+ --text-secondary: rgba(255, 255, 255, 0.8);
+ --text-muted: rgba(255, 255, 255, 0.56);
+ --text-dim: rgba(255, 255, 255, 0.34);
+
+ /* ── Color: borders & overlays ── */
+ --border: rgba(255, 255, 255, 0.1);
+ --border-strong: rgba(255, 255, 255, 0.18);
+ --scrim: rgba(10, 10, 10, 0.92);
+ --scrim-soft: rgba(10, 10, 10, 0.55);
+ --grid-line: rgba(255, 255, 255, 0.05);
+
+ /* ── Color: brand accent ── */
+ --accent-solid: #006c66;
+ --accent: #52d4c8;
+ --accent-bright: #7df5e8;
+ --accent-on-dark: #52d4c8;
+
+ /* ── Elevation (floating panels, nav chips, map islands) ── */
+ --elevated-bg: var(--page-bg);
+ --elevated-border: rgba(255, 255, 255, 0.24);
+ --elevated-shadow:
+ 0 10px 28px -14px rgba(0, 0, 0, 0.5),
+ 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+ --shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
+ --blur-elevated: 16px;
+ --blur-chip: 6px;
+
+ /* ── Spacing ── */
+ --space-1: 4px;
+ --space-2: 8px;
+ --space-3: 12px;
+ --space-4: 16px;
+ --space-5: 18px;
+ --space-6: 24px;
+ --space-page-x: clamp(16px, 3vw, 28px);
+ --space-page-wide: clamp(22px, 6vw, 84px);
+
+ /* ── Radius ── */
+ --radius-sm: 10px;
+ --radius-md: 14px;
+ --radius-lg: 18px;
+ --radius-xl: 24px;
+ --radius-pill: 100px;
+
+ /* ── Typography ── */
+ --font-size-xs: 11px;
+ --font-size-sm: 12px;
+ --font-size-meta: 13px;
+ --font-size-base: 14px;
+ --font-size-md: 15px;
+ --font-size-lg: 16px;
+ --font-size-xl: 20px;
+ --font-size-brand: 17px;
+ --tracking-tight: -0.03em;
+ --tracking-snug: -0.02em;
+ --tracking-normal: -0.01em;
+ --tracking-wide: 0.06em;
+ --tracking-wider: 0.1em;
+
+ /* ── Motion ── */
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+ --duration-fast: 0.2s;
+ --duration-enter: 0.32s;
+
+ /* ── Map chrome ── */
+ --map-chrome-top: var(--space-5);
+ --map-chrome-height: 44px;
+ --map-chrome-gap: var(--space-3);
+ --map-panel-top: calc(
+ var(--map-chrome-top) + var(--map-chrome-height) + var(--map-chrome-gap)
+ );
+ --map-island-border: var(--elevated-border);
+}
+
+:root.light {
+ --page-bg: #f2f1ee;
+ --map-bg: #f4f4f2;
+ --surface: #ffffff;
+ --surface-2: #f6f6f4;
+ --nav-bg: #ffffff;
+ --text: #0a0a0a;
+ --text-secondary: rgba(10, 10, 10, 0.72);
+ --text-muted: rgba(10, 10, 10, 0.56);
+ --text-dim: rgba(10, 10, 10, 0.36);
+ --border: rgba(10, 10, 10, 0.1);
+ --border-strong: rgba(10, 10, 10, 0.16);
+ --accent-solid: #006c66;
+ --accent: #006c66;
+ --accent-bright: #00837b;
+ --accent-on-dark: #006c66;
+ --scrim: rgba(255, 255, 255, 0.92);
+ --scrim-soft: rgba(255, 255, 255, 0.55);
+ --grid-line: rgba(10, 10, 10, 0.05);
+ --shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.22);
+ --elevated-bg: var(--page-bg);
+ --elevated-border: var(--border-strong);
+ --elevated-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.1);
+}