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
3 min 56 s
Cost
$0.168
Output tokens
44,786
Spent thinking
26,282 tokens
Speed
191.9 tok/s
Console errors
0
First token after
2.2 s
First visible text after
2 min 25 s
Prompt tokens
362
Code size
48.8 KB
Finish reason
stop
Served by
Google
Model id
google/gemini-3.8-flash
Reasoning sent
{"effort":"high"}
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 · 1544 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 Explosive Like Button</title>
  <style>
    /* ==========================================================================
       RESET & ROOT VARIABLES
       ========================================================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    :root {
      /* Theme 1: Cyber Lotus (Default) */
      --primary-glow: #ff0055;
      --secondary-glow: #b026ff;
      --accent-color: #ff2a6d;
      --h-start: #ff007f;
      --h-mid: #ff0055;
      --h-end: #7928ca;
      --glow-shadow: rgba(255, 0, 85, 0.65);
      --border-glow: #ff007f;
      --card-bg: rgba(18, 20, 29, 0.75);
      --body-bg: #07090e;
    }

    /* Theme 2: Matrix Volt */
    body:has(#theme-volt:checked),
    #theme-volt:checked ~ .app-shell {
      --primary-glow: #00f0ff;
      --secondary-glow: #00ff88;
      --accent-color: #00f0ff;
      --h-start: #00f0ff;
      --h-mid: #00e5ff;
      --h-end: #0070f3;
      --glow-shadow: rgba(0, 240, 255, 0.65);
      --border-glow: #00f0ff;
    }

    /* Theme 3: Solar Gold */
    body:has(#theme-gold:checked),
    #theme-gold:checked ~ .app-shell {
      --primary-glow: #ffd700;
      --secondary-glow: #ff7700;
      --accent-color: #ffd700;
      --h-start: #fff176;
      --h-mid: #ffd700;
      --h-end: #ff4500;
      --glow-shadow: rgba(255, 215, 0, 0.7);
      --border-glow: #ffd700;
    }

    body {
      background-color: var(--body-bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-x: hidden;
      color: #f1f5f9;
      padding: 20px;
      perspective: 1000px;
    }

    /* ==========================================================================
       BACKGROUND COSMIC AMBIENCE
       ========================================================================== */
    .cosmic-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .ambient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.35;
      animation: orbFloat 14s ease-in-out infinite alternate;
    }

    .orb-1 {
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
      top: -100px;
      left: -100px;
    }

    .orb-2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, var(--secondary-glow) 0%, transparent 70%);
      bottom: -150px;
      right: -100px;
      animation-delay: -7s;
    }

    .cosmic-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
      -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    }

    @keyframes orbFloat {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(60px, 40px) scale(1.15); }
      100% { transform: translate(-40px, 80px) scale(0.95); }
    }

    /* Full-screen Flash on Blast */
    .flash-burst {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 99;
      background: radial-gradient(circle at center, var(--primary-glow) 0%, transparent 70%);
      opacity: 0;
      mix-blend-mode: screen;
    }

    /* ==========================================================================
       LAYOUT & THEME TOGGLES
       ========================================================================== */
    .app-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .theme-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.04);
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #94a3b8;
    }

    .theme-chip {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 999px;
      transition: all 0.25s ease;
      color: #cbd5e1;
      user-select: none;
    }

    .theme-chip:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.08);
    }

    /* Active theme chips styling via :has */
    body:has(#theme-rose:checked) label[for="theme-rose"],
    body:has(#theme-volt:checked) label[for="theme-volt"],
    body:has(#theme-gold:checked) label[for="theme-gold"] {
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

    /* ==========================================================================
       SHOWCASE CARD
       ========================================================================== */
    .main-card {
      position: relative;
      width: 100%;
      background: var(--card-bg);
      border-radius: 28px;
      padding: 24px 22px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(24px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transform-origin: center center;
    }

    /* Card Creator Header */
    .card-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .creator-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .avatar-ring {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      padding: 2px;
      background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    .creator-names {
      text-align: left;
    }

    .creator-title {
      font-size: 0.88rem;
      font-weight: 700;
      color: #f8fafc;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .verified-icon {
      color: #38bdf8;
      font-size: 0.75rem;
    }

    .creator-tag {
      font-size: 0.72rem;
      color: #64748b;
    }

    .badge-pill {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #cbd5e1;
    }

    /* Holographic Heart Feature Graphic */
    .holo-stage {
      position: relative;
      width: 100%;
      height: 170px;
      border-radius: 20px;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.4) 80%);
      border: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .holo-rings {
      position: absolute;
      width: 140px;
      height: 140px;
      border: 1px dashed rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      animation: holoSpin 20s linear infinite;
    }

    .holo-rings::after {
      content: "";
      position: absolute;
      inset: 15px;
      border: 1px dotted var(--primary-glow);
      border-radius: 50%;
      opacity: 0.5;
      animation: holoSpinRev 12s linear infinite;
    }

    .holo-crystal-heart {
      width: 72px;
      height: 72px;
      filter: drop-shadow(0 0 16px var(--primary-glow));
      animation: holoFloat 4s ease-in-out infinite alternate;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes holoSpin {
      100% { transform: rotate(360deg); }
    }
    @keyframes holoSpinRev {
      100% { transform: rotate(-360deg); }
    }
    @keyframes holoFloat {
      0% { transform: translateY(-4px) scale(1); }
      100% { transform: translateY(6px) scale(1.05); }
    }

    .card-copy {
      margin-bottom: 22px;
    }

    .card-headline {
      font-size: 1.22rem;
      font-weight: 800;
      letter-spacing: -0.3px;
      margin-bottom: 6px;
      background: linear-gradient(135deg, #ffffff 40%, #94a3b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .card-desc {
      font-size: 0.82rem;
      color: #94a3b8;
      line-height: 1.45;
      max-width: 340px;
      margin: 0 auto;
    }

    /* Interactive Callout Badge */
    .cta-beacon {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--accent-color);
      margin-bottom: 12px;
      animation: ctaBounce 1.8s ease-in-out infinite;
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-color);
      box-shadow: 0 0 10px var(--accent-color);
      animation: dotBlink 1s infinite alternate;
    }

    @keyframes ctaBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    @keyframes dotBlink {
      0% { opacity: 0.4; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1.2); }
    }

    /* ==========================================================================
       THE CRAZY LIKE BUTTON (PURE CSS CORE)
       ========================================================================== */
    .button-stage {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0 6px;
    }

    /* The Main Trigger Label */
    .main-like-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 0 28px 0 18px;
      height: 68px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow:
        0 12px 32px -4px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
      cursor: pointer;
      user-select: none;
      transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .main-like-btn:hover {
      transform: translateY(-2px) scale(1.02);
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow:
        0 18px 40px -6px rgba(0, 0, 0, 0.8),
        0 0 25px var(--glow-shadow),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    }

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

    /* Rotating Conic Border Aura */
    .btn-aura {
      position: absolute;
      inset: -2px;
      border-radius: 999px;
      background: conic-gradient(from 0deg, transparent 70%, var(--primary-glow) 90%, var(--secondary-glow) 100%);
      opacity: 0;
      z-index: -1;
      filter: blur(4px);
      transition: opacity 0.4s ease;
      animation: spinAura 3s linear infinite;
    }

    @keyframes spinAura {
      100% { transform: rotate(360deg); }
    }

    /* --------------------------------------------------------------------------
       HEART EPICENTER & PARTICLES
       -------------------------------------------------------------------------- */
    .heart-epicenter {
      position: relative;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* The Heart SVG */
    .heart-icon {
      position: relative;
      width: 42px;
      height: 42px;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: center center;
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    }

    .heart-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .heart-svg .heart-path {
      fill: #2a3447;
      stroke: #64748b;
      stroke-width: 2.2px;
      stroke-linejoin: round;
      transition: all 0.35s ease;
    }

    .heart-svg .gloss-path {
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .heart-svg .shine-star {
      opacity: 0;
      transform-origin: 28px 25px;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* Idle hover preview on heart */
    .main-like-btn:hover .heart-icon {
      animation: heartbeatPreview 1.2s ease-in-out infinite;
    }

    .main-like-btn:hover .heart-path {
      stroke: var(--accent-color);
      fill: rgba(255, 255, 255, 0.05);
    }

    @keyframes heartbeatPreview {
      0%, 100% { transform: scale(1); }
      15% { transform: scale(1.15); }
      30% { transform: scale(1); }
      45% { transform: scale(1.08); }
    }

    /* --------------------------------------------------------------------------
       ENERGY SHOCKWAVES
       -------------------------------------------------------------------------- */
    .shockwave-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.1);
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      z-index: 2;
    }

    .shock-1 {
      border: 5px solid var(--primary-glow);
      box-shadow: 0 0 20px var(--primary-glow);
    }

    .shock-2 {
      border: 4px solid var(--secondary-glow);
      box-shadow: 0 0 25px var(--secondary-glow);
    }

    .shock-3 {
      border: 3px solid #ffffff;
      box-shadow: 0 0 30px #ffffff;
    }

    /* --------------------------------------------------------------------------
       PLASMA ENERGY WINGS
       -------------------------------------------------------------------------- */
    .plasma-wings {
      position: absolute;
      inset: -20px;
      pointer-events: none;
      opacity: 0;
      z-index: 3;
      transform: scale(0.2);
    }

    .wing {
      position: absolute;
      width: 48px;
      height: 32px;
      border-radius: 50% 50% 15% 85%;
      background: radial-gradient(ellipse at center, var(--primary-glow) 0%, transparent 75%);
      filter: blur(5px);
    }

    .wing-left {
      right: 50%;
      top: 6px;
      transform-origin: right bottom;
      transform: rotate(-35deg);
    }

    .wing-right {
      left: 50%;
      top: 6px;
      transform-origin: left bottom;
      transform: rotate(35deg) scaleX(-1);
    }

    /* --------------------------------------------------------------------------
       AUDIO / SONIC BLAST BARS
       -------------------------------------------------------------------------- */
    .sound-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 3;
    }

    .sound-bar {
      position: absolute;
      left: -2px;
      bottom: 0;
      width: 4px;
      height: 24px;
      background: linear-gradient(to top, var(--primary-glow), #ffffff);
      border-radius: 99px;
      transform-origin: center bottom;
      opacity: 0;
    }

    /* --------------------------------------------------------------------------
       LASER SPIKES / SUPERNOVA
       -------------------------------------------------------------------------- */
    .laser-spikes {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 3;
    }

    .spike {
      position: absolute;
      left: 0;
      top: -2px;
      height: 4px;
      width: 0px;
      background: linear-gradient(90deg, #ffffff, var(--primary-glow), transparent);
      border-radius: 99px;
      transform-origin: left center;
      opacity: 0;
    }

    /* --------------------------------------------------------------------------
       PARTICLE SUPERNOVA (CONFETTI, STARS, HEARTS, SPARKS)
       -------------------------------------------------------------------------- */
    .particle-cloud {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 6;
    }

    .p-confetti, .p-star, .p-heart, .p-spark {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      pointer-events: none;
    }

    .p-confetti {
      width: var(--w, 10px);
      height: var(--h, 10px);
      background-color: var(--c, #ff0055);
      border-radius: 2px;
      box-shadow: 0 0 6px var(--c, #ff0055);
    }

    .p-star {
      width: var(--s, 16px);
      height: var(--s, 16px);
      background-color: var(--c, #ffd700);
      clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
      box-shadow: 0 0 10px var(--c, #ffd700);
    }

    .p-heart {
      font-size: var(--s, 16px);
      color: var(--c, #ff2a6d);
      text-shadow: 0 0 12px var(--c, #ff2a6d);
      line-height: 1;
      user-select: none;
    }

    .p-spark {
      width: var(--s, 6px);
      height: var(--s, 6px);
      background-color: #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 12px var(--c, var(--primary-glow)), 0 0 24px var(--c, var(--primary-glow));
    }

    /* --------------------------------------------------------------------------
       FLOATING REWARD / PRAISE BADGES
       -------------------------------------------------------------------------- */
    .praise-vault {
      position: absolute;
      left: 50%;
      top: -20px;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 20;
    }

    .praise-pill {
      position: absolute;
      left: 50%;
      top: 0;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.8px;
      white-space: nowrap;
      color: #ffffff;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid var(--primary-glow);
      box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.8),
        0 0 20px var(--glow-shadow);
      backdrop-filter: blur(12px);
      opacity: 0;
      pointer-events: none;
    }

    /* --------------------------------------------------------------------------
       BUTTON TEXT & NUMBER COUNTER
       -------------------------------------------------------------------------- */
    .btn-label-box {
      position: relative;
      height: 24px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .label-state {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.3px;
      line-height: 24px;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, color 0.3s ease;
    }

    .label-unliked {
      color: #f1f5f9;
      transform: translateY(0);
      opacity: 1;
    }

    .label-liked {
      color: var(--accent-color);
      transform: translateY(24px);
      opacity: 0;
      text-shadow: 0 0 14px var(--glow-shadow);
    }

    .btn-separator {
      width: 1px;
      height: 28px;
      background: rgba(255, 255, 255, 0.16);
      margin: 0 2px;
    }

    .btn-counter-box {
      position: relative;
      height: 24px;
      display: flex;
      align-items: center;
      overflow: visible;
    }

    .counter-slider {
      display: flex;
      flex-direction: column;
      height: 48px;
      transform: translateY(0);
      transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .count-num {
      height: 24px;
      line-height: 24px;
      font-size: 1.15rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.5px;
    }

    .num-prev {
      color: #94a3b8;
    }

    .num-next {
      color: #ffffff;
      text-shadow: 0 0 12px var(--primary-glow);
    }

    .plus-one-tag {
      position: absolute;
      right: -28px;
      top: -6px;
      font-size: 0.72rem;
      font-weight: 900;
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
      padding: 2px 6px;
      border-radius: 999px;
      box-shadow: 0 0 10px var(--primary-glow);
      opacity: 0;
      pointer-events: none;
    }

    /* Footer State Hints */
    .state-hint-box {
      margin-top: 14px;
      height: 20px;
      position: relative;
    }

    .state-hint {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.4px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .hint-ready {
      color: #64748b;
      opacity: 1;
    }

    .hint-active {
      color: var(--accent-color);
      opacity: 0;
      transform: translateX(-50%) translateY(6px);
      text-shadow: 0 0 10px var(--glow-shadow);
    }

    /* ==========================================================================
       THE CRAZY FIREWORKS TRIGGER :CHECKED STATE (PURE CSS MAGIC!)
       ========================================================================== */

    /* 1. Screen Shake & Flash Burst */
    #master-like:checked ~ .app-shell .main-card {
      animation: cardBlastShake 0.65s cubic-bezier(.36, .07, .19, .97) both;
    }

    #master-like:checked ~ .app-shell .flash-burst {
      animation: screenFlash 0.7s ease-out forwards;
    }

    #master-like:checked ~ .app-shell .holo-crystal-heart {
      filter: drop-shadow(0 0 35px var(--primary-glow)) brightness(1.4);
      transform: scale(1.15) rotate(10deg);
    }

    /* 2. Button Glowing Border & Aura */
    #master-like:checked ~ .app-shell .main-like-btn {
      border-color: rgba(255, 255, 255, 0.4);
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 0, 85, 0.15) 100%);
      box-shadow:
        0 16px 45px -5px rgba(0, 0, 0, 0.8),
        0 0 35px var(--glow-shadow),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    #master-like:checked ~ .app-shell .btn-aura {
      opacity: 0.8;
    }

    /* 3. The Core Heart Explosive Morph & Dance */
    #master-like:checked ~ .app-shell .heart-icon {
      animation: crazyHeartBlast 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    #master-like:checked ~ .app-shell .heart-path {
      fill: url(#heartGradActive);
      stroke: rgba(255, 255, 255, 0.85);
      stroke-width: 1.6px;
    }

    #master-like:checked ~ .app-shell .gloss-path {
      opacity: 0.9;
    }

    #master-like:checked ~ .app-shell .shine-star {
      opacity: 1;
      transform: scale(1.2) rotate(45deg);
      transition-delay: 0.25s;
    }

    /* 4. Shockwaves Explosion */
    #master-like:checked ~ .app-shell .shock-1 {
      animation: shockwaveBoom 0.75s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
    }
    #master-like:checked ~ .app-shell .shock-2 {
      animation: shockwaveBoom 0.85s cubic-bezier(0.1, 0.7, 0.1, 1) 0.08s forwards;
    }
    #master-like:checked ~ .app-shell .shock-3 {
      animation: shockwaveBoom 0.95s cubic-bezier(0.1, 0.7, 0.1, 1) 0.16s forwards;
    }

    /* 5. Plasma Wings Flare */
    #master-like:checked ~ .app-shell .plasma-wings {
      animation: wingsUnfurl 1.4s ease-out forwards;
    }

    /* 6. Sound Waves & Laser Spikes */
    #master-like:checked ~ .app-shell .sound-bar {
      animation: audioSpurt 0.65s ease-out forwards;
    }
    #master-like:checked ~ .app-shell .spike {
      animation: laserPierce 0.55s ease-out forwards;
    }

    /* 7. Supernova Particles Burst */
    #master-like:checked ~ .app-shell .p-confetti {
      animation: confettiExplode 1s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
      animation-delay: var(--delay, 0s);
    }

    #master-like:checked ~ .app-shell .p-star {
      animation: starTwinkleBlast 0.85s cubic-bezier(0.15, 0.9, 0.3, 1) forwards;
      animation-delay: var(--delay, 0s);
    }

    #master-like:checked ~ .app-shell .p-heart {
      animation: balloonHeartAscent 1.4s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
      animation-delay: var(--delay, 0s);
    }

    #master-like:checked ~ .app-shell .p-spark {
      animation: sparkScatter 0.7s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
      animation-delay: var(--delay, 0s);
    }

    /* 8. Floating Praise Rewards */
    #master-like:checked ~ .app-shell .pill-1 {
      animation: praiseDriftLeft 1.2s cubic-bezier(0.15, 0.9, 0.3, 1) 0.05s forwards;
    }
    #master-like:checked ~ .app-shell .pill-2 {
      animation: praiseDriftCenter 1.25s cubic-bezier(0.15, 0.9, 0.3, 1) 0.12s forwards;
    }
    #master-like:checked ~ .app-shell .pill-3 {
      animation: praiseDriftRight 1.2s cubic-bezier(0.15, 0.9, 0.3, 1) 0.2s forwards;
    }

    /* 9. Text & Number Counter Transition */
    #master-like:checked ~ .app-shell .label-unliked {
      transform: translateY(-24px);
      opacity: 0;
    }
    #master-like:checked ~ .app-shell .label-liked {
      transform: translateY(0);
      opacity: 1;
    }
    #master-like:checked ~ .app-shell .counter-slider {
      transform: translateY(-24px);
    }
    #master-like:checked ~ .app-shell .plus-one-tag {
      animation: tagPopFloat 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* 10. Status Hints Swap */
    #master-like:checked ~ .app-shell .hint-ready {
      opacity: 0;
      transform: translateX(-50%) translateY(-6px);
    }
    #master-like:checked ~ .app-shell .hint-active {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ==========================================================================
       KEYFRAME ANIMATIONS (OVERWHELMING CRAZY SPECTACLE)
       ========================================================================== */

    /* Camera Blast Shake */
    @keyframes cardBlastShake {
      0% { transform: translate3d(0, 0, 0) rotate(0deg); }
      12% { transform: translate3d(-10px, -6px, 0) rotate(-2deg) scale(0.98); }
      24% { transform: translate3d(10px, 8px, 0) rotate(2.5deg) scale(1.02); }
      36% { transform: translate3d(-9px, 5px, 0) rotate(-1.5deg) scale(1.01); }
      48% { transform: translate3d(8px, -5px, 0) rotate(1.5deg) scale(0.99); }
      60% { transform: translate3d(-5px, 3px, 0) rotate(-0.8deg) scale(1.005); }
      75% { transform: translate3d(4px, -2px, 0) rotate(0.5deg); }
      90% { transform: translate3d(-2px, 1px, 0) rotate(-0.2deg); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    /* Screen Light Flash */
    @keyframes screenFlash {
      0% { opacity: 0.85; transform: scale(0.7); }
      40% { opacity: 0.45; transform: scale(1.3); }
      100% { opacity: 0; transform: scale(2); }
    }

    /* The Heart Supernova Explosion */
    @keyframes crazyHeartBlast {
      0% {
        transform: scale(1) rotate(0deg);
      }
      12% {
        transform: scale(0.48) rotate(-28deg);
        filter: drop-shadow(0 0 8px var(--primary-glow));
      }
      28% {
        transform: scale(1.9) rotate(22deg);
        filter: drop-shadow(0 0 35px var(--primary-glow)) drop-shadow(0 0 70px var(--secondary-glow));
      }
      42% {
        transform: scale(0.82) rotate(-12deg);
      }
      56% {
        transform: scale(1.42) rotate(8deg);
        filter: drop-shadow(0 0 25px var(--primary-glow));
      }
      70% {
        transform: scale(0.94) rotate(-3deg);
      }
      84% {
        transform: scale(1.12) rotate(1deg);
      }
      100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 18px var(--primary-glow));
      }
    }

    /* Shockwave Blast */
    @keyframes shockwaveBoom {
      0% {
        width: 30px;
        height: 30px;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
        border-width: 8px;
      }
      50% {
        opacity: 0.85;
        border-width: 4px;
      }
      100% {
        width: 400px;
        height: 400px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
        border-width: 1px;
      }
    }

    /* Wings Flare */
    @keyframes wingsUnfurl {
      0% { opacity: 0; transform: scale(0.2); }
      20% { opacity: 1; transform: scale(1.8); }
      50% { opacity: 0.85; transform: scale(1.4); }
      75% { opacity: 0.95; transform: scale(1.6); }
      100% { opacity: 0.65; transform: scale(1.3); }
    }

    /* Audio Equalizer Blast */
    @keyframes audioSpurt {
      0% {
        opacity: 0;
        transform: rotate(var(--rot)) translateY(-28px) scaleY(0.2);
      }
      30% {
        opacity: 1;
        transform: rotate(var(--rot)) translateY(-55px) scaleY(2.4);
        filter: drop-shadow(0 0 8px var(--primary-glow));
      }
      100% {
        opacity: 0;
        transform: rotate(var(--rot)) translateY(-95px) scaleY(0.1);
      }
    }

    /* Laser Spike Piercing */
    @keyframes laserPierce {
      0% {
        width: 0px;
        opacity: 1;
        transform: rotate(var(--deg)) translateX(10px);
      }
      40% {
        width: 65px;
        opacity: 1;
        transform: rotate(var(--deg)) translateX(30px);
      }
      100% {
        width: 0px;
        opacity: 0;
        transform: rotate(var(--deg)) translateX(120px);
      }
    }

    /* Confetti 3D Shrapnel */
    @keyframes confettiExplode {
      0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0);
        opacity: 1;
      }
      25% {
        opacity: 1;
        transform: translate(-50%, -50%) translate3d(calc(var(--tx) * 0.45), calc(var(--ty) * 0.45), 0) rotateX(240deg) rotateY(180deg) rotateZ(var(--r, 90deg)) scale(1.6);
      }
      65% {
        opacity: 1;
        transform: translate(-50%, -50%) translate3d(var(--tx), var(--ty), 0) rotateX(480deg) rotateY(360deg) rotateZ(calc(var(--r, 90deg) * 2)) scale(1.1);
      }
      85% {
        opacity: 0.85;
      }
      100% {
        transform: translate(-50%, -50%) translate3d(calc(var(--tx) * 1.22), calc(var(--ty) * 1.22 + 40px), 0) rotateX(720deg) rotateY(540deg) rotateZ(calc(var(--r, 90deg) * 3)) scale(0);
        opacity: 0;
      }
    }

    /* Star Twinkle Supernova */
    @keyframes starTwinkleBlast {
      0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
        filter: brightness(2.8);
      }
      35% {
        opacity: 1;
        filter: brightness(2) drop-shadow(0 0 10px #ffffff);
        transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.65), calc(var(--ty) * 0.65)) scale(1.8) rotate(180deg);
      }
      100% {
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0) rotate(360deg);
        opacity: 0;
        filter: brightness(1);
      }
    }

    /* Floating Helium Hearts */
    @keyframes balloonHeartAscent {
      0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
      }
      20% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.35), calc(var(--ty) * 0.35)) scale(1.4) rotate(-12deg);
        filter: drop-shadow(0 0 12px var(--c));
      }
      60% {
        opacity: 0.95;
        transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) - 55px)) scale(1.1) rotate(16deg);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(calc(var(--tx) + var(--drift, 30px)), calc(var(--ty) - 145px)) scale(0.3) rotate(-25deg);
      }
    }

    /* Plasma Sparks Scattering */
    @keyframes sparkScatter {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
      50% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.75), calc(var(--ty) * 0.75)) scale(1.6);
      }
      100% {
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
      }
    }

    /* Floating Praise Arc Trajectories */
    @keyframes praiseDriftLeft {
      0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.2) rotate(-22deg);
      }
      25% {
        opacity: 1;
        transform: translate(-150px, -65px) scale(1.25) rotate(-14deg);
      }
      70% {
        opacity: 1;
        transform: translate(-165px, -100px) scale(1.1) rotate(-8deg);
      }
      100% {
        opacity: 0;
        transform: translate(-180px, -135px) scale(0.65) rotate(0deg);
      }
    }

    @keyframes praiseDriftCenter {
      0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.2) rotate(0deg);
      }
      25% {
        opacity: 1;
        transform: translate(-50%, -85px) scale(1.35) rotate(2deg);
      }
      70% {
        opacity: 1;
        transform: translate(-50%, -120px) scale(1.15) rotate(0deg);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -155px) scale(0.65) rotate(-4deg);
      }
    }

    @keyframes praiseDriftRight {
      0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.2) rotate(22deg);
      }
      25% {
        opacity: 1;
        transform: translate(45px, -65px) scale(1.25) rotate(14deg);
      }
      70% {
        opacity: 1;
        transform: translate(60px, -100px) scale(1.1) rotate(8deg);
      }
      100% {
        opacity: 0;
        transform: translate(75px, -135px) scale(0.65) rotate(0deg);
      }
    }

    /* Number +1 Badge Leap */
    @keyframes tagPopFloat {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0.4);
      }
      30% {
        opacity: 1;
        transform: translateY(-22px) scale(1.35);
      }
      70% {
        opacity: 1;
        transform: translateY(-32px) scale(1.1);
      }
      100% {
        opacity: 0;
        transform: translateY(-44px) scale(0.6);
      }
    }

    /* ==========================================================================
       RESPONSIVENESS & ADJUSTMENTS
       ========================================================================== */
    @media (max-width: 480px) {
      .app-shell {
        max-width: 100%;
      }
      .main-card {
        padding: 20px 16px;
      }
      .holo-stage {
        height: 140px;
      }
      .holo-crystal-heart {
        width: 58px;
        height: 58px;
      }
      .main-like-btn {
        padding: 0 20px 0 14px;
        height: 62px;
        gap: 12px;
      }
      .heart-epicenter {
        width: 38px;
        height: 38px;
      }
      .heart-icon {
        width: 36px;
        height: 36px;
      }
      .label-state, .count-num {
        font-size: 1.05rem;
      }
    }
  </style>
