@layer components{.agent-workflow-section{--agent-workflow-accent:oklch(67.242% .13084 38.756);--agent-workflow-accent-hover:oklch(72.2957% .119152 38.43);--agent-terminal-border:oklch(20.4627% 0 0);--agent-terminal-frame:oklch(11.4918% 0 0);--agent-terminal-surface:oklch(13.4409% 0 0);--agent-terminal-divider:oklch(25.6153% 0 0)}.agent-workflow-stage{isolation:isolate;min-width:0;padding-block:0;position:relative}.agent-workflow-terminal-frame{background:var(--agent-terminal-frame);border-radius:16px;height:37.5rem;position:relative;overflow:hidden;box-shadow:0 28px 72px oklch(0% 0 0/.45)}.agent-workflow-terminal-frame:before{z-index:2;border:1px solid var(--agent-terminal-border);border-radius:inherit;content:"";pointer-events:none;position:absolute;inset:0}.agent-workflow-terminal{z-index:1;background:var(--agent-terminal-surface);height:100%;font-family:var(--font-mono);font-variant-ligatures:none;letter-spacing:-.025em;border-radius:15px;grid-template-rows:auto minmax(0,1fr) 28px auto;font-size:13px;line-height:1.5;display:grid;position:relative;overflow:hidden}.agent-terminal-header{flex:none;align-items:flex-start;gap:10px;padding:12px 12px 0;display:flex}.agent-terminal-header>div{flex-direction:column;justify-content:center;gap:1px;padding-block:4px;line-height:19.5px;display:flex}.agent-terminal-scroll{scrollbar-width:none;touch-action:none;min-height:0;overflow:hidden}.agent-terminal-scroll[data-scrolled=true]{-webkit-mask-image:linear-gradient(oklch(0% 0 0/0),oklch(0% 0 0) 24px);mask-image:linear-gradient(oklch(0% 0 0/0),oklch(0% 0 0) 24px)}.agent-terminal-scroll::-webkit-scrollbar{display:none}.agent-terminal-prompt{color:oklch(100% 0 0/.9);white-space:nowrap;background:oklch(100% 0 0/.055);grid-template-columns:1em minmax(0,1fr);align-items:start;gap:6px;margin-inline:12px;padding-block:8px;display:grid;overflow:hidden}.agent-terminal-followup-prompt{margin-inline:0}.agent-workflow-transcript{padding:10px 12px}.agent-terminal-row{white-space:nowrap;grid-template-columns:1em minmax(0,1fr);align-items:start;gap:6px;max-width:calc(100% - 13rem);min-height:19.5px;line-height:19.5px;display:grid;overflow:hidden}.agent-terminal-output{flex-direction:column;gap:8px;min-width:0;display:flex}.agent-terminal-marker{color:oklch(100% 0 0/.38);justify-content:center;align-items:center;width:1em;height:19.5px;display:flex}.agent-terminal-dot{background:currentColor;border-radius:999px;width:6px;height:6px;display:block}.agent-terminal-result-mark{font-size:13px;line-height:1;display:block;transform:translateY(-1.5px)}.agent-terminal-activity{height:28px;color:var(--agent-workflow-accent);flex:none;align-items:center;gap:6px;padding-inline:12px;display:flex}.agent-terminal-activity-icon,.agent-terminal-cooked-icon{flex:none;width:14px;height:14px}.agent-terminal-composer{flex-direction:column;flex:none;gap:6px;padding:0 6px 8px;display:flex}.agent-terminal-input{border-block:1px solid var(--agent-terminal-divider);color:oklch(100% 0 0/.88);white-space:nowrap;align-items:center;gap:6px;min-width:0;padding:8px 4px;display:flex}.agent-terminal-input>:nth-child(2){text-overflow:ellipsis;overflow:hidden}.agent-terminal-typing-prompt{white-space:nowrap;flex:none;width:0;min-width:0;display:inline-block;overflow:hidden}.agent-terminal-initial-typing{animation-name:agent-terminal-type-in;animation-play-state:paused;animation-fill-mode:forwards}.agent-terminal-initial-typing[data-typing=true]{animation-play-state:running}.agent-terminal-followup-typing{animation-name:agent-terminal-type-followup;animation-play-state:paused;animation-fill-mode:both}.agent-workflow-stage[data-playing=true] .agent-terminal-followup-typing{animation-play-state:running}.agent-terminal-cursor{background:oklch(100% 0 0/.6);flex:none;width:7px;height:1.05em;display:inline-block}.agent-terminal-footer{color:oklch(100% 0 0/.27);white-space:nowrap;align-items:center;gap:6px;min-width:0;padding:2px 4px;display:flex}.agent-terminal-vignette-right,.agent-terminal-vignette-bottom{z-index:3;pointer-events:none;position:absolute}.agent-terminal-vignette-right{inset-block:0;background:linear-gradient(270deg,oklch(0% 0 0/.88) 0%,oklch(0% 0 0/.62) 20%,oklch(0% 0 0/0) 100%);border-radius:0 16px 16px 0;width:40%;right:0}.agent-terminal-vignette-bottom{inset-inline:0;background:linear-gradient(oklch(0% 0 0/0) 0%,oklch(0% 0 0/.6) 80%,oklch(0% 0 0/.86) 100%);border-radius:0 0 16px 16px;height:40%;bottom:0}.agent-workflow-phone{--agent-workflow-label-scale:.92;z-index:4;width:clamp(14rem,24vw,17rem);position:absolute;bottom:0;right:0;container-type:inline-size}.agent-workflow-phone>.device-name-pill{bottom:calc(100% + 4.35cqw)}.agent-touch-layer{z-index:4;pointer-events:none;border-radius:15.174%/6.979%;width:88.546%;height:96.256%;position:absolute;top:1.872%;left:5.727%;overflow:hidden}.agent-touch-cursor{z-index:3;opacity:0;pointer-events:none;background:oklch(100% 0 0/.45);border:1.25px solid oklch(0% 0 0/.55);border-radius:999px;width:1.5rem;height:1.5rem;animation-timing-function:linear;animation-fill-mode:both;position:absolute;transform:translate(-50%,-50%)scale(1);box-shadow:0 1px 2px oklch(0% 0 0/.45)}.agent-touch-tap{animation-name:agent-touch-tap;animation-duration:.9s}.agent-touch-long-press{animation-name:agent-touch-long-press;animation-duration:1.1s}@media (width<64rem){.agent-workflow-phone{--agent-workflow-label-scale:.84}}@media (width<48rem){.agent-workflow-terminal-frame{height:37.5rem}.agent-workflow-terminal{height:100%;font-size:13px}.agent-workflow-transcript{padding-block-end:5rem}.agent-terminal-row{max-width:none}.agent-terminal-vignette-right{display:none}.agent-terminal-vignette-bottom{background:linear-gradient(oklch(0% 0 0/0) 0%,oklch(0% 0 0/.38) 80%,oklch(0% 0 0/.68) 100%);height:32%}.agent-workflow-phone{--agent-workflow-label-scale:.82;width:clamp(13.5rem,36vw,15rem)}}}@media (prefers-reduced-motion:reduce){.agent-touch-cursor,.agent-terminal-typing-prompt{display:none}}@keyframes agent-terminal-type-in{0%{width:0}to{width:var(--typing-width)}}@keyframes agent-terminal-type-followup{0%{opacity:1;width:0}82%,98%{width:var(--typing-width);opacity:1}to{opacity:0;width:0}}@keyframes agent-touch-tap{0%{opacity:0;transform:translate(-50%,-50%)scale(1)}12%,38%{opacity:1;transform:translate(-50%,-50%)scale(1)}48%,60%{opacity:1;transform:translate(-50%,-50%)scale(.72)}74%,86%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes agent-touch-long-press{0%{opacity:0;transform:translate(-50%,-50%)scale(1)}8%,20%{opacity:1;transform:translate(-50%,-50%)scale(1)}27%,72%{opacity:1;transform:translate(-50%,-50%)scale(.72)}86%,92%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}