/* A work record in motion. Every rule is scoped to the illustration. */
.agent-demo{--d-ink:var(--text,var(--ink,#302a26));--d-paper:var(--panel,var(--surface,#fffbf2));--d-line:var(--line,#c8b8a9);--d-accent:var(--accent,#b52d20);color:var(--d-ink);background:var(--d-paper);border:1px solid var(--d-line);border-top:3px solid var(--d-accent);margin:0;min-width:0;width:100%;padding:22px;box-shadow:8px 9px 0 color-mix(in srgb,var(--d-ink) 5%,transparent);text-align:left;font-family:inherit;position:relative}
.agent-demo *{box-sizing:border-box}.agent-demo [hidden]{display:none!important}.demo-top{display:flex;justify-content:space-between;gap:12px;font:9px/1.4 ui-monospace,monospace;letter-spacing:.09em;color:var(--muted)}.demo-live{display:flex;align-items:center;gap:6px;white-space:nowrap}.demo-live i{width:5px;height:5px;border-radius:50%;background:var(--d-accent)}.demo-request{display:flex;align-items:center;gap:12px;margin:25px 0 20px}.demo-you{font:10px ui-monospace,monospace;border:1px solid var(--d-line);padding:6px 9px}.demo-request>strong{font-family:Georgia,serif;font-size:clamp(20px,2vw,28px);font-weight:400;letter-spacing:-.03em;white-space:nowrap}.demo-request-line{height:1px;flex:1;background:var(--d-line)}.demo-agent{display:flex;gap:12px;align-items:center;border:1px solid var(--d-line);padding:12px}.demo-spark{font-size:30px;color:var(--d-accent);line-height:1}.demo-agent strong{display:block;font-size:14px}.demo-agent small{display:block;font-size:10px;line-height:1.5;color:var(--muted)}.demo-state{margin-left:auto;font:9px ui-monospace,monospace;color:var(--d-accent);white-space:nowrap}.demo-branches{display:grid;grid-template-columns:repeat(3,1fr);height:22px;margin:0 16%;position:relative}.demo-branches:before{content:'';position:absolute;top:10px;left:0;right:0;border-top:1px solid var(--d-line)}.demo-branches span{border-left:1px solid var(--d-line);height:12px;align-self:end}.demo-branches span:nth-child(2){border-left:0;position:relative}.demo-branches span:nth-child(2):before{content:'';position:absolute;left:50%;top:-10px;height:22px;border-left:1px solid var(--d-line)}.demo-branches span:last-child{border-left:0;border-right:1px solid var(--d-line)}.demo-lanes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.demo-lane{border:1px solid var(--d-line);padding:12px 10px 10px;min-width:0;position:relative}.demo-lane-icon{font:22px/1 ui-monospace,monospace;color:var(--d-accent);display:block;margin-bottom:12px}.demo-lane>strong{display:block;font-size:12px}.demo-lane-status{font:9px/1.5 ui-monospace,monospace;color:var(--muted);display:block;margin:4px 0 10px}.demo-progress{height:3px;display:block;background:color-mix(in srgb,var(--d-ink) 10%,transparent);overflow:hidden}.demo-progress i{display:block;background:var(--d-accent);height:100%;width:100%;transform-origin:left}.demo-outcome{display:flex;gap:10px;align-items:start;padding:17px 0;min-height:94px}.demo-outcome-icon{font:22px/1.3 Georgia,serif;color:var(--d-accent)}.demo-outcome strong{font-size:13px;line-height:1.5;display:block}.agent-demo .demo-outcome p{font-size:11px;line-height:1.6;color:var(--muted);margin:4px 0 0;max-width:none}.demo-memory{display:flex;align-items:center;gap:12px;border:1px solid var(--d-line);padding:12px}.demo-memory-icon{font-size:28px;color:var(--d-accent);line-height:1}.demo-label{font:8px/1.5 ui-monospace,monospace;letter-spacing:.1em;color:var(--muted);display:block}.demo-memory strong{font-size:11px;line-height:1.6;display:block}.demo-memory small{font-size:9px;color:var(--muted);display:block;line-height:1.6}.demo-memory-check{font-size:20px;margin-left:auto;color:var(--d-accent);visibility:hidden}.demo-question{padding:14px 0 0}.agent-demo .demo-question p{font-family:Georgia,serif;font-size:20px;margin:0 0 10px}.demo-question small{font-size:9px;color:var(--muted);display:block;margin-top:7px}.demo-return{display:flex;gap:9px;padding:15px 0 0}.demo-return>span{font-size:24px;color:var(--d-accent)}.demo-return small{display:block;font:9px/1.6 ui-monospace,monospace;color:var(--muted)}.demo-return strong{display:block;font:18px/1.5 Georgia,serif}.demo-controls{border-top:1px solid var(--d-line);display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:12px}.agent-demo .demo-controls button{border:0;background:none;color:var(--d-ink);font:10px/1.5 ui-monospace,monospace;cursor:pointer;padding:4px 0;min-height:28px}.agent-demo button:focus-visible{outline:2px solid var(--d-accent);outline-offset:4px}.agent-demo button:disabled{opacity:.45;cursor:default}.demo-controls>span{margin-left:auto;font:9px/1 ui-monospace,monospace;color:var(--muted)}.agent-demo figcaption{padding:12px 0 0;margin:0;font-size:9px;color:var(--muted);line-height:1.6;border:0;text-align:left}.demo-static{display:block;margin-top:7px}.agent-demo[data-enhanced] .demo-static{display:none}.agent-demo[data-phase="revision"] .demo-check-lane{border-color:var(--d-accent);background:color-mix(in srgb,var(--d-accent) 7%,var(--d-paper))}.agent-demo[data-phase="question"] .demo-outcome-icon{font-size:0}.agent-demo[data-phase="question"] .demo-outcome-icon:after{content:'?';font-size:23px}.agent-demo[data-phase="record"] .demo-memory,.agent-demo[data-phase="next"] .demo-memory{border-color:var(--d-accent)}.agent-demo[data-phase="record"] .demo-memory-check,.agent-demo[data-phase="next"] .demo-memory-check{visibility:visible}.agent-demo[data-phase="next"] .demo-agent{opacity:.65}
@keyframes demo-work{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.agent-demo[data-phase="work"][data-playing="true"] .demo-progress i{animation:demo-work 1.8s ease-in-out infinite}.demo-lane:nth-child(2) .demo-progress i{animation-delay:.3s!important}.demo-lane:nth-child(3) .demo-progress i{animation-delay:.6s!important}
@media(min-width:901px){.agent-demo{min-height:490px}.agent-demo[data-enhanced]{min-height:565px}}
@media(max-width:700px){.agent-demo{padding:18px;box-shadow:5px 6px 0 color-mix(in srgb,var(--d-ink) 5%,transparent)}.demo-request{margin:20px 0 16px}.demo-request>strong{font-size:23px}.demo-outcome{min-height:90px}.demo-top{font-size:8px}.demo-lanes{gap:7px}.demo-lane{padding:11px 8px}.demo-agent small{font-size:9px}.demo-memory strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){.agent-demo *{animation:none!important;transition:none!important}}

/* Reserve the human-choice space so playback never pushes the page around. */
.agent-demo[data-enhanced] .demo-response{min-height:116px}
.agent-demo .demo-request{margin-top:19px;margin-bottom:14px}
.agent-demo .demo-outcome{min-height:76px;padding-top:14px;padding-bottom:14px}
.agent-demo .demo-lane-icon{margin-bottom:8px}
@keyframes demo-dispatch{0%,100%{opacity:0;transform:translateY(-8px)}35%,70%{opacity:1}90%{opacity:0;transform:translateY(10px)}}
.agent-demo[data-phase="work"][data-playing="true"] .demo-branches span:after{content:'';position:absolute;top:8px;width:5px;height:5px;background:var(--d-accent);animation:demo-dispatch 1.8s linear infinite}
.demo-branches span:nth-child(2):after{left:calc(50% - 2px);animation-delay:.3s!important}.demo-branches span:last-child:after{right:-2px;animation-delay:.6s!important}.demo-branches span:first-child:after{left:-2px}
.agent-demo[data-phase="revision"] .demo-check-lane .demo-lane-icon{font-size:0}.agent-demo[data-phase="revision"] .demo-check-lane .demo-lane-icon:after{content:'!';font-size:22px}

/* The rail stays in place when the second request reuses it. Text never flies in. */
.demo-workflow{display:flex;align-items:center;justify-content:space-between;gap:5px;border-bottom:1px solid var(--d-line);padding:10px 0 8px;font:9px/1.6 ui-monospace,monospace;color:var(--muted)}
.demo-workflow-state{margin-right:auto}.demo-stage{position:relative;color:var(--d-ink)}
.demo-revision{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden;fill:none;stroke:var(--d-accent);stroke-width:1.8;vector-effect:non-scaling-stroke}
.agent-demo[data-phase="revision"] .demo-revision{visibility:visible}
@keyframes demo-revise{to{stroke-dashoffset:24}}
.agent-demo[data-phase="revision"][data-playing="true"] .demo-revision path:first-child{stroke-dasharray:4 4;animation:demo-revise 1.3s linear infinite}
@keyframes demo-reuse{0%,100%{background:transparent;box-shadow:0 0 0 0 transparent}40%,65%{background:color-mix(in srgb,var(--d-accent) 14%,var(--d-paper));box-shadow:0 0 0 3px color-mix(in srgb,var(--d-accent) 14%,transparent)}}
.agent-demo[data-phase="next"][data-playing="true"] .demo-stage{animation:demo-reuse 1.6s ease-in-out 1}
.agent-demo[data-phase="next"] .demo-stage:nth-of-type(4){animation-delay:.4s}.agent-demo[data-phase="next"] .demo-stage:nth-of-type(6){animation-delay:.8s}
.agent-demo[data-phase="next"] .demo-workflow,.agent-demo[data-phase="recall"] .demo-workflow{border-color:var(--d-accent)}
.agent-demo[data-phase="next"] .demo-agent{opacity:1}
.agent-demo[data-phase="recall"] .demo-memory{border-color:var(--d-accent)}.agent-demo[data-phase="recall"] .demo-memory-check{visibility:visible}
.agent-demo[data-phase="next"] .demo-progress i,.agent-demo[data-phase="recall"] .demo-progress i{transform:scaleX(0)}
.demo-transcript{margin-top:10px;border:0!important;padding:0!important;font-size:10px;line-height:1.7}
.demo-transcript summary{cursor:pointer;font:10px/1.7 ui-monospace,monospace;color:var(--muted);padding:4px 0}
.demo-transcript ol{margin:10px 0 0;padding-left:18px}.demo-transcript li{margin:0 0 10px}.demo-transcript strong,.demo-transcript li>span{display:block;font:inherit}
.demo-transcript strong{font-weight:600}.demo-transcript li>span{color:var(--muted)}
.agent-demo .demo-outcome{min-height:110px}
@media(max-width:700px){.agent-demo .demo-outcome{min-height:134px}.demo-workflow{font-size:8px;gap:4px}.demo-workflow-state{margin-right:4px}}
@media(prefers-reduced-motion:reduce){.agent-demo *{animation:none!important;transition:none!important}}
@media(max-width:700px){.agent-demo[data-enhanced] .demo-response{min-height:148px}}
.agent-demo .demo-question p{line-height:1.3}
/* Keep the memory row and explanation slot steady as their text changes. */
.agent-demo .demo-memory strong{min-height:3.2em}
.agent-demo .demo-outcome{min-height:140px}
@media(max-width:380px){.agent-demo .demo-outcome{min-height:160px}}
/* Wide illustrations can use a compact slot; narrow ones reserve wrapped lines. */
.agent-demo{container-type:inline-size}
.demo-workflow{padding-top:6px;padding-bottom:4px}
.demo-transcript{margin-top:4px}.demo-transcript summary{padding:2px 0}
@container(min-width:330px){.agent-demo .demo-outcome{min-height:105px}.agent-demo .demo-memory strong{min-height:1.6em}}
/* Status length must not reflow the agent caption when the next task starts. */
.demo-state{flex:0 0 9ch;text-align:right}
.demo-agent strong{line-height:1.4;min-height:2.8em}
@container(min-width:330px){.demo-agent strong{min-height:1.4em}}

@media(max-width:380px){.agent-demo[data-enhanced] .demo-response{min-height:164px}}

.demo-answer{border-left:2px solid var(--d-accent);padding-left:12px;margin-top:0}.agent-demo .demo-question small{margin:0 0 8px}