MiniMax M3.1 Flash

The user wants a "like" button in pure CSS, no JavaScript, with a crazy animation when clicked. I need to create a self-contained HTML file with inline CSS and no JavaScript.

Key techniques for CSS-only click animation:
1. Use a hidden checkbox (`<input type="checkbox">`) + label to toggle state.
2. Use `:checked` selector to trigger animations.
3. Use sibling selectors so the checkbox state affects other elements.

Let me design something impressive:
- A big heart / like button in the center
- On click: heart bursts, confetti/particles explode, rings pulse, background changes, screen shake, lightning/flash, floating hearts, text "Liked!" appears, button morphs, stars spin, etc.

Everything must be visible on first paint — the static state should look nice. The animation happens on click.

Let me build:

Structure:
```html
<div class="stage">
  <input type="checkbox" id="like" class="sr-only">
  <label class="like-btn" for="like">
    <span class="burst"></span>
    <span class="heart">...</span>
  </label>
  <div class="fx">... particles ...</div>
  <div class="counter">...</div>
</div>
```

Approach: The checkbox is hidden but focusable; label for it. When checked, animations on `.burst`, `.particle`, etc.

For "crazy" animation, let's include:
- Heart button scales, rotates, glows
- Multiple expanding rings
- 12-16 particles radiating in random directions with different colors and shapes
- Confetti falling from top
- Floating hearts rising up
- A shockwave
- Background gradient shift + radial rays rotating
- Screen shake using a keyframe on the stage
- Star burst spinning
- Emoji-like symbols? Could use unicode chars like ★ ✦ ♥ ✿ ✷.
- Text "LIKED!" scaling in with rotation and letters bouncing.
- Button becomes "unlike" style.

Also re-click to toggle back — when unchecked, reverse effect maybe simple.

Let me write the CSS carefully.

Layout: full page with dark gradient background, subtle animated stars in background (CSS only, always running — visible first paint). Center card with the like button, title "Pure CSS Like", subtitle.

Let me create the particle system. Each particle is a span with CSS custom props `--tx`, `--ty`, `--rot`, `--hue`. Use `nth-child` to assign values.

Burst animation:
```css
@keyframes burst {
  0% { transform: translate(-50%,-50%) scale(0) rotate(0); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity: 0; }
}
```
Position particles absolute at center of button: `left:50%; top:50%`.

Rings: 3 spans expanding with different delays.

Shockwave: a big circle with blur.

Background rays: a conic-gradient element behind the button that rotates and scales when checked.

Screen shake: apply to `.stage` or `.card`.

Floating hearts rising: several hearts with different delays going up and fading.

Confetti: pieces falling from top of the viewport when checked — many spans in a `.confetti` container with animation `fall`.

Text badge "LIKED!" appears above button.

Let's also add a counter that increments? Pure CSS counter can't increment easily based on checkbox... Actually you can use CSS counters with `:checked`? Not really for incrementing. Could use two counters with `counter-reset` toggled... Hmm, a trick: use `counter-reset: likes 0` on root and on checked set `counter-reset: likes 1` then display `content: counter(likes)`. That works! Since the counter-reset changes, the content changes. Let's do that.

Actually counters: define `.counter { counter-reset: likes 0; }` and `.counter b::after { content: counter(likes); }` — but the counter-reset must be on an ancestor of the element using counter(). If `.counter` is the same element as the one that has `::after` content — counter-reset on the element creates a counter scoped to that element and its descendants/following siblings. The ::after pseudo-element is a child of the element, so it should see the counter. Let's set:

```css
.likes-count { counter-reset: likes 0; }
.likes-count .num::after { content: counter(likes); }
```
When checked: `.likes-count { counter-reset: likes 1; }` — but we need the checked state selector to reach this element. If the checkbox is a sibling before it, `.app:has(#like:checked) .likes-count` — `:has` is supported in latest Chrome. Alternatively make the checkbox a direct preceding sibling of everything so `#like:checked ~ .likes-count`. Let's structure:

```html
<div class="app">
  <input id="like" type="checkbox">
  <div class="bg">...</div>
  <div class="card">...</div>
</div>
```
Then `#like:checked ~ .card` works since input is a child of .app and card is a following sibling. Good.

