jev-devtools 0.1.3 → 0.3.0

package/lib/src/flow-model.js

@@ -17,7 +17,7 @@ export function flowAnswer(answer) {
     if (answer.type === "choice")
         return Object.entries(answer.probabilities ?? {}).map(([label, probability]) => ({
             label,
-            detail: `${Math.round(probability * 100)}% probability`,
+            detail: `${Number((probability * 100).toPrecision(6))}% probability`,
             active: label === answer.choice,
             eyebrow: label === answer.choice ? "RETURNED CHOICE" : "ALTERNATIVE",
         }));
@@ -37,12 +37,14 @@ export function flowAnswer(answer) {
                 detail: `${Math.round(answer.noul * 100)}% probability`,
                 active: true,
                 eyebrow: "P(TRUE)",
+                probability: answer.noul,
             },
             {
                 label: "False",
                 detail: `${Math.round((1 - answer.noul) * 100)}% probability`,
                 active: true,
                 eyebrow: "P(FALSE)",
+                probability: 1 - answer.noul,
             },
         ];
     if (answer.type === "box")
@@ -56,14 +58,3 @@ export function flowAnswer(answer) {
         ];
     return [];
 }
-export function stateText(trace) {
-    const state = trace.request.state;
-    if (typeof state === "string")
-        return state;
-    if (state && typeof state === "object" && !Array.isArray(state)) {
-        for (const key of ["message", "text", "description"])
-            if (typeof state[key] === "string")
-                return state[key];
-    }
-    return JSON.stringify(state, null, 2) ?? "";
-}

package/lib/src/flow-protocol.d.ts

@@ -0,0 +1,68 @@
+import type { Json } from "./protocol.js";
+/** Authored diagram copy, never instructions for Jev or executable routing logic. */
+export type FlowDisplay = {
+    title?: string;
+    description?: string;
+};
+/** Rule literals are captured/redacted by the recorder before browser delivery. */
+export type FlowCondition = {
+    op: "reference";
+    label: string;
+    probability: boolean;
+    name?: string;
+    stepId?: string;
+    path?: string[];
+} | {
+    op: "literal";
+    value: string | number | boolean | null;
+} | {
+    op: "eq" | "lt" | "gte" | "all" | "any" | "not";
+    args: FlowCondition[];
+};
+/** Structural metadata and authored rules; runtime inputs/answers stay in request captures. */
+export type FlowNode = FlowDisplay & {
+    id: string;
+    kind: "jev" | "branch" | "parallel" | "output";
+    dependencies: string[];
+    path: string[];
+    condition?: string;
+    /** Optional for older captures; Json allows redacted/truncated subtrees. */
+    conditionRule?: Json | FlowCondition;
+    /** Named concurrent lanes; optional for older captures. */
+    lanes?: string[];
+};
+export type FlowDefinition = {
+    version: 1;
+    id: string;
+    name: string;
+    nodes: FlowNode[];
+};
+export type FlowStep = {
+    id: string;
+    executionId: string;
+    status: "waiting" | "running" | "completed" | "untaken" | "blocked" | "error" | "cancelled";
+    startedAt?: number;
+    durationMs?: number;
+    decision?: boolean;
+    traceId?: string;
+    error?: string;
+};
+export type FlowRun = {
+    version: 1;
+    id: string;
+    definitionId: string;
+    name: string;
+    startedAt: number;
+    durationMs?: number;
+    status: "pending" | "success" | "error" | "cancelled";
+    steps: Record<string, FlowStep>;
+    outcome?: string;
+    value?: Json;
+    error?: string;
+};
+export type FlowUpdate = {
+    version: 1;
+    definitions: FlowDefinition[];
+    upserts: FlowRun[];
+    order: string[];
+};

package/lib/src/flow-protocol.js

@@ -0,0 +1 @@
+export {};

package/lib/src/flow-stream.d.ts

@@ -0,0 +1,8 @@
+import type { FlowDefinition, FlowRun } from "./flow-protocol.js";
+export type FlowHistory = {
+    runs: FlowRun[];
+    definitions: FlowDefinition[];
+};
+export declare const emptyFlows: FlowHistory;
+/** Separate opt-in stream; no extra rendering of request rows on flow-only updates. */
+export declare function connectFlowStream(url: string, onUpdate: (history: FlowHistory) => void): () => void;

package/lib/src/flow-stream.js

