Claude Haiku 5.5

I'm working out the constraints for a pure-CSS "like" button with a wild click animation: a self-contained single HTML file in one fenced block, everything inline with no external resources. It has to look right at 1280×800, shrink cleanly to 375px without a horizontal scrollbar, and show something meaningful on first paint. The "press a key to start" rule only applies to games, so it doesn't apply here.

I'm weighing whether the keyboard-start rule even matters here, since with pure CSS and no JavaScript there's no keyboard input to worry about, and the real interaction is a mouse click on the button. I'll make the button obviously clickable and add a visible "Click the heart" hint so something is clearly there on first paint. For the toggle itself, a hidden checkbox paired with a label is the classic approach, with `:checked` sibling selectors driving the animation when the state flips.

Now I'm sketching the animation mechanics: when the checkbox flips to checked, keyframe animations fire on the heart, particles, and a slot-style counter that rolls to the next number.

Still writing the particle burst and heart icon...

I'm settling on the wild part of the animation: the checkbox toggle will drive the sequence, with the like kicking off a bouncing heart, a shockwave ring, confetti in different shapes and colors, and a "+1" floating up. Unliking can just shrink things back down smoothly, and re-liking should replay the whole burst.

Now I'm checking the accessibility side: the hidden checkbox needs a focus style on the label so keyboard users can see where they are.

I'm checking whether the keyboard-start message is needed at all, since this is a plain like button and not a game, so clicking the label is the real interaction. The screenshot is taken three seconds after load, so the hint text has to already be visible on first paint.

I'm still weighing how the page should look on first paint, since the screenshot is taken with no interaction. A purely decorative idle pulse on the heart could keep it lively without changing the liked state, and a small "Click me" hint could draw the eye. I'm leaning away from auto-liking, because that would change the state the user asked to toggle on click.

I'm weighing a quiet idle pulse on the heart so the page looks alive on first paint without changing the liked state, and I'm leaning away from any auto-like since that would flip the toggle the user is meant to control.

Now I'm thinking about having ambient sparkles and hearts drift around the button constantly, so the page has motion and visual detail from the first paint without anyone having to click.

I'm planning the background now: a dark gradient with a soft glow behind the button, and a centered layout with the big heart, the like count, and a short caption about clicking the heart.

I'm now deciding the button's look: a pill with a heart, the word "Like", and a count. On click the heart squashes and rotates, particles and hearts burst outward, a shockwave ring expands, the label flips to "Liked," and the count rolls over.

Still working out the burst: the button's background flips with a gradient, the count rolls up, and a "+1" floats away. I'm planning to size everything in em units so the effect shrinks cleanly on a narrow screen.

I'm sketching the layout in em units so the whole component scales down cleanly on a narrow screen, with the button, burst radius, and particle distances all sized relative to one base font size.

Still writing the markup for the like button...

Now I'm laying out the markup for the button: a hidden checkbox, a pill label holding the heart, the burst particles and shockwave, and a rolling count, with a hint line underneath.

Now I'm working out how the count rolls: two stacked numbers, "1,284" and "1,285", slide up inside a single-line window with a bounce and a bit of blur. Both have the same width, so the button won't jump, and the overflow stays hidden.

Still writing the heart path...

Still writing the heart icon path...

Still writing the SVG heart symbol, reusing one path through a shared symbol so the ambient hearts can reference it too.

Still writing the heart markup: I'm reusing one heart path through a shared symbol so the burst and ambient elements can all reference it.

Still writing the particle burst: I'm planning 18 particles that fan out at set angles and distances, mixing hearts, colored dots, and star shapes.

Still writing the particle keyframes, with each piece flying out along its angle and spinning as it fades.

Still working out the burst keyframes: each particle flies outward along its angle, and the calc-based distance should work since the custom properties resolve per element.

Still working out the burst keyframes: I'm weighing whether to rotate each particle around the center and push it out by an em-based distance, which would let the whole effect scale with the font size.

I'm checking whether em values stored in a custom property like `--d` resolve against the particle's own font size once they're substituted into the transform, and whether the particles inherit a matching size from the component.

Still writing the button's keyframes: a squash-and-stretch boing with a small wobble, the heart popping and spinning, then the burst and shockwave.

Still writing the hover-free flash: a hue-rotate on the heart so it jumps from gray to red-pink and cycles through colors. A "+1" text floats up above the heart and fades out. For the background, I'm using `:has(#like:checked)` on the parent so the stage can pick up a brief pink glow when the button is liked.

I'm adding a `:has()` selector so the stage gets a brief background flash and a short shake when the like is toggled on. If `:has` isn't supported, the flash just doesn't show, which is an acceptable fallback.

Still working out the keyframes for the heart: the liked state will stay filled with a pink-red gradient, the label will read "Liked," and the count will be bumped up.

Still going over the heart's styling: I'm keeping the Material path as a filled shape inside the shared symbol, so the unliked state can use a light grey fill on the dark pill, and the liked state switches to a hot pink gradient with a fill transition.

I'm going to scatter about fourteen small decorative hearts and sparkles across the background in pure HTML, each with its own position, delay, and duration, kept faint at low opacity so they don't pull focus from the button. Then I'm thinking about the button's size: a big pill around 15em wide, maybe 22px font at desktop, so it reads well at 1280×800.

I'm sketching the timing of the click burst over about 1.2 seconds: first a quick squash of the heart, then a jump out with overshoot, and then a fast spin as it shrinks.

Now I'm timing the rest of the sequence: the particles start around 100ms and fly out over about 800ms, the shockwave begins at 120ms and expands over 700ms, and the "+1" rises from 150ms. The count rolls at 200ms, and the button background moves through a pink-to-red flash. The stage shakes briefly at the start, and everything is driven by `:checked` selectors with delays, using plain HTML and CSS only.

Checking that the input checkbox stays focusable while hidden, since it's visually hidden rather than display:none. I'm also styling the keyboard focus ring on the button through the adjacent sibling selector.

Still writing the markup for the like button, so I'm thinking about the label-and-counter structure next. The count will sit in a small window with two stacked numbers, and the label has to stay meaningful for screen readers even though the particles are hidden from them.

I'm thinking about how the screen reader will announce the count, since the roll shows both numbers at once. I could hide the roll from assistive tech with aria-hidden and keep a single readable count, or lean on the label's own text. I'll keep the accessibility setup simple rather than over-engineer it.

I'm settling on how the label works for screen readers: the animated count and the "Like"/"Liked" word will be hidden from assistive tech with aria-hidden, so the checkbox just announces "Like" along with its checked or unchecked state. For the word swap, I'm stacking "Like" and "Liked" in the same grid cell so the button keeps a stable width, and switching which one shows instead of sliding them.

Still writing the word swap: the "Like" and "Liked" labels are stacked in one grid cell with a clipped container, so the liked word slides up into view with a springy ease.

Still working out the word swap: the "Like" and "Liked" spans share one grid cell inside a fixed-height container, so the container sizes to the wider word and the inactive span sits just below the visible area until it slides up.

Still writing the heart markup: an SVG icon that reuses a shared symbol, so the same path can be filled gray when unliked and pink when liked.

Still working out how the heart gets its color: I'm setting the fill on the SVG wrapper so the shared path inherits it, switching to pink when liked. I'm unsure whether the fill transition will carry through the `<use>` element, so I'll check that next.

Still going over the timing: the heart's fill will transition on the outer svg so the shared symbol inherits it, and I'm keeping the glow as a drop-shadow instead of a gradient. Next I'm laying out the burst container at the center of the button.

Still wiring up the burst: the particles, shockwave, and "+1" are positioned as siblings after the checkbox, so a general sibling selector can trigger their animations on `:checked`.

Now I'm making sure the particles stay hidden until the checkbox is ticked: they sit at zero scale with no opacity, and the animation fills forward so they hold their start state through any delay. Unchecking removes the animation and drops them back to rest. The remaining risk is clicking quickly through checked and unchecked, so I'll look at how that restart behaves.

I'm thinking through an unlike animation that would shrink the heart back, but I'm wary of making it run on page load, since a selector on the unchecked state would fire immediately.

I'm thinking about a constant idle heartbeat on the heart icon, a slow gentle pulse while it's unliked, so the button looks alive on first paint. When it's checked, that animation gets swapped out for the burst, and unchecking would bring the heartbeat back.

Still writing the keyframes: the idle heartbeat scales the heart up and down gently, and the checked pop squashes, jumps with a big overshoot, then spins and settles.

Still working out the keyframes for the spin: I'm settling the heart back to rotate(0) at the end, with the mid-sequence rotations tuned so the overshoot and settle look smooth.

Still writing the wobble keyframes for the button: a quick squash, then a stretch with a slight tilt, with the timing pushed toward a 720-degree heart spin on like.

