GLM 5.3 Flash

I need to create a pure CSS "like" button with a crazy animation when clicked, no JavaScript allowed. The demo should be self-contained, look good on first paint, and adapt from 1280px down to 375px.

Let me think about what makes a crazy like button animation in pure CSS:
1. The heart itself should burst/explode
2. Particles flying out (CSS-only particles using pseudo-elements or multiple spans)
3. Ring/ripple effects
4. Color transitions
5. Maybe shake/bounce effects
6. Counter increment (can do with checkbox hack + CSS counters!)

Pure CSS tricks I can use:
- `:checked` on a hidden checkbox to toggle state
- CSS counters to display an incrementing number
- `@keyframes` animations triggered by `:checked`
- Multiple particle elements animated with different delays/directions via `--i` custom property... wait, custom properties set inline via style attribute are fine (that's HTML, not JS).

Actually, using inline `style="--i: 1"` on spans is pure CSS/HTML, no JS. That's fine.

Let me design:

**Structure:**
```html
<input type="checkbox" id="like">
<label for="like" class="like-btn">
  <div class="heart">...</div>
  <span class="count"></span>
  <div class="particles">
    <span style="--a:0deg"></span>
    ... multiple spans at different angles
  </div>
  <div class="ring"></div>
</label>
```

**Counter trick:**
```css
body { counter-reset: likes 12846; }
#like:checked ~ ... { counter-increment: likes; }
.count::after { content: counter(likes); }
```

Wait, counter-increment on checked state — the counter needs to be visible in a pseudo-element that's a descendant or sibling. Counter scope: counters are scoped to elements. If I increment on the label or on body when checked... Let me think.

`#like:checked` — I can do `#like:checked ~ .wrap { counter-increment: likes; }` if the wrapper is a sibling. Then `.count::after { content: counter(likes); }` inside the wrapper. Actually counter-increment on an ancestor of the counter() usage works if the counter() usage is in a descendant's pseudo-element. Yes, counter scope flows down the tree.

Actually simpler: put counter-reset on a container, increment on the label when checked:

```css
.stage { counter-reset: likes 12846; }
#like:checked + .stage .like-btn { counter-increment: likes; }
```

Hmm, but the counter needs to display. counter() in ::after of a descendant of the element with counter-increment works. So:

```css
.card { counter-reset: likes 12846; }
#like:checked ~ .card { counter-increment: likes; }
.likes::after { content: counter(likes); }
```

Wait, the label is inside .card, so incrementing on... Let me structure:

```html
<div class="stage">
  <input type="checkbox" id="like">
  <div class="scene">
    <label for="like" class="btn">
      ...heart, particles...
      <span class="num"></span>
    </label>
  </div>
</div>
```

CSS:
```css
.scene { counter-reset: likes 12846; }
#like:checked ~ .scene { counter-increment: likes; }
.num::after { content: counter(likes); }
```

That works: when unchecked, counter shows 12846; checked, 12847.

**Crazy animation ideas:**

1. **Heart burst**: heart scales up hugely, splits or explodes with particles
2. **Particles**: 12-16 small shapes (hearts, dots, sparkles) flying outward in all directions, rotating, fading
3. **Shockwave rings**: 2-3 expanding circles
4. **Screen shake**: the whole card shakes
5. **Flash**: background flash
6. **Confetti-ish pieces falling**
7. **Heart color transition** from gray to red with a pop
8. Maybe the number counts up with a flip/bounce

Also on uncheck, maybe a smaller reverse animation? Keep it simple: uncheck just deflates heart back.

Let me make the particles: I'll use 12 particles, each a span with `--a` (angle) custom property inline. Animate with transform: rotate(var(--a)) translateY(-distance) with distance growing, scale down, fade out. Each can have different colors and shapes (some circles, some small hearts via pseudo-element content "♥" or clip-path).

Small hearts: I can make tiny hearts with a span containing "❤" text or use the classic CSS heart (two circles + rotated square). For particles, easiest: use emoji-free glyphs like ♥ ★ ● ✦ with text. Using unicode characters is fine.

Actually for the main heart, the classic CSS heart:

```css
.heart { 
  width: 60px; height: 60px; 
  background: #ff4d6d; 
  transform: rotate(-45deg);
}
.heart::before, .heart::after { 
  content: ''; width: 60px; height: 60px; border-radius: 50%; 
  background: #ff4d6d; position: absolute; 
}
.heart::before { top: -30px; left: 0; }
.heart::after { top: 0; left: 30px; }
```

Or use clip-path heart? clip-path with a path() for a heart shape — path() works in Chrome. Actually simpler: use an SVG-less CSS heart with the classic method, or use a heart via clip-path polygon approximation. The classic two-circle + square method is reliable.

Alternatively use unicode "♥" as text with big font — very reliable and easy to animate. But CSS-pure heart looks more crafted. Let me do the CSS heart (square rotated 45deg + two circles).

For the "crazy" effect on click (`:checked`):
- Heart: keyframe pop — scale 1 → 1.4 → 0.9 → 1.15 → 1, with color flash white→red
- Burst particles fly out
- Rings expand
- Card does a wobble/shake
- Number bumps

Also add a subtle idle state: heart is gray outline-ish (gray fill), when checked becomes red.

Let me also add a floating ambient background — subtle gradient, maybe some floating hearts in the background drifting up for ambience. That makes first paint look alive. CSS-only animated background hearts (a few absolutely positioned spans with float animations, paused... they can just loop always).

Layout: centered card with the button, title text "Pure CSS — no JavaScript", hint "Click the button". Nice typography. Since no external fonts allowed... wait, "No external files, images, fonts or network requests, except CDN URLs explicitly allowed by the task." No CDN mentioned in task, so no Google Fonts. Use system fonts with nice stack. I can still make it look good with system fonts — use a rounded stack like "ui-rounded, 'SF Pro Rounded', system-ui".

Let me write the full code.

Design direction: dark page, big glowing card, playful. The button is a pill with heart + "Like" text + count. On click: explosion.

Particle spans — I'll generate 14 particles. Each inline style sets `--a: Xdeg`, maybe `--d` for distance and `--c` color and `--s` size. Use nth-child for variation too. Inline style attributes are fine.

Particle animation:
```css
#like:checked ~ .scene .particle {
  animation: fly .9s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fly {
  0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(1) rotate(160deg)?; opacity: 0; }
}
```

Hmm rotate on the span then translateX moves it outward along the angle. Add inner rotation for shapes. Fine.

Particles content: mix of "♥", "✦", "●", "✧" via ::after content set per nth-child, with colors.

Rings: two absolutely positioned circles on the button that scale from 0.5 to 3 and fade.

Shockwave on card: keyframes shake with small rotations/translates.

Also a "burst" flash: a radial white circle that flashes.

Uncheck behavior: when unchecked, particles should hide (opacity 0, no animation or animation removed). When re-checked, animation restarts because the animation property is newly applied (selector changes) — yes, toggling :checked adds/removes animation, restarting it. 

Also add small hearts that float up from the button after like (persistent while checked? or just once). Could add 5 mini hearts rising with staggered delays when checked — nice touch. Animation with delay, forwards, opacity 0 at end. When unchecked they reset.

Also the count number: when checked, do a bump animation (scale up, roll). Use keyframe on .num::after? Animating pseudo-element content change... can't animate counter easily, but the bump is fine.

Extra crazy: make the whole page background do a quick flash pulse when checked — animate body background via a fixed overlay div: `#like:checked ~ .flash { animation: flash .5s; }`.

Also confetti? Maybe rotate the button 360? Keep it tasteful-crazy: burst + rings + shake + flash + rising hearts + counter bump + background glow pulse.

Also idle: heart gently beats (pulse animation) always — nice for first paint.

Also maybe the button tilts toward cursor? No JS, can't. Fine.

Add "reset by clicking again" note. Also maybe a second checkbox... keep one.

Let me also add a "like streak" — nah.

Let me write code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Like Button — Pure CSS</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: radial-gradient(...) ...;
    display: grid; place-items: center;
    overflow: hidden;
  }
