Nemotron 3 Super

We need to output a self-contained HTML file with CSS and possibly using :checked pseudo-class to simulate a button toggle, with animation on click without JS. Use a hidden checkbox that toggles state on click via label. The animation should be crazy. Use CSS keyframes.

We must ensure no JS. We'll put the checkbox input type=checkbox, hidden via opacity or position: absolute, and label as button. When checkbox is checked, apply animation to label (or pseudo-element). Use :checked + label . Like:

<input type="checkbox" id="like">
<label for="like" class="like-btn">Like</label>

On checked state, animate maybe via animation property using animation: shake 0.5s infinite? Or a single animation on click.

But we need animation when you click it, not on hover. Using :active pseudo-class may not persist after click. Use :checked to trigger after click, then animate once using animation with animation-fill-mode: forwards and maybe animation-duration.

We can use a keyframe that does a crazy effect like scaling, rotating, color change.

We'll have:

.like-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #e0245e;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s;
}
.like-btn:active {
  transform: scale(0.9);
}
#like:checked + .like-btn {
  animation: crazy 0.8s ease-out forwards;
}

Define @keyframes crazy { 0% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.3) rotate(-10deg); } 40% { transform: scale(0.9) rotate(10deg); } 60% { transform: scale(1.1) rotate(-5deg); } 80% { transform: scale(1) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); background: #ff6b6b; } }

Also maybe add a pseudo-element for heart icon that appears.

We can add ::after content: "♥"; but after click we change to filled heart.

Simplify: Use Unicode heart.

We need no external resources. All inline.

Make page responsive.

We'll wrap in <body> with some center.

Full HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Crazy Like Button</title>
<style>
  body {
    display: flex;
    height: 100vh;
    margin: 0;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    font-family: system-ui, sans-serif;
  }
  #like-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .like-btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s;
    position: relative;
    overflow: hidden;
  }
  .like-btn:active {
    transform: scale(0.95);
  }
  .like-btn::after {
    content: "♥";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    font-size: 2rem;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.3s;
  }
  #like-toggle:checked + .like-btn {
    animation: crazyLike 0.9s ease-out forwards;
  }
  #like-toggle:checked + .like-btn::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    animation: popHeart 0.6s ease-out forwards;
  }
  @keyframes crazyLike {
    0%   { transform: scale(1) rotate(0deg); background-position: 0 0; }
    20%  { transform: scale(1.25) rotate(-10deg); }
    40%  { transform: scale(0.9) rotate(10deg); }
    60%  { transform: scale(1.1) rotate(-5deg); }
    80%  { transform: scale(1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); background: #ff6b6b; }
  }
  @keyframes popHeart {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  }
</style>
</head>
<body>
<input type="checkbox" id="like-toggle" aria-label="Like">
<label for="like-toggle" class="like-btn">Like</label>
</body>
</html>
```

Check: No JS, pure CSS. Works on click (checkbox toggles). The animation runs when checked. On uncheck (click again) it goes back? The animation only applies when checked; if unchecked, it returns instantly (no animation). That's okay.

Make sure no horizontal scrollbar. Should be fine.

Return exactly one fenced code block with ```html.