.array > b, .array {
  border: 1px solid var(--border-color);
  font-size: .97em;
  line-height: 1.2em;
  display: inline-block;
}

.array > span {
  margin: 0 .12em 0 .05em;
}

.array > b:hover {
  background-color: #fea;
}

.array {
  background-color: #fdfdf0;
  border-radius: .4em;
  margin: 0 .1em .1em 0;
  padding: .05em .2em;
}

.array > b {
  background-color: var(--background-color);
  word-break: break-all;
  border-radius: .3em;
  margin: 0;
  padding: 0 .15em;
  font-weight: 300;
}

.array > .array {
  background-color: #f0fee4;
  margin-left: .1em;
}

.array > .array > .array {
  background-color: #edf2ff;
  margin-left: .1em;
}

.password-strength {
  --password-strength-empty-color: #e0e0e0;
  --password-strength-1-color: #d32f2f;
  --password-strength-2-color: #ef6c00;
  --password-strength-3-color: #f9a825;
  --password-strength-4-color: #2e7d32;
  align-items: center;
  gap: .25em;
  display: flex;
}

.password-strength > .segment {
  background-color: var(--password-strength-empty-color);
  border-radius: .2em;
  flex: 1;
  height: .4em;
}

.password-strength > .level {
  text-align: right;
  min-width: 5.5em;
  min-height: 1.2em;
  font-size: .85em;
  line-height: 1.2em;
}

.password-strength[data-level="1"] > .segment:nth-child(-n+1) {
  background-color: var(--password-strength-1-color);
}

.password-strength[data-level="2"] > .segment:nth-child(-n+2) {
  background-color: var(--password-strength-2-color);
}

.password-strength[data-level="3"] > .segment:nth-child(-n+3) {
  background-color: var(--password-strength-3-color);
}

.password-strength[data-level="4"] > .segment:nth-child(-n+4) {
  background-color: var(--password-strength-4-color);
}