Agentic storefront

<div class="storefront"><div class="catalog">CATALOG<small>ARC LIGHT · $39 · STOCK 8</small></div><div class="fan">↙ <span>↓</span> ↘</div><div class="channels"><div>AI CHAT A<small>PRODUCT CARD</small></div><div>AI CHAT B<small>PRODUCT CARD</small></div><div>AI CHAT C<small>PRODUCT CARD</small></div></div></div>

.storefront{width:min(90%,540px);font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif;text-align:center}.catalog{width:54%;margin:auto;padding:clamp(10px,2vmin,18px);background:var(--fg);color:var(--bg);box-shadow:5px 5px 0 var(--accent)}.catalog small{display:block;margin-top:5px;color:var(--bg);font-size:clamp(10px,max(1.1vmin,1vw),12px)}.fan{height:clamp(28px,8vmin,58px);display:flex;justify-content:space-around;align-items:center;color:var(--accent);font-size:clamp(18px,5vmin,40px)}.channels{display:flex;gap:clamp(5px,1.5vmin,14px)}.channels div{width:33.3%;padding:clamp(9px,2vmin,18px) clamp(3px,1vmin,8px);border:2px solid var(--line);background:var(--surface);animation:publish 4.5s infinite}.channels div:nth-child(2){animation-delay:.7s}.channels div:nth-child(3){animation-delay:1.4s}.channels small{display:block;color:var(--muted);font-size:clamp(10px,max(1vmin,1vw),12px);margin-top:5px}@keyframes publish{0%,12%,100%{opacity:.3;transform:translateY(-12px)}30%,85%{opacity:1;transform:none}}