</head>
<body>

  <!-- ==========================================================================
       PURE CSS INTERACTIVE CONTROLS (RADIO & CHECKBOX STATE MACHINES)
       ========================================================================== -->
  <input type="radio" name="color-theme" id="theme-rose" checked hidden />
  <input type="radio" name="color-theme" id="theme-volt" hidden />
  <input type="radio" name="color-theme" id="theme-gold" hidden />

  <!-- The Master Like State Trigger (Zero JavaScript) -->
  <input type="checkbox" id="master-like" hidden />

  <!-- ==========================================================================
       MAIN APP SHELL
       ========================================================================== -->
  <div class="app-shell">

    <!-- Cosmic Background Elements -->
    <div class="cosmic-bg">
      <div class="cosmic-grid"></div>
      <div class="ambient-orb orb-1"></div>
      <div class="ambient-orb orb-2"></div>
    </div>

    <!-- Screen Flash Blast -->
    <div class="flash-burst"></div>

    <!-- Theme Palette Switcher -->
    <nav class="theme-bar">
      <span>Color Core:</span>
      <label for="theme-rose" class="theme-chip">🌸 Lotus</label>
      <label for="theme-volt" class="theme-chip">⚡ Matrix</label>
      <label for="theme-gold" class="theme-chip">👑 Solar</label>
    </nav>

    <!-- The Showcase Card -->
    <main class="main-card">

      <!-- Card Header -->
      <header class="card-header">
        <div class="creator-info">
          <div class="avatar-ring">
            <div class="avatar-inner">💎</div>
          </div>
          <div class="creator-names">
            <h2 class="creator-title">Aetheria FX <span class="verified-icon">●</span></h2>
            <p class="creator-tag">@pure_css_magic</p>
          </div>
        </div>
        <span class="badge-pill">NO JAVASCRIPT</span>
      </header>

      <!-- Centerpiece Holographic Prism Art -->
      <div class="holo-stage">
        <div class="holo-rings"></div>
        <svg class="holo-crystal-heart" viewBox="0 0 100 100" fill="none">
          <defs>
            <linearGradient id="crystalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="var(--h-start)" />
              <stop offset="50%" stop-color="var(--h-mid)" />
              <stop offset="100%" stop-color="var(--h-end)" />
            </linearGradient>
          </defs>
          <path d="M50 88.5 C20 70 5 52 5 31 C5 14 18 3 33 3 C42 3 47 8 50 13 C53 8 58 3 67 3 C82 3 95 14 95 31 C95 52 80 70 50 88.5 Z" fill="url(#crystalGrad)" opacity="0.9" />
          <path d="M50 13 L50 88.5 M50 13 L20 40 L50 88.5 M50 13 L80 40 L50 88.5 M5 31 L95 31 M20 40 L80 40" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" opacity="0.65" />
          <circle cx="50" cy="40" r="14" fill="#ffffff" opacity="0.25" filter="blur(4px)" />
        </svg>
      </div>

      <!-- Card Copy -->
      <div class="card-copy">
        <h1 class="card-headline">Hypercharged Like Cannon</h1>
        <p class="card-desc">Click the button below to detonate a 100% pure CSS shrapnel supernova. Toggle on and off for unlimited bursts!</p>
      </div>

      <!-- Action Prompt Beacon -->
      <div class="cta-beacon">
        <span class="pulse-dot"></span>
        <span>Tap to Ignite Fireworks</span>
        <span>👇</span>
      </div>

      <!-- ======================================================================
           THE CRAZY LIKE BUTTON
           ====================================================================== -->
      <div class="button-stage">

        <label for="master-like" class="main-like-btn" title="Click to trigger crazy explosion!">
          <!-- Animated Aura Ring -->
          <div class="btn-aura"></div>

          <!-- The Heart Epicenter with All Blast Components -->
          <div class="heart-epicenter">

            <!-- Triple Shockwaves -->
            <div class="shockwave-ring shock-1"></div>
            <div class="shockwave-ring shock-2"></div>
            <div class="shockwave-ring shock-3"></div>

            <!-- Ethereal Plasma Energy Wings -->
            <div class="plasma-wings">
              <div class="wing wing-left"></div>
              <div class="wing wing-right"></div>
            </div>

            <!-- 12 Sonic Audio Equalizer Bars -->
            <div class="sound-ring">
              <span class="sound-bar" style="--rot: 0deg;"></span>
              <span class="sound-bar" style="--rot: 30deg;"></span>
              <span class="sound-bar" style="--rot: 60deg;"></span>
              <span class="sound-bar" style="--rot: 90deg;"></span>
              <span class="sound-bar" style="--rot: 120deg;"></span>
              <span class="sound-bar" style="--rot: 150deg;"></span>
              <span class="sound-bar" style="--rot: 180deg;"></span>
              <span class="sound-bar" style="--rot: 210deg;"></span>
              <span class="sound-bar" style="--rot: 240deg;"></span>
              <span class="sound-bar" style="--rot: 270deg;"></span>
              <span class="sound-bar" style="--rot: 300deg;"></span>
              <span class="sound-bar" style="--rot: 330deg;"></span>
            </div>

            <!-- 8 Supernova Laser Spikes -->
            <div class="laser-spikes">
              <span class="spike" style="--deg: 0deg;"></span>
              <span class="spike" style="--deg: 45deg;"></span>
              <span class="spike" style="--deg: 90deg;"></span>
              <span class="spike" style="--deg: 135deg;"></span>
              <span class="spike" style="--deg: 180deg;"></span>
              <span class="spike" style="--deg: 225deg;"></span>
              <span class="spike" style="--deg: 270deg;"></span>
              <span class="spike" style="--deg: 315deg;"></span>
            </div>

            <!-- 42 Particles Supernova (Confetti, Stars, Hearts, Sparks) -->
            <div class="particle-cloud">
              <!-- 16 Confetti Rectangles -->
              <span class="p-confetti" style="--tx: 0px; --ty: -185px; --r: 210deg; --c: #ff0055; --w: 8px; --h: 15px; --delay: 0.00s;"></span>
              <span class="p-confetti" style="--tx: 50px; --ty: -170px; --r: -140deg; --c: #00f0ff; --w: 11px; --h: 8px; --delay: 0.02s;"></span>
              <span class="p-confetti" style="--tx: 105px; --ty: -145px; --r: 180deg; --c: #ffd700; --w: 7px; --h: 16px; --delay: 0.04s;"></span>
              <span class="p-confetti" style="--tx: 150px; --ty: -105px; --r: -220deg; --c: #ff00ea; --w: 9px; --h: 11px; --delay: 0.01s;"></span>
              <span class="p-confetti" style="--tx: 185px; --ty: -45px; --r: 160deg; --c: #00ff88; --w: 13px; --h: 7px; --delay: 0.03s;"></span>
              <span class="p-confetti" style="--tx: 195px; --ty: 15px; --r: -110deg; --c: #ff7700; --w: 8px; --h: 13px; --delay: 0.05s;"></span>
              <span class="p-confetti" style="--tx: 175px; --ty: 80px; --r: 250deg; --c: #a855f7; --w: 11px; --h: 8px; --delay: 0.02s;"></span>
              <span class="p-confetti" style="--tx: 135px; --ty: 140px; --r: -170deg; --c: #00f0ff; --w: 7px; --h: 14px; --delay: 0.04s;"></span>
              <span class="p-confetti" style="--tx: 75px; --ty: 180px; --r: 190deg; --c: #ff0055; --w: 10px; --h: 10px; --delay: 0.01s;"></span>
              <span class="p-confetti" style="--tx: 0px; --ty: 195px; --r: -280deg; --c: #ffd700; --w: 8px; --h: 16px; --delay: 0.03s;"></span>
              <span class="p-confetti" style="--tx: -75px; --ty: 180px; --r: 130deg; --c: #00ff88; --w: 12px; --h: 8px; --delay: 0.05s;"></span>
              <span class="p-confetti" style="--tx: -135px; --ty: 140px; --r: -160deg; --c: #ff00ea; --w: 7px; --h: 14px; --delay: 0.02s;"></span>
              <span class="p-confetti" style="--tx: -175px; --ty: 80px; --r: 220deg; --c: #00f0ff; --w: 10px; --h: 10px; --delay: 0.04s;"></span>
              <span class="p-confetti" style="--tx: -195px; --ty: 15px; --r: -130deg; --c: #ff7700; --w: 13px; --h: 7px; --delay: 0.01s;"></span>
              <span class="p-confetti" style="--tx: -165px; --ty: -75px; --r: 175deg; --c: #ff0055; --w: 8px; --h: 15px; --delay: 0.03s;"></span>
              <span class="p-confetti" style="--tx: -110px; --ty: -145px; --r: -200deg; --c: #a855f7; --w: 11px; --h: 9px; --delay: 0.05s;"></span>

              <!-- 10 Twinkling Sparkle Stars -->
              <span class="p-star" style="--tx: 25px; --ty: -145px; --c: #ffd700; --s: 18px; --delay: 0.01s;"></span>
              <span class="p-star" style="--tx: 115px; --ty: -85px; --c: #ffffff; --s: 14px; --delay: 0.04s;"></span>
              <span class="p-star" style="--tx: 155px; --ty: -12px; --c: #ffaa00; --s: 22px; --delay: 0.02s;"></span>
              <span class="p-star" style="--tx: 125px; --ty: 85px; --c: #00f0ff; --s: 16px; --delay: 0.05s;"></span>
              <span class="p-star" style="--tx: 40px; --ty: 145px; --c: #ffffff; --s: 20px; --delay: 0.03s;"></span>
              <span class="p-star" style="--tx: -40px; --ty: 145px; --c: #ff00aa; --s: 15px; --delay: 0.01s;"></span>
              <span class="p-star" style="--tx: -125px; --ty: 85px; --c: #ffd700; --s: 19px; --delay: 0.04s;"></span>
              <span class="p-star" style="--tx: -155px; --ty: -12px; --c: #ffffff; --s: 14px; --delay: 0.02s;"></span>
              <span class="p-star" style="--tx: -115px; --ty: -85px; --c: #00ffcc; --s: 22px; --delay: 0.05s;"></span>
              <span class="p-star" style="--tx: -25px; --ty: -145px; --c: #ff3366; --s: 17px; --delay: 0.03s;"></span>

              <!-- 8 Floating Mini Helium Hearts -->
              <span class="p-heart" style="--tx: -28px; --ty: -95px; --drift: -35px; --c: #ff2a6d; --s: 16px; --delay: 0.02s;">♥</span>
              <span class="p-heart" style="--tx: 28px; --ty: -115px; --drift: 40px; --c: #ff77aa; --s: 14px; --delay: 0.05s;">♥</span>
              <span class="p-heart" style="--tx: -65px; --ty: -130px; --drift: -50px; --c: #ff007f; --s: 18px; --delay: 0.09s;">♥</span>
              <span class="p-heart" style="--tx: 60px; --ty: -140px; --drift: 45px; --c: #ff0055; --s: 13px; --delay: 0.04s;">♥</span>
              <span class="p-heart" style="--tx: -12px; --ty: -160px; --drift: 25px; --c: #ff4081; --s: 20px; --delay: 0.12s;">♥</span>
              <span class="p-heart" style="--tx: 45px; --ty: -175px; --drift: -30px; --c: #ff1744; --s: 15px; --delay: 0.07s;">♥</span>
              <span class="p-heart" style="--tx: -80px; --ty: -185px; --drift: -45px; --c: #ff6090; --s: 12px; --delay: 0.14s;">♥</span>
              <span class="p-heart" style="--tx: 75px; --ty: -195px; --drift: 50px; --c: #e040fb; --s: 17px; --delay: 0.10s;">♥</span>

              <!-- 8 Plasma Sparks -->
              <span class="p-spark" style="--tx: 45px; --ty: -45px; --s: 6px; --delay: 0.01s;"></span>
              <span class="p-spark" style="--tx: 65px; --ty: 0px; --s: 7px; --delay: 0.03s;"></span>
              <span class="p-spark" style="--tx: 45px; --ty: 45px; --s: 5px; --delay: 0.02s;"></span>
              <span class="p-spark" style="--tx: 0px; --ty: 65px; --s: 7px; --delay: 0.04s;"></span>
              <span class="p-spark" style="--tx: -45px; --ty: 45px; --s: 5px; --delay: 0.01s;"></span>
              <span class="p-spark" style="--tx: -65px; --ty: 0px; --s: 7px; --delay: 0.03s;"></span>
              <span class="p-spark" style="--tx: -45px; --ty: -45px; --s: 6px; --delay: 0.02s;"></span>
              <span class="p-spark" style="--tx: 0px; --ty: -65px; --s: 8px; --delay: 0.04s;"></span>
            </div>

            <!-- Floating Arc Praise Awards -->
            <div class="praise-vault">
              <div class="praise-pill pill-1">🔥 ULTRA COMBO!</div>
              <div class="praise-pill pill-2">✨ 10,000 LIKES!</div>
              <div class="praise-pill pill-3">💥 LEVEL UP!</div>
            </div>

            <!-- The Sculpted Hero Heart SVG -->
            <div class="heart-icon">
              <svg class="heart-svg" viewBox="0 0 100 100">
                <defs>
                  <linearGradient id="heartGradActive" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="var(--h-start)" />
                    <stop offset="50%" stop-color="var(--h-mid)" />
                    <stop offset="100%" stop-color="var(--h-end)" />
                  </linearGradient>
                  <linearGradient id="heartGlossGrad" x1="20%" y1="0%" x2="50%" y2="70%">
                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.85" />
                    <stop offset="40%" stop-color="#ffffff" stop-opacity="0.2" />
                    <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
                  </linearGradient>
                </defs>
                
                <!-- Main Heart Shape -->
                <path class="heart-path" d="M50 88.5 C20 70 5 52 5 31 C5 14 18 3 33 3 C42 3 47 8 50 13 C53 8 58 3 67 3 C82 3 95 14 95 31 C95 52 80 70 50 88.5 Z" />

                <!-- 3D Specular Highlight Crescent -->
                <path class="gloss-path" d="M30 10 C20 10 12 17 12 28 C12 36 17 46 26 55 C23 45 20 34 22 24 C24 16 30 11 36 11 C34 10 32 10 30 10 Z" fill="url(#heartGlossGrad)" />

                <!-- Star Shine Glimmer -->
                <polygon class="shine-star" points="28,18 30,23 35,25 30,27 28,32 26,27 21,25 26,23" fill="#ffffff" />
              </svg>
            </div>

          </div>

          <!-- Button Label ("Like" -> "Liked!") -->
          <div class="btn-label-box">
            <span class="label-state label-unliked">Like</span>
            <span class="label-state label-liked">Liked!</span>
          </div>

          <!-- Glass Divider -->
          <div class="btn-separator"></div>

          <!-- Mechanical Counter Roller ("9,999" -> "10,000") -->
          <div class="btn-counter-box">
            <div class="counter-slider">
              <span class="count-num num-prev">9,999</span>
              <span class="count-num num-next">10,000</span>
            </div>
            <!-- +1 Particle Pop Tag -->
            <span class="plus-one-tag">+1</span>
          </div>

        </label>

        <!-- Dynamic Replay / Hint Messaging -->
        <div class="state-hint-box">
          <span class="state-hint hint-ready">⚡ Armed & ready for blast ⚡</span>
          <span class="state-hint hint-active">💖 SUPERCHARGED! (Click to reload) 🔄</span>
        </div>

      </div>

    </main>

  </div>

