.examples-section .examples-heading{max-width:54rem;margin-bottom:var(--space-7)}
.examples-section .examples-heading .eyebrow{color:var(--accent-orange);margin-bottom:var(--space-4)}
.examples-section .examples-heading h2{font-weight:500;font-size:clamp(2.5rem,4.8vw,4.5rem);letter-spacing:-.045em;line-height:1.08}
.examples-section .intro{font-size:var(--type-lead);color:var(--muted);margin-top:var(--space-5);max-width:53ch}
.examples-section .job-label{font-size:.6875rem;font-weight:600;letter-spacing:.065em;text-transform:uppercase;color:var(--accent-orange);margin-bottom:var(--space-3)}
.examples-section h3{font-size:clamp(1.5rem,2.3vw,2rem);font-weight:500;line-height:1.2;letter-spacing:-.025em;text-wrap:pretty}
.examples-section .problem{color:var(--muted);margin-top:var(--space-4);font-size:.9375rem;max-width:40ch}
.examples-section .attribution{font-size:.8125rem;color:var(--muted);border-top:1px solid var(--line);margin-top:var(--space-7);padding-top:var(--space-5);max-width:90ch}
.examples-section .workflow{min-width:0;text-align:center;width:100%;max-width:40rem;margin-inline:auto}
.examples-section .inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.examples-section .input-node{display:grid;justify-items:center;align-content:center;gap:var(--space-2);background:var(--blue-paper);border:1px solid var(--blue-rule);border-radius:var(--radius-control);padding:var(--space-3) var(--space-1);font-size:.75rem;line-height:1.4;min-height:4.5rem}
.examples-section .line-icon{inline-size:1.25rem;block-size:1.25rem;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.examples-section .merge-lines,.examples-section .branch-lines{display:block;width:100%;height:2.75rem;overflow:visible;fill:none;stroke:var(--diagram-line);stroke-width:1.5}
.examples-section .branch-lines{height:2rem}
.examples-section .agent-node{position:relative;display:grid;justify-items:center;align-content:center;gap:var(--space-1);background:var(--ink);color:var(--white);border:1px solid var(--ink);border-radius:var(--radius-panel);max-width:12rem;min-height:4.75rem;padding:var(--space-3) var(--space-4);margin-inline:auto}
.examples-section .agent-label{display:flex;align-items:center;gap:var(--space-2);color:var(--navy-secondary);font-size:.6875rem}
.examples-section .agent-label svg{width:1rem;height:1rem;fill:none;stroke:#b6fff0;stroke-width:1.3}
.examples-section .agent-node>strong{font-size:.9375rem;font-weight:500}
.examples-section .outputs{display:flex;justify-content:center;gap:var(--space-3)}
.examples-section .output-node{min-width:0;display:grid;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--alert-paper);border:1px solid var(--knowledge-rule);border-radius:var(--radius-control);width:100%;max-width:16rem}
.examples-section .output-node>strong{font-size:.8125rem;font-weight:600;color:var(--knowledge-ink)}
.examples-section .output-node>span{font-size:.6875rem;color:var(--muted);line-height:1.5}
.examples-section .output-node.resolved{background:var(--green-paper);border-color:var(--green-rule)}
.examples-section .resolved>strong{color:var(--green)}
.examples-section .workflow figcaption{font-size:.625rem;color:var(--muted);line-height:1.5;margin-top:var(--space-3);max-width:38ch;margin-inline:auto}
.examples-section .result-proof{border-inline-start:1px solid var(--blue-rule);padding-inline-start:var(--space-5)}
.examples-section .metric-kicker{font-size:.625rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:var(--muted);margin-bottom:var(--space-3)}
.examples-section .metric{font-size:clamp(1.5rem,2.1vw,2.25rem);line-height:1.15;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}
.examples-section .metric-unit{margin-top:var(--space-2);font-size:.875rem;color:var(--muted)}
.examples-section .source-link{display:inline-block;font-size:.75rem;color:var(--accent);margin-top:var(--space-4);text-underline-offset:.25em;min-height:24px}
.examples-section .metric-context{font-size:.75rem;line-height:1.5;color:var(--muted);margin-top:var(--space-3);max-width:28ch}
.examples-section .walk-layout{display:grid;grid-template-columns:minmax(15rem,.85fr) minmax(0,2.4fr);gap:var(--space-6);align-items:start}
.examples-section .example-choices{display:none;gap:var(--space-2)}
.examples-section.examples-enhanced .example-choices{display:grid}
.examples-section .example-choice{position:relative;display:flex;align-items:center;gap:var(--space-3);text-align:left;min-height:4.75rem;padding:var(--space-4);background:transparent;border:1px solid var(--blue-rule);border-radius:var(--radius-panel);color:var(--ink);font:inherit;cursor:pointer;min-width:0;width:100%}
.examples-section .example-choice>.line-icon{flex:0 0 1.25rem;color:var(--ink);stroke:currentColor}
.examples-section .choice-text{display:block;min-width:0;flex:1}
.examples-section .choice-text strong{font-size:1rem;font-weight:600;line-height:1.35;display:block}
.examples-section .choice-text small{font-size:.6875rem;color:var(--muted);display:block;margin-top:var(--space-1);line-height:1.5}
.examples-section .choice-arrow{font-size:.875rem}
.examples-section .example-choice[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.examples-section .example-choice[aria-pressed=true] .line-icon{color:#b6fff0}
.examples-section .example-choice[aria-pressed=true] small{color:var(--navy-secondary)}
.examples-section .examples-motion{display:none;align-items:center;justify-content:center;min-height:44px;padding:var(--space-2);background:transparent;border:0;color:var(--muted);font:inherit;font-size:.8125rem;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.examples-section.examples-motion-ready .examples-motion{display:flex}
.examples-section .walk-stage{display:grid;min-width:0}
.examples-section .walk-panel{grid-area:1/1;background:var(--paper);border:1px solid var(--blue-rule);border-radius:var(--radius-feature);padding:var(--space-6);margin:0;align-self:stretch}
/* Share the reset layer so this specific override wins its important [hidden] rule.
   Invisible panels reserve the tallest example's space without entering focus order. */
@layer reset {
 .examples-section.examples-enhanced .walk-panel[hidden]{display:block !important;visibility:hidden;pointer-events:none}
 html[data-canvas-edit] .examples-section .walk-panel[hidden]{visibility:visible;pointer-events:auto}
 @media print {.examples-section.examples-enhanced .walk-panel[hidden]{visibility:visible}}
}
.examples-section .walk-content{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);align-items:center;gap:var(--space-6);margin-top:var(--space-6)}
.examples-section .walk-panel .problem{max-width:62ch}
.examples-section .walk-explainer{border-top:1px solid var(--line);margin-top:var(--space-5);padding-top:var(--space-4);font-size:.875rem;color:var(--muted)}
.examples-section:not(.examples-enhanced) .walk-stage{display:block;grid-column:1/-1}
.examples-section:not(.examples-enhanced) .walk-panel+.walk-panel{margin-top:var(--space-6)}
@media(hover:hover) and (pointer:fine){.examples-section .example-choice:hover:not([aria-pressed=true]){background:var(--paper)}
}
@media(max-width:64rem){.examples-section .walk-layout{grid-template-columns:minmax(12rem,.8fr) minmax(0,2fr);gap:var(--space-5)}
.examples-section .example-choice{padding:var(--space-3);gap:var(--space-2)}
.examples-section .choice-arrow{display:none}
.examples-section .choice-text strong{font-size:.875rem}
.examples-section .choice-text small{font-size:.625rem}
.examples-section .walk-content{grid-template-columns:1fr;gap:var(--space-5)}
.examples-section .walk-panel .result-proof{border:0;border-top:1px solid var(--line);padding:var(--space-4) 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-4);align-items:start}
.examples-section .walk-panel .metric-kicker,.examples-section .walk-panel .metric,.examples-section .walk-panel .metric-unit{grid-column:1}
.examples-section .walk-panel .metric-context{grid-column:2;grid-row:1/3;margin-top:0}
.examples-section .walk-panel .source-link{grid-column:2;grid-row:3;margin-top:var(--space-2)}
}
@media(max-width:40rem){.examples-section .examples-heading{margin-bottom:var(--space-6)}
.examples-section .examples-heading h2{font-size:clamp(2.25rem,9vw,3.5rem)}
.examples-section .intro{font-size:1rem}
.examples-section .walk-layout{grid-template-columns:1fr;gap:var(--space-5)}
.examples-section .example-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.examples-section .example-choice{min-height:44px;padding:var(--space-3);border-radius:var(--radius-control)}
.examples-section .choice-text small{display:none}
.examples-section .choice-text strong{font-size:.8125rem}
.examples-section .example-choice>.line-icon{flex-basis:1rem;width:1rem;height:1rem}
.examples-section .walk-panel{padding:var(--space-4)}
.examples-section .walk-content{display:block}
.examples-section .walk-panel .result-proof{display:block;border:0;border-top:1px solid var(--line);padding:var(--space-5) 0 0;margin-top:var(--space-5)}
.examples-section .metric{font-size:1.875rem}
.examples-section .metric-context,.examples-section .walk-panel .metric-context{margin-top:var(--space-3)}
.examples-section .source-link,.examples-section .walk-panel .source-link{min-height:32px;margin-top:var(--space-3)}
.examples-section .input-node{font-size:.6875rem}
.examples-section .workflow figcaption{font-size:.6875rem}
.examples-section .outputs{gap:var(--space-2)}
.examples-section .outputs.two .output-node{padding-inline:var(--space-2)}
.examples-section .output-node>strong{font-size:.75rem}
.examples-section .attribution{font-size:.75rem}
}
@media print{
.examples-section .example-choices{display:none !important}
.examples-section .walk-stage{display:block}
.examples-section .walk-panel+.walk-panel{margin-top:var(--space-6)}
}

/* Integrate the selected List into the site's explanatory diagram language. */
.examples-section {padding-block:var(--space-9);background:var(--paper)}
.examples-section .examples-heading h2 {font-weight:500;font-size:var(--type-section);line-height:1.14;letter-spacing:-.035em}
.examples-section .section-heading {gap:0}
@media(min-width:64rem) {.examples-section .examples-heading .intro {grid-column:2}}
.examples-section .walk-panel h3 {font-size:clamp(1.5rem,2.3vw,2rem);font-weight:500;line-height:1.2;letter-spacing:-.025em}
.examples-section .workflow {background:#081f35;color:#f4f9ff;border-radius:var(--radius-panel);padding:var(--space-5)}
.examples-section .input-node {background:#13334f;border-color:#496d85;color:#f4f9ff}
.examples-section .workflow .line-icon {stroke:#7fd5ff}
.examples-section .agent-node {background:#102d41;border-color:#79c8c2;min-height:5rem}
.examples-section .agent-content {display:grid;justify-items:center;gap:var(--space-1)}
.examples-section .agent-label {color:#bed0df}
.examples-section .agent-content > strong {font-size:.9375rem;font-weight:500}
.examples-section .merge-lines,.examples-section .branch-lines {stroke:#6696ad}
.examples-section .output-node {background:#302f34;border-color:#a18068}
.examples-section .output-node > strong {color:#ffd0a7}
.examples-section .output-node > span {color:#bed0df}
.examples-section .output-node.resolved {background:#123e43;border-color:#69bca5}
.examples-section .resolved > strong {color:#b6fff0}
.examples-section .workflow figcaption {color:#bed0df}
.examples-section .workflow-reception {position:absolute;inset:-2px;border:2px solid #b6fff0;border-radius:inherit;opacity:0;pointer-events:none}
.examples-section .workflow-processing {display:flex;gap:7px;align-items:center;justify-content:center;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);border:1px solid #69bca5;border-radius:999px;padding:10px 14px;opacity:0}
.examples-section .workflow-processing > span {width:5px;height:5px;border-radius:50%;background:#b6fff0}
.examples-section .sequence-packet {stroke:none;opacity:0}
.examples-section .sequence-ready:not(.explanation-still) .output-node {opacity:0}
.examples-section .explanation-still :is(.output-node,.agent-content,.branch-lines path) {opacity:1 !important}
.examples-section .explanation-still :is(.sequence-packet,.workflow-processing,.workflow-reception) {display:none !important}
html[data-canvas-edit] .examples-section .walk-stage {display:block}
html[data-canvas-edit] .examples-section .examples-motion {display:none}
html[data-canvas-edit] .examples-section .walk-panel + .walk-panel {margin-top:var(--space-5)}
@media(max-width:40rem) {.examples-section{padding-block:var(--space-8)}.examples-section .workflow{padding:var(--space-3)}.examples-section .examples-heading .intro{grid-column:auto}}
@media(prefers-reduced-motion:reduce) {
 .examples-section.examples-motion-ready .examples-motion {display:none}
 .examples-section :is(.output-node,.agent-content,.branch-lines path) {opacity:1 !important}
 .examples-section :is(.sequence-packet,.workflow-processing,.workflow-reception) {display:none !important}
}
@media print {
 .examples-section :is(.output-node,.agent-content,.branch-lines path) {opacity:1 !important}
 .examples-section :is(.sequence-packet,.workflow-processing,.workflow-reception) {display:none !important}
}