Still writing the keyframes: the wobble on the button squashes and stretches, then tilts a few degrees and settles back to rest. Next I'm planning a stage shake on the card while the checkbox is checked, using a `:has()` selector.

Still writing the stage overlay: a full-screen pink flash sits behind the content, and on `:has(...:checked)` it briefly brightens and fades while the stage gives a small shake.

Still writing the keyframes for the shockwave and the "+1": the ring is a centered element whose two pseudo-elements expand from a small scale to a large one while fading, and the "+1" floats upward and fades out over about a second.

Still writing the particles: the burst uses about twenty-two pieces of mixed shape, hearts, stars and dots, each given its own angle, distance, scale, and a small random delay before flying out.

Still writing the particle keyframes: each piece starts invisible at its angle, fades in, and flies outward along its angle while shrinking away, with the code itself described rather than reproduced.

Still writing the particle keyframes: each piece fades in at its angle, flies outward while shrinking and spinning, and fades out at the end.

Still writing the particle keyframes: each piece fades in along its angle, flies outward on an easing curve, and fades back out, with the fill mode keeping them hidden before their small delay.

Still writing the ambient sparkles: they sit behind everything and drift upward on a slow loop, with a random start delay for each one.

Now I'm planning the card layout: a glassy panel with an avatar, a username, a short line of text, and the like button sitting in the footer next to the comment and share icons.

Now I'm picturing the layout: a dark stage with a large glowing pill-shaped Like button, a headline above it, and a short tip below. The burst has to scale with the viewport, so I'm thinking about how to size the particle radius so it still fits at 375px.

Still working out the burst's scale: at 375px the particles need to fit, so I'm thinking about shrinking the font size with the viewport rather than clipping them with overflow hidden.

Still settling the sizing: I'm scaling the whole component with `min(20px, 4.6vw)`, so it's 20px on desktop and around 17px at 375px. At that size the 9em burst radius keeps the particles inside the 343px of usable width.

Sizing the font with `clamp(14px, 4.6vw, 21px)` should keep the burst inside a 375px screen while still reaching full size on desktop. The vertical fit on a 667px-tall phone is the open question, though scrolling down is acceptable so long as nothing forces a horizontal scrollbar.

Still working on the layout: I'm settling the stage as a full-height flex column, with the title at top and a relatively positioned area sized to hold the burst.

Still writing the wrapper: I'm making the like wrapper a relative inline box around the button, with the burst absolutely placed at its center so the particles radiate from the button itself.

Still writing the button's base styles: a relative inline-flex pill with a dark gradient, a thin light border, and a soft drop shadow, sized in em so it scales with the component.

Still writing the button's CSS: the label gets a dark pill gradient and a light border, and its transitions cover the background, border and shadow. The transform is left for hover and press states, though a running animation on the label will override it.

Styling the label: the heart icon sits at about 1.6em so the pill grows with the font, and the count uses tabular numbers so the width stays steady.

Still writing the button's markup: the label holds the heart, a rolling "Like"/"Liked" word, and a separate count chunk set off by a thin divider.

Still writing the glow: a blurred radial halo sits behind the label, starting transparent and fading in when liked, and the z-index keeps it above the dark pill background.

Still writing the glow: the label's box-shadow carries a pink halo that appears when the button is liked.

Still writing the liked state: the heart fills white, the word and count turn white, and the pill shifts to a pink-to-orange gradient.

Still writing the heart icon: an outlined heart with a pink stroke that switches to a filled pink heart when liked.

Still writing the button's transitions: the heart fill and stroke ease over about .3s, and the pill background gets a pseudo-element overlay that fades in on the checked state, since gradients themselves don't interpolate.

Still writing the liked-state overlay: the gradient lives on a pseudo-element that fades in on the checked state, because gradients don't interpolate and the base pill stays dark underneath.

Still working out the button's sheen: a diagonal white streak sweeps across the pill on like, using an `::after` pseudo-element that stays hidden until the checked state.

Still writing the sheen and the stage flash: the streak sits over the pill's content, and I'm adding a radial pink flash on the stage as a pseudo-element.

Still writing the stage effects: a radial pink flash over the stage and a short shake on the card, both triggered only when the like input is checked. I'm letting the stage clip overflow so particles can't cause a horizontal scrollbar.

Now I'm making sure the overflow clipping holds: the stage's `overflow: hidden` should keep the particles and the shake inside it, so no horizontal scrollbar appears, while vertical scrolling stays available if the content runs taller than the phone screen.

Still writing the "+1" popup: it's a pill positioned at the center of the button that floats upward and fades out with a short keyframe animation when liked.

Still writing the particle burst: I'm keeping the hearts, stars, dots, and rectangular confetti pieces, each with its own color variable and a 3D spin.

Now I'm planning the particle burst's inline styles. Writing each of the 24 particles out by hand would be tedious, so I'm considering using `:nth-child` in CSS to derive each particle's angle and distance from an index variable instead.

Still writing the ambient background: a scatter of small hearts and tiny four-point stars, each positioned and sized inline so they drift at different speeds.

Still writing the hidden SVG heart symbol at the top of the body, which the button markup can reference with a `<use>` element.

Still writing the heart symbol's details: the `use` element pulls the path from the symbol, so the heart fill and stroke come from the surrounding CSS, and the same approach should work across browsers.

Looking at how the hover effect interacts with the boing animation: if the keyframes end on identity and the fill mode is `forwards`, that final transform would stick and block the hover lift in the liked state. So I'm leaning toward leaving the fill mode off, which means the hover transform works again once the animation is done.

Since the base state is already identity and the keyframes end there too, the default fill mode is enough for the boing animation. The hover lift will still work once it finishes. I'm checking the particles the same way: their base opacity is 0, so they stay hidden before and after the animation without forcing a fill mode.

Still writing the liked-state heart: after the pop animation finishes, the heart should settle without the idle beat, so the liked state doesn't keep pulsing.

Still working out the unlike state: once the checkbox is cleared, the heart's animation falls back to the idle beat, and I can't tell from CSS alone whether it came from the liked state.

Still working out the wild click effect: the heart keeps its idle beat until it's liked, and the liked pop replaces that animation so it settles cleanly. Going back to unliked just falls to the default beat again, with the color easing back through a transition.

Now I'm settling the typography and the background: a system font stack with a heavy weight for the title, and a deep gradient with a soft static glow behind the button.

Still on the card-wide effect: a hue-rotate filter that cycles the whole card through rainbow colors during the pop, on top of the shake. I'm checking that the two effects can coexist, since one animates transform and the other animates filter.

Now I'm weighing whether the card-wide hue rotation will clash with the shake, since one animates transform and the other animates filter, so they should be able to run together. I'm also wondering whether the color shifts will hurt legibility, but that only matters mid-animation, and the screenshot is taken well after the click.

Now I'm weighing whether the stage background should stay untouched while the rainbow hue sweep runs on the inner card, since the card holds the button, the particles, and the text.

Now I'm thinking through how the reduced-motion fallback should work: the user wants the wild effect, but a `prefers-reduced-motion` block could tone down the ambient drift and the card shake and hue sweep while keeping a simple color change on like.

Now I'm laying out the ambient background: about fourteen small hearts drifting upward across the stage, each with its own size, opacity, and start delay so they don't move in lockstep. I'm also thinking about the keyframes for that rise, moving each one past the top of the viewport and adding a slight rotation as it goes.

Still sorting out the ambient hearts' vertical motion: the stage may be taller than the viewport, so I'm thinking about anchoring them to the bottom and using a percentage-based translate so they cover the whole stage.

Now I'm weighing a fixed full-screen layer for the ambient hearts, so they clip to the viewport and don't depend on the stage height.

Now I'm making sure the page can't scroll sideways: the stage will clip everything with overflow hidden, and the ambient layer will be fixed to the viewport so its hearts rise within the screen.

Now I'm laying out the page skeleton: a fixed background layer for the ambient hearts and sparkles, then a stage that clips overflow, with the card holding the eyebrow, heading, and the like button with its burst and shockwave.

Still writing the page layout: the like button wrapper needs to be positioned relative so the burst, shockwave, and +1 label anchor to the heart.

Still laying out the like button: the input and label stay positioned so the burst, shockwave, and +1 label can anchor to the heart, and I'm checking whether the absolutely positioned pieces paint above the label since they come later in the markup.

I'm settling the z-order of the like button's layers: the label sits above the particles, so they appear to burst out from behind the pill, while the "+1" label needs its own higher layer so it stays visible.

I'm deciding where the burst particles sit in the stacking order: I'll put them above the label so they're visible right away, while the shockwave ring stays behind the pill.

