styles.css

html {
  font-family: system-ui;
  line-height: 1.3;
  color: var(--text-color);
  background: var(--bg-color);
  -webkit-text-size-adjust: 100%;

  --text-color: black;
  --bg-color: white;
  --link-color: royalblue;
  --highlight-color: royalblue;
  --no-support-color: crimson;
  --separator-color: whitesmoke;
}

@media (prefers-color-scheme: dark) {
  html {
    --text-color: white;
    --bg-color: black;
    --link-color: yellow;
    --highlight-color: yellow;
    --no-support-color: palevioletred;
    --separator-color: dimgray;
  }
}

@media (min-width: 700px) {
  html {
    font-size: 125%;
  }
}

body {
  margin: 0;
}

main {
  padding-inline: 1em;
  max-width: 32em;
  margin-inline: auto;
  margin-block: 2rem;
}

main > * {
  margin-block: 2rem;
}

h1 {
  font-size: 1.5em;
}

ul {
  list-style: none;
  padding: 0;
  margin-block: 2em;
}

li {
  padding-block: 0.45em 0.5em;
  display: flex;
  flex-wrap: wrap;
  gap: calc(1ch - 0.3em);
  color: var(--no-support-color);
}

li:not(:first-child) {
  border-top: 1px solid var(--separator-color);
}

b,
i {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  font-style: normal;
}

b {
  flex-basis: 100%;
  padding-right: 0.15em;
}

@media (min-width: 550px) {
  b {
    flex-basis: auto;
  }
}

b::after {
  content: ':';
}

i {
  padding-inline: 0.15em;
  padding-bottom: 0.1em;
}

i::before,
i::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

i:not(b + i)::before {
  content: ', ';
}

i::after {
  content: ' is not supported in browser';
}

footer {
  position: fixed;
  top: 0.3ch;
  right: 0.6ch;
}

a {
  color: var(--link-color);
}

@media (prefers-reduced-motion: no-preference) {
  #prm i:nth-of-type(1) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #prm i:nth-of-type(2) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-reduced-transparency: no-preference) {
  #prt i:nth-of-type(1) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  #prt i:nth-of-type(2) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-contrast: no-preference) {
  #pc i:nth-of-type(1) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-contrast: less) {
  #pc i:nth-of-type(2) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-contrast: more) {
  #pc i:nth-of-type(3) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-contrast: custom) {
  #pc i:nth-of-type(4) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (forced-colors: none) {
  #fc i:nth-of-type(1) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (forced-colors: active) {
  #fc i:nth-of-type(2) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-color-scheme: light) {
  #pcs i:nth-of-type(1) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-color-scheme: dark) {
  #pcs i:nth-of-type(2) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-reduced-data: no-preference) {
  #prd i:nth-of-type(1) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-reduced-data: reduce) {
  #prd i:nth-of-type(2) {
    background: var(--highlight-color);
    color: var(--bg-color);
    forced-color-adjust: none;

    &::after {
      content: ' is true';
    }
  }
}

@media (prefers-reduced-motion: no-preference),
  (prefers-reduced-motion: reduce) {
  #prm {
    color: var(--text-color);

    & i::after {
      content: ' is false';
    }
  }
}

@media (prefers-reduced-transparency: no-preference),
  (prefers-reduced-transparency: reduce) {
  #prt {
    color: var(--text-color);

    & i::after {
      content: ' is false';
    }
  }
}

@media (prefers-contrast: no-preference),
  (prefers-contrast: less),
  (prefers-contrast: more),
  (prefers-contrast: custom) {
  #pc {
    color: var(--text-color);

    & i::after {
      content: ' is false';
    }
  }
}

@media (forced-colors: none), (forced-colors: active) {
  #fc {
    color: var(--text-color);

    & i::after {
      content: ' is false';
    }
  }
}

@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
  #pcs {
    color: var(--text-color);

    & i::after {
      content: ' is false';
    }
  }
}

@media (prefers-reduced-data: no-preference), (prefers-reduced-data: reduce) {
  #prd {
    color: var(--text-color);

    & i::after {
      content: ' is false';
    }
  }
}

@media (forced-colors: active) {
  html {
    --highlight-color: var(--text-color);
  }

  .forced-colors-hidden {
    display: none;
  }
}