h1, h2, h3, h4, h5, p, figure, dl, dt, dd, ul, ol, li {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  position: relative;
  border: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
}
button:focus {
  outline: none;
}

img, svg {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

svg {
  overflow: visible;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.field {
  display: flex;
  column-gap: 50px;
}

.result {
  flex-shrink: 0;
  width: 500px;
}
.result .image {
  position: relative;
}
.result .image > figure {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.result .image > figure img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.result .image > a {
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: underline;
}
.result .image.top {
  aspect-ratio: 5/4;
}
.result .image.bottom {
  aspect-ratio: 5/3;
}

.select section + section {
  margin-top: 50px;
}
.select h3 {
  margin-top: 20px;
  margin-bottom: 5px;
}
.select h2 + h3 {
  margin-top: 10px;
}
.select .buttons1 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
}
.select .button1 {
  position: relative;
  width: 100px;
}
.select .button1 > input {
  position: absolute;
  inset: 0;
  margin: 0;
  appearance: none;
  cursor: pointer;
}
.select .button1 > input:checked + figure {
  border-color: red;
}
.select .button1 > input:disabled {
  pointer-events: none;
}
.select .button1 > input:disabled + figure {
  color: #ddd;
}
.select .button1 > input:disabled + figure > p {
  color: #ccc;
}
.select .button1 > input:disabled ~ p {
  color: #ccc;
}
.select .button1 > figure {
  aspect-ratio: 1/1;
  border: 1px solid;
}
.select .button1 > figure > p {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: bold;
}
.select .button1 > p {
  font-weight: bold;
  text-align: center;
}
.select .buttons2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 10px;
}
.select .button2 {
  aspect-ratio: 4/1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 2em;
}
.select .button2 > input {
  position: absolute;
  border: 1px solid;
  inset: 0;
  appearance: none;
  margin: 0;
  cursor: pointer;
}
.select .button2 > input[value=MB] {
  background: #000;
  border-color: transparent;
}
.select .button2 > input[value=MNV] {
  background: navy;
  border-color: transparent;
}
.select .button2 > input[value=TQ] {
  background: turquoise;
  border-color: transparent;
}
.select .button2 > input[value=OIG] {
  background: DarkSeaGreen;
  border-color: transparent;
}
.select .button2 > input[value=CY] {
  background: SandyBrown;
  border-color: transparent;
}
.select .button2 > input[value=DU] {
  background: NavajoWhite;
  border-color: transparent;
}
.select .button2 > input[value=MPI] {
  background: HotPink;
  border-color: transparent;
}
.select .button2 > input[value=W] {
  background: white;
}
.select .button2 > input[value=W] + p {
  color: #000;
}
.select .button2 > input[value=B] {
  background: #000;
  border-color: transparent;
}
.select .button2 > input[value=IV] {
  background: ivory;
}
.select .button2 > input[value=IV] + p {
  color: #000;
}
.select .button2 > input[value=NV] {
  background: navy;
  border-color: transparent;
}
.select .button2 > input[value=CR] {
  background: Crimson;
  border-color: transparent;
}
.select .button2 > input:checked {
  border-color: red;
}
.select .button2 > input:disabled {
  background: #ddd;
  border-color: #ddd;
  pointer-events: none;
}
.select .button2 > input:disabled + p {
  color: #ccc;
}
.select .button2 > p {
  position: relative;
  color: #fff;
  pointer-events: none;
}