GLM 5.3

The task: a "like" button in pure CSS, no JavaScript, that does a crazy animation when clicked. Must be a single HTML file, self-contained. CSS-only interactivity: use checkbox hack (hidden checkbox + label). On :checked, trigger crazy animations — particles bursting, heart growing/shaking, confetti, screen shake, emoji rain, etc. All in CSS.

Key constraints: no JavaScript at all. The demo should look good on first paint (screenshot at ~3s). So the button should be attractively visible immediately, maybe with a subtle idle pulse. When clicked, a crazy animation: burst of hearts/particles, button scale/rotate, background color flash, ring waves, confetti pieces, text change ("Liked!").

Also maybe a counter that increments? Pure CSS can't increment numbers dynamically, but we can swap text via CSS. We could fake a count with layered text.

Let me design a nice dark page, centered heart button. Label wraps a hidden checkbox. On click:

- Heart pops with cubic-bezier overshoot
- Particles: ~24 spans absolutely positioned, each animating outward with translate/rotate via custom --angle and --dist CSS variables, only running on :checked (animation-play-state or trigger by applying animation on :checked).
- Ring shockwaves expanding
- Confetti falling from top
- Whole page subtle shake
- Background radial flash
- Button text change from "Like" to "Liked!" — could animate letter-by-letter.

Also add ability to unlike (uncheck) — animations reset. Particles should only animate once on click (animation with forwards, triggered on :checked). When unchecked, they reset.

Add counter: like count that increments — could show "1.2k → 1.2k+1"? Simpler: text swap.