Both the burst and the shockwave ring will sit above the label, with `pointer-events: none` so clicks still reach the pill underneath. The "+1" needs the highest layer of all, so I'll give it the top z-index.

Still working out the "+1" label: it's absolutely positioned at the center of the pill and animates upward from there, so I'm looking at how its keyframes should start from a centered translate and rise.

Now I'm checking whether a dedicated flash element would be safer than a `::before` pseudo-element on the stage, since `:has()` support can vary. I'm leaning toward a separate `.flash` div so the animation doesn't depend on pseudo-element rules.

Still deciding whether the quake and hue sweep should sit on the card itself or on the like button wrapper, so the animation follows the pill and its burst.

Now I'm deciding the hue sweep should go on the like-wrap rather than the whole card, so the rainbow cycle covers the pill and its burst while the title stays put, with the quake kept on the card.

Now I'm picturing the idle state: a dim purple stage with hearts and sparkles drifting softly, the title and subtitle, and the pill button showing an outlined heart, "Like," and the count, with a glow behind it. I'm thinking about a pulsing halo ring behind the button to invite the click, limited to the not-yet-liked state.

Next I'm placing the halo as its own span after the input, so a sibling selector can hide it once the pill is checked. It sits at a lower layer than the label, while the burst and shockwave stay on top.

Now I'm checking the hover and active states on the label: hover lifts it slightly and scales it up, while the press state shrinks it, and the existing animation takes priority while it runs. I still need to keep the transition on the label's transform so these states ease in smoothly.

Now I'm settling the transitions: the label's transform will ease over a quarter second while the box-shadow takes a bit longer. Once the animation ends it snaps back to the base transform without a stray transition, so that's fine. I still need to check how the heart's transform origin behaves inside the SVG, since the pop animation depends on it.

Still writing the keyframes: a squash-and-stretch heart pop, starting from a scaled-up squash shape before it settles back.

Still writing the heart-pop keyframes: a squash-and-stretch sequence that overshoots, spins the heart a full turn, and settles back to scale 1.

Still writing the boing keyframes for the label: a squash-and-stretch bounce that wobbles a little before settling back to rest, and I'm thinking about how the count's roll-up transition should be timed next.

Still writing the shockwave rings: I'm setting up a bordered circle that scales outward and fades, with the border animated for the expanding ring effect.

Still writing the shockwave: a single ring sized and centered on the pill, scaling out and fading, and I'm weighing whether a second ring with a short delay is worth adding.

Still writing the particles: I'm giving each burst piece a shared base size, centering it on the pill, and starting it invisible until the click animation drives it outward.

Still writing the particles: I'm setting up a centered burst container, with each piece positioned from its own center so the dots and stars fly out from the pill.

Still writing the particles: each piece gets its own angle, distance, and color through inline custom properties, with the heart pieces wrapping a symbol in an SVG that fills with the current color.

Still writing the particle keyframes: each piece starts hidden at the center, fans out along its own angle while scaling up and spinning a little, then fades back out.

Still writing the particle keyframes: each piece starts hidden at the center, fans out along its angle while scaling and spinning, then fades back out.

Still writing the particle keyframes: the burst moves each piece out along its angle while it grows, spins, and fades, and I'm settling on a timing curve and delay range for it.

Still writing the particle keyframes: each piece turns its own angle into a direction, and I'm placing the spread at 15-degree steps with a little random variation in each piece's distance.

Still writing the particle markup: I'm placing each burst piece as a span with its own angle, distance, scale, spin, delay, and color set inline, mixing hearts, dots, stars, and bars.

Now I'm settling the card copy: a title asking whether you liked this, a small line saying it's pure CSS with no JavaScript, and a hint at the bottom about the party a like triggers. I'm also adding a small eyebrow tag above the title and a "+1" text element for the burst.

Still working on the like-wrap spacing: I'm weighing a vertical margin so the button sits clear of the title, and accepting that the burst will briefly overlap the text.

Still settling the card's spacing: I'm planning to set the like-wrap's font size from the viewport, and I'll set the stage and card as centered flex or grid layouts with padding and no gaps, using margins instead.

Still writing the CSS: I'm defining the color palette as root variables and turning the burst keyframes' sizing into a shared scale.

Still writing the base styles: a dark radial background, the page font stack, and the reset for box sizing and margins.

Still writing the base styles: I'm setting up the box sizing, the full-height html and body, and a dark radial background with the page font stack, and making sure horizontal overflow stays hidden on the body.

Still writing the ambient background: I'm setting each floating shape to rise from below the viewport, drift and rotate slightly, and fade in and out with its own opacity.

Still writing the stage and ambient layers: a grid-centered stage with padding and hidden overflow, and I'm making sure the drifting hearts stay behind the card.

Still writing the flash overlay: a full-stage radial pink glow that starts transparent, flares up briefly when the like is checked, and fades out.

Still writing the card styles: a relative, centered flex column with a fixed max width, and a quake animation on the card whenever the like is checked.

Still writing the quake keyframes: the card shakes with small, shrinking jolts of translation and rotation before settling back to rest.

Still writing the hover-and-wrap styles: I'm adding a hue-rotation keyframe to the like wrapper so the button and particles flash through rainbow colors during the click before returning to pink.

Still writing the hue animation: I'm making the filter's start and end values neutral, so the rainbow flash returns to the original pink without a visible color jump.

Still on the hue flash: I want the wrap's filter to start and end at neutral values with a saturation peak in the middle, so the rainbow shuffle lands back on pink. I'm also wondering whether putting a filter on the like wrapper will create a stacking context that affects the z-index layering.

Still writing the title styles: a small cyan eyebrow pill above the heading, then a large gradient-text heading that scales with the viewport.

Still writing the like button's layout: I'm giving the wrap a fixed width, a top margin to clear the title, and a font size that scales with the viewport.

Still writing the like button's layout: I'm placing the input off-screen and building the pulsing halo behind the button.

Still writing the halo: a bordered pink ring sized to the button that pulses outward and fades, and I'm hiding it once the like is checked. Where it sits in the DOM relative to the label still needs sorting out.

Still writing the like button's styling: a pill-shaped label with a dark fill and a pink border, laid out as an inline flex row with a bit of gap between its parts.

Still writing the button's styling: a dark pill with a pink border, a soft shadow, and a transition that springs on hover.

Still writing the like button's styling: I'm adding a pseudo-element overlay to the label, positioned to cover it, for the liked-state gradient.

Still writing the button's overlay: a gradient pseudo-element covering the pill that stays hidden for now and fades in when liked.

Still writing the sheen: a diagonal white gradient band that starts off to the left, edged with a skew, and sweeps across the pill when the like is checked.

Still writing the sheen: I'm working out how to keep the diagonal white band inside the pill's rounded edges, since the label can't clip without also cutting off the heart's scale-up.

Still writing the sheen: I'm moving the streak into its own clipped span so it stays inside the pill's rounded edges.

Still writing the sheen: I'm adding a span with a sweeping streak, clipped to the pill's rounded edges, and triggering it once when the like is checked.

Still writing the heart: a fixed-size stroked outline with transparent fill and a beat animation, and I'm keeping it positioned so its glow can overflow the label.

Still writing the heart's liked state: it fills and outlines in white, and I'm checking how its pop animation and drop shadow should layer over the pill.

Still writing the count roll: a fixed-height stacked container that hides overflow so the digits can slide vertically.

Still writing the count's stacking styles: the stack's spans are stacked in one grid cell, and the second digit starts pushed below so the roll can bring it up.

Still writing the count: the digits sit in a short stacked container, and both spans share tabular numerals so the width stays fixed as the number rolls from 1,284 to 1,285.

Still writing the count: the number sits in a stacked box so "1,284" can roll up into "1,285" with the same tabular width.

Still writing the plus indicator: an absolutely positioned glyph centered in the button, with a pink glow and hidden until the like is checked.

Still writing the plus indicator's keyframes: it fades in at center, pops slightly, then drifts upward and fades out.

Still writing the shock ring: it's absolutely positioned over the button and sized to fill it, and I'm working out how its transform should animate outward.

Still writing the shock ring: a circular ring centered on the button, sized larger than it so it can expand outward when the like is checked.

Still writing the ring: I'm giving it a circular shape centered on the button, and I'm planning to scale it outward and fade it over the animation, using a shadow instead of animating the border width.

Still writing the ring: I'm adding a second, yellow ring that trails the first by a short delay, both expanding and fading outward.

Still writing the burst: a zero-size container at the button's center holds the particles, each one sized by custom properties and offset so it sits centered on its origin point.

Still writing the burst's particles: each one is a small absolutely positioned piece sized by custom properties, with the heart variant holding an inline SVG that fills its box.

Still writing the particle styles: the heart variant drops its background and takes the particle's color, and the SVG fills its box.

