:root {
  --body-margin: .5em;
  --label-width-2c: 16em;
  --gap-width: 1em;
  --input-width-2c: 30em;
  --grid-width-2c: calc(var(--label-width-2c) + var(--gap-width) + var(--input-width-2c));
  --full-width-2c: calc(var(--grid-width-2c) + 2 * var(--body-margin));
  --grid-width: min(100%, var(--grid-width-2c));
}

body {
  margin: var(--body-margin);
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
}

p {
  width: var(--grid-width);
}

#inputs {
  display: grid;
  grid-template-columns: var(--label-width-2c) var(--input-width-2c);
  /* variables are not supported in media queries: */
  @media (width < 48em /* var(--full-width-2c) */) {
    grid-template-columns: 100%;
  }
  gap: 1em;
  > * {
    align-self: self-start;
  }
}

textarea {
  height: 4lh;
}

#prefix, #letters {
  background: #eef;
}

button {
  margin: 0.5em 0.3em 0 0;
}

#out {
  display: block;
  width: var(--grid-width);
  background: #eef;
  white-space: pre-wrap;
}

#stat {
  display: grid;
  grid-template-columns: 1.5em 5em;
  > dt::after {
    content: ":";
  }
  > * {
    align-self: self-start;
    margin: 0;
    font-weight: bolder;
  }
  > dt.seen, > .seen + dd {
    opacity: 50%;
    text-decoration: line-through;
    font-weight: inherit;
  }
}