{/* Codearia Ember — Tailwind v4, arbitrary values, no config needed */}
<div className="relative isolate overflow-hidden [background-color:#0a0a0a]">
      {/* layer 1 */}
      <span className="absolute inset-0 [background-image:radial-gradient(ellipse_85%_75%_at_20%_16%,_rgba(255,107,53,0.92)_0%,_rgba(255,72,20,0.34)_42%,_transparent_72%)] [mix-blend-mode:screen] [filter:blur(122px)]" />
      {/* layer 2 */}
      <span className="absolute inset-0 [background-image:radial-gradient(ellipse_70%_80%_at_84%_82%,_rgba(255,40,0,0.70)_0%,_rgba(140,24,0,0.26)_48%,_transparent_76%)] [mix-blend-mode:screen] [filter:blur(166px)]" />
      {/* layer 3 */}
      <span className="absolute inset-0 [background-image:linear-gradient(200deg,_rgba(255,200,150,0.18)_0%,_transparent_46%,_rgba(0,0,0,0.50)_100%)] [mix-blend-mode:overlay]" />
      <div className="relative">{children}</div>
</div>