Mistral Large 4

The user wants a "like" button in pure CSS, no JavaScript, that does a crazy animation when clicked. Since it's pure CSS with no JS, the checkbox hack (:checked) is the way to go. I need to make it look amazing in a 1280×800 viewport, adapt to 375px, no horizontal scrollbar, and something meaningful visible on first paint.

Let me design a crazy like button:
- A heart (SVG inline or CSS-drawn) inside a button-like circle
- On :checked, trigger a burst of particles, ring waves, heart pop with springy keyframes, floating "+1" maybe, confetti-like hearts flying out
- Use CSS custom properties for delays
- Multiple particle elements with different directions using CSS variables (--tx, --ty, --rot, --d for delay, --s for scale)
- Ring/pulse waves expanding
- Heart does a "pop" scale animation with overshoot
- Maybe background fill sweep
- Count number could increment visually? Without JS we can't count, but we can show "+1" floating up, or swap the count text using two stacked spans cross-fading. E.g., count "1,234" -> "1,235" via opacity swap. That's a nice touch: two absolutely positioned labels, one fades out/up, other fades in.
- Also a "liked" state color change (gradient pink/red)
- Add subtle idle animation: gentle floating, shine sweep, heartbeat pulse to invite clicking
- Maybe sparkles twinkling around
- Click again to unlike (checkbox toggles) - animation reverses? With CSS we can do :checked for liked state and not(:checked) for unliked; the burst animation only plays on check via animation on :checked selector (animation runs when the selector starts matching). Actually when unchecked, animation resets. We can add a reverse-ish animation on uncheck too.

Pure CSS click: use a hidden checkbox + label. The label is the button. `:checked` state on checkbox styles the label via sibling selector: `#like:checked ~ .like-btn ...` or use :has() — modern Chrome supports :has(). But sibling selector is safer. Structure:

```html
<input type="checkbox" id="like" class="like-checkbox">
<label for="like" class="like-btn"> ... </label>
```

Then `.like-checkbox:checked + .like-btn .heart { animation: ... }` etc.

