Kimi K3.1 Pro

I need produce one HTML pure CSS like button crazy animation click no JS. Should self contained visually stunning responsive first paint. Should comply no script likely. Should have interactions pure CSS checkbox hack, crazy animation click. Should have demo 1280x800 adapt. Should have no external files. I'll output exactly fenced html. Should think design. I can build art directed page heart like button checkbox hidden accessible label. On click animation: heart morph/bounce, radial rays, particles, shockwaves, confetti, perhaps background flash, counter increments purely CSS? Counter can toggle 2.4K / 2.4K? Pure CSS use checkbox and :checked selectors to animate. Should have no JS. CSS animations triggered on checked; when uncheck animate? crazy when click liked. First paint screenshot meaningful visible; perhaps checkbox unchecked with heart + pulsing subtle and prompt. On click checked intense animations. Must support click many times restarting. Should accessible input perhaps visually hidden focus, label. Use CSS variables, keyframes.

Could build centered stage on dark midnight gradient, editorial design "TINY BUTTON / BIG FEELINGS" with huge like button card. Heart composed SVG? Everything inline allowed; use SVG in markup pure CSS. User says pure CSS no JavaScript meaning HTML/CSS fine, SVG icons inline. Use CSS clip-path heart perhaps SVG easier with detailed heart path. Heart path M256 470... need good. Crazy animation: like button white circular orb, black heart initially, on checked red heart, spins? radial colorful sparks using 20 spans generated manually. Concentric rings. Confetti around stage perhaps. Button scales, rotates, squish, with spring keyframes; heart separately pumps and glitch? Label. Background changes neon gradient using body :has(#like:checked) perhaps :has widely latest Chrome supported, but easier wrapper `.experience:has(#like:checked)` CSS. Use form? checkbox input within section and all children siblings. For label semantics checkbox `#like` visually hidden then `.stage`. Could use CSS `#like:checked ~ .stage ...`. Page structure:
<body>
<main class="demo">
 <header ... brand CSS//01, text ...>
 <input type="checkbox" id="like" class="like-toggle" aria-label="Like this">
 <section class="stage">
  <div class="ambient ...">
  <div class="copy"> ...
  <div class="button-zone">
    <div class="orbit ..."> etc
    <div class="burst" aria-hidden> 24 i custom properties.
    <label for=like class=like-button>
       <span class=halo>
       <svg class=heart ...>
       <span class=shine>
    </label>
    <div class=counter><span liked>...</span>
  </div>
  <p class=hint>CLICK THE HEART ...</p>
  <div class=toast>...
 </section>
 <footer> etc
</main>
Should label placement if input preceding stage, :checked ~ stage selectors.

A key challenge checkbox invisible but focus style. label click toggles. No JS. Should checked styles not remain static animation? CSS animation only runs upon style application, yes. Unchecked resets. Reclick can replay. Use `animation-fill-mode: both` perhaps final liked state separately transforms. Should have initial state button has float animation; on checked crazy timeline overrides. Could keyframes include ending scale 1.06. Button and heart animations. Counter can swap by opacity / transform. Toast pops. Side texts perhaps tilt.

"Click me" visible. First screenshot should show button and decoration static enough, not initial animation invisible due delay. Particle spans at center with opacity 0 initial. Ambient CSS subtle always animate perhaps first paint okay.

Should crazy animation quality. I can implement:
- Screen shockwave pseudo stage flash via `stage::after` radial gradient; checked animation `flash 1s`.
- Button animation `button-pop 1.25s cubic-bezier...`: 0 scale1; 12 scale .78 rotate(-8); 24 scale1.32 rotate(8); 38 scale .92; 52 scale1.14; 70 scale1; 100 scale1.03. Box-shadow changes.
- Heart `heart-go 1.25s`: scale transformations rotate, fill color via base.
- Rays 12 lines around, each transform rotate(var(--r)) translateY(-98px) scaleY(0); checked animation `rays .65s` with transform origins etc. Position each span absolute width 4 height 26 border radius; transform rotate(angle) translateY(-100px); animation keyframe cannot preserve custom angle? `transform: rotate(var(--r)) translateY(-95px) scaleY(...)`. define from to. Each span opacity.
- Particle dots 20 spans each --a --d --delay --size --color. At center; checked animation `particle 1.1s var(--delay) cubic... both`. Keyframe from transform rotate(var(--a)) translateX(30px) scale(0) rotate(calc(-1*var(--a)))? CSS calc negative angle supported `calc(var(--a) * -1)`. To keep shapes aligned irrelevant. 0 opacity 0; 10 opacity1; 100 transform rotate(var(--a)) translateX(var(--d)) scale(0) rotate(720deg); opacity0. Starting at center. Different squares/circles. Could use 24 spans. Ensure no issue custom property types. `--a: 0deg`, `--d: 190px`.
- 3 shockwave circles: absolute border 2px solid; scale .6 to 2.2 fade, delays.
- Orbiting text? two satellites emojis? Avoid emoji varying. Could have CSS star icons built as spans; liked fly out "YESSS" pill with rotation. Toast.
- "like-o-meter" bar? Counter pure CSS number switch. On checked count from 8,421 to 8,422. Use two spans. Add `+1` floating.
- Button label click toggles, below text changes "LIKED. OBVIOUSLY." with second label? Should entire button remains clickable. `label` wraps svg only. counter in separate div.

I can make stylish off-white background perhaps crazy colors pop. Dark UI allows neon. Art direction perhaps "Interaction Study Nº 01" pastel lavender background and orange heart, neo-brutalist card. User asks button not app, avoid overbuild but enough visual. Center on near-black navy with grain via gradients no image. Header "SMALL CLICK. / BIG REACTION." huge typography, small labels. Main giant heart button in central yellow/lavender panel. Should ensure responsive and no horizontal scroll.

Perhaps design split layout: left copy, right button stage. 1280x800 page with top bar and foot; card at 80,100 size 1120x620. On mobile stack. Button should be dominant. Crazy full-screen background ring. Use text huge on left 64px. Right circle 200px. Could center only more focused. "GO ON. / GIVE IT / SOME LOVE." with giant left title. Stage card colorful. Like count. On click background grid shifts and letters bounce? CSS can animate decorative words using sibling selectors.

Should pure CSS emphasis perhaps top chip "100% CSS · 0% JAVASCRIPT". Footer "CHECKBOX HACK / TAKE IT FOR A SPIN". No scripts.

Make sure not inaccessible due checkbox display none prevents keyboard? Use input opacity 0 position fixed? If opacity 0 and dimensions 1px outside still tabbable. Use `.like-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }`. `pointer-events:none` checkbox label still toggles yes keyboard input tab can focus but pointer events doesn't disable keyboard. Label focus? input focus-visible ~ .stage .like-button outline. Good.
A label's inner spans no issues.

Could allow space toggles after keyboard focus; page first interaction. Since keyboard only after click sandbox but task doesn't demand game instructions.

No external fonts. Use system `Arial`, `Helvetica Neue`, perhaps monospace. Could use very bold `Arial Black`, Impact. Great design with typographic strong.

Potential `:has` avoid. Use sibling selectors.

HTML:
<input class="like-input" type="checkbox" id="love">
<div class="page">
<div class="noise"></div> perhaps CSS no images.
<header>
<a? no need>
<span class=brand><i>...</i> CSS PLAYGROUND</span>
<span>EXPERIMENT <b>001</b></span>
</header>
<main class=card>
 <section class=copy>
  <div class=eyebrow><span dot></span> AN INTERACTION WITH FEELINGS</div>
  <h1>SMALL<br>CLICK.<br><em>BIG</em> ENERGY.</h1>
  <p>A deceptively simple like button ...</p>
  <div class=instruction><span class=mouse-icon ...>...</span> PRESS THE HEART <span>↗</span></div>
 </section>
 <section class=playground>
   <span class=corner top>CLICK ZONE</span>
   decorations stars
   <div class=button-wrap>
     <div class=word-pop>... maybe>
     <div class=shockwaves>...
     <div class=particles> 24 spans ...
     <div class=rays>...
     <label class=like-button for=love>
       <svg ... path>
       <span class=button-gloss>
     </label>
     <span class=plus-one>+1</span>
   </div>
   <div class=status>
     <div class=count-window>
       <span class=count before>12,408</span>
       <span class=count after>12,409</span>
     </div>
     <span class=status-label...>
   </div>
   <p class=reset>CLICK AGAIN TO REPLAY</p>
 </section>
 <div class=flash></div>? stage pseudo.
</main>
<footer...
</div>
Make sure selector `.like-input:checked ~ .page .like-button` works. Page is sibling after input.

On mobile: body min-height 100svh, .page width etc, card grid columns .95fr 1.05fr; padding 24. .playground min-height 500? At 1280x800 top header 60 footer 40, card ~650. h1 font clamp(48,5.5vw,80). Main max-width 1180; height perhaps calc(100vh-140) min-height 600 max? Should at 800 looks polished. body display grid place-items center? .page min-height 100svh padding 24 32 18; header height 44; main flex:1; footer 32. .card min-height 580; border-radius 30; display grid. At 800 with padding top 22+header 40+gap20 + main 610 + footer 30 = 744 okay. Use page max-width 1280 margin auto. `.card { flex:1; min-height:560px; }`, page height 100svh? If min-height and flex works but main indefinite? .page min-height 100svh display flex. Main flex 1. 800 total padding 24*2=48 + header 38 + footer 30 + gaps 32 = 148 -> card652. good. 560 minimum leads 708 min on smaller height scroll vertical okay. At mobile stacking card, 375 wide with copy and playground would be very tall ~1000 but okay no horizontal. Screenshot mobile first 800 perhaps should show button within first view? Should adapt. I can on mobile shrink copy h1 and card layout, no massive content before button. At max 700 width .page padding 16; header; .card grid-template-columns:1fr; .copy padding 28 24 0; h1 br behavior? `h1` 46px line .86, four lines = 160 high; paragraph perhaps hide? Playground 360; overall >800. Could reorganize mobile: h1 two lines perhaps HTML spans. Use h1 `SMALL CLICK.<br><span>BIG ENERGY.</span>` two-three. Desktop title 3 lines? `SMALL<br>CLICK.<br><span>BIG ENERGY.</span>` span long perhaps width. At mobile hide first descriptive p and use h1 font 42. main min-height etc. Could put button first via order? better top copy 180, stage 390 total 620 + header etc fits. h1 desktop "SMALL" line "CLICK." line "BIG ENERGY." with third perhaps font 60. Card left width 45%, enough for big energy 420 width at font 64 ~380. At mobile 42 ~250.
Perhaps title "A LITTLE<br>LIKE WITH<br><em>A LOT</em> OF<br>ENERGY." too many.
"CLICK.<br>THEN<br><em>BOOM.</em>" very bold short. Supporting "A like button with absolutely no chill." Strong. Desktop 3 lines huge 90. mobile 2? h1 can be "CLICK.<br><span>THEN BOOM.</span>" at desktop second line too long perhaps 76*9 ~400. Fine. Text "A like button with absolutely no chill." clear.

Could center button with headline left. First paint action visual.

Colors: body #11100f dark, card #f4f0e8 cream left, right #7657ff purple? Main card single cream with right bright chartreuse? Heart coral. A crazy like button needs vivid. Use card background #f4f1e8, border 1px rgba; copy dark #181818; playground background `#7557ff` with subtle radial. Button #f7f4ec; heart initially #1d1c1a then `#ff4d6d`. particles yellow #f7ef63, pink #ff6c9f, cyan #71f6e5, white. At checked background flash perhaps playground has overlay radial white pulse. Purple canvas makes heart pop.

Style card border-radius 28 overflow hidden. Copy has top grid label. Add scribble underline with CSS rotated rectangle perhaps. Playground border-left 1px. On mobile border top. Button white 190 circle, box shadow 0 18px 0 #4b34b6, 0 28px 50px dark. It physically depresses on active via `.like-button:active { transform:translateY(10px); box-shadow ... }` but checked animation transform conflict. Active styles perhaps animation wins over transform, but box shadow works. Could include active no need.
Label cursor pointer, touch-action manipulation, user-select none; -webkit-tap-highlight-color transparent.

Heart SVG viewbox 0 0 100 100 path classic `M50 87C43 80 14 58 14 34C14 18 25 10 37 10C45 10 50 15 50 15S55 10 63 10C75 10 86 18 86 34C86 58 57 80 50 87Z` shape perhaps weird. Use standard `M50 88.4 42.2 81.1C17.6 59.3 4 47.1 4 29.7 4 15.2 15.2 4 29.5 4c8.1 0 15.9 3.8 20.5 9.7C54.6 7.8 62.4 4 70.5 4 84.8 4 96 15.2 96 29.7c0 17.4-13.6 29.6-38.2 51.4L50 88.4Z` scaled 96. Better common heart `M50 88 43 81.5C18 59 5 47.5 5 30.5 5 16.5 16 6 29 6c8 0 16 4 21 10 5-6 13-10 21-10 13 0 24 10.5 24 24.5C95 47.5 82 59 57 81.5Z`. Shape okay. Simpler `M50 86S8 61 8 32C8 14 30 6 42 22L50 32 58 22C70 6 92 14 92 32C92 61 50 86 50 86Z`. That has indent 32 lower than peaks. Looks fine. Common path from Font Awesome: `M47.6 85.4 42 80.2C16.8 57.5 4 45.8 4 29.6 4 15.2 15.2 4 29.6 4c8 0 15.7 3.7 20.4 9.6C54.7 7.7 62.4 4 70.4 4 84.8 4 96 15.2 96 29.6c0 16.2-12.8 27.9-38 50.6l-5.6 5.2c-1.3 1.2-3.5 1.2-4.8 0z` heart width 96 and height ~82. good.

Could include heart lines echo using svg duplicated? Use `.heart-echo` pseudo impossible svg. Add three outline hearts around at checked flying. Extra spans `.mini-heart` using CSS rotated square with ::before after circles, but complex and cool. Use inline SVG clones in `.heart-ghost ghost-one`, etc. On checked fly out.

Crazy timeline:
At check:
- `.playground::before` base grid always. `.playground::after` overlay background radial gradient opacity animation.
- `.card` animation `card-kick .7s`: transform translate perhaps whole card subtle shake at 25% but don't induce scrollbar since overflow body x hidden. Better only button zone.
- `.button-wrap` `wrap-shake .75s .15s` rotates +-2deg translates.
- `.like-button` animation 1.35s.
- heart color transition via base checked fill #ff3e6c; `heart-pop`.
- `.heart-glint` animate.
- shockwaves `.wave` animation 1s delays.
- rays `.rays` rotate 720? On checked `.rays { animation:ray-spin 1.4s }`; each line `animation:rays-out .75s`. But parent with opacity no issue.
- `.particles i` each animation. Use manual 24 styles. style attributes allowed inline, CSS variables. No JS.
- `.plus-one` transform etc opacity; initial 0.
- `.status-before` up fade; `.status-after` from down fade. Checked after final visible. On uncheck immediate base.
- `.liked-copy` etc.
- `.boom` giant outlined word behind button appears "WOW!" rotate scale; at checked animation `boom-word 1.4s both`, ends opacity perhaps 0 (after crazy) or static subtle `YEP.`? Could show `NICE.` final. Add `.burst-word` text `YES!` final opacity .12 behind. At 0 scale .2 rotate -25 opacity0; 30 opacity .28 scale1.4; 100 scale1 rotate -8 opacity .12. This remains after animation, contributes final state.
- Confetti pieces continue perhaps fall after burst: particles travel and rotate.
- Floating side captions "THAT'S / THE STUFF" appear bottom right? Keep no clutter.
- Button remains red liked with colored glow; hint changes "AGAIN? ABSOLUTELY."; user can click again.

Potential animation on page load accidentally because :checked no. Fine.

Pure CSS count can animate via vertical translate container with fixed height:
`.counter-values {display:grid}` before/after absolute. Base before opacity1 after0. Checked before animation count-out .35s .1s forwards; after count-in .45s .22s both. Status label base `.before-label`; after label. End labels. Use CSS.
Perhaps like count initial "24,916" and after "24,917". no need aria live since no JS. Label aria-label? `<label ... aria-label="Like this experiment">` label can aria-label though label isn't usually accessible focus; hidden input aria-label. Add title.

Should have CSS no @property required.

Could use native checkbox with `appearance:none` as actual visible? Input hidden plus label robust.

Make sure CSS animations reset on unchecking. If animation ends fill both then after persists. Good.

Rays span manual 16 with --r and --c. Could combine particles 24. CSS styles no network.

I'll consider response code length perhaps 600 lines? Desired around 400. I'll output exactly html. I can produce polished ~450 lines.

I should think user asked "a 'like' button in pure CSS, no JavaScript, that does a crazy animation when you click it" User may expect just button, not instructions to game. Fine. Avoid any `<script>`. No external requests. No localStorage etc.

First paint no animation necessary but meaningful. Button visible. Could have initial idle ring pulse and "GO ON, CLICK IT" sticker bob. Keep crazy reserved click. Idle animation heart subtle after 1s infinite. On checked heart animation overrides. Button idle perhaps floating infinite; checked `animation: button-pop ...` then stops final. If base animation infinite `idle-float`, applying checked animation new resets. On uncheck replays idle; okay.

I want final state fill red. CSS `.like-input:checked ~ .page .heart { fill:#ff416c; animation: heart-pop ... }`. SVG path is `.heart` itself svg with fill base. `filter: drop-shadow`. keyframes with transform. `transform-origin:center`.

Button base `animation: idle 3s ease-in-out infinite` translation slight. Checked animation `button-crazy 1.25s cubic... both` no infinite. End transform translateY(-3px) scale(1.03). Parent perhaps animation.

Screen confetti after animation disappear, final calm. Crazy on each re-check. If uncheck no crazy (button transitions). User can click again to replay as text says.

Could trigger on both check and uncheck? only checked crazy; enough.

Checkbox state can be toggled by clicking label; click on counter not toggle. Instruction arrow pointing. Button label large 180. Playground grid with particles extends beyond but overflow card hidden. No horizontal body.

Detailed responsive:
```
* {box-sizing:border-box}
html,body{margin:0; min-height:100%; }
body {background:#131217; color...; font-family...; overflow-x:hidden;}
.page {width:min(100%, 1320px); min-height:100svh; margin:auto; padding:22px clamp(18px,3vw,42px) 16px; display:flex; flex-direction:column; gap:18px;}
.topbar {display:flex... height:34}
.card {flex:1; min-height:580px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr); ...}
.copy {padding:clamp(32px,4vw,64px); display:flex; flex-direction:column; position:relative}
h1 font-size:clamp(56px,6.1vw,88px); line-height:.86; ...
.playground {min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; padding:48px 24px 32px;}
.button-wrap {position:relative; width:240px; height:240px; display:grid; place-items:center; flex:none;}
.like-button {width:174px;height:174px; position:relative; z-index:5...}
...
```
At 1280 card content width ~1196, left 520 right 676. H1 78. "BIG ENERGY." length 11*~48 average? font 78 bold average 48? Arial Black actual average 50? 11 incl spaces ~480 perhaps fits left inner width 400? H1 span perhaps font .72em to fit or title lines "PURE" etc. Use h1 `CLICK.<br>HARD.<br><span>BOOM.</span>` succinct each <6 chars. Supporting line clear. Better "CLICK.<br><span>HAPPY.</span><br>BOOM." Hmm.
"CLICK.<br><span>THEN</span><br>BOOM." Big. Text above "A LIKE BUTTON / WITH NO CHILL". This reads. 3 lines. H1 94 at 1280, width ~360 for CLICK. fits. On mobile 64.
Eyebrow "CSS INTERACTION / 001". Paragraph "An innocent little heart with absolutely no chill. Go on—give it a click." instruction.
A sticker circular "NO JS" in top right playground using dashed border rotation? Top badges.

Header brand "CSS ONLY" boxed lime dot; "MICRO-INTERACTIONS / VOL. 01". Footer left "BUILT WITH: HTML + CSS + ONE CHECKBOX"; right "NO JAVASCRIPT WAS HARMED". Could be quirky.

Card copy background #f3f0e8. Bottom copy foot label `hover? cute. click? chaos.`. Add arrow line.

Playground top caption "THE LIKE BUTTON" and badge "CLICK TO TOGGLE". bottom count.

Pseudo background grid:
```
.playground::before {
content:""; position:absolute; inset:0; z-index:-2;
background-image:linear-gradient(rgba... 1px,transparent 1px),...;
background-size:32px 32px;
mask-image:linear-gradient...; // supported
}
.playground::after { ... z-index:-1; background:#8f75ff; }
```
But `.playground` background purple. ::before grid z-index0 and children z1. Use isolation and z -? if `::before z-index:0`; direct children position relative z1. ::after flash z-index 8 pointer-events none may cover button briefly with mix-blend-mode overlay. If after covers and pointer events none okay. But if opacity final 0. Set background radial, opacity 0.
Better .grid div separate no need.

Particles z-index4, button z5, burst word z1. Waves z2. Counter z10? Since particles around may overlap counter visually intentionally. Pointer events none all decoration.

`.button-wrap` width 260 height 260; particles from center to 230 exceed stage but stage okay. Button central around y 50% minus perhaps counter. status margin-top 22.

Coordinates particle spans absolute left:50%;top:50%; width var; height var; margin negative half? `translate:-50% -50%` individual CSS property then animation transform. Latest Chrome supports translate but avoid combining potential. Set `margin-left:calc(var(--s)/-2); margin-top:calc(var(--s)/-2);` CSS division syntax `calc(var(--s) / -2)` supported modern. Easier width 10px height10 then transform includes initial translate(-50%,-50%) but keyframe rotations order. Set left:calc(50% - var(--s)/2) problematic. Use fixed width/height 12, variations scale. left:50%;top:50%; margin:-6px; --s scale not needed. Different width via var and margin fixed centering slight negligible. Use `width:var(--s,12px); height:var(--s,12px); transform:translate(-50%,-50%)`; keyframes include `translate(-50%,-50%) rotate(var(--a)) translateX... scale`. Order transformations applies right to left but particle direction okay. At 100 `translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) rotate(540deg) scale(0)` shapes spin. At start translateX 30. Great.
Set particle `opacity:0; background:var(--c); border-radius:50%`; some `.square` border-radius:2px. `.dash` width:18 height:6 perhaps custom `--h`. Keep var h.
Animation delay `var(--delay,0s)`.
Keyframes:
```
0% {opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(28px) scale(.2);}
12% {opacity:1;}
65% {opacity:1;}
100% {opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) rotate(var(--spin,540deg)) scale(.15);}
```
Because rotate(a) then translateX(d) means particles radiate.
Custom a values 0deg 17 etc. d 150-245. On mobile stage width 343 and d 245 extends clipped okay. Button still clear.

Rays at center 16 lines, each base transform rotate(var(--r)) translateY(-100px) scaleY(0); opacity 0; transform-origin:center? span height 24, base positioned center with margin. If transform rotates itself and translates then ray line orientation tangent? Rotate a then translateY(-100) yields line orientation rotated same, so line radial vertical rotated to radial yes. Animation:
0 scaleY(0) translateY(-75)
35 opacity1 scaleY1 translateY(-108)
100 opacity0 scaleY(.2) translateY(-140)
Use each `--r` multiples. `.rays` z4 pointer events none; perhaps rotate parent.

Waves:
absolute inset:15px; border-radius50; border 3px solid var; opacity0; initial transform scale(.65); checked animation `wave 1.1s ...`. Delays. End scale2.4 opacity0. In stage center.
A big thin solid ring final? `.liked-ring` base opacity0; checked animation ring-in 1s .8 both final opacity .5 transform scale1; dashed ring rotate infinite after? Can't combine two animations on same transform sequential with infinite perhaps use `.liked-ring { animation:ring-arrive .8s .8s both, ring-spin 14s 1.6s linear infinite; }` two transform animations conflict (last wins). Use outer ring arrival and pseudo inner spin. Or no need.

Add `.orbit-label` pill at top of button perhaps "SMASH IT". Base at top right rotated 8, animation idle tag. On checked animation tag-whee 1s both ending transform rotate(-8) translate... content via ::after change? `.tap-tag .before`, `.after`. Could have "CLICK ME" visible first. This adds affordance. Position absolute top:8 right:-24 z7 background #f5f268 color black border 2 solid black padding 8 12 box-shadow 4px 4px 0 #19171f; font 11 weight 900. On checked background coral perhaps and text using opacity. But right negative at mobile still within. On click tag pops away? Crazy if spins to other side. `transform` animation with rotate 360 scale, final rotate(6deg). Text can switch via `.tag-before/.tag-after`. Initial tag text "CLICK ME"; after "NICE!".
Should button wrap label top can intercept clicks? pointer-events:none tag.

Counter area: black/dark capsule on purple? `.status-card` background rgba(20,15,48,.22); border 1px rgba white .22; backdrop-filter blur(8px) (supported); border-radius 16; padding 12 22; color white; display flex gap14; z 6; box shadow. Heart small icon? perhaps number bold 22, label uppercase 10. Base before visible. Under "CLICK AGAIN TO REPLAY" opacity .65 always but unchecked "YOUR CLICK = INSTANT CONFETTI". Toggle text with pseudo content? Use `.input:checked ... .replay span...`.
```
.microcopy .idle {display...}
.microcopy .liked {opacity0 position abs}
checked animations...
```
No need dynamic perhaps "CLICK AGAIN TO UNDO · REPLAY THE CHAOS" always accurate; first click "click again to undo" okay. "CLICK IT. THEN CLICK IT AGAIN." works.

Heart small bursts perhaps enough with 24 particles + waves + word + shake + rays + counter + flash. Crazy indeed.

Card shake selector on checked `.playground .stage-content`? `.button-wrap` animation wrap-jolt with translate; but button animation itself. Add `.playground` animation? Transform on whole right side could reveal card gaps and create weird. `card` animation `card-thump .5s` transform translate 0, -2, etc; card overflow hidden but body no horizontal. This is extra crazy but slight. `.like-input:checked ~ .page .card {animation:card-thump .6s ease-out}`. Since transform of entire main includes copy too. Good, creates impact. Not too motion uncomfortable; could `@media(prefers-reduced-motion:reduce)` disable nonessential. But user wants crazy. Include reduced motion CSS courteously; then checking only transitions no animations. Could reduce all:
```
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after {animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important;}
}
```
This also particles instantly invisible and counter final states via fill modes. Fine. Not necessary but polished.

Should check use hidden checkbox at body beginning `.like-input {position:fixed; opacity:0; width:1px; height:1px; left:0; top:0;}` Might cause 1px invisible no scroll. `clip-path:inset(50%)`. focus-visible selector outline. Input cannot be clicked directly but label works. `aria-label="Like this CSS experiment"` and perhaps `role` no. Label `for`.

Potential Chrome screenshot after 3 seconds idle tag bob etc visible. Main card initial min-height 580 at 800. I'll compute:
page height min 800 padding top22 bottom16 = 762 content, gaps18*? children header main footer = two gaps 36. header 32 footer24 leaves main670. Great. card height 670. Copy padding64. h1 line .84 * 86*3=217 plus eyebrow 20+margin35 + paragraph48+ etc fits. Button stage width around 640, center. Button wrap 270, status 66, micro 14 plus gaps ~20 = 390 centered. Top badges absolute. Great.
At viewport 1280 width: page horizontal padding 38*2 =>1204. grid columns .9fr 1.1fr with min right430 => left~500 right~704? total 1204, left 480 right 724? .9/2*1204=542, 1.1=662. Copy inner 542 - 2*56=430. h1 6.6vw=84.5, "CLICK." Arial Black width ~320 fits. Good.
Main card border radius. Topbar 1280 etc.
At width 800 >760 break perhaps grid left 45 right min430 total available 750 left320, h1 56 and padding32 -> inner256 "CLICK." ~205 fits. Right430. Okay. At 760 switch single.
Mobile width 375: page padding14, available347. card grid one, min-height unset. copy padding28 24 20, h1 58 3 lines 146, eyebrow 12 + margin22, p 40 + margin etc, instruction perhaps hide. Copy height ~310. playground min-height 400 => card710 + header30+footer perhaps50 + gaps = 830 >800 slight; screenshot bottom clipped but button around 500 within viewport. Good. Could make mobile h1 two lines by hide `<br class=mobile...>`? Keep. To ensure button visible at 375x800, copy reduce:
h1 font54 line .84 136; eyebrow12+20=32; p line 2*20=40 +20 =60; copy padding24+12=36 total264; instruction display:none; .copy-footer display:none. Card top starts 72; button stage begins336; stage content center of 400 y536; button center y? content entire 340 center so button center ~500; visible. Counter ~660. Fine. footer below. Good.
At mobile topbar right meta hide. Card main first copy plus playground. .playground min-height:400. Button wrap230; button154. Particles d up to240 clipping but okay. Status.
At 375 width `burst-word font-size:150` fits 4 chars "YES!" width ~330, perhaps clip in stage intentional.
Top left card h1 with span outlined? `h1 .boom { color:#7657ff; position:relative; display:inline-block; }`, underline hand drawn using ::after bottom -8 background #ff5e7a height8 width100 transform rotate(-2) border-radius. On checked animate .boom color flicker? selector can animate title pop at click, e.g. `h1 .boom {animation:boom-type .8s .15s}` scale 1.15 rotate; adds whole interaction.
Left copy "An innocent little heart with absolutely no chill." Good.

A tiny demo formula in bottom: `<span class="css-pill">:checked</span><span>+</span><span class=css-pill>@keyframes</span>`. This reinforces pure CSS.
Header right "100% CSS / 0 JS". Perhaps duplicate footer not needed.

Do I need display no JS exact. Top badge lime `PURE CSS` and footer "0 LINES OF JAVASCRIPT". Nice.

No actual links to avoid navigation.

Semantics decorative `aria-hidden=true` on particle containers and text. label includes SVG aria hidden. Counts perhaps screen reader duplicate before/after but can aria-hidden on visual and input label gives action. Add hidden live text impossible update. Fine.

Could use `<span class="sr-only">` but no need.

I'll plan code exact selectors:
input then page.
```
.like-input:checked ~ .page .card { animation: card-hit .65s ...; }
.like-input:checked ~ .page .playground::after { animation: flash...}
.like-input:checked ~ .page .button-wrap { animation: wrap-jolt 1.15s ...;}
.like-input:checked ~ .page .like-button { animation: button-crazy 1.35s ...; background:#fff9f3; box-shadow...}
.like-input:checked ~ .page .heart { fill:#ff426d; animation:heart-crazy...}
...
```
Base `like-button` `animation:idle-float 3s ... infinite;` with box-shadow base. Checked animation sets transform but box-shadow static liked final.
Tag base animation tag-bob infinite; checked tag `animation:tag-spin .8s ... both; background:#f6ef63`.
`.tag-idle`, `.tag-liked` absolute? tag flex. Base liked display none; checked idle opacity0 and liked opacity1; no animation. Use `.tag-liked{display:none}` / checked display:inline. Fine no layout because tag fixed min-width.
`+1` initial opacity0 position absolute top:40 right:12 perhaps. Checked animation plus-fly 1.2 .3 both.
`burst-word` initial opacity0; checked animation word-burst 1.2 .1 both.
waves 3 spans styles --delay --wc.
rays 12 spans with inline --r etc, all base opacity0. Checked each `animation:ray-burst .8s var(--delay,0s) ease-out both;`.
particles similar.
Counter:
```
.counts {position:relative;width:86px;height:28px;overflow:hidden;}
.count {position:absolute;inset:0;display:flex;align-items:center;justify...}
.count-after{opacity:0;transform:translateY(120%)}
checked before animation:count-out .35s .15s forwards
checked after animation:count-in .5s .28s ... both
```
Status copy `.label-before`, `.label-after`; label after display none on checked. no need fancy.
`plus-one` ending opacity0.
`microcopy` after perhaps base `CLICK AGAIN? WE DARE YOU.` static okay.
Decorative corner shapes always float; on checked animate star spin. Add `.spark.s1` CSS four-point star using clip-path polygon. s1 top 22% left12%, s2 bottom20 right12 etc. At checked `animation:decoration-spin .9s ...`. Could include but particles enough.
CSS star shapes in purple environment yellow/pink.

Flash after `position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 46%,rgba...);mix-blend-mode:screen`. checked animation flash .75. Ends opacity0. Important `::after` on playground might cover counter at flash but desired. `::before` grid z0. Children `.playground > * {position:relative; z-index:1}` but corner absolute definitions need preserve position; don't broad selector. Set specific `.playground-top`, `.button-wrap`, `.status-card`, `.microcopy`, `.deco` z.
Flash z20.

After checked ring persistent perhaps `.like-button::before` is button gloss? label pseudo can do rotating dashed border:
```
.like-button::before {content:"";position:absolute;inset:-18px;border:1px dashed rgba(255,...);border-radius:50%;opacity:0;transform:scale(.6) rotate(0);}
checked .like-button::before {animation:ring-in .8s .65s both, ring-rotate 12s 1.45s linear infinite;}
```
Multiple animation transform conflict; second starts after first but before delay fill? CSS ring-rotate with backwards? default none, before start ring-in works; after second starts both active but later overrides transform. opacity ring-in final persists, ring-rotate keyframes only transform doesn't affect opacity? CSS animations only properties specified, yes ring-rotate transforms overrides after starts; ring-in transform ends same scale1 rotate0 so seamless. Great.
Pseudo ::after gloss radial circle small. Base button uses after shine, checked `animation:shine-flash .8s`. But button label actual overflow visible; background circle. `::after` inset:12 border-radius; background linear gradient; opacity .45 pointer.
`heart` z2 position relative width84.
Perhaps inset ring pseudo z -1 if button stacking? `like-button` no overflow hidden to allow ring. ::before z-index:-1 but label has stacking due z-index5 and transform; negative within appears behind button background perhaps hidden under background but outside visible. Good. ::after inside.

`heart` filter drop-shadow base none; checked drop shadow.
Should preserve heart inside label with pointer events none.

Tag animations transform but positioned.

Button focus outline:
```
.like-input:focus-visible ~ .page .like-button {outline:4px solid #f7ef63; outline-offset:8px;}
```
Checkbox visually hidden `clip-path:inset(50%)` focus should still work via tab. Good.

Use `@keyframes idle-float` transform translateY 0 and -5. Checked final button transform none? final `translateY(-4px) scale(1.03) rotate(0)`.
`button-crazy`:
0 transform translateY(0) scale1 rotate0
10 translateY(10px) scale(.86,1.08) rotate(-4)
22 translateY(-24px) scale(1.18,.85) rotate(7)
34 translateY(3) scale(.92,1.12) rotate(-6)
48 translateY(-10) scale(1.1,.94) rotate(4)
62 translateY(0) scale(.98,1.03) rotate(-2)
78 translateY(-5) scale(1.04) rotate(1)
100 translateY(-4) scale1.03
Box-shadow stays liked from start not animated but fine.
Heart:
0 scale1
12 scale .7 rotate-12
25 scale1.45 rotate12
36 scale .85 rotate-8
48 scale1.2 rotate5
62 scale1
72 scale1.12
100 scale1
fill changes instantly to pink; perhaps keyframes fill from dark to pink at 15; CSS SVG fill animatable. Include `0%,8% {fill:#242027}` `24%,100% {fill:#ff426d}` plus transforms. But base checked fill set. keyframes controls fill during. Great.
At 24 could white then pink? 20 fill #fff; 32 #ff426d. Crazy.

Wrap jolt uses transforms x/y; might conflict no base. Good.

Count accessibility not critical.

Rays keyframes custom transforms need valid:
```
@keyframes ray-burst {
0% {opacity:0; transform:translate(-50%,-50%) rotate(var(--r)) translateY(-72px) scaleY(.1);}
30% {opacity:1;}
65% {opacity:1; transform: ... translateY(-110px) scaleY(1);}
100% {... translateY(-140px) scaleY(.3);}
}
```
Span left50 top50 width5 height28 margin? transform translate -50 center each keyframe yes.
Base same. Since translate(-50%,-50%) percentages refer own dims, good.
Rays color inline `--c`.
Waves absolute left50 top50 width160 height160 margin -80 to center; transform scale.
Particle base has custom background.

Screen high energy but initial calm. `burst-word` z-index? inside button-wrap before waves label:
```
<span class=burst-word aria-hidden>YES!</span>
<div class=waves ...>
...
<label...
```
burst word position absolute z0 width max-content font-size170 color transparent -webkit-text-stroke:2px rgba(255...). Button wrap has width270 height270; word can overflow visible. Button z5. Word behind. On checked ends opacity .16. If z0 and button-wrap itself stacking perhaps visible. Grid background z0 but children z1.

`status-card` margin-top:16 position relative z6. `button-wrap` z2. Waves scale 2.4 can overlap status but pointer none. status higher due separate stacking? button-wrap z2 creates context, status z6 above all children within button wrap. Good. Flash highest.

Microcopy z6.

Decor star z1.

Card title click animation .boom with transform-origin:left center.

Mobile keyframes particles d unchanged but stage overflow hidden no scrollbar.

No `@import`, no external.

Could add cursor custom pointer. Fine.

Should test mentally no syntax errors. All CSS selectors valid. Inline style CSS vars e.g. `style="--a:8deg;--d:190px;--c:#f8ee65;--delay:.02s;--spin:620deg"` CSS custom okay.
Should have 16 rays perhaps enough 12. Particle 28 creates markup but fine.

First screenshot perhaps idle animations begin at load and screenshot 3 sec, label positions okay. Button idle keyframe infinite no hidden.

Footer on mobile may wrap. topbar `.top-meta` hide at 520. `.footer-note:last-child` hide mobile to fit. Page no horizontal.

At max760:
```
.card{grid-template-columns:1fr;min-height:0}
.copy{padding:30px 28px 24px;min-height:0}
.copy h1{font-size:clamp(50px,12vw,72px); margin:22px 0 18px;}
.copy h1 br:nth... no
.intro{max-width:480px}
.instruction{display:none}
.formula{margin-top:22px}
.playground{border-left:0;border-top:1px solid ...;min-height:430px;padding:38px 20px 30px}
```
Formula adds height; hide on mobile `.formula{display:none}` to compact. Copy 3 lines ~180, eyebrow+22 30, p perhaps50, padding54 =314. Playground430 total744 + header etc = >850. button center around 600 visible, counter perhaps750. Fine. At 375 first 800 card bottom cut but okay adaptation. Could change h1 layout at mobile to inline segments to 2 lines? Markup `CLICK.<br>THEN<br><span>BOOM.</span>`. Use `@media max760 h1 br:nth-of-type(1){display:none}` would "CLICK.THEN" no space unless `CLICK.<br> THEN` whitespace collapse around br hidden? I can add spans and CSS:
```
h1 span.line {display:block}
```
At mobile h1 .line perhaps first two display:inline; `.line.two::before content:" ";`. Simpler leave.
Could mobile copy use h1 font50 line.8 =120, copy around260. Good.
`.intro` max width 300 at 375 gives 3 lines 60, but concise.
Set copy padding26 24 22; h1 margin18 0 16; h1 font52 line.84 height131; eyebrow 12; total26+12+18+131+16+60+22=285. Card starts70, stage top355. stage 400, button center perhaps530, status680. Fits.
At 800, all relevant.
At desktop h1 clamp 64 7vw 96. At 1280 89.6. Copy width 540 inner 430. "CLICK." width perhaps345. Good. line-height .83 =223. Other content: eyebrow 20 + h1 margin 32 top 24 bottom =>279; intro 52; instruction 50 + auto formula? Copy min670 padding60 top/bottom leaves550 content. 20+32+223+24+52+30+48=429 plus formula bottom uses margin-top:auto 30 = perhaps fits 550. Great.
Use copy `.formula{margin-top:auto;padding-top:28px}` and instruction margin-top 30. Fine.

Header height 32. footer flex.

Perhaps card initial main min-height580 but desktop actual calc flex 670. At 900 height bigger. body min-height.
At mobile `.page{min-height:100svh}` but content grows. Fine.

Should have no horizontal scrollbar: body overflow-x:hidden (or clip) and .card overflow hidden. `burst-word` within playground overflow hidden. Header text not overflow; use min-width0. h1 doesn't overflow due words short. Formula pills widths perhaps 300 fits 375 inner299? `:checked` 80 + plus10 + `@keyframes`110 + gaps16 =216 fine.
At 320? user down375 only.

Pure CSS icon top brand perhaps square with heart miniature using text "♥" system glyph? Unicode allowed and inline no external. Top brand icon black square with magenta heart `♥`, okay. Main SVG.
Instruction arrow uses `↗` system. Footer "HTML + CSS + :CHECKED" uppercase.

Should make crazy animation perhaps checkbox checked happens on mousedown? Click toggles and animations immediate. Good.

Potential active transform interferes with checked button animation? no active rule except filter perhaps:
```
.like-button:active {box-shadow:0 6px 0 ...}
```
On click while holding depress, after release crazy. Good.
`.like-button:hover .heart {transform:scale(1.08)}` conflicts checked animation because animation wins over hover transform. Base heart idle animation? Set `.heart {transition:transform .2s, fill...; animation:heartbeat 2.8s ... infinite}` then hover transform won't apply because animation wins. Better no heart idle, button float. `.like-button:hover .heart {transform:scale(1.08) rotate(-3deg)}` base. Checked animation wins. Fine.
Hover label translate? base idle animation transform wins so can't hover transform. Use box shadow/ background only.

Tag idle `animation:tag-bob` base transform rotate6 translateY; checked tag-spin.

Focus outline label doesn't have transform issue.

Reduced motion with `animation-duration:.01ms !important; animation-delay:0ms!important` means count after final state? `.count-after` animation both final yes. `.count-before` forwards final. particle invisible final. button final. Great. Idle animation iteration1 leaves at 100 transform translate0, okay. Pseudo ring second animation last perhaps final rotate360 scale1; opacity ring-in final. Fine.

Could include selection color.

Perhaps no `alert` etc. No JS.

I should respond code only. But before respond ensure complete details and not overshoot. I'll draft in response. Should have no comments? Can include comments `<!-- The checkbox is the entire state machine. -->` nice demonstrates. User doesn't require explanation. Code block exactly.

I'll build CSS around 400 lines but can compact to 300. I can use one-line styles for particle. Ensure HTML `input` placement directly body and `.page` next sibling (whitespace irrelevant). Good.

ARIA: input class like-input no `aria-hidden`. Label clickable. Hidden checkbox clipping via `position:fixed; inline-size:1px; block-size:1px; opacity:0;` no pointer events property (keyboard focus). It can receive focus but at top-left invisible. `margin:0`. Good.

Potential Safari not relevant latest Chrome.

Styles for `.playground::before` grid:
```
background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),...
background-size:34px 34px;
transform:rotate(4deg) scale(1.2);
```
At checked animate `grid-jolt 1s`. Since pseudo base transform and keyframes include. Adds crazy. `.like-input:checked ~ .page .playground::before{animation:grid-jolt 1s ease-out}`.
Grid pseudo z0.
`playground::after` z30 flash.
Deco z1.
`playground-top` absolute top24 left26 right26 display flex. `.tiny-badge` etc.

Counter base in status. `status-card` display flex. Number width 90. After and before both.
```
.count-old{...}
.count-new{opacity:0;...}
```
On checked `count-old animation count-old .45s .1s both`, `count-new .5s .25s both`.
Should handle after final transform translateY0, old final -120 opacity0.
When uncheck CSS immediate base old opacity1, new base0. good.
`.people-label` two spans; old display block, new display none. After label "PEOPLE GET IT" perhaps count label "PEOPLE LIKE YOU". Before "PEOPLE LIKED THIS"; after "INCLUDING YOU. NICE." Too long. Use before "LIKES SO FAR"; after "YOU'RE ONE OF THEM". Good.
`status-icon` small arrow or spark. Perhaps just vertical separator.

Heart fill dark; button off white; base tag yellow.

Button ring pseudo base opacity0; when checked `animation:ring-arrive .65s .75s both,ring-spin 12s 1.4s linear infinite;`. Before second delay ring-arrive final remains because fill both; after second starts, later animation transform ring-spin scale? keyframes ring-spin from `scale(1) rotate(0)` to `scale(1) rotate(360)`. Good.
`like-button::after` gloss with z1. Button background on label covers pseudo before outside? pseudo before z0? define before `z-index:-1`; label background and border paint behind negative child? CSS stacking: background of stacking context painted first, negative child next, so before ring outside visible and inside perhaps on top background but border dashed behind heart possibly visible inside? Ring inset -17 means no inside overlap except none. Fine.
Button ::after z1, heart z2.
Waves inside wrap z2, particles z6 could appear above button briefly which is crazy. Set particles z7 pointer none; button z5. Rays z4 behind. Plus z8. Tag z9. Word z1. Good.
`button-wrap` animation transform but all children.

Card thump transform might interfere `.page` flex height no.

Explosion word starts opacity0. base font-family Arial Black; stroke. Keyframe includes letter-spacing? Can animate from -.1em to .04em for crazy. `white-space:nowrap`.
`@keyframes word-burst` 0 opacity0 transform scale .2 rotate-20; 20 opacity.65; 45 opacity.2 scale1.15 rotate8; 100 opacity.12 scale1 rotate-7. Could giant word be visible final behind. Nice.
Perhaps text `YES!` visible after, aligns liked.

Plus one `font 28`, color yellow, stroke perhaps text-shadow 2px2 black; ends opacity0.

Flash covers but no input issue.

Top badge `.live-pill` dot animation pulse always.

Colors accessible text.

I'll consider title and wording: Header "CSS / PLAY" brand. Main eyebrow "INTERACTION NO. 001". H1 "CLICK. THEN BOOM." Paragraph "This little heart has absolutely no chill. One click. Zero JavaScript. Maximum drama." Instruction "GO ON, PRESS THE HEART" with arrow. Right top "THE LIKE BUTTON" and "PURE CSS". Tag "CLICK ME". Counter 24,916. Footer "MADE WITH HTML + CSS + ONE CHECKBOX", right "0 JS · 100% OVERREACTION". Great.

Could make task exact by no JavaScript even code text is okay. Good.

No game demo requirements applicable.

I think respond ready. Should output exactly one code block. Ensure `<path d>` correct and XML attr no issues. Use `viewBox="0 0 100 90"` with path to 85 fits. Main heart svg width90 height82. In path `M47.6 85.4...` all within 100x90. Good.

Main like button label accessible: `<label class="like-button" for="love" title="Like this experiment">` title okay. Checkbox `aria-label="Like this experiment"`.

Particle spans are `<i>` inside `div` aria-hidden true; CSS font-style irrelevant empty.
Waves `<span style="--w:#fff;--delay:0s"></span>` etc. Use `.wave` classes.
Rays style --r, --c.
Confetti style --a etc. 24 enough.

Manual particles:
0 8deg d196 c yellow s12 delay0 spin620 square
1 24 d238 pink s9 .03
...
Make sure all angles distribute around circle 0-360 not clustered. 24 at 0,15,... etc but varied.
Use 20 perhaps less markup. 24 = crazy.
Radiation at `--a:0deg` translates right. Negative no.
Rays 12 at0,30,..330. Good.

`nth-child(3n)` squares etc can avoid classes. Use `.particles i:nth-child(3n){border-radius:2px}` and nth 4n width? inline vars.
Particles base border-radius 50%.
`box-shadow:0 0 12px color-mix` avoid color-mix perhaps no.

CSS custom var `--s` lengths. Use width var s height var s. For dashes perhaps style `--s:16px;--h:6px`, base height var(--h,var(--s)) nested var valid. Nice.

Animation transform includes `scale(.2)` both x/y. For non square dash okay.

At checked `animation:confetti 1.15s var(--delay,0s) cubic-bezier(.1,.65,.25,1) both;`. At 0 opacity0; start styles base but animation begins after delay with fill both meaning backwards fill applies 0 keyframe during delay. fine.

Ray delay default inline some random .02.

On checked `.deco` animations override idle? Base deco perhaps none except one. use `.deco{...}` static. checked `animation:deco-kick .9s ...`. final rotates. Fine.

Copy title .boom checked animation ends scale1 rotate-2; underline rotates. okay.

No initial entrance animations hiding content. Good.

At reduced motion, CSS selector `.like-input:checked ...` after and before instant; `burst-word` opacity .12 final. Good.

Now respond.