/* Third workflow story follows the existing text-and-visual section format. */
.skill-story{grid-template-columns:1fr 1.15fr;gap:64px}.skill-story h2 em{font:italic 1em Georgia,serif}.skill-story .story-copy>p:not(.eyebrow){font-size:15px;line-height:1.65}.skill-story .story-copy .skill-context{font-size:14px}.skill-story code{font-size:.9em}.skill-story .text-link{min-height:44px;margin-top:12px}.skill-example{margin:0;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:32px;min-width:0}.skill-example-top{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:10px;letter-spacing:.07em}.skill-example-label{letter-spacing:0}.skill-example blockquote{font:26px/1.4 Georgia,serif;letter-spacing:-.4px;margin:32px 0;color:var(--ink)}.skill-evidence{display:grid;grid-template-columns:20px 1fr 16px 20px 1fr;align-items:center;gap:12px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.skill-evidence strong{display:block;font-size:12px;font-weight:550}.skill-evidence div>span{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:5px}.skill-plus{color:var(--muted)}.skill-example-result{font-size:13px;line-height:1.65;color:var(--muted);margin:22px 0 0}.skill-example figcaption{font-size:10px;line-height:1.5;color:var(--muted);margin-top:20px;text-align:left}
@media(max-width:1023px){.skill-story{grid-template-columns:1fr;gap:32px}.skill-example{max-width:640px;width:100%}.skill-story .story-copy>p:not(.eyebrow){max-width:550px}}
@media(max-width:480px){.skill-example{padding:24px}.skill-example blockquote{font-size:23px;margin-block:26px}.skill-evidence{grid-template-columns:20px 1fr;gap:16px 12px}.skill-plus{display:none}.skill-story{gap:28px}.skill-story h2{font-size:34px}.skill-story h2 br{display:none}}

/* Compact visual handoff replaces the prompt-heavy illustration. */
.skill-diagram{display:flex;flex-direction:column;align-items:center;padding:28px 36px}.skill-diagram-source{display:flex;align-items:center;justify-content:center;gap:20px;width:100%}.skill-mini-reference{position:relative;width:150px;border-radius:10px;overflow:hidden;transform:rotate(-5deg);border:1px solid var(--line);box-shadow:0 8px 18px color-mix(in srgb,var(--ink) 7%,transparent)}.skill-mini-reference>img{display:block;width:100%;height:auto}.skill-region{position:absolute;left:14%;top:53%;width:42%;height:14%;border:2px solid var(--accent);border-radius:3px}.skill-mini-file{width:150px;background:var(--surface);padding:18px;border:1px solid var(--line);border-radius:10px;transform:rotate(4deg);display:grid;grid-template-columns:18px 1fr;gap:12px 8px}.skill-mini-file strong{font:12px monospace;align-self:center}.skill-note-line{grid-column:1/-1;display:block;height:5px;border-radius:4px;background:var(--line);width:100%}.skill-note-line.short{width:70%}.skill-diagram-path{position:relative;display:flex;flex-direction:column;align-items:center;height:42px;color:var(--muted)}.skill-diagram-path>span{height:24px;border-left:1px dashed var(--muted)}.skill-diagram-path b{font-size:16px;line-height:16px;font-weight:400}.skill-diagram-agent{display:grid;grid-template-columns:32px 1fr;column-gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 20px}.skill-diagram-agent>img{grid-row:1/3;border-radius:8px}.skill-diagram-agent strong{font-size:14px;font-weight:550}.skill-diagram-agent>span{font-size:11px;color:var(--muted);margin-top:3px}.skill-mini-project{width:100%;max-width:340px;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}.skill-project-header{display:flex;align-items:center;gap:5px;padding:10px 12px;border-bottom:1px solid var(--line)}.skill-project-header>span{width:5px;height:5px;border-radius:50%;background:var(--line)}.skill-project-header small{font-size:10px;color:var(--muted);margin-left:auto}.skill-project-body{display:grid;grid-template-columns:60px 1fr;min-height:155px}.skill-project-sidebar{padding:16px 12px;background:var(--paper);display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line)}.skill-project-sidebar i{height:4px;background:var(--line);border-radius:3px}.skill-project-form{padding:18px 26px;display:flex;flex-direction:column;gap:7px}.skill-form-heading{height:7px;width:70%;background:var(--muted);border-radius:3px;margin-bottom:8px}.skill-form-label{height:4px;width:30%;background:var(--line);border-radius:3px}.skill-form-input{height:19px;width:100%;border:1px solid var(--line);border-radius:4px}.skill-form-actions{display:flex;gap:8px;margin-top:5px}.skill-form-actions span:first-child{height:18px;width:60px;background:var(--accent);border-radius:4px}.skill-form-actions span:last-child{height:18px;width:40px;border:1px solid var(--line);border-radius:4px}.skill-diagram figcaption{margin-top:18px;text-align:center;font-size:11px}
@media(max-width:480px){.skill-diagram{padding:24px}.skill-diagram-source{gap:14px}.skill-mini-reference,.skill-mini-file{width:125px}.skill-mini-file{padding:14px}.skill-diagram-agent{padding:12px 16px}.skill-project-form{padding:18px}}