Still writing the particle styles: the star and dot variants get their own shapes and sizes, and the bars are narrow and rounded.

Still writing the burst's keyframes: I'm weighing whether to add a second wave of particles for extra chaos, but I'm settling on around 24 to keep it lively without bloating the markup.

Still writing the ambient layer: a set of drifting shapes that rise from the bottom and fade in and out, each one with its own size, color, and timing.

Still writing the ambient layer: I'm placing the drifting shapes just below the viewport and using negative delays so they're already spread across the screen on first paint.

Still writing the ambient layer: I'm checking that the drifting shapes read well against the card's text. I'm also weighing a static pink glow behind the button, which could be a radial gradient in the like wrapper, and I'll decide once I see how the halo looks.

Now I'm settling the responsiveness at 375px: the font size scales with the viewport but stays clamped at a readable minimum, so the button's width is what needs checking.

Still writing the burst's sizing: the stage clips the particles and the flash, and at 375px the burst and halo still fit within the visible width.

Checking the layout at 375px: the stacked content comes to roughly 466px tall, which fits comfortably in a 667px viewport. At 1280×800 the heading sits on one line and the button gets about 70px of top margin.

Settling on a font size of about 24px at desktop width, which keeps the button a strong hero element without overwhelming the 1280px layout.

Still writing the reduced-motion fallback: I'm turning off the drifting shapes, heart beat, and burst animations for users who prefer less motion.

Still writing the reduced-motion fallback: I'm switching off the ambient drift, heart beat, and card and button motion for users who prefer less movement, while keeping the burst since it's triggered by their own click.

Still writing the burst's particles: I'm laying out 24 pieces around the center at even angles, cycling through heart, dot, star, and bar shapes and six palette colors, with the distances alternating so the burst isn't a perfect ring.

Still writing the particle list: I'm laying out the burst at even angles, starting with a pink heart at 0 degrees and a yellow dot at 15 degrees, with distances and spin varying per particle.

Still working out the twenty-four particles: I'm giving them even spacing around the center, with distances that vary and a few different colors.

Still writing the particle list: I'm laying out the burst at even angles, starting with a pink heart at 0 degrees and a yellow dot at 15 degrees, with distances and spin varying per particle.

Still writing the particle list: I'm continuing the even angles around the center, varying the distances, spins, and delays for each piece.

Still writing the burst's particle list: I'm continuing the even angles around the center, with distances, spins, and delays varying for each piece.

Still writing the burst's particle list: I'm continuing the even angles around the center, with distances, spins, and delays varying for each piece.

Still writing the particle styles: the heart, dot, star, and bar variants each get their own size and shape, with the stars clipped to a polygon and the bars narrow and rounded.

Still writing the ambient hearts: I'm placing the SVG hearts at set left positions with custom sizes, colors, timing, and opacity.

Still writing the ambient hearts: each one is an inline SVG heart sized in pixels, with its own left position, color, timing, and opacity, and I'm making sure they overflow visibly so their edges aren't clipped.

Still writing the hover states: the focus ring gets an outline offset from the button, and hovering lifts it slightly while pressing pulls it back down.

Still writing the hover shadows: the checked state's glow is more specific than the hover glow, so the pressed look wins over it.

Still writing the hover and checked styles: the label's shadows and border change when it's checked, and the count chip flips its background to match.

Still writing the hover and checked-state details: the heart's pop animation is set on the checked state, and when unchecking, the beat animation restarts right away.

I'm checking how the page looks on first paint, before anyone clicks: the heart is unliked with its beat, the label is dark with a pink border, and the count reads 1,284. I'm also weighing whether there should be some visible hint of the burst before a click, since the particles only show up on interaction.

I'm weighing whether a looping preview burst could hint at the click effect before anyone interacts, since the real particles only appear on a click. That might be more fun than a plain ambient layer, but I'm not sure it would read as part of the design.

I'm weighing whether a looping idle burst would tease the effect before anyone clicks, since the real burst only appears on interaction. It would make the page feel alive, but it might cheapen the click, so for now I'm leaning toward a gentle heartbeat, halo pulse, and drifting hearts, with the full burst saved for the click.

I'm weighing whether a looping idle burst would tease the click effect, but I'd rather keep the resting state calm. A subtle attention nudge, a small wiggle every few seconds, should make the page feel alive without cheapening the full burst on click.

I'm weighing how the click burst should feel, and whether the page needs a teaser of it before anyone interacts. I'm also thinking about a small wiggle every few seconds so the resting state still feels alive.

Still writing the rays: I'm adding a spinning conic-gradient burst behind the button for the checked state, so the click has a rotating halo on top of the particles.

Still writing the rays: I'm adding a spinning conic-gradient starburst behind the button that fades out with a radial mask, with prefixed and unprefixed mask properties for browser support.

Still writing the rays: I'm defining a spinning conic-gradient sunburst that sits behind the label, scales outward, and fades away.

Still writing the rays: I'm styling the spinning sunburst with a conic-gradient, masked so it fades toward the edges.

Still writing the rays: I'm defining a multicolored conic-gradient sunburst that scales outward and rotates while it fades.

Still writing the rays: I'm adding the mixed pink and yellow ray pattern, then checking whether it reads as crazy enough. The count and label bounce with an overshoot curve, and the heart fill goes white when liked.

I'm settling on the liked state's colors: a white heart on the pink-to-orange gradient, with the count chip and word turning white too. I'm also adding a sheen sweep and a dark glow from the stage flash, and I'm deciding on the header copy, "Did you like this?" with a small "Pure CSS · zero JavaScript" eyebrow.

Still writing the page's supporting details: I'm settling on the subtitle and a short keyboard hint, and deciding against a card box so the composition floats over the background.

Still writing the layering: I'm checking that the `:has()` selector catches the checked state from the stage, and adding `aria-hidden` to all the decorative layers.

Still writing the layering: I'm making sure the flash overlay sits below the card, and that the stage gets its own stacking level above the fixed background so nothing ends up underneath it.

Still writing the styles: I'm finishing the heart and sheen details, then writing the code out in full with valid CSS and the accessibility bits in place.

Still writing the stacking and accessibility details: the hidden input stays focusable even though it doesn't take pointer events, so keyboard users can still reach the button.

Still writing the burst keyframes: each particle starts hidden at its angle, pushes outward while it grows and spins, then fades back out.

Still writing the burst keyframes: each particle pushes outward along its angle while it scales and spins, then fades back out over about a second.

Still writing the shock rings: I'm styling a circular border with a pink glow that expands outward and fades, with a second ring layered on top.

Still writing the shock ring: I'm styling a circular border with a pink glow and an inner yellow ring that both expand and fade.

Still writing the shock ring: a second, smaller inner ring rides along with the outer one, and both expand and fade together.

Still writing the `.plus` label: it's a white, bold, glowing pink text centered over the button, and I'm working out how it should float upward as it fades.

Still writing the `.plus` float: it starts small at the center, jumps up a bit while growing, then drifts higher and fades out.

Now I'm settling the copy: an eyebrow reading "Pure CSS · No JavaScript," the heading "Did you like this?", and a subtitle about one checkbox and a pile of keyframes.

Still writing the closing details: I'm finishing the eyebrow, heading, and subtitle copy, plus a short keyboard hint under the button.

Still writing the markup: I'm adding the hidden heart symbol, the decorative background layers, and the card's eyebrow line.

Still writing the markup: I'm adding the heading, subtitle, and the like wrapper with its checkbox, halo, rays, label, shock ring, particle burst, and "+1" label.

Still writing the hint line and closing the markup: a keyboard-friendly tip under the button, then the wrapper tags.

Still writing the stacking details: the count chip's rolled numbers slide up inside a clipped box, so only the current value shows at any moment.

Still writing the stacking details: I'm checking that the rolled count text stays clipped inside the chip's padding, so the next number doesn't peek out below it.

Still working out the count chip's clipping: the rolled digits are sitting in the chip's bottom padding, so a sliver of the next number could show there. I'm thinking about moving the padding onto an outer wrapper so the clipped box is just the number stack.

Still writing the markup: I'm wrapping the count's rolling digits in an inner stack so the chip's padding sits outside the clipped box.

Still writing the CSS: I'm getting the base reset and body sizing in place, with `box-sizing` on everything and the full-height layout set up first.

Still writing the body styles: I'm setting the dark gradient background, the light text color, the rounded system font stack, and the viewport-height minimums.

Still writing the background: I'm setting up a fixed full-screen layer with the ambient shapes, and styling each one to rise up from below and fade in and out.

Still writing the ambient drift: each floating shape rises from below, fading in and out while it turns, and I'm setting up the keyframes and timing variables for that.