</body>
</html>
Reasoning trace (26,282 tokens)
**Crafting a CSS "Like" Animation**

I'm currently focused on engineering a purely CSS-based "like" button. The core challenge is achieving a visually dynamic, "crazy" animation solely through CSS, eliminating any JavaScript dependency. I'm also ensuring it remains a self-contained HTML file with inline styles and responsive down to 1280x800.

**Implementing Pure CSS Interactivity**

I'm focusing on the checkbox hack for pure CSS click states, allowing me to trigger complex animations. This will enable a rich, multi-layered "like" animation without any JavaScript, and I'm exploring ways to make it replayable and visually dynamic across various screen sizes.

**Designing Extreme CSS Animations**

I'm deeply exploring how to push CSS to its absolute limit for visual flair. My current thoughts are centered on creating an intensely dynamic "like" animation, envisioning a 360-degree confetti explosion with diverse particles, expanding shockwave rings, and a dramatically transforming heart element. I'm also considering animated counter increments and subtle screen warp effects to maximize the visual impact.

**Exploiting CSS Capabilities**

I'm refining the animation sequence, focusing on the screen shake and the heart's preparatory squish. The next step involves orchestrating the concentric shockwaves and then diving into the intricate particle supernova design, aiming for a truly stunning, purely CSS-driven visual experience.

