document.querySelectorAll('.arch-step').forEach(step => {
  step.addEventListener('click', function() {
    document.querySelectorAll('.arch-step').forEach(s => s.classList.remove('active'));
    document.querySelectorAll('.arch-code').forEach(c => c.classList.remove('active'));
    this.classList.add('active');
    const targetId = this.getAttribute('data-target');
    document.getElementById(targetId).classList.add('active');
  });
});