Still writing the stage and flash layers: I'm giving the stage a grid that centers the card, and setting up a flash overlay that starts hidden under the card.

Still writing the eyebrow styles: a pill-shaped badge with a cyan border and a faint tinted background.

Still writing the heading styles: a big, heavy title with a white-to-pink gradient fill, clipped to the text.

Still writing the `.like-wrap` block: it's a relative container sized to its content, with margins and a font size that scales with the viewport.

Still writing the `.spot` glow: it's centered on the button with a pink radial gradient and no pointer events.

Still writing the halo: a ring that expands outward from the button while it fades, and it hides once the checkbox is checked.

Still writing the rays: a repeating conic gradient of yellow spokes, masked to fade out toward the edge.

Still writing the rays: I'm checking that the mask fades the conic spokes out toward the edge, and that the centering margins line up with the scaled transform.

Still writing the button styles: a pill-shaped label with a pink border and dark background, laid out as a flex row with a gap between the icon and text.

Still writing the button: the label's bottom edge gets a soft shadow and a faint top highlight, and it springs up slightly on hover.

Still writing the button's overlay and sheen: a gradient fill that fades in on the pseudo-element, and a clipped sheen layer sitting over the label.

Still writing the sheen: a diagonal white highlight that sits clipped inside the label and slides across it, then the heart icon's stroke styling comes next.

Still writing the heart icon: I'm adding the stroke and fill styling, its transitions, and the beat animation that pulses it gently.

Still writing the count chip's styles: a pill with a faint translucent background and tabular numerals so the rolled digits line up.

Still writing the liked state: the button gets a bounce, a brighter border and a pink glow, the fill fades in, and the heart turns white with a soft glow and a pop animation.

Still writing the animation: the button's bounce keyframes, starting from a squash-and-stretch.

Still writing the heart pop keyframes: a squash-and-stretch sequence that scales the heart unevenly and rotates it slightly.

Still writing the keyframes: the heart pop starts with a squash, then stretches and spins through a few overshoots before settling back at rest. Now I'm starting the sheen keyframes, which fade the highlight in as it slides across the label.

Still writing the keyframes: the sheen's animation ends with the highlight parked off to the right, so it disappears cleanly.

Still writing the stage effects: when the like is checked, the flash, the card shake and the hue shift all fire together.

Still writing the reduced-motion fallback: I'm turning off the ambient, halo and heart animations for users who prefer less motion.

Still writing the reduced-motion rules and the hint line: I'm turning off the remaining animations for those users, then styling the keyboard-key hint with a small monospace badge.

Still writing the mobile layout: I'm checking the card padding and stage spacing, then sizing the like label and count chip so they fit at 375px.

Still checking the burst layout: the largest radius is about 181px, so the particles would reach past the 375px card edge at most angles, but the stage clips the overflow and the horizontal extremes still fit.

Still writing the hover and focus states for the like button, plus the checkbox sync that drives the liked state.

Still writing the last of the layout: the burst particles sit in a stacking layer above the label, and the wrapper picks up a stacking context while the hue animation runs.

Still checking the stacking: the rays and halo sit inside the stage's layering, and the card's own stacking context keeps the labels and burst particles in order.

Still writing the ambient hearts: I'm placing fourteen floating hearts across the background, each with its own size, color, speed, and drift.

Still writing the ambient hearts: the remaining ones get their own sizes, colors, speeds and drift values.

Still writing the ambient hearts: the last few get their own sizes, colors, speeds and drift values, with one tiny white sparkle near the left edge.

Still writing the ambient hearts: I'm checking that their opacity keyframes pick up the per-heart variable, and that the drift keeps them visible at first paint.

Still checking the timing: the particle burst runs about a second, the ring and rays a bit longer, and the whole sequence settles in roughly 1.1 seconds. I'm wondering whether the effect needs more energy, but the squash, spin, rays, flash, shake and hue cycle already give it plenty, so I'm leaving it there and looking at whether the hue filter might be heavy on the card.

Checking the timing and the unlike case next: a quick double-click would cut the burst off abruptly, which is acceptable here, since CSS can't tell when the state changed.

I'm checking whether clicking the label moves focus to the hidden checkbox, and whether `:focus-visible` would then show a focus ring after a mouse click.

Still writing the SVG heart symbol, setting up its viewBox so the icon scales with the button.

Checking how the `<use>` symbol scales inside the SVG viewBox, and whether the stroke on the heart inherits correctly through the symbol.

Still writing the SVG symbol and checking how its stroke width and drop shadow carry through the `<use>` element at different sizes.

Still writing the burst particles: a heart, a dot, a star and a bar, each with its own angle, distance, spin and colour.

Still writing the burst particles: more hearts, dots, stars and bars, each with its own angle, distance, spin and colour.

Still writing the burst particles: more hearts, dots, stars and bars, each with its own angle, distance, spin and colour.

Still writing the burst particles: more hearts, dots, stars and bars, each with its own angle, distance, spin and colour.

Still writing the burst particles: more hearts, dots, stars and bars, each with its own angle, distance, spin and colour.

Still writing the burst particles: the last few hearts, dots, stars and bars, each with its own angle, distance, spin and colour.

Still writing the burst particles: the last one is a bar in pink, positioned at the lower-left of the ring.

Still writing the burst layout: the particles sit in a positioned wrapper with fixed size, and the base styles for each piece come next.

Still writing the stylesheet for the burst pieces: the base particle gets a fixed size and centred margin, and the heart variant switches to currentColor so the SVG fills with its colour.

Still writing the particle styles: the heart variant takes its colour through currentColor and fills its SVG, while the dot, star and bar each get their own shape and size.

Next I'm wiring up the burst animation: each particle plays the burst keyframes when the checkbox is checked, staggered by its own delay.

Still writing the stylesheet: the stack chip uses an inline grid so its child spans overlap in the same cell, ready for the word and count to swap.

Still writing the stack chip's transitions: the word and count slide vertically, with the first span lifting out and the second sliding in when the button is checked.

Still writing the stack chip styles: the word and count each sit in one grid cell, and the second span is pushed below the clip until the button is checked.

Still writing the wrapper's selectors: the label is the sibling after the checkbox, so the `~` combinator also reaches the halo, rays, shock, burst and plus layers.

Still writing the focus and outline styles for the input, so keyboard users get a visible ring on the label.

Still writing the stylesheet: the hint text and kbd styling come next, and I'm checking whether the card's quake transform, within the stage's padding, might clip anything.

Now I'm picturing what happens the moment the button is clicked, so I'm stepping through the first instant of the animation: the label squashes, the heart pops, the rays and ring start expanding, and the flash, card shake and particles kick in.

Next I'm checking the sheen layer: it's absolutely positioned with z-index auto, so it should paint above the heart and label text without needing a z-index of its own.

Still checking whether the halo and ambient hearts could interfere with the button's hit area or paint order.

Still checking the HTML structure: the label holds spans and an SVG, which is valid, and the input sits before it as the sibling the selectors depend on.

Still going through the layout: I'm checking whether the wrapper's width and the card's centring hold up at the narrow 375px size.

Checking the layout details now: the wrapper takes its width from the label, and its margins give the stack enough vertical space. The halo sits on the same box as the label, since the other layers are absolutely positioned, so it should line up with the button's edges.

Still working on the pill halo and the rays: the ring is scaled up to match the pill's shape, and the spinning conic rays get their segment widths checked. Next I'm confirming the plus label sits centred over the button.

Checking the SVG symbol setup: the hidden zero-size SVG holding the heart definition should still work for `<use>` references, so the shared heart shape should render across the ambient hearts and the button.

Now I'm checking the SVG symbol setup again: the zero-size hidden sprite should still resolve for `<use>` references, since the symbol is found by id. Next I'm confirming the input and label pairing, so the checkbox toggles the animation when the button is focused or tapped.

Now I'm checking the page's overflow: the fixed background and the clipping stage should keep any stray pieces from causing a horizontal scrollbar, and the decorative spot and rays are wide enough to spill past the button but get cut off cleanly. On mobile, the stage's height should still fit comfortably within a typical phone screen.

Now I'm checking the wide screens too: at 1920×1080 the font tops out at 24px, which still looks fine. I'm also wondering whether the scaled-up halo ring will feel right on tablets. Next I'm confirming that the card's quake shake only moves the heading a few pixels, which is fine. Finally, when the button is liked, the rays sit inside the wrapper, so the hue shift should carry through the particles and the rays together.

Checking the particle timing now: at the start they're invisible and scaled to zero, then within the first tenth of the animation they fade in and move out to about 40% of their full distance.

Settling on a plain "Did you like this?" heading, with a small tip line at the bottom. I'm also making sure the page doesn't feel cramped, and I'm starting on the final CSS with the property names kept exact, including whether `user-select` needs the `-webkit-` prefix for Safari.

