body {
  margin-left: 20px;
  margin-top: 20px;
  color: #fcfcfc;
  background-color: #202020;
}

#app {
  display: flex;
  flex-direction: column;
  width: 600px;
}

canvas {
  float: left;
  background-color: #020202;
  border: 1px solid #555;
  border-radius: 10px;
  margin-top: 5px;
}

canvas:focus {
  border-color: #aaa;
}

.hidden {
  display: none;
}

.control, .tab-pane {
  display: flex;
  flex-direction: row;
  width: 600px;
}

input[type="radio"] {
  appearance: none;
  width: 0px;
  height: 0px;
  padding: 0px;
  margin: 0px;
  outline: none;
}

.tab-pane > label {
  border: 1px solid #aaa;
  border-radius: 5px;
  text-align: center;
  padding: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
}

.tab-pane > label:has(:checked) {
  border-color: #fcfcfc;
  background-color: #555;
}

.tab-pane > label:has(:focus-visible) {
  outline: medium auto currentColor;
}

.tab-pane > label:hover:not(:has(:checked)) {
  border-color: #bbb;
  background-color: #333;
}

.control > span {
  width: 170px;
}

input {
  flex-grow: 1;
}