.config {
  border: thin solid var(--border-0);
  border-radius: var(--fillet);
  background-color: var(--canvas-1);
}
.config {
  .detail {
    display: flex;
    flex-wrap: wrap;
    user-select: none;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0em 1ex;
    padding-top: 0.5ex;
  }
  .detail + .detail {
    border-top: thin solid var(--border-0);
  }
  .detail:nth-child(odd) {
    background-color: var(--canvas-0);
  }
  .detail:first-child {
    border-top-left-radius: var(--fillet);
    border-top-right-radius: var(--fillet);
  }
  .detail:last-child {
    border-bottom-left-radius: var(--fillet);
    border-bottom-right-radius: var(--fillet);
  }
  .feature {
    flex: 0 0 20em;
    line-height: 3rex;
    text-align: center;
    padding: 1rex;
  }
  .values {
    flex: 1 1 20em;
    display: flex;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 1ex;
  }
  .value {
    font-weight: var(--semibold);
    display: flex;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    padding: 0.5ex 1ex 0.25ex 1ex;
    border: thin solid transparent;
    border-radius: var(--fillet);
    
  }
  .value[active='active'] {
    color: var(--text-neg);
    background-color: var(--canvas-neg);
  }
  .value .count {
    width: 3rem;
    margin-left: 0.25em;
    text-align: left;
    color: var(--text-1);
  }
  .value[count='0'] {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    color: var(--text-2);
    .count {
      color: var(--text-2);
    }
  }
  .value:hover {
    box-shadow: 0 0 3px 0 hsl(220, 60%, 50%);
  }
  .value[count='0']:hover {
    border-color: transparent;
  }
}
h3.result {
  padding-top: 3ex;
}
hr.result {
  color: transparent;
}
.note {
  p {
    margin: 0;
    padding: 0.5rem 1.5rem 0.3rem 1rem; 
    border: thin solid var(--tip-border); 
    border-left-width: 0.5rem; 
    border-radius: var(--fillet);
    border-color: var(--note-border); 
    background-color: var(--note-canvas);
    max-width: max-content;
  }
}
div.result {
  display: flex;
  flex-flow: column nowrap;
  padding: 2ex;
  background-color: var(--canvas-0);
  border: thin solid var(--border-0);
  border-radius: var(--fillet);
}
div.result img {
  height: 10em;
  width: 10em;
  object-fit: contain;
  object-position: center;
}
div.result {
  .detail {
    display: flex;
    flex-flow: row wrap;
    gap: 0.25rem;
    align-content: center;
    padding-top: 1ex;
    padding-bottom: 0.5ex;
    border-top: thin solid var(--border-1);
  }
  .feature {
    flex: 1 1 auto;
    font-weight: var(--light);
  }
  .value {
    flex: 1 1 auto;
    text-align: right;
    font-weight: var(--semibold);
  }
}

figcaption {
  font-size: 0.85rem;
  text-align: center;
}
div.images {
  display: flex;
  flex-flow: row nowrap;
  place-content: space-between;
  div.icons {
    flex: 0 0 2rem;
    display: flex;
    flex-flow: column nowrap;
    place-content: flex-start;
    gap: 0.5rem;
    img {
      max-width: 1.5rem;
      max-height: 1.5rem;
    }
  }
  div.status {
    flex: 0 0 2rem;
  }
}
div.information {
}