Feature Announcement Modal

<!--
  "What's new" dialog, scoped to this box. The illustration is pure inline SVG on
  a gradient - no external image to preload or let rot. The overlay is absolute
  inset-0 within the relative stage, NOT a fixed full-screen portal, so it never
  locks the page. Wire open/close, Escape and focus handling with JS - see the
  React/TypeScript tabs.
-->
<div class="relative isolate flex min-h-[22rem] items-center justify-center overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
  <div class="absolute inset-0 z-10 bg-gray-950/50" aria-hidden="true"></div>
  <div role="dialog" aria-modal="true" aria-labelledby="whatsnew-title" tabindex="-1" class="absolute left-1/2 top-1/2 z-20 w-[calc(100%-1.5rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900">
    <div class="relative h-24 w-full bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-600" aria-hidden="true">
      <svg viewBox="0 0 400 120" preserveAspectRatio="none" class="absolute inset-0 h-full w-full opacity-30"><circle cx="60" cy="40" r="50" fill="white" /><circle cx="320" cy="90" r="70" fill="white" /></svg>
      <span class="absolute right-3 top-3 rounded-full bg-white/20 px-2 py-0.5 text-xs font-semibold text-white ring-1 ring-inset ring-white/40">v2.0</span>
    </div>
    <div class="p-5">
      <h3 id="whatsnew-title" class="text-base font-semibold text-gray-900 dark:text-gray-100">What's new</h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">A quick look at what shipped this release.</p>
      <ul class="mt-3 space-y-2">
        <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
          <svg viewBox="0 0 20 20" class="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 0 1 1.4-1.4l3.3 3.3 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" /></svg>
          Command palette, on every page
        </li>
      </ul>
      <div class="mt-5 flex flex-col gap-2 sm:flex-row-reverse">
        <button type="button" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">Got it</button>
        <button type="button" class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">Dismiss</button>
      </div>
    </div>
  </div>
</div>