@stephen-netu/design-system 0.1.0

package/src/n4-adaptive-manifold/DetailCard.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  import type { ManifoldNode } from './types.js';
+
+  interface Props {
+    node: ManifoldNode;
+    pinned: boolean;
+    onclose?: () => void;
+  }
+
+  let { node, pinned, onclose }: Props = $props();
+</script>
+
+<div
+  class="detail-card"
+  class:detail-card--pinned={pinned}
+>
+  <header class="detail-card__header">
+    <span class="detail-card__kind">{node.kind}</span>
+    <span class="detail-card__name">{node.label}</span>
+    {#if pinned}
+      <button class="detail-card__close" onclick={onclose}>&times;</button>
+    {/if}
+  </header>
+
+  <div class="detail-card__body">
+    {#if node.kind === 'agent'}
+      {@render agentBody(node)}
+    {:else if node.kind === 'task'}
+      {@render taskBody(node)}
+    {:else}
+      {@render genericBody(node)}
+    {/if}
+  </div>
+</div>
+
+{#snippet agentBody(n: ManifoldNode)}
+  {#if n.metadata?.spark_by_axis}
+    {@const axes = n.metadata.spark_by_axis as [number, number, number]}
+    {@const ROLE_LABELS = ['Epistemic', 'Worker', 'Coordination'] as const}
+    {@const dominant = axes[0] > axes[1] && axes[0] > axes[2] ? 0 : axes[1] > axes[2] ? 1 : 2}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Role</span>
+      <span class="detail-card__value">{ROLE_LABELS[dominant]}</span>
+    </div>
+    <div class="detail-card__row">
+      <span class="detail-card__label">Axes (i/j/k)</span>
+      <span class="detail-card__value">{axes[0]} / {axes[1]} / {axes[2]}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.spark_remaining != null}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Spark</span>
+      <span class="detail-card__value">{n.metadata.spark_remaining as number}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.current_task}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Working</span>
+      <span class="detail-card__value">{n.metadata.current_task as string}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.loop_phase}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Phase</span>
+      <span class="detail-card__value">{n.metadata.loop_phase as string}</span>
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet taskBody(n: ManifoldNode)}
+  {#if n.metadata?.wt_id}
+    <div class="detail-card__row">
+      <span class="detail-card__label">ID</span>
+      <span class="detail-card__value">{n.metadata.wt_id as string}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.flow_phase}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Flow</span>
+      <span class="detail-card__value">{n.metadata.flow_phase as string}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.claiming_agent}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Agent</span>
+      <span class="detail-card__value">{n.metadata.claiming_agent as string}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.priority}
+    <div class="detail-card__row">
+      <span class="detail-card__label">Priority</span>
+      <span class="detail-card__value">{n.metadata.priority as string}</span>
+    </div>
+  {/if}
+  {#if n.metadata?.description}
+    <div class="detail-card__description">{n.metadata.description as string}</div>
+  {/if}
+{/snippet}
+
+{#snippet genericBody(n: ManifoldNode)}
+  <div class="detail-card__row">
+    <span class="detail-card__label">Status</span>
+    <span class="detail-card__value">{n.status}</span>
+  </div>
+{/snippet}
+
+<style>
+  /* Outer shell: molds to content up to a capped height.
+     Positioning handled by the wrapper div in AdaptiveManifold. */
+  .detail-card {
+    width: 220px;
+    max-height: min(420px, calc(100% - 40px));
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: #1e1e1e;
+    border: 1px solid rgba(184, 115, 51, 0.3);
+    border-radius: var(--radius-md, 6px);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: #e8e0d0;
+    pointer-events: none;
+    z-index: 10;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
+  }
+
+  .detail-card--pinned {
+    pointer-events: auto;
+    border-color: rgba(184, 115, 51, 0.6);
+  }
+
+  /* Pinned header — never scrolls */
+  .detail-card__header {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-bottom: 1px solid rgba(184, 115, 51, 0.15);
+  }
+
+  .detail-card__kind {
+    color: #b87333;
+    text-transform: uppercase;
+    font-size: 9px;
+    letter-spacing: 0.5px;
+  }
+
+  .detail-card__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .detail-card__close {
+    background: none;
+    border: none;
+    color: #a09880;
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    line-height: 1;
+  }
+
+  .detail-card__close:hover {
+    color: #e8e0d0;
+  }
+
+  /* Scrollable body — grows to fill, scrolls when content overflows the cap */
+  .detail-card__body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 6px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(184, 115, 51, 0.25) transparent;
+  }
+
+  .detail-card__body::-webkit-scrollbar { width: 3px; }
+  .detail-card__body::-webkit-scrollbar-thumb { background: rgba(184, 115, 51, 0.25); border-radius: var(--radius-xs, 2px); }
+  .detail-card__body::-webkit-scrollbar-track { background: transparent; }
+
+  .detail-card__row {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .detail-card__label {
+    color: #a09880;
+    flex-shrink: 0;
+  }
+
+  .detail-card__value {
+    color: #e8e0d0;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .detail-card__description {
+    color: #a09880;
+    margin-top: 4px;
+    font-size: 10px;
+    line-height: 1.4;
+  }
+</style>

package/src/n4-adaptive-manifold/SuggestionIndicator.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  // N4 SuggestionIndicator — Shows layout suggestion badge
+  // Renders a small floating pill when the orchestrator has a stable suggestion.
+  // Provides Accept / Dismiss / Pin actions per ADR.
+
+  import type { LayoutAlgorithm, LayoutSuggestion } from './types.js';
+
+  interface Props {
+    suggestion: LayoutSuggestion | null;
+    onaccept?: () => void;
+    ondismiss?: () => void;
+    onpin?: () => void;
+  }
+
+  let { suggestion, onaccept, ondismiss, onpin }: Props = $props();
+
+  const LABELS: Record<LayoutAlgorithm, string> = {
+    gravitational: 'Garden',
+    manifold: 'Manifold',
+  };
+</script>
+
+{#if suggestion && !suggestion.dismissed}
+  <div class="n4-suggestion">
+    <span class="n4-suggestion__icon">◈</span>
+    <span class="n4-suggestion__label">{LABELS[suggestion.algorithm]}</span>
+    <span class="n4-suggestion__reason">{suggestion.reason}</span>
+    <button class="n4-suggestion__action n4-suggestion__action--accept" onclick={onaccept} title="Switch layout">
+      ✓
+    </button>
+    <button class="n4-suggestion__action" onclick={ondismiss} title="Dismiss">
+      ✕
+    </button>
+    <button class="n4-suggestion__action" onclick={onpin} title="Pin current layout">
+      ⊙
+    </button>
+  </div>
+{/if}
+
+<style>
+  .n4-suggestion {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: var(--n4-suggestion-padding, 6px 10px);
+    background: var(--n4-suggestion-bg, color-mix(in srgb, var(--color-accent, #b87333) 8%, var(--color-bg-panel, #222)));
+    border: 1px solid var(--n4-suggestion-border, rgba(184, 115, 51, 0.25));
+    border-radius: var(--n4-suggestion-radius, 6px);
+    font-size: var(--n4-suggestion-font-size, 11px);
+    font-family: var(--font-sans, system-ui);
+    color: var(--n4-suggestion-text, #a09880);
+    white-space: nowrap;
+  }
+
+  .n4-suggestion__icon {
+    color: var(--n4-suggestion-accent, #b87333);
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .n4-suggestion__label {
+    color: var(--n4-suggestion-accent, #b87333);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .n4-suggestion__reason {
+    color: var(--n4-suggestion-text, #a09880);
+    opacity: 0.75;
+  }
+
+  .n4-suggestion__action {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm, 3px);
+    cursor: pointer;
+    font-size: 11px;
+    padding: 1px 4px;
+    color: var(--n4-suggestion-text, #a09880);
+    transition: color 120ms, border-color 120ms;
+  }
+
+  .n4-suggestion__action:hover {
+    color: var(--n4-suggestion-accent, #b87333);
+    border-color: var(--n4-suggestion-border, rgba(184, 115, 51, 0.25));
+  }
+
+  .n4-suggestion__action--accept {
+    color: var(--n4-suggestion-accent, #b87333);
+  }
+</style>

package/src/n4-adaptive-manifold/classifier.ts

@@ -0,0 +1,139 @@
+// N4 TopologyClassifier — always returns manifold layout.
+// Pure function, no state. Deterministic given same input.
+// S-02: uses Map (ordered) for adjacency, not Set.
+
+import type {
+  ManifoldSnapshot,
+  LayoutAlgorithm,
+  ClassificationResult,
+  TopologyMetrics,
+} from './types.js';
+
+/** Number of consecutive matching classifications before suggesting. */
+export const STABILITY_TICKS = 3;
+
+export function classifyTopology(
+  snapshot: ManifoldSnapshot,
+): ClassificationResult {
+  // Manifold is the implemented layout algorithm.
+  // computeMetrics() is preserved for topology analysis.
+  const nodeCount = snapshot.nodes.length;
+  const edgeCount = snapshot.edges.length;
+  const edgeDensity = nodeCount > 0 ? edgeCount / nodeCount : 0;
+
+  return {
+    recommended: 'manifold',
+    confidence: 1.0,
+    reason: edgeCount === 0
+      ? 'manifold: sparse (no edges, S³ projection only)'
+      : `manifold: ${edgeCount} edges, density ${edgeDensity.toFixed(2)}`,
+    ranked: [{ algorithm: 'manifold' as LayoutAlgorithm, fitness: 1.0 }],
+    metrics: { nodeCount, edgeCount, edgeDensity, maxDepth: 0, rootCount: 0, cycleCount: 0, componentCount: 0, maxClusterSize: 0 },
+  };
+}
+
+// === Metrics computation (single pass, O(V+E)) ===
+
+export function computeMetrics(snapshot: ManifoldSnapshot): TopologyMetrics {
+  const nodeCount = snapshot.nodes.length;
+  const edgeCount = snapshot.edges.length;
+
+  if (nodeCount === 0) {
+    return { nodeCount: 0, edgeCount: 0, edgeDensity: 0, maxDepth: 0, rootCount: 0, cycleCount: 0, componentCount: 0, maxClusterSize: 0 };
+  }
+
+  // Note: "edgeDensity" here is edges/nodes (avg out-degree), NOT graph density (edges/(n*(n-1)/2)).
+  const edgeDensity = nodeCount > 0 ? edgeCount / nodeCount : 0;
+
+  // Build adjacency (directed) and undirected adjacency
+  // S-02: Map preserves insertion order (deterministic)
+  const adj = new Map<string, string[]>();
+  const uAdj = new Map<string, string[]>();
+  const inDegree = new Map<string, number>();
+
+  for (const n of snapshot.nodes) {
+    adj.set(n.id, []);
+    uAdj.set(n.id, []);
+    inDegree.set(n.id, 0);
+  }
+  for (const e of snapshot.edges) {
+    adj.get(e.source)?.push(e.target);
+    uAdj.get(e.source)?.push(e.target);
+    uAdj.get(e.target)?.push(e.source);
+    inDegree.set(e.target, (inDegree.get(e.target) ?? 0) + 1);
+  }
+
+  // Roots: in-degree 0
+  let rootCount = 0;
+  for (const [, deg] of inDegree) {
+    if (deg === 0) rootCount++;
+  }
+
+  // Cycle detection via DFS (directed)
+  const WHITE = 0, GRAY = 1, BLACK = 2;
+  const color = new Map<string, number>();
+  for (const n of snapshot.nodes) color.set(n.id, WHITE);
+  let cycleCount = 0;
+
+  function dfs(nodeId: string): void {
+    color.set(nodeId, GRAY);
+    for (const neighbor of adj.get(nodeId) ?? []) {
+      const c = color.get(neighbor) ?? WHITE;
+      if (c === GRAY) { cycleCount++; }
+      else if (c === WHITE) { dfs(neighbor); }
+    }
+    color.set(nodeId, BLACK);
+  }
+
+  for (const n of snapshot.nodes) {
+    if (color.get(n.id) === WHITE) dfs(n.id);
+  }
+
+  // Max depth via BFS from roots (or all nodes if no roots)
+  let maxDepth = 0;
+  const depthVisited = new Map<string, boolean>();
+  const roots = snapshot.nodes.filter(n => (inDegree.get(n.id) ?? 0) === 0);
+  const bfsStart = roots.length > 0 ? roots : [snapshot.nodes[0]];
+
+  for (const root of bfsStart) {
+    if (depthVisited.get(root.id)) continue;
+    const queue: Array<{ id: string; depth: number }> = [{ id: root.id, depth: 0 }];
+    depthVisited.set(root.id, true);
+    while (queue.length > 0) {
+      const cur = queue.shift()!;
+      if (cur.depth > maxDepth) maxDepth = cur.depth;
+      for (const neighbor of adj.get(cur.id) ?? []) {
+        if (!depthVisited.get(neighbor)) {
+          depthVisited.set(neighbor, true);
+          queue.push({ id: neighbor, depth: cur.depth + 1 });
+        }
+      }
+    }
+  }
+
+  // Connected components via BFS on undirected graph
+  const compVisited = new Map<string, boolean>();
+  let componentCount = 0;
+  let maxClusterSize = 0;
+
+  for (const n of snapshot.nodes) {
+    if (compVisited.get(n.id)) continue;
+    componentCount++;
+    let clusterSize = 0;
+    const queue = [n.id];
+    compVisited.set(n.id, true);
+    while (queue.length > 0) {
+      const cur = queue.shift()!;
+      clusterSize++;
+      for (const nb of uAdj.get(cur) ?? []) {
+        if (!compVisited.get(nb)) {
+          compVisited.set(nb, true);
+          queue.push(nb);
+        }
+      }
+    }
+    if (clusterSize > maxClusterSize) maxClusterSize = clusterSize;
+  }
+
+  return { nodeCount, edgeCount, edgeDensity, maxDepth, rootCount, cycleCount, componentCount, maxClusterSize };
+}

package/src/n4-adaptive-manifold/index.ts

@@ -0,0 +1,45 @@
+// N4 Adaptive Manifold — Unified topology-aware graph layout layer
+// Gravitational canvas: GravitationalProvider, classifier, orchestrator, transitions
+
+export type {
+  LayoutAlgorithm,
+  NodeStatus,
+  ManifoldNode,
+  ManifoldEdge,
+  ManifoldSnapshot,
+  NodeStyleEntry,
+  NodeStyleRegistry,
+  LayoutPreferences,
+  EasingCurve,
+  AlgorithmProvider,
+  TopologyMetrics,
+  ClassificationResult,
+  AnimationMomentKind,
+  AnimationFrame,
+  EasingFn,
+  LayoutSuggestion,
+  ResolvedThemeColors,
+  NodeLayout,
+  LayoutResult,
+  LoopPhase,
+  PinnacleEvent,
+  PhaseVisualParams,
+  PhaseTheme,
+  GravitationalConfig,
+  NodeIndicatorState,
+} from './types.js';
+
+export { DEFAULT_LAYOUT_PREFERENCES, DEFAULT_GRAVITATIONAL_CONFIG } from './types.js';
+
+export { classifyTopology, computeMetrics, STABILITY_TICKS } from './classifier.js';
+export { LayoutOrchestrator } from './orchestrator.js';
+export { TransitionAnimator, EASING_FUNCTIONS } from './transition.js';
+
+export { GravitationalProvider } from './providers/gravitational-provider.js';
+
+export { default as AdaptiveManifold } from './AdaptiveManifold.svelte';
+export { default as SuggestionIndicator } from './SuggestionIndicator.svelte';
+export { default as DetailCard } from './DetailCard.svelte';
+
+export { PinnacleEventInferrer } from './pinnacle-events.js';
+export { resolvePhaseTheme, DEFAULT_PHASE_THEME } from './phase-theme.js';

package/src/n4-adaptive-manifold/n4-tokens.css

@@ -0,0 +1,155 @@
+/* N4 Adaptive Manifold — Design Tokens
+ * Prefix: --n4-*
+ * Consumed by AdaptiveManifold.svelte and SuggestionIndicator.svelte
+ */
+
+:root {
+  /* ── Node rendering ─────────────────────────────────────────────────────── */
+  --n4-node-width: 120px;
+  --n4-node-height: 28px;
+  --n4-node-radius: 4px;
+  --n4-node-bg: #222;
+  --n4-node-bg-hover: #2a2a2a;
+  --n4-node-bg-selected: color-mix(in srgb, var(--color-accent, #b87333) 12%, #222);
+  --n4-node-border: rgba(184, 115, 51, 0.15);
+  --n4-node-border-hover: rgba(184, 115, 51, 0.35);
+  --n4-node-border-selected: var(--color-accent, #b87333);
+  --n4-node-text: var(--color-text-primary, #e8e0d0);
+  --n4-node-text-muted: var(--color-text-secondary, #a09880);
+  --n4-node-id-font: var(--font-mono, 'JetBrains Mono', monospace);
+  --n4-node-id-size: 10px;
+  --n4-node-label-size: 11px;
+  --n4-node-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  --n4-node-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --n4-node-shadow-selected: 0 0 12px var(--color-accent-glow, rgba(184, 115, 51, 0.2));
+
+  /* ── Edge rendering ─────────────────────────────────────────────────────── */
+  --n4-edge-width: 1.5px;
+  --n4-edge-color: rgba(184, 115, 51, 0.25);
+  --n4-edge-color-hover: rgba(184, 115, 51, 0.55);
+  --n4-edge-color-active: var(--color-accent, #b87333);
+  --n4-edge-dash-length: 6px;
+  --n4-edge-dash-gap: 3px;
+  --n4-edge-arrow-size: 6px;
+
+  /* ── Canvas ─────────────────────────────────────────────────────────────── */
+  --n4-canvas-bg: var(--color-bg-canvas, #1a1a1a);
+  --n4-canvas-grid-color: rgba(184, 115, 51, 0.04);
+  --n4-canvas-grid-size: 24px;
+  --n4-canvas-padding: 40px;
+
+  /* ── Scatter grid (fallback topology) ───────────────────────────────────── */
+  --n4-scatter-gap: 8px;
+  --n4-scatter-chip-bg: var(--color-bg-panel, #222);
+  --n4-scatter-chip-border: var(--border-default, rgba(184, 115, 51, 0.15));
+  --n4-scatter-chip-accent: var(--color-accent, #b87333);
+
+  /* ── Suggestion indicator ───────────────────────────────────────────────── */
+  --n4-suggestion-bg: color-mix(in srgb, var(--color-accent, #b87333) 8%, var(--color-bg-panel, #222));
+  --n4-suggestion-border: rgba(184, 115, 51, 0.25);
+  --n4-suggestion-text: var(--color-text-secondary, #a09880);
+  --n4-suggestion-accent: var(--color-accent, #b87333);
+  --n4-suggestion-radius: var(--radius-md, 6px);
+  --n4-suggestion-padding: 6px 10px;
+  --n4-suggestion-font-size: var(--text-xs, 11px);
+
+  /* ── Transition ─────────────────────────────────────────────────────────── */
+  --n4-transition-duration: 400ms;
+  --n4-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ── Node status accents ─────────────────────────────────────────────────── */
+  --n4-node-active: var(--color-accent, #b87333);
+  --n4-node-idle: var(--color-text-secondary, #a09880);
+  --n4-node-blocked: var(--color-status-warning, #f39c12);
+  --n4-node-completed: var(--color-text-secondary, #a09880);
+  --n4-node-critical: var(--color-status-error, #c0392b);
+
+  /* ── Kind accents (overridden by consuming apps) ───────────────────────── */
+  --n4-kind-task: var(--color-accent, #b87333);
+  --n4-kind-agent: var(--color-expert-sovereign, #b87333);
+  --n4-kind-signal: var(--color-status-info, #2980b9);
+  --n4-kind-capability: var(--color-accent-secondary, #d4a574);
+  --n4-kind-intent: var(--color-expert-atelier, #b87333);
+  --n4-kind-subtask: color-mix(in srgb, var(--color-accent, #b87333) 60%, transparent);
+  --n4-kind-note: var(--color-text-primary, #e8e0d0);
+  --n4-kind-concept: var(--color-accent-secondary, #d4a574);
+  --n4-kind-claim: var(--color-status-success, #27ae60);
+  --n4-kind-grove: color-mix(in srgb, var(--color-accent, #b87333) 75%, #5a7a3a);
+  --n4-kind-member: var(--color-text-secondary, #a09880);
+  --n4-kind-daemon: var(--color-accent, #b87333);
+  --n4-kind-spark: var(--color-status-warning, #f39c12);
+
+  /* ── Easing curves ─────────────────────────────────────────────────────── */
+  --n4-ease-settle: cubic-bezier(0.0, 0.0, 0.2, 1.0);
+  --n4-ease-morph: cubic-bezier(0.34, 1.56, 0.64, 1.0);
+  --n4-ease-arrive: cubic-bezier(0.22, 1.0, 0.36, 1.0);
+  --n4-ease-pulse: linear;
+
+  /* ── Animation durations ───────────────────────────────────────────────── */
+  --n4-morph-duration: 600ms;
+  --n4-arrive-duration: 250ms;
+  --n4-depart-duration: 200ms;
+  --n4-focus-duration: 150ms;
+  --n4-pulse-duration: 400ms;
+
+  /* ── Phase ambient theming ──────────────────────────────────── */
+  --n4-phase-seed-background: #1a1a1a;
+  --n4-phase-seed-brightness: 0.4;
+  --n4-phase-seed-indicator-intensity: 0.3;
+  --n4-phase-seed-pulse-speed: 4s;
+  --n4-phase-seed-saturation: 0.6;
+
+  --n4-phase-sprout-background: #1a1c1a;
+  --n4-phase-sprout-brightness: 0.7;
+  --n4-phase-sprout-indicator-intensity: 0.7;
+  --n4-phase-sprout-pulse-speed: 2.5s;
+  --n4-phase-sprout-saturation: 0.85;
+
+  --n4-phase-go-background: #1c1a18;
+  --n4-phase-go-brightness: 1.0;
+  --n4-phase-go-indicator-intensity: 1.0;
+  --n4-phase-go-pulse-speed: 1.5s;
+  --n4-phase-go-saturation: 1.0;
+
+  --n4-phase-consult-background: #1b1a1c;
+  --n4-phase-consult-brightness: 0.85;
+  --n4-phase-consult-indicator-intensity: 0.85;
+  --n4-phase-consult-pulse-speed: 2s;
+  --n4-phase-consult-saturation: 0.9;
+
+  --n4-phase-weed-background: #1c1b18;
+  --n4-phase-weed-brightness: 0.65;
+  --n4-phase-weed-indicator-intensity: 0.6;
+  --n4-phase-weed-pulse-speed: 2.5s;
+  --n4-phase-weed-saturation: 0.75;
+
+  --n4-phase-freeze-background: #1a1a1e;
+  --n4-phase-freeze-brightness: 0.2;
+  --n4-phase-freeze-indicator-intensity: 0.1;
+  --n4-phase-freeze-pulse-speed: 8s;
+  --n4-phase-freeze-saturation: 0.2;
+
+  --n4-phase-compost-background: #1a1a1a;
+  --n4-phase-compost-brightness: 0.25;
+  --n4-phase-compost-indicator-intensity: 0.15;
+  --n4-phase-compost-pulse-speed: 6s;
+  --n4-phase-compost-saturation: 0.3;
+
+  --n4-phase-prune-background: #1c1a1a;
+  --n4-phase-prune-brightness: 0.2;
+  --n4-phase-prune-indicator-intensity: 0.1;
+  --n4-phase-prune-pulse-speed: 8s;
+  --n4-phase-prune-saturation: 0.2;
+}
+
+/* ── Accessibility: reduced motion ─────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --n4-morph-duration: 0ms;
+    --n4-arrive-duration: 0ms;
+    --n4-depart-duration: 0ms;
+    --n4-focus-duration: 0ms;
+    --n4-pulse-duration: 0ms;
+    --n4-transition-duration: 0ms;
+  }
+}