'; }function run() { els.runBtn.classList.add('running'); setStatus('Running…', true); els.preview.srcdoc = buildDoc(); saveState(); setTimeout(function () { els.runBtn.classList.remove('running'); setStatus('Ready', false); }, 260); }function setStatus(text, busy) { els.statusText.textContent = text; els.statusDot.classList.toggle('busy', !!busy); }els.runBtn.addEventListener('click', run); els.reloadBtn.addEventListener('click', function () { els.reloadBtn.style.transform = 'rotate(360deg)'; run(); setTimeout(function () { els.reloadBtn.style.transform = ''; }, 300); });els.resetBtn.addEventListener('click', function () { if (!confirm('Reset all three files back to the starter example? This clears your current code.')) return; applyState(STARTER); run(); });// ---------- auto-run (debounced) ---------- let debounceTimer; [els.html, els.css, els.js].forEach(function (area) { area.addEventListener('input', function () { if (!els.autorun.checked) return; clearTimeout(debounceTimer); setStatus('Editing…', true); debounceTimer = setTimeout(run, 500); }); });// tab key inserts spaces instead of moving focus document.querySelectorAll('.code-area').forEach(function (area) { area.addEventListener('keydown', function (e) { if (e.key === 'Tab') { e.preventDefault(); const start = area.selectionStart, end = area.selectionEnd; area.value = area.value.slice(0, start) + ' ' + area.value.slice(end); area.selectionStart = area.selectionEnd = start + 2; } }); });// ---------- clock ---------- function tick() { els.clock.textContent = new Date().toLocaleTimeString(); } tick(); setInterval(tick, 1000);// ---------- initial run ---------- run(); })();