Nemotron 3.5 Super VL (free)

The user wants a "like" button in pure CSS, no JavaScript, that does a crazy animation when clicked. Constraints: no JS, self-contained HTML/CSS, must look right in 1280x800 and adapt to 375px, no external resources. Since it's a CSS-only clickable button, we can use the checkbox hack or `:target` or `:active` pseudo-class. But "crazy animation when you click it" - pure CSS. The most reliable is the checkbox hack: hidden checkbox, label styled as button, `:checked` state triggers animations. However animations triggered by `:checked` will play once when checked, but if unchecked they might reset. We can use animation with `animation-play-state` or just keyframes that run on `:active` (while holding) but that's not "when you click". Checkbox hack is standard.

Let's design:
- A heart-shaped like button.
- Uses `<input type="checkbox" id="like">` and `<label for="like">`.
- Label contains a heart (CSS or SVG inline? No external images. We can draw heart with CSS borders/transforms or use an SVG inline in HTML. Inline SVG is fine, not external).
- When checkbox is checked, trigger "crazy animation": heart scales, rotates, color changes, maybe particle explosion using box-shadows or multiple hearts. Pure CSS animation.
- Need to ensure animation is visible on first paint? It's a button, not interactive until clicked, but that's okay. The requirement "Something meaningful must be visible on first paint" - the button itself is visible.
- "Games must start in self-playing demo mode..." - not a game, so ignore.
- "Click or press a key to start" - not a game, but it's a button that requires click. Maybe we don't need that message since it's not a game. The rule says "if the demo uses the keyboard, display...". We don't use keyboard. But the button is clickable.

Let's make it crazy:
- Default state: gray heart, "Like" text.
- Checked state: heart turns red/pink, scales up, shakes, maybe emits confetti (using box-shadow duplicates or multiple pseudo-elements).
- Animation: `@keyframes crazyLike` with scale, rotate, color, and maybe a burst of sparkles using `box-shadow` on `::before` and `::after` and multiple clones? We only have one label, but we can use `::before`, `::after`, and maybe the input itself? Actually label can contain multiple spans for particles.
- Structure:
```html
<input type="checkbox" id="likeToggle" hidden>
<label class="like-btn" for="likeToggle">
  <span class="heart"></span>
  <span class="text">Like</span>
  <span class="sparkle s1"></span>
  <span class="sparkle s2"></span>
  ...
</label>
```
- When `#likeToggle:checked ~ .like-btn` or `#likeToggle:checked + .like-btn`? Since input is before label, use sibling selector `.like-btn` with `input:checked + .like-btn` or put label after input.
- Animation on `:checked`: `.like-btn:checked`? No, label doesn't become checked. Use `input:checked + label .heart` etc.
- To make animation replay on multiple clicks: checkbox hack requires unchecking to reset. But user can click again to uncheck, animation runs in reverse or resets. We can set `animation: none` on unchecked and re-trigger on checked. But if they click rapidly, it might not restart. That's acceptable for pure CSS.
- Alternative: `:active` on label triggers animation while mouse is down. But "crazy animation when you click" could be on `:active`. However it stops when released. Checkbox hack gives a lasting state change.
- Let's use checkbox hack. The heart animates when checked. To make it look "crazy", keyframes:
  - 0%: scale 1, rotate 0, color #999
  - 20%: scale 1.4, rotate -20deg, color #e74c3c
  - 40%: scale 0.8, rotate 20deg, color #ff6b6b
  - 60%: scale 1.2, rotate -10deg, color #ec407a
  - 80%: scale 1, rotate 5deg, color #e91e63
  - 100%: scale 1, rotate 0, color #e91e63
- Plus sparkles explode outward using `transform: translate` and `opacity`.
- Need to ensure no horizontal scrollbar on 375px. Center everything.

Let's also add a counter? Pure CSS counter is tricky without JS. We can skip counter, or use `:checked` to change text from "Like" to "Liked" via content? Label content can't easily change text without pseudo-element and `data` attributes? We can have two spans: one for unchecked text, one for checked text, toggle visibility with `input:checked + label .text-off { display:none } input:checked + label .text-on { display:inline }`. Good.

