Models 44

GPT-6 Luna

by OpenAIReasoningClean
Open in new window

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

How it went

Total time
5 min 41 s
Cost
$0.023
Output tokens
45,766
Spent thinking
36,084 tokens
Speed
135.5 tok/s
Console errors
0
First token after
2.9 s
First visible text after
4 min 49 s
Prompt tokens
356
Code size
29.7 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-6-luna
Reasoning sent
{"effort":"max"}
Max output
64,000 tokens
Generated
Nov 10, 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 · 1168 lines

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark">
  <title>Heart Lab — Pure CSS Like Button</title>
  <style>
    :root {
      color-scheme: dark;
      --ink: #100d18;
      --muted: #a69cab;
      --pink: #ff5b86;
      --gold: #ffd78a;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-width: 320px;
      min-height: 100%;
    }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      padding: 32px 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      background: #0b0912;
      color: #fbf7fc;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .backdrop {
      position: fixed;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 52% 47%, rgba(63, 34, 59, .24), transparent 55%),
        linear-gradient(145deg, #100c18 0%, #0b0912 56%, #100b17 100%);
    }

    .backdrop::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .14;
      background-image: radial-gradient(rgba(255, 255, 255, .55) .65px, transparent .8px);
      background-size: 25px 25px;
      mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 83%, transparent);
    }

    .ambient-blob {
      position: absolute;
      width: 680px;
      height: 680px;
      border-radius: 50%;
      filter: blur(22px);
    }

    .blob-left {
      top: calc(50% - 480px);
      left: calc(50% - 700px);
      background: radial-gradient(circle, rgba(115, 56, 126, .20), transparent 68%);
    }

    .blob-right {
      top: calc(50% - 130px);
      left: calc(50% + 210px);
      background: radial-gradient(circle, rgba(225, 64, 112, .12), transparent 69%);
    }

    .page {
      position: relative;
      z-index: 1;
      width: min(1050px, 100%);
      margin: auto;
      animation: page-arrive .75s cubic-bezier(.2, .75, .25, 1) both;
    }

    .topbar {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      padding: 0 2px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(145deg, #ff7898, #db3d78);
      box-shadow: 0 6px 22px rgba(255, 73, 126, .2), inset 0 1px rgba(255, 255, 255, .3);
    }

    .brand-mark svg {
      width: 18px;
      height: 18px;
    }

    .brand-name {
      color: #f8f2fa;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .18em;
    }

    .brand-name span {
      color: #968899;
      font-weight: 600;
    }

    .tech-pill {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 0 13px;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 999px;
      color: #c6bacb;
      background: rgba(255, 255, 255, .035);
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .12em;
      white-space: nowrap;
    }

    .tech-led,
    .eyebrow-dot,
    .stage-dot {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: #ff82a0;
      box-shadow: 0 0 11px rgba(255, 99, 145, .85);
    }

    .tech-separator {
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, .16);
    }

    .showcase {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
      min-height: 520px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 30px;
      background:
        radial-gradient(ellipse at 77% 48%, rgba(110, 42, 75, .14), transparent 42%),
        linear-gradient(135deg, rgba(31, 25, 40, .97), rgba(19, 16, 28, .98));
      box-shadow:
        0 34px 110px rgba(0, 0, 0, .43),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .showcase::before {
      content: "";
      position: absolute;
      z-index: 5;
      top: 0;
      left: 7%;
      right: 7%;
      height: 1px;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255, 139, 173, .48), transparent);
    }

    .copy-panel {
      position: relative;
      z-index: 2;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 59px 44px 48px 58px;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #c1b4c7;
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .eyebrow-dot {
      width: 5px;
      height: 5px;
      background: #ffb0c3;
    }

    h1 {
      margin: 21px 0 18px;
      color: #fffafd;
      font-size: clamp(56px, 5.3vw, 68px);
      font-weight: 760;
      letter-spacing: -.072em;
      line-height: .94;
    }

    .gradient-text {
      color: #ff8eaa;
      background: linear-gradient(100deg, #ff9bb4 2%, #ff5c8b 54%, #ffc18a 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .copy-panel p {
      max-width: 345px;
      margin: 0;
      color: #b9afc0;
      font-size: 15px;
      line-height: 1.72;
    }

    .recipe {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      margin-top: auto;
      padding-top: 30px;
      color: #85798e;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .recipe-kicker {
      margin-right: 3px;
      color: #d5c9d9;
      letter-spacing: .12em;
    }

    .recipe-chip {
      padding: 6px 8px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 6px;
      color: #b9acbf;
      background: rgba(255, 255, 255, .035);
      letter-spacing: .03em;
      text-transform: none;
    }

    .recipe-plus {
      color: #ff8aa5;
      font-size: 11px;
    }

    .play-panel {
      position: relative;
      min-width: 0;
      min-height: 520px;
      overflow: hidden;
      border-left: 1px solid rgba(255, 255, 255, .08);
      background:
        radial-gradient(ellipse at 50% 50%, rgba(146, 51, 93, .12), transparent 55%),
        linear-gradient(100deg, rgba(255, 255, 255, .012), rgba(255, 255, 255, .025));
    }

    .stage-note {
      position: absolute;
      z-index: 10;
      top: 25px;
      left: 29px;
      right: 29px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8e8495;
      font-size: 8px;
      font-weight: 750;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .stage-kind {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    .stage-dot {
      width: 5px;
      height: 5px;
      background: #ff89a5;
    }

    .stage-number {
      color: #766c7e;
      letter-spacing: .11em;
    }

    .visual-stage {
      position: absolute;
      inset: 0;
      min-height: 520px;
      overflow: visible;
      isolation: isolate;
    }

    .visually-hidden {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      border: 0;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
    }

    .like-button {
      position: absolute;
      z-index: 8;
      top: calc(50% - 37px);
      left: 50%;
      width: 192px;
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      border-radius: 999px;
      color: #432734;
      cursor: pointer;
      isolation: isolate;
      transform: translateX(-50%);
      transition: filter .2s ease, transform .2s cubic-bezier(.2, .75, .25, 1);
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    .like-button:hover {
      filter: brightness(1.04);
      transform: translateX(-50%) translateY(-2px);
    }

    .like-button:active {
      transform: translateX(-50%) scale(.97);
    }

    #like-toggle:focus-visible + .like-button {
      outline: 2px solid #fff;
      outline-offset: 8px;
    }

    .button-face {
      position: absolute;
      z-index: 1;
      inset: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .88);
      border-radius: inherit;
      background: linear-gradient(145deg, #fffefe 0%, #fff6f8 56%, #ffe8ef 100%);
      box-shadow: 0 12px 31px rgba(0, 0, 0, .27), 0 5px 23px rgba(255, 97, 141, .08);
      transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .button-sheen {
      position: absolute;
      top: -30%;
      left: -105%;
      width: 57%;
      height: 160%;
      transform: skewX(-22deg);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    }

    .button-fx {
      position: absolute;
      z-index: 2;
      inset: 0;
      overflow: visible;
      pointer-events: none;
    }

    .button-aura {
      position: absolute;
      z-index: 0;
      inset: -26px -38px;
      border-radius: 50%;
      opacity: 0;
      background: radial-gradient(ellipse, rgba(255, 76, 128, .68), rgba(181, 75, 202, .24) 45%, transparent 73%);
      filter: blur(13px);
    }

    .burst-ring {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      width: 76px;
      height: 76px;
      border: 1.5px solid rgba(255, 111, 155, .9);
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.35);
    }

    .ring-b {
      width: 91px;
      height: 91px;
      border-color: rgba(255, 211, 139, .95);
    }

    .confetti {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      width: 7px;
      height: 11px;
      border-radius: 2px;
      opacity: 0;
      background: var(--tone, #ff83a0);
      filter: drop-shadow(0 0 5px var(--tone, #ff83a0));
      transform: translate(-50%, -50%) scale(.15);
    }

    .confetti.round {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .confetti.long {
      width: 5px;
      height: 14px;
      border-radius: 3px;
    }

    .button-inner {
      position: relative;
      z-index: 3;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
    }

    .heart-bubble {
      width: 41px;
      height: 41px;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 50%;
      background: rgba(239, 75, 119, .10);
      transition: background .25s ease, transform .25s ease;
    }

    .heart-svg {
      width: 23px;
      height: 23px;
      overflow: visible;
      color: #ef4c78;
      transform-box: fill-box;
      transform-origin: center;
    }

    .heart-svg path {
      fill: transparent;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: fill .24s ease, stroke .24s ease;
    }

    .button-copy {
      min-width: 54px;
      color: #432734;
      font-size: 16px;
      font-weight: 760;
      letter-spacing: -.025em;
      text-align: left;
      transition: color .24s ease;
    }

    .copy-liked {
      display: none;
    }

    .button-caption {
      position: absolute;
      z-index: 7;
      top: calc(50% + 57px);
      left: 50%;
      width: min(100%, 300px);
      margin: 0;
      color: #b5a8ba;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
      transform: translateX(-50%);
    }

    .caption-on {
      display: none;
      color: #ffd8e1;
    }

    .scene-flash {
      position: absolute;
      z-index: 0;
      top: 50%;
      left: 50%;
      width: 430px;
      height: 430px;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255, 75, 126, .24), rgba(161, 69, 193, .10) 38%, transparent 71%);
      transform: translate(-50%, -50%) scale(.32);
    }

    .orbit {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .orbit-outer {
      width: 356px;
      height: 356px;
      border: 1px dashed rgba(255, 255, 255, .11);
      animation: orbit-spin 82s linear infinite;
    }

    .orbit-outer::before,
    .orbit-outer::after,
    .orbit-middle::before {
      content: "";
      position: absolute;
      width: 7px;
      height: 7px;
      border: 1px solid rgba(255, 191, 206, .8);
      border-radius: 50%;
      background: #f17194;
      box-shadow: 0 0 13px rgba(255, 98, 145, .7);
    }

    .orbit-outer::before {
      top: 22px;
      left: 47px;
    }

    .orbit-outer::after {
      right: 19px;
      bottom: 103px;
      width: 5px;
      height: 5px;
      background: #ffd58a;
      border-color: rgba(255, 225, 166, .8);
      box-shadow: 0 0 12px rgba(255, 211, 139, .55);
    }

    .orbit-middle {
      width: 278px;
      height: 278px;
      border: 1px solid rgba(255, 255, 255, .085);
      box-shadow: 0 0 48px rgba(236, 71, 126, .045);
      animation: orbit-spin 64s linear infinite reverse;
    }

    .orbit-middle::before {
      top: 24px;
      right: 37px;
      width: 5px;
      height: 5px;
      border: 0;
      background: #a78bff;
      box-shadow: 0 0 11px rgba(167, 139, 255, .7);
    }

    .orbit-inner {
      width: 176px;
      height: 176px;
      border: 1px solid rgba(255, 255, 255, .07);
      background: radial-gradient(circle, rgba(255, 93, 139, .09), rgba(255, 255, 255, .015) 69%, transparent);
      box-shadow: inset 0 0 38px rgba(255, 90, 137, .055);
    }

    .floating-mark {
      position: absolute;
      z-index: 3;
      color: #ff87a5;
      font-size: 17px;
      line-height: 1;
      pointer-events: none;
      text-shadow: 0 0 15px rgba(255, 82, 137, .42);
      animation: floaty 4.8s ease-in-out infinite;
    }

    .mark-one {
      top: 32%;
      left: 19%;
      --flight-x: -22px;
      --flight-y: -44px;
      --flight-delay: 0ms;
    }

    .mark-two {
      top: 67%;
      right: 17%;
      color: #ffb0c0;
      font-size: 14px;
      --flight-x: 29px;
      --flight-y: 42px;
      --flight-delay: 65ms;
      animation-delay: -1.4s;
    }

    .mark-three {
      top: 28%;
      right: 25%;
      color: #ffd58a;
      font-size: 15px;
      --flight-x: 25px;
      --flight-y: -37px;
      --flight-delay: 120ms;
      animation-delay: -2.1s;
    }

    .mark-four {
      bottom: 27%;
      left: 24%;
      color: #c4a7ff;
      font-size: 13px;
      --flight-x: -31px;
      --flight-y: 39px;
      --flight-delay: 35ms;
      animation-delay: -3s;
    }

    #like-toggle:checked + .like-button {
      animation: button-chaos .88s cubic-bezier(.15, .88, .3, 1.2) both;
    }

    #like-toggle:checked + .like-button .button-face {
      border-color: rgba(255, 206, 221, .82);
      background: linear-gradient(135deg, #ff7899 0%, #fa4e81 58%, #df3979 100%);
      box-shadow: 0 12px 33px rgba(0, 0, 0, .23), 0 0 35px rgba(255, 65, 124, .35);
    }

    #like-toggle:checked + .like-button .button-sheen {
      animation: sheen-pass .78s .05s ease-out both;
    }

    #like-toggle:checked + .like-button .button-aura {
      animation: aura-bloom .92s cubic-bezier(.15, .7, .25, 1) both;
    }

    #like-toggle:checked + .like-button .ring-a {
      animation: ring-burst .82s cubic-bezier(.15, .7, .25, 1) both;
    }

    #like-toggle:checked + .like-button .ring-b {
      animation: ring-burst .94s .09s cubic-bezier(.15, .7, .25, 1) both;
    }

    #like-toggle:checked + .like-button .confetti {
      animation: confetti-fly .9s cubic-bezier(.15, .65, .3, 1) var(--delay, 0ms) both;
    }

    #like-toggle:checked + .like-button .heart-svg {
      animation: heart-pop .82s cubic-bezier(.16, .9, .3, 1.22) both;
    }

    #like-toggle:checked + .like-button .heart-svg path {
      fill: #fff;
      stroke: #fff;
    }

    #like-toggle:checked + .like-button .heart-bubble {
      background: rgba(255, 255, 255, .19);
    }

    #like-toggle:checked + .like-button .button-copy {
      color: #fff;
    }

    #like-toggle:checked + .like-button .copy-default {
      display: none;
    }

    #like-toggle:checked + .like-button .copy-liked {
      display: inline;
    }

    #like-toggle:checked ~ .button-caption .caption-off {
      display: none;
    }

    #like-toggle:checked ~ .button-caption .caption-on {
      display: inline;
    }

    #like-toggle:checked ~ .scene-flash {
      animation: scene-swell 1s cubic-bezier(.15, .7, .25, 1) both;
    }

    #like-toggle:checked ~ .orbit-inner {
      border-color: rgba(255, 139, 171, .26);
      animation: inner-pulse .82s cubic-bezier(.15, .78, .25, 1) both;
    }

    #like-toggle:checked ~ .floating-mark {
      animation: mark-flight .86s cubic-bezier(.15, .7, .25, 1) var(--flight-delay) both;
    }

    @keyframes page-arrive {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes orbit-spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes floaty {
      0%, 100% { transform: translateY(0) rotate(-8deg); }
      50% { transform: translateY(-10px) rotate(8deg); }
    }

    @keyframes button-chaos {
      0%   { transform: translateX(-50%) rotate(0deg) scale(1); }
      11%  { transform: translateX(-50%) rotate(-9deg) scale(.84); }
      25%  { transform: translateX(-50%) rotate(8deg) scale(1.19); }
      39%  { transform: translateX(-50%) rotate(-6deg) scale(.91); }
      54%  { transform: translateX(-50%) rotate(5deg) scale(1.11); }
      69%  { transform: translateX(-50%) rotate(-3deg) scale(.96); }
      84%  { transform: translateX(-50%) rotate(2deg) scale(1.035); }
      100% { transform: translateX(-50%) rotate(0deg) scale(1); }
    }

    @keyframes heart-pop {
      0%   { transform: scale(.28) rotate(-37deg); }
      18%  { transform: scale(1.55) rotate(18deg); }
      35%  { transform: scale(.76) rotate(-15deg); }
      53%  { transform: scale(1.29) rotate(10deg); }
      70%  { transform: scale(.91) rotate(-6deg); }
      86%  { transform: scale(1.08) rotate(3deg); }
      100% { transform: scale(1) rotate(0); }
    }

    @keyframes sheen-pass {
      from { transform: translateX(0) skewX(-22deg); }
      to { transform: translateX(410%) skewX(-22deg); }
    }

    @keyframes aura-bloom {
      0% { opacity: 0; transform: scale(.55); }
      28% { opacity: .95; transform: scale(1.12); }
      100% { opacity: 0; transform: scale(1.42); }
    }

    @keyframes ring-burst {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
      17% { opacity: .95; }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
    }

    @keyframes confetti-fly {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(.12);
      }
      14% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(25deg) scale(1.1);
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)) scale(.55);
      }
    }

    @keyframes scene-swell {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.28); }
      26% { opacity: .9; }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
    }

    @keyframes inner-pulse {
      0% { opacity: .5; transform: translate(-50%, -50%) scale(.78); }
      34% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
      100% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes mark-flight {
      0% { opacity: .85; transform: translate(0, 0) scale(1); }
      28% { opacity: 1; transform: translate(calc(var(--flight-x) * .35), calc(var(--flight-y) * .35)) scale(1.5) rotate(18deg); }
      100% { opacity: 0; transform: translate(var(--flight-x), var(--flight-y)) scale(.35) rotate(55deg); }
    }

    .page-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      padding: 0 3px;
      color: #716879;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .14em;
    }

    .footer-heart {
      color: #fa6e91;
      font-size: 11px;
    }

    .footer-index {
      margin-left: 5px;
      color: #ba9cab;
    }

    @media (max-width: 900px) {
      .showcase {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .copy-panel {
        min-height: 385px;
        padding: 43px 48px 32px;
      }

      h1 {
        font-size: 64px;
      }

      .copy-panel p {
        max-width: 430px;
      }

      .play-panel {
        min-height: 425px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-left: 0;
      }

      .visual-stage {
        min-height: 425px;
      }
    }

    @media (max-width: 520px) {
      body {
        padding: 15px 14px 22px;
      }

      .topbar {
        min-height: 36px;
        gap: 8px;
        margin-bottom: 14px;
      }

      .brand {
        gap: 8px;
      }

      .brand-mark {
        width: 33px;
        height: 33px;
        border-radius: 11px;
      }

      .brand-name {
        font-size: 10px;
        letter-spacing: .14em;
      }

      .tech-pill {
        min-height: 31px;
        gap: 7px;
        padding: 0 9px;
        font-size: 8px;
        letter-spacing: .09em;
      }

      .showcase {
        border-radius: 23px;
      }

      .copy-panel {
        min-height: 0;
        padding: 29px 24px 22px;
      }

      .eyebrow {
        gap: 8px;
        font-size: 8px;
        letter-spacing: .14em;
      }

      h1 {
        margin: 16px 0 13px;
        font-size: clamp(42px, 11.7vw, 50px);
        line-height: .96;
      }

      .copy-panel p {
        max-width: 330px;
        font-size: 13px;
        line-height: 1.58;
      }

      .recipe {
        gap: 6px;
        padding-top: 21px;
        font-size: 7px;
      }

      .recipe-chip {
        padding: 5px 6px;
      }

      .play-panel {
        min-height: 350px;
      }

      .visual-stage {
        min-height: 350px;
      }

      .stage-note {
        top: 17px;
        left: 19px;
        right: 19px;
        font-size: 7px;
        letter-spacing: .12em;
      }

      .stage-kind {
        gap: 7px;
      }

      .orbit-outer {
        width: 304px;
        height: 304px;
      }

      .orbit-middle {
        width: 240px;
        height: 240px;
      }

      .orbit-inner {
        width: 164px;
        height: 164px;
      }

      .like-button {
        top: calc(50% - 34px);
        width: 178px;
        height: 68px;
      }

      .button-caption {
        top: calc(50% + 52px);
        font-size: 11px;
      }

      .scene-flash {
        width: 360px;
        height: 360px;
      }

      .mark-one {
        left: 13%;
      }

      .mark-two {
        right: 12%;
      }

      .mark-three {
        right: 18%;
      }

      .mark-four {
        left: 18%;
      }

      .page-footer {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }
  </style>
</head>
<body>
  <div class="backdrop" aria-hidden="true">
    <div class="ambient-blob blob-left"></div>
    <div class="ambient-blob blob-right"></div>
  </div>

  <div class="page">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M12 20.2s-1.4-.8-3.2-2.2C4.3 14.8 2 12 2 8.5 2 5.5 4.1 3.4 7.1 3.4c2 0 3.5 1.1 4.9 2.9 1.4-1.8 2.9-2.9 4.9-2.9 3 0 5.1 2.1 5.1 5.1 0 3.5-2.3 6.3-6.8 9.5-1.5 1.1-3.2 2.2-3.2 2.2Z" fill="currentColor"/>
          </svg>
        </span>
        <span class="brand-name">HEART <span>/ LAB</span></span>
      </div>

      <div class="tech-pill" aria-label="Pure CSS, zero JavaScript">
        <span class="tech-led"></span>
        <span>PURE CSS</span>
        <span class="tech-separator"></span>
        <span>ZERO JS</span>
      </div>
    </header>

    <main class="showcase">
      <section class="copy-panel">
        <div class="eyebrow">
          <span class="eyebrow-dot"></span>
          <span>Micro-interaction / 001</span>
        </div>

        <h1>A little<br>like goes<br><span class="gradient-text">BOOM.</span></h1>

        <p>Go on, give it a like. One tiny click kicks off a full-on celebration — powered entirely by CSS.</p>

        <div class="recipe" aria-label="Made from checkbox, keyframes, and confetti">
          <span class="recipe-kicker">The recipe</span>
          <span class="recipe-chip">checkbox</span>
          <span class="recipe-plus">+</span>
          <span class="recipe-chip">keyframes</span>
          <span class="recipe-plus">+</span>
          <span class="recipe-chip">confetti</span>
        </div>
      </section>

      <section class="play-panel" aria-label="Interactive CSS like button demo">
        <div class="stage-note">
          <span class="stage-kind"><span class="stage-dot"></span>Live interaction</span>
          <span class="stage-number">Component 01</span>
        </div>

        <div class="visual-stage">
          <input class="visually-hidden" type="checkbox" id="like-toggle" aria-describedby="button-instructions">

          <label class="like-button" for="like-toggle">
            <span class="button-fx" aria-hidden="true">
              <span class="button-aura"></span>
              <span class="burst-ring ring-a"></span>
              <span class="burst-ring ring-b"></span>

              <span class="confetti long" style="--dx:-126px;--dy:-67px;--spin:-170deg;--tone:#ff8da8;--delay:0ms"></span>
              <span class="confetti round" style="--dx:-91px;--dy:-116px;--spin:210deg;--tone:#ffd58a;--delay:35ms"></span>
              <span class="confetti" style="--dx:-30px;--dy:-130px;--spin:260deg;--tone:#fff0c1;--delay:75ms"></span>
              <span class="confetti long" style="--dx:49px;--dy:-124px;--spin:150deg;--tone:#ff7299;--delay:20ms"></span>
              <span class="confetti round" style="--dx:119px;--dy:-83px;--spin:330deg;--tone:#ffd58a;--delay:65ms"></span>
              <span class="confetti" style="--dx:134px;--dy:-19px;--spin:190deg;--tone:#fff0c1;--delay:100ms"></span>
              <span class="confetti long" style="--dx:116px;--dy:58px;--spin:290deg;--tone:#c4a7ff;--delay:30ms"></span>
              <span class="confetti round" style="--dx:70px;--dy:112px;--spin:200deg;--tone:#ffd58a;--delay:85ms"></span>
              <span class="confetti" style="--dx:7px;--dy:130px;--spin:80deg;--tone:#ff789c;--delay:50ms"></span>
              <span class="confetti long" style="--dx:-60px;--dy:116px;--spin:140deg;--tone:#fff0c1;--delay:15ms"></span>
              <span class="confetti round" style="--dx:-122px;--dy:68px;--spin:250deg;--tone:#ff8da8;--delay:75ms"></span>
              <span class="confetti" style="--dx:-136px;--dy:5px;--spin:210deg;--tone:#ffd58a;--delay:40ms"></span>
              <span class="confetti long" style="--dx:-68px;--dy:-34px;--spin:310deg;--tone:#c4a7ff;--delay:90ms"></span>
              <span class="confetti round" style="--dx:75px;--dy:-39px;--spin:120deg;--tone:#ff789c;--delay:25ms"></span>
              <span class="confetti" style="--dx:64px;--dy:40px;--spin:200deg;--tone:#fff0c1;--delay:55ms"></span>
              <span class="confetti long" style="--dx:-77px;--dy:43px;--spin:330deg;--tone:#ff7299;--delay:110ms"></span>
            </span>

            <span class="button-face" aria-hidden="true">
              <span class="button-sheen"></span>
            </span>

            <span class="button-inner">
              <span class="heart-bubble" aria-hidden="true">
                <svg class="heart-svg" viewBox="0 0 24 24" fill="none" focusable="false">
                  <path d="M12 20.2s-1.4-.8-3.2-2.2C4.3 14.8 2 12 2 8.5 2 5.5 4.1 3.4 7.1 3.4c2 0 3.5 1.1 4.9 2.9 1.4-1.8 2.9-2.9 4.9-2.9 3 0 5.1 2.1 5.1 5.1 0 3.5-2.3 6.3-6.8 9.5-1.5 1.1-3.2 2.2-3.2 2.2Z"/>
                </svg>
              </span>
              <span class="button-copy">
                <span class="copy-default">Like</span>
                <span class="copy-liked">Liked!</span>
              </span>
            </span>
          </label>

          <p class="button-caption" id="button-instructions">
            <span class="caption-off">One tap. A whole lot of love.</span>
            <span class="caption-on">Love delivered. Nice one.</span>
          </p>

          <span class="scene-flash" aria-hidden="true"></span>
          <span class="orbit orbit-outer" aria-hidden="true"></span>
          <span class="orbit orbit-middle" aria-hidden="true"></span>
          <span class="orbit orbit-inner" aria-hidden="true"></span>

          <span class="floating-mark mark-one" aria-hidden="true" style="animation-delay:-1.7s">♥</span>
          <span class="floating-mark mark-two" aria-hidden="true">♥</span>
          <span class="floating-mark mark-three" aria-hidden="true">✦</span>
          <span class="floating-mark mark-four" aria-hidden="true">✦</span>
        </div>
      </section>
    </main>

    <footer class="page-footer">
      <span>MADE WITH <span class="footer-heart">♥</span> AND A CHECKBOX</span>
      <span>CSS INTERACTION STUDY <span class="footer-index">01</span></span>
    </footer>
  </div>
</body>
</html>
Reasoning trace (36,084 tokens)
**Designing a CSS Button**

I need to craft an output using HTML, focusing on a CSS-only button that incorporates crazy animations upon clicking. The button should toggle via a checkbox and be visually appealing on the first screen. I’ll aim for a polished mini demo with lively animations triggered by clicks, ensuring it’s keyboard accessible. The design will use vibrant red or pink colors, featuring visuals like hearts and particles for added flair when toggled. I’ll create a centered showcase page highlighting this button!**Developing Checkbox Animations**

I’m thinking about using a native checkbox label and pseudo-elements to ensure the click works with a visually hidden checkbox. For animations, I’ll style based on whether the checkbox is checked or unchecked. If I use pseudo-classes like `:not(:checked)` for animations, I might need to run initial animations upon loading or state changes. I want to have the inner `svg heart` transition upon checking. When unchecked, I’ll consider how to trigger animations smoothly without overcomplicating things, focusing on clean visual effects.**Implementing CSS Toggle Animations**

I’m focusing on using CSS to create a state toggle with a checkbox and keyframe animation for when it’s checked. The key is that toggling off won't rerun the animation from the checked state, but the heart transition will still handle the visual effect. For the clicking action, the first click triggers the main like animation, while subsequent clicks just toggle it off without restarting the animation. I'll use selectors for smooth state transitions and style changes to enhance the effect.**Designing a Love Button**

I'm thinking about using CSS to create a visually appealing heart button. The background can be a deep violet gradient with star particles, and I want to center a card around 500 pixels wide. It could have a catchy headline like "Tap to send some love” and a micro text, “A LITTLE LOVE GOES A LONG WAY." The button can be a large red coral pill shape with a white heart icon. I'll keep everything simple and static since I think fake counts might not feel genuine. Just a nice, unique visual!**Planning Animation for Button**

I want to create a high-energy animation that triggers on click. For the button, I can design it as an oval or capsule-shaped pill with a heart icon and additional elements like pips. To add some flair, I might use a `.burst` layer with 12 particles in different colors. I can implement this with CSS keyframes, utilizing individual variables for various burst directions. It’s essential to ensure the CSS is reliable. I'll plan the overall design around a button card sized 1280x800 pixels.**Designing Interaction Elements**

I’m working on making sure this button is clickable. I need to think about how the `<input>` is visually clipped and whether the label should have a role. Labels should be clickable for accessibility, and I should include some focus-visible styling for better UX. 

There's a lot to consider for the layout, including card dimensions, titles, and overall visual style. I want to ensure everything appears clean and engaging with nice animations, and I need to plan for how everything fits together visually.**Creating Clickable Animations**

I'm developing an animation triggered by a click on the button. The label with class `.like-btn` will have elements like `.button-surface`, and the heart is wrapped in an SVG. Text will change between "Like" and "Liked!" with some spark particles for visual flair. 

I also need to ensure the button has a checkbox mechanism with labels that toggle visibility. The heart will have different color states, and the button itself should have a white background and black text, complemented by a pink heart for an animated effect.**Considering CSS for status updates**

I'm thinking about how to use CSS to switch between "Like" and "Liked!" for a button. The idea is to have a dynamic status displayed above and below the button, like using `.status-off` and `.status-on`. I envision a card layout where the button defaults to "Like" and switches to "Liked!" when active, alongside a caption that changes from "Give the heart a tap" to "Love delivered. You made someone's day." It feels like a simple but engaging design to implement!**Designing a polished layout**

I'm thinking about a simpler full-viewport design at 1280, focusing on a central content layout without cards. The dark base color could be #0e0a18, with a light color radial aurora around the center. For the wrapper, I might set the width to min(1000px, calc(100%-40px)) and height around 600. The top bar could feature a heart icon and a badge saying “CSS ONLY / ZERO JS.” The main panel could use a grid layout, which allows for an engaging visual experience!**Designing button interaction**

I'm considering the active state of a button changing from transparent deep plum to pink. Should I include a "counter" display with dots around it? The button would be 180x76, featuring a heart outline with "Like." I'm wondering if the page will have too much text, given the task's specific design and aesthetic requirements. I want to ensure plenty of animations for interaction but need to respect users who prefer reduced motion. I’ll use a hidden checkbox for interactions instead of JavaScript to keep it simple and accessible for screen readers.**Considering button accessibility**

I’m thinking about what makes a button accessible. For instance, I wonder if labeling it visually as a button is sufficient. The `<label>` is interactive but may not fulfill the role of a button on its own. Using an input checkbox with an associated label seems like a good approach. The screen reader could announce the checkbox status dynamically, utilizing spans for visual cues. I’ll also need to separate hint messages for clarity after the label.**Designing UI Elements**

I'm setting up the top and left positions in my design. I’m thinking about using a small translucent tag that says "LOVE IS IN THE AIR" at the top, ensuring it doesn't crowd the screen at 1280 pixels. I want to incorporate mini floating cards to indicate likes, positioned outside the circle. I need to make the layout responsive for different screen sizes and adjust badges, logos, and text accordingly to prevent any overlap or crowding.**Configuring Mobile Card Layout**

I'm arranging the main card for mobile as a single-column grid, with padding settings of 32px top, 28px right and left, and 20px bottom. The h1 font size should be 42. The play area needs a minimum height of 360 pixels, with a maximum width of 310 pixels for orbit and 176 pixels for buttons. I want to ensure the sparks can reach the right areas without overlap, and I’m considering removing padding for the play area on mobile while ensuring the design remains visually appealing on desktop.**Positioning Mobile Button**

I'm working on centering the button within the card on mobile. The button should fit within an inner width of 340 pixels, so I need to consider padding and the overall card layout. If the visual stage fills the play area and the parent width is adequate, centering the button plus 145 pixels gives me some leeway. I want to confirm that the card does not overlap or leave any gaps in this setup.**Considering design elements**

I'm looking at making the main card’s overflow visible and using a pseudo-element for the background. I need to ensure the rounded edges don’t clip, and I'm contemplating how the card’s overflow:hidden might affect the effects on mobile. I have some specific margin requirements, and the desktop layout needs careful positioning. For the typography, I’ll go for a fallback font stack. I envision a clean and striking aesthetic, incorporating gradients and a deep background color.**Exploring design concepts**

I’m thinking about a CSS dot matrix overlay using a radial gradient for the background, which should create a nice visual effect. I can add a mask image and adjust the body with a huge halo effect. The main card will have a linear gradient for depth, with highlights and shadows. I’m planning header elements with eye-catching labels and a compelling heading that conveys the emotion behind the design. Maybe I should also think about concise phrases that serve as a marketing statement, hinting at animation.**Designing animated orbit display**

I'm considering positioning elements for an orbit display. I want the stage label at the absolute top with some margin, and the button centered vertically. For the rings, I'll place the `.orbit` element at the center with a dashed border to create a circle. The outer ring will rotate for a nice visual effect, while the inner rings won’t animate. Then, adding some floating shapes, like hearts positioned with CSS, might create a nice touch, though I have to ensure it doesn’t look too crowded.**Examining button and animation design**

I’m looking into the scale of elements, where an end scale of 2.2 gives a width and height of 158, with a radius of 80. There's a total offset beyond the button by 40 pixels, which seems great. 

The animation delay starts at 0.08 seconds, which seamlessly hides the initial opacity until the animation delay kicks in. It’s good to note how toggling the checkbox off will stop the animation. 

I want to ensure the visual aspects, such as the rings and z-index layering, work as intended, especially as the size changes.**Working on visual design**

I'm focusing on the visual design, especially the z-index for layering elements like the heart and text. I need to make sure the confetti stays within the label's width and is centered properly. The particles will travel to specific coordinates based on their size and scaling. I'll also need to manage the background z-index and create multiple particle shapes with defined styles. It looks like I can use manual markup for those elements while ensuring the CSS values are safe.**Establishing particle positions**

I'm mapping out particle positions and their attributes. I've got coordinates and rotations set for each, with different colors—like pink, gold, and yellow—assigned to specific particles. The effects are designed to be centered at a button on a stage of around 500 pixels wide. For mobile, the width is narrower, so I need to check margins again to ensure they look good without spilling over the edges. Overall, I think I have a clear layout!**Optimizing the play area**

I’m considering adjustments for the play area, thinking about padding it and ensuring it's centered correctly with a width around 303 pixels. With a `dx` of -143, I end up with just 8 pixels visible, clipped by a 20-pixel border. I might need to reduce the particle travel settings for mobile. To do that, I can implement a custom `--dx` variable in CSS, using `calc()` to create a responsive scale. That should help keep everything looking balanced!**Evaluating mobile card design**

I’m analyzing the background card on mobile and its height. The viewport is set to 800, with 42 for the header and other content, leading to a total around 850. At a 375 width, it may scroll vertically but not horizontally. There’s a need to ensure it adapts well. The page header and card heights need reevaluation, balancing everything to fit comfortably, considering desktop sizes too. Overall, I’m planning for effective layout across devices!**Calculating mobile card dimensions**

I’m looking at the mobile card and figuring out the necessary padding and text height. First, I add the top label height of 15, plus margins and header elements, leading to a total of about 369 for the card. When I move to the stage, it builds up to about 840. The screenshot at 375x800 would still allow for slight scrolling. I need to ensure everything feels balanced and functional across different screen sizes!**Considering CSS additions**

I’m thinking about adding a simple top-line accent to my CSS. I could use this snippet: `.main-card::before {content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,rgba(255,122,166,.6),transparent);}`. It seems like `main-card::after` isn't needed, and I want to include a header badge along with an ambient gradient for the background. This should create a nice visual effect!**Calculating layout dimensions**

I'm working through some CSS dimensions for a layout. Starting with a desktop button size of 192x74 and a mobile size of 178x70. I’m figuring the total page height at 1280x800 width, adding up components like the header, card, and optional footer. It turns out that without a footer, I’m left with 582 for the body. I’m also considering a centered layout with certain padding, and whether to keep footer labels for clarity versus simplicity. This is shaping up nicely!**Refining layout dimensions**

I'm calculating the layout for a 375x800 page. The body has specific padding, while the header's height is 38 with margins. I’m working on the main mobile content, totaling up sections like headers and paragraphs. I need to ensure everything fits well within the height constraints, aiming for around 800 pixels in total. 

There’s consideration for potentially hiding the footer on mobile and using media queries for animations, ensuring accessibility for users who prefer reduced motion. It looks like everything’s aligning nicely!**Examining CSS Sibling Selection**

I'm working with CSS for sibling selection! I have an example: when a checkbox with the ID `like-toggle` is checked, it triggers an animation for a floating heart. It seems like the animation overrides the default continuous floating effect, and once the toggle is unchecked, the original animation resumes. I also wonder if I can animate the scale of orbit rings without affecting the rotation. Listing animations separately, I plan to apply them based on the checkbox's state!**Adjusting Animation on Toggle**

I’m looking at how toggling changes the animation list. When checked, the `orbit-spin` animation may restart, which is fine. I think I can add a slight delay to `ring-kick` when the checkbox is checked. I also plan to set a baseline transformation for the outer ring to center it, incorporating translation into the keyframe `orbit-spin`. The animation for clicking will blend spinning and scaling effects, making everything pulse nicely while maintaining slower rotations for the middle orbit. It’s an engaging design!**Optimizing ARIA for accessibility**

I’m focusing on wrapping `aria-hidden=true` on individual decorative spans or their parent, so that screen readers won't get confused by the SVG elements. The label text should only include "Like." I’ll set the SVG to be `aria-hidden` as well. I think wrapping everything within a `<span class="effect-layer" aria-hidden="true">` makes sense, so only the essential content is visible. I’ll also ensure that `aria-hidden` is applied to each decorative span accordingly.**Evaluating user interface instructions**

I'm thinking about the layout, keeping the left width to a max of 370 pixels so everything fits nicely with 10px margins. The developer mentioned that games should start with a self-playing demo, but since this isn't a game, maybe we need clear instructions like "Click or press a key to start." The user requested a click, so I might add a label like "Click the heart" for clarity. No keyboard hints needed.**Considering button animation**

I’m thinking about the button's design. When clicked, it should change color and have a "shine" effect. The floating hearts animation I have is interesting and should possibly be included as well. The default animation is set to "floaty," lasting 5 seconds and repeating infinitely. I’ll need to ensure that both the color change and animations feel cohesive and enhance user experience. Let's explore how to implement this effectively!**Considering button effects**

I’m exploring how button effects work with repeated checks. When I toggle the checkbox, the same CSS animation triggers for both states. After the animation, the checked style remains, but unchecking will revert it. If I check the box again after toggling it off, a new animation starts. I won’t use any JavaScript, and there shouldn't be hover issues on mobile. I'll ensure that the focus management via label works correctly across browsers like Firefox and Chrome. Let's code this logically!**Analyzing input focus and visibility**

I’m noticing that the input is still focusable, and the selector `input:focus-visible + .like-button` functions properly. It seems there might be some issues with pointer events. Although the input itself isn't clickable, the label is. If the `#like-toggle` element has specific styles like `width:1px; height:1px;`, it appears hidden with techniques like clipping and positioning. The overflow settings also get my attention. Overall, it looks like I’m working through card clipping and positioning elements correctly.**Reviewing responsive design**

I'm looking at the potential issue with the `@media(max-width:900px)` rule, which might cause the page to stack on a viewport of 900x800. The card height seems to be around 520 plus 300, which is manageable. On desktop at 1280, things appear unaffected at page 1050 width. I just need to ensure that the body's width is at 100%, with a minimum width of 320px, so 375 should be fine. Let's finalize this!