<main>
  <ul class="caption">
    <li class="safari">Safari</li>
    <li class="firefox">Firefox</li>
    <li class="edge">Edge</li>
    <li class="chrome">Chrome</li>
  </ul>
  <!--  Some unrelated elements in between -->

  <div class="rays">
    <a href="https://drafts.csswg.org/css-anchor-position-1/#anchoring">
      <strong>Anchor Positioning</strong>
      <ul>
        <li class="safari" data-status="unavailable"></li>
        <li class="firefox" data-status="unavailable"></li>
        <li class="edge" data-status="available"></li>
        <li class="chrome" data-status="available"></li>
      </ul>
    </a>
    <a href="https://drafts.csswg.org/css-conditional-5/#container-queries">
      <strong>Container Queries</strong>
      <ul>
        <li class="safari" data-status="available"></li>
        <li class="firefox" data-status="available"></li>
        <li class="edge" data-status="available"></li>
        <li class="chrome" data-status="available"></li>
      </ul>
    </a>
    <a href="https://drafts.csswg.org/css-conditional-5/#style-container">
      <strong>Container Style Queries</strong>
      <ul>
        <li class="safari" data-status="available"></li>
        <li class="firefox" data-status="unavailable"></li>
        <li class="edge" data-status="available"></li>
        <li class="chrome" data-status="available"></li>
      </ul>
    </a>
    <a href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
      <strong>@scope</strong>
      <ul>
        <li class="safari" data-status="available"></li>
        <li class="firefox" data-status="unavailable"></li>
        <li class="edge" data-status="available"></li>
        <li class="chrome" data-status="available"></li>
      </ul>
    </a>
  </div>
</main>

main:has(.caption .safari:hover) {
  ul .safari[data-status="available"] {
    z-index: 2;
    position: relative;
    transform: scale(1.1);
  }

  li:not(.safari[data-status="available"]) {
    opacity: 0.4;
  }
}

main:has(.caption .firefox:hover) {
  ul .firefox[data-status="available"] {
    z-index: 2;
    position: relative;
    transform: scale(1.1);
  }

  li:not(.firefox[data-status="available"]) {
    opacity: 0.4;
  }
}

main:has(.caption .edge:hover) {
  ul .edge[data-status="available"] {
    z-index: 2;
    position: relative;
    transform: scale(1.1);
  }

  li:not(.edge[data-status="available"]) {
    opacity: 0.4;
  }
}

main:has(.caption .chrome:hover) {
  ul .chrome[data-status="available"] {
    z-index: 2;
    position: relative;
    transform: scale(1.1);
  }

  li:not(.chrome[data-status="available"]) {
    opacity: 0.4;
  }
}

@layer demo {
  :root {
    --rem-value: clamp(12px, 2.5vw, 18px);
    --inner-spacing: 1.5rem;
    --outer-spacing: 3.5rem;

    --safari-color: oklch(50.84% 0.2484 285.61);
    --firefox-color: oklch(68% 0.171 70.67);
    --edge-color: oklch(60% 0.1068 169.71);
    --chrome-color: oklch(55% 0.2175 24.16);
    --unavailable-color: oklch(20% 0.075 290);

    --background: radial-gradient(
      circle at bottom center,
      lch(16.13% 41.77 303) 30%,
      lch(7.36% 0.52 19.7) 100%
    );

    --text-color: #dbdbdb;
    --ray-text-color: #dbdbdb;
  }

  *,
  *::before,
  *::after {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  html {
    font-family: "Montserrat", sans-serif;
    font-size: var(--rem-value);
    color: var(--text-color);

    overflow: hidden;
    color-scheme: dark;
  }

  body {
    height: 100dvh;

    overflow: hidden;

    background: var(--background);
  }

  a:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
  }

  main {
    display: flex;
    flex-flow: column;
    gap: var(--outer-spacing);
    padding: var(--outer-spacing);
  }

  .caption {
    display: flex;
    flex-flow: row wrap;
    gap: var(--inner-spacing);

    list-style: none inside;

    li {
      display: flex;
      gap: 10px;
      align-items: center;

      cursor: default;

      &::before {
        display: block;

        content: "";
        width: 1.5rem;
        aspect-ratio: 1;

        background-color: var(--browser-color);
      }
    }

    .chrome::before {
      --browser-color: var(--chrome-color);
    }

    .firefox::before {
      --browser-color: var(--firefox-color);
    }

    .edge::before {
      --browser-color: var(--edge-color);
    }

    .safari::before {
      --browser-color: var(--safari-color);
    }
  }

  .rays {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: var(--inner-spacing);

    a {
      display: grid;
      grid-template-columns: 1fr 2fr;

      gap: var(--inner-spacing);

      width: 100%;

      color: var(--ray-text-color);
    }

    ul {
      list-style: none inside;
      display: flex;
      width: 100%;
    }

    li {
      height: 1.5rem;
      width: 100%;

      --background-color: var(--unavailable-color);

      background-color: var(--background-color);
      background: linear-gradient(
        30deg,
        var(--background-color) 0%,
        lch(from var(--background-color) calc(l + 20) c h / alpha) 100%
      );

      transition: transform 100ms, opacity 200ms;

      &:hover {
        transform: scale(1.1);
      }
    }

    .chrome[data-status="available"] {
      --background-color: var(--chrome-color);
    }
    .edge[data-status="available"] {
      --background-color: var(--edge-color);
    }

    .firefox[data-status="available"] {
      --background-color: var(--firefox-color);
    }

    .safari[data-status="available"] {
      --background-color: var(--safari-color);
    }
  }
}