But nested elements inside card need `#like:checked ~ .card .thing`. Fine.

Let's also handle accessibility: label wraps the visual button and has text.

Focus visible: `#like:focus-visible ~ .card .like-btn` outline.

Let's write the markup:

```html
<div class="app">
  <input type="checkbox" id="like" class="toggle">
  <div class="aurora"></div>
  <div class="rays"></div>
  <div class="stars">... 20 spans ...</div>
  <div class="confetti" aria-hidden="true">... 24 spans ...</div>
  <main class="card">
    <p class="eyebrow">Pure CSS · No JavaScript</p>
    <h1>Like <span class="title-heart">♥</span></h1>
    <p class="sub">Tap the button. Nothing but CSS powers this.</p>
    <div class="btn-wrap">
      <label class="like-btn" for="like" tabindex="0">
        <span class="ring r1"></span>
        <span class="ring r2"></span>
        <span class="ring r3"></span>
        <span class="shock"></span>
        <span class="spark s1"></span>... 
        <span class="heart">♥</span>
      </label>
    </div>
    <div class="badge">LIKED!</div>
    <div class="like-meta">
      <span class="likes-count"><span class="num"></span></span> likes
    </div>
  </main>
  <div class="floaters"> hearts rising </div>
</div>
```

Hmm, the label needs pointer-events on the heart etc. Use `label { cursor:pointer }`.

For the "click" to work, label with `for` triggers the checkbox. Good.

The badge "LIKED!" - place above button inside btn-wrap, animated when checked.

Let's carefully craft keyframes.

