Models 44

Gemini 3.8 Flash

by GoogleReasoningClean
Open in new window

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

How it went

Total time
54.9 s
Cost
$0.041
Output tokens
10,731
Spent thinking
971 tokens
Speed
202.9 tok/s
Console errors
0
First token after
2.0 s
First visible text after
9.7 s
Prompt tokens
362
Code size
23.0 KB
Finish reason
stop
Served by
Google
Model id
google/gemini-3.8-flash
Reasoning sent
{"effort":"medium"}
Max output
65,536 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 · 840 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Pure CSS Like Button</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 40%, #1a162b 0%, #0d0a17 60%, #05040a 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
    perspective: 1200px;
  }

  /* Ambient celebratory glow triggered by checked */
  .ambient-light {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 45, 117, 0.25) 0%, rgba(255, 120, 71, 0.1) 45%, transparent 70%);
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    filter: blur(40px);
    z-index: 0;
  }

  /* Presentation Wrapper */
  .stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .heading-block {
    text-align: center;
    pointer-events: none;
    user-select: none;
  }

  .badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff6b9d;
    margin-bottom: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }

  h1 {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 30%, #a5a1c9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
  }

  .hint {
    margin-top: 6px;
    font-size: 14px;
    color: #8c86aa;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .hint-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3366;
    box-shadow: 0 0 8px #ff3366;
    animation: beacon 1.6s infinite ease-in-out;
  }

  @keyframes beacon {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.3); }
  }

  /* Hidden Native Checkbox */
  #like-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  /* Master Like Button Label */
  .like-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 36px 16px 26px;
    background: linear-gradient(180deg, rgba(38, 33, 64, 0.9) 0%, rgba(22, 19, 41, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    cursor: pointer;
    user-select: none;
    box-shadow: 
      0 10px 30px -5px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.25s ease, 
                border-color 0.25s ease,
                background 0.3s ease;
  }

  .like-btn:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(255, 65, 120, 0.4);
    box-shadow: 
      0 15px 35px -5px rgba(255, 45, 117, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 1px 1px rgba(255, 255, 255, 0.3);
  }

  .like-btn:active {
    transform: translateY(1px) scale(0.97);
  }

  /* Heart Icon Container */
  .icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The Main Heart SVG */
  .heart-svg {
    width: 36px;
    height: 36px;
    fill: transparent;
    stroke: #8e88aa;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease, fill 0.3s ease, filter 0.3s ease;
    transform-origin: center center;
    position: relative;
    z-index: 5;
  }

  .like-btn:hover .heart-svg {
    stroke: #ff5287;
    filter: drop-shadow(0 0 6px rgba(255, 82, 135, 0.4));
  }

  /* Text & Animated Counter */
  .label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .state-word {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #e5e3f5;
    transition: color 0.3s ease;
    line-height: 1.1;
  }

  .counter-box {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #7b759a;
    height: 16px;
    overflow: hidden;
    margin-top: 2px;
  }

  .counter-reel {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .counter-reel span {
    line-height: 16px;
    height: 16px;
  }

  /* Shockwaves */
  .shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
  }

  .wave-1 {
    border: 3px solid #ff2b70;
  }

  .wave-2 {
    border: 2px solid #ffd043;
  }

  .wave-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,45,117,0.4) 50%, transparent 80%);
    pointer-events: none;
    z-index: 2;
  }

  /* Particle Sparks (Sunburst Lines) */
  .spark-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 4;
  }

  .ray {
    position: absolute;
    top: -12px;
    left: -2px;
    width: 4px;
    height: 24px;
    transform-origin: 2px 12px;
    opacity: 0;
  }

  .ray::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fff, #ff2f76);
  }

  .ray:nth-child(1) { transform: rotate(0deg) translateY(-26px); }
  .ray:nth-child(2) { transform: rotate(45deg) translateY(-26px); }
  .ray:nth-child(3) { transform: rotate(90deg) translateY(-26px); }
  .ray:nth-child(4) { transform: rotate(135deg) translateY(-26px); }
  .ray:nth-child(5) { transform: rotate(180deg) translateY(-26px); }
  .ray:nth-child(6) { transform: rotate(225deg) translateY(-26px); }
  .ray:nth-child(7) { transform: rotate(270deg) translateY(-26px); }
  .ray:nth-child(8) { transform: rotate(315deg) translateY(-26px); }

  /* Floating Hearts & Confetti Shards */
  .particle-cloud {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 6;
  }

  .p {
    position: absolute;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Flying mini-hearts */
  .p-heart {
    font-size: 14px;
  }

  /* Shimmer Stars & Dots */
  .p-star {
    font-size: 15px;
    color: #ffe668;
    filter: drop-shadow(0 0 6px #ffd13b);
  }

  .p-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .d1 { background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
  .d2 { background: #ff2a7a; box-shadow: 0 0 8px #ff2a7a; }
  .d3 { background: #ffd000; box-shadow: 0 0 8px #ffd000; }
  .d4 { background: #9d4edd; box-shadow: 0 0 8px #9d4edd; }
  .d5 { background: #00ff88; box-shadow: 0 0 8px #00ff88; }
  .d6 { background: #ff7700; box-shadow: 0 0 8px #ff7700; }

  /* Confetti Ribbons */
  .p-ribbon {
    width: 5px;
    height: 12px;
    border-radius: 2px;
  }
  .r1 { background: #ff3366; }
  .r2 { background: #00e5ff; }
  .r3 { background: #ffe600; }
  .r4 { background: #a855f7; }

  /* Floating +1 Pill Badge */
  .floating-plus {
    position: absolute;
    top: -6px;
    right: 28px;
    background: linear-gradient(135deg, #ff2f76, #ff8442);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 3px 9px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(0) scale(0.4);
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(255, 47, 118, 0.6);
    letter-spacing: 0.5px;
    z-index: 10;
  }

  /* ========================================================
     THE CRAZY ANIMATIONS (TRIGGERED VIA :checked)
     ======================================================== */

  /* Checked Ambient Light Flare */
  #like-checkbox:checked ~ .ambient-light {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.35);
  }

  /* Button Frame Bounce & Glow */
  #like-checkbox:checked + .stage .like-btn {
    border-color: rgba(255, 45, 117, 0.6);
    background: linear-gradient(180deg, rgba(50, 30, 65, 0.95) 0%, rgba(28, 17, 45, 0.98) 100%);
    box-shadow: 
      0 12px 40px -5px rgba(255, 45, 117, 0.45),
      0 0 30px rgba(255, 45, 117, 0.25),
      inset 0 1px 2px rgba(255, 255, 255, 0.4),
      inset 0 -2px 6px rgba(0, 0, 0, 0.5);
    animation: btnImpact 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes btnImpact {
    0% { transform: scale(1); }
    20% { transform: scale(0.9) translateY(4px); }
    45% { transform: scale(1.1) translateY(-6px); }
    65% { transform: scale(0.97) translateY(1px); }
    80% { transform: scale(1.02) translateY(-1px); }
    100% { transform: scale(1) translateY(0); }
  }

  /* Heart Pop, Morph & Elastic Overshoot */
  #like-checkbox:checked + .stage .heart-svg {
    stroke: url(#heartGradient);
    fill: url(#heartGradient);
    filter: drop-shadow(0 0 16px rgba(255, 47, 118, 0.85)) drop-shadow(0 0 30px rgba(255, 130, 45, 0.5));
    animation: crazyHeartPop 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
  }

  @keyframes crazyHeartPop {
    0% {
      transform: scale(1) rotate(0deg);
    }
    15% {
      transform: scale(0.55) rotate(-22deg);
    }
    30% {
      transform: scale(1.55) rotate(16deg);
    }
    45% {
      transform: scale(0.85) rotate(-10deg);
    }
    60% {
      transform: scale(1.22) rotate(6deg);
    }
    75% {
      transform: scale(0.95) rotate(-2deg);
    }
    90% {
      transform: scale(1.08) rotate(1deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }

  /* Shockwaves Expanding */
  #like-checkbox:checked + .stage .wave-1 {
    animation: blastWave1 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  }

  @keyframes blastWave1 {
    0% {
      transform: translate(-50%, -50%) scale(0.3);
      opacity: 1;
      border-width: 6px;
    }
    70% {
      opacity: 0.8;
    }
    100% {
      transform: translate(-50%, -50%) scale(2.8);
      opacity: 0;
      border-width: 0px;
    }
  }

  #like-checkbox:checked + .stage .wave-2 {
    animation: blastWave2 0.85s 0.08s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
  }

  @keyframes blastWave2 {
    0% {
      transform: translate(-50%, -50%) scale(0.4);
      opacity: 1;
      border-width: 4px;
    }
    100% {
      transform: translate(-50%, -50%) scale(3.4);
      opacity: 0;
      border-width: 0px;
    }
  }

  #like-checkbox:checked + .stage .wave-ring {
    animation: flashCenter 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
  }

  @keyframes flashCenter {
    0% {
      transform: translate(-50%, -50%) scale(0.2);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(6.5);
      opacity: 0;
    }
  }

  /* Spark Rays Bursting */
  #like-checkbox:checked + .stage .ray {
    animation: rayShoot 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
  }

  @keyframes rayShoot {
    0% {
      opacity: 1;
      height: 24px;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      height: 0px;
      transform: var(--dest-transform);
    }
  }

  .ray:nth-child(1) { --dest-transform: rotate(0deg) translateY(-54px); }
  .ray:nth-child(2) { --dest-transform: rotate(45deg) translateY(-54px); }
  .ray:nth-child(3) { --dest-transform: rotate(90deg) translateY(-54px); }
  .ray:nth-child(4) { --dest-transform: rotate(135deg) translateY(-54px); }
  .ray:nth-child(5) { --dest-transform: rotate(180deg) translateY(-54px); }
  .ray:nth-child(6) { --dest-transform: rotate(225deg) translateY(-54px); }
  .ray:nth-child(7) { --dest-transform: rotate(270deg) translateY(-54px); }
  .ray:nth-child(8) { --dest-transform: rotate(315deg) translateY(-54px); }

  /* Crazy Particle Cloud Eruption */
  #like-checkbox:checked + .stage .p {
    animation-timing-function: cubic-bezier(0.12, 0.8, 0.32, 1);
    animation-fill-mode: forwards;
  }

  /* Micro Hearts Radiating Outward */
  #like-checkbox:checked + .stage .h1 { animation: flyH1 0.95s 0.02s; }
  #like-checkbox:checked + .stage .h2 { animation: flyH2 0.9s 0.05s; }
  #like-checkbox:checked + .stage .h3 { animation: flyH3 1.05s 0.01s; }
  #like-checkbox:checked + .stage .h4 { animation: flyH4 0.88s 0.04s; }
  #like-checkbox:checked + .stage .h5 { animation: flyH5 1.1s 0.02s; }

  @keyframes flyH1 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(-75px, -90px) scale(1.4) rotate(-35deg); opacity: 0; }
  }
  @keyframes flyH2 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(80px, -85px) scale(1.3) rotate(40deg); opacity: 0; }
  }
  @keyframes flyH3 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(-95px, 20px) scale(1.1) rotate(-65deg); opacity: 0; }
  }
  @keyframes flyH4 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(90px, 30px) scale(1.2) rotate(50deg); opacity: 0; }
  }
  @keyframes flyH5 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(0px, -115px) scale(1.5) rotate(-15deg); opacity: 0; }
  }

  /* Stars */
  #like-checkbox:checked + .stage .s1 { animation: flyS1 0.8s 0.03s; }
  #like-checkbox:checked + .stage .s2 { animation: flyS2 0.85s 0.06s; }
  #like-checkbox:checked + .stage .s3 { animation: flyS3 0.75s 0.02s; }

  @keyframes flyS1 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50px, -110px) scale(1.3) rotate(220deg); opacity: 0; }
  }
  @keyframes flyS2 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    100% { transform: translate(65px, -100px) scale(1.4) rotate(-240deg); opacity: 0; }
  }
  @keyframes flyS3 {
    0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
    100% { transform: translate(-40px, 75px) scale(1.1) rotate(180deg); opacity: 0; }
  }

  /* Colored Sparkle Dots */
  #like-checkbox:checked + .stage .d1 { animation: flyD1 0.8s 0.01s; }
  #like-checkbox:checked + .stage .d2 { animation: flyD2 0.9s 0.04s; }
  #like-checkbox:checked + .stage .d3 { animation: flyD3 0.7s 0.02s; }
  #like-checkbox:checked + .stage .d4 { animation: flyD4 0.85s 0.05s; }
  #like-checkbox:checked + .stage .d5 { animation: flyD5 0.75s 0.03s; }
  #like-checkbox:checked + .stage .d6 { animation: flyD6 0.95s 0.06s; }

  @keyframes flyD1 {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(-80px, -45px) scale(1.5); opacity: 0; }
  }
  @keyframes flyD2 {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(85px, -40px) scale(1.6); opacity: 0; }
  }
  @keyframes flyD3 {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(-30px, -80px) scale(1.2); opacity: 0; }
  }
  @keyframes flyD4 {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(45px, 70px) scale(1.4); opacity: 0; }
  }
  @keyframes flyD5 {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(-70px, 60px) scale(1.3); opacity: 0; }
  }
  @keyframes flyD6 {
    0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
    100% { transform: translate(110px, -10px) scale(1.5); opacity: 0; }
  }

  /* Ribbons Spinning */
  #like-checkbox:checked + .stage .r1 { animation: flyR1 0.9s 0.02s; }
  #like-checkbox:checked + .stage .r2 { animation: flyR2 0.85s 0.04s; }
  #like-checkbox:checked + .stage .r3 { animation: flyR3 1s 0.01s; }
  #like-checkbox:checked + .stage .r4 { animation: flyR4 0.95s 0.05s; }

  @keyframes flyR1 {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
    100% { transform: translate(-105px, -70px) rotate(420deg) scale(1.2); opacity: 0; }
  }
  @keyframes flyR2 {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
    100% { transform: translate(115px, -65px) rotate(-380deg) scale(1.1); opacity: 0; }
  }
  @keyframes flyR3 {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
    100% { transform: translate(-60px, -125px) rotate(320deg) scale(1); opacity: 0; }
  }
  @keyframes flyR4 {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
    100% { transform: translate(70px, 95px) rotate(-450deg) scale(1.3); opacity: 0; }
  }

  /* Floating +1 Pop Launch */
  #like-checkbox:checked + .stage .floating-plus {
    animation: launchPlus 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes launchPlus {
    0% {
      opacity: 0;
      transform: translateY(5px) scale(0.4) rotate(-15deg);
    }
    35% {
      opacity: 1;
      transform: translateY(-24px) scale(1.2) rotate(6deg);
    }
    70% {
      opacity: 1;
      transform: translateY(-38px) scale(1.05) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translateY(-56px) scale(0.8);
    }
  }

  /* Counter Increment Reel Transition */
  #like-checkbox:checked + .stage .counter-reel {
    transform: translateY(-16px);
  }

  #like-checkbox:checked + .stage .state-word {
    color: #ff3377;
    text-shadow: 0 0 12px rgba(255, 51, 119, 0.6);
  }

  /* Change State Word Text via pseudo-element */
  .state-word::after {
    content: "Like";
    display: inline-block;
  }
  #like-checkbox:checked + .stage .state-word::after {
    content: "Liked!";
  }

  /* Floating Decorative Stars in the background */
  .bg-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .star-orbit {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.25;
    animation: twinkle 3s infinite alternate ease-in-out;
  }

  @keyframes twinkle {
    0% { opacity: 0.1; transform: scale(0.8); }
    100% { opacity: 0.7; transform: scale(1.8); filter: drop-shadow(0 0 4px #fff); }
  }

  /* Position decorative background stars */
  .so1 { top: 22%; left: 18%; animation-delay: 0.2s; }
  .so2 { top: 35%; right: 22%; animation-delay: 0.7s; }
  .so3 { top: 70%; left: 25%; animation-delay: 1.3s; }
  .so4 { top: 78%; right: 28%; animation-delay: 0.9s; }
  .so5 { top: 15%; right: 35%; animation-delay: 1.8s; }
  .so6 { top: 82%; left: 40%; animation-delay: 0.4s; }

  /* Reset prompt button */
  .reset-tip {
    font-size: 12px;
    color: #5d577a;
    letter-spacing: 0.5px;
    transition: color 0.3s;
    user-select: none;
  }
  #like-checkbox:checked + .stage .reset-tip {
    color: #9d96c2;
  }

</style>
</head>
<body>

  <!-- Background Ambience -->
  <div class="bg-decor">
    <div class="star-orbit so1"></div>
    <div class="star-orbit so2"></div>
    <div class="star-orbit so3"></div>
    <div class="star-orbit so4"></div>
    <div class="star-orbit so5"></div>
    <div class="star-orbit so6"></div>
  </div>

  <!-- Ambient Glow Behind Stage -->
  <div class="ambient-light"></div>

  <!-- Checkbox State Engine -->
  <input type="checkbox" id="like-checkbox" aria-label="Toggle Like State">

  <!-- Interactive Stage -->
  <div class="stage">
    
    <div class="heading-block">
      <div class="badge">100% Pure CSS • No JavaScript</div>
      <h1>Interactive Like Button</h1>
      <div class="hint">
        <span class="hint-pulse"></span>
        <span>Click the button to release the madness</span>
      </div>
    </div>

    <!-- The Like Button Component -->
    <label for="like-checkbox" class="like-btn" title="Click to Like!">
      
      <!-- Shockwaves & Rings -->
      <div class="shockwave wave-1"></div>
      <div class="shockwave wave-2"></div>
      <div class="wave-ring"></div>

      <!-- Sunburst Radial Rays -->
      <div class="spark-burst">
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
        <div class="ray"></div>
      </div>

      <!-- Explosive Particle Cloud (Hearts, Stars, Dots, Confetti) -->
      <div class="particle-cloud">
        <!-- Floating hearts -->
        <span class="p p-heart h1">💖</span>
        <span class="p p-heart h2">💗</span>
        <span class="p p-heart h3">💝</span>
        <span class="p p-heart h4">💕</span>
        <span class="p p-heart h5">🔥</span>

        <!-- Sparkling Stars -->
        <span class="p p-star s1">✨</span>
        <span class="p p-star s2">⚡</span>
        <span class="p p-star s3">⭐</span>

        <!-- Glowing Neon Dots -->
        <span class="p p-dot d1"></span>
        <span class="p p-dot d2"></span>
        <span class="p p-dot d3"></span>
        <span class="p p-dot d4"></span>
        <span class="p p-dot d5"></span>
        <span class="p p-dot d6"></span>

        <!-- Spinning Confetti Strips -->
        <span class="p p-ribbon r1"></span>
        <span class="p p-ribbon r2"></span>
        <span class="p p-ribbon r3"></span>
        <span class="p p-ribbon r4"></span>
      </div>

      <!-- Floating +1 Pill Badge -->
      <div class="floating-plus">+1</div>

      <!-- Heart Icon Container -->
      <div class="icon-wrap">
        <svg class="heart-svg" viewBox="0 0 24 24">
          <defs>
            <linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#ff1a68" />
              <stop offset="50%" stop-color="#ff3377" />
              <stop offset="100%" stop-color="#ff9900" />
            </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"/>
        </svg>
      </div>

      <!-- Button Text & Live Counter Reel -->
      <div class="label-text">
        <span class="state-word"></span>
        <div class="counter-box">
          <div class="counter-reel">
            <span>2,499</span>
            <span>2,500</span>
          </div>
        </div>
      </div>

    </label>

    <div class="reset-tip">Click again anytime to toggle back</div>

  </div>

</body>
</html>
Reasoning trace (971 tokens)
**Designing Crazy Animations**

I'm exploring ways to create a wild CSS animation for a "like" button without any JavaScript. The checkbox `:checked` pseudo-class seems the most promising approach to achieve the toggle functionality needed for the animation to trigger and persist.

**Achieving Complex States**

I'm digging into CSS `:checked` states for a robust, JavaScript-free interaction. My focus is on ensuring the "liked" state persists and beautifully orchestrates the subsequent cascade of particle bursts, shockwaves, and 3D transformations.

**Implementing Crazy Effects**

I'm detailing the animation's architecture, focusing on a checkbox hack and a structured label element to house the intricate CSS elements. This includes planning for SVG hearts, dynamic shockwaves, numerous particles, and glassmorphic styling for the button itself, aiming for a visually stunning, pure CSS experience.

**Orchestrating CSS Animations**

I'm refining the animation sequence, focusing on a satisfying squash-and-stretch for the initial click, followed by explosive concentric shockwaves and radiant light beams. I'll then add a stream of floating particles and a celebratory "+1" bubble.