Models 44

MiMo-V2.6-Pro

by Xiaomireasoning defaultClean
Open in new window

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

How it went

Total time
5 min 31 s
Cost
$0.015
Output tokens
16,891
Spent thinking
6,923 tokens
Speed
51.1 tok/s
Console errors
0
First token after
1.1 s
First visible text after
3 min 9 s
Prompt tokens
359
Code size
24.5 KB
Finish reason
stop
Served by
Xiaomi
Model id
xiaomi/mimo-v2.6-pro
Reasoning sent
model default
Max output
131,072 tokens
Generated
Nov 13, 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 · 598 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Like Button — Pure CSS</title>
<style>
  /* ============================================================
     THE LIKE BUTTON — 100% CSS. No JavaScript. Not a single line.
     ============================================================ */

  :root{
    --bg0:#090a1a;
    --ink:#f5f6ff;
    --muted:#a6abd2;
    --hot:#ff2d64;
    --hot-2:#ff7aa6;
    --gold:#ffd166;
    --cyan:#7cf6ff;
    --violet:#a78bfa;
    --blast:1;
    --heart:linear-gradient(150deg,#ff7aa6 0%,#ff2d64 42%,#e51252 100%);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  body{
    min-height:100vh;
    background:
      radial-gradient(1100px 620px at 50% -12%, #2c1150 0%, rgba(44,17,80,0) 62%),
      radial-gradient(700px 520px at 88% 108%, #3b0f36 0%, rgba(59,15,54,0) 65%),
      linear-gradient(180deg,#090a1a 0%,#111235 52%,#090a1a 100%);
    color:var(--ink);
    font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-align:center;
    padding:0 18px 40px;
    position:relative;
    isolation:isolate;
  }

  /* ---------- ambient background ---------- */
  .bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
  .grid{
    position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 78px),
      repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 78px);
    -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 72%);
            mask-image:radial-gradient(circle at 50% 32%,#000 0%,transparent 72%);
    opacity:.55;
  }
  .orb{position:absolute;border-radius:50%;filter:blur(68px);opacity:.5;}
  .orb-a{width:520px;height:520px;left:-140px;top:-120px;background:#5b21b6;animation:drift 18s ease-in-out infinite;}
  .orb-b{width:460px;height:460px;right:-120px;top:22%;background:#be1250;animation:drift 22s ease-in-out infinite reverse;}
  .orb-c{width:520px;height:520px;left:28%;bottom:-260px;background:#0e7490;animation:drift 26s ease-in-out infinite;}
  @keyframes drift{
    0%,100%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(40px,-34px,0) scale(1.12);}
  }

  .float-heart{
    position:absolute;width:26px;height:24px;opacity:.22;
    background:linear-gradient(180deg,#ff86b0,#ff2d64);
    clip-path:path("M13 24C13 24 0 15.6 0 7.6 0 3.4 3.2 0 7.2 0c2.4 0 4.6 1.2 5.8 3.2C14.2 1.2 16.4 0 18.8 0 22.8 0 26 3.4 26 7.6 26 15.6 13 24 13 24Z");
    animation:float-up linear infinite;
  }
  .f1{left:8%;bottom:-40px;animation-duration:19s;}
  .f2{left:22%;bottom:-60px;width:16px;height:15px;animation-duration:25s;animation-delay:-6s;}
  .f3{left:74%;bottom:-50px;width:34px;height:31px;animation-duration:16s;animation-delay:-3s;}
  .f4{left:88%;bottom:-70px;width:18px;height:17px;animation-duration:28s;animation-delay:-12s;}
  .f5{left:52%;bottom:-60px;width:22px;height:20px;animation-duration:22s;animation-delay:-9s;}
  .f6{left:38%;bottom:-80px;width:13px;height:12px;animation-duration:31s;animation-delay:-16s;}
  @keyframes float-up{
    0%{transform:translate3d(0,0,0) rotate(-8deg);opacity:0;}
    12%{opacity:.28;}
    50%{transform:translate3d(38px,-52vh,0) rotate(14deg);}
    88%{opacity:.2;}
    100%{transform:translate3d(-26px,-112vh,0) rotate(-18deg);opacity:0;}
  }

  /* ---------- top bar ---------- */
  .top{
    max-width:1180px;margin:0 auto;padding:26px 4px 8px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  }
  .brand{
    display:flex;align-items:center;gap:11px;
    font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:#cfd3f2;font-weight:700;
  }
  .brand .dot{
    width:11px;height:11px;border-radius:50%;background:var(--hot);
    box-shadow:0 0 0 5px rgba(255,45,100,.18),0 0 18px rgba(255,45,100,.85);
    animation:blip 2.2s ease-in-out infinite;
  }
  @keyframes blip{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.72);opacity:.55;}}
  .chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
  .chips span{
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    padding:8px 14px;border-radius:100px;color:#c6cbea;font-weight:700;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
    white-space:nowrap;
  }
  .chips span:last-child{color:#08121c;background:linear-gradient(120deg,var(--cyan),#b6f4ff);border-color:transparent;}

  /* ---------- hero ---------- */
  main{max-width:1180px;margin:0 auto;}
  .eyebrow{
    margin:22px 0 10px;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
    color:#8f96c4;font-weight:700;
  }
  h1{
    margin:0;
    font-size:clamp(2.35rem,6.4vw,4.75rem);
    line-height:.98;letter-spacing:-.035em;font-weight:800;
    text-shadow:0 18px 50px rgba(0,0,0,.5);
  }
  h1 em{
    font-style:normal;
    background:linear-gradient(100deg,#ffd166,#ff5c8a 38%,#ff2d64 62%,#a78bfa);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .lede{
    max-width:620px;margin:18px auto 0;
    font-size:clamp(.96rem,1.9vw,1.13rem);line-height:1.65;color:var(--muted);
  }
  kbd{
    font-family:inherit;font-size:.82em;font-weight:700;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
    border-bottom-width:2px;border-radius:7px;padding:2px 8px;color:#e9ebff;
  }

  /* ---------- the stage ---------- */
  .stage{position:relative;padding:26px 0 6px;}
  .toggle{
    position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
  }
  .shake{
    position:relative;width:100%;height:clamp(300px,42vw,360px);
    display:flex;align-items:center;justify-content:center;
    transform-origin:50% 55%;
    animation:intro-shake .55s .15s cubic-bezier(.36,.07,.19,.97) both;
  }
  @keyframes intro-shake{
    0%{transform:translate3d(0,0,0) rotate(0);}
    20%{transform:translate3d(-7px,3px,0) rotate(-.7deg);}
    45%{transform:translate3d(6px,-4px,0) rotate(.6deg);}
    70%{transform:translate3d(-4px,2px,0) rotate(-.35deg);}
    100%{transform:none;}
  }
  #like:checked ~ .shake{
    animation:blast-shake .62s cubic-bezier(.36,.07,.19,.97) both;
  }
  @keyframes blast-shake{
    0%{transform:translate3d(0,0,0) rotate(0) scale(1);}
    12%{transform:translate3d(-13px,7px,0) rotate(-1.4deg) scale(1.03);}
    28%{transform:translate3d(12px,-9px,0) rotate(1.3deg) scale(.985);}
    46%{transform:translate3d(-9px,-5px,0) rotate(-1deg) scale(1.015);}
    64%{transform:translate3d(7px,6px,0) rotate(.8deg) scale(.995);}
    82%{transform:translate3d(-4px,-3px,0) rotate(-.4deg) scale(1.005);}
    100%{transform:none;}
  }

  /* ---------- the button ---------- */
  .like-btn{
    position:relative;
    width:clamp(224px,32vw,282px);
    height:clamp(224px,32vw,282px);
    border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    cursor:pointer;
    background:
      radial-gradient(120% 120% at 32% 20%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
      0 34px 70px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 0 10px rgba(255,255,255,.035);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,1.2,.3,1);
    user-select:none;-webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .like-btn:hover{
    transform:translateY(-5px);
    border-color:rgba(255,120,165,.5);
    box-shadow:
      0 42px 86px rgba(255,45,100,.28),
      inset 0 1px 0 rgba(255,255,255,.3),
      0 0 0 12px rgba(255,45,100,.09);
  }
  .like-btn:active{transform:scale(.955);}
  #like:focus-visible ~ .shake .like-btn{
    outline:3px solid var(--cyan);outline-offset:12px;
    border-color:rgba(124,246,255,.7);
  }
  #like:checked ~ .shake .like-btn{
    border-color:rgba(255,90,140,.55);
    background:
      radial-gradient(120% 120% at 32% 20%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(160deg, rgba(255,45,100,.19), rgba(255,45,100,.05));
    box-shadow:
      0 34px 82px rgba(255,45,100,.42),
      inset 0 1px 0 rgba(255,255,255,.28),
      0 0 0 12px rgba(255,45,100,.13),
      0 0 130px rgba(255,45,100,.35);
  }

  /* mega word behind the heart */
  .mega{
    position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
    font-size:clamp(4.6rem,13vw,8.2rem);font-weight:800;letter-spacing:-.05em;
    color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.13);
    pointer-events:none;white-space:nowrap;z-index:1;
    opacity:.75;
  }
  #like:checked ~ .shake .mega{
    animation:mega-blast .95s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes mega-blast{
    0%{transform:translate(-50%,-50%) scale(.42) rotate(-7deg);opacity:0;
       -webkit-text-stroke-color:rgba(255,120,165,.9);color:rgba(255,45,100,.22);}
    35%{opacity:.95;}
    100%{transform:translate(-50%,-50%) scale(1.75) rotate(2deg);opacity:0;}
  }

  /* rings / shockwaves */
  .ring{
    position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
    border:2px solid rgba(255,90,140,.45);
  }
  .r1{animation:ring-breathe 3.4s ease-in-out infinite;}
  .r2{border-color:rgba(124,246,255,.28);animation:ring-breathe 3.4s .55s ease-in-out infinite;}
  .r3{border-color:rgba(255,209,102,.22);animation:ring-breathe 3.4s 1.1s ease-in-out infinite;}
  @keyframes ring-breathe{
    0%,100%{transform:scale(1);opacity:.42;}
    50%{transform:scale(1.06);opacity:.16;}
  }
  #like:checked ~ .shake .r1{animation:ring-blast .82s cubic-bezier(.12,.8,.3,1) both;}
  #like:checked ~ .shake .r2{animation:ring-blast .82s .09s cubic-bezier(.12,.8,.3,1) both;}
  #like:checked ~ .shake .r3{animation:ring-blast .82s .19s cubic-bezier(.12,.8,.3,1) both;}
  @keyframes ring-blast{
    0%{transform:scale(.55);opacity:1;border-width:8px;}
    60%{opacity:.5;}
    100%{transform:scale(2.25);opacity:0;border-width:1px;}
  }

  /* soft halo */
  .halo{
    position:absolute;left:50%;top:46%;width:62%;height:62%;transform:translate(-50%,-50%);
    border-radius:50%;pointer-events:none;z-index:1;
    background:radial-gradient(circle,rgba(255,45,100,.55) 0%,rgba(255,45,100,0) 68%);
    animation:halo-breathe 3s ease-in-out infinite;
  }
  @keyframes halo-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1);}50%{opacity:.28;transform:translate(-50%,-50%) scale(1.16);}}
  #like:checked ~ .shake .halo{animation:halo-blast .85s cubic-bezier(.16,1,.3,1) both;}
  @keyframes halo-blast{
    0%{opacity:1;transform:translate(-50%,-50%) scale(.4);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(3.1);}
  }

  /* ---------- the heart (pure CSS shape) ---------- */
  .heart-wrap{
    position:relative;z-index:4;pointer-events:none;
    margin-top:6px;
    animation:heart-idle 2.8s ease-in-out infinite;
  }
  @keyframes heart-idle{
    0%,100%{transform:scale(1) translateY(0);}
    50%{transform:scale(1.06) translateY(-4px);}
  }
  .heart{
    position:relative;width:112px;height:102px;
    filter:drop-shadow(0 16px 26px rgba(255,45,100,.5));
  }
  .heart::before,.heart::after{
    content:"";position:absolute;top:0;width:56px;height:90px;
    background:var(--heart);
    border-radius:56px 56px 0 0;
  }
  .heart::before{left:56px;transform:rotate(-45deg);transform-origin:0 100%;}
  .heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%;}
  .shine{
    position:absolute;left:22px;top:17px;width:30px;height:18px;border-radius:50%;
    background:rgba(255,255,255,.62);transform:rotate(-22deg);filter:blur(1.4px);z-index:2;
  }
  #like:checked ~ .shake .heart{
    animation:heart-impact 1s cubic-bezier(.18,1.5,.32,1) both;
  }
  @keyframes heart-impact{
    0%{transform:scale(.52) rotate(-16deg);filter:drop-shadow(0 0 42px rgba(255,45,100,.95)) brightness(2.1);}
    22%{transform:scale(1.42) rotate(11deg);filter:drop-shadow(0 0 66px rgba(255,45,100,1)) brightness(1.6);}
    42%{transform:scale(.88) rotate(-7deg);filter:drop-shadow(0 16px 26px rgba(255,45,100,.6)) brightness(1.15);}
    62%{transform:scale(1.17) rotate(4deg);}
    80%{transform:scale(.96) rotate(-2deg);}
    100%{transform:scale(1) rotate(0);filter:drop-shadow(0 16px 30px rgba(255,45,100,.65));}
  }

  /* ---------- sparks ---------- */
  .sparks,.confetti{position:absolute;left:50%;top:46%;width:0;height:0;pointer-events:none;z-index:6;}
  .sparks i{
    position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;
    border-radius:3px;background:var(--c,#ffd166);
    box-shadow:0 0 14px var(--c,#ffd166);
    transform:rotate(var(--a)) translateY(0) scale(0);
    opacity:0;
    animation:spark-intro .82s var(--dl,0s) cubic-bezier(.12,.85,.3,1) both;
  }
  @keyframes spark-intro{
    0%{transform:rotate(var(--a)) translateY(-16px) scale(0);opacity:0;}
    16%{opacity:1;}
    100%{transform:rotate(var(--a)) translateY(calc(var(--d) * var(--blast) * -.62)) scale(.55);opacity:0;}
  }
  #like:checked ~ .shake .sparks i{
    animation:spark-fly .95s var(--dl,0s) cubic-bezier(.1,.85,.28,1) both;
  }
  @keyframes spark-fly{
    0%{transform:rotate(var(--a)) translateY(-16px) scale(0);opacity:0;}
    12%{opacity:1;transform:rotate(var(--a)) translateY(-28px) scale(1.25);}
    55%{opacity:.95;}
    100%{transform:rotate(var(--a)) translateY(calc(var(--d) * var(--blast) * -1)) scale(.35);opacity:0;}
  }

  /* ---------- confetti ---------- */
  .confetti b{
    position:absolute;left:0;top:0;width:11px;height:18px;margin:-9px 0 0 -5px;
    border-radius:3px;background:var(--c,#ff5c8a);
    box-shadow:0 0 12px rgba(255,255,255,.28);
    opacity:0;
    animation:confetti-intro .9s var(--dl,0s) cubic-bezier(.16,.9,.3,1) both;
  }
  @keyframes confetti-intro{
    0%{transform:translate3d(0,0,0) rotate(0) scale(0);opacity:0;}
    18%{opacity:1;}
    100%{transform:translate3d(calc(var(--x) * var(--blast) * .55),calc(var(--y) * var(--blast) * .55),0) rotate(calc(var(--r) * .6)) scale(.7);opacity:0;}
  }
  #like:checked ~ .shake .confetti b{
    animation:confetti-pop 1.25s var(--dl,0s) cubic-bezier(.14,.86,.28,1) both;
  }
  @keyframes confetti-pop{
    0%{transform:translate3d(0,0,0) rotate(0) scale(0);opacity:0;}
    14%{opacity:1;}
    62%{opacity:1;}
    100%{transform:translate3d(calc(var(--x) * var(--blast)),calc(var(--y) * var(--blast)),0) rotate(var(--r)) scale(1);opacity:0;}
  }

  /* ---------- flash + boom ---------- */
  .flash{
    position:absolute;left:50%;top:46%;width:min(92vw,880px);height:min(92vw,880px);
    transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:7;
    background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,110,160,.35) 32%,rgba(255,45,100,0) 66%);
    opacity:0;
    animation:flash-in .55s .02s ease-out both;
  }
  @keyframes flash-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.35);}18%{opacity:.72;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12);}}
  #like:checked ~ .shake .flash{animation:flash-in .55s ease-out both;}

  .boom{
    position:absolute;left:50%;top:46%;z-index:8;pointer-events:none;
    transform:translate(-50%,-50%);
    font-size:clamp(2.5rem,8vw,5.4rem);font-weight:800;letter-spacing:-.04em;
    color:#fff;white-space:nowrap;
    text-shadow:0 0 28px rgba(255,45,100,.95),0 0 70px rgba(255,45,100,.7),0 12px 32px rgba(0,0,0,.4);
    opacity:0;
    animation:boom-in .78s .06s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes boom-in{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-12deg);}
    22%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg);}
    55%{opacity:1;}
    100%{opacity:0;transform:translate(-50%,-58%) scale(1.6) rotate(-3deg);}
  }
  #like:checked ~ .shake .boom{animation:boom-in .78s .06s cubic-bezier(.16,1,.3,1) both;}

  /* ---------- button label text ---------- */
  .btn-label{
    position:relative;z-index:5;margin-top:14px;height:26px;width:100%;
    pointer-events:none;
  }
  .btn-label span{
    position:absolute;left:0;right:0;top:0;
    font-size:.76rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
    transition:opacity .35s ease, transform .35s ease;
  }
  .btn-label .liked{opacity:0;transform:translateY(12px) scale(.9);color:#ffd7e4;}
  .btn-label .idle{opacity:.72;transform:none;}
  #like:checked ~ .shake .btn-label .idle{opacity:0;transform:translateY(-12px) scale(.9);}
  #like:checked ~ .shake .btn-label .liked{opacity:1;transform:none;}

  /* ---------- status line ---------- */
  .status{
    position:relative;height:62px;margin-top:2px;
  }
  .status > span{
    position:absolute;left:0;right:0;top:0;
    font-size:clamp(.95rem,2.1vw,1.12rem);color:var(--muted);
    transition:opacity .4s ease, transform .4s ease;
  }
  .status strong{color:#fff;}
  .status .liked-copy{
    opacity:0;transform:translateY(14px);
    font-size:clamp(1.05rem,2.4vw,1.32rem);color:#ffd7e4;font-weight:700;
    background:linear-gradient(100deg,#fff,#ffd166 30%,#ff7aa6 62%,#a78bfa);
    -webkit-background-clip:text;background-clip:text;
  }
  #like:checked ~ .status .idle-copy{opacity:0;transform:translateY(-14px);}
  #like:checked ~ .status .liked-copy{opacity:1;transform:none;}

  /* ---------- explanation cards ---------- */
  .cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    margin:14px auto 0;max-width:1080px;text-align:left;
  }
  .card{
    padding:22px 22px 24px;border-radius:20px;
    background:rgba(255,255,255,.052);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .35s ease, border-color .35s ease, background .35s ease;
  }
  .card:hover{transform:translateY(-6px);border-color:rgba(255,120,165,.42);background:rgba(255,255,255,.085);}
  .card .num{
    font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
    color:var(--hot-2);
  }
  .card h3{margin:11px 0 8px;font-size:1.08rem;letter-spacing:-.01em;}
  .card p{margin:0;font-size:.925rem;line-height:1.62;color:var(--muted);}
  .card code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.85em;color:#b9f3ff;background:rgba(124,246,255,.1);
    border:1px solid rgba(124,246,255,.2);border-radius:6px;padding:1px 6px;
  }

  footer{
    margin:34px auto 0;max-width:1080px;
    display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
    font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#767da8;font-weight:700;
  }

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .cards{grid-template-columns:1fr;max-width:520px;}
    .top{justify-content:center;}
  }
  @media (max-width:560px){
    :root{--blast:.62;}
    body{padding:0 14px 32px;}
    .brand{letter-spacing:.22em;}
    .chips span{font-size:.62rem;padding:7px 11px;}
    .shake{height:clamp(280px,82vw,330px);}
    .heart{width:88px;height:80px;}
    .heart::before,.heart::after{width:44px;height:71px;}
    .heart::before{left:44px;}
    .shine{width:23px;height:14px;left:17px;top:13px;}
    .cards{gap:12px;}
    .card{padding:18px;}
  }

  @media (prefers-reduced-motion: reduce){
    .orb,.float-heart,.r1,.r2,.r3,.halo,.heart-wrap{animation-duration:9s;}
  }
