index.css

:root {
  --font-fluid-base: 18px;
  --font-fluid-ratio: 1.1;

  --color-blue-300: oklch(0.849609 0.078125 240);
  --color-blue-500: oklch(0.71875 0.151562 240);
  --color-blue-600: oklch(0.605469 0.135937 240);
  --color-blue-700: oklch(0.517578 0.115625 240);
  --color-green-500: oklch(0.714844 0.151562 123.333);
  --color-green-600: oklch(0.603516 0.135937 123.333);
  --color-indigo-500: oklch(0.726563 0.151562 260);
  --color-indigo-600: oklch(0.613281 0.135937 260);
  --color-orange-500: oklch(0.738281 0.151562 43.3333);
  --color-orange-600: oklch(0.623047 0.135937 43.3333);
  --color-red-300: oklch(0.861328 0.078125 20);
  --color-red-500: oklch(0.742188 0.151562 20);
  --color-red-600: oklch(0.626953 0.135937 20);
  --color-red-700: oklch(0.535156 0.115625 20);
  --color-sand-100: oklch(0.964844 0.012 75);
  --color-sand-900: oklch(0.302734 0.012 75);
  --color-violet-500: oklch(0.734375 0.151562 280);
  --color-violet-600: oklch(0.619141 0.135937 280);
  --color-yellow-500: oklch(0.726563 0.151562 90);
  --color-yellow-600: oklch(0.611328 0.135937 90);
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: var(--color-sand-100);
    --text-color: var(--color-sand-900);
  }

  .follow {
    --follow-decoration-color: var(--color-red-300);
  }

  .follow:focus-visible {
    --follow-decoration-color: var(--color-red-700);
  }

  a.follow {
    --follow-decoration-color: var(--color-blue-300);

    color: var(--color-blue-700);
  }

  a.follow:focus-visible {
    --follow-decoration-color: var(--color-blue-700);
  }

  ::highlight(effects-player-rainbow-1) {
    color: var(--color-red-600);
  }

  ::highlight(effects-player-rainbow-2) {
    color: var(--color-orange-600);
  }

  ::highlight(effects-player-rainbow-3) {
    color: var(--color-yellow-600);
  }

  ::highlight(effects-player-rainbow-4) {
    color: var(--color-green-600);
  }

  ::highlight(effects-player-rainbow-5) {
    color: var(--color-blue-600);
  }

  ::highlight(effects-player-rainbow-6) {
    color: var(--color-indigo-600);
  }

  ::highlight(effects-player-rainbow-7) {
    color: var(--color-violet-600);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--color-sand-900);
    --text-color: var(--color-sand-100);
  }

  .follow {
    --follow-decoration-color: var(--color-red-700);
  }

  .follow:focus-visible {
    --follow-decoration-color: var(--color-red-300);
  }

  a.follow {
    --follow-decoration-color: var(--color-blue-700);

    color: var(--color-blue-300);
  }

  a.follow:focus-visible {
    --follow-decoration-color: var(--color-blue-300);
  }

  ::highlight(effects-player-rainbow-1) {
    color: var(--color-red-500);
  }

  ::highlight(effects-player-rainbow-2) {
    color: var(--color-orange-500);
  }

  ::highlight(effects-player-rainbow-3) {
    color: var(--color-yellow-500);
  }

  ::highlight(effects-player-rainbow-4) {
    color: var(--color-green-500);
  }

  ::highlight(effects-player-rainbow-5) {
    color: var(--color-blue-500);
  }

  ::highlight(effects-player-rainbow-6) {
    color: var(--color-indigo-500);
  }

  ::highlight(effects-player-rainbow-7) {
    color: var(--color-violet-500);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prefers-reduced-motion-no-preference-only {
    display: none;
  }
}

html {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: calc(var(--font-fluid-base) + var(--font-fluid-ratio) * 1vw);
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0.5rem;
}

main {
  margin: 15vh auto;
  max-width: 40rem;
}

p {
  line-height: 1.7rem;
}

a {
  color: var(--text-color);
  text-decoration: none;
}

.follow {
  --follow-decoration-offset: 0.25em;
  --follow-decoration-height: 0.1em;

  background-image: linear-gradient(90deg, var(--follow-decoration-color) 100%, transparent 0%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% var(--follow-decoration-height);
  border-radius: 0.3em;
  cursor: pointer;
  margin: 0 calc(var(--follow-decoration-offset) * -1);
  outline: none;
  padding: 0 var(--follow-decoration-offset);
  transition-duration: 0.2s;
  transition-property: background-size, color;
}

.follow:hover,
.follow:focus-visible {
  --follow-decoration-height: 100%;
}

.follow:focus-visible {
  color: var(--background-color);
}

@media (scripting: enabled) {
  collapse-handle[disabled].follow,
  effects-player:not([stopped]).follow {
    background-image: unset;
    cursor: unset;
  }
}

@media (scripting: none) {
  collapse-handle.follow {
    background-image: unset;
    cursor: unset;
  }
}

@media (scripting: enabled) {
  collapse-entry[opened]:not([once]) > *:not(collapse-content) {
    display: none;
  }
}

@media (scripting: none) {
  collapse-entry:not([once]) > *:not(collapse-content) {
    display: none;
  }

  collapse-content,
  span[hidden] {
    display: inline;
  }

  p[hidden] {
    display: block;
  }
}

@media (scripting: enabled) {
  .no-js-only {
    display: none;
  }
}

@media (scripting: none) {
  .js-only {
    display: none;
  }
}