/* Reference sketch shares the destination's visual language. */
.skill-reference-sketch{background:var(--surface);transform:rotate(-6deg);overflow:visible}.skill-reference-chrome{display:flex;gap:4px;padding:9px 10px;border-bottom:1px solid var(--line)}.skill-reference-chrome i{width:4px;height:4px;border-radius:50%;background:var(--line)}.skill-reference-content{padding:14px 13px 16px}.skill-reference-title,.skill-reference-subtitle{display:block;height:5px;width:65%;background:var(--muted);border-radius:3px}.skill-reference-subtitle{height:3px;width:85%;background:var(--line);margin-top:7px}.skill-reference-cards{display:flex;gap:7px;margin:12px 0}.skill-reference-cards>span{width:50%;height:23px;border:1px solid var(--line);background:var(--soft);border-radius:4px}.skill-reference-actions{position:relative;display:flex;gap:6px;align-items:center;padding:6px;border:1.5px solid var(--accent);border-radius:5px;margin-inline:-5px}.skill-reference-actions>span:first-child{height:13px;width:46px;background:var(--accent);border-radius:3px}.skill-reference-actions>span:nth-child(2){height:13px;width:30px;border:1px solid var(--line);border-radius:3px}.skill-reference-marker{position:absolute;right:-7px;top:-8px;background:var(--accent);color:var(--on-accent);width:16px;height:16px;display:grid;place-items:center;border-radius:4px;font:9px var(--font)}

.skill-animation-toggle{font:11px var(--font);color:var(--muted);background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:8px 12px;margin-bottom:-12px}.skill-diagram.animation-paused *{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.skill-animation-toggle{display:none}}

