Live shopping

<div class="live"><div class="stage"><small>● LIVE / STUDIO</small><div class="product"><div class="vase"></div></div><div class="pin">PINNED / CERAMIC VASE</div></div><div class="chat"><small>VIEWER Q&amp;A</small><div class="bubble" id="question">Is it dishwasher safe?</div><div class="answer" id="answer">Checking with the maker…</div><div class="dots"><i></i><i></i><i></i></div></div></div>

.live{display:flex;width:min(90%,520px);height:clamp(130px,42vmin,270px);border:2px solid var(--fg);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.25 sans-serif}.stage{position:relative;flex:1;background:linear-gradient(145deg,var(--accent-3),var(--surface));padding:clamp(7px,1.5vmin,14px)}.stage small{color:var(--accent)}.product{position:absolute;inset:25% 18% 16%;display:grid;place-items:center}.vase{width:45%;height:90%;border-radius:15% 15% 40% 40%;background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent));animation:turn 4s ease-in-out infinite}.pin{position:absolute;left:5%;bottom:6%;background:var(--fg);color:var(--bg);padding:clamp(4px,1vmin,8px);font-size:clamp(10px,max(1.2vmin,1vw),12px)}.chat{width:42%;padding:clamp(7px,1.5vmin,14px);display:flex;flex-direction:column;gap:clamp(7px,1.5vmin,15px);background:var(--surface)}.chat small{color:var(--muted)}.bubble,.answer{padding:clamp(5px,1.2vmin,10px);border:1px solid var(--line)}.answer{background:var(--accent);color:white;transition:opacity .3s}.dots{display:flex;gap:4px;margin-top:auto}.dots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}@keyframes turn{50%{transform:rotateY(55deg)}}@keyframes blink{50%{opacity:.2}}small{font-size:max(.833em,10px,1vw)}

const q=document.querySelector('#question'),a=document.querySelector('#answer');const pairs=[['Is it dishwasher safe?','Yes, on the gentle cycle.'],['How tall is it?','24 cm from base to rim.']];let index=0;function show(){const pair=pairs[index++%pairs.length];q.textContent=pair[0];a.textContent=pair[1]}setTimeout(show,500);setInterval(show,3600);