Exploding like buttonOne-line
Muse Ember
by MetaReasoningClean
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 • Zero JavaScript</div>
<h1>The <span class="grad">Crazy</span><br>Like Button</h1>
<p class="sub">One hidden checkbox, a <code><label></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> 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"><!-- pure CSS, no JS --></span>
<span class="tk"><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">></span>
<span class="tk"><label</span> <span class="a">for</span>=<span class="t">"like"</span><span class="tk">></span>♥<span class="tk"></label></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> </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> </span>
</div>
</div>
<footer>Built with <b>one checkbox</b> & 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.