Let's write full HTML.

CSS:
- Reset, flex center, min-height 100vh, font-family sans-serif.
- `.like-btn`: inline-block, padding, cursor pointer, position relative, user-select none.
- `input[type="checkbox"]`: display none.
- Heart: use CSS heart shape:
```css
.heart {
  position: relative;
  width: 40px; height: 40px;
  background: #ccc;
  transform: rotate(-45deg);
  transition: ...
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 40px; height: 40px;
  background: #ccc;
  border-radius: 50%;
}
.heart::before { top: -20px; left: 0; }
.heart::after { left: 20px; top: 0; }
```
- But if we animate the heart container with transform, the inner `::before/::after` are fine.
- Sparkles: positioned absolutely around heart, small circles or `*` characters. Animate translate and opacity on checked.
- Text: below heart.

Animation details:
When `#likeToggle:checked + .like-btn`:
- `.heart` animation `heartBeat 0.6s ease-out`.
- `.sparkle` animations `sparkle 0.6s ease-out` with different delays and translate distances.
- `.text` changes color.

Let's define sparkles with `::before` and `::after`? We need multiple particles. We can add several `<span class="particle">` inside label. Since no JS, static HTML is fine. Let's add 8 particles.

Particle CSS:
```css
.particle {
  position: absolute;
  width: 6px; height: 6px;
  background: #ffeb3b;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
```
Positions: around center, e.g., top, bottom, left, right, diagonals.
On checked: `.particle` animation `explode 0.5s ease-out forwards` with different delays. But `forwards` keeps final state; we want them to fade out. So animation: opacity 0->1->0, translate 0->X->X maybe.
Keyframes explode:
```
0% { transform: translate(0,0) scale(1); opacity: 0; }
50% { opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
```
Use inline styles for `--tx` and `--ty` on each particle? That's HTML, fine. Or use nth-child to set custom properties. Inline style is simpler and allowed.

However, if the user unchecks, particles reset. That's okay.

We should make sure the animation is "crazy" enough. Add rotation to the whole button maybe.

Let's also add a "Like" text that changes to "Liked!".

Check for console errors: none.

Responsive: viewport meta tag. Center container. Max-width.

No external fonts? System fonts fine.

Let's write code.

Potential issue: The requirement says "Reply with exactly ONE fenced code block containing the complete file: ```html ... ```". So output only code block.

