.demo{--good:#1a7a4b;gap:12px;min-width:0;margin:0;display:grid}.demo__frame{border-radius:var(--radius-lg);background:var(--bg-elev);padding:clamp(24px,3vw,44px);position:relative}@media (max-width:480px){.demo__frame{padding:16px}}.demo__caption{max-width:62ch;font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.55}.demo__again{color:var(--accent);font:inherit;font-size:var(--fs-small);cursor:pointer;background:0 0;border:0;justify-self:start;padding:0;text-decoration:underline}body.active-dark-mode .demo{--good:#5fd49a}.bots{--bot:#7f8ea6;--bot-eye:#ff5a3d;--warm:var(--heat-orange);gap:14px;display:grid}.bots__scene{--wall:68cqw;aspect-ratio:16/10;position:relative;overflow:hidden;container-type:inline-size}@media (max-width:560px){.bots__scene{aspect-ratio:1}}.bots__site{inset:0 0 0 var(--wall);background:color-mix(in srgb, var(--warm) 6%, var(--bg-elev));align-content:start;gap:9px;padding:9%;display:grid;position:absolute}.bots__site-name{font-size:var(--fs-2xs);color:var(--text-muted);margin-bottom:6px;font-weight:600}.bots__site-line{background:var(--line-strong);border-radius:4px;height:7px}.bots__site-line--short{width:70%}.bots__site-line--shorter{width:45%}.bots__edge{inset-block:0;left:var(--wall);background:linear-gradient(180deg, var(--heat-amber), var(--heat-flame) 50%, var(--heat-red));width:3px;position:absolute;translate:-50%;box-shadow:0 0 22px #ff6a3d8c}.bots__legend{font-size:var(--fs-small);color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:6px 20px;display:flex}.bots__legend-title{color:var(--text);font-weight:600}.bots__legend-item{align-items:center;gap:8px;display:inline-flex}.bots__key{background:var(--bot);border-radius:3px;width:12px;height:12px}.bots__key--person{background:var(--warm);box-shadow:0 0 8px var(--warm);border-radius:50%}.bots__proof{border-top:1px solid var(--line);gap:10px;padding-top:14px;display:grid}.bots__proof-line{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-subtle);overflow-wrap:anywhere;line-height:1.6}.bots__proof-label{font-family:var(--font-sans);color:var(--text-muted);display:block}body:not(.active-dark-mode) .bots{--bot:#5d6b82;--bot-eye:#e0401f;--warm:#f08a2c}@media (min-width:561px){.case-demo .bots__scene{aspect-ratio:5/2}}@keyframes bot-attack{0%{translate:-8cqw}76%{translate:calc(var(--wall) - clamp(24px,4.2cqw,32px)) 0;opacity:1;animation-timing-function:cubic-bezier(.2,.7,.3,1);rotate:0deg}86%{translate:calc(var(--wall) - 7cqw) -14px;rotate:-30deg}to{translate:calc(var(--wall) - 15cqw) 28px;opacity:0;rotate:-80deg}}@keyframes person-enter{0%{opacity:0;translate:-8cqw}8%,86%{opacity:1}to{opacity:0;translate:92cqw}}@keyframes bot-tag-out{to{opacity:0}}.agent{top:var(--y);position:absolute;left:0}.agent__mover{width:max-content;animation:bot-attack var(--dur) linear var(--delay) both;margin-top:-15px;position:absolute}.agent--person .agent__mover{animation-name:person-enter}.agent__bob{animation:.3s ease-in-out infinite alternate bot-bob;display:block}.agent__figure{width:clamp(20px,3.6cqw,28px);max-width:none;height:auto;fill:var(--bot);display:block}.agent--person .agent__figure{fill:var(--warm);filter:drop-shadow(0 0 6px var(--warm))}.agent__antenna,.agent__legs{fill:none;stroke:var(--bot);stroke-width:2.4px;stroke-linecap:round}.agent__eye{fill:var(--bot-eye)}@media (max-width:560px){.agent__tag{display:none}}.agent__tag{background:color-mix(in srgb, var(--bg) 85%, transparent);font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;animation:bot-tag-out .15s linear calc(var(--delay) + var(--dur)*.75) forwards;border-radius:4px;padding:1px 5px;font-size:10.5px;position:absolute;bottom:100%;right:0;translate:0 -3px}.agent__hit{left:var(--wall);border:2px solid var(--heat-orange);opacity:0;width:30px;height:30px;animation:bot-hit .6s ease-out calc(var(--delay) + var(--dur)*.76) forwards;border-radius:50%;margin:-15px;position:absolute}.agent__stamp{z-index:2;left:var(--wall);border-radius:var(--radius-pill);background:var(--text);color:var(--bg);font-family:var(--font-display);white-space:nowrap;opacity:0;animation:bot-stamp 1.6s ease-out calc(var(--delay) + var(--dur)*.76) forwards;padding:3px 9px;font-size:12px;font-weight:700;position:absolute;translate:calc(-100% - 10px) -170%}.agent--still .agent__mover{translate:var(--x) 0;animation:none}.agent--still .agent__bob,.agent--still .agent__hit,.agent--still .agent__tag{animation:none}.agent--still .agent__stamp{left:var(--x);opacity:1;animation:none;translate:calc(-100% - 10px) -50%}
