Models 44

Muse Ember

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
37.5 s
Cost
$0.012
Output tokens
23,922
Spent thinking
16,211 tokens
Speed
712 tok/s
Console errors
0
First token after
3.9 s
First visible text after
31.1 s
Prompt tokens
374
Code size
20.3 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
model default
Max output
943,718 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
“a "like" button in pure CSS, no JavaScript, that does a crazy animation when you click it”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 323 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Pure CSS Like Button — No JavaScript</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{overflow-x:hidden}
  body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#fff;min-height:100vh;padding:28px 16px 48px;
    background:
      radial-gradient(1000px 620px at 18% -10%, rgba(255,46,99,.38), transparent 60%),
      radial-gradient(900px 540px at 92% 0%, rgba(124,58,237,.36), transparent 60%),
      radial-gradient(700px 500px at 50% 110%, rgba(255,159,28,.16), transparent 60%),
      linear-gradient(160deg,#0f0c29 0%,#302b63 55%,#24243e 100%);
  }
  ::selection{background:#ff2e63;color:#fff}

  .ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .ambient span{position:absolute;opacity:.09;color:#fff;line-height:1;animation:drift 10s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-20px) rotate(9deg)}}

  .card{
    position:relative;z-index:1;max-width:760px;margin:0 auto;overflow:hidden;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:28px;padding:36px 36px 28px;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  }

  header{text-align:center}
  .badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,#ff2e63,#ff7a59);color:#fff;font-size:11px;font-weight:900;letter-spacing:.16em;padding:8px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(255,46,99,.4)}
  .badge::before{content:"";width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
  h1{font-size:clamp(36px,6vw,56px);line-height:.95;font-weight:900;letter-spacing:-.03em;margin:16px 0 12px}
  h1 span{background:linear-gradient(90deg,#ff2e63,#ff9f1c,#ff2e63);-webkit-background-clip:text;background-clip:text;color:transparent}
  .subtitle{color:rgba(255,255,255,.78);font-size:16px;line-height:1.6;max-width:560px;margin:0 auto}
  .subtitle code{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);padding:2px 7px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#ffd6e0}

  /* ---------- STAGE / BUTTON ---------- */
  .stage{position:relative;margin:22px auto 4px;min-height:438px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0 6px}
  .like-input{position:absolute;top:12px;left:12px;width:22px;height:22px;opacity:0;margin:0;cursor:pointer}

  .rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .rain i{position:absolute;top:-22px;left:var(--x);width:var(--w,8px);height:calc(var(--w,8px) * 1.7);background:var(--c);border-radius:2px;opacity:0}
  input:checked ~ .rain i{animation:rainFall var(--dur) linear infinite;animation-delay:var(--delay)}
  @keyframes rainFall{0%{opacity:0;transform:translateY(0) rotate(0deg)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateY(540px) rotate(720deg)}}

  .btn-zone{position:relative;width:232px;height:232px;display:grid;place-items:center;z-index:2}
  .rays{
    position:absolute;left:50%;top:50%;width:min(470px,94vw);height:min(470px,94vw);border-radius:50%;
    background:repeating-conic-gradient(rgba(255,46,99,.17) 0 12deg, transparent 12deg 24deg);
    -webkit-mask-image:radial-gradient(circle, black 0%, transparent 68%);mask-image:radial-gradient(circle, black 0%, transparent 68%);
    opacity:0;transform:translate(-50%,-50%) scale(.68);pointer-events:none;z-index:0;transition:opacity .5s;
  }
  input:checked ~ .btn-zone .rays{opacity:1;animation:spinRays 16s linear infinite}
  @keyframes spinRays{from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(360deg)}}

  .burst-word{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4);z-index:0;pointer-events:none;
    font-size:92px;font-weight:900;letter-spacing:.02em;line-height:1;white-space:nowrap;
    color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);opacity:0;
  }
  input:checked ~ .btn-zone .burst-word{animation:wordPop .65s cubic-bezier(.34,1.56,.64,1) forwards, wordPulse 2.2s .65s ease-in-out infinite}
  @keyframes wordPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-10deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}100%{opacity:.95;transform:translate(-50%,-50%) scale(1) rotate(0deg)}}
  @keyframes wordPulse{0%,100%{opacity:.95;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.07)}}

  .like-btn{
    position:relative;z-index:2;width:188px;height:188px;border-radius:50%;display:grid;place-items:center;
    cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%), rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
    transition:background .45s, box-shadow .45s, border-color .45s, transform .15s;
  }
  .like-btn:active{transform:scale(.94)}
  input:focus-visible ~ .btn-zone .like-btn{outline:3px solid #ffd166;outline-offset:7px}
  input:checked ~ .btn-zone .like-btn{
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.35), rgba(255,46,99,.24) 52%), linear-gradient(135deg, rgba(255,46,99,.34), rgba(255,111,145,.18));
    border-color:rgba(255,120,160,.7);
    box-shadow:0 0 0 12px rgba(255,46,99,.10), 0 0 74px rgba(255,46,99,.55), 0 22px 50px rgba(255,46,99,.35);
    animation:shake .45s ease;
  }
  @keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,2px) rotate(-2deg)}40%{transform:translate(5px,-2px) rotate(2deg)}60%{transform:translate(-4px,-1px)}80%{transform:translate(3px,1px)}}

  .heart-wrap{width:98px;height:98px;display:grid;place-items:center;position:relative;z-index:3;animation:beatSoft 2.8s ease-in-out infinite}
  @keyframes beatSoft{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}50%{transform:scale(.97)}65%{transform:scale(1.03)}}
  @keyframes beatFast{0%,100%{transform:scale(1)}25%{transform:scale(1.14)}45%{transform:scale(.95)}60%{transform:scale(1.09)}}
  @keyframes pop{0%{transform:scale(.55) rotate(-8deg)}55%{transform:scale(1.28) rotate(5deg)}75%{transform:scale(.9) rotate(-2deg)}100%{transform:scale(1) rotate(0deg)}}
  input:checked ~ .btn-zone .heart-wrap{animation:pop .6s cubic-bezier(.34,1.56,.64,1), beatFast 1.15s .6s ease-in-out infinite}

  .heart{--hb:linear-gradient(135deg,#cbd0e0,#9aa1b8);width:70px;height:70px;background:var(--hb);transform:rotate(45deg);border-radius:14px;position:relative;box-shadow:0 12px 28px rgba(0,0,0,.28);transition:box-shadow .4s}
  .heart::before,.heart::after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:var(--hb)}
  .heart::before{top:-35px;left:0}
  .heart::after{left:-35px;top:0}
  input:checked ~ .btn-zone .heart{--hb:linear-gradient(135deg,#ff8fab,#ff2e63 58%,#d9044d);box-shadow:0 14px 36px rgba(255,46,99,.55),0 0 30px rgba(255,46,99,.55)}

  .shine{position:absolute;width:18px;height:18px;background:rgba(255,255,255,.85);border-radius:50%;top:20px;left:24px;filter:blur(1px);opacity:.3;z-index:4;transition:opacity .4s}
  input:checked ~ .btn-zone .shine{opacity:.95}

  .ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,46,99,.9);opacity:0;pointer-events:none;transform:scale(.55)}
  input:checked ~ .btn-zone .ring-a{animation:ringOut .85s ease-out forwards}
  input:checked ~ .btn-zone .ring-b{animation:ringOut .85s .18s ease-out forwards}
  @keyframes ringOut{0%{opacity:.95;transform:scale(.55)}100%{opacity:0;transform:scale(2.05)}}

  .pulse-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,46,99,.4);opacity:0;pointer-events:none;transform:scale(.95)}
  input:checked ~ .btn-zone .pulse-ring{animation:pulseOut 1.8s ease-out infinite}
  input:checked ~ .btn-zone .pulse-ring.p2{animation-delay:.9s}
  @keyframes pulseOut{0%{opacity:.7;transform:scale(.95)}100%{opacity:0;transform:scale(1.55)}}

  .particles{position:absolute;inset:0;pointer-events:none;z-index:2}
  .particles i{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);background:var(--c);border-radius:var(--r,50%);opacity:0;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.2)}
  input:checked ~ .btn-zone .particles i{animation:burst .95s cubic-bezier(.17,.89,.32,1.2) forwards}
  input:checked ~ .btn-zone .particles i:nth-child(even){animation-delay:.14s}
  @keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) translateX(0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(.15) rotate(320deg)}}

  .floaters{position:absolute;inset:0;pointer-events:none;z-index:4}
  .floaters b{position:absolute;bottom:62%;left:var(--x);font-size:var(--size);color:var(--c);opacity:0;line-height:1;font-style:normal;text-shadow:0 4px 14px rgba(255,46,99,.5)}
  input:checked ~ .btn-zone .floaters b{animation:floatUp 2.4s ease-in infinite;animation-delay:var(--delay)}
  @keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) rotate(0deg) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--drift)),-235px) rotate(18deg) scale(1.15)}}

  .sparkles{position:absolute;inset:0;pointer-events:none;z-index:5}
  .sparkles span{position:absolute;color:#ffd166;font-size:20px;opacity:0;line-height:1;text-shadow:0 0 14px rgba(255,209,102,.9)}
  input:checked ~ .btn-zone .sparkles span{animation:twinkle 1.6s ease-in-out infinite;animation-delay:var(--delay)}
  @keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1.25) rotate(90deg)}}

  .status{position:relative;width:280px;height:34px;margin-top:16px;text-align:center;font-weight:900;font-size:20px;letter-spacing:-.01em}
  .status span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:opacity .3s,transform .3s}
  .txt-unliked{color:rgba(255,255,255,.88)}
  .txt-liked{color:#ff5c8a;opacity:0;transform:translateY(12px) scale(.85)}
  input:checked ~ .status .txt-liked{opacity:1;transform:translateY(0) scale(1)}
  input:checked ~ .status .txt-unliked{opacity:0;transform:translateY(-12px) scale(.9)}

  .count{position:relative;width:300px;height:22px;margin-top:4px;font-size:14px;color:rgba(255,255,255,.62);text-align:center}
  .count span{position:absolute;inset:0;transition:opacity .3s,transform .3s}
  .c-liked{opacity:0;color:#ffb3c1;font-weight:800;transform:translateY(8px)}
  input:checked ~ .count .c-liked{opacity:1;transform:translateY(0)}
  input:checked ~ .count .c-unliked{opacity:0;transform:translateY(-8px)}

  .hint{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);padding:9px 15px;border-radius:999px;font-size:13px;color:rgba(255,255,255,.82)}
  .hint .arrow{display:inline-block;color:#ffd166;font-weight:900;font-size:15px;animation:bounceUp 1.2s ease-in-out infinite}
  @keyframes bounceUp{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}

  /* ---------- HOW IT WORKS ---------- */
  .how{margin-top:26px;border-top:1px solid rgba(255,255,255,.12);padding-top:26px;position:relative;z-index:1}
  .how h2{font-size:20px;text-align:center;margin-bottom:18px;letter-spacing:-.01em}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px}
  .step strong{font-size:12px;color:#ffd166;letter-spacing:.14em}
  .step h3{font-size:15px;margin:7px 0 6px}
  .step p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}
  .step code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#ffd6e0}

  .snippet{margin-top:14px;background:#0a0918;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;overflow:hidden}
  .snippet pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;color:#e6e6ff;overflow-x:auto;white-space:pre}
  .snippet .c{color:#8be9fd}.snippet .k{color:#ff79c6;font-weight:700}.snippet .v{color:#f1fa8c}.snippet .cm{color:rgba(255,255,255,.38)}

  footer{margin-top:18px;text-align:center;font-size:12px;line-height:1.6;color:rgba(255,255,255,.5)}

  @media (max-width:640px){
    body{padding:16px 10px 32px}
    .card{padding:24px 18px 20px;border-radius:22px}
    .steps{grid-template-columns:1fr}
    .like-btn{width:166px;height:166px}
    .heart{width:62px;height:62px}
    .heart::before,.heart::after{width:62px;height:62px}
    .heart::before{top:-31px}.heart::after{left:-31px}
    .burst-word{font-size:64px}
    .status{width:100%;font-size:18px}
    .count{width:100%}
    .stage{min-height:410px}
  }
</style>
</head>
<body>

<div class="ambient" aria-hidden="true">
  <span style="left:6%;top:12%;font-size:84px;animation-duration:11s">♥</span>
  <span style="left:14%;top:62%;font-size:52px;animation-duration:9s">♥</span>
  <span style="left:82%;top:18%;font-size:96px;animation-duration:13s">♥</span>
  <span style="left:88%;top:70%;font-size:60px;animation-duration:10s">♥</span>
  <span style="left:68%;top:82%;font-size:40px;animation-duration:8s">♥</span>
  <span style="left:32%;top:86%;font-size:44px;animation-duration:12s">♥</span>
  <span style="left:50%;top:4%;font-size:36px;animation-duration:9s">♥</span>
</div>

<main class="card">
  <header>
    <div class="badge">PURE CSS — NO JAVASCRIPT</div>
    <h1>The <span>Like</span> Button</h1>
    <p class="subtitle">Just a hidden <code>&lt;input type="checkbox"&gt;</code>, a <code>&lt;label&gt;</code> and an unreasonable amount of CSS. Click the heart. Go on — it goes <strong>crazy</strong>.</p>
  </header>

  <section class="stage" aria-label="Like button demo">
    <input type="checkbox" id="like-toggle" class="like-input" aria-label="Like this">

    <div class="rain" aria-hidden="true">
      <i style="--x:4%;--c:#ff2e63;--w:8px;--dur:2.6s;--delay:0s"></i>
      <i style="--x:10%;--c:#ffd166;--w:7px;--dur:3.1s;--delay:.4s"></i>
      <i style="--x:16%;--c:#08d9d6;--w:9px;--dur:2.4s;--delay:.9s"></i>
      <i style="--x:22%;--c:#ff9f1c;--w:8px;--dur:2.9s;--delay:.2s"></i>
      <i style="--x:28%;--c:#c77dff;--w:7px;--dur:3.4s;--delay:1.2s"></i>
      <i style="--x:34%;--c:#ff2e63;--w:9px;--dur:2.5s;--delay:.6s"></i>
      <i style="--x:40%;--c:#ffe600;--w:8px;--dur:3s;--delay:.1s"></i>
      <i style="--x:46%;--c:#ff6b9d;--w:7px;--dur:2.7s;--delay:.8s"></i>
      <i style="--x:52%;--c:#06d6a0;--w:9px;--dur:3.2s;--delay:.3s"></i>
      <i style="--x:58%;--c:#ff2e63;--w:8px;--dur:2.5s;--delay:1s"></i>
      <i style="--x:64%;--c:#ffd166;--w:7px;--dur:2.9s;--delay:.5s"></i>
      <i style="--x:70%;--c:#08d9d6;--w:8px;--dur:3.3s;--delay:0s"></i>
      <i style="--x:76%;--c:#ff9f1c;--w:9px;--dur:2.6s;--delay:.7s"></i>
      <i style="--x:82%;--c:#c77dff;--w:7px;--dur:3s;--delay:.2s"></i>
      <i style="--x:88%;--c:#ff2e63;--w:8px;--dur:2.4s;--delay:1.3s"></i>
      <i style="--x:94%;--c:#ffe600;--w:7px;--dur:2.8s;--delay:.6s"></i>
    </div>

    <div class="btn-zone">
      <div class="rays" aria-hidden="true"></div>
      <div class="burst-word" aria-hidden="true">LOVE!</div>

      <label for="like-toggle" class="like-btn" aria-label="Like button — click to like">
        <span class="ring ring-a" aria-hidden="true"></span>
        <span class="ring ring-b" aria-hidden="true"></span>
        <span class="pulse-ring" aria-hidden="true"></span>
        <span class="pulse-ring p2" aria-hidden="true"></span>

        <span class="heart-wrap" aria-hidden="true">
          <span class="heart"></span>
          <span class="shine"></span>
        </span>

        <span class="particles" aria-hidden="true">
          <i style="--a:0deg;--d:150px;--c:#ff2e63;--s:14px;--r:50%"></i>
          <i style="--a:18deg;--d:175px;--c:#ffd166;--s:10px;--r:2px"></i>
          <i style="--a:36deg;--d:135px;--c:#ff9f1c;--s:16px;--r:50%"></i>
          <i style="--a:54deg;--d:185px;--c:#08d9d6;--s:11px;--r:50%"></i>
          <i style="--a:72deg;--d:145px;--c:#c77dff;--s:13px;--r:2px"></i>
          <i style="--a:90deg;--d:170px;--c:#ff2e63;--s:15px;--r:50%"></i>
          <i style="--a:108deg;--d:140px;--c:#ffe600;--s:10px;--r:2px"></i>
          <i style="--a:126deg;--d:180px;--c:#ff6b9d;--s:14px;--r:50%"></i>
          <i style="--a:144deg;--d:155px;--c:#06d6a0;--s:12px;--r:50%"></i>
          <i style="--a:162deg;--d:190px;--c:#ff9f1c;--s:11px;--r:2px"></i>
          <i style="--a:180deg;--d:150px;--c:#ff2e63;--s:16px;--r:50%"></i>
          <i style="--a:198deg;--d:175px;--c:#ffd166;--s:12px;--r:50%"></i>
          <i style="--a:216deg;--d:140px;--c:#c77dff;--s:14px;--r:2px"></i>
          <i style="--a:234deg;--d:185px;--c:#08d9d6;--s:10px;--r:50%"></i>
          <i style="--a:252deg;--d:150px;--c:#ff6b9d;--s:15px;--r:50%"></i>
          <i style="--a:270deg;--d:165px;--c:#ffe600;--s:12px;--r:2px"></i>
          <i style="--a:288deg;--d:145px;--c:#ff9f1c;--s:13px;--r:50%"></i>
          <i style="--a:306deg;--d:180px;--c:#ff2e63;--s:11px;--r:50%"></i>
          <i style="--a:324deg;--d:155px;--c:#06d6a0;--s:14px;--r:2px"></i>
          <i style="--a:342deg;--d:170px;--c:#ffd166;--s:12px;--r:50%"></i>
        </span>

        <span class="floaters" aria-hidden="true">
          <b style="--x:18%;--drift:-70px;--delay:0s;--size:26px;--c:#ff2e63">♥</b>
          <b style="--x:28%;--drift:-30px;--delay:.35s;--size:20px;--c:#ff9f1c">♥</b>
          <b style="--x:38%;--drift:10px;--delay:.7s;--size:30px;--c:#ff2e63">♥</b>
          <b style="--x:48%;--drift:40px;--delay:.15s;--size:22px;--c:#c77dff">♥</b>
          <b style="--x:58%;--drift:-20px;--delay:.55s;--size:28px;--c:#ff6b9d">♥</b>
          <b style="--x:68%;--drift:60px;--delay:.9s;--size:20px;--c:#ffd166">♥</b>
          <b style="--x:78%;--drift:80px;--delay:.45s;--size:24px;--c:#ff2e63">♥</b>
          <b style="--x:88%;--drift:30px;--delay:1.1s;--size:18px;--c:#08d9d6">♥</b>
        </span>

        <span class="sparkles" aria-hidden="true">
          <span style="left:12%;top:16%;--delay:0s">✦</span>
          <span style="left:82%;top:12%;--delay:.4s">✦</span>
          <span style="left:8%;top:68%;--delay:.8s">✦</span>
          <span style="left:86%;top:72%;--delay:1.1s">✦</span>
        </span>
      </label>
    </div>

    <div class="status">
      <span class="txt-unliked">Tap the heart to like it</span>
      <span class="txt-liked">♥ You loved it! ♥</span>
    </div>

    <p class="count">
      <span class="c-unliked">♡ 1,284 people liked this</span>
      <span class="c-liked">♥ 1,285 people liked this</span>
    </p>

    <div class="hint"><span class="arrow">↑</span> Click the heart — or Tab + Space &nbsp;·&nbsp; click again to unlike</div>
  </section>

  <section class="how">
    <h2>How it works — zero JavaScript</h2>
    <div class="steps">
      <div class="step">
        <strong>01</strong>
        <h3>Hidden checkbox</h3>
        <p>The checkbox silently holds the “liked” state. No JS, no storage — just <code>:checked</code>.</p>
      </div>
      <div class="step">
        <strong>02</strong>
        <h3>Label = button</h3>
        <p>Clicking the <code>&lt;label&gt;</code> toggles the input, which flips every <code>:checked ~ …</code> rule instantly.</p>
      </div>
      <div class="step">
        <strong>03</strong>
        <h3>Pure CSS chaos</h3>
        <p>Particles, shockwave rings, rotating rays, confetti rain, floating hearts and a stage shake — all keyframes.</p>
      </div>
    </div>

    <div class="snippet">
<pre><code><span class="cm">&lt;!-- the entire “app” --&gt;</span>
<span class="c">&lt;input type="checkbox" id="like"&gt;</span>
<span class="c">&lt;label for="like" class="heart"&gt;♥&lt;/label&gt;</span>

<span class="k">input:checked</span> ~ <span class="k">label</span> .heart {
  animation: <span class="v">pop .6s, burst .95s, floatUp 2.4s infinite</span>;
}</code></pre>
    </div>
  </section>

  <footer>0 lines of JavaScript &nbsp;•&nbsp; 100% HTML + CSS &nbsp;•&nbsp; Click again to unlike and reset the chaos ♥</footer>
</main>

</body>
</html>
Reasoning trace (16,211 tokens)
Implementing a pure-CSS checkbox-hack like button with a click animation while meeting responsive and single-file constraints.Extending the CSS-only design with particle and background effects and a toggleable liked state.Adding CSS heart geometry, gradient text, and particle burst animations with custom properties.Extending the CSS-only animation with particle bursts, rings, floating hearts, and state-driven text using the checkbox hack.Adding keyframe animations for floating hearts, expanding rings, and rotating rays with CSS variables for timing and position.Extending keyframe animations with burst particles, delayed waves, and rotating rays using CSS variables and transforms.Adding ambient hearts, confetti rain, status text swaps, and glassmorphism styling with CSS-only accessibility.Escaping HTML in the code snippet and adjusting overflow and animation keyframes for effects.Extending CSS with responsive breakpoints, ambient hearts, and rain effects while avoiding JS.Applying an abstract transformation under the interface constraint while enforcing the single fenced code block output.