/* Agent-led context exchange; a stationary file is read, not consumed. */
.agent-workflow{padding:32px 24px}.agent-context-layout{position:relative;display:grid;width:100%;max-width:490px;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);grid-template-rows:94px 44px 76px 44px auto;align-items:center}.agent-notes{grid-column:3;grid-row:1;justify-self:center;width:155px;display:grid;grid-template-columns:20px 1fr;gap:12px 8px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;animation:notes-read 14s ease-in-out infinite}.agent-notes strong{font:12px monospace;align-self:center}.agent-note-line{grid-column:1/-1;height:4px;background:var(--line);border-radius:3px}.agent-note-line.short{width:70%}.agent-context-wire{grid-column:3;grid-row:2;height:100%;width:1px;justify-self:center;border-left:1px dashed var(--muted);position:relative}.agent-node{grid-column:1;grid-row:3;display:flex;gap:10px;align-items:center;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;animation:agent-active 14s ease-in-out infinite}.agent-symbol{display:grid;place-items:center;width:29px;height:29px;background:var(--soft);color:var(--accent);border-radius:8px;font-size:23px;flex-shrink:0}.agent-node strong{font-size:13px;font-weight:550;white-space:nowrap}.agent-node small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin-top:4px}.agent-skill{grid-column:3;grid-row:3;display:flex;gap:10px;align-items:center;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;animation:skill-active 14s ease-in-out infinite}.agent-skill img{border-radius:7px}.agent-skill strong{font-size:12px;font-weight:550}.agent-skill-wire{grid-column:2;grid-row:3;width:100%;height:1px;border-top:1px dashed var(--muted);position:relative}.agent-output-wire{grid-column:1;grid-row:4;height:100%;width:1px;justify-self:center;border-left:1px dashed var(--muted);position:relative}.agent-context-layout .skill-mini-project{grid-column:1/-1;grid-row:5;max-width:none;animation:agent-design-out 14s ease-in-out infinite}.agent-context-layout .skill-project-form>*{animation:agent-design-detail 14s ease-in-out infinite}.agent-context-layout .skill-project-form>.skill-form-actions{animation-delay:.15s}.agent-context-layout .skill-project-body{grid-template-columns:65px 1fr}.agent-context-layout .skill-project-form{padding:20px 32px}.agent-context-layout .skill-form-heading{width:55%}.agent-context-layout .skill-form-input{max-width:240px}.agent-context-layout .request-dot,.agent-context-layout .context-dot,.agent-output-wire>span{position:absolute;display:block;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0;box-shadow:0 0 8px color-mix(in srgb,var(--accent) 35%,transparent)}.agent-skill-wire>span{top:-3px;left:0}.agent-context-wire>span,.agent-output-wire>span{left:-3px;top:0}.agent-skill-wire .request-dot{animation:agent-request 14s ease-in-out infinite}.agent-context-wire .request-dot{animation:notes-request 14s ease-in-out infinite}.agent-context-wire .context-dot{animation:notes-context 14s ease-in-out infinite}.agent-skill-wire .context-dot{animation:agent-context 14s ease-in-out infinite}.agent-output-wire>span{animation:agent-output 14s ease-in-out infinite}
@keyframes agent-request{0%,8%{opacity:0;left:0}10%{opacity:1;left:0}21%{opacity:1;left:100%}23%,100%{opacity:0;left:100%}}
@keyframes notes-request{0%,23%{opacity:0;top:100%}25%{opacity:1;top:100%}34%{opacity:1;top:0}36%,100%{opacity:0;top:0}}
@keyframes notes-context{0%,39%{opacity:0;top:0}41%{opacity:1;top:0}50%{opacity:1;top:100%}52%,100%{opacity:0;top:100%}}
@keyframes agent-context{0%,52%{opacity:0;left:100%}54%{opacity:1;left:100%}65%{opacity:1;left:0}67%,100%{opacity:0;left:0}}
@keyframes agent-output{0%,66%{opacity:0;top:0}68%{opacity:1;top:0}74%{opacity:1;top:100%}76%,100%{opacity:0;top:100%}}
@keyframes notes-read{0%,33%,47%,100%{border-color:var(--line);box-shadow:none}37%,41%{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}}
@keyframes skill-active{0%,19%,62%,100%{border-color:var(--line)}23%,54%{border-color:var(--accent)}}
@keyframes agent-active{0%,7%,23%,60%,86%,100%{border-color:var(--line);box-shadow:none}10%,18%,66%,78%{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}}
@keyframes agent-design-out{0%,70%{opacity:.25;transform:translateY(-5px)}79%,91%{opacity:1;transform:translateY(0)}100%{opacity:.25;transform:translateY(-5px)}}
@keyframes agent-design-detail{0%,72%{opacity:0;transform:translateY(-3px)}82%,91%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@media(max-width:480px){.agent-workflow{padding:24px 16px}.agent-context-layout{grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr)}.agent-node,.agent-skill{padding:12px 9px;gap:7px}.agent-symbol{width:24px;height:24px;font-size:20px}.agent-node strong{font-size:12px}.agent-node small{font-size:9px}.agent-skill img{width:24px;height:24px}.agent-skill strong{font-size:11px}.agent-notes{width:130px;padding:14px}.agent-context-layout .skill-project-form{padding:20px}}
@media(prefers-reduced-motion:reduce){.agent-context-layout *{animation:none!important}.agent-context-layout .skill-mini-project,.agent-context-layout .skill-project-form>*{opacity:1;transform:none}.agent-context-layout .request-dot,.agent-context-layout .context-dot,.agent-output-wire>span{display:none}}

