TITLE: Solarpunk Co-op — a garden of community data
PROMPT: Build a single self-contained HTML page: a solarpunk community dashboard on a #f2f7ee ground, with a fixed backdrop of three soft radial blooms (leaf #8bc34a at 20%, sun #f4b942 at 20%, sage #6b8f71 at 18%) in the corners. Content max-width 1180px, centred. Header: a 46px inline-SVG mark (a stem with two leaves and a sun dot inside a thin ring), a ui-monospace-free system-ui eyebrow "Rua das Figueiras co-op · live" at 11px/.26em uppercase in #6b8f71, and a Georgia 700 headline "Solarpunk dashboard" at clamp(26px,4.4vw,40px) with "punk" in the leaf green; on the right a segmented season pill (4 buttons in a white capsule, active button filled #2f6b3f). Below, a bento grid of 4 columns with grid-auto-rows minmax(150px,auto) and organic asymmetric card radii (26px 22px 30px 24px), 1px rgba(47,107,63,.13) borders and soft green shadows. Cards: a 2×2 "Sunlight captured" hero with a 220-unit radial gauge (track circle, sun-coloured progress arc with round caps starting at 12 o'clock, 12 rotating rays behind it, a Georgia kW readout in the middle) plus an hour scrubber range input; a 2×2 "Community harvest" vine chart where twelve leaf shapes sit along a hand-computed sine stem, sized and coloured by monthly kilograms; four 1×1 stat cards — water saved (an organic blob whose liquid fill height is a CSS variable), plants grown (a cluster of 12 CSS leaf shapes at hand-placed positions), carbon avoided (six gradient bars), energy shared (a small arc dial); and a full-width community feed with four avatar rows. Footer: a seed-sprout SVG and "planted by 214 neighbours · dashboard v2.4". Typography: numbers Georgia 700, labels system-ui 500 uppercase 10.5px/.24em, body system-ui. Season switching swaps the whole palette through @property-registered custom properties (--ground, --leaf, --sun, --forest, --sage, --track, --card) transitioned over .75s, and re-tweens every number with a requestAnimationFrame ease. Hover a card to lift it and slide its detail line into place; hover a leaf to read its month, click to pin it. All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system fonts only; no external resources; no createElementNS.
DESCRIPTION: A warm, organic data garden: instead of bars and dials, the co-op's numbers grow as leaves on a vine, fill an irregular water blob, and bloom into a sun whose rays turn without hurry. The palette is soil-and-leaf greens with a single sunlit yellow, and the whole page recolours itself when you switch seasons — spring to summer to autumn to winter — like a landscape changing its mind. Every value eases when it changes, cards breathe on a slow twelve-second loop, and hovering anything reveals the human detail behind the number.
TECHNIQUES: bento CSS grid with spanning cells and per-card organic border-radius; @property-registered custom properties so the season palette genuinely transitions instead of snapping; radial sun gauge via stroke-dasharray/dashoffset on a rotated circle with a rotating ray group; vine chart built from a sampled sine stem with leaves positioned by translate/rotate/scale in CSS transform (transitionable) and sized by data; CSS-shape sprouts and gradient bars; blob fill driven by a custom property; rAF number tweening with cubic ease-out; transform-only card entrance with per-card delay; decorative breathing blob layer; prefers-reduced-motion disabling rotations, breathing, entrances and tweening.
INTERACTION: Drag the hour slider to scrub the day — the sun gauge arc and the kW readout ease to the power available at that hour and the clock updates. Hover a card to lift it and reveal its detail line. Hover a leaf on the vine to read that month's harvest in the card header; click a leaf to pin its month. Switch Spring / Summer / Autumn / Winter to recolour the entire page and re-animate every number, every leaf size and the energy dial. All values are set instantly at first paint so the page is complete even with animation frozen.