.food-compass {
      position: relative;
      container-type: inline-size;
      width: min(100%, 600px);
      margin: 2rem auto;
      box-sizing: border-box;
      aspect-ratio: 1;
      padding: 0;
      border: 0;
      background:
        linear-gradient(135deg, #2a2626 0%, #c7bec2 35%, #fff 50%) top left / 50% 50%,
        linear-gradient(225deg, #2a2626 0%, #c7bec2 35%, #fff 50%) top right / 50% 50%,
        linear-gradient(45deg, #2a2626 0%, #c7bec2 35%, #fff 50%) bottom left / 50% 50%,
        linear-gradient(315deg, #2a2626 0%, #c7bec2 35%, #fff 50%) bottom right / 50% 50%;
      background-repeat: no-repeat;
    }

    /* The corner gradients meet white at the diamonds and the site color at the outer corners.
       Each diamond occupies half the chart's width and height. */
    .food-compass .diamond {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3cqw;
      color: #252525;
      width: 50%;
      height: 50%;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      appearance: none;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      background: var(--color);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .food-compass .diamond ion-icon,
    .food-compass .diamond .material-symbols-outlined {
      font-size: clamp(16px, 6cqw, 41px);
      width: 1em;
      height: 1em;
      flex: none;
      pointer-events: none;
    }
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
    }
    .top    { top: 0;   left: 25%; --color: rgb(225 121 127 / 0.45); }
    .right  { top: 25%; left: 50%; --color: rgb(228 184 95 / 0.45); }
    .bottom { top: 50%; left: 25%; --color: rgb(97 175 153 / 0.45); }
    .left   { top: 25%; left: 0;   --color: rgb(125 146 216 / 0.45); }
    .food-compass .diamond:hover { filter: brightness(1.08); }
    .food-compass .diamond:active { filter: brightness(.88); }
    .food-compass .diamond:focus-visible { outline: none; filter: brightness(.75); }
    .food-compass .diamond:focus-visible::after {
      content: "";
      position: absolute;
      width: 10%;
      height: 10%;
      top: 20%;
      left: 45%;
      border: 3px solid white;
      border-radius: 50%;
    }

.food-compass .diamond { text-decoration: none; font-family: "Quicksand", sans-serif; }
.food-compass .diamond-label { position: absolute; top: 65%; left: 20%; width: 60%; font-size: clamp(10px, 3cqw, 18px); line-height: 1.2; font-weight: 700; opacity: 0; text-align: center; pointer-events: none; }
.food-compass .diamond:hover .diamond-label, .food-compass .diamond:focus-visible .diamond-label { opacity: 1; }
@media (hover: none) { .food-compass .diamond-label { opacity: 1; } }

.food-compass .diamond-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  transform: translateY(-25%);
  pointer-events: none;
}