@@ -0,0 +1,80 @@
+export const emptyFlows = { runs: [], definitions: [] };
+/** Separate opt-in stream; no extra rendering of request rows on flow-only updates. */
+export function connectFlowStream(url, onUpdate) {
+    let alive = true, source, frame, fallback, retry;
+    let runs = new Map(), definitions = new Map(), pending;
+    const cancel = () => {
+        if (frame !== undefined)
+            cancelAnimationFrame(frame);
+        clearTimeout(fallback);
+        frame = undefined;
+        pending = undefined;
+    };
+    const publish = () => {
+        const next = pending;
+        cancel();
+        if (alive && next)
+            onUpdate(next);
+    };
+    const connect = () => {
+        if (!alive)
+            return;
+        runs = new Map();
+        definitions = new Map();
+        const current = new EventSource(url + "/flows/events");
+        source = current;
+        current.addEventListener("flows", (event) => {
+            if (!alive || source !== current)
+                return;
+            try {
+                const data = JSON.parse(event.data);
+                if (data.version !== 1 ||
+                    !Array.isArray(data.order) ||
+                    data.order.length > 200 ||
+                    new Set(data.order).size !== data.order.length ||
+                    !Array.isArray(data.upserts) ||
+                    !Array.isArray(data.definitions))
+                    throw new Error("Invalid flow stream");
+                for (const definition of data.definitions) {
+                    if (definition.version !== 1 ||
+                        !Array.isArray(definition.nodes) ||
+                        definition.nodes.length > 256)
+                        throw new Error("Invalid flow definition");
+                    if (!definitions.has(definition.id))
+                        definitions.set(definition.id, definition);
+                }
+                for (const run of data.upserts) {
+                    if (run.version !== 1 || !definitions.has(run.definitionId))
+                        throw new Error("Invalid flow run");
+                    runs.set(run.id, run);
+                }
+                const ordered = data.order.map((id) => {
+                    const run = runs.get(id);
+                    if (!run)
+                        throw new Error("Missing run");
+                    return run;
+                });
+                runs = new Map(ordered.map((r) => [r.id, r]));
+                const used = new Set(ordered.map((r) => r.definitionId));
+                definitions = new Map([...definitions].filter(([id]) => used.has(id)));
+                pending = { runs: ordered, definitions: [...definitions.values()] };
+                if (frame === undefined) {
+                    frame = requestAnimationFrame(publish);
+                    fallback = setTimeout(publish, 100);
+                }
+            }
+            catch {
+                cancel();
+                current.close();
+                retry = setTimeout(connect, 1000);
+            }
+        });
+    };
+    connect();
+    return () => {
+        alive = false;
+        cancel();
+        clearTimeout(retry);
+        source?.close();
+    };
+}

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export type { Trace, Snapshot, Json, AnswerView, QuestionView, } from "./protocol.js";
+export type { Trace, Snapshot, StreamSnapshot, TraceDelta, Json, AnswerView, QuestionView, } from "./protocol.js";
 export type JevDevtoolsProps = {
     endpoint?: string;
     /** Opt in explicitly, normally with import.meta.env.DEV. */

package/lib/src/inspector-styles.js

@@ -1 +1 @@
-export const inspectorStyles = ".jev-devtools {\n  all: initial;\n  display: block;\n  direction: ltr;\n  unicode-bidi: isolate;\n  pointer-events: auto;\n  color-scheme: dark;\n  font:\n    12px system-ui,\n    sans-serif;\n  color: #eee8ed;\n  line-height: 1.5;\n}\n.jev-devtools,\n.jev-devtools * {\n  box-sizing: border-box;\n}\n.jev-devtools button,\n.jev-devtools input,\n.jev-devtools select,\n.jev-devtools textarea {\n  font: inherit;\n  color: inherit;\n  border: 1px solid #3b303d;\n  border-radius: 5px;\n  background: #17121b;\n}\n.jev-devtools button {\n  padding: 7px 11px;\n  cursor: pointer;\n}\n.jev-devtools button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.jev-devtools input,\n.jev-devtools select {\n  padding: 8px;\n  width: 100%;\n}\n.jev-devtools button:hover:not(:disabled) {\n  border-color: #e551ba;\n}\n.jev-devtools :is(button, input, select, textarea, summary):focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: 3px;\n}\n.jev-devtools .eyebrow {\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  color: #bc9db5;\n  text-transform: uppercase;\n}\n.jev-devtools .jev-inspector {\n  height: 100%;\n  display: flex;\n  color: #eee8ed;\n  background: #0d0a0f;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools .jev-inspector h2 {\n  font-size: 15px;\n  margin: 0;\n  font-weight: 600;\n}\n.jev-devtools .jev-inspector h3 {\n  font-size: 13px;\n  margin: 0 0 8px;\n}\n.jev-devtools .jev-inspector code,\n.jev-devtools .jev-inspector pre {\n  font:\n    11px \"JetBrains Mono\",\n    monospace;\n}\n.jev-devtools .jev-inspector pre {\n  line-height: 1.7;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 460px;\n  overflow: auto;\n  background: #100d13;\n  padding: 16px;\n  border: 1px solid #2e2533;\n  border-radius: 5px;\n}\n.jev-devtools .jev-inspector .muted {\n  color: #a89bac;\n  font-size: 11px;\n  line-height: 1.6;\n}\n.jev-devtools .request-list {\n  flex: 0 0 300px;\n  border-right: 1px solid #302634;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.jev-devtools .request-list > header {\n  padding: 17px 14px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.jev-devtools .request-list h2 span {\n  font-size: 11px;\n  color: #b796ad;\n  margin-left: 5px;\n}\n.jev-devtools .request-list button {\n  font-size: 11px;\n}\n.jev-devtools .list-filters {\n  display: flex;\n  gap: 7px;\n  padding: 0 12px 12px;\n}\n.jev-devtools .list-filters input {\n  min-width: 0;\n}\n.jev-devtools .list-filters select {\n  width: 86px;\n  font-size: 11px;\n}\n.jev-devtools .request-items {\n  overflow: auto;\n  flex: 1;\n}\n.jev-devtools .request-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  text-align: left;\n  border: 0;\n  border-top: 1px solid #251d2a;\n  border-radius: 0;\n  background: transparent;\n  padding: 16px 12px;\n}\n.jev-devtools .request-row.selected {\n  background: #251423;\n  box-shadow: inset 2px 0 #e551ba;\n}\n.jev-devtools .request-row strong {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n}\n.jev-devtools .request-row small {\n  display: block;\n  font-size: 10px;\n  color: #a99aac;\n  margin-top: 6px;\n}\n.jev-devtools .row-status {\n  font-size: 9px;\n  color: #ad9bb0;\n  margin-left: auto;\n}\n.jev-devtools .status-dot {\n  width: 6px;\n  height: 6px;\n  display: inline-block;\n  border-radius: 50%;\n  background: #b09ab7;\n  flex-shrink: 0;\n}\n.jev-devtools .status-dot.success {\n  background: #b3c79c;\n}\n.jev-devtools .status-dot.pending {\n  background: #e551ba;\n}\n.jev-devtools .status-dot.error {\n  background: #ee8e85;\n}\n.jev-devtools .request-list footer {\n  padding: 12px;\n  color: #9e8ea5;\n  border-top: 1px solid #302634;\n  font-size: 10px;\n  display: flex;\n  gap: 7px;\n}\n.jev-devtools .request-detail {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.jev-devtools .detail-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 18px 24px 10px;\n}\n.jev-devtools .detail-header h2 {\n  margin-top: 6px;\n}\n.jev-devtools .metrics {\n  display: flex;\n  gap: 24px;\n  font:\n    12px \"JetBrains Mono\",\n    monospace;\n  white-space: nowrap;\n}\n.jev-devtools .metrics small {\n  display: block;\n  font:\n    9px \"DM Sans\",\n    sans-serif;\n  color: #97879f;\n  margin-top: 6px;\n}\n.jev-devtools .detail-meta {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  padding: 0 24px 14px;\n  color: #a08aa5;\n}\n.jev-devtools .detail-meta code {\n  font-size: 10px;\n}\n.jev-devtools .detail-tabs {\n  display: flex;\n  gap: 20px;\n  border-bottom: 1px solid #302634;\n  padding: 0 24px;\n}\n.jev-devtools .detail-tabs button {\n  border: 0;\n  border-radius: 0;\n  background: none;\n  padding: 10px 0;\n  color: #a89bac;\n  font-size: 11px;\n}\n.jev-devtools .detail-tabs button[aria-pressed=\"true\"] {\n  box-shadow: inset 0 -2px #e551ba;\n  color: #f5c1e6;\n}\n.jev-devtools .detail-body {\n  overflow: auto;\n  flex: 1;\n  min-height: 0;\n  padding: 16px 24px 28px;\n  background-image: radial-gradient(#342337 0.6px, transparent 0.6px);\n  background-size: 16px 16px;\n}\n.jev-devtools .request-flow {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding: 14px 0 20px;\n}\n.jev-devtools .state-node {\n  position: relative;\n  flex: 0 0 160px;\n  border: 1px solid #e551ba;\n  padding: 20px 15px;\n  background: #1f1320;\n  border-radius: 6px;\n}\n.jev-devtools .state-node h3 {\n  margin-top: 12px;\n}\n.jev-devtools .state-node p {\n  color: #b69db3;\n  line-height: 1.5;\n}\n.jev-devtools .state-node code {\n  font-size: 10px;\n}\n.jev-devtools .state-node:after {\n  content: \"\";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  width: 20px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 1px solid #7f416d;\n  padding-left: 20px;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(160px, 1fr));\n  gap: 12px;\n  flex: 1;\n  position: relative;\n}\n.jev-devtools .question-node {\n  position: relative;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n  padding: 15px;\n  background: #110d14;\n  min-width: 0;\n}\n.jev-devtools .question-node:before {\n  content: \"\";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  width: 21px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: none;\n}\n.jev-devtools .question-node header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.jev-devtools .question-node header h3 {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .type {\n  font:\n    9px \"JetBrains Mono\",\n    monospace;\n  color: #e59acc;\n  border: 1px solid #5e3654;\n  border-radius: 3px;\n  padding: 3px 5px;\n}\n.jev-devtools .instructions {\n  font-size: 11px;\n  color: #b8a6bc;\n  line-height: 1.5;\n}\n.jev-devtools .answer-value {\n  display: block;\n  font-size: 20px;\n  font-weight: 500;\n  margin: 15px 0;\n  color: #f0c7e5;\n}\n.jev-devtools .answer-value small {\n  font-size: 10px;\n  color: #b5a1ba;\n}\n.jev-devtools .probability {\n  margin: 10px 0;\n  font-size: 10px;\n}\n.jev-devtools .probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 5px;\n  margin-bottom: 5px;\n}\n.jev-devtools .probability b {\n  font-weight: 400;\n  color: #d8abc9;\n}\n.jev-devtools .bar {\n  height: 4px;\n  background: #302033;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.jev-devtools .bar i {\n  display: block;\n  height: 100%;\n  background: #e551ba;\n}\n.jev-devtools .confidence {\n  font-size: 10px;\n  color: #a68cac;\n  border-top: 1px solid #302634;\n  padding-top: 10px;\n  display: flex;\n  justify-content: space-between;\n}\n.jev-devtools .confidence b {\n  color: #d1bad2;\n  font-weight: 400;\n}\n.jev-devtools details {\n  margin-top: 12px;\n  font-size: 10px;\n  color: #b7a0bd;\n}\n.jev-devtools summary {\n  cursor: pointer;\n}\n.jev-devtools .standalone {\n  margin-bottom: 14px;\n  max-width: 750px;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .standalone .answer {\n  max-width: 450px;\n}\n.jev-devtools .box-preview {\n  position: relative;\n  margin-top: 14px;\n  min-height: 80px;\n  background: #19121c;\n}\n.jev-devtools .box-preview img {\n  width: 100%;\n  display: block;\n}\n.jev-devtools .bounding-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .coordinates {\n  display: block;\n  font-size: 9px !important;\n  line-height: 1.5;\n  margin-top: 8px;\n  color: #ac93b0;\n}\n.jev-devtools .context-image {\n  max-width: 400px;\n  width: 100%;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n}\n.jev-devtools .empty {\n  padding: 20px;\n  color: #a294a8;\n  line-height: 1.7;\n}\n.jev-devtools .empty-detail {\n  margin: auto;\n  padding: 40px;\n  text-align: center;\n  color: #b2a0ba;\n}\n.jev-devtools .empty-symbol {\n  font-size: 36px;\n  color: #e551ba;\n  display: block;\n  margin-bottom: 20px;\n}\n.jev-devtools .empty-detail p {\n  font-size: 12px;\n  line-height: 1.8;\n}\n.jev-devtools .error-banner {\n  border: 1px solid #874b50;\n  background: #31191e;\n  padding: 12px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n.jev-devtools .warning {\n  color: #e2b97d;\n}\n.jev-devtools .jev-inspector table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n}\n.jev-devtools .jev-inspector th,\n.jev-devtools .jev-inspector td {\n  border-bottom: 1px solid #302634;\n  padding: 14px;\n}\n.jev-devtools .flow-dot {\n  display: none;\n}\n.jev-devtools .pending .flow-dot {\n  display: block;\n  position: absolute;\n  right: -23px;\n  top: calc(50% - 3px);\n  width: 6px;\n  height: 6px;\n  background: #e551ba;\n  border-radius: 50%;\n  animation: jev-inspector-pulse 1s infinite;\n}\n@keyframes jev-inspector-pulse {\n  50% {\n    opacity: 0.2;\n    transform: scale(0.7);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .pending .flow-dot {\n    animation: none;\n  }\n}\n@media (max-width: 1100px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    display: block;\n  }\n  .jev-devtools .request-flow {\n    align-items: flex-start;\n  }\n  .jev-devtools .state-node {\n    margin-top: 45px;\n  }\n  .jev-devtools .metrics {\n    gap: 12px;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 250px;\n  }\n}\n@media (max-width: 700px) {\n  .jev-devtools .jev-inspector {\n    flex-direction: column;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 140px;\n    flex-shrink: 0;\n    border-right: 0;\n    border-bottom: 1px solid #302634;\n  }\n  .jev-devtools .request-list > header {\n    padding: 6px 12px;\n  }\n  .jev-devtools .request-list footer {\n    display: none;\n  }\n  .jev-devtools .list-filters {\n    padding-bottom: 6px;\n  }\n  .jev-devtools .request-items {\n    display: flex;\n  }\n  .jev-devtools .request-row {\n    min-width: 240px;\n    padding: 8px 12px;\n  }\n  .jev-devtools .request-detail {\n    min-height: 0;\n  }\n  .jev-devtools .detail-header {\n    padding: 12px;\n  }\n  .jev-devtools .detail-meta,\n  .jev-devtools .detail-tabs {\n    padding-left: 12px;\n    padding-right: 12px;\n  }\n  .jev-devtools .detail-body {\n    padding: 12px;\n  }\n  .jev-devtools .metrics {\n    display: none;\n  }\n  .jev-devtools .state-node {\n    flex-basis: 115px;\n    padding: 12px;\n  }\n  .jev-devtools .request-flow {\n    gap: 25px;\n  }\n  .jev-devtools .state-node:after {\n    width: 12px;\n  }\n  .jev-devtools .question-branches {\n    padding-left: 12px;\n  }\n  .jev-devtools .question-node:before {\n    width: 13px;\n  }\n  .jev-devtools .question-node {\n    padding: 12px;\n  }\n}\n\n.jev-devtools .request-flow {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 24px;\n}\n.jev-devtools .state-node {\n  flex: auto;\n  width: fit-content;\n  align-self: center;\n  padding: 12px 24px;\n  text-align: center;\n  margin: 0;\n}\n.jev-devtools .state-node h3 {\n  display: inline-block;\n  margin: 0 12px;\n}\n.jev-devtools .state-node p {\n  display: inline-block;\n  margin: 0 12px 0 0;\n  font-size: 11px;\n}\n.jev-devtools .state-node .eyebrow {\n  display: none;\n}\n.jev-devtools .state-node:after {\n  left: 50%;\n  top: 100%;\n  width: 0;\n  height: 24px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 0;\n  border-top: 1px solid #7f416d;\n  padding: 20px 0 0;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n}\n.jev-devtools .question-node:before,\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: block;\n  right: auto;\n  left: 50%;\n  top: -21px;\n  width: 0;\n  height: 20px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .flow-caption {\n  margin-top: 0;\n}\n.jev-devtools .pending .flow-dot {\n  right: auto;\n  left: calc(50% - 3px);\n  top: calc(100% + 10px);\n}\n@media (max-width: 900px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-node:before,\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    height: 12px;\n    top: -13px;\n  }\n  .jev-devtools .question-branches .question-node:first-child:before {\n    height: 20px;\n    top: -21px;\n  }\n  .jev-devtools .state-node {\n    padding: 10px;\n  }\n  .jev-devtools .state-node p {\n    display: block;\n    margin: 6px 0;\n  }\n  .jev-devtools .state-node h3 {\n    font-size: 12px;\n  }\n}\n\n.jev-devtools.jev-drawer {\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  z-index: 1000;\n  inset: auto 0 0;\n  display: flex;\n  flex-direction: column;\n  background: #0d0a0f;\n  color: #eee8ed;\n  border-top: 1px solid #604058;\n  box-shadow: 0 -12px 48px #0005;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n}\n.jev-devtools.jev-drawer[hidden],\n.jev-devtools.jev-drawer-trigger[hidden] {\n  display: none;\n}\n.jev-devtools .jev-drawer-resize {\n  position: absolute;\n  z-index: 1;\n  top: -6px;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n  touch-action: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.jev-devtools .jev-drawer-resize span {\n  width: 42px;\n  height: 3px;\n  border-radius: 3px;\n  background: #79506f;\n}\n.jev-devtools .jev-drawer-resize:hover span,\n.jev-devtools .jev-drawer-resize:focus-visible span {\n  background: #e551ba;\n}\n.jev-devtools .jev-drawer-resize:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .jev-drawer-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex: 0 0 46px;\n  padding: 0 16px;\n  border-bottom: 1px solid #302634;\n}\n.jev-devtools .jev-drawer-header strong {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  font-weight: 600;\n}\n.jev-devtools .jev-mark {\n  color: #e551ba;\n  font-size: 21px;\n}\n.jev-devtools .jev-drawer-header > div {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.jev-devtools .jev-drawer-header button {\n  background: transparent;\n  border-color: transparent;\n  font-size: 11px;\n  color: #c4afc8;\n}\n.jev-devtools .jev-drawer-header .jev-drawer-close {\n  font-size: 22px;\n  line-height: 1;\n  padding: 4px 8px;\n}\n.jev-devtools .jev-drawer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools.jev-drawer-trigger {\n  position: fixed;\n  bottom: 18px;\n  right: 18px;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 10px 16px;\n  border: 1px solid #a24487;\n  border-radius: 8px;\n  cursor: pointer;\n  background: #211321;\n  color: #f1cbe6;\n  font:\n    600 13px \"DM Sans\",\n    sans-serif;\n  box-shadow: 0 4px 20px #0005;\n}\n.jev-devtools.jev-drawer-trigger span {\n  color: #e551ba;\n  font-size: 20px;\n}\n/* Baseline cards and authored left-to-right composition from the lab's Jev presets. */\n.jev-devtools .detail-body.detail-body-flow {\n  display: flex;\n  padding: 0;\n  overflow: hidden;\n}\n.jev-devtools .lab-flow {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n.jev-devtools .lab-flow-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-shrink: 0;\n  padding: 12px 16px;\n  flex-wrap: wrap;\n}\n.jev-devtools .lab-flow-toolbar label {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: 11px;\n  min-width: 0;\n}\n.jev-devtools .lab-flow-toolbar select {\n  width: auto;\n  max-width: 240px;\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar > div {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.jev-devtools .lab-flow-toolbar button {\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar output {\n  font-size: 11px;\n  min-width: 35px;\n  text-align: center;\n}\n.jev-devtools .lab-flow-viewport {\n  position: relative;\n  flex: 1;\n  min-height: 100px;\n  overflow: hidden;\n  background-color: #0d0a0f;\n  background-image: radial-gradient(#463449 0.8px, transparent 0.8px);\n  background-size: 20px 20px;\n  border-block: 1px solid #302634;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  overscroll-behavior: contain;\n}\n.jev-devtools .lab-flow-viewport[data-panning] {\n  cursor: grabbing;\n}\n.jev-devtools .lab-flow-viewport:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .lab-flow-caption {\n  flex-shrink: 0;\n  padding: 8px 16px;\n  margin: 0;\n}\n.jev-devtools .lab-gesture-hint {\n  display: block;\n  color: #c6a7bd;\n}\n.jev-devtools .lab-flow-canvas {\n  position: absolute;\n  inset: 0 auto auto 0;\n  transform-origin: top left;\n  will-change: transform;\n  font-family: system-ui, sans-serif;\n  color: #f5f3f6;\n}\n.jev-devtools .lab-connections {\n  position: absolute;\n  inset: 0;\n  overflow: visible;\n}\n.jev-devtools .lab-connections path {\n  fill: none;\n  stroke: #645a68;\n  stroke-width: 1;\n}\n.jev-devtools .lab-connections path.active {\n  stroke: #968592;\n}\n.jev-devtools .lab-connections text {\n  fill: #b7b1bc;\n  font:\n    12px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-flow-dot {\n  fill: #e551ba;\n}\n.jev-devtools .lab-card {\n  position: absolute;\n  border: 1.3px solid #f5f3f6;\n  border-radius: 14px;\n  padding: 20px;\n  background: #0d0a0f;\n  overflow: hidden;\n}\n.jev-devtools .lab-eyebrow {\n  display: block;\n  color: #e551ba;\n  font:\n    500 10px ui-monospace,\n    monospace;\n  letter-spacing: 1px;\n  margin: 0 0 10px;\n}\n.jev-devtools .lab-card h3 {\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.25;\n  margin: 0 0 16px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-card p {\n  font-size: 15px;\n  line-height: 1.4;\n  margin: 10px 0;\n}\n.jev-devtools .lab-copy {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-probability {\n  margin: 17px 0;\n}\n.jev-devtools .lab-probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 9px;\n  font-size: 15px;\n}\n.jev-devtools .lab-probability span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-probability code {\n  font:\n    13px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-track {\n  height: 7px;\n  border-radius: 4px;\n  background: #f5f3f61a;\n  overflow: hidden;\n}\n.jev-devtools .lab-track i {\n  display: block;\n  height: 100%;\n  border-radius: 4px;\n  background: #e551ba;\n}\n.jev-devtools .lab-track i.lab-alternative {\n  opacity: 0.35;\n}\n.jev-devtools .lab-card .lab-result {\n  font-size: 14px;\n  margin-top: 24px;\n}\n.jev-devtools .lab-card .lab-small {\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 20px;\n}\n.jev-devtools .lab-idle {\n  opacity: 0.65;\n}\n.jev-devtools .lab-scale {\n  position: relative;\n  margin-top: 18px;\n  border-top: 1px solid #b7b1bc;\n  display: flex;\n  justify-content: space-between;\n  padding-top: 9px;\n}\n.jev-devtools .lab-scale > span {\n  position: absolute;\n  top: -5px;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: #e551ba;\n  transform: translateX(-50%);\n}\n.jev-devtools .lab-big {\n  display: block;\n  font-size: 36px;\n  font-weight: 500;\n  margin-top: 26px;\n}\n.jev-devtools .lab-endpoints {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 10px;\n}\n.jev-devtools .lab-image {\n  position: relative;\n}\n.jev-devtools .lab-image img {\n  display: block;\n  width: 100%;\n}\n.jev-devtools .lab-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .lab-source-image {\n  width: 100%;\n  max-height: 105px;\n  object-fit: contain;\n}\n.jev-devtools .lab-coordinates {\n  font-family: ui-monospace, monospace;\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-flow-dot {\n    display: none;\n  }\n}\n/* The public TypeSafe mark travels with the package, independent of host assets. */\n.jev-devtools .typesafe-mark {\n  display: inline-block;\n  flex: 0 0 23px;\n  width: 23px;\n  height: 32px;\n  overflow: hidden;\n  line-height: 0;\n}\n.jev-devtools .typesafe-mark img {\n  display: block;\n  height: 32px;\n  width: auto;\n  max-width: none;\n}\n";
+export const inspectorStyles = ".jev-devtools {\n  all: initial;\n  display: block;\n  direction: ltr;\n  unicode-bidi: isolate;\n  pointer-events: auto;\n  color-scheme: dark;\n  font:\n    12px system-ui,\n    sans-serif;\n  color: #eee8ed;\n  line-height: 1.5;\n}\n.jev-devtools,\n.jev-devtools * {\n  box-sizing: border-box;\n}\n.jev-devtools button,\n.jev-devtools input,\n.jev-devtools select,\n.jev-devtools textarea {\n  font: inherit;\n  color: inherit;\n  border: 1px solid #3b303d;\n  border-radius: 5px;\n  background: #17121b;\n}\n.jev-devtools button {\n  padding: 7px 11px;\n  cursor: pointer;\n}\n.jev-devtools button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.jev-devtools input,\n.jev-devtools select {\n  padding: 8px;\n  width: 100%;\n}\n.jev-devtools button:hover:not(:disabled) {\n  border-color: #e551ba;\n}\n.jev-devtools :is(button, input, select, textarea, summary):focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: 3px;\n}\n.jev-devtools .eyebrow {\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  color: #bc9db5;\n  text-transform: uppercase;\n}\n.jev-devtools .jev-inspector {\n  height: 100%;\n  display: flex;\n  color: #eee8ed;\n  background: #0d0a0f;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools .jev-inspector h2 {\n  font-size: 15px;\n  margin: 0;\n  font-weight: 600;\n}\n.jev-devtools .jev-inspector h3 {\n  font-size: 13px;\n  margin: 0 0 8px;\n}\n.jev-devtools .jev-inspector code,\n.jev-devtools .jev-inspector pre {\n  font:\n    11px \"JetBrains Mono\",\n    monospace;\n}\n.jev-devtools .jev-inspector pre {\n  line-height: 1.7;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 460px;\n  overflow: auto;\n  background: #100d13;\n  padding: 16px;\n  border: 1px solid #2e2533;\n  border-radius: 5px;\n}\n.jev-devtools .jev-inspector .muted {\n  color: #a89bac;\n  font-size: 11px;\n  line-height: 1.6;\n}\n.jev-devtools .request-list {\n  flex: 0 0 300px;\n  border-right: 1px solid #302634;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.jev-devtools .request-list > header {\n  padding: 17px 14px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.jev-devtools .request-list h2 span {\n  font-size: 11px;\n  color: #b796ad;\n  margin-left: 5px;\n}\n.jev-devtools .request-list button {\n  font-size: 11px;\n}\n.jev-devtools .list-filters {\n  display: flex;\n  gap: 7px;\n  padding: 0 12px 12px;\n}\n.jev-devtools .list-filters input {\n  min-width: 0;\n}\n.jev-devtools .list-filters select {\n  width: 86px;\n  font-size: 11px;\n}\n.jev-devtools .request-items {\n  overflow: auto;\n  flex: 1;\n}\n.jev-devtools .request-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  text-align: left;\n  border: 0;\n  border-top: 1px solid #251d2a;\n  border-radius: 0;\n  background: transparent;\n  padding: 16px 12px;\n}\n.jev-devtools .request-row.selected {\n  background: #251423;\n  box-shadow: inset 2px 0 #e551ba;\n}\n.jev-devtools .request-row strong {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n}\n.jev-devtools .request-row small {\n  display: block;\n  font-size: 10px;\n  color: #a99aac;\n  margin-top: 6px;\n}\n.jev-devtools .row-status {\n  font-size: 9px;\n  color: #ad9bb0;\n  margin-left: auto;\n}\n.jev-devtools .status-dot {\n  width: 6px;\n  height: 6px;\n  display: inline-block;\n  border-radius: 50%;\n  background: #b09ab7;\n  flex-shrink: 0;\n}\n.jev-devtools .status-dot.success {\n  background: #b3c79c;\n}\n.jev-devtools .status-dot.pending {\n  background: #e551ba;\n}\n.jev-devtools .status-dot.error {\n  background: #ee8e85;\n}\n.jev-devtools .request-list footer {\n  padding: 12px;\n  color: #9e8ea5;\n  border-top: 1px solid #302634;\n  font-size: 10px;\n  display: flex;\n  gap: 7px;\n}\n.jev-devtools .request-detail {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.jev-devtools .detail-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 18px 24px 10px;\n}\n.jev-devtools .detail-header h2 {\n  margin-top: 6px;\n}\n.jev-devtools .metrics {\n  display: flex;\n  gap: 24px;\n  font:\n    12px \"JetBrains Mono\",\n    monospace;\n  white-space: nowrap;\n}\n.jev-devtools .metrics small {\n  display: block;\n  font:\n    9px \"DM Sans\",\n    sans-serif;\n  color: #97879f;\n  margin-top: 6px;\n}\n.jev-devtools .detail-meta {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  padding: 0 24px 14px;\n  color: #a08aa5;\n}\n.jev-devtools .detail-meta code {\n  font-size: 10px;\n}\n.jev-devtools .detail-tabs {\n  display: flex;\n  gap: 20px;\n  border-bottom: 1px solid #302634;\n  padding: 0 24px;\n}\n.jev-devtools .detail-tabs button {\n  border: 0;\n  border-radius: 0;\n  background: none;\n  padding: 10px 0;\n  color: #a89bac;\n  font-size: 11px;\n}\n.jev-devtools .detail-tabs button[aria-pressed=\"true\"] {\n  box-shadow: inset 0 -2px #e551ba;\n  color: #f5c1e6;\n}\n.jev-devtools .detail-body {\n  overflow: auto;\n  flex: 1;\n  min-height: 0;\n  padding: 16px 24px 28px;\n  background-image: radial-gradient(#342337 0.6px, transparent 0.6px);\n  background-size: 16px 16px;\n}\n.jev-devtools .request-flow {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding: 14px 0 20px;\n}\n.jev-devtools .state-node {\n  position: relative;\n  flex: 0 0 160px;\n  border: 1px solid #e551ba;\n  padding: 20px 15px;\n  background: #1f1320;\n  border-radius: 6px;\n}\n.jev-devtools .state-node h3 {\n  margin-top: 12px;\n}\n.jev-devtools .state-node p {\n  color: #b69db3;\n  line-height: 1.5;\n}\n.jev-devtools .state-node code {\n  font-size: 10px;\n}\n.jev-devtools .state-node:after {\n  content: \"\";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  width: 20px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 1px solid #7f416d;\n  padding-left: 20px;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(160px, 1fr));\n  gap: 12px;\n  flex: 1;\n  position: relative;\n}\n.jev-devtools .question-node {\n  position: relative;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n  padding: 15px;\n  background: #110d14;\n  min-width: 0;\n}\n.jev-devtools .question-node:before {\n  content: \"\";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  width: 21px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: none;\n}\n.jev-devtools .question-node header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.jev-devtools .question-node header h3 {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .type {\n  font:\n    9px \"JetBrains Mono\",\n    monospace;\n  color: #e59acc;\n  border: 1px solid #5e3654;\n  border-radius: 3px;\n  padding: 3px 5px;\n}\n.jev-devtools .instructions {\n  font-size: 11px;\n  color: #b8a6bc;\n  line-height: 1.5;\n}\n.jev-devtools .answer-value {\n  display: block;\n  font-size: 20px;\n  font-weight: 500;\n  margin: 15px 0;\n  color: #f0c7e5;\n}\n.jev-devtools .answer-value small {\n  font-size: 10px;\n  color: #b5a1ba;\n}\n.jev-devtools .probability {\n  margin: 10px 0;\n  font-size: 10px;\n}\n.jev-devtools .probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 5px;\n  margin-bottom: 5px;\n}\n.jev-devtools .probability b {\n  font-weight: 400;\n  color: #d8abc9;\n}\n.jev-devtools .bar {\n  height: 4px;\n  background: #302033;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.jev-devtools .bar i {\n  display: block;\n  height: 100%;\n  background: #e551ba;\n}\n.jev-devtools .confidence {\n  font-size: 10px;\n  color: #a68cac;\n  border-top: 1px solid #302634;\n  padding-top: 10px;\n  display: flex;\n  justify-content: space-between;\n}\n.jev-devtools .confidence b {\n  color: #d1bad2;\n  font-weight: 400;\n}\n.jev-devtools details {\n  margin-top: 12px;\n  font-size: 10px;\n  color: #b7a0bd;\n}\n.jev-devtools summary {\n  cursor: pointer;\n}\n.jev-devtools .standalone {\n  margin-bottom: 14px;\n  max-width: 750px;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .standalone .answer {\n  max-width: 450px;\n}\n.jev-devtools .box-preview {\n  position: relative;\n  margin-top: 14px;\n  min-height: 80px;\n  background: #19121c;\n}\n.jev-devtools .box-preview img {\n  width: 100%;\n  display: block;\n}\n.jev-devtools .bounding-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .coordinates {\n  display: block;\n  font-size: 9px !important;\n  line-height: 1.5;\n  margin-top: 8px;\n  color: #ac93b0;\n}\n.jev-devtools .context-image {\n  max-width: 400px;\n  width: 100%;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n}\n.jev-devtools .empty {\n  padding: 20px;\n  color: #a294a8;\n  line-height: 1.7;\n}\n.jev-devtools .empty-detail {\n  margin: auto;\n  padding: 40px;\n  text-align: center;\n  color: #b2a0ba;\n}\n.jev-devtools .empty-symbol {\n  font-size: 36px;\n  color: #e551ba;\n  display: block;\n  margin-bottom: 20px;\n}\n.jev-devtools .empty-detail p {\n  font-size: 12px;\n  line-height: 1.8;\n}\n.jev-devtools .error-banner {\n  border: 1px solid #874b50;\n  background: #31191e;\n  padding: 12px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n.jev-devtools .warning {\n  color: #e2b97d;\n}\n.jev-devtools .jev-inspector table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n}\n.jev-devtools .jev-inspector th,\n.jev-devtools .jev-inspector td {\n  border-bottom: 1px solid #302634;\n  padding: 14px;\n}\n.jev-devtools .flow-dot {\n  display: none;\n}\n.jev-devtools .pending .flow-dot {\n  display: block;\n  position: absolute;\n  right: -23px;\n  top: calc(50% - 3px);\n  width: 6px;\n  height: 6px;\n  background: #e551ba;\n  border-radius: 50%;\n  animation: jev-inspector-pulse 1s infinite;\n}\n@keyframes jev-inspector-pulse {\n  50% {\n    opacity: 0.2;\n    transform: scale(0.7);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .pending .flow-dot {\n    animation: none;\n  }\n}\n@media (max-width: 1100px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    display: block;\n  }\n  .jev-devtools .request-flow {\n    align-items: flex-start;\n  }\n  .jev-devtools .state-node {\n    margin-top: 45px;\n  }\n  .jev-devtools .metrics {\n    gap: 12px;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 250px;\n  }\n}\n@media (max-width: 700px) {\n  .jev-devtools .jev-inspector {\n    flex-direction: column;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 140px;\n    flex-shrink: 0;\n    border-right: 0;\n    border-bottom: 1px solid #302634;\n  }\n  .jev-devtools .request-list > header {\n    padding: 6px 12px;\n  }\n  .jev-devtools .request-list footer {\n    display: none;\n  }\n  .jev-devtools .list-filters {\n    padding-bottom: 6px;\n  }\n  .jev-devtools .request-items {\n    display: flex;\n  }\n  .jev-devtools .request-row {\n    min-width: 240px;\n    padding: 8px 12px;\n  }\n  .jev-devtools .request-detail {\n    min-height: 0;\n  }\n  .jev-devtools .detail-header {\n    padding: 12px;\n  }\n  .jev-devtools .detail-meta,\n  .jev-devtools .detail-tabs {\n    padding-left: 12px;\n    padding-right: 12px;\n  }\n  .jev-devtools .detail-body {\n    padding: 12px;\n  }\n  .jev-devtools .metrics {\n    display: none;\n  }\n  .jev-devtools .state-node {\n    flex-basis: 115px;\n    padding: 12px;\n  }\n  .jev-devtools .request-flow {\n    gap: 25px;\n  }\n  .jev-devtools .state-node:after {\n    width: 12px;\n  }\n  .jev-devtools .question-branches {\n    padding-left: 12px;\n  }\n  .jev-devtools .question-node:before {\n    width: 13px;\n  }\n  .jev-devtools .question-node {\n    padding: 12px;\n  }\n}\n\n.jev-devtools .request-flow {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 24px;\n}\n.jev-devtools .state-node {\n  flex: auto;\n  width: fit-content;\n  align-self: center;\n  padding: 12px 24px;\n  text-align: center;\n  margin: 0;\n}\n.jev-devtools .state-node h3 {\n  display: inline-block;\n  margin: 0 12px;\n}\n.jev-devtools .state-node p {\n  display: inline-block;\n  margin: 0 12px 0 0;\n  font-size: 11px;\n}\n.jev-devtools .state-node .eyebrow {\n  display: none;\n}\n.jev-devtools .state-node:after {\n  left: 50%;\n  top: 100%;\n  width: 0;\n  height: 24px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 0;\n  border-top: 1px solid #7f416d;\n  padding: 20px 0 0;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n}\n.jev-devtools .question-node:before,\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: block;\n  right: auto;\n  left: 50%;\n  top: -21px;\n  width: 0;\n  height: 20px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .flow-caption {\n  margin-top: 0;\n}\n.jev-devtools .pending .flow-dot {\n  right: auto;\n  left: calc(50% - 3px);\n  top: calc(100% + 10px);\n}\n@media (max-width: 900px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-node:before,\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    height: 12px;\n    top: -13px;\n  }\n  .jev-devtools .question-branches .question-node:first-child:before {\n    height: 20px;\n    top: -21px;\n  }\n  .jev-devtools .state-node {\n    padding: 10px;\n  }\n  .jev-devtools .state-node p {\n    display: block;\n    margin: 6px 0;\n  }\n  .jev-devtools .state-node h3 {\n    font-size: 12px;\n  }\n}\n\n.jev-devtools.jev-drawer {\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  z-index: 1000;\n  inset: auto 0 0;\n  display: flex;\n  flex-direction: column;\n  background: #0d0a0f;\n  color: #eee8ed;\n  border-top: 1px solid #604058;\n  box-shadow: 0 -12px 48px #0005;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n}\n.jev-devtools.jev-drawer[hidden],\n.jev-devtools.jev-drawer-trigger[hidden] {\n  display: none;\n}\n.jev-devtools .jev-drawer-resize {\n  position: absolute;\n  z-index: 1;\n  top: -6px;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n  touch-action: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.jev-devtools .jev-drawer-resize span {\n  width: 42px;\n  height: 3px;\n  border-radius: 3px;\n  background: #79506f;\n}\n.jev-devtools .jev-drawer-resize:hover span,\n.jev-devtools .jev-drawer-resize:focus-visible span {\n  background: #e551ba;\n}\n.jev-devtools .jev-drawer-resize:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .jev-drawer-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex: 0 0 46px;\n  padding: 0 16px;\n  border-bottom: 1px solid #302634;\n}\n.jev-devtools .jev-drawer-header strong {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  font-weight: 600;\n}\n.jev-devtools .jev-mark {\n  color: #e551ba;\n  font-size: 21px;\n}\n.jev-devtools .jev-drawer-header > div {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.jev-devtools .jev-drawer-header button {\n  background: transparent;\n  border-color: transparent;\n  font-size: 11px;\n  color: #c4afc8;\n}\n.jev-devtools .jev-drawer-header .jev-drawer-close {\n  font-size: 22px;\n  line-height: 1;\n  padding: 4px 8px;\n}\n.jev-devtools .jev-drawer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools.jev-drawer-trigger {\n  position: fixed;\n  bottom: 18px;\n  right: 18px;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 10px 16px;\n  border: 1px solid #a24487;\n  border-radius: 8px;\n  cursor: pointer;\n  background: #211321;\n  color: #f1cbe6;\n  font:\n    600 13px \"DM Sans\",\n    sans-serif;\n  box-shadow: 0 4px 20px #0005;\n}\n.jev-devtools.jev-drawer-trigger span {\n  color: #e551ba;\n  font-size: 20px;\n}\n/* Baseline cards and authored left-to-right composition from the lab's Jev presets. */\n.jev-devtools .detail-body.detail-body-flow {\n  display: flex;\n  padding: 0;\n  overflow: hidden;\n}\n.jev-devtools .lab-flow {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n.jev-devtools .lab-flow-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-shrink: 0;\n  padding: 12px 16px;\n  flex-wrap: wrap;\n}\n.jev-devtools .lab-flow-toolbar label {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: 11px;\n  min-width: 0;\n}\n.jev-devtools .lab-flow-toolbar select {\n  width: auto;\n  max-width: 240px;\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar > div {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.jev-devtools .lab-flow-toolbar button {\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar output {\n  font-size: 11px;\n  min-width: 35px;\n  text-align: center;\n}\n.jev-devtools .lab-flow-viewport {\n  position: relative;\n  flex: 1;\n  min-height: 100px;\n  overflow: hidden;\n  background-color: #0d0a0f;\n  background-image: radial-gradient(\n    rgb(70 52 73 / var(--diagram-grid-opacity, 1))\n      calc(0.8px * var(--diagram-grid-weight, 1)),\n    transparent calc(0.8px * var(--diagram-grid-weight, 1))\n  );\n  background-size: 20px 20px;\n  border-block: 1px solid #302634;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  overscroll-behavior: contain;\n}\n.jev-devtools .lab-flow-viewport[data-panning] {\n  cursor: grabbing;\n}\n.jev-devtools .lab-flow-viewport:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .lab-flow-caption {\n  flex-shrink: 0;\n  padding: 8px 16px;\n  margin: 0;\n}\n.jev-devtools .lab-gesture-hint {\n  display: block;\n  color: #c6a7bd;\n}\n.jev-devtools .lab-flow-canvas {\n  position: absolute;\n  inset: 0 auto auto 0;\n  transform-origin: top left;\n  will-change: transform;\n  font-family: system-ui, sans-serif;\n  color: #f5f3f6;\n}\n.jev-devtools .lab-connections {\n  position: absolute;\n  inset: 0;\n  overflow: visible;\n}\n.jev-devtools .lab-connections path {\n  fill: none;\n  stroke: #645a68;\n  stroke-width: 1;\n}\n.jev-devtools .lab-connections path.active {\n  stroke: #968592;\n}\n.jev-devtools .lab-connections text {\n  fill: #b7b1bc;\n  font:\n    12px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-flow-dot {\n  fill: #e551ba;\n}\n.jev-devtools .lab-card {\n  position: absolute;\n  border: 1.3px solid #f5f3f6;\n  border-radius: 14px;\n  padding: 16px;\n  background: #0d0a0f;\n  overflow: hidden;\n}\n.jev-devtools .lab-eyebrow {\n  display: block;\n  color: #e551ba;\n  font:\n    500 10px ui-monospace,\n    monospace;\n  letter-spacing: 1px;\n  margin: 0 0 7px;\n}\n.jev-devtools .lab-card h3 {\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1.3;\n  letter-spacing: -0.2px;\n  margin: 0 0 10px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-card p {\n  font-size: 13px;\n  line-height: 1.4;\n  margin: 10px 0;\n}\n.jev-devtools .lab-copy {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-probability {\n  margin: 17px 0;\n}\n.jev-devtools .lab-probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 9px;\n  font-size: 15px;\n}\n.jev-devtools .lab-probability span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-probability code {\n  font:\n    13px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-track {\n  height: 7px;\n  border-radius: 4px;\n  background: #f5f3f61a;\n  overflow: hidden;\n}\n.jev-devtools .lab-track i {\n  display: block;\n  height: 100%;\n  border-radius: 4px;\n  background: #e551ba;\n}\n.jev-devtools .lab-track i.lab-alternative {\n  opacity: 0.35;\n}\n.jev-devtools .lab-card .lab-result {\n  font-size: 14px;\n  margin-top: 24px;\n}\n.jev-devtools .lab-card .lab-small {\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 20px;\n}\n.jev-devtools .lab-idle {\n  opacity: 0.65;\n}\n.jev-devtools .lab-scale {\n  position: relative;\n  margin-top: 18px;\n  border-top: 1px solid #b7b1bc;\n  display: flex;\n  justify-content: space-between;\n  padding-top: 9px;\n}\n.jev-devtools .lab-scale > span {\n  position: absolute;\n  top: -5px;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: #e551ba;\n  transform: translateX(-50%);\n}\n.jev-devtools .lab-big {\n  display: block;\n  font-size: 36px;\n  font-weight: 500;\n  margin-top: 26px;\n}\n.jev-devtools .lab-endpoints {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 10px;\n}\n.jev-devtools .lab-image {\n  position: relative;\n}\n.jev-devtools .lab-image img {\n  display: block;\n  width: 100%;\n}\n.jev-devtools .lab-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .lab-source-image {\n  width: 100%;\n  max-height: 105px;\n  object-fit: contain;\n}\n.jev-devtools .lab-coordinates {\n  font-family: ui-monospace, monospace;\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-flow-dot {\n    display: none;\n  }\n}\n/* The public TypeSafe mark travels with the package, independent of host assets. */\n.jev-devtools .typesafe-mark {\n  display: inline-block;\n  flex: 0 0 23px;\n  width: 23px;\n  height: 32px;\n  overflow: hidden;\n  line-height: 0;\n}\n.jev-devtools .typesafe-mark img {\n  display: block;\n  height: 32px;\n  width: auto;\n  max-width: none;\n}\n\n.jev-devtools .detail-body-questions {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.jev-devtools .questions-list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 180px;\n}\n.jev-devtools .questions-navigation {\n  display: flex;\n  align-items: end;\n  gap: 8px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n.jev-devtools .questions-navigation label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  flex: 1;\n  min-width: 240px;\n  max-width: 480px;\n  font-size: 11px;\n  color: #bc9db5;\n}\n.jev-devtools .questions-navigation select {\n  display: block;\n  min-width: 0;\n}\n.jev-devtools .questions-navigation > span {\n  align-self: center;\n  color: #a89bac;\n}\n.jev-devtools .questions-help {\n  margin: 8px 0;\n  flex-shrink: 0;\n}\n.jev-devtools .questions-viewport {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overflow-anchor: none;\n  scrollbar-gutter: stable;\n  padding: 3px;\n}\n.jev-devtools .questions-spacer {\n  position: relative;\n  width: 100%;\n}\n.jev-devtools .questions-row {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding-bottom: 14px;\n}\n.jev-devtools .questions-row .standalone {\n  margin-bottom: 0;\n}\n.jev-devtools .questions-viewport:focus-visible,\n.jev-devtools .questions-row article:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n\n/* Reserve measured card geometry while rapid scrolling uses a light preview. */\n.jev-devtools .questions-row[data-preview=\"true\"] article {\n  height: 100%;\n}\n.jev-devtools .question-scroll-preview p {\n  margin-top: 16px;\n}\n\n/* The full distribution stays at reading size, outside the zoomable canvas. */\n.jev-devtools .lab-flow-viewport[hidden] {\n  display: none;\n}\n.jev-devtools .lab-choice-browser {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: 8px 16px;\n  gap: 10px;\n}\n.jev-devtools .lab-choice-controls {\n  display: flex;\n  gap: 12px;\n  align-items: end;\n  flex-wrap: wrap;\n  font-size: 12px;\n}\n.jev-devtools .lab-choice-controls label {\n  display: grid;\n  gap: 5px;\n}\n.jev-devtools .lab-choice-table-scroll {\n  overflow: auto;\n  overscroll-behavior: contain;\n  min-height: 0;\n  flex: 1;\n}\n.jev-devtools .lab-choice-browser table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.jev-devtools .lab-choice-browser caption {\n  text-align: left;\n  padding: 8px 0;\n  color: #aaa0af;\n}\n.jev-devtools .lab-choice-browser th,\n.jev-devtools .lab-choice-browser td {\n  padding: 9px 12px;\n  border-bottom: 1px solid #302634;\n  text-align: left;\n}\n.jev-devtools .lab-choice-browser th {\n  overflow-wrap: anywhere;\n  max-width: 320px;\n}\n.jev-devtools .lab-choice-browser td {\n  font-variant-numeric: tabular-nums;\n}\n.jev-devtools .lab-choice-browser code {\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-returned {\n  display: block;\n  font-size: 10px;\n  color: #e551ba;\n}\n.jev-devtools .lab-choice-pagination {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: space-between;\n  font-size: 12px;\n}\n.jev-devtools .lab-choice-remainder button {\n  margin-top: 7px;\n}\n\n.jev-devtools .lab-flow-compact .lab-output {\n  padding: 12px;\n  height: 104px;\n}\n.jev-devtools .lab-flow-compact .lab-output .lab-eyebrow {\n  margin-bottom: 6px;\n}\n.jev-devtools .lab-flow-compact .lab-output h3 {\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n.jev-devtools .lab-flow-compact .lab-output p {\n  font-size: 12px;\n  margin: 4px 0;\n}\n.jev-devtools .lab-flow-compact .lab-result {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-remainder {\n  padding: 12px;\n}\n.jev-devtools .lab-choice-remainder .lab-small {\n  margin: 8px 0 0;\n  font-size: 11px;\n}\n\n.jev-devtools .detail-body.detail-body-flow {\n  flex-direction: column;\n}\n.jev-devtools .detail-body-flow > .warning,\n.jev-devtools .detail-body-flow > .error-banner {\n  flex-shrink: 0;\n  margin: 6px 16px;\n}\n.jev-devtools .lab-choice-browser {\n  overflow: auto;\n}\n.jev-devtools .lab-choice-table-scroll {\n  flex: 1 0 110px;\n}\n\n/* Only freshly revealed branches enter; pan/zoom remains on the canvas. */\n.jev-devtools .lab-card-enter {\n  animation: jev-card-enter 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;\n}\n.jev-devtools .lab-branch-enter {\n  stroke-dasharray: 1;\n  animation: jev-branch-enter 280ms ease-out backwards;\n}\n@keyframes jev-card-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-16px) scale(0.96);\n  }\n}\n@keyframes jev-branch-enter {\n  from {\n    opacity: 0;\n    stroke-dashoffset: 1;\n  }\n  to {\n    opacity: 1;\n    stroke-dashoffset: 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-card-enter,\n  .jev-devtools .lab-branch-enter {\n    animation: none;\n  }\n}\n\n/* Connected requests share one camera and one opt-in full request detail. */\n.whole-flow {\n  min-width: 0;\n  overflow: auto;\n}\n.flow-overview-viewport {\n  position: relative;\n  min-height: 240px;\n  flex: 1 0 260px;\n  overflow: hidden;\n  touch-action: none;\n  cursor: grab;\n  background-image: radial-gradient(\n    rgb(83 67 87 / var(--diagram-grid-opacity, 1))\n      calc(1px * var(--diagram-grid-weight, 1)),\n    transparent calc(1px * var(--diagram-grid-weight, 1))\n  );\n  background-size: 20px 20px;\n}\n.flow-overview-viewport[data-panning] {\n  cursor: grabbing;\n}\n.flow-overview-canvas {\n  position: absolute;\n  transform-origin: 0 0;\n}\n.flow-connections {\n  position: absolute;\n  inset: 0;\n  color: #c0b8c4;\n  pointer-events: none;\n}\n.flow-step {\n  position: absolute;\n  width: 220px;\n  min-height: 98px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  text-align: left;\n  padding: 14px;\n  border: 1px solid #736476;\n  border-radius: 12px;\n  background: #151017;\n  color: inherit;\n}\n.flow-step strong {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.flow-step-description {\n  overflow-wrap: anywhere;\n  font-size: 12px;\n}\n.flow-step.flow-request {\n  display: block;\n  padding: 0;\n  background: #0d0a0f;\n  /* Skip offscreen paint/layout while preserving each question/expansion state. */\n  content-visibility: auto;\n  contain-intrinsic-size: auto 640px;\n}\n.flow-request-heading {\n  width: 100%;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-align: left;\n  padding: 12px 20px;\n  border: 0;\n  border-bottom: 1px solid #342a38;\n  border-radius: 12px 12px 0 0;\n  background: transparent;\n  color: inherit;\n}\n.flow-request-heading .eyebrow {\n  display: block;\n  margin-bottom: 4px;\n}\n.jev-devtools .lab-flow-embedded {\n  width: 1120px;\n  display: block;\n}\n.jev-devtools .lab-flow-surface {\n  position: relative;\n  width: 1120px;\n}\n.jev-devtools .lab-flow-surface[hidden] {\n  display: none;\n}\n.jev-devtools .lab-flow-embedded .lab-flow-canvas {\n  will-change: auto;\n}\n.jev-devtools .lab-flow-embedded .lab-choice-browser {\n  height: 520px;\n}\n.flow-step.selected {\n  outline: 2px solid #e551ba;\n  outline-offset: 3px;\n}\n.flow-step[data-status=\"completed\"] {\n  border-color: #e551ba;\n}\n.flow-step[data-status=\"running\"] {\n  border-color: #e551ba;\n  background: #2b1728;\n}\n.flow-step[data-status=\"untaken\"],\n.flow-step[data-status=\"blocked\"] {\n  color: #948797;\n  border-color: #403746;\n  background: #151017;\n}\n.flow-step[data-status=\"error\"] {\n  border-color: #f17c78;\n}\n.flow-step[data-status=\"cancelled\"] {\n  border-style: dashed;\n}\n.flow-selection {\n  padding: 12px 20px;\n  border-top: 1px solid #342a38;\n}\n.flow-selection p {\n  margin: 6px 0;\n  overflow-wrap: anywhere;\n}\n.flow-request-detail {\n  min-height: 450px;\n  border-top: 1px solid #534357;\n}\n.flow-request-detail > .request-detail {\n  min-height: 450px;\n}\n\n.flow-card-heading,\n.flow-card-footer,\n.flow-join-summary,\n.flow-lane {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n}\n.flow-card-heading {\n  justify-content: flex-start;\n}\n.flow-kind-icon {\n  width: 26px;\n  height: 26px;\n  color: #e551ba;\n  flex-shrink: 0;\n}\n.flow-kind-icon svg {\n  width: 100%;\n  height: 100%;\n}\n.flow-card-heading .eyebrow {\n  font-size: 10px;\n}\n.flow-status {\n  margin-left: auto;\n  font-size: 10px;\n  border-radius: 20px;\n  padding: 4px 8px;\n  background: #342031;\n  color: #f0b7e0;\n}\n.flow-step[data-status=\"untaken\"] .flow-status {\n  background: #241e28;\n  color: #948797;\n}\n.flow-step[data-status=\"untaken\"] .flow-kind-icon {\n  color: #948797;\n}\n.flow-step > strong {\n  white-space: normal;\n  font-size: 18px;\n  line-height: 1.25;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow-wrap: anywhere;\n}\n.flow-step-description {\n  line-height: 1.5;\n  color: #b9aebf;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.flow-card-footer {\n  margin-top: auto;\n  padding-top: 10px;\n  border-top: 1px solid #342a38;\n  font-size: 10px;\n  color: #a092a7;\n}\n.flow-card-footer code {\n  max-width: 45%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.flow-card-footer small {\n  text-align: right;\n}\n.flow-join-summary {\n  margin-top: 4px;\n  font-size: 11px;\n  color: #c9b9cd;\n}\n.flow-join-summary > span {\n  color: #ef9ed9;\n  font-variant-numeric: tabular-nums;\n}\n.flow-lanes {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n}\n.flow-lane {\n  border-radius: 5px;\n  background: #211923;\n  padding: 6px 8px;\n  font-size: 11px;\n  min-height: 28px;\n}\n.flow-lane > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.flow-lane > span > span {\n  color: #ef9ed9;\n  margin-right: 4px;\n}\n.flow-lane small {\n  color: #b9aebf;\n}\n.flow-lane-details {\n  padding-left: 18px;\n  font-size: 12px;\n}\n.flow-request-heading > span:first-child {\n  min-width: 0;\n  max-width: 80%;\n}\n.flow-request-description {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  font-size: 12px;\n  line-height: 1.5;\n  color: #b9aebf;\n  margin-top: 5px;\n  overflow-wrap: anywhere;\n}\n\n/* Structured context stays within the card; its gestures never move the camera. */\n.jev-devtools .lab-content-card {\n  display: flex;\n  flex-direction: column;\n  padding: 14px;\n}\n.jev-devtools .lab-content-card h3 {\n  font-size: 14px;\n  margin-bottom: 8px;\n  flex-shrink: 0;\n}\n.jev-devtools .lab-content-card .lab-eyebrow {\n  font-size: 9px;\n  margin-bottom: 5px;\n  flex-shrink: 0;\n}\n.jev-devtools .diagram-content {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  overscroll-behavior: contain;\n  touch-action: pan-y;\n  scrollbar-width: thin;\n  scrollbar-color: #514256 transparent;\n  padding-right: 4px;\n  font-size: 12px;\n  line-height: 1.5;\n  color: #d5cdd9;\n  cursor: auto;\n  user-select: text;\n}\n.jev-devtools .diagram-content:focus-visible {\n  outline: 1px solid #e551ba;\n  outline-offset: -1px;\n  border-radius: 3px;\n}\n.jev-devtools .diagram-property {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 8px;\n  padding: 5px 0;\n  border-bottom: 1px solid #261e2a;\n}\n.jev-devtools .diagram-property-text {\n  display: block;\n}\n.jev-devtools .diagram-property-key {\n  font:\n    10px/1.5 ui-monospace,\n    monospace;\n  color: #c8a8c8;\n  overflow-wrap: anywhere;\n  min-width: 0;\n}\n.jev-devtools .diagram-property-text > .diagram-property-key {\n  display: block;\n  margin-bottom: 2px;\n}\n.jev-devtools .diagram-text-value {\n  display: block;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .diagram-text-preview {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.jev-devtools .diagram-value-number {\n  color: #a6d6ca;\n  font:\n    11px/1.5 ui-monospace,\n    monospace;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .diagram-value-boolean {\n  color: #c4b1ed;\n  font:\n    11px/1.5 ui-monospace,\n    monospace;\n}\n.jev-devtools .diagram-value-empty {\n  color: #9c8ca4;\n  font:\n    10px/1.5 ui-monospace,\n    monospace;\n}\n.jev-devtools .diagram-property-disclosure {\n  width: 100%;\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  padding: 6px 0;\n  border: 0;\n  border-bottom: 1px solid #261e2a;\n  border-radius: 0;\n  background: transparent;\n  text-align: left;\n  color: inherit;\n}\n.jev-devtools .diagram-property-disclosure:hover {\n  background: #211723;\n}\n.jev-devtools .diagram-property-caret {\n  color: #ab8aab;\n  flex-shrink: 0;\n}\n.jev-devtools .diagram-property-type {\n  color: #9c8ca4;\n  font:\n    10px/1.5 ui-monospace,\n    monospace;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.jev-devtools .diagram-property-children {\n  margin-left: 4px;\n  padding-left: 9px;\n  border-left: 1px solid #49324b;\n}\n.jev-devtools .diagram-content-toggle {\n  display: block;\n  padding: 3px 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: #e9a4d7;\n  font-size: 10px;\n  text-align: left;\n}\n.jev-devtools .diagram-content-toggle:hover {\n  color: #ffd9f3;\n  text-decoration: underline;\n}\n\n/* Noul is a probability of true; its two outputs carry p and 1-p.\n   Keep the fill opaque, with readable text even at zero probability. */\n.jev-devtools .lab-noul-output {\n  border-color: rgb(\n    245 243 246 / calc(0.35 + 0.65 * var(--lab-noul-probability, 1))\n  );\n}\n.jev-devtools .lab-noul-output > h3,\n.jev-devtools .lab-noul-output > p {\n  opacity: calc(0.65 + 0.35 * var(--lab-noul-probability, 1));\n}\n\n.flow-condition-rule {\n  display: block;\n  padding: 10px 12px;\n  border: 1px solid #49324b;\n  border-radius: 6px;\n  background: #211723;\n  width: 100%;\n}\n.flow-condition-label {\n  display: block;\n  font-size: 10px;\n  color: #ba9dbe;\n  margin-bottom: 5px;\n}\n.flow-condition-rule code {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  font:\n    12px/1.6 ui-monospace,\n    monospace;\n  color: #f2d7eb;\n}\n\n.flow-condition-incoming {\n  display: block;\n  padding-bottom: 10px;\n  margin-bottom: 10px;\n  border-bottom: 1px solid #49324b;\n}\n.flow-condition-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 12px;\n  font-size: 12px;\n  padding: 3px 0;\n}\n.flow-condition-input > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.flow-condition-input > b {\n  font-size: 17px;\n  font-weight: 600;\n  color: #f2d7eb;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 65%;\n}\n.flow-input-details {\n  font-size: 12px;\n}\n.flow-input-details > div {\n  display: flex;\n  gap: 16px;\n  margin: 6px 0;\n}\n.flow-input-details code {\n  color: #a092a7;\n  margin-left: 8px;\n}\n.flow-input-details dd {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n";