/* Shared component metrics keep icons, baselines, and connector ports aligned. */
.agent-context-layout{grid-template-rows:100px 36px 76px 36px auto}.agent-node,.agent-skill{height:76px;padding:16px;gap:12px;min-width:0;align-self:stretch}.agent-node>div,.agent-skill>div{min-width:0}.agent-node strong,.agent-skill strong{display:block;font:550 12px/1.25 var(--font);letter-spacing:-.15px;white-space:nowrap}.agent-node small,.agent-skill small{display:block;font:10px/1.4 var(--font);color:var(--muted);margin-top:5px;white-space:nowrap}.agent-symbol,.agent-skill>img{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:7px}.agent-symbol svg{display:block}.agent-notes{width:164px;padding:16px;gap:14px 10px;align-items:center}.agent-notes>img{display:block;width:18px;height:18px;opacity:.8}.agent-notes strong{font:12px/1.25 monospace;letter-spacing:0}.agent-note-line{height:4px}.agent-notes .short{margin-top:-5px}.agent-context-layout .skill-project-header{height:34px;padding:0 14px;gap:5px}.agent-context-layout .skill-project-header small{font:10px/1 var(--font)}.agent-context-layout .skill-project-body{grid-template-columns:62px 1fr;min-height:178px}.agent-context-layout .skill-project-sidebar{padding:22px 14px;gap:14px}.agent-context-layout .skill-project-form{padding:22px 26px;gap:8px}.agent-context-layout .skill-form-heading{height:6px;margin-bottom:8px;width:62%}.agent-context-layout .skill-form-label{height:4px;width:30%}.agent-context-layout .skill-form-input{height:22px;max-width:none}.agent-context-layout .skill-form-actions{margin-top:6px;gap:8px}.agent-context-layout .skill-form-actions>span{height:20px}.agent-context-layout .skill-form-actions>span:first-child{width:60px}.agent-workflow figcaption{font:11px/1.5 var(--font);margin-top:22px;letter-spacing:0}
[data-theme="dark"] .agent-notes>img{filter:brightness(0) invert(1)}
@media(max-width:480px){.agent-context-layout{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);grid-template-rows:94px 32px 72px 32px auto}.agent-node,.agent-skill{height:72px;padding:12px 10px;gap:8px}.agent-symbol,.agent-skill>img{width:24px;height:24px;flex-basis:24px}.agent-node strong,.agent-skill strong{font-size:11px}.agent-node small,.agent-skill small{font-size:9px;white-space:normal}.agent-notes{width:130px;padding:14px;gap:12px 8px}.agent-context-layout .skill-project-form{padding:20px}.agent-context-layout .skill-project-body{grid-template-columns:50px 1fr}.agent-context-layout .skill-project-sidebar{padding:20px 10px}}
@media(max-width:360px){.agent-node,.agent-skill{padding:10px 7px;gap:6px}.agent-node strong,.agent-skill strong{font-size:10px}.agent-symbol,.agent-skill>img{width:21px;height:21px;flex-basis:21px}.agent-node small,.agent-skill small{font-size:8px}.agent-notes{width:112px}}

