Nemotron 3 Nano Omni (free)

We need to produce a single HTML file with CSS and JS inline. The task: "a "like" button in pure CSS, no JavaScript, that does a crazy animation when you click it". But we cannot use JavaScript, but we need to handle click to trigger animation. In pure CSS, we can use :active pseudo-class, but that only applies while the mouse is down, not after click. However we can use a hidden checkbox input and label to toggle state, which is still no JavaScript. The requirement: "pure CSS, no JavaScript". So we can use a checkbox input (type="checkbox") hidden, and a label that acts as button. When clicked, the checkbox toggles, and we can use CSS to animate based on :checked state.

We need to ensure that the page looks right in 1280×800 and adapts down to 375px. The button should be visible on first paint (immediately). The animation should be crazy when clicked.

We need to ensure no external resources except allowed CDN URLs if any. We can just use plain CSS and HTML.

We need to ensure the page has no console errors. Use simple structure.

Implementation: <input type="checkbox" id="like-toggle" class="toggle"> <label for="like-toggle" class="like-btn">👍 Like</label>. Then CSS: .toggle {display:none;} .like-btn { ... } .like-btn:active { ... } .like-btn:checked + .like-btn? Wait we need to place the label after the input. Actually we need the input before the label, then use sibling selector: #like-toggle:checked ~ .like-btn { ... } Or we can use .like-btn::after to show animation. Simpler: Use input#like-toggle, and label class="like-btn". Then CSS: #like-toggle:checked + .like-btn { ... } but the label must be after input. So structure: <input type="checkbox" id="like-toggle" class="toggle"> <label for="like-toggle" class="like-btn">👍 Like</label>. Then CSS: #like-toggle {display:none;} .like-btn { ... } #like-toggle:checked + .like-btn { ... } Or use .like-btn:active to animate while pressed, but we need crazy animation after click (maybe a bounce or explosion). Use keyframes to animate scale, transform, maybe color change.

We need to ensure the page loads with the button visible (the label). The checkbox is hidden but still present, so clicking the label toggles it. The animation should be visible after click (maybe the button expands, changes color, rotates). Use :checked state to apply animation.

We also need to ensure the page is responsive. Use max-width: 100%; height: auto; maybe container.

We'll embed CSS in <style> and JS not needed (but we can include empty script tag to satisfy requirement of no external script? The requirement: "pure CSS, no JavaScript". So we should not include any JavaScript. But the output format requires a <script> tag? Not necessarily; we can omit script entirely. The spec says "Everything must be inline: CSS in <style>, JavaScript in <script>." If there's no JavaScript, we can omit the script tag. That's okay.

We need to ensure no errors. Use simple HTML5 doctype.

Let's craft CSS:

body {margin:0; display:flex; justify-content:center; align-items:center; min-height:100vh; background:#f0f0f0; font-family:sans-serif;}

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

.like-btn {
  background:#ff5722;
  color:#fff;
  padding:15px 30px;
  font-size:1.2rem;
  border-radius:8px;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.like-btn:active {
  transform:scale(0.95);
}
#like-toggle:checked + .like-btn {
  animation: crazy 0.6s ease-out;
}
@keyframes crazy {
  0% {transform:scale(1); background:#ff5722; }
  20% {transform:scale(1.3); background:#ff9800; }
  40% {transform:scale(0.9); background:#f44336; }
  60% {transform:scale(1.5); background:#e91e63; }
  80% {transform:scale(0.8); background:#9c27b0; }
  100% {transform:scale(1); background:#ff5722; }
}

But we need to ensure that the button is visible on first paint (the label). The checkbox is hidden but the label is visible.

Responsive: maybe set max-width: 90vw; width: 200px; height: auto; but button is fixed size.

Let's write final HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Like Button</title>
<style>
  body{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#fafafa;
    font-family:Arial,Helvetica,sans-serif;
  }
  .toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .like-btn{
    background:#ff5722;
    color:#fff;
    padding:15px 30px;
    font-size:1.2rem;
    border-radius:8px;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
    box-shadow:0 4px 8px rgba(0,0,0,.2);
  }
  .like-btn:active{
    transform:scale(.95);
  }
  #like-toggle:checked + .like-btn{
    animation:crazy .6s ease-out;
  }
  @keyframes crazy{
    0%{transform:scale(1);background:#ff5722;}
    20%{transform:scale(1.3);background:#ff9800;}
    40%{transform:scale(0.9);background:#f44336;}
    60%{transform:scale(1.5);background:#e91e63;}
    80%{transform:scale(0.8);background:#9c27b0;}
    100%{transform:scale(1);background:#ff5722;}
  }
  /* responsive */
  .like-container{
    text-align:center;
  }
</style>
</head>
<body>
<div class="like-container">
  <input type="checkbox" id="like-toggle" class="toggle">
  <label for="like-toggle" class="like-btn">👍 Like</label>
</div>
</body>
</html>

Check: The label is visible on first paint. The animation triggers when clicked (the checkbox toggles). No JavaScript. The page is responsive because container is centered and button size is reasonable; it will adapt to viewport width.

Make sure no console errors. Use only inline CSS and HTML. No external resources.

Potential issue: The animation may not be visible because the checkbox toggles but the label may not reflect the state visually (no style change besides animation). That's fine.

Edge Cases: In some browsers, clicking label toggles checkbox. That's fine.

Make sure the page doesn't have horizontal scrollbar. The body uses flex centering, no fixed width beyond container. The container width is auto, but the button is limited by its padding; it's fine.

Thus output a single fenced code block with html.