Let me write CSS variables for particles: use nth-child to give each particle an angle. Or use --i and calc with cos/sin? CSS cos()/sin() supported in modern Chrome! Yes, Chrome 111+ supports trig functions in calc. That makes particle generation easy: --tx: calc(cos(var(--a)) * var(--d)). But to be safe, I can also just precompute with nth-child or inline styles. Since inline styles are fine (it's still "pure CSS" in the sense of no JS), I can set --a and --d per particle via style attribute. That's the common approach. Use style="--a: 12deg; --d: 120px" etc. But writing 30 spans with inline vars is verbose but fine.

Actually using trig: particle i, angle = i * (360/30). I can write inline style="--i:1" ... and in CSS compute --a: calc(var(--i) * 12deg). Then --tx: calc(cos(var(--a)) * var(--d)), --ty: calc(sin(var(--a)) * var(--d)). Chrome supports this. The task says latest Chrome, so fine.

Crazy animation plan on :checked:

1. Heart: transform scale sequence: pop big, wiggle rotate, settle. Use animation "heart-pop".
2. Particles (hearts, sparkles): burst outward, fade, rotate, scale from 0. Different shapes: circles (dots), small hearts (pseudo-element with clip-path or just rotated squares? Heart shape via CSS is tricky; can use ::before content "❤" text). Use characters: ♥ ★ ✦ ● in spans. Fine — they're text, not emoji images.
3. Confetti: rectangles falling from top with rotate3d.
4. Shockwave rings.
5. Body/scene shake — apply animation to a wrapper (can't animate body transform easily? Actually you can animate body). Apply to .stage.
6. Background gradient hue flash.
7. Counter text: "LIKE" → "LIKED!" with staggered letters.

Also the pulse idle: gentle heartbeat on the heart before click.

Design: dark navy background with subtle radial glow, big pill button with heart icon + text. Typography: use system fonts stack; maybe "Georgia" or a nice stack — no external fonts allowed. Use font stack like ui-rounded? Use 'SF Pro', system-ui. Big bold uppercase letterspaced text.

Heart icon: draw with CSS? Use "♥" glyph in a span colored. Or inline SVG inside label (still pure CSS, no JS). SVG heart is cleaner. Inline SVG is fine.

Let me structure:

```html
<input type="checkbox" id="like" class="like-toggle">
<label for="like" class="like-btn">
  <span class="shockwave s1"></span>
  ...
  <span class="burst"> particles </span>
  <span class="heart"> svg </span>
  <span class="btn-text"><span class="w w1">L</span>... </span>
</label>
```

Particles positioned at heart center, animate on #like:checked ~ ... wait, input must be sibling preceding label. Use input first, then `.scene` containing label? General sibling combinator: input:checked ~ .scene .particle { animation... }.

Confetti: place fixed-position container inside scene; on checked, spawn animation.

Counter: maybe show a number "128" and on check show "129"? That's a cute detail: `.count::after`? Two spans, toggle visibility with a flip animation. Do: default shows "128", checked shows "129" with a roll-up animation. Implement with two stacked spans and translateY of a strip: a .counter with overflow hidden height 1em, inner strip has two numbers stacked; on checked translate up 100%. Nice pure-CSS counter!

Let me also add "hold to spam"? No, keep simple. Maybe multiple clicks toggle — unlike reverses counter. Good.

Also add hint text under button: "no JavaScript — just CSS". Header title like "Like it. Loudly." Something with personality.

Page layout: full viewport centered, title top, button center, small caption. Dark background: deep ink (#0d0f16) with vignette. Accent: hot pink/red gradient heart button.

Crazy: also make the whole page do a hue-rotate flash and the title jiggle? Let's add stage shake animation.

Burst particles: 24 items, mix of glyphs: ♥ ✦ ★ ● ✹. Colors: pink, gold, cyan, violet. Each particle: position absolute at center, animation burst 0.9s cubic-bezier with transform translate(calc(cos(var(--a))*var(--d)), calc(sin(var(--a))*var(--d) - 40px)) rotate(720deg) scale(...). Keyframes: 0% at scale 0; 15% scale 1.2; 100% translate to final, scale 0, opacity 0. Use forwards fill.

Vary --d per particle with --i-based pseudo-random: can't randomize easily; use inline --d values or calc with nth-child variations. I'll set inline style="--i:n" and compute angle; distance vary: use nth-child odd/even to give different distances, or inline --d. Simplest: inline style with --i and also a class for shape/color via nth-child.

Delay staggering: animation-delay: calc(var(--i) * -15ms)? For burst, all at once is fine; maybe two rings (inner fast, outer slower) using two groups.

Confetti: ~18 pieces fixed at top, falling with rotate, using --i for horizontal position and delay. Colors via nth-child mod. Shape: width 8px height 14px rectangles.

Rays/beams: rotating starburst behind heart — a conic-gradient disc that scales up and spins on click. Nice "crazy" factor.

Also floating hearts rising after (like Facebook livelike): a few hearts that float upward and fade, animation with infinite? No—one-shot with long duration, forwards. Maybe 5 big hearts rising slowly for 2s.

Screen flash: a fixed ::before overlay white flash with mix-blend? Keep it as radial pink flash fading.

Text "LIKE" morphing to "LIKED!": letters spans, each with transition transform delay stagger; on checked, letters swap. Easier: two absolutely stacked words, cross-fade + letters wave. I'll do word-level: .t-like and .t-liked stacked; on checked, .t-like translateY -110%, .t-liked translateY 0 from 110%, inside overflow hidden box. Plus per-letter stagger for style: word broken into letter spans with transition-delay calc.

Button width changes: LIKE vs LIKED! widths differ; set fixed min-width to avoid jump. min-width: 260px.

Heart pop keyframes:
```
@keyframes heart-pop {
 0% {transform: scale(1) rotate(0)}
 20% {transform: scale(0.6) rotate(-12deg)}
 40% {transform: scale(1.5) rotate(10deg)}
 60% {transform: scale(0.9) rotate(-6deg)}
 80% {transform: scale(1.25) rotate(4deg)}
 100% {transform: scale(1.2) rotate(0)}
}
```
On checked, fill stays and heart has a continuous heartbeat (infinite small pulse) — "crazy" ongoing. But screenshot at 3s without interaction shows idle. Fine.

Idle animation before click: gentle breathing heart + occasional sparkle? Add idle heartbeat: scale 1 → 1.08 at 1.4s intervals — cute, and hints it's alive. Also a glowing ring pulse behind button to attract click. Good for first paint.

Also note: the demo requirement says games need "click or press a key to start" — not applicable here since it's a button demo, not a game. Keyboard events not needed.

Mobile: 375px — button scales down via clamp, particles contained; ensure no horizontal scrollbar: overflow hidden on body.

Accessibility: label with role button, focus styles on input:focus-visible ~ label.

Let me write the code.

Structure:

```html
<body>
 <input id="like" type="checkbox">
 <main class="stage">
   <header> kicker, h1, sub </header>
   <label class="btn" for="like">
     <span class="flash"></span>
     <span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>
     <span class="beams"></span>
     <span class="burst">...24 spans...</span>
     <span class="floaters">...5 spans...</span>
     <span class="heart"><svg>...</svg></span>
     <span class="label-wrap">
        <span class="w like">L I K E letters</span>
        <span class="w liked">L I K E D !</span>
     </span>
     <span class="count"><span class="strip"><i>128</i><i>129</i></span></span>
   </label>
   <p class="hint">100% CSS — checkbox hack, zero JavaScript</p>
   <div class="confetti">...18 i...</div>
 </main>
</body>
```

Counter placement: to the side of the button like social chips? Put a separate counter chip next to button: `.counter` element after label, styled as pill with the rolling number and a tiny avatar stack? Keep simpler: pill to the right of the button showing count. Use flex row centered.

CSS selectors:
- `#like:checked ~ .stage` for stage shake & background change.
- `#like:checked ~ .stage .btn .heart` etc.

Shake stage on click: animation stage-shake 0.5s.

Background: body with radial gradients; on checked, add class effect via `#like:checked ~ .stage` can't change body background... The input is inside body; body can't be selected as later sibling. Put input as direct child of body and use :has()? body:has(#like:checked) — :has is supported in latest Chrome. Yes! Use `body:has(.like-toggle:checked)` to change background flash. That's still pure CSS. Also could just apply a fixed overlay inside stage.

I'll use :has for page-level effects (bg hue, vignette color), and general sibling for inside-stage effects. But careful: input must precede stage as sibling. body:has works regardless.

Font: system-ui stack; for the display title maybe "Impact"? Use weight 800 system-ui with tight letter-spacing — fine.

Colors: bg #0b0d14 → radial pinkish. Accent gradient: #ff4d8d → #ff2d55. Gold #ffd166, cyan #4dd4ff, violet #a78bff.

Counter strip: two numbers, checked translates up: `#like:checked ~ .stage .strip { transform: translateY(-50%); }` where strip height = 2em and each i is 1em line. Use transition with cubic-bezier bounce.

Confetti pieces: fixed top: -20px, left: calc(var(--x)*1%); animation fall 2.2s with translateY(110vh) rotate. Use forwards, delay staggered, only on checked. Each piece gets inline --x and --r (rotation) and --d (duration variance) via nth-child.

Hmm inline styles: I'll write them; it's fine.

Number of elements: 24 burst + 6 floaters + 18 confetti = 48 spans; manageable. Maybe reduce confetti to 14 and burst to 20 with 2 shapes.

Beams: conic-gradient repeating starburst: background: repeating-conic-gradient(from 0deg, rgba(255,77,141,.35) 0 10deg, transparent 10deg 20deg); border-radius 50%; mask radial-gradient to fade edges (use -webkit-mask). On checked: scale 0→3, rotate 180deg, fade out 0.8s.

Rings: border 3px solid pink; scale 0.4→2.4, opacity fade, staggered delays, forwards.

Flash: fixed inset 0 radial pink, opacity 0→.5→0 keyframe 0.6s.

Floaters: hearts ♥ rising from button, translateY(-160px), sway with rotate, delays staggered, duration 1.6–2.4s, forwards, start slightly after burst.

Also the button itself: on checked, background gradient shifts to filled pink, box-shadow glow strong, slight wiggle animation then settle; add infinite subtle heartbeat on the heart while checked.

Stage shake keyframes: translate few px + rotate tiny, 0.5s.

Also title jiggle: `#like:checked ~ .stage h1` animation tilt.

Background change with :has: body:has(#like:checked) { background: warmer radial + maybe animate a one-shot flash via overlay element instead (since body bg change is instant and stays). For one-shot flash, use overlay with animation (forwards ends at opacity 0). Good: .flash fixed overlay, animation on checked.

Let me also make unliking do something: everything resets (animations removed when unchecked — elements snap back). Add a "cooldown" — when unchecked, heart does a quick deflate animation: `.btn:not(:has(...))`... can't animate removal easily. Instead, keyframes run on checked only; unchecked = default state. Fine. Maybe transition for color back.

Focus: `#like:focus-visible ~ .stage .btn { outline: ... }` Actually label receives click; give input position absolute opacity 0.

Prevent text selection: user-select none on label.

Sizing with clamp for responsiveness. Button: padding 18px 34px, border-radius 999px. On small screens scale.

Let me write out particles inline:

Burst (20 particles), glyph via CSS content? I'll put glyph text inside spans. Use classes p (particle) with data via inline `style="--i:0"`. CSS:

```css
.burst span{
  position:absolute; left:50%; top:50%;
  translate:-50% -50%;
  font-size: var(--s, 14px);
  color: var(--c);
  opacity:0;
  pointer-events:none;
}
#like:checked ~ .stage .burst span{ animation: burst .9s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: calc(var(--i) * -8ms + 60ms); }
@keyframes burst{
 0%{opacity:0; transform: translate(-50%,-50%) scale(0) rotate(0);}
 12%{opacity:1; transform: translate(calc(-50% + cos(var(--a))*10px), calc(-50% + sin(var(--a))*10px)) scale(1.3) rotate(60deg);}
 100%{opacity:0; transform: translate(calc(-50% + cos(var(--a))*var(--d)), calc(-50% + sin(var(--a))*var(--d) - 30px)) scale(.2) rotate(540deg);}
}
```
where --a: calc(var(--i) * 18deg); --d: var(--dist, 140px). Set --dist varying: nth-child(3n) 170px, (3n+1) 130px, etc. And colors: nth-child(4n+1) pink etc. Sizes vary similarly. Also two of every… ok.

Trig in transform calc: cos() of var(--a) — var(--a) is calc(var(--i)*18deg); trig functions accept an angle; using inside calc is fine in Chrome 111+. translate(calc(-50% + cos(var(--a)) * var(--d)), ...) — mixing % and px in calc with cos multiplication should work. To be safe, avoid % mixing: position particles with left/top 50% and use margin -? Instead set them at center via `left:50%; top:50%;` and use transform translate(x, y) only in px, then separately handle centering by making span 0×0 with text centered? Text glyph inside span with translate -50% -50% baseline... Simpler: give each span width:0 height:0 and the glyph positioned with translate(-50%,-50%)? Let's instead not center glyphs precisely—particles bursting from roughly center is fine visually if I use transform: translate(Xpx, Ypx) where X = cos(--a)*--d, and span has left:50%; top:50%; margin-left:-7px; margin-top:-7px approx centering. But glyph sizes vary... acceptable; or use `translate: -50% -50%;` property (separate from transform!) — the individual `translate` property composes with `transform`. 

So: span { translate: -50% -50%; } and keyframes animate transform: translate(cos...). But translate property and transform both apply — final = translate then transform. That gives centering plus px offsets. 

But wait: transform in keyframes overriding? The `translate` property is separate from `transform`, both apply. Good. And rotate via transform rotate too. But careful: keyframes set transform only; translate property persists. 

Font sizes: some particles 12–22px via --s per nth-child.

Confetti: i elements:
```css
.confetti i{position:fixed; top:-24px; left:var(--x); width:10px; height:16px; background:var(--c); opacity:0; border-radius:2px;}
#like:checked ~ .stage .confetti i{ animation: fall var(--t) ease-in forwards; animation-delay: var(--dl); }
@keyframes fall{ 0%{opacity:0; transform:translateY(0) rotate(0); } 8%{opacity:1;} 100%{opacity:0; transform: translateY(105vh) rotate(var(--r)); } }
```
Inline: style="--x: 6%; --c:#ffd166; --r: 720deg; --t: 1.8s; --dl: .1s".

Hmm, "no horizontal scrollbar" — fixed confetti fine with overflow hidden on html/body? overflow-x hidden. But translateY(105vh) vertical — with body overflow hidden ok.

Floaters (rising hearts):
```css
.floaters span{position:absolute; left:50%; top:0; translate:-50% 0; opacity:0; font-size:22px; color:#ff5c93;}
#like:checked ~ .stage .floaters span{ animation: rise var(--t) ease-out forwards; animation-delay: var(--dl); }
@keyframes rise{0%{opacity:0; transform:translate(0,0) scale(.4) rotate(0);} 15%{opacity:1;} 100%{opacity:0; transform: translate(var(--sw), -190px) scale(1.1) rotate(var(--rot));}}
```
Position .floaters at top of button. Give each inline --sw, --rot, --t, --dl.

The label needs overflow visible — yes default. But button is pill with overflow visible so particles escape. Good. But confetti container outside label, position fixed pieces.

Text swap with per-letter stagger:

```html
<span class="labelbox">
  <span class="w w-like"><b>L</b><b>I</b><b>K</b><b>E</b></span>
  <span class="w w-liked"><b>L</b><b>I</b><b>K</b><b>E</b><b>D</b><b>!</b></span>
</span>
```
labelbox: position relative, grid place-items center; .w stacked (grid-area 1/1). Overflow hidden, each b display inline-block, transform translateY. Default: w-like letters 0, w-liked letters 110%. Checked: like → -110% (each with delay calc(n*30ms)), liked → 0 with delays. Also letters could do a little rotate. Use transition transform .45s cubic-bezier(.2,.8,.2,1.4) (springy overshoot). Set per-letter transition-delay via nth-child.

Counter chip next to button: 
```html
<div class="row"> <label class="btn">...</label> <div class="chip"><span class="strip"><i>128</i><i>129</i></span></div> </div>
```
chip: pill bg rgba white 6%, border, monospace-ish numbers (font-variant-numeric tabular-nums). strip: display block, each i display block height 1.4em line-height 1.4em? Use: .strip{display:flex; flex-direction:column; transition: transform .5s spring;} checked: translateY(-1.4em)? Better with em heights: .chip{height:1.5em; overflow:hidden;} i{display:block; height:1.5em; line-height:1.5em;} checked → transform: translateY(-1.5em).

Also add tiny "pop" scale on chip when checked.

Hint text: "Zero JavaScript — powered by a hidden checkbox and :checked. Click it. Then click it again."

Title: kicker "PURE-CSS INTERACTION Nº 042", h1 "Make the internet a louder place." Sub: "This button contains no scripts. Try it."

Also maybe add subtle grid/noise bg. Keep tasteful.

Button styles:
```css
.btn{
 position:relative; display:inline-flex; align-items:center; gap:14px;
 padding: 10px 12px 10px 10px; border-radius:999px;
 background: linear-gradient(...); border:1px solid rgba(255,255,255,.14);
 cursor:pointer; user-select:none;
 box-shadow: 0 10px 30px rgba(255,45,85,.15), inset 0 1px 0 rgba(255,255,255,.08);
 transition: transform .3s, box-shadow .3s, background .3s;
}
```
Heart inside a circular badge: .heart{width:54px;height:54px;border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center;} svg 30px, fill #ff5c93 outline? On checked, heart badge bg pink gradient, svg fill white.

Idle heartbeat on svg: animation idlebeat 1.6s infinite: 0,100% scale 1; 14% 1.15; 28% 1; 42% 1.1; 56% 1. Checked: pop animation .7s then continuous throb? Two animations: `animation: heartpop .7s cubic overshoot, throb 1.3s .7s infinite;`

Checked button style: background pink gradient, glow shadow big, transform handled by keyframes? Add wiggle to whole button: `animation: btn-jig .6s;` then rest transform: scale(1.02). Combine: keyframes btn-jig with rotate wiggle ending at scale(1).

Checked persist: box-shadow: 0 0 0 6px rgba(255,45,85,.12), 0 14px 40px rgba(255,45,85,.45).

Rings & beams positioned center of heart badge — put them inside .heart? .heart overflow visible. Rings centered at badge center: position absolute inset 0 border-radius 50%. On checked animate scale.

Beams inside heart too, sized 200px centered: position:absolute; left:50%; top:50%; width:220px;height:220px; translate:-50% -50%; border-radius:50%; background repeating-conic; mask radial-gradient(circle, black 30%, transparent 70%); opacity 0; checked → animation beams .8s forwards: from scale(.2) rotate(0) opacity .9 to scale(1.6) rotate(90deg) opacity 0.

Flash overlay: put inside label? Better a fixed .flash div inside stage: position:fixed; inset:0; background: radial-gradient(circle at 50% 55%, rgba(255,77,141,.35), transparent 60%); opacity:0; checked → animation flash .7s.

Stage shake: `#like:checked ~ .stage{ animation: quake .55s; }` keyframes translate ±6px rotate ±0.6deg. But .stage contains fixed elements — transform on ancestor breaks fixed positioning (fixed becomes relative to transformed ancestor). Confetti fixed pieces are inside stage; during shake (0.55s) they'd be relative to stage — stage is full-viewport anyway (100% width/height?). Make stage min-height:100vh and full width — fixed inside transform still covers viewport similarly. After animation ends, transform none → back to normal. Minor shift at end, barely noticeable since confetti still falling. Actually cleaner: shake only the `.btn` row? Shaking whole stage is more "crazy". Alternatively apply shake to a wrapper `.world` inside stage that excludes confetti/flash. Structure:

stage (min-height 100vh, grid center)
  .world (contains header, row, hint)
  .confetti, .flash fixed

Shake .world. 

Also h1 jiggle: separate animation.

prefers-reduced-motion: media query disabling animations — nice touch, add briefly.

Responsive: h1 clamp(2rem, 6vw, 3.6rem). Row flex wrap center gap 14px.

Let me count letters for "LIKED!" - L I K E D !. Widths: labelbox width fixed? Set min-width on labelbox: 5.2ch? The two words overlap in same grid cell; button width driven by widest? With grid stack, the container width = max of words if both in normal flow. Grid items in same cell: container sized to largest. Set labelbox display:grid; .w{grid-area:1/1; white-space:nowrap;}. Width = max(LIKE, LIKED!). Good, no layout shift.

Now per-letter transitions:

```css
.w b{display:inline-block; transition: transform .5s cubic-bezier(.22,1.2,.36,1);}
.w-like b{transform:translateY(0);}
.w-liked b{transform:translateY(115%);}
#like:checked ~ .stage .w-like b{transform:translateY(-115%) rotate(-8deg);}
#like:checked ~ .stage .w-liked b{transform:translateY(0) rotate(0);}
```
Delays: .w-like b:nth-child(1){transition-delay:.05s}... and liked ones .18s+. Labelbox overflow:hidden to mask. Add slight padding? b rotate might clip; overflow hidden with padding 0 .05em? Fine.

Colors: default text #f4f0fa; checked #fff.

Now write full HTML. Estimate ~400 lines. Let's go.

Confetti colors: #ffd166, #ff5c93, #4dd4ff, #a78bff, #7cf29b, #ff8f4d.

I'll write 16 confetti pieces with varied inline vars.

Burst: 20 spans. Shapes: use glyphs "✦" "♥" "●" "✚"? Let me use classes by nth-child for glyph via content? Spans empty with ::before content set by nth-child(5n+1) etc. Easier: put glyph text directly in HTML. I'll include glyphs: alternate ♥ ✦ ● ★.

Actually simpler: CSS sets content per nth-child:
```css
.burst span::before{content:"✦";}
.burst span:nth-child(3n)::before{content:"♥";}
.burst span:nth-child(4n)::before{content:"●";}
.burst span:nth-child(5n)::before{content:"★";}
```
Spans empty. Colors: nth-child(4n+1) gold, etc.

Sizes: --s default 15px; nth-child(3n) 20px; nth-child(7n) 11px.

Distances: --d default 150px; nth-child(even) 190px; nth-child(3n) 170px... just a few variations.

Angles: --a: calc(var(--i) * 18deg). With i from 0..19.

Delays: animation-delay: calc(40ms + var(--i)*-6ms) → effectively random-ish.

Floaters: 6 spans content "♥" via ::before with different colors/sizes inline: style="--sw: 40px; --rot: 25deg; --t: 1.7s; --dl: .25s; --c:#ff5c93; --s: 26px". Position: .floaters{position:absolute; left:50%; bottom:100%; margin-bottom:10px; ...} spans absolute at left 0? Each span position:absolute; bottom:0; left:0; then translate -50%. Keep simple: .floaters span{position:absolute; bottom:-6px; left:50%; translate:-50%; ...} and keyframes rise translate? conflict: keyframes transform doesn't affect translate property. Set keyframes transform: translate(var(--sw), -200px) rotate(var(--rot)) scale(...) — the initial centering via translate property stays. But I want them to start at button top: place .floaters{position:absolute; left:50%; top:0;} inside label; span{position:absolute; bottom:100%?} Hmm: put .floaters inside label at left:50%, top:-10px. spans position:absolute; left:0; top:0; translate:-50% -50%. Then rise via transform translateY negative. OK.

Actually simpler: floaters spans inside label with position:absolute; left:50%; top:6px; each with its own --sw etc. transform keyframes from translate(0,0) scale(.3) → translate(var(--sw),-210px) scale(1.05). translate property not needed since transform handles from 0 — but centering glyph: add margin-left:-8px approx or use text-align; fine, use translate:-50% 0? Let's set `translate: -50% 0;` property for centering and transform for motion. Works.

z-index: particles above button content: give .burst z-index 3; heart z-2; text z-2.

Flash: inside .stage, position:fixed; pointer-events:none; z-index 50.

Quake keyframes on .world.

Background body: 
```css
body{
 background: #0a0c13;
 background-image: radial-gradient(900px 500px at 50% -10%, rgba(255,45,85,.12), transparent 60%), radial-gradient(700px 400px at 85% 110%, rgba(77,212,255,.07), transparent 60%);
}
body:has(.like-toggle:checked){ background-color:#12101c; } 
```
Transition background-color .6s.

Also add subtle dotted pattern? skip.

Focus ring: `.like-toggle:focus-visible ~ .stage .btn{ outline:2px solid #ff5c93; outline-offset:4px; }`

Hide input: position:fixed; opacity:0; pointer-events:none; (still focusable).

Title area:
- .kicker: letter-spaced small caps with a tiny pink dot.
- h1: "Go ahead. Make it loud." with gradient text? Solid #f5f2fc, maybe accent word in pink italic serif? Without custom fonts, use system serif italic for flair: "loud." in italic serif pink. Nice typographic contrast.
- sub: "One checkbox. Zero JavaScript. All ego."

Hint at bottom: "Click the button — it likes you back. (Click again to take it back.)" plus a footer chip "100% CSS :checked magic".

Layout: stage grid: rows auto / 1fr center / auto; header top, button center, hint bottom. Use flex column: justify-content:center with header margin-bottom 48px; hint fixed at bottom? Use grid: 

```css
.stage{min-height:100vh; display:grid; place-content:center; text-align:center; padding:48px 20px; gap:0; }
header{margin-bottom:56px;}
.hint{margin-top:52px;}
```

Let me now write everything carefully, checking selectors order: input#like must be previous sibling of .stage. Put input right after <body>.

Edge: label wraps many absolutely positioned spans; label default inline — make it inline-flex, position:relative. Fine.

Also the button on :checked gets `animation: btn-jig .65s cubic-bezier(.36,.07,.19,.97);` plus persistent style via box-shadow/background transitions.

Heart svg: use inline svg path heart:
`<svg viewBox="0 0 24 24"><path d="M12 21s-6.7-4.35-9.1-8.11C.9 9.9 1.9 6.5 4.7 5.3c2-0.9 4.3-.3 5.6 1.4L12 8.9l1.7-2.2c1.3-1.7 3.6-2.3 5.6-1.4 2.8 1.2 3.8 4.6 1.8 7.6C18.7 16.65 12 21 12 21z"/></svg>` — approximate standard heart path. I'll use the well-known: `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` (Material heart). Good.

Heart idle animation on svg: `animation: idle 2s ease-in-out infinite;` transform-origin center.

Checked heart pop:
```css
#like:checked ~ .stage .heart svg{ animation: pop .8s cubic-bezier(.34,1.56,.64,1) both, throb 1.4s .8s ease-in-out infinite; fill:#fff; }
```
Wait fill via CSS on svg path: set `fill: currentColor` on path, color on .heart. Default color pink; checked → white.

Badge checked: background: linear-gradient(135deg,#ff5c93,#ff2d55); box-shadow.

Ring spans: 3, inside .heart, position absolute inset 0, border-radius 50%, border:2px solid rgba(255,92,147,.8); opacity 0; checked: animation ripple .9s ease-out forwards, delays 0/.12/.24.

@keyframes ripple{0%{opacity:.9; transform:scale(1);} 100%{opacity:0; transform:scale(3.2);}}

Quake:
```css
@keyframes quake{
0%,100%{transform:translate(0,0) rotate(0)}
10%{transform:translate(-7px,3px) rotate(-.5deg)}
20%{transform:translate(6px,-4px) rotate(.5deg)}
...
}
```

h1 wiggle: `#like:checked ~ .stage h1{animation: title-jig .7s .05s;}` rotate ±2deg.

Chip pop: checked .chip{animation: chippop .5s .1s;} and strip translate.

Flash keyframes: 0% opacity 0; 20% .8; 100% 0.

Beams: as planned.

Also maybe a "HYPE" stamp appearing? Enough already.

prefers-reduced-motion: turn off burst/confetti/quake animations.

Write final file. Watch out: `.stage` overflow: default; body overflow-x hidden.

One more check — the translate property with keyframes: In burst keyframes I animate `transform: translate(calc(cos(var(--a)) * 1px ...))`. cos(var(--a)) returns a number; multiplied by 1px needed? cos(...) * var(--d) where --d: 150px → number × length = length, valid in calc. calc(cos(18deg) * 150px) fine. And -50% centering is via `translate` property so transform only has px — no % mixing issue. But I also need rotate & scale in same transform — order: translate(...) rotate(...) scale(...). Good.

However: the `translate: -50% -50%` property on spans — supported in Chrome 104+. OK.

Set span display:block? inline elements with position absolute become block-ish. Fine.

Burst spans font-size: use --s. ::before inherits size.

Let me write delay for burst: animation-delay: calc(var(--i) * -0.012s)? negative delays start mid-animation — undesirable (all visible immediately? No—opacity 0 at 0%... negative delay jumps into keyframe so particles appear mid-flight instantly at load of checked state — that's fine actually, gives instant fullness). Better positive small: animation-delay: calc(0.05s + var(--i)*0.008s). Fill mode both so before delay they hold 0% (opacity 0). Good.

Confetti inline vars; write 16 pieces:
`<i style="--x:4%; --c:#ffd166; --t:2.1s; --dl:.05s; --r:640deg"></i>` vary x 3–95%, durations 1.7–2.6s, delays 0–.5s, rotations 360–900deg. Add a second wave? delays up to .8s for longer show. Confetti falls full height — after 2.6s done. That's fine — one-shot crazy.

Also give confetti slight horizontal drift: add translateX(var(--dx)) in keyframes: transform: translate(var(--dx), 105vh)? Start translate(0,0) with top:-24px. Keyframes:
```
@keyframes fall{
0%{opacity:0; transform: translate(0,0) rotate(0) scale(1);}
6%{opacity:1;}
100%{opacity:.9; transform: translate(var(--dx), 108vh) rotate(var(--r));}
}
```
End opacity 0? They exit viewport anyway; end opacity .9 fine.

Add width/height variation via inline? Keep uniform-ish, vary with nth-child.

Floaters: 6 spans, colors pink/gold/violet, sizes 18–30px, sway --sw ±60px, durations 1.5–2.3s, delays .15–.6s.

Chip strip height: define .chip{height:1.55rem} i{height:1.55rem; line-height:1.55rem}.

Also add small "PLUS" burst near counter? skip.

Write it. Also ensure "no console errors" — careful with CSS only, no JS at all. 

Title: document title "The Like Button".

Let me write the final HTML now, mindful and complete.

Letter transition delays:
.w-like b:nth-child(n) delays: checked outgoing: 0.02s * n. w-liked incoming: 0.1s + n*.03s. But transition-delay applies both directions; unchecking reverses with same delays — acceptable.

Actually set base transition-delay 0; on checked override delays. Simpler: put delays on .w-liked b always (so incoming staggered), and .w-like b delays only when checked (outgoing). Use:

```css
.w b{transition: transform .5s cubic-bezier(.3,1.4,.4,1);}
.w-liked b{transition-delay: calc(var(--n) * 40ms + 80ms);}
```
Give each b inline --n? Or nth-child lists. I'll use nth-child selectors (6 lines) for liked; for like outgoing, `#like:checked ~ .stage .w-like b{transition-delay: calc(var(--k)*30ms)}` needs per-letter again... Use :nth-child rules:

```css
.w b:nth-child(1){--n:0}
.w b:nth-child(2){--n:1}
...
```
Then delays via calc with --n. 6 rules cover both words. 

labelbox needs fixed height = 1em-ish; letters translateY 115% clipped by overflow hidden. Add padding: 0 .1em? Vertical: line-height 1; height:1em might clip descenders of "!" fine. Set .labelbox{height:1.05em; overflow:hidden;} .w{display:flex; gap:.06em? } Use letter-spacing on .w: .18em; and b inline-block.

Hmm "LIKED!" letters b elements with white-space nowrap.

Set min-width on .btn text area? Grid stack gives max width automatically. But transitions of letters won't change width since container sized to max word. 

Also .btn uses inline-flex; gap 14px between heart badge and labelbox.

Counter chip content: also prefix a small heart dot? Add ::before "♥" pink small. Actually chip: `♥ 128`. The heart in chip static pink, numbers roll. Cute.

Now full code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Like Button — zero JavaScript</title>
<style>
...
</style>
</head>
<body>
<input type="checkbox" id="like" class="like-toggle">

<main class="stage">
  <div class="flash" aria-hidden="true"></div>
  <div class="confetti" aria-hidden="true">
    <i style="..."></i> ×16
  </div>
  <div class="world">
    <header>
      <p class="kicker"><span class="dot"></span>PURE CSS · NO JAVASCRIPT · Nº 042</p>
      <h1>Go ahead, make it <em>loud.</em></h1>
      <p class="sub">One checkbox. Zero scripts. All ego. Click it — it likes you back.</p>
    </header>
    <div class="row">
      <label class="btn" for="like" role="button" tabindex... 
```
tabindex on label? Label with for is clickable; keyboard: input is focusable but visually hidden; pressing space toggles? Checkbox input with opacity 0 still receives keyboard when focused — click label focuses input? Not automatically. Fine, mouse focus works; keyboard users can tab to hidden input and space toggles. Add aria hidden on decorative stuff.

Label content:

```html
<label class="btn" for="like">
  <span class="heart">
    <span class="beams"></span>
    <span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="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"/></svg>
  </span>
  <span class="labelbox">
    <span class="w w-like"><b>L</b><b>I</b><b>K</b><b>E</b></span>
    <span class="w w-liked"><b>L</b><b>I</b><b>K</b><b>E</b><b>D</b><b>!</b></span>
  </span>
  <span class="burst" aria-hidden="true"> 20 empty spans with --i </span>
  <span class="floaters" aria-hidden="true"> 6 spans </span>
</label>
<div class="chip" aria-hidden="true">
  <span class="mini"></span>
  <span class="win"><span class="strip"><i>128</i><i>129</i></span></span>
</div>
```

chip mini heart: ::before content "♥" colored.

CSS writing time. Also .burst and .floaters spans position absolute relative to label.

Burst center should align with heart badge (left side of button), not label center. .burst{position:absolute; left:37px; top:50%;} where heart badge center ≈ 10px padding + 27px = 37px from left. Heart badge: width 54px, btn padding-left 10px → center at 37px. Vertically: badge 54px, btn padding-block 10px, height 74 → center 37px. Set .burst{left:37px; top:37px;} spans at 0,0 with translate -50% -50%. 

Beams & rings inside .heart (inset 0) centered — good.

Floaters positioned at left:37px; bottom: calc(100% - 37px)? Set .floaters{position:absolute; left:37px; top:37px;} spans translate -50% -50% then rise upward. Good, same anchor.

Keyframes rise: 100% translateY(-210px) with translateX(var(--sw)).

Sizes: heart badge 54px; svg 26px.

Now responsive: at 375px, button fine (~230px wide). h1 clamp.

Let me write CSS fully:

```css
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  min-height:100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:#0a0c13;
  background-image:
    radial-gradient(900px 520px at 50% -12%, rgba(255,45,85,.14), transparent 60%),
    radial-gradient(720px 420px at 88% 112%, rgba(93,180,255,.08), transparent 60%);
  background-color:#0a0c13;
  transition: background-color .8s ease;
  color:#efeaf6;
}
body:has(.like-toggle:checked){ background-color:#131020; }
```

.like-toggle{position:fixed; opacity:0; pointer-events:none;}

.stage{min-height:100vh; display:grid; place-content:center; text-align:center; padding:56px 20px; position:relative;}

.flash{position:fixed; inset:0; pointer-events:none; z-index:60; opacity:0;
 background:radial-gradient(circle at 50% 58%, rgba(255,77,141,.45), rgba(255,77,141,.12) 35%, transparent 65%);}
#like:checked ~ .stage .flash{animation: flashout .75s ease-out both;}
@keyframes flashout{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.confetti i{position:absolute; top:-26px; left:var(--x); width:9px; height:15px; border-radius:2px; background:var(--c); opacity:0;}
.confetti i:nth-child(3n){width:12px;height:8px}... maybe vary.
#like:checked ~ .stage .confetti i{animation: fall var(--t) cubic-bezier(.25,.4,.6,1) var(--dl) both;}
@keyframes fall{0%{opacity:0; transform:translate(0,0) rotate(0)} 7%{opacity:1} 100%{opacity:1; transform:translate(var(--dx,20px), 108vh) rotate(var(--r))}}

Wait `.confetti` inside .stage — but I want full-viewport confetti; stage is min-height 100vh full width, so absolute inset 0 covers viewport. Good, avoids fixed/transform issue since quake applies to .world only.

.world{} — no base styles needed, block container. On checked: animation quake.

header{margin-bottom:58px}
.kicker{font-size:11px; letter-spacing:.34em; color:#9a8fb8; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px;}
.kicker::before,.kicker::after{content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,#5b4f7d); }
.kicker::after{transform:scaleX(-1)}
h1{margin-top:18px; font-size:clamp(2.1rem, 5.6vw, 3.7rem); font-weight:800; letter-spacing:-.03em; line-height:1.05;}
h1 em{font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:500;
 background:linear-gradient(120deg,#ff7aa8,#ff2d55); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em;}
.sub{margin-top:14px; color:#8f86a8; font-size:15px;}

.row{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}

.btn{...}
.btn base:

```css
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:15px;
  padding:10px 26px 10px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  cursor:pointer; user-select:none; -webkit-user-select:none;
  box-shadow:0 12px 34px rgba(255,45,85,.14), inset 0 1px 0 rgba(255,255,255,.09);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.btn:hover{ border-color:rgba(255,122,168,.5); box-shadow:0 14px 40px rgba(255,45,85,.25), inset 0 1px 0 rgba(255,255,255,.12); }
#like:checked ~ .stage .btn{
  border-color:rgba(255,122,168,.65);
  background:linear-gradient(180deg, #ff4d84, #f01e53);
  box-shadow:0 0 0 7px rgba(255,45,85,.13), 0 16px 46px rgba(255,45,85,.5), inset 0 1px 0 rgba(255,255,255,.25);
  animation: btn-jig .65s cubic-bezier(.36,.07,.19,.97);
}
@keyframes btn-jig{
 0%,100%{transform:translate(0) rotate(0) scale(1)}
 15%{transform:translate(-5px,2px) rotate(-1.6deg) scale(1.03)}
 30%{transform:translate(5px,-3px) rotate(1.4deg) scale(1.04)}
 45%{transform:translate(-4px,1px) rotate(-1deg) scale(1.02)}
 60%{transform:translate(3px,-1px) rotate(.7deg)}
 75%{transform:translate(-1px,0) rotate(-.3deg)}
}
```
Careful: transform on .btn combined with translate properties of children fine.

.heart{position:relative; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.09); transition: background .4s, box-shadow .4s; flex:none;}
.heart svg{width:26px;height:26px; fill:#ff5c93; transition: fill .35s; animation: idle 2.2s ease-in-out infinite; transform-origin:center;}
@keyframes idle{0%,100%{transform:scale(1)} 12%{transform:scale(1.14)} 24%{transform:scale(1)} 36%{transform:scale(1.09)} 48%{transform:scale(1)}}
#like:checked ~ .stage .heart{background:linear-gradient(160deg,#ff86ad,#ff2d55); box-shadow:0 4px 14px rgba(255,45,85,.55), inset 0 1px 0 rgba(255,255,255,.4);}
#like:checked ~ .stage .heart svg{fill:#fff; animation: pop .8s cubic-bezier(.34,1.6,.5,1) both, throb 1.35s .8s ease-in-out infinite;}
@keyframes pop{0%{transform:scale(1)}25%{transform:scale(.4) rotate(-14deg)}55%{transform:scale(1.65) rotate(9deg)}80%{transform:scale(.85) rotate(-4deg)}100%{transform:scale(1)}}
Hmm pop ends at scale 1, then throb takes over: throb{0%,100%{transform:scale(1.08)} 50%{transform:scale(1.22)}} — continuous heartbeat while liked. 

Rings:
.heart .ring{position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(255,110,158,.9); opacity:0; pointer-events:none;}
#like:checked ~ .stage .ring{animation: ripple 1s cubic-bezier(.2,.6,.35,1) both;}
.r2{animation-delay:.14s !important}? Better: #like:checked ~ .stage .r2{animation-delay:.15s} .r3{.3s}.
@keyframes ripple{0%{opacity:.95; transform:scale(1)} 100%{opacity:0; transform:scale(3.4)}}

Beams:
.beams{position:absolute; left:50%; top:50%; width:230px; height:230px; translate:-50% -50%; border-radius:50%; opacity:0; pointer-events:none;
 background:repeating-conic-gradient(from 0deg, rgba(255,140,180,.5) 0 9deg, transparent 9deg 22.5deg);
 -webkit-mask:radial-gradient(circle, #000 20%, transparent 68%); mask:radial-gradient(circle,#000 20%, transparent 68%);}
#like:checked ~ .stage .beams{animation: beamspin .9s ease-out both;}
@keyframes beamspin{0%{opacity:0; transform:scale(.2) rotate(0)} 25%{opacity:.95} 100%{opacity:0; transform:scale(1.7) rotate(140deg)}}

Labelbox:
.labelbox{position:relative; display:grid; height:1.15em; overflow:hidden; font-weight:800; font-size:19px; letter-spacing:.16em;}
.w{grid-area:1/1; display:flex; white-space:nowrap;}
.w b{display:inline-block; font-weight:inherit; transition:transform .55s cubic-bezier(.3,1.5,.45,1); will-change:transform;}
.w-liked b{transform:translateY(118%) rotate(12deg); opacity:0?} keep visible but translated; opacity fine as is (clipped by overflow). Add color: .w-liked{color:#fff}
#like:checked ~ .stage .w-like b{transform:translateY(-120%) rotate(-14deg);}
#like:checked ~ .stage .w-liked b{transform:translateY(0) rotate(0);}
Delays via --n:
.w b:nth-child(1){--n:0}... (6)
.w-liked b{transition-delay:calc(var(--n)*45ms + 70ms);}
#like:checked ~ .stage .w-like b{transition-delay:calc(var(--n)*28ms);}

Default .w-like b delay 0.

Burst:
.burst{position:absolute; left:37px; top:50%; width:0; height:0; pointer-events:none; z-index:5;}
Hmm top:50%? badge center vertical: btn content height 54, padding 10 → center at 10+27=37px from top. Set .burst{left:37px; top:37px;}.
.burst span{position:absolute; left:0; top:0; translate:-50% -50%; width:0; height:0; font-size:var(--s,14px); line-height:1; opacity:0; color:var(--c);}
.burst span::before{display:block; content:"✦";}
.burst span:nth-child(2n)::before{content:"♥"}
.burst span:nth-child(3n)::before{content:"●"}
.burst span:nth-child(5n)::before{content:"★"}
colors:
.burst span:nth-child(4n+1){--c:#ffd166}
.burst span:nth-child(4n+2){--c:#ff6b9d}
.burst span:nth-child(4n+3){--c:#7cd4ff}
.burst span:nth-child(4n){--c:#b58cff}
sizes/dist:
.burst span:nth-child(odd){--d:170px}
.burst span:nth-child(even){--d:120px}
.burst span:nth-child(3n){--s:20px}
.burst span:nth-child(7n){--s:11px}
default --d:145px, --s:15px.

#like:checked ~ .stage .burst span{
 --a: calc(var(--i) * 18deg);
 animation: burst .95s cubic-bezier(.16,.84,.44,1) both;
 animation-delay: calc(var(--i) * 9ms + 30ms);
}
Set --a on base too? --a depends on --i inline; define on span base: .burst span{--a: calc(var(--i)*18deg);} fine outside checked.
@keyframes burst{
 0%{opacity:0; transform:translate(calc(cos(var(--a)) * 6px), calc(sin(var(--a)) * 6px)) scale(0) rotate(0deg);}
 14%{opacity:1; transform:translate(calc(cos(var(--a)) * calc(var(--d) * .35)), calc(sin(var(--a)) * calc(var(--d) * .35))) scale(1.35) rotate(90deg);}
 100%{opacity:0; transform:translate(calc(cos(var(--a)) * var(--d)), calc(sin(var(--a)) * var(--d) - 34px)) scale(.15) rotate(620deg);}
}
calc nesting: cos(var(--a)) * var(--d) * .35 — calc supports number*number*length; simpler: calc(cos(var(--a)) * var(--d) * .35). OK.

Floaters:
.floaters{position:absolute; left:37px; top:37px; pointer-events:none; z-index:4;}
.floaters span{position:absolute; left:0; top:0; translate:-50% -50%; font-size:var(--fs,22px); color:var(--c,#ff6b9d); opacity:0; line-height:1;}
.floaters span::before{content:"♥"; display:block;}
#like:checked ~ .stage .floaters span{animation: rise var(--t,2s) ease-out both; animation-delay:var(--dl,.2s);}
@keyframes rise{
 0%{opacity:0; transform:translate(0,0) scale(.3) rotate(0)}
 12%{opacity:1}
 100%{opacity:0; transform:translate(var(--sw,0px),-215px) scale(1.15) rotate(var(--rot,20deg))}
}

Chip:
.chip{display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); font-weight:700; font-size:16px; color:#cfc6e2;}
.chip::before{content:"♥"; color:#ff5c93; font-size:14px; transition:transform .4s, color .4s;}
#like:checked ~ .stage .chip::before{color:#fff; transform:scale(1.2);}
.win{display:block; height:1.1em; overflow:hidden;}
.strip{display:block; transform:translateY(0); transition:transform .6s cubic-bezier(.3,1.3,.4,1);}
.strip i{display:block; height:1.1em; line-height:1.1em; font-style:normal; font-variant-numeric:tabular-nums; text-align:center; min-width:2.2em?} Numbers differ width (128/129 same width). fine.
#like:checked ~ .stage .strip{transform:translateY(-1.1em);}
#like:checked ~ .stage .chip{animation: chippop .5s .12s cubic-bezier(.3,1.6,.5,1); border-color:rgba(255,122,168,.55);}
@keyframes chippop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}

Quake on .world:
#like:checked ~ .stage .world{animation: quake .6s cubic-bezier(.36,.07,.19,.97);}
@keyframes quake{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(-8px,4px) rotate(-.4deg)}25%{transform:translate(7px,-5px) rotate(.45deg)}40%{transform:translate(-5px,3px) rotate(-.3deg)}55%{transform:translate(4px,-2px) rotate(.2deg)}70%{transform:translate(-2px,1px)}85%{transform:translate(1px,0)}}

h1 jig:
#like:checked ~ .stage h1{animation: jig .7s .06s cubic-bezier(.36,.07,.19,.97);}
@keyframes jig{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.6deg) scale(1.02)}50%{transform:rotate(1.3deg)}75%{transform:rotate(-.6deg)}}

Hint:
.hint{margin-top:54px; color:#7d7396; font-size:13px; letter-spacing:.02em;}
.hint b{color:#b9aed6; font-weight:600;}

Focus:
.like-toggle:focus-visible ~ .stage .btn{outline:2px solid #ff5c93; outline-offset:5px;}

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

Confetti inline pieces — 16:
1: --x:4%; c #ffd166; t 2.2s; dl .08s; r 620deg; dx 30px
2: --x:11%; c #ff6b9d; t 1.8s; dl .18s; r -480deg; dx -40px
3: --x:18%; c #7cd4ff; t 2.5s; dl .03s; r 760deg; dx 60px
4: --x:26%; c #b58cff; t 1.9s; dl .3s; r -540deg; dx -25px
5: --x:33%; c #7cf29b; t 2.3s; dl .12s; r 680deg; dx 45px
6: --x:41%; c #ff8f4d; t 2s; dl .22s; r -700deg; dx -55px
7: --x:49%; c #ffd166; t 1.7s; dl .06s; r 520deg; dx 20px
8: --x:57%; c #ff6b9d; t 2.6s; dl .28s; r 820deg; dx -35px
9: --x:64%; c #7cd4ff; t 1.9s; dl .1s; r -600deg; dx 50px
10: --x:71%; c #b58cff; t 2.4s; dl .2s; r 720deg; dx -30px
11: --x:78%; c #7cf29b; t 2s; dl .32s; r -560deg; dx 35px
12: --x:85%; c #ff8f4d; t 2.2s; dl .14s; r 640deg; dx -45px
13: --x:91%; c #ffd166; t 1.8s; dl .26s; r -500deg; dx 25px
14: --x:96%; c #ff6b9d; t 2.5s; dl .09s; r 780deg; dx -20px
15: --x:8%; c #7cd4ff; t 2.7s; dl .38s; r 880deg; dx -60px
16: --x:53%; c #b58cff; t 1.6s; dl .35s; r -440deg; dx 40px

Also add some confetti piece shape variety: i:nth-child(3n){width:12px;height:8px;border-radius:3px} i:nth-child(4n){height:20px;width:6px}.

Burst spans: 20 with --i 0..19:
`<span style="--i:0"></span>` ... `<span style="--i:19"></span>`.

Floaters 6:
1: --sw:46px; --rot:24deg; --t:2s; --dl:.22s; --c:#ff6b9d; --fs:24px
2: --sw:-52px; --rot:-18deg; --t:2.3s; --dl:.34s; --c:#ffd166; --fs:19px
3: --sw:30px; --rot:14deg; --t:1.8s; --dl:.45s; --c:#b58cff; --fs:27px
4: --sw:-36px; --rot:-26deg; --t:2.1s; --dl:.5s; --c:#ff8f4d; --fs:17px
5: --sw:60px; --rot:32deg; --t:2.5s; --dl:.6s; --c:#ff6b9d; --fs:21px
6: --sw:-20px; --rot:-10deg; --t:1.9s; --dl:.7s; --c:#7cd4ff; --fs:23px

Sub text & hint copy. Header kicker text: "PURE CSS · ZERO JAVASCRIPT". h1: "Go ahead, make it loud." with em around "loud." sub: "No scripts were harmed in the making of this button. Click it — every burst, shake and sparkle below is just :checked doing its thing." Hint: "Click the button to like · click again to un-like · <b>100% CSS, 0 lines of JS</b>".

transform-origin for svg throb: since svg small inside grid, transform-origin center works with display grid? Set .heart svg{transform-origin:50% 50%}. SVG transform-box: fill-box maybe needed: add `transform-box: fill-box; transform-origin: center;` to be safe. With scale animations on svg element (HTML-level? svg is replaced element, CSS transform works like normal element, origin default 50% 50% of element box). Fine.

One concern: `#like:checked ~ .stage .w-like b{transition-delay:...}` — the delay also applies when unchecking? No: when unchecked, the rule no longer matches, so delay reverts to 0 — good (instant snap back with base transition .55s). The .w-liked base delay stays on uncheck, letters fall back staggered — nice.

Also when unchecking, burst animations removed → spans jump back to opacity 0 base — fine.

Also let me add "crazy" extra: text stamp "WOW" appearing rotated? Could add .stamp ::after on stage: content "WOW!!"; positioned center, appears with pop on checked and stays? Stays is distracting. One-shot: animation wow 1s forwards: scale from 0 rotate -20deg → scale 1 rotate -8deg opacity 1 → fade out at end. Ending opacity 0. Do it: .stamp{position:absolute; left:50%; top:18%; translate:-50% -50%; font: italic 800 64px Georgia; color gradient pink; opacity:0; z-index:40; pointer-events:none;} checked → animation wow 1.1s .15s cubic both. Keyframes: 0% opacity 0 scale(.3) rotate(-30deg); 30% opacity 1 scale(1.15) rotate(-10deg); 45% scale(.95); 55% scale(1.05) rotate(-8deg); 75% opacity 1; 100% opacity 0 scale(1.1) translateY(-30px)? keep transform end simple.

But stamp overlapping header text — position above button, top around 30%? It's fixed relative to stage; with place-content center layout, top:22% might overlap h1 briefly — that's fine/fun. Use font-size clamp(40px, 8vw, 72px). Content "WOW!!"? Maybe "❤ LIKED ❤"? Let's do "WOW". Add stroke effect: color #ffd166 with text-shadow. Or gradient pink→gold. Keep: color:#ffd166; text-shadow: 0 6px 0 rgba(240,30,83,.45)? Eh, use two-tone: background gradient clip text.

Fine. Also z-index: .burst z 5 vs .btn content default z auto — text after burst in DOM anyway; heart before burst. Set .burst z-index 6, floaters 6, .heart z-index 2 to keep particles above.

Also .btn overflow visible default. Note burst/floaters positioned at left:37px — but on narrow screens button padding same, ok.

Double-check :has on body for background change — nice but optional; supported in latest Chrome. Keep.

Also make sure no horizontal overflow: quake translates ±8px inside stage with padding — fine; body overflow-x hidden anyway.

Edge: label contains input? No, input outside. Good.

Let me also give the stage a max-width for hint text.

Write final answer now. Also the letter-spacing on .w: apply letter-spacing:.16em; but last letter adds trailing space — set .w{letter-spacing:.18em; margin-right:-.18em} to compensate; minor.

Font-size of labelbox 19px might make button ~ total width: 54+15+ (6 chars*~14px) + 26 padding ≈ 240px. Good.

Also b letters: give .w-liked color #fff (on pink bg) and .w-like color #f6f1fb (current). On checked bg is pink gradient; base bg dark. Colors: .w-like{color:#f3edf9} .w-liked{color:#fff}.

The chip::before heart — content glyph might render as emoji on some platforms; "♥" U+2665 usually text; add font-family serif? Use "❤"? U+2764 may render emoji. Use U+2665 with `font-family: Georgia, serif;` to force text style? Simpler: small CSS-drawn heart? Overkill — ♥ in most browsers renders as text glyph, pink colored. Accept.

Now assemble the whole document. Also ensure animations "both" fill so pre-delay state = 0% (opacity 0). Base opacity 0 anyway.

For burst: base transform none → at animation start with delay, fill both keeps 0% state. Good.

Write it.