/* Optical padding and fixed status slots prevent movement between phases. */
.agent-node,.agent-skill{padding-inline:18px;gap:10px}.agent-node>div,.agent-skill>div{flex:1}.agent-node strong,.agent-skill strong{font-size:12px}.skill-type{display:inline-block;font:9px/1 var(--font);font-weight:400;color:var(--muted);margin-left:3px;vertical-align:1px}.agent-node small,.agent-skill small{min-height:14px;font-size:10px;line-height:1.4;white-space:nowrap;letter-spacing:-.15px}
@media(max-width:480px){.agent-node,.agent-skill{padding-inline:12px;gap:8px}.agent-node strong,.agent-skill strong{font-size:11px}.agent-node small,.agent-skill small{font-size:9px}.skill-type{font-size:8px;margin-left:2px}}
@media(max-width:360px){.agent-node,.agent-skill{padding-inline:9px;gap:6px}.agent-node strong,.agent-skill strong{font-size:10px}.agent-node small,.agent-skill small{font-size:8px}.skill-type{display:block;margin:3px 0 0}.agent-skill small{margin-top:3px}}

/* Separate request and return lanes clarify the two-way exchanges. */
.agent-skill-wire{height:16px;border:0}.agent-skill-wire::before,.agent-skill-wire::after{content:"";position:absolute;left:0;width:100%;border-top:1px dashed var(--muted);opacity:.45}.agent-skill-wire::before{top:3px}.agent-skill-wire::after{bottom:3px}.agent-skill-wire .request-dot{top:0}.agent-skill-wire .context-dot{top:10px}.agent-context-wire{width:16px;border:0}.agent-context-wire::before,.agent-context-wire::after{content:"";position:absolute;top:0;height:100%;border-left:1px dashed var(--muted);opacity:.45}.agent-context-wire::before{left:3px}.agent-context-wire::after{right:3px}.agent-context-wire .request-dot{left:0}.agent-context-wire .context-dot{left:10px}.agent-context-layout .request-dot,.agent-context-layout .context-dot,.agent-output-wire>span{width:5px;height:5px;box-shadow:none}.agent-output-wire>span{left:-3px}.agent-notes,.agent-node,.agent-skill{box-shadow:none!important}.agent-output-wire{opacity:.55}

/* Continuous travel avoids stopping at the middle of each connector. */
.agent-skill-wire .request-dot,.agent-skill-wire .context-dot,.agent-context-wire .request-dot,.agent-context-wire .context-dot,.agent-output-wire>span{animation-timing-function:linear}.agent-context-layout .skill-mini-project,.agent-context-layout .skill-project-form>*{animation-timing-function:cubic-bezier(.22,1,.36,1)}
@keyframes agent-request{0%,8%{opacity:0;left:0}11%{opacity:1;left:23%}18%{opacity:1;left:77%}21%,100%{opacity:0;left:100%}}
@keyframes notes-request{0%,23%{opacity:0;top:100%}26%{opacity:1;top:73%}31%{opacity:1;top:27%}34%,100%{opacity:0;top:0}}
@keyframes notes-context{0%,39%{opacity:0;top:0}42%{opacity:1;top:27%}47%{opacity:1;top:73%}50%,100%{opacity:0;top:100%}}
@keyframes agent-context{0%,52%{opacity:0;left:100%}55%{opacity:1;left:77%}62%{opacity:1;left:23%}65%,100%{opacity:0;left:0}}
@keyframes agent-output{0%,66%{opacity:0;top:0}68%{opacity:1;top:25%}72%{opacity:1;top:75%}74%,100%{opacity:0;top:100%}}
@keyframes agent-design-out{0%,71%{opacity:.3;transform:translateY(0)}82%,92%{opacity:1;transform:translateY(0)}100%{opacity:.3;transform:translateY(0)}}
@keyframes agent-design-detail{0%,72%{opacity:0;transform:translateY(3px)}84%,92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(3px)}}