Button base:
```css
.like-btn {
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ff7a9c, #ff2d55 45%, #b3005b);
  box-shadow: 0 18px 40px -12px rgba(255,45,85,.6), inset 0 -8px 20px rgba(0,0,0,.25), inset 0 8px 20px rgba(255,255,255,.25);
  display:grid; place-items:center;
  position:relative;
  transition: transform .3s cubic-bezier(.2,1.4,.4,1), box-shadow .3s;
}
```
Heart as SVG inline? We can use inline SVG (allowed — it's inline, not external). An SVG heart gives a nicer look and allows fill animation. Let's embed an inline SVG heart path with a gradient. But the "no images" rule — inline SVG in HTML is fine, it's not an external file. I'll use inline SVG for the heart for crispness.

Actually a unicode ♥ with text-shadow also works. Let's do inline SVG for the heart shape, plus maybe a white checkmark? Keep the heart.

I'll do:
```html
<span class="heart">
  <svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
    <defs>
      <linearGradient id="hg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#ffe3ea"/>
      </linearGradient>
    </defs>
    <path d="M12 21s-7.5-4.7-9.6-9.2C.7 8.2 2.2 4.6 5.7 4c2-.4 3.8.6 4.9 2.2l.5.9.5-.9c1.1-1.6 2.9-2.6 4.9-2.2 3.5.6 5 4.2 3.3 7.8C19.5 16.3 12 21 12 21z" fill="url(#hg)"/>
  </svg>
</span>
```
Hmm, let me use the standard material 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` with fill white.

Then the "like" state: button changes to a deeper gradient / white with red heart, with glow.

Checked animations:
```css
#like:checked ~ .card .like-btn {
  animation: pop .7s cubic-bezier(.2,1.6,.3,1);
}
@keyframes pop {
  0%{transform:scale(1) rotate(0)}
  25%{transform:scale(.82) rotate(-8deg)}
  50%{transform:scale(1.22) rotate(6deg)}
  70%{transform:scale(.95) rotate(-3deg)}
  100%{transform:scale(1.12) rotate(0)}
}
```
Hmm, on uncheck it snaps back. Add transition for uncheck.

Burst particles: 14 spans with `--a` angle and use trig? Can't do trig in CSS; use predefined translate values via nth-child. Let's define particle positions with `--x`, `--y` values.

I'll write 16 particles manually with nth-child rules giving `--x`/`--y` in px and color, shape.

Alternatively use a single keyframe with `rotate` on a container and particles placed along a ring — that gives symmetric radial burst elegantly: each particle positioned at translateX(70px) and container rotates? But then each particle flies outward in the rotated direction only if the whole ring rotates — not radial from center.

Simplest: define nth-child(1..14) with --x/--y.

Let me list radial directions (approx):
1: (0,-150)
2: (55,-135)
3: (100,-105)
4: (135,-55)
5: (150,0)
6: (135,55)
7: (100,105)
8: (55,135)
9: (0,150)
10: (-55,135)
11: (-100,105)
12: (-135,55)
13: (-150,0)
14: (-135,-55)
15: (-100,-105)
16: (-55,-135)

Colors alternate: #ffd166, #ff4d6d, #4cc9f0, #b892ff, #06d6a0, #ff9f1c.

Shapes: squares, circles, stars (using clip-path), hearts (using ::before? too complex). Use clip-path polygon for star/diamond.

Animation:
```css
.spark {
  position:absolute; left:50%; top:50%; width:12px; height:12px;
  margin:-6px 0 0 -6px; background: var(--c); border-radius:3px;
  opacity:0; transform: translate(0,0) scale(0) rotate(0);
}
#like:checked ~ .card .spark { animation: sparkFly .85s cubic-bezier(.15,.75,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sparkFly {
  0% { opacity:0; transform: translate(0,0) scale(0) rotate(0deg); }
  15% { opacity:1; }
  60% { opacity:1; }
  100% { opacity:0; transform: translate(var(--x),var(--y)) scale(var(--s,1)) rotate(var(--r,240deg)); }
}
```
Need `animation-fill-mode: forwards` and when unchecked they reset (animation removed → back to base opacity 0). Good.

Also gravity effect: add a second translate? Could do with two transforms in keyframes: mid keyframe at 55% translate slightly further then drop. Let's do:
```
0% translate(0,0) scale(0)
20% opacity 1
55% translate(calc(var(--x)*1.15), calc(var(--y)*1.15 - 30px)) scale(1.1) rotate(...)
100% translate(var(--x), calc(var(--y) + 40px)) scale(.3) opacity 0
```
Hmm calc with var multiply works: `calc(var(--x) * 1.15)` valid if --x is a length. Yes.

Rings:
```css
.ring { position:absolute; inset:-10px; border-radius:50%; border:3px solid rgba(255,255,255,.7); opacity:0; }
#like:checked ~ .card .ring { animation: ringOut .8s ease-out forwards; }
.r1 { animation-delay: .05s } .r2 { animation-delay:.15s; } .r3{animation-delay:.25s}
@keyframes ringOut { 0%{transform:scale(.3);opacity:.9;border-width:10px;} 100%{transform:scale(2.2);opacity:0;border-width:1px;} }
```

Shockwave: a big radial-gradient circle scaling.

Badge "LIKED!": 
```css
.badge { position:absolute; top:-...; opacity:0; transform: ...; }
#like:checked ~ .card .badge { animation: badgeIn 1.2s ... forwards; }
@keyframes badgeIn {
 0%{opacity:0;transform:translateY(20px) scale(.4) rotate(-12deg)}
 30%{opacity:1;transform:translateY(-6px) scale(1.15) rotate(4deg)}
 45%{transform:translateY(0) scale(1) rotate(0)}
 80%{opacity:1;transform:translateY(0) scale(1)}
 100%{opacity:0;transform:translateY(-18px) scale(.9)}
}
```
Hmm, but maybe we want "LIKED!" to stay visible while liked. Better: keep a persistent "Liked!" state text change. Let's have two labels: one "Like" and one "Liked" that swap, plus an animated burst badge. I'll make the button caption below change.

Actually, let's design a nice card:

- Eyebrow: "PURE CSS · ZERO JAVASCRIPT"
- H1: "Like button"
- Sub: "One checkbox. A hundred animations. Press it."
- Big heart button
- Under: "Liked by 12,480 people" with counter, and a small "Liked ✓" pill that appears.

Confetti falling: container fixed full-screen top, spans with `--x` left position, `--d` delay, color, width/height, animation `fall 2.5s linear forwards`. Since it's `forwards` and checked triggers, each re-check restarts. But delays need to be reset — animation-delay with negative? When unchecked, animation removed, element returns to base (translateY(-20px)). On re-check, animation runs again from start with delay. Fine.

But confetti falling from top of the page across the whole viewport might look chaotic in a good way. Let's do 20 pieces.

Also a "flash" overlay: white radial flash over the whole screen quickly.

Also screen shake: `.card` animation shake .5s.

Also background color change: `.app` gets a class via sibling selector: `#like:checked ~ .bg` changes gradient — use transition on the background or animate a `filter`. Let's have `.aurora` with animated gradient always running (subtle), and when checked, `.glow` element behind card scales up with red/pink glow.

