const steps=300;
  // Grid
  kCtx.strokeStyle='rgba(255,255,255,0.05)';kCtx.lineWidth=1;
  for(let i=0;i<=5;i++){const px=i/5*W;kCtx.beginPath();kCtx.moveTo(px,0);kCtx.lineTo(px,H);kCtx.stroke();}
  for(let i=0;i<=4;i++){const py=i/4*H;kCtx.beginPath();kCtx.moveTo(0,py);kCtx.lineTo(W,py);kCtx.stroke();}
  kCtx.strokeStyle='rgba(255,255,255,0.15)';kCtx.lineWidth=1.5;
  kCtx.beginPath();kCtx.moveTo(0,H-1);kCtx.lineTo(W,H-1);kCtx.stroke();
  kCtx.beginPath();kCtx.moveTo(1,0);kCtx.lineTo(1,H);kCtx.stroke();

  function conc(t){
    if(order===0)return Math.max(0,A0-k*t);
    if(order===1)return A0*Math.exp(-k*t);
    return A0/(1+k*A0*t);
  }

  // [A] curve
  kCtx.strokeStyle='#69f0ae';kCtx.lineWidth=2.5;kCtx.beginPath();
  for(let i=0;i<=steps;i++){
    const t=i/steps*tMax;const c=conc(t);
    const p={x:i/steps*W,y:H-c/A0*(H-20)};
    i===0?kCtx.moveTo(p.x,p.y):kCtx.lineTo(p.x,p.y);
  }
  kCtx.stroke();
  // Rate curve
  kCtx.strokeStyle='#ff4d6d';kCtx.lineWidth=1.5;kCtx.setLineDash([4,4]);kCtx.beginPath();
  for(let i=0;i<=steps;i++){
    const t=i/steps*tMax;const c=conc(t);
    let rate=0;
    if(order===0)rate=k;
    else if(order===1)rate=k*c;
    else rate=k*c*c;
    const maxRate=order===0?k:order===1?k*A0:k*A0*A0;
    const p={x:i/steps*W,y:H-rate/maxRate*(H-20)};
    i===0?kCtx.moveTo(p.x,p.y):kCtx.lineTo(p.x,p.y);
  }
  kCtx.stroke();kCtx.setLineDash([]);
  kCtx.fillStyle='rgba(105,240,174,0.8)';kCtx.font='11px Space Mono';kCtx.textAlign='left';kCtx.fillText('[A] vs time',8,18);
  kCtx.fillStyle='rgba(255,77,109,0.8)';kCtx.fillText('Rate vs time (dashed)',8,34);

  // Energy profile
  const EW=eC.width,EH=eC.height;
  eCtx.clearRect(0,0,EW,EH);eCtx.fillStyle='#000';eCtx.fillRect(0,0,EW,EH);
  const Eproduct=Ea*0.3;
  const pts=[[0,0],[0.3,0],[0.5,Ea],[0.7,Eproduct],[1,Eproduct]];
  const catPts=[[0,0],[0.3,0],[0.5,Ea-cat],[0.7,Eproduct],[1,Eproduct]];
  function drawEnergyCurve(pts,color){
    eCtx.strokeStyle=color;eCtx.lineWidth=2.5;eCtx.beginPath();
    pts.forEach((p,i)=>{
      const x=p[0]*EW*0.85+EW*0.08;
      const y=EH-20-p[1]/Ea*(EH-50);
      i===0?eCtx.moveTo(x,y):eCtx.bezierCurveTo(x-20,y,x-20,y,x,y);
    });
    eCtx.stroke();
  }
  drawEnergyCurve(pts,'#69f0ae');
  if(cat>0)drawEnergyCurve(catPts,'#ffb300');
  // Labels
  eCtx.fillStyle='rgba(105,240,174,0.8)';eCtx.font='10px Space Mono';eCtx.textAlign='center';
  eCtx.fillText('Reactants',EW*0.1,EH-5);
  eCtx.fillText('Products',EW*0.92,EH-5);
  eCtx.fillText(`Ea=${(Ea/1000).toFixed(0)} kJ/mol`,EW*0.5,EH-EH*0.7);
  if(cat>0){eCtx.fillStyle='rgba(255,179,0,0.8)';eCtx.fillText(`Ea(cat)=${((Ea-cat)/1000).toFixed(0)} kJ/mol`,EW*0.5,EH-EH*0.5);}
  eCtx.strokeStyle='rgba(255,255,255,0.15)';eCtx.lineWidth=1;
  eCtx.beginPath();eCtx.moveTo(0,EH-20);eCtx.lineTo(EW,EH-20);eCtx.stroke();
}
redraw();
</script>
</body>
</html>