<div class="ctrls">
  <input type="radio" name="mode" value="default" checked />
  <input type="radio" name="mode" value="dark" />
  <input type="radio" name="mode" value="grayscale" />
</div>
<div class="row">
  <div class="col">
    <p style="--background--: var(--red-50); --color--: var(--red-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-100); --color--: var(--red-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-150); --color--: var(--red-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-200); --color--: var(--red-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-250); --color--: var(--red-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-300); --color--: var(--red-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-350); --color--: var(--red-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-400); --color--: var(--red-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-400); --color--: var(--red-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-450); --color--: var(--red-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-500); --color--: var(--red-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-550); --color--: var(--red-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-600); --color--: var(--red-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-650); --color--: var(--red-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-700); --color--: var(--red-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--red-750); --color--: var(--red-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col">
    <p style="--background--: var(--yellow-50); --color--: var(--yellow-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-100); --color--: var(--yellow-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-150); --color--: var(--yellow-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-200); --color--: var(--yellow-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-250); --color--: var(--yellow-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-300); --color--: var(--yellow-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-350); --color--: var(--yellow-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-400); --color--: var(--yellow-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-400); --color--: var(--yellow-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-450); --color--: var(--yellow-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-500); --color--: var(--yellow-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-550); --color--: var(--yellow-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-600); --color--: var(--yellow-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-650); --color--: var(--yellow-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-700); --color--: var(--yellow-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--yellow-750); --color--: var(--yellow-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col">
    <p style="--background--: var(--green-50); --color--: var(--green-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-100); --color--: var(--green-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-150); --color--: var(--green-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-200); --color--: var(--green-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-250); --color--: var(--green-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-300); --color--: var(--green-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-350); --color--: var(--green-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-400); --color--: var(--green-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-400); --color--: var(--green-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-450); --color--: var(--green-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-500); --color--: var(--green-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-550); --color--: var(--green-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-600); --color--: var(--green-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-650); --color--: var(--green-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-700); --color--: var(--green-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--green-750); --color--: var(--green-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col">
    <p style="--background--: var(--blue-50); --color--: var(--blue-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-100); --color--: var(--blue-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-150); --color--: var(--blue-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-200); --color--: var(--blue-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-250); --color--: var(--blue-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-300); --color--: var(--blue-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-350); --color--: var(--blue-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-400); --color--: var(--blue-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-400); --color--: var(--blue-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-450); --color--: var(--blue-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-500); --color--: var(--blue-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-550); --color--: var(--blue-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-600); --color--: var(--blue-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-650); --color--: var(--blue-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-700); --color--: var(--blue-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--blue-750); --color--: var(--blue-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col">
    <p style="--background--: var(--gray-50); --color--: var(--gray-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-100); --color--: var(--gray-450);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-150); --color--: var(--gray-500);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-200); --color--: var(--gray-550);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-250); --color--: var(--gray-600);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-300); --color--: var(--gray-650);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-350); --color--: var(--gray-700);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-400); --color--: var(--gray-750);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-400); --color--: var(--gray-50);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-450); --color--: var(--gray-100);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-500); --color--: var(--gray-150);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-550); --color--: var(--gray-200);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-600); --color--: var(--gray-250);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-650); --color--: var(--gray-300);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-700); --color--: var(--gray-350);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="--background--: var(--gray-750); --color--: var(--gray-400);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
