/* ----- Tester ----- */
.tester h3 {
  margin: 0;
}

.tester h3:nth-of-type(2) {
  margin-top: 1.5em;
}

.tester .tester-pattern {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
}

.tester input {
  padding: 0.5em;
}

.tester .buttons {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5em;
}

.tester button:first-child{
  justify-self: start;
}

.tester button:last-child {
  justify-self: end;
}

.tester pre {
  color: inherit;
  /* background-color: var(--alt-bg); */
  border: 1px solid var(--border);
  border-radius: 0.3em;
  padding: 0.5em;
  font-size: 1.1em;
  min-height: 10em;
  background: linear-gradient(to right, var(--hover) 0, var(--hover) 2em, transparent 2em, transparent 100%);
  padding-left: 2.5em;
}

.tester pre span {
  margin-left: -2em;
}

.pass {
  color: var(--pass);
}

.fail {
  color: var(--fail);
}

:is(.pass, .fail)::before {
  content: '✔';
  display: inline-block;
  width: 1em;
  margin-right: 1em;
  text-align: center;
}

.fail::before {
  content: '✘';
}