@property --warm {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --ink-blue: #1b2a9e;
  --ink-pink: #ee3d8b;
}

* {
  box-sizing: border-box;
}

body {
  font:
    100% system-ui,
    sans-serif;
  line-height: 1.4;
  margin: 0;
  max-inline-size: 500px;
  margin-inline: auto;
  padding: 2rem 1rem;
}

.support {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25em 0.5em;
  border: 1px solid currentColor;
  white-space: nowrap;
  margin: 0 0 1rem 0;
}
.support-yes {
  display: none;
}
.support-no {
  display: inline-block;
  color: var(--ink-pink);
}

@supports (interest-delay-start: 0s) {
  .support-yes {
    display: inline-block;
    color: var(--ink-blue);
  }
  .support-no {
    display: none;
  }
}

.grid {
  width: min(38rem, 100%);
  position: relative;
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  rule: 1px solid black;
  rule-break: intersection;
}

.cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  transition: background 140ms ease;
}

.mark {
  all: unset;
  display: grid;
  place-items: center;
  color: var(--ink-blue);
  transition:
    color 140ms ease,
    scale 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.mark svg {
  width: clamp(2.5rem, 11vw, 3.75rem);
  height: auto;
  overflow: visible;
}

.cell:hover .mark,
.mark:focus-visible {
  color: var(--ink-pink);
}
.cell:hover .mark {
  scale: 1.07;
}

.mark:focus-visible {
  outline: 2px solid var(--ink-pink);
  outline-offset: -6px;
}

.tip {
  /* reset the UA popover box */
  position: fixed;
  inset: auto;
  border: 0;
  overflow: visible;

  width: max-content;
  max-width: 18ch;
  padding: 0.35em 0.6em 0.4em;
  background: var(--ink-pink);
  color: white;
  border-radius: 2px;

  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;

  /* default placement: centred above the mark */
  position-area: block-start;
  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;

  opacity: 0;
  scale: 0.9;
  transition:
    opacity 130ms ease,
    scale 130ms cubic-bezier(0.2, 0.9, 0.3, 1.3),
    display 130ms allow-discrete,
    overlay 130ms allow-discrete;

  &:popover-open {
    opacity: 1;
    scale: 1;

    @starting-style {
      opacity: 0;
      scale: 0.9;
    }
  }
}

/* Anchor each tip to its own mark. Explicit names rather than anchor-scope or the implicit interestfor anchor, so the CSS-only fallback path below gets edge detection too. */
.cell:nth-child(1) .mark {
  anchor-name: --m1;
}
.cell:nth-child(1) .tip {
  position-anchor: --m1;
}
.cell:nth-child(2) .mark {
  anchor-name: --m2;
}
.cell:nth-child(2) .tip {
  position-anchor: --m2;
}
.cell:nth-child(3) .mark {
  anchor-name: --m3;
}
.cell:nth-child(3) .tip {
  position-anchor: --m3;
}
.cell:nth-child(4) .mark {
  anchor-name: --m4;
}
.cell:nth-child(4) .tip {
  position-anchor: --m4;
}
.cell:nth-child(5) .mark {
  anchor-name: --m5;
}
.cell:nth-child(5) .tip {
  position-anchor: --m5;
}
.cell:nth-child(6) .mark {
  anchor-name: --m6;
}
.cell:nth-child(6) .tip {
  position-anchor: --m6;
}
.cell:nth-child(7) .mark {
  anchor-name: --m7;
}
.cell:nth-child(7) .tip {
  position-anchor: --m7;
}
.cell:nth-child(8) .mark {
  anchor-name: --m8;
}
.cell:nth-child(8) .tip {
  position-anchor: --m8;
}
.cell:nth-child(9) .mark {
  anchor-name: --m9;
}
.cell:nth-child(9) .tip {
  position-anchor: --m9;
}

/* ============================================================
   THE DELAY RULE
   200ms for the first tooltip. While any tooltip is still open, every other mark drops to 0ms, so scanning across the grid is instant. Leave the sheet entirely, the last tip closes after its end-delay, :has() stops matching, and the 200ms is re-armed.
   ============================================================ */

.mark {
  interest-delay-start: 200ms;
  interest-delay-end: 150ms;
}

.grid:has(.tip:popover-open) .mark {
  interest-delay-start: 0s;
}

/* ============================================================
   FALLBACK — browsers without interest invokers (currently everything that isn't Chromium 142+). Same visual, same delay behaviour, still zero JavaScript.

   --warm is a registered custom property used as a timer: it flips to 1 after 200ms of hovering the sheet and back to 0 260ms after leaving it. Each tip reads it to compute its own show delay.
   ============================================================ */

@supports not (interest-delay-start: 0s) {
  .tip {
    display: block;
    pointer-events: none;
  }

  .grid {
    --warm: 0;
    transition: --warm 1ms linear 200ms;
  }
  .grid:hover {
    --warm: 1;
  }
  .grid:not(:hover) {
    transition-delay: 260ms;
  }

  .tip {
    transition-delay: calc((1 - var(--warm)) * 200ms);
  }

  .cell:hover .tip,
  .cell:focus-within .tip {
    opacity: 1;
    scale: 1;
    transition-delay: calc((1 - var(--warm)) * 200ms);
  }

  .cell:not(:hover):not(:focus-within) .tip {
    transition-delay: 150ms; /* matches interest-delay-end */
  }
}

/* Last-ditch: no anchor positioning at all. Park the tip above its cell. */
@supports not (anchor-name: --a) {
  .tip {
    position: absolute;
    inset: auto auto 100% 50%;
    translate: -50% 0;
    margin: 0 0 9px;
    max-width: min(18ch, 90vw);
  }
}

/* ---------- colophon ---------- */

.colophon {
  width: min(38rem, 100%);
  display: grid;
  gap: 0.9rem;
  font-size: 0.6875rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.colophon dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: 0.4rem 1.25rem;
}

.colophon dt {
  color: var(--ink-blue);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.colophon dd {
  margin: 0;
}

.colophon code {
  font: inherit;
  color: var(--ink-pink);
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .cell,
  .tip {
    transition-duration: 1ms;
  }
  .tip,
  .cell:hover .mark {
    scale: 1;
  }
}

@media (max-width: 30rem) {
  .colophon dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .colophon dt {
    margin-top: 0.6rem;
  }
}