@nuvin/components 0.1.0

package/dist/styles/components.css

@@ -0,0 +1,206 @@
+/* Tape-label header strip — "// SECTION_NAME [meta]" */
+.nv-tape {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 10px;
+  font: 600 10.5px / 1.4 var(--nv-mono);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-background);
+  background: var(--color-accent);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
+}
+
+/* Status chip — square, mono */
+.nv-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 4px 10px;
+  font: 500 11px / 1.2 var(--nv-mono);
+  letter-spacing: 0.04em;
+  color: var(--color-muted);
+  background: var(--color-panel);
+  border: 1px solid var(--color-border);
+}
+.nv-chip[data-tone="ok"] {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
+    0 0 12px -4px color-mix(in srgb, var(--color-accent) 60%, transparent);
+}
+.nv-chip[data-tone="busy"] {
+  color: var(--color-accent-soft);
+  border-color: var(--color-accent-soft);
+  animation: nv-pulse 1.6s ease-in-out infinite;
+}
+.nv-chip[data-tone="error"] {
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+.nv-chip > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nv-theme-toggle {
+  cursor: pointer;
+  outline: none;
+  text-transform: uppercase;
+  transition:
+    color 120ms ease,
+    border-color 120ms ease;
+}
+.nv-theme-toggle:hover {
+  color: var(--color-text);
+  border-color: var(--color-text);
+}
+.nv-theme-toggle:focus-visible {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent);
+}
+.nv-theme-toggle > svg {
+  flex: 0 0 auto;
+}
+.nv-chip-dot {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  display: inline-block;
+  flex: 0 0 auto;
+}
+
+@keyframes nv-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@keyframes nv-blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.nv-caret::after {
+  content: "▍";
+  margin-left: 2px;
+  color: var(--color-accent);
+  animation: nv-blink 1s steps(1) infinite;
+}
+
+/* Composer
+   The composer textarea is restyled to the prototype shell via Tailwind token
+   utilities in Composer.tsx (Phase 3, Task 8); its `.nv-input` rules were
+   retired. The composer/approval buttons were migrated to the `Button`
+   primitive (Phase 3, Tasks 8-9); `.nv-btn*` is retained only because
+   QuestionCard / StartScreen still emit it (deferred surfaces). */
+.nv-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 10px 16px;
+  font: 600 12px / 1 var(--nv-mono);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  background: transparent;
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.nv-btn:hover:not(:disabled) {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.nv-btn:focus-visible {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent);
+}
+.nv-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.nv-btn-primary {
+  background: var(--color-accent);
+  color: var(--color-background);
+  border-color: var(--color-accent);
+}
+.nv-btn-primary:hover:not(:disabled) {
+  background: var(--color-accent-soft);
+  border-color: var(--color-accent-soft);
+  color: var(--color-background);
+  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--color-accent) 80%, transparent);
+}
+
+/* Code/result preview block — JS-side hook with content-visibility tuning. */
+.nv-pre {
+  overflow-x: auto;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 200px;
+}
+
+/* Diff view styling migrated to prototype DiffBlock token utilities in
+   DiffView.tsx (nuvin-web.html lines 197-218). The `.nv-diff*` class names
+   remain as JS-side hooks only (no CSS rules). */
+
+/* Empty state */
+.nv-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  border: 1px dashed var(--color-border);
+  color: var(--color-muted);
+  font: 400 13px / 1.6 var(--nv-mono);
+}
+
+/* tool-display: node pulse (running/approved) + body reveal */
+@keyframes nv-node-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+@keyframes nv-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Assistant markdown tables (streamdown) — the app's global base font is
+   monospace (Terminal Brutalism); render tabular data in sans so it reads like
+   streamdown's intended default. Inline-code chips inside keep their own
+   font-mono override. */
+[data-streamdown="table-wrapper"] {
+  font-family: var(--nv-sans);
+}

package/dist/styles/effects.css

