body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px;
  background-color: #ffffff;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  gap: 12px;
}

.section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.section.buttons {
  gap: 8px;
}

#canvas-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  position: relative;
}

#paint-canvas {
  border: 1px solid #ccc;
  background-color: #ffffff;
  cursor: crosshair;
}

#paint-canvas.grid {
  background-image:
    linear-gradient(#eee 1px, transparent 1px),
    linear-gradient(90deg, #eee 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
}

/* axis overlay shows vertical and horizontal axes at the center of the canvas */
#axis-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 800px;
  pointer-events: none;
  /* Two gradients to draw vertical and horizontal axis lines */
  background-image:
    linear-gradient(to right, transparent 50%, rgba(128, 128, 128, 0.4) 50%, rgba(128, 128, 128, 0.4) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent 50%, rgba(128, 128, 128, 0.4) 50%, rgba(128, 128, 128, 0.4) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
}