TITLE: Candy Deck — five glossy pastel sweets that shuffle, fan and flip
PROMPT: Build a single self-contained HTML page: a candy pastel card deck on a #fff1f5 ground. Background is a fixed layer of four soft radial blooms (#ffb3c6 pink, #b8e0ff blue, #d6f5c8 mint, #ffe08a lemon) at ~50% alpha in the page corners. Centered column, max-width 860px: a ui-monospace uppercase kicker "confections · deck 06" at 11px/.36em tracking in #b3788f; an 800-weight display title "Candy Deck" at clamp(34px,7.4vw,62px), letter-spacing -.035em, filled with a 102deg gradient (#ff8fb1 → #d3a4ff → #7ec8ff → #8ed9ab) via background-clip:text; a two-line 15px #836072 subtitle; then a 300–410px-tall stage containing a perspective:1200px deck of five absolutely positioned cards, width clamp(146px,37vw,204px), aspect-ratio 3/4, rounded 22px, each with a radial-gradient face (white → var(--c1) → var(--c2) per flavor), an inner glossy .shine radial highlight, a 54%-wide spherical candy orb with inset light/shadow, a Georgia flavor name and a monospace "no. 0X" tag. Card backs are a white→#ffe6ef gradient with repeating-radial ring texture, the flavor blurb in Georgia, and a kcal line under a hairline rule. Flavor colors: Strawberry #ffb3c6/#ff6f96, Blueberry #b8e0ff/#6fb4e8, Mint #d6f5c8/#9fd98a, Lemon #ffe08a/#f5c14e, Taro #e4d4ff/#b79aef. Below the stage an italic Georgia flavor read-out, then a centered bar with a pill Shuffle button (white→#ffd9e5 gradient, #8a2b4d uppercase 12.5px, 999px radius, layered pink shadow) and a monospace counter "N in deck"; a final monospace hint line. Motion: the deck bobs 9px on a 7s ease-in-out loop; cards sit in a tight rotated stack and fan out on stage hover (spread = min(110, (stageW - cardW)/4), rotate 6.4deg per step, slight arc lift); Shuffle scatters every live card to a random radius/rotation with transitions off, reshuffles the order array, then springs them back with 46ms per-card stagger on cubic-bezier(.2,1.32,.34,1); clicking a card flips its preserve-3d inner 180deg to reveal the back; dragging past ~130px throws the card off-screen and out of the deck. Use only one inline style block and one inline script at the end of body, system font stacks, no external resources, no createElementNS.
DESCRIPTION: A tactile, toy-like confectionery deck rendered entirely in CSS gradients and springs. Five glossy cards rest in a softly rotated stack that breathes up and down; hovering fans them into an arc, clicking flips one over to read its tasting note, dragging one off the top deals it away, and double-clicking the stage re-deals everything. The palette is four candy pastels blooming over a warm near-white ground, with display type in a gradient-filled grotesque and all secondary voice carried by Georgia italic and tight monospace capitals.
TECHNIQUES: spring easings via overshooting cubic-bezier; CSS custom properties for per-flavor palettes; preserve-3d + backface-visibility card flips; radial-gradient gloss and inset shadow shading instead of images; z-index reordering by deck position; two-phase scatter-then-settle shuffle using a forced reflow; pointer-capture drag with distance threshold; staggered transition-delay cascade; prefers-reduced-motion media query flattening the bob, fan rotation and transition durations.
INTERACTION: Hover the stage to fan the deck; leave to restack. Click Shuffle for a spring re-deal (cards scatter, reorder, cascade back with 46ms stagger). Click or press Enter/Space on a card to flip it and read its flavor note in the label below. Drag a card more than ~130px and release to throw it out of the deck — the counter drops and the remaining cards close the gap; drag less and it springs home. Double-click the stage to reset all five cards and the counter. Hovering a card updates the italic flavor read-out in that flavor's ink color.