</style>
</head>
<body>

<div class="bg" aria-hidden="true">
  <div class="grid"></div>
  <span class="orb orb-a"></span>
  <span class="orb orb-b"></span>
  <span class="orb orb-c"></span>
  <span class="float-heart f1"></span>
  <span class="float-heart f2"></span>
  <span class="float-heart f3"></span>
  <span class="float-heart f4"></span>
  <span class="float-heart f5"></span>
  <span class="float-heart f6"></span>
</div>

<div class="top">
  <div class="brand"><span class="dot"></span> Pure CSS Lab</div>
  <div class="chips">
    <span>:checked</span>
    <span>@keyframes</span>
    <span>0 KB of JS</span>
  </div>
</div>

<main>
  <p class="eyebrow">Interaction № 01 — State &amp; Motion</p>
  <h1>The <em>Like</em> Button</h1>
  <p class="lede">
    One hidden checkbox, eighteen keyframe animations and absolutely no JavaScript.
    Click the heart — or tab to it and hit <kbd>Space</kbd>. Click it again to reset the blast.
  </p>

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

    <div class="shake">
      <label class="like-btn" for="like">
        <span class="mega">LIKE</span>

        <span class="ring r1"></span>
        <span class="ring r2"></span>
        <span class="ring r3"></span>
        <span class="halo"></span>

        <span class="sparks" aria-hidden="true">
          <i style="--a:0deg;    --d:210px;--c:#ffd166;--dl:.00s"></i>
          <i style="--a:22.5deg; --d:168px;--c:#ff7aa6;--dl:.03s"></i>
          <i style="--a:45deg;   --d:224px;--c:#7cf6ff;--dl:.06s"></i>
          <i style="--a:67.5deg; --d:152px;--c:#ffd166;--dl:.02s"></i>
          <i style="--a:90deg;   --d:202px;--c:#ff8ab5;--dl:.08s"></i>
          <i style="--a:112.5deg;--d:164px;--c:#7cf6ff;--dl:.04s"></i>
          <i style="--a:135deg;  --d:228px;--c:#ffd166;--dl:.09s"></i>
          <i style="--a:157.5deg;--d:158px;--c:#ff5c8a;--dl:.01s"></i>
          <i style="--a:180deg;  --d:214px;--c:#7cf6ff;--dl:.07s"></i>
          <i style="--a:202.5deg;--d:172px;--c:#ffd166;--dl:.05s"></i>
          <i style="--a:225deg;  --d:220px;--c:#ff5c8a;--dl:.10s"></i>
          <i style="--a:247.5deg;--d:156px;--c:#7cf6ff;--dl:.02s"></i>
          <i style="--a:270deg;  --d:206px;--c:#ffd166;--dl:.06s"></i>
          <i style="--a:292.5deg;--d:166px;--c:#ff8ab5;--dl:.03s"></i>
          <i style="--a:315deg;  --d:230px;--c:#7cf6ff;--dl:.09s"></i>
          <i style="--a:337.5deg;--d:150px;--c:#ffd166;--dl:.00s"></i>
        </span>

        <span class="confetti" aria-hidden="true">
          <b style="--x:-172px;--y:-126px;--r:220deg;--c:#ff5c8a;--dl:.04s"></b>
          <b style="--x:-238px;--y:-34px; --r:-190deg;--c:#ffd166;--dl:.09s"></b>
          <b style="--x:-150px;--y:132px; --r:300deg;--c:#7cf6ff;--dl:.02s"></b>
          <b style="--x:-38px;  --y:196px; --r:-260deg;--c:#ff8ab5;--dl:.11s"></b>
          <b style="--x:96px;   --y:176px; --r:180deg;--c:#ffd166;--dl:.06s"></b>
          <b style="--x:206px;  --y:72px;  --r:-320deg;--c:#a78bfa;--dl:.01s"></b>
          <b style="--x:244px;  --y:-52px; --r:240deg;--c:#7cf6ff;--dl:.08s"></b>
          <b style="--x:150px;  --y:-158px;--r:-210deg;--c:#ff5c8a;--dl:.13s"></b>
          <b style="--x:22px;   --y:-212px;--r:280deg;--c:#ffd166;--dl:.03s"></b>
          <b style="--x:-96px;  --y:-182px;--r:-240deg;--c:#7cf6ff;--dl:.10s"></b>
          <b style="--x:186px;  --y:150px; --r:200deg;--c:#ff8ab5;--dl:.05s"></b>
          <b style="--x:-226px; --y:88px;  --r:-160deg;--c:#a78bfa;--dl:.12s"></b>
        </span>

        <span class="heart-wrap">
          <span class="heart"><span class="shine"></span></span>
        </span>

        <span class="btn-label">
          <span class="idle">Tap to like</span>
          <span class="liked">Liked!</span>
        </span>
      </label>

      <div class="flash"></div>
      <div class="boom">BOOM!</div>
    </div>

    <div class="status">
      <span class="idle-copy">Waiting for a little love&hellip; it&rsquo;s a checkbox, so it&rsquo;s fully keyboard accessible.</span>
      <span class="liked-copy">Boom. <strong>100% CSS</strong> — no scripts were harmed.</span>
    </div>
  </section>

  <section class="cards">
    <article class="card">
      <div class="num">01 — The trick</div>
      <h3>A checkbox does the thinking</h3>
      <p>A hidden <code>&lt;input type="checkbox"&gt;</code> plus a <code>&lt;label&gt;</code> gives us real,
         persistent state with zero script. The <code>:checked</code> selector drives every single frame.</p>
    </article>
    <article class="card">
      <div class="num">02 — The blast</div>
      <h3>Eighteen layers of keyframes</h3>
      <p>Shockwave rings, sixteen sparks, twelve confetti shards, a camera shake, a white flash,
         a flying <code>BOOM!</code> and a heart that overshoots, wobbles and settles.</p>
    </article>
    <article class="card">
      <div class="num">03 — The proof</div>
      <h3>Look ma, no JavaScript</h3>
      <p>Open view-source: there is no <code>&lt;script&gt;</code> tag in this document.
         Uncheck to reset, then hit it again — the animation fully replays every time.</p>
    </article>
  </section>

  <footer>
    <span>Checkbox hack</span>
    <span>&bull;</span>
    <span>Transform &amp; opacity only</span>
    <span>&bull;</span>
    <span>Responsive to 375px</span>
    <span>&bull;</span>
    <span>Zero dependencies</span>
  </footer>