html {
  & {
    --black: #000;
    --white: #fff;
    --borw: var(--black);
    --worb: var(--white);
    --red: hsl(0, 90%, 64%);
    --red-50: color-mix(in srgb, var(--worb), var(--red) 12.5%);
    --red-100: color-mix(in srgb, var(--worb), var(--red) 25%);
    --red-150: color-mix(in srgb, var(--worb), var(--red) 37.5%);
    --red-200: color-mix(in srgb, var(--worb), var(--red) 50%);
    --red-250: color-mix(in srgb, var(--worb), var(--red) 62.5%);
    --red-300: color-mix(in srgb, var(--worb), var(--red) 75%);
    --red-350: color-mix(in srgb, var(--worb), var(--red) 87.5%);
    --red-400: var(--red);
    --red-450: color-mix(in srgb, var(--borw), var(--red) 87.5%);
    --red-500: color-mix(in srgb, var(--borw), var(--red) 75%);
    --red-550: color-mix(in srgb, var(--borw), var(--red) 62.5%);
    --red-600: color-mix(in srgb, var(--borw), var(--red) 50%);
    --red-650: color-mix(in srgb, var(--borw), var(--red) 37.5%);
    --red-700: color-mix(in srgb, var(--borw), var(--red) 25%);
    --red-750: color-mix(in srgb, var(--borw), var(--red) 12.5%);
    --yellow: hsl(40, 90%, 43%);
    --yellow-50: color-mix(in srgb, var(--worb), var(--yellow) 12.5%);
    --yellow-100: color-mix(in srgb, var(--worb), var(--yellow) 25%);
    --yellow-150: color-mix(in srgb, var(--worb), var(--yellow) 37.5%);
    --yellow-200: color-mix(in srgb, var(--worb), var(--yellow) 50%);
    --yellow-250: color-mix(in srgb, var(--worb), var(--yellow) 62.5%);
    --yellow-300: color-mix(in srgb, var(--worb), var(--yellow) 75%);
    --yellow-350: color-mix(in srgb, var(--worb), var(--yellow) 87.5%);
    --yellow-400: var(--yellow);
    --yellow-450: color-mix(in srgb, var(--borw), var(--yellow) 87.5%);
    --yellow-500: color-mix(in srgb, var(--borw), var(--yellow) 75%);
    --yellow-550: color-mix(in srgb, var(--borw), var(--yellow) 62.5%);
    --yellow-600: color-mix(in srgb, var(--borw), var(--yellow) 50%);
    --yellow-650: color-mix(in srgb, var(--borw), var(--yellow) 37.5%);
    --yellow-700: color-mix(in srgb, var(--borw), var(--yellow) 25%);
    --yellow-750: color-mix(in srgb, var(--borw), var(--yellow) 12.5%);
    --green: hsl(100, 80%, 35%);
    --green-50: color-mix(in srgb, var(--worb), var(--green) 12.5%);
    --green-100: color-mix(in srgb, var(--worb), var(--green) 25%);
    --green-150: color-mix(in srgb, var(--worb), var(--green) 37.5%);
    --green-200: color-mix(in srgb, var(--worb), var(--green) 50%);
    --green-250: color-mix(in srgb, var(--worb), var(--green) 62.5%);
    --green-300: color-mix(in srgb, var(--worb), var(--green) 75%);
    --green-350: color-mix(in srgb, var(--worb), var(--green) 87.5%);
    --green-400: var(--green);
    --green-450: color-mix(in srgb, var(--borw), var(--green) 87.5%);
    --green-500: color-mix(in srgb, var(--borw), var(--green) 75%);
    --green-550: color-mix(in srgb, var(--borw), var(--green) 62.5%);
    --green-600: color-mix(in srgb, var(--borw), var(--green) 50%);
    --green-650: color-mix(in srgb, var(--borw), var(--green) 37.5%);
    --green-700: color-mix(in srgb, var(--borw), var(--green) 25%);
    --green-750: color-mix(in srgb, var(--borw), var(--green) 12.5%);
    --blue: hsl(220, 90%, 59%);
    --blue-50: color-mix(in srgb, var(--worb), var(--blue) 12.5%);
    --blue-100: color-mix(in srgb, var(--worb), var(--blue) 25%);
    --blue-150: color-mix(in srgb, var(--worb), var(--blue) 37.5%);
    --blue-200: color-mix(in srgb, var(--worb), var(--blue) 50%);
    --blue-250: color-mix(in srgb, var(--worb), var(--blue) 62.5%);
    --blue-300: color-mix(in srgb, var(--worb), var(--blue) 75%);
    --blue-350: color-mix(in srgb, var(--worb), var(--blue) 87.5%);
    --blue-400: var(--blue);
    --blue-450: color-mix(in srgb, var(--borw), var(--blue) 87.5%);
    --blue-500: color-mix(in srgb, var(--borw), var(--blue) 75%);
    --blue-550: color-mix(in srgb, var(--borw), var(--blue) 62.5%);
    --blue-600: color-mix(in srgb, var(--borw), var(--blue) 50%);
    --blue-650: color-mix(in srgb, var(--borw), var(--blue) 37.5%);
    --blue-700: color-mix(in srgb, var(--borw), var(--blue) 25%);
    --blue-750: color-mix(in srgb, var(--borw), var(--blue) 12.5%);
    --gray: hsl(0, 0%, 50%);
    --gray-50: color-mix(in srgb, var(--worb), var(--gray) 12.5%);
    --gray-100: color-mix(in srgb, var(--worb), var(--gray) 25%);
    --gray-150: color-mix(in srgb, var(--worb), var(--gray) 37.5%);
    --gray-200: color-mix(in srgb, var(--worb), var(--gray) 50%);
    --gray-250: color-mix(in srgb, var(--worb), var(--gray) 62.5%);
    --gray-300: color-mix(in srgb, var(--worb), var(--gray) 75%);
    --gray-350: color-mix(in srgb, var(--worb), var(--gray) 87.5%);
    --gray-400: var(--gray);
    --gray-450: color-mix(in srgb, var(--borw), var(--gray) 87.5%);
    --gray-500: color-mix(in srgb, var(--borw), var(--gray) 75%);
    --gray-550: color-mix(in srgb, var(--borw), var(--gray) 62.5%);
    --gray-600: color-mix(in srgb, var(--borw), var(--gray) 50%);
    --gray-650: color-mix(in srgb, var(--borw), var(--gray) 37.5%);
    --gray-700: color-mix(in srgb, var(--borw), var(--gray) 25%);
    --gray-750: color-mix(in srgb, var(--borw), var(--gray) 12.5%);
  }
  &:has([value="dark"]:checked) {
    --borw: var(--white);
    --worb: var(--black);
  }
  &:has([value="grayscale"]:checked) {
    filter: grayscale(100%);
  }
}
[style~="--background--:"] {
  background: var(--background--);
}
[style~="--color--:"] {
  color: var(--color--);
}
body {
  margin: 0;
}
.ctrls {
  & {
    background: var(--black);
    color: var(--white);
    display: flex;
    position: sticky;
    inset-block-start: 0;
  }
  &:not(:hover, :focus-within) {
    opacity: 0.5;
  }
  & input {
    appearance: none;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    margin: 0;
    padding: 0.5em;
    padding-inline: 1em;
  }
  & input::before {
    content: attr(value);
    text-transform: uppercase;
  }
  & input:checked {
    background: color-mix(in srgb, var(--black), var(--white) 25%);
  }
}
.row {
  & {
    display: flex;
  }
  & p {
    margin: 0;
    padding: 1em;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.