```

Background: dark navy `#12101c` with radial glows (pink/purple blobs). Add slow-moving glow blobs via pseudo-elements with hue animations.

Structure:

```html
<body>
  <input type="checkbox" id="like">
  <div class="flash"></div>
  <div class="scene">
    <div class="badge">100% CSS · 0% JavaScript</div>
    <h1>Smash the <span class="hl">Like</span> button</h1>
    <p class="sub">Click it. Click it again. Pure CSS chaos.</p>
    <div class="card">
      <label for="like" class="btn">
        <span class="heart"></span>
        <span class="txt">Like</span>
        <span class="num"></span>
        <span class="ring r1"></span>
        <span class="ring r2"></span>
        <i class="p" style="--a:0deg;--d:150px"></i>
        ... 14 particles ...
        <i class="rise" ...> mini rising hearts
      </label>
    </div>
    <p class="hint">Click or press... no wait, it's just a click.</p>
  </div>
</body>
```

Wait — checkbox needs to be a sibling preceding .flash and .scene for `~` selectors. Put input as first child of body.

Note about the counter: increment on `#like:checked ~ .scene`, counter-reset on .scene. But .scene contains the num. However counter-reset on .scene and counter-increment on .scene (same element, when checked) — fine.

Actually careful: `counter-increment` on the element with counter-reset — increments after reset, ok.

The label is inside .scene deep inside; counter() resolves against ancestors — .num::after inside .scene sees counter scoped at .scene. Good.

Heart CSS heart:

```css
.heart {
  position: relative;
  width: 26px; height: 26px;
  display: block;
  transform: rotate(-45deg) scale(1);
  background: #5a5566; /* gray when unliked */
  transition: background .3s;
  margin-right: 2px;
}
.heart::before, .heart::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  border-radius: 50%; background: inherit;
}
.heart::before { left: -13px; } /* wait */
```

Classic: square rotated 45deg, circle on top (top: -13px for size 26 → half), circle on right (right: -13px). With rotate(-45deg) applied to parent, children positioned: ::before { top: -13px; left: 0 } and ::after { top: 0; left: 13px }. Let me verify: square 26×26, rotate -45deg (pointing down). Circle above square: top:-13px,left:0. Circle right of square: top:0,left:13px (left:100%-... i.e., left:13px? width 26 so left:13px overlaps half). Hmm standard:

```css
.heart::before { content:""; position:absolute; top:-13px; left:0; width:26px; height:26px; border-radius:50%; }
.heart::after  { content:""; position:absolute; left:13px; top:0; width:26px; height:26px; border-radius:50%; }
```

Wait that gives circles at top and right; with rotate(-45deg), top goes to upper-left... The classic code:

```css
.heart { transform: rotate(-45deg); }
.heart::before { top: -50%; ... } 
```

Hmm, let me recall the famous CSS heart:

```css
.heart {
  position: relative; width: 100px; height: 100px;
}
.heart::before, .heart::after {
  content: ""; position: absolute; top: 0; width: 50px; height: 80px;
  background: red; border-radius: 50px 50px 0 0;
}
.heart::before { left: 50px; transform: rotate(-45deg); transform-origin: 0 100%; }
.heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
```

That's the two-lobe heart — each lobe is a rectangle with rounded top, rotated ±45° from bottom center. This is a nicer heart shape. Width 100, height 100: lobes 50×80, radius 25 top corners.

Scaled down: heart 44×40? Let's use container 40×36, lobes 20px wide, 32 tall, border-radius 10px 10px 0 0. Hmm, let me use proportions: lobe width = 50, height = 80, radius 25. Scale factor 0.4: 20×32, radius 10. Container width 40, height 32 (lobes at bottom). The point at bottom: lobes' transform-origin at bottom, rotated to meet. Bottom point: with width 100 container and lobes at left:0 and left:50, bottom origin... after rotation the bottom forms a V that meets at center bottom. Actually height of heart = 80*sin45 + something... roughly fine; I'll set container height ~36px and tune visually blind. It's the well-known snippet; trust it.

Alternatively use unicode ♥ with font-size huge — dead simple, always looks like a heart, and I can style it with gradient text. Honestly for reliability, I'll go with the two-lobe CSS heart — it's iconic "pure CSS". But gray fill vs red... both lobes need background change; using `background: inherit` won't work since pseudo inherits from .heart if set — set background on a CSS variable: `background: var(--hc)`. Change `--hc` on :checked. Pseudo-elements inherit custom properties. 

```css
.heart { --hc: #6b6478; }
#like:checked ~ .scene .heart { --hc: #ff3b6b; }
.heart::before, .heart::after { background: var(--hc); }
```

Heart animation when checked: pop keyframes on .heart:
```css
@keyframes pop {
  0% { transform: scale(1); }
  25% { transform: scale(1.6) rotate(-8deg); }
  40% { transform: scale(.75); }
  60% { transform: scale(1.25) rotate(6deg); }
  80% { transform: scale(.95); }
  100% { transform: scale(1); }
}
```
Applied to the .heart wrapper (which holds both lobes). The lobes themselves have transforms on ::before/::after — animating the parent container scale is safe.

Also color flash: add keyframes on filter: brightness? Add `animation: pop .7s, hueflash` — use a separate keyframe animating filter: brightness(1)→(2.2)→1 quickly. Combine: `animation: pop .7s cubic-bezier(...) both, flashc .7s;` Hmm filter on parent affects children, good.

Particles: 14 `<i class="p" style="--a:25.7deg; --d:140px; --s:1.2; --c:#ffd166"></i>`. Content via nth-child:

Actually simpler: each particle gets `data` no—no JS; just use ::after content per nth-child or just give each a text char inline? Text inside the <i> element is HTML, fine: `<i class="p" style="--a:0deg">♥</i>`. That's not JS. Easier and readable. I'll vary chars: ♥ ✦ ★ ● ✧ ♡.

Particle styles:
```css
.p {
  position: absolute; left: 50%; top: 50%;
  font-size: calc(14px * var(--s,1));
  color: var(--c, #ffb3c6);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(6px) scale(.3);
  z-index: 5;
}
#like:checked ~ .scene .p {
  animation: fly .9s cubic-bezier(.15,.85,.3,1) forwards;
  animation-delay: calc(var(--dl, 0) * 1ms); /* optional stagger */
}
@keyframes fly {
  0% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--a)) translateX(8px) scale(.2) rotate(0deg); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(var(--s,1)) rotate(220deg); }
}
```