**Generating Extreme Visuals**

I'm refining the animation details, focusing on particle effects like spinning confetti and rising hearts. The main heart will transform dramatically with neon gradients and physics-based bounces. I'm also planning for animated counters and dynamic praise text to enhance the overall "like" experience.

**Designing Toggling Behavior**

I'm exploring how to make the "like" animation replayable. This involves designing a satisfying "unliked" state and ensuring the entire sequence can be toggled on and off infinitely, making it a fun, interactive element. I'm also considering the initial screen presentation.

**Considering Animation Replayability**

I'm currently focused on how to ensure the animation triggers effectively on every click, even when toggling back and forth. I'm exploring whether a single master checkbox is the most robust approach to handle the reset and subsequent re-triggering of all the elaborate CSS animations.

**Refining the Central Concept**

I'm now consolidating the vision to a single, overwhelmingly elaborate "showstopper" button. The focus is on perfecting every insane effect—particles, shockwaves, counter ticks, screen shakes—into one cohesive, jaw-dropping experience. I'm also exploring a "Crazy Mode" toggle for added flair.

**Generating Animated Effects**

I'm refining the core heart animation, focusing on its explosive growth and dynamic color shift into a glowing gradient. Simultaneously, I'm detailing the initial squish and launch phases of the icon.

**Crafting Particle Supernova**

