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
3 min 10 s
Cost
$0.0082
Output tokens
16,333
Spent thinking
9,154 tokens
Speed
87.9 tok/s
Console errors
0
First token after
4.1 s
First visible text after
2 min 7 s
Prompt tokens
356
Code size
20.1 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-6-luna
Reasoning sent
{"effort":"xhigh"}
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 · 755 lines

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Big Feelings — Pure CSS Like Button</title>
<style>
  :root {
    color-scheme: dark;
    --ink: #0b0a12;
    --panel: #171421;
    --muted: #a5a0b5;
    --pink: #ff5aa8;
    --coral: #ff816e;
    --orbital-size: 490px;
  }

  * { box-sizing: border-box; }

  html, body { min-height: 100%; }

  body {
    margin: 0;
    color: #faf8ff;
    background:
      radial-gradient(ellipse at 82% 20%, rgba(116, 47, 117, .18), transparent 37%),
      radial-gradient(ellipse at 12% 83%, rgba(42, 66, 114, .13), transparent 34%),
      var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .state-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .page {
    width: min(1160px, calc(100% - 64px));
    margin: 0 auto;
    padding: 25px 0 18px;
  }

  .topbar, .brand, .footer, .proof, .eyebrow {
    display: flex;
    align-items: center;
  }

  .topbar {
    height: 43px;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .brand { gap: 11px; }

  .brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 11px;
    color: #ff86c0;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    font-size: 20px;
    box-shadow: 0 5px 20px rgba(255, 69, 159, .1);
  }

  .brand-name {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .17em;
  }

  .brand-sub {
    margin-top: 3px;
    color: #858094;
    font-size: 9px;
    letter-spacing: .14em;
  }

  .top-badge {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    color: #c1bbce;
    background: rgba(255, 255, 255, .035);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
  }

  .top-badge b { color: #ff82ba; }

  .card {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 27px;
    background:
      radial-gradient(ellipse at 78% 49%, rgba(126, 49, 105, .22), transparent 36%),
      linear-gradient(112deg, #191724 0%, #171421 52%, #171321 100%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image: radial-gradient(rgba(255,255,255,.17) .6px, transparent .6px);
    background-size: 15px 15px;
    mask-image: linear-gradient(90deg, transparent 32%, black 100%);
  }

  .card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 52%;
    width: 1px;
    background: linear-gradient(transparent, rgba(255,255,255,.065) 20%, rgba(255,255,255,.035) 80%, transparent);
  }

  .copy {
    position: absolute;
    z-index: 2;
    top: 78px;
    left: 72px;
    width: min(440px, 43%);
  }

  .eyebrow {
    gap: 9px;
    margin: 0 0 25px;
    color: #c5bfce;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .19em;
  }

  .eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff71b3;
    box-shadow: 0 0 12px rgba(255, 90, 168, .8);
  }

  h1 {
    margin: 0;
    font-size: clamp(49px, 5.05vw, 65px);
    line-height: .96;
    font-weight: 680;
    letter-spacing: -.065em;
  }

  h1 span {
    color: #ff82b8;
    background: linear-gradient(100deg, #ff84bc, #ff9b83 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .intro {
    max-width: 385px;
    margin: 22px 0 0;
    color: #aaa5b7;
    font-size: 14px;
    line-height: 1.75;
  }

  .proof {
    gap: 13px;
    margin-top: 37px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.09);
  }

  .avatars { display: flex; padding-left: 3px; }
  .avatar {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-left: -3px;
    border: 2px solid #191724;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
  }
  .avatar:nth-child(1) { background: #b66788; }
  .avatar:nth-child(2) { background: #6e7da6; }
  .avatar:nth-child(3) { background: #d78965; }
  .avatar:nth-child(4) { background: #8d74b2; }

  .proof-copy {
    color: #8f899d;
    font-size: 11px;
    line-height: 1.5;
  }

  .count-number { color: #f2edf8; font-weight: 750; }
  .count-on { display: none; }

  .fine-print {
    margin-top: 33px;
    color: #676274;
    font-size: 9px;
    letter-spacing: .15em;
  }

  .art {
    --orbital-size: 490px;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 24px;
    width: 520px;
    height: 560px;
    transform: translateY(-50%);
  }

  .orbital, .orbit, .aura, .burst, .shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
  }

  .orbital {
    width: var(--orbital-size);
    height: var(--orbital-size);
    transform: translate(-50%, -50%);
  }

  .aura {
    width: 57%;
    height: 57%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 65, 151, .25), rgba(153, 63, 192, .1) 43%, transparent 72%);
    filter: blur(8px);
    animation: aura-breathe 4s ease-in-out infinite;
  }

  .orbit {
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .orbit-a {
    width: 97%;
    height: 97%;
    border: 1px dashed rgba(255, 255, 255, .13);
    animation: orbit-spin 42s linear infinite;
  }

  .orbit-a::before, .orbit-a::after, .orbit-b::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff85b8;
    box-shadow: 0 0 13px #ff61a7;
  }

  .orbit-a::before { top: 14%; left: 15%; }
  .orbit-a::after { right: 8%; bottom: 28%; width: 4px; height: 4px; background: #ffe7a4; }

  .orbit-b {
    width: 79%;
    height: 79%;
    border: 1px solid rgba(255, 255, 255, .08);
    transform: translate(-50%, -50%) rotate(-18deg);
    animation: orbit-reverse 34s linear infinite;
  }

  .orbit-b::before {
    right: 5%;
    top: 39%;
    width: 5px;
    height: 5px;
    background: #9b8cff;
    box-shadow: 0 0 12px #9183ff;
  }

  .orbit-c {
    width: 64%;
    height: 64%;
    border: 1px dotted rgba(255, 125, 185, .18);
    animation: orbit-spin 27s linear infinite reverse;
  }

  .orbit-d {
    width: 112%;
    height: 112%;
    border: 1px solid rgba(255, 255, 255, .035);
  }

  .shockwave {
    width: 142px;
    height: 142px;
    border: 1px solid rgba(255, 119, 180, .88);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.48);
    box-shadow: 0 0 20px rgba(255, 77, 157, .3), inset 0 0 20px rgba(255, 77, 157, .12);
  }

  .shockwave-two {
    border-color: rgba(255, 197, 129, .7);
    width: 168px;
    height: 168px;
  }

  .burst {
    width: 100%;
    height: 100%;
  }

  .particle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--color);
    font-size: var(--size);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0 15px currentColor;
  }

  .p1  { --x: -175px; --y: -82px; --rot: -32deg; --size: 27px; --color: #ff76b4; --delay: 0ms; }
  .p2  { --x: 165px; --y: -135px; --rot: 30deg; --size: 24px; --color: #ffd58c; --delay: 30ms; }
  .p3  { --x: -195px; --y: 12px; --rot: -55deg; --size: 19px; --color: #b6a1ff; --delay: 55ms; }
  .p4  { --x: 190px; --y: 45px; --rot: 45deg; --size: 28px; --color: #ff81bd; --delay: 80ms; }
  .p5  { --x: -145px; --y: 150px; --rot: -25deg; --size: 23px; --color: #ffbc7c; --delay: 15ms; }
  .p6  { --x: 135px; --y: 175px; --rot: 34deg; --size: 20px; --color: #c5a1ff; --delay: 45ms; }
  .p7  { --x: -68px; --y: -205px; --rot: -14deg; --size: 21px; --color: #ffd987; --delay: 75ms; }
  .p8  { --x: 92px; --y: -190px; --rot: 22deg; --size: 29px; --color: #ff6cae; --delay: 20ms; }
  .p9  { --x: -205px; --y: -105px; --rot: -40deg; --size: 15px; --color: #ffdc91; --delay: 100ms; }
  .p10 { --x: 202px; --y: -58px; --rot: 44deg; --size: 17px; --color: #a99bff; --delay: 65ms; }
  .p11 { --x: -92px; --y: 66px; --rot: -18deg; --size: 18px; --color: #ff83ba; --delay: 120ms; }
  .p12 { --x: 100px; --y: 91px; --rot: 24deg; --size: 23px; --color: #ffd38d; --delay: 105ms; }
  .p13 { --x: -76px; --y: 194px; --rot: -28deg; --size: 17px; --color: #b9a2ff; --delay: 90ms; }
  .p14 { --x: 82px; --y: 205px; --rot: 18deg; --size: 25px; --color: #ff74b6; --delay: 50ms; }
  .p15 { --x: 22px; --y: -215px; --rot: 8deg; --size: 16px; --color: #ffbc7c; --delay: 130ms; }
  .p16 { --x: -212px; --y: 70px; --rot: -48deg; --size: 23px; --color: #ff87be; --delay: 25ms; }

  .like-button {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
    border: 1px solid rgba(255, 147, 198, .42);
    border-radius: 50%;
    color: #ff8bc2;
    background: linear-gradient(145deg, #282031, #171521 72%);
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, .025),
      0 0 0 11px rgba(255, 127, 187, .13),
      0 18px 55px rgba(0, 0, 0, .4),
      inset 0 1px 0 rgba(255,255,255,.12);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, filter .25s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .like-button::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: inherit;
  }

  .like-button:hover { filter: brightness(1.18); }

  .like-button:active {
    transform: translate(-50%, -50%) scale(.88) rotate(-7deg);
  }

  .heart {
    grid-area: 1 / 1;
    font-family: Arial, sans-serif;
    font-size: 74px;
    line-height: 1;
    transition: opacity .24s ease, transform .4s cubic-bezier(.2, 1.7, .4, 1);
  }

  .heart-outline { transform: scale(1); }
  .heart-filled { opacity: 0; transform: scale(.3) rotate(-25deg); }

  .action-label {
    position: absolute;
    top: calc(50% + 102px);
    left: 50%;
    min-width: 125px;
    color: #ffb6d3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .23em;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .action-label .state-on { display: none; color: #ffd18b; }

  .microline {
    position: absolute;
    top: calc(50% + 128px);
    left: 50%;
    color: #8f899f;
    font-size: 10px;
    letter-spacing: .02em;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .sticker {
    position: absolute;
    z-index: 1;
    top: 69px;
    right: 10px;
    display: grid;
    width: 68px;
    height: 68px;
    place-content: center;
    border: 1px solid rgba(255, 221, 158, .45);
    border-radius: 50%;
    color: #ffe4a8;
    background: rgba(33, 28, 38, .75);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .12em;
    text-align: center;
    transform: rotate(11deg);
    box-shadow: 0 0 25px rgba(255, 209, 139, .08);
  }

  .footer {
    justify-content: space-between;
    padding: 15px 3px 0;
    color: #686476;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .13em;
  }

  .footer span:last-child { color: #9c94a9; }

  #like-toggle:focus-visible ~ .page .like-button {
    outline: 3px solid #fff0f7;
    outline-offset: 8px;
  }

  #like-toggle:checked ~ .page .like-button {
    color: white;
    border-color: rgba(255, 211, 232, .8);
    background: linear-gradient(145deg, #ff76b5, #ee438c 65%, #db4c99);
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, .035),
      0 0 0 11px rgba(255, 127, 187, .35),
      0 0 40px rgba(255, 72, 153, .56),
      0 20px 60px rgba(0, 0, 0, .42),
      inset 0 1px 0 rgba(255,255,255,.45);
    animation: button-impact .72s cubic-bezier(.2, .8, .3, 1.4) both;
  }

  #like-toggle:checked ~ .page .heart-outline {
    opacity: 0;
    transform: scale(.35) rotate(20deg);
  }

  #like-toggle:checked ~ .page .heart-filled {
    opacity: 1;
    transform: scale(1) rotate(0);
  }

  #like-toggle:checked ~ .page .action-label .state-off { display: none; }
  #like-toggle:checked ~ .page .action-label .state-on { display: inline; }
  #like-toggle:checked ~ .page .count-off { display: none; }
  #like-toggle:checked ~ .page .count-on { display: inline; }

  #like-toggle:checked ~ .page .shockwave {
    animation: shockwave 900ms cubic-bezier(.15, .7, .3, 1) both;
  }

  #like-toggle:checked ~ .page .shockwave-two {
    animation-delay: 105ms;
    animation-duration: 1050ms;
  }

  #like-toggle:checked ~ .page .particle {
    animation: particle-pop 930ms cubic-bezier(.12, .72, .28, 1) var(--delay) both;
  }

  #like-toggle:checked ~ .page .orbit-a {
    animation: orbit-chaos 2.5s cubic-bezier(.15, .6, .25, 1) both;
  }

  #like-toggle:checked ~ .page .orbit-b {
    animation: orbit-chaos-reverse 2.1s cubic-bezier(.15, .6, .25, 1) both;
  }

  #like-toggle:checked ~ .page .orbit-c {
    animation: orbit-chaos 1.8s cubic-bezier(.15, .6, .25, 1) both;
  }

  @keyframes button-impact {
    0%   { transform: translate(-50%, -50%) scale(1) rotate(0); }
    19%  { transform: translate(-50%, -50%) scale(1.25) rotate(-12deg); }
    37%  { transform: translate(-50%, -50%) scale(.82) rotate(9deg); }
    56%  { transform: translate(-50%, -50%) scale(1.13) rotate(-5deg); }
    75%  { transform: translate(-50%, -50%) scale(.96) rotate(3deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  }

  @keyframes shockwave {
    0%   { opacity: .95; transform: translate(-50%, -50%) scale(.48); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  }

  @keyframes particle-pop {
    0%   { opacity: 0; transform: translate(0, 0) scale(.12) rotate(0); }
    16%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--rot)); }
  }

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

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

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

  @keyframes orbit-chaos-reverse {
    from { transform: translate(-50%, -50%) rotate(-18deg); }
    to { transform: translate(-50%, -50%) rotate(-738deg); }
  }

  @keyframes aura-breathe {
    0%, 100% { opacity: .74; transform: translate(-50%, -50%) scale(.94); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  }

  @media (max-width: 760px) {
    :root { --orbital-size: min(327px, calc(100vw - 70px)); }

    .page {
      width: calc(100% - 30px);
      padding: 17px 0 20px;
    }

    .topbar { margin-bottom: 14px; }
    .brand-sub { display: none; }
    .top-badge { padding: 7px 9px; font-size: 8px; }

    .card {
      display: flex;
      min-height: 0;
      flex-direction: column;
      border-radius: 22px;
    }

    .card::after { display: none; }

    .copy {
      position: relative;
      top: auto;
      left: auto;
      width: auto;
      max-width: none;
      padding: 32px 27px 0;
    }

    .eyebrow { margin-bottom: 18px; font-size: 9px; }

    h1 {
      font-size: clamp(42px, 11vw, 54px);
      line-height: .97;
    }

    .intro {
      max-width: 410px;
      margin-top: 16px;
      font-size: 13px;
      line-height: 1.65;
    }

    .proof { margin-top: 22px; padding-top: 15px; }
    .fine-print { margin-top: 20px; font-size: 8px; }

    .art {
      --orbital-size: min(327px, calc(100vw - 70px));
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
      height: 330px;
      flex: none;
      margin-top: -2px;
      transform: none;
    }

    .burst { transform: scale(.76); transform-origin: center; }
    .like-button { width: 112px; height: 112px; }
    .heart { font-size: 64px; }
    .action-label { top: calc(50% + 88px); }
    .microline { top: calc(50% + 112px); }
    .sticker { top: 12px; right: 15px; width: 57px; height: 57px; font-size: 7px; }
    .footer { font-size: 8px; }
  }

  @media (max-width: 410px) {
    .topbar { height: 38px; }
    .brand-name { font-size: 10px; }
    .top-badge { letter-spacing: .08em; }
    .copy { padding-right: 22px; padding-left: 22px; }
    .art { height: 310px; }
    .avatar { width: 25px; height: 25px; }
    .proof-copy { font-size: 10px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
</style>
</head>
<body>
  <input class="state-input" id="like-toggle" type="checkbox" aria-label="Like this">

  <div class="page">
    <header class="topbar">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true">✳</div>
        <div>
          <div class="brand-name">TINY INTERACTIONS</div>
          <div class="brand-sub">A SMALL STUDY IN BIG FEELINGS</div>
        </div>
      </div>
      <div class="top-badge"><b>PURE CSS</b> &nbsp;·&nbsp; ZERO JS</div>
    </header>

    <main class="card">
      <section class="copy">
        <p class="eyebrow"><span class="eyebrow-dot"></span> A MICRO-INTERACTION STUDY</p>
        <h1>A little<br>button.<br><span>Big feelings.</span></h1>
        <p class="intro">One tiny tap, an unreasonable amount of joy. Go on—make somebody’s day (even if it’s your own).</p>

        <div class="proof">
          <div class="avatars" aria-hidden="true">
            <span class="avatar">M</span><span class="avatar">J</span>
            <span class="avatar">A</span><span class="avatar">+</span>
          </div>
          <div class="proof-copy">
            <span class="count-number count-off">1,284</span>
            <span class="count-number count-on">1,285</span>
            little bursts of love today
          </div>
        </div>

        <div class="fine-print">NO SERVERS WERE HARMED IN THIS ANIMATION.</div>
      </section>

      <div class="art" aria-label="Interactive like button">
        <div class="orbital">
          <div class="aura"></div>
          <div class="orbit orbit-d"></div>
          <div class="orbit orbit-a"></div>
          <div class="orbit orbit-b"></div>
          <div class="orbit orbit-c"></div>

          <div class="shockwave"></div>
          <div class="shockwave shockwave-two"></div>

          <div class="burst" aria-hidden="true">
            <span class="particle p1">♥</span>
            <span class="particle p2">✦</span>
            <span class="particle p3">✧</span>
            <span class="particle p4">♥</span>
            <span class="particle p5">✦</span>
            <span class="particle p6">♥</span>
            <span class="particle p7">✧</span>
            <span class="particle p8">♥</span>
            <span class="particle p9">·</span>
            <span class="particle p10">✦</span>
            <span class="particle p11">♥</span>
            <span class="particle p12">✧</span>
            <span class="particle p13">✦</span>
            <span class="particle p14">♥</span>
            <span class="particle p15">✦</span>
            <span class="particle p16">✧</span>
          </div>

          <label class="like-button" for="like-toggle" title="Send a like">
            <span class="heart heart-outline" aria-hidden="true">♡</span>
            <span class="heart heart-filled" aria-hidden="true">♥</span>
          </label>

          <div class="action-label">
            <span class="state-off">SEND SOME LOVE</span>
            <span class="state-on">LOVE SENT!</span>
          </div>
          <div class="microline">click the heart to unleash</div>
        </div>

        <div class="sticker" aria-hidden="true">ONLY<br>GOOD<br>VIBES</div>
      </div>
    </main>

    <footer class="footer">
      <span>INTERACTION STUDY &nbsp; / &nbsp; 01</span>
      <span>TAP THE HEART. FEEL THE FEELINGS.</span>
    </footer>
  </div>
</body>
</html>
Reasoning trace (9,154 tokens)
**Designing interactive CSS button**

I'm thinking that I need to create a polished HTML code block for a button with crazy animations, but only using pure CSS, no JavaScript. I want to include a functional checkbox toggle with a label that animates on click. It’s essential that the visual design is sophisticated, perhaps with a dark gradient and centered hero card. I should ensure the checkbox is visually hidden, and the animations trigger appropriately based on its state. Let's explore the possibilities!**Creating a pure CSS widget**

I'm trying to build a highly designed interactive "LOVE / SIGNAL" widget without JavaScript. It should have crazy animations like a heart burst, orbiting mini hearts, and sparkles, all triggered by a checked checkbox using pure CSS keyframes. I need to change text and add confetti effects with CSS pseudo-elements. I'll use spans for HTML structure, and maybe even a Unicode heart character or CSS shapes instead of SVG to keep it purely CSS. Let's hammer out these details!**Creating a CSS heart shape**

I want to build a heart shape using CSS by transforming a rotated square and adding some pseudo circles. I could use the text ♡ and change it to ♥ with spans, but there might be font issues. A common approach is to use two overlapping circles and a square with pseudo elements. For example, I can set the heart shape with CSS like this: `.heart { position: relative; width: 28px; height: 28px; transform: rotate(-45deg);}` Then add the circles with `::before` and `::after` to complete the shape. Let's refine this!**Considering heart design in CSS**

I'm thinking about how to create a heart shape with CSS. I could use the common heart code with positioning, standard dimensions, and transforming it with rotation. I might rotate it -45 degrees or 45 degrees to get the desired look, like a heart pointing down. I'm also considering using glyph hearts with font styling and transitions for a more attractive design. For the layout, a cosmic vibe with a centered card and engaging button could really stand out!**Creating animated fireworks effect**

I'm brainstorming how to create an engaging animation around a central button, maybe like fireworks! I want to use pure CSS to make heart-shaped particles that explode outward, with varying colors and positions. I think I need custom properties for the particle spans—like coordinates for their motion. The keyframe animation can transform them into a burst while fading out as they expand. When the button is checked, the animation starts, and I could even have a reverse effect when it's unchecked. Let's keep it visually fun!**Exploring button animation toggling**

I'm considering how the button's animation can reset each time it's checked or unchecked. When a user clicks, it will trigger a transition effect. This allows for a dynamic interaction where multiple clicks will restart the animation fresh each time. It’s great to think about how this keeps the user engaged! I need to make sure the transitions feel smooth and responsive to enhance the overall experience. Let's keep refining this!**Designing an interactive button**

I’m thinking about creating a visually appealing like button that’s obvious to click, labeled "CLICK TO UNLEASH." It could be placed on a centered card that’s 900 pixels wide. The button should display an unfilled heart and a count, possibly 1,284. I want to use CSS to swap the displayed count when clicked, with a nice transition effect. The layout may include a title saying: “A little LOVE goes a long way,” in a warm, inviting style.**Creating a two-part composition**

I'm considering a two-part layout for the design. The header will showcase "TINY INTERACTIONS / NO. 04" along with a CSS-only code badge. The main panel should be around 1080 by 570 pixels with a dark purple background. On the left, I’ll place text saying "A little love goes a long way," along with social metrics, while the right will feature a bright pink dynamic button with "LIKE." There will also be animated particles for some flair!**Designing a circular stack**

I’m planning to create a circular stack for the visual design, with the main ".stage-art" positioned absolutely to the right, around 70 pixels from the top and centered vertically. The size will be 510 by 510 pixels, featuring ambient rings and rotating orbits with little hearts. The core button will be 150 by 150 pixels, while the outer ring will have a specific thickness. The button will be circular, 124 pixels, with a pink gradient and a white heart icon. Below the button, I want to add the text: "Click to make it a little louder."**Evaluating art specifications**

I need to consider that the available width for the art is 520, with a center radius of 220, ensuring everything fits within the edges. It looks like I've noted that the burst spans don’t require a child element, which simplifies things. Additionally, I must set the opacity to 0 at rest, so it seems I'm on the right track. Let’s make sure all these details align as I move forward!**Considering animation options**

I’m thinking about how unclickable triggers could activate an animation. So, with each click, the animation gets a full reset. It seems like the user will probably just test the click once, which is good. I could implement it using an `<input id>` and label for the click, making the text visible. If it's a checkbox, I might not even need JavaScript! This approach seems straightforward and effective.**Considering CSS dimensions and scaling**

I’m working on CSS dimensions for visual elements. For desktop, I can set the width of `.art` to min(520px, 100%) and height to 520px. On mobile, it will be width 100% and height 360px. I plan to define a CSS custom property called `--art-d` for dimensions, ensuring compatibility with various devices. I’m also thinking about scaling particles and using transform properties creatively. There’s a lot to figure out here, especially with child overrides and CSS calc functionalities!**Adjusting burst scaling and positioning**

I’m exploring how to set custom coordinates for burst elements, considering using relative units like em or percentages. For mobile, I plan to scale down the burst container to transform and manage particle displacement with a scale of 0.78. This means the actual burst icons will also be reduced. I’ll ensure that on desktop, there’s no scaling effect. For mobile, I’ll adjust it to 0.77, making for better centering, especially since art dimensions vary!**Calculating CSS dimensions**

I’m considering if `calc(-50% + -178px)` is valid in CSS. Typically, `calc(50% + 10px)` or `calc(50% + -10px)` seems fine. I think it’s safer to store `x` as either positive or negative, using something like `calc(-50% + var(--x))`. If `var` is negative, would `calc(-50% + -178px)` be recognized? The grammar does allow sums with `+` and `-`. Then, I’ll use `translate(var(--x), var(--y))` without needing a center point.**Managing particle overflow**

I'm thinking about how tiny particles might get clipped by the `.art` area. Even if the card has an overflow hidden, the art area itself doesn’t have that setting. The `.burst` extends outwards around ±210, while the art dimension is 520, so that works. For the visual shell, I'm positioning it absolutely at the center with width based on `var(--orbital-size)`. On the desktop, it’s about 490 total. I’ll also consider adjusting captions and buttons for mobile, including animation considerations to maintain the center during transforms.**Designing a micro-interaction**

I'm thinking about how to design a micro-interaction with the phrase "Give the internet a little love." It could have a fun title with three lines: "A little button. Big feelings." The first line is captivating and is intended to convey a sense of joy. 

The structure is important, so I'll make the font size noticeable and ensure visual balance. The footer adds a lovely touch, giving context to the interaction with some engaging call-to-action text.**Calculating design parameters**

I'm working through some design specs involving particles and their scaling. I need to ensure that the visuals align neatly with the dimensions provided. For mobile, adjusting the burst scale and transforming the art helps optimize the layout. The total page height might end up around 740 pixels, which seems acceptable. I’ll make sure to keep everything responsive and avoid any horizontal overflow, just as the user requested. Overall, I think I'm on the right track!**Considering card design**

I'm thinking about the card's border and how to add that glow effect using `::after` for the top left. The copy should sit on a higher z-index to make sure it overlaps nicely with the art without any issues. The footer needs to be included as well. On mobile, the body background should be all set. Since this is pure CSS, there's no need for JavaScript here. Let's make sure there’s no text after the block too!