.rhythm-signatures {
  --rhythm-signatures-border: var(--jm-border-soft, var(--bs-border-color));

  &__panel {
    background: var(--jm-glass-bg, var(--bs-tertiary-bg));
    border: 1px solid var(--rhythm-signatures-border);
    border-radius: .75rem;
  }

  &__catalog {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  }

  &__signature {
    font-size: 1.1rem;
    font-weight: 750;
  }

  &__circle {
    margin-inline: auto;
    max-width: 30rem;
  }

  &__circle svg {
    display: block;
    height: auto;
    max-height: 30rem;
  }

  &__score {
    min-height: 12rem;
    overflow-x: auto;
  }

  &__meter-value {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
  }
}