/* Dottpace landing — Home §3 · "Ready for AI agents": the window of the agent check (the app's Agent Readiness page), a story on story.css's
   engine (the founder's order, Oct 16, 2026). Three steps: 1 Sep 8 the weekly run gets stuck at Use (the two configuration buttons have no
   names), 2 Sep 9 Dottpace names them (approved, applied, checked live), 3 Sep 15 the re-run finishes the task — Reach, Read, Use, Buy.
   The window: the run (when, the task, the four steps, what happened) over the agent's browser on the sample store. Markup: build.py
   _ag_scene(); the cursor's stops are measured by story.js (--c<name>x/y on .ag-vp). Gates (.fN/.uN), data-stage, data-play and .is-held are
   the engine's. At rest every step shows its finished state; tokens only. */

/* ---------- the window's two parts ---------- */
.sw-ag .ag-st{display:flex;align-items:center;gap:8px}
.ag-stc{display:grid}
.ag-stc>*{grid-area:1/1;justify-self:end}
.ag-in{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* the run: when, the task, Reach · Read · Use · Buy, and what happened */
.ag-run{flex:none;padding:12px 16px;border-bottom:1px solid var(--line)}
.ag-rh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.ag-rk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-1)}
.ag-rk>.ic{width:15px;height:15px;color:var(--c1)}
.ag-rkv{display:grid}
.ag-rkv>*{grid-area:1/1;white-space:nowrap}
.ag-task{display:inline-flex;align-items:baseline;gap:8px;min-width:0;font-size:12.5px;color:var(--text-2)}
.ag-task small{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
.ag-pills{display:flex;align-items:center;margin-top:10px}
.ag-pl{position:relative;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 5px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:12.5px;font-weight:500;color:var(--text-1);transition:background-color 320ms var(--ease-out),color 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
.ag-pl+.ag-pl{margin-left:22px}
.ag-pl+.ag-pl::before{content:"";position:absolute;right:calc(100% + 3px);top:50%;width:16px;height:1px;background:var(--line-strong)}
.ag-pi{position:relative;display:grid;width:18px;height:18px}
.ag-pi>*{grid-area:1/1;display:grid;place-items:center;border-radius:50%}
.ag-pi .ic{width:10px;height:10px;stroke-width:3}
.ag-pi-ok{background:var(--pos);color:var(--surface)}
.ag-pi-x{background:var(--neg);color:var(--surface)}
.ag-pi-fx{background:var(--info);color:var(--surface)}
.ag-pi-no{box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
.ag-pi-spin{box-shadow:inset 0 0 0 1.5px var(--line-ctl);opacity:0}
.ag-pi-spin::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--c1)}
.sw-ag[data-stage="1"] .ag-pl3{background:var(--neg-bg);color:var(--neg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neg) 40%,transparent)}
.sw-ag[data-stage="2"] .ag-pl3{background:var(--info-bg);color:var(--info);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--info) 40%,transparent)}
.sw-ag:not([data-stage="3"]) .ag-pl4{color:var(--text-3)}
.ag-note{display:grid;margin-top:9px}
.ag-n{grid-area:1/1;display:flex;align-items:flex-start;gap:8px;min-width:0;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.ag-n>.ic{flex:none;width:15px;height:15px;margin-top:1px}
.ag-n b{font-weight:600;color:var(--text-1)}
.ag-n1>.ic{color:var(--neg)}.ag-n2>.ic{color:var(--info)}.ag-n3>.ic{color:var(--pos)}
.ag-n3 b{color:var(--pos)}
.ag-with{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.ag-with small{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.ag-lg{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-1)}
.ag-lg .tl-lg{width:13px;height:13px}

/* ---------- the agent's browser, on the app's canvas ---------- */
.ag-br{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:12px 16px 14px;background:var(--bg-band)}
.ag-br>*{background:var(--surface)}
.ag-url{flex:none;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 1px var(--line)}
.ag-nv{display:flex;gap:2px;color:var(--text-4)}
.ag-nv .ic{width:14px;height:14px}
.ag-uf{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:24px;padding:0 10px;border-radius:7px;background:var(--fill-1);font-size:11.5px;color:var(--text-2)}
.ag-uf>.ic{flex:none;width:11px;height:11px;color:var(--text-3)}
.ag-uv{display:grid;min-width:0}
.ag-u{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-u1,.ag-u2{opacity:0;visibility:hidden}
.ag-vp{container:agvp/inline-size;position:relative;height:380px;overflow:hidden;border-radius:0 0 10px 10px;box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 var(--line)}
.story.is-pin .ag-vp{flex:1 1 auto;height:auto;min-height:0;container:agvp/size}
/* the store: its own header, the four pages stacked in one place */
.ag-sh{display:flex;align-items:center;gap:18px;height:40px;padding:0 16px;border-bottom:1px solid var(--line)}
.ag-sh-logo{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.ag-sh-logo i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--warn-bg);color:var(--warn);font-size:10.5px;font-style:normal;font-weight:700}
.ag-sh-nav{display:flex;gap:14px;font-size:12px;color:var(--text-2)}
.ag-sh-r{display:flex;align-items:center;gap:14px;margin-left:auto;color:var(--text-2)}
.ag-sh-r .ic{width:15px;height:15px}
.ag-sh-cart{position:relative;display:grid}
.ag-sh-n{position:absolute;right:-8px;top:-7px;display:grid;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--c1);color:var(--on-fill);font:600 9.5px/15px var(--font);font-style:normal;text-align:center}
.ag-sh-n>*{grid-area:1/1}
.ag-pgs{display:grid}
.agp{grid-area:1/1;min-width:0;padding:14px 16px}
.agp1,.agp2{opacity:0;visibility:hidden}
/* a laptop, drawn: a screen in one of four tints over a thin base */
.ag-lap{display:flex;flex-direction:column;align-items:center;width:62%}
.ag-lap-s{width:86%;aspect-ratio:16/10;border-radius:3px 3px 1px 1px;background:var(--lap-g);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text-1) 80%,var(--surface))}
.ag-lap-b{width:100%;height:4px;border-radius:0 0 3px 3px;background:color-mix(in srgb,var(--text-1) 45%,var(--surface))}
.ag-lap-ta{--lap-g:linear-gradient(140deg,color-mix(in srgb,var(--neg) 72%,var(--surface)),color-mix(in srgb,var(--warn) 60%,var(--surface)))}
.ag-lap-tb{--lap-g:linear-gradient(140deg,color-mix(in srgb,var(--c1) 80%,var(--surface)),color-mix(in srgb,var(--info) 45%,var(--surface)))}
.ag-lap-tc{--lap-g:linear-gradient(140deg,color-mix(in srgb,var(--pos) 60%,var(--surface)),color-mix(in srgb,var(--info) 55%,var(--surface)))}
.ag-lap-td{--lap-g:linear-gradient(140deg,color-mix(in srgb,var(--c1) 55%,var(--neg)),color-mix(in srgb,var(--neg) 40%,var(--surface)))}
/* 1 · home */
.ag-h-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:10px;background:var(--fill-1)}
.ag-h-hx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.ag-h-hx small{font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ag-h-hx b{max-width:15em;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.ag-s-btn{display:inline-flex;align-items:center;height:26px;margin-top:4px;padding:0 12px;border-radius:7px;background:var(--inv);color:var(--inv-fg);font-size:11.5px;font-weight:500}
.ag-h-hero .ag-lap{flex:none;width:150px}
.ag-h-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.ag-h-cats li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:500;text-align:center}
/* 2 · the category */
.ag-c-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ag-c-head b{font-size:15px;font-weight:600;letter-spacing:-.012em}
.ag-c-head span{font-size:11.5px;color:var(--text-3)}
.ag-c-fs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;color:var(--text-3)}
.ag-c-fs>.ic{width:14px;height:14px;margin-right:2px}
.ag-c-f{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--line-ctl);font-size:11.5px;color:var(--text-2);white-space:nowrap}
.ag-c-f.is-on{box-shadow:inset 0 0 0 1px var(--text-1);color:var(--text-1);font-weight:500}
.ag-c-f .ic{width:11px;height:11px}
.ag-c-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.ag-pc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.ag-pc-img{display:grid;place-items:center;align-self:stretch;height:100px;margin-bottom:8px;border-radius:7px;background:var(--fill-1)}
.ag-pc small{font-size:10.5px;color:var(--text-3)}
.ag-pc b{font-size:12.5px;font-weight:600;white-space:nowrap}
.ag-pc-sp{font-size:11px;color:var(--text-3);white-space:nowrap}
.ag-pc-pr{margin:5px 0 0 -4px;padding:1px 4px;border-radius:4px;font-size:13px;font-weight:600}
.ag-pc.is-over{opacity:.42}
/* 3 · the product: its two configuration buttons — unnamed until Dottpace's fix */
.agp3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.ag-p-img{display:grid;place-items:center;height:250px;border-radius:12px;background:var(--fill-1)}
.ag-p-img .ag-lap{width:64%}
.ag-p-info{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding-top:2px}
.ag-p-info small{font-size:11px;color:var(--text-3)}
.ag-p-t{font-size:18px;font-weight:600;letter-spacing:-.02em}
.ag-p-pr{font-size:19px;font-weight:600;letter-spacing:-.015em}
.ag-p-stock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--pos)}
.ag-p-stock i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ag-p-lab{margin-top:6px;font-size:11px;color:var(--text-3)}
.ag-p-opts{display:flex;flex-wrap:wrap;gap:6px}
.ag-p-o{display:inline-flex;align-items:center;gap:8px;width:140px;height:32px;padding:0 10px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line-ctl);font-size:12px;color:var(--text-2);white-space:nowrap}
.ag-p-sw{flex:none;width:12px;height:12px;border-radius:3px}
.ag-p-sw1{background:var(--text-3)}.ag-p-sw2{background:var(--text-1)}
.sw-ag[data-stage="3"] .ag-p-o.is-sel{box-shadow:inset 0 0 0 1.5px var(--c1);background:color-mix(in srgb,var(--c1) 10%,transparent);color:var(--text-1);font-weight:500}
.ag-p-add{display:flex;align-items:center;justify-content:center;gap:7px;align-self:stretch;height:34px;margin-top:8px;border-radius:8px;background:var(--inv);color:var(--inv-fg);font-size:12.5px;font-weight:600}
.ag-p-add .ic{width:14px;height:14px}
/* 4 · the cart: it stops before checkout */
.ag-k-t{font-size:15px;font-weight:600;letter-spacing:-.012em}
.ag-k-t span{font-weight:400;color:var(--text-3)}
.ag-k-line{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.ag-k-img{flex:none;display:grid;place-items:center;width:72px;height:50px;border-radius:7px;background:var(--fill-1)}
.ag-k-img .ag-lap{width:76%}
.ag-k-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-k-n b{font-size:12.5px;font-weight:600}
.ag-k-n small{font-size:11.5px;color:var(--text-3)}
.ag-k-p{margin-left:auto;font-size:13px;font-weight:600}
.ag-k-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:4px;max-width:260px;margin:12px 0 0 auto;font-size:12px;color:var(--text-2)}
.ag-k-sum b{font-weight:600;color:var(--text-1);text-align:right}
.ag-k-co{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}
.ag-k-btn{display:inline-flex;align-items:center;height:34px;padding:0 20px;border-radius:8px;background:var(--inv);color:var(--inv-fg);font-size:12.5px;font-weight:600}
.ag-k-stop{order:-1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-full);background:var(--pos-bg);color:var(--pos);font-size:11.5px;font-weight:500}
.ag-k-stop .ic{width:13px;height:13px}
/* the toast, the agent's cursor (a pointer with its sparkle) and, at step 1, its question */
.ag-toast{position:absolute;right:14px;top:50px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;background:var(--surface);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong);font-size:12px;font-weight:500;opacity:0;visibility:hidden}
.ag-toast .ic{width:13px;height:13px;color:var(--pos);stroke-width:2.6}
.ag-cur{position:absolute;left:0;top:0;z-index:6;width:20px;height:20px;opacity:0;pointer-events:none}
.ag-cur svg{display:block;width:100%;height:100%;fill:var(--text-1);stroke:var(--surface);stroke-width:1.5;stroke-linejoin:round}
.ag-cur i{position:absolute;left:15px;top:15px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--c1);color:var(--on-fill);box-shadow:0 0 0 2px var(--surface)}
.ag-cur i .ic{width:10px;height:10px;stroke-width:2.2}
.ag-q{position:absolute;left:0;top:0;z-index:6;display:none;padding:6px 10px;border-radius:8px;background:var(--surface);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong);font-size:11.5px;font-weight:500;white-space:nowrap;
  translate:calc((var(--cs1x) + var(--c3x)) / 2 - 50%) calc(var(--c3y) - 58px)}
