html > body > #grid .progress {
  /** Required arguments with purportedly ridiculous defaults */
  --element-color-secondary: red;
  --element-gap: 1000px;
  --element-gap-small: 500px;
  --element-background-pending: red;
  --element-background-achieved: red;

  /** Optional arguments with sensible defaults */
  --element-border-radius: none;
  --element-box-shadow: none;
  --element-strikethrough-color: #00000055;
  --element-strikethrough-width: 2px;

  display: flex;
  flex-direction: column;
  gap: var(--element-gap);

  > dl {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: var(--element-gap-small);

    > dt,
    > dd {
      grid-column: 2;
    }

    > dd {
      font-size: smaller;

      &,
      > a {
        color: var(--element-color-secondary);
      }
    }

    > dd {
      height: 1fr;
    }

    &:before {
      grid-column: 1;
      grid-row: 1 / span 2;
      content: attr(data-limit);
      border-radius: 9999px;
      margin-top: -.5ex;
      padding: .5ex;
      aspect-ratio: 1/1;
      width: 2ch;
      text-align: center;
    }

    &[data-is-achieved='no']:before {
      background: var(--element-background-pending);
    }

    &[data-is-achieved='yes']:before {
      background: var(--element-background-achieved);
    }

    &[data-is-achieved='yes'] > dt {
      text-decoration: line-through;
      text-decoration-color: var(--element-strikethrough-color);
      text-decoration-thickness: var(--element-strikethrough-width);
    }
  }
}