DeepSeek V4.1 Flash 1017

The user wants a "like" button in pure CSS, no JavaScript, with a crazy animation on click. I need to make it visually impressive and self-contained.

Pure CSS approach: use a checkbox input with a label, and `:checked` sibling selectors to trigger animations. Also can use `:active` for press animations.

Let me design something spectacular:
- A heart button with gradient
- On check: heart pops, bursts into particles (multiple spans with different rotations/distances), confetti, ripple rings, sparkles
- Button scales, glows, text changes "Like" → "Liked"
- Counter increments (pure CSS trick with two digit columns translating)
- Background hue shift

Implementation details:
- `<input type="checkbox" id="like" class="like-input">` hidden
- `<label for="like" class="like-btn">` containing heart SVG (inline SVG allowed inside HTML), particles, rings
- CSS: `.like-input:checked + .like-btn .heart { animation: ... }`

For repeated animation on click, since checkbox toggles, the animation runs on check and on uncheck. To make it always animate on click, use `:active` too? Actually the toggle animation running both ways is fine — but we want "crazy" always. We can define animations for `:checked` state (the like burst) and for unchecked state (a subtle reset). That works nicely.

Particles: use spans inside the label with CSS custom properties for direction. Each particle: `--x`, `--y`, `--r`, `--d`. Animation from center outward with scale/opacity.

Rings: 3 concentric expanding circles with delays.

Confetti: small rectangles flying.

Sparkle stars: use SVG or CSS clip-path stars.

Also a "hue-rotate" flash on the whole scene? Could do a background pulse via `.like-input:checked ~ .scene` ... but label is sibling. Let me structure:

```html
<div class="scene">
  <input type="checkbox" id="like" class="like-input">
  <label for="like" class="like-btn">
    <span class="rings">...</span>
    <span class="burst">...particles...</span>
    <span class="heart">svg</span>
  </label>
  <div class="label-text">Like</div>
  <div class="counter">...</div>
</div>
```

Wait, `.like-input:checked ~ .something` works for siblings after the input. Good.

Counter: show a number that goes from 1,284 to 1,285. Pure CSS digit roll: two stacked numbers in a masked box, translate on check. Let's do digits with `overflow:hidden; height:1em` and inner spans.

Simpler: counter has two spans stacked vertically inside a clipping container, `.num` with `transform: translateY(0)` → `translateY(-50%)`. Content "1,284" and "1,285". Need equal width; use monospace-ish font, or fixed width. Fine.

Also a text "Like" → "Liked" swap with vertical slide.

Also add a shockwave that expands beyond the button, screen shake of the whole scene, and floating hearts.

Let me also add a "heartbeat" pulse of the whole card and a glow.

Also add a color flash on the page background: use `.like-input:checked ~ .flash` element fixed full-screen with radial gradient, animation.

Keyboard accessible: checkbox focus-visible ring.

Let me write the CSS carefully.

Structure:

```html
<div class="stage">
  <input type="checkbox" id="like" class="like-input">
  <div class="flash"></div>
  <div class="card">
    <label class="like-btn" for="like" aria-label="Like">
      <span class="glow"></span>
      <span class="ring r1"></span>
      <span class="ring r2"></span>
      <span class="ring r3"></span>
      <span class="particles">... 18 spans ...</span>
      <span class="heart-wrap">
        <svg class="heart" viewBox="0 0 24 24"><path d="..."/></svg>
      </span>
    </label>
    <div class="meta">
      <div class="pill">
        <span class="word"><span class="w-like">Like</span><span class="w-liked">Liked</span></span>
      </div>
      <div class="counter">...</div>
    </div>
  </div>
</div>
```

Hmm, `.flash` as sibling of input — but it's inside `.stage`; need `position: fixed` full screen, pointer-events none.

Actually careful: the flash covering the screen could be triggered on check. Use animation 0.6s.

Let's think about the heart SVG path. Standard heart path: `M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z` — that's the material heart. Good.

For the "pop" effect, animate the heart scale with keyframes: 0% scale(1), 30% scale(0.6) rotate(-15deg), 55% scale(1.6), 70% scale(1.15), 85% scale(1.3), 100% scale(1.2) — final resting state bigger. Actually final state should be "liked" = filled red heart scaled slightly bigger with glow.

Base state: heart outlined/gray (use fill with a stroke look). Simpler: base heart is a muted gray fill; liked heart is a red gradient fill with glow.

Use `fill: url(#grad)`? Inline SVG gradient needs defs. I'll do two paths or use CSS `fill` with `currentColor`. Use CSS variable.

Let's keep: `.heart path { fill: #2a2f45; transition: fill .3s }` and checked → `fill: url(#hg)`? CSS can reference an SVG gradient defined in the same document via `url(#hg)`. Since the SVG is inline, that works in Chrome. But safer: use a `<linearGradient>` inside the SVG defs and set `fill="url(#hg)"` always, but control via opacity of two overlapping paths. Hmm, simplest: two paths stacked — gray path and gradient path — with opacity toggled. Or just use solid colors with `filter: drop-shadow`.

I'll do: heart path filled with a gradient always defined, and in unchecked state apply `filter: grayscale(1) brightness(0.9) opacity(0.55)`. That's simple and looks nice. Transition filter.

Actually filter transitions are okay in Chrome.

Now particles: I'll write out ~20 spans with inline `style="--a: 0deg; --d: 90px; --s: 1;"` etc. Actually inline style attribute is fine (still "pure CSS" in the sense of no JS).