Also add rotating rays behind the button: conic-gradient with mask; rotate when checked.

Let's also add stars twinkling in background always (visible first paint) — nice.

Also there's a "floaters" of hearts rising from the button when checked: 5 hearts with different delays rising and fading.

Counter: "likes" number changes 12,480 → 12,481? Using CSS counters we can only increment by 1 from 0. Trick: use counter-reset likes 12480 → 12481? counter-reset accepts an integer, so we can do `counter-reset: likes 12480` default and `counter-reset: likes 12481` checked. Then content: counter(likes). Yes! That's valid. Let's display "Liked by 12,480 people" with the number via counter.

Note: counter-reset on an element creates the counter for that element and its descendants and following siblings. Since we set the counter-reset on `.likes-count` and the ::after of a child element uses it — the pseudo element is a descendant, so it should inherit the counter scope. Let's be safe: set counter-reset on `.likes-count` (the element containing the number span) and content on `.likes-count .num::after`.

Actually, does counter-reset on an element apply to its ::after? The pseudo-element ::after is a child box of the element. Per CSS2.1, the scope of a counter starts at the first element that resets it and includes that element's descendants and following siblings and their descendants. So yes, the element itself and its descendants. The ::after is a descendant. Should work.

Let's structure the number: `<span class="likes-count"><span class="num"></span></span>` where `.num::after { content: counter(likes); }`.

Hmm — careful: counter-reset on `.likes-count` then `.num` descendant uses counter. Good.

Now, responsive: at 375px, the card should shrink; font sizes with clamp(). Button size clamp.

No horizontal scrollbar: overflow-x hidden.

Also I should show a hint "Click the heart" so the demo is understandable. And since there's no keyboard requirement, no need for "press key" message, but clicking works via label.

Let me also add a secondary smaller button? Keep it focused.

Let's also make the button show a "burst" of hearts emoji? Unicode ♥ characters for floating hearts — fine.

Let me write the final code.

Detailed CSS:

```css
:root{
  --pink:#ff2d55; --pink2:#ff6fa5; --ink:#0b0610;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#07040d; color:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
  display:grid; place-items:center;
}
```

Background: fixed layers:
```css
.bg { position:fixed; inset:0; z-index:0; background: radial-gradient(1200px 700px at 50% 20%, #2a0f3d 0%, #120722 45%, #06030b 100%); }
```
Aurora blobs with blur and slow drift animation.

Stars: small dots with twinkle.

Card:
```css
.card{ position:relative; z-index:3; width:min(92vw, 420px); padding: clamp(24px,5vw,40px); border-radius:28px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.15); text-align:center; }
```

Rays behind button:
```css
.rays{ position:absolute; left:50%; top:50%; width:520px;height:520px; transform:translate(-50%,-50%) scale(.2); opacity:0; background: conic-gradient(from 0deg, rgba(255,45,85,.0) 0deg 8deg, rgba(255,45,85,.35) 8deg 16deg, transparent 16deg 30deg, ...); mask: radial-gradient(circle, #000 10%, transparent 68%); }
```
Simpler: repeating-conic-gradient:
```css
background: repeating-conic-gradient(from 0deg, rgba(255,120,170,.30) 0deg 6deg, transparent 6deg 18deg);
```
with mask radial fade. When checked, animate rotate + scale to 1 and fade.

Placement: rays inside .btn-wrap absolute centered on the heart, z-index below button.

Now let's write everything out concretely.

HTML body:

```html
<div class="app">
  <input class="toggle" type="checkbox" id="like" aria-label="Like this post">
  <div class="bg" aria-hidden="true"></div>
  <div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
  <div class="stars" aria-hidden="true"> ... 24 i elements ... </div>
  <div class="flash" aria-hidden="true"></div>
  <div class="confetti" aria-hidden="true"> ... 26 b elements ... </div>

  <main class="card">
    <p class="eyebrow"><span class="dot"></span> pure css · zero javascript</p>
    <h1>Like it <span class="tw">loud</span></h1>
    <p class="sub">A single hidden checkbox drives every explosion on this page. No scripts. No libraries. Just CSS.</p>

    <div class="stage">
      <div class="rays" aria-hidden="true"></div>
      <label class="like-btn" for="like">
        <span class="glowdisc" aria-hidden="true"></span>
        <span class="ring r1"></span>
        ...
        <span class="shock"></span>
        <span class="spark" style="--x:..."></span> x16
        <span class="heartwrap">
           <svg ...>
        </span>
        <span class="check">✓</span>
      </label>
      <div class="burst-label">LIKED!</div>
    </div>

    <div class="meta">
      <div class="likes-count"><span class="num"></span> likes</div>
      <div class="state-pill"><span class="state-off">not liked</span><span class="state-on">liked</span></div>
    </div>
    <p class="hint">Click the heart — click again to undo.</p>
  </main>
</div>
```

For state pill: `.state-on { opacity:0 }`, checked → opacity 1 with transition; `.state-off` opacity 1 → 0.

Spark elements inside label but the label's click toggles the checkbox; fine.

Note: the spark elements inside the label — label click triggers input; clicking label works.

But careful: the label wraps the visual content including SVG; clicking anywhere on it toggles. Good.

Focus styles: `.toggle { position:absolute; opacity:0; width:1px;height:1px; }` but keep focusability. Use `clip` approach. Then `#like:focus-visible ~ .card .like-btn { outline: 3px solid #ffd166; outline-offset:6px; }`.

Now keyframes:

pop:
```css
@keyframes pop{
 0%{transform:scale(1)}
 22%{transform:scale(.78) rotate(-7deg)}
 45%{transform:scale(1.28) rotate(5deg)}
 62%{transform:scale(.92) rotate(-3deg)}
 80%{transform:scale(1.08) rotate(1deg)}
 100%{transform:scale(1)}
}
```
When checked we also want the button to remain in a "liked" state (different color) — that's a transition on background/box-shadow, not the pop animation. But the pop animation's final transform scale(1) overrides; fine.

For liked state colors:
```css
.like-btn{ background: radial-gradient(circle at 32% 26%, #ff9ab8, #ff3d6e 46%, #a70b4d); }
#like:checked ~ .card .like-btn{ background: radial-gradient(circle at 32% 26%, #fff 0%, #ffe1ea 35%, #ff5c88 100%); box-shadow: 0 0 0 6px rgba(255,45,85,.18), 0 22px 60px -14px rgba(255,45,85,.75), inset 0 -10px 24px rgba(120,0,40,.25); }
```
Heart SVG fill: change from white to red gradient when checked via CSS fill on the path: `#like:checked ~ .card .heartwrap path { fill: url(#hgrad2) }` — but gradients with duplicate ids... simpler: heart path uses `fill: currentColor`? Let's make the heart path fill white by default and red when liked:

```html
<svg viewBox="0 0 24 24"><path d="..."/></svg>
```
CSS: `.heartwrap svg path{ fill:#fff; transition: fill .3s; }` and checked → `fill:#ff2d55`. With the liked button being light, a red heart reads well. Good.

Checkmark: a small circle badge at bottom-right of button with ✓, appears when liked with pop animation.

Floaters (hearts rising): place inside `.stage` as absolutely positioned hearts:
```css
.floater{ position:absolute; left:50%; top:50%; color:#ff6f9c; opacity:0; font-size:22px; }
#like:checked ~ .card .floater{ animation: rise 1.6s ease-out forwards; animation-delay: var(--d); }
@keyframes rise{ 0%{opacity:0;transform:translate(-50%,0) scale(.4)} 20%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--dx)), -180px) scale(1.1) rotate(var(--rot))} }
```
8 floaters with different --dx and --d.

Confetti at page level: pieces falling from top:
```css
.confetti{position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden;}
.confetti i{ position:absolute; top:-30px; left:var(--x); width:var(--w); height:var(--h); background:var(--c); opacity:0; border-radius:2px; }
#like:checked ~ .confetti i{ animation: fall 2.6s cubic-bezier(.3,.6,.6,1) forwards; animation-delay: var(--d); }
@keyframes fall{ 0%{opacity:0;transform:translateY(-40px) rotate(0)} 10%{opacity:1} 100%{opacity:0;transform:translateY(105vh) rotate(var(--r))} }
```
Left positions in vw: e.g. 4%, 9%, ... but no horizontal scrollbar — confetti inside fixed container with overflow hidden. Fine.

