fix: harden prepared lifecycle review fixes

This commit is contained in:
lda
2026-07-13 13:05:11 +07:00 Verified
parent ed446cc515
commit 5f03fa3101
4 changed files with 245 additions and 107 deletions
@@ -43,6 +43,7 @@ describe("PreparedAuthoringLifecycleScene", () => {
expect(frame).toHaveTextContent("wf draft validate lda_report_workflow"); expect(frame).toHaveTextContent("wf draft validate lda_report_workflow");
expect(frame).toHaveTextContent(/structured missing-output diagnostic/i); expect(frame).toHaveTextContent(/structured missing-output diagnostic/i);
expect(frame).toHaveAttribute("data-authoring-step", "diagnose"); expect(frame).toHaveAttribute("data-authoring-step", "diagnose");
expect(frame.querySelector('[data-authoring-focus="diagnose"]')).toBeInTheDocument();
expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute( expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute(
"data-authoring-focus", "data-authoring-focus",
"diagnose", "diagnose",
@@ -60,6 +61,7 @@ describe("PreparedAuthoringLifecycleScene", () => {
expect(frame).toHaveTextContent("workflow.draft_workspaces.set_step_output_map"); expect(frame).toHaveTextContent("workflow.draft_workspaces.set_step_output_map");
expect(frame).toHaveTextContent(/wf draft set-output lda_report_workflow/i); expect(frame).toHaveTextContent(/wf draft set-output lda_report_workflow/i);
expect(frame).toHaveAttribute("data-authoring-step", "repair"); expect(frame).toHaveAttribute("data-authoring-step", "repair");
expect(frame.querySelector('[data-authoring-focus="repair"]')).toBeInTheDocument();
expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute( expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute(
"data-authoring-focus", "data-authoring-focus",
"repair", "repair",
@@ -12,7 +12,6 @@ import {
preparedLifecycleMessageReducer, preparedLifecycleMessageReducer,
} from "./prepared-lifecycle-message-state.js"; } from "./prepared-lifecycle-message-state.js";
import type { SceneBeatDefinition, SceneDefinition } from "../storyboard.js"; import type { SceneBeatDefinition, SceneDefinition } from "../storyboard.js";
import { StageCaption } from "../StageCaption.js";
type PreparedAuthoringLifecycleSceneProps = { type PreparedAuthoringLifecycleSceneProps = {
readonly scene: SceneDefinition; readonly scene: SceneDefinition;
@@ -34,12 +33,12 @@ const steps = [
}[]; }[];
/** /**
* Scene 9 — Prepared workflow authoring lifecycle. * Prepared workflow authoring lifecycle.
* *
* Each beat shows a persistent prepared assistant beside one dominant phase * Each beat shows a persistent prepared assistant beside one dominant phase
* projection sourced from the prepared authoring recording. * projection sourced from the prepared authoring recording.
*/ */
export const PreparedAuthoringLifecycleScene = ({ scene, beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => { export const PreparedAuthoringLifecycleScene = ({ beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
const [messageState, dispatch] = useReducer( const [messageState, dispatch] = useReducer(
preparedLifecycleMessageReducer, preparedLifecycleMessageReducer,
initialPreparedLifecycleMessageState, initialPreparedLifecycleMessageState,
@@ -51,89 +50,83 @@ export const PreparedAuthoringLifecycleScene = ({ scene, beat, onAdvance }: Prep
const projection = projectPreparedLifecycleStep(step); const projection = projectPreparedLifecycleStep(step);
const activeStepIndex = steps.findIndex((candidate) => candidate.id === step); const activeStepIndex = steps.findIndex((candidate) => candidate.id === step);
return ( return (
<> <section
{/* Keep external chrome to scene orientation; beat-specific copy belongs in the frame. */} className="prepared-lifecycle-scene"
<StageCaption eyebrow="Prepared workflow" title={scene.title}> aria-label="prepared workflow authoring lifecycle"
{null} data-active-phase={step}
</StageCaption> data-recording-phase={projection.recordingPhase}
<section data-primary-surface="authoring-phase"
className="prepared-lifecycle-scene" data-support-surface="prepared-chat"
aria-label="prepared workflow authoring lifecycle" data-presentation-surface="editorial"
data-active-phase={step} >
data-recording-phase={projection.recordingPhase} <PresentationAssistantPane
data-primary-surface="authoring-phase" phase={step}
data-support-surface="prepared-chat" visualRole="support"
data-presentation-surface="editorial" message={projectPreparedLifecycleMessage(messageState, step)}
> submittedOverrides={projectPreparedLifecycleSubmittedOverrides(messageState)}
<PresentationAssistantPane runRequested={messageState.runRequested}
phase={step} onDraftChange={(draft) => dispatch({ type: "draft_edited", draft })}
visualRole="support" onSubmit={(submittedText) => {
message={projectPreparedLifecycleMessage(messageState, step)} dispatch({ type: "draft_edited", draft: submittedText });
submittedOverrides={projectPreparedLifecycleSubmittedOverrides(messageState)} if (step === "discover") {
runRequested={messageState.runRequested} dispatch({ type: "discover_submitted" });
onDraftChange={(draft) => dispatch({ type: "draft_edited", draft })} }
onSubmit={(submittedText) => { if (step === "draft") {
dispatch({ type: "draft_edited", draft: submittedText }); dispatch({ type: "draft_submitted" });
if (step === "discover") { onAdvance?.();
dispatch({ type: "discover_submitted" }); }
} if (step === "artifact") {
if (step === "draft") { dispatch({ type: "artifact_submitted" });
dispatch({ type: "draft_submitted" }); onAdvance?.();
onAdvance?.(); }
} if (step === "deployment") dispatch({ type: "run_requested" });
if (step === "artifact") { }}
dispatch({ type: "artifact_submitted" }); />
onAdvance?.(); <div className="prepared-lifecycle-scene__presentation">
} <ol className="prepared-lifecycle-scene__rail" aria-label="prepared authoring lifecycle">
if (step === "deployment") dispatch({ type: "run_requested" }); {steps.map((candidate, index) => (
}} <li
/> key={candidate.id}
<div className="prepared-lifecycle-scene__presentation"> data-active={candidate.id === step ? "true" : "false"}
<ol className="prepared-lifecycle-scene__rail" aria-label="prepared authoring lifecycle"> data-complete={index < activeStepIndex ? "true" : "false"}
{steps.map((candidate, index) => ( >
<li <span className="prepared-lifecycle-scene__ordinal" aria-hidden="true">
key={candidate.id} {String(index + 1).padStart(2, "0")}
data-active={candidate.id === step ? "true" : "false"} </span>
data-complete={index < activeStepIndex ? "true" : "false"} <strong>{candidate.label}</strong>
> <span className="prepared-lifecycle-scene__detail">{candidate.detail}</span>
<span className="prepared-lifecycle-scene__ordinal" aria-hidden="true"> </li>
{String(index + 1).padStart(2, "0")} ))}
</span> </ol>
<strong>{candidate.label}</strong>
<span className="prepared-lifecycle-scene__detail">{candidate.detail}</span>
</li>
))}
</ol>
<article <article
className="prepared-lifecycle-scene__frame" className="prepared-lifecycle-scene__frame"
role="region" role="region"
aria-label="active authoring operation" aria-label="active authoring operation"
data-authoring-step={step} data-authoring-step={step}
data-recording-phase={projection.recordingPhase} data-recording-phase={projection.recordingPhase}
data-visual-role="lifecycle-primary" data-visual-role="lifecycle-primary"
> >
<header className="prepared-lifecycle-scene__frame-header"> <header className="prepared-lifecycle-scene__frame-header">
<div>
<span className="prepared-lifecycle-scene__frame-step">{activeStep.label}</span>
<h2>{beat.title}</h2>
<p>{beat.caption}</p>
</div>
<dl className="prepared-lifecycle-scene__evidence">
<div> <div>
<span className="prepared-lifecycle-scene__frame-step">{activeStep.label}</span> <dt>Method</dt>
<h2>{beat.title}</h2> <dd><code>{projection.primaryCommand.title}</code></dd>
<p>{beat.caption}</p>
</div> </div>
<dl className="prepared-lifecycle-scene__evidence"> <div>
<div> <dt>Equivalent CLI</dt>
<dt>Method</dt> <dd><code>{projection.primaryCommand.command}</code></dd>
<dd><code>{projection.primaryCommand.title}</code></dd> </div>
</div> </dl>
<div> </header>
<dt>Equivalent CLI</dt> <AuthoringPhaseVisual projection={projection} focus={projection.focus} />
<dd><code>{projection.primaryCommand.command}</code></dd> </article>
</div> </div>
</dl> </section>
</header>
<AuthoringPhaseVisual projection={projection} focus={projection.focus} />
</article>
</div>
</section>
</>
); );
}; };
@@ -84,7 +84,7 @@ describe("presentation.css", () => {
expect(boardBlock).toContain("flex-shrink: 0"); expect(boardBlock).toContain("flex-shrink: 0");
}); });
it("keeps Scene 9 as a bounded 26/74 split without a lower dock row", () => { it("keeps the prepared lifecycle as a bounded 26/74 split without a lower dock row", () => {
const sceneBlock = css.match( const sceneBlock = css.match(
/^\.prepared-lifecycle-scene\s*\{(?<body>[\s\S]*?)\n\}/m, /^\.prepared-lifecycle-scene\s*\{(?<body>[\s\S]*?)\n\}/m,
)?.groups?.body; )?.groups?.body;
@@ -98,12 +98,39 @@ describe("presentation.css", () => {
expect(css).not.toMatch(/prepared-lifecycle-scene__dock[\s\S]*position:\s*(absolute|fixed)/); expect(css).not.toMatch(/prepared-lifecycle-scene__dock[\s\S]*position:\s*(absolute|fixed)/);
}); });
it("keeps every Scene 9 surface override on the editorial 26/74 split", () => { it("asserts the winning editorial 26/74 split", () => {
const scene9Rules = css.match(/\.prepared-lifecycle-scene[^{}]*\{[^}]*\}/g) ?? []; const editorialScene = cssBlocks(
css,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"]',
).find((body) => body.includes("--authoring-paper") && body.includes("grid-template-columns:"));
expect(scene9Rules.filter((rule) => rule.includes("grid-template-columns:")).length).toBeGreaterThan(0); expect(editorialScene).toBeDefined();
expect(scene9Rules.join("\n")).not.toContain("1.65fr"); expect(editorialScene).toMatch(/grid-template-columns: minmax\(12rem, 0\.26fr\) minmax\(0, 0\.74fr\)/);
expect(scene9Rules.join("\n")).toMatch(/minmax\(12rem, 0\.26fr\)\s+minmax\(0, 0\.74fr\)/); expect(editorialScene).not.toContain("0.24fr");
expect(editorialScene).not.toContain("0.76fr");
});
it("scopes Diagnose and Repair focus styling to the prepared lifecycle frame", () => {
const preparedFrame = '.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame';
const diagnose = cssBlocks(css, `${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"]`)
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const repair = cssBlocks(css, `${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"]`)
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const diagnoseEvidence = cssBlocks(
css,
`${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic`,
).find((body) => body.includes("border-inline-start: 3px solid"));
const repairEvidence = cssBlocks(
css,
`${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction`,
).find((body) => body.includes("border-inline-start: 3px solid"));
expect(diagnose).toContain("grid-template-columns: minmax(0, 1fr);");
expect(diagnoseEvidence).toContain("border-inline-start: 3px solid");
expect(repair).toContain("grid-template-columns: minmax(0, 1fr);");
expect(repairEvidence).toContain("border-inline-start: 3px solid");
expect(css).toContain(`${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction`);
expect(css).toContain(`${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__status`);
}); });
it("gives the prepared lifecycle rail and operation frame the primary hierarchy", () => { it("gives the prepared lifecycle rail and operation frame the primary hierarchy", () => {
@@ -135,7 +162,33 @@ describe("presentation.css", () => {
expect(compactRail).toContain("scrollbar-width: none;"); expect(compactRail).toContain("scrollbar-width: none;");
}); });
it("bounds Scene 9 conversation scrolling and recenters Scene 8 at compact stage widths", () => { it("keeps the operation frame readable at 720px and stacks presentation at 480px", () => {
const compactContainer = cssBlock(css, "@container presentation-canvas (max-width: 1050px)") ?? "";
const compactScene = cssBlocks(compactContainer, '.prepared-lifecycle-scene[data-presentation-surface="editorial"]')
.find((body) => body.includes("grid-template-columns: minmax(10.5rem, 0.28fr)"));
const compactFrame = cssBlocks(
compactContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame',
).find((body) => body.includes("grid-template-rows: auto auto;"));
const compactRepair = cssBlocks(
compactContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair',
).find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const narrowContainer = cssBlock(css, "@container presentation-canvas (max-width: 600px)") ?? "";
const narrowScene = cssBlocks(narrowContainer, ".prepared-lifecycle-scene")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);") && body.includes("grid-template-areas:"));
expect(compactScene).toContain("overflow: visible;");
expect(compactFrame).toContain("grid-template-rows: auto auto;");
expect(compactFrame).toContain("min-height: 18rem;");
expect(compactFrame).toContain("overflow: visible;");
expect(compactRepair).toContain("grid-template-columns: minmax(0, 1fr);");
expect(compactRepair).toContain("min-width: 0;");
expect(narrowScene).toContain("grid-template-columns: minmax(0, 1fr);");
expect(narrowScene).toContain('grid-template-areas: "presentation" "assistant";');
});
it("bounds prepared conversation scrolling and recenters the agent handoff at compact stage widths", () => {
expect(css.match(/\.presentation-stage\[data-scene-view="agent"\] \.presentation-stage__primary\s*\{/g)).toHaveLength(2); expect(css.match(/\.presentation-stage\[data-scene-view="agent"\] \.presentation-stage__primary\s*\{/g)).toHaveLength(2);
expect(cssBlocks(css, ".presentation-stage__primary > .agent-handoff-scene") expect(cssBlocks(css, ".presentation-stage__primary > .agent-handoff-scene")
.some((body) => body.includes("margin-inline: auto;"))).toBe(true); .some((body) => body.includes("margin-inline: auto;"))).toBe(true);
@@ -3674,7 +3674,7 @@
} }
} }
/* Scene 9 — persistent assistant beside the dominant phase projection. */ /* Prepared lifecycle — persistent assistant beside the dominant phase frame. */
.prepared-lifecycle-scene { .prepared-lifecycle-scene {
display: grid; display: grid;
grid-template-columns: minmax(12rem, 0.26fr) minmax(0, 0.74fr); grid-template-columns: minmax(12rem, 0.26fr) minmax(0, 0.74fr);
@@ -3831,20 +3831,6 @@
font: 600 0.72rem/1.3 var(--font-mono); font: 600 0.72rem/1.3 var(--font-mono);
} }
.stage-caption:has(+ .prepared-lifecycle-scene) {
margin-bottom: 0.55rem;
padding: 0.75rem 1rem;
}
.stage-caption:has(+ .prepared-lifecycle-scene) h1 {
margin-block: 0.15rem 0.25rem;
font-size: 1.85rem;
}
.stage-caption:has(+ .prepared-lifecycle-scene) p {
margin: 0;
}
.presentation-assistant-pane { .presentation-assistant-pane {
display: flex; display: flex;
min-width: 0; min-width: 0;
@@ -3945,7 +3931,7 @@
--authoring-ink: var(--color-editorial-ink, oklch(0.19 0.015 65)); --authoring-ink: var(--color-editorial-ink, oklch(0.19 0.015 65));
--authoring-muted: var(--color-editorial-muted, oklch(0.48 0.025 65)); --authoring-muted: var(--color-editorial-muted, oklch(0.48 0.025 65));
--authoring-rule: color-mix(in oklch, var(--authoring-muted) 32%, transparent); --authoring-rule: color-mix(in oklch, var(--authoring-muted) 32%, transparent);
grid-template-columns: minmax(12rem, 0.24fr) minmax(0, 0.76fr); grid-template-columns: minmax(12rem, 0.26fr) minmax(0, 0.74fr);
gap: 0.8rem; gap: 0.8rem;
background: var(--authoring-paper); background: var(--authoring-paper);
color: var(--authoring-ink); color: var(--authoring-ink);
@@ -4016,6 +4002,52 @@
color: var(--authoring-muted); color: var(--authoring-muted);
} }
/* Diagnose and Repair are distinct editorial cuts of the recorded validate phase. */
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 0.75rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic {
grid-column: 1;
min-height: 0;
border-inline-start: 3px solid var(--accent-amber);
background: color-mix(in oklch, var(--authoring-paper) 90%, var(--accent-amber));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__connector,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__status {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 0.75rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__diagnostic,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__connector {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction {
grid-column: 1;
min-height: 0;
border-inline-start: 3px solid var(--success);
background: color-mix(in oklch, var(--authoring-paper) 90%, var(--success));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__status {
grid-column: 1;
justify-content: flex-start;
color: var(--success);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .presentation-assistant-pane { .prepared-lifecycle-scene[data-presentation-surface="editorial"] .presentation-assistant-pane {
background: color-mix(in oklch, var(--authoring-paper) 92%, var(--authoring-muted)); background: color-mix(in oklch, var(--authoring-paper) 92%, var(--authoring-muted));
border-color: var(--authoring-rule); border-color: var(--authoring-rule);
@@ -4107,6 +4139,7 @@
.prepared-lifecycle-scene[data-presentation-surface="editorial"] { .prepared-lifecycle-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(10.5rem, 0.28fr) minmax(0, 0.72fr); grid-template-columns: minmax(10.5rem, 0.28fr) minmax(0, 0.72fr);
gap: 0.6rem; gap: 0.6rem;
overflow: visible;
} }
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__rail { .prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__rail {
@@ -4118,7 +4151,16 @@
} }
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame { .prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame {
grid-template-rows: auto auto;
min-height: 18rem;
height: auto;
padding: 0.9rem; padding: 0.9rem;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__presentation {
min-height: max-content;
overflow: visible;
} }
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame-header { .prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame-header {
@@ -4126,6 +4168,37 @@
gap: 0.7rem; gap: 0.7rem;
} }
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
width: 100%;
min-width: 0;
height: auto;
gap: 0.7rem;
align-content: start;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__diagnostic,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__correction {
min-width: 0;
min-height: 0;
padding: 0.85rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__connector {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__status {
grid-column: 1;
justify-content: flex-start;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__diagnostic strong,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__correction code {
overflow-wrap: anywhere;
}
.problem-loop-scene[data-presentation-surface="editorial"] { .problem-loop-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center; align-items: center;
@@ -4143,6 +4216,23 @@
to { opacity: 1; } to { opacity: 1; }
} }
@container presentation-canvas (max-width: 600px) {
.prepared-lifecycle-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "presentation" "assistant";
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .prepared-lifecycle-scene__presentation {
grid-area: presentation;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane {
grid-area: assistant;
min-height: 14rem;
}
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.prepared-lifecycle-scene__frame > * { .prepared-lifecycle-scene__frame > * {
animation: none; animation: none;