@@ -0,0 +1,76 @@
+/* Global CRT scanline + dot-grid backdrop */
+.nv-crt {
+  position: relative;
+  isolation: isolate;
+}
+.nv-crt::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    repeating-linear-gradient(
+      0deg,
+      rgba(var(--nv-scanline-rgb), var(--nv-scanline-alpha)) 0px,
+      rgba(var(--nv-scanline-rgb), var(--nv-scanline-alpha)) 1px,
+      transparent 1px,
+      transparent 3px
+    ),
+    radial-gradient(
+      circle at 1px 1px,
+      rgba(var(--nv-scanline-rgb), var(--nv-grid-alpha)) 1px,
+      transparent 0
+    );
+  background-size:
+    100% 3px,
+    24px 24px;
+  mix-blend-mode: var(--nv-crt-blend);
+}
+.nv-crt::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background: radial-gradient(ellipse at center, transparent 55%, var(--nv-vignette-color) 100%);
+}
+
+/* Corner-bracket frame — pure CSS, sharp, brutalist */
+.nv-frame {
+  position: relative;
+  border: 1px solid var(--color-border);
+  background: var(--color-panel);
+}
+.nv-frame::before,
+.nv-frame::after,
+.nv-frame > .nv-frame-bl,
+.nv-frame > .nv-frame-br {
+  content: "";
+  position: absolute;
+  width: var(--nv-bracket-size);
+  height: var(--nv-bracket-size);
+  border-color: var(--color-accent);
+  border-style: solid;
+  pointer-events: none;
+}
+.nv-frame::before {
+  top: -1px;
+  left: -1px;
+  border-width: var(--nv-bracket-thickness) 0 0 var(--nv-bracket-thickness);
+}
+.nv-frame::after {
+  top: -1px;
+  right: -1px;
+  border-width: var(--nv-bracket-thickness) var(--nv-bracket-thickness) 0 0;
+}
+.nv-frame > .nv-frame-bl {
+  bottom: -1px;
+  left: -1px;
+  border-width: 0 0 var(--nv-bracket-thickness) var(--nv-bracket-thickness);
+}
+.nv-frame > .nv-frame-br {
+  bottom: -1px;
+  right: -1px;
+  border-width: 0 var(--nv-bracket-thickness) var(--nv-bracket-thickness) 0;
+}

package/dist/styles/fonts.css

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
+}

package/dist/styles/index.css

@@ -0,0 +1,14 @@
+@import "tailwindcss";
+@import "./tokens.css";
+@import "./fonts.css";
+@import "./base.css";
+@import "./effects.css";
+@import "./components.css";
+@import "./themes.css";
+
+@source "../../node_modules/streamdown/dist/*.js";
+/* Scan this package's own bundled JS output so downstream consumers pick up
+   component class names. Resolves to the dist tree (one level up from this
+   file, which lives at dist/styles). This CSS ships uncompiled; the consumer's
+   Tailwind resolves the directive. */
+@source "../**/*.js";

package/dist/styles/styles.test.ts

@@ -0,0 +1,45 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+function readStyles(): string {
+  const dir = join(process.cwd(), "src/styles");
+  return ["base.css", "effects.css", "components.css", "themes.css"]
+    .map((f) => readFileSync(join(dir, f), "utf8"))
+    .join("\n");
+}
+
+const styles = readStyles();
+
+describe("web styles", () => {
+  it("contains expected structural CSS class markers", () => {
+    // Positive presence guards: if these selectors are missing (block dropped during split),
+    // assertions below would vacuously pass on empty strings — catch that early.
+    expect(styles).toContain(":root {");
+    expect(styles).toContain(".nv-crt {");
+    expect(styles).toContain(".nv-frame {");
+    expect(styles).toContain(".nv-tape {");
+    expect(styles).toContain(".nv-chip {");
+    expect(styles).toContain(".nv-empty {");
+    expect(styles).toContain('[data-theme="dark"] {');
+  });
+
+  it("keeps the tool-display keyframes that back the continuous-spine renderers", () => {
+    // The v2 tool-display system (components/tool-display/) is pure Tailwind + CVA;
+    // the only CSS it relies on are these two keyframes (node pulse + body reveal),
+    // referenced via motion-safe:animate-[nv-node-pulse...] / animate-[nv-reveal...].
+    // The old `.nv-tool-*` rules were removed with the tool-renders system.
+    expect(styles).toContain("@keyframes nv-node-pulse");
+    expect(styles).toContain("@keyframes nv-reveal");
+    expect(styles).not.toContain(".nv-tool-row");
+    expect(styles).not.toContain(".nv-tool-head");
+  });
+
+  it("does not use neon-like accent colors in selectable themes", () => {
+    expect(styles).not.toContain("#22c55e");
+    expect(styles).not.toContain("#86efac");
+    expect(styles).not.toContain("#facc15");
+    expect(styles).not.toContain("#fef08a");
+  });
+});