Particles animation on `:checked`:

```css
.particle {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--c, #ff4d6d);
  opacity: 0;
  transform: translate(-50%,-50%) scale(0);
  transform-origin: center;
}
.like-input:checked ~ .card .particle {
  animation: burst var(--dur, .9s) cubic-bezier(.15,.7,.3,1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes burst {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  ...
}
```

Hmm, to move outward by angle and distance, need `translate(calc(cos...))` — CSS has no cos of custom property directly... Actually CSS `cos()` and `sin()` are supported in Chrome 111+. But safer: use a wrapper that rotates by `--a` and a child that translates along X. Standard trick:

```html
<span class="p" style="--a:0deg; --d:100px"><i></i></span>
```
`.p { position:absolute; left:50%; top:50%; transform: rotate(var(--a)); }` and `i` translates `translateX(var(--d))`.

But the rotation needs to be in the animated transform. Alternative: animate `i` with keyframes using translateX and the parent handles rotation statically. Yes:

```css
.p { position:absolute; inset:0; transform: rotate(var(--a)); }
.p i { position:absolute; left:50%; top:50%; margin:-5px; width:10px;height:10px;border-radius:50%; transform: translateX(0) scale(0); opacity:0;}
.like-input:checked ~ .card .p i { animation: fly .8s var(--ease) forwards; }
@keyframes fly {
  0% { opacity:1; transform: translateX(6px) scale(1.1); }
  60% { opacity:1; }
  100% { opacity:0; transform: translateX(var(--d)) scale(.2); }
}
```

Good. Different shapes: circles, squares (confetti with rotate), stars, hearts.

For confetti squares: `border-radius: 2px` and add rotate in the transform: `translateX(var(--d)) rotate(720deg)`.

Actually with the parent rotate, adding rotate to the child gives a spin. Fine.

Also add a "shockwave" ring expanding.

And "floating hearts" rising up after the burst.

Also the whole button can do a wobble.

Let me also add a screen shake to the card: `@keyframes shake` with translate.

Let's write the code.

```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> ... </style>
</head>
<body>
...
</body>
</html>
```

Body background: dark gradient with subtle radial glows. Center content.

Let me write out the CSS.

```css
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% 0%, #1b2140 0%, #0b0e1a 55%, #06070d 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #e8ecff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
```

Wait — `overflow: hidden` on body prevents horizontal scrollbar. Good, but on 375px it must still fit. Use scale-down via clamp.

Stage:

```css
.stage { position: relative; display: grid; place-items: center; padding: 24px; }
```

Card containing button + text.

Actually, maybe skip the card and just have the big button with text below. Let's have:

- A pill-shaped button (large, ~120px circle) with the heart.
- Below: "Like" text and counter.

Hmm, "like button" — I'll do a big circular button with heart, plus a caption row underneath showing "Like · 1,284" that changes.

Let me make the counter a separate element with digits.

Design:

```
   [ ♥ ]      <- 120px circle button
  Like 1,284   <- caption
```

On check: heart fills red, bursts particles, counter rolls to 1,285, caption says "Liked".

Let's build.

```html
<div class="stage">
  <input type="checkbox" id="like" class="like-input">
  <div class="flash" aria-hidden="true"></div>

  <label class="like-btn" for="like">
    <span class="btn-glow"></span>
    <span class="ripple"></span>
    <span class="ring"></span>
    <span class="ring ring2"></span>
    <span class="burst" aria-hidden="true">
      ...particles...
    </span>
    <span class="hearts" aria-hidden="true">
      ...3 floating hearts...
    </span>
    <svg class="heart" viewBox="0 0 24 24" aria-hidden="true">
      <defs>
        <linearGradient id="hg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ff8fab"/>
          <stop offset="45%" stop-color="#ff2d6f"/>
          <stop offset="100%" stop-color="#b3003c"/>
        </linearGradient>
      </defs>
      <path d="..."/>
    </svg>
  </label>

  <div class="caption">
    <span class="word"><span class="a">Like</span><span class="b">Liked</span></span>
    <span class="dot">·</span>
    <span class="counter">
      <span class="col">
        <span>1,284</span>
        <span>1,285</span>
      </span>
    </span>
  </div>
</div>
```

Hmm, the counter needs the two numbers stacked and container height = 1 line. Use:

```css
.counter { display:inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; }
.col { display: block; transition: transform .5s cubic-bezier(.2,1.4,.4,1); }
.col span { display:block; height: 1.2em; line-height: 1.2em; }
.like-input:checked ~ .caption .col { transform: translateY(-1.2em); }
```

Wait, `:checked ~ .caption` — caption is a sibling after the input inside `.stage`. Yes.

But careful: the label is also a sibling. Order: input, flash, label, caption. `~` works for all following siblings.

Width of counter will be based on the widest? No — inline-block width is determined by content of both spans stacked... they're block-level inside, so container width = max of the two widths. "1,284" vs "1,285" same width in most fonts (tabular? not guaranteed). Use `font-variant-numeric: tabular-nums;` to be safe. Good.

Word swap: similar vertical roll.

```css
.word { display:inline-block; height:1.2em; overflow:hidden; vertical-align:bottom;}
.word span { display:block; height:1.2em; line-height:1.2em; transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
```

Hmm, but I want both to move. Put them in a wrapper `.wcol` that translates -1.2em.

Let's simplify: `.word { display:inline-grid; height:1.2em; overflow:hidden; }` with a `.wcol` inside.

Alright.

Now the button:

```css
.like-btn {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(160deg, #232a48, #141830);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .2s, box-shadow .35s, background .35s;
  isolation: isolate;
}
.like-btn:hover { transform: translateY(-2px); }
.like-btn:active { transform: scale(.92); }
```

The heart inside: width 60px.

```css
.heart { width: 64px; height: 64px; display:block; filter: grayscale(1) brightness(1.6) opacity(.45); transition: filter .4s, transform .4s; }
```

Hmm grayscale on a red gradient gives a gray. brightness 1.6 to lighten. Then unchecked it looks like a dim gray heart. Good.

Checked:

```css
.like-input:checked ~ .like-btn .heart {
  filter: none;
  animation: heartPop .9s cubic-bezier(.2,.9,.25,1.4) both;
}
@keyframes heartPop {
  0%   { transform: scale(1) rotate(0); }
  18%  { transform: scale(.72) rotate(-14deg); }
  42%  { transform: scale(1.55) rotate(8deg); }
  60%  { transform: scale(1.1) rotate(-4deg); }
  78%  { transform: scale(1.28) rotate(2deg); }
  100% { transform: scale(1.18) rotate(0); }
}
```

Wait, with `both` fill mode, final state is scale(1.18). But when unchecked, we need it back to scale(1). Since animation removed on uncheck, the base transform applies. But base `.heart` has no transform → scale 1. Add a transition. Fine. Actually when unchecking, animation is removed abruptly. That's ok, maybe add a small reverse animation. Let's not overcomplicate — but it'd be nicer if the uncheck state also had a little animation. I could add a rule for unchecked:

```css
.like-input:not(:checked) ~ .like-btn .heart { animation: heartReset .4s ease; }
```
But that would also run on page load. Hmm, on load the checkbox is unchecked → animation runs once on load, which is fine (a small pop at start). Actually that could look nice as an entrance. But it may conflict... it's fine, it's just a quick scale.

Actually simpler: skip. The transition on transform handles it: `transition: transform .4s`. When the animation ends and you uncheck, the computed transform changes from scale(1.18) to scale(1) with transition. Wait — during the animation with fill both, transform is animated. On uncheck, animation removed → transform becomes the base value (scale 1 via transition). Chrome should transition it. Good.

Button glow when checked:

```css
.like-input:checked ~ .like-btn {
  background: linear-gradient(160deg, #3a1030, #1a0a1e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 1px rgba(255,45,111,.5), 0 0 60px -6px rgba(255,45,111,.75), 0 18px 40px -12px rgba(0,0,0,.9);
  animation: btnPunch .7s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes btnPunch {
  0% { transform: scale(1); }
  25% { transform: scale(.9); }
  55% { transform: scale(1.12); }
  75% { transform: scale(.98); }
  100% { transform: scale(1); }
}
```

Careful: `:hover` transform would conflict with the animation, but animations override transitions/transform declarations. Fine.

Hmm, but `.like-btn:active { transform: scale(.92) }` conflicts with animation too. During the punch animation, active state is overridden. Acceptable.

Rings (shockwave):

```css
.ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,45,111,.9);
  opacity: 0;
  pointer-events: none;
  transform: scale(.6);
}
.like-input:checked ~ .like-btn .ring { animation: shock 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
.like-input:checked ~ .like-btn .ring2 { animation-delay: .12s; }
@keyframes shock {
  0% { opacity: .95; transform: scale(.65); border-width: 6px; }
  100% { opacity: 0; transform: scale(2.6); border-width: 1px; }
}
```

Hmm border-width animation is fine.

Particles: I'll place a `.burst` absolutely positioned centered with 0 size, and children.

```css
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.p { position: absolute; left: 0; top: 0; transform: rotate(var(--a)); }
.p i {
  position: absolute; left: 0; top: 0;
  width: var(--sz, 10px); height: var(--sz, 10px);
  margin: calc(var(--sz, 10px) / -2);
  background: var(--c, #ff2d6f);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(0) scale(.2);
  display: block;
}
```

Hmm `margin: calc(var(--sz)/-2)` — with four values that sets all margins. OK.

Animation:

```css
.like-input:checked ~ .like-btn .p i {
  animation: fly var(--dur, .85s) cubic-bezier(.15,.75,.35,1) var(--dl, 0s) forwards;
}
@keyframes fly {
  0%   { opacity: 1; transform: translateX(18px) scale(1) rotate(0deg); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--d, 100px)) scale(.15) rotate(var(--rot, 180deg)); }
}
```

Since `--d` is per-particle, keyframes with var() work.

For star shapes, use clip-path polygon.

Let me generate particles list. I'll do 24 particles with angles spread 0-360 and varied distances/colors/sizes/delays.

Angles: every 15deg = 24 particles. Distances 70-140px. Colors from a palette: #ff2d6f, #ff8fab, #ffd166, #7cf0ff, #b892ff, #ff5e3a, #4ade80.

Also add confetti rectangles (some particles as squares) and a few stars.

I'll write inline styles like:
`<span class="p" style="--a:0deg"><i style="--d:120px;--c:#ff2d6f;--sz:12px;--dl:.02s"></i></span>`

Hmm the delay should be on the animation; it's set on `i` via `--dl`. Fine since animation is on `i`.

Let me define default `--dl: 0s`.

Also floating hearts rising: separate elements with `@keyframes floatUp`.

Let me write ~4 floating hearts with different x offsets, sizes, delays.

