AI product feed

<div class="d2 feed"><div class="eyebrow">STRUCTURED FEED → DISCOVERY CARD</div><div class="flow"><div class="box fields"><div><span>title</span><b>ARC DESK LAMP</b></div><div><span>width</span><b>18 cm</b></div><div><span>price</span><b>$42</b></div><div><span>stock</span><b id="feedStock">AVAILABLE</b></div></div><div class="arrow">→</div><div class="box product"><small>MATCHES SMALL DESK</small><b>ARC DESK LAMP</b><div>18 cm base · $42</div><strong id="cardStock">AVAILABLE</strong></div></div><button id="stockButton">UPDATE STOCK</button></div>

:root{--font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif}.d2{width:min(94%,760px);max-height:94%;font:700 10px/1.35 var(--font-sans);color:var(--fg)}.d2 small{font-size:10px}.d2 .eyebrow{color:var(--accent);font-weight:900;letter-spacing:.08em}.d2 .box{background:var(--surface);border:1px solid var(--line);padding:clamp(6px,1.5vmin,14px)}.d2 .soft{color:var(--muted)}.d2 button{font:inherit;cursor:pointer;border:1px solid var(--line);color:var(--fg);background:var(--surface)}@media(min-width:700px){.d2{font-size:14px}.d2 small{font-size:12px}}.feed .flow{display:flex;align-items:center;gap:clamp(4px,1vmin,12px);margin:clamp(8px,2vmin,18px) 0}.feed .fields,.feed .product{flex:1;min-width:0;min-height:clamp(100px,19vmin,170px)}.feed .fields{display:grid;gap:3px}.feed .fields div{display:flex;justify-content:space-between;gap:4px;border-bottom:1px solid var(--line)}.feed .fields span{color:var(--muted)}.feed .fields b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feed .arrow{color:var(--accent);font-size:2em}.feed .product{display:grid;align-content:center;gap:6px;border-color:var(--accent)}.feed .product small,.feed .product strong{color:var(--accent)}.feed .product b{font-size:1.17em}.feed .product div{color:var(--muted)}.feed button{padding:6px 9px}

const feed=document.querySelector('#feedStock'),card=document.querySelector('#cardStock'),button=document.querySelector('#stockButton');let available=true,timer;function show(next){available=next;feed.textContent=available?'AVAILABLE':'OUT OF STOCK';card.textContent=feed.textContent;card.style.color=available?'var(--accent)':'var(--muted)'}button.onclick=()=>{clearInterval(timer);show(!available)};timer=setInterval(()=>show(!available),2500);setTimeout(()=>show(false),650);