Daal–Paratha Thali ~ a Bengali comfort meal drawn entirely in CSS

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

My comfort food is the Sunday daal–paratha thali of my childhood: a brass plate
(ganta) lined with banana leaf, a stack of ghee parathas with a melting cube of
butter, moong daal tadka finished with a swirl of cream, clay-bowl raita, and the
non-negotiable green chili and lemon wedge on the side. Instead of drawing one
dish, I drew the whole memory — plate, leaf, spoon, steam and all — with zero
images and zero SVG shapes: every rim, char spot, cream swirl and steam wisp is
CSS gradients, border-radius, masks and keyframes.

Demo

Hover (or keyboard-tab) across the thali:

• Hover the paratha stack and the butter cube melts — the drip stretches.
• Hover the daal bowl and the cream swirl slowly spins, like a ladle just left.
• A caption chip under the plate narrates each dish (it is also an aria-live region, and every dish is focusable).

Journey

The hardest part was making gradients scale. Sizing every dish in cqi units
inside a container-type: inline-size stage means the whole illustration resizes
like a vector — no breakpoints, no recalculation. A few techniques I'm proud of:

• Container query units (cqi) for the entire scene geometry, so the art is resolution-independent.
• @property registered custom property (--flicker) to smoothly animate the candle-light overlay's opacity — something a plain keyframe on a gradient can't interpolate.
• CSS masks (repeating-radial-gradient + mask) to paint the daal's cream swirl as concentric rings that rotate on hover.
• Layered radial/conic gradients for paratha char spots, flaky swirls, banana leaf striations + midrib, lemon segments and brass highlights.
• Blurred, skewing keyframe wisps for steam, plus mix-blend-mode: screen lighting and a vignette for the clay-stove mood.
• prefers-reduced-motion freezes steam and flicker; the piece degrades to a still-life painting.

JavaScript is deliberately tiny (a ~15-line caption reader), because the brief
asks for CSS to remain the star — with the art 100% intact even with JS disabled.

Next I'd love to add a ladle that "pours" the daal on click, and a dark→dawn lighting toggle driven by light-dark().