```css
.fh { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.fh span { position:absolute; left: var(--x); top: 0; font-size: var(--fs); opacity: 0; ... }
```
Use `♥` character? That's a text char, fine. Or an SVG. Character is simpler and renders fine.

Actually using a text heart `♥` with color. Let's do that with `font-size: 22px`.

```css
.like-input:checked ~ .like-btn .fh span {
  animation: floatUp 1.2s ease-out var(--dl) forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -110px) scale(1.1); }
}
```

Hmm, but these are inside the label which has overflow visible — good.

Flash overlay (full-screen white/pink flash):

```css
.flash {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,45,111,.35), rgba(255,45,111,0) 60%);
  opacity: 0;
  z-index: 5;
}
.like-input:checked ~ .flash { animation: flash .55s ease-out; }
@keyframes flash { 0%{opacity:0} 12%{opacity:1} 100%{opacity:0} }
```

Also a page-wide hue/scale pulse maybe. Keep it.

Card shake: apply to `.stage`? Actually shake the button container. Let's shake `.stage` slightly.

```css
.like-input:checked ~ .like-btn { animation: punch .8s ... }
```
Already done.

Let me also add sparkle rays around the button: a conic-gradient rotating ring that appears. Maybe a `.rays` element with conic-gradient and mask... might be heavy. Skip or add simple.

Add a "burst ring of light" using box-shadow? The rings are enough.

Let me also make the caption "Liked" turn pink and the counter color change.

Also add `:focus-visible` outline for keyboard.

Now let's also handle the "no JS" requirement — fine, zero JS.

One more nice touch: when liked, the button shows a subtle pulsing glow animation infinite:

```css
.like-input:checked ~ .like-btn .btn-glow { animation: glowPulse 2s ease-in-out infinite .8s; }
```

with `.btn-glow` a blurred radial behind.

Let me now write out everything concretely.

Particles: I'll write them with a helper... no JS, so I need to hand-write. Let's do 24.

Angles: 0, 15, 30, ... 345.

I'll vary: distance between 80 and 150, size 6-14, delay 0-0.08.

Colors cycle: 
1. #ff2d6f
2. #ffd166
3. #7cf0ff
4. #b892ff
5. #ff8fab
6. #4ade80

Shapes: some circles, some squares (`.sq` class → border-radius 2px), some stars (`.st` class → clip-path).

Let me write them:

```html
<span class="burst" aria-hidden="true">
  <span class="p" style="--a:0deg"><i style="--d:132px;--c:#ff2d6f;--sz:12px"></i></span>
  <span class="p" style="--a:15deg"><i style="--d:104px;--c:#ffd166;--sz:9px;--dl:.03s"></i></span>
  ...
</span>
```

That's a lot of typing but fine.

Let me produce 24 with a pattern.

Actually, to make it crazier, I'll do two layers: inner fast burst (12 particles, short distance) and outer burst (18 particles, long distance). Total 30. That's a lot of markup but fine.

Let me just do 28 particles. OK.

Also add a "confetti" layer of 10 rectangles that fall downward with gravity... maybe too much. Keep the radial burst + floating hearts + rings + flash.

Let me write.

```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>
:root{
  --pink:#ff2d6f;
  --pink-soft:#ff8fab;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 520px at 50% -10%, #1d2447 0%, rgba(29,36,71,0) 70%),
    radial-gradient(700px 500px at 85% 110%, #2a1030 0%, rgba(42,16,48,0) 70%),
    #07080f;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:#e9edff;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
```

Wait, `overflow:hidden` on body + `min-height:100vh` grid place-items center. Good.

Add subtle animated background? Maybe a slow drifting glow. Could be nice but keep simple.

Stage:

```css
.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
  padding:20px;
  transform-origin:center;
}
```

Button size responsive: `--size: clamp(96px, 26vw, 140px)`. Use `width:var(--size)`.

Heart size: `calc(var(--size) * .46)`.

Now the caption:

```css
.caption{
  display:flex; align-items:center; gap:10px;
  font-size: clamp(15px, 3.6vw, 19px);
  font-weight:600;
  letter-spacing:.01em;
  color:#9aa3c7;
  transition: color .35s;
  height: 1.4em;
}
.like-input:checked ~ .caption { color:#ffd0de; }
```

Hmm, caption color transition: the `.word` should turn pink.

Let me define:

```css
.word{ display:inline-grid; overflow:hidden; height:1.4em; }
.word .wcol{ display:block; transition: transform .45s cubic-bezier(.2,1.5,.4,1); }
.word .wcol > span{ display:block; height:1.4em; line-height:1.4em; }
.like-input:checked ~ .caption .wcol{ transform: translateY(-1.4em); }
```

And the "Liked" span colored pink: `.wcol > span:last-child{ color: var(--pink); }` Actually color it `#ff5c8d`.

Counter similar with tabular-nums.

Hmm — `display:inline-grid` with `overflow:hidden` — width = max content width of the column. The column contains two spans stacked. Width = max of both. Good.

But `height:1.4em` with `line-height:1.4em` per span — total column height 2.8em, translate -1.4em. Good.

Vertical alignment: the `.caption` is a flex row with align-items center, so items align fine. But `.word` and `.counter` have height 1.4em — fine.

Dot separator: `<span class="dot">·</span>`.

Now, the number: "1,284" → "1,285". Might be nicer: "12.4K" → "12.5K"? Keep 1,284 → 1,285.

Alright.

Let me also add a small "pop" scale to the counter when it changes... hard without JS. Skip.

Now, an extra crazy bit: when liked, add a rotating conic gradient ring behind the button.