/* step 1 at rest: the cursor stays between the two buttons, with its question (it needs the measured spots, so only with JS) */
html.js .sw-ag[data-stage="1"] .ag-cur{opacity:1;translate:calc((var(--cs1x) + var(--c3x)) / 2) calc(var(--c3y) + 2px)}
html.js .sw-ag .ag-q{display:block}
/* step 2: the fix, over the product's picture — what changes, approved, applied, checked */
.ag-fix{position:absolute;left:12px;top:52px;z-index:4;width:min(360px,calc(50% - 8px));padding:12px 14px 13px;border-radius:12px;background:var(--sc-bg);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong);font-size:12.5px;color:var(--text-2)}
.ag-file{margin-top:4px;font:500 11px/1.3 var(--mono);color:var(--text-3)}
.ag-diff{margin-top:8px;padding:4px;border-radius:8px;background:var(--fill-1)}
.ag-diff li{display:flex;align-items:center;gap:8px;min-width:0;padding:1px 6px;border-radius:4px;font:400 11px/1.65 var(--mono)}
.ag-diff li+li{margin-top:2px}
.ag-diff i{flex:none;width:8px;font-style:normal;font-weight:600}
.ag-diff code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;color:var(--text-1)}
.ag-diff .del{background:color-mix(in srgb,var(--neg) 9%,transparent)}.ag-diff .del i{color:var(--neg)}.ag-diff .del code{color:var(--text-3)}
.ag-diff .add{background:color-mix(in srgb,var(--pos) 9%,transparent)}.ag-diff .add i{color:var(--pos)}
.ag-ok{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--pos)}
.ag-ok .ic{width:15px;height:15px}
.ag-done{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ag-done li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);white-space:nowrap}
.ag-done .ic{width:13px;height:13px;color:var(--pos);stroke-width:2.4}