package/dist/styles/themes.css

@@ -0,0 +1,33 @@
+/* Legacy --color-* aliases consumed by the not-yet-migrated .nv-* sheets.
+   Re-keyed onto data-theme; removed entirely in Phase 3 when the .nv-* CSS is retired. */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --color-accent: #f97316;
+  --color-accent-soft: #fdba74;
+  --color-background: #050505;
+  --color-border: #2a2a2a;
+  --color-error: #ef4444;
+  --color-muted: #a3a3a3;
+  --color-panel: #111111;
+  --color-panel-elevated: rgba(23, 23, 23, 1);
+  --color-text: #fafafa;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --color-accent: #ea580c;
+  --color-accent-soft: #c2410c;
+  --color-background: #fafafa;
+  --color-border: #d4d4d4;
+  --color-error: #dc2626;
+  --color-muted: #525252;
+  --color-panel: #f0f0f0;
+  --color-panel-elevated: rgba(255, 255, 255, 1);
+  --color-text: #0a0a0a;
+  /* Tune the CRT overlay so it stays subtle on a light background. */
+  --nv-scanline-rgb: 0, 0, 0;
+  --nv-scanline-alpha: 0.02;
+  --nv-grid-alpha: 0.04;
+  --nv-crt-blend: multiply;
+  --nv-vignette-color: rgba(0, 0, 0, 0.06);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,245 @@
+/* tokens.css — canonical design tokens (Strategy A).
+   Token vocabulary is lifted verbatim from nuvin-web.html (lines 17-36).
+   shadcn token names are ALIASED onto this vocabulary below.
+
+   NOTE ON --accent: the prototype's --accent is the brand blue and stays
+   canonical (organisms use it directly). shadcn ALSO defines --accent for
+   muted hover surfaces; aliasing it would clobber the brand token. We
+   therefore do NOT define shadcn's --accent (nor its paired foreground) at all.
+   shadcn's brand role is served by --primary (-> var(--accent)). shadcn
+   components that reference --accent for hover are hand-rethemed to
+   bg-surface-hover during the per-component retheme. */
+
+:root,
+[data-theme="dark"] {
+  /* >>> VERBATIM from nuvin-web.html line 18-25 <<< */
+  --bg-base: oklch(15% 0.012 264);
+  --bg-raised: oklch(18% 0.014 264);
+  --bg-overlay: oklch(21% 0.014 264);
+  --bg-inset: oklch(12% 0.01 264);
+  --bg-sunken: oklch(9% 0.008 264);
+  --bg-hover: oklch(24% 0.014 264);
+  --fg-primary: oklch(94% 0.004 264);
+  --fg-secondary: oklch(73% 0.008 264);
+  --fg-tertiary: oklch(52% 0.01 264);
+  --fg-quaternary: oklch(38% 0.01 264);
+  --fg-on-accent: oklch(98% 0.002 264);
+  --border-subtle: oklch(26% 0.012 264 / 50%);
+  --border-default: oklch(28% 0.012 264);
+  --border-strong: oklch(36% 0.014 264);
+  --border-focus: oklch(62% 0.16 263);
+  --accent: oklch(63% 0.19 263);
+  --accent-hover: oklch(68% 0.19 263);
+  --accent-subtle: oklch(63% 0.19 263 / 12%);
+  --accent-border: oklch(63% 0.19 263 / 35%);
+  --success: oklch(68% 0.15 155);
+  --success-subtle: oklch(68% 0.15 155 / 10%);
+  --danger: oklch(62% 0.19 22);
+  --danger-subtle: oklch(62% 0.19 22 / 10%);
+  --warning: oklch(72% 0.14 75);
+  --warning-subtle: oklch(72% 0.14 75 / 10%);
+  --syn-keyword: oklch(72% 0.14 290);
+  --syn-string: oklch(72% 0.15 155);
+  --syn-fn: oklch(75% 0.13 230);
+  --syn-var: oklch(82% 0.02 264);
+  --syn-comment: oklch(48% 0.01 264);
+  --syn-punct: oklch(60% 0.008 264);
+  --diff-add-bg: oklch(68% 0.15 155 / 6%);
+  --diff-add-fg: oklch(72% 0.15 155);
+  --diff-del-bg: oklch(62% 0.19 22 / 6%);
+  --diff-del-fg: oklch(68% 0.16 22);
+  --diff-line-num: oklch(40% 0.01 264);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35);
+  --ring-focus: 0 0 0 2px var(--bg-sunken), 0 0 0 4px var(--accent);
+
+  /* shadcn alias block (Strategy A) — dark */
+  --background: var(--bg-base);
+  --foreground: var(--fg-primary);
+  --card: var(--bg-raised);
+  --card-foreground: var(--fg-primary);
+  --popover: var(--bg-overlay);
+  --popover-foreground: var(--fg-primary);
+  --primary: var(--accent);
+  --primary-foreground: var(--fg-on-accent);
+  --secondary: var(--bg-overlay);
+  --secondary-foreground: var(--fg-secondary);
+  --muted: var(--bg-inset);
+  --muted-foreground: var(--fg-tertiary);
+  --destructive: var(--danger);
+  --destructive-foreground: var(--fg-on-accent);
+  --border: var(--border-default);
+  --input: var(--border-default);
+  --ring: var(--border-focus);
+  --radius: 0.5rem;
+  /* NOTE: shadcn --accent (and its paired foreground) intentionally NOT defined. */
+}
+
+[data-theme="light"] {
+  /* >>> VERBATIM from nuvin-web.html line 28-35 <<< */
+  --bg-base: oklch(98% 0.001 264);
+  --bg-raised: oklch(100% 0 0);
+  --bg-overlay: oklch(96% 0.002 264);
+  --bg-inset: oklch(96% 0.002 264);
+  --bg-sunken: oklch(94% 0.003 264);
+  --bg-hover: oklch(96% 0.004 264);
+  --fg-primary: oklch(20% 0.012 264);
+  --fg-secondary: oklch(45% 0.01 264);
+  --fg-tertiary: oklch(55% 0.008 264);
+  --fg-quaternary: oklch(68% 0.006 264);
+  --fg-on-accent: oklch(99% 0.002 264);
+  --border-subtle: oklch(90% 0.004 264 / 60%);
+  --border-default: oklch(88% 0.005 264);
+  --border-strong: oklch(80% 0.008 264);
+  --border-focus: oklch(52% 0.16 263);
+  --accent: oklch(53% 0.19 263);
+  --accent-hover: oklch(48% 0.18 263);
+  --accent-subtle: oklch(53% 0.19 263 / 8%);
+  --accent-border: oklch(53% 0.19 263 / 25%);
+  --success: oklch(52% 0.15 155);
+  --success-subtle: oklch(52% 0.15 155 / 8%);
+  --danger: oklch(52% 0.19 22);
+  --danger-subtle: oklch(52% 0.19 22 / 8%);
+  --warning: oklch(60% 0.15 60);
+  --warning-subtle: oklch(60% 0.15 60 / 8%);
+  --syn-keyword: oklch(50% 0.19 290);
+  --syn-string: oklch(42% 0.15 155);
+  --syn-fn: oklch(48% 0.15 230);
+  --syn-var: oklch(25% 0.02 264);
+  --syn-comment: oklch(55% 0.008 264);
+  --syn-punct: oklch(50% 0.006 264);
+  --diff-add-bg: oklch(52% 0.15 155 / 6%);
+  --diff-add-fg: oklch(38% 0.15 155);
+  --diff-del-bg: oklch(52% 0.19 22 / 5%);
+  --diff-del-fg: oklch(45% 0.18 22);
+  --diff-line-num: oklch(70% 0.006 264);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);
+  --ring-focus: 0 0 0 2px var(--bg-sunken), 0 0 0 4px var(--accent);
+
+  /* shadcn alias block (Strategy A) — light (same alias mapping, re-declared so it
+     resolves against the light vocab) */
+  --background: var(--bg-base);
+  --foreground: var(--fg-primary);
+  --card: var(--bg-raised);
+  --card-foreground: var(--fg-primary);
+  --popover: var(--bg-overlay);
+  --popover-foreground: var(--fg-primary);
+  --primary: var(--accent);
+  --primary-foreground: var(--fg-on-accent);
+  --secondary: var(--bg-overlay);
+  --secondary-foreground: var(--fg-secondary);
+  --muted: var(--bg-inset);
+  --muted-foreground: var(--fg-tertiary);
+  --destructive: var(--danger);
+  --destructive-foreground: var(--fg-on-accent);
+  --border: var(--border-default);
+  --input: var(--border-default);
+  --ring: var(--border-focus);
+  --radius: 0.5rem;
+  /* shadcn --accent (and its paired foreground) intentionally NOT defined. */
+}
+
+/* Tailwind v4: map tokens -> color utilities so organisms use utilities, not raw var(). */
+@theme inline {
+  --color-surface-base: var(--bg-base);
+  --color-surface-raised: var(--bg-raised);
+  --color-surface-overlay: var(--bg-overlay);
+  --color-surface-inset: var(--bg-inset);
+  --color-surface-sunken: var(--bg-sunken);
+  --color-surface-hover: var(--bg-hover);
+  --color-fg-primary: var(--fg-primary);
+  --color-fg-secondary: var(--fg-secondary);
+  --color-fg-tertiary: var(--fg-tertiary);
+  --color-fg-quaternary: var(--fg-quaternary);
+  --color-fg-on-accent: var(--fg-on-accent);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-border: var(--accent-border);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-border-focus: var(--border-focus);
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-danger: var(--danger);
+  --color-danger-subtle: var(--danger-subtle);
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-syn-keyword: var(--syn-keyword);
+  --color-syn-string: var(--syn-string);
+  --color-syn-fn: var(--syn-fn);
+  --color-syn-var: var(--syn-var);
+  --color-syn-comment: var(--syn-comment);
+  --color-syn-punct: var(--syn-punct);
+  --color-diff-add-bg: var(--diff-add-bg);
+  --color-diff-add-fg: var(--diff-add-fg);
+  --color-diff-del-bg: var(--diff-del-bg);
+  --color-diff-del-fg: var(--diff-del-fg);
+  --color-diff-line-num: var(--diff-line-num);
+
+  /* shadcn-token bridge for streamdown's components (table, blockquote, etc.).
+     streamdown is authored entirely against shadcn names; our theme avoids them
+     by design, so map only the ones streamdown actually uses onto our palette. */
+  --color-foreground: var(--fg-primary);
+  --color-muted-foreground: var(--fg-tertiary);
+  --color-muted: var(--bg-inset);
+  --color-background: var(--bg-base);
+  --color-border: var(--border-default);
+  --color-sidebar: var(--bg-raised);
+  --color-sidebar-foreground: var(--fg-primary);
+  --color-primary: var(--accent);
+  --color-primary-foreground: var(--fg-on-accent);
+}
+
+/* Prototype keyframes (nuvin-web.html lines 281-286), shared by organisms in later phases. */
+@keyframes blink-cursor {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+}
+@keyframes live-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 oklch(68% 0.12 155 / 40%);
+  }
+  50% {
+    opacity: 0.6;
+    box-shadow: 0 0 0 4px oklch(68% 0.12 155 / 0%);
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}