@viberaven/cli 1.6.9 → 1.6.10

package/README.md

@@ -10,10 +10,10 @@ Requires Node.js 20 or newer. Run from the app's project root:
 
 ```bash
 # Open the local Studio
-npx -y viberaven@1.6.9
+npx -y viberaven@1.6.10
 
 # Fresh terminal check
-npx -y viberaven@1.6.9 check
+npx -y viberaven@1.6.10 check
 ```
 
 The `viberaven` package launches this CLI. Studio combines findings, provider context and git comparisons. For chat, select an installed/authenticated Codex CLI, Claude Code or Gemini CLI and use **Test connection**. Access modes: `ask`, `approve`, `full`. Stop Studio with Ctrl+C.
@@ -27,10 +27,10 @@ Checks include migration tables without RLS, unrestricted policy conditions such
 `check --json` prints a findings summary and artifact paths. `--json` without `check` runs a fresh scan and prints the full gate object.
 
 ```bash
-npx -y viberaven@1.6.9 check --json
-npx -y viberaven@1.6.9 audit --vercel-supabase --json
-npx -y viberaven@1.6.9 fix --gap <gapId> --dry-run
-npx -y viberaven@1.6.9 init --agents all --dry-run
+npx -y viberaven@1.6.10 check --json
+npx -y viberaven@1.6.10 audit --vercel-supabase --json
+npx -y viberaven@1.6.10 fix --gap <gapId> --dry-run
+npx -y viberaven@1.6.10 init --agents all --dry-run
 ```
 
 Read tasks and source before targeted edits. Preview fixes first. The `rls_disabled` recipe adds an RLS migration without policies: agree before applying, because browser roles lose row access until policies exist. Apply/test through your database workflow; recheck after a batch. Provider actions require provider evidence.
@@ -41,9 +41,9 @@ Read tasks and source before targeted edits. Preview fixes first. The `rls_disab
 
 ```bash
 # Fail on blockers
-npx -y viberaven@1.6.9 --strict --json
+npx -y viberaven@1.6.10 --strict --json
 # Also fail on warnings
