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
25.9 s
Cost
$0.0074
Output tokens
14,784
Spent thinking
6,695 tokens
Speed
611.1 tok/s
Console errors
0
First token after
1.7 s
First visible text after
16.4 s
Prompt tokens
374
Code size
21.7 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"xhigh"}
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 · 307 lines

<!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 — Zero JavaScript</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
    background:#0f0a1e;color:#fff;overflow-x:hidden;min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:#ff2e7e;color:#fff}

  /* BACKGROUND BLOBS */
  .blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0}
  .b1{width:520px;height:520px;background:#ff2e7e;top:-160px;left:-120px;animation:drift1 11s ease-in-out infinite alternate}
  .b2{width:460px;height:460px;background:#7c3aed;bottom:-140px;right:-100px;animation:drift2 13s ease-in-out infinite alternate}
  .b3{width:300px;height:300px;background:#00c2ff;top:38%;left:62%;opacity:.28;animation:drift1 16s ease-in-out infinite alternate-reverse}
  @keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(90px,60px) scale(1.18)}}
  @keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-80px,-70px) scale(.9)}}
  body:has(#like:checked) .blob{animation-duration:2.6s;filter:blur(55px) saturate(1.8);opacity:.75}

  .grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);pointer-events:none;z-index:0}

  .wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:22px 20px 0}

  /* HEADER */
  header{display:flex;justify-content:space-between;align-items:center;gap:16px}
  .logo{font-weight:900;letter-spacing:.02em;font-size:18px;display:flex;align-items:center;gap:9px}
  .logo i{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#ff2e7e,#ff7a3d);display:grid;place-items:center;font-style:normal;font-size:17px;box-shadow:0 8px 24px rgba(255,46,126,.5)}
  .pill{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
  .pill b{color:#00ff9d}

  /* HERO TEXT */
  .hero{text-align:center;padding:38px 0 8px}
  .eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#ffb3d1;background:rgba(255,46,126,.12);border:1px solid rgba(255,46,126,.35);padding:8px 14px;border-radius:999px}
  .eyebrow::before,.eyebrow::after{content:"✦";color:#ff2e7e;font-size:12px}
  h1{font-size:clamp(38px,6vw,68px);line-height:.95;font-weight:950;letter-spacing:-.04em;margin:18px 0 14px}
  .grad{background:linear-gradient(92deg,#ff2e7e 0%,#ff7a3d 28%,#ffcc00 52%,#00e5ff 78%,#b26bff 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
  @keyframes shine{to{background-position:220% center}}
  .sub{color:rgba(255,255,255,.68);font-size:clamp(15px,2vw,18px);line-height:1.55;max-width:620px;margin:0 auto}
  .sub code{background:rgba(255,255,255,.1);padding:2px 8px;border-radius:7px;font-family:ui-monospace,Menlo,monospace;font-size:.88em;color:#8ef7ff}

  /* STAGE / CARD */
  .stage{
    position:relative;max-width:560px;margin:30px auto 0;padding:28px 20px 26px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.13);border-radius:36px;backdrop-filter:blur(14px);
    box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
    transition:box-shadow .4s,border-color .4s,transform .3s;overflow:hidden;
  }
  body:has(#like:checked) .stage{border-color:rgba(255,46,126,.6);box-shadow:0 0 0 1px rgba(255,46,126,.35),0 30px 90px rgba(255,46,126,.32),inset 0 1px 0 rgba(255,255,255,.2)}
  .liked-badge{position:absolute;top:16px;right:16px;font-size:10px;font-weight:900;letter-spacing:.16em;background:#ff2e7e;color:#fff;padding:8px 11px;border-radius:999px;transform:rotate(8deg) scale(.5);opacity:0;transition:all .35s cubic-bezier(.34,1.8,.5,1);box-shadow:0 8px 20px rgba(255,46,126,.6);z-index:8}
  body:has(#like:checked) .liked-badge{opacity:1;transform:rotate(8deg) scale(1)}

  .heart-zone{position:relative;height:280px;display:grid;place-items:center}
  body:has(#like:checked) .heart-zone{animation:shake .55s cubic-bezier(.36,.07,.19,.97) both}
  @keyframes shake{0%,100%{transform:translate(0)}18%{transform:translate(-7px,3px) rotate(-1.2deg)}36%{transform:translate(7px,-3px) rotate(1.2deg)}54%{transform:translate(-5px,2px)}72%{transform:translate(5px,-2px)}88%{transform:translate(-2px,1px)}}

  /* invisible checkbox on top */
  #like{position:absolute;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%);opacity:0;cursor:pointer;z-index:20;margin:0;-webkit-appearance:none;appearance:none}
  #like:focus-visible ~ .like-button{outline:3px dashed #00e5ff;outline-offset:14px;border-radius:50%}

  /* RAYS */
  .rays{position:absolute;left:50%;top:50%;width:400px;height:400px;transform:translate(-50%,-50%);border-radius:50%;opacity:.32;pointer-events:none;
    background:repeating-conic-gradient(from 0deg,rgba(255,46,126,.45) 0deg 9deg,transparent 9deg 20deg);
    -webkit-mask-image:radial-gradient(circle,black 0%,transparent 68%);mask-image:radial-gradient(circle,black 0%,transparent 68%);
    animation:raysSlow 26s linear infinite}
  @keyframes raysSlow{from{transform:translate(-50%,-50%) rotate(0) scale(1)}to{transform:translate(-50%,-50%) rotate(360deg) scale(1.06)}}
  #like:checked ~ .rays{opacity:.95;animation:raysFast 1.8s linear infinite}
  @keyframes raysFast{from{transform:translate(-50%,-50%) rotate(0) scale(1.15)}to{transform:translate(-50%,-50%) rotate(360deg) scale(1.35)}}

  /* RINGS */
  .ring{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;border:3px solid rgba(255,46,126,.7);opacity:0;pointer-events:none}
  .ring1{animation:ringIdle 2.6s ease-out infinite}
  .ring2{animation:ringIdle 2.6s ease-out 1.3s infinite;border-color:rgba(0,229,255,.6)}
  @keyframes ringIdle{0%{opacity:.55;transform:scale(.62)}100%{opacity:0;transform:scale(1.7)}}
  #like:checked ~ .ring1{animation:ringBurst 1s ease-out both}
  #like:checked ~ .ring2{animation:ringBurst 1s ease-out .14s both}
  #like:checked ~ .ring3{animation:ringBurst 1s ease-out .28s both;display:block}
  .ring3{display:none;border-color:#ffcc00}
  @keyframes ringBurst{0%{opacity:.95;transform:scale(.5);border-width:6px}100%{opacity:0;transform:scale(3.1);border-width:1px}}

  /* PARTICLES */
  .particles,.floaters,.confetti{position:absolute;inset:0;pointer-events:none}
  .particles span{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2);background:var(--c);border-radius:50%;opacity:0;box-shadow:0 0 14px var(--c)}
  .particles span.sq{border-radius:3px}
  .particles span.dia{border-radius:0;transform:rotate(45deg)}
  #like:checked ~ .particles span{animation:burst 1.08s cubic-bezier(.17,.89,.32,1) var(--d) both}
  @keyframes burst{0%{opacity:0;transform:translate(0,0) scale(.15) rotate(0)}12%{opacity:1;transform:translate(calc(var(--x)*.28),calc(var(--y)*.28)) scale(1.35) rotate(calc(var(--r)*.28))}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.35) rotate(var(--r))}}

  /* FLOATING HEARTS */
  .floaters span{position:absolute;left:50%;top:50%;font-size:var(--fs,24px);color:var(--c);opacity:0;line-height:1;text-shadow:0 0 18px var(--c)}
  #like:checked ~ .floaters span{animation:floatUp 1.7s ease-out var(--d) infinite}
  @keyframes floatUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}18%{opacity:1;transform:translate(calc(-50% + var(--fx)*.25),-95px) scale(1.25) rotate(18deg)}100%{opacity:0;transform:translate(calc(-50% + var(--fx)),-225px) scale(.75) rotate(-28deg)}}

  /* CONFETTI */
  .confetti span{position:absolute;top:-18px;left:var(--l);width:9px;height:16px;background:var(--c);border-radius:2px;opacity:0}
  #like:checked ~ .confetti span{animation:confettiFall 1.45s ease-in var(--d) both}
  @keyframes confettiFall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(330px) rotate(760deg)}}

  /* HEART BUTTON */
  .like-button{position:relative;z-index:5;width:185px;height:185px;display:grid;place-items:center;cursor:pointer;border-radius:50%;transition:transform .18s;-webkit-tap-highlight-color:transparent}
  .like-button:hover{transform:scale(1.07) rotate(-3deg)}
  .like-button:active{transform:scale(.9) rotate(3deg)}
  .heart-holder{width:178px;height:178px;display:grid;place-items:center;animation:idleBeat 1.9s ease-in-out infinite;transition:filter .3s}
  @keyframes idleBeat{0%,100%{transform:scale(1) rotate(0)}11%{transform:scale(1.09) rotate(-2.5deg)}22%{transform:scale(1)}33%{transform:scale(1.07) rotate(2.5deg)}44%{transform:scale(1)}}
  .heart-holder svg{width:168px;height:168px;overflow:visible}
  .heart-holder svg path{fill:#40315f;stroke:#8f7cc0;stroke-width:.7;transition:fill .3s,stroke .3s}
  .heart-holder svg ellipse{opacity:.28}
  #like:checked ~ .like-button .heart-holder{animation:heartPop .88s cubic-bezier(.36,1.72,.42,1) both;filter:drop-shadow(0 0 30px rgba(255,46,126,.9)) drop-shadow(0 14px 34px rgba(255,46,126,.55))}
  #like:checked ~ .like-button .heart-holder svg path{fill:url(#hg);stroke:rgba(255,255,255,.55)}
  #like:checked ~ .like-button .heart-holder svg ellipse{opacity:.55}
  @keyframes heartPop{0%{transform:scale(.35) rotate(-24deg)}28%{transform:scale(1.48) rotate(11deg)}46%{transform:scale(.86) rotate(-7deg)}64%{transform:scale(1.24) rotate(5deg)}80%{transform:scale(.98) rotate(-2deg)}100%{transform:scale(1.08) rotate(0)}}
  body:has(#like:checked) .like-button{animation:buttonSpin .88s cubic-bezier(.36,1.4,.4,1) both}
  @keyframes buttonSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}

  /* STATUS TEXT */
  .status{margin-top:6px}
  .swap{position:relative;width:280px;height:46px;margin:0 auto}
  .swap span{position:absolute;inset:0;display:grid;place-items:center;font-weight:950;letter-spacing:.2em;font-size:19px;text-transform:uppercase;transition:all .38s cubic-bezier(.34,1.6,.5,1)}
  .t-like{opacity:1;transform:translateY(0)}
  .t-loved{opacity:0;transform:translateY(18px) scale(.55) rotate(-7deg);background:linear-gradient(90deg,#ff2e7e,#ff7a3d,#ffcc00);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
  body:has(#like:checked) .t-like{opacity:0;transform:translateY(-18px) scale(.55) rotate(6deg)}
  body:has(#like:checked) .t-loved{opacity:1;transform:translateY(0) scale(1) rotate(0);animation:textPop .62s cubic-bezier(.34,1.8,.5,1) both,shine 2.4s linear infinite}
  @keyframes textPop{0%{transform:translateY(18px) scale(.4) rotate(-10deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
  .count{margin-top:4px;font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.55);transition:color .3s}
  .count b{color:#fff;font-size:15px}
  .count-num::before{content:"1,337"}
  body:has(#like:checked) .count{color:#ff8fbc}
  body:has(#like:checked) .count-num::before{content:"1,338"}
  body:has(#like:checked) .count-num{animation:countPop .55s cubic-bezier(.34,1.9,.5,1) both;display:inline-block}
  @keyframes countPop{0%{transform:scale(.4) rotate(-12deg)}100%{transform:scale(1.35) rotate(0)}}
  .reset-hint{font-size:12px;color:rgba(255,255,255,.42);margin-top:8px}
  body:has(#like:checked) .reset-hint{opacity:0}

  .hint{display:flex;justify-content:center;align-items:center;gap:10px;margin:18px auto 0;font-size:13px;font-weight:700;color:#ffe1ee;background:rgba(255,46,126,.1);border:1px dashed rgba(255,46,126,.45);padding:12px 16px;border-radius:999px;max-width:560px;text-align:center}
  .hint .arrow{display:inline-block;animation:bounce 1s ease-in-out infinite;font-size:18px}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  body:has(#like:checked) .hint{background:rgba(0,255,157,.1);border-color:rgba(0,255,157,.4);color:#d6ffe f;color:#d6ffef}

  /* FEATURES + CODE */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
  .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:22px;padding:18px}
  .card h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px}
  .feat-row{display:flex;gap:10px;flex-wrap:wrap}
  .feat{flex:1;min-width:92px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:13px 10px;text-align:center}
  .feat strong{display:block;font-size:24px;line-height:1}
  .feat span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .feat:nth-child(1) strong{color:#ff7aa8}.feat:nth-child(2) strong{color:#ffcc00}.feat:nth-child(3) strong{color:#00ff9d}
  pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;color:#d8d2ff;white-space:pre-wrap;word-break:break-word}
  .k{color:#ff7aa8}.t{color:#8ef7ff}.a{color:#ffcc00}.c{color:rgba(255,255,255,.38)}

  /* MARQUEE */
  .marquee{margin-top:22px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);overflow:hidden;padding:13px 0;background:rgba(0,0,0,.18)}
  .track{display:flex;width:max-content;animation:marq 16s linear infinite;font-weight:900;letter-spacing:.18em;font-size:13px;text-transform:uppercase;white-space:nowrap}
  .track span{padding-right:28px}
  .track i{color:#ff2e7e;font-style:normal}
  @keyframes marq{to{transform:translateX(-50%)}}
  footer{text-align:center;padding:18px 0 28px;color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.06em}
  footer b{color:rgba(255,255,255,.7)}

  @media(max-width:640px){
    .wrap{padding:16px 14px 0}
    .hero{padding-top:26px}
    .stage{border-radius:28px;padding:20px 14px 22px}
    .heart-zone{height:238px}
    .rays{width:300px;height:300px}
    .like-button,.heart-holder{width:150px;height:150px}
    .heart-holder svg{width:142px;height:142px}
    #like{width:170px;height:170px}
    .grid2{grid-template-columns:1fr}
    .hint{font-size:12px;border-radius:18px}
    .pill{display:none}
  }
</style>
</head>
<body>
  <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  <div class="grid-bg"></div>

  <div class="wrap">
    <header>
      <div class="logo"><i>♥</i> CSS<span style="color:#ff2e7e">.</span>ONLY</div>
      <div class="pill"><b>0</b> lines of JavaScript</div>
    </header>

    <section class="hero">
      <div class="eyebrow">Pure CSS &nbsp;•&nbsp; Zero JavaScript</div>
      <h1>The <span class="grad">Crazy</span><br>Like Button</h1>
      <p class="sub">One hidden checkbox, a <code>&lt;label&gt;</code> and a storm of <code>@keyframes</code>. No script. No libraries. Just CSS going absolutely feral.</p>
    </section>

    <main class="stage">
      <div class="liked-badge">♥ LIKED!</div>

      <div class="heart-zone">
        <input type="checkbox" id="like" aria-label="Like this">
        <div class="rays"></div>
        <div class="ring ring1"></div>
        <div class="ring ring2"></div>
        <div class="ring ring3"></div>

        <div class="particles" aria-hidden="true">
          <span style="--x:150px;--y:-115px;--s:14px;--c:#ff2e7e;--d:0s;--r:340deg"></span>
          <span style="--x:-155px;--y:-95px;--s:10px;--c:#ffcc00;--d:.02s;--r:-260deg" class="sq"></span>
          <span style="--x:175px;--y:15px;--s:12px;--c:#00e5ff;--d:.04s;--r:420deg"></span>
          <span style="--x:-175px;--y:25px;--s:16px;--c:#b26bff;--d:.01s;--r:-380deg" class="dia"></span>
          <span style="--x:125px;--y:125px;--s:10px;--c:#ff7a3d;--d:.06s;--r:300deg"></span>
          <span style="--x:-125px;--y:135px;--s:14px;--c:#ff2e7e;--d:.03s;--r:-320deg" class="sq"></span>
          <span style="--x:0px;--y:-175px;--s:12px;--c:#00ff9d;--d:.05s;--r:200deg"></span>
          <span style="--x:65px;--y:-165px;--s:9px;--c:#ff2e7e;--d:.07s;--r:260deg"></span>
          <span style="--x:-65px;--y:-165px;--s:11px;--c:#00e5ff;--d:.02s;--r:-240deg" class="sq"></span>
          <span style="--x:195px;--y:-55px;--s:11px;--c:#ffcc00;--d:.08s;--r:380deg"></span>
          <span style="--x:-195px;--y:-55px;--s:13px;--c:#ff7a3d;--d:.04s;--r:-400deg"></span>
          <span style="--x:165px;--y:85px;--s:9px;--c:#00ff9d;--d:.09s;--r:280deg" class="dia"></span>
          <span style="--x:-165px;--y:95px;--s:10px;--c:#ff2e7e;--d:.06s;--r:-290deg"></span>
          <span style="--x:95px;--y:165px;--s:13px;--c:#b26bff;--d:.03s;--r:340deg" class="sq"></span>
          <span style="--x:-95px;--y:165px;--s:12px;--c:#ffcc00;--d:.07s;--r:-310deg"></span>
          <span style="--x:35px;--y:185px;--s:10px;--c:#00e5ff;--d:.05s;--r:220deg"></span>
          <span style="--x:-35px;--y:185px;--s:14px;--c:#ff2e7e;--d:.01s;--r:-230deg"></span>
          <span style="--x:205px;--y:-105px;--s:8px;--c:#00ff9d;--d:.1s;--r:360deg"></span>
          <span style="--x:-205px;--y:-115px;--s:8px;--c:#ffcc00;--d:.09s;--r:-350deg" class="sq"></span>
          <span style="--x:0px;--y:195px;--s:11px;--c:#ff7a3d;--d:.08s;--r:270deg" class="dia"></span>
        </div>

        <div class="floaters" aria-hidden="true">
          <span style="--fx:-70px;--fs:26px;--c:#ff2e7e;--d:0s">♥</span>
          <span style="--fx:65px;--fs:20px;--c:#ffcc00;--d:.25s">★</span>
          <span style="--fx:-30px;--fs:30px;--c:#00e5ff;--d:.5s">♥</span>
          <span style="--fx:40px;--fs:18px;--c:#00ff9d;--d:.75s">✦</span>
          <span style="--fx:-55px;--fs:18px;--c:#b26bff;--d:1s">♥</span>
          <span style="--fx:80px;--fs:24px;--c:#ff7a3d;--d:1.2s">♥</span>
        </div>

        <div class="confetti" aria-hidden="true">
          <span style="--l:6%;--c:#ff2e7e;--d:0s"></span><span style="--l:14%;--c:#ffcc00;--d:.08s"></span>
          <span style="--l:24%;--c:#00e5ff;--d:.04s"></span><span style="--l:34%;--c:#00ff9d;--d:.12s"></span>
          <span style="--l:44%;--c:#b26bff;--d:.02s"></span><span style="--l:54%;--c:#ff7a3d;--d:.1s"></span>
          <span style="--l:64%;--c:#ff2e7e;--d:.06s"></span><span style="--l:74%;--c:#ffcc00;--d:.14s"></span>
          <span style="--l:84%;--c:#00e5ff;--d:.03s"></span><span style="--l:92%;--c:#00ff9d;--d:.11s"></span>
        </div>

        <label class="like-button" for="like" aria-label="Like">
          <span class="heart-holder">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <defs>
                <linearGradient id="hg" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#ff7aa8"/>
                  <stop offset="45%" stop-color="#ff2e7e"/>
                  <stop offset="100%" stop-color="#ff3d00"/>
                </linearGradient>
              </defs>
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
              <ellipse cx="7.6" cy="7.4" rx="2.3" ry="1.25" fill="#fff" transform="rotate(-28 7.6 7.4)"/>
            </svg>
          </span>
        </label>
      </div>

      <div class="status">
        <div class="swap"><span class="t-like">Like it</span><span class="t-loved">Loved! ♥</span></div>
        <div class="count"><b class="count-num"></b> likes</div>
        <div class="reset-hint">click again to unlike ↺</div>
      </div>
    </main>

    <div class="hint"><span class="arrow">👆</span><span><b>Click the heart!</b> &nbsp;or focus it and press <b>Space</b> — pure CSS does the rest</span></div>

    <section class="grid2">
      <div class="card">
        <h3>Under the hood</h3>
        <div class="feat-row">
          <div class="feat"><strong>:checked</strong><span>Checkbox hack</span></div>
          <div class="feat"><strong>20</strong><span>Particles</span></div>
          <div class="feat"><strong>0</strong><span>Lines of JS</span></div>
        </div>
        <p style="margin-top:14px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.6)">Checking the box triggers <b style="color:#fff">:checked</b> sibling selectors. Every particle, ring and confetti piece is just CSS <b style="color:#fff">transform + opacity</b> animated with custom properties.</p>
      </div>
      <div class="card">
        <h3>The trick</h3>
<pre><span class="c">&lt;!-- pure CSS, no JS --&gt;</span>
<span class="tk">&lt;input</span> <span class="a">type</span>=<span class="t">"checkbox"</span> <span class="a">id</span>=<span class="t">"like"</span><span class="tk">&gt;</span>
<span class="tk">&lt;label</span> <span class="a">for</span>=<span class="t">"like"</span><span class="tk">&gt;</span>♥<span class="tk">&lt;/label&gt;</span>

<span class="k">#like:checked</span> ~ <span class="t">.heart</span> {
  animation: <span class="a">heartPop</span> .9s;
}
<span class="k">#like:checked</span> ~ <span class="t">.particles</span> {
  animation: <span class="a">burst</span> 1s;
}</pre>
      </div>
    </section>

    <div class="marquee" aria-hidden="true">
      <div class="track">
        <span>Like <i>✦</i> Love <i>✦</i> Repeat <i>✦</i> Pure CSS <i>✦</i> Zero JS <i>✦</i> Like <i>✦</i> Love <i>✦</i> Repeat <i>✦</i> Pure CSS <i>✦</i> Zero JS <i>✦</i>&nbsp;</span>
        <span>Like <i>✦</i> Love <i>✦</i> Repeat <i>✦</i> Pure CSS <i>✦</i> Zero JS <i>✦</i> Like <i>✦</i> Love <i>✦</i> Repeat <i>✦</i> Pure CSS <i>✦</i> Zero JS <i>✦</i>&nbsp;</span>
      </div>
    </div>
    <footer>Built with <b>one checkbox</b> &amp; unreasonable amounts of <b>CSS</b> ♥</footer>
  </div>
</body>
</html>
Reasoning trace (6,695 tokens)
Balancing pure CSS constraint against inline JS requirement while using checkbox hack for click animation and responsive layout.Extending the CSS-only design with hardcoded particles and :has selectors for burst and hue animations.Adding idle heartbeat and floating micro-hearts plus auto-playing demo hints for first-paint visibility.Extending the CSS structure with checkbox sibling selectors, keyframes, and animated background elements.Adding particle, confetti, and text-swap animations with CSS variables and sibling selectors.Extending layout with overflow containment, font stacks, and :has-based state selectors while chaining keyframe animations.Resolving animation composition by using both for transform and filter with separate keyframes and override order.