Next I'm checking which CSS vendor prefixes are still needed for background-clip, mask-image, and the viewport units. I'm also confirming that the newer selectors and gradient functions I plan to use are supported in current Chrome.

Checking the heart path's syntax now, since the SVG data is what decides whether the shape draws at all.

Still writing the heart path: I'm checking the cubic and relative segments of the SVG data, since they decide whether the shape draws correctly.

Still writing the heart path: the relative cubic segments and the closing line make a clean filled shape, so the stroke will trace its outer edge for the unliked state.

Still writing the CSS: I'm settling the body's overflow and font stack, then checking the vendor prefixes for the mobile tap and text clipping.

Still writing the stylesheet: I'm finishing the page background and the ambient hearts' base positioning.

Still writing the stylesheet: I'm laying out the ambient background hearts, which rise from the bottom of the fixed layer with a fade-in and fade-out and a slight rotation.

Still writing the stylesheet: I'm setting the body background and font stack, then working through the fixed ambient layer and the stage's stacking.

Still writing the stylesheet: I'm finishing the background gradients and the ambient hearts' base rules, with their fade and rising keyframes.

Still writing the stylesheet: I'm adding the card's layout and the stage's spacing, then the ambient hearts' keyframes.

Still writing the HTML file: I'm laying out the shared heart symbol that the ambient hearts and the button will reference.

Still writing the HTML file: the shared heart symbol is in place, and I'm now setting up the ambient hearts that reference it.

Still writing the markup: I'm adding the flash overlay, the heading and subtitle, and the like-wrap with its checkbox, halo, rays, and label.

Still writing the markup: the like-wrap's inner parts are going in now, with the heart icon, the Like/Liked word stack, and the count chip.

Still writing the markup: I'm checking that the label's absolutely positioned sheen stays out of the flex layout, and that the eyebrow paragraph sits as a normal block item in the centred column.

Now I'm writing the CSS for the like wrapper and its parts, starting with the eyebrow label's padding, border, and colour.

Still writing the stylesheet: I'm styling the eyebrow label and the heading, with its gradient text fill, then the subtitle's spacing and colour.

Still writing the wrapper: I'm setting its margins so the button sits centred between the heading and the hint, with the font size scaling down on narrow screens.

Still working out the layout math: the heading, subtitle, button and hint should stack to roughly 440px, which fits comfortably in the 800px stage.

Still writing the stylesheet: I'm styling the hidden checkbox and the button's pill shape, border, and background.

Still writing the stylesheet: I'm styling the hover and pressed states of the like button, with a lift and a pink glow on hover and a squash on press.

Still writing the stylesheet: I'm finishing the button's overlay and the sheen that sweeps across it.

Still writing the stylesheet: I'm styling the heart icon's outline and its sizing, with a beating animation.

Still writing the stylesheet: I'm styling the count chip and the word stack that swaps between Like and Liked.

Still writing the stylesheet: I'm wiring up the checked state of the like button, with a boing animation and a pink glow.

Still writing the stylesheet: I'm wiring the checked state of the like button, with the heart filling white, a glowing shadow, and the count and word stack swapping over.

Still writing the stylesheet: I'm adding the halo's positioning, which is set to fill the button's box.

Still writing the halo: I'm placing it over the button, giving it a pulsing ring that expands and fades, and hiding it once the button is checked.

Still writing the stylesheet: I'm placing the spotlight glow and the rays behind the button, with the rays masked to fade out toward the edges.

Still writing the stylesheet: I'm adding the shock ring's sizing and glow, which expands outward when the button is liked.

Still writing the stylesheet: I'm setting the plus sign's position, weight, and glow, and its entrance animation.

Still writing the stylesheet: I'm adding the flash, card shake, and hue shift that fire together when the button is liked.

Still writing the keyframes: I'm adding the beat, boing, and heart-pop animations for the button and its heart.

Still writing the keyframes: I'm finishing the beat and boing timing, then the heart-pop spin and the sheen sweep.

Still writing the keyframes: I'm adding the rays' fade-in and rotation, with the spin easing in from a small scale.

Still writing the keyframes: I'm adding the rays' fade and spin, the shock ring's expansion, and the plus sign floating upward.

Still writing the burst keyframes: each particle travels outward along its angle, scaling down as it fades.

Still writing the keyframes: I'm adding the flash fade and the quake shake, with small offsets and tilts that settle back to rest.

Still writing the keyframes: I'm adding the quake and hue animations, with small shakes and a colour shift that settle back to rest.

Still writing the stylesheet: I'm defining the burst container and the particle base styles, with dot, bar, and star shapes.

Still writing the stylesheet: I'm wiring the burst particles so that each one animates outward when the button is checked.

Still writing the stylesheet: I'm setting the particle's offset so it stays centred on its anchor point.

Still writing the stylesheet: I'm finishing the hint's sizing and colour, then the keyboard-key styling.

Still writing the stylesheet: I'm finishing the hint's spacing and colour, then styling the keyboard-key badge.

Still writing the stylesheet: I'm checking the shock ring's sizing and the plus sign's position, and confirming the particle origin sits centred on the button.

Still writing the stylesheet: I'm adding the reduced-motion fallback, which switches off the ambient hearts, the halo, and the card and button animations.

Still writing the stylesheet: I'm setting the reduced-motion overrides, so the ambient hearts stay static at their set opacity and the halo, card, and button animations switch off.

Still writing the stylesheet: I'm adding the flash-and-quake behaviour to the stage, with the card shaking when the button is liked.

Still writing the stylesheet: I'm checking that the card stays within the 335px width on a phone and that the heading size keeps it on a single line.

Checking the mobile layout at 375px now: the heading should wrap onto one line at that width, and on a 320px screen it will break into two, which is fine. I'll also look at how the like button sits in the narrower card.

Still writing the stylesheet: I'm checking the mobile layout, including the like button's font size and the rolling word stack, and confirming the moon glow and ambient hearts stay inside the stage so nothing forces a horizontal scrollbar.

Checking the stylesheet's remaining details now: the reduced-motion overrides, the body and stage heights, and whether any font shorthand or prefix could cause trouble.

Still checking the stylesheet: I'm confirming the selectors using `:has()` and the `:focus-visible` sibling rule are valid, and that the stack transition only touches transform.

Checking the transitions on the heart next: the fill should go from clear to white over about 0.3 seconds, and the pop animation starts at the same moment. I'm also confirming the drop-shadow filter interpolates cleanly from none, and that the count and the liked gradient fade in smoothly.

Checking the hover and active rules on the like button now: the press state should win over the hover lift, since it's declared later with the same specificity.

Checking the hover and active rules: the press state overrides the hover lift since it comes later with the same specificity. Once the animation runs, the hover transform stays in place, which is fine. I'm also confirming the halo's centring transform doesn't clash with its keyframes.

Checking the ambient hearts next: I'm placing each one at its own left offset with its size, colour, duration, and opacity set through custom properties.

Still writing the ambient hearts: each one gets its own position, size, colour, drift timing, and opacity.

Still writing the ambient hearts: I'm placing the last few with their positions, sizes, colours, and drift timing.

Still writing the ambient hearts: I'm placing the final few with their positions, sizes, colours, and drift timing.

Still writing the ambient hearts: I'm placing the last couple with their positions, sizes, colours, and drift timing.

Still writing the ambient hearts: I'm finishing the drift and opacity settings for each one, and checking that the faint hearts stay within the stage without causing overflow.

I'm checking whether the effect feels right overall: the label squashes, the heart spins while it scales, and the burst, shockwave, flash, quake and "+1" pop all fire together. That's a lot of motion, but it's what "crazy" calls for.

Still writing the stylesheet: I'm checking the burst keyframes, confirming the particle delays and the rotation and scale calculations are valid.

Still writing the stylesheet: I'm checking the particle and hint markup for overlap issues, and confirming the clip-path star and the rotation don't conflict.

Checking whether the Like button's hover and press states, the hidden checkbox, and the initial-paint opacities are set up correctly, so the effect stays hidden until it's clicked.

Still writing the stylesheet: I'm checking that the pointer events are set so the label takes the clicks while the decorative layers let them pass through, and that the sheen won't intercept anything.

Still writing the stylesheet: I'm finishing the like button's container, using an inline grid so the label keeps its height and the count chip sits neatly beside the word. I'm also checking that the nowrap rule holds and that the liked state darkens the count chip.

Still writing the stylesheet: I'm checking the border and the liked gradient. The `::before` layer sits above the label's background, but it only covers the padding box, so the border stays visible around the edge.