I'm meticulously designing the particle effects, envisioning a cascade of spinning confetti and smaller hearts exploding outwards. The goal is to create a dense, vibrant cloud that follows the main heart's action.

**Developing Energetic Aura**

I'm currently conceptualizing an electric plasma aura or wing-like effect that emerges behind the heart. This element will add a dynamic, energetic layer to the animation, further enhancing the visual intensity.

**Orchestrating Visual Elements**

I'm working on synchronizing the main heart's animation, the particle shower, and the newly conceived plasma aura. The challenge is ensuring these elements flow together seamlessly and explosively from a single interaction point.

**Integrating Screen Shake**

I'm focusing on the subtle screen shake effect to punctuate the animation's peak impact. The goal is to add a tangible sense of force and excitement without being jarring.

**Finalizing Animation Sequence**

I'm now refining the timing and transitions for all elements, ensuring a cohesive and impactful "showstopper" animation. The heart's squash-and-launch, the particle explosion, the plasma wings, and the screen shake must all crescendo perfectly.

**Designing Interactive Toggle**

I'm exploring the most elegant CSS method to reset and re-trigger the entire elaborate animation sequence on subsequent clicks, ensuring a smooth and immediate replayability.

**Consolidating Visual Strategy**

I'm solidifying the "Crazy Mode" concept, which will amplify all existing animated elements to their absolute extreme for a truly over-the-top experience.

