const colors = ['#EEF2FF','#FEF3C7','#F0FDF4','#FFF1F2'];
let ci = 0;
function changeColor(){ ci=(ci+1)%colors.length; document.getElementById('box').style.background=colors[ci]; }
function changeText(){ document.getElementById('title').textContent='DOM Changed! 🎉'; }
function addEl(){ const s=document.createElement('span'); s.textContent='⭐'; s.style.fontSize='24px'; document.getElementById('box').appendChild(s); }
function resetAll(){ document.getElementById('box').style.background='#EEF2FF'; document.getElementById('title').textContent='Click the buttons!'; document.getElementById('box').querySelectorAll('span').forEach(s=>s.remove()); }