.styles {
  display: flex;
  flex-direction: column;

  li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing) * 3);
    border-block-start: var(--stroke-border) solid var(--color-border-base-tertiary);
    padding-block: calc(var(--spacing) * 6);

    &:first-child {
      border-block-start: none;
    }

    @media (width >= 40rem) {
      grid-template-columns: minmax(0, 1fr) calc(var(--spacing) * 96);
      align-items: baseline;
      gap: calc(var(--spacing) * 8);
    }
  }

  p {
    color: var(--color-text-base);
  }

  strong {
    font-weight: var(--font-weight-medium);
  }
}

.link {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
}

.spec {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
}

.value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-base-secondary);
}