TITLE: Watercolour Cards — Six Washes from a Four-Tube Box

PROMPT: Build a single self-contained HTML page: a pigment-card gallery on a warm paper ground (#fdfaf5) with three very soft corner washes of ultramarine #2c5f8a, cadmium #c8503c and viridian #4a6b4f at 9-10% alpha. Header is a two-column grid (title left, paintbox right) that collapses to one column under 640px: a mono kicker "Pigment index · six washes", an h1 in Georgia italic 400 at clamp(34px,6.6vw,76px) reading "Watercolour Cards" with the second word in ultramarine, and a Georgia lede. The paintbox is four inset "wells" (34-50px squares, radial highlight, inner shadow) labelled PR108 / PB29 / PY43 / PG18 in 9px mono, plus a pill-shaped SHUFFLE THE DECK button with a 14px inline SVG arrow icon. Below a hairline gradient rule sits a responsive grid: repeat(auto-fit,minmax(228px,1fr)), forced to 3 columns above 1180px. Six cards, each 3:4 aspect with min-height 290px, built as .card > .inner > two .face layers. Front: a watercolour bloom made of five absolutely-positioned circles, each filled with radial-gradient(closest-side at 42% 40%, var(--c) 0%, var(--c) 26%, transparent 76%) at different sizes, positions and opacities, over a repeating-conic 4px grain layer at 55% multiply; a mono code, a Georgia italic pigment name and a small uppercase subtitle sit in a bottom gradient scrim; three opacity dots sit top-right. Back (rotateY 180deg): pigment code in the card colour, Georgia italic name, a solid swatchline, a dt/dd spec grid (Body / Grain / Light / Stain), an italic note and a dashed-top mono mix line. Palette: paper #fdfaf5, ink #2b2b30, ultramarine #2c5f8a, cadmium #c8503c, ochre #d9a441, viridian #4a6b4f, plus two derived mixtures (#6f9dc4 sky wash, #c97a45 terra rosa). Type stacks: Georgia display italic, system-ui 600 uppercase labels, ui-monospace codes. All CSS in one inline style, all JS in one inline script at the end of body, zero external assets.

DESCRIPTION: A card box for painters. Each card is a single pigment bloom, laid down wet and left to dry — the front is pure colour and the name, the back is the studio note. Hovering tilts the card in 3D toward the cursor and pushes the pigment outward and deeper; clicking flips it over to the spec sheet; the shuffle button re-deals the deck so the colours land in a new order, and any card can be dragged to a new place in the set. The whole thing reads like paper: warm ground, hairline rules, mono catalogue numbers, and one italic display voice.

TECHNIQUES: five-layer radial-gradient pigment bloom with irregular closest-side stops, animated by transform scale and opacity only; repeating-conic-gradient paper grain at 4px with multiply blend; preserve-3d card flip driven by a single --flip custom property added to a hover tilt (--rx / --ry from pointer position) in one transform declaration; FLIP layout animation that measures rects before and after a DOM reorder, applies the inverse translate3d with transition:none, then releases it on the next frame with a springy cubic-bezier(.2,1.32,.36,1); staggered deal-in via a .pre class (translateY 30px + rotate + scale, transition none) removed on a double rAF, with per-card --d transition-delay cleared afterwards; pointer-event drag to reorder with an 8px activation threshold, pointer capture, hit-testing against the cached start rects, and a FLIP drop that starts from the finger position; scroll suppression during drag via touch-action and preventDefault.

INTERACTION: Hovering a card lifts it 7px and tilts it up to ±15° / ±13° toward the cursor while the five bloom layers scale outward (up to 1.3x) and intensify. Clicking (or tapping) a card flips it to its pigment notes and back. The shuffle button re-deals all six cards with a spring FLIP animation and spins its arrow icon. Dragging a card more than 8px picks it up with a 1.035 scale and 1.1° tilt, follows the pointer, and on release drops it into the slot under the pointer while every displaced card springs into place. A click that follows a drag is suppressed. Under prefers-reduced-motion all transitions are disabled, the deal-in offset is skipped, and reorders happen instantly.