-npx -y viberaven@1.6.9 --strict=warning --json
+npx -y viberaven@1.6.10 --strict=warning --json
 ```
 
 Default `--strict` returns 0 for `clear`/`warning`, 1 for `not_clear`, 2 for `error`, 3 for `unknown` or unavailable results. `--strict=warning` also returns 1 for warnings.

package/dist/cli.js

@@ -15051,7 +15051,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = "1.6.9";
+    VERSION = "1.6.10";
   }
 });
 
@@ -21533,6 +21533,9 @@ async function readMaybe(path) {
     return null;
   }
 }
+function blobId(content, like) {
+  return (0, import_node_crypto5.createHash)(like.length === 64 ? "sha256" : "sha1").update(`blob ${content.length}\0`).update(content).digest("hex");
+}
 function parsePorcelain(raw) {
   const parts = raw.split("\0");
   const entries = [];
@@ -21578,17 +21581,61 @@ async function takeBaseline(cwd) {
       secret: secret || void 0
     };
   }
-  return { git: true, root, head: head.code === 0 ? head.stdout.toString("utf8").trim() : null, takenAt, dirty };
+  const headId = head.code === 0 ? head.stdout.toString("utf8").trim() : null;
+  const checkout = headId ? await checkoutForms(cwd, root, headId, dirty, MAX_SNAPSHOT_TOTAL - total) : {};
+  return { git: true, root, head: headId, takenAt, dirty, checkout };
+}
+async function checkoutForms(cwd, root, head, dirty, budget) {
+  const tree = await safeGit(cwd, ["ls-tree", "-r", "-z", "--full-name", head], 15e3);
+  if (tree.code !== 0) return {};
+  const files = [];
+  for (const record of tree.stdout.toString("utf8").split("\0")) {
+    const tab = record.indexOf("	");
+    if (tab < 0) continue;
+    const [mode, type, id] = record.slice(0, tab).split(" ");
+    const path = record.slice(tab + 1);
+    if (type !== "blob" || mode !== "100644" && mode !== "100755") continue;
+    if (path in dirty || isSecretPath(path) || /(?:^|\/)\.viberaven\//.test(path)) continue;
+    files.push({ path, id });
+  }
+  const forms = {};
+  let scanned = 0;
+  const look = async ({ path, id }) => {
+    const target = (0, import_node_path42.join)(root, path);
+    const size = await (0, import_promises33.stat)(target).then((info) => info.size, () => null);
+    if (size === null || scanned + size > MAX_CHECKOUT_SCAN) return;
+    scanned += size;
+    const content = await readMaybe(target);
+    if (!content || blobId(content, id) === id) return;
+    const asLf = withoutCrlf(content);
+    if (asLf.length < content.length && blobId(asLf, id) === id && withCrlf(asLf).equals(content)) {
+      forms[path] = { eol: "crlf" };
+    } else if (content.length <= MAX_SNAPSHOT_BYTES && content.length <= budget) {
+      budget -= content.length;
+      forms[path] = { content: content.toString("base64") };
+    } else {
+      forms[path] = { tooLarge: true };
+    }
+  };
+  let next = 0;
+  await Promise.all(Array.from({ length: CHECKOUT_READS_AT_ONCE }, async () => {
+    while (next < files.length) await look(files[next++]);
+  }));
+  return forms;
 }
 async function baseContent(baseline, path) {
   const entry = baseline.dirty[path];
   if (entry) {
     if (entry.hash === null) return null;
-    return entry.content ? Buffer.from(entry.content, "base64") : void 0;
+    return entry.content !== void 0 ? Buffer.from(entry.content, "base64") : void 0;
   }
   if (!baseline.root || !baseline.head) return null;
+  const checkout = baseline.checkout?.[path];
+  if (checkout?.content !== void 0) return Buffer.from(checkout.content, "base64");
+  if (checkout?.tooLarge) return void 0;
   const shown = await safeGit(baseline.root, ["show", `${baseline.head}:${path}`]);
-  return shown.code === 0 ? shown.stdout : null;
+  if (shown.code !== 0) return null;
+  return checkout?.eol === "crlf" ? withCrlf(shown.stdout) : shown.stdout;
 }
 function lineStats(before, after) {
   const count = (text2) => {
@@ -21794,7 +21841,7 @@ async function loadBaseline(runsDir, runId) {
     return null;
   }
 }
-var import_node_child_process9, import_node_crypto5, import_promises33, import_node_os3, import_node_path42, STATUS_PATHSPEC, MAX_SNAPSHOT_FILES, MAX_SNAPSHOT_BYTES, MAX_SNAPSHOT_TOTAL, SECRET_FILE, lf, NOT_PROVEN;
+var import_node_child_process9, import_node_crypto5, import_promises33, import_node_os3, import_node_path42, STATUS_PATHSPEC, MAX_SNAPSHOT_FILES, MAX_SNAPSHOT_BYTES, MAX_SNAPSHOT_TOTAL, MAX_CHECKOUT_SCAN, CHECKOUT_READS_AT_ONCE, SECRET_FILE, withCrlf, withoutCrlf, lf, NOT_PROVEN;
 var init_workspace = __esm({
   "src/local-ui/actions/workspace.ts"() {
     "use strict";
@@ -21808,7 +21855,11 @@ var init_workspace = __esm({
     MAX_SNAPSHOT_FILES = 300;
     MAX_SNAPSHOT_BYTES = 1e6;
     MAX_SNAPSHOT_TOTAL = 2e7;
+    MAX_CHECKOUT_SCAN = 2e8;
+    CHECKOUT_READS_AT_ONCE = 16;
     SECRET_FILE = /(?:^|\/)\.env(?:\.[^/]*)?$|\.(?:pem|key|p12|pfx|keystore)$|(?:^|\/)id_(?:rsa|ed25519|ecdsa)$/i;
+    withCrlf = (content) => Buffer.from(content.toString("latin1").replace(/\n/g, "\r\n"), "latin1");
+    withoutCrlf = (content) => Buffer.from(content.toString("latin1").replace(/\r\n/g, "\n"), "latin1");
     lf = (text2) => text2.replace(/\r\n/g, "\n");
     NOT_PROVEN = "Changed during the run, but not proven to be only the agent\u2019s edit (you or another tool may have changed it), so Undo left it alone. Review it and put it back yourself if you want.";
   }
@@ -24253,9 +24304,13 @@ async function sendStackAppJs(response) {
 }
 async function sendStackAppCss(response) {
   try {
-    const body = await (0, import_promises36.readFile)((0, import_node_path45.join)(__dirname, "stack", "stack.css"));
+    const [shell, scene] = await Promise.all([
+      (0, import_promises36.readFile)((0, import_node_path45.join)(__dirname, "stack", "stack.css"), "utf8"),
+      (0, import_promises36.readFile)((0, import_node_path45.join)(__dirname, "stack", "scene.css"), "utf8").catch(() => "")
+    ]);
     response.writeHead(200, { "content-type": "text/css; charset=utf-8", "cache-control": "no-store" });
-    response.end(body);
+    response.end(`${shell}
+${scene}`);
   } catch {
     sendText(response, 404, "Stack stylesheet not found: src/local-ui/stack/stack.css is missing.");
   }

package/dist/stack/scene.css

@@ -0,0 +1,484 @@
+/* The 3D construction scene (scene.ts), shared by the local Studio and viberaven.dev.
+   The Studio serves it after stack.css as /stack/app.css; the site imports it inside a .sw-scene container that
+   sets the same variables (--ink, --line-2, --font, --mono, --ease...). Only .scene rules live here. */
+/* ---------- the construction scene: a small isometric world for the action in progress ----------
+   Planned parts are traced outlines; a part works while its step is active; it settles solid only when its
+   evidence arrives. Activity is calm (slow flows, a gentle hover); milestones get one short spring. */
+:root {
+  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
+  --sc-amber: #f2c15f;
+  --sc-green: #6fd08c;
+  --sc-red: #f4715f;
+}
+.scene-stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
+.scene-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.scene-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 95, 0.45); color: var(--sc-amber); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
+.scene-tag.is-demo { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--ink-2); }
+.scene-note { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scene { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
+.scene-caption { justify-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 14, 17, 0.94); font-size: 13.5px; color: var(--ink); animation: settle 0.4s var(--ease) both; }
+.scene-caption > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scene-caption i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
+.scene-caption.is-work i { background: var(--sc-amber); animation: pulse-dot 1.4s ease-in-out infinite; }
+.scene-caption.is-wait { border-color: rgba(242, 193, 95, 0.5); }
+.scene-caption.is-wait i { background: var(--sc-amber); }
+.scene-caption.is-pass i { background: var(--sc-green); }
+.scene-caption.is-fail { border-color: rgba(244, 113, 95, 0.45); }
+.scene-caption.is-fail i { background: var(--sc-red); }
+.scene-when { font-size: 12px; color: var(--ink-3); }
+.scene-inspect { position: absolute; left: 0; bottom: 52px; z-index: 2; width: min(320px, 70%); display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
+.scene-inspect header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.scene-inspect strong { font-size: 14px; font-weight: 600; }
+.scene-inspect p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
+/* Faces. */
+.scene polygon, .scene path, .scene ellipse, .scene rect { stroke-linejoin: round; }
+.scene .f-top, .scene .f-left, .scene .f-right { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease), fill-opacity 0.45s var(--ease); }
+.scene .box .f-top { fill: #2a2a31; }
+.scene .box .f-left { fill: #1d1d23; }
+.scene .box .f-right { fill: #141418; }
+.scene .ground .f-top { fill: url(#sc-floor); }
+.scene .ground .f-left { fill: #131316; }
+.scene .ground .f-right { fill: #0d0d10; }
+.scene .pad .ground .f-top { fill: #1d1d24; }
+.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
+.scene .rim { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; transition: stroke 0.8s var(--ease); }
+.scene .raven { fill: rgba(245, 245, 247, 0.9); }
+/* Labels painted on a slanted face: world-unit sizes, a sans face and no hinting, so they stay smooth at an angle. */
+.scene text { text-rendering: geometricPrecision; }
+.scene .ground-label { fill: rgba(245, 245, 247, 0.5); font-family: var(--font); font-size: 0.36px; font-weight: 700; letter-spacing: 0.16em; }
+.scene .shadow { fill: rgba(0, 0, 0, 0.5); filter: url(#sc-soft); }
+.scene .shadow.soft { fill: rgba(0, 0, 0, 0.42); }
+/* The app window. */
+.scene .frame .f-top { fill: #34343d; }
+.scene .frame .f-left { fill: #26262d; }
+.scene .frame .f-right { fill: #1b1b21; }
+.scene .win * { vector-effect: non-scaling-stroke; }
+.scene .win-face { fill: #0e0e12; }
+.scene .win-bar { fill: #1b1b21; }
+.scene .dot { fill: rgba(255, 255, 255, 0.22); }
+.scene .win-url { fill: rgba(255, 255, 255, 0.07); }
+.scene .win-outline { fill: none; stroke: none; }
+.scene .panel { fill: #202027; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
+.scene .panel.added { stroke: rgba(242, 193, 95, 0.75); fill: #26221a; }
+.scene .panel.modified { stroke: rgba(255, 255, 255, 0.32); }
+.scene .panel-line { fill: rgba(255, 255, 255, 0.2); }
+.scene .panel-name { fill: rgba(245, 245, 247, 0.78); font-family: var(--font); font-size: 0.34px; font-weight: 600; }
+.scene .panel-in { animation: panel-in 0.7s var(--spring) both; }
+@keyframes panel-in { from { opacity: 0; transform: translate(0, -0.9px); } }
+.scene .ghost-panel { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 0.02 0.015; }
+.scene .ghost-panel.sketch { stroke: rgba(242, 193, 95, 0.7); stroke-width: 1.4; stroke-dasharray: 0.22 0.78; animation: sketch 2.6s linear infinite; }
+.scene .ghost-panel.sketch:nth-child(2) { animation-delay: -0.9s; }
+.scene .ghost-panel.sketch:nth-child(3) { animation-delay: -1.7s; }
+@keyframes sketch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+.scene .key-sign circle { fill: rgba(242, 193, 95, 0.12); stroke: var(--sc-amber); stroke-width: 1.4; }
+.scene .key-sign path { fill: none; stroke: var(--sc-amber); stroke-width: 1.6; stroke-linecap: round; }
+/* The agent unit. */
+.scene .unit .f-top { fill: #2c2c34; }
+.scene .unit .f-left { fill: #202027; }
+.scene .unit .f-right { fill: #16161b; }
+.scene .unit-plate { fill: #121216; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.scene .unit-led { fill: rgba(255, 255, 255, 0.18); }
+.scene .p-active .unit-led { fill: var(--sc-amber); animation: led 1.6s ease-in-out infinite; }
+.scene .p-done .unit-led { fill: var(--sc-green); }
+.scene .p-active .hover { animation: hover 3.6s ease-in-out infinite; }
+@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
+@keyframes led { 50% { opacity: 0.35; } }
+/* Posts, lamps, ports, towers, crates. */
+.scene .post .f-top { fill: #2e2e36; }
+.scene .post .f-left { fill: #222229; }
+.scene .post .f-right { fill: #18181d; }
+.scene .lamp .f-top { fill: #3a3a42; }
+.scene .lamp .f-left { fill: #2b2b32; }
+.scene .lamp .f-right { fill: #222228; }
+.scene .p-active .lamp .f-top { fill: #f6d58a; }
+.scene .p-active .lamp .f-left { fill: #c99a3f; }
+.scene .p-active .lamp .f-right { fill: #a87e30; }
+.scene .p-active .lamp { animation: led 1.8s ease-in-out infinite; }
+.scene .p-done .lamp .f-top { fill: #9be3b1; }
+.scene .p-done .lamp .f-left { fill: #57b673; }
+.scene .p-done .lamp .f-right { fill: #3f8f57; }
+.scene .p-failed .lamp .f-top { fill: #f8a597; }
+.scene .p-failed .lamp .f-left { fill: #d35a49; }
+.scene .p-failed .lamp .f-right { fill: #a9463a; }
+.scene .port .f-top { fill: #2e2e36; }
+.scene .port-led { fill: rgba(255, 255, 255, 0.18); }
+.scene .p-done .port-led { fill: var(--sc-green); }
+.scene .p-failed .port-led { fill: var(--sc-red); }
+.scene .tower .f-top { fill: #303039; }
+.scene .tower .f-left { fill: #23232a; }
+.scene .tower .f-right { fill: #18181e; }
+.scene .vent { fill: rgba(255, 255, 255, 0.07); }
+.scene .tower-led { fill: rgba(255, 255, 255, 0.18); }
+.scene .p-active .tower-led { fill: var(--sc-amber); animation: led 1.2s ease-in-out infinite; }
+.scene .p-done .tower-led { fill: var(--sc-green); }
+.scene .p-failed .tower-led { fill: var(--sc-red); }
+.scene .crate .f-top { fill: #3a342a; }
+.scene .crate .f-left { fill: #2b261f; }
+.scene .crate .f-right { fill: #221e18; }
+.scene .crate-x { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
+/* Database layers, gateway, barrier. */
+.scene .cyl .f-left { fill: #1c1f1e; stroke: rgba(62, 207, 142, 0.18); }
+.scene .cyl .f-top { fill: #262b29; stroke: rgba(62, 207, 142, 0.38); }
+.scene .cyl { animation: layer-in 0.7s var(--spring) both; }
+.scene .cyl.ghost { animation: none; }
+.scene .cyl.ghost .f-left, .scene .cyl.ghost .f-top { fill: transparent; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 5; }
+@keyframes layer-in { from { opacity: 0; transform: translateY(-16px); } }
+.scene .table { fill: rgba(62, 207, 142, 0.16); stroke: rgba(62, 207, 142, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; animation: panel-in 0.6s var(--spring) both; }
+.scene .pillar .f-top, .scene .lintel .f-top { fill: #33333b; }
+.scene .pillar .f-left, .scene .lintel .f-left { fill: #26262d; }
+.scene .pillar .f-right, .scene .lintel .f-right { fill: #1b1b20; }
+.scene .lintel-plate { fill: #f5f5f7; }
+.scene .bar .f-top { fill: #3b3222; }
+.scene .bar .f-left { fill: #2c261a; }
+.scene .bar .f-right { fill: #231e15; }
+.scene .bar-stripes { stroke: rgba(242, 193, 95, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
+/* Connections. */
+.scene .pipe-base { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 4; stroke-linecap: round; }
+.scene .pipe { fill: none; stroke: rgba(245, 245, 247, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
+.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 10; }
+.scene .p-planned .pipe-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.4; stroke-dasharray: 3 5; }
+.scene .p-active .pipe-base { stroke: rgba(242, 193, 95, 0.14); }
+.scene .p-active .pipe-flow { stroke: var(--sc-amber); animation: flow 1.4s linear infinite; }
+.scene .p-done .pipe { animation: trace 0.9s var(--ease) forwards; }
+.scene .p-failed .pipe-base { stroke: rgba(244, 113, 95, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
+.scene .p-idle .pipe-base { stroke: rgba(255, 255, 255, 0.07); }
+@keyframes flow { to { stroke-dashoffset: -13; } }
+@keyframes trace { to { stroke-dashoffset: 0; } }
+/* Travellers. */
+.scene .token { fill: #f5f5f7; }
+.scene .token-halo { fill: rgba(245, 245, 247, 0.16); }
+.scene .spark .token { fill: #fbe2a6; }
+.scene .spark .token-halo { fill: rgba(242, 193, 95, 0.22); }
+.scene .record .token { fill: #7fe0b0; }
+.scene .record .token-halo { fill: rgba(62, 207, 142, 0.22); }
+.scene .blocked .token, .scene .leak .token { fill: #f8a597; }
+.scene .blocked .token-halo, .scene .leak .token-halo { fill: rgba(244, 113, 95, 0.22); }
+.scene .package .token { fill: #f5f5f7; }
+/* Labels pinned to the world. */
+.scene .tag rect { fill: rgba(12, 12, 15, 0.94); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
+.scene .tag text { fill: #d9d9df; font-family: var(--font); font-size: 9.5px; font-weight: 600; }
+.scene .p-done .tag-check rect, .scene .p-done .tag-port rect { stroke: rgba(111, 208, 140, 0.55); }
+.scene .p-done .tag-check text, .scene .p-done .tag-port text { fill: var(--sc-green); }
+.scene .p-failed .tag-check rect { stroke: rgba(244, 113, 95, 0.6); }
+.scene .p-failed .tag-check text { fill: var(--red-ink); }
+.scene .p-active .tag-check rect { stroke: rgba(242, 193, 95, 0.6); }
+/* Part states. */
+.scene .part { outline: none; cursor: pointer; }
+.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.2s var(--ease) forwards; }
+.scene .part.p-planned .win-face, .scene .part.p-planned .win-bar, .scene .part.p-planned image, .scene .part.p-planned .raven { opacity: 0.25; }
+.scene .part.p-planned .shadow { opacity: 0.3; }
+.scene .part.p-idle { opacity: 0.55; }
+.scene .part.p-done { animation: settle-part 0.6s var(--spring) both; }
+@keyframes settle-part { from { transform: translateY(-6px); } }
+.scene .part.p-failed .f-top { fill: #3c1f1c; stroke: rgba(244, 113, 95, 0.75); }
+.scene .part.p-failed .f-left { fill: #2c1715; stroke: rgba(244, 113, 95, 0.5); }
+.scene .part.p-failed .f-right { fill: #211211; stroke: rgba(244, 113, 95, 0.4); }
+.scene .part.p-failed .win-face { fill: #1a0f0e; }
+.scene .part.p-waiting .f-top, .scene .part.p-waiting .f-left, .scene .part.p-waiting .f-right { stroke: rgba(242, 193, 95, 0.8); stroke-dasharray: 5 4; }
+.scene .part.p-waiting .win-face { fill: #17140c; }
+.scene .part.is-focus { filter: drop-shadow(0 0 10px rgba(242, 193, 95, 0.22)); }
+.scene .part.is-focus.p-active .frame .f-top { fill: #3b3a33; }
+.scene .part.is-selected .f-top, .scene .part.is-selected .f-left, .scene .part.is-selected .f-right { stroke: rgba(245, 245, 247, 0.85); stroke-width: 1.4; }
+.scene .part:focus-visible .f-top, .scene .part:focus-visible .f-left, .scene .part:focus-visible .f-right { stroke: var(--sc-amber); stroke-width: 2; }
+.scene .part:hover .f-top { stroke: rgba(255, 255, 255, 0.35); }
+/* Phases: a waiting scene holds still around the part that needs you; a failed one marks it. */
+.scene.is-wait .part:not(.p-waiting):not([data-part="platform"]) { opacity: 0.5; transition: opacity 0.5s var(--ease); }
+.scene.is-wait .pipe-flow, .scene.is-wait .hover, .scene.is-wait .sketch, .scene.is-wait .token-g { animation-play-state: paused; }
+.scene.is-fail .part:not(.p-failed):not([data-part="platform"]) { opacity: 0.7; }
+.scene.is-done [data-part="platform"] .rim { stroke: rgba(111, 208, 140, 0.5); }
+.scene.is-stopped .part { opacity: 0.6; }
+.scene .fx-payoff .ring { fill: none; stroke: rgba(111, 208, 140, 0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: payoff 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
+.scene .fx-payoff .ring.two { stroke: rgba(245, 245, 247, 0.35); animation-delay: 0.22s; }
+@keyframes payoff { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
+.scene.is-demo .tag rect { stroke-dasharray: 3 3; }
+@media (prefers-reduced-motion: reduce) {
+  .scene *, .scene .part, .scene-caption, .scene-inspect { animation: none !important; transition: none !important; }
+  .scene .p-done .pipe { stroke-dashoffset: 0; }
+  .scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { stroke-dashoffset: 0; }
+  .scene .p-active .pipe-flow { stroke-dasharray: none; }
+  .scene .fx-payoff { display: none; }
+}
+.scene .box .f-top { fill: #3c3c46; }
+.scene .box .f-left { fill: #2b2b33; }
+.scene .box .f-right { fill: #1f1f26; }
+.scene .edge { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; stroke-linecap: round; }
+.scene .ground .f-top { fill: #202027; }
+.scene .ground .f-left { fill: #18181d; }
+.scene .ground .f-right { fill: #111115; }
+.scene .ground .edge { stroke: rgba(255, 255, 255, 0.16); }
+.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.06); }
+.scene .frame .f-top { fill: #4b4b56; }
+.scene .frame .f-left { fill: #35353e; }
+.scene .frame .f-right { fill: #27272e; }
+.scene .unit .f-top { fill: #44444e; }
+.scene .unit .f-left { fill: #31313a; }
+.scene .unit .f-right { fill: #24242b; }
+.scene .post .f-top { fill: #42424c; }
+.scene .post .f-left { fill: #30303a; }
+.scene .post .f-right { fill: #23232a; }
+.scene .lamp .f-top { fill: #55555f; }
+.scene .lamp .f-left { fill: #3e3e47; }
+.scene .lamp .f-right { fill: #2f2f37; }
+.scene .tower .f-top { fill: #45454f; }
+.scene .tower .f-left { fill: #32323b; }
+.scene .tower .f-right { fill: #25252c; }
+.scene .pillar .f-top, .scene .lintel .f-top { fill: #474752; }
+.scene .pillar .f-left, .scene .lintel .f-left { fill: #34343d; }
+.scene .pillar .f-right, .scene .lintel .f-right { fill: #26262e; }
+.scene .crate .f-top { fill: #4a4133; }
+.scene .crate .f-left { fill: #383126; }
+.scene .crate .f-right { fill: #2b261e; }
+.scene .port .f-top { fill: #42424c; }
+.scene .cyl .f-left { fill: #232826; }
+.scene .cyl .f-top { fill: #303733; }
+.scene .part.p-planned .edge { stroke: none; }
+.scene .part.p-failed .edge { stroke: rgba(244, 113, 95, 0.6); }
+.scene .part.p-done .edge { stroke: rgba(255, 255, 255, 0.34); }
+.scene-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22%; bottom: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent); pointer-events: none; }
+/* ---------- units and brands: every object is a machined unit with its mark; providers wear their own colours ---------- */
+.scene .unit .f-top { fill: #41414b; }
+.scene .unit .f-left { fill: #2e2e36; }
+.scene .unit .f-right { fill: #222229; }
+.scene .pedestal .f-top { fill: #2a2a31; }
+.scene .pedestal .f-left { fill: #1e1e24; }
+.scene .pedestal .f-right { fill: #16161b; }
+.scene .unit-ring { fill: none; stroke: var(--brand); stroke-opacity: 0.55; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 0.4s var(--ease), stroke-opacity 0.4s var(--ease); }
+.scene .unit-led { fill: var(--brand); fill-opacity: 0.35; }
+.scene .p-planned .unit-ring { stroke-opacity: 0.15; }
+.scene .p-active .unit-ring { stroke: var(--sc-amber); stroke-opacity: 0.95; }
+.scene .p-active .unit-led { fill: var(--sc-amber); fill-opacity: 1; animation: led 1.6s ease-in-out infinite; }
+.scene .p-done .unit-ring { stroke: var(--sc-green); stroke-opacity: 0.9; }
+.scene .p-done .unit-led { fill: var(--sc-green); fill-opacity: 1; }
+.scene .p-failed .unit-ring { stroke: var(--sc-red); stroke-opacity: 0.95; }
+.scene .p-failed .unit-led { fill: var(--sc-red); fill-opacity: 1; }
+.scene .p-waiting .unit-ring { stroke: var(--sc-amber); stroke-dasharray: 4 3; }
+.scene .p-waiting .unit-led { fill: var(--sc-amber); fill-opacity: 1; }
+.scene .p-done .unit-wrap .edge, .scene .p-active .unit-wrap .edge { stroke: rgba(255, 255, 255, 0.4); }
+/* Supabase: green seams between layers, the bolt on a dark badge. */
+.scene .brand-supabase .cyl .f-top { fill: #2c3530; stroke: rgba(62, 207, 142, 0.55); }
+.scene .brand-supabase .cyl .f-left { fill: #1f2522; stroke: rgba(62, 207, 142, 0.22); }
+.scene .seam { fill: none; stroke: var(--brand); stroke-opacity: 0.7; stroke-width: 1.4; stroke-linecap: round; filter: url(#sc-glow); }
+.scene .p-active .seam { animation: led 1.8s ease-in-out infinite; }
+.scene .brand-badge { fill: #0f1512; stroke: rgba(62, 207, 142, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
+/* Google: coloured caps on the pillars, four lights by the G. */
+.scene .cap.g-blue .f-top { fill: #4285F4; }
+.scene .cap.g-blue .f-left { fill: #3367c7; }
+.scene .cap.g-blue .f-right { fill: #2a55a6; }
+.scene .cap.g-green .f-top { fill: #34A853; }
+.scene .cap.g-green .f-left { fill: #2b8a45; }
+.scene .cap.g-green .f-right { fill: #237038; }
+.scene .brand-google .lintel .f-top { fill: #4a4a55; }
+.scene .lintel-plate { fill: #f5f5f7; }
+.scene .gdot { opacity: 0.85; }
+.scene .p-active .gdot { animation: led 1.4s ease-in-out infinite; }
+.scene .p-planned .cap .f-top, .scene .p-planned .cap .f-left, .scene .p-planned .cap .f-right { fill-opacity: 0.08; }
+/* GitHub: a dark vault with a commit graph. */
+.scene .vault .f-top { fill: #2d333b; }
+.scene .vault .f-left { fill: #22272e; }
+.scene .vault .f-right { fill: #1c2128; }
+.scene .gitgraph path { fill: none; stroke: rgba(240, 246, 252, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
+.scene .gitgraph .branch { stroke: #3fb950; }
+.scene .gitgraph circle { fill: #0d1117; stroke: rgba(240, 246, 252, 0.85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
+.scene .gitgraph .branch-dot { stroke: #3fb950; }
+.scene .gitgraph .tip { fill: #f5f5f7; }
+.scene .p-active .gitgraph .tip { animation: led 1.4s ease-in-out infinite; }
+/* Vercel: a black pad and the white triangle. */
+.scene .brand-vercel .ground .f-top { fill: #0c0c0e; }
+.scene .brand-vercel .ground .f-left { fill: #08080a; }
+.scene .brand-vercel .ground .f-right { fill: #050506; }
+.scene .brand-vercel .ground .edge { stroke: rgba(245, 245, 247, 0.35); }
+.scene .pyramid .f-left { fill: #f5f5f7; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
+.scene .pyramid .f-right { fill: #b4b4bc; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; }
+.scene .pyramid .edge { fill: none; stroke: #ffffff; stroke-width: 1.2; }
+.scene .part.p-planned .pyramid .f-left, .scene .part.p-planned .pyramid .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.3); }
+.scene .part.p-failed .pyramid .f-left { fill: #f2b3a9; }
+/* npm's command unit and the framework plate on the dev server. */
+.scene .unit-wrap .shadow { opacity: 0.9; }
+@media (prefers-reduced-motion: reduce) {
+  .scene .seam, .scene .gdot, .scene .gitgraph .tip { animation: none !important; }
+}
+.scene .sign .f-top { fill: #4a4a55; }
+.scene .sign .f-left { fill: #3a3a44; }
+.scene .sign .f-right { fill: #2a2a32; }
+/* Mascots: a provider's mark walks, rolls or hops along the connection while that step works. */
+.scene .walker-shadow { fill: rgba(0, 0, 0, 0.45); }
+.scene .walker-body { transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .walker.is-walk .walker-body { animation: waddle 0.42s ease-in-out infinite alternate; }
+.scene .walker.is-hop .walker-body { animation: hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
+.scene .walker.is-roll .walker-body { transform-origin: 50% 50%; animation: roll 0.9s linear infinite; }
+.scene .walker image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
+@keyframes waddle { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
+@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.08, 0.9); } 45% { transform: translateY(-9px) scale(0.95, 1.06); } 70% { transform: translateY(-2px) scale(1, 1); } }
+@keyframes roll { to { transform: rotate(360deg); } }
+.scene.is-wait .walker { display: none; }
+@media (prefers-reduced-motion: reduce) { .scene .walker { display: none; } }
+/* ---------- characters and hype ---------- */
+/* Claude Code's voxel critter. */
+.scene .cc .f-top { fill: #eda186; }
+.scene .cc .f-left { fill: #D97757; }
+.scene .cc .f-right { fill: #b05a3e; }
+.scene .cc .edge { stroke: rgba(255, 220, 200, 0.55); }
+.scene .cc-eye { fill: #1b0f0a; }
+.scene .critter .cc-torso, .scene .critter .cc-legs { transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .p-active .critter .cc-torso, .scene .critter.is-busy .cc-torso { animation: chomp 0.1s ease-in-out infinite alternate; }
+.scene .p-active .critter .cc-legs.a, .scene .critter.is-busy .cc-legs.a { animation: step 0.1s ease-in-out infinite alternate; }
+.scene .p-active .critter .cc-legs.b, .scene .critter.is-busy .cc-legs.b { animation: step 0.1s ease-in-out infinite alternate-reverse; }
+.scene .p-done .critter { animation: happy 0.5s var(--spring) 2 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
+.scene .p-planned .critter .f-top, .scene .p-planned .critter .f-left, .scene .p-planned .critter .f-right { fill-opacity: 0.12; stroke: rgba(217, 119, 87, 0.5); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
+@keyframes chomp { from { transform: scale(1, 1); } to { transform: scale(1.06, 0.9); } }
+@keyframes step { from { transform: translateY(0); } to { transform: translateY(-3px); } }
+@keyframes happy { to { transform: translateY(-8px) scale(1.04); } }
+.scene .tok rect { fill: #fbe2a6; stroke: #f2c15f; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(242, 193, 95, 0.8)); }
+/* Supabase lightning. */
+.scene .zap { opacity: 0; animation: strike 1.65s linear infinite; }
+.scene .zap-glow { fill: none; stroke: #3ECF8E; stroke-width: 10; stroke-opacity: 0.35; stroke-linejoin: round; filter: url(#sc-glow); }
+.scene .zap-core { fill: none; stroke: #d9ffe9; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
+.scene .zap-core.thin { stroke-width: 1.6; stroke: #8ff0c2; }
+.scene .zap-hit { fill: rgba(62, 207, 142, 0.45); filter: url(#sc-glow); }
+.scene .zap-spark { stroke: #b6ffd9; stroke-width: 2; stroke-linecap: round; }
+@keyframes strike { 0% { opacity: 0; } 3% { opacity: 1; } 7% { opacity: 0.25; } 11% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
+/* PostHog: hedgehog, events, bars. */
+.scene .ph-body .f-top { fill: #8b5e3c; }
+.scene .ph-body .f-left { fill: #6e4930; }
+.scene .ph-body .f-right { fill: #573925; }
+.scene .ph-head .f-top { fill: #c9926a; }
+.scene .ph-head .f-left { fill: #a97750; }
+.scene .ph-head .f-right { fill: #8d6141; }
+.scene .ph-nose .f-top, .scene .ph-nose .f-left, .scene .ph-nose .f-right { fill: #1d1f27; }
+.scene .ph-leg .f-top, .scene .ph-leg .f-left, .scene .ph-leg .f-right { fill: #4a3020; }
+.scene .ph-eye { fill: #111; }
+.scene .ph-spike.c0 .f-top { fill: #F54E00; }
+.scene .ph-spike.c0 .f-left { fill: #c43e00; }
+.scene .ph-spike.c0 .f-right { fill: #9a3100; }
+.scene .ph-spike.c1 .f-top { fill: #F9BD2B; }
+.scene .ph-spike.c1 .f-left { fill: #d39c17; }
+.scene .ph-spike.c1 .f-right { fill: #a87b10; }
+.scene .ph-spike.c2 .f-top { fill: #3b63ff; }
+.scene .ph-spike.c2 .f-left { fill: #1D4AFF; }
+.scene .ph-spike.c2 .f-right { fill: #1538c4; }
+.scene .ph-bar.c0 .f-top { fill: #F54E00; }
+.scene .ph-bar.c0 .f-left { fill: #c43e00; }
+.scene .ph-bar.c0 .f-right { fill: #9a3100; }
+.scene .ph-bar.c1 .f-top { fill: #F9BD2B; }
+.scene .ph-bar.c1 .f-left { fill: #d39c17; }
+.scene .ph-bar.c1 .f-right { fill: #a87b10; }
+.scene .ph-bar.c2 .f-top { fill: #3b63ff; }
+.scene .ph-bar.c2 .f-left { fill: #1D4AFF; }
+.scene .ph-bar.c2 .f-right { fill: #1538c4; }
+.scene .hedgehog .ph-legs { transform-box: fill-box; }
+.scene .p-active .hedgehog .ph-legs.a { animation: step 0.16s ease-in-out infinite alternate; }
+.scene .p-active .hedgehog .ph-legs.b { animation: step 0.16s ease-in-out infinite alternate-reverse; }
+.scene .p-planned .hedgehog, .scene .p-idle .hedgehog { opacity: 0.35; }
+.scene .bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: pump 0.7s ease-in-out infinite alternate; }
+@keyframes pump { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
+.scene .evt.c0 { fill: #F54E00; }
+.scene .evt.c1 { fill: #F9BD2B; }
+.scene .evt.c2 { fill: #3b63ff; }
+.scene .evt { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
+/* GitHub commits, Vercel launch, Google orbit. */
+.scene .commit .token { fill: #3fb950; }
+.scene .commit .token-halo { fill: rgba(63, 185, 80, 0.25); }
+.scene .ring-launch { fill: none; stroke: #f5f5f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: launch 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; }
+@keyframes launch { from { opacity: 0.9; transform: translateY(0) scale(0.4); } to { opacity: 0; transform: translateY(-46px) scale(1.5); } }
+.scene .speed { stroke: rgba(245, 245, 247, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 14; animation: speed 0.45s linear infinite; }
+@keyframes speed { to { stroke-dashoffset: 22; } }
+.scene .orbit-spin { animation: orbit 1.1s linear infinite; transform-origin: 0 0; }
+.scene .orbit circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); }
+@keyframes orbit { to { transform: rotate(360deg); } }
+.scene.is-wait .hype, .scene.is-wait .critter * { animation-play-state: paused; }
+@media (prefers-reduced-motion: reduce) { .scene .hype, .scene .tok { display: none; } .scene .critter * { animation: none !important; } }
+/* ---------- premium kit: solid emblems, plinths, gateway doors, insight card, travelling payloads ---------- */
+.scene .emb-side { filter: brightness(0.34) saturate(0.85); }
+.scene .emb-face { filter: drop-shadow(0 0 0.02px rgba(0, 0, 0, 0)); }
+.scene .emb-sheen { fill: url(#sc-sheen); mix-blend-mode: screen; }
+.scene .emb-float { transform-box: fill-box; }
+.scene .p-active .emb-float { animation: hover 3.8s ease-in-out infinite; }
+.scene .p-done .emb-float { animation: settle-part 0.7s var(--spring) both; }
+.scene .part.p-planned .emblem, .scene .part.p-idle .emblem { opacity: 0.28; }
+.scene .part.p-planned .emb-sheen { display: none; }
+.scene .plinth .f-top { fill: #3a3a44; }
+.scene .plinth .f-left { fill: #2a2a31; }
+.scene .plinth .f-right { fill: #1f1f25; }
+.scene .emblem-unit .plinth .edge { stroke: var(--brand); stroke-opacity: 0.55; }
+.scene .door .f-top { fill: #52525e; }
+.scene .door .f-left { fill: #3c3c46; }
+.scene .door .f-right { fill: #2e2e36; }
+.scene .door.google .f-left { fill: #2f3f5e; }
+.scene .door.github .f-left { fill: #2d333b; }
+.scene .door .edge { stroke: rgba(255, 255, 255, 0.35); }
+.scene .cap.g-dark .f-top { fill: #2d333b; }
+.scene .cap.g-dark .f-left { fill: #22272e; }
+.scene .cap.g-dark .f-right { fill: #1c2128; }
+.scene .cap.g-light .f-top { fill: #f0f6fc; }
+.scene .cap.g-light .f-left { fill: #c9d1d9; }
+.scene .cap.g-light .f-right { fill: #a0a8b0; }
+.scene .brand-github .lintel .f-top { fill: #2d333b; }
+.scene .brand-github .lintel .f-left { fill: #22272e; }
+.scene .brand-github .lintel .f-right { fill: #1c2128; }
+.scene .insight .card .f-top { fill: #3a3a44; }
+.scene .insight .card .f-left { fill: #26262d; }
+.scene .insight .card .f-right { fill: #1b1b21; }
+.scene .insight .stand .f-top { fill: #2e2e36; }
+.scene .insight .stand .f-left { fill: #22222a; }
+.scene .insight .stand .f-right { fill: #18181d; }
+.scene .ins-bg { fill: #0f0f13; }
+.scene .ins-title { fill: rgba(255, 255, 255, 0.25); }
+.scene .ins-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.scene .ins-line { fill: none; stroke: #F9BD2B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+.scene .ins-dot { fill: #F54E00; }
+.scene .pl { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
+@media (prefers-reduced-motion: reduce) { .scene .emb-float { animation: none !important; } .scene .emb-sheen { display: none; } }
+/* ---------- mascots: GitHub's Octocat, PostHog's hedgehog, Claude polishing ---------- */
+.scene .oc .f-top { fill: #3d444d; }
+.scene .oc .f-left { fill: #2b3137; }
+.scene .oc .f-right { fill: #1c2127; }
+.scene .oc .edge { stroke: rgba(240, 246, 252, 0.4); }
+.scene .oc-face { fill: #f6c8b3; }
+.scene .oc-eye { fill: #1c2127; }
+.scene .oc-shine { fill: #fff; }
+.scene .oc-mouth { fill: #a5524a; }
+.scene .octocat .oc-tent { transform-box: fill-box; transform-origin: 50% 0; animation: wiggle 0.24s ease-in-out infinite alternate; }
+.scene .octocat .oc-tent.t1 { animation-direction: alternate-reverse; }
+@keyframes wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
+.scene .mx-body .f-top { fill: #e0b07a; }
+.scene .mx-body .f-left { fill: #c49360; }
+.scene .mx-body .f-right { fill: #a47746; }
+.scene .mx-face .f-top { fill: #f0cfa2; }
+.scene .mx-face .f-left { fill: #ddb684; }
+.scene .mx-face .f-right { fill: #bf9564; }
+.scene .mx-spike .f-top { fill: #4a3524; }
+.scene .mx-spike .f-left { fill: #35251a; }
+.scene .mx-spike .f-right { fill: #251912; }
+.scene .mx-leg .f-top, .scene .mx-leg .f-left, .scene .mx-leg .f-right { fill: #6b4a2e; }
+.scene .mx-nose .f-top, .scene .mx-nose .f-left, .scene .mx-nose .f-right { fill: #15161b; }
+.scene .mx-eye { fill: #15161b; }
+.scene .mx-cheek { fill: #f08a6b; opacity: 0.8; }
+.scene .mx-pole .f-top { fill: #c8c8d0; }
+.scene .mx-pole .f-left { fill: #9a9aa5; }
+.scene .mx-pole .f-right { fill: #74747e; }
+.scene .mx-flag { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; }
+.scene .flag-text { fill: #fff; font: 800 0.26px/1 var(--font-sans, system-ui); letter-spacing: 0.02px; }
+.scene .mx-pole .edge, .scene .mx-body .edge, .scene .mx-face .edge, .scene .mx-spike .edge, .scene .mx-leg .edge, .scene .mx-nose .edge { stroke: rgba(255, 240, 220, 0.3); }
+.scene .sparkle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
+.scene .burst { fill: rgba(137, 87, 229, 0.35); stroke: #c9b3ff; stroke-width: 2; }
+.scene .say { fill: #8957e5; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
+.scene .say-text { fill: #fff; font: 800 11px/1 var(--font-sans, system-ui); letter-spacing: 0.02em; }
+@media (prefers-reduced-motion: reduce) { .scene .skit { display: none; } }
+.scene .mx-belly { fill: #f7e3c4; }
+.scene .mx-snout .f-top { fill: #f7e3c4; }
+.scene .mx-snout .f-left { fill: #e6cba6; }
+.scene .mx-snout .f-right { fill: #c9ab84; }
+.scene .mx-brow { fill: #4a2a16; }
+.scene .mx-hat .f-top { fill: #ffd25a; }
+.scene .mx-hat .f-left { fill: #F9BD2B; }
+.scene .mx-hat .f-right { fill: #c9921a; }
+.scene .mx-hat-ridge .f-top, .scene .mx-hat-ridge .f-left, .scene .mx-hat-ridge .f-right { fill: #e0a51f; }
+.scene .mx-hat .edge, .scene .mx-snout .edge { stroke: rgba(255, 245, 220, 0.45); }
+.scene .smudge { fill: rgba(214, 206, 192, 0.3); filter: blur(0.05px); }
+.scene .smudge .streak { fill: none; stroke: rgba(214, 206, 192, 0.35); stroke-width: 0.07; stroke-linecap: round; }
+.scene .bubble { fill: rgba(220, 240, 255, 0.18); stroke: rgba(235, 248, 255, 0.85); stroke-width: 1; }
+.scene .foam { fill: rgba(250, 252, 255, 0.85); }
+
+/* Shared with stack.css, copied so this file stands alone. */
+@keyframes pulse-dot { 50% { opacity: 0.3; } }
+@keyframes settle { from { transform: translateY(4px); } to { transform: none; } }

package/dist/stack/stack.css

@@ -1262,42 +1262,13 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
   .app .board.has-screen.is-side { grid-template-columns: minmax(250px, 320px) minmax(0, 250px); column-gap: clamp(32px, 7cqi, 56px); }
 }
 
-/* ---------- the construction scene: a small isometric world for the action in progress ----------
-   Planned parts are traced outlines; a part works while its step is active; it settles solid only when its
-   evidence arrives. Activity is calm (slow flows, a gentle hover); milestones get one short spring. */
-:root {
-  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
-  --sc-amber: #f2c15f;
-  --sc-green: #6fd08c;
-  --sc-red: #f4715f;
-}
-
 /* Layout: the scene takes the canvas, the panel narrows, the real app gets its own window. */
 .stage.is-work.has-panel .canvas { right: min(440px, 36%); }
 .stage.is-work .stage-body.panel { width: calc(min(440px, 36%) - 28px); }
 .app:has(.stage.is-work) .rail { left: calc((100% - min(440px, 36%)) / 2); }
 .app:has(.stage.is-work) .appwin { right: min(440px, 36vw); }
 .canvas.is-scene { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); align-items: stretch; place-items: stretch; gap: 16px; padding: 18px 18px 84px; cursor: default; overflow: hidden; background: radial-gradient(1200px 600px at 40% 30%, rgba(242, 193, 95, 0.035), transparent 60%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px, #060607; }
-.scene-stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
-.scene-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
-.scene-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 95, 0.45); color: var(--sc-amber); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
-.scene-tag.is-demo { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--ink-2); }
-.scene-note { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.scene { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
-.scene-caption { justify-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 14, 17, 0.94); font-size: 13.5px; color: var(--ink); animation: settle 0.4s var(--ease) both; }
-.scene-caption > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.scene-caption i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
-.scene-caption.is-work i { background: var(--sc-amber); animation: pulse-dot 1.4s ease-in-out infinite; }
-.scene-caption.is-wait { border-color: rgba(242, 193, 95, 0.5); }
-.scene-caption.is-wait i { background: var(--sc-amber); }
-.scene-caption.is-pass i { background: var(--sc-green); }
-.scene-caption.is-fail { border-color: rgba(244, 113, 95, 0.45); }
-.scene-caption.is-fail i { background: var(--sc-red); }
-.scene-when { font-size: 12px; color: var(--ink-3); }
-.scene-inspect { position: absolute; left: 0; bottom: 52px; z-index: 2; width: min(320px, 70%); display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
-.scene-inspect header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.scene-inspect strong { font-size: 14px; font-weight: 600; }
-.scene-inspect p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
+
 .insp-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
 .insp-state.is-done { color: var(--sc-green); } .insp-state.is-active, .insp-state.is-waiting { color: var(--sc-amber); } .insp-state.is-failed { color: var(--red-ink); }
 .insp-files { list-style: none; display: grid; gap: 3px; }
@@ -1316,147 +1287,31 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
 .live-window header span { font-size: 11.5px; color: var(--ink-3); }
 .live-window .screen { margin-top: 0; }
 
-/* Faces. */
-.scene polygon, .scene path, .scene ellipse, .scene rect { stroke-linejoin: round; }
-.scene .f-top, .scene .f-left, .scene .f-right { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease), fill-opacity 0.45s var(--ease); }
-.scene .box .f-top { fill: #2a2a31; } .scene .box .f-left { fill: #1d1d23; } .scene .box .f-right { fill: #141418; }
-.scene .ground .f-top { fill: url(#sc-floor); } .scene .ground .f-left { fill: #131316; } .scene .ground .f-right { fill: #0d0d10; }
-.scene .pad .ground .f-top { fill: #1d1d24; }
-.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
-.scene .rim { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; transition: stroke 0.8s var(--ease); }
-.scene .raven { fill: rgba(245, 245, 247, 0.9); }
-/* Labels painted on a slanted face: world-unit sizes, a sans face and no hinting, so they stay smooth at an angle. */
-.scene text { text-rendering: geometricPrecision; }
-.scene .ground-label { fill: rgba(245, 245, 247, 0.5); font-family: var(--font); font-size: 0.36px; font-weight: 700; letter-spacing: 0.16em; }
-.scene .shadow { fill: rgba(0, 0, 0, 0.5); filter: url(#sc-soft); }
-.scene .shadow.soft { fill: rgba(0, 0, 0, 0.42); }
-
-/* The app window. */
-.scene .frame .f-top { fill: #34343d; } .scene .frame .f-left { fill: #26262d; } .scene .frame .f-right { fill: #1b1b21; }
-.scene .win * { vector-effect: non-scaling-stroke; }
-.scene .win-face { fill: #0e0e12; }
-.scene .win-bar { fill: #1b1b21; }
-.scene .dot { fill: rgba(255, 255, 255, 0.22); }
-.scene .win-url { fill: rgba(255, 255, 255, 0.07); }
-.scene .win-outline { fill: none; stroke: none; }
-.scene .panel { fill: #202027; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
-.scene .panel.added { stroke: rgba(242, 193, 95, 0.75); fill: #26221a; }
-.scene .panel.modified { stroke: rgba(255, 255, 255, 0.32); }
-.scene .panel-line { fill: rgba(255, 255, 255, 0.2); }
-.scene .panel-name { fill: rgba(245, 245, 247, 0.78); font-family: var(--font); font-size: 0.34px; font-weight: 600; }
-.scene .panel-in { animation: panel-in 0.7s var(--spring) both; }
-@keyframes panel-in { from { opacity: 0; transform: translate(0, -0.9px); } }
-.scene .ghost-panel { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 0.02 0.015; }
-.scene .ghost-panel.sketch { stroke: rgba(242, 193, 95, 0.7); stroke-width: 1.4; stroke-dasharray: 0.22 0.78; animation: sketch 2.6s linear infinite; }
-.scene .ghost-panel.sketch:nth-child(2) { animation-delay: -0.9s; }
-.scene .ghost-panel.sketch:nth-child(3) { animation-delay: -1.7s; }
-@keyframes sketch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
-.scene .key-sign circle { fill: rgba(242, 193, 95, 0.12); stroke: var(--sc-amber); stroke-width: 1.4; }
-.scene .key-sign path { fill: none; stroke: var(--sc-amber); stroke-width: 1.6; stroke-linecap: round; }
-
-/* The agent unit. */
-.scene .unit .f-top { fill: #2c2c34; } .scene .unit .f-left { fill: #202027; } .scene .unit .f-right { fill: #16161b; }
-.scene .unit-plate { fill: #121216; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
-.scene .unit-led { fill: rgba(255, 255, 255, 0.18); }
-.scene .p-active .unit-led { fill: var(--sc-amber); animation: led 1.6s ease-in-out infinite; }
-.scene .p-done .unit-led { fill: var(--sc-green); }
-.scene .p-active .hover { animation: hover 3.6s ease-in-out infinite; }
-@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
-@keyframes led { 50% { opacity: 0.35; } }
-
-/* Posts, lamps, ports, towers, crates. */
-.scene .post .f-top { fill: #2e2e36; } .scene .post .f-left { fill: #222229; } .scene .post .f-right { fill: #18181d; }
-.scene .lamp .f-top { fill: #3a3a42; } .scene .lamp .f-left { fill: #2b2b32; } .scene .lamp .f-right { fill: #222228; }
-.scene .p-active .lamp .f-top { fill: #f6d58a; } .scene .p-active .lamp .f-left { fill: #c99a3f; } .scene .p-active .lamp .f-right { fill: #a87e30; }
-.scene .p-active .lamp { animation: led 1.8s ease-in-out infinite; }
-.scene .p-done .lamp .f-top { fill: #9be3b1; } .scene .p-done .lamp .f-left { fill: #57b673; } .scene .p-done .lamp .f-right { fill: #3f8f57; }
-.scene .p-failed .lamp .f-top { fill: #f8a597; } .scene .p-failed .lamp .f-left { fill: #d35a49; } .scene .p-failed .lamp .f-right { fill: #a9463a; }
-.scene .port .f-top { fill: #2e2e36; }
-.scene .port-led { fill: rgba(255, 255, 255, 0.18); }
-.scene .p-done .port-led { fill: var(--sc-green); }
-.scene .p-failed .port-led { fill: var(--sc-red); }
-.scene .tower .f-top { fill: #303039; } .scene .tower .f-left { fill: #23232a; } .scene .tower .f-right { fill: #18181e; }
-.scene .vent { fill: rgba(255, 255, 255, 0.07); }
-.scene .tower-led { fill: rgba(255, 255, 255, 0.18); }
-.scene .p-active .tower-led { fill: var(--sc-amber); animation: led 1.2s ease-in-out infinite; }
-.scene .p-done .tower-led { fill: var(--sc-green); }
-.scene .p-failed .tower-led { fill: var(--sc-red); }
-.scene .crate .f-top { fill: #3a342a; } .scene .crate .f-left { fill: #2b261f; } .scene .crate .f-right { fill: #221e18; }
-.scene .crate-x { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
-
-/* Database layers, gateway, barrier. */
-.scene .cyl .f-left { fill: #1c1f1e; stroke: rgba(62, 207, 142, 0.18); }
-.scene .cyl .f-top { fill: #262b29; stroke: rgba(62, 207, 142, 0.38); }
-.scene .cyl { animation: layer-in 0.7s var(--spring) both; }
-.scene .cyl.ghost { animation: none; }
-.scene .cyl.ghost .f-left, .scene .cyl.ghost .f-top { fill: transparent; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 5; }
-@keyframes layer-in { from { opacity: 0; transform: translateY(-16px); } }
-.scene .table { fill: rgba(62, 207, 142, 0.16); stroke: rgba(62, 207, 142, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; animation: panel-in 0.6s var(--spring) both; }
-.scene .pillar .f-top, .scene .lintel .f-top { fill: #33333b; } .scene .pillar .f-left, .scene .lintel .f-left { fill: #26262d; } .scene .pillar .f-right, .scene .lintel .f-right { fill: #1b1b20; }
-.scene .lintel-plate { fill: #f5f5f7; }
-.scene .bar .f-top { fill: #3b3222; } .scene .bar .f-left { fill: #2c261a; } .scene .bar .f-right { fill: #231e15; }
-.scene .bar-stripes { stroke: rgba(242, 193, 95, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
-
-/* Connections. */
-.scene .pipe-base { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 4; stroke-linecap: round; }
-.scene .pipe { fill: none; stroke: rgba(245, 245, 247, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
-.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 10; }
-.scene .p-planned .pipe-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.4; stroke-dasharray: 3 5; }
-.scene .p-active .pipe-base { stroke: rgba(242, 193, 95, 0.14); }
-.scene .p-active .pipe-flow { stroke: var(--sc-amber); animation: flow 1.4s linear infinite; }
-.scene .p-done .pipe { animation: trace 0.9s var(--ease) forwards; }
-.scene .p-failed .pipe-base { stroke: rgba(244, 113, 95, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
-.scene .p-idle .pipe-base { stroke: rgba(255, 255, 255, 0.07); }
-@keyframes flow { to { stroke-dashoffset: -13; } }
-@keyframes trace { to { stroke-dashoffset: 0; } }
-
-/* Travellers. */
-.scene .token { fill: #f5f5f7; }
-.scene .token-halo { fill: rgba(245, 245, 247, 0.16); }
-.scene .spark .token { fill: #fbe2a6; } .scene .spark .token-halo { fill: rgba(242, 193, 95, 0.22); }
-.scene .record .token { fill: #7fe0b0; } .scene .record .token-halo { fill: rgba(62, 207, 142, 0.22); }
-.scene .blocked .token, .scene .leak .token { fill: #f8a597; } .scene .blocked .token-halo, .scene .leak .token-halo { fill: rgba(244, 113, 95, 0.22); }
-.scene .package .token { fill: #f5f5f7; }
-
-/* Labels pinned to the world. */
-.scene .tag rect { fill: rgba(12, 12, 15, 0.94); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
-.scene .tag text { fill: #d9d9df; font-family: var(--font); font-size: 9.5px; font-weight: 600; }
-.scene .p-done .tag-check rect, .scene .p-done .tag-port rect { stroke: rgba(111, 208, 140, 0.55); }
-.scene .p-done .tag-check text, .scene .p-done .tag-port text { fill: var(--sc-green); }
-.scene .p-failed .tag-check rect { stroke: rgba(244, 113, 95, 0.6); }
-.scene .p-failed .tag-check text { fill: var(--red-ink); }
-.scene .p-active .tag-check rect { stroke: rgba(242, 193, 95, 0.6); }
-
-/* Part states. */
-.scene .part { outline: none; cursor: pointer; }
-.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.2s var(--ease) forwards; }
-.scene .part.p-planned .win-face, .scene .part.p-planned .win-bar, .scene .part.p-planned image, .scene .part.p-planned .raven { opacity: 0.25; }
-.scene .part.p-planned .shadow { opacity: 0.3; }
-.scene .part.p-idle { opacity: 0.55; }
-.scene .part.p-done { animation: settle-part 0.6s var(--spring) both; }
-@keyframes settle-part { from { transform: translateY(-6px); } }
-.scene .part.p-failed .f-top { fill: #3c1f1c; stroke: rgba(244, 113, 95, 0.75); }
-.scene .part.p-failed .f-left { fill: #2c1715; stroke: rgba(244, 113, 95, 0.5); }
-.scene .part.p-failed .f-right { fill: #211211; stroke: rgba(244, 113, 95, 0.4); }
-.scene .part.p-failed .win-face { fill: #1a0f0e; }
-.scene .part.p-waiting .f-top, .scene .part.p-waiting .f-left, .scene .part.p-waiting .f-right { stroke: rgba(242, 193, 95, 0.8); stroke-dasharray: 5 4; }
-.scene .part.p-waiting .win-face { fill: #17140c; }
-.scene .part.is-focus { filter: drop-shadow(0 0 10px rgba(242, 193, 95, 0.22)); }
-.scene .part.is-focus.p-active .frame .f-top { fill: #3b3a33; }
-.scene .part.is-selected .f-top, .scene .part.is-selected .f-left, .scene .part.is-selected .f-right { stroke: rgba(245, 245, 247, 0.85); stroke-width: 1.4; }
-.scene .part:focus-visible .f-top, .scene .part:focus-visible .f-left, .scene .part:focus-visible .f-right { stroke: var(--sc-amber); stroke-width: 2; }
-.scene .part:hover .f-top { stroke: rgba(255, 255, 255, 0.35); }
-
-/* Phases: a waiting scene holds still around the part that needs you; a failed one marks it. */
-.scene.is-wait .part:not(.p-waiting):not([data-part="platform"]) { opacity: 0.5; transition: opacity 0.5s var(--ease); }
-.scene.is-wait .pipe-flow, .scene.is-wait .hover, .scene.is-wait .sketch, .scene.is-wait .token-g { animation-play-state: paused; }
-.scene.is-fail .part:not(.p-failed):not([data-part="platform"]) { opacity: 0.7; }
-.scene.is-done [data-part="platform"] .rim { stroke: rgba(111, 208, 140, 0.5); }
-.scene.is-stopped .part { opacity: 0.6; }
-.scene .fx-payoff .ring { fill: none; stroke: rgba(111, 208, 140, 0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: payoff 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
-.scene .fx-payoff .ring.two { stroke: rgba(245, 245, 247, 0.35); animation-delay: 0.22s; }
-@keyframes payoff { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
-.scene.is-demo .tag rect { stroke-dasharray: 3 3; }
+  
+  
+
+  
+
+  
+
+  
+  
+  
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+
+ 
+ 
+ 
 
 .work-wait { margin-top: 16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.35); }
 .work-wait strong { font-size: 14px; font-weight: 600; color: var(--warn-ink); }
@@ -1474,91 +1329,34 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
   .stage.is-work .stage-body.panel { left: 10px; right: 10px; width: auto; top: auto; max-height: 46%; }
   .live-window { width: 180px; }
 }
-@media (prefers-reduced-motion: reduce) {
-  .scene *, .scene .part, .scene-caption, .scene-inspect { animation: none !important; transition: none !important; }
-  .scene .p-done .pipe { stroke-dashoffset: 0; }
-  .scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { stroke-dashoffset: 0; }
-  .scene .p-active .pipe-flow { stroke-dasharray: none; }
-  .scene .fx-payoff { display: none; }
-}
 
 /* Scene light: brighter faces and a lit front edge, so objects read as solid against the floor. */
 .canvas.is-scene:not(:has(.live-window)) { grid-template-columns: minmax(0, 1fr); }
-.scene .box .f-top { fill: #3c3c46; } .scene .box .f-left { fill: #2b2b33; } .scene .box .f-right { fill: #1f1f26; }
-.scene .edge { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; stroke-linecap: round; }
-.scene .ground .f-top { fill: #202027; } .scene .ground .f-left { fill: #18181d; } .scene .ground .f-right { fill: #111115; }
-.scene .ground .edge { stroke: rgba(255, 255, 255, 0.16); }
-.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.06); }
-.scene .frame .f-top { fill: #4b4b56; } .scene .frame .f-left { fill: #35353e; } .scene .frame .f-right { fill: #27272e; }
-.scene .unit .f-top { fill: #44444e; } .scene .unit .f-left { fill: #31313a; } .scene .unit .f-right { fill: #24242b; }
-.scene .post .f-top { fill: #42424c; } .scene .post .f-left { fill: #30303a; } .scene .post .f-right { fill: #23232a; }
-.scene .lamp .f-top { fill: #55555f; } .scene .lamp .f-left { fill: #3e3e47; } .scene .lamp .f-right { fill: #2f2f37; }
-.scene .tower .f-top { fill: #45454f; } .scene .tower .f-left { fill: #32323b; } .scene .tower .f-right { fill: #25252c; }
-.scene .pillar .f-top, .scene .lintel .f-top { fill: #474752; } .scene .pillar .f-left, .scene .lintel .f-left { fill: #34343d; } .scene .pillar .f-right, .scene .lintel .f-right { fill: #26262e; }
-.scene .crate .f-top { fill: #4a4133; } .scene .crate .f-left { fill: #383126; } .scene .crate .f-right { fill: #2b261e; }
-.scene .port .f-top { fill: #42424c; }
-.scene .cyl .f-left { fill: #232826; } .scene .cyl .f-top { fill: #303733; }
-.scene .part.p-planned .edge { stroke: none; }
-.scene .part.p-failed .edge { stroke: rgba(244, 113, 95, 0.6); }
-.scene .part.p-done .edge { stroke: rgba(255, 255, 255, 0.34); }
-.scene-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22%; bottom: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent); pointer-events: none; }
-
-/* ---------- units and brands: every object is a machined unit with its mark; providers wear their own colours ---------- */
-.scene .unit .f-top { fill: #41414b; } .scene .unit .f-left { fill: #2e2e36; } .scene .unit .f-right { fill: #222229; }
-.scene .pedestal .f-top { fill: #2a2a31; } .scene .pedestal .f-left { fill: #1e1e24; } .scene .pedestal .f-right { fill: #16161b; }
-.scene .unit-ring { fill: none; stroke: var(--brand); stroke-opacity: 0.55; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 0.4s var(--ease), stroke-opacity 0.4s var(--ease); }
-.scene .unit-led { fill: var(--brand); fill-opacity: 0.35; }
-.scene .p-planned .unit-ring { stroke-opacity: 0.15; }
-.scene .p-active .unit-ring { stroke: var(--sc-amber); stroke-opacity: 0.95; }
-.scene .p-active .unit-led { fill: var(--sc-amber); fill-opacity: 1; animation: led 1.6s ease-in-out infinite; }
-.scene .p-done .unit-ring { stroke: var(--sc-green); stroke-opacity: 0.9; }
-.scene .p-done .unit-led { fill: var(--sc-green); fill-opacity: 1; }
-.scene .p-failed .unit-ring { stroke: var(--sc-red); stroke-opacity: 0.95; }
-.scene .p-failed .unit-led { fill: var(--sc-red); fill-opacity: 1; }
-.scene .p-waiting .unit-ring { stroke: var(--sc-amber); stroke-dasharray: 4 3; }
-.scene .p-waiting .unit-led { fill: var(--sc-amber); fill-opacity: 1; }
-.scene .p-done .unit-wrap .edge, .scene .p-active .unit-wrap .edge { stroke: rgba(255, 255, 255, 0.4); }
-
-/* Supabase: green seams between layers, the bolt on a dark badge. */
-.scene .brand-supabase .cyl .f-top { fill: #2c3530; stroke: rgba(62, 207, 142, 0.55); }
-.scene .brand-supabase .cyl .f-left { fill: #1f2522; stroke: rgba(62, 207, 142, 0.22); }
-.scene .seam { fill: none; stroke: var(--brand); stroke-opacity: 0.7; stroke-width: 1.4; stroke-linecap: round; filter: url(#sc-glow); }
-.scene .p-active .seam { animation: led 1.8s ease-in-out infinite; }
-.scene .brand-badge { fill: #0f1512; stroke: rgba(62, 207, 142, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
-
-/* Google: coloured caps on the pillars, four lights by the G. */
-.scene .cap.g-blue .f-top { fill: #4285F4; } .scene .cap.g-blue .f-left { fill: #3367c7; } .scene .cap.g-blue .f-right { fill: #2a55a6; }
-.scene .cap.g-green .f-top { fill: #34A853; } .scene .cap.g-green .f-left { fill: #2b8a45; } .scene .cap.g-green .f-right { fill: #237038; }
-.scene .brand-google .lintel .f-top { fill: #4a4a55; }
-.scene .lintel-plate { fill: #f5f5f7; }
-.scene .gdot { opacity: 0.85; }
-.scene .p-active .gdot { animation: led 1.4s ease-in-out infinite; }
-.scene .p-planned .cap .f-top, .scene .p-planned .cap .f-left, .scene .p-planned .cap .f-right { fill-opacity: 0.08; }
-
-/* GitHub: a dark vault with a commit graph. */
-.scene .vault .f-top { fill: #2d333b; } .scene .vault .f-left { fill: #22272e; } .scene .vault .f-right { fill: #1c2128; }
-.scene .gitgraph path { fill: none; stroke: rgba(240, 246, 252, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
-.scene .gitgraph .branch { stroke: #3fb950; }
-.scene .gitgraph circle { fill: #0d1117; stroke: rgba(240, 246, 252, 0.85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
-.scene .gitgraph .branch-dot { stroke: #3fb950; }
-.scene .gitgraph .tip { fill: #f5f5f7; }
-.scene .p-active .gitgraph .tip { animation: led 1.4s ease-in-out infinite; }
-
-/* Vercel: a black pad and the white triangle. */
-.scene .brand-vercel .ground .f-top { fill: #0c0c0e; } .scene .brand-vercel .ground .f-left { fill: #08080a; } .scene .brand-vercel .ground .f-right { fill: #050506; }
-.scene .brand-vercel .ground .edge { stroke: rgba(245, 245, 247, 0.35); }
-.scene .pyramid .f-left { fill: #f5f5f7; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
-.scene .pyramid .f-right { fill: #b4b4bc; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; }
-.scene .pyramid .edge { fill: none; stroke: #ffffff; stroke-width: 1.2; }
-.scene .part.p-planned .pyramid .f-left, .scene .part.p-planned .pyramid .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.3); }
-.scene .part.p-failed .pyramid .f-left { fill: #f2b3a9; }
-
-/* npm's command unit and the framework plate on the dev server. */
-.scene .unit-wrap .shadow { opacity: 0.9; }
-@media (prefers-reduced-motion: reduce) {
-  .scene .seam, .scene .gdot, .scene .gitgraph .tip { animation: none !important; }
-}
-.scene .sign .f-top { fill: #4a4a55; } .scene .sign .f-left { fill: #3a3a44; } .scene .sign .f-right { fill: #2a2a32; }
+  
+
+  
+
+  
+  
+  
+  
+  
+  
+  
+
+ 
+
+  
+  
+
+  
+  
+
+  
+
+  
+
+  
 
 /* ---------- the work panel: a title, a line, a few chips, big tiles. Detail waits behind "Details". ---------- */
 .panel h1.wtitle { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; max-width: none; }
@@ -1570,7 +1368,7 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
 .wbadge.is-warn { background: var(--warn); }
 .wbadge.is-wait { background: var(--warn); }
 .wbadge.is-stop, .wbadge.is-plan { background: var(--panel-3); color: var(--ink-2); }
-@keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
+
 .wline { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
 .wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
 .wchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
@@ -1631,19 +1429,6 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
 .screen-body.is-live iframe.is-loaded { opacity: 1; }
 .screen-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
 
-/* Mascots: a provider's mark walks, rolls or hops along the connection while that step works. */
-.scene .walker-shadow { fill: rgba(0, 0, 0, 0.45); }
-.scene .walker-body { transform-box: fill-box; transform-origin: 50% 100%; }
-.scene .walker.is-walk .walker-body { animation: waddle 0.42s ease-in-out infinite alternate; }
-.scene .walker.is-hop .walker-body { animation: hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
-.scene .walker.is-roll .walker-body { transform-origin: 50% 50%; animation: roll 0.9s linear infinite; }
-.scene .walker image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
-@keyframes waddle { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
-@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.08, 0.9); } 45% { transform: translateY(-9px) scale(0.95, 1.06); } 70% { transform: translateY(-2px) scale(1, 1); } }
-@keyframes roll { to { transform: rotate(360deg); } }
-.scene.is-wait .walker { display: none; }
-@media (prefers-reduced-motion: reduce) { .scene .walker { display: none; } }
-
 /* ---------- windows: findings, agents, releases and chat in the same calm kit as the work panel ---------- */
 
 /* Drawer frame: a round close, a short line. */
@@ -1778,7 +1563,7 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
 .chat-typing { display: inline-flex; gap: 3px; }
 .chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: typing 1.2s ease-in-out infinite; }
 .chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
-@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
+
 .chat-connect { margin: 0 14px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.3); }
 .chat-connect p { font-size: 12.5px; line-height: 1.45; color: var(--warn-ink); }
 .chat-connect-row { display: flex; gap: 8px; margin-top: 10px; }
@@ -1793,132 +1578,49 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
 .side.chat .btn.send:disabled { background: var(--panel-3); color: var(--ink-3); }
 @media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }
 
-/* ---------- characters and hype ---------- */
-/* Claude Code's voxel critter. */
-.scene .cc .f-top { fill: #eda186; } .scene .cc .f-left { fill: #D97757; } .scene .cc .f-right { fill: #b05a3e; }
-.scene .cc .edge { stroke: rgba(255, 220, 200, 0.55); }
-.scene .cc-eye { fill: #1b0f0a; }
-.scene .critter .cc-torso, .scene .critter .cc-legs { transform-box: fill-box; transform-origin: 50% 100%; }
-.scene .p-active .critter .cc-torso, .scene .critter.is-busy .cc-torso { animation: chomp 0.1s ease-in-out infinite alternate; }
-.scene .p-active .critter .cc-legs.a, .scene .critter.is-busy .cc-legs.a { animation: step 0.1s ease-in-out infinite alternate; }
-.scene .p-active .critter .cc-legs.b, .scene .critter.is-busy .cc-legs.b { animation: step 0.1s ease-in-out infinite alternate-reverse; }
-.scene .p-done .critter { animation: happy 0.5s var(--spring) 2 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
-.scene .p-planned .critter .f-top, .scene .p-planned .critter .f-left, .scene .p-planned .critter .f-right { fill-opacity: 0.12; stroke: rgba(217, 119, 87, 0.5); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
-@keyframes chomp { from { transform: scale(1, 1); } to { transform: scale(1.06, 0.9); } }
-@keyframes step { from { transform: translateY(0); } to { transform: translateY(-3px); } }
-@keyframes happy { to { transform: translateY(-8px) scale(1.04); } }
-.scene .tok rect { fill: #fbe2a6; stroke: #f2c15f; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(242, 193, 95, 0.8)); }
-
-/* Supabase lightning. */
-.scene .zap { opacity: 0; animation: strike 1.65s linear infinite; }
-.scene .zap-glow { fill: none; stroke: #3ECF8E; stroke-width: 10; stroke-opacity: 0.35; stroke-linejoin: round; filter: url(#sc-glow); }
-.scene .zap-core { fill: none; stroke: #d9ffe9; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
-.scene .zap-core.thin { stroke-width: 1.6; stroke: #8ff0c2; }
-.scene .zap-hit { fill: rgba(62, 207, 142, 0.45); filter: url(#sc-glow); }
-.scene .zap-spark { stroke: #b6ffd9; stroke-width: 2; stroke-linecap: round; }
-@keyframes strike { 0% { opacity: 0; } 3% { opacity: 1; } 7% { opacity: 0.25; } 11% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
-
-/* PostHog: hedgehog, events, bars. */
-.scene .ph-body .f-top { fill: #8b5e3c; } .scene .ph-body .f-left { fill: #6e4930; } .scene .ph-body .f-right { fill: #573925; }
-.scene .ph-head .f-top { fill: #c9926a; } .scene .ph-head .f-left { fill: #a97750; } .scene .ph-head .f-right { fill: #8d6141; }
-.scene .ph-nose .f-top, .scene .ph-nose .f-left, .scene .ph-nose .f-right { fill: #1d1f27; }
-.scene .ph-leg .f-top, .scene .ph-leg .f-left, .scene .ph-leg .f-right { fill: #4a3020; }
-.scene .ph-eye { fill: #111; }
-.scene .ph-spike.c0 .f-top { fill: #F54E00; } .scene .ph-spike.c0 .f-left { fill: #c43e00; } .scene .ph-spike.c0 .f-right { fill: #9a3100; }
-.scene .ph-spike.c1 .f-top { fill: #F9BD2B; } .scene .ph-spike.c1 .f-left { fill: #d39c17; } .scene .ph-spike.c1 .f-right { fill: #a87b10; }
-.scene .ph-spike.c2 .f-top { fill: #3b63ff; } .scene .ph-spike.c2 .f-left { fill: #1D4AFF; } .scene .ph-spike.c2 .f-right { fill: #1538c4; }
-.scene .ph-bar.c0 .f-top { fill: #F54E00; } .scene .ph-bar.c0 .f-left { fill: #c43e00; } .scene .ph-bar.c0 .f-right { fill: #9a3100; }
-.scene .ph-bar.c1 .f-top { fill: #F9BD2B; } .scene .ph-bar.c1 .f-left { fill: #d39c17; } .scene .ph-bar.c1 .f-right { fill: #a87b10; }
-.scene .ph-bar.c2 .f-top { fill: #3b63ff; } .scene .ph-bar.c2 .f-left { fill: #1D4AFF; } .scene .ph-bar.c2 .f-right { fill: #1538c4; }
-.scene .hedgehog .ph-legs { transform-box: fill-box; }
-.scene .p-active .hedgehog .ph-legs.a { animation: step 0.16s ease-in-out infinite alternate; }
-.scene .p-active .hedgehog .ph-legs.b { animation: step 0.16s ease-in-out infinite alternate-reverse; }
-.scene .p-planned .hedgehog, .scene .p-idle .hedgehog { opacity: 0.35; }
-.scene .bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: pump 0.7s ease-in-out infinite alternate; }
-@keyframes pump { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
-.scene .evt.c0 { fill: #F54E00; } .scene .evt.c1 { fill: #F9BD2B; } .scene .evt.c2 { fill: #3b63ff; }
-.scene .evt { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
-
-/* GitHub commits, Vercel launch, Google orbit. */
-.scene .commit .token { fill: #3fb950; } .scene .commit .token-halo { fill: rgba(63, 185, 80, 0.25); }
-.scene .ring-launch { fill: none; stroke: #f5f5f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: launch 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; }
-@keyframes launch { from { opacity: 0.9; transform: translateY(0) scale(0.4); } to { opacity: 0; transform: translateY(-46px) scale(1.5); } }
-.scene .speed { stroke: rgba(245, 245, 247, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 14; animation: speed 0.45s linear infinite; }
-@keyframes speed { to { stroke-dashoffset: 22; } }
-.scene .orbit-spin { animation: orbit 1.1s linear infinite; transform-origin: 0 0; }
-.scene .orbit circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); }
-@keyframes orbit { to { transform: rotate(360deg); } }
-
-.scene.is-wait .hype, .scene.is-wait .critter * { animation-play-state: paused; }
-@media (prefers-reduced-motion: reduce) { .scene .hype, .scene .tok { display: none; } .scene .critter * { animation: none !important; } }
-
-/* ---------- premium kit: solid emblems, plinths, gateway doors, insight card, travelling payloads ---------- */
-.scene .emb-side { filter: brightness(0.34) saturate(0.85); }
-.scene .emb-face { filter: drop-shadow(0 0 0.02px rgba(0, 0, 0, 0)); }
-.scene .emb-sheen { fill: url(#sc-sheen); mix-blend-mode: screen; }
-.scene .emb-float { transform-box: fill-box; }
-.scene .p-active .emb-float { animation: hover 3.8s ease-in-out infinite; }
-.scene .p-done .emb-float { animation: settle-part 0.7s var(--spring) both; }
-.scene .part.p-planned .emblem, .scene .part.p-idle .emblem { opacity: 0.28; }
-.scene .part.p-planned .emb-sheen { display: none; }
-.scene .plinth .f-top { fill: #3a3a44; } .scene .plinth .f-left { fill: #2a2a31; } .scene .plinth .f-right { fill: #1f1f25; }
-.scene .emblem-unit .plinth .edge { stroke: var(--brand); stroke-opacity: 0.55; }
-.scene .door .f-top { fill: #52525e; } .scene .door .f-left { fill: #3c3c46; } .scene .door .f-right { fill: #2e2e36; }
-.scene .door.google .f-left { fill: #2f3f5e; } .scene .door.github .f-left { fill: #2d333b; }
-.scene .door .edge { stroke: rgba(255, 255, 255, 0.35); }
-.scene .cap.g-dark .f-top { fill: #2d333b; } .scene .cap.g-dark .f-left { fill: #22272e; } .scene .cap.g-dark .f-right { fill: #1c2128; }
-.scene .cap.g-light .f-top { fill: #f0f6fc; } .scene .cap.g-light .f-left { fill: #c9d1d9; } .scene .cap.g-light .f-right { fill: #a0a8b0; }
-.scene .brand-github .lintel .f-top { fill: #2d333b; } .scene .brand-github .lintel .f-left { fill: #22272e; } .scene .brand-github .lintel .f-right { fill: #1c2128; }
-.scene .insight .card .f-top { fill: #3a3a44; } .scene .insight .card .f-left { fill: #26262d; } .scene .insight .card .f-right { fill: #1b1b21; }
-.scene .insight .stand .f-top { fill: #2e2e36; } .scene .insight .stand .f-left { fill: #22222a; } .scene .insight .stand .f-right { fill: #18181d; }
-.scene .ins-bg { fill: #0f0f13; }
-.scene .ins-title { fill: rgba(255, 255, 255, 0.25); }
-.scene .ins-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
-.scene .ins-line { fill: none; stroke: #F9BD2B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
-.scene .ins-dot { fill: #F54E00; }
-.scene .pl { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
+  
+
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+
+ 
+
+  
+
+  
+ 
+
+  
+  
+  
+  
+  
+
 .wproviders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
 .wprov { display: grid; place-items: center; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); transition: border-color 0.14s, background 0.14s; }
 .wprov:hover { background: rgba(255, 255, 255, 0.07); }
 .wprov.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.09); }
-@media (prefers-reduced-motion: reduce) { .scene .emb-float { animation: none !important; } .scene .emb-sheen { display: none; } }
-
-/* ---------- mascots: GitHub's Octocat, PostHog's hedgehog, Claude polishing ---------- */
-.scene .oc .f-top { fill: #3d444d; } .scene .oc .f-left { fill: #2b3137; } .scene .oc .f-right { fill: #1c2127; }
-.scene .oc .edge { stroke: rgba(240, 246, 252, 0.4); }
-.scene .oc-face { fill: #f6c8b3; }
-.scene .oc-eye { fill: #1c2127; }
-.scene .oc-shine { fill: #fff; }
-.scene .oc-mouth { fill: #a5524a; }
-.scene .octocat .oc-tent { transform-box: fill-box; transform-origin: 50% 0; animation: wiggle 0.24s ease-in-out infinite alternate; }
-.scene .octocat .oc-tent.t1 { animation-direction: alternate-reverse; }
-@keyframes wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
-.scene .mx-body .f-top { fill: #e0b07a; } .scene .mx-body .f-left { fill: #c49360; } .scene .mx-body .f-right { fill: #a47746; }
-.scene .mx-face .f-top { fill: #f0cfa2; } .scene .mx-face .f-left { fill: #ddb684; } .scene .mx-face .f-right { fill: #bf9564; }
-.scene .mx-spike .f-top { fill: #4a3524; } .scene .mx-spike .f-left { fill: #35251a; } .scene .mx-spike .f-right { fill: #251912; }
-.scene .mx-leg .f-top, .scene .mx-leg .f-left, .scene .mx-leg .f-right { fill: #6b4a2e; }
-.scene .mx-nose .f-top, .scene .mx-nose .f-left, .scene .mx-nose .f-right { fill: #15161b; }
-.scene .mx-eye { fill: #15161b; }
-.scene .mx-cheek { fill: #f08a6b; opacity: 0.8; }
-.scene .mx-pole .f-top { fill: #c8c8d0; } .scene .mx-pole .f-left { fill: #9a9aa5; } .scene .mx-pole .f-right { fill: #74747e; }
-.scene .mx-flag { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; }
-.scene .flag-text { fill: #fff; font: 800 0.26px/1 var(--font-sans, system-ui); letter-spacing: 0.02px; }
-.scene .mx-pole .edge, .scene .mx-body .edge, .scene .mx-face .edge, .scene .mx-spike .edge, .scene .mx-leg .edge, .scene .mx-nose .edge { stroke: rgba(255, 240, 220, 0.3); }
-.scene .sparkle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
-.scene .burst { fill: rgba(137, 87, 229, 0.35); stroke: #c9b3ff; stroke-width: 2; }
-.scene .say { fill: #8957e5; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
-.scene .say-text { fill: #fff; font: 800 11px/1 var(--font-sans, system-ui); letter-spacing: 0.02em; }
-@media (prefers-reduced-motion: reduce) { .scene .skit { display: none; } }
-.scene .mx-belly { fill: #f7e3c4; }
-.scene .mx-snout .f-top { fill: #f7e3c4; } .scene .mx-snout .f-left { fill: #e6cba6; } .scene .mx-snout .f-right { fill: #c9ab84; }
-.scene .mx-brow { fill: #4a2a16; }
-.scene .mx-hat .f-top { fill: #ffd25a; } .scene .mx-hat .f-left { fill: #F9BD2B; } .scene .mx-hat .f-right { fill: #c9921a; }
-.scene .mx-hat-ridge .f-top, .scene .mx-hat-ridge .f-left, .scene .mx-hat-ridge .f-right { fill: #e0a51f; }
-.scene .mx-hat .edge, .scene .mx-snout .edge { stroke: rgba(255, 245, 220, 0.45); }
-.scene .smudge { fill: rgba(214, 206, 192, 0.3); filter: blur(0.05px); }
-.scene .smudge .streak { fill: none; stroke: rgba(214, 206, 192, 0.35); stroke-width: 0.07; stroke-linecap: round; }
-.scene .bubble { fill: rgba(220, 240, 255, 0.18); stroke: rgba(235, 248, 255, 0.85); stroke-width: 1; }
-.scene .foam { fill: rgba(250, 252, 255, 0.85); }
+
+  
+
+  
+  
+  
+
+  
+
+  
+
+  
 
 /* Review: files Undo leaves alone, and putting one back by hand. */
 .work-diff-file h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@@ -1984,3 +1686,6 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
   .act-side { grid-column: 2; }
 }
 @media (prefers-reduced-motion: reduce) { .act-item .act-art, .act-item:hover .act-art { transition: none; transform: none; } }
+
+@keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
+@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viberaven/cli",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "description": "VibeRaven CLI and local Studio: Supabase RLS and security check for AI-built Vercel + Supabase apps, with an agent task list and fix prompts.",
   "license": "MIT",
   "author": "VibeRaven",