+<style>
+  html, body { height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,sans-serif; background:linear-gradient(180deg,#0f172a,#1e293b); color:#e2e8f0; }
+  .wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:1rem; padding:1.75rem; text-align:center; }
+  .kicker { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:#64748b; }
+  .emoji { font-size:3.5rem; line-height:1; }
+  h1 { margin:0; font-size:1.5rem; }
+  p { margin:0; max-width:30ch; color:#cbd5e1; line-height:1.5; font-size:0.95rem; min-height:4.4em; }
+  .dots { display:flex; gap:0.4rem; }
+  .dot { width:0.5rem; height:0.5rem; border-radius:9999px; background:#334155; transition:background 0.2s; }
+  .dot.on { background:#818cf8; }
+  button { padding:0.6rem 1.5rem; border-radius:9999px; border:0; background:#6366f1; color:#fff; font-weight:600; font-size:0.9rem; cursor:pointer; transition:transform 0.1s; }
+  button:active { transform:scale(0.97); }
+</style>
+<div class="wrap">
+  <span class="kicker">What is a Liveloop artifact?</span>
+  <div class="emoji" id="emoji">💡</div>
+  <h1 id="title"></h1>
+  <p id="body"></p>
+  <div class="dots" id="dots"></div>
+  <button id="next">Next</button>
+</div>
+<script>
+(function(){
+  var STAGES = [
+    { emoji:'💡', title:'It starts as an idea', body:'A game, a quiz, a tool, a greeting — anything small and interactive you want to share.' },
+    { emoji:'✍️', title:'You build it', body:'Write HTML/JS, React, or markdown — or just fill in a template. No setup, no deploy step.' },
+    { emoji:'🚀', title:'Publish to the feed', body:'It runs live inside a safe sandbox. People scroll past and actually play with it, right there.' },
+    { emoji:'🔀', title:'Anyone can remix it', body:'One tap copies it into their library to change and republish — with credit linked back to you.' }
+  ];
+  var i = 0;
+  var emoji = document.getElementById('emoji');
+  var title = document.getElementById('title');
+  var body = document.getElementById('body');
+  var dots = document.getElementById('dots');
+  var next = document.getElementById('next');
+  STAGES.forEach(function(){
+    var d = document.createElement('span');
+    d.className = 'dot';
+    dots.appendChild(d);
+  });
+  function render(){
+    var s = STAGES[i];
+    emoji.textContent = s.emoji;
+    title.textContent = s.title;
+    body.textContent = s.body;
+    Array.prototype.forEach.call(dots.children, function(d, n){
+      d.className = 'dot' + (n === i ? ' on' : '');
+    });
+    next.textContent = i === STAGES.length - 1 ? 'Start over' : 'Next';
+  }
+  next.addEventListener('click', function(){
+    i = (i + 1) % STAGES.length;
+    render();
+  });
+  render();
+})();
+</script>