Let's draft:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Crazy Like Button</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #0f172a;
    font-family: system-ui, -apple-system, sans-serif;
    color: #fff;
  }
  h1 { margin-bottom: 2rem; font-size: 1.5rem; }
  #likeToggle { display: none; }
  .like-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .heart {
    position: relative;
    width: 48px;
    height: 48px;
    background: #64748b;
    transform: rotate(-45deg);
    will-change: transform;
  }
  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    background: #64748b;
    border-radius: 50%;
  }
  .heart::before { top: -24px; left: 0; }
  .heart::after { left: 24px; top: 0; }
  .text {
    font-weight: 700;
    font-size: 1rem;
    color: #94a3b8;
  }
  .text-off { display: block; }
  .text-on { display: none; }
  /* Particles */
  .particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
  }
  /* Checked state */
  #likeToggle:checked + .like-btn .heart {
    animation: heartCrazy 0.7s ease-out;
    background: #ef4444;
  }
  #likeToggle:checked + .like-btn .heart::before,
  #likeToggle:checked + .like-btn .heart::after {
    background: #ef4444;
  }
  #likeToggle:checked + .like-btn .text-off { display: none; }
  #likeToggle:checked + .like-btn .text-on { display: block; color: #f43f5e; }
  #likeToggle:checked + .like-btn .particle {
    animation: explode 0.6s ease-out both;
  }
  /* individual particle paths */
  .particle:nth-child(3) { --tx: 0; --ty: -40px; animation-delay: 0.0s; background: #fbbf24; width: 8px; height: 8px; left: 20px; top: 20px; }
  .particle:nth-child(4) { --tx: 34px; --ty: -14px; animation-delay: 0.03s; background: #f472b6; width: 6px; height: 6px; left: 20px; top: 20px; }
  .particle:nth-child(5) { --tx: 40px; --ty: 0; animation-delay: 0.06s; background: #a78bfa; width: 10px; height: 10px; left: 20px; top: 20px; }
  .particle:nth-child(6) { --tx: 34px; --ty: 14px; animation-delay: 0.09s; background: #22d3ee; width: 6px; height: 6px; left: 20px; top: 20px; }
  .particle:nth-child(7) { --tx: 0; --ty: 40px; animation-delay: 0.12s; background: #34d399; width: 8px; height: 8px; left: 20px; top: 20px; }
  .particle:nth-child(8) { --tx: -34px; --ty: 14px; animation-delay: 0.15s; background: #f472b6; width: 6px; height: 6px; left: 20px; top: 20px; }
  .particle:nth-child(9) { --tx: -40px; --ty: 0; animation-delay: 0.18s; background: #a78bfa; width: 10px; height: 10px; left: 20px; top: 20px; }
  .particle:nth-child(10) { --tx: -34px; --ty: -14px; animation-delay: 0.21s; background: #22d3ee; width: 6px; height: 6px; left: 20px; top: 20px; }

  @keyframes heartCrazy {
    0% { transform: rotate(-45deg) scale(1); }
    25% { transform: rotate(-45deg) scale(1.5) rotateZ(20deg); } /* careful: rotateZ vs rotate? Since base is rotate(-45deg), adding rotateZ is additive? Actually transform list: rotate(-45deg) scale(1.5) rotateZ(20deg) is valid but order matters. Let's just do rotate(-25deg) etc. */
    ...
  }
</style>
</head>
<body>
  <h1>Tap the heart</h1>
  <input type="checkbox" id="likeToggle">
  <label class="like-btn" for="likeToggle">
    <span class="heart"></span>
    <span class="text text-off">Like</span>
    <span class="text text-on">Liked!</span>
    <span class="particle"></span>
    <span class="particle"></span>
    ...
  </label>
</body>
</html>
```

Need to fix keyframes properly. Since heart has base transform `rotate(-45deg)`, animating `transform` will replace it entirely unless we include the base. Simpler: animate the `.heart` wrapper's transform from `rotate(-45deg)` etc. But keyframes need to mention rotate(-45deg) at start? Not necessarily, animation overrides. But at 0% if we do `scale(1)`, the rotate(-45deg) is lost. We can use a wrapper inside heart: `.heart` container with `rotate(-45deg)` static, and inner `.heart-fill` animates scale/rotate relative? Or just animate `scale` and `rotate` independently? CSS can't animate rotate separately without transform.

Let's restructure:
```html
<span class="heart">
  <span class="heart-core"></span>
</span>
```
`.heart`: position relative, width 48, height 48, transform rotate(-45deg) static.
`.heart-core`: absolute, top 0 left 0, width 48 height 48, background color. `::before` and `::after` circles.
Then animate `.heart-core` transform: scale/rotate (it will rotate around its center). The outer rotation remains static -45deg. That's fine.

Keyframes heartCrazy:
```
0% { transform: scale(1) rotate(0deg); background: #64748b; }
20% { transform: scale(1.4) rotate(-30deg); background: #ef4444; }
40% { transform: scale(0.7) rotate(30deg); background: #fb7185; }
60% { transform: scale(1.2) rotate(-15deg); background: #ec4899; }
80% { transform: scale(1) rotate(5deg); background: #e11d48; }
100% { transform: scale(1) rotate(0deg); background: #e11d48; }
```
But `::before` and `::after` need background update too:
`#likeToggle:checked + .like-btn .heart-core::before, ... { background: #e11d48; }` We can set in checked state general rule, not necessarily animation. The keyframes can handle color too if we put it on heart-core. But pseudo-elements inherit? No. So set background color in checked state rule for pseudo-elements. Then keyframe background on heart-core might not affect pseudo. We can just make pseudo-elements background `currentColor` and set color on heart-core? But `::before` background doesn't inherit `background-color`. Could do `background: inherit` on pseudo-elements! Yes:
```css
.heart-core::before,
.heart-core::after {
  background: inherit;
  ...
}
```
Then animating background-color on `.heart-core` will propagate to pseudo-elements if they inherit? Actually `background: inherit` makes them inherit the computed background of parent. If parent background is animated, do children inherit updates? Inheritance is computed value; animations on parent don't automatically cascade to children's inherited properties unless they inherit `background-color` specifically. `background` is shorthand, not inherited by default. `background-color` is not inherited. `inherit` keyword on `background-color` would make it inherit from parent at computation time. But does it update when parent animates? Inherited properties are resolved at style computation; if parent is animated, child's inherited value is computed from parent's computed value at each frame? I believe CSS animations on inherited properties do propagate, but `background-color` is not inherited unless forced. Using `background-color: inherit` might work but it's safer to just set pseudo background colors in the `:checked` rule and accept they go red immediately. That's fine. Or we can animate `filter: hue-rotate` on the whole heart? Simpler: just change pseudo backgrounds to red on checked.

Particle keyframes:
```css
@keyframes explode {
  0% { transform: translate(0,0) scale(1); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
```
Need to position particles initially at center (left:20px top:20px). Use `left: 20px; top: 20px;` for all. Then translate moves them. But because they are absolutely positioned inside `.like-btn` which is `inline-flex`, we need `.like-btn` position relative. Already set.

Particle widths vary. Center offsets: if width 8px, left should be 24px - 4px = 20px? Actually heart center is at 24,24 inside 48x48. We can just set left/top to 20px for all approximate. Fine.

Add a second wrapper to reset animation? The checkbox hack: if checked and then clicked again, unchecked -> animation stops and resets to initial state (since no animation). Click again -> checked -> animation runs again. Good.

Accessibility: label for checkbox is fine. `aria-pressed`? Not needed but can add `aria-label="Like"` to label and `aria-hidden` on checkbox? Actually input hidden, label is clickable. Could add `role="switch"` but not necessary.

Make sure no horizontal scrollbar: body flex column center, no overflow.

Add instructions: "Click the heart to like" maybe. Visible on first paint: yes.

Let's refine styles to look good on dark background.

One issue: `will-change` not needed.

Let's write final code cleanly.

Check for any JS: none.

Inline SVG? Not needed, CSS heart is fine.

Let's compose final HTML.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Like Button</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #0b0f19;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #fff;
  }
  .hint {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #94a3b8;
  }
  #likeToggle { display: none; }
  .like-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s, border-color 0.2s;
  }
  .like-btn:active { background: rgba(255,255,255,0.08); }
  .heart-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    transform: rotate(-45deg);
  }
  .heart-core {
    position: absolute;
    inset: 0;
    background: #94a3b8;
    animation: idleFloat 3s ease-in-out infinite;
    background-clip: padding-box;
  }
  .heart-core::before,
  .heart-core::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    background: inherit;
    border-radius: 50%;
  }
  .heart-core::before { top: -28px; left: 0; }
  .heart-core::after { left: 28px; top: 0; }
  .text-off { display: block; font-weight: 800; font-size: 1.05rem; color: #cbd5e1; letter-spacing: 0.02em; }
  .text-on { display: none; font-weight: 800; font-size: 1.05rem; color: #f472b6; letter-spacing: 0.02em; }
  .particle {
    position: absolute;
    left: 24px;
    top: 24px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
  }
  /* Checked state */
  #likeToggle:checked + .like-btn {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
  }
  #likeToggle:checked + .like-btn .heart-core {
    animation: heartCrazy 0.75s ease-out;
    background: #ef4444;
  }
  #likeToggle:checked + .like-btn .heart-core::before,
  #likeToggle:checked + .like-btn .heart-core::after {
    background: #ef4444 !important;
  }
  #likeToggle:checked + .like-btn .text-off { display: none; }
  #likeToggle:checked + .like-btn .text-on { display: block; }
  #likeToggle:checked + .like-btn .particle {
    animation: explode 0.7s ease-out both;
  }
  /* Particle positions & delays */
  .particle:nth-of-type(1) { --tx: 0; --ty: -44px; animation-delay: 0.0s; background: #fbbf24; width: 9px; height: 9px; }
  .particle:nth-of-type(2) { --tx: 38px; --ty: -16px; animation-delay: 0.04s; background: #f472b6; width: 7px; height: 7px; }
  .particle:nth-of-type(3) { --tx: 44px; --ty: 0; animation-delay: 0.08s; background: #a78bfa; width: 11px; height: 11px; }
  .particle:nth-of-type(4) { --tx: 38px; --ty: 16px; animation-delay: 0.12s; background: #22d3ee; width: 7px; height: 7px; }
  .particle:nth-of-type(5) { --tx: 0; --ty: 44px; animation-delay: 0.16s; background: #34d399; width: 9px; height: 9px; }
  .particle:nth-of-type(6) { --tx: -38px; --ty: 16px; animation-delay: 0.2s; background: #f472b6; width: 7px; height: 7px; }
  .particle:nth-of-type(7) { --tx: -44px; --ty: 0; animation-delay: 0.24s; background: #a78bfa; width: 11px; height: 11px; }
  .particle:nth-of-type(8) { --tx: -38px; --ty: -16px; animation-delay: 0.28s; background: #22d3ee; width: 7px; height: 7px; }

  @keyframes idleFloat {
    0%, 100% { transform: rotate(-45deg) translateY(0); }
    50% { transform: rotate(-45deg) translateY(-6px); }
  }
  @keyframes heartCrazy {
    0% { transform: scale(1) rotate(0deg); }
    18% { transform: scale(1.5) rotate(-28deg); background: #ef4444; }
    35% { transform: scale(0.65) rotate(32deg); background: #fb7185; }
    55% { transform: scale(1.3) rotate(-18deg); background: #ec4899; }
    75% { transform: scale(1) rotate(8deg); background: #e11d48; }
    100% { transform: scale(1) rotate(0deg); background: #e11d48; }
  }
  @keyframes explode {
    0% { transform: translate(0,0) scale(1); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
  }
  @media (max-width: 480px) {
    .hint { font-size: 1rem; margin-bottom: 1rem; }
    .like-btn { padding: 0.85rem 1rem; transform: scale(0.9); }
  }
</style>
</head>
<body>
  <div class="hint">Click or tap the heart to like <span role="img" aria-label="heart">❤️</span></div>
  <input type="checkbox" id="likeToggle">
  <label class="like-btn" for="likeToggle" aria-pressed="false" tabindex="0">
    <span class="heart-wrap">
      <span class="heart-core"></span>
    </span>
    <span class="text-off">Like</span>
    <span class="text-on">Liked!</span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
  </label>
</body>
</html>
```

Check `background: inherit` on pseudo-elements with `!important` override: In the checked rule we set `background: #ef4444 !important;` on pseudo-elements. But `background` shorthand might reset other layers? It's fine.

Potential issue: `idleFloat` uses `transform: rotate(-45deg) translateY(0)` but `.heart-core` is absolute inside `.heart-wrap` which already rotates -45deg. Then `.heart-core` animation adds more rotation. That's okay.

When checked, `.heart-wrap` still has `rotate(-45deg)` static, and `.heart-core` keyframes animate from scale/rotate(0) to ... So the heart will spin relative to the wrap. Good.

Is `inset: 0` supported? Yes modern Chrome.

Does `tabindex="0"` on label cause issues? Label is clickable anyway. Fine.

No JS. No external resources.

First paint: button visible.

Responsive: media query scales down.

I think this meets requirements. Output exactly one fenced code block.