**Finalizing Animation Details**

I'm currently focused on the explosion of energy wings and plasma rings from the heart, which will flare, spin, and pulse into a glowing halo. Simultaneously, I'm designing a layered shockwave system with distinct color and sparkle effects, alongside a dense, 360-degree cascade of confetti and sparkle shrapnel.

**Developing Animated Effects**

**Generating Rolling Digits**

I'm implementing a pure CSS slot-machine effect for the counter, transitioning from "9,999" to "10,000" with a gold shine, party streamer, and "+1" badge. I'm also exploring visual sound waves or equalizer bars to simulate a "BOOM" effect without actual audio.

**Expanding Animation Dynamics**

I'm currently integrating reactive background elements, making cosmic gradients flare and beam rays rotate behind the main action. I'm also conceptualizing toggle switches for "Crazy Mode" and various "Sparkle Themes" to be controlled purely with CSS radio buttons or checkboxes, manipulating root CSS variables.

**Refining Visual Intensity**

I'm refining the core animation for the heart's energetic pulse and gradient shift, alongside the initial squish and launch. My focus is on making these elements burst with dynamism and visual appeal.

**Implementing UI Controls**

I'm focusing on the user interface elements now, specifically how to leverage intensity selectors via CSS radio buttons for theme control and ensuring the master like checkbox is intuitively linked to the main button via a label. This will allow for seamless toggling of the elaborate CSS animations.

