.tool-btn {
  margin-right: 8px;
  padding: 4px 10px;
  font-size: 1em;
  border: 1px solid #aaa;
  background: #f8f8f8;
  cursor: pointer;
  border-radius: 4px;
}
.tool-btn.selected {
  background: #d0eaff;
  border-color: #3399ff;
}
body {
  font-family: sans-serif;
  padding: 20px;
}
.grid {
  display: grid;
  margin-bottom: 20px;
  user-select: none;
}
.cell {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #eee;
}
.cell.active {
  background: #333;
}
.preview-cell {
  width: 4px;
  height: 4px;
  border: none;
  background: #eee;
}
.preview-cell.active {
  background: #999;
}
.controls {
  margin-bottom: 10px;
}
textarea {
  width: 1200px;
  height: 1em;
}
button {
  margin: 5px 5px 5px 0;
}

/* Color picker styling */
input[type="color"] {
  width: 40px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

input[type="color"]:hover {
  border-color: #999;
}