.skill-animation-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;margin:12px 0 -12px;border-radius:50%;text-decoration:none}.skill-animation-toggle:hover{background:var(--surface);color:var(--ink)}.skill-play-icon{display:none}.animation-paused .skill-play-icon{display:block}.animation-paused .skill-pause-icon{display:none}@media(prefers-reduced-motion:reduce){.skill-animation-toggle{display:none}}

.agent-workflow{position:relative;padding-bottom:64px}.agent-workflow .skill-animation-toggle{position:absolute;right:12px;bottom:12px;margin:0}@media(max-width:480px){.agent-workflow{padding-bottom:64px}}

/* Single pack icon and a reserved corner beside the output window. */
.agent-workflow{padding-bottom:32px}.agent-context-layout .skill-mini-project{width:calc(100% - 48px);justify-self:start}.agent-workflow .skill-animation-toggle{right:12px;bottom:32px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--muted);transition:background 160ms ease,color 160ms ease,border-color 160ms ease}.agent-workflow .skill-animation-toggle:hover{background:var(--surface);border-color:var(--accent);color:var(--ink)}.skill-control-icon{display:block;width:20px;height:20px;background:currentColor;mask:url('/assets/pause.svg') center/contain no-repeat;-webkit-mask:url('/assets/pause.svg') center/contain no-repeat}.animation-paused .skill-control-icon{mask-image:url('/assets/play.svg');-webkit-mask-image:url('/assets/play.svg')}.agent-symbol img{display:block;opacity:.8}[data-theme="dark"] .agent-symbol img{filter:brightness(0) invert(1)}
@media(max-width:480px){.agent-workflow{padding-bottom:24px}.agent-workflow .skill-animation-toggle{right:8px;bottom:24px}.agent-context-layout .skill-mini-project{width:calc(100% - 44px)}}
@media(prefers-reduced-motion:reduce){.agent-workflow .skill-animation-toggle{display:none;transition:none}.agent-context-layout .skill-mini-project{width:100%}}

.agent-workflow{margin-right:52px;width:calc(100% - 52px);padding-bottom:32px}.agent-context-layout .skill-mini-project{width:100%}.agent-workflow .skill-animation-toggle{right:-50px;bottom:0}
@media(max-width:480px){.agent-workflow{margin-right:48px;width:calc(100% - 48px);padding-bottom:24px}.agent-workflow .skill-animation-toggle{right:-46px;bottom:0}.agent-context-layout .skill-mini-project{width:100%}}
@media(prefers-reduced-motion:reduce){.agent-workflow{margin-right:0;width:100%}}
@media(max-width:640px){.agent-workflow{width:100%;margin-right:0;margin-bottom:52px}.agent-workflow .skill-animation-toggle{right:0;bottom:-48px}}

.agent-workflow{width:100%;margin-right:0;margin-bottom:52px}.agent-workflow .skill-animation-toggle{right:0;bottom:-48px;background:transparent;border-color:var(--line)}.agent-workflow .skill-animation-toggle:hover{background:var(--surface);border-color:var(--accent);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.agent-workflow{margin-bottom:0}}
.agent-workflow .skill-animation-toggle{min-height:40px;height:40px}

.agent-workflow:not(.is-playing) .agent-context-layout *{animation:none!important;opacity:1;transform:none}.agent-workflow:not(.is-playing) .request-dot,.agent-workflow:not(.is-playing) .context-dot,.agent-workflow:not(.is-playing) .agent-output-wire>span{display:none}.agent-workflow:not(.is-in-frame) .skill-animation-toggle{visibility:hidden;pointer-events:none}

.agent-workflow .skill-animation-toggle{left:50%;right:auto;transform:translateX(-50%)}

/* Match the surrounding illustration frames and keep the full skill name legible. */
.agent-workflow{background:var(--preview-panel);border-color:var(--line);border-radius:16px}.agent-skill strong{color:var(--ink);font-weight:550}