</main>

</body>
</html>
Reasoning trace (6,923 tokens)
We need to produce a single HTML file, pure CSS like button with crazy click animation. No JS at all ideally. Need meaningful first paint, responsive. Use checkbox/label for state. Clicking triggers animations, staying liked. Also hover, focus.

Let's design a polished page: dark gradient background, big card, heart button with CSS animation burst — particles, rings, sparks, shockwave, confetti, hearts rising, screen flash, button scale wobble, gradient shift. Checkbox hack with hidden input + label. Label text "Like" / "Liked" via CSS sibling selectors.

Also need "click or press a key to start"? That's for games. Not needed. But keyboard: checkbox is focusable, space toggles — good.

Crazy animation: when checked, animate:
- shockwave rings expanding
- particle burst: 12 spans with CSS custom props --x --y, --r, --d
- confetti bits
- heart emoji-free (use CSS shapes / SVG inline? Inline SVG is fine as it's self-contained, but "pure CSS" refers to button interaction. Could use SVG for heart icon... but they said pure CSS. Better make heart with CSS ::before/::after shapes or a unicode ♥ character. Use CSS-drawn heart for authenticity.

Heart CSS: .heart::before/::after circles + rotated square. Simple: use a div with width/height, transform rotate(-45deg), background red, ::before/::after circles.

Particles: spans with borders/squares, animated on :checked with `animation` triggered. Need replay on re-click? CSS animation on checked state restarts when toggled off then on because the animation property is removed and re-added. Yes.

Also add a "burst" that fires on click regardless of state? Pure CSS can only react to :checked change; we can also use :active for press. Keep simple: checked = fire.

We need animations that keep going maybe infinite sparkle after liked — subtle floaters, glowing pulse. And "crazy" initial burst: explosion rings, lightning bolts, confetti rain, screen shake via wrapper animation, flash overlay, text "BOOM!" splash.

Let's write carefully with pure CSS, no JS. Make first paint show card with big button and some decorative stuff, plus a hint text "Tap it. Go on." Also show a "burst demo" always visible? Nothing hidden — the animation happens on click; but rule says everything interesting visible in first seconds. Maybe include an ambient animated background (floating hearts, gradient orbs) so screenshot is interesting. Also maybe show a "CSS ONLY" badge.

Consider auto-demo? Pure CSS, no JS. Could make animation auto-run once at load via animation on the burst elements with `animation-delay`, then click re-triggers? Hmm, the burst elements' animation on :checked only. We could give them an entrance animation on load (e.g., rings pulse). That's fine.

Layout: 1280x800 viewport. Header top with title "PURE CSS / LIKE BUTTON". Center stage: big circle button ~220px. Around it, ring of particles positioned absolutely. Below: stat row "0 → 1 like" maybe CSS counter? Could use checkboxes counting... too much. Use text "Liked!" appearing.

Also add a second smaller demo: "hover me" variants? Keep focus.

Let's write the HTML.

Structure:

```html
<div class="scene">
  <div class="bg"> orbs, grid </div>
  <header>...</header>
  <main>
    <div class="stage">
      <input type="checkbox" id="like" class="toggle">
      <label for="like" class="like-btn">
        <span class="heart"><span class="heart-core"></span></span>
        <span class="ring ring-1"></span> ... rings
        <span class="sparks"> 16 <i style="--a:..."> </span>
        <span class="confetti">...</span>
      </label>
      <div class="boom">BOOM!</div>
      <div class="status">...</div>
    </div>
  </main>
</div>
```

Wait — input must be sibling of label for `#like:checked ~ ...`. Put input as first child of .stage, label after, and decorative elements inside label so `:checked + label` and `:checked + label .x` work. Also status text after label: `#like:checked ~ .status`.

But `#like:checked + label` — input and label adjacent siblings. Good.

The whole button label is 240px circle. Inside: heart, ring layers, spark container, confetti container, glossy sheen.

Animations triggered on checked:
```
#like:checked + .like-btn .heart { animation: heart-pop .9s cubic-bezier(...) both, heart-float 3s 1s infinite ease-in-out; }
```
Two animations with different timing — fine.

Rings: `.ring` at scale 0 opacity0 default; on checked `animation: ring-blast 1s var(--d) ease-out both;`

Sparks: `i` positioned center, `--a` angle, `--d` distance; `transform: rotate(var(--a)) translateY(0)`. Use keyframes:
```
@keyframes spark-fly {
 0% { transform: rotate(var(--a)) translateY(-18px) scale(0); opacity:0 }
 20% { opacity:1 }
 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); opacity:0 }
}
```
Wait rotate then translateY moves along the rotated axis. Good. Each spark is a small bar/square/star.

Confetti: little squares flying out with rotation and falling, different colors.

Boom text: big text scaling in and fading.

Screen shake: `.stage:has(...)`? Better animate the `.stage` itself when checked: `#like:checked ~ ...` — but stage is ancestor. Instead put wrapper `.shake` around label + decorations and use `#like:checked ~ .shake { animation: shake .6s }` — input and .shake as siblings inside .stage. But label is inside .shake — fine, `#like:checked + .shake .heart`. Let's restructure: .stage > input, .shake > label + boom + status. Then `#like:checked ~ .shake`. Good.

Also flash overlay: `.flash` in shake, `#like:checked ~ .shake .flash { animation: flash .5s }`.

Ambient: floating hearts in background animating slowly always.

Color palette: deep navy/indigo background (#0b0d1e), gradient blobs magenta/red/orange. Heart gradient red-pink. Button dark glass with border.

Font: system fonts, no external. Use font-family with fallbacks; maybe use a display font stack: 'Trebuchet MS', 'Segoe UI', system-ui. Big bold uppercase with letter-spacing.

Text content: title "LIKE", subtitle "pure CSS · zero JavaScript", instructions "Click the heart. Or press Space." Maybe "no JS, no libraries, just :checked and keyframes".

Accessibility: input visually hidden but focusable; label focus ring via `#like:focus-visible + .shake .like-btn`? Hmm focus is on input, and label styles: `#like:focus-visible ~ .shake .like-btn { outline }`. Since .shake is sibling after input. Good.

Responsive: clamp font sizes, stage sizes with clamp.

Counters? Could show "LIKES" number that changes0 → 1 using two spans with opacity. Simple.

Also add "replay" hint: "Uncheck to reset — then hit it again."

Careful: label containing decorative absolutely positioned elements must not block clicks — label itself is the click target; children inside label are fine.

Let's make the button 260px desktop, 200px mobile.

Now details of CSS heart: 
```
.heart { width: 92px; height: 92px; position: relative; transform: rotate(-45deg); background: linear-gradient(...); border-radius: 0 0 0 12px; }
.heart::before, .heart::after { content:""; position:absolute; width:92px;height:92px;border-radius:50%; background: inherit; }
.heart::before { top:-46px; left:0 }
.heart::after { left:46px; top:0 }
```
Actually standard: square rotated -45deg with two circles at top and right. Let's do width 80 height 80, border-radius 12px 0? Standard trick: `border-radius: 50% 50% 0 50%` hmm. Simplest robust: use `clip-path` on a div? Or use the two-circles+square method:

```
.heart{position:relative;width:80px;height:80px;transform:rotate(-45deg);background:var(--c);margin:22px auto 0; border-bottom-left-radius: 20px;}
.heart::before{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:inherit;top:-40px;left:0;}
.heart::before top:0 left:40px;}
```
Wait the square rotated -45deg: its corners... The classic heart: square with border-radius on two corners, rotated 45deg, with circles on two sides. Let me use the widely known one:

```
.heart { width: 100px; height: 100px; transform: rotate(-45deg); position: relative; background: red; }
.heart::before { content:''; position:absolute; width:100px; height:100px; background:red; border-radius:50%; top:-50px; left:0; }
.heart::after { content:''; position:absolute; width:100px; height:100px; background:red; border-radius:50%; top:0; left:50px; }
```
Hmm this yields shape centered oddly. Actually the standard: square rotated -45deg (so it's a diamond), circle on top-left edge and top-right edge. Let's think: square corners after rotate(-45): top corner up, bottom corner down, left, right. Circles centered on top-left edge and top-right edge create the lobes. Place circle centered at (0,0) local top-left corner region... 

Known snippet (CSS heart):
```
.heart {
  position: relative;
  width: 100px; height: 90px;
}
.heart:before, .heart:after {
  position: absolute; content: ""; left: 50px; top: 0;
  width: 50px; height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
```
This is the classic reliable one. Use that. But then "heart-core" shine needs an extra element; use a child span with a highlight. Actually with ::before/::after used, shine must be on a nested element. Fine: `.heart > .shine` absolutely positioned, border-radius, mix-blend-mode overlay.

Alternatively use inline SVG for heart — allowed since self-contained, but "pure CSS" ask... SVG markup is fine but let's use CSS shapes for authenticity.

Gradient fill for heart: give before/after `background: linear-gradient(135deg,#ff4d6d,#ff1744 45%,#ff5c8a)`; they'd each get gradient separately which is acceptable/looks fine. Actually use `background: var(--heart-bg)` so both identical gradient; fine.

Heart shadow glow: filter: drop-shadow.

Now the animation set:

@keyframes heart-impact {
 0% { transform: scale(.6) rotate(-12deg); filter: brightness(3) }
 25% { transform: scale(1.35) rotate(8deg) }
 45% { transform: scale(.92) rotate(-4deg) }
 70% { transform: scale(1.12) rotate(2deg) }
 100% { transform: scale(1) rotate(0) }
}

But .heart already uses rotate(-45deg) internally on children; the .heart container can scale/rotate freely. Good — .heart has no rotation itself (children rotated).

Rings: three `.ring` divs with different delays, border3px solid rgba, scale 0→2.6, opacity 1→0.

Shockwave: a wide flat ellipse? Keep rings.

Lightning bolts: maybe skip, plenty.

Confetti: 14 pieces with `--x`,`--y`,`--c`,`--r`. Keyframes:
```
@keyframes confetti-pop {
 0%{ transform: translate(0,0) rotate(0) scale(0); opacity:0}
 15%{opacity:1}
 100%{ transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity:0}
}
```
Hmm confetti falling afterwards would be nicer but opacity0 at end is fine.

Sparkles (stars) rotate and fly.

Boom text: `.boom` with `animation: boom .9s .05s both`, text "BOOM!" plus maybe "LIKED!" Use two words stacked? One text: "BOOM!". Maybe "LIKE!" in giant outline text behind the button, scaling up and fading. Nice: `.mega-text` behind the button with "LIKE" huge, on check scales from .5 to 1.4 and fades. Good visual.

Status line: default "Click the heart", checked "LIKED! ✦ 1 like". No emoji maybe fine but keep symbols. Use ✦ characters — okay (not emoji).

Also add small footer badges: ":checked", "@keyframes", "0 lines of JS".

Let's also add decorative floating hearts background with animation infinite (always visible in screenshot).

Now careful about `animation-play-state` / replay: when unchecking, animations removed → elements return to default state. Re-checking re-adds → replays. Good.

One catch: `both` fill mode with delay means element visible at final state after animation — for rings opacity 0 at end, fine.

Let's write it.

Also the page should handle375px: stage padding, header stacking, sizes clamp.

Potential issue: label is inside .shake which is sibling of input. `#like:checked ~ .shake .heart {...}` works.

Hover: `.like-btn:hover .heart` slight scale; `.like-btn:active .heart` squash.

Let me write full code now.

HTML skeleton:

```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Like Button — Pure CSS</title>
<style>...</style>
</head>
<body>
<div class="scene">
  <div class="bg" aria-hidden="true">
    <span class="orb orb-a"></span>...
    <span class="float-heart f1"></span> ... etc
    <div class="grid"></div>
  </div>

  <header class="top">
    <div class="brand"><span class="dot"></span> PURE CSS LAB</div>
    <div class="chips"><span>:checked</span><span>@keyframes</span><span>0 KB JS</span></div>
  </header>

  <main>
    <section class="hero">
      <p class="eyebrow">INTERACTION № 01</p>
      <h1>The <em>Like</em> Button</h1>
      <p class="lede">One checkbox, a mountain of keyframes. Click the heart — or focus it and hit <kbd>Space</kbd>.</p>

      <div class="stage">
        <input class="toggle" type="checkbox" id="like" aria-label="Like this">
        <div class="shake">
          <label class="like-btn" for="like">
            <span class="mega">LIKE</span>
            <span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>
            <span class="halo"></span>
            <span class="sparks"> <i style="--a:0deg;--d:190px;--s:1"></i> ... </span>
            <span class="confetti"> <b style="--x:..."></b> ... </span>
            <span class="heart"><span class="shine"></span></span>
            <span class="btn-label"><span class="idle">TAP TO LIKE</span><span class="liked">LIKED!</span></span>
          </label>
          <div class="flash"></div>
          <div class="boom">BOOM!</div>
        </div>
        <div class="status">
          <span class="idle-copy">Waiting for a little love…</span>
          <span class="liked-copy">Boom. Liked with <strong>100% CSS</strong>.</span>
        </div>
      </div>
      ...
    </section>
  </main>
  <footer>...</footer>
</div>
</body>
</html>
```

Note: `.shake` wraps label; `.flash` and `.boom` absolutely positioned relative to .shake.

The label contains `.btn-label` text below the heart — but label is a circle 260px; text inside would need layout. Let's make .like-btn a flex column, circle 260px, heart ~86px, text below. That works.

Positioning of rings: absolute inset 0 within label (circle). Sparks absolute at 50%/50%.

Careful: `.mega` big text absolutely centered behind heart, pointer-events none.

Order for z-index: mega (z0), rings (z1), heart (z2), text (z3), sparks/confetti (z4).

But label is `position:relative; overflow:hidden`? No — sparks fly outside the circle, so overflow visible.

Since sparks fly outside and are children of label, they render outside — fine.

Confetti and sparks containers: `position:absolute; inset:0; pointer-events:none;` and children at center.

Let me define spark `i` styles: width 12px height 12px, background var(--c), border-radius 2px, position absolute left 50% top 50% margin -6px.

Keyframe spark-fly with rotate(var(--a)) translateY(calc(var(--d) * -1)) — rotate then translate along rotated up direction, so --a determines direction. Good.

Also add `scale(var(--s))`.

Confetti `b` pieces: width 10 height 16, background var(--c), rounded.

Boom text keyframes: scale(0.2) rotate(-8deg) opacity 0 → scale(1.15) opacity 1 → scale(1.35) opacity 0 with translateY.

Flash: radial-gradient white, opacity 0 → .85 → 0.

Shake keyframes: translate/rotate small, 0.65s.

Also animate background gradient hue? `.scene:has(#like:checked)`? CSS :has works in modern Chrome. But safer to keep `#like:checked ~ .shake` only. Could add `body:has(.toggle:checked) .bg .orb { animation-duration... }` — nice but optional. I'll use `:has()` for an extra flash on the background (modern Chrome supports). It's fine but avoid errors — :has is supported in latest Chrome. I'll use it lightly.

Actually let's keep everything with sibling selectors to be safe and simple, but one `:has` for the background glow is a nice touch. I'll include it; no errors.

Now count particles: 16 sparks with angles 0..337.5 step 22.5. Distances varied.

Let me write inline styles with custom props.

Sparks list (angle, dist, color, size):
0deg 200px #ffd166
22.5 165px #ff5c8a
45 210px #7cf6ff
67.5 150px #ffd166
90 195px #ff8ab5
112.5 160px #7cf6ff
135 215px #ffd166
157.5 155px #ff5c8a
180 205px #7cf6ff
202.5 170px #ffd166
225 210px #ff5c8a
247.5 155px #7cf6ff
270 200px #ffd166
292.5 165px #ff8ab5
315 215px #7cf6ff
337.5 150px #ffd166

Confetti 12 pieces with x/y translations.

Mobile: distances are px; at 375 width, 210px radius might overflow horizontally — overflow-x hidden on body avoids scrollbar. But "no horizontal scrollbar" — set `overflow-x: hidden` on html,body. Good. Also scale down stage via transform? Use `--blast: 1` and at small screens `--blast: .7` multiplying distances: `translateY(calc(var(--d) * var(--blast) * -1))`. Nice.

Let's write CSS with variables.

Body font sizing with clamp.

Also add a "how it works" strip at bottom: three columns explaining checkbox hack. That fills viewport nicely at 1280x800. Keep hero compact enough to fit 800px height: top bar ~60, hero title block ~150, stage 320, status60, footer cards ~120. Total ~710 + padding. OK.

Let's produce final code.

Details on `.heart` markup and CSS:

```css
.heart{position:relative;width:110px;height:100px;filter:drop-shadow(0 18px 28px rgba(255,45,90,.45));}
.heart::before,.heart::after{content:"";position:absolute;top:0;width:55px;height:88px;border-radius:55px 55px 0 0;background:var(--heart);transform-origin:0 100%;}
.heart::before{left:55px;transform:rotate(-45deg);}
.heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%;}
```
Hmm the classic: before left:55px rotate(-45deg) origin 0 100%; after left:0 rotate(45deg) origin 100% 100%. Let me verify shape: Each half is a rounded-top rectangle 55 wide, 88 tall. Rotating around its bottom-inner corner. This is the standard CSS heart and it works. The heart's bounding box roughly 100x90. Fine.

Shine: `.shine { position:absolute; width:26px;height:16px; border-radius:50%; background:rgba(255,255,255,.5); top:14px; left:26px; transform: rotate(-18deg); filter: blur(1px);}` approximate — put it in the upper-left lobe area. Since .heart children are rotated shapes, but .shine is a direct child of .heart, positioned in .heart's coordinate space (110x100 box). Upper-left lobe center approx (30, 22)? Let's just put top:16px;left:22px. Good enough.

Actually heart shape: with the two rounded rectangles rotated, the top of shape is around y=0-ish... The lobe centers roughly at x≈30,y≈25 and x≈80,y≈25. So shine at (22,18) works.

Font sizes: h1 clamp(2.4rem, 6vw, 4.6rem).

Now write everything out. Also `prefers-reduced-motion` handling: reduce animation but keep it? The task wants crazy animation; still add a reduced-motion block that shortens. Maybe skip to keep it simple... I'll add a small reduced-motion rule that disables ambient float only. Actually good practice; include.

Status text transitions: use opacity/transform with delays.

Toggle: `#like:checked ~ .shake .idle, #like:checked ~ .status .idle-copy { opacity:0 }` etc.

Wait `.status` is sibling of `.shake` and of `#like`. Good.

Focus ring: `#like:focus-visible ~ .shake .like-btn{outline:4px solid #7cf6ff; outline-offset:10px;}`.

Also since input is visually hidden but not display:none, keep `position:absolute;opacity:0;width:1px;height:1px;` — but then it's clickable? No, label handles clicks.

Edge: clicking the label toggles input. Keyboard Space on focused input toggles. Good.

Let me finalize the code text.

One more thought on "Everything that makes the demo interesting must be visible within the first seconds" — the burst only occurs on click. To satisfy, I'll add a subtle always-on "idle" animation: heart beating gently, rings pulsing, background orbs drifting, and a static sparkle preview? The main event is on click, that's inherent to the request. Also I could make the burst auto-play once on load via an entrance animation on the same elements with `animation: ... ` at load — but then when checked, the :checked animation would be overridden... Actually we can give elements two animations? Simplest: give the sparks an intro animation at load (they fly out once on page load at reduced intensity) using `animation: spark-fly .9s var(--d2) both` — but on :checked we override `animation` property entirely, which resets. That gives an auto demo burst at load! Nice: page loads, burst fires automatically once (~0.3s in), then it's idle, then click fires it again. That satisfies "interesting on first paint/screenshot at 3s". But careful: the intro animation with `both` fill leaves sparks at end state opacity 0 — fine.

But: the intro animation must use the same keyframes with fill both, ending opacity 0. Then `:checked` sets `animation: spark-fly ...` again — since the property value changes, it restarts. Good.

However the heart's intro should not make it look "liked". Keep heart intro as a gentle pop-in.

Mega text "LIKE" — on load, have it fade in subtly? Or do the boom text intro too. Let's do: on load, rings + sparks + confetti + boom + flash all play once (a "cold start burst"), and heart does a pop. That's a great first screenshot actually at 3s though the burst is over (0.9s). Hmm, at 3s screenshot shows idle state which is still pretty (big heart, rings subtle, background orbs, floating hearts). Fine.

Alternatively make the burst elements have infinite subtle idle motion too... no, too busy.

Better: since screenshot at 3s, ensure idle state looks great: heart glowing with a gentle pulse, a soft pulsing halo ring (infinite slow), floating hearts, orbs, gradient. Yes.

Implement idle halo: `.halo { animation: halo-breathe 3s ease-in-out infinite; }` and on checked it gets `halo-blast .8s`.

OK, writing final answer now.

CSS custom property usage in keyframes with `calc(var(--d) * var(--blast) * -1)` — calc with unitless --blast multiply px works.

Let me write the code.

```css
:root{
  --bg0:#0a0b1c; --bg1:#12132e;
  --ink:#f4f5ff; --muted:#a3a7c8;
  --hot:#ff2d64; --hot2:#ff6b9d; --gold:#ffd166; --cyan:#7cf6ff;
  --blast:1;
}
```

Background: `background: radial-gradient(1200px 700px at 50% -10%, #2a1148 0%, transparent 60%), linear-gradient(180deg,#0a0b1c,#10122b 55%,#0a0b1c)`.

Orbs: blurred circles with filter blur(60px).

Grid: repeating-linear-gradient lines with mask fade.

Alright. Write out now, complete and careful.

For `.shake` transform origin center.

Final check for label children pointer events: `pointer-events:none` on decorative, but the label itself needs clicks — children with pointer-events none let clicks pass to label. Good, and the `.btn-label` text should not block either — set pointer-events none on it too (clicks still land on label since child none → parent receives). Fine.

Writing the HTML now.

Footer cards content:
1. "01 — The trick" / "A hidden checkbox + a label. :checked does all the state work."
2. "02 — The blast" / "18 keyframe animations: rings, sparks, confetti, shake, flash."
3. "03 — The proof" / "No JavaScript anywhere in this file. View source."

Good. Now produce.

Ensure `overflow-x:hidden` on html and body.

Reduced motion: 
```
@media (prefers-reduced-motion: reduce){ .orb,.float-heart{animation:none} }
```
Keep the click burst (it's the point) but maybe shorten. Fine.

Code:

I'll write ~350 lines. Let's go.

One detail: `#like:checked ~ .shake .heart { animation: heart-impact .95s cubic-bezier(.2,1.4,.3,1) both, heart-hover 2.6s 1s ease-in-out infinite; }` — after first animation ends with `both`, second animation (heart-hover) starts at 1s and overrides transform. Both animations target transform; the later one in the list wins when active. With fill both on first, second takes over at 1s. There may be a jump; acceptable. Actually simpler: `animation: heart-impact .95s ... both` then also give the heart a wrapper `.heart-wrap` with infinite float. Let's add a wrapper: `.heart-wrap` (float infinite), `.heart` (impact on check). Cleaner. Do that.

Similarly `.heart-wrap` default has idle breathing animation; on checked, `.heart` gets impact.Final structure inside label:
```
<span class="mega">LIKE</span>
<span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>
<span class="halo"></span>
<span class="sparks">…</span>
<span class="confetti">…</span>
<span class="heart-wrap"><span class="heart"><span class="shine"></span></span></span>
<span class="btn-label">…</span>
```

Good. Write it.