**Triggering Animated Replay**

I'm focusing on the checkbox mechanism to ensure the entire spectacular animation sequence, from heart explosion to confetti supernova, reliably resets and re-triggers on each subsequent click. I'm also developing the text prompts that guide the user through the interactive states.

**Exploring Theme Toggles**

I'm now integrating CSS radio button theme toggles for "Hyper Neon," "Royal Gold," and "Cyber Matrix." I'm leveraging `:has()` and sibling selectors for maximum browser compatibility, ensuring these themes dynamically alter the animation's visual flair. I'm also refining the confetti and particle system for greater volume and varied trajectories.

**Crafting Particle Trajectories**

I'm designing distinct paths for different particle types: stars twinkle outwards, hearts float with a sway, and rings expand and fade. To manage complexity, I'm implementing reusable keyframe sets with CSS variables for dynamic transformations, aiming for efficient and visually rich particle behavior.

**Refining Particle Animations**

I'm implementing keyframes for particle bursts, ensuring stars twinkle outwards and floating hearts sway upwards with dynamic transformations and opacity changes, all managed by CSS variables.

**Generating Precise Particle Paths**

I'm implementing a dynamic particle system, precomputing coordinates for a full 360-degree radial burst. This allows precise positioning for diverse trajectories and orbits, leveraging CSS variables for efficient, visually rich particle movement.

**Crafting Particle Animations**

I'm focusing on refining the particle animations, specifically implementing keyframes that make stars twinkle outwards and hearts sway upwards with dynamic transformations and opacity changes, all managed via CSS variables for efficiency and visual richness.

**Animating Rings and Gradients**

I'm detailing the shockwave rings' animations, adjusting their sizes, opacity, and borders for a layered expansion. Simultaneously, I'm refining the heart's color gradient and implementing a dynamic inner shine highlight. I'm also beginning to define the "Camera Shake" effect.

**Adding Visceral Impact**

I'm now focused on integrating a dramatic screen shake effect on button activation, designed to simulate a powerful impact. This visual feedback aims to amplify the user's sense of accomplishment and make the interaction feel truly visceral.

**Enhancing Praise Badges**

I'm implementing three distinct floating praise badges with specific trajectories and text. My focus is on synchronizing their entrance and exit with the core animation, ensuring a dynamic and celebratory overlay to the "like" action.

**Animating Count and Aura**

I'm fine-tuning the number counter to mimic a bouncy, high-end iOS/Fintech style using a cubic-bezier transition. Simultaneously, I'm exploring how to create a spinning conic gradient border for the button's aura, a key visual enhancement that will activate on interaction.

**Exploring Thematic Enhancements**

I'm integrating CSS radio buttons for theme selection, allowing users to switch between "Neon Lotus," "Cyber Surge," and "Royal Midas." I'm also detailing the premium, tactile button styling, aiming for a huge, glassy dark gradient with a pill shape and neon depth shadows.

**Applying Thematic Color Palettes**

I'm now dynamically applying distinct color palettes to the core heart animation, glow, and accent elements based on selected themes. This allows for vibrant neon, electric cyberpunk, and opulent gold variations, encouraging repeat interaction and exploration of the spectacular color schemes.

**Finalizing Responsiveness**

I'm confirming responsive behavior across viewports, from 1280x800 down to 375px mobile. This involves ensuring the card, button, and especially the particle bursts remain perfectly contained and visually balanced without overflow or scrollbars. I'm also finalizing the 360-degree particle starburst with 36 distinct, hand-crafted elements, detailing their types, trajectories, and spin.

**Defining Particle Behavior**

I'm currently defining the specific translation, rotation, and color properties for each of the 12 confetti particles and 2 star elements. This detailed setup is crucial for creating their distinct paths and ensuring a cohesive, dynamic burst.

**Defining Particle Properties**

I'm currently defining the specific translation, rotation, and color properties for all confetti, star, and spark elements. This detailed setup is crucial for creating their distinct paths and ensuring a cohesive, dynamic burst across the entire animation.