```css
.rays{
  position:absolute; inset:-40%; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 6deg, rgba(255,45,111,.55) 6deg 8deg, transparent 8deg 18deg, ...);
  opacity:0;
  mask: radial-gradient(closest-side, transparent 55%, #000 60%, #000 78%, transparent 82%);
  -webkit-mask: same;
}
```

That's a lot of conic stops. I could use `repeating-conic-gradient(from 0deg, rgba(255,45,111,.6) 0deg 2deg, transparent 2deg 12deg)`. Then mask to a ring. And animate rotation. Nice "sunburst".

```css
.rays{
  position:absolute;
  inset:-55%;
  border-radius:50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,45,111,.75) 0deg 1.5deg, transparent 1.5deg 11deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 62%, #000 80%, transparent 84%);
  mask: radial-gradient(closest-side, transparent 58%, #000 62%, #000 80%, transparent 84%);
  opacity:0;
  pointer-events:none;
  transform: scale(.5) rotate(0deg);
}
.like-input:checked ~ .like-btn .rays{
  animation: raysSpin 1.4s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes raysSpin{
  0%{ opacity:0; transform: scale(.4) rotate(-30deg); }
  15%{ opacity:1; }
  70%{ opacity:.9; }
  100%{ opacity:0; transform: scale(1.15) rotate(60deg); }
}
```

That's a nice burst. 

Now the flash — I'd like the flash to be behind the button? No, overlay is fine, it's subtle.

Now let me write all particle markup.

Palette: 
- #ff2d6f (pink)
- #ff6b9d
- #ffd166 (yellow)
- #7cf0ff (cyan)
- #b892ff (purple)
- #6ee7b7 (mint)
- #ff8a3d (orange)

Particle list (angle, distance, size, color, shape, delay):

1. 0° 138px 11 #ff2d6f circle
2. 15° 96px 8 #ffd166 square .02
3. 30° 120px 10 #7cf0ff circle
4. 45° 84px 7 #b892ff star .04
5. 60° 145px 12 #ff6b9d circle
6. 75° 100px 9 #6ee7b7 square .01
7. 90° 132px 10 #ffd166 circle
8. 105° 88px 7 #ff2d6f star .05
9. 120° 126px 11 #b892ff circle
10. 135° 150px 9 #7cf0ff square .02
11. 150° 96px 8 #ff8a3d circle
12. 165° 118px 10 #ff2d6f circle .03
13. 180° 140px 12 #ffd166 star
14. 195° 92px 7 #6ee7b7 circle .04
15. 210° 128px 10 #ff6b9d square
16. 225° 104px 8 #7cf0ff circle .01
17. 240° 148px 11 #b892ff circle
18. 255° 86px 7 #ff2d6f star .05
19. 270° 136px 10 #ffd166 circle
20. 285° 100px 9 #6ee7b7 square .02
21. 300° 122px 11 #ff8a3d circle
22. 315° 146px 8 #ff2d6f circle .03
23. 330° 94px 7 #7cf0ff star .04
24. 345° 130px 10 #ff6b9d circle

Plus inner ring of 8 small quick particles:
- 22° 52px 5 #fff
- 67° 60px 6 #ffd166
- 112° 48px 5 #fff
- 157° 58px 6 #ff8fab
- 202° 54px 5 #fff
- 247° 62px 6 #7cf0ff
- 292° 50px 5 #fff
- 337° 56px 6 #b892ff

OK.

Floating hearts: 4 with x offsets -46, 38, -14, 52, sizes 16-26, delays 0, .06, .12, .18.

Hmm they float up from center; they'd overlap the heart. That's fine, they fade out.

Now writing CSS for `.st` (star) shape:

```css
.p i.st{
  border-radius:0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
```

And `.sq` → `border-radius:2px`.

Now let's be careful about the `--sz` margin calc. I'll set on `i`:

```css
.p i{
  position:absolute;
  left:0; top:0;
  width:var(--sz,10px);
  height:var(--sz,10px);
  margin-top:calc(var(--sz,10px) / -2);
  margin-left:calc(var(--sz,10px) / -2);
  ...
}
```

Good.

Now `.burst` positioned at center of the label: `position:absolute; left:50%; top:50%; width:0; height:0;`. Then `.p` at `left:0;top:0` with `transform: rotate(var(--a))`. And `i` at left:0,top:0 with negative margins to center it. Then translateX moves along the rotated axis. 

But `.p` needs `position:absolute` — yes it has. And width/height 0 by default (no content). Fine.

Now `.hearts` layer similar.

Now the `:checked` selectors. The input is `.like-input`, first child of `.stage`. Then `.flash`, `.like-btn` (label), `.caption`.

Wait: I put `.flash` as `position:fixed` inside `.stage` — that's fine.

Selectors: `.like-input:checked ~ .like-btn .ring` etc.

Also I need the label to be clickable — it wraps the button content. The particles have `pointer-events:none`.

Let's write the CSS for `.like-btn`:

```css
.like-btn{
  position:relative;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  isolation:isolate;
  background:linear-gradient(160deg,#2a3157 0%,#161a30 60%,#10131f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -18px 30px -20px rgba(0,0,0,.9),
    0 24px 48px -16px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.07);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .4s ease, background .4s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  touch-action: manipulation;
}
```

Hover: `transform: translateY(-3px) scale(1.02)`.

Checked: gradient pink-ish, glow shadow.

Now `--size` variable defined on `.stage`:

```css
.stage{ --size: clamp(104px, 30vw, 150px); }
```

