.agent-demo-scene{--demo-titlebar:color-mix(in srgb, var(--surface) 92%, var(--fg));--demo-task:color-mix(in srgb, var(--surface) 88%, var(--fg));--demo-row:color-mix(in srgb, var(--surface) 96%, var(--fg));justify-self:center;width:100%;min-width:0;max-width:32rem;container-type:inline-size}.agent-demo-connection{justify-content:center;align-items:center;gap:.5rem;margin-block-end:.5rem;display:flex}.agent-demo-tile,.agent-demo-satellite{place-items:center;display:grid}.agent-demo-tile{border:1px solid var(--line);background:var(--surface);width:2.75rem;height:2.75rem;color:var(--fg);border-radius:.75rem;box-shadow:0 10px 22px #0000003d,0 2px 5px #00000024}.agent-demo-distro{rotate:-5deg}.agent-demo-mcp{color:#fff;background:#000;border-color:#3a3a3a;rotate:5deg}.agent-demo-link{width:4.5rem;height:1px;position:relative}.agent-demo-link i{background:var(--muted);border-radius:50%;width:.25rem;height:.25rem;animation:2.7s linear infinite agent-demo-packet;position:absolute;top:50%;left:0}.agent-demo-link i:nth-child(2){animation-delay:-.9s}.agent-demo-link i:nth-child(3){animation-delay:-1.8s}@keyframes agent-demo-packet{0%{opacity:0;transform:translateY(-50%)}15%,85%{opacity:.75}to{opacity:0;transform:translate(4.25rem,-50%)}}.agent-demo-stage{--orbit-duration:18s;--orbit-radius-x:49%;--orbit-radius-y:27%;isolation:isolate;place-items:center;min-height:clamp(16.5rem,65cqi,21rem);display:grid;position:relative}@media (min-width:75rem){.agent-demo-stage{--orbit-radius-x:55%}}.agent-demo-satellite{z-index:var(--resting-depth);aspect-ratio:1;pointer-events:none;offset-path:ellipse(var(--orbit-radius-x) var(--orbit-radius-y) at 50% 50%);offset-rotate:0deg;offset-distance:calc(var(--phase) * 100%);width:clamp(2.625rem,11.5cqi,3.5rem);animation:agent-demo-orbit var(--orbit-duration) linear infinite, agent-demo-depth var(--orbit-duration) steps(1) infinite;animation-delay:calc(var(--phase) * var(--orbit-duration) * -1);border-radius:26%;position:absolute;inset:0 auto auto 0;overflow:hidden;box-shadow:0 9px 15px -5px #00000047}.agent-demo-app-icon{object-fit:cover;width:100%;height:100%;display:block;scale:1.08}.agent-demo-satellite-codex .agent-demo-app-icon{scale:1.32}.agent-demo-satellite-youtube{background:#f03}.agent-demo-satellite-youtube .agent-demo-app-icon{object-fit:contain;width:72%;height:auto;scale:1}@keyframes agent-demo-orbit{0%{offset-distance:0%;opacity:.92;scale:.94}25%{opacity:1;scale:1.2}50%{opacity:.92;scale:.94}75%{opacity:.74;scale:.76}to{offset-distance:100%;opacity:.92;scale:.94}}@keyframes agent-demo-depth{0%,to{z-index:3}50%{z-index:1}}.agent-demo-window{z-index:2;border:1px solid var(--line);background:var(--surface);border-radius:1rem;width:min(80%,23rem);position:relative;overflow:hidden;box-shadow:0 18px 40px #00000038,0 3px 8px #0000001f}.agent-demo-bar{border-bottom:1px solid var(--line);background:var(--demo-titlebar);justify-content:space-between;align-items:center;gap:.75rem;min-height:2.5rem;padding:.5rem clamp(.6875rem,3.2cqi,1rem);display:flex}.agent-demo-dots{flex-shrink:0;gap:.3125rem;display:flex}.agent-demo-dots i{background:#ff5f57;border-radius:50%;width:.5rem;height:.5rem}.agent-demo-dots i:nth-child(2){background:#febc2e}.agent-demo-dots i:nth-child(3){background:#28c840}.agent-demo-endpoint{background:var(--demo-task);min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;padding:.125rem .5rem;font-size:.6875rem;overflow:hidden}.agent-demo-body{padding:.75rem clamp(.6875rem,3.2cqi,1rem)}.agent-demo-task{background:var(--demo-task);border-radius:.5rem;align-items:baseline;gap:.4375rem;padding:.45rem .5rem;font-size:clamp(.75rem,3.2cqi,.875rem);font-weight:500;line-height:1.4;display:flex}.agent-demo-task-label{color:var(--muted);font-size:.6875rem;font-weight:600}.agent-demo-typing{min-width:0;display:grid}.agent-demo-typing-full,.agent-demo-typing-progress{white-space:pre-wrap;grid-area:1/1}.agent-demo-typing-full{opacity:0}.agent-demo-typing-caret{position:relative}.agent-demo-typing-caret:after{content:"";background:currentColor;width:1px;height:1em;position:absolute;inset-block-start:.12em;inset-inline-start:0}@media (prefers-reduced-motion:reduce),(scripting:none){.agent-demo-typing-full{opacity:1}.agent-demo-typing-progress{display:none}}.agent-demo-steps{gap:.25rem;margin-block:.625rem;display:grid}.agent-demo-steps li{border:1px solid var(--line);background:var(--demo-row);border-radius:.45rem;justify-content:space-between;align-items:center;gap:.5rem;padding:.3rem .5rem;display:flex}.agent-demo-step-text{font-size:clamp(.625rem,2.7cqi,.75rem);line-height:1.25;display:grid}.agent-demo-step-text span{color:var(--muted)}.agent-demo-check{width:.75rem;height:.75rem;color:var(--accent);animation:.4s ease-out both agent-demo-confirm;animation-delay:calc(.3s + var(--step) * .55s);flex-shrink:0}@keyframes agent-demo-confirm{0%{opacity:.55;scale:.8}to{opacity:1;scale:1}}.agent-demo-result{color:var(--accent);font-size:.75rem;font-weight:500}@supports not (offset-path:ellipse(49% 27% at 50% 50%)){.agent-demo-satellite{display:none}}@media (prefers-reduced-motion:reduce){.agent-demo-link i,.agent-demo-satellite,.agent-demo-check{animation:none}.agent-demo-link i{top:0;left:25%;transform:translateY(-50%)}.agent-demo-link i:nth-child(2){left:50%}.agent-demo-link i:nth-child(3){left:75%}}