**Finalizing Animation Triggers**

I'm testing and refining the CSS `:checked` state to accurately trigger all animations in sync. This includes the rapid ring bursts, outward-firing spikes, confetti and star particle explosions, heart floats, and the main heart's dramatic "crazy" explosion, all with precise timing and easing.

**Testing Unchecked States**

I'm exploring how to elegantly handle the "unliked" state, ensuring a smooth return to default after the full animation sequence. My current focus is on making the transition back feel intentional, perhaps with a subtle deflation or bounce, and I'm also designing user prompts to encourage repeated interaction.

**Adding Acoustic Pulse Wave**

I'm designing a spectacular new audio pulse wave animation, featuring 12 radial bars that erupt outwards like an acoustic blast. I'm also refining the heart SVG to be more sculpted and less primitive, with dynamic gradient options.

**Finalizing Particle Details**

I'm precisely defining the translation, rotation, and color properties for individual confetti, star, and spark elements. This meticulous setup is essential for choreographing their unique paths and ensuring a cohesive, dynamic burst.

**Refining Particle Properties**

I'm meticulously defining the translation, rotation, and color properties for all confetti, star, and spark elements. This detailed setup is crucial for creating their distinct paths and ensuring a cohesive, dynamic burst.

**Defining Color Palettes**

I'm solidifying the color palettes for the three themes: "Neon Lotus" with vibrant pinks and purples, "Cyber Volt" featuring electric blues and greens, and "Golden Phoenix" with rich golds and oranges. I'm also mapping these palettes to specific elements like the heart, glow, and particles.

**Applying Thematic Color Palettes**

I'm solidifying the color palettes for the themes. I'm implementing both sibling selectors and custom properties to dynamically apply these vibrant color schemes to the heart, glow, and particles, ensuring maximum compatibility and visual flair across all elements and for all users.

**Developing Intricate Button Structure**

I'm detailing the button's internal structure, defining specific containers for shockwave rings, sparkle streaks, plasma wings, floating text, and particle explosions. This includes implementing the heart SVG and the "LIKE" text labels, as well as refining the counter functionality.

**Integrating New Effects**

I'm now focused on implementing the plasma wing and praise badge animations. The wings will animate with a flap and glow effect, while three distinct praise badges will pop out at staggered intervals, adding further celebratory flair to the "like" interaction.

**Adding Detailed Animations**

I'm refining the praise badges with staggered angles and styles, and I'm implementing a screen shake and a radial light flash for added impact upon activation. The plasma wings and praise badges are being integrated, with wings flapping and glowing, and badges popping out dynamically.

**Defining Particle Details**

I'm meticulously defining the translation, rotation, and color properties for all confetti, star, and spark elements. This detailed setup is crucial for creating their distinct paths and ensuring a cohesive, dynamic burst across the entire animation.

**Polishing Particle Properties**

I'm fine-tuning the precise translation, rotation, and color for each confetti, star, and spark element. This detailed approach is critical for orchestrating their distinct paths and ensuring a cohesive, dynamic burst across the entire animation.

**Defining Individual Particle Properties**

**Defining Particle Properties**

**Defining Particle Properties**

I'm precisely defining the translation, rotation, and color properties for all confetti, star, and spark elements. This detailed setup is crucial for creating their distinct paths and ensuring a cohesive, dynamic burst across the entire animation.

**Defining Particle Properties**

**Defining Button Properties**

I'm now meticulously defining the button's dimensions, padding, border-radius, and display properties. I'm also specifying its glassmorphic background, border, and box-shadow, including hover and active states with subtle transformations and glowing effects.

**Refining Button Aesthetics**

I'm refining the button's resting and hover states, including subtle stroke color changes and a gentle heartbeat animation. On activation, the heart will fill with a dynamic gradient and burst into a complex explosion, with specular highlights and a juicy overshoot landing.

**Defining Button Label Behavior**

I'm working on the button label's transition, ensuring "Like" gracefully fades out and "Liked!" appears with a smooth slide-up animation on activation. This complements the main heart animation with clear visual feedback.

**Defining Particle Properties**

**Applying Complex Themes**

I'm implementing dynamic theme switching using CSS radio buttons, allowing me to apply distinct color palettes and visual styles to the entire animation. This includes the button itself, the heart, particles, and aura effects, ensuring a cohesive and visually stunning experience across "Cyberpunk Rose," "Matrix Volt," and "Solar Gold" themes.

**Applying Color Themes**

I'm dynamically applying distinct color palettes to the core heart animation, glow, and accent elements based on selected themes like "Cyber Volt" and "Golden Phoenix." This allows for vibrant neon, electric cyberpunk, and opulent gold variations, encouraging repeat interaction.

**Applying Global State Control**

I'm consolidating all animation triggers under a single master checkbox, using it to control global states and drive dynamic theme changes via radio button selections. This approach allows for comprehensive control, enabling every element from screen shake to particle bursts to react instantaneously to user interaction and theme selection.

**Animating Particle Bursts**

**Detailing Animation Triggers**

I'm precisely defining the CSS animations for shockwaves, sound bars, plasma wings, and praise badges. The core heart animation is also being refined with specific timing and easing functions to create a spectacular, synchronized explosion of effects.

**Implementing Robust Replayability**

I'm confirming that the CSS `:checked` state provides seamless animation resets and re-triggers. Upon unchecking, animations cancel and immediately restart from their beginning when the master checkbox is engaged again, achieving flawless replayability with pure CSS.

**Refining Keyframes**

I'm now focused on optimizing the keyframes for the `heartMegaPop` animation. This involves fine-tuning the transforms and filters at various percentages to create a more dynamic, explosive, and visually impactful heart burst, ensuring the "unliked" state is as polished as the "liked" one.

**Defining Particle Animations**

I'm refining the `confettiBurst` and `sparkBurst` keyframes. My focus is on precisely controlling the translation, rotation, and scale of individual particles to ensure dynamic, visually rich explosions. The goal is to create distinct, cohesive bursts that follow the main animation.

**Refining Keyframes**

I'm focusing on optimizing the keyframes for the `confettiBurst` and `sparkBurst` animations. My aim is to precisely control the translation, rotation, and scale of individual particles to create dynamic, visually rich explosions with distinct, cohesive bursts that follow the main animation.

**Refining Particle Animations**

I'm fine-tuning the keyframes for particle bursts, ensuring stars twinkle outwards and floating hearts sway upwards with dynamic transformations and opacity changes. These are all managed via CSS variables for efficiency and visual richness.

**Refining Keyframes**

**Fine-tuning Keyframes**

I'm optimizing keyframes for burst animations, precisely controlling particle translation, rotation, and scale. This ensures dynamic, visually rich explosions with distinct, cohesive bursts that follow the main animation, achieving a polished "unliked" state.

**Tuning Particle Animations**

I'm refining the keyframes for particle bursts, specifically `confettiBurst` and `sparkBurst`. My focus is on precisely controlling translation, rotation, and scale for dynamic, visually rich explosions, ensuring distinct, cohesive bursts that follow the main animation and contribute to a polished "unliked" state.

**Animating Effects**

**Refining Particle Properties**

**Defining Particle Properties**

**Perfecting Counter and Reset**

I'm implementing a bouncy, iOS-style counter animation rolling from 9,999 to 10,000, accompanied by a "+1" badge and igniting button border. Crucially, the reset to the unliked state is a clean pop back, with a prompt for re-detonation, all managed purely with CSS via the checkbox hack and `:has()`.