At 375px wide: 30vw = 112px. Fine.

Heart: `width: calc(var(--size) * .46)`.

OK, also `place-items:center` on the label grid means the SVG centers. The absolutely positioned children are fine.

Now `.btn-glow`:

```css
.btn-glow{
  position:absolute; inset:-30%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,45,111,.75), rgba(255,45,111,0) 65%);
  opacity:0; filter: blur(10px);
  z-index:-1;
  pointer-events:none;
  transition: opacity .4s;
}
.like-input:checked ~ .like-btn .btn-glow{
  opacity:.85;
  animation: glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ transform: scale(1); opacity:.75; }
  50%{ transform: scale(1.15); opacity:1; }
}
```

Hmm, `.btn-glow` with z-index -1 inside an `isolation: isolate` parent — it will be behind the label's background? The label has a background, so z-index:-1 child goes behind the background of the parent only if the parent doesn't create a stacking context... Actually with `isolation:isolate` the parent creates a stacking context; a child with z-index:-1 paints behind the parent's content but above the parent's background. Hmm, actually negative z-index children paint above the parent's background/borders but below in-flow content. So the glow would be visible on top of the button background but behind the heart. That's... actually fine? It would be a pink radial glow inside the button. Hmm, but inset:-30% extends outside — the label doesn't have overflow:hidden, so it extends outside. That's good, we want the outer glow.

Wait, but it would also cover the button's own background. Since it's a radial gradient fading to transparent, and it's pinkish, it'd tint the button pink. That's actually desired.

Hmm, but I want it behind the button. Let's just remove z-index and place it first in DOM — no, absolutely positioned elements paint above. Set `z-index:0` and heart `z-index:2`... Simpler: keep it in front but subtle. Actually let me put it behind using `z-index:-1` with the parent not having isolation... then it goes behind the parent's background but also potentially behind the stage. Meh.

Alternative: make `.btn-glow` a separate absolutely-positioned element inside `.stage` behind the label. Let's do that: put `<span class="halo">` inside `.stage` before the label, positioned absolute centered, z-index 0, and label z-index 1. Hmm, `.stage` is flex column; absolute children need the stage to be `position:relative` — it is.

Let's do:

```html
<div class="stage">
  <input ...>
  <div class="flash"></div>
  <div class="halo"></div>
  <label class="like-btn" ...>...</label>
  <div class="caption">...</div>
</div>
```

`.halo` positioned at the button center. But the button center isn't the stage center (caption below). Use `top: calc(...)`. Hmm, tricky.

Easier: keep `.btn-glow` inside the label but make it purely outer — use `inset:-25%` with a radial gradient that's transparent in the middle:

```css
background: radial-gradient(circle, rgba(255,45,111,0) 42%, rgba(255,45,111,.55) 55%, rgba(255,45,111,0) 72%);
```

That way it's a ring glow outside the button edge. But it would still overlay the button's own edge region. It's a glow — fine. And with z-index:-1 it paints above the button bg but below the heart. Hmm, above the bg means it covers the button's background with a pink ring near the edge. Actually that looks good — a glowing rim.

OK let's just do that, no z-index needed but let's keep `z-index:0` and heart `z-index:3`.

Wait, actually simpler: since `.btn-glow` is `position:absolute`, and `.heart` is an in-flow grid item (not positioned), the absolutely positioned glow paints above it. So I need `z-index` on the heart. Let me give `.heart { position: relative; z-index: 3; }`.

Alright.

Now let me finalize the ordering in the label:
1. `.btn-glow`
2. `.rays`
3. `.ring`, `.ring2`
4. `.burst`
5. `.hearts`
6. `.heart` (svg)

Rings should be behind the heart. Fine.

Let's write out.

One more: I should make sure the demo is "meaningful on first paint" — yes, a big like button. Maybe I should also add an auto-demo? Not needed; the task says games need demo mode. This is not a game. But it says "Something meaningful must be visible on first paint". The button is visible. Good.

But maybe add a hint text "Click the heart" to make it obvious. Let's add a small hint below the caption: "Click the heart ✨" in muted text. Good idea.

Hmm, but that could be considered clutter. I'll add a subtle hint.

Also maybe pre-liked? No — keep unchecked so the user can click.

Let me consider adding a subtle idle animation to the button so the screenshot at 3s shows something alive: a gentle floating. Yes:

```css
.like-btn{ animation: idle 4s ease-in-out infinite; }
@keyframes idle{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
```

But that conflicts with `:active` transform and hover transform and the punch animation. The punch animation on `:checked` would override (animations have higher priority). But hover/active transitions would be overridden by the idle animation too. Hmm. Let's put the idle float on a wrapper... but the label is the button.

Alternative: use a `::before` glow pulsing instead, and skip idle float. Or apply idle to `.stage` — that moves everything, subtle and fine.

Actually let's apply the float to `.stage` with a very subtle translateY. But then the punch animation on the button is separate — fine.

Hmm, `.stage` floating would move the caption too — that's fine, subtle.

Actually, better idea for first paint: have the heart gently beat (pulse) at idle. That's charming and doesn't conflict with transform... well it does use transform on the heart. And the pop animation on check overrides it. Since animations override, when checked the pop animation replaces the beat. When unchecked, the beat resumes. That works!

```css
.heart{ animation: beat 2.4s ease-in-out infinite; }
@keyframes beat{ 0%,100%{transform:scale(1)} 12%{transform:scale(1.09)} 24%{transform:scale(1)} 36%{transform:scale(1.06)} 48%{transform:scale(1)} }
```

