The ultimate centering decision tree

/* Flexbox center — single element or collection */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* optional spacing */
}

/* Grid center — simplest syntax */
.grid-center {
  display: grid;
  place-items: center;
}

/* Absolute center — overlays, modals */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Container-query aware center */
@container (min-width: 40rem) {
  .responsive-center {
    display: grid;
    place-items: center;
  }
}
@media (max-width: 40rem) {
  .responsive-center {
    display: flex;
    justify-content: center;
  }
}

You are a senior frontend engineer specializing in CSS layout.

Goal: Build a decision-tree guide that helps developers choose the right centering technique.

Technical constraints:
- Use semantic HTML with radio inputs or buttons for navigation.
- Structure the decision tree with 2-3 levels of questions.
- Each path leads to one technique: flexbox, grid, absolute positioning, or container queries.
- Use oklch() for all colors — no hex or rgba().
- Respect prefers-reduced-motion for any transitions.
- Make it keyboard accessible (focus-visible states, arrow key support if using radios).

Decision tree logic:
1. First question: "What are you centering?" → Single element OR Multiple items
2. If single element: ask "Container type?" → Regular parent, Grid container, or Full-viewport overlay
3. If multiple items: ask "Layout direction?" → Row or Grid/2D
4. Each path returns the appropriate CSS snippet.

Edge cases to handle:
- What if the parent has no height defined? (Remedy: set min-height or explicit height)
- What if container queries aren't supported? (Remedy: media query fallback)
- Screen reader experience: announce current path or selected option.

Return HTML + CSS with clear comments explaining each branch.