Hmm combining rotate for direction and spin: rotate(var(--a)) then translateX then scale then additional rotate spins around own axis? rotate after translate rotates around the translated origin (the element's own position) — yes, subsequent rotate in the same transform list rotates about the element's transform-origin which has been moved by translation. Actually transform functions compose; a later rotate() rotates around the origin established... The transform-origin applies to whole transform, but functionally rotate after translate = spinning the element in place after moving. Yes, `translate(x) rotate(a)` spins in place at the translated location. Good.

Set random-ish distances: some 110px, some 160px, etc. I'll assign inline values.

Rings:
```css
.ring {
  position: absolute; inset: 0; margin: auto;
  width: 40px; height: 40px; /* actually set explicit */
  border-radius: 50%;
  border: 3px solid rgba(255,80,120,.8);
  opacity: 0; pointer-events: none;
}
#like:checked ~ .scene .ring { animation: ring .8s ease-out forwards; }
.r2 { animation-delay: .12s !important? }
```
Handle delays: `#like:checked ~ .scene .r1 { animation: ringout .7s ease-out forwards; }` and `.r2` with delay .1s. But when unchecked, need opacity 0 — set base opacity 0 and animation 'forwards' ends at opacity 0. Good.

Ring needs to be positioned centered on the heart or center of button? Center of button looks fine. Size: start 20px scale to 3.5 with fading border. Use width/height fixed and scale transform.

@keyframes ringout { from { transform: scale(.3); opacity: .9; } to { transform: scale(4); opacity: 0; } }

Flash overlay:
```css
.flash { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255,90,130,.35), transparent 60%); }
#like:checked ~ .flash { animation: flash .6s ease-out; }
@keyframes flash { 0%{opacity:0} 15%{opacity:1} 100%{opacity:0} }
```
z-index above card? Put flash z-index 5, scene z-index 2 — flash on top with pointer-events none. Fine.

Card shake:
```css
#like:checked ~ .scene .card { animation: shake .6s; }
@keyframes shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-6px,3px) rotate(-1.5deg); }
  40% { transform: translate(5px,-4px) rotate(1.2deg); }
  60% { transform: translate(-4px,2px) rotate(-.8deg); }
  80% { transform: translate(3px,-2px) rotate(.5deg); }
}
```

Counter bump:
```css
#like:checked ~ .scene .num { animation: bump .5s; }
```
Num shows counter(likes). Also on checked, color it pink.

Rising mini hearts while checked:
5 `<b class="rise" style="--x:-18px;--t:0ms">♥</b>` positioned near button top; when checked, animate rise 1.6s infinite? Infinite rising hearts while liked is cute — "loves floating up". Let's do infinite with staggered negative delays so they're mid-flight at various points. But screenshot at 3s: if user hasn't clicked, no hearts visible — that's fine, ambient background hearts handle liveliness.

Hmm wait — the screenshot at ~3s after load happens without interaction. The demo must look interesting on first paint. So I need ambient animation before click: floating background hearts, gently beating heart, glowing blobs, maybe a subtle "auto-demo"? The task said games need self-playing demo; this isn't a game, just a button. But to make first paint interesting, I'll add:

- Ambient floating hearts in background (drifting up, twinkling)
- Heart gently beating
- A little "bounce" hint arrow/label "click me!" pulsing

Also — could add a CSS-only auto-demo? Without JS, can't toggle the checkbox automatically... Actually there's a trick: `animation` on checkbox? No. Could use `:hover`... can't simulate click. But! I could make a looping "preview" burst using a separate animation on particles that runs once on page load (a welcome burst!). Yes — on page load, play the burst once automatically (animation with delay 1s on .p by default, then when checked re-apply). Hmm but then animation applied at load and on checked — toggling checked re-applies same animation, restarting. Base state: `.p { animation: fly .9s 1.2s both; }` — plays once at load. When checked, selector `#like:checked ~ .scene .p` sets animation again with same name — does re-declaring the same animation restart it? The animation-name is the same but the animation was still applied (in fill forwards state)... If the base rule keeps `animation: fly ...` and the checked rule sets identical animation, no restart. To force restart on check, checked rule should use a different name: `flyB` (duplicate keyframes). Then at load: plays fly (welcome burst), and on check: animation switches to flyB which restarts. When unchecked, animation goes back to `fly` — which restarts the welcome burst again! Hmm, that means every uncheck replays the burst — actually that's fun: unclick also bursts? Could style uncheck burst differently (blue/gray "unlike" burst). Cute: like = red hearts burst, unlike = gray/sad burst. But complexity...

Alternative: on uncheck, no particles (they return to opacity 0 base). But base has load animation... I can scope the load animation with a one-time... CSS can't do "once". Option: wrap the auto-burst differently — give particles a `burst-once` animation on .p base with `forwards` ending at opacity 0, and on uncheck the selector `#like:not(:checked) ~ .scene .p`... same problem.

Simplest: accept that uncheck also triggers a burst but make uncheck burst gray/blue "unlike" style with different keyframes:

```css
.p { animation: flyA .9s 1s cubic-bezier(.15,.85,.3,1) both; } /* load burst */
#like:checked ~ .scene .p { animation: flyB .9s cubic-bezier(.15,.85,.3,1) both; color: var(--c); }
#like:not(:checked) ~ .scene .p { animation: flyC .9s cubic-bezier(.15,.85,.3,1) both; }
```

Wait but base `.p` rule with flyA applies whenever not overridden... When unchecked, both base and :not(:checked) rules apply; :not(:checked) one is later/more specific — flyC wins. At load (unchecked), flyC plays instead of flyA — that's the "welcome burst" but with uncheck styling? I want the load burst to be colorful. Hmm.

Let me restructure: 
- Base .p: opacity 0 (no animation) — but then no load burst.

Do I really need a load burst? The screenshot at 3s — a burst lasting 0.9s starting at 1s would be over by 3s... unless it loops! I could have an ambient idle shimmer instead. OR: make the welcome burst delayed 1.2s and give particles infinite? No.

Alternative idea: auto-replay via animation on the whole scene? Can't toggle checkbox.

Better idea for liveliness at first paint: make the burst particles ALSO serve as ambient "sparkles" — a gentle looping twinkle (small opacity/scale pulse in place) at base state, then burst on checked. And on unchecked after a like, they do the gray burst (flyC). Base: `animation: twinkle 3s ease-in-out infinite` with per-particle delay via --dl. At 3s screenshot, sparkles twinkling around button = alive. 

So:
```css
.p { opacity: 0; animation: twinkle 2.8s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes twinkle { 0%,100% { opacity: 0; transform: ... scale(.3);} 50% { opacity: .9; transform: ... scale(1);} }
```
Hmm, twinkle in place around the button, subtle. And bursts override. Also on uncheck flyC (gray burst). But wait: when unchecked after having been checked, base twinkle also applies... `#like:not(:checked)` rule with flyC — specificity: `#like:not(:checked) ~ .scene .p` (id + pseudo-class...) vs `.p` — the former wins regardless of order? Specificity: #like:not(:checked) = 1 id + 1 pseudo-class(counts) + class .scene + class .p → (1,3,0)... wait :not(:checked) — the argument counts: (1 id, 2 classes: :checked and .p... plus .scene) → 1-3-0 vs 0-1-0. Wins. But animation-delay from base var(--dl) — I set delays inside each rule. OK.

Problem: after uncheck burst (flyC) completes with `both` fill → stays at opacity 0 (flyC ends at opacity 0). Then twinkle never resumes because flyC rule still matches forever (unchecked). Hmm — that kills ambient twinkle after first uncheck. Use `forwards`... same. Use no fill and end keyframe at opacity 0 — after animation ends, element returns to base style (twinkle animation, opacity from base rule 0 + twinkling). Wait if base has `animation: twinkle ...` and checked/:not-checked rules override animation — when :not(:checked) applies flyC, then... it always applies when unchecked, so twinkle never runs when unchecked, even before any interaction. Hmm.

Fix: make the :not(:checked) burst only happen via a different mechanism... CSS can't do state transitions memory easily.

Alternative: skip uncheck burst entirely. Accept: check → red burst (restartable each check since animation toggles between twinkle and flyB — toggling animation-name restarts, good). Uncheck → back to twinkle. And to have a "welcome" burst at load... 

What about doing the welcome burst with a delay on the flyB... no.

OK here's another approach: the load burst can just be the twinkle being dramatic initially? Or: I can give the scene an entrance animation where everything pops in staggered (card drops in, title fades up, sparkles burst outward once via a wrapper animation with scale). Honestly, ambient twinkle + floating background hearts + beating heart is plenty alive for first paint. Plus maybe the button itself gently floats/pulses with a "click me" wiggle.

Decision:
- Base particles: gentle twinkle loop (staggered) — visible at 3s ✓.
- Checked: burst flyB (colorful), rings, shake, pop, flash, bump, rising hearts loop.
- Unchecked: back to twinkle.

One more consideration: when checked, twinkle replaced by burst; particles end at opacity 0 (forwards). Then when unchecked, twinkle restarts. Good.

Rising hearts while checked: `#like:checked ~ .scene .rise { animation: rise 1.8s linear infinite; animation-delay: var(--rd); }` with negative delays for immediate spread: use --rd values like -0.3s, -0.9s... negative delays start mid-cycle — good so they appear right away when checked.

@keyframes rise: from bottom of button, translateY(-80px), scale, fade in/out, slight sway via translateX in keyframes? Use rotate sway. Fine.

Background ambient hearts: absolutely positioned ♥ characters with slow float-up loop, low opacity, various sizes, colors pinkish. 8 of them. Also two blurred glow blobs with hue-rotate animation.

Typography: Title "Smash the Like button", badge "Pure CSS · Zero JavaScript", hint text "Toggle it as many times as you dare — no JS was harmed."

Also add a fun detail: when checked, the card's border glows and the button gets a rainbow animated gradient border. And the "Like" text changes to "Liked!" via CSS content swap: have two spans, toggle display. 

```css
.txt-liked { display: none; }
#like:checked ~ .scene .txt-liked { display: inline; }
#like:checked ~ .scene .txt-normal { display: none; }
```

Count color change too.

Also maybe add keyboard accessibility: label responds to space/enter when focused — fine natively.

Button focus style: `#like:focus-visible ~ .scene .btn { outline: ... }`.

Now particle inline styles. 14 particles with angles roughly evenly distributed with jitter, distances 90–170px, colors: #ff5c8a, #ffd166, #6ee7ff, #b388ff, #7dffa8, #fff. Chars: ♥ ♥ ✦ ★ ● ✧ ♡ ✦ ♥ ★ ✧ ● ♥ ✦. Sizes --s .8–1.6.

Position particles relative to the heart (center on heart). The heart is at left side of button; particles absolute positioned at heart center: place them inside a `.burst` container positioned over the heart. Let me structure:

```html
<label for="like" class="btn">
  <span class="heart-wrap">
    <span class="heart"></span>
    <i class="p" ...>♥</i> ×14
    <b class="rise" ...>♥</b> ×5
  </span>
  <span class="label-txt"><span class="tn">Like</span><span class="tl">Liked!</span></span>
  <span class="num"></span>
  <span class="ring r1"></span>
  <span class="ring r2"></span>
</label>
```

heart-wrap: position relative, width 46px height 40px, contains heart centered; particles absolute at center.

Rings centered on heart-wrap too? Ring around heart looks good. Put rings inside heart-wrap, centered: left 50% top 50%, translate(-50%,-50%) then scale — combine: `transform: translate(-50%,-50%) scale(x)`. Keyframes must include translate. OK.

Overflow: particles fly beyond button — button needs overflow visible (default) and card too. Body overflow hidden might clip on small screens; particles fly ~170px — fine within page.

Card shake transform conflicts with card hover? fine.

Let me also add a "combo" nicety: track like state visually on the page background (checked → page glow pinker): `#like:checked ~ .glowA { ... }` — glows are siblings. I'll place glow divs as siblings after input. Give them transition of opacity/color when checked. Nice: when liked, background warms up pink; unliked, cool blue/purple. 

Layout details:
- body grid center, padding for small screens.
- .scene max-width 640px, text-align center.
- Card: inline-block, padding, glassy background rgba(255,255,255,.06), border 1px rgba(255,255,255,.12), border-radius 24px, backdrop-filter blur (works in sandbox fine), shadow.
- Button: display inline-flex, gap 14px, padding 16px 34px 16px 24px, border-radius 999px, background gradient white-ish, shadow, cursor pointer, user-select none, transition transform .15s; hover scale 1.05; active scale .96.

Button background: light (#fff → #ffeef2)? On dark bg, a white pill button with red heart looks classy. Let's do gradient #fff, #ffe9ef; text dark #2a2136.

Heart inside button colored gray initially? Gray heart on white pill — maybe start heart already pinkish-gray then red. I'll do: unliked heart color #c9c4d4 (muted), liked #ff3b6b with glow drop-shadow.

The num counter: separate small pill showing count, like "12,847". counter content with thousand separator — counters can't format commas. Use a smaller number: 12847 → shows "12847". I could fake with counter styling... simplest: reset to 999 so checked shows "1000"? "999 → 1000" is satisfying! counter-reset: likes 999. Displays 999, click → 1000. Cute. Or start 12846 — no comma looks off. Let me use 999→1000, and label the pill "likes". Actually to feel more "real", maybe 999 is fine ("999" is a classic milestone). Good.

Also add secondary stat row? Keep focused.

Focus & click hint: "Click the button (or Tab + Space)". 

Also the "crazy" factor — let me add one more over-the-top element: a full-screen expanding ring from the button on like? The flash covers it. Plus emoji rain? Maybe a burst of big confetti rectangles: add 8 more particle-like rectangles (class p2) that fly with rotation — rectangles with width 8 height 14, colored, spinning. I can just make some of the 14 particles shaped as rectangles instead of chars: give class p rect variant: some particles have no text but styled box. Let me add a separate set: 10 confetti pieces `<u class="c" style="--a:...;--d:...">`. `<u>` styled as small rect with color var. fly animation same keyframes (reuse flyB? animation names are global — reuse). Confetti spinning: rotate extra. Use same keyframe fly with rotate(...deg) built in — chars also spin, fine.

Total: 12 chars + 10 confetti = 22 burst elements. OK.

Also, add scale to fly end so confetti stays visible size.

Let me now also handle the "pop" of heart-wrap including particles origin — particles are children of heart-wrap which scales with pop? Pop animation is on .heart only (inner), so particles not affected. Put pop on `.heart` (the container of lobes). .heart is position relative container with ::before/::after lobes. Pop animates .heart transform scale — but .heart base transform? The two-lobe heart doesn't need rotate on container. Good, .heart has no base transform; lobes have their own. So pop keyframes on .heart: scale/rotate freely. But rotation of container rotates both lobes together — fine, looks like heart tilting.

Idle beat: `#like:not(:checked) ~ .scene .heart { animation: beat 1.6s ease-in-out infinite; }` and checked → pop. Beat: scale 1→1.12→1.

Now write everything concretely.

Colors:
- bg: #0e0b16 base; radial glows: pink #ff3b6b at 20% opacity, purple #7c4dff, blue.
- text: #f4f1fa, sub #9b93b3.

Glow blobs as body::before/::after? They need :checked sibling selectors — pseudo-elements of body can be selected via `body:has()`? :has is supported in Chrome! I can use `body:has(#like:checked)` to style anything — that unlocks easy styling anywhere. Chrome supports :has since 105. Latest Chrome — fine. But also the sibling approach works; I'll use sibling selectors where convenient and :has for body background shift:

```css
body { transition: background 0.6s; }
body:has(#like:checked) { ... }
```
body background is gradient — transition on background-image doesn't animate, but I can layer: body has base gradient; an overlay div .tint with opacity transition when checked. Use `.tint` fixed overlay pink glow, opacity 0 → .5 when checked via `#like:checked ~ .tint`. Simple.

Structure order in body:
```html
<input type="checkbox" id="like">
<div class="tint"></div>
<div class="flash"></div>
<div class="bg-hearts">...spans...</div>
<main class="scene">...</main>
```
All siblings — good. input hidden: position absolute, opacity 0, but keep focusable: width/height 1px? Use clip pattern: `.vhidden { position:absolute; opacity:0; pointer-events:none; }` — pointer-events none but checkbox doesn't need clicks, label handles. Focus: when focused via keyboard, need visible indicator → `#like:focus-visible ~ .scene .btn { box-shadow: 0 0 0 3px #6ee7ff; }`.

bg-hearts: 7 spans, each with inline --x (left %), --t (duration), --dl (delay), --s (size), content ♥. 

```css
.bg-hearts span {
  position: absolute; bottom: -60px; left: var(--x);
  font-size: calc(var(--s) * 1px); color: rgba(255,110,150,.25);
  animation: drift var(--t) linear infinite; animation-delay: var(--dl);
}
@keyframes drift {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: .5; }
  90% { opacity: .3; }
  100% { transform: translateY(-110vh) rotate(40deg); opacity: 0; }
}
```

Give them negative delays so they're spread across screen at load. ✓ visible at first paint.

Now the scene entrance animation: `animation: arrive .8s ease-out both` on scene children with staggered delays — fade up. Good for first paint polish.

Let me write the final code carefully.

Particles list (12 glyph + 10 confetti). Angles: 0, 28, 55, 85, 112, 140, 168, 196, 224, 252, 280, 308, 336 — that's 13; do 12: 0,30,60,...330 with jitter. I'll write them manually:

glyphs (12):
1. --a:-8deg --d:150px --s:1.3 --c:#ff5c8a ♥ --dl:-.4s
2. --a:22deg --d:120px --s:1 --c:#ffd166 ✦ --dl:-1.2s
3. --a:48deg --d:165px --s:1.5 --c:#6ee7ff ● --dl:-2s
4. --a:75deg --d:110px --s:.9 --c:#b388ff ✧ --dl:-.8s
5. --a:100deg --d:155px --s:1.2 --c:#7dffa8 ♥ --dl:-1.6s
6. --a:128deg --d:125px --s:1 --c:#ff9d5c ★ --dl:-.2s
7. --a:155deg --d:170px --s:1.4 --c:#ff5c8a ♡ --dl:-2.4s
8. --a:182deg --d:115px --s:.9 --c:#6ee7ff ✦ --dl:-1s
9. --a:210deg --d:150px --s:1.2 --c:#ffd166 ♥ --dl:-1.9s
10. --a:238deg --d:130px --s:1 --c:#b388ff ● --dl:-.6s
11. --a:266deg --d:160px --s:1.4 --c:#7dffa8 ✧ --dl:-1.4s
12. --a:295deg --d:120px --s:1 --c:#ff5c8a ★ --dl:-2.2s
13. --a:322deg --d:145px --s:1.2 --c:#fff ♡ --dl:-.9s

That's 13, fine.

confetti (10) as <u class="c">:
angles 10,45,90,135,175,205,250,285,315,345 with distances 130–180, colors varied, sizes via --w/--h maybe fixed. Use transform in fly with rotate spin — same keyframe works; give them base width 7px height 12px border-radius 2px background var(--c). In keyframe fly, scale applies; they have no font-size. Also base transform includes translate(-50%,-50%) — same as glyphs.

Keyframe fly (shared):

```css
@keyframes fly {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(6px) scale(.2) rotate(0turn); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(1) rotate(1turn); }
}
```

Hmm — final rotate(1turn) with intermediate: rotation interpolates 0→1turn monotonic spin. Good.

Twinkle keyframe:
```css
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(30px) scale(.3); }
  50% { opacity: .8; transform: translate(-50%,-50%) rotate(var(--a)) translateX(38px) scale(1); }
}
```
Place them slightly out from heart (30px) twinkling like sparkles around heart. But translateX(30) at their angle means they form a ring around heart — sparkles arranged in a circle pulsing. Cute! But glyphs at angles cover full circle around heart — some overlap the button text (angles pointing right across the label text, e.g., 0deg points right into "Like" text area). Heart is at left of button; ring radius 30px around heart center — heart-wrap is ~46px wide, so sparkle at 30px right of heart center lands near text start. Slight overlap ok, opacity low, z-index behind text? Give .p z-index 0 and text z-index 1. Actually during burst they fly over — overlap fine, it's chaotic anyway.

Rising hearts:
```css
.rise { position:absolute; left:50%; bottom: 40%?; }
```
Position: start near heart top. `left: 55%; top: 20%;` animate translateY(-70px) drift x. Keyframes rise:
```css
@keyframes rise {
  0% { opacity: 0; transform: translate(0,0) scale(.5) rotate(-10deg); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--sw,10px), -80px) scale(1.1) rotate(14deg); }
}
```
infinite 1.8s, delays negative varied.

Number pill: `.num::after { content: counter(likes); }` with counter-reset 999 on .scene... wait — if counter-reset is on .scene, and increment on `#like:checked ~ .scene`. Both on same element. `counter-reset: likes 999;` then when checked also `counter-increment: likes;` → 1000. Good.

Also add small "you liked this" state text under card? The button text changes to "Liked!" — enough.

Card content maybe also an avatar-ish circle? Keep minimal: just the button centered in card, plus small text "999 people liked this" — hmm the counter already in button. Put counter as separate pill next to button inside card? Design: card contains: heart-button pill (heart + "Like"/"Liked!") and beside it a count chip. Row layout, wraps on mobile.

Card:
```html
<div class="card">
  <label ...>...</label>
  <div class="chip"><span class="num"></span> likes</div>
</div>
```

Bump chip on checked.

Also add secondary "crazy" thing: when liked, the title text changes? e.g., h1 swap "Smash it" → "TOLD YOU. PURE CSS." — fun. Two spans toggle. Cute personality. Title default: "One button. Zero JavaScript." When liked: "BOOM. Still no JavaScript." That reinforces the joke on state change. I'll add both spans in h1.

Wait, but the badge already says pure CSS. Title: default "Go on. Smash it." liked: "SEE? NO JAVASCRIPT." Good.

Now sizes/responsive: scene padding 24px; card row gap 14; on ≤480px, column layout? Button + chip row fits 375px (button ~190px + chip ~110px = 300) fine.

Flash overlay z-index: place after scene in DOM? .flash is before scene; z-index: flash 50, scene 1. Fixed overlay pointer-events none.

Tint overlay: `.tint { position: fixed; inset:0; background: radial-gradient(circle at 50% 60%, rgba(255,60,110,.28), transparent 65%); opacity: 0; transition: opacity .5s; pointer-events:none; z-index: 0?}` behind scene but above bg. When checked opacity 1. Also add a second tint for uncheck? no.

Also liked state: button gets glow shadow pink. `#like:checked ~ .scene .btn { box-shadow: 0 10px 40px rgba(255,60,110,.45); }`.

Font sizes: h1 clamp(28px, 6vw, 52px), weight 800.

Let me also ensure "no horizontal scrollbar": body overflow-x hidden; particles flying may extend beyond viewport at edges — button centered, 170px particles well within 1280. On 375px, button center at ~187px, particle 170px left → ~17px > 0. OK plus overflow hidden on body handles it. Set `overflow: hidden` on body? Page content is single screen (min-height 100vh grid center); on very short screens content might clip — use `min-height: 100svh` and overflow-x hidden, overflow-y auto.

Now, keyboard: label toggles checkbox on Space/Enter when checkbox focused. Add hint: "Click it — or Tab to it and hit Space." Fine.

Write the code now.

Also entrance animations:

```css
.scene > * { animation: arrive .7s cubic-bezier(.2,.8,.3,1) both; }
.scene > *:nth-child(2) { animation-delay: .08s } ...
```
But careful: elements that also get checked-animations (card shake) — card is .scene > .card wrap? The shake applies to .card; arrive applies to .scene > *; if both animation properties on same element conflict (arrive 'both' keeps final state; checked sets animation: shake — replaces arrive, fine, arrive already completed, and final state = default anyway). But wait: when checked sets `animation: shake .6s` on .card, this overrides arrive — after shake ends, animation property still `shake` (checked still true) with fill default → back to natural style = fine.

However, .scene children include bg-hearts? No, bg-hearts separate sibling.

Elements order in scene: badge, h1, sub, card, hint. Stagger delays via nth-child.

One catch: `arrive` with `both` fill on .card — when :checked triggers shake, animation-name changes → shake runs; on uncheck, arrive re-applies and REPLAYS the entrance! Card would re-drop-in every uncheck. Hmm. Fix: arrive fill mode `backwards`? With delay and backwards, element shows from-style during delay then animates once; after completion, re-applying animation restarts it. Same replay issue regardless of fill.

Options: apply arrive to inner wrappers distinct from animated elements. E.g., wrap card in .card-slot (arrival) and .card inside (shake). Same for h1 title-swap? h1 has no checked animation; title swap is display toggle on child spans — fine. Chip bump is on .chip inside card — but arrival on .card-slot. Button hover transform on .btn inside. Good: separate layers.

Similarly title swap spans don't conflict. The heart pop is inside card — fine.

So structure:

```html
<main class="scene">
  <div class="badge">PURE CSS · 0 LINES OF JAVASCRIPT</div>
  <h1><span class="t1">Go on. Smash it.</span><span class="t2">SEE? No JavaScript.</span></h1>
  <p class="sub">A like button with a pure-CSS meltdown. Toggle it as many times as you dare.</p>
  <div class="slot"><div class="card">...</div></div>
  <p class="hint">Click the button — or Tab to it and press Space. Every effect here is CSS.</p>
</main>
```

h1 spans toggle: `.t2 { display:none } #like:checked ~ .scene .t2 { display:inline } #like:checked ~ .scene .t1 { display:none }`.

Also animate t2 entrance? display swap is instant; give t2 a pop animation when it appears: `#like:checked ~ .scene .t2 { display:inline; animation: pop-in .5s; }` — animation applies when rule matches... display:none→inline, animation starts when displayed. Good.

Also add the count-up nicety: number pill shows counter. When liked, chip border pink.

Let me also add a subtle grid/noise? Skip.

Also focus ring: `#like:focus-visible ~ .scene .btn { outline: 3px solid #6ee7ff; outline-offset: 3px; }`.

Write keyframes list:
- arrive (fade up)
- beat (idle heart)
- pop (heart burst) — name it heartpop
- bright (filter flash) — combine into heartpop via filter? Separate keyframe filterOn: `@keyframes glowf { 0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0)) brightness(1)} 30%{filter:drop-shadow(0 0 18px #ff5c8a) brightness(1.9)} 100%{filter:brightness(1)} }` Apply both animations comma-separated on checked heart.
- fly
- twinkle
- ringout
- shake
- bump
- rise
- drift
- flash
- pop-in (title swap)
- hue-rotate drift for glow blobs (blob animation on body::before/::after ok — no state needed)

Glow blobs: body::before (pink blob top-left) and body::after (purple bottom-right), blurred radial gradients, slow float via transform translate loop, `animation: blobFloat 14s ease-in-out infinite alternate`. No conflict with :checked. But body:has(#like:checked) could boost their opacity — use :has, supported. Or just leave.

Let me be careful with the .heart geometry numbers.

Heart: container `.heart { position:relative; width: 40px; height: 36px; }`, lobes:

```css
.heart::before, .heart::after {
  content: ""; position: absolute; top: 0;
  width: 20px; height: 32px;
  background: var(--hc);
  border-radius: 10px 10px 0 0;
}
.heart::before { left: 20px; transform: rotate(-45deg); transform-origin: 0 100%; }
.heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
```

Check: lobe width 20, height 32, origin bottom-left for ::before at left:20 (right half). Rotating -45deg around bottom-left corner (0,100%) — the lobe swings up-right... Standard snippet with width 100: lobes 50 wide at left:50 and left:0, origins (0 100%) and (100% 100%). Scale by 0.4: container 40 wide, lobes 20×32, radius 10. Height of heart ≈ 32·cos45 + 20·sin45? The bottom point: each lobe's bottom edge rotated; the tip at bottom center. Total visual height ~ 32·0.707 + 20·0.707 ≈ 36. Container height 36 works with lobes top:0... but rotated lobes rise above? The top corners: lobe top at origin distance: top edge is 32 above origin (bottom). After rotating 45°, topmost point ≈ height... roughly fits 36–40px. I'll set container height 38px and overflow visible anyway; minor overflow fine.

Hmm actually let me reconsider: the famous snippet:

```css
.heart { width: 100px; height: 100px; position: relative; }
.heart:before, .heart:after { content:""; position:absolute; top:0; width:52px; height:80px; border-radius:50px 50px 0 0; background:red; }
.heart:before { left:50px; transform:rotate(-45deg); transform-origin:0 100%; }
.heart:after { left:0; transform:rotate(45deg); transform-origin:100% 100%; }
```

In that snippet the heart occupies roughly bottom portion; there's dead space at top. Container 100×100 with heart drawn in lower ~80×60. Whatever — I'll center with flex and eyeball proportions. With 0.42 scale: lobes 22×34, radius 11, container 44×44, and the visual heart sits lower — I'll offset lobes top: 6px to center visually. Let me instead use top: 4px on lobes. Fine-tune: container 44w × 42h, lobes top:2px. The heart's visual center ~ middle. Eh — good enough; small imperfections invisible at this size.

Actually, simpler robust alternative: single-element heart using clip-path with path():

```css
.heart {
  width: 40px; height: 36px;
  background: var(--hc);
  clip-path: path("M20 36 C20 36 0 24 0 11 C0 4 5 0 11 0 C15 0 19 2 20 6 C21 2 25 0 29 0 C35 0 40 4 40 11 C40 24 20 36 20 36 Z");
}
```

clip-path: path() is supported in Chrome. This gives a clean heart, one element, easy to animate/glow. Let me craft a decent heart path. Standard heart path (like Font Awesome scaled to 40×36 viewBox 0 0 32 29-ish). Let me construct: viewBox 0 0 32 30:

M16 29 C16 29 0 19 0 8.5 C0 3.8 3.8 0 8.5 0 C11.6 0 14.4 1.7 16 4.2 C17.6 1.7 20.4 0 23.5 0 C28.2 0 32 3.8 32 8.5 C32 19 16 29 16 29 Z

Scale to 40×36: multiply by 1.25/1.2. Easier: set element 32×30 and scale via font... just use width:32px height:30px and scale with transform where needed, or width 40 with path coordinates in 32-space doesn't scale — path() uses px relative to element? The path coordinates are in the element's coordinate system (px). If element is 40px wide but path drawn for 32, it'll be offset. Keep element exactly 32×30 and scale up via transform scale(1.3) if needed. Heart size ~34px visual in a 46px button — fine. Actually make base 36×33.75? Keep 32×30, and in heart-wrap use transform scale... but pop animation overrides transform. Wrap heart in another span for scaling. Meh — just use heart at 32×30 as-is; with pop scaling up to 1.6 → 51px, good presence. Or define path in 40-space directly:

M20 36.6 → let me just scale numbers ×1.25: 
M20 36.25 C20 36.25 0 23.75 0 10.6 C0 4.75 4.75 0 10.6 0 C14.5 0 18 2.1 20 5.25 C22 2.1 25.5 0 29.4 0 C35.25 0 40 4.75 40 10.6 C40 23.75 20 36.25 20 36.25 Z

Element 40×37. Good, clean numbers. I'll use this clip-path heart. It also allows gradient background: `background: linear-gradient(180deg, #ff7aa2, #ff2d63)` when liked, gray gradient when not. And box-shadow drop-shadow glow via filter on wrapper.

Unliked color: #b9b3c7. Liked: gradient. Transition background works with gradients? Transitions between gradients don't interpolate (background-image not animatable) — instant swap, acceptable (pop animation covers it). Could crossfade via ::after overlay... skip, instant is fine with pop.

Heart drop-shadow glow when liked: `filter: drop-shadow(0 4px 14px rgba(255,60,110,.6))` persistent, plus glowf animation flash.

Now write it all. Also `prefers-reduced-motion` consideration — nice but optional; add media query to tone down? I'll add a simple one disabling infinite ambient animations. Quick add.

Chip: `border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #cfc7e2; border-radius: 999px; padding: 14px 22px; font-weight: 700; font-size: 18px;` with num strong colored.

Let me now also double-check the counter increment quirk: `counter-increment: likes` on .scene — but .scene also has counter-reset. Both fine. Note: `counter-reset` on .scene and increment also on .scene: per spec, on the same element, reset happens then increment → value 1000. Good. `.num::after { content: counter(likes); }`.

But careful: counter-increment with value 0 doesn't create... we increment by 1. And when unchecked, increment rule doesn't apply → 999. 

Also — pseudo-element on .num (span): `.num::after{content:counter(likes)}` — counter scope: .num is descendant of .scene → sees the counter. ✓.

Also, `counter-increment` hidden gotcha: if any element between... fine.

Write final HTML now.

Particles inside .heart-wrap which is inside .btn (label). heart-wrap: `position: relative; width: 40px; height: 37px; display: grid; place-items: center;` and heart is child. Particles absolute at left:50%/top:50%.

Ring center: on heart center: `.ring { position:absolute; left:50%; top:50%; width: 46px; height:46px; margin: -23px 0 0 -23px; border-radius:50%; border:3px solid; }` animate scale+fade. Colors: r1 rgba(255,120,160,.9), r2 rgba(255,255,255,.7) thinner.

Rise hearts start: left: 50%, top: -6px within heart-wrap.

z-index: heart z 2; particles z 3 (above button bg, may overlap text — ok).

Button hover: translateY(-2px) scale(1.04); active scale(.94). Transition .18s.

Title glow when checked: `#like:checked ~ .scene h1 { text-shadow: ... }` maybe color shift: h1 has gradient text? Use background-clip text gradient pink→purple always. 

Let me write it.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Like Button — Pure CSS</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100%; }
body {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:#0d0a16;
  color:#f2eefc;
  min-height:100svh;
  display:grid; place-items:center;
  overflow-x:hidden;
  padding:32px 20px;
  position:relative;
}
body::before, body::after {
  content:""; position:fixed; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;
}
body::before { width:520px;height:520px; left:-140px; top:-160px;
  background:radial-gradient(circle, rgba(255,60,110,.32), transparent 70%);
  animation: blob 16s ease-in-out infinite alternate; }
body::after { width:560px;height:560px; right:-180px; bottom:-200px;
  background:radial-gradient(circle, rgba(124,77,255,.30), transparent 70%);
  animation: blob 19s ease-in-out infinite alternate-reverse; }
@keyframes blob { from { transform:translate(0,0) scale(1); } to { transform:translate(60px,40px) scale(1.15); } }
```

Layers: tint z1, flash z60, bg-hearts z0/1, scene z2.

Continue:

```css
/* state layers */
.vh { position:absolute; opacity:0; pointer-events:none; }
.tint { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s;
  background: radial-gradient(circle at 50% 62%, rgba(255,64,120,.26), transparent 62%); }
#like:checked ~ .tint { opacity:1; }
.flash { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0;
  background: radial-gradient(circle at 50% 58%, rgba(255,255,255,.5), rgba(255,120,170,.18) 40%, transparent 68%); }
#like:checked ~ .flash { animation: flash .55s ease-out; }
@keyframes flash { 0%{opacity:0} 12%{opacity:1} 100%{opacity:0} }
```

bg hearts:

```css
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg span { position:absolute; bottom:-70px; left:var(--x); font-size:calc(var(--s)*1px);
  color:rgba(255,105,150,.22); animation: drift var(--t) linear infinite; animation-delay: var(--dl); }
@keyframes drift { 0%{transform:translateY(0) rotate(-8deg); opacity:0} 8%{opacity:.7} 85%{opacity:.35}
  100%{transform:translateY(-115vh) rotate(30deg); opacity:0} }
```

Scene:

```css
.scene { position:relative; z-index:2; text-align:center; max-width:680px; }
.scene > * { animation: arrive .7s cubic-bezier(.2,.85,.3,1) both; }
.scene > *:nth-child(2){animation-delay:.07s} (3) .14s (4) .21s (5) .28s
@keyframes arrive { from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
.badge { display:inline-block; font-size:12px; letter-spacing:.18em; font-weight:700;
  color:#ffb3c8; border:1px solid rgba(255,120,160,.35); background:rgba(255,90,130,.08);
  padding:8px 16px; border-radius:999px; margin-bottom:22px; }
h1 { font-size:clamp(30px, 6.4vw, 56px); font-weight:800; line-height:1.06; letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff, #ffc7d8 55%, #c9b3ff); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px; }
.sub { color:#a79fc0; font-size:clamp(15px,2.4vw,18px); max-width:46ch; margin:0 auto 34px; line-height:1.55; }
```

Card & button:

```css
.card { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.slot { /* wraps card for entrance */ }
.card {
  padding:26px 30px; border-radius:28px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  transition: box-shadow .5s, border-color .5s;
}
#like:checked ~ .scene .card { border-color:rgba(255,110,150,.55); box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 60px rgba(255,60,110,.28); animation: shake .55s ease-out; }
```

Wait — shake on .card and arrival on .slot: good, no conflict.

Button:

```css
.btn { position:relative; display:inline-flex; align-items:center; gap:16px;
  padding:18px 34px 18px 22px; border-radius:999px; cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#ffffff,#ffeaef);
  color:#241a2e; font-weight:800; font-size:20px; letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(255,70,120,.22), inset 0 -3px 0 rgba(210,120,150,.25);
  transition:transform .18s, box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 18px 40px rgba(255,70,120,.35), inset 0 -3px 0 rgba(210,120,150,.25); }
.btn:active { transform:translateY(0) scale(.94); }
#like:checked ~ .scene .btn { box-shadow:0 14px 44px rgba(255,60,110,.5), inset 0 -3px 0 rgba(210,120,150,.25); }
#like:focus-visible ~ .scene .btn { outline:3px solid #6ee7ff; outline-offset:4px; }
```

heart-wrap & heart:

```css
.hw { position:relative; width:46px; height:40px; display:grid; place-items:center; }
.heart { width:40px; height:37px; display:block;
  clip-path: path("M20 36.25 C20 36.25 0 23.75 0 10.6 C0 4.75 4.75 0 10.6 0 C14.5 0 18 2.12 20 5.25 C22 2.12 25.5 0 29.4 0 C35.25 0 40 4.75 40 10.6 C40 23.75 20 36.25 20 36.25 Z");
  background:linear-gradient(180deg,#a89fb8,#7d7490);
  transition: background .25s, filter .3s;
  animation: beat 1.5s ease-in-out infinite;
}
#like:checked ~ .scene .heart {
  background:linear-gradient(180deg,#ff8fb0,#ff1e56);
  filter:drop-shadow(0 4px 16px rgba(255,50,100,.75));
  animation: heartpop .75s cubic-bezier(.3,1.6,.4,1), glowf .75s ease-out;
}
@keyframes beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes heartpop {
  0%{transform:scale(.6) rotate(-20deg)}
  35%{transform:scale(1.75) rotate(6deg)}
  55%{transform:scale(.8) rotate(-4deg)}
  75%{transform:scale(1.2) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes glowf { 0%{filter:brightness(2.4) drop-shadow(0 0 26px #fff)} 100%{filter:brightness(1)} }
```

Hmm filter in glowf overrides the persistent drop-shadow at 100% — end with `filter:brightness(1) drop-shadow(0 4px 16px rgba(255,50,100,.75))` to match persistent value. Write both keyframes accordingly.

Text swap:

```css
.tl { display:none; color:#e5175e; }
#like:checked ~ .scene .tl { display:inline; animation:popin .45s cubic-bezier(.3,1.8,.4,1); }
#like:checked ~ .scene .tn { display:none; }
@keyframes popin { from{opacity:0; transform:scale(.4) rotate(-8deg)} to{opacity:1; transform:none} }
```

Particles:

```css
.p, .c { position:absolute; left:50%; top:50%; z-index:3; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(34px);
  animation: twinkle 3s ease-in-out infinite; animation-delay: var(--dl); }
.p { font-size:calc(15px * var(--s,1)); font-style:normal; line-height:1; color:var(--c); }
.c { width:8px; height:13px; border-radius:2px; background:var(--c); }
```

Wait .p is <i> — italic; set font-style normal.

Twinkle uses translateX(34px) baseline; but different particle desired offsets vary — fine uniform ring, scale varies:

```css
@keyframes twinkle {
  0%,100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(30px) scale(.2); }
  50% { opacity:.85; transform:translate(-50%,-50%) rotate(var(--a)) translateX(38px) scale(1); }
}
```

Burst:

```css
#like:checked ~ .scene .p, #like:checked ~ .scene .c { animation: fly .95s cubic-bezier(.16,.9,.3,1) forwards; }
@keyframes fly {
  0% { opacity:1; transform:translate(-50%,-50%) rotate(var(--a)) translateX(10px) scale(.3) rotate(0deg); }
  65% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(1.05) rotate(200deg); }
}
```

Hmm rotate(200deg) end vs 0 start — spins 200°, fine.

Rings:

```css
.ring { position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px;
  border-radius:50%; border:3px solid rgba(255,120,160,.9); opacity:0; pointer-events:none; z-index:2; }
.r2 { border-width:2px; border-color:rgba(255,255,255,.8); }
#like:checked ~ .scene .r1 { animation: ringout .7s cubic-bezier(.2,.7,.4,1) forwards; }
#like:checked ~ .scene .r2 { animation: ringout .85s .08s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes ringout { 0%{opacity:.95; transform:scale(.4)} 100%{opacity:0; transform:scale(4.2)} }
```

Rise:

```css
.rise { position:absolute; left:58%; top:-4px; font-size:16px; font-style:normal; color:#ff7aa0;
  opacity:0; pointer-events:none; z-index:1; }
#like:checked ~ .scene .rise { animation: rise 2s ease-out infinite; animation-delay: var(--rd); }
@keyframes rise {
  0% { opacity:0; transform:translate(0,0) scale(.4) rotate(-12deg); }
  18% { opacity:.95; }
  100% { opacity:0; transform:translate(var(--sw,14px), -92px) scale(1) rotate(18deg); }
}
```

Chip & counter:

```css
.chip { display:inline-flex; align-items:baseline; gap:8px; padding:16px 24px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  font-size:17px; color:#a79fc0; font-weight:600; counter-reset: likes 999; }
```

Wait counter-reset must be where? I said .scene, but chip works too — increment must be on ancestor-or-self of usage: increment on `#like:checked ~ .scene .chip`? Then .num::after inside chip sees it (increment on ancestor chip ✓). Put counter-reset on .chip, increment on checked chip. Cleaner.

```css
#like:checked ~ .scene .chip { counter-increment: likes; border-color:rgba(255,110,150,.5); color:#ffc7d8; animation: bump .5s cubic-bezier(.3,1.8,.4,1); }
.num::after { content:counter(likes); font-weight:800; font-size:20px; color:#f2eefc; font-variant-numeric: tabular-nums; }
#like:checked ~ .scene .num::after { color:#ff5c8a; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.15) rotate(-2deg)} 100%{transform:scale(1)} }
```

Hmm counter-reset inside .chip but the increment selector targets .chip — same element, ✓. Also note: counter-reset: likes 999 — but the pseudo content counter(likes) inside .num::after — .num inside .chip. ✓.

Title swap spans: `.t2 {display:none}` etc.

Hint: small text bottom.

Reduced motion:

```css
@media (prefers-reduced-motion: reduce) {
  .bg span, body::before, body::after { animation: none; }
}
```

Responsive: at 375px: h1 clamps, card padding smaller via media query:

```css
@media (max-width:480px){ .card{padding:20px 18px} .btn{padding:15px 26px 15px 18px; font-size:18px} }
```

bg-hearts spans content ♥ with inline vars:
--x: 6%, 18%, 32%, 47%, 60%, 74%, 88%; --t: 11s–19s; --dl negative: -3s, -8s, -1s, -12s, -5s, -15s, -9s; --s: 18–42.

Also I realize the flash keyframe z-index 60 overlay covering everything momentarily — dramatic. OK.

Double-check no JS ✓. No external requests ✓ (no fonts). System fonts only.

Sanity check sibling selectors: `#like:checked ~ .tint` — tint is sibling ✓. `.scene` sibling ✓.

One more thing: label default cursor pointer ✓. Also label text "Like" default; note the heart-wrap inside button flex.

Also give the h1 lines: maybe two-line title "Go on. Smash it." is enough.

Edge: `.scene > *` arrival animation also applies to... scene children: badge, h1, sub, .slot, hint — 5 children. But careful: `.scene > *` animation both — with delays up to .28s. Fine.

But wait: the h1 contains swap spans with animations — independent.

Also, when :checked, .tl popin animation — but when unchecked→checked again, replays ✓.

Potential issue: `#like:checked ~ .scene .p` animation fly overrides twinkle; animation-delay from base rule (--dl) still applies to fly! Because base sets animation-delay via shorthand `animation: twinkle 3s ...` — the checked rule's shorthand `animation: fly .95s ...` resets delay to 0 ✓ (shorthand resets all sub-props). But base rule also sets `animation-delay: var(--dl)` separately after shorthand — order in stylesheet matters within same rule. In the checked rule, only shorthand → delay 0. Good — bursts all start together. But do I want staggered burst? Slight stagger looks better: could set `animation-delay: calc(...)`— skip, simultaneous burst is punchy.

But careful: in base .p rule, I write shorthand then `animation-delay: var(--dl);` — must appear after shorthand in the same rule. ✓.

Also .rise base has no animation (opacity 0), checked adds infinite rise with delay var(--rd) — negative delays fine.

Confetti `<u>`: text-decoration none needed: `.c { text-decoration:none }` (u has underline but empty content, still set it).

Let me also double check clip-path path() syntax: `clip-path: path("M20 36.25C20 36.25 0 23.75 0 10.6C0 4.75 4.75 0 10.6 0C14.5 0 18 2.12 20 5.25C22 2.12 25.5 0 29.4 0C35.25 0 40 4.75 40 10.6C40 23.75 20 36.25 20 36.25Z")`. Valid.

Heart height: path max y 36.25 → element height 37px ✓. Width 40 ✓.

heart-wrap 46×40 with grid center — heart 40×37 centered ✓. Particles origin at center of heart ✓.

Popin keyframes used for .tl; also maybe reuse for t2.

Also when unchecked → heart returns to beat animation (restart) — fine.

Flash overlay might tint screenshot at 3s? No—only on click.

I think also add a small footer line: "No JavaScript. No libraries. Just CSS having a breakdown." in hint.

Now, counts: also add aria? label with checkbox is accessible-ish. Add aria-label on input.

Write the final file.

One more check — the `.p` uses `<i>` italic: set font-style:normal ✓. `.rise` uses `<b>` bold ok.

Title text colors: gradient text with background-clip — must set `-webkit-text-fill-color: transparent` or color:transparent; use both prefixed and standard.

Also body:has(#like:checked) to swap page ambient? I have .tint already. Skip :has entirely.

Final code assembly. Also add `user-select:none` on scene maybe just button.

Let me also add the "wiggle" of the whole scene on checked? Card shake is enough.

Also: multiple rapid toggles — animations restart each toggle ✓.

Counter display initial "999". After like "1000". After unlike back to "999" — count doesn't persist; acceptable for pure CSS (state IS the checkbox). 

Also hint about toggling.

Font weight 800 fallback fine.

Write it out.