And on checked: `animation: heartPop .9s ... both;` — overrides. On uncheck, beat resumes from 0. 

But wait, `animation-fill-mode: both` on heartPop keeps final scale 1.18. Good.

And the transition on transform becomes irrelevant. Fine.

Now, the heart filter transition from grayscale to full color — good.

Let me now write the final code.

Also `aria` for accessibility: label with `for`, input visually hidden but focusable.

```css
.like-input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  margin:0;
  pointer-events:none;
}
```

Hmm, if pointer-events none and opacity 0 it's still focusable via Tab. Good. But it must not be `display:none` (that would break focus). Use the above.

Wait — but the input is a sibling inside `.stage` which is a flex container. With `position:absolute` it's out of flow. Good.

Focus ring:

```css
.like-input:focus-visible ~ .like-btn{
  box-shadow: ..., 0 0 0 4px rgba(124,240,255,.55);
}
```

Let me just add an outline-like ring via box-shadow.

Actually simpler: `.like-input:focus-visible ~ .like-btn { outline: 3px solid #7cf0ff; outline-offset: 6px; }`.

Good.

Now writing everything out. Let me be careful with the mask syntax for rays (need -webkit- prefix for older Chrome; modern Chrome supports `mask`).

Let me write final HTML.

Also body overflow hidden — but on 375px, the stage content should fit. Button max 150px, caption ~19px, hint ~13px. Total height ~ 150+34+27+... fine.

Width: caption "Liked · 1,285" at 19px ≈ 130px. Fine.

Let me write.

For the counter roll, I'll use:

```html
<span class="counter">
  <span class="ccol">
    <span>1,284</span>
    <span>1,285</span>
  </span>
</span>
```

```css
.counter{ display:inline-grid; overflow:hidden; height:1.4em; font-variant-numeric: tabular-nums; }
.ccol{ display:block; transition: transform .5s cubic-bezier(.2,1.5,.4,1); }
.ccol > span{ display:block; height:1.4em; line-height:1.4em; }
.like-input:checked ~ .caption .ccol{ transform: translateY(-1.4em); }
```

Hmm: `display:inline-grid` with `overflow:hidden` and height 1.4em. The grid item `.ccol` is a block with two spans. Should work.

Actually wait, `inline-grid` items — `.ccol` is a single grid item, auto-placed. Height of grid row would be the content height (2.8em), but the container height is fixed at 1.4em with overflow hidden. Good.

Same for `.word`.

Now colors: unchecked word "Like" in #9aa3c7; checked shows "Liked" in pink.

The `.wcol > span:nth-child(2)` gets color #ff5c8d.

Let's write it all now.

One concern: `transition` on `.wcol` transform — when the page loads unchecked, no transition. Good.

Let me write the final file.

Also add a `title` in the middle? No.

Final detail: the flash element — `position: fixed; inset: 0; z-index: 9999;` but pointer-events none so clicks pass through.

Also on check, maybe a subtle background hue shift on body? Can't select body from input. Could add a full-screen tint element. The flash handles it.

Writing now.

Also I want the whole stage to shake slightly on like. Add:

```css
.like-input:checked ~ .caption { animation: capShake .5s ...; }
```

Meh, skip. Actually let's add a tiny shake to the caption. Nah.

Let me instead ensure the burst is big and crazy enough. Also add a second wave of "sparkle" dots.

OK writing.

Actually one more consideration: `.p i` `--dl` default. I'll set `--dl:0s` in `.p i` rule.

Let me write the HTML particle markup compactly.

```html
<span class="burst" aria-hidden="true">
  <span class="p" style="--a:0deg"><i style="--d:138px;--c:#ff2d6f;--sz:11px"></i></span>
  <span class="p" style="--a:15deg"><i class="sq" style="--d:96px;--c:#ffd166;--sz:9px;--dl:.03s"></i></span>
  <span class="p" style="--a:30deg"><i style="--d:120px;--c:#7cf0ff;--sz:10px;--dl:.01s"></i></span>
  <span class="p" style="--a:45deg"><i class="st" style="--d:84px;--c:#b892ff;--sz:14px;--dl:.05s"></i></span>
  <span class="p" style="--a:60deg"><i style="--d:145px;--c:#ff6b9d;--sz:12px;--dl:.02s"></i></span>
  <span class="p" style="--a:75deg"><i class="sq" style="--d:100px;--c:#6ee7b7;--sz:9px;--dl:.04s"></i></span>
  <span class="p" style="--a:90deg"><i style="--d:132px;--c:#ffd166;--sz:10px"></i></span>
  <span class="p" style="--a:105deg"><i class="st" style="--d:88px;--c:#ff2d6f;--sz:13px;--dl:.06s"></i></span>
  <span class="p" style="--a:120deg"><i style="--d:126px;--c:#b892ff;--sz:11px;--dl:.02s"></i></span>
  <span class="p" style="--a:135deg"><i class="sq" style="--d:150px;--c:#7cf0ff;--sz:9px;--dl:.01s"></i></span>
  <span class="p" style="--a:150deg"><i style="--d:96px;--c:#ff8a3d;--sz:10px;--dl:.04s"></i></span>
  <span class="p" style="--a:165deg"><i style="--d:118px;--c:#ff2d6f;--sz:10px;--dl:.03s"></i></span>
  <span class="p" style="--a:180deg"><i class="st" style="--d:140px;--c:#ffd166;--sz:14px"></i></span>
  <span class="p" style="--a:195deg"><i style="--d:92px;--c:#6ee7b7;--sz:8px;--dl:.05s"></i></span>
  <span class="p" style="--a:210deg"><i class="sq" style="--d:128px;--c:#ff6b9d;--sz:10px;--dl:.02s"></i></span>
  <span class="p" style="--a:225deg"><i style="--d:104px;--c:#7cf0ff;--sz:9px;--dl:.01s"></i></span>
  <span class="p" style="--a:240deg"><i style="--d:148px;--c:#b892ff;--sz:11px;--dl:.03s"></i></span>
  <span class="p" style="--a:255deg"><i class="st" style="--d:86px;--c:#ff2d6f;--sz:12px;--dl:.06s"></i></span>
  <span class="p" style="--a:270deg"><i style="--d:136px;--c:#ffd166;--sz:10px"></i></span>
  <span class="p" style="--a:285deg"><i class="sq" style="--d:100px;--c:#6ee7b7;--sz:9px;--dl:.04s"></i></span>
  <span class="p" style="--a:300deg"><i style="--d:122px;--c:#ff8a3d;--sz:11px;--dl:.02s"></i></span>
  <span class="p" style="--a:315deg"><i style="--d:146px;--c:#ff2d6f;--sz:9px;--dl:.03s"></i></span>
  <span class="p" style="--a:330deg"><i class="st" style="--d:94px;--c:#7cf0ff;--sz:12px;--dl:.05s"></i></span>
  <span class="p" style="--a:345deg"><i style="--d:130px;--c:#ff6b9d;--sz:10px;--dl:.01s"></i></span>

  <!-- inner fast ring -->
  <span class="p" style="--a:22deg"><i class="fast" style="--d:54px;--c:#ffffff;--sz:6px"></i></span>
  ...
</span>
```