Flash overlay:
```css
.flash{position:fixed; inset:0; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), rgba(255,120,170,.35) 40%, transparent 70%); opacity:0; pointer-events:none; z-index:4;}
#like:checked ~ .flash{ animation: flash .55s ease-out forwards; }
@keyframes flash{0%{opacity:0;transform:scale(.2)}20%{opacity:.85}100%{opacity:0;transform:scale(1.6)}}
```

Screen shake: apply to `.card`:
```css
#like:checked ~ .card{ animation: shake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{ 10%,90%{transform:translateX(-3px)} 20%,80%{transform:translateX(5px)} 30%,50%,70%{transform:translateX(-9px)} 40%,60%{transform:translateX(9px)} }
```
Careful: `.card` has transform none normally; ok.

Hmm, but the shake animation on .card ends and returns to normal. Good.

Also "crazy": add a spinning mini "orbit" of emojis? Let's add a rotating ring of small hearts/emoji around the button that appears when liked and spins:
```css
.orbit{ position:absolute; inset:-40px; animation: spin 6s linear infinite; opacity:0; transition:opacity .4s; }
#like:checked ~ .card .orbit{ opacity:1; animation: spin 2.2s linear infinite, orbitIn .5s ease-out; }
```
But combining two animations both affecting transform conflicts. Use a wrapper: outer `.orbit` spins, inner `.orbit-ring` does the scale-in. Let's do:
```html
<div class="orbit"><span class="orbit-in"><i>♥</i><i>★</i><i>♥</i>...</span></div>
```
Hmm complexity. Simpler: the orbit container has `animation: spin 8s linear infinite` always (subtle), and opacity transitions to 1 when liked; scale handled by inner element transition on transform. Let's do outer `.orbit` spin + inner `.orbit-in` scale transition.

Actually simplest: `.orbit` always spinning slowly with opacity .25; when liked opacity 1 and the spin speeds up via changing animation-duration. Changing animation-duration restarts? It doesn't restart, it changes timing. Fine.

Hmm but we want the orbit to only appear on like maybe. Let's keep always subtle spinning orbit of tiny symbols around the button — adds visual interest on first paint. When liked it becomes bright and fast.

I'll implement: `.orbit { position:absolute; inset:-46px; border-radius:50%; animation: spin 14s linear infinite; }` with `.orbit i` absolutely placed at angles using transform: rotate(angle) translate(46px) rotate(-angle). And a dashed ring border.

Let me place orbit outside the label to avoid click issues — but it should not block clicks: pointer-events:none.

The orbit is inside `.stage` centered on the button.

Let me now write the code fully. Also ensure everything visible on first paint: card + button + orbit + stars + subtle aurora.

Also add a footer note "Built with a single <input type=checkbox> and ~400 lines of CSS." Nice.

Let me write out the spark nth-child variables. I'll write inline style attributes for --x/--y/--c/--d to reduce CSS size, but inline styles are fine (not JS).

Actually "pure CSS" – inline custom properties in style attributes are still CSS. Fine. But to be safe with "pure CSS", it's all CSS anyway.

Let me write sparks as:
```html
<i class="spark" style="--x:-14px;--y:-158px;--c:#ffd166;--s:.9;--r:220deg"></i>
```
16 of them.

Ring spans: r1 r2 r3 with delays.

Now, the shockwave:
```css
.shock{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,90,140,.35) 45%, transparent 70%); opacity:0; }
#like:checked ~ .card .shock{ animation: shock .7s ease-out forwards; }
@keyframes shock{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}
```

And a "wave" ring in the card? Enough.

Also the button has an inner "pulse" ring that continuously pulses when liked:
```css
#like:checked ~ .card .like-btn::after{ content:''; position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(255,90,140,.5); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse{ 0%{transform:scale(.9);opacity:.8} 100%{transform:scale(1.35);opacity:0} }
```
Careful: the label already may have ::after? We use ::before for something else. Fine.

