Popover

/* HTML:
<button type="button" popovertarget="my-popover">Show info</button>

<div id="my-popover" class="css-popover" popover>
  <strong>Popover title</strong>
  <p>Some helpful content here.</p>
  <button type="button" popovertarget="my-popover" popovertargetaction="hide">Close</button>
</div> */

.css-popover {
  position: absolute;
  width: 16rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid oklch(0.3 0.02 260);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Transparent backdrop — light dismiss still works */
.css-popover::backdrop {
  background: transparent;
}

/* Style the open state */
.css-popover:popover-open {
  display: block;
}

/* Animate entry (progressive enhancement) */
@supports (transition-behavior: allow-discrete) {
  .css-popover {
    opacity: 0;
    translate: 0 -0.5rem;
    transition:
      opacity 0.2s ease,
      translate 0.2s ease,
      display 0.2s allow-discrete,
      overlay 0.2s allow-discrete;
  }

  .css-popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .css-popover:popover-open {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .css-popover {
    transition: none;
  }
}

You are a senior frontend engineer building modern, accessible UI components.

Goal: A native HTML Popover API component styled with CSS — tooltip-style content that opens on button click, dismisses on outside click or Escape, with a smooth CSS entry animation. No JavaScript required.

Technical constraints:
- Use the popover attribute on the content element and popovertarget on the trigger button.
- Style the open state with :popover-open pseudo-class.
- Use ::backdrop { background: transparent } to keep light-dismiss without a dark overlay.
- Animate entry using @starting-style and transition-behavior: allow-discrete, wrapped in @supports so it degrades gracefully.
- Use oklch() for all color values throughout.
- Wrap all transitions in @media (prefers-reduced-motion: reduce).
- Background and border must use dark design tokens (var(--card), oklch()).

Framework variant (pick one):
A) Vanilla HTML + CSS — button with popovertarget, div with popover attribute.
B) React component — wrap in a controlled component that uses the Popover API via a ref; accept trigger (ReactNode) and children props.

Edge cases to handle:
- Popover positioned near viewport edges must not overflow — use anchor positioning or clamp.
- Multiple popovers on the same page should not conflict — each needs a unique ID.
- Keyboard navigation: Escape must close the popover; focus should return to the trigger.
- Fallback for browsers without Popover API support: display:none toggle via JS.

Return HTML + CSS.