For the inner ring I'll add class `fast` with shorter duration via `--dur`.

Hmm, `.like-input:checked ~ .like-btn .p i { animation: fly var(--dur,.85s) ... }` — I can set `--dur` per element.

OK. Let me finalize.

Also need `--dl` default `0s` on `i`.

Now writing the whole thing for real.

Let me double check the `fly` keyframes with `rotate(var(--rot, 180deg))` — the `i` element with clip-path star rotating is fine.

But note: `transform: translateX(...) scale(...) rotate(...)`. For the star, rotation is fine.

Final code:

```css
@keyframes fly {
  0%   { opacity: 1; transform: translateX(14px) scale(1) rotate(0deg); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--d,100px)) scale(.1) rotate(var(--rot,200deg)); }
}
```

Hmm, opacity at 70% without transform — keyframes need to interpolate; partial keyframes are fine.

Also the initial state before animation: `opacity:0` on `.p i` base. Good, so particles are invisible until checked.

But when unchecked after being checked, the animation is removed and opacity returns to 0. Fine.

Now `animation-fill-mode: forwards` keeps the final state (opacity 0). Good.

Let's write it.

I also want the button's `:active` press feedback — a quick squash. Since `.like-btn` has `transition` on transform and there's no idle animation on it, `:active { transform: scale(.93) }` works.

Let me now produce the file.

Double-check the flash: `.flash` is a `div` inside `.stage`; `position: fixed; inset:0` — it will cover the viewport. z-index high. pointer-events none. Good.

One thing: since `.flash` is `position: fixed` inside `.stage` which has no transform... fine.

Alright, writing.

Also add `@media (prefers-reduced-motion: reduce)` to tone down? Optional, skip for brevity... actually it's good practice but adds length. I'll skip.

Let me write the final answer.

Actually one more: I should double-check `overflow:hidden` on `.word` combined with `display:inline-grid` — for the width to be correct. `inline-grid` shrink-to-fit: width = max-content of the column. The column contains block spans; their widths are max of both texts. Yes.

Height 1.4em fixed, overflow hidden. Content overflows vertically → hidden. Good.

But there's a subtlety: baseline alignment for inline-grid — the default `vertical-align: baseline` might cause slight misalignment with the "·" dot. I'll set `vertical-align: bottom` on `.word` and `.counter` and use flex align-items center on `.caption`. With flex, `vertical-align` is irrelevant. Good — flex items align by `align-items: center`. Fine.

Hmm, with flex `align-items:center`, an item of height 1.4em containing text centered — the text lines are at 1.4em line-height, so the visible text should be centered within the box. Good.

Now, `.caption` — I want "Like · 1,284" with the dot muted.

Let me write it.

Final check on the counter transition duration: 0.5s with a bouncy cubic-bezier(.2,1.5,.4,1) — overshoot on translateY of a masked column could show a gap. With overshoot beyond -1.4em, it would go slightly past and reveal... the second span moving up too far would show empty space below. Since `overflow:hidden` and the column has exactly 2 spans, going beyond -1.4em shows nothing below the second span. That would be a visible glitch.

Use `cubic-bezier(.2,.9,.3,1.15)` — slight overshoot is still risky. Let's use a non-overshooting ease: `cubic-bezier(.22,1,.36,1)` (easeOutQuint-ish). Safe.

Same for the word.

OK, writing now.

Let me write the complete file.

Additional: add `will-change` maybe not needed.

Write it.

For the heart path, use:
`M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z`

Good.

Now write.

Let me count the code and produce.

One more thought on `--size`: I'll set on `.stage` `--size: clamp(100px, 28vw, 148px);`.

The `.heart` width: `calc(var(--size) * 0.46)`.

OK.

Writing the final.