/* Preserve each simulation's drawing coordinates while its displayed size changes. */
.canvas-container { --demo-columns: 2; grid-template-columns: repeat(var(--demo-columns), minmax(0, 1fr)); }
.canvas-container:has(> .canvas-wrapper:nth-child(3)) { --demo-columns: 3; }
.canvas-wrapper { min-width: 0; }
canvas { width: 100%; max-width: 100%; height: auto; }
.controls { flex-wrap: wrap; gap: 10px; }
.controls-left, .controls-right { flex-wrap: wrap; }
.controls-right { gap: 8px; }
/* Keep the comparison views together at reading width; stack only on phones. */
@media (max-width: 480px) {
  .canvas-container { grid-template-columns: minmax(0, 1fr); }
}