Now let me also handle the "state-pill" transition.

Counters — I'll write:

```css
.likes-count{ counter-reset: likes 12480; }
.likes-count .num::after{ content: counter(likes); }
#like:checked ~ .card .likes-count{ counter-reset: likes 12481; }
```
Wait — the checked selector targets `.likes-count` inside `.card`. Yes since input is sibling of .card.

Note: the number "12,480" has a comma; with counter we get 12481 without comma. Could display "12,481" by splitting? We can use two counters: thousands and rest. Let's do:
```css
.likes-count{ counter-reset: lk 12 lkr 480; }
```
Hmm, counter-reset can reset multiple counters. Then `.num::after{content: counter(lk) "," counter(lkr)}` → "12,480". Checked: `counter-reset: lk 12 lkr 481;` → "12,481". Nice.

But careful, `counter(lkr)` pads to 3 digits? No, default decimal without padding → 480, 481. Good.

Let's finalize. Also add a subtle "typing" hint? Not needed.

Now write the complete HTML.

One more consideration: the iframe may be at 1280×800 and 375px wide. The card width min(92vw, 420px) works.

Let me make sure the aurora blobs are behind the card and animated slowly.

Also, no horizontal scroll: confetti with left positions up to 96% and small width — fine. The rays element is 520px wide, centered, but positioned absolute within .stage — the stage is relatively positioned inside the card, and overflow visible could cause horizontal overflow on small screens. Set `.stage{ overflow: visible }` but ensure body overflow-x hidden. We have `body{overflow-x:hidden}`. Good. Actually better to scale rays on small screens: width: clamp(320px, 90vw, 560px). Use `width:min(560px, 130vw)`. Hmm, let's set `.rays{width:520px;height:520px}` and on mobile media query reduce to 340px.

The orbit inset -46px around a 132px button → 224px, fine.

Let me write the code now.

Also add `-webkit-tap-highlight-color: transparent`.

Final HTML structure. Let me write it.

For the SVG heart, I'll include the path with `fill` controlled by CSS.

Additionally, maybe add a small "bounce" emoji burst using unicode symbols like ✦ ✧ ★ ⚡.

Let me write the CSS for spark shapes: default square rotated 45deg? Use `--shape` variations via nth-child: circle for some, star via clip-path for others. I'll add classes: `.spark.sq`, `.spark.circle`, `.spark.star`.

clip-path star polygon:
`polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)`

Good.

Now write it all. Also ensure the total animation is "crazy" but not annoying.

Let me write the code.

Also add `user-select:none` on label.

Time to produce final code.

One more: "Games must start in a self-playing demo mode" — not a game, so no need. But maybe add an automatic demo pulse? Could add a subtle auto pulse on the heart to attract clicks: a ring that pulses periodically even before clicking. That's nice: `@keyframes idle` on `.like-btn::before`? We already use ::after for pulse when checked. Use ::before for idle halo.

```css
.like-btn::before{ content:''; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,120,170,.35); animation: idlePulse 2.6s ease-out infinite; }
@keyframes idlePulse{ 0%{transform:scale(.95);opacity:.0} 30%{opacity:.7} 100%{transform:scale(1.4);opacity:0} }
```
Hmm when checked we also have ::after pulse; two rings is fine.

Also add a hint arrow "← click the heart"? Keep the hint text.

Let me write the final answer.

I should double check `counter-reset` with the `~` selector: `#like:checked ~ .card .likes-count` — .likes-count is a descendant of .card, so this works.

Also `.likes-count` element itself resets counter; its descendant `.num::after` uses it. But the pseudo-element ::after of `.num` — content counter(lk). The counter scope: `.likes-count` resets it; `.num` is a descendant; its ::after is descendant of .num. Yes.

Potential issue: counters reset on .likes-count create counters scoped to that element and its descendants — good.

Now, writing out the confetti pieces: 26 `<i>` elements with inline style --x (vw %), --w, --h, --c, --d, --r.

Let me generate them with varied values manually.

I'll write the code now, carefully.

Also add `@media (prefers-reduced-motion: reduce)` to shorten animations — optional but nice. Might complicate; I'll add a simple rule disabling long animations.

Final code below.