Native AI checkout

<div class="checkout"><div class="chat">I'LL TAKE THE ARC LIGHT</div><div class="panel"><div class="progress"><span id="p1">1 ITEM</span><span id="p2">2 DELIVERY</span><span id="p3">3 CONFIRM</span></div><div class="content"><span class="icon"></span><div><b id="title">ARC TASK LIGHT</b><small id="detail">$39 · IN STOCK</small></div></div><div class="button" id="button">CONTINUE →</div></div></div>

.checkout{width:min(88%,490px);font:800 clamp(10px,max(1.5vmin,1vw),13px)/1.2 sans-serif}.chat{display:inline-block;padding:clamp(6px,1.3vmin,12px);background:var(--fg);color:var(--bg);margin-bottom:clamp(5px,1vmin,10px)}.panel{border:2px solid var(--fg);background:var(--surface);padding:clamp(8px,2vmin,18px)}.progress{display:flex;gap:clamp(3px,1vmin,8px)}.progress span{flex:1;border-bottom:3px solid var(--line);padding-bottom:5px;font-size:clamp(10px,max(1.1vmin,1vw),12px);color:var(--muted)}.progress span.active{border-color:var(--accent);color:var(--accent)}.content{display:flex;align-items:center;gap:clamp(8px,2vmin,18px);min-height:clamp(65px,18vmin,115px)}.content .icon{width:clamp(32px,9vmin,65px);aspect-ratio:1;background:linear-gradient(135deg,var(--accent),var(--accent-3))}.content div{display:grid;gap:5px}.content small{color:var(--muted)}.button{background:var(--accent);color:white;text-align:center;padding:clamp(6px,1.2vmin,11px);cursor:pointer}small{font-size:max(.833em,10px,1vw)}

const steps=[...document.querySelectorAll('.progress span')],title=document.querySelector('#title'),detail=document.querySelector('#detail'),button=document.querySelector('#button');const states=[['ARC TASK LIGHT','$39 · IN STOCK','CONTINUE →'],['DELIVERY','HOME · 2–4 DAYS','REVIEW →'],['FINAL REVIEW','TOTAL $39 · BUYER CONFIRMATION','START AGAIN']];let step=0;function render(){steps.forEach((e,i)=>e.classList.toggle('active',i<=step));title.textContent=states[step][0];detail.textContent=states[step][1];button.textContent=states[step][2]}function next(){step=(step+1)%3;render()}button.addEventListener('click',next);setInterval(next,1900);render();