/* ---------- a short browser (pinned on a shorter screen): every page a size smaller ---------- */
@container agvp (max-height:330px){
  .ag-sh{height:36px}
  .agp{padding:10px 14px}
  .ag-h-hero{padding:12px 16px}.ag-h-hero .ag-lap{width:110px}.ag-h-hx b{font-size:15px}
  .ag-h-cats{margin-top:10px}.ag-h-cats li{gap:7px;padding:10px 8px}.ag-h-cats .ag-lap{width:48%}
  .ag-c-fs{margin-top:8px}.ag-c-grid{margin-top:8px}
  .ag-pc-img{height:62px;margin-bottom:5px}
  .ag-p-img{height:200px}
  .ag-p-t{font-size:16px}.ag-p-pr{font-size:17px}
  .ag-k-line{margin-top:8px}.ag-k-sum{margin-top:8px}.ag-k-co{margin-top:8px}
  .ag-fix{top:44px;padding:10px 12px 11px}
  .ag-file{display:none}
  .ag-fix .sw-sc-t{margin-top:6px}
  .ag-diff{margin-top:6px}
  .ag-diff li{line-height:1.45}
  .ag-ok{margin-top:8px}
  .ag-done{margin-top:6px;padding-top:6px}
}
/* ---------- a short pinned window: the run a little tighter ---------- */
@container sw (max-height:520px){
  .ag-run{padding:10px 16px}
  .ag-pills{margin-top:8px}
  .ag-note{margin-top:7px}
  .ag-br{padding:10px 16px 12px}
}
/* ---------- a narrow window (phones) ---------- */
@container sw (max-width:519px){
  .ag-run{padding:10px 12px}
  .ag-rh{gap:4px 12px}
  .ag-pills{margin-top:8px}
  .ag-pl{height:26px;padding:0 9px 0 4px;font-size:11.5px;gap:5px}
  .ag-pl+.ag-pl{margin-left:10px}
  .ag-pl+.ag-pl::before{width:6px;right:calc(100% + 2px)}
  .ag-pi{width:16px;height:16px}
  .ag-n3{flex-wrap:wrap}
  .ag-with{margin-left:23px}
  .ag-br{padding:10px}
  .ag-vp{height:330px}
  .ag-sh{gap:12px;padding:0 12px}
  .ag-sh-nav{display:none}
  .agp{padding:12px}
  .ag-h-hero{padding:14px}
  .ag-h-hero .ag-lap{display:none}
  .ag-h-hx b{font-size:15px}
  .ag-h-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ag-h-cats li{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px;text-align:left}
  .ag-h-cats .ag-lap{flex:none;width:44px}
  .ag-c-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ag-c-fs .ag-c-f:nth-child(n+3){display:none}
  .ag-pc-img{height:52px;margin-bottom:6px}
  .agp3{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .ag-p-img{height:84px}
  .ag-p-img .ag-lap{width:80%}
  .ag-p-t{font-size:16px}.ag-p-pr{font-size:17px}
  .ag-p-o{width:auto;min-width:118px;height:30px;font-size:11.5px}
  .ag-k-co{flex-direction:column;align-items:flex-end}
  .ag-k-stop{order:0;height:auto;padding:6px 10px;border-radius:10px;line-height:1.35}
  .ag-fix{left:10px;right:10px;top:auto;bottom:10px;width:auto}
  .ag-q{translate:calc(var(--c3x) - 70%) calc(var(--c3y) - 58px)}
}

/* ====================================================================== the motion: each step once, as it becomes current ====================================================================== */
@keyframes ag-in{from{opacity:0;translate:10px 0;visibility:visible}to{opacity:1;translate:none;visibility:visible}}
@keyframes ag-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes ag-on{from{opacity:1;visibility:visible}to{opacity:1;visibility:visible}}
@keyframes ag-hl{to{box-shadow:inset 0 0 0 1.5px var(--c1),0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent)}}
@keyframes ag-flash{0%,100%{background:transparent}35%{background:color-mix(in srgb,var(--c1) 22%,transparent)}}
@keyframes ag-dim{from{opacity:1}}
@keyframes ag-press{0%,100%{scale:1}45%{scale:.94}}
@keyframes ag-sel{from{box-shadow:inset 0 0 0 1px var(--line-ctl);background:transparent;color:var(--text-2);font-weight:400}}
@keyframes ag-spin{to{rotate:1turn}}
@keyframes ag-toast{from{opacity:0;translate:0 -8px;visibility:visible}to{opacity:1;translate:none;visibility:visible}}
@keyframes ag-wipe{from{opacity:0;clip-path:inset(0 100% 0 0)}}
/* step 1: the cursor goes to the first button, to the second, and stops between them — the agent can't tell which is which */
@keyframes ag-cur1{
  0%,15%{opacity:0;translate:var(--c0x) var(--c0y)}
  18%{opacity:1;translate:var(--c0x) var(--c0y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  38%{translate:var(--cs1x) var(--cs1y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  48%{translate:var(--cs1x) var(--cs1y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  62%{translate:var(--c3x) var(--c3y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  70%{translate:var(--c3x) var(--c3y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  82%,100%{opacity:1;translate:calc((var(--cs1x) + var(--c3x)) / 2) calc(var(--c3y) + 2px)}
}
/* step 3: the full walk, quickly — home, the category, the product, the cart */
@keyframes ag-cur3{
  0%,3%{opacity:0;translate:var(--c0x) var(--c0y);scale:1}
  5%{opacity:1;translate:var(--c0x) var(--c0y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  14%{translate:var(--c1x) var(--c1y)}
  15.5%{scale:.8}17%{scale:1}
  20%{translate:var(--c1x) var(--c1y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  36%{translate:var(--c2x) var(--c2y)}
  37.5%{scale:.8}39%{scale:1}
  46%{translate:var(--c2x) var(--c2y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%{translate:var(--c3x) var(--c3y)}
  56.5%{scale:.8}58%{scale:1}
  60%{translate:var(--c3x) var(--c3y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  66%{translate:var(--c4x) var(--c4y)}
  67.5%{scale:.8}69%{scale:1}
  74%{opacity:1;translate:var(--c4x) var(--c4y);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  82%{translate:var(--c5x) var(--c5y)}
  88%{opacity:1}
  93%,100%{opacity:0;translate:var(--c5x) var(--c5y)}
}

/* 1 · Sep 8, stuck: Reach and Read pass, Use spins, the cursor goes back and forth, Use fails, the question, the note, Stuck */
.sw-ag[data-play="1"] .ag-pl1 .ag-pi-ok{animation:sw-tick 380ms var(--sw-land) 150ms both}
.sw-ag[data-play="1"] .ag-pl2 .ag-pi-ok{animation:sw-tick 380ms var(--sw-land) 380ms both}
.sw-ag[data-play="1"] .ag-pl3 .ag-pi-spin{animation:ag-on 1ms linear 450ms both,ag-spin 800ms linear 450ms infinite,ag-out 140ms linear 1750ms forwards}
.sw-ag[data-play="1"] .ag-pl3 .ag-pi-x{animation:sw-tick 400ms var(--sw-land) 1750ms both}
.sw-ag[data-play="1"] .ag-pl3{animation:ag-flat 1750ms linear both}
@keyframes ag-flat{0%,99%{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-strong)}}
.sw-ag[data-play="1"] .ag-cur{animation:ag-cur1 2000ms linear both}
.sw-ag[data-play="1"] .ag-q{animation:sw-pop 380ms var(--sw-land) 1850ms both}
.sw-ag[data-play="1"] .ag-n1{animation:sw-fade 420ms linear 1900ms both}
.sw-ag[data-play="1"] .ag-stc .u2{animation:sw-pop 340ms var(--sw-land) 2000ms both}
/* 2 · Sep 9, fixed: the fix and its diff, approved, applied — the buttons get their names — checked live, Use fixed, Fix live */
.sw-ag[data-play="2"] .ag-fix{animation:sw-slide 560ms var(--ease-expo) 100ms both}
.sw-ag[data-play="2"] .ag-diff li:nth-child(1){animation:sw-in 320ms var(--ease-expo) 320ms both}
.sw-ag[data-play="2"] .ag-diff li:nth-child(2){animation:sw-in 320ms var(--ease-expo) 380ms both}
.sw-ag[data-play="2"] .ag-diff li:nth-child(3){animation:sw-in 320ms var(--ease-expo) 440ms both}
.sw-ag[data-play="2"] .ag-diff li:nth-child(4){animation:sw-in 320ms var(--ease-expo) 500ms both}
.sw-ag[data-play="2"] .ag-ok{animation:sw-in 420ms var(--ease-expo) 900ms both}
.sw-ag[data-play="2"] .ag-ok .ic{animation:sw-tick 400ms var(--sw-land) 950ms both}
.sw-ag[data-play="2"] .ag-done li:nth-child(1){animation:sw-in 360ms var(--ease-expo) 1200ms both}
.sw-ag[data-play="2"] .ag-done li:nth-child(1) .ic{animation:sw-tick 400ms var(--sw-land) 1260ms both}
.sw-ag[data-play="2"] .ag-done li:nth-child(2){animation:sw-in 360ms var(--ease-expo) 1450ms both}
.sw-ag[data-play="2"] .ag-done li:nth-child(2) .ic{animation:sw-tick 400ms var(--sw-land) 1510ms both}
.sw-ag[data-play="2"] .ag-p-on{animation:ag-wipe 460ms var(--ease-expo) 1260ms both}
.sw-ag[data-play="2"] .ag-pl3 .ag-pi-x{animation:ag-on 1ms linear both,ag-out 140ms linear 1600ms forwards}
.sw-ag[data-play="2"] .ag-pl3 .ag-pi-fx{animation:sw-tick 400ms var(--sw-land) 1620ms both}
.sw-ag[data-play="2"] .ag-pl3{animation:ag-stuck 1600ms linear both}
@keyframes ag-stuck{0%,99%{background:var(--neg-bg);color:var(--neg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neg) 40%,transparent)}}
.sw-ag[data-play="2"] .ag-n2{animation:sw-fade 420ms linear 1700ms both}
.sw-ag[data-play="2"] .ag-stc .f2{animation:sw-pop 340ms var(--sw-land) 1800ms both}
/* 3 · Sep 15, finished: the re-run walks the store; each step passes as it goes; the cart; the result; Passed */
.sw-ag[data-play="3"] :is(.agp1,.ag-u1){animation:ag-in 300ms var(--ease-expo) 40ms both,ag-out 120ms linear 650ms forwards}
.sw-ag[data-play="3"] :is(.agp2,.ag-u2){animation:ag-in 300ms var(--ease-expo) 720ms both,ag-out 120ms linear 1550ms forwards}
.sw-ag[data-play="3"] :is(.agp3,.ag-u3){animation:ag-in 300ms var(--ease-expo) 1620ms both,ag-out 120ms linear 2500ms forwards}
.sw-ag[data-play="3"] :is(.agp4,.ag-u4){animation:ag-in 300ms var(--ease-expo) 2570ms both}
.sw-ag[data-play="3"] .ag-cur{animation:ag-cur3 3500ms linear both}
.sw-ag[data-play="3"] .ag-h-cats [data-ag-t="1"]{animation:ag-hl 220ms var(--ease-out) 420ms both,ag-press 260ms var(--ease-out) 520ms}
.sw-ag[data-play="3"] .ag-pc:nth-child(1) .ag-pc-pr{animation:ag-flash 420ms linear 800ms both}
.sw-ag[data-play="3"] .ag-pc:nth-child(2) .ag-pc-pr{animation:ag-flash 420ms linear 880ms both}
.sw-ag[data-play="3"] .ag-pc:nth-child(3) .ag-pc-pr{animation:ag-flash 420ms linear 960ms both}
.sw-ag[data-play="3"] .ag-pc:nth-child(4) .ag-pc-pr{animation:ag-flash 420ms linear 1040ms both}
.sw-ag[data-play="3"] .ag-pc.is-over{animation:ag-dim 320ms var(--ease-out) 1120ms both}
.sw-ag[data-play="3"] .ag-pc[data-ag-t="2"]{animation:ag-hl 220ms var(--ease-out) 1170ms both,ag-press 260ms var(--ease-out) 1290ms}
.sw-ag[data-play="3"] .ag-p-o[data-ag-t="3"]{animation:ag-sel 220ms var(--ease-out) 1960ms both,ag-press 260ms var(--ease-out) 1930ms}
.sw-ag[data-play="3"] .ag-p-add{animation:ag-press 280ms var(--ease-out) 2330ms}
.sw-ag[data-play="3"] .ag-sh-n0{animation:ag-on 1ms linear both,ag-out 1ms linear 2380ms forwards}
.sw-ag[data-play="3"] .ag-sh-n1{animation:sw-pop 360ms var(--sw-land) 2380ms both}
.sw-ag[data-play="3"] .ag-toast{animation:ag-toast 300ms var(--ease-expo) 2380ms both,ag-out 140ms linear 2560ms forwards}
.sw-ag[data-play="3"] .ag-k-stop{animation:sw-pop 400ms var(--sw-land) 2950ms both}
.sw-ag[data-play="3"] .ag-pl1 .ag-pi-ok{animation:sw-tick 360ms var(--sw-land) 300ms both}
.sw-ag[data-play="3"] .ag-pl2 .ag-pi-ok{animation:sw-tick 360ms var(--sw-land) 1150ms both}
.sw-ag[data-play="3"] .ag-pl3 .ag-pi-ok{animation:sw-tick 360ms var(--sw-land) 2000ms both}
.sw-ag[data-play="3"] .ag-pl4 .ag-pi-ok{animation:sw-tick 360ms var(--sw-land) 2950ms both}
.sw-ag[data-play="3"] .ag-pl1 .ag-pi-spin{animation:ag-on 1ms linear both,ag-spin 800ms linear infinite,ag-out 120ms linear 300ms forwards}
.sw-ag[data-play="3"] .ag-pl2 .ag-pi-spin{animation:ag-on 1ms linear both,ag-spin 800ms linear 300ms infinite,ag-out 120ms linear 1150ms forwards}
.sw-ag[data-play="3"] .ag-pl3 .ag-pi-spin{animation:ag-on 1ms linear both,ag-spin 800ms linear 1150ms infinite,ag-out 120ms linear 2000ms forwards}
.sw-ag[data-play="3"] .ag-pl4 .ag-pi-spin{animation:ag-on 1ms linear both,ag-spin 800ms linear 2000ms infinite,ag-out 120ms linear 2950ms forwards}
.sw-ag[data-play="3"] .ag-n3{animation:sw-land 520ms var(--sw-land) 3150ms both}
.sw-ag[data-play="3"] .ag-stc .f3{animation:sw-pop 340ms var(--sw-land) 3250ms both}