form {
  display: grid;
  gap: 10px;
}

input, select {
  width: calc(100% - 16px);
}

input[type="button"] {
  width: min(48rem, 100%);
  margin: 10px;
}

input[type="checkbox"] {
  width: unset;
}

textarea {
  white-space: nowrap;
  width: calc(100% - 16px);
  height: calc(100% - 2rem);
}

label:has(#lock) {
  text-align: right;
}

#form {
  grid-template-columns: repeat(3, min(16rem, calc(100% / 3)));
}

#details {
  display: grid;
  grid-template-columns: min(16rem, 33%) min(32rem, 66%);
}

#result {
  white-space: pre-line;
  word-break: break-all;
  width: min(48rem, 100%);
  height: 5rem;
}