@layer reset, token, pen, extra;
@layer token {
  :root {
    --fg: hsl(264, 45.5%, 12.9%);
    --bg: hsl(225, 15.4%, 94.9%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --fg: hsl(225, 15.4%, 94.9%);
      --bg: hsl(264, 45.5%, 12.9%);
      --accent: wheat;
    }
  }
}
@layer pen {
  ul {
    margin: 0;
    padding: 0;
    -moz-columns: auto 12em;
         columns: auto 12em;
    gap: 1.5em;
    list-style-type: "";
  }

  li {
    --dot: 2px;
    --space: calc(var(--dot) * 3);
    --min-dot-count: 2;
    --gap: calc(var(--min-dot-count) * var(--space));
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    display: flex;
    align-items: flex-end;
    gap: var(--dot);
  }
  li + li {
    -webkit-margin-before: 0.5em;
            margin-block-start: 0.5em;
  }

  .txt {
    flex: 1 1 0;
    -webkit-padding-end: var(--gap);
            padding-inline-end: var(--gap);
  }
  .txt > span {
    -webkit-padding-end: calc(var(--space) - var(--dot));
            padding-inline-end: calc(var(--space) - var(--dot));
    background: var(--bg);
  }

  .num {
    flex: 0 0 auto;
    text-align: right;
  }

  /* Two solutions below: inline and pseudo */
  .inline-bg .txt {
    background: radial-gradient(circle, currentColor calc(var(--dot) / 2), transparent 0) repeat-x 100% calc(100% - var(--dot) * 2)/var(--space) var(--dot);
  }

  .pseudo-bg .txt {
    position: relative;
  }
  .pseudo-bg .txt::before {
    content: "";
    position: absolute;
    inset-block: auto calc(var(--dot) * 2);
    z-index: 0;
    inline-size: 100%;
    block-size: var(--dot);
    background: radial-gradient(circle, currentColor calc(var(--dot) / 2), transparent 0) 100% 100%/calc(var(--space));
    background-repeat: space;
  }
  .pseudo-bg .txt > span {
    position: relative;
    z-index: 1;
  }
}
@layer reset {
  *,
*::before,
*::after {
    box-sizing: border-box;
  }

  html {
    height: 100%;
  }

  body {
    min-height: 100%;
    margin: 0;
    line-height: 1.2;
    color: var(--fg, #fff);
    background-color: var(--bg, #000);
    font-family: var(--font, sans-serif);
  }

  p {
    margin: 0;
  }

  input,
select,
option,
textarea {
    font: inherit;
  }
}
@layer extra {
  section {
    padding: 1em;
  }

  section + section {
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
  }

  h2 {
    margin: 0;
  }

  h2 + p {
    -webkit-margin-before: 0.125em;
            margin-block-start: 0.125em;
    font-style: italic;
  }

  p + ul {
    -webkit-margin-before: 0.5em;
            margin-block-start: 0.5em;
    -webkit-padding-before: 0.5em;
            padding-block-start: 0.5em;
    -webkit-border-before: 1px solid var(--accent);
            border-block-start: 1px solid var(--accent);
  }

  h2 {
    color: var(--accent);
  }
}