Still checking the `::before` layer: since it sits inside the padding box, the border stays visible around the liked gradient, and the sheen is limited the same way. The halo and rays are separate siblings of the label, so they don't get caught up in that. I'm also thinking about whether the `filter` on the wrapper changes how the absolutely positioned children stack, though it should be fine.

Checking the like button's invisible checkbox and the `:checked` rules, I'm deciding whether the keyboard hint is enough. It probably is: the hint covers Tab and Space, and a "Click or press a key to start" message would only make sense for a game, so I'll leave it out.

Still writing the stylesheet: the like button's hint and wrapper are in place, and I'm finishing the border and liked-state gradient, then laying out the final file.

Still writing the stylesheet: I'm putting the finishing touches on the hint and wrapper, then laying out the complete file with the title, the like button, and the ambient hearts.

Still writing the stylesheet: I'm finishing the background gradients and the drifting hearts, and laying out the stage so it has room to scroll without overflow.

Still writing the stylesheet: I'm finishing the card layout and the flash overlay, which sits behind everything and passes clicks through.

Still writing the stylesheet: I'm finishing the hearts' colours and the rest of the Like button's markup, then checking the final layout.

Checking the SVG overflow next: the heart icons need `overflow: visible` so their strokes and scaling don't get clipped, and I'm making sure the same applies to the ambient hearts.

Still writing the stylesheet: I'm checking the `.like-btn` font sizing and the SVG overflow behaviour, making sure the heart icons inside the label aren't clipped.

Still writing the stylesheet: I'm finishing the like button's font sizing and the heading layout, checking that the label inherits its size from the wrapper.

Still writing the stylesheet: I'm checking the body background, making sure the gradient covers the full canvas at the minimum height.

I'm checking how the body gradient fills the canvas at 1280×800, with a pink glow behind the card over the dark purple base. The drifting hearts should sit under it, so the card stays the clear focus.

Still writing the stylesheet: I'm finishing the body background gradients so the pink glow sits behind the card over the dark purple base.

Still writing the stylesheet: I'm adding the drifting background hearts, each with its own size, colour, opacity and timing, and checking the rise animation's keyframes.

Still writing the stylesheet: I'm finishing the ambient hearts' keyframes and the layout rules, then adding the flash overlay that sits behind the card.

Still writing the stylesheet: I'm finishing the title and subtitle styles and the card's spacing.

Still writing the stylesheet: I'm adding the subtitle and hint styles, along with the keyboard key look.

Still writing the stylesheet: I'm laying out the like button's spotlight and wrapper sizing, with the label sized in em so it scales with the wrapper.

Still writing the stylesheet: I'm setting up the halo ring and the rays behind the Like button, sized in em so they scale with the wrapper.

Still writing the stylesheet: I'm adding the shockwave ring and the rays for the click burst, sized in em so they track the button.

Still writing the stylesheet: I'm laying out the like button's label, with its pill shape, border, and dark background, and setting its type and transition.

Still writing the stylesheet: I'm finishing the like button's hover and press transitions, and setting up the gradient layer that fades in when it's liked.

Still writing the stylesheet: I'm finishing the like button's gradient layer and its sheen, then checking the keyframe names so every animation I reference is defined.

Still writing the stylesheet: I'm checking the rays and quake animations, and the plus indicator's sizing and glow.

Still working through the like button's remaining CSS: the wrap's hue filter sits on top of the button's boing and the card's quake, so all three animate together, which should make the whole thing look chaotic in the intended way.

Still writing the stylesheet: I'm finishing the filter and containing-block checks, confirming the absolutely positioned children still resolve against the wrapper, and wrapping up the final file.

Still checking the CSS timing functions and keyframe values for the plus indicator and the heart pop, confirming each cubic-bezier is valid.

Still writing the stylesheet: I'm checking that the `animation` shorthand for the burst particles is valid, with the delay coming from the custom property after the timing function.

Still writing the stylesheet: I'm checking the keyframe shorthands for the rising hearts, the halo, the rays, the ring, the sheen, and the beat, confirming each animation's timing is valid.

Still writing the stylesheet: I'm checking the keyboard key styling and the font shorthand for the hint text.

Still writing the stylesheet: I'm checking the keyboard key font and the overflow and inset rules, confirming the background layer sits beneath the content.

Still writing the stylesheet: I'm checking the `.like-wrap` sizing, confirming that absolutely positioned children don't add to its max-content width, so it stays as wide as the label.

I'm checking whether the inline-flex label leaves a small gap under it inside the block wrapper, since that could shift the burst origin off the button's centre by a couple of pixels.

Still writing the stylesheet: I'm switching `.like-wrap` to a block-level flex container with `width: max-content`, so the label is its only in-flow child and the burst origin stays centred on the button.

Still writing the stylesheet: I'm making sure the wrap's absolutely positioned children don't disturb its flow, and that the halo, rays, and quake all still line up with the button.

Still writing the stylesheet: I'm checking that the body's overflow rules keep the page from scrolling sideways, and that the mobile height and padding still fit.

Now I'm settling the wrapper's min-height and padding, checking that the stage still fits on a phone without pushing the page sideways.

Still tidying the stylesheet: I'm checking the reduced-motion case so the ambient hearts keep their base opacity without animating.

Checking the accessibility bits next: the decorative background and flash layers get `aria-hidden`, and I'm confirming there's no script tag anywhere in the page.

Checking the page's head and the viewport setup next, then making sure the body's font stack falls back cleanly.

Still writing the stylesheet: I'm styling the background hearts so they drift up from below the screen, each with its own size, colour and timing.

Still writing the stylesheet: I'm setting up the card's flex layout and the centred text.

Still writing the stylesheet: I'm setting up the flash overlay, the eyebrow pill, and the heading's size and weight.

Still writing the stylesheet: I'm styling the keyboard key and the hint text, with the key's padding, border, and background.

Still writing the stylesheet: I'm styling the spot glow behind the button and the input's hidden positioning.

Still writing the stylesheet: I'm styling the like button's halo ring and its pulse, then the button's pill shape, border, and background.

Still writing the stylesheet: I'm finishing the like button's border, background, and hover and press transitions.

Still writing the stylesheet: I'm adding the like button's gradient fill, which fades in on press, and the sheen layer that sweeps across it.

Still writing the stylesheet: I'm styling the count display and the stack of animated number slots.

Still writing the stylesheet: I'm adding the count's pill styling and the focus outline for the keyboard.

Still writing the stylesheet: I'm adding the liked state, with the boing, the gradient fill, and the heart pop.

Still writing the stylesheet: I'm adding the rays and the shock ring, which burst outward when the button is liked.

Still writing the stylesheet: I'm adding the plus indicator's animation and the confetti burst container.

Still writing the stylesheet: I'm styling the burst particles, with their size, shape, and clip-path stars and hearts.

Still writing the stylesheet: I'm finishing the burst particles' animation and checking that each piece's delay comes from its custom property.

Still writing the stylesheet: I'm adding the keyframes for the beat, boing, and heart pop animations.

Still writing the stylesheet: I'm defining the ring's keyframes, starting from a small, fully visible circle.

Still writing the stylesheet: I'm adding the keyframes for the burst particles and the card's flash, checking that each piece's opacity and scale land where they should.

Still writing the stylesheet: I'm adding the quake and hue keyframes for the card shake and colour shift, then starting the reduced-motion overrides.

Still writing the stylesheet: I'm finishing the reduced-motion overrides for the wrapper, and checking that the liked-state heart still gets its pop animation.

Now I'm adding the reduced-motion rules, and I'm also wondering whether the heart's pop should still play for users who prefer less motion, since it only fires after they press the button.

Next I'm laying out the HTML body, starting with a comment noting that one shared heart shape gets reused through a `<use>` reference.

Still writing the page markup: I'm defining one shared heart symbol that the background and button both reuse, then laying out the decorative hearts behind the card.

Still writing the markup: I'm adding the like button's wrapper, the count, the burst particles, and the plus-one indicator.

Still writing the page markup: I'm finishing the burst and count layout, then closing out the body and html tags.

Still writing the stylesheet: I'm checking the burst particles' inline custom properties, then making sure the plus indicator's transform starts from its centred position.

Still checking the positioning: the rings and rays scale out from their centres, and the halo is pulled back to centre with its translate.

Still checking the layout: the wrapper is sized to its single in-flow label, so the absolutely positioned halo and spot fill it correctly. Next I'm turning to the ambient hearts.

Still writing the stylesheet: I'm tidying the burst particles' colour and background rules for the heart variant.

Still writing the stylesheet: I'm adding the particle colour and background rules for the heart variant, and checking that the burst pieces keep their shared colour.

Next I'm checking the heading and text layout: the eyebrow pill and heading should size to their content inside the centred column, and the long heading should still wrap within the card. I'm also confirming the keyboard hint and the subtitle's character-based max width behave sensibly across screen sizes.