Particles: generate maybe 14-18 spans inside label with nth-child variations setting --tx/--ty. Each particle is a small shape (heart via clip-path or a rotated square/diamond, circles). Use clip-path: path() for tiny hearts? clip-path path uses px coordinates — could work with fixed size. Simpler: use small hearts via CSS mask? No external images. Could use an inline SVG background via data URI — that's allowed? "No external files, images" — data URI is inline, but to be safe, I'll draw hearts with CSS: a heart shape can be made with two circles + rotated square, but for tiny particles a rotated square (diamond) or circle is fine. Or use the "♥" text character? Text characters are fine (not an image/font file — system font). Using ♥ character in spans is pure CSS-ish (it's text). That's acceptable and looks great: tiny hearts flying out in various colors.

Main heart: use an SVG inline element (inline SVG is fine, it's markup not external file). Or CSS heart: 
```css
.heart { position:relative; width:...; }
.heart::before, .heart::after { circles }
```
Classic CSS heart: a rotated square with two circles. That works and is "pure CSS". Let me do the big heart as pure CSS shape:

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

Wait standard: element rotated -45deg, ::before at left:-50%? Let me recall: 
```css
.heart { transform: rotate(-45deg); width: W; height: W; background: color; }
.heart::before { content:""; position:absolute; top:0; left:-50%; width:100%; height:100%; border-radius:50%; background: color; }
.heart::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:100%; border-radius:50%; background: color; }
```
Yes that's the classic. The notch is at top-right after rotation... Actually with rotate(-45deg), the square's corner points down. The circles at top and left of the unrotated square become the two lobes. The top-right corner of the rotated square points down = bottom tip. Yes correct.

But animating transform on .heart (scale pop) conflicts with rotate(-45deg). Solution: wrap: outer .heart-scale handles scale animation, inner .heart-shape has the rotate. Or include rotate in keyframes: `transform: rotate(-45deg) scale(...)`. That works — keyframes can specify full transform.

Actually for the pop animation on the shape itself, keyframes: 
```css
@keyframes heart-pop {
  0% { transform: rotate(-45deg) scale(0.6); }
  40% { transform: rotate(-45deg) scale(1.35); }
  60% { transform: rotate(-45deg) scale(0.9); }
  80% { transform: rotate(-45deg) scale(1.1); }
  100% { transform: rotate(-45deg) scale(1); }
}
```

But when unchecked again, we want maybe a small "unpop". Fine.

Particles burst: on :checked, each particle span animates from center: 
```css
@keyframes burst {
  0% { transform: translate(-50%,-50%) scale(0.4) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s)) rotate(var(--r)); opacity: 0; }
}
```
Set per nth-child: --tx: 120px; --ty: -80px; etc. Animation with delay var(--d). Fill mode both.

Rings: two or three expanding circles:
```css
@keyframes ring { 0% { transform: scale(0.4); opacity:.8 } 100% { transform: scale(2.6); opacity: 0 } }
```

Background fill of the button: a circle that scales up from behind heart when checked: `.like-btn::before` a gradient circle scaling from 0 to 1 with a springy cubic-bezier.

Count swap: 
```html
<span class="count"><span class="n n-a">1,247</span><span class="n n-b">1,248</span></span>
```
On checked: n-a slides up & fades, n-b slides in from below. 

Floating "+1": a span that floats up and fades on check.

Also add shake of the whole button on click: `@keyframes shake` small rotate/translate jitter on the button when checked — but that would loop? animation runs once (forwards). Good.

Idle state: heart gently pulsing (heartbeat) to invite click, button has soft shadow, maybe a shine sweep across periodically. Also tiny sparkles around that twinkle continuously.

Also maybe a "ripple" on active: `label:active` scale down slightly.

Extra crazy: confetti pieces (small rectangles) flying with rotation, different shapes/colors — mix of hearts (♥ text) and dots/diamonds.

Background of page: nice gradient, maybe animated blobs, some floating hearts in background drifting up continuously (ambient). Title text "Pure CSS Like Button" and hint "Click the heart — no JavaScript!". Also a note showing state? Could show "not liked / liked" text swap via checkbox too. Nice.

Accessibility: checkbox is focusable; add :focus-visible outline on label via `.like-checkbox:focus-visible + .like-btn`.

Reduced motion: `@media (prefers-reduced-motion: reduce)` disable animations — nice touch.

Layout: centered card on gradient background, responsive down to 375px. Use clamp() for sizes.

Let me make it really crazy but performant: 
- 16 burst particles (hearts ♥ + diamonds) 
- 3 shockwave rings
- heart pop with overshoot + color change to gradient? Gradient on the heart shape: background can be a gradient — circles ::before/::after use background: inherit which inherits gradient but positioned differently — could look off. Instead use background gradient on all three with background-attachment? Simpler: use solid color that transitions, plus a glow (drop-shadow / box-shadow). Or set each part's background to same gradient with background-size covering the whole heart: use `background: linear-gradient(...)` on each with `background-size: 200% 200%`? Hmm. Simpler approach: wrap heart parts... Actually a trick: give .heart and pseudos `background: inherit` won't align gradient properly (gradient would be per-element). For a pink-red gradient heart, I can use conic/linear with `background-attachment: fixed`? That aligns to viewport — hacky but consistent across elements if same gradient and fixed attachment: `background-image: linear-gradient(...); background-attachment: fixed;` — all elements share viewport-sized gradient, so the heart looks like one continuous gradient. That works in Chrome. But background-attachment: fixed can be glitchy with transforms... The heart is transformed (rotated), and fixed backgrounds with transforms can break (the background becomes relative to transformed element). Risky.

Alternative: use an inline SVG heart for the main heart — crisp gradient, easy. Inline SVG is not an "external image", it's markup. The task says pure CSS no JavaScript — SVG markup for the icon shape is generally acceptable in "pure CSS" demos, but to be strict "pure CSS" maybe they want CSS-drawn. Hmm. "a 'like' button in pure CSS, no JavaScript" — the point is no JS; using an inline SVG icon is still pure CSS/HTML. But safer to do the CSS heart to honor "pure CSS" fully. I can do gradient via filter? Or just use two-tone: solid #ff2d55 with a lighter highlight pseudo? The classic CSS heart with solid color + drop-shadow glow looks great. For "liked" state, transition background-color from gray to pink-red. Add an inner shine: a small white pseudo-element? The heart shape's pseudo elements are already used for lobes. I could add a child span for shine, or use ::before/::after on a wrapper. Let me structure:

```html
<label class="like" for="like-toggle">
  <span class="btn-circle">
    <span class="rings"><i></i><i></i><i></i></span>
    <span class="fill"></span>
    <span class="heart"><span class="shine"></span></span>
    <span class="burst"> ... 16 <i> particles ... </span>
    <span class="plus">+1</span>
  </span>
  <span class="meta">
    <span class="count">...</span>
    <span class="label-text">Like</span>
  </span>
</label>
```

Wait — clicking anywhere on label toggles. Put count below the button. The burst particles should emanate from the heart, so they should be inside .btn-circle positioned absolute at center.

CSS heart inside .heart wrapper: .heart is the rotated square with ::before/::after lobes. Its scale animation on :checked — but .heart also might have idle heartbeat animation. Conflict: idle animation on .heart, burst pop also on .heart — when :checked, override animation with pop (animation property replaced). When unchecked, back to idle heartbeat. That works: 

```css
.heart { animation: heartbeat 1.6s ease-in-out infinite; }
.like-checkbox:checked + .like .heart { animation: pop .6s cubic-bezier(.2,2.2,.4,1) forwards; ... }
```

Hmm but `forwards` keeps scale(1) — fine, then on uncheck, animation returns to heartbeat. Good.

Color: `.heart, .heart::before, .heart::after { background: #c6c9d4; transition: background-color .3s; }` and checked: `background: #ff2d55` plus filter: drop-shadow(0 0 18px rgba(255,45,85,.8)) on .heart wrapper? drop-shadow on the wrapper .heart-shape... The .heart element itself is the square; drop-shadow filter on it would only shadow the square, not the pseudo lobes (filter applies to the element including its pseudo-elements' rendering? Actually filter on an element applies to the whole element including ::before/::after as they're part of its rendering — yes, filter applies to the element's entire rendered output including pseudo-elements). So put filter: drop-shadow on .heart and it shadows the full heart shape. But .heart is rotated; drop-shadow follows the alpha shape, fine.

But careful: .heart has animation transform; filter is separate property, fine.

Sizes: heart square 54px, lobes 54px circles offset -27px. Total heart width ~ 54+27 = 81px? The bounding box: square from (0,0) to (54,54); circle before at left:-27px → from -27 to 27 horizontally, top 0..54; circle after at top:-27px → 0..54 horizontal, -27..27 vertical. Bounding box: x from -27 to 54 (width 81), y from -27 to 54. Center of the shape... The visual center is around (13.5, 13.5). When rotated -45° about center (27,27), the tip points down. For positioning, I'll make a wrapper .heart-wrap of fixed size (e.g., 90×90) flex-centered, and inside .heart with margin adjustments. Simpler: .heart { position: relative; width: 48px; height: 48px; margin: 21px; } eh.

Easier: wrapper .heart-box { width: 96px; height: 96px; display:grid; place-items:center; } and .heart { width:52px; height:52px; transform: rotate(-45deg) translate(...)? } The rotation is around the element's own center (27,27 offset...). Actually to center the heart visually in the wrapper, I can offset: the shape's bounding box center is at (13.5, 13.5) relative to element origin; element center is (27,27). After rotate(-45deg) around (27,27), the shape rotates around element center — the visual center of the heart shape is at element position (13.5,13.5), which is not the rotation center, so the heart will appear off-center and wobble during scale. To fix: translate the shape so its visual center aligns with element center: the visual center (13.5,13.5) should move to (27,27): translate(13.5px, 13.5px) = translate(26%, 26%)? 13.5/52 = 25.96% ≈ 26%. So `transform: rotate(-45deg) translate(26%, 26%)`? Order matters: transforms apply right-to-left... In CSS, transform functions compose left to right as matrix multiplication applied to the element: `rotate(-45deg) translate(26%,26%)` means translate happens in the rotated coordinate system. Hmm. Let me think: with `transform: A B`, point p → A*(B*p). So B (translate) applied first in local coords, then rotated. We want to first translate the shape so visual center at element center, then rotate about element center. So `transform: rotate(-45deg) translate(13.5px, 13.5px)` — translate applied first (moves shape +13.5,+13.5 so visual center at 27,27), then rotate about element center (27,27) — but rotation origin default is 50% 50% of the element's border box = (27,27). Yes! So `transform: rotate(-45deg) translate(13.5px, 13.5px)` — wait, but translate percentages refer to element's own size: 13.5/52 = 25.96%. Use px: translate(13.5px, 13.5px). Hmm, but actually does the rotation origin shift? transform-origin is (27,27) in element's local coords; the composite transform T = R * Tr applied about origin: final = O * R * Tr * O⁻¹. Points: p' = O + R*(Tr*(p - O))... Let me just verify visually: the standard CSS heart usually is just `transform: rotate(-45deg)` on the square with circles at top and left, and it looks fine — the slight off-center is barely noticeable and people don't compensate. The bounding box is 1.5× the square; when centered via flexbox, the element box (52×52) is centered, but the drawn shape extends -26px left and -26px up beyond the element box. So the heart appears shifted up-left relative to the flex center. The classic fix: add margin or translate. Let me do it cleanly:

Make wrapper 100×100 grid place-items center. .heart { width: 50px; height: 50px; position: relative; transform: rotate(-45deg) translate(18%, 18%); } Let me compute: we want visual bbox center at element center. BBox center at (w/4? ) For square w: lobes extend to -w/2 left and -w/2 up; bbox = from -w/2 to w → center at w/4. Element center w/2. Offset needed: +w/4 = 25% of w. So translate(25%, 25%) after rotate: `transform: rotate(-45deg) translate(25%, 25%)`. Check composition: final = rotate ∘ translate applied to points relative to origin center... transform-origin 50% 50% means: p' = O + M (p - O) where M = R·Tr. Shape bbox center in local coords c=(w/4, w/4). p - O = (w/4 - w/2, ...) = (-w/4, -w/4). Tr: +25% of element size → (-w/4 + w/4, -w/4 + w/4) = (0,0). Then R rotates (0,0) → (0,0). So c' = O = (w/2, w/2) = element center. The bbox center maps exactly to element center. And since translate then rotate keeps the center fixed, scale animations about element center also keep heart centered. 

So: `.heart { width: 50px; height: 50px; transform: rotate(-45deg) translate(25%, 25%); }` and keyframes must include this base transform: e.g. `transform: rotate(-45deg) translate(25%,25%) scale(x)`.

Hmm wait, does scale in the same transform scale about element center too? Yes since it's part of M about origin O. Order: rotate * translate * scale — scale applied first to points, then translate, then rotate; all about origin O. Fine.

Actually simpler alternative: put the rotation on a wrapper and scale on inner. But single-element keyframes with full transform is fine.

Let me now also consider: the heart's ::before/::after positions: ::before { left: -50%; top: 0 }? With width 100% height 100% border-radius 50%: before at left:-50% (i.e., -25px), top:0 → circle spans x: -25..25, y: 0..50. After: top: -50%, left: 0 → x: 0..50, y: -25..25. Yes standard.

Border-radius on the square? The square's bottom corner after rotation becomes the bottom tip — sharp is fine (heart tip). 

Colors: unliked: #b8bfd0 (grayish) or soft gradient? solid. Liked: vibrant gradient — since solid per part, use #ff2d55 with maybe radial highlight via an extra inner element. I can add a child span .shine inside .heart — but .heart is rotated; child would rotate too. Put shine on a sibling overlay: .heart-hi (a small white ellipse) positioned over the heart's top-left lobe, with mix-blend or just rgba white, also rotating? Keep it simple: skip shine, use drop-shadow glow + a white specular dot via radial-gradient on each part? Overkill. Solid color + glow is clean and pretty.

Alternatively use two-tone: heart background #ff2d55; ::before/::after background slightly lighter #ff5c7a? With inherit it's same. Could set pseudos to a slightly different shade for depth: `background: #ff4d6d`. Eh, subtle. Or give the square part (which becomes the lower half/tip) a slightly darker shade #e6244a and lobes #ff3b63 — creates nice dimension. Let's do: .heart { background:#ff2e55 } .heart::before, ::after { background:#ff5c7f }? Hmm the lobes on top, tip below. Fine, subtle.

Actually, let me try gradient with background-attachment trick avoided — instead, I can overlay a gradient sheen across the whole heart using a wrapper with the gradient and the heart shape as a mask? CSS mask with... we can't easily mask text/shape without images. Could use `mask` with radial gradients? Complex. Skip — solid + glow + shine dot is fine.

Let me add a specular highlight: a ::after on the wrapper .heart-box: small white blurred ellipse at top-left of heart, opacity .5, only visible when checked (or always subtle). Position absolute. It won't rotate — good, it's on the wrapper. 

Burst particles: inside .burst (absolute inset-0, pointer-events none). 16 <i> elements. Each i styled: position absolute; left:50%; top:50%; font-size varies; content via nth-child? For hearts use ::before content "♥"? An <i> with class variants: some are hearts (content "♥" colored), some are dots (border-radius 50%), some are diamonds (rotated squares), some are rings. I'll assign via nth-child(3n) etc. or just define each nth-child explicitly with --tx, --ty, --r, --d, --s, and shape/color. 16 explicit rules is verbose but fine and gives full control. Let me generate a nice spread: angles all around, distances 70–150px.

Colors: #ff2d55, #ff6b9d, #ffd166, #a78bfa, #22d3ee, #fb7185...

Keyframes burst:
```css
@keyframes burst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s,1)) rotate(var(--r,180deg)); }
}
```
Applied only when checked: `.like-checkbox:checked + .like .burst i { animation: burst .9s cubic-bezier(.16,.84,.44,1) var(--d,0s) both; }` With per-particle --d small stagger (0–.08s). "both" fill so before delay they're at 0% (invisible). When unchecked, no animation → default opacity 0 (set base opacity:0 on i). Good.

Rings: `.rings i` absolute inset 0 border-radius 50% border: 3px solid color; base scale .6 opacity 0. Checked: animation ring 1s ease-out both with delays 0/.15/.3s:
```css
@keyframes ring { 0% { transform: scale(.55); opacity: .9 } 100% { transform: scale(2.4); opacity: 0 } }
```

Fill circle behind heart: .fill absolute inset 0 border-radius 50%; background: radial/linear gradient pink; transform: scale(0); checked: animation fill-in .5s cubic-bezier(.34,1.56,.64,1) both → scale(1). When unchecked, scale(0) with transition? Since animation only on checked, unchecking snaps back — acceptable, or add transition on transform .3s as base so uncheck animates back. But base transform scale(0) + animation on checked overrides; on uncheck, transition from... when animation removed, computed style returns to base scale(0), transition triggers? When animation is removed, the property jumps to base value; transitions don't animate from animation values reliably (they do animate from the before-change style in some cases... actually when an animation ends/is removed, the transition may or may not fire; per spec, transitions are triggered by computed value changes, and animation removal causes a style change event — in practice Chrome does transition from the animated value when the animation is removed? There's a known behavior: removing an animation that had fill forwards causes a transition back if a transition is set — yes, Chrome transitions from the last animated value. But with `both` fill and then selector no longer matches, animation is removed, style change happens, transition runs. I believe modern Chrome does animate this. Either way it's fine.)

Button circle base: 120px circle, background: rgba white .8 with border, backdrop blur, shadow. On checked, keep white but heart pink; or tint circle light pink: background transitions to #fff0f3 and border pinkish.

Whole-button shake on check:
```css
@keyframes wiggle { 0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-3px,1px) rotate(-3deg)} 40%{transform:translate(3px,-2px) rotate(3deg)} 60%{transform:translate(-2px,-1px) rotate(-2deg)} 80%{transform:translate(2px,1px) rotate(2deg)} }
.like-checkbox:checked + .like .btn-circle { animation: wiggle .5s ease both; }
```
Hmm, but .btn-circle also might have hover scale transitions — fine.

Also :active press: `.like:active .btn-circle { transform: scale(.92) }` — but conflicts with animation transform when checked... animation wins over non-animated styles. Acceptable.

Plus one: `.plus` absolute above heart, font bold, checked: animation float-up 1s ease-out both: from translate(-50%, 0) opacity 0 → up -70px fade.

Count: below button: "1,247" ↔ "1,248". Implement:
```html
<span class="count">
  <span class="count-inner">
    <span class="n off">1,247</span>
    <span class="n on">1,248</span>
  </span>
</span>
```
.count-inner relative; .n display block; .n.on absolute inset-0. Unchecked: .off opacity 1 translateY(0); .on opacity 0 translateY(60%). Checked: .off opacity 0 translateY(-60%); .on opacity 1 translateY(0); transition .35s with slight delay. Use transitions (not animations) for count so it toggles both ways smoothly. 

Label text: "Like" ↔ "Liked!" similarly swap, or a single text that changes color + a checkmark? Swap two spans like count.

State pill at top: "Tap the heart" ↔ "Liked!"? Maybe show "UNLIKED"/"LIKED" badge that changes. Nice: a small status chip above the card: `<span class="chip">` with two stacked texts swapping, plus a dot that turns pink.

Background: dark or light? A dreamy gradient (deep indigo → purple → pink) with floating ambient hearts (♥ spans with float-up animation, low opacity, infinite, various delays) and two blurred glow blobs. Card: glassy white/dark glass. Let's go dark theme — pink heart pops beautifully on dark. Card: rgba(255,255,255,0.06), border rgba(255,255,255,0.12), backdrop-filter blur.

Ambient floating hearts: 8 spans in .bg with animation rise linear infinite, different left positions, sizes, durations, delays; keyframes rise: from translateY(110vh) rotate(0) opacity 0 → 10% opacity .35 → to translateY(-15vh) rotate(40deg) opacity 0. Use vh units; container fixed inset 0 overflow hidden.

Title: "Pure CSS Like Button" with gradient text; subtitle "No JavaScript — just a checkbox and keyframes. Click the heart!"; hint chip "👆 click the heart". Also maybe a "state" readout: "checkbox: unchecked/checked" text swap for the nerdy touch: two spans swapped via :checked — fun and reinforces pure CSS. E.g., a code-ish line: `:checked → true` toggling. Let's include small mono text: `state: :checked = false/true`. Cute.

Also add keyboard accessibility note? The label click via keyboard: checkbox hidden but focusable — if we hide with display:none, not focusable. Use appearance/visually-hidden technique: position absolute; opacity 0; pointer-events none? If opacity 0 but still in layout it might overlay; use width/height 1px, clip. Then `:focus-visible + .like .btn-circle { outline }`. Keyboard: space toggles checkbox → label styling updates. 

But the task says the iframe only receives keyboard events after click — irrelevant since no JS; checkbox works with mouse click on label. Fine. Also "Click or press a key to start" applies to games; this isn't a game, no need.

First paint visible: everything static visible immediately: button, title, ambient hearts animating — good.

Responsive: card max-width 92vw; heart sizes via clamp maybe fixed 120px circle is fine at 375px. Count font clamp. Use flex column center, min-height 100svh? Use 100vh with fallback; `min-height: 100svh` ok in Chrome.

No horizontal scrollbar: overflow-x hidden on body, ambient layer overflow hidden, burst particles extend beyond button but within card? Particles fly up to ~150px from center; card padding large enough or allow overflow visible but body overflow-x hidden handles it. Also set .stage overflow hidden? If card has overflow visible, particles may overflow card but page overflow-x hidden prevents scrollbar. Vertical overflow: particles fly up -150px from button center; button is centered in viewport, fine. Set html,body overflow-x:hidden... Actually to be safe `overflow: clip` on a wrapper. body { overflow-x: hidden; } enough. Also rings scale 2.4 of 120px = 288px — fits.

Let me now write particle definitions. I'll create 18 particles. Structure: `<span class="burst" aria-hidden="true">` with 18 `<i></i>`. Each i gets nth-child rules. To reduce verbosity, define shape classes: .h (heart via ::before content "♥"), .d (dot), .s (square/diamond), .r (ring). And colors via nth-child too. Maybe simpler: give each i inline style? "Everything inline" refers to files, but inline styles are allowed? It says CSS in <style> — inline style attributes are still CSS... The rule: "Everything must be inline: CSS in <style>". I'll keep all CSS in <style> to be safe, using nth-child selectors. 18 nth-child blocks with variables:

```css
.burst i:nth-child(1){ --tx: 96px; --ty: -110px; --r: 220deg; --d: 0s; --s: 1.4; color:#ff2d55; }
```
and shape: `.burst i { position:absolute; left:50%; top:50%; width:10px; height:10px; opacity:0; }`
Hearts: `.burst i.h::before { content:"♥"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size: var(--fs, 18px); color: inherit... }` Hmm, simpler: make heart particles use content directly on i: `.burst i.h { width:auto; height:auto; font-size: var(--fs); } .burst i.h::before{content:"♥"; color: var(--c); }` and transform animations on the i itself. Dots: `.burst i.d { border-radius:50%; background: var(--c); width: var(--w,8px); height: var(--w,8px); }` Diamonds: `.burst i.s { background: var(--c); width: var(--w,9px); height: var(--w,9px); border-radius: 2px; }` (rotation in animation makes it diamond-ish). Rings: `.burst i.r { border: 3px solid var(--c); border-radius:50%; width: var(--w,14px); height: var(--w,14px); background: transparent; }`

Base i: `left:50%; top:50%; opacity:0; transform: translate(-50%,-50%);` and animation sets transform including translate(-50%,-50%) plus offsets — but for heart text particles, translate(-50%,-50%) centers the glyph — good, keep in keyframes.

Keyframes with var: 
```css
@keyframes burst {
  0% { opacity:0; transform: translate(-50%,-50%) scale(.3) rotate(0deg); }
  12% { opacity:1; }
  100% { opacity:0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s,1)) rotate(var(--r,200deg)); }
}
```

Set per particle: class + vars. I'll write 18 rules combining: e.g.
```css
.burst i:nth-child(1){ --tx: 90px; --ty: -120px; --r: 260deg; --d: .02s; --s: 1.5; --c:#ff2d55; --fs:22px; }
```
with classes assigned in HTML: h, d, s, r mixed.

Let me plan 18 particles around the circle (angles in degrees, distance 80–150):
1. h, up-right: tx 80, ty -130
2. d, up: tx -10, ty -150
3. s, up-left: tx -95, ty -110
4. r, left-up: tx -140, ty -60
5. h, left: tx -155, ty 10
6. d, left-down: tx -120, ty 80
7. s, down-left: tx -70, ty 130
8. h, down: tx 10, ty 150
9. d, down-right: tx 90, ty 115
10. r, right-down: tx 140, ty 55
11. s, right: tx 155, ty -5
12. h, right-up: tx 120, ty -70
13. d small, tx 40, ty -90 (inner)
14. h small, tx -50, ty -60
15. s small, tx 60, ty 70
16. d small, tx -90, ty 30
17. r small, tx 30, ty 110
18. h tiny, tx -20, ty 120

Colors cycle: #ff2d55, #ff7aa2, #ffd166, #c4b5fd, #67e8f9, #fda4af.

Delays: 0 to .1s random-ish. Scales: .8–1.6.

Also add a quick "flash" overlay on the circle when checked: .flash absolute inset-0 border-radius 50% background white, animation flash .4s: opacity .8 → 0 scale .8→1.2. Nice.

Heart pop keyframes (with base transform rotate(-45deg) translate(25%,25%)):
```css
@keyframes pop {
  0% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
  35% { transform: rotate(-45deg) translate(25%,25%) scale(1.45); }
  55% { transform: rotate(-45deg) translate(25%,25%) scale(.85); }
  75% { transform: rotate(-45deg) translate(25%,25%) scale(1.15); }
  100% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
}
```
duration .7s cubic-bezier(.28,2.4,.44,1)? With explicit keyframes, easing per segment; use `ease` overall or set cubic-bezier(.34,1.8,.5,1). Fine.

Idle heartbeat:
```css
@keyframes heartbeat {
  0%,100% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
  12% { transform: rotate(-45deg) translate(25%,25%) scale(1.08); }
  24% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
  36% { transform: rotate(-45deg) translate(25%,25%) scale(1.1); }
  48% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
}
```
2s infinite. On checked, animation replaced by pop; color transitions to pink. Also glow: `.like-checkbox:checked + .like .heart { filter: drop-shadow(0 0 16px rgba(255,45,85,.75)); }` with transition on filter.

Wait: .heart is the square; its ::before/::after are children pseudos — filter on .heart applies to whole. But .heart also contains nothing else. OK. But note: applying filter creates containing block — fine.

Hmm, one issue: `.heart` base has `animation: heartbeat ...` always running; when checked, `animation: pop .7s ... both` — but we also want the pink color during pop: transition background-color .25s on .heart and pseudos. Good.

Also when unchecked after being checked, pop animation removed → heartbeat resumes; color transitions back to gray. Burst particles: animation removed → they snap to base opacity 0 — invisible anyway. Rings same. Fill circle: base transform scale(0) with transition transform .35s — on uncheck, does it transition from scale(1)? As discussed, Chrome: when animation is removed, style recalculation — the transition should trigger from current computed (animated) value? The spec says transitions start when computed value changes between style change events, and animations affect computed value... In practice, Chrome does animate back (there's a known behavior that removing a class with animation causes transition from animated value — actually the "before-change style" includes animation effects, so yes, transition runs). Even if it snaps, it's fine visually (instant unfill). To be safer, I could drive the fill with a transition only (no animation): `.fill { transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); } .checked .fill { transform: scale(1) }` — transitions toggle both ways reliably! Better: use transitions for persistent state changes (fill, color, count, labels, chip), and animations only for one-shot bursts (particles, rings, pop, wiggle, plus, flash). 

But pop: on uncheck we might want a small shrink — transition can't easily do overshoot without animation; skip, heartbeat resumes.

One more crazy element: screen-space confetti? Keep to button area — cleaner. Maybe also make the whole card do a tiny "jump" (translateY bounce) on check: `.like-checkbox:checked + .like .card-inner`? The card contains the label... The label IS inside the card; sibling selector: input + label. Card is parent — can't style parent without :has(). Chrome supports :has() — use `:has(:checked)` on card for a subtle glow: `.card:has(.like-checkbox:checked) { box-shadow: pink glow; border-color: ... }`. Modern Chrome fine. I'll add it (with graceful degradation).

Also title gradient text, and a "reset" hint? Not needed.

Let me also add hover effect: button circle scales 1.05, shadow grows; heart color darkens slightly. Cursor pointer on label.

Sound? No JS, can't.

Let me write the HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Like Button</title>
<style> ... </style>
</head>
<body>
  <div class="bg" aria-hidden="true">
    <span class="blob b1"></span><span class="blob b2"></span><span class="blob b3"></span>
    <span class="floaty f1">♥</span> ... 8 of them
  </div>
  <main class="card">
    <span class="chip"><span class="dot"></span><span class="chip-text">
      <span class="ct ct-off">not liked</span><span class="ct ct-on">LIKED!</span></span>
    </span>
    <input type="checkbox" id="like" class="like-checkbox">
    <label class="like" for="like" aria-label="Like">
      <span class="btn-circle">
        <span class="fill"></span>
        <span class="rings"><i></i><i></i><i></i></span>
        <span class="flash"></span>
        <span class="heart-box">
          <span class="heart"></span>
          <span class="shine"></span>
        </span>
        <span class="burst" aria-hidden="true">
          <i class="h"></i> ×18
        </span>
        <span class="plus">+1</span>
      </span>
      <span class="meta">
        <span class="count"><span class="n n-off">1,247</span><span class="n n-on">1,248</span></span>
        <span class="lbl"><span class="n n-off2">Tap to like</span><span class="n n-on2">Liked!</span></span>
      </span>
    </label>
    <p class="hint">Pure CSS — a hidden <code>&lt;input type="checkbox"&gt;</code> + <code>:checked</code> + keyframes. Zero JavaScript.</p>
    <p class="state">state: <code class="st"><span class="s-off">:checked = false</span><span class="s-on">:checked = true</span></code></p>
  </main>
</body>
</html>
```

Wait: input must be sibling BEFORE label for `+`. Put input right after chip, before label. Good.

Count swap mechanics: .count { position:relative; display:inline-block; overflow:hidden; height: 1.2em? } Use a fixed-height window with overflow hidden and inner spans translating. Let me do: .count { display:inline-grid; } both spans in same grid cell (grid-area 1/1), transitions on transform/opacity:
```css
.count .n { grid-area: 1/1; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.n-off { } .n-on { transform: translateY(110%); opacity: 0; }
.checked... .n-off { transform: translateY(-110%); opacity: 0; } .n-on { transform: none; opacity: 1; }
```
grid stacking: .count { display:inline-grid; } spans auto-placed same cell? Need explicit: .count > .n { grid-area: 1 / 1; }. Yes.

Same pattern for chip text, label text, state.

Colors on dark bg: text #e7e9f2, muted #9aa0b5.

Card: padding 40px 48px; border-radius 28px; centered via body grid place-items center; min-height 100svh.

The button circle: 132px diameter. Heart square 54px. Let me compute heart visual size: square 54 → bbox 81×81 after transform... The heart drawn spans 81px wide. Inside 132px circle, good with rings.

Positioning .heart-box: absolute inset 0, display grid place-items center. .heart { width: 54px; height: 54px; position: relative; transform: rotate(-45deg) translate(25%,25%); } — as computed, visual center at element center = box center. 

Shine: .shine { position:absolute; width: 16px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(2px); left: calc(50% - 26px); top: calc(50% - 30px); transform: rotate(-30deg); opacity: .0 → when checked opacity .7? Actually shine on gray heart looks odd; make shine always subtle .35 white on the gray, and .8 when checked. Eh — put shine above the top-left lobe. The heart's top-left lobe center: bbox from -27..54 both axes relative to element origin at (27,27) center... In heart-box coords (center = 0): element occupies (-27,-27)-(27,27); lobe before circle spans (-27..27? no: left:-50% → -27px from element left → x from -54? wait element left edge at -27 in box coords; ::before left:-50% of 54 = -27 → before circle left edge at -27-27 = -54, spans to -54+54 = 0. So left lobe occupies x: -54..0, y: -27..27 → center (-27, 0) in box coords. Top lobe (::after): x: -27..27, y: -54..0 → center (0, -27). So shine near (-20, -34)-ish (between lobes upper-left): left: calc(50% - 24px); top: calc(50% - 36px). I'll eyeball: left 50% minus 22px, top 50% minus 34px. It's decorative; fine.

Rings: .rings i { position:absolute; inset:0; border-radius:50%; border: 3px solid var(--rc, #ff2d55); opacity:0; transform: scale(.5); } checked animation ring with delays. Give each ring different color via nth-child: #ff2d55, #ff7aa2, #ffd166.

Flash: .flash { position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); opacity:0; transform: scale(.6); } checked: animation flash .45s ease-out both: 0%{opacity:.9; transform:scale(.6)} 100%{opacity:0; transform:scale(1.6)}.

Fill: .fill { position:absolute; inset:0; border-radius:50%; background: linear-gradient(135deg, #ff2d55, #ff7a59); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .05s; } checked → scale(1). Then heart on top should become white when filled! Yes — classic like button: filled pink circle + white heart. So checked: heart color white (#fff), fill pink gradient behind. That looks great. And drop-shadow glow pink on circle: `.like-checkbox:checked + .like .btn-circle { box-shadow: 0 18px 50px -12px rgba(255,45,85,.55), 0 0 0 6px rgba(255,45,85,.12); }` transition box-shadow.

So heart: gray #aab0c3 unliked → white liked. Unliked on light circle? Circle base: white-ish glass on dark bg: background rgba(255,255,255,.07) with border rgba(255,255,255,.14)? Then heart gray visible. Liked: fill gradient covers circle, heart white. 

Base .btn-circle: background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); box-shadow: 0 14px 40px -14px rgba(0,0,0,.6). transition: box-shadow .4s, transform... hover scale via `.like:hover .btn-circle { transform: scale(1.06) }` but checked wiggle animation overrides transform — animation wins during .5s then releases to hover scale — ok.

:active: `.like:active .btn-circle { transform: scale(.94) }`.

Wiggle on checked: apply to .like (the whole label incl. meta)? Just circle: `.like-checkbox:checked + .like .btn-circle { animation: wiggle .55s cubic-bezier(.36,.07,.19,.97) both; }` — but this conflicts with hover transform... fine.

Hmm — actually, also animate on uncheck a little "deflate"? skip.

Plus sign: .plus { position:absolute; left:50%; top: 8%; font-weight:800; font-size: 22px; color:#ff5c8a; opacity:0; transform: translate(-50%, 0); pointer-events:none; } checked: animation rise 1s ease-out .1s both: 0% {opacity:0; transform: translate(-50%, 10px) scale(.6)} 20% {opacity:1} 100% {opacity:0; transform: translate(-50%, -60px) scale(1.3)}.

Meta below circle: .meta { display:flex; flex-direction:column; align-items:center; gap: 2px; margin-top: 18px; } count font-size 26px weight 800; label 14px muted uppercase letter-spacing.

Now ambient floaty hearts: .bg { position: fixed; inset:0; overflow:hidden; z-index:0; } .floaty { position:absolute; bottom: -60px; color: rgba(255,255,255,.10); animation: rise linear infinite; } each with left, font-size, duration, delay via nth-child. keyframes rise { 0% { transform: translateY(0) rotate(0deg); opacity: 0 } 10% {opacity: .5?} ... } Let me: 
```css
@keyframes rise {
  0% { transform: translateY(10vh) rotate(-10deg); opacity: 0; }
  12% { opacity: .35; }
  85% { opacity: .25; }
  100% { transform: translateY(-110vh) rotate(35deg); opacity: 0; }
}
```
with bottom: -10vh start. durations 12–26s, negative delays so some visible on first paint. 

Blobs: .blob { position:absolute; border-radius:50%; filter: blur(90px); opacity:.5; } b1: 480px pink at top-left, animation drift; b2: 420px violet bottom-right; b3: 300px cyan center-right. Background base: radial/linear gradient dark: `background: #0b0d1a` plus gradient overlays via body background: `radial-gradient(1200px 800px at 70% 20%, #1b1140, transparent), radial-gradient(1000px 700px at 20% 80%, #3b0f2e, transparent), #0b0d1a;` Blobs add color. Blob drift animation: translate slowly alternate.

z-index: card z 1.

Chip: top of card: inline-flex, gap 8px, padding 8px 14px, border-radius 999px, background rgba(255,255,255,.07), border, font 12px mono/uppercase. Dot: 8px circle gray → pink with glow when checked, transition. Chip text swap via grid stack.

State line: mono font: `input:checked → false/true`. Use grid stack spans.

Hint paragraph: small muted, code styled.

prefers-reduced-motion: reduce → * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } — but that kills the burst entirely... acceptable for accessibility; standard practice.

Focus: `.like-checkbox:focus-visible + .like .btn-circle { outline: 3px solid #7dd3fc; outline-offset: 4px; }`.

Hidden checkbox: 
```css
.like-checkbox { position:absolute; width:1px; height:1px; margin:-1px; clip-path: inset(50%); overflow:hidden; }
```
Keep it focusable (not display:none). pointer-events: none? If it has pointer-events none and is 1px, clicking label still toggles (label for). Fine, add pointer-events:none to avoid intercepting.

Now, sizes responsive: card padding: clamp(24px, 6vw, 48px). Button 132px fixed ok on 375. Count 26px ok. Title clamp(28px, 6vw, 44px).

Card width: min(92vw, 460px). Content centered text-align center.

Let me also add a subtle grid or noise? skip.

Also maybe add "combo" — each click re-triggers because checkbox toggles; clicking again unlikes (animations replay on check each time — yes since selector re-matches, animation restarts). 

One more flourish: when checked, the card gets pink border glow via :has:
```css
.card:has(.like-checkbox:checked) { border-color: rgba(255,45,85,.45); box-shadow: 0 30px 80px -30px rgba(255,45,85,.35), 0 0 0 1px rgba(255,45,85,.2), 0 24px 60px -20px rgba(0,0,0,.6); }
```
transition on card.

Also the title could get a heart that beats? Title: "Pure CSS <span class='t-heart'>♥</span> Like Button" with t-heart colored pink, animation heartbeat-text (scale pulse) infinite. Cute.

Let me now carefully write all particle nth-child rules. 18 particles with classes in HTML order. I'll assign:

1 h --tx:70px --ty:-135px --r:300deg --d:0s --s:1.5 --fs:24px --c:#ff2d55
2 d --tx:-15px --ty:-155px --r:0 --d:.03s --s:1.2 --w:10px --c:#ffd166
3 s --tx:-100px --ty:-105px --r:340deg --d:.01s --s:1.1 --w:11px --c:#c4b5fd
4 r --tx:-150px --ty:-45px --r:0 --d:.06s --s:1 --w:16px --c:#67e8f9
5 h --tx:-160px --ty:25px --r:-260deg --d:.02s --s:1.3 --fs:20px --c:#ff7aa2
6 d --tx:-115px --ty:95px --r:0 --d:.08s --s:1 --w:8px --c:#fda4af
7 s --tx:-60px --ty:140px --r:280deg --d:.04s --s:1.3 --w:10px --c:#ffd166
8 h --tx:15px --ty:155px --r:200deg --d:.05s --s:1.4 --fs:22px --c:#ff2d55
9 d --tx:95px --ty:120px --r:0 --d:.09s --s:1.1 --w:9px --c:#c4b5fd
10 r --tx:145px --ty:60px --r:0 --d:.03s --s:.9 --w:14px --c:#ff7aa2
11 s --tx:160px --ty:-10px --r:320deg --d:.07s --s:1.2 --w:10px --c:#67e8f9
12 h --tx:120px --ty:-80px --r:-300deg --d:.01s --s:1.2 --fs:18px --c:#ffd166
13 d --tx:45px --ty:-95px --r:0 --d:.1s --s:.9 --w:7px --c:#fda4af
14 h --tx:-55px --ty:-60px --r:180deg --d:.11s --s:.9 --fs:15px --c:#ff7aa2
15 s --tx:65px --ty:75px --r:250deg --d:.12s --s:.9 --w:8px --c:#67e8f9
16 d --tx:-95px --ty:35px --r:0 --d:.13s --s:.8 --w:7px --c:#ff2d55
17 r --tx:35px --ty:115px --r:0 --d:.14s --s:.7 --w:12px --c:#ffd166
18 h --tx:-25px --ty:120px --r:-200deg --d:.15s --s:.8 --fs:14px --c:#c4b5fd

Base i: position absolute; left 50%; top 50%; opacity 0; will-change transform. Shapes:
```css
.burst i.h { width:auto; height:auto; }
.burst i.h::before { content:"♥"; font-size: var(--fs,18px); color: var(--c); line-height:1; display:block; }
.burst i.d { width: var(--w,8px); height: var(--w,8px); border-radius:50%; background: var(--c); }
.burst i.s { width: var(--w,9px); height: var(--w,9px); border-radius:2px; background: var(--c); }
.burst i.r { width: var(--w,14px); height: var(--w,14px); border-radius:50%; border:3px solid var(--c); }
```
Animation transform on i: translate(-50%,-50%) ... — for h, the glyph box centers ok.

Note: for .h, transform translate(-50%,-50%) uses element size (glyph) — fine.

Ring keyframes:
```css
@keyframes ring {
  0% { opacity:.85; transform: scale(.55); }
  100% { opacity:0; transform: scale(2.5); }
}
```
.rings i:nth-child(2){ animation-delay: .12s } etc. Colors: border-color per nth.

Checked burst:
```css
.like-checkbox:checked + .like .burst i { animation: burst .95s cubic-bezier(.17,.67,.35,1) var(--d,0s) both; }
```

Also on checked, maybe heart pop should start slightly after fill begins: pop delay .05s.

Now the "crazy" factor — add also a quick scale "shockwave" of the whole circle: flash covers it. Also maybe rotate the plus. Enough.

Also add small sparkle stars twinkling around button idle: 4 tiny ✦ spans absolutely positioned around circle with twinkle animation (opacity/scale) infinite, staggered — always visible, adds life on first paint. Place inside .btn-circle? They'd be clipped? No overflow hidden on btn-circle, they can sit outside the circle edge: position absolute at e.g. top:-6px left:20%. Twinkle: keyframes tw { 0,100% {opacity:.15; transform: scale(.6) rotate(0)} 50% {opacity:.9; transform: scale(1.1) rotate(45deg)} } durations 2-3s delays. Use content "✦" via ::before or just text in span. I'll use spans with class spark and text ✦ directly in HTML.

Layout order inside .btn-circle (absolute children): fill (z1), rings (z2), flash (z3), heart-box (z4), burst (z5), plus (z6), sparks (z6). Set z-index accordingly. .btn-circle position relative, overflow visible.

Heart-box: absolute inset 0 display grid place-items center, z-index 4.

Let me write final CSS carefully.

```css
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height: 100%; }
body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1100px 700px at 75% 15%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 650px at 15% 85%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(700px 500px at 85% 80%, rgba(34,211,238,.15), transparent 60%),
    #0a0c18;
  color: #eef0f8;
  overflow-x: hidden;
  padding: 24px;
}
```

Card:
```css
.card {
  position: relative;
  z-index: 1;
  width: min(92vw, 440px);
  text-align: center;
  padding: clamp(26px, 6vw, 44px) clamp(20px, 5vw, 40px);
  border-radius: 30px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  transition: border-color .5s, box-shadow .5s;
}
.card:has(.like-checkbox:checked) {
  border-color: rgba(255,45,85,.5);
  box-shadow: 0 30px 90px -25px rgba(255,45,85,.4), 0 30px 80px -30px rgba(0,0,0,.7);
}
```

Title:
```css
h1 { font-size: clamp(26px, 6.5vw, 38px); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; }
h1 .th { color:#ff2d55; display:inline-block; animation: throb 1.6s ease-in-out infinite; text-shadow: 0 0 24px rgba(255,45,85,.8); }
@keyframes throb { 0%,100%{transform:scale(1)} 15%{transform:scale(1.25)} 30%{transform:scale(1)} 45%{transform:scale(1.18)} 60%{transform:scale(1)} }
.sub { color:#9aa3bd; font-size: 14px; margin-bottom: 26px; }
```

Chip:
```css
.chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:11px; letter-spacing:2px; text-transform: uppercase; font-weight:700; color:#9aa3bd; margin-bottom: 28px; }
.dot { width:8px; height:8px; border-radius:50%; background:#4b5268; transition: all .35s; }
.like-checkbox:checked ~ .chip .dot { background:#ff2d55; box-shadow: 0 0 10px 2px rgba(255,45,85,.7); }
```
Wait — chip must come AFTER input in DOM to use ~, or before with :has on card. I placed chip before input earlier. Use `.card:has(.like-checkbox:checked) .dot` or reorder: put input first inside card, then chip, then label. `+` and `~` both work if input first. Let me put input as first child of card. Then `.like-checkbox:checked ~ .chip ...`, `.like-checkbox:checked + .like ...` (label immediately after input? chip in between breaks +; use ~ for label too: `.like-checkbox:checked ~ .like`). Fine, use ~ everywhere.

Chip text stack:
```css
.chip-text { display:inline-grid; }
.chip-text .ct { grid-area: 1/1; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ct-on { transform: translateY(120%); opacity:0; color:#ff5c8a; }
.like-checkbox:checked ~ .chip .ct-off { transform: translateY(-120%); opacity:0; }
.like-checkbox:checked ~ .chip .ct-on { transform: none; opacity:1; }
```

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

Label:
```css
.like { display:inline-flex; flex-direction:column; align-items:center; cursor:pointer; -webkit-tap-highlight-color: transparent; user-select:none; }
```

Btn circle:
```css
.btn-circle {
  position: relative;
  width: clamp(120px, 34vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 45px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15);
  transition: box-shadow .45s, background .45s, border-color .45s;
  display:block;
}
.like:hover .btn-circle { box-shadow: 0 24px 55px -18px rgba(0,0,0,.85), 0 0 0 8px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.15); }
.like:active .btn-circle { transform: scale(.93); }
.like-checkbox:checked ~ .like .btn-circle {
  background: rgba(255,45,85,.12);
  border-color: rgba(255,45,85,.55);
  box-shadow: 0 22px 60px -15px rgba(255,45,85,.55), 0 0 0 10px rgba(255,45,85,.08);
  animation: wiggle .55s cubic-bezier(.36,.07,.19,.97) both;
}
```

Fill:
```css
.fill { position:absolute; inset:0; border-radius:50%; background: linear-gradient(140deg, #ff2d55 10%, #ff5e3a 90%); transform: scale(0); transition: transform .5s cubic-bezier(.34,1.6,.64,1) .04s; z-index:1; }
.like-checkbox:checked ~ .like .fill { transform: scale(1); }
```

Rings:
```css
.rings { position:absolute; inset:0; z-index:2; pointer-events:none; }
.rings i { position:absolute; inset:0; border-radius:50%; border:3px solid #ff2d55; opacity:0; transform:scale(.55); }
.rings i:nth-child(2){ border-color:#ff7aa2; }
.rings i:nth-child(3){ border-color:#ffd166; }
.like-checkbox:checked ~ .like .rings i { animation: ring 1s cubic-bezier(.2,.7,.3,1) both; }
.like-checkbox:checked ~ .like .rings i:nth-child(2){ animation-delay:.14s; }
.like-checkbox:checked ~ .like .rings i:nth-child(3){ animation-delay:.28s; }
@keyframes ring { 0%{opacity:.9; transform:scale(.55)} 100%{opacity:0; transform:scale(2.6)} }
```

Flash:
```css
.flash { position:absolute; inset:0; border-radius:50%; z-index:3; pointer-events:none; opacity:0; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 65%); }
.like-checkbox:checked ~ .like .flash { animation: flash .5s ease-out both; }
@keyframes flash { 0%{opacity:.9; transform:scale(.5)} 100%{opacity:0; transform:scale(1.7)} }
```

Heart:
```css
.heart-box { position:absolute; inset:0; display:grid; place-items:center; z-index:4; pointer-events:none; }
.heart {
  position: relative;
  width: 46%;
  aspect-ratio: 1;
  background: #aeb6cb;
  transform: rotate(-45deg) translate(25%, 25%);
  transition: background-color .3s ease .1s, filter .3s ease .1s;
  animation: heartbeat 2.2s ease-in-out infinite;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: inherit;
  transition: background-color .3s ease .1s;
}
.heart::before { left: -50%; top: 0; }
.heart::after { left: 0; top: -50%; }
.like-checkbox:checked ~ .like .heart {
  background: #fff;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
  animation: pop .7s cubic-bezier(.28,2,.4,1) .05s both;
}
.like-checkbox:checked ~ .like .heart::before,
.like-checkbox:checked ~ .like .heart::after { background: #fff; }
```
Wait background: inherit on pseudos inherits the *computed* background of .heart? `background: inherit` inherits the parent's background property value — for shorthand it inherits all; color would track .heart's background-color? `inherit` takes the computed value of the parent — parent's background shorthand computed... background-color computed value would be inherited as the color — yes, if .heart's background-color changes, pseudo with background:inherit updates too (inherit is live). But transition on pseudo also set. Actually simpler: set pseudo background: inherit — works and auto-syncs. Then I don't need separate checked rules for pseudos. But transitions: pseudo has its own transition of background-color — with inherit, changing parent color triggers pseudo change; does pseudo transition animate? The pseudo's computed background-color changes → its transition should run. OK keep both.

Hmm but heart width 46% of circle (~148px → 68px square → bbox 102px) might be big; circle 148, heart bbox = 1.5×68 = 102 — fits nicely (69% of diameter). Let's use 44%.

Keyframes heartbeat & pop must include rotate+translate+scale:
```css
@keyframes heartbeat {
  0%, 100% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
  10% { transform: rotate(-45deg) translate(25%,25%) scale(1.07); }
  20% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
  30% { transform: rotate(-45deg) translate(25%,25%) scale(1.1); }
  42% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
}
@keyframes pop {
  0% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
  30% { transform: rotate(-45deg) translate(25%,25%) scale(1.5); }
  50% { transform: rotate(-45deg) translate(25%,25%) scale(.82); }
  70% { transform: rotate(-45deg) translate(25%,25%) scale(1.18); }
  85% { transform: rotate(-45deg) translate(25%,25%) scale(.96); }
  100% { transform: rotate(-45deg) translate(25%,25%) scale(1); }
}
```

Shine:
```css
.shine { position:absolute; width: 18%; height: 12%; left: 33%; top: 26%; border-radius: 50%; background: rgba(255,255,255,.9); filter: blur(3px); transform: rotate(-35deg); opacity: 0; transition: opacity .3s .15s; }
.like-checkbox:checked ~ .like .shine { opacity: .85; }
```
Position over upper-left lobe: heart-box center; lobe centers at (-27%?, ...). With heart 44% of box: square 44 units; lobes extend 22 left/up of element... In box %: element centered → element spans 28%..72%. Left lobe spans x: 28%-22%=6% .. 28%+? hmm: ::before left:-50% of element width (44% box) = -22% box → x from 28-22=6% to 6+44=50%, y 28%..72% → center (28%, 50%). Top lobe: x 28..72, y 6..50 → center (50%, 28%). Upper-left area between them ~ (33%, 33%)? The notch is at top-right of the rotated shape... The two lobes are top and left in unrotated coords; after rotate(-45deg), they end up top-left and top-right of the visual heart. The dip (notch) between lobes maps to top-center. Shine at around (36%, 30%) looks right. I'll set left:34%; top:27%.

Burst container:
```css
.burst { position:absolute; inset:0; z-index:5; pointer-events:none; }
.burst i { position:absolute; left:50%; top:50%; opacity:0; transform: translate(-50%,-50%); will-change: transform, opacity; }
```

Plus:
```css
.plus { position:absolute; left:50%; top:6%; z-index:6; font-size: clamp(18px, 5vw, 24px); font-weight:800; color:#ff5c8a; text-shadow:0 0 14px rgba(255,45,85,.8); opacity:0; transform: translate(-50%, 8px); pointer-events:none; }
.like-checkbox:checked ~ .like .plus { animation: plusrise 1s cubic-bezier(.2,.7,.3,1) .12s both; }
@keyframes plusrise {
  0% { opacity:0; transform: translate(-50%, 14px) scale(.5); }
  25% { opacity:1; }
  100% { opacity:0; transform: translate(-50%, -64px) scale(1.25); }
}
```

Wiggle:
```css
@keyframes wiggle {
  0%,100% { transform: translate(0,0) rotate(0); }
  15% { transform: translate(-4px, 2px) rotate(-4deg); }
  30% { transform: translate(4px, -3px) rotate(4deg); }
  45% { transform: translate(-3px, -2px) rotate(-3deg); }
  60% { transform: translate(3px, 2px) rotate(3deg); }
  75% { transform: translate(-2px, 1px) rotate(-1.5deg); }
  90% { transform: translate(1px, -1px) rotate(1deg); }
}
```

Sparks:
```css
.spark { position:absolute; z-index:6; color:#ffd166; opacity:.2; pointer-events:none; animation: twinkle 2.4s ease-in-out infinite; font-size: 14px; }
.spark:nth-child(...) — I'll place 4 sparks with explicit classes s1..s4 positions:
.s1{ top:-4%; left:12%; animation-delay:0s; }
.s2{ top:8%; right:-6%; animation-delay:.6s; font-size:11px; color:#67e8f9; }
.s3{ bottom:2%; left:-8%; animation-delay:1.2s; color:#ff7aa2; }
.s4{ bottom:-6%; right:14%; animation-delay:1.8s; font-size:10px; }
@keyframes twinkle { 0%,100%{ opacity:.15; transform: scale(.6) rotate(0deg);} 50%{ opacity:.95; transform: scale(1.15) rotate(50deg);} }
```
Sparks are children of .btn-circle — but .btn-circle children are absolutely positioned spans; .btn-circle is display:block with position relative — ok. But wait, sparks inside button might intercept clicks? pointer-events none set. They're inside label anyway (label click toggles) — fine even without.

Spark content "✦" as text inside span.

Meta:
```css
.meta { margin-top: 20px; display:flex; flex-direction:column; gap:4px; align-items:center; }
.count { display:inline-grid; font-size: clamp(24px, 7vw, 30px); font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.count .n { grid-area: 1/1; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.count .n-on { transform: translateY(110%); opacity: 0; color: #ff5c8a; }
.like-checkbox:checked ~ .like .count .n-off { transform: translateY(-110%); opacity: 0; }
.like-checkbox:checked ~ .like .count .n-on { transform: none; opacity: 1; }
.lbl { display:inline-grid; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: #9aa3bd; }
.lbl .n { grid-area:1/1; transition: same; }
.lbl .n-on { transform: translateY(120%); opacity:0; color:#ff5c8a; }
... checked swaps
```

Hint & state:
```css
.hint { margin-top: 26px; font-size: 12.5px; color: #7c84a0; line-height: 1.6; }
.hint code, .state code { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); padding: 1px 6px; border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color:#c9d2ea; }
.state { margin-top: 10px; font-family: ui-monospace, monospace; font-size: 12px; color:#7c84a0; }
.state .st { display:inline-grid; }
.state .st span { grid-area:1/1; transition: transform .4s, opacity .3s; }
.st .s-on { transform: translateY(120%); opacity:0; color:#4ade80; }
checked: swap.
```

Background floaties & blobs:
```css
.bg { position: fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter: blur(100px); }
.b1 { width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background: rgba(217,70,239,.16); animation: drift1 16s ease-in-out infinite alternate; }
.b2 { width:40vmax; height:40vmax; right:-14vmax; bottom:-16vmax; background: rgba(59,130,246,.14); animation: drift2 20s ease-in-out infinite alternate; }
.b3 { width:26vmax; height:26vmax; right:8%; top:12%; background: rgba(255,45,85,.12); animation: drift1 24s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from{ transform: translate(0,0) scale(1);} to{ transform: translate(6vmax, 4vmax) scale(1.15);} }
@keyframes drift2 { from{ transform: translate(0,0) scale(1.1);} to{ transform: translate(-5vmax, -6vmax) scale(.95);} }
.floaty { position:absolute; bottom:-8vh; color:#fff; opacity:0; animation: rise linear infinite; text-shadow: 0 0 18px rgba(255,255,255,.35); }
.f1{ left:6%;  font-size:26px; animation-duration:17s; animation-delay:-3s; }
.f2{ left:18%; font-size:16px; animation-duration:23s; animation-delay:-11s; color:#ff7aa2; }
.f3{ left:32%; font-size:34px; animation-duration:19s; animation-delay:-7s; color:#c4b5fd; }
.f4{ left:47%; font-size:14px; animation-duration:26s; animation-delay:-16s; }
.f5{ left:60%; font-size:24px; animation-duration:21s; animation-delay:-5s; color:#67e8f9; }
.f6{ left:72%; font-size:18px; animation-duration:18s; animation-delay:-13s; }
.f7{ left:84%; font-size:30px; animation-duration:24s; animation-delay:-9s; color:#ffd166; }
.f8{ left:93%; font-size:15px; animation-duration:20s; animation-delay:-19s; }
@keyframes rise {
  0% { transform: translateY(0) rotate(0deg); opacity:0; }
  10% { opacity:.28; }
  80% { opacity:.2; }
  100% { transform: translateY(-115vh) rotate(50deg); opacity:0; }
}
```

Note: .floaty color set per class; base color #fff.

Reduced motion:
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
```

Focus visible:
```css
.like-checkbox:focus-visible ~ .like .btn-circle { outline: 3px solid #7dd3fc; outline-offset: 5px; }
```

HTML body:

```html
<div class="bg" aria-hidden="true">
  <span class="blob b1"></span><span class="blob b2"></span><span class="blob b3"></span>
  <span class="floaty f1">♥</span> ... f8
</div>
<main class="card">
  <input type="checkbox" id="like" class="like-checkbox">
  <span class="chip"><span class="dot"></span><span class="chip-text"><span class="ct ct-off">idle</span><span class="ct ct-on">liked</span></span></span>
  <label class="like" for="like">
    <span class="btn-circle">
      <span class="fill"></span>
      <span class="rings"><i></i><i></i><i></i></span>
      <span class="flash"></span>
      <span class="heart-box"><span class="heart"></span><span class="shine"></span></span>
      <span class="burst">
        <i class="h"></i><i class="d"></i><i class="s"></i><i class="r"></i><i class="h"></i><i class="d"></i><i class="s"></i><i class="h"></i><i class="d"></i><i class="r"></i><i class="s"></i><i class="h"></i><i class="d"></i><i class="h"></i><i class="s"></i><i class="d"></i><i class="r"></i><i class="h"></i>
      </span>
      <span class="plus">+1</span>
      <span class="spark s1">✦</span><span class="spark s2">✦</span><span class="spark s3">✦</span><span class="spark s4">✦</span>
    </span>
    <span class="meta">
      <span class="count"><span class="n n-off">1,247</span><span class="n n-on">1,248</span></span>
      <span class="lbl"><span class="n l-off">tap the heart</span><span class="n l-on">liked!</span></span>
    </span>
  </label>
  <h1>...</h1> — wait title should be above button. Reorder card: input (hidden), chip, h1, sub, label, hint, state. But sibling selector `.like-checkbox:checked ~ .like` requires input before label — input is first child, label later — ~ works for any following sibling. Good.
</main>
```

Order in card: input, chip, h1, p.sub, label.like, p.hint, p.state.

h1: `Pure CSS <span class="th">♥</span> Like Button`
sub: "One hidden checkbox. Zero JavaScript. Click the heart and watch it go crazy."

hint: `Made with <code>&lt;input type="checkbox"&gt;</code> + <code>:checked</code> + <code>@keyframes</code> — no JS at all.`
state: `state → <span class="st"><span class="s-off">:checked = false</span><span class="s-on">:checked = true ✓</span></span>` Hmm "✓" fine.

Check: does `~` selector `.like-checkbox:checked ~ .like` work when there are elements between? Yes, general sibling.

One concern: `.like:active .btn-circle { transform: scale(.93) }` and checked wiggle animation both set transform — during animation, animation wins; after (fill both → holds 100% = translate(0,0) rotate(0)) — with `both`, after animation ends it holds the 100% keyframe forever (until unchecked), overriding :active scale. Minor. Use fill `backwards`? We need 0% state before delay... wiggle has no delay; use `both` fine, or just no fill: animation without fill → after end, returns to CSS transform (hover/active). Before start (no delay) irrelevant. Use no fill mode for wiggle so :active works after. But rings/burst need `both` (delays). Pop needs `both`? pop delay .05s — before start, heart shows heartbeat frame? When checked, animation pop with delay .05s and fill none → during delay, the base styles apply... but base has `animation: heartbeat` — no wait, when checked, the animation property is replaced by pop (shorthand sets animation-name: pop). During the delay with fill none, no animation applies → element uses non-animated style: transform: rotate(-45deg) translate(25%,25%) (base) — same as pop 0% — fine, no jump. Use `backwards`? not needed since 0% == base. OK.

Burst particles: need `both` because delay + invisible before start — base opacity 0 anyway, and 0% keyframe opacity 0 — so even without fill they're invisible during delay. Use `both` anyway, harmless.

Rings: base opacity 0, 0% keyframe opacity .9 with delays .14/.28 — without fill, during delay they'd show base opacity 0 — good; but at animation start they jump to .9 — fine. Use `backwards` to be safe? backwards applies 0% during delay → opacity .9 visible early — NOT wanted. Use `both`: during delay applies 0% (opacity .9) — also visible early! Hmm: fill backwards/both applies the from keyframe during the delay period. So rings would be visible (opacity .9, scale .55) during their delay — bad. Use fill mode `none`: during delay, no animation → base opacity 0 → invisible; at start, jumps to 0% (opacity .9 scale .55) — visible pop-in of ring at start — that's exactly what we want (ring starts small and expands). So rings: `animation: ring 1s ... ` no fill (or fill none). But after animation ends, returns to base opacity 0 — good, invisible. 

Same for burst particles: use fill none; during delay base opacity 0; at start 0% opacity 0 anyway; end 100% opacity 0; after end base 0 — perfect. So no fill needed anywhere except pop (no delay issue). Flash: no delay, fill none fine. Plus: delay .12s — during delay must be invisible: base opacity 0 — fill none fine.

So only transitions handle persistent states. 

But one subtlety: when unchecking, animations are removed mid-flight — particles vanish instantly. Acceptable (snap). Could add reverse animation on uncheck via `.like-checkbox:not(:checked) ~ .like .burst i { animation: burst-rev ... }` — but that would run on page load too (selector matches initially) causing a burst on load! Unless we scope: animations on :not(:checked) run at load. Avoid. Snap is fine.

Heart pop when checked uses `both`? delay .05s, fill none → during delay base transform (no scale) — same as 0% — fine.

Now the count swap with grid: `.count { display:inline-grid; }` children `.n { grid-area: 1/1; }` — both spans overlap; container sizes to max — fine since similar width. Add `justify-items: center`? The spans are inline content; grid item stretch — text centered? Set `.count { justify-items:center; }` or text-align center. I'll add text-align:center on card anyway (inherited). Grid items stretch to container width; text-align center centers text within. OK.

Chip-text, lbl, st same pattern.

Also ensure label doesn't show default cursor weirdness — set cursor:pointer on .like.

Tap highlight removed.

Edge: iOS Safari `aspect-ratio` fine in Chrome.

Viewport 1280×800: card centered, everything visible. 375px: card 92vw = 345px, button clamp(120px, 34vw, 148px) → 34vw of 375 = 127.5px. Burst particles extend ±160px from center → total ~320px + button... center of screen, 375 wide → particles up to 160px from center = 187.5px from edge... 375/2 = 187.5 — particle at tx 160 + size ~ up to 170px < 187.5 OK no horizontal overflow. Rings scale 2.6 × 127px = 330px diameter → radius 165 < 187.5 OK. Plus vertical fine. body overflow-x hidden anyway. 

Also add `overflow-x: clip` on html too.

Font: system fonts only (no external). Good.

Title gradient? Solid white with pink heart. Fine.

Let me also double check the heart geometry with width 44% of circle: circle 148 → heart square 65px; bbox 97.5px; lobes circles 65px diameter. Visual heart ~98px wide in 148px circle — nice.

drop-shadow filter on .heart when checked — filter on element with animation transform: fine.

One more: the `.heart` transition includes filter; when checked add `filter: drop-shadow(0 6px 16px rgba(255,45,85,.0))`? Heart is white on pink fill; a soft dark drop shadow gives depth: drop-shadow(0 5px 12px rgba(120,10,40,.45)). Yes.

Unliked heart color: #a7aec4 (visible on dark glass). Hover: darken to #8f97af? `.like:hover .heart, .like:hover .heart::before...` — pseudo inherit handles if I change .heart background-color on hover: pseudos use background: inherit → they follow. So `.like:hover .heart { background-color: #98a0b8; }` — but .heart background shorthand set; override background-color works, pseudos inherit computed background-color? `background: inherit` on pseudo inherits the parent's background shorthand computed values — computed background-color of parent. If parent's background-color changes, pseudo's inherited value changes live. Yes.

Transition on .heart background-color .25s.

Now wiggle applied to .btn-circle when checked — but .btn-circle also has hover box-shadow transitions etc. fine.

Also: clicking label toggles checkbox natively — yes, label[for] activates input. No JS. 

Keyboard: checkbox focusable (opacity 0 but not display none) — space toggles; focus-visible outline shows. 

Let me also consider `user-select:none` on label to avoid text selection on rapid clicks.

Now assemble particle CSS. I'll write nth-child rules with all vars. Also give each i a base `color: var(--c)` for h (uses ::before color var(--c)).

Actually simplify: set `--c` per particle and shapes use var(--c).

Write:
```css
.burst i:nth-child(1){--tx:72px;--ty:-138px;--r:300deg;--d:0s;--s:1.5;--fs:24px;--c:#ff2d55}
.burst i:nth-child(2){--tx:-14px;--ty:-156px;--r:0deg;--d:.03s;--s:1.2;--w:10px;--c:#ffd166}
.burst i:nth-child(3){--tx:-102px;--ty:-104px;--r:340deg;--d:.01s;--s:1.1;--w:11px;--c:#c4b5fd}
.burst i:nth-child(4){--tx:-152px;--ty:-44px;--r:0deg;--d:.06s;--s:1;--w:16px;--c:#67e8f9}
.burst i:nth-child(5){--tx:-162px;--ty:26px;--r:-260deg;--d:.02s;--s:1.3;--fs:20px;--c:#ff7aa2}
.burst i:nth-child(6){--tx:-116px;--ty:96px;--r:0deg;--d:.08s;--s:1;--w:8px;--c:#fda4af}
.burst i:nth-child(7){--tx:-62px;--ty:142px;--r:280deg;--d:.04s;--s:1.3;--w:10px;--c:#ffd166}
.burst i:nth-child(8){--tx:16px;--ty:156px;--r:200deg;--d:.05s;--s:1.4;--fs:22px;--c:#ff2d55}
.burst i:nth-child(9){--tx:96px;--ty:120px;--r:0deg;--d:.09s;--s:1.1;--w:9px;--c:#c4b5fd}
.burst i:nth-child(10){--tx:146px;--ty:62px;--r:0deg;--d:.03s;--s:.9;--w:14px;--c:#ff7aa2}
.burst i:nth-child(11){--tx:162px;--ty:-8px;--r:320deg;--d:.07s;--s:1.2;--w:10px;--c:#67e8f9}
.burst i:nth-child(12){--tx:122px;--ty:-78px;--r:-300deg;--d:.01s;--s:1.2;--fs:18px;--c:#ffd166}
.burst i:nth-child(13){--tx:46px;--ty:-96px;--r:0deg;--d:.1s;--s:.9;--w:7px;--c:#fda4af}
.burst i:nth-child(14){--tx:-56px;--ty:-62px;--r:180deg;--d:.11s;--s:.9;--fs:15px;--c:#ff7aa2}
.burst i:nth-child(15){--tx:66px;--ty:76px;--r:250deg;--d:.12s;--s:.9;--w:8px;--c:#67e8f9}
.burst i:nth-child(16){--tx:-96px;--ty:36px;--r:0deg;--d:.13s;--s:.8;--w:7px;--c:#ff2d55}
.burst i:nth-child(17){--tx:36px;--ty:116px;--r:0deg;--d:.14s;--s:.7;--w:12px;--c:#ffd166}
.burst i:nth-child(18){--tx:-26px;--ty:122px;--r:-200deg;--d:.15s;--s:.8;--fs:14px;--c:#c4b5fd}
```

Burst animation:
```css
@keyframes burst {
  0% { opacity:0; transform: translate(-50%,-50%) scale(.3) rotate(0deg); }
  12% { opacity:1; }
  100% { opacity:0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s,1)) rotate(var(--r,200deg)); }
}
.like-checkbox:checked ~ .like .burst i { animation: burst .95s cubic-bezier(.16,.7,.3,1) var(--d,0s); }
```

Hmm — with no fill mode and delay, before start the element uses base style (opacity 0) — good.

Heart particles .h: element size = glyph box; translate(-50%,-50%) centers. Good.

Now, is there any issue with `calc(-50% + var(--tx))` in transform translate? Yes valid.

Also add slight gravity? Could add second keyframe at 70% then 100% lower — the linear path is fine with fade.

Extra craziness: add a "shockwave" text? Enough.

Let me also handle the case: `.like-checkbox:checked ~ .like .heart` animation pop — when user unchecks mid-pop, animation removed → heartbeat resumes. Good.

Now the state chip text: "idle" → "liked". And dot.

Also I realize the `.chip` is a span inside main — fine.

Check DOM order & selectors:
card children: input.like-checkbox, span.chip, h1, p.sub, label.like, p.hint, p.state.
Selectors: `.like-checkbox:checked ~ .chip .dot` etc. and `.like-checkbox:checked ~ .like ...`. 

Card :has for glow: `.card:has(> .like-checkbox:checked)`.

Write the hint text: `Built with a hidden <code>&lt;input type="checkbox"&gt;</code>, the <code>:checked</code> pseudo-class and pure <code>@keyframes</code>. No JavaScript, no libraries.`

State: `state: <span class="st"><span class="s-off">:checked = false</span><span class="s-on">:checked = true</span></span>`

Font sizes fine.

Also, title area maybe add small "DEMO" tag? The chip covers it.

Double-check no external requests: none. No localStorage etc. No JS at all — the task says no JavaScript for the button; I'll include zero <script> (rule says JS in <script> if any; none needed). The output must be a single html code block.

Screenshot at 3s: ambient hearts mid-flight visible, button idle-pulsing — meaningful first paint ✓.

Let me also make sure the label wraps btn-circle + meta; clicking meta also toggles — fine.

Potential issue: `.btn-circle` is a span with display:block — inside label (inline-flex column) — label align-items center — ok.

`.heart-box` grid place-items center — .heart inside; .shine also inside heart-box absolute — heart-box is inset:0 so shine positioned relative to it. Good.

z-index: fill 1, rings 2, flash 3, heart-box 4, burst 5, plus 6, sparks 7. All absolute within .btn-circle (position relative). Set position:absolute on each.

The .rings container: inset 0 absolute; its i inset 0.

Now wiggle on btn-circle conflicts with `:active` transform — after animation (no fill) returns to normal; ok.

One more consideration: `aspect-ratio: 1` with width clamp — height auto = width. Good.

Let me also add `touch-action: manipulation` on label to avoid double-tap zoom.

Also prevent the label text selection: user-select none on .like.

Let me now also verify the heartbeat keyframes won't conflict with checked pop: checked sets `animation: pop ...` overriding shorthand entirely (including duration/timing). Since both defined via `animation:` shorthand in different rules, the more specific/later wins when checked. `.like-checkbox:checked ~ .like .heart` has higher specificity than `.heart` — yes.

But careful: `.like-checkbox:checked ~ .like .heart` — the label has class .like; heart descendant. Specificity: 0,3,1? (.like-checkbox:checked = class+pseudo-class = 0,2,0; ~ .like = +0,1,0; .heart +0,1,0) → (0,4,0) beats (0,1,0). Good.

Color of heart when checked: white; pseudos inherit via background: inherit — but wait, I set `.heart { background: #aeb6cb; }` shorthand sets background-color. Pseudo `background: inherit` → inherits all background properties' computed values from parent — parent's computed background-color #aeb6cb → pseudo shows that. When parent's background changes to #fff via the checked rule `.like-checkbox:checked ~ .like .heart { background: #fff; }` — I should set background (shorthand) or background-color; pseudo inherit follows computed value — live inheritance works (inherit is computed at style resolution each time). Yes.

Transition on pseudo: `transition: background-color .3s` — when inherited value changes, transition applies. Should work in Chrome.

Edge: `background: inherit` also inherits background-image (none) fine.

Now the shine: white ellipse — when unchecked opacity 0, checked .85. It sits above heart (z within heart-box: heart then shine, shine later → on top). Good.

Also add slight `border-radius: 2px` to heart square? The tip sharp is fine.

Let me write the final file now. Also include `<meta name="color-scheme" content="dark">` maybe.

Also `body { padding: 24px; }` with grid place-items center — card centered; on small heights fine.

Also, `min-height: 100svh` — fallback: `min-height:100vh;` then `min-height:100svh;` both declared.

Floaty hearts use vh in keyframes translateY(-115vh) — from bottom:-8vh. OK.

Let me make sure `.bg` z-index 0 and card z-index 1; body background on body itself.

Also the sparks: `.spark` positioned relative to btn-circle; positions like top:-4% left:12% — outside circle slightly — visible since no overflow hidden. pointer-events none.

Final check of the "crazy" checklist on click: pink gradient fill springs in, white heart pops with overshoot, button wiggles, 3 shockwave rings expand, white flash, 18 confetti hearts/dots/diamonds/rings burst outward with rotation & stagger, "+1" floats up, count rolls 1,247→1,248, label "tap the heart"→"liked!", chip dot turns pink & text "idle"→"liked", card glows pink, state text flips to `:checked = true`. Unclick reverses states (transitions). That's crazy enough.

Write the code. Also add comments in CSS for clarity. Keep it tidy.

One more detail: `input` absolute positioned inside card — with position absolute it's out of flow; place it as first child; since card is the containing block? .card has position: relative — yes set that. Input at top-left 1px invisible — set `position:absolute; left:12px; top:12px;` whatever, opacity 0.

Also `clip-path: inset(50%)` to hide visually while focusable.

Alright, also ensure no horizontal scrollbar: html,body { overflow-x: clip; } plus body overflow-x hidden. Use both html and body overflow-x:hidden? `overflow-x: clip` avoids creating scroll container. I'll use `overflow-x: hidden` on body and `overflow-x: clip` on html.

Font stack: `font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;`

Mono: `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`.

Now write it all out.

Also the h1 heart span animation throb — infinite scale pulse.

Let me finalize the count numbers: 1,247 / 1,248.

Potential nit: `.count .n` transitions transform — but grid-area stacking; the off span translateY(-110%) moves up out; container height fixed by largest item — since both in same cell, container height = max of both — same line-height, fine, no layout shift.

For `.st` and `.chip-text`, `.lbl` same.

Also add `will-change` sparingly — fine.

Double-check keyframes names unique: heartbeat, pop, wiggle, ring, flash, burst, plusrise, twinkle, throb, rise, drift1, drift2.

Write final HTML.

Also, viewport meta. Title.

Let me write out the complete file mentally checking syntax:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pure CSS Like Button — no JavaScript</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html { overflow-x: clip; }
  body {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 28px 20px;
    overflow-x: hidden;
    font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #eef0f8;
    background:
      radial-gradient(1100px 700px at 78% 12%, rgba(124,58,237,.32), transparent 62%),
      radial-gradient(900px 650px at 12% 88%, rgba(236,72,153,.26), transparent 62%),
      radial-gradient(700px 520px at 88% 82%, rgba(34,211,238,.13), transparent 60%),
      #0a0c18;
  }
  ...
```

Continue with bg, card, etc. as planned.

I need to be careful: `.like-checkbox` absolute — card position relative.

Also `.like { -webkit-tap-highlight-color: transparent; }`.

Sparks inside .btn-circle after .plus.

Let me now also decide .btn-circle size: `width: clamp(124px, 36vw, 150px); aspect-ratio: 1;`

Heart width 44%.

Write everything.

For the state line, color the true green: `.st .s-on { color:#4ade80 }` but hidden initially.

Also `.hint` max-width to wrap nicely.

Check: `.like-checkbox:checked ~ .like .count .n-off` etc.

Also chip text "idle"/"liked" — ct-on color #ff5c8a.

Edge case: on very narrow screens the hint code wraps — fine.

Now produce final answer: single ```html block, no other text.

Let me write the full code carefully, ensuring balanced braces.

Also remember: no alert etc. None used. No external anything. 

One more idea for extra wow: make the entire card tilt slightly toward... no JS. Skip.

Also maybe add a second smaller demo? No, keep focused.

Counting braces as I write. Final code:

Also for `.rings i` base `transform: scale(.55)` — with animation none-fill, after animation returns to scale(.55) opacity 0 — invisible. Good.

Flash base opacity 0.

Plus base opacity 0, transform translate(-50%, 14px).

Burst base opacity 0.

pop animation: `animation: pop .7s cubic-bezier(.3,1.6,.4,1) .06s;` no fill — during .06s delay base transform applies (no scale) — pop 0% also scale(1) — seamless.

heartbeat: `animation: heartbeat 2.4s ease-in-out .8s infinite;` slight delay so first paint calm? Actually starting immediately fine; delay .8s means before that, base transform (scale 1) — same as 0% keyframe. Fine.

throb for h1 heart: infinite.

OK writing now.

Also ensure `.heart::before/::after` don't capture pointer events — they're inside label anyway; pointer-events default fine since label handles click. But heart-box has pointer-events:none — children inherit none — fine, clicks pass to label.

Actually wait: .heart-box pointer-events none — the heart visual won't block; label still receives clicks because heart-box is child of label... pointer-events:none on child means clicks go through to element below at that point — which is .btn-circle / label — still within label → toggles. Good.

burst pointer-events none too.

Everything good. Compose final.

Also, add `@media (max-width: 420px)` tweaks? clamp handles. Maybe reduce card padding — clamp handles.

Let me write the code block now. I'll add concise comments.

Additionally — the task says games need demo mode; this isn't a game, so no need. But "Something meaningful must be visible on first paint" — yes: full UI + ambient animation.

Also double-check: `:has` support — Chrome 105+, fine. Fallback: if unsupported, card glow just doesn't apply; everything else uses sibling selectors. Good.

Final code below.