dyna3/app-proto/inversive-display/main.css

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-radius: 10px;
  margin-top: 5px;
}

.hidden {
  display: none;
}

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

input[type="radio"] {
  display: 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:hover:not(:has(:checked)) {
  border-color: #bbb;
  background-color: #333;
}

.control > span {
  width: 170px;
}

input {
  flex-grow: 1;
}