Now I'm checking the spot glow's placement inside the like wrapper, since it's absolutely positioned there and needs to stay behind the button.

Still checking the layout: I'm confirming the label's `::before` sits behind the button at z-index -1, and I'm noting that the sheen element, which has no z-index, will paint above it.

Still checking the layering: the heart icon sits in normal flow above the label's background pseudo-element, and the drop-shadow glow only appears once it's liked. The outline stroke is set on the wrapper, and the shared shape inherits it, while the fill stays transparent.

Still checking the keyframes: the burst particles use `rotate` and `translateX` chains with matching function counts, so the interpolation should hold cleanly across each stage.

Now I'm checking how the hover state behaves on touch screens, where it can stick after a tap, and that's fine. I'm also confirming the press-down scale doesn't clash with the boing animation: the animation overrides it during the bounce, and the press effect returns once it finishes if the button is still held. The label is separate from the checkbox, so a click toggles the state only once.

Now I'm weighing the accessible name for the like button. The count and both "Like" and "Liked" text are read out by screen readers, which sounds cluttered, so I'm considering how to tidy that up without leaving the label empty.

I'm weighing whether to hide the word stack and count from screen readers and add a visually hidden "Like" label instead, so the button name isn't cluttered with "Like Liked 1,284 1,285." That means a small extra CSS rule for the hidden text, which seems worth it.

I'm deciding whether the screen-reader name is cluttered, since it would read out "Like Liked 1,284 1,285." I'll hide the stacked words and the count from assistive tech and add a short visually hidden "Like" label so the button still has a clear name.

Still writing the stylesheet: I'm adding a screen-reader-only class so the button's name reads clearly as "Like".

Still writing the particle markup: I'm listing out the first few burst pieces with their angles, distances, scales, spin, delays and colours.

Still writing the particle markup: I'm adding the remaining burst pieces, varying their distances, spin and colours.

Still writing the particle markup: I'm adding the last burst pieces, varying their angles, distances, spin, delays and colours.

Still writing the particle markup: I'm adding the final burst pieces, varying their angles, distances, spin, delays and colours.

Still writing the particle markup: I'm checking the burst's reach against the 800px-tall viewport, with the farthest pieces around 276px out from centre, and sanity-checking the mobile scale at roughly 150 to 180px.

Checking the keyframe filters for the heart-hue shift next, and making sure the interpolated hue-rotate and saturate lists line up in each step.

Still writing the stylesheet: I'm finishing the overlay and the rest of the layout rules, checking the brace structure and the wrapper's `position: relative`.

Still checking the stylesheet's finishing touches: I'm confirming the `.sr-only` helper and the final headline gradient rules are sound, with the heading text relying on background clipping that modern browsers support.

Now I'm checking the vertical spacing around the subtitle, with the wrapper's top margin giving the button room below the text.

Next I'm looking at the ambient hearts, which start below the bottom edge of the viewport and drift upward.

Checking the ambient hearts now: with a negative delay they start partway up their path, so they should already be faintly visible on first paint near the bottom. I'm also making sure the fill colour reaches the hearts' paths through the inherited fill, and that the sizing set by the inline variable holds.

Still writing the stylesheet: I'm checking that the heart pop stays within the pill's bounds, since at its peak scale the icon may spill past the top and bottom edges.

Still writing the stylesheet: I'm checking that the heart pop stays inside the pill's bounds, since the icon briefly overhangs the top and bottom edges at its peak scale.

Checking the markup references next: the `#heart` symbol is the only one with that id, and the input's `id="like"` doesn't clash with anything else on the page.

Checking the hover and press states together on the like button, making sure the transform from the hover doesn't fight with the animation.

Still writing the stylesheet: I'm double-checking that the press-down transform on the button doesn't conflict with the hover state, and that the stacked-word transitions line up with the checked rule.

Still writing the stylesheet: I'm finishing the remaining rules and checking the braces match.

Still writing the stylesheet: I'm setting up the base body styles with a dark gradient background and rounded system font.

Still writing the stylesheet: I'm adding the ambient background layer with its drifting hearts.

Still writing the stylesheet: I'm finishing the ambient heart keyframes so they fade in, drift up and rotate, with per-heart opacity and rotation variables.

Still writing the stylesheet: I'm closing out the layout rules and checking that the ambient hearts' keyframes fade them in and out cleanly.

Still writing the stylesheet: I'm checking the stage and card layout, with the grid centring the card horizontally and vertically inside the viewport.

Still writing the stylesheet: I'm checking that the stage's `:has()` selector on the checked state triggers the card's quake animation once when the button flips, and that the flash element picks up the same state.

Checking that the keyframe animation restarts cleanly when the button is toggled off and back on quickly, and I'm also looking at the wrapper's hue animation next.

Still writing the stylesheet: I'm adding the drop-shadow filter on the heart when the button is checked.

Still writing the stylesheet: I'm checking the `.count` styles, making sure its background and padding hold up inside the inline-flex layout.

Still writing the stylesheet: I'm adding the heart's overflow rule so the burst pieces aren't clipped.

Still writing the stylesheet: I'm checking the input's focus handling, since the hidden checkbox stays invisible and the label's focus outline should cover keyboard users.

Still writing the page markup: I'm finishing the stylesheet's base rules and the layered background, then moving on to the HTML structure.

Still writing the stylesheet: I'm setting up the background layer and its fixed, non-interactive container.

Still writing the stylesheet: I'm setting up the stage's flex-free grid so the card stays centred on any screen size.

Still writing the stylesheet: I'm laying out the stage and card so the flash overlay and the card's flex column sit inside the page with no horizontal overflow.

Still writing the stylesheet: I'm adding the eyebrow, heading and hint styles, checking that the hint text wraps cleanly on a 375px screen.

Still writing the stylesheet: I'm checking the subtitle's font sizing next, making sure the heading still reads well at 375px.

Still writing the markup: I'm setting up the inline SVG heart symbol and checking the particle list.

Still writing the markup: I'm placing the ambient hearts at staggered positions and sizes, each with its own colour, duration and delay.

Still writing the markup: I'm placing the ambient hearts at staggered positions, each with its own size, colour, duration and opacity.

Still writing the markup: I'm placing the remaining ambient hearts at staggered positions, each with its own size, colour, speed and opacity.

Still writing the markup: I'm placing the last few ambient hearts at staggered positions, each with its own size, colour, speed and opacity.

Still writing the markup: I'm placing the last few ambient hearts, each with its own size, colour, speed and opacity.

Still writing the ambient hearts: I'm placing the final ones at staggered positions, each with its own size, colour, speed and opacity.

Still writing the markup: I'm placing the last ambient hearts at the bottom of the page, each with its own size, colour and opacity.

Still writing the CSS: I'm checking that the `.p` width defaults to its variable and that the heart particles override it with a larger size.

Still writing the particle styles: I'm checking the margins that centre each particle on its origin point.

Still writing the CSS: I'm checking the margins that centre each particle, and the 1.7em text size is next.

Checking the `.plus` label won't wrap with nowrap, and at 1.7em it comes out around 41px on desktop, which is fine.

Still writing the stylesheet: I'm checking that the keyframe names don't clash with any existing class names.

Now I'm writing out the final answer, starting with the HTML body and the shared heart shape.

I'm weighing whether the button's boing animation ending and the hover transform kicking in could trigger a transition, since I recall animation-driven changes usually don't animate.

Now I'm checking the unlike transition, where the button's shadow eases back to its base state over about 0.4 seconds, and that part looks fine. I'm also deciding whether to add any visible "Liked" text, and I'm leaning toward keeping the count update as the only feedback.

Now I'm writing the sr-only rule so the hidden text stays out of view but is still read by screen readers, and I'm checking that it doesn't affect the layout.

Now I'm finishing the final answer, placing the remaining markup, and making sure the screen-reader-only text stays hidden without affecting the layout.

Now I'm wrapping up the last bits of the layout: the stage and wrapper stay within the viewport width, and the small screen-reader-only label stays hidden without shifting anything.

Still writing the stylesheet: I'm making sure the overflow clipping on the stage holds, so the oversized glow stays contained without causing any scrolling.

Still writing the stylesheet: I'm making sure the overflow clipping on the stage holds, since the glow sits inside the wrapper and gets clipped by the stage.

Still writing the stylesheet: I'm making sure the card's quake transform stays inside the stage, and that the background hearts sit outside the clipping so they aren't cut off.

Still writing the stylesheet: I'm finishing the sr-only rule so the hidden label stays out of view without shifting anything.

Still writing the keyframes: I'm checking the plus label's translate offsets so it rises cleanly from the button.

Wrapping up the final file now, so the closing rules and the markup order are settled before I write it out.