* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #232323;
  font: 14px/1.6 monospace;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.grid {
  container: button / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 2px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border-bottom: 2px solid white;
  inline-size: 300px;
  reading-flow: flex-visual;

  > a {
    flex: 1 1 30px;

    /* The cool randomization part */
    order: random(1, 9999);

    /* --hue is scoped to this cell, so fill and label agree */
    background: hsl(random(--hue element-scoped, 150, 340) 78% 58% / 0.32);
    color: hsl(random(--hue element-scoped, 150, 340) 95% 78%);

    display: grid;
    place-items: center;
    overflow: hidden;
    text-decoration: none;
    font-size: 3cqi;
  }

  > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    pointer-events: none;
    font-size: 10cqi;
    font-family: system-ui;
    font-weight: 900;
    text-shadow:
      0 0 10px black,
      0 0 20px black,
      0 0 30px black;
  }

  &:has(a:active) {
    border-bottom-width: 1px;
  }
}

.notice {
  display: none;
}
@supports not (order: random(1, 2)) {
  .notice {
    display: block;
    color: yellow;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
    font-weight: 500;
  }
}