auto-save: 2026-07-25T03:33:15 (4 files) — data/challenges.json data/costlog.jsonl data/artifacts/18bd2744dce2/ data/artifacts/e65340723412/

300eaa895f3d352b90f920c5511f89413f680cf4 · 2026-07-25 03:33:22 -0700 · Steve Abrams
Files touched

A data/artifacts/18bd2744dce2/claude-code.html
A data/artifacts/18bd2744dce2/claude-code.png
A data/artifacts/18bd2744dce2/gpt.html
A data/artifacts/18bd2744dce2/gpt.png
A data/artifacts/18bd2744dce2/grok.html
A data/artifacts/18bd2744dce2/grok.png
A data/artifacts/18bd2744dce2/kimi.html
A data/artifacts/18bd2744dce2/kimi.png
A data/artifacts/18bd2744dce2/qwen25-7b.html
A data/artifacts/18bd2744dce2/qwen25-7b.png
A data/artifacts/e65340723412/claude-code.html
A data/artifacts/e65340723412/claude-code.png
A data/artifacts/e65340723412/gemma3-12b.html
A data/artifacts/e65340723412/gemma3-12b.png
A data/artifacts/e65340723412/gpt.html
A data/artifacts/e65340723412/gpt.png
A data/artifacts/e65340723412/grok.html
A data/artifacts/e65340723412/grok.png
A data/artifacts/e65340723412/hermes3-8b.html
A data/artifacts/e65340723412/hermes3-8b.png
A data/artifacts/e65340723412/hf-qwen-coder-32b.html
A data/artifacts/e65340723412/hf-qwen-coder-32b.png
A data/artifacts/e65340723412/kimi.html
A data/artifacts/e65340723412/kimi.png
A data/artifacts/e65340723412/qwen25-7b.html
A data/artifacts/e65340723412/qwen25-7b.png
A data/artifacts/e65340723412/qwen3-14b.html
A data/artifacts/e65340723412/qwen3-14b.png
M data/challenges.json
M data/costlog.jsonl
Diff

commit 300eaa895f3d352b90f920c5511f89413f680cf4
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jul 25 03:33:22 2026 -0700

    auto-save: 2026-07-25T03:33:15 (4 files) — data/challenges.json data/costlog.jsonl data/artifacts/18bd2744dce2/ data/artifacts/e65340723412/
---
 data/artifacts/18bd2744dce2/claude-code.html       |  435 +++++++
 data/artifacts/18bd2744dce2/claude-code.png        |  Bin 0 -> 95880 bytes
 data/artifacts/18bd2744dce2/gpt.html               |  942 ++++++++++++++
 data/artifacts/18bd2744dce2/gpt.png                |  Bin 0 -> 223377 bytes
 data/artifacts/18bd2744dce2/grok.html              |  697 +++++++++++
 data/artifacts/18bd2744dce2/grok.png               |  Bin 0 -> 27571 bytes
 data/artifacts/18bd2744dce2/kimi.html              |  601 +++++++++
 data/artifacts/18bd2744dce2/kimi.png               |  Bin 0 -> 53714 bytes
 data/artifacts/18bd2744dce2/qwen25-7b.html         |  139 +++
 data/artifacts/18bd2744dce2/qwen25-7b.png          |  Bin 0 -> 25926 bytes
 data/artifacts/e65340723412/claude-code.html       |  516 ++++++++
 data/artifacts/e65340723412/claude-code.png        |  Bin 0 -> 65086 bytes
 data/artifacts/e65340723412/gemma3-12b.html        |  310 +++++
 data/artifacts/e65340723412/gemma3-12b.png         |  Bin 0 -> 42264 bytes
 data/artifacts/e65340723412/gpt.html               | 1309 ++++++++++++++++++++
 data/artifacts/e65340723412/gpt.png                |  Bin 0 -> 323054 bytes
 data/artifacts/e65340723412/grok.html              | 1104 +++++++++++++++++
 data/artifacts/e65340723412/grok.png               |  Bin 0 -> 33057 bytes
 data/artifacts/e65340723412/hermes3-8b.html        |  228 ++++
 data/artifacts/e65340723412/hermes3-8b.png         |  Bin 0 -> 10263 bytes
 data/artifacts/e65340723412/hf-qwen-coder-32b.html |  241 ++++
 data/artifacts/e65340723412/hf-qwen-coder-32b.png  |  Bin 0 -> 27548 bytes
 data/artifacts/e65340723412/kimi.html              |  718 +++++++++++
 data/artifacts/e65340723412/kimi.png               |  Bin 0 -> 34549 bytes
 data/artifacts/e65340723412/qwen25-7b.html         |  125 ++
 data/artifacts/e65340723412/qwen25-7b.png          |  Bin 0 -> 36236 bytes
 data/artifacts/e65340723412/qwen3-14b.html         |  348 ++++++
 data/artifacts/e65340723412/qwen3-14b.png          |  Bin 0 -> 55348 bytes
 data/challenges.json                               |  234 ++--
 data/costlog.jsonl                                 |    6 +
 30 files changed, 7870 insertions(+), 83 deletions(-)

diff --git a/data/artifacts/18bd2744dce2/claude-code.html b/data/artifacts/18bd2744dce2/claude-code.html
new file mode 100644
index 0000000..54ae5c3
--- /dev/null
+++ b/data/artifacts/18bd2744dce2/claude-code.html
@@ -0,0 +1,435 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Color Story — Designer Wallcoverings</title>
+<style>
+  /* ============ DESIGN TOKENS ============ */
+  :root{
+    --bg:#f4ede2;            /* warm ivory ground */
+    --surface:#fbf6ee;
+    --ink:#241c15;          /* deep near-black warm */
+    --ink-soft:#463a2c;
+    --muted:#9c8d78;        /* muted stone */
+    --accent:#a8642f;       /* single metallic-bronze accent */
+    --accent-2:#c79a5a;     /* soft gilt */
+    --line:rgba(36,28,21,.16);
+    --line-soft:rgba(36,28,21,.08);
+    --shadow:0 24px 60px rgba(36,28,21,.16);
+    --shadow-soft:0 10px 34px rgba(36,28,21,.10);
+    --ease:cubic-bezier(.22,1,.36,1);
+    --serif:'Didot','Bodoni MT','Playfair Display','Cormorant Garamond',Georgia,serif;
+    --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+  }
+
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{height:100%}
+  body{
+    background:#e9e0d2;
+    font-family:var(--sans);
+    color:var(--ink);
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    min-height:100vh;
+    padding:16px;
+  }
+
+  /* ============ STAGE (1080x1080 scaled) ============ */
+  .stage-wrap{
+    width:min(1080px,calc(100vh - 32px),calc(100vw - 32px));
+    aspect-ratio:1/1;
+  }
+  .stage{
+    position:relative;
+    width:1080px;height:1080px;
+    transform-origin:top left;
+    background:var(--bg);
+    overflow:hidden;
+    box-shadow:var(--shadow);
+    border-radius:10px;
+  }
+
+  /* ambient drifting ground */
+  .stage::before{
+    content:"";
+    position:absolute;inset:0;
+    background:
+      radial-gradient(120% 90% at 15% 8%, rgba(199,154,90,.16), transparent 55%),
+      radial-gradient(120% 90% at 88% 96%, rgba(168,100,47,.12), transparent 55%);
+    animation:drift 22s ease-in-out infinite alternate;
+    pointer-events:none;
+  }
+  @keyframes drift{from{transform:translate3d(-1.5%,-1%,0) scale(1.04)}to{transform:translate3d(1.5%,1.5%,0) scale(1.10)}}
+
+  /* ============ TOP BAR / WORDMARK LOCKUP ============ */
+  .topbar{
+    position:absolute;top:0;left:0;right:0;
+    height:96px;
+    display:flex;align-items:center;justify-content:space-between;
+    padding:0 48px;
+    z-index:40;
+    pointer-events:none;
+  }
+  .lockup{max-width:230px;line-height:1.06}
+  .wordmark{
+    font-family:var(--serif);
+    font-weight:600;
+    font-size:23px;
+    letter-spacing:.18em;
+    text-transform:uppercase;
+    color:var(--ink);
+  }
+  .wordmark .amp{color:var(--accent)}
+  .sub{
+    font-family:var(--sans);
+    font-size:10px;
+    letter-spacing:.34em;
+    text-transform:uppercase;
+    color:var(--muted);
+    margin-top:6px;
+  }
+  .season-chip{
+    font-family:var(--sans);
+    font-size:11px;
+    letter-spacing:.22em;
+    text-transform:uppercase;
+    color:var(--accent);
+    border:1px solid var(--line);
+    padding:8px 14px;
+    border-radius:40px;
+    background:rgba(251,246,238,.6);
+  }
+
+  /* ============ CAROUSEL ============ */
+  .track{
+    position:absolute;inset:0;
+    display:flex;
+    transition:transform .7s var(--ease);
+    will-change:transform;
+    cursor:grab;
+  }
+  .track.dragging{transition:none;cursor:grabbing}
+  .slide{
+    position:relative;
+    flex:0 0 1080px;
+    height:1080px;
+    padding:150px 96px 128px;
+    display:flex;
+    flex-direction:column;
+  }
+
+  .kicker{
+    font-size:12px;letter-spacing:.32em;text-transform:uppercase;
+    color:var(--muted);
+  }
+
+  /* ---- COVER ---- */
+  .cover{justify-content:center;align-items:flex-start}
+  .cover .kicker{color:var(--accent)}
+  .cover h1{
+    font-family:var(--serif);
+    font-weight:500;
+    font-size:96px;
+    line-height:.98;
+    letter-spacing:-.5px;
+    margin:26px 0 8px;
+    color:var(--ink);
+  }
+  .cover h1 em{font-style:italic;color:var(--accent)}
+  .cover .lede{
+    font-size:20px;line-height:1.6;color:var(--ink-soft);
+    max-width:560px;margin-top:22px;
+  }
+  .cover .rule{
+    width:120px;height:1px;background:var(--line);margin:40px 0 30px;
+  }
+  .cover .chip-row{display:flex;gap:14px;flex-wrap:wrap}
+  .swatch-mini{
+    width:96px;height:96px;border-radius:8px;
+    border:1px solid var(--line-soft);
+    box-shadow:var(--shadow-soft);
+  }
+
+  /* ---- HUE SLIDES ---- */
+  .hue{justify-content:flex-start}
+  .hue .index{
+    font-family:var(--serif);font-style:italic;
+    font-size:22px;color:var(--muted);
+  }
+  .swatch-hero{
+    margin-top:34px;
+    height:420px;width:100%;
+    border-radius:14px;
+    border:1px solid var(--line-soft);
+    box-shadow:var(--shadow);
+    position:relative;
+    overflow:hidden;
+  }
+  /* woven tonal texture over the swatch, color-carried, no letters */
+  .swatch-hero::after{
+    content:"";position:absolute;inset:0;
+    background:
+      repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 3px, transparent 3px 7px),
+      repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 3px, transparent 3px 7px);
+    mix-blend-mode:soft-light;
+  }
+  .hue-name{
+    font-family:var(--serif);
+    font-weight:500;
+    font-size:60px;
+    line-height:1;
+    margin-top:40px;
+    color:var(--ink);
+  }
+  .hue-meta{
+    display:flex;align-items:baseline;gap:16px;margin-top:14px;
+  }
+  .hue-hex{
+    font-family:var(--sans);font-size:12px;letter-spacing:.22em;
+    text-transform:uppercase;color:var(--accent);
+  }
+  .hue-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
+  .hue-family{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+  .tip{
+    margin-top:26px;
+    padding-left:22px;
+    border-left:2px solid var(--accent);
+    max-width:640px;
+  }
+  .tip .tip-label{
+    font-size:11px;letter-spacing:.3em;text-transform:uppercase;
+    color:var(--muted);display:block;margin-bottom:8px;
+  }
+  .tip p{font-size:20px;line-height:1.62;color:var(--ink-soft)}
+
+  /* ---- CTA ---- */
+  .cta{justify-content:center;align-items:center;text-align:center}
+  .cta .palette-strip{
+    display:flex;width:520px;height:140px;border-radius:12px;overflow:hidden;
+    box-shadow:var(--shadow);border:1px solid var(--line-soft);margin-bottom:44px;
+  }
+  .cta .palette-strip > div{flex:1}
+  .cta h2{
+    font-family:var(--serif);font-weight:500;font-size:66px;line-height:1.02;
+    color:var(--ink);
+  }
+  .cta h2 em{font-style:italic;color:var(--accent)}
+  .cta p{font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:560px;margin:24px 0 40px}
+  .cta .btn{
+    font-family:var(--sans);font-size:13px;letter-spacing:.24em;text-transform:uppercase;
+    color:var(--surface);background:var(--accent);
+    padding:20px 46px;border-radius:44px;border:none;
+    box-shadow:var(--shadow-soft);cursor:pointer;
+    transition:transform .2s var(--ease),background .2s var(--ease);
+  }
+  .cta .btn:hover{transform:translateY(-2px);background:#8e5325}
+  .cta .handle{margin-top:30px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
+
+  /* entrance stagger */
+  .slide.active .anim{animation:fadeUp .7s var(--ease) both}
+  .slide.active .anim:nth-child(2){animation-delay:.09s}
+  .slide.active .anim:nth-child(3){animation-delay:.18s}
+  .slide.active .anim:nth-child(4){animation-delay:.27s}
+  .slide.active .anim:nth-child(5){animation-delay:.36s}
+  .slide.active .anim:nth-child(6){animation-delay:.45s}
+  @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+  /* ============ NAV: dots + arrows ============ */
+  .dots{
+    position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
+    display:flex;gap:12px;z-index:40;
+  }
+  .dots button{
+    width:9px;height:9px;border-radius:50%;border:1px solid var(--accent);
+    background:transparent;padding:0;cursor:pointer;
+    transition:all .3s var(--ease);
+  }
+  .dots button.on{background:var(--accent);width:26px;border-radius:6px}
+  .arrow{
+    position:absolute;top:50%;transform:translateY(-50%);
+    width:60px;height:60px;border-radius:50%;
+    background:rgba(251,246,238,.82);border:1px solid var(--line);
+    color:var(--ink);font-size:22px;cursor:pointer;z-index:40;
+    display:flex;align-items:center;justify-content:center;
+    box-shadow:var(--shadow-soft);
+    transition:transform .2s var(--ease),opacity .2s var(--ease);
+  }
+  .arrow:hover{transform:translateY(-50%) scale(1.06)}
+  .arrow.prev{left:32px}
+  .arrow.next{right:32px}
+  .arrow[disabled]{opacity:.28;cursor:default}
+
+  .pageno{
+    position:absolute;bottom:52px;right:52px;z-index:40;
+    font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);
+  }
+</style>
+</head>
+<body>
+  <div class="stage-wrap">
+    <div class="stage" id="stage">
+
+      <!-- TOP BAR -->
+      <header class="topbar">
+        <div class="lockup">
+          <div class="wordmark">Designer<br>Wallcoverings</div>
+          <div class="sub">Est. Interiors</div>
+        </div>
+        <div class="season-chip" id="seasonChip">Autumn 2026</div>
+      </header>
+
+      <!-- SLIDES injected here -->
+      <div class="track" id="track"></div>
+
+      <button class="arrow prev" id="prev" aria-label="Previous">‹</button>
+      <button class="arrow next" id="next" aria-label="Next">›</button>
+      <nav class="dots" id="dots"></nav>
+      <div class="pageno" id="pageno">01 / 05</div>
+
+    </div>
+  </div>
+
+<script>
+/* ============================================================
+   EDITABLE PALETTE — change these and the whole story rebuilds
+   ============================================================ */
+const STORY = {
+  season: "Autumn 2026",
+  paletteName: ["Terracotta", "Sage"],   // rendered as "Terracotta & Sage"
+  lede: "A grounded, sun-warmed trio for rooms that feel collected, not decorated — earthen clay meets soft botanical calm.",
+  handle: "@designerwallcoverings",
+  hues: [
+    {
+      name: "Oatmeal",
+      hex: "#d9ccb4",
+      family: "Warm Neutral",
+      tip: "Wrap an entire study or hallway to build a quiet, tonal envelope — it flatters oak, brass, and low evening light."
+    },
+    {
+      name: "Celadon",
+      hex: "#9fb094",
+      family: "Muted Botanical",
+      tip: "Ideal on a single feature wall behind linen upholstery; its greyed green cools a south-facing bedroom without going cold."
+    },
+    {
+      name: "Terracotta",
+      hex: "#b56a44",
+      family: "Earthen Clay",
+      tip: "Use in a dining room or powder room where candlelight can deepen it — pair with unlacquered brass and cream millwork."
+    }
+  ]
+};
+
+/* ---------- build slides ---------- */
+const track = document.getElementById('track');
+document.getElementById('seasonChip').textContent = STORY.season;
+
+function coverSlide(){
+  const mini = STORY.hues.map(h=>`<div class="swatch-mini" style="background:${h.hex}"></div>`).join('');
+  return `<section class="slide cover active" data-i="0">
+    <div class="kicker anim">${STORY.season} · Color Story</div>
+    <h1 class="anim">${STORY.paletteName[0]}<br><em>&amp;</em> ${STORY.paletteName[1]}</h1>
+    <p class="lede anim">${STORY.lede}</p>
+    <div class="rule anim"></div>
+    <div class="chip-row anim">${mini}</div>
+  </section>`;
+}
+
+function hueSlide(h,i){
+  return `<section class="slide hue" data-i="${i+1}">
+    <div class="index anim">No. 0${i+1} of three</div>
+    <div class="swatch-hero anim" style="background:${h.hex}"></div>
+    <div class="hue-name anim">${h.name}</div>
+    <div class="hue-meta anim">
+      <span class="hue-hex">${h.hex}</span>
+      <span class="hue-dot"></span>
+      <span class="hue-family">${h.family}</span>
+    </div>
+    <div class="tip anim">
+      <span class="tip-label">Room Use</span>
+      <p>${h.tip}</p>
+    </div>
+  </section>`;
+}
+
+function ctaSlide(){
+  const strip = STORY.hues.map(h=>`<div style="background:${h.hex}"></div>`).join('');
+  return `<section class="slide cta" data-i="4">
+    <div class="palette-strip anim">${strip}</div>
+    <div class="kicker anim">${STORY.paletteName[0]} &amp; ${STORY.paletteName[1]}</div>
+    <h2 class="anim">Bring the story<br><em>home</em></h2>
+    <p class="anim">Order hand-cut samples of all three hues and see how the light in your own rooms shapes the palette.</p>
+    <button class="btn anim">Request Samples</button>
+    <div class="handle anim">${STORY.handle}</div>
+  </section>`;
+}
+
+track.innerHTML = coverSlide()
+  + STORY.hues.map(hueSlide).join('')
+  + ctaSlide();
+
+const slides = [...track.children];
+const N = slides.length;
+
+/* ---------- dots ---------- */
+const dotsWrap = document.getElementById('dots');
+slides.forEach((_,i)=>{
+  const b=document.createElement('button');
+  if(i===0)b.classList.add('on');
+  b.addEventListener('click',()=>go(i));
+  dotsWrap.appendChild(b);
+});
+const dots=[...dotsWrap.children];
+const pageno=document.getElementById('pageno');
+const prev=document.getElementById('prev');
+const next=document.getElementById('next');
+
+let idx=0;
+function render(){
+  track.style.transform = `translateX(${-idx*1080}px)`;
+  slides.forEach((s,i)=>s.classList.toggle('active',i===idx));
+  dots.forEach((d,i)=>d.classList.toggle('on',i===idx));
+  pageno.textContent = `0${idx+1} / 0${N}`;
+  prev.disabled = idx===0;
+  next.disabled = idx===N-1;
+}
+function go(i){ idx=Math.max(0,Math.min(N-1,i)); render(); }
+prev.addEventListener('click',()=>go(idx-1));
+next.addEventListener('click',()=>go(idx+1));
+document.addEventListener('keydown',e=>{
+  if(e.key==='ArrowRight')go(idx+1);
+  if(e.key==='ArrowLeft')go(idx-1);
+});
+
+/* ---------- drag / swipe ---------- */
+let startX=0,dx=0,dragging=false;
+function down(x){dragging=true;startX=x;dx=0;track.classList.add('dragging');}
+function move(x){ if(!dragging)return; dx=x-startX; track.style.transform=`translateX(${-idx*1080+dx}px)`; }
+function up(){
+  if(!dragging)return;
+  dragging=false;track.classList.remove('dragging');
+  if(Math.abs(dx)>110){ go(idx + (dx<0?1:-1)); } else { render(); }
+}
+const stage=document.getElementById('stage');
+stage.addEventListener('mousedown',e=>{e.preventDefault();down(e.clientX);});
+window.addEventListener('mousemove',e=>move(e.clientX));
+window.addEventListener('mouseup',up);
+stage.addEventListener('touchstart',e=>down(e.touches[0].clientX),{passive:true});
+stage.addEventListener('touchmove',e=>move(e.touches[0].clientX),{passive:true});
+stage.addEventListener('touchend',up);
+
+/* ---------- scale 1080 stage to fit container ---------- */
+function fit(){
+  const wrap=document.querySelector('.stage-wrap');
+  const s=wrap.clientWidth/1080;
+  stage.style.transform=`scale(${s})`;
+  wrap.style.height=wrap.clientWidth+'px';
+}
+window.addEventListener('resize',fit);
+fit();
+render();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/18bd2744dce2/claude-code.png b/data/artifacts/18bd2744dce2/claude-code.png
new file mode 100644
index 0000000..96dbdb5
Binary files /dev/null and b/data/artifacts/18bd2744dce2/claude-code.png differ
diff --git a/data/artifacts/18bd2744dce2/gpt.html b/data/artifacts/18bd2744dce2/gpt.html
new file mode 100644
index 0000000..1b96fc2
--- /dev/null
+++ b/data/artifacts/18bd2744dce2/gpt.html
@@ -0,0 +1,942 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Designer Wallcoverings — Seasonal Color Story</title>
+<style>
+:root {
+  /* Design tokens */
+  --bg: #0d0d0f;
+  --surface: #17171c;
+  --ink: #f5f2ea;
+  --muted: #8a8578;
+  --accent: #c9a961; /* metallic gold */
+  --accent-deep: #7d6a45;
+  --line: rgba(201, 169, 97, 0.35);
+  --shadow-soft: 0 22px 45px rgba(3, 3, 4, 0.8);
+
+  --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
+  --font-sans: "Avenir Next", "Century Gothic", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
+
+  --fs-caption: 12px;
+  --fs-body: 16px;
+  --fs-lead: 21px;
+  --fs-h3: 28px;
+  --fs-h2: 38px;
+  --fs-h1: 50px;
+
+  --radius-lg: 18px;
+  --radius-pill: 999px;
+
+  --ease-swift: cubic-bezier(.22,.9,.24,1);
+  --ease-hero: cubic-bezier(.22,1,.36,1);
+
+  --carousel-size: 1080px;
+
+  /* Palette-specific tokens (easy to edit) */
+  --story-name: "Terracotta & Sage";
+  --swatch-oatmeal: #e5ddcf;
+  --swatch-oatmeal-deep: #c0b39a;
+  --swatch-celadon: #c6d9c7;
+  --swatch-celadon-deep: #8fa78f;
+  --swatch-terracotta: #b96446;
+  --swatch-terracotta-deep: #8a4931;
+}
+
+/* Basic reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-sans);
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+/* Frame container to mimic Instagram square */
+.app-frame {
+  width: min(100vw, var(--carousel-size));
+  height: min(100vw, var(--carousel-size));
+  background: radial-gradient(circle at top, #1e1e25 0, var(--bg) 52%);
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Main card */
+.card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 0 0, #24232b 0, var(--surface) 40%, #121217 100%);
+  border-radius: 26px;
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Fixed header */
+.header {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 26px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.wordmark-lockup {
+  max-width: 220px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wordmark-main {
+  font-family: var(--font-display);
+  font-size: 15px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+.wordmark-tagline {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.header-meta {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  font-family: var(--font-sans);
+}
+
+.meta-pill {
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 6px 12px;
+  border-radius: var(--radius-pill);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(120deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+}
+
+.meta-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 0%, #fff, var(--accent) 55%, var(--accent-deep) 100%);
+  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.35);
+}
+
+/* Carousel */
+.carousel {
+  position: relative;
+  flex: 1;
+  padding: 20px 26px 26px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Slides viewport */
+.carousel-viewport {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background:
+    radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 55%),
+    radial-gradient(circle at bottom, rgba(0, 0, 0, 0.8), transparent 60%);
+}
+
+/* Slides track */
+.carousel-track {
+  display: flex;
+  width: 500%; /* 5 slides */
+  height: 100%;
+  transition: transform 520ms var(--ease-swift);
+}
+
+/* Individual slide */
+.slide {
+  width: 20%;
+  height: 100%;
+  padding: 38px 46px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
+  column-gap: 50px;
+  row-gap: 28px;
+  align-items: center;
+  color: var(--ink);
+}
+
+/* Layout adjustments per slide */
+.slide.is-cover {
+  grid-template-columns: 1.3fr 1.3fr;
+}
+
+.slide-left,
+.slide-right {
+  min-width: 0;
+}
+
+/* Text blocks */
+.kicker {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 10px;
+}
+
+.story-name {
+  font-family: var(--font-display);
+  font-size: var(--fs-h1);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.1;
+  margin-bottom: 18px;
+}
+
+.story-subtitle {
+  font-family: var(--font-sans);
+  font-size: var(--fs-lead);
+  color: rgba(245, 242, 234, 0.82);
+  max-width: 26ch;
+  line-height: 1.5;
+}
+
+.slide-heading {
+  font-family: var(--font-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  line-height: 1.08;
+  margin-bottom: 12px;
+}
+
+.slide-descriptor {
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  color: rgba(245, 242, 234, 0.78);
+  line-height: 1.6;
+  max-width: 34ch;
+}
+
+.slide-meta-label {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-top: 30px;
+}
+
+.slide-meta-value {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+/* Swatch blocks */
+.swatch-panel {
+  position: relative;
+  border-radius: 18px;
+  padding: 22px;
+  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.04), transparent 60%),
+              radial-gradient(circle at 110% 100%, rgba(0, 0, 0, 0.85), transparent 65%);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow:
+    0 28px 80px rgba(0, 0, 0, 0.85),
+    0 0 0 1px rgba(0, 0, 0, 0.7);
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  row-gap: 18px;
+}
+
+.swatch-grid {
+  position: relative;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Oatmeal composition */
+.swatch-oatmeal .swatch-grid {
+  background: conic-gradient(from 140deg,
+    var(--swatch-oatmeal) 0 42%,
+    var(--swatch-oatmeal-deep) 42% 68%,
+    var(--surface) 68% 100%);
+}
+
+.swatch-oatmeal .swatch-layer-1,
+.swatch-oatmeal .swatch-layer-2 {
+  position: absolute;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+}
+
+.swatch-oatmeal .swatch-layer-1 {
+  inset: 14% 36% 38% 8%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.02));
+}
+
+.swatch-oatmeal .swatch-layer-2 {
+  inset: 52% 10% 10% 40%;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.2));
+}
+
+/* Celadon composition */
+.swatch-celadon .swatch-grid {
+  background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.32), transparent 52%),
+              radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.85), transparent 65%),
+              linear-gradient(135deg, var(--swatch-celadon), var(--swatch-celadon-deep));
+}
+
+.swatch-celadon .swatch-band {
+  position: absolute;
+  inset: 26% 6% 54% 6%;
+  border-radius: 999px;
+  border: 1px solid rgba(245, 242, 234, 0.35);
+  background: linear-gradient(90deg, rgba(19, 23, 21, 0.9), rgba(33, 48, 36, 0.1));
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
+}
+
+.swatch-celadon .swatch-tile {
+  position: absolute;
+  inset: 50% 54% 10% 10%;
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
+  border: 1px solid rgba(255, 255, 255, 0.38);
+}
+
+/* Terracotta composition */
+.swatch-terracotta .swatch-grid {
+  background:
+    linear-gradient(160deg, var(--swatch-terracotta-deep) 0, var(--swatch-terracotta) 45%, #f4e2c3 90%);
+}
+
+.swatch-terracotta .swatch-arch {
+  position: absolute;
+  left: 16%;
+  right: 36%;
+  bottom: -6%;
+  top: 24%;
+  border-radius: 999px 999px 0 0;
+  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 65%),
+              linear-gradient(180deg, rgba(64, 32, 18, 0.9), rgba(34, 12, 6, 0.8));
+  box-shadow: 0 24px 50px rgba(32, 10, 4, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.swatch-terracotta .swatch-sun {
+  position: absolute;
+  width: 92px;
+  height: 92px;
+  border-radius: 50%;
+  right: 14%;
+  top: 14%;
+  background: radial-gradient(circle at 32% 20%, #fff7e6, #f1c88b 55%, #c7854f 100%);
+  box-shadow: 0 0 0 1px rgba(255, 248, 232, 0.4), 0 18px 40px rgba(124, 54, 24, 0.7);
+}
+
+/* Swatch caption */
+.swatch-caption-top {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(245, 242, 234, 0.64);
+}
+
+.swatch-caption-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.swatch-name {
+  font-family: var(--font-display);
+  font-size: 17px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+.swatch-designer {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* CTA Slide */
+.cta-panel {
+  position: relative;
+  border-radius: 18px;
+  padding: 26px 26px 24px;
+  background:
+    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.18), transparent 52%),
+    radial-gradient(circle at 110% 100%, rgba(0, 0, 0, 0.9), transparent 60%),
+    linear-gradient(135deg, #15151b, #0b0b0d);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.85);
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
+  column-gap: 40px;
+  row-gap: 24px;
+  align-items: center;
+}
+
+.cta-headline {
+  font-family: var(--font-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  line-height: 1.1;
+  margin-bottom: 14px;
+}
+
+.cta-copy {
+  font-family: var(--font-sans);
+  font-size: var(--fs-body);
+  color: rgba(245, 242, 234, 0.8);
+  line-height: 1.6;
+  max-width: 34ch;
+}
+
+.cta-footnote {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-top: 18px;
+}
+
+.cta-button-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 16px;
+}
+
+.cta-button-main {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  padding: 11px 24px;
+  border-radius: var(--radius-pill);
+  border: 1px solid rgba(255, 248, 232, 0.6);
+  color: #1a1409;
+  background: linear-gradient(135deg, #f7e6bf, #cfa460);
+  box-shadow:
+    0 14px 40px rgba(0, 0, 0, 0.8),
+    0 0 0 1px rgba(76, 58, 24, 0.35);
+  cursor: pointer;
+  transition:
+    transform 320ms var(--ease-swift),
+    box-shadow 320ms var(--ease-swift),
+    background 280ms var(--ease-swift);
+}
+
+.cta-button-main:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 18px 50px rgba(0, 0, 0, 0.9),
+    0 0 0 1px rgba(93, 71, 33, 0.5);
+  background: linear-gradient(135deg, #ffefc9, #d9af69);
+}
+
+.cta-button-main:active {
+  transform: translateY(0);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.75),
+    0 0 0 1px rgba(93, 71, 33, 0.6);
+}
+
+.cta-button-secondary {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* CTA visual stack */
+.cta-swatch-stack {
+  position: relative;
+  height: 220px;
+}
+
+.cta-tile {
+  position: absolute;
+  inset: 16% 18% 10% 10%;
+  border-radius: 18px;
+  background: linear-gradient(140deg, var(--swatch-oatmeal), #f9f1e4);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.85);
+}
+
+.cta-tile::before,
+.cta-tile::after {
+  content: "";
+  position: absolute;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+}
+
+.cta-tile::before {
+  inset: 12px 60px 62px 12px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04));
+}
+
+.cta-tile::after {
+  inset: 54px 12px 12px 120px;
+  background: radial-gradient(circle at 40% 10%, rgba(255, 255, 255, 0.75), transparent 60%);
+}
+
+.cta-swatch-pill-1,
+.cta-swatch-pill-2 {
+  position: absolute;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.cta-swatch-pill-1 {
+  inset: 8% 48% 60% 4%;
+  background: linear-gradient(120deg, var(--swatch-celadon), var(--swatch-celadon-deep));
+}
+
+.cta-swatch-pill-2 {
+  inset: 32% 6% 20% 52%;
+  background: linear-gradient(140deg, var(--swatch-terracotta), var(--swatch-terracotta-deep));
+}
+
+/* Carousel controls */
+.carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 4px 0;
+}
+
+.dots {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition:
+    border-color 260ms var(--ease-swift),
+    transform 260ms var(--ease-swift),
+    box-shadow 260ms var(--ease-swift);
+}
+
+.dot::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  background: radial-gradient(circle at 30% 0%, var(--accent), transparent 65%);
+  opacity: 0;
+  transition: opacity 260ms var(--ease-swift);
+}
+
+.dot.is-active {
+  transform: translateY(-1px);
+  border-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
+}
+
+.dot.is-active::before {
+  opacity: 1;
+}
+
+.dot:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.slide-index-label {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* Navigation arrows */
+.nav-arrows {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-button {
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.22), transparent 70%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--ink);
+  transition:
+    background 260ms var(--ease-swift),
+    transform 260ms var(--ease-swift),
+    box-shadow 260ms var(--ease-swift),
+    border-color 260ms var(--ease-swift);
+}
+
+.nav-button svg {
+  width: 11px;
+  height: 11px;
+  display: block;
+}
+
+.nav-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.78);
+  border-color: rgba(255, 255, 255, 0.45);
+}
+
+.nav-button:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
+}
+
+.nav-button:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Responsive tweaks */
+@media (max-width: 900px) {
+  .slide,
+  .cta-panel {
+    grid-template-columns: minmax(0, 1.2fr);
+  }
+  .slide {
+    padding: 30px 26px;
+  }
+  .cta-panel {
+    padding: 22px 20px 20px;
+  }
+  .cta-button-group {
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .app-frame {
+    padding: 14px;
+  }
+  .header {
+    padding: 16px 18px 12px;
+  }
+  .wordmark-main {
+    font-size: 13px;
+  }
+  .story-name {
+    font-size: 38px;
+  }
+  .slide-heading,
+  .cta-headline {
+    font-size: 30px;
+  }
+  .slide {
+    padding: 26px 20px;
+  }
+}
+</style>
+</head>
+<body>
+<div class="app-frame">
+  <div class="card">
+    <header class="header">
+      <div class="wordmark-lockup">
+        <div class="wordmark-main">DESIGNER WALLCOVERINGS</div>
+        <div class="wordmark-tagline">Seasonal Color Story</div>
+      </div>
+      <div class="header-meta">
+        <span class="meta-pill">Autumn / Winter Edit</span>
+        <span class="meta-indicator" aria-hidden="true"></span>
+      </div>
+    </header>
+
+    <main class="carousel" aria-label="Seasonal wallcovering color story">
+      <div class="carousel-viewport">
+        <div class="carousel-track" id="carouselTrack">
+          <!-- Slide 1: Cover -->
+          <section class="slide is-cover" aria-roledescription="slide" aria-label="Cover — Color Story Overview">
+            <div class="slide-left">
+              <div class="kicker">Color Story</div>
+              <div class="story-name">Terracotta &amp; Sage</div>
+              <div class="story-subtitle">
+                A grounded palette of sun-baked terracotta, quiet celadon, and oat-silk neutrals for rooms that feel calm yet composed.
+              </div>
+              <div class="slide-meta-label">For</div>
+              <div class="slide-meta-value">Entryways · Dining · Reading Corners</div>
+            </div>
+            <div class="slide-right">
+              <div class="swatch-panel swatch-oatmeal" aria-hidden="true">
+                <div class="swatch-caption-top">The palette at a glance</div>
+                <div class="swatch-grid">
+                  <div class="swatch-layer-1"></div>
+                  <div class="swatch-layer-2"></div>
+                </div>
+                <div class="swatch-caption-bottom">
+                  <div class="swatch-name">Oatmeal · Celadon · Terracotta</div>
+                  <div class="swatch-designer">Muted, sunlit, tactile</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Slide 2: Oatmeal -->
+          <section class="slide" aria-roledescription="slide" aria-label="Oatmeal hue">
+            <div class="slide-left">
+              <div class="kicker">Hue I</div>
+              <div class="slide-heading">Oatmeal</div>
+              <p class="slide-descriptor">
+                A dry, woven neutral that softens light without dulling it. Use as a continuous wallcovering to quiet bold architecture and let art breathe.
+              </p>
+              <div class="slide-meta-label">Room-use tip</div>
+              <div class="slide-meta-value">Layer with linen &amp; warm metals in open-plan living.</div>
+            </div>
+            <div class="slide-right">
+              <div class="swatch-panel swatch-oatmeal">
+                <div class="swatch-caption-top">Textured neutral field</div>
+                <div class="swatch-grid">
+                  <div class="swatch-layer-1"></div>
+                  <div class="swatch-layer-2"></div>
+                </div>
+                <div class="swatch-caption-bottom">
+                  <div class="swatch-name">Oatmeal</div>
+                  <div class="swatch-designer">Spec’d by atelier&nbsp;No. 03</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Slide 3: Celadon -->
+          <section class="slide" aria-roledescription="slide" aria-label="Celadon hue">
+            <div class="slide-left">
+              <div class="kicker">Hue II</div>
+              <div class="slide-heading">Celadon</div>
+              <p class="slide-descriptor">
+                A whisper of sage with porcelain clarity. Ideal on a single architectural wall or library niche to bring an interior garden mood indoors.
+              </p>
+              <div class="slide-meta-label">Room-use tip</div>
+              <div class="slide-meta-value">Wrap windowless studies to invite a soft, northern light.</div>
+            </div>
+            <div class="slide-right">
+              <div class="swatch-panel swatch-celadon">
+                <div class="swatch-caption-top">Cool, quiet green</div>
+                <div class="swatch-grid">
+                  <div class="swatch-band"></div>
+                  <div class="swatch-tile"></div>
+                </div>
+                <div class="swatch-caption-bottom">
+                  <div class="swatch-name">Celadon</div>
+                  <div class="swatch-designer">Drawn for Studio&nbsp;Sage</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Slide 4: Terracotta -->
+          <section class="slide" aria-roledescription="slide" aria-label="Terracotta hue">
+            <div class="slide-left">
+              <div class="kicker">Hue III</div>
+              <div class="slide-heading">Terracotta</div>
+              <p class="slide-descriptor">
+                A kiln-fired clay that reads architectural, not rustic. Anchor a dining room or headboard wall, then temper with pale neutrals and smoked glass.
+              </p>
+              <div class="slide-meta-label">Room-use tip</div>
+              <div class="slide-meta-value">Frame passageways or arches for a sculpted, gallery feel.</div>
+            </div>
+            <div class="slide-right">
+              <div class="swatch-panel swatch-terracotta">
+                <div class="swatch-caption-top">Sun-warmed clay</div>
+                <div class="swatch-grid">
+                  <div class="swatch-arch"></div>
+                  <div class="swatch-sun"></div>
+                </div>
+                <div class="swatch-caption-bottom">
+                  <div class="swatch-name">Terracotta</div>
+                  <div class="swatch-designer">Mixed in Casa&nbsp;Atelier</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Slide 5: CTA -->
+          <section class="slide" aria-roledescription="slide" aria-label="Call to action">
+            <div class="slide-left">
+              <div class="cta-panel">
+                <div>
+                  <div class="kicker">Slide 5 · Edit this palette</div>
+                  <div class="cta-headline">Specify Your Own Story</div>
+                  <p class="cta-copy">
+                    Swap in your studio’s hues — adjust the tokens, export, and test as a carousel-ready moodboard before a single sample is ordered.
+                  </p>
+                  <div class="cta-footnote">Tokens · Swatches · Room notes</div>
+                </div>
+                <div class="cta-button-group">
+                  <button class="cta-button-main" type="button">
+                    Curate This Story
+                    <span aria-hidden="true">
+                      <svg viewBox="0 0 16 16">
+                        <path fill="none" stroke="#3b2a12" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" d="M4 3h8M8 3l4 4M12 3v8"/>
+                      </svg>
+                    </span>
+                  </button>
+                  <div class="cta-button-secondary">Edit :root hues to refresh the carousel</div>
+                </div>
+              </div>
+            </div>
+            <div class="slide-right">
+              <div class="cta-swatch-stack" aria-hidden="true">
+                <div class="cta-tile"></div>
+                <div class="cta-swatch-pill-1"></div>
+                <div class="cta-swatch-pill-2"></div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+
+      <div class="carousel-controls">
+        <div class="dots" role="tablist" aria-label="Select slide">
+          <button class="dot is-active" data-index="0" role="tab" aria-selected="true" aria-label="Slide 1"></button>
+          <button class="dot" data-index="1" role="tab" aria-selected="false" aria-label="Slide 2"></button>
+          <button class="dot" data-index="2" role="tab" aria-selected="false" aria-label="Slide 3"></button>
+          <button class="dot" data-index="3" role="tab" aria-selected="false" aria-label="Slide 4"></button>
+          <button class="dot" data-index="4" role="tab" aria-selected="false" aria-label="Slide 5"></button>
+        </div>
+        <div class="slide-index-label" id="slideLabel">01 / 05 · Terracotta &amp; Sage</div>
+        <div class="nav-arrows" aria-hidden="true">
+          <button class="nav-button" type="button" data-direction="-1">
+            <svg viewBox="0 0 16 16">
+              <path d="M10.2 3.5L5.8 8l4.4 4.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          <button class="nav-button" type="button" data-direction="1">
+            <svg viewBox="0 0 16 16">
+              <path d="M5.8 3.5L10.2 8 5.8 12.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+
+<script>
+(function () {
+  const track = document.getElementById("carouselTrack");
+  const dots = Array.from(document.querySelectorAll(".dot"));
+  const slideLabel = document.getElementById("slideLabel");
+  const navButtons = Array.from(document.querySelectorAll(".nav-button"));
+  const totalSlides = 5;
+  let currentIndex = 0;
+
+  const slideTitles = [
+    "Terracotta & Sage",
+    "Oatmeal",
+    "Celadon",
+    "Terracotta",
+    "Specify Your Own Story"
+  ];
+
+  function updateCarousel(index) {
+    currentIndex = (index + totalSlides) % totalSlides;
+    const offset = -currentIndex * 100 / totalSlides * totalSlides; // simplifies to -currentIndex*100
+    track.style.transform = "translateX(" + (-currentIndex * 100) + "%)";
+
+    dots.forEach((dot, i) => {
+      const active = i === currentIndex;
+      dot.classList.toggle("is-active", active);
+      dot.setAttribute("aria-selected", active ? "true" : "false");
+      dot.setAttribute("tabindex", active ? "0" : "-1");
+    });
+
+    const labelIndex = (currentIndex + 1).toString().padStart(2, "0");
+    const labelTotal = totalSlides.toString().padStart(2, "0");
+    slideLabel.textContent = labelIndex + " / " + labelTotal + " · " + slideTitles[currentIndex];
+  }
+
+  dots.forEach(dot => {
+    dot.addEventListener("click", () => {
+      const index = parseInt(dot.getAttribute("data-index"), 10);
+      updateCarousel(index);
+    });
+  });
+
+  navButtons.forEach(btn => {
+    btn.addEventListener("click", () => {
+      const dir = parseInt(btn.getAttribute("data-direction"), 10);
+      updateCarousel(currentIndex + dir);
+    });
+  });
+
+  // Keyboard navigation: left/right arrows
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowRight") {
+      updateCarousel(currentIndex + 1);
+    } else if (event.key === "ArrowLeft") {
+      updateCarousel(currentIndex - 1);
+    }
+  });
+
+  // Initialize ARIA tabindex
+  updateCarousel(0);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/18bd2744dce2/gpt.png b/data/artifacts/18bd2744dce2/gpt.png
new file mode 100644
index 0000000..5c6399e
Binary files /dev/null and b/data/artifacts/18bd2744dce2/gpt.png differ
diff --git a/data/artifacts/18bd2744dce2/grok.html b/data/artifacts/18bd2744dce2/grok.html
new file mode 100644
index 0000000..869f3bb
--- /dev/null
+++ b/data/artifacts/18bd2744dce2/grok.html
@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Terracotta &amp; Sage — Color Story</title>
+<style>
+:root {
+  --bg: #faf8f4;
+  --surface: #ffffff;
+  --ink: #1c1a17;
+  --muted: #9b948a;
+  --accent: #b0472e;
+  --accent-soft: #c65f38;
+  --jewel: #2f4c39;
+  --line: rgba(28, 26, 23, 0.12);
+  --shadow: 0 12px 40px rgba(28, 26, 23, 0.08);
+  --shadow-soft: 0 4px 16px rgba(28, 26, 23, 0.06);
+  --ease: cubic-bezier(.22, .9, .24, 1);
+  --ease-hero: cubic-bezier(.22, 1, .36, 1);
+  --serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif;
+  --sans: 'Avenir Next', 'Century Gothic', Futura, 'Helvetica Neue', sans-serif;
+  --hue-oatmeal: #d4c4a8;
+  --hue-celadon: #8fa890;
+  --hue-terracotta: #c45c3e;
+  --frame: 1080px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  background: #e8e4dc;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Compact wordmark lockup */
+.topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  padding: 18px 24px;
+  pointer-events: none;
+}
+.wordmark {
+  font-family: var(--serif);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+  max-width: 220px;
+  line-height: 1.3;
+  opacity: 0.85;
+}
+
+.app {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 56px 24px 40px;
+  gap: 28px;
+}
+
+/* Stage */
+.stage-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.carousel {
+  width: min(92vw, 540px);
+  aspect-ratio: 1 / 1;
+  position: relative;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  touch-action: pan-y;
+  user-select: none;
+  cursor: grab;
+}
+.carousel:active { cursor: grabbing; }
+
+.track {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: transform 0.65s var(--ease-hero);
+  will-change: transform;
+}
+
+.slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* —— Slide 1: Cover —— */
+.slide-cover {
+  background: var(--bg);
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 8%;
+}
+.cover-ornament {
+  width: 48px;
+  height: 1px;
+  background: var(--accent);
+  margin: 0 auto 28px;
+}
+.cover-kicker {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 18px;
+}
+.cover-title {
+  font-family: var(--serif);
+  font-size: clamp(36px, 8vw, 52px);
+  font-weight: 400;
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-bottom: 14px;
+}
+.cover-title em {
+  font-style: italic;
+  color: var(--accent);
+}
+.cover-sub {
+  font-family: var(--sans);
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 36px;
+}
+.cover-swatches {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+.cover-swatch {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+}
+.cover-season {
+  position: absolute;
+  bottom: 7%;
+  left: 0;
+  right: 0;
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--muted);
+  text-align: center;
+}
+
+/* —— Hue slides 2–4 —— */
+.slide-hue {
+  background: var(--bg);
+  padding: 0;
+}
+.hue-panel {
+  flex: 1;
+  display: grid;
+  grid-template-rows: 1.15fr 1fr;
+  height: 100%;
+}
+.swatch-field {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+/* CSS-drawn luxury swatch — layered planes, no letter labels */
+.swatch-field::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--swatch);
+}
+.swatch-field::after {
+  content: '';
+  position: absolute;
+  right: -8%;
+  bottom: -18%;
+  width: 58%;
+  height: 70%;
+  background: var(--swatch-deep);
+  opacity: 0.55;
+  border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%;
+  filter: blur(0.5px);
+}
+.swatch-sheen {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 42%, transparent 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+.swatch-edge {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: var(--line);
+  z-index: 2;
+}
+.hue-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 9% 10% 10%;
+  background: var(--bg);
+  gap: 14px;
+}
+.hue-label {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.hue-name {
+  font-family: var(--serif);
+  font-size: clamp(32px, 7vw, 44px);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: var(--ink);
+}
+.hue-rule {
+  width: 32px;
+  height: 1px;
+  background: var(--accent);
+  margin: 2px 0 4px;
+}
+.hue-tip {
+  font-family: var(--sans);
+  font-size: clamp(13px, 2.4vw, 15px);
+  line-height: 1.6;
+  color: var(--ink);
+  opacity: 0.78;
+  max-width: 34ch;
+}
+.hue-tip strong {
+  font-weight: 500;
+  color: var(--ink);
+  opacity: 1;
+}
+
+/* Per-hue tokens */
+.slide-oatmeal { --swatch: var(--hue-oatmeal); --swatch-deep: #b8a68a; }
+.slide-celadon { --swatch: var(--hue-celadon); --swatch-deep: #6f8a72; }
+.slide-terracotta { --swatch: var(--hue-terracotta); --swatch-deep: #9a3f28; }
+
+/* —— Slide 5: CTA —— */
+.slide-cta {
+  background: var(--ink);
+  color: var(--bg);
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 10%;
+}
+.cta-kicker {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-soft);
+  margin-bottom: 22px;
+}
+.cta-title {
+  font-family: var(--serif);
+  font-size: clamp(28px, 6.5vw, 40px);
+  font-weight: 400;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: #f5f2ea;
+  margin-bottom: 18px;
+  max-width: 16ch;
+}
+.cta-body {
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.65;
+  color: rgba(245, 242, 234, 0.62);
+  max-width: 28ch;
+  margin: 0 auto 32px;
+}
+.cta-btn {
+  display: inline-block;
+  font-family: var(--sans);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+  background: #f5f2ea;
+  border: 1px solid #f5f2ea;
+  padding: 14px 28px;
+  cursor: pointer;
+  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
+  text-decoration: none;
+}
+.cta-btn:hover {
+  background: transparent;
+  color: #f5f2ea;
+  border-color: rgba(245, 242, 234, 0.45);
+}
+.cta-palette-row {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 36px;
+}
+.cta-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid rgba(245, 242, 234, 0.15);
+}
+
+/* Dots */
+.dots {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--muted);
+  opacity: 0.35;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease);
+}
+.dot[aria-current="true"] {
+  opacity: 1;
+  background: var(--accent);
+  transform: scale(1.35);
+}
+
+/* Editable palette strip */
+.editor {
+  width: min(92vw, 540px);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  padding: 18px 20px 16px;
+}
+.editor-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 14px;
+}
+.editor-title {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.editor-note {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  opacity: 0.7;
+}
+.swatch-controls {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.control label {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink);
+  opacity: 0.7;
+}
+.control input[type="color"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 36px;
+  border: 1px solid var(--line);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 2px;
+}
+.control input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
+.control input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 1px;
+}
+.control input[type="color"]::-moz-color-swatch {
+  border: none;
+  border-radius: 1px;
+}
+
+.hint {
+  font-family: var(--sans);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  text-align: center;
+  opacity: 0.65;
+}
+
+@media (max-width: 480px) {
+  .topbar { padding: 14px 16px; }
+  .app { padding: 48px 12px 28px; }
+  .hue-copy { padding: 8% 8% 9%; }
+}
+</style>
+</head>
+<body>
+<header class="topbar" aria-label="Brand">
+  <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<main class="app">
+  <div class="stage-wrap">
+    <div class="carousel" id="carousel" role="region" aria-roledescription="carousel" aria-label="Terracotta and Sage color story">
+      <div class="track" id="track">
+
+        <!-- 1 Cover -->
+        <section class="slide slide-cover" aria-label="Cover">
+          <div class="cover-ornament"></div>
+          <p class="cover-kicker">Seasonal Color Story</p>
+          <h1 class="cover-title">Terracotta<br>&amp; <em>Sage</em></h1>
+          <p class="cover-sub">Autumn Atelier · Vol. IV</p>
+          <div class="cover-swatches" aria-hidden="true">
+            <span class="cover-swatch" id="cs-oat" style="background: var(--hue-oatmeal)"></span>
+            <span class="cover-swatch" id="cs-cel" style="background: var(--hue-celadon)"></span>
+            <span class="cover-swatch" id="cs-ter" style="background: var(--hue-terracotta)"></span>
+          </div>
+          <p class="cover-season">Three hues · Infinite rooms</p>
+        </section>
+
+        <!-- 2 Oatmeal -->
+        <section class="slide slide-hue slide-oatmeal" aria-label="Oatmeal">
+          <div class="hue-panel">
+            <div class="swatch-field">
+              <div class="swatch-sheen"></div>
+              <div class="swatch-edge"></div>
+            </div>
+            <div class="hue-copy">
+              <p class="hue-label">Hue 01 · Ground</p>
+              <h2 class="hue-name">Oatmeal</h2>
+              <div class="hue-rule"></div>
+              <p class="hue-tip"><strong>Room tip:</strong> Anchor a sunlit dining alcove — pair with raw linen drapery and unlacquered brass to let the grain of the paper breathe.</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- 3 Celadon -->
+        <section class="slide slide-hue slide-celadon" aria-label="Celadon">
+          <div class="hue-panel">
+            <div class="swatch-field">
+              <div class="swatch-sheen"></div>
+              <div class="swatch-edge"></div>
+            </div>
+            <div class="hue-copy">
+              <p class="hue-label">Hue 02 · Breath</p>
+              <h2 class="hue-name">Celadon</h2>
+              <div class="hue-rule"></div>
+              <p class="hue-tip"><strong>Room tip:</strong> Soften a powder room or study — the mineral green steadies terracotta accents and cools warm oak floors.</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- 4 Terracotta -->
+        <section class="slide slide-hue slide-terracotta" aria-label="Terracotta">
+          <div class="hue-panel">
+            <div class="swatch-field">
+              <div class="swatch-sheen"></div>
+              <div class="swatch-edge"></div>
+            </div>
+            <div class="hue-copy">
+              <p class="hue-label">Hue 03 · Ember</p>
+              <h2 class="hue-name">Terracotta</h2>
+              <div class="hue-rule"></div>
+              <p class="hue-tip"><strong>Room tip:</strong> Commit to a full feature wall behind a bed or banquette — the clay warmth holds candlelight and deepens after dusk.</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- 5 CTA -->
+        <section class="slide slide-cta" aria-label="Call to action">
+          <p class="cta-kicker">Request the story</p>
+          <h2 class="cta-title">Bring the atelier home</h2>
+          <p class="cta-body">Sample the Terracotta &amp; Sage collection — hand-finished wallcoverings, cut to order.</p>
+          <button type="button" class="cta-btn" id="ctaBtn">Order Samples</button>
+          <div class="cta-palette-row" aria-hidden="true">
+            <span class="cta-dot" id="cd-oat" style="background: var(--hue-oatmeal)"></span>
+            <span class="cta-dot" id="cd-cel" style="background: var(--hue-celadon)"></span>
+            <span class="cta-dot" id="cd-ter" style="background: var(--hue-terracotta)"></span>
+          </div>
+        </section>
+
+      </div>
+    </div>
+
+    <div class="dots" id="dots" role="tablist" aria-label="Slides"></div>
+    <p class="hint">Swipe or drag · Tap dots</p>
+  </div>
+
+  <aside class="editor" aria-label="Editable palette">
+    <div class="editor-head">
+      <span class="editor-title">Editable Palette</span>
+      <span class="editor-note">Live · updates swatches</span>
+    </div>
+    <div class="swatch-controls">
+      <div class="control">
+        <label for="c-oatmeal">Oatmeal</label>
+        <input type="color" id="c-oatmeal" value="#d4c4a8">
+      </div>
+      <div class="control">
+        <label for="c-celadon">Celadon</label>
+        <input type="color" id="c-celadon" value="#8fa890">
+      </div>
+      <div class="control">
+        <label for="c-terracotta">Terracotta</label>
+        <input type="color" id="c-terracotta" value="#c45c3e">
+      </div>
+    </div>
+  </aside>
+</main>
+
+<script>
+(function () {
+  const root = document.documentElement;
+  const track = document.getElementById('track');
+  const carousel = document.getElementById('carousel');
+  const dotsWrap = document.getElementById('dots');
+  const slides = Array.from(track.children);
+  const total = slides.length;
+  let index = 0;
+  let dragging = false;
+  let startX = 0;
+  let deltaX = 0;
+  let width = 0;
+
+  // Dots
+  slides.forEach((_, i) => {
+    const b = document.createElement('button');
+    b.className = 'dot';
+    b.type = 'button';
+    b.setAttribute('role', 'tab');
+    b.setAttribute('aria-label', 'Slide ' + (i + 1));
+    b.addEventListener('click', () => go(i));
+    dotsWrap.appendChild(b);
+  });
+  const dots = Array.from(dotsWrap.children);
+
+  function measure() {
+    width = carousel.getBoundingClientRect().width;
+  }
+
+  function go(i, animate) {
+    index = Math.max(0, Math.min(total - 1, i));
+    if (animate === false) track.style.transition = 'none';
+    else track.style.transition = '';
+    track.style.transform = 'translate3d(' + (-index * 100) + '%, 0, 0)';
+    dots.forEach((d, di) => d.setAttribute('aria-current', di === index ? 'true' : 'false'));
+    if (animate === false) {
+      void track.offsetHeight;
+      track.style.transition = '';
+    }
+  }
+
+  // Pointer / touch
+  function onDown(clientX) {
+    dragging = true;
+    startX = clientX;
+    deltaX = 0;
+    measure();
+    track.style.transition = 'none';
+  }
+  function onMove(clientX) {
+    if (!dragging) return;
+    deltaX = clientX - startX;
+    const pct = (deltaX / width) * 100;
+    track.style.transform = 'translate3d(' + (-index * 100 + pct) + '%, 0, 0)';
+  }
+  function onUp() {
+    if (!dragging) return;
+    dragging = false;
+    track.style.transition = '';
+    const threshold = width * 0.18;
+    if (deltaX < -threshold) go(index + 1);
+    else if (deltaX > threshold) go(index - 1);
+    else go(index);
+    deltaX = 0;
+  }
+
+  carousel.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0) return;
+    carousel.setPointerCapture(e.pointerId);
+    onDown(e.clientX);
+  });
+  carousel.addEventListener('pointermove', (e) => onMove(e.clientX));
+  carousel.addEventListener('pointerup', onUp);
+  carousel.addEventListener('pointercancel', onUp);
+  carousel.addEventListener('lostpointercapture', onUp);
+
+  // Keyboard
+  carousel.tabIndex = 0;
+  carousel.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight') go(index + 1);
+    if (e.key === 'ArrowLeft') go(index - 1);
+  });
+
+  window.addEventListener('resize', () => { measure(); go(index, false); });
+
+  // Editable palette
+  function hexToDeep(hex, factor) {
+    const h = hex.replace('#', '');
+    const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
+    let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+    r = Math.max(0, Math.round(r * factor));
+    g = Math.max(0, Math.round(g * factor));
+    b = Math.max(0, Math.round(b * factor));
+    return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
+  }
+
+  function bindColor(inputId, cssVar, deepSelector) {
+    const input = document.getElementById(inputId);
+    const apply = () => {
+      const v = input.value;
+      root.style.setProperty(cssVar, v);
+      if (deepSelector) {
+        const el = document.querySelector(deepSelector);
+        if (el) el.style.setProperty('--swatch-deep', hexToDeep(v, 0.78));
+      }
+    };
+    input.addEventListener('input', apply);
+    apply();
+  }
+
+  bindColor('c-oatmeal', '--hue-oatmeal', '.slide-oatmeal');
+  bindColor('c-celadon', '--hue-celadon', '.slide-celadon');
+  bindColor('c-terracotta', '--hue-terracotta', '.slide-terracotta');
+
+  document.getElementById('ctaBtn').addEventListener('click', function () {
+    this.textContent = 'Samples Requested';
+    this.style.opacity = '0.7';
+  });
+
+  measure();
+  go(0, false);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/18bd2744dce2/grok.png b/data/artifacts/18bd2744dce2/grok.png
new file mode 100644
index 0000000..bd7f388
Binary files /dev/null and b/data/artifacts/18bd2744dce2/grok.png differ
diff --git a/data/artifacts/18bd2744dce2/kimi.html b/data/artifacts/18bd2744dce2/kimi.html
new file mode 100644
index 0000000..daa0856
--- /dev/null
+++ b/data/artifacts/18bd2744dce2/kimi.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Designer Wallcoverings — Color Story</title>
+<style>
+/* =========================================================
+   DESIGN TOKENS — Luxury Wallcovering System
+   ========================================================= */
+:root {
+  /* Color Palette: luxe-noir */
+  --bg: #0d0d0f;
+  --surface: #17171c;
+  --ink: #f5f2ea;
+  --muted: #8a8578;
+  --accent: #c9a961;
+  --accent-alpha: rgba(201, 169, 97, 0.12);
+  --line: rgba(245, 242, 234, 0.08);
+  --shadow: rgba(0, 0, 0, 0.4);
+  
+  /* Typography */
+  --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+  --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  
+  /* Spacing */
+  --space-xs: 8px;
+  --space-sm: 16px;
+  --space-md: 32px;
+  --space-lg: 64px;
+  
+  /* Motion */
+  --ease-swift: cubic-bezier(.22,.9,.24,1);
+  --ease-power: cubic-bezier(.77,0,.18,1);
+  --duration: 600ms;
+  
+  /* Dimensions */
+  --carousel-size: 1080px;
+  --header-height: 72px;
+}
+
+/* =========================================================
+   RESET & BASE
+   ========================================================= */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100%;
+  height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* =========================================================
+   FIXED HEADER — Compact Lockup
+   ========================================================= */
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--header-height);
+  background: rgba(13, 13, 15, 0.96);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--line);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-md);
+}
+
+.wordmark {
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+  max-width: 220px;
+  line-height: 1;
+}
+
+/* =========================================================
+   CAROUSEL CONTAINER — 1080x1080
+   ========================================================= */
+.carousel-wrapper {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--carousel-size);
+  height: var(--carousel-size);
+  background: var(--surface);
+  overflow: hidden;
+  box-shadow: 0 40px 120px var(--shadow);
+}
+
+.carousel-track {
+  display: flex;
+  height: 100%;
+  transition: transform var(--duration) var(--ease-power);
+  will-change: transform;
+}
+
+.slide {
+  min-width: var(--carousel-size);
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--header-height) + var(--space-md)) var(--space-lg) var(--space-lg);
+}
+
+/* =========================================================
+   SLIDE 1 — COVER
+   ========================================================= */
+.cover-slide {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: linear-gradient(135deg, var(--surface) 0%, #1a1a1e 100%);
+}
+
+.season-label {
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: var(--space-sm);
+  font-weight: 500;
+}
+
+.palette-title {
+  font-family: var(--font-display);
+  font-size: 67px;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-bottom: var(--space-md);
+}
+
+.palette-subtitle {
+  font-size: 14px;
+  color: var(--muted);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.color-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  display: flex;
+}
+
+.color-bar span {
+  flex: 1;
+  height: 100%;
+}
+
+.color-bar span:nth-child(1) { background: #e8dfd0; }
+.color-bar span:nth-child(2) { background: #b8c4b8; }
+.color-bar span:nth-child(3) { background: #c67c5c; }
+
+/* =========================================================
+   SLIDES 2-4 — COLOR SWATCHES
+   ========================================================= */
+.hue-slide {
+  justify-content: space-between;
+}
+
+.slide-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--space-md);
+}
+
+.hue-number {
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.hue-name {
+  font-family: var(--font-display);
+  font-size: 50px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-top: var(--space-xs);
+}
+
+.swatch-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.swatch {
+  width: 400px;
+  height: 400px;
+  border-radius: 2px;
+  position: relative;
+  box-shadow: 
+    0 20px 60px rgba(0,0,0,0.3),
+    inset 0 1px 0 rgba(255,255,255,0.05);
+  overflow: hidden;
+}
+
+.swatch::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
+  pointer-events: none;
+}
+
+/* Individual Swatch Colors */
+.swatch-oatmeal { background: #e8dfd0; }
+.swatch-celadon { background: #b8c4b8; }
+.swatch-terracotta { background: #c67c5c; }
+
+.slide-footer {
+  border-top: 1px solid var(--line);
+  padding-top: var(--space-md);
+  margin-top: auto;
+}
+
+.tip-label {
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: var(--space-xs);
+  font-weight: 500;
+}
+
+.tip-text {
+  font-size: 18px;
+  line-height: 1.6;
+  color: var(--ink);
+  max-width: 50ch;
+}
+
+/* =========================================================
+   SLIDE 5 — CTA
+   ========================================================= */
+.cta-slide {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: var(--surface);
+}
+
+.cta-title {
+  font-family: var(--font-display);
+  font-size: 38px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-bottom: var(--space-md);
+}
+
+.cta-line {
+  width: 60px;
+  height: 1px;
+  background: var(--accent);
+  margin: 0 auto var(--space-md);
+}
+
+.cta-body {
+  font-size: 16px;
+  line-height: 1.7;
+  color: var(--muted);
+  max-width: 40ch;
+  margin-bottom: var(--space-lg);
+}
+
+.cta-button {
+  display: inline-block;
+  padding: 18px 48px;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: all 300ms var(--ease-swift);
+  background: transparent;
+  cursor: pointer;
+}
+
+.cta-button:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+/* =========================================================
+   NAVIGATION — DOTS
+   ========================================================= */
+.nav-dots {
+  position: absolute;
+  bottom: var(--space-md);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--space-sm);
+  z-index: 100;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--line);
+  cursor: pointer;
+  transition: all 300ms var(--ease-swift);
+  border: none;
+  padding: 0;
+}
+
+.dot.active {
+  background: var(--accent);
+  transform: scale(1.2);
+}
+
+/* =========================================================
+   SWIPE HINT
+   ========================================================= */
+.swipe-hint {
+  position: absolute;
+  bottom: var(--space-lg);
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--muted);
+  opacity: 0.6;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.8; }
+}
+
+/* =========================================================
+   TRANSITION STATES
+   ========================================================= */
+.slide {
+  opacity: 0;
+  transition: opacity var(--duration) var(--ease-swift);
+}
+
+.slide.active {
+  opacity: 1;
+}
+
+/* =========================================================
+   RESPONSIVE SCALING
+   ========================================================= */
+@media (max-width: 1120px) {
+  .carousel-wrapper {
+    transform: translate(-50%, -50%) scale(0.85);
+  }
+}
+
+@media (max-width: 920px) {
+  .carousel-wrapper {
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-wrapper {
+    transform: translate(-50%, -50%) scale(0.5);
+  }
+}
+</style>
+</head>
+<body>
+
+<!-- Fixed Header -->
+<header class="header">
+  <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<!-- Carousel -->
+<div class="carousel-wrapper" id="carousel">
+  <div class="carousel-track" id="track">
+    
+    <!-- Slide 1: Cover -->
+    <div class="slide cover-slide active" data-index="0">
+      <div class="season-label">Spring 2025</div>
+      <h1 class="palette-title">Terracotta<br>&amp; Sage</h1>
+      <p class="palette-subtitle">A Color Story in Three Hues</p>
+      <div class="color-bar">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+    
+    <!-- Slide 2: Oatmeal -->
+    <div class="slide hue-slide" data-index="1">
+      <div class="slide-header">
+        <div>
+          <div class="hue-number">01 / Three</div>
+          <h2 class="hue-name">Oatmeal</h2>
+        </div>
+      </div>
+      <div class="swatch-container">
+        <div class="swatch swatch-oatmeal"></div>
+      </div>
+      <div class="slide-footer">
+        <div class="tip-label">Room Tip</div>
+        <p class="tip-text">Use in north-facing rooms to amplify natural light. Pairs with raw linen and aged brass fixtures.</p>
+      </div>
+    </div>
+    
+    <!-- Slide 3: Celadon -->
+    <div class="slide hue-slide" data-index="2">
+      <div class="slide-header">
+        <div>
+          <div class="hue-number">02 / Three</div>
+          <h2 class="hue-name">Celadon</h2>
+        </div>
+      </div>
+      <div class="swatch-container">
+        <div class="swatch swatch-celadon"></div>
+      </div>
+      <div class="slide-footer">
+        <div class="tip-label">Room Tip</div>
+        <p class="tip-text">Ideal for bedrooms and studies. Softens architectural lines and promotes visual rest.</p>
+      </div>
+    </div>
+    
+    <!-- Slide 4: Terracotta -->
+    <div class="slide hue-slide" data-index="3">
+      <div class="slide-header">
+        <div>
+          <div class="hue-number">03 / Three</div>
+          <h2 class="hue-name">Terracotta</h2>
+        </div>
+      </div>
+      <div class="swatch-container">
+        <div class="swatch swatch-terracotta"></div>
+      </div>
+      <div class="slide-footer">
+        <div class="tip-label">Room Tip</div>
+        <p class="tip-text">Anchor dining spaces with this grounding hue. Complements walnut wood and hand-thrown ceramics.</p>
+      </div>
+    </div>
+    
+    <!-- Slide 5: CTA -->
+    <div class="slide cta-slide" data-index="4">
+      <h2 class="cta-title">Begin Your<br>Project</h2>
+      <div class="cta-line"></div>
+      <p class="cta-body">Request a sample kit featuring all three hues, curated for residential and commercial environments.</p>
+      <a href="#" class="cta-button" onclick="event.preventDefault(); alert('Sample kit request initiated');">Request Samples</a>
+    </div>
+    
+  </div>
+  
+  <!-- Navigation Dots -->
+  <div class="nav-dots" id="dots">
+    <button class="dot active" data-index="0" aria-label="Slide 1"></button>
+    <button class="dot" data-index="1" aria-label="Slide 2"></button>
+    <button class="dot" data-index="2" aria-label="Slide 3"></button>
+    <button class="dot" data-index="3" aria-label="Slide 4"></button>
+    <button class="dot" data-index="4" aria-label="Slide 5"></button>
+  </div>
+  
+  <!-- Swipe Hint -->
+  <div class="swipe-hint">Swipe to explore</div>
+</div>
+
+<script>
+(function() {
+  const carousel = document.getElementById('carousel');
+  const track = document.getElementById('track');
+  const dots = document.querySelectorAll('.dot');
+  const slides = document.querySelectorAll('.slide');
+  let currentIndex = 0;
+  const totalSlides = slides.length;
+  let startX = 0;
+  let isDragging = false;
+  
+  function goToSlide(index) {
+    if (index < 0) index = totalSlides - 1;
+    if (index >= totalSlides) index = 0;
+    
+    currentIndex = index;
+    track.style.transform = `translateX(-${currentIndex * 1080}px)`;
+    
+    // Update dots
+    dots.forEach((dot, i) => {
+      dot.classList.toggle('active', i === currentIndex);
+    });
+    
+    // Update slide opacity
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('active', i === currentIndex);
+    });
+  }
+  
+  // Dot navigation
+  dots.forEach(dot => {
+    dot.addEventListener('click', () => {
+      goToSlide(parseInt(dot.dataset.index));
+    });
+  });
+  
+  // Touch/Swipe handling
+  carousel.addEventListener('touchstart', (e) => {
+    startX = e.touches[0].clientX;
+    isDragging = true;
+  }, { passive: true });
+  
+  carousel.addEventListener('touchmove', (e) => {
+    if (!isDragging) return;
+  }, { passive: true });
+  
+  carousel.addEventListener('touchend', (e) => {
+    if (!isDragging) return;
+    isDragging = false;
+    
+    const endX = e.changedTouches[0].clientX;
+    const diff = startX - endX;
+    
+    if (Math.abs(diff) > 50) {
+      if (diff > 0) {
+        goToSlide(currentIndex + 1);
+      } else {
+        goToSlide(currentIndex - 1);
+      }
+    }
+  });
+  
+  // Mouse drag handling
+  carousel.addEventListener('mousedown', (e) => {
+    startX = e.clientX;
+    isDragging = true;
+    carousel.style.cursor = 'grabbing';
+  });
+  
+  carousel.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+  });
+  
+  carousel.addEventListener('mouseup', (e) => {
+    if (!isDragging) return;
+    isDragging = false;
+    carousel.style.cursor = 'default';
+    
+    const endX = e.clientX;
+    const diff = startX - endX;
+    
+    if (Math.abs(diff) > 50) {
+      if (diff > 0) {
+        goToSlide(currentIndex + 1);
+      } else {
+        goToSlide(currentIndex - 1);
+      }
+    }
+  });
+  
+  carousel.addEventListener('mouseleave', () => {
+    isDragging = false;
+    carousel.style.cursor = 'default';
+  });
+  
+  // Keyboard navigation
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight') goToSlide(currentIndex + 1);
+    if (e.key === 'ArrowLeft') goToSlide(currentIndex - 1);
+  });
+  
+  // Initialize
+  goToSlide(0);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/18bd2744dce2/kimi.png b/data/artifacts/18bd2744dce2/kimi.png
new file mode 100644
index 0000000..3f09631
Binary files /dev/null and b/data/artifacts/18bd2744dce2/kimi.png differ
diff --git a/data/artifacts/18bd2744dce2/qwen25-7b.html b/data/artifacts/18bd2744dce2/qwen25-7b.html
new file mode 100644
index 0000000..dfb86e5
--- /dev/null
+++ b/data/artifacts/18bd2744dce2/qwen25-7b.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Seasonal Wallcovering COLOR STORY</title>
+    <style>
+        :root {
+            --bg: #f7efe6;
+            --surface: #fff9f1;
+            --text: #3a2c22;
+            --muted: #a08c7a;
+            --accent: #c65f38;
+            --line: 1px solid var(--bg);
+            --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18);
+            --ease: cubic-bezier(.22,1,.36,1);
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: var(--bg);
+            color: var(--text);
+            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 1080px;
+        }
+        .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 220px;
+            background-color: var(--surface);
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: inset 0 -4px 8px rgba(0,0,0,.15);
+        }
+        .header-logo {
+            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+            color: var(--text);
+            text-transform: uppercase;
+            letter-spacing: .18em;
+            margin-right: auto;
+        }
+        .carousel {
+            width: 720px;
+            height: 1080px;
+            overflow-x: scroll;
+            scrollbar-width: none; /* Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+            display: flex;
+            gap: 16px;
+        }
+        .carousel::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
+        }
+        .slide {
+            width: 720px;
+            height: 1080px;
+            position: relative;
+            overflow: hidden;
+            perspective: 1000px;
+        }
+        .swatch {
+            width: 360px;
+            height: 540px;
+            background-color: var(--accent);
+            border-radius: 14px;
+            box-shadow: inset 0 -8px 24px rgba(0,0,0,.12), var(--shadow);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .swatch::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 16px;
+            height: 16px;
+            border-radius: 14px;
+            box-shadow: inset 0 -8px 24px rgba(0,0,0,.12), var(--shadow);
+        }
+        .swatch-label {
+            font-size: 12px;
+            letter-spacing: .15em;
+            color: var(--text);
+        }
+        .cta {
+            width: 360px;
+            height: 540px;
+            background-color: var(--bg);
+            border-radius: 14px;
+            box-shadow: inset 0 -8px 24px rgba(0,0,0,.12), var(--shadow);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .cta-text {
+            font-size: 38px;
+            letter-spacing: .15em;
+            color: var(--accent);
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <span class="header-logo">DESIGNER WALLCOVERINGS</span>
+        <div>Scoreboard</div>
+    </div>
+    <div class="carousel" style="scroll-snap-type: x mandatory;">
+        <div class="slide" style="background-color: var(--bg); scroll-snap-align: start;">
+            <h1 style="font-size: 50px; margin-bottom: 24px;">Terracotta & Sage</h1>
+        </div>
+        <div class="slide">
+            <div class="swatch" style="background-color: #c65f38;"></div>
+            <span class="swatch-label">Oatmeal</span>
+            <p>Perfect for living rooms and entryways.</p>
+        </div>
+        <div class="slide">
+            <div class="swatch" style="background-color: #e0a458;"></div>
+            <span class="swatch-label">Celadon</span>
+            <p>Add a touch of elegance to your dining area.</p>
+        </div>
+        <div class="slide">
+            <div class="swatch" style="background-color: #c9a961;"></div>
+            <span class="swatch-label">Terracotta</span>
+            <p>Create a warm and inviting atmosphere in your bedroom.</p>
+        </div>
+        <div class="slide cta">
+            <h2 style="font-size: 38px;">Shop Now</h2>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/18bd2744dce2/qwen25-7b.png b/data/artifacts/18bd2744dce2/qwen25-7b.png
new file mode 100644
index 0000000..12fab3a
Binary files /dev/null and b/data/artifacts/18bd2744dce2/qwen25-7b.png differ
diff --git a/data/artifacts/e65340723412/claude-code.html b/data/artifacts/e65340723412/claude-code.html
new file mode 100644
index 0000000..e5df193
--- /dev/null
+++ b/data/artifacts/e65340723412/claude-code.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style? — Designer Wallcoverings</title>
+<style>
+  :root{
+    /* ── luxe-noir design tokens ── */
+    --bg:#0d0d0f;
+    --surface:#17171c;
+    --surface-2:#1d1d23;
+    --ink:#f5f2ea;
+    --muted:#8a8578;
+    --accent:#c9a961;
+    --accent-deep:#7d6a45;
+    --line:rgba(201,169,97,.22);
+    --hairline:rgba(245,242,234,.10);
+    --shadow:0 8px 24px rgba(0,0,0,.45);
+    --shadow-hover:0 16px 48px rgba(0,0,0,.55);
+    --glow:0 0 26px rgba(201,169,97,.30);
+    --ease:cubic-bezier(.22,1,.36,1);
+    --serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
+    --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+  }
+
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{height:100%}
+  body{
+    background:var(--bg);
+    color:var(--ink);
+    font-family:var(--sans);
+    -webkit-font-smoothing:antialiased;
+    overflow-x:hidden;
+    min-height:100%;
+  }
+
+  /* ambient slow drift */
+  body::before{
+    content:"";
+    position:fixed;inset:0;z-index:0;pointer-events:none;
+    background:
+      radial-gradient(60% 50% at 15% 0%,rgba(201,169,97,.08),transparent 60%),
+      radial-gradient(50% 45% at 90% 100%,rgba(125,106,69,.10),transparent 65%);
+    animation:drift 20s ease-in-out infinite alternate;
+  }
+  @keyframes drift{
+    from{transform:translate3d(0,0,0) scale(1)}
+    to{transform:translate3d(0,-2%,0) scale(1.06)}
+  }
+
+  /* ── fixed top bar / logo zone ── */
+  .topbar{
+    position:fixed;top:0;left:0;right:0;z-index:20;
+    display:flex;align-items:center;justify-content:space-between;
+    padding:18px 28px;
+    background:linear-gradient(180deg,rgba(13,13,15,.94),rgba(13,13,15,.72) 70%,transparent);
+    backdrop-filter:blur(6px);
+  }
+  .wordmark{max-width:230px;line-height:1}
+  .wordmark .brand{
+    font-family:var(--serif);
+    font-weight:600;
+    font-size:19px;
+    letter-spacing:.18em;
+    text-transform:uppercase;
+    color:var(--ink);
+    display:block;
+  }
+  .wordmark .rule{
+    height:1px;width:100%;
+    background:linear-gradient(90deg,var(--accent),transparent);
+    margin-top:6px;opacity:.8;
+  }
+  .progress-label{
+    font-family:var(--sans);
+    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
+    color:var(--muted);white-space:nowrap;
+  }
+  .progress-label b{color:var(--accent);font-weight:600}
+
+  /* ── stage ── */
+  .stage{
+    position:relative;z-index:1;
+    min-height:100vh;
+    display:flex;align-items:center;justify-content:center;
+    padding:110px 24px 64px;
+  }
+  .screen{width:100%;max-width:920px;display:none}
+  .screen.active{display:block;animation:fadeUp .7s var(--ease) both}
+  @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+  .eyebrow{
+    font-size:12px;letter-spacing:.28em;text-transform:uppercase;
+    color:var(--accent);margin-bottom:20px;font-weight:600;
+  }
+
+  /* ── intro ── */
+  .intro{text-align:center}
+  .intro h1{
+    font-family:var(--serif);font-weight:500;
+    font-size:clamp(42px,8vw,72px);line-height:1.04;
+    letter-spacing:.01em;margin-bottom:24px;
+  }
+  .intro h1 em{font-style:italic;color:var(--accent)}
+  .intro p{
+    max-width:520px;margin:0 auto 40px;
+    font-size:17px;line-height:1.7;color:var(--muted);
+  }
+
+  .btn{
+    display:inline-flex;align-items:center;gap:12px;
+    font-family:var(--sans);font-size:12px;font-weight:600;
+    letter-spacing:.2em;text-transform:uppercase;
+    color:var(--bg);background:var(--accent);
+    border:none;cursor:pointer;
+    padding:16px 34px;border-radius:2px;
+    transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
+  }
+  .btn:hover{transform:translateY(-2px);box-shadow:var(--glow);background:#d8ba72}
+  .btn.ghost{
+    background:transparent;color:var(--ink);
+    border:1px solid var(--line);
+  }
+  .btn.ghost:hover{border-color:var(--accent);background:rgba(201,169,97,.06);box-shadow:none}
+
+  /* ── question ── */
+  .q-head{text-align:center;margin-bottom:40px}
+  .q-head h2{
+    font-family:var(--serif);font-weight:500;
+    font-size:clamp(28px,5vw,44px);line-height:1.12;letter-spacing:.01em;
+  }
+  .tiles{
+    display:grid;
+    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
+    gap:22px;
+  }
+  .tile{
+    position:relative;cursor:pointer;
+    background:var(--surface);
+    border:1px solid var(--hairline);
+    border-radius:12px;overflow:hidden;
+    box-shadow:var(--shadow);
+    transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
+    animation:fadeUp .6s var(--ease) both;
+  }
+  .tile:nth-child(2){animation-delay:.09s}
+  .tile:nth-child(3){animation-delay:.18s}
+  .tile:nth-child(4){animation-delay:.27s}
+  .tile:hover{
+    transform:translateY(-6px);
+    box-shadow:var(--shadow-hover);
+    border-color:var(--line);
+  }
+  .tile .swatch{height:170px;width:100%;position:relative}
+  .tile .swatch::after{
+    content:"";position:absolute;inset:0;
+    box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 -40px 50px -30px rgba(0,0,0,.5);
+  }
+  .tile .cap{
+    padding:18px 20px 20px;
+    display:flex;flex-direction:column;gap:5px;
+  }
+  .tile .cap .name{
+    font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.01em;
+  }
+  .tile .cap .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
+  .tile:hover .cap .name{color:var(--accent)}
+
+  .nav{
+    display:flex;justify-content:center;margin-top:40px;
+  }
+
+  /* ─────────  CSS pattern swatches (shared by tiles + result) ───────── */
+  .p-damask{
+    background:
+      radial-gradient(circle at 50% 22%,rgba(201,169,97,.55) 0 4%,transparent 5%),
+      radial-gradient(ellipse 22% 30% at 50% 50%,rgba(201,169,97,.30) 0 40%,transparent 55%),
+      conic-gradient(from 90deg at 50% 50%,transparent 0 20%,rgba(201,169,97,.18) 20% 30%,transparent 30% 70%,rgba(201,169,97,.18) 70% 80%,transparent 80%),
+      radial-gradient(circle at 0% 0%,rgba(201,169,97,.16) 0 8%,transparent 9%),
+      radial-gradient(circle at 100% 100%,rgba(201,169,97,.16) 0 8%,transparent 9%),
+      linear-gradient(135deg,#241d12,#14100a);
+    background-size:70px 96px,70px 96px,70px 96px,70px 96px,70px 96px,100% 100%;
+    background-position:0 0,0 0,0 0,0 0,0 0,0 0;
+  }
+  .p-minimal{
+    background:
+      linear-gradient(90deg,transparent 0 48px,rgba(245,242,234,.14) 48px 49px,transparent 49px 96px),
+      linear-gradient(180deg,#20211f,#161715);
+    background-size:96px 100%,100% 100%;
+  }
+  .p-boho{
+    background:
+      radial-gradient(circle at 50% 50%,rgba(201,169,97,.5) 0 12%,transparent 13%),
+      radial-gradient(circle at 0 0,rgba(176,71,46,.45) 0 18%,transparent 20%),
+      radial-gradient(circle at 100% 100%,rgba(47,76,57,.55) 0 18%,transparent 20%),
+      conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,.22),rgba(176,71,46,.18),rgba(47,76,57,.22),rgba(201,169,97,.22)),
+      #171310;
+    background-size:54px 54px,54px 54px,54px 54px,54px 54px,100% 100%;
+  }
+  .p-deco{
+    background:
+      repeating-linear-gradient(60deg,transparent 0 16px,rgba(201,169,97,.20) 16px 17px),
+      repeating-linear-gradient(-60deg,transparent 0 16px,rgba(201,169,97,.20) 16px 17px),
+      radial-gradient(circle at 50% 100%,rgba(201,169,97,.28) 0 6%,transparent 7%),
+      radial-gradient(circle at 50% 0%,rgba(201,169,97,.28) 0 6%,transparent 7%),
+      linear-gradient(180deg,#141821,#0f1116);
+    background-size:56px 56px,56px 56px,56px 56px,56px 56px,100% 100%;
+  }
+
+  /* ── result card 1080×1080 ── */
+  .result-wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
+  .card-scale{
+    width:min(560px,92vw);
+    aspect-ratio:1/1;
+  }
+  .result-card{
+    width:1080px;height:1080px;
+    transform-origin:top left;
+    background:var(--surface);
+    position:relative;overflow:hidden;
+    border:1px solid var(--line);
+    box-shadow:var(--shadow);
+    display:flex;flex-direction:column;
+  }
+  .rc-bar{
+    display:flex;align-items:center;justify-content:space-between;
+    padding:54px 64px 0;
+  }
+  .rc-bar .brand{
+    font-family:var(--serif);font-weight:600;font-size:34px;
+    letter-spacing:.18em;text-transform:uppercase;
+  }
+  .rc-bar .brand small{display:block;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);margin-top:10px}
+  .rc-bar .tag{font-size:20px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
+
+  .rc-body{
+    flex:1;display:grid;grid-template-columns:1fr 1fr;
+    align-items:center;gap:56px;padding:40px 64px 54px;
+  }
+  .rc-swatch{
+    width:100%;aspect-ratio:1/1;border-radius:14px;position:relative;
+    box-shadow:0 20px 60px rgba(0,0,0,.5);
+    border:1px solid rgba(201,169,97,.3);
+  }
+  .rc-swatch::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),inset 0 -60px 90px -50px rgba(0,0,0,.6)}
+  .rc-text .kicker{font-size:22px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;font-weight:600}
+  .rc-text h3{font-family:var(--serif);font-weight:500;font-size:80px;line-height:1.02;margin-bottom:28px;letter-spacing:.005em}
+  .rc-text h3 em{font-style:italic}
+  .rc-text p{font-size:27px;line-height:1.6;color:var(--muted)}
+  .rc-foot{
+    padding:0 64px 56px;display:flex;align-items:center;justify-content:space-between;
+    border-top:1px solid var(--hairline);margin:0 64px;padding-top:36px;
+  }
+  .rc-foot .shop{
+    font-family:var(--sans);font-size:22px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
+    color:var(--bg);background:var(--accent);padding:22px 46px;border-radius:3px;
+  }
+  .rc-foot .site{font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
+
+  .result-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
+
+  .foot-note{
+    text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
+    color:var(--muted);opacity:.7;margin-top:6px;
+  }
+
+  @media(max-width:560px){
+    .topbar{padding:16px 20px}
+    .wordmark .brand{font-size:16px}
+    .rc-body{gap:40px}
+  }
+</style>
+</head>
+<body>
+
+  <header class="topbar">
+    <div class="wordmark">
+      <span class="brand">Designer Wallcoverings</span>
+      <span class="rule"></span>
+    </div>
+    <div class="progress-label" id="progress">The Style Atelier</div>
+  </header>
+
+  <main class="stage">
+
+    <!-- INTRO -->
+    <section class="screen active" id="screen-intro">
+      <div class="intro">
+        <div class="eyebrow">A Five-Question Portrait</div>
+        <h1>What's Your <em>Wallcovering</em> Style?</h1>
+        <p>Five moments of instinct — colour, motif, mood. Follow your eye and we'll reveal the wall you were always meant to live within.</p>
+        <button class="btn" onclick="startQuiz()">Begin the Journey</button>
+      </div>
+    </section>
+
+    <!-- QUESTIONS render here -->
+    <section class="screen" id="screen-question">
+      <div class="q-head">
+        <div class="eyebrow" id="q-eyebrow">Question 01</div>
+        <h2 id="q-title"></h2>
+      </div>
+      <div class="tiles" id="q-tiles"></div>
+      <div class="nav">
+        <button class="btn ghost" id="backBtn" onclick="goBack()">Back</button>
+      </div>
+    </section>
+
+    <!-- RESULT -->
+    <section class="screen" id="screen-result">
+      <div class="result-wrap">
+        <div class="eyebrow" style="text-align:center;width:100%">Your Result</div>
+        <div class="card-scale">
+          <div class="result-card" id="resultCard">
+            <div class="rc-bar">
+              <div class="brand">Designer Wallcoverings<small></small></div>
+              <div class="tag">Style Portrait</div>
+            </div>
+            <div class="rc-body">
+              <div class="rc-swatch" id="rcSwatch"></div>
+              <div class="rc-text">
+                <div class="kicker">Your Style Is</div>
+                <h3 id="rcName"></h3>
+                <p id="rcDesc"></p>
+              </div>
+            </div>
+            <div class="rc-foot">
+              <span class="shop">Shop This Style</span>
+              <span class="site">designerwallcoverings.com</span>
+            </div>
+          </div>
+        </div>
+        <div class="result-actions">
+          <button class="btn" id="shopBtn">Shop This Style</button>
+          <button class="btn ghost" onclick="restart()">Retake the Quiz</button>
+        </div>
+        <p class="foot-note">Screenshot &amp; share your portrait &middot; #DesignerWallcoverings</p>
+      </div>
+    </section>
+
+  </main>
+
+<script>
+  /* ── style definitions ── */
+  const STYLES = {
+    damask:{
+      name:"Traditional <em>Damask</em>",
+      swatch:"p-damask",
+      desc:"Heritage grandeur. Sumptuous scrolls, gilded symmetry and the quiet authority of a room that has always known its worth."
+    },
+    minimal:{
+      name:"Modern <em>Minimalist</em>",
+      swatch:"p-minimal",
+      desc:"Disciplined and serene. Clean rhythm, honest tone and negative space treated as the most luxurious material of all."
+    },
+    boho:{
+      name:"Bohemian <em>Maximalist</em>",
+      swatch:"p-boho",
+      desc:"Fearless and layered. Saturated colour, worldly motifs and a collected-over-a-lifetime richness that rewards a second look."
+    },
+    deco:{
+      name:"Art Deco <em>Glam</em>",
+      swatch:"p-deco",
+      desc:"Jazz-age opulence. Sunburst geometry, metallic sheen and a confident glamour engineered for a dramatic entrance."
+    }
+  };
+
+  /* ── questions: each option carries a style key ── */
+  const QUESTIONS = [
+    {
+      title:"Choose the palette that stops you in your tracks.",
+      options:[
+        {name:"Claret & Gold",sub:"Deep, regal",swatch:"p-damask",key:"damask"},
+        {name:"Fog & Bone",sub:"Pale, quiet",swatch:"p-minimal",key:"minimal"},
+        {name:"Spice & Jade",sub:"Warm, worldly",swatch:"p-boho",key:"boho"},
+        {name:"Onyx & Brass",sub:"Dark, gleaming",swatch:"p-deco",key:"deco"}
+      ]
+    },
+    {
+      title:"Which motif feels most like you?",
+      options:[
+        {name:"Scrolling Damask",sub:"Ornate",swatch:"p-damask",key:"damask"},
+        {name:"Fine Vertical Line",sub:"Restrained",swatch:"p-minimal",key:"minimal"},
+        {name:"Layered Medallion",sub:"Eclectic",swatch:"p-boho",key:"boho"},
+        {name:"Sunburst Fan",sub:"Geometric",swatch:"p-deco",key:"deco"}
+      ]
+    },
+    {
+      title:"Picture your ideal room. What is its mood?",
+      options:[
+        {name:"Stately Library",sub:"Timeless",swatch:"p-damask",key:"damask"},
+        {name:"Sunlit Gallery",sub:"Airy",swatch:"p-minimal",key:"minimal"},
+        {name:"Collector's Salon",sub:"Rich",swatch:"p-boho",key:"boho"},
+        {name:"Cocktail Lounge",sub:"Dramatic",swatch:"p-deco",key:"deco"}
+      ]
+    },
+    {
+      title:"Select the finish you'd run your hand across.",
+      options:[
+        {name:"Flocked Velvet",sub:"Plush",swatch:"p-damask",key:"damask"},
+        {name:"Matte Grasscloth",sub:"Natural",swatch:"p-minimal",key:"minimal"},
+        {name:"Hand-Blocked Ink",sub:"Artisanal",swatch:"p-boho",key:"boho"},
+        {name:"Metallic Foil",sub:"Lustrous",swatch:"p-deco",key:"deco"}
+      ]
+    },
+    {
+      title:"One word for the impression you want to leave.",
+      options:[
+        {name:"Distinguished",sub:"Classic",swatch:"p-damask",key:"damask"},
+        {name:"Considered",sub:"Modern",swatch:"p-minimal",key:"minimal"},
+        {name:"Unforgettable",sub:"Bold",swatch:"p-boho",key:"boho"},
+        {name:"Bewitching",sub:"Glamorous",swatch:"p-deco",key:"deco"}
+      ]
+    }
+  ];
+
+  let current = 0;
+  let scores = {damask:0,minimal:0,boho:0,deco:0};
+  const answers = [];
+
+  const $ = id => document.getElementById(id);
+  function show(id){
+    document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
+    $(id).classList.add('active');
+    window.scrollTo({top:0,behavior:'smooth'});
+  }
+
+  function startQuiz(){
+    current = 0;
+    scores = {damask:0,minimal:0,boho:0,deco:0};
+    answers.length = 0;
+    renderQuestion();
+    show('screen-question');
+  }
+
+  function renderQuestion(){
+    const q = QUESTIONS[current];
+    const n = String(current+1).padStart(2,'0');
+    $('q-eyebrow').textContent = `Question ${n}`;
+    $('q-title').textContent = q.title;
+    $('progress').innerHTML = `Question <b>${current+1}</b> / ${QUESTIONS.length}`;
+    $('backBtn').style.visibility = current===0 ? 'hidden' : 'visible';
+
+    const wrap = $('q-tiles');
+    wrap.innerHTML = '';
+    q.options.forEach(opt=>{
+      const t = document.createElement('div');
+      t.className = 'tile';
+      t.innerHTML = `
+        <div class="swatch ${opt.swatch}"></div>
+        <div class="cap">
+          <span class="name">${opt.name}</span>
+          <span class="sub">${opt.sub}</span>
+        </div>`;
+      t.onclick = ()=>choose(opt.key);
+      wrap.appendChild(t);
+    });
+  }
+
+  function choose(key){
+    // remove prior answer for this question if navigating back-forward
+    if(answers[current]) scores[answers[current]]--;
+    answers[current] = key;
+    scores[key]++;
+    if(current < QUESTIONS.length-1){
+      current++;
+      renderQuestion();
+      // retrigger animation
+      $('screen-question').classList.remove('active');
+      void $('screen-question').offsetWidth;
+      $('screen-question').classList.add('active');
+    } else {
+      finish();
+    }
+  }
+
+  function goBack(){
+    if(current>0){
+      current--;
+      renderQuestion();
+    }
+  }
+
+  function finish(){
+    // determine winner; tie-break by question order preference
+    let best = 'damask', max = -1;
+    ['damask','minimal','boho','deco'].forEach(k=>{
+      if(scores[k]>max){max=scores[k];best=k;}
+    });
+    const s = STYLES[best];
+    $('rcName').innerHTML = s.name;
+    $('rcDesc').textContent = s.desc;
+    $('rcSwatch').className = 'rc-swatch ' + s.swatch;
+    $('progress').textContent = 'Your Style Portrait';
+    $('shopBtn').onclick = ()=>{
+      window.open('https://designerwallcoverings.com','_blank','noopener,noreferrer');
+    };
+    scaleCard();
+    show('screen-result');
+  }
+
+  function scaleCard(){
+    const wrap = document.querySelector('.card-scale');
+    const card = $('resultCard');
+    const size = wrap.clientWidth;
+    card.style.transform = `scale(${size/1080})`;
+  }
+  window.addEventListener('resize', ()=>{ if($('screen-result').classList.contains('active')) scaleCard(); });
+
+  function restart(){
+    $('progress').textContent = 'The Style Atelier';
+    show('screen-intro');
+  }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/claude-code.png b/data/artifacts/e65340723412/claude-code.png
new file mode 100644
index 0000000..93da756
Binary files /dev/null and b/data/artifacts/e65340723412/claude-code.png differ
diff --git a/data/artifacts/e65340723412/gemma3-12b.html b/data/artifacts/e65340723412/gemma3-12b.html
new file mode 100644
index 0000000..3fa1bb3
--- /dev/null
+++ b/data/artifacts/e65340723412/gemma3-12b.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>What's Your Wallcovering Style?</title>
+  <style>
+    :root {
+      --bg: #faf8f4;
+      --surface: #ffffff;
+      --text: #1c1a17;
+      --muted: #9b948a;
+      --accent: #b0472e;
+      --line: #dcdcdc;
+      --shadow: rgba(0, 0, 0, 0.12);
+      --ease: cubic-bezier(.22, 1, .36, 1);
+    }
+
+    body {
+      font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      background-color: var(--bg);
+      color: var(--text);
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden; /* Prevent horizontal scroll */
+    }
+
+    .top-bar {
+      background-color: var(--surface);
+      padding: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: left;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow */
+    }
+
+    .wordmark {
+      font-family: 'Playfair Display', Georgia, serif;
+      font-size: 24px;
+      letter-spacing: .18em;
+      text-transform: uppercase;
+      display: inline-block;
+      max-width: 220px;
+    }
+
+    .quiz-container {
+      padding: 96px;
+      max-width: 1080px;
+      margin: 0 auto;
+    }
+
+    .question {
+      margin-bottom: 32px;
+      font-size: 24px;
+      line-height: 1.5;
+    }
+
+    .answer-tiles {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 24px;
+    }
+
+    .answer-tile {
+      background-color: var(--surface);
+      border: 1px solid var(--line);
+      padding: 32px;
+      border-radius: 14px;
+      cursor: pointer;
+      transition: transform .2s var(--ease), box-shadow .2s var(--ease);
+      box-shadow: 0 8px 24px var(--shadow);
+    }
+
+    .answer-tile:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 16px 48px var(--shadow);
+    }
+
+    .result-card {
+      background-color: var(--surface);
+      padding: 64px;
+      border-radius: 14px;
+      box-shadow: 0 8px 24px var(--shadow);
+      text-align: center;
+      margin: 48px auto;
+      max-width: 720px;
+    }
+
+    .result-title {
+      font-family: 'Playfair Display', Georgia, serif;
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    .result-description {
+      font-size: 20px;
+      color: var(--muted);
+      line-height: 1.6;
+      margin-bottom: 32px;
+    }
+
+    .style-swatch {
+      width: 180px;
+      height: 180px;
+      background-color: var(--accent);
+      border-radius: 50%;
+      margin: 0 auto;
+    }
+
+    .shop-button {
+      background-color: var(--accent);
+      color: var(--surface);
+      font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      text-transform: uppercase;
+      letter-spacing: .15em;
+      padding: 16px 32px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: transform .2s var(--ease);
+    }
+
+    .shop-button:hover {
+      transform: translateY(-3px);
+    }
+
+    /* Animations */
+    @keyframes fadeUp {
+      from {
+        opacity: 0;
+        transform: translateY(28px);
+      }
+      to {
+        opacity: 1;
+        transform: none;
+      }
+    }
+
+    .fade-up {
+      animation: fadeUp .7s var(--ease) both;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div class="top-bar">
+    <div class="wordmark">DESIGNER WALLCOVERINGS</div>
+  </div>
+
+  <div class="quiz-container">
+    <h1>What's Your Wallcovering Style?</h1>
+
+    <div class="question fade-up">
+      Which of these best describes your ideal living room?
+    </div>
+    <div class="answer-tiles">
+      <div class="answer-tile" data-style="traditional">
+        <img src="https://via.placeholder.com/240x180/e6b8af/FFFFFF?text=Damask" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="modern">
+        <img src="https://via.placeholder.com/240x180/f2f2f2/333333?text=Minimalist" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="bohemian">
+        <img src="https://via.placeholder.com/240x180/c79f6a/FFFFFF?text=Bohemian" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="artdeco">
+        <img src="https://via.placeholder.com/240x180/4a372d/FFFFFF?text=Art Deco" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+    </div>
+
+    <div class="question fade-up">
+      What's your favorite texture?
+    </div>
+    <div class="answer-tiles">
+      <div class="answer-tile" data-style="traditional">
+        <img src="https://via.placeholder.com/240x180/d6c5a3/FFFFFF?text=Velvet" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="modern">
+        <img src="https://via.placeholder.com/240x180/f9f9f9/333333?text=Smooth" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="bohemian">
+        <img src="https://via.placeholder.com/240x180/bfa37d/FFFFFF?text=Woven" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="artdeco">
+        <img src="https://via.placeholder.com/240x180/695d53/FFFFFF?text=Metallic" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+    </div>
+
+    <div class="question fade-up">
+      Choose a color palette.
+    </div>
+    <div class="answer-tiles">
+      <div class="answer-tile" data-style="traditional">
+        <img src="https://via.placeholder.com/240x180/c79f6a/FFFFFF?text=Warm Neutrals" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="modern">
+        <img src="https://via.placeholder.com/240x180/f2f2f2/333333?text=Monochromatic" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="bohemian">
+        <img src="https://via.placeholder.com/240x180/c79f6a/FFFFFF?text=Earthy Tones" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="artdeco">
+        <img src="https://via.placeholder.com/240x180/695d53/FFFFFF?text=Jewel Tones" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+    </div>
+
+    <div class="question fade-up">
+      What's your ideal lighting?
+    </div>
+    <div class="answer-tiles">
+      <div class="answer-tile" data-style="traditional">
+        <img src="https://via.placeholder.com/240x180/d6c5a3/FFFFFF?text=Warm Glow" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="modern">
+        <img src="https://via.placeholder.com/240x180/f9f9f9/333333?text=Natural Light" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="bohemian">
+        <img src="https://via.placeholder.com/240x180/bfa37d/FFFFFF?text=Ambient Lighting" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="artdeco">
+        <img src="https://via.placeholder.com/240x180/695d53/FFFFFF?text=Dramatic Lighting" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+    </div>
+
+    <div class="question fade-up">
+      How would you describe your personal aesthetic?
+    </div>
+    <div class="answer-tiles">
+      <div class="answer-tile" data-style="traditional">
+        <img src="https://via.placeholder.com/240x180/d6c5a3/FFFFFF?text=Classic" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="modern">
+        <img src="https://via.placeholder.com/240x180/f9f9f9/333333?text="Clean"" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="bohemian">
+        <img src="https://via.placeholder.com/240x180/bfa37d/FFFFFF?text=Eclectic" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+      <div class="answer-tile" data-style="artdeco">
+        <img src="https://via.placeholder.com/240x180/695d53/FFFFFF?text="Glamorous"" alt="" style="width: 100%; height: auto; border-radius: 8px;">
+      </div>
+    </div>
+
+  </div>
+
+  <div class="result-card" id="resultCard" style="display: none;">
+    <h1 class="result-title">Your Style Is...</h1>
+    <div class="style-swatch"></div>
+    <p class="result-description"></p>
+    <button class="shop-button" data-style="">Shop this style</button>
+  </div>
+
+  <script>
+    const answerTiles = document.querySelectorAll('.answer-tile');
+    const resultCard = document.getElementById('resultCard');
+    let selectedStyle = null;
+
+    answerTiles.forEach(tile => {
+      tile.addEventListener('click', () => {
+        selectedStyle = tile.dataset.style;
+        // Apply styling based on selection (optional, for visual feedback)
+        answerTiles.forEach(t => t.classList.remove('selected'));
+        tile.classList.add('selected');
+
+        showResult();
+      });
+    });
+
+    function showResult() {
+      if (!selectedStyle) return;
+
+      let title, description, swatchColor;
+
+      switch (selectedStyle) {
+        case 'traditional':
+          title = 'Traditional Damask';
+          description = 'Timeless elegance with rich textures and classic patterns.';
+          swatchColor = '#c79f6a';
+          break;
+        case 'modern':
+          title = 'Modern Minimalist';
+          description = 'Clean lines, understated sophistication, and a focus on simplicity.';
+          swatchColor = '#f2f2f2';
+          break;
+        case 'bohemian':
+          title = 'Bohemian Maximalist';
+          description = 'A vibrant mix of textures, patterns, and global influences for an eclectic feel.';
+          swatchColor = '#bfa37d';
+          break;
+        case 'artdeco':
+          title = 'Art Deco Glam';
+          description = 'Opulent details, geometric shapes, and a touch of vintage Hollywood sparkle.';
+          swatchColor = '#695d53';
+          break;
+        default:
+          return;
+      }
+
+      resultCard.querySelector('.result-title').textContent = title;
+      resultCard.querySelector('.result-description').textContent = description;
+      resultCard.querySelector('.style-swatch').style.backgroundColor = swatchColor;
+      resultCard.querySelector('.shop-button').dataset.style = selectedStyle;
+      resultCard.style.display = 'block';
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/gemma3-12b.png b/data/artifacts/e65340723412/gemma3-12b.png
new file mode 100644
index 0000000..a6ec49b
Binary files /dev/null and b/data/artifacts/e65340723412/gemma3-12b.png differ
diff --git a/data/artifacts/e65340723412/gpt.html b/data/artifacts/e65340723412/gpt.html
new file mode 100644
index 0000000..d8dc01f
--- /dev/null
+++ b/data/artifacts/e65340723412/gpt.html
@@ -0,0 +1,1309 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>What's Your Wallcovering Style? | Designer Wallcoverings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <style>
+    :root {
+      /* Design tokens */
+      --bg: #0d0d0f;
+      --surface: #17171c;
+      --ink: #f5f2ea;
+      --muted: #8a8578;
+      --accent: #c9a961; /* warm metallic gold */
+      --accent-soft: #7d6a45;
+      --line: rgba(201, 169, 97, 0.32);
+      --shadow-soft: 0 22px 40px rgba(0, 0, 0, 0.7);
+      --shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 30px rgba(0,0,0,0.55);
+      --radius-card: 18px;
+      --radius-tile: 16px;
+      --radius-pill: 999px;
+      --ease-ui: cubic-bezier(.22,.9,.24,1); /* swift-out */
+      --border-hairline: 1px solid rgba(245, 242, 234, 0.09);
+
+      --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
+      --font-sans: "Avenir Next", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+      --fs-caption: 12px;
+      --fs-body: 16px;
+      --fs-lead: 21px;
+      --fs-h3: 28px;
+      --fs-h2: 38px;
+      --fs-h1: 50px;
+
+      --quiz-width: min(100vw, 1080px);
+      --card-padding: 28px;
+    }
+
+    * {
+      box-sizing: border-box;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: radial-gradient(circle at top, #17171c 0, #050507 60%, #000 100%);
+      color: var(--ink);
+      font-family: var(--font-sans);
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+    }
+
+    .frame {
+      width: var(--quiz-width);
+      max-width: 1080px;
+      aspect-ratio: 1 / 1;
+      background: radial-gradient(circle at top left, #181820 0, #050507 55%, #000 100%);
+      border-radius: 32px;
+      box-shadow: var(--shadow-soft);
+      border: 1px solid rgba(255,255,255,0.04);
+      position: relative;
+      overflow: hidden;
+      color: var(--ink);
+    }
+
+    /* Top bar */
+    .top-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 64px;
+      padding: 14px 26px 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      backdrop-filter: blur(18px);
+      background:
+        linear-gradient(to bottom, rgba(10,10,14,0.96), rgba(10,10,14,0.86) 50%, transparent 100%);
+      border-bottom: 1px solid rgba(255,255,255,0.03);
+      z-index: 10;
+    }
+
+    .wordmark-lockup {
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      max-width: 220px;
+    }
+
+    .wordmark {
+      font-family: var(--font-display);
+      font-size: 15px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--ink);
+      white-space: nowrap;
+    }
+
+    .wordmark-divider {
+      width: 1px;
+      height: 20px;
+      background: linear-gradient(to bottom, rgba(201,169,97,0.2), rgba(201,169,97,0.7), rgba(201,169,97,0.15));
+    }
+
+    .wordmark-tagline {
+      font-family: var(--font-sans);
+      font-size: 10px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--muted);
+      white-space: nowrap;
+    }
+
+    .meta {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      font-family: var(--font-sans);
+    }
+
+    .meta-label {
+      font-size: 10px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    .meta-pill {
+      padding: 6px 12px;
+      border-radius: var(--radius-pill);
+      border: 1px solid rgba(201,169,97,0.45);
+      font-size: 10px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: radial-gradient(circle at top, rgba(201,169,97,0.18), transparent 55%);
+    }
+
+    .meta-progress {
+      font-size: 10px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    /* Main content */
+    .content {
+      position: absolute;
+      inset: 64px 0 0;
+      padding: 30px 32px 28px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      pointer-events: none;
+    }
+
+    .quiz-card {
+      flex: 1;
+      max-width: 640px;
+      margin: 0 auto;
+      background: radial-gradient(circle at top left, #252530 0, #15151c 42%, #0a0b10 100%);
+      border-radius: 26px;
+      box-shadow: var(--shadow-subtle);
+      border: 1px solid rgba(255,255,255,0.06);
+      padding: var(--card-padding);
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      position: relative;
+      overflow: hidden;
+      pointer-events: auto;
+    }
+
+    .quiz-card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at top right, rgba(201,169,97,0.19), transparent 55%);
+      mix-blend-mode: soft-light;
+      opacity: 0.85;
+      pointer-events: none;
+    }
+
+    .quiz-inner {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+      height: 100%;
+    }
+
+    .kicker {
+      font-size: 11px;
+      letter-spacing: 0.22em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    .title {
+      font-family: var(--font-display);
+      font-size: var(--fs-h2);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      line-height: 1.1;
+      margin: 0;
+    }
+
+    .subtitle {
+      font-size: var(--fs-lead);
+      color: rgba(245,242,234,0.8);
+      max-width: 30ch;
+      line-height: 1.4;
+    }
+
+    .question-counter {
+      font-size: 11px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    .question-text {
+      font-family: var(--font-display);
+      font-size: 26px;
+      line-height: 1.2;
+      margin-top: 4px;
+      margin-bottom: 4px;
+    }
+
+    /* Answer grid */
+    .answers {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 14px;
+      margin-top: 4px;
+      flex: 1;
+    }
+
+    .answer-tile {
+      position: relative;
+      border-radius: var(--radius-tile);
+      overflow: hidden;
+      cursor: pointer;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: #101018;
+      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.75);
+      transition:
+        transform 260ms var(--ease-ui),
+        box-shadow 260ms var(--ease-ui),
+        border-color 220ms var(--ease-ui),
+        background 220ms var(--ease-ui),
+        opacity 200ms var(--ease-ui);
+    }
+
+    .answer-tile::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 60%);
+      mix-blend-mode: soft-light;
+      opacity: 0;
+      transition: opacity 260ms var(--ease-ui);
+    }
+
+    .answer-visual {
+      position: relative;
+      height: 100%;
+      min-height: 120px;
+      display: flex;
+      align-items: stretch;
+    }
+
+    .answer-info {
+      position: absolute;
+      left: 12px;
+      right: 12px;
+      bottom: 10px;
+      padding: 8px 10px;
+      border-radius: 12px;
+      backdrop-filter: blur(14px);
+      background: linear-gradient(to top, rgba(7,7,9,0.92), rgba(7,7,9,0.6));
+      border: 1px solid rgba(255,255,255,0.08);
+      color: var(--ink);
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .answer-title {
+      font-size: 12px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+    }
+
+    .answer-caption {
+      font-size: 12px;
+      color: rgba(245,242,234,0.8);
+    }
+
+    .answer-tile:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.85);
+      border-color: rgba(201,169,97,0.7);
+    }
+
+    .answer-tile:hover::before {
+      opacity: 1;
+    }
+
+    .answer-tile.selected {
+      border-color: rgba(201,169,97,0.9);
+      box-shadow: 0 18px 40px rgba(0,0,0,0.95);
+      background: radial-gradient(circle at top left, rgba(201,169,97,0.32), #09090e 55%);
+      transform: translateY(-4px);
+    }
+
+    .answer-tile.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+
+    /* Pattern swatches for answers — pure CSS */
+    .swatch {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .swatch-split {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+    }
+
+    /* Traditional Damask-inspired */
+    .swatch-damask {
+      background:
+        radial-gradient(circle at 10% 20%, rgba(7,7,9,0.9) 0, rgba(7,7,9,0.9) 40%, transparent 43%),
+        radial-gradient(circle at 40% 10%, rgba(201,169,97,0.5) 0, rgba(201,169,97,0.0) 55%),
+        radial-gradient(circle at 70% 80%, rgba(201,169,97,0.35) 0, rgba(201,169,97,0.0) 52%),
+        repeating-linear-gradient(135deg, #14141c 0, #14141c 6px, #0b0b10 6px, #0b0b10 12px);
+      filter: saturate(1.2);
+    }
+
+    .swatch-damask::after {
+      content: "";
+      position: absolute;
+      inset: 16% 18%;
+      border-radius: 50% 50% 42% 48%;
+      border: 1px solid rgba(201,169,97,0.8);
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 16px 30px rgba(0,0,0,0.9);
+      background:
+        radial-gradient(circle at 20% 20%, rgba(201,169,97,0.7), transparent 52%),
+        radial-gradient(circle at 80% 80%, rgba(201,169,97,0.35), transparent 55%);
+      mix-blend-mode: screen;
+      opacity: 0.8;
+    }
+
+    /* Modern Minimalist */
+    .swatch-minimal {
+      background:
+        linear-gradient(135deg, #060608 0%, #101018 50%, #050506 100%);
+    }
+
+    .swatch-minimal::before {
+      content: "";
+      position: absolute;
+      inset: 16px 18px;
+      border-radius: 24px;
+      background:
+        repeating-linear-gradient(90deg, rgba(245,242,234,0.12) 0, rgba(245,242,234,0.12) 1px, transparent 1px, transparent 10px),
+        radial-gradient(circle at top left, rgba(201,169,97,0.35), transparent 65%);
+      border: 1px solid rgba(245,242,234,0.22);
+    }
+
+    .swatch-minimal::after {
+      content: "";
+      position: absolute;
+      right: 10%;
+      bottom: 16%;
+      width: 24%;
+      height: 32%;
+      border-radius: 999px;
+      border: 1px solid rgba(201,169,97,0.8);
+      background: radial-gradient(circle at 30% 20%, rgba(201,169,97,0.9), transparent 65%);
+    }
+
+    /* Bohemian Maximalist */
+    .swatch-boho {
+      background:
+        radial-gradient(circle at 0% 0%, #2b1623 0, #150b13 30%, #050507 70%),
+        radial-gradient(circle at 100% 100%, #113137 0, #050507 60%);
+      border-left: 1px solid rgba(201,169,97,0.3);
+    }
+
+    .swatch-boho::before,
+    .swatch-boho::after {
+      content: "";
+      position: absolute;
+      inset: 8% 10%;
+      border-radius: 32px;
+      background-image:
+        radial-gradient(circle at 10% 0%, rgba(201,169,97,0.4) 0, transparent 40%),
+        radial-gradient(circle at 90% 100%, rgba(201,169,97,0.32) 0, transparent 50%),
+        repeating-conic-gradient(from 0deg,
+          rgba(245,242,234,0.12) 0deg,
+          rgba(245,242,234,0.12) 8deg,
+          transparent 8deg,
+          transparent 16deg);
+      background-size: cover;
+      mix-blend-mode: screen;
+    }
+
+    .swatch-boho::after {
+      inset: 24% 22%;
+      border-radius: 50%;
+      border: 1px solid rgba(245,242,234,0.32);
+      background:
+        repeating-radial-gradient(circle,
+          rgba(245,242,234,0.26) 0,
+          rgba(245,242,234,0.26) 2px,
+          transparent 2px,
+          transparent 4px);
+      mix-blend-mode: soft-light;
+    }
+
+    /* Art Deco Glam */
+    .swatch-deco {
+      background:
+        radial-gradient(circle at 0 0, rgba(201,169,97,0.5), transparent 55%),
+        radial-gradient(circle at 100% 100%, rgba(201,169,97,0.3), transparent 60%),
+        #08080d;
+    }
+
+    .swatch-deco::before {
+      content: "";
+      position: absolute;
+      inset: 14% 16%;
+      border-radius: 0;
+      background:
+        repeating-linear-gradient(135deg,
+          transparent 0, transparent 8px,
+          rgba(0,0,0,0.85) 8px, rgba(0,0,0,0.85) 16px),
+        repeating-linear-gradient(45deg,
+          rgba(201,169,97,0.9) 0, rgba(201,169,97,0.9) 1px,
+          transparent 1px, transparent 9px);
+      mask-image:
+        radial-gradient(circle at bottom, black 0, black 65%, transparent 70%);
+      opacity: 0.95;
+    }
+
+    .swatch-deco::after {
+      content: "";
+      position: absolute;
+      inset: 22% 32% 14%;
+      border-radius: 0 0 50% 50%;
+      border: 1px solid rgba(201,169,97,0.9);
+      border-top: none;
+      box-shadow:
+        0 0 0 1px rgba(0,0,0,0.9),
+        0 18px 30px rgba(0,0,0,0.9);
+      background:
+        linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4));
+    }
+
+    /* Navigation / CTA */
+    .nav-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 4px;
+    }
+
+    .nav-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .pill {
+      font-size: 11px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    .subtle-pill {
+      padding: 6px 12px;
+      border-radius: var(--radius-pill);
+      border: var(--border-hairline);
+      color: var(--muted);
+      font-size: 10px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .nav-cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .nav-button {
+      border-radius: var(--radius-pill);
+      border: 1px solid rgba(201,169,97,0.9);
+      padding: 10px 20px;
+      font-family: var(--font-sans);
+      font-size: 11px;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      background: radial-gradient(circle at top, rgba(201,169,97,0.32), rgba(201,169,97,0.08));
+      color: var(--ink);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      box-shadow: 0 14px 26px rgba(0,0,0,0.85);
+      transition:
+        background 220ms var(--ease-ui),
+        transform 220ms var(--ease-ui),
+        box-shadow 220ms var(--ease-ui),
+        letter-spacing 220ms var(--ease-ui),
+        opacity 200ms var(--ease-ui);
+    }
+
+    .nav-button span.icon {
+      width: 14px;
+      height: 14px;
+      border-radius: 999px;
+      border: 1px solid rgba(0,0,0,0.9);
+      background:
+        radial-gradient(circle at 30% 10%, rgba(255,255,255,0.55), transparent 55%),
+        radial-gradient(circle at 80% 80%, rgba(201,169,97,0.9), transparent 65%);
+      display: inline-block;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .nav-button span.icon::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 60%;
+      height: 1px;
+      background: rgba(0,0,0,0.8);
+      transform: translate(-10%, -50%) rotate(45deg);
+      transform-origin: center;
+    }
+
+    .nav-button:disabled,
+    .nav-button.disabled {
+      opacity: 0.4;
+      cursor: default;
+      box-shadow: none;
+    }
+
+    .nav-button:not(:disabled):hover {
+      transform: translateY(-2px);
+      box-shadow: 0 18px 38px rgba(0,0,0,0.95);
+      letter-spacing: 0.24em;
+      background: radial-gradient(circle at top, rgba(201,169,97,0.42), rgba(201,169,97,0.1));
+    }
+
+    .nav-button:not(:disabled):active {
+      transform: translateY(0);
+      box-shadow: 0 8px 20px rgba(0,0,0,0.9);
+    }
+
+    .nav-skip {
+      font-size: 10px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--muted);
+      cursor: pointer;
+      border-bottom: 1px solid transparent;
+      padding-bottom: 2px;
+      transition: color 180ms var(--ease-ui), border-color 180ms var(--ease-ui);
+    }
+
+    .nav-skip:hover {
+      color: rgba(245,242,234,0.9);
+      border-color: rgba(245,242,234,0.35);
+    }
+
+    /* Result card */
+    .quiz-card.result-mode {
+      background: radial-gradient(circle at top, #111118 0, #050507 55%, #000 100%);
+    }
+
+    .result-layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr);
+      gap: 22px;
+      align-items: stretch;
+      flex: 1;
+    }
+
+    @media (max-width: 800px) {
+      .content {
+        padding: 28px 18px 20px;
+      }
+      .quiz-card {
+        padding: 22px 18px 20px;
+      }
+      .result-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .result-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .result-kicker {
+      font-size: 11px;
+      letter-spacing: 0.22em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    .result-label {
+      font-family: var(--font-display);
+      font-size: var(--fs-h1);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      line-height: 1.02;
+    }
+
+    .result-sub {
+      font-size: var(--fs-lead);
+      color: rgba(245,242,234,0.82);
+      max-width: 26ch;
+      line-height: 1.4;
+    }
+
+    .result-copy {
+      font-size: var(--fs-body);
+      color: rgba(245,242,234,0.78);
+      line-height: 1.6;
+      max-width: 38ch;
+    }
+
+    .result-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 6px;
+    }
+
+    .result-tag {
+      border-radius: var(--radius-pill);
+      border: var(--border-hairline);
+      padding: 4px 10px;
+      font-size: 10px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+
+    .result-swatch-panel {
+      position: relative;
+      border-radius: 22px;
+      padding: 14px;
+      background: radial-gradient(circle at top left, #262632 0, #090910 60%, #050507 100%);
+      border: 1px solid rgba(255,255,255,0.1);
+      box-shadow: 0 18px 36px rgba(0,0,0,0.92);
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .result-swatch-shell {
+      border-radius: 18px;
+      overflow: hidden;
+      border: 1px solid rgba(255,255,255,0.1);
+      aspect-ratio: 4 / 5;
+      background: #050507;
+      position: relative;
+    }
+
+    .result-swatch {
+      position: absolute;
+      inset: 0;
+    }
+
+    .result-swatch-label {
+      position: absolute;
+      left: 10px;
+      top: 8px;
+      padding: 4px 10px;
+      border-radius: var(--radius-pill);
+      border: var(--border-hairline);
+      font-size: 10px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: rgba(245,242,234,0.9);
+      background: linear-gradient(to right, rgba(5,5,7,0.94), rgba(5,5,7,0.6));
+      backdrop-filter: blur(12px);
+    }
+
+    .result-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-top: 2px;
+    }
+
+    .result-note {
+      font-size: 11px;
+      color: var(--muted);
+      max-width: 26ch;
+      line-height: 1.5;
+    }
+
+    .shop-button {
+      border-radius: var(--radius-pill);
+      border: 1px solid rgba(201,169,97,0.9);
+      padding: 11px 18px;
+      font-size: 11px;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      background:
+        radial-gradient(circle at top, rgba(201,169,97,0.32), rgba(201,169,97,0.08));
+      color: var(--ink);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      box-shadow: 0 14px 26px rgba(0,0,0,0.85);
+      transition:
+        background 220ms var(--ease-ui),
+        transform 220ms var(--ease-ui),
+        box-shadow 220ms var(--ease-ui),
+        letter-spacing 220ms var(--ease-ui);
+    }
+
+    .shop-button span.chevron {
+      width: 14px;
+      height: 14px;
+      border-radius: 999px;
+      border: 1px solid rgba(0,0,0,0.9);
+      background:
+        radial-gradient(circle at 30% 10%, rgba(255,255,255,0.55), transparent 55%),
+        radial-gradient(circle at 80% 80%, rgba(201,169,97,0.9), transparent 65%);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .shop-button span.chevron::after {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-top: 1px solid rgba(0,0,0,0.85);
+      border-right: 1px solid rgba(0,0,0,0.85);
+      transform: translateX(1px) rotate(45deg);
+    }
+
+    .shop-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 18px 38px rgba(0,0,0,0.95);
+      letter-spacing: 0.24em;
+      background: radial-gradient(circle at top, rgba(201,169,97,0.42), rgba(201,169,97,0.1));
+    }
+
+    .shop-button:active {
+      transform: translateY(0);
+      box-shadow: 0 8px 20px rgba(0,0,0,0.9);
+    }
+
+    .restart-link {
+      font-size: 10px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--muted);
+      cursor: pointer;
+      border-bottom: 1px solid transparent;
+      padding-bottom: 2px;
+      transition: color 180ms var(--ease-ui), border-color 180ms var(--ease-ui);
+    }
+
+    .restart-link:hover {
+      color: rgba(245,242,234,0.9);
+      border-color: rgba(245,242,234,0.35);
+    }
+
+    /* Entrance transitions */
+    .question-panel,
+    .result-panel {
+      opacity: 0;
+      transform: translateY(12px);
+      transition:
+        opacity 360ms var(--ease-ui),
+        transform 360ms var(--ease-ui);
+      pointer-events: none;
+    }
+
+    .question-panel.active,
+    .result-panel.active {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    .hidden {
+      display: none !important;
+    }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <header class="top-bar">
+      <div class="wordmark-lockup">
+        <div class="wordmark">DESIGNER WALLCOVERINGS</div>
+        <div class="wordmark-divider"></div>
+        <div class="wordmark-tagline">WALLS AS WARDROBE</div>
+      </div>
+      <div class="meta">
+        <div class="meta-label">Style quiz</div>
+        <div class="meta-pill">Tap to reveal</div>
+        <div class="meta-progress" id="metaProgress">01 · 05</div>
+      </div>
+    </header>
+
+    <main class="content">
+      <section class="quiz-card" id="quizCard">
+        <div class="quiz-inner">
+          <!-- Intro / questions container -->
+          <div id="questionPanel" class="question-panel active">
+            <div>
+              <div class="kicker">What’s your wallcovering style?</div>
+              <h1 class="title">Find the pattern that dresses your walls like couture.</h1>
+              <p class="subtitle">Tap through five scenes. We’ll read the room and match you to your signature wallcovering story.</p>
+            </div>
+
+            <div id="questionBlock">
+              <div class="question-counter" id="questionCounter">Question 1 of 5</div>
+              <div class="question-text" id="questionText">How do you want your space to feel when you first walk in?</div>
+
+              <div class="answers" id="answersGrid">
+                <!-- Tiles injected via JS -->
+              </div>
+            </div>
+
+            <div class="nav-row">
+              <div class="nav-left">
+                <div class="pill">Swipe-light quiz</div>
+                <div class="subtle-pill">
+                  <span style="width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,0.8);"></span>
+                  5 curated prompts
+                </div>
+              </div>
+              <div class="nav-cta">
+                <button class="nav-button" id="nextButton" disabled>
+                  Next
+                  <span class="icon"></span>
+                </button>
+                <button class="nav-button hidden" id="seeResultButton">
+                  See your style
+                  <span class="icon"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Result panel -->
+          <div id="resultPanel" class="result-panel hidden">
+            <div class="result-layout">
+              <div class="result-meta">
+                <div class="result-kicker">Your wallcovering signature</div>
+                <h2 class="result-label" id="resultTitle">Traditional Damask</h2>
+                <p class="result-sub" id="resultSub">Ornate, layered, and quietly commanding.</p>
+                <p class="result-copy" id="resultCopy">
+                  Your walls love a little drama. Think sculpted motifs, candlelit sheen, and palettes that feel borrowed from a private members’ club.
+                </p>
+                <div class="result-tags" id="resultTags">
+                  <!-- tags via JS -->
+                </div>
+              </div>
+              <div class="result-swatch-panel">
+                <div class="result-swatch-shell">
+                  <div class="result-swatch" id="resultSwatch"></div>
+                  <div class="result-swatch-label" id="resultSwatchLabel">Pattern study</div>
+                </div>
+                <div class="result-footer">
+                  <div class="result-note">
+                    Curated for rooms that deserve to be lingered in: think entry halls, dining salons, and softly lit lounges.
+                  </div>
+                  <div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px;">
+                    <button class="shop-button" id="shopButton">
+                      Shop this style
+                      <span class="chevron"></span>
+                    </button>
+                    <div class="restart-link" id="restartLink">Retake in 30 seconds</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <script>
+    (function() {
+      const questions = [
+        {
+          text: "How do you want your space to feel when you first walk in?",
+          answers: [
+            {
+              title: "Collected & grand",
+              caption: "Think candlelit salons, layered textiles, and heirloom portraits.",
+              weights: { damask: 3, minimalist: 0, boho: 1, deco: 1 },
+              swatchClass: "swatch-damask"
+            },
+            {
+              title: "Calm & architectural",
+              caption: "Clean planes, considered light, and almost-silent pattern.",
+              weights: { damask: 0, minimalist: 3, boho: 0, deco: 1 },
+              swatchClass: "swatch-minimal"
+            },
+            {
+              title: "Playful & story-rich",
+              caption: "Unexpected color, curated clutter, and travel souvenirs.",
+              weights: { damask: 1, minimalist: 0, boho: 3, deco: 1 },
+              swatchClass: "swatch-boho"
+            },
+            {
+              title: "Glamorous & cinematic",
+              caption: "Cocktail-ready lighting, shine, and sculpted geometry.",
+              weights: { damask: 1, minimalist: 1, boho: 0, deco: 3 },
+              swatchClass: "swatch-deco"
+            }
+          ]
+        },
+        {
+          text: "Which wall feels most like “home” to you?",
+          answers: [
+            {
+              title: "Hand-carved paneling",
+              caption: "Rich wood, intricate mouldings, and silk under lamplight.",
+              weights: { damask: 3, minimalist: 0, boho: 1, deco: 1 },
+              swatchClass: "swatch-damask"
+            },
+            {
+              title: "Gallery-white planes",
+              caption: "Shadow, negative space, and one perfect sculptural piece.",
+              weights: { damask: 0, minimalist: 3, boho: 0, deco: 1 },
+              swatchClass: "swatch-minimal"
+            },
+            {
+              title: "Layered textiles",
+              caption: "Woven tapestries, collected art, and soft imperfections.",
+              weights: { damask: 1, minimalist: 0, boho: 3, deco: 0 },
+              swatchClass: "swatch-boho"
+            },
+            {
+              title: "Lacquer & brass",
+              caption: "Statement mirrors, polished metals, and midnight tones.",
+              weights: { damask: 1, minimalist: 1, boho: 0, deco: 3 },
+              swatchClass: "swatch-deco"
+            }
+          ]
+        },
+        {
+          text: "What’s your ideal evening in this room?",
+          answers: [
+            {
+              title: "Slow dinner that lingers",
+              caption: "Candlelight on pattern, vintage crystal, and string music.",
+              weights: { damask: 3, minimalist: 0, boho: 1, deco: 1 },
+              swatchClass: "swatch-damask"
+            },
+            {
+              title: "Quiet solo reset",
+              caption: "A single chair, a good book, and a perfectly framed view.",
+              weights: { damask: 0, minimalist: 3, boho: 0, deco: 1 },
+              swatchClass: "swatch-minimal"
+            },
+            {
+              title: "Friends, playlists, laughter",
+              caption: "Floor cushions, layered candles, and art in every corner.",
+              weights: { damask: 1, minimalist: 0, boho: 3, deco: 0 },
+              swatchClass: "swatch-boho"
+            },
+            {
+              title: "Cocktail hour that runs late",
+              caption: "Low sofas, martinis, and a skyline of reflective surfaces.",
+              weights: { damask: 1, minimalist: 1, boho: 0, deco: 3 },
+              swatchClass: "swatch-deco"
+            }
+          ]
+        },
+        {
+          text: "Which detail are you most drawn to?",
+          answers: [
+            {
+              title: "Ornate flourishes",
+              caption: "Scrolled motifs, crest details, and tailored symmetry.",
+              weights: { damask: 3, minimalist: 0, boho: 1, deco: 1 },
+              swatchClass: "swatch-damask"
+            },
+            {
+              title: "Precision lines",
+              caption: "Pinstripes, subtle grids, and architectural rhythm.",
+              weights: { damask: 0, minimalist: 3, boho: 0, deco: 1 },
+              swatchClass: "swatch-minimal"
+            },
+            {
+              title: "Hand-drawn motifs",
+              caption: "Botanicals, ikats, and painterly, one-of-a-kind marks.",
+              weights: { damask: 1, minimalist: 0, boho: 3, deco: 0 },
+              swatchClass: "swatch-boho"
+            },
+            {
+              title: "Fan shapes & sunbursts",
+              caption: "Stepped forms, arches, and jewelry-like repetition.",
+              weights: { damask: 1, minimalist: 1, boho: 0, deco: 3 },
+              swatchClass: "swatch-deco"
+            }
+          ]
+        },
+        {
+          text: "Finish this sentence: My walls should…",
+          answers: [
+            {
+              title: "Feel like a heritage story",
+              caption: "As if they’ve seen generations of beautifully dressed rooms.",
+              weights: { damask: 3, minimalist: 0, boho: 1, deco: 1 },
+              swatchClass: "swatch-damask"
+            },
+            {
+              title: "Disappear into the architecture",
+              caption: "A soft, quiet backdrop that lets objects breathe.",
+              weights: { damask: 0, minimalist: 3, boho: 0, deco: 1 },
+              swatchClass: "swatch-minimal"
+            },
+            {
+              title: "Collect stories from everywhere",
+              caption: "Every surface reveals a memory, color, or pattern.",
+              weights: { damask: 1, minimalist: 0, boho: 3, deco: 0 },
+              swatchClass: "swatch-boho"
+            },
+            {
+              title: "Dress like eveningwear",
+              caption: "Reflective, sculpted, and a little bit red-carpet.",
+              weights: { damask: 1, minimalist: 1, boho: 0, deco: 3 },
+              swatchClass: "swatch-deco"
+            }
+          ]
+        }
+      ];
+
+      const results = {
+        damask: {
+          title: "Traditional Damask",
+          sub: "Ornate, layered, and quietly commanding.",
+          copy: "You’re drawn to heritage rooms with a sense of ceremony. Rich motifs, tailored symmetry, and candlelit sheen feel like a natural backdrop to your life. Damask wallcoverings wrap the room in a soft formality that never feels dated—just enduring.",
+          tags: ["Silk-inspired texture", "Candlelit sheen", "Salon-ready"],
+          swatchClass: "swatch-damask",
+          swatchLabel: "Damask in low light"
+        },
+        minimalist: {
+          title: "Modern Minimalist",
+          sub: "Architectural calm with whisper-soft pattern.",
+          copy: "You edit with intention. You prefer walls that shape light and shadow rather than shout for attention. Minimalist wallcoverings bring in quiet texture—fine striés, tonal grids, and matte sheens—so your art, objects, and view do the talking.",
+          tags: ["Gallery quiet", "Matte texture", "Architectural lines"],
+          swatchClass: "swatch-minimal",
+          swatchLabel: "Textured neutral field"
+        },
+        boho: {
+          title: "Bohemian Maximalist",
+          sub: "Collected, saturated, and joyfully layered.",
+          copy: "You choreograph rooms like playlists: rich, unexpected, and a little addictive. Bohemian wallcoverings lean into color and motif—botanicals, ikats, and storybook scenes that invite guests to look twice and stay longer.",
+          tags: ["Curated color", "Global motifs", "Layer-ready"],
+          swatchClass: "swatch-boho",
+          swatchLabel: "Patterned tapestry wall"
+        },
+        deco: {
+          title: "Art Deco Glam",
+          sub: "Sculpted geometry with a metallic hush.",
+          copy: "Your rooms are built for an entrance. You gravitate toward polished metals, archways, and tailored geometry. Art Deco-inspired wallcoverings bring in fans, sunbursts, and stepped forms with just enough metallic ink to catch the light.",
+          tags: ["Midnight glamour", "Metallic inlay", "Statement geometry"],
+          swatchClass: "swatch-deco",
+          swatchLabel: "Geometric metallic panel"
+        }
+      };
+
+      let currentQuestion = 0;
+      const scores = { damask: 0, minimalist: 0, boho: 0, deco: 0 };
+      const selections = Array(questions.length).fill(null);
+
+      const questionText = document.getElementById("questionText");
+      const questionCounter = document.getElementById("questionCounter");
+      const answersGrid = document.getElementById("answersGrid");
+      const metaProgress = document.getElementById("metaProgress");
+      const nextButton = document.getElementById("nextButton");
+      const seeResultButton = document.getElementById("seeResultButton");
+
+      const quizCard = document.getElementById("quizCard");
+      const questionPanel = document.getElementById("questionPanel");
+      const resultPanel = document.getElementById("resultPanel");
+
+      const resultTitle = document.getElementById("resultTitle");
+      const resultSub = document.getElementById("resultSub");
+      const resultCopy = document.getElementById("resultCopy");
+      const resultTags = document.getElementById("resultTags");
+      const resultSwatch = document.getElementById("resultSwatch");
+      const resultSwatchLabel = document.getElementById("resultSwatchLabel");
+      const shopButton = document.getElementById("shopButton");
+      const restartLink = document.getElementById("restartLink");
+
+      function updateMetaProgress() {
+        const idx = Math.min(currentQuestion + 1, questions.length);
+        const total = questions.length.toString().padStart(2, "0");
+        metaProgress.textContent = `${idx.toString().padStart(2, "0")} · ${total}`;
+      }
+
+      function renderQuestion() {
+        const q = questions[currentQuestion];
+        questionText.textContent = q.text;
+        questionCounter.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
+        updateMetaProgress();
+
+        answersGrid.innerHTML = "";
+        q.answers.forEach((ans, index) => {
+          const tile = document.createElement("button");
+          tile.className = "answer-tile";
+          tile.type = "button";
+          tile.setAttribute("data-index", index);
+
+          const visual = document.createElement("div");
+          visual.className = "answer-visual";
+
+          const swatch = document.createElement("div");
+          swatch.className = "swatch " + ans.swatchClass;
+          visual.appendChild(swatch);
+
+          const info = document.createElement("div");
+          info.className = "answer-info";
+
+          const title = document.createElement("div");
+          title.className = "answer-title";
+          title.textContent = ans.title;
+
+          const caption = document.createElement("div");
+          caption.className = "answer-caption";
+          caption.textContent = ans.caption;
+
+          info.appendChild(title);
+          info.appendChild(caption);
+          visual.appendChild(info);
+          tile.appendChild(visual);
+
+          tile.addEventListener("click", () => handleAnswerSelection(index));
+          answersGrid.appendChild(tile);
+        });
+
+        // restore previous selection if navigating back
+        if (selections[currentQuestion] !== null) {
+          const previouslySelected = selections[currentQuestion];
+          const tiles = answersGrid.querySelectorAll(".answer-tile");
+          tiles.forEach((tile, idx) => {
+            if (idx === previouslySelected) {
+              tile.classList.add("selected");
+            }
+          });
+          nextButton.disabled = false;
+        } else {
+          nextButton.disabled = true;
+        }
+
+        nextButton.classList.toggle("hidden", currentQuestion === questions.length - 1);
+        seeResultButton.classList.toggle("hidden", currentQuestion !== questions.length - 1);
+      }
+
+      function handleAnswerSelection(answerIndex) {
+        const tiles = answersGrid.querySelectorAll(".answer-tile");
+        tiles.forEach((t, idx) => {
+          t.classList.toggle("selected", idx === answerIndex);
+        });
+        selections[currentQuestion] = answerIndex;
+        nextButton.disabled = currentQuestion === questions.length - 1;
+        if (currentQuestion === questions.length - 1) {
+          // last question, allow see result
+          seeResultButton.disabled = false;
+        }
+      }
+
+      function accumulateScores() {
+        // reset
+        scores.damask = 0;
+        scores.minimalist = 0;
+        scores.boho = 0;
+        scores.deco = 0;
+        selections.forEach((sel, qIndex) => {
+          if (sel === null) return;
+          const ans = questions[qIndex].answers[sel];
+          Object.keys(ans.weights).forEach(key => {
+            scores[key] += ans.weights[key];
+          });
+        });
+      }
+
+      function determineResultKey() {
+        accumulateScores();
+        let topKey = "damask";
+        let topScore = -Infinity;
+        Object.entries(scores).forEach(([key, value]) => {
+          if (value > topScore) {
+            topScore = value;
+            topKey = key;
+          }
+        });
+        if (topScore <= 0) return "minimalist";
+        return topKey;
+      }
+
+      function showResult() {
+        const resultKey = determineResultKey();
+        const data = results[resultKey];
+
+        resultTitle.textContent = data.title;
+        resultSub.textContent = data.sub;
+        resultCopy.textContent = data.copy;
+
+        resultTags.innerHTML = "";
+        data.tags.forEach(t => {
+          const el = document.createElement("div");
+          el.className = "result-tag";
+          el.textContent = t;
+          resultTags.appendChild(el);
+        });
+
+        resultSwatch.className = "result-swatch " + data.swatchClass;
+        resultSwatchLabel.textContent = data.swatchLabel;
+
+        questionPanel.classList.remove("active");
+        questionPanel.classList.add("hidden");
+        resultPanel.classList.remove("hidden");
+
+        // small delay for transition
+        requestAnimationFrame(() => {
+          quizCard.classList.add("result-mode");
+          resultPanel.classList.add("active");
+        });
+      }
+
+      function goToNext() {
+        if (selections[currentQuestion] === null) return;
+        if (currentQuestion < questions.length - 1) {
+          currentQuestion += 1;
+          renderQuestion();
+        }
+      }
+
+      function restartQuiz() {
+        currentQuestion = 0;
+        selections.fill(null);
+        scores.damask = scores.minimalist = scores.boho = scores.deco = 0;
+
+        resultPanel.classList.remove("active");
+        setTimeout(() => {
+          resultPanel.classList.add("hidden");
+          quizCard.classList.remove("result-mode");
+          questionPanel.classList.remove("hidden");
+          requestAnimationFrame(() => {
+            questionPanel.classList.add("active");
+          });
+          renderQuestion();
+        }, 180);
+      }
+
+      nextButton.addEventListener("click", goToNext);
+      seeResultButton.addEventListener("click", showResult);
+      restartLink.addEventListener("click", restartQuiz);
+      shopButton.addEventListener("click", function() {
+        // Non-navigating for an embed; gentle feedback only.
+        shopButton.textContent = "Curate this palette in-store";
+        setTimeout(() => {
+          shopButton.innerHTML = 'Shop this style<span class="chevron"></span>';
+        }, 1800);
+      });
+
+      // Initial render of first question tiles
+      renderQuestion();
+    })();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/gpt.png b/data/artifacts/e65340723412/gpt.png
new file mode 100644
index 0000000..fda34fb
Binary files /dev/null and b/data/artifacts/e65340723412/gpt.png differ
diff --git a/data/artifacts/e65340723412/grok.html b/data/artifacts/e65340723412/grok.html
new file mode 100644
index 0000000..e66e242
--- /dev/null
+++ b/data/artifacts/e65340723412/grok.html
@@ -0,0 +1,1104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style? — Designer Wallcoverings</title>
+<style>
+:root {
+  --bg: #0d0d0f;
+  --surface: #17171c;
+  --surface-2: #1e1e24;
+  --ink: #f5f2ea;
+  --muted: #8a8578;
+  --accent: #c9a961;
+  --accent-dim: #7d6a45;
+  --line: rgba(245, 242, 234, 0.12);
+  --line-strong: rgba(245, 242, 234, 0.22);
+  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
+  --ease: cubic-bezier(.22, .9, .24, 1);
+  --ease-out: cubic-bezier(.22, 1, .36, 1);
+  --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
+  --sans: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
+  --radius: 2px;
+  --bar-h: 56px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Top bar ── */
+.topbar {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: var(--bar-h);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  padding: 0 28px;
+  background: rgba(13, 13, 15, 0.92);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--line);
+}
+
+.wordmark {
+  font-family: var(--serif);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+  max-width: 220px;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.progress-wrap {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.progress-label {
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.progress-track {
+  width: 72px;
+  height: 1px;
+  background: var(--line-strong);
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-fill {
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 0%;
+  background: var(--accent);
+  transition: width 0.5s var(--ease);
+}
+
+/* ── Stages ── */
+.stage {
+  min-height: 100vh;
+  padding: calc(var(--bar-h) + 48px) 24px 64px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
+}
+
+.stage.active {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.stage.leaving {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+
+/* ── Intro ── */
+.intro-inner {
+  max-width: 520px;
+  text-align: center;
+}
+
+.eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 28px;
+  font-weight: 500;
+}
+
+.display-title {
+  font-family: var(--serif);
+  font-size: clamp(36px, 6vw, 50px);
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-bottom: 24px;
+}
+
+.lead {
+  font-size: 17px;
+  line-height: 1.7;
+  color: var(--muted);
+  max-width: 38ch;
+  margin: 0 auto 40px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 16px 36px;
+  background: transparent;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  font-family: var(--sans);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
+  border-radius: var(--radius);
+}
+
+.btn:hover {
+  background: var(--accent);
+  color: var(--bg);
+  box-shadow: 0 8px 28px rgba(201, 169, 97, 0.25);
+}
+
+.btn:active { transform: scale(0.98); }
+
+.btn-solid {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+.btn-solid:hover {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--bg);
+  box-shadow: var(--shadow-soft);
+}
+
+.hairline {
+  width: 40px;
+  height: 1px;
+  background: var(--accent);
+  margin: 0 auto 28px;
+  opacity: 0.7;
+}
+
+/* ── Question ── */
+.q-inner {
+  width: 100%;
+  max-width: 720px;
+}
+
+.q-number {
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.q-title {
+  font-family: var(--serif);
+  font-size: clamp(26px, 4.5vw, 36px);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  text-align: center;
+  margin-bottom: 40px;
+  color: var(--ink);
+}
+
+.tiles {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+@media (max-width: 540px) {
+  .tiles { grid-template-columns: 1fr; gap: 12px; }
+}
+
+.tile {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
+  text-align: left;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 168px;
+}
+
+.tile:hover {
+  border-color: var(--accent-dim);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-soft);
+}
+
+.tile:active { transform: translateY(-1px); }
+
+.tile.selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent), var(--shadow-soft);
+}
+
+.tile-swatch {
+  height: 88px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.tile-body {
+  padding: 16px 18px 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tile-label {
+  font-family: var(--serif);
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--ink);
+  margin-bottom: 4px;
+}
+
+.tile-desc {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--muted);
+  letter-spacing: 0.01em;
+}
+
+/* ── CSS Pattern Swatches ── */
+/* Damask */
+.sw-damask {
+  background:
+    radial-gradient(ellipse 30% 40% at 50% 50%, rgba(201,169,97,0.35) 0%, transparent 70%),
+    radial-gradient(circle at 25% 25%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 75% 25%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 25% 75%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 75% 75%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 50% 10%, rgba(201,169,97,0.15) 0 1.5px, transparent 2.5px),
+    radial-gradient(circle at 50% 90%, rgba(201,169,97,0.15) 0 1.5px, transparent 2.5px),
+    radial-gradient(circle at 10% 50%, rgba(201,169,97,0.15) 0 1.5px, transparent 2.5px),
+    radial-gradient(circle at 90% 50%, rgba(201,169,97,0.15) 0 1.5px, transparent 2.5px),
+    linear-gradient(135deg, #1a1510 0%, #2a2218 50%, #1a1510 100%);
+  background-size: 100% 100%, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 100% 100%;
+}
+.sw-damask::after {
+  content: '';
+  position: absolute;
+  inset: 18% 22%;
+  border: 1px solid rgba(201,169,97,0.25);
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  box-shadow: inset 0 0 20px rgba(201,169,97,0.1), 0 0 0 6px rgba(201,169,97,0.06);
+}
+
+/* Minimalist */
+.sw-minimal {
+  background:
+    linear-gradient(180deg, transparent 48%, rgba(245,242,234,0.08) 48%, rgba(245,242,234,0.08) 52%, transparent 52%),
+    linear-gradient(90deg, #141416 0%, #1c1c20 100%);
+}
+.sw-minimal::before {
+  content: '';
+  position: absolute;
+  left: 20%; right: 20%; top: 50%;
+  height: 1px;
+  background: rgba(245,242,234,0.18);
+}
+.sw-minimal::after {
+  content: '';
+  position: absolute;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: rgba(245,242,234,0.25);
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Bohemian */
+.sw-boho {
+  background:
+    repeating-linear-gradient(60deg, transparent, transparent 8px, rgba(180,100,60,0.12) 8px, rgba(180,100,60,0.12) 9px),
+    repeating-linear-gradient(-60deg, transparent, transparent 8px, rgba(80,140,100,0.1) 8px, rgba(80,140,100,0.1) 9px),
+    radial-gradient(circle at 30% 40%, rgba(201,100,60,0.35) 0%, transparent 45%),
+    radial-gradient(circle at 70% 60%, rgba(100,60,120,0.3) 0%, transparent 40%),
+    radial-gradient(circle at 50% 80%, rgba(60,120,90,0.25) 0%, transparent 35%),
+    linear-gradient(160deg, #1a1210 0%, #241818 40%, #1a1420 100%);
+}
+.sw-boho::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 20% 70%, rgba(201,169,97,0.3) 0 3px, transparent 4px),
+    radial-gradient(circle at 80% 30%, rgba(201,169,97,0.25) 0 2px, transparent 3px),
+    radial-gradient(circle at 55% 25%, rgba(220,140,80,0.3) 0 2.5px, transparent 3.5px),
+    radial-gradient(circle at 40% 85%, rgba(140,80,160,0.25) 0 2px, transparent 3px);
+}
+
+/* Art Deco */
+.sw-deco {
+  background:
+    linear-gradient(135deg, transparent 40%, rgba(201,169,97,0.08) 40%, rgba(201,169,97,0.08) 60%, transparent 60%),
+    linear-gradient(45deg, #0f0e12 0%, #1a1820 50%, #0f0e12 100%);
+}
+.sw-deco::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, transparent 0%, transparent 46%, rgba(201,169,97,0.4) 46%, rgba(201,169,97,0.4) 47%, transparent 47%, transparent 53%, rgba(201,169,97,0.4) 53%, rgba(201,169,97,0.4) 54%, transparent 54%),
+    linear-gradient(0deg, transparent 0%, transparent 30%, rgba(201,169,97,0.25) 30%, rgba(201,169,97,0.25) 31%, transparent 31%, transparent 69%, rgba(201,169,97,0.25) 69%, rgba(201,169,97,0.25) 70%, transparent 70%),
+    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(201,169,97,0.08) 11px, rgba(201,169,97,0.08) 12px);
+  opacity: 0.9;
+}
+.sw-deco::after {
+  content: '';
+  position: absolute;
+  top: 50%; left: 50%;
+  width: 36px; height: 36px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border: 1px solid rgba(201,169,97,0.45);
+  box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(201,169,97,0.2);
+}
+
+/* Soft linen / texture variants for Q tiles */
+.sw-linen {
+  background:
+    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(245,242,234,0.03) 2px, rgba(245,242,234,0.03) 3px),
+    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(245,242,234,0.02) 2px, rgba(245,242,234,0.02) 3px),
+    linear-gradient(180deg, #1c1a16 0%, #252218 100%);
+}
+.sw-velvet {
+  background:
+    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(80,30,50,0.5) 0%, transparent 70%),
+    linear-gradient(180deg, #1a0e14 0%, #2a1520 100%);
+}
+.sw-velvet::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, transparent 40%, rgba(201,169,97,0.08) 50%, transparent 60%);
+}
+.sw-grasscloth {
+  background:
+    repeating-linear-gradient(90deg, #1a1814 0px, #1a1814 3px, #221e18 3px, #221e18 6px, #1e1a16 6px, #1e1a16 8px),
+    linear-gradient(180deg, rgba(201,169,97,0.06), rgba(201,169,97,0.02));
+}
+.sw-marble {
+  background:
+    radial-gradient(ellipse 50% 30% at 30% 40%, rgba(245,242,234,0.08) 0%, transparent 50%),
+    radial-gradient(ellipse 40% 50% at 70% 60%, rgba(245,242,234,0.05) 0%, transparent 45%),
+    linear-gradient(125deg, #161618 0%, #1e1e22 40%, #18181c 60%, #222226 100%);
+}
+.sw-marble::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(105deg, transparent 20%, rgba(245,242,234,0.06) 35%, transparent 40%, transparent 60%, rgba(245,242,234,0.04) 72%, transparent 80%);
+}
+.sw-botanical {
+  background:
+    radial-gradient(ellipse 20% 35% at 30% 50%, rgba(60,100,70,0.4) 0%, transparent 70%),
+    radial-gradient(ellipse 15% 40% at 65% 45%, rgba(80,60,40,0.35) 0%, transparent 65%),
+    radial-gradient(circle at 50% 70%, rgba(40,80,50,0.25) 0%, transparent 40%),
+    linear-gradient(180deg, #121610 0%, #1a1e16 100%);
+}
+.sw-botanical::before {
+  content: '';
+  position: absolute;
+  width: 40px; height: 50px;
+  left: 28%; top: 22%;
+  border: 1px solid rgba(100,140,90,0.3);
+  border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%;
+  transform: rotate(-20deg);
+}
+.sw-botanical::after {
+  content: '';
+  position: absolute;
+  width: 28px; height: 42px;
+  right: 30%; top: 28%;
+  border: 1px solid rgba(140,110,70,0.25);
+  border-radius: 40% 60% 50% 50% / 50% 50% 50% 50%;
+  transform: rotate(25deg);
+}
+.sw-geometric {
+  background: #121214;
+}
+.sw-geometric::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(201,169,97,0.12) 12px, rgba(201,169,97,0.12) 13px),
+    repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(201,169,97,0.08) 12px, rgba(201,169,97,0.08) 13px);
+}
+.sw-moire {
+  background:
+    repeating-linear-gradient(0deg, #16141a 0px, #1c1a22 4px, #16141a 8px),
+    linear-gradient(90deg, rgba(201,169,97,0.05), transparent);
+}
+.sw-moire::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(3deg, transparent 0px, transparent 5px, rgba(201,169,97,0.06) 5px, rgba(201,169,97,0.06) 6px);
+  opacity: 0.8;
+}
+.sw-toledo {
+  background:
+    radial-gradient(circle at 50% 50%, rgba(201,169,97,0.2) 0%, transparent 50%),
+    conic-gradient(from 0deg at 50% 50%, #1a1410, #2a2018, #1a1410, #241c14, #1a1410);
+}
+.sw-toledo::after {
+  content: '';
+  position: absolute;
+  top: 50%; left: 50%;
+  width: 48px; height: 48px;
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(201,169,97,0.3);
+  border-radius: 50%;
+  box-shadow: 0 0 0 8px rgba(201,169,97,0.08), inset 0 0 0 8px rgba(201,169,97,0.06);
+}
+.sw-stripe {
+  background: repeating-linear-gradient(90deg, #141416 0px, #141416 10px, #1c1c20 10px, #1c1c20 20px, #18181c 20px, #18181c 22px);
+}
+.sw-stripe::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(201,169,97,0.04), transparent 40%, transparent 60%, rgba(201,169,97,0.04));
+}
+.sw-chintz {
+  background:
+    radial-gradient(circle at 25% 35%, rgba(180,60,80,0.35) 0 6px, transparent 7px),
+    radial-gradient(circle at 55% 55%, rgba(60,100,70,0.3) 0 8px, transparent 9px),
+    radial-gradient(circle at 75% 30%, rgba(180,120,50,0.3) 0 5px, transparent 6px),
+    radial-gradient(circle at 40% 75%, rgba(140,50,80,0.25) 0 7px, transparent 8px),
+    radial-gradient(circle at 70% 70%, rgba(80,120,60,0.2) 0 4px, transparent 5px),
+    linear-gradient(180deg, #1a1412 0%, #221816 100%);
+}
+.sw-silk {
+  background:
+    linear-gradient(125deg, #14121a 0%, #1e1a28 30%, #18141e 50%, #221c2a 70%, #14121a 100%);
+}
+.sw-silk::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, transparent 30%, rgba(201,169,97,0.12) 48%, rgba(245,242,234,0.06) 50%, rgba(201,169,97,0.1) 52%, transparent 70%);
+}
+.sw-fresco {
+  background:
+    radial-gradient(ellipse 60% 40% at 40% 50%, rgba(160,130,90,0.15) 0%, transparent 60%),
+    linear-gradient(180deg, #1c1814 0%, #241e18 50%, #1a1612 100%);
+}
+.sw-fresco::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0.4;
+  background:
+    radial-gradient(circle at 20% 30%, rgba(245,242,234,0.06) 0 1px, transparent 1px),
+    radial-gradient(circle at 60% 70%, rgba(245,242,234,0.05) 0 1px, transparent 1px),
+    radial-gradient(circle at 80% 20%, rgba(245,242,234,0.04) 0 1px, transparent 1px),
+    radial-gradient(circle at 35% 80%, rgba(245,242,234,0.05) 0 1px, transparent 1px);
+  background-size: 18px 18px;
+}
+.sw-lacquer {
+  background: linear-gradient(160deg, #1a0808 0%, #2a1010 40%, #140606 100%);
+}
+.sw-lacquer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, transparent 40%, rgba(201,80,60,0.15) 50%, rgba(245,200,180,0.08) 52%, transparent 65%);
+}
+.sw-canvas {
+  background:
+    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(245,242,234,0.025) 1px, rgba(245,242,234,0.025) 2px),
+    repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(245,242,234,0.02) 1px, rgba(245,242,234,0.02) 2px),
+    linear-gradient(180deg, #1a1814, #201c18);
+}
+.sw-ink {
+  background:
+    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(245,242,234,0.06) 0%, transparent 50%),
+    linear-gradient(180deg, #0e0e12 0%, #16161c 100%);
+}
+.sw-ink::before {
+  content: '';
+  position: absolute;
+  left: 20%; right: 20%; top: 35%; bottom: 35%;
+  border-left: 1px solid rgba(245,242,234,0.12);
+  border-right: 1px solid rgba(245,242,234,0.08);
+}
+.sw-ink::after {
+  content: '';
+  position: absolute;
+  width: 60%; height: 1px;
+  left: 20%; top: 50%;
+  background: rgba(245,242,234,0.15);
+}
+.sw-tessellate {
+  background: #121014;
+}
+.sw-tessellate::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(30deg, transparent 48%, rgba(201,169,97,0.2) 49%, rgba(201,169,97,0.2) 51%, transparent 52%),
+    linear-gradient(-30deg, transparent 48%, rgba(201,169,97,0.15) 49%, rgba(201,169,97,0.15) 51%, transparent 52%),
+    linear-gradient(90deg, transparent 48%, rgba(201,169,97,0.1) 49%, rgba(201,169,97,0.1) 51%, transparent 52%);
+  background-size: 28px 48px;
+}
+
+/* ── Result ── */
+.result-inner {
+  width: 100%;
+  max-width: 1080px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+}
+
+.result-card {
+  width: min(100%, 540px);
+  aspect-ratio: 1 / 1;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius);
+}
+
+.rc-swatch {
+  height: 42%;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.rc-body {
+  flex: 1;
+  padding: 32px 36px 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--surface);
+  position: relative;
+}
+
+.rc-body::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 36px; right: 36px;
+  height: 1px;
+  background: var(--line);
+}
+
+.rc-eyebrow {
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.rc-title {
+  font-family: var(--serif);
+  font-size: clamp(28px, 5vw, 38px);
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin-bottom: 14px;
+}
+
+.rc-desc {
+  font-size: 14px;
+  line-height: 1.65;
+  color: var(--muted);
+  max-width: 36ch;
+}
+
+.rc-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+}
+
+.rc-brand {
+  font-family: var(--serif);
+  font-size: 9px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.rc-mark {
+  width: 20px; height: 20px;
+  border: 1px solid var(--accent-dim);
+  position: relative;
+}
+.rc-mark::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  background: var(--accent);
+  opacity: 0.5;
+}
+
+.result-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-ghost {
+  border-color: var(--line-strong);
+  color: var(--muted);
+}
+.btn-ghost:hover {
+  border-color: var(--ink);
+  color: var(--ink);
+  background: transparent;
+  box-shadow: none;
+}
+
+/* Large result swatches */
+.rsw-damask {
+  background:
+    radial-gradient(ellipse 35% 45% at 50% 50%, rgba(201,169,97,0.4) 0%, transparent 70%),
+    radial-gradient(circle at 25% 25%, rgba(201,169,97,0.25) 0 3px, transparent 4px),
+    radial-gradient(circle at 75% 25%, rgba(201,169,97,0.25) 0 3px, transparent 4px),
+    radial-gradient(circle at 25% 75%, rgba(201,169,97,0.25) 0 3px, transparent 4px),
+    radial-gradient(circle at 75% 75%, rgba(201,169,97,0.25) 0 3px, transparent 4px),
+    radial-gradient(circle at 50% 12%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 50% 88%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 12% 50%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    radial-gradient(circle at 88% 50%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+    linear-gradient(135deg, #1a1510 0%, #2e2418 50%, #1a1510 100%);
+  background-size: 100% 100%, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 100% 100%;
+}
+.rsw-damask::after {
+  content: '';
+  position: absolute;
+  inset: 16% 20%;
+  border: 1px solid rgba(201,169,97,0.3);
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  box-shadow: inset 0 0 30px rgba(201,169,97,0.12), 0 0 0 10px rgba(201,169,97,0.06), 0 0 0 11px rgba(201,169,97,0.1);
+}
+
+.rsw-minimal {
+  background: linear-gradient(180deg, #121214 0%, #1a1a1e 100%);
+}
+.rsw-minimal::before {
+  content: '';
+  position: absolute;
+  left: 15%; right: 15%;
+  top: 50%;
+  height: 1px;
+  background: rgba(245,242,234,0.2);
+}
+.rsw-minimal::after {
+  content: '';
+  position: absolute;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  border: 1px solid rgba(245,242,234,0.3);
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(245,242,234,0.08);
+}
+
+.rsw-boho {
+  background:
+    repeating-linear-gradient(60deg, transparent, transparent 10px, rgba(180,100,60,0.1) 10px, rgba(180,100,60,0.1) 11px),
+    repeating-linear-gradient(-60deg, transparent, transparent 10px, rgba(80,140,100,0.08) 10px, rgba(80,140,100,0.08) 11px),
+    radial-gradient(circle at 25% 35%, rgba(201,100,60,0.4) 0%, transparent 40%),
+    radial-gradient(circle at 75% 55%, rgba(100,60,120,0.35) 0%, transparent 38%),
+    radial-gradient(circle at 50% 75%, rgba(60,120,90,0.3) 0%, transparent 35%),
+    radial-gradient(circle at 60% 25%, rgba(180,140,60,0.25) 0%, transparent 30%),
+    linear-gradient(160deg, #1a1210 0%, #241818 40%, #1a1420 100%);
+}
+.rsw-boho::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 18% 65%, rgba(201,169,97,0.35) 0 4px, transparent 5px),
+    radial-gradient(circle at 82% 28%, rgba(201,169,97,0.3) 0 3px, transparent 4px),
+    radial-gradient(circle at 52% 22%, rgba(220,140,80,0.35) 0 3.5px, transparent 4.5px),
+    radial-gradient(circle at 38% 82%, rgba(140,80,160,0.3) 0 3px, transparent 4px),
+    radial-gradient(circle at 70% 78%, rgba(80,140,100,0.3) 0 2.5px, transparent 3.5px);
+}
+
+.rsw-deco {
+  background:
+    linear-gradient(135deg, transparent 42%, rgba(201,169,97,0.1) 42%, rgba(201,169,97,0.1) 58%, transparent 58%),
+    linear-gradient(45deg, #0c0b10 0%, #1a1822 50%, #0c0b10 100%);
+}
+.rsw-deco::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, transparent 0%, transparent 47%, rgba(201,169,97,0.5) 47%, rgba(201,169,97,0.5) 48%, transparent 48%, transparent 52%, rgba(201,169,97,0.5) 52%, rgba(201,169,97,0.5) 53%, transparent 53%),
+    linear-gradient(0deg, transparent 0%, transparent 28%, rgba(201,169,97,0.3) 28%, rgba(201,169,97,0.3) 29%, transparent 29%, transparent 71%, rgba(201,169,97,0.3) 71%, rgba(201,169,97,0.3) 72%, transparent 72%),
+    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(201,169,97,0.07) 14px, rgba(201,169,97,0.07) 15px);
+}
+.rsw-deco::after {
+  content: '';
+  position: absolute;
+  top: 50%; left: 50%;
+  width: 56px; height: 56px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border: 1px solid rgba(201,169,97,0.5);
+  box-shadow:
+    inset 0 0 0 10px transparent,
+    inset 0 0 0 11px rgba(201,169,97,0.2),
+    0 0 0 14px transparent,
+    0 0 0 15px rgba(201,169,97,0.1);
+}
+
+/* Fade-in for result */
+@keyframes riseIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.result-card {
+  animation: riseIn 0.7s var(--ease-out) both;
+}
+.result-actions {
+  animation: riseIn 0.7s var(--ease-out) 0.15s both;
+}
+
+/* Share toast */
+.toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--surface-2);
+  border: 1px solid var(--line-strong);
+  color: var(--ink);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 12px 24px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
+  z-index: 200;
+  border-radius: var(--radius);
+}
+.toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+</style>
+</head>
+<body>
+
+<header class="topbar">
+  <div class="wordmark">Designer Wallcoverings</div>
+  <div class="progress-wrap" id="progressWrap" hidden>
+    <span class="progress-label" id="progressLabel">1 / 5</span>
+    <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
+  </div>
+</header>
+
+<!-- INTRO -->
+<section class="stage active" id="stage-intro">
+  <div class="intro-inner">
+    <div class="hairline"></div>
+    <p class="eyebrow">A Style Edit</p>
+    <h1 class="display-title">What's Your<br>Wallcovering Style?</h1>
+    <p class="lead">Five considered questions. One defining aesthetic. Discover the paper that belongs on your walls.</p>
+    <button class="btn btn-solid" id="btnStart" type="button">Begin the Edit</button>
+  </div>
+</section>
+
+<!-- QUESTIONS -->
+<section class="stage" id="stage-quiz">
+  <div class="q-inner">
+    <p class="q-number" id="qNumber">Question 01</p>
+    <h2 class="q-title" id="qTitle"></h2>
+    <div class="tiles" id="tiles"></div>
+  </div>
+</section>
+
+<!-- RESULT -->
+<section class="stage" id="stage-result">
+  <div class="result-inner">
+    <div class="result-card" id="resultCard">
+      <div class="rc-swatch" id="rcSwatch"></div>
+      <div class="rc-body">
+        <div>
+          <p class="rc-eyebrow">Your Wallcovering Style</p>
+          <h2 class="rc-title" id="rcTitle"></h2>
+          <p class="rc-desc" id="rcDesc"></p>
+        </div>
+        <div class="rc-footer">
+          <span class="rc-brand">Designer Wallcoverings</span>
+          <span class="rc-mark" aria-hidden="true"></span>
+        </div>
+      </div>
+    </div>
+    <div class="result-actions">
+      <button class="btn btn-solid" id="btnShop" type="button">Shop this style</button>
+      <button class="btn btn-ghost" id="btnRetake" type="button">Retake the edit</button>
+    </div>
+  </div>
+</section>
+
+<div class="toast" id="toast">Style saved �� share your card</div>
+
+<script>
+(function () {
+  const QUESTIONS = [
+    {
+      title: "Which room draws you in first?",
+      answers: [
+        { label: "A paneled library", desc: "Candlelight, leather, quiet gravity", swatch: "sw-damask", scores: { damask: 2, deco: 1, minimal: 0, boho: 0 } },
+        { label: "A gallery-white loft", desc: "Air, light, uncompromised space", swatch: "sw-minimal", scores: { minimal: 2, deco: 1, damask: 0, boho: 0 } },
+        { label: "A collected salon", desc: "Layers, travel, lived-in richness", swatch: "sw-boho", scores: { boho: 2, damask: 1, minimal: 0, deco: 0 } },
+        { label: "A cocktail lounge", desc: "Mirror, brass, evening glamour", swatch: "sw-deco", scores: { deco: 2, damask: 1, minimal: 0, boho: 0 } }
+      ]
+    },
+    {
+      title: "Which surface would you touch?",
+      answers: [
+        { label: "Raised damask weave", desc: "Heirloom texture under the hand", swatch: "sw-linen", scores: { damask: 2, boho: 1, minimal: 0, deco: 0 } },
+        { label: "Matte grasscloth", desc: "Honest fiber, quiet grain", swatch: "sw-grasscloth", scores: { minimal: 2, boho: 1, damask: 0, deco: 0 } },
+        { label: "Embroidered velvet", desc: "Depth you can feel", swatch: "sw-velvet", scores: { boho: 2, deco: 1, damask: 1, minimal: 0 } },
+        { label: "Polished silk sheen", desc: "Light that moves with you", swatch: "sw-silk", scores: { deco: 2, damask: 1, minimal: 0, boho: 0 } }
+      ]
+    },
+    {
+      title: "Your ideal pattern language?",
+      answers: [
+        { label: "Ornate florals", desc: "Scrollwork and classical bloom", swatch: "sw-chintz", scores: { damask: 2, boho: 1, deco: 0, minimal: 0 } },
+        { label: "Barely-there line", desc: "Restraint as the statement", swatch: "sw-stripe", scores: { minimal: 2, deco: 1, damask: 0, boho: 0 } },
+        { label: "Wild botanicals", desc: "Jungle density, free spirit", swatch: "sw-botanical", scores: { boho: 2, damask: 1, minimal: 0, deco: 0 } },
+        { label: "Sunburst geometry", desc: "Fan motifs and hard edges", swatch: "sw-geometric", scores: { deco: 2, minimal: 1, damask: 0, boho: 0 } }
+      ]
+    },
+    {
+      title: "How do you entertain?",
+      answers: [
+        { label: "A seated dinner", desc: "Silver, crystal, conversation", swatch: "sw-toledo", scores: { damask: 2, deco: 1, boho: 0, minimal: 0 } },
+        { label: "An intimate tasting", desc: "Few guests, perfect details", swatch: "sw-marble", scores: { minimal: 2, deco: 1, damask: 0, boho: 0 } },
+        { label: "A long open house", desc: "Music, color, overflowing tables", swatch: "sw-fresco", scores: { boho: 2, damask: 1, deco: 0, minimal: 0 } },
+        { label: "A midnight soirée", desc: "Low light, high glamour", swatch: "sw-lacquer", scores: { deco: 2, damask: 1, boho: 0, minimal: 0 } }
+      ]
+    },
+    {
+      title: "What should the wall whisper?",
+      answers: [
+        { label: "Heritage & permanence", desc: "Rooms that outlast trends", swatch: "sw-moire", scores: { damask: 2, deco: 1, minimal: 0, boho: 0 } },
+        { label: "Calm & clarity", desc: "Space to think and breathe", swatch: "sw-ink", scores: { minimal: 2, damask: 0, deco: 0, boho: 0 } },
+        { label: "Story & soul", desc: "Every inch a chapter", swatch: "sw-canvas", scores: { boho: 2, damask: 1, deco: 0, minimal: 0 } },
+        { label: "Drama & precision", desc: "Architecture in two dimensions", swatch: "sw-tessellate", scores: { deco: 2, minimal: 1, damask: 0, boho: 0 } }
+      ]
+    }
+  ];
+
+  const RESULTS = {
+    damask: {
+      title: "Traditional Damask",
+      desc: "You gravitate toward heirloom elegance — ornate repeats, warm metallics, and rooms that feel quietly established. Think paneled libraries and dining rooms dressed for generations.",
+      swatch: "rsw-damask"
+    },
+    minimal: {
+      title: "Modern Minimalist",
+      desc: "Restraint is your luxury. Soft texture, disciplined line, and a palette that lets light do the work. Your walls frame life rather than compete with it.",
+      swatch: "rsw-minimal"
+    },
+    boho: {
+      title: "Bohemian Maximalist",
+      desc: "More is more — layered botanicals, saturated ground, and a collector's eye. Your rooms feel traveled, personal, and gloriously unrestrained.",
+      swatch: "rsw-boho"
+    },
+    deco: {
+      title: "Art Deco Glam",
+      desc: "Geometry, sheen, and evening glamour. You favor fan motifs, lacquered depth, and the kind of drama that turns a hallway into a grand entrance.",
+      swatch: "rsw-deco"
+    }
+  };
+
+  const scores = { damask: 0, minimal: 0, boho: 0, deco: 0 };
+  let current = 0;
+  let locked = false;
+
+  const $ = (id) => document.getElementById(id);
+  const stageIntro = $('stage-intro');
+  const stageQuiz = $('stage-quiz');
+  const stageResult = $('stage-result');
+  const progressWrap = $('progressWrap');
+  const progressLabel = $('progressLabel');
+  const progressFill = $('progressFill');
+  const qNumber = $('qNumber');
+  const qTitle = $('qTitle');
+  const tiles = $('tiles');
+  const toast = $('toast');
+
+  function showStage(next) {
+    const stages = [stageIntro, stageQuiz, stageResult];
+    const currentStage = stages.find(s => s.classList.contains('active'));
+    if (currentStage === next) return;
+    if (currentStage) {
+      currentStage.classList.add('leaving');
+      setTimeout(() => {
+        currentStage.classList.remove('active', 'leaving');
+        next.classList.add('active');
+      }, 280);
+    } else {
+      next.classList.add('active');
+    }
+  }
+
+  function updateProgress() {
+    const n = current + 1;
+    progressLabel.textContent = n + ' / 5';
+    progressFill.style.width = ((n - 1) / 5 * 100) + '%';
+  }
+
+  function renderQuestion() {
+    locked = false;
+    const q = QUESTIONS[current];
+    qNumber.textContent = 'Question 0' + (current + 1);
+    qTitle.textContent = q.title;
+    tiles.innerHTML = '';
+    updateProgress();
+
+    q.answers.forEach((a, i) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'tile';
+      btn.style.animation = 'riseIn 0.5s var(--ease-out) ' + (i * 0.06) + 's both';
+      btn.innerHTML =
+        '<div class="tile-swatch ' + a.swatch + '"></div>' +
+        '<div class="tile-body">' +
+          '<div class="tile-label">' + a.label + '</div>' +
+          '<div class="tile-desc">' + a.desc + '</div>' +
+        '</div>';
+      btn.addEventListener('click', () => selectAnswer(btn, a));
+      tiles.appendChild(btn);
+    });
+  }
+
+  function selectAnswer(btn, answer) {
+    if (locked) return;
+    locked = true;
+    btn.classList.add('selected');
+    Object.keys(answer.scores).forEach(k => {
+      scores[k] += answer.scores[k];
+    });
+    setTimeout(() => {
+      if (current < QUESTIONS.length - 1) {
+        current++;
+        // brief exit
+        tiles.style.opacity = '0';
+        tiles.style.transform = 'translateY(-8px)';
+        tiles.style.transition = 'opacity 0.3s var(--ease), transform 0.3s var(--ease)';
+        setTimeout(() => {
+          tiles.style.transition = 'none';
+          tiles.style.opacity = '1';
+          tiles.style.transform = 'none';
+          renderQuestion();
+          // force reflow then restore transition readiness
+          void tiles.offsetWidth;
+          tiles.style.transition = '';
+        }, 300);
+      } else {
+        progressFill.style.width = '100%';
+        showResult();
+      }
+    }, 420);
+  }
+
+  function showResult() {
+    let best = 'damask';
+    let bestScore = -1;
+    Object.keys(scores).forEach(k => {
+      if (scores[k] > bestScore) {
+        bestScore = scores[k];
+        best = k;
+      }
+    });
+    const r = RESULTS[best];
+    const sw = $('rcSwatch');
+    sw.className = 'rc-swatch ' + r.swatch;
+    $('rcTitle').textContent = r.title;
+    $('rcDesc').textContent = r.desc;
+    progressWrap.hidden = true;
+    showStage(stageResult);
+  }
+
+  function reset() {
+    scores.damask = scores.minimal = scores.boho = scores.deco = 0;
+    current = 0;
+    progressFill.style.width = '0%';
+    progressWrap.hidden = false;
+    showStage(stageQuiz);
+    setTimeout(renderQuestion, 300);
+  }
+
+  $('btnStart').addEventListener('click', () => {
+    progressWrap.hidden = false;
+    showStage(stageQuiz);
+    setTimeout(renderQuestion, 300);
+  });
+
+  $('btnRetake').addEventListener('click', reset);
+
+  $('btnShop').addEventListener('click', () => {
+    toast.classList.add('show');
+    setTimeout(() => toast.classList.remove('show'), 2200);
+  });
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/grok.png b/data/artifacts/e65340723412/grok.png
new file mode 100644
index 0000000..11889da
Binary files /dev/null and b/data/artifacts/e65340723412/grok.png differ
diff --git a/data/artifacts/e65340723412/hermes3-8b.html b/data/artifacts/e65340723412/hermes3-8b.html
new file mode 100644
index 0000000..7890ce7
--- /dev/null
+++ b/data/artifacts/e65340723412/hermes3-8b.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style Quiz?</title>
+<style>
+  :root {
+    --bg: #faf8f4;
+    --surface: #ffffff;
+    --text: #1c1a17;
+    --muted: #9b948a;
+    --accent: #b0472e / #2f4c39;
+    --line: 1px solid #000;
+    --shadow: 0 8px 24px rgba(0,0,0,.12);
+    --ease: cubic-bezier(.22,1,.36,1);
+  }
+  
+  body {
+    background-color: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    margin: 0;
+    padding: 96px;
+  }
+
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--bg);
+    padding: 16px 24px;
+  }
+  
+  h1 {
+    font-size: 50px;
+    letter-spacing: .18em;
+    margin: 0;
+  }
+
+  .wordmark {
+    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif; 
+    color: var(--text);
+    font-size: 24px;
+  }
+  
+  .scoreboard {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 1080px;
+    background-color: var(--bg);
+    margin-top: 48px;
+    border-radius: 14px;
+    box-shadow: var(--shadow);
+    box-sizing: border-box;
+    padding: 24px;
+    color: var(--text);
+    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    text-transform: uppercase;
+    letter-spacing: .15em;
+    font-size: 28px;
+  }
+
+  .swatch {
+    display: flex;
+    gap: 24px;  
+    padding-bottom: 24px;
+  }
+  
+  .swatch a {
+    display: block;
+    width: 150px;
+    height: 150px;
+    background-color: var(--accent);
+    color: var(--text); 
+    text-decoration: none;
+    border-radius: 14px;
+    box-shadow: 0 16px 48px rgba(0,0,0,.18);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 42px;
+    color: var(--text);
+    text-transform: uppercase;
+  }
+
+  .swatch a::after {
+    content: '';
+    width: 120%;
+    height: 120%;
+    background-color: rgba(var(--accent),.2);
+    border-radius: 50%;
+    box-shadow: 0 0 24px var(--accent@35%);
+    position: absolute;
+    top: -10%; left: -5%;
+  }
+  
+  .result {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 32px; 
+  }
+
+  .description, .shop {
+    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    color: var(--text);
+    text-transform: uppercase;
+    letter-spacing: .15em;
+    font-size: 28px;
+  }
+  
+  .description {
+    margin-right: 24px;
+  }
+
+  .shop a {
+    display: block;
+    background-color: var(--accent);
+    color: var(--surface);
+    padding: 8px 16px;
+    border-radius: 14px;
+    text-decoration: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,.1);
+  }
+
+  @keyframes fadeUp {
+    from {opacity:0; transform: translateY(28px)}
+    to {opacity:1; transform: translateY(0)} 
+  }
+  
+  .animated {
+    animation: fadeUp .7s var(--ease) both;
+    animation-delay: calc(var(--index) * 90ms);
+  }
+
+  @keyframes gradientDrift {
+    from {background-position-left: 0%;}
+    to {background-position-right: 100%}
+  }
+  
+  .drifting-bg {
+    position: fixed;
+    top: 0;
+    left: 0; 
+    width: 100%;
+    height: 200vh;
+    background-image: linear-gradient(var(--accent), transparent);
+    animation: gradientDrift 18s var(--ease) linear infinite;
+  }
+</style>
+</head>
+<body>
+<div class="fixed-top">
+  <div class="wordmark">DESIGNER WALLCOVERINGS</div>
+</div>
+
+<div class="drifting-bg"></div>
+
+<form class="scoreboard" id="quiz-form">
+  <div class="swatch" id="swatch-grid">
+    <!-- dynamically fill with JavaScript -->
+  </div>
+  
+  <button type="submit">Your Style Result</button>
+</form>
+
+<script>
+// 5 questions x ~4 swatches each = 20 swatches total 
+const swatchesPerQuestion = 4;
+let score = {traditional:0, modern:0, boho:0, artdeco:0};
+
+function selectAnswer(questionId) {
+  return function(ev) {
+    const swatch = ev.target;
+    const style = swatch.dataset.style;  
+    score[style]++;
+    swatch.classList.add('selected');
+    
+    if (Object.values(score).every(s => s === swatchesPerQuestion)) {
+      // all questions answered, show result
+      setTimeout(() => {
+        document.querySelector('#quiz-form button').click();  // submit form to show result
+      }, 500);      
+    }
+  };
+}
+
+document.querySelectorAll('.swatch a').forEach((swatch, index) => {
+  swatch.dataset.index = index;
+  swatch.classList.add('animated');
+  
+  const style = swatch.getAttribute('href').slice(1);
+  swatch.style.backgroundColor = `var(--accent-${style})`;
+  swatch.textContent = style[0];
+
+  swatch.addEventListener('click', selectAnswer(index));
+});
+
+document.getElementById('quiz-form').addEventListener('submit', function(ev) {
+  ev.preventDefault();
+  
+  const bestScore = Math.max(...Object.values(score));
+  const [bestStyle] = Object.entries(score).filter(([style, score]) => score === bestScore);
+  
+  document.querySelector('.scoreboard').innerHTML = `
+    <div class="result">
+      <span class="description">Your Best Style: ${bestStyle}</span>
+      <a href="${bestStyle}" class="shop">Shop This Style</a>
+    </div>
+  `;
+
+});
+
+// populate swatch grid
+document.querySelector('#swatch-grid').innerHTML = 
+`<div class="animated selected" style="--index:0;"></div>
+<div class="animated selected" style="--index:1;"></div>
+<div class="animated selected" style="--index:2;"></div>
+<div class="animated selected" style="--index:3;"></div>
+`.repeat(Math.ceil(swatchesPerQuestion / 4));
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/hermes3-8b.png b/data/artifacts/e65340723412/hermes3-8b.png
new file mode 100644
index 0000000..8f4563e
Binary files /dev/null and b/data/artifacts/e65340723412/hermes3-8b.png differ
diff --git a/data/artifacts/e65340723412/hf-qwen-coder-32b.html b/data/artifacts/e65340723412/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..3710ba1
--- /dev/null
+++ b/data/artifacts/e65340723412/hf-qwen-coder-32b.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style?</title>
+<style>
+:root {
+    --bg: #faf8f4;
+    --surface: #ffffff;
+    --text: #1c1a17;
+    --muted: #9b948a;
+    --accent: #b0472e;
+    --line: #dcdcdc;
+    --shadow: rgba(0, 0, 0, .12);
+    --hover-shadow: rgba(0, 0, 0, .18);
+    --glow: rgba(176, 71, 46, .35);
+    --ease: cubic-bezier(.22, 1, .36, 1);
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    color: var(--text);
+    background-color: var(--bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 24px;
+    background-color: var(--bg);
+    z-index: 100;
+}
+
+.logo {
+    font-family: 'Playfair Display', Georgia, serif;
+    font-size: 28px;
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    margin: 0;
+}
+
+main {
+    padding-top: 96px;
+    width: 100%;
+    max-width: 768px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.question {
+    font-size: 38px;
+    margin-bottom: 48px;
+    text-align: center;
+}
+
+.answers {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 24px;
+    width: 100%;
+}
+
+.tile {
+    background-color: var(--surface);
+    border-radius: 14px;
+    box-shadow: 0 8px 24px var(--shadow);
+    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.tile::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    transition: opacity .3s var(--ease);
+    opacity: 0.8;
+}
+
+.tile:hover {
+    box-shadow: 0 16px 48px var(--hover-shadow);
+    transform: translateY(-4px);
+}
+
+.tile:hover::before {
+    opacity: 1;
+}
+
+.swatch {
+    width: 100%;
+    padding-top: 100%; /* Square aspect ratio */
+}
+
+.result-card {
+    background-color: var(--surface);
+    border-radius: 14px;
+    box-shadow: 0 8px 24px var(--shadow);
+    width: 90%;
+    max-width: 500px;
+    padding: 32px;
+    margin-top: 64px;
+    text-align: center;
+}
+
+.result-title {
+    font-size: 48px;
+    margin-bottom: 16px;
+}
+
+.result-description {
+    font-size: 21px;
+    color: var(--muted);
+    margin-bottom: 32px;
+}
+
+.shop-button {
+    background-color: var(--accent);
+    border-radius: 8px;
+    padding: 12px 24px;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: .15em;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    transition: background-color .3s var(--ease);
+}
+
+.shop-button:hover {
+    background-color: #802e1f;
+}
+</style>
+</head>
+<body>
+<header>
+    <h1 class="logo">DESIGNER WALLCOVERINGS</h1>
+</header>
+<main>
+    <div id="quiz">
+        <div class="question">What is your preferred room aesthetic?</div>
+        <div class="answers">
+            <div class="tile" data-style="traditional-damask" onclick="selectStyle(this)">
+                <div class="swatch" style="background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,0 L75,50 H50 V100 H25 L50,50 Z' fill='%23c9a961'/><path d='M50,0 L25,50 H50 V100 H75 L50,50 Z' fill='%238d7bb0'/></svg>);"></div>
+            </div>
+            <div class="tile" data-style="modern-minimalist" onclick="selectStyle(this)">
+                <div class="swatch" style="background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='50' height='50' x='25' y='25' fill='%23b0472e'/><path d='M50,0 L75,50 H50 V100 H25 L50,50 Z' fill='%23f5f2ea'/></svg>);"></div>
+            </div>
+            <div class="tile" data-style="bohemian-maximalist" onclick="selectStyle(this)">
+                <div class="swatch" style="background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23e0a458'/><rect width='20' height='20' x='40' y='40' fill='%23c65f38'/></svg>);"></div>
+            </div>
+            <div class="tile" data-style="art-deco-glam" onclick="selectStyle(this)">
+                <div class="swatch" style="background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23ff2e88'/><path d='M50,0 L75,50 H50 V100 H25 L50,50 Z' fill='%2300e5ff'/></svg>);"></div>
+            </div>
+        </div>
+    </div>
+    <div id="result" style="display: none;">
+        <div class="result-card">
+            <div class="swatch" id="result-swatch" style="background-image: url();"></div>
+            <h2 class="result-title" id="result-title"></h2>
+            <p class="result-description" id="result-description"></p>
+            <button class="shop-button">Shop this style</button>
+        </div>
+    </div>
+</main>
+<script>
+const styles = {
+    "traditional-damask": {
+        title: "Traditional Damask",
+        description: "Elevate your space with intricate, timeless patterns that exude sophistication and elegance.",
+        swatch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,0 L75,50 H50 V100 H25 L50,50 Z' fill='%23c9a961'/><path d='M50,0 L25,50 H50 V100 H75 L50,50 Z' fill='%238d7bb0'/></svg>"
+    },
+    "modern-minimalist": {
+        title: "Modern Minimalist",
+        description: "Embrace simplicity with clean lines and neutral tones that create a serene, contemporary atmosphere.",
+        swatch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='50' height='50' x='25' y='25' fill='%23b0472e'/><path d='M50,0 L75,50 H50 V100 H25 L50,50 Z' fill='%23f5f2ea'/></svg>"
+    },
+    "bohemian-maximalist": {
+        title: "Bohemian Maximalist",
+        description: "Indulge in rich textures and vibrant colors that celebrate individuality and creativity.",
+        swatch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23e0a458'/><rect width='20' height='20' x='40' y='40' fill='%23c65f38'/></svg>"
+    },
+    "art-deco-glam": {
+        title: "Art Deco Glam",
+        description: "Shine with opulent, geometric designs that radiate luxury and glamour.",
+        swatch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23ff2e88'/><path d='M50,0 L75,50 H50 V100 H25 L50,50 Z' fill='%2300e5ff'/></svg>"
+    }
+};
+
+let scores = {
+    "traditional-damask": 0,
+    "modern-minimalist": 0,
+    "bohemian-maximalist": 0,
+    "art-deco-glam": 0
+};
+
+function selectStyle(tile) {
+    const style = tile.getAttribute("data-style");
+    scores[style]++;
+    tile.style.pointerEvents = 'none';
+    tile.classList.add('selected');
+
+    if (Object.values(scores).filter(score => score > 0).length === 5) {
+        calculateResult();
+    }
+}
+
+function calculateResult() {
+    let maxScore = -1;
+    let resultStyle = null;
+
+    for (const style in scores) {
+        if (scores[style] > maxScore) {
+            maxScore = scores[style];
+            resultStyle = style;
+        }
+    }
+
+    document.getElementById('result-title').textContent = styles[resultStyle].title;
+    document.getElementById('result-description').textContent = styles[resultStyle].description;
+    document.getElementById('result-swatch').style.backgroundImage = styles[resultStyle].swatch;
+
+    document.getElementById('quiz').style.display = 'none';
+    document.getElementById('result').style.display = 'block';
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/hf-qwen-coder-32b.png b/data/artifacts/e65340723412/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..c4d06d4
Binary files /dev/null and b/data/artifacts/e65340723412/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/e65340723412/kimi.html b/data/artifacts/e65340723412/kimi.html
new file mode 100644
index 0000000..066fff9
--- /dev/null
+++ b/data/artifacts/e65340723412/kimi.html
@@ -0,0 +1,718 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style? | Designer Wallcoverings</title>
+<style>
+:root {
+  /* Luxe-Noir Palette */
+  --bg: #0d0d0f;
+  --surface: #17171c;
+  --ink: #f5f2ea;
+  --muted: #8a8578;
+  --accent: #c9a961;
+  --accent-alpha: rgba(201, 169, 97, 0.35);
+  --line: rgba(245, 242, 234, 0.12);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
+  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
+  --shadow-xl: 0 16px 48px rgba(0,0,0,.18);
+  --glow: 0 0 24px 2px var(--accent-alpha);
+  
+  /* Typography */
+  --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+  --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  
+  /* Motion */
+  --ease-swift: cubic-bezier(.22,.9,.24,1);
+  --ease-power: cubic-bezier(.77,0,.18,1);
+  --duration-micro: 200ms;
+  --duration-entrance: 600ms;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--ink);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Fixed Header */
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 1.5rem 2rem;
+  background: linear-gradient(to bottom, var(--bg) 60%, transparent);
+  pointer-events: none;
+}
+
+.wordmark {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+  max-width: 220px;
+  line-height: 1.4;
+  pointer-events: auto;
+}
+
+/* Main Container */
+.quiz-container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 6rem 2rem 4rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Screen States */
+.screen {
+  display: none;
+  animation: fadeIn var(--duration-entrance) var(--ease-swift) forwards;
+  flex: 1;
+}
+
+.screen.active {
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Intro Screen */
+.intro {
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  gap: 3rem;
+}
+
+.intro h1 {
+  font-family: var(--font-display);
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  max-width: 800px;
+}
+
+.intro p {
+  font-size: 1.125rem;
+  color: var(--muted);
+  max-width: 500px;
+}
+
+/* Button Styles */
+.btn-primary {
+  font-family: var(--font-body);
+  font-size: 0.6875rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  padding: 1.25rem 3rem;
+  background: var(--accent);
+  color: var(--bg);
+  border: none;
+  cursor: pointer;
+  transition: all var(--duration-micro) var(--ease-swift);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg), var(--glow);
+}
+
+/* Question Screen */
+.question-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.progress {
+  font-size: 0.6875rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 1.5rem;
+}
+
+.question-text {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 4vw, 2.375rem);
+  line-height: 1.2;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+/* Answer Grid */
+.answers {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.answer-tile {
+  position: relative;
+  aspect-ratio: 4/3;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  cursor: pointer;
+  overflow: hidden;
+  transition: all var(--duration-micro) var(--ease-swift);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.answer-tile:hover {
+  transform: translateY(-4px);
+  border-color: var(--accent);
+  box-shadow: var(--shadow-lg);
+}
+
+.answer-tile::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 0%, var(--accent-alpha), transparent 70%);
+  opacity: 0;
+  transition: opacity var(--duration-micro) var(--ease-swift);
+}
+
+.answer-tile:hover::before {
+  opacity: 1;
+}
+
+.tile-pattern {
+  width: 60%;
+  height: 50%;
+  position: relative;
+}
+
+.tile-label {
+  font-size: 0.6875rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  transition: color var(--duration-micro) var(--ease-swift);
+}
+
+.answer-tile:hover .tile-label {
+  color: var(--ink);
+}
+
+/* CSS Pattern Illustrations */
+
+/* Traditional Damask Pattern */
+.pattern-damask {
+  background: 
+    radial-gradient(ellipse 80% 50% at 50% 50%, transparent 40%, var(--accent) 41%, var(--accent) 43%, transparent 44%),
+    radial-gradient(circle at 25% 25%, var(--accent) 8%, transparent 9%),
+    radial-gradient(circle at 75% 25%, var(--accent) 8%, transparent 9%),
+    radial-gradient(circle at 25% 75%, var(--accent) 8%, transparent 9%),
+    radial-gradient(circle at 75% 75%, var(--accent) 8%, transparent 9%);
+  background-size: 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+  opacity: 0.6;
+}
+
+/* Modern Minimalist Pattern */
+.pattern-minimal {
+  background: 
+    linear-gradient(90deg, var(--ink) 1px, transparent 1px),
+    linear-gradient(var(--ink) 1px, transparent 1px);
+  background-size: 25% 25%;
+  opacity: 0.15;
+}
+
+/* Bohemian Pattern */
+.pattern-boho {
+  background: 
+    radial-gradient(circle at 30% 30%, var(--accent) 3%, transparent 4%),
+    radial-gradient(circle at 70% 70%, #8a6f47 3%, transparent 4%),
+    radial-gradient(circle at 50% 80%, var(--muted) 4%, transparent 5%),
+    radial-gradient(circle at 80% 40%, var(--accent) 2%, transparent 3%);
+  background-size: 40% 40%;
+  opacity: 0.7;
+}
+
+/* Art Deco Pattern */
+.pattern-deco {
+  background: 
+    linear-gradient(45deg, transparent 45%, var(--accent) 45%, var(--accent) 55%, transparent 55%),
+    linear-gradient(-45deg, transparent 45%, var(--accent) 45%, var(--accent) 55%, transparent 55%);
+  background-size: 30% 30%;
+  opacity: 0.5;
+}
+
+/* Additional patterns for variety */
+.pattern-floral {
+  background: 
+    radial-gradient(circle at 50% 50%, var(--accent) 15%, transparent 16%),
+    radial-gradient(circle at 0% 50%, var(--accent) 10%, transparent 11%),
+    radial-gradient(circle at 100% 50%, var(--accent) 10%, transparent 11%);
+  background-size: 50% 50%;
+  opacity: 0.5;
+}
+
+.pattern-geo {
+  background: 
+    conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--ink) 0deg, var(--ink) 90deg, transparent 90deg);
+  background-size: 25% 25%;
+  opacity: 0.1;
+}
+
+.pattern-abstract {
+  background: 
+    radial-gradient(ellipse 60% 30% at 30% 30%, var(--accent) 20%, transparent 21%),
+    radial-gradient(ellipse 40% 60% at 70% 60%, #6b5b45 25%, transparent 26%);
+  background-size: 60% 60%;
+  opacity: 0.6;
+}
+
+.pattern-stripe {
+  background: repeating-linear-gradient(
+    90deg,
+    transparent,
+    transparent 20%,
+    var(--accent) 20%,
+    var(--accent) 22%
+  );
+  opacity: 0.3;
+}
+
+/* Result Card */
+.result-card {
+  width: 100%;
+  max-width: 1080px;
+  aspect-ratio: 1;
+  background: var(--surface);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-xl);
+}
+
+.result-pattern {
+  position: absolute;
+  inset: 0;
+  opacity: 0.15;
+}
+
+.result-content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 4rem;
+  gap: 2rem;
+}
+
+.result-style {
+  font-size: 0.6875rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.result-title {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  max-width: 600px;
+}
+
+.result-description {
+  font-size: 1.125rem;
+  color: var(--muted);
+  max-width: 500px;
+  line-height: 1.7;
+}
+
+.result-swatch {
+  width: 200px;
+  height: 200px;
+  border: 1px solid var(--line);
+  position: relative;
+  margin: 2rem 0;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+.swatch-inner {
+  position: absolute;
+  inset: 8px;
+  border: 1px solid var(--accent);
+}
+
+.result-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--line);
+  background: linear-gradient(to top, var(--surface), transparent);
+}
+
+.brand-lockup {
+  font-family: var(--font-display);
+  font-size: 0.625rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* Specific Result Patterns */
+
+/* Traditional Damask Result Pattern */
+.result-damask {
+  background-color: #1a1815;
+  background-image: 
+    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 35%, rgba(201, 169, 97, 0.3) 36%, rgba(201, 169, 97, 0.3) 40%, transparent 41%),
+    radial-gradient(circle at 0% 0%, rgba(201, 169, 97, 0.2) 20%, transparent 21%),
+    radial-gradient(circle at 100% 0%, rgba(201, 169, 97, 0.2) 20%, transparent 21%),
+    radial-gradient(circle at 0% 100%, rgba(201, 169, 97, 0.2) 20%, transparent 21%),
+    radial-gradient(circle at 100% 100%, rgba(201, 169, 97, 0.2) 20%, transparent 21%);
+  background-size: 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+}
+
+/* Modern Minimalist Result Pattern */
+.result-minimal {
+  background-color: #f5f2ea;
+  background-image: 
+    linear-gradient(90deg, var(--bg) 1px, transparent 1px),
+    linear-gradient(var(--bg) 1px, transparent 1px);
+  background-size: 60px 60px;
+}
+
+.result-minimal .result-title,
+.result-minimal .result-style {
+  color: var(--bg);
+}
+
+.result-minimal .result-description {
+  color: #6b6860;
+}
+
+.result-minimal .result-content {
+  background: rgba(245, 242, 234, 0.95);
+}
+
+/* Bohemian Result Pattern */
+.result-boho {
+  background-color: #2a2420;
+  background-image: 
+    radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.4) 15%, transparent 16%),
+    radial-gradient(circle at 80% 20%, rgba(138, 111, 71, 0.5) 20%, transparent 21%),
+    radial-gradient(circle at 60% 70%, rgba(201, 169, 97, 0.3) 25%, transparent 26%),
+    radial-gradient(circle at 30% 80%, rgba(138, 133, 120, 0.4) 18%, transparent 19%),
+    radial-gradient(circle at 90% 60%, rgba(201, 169, 97, 0.35) 12%, transparent 13%);
+  background-size: 80px 80px;
+}
+
+/* Art Deco Result Pattern */
+.result-deco {
+  background-color: #0f0f12;
+  background-image: 
+    linear-gradient(30deg, transparent 45%, rgba(201, 169, 97, 0.4) 45%, rgba(201, 169, 97, 0.4) 55%, transparent 55%),
+    linear-gradient(-30deg, transparent 45%, rgba(201, 169, 97, 0.4) 45%, rgba(201, 169, 97, 0.4) 55%, transparent 55%),
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 40px,
+      rgba(201, 169, 97, 0.15) 40px,
+      rgba(201, 169, 97, 0.15) 42px
+    );
+  background-size: 80px 80px, 80px 80px, 100% 100%;
+}
+
+/* Utility */
+.hidden {
+  display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .answers {
+    grid-template-columns: 1fr;
+  }
+  
+  .quiz-container {
+    padding: 5rem 1rem 2rem;
+  }
+  
+  .result-content {
+    padding: 2rem;
+  }
+  
+  .result-swatch {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>
+</head>
+<body>
+
+<header class="header">
+  <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<div class="quiz-container">
+
+  <!-- Intro Screen -->
+  <section class="screen intro active" id="intro">
+    <h1>What's Your Wallcovering Style?</h1>
+    <p>Discover your interior design personality through five evocative questions. Your perfect walls await.</p>
+    <button class="btn-primary" onclick="startQuiz()">Begin the Quiz</button>
+  </section>
+
+  <!-- Question Screens -->
+  <section class="screen" id="question-container">
+    <div class="question-header">
+      <div class="progress" id="progress">Question 1 of 5</div>
+      <h2 class="question-text" id="question-text">Which room calls to you?</h2>
+    </div>
+    <div class="answers" id="answers-container">
+      <!-- Dynamically populated -->
+    </div>
+  </section>
+
+  <!-- Result Screen -->
+  <section class="screen" id="result">
+    <div class="result-card" id="result-card">
+      <div class="result-pattern" id="result-pattern"></div>
+      <div class="result-content">
+        <div class="result-style">Your Style</div>
+        <h2 class="result-title" id="result-title">Traditional Damask</h2>
+        <div class="result-swatch">
+          <div class="swatch-inner">
+            <div class="tile-pattern" id="swatch-pattern" style="width: 100%; height: 100%;"></div>
+          </div>
+        </div>
+        <p class="result-description" id="result-description">
+          Timeless elegance and sophisticated heritage patterns define your aesthetic. You gravitate toward rich textures and classical beauty.
+        </p>
+        <button class="btn-primary">Shop This Style</button>
+      </div>
+      <div class="result-footer">
+        <span class="brand-lockup">Designer Wallcoverings</span>
+      </div>
+    </div>
+  </section>
+
+</div>
+
+<script>
+// Quiz Data
+const questions = [
+  {
+    text: "Which setting stirs your soul?",
+    answers: [
+      { label: "A grand library with velvet drapes", style: "damask", pattern: "pattern-damask" },
+      { label: "A sunlit loft with concrete floors", style: "minimal", pattern: "pattern-minimal" },
+      { label: "A Moroccan riad with tile mosaics", style: "boho", pattern: "pattern-boho" },
+      { label: "A jazz-age ballroom with gold leaf", style: "deco", pattern: "pattern-deco" }
+    ]
+  },
+  {
+    text: "Choose your ideal weekend pursuit:",
+    answers: [
+      { label: "Antiquing for heirloom treasures", style: "damask", pattern: "pattern-floral" },
+      { label: "Museum hopping for contemporary art", style: "minimal", pattern: "pattern-geo" },
+      { label: "Exploring a vibrant street market", style: "boho", pattern: "pattern-abstract" },
+      { label: "Attending an elegant gala", style: "deco", pattern: "pattern-stripe" }
+    ]
+  },
+  {
+    text: "Which palette speaks to you?",
+    answers: [
+      { label: "Deep burgundy and gold", style: "damask", pattern: "pattern-damask" },
+      { label: "Warm white and charcoal", style: "minimal", pattern: "pattern-minimal" },
+      { label: "Terracotta and sage", style: "boho", pattern: "pattern-boho" },
+      { label: "Emerald and brass", style: "deco", pattern: "pattern-deco" }
+    ]
+  },
+  {
+    text: "Your signature textile would be:",
+    answers: [
+      { label: "Embroidered silk brocade", style: "damask", pattern: "pattern-floral" },
+      { label: "Raw Belgian linen", style: "minimal", pattern: "pattern-geo" },
+      { label: "Hand-woven kilim", style: "boho", pattern: "pattern-abstract" },
+      { label: "Geometric velvet", style: "deco", pattern: "pattern-stripe" }
+    ]
+  },
+  {
+    text: "The object you covet most:",
+    answers: [
+      { label: "An ornate gilt mirror", style: "damask", pattern: "pattern-damask" },
+      { label: "A sculptural ceramic vessel", style: "minimal", pattern: "pattern-minimal" },
+      { label: "A collection of vintage ceramics", style: "boho", pattern: "pattern-boho" },
+      { label: "A lacquered bar cart", style: "deco", pattern: "pattern-deco" }
+    ]
+  }
+];
+
+const results = {
+  damask: {
+    title: "Traditional Damask",
+    description: "Timeless elegance and sophisticated heritage patterns define your aesthetic. You gravitate toward rich textures, symmetrical beauty, and the enduring romance of classical design.",
+    patternClass: "result-damask",
+    swatchPattern: "pattern-damask"
+  },
+  minimal: {
+    title: "Modern Minimalist",
+    description: "Clarity, restraint, and intention guide your choices. You find beauty in negative space, honest materials, and the quiet confidence of less-is-more sophistication.",
+    patternClass: "result-minimal",
+    swatchPattern: "pattern-minimal"
+  },
+  boho: {
+    title: "Bohemian Maximalist",
+    description: "Layered, collected, and utterly personal—your spaces tell stories of travels and treasures. You embrace pattern mixing, warm earth tones, and the art of curated abundance.",
+    patternClass: "result-boho",
+    swatchPattern: "pattern-boho"
+  },
+  deco: {
+    title: "Art Deco Glam",
+    description: "Bold geometry meets unapologetic luxury in your vision. You are drawn to sunburst motifs, metallic finishes, and the confident drama of the Jazz Age reimagined.",
+    patternClass: "result-deco",
+    swatchPattern: "pattern-deco"
+  }
+};
+
+// State
+let currentQuestion = 0;
+let scores = { damask: 0, minimal: 0, boho: 0, deco: 0 };
+
+// DOM Elements
+const introScreen = document.getElementById('intro');
+const questionScreen = document.getElementById('question-container');
+const resultScreen = document.getElementById('result');
+const questionText = document.getElementById('question-text');
+const answersContainer = document.getElementById('answers-container');
+const progressText = document.getElementById('progress');
+
+function startQuiz() {
+  introScreen.classList.remove('active');
+  questionScreen.classList.add('active');
+  showQuestion();
+}
+
+function showQuestion() {
+  const q = questions[currentQuestion];
+  questionText.textContent = q.text;
+  progressText.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
+  
+  answersContainer.innerHTML = '';
+  
+  q.answers.forEach((answer, index) => {
+    const tile = document.createElement('div');
+    tile.className = 'answer-tile';
+    tile.style.animationDelay = `${index * 80}ms`;
+    tile.innerHTML = `
+      <div class="tile-pattern ${answer.pattern}"></div>
+      <span class="tile-label">${answer.label}</span>
+    `;
+    tile.addEventListener('click', () => selectAnswer(answer.style));
+    answersContainer.appendChild(tile);
+  });
+}
+
+function selectAnswer(style) {
+  scores[style]++;
+  currentQuestion++;
+  
+  if (currentQuestion < questions.length) {
+    // Fade out effect
+    questionScreen.style.opacity = '0';
+    questionScreen.style.transform = 'translateY(-20px)';
+    questionScreen.style.transition = 'all 300ms cubic-bezier(.22,.9,.24,1)';
+    
+    setTimeout(() => {
+      questionScreen.style.opacity = '1';
+      questionScreen.style.transform = 'translateY(0)';
+      showQuestion();
+    }, 300);
+  } else {
+    showResult();
+  }
+}
+
+function showResult() {
+  questionScreen.classList.remove('active');
+  resultScreen.classList.add('active');
+  
+  // Calculate winner
+  let winner = 'damask';
+  let maxScore = 0;
+  
+  for (const [style, score] of Object.entries(scores)) {
+    if (score > maxScore) {
+      maxScore = score;
+      winner = style;
+    }
+  }
+  
+  const result = results[winner];
+  
+  // Update result content
+  document.getElementById('result-title').textContent = result.title;
+  document.getElementById('result-description').textContent = result.description;
+  document.getElementById('result-pattern').className = `result-pattern ${result.patternClass}`;
+  document.getElementById('swatch-pattern').className = `tile-pattern ${result.swatchPattern}`;
+  
+  // Handle light/dark result cards
+  const card = document.getElementById('result-card');
+  if (winner === 'minimal') {
+    card.style.background = '#f5f2ea';
+    card.style.color = '#0d0d0f';
+  }
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/kimi.png b/data/artifacts/e65340723412/kimi.png
new file mode 100644
index 0000000..e412303
Binary files /dev/null and b/data/artifacts/e65340723412/kimi.png differ
diff --git a/data/artifacts/e65340723412/qwen25-7b.html b/data/artifacts/e65340723412/qwen25-7b.html
new file mode 100644
index 0000000..9cd4657
--- /dev/null
+++ b/data/artifacts/e65340723412/qwen25-7b.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>What's Your Wallcovering Style?</title>
+    <style>
+        :root {
+            --bg: #0d0d0f;
+            --surface: #17171c;
+            --text: #f5f2ea;
+            --muted: #8a8578;
+            --accent: #c9a961;
+            --line: 1px solid rgba(245, 242, 234, .1);
+            --shadow-card: 0 8px 24px rgba(0,0,0,.12);
+            --shadow-hover: 0 16px 48px rgba(0,0,0,.18);
+            --ease: cubic-bezier(.22,1,.36,1);
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: var(--bg);
+            color: var(--text);
+            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+            overflow-x: hidden;
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 32px 16px;
+            background-color: var(--surface);
+            color: var(--text);
+        }
+        .logo {
+            font-size: 24px;
+            letter-spacing: .18em;
+            text-transform: uppercase;
+        }
+        .question {
+            font-size: 16px;
+            margin-top: 32px;
+            line-height: 1.5;
+        }
+        .card-grid {
+            display: grid;
+            gap: 24px;
+            padding: 96px;
+        }
+        .card {
+            background-color: var(--surface);
+            border-radius: 14px;
+            box-shadow: var(--shadow-card);
+            text-align: center;
+            cursor: pointer;
+            transition: transform 0.7s ease-in-out, box-shadow 0.35s ease-in-out;
+        }
+        .card:hover {
+            transform: translateY(-8px);
+            box-shadow: var(--shadow-hover);
+        }
+        .result-card {
+            background-color: var(--accent);
+            color: #fff;
+            border-radius: 14px;
+            padding: 32px;
+            text-align: center;
+            margin-top: 96px;
+            display: none;
+        }
+        .result-card img {
+            max-width: 100%;
+            height: auto;
+        }
+        .swatch {
+            width: 150px;
+            height: 150px;
+            border-radius: 14px;
+            margin-bottom: 24px;
+            box-shadow: var(--shadow-card);
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="logo">DESIGNER WALLCOVERINGS</div>
+        <nav></nav>
+    </header>
+    <main>
+        <section class="card-grid">
+            <article class="card" data-style="Traditional Damask">
+                <img src="https://via.placeholder.com/200x150.png?text=Damask+Pattern" alt="Traditional Damask">
+                <h3>Traditional Damask</h3>
+            </article>
+            <article class="card" data-style="Modern Minimalist">
+                <img src="https://via.placeholder.com/200x150.png?text=Minimalist+Pattern" alt="Modern Minimalist">
+                <h3>Modern Minimalist</h3>
+            </article>
+            <article class="card" data-style="Bohemian Maximalist">
+                <img src="https://via.placeholder.com/200x150.png?text=Maximalist+Pattern" alt="Bohemian Maximalist">
+                <h3>Bohemian Maximalist</h3>
+            </article>
+            <article class="card" data-style="Art Deco Glam">
+                <img src="https://via.placeholder.com/200x150.png?text=Glam+Pattern" alt="Art Deco Glam">
+                <h3>Art Deco Glam</h3>
+            </article>
+        </section>
+    </main>
+    <footer class="result-card" id="result">
+        <img src="" alt="Result Pattern" />
+        <p></p>
+        <button>Shop this style</button>
+    </footer>
+    <script>
+        document.querySelectorAll('.card').forEach(card => {
+            card.addEventListener('click', () => {
+                const resultCard = document.getElementById('result');
+                resultCard.style.display = 'block';
+                resultCard.querySelector('img').src = `https://via.placeholder.com/300x150.png?text=${card.dataset.style}`;
+                resultCard.querySelector('p').innerText = `You've chosen the ${card.dataset.style} style!`;
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/qwen25-7b.png b/data/artifacts/e65340723412/qwen25-7b.png
new file mode 100644
index 0000000..1c9cb55
Binary files /dev/null and b/data/artifacts/e65340723412/qwen25-7b.png differ
diff --git a/data/artifacts/e65340723412/qwen3-14b.html b/data/artifacts/e65340723412/qwen3-14b.html
new file mode 100644
index 0000000..04128d4
--- /dev/null
+++ b/data/artifacts/e65340723412/qwen3-14b.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>What's Your Wallcovering Style?</title>
+  <style>
+    :root {
+      --bg: #0d0d0f;
+      --surface: #17171c;
+      --text: #f5f2ea;
+      --muted: #8a8578;
+      --accent: #c9a961;
+      --line: #1c1a17;
+      --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      --glow: 0 0 24px rgba(201, 169, 97, 0.35);
+      --ease: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    }
+
+    body {
+      background-color: var(--bg);
+      color: var(--text);
+      font-size: 16px;
+      line-height: 1.5;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 220px;
+      height: 56px;
+      background-color: var(--surface);
+      color: var(--text);
+      font-family: 'Playfair Display', Georgia, serif;
+      font-size: 24px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+      padding-left: 16px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      z-index: 1000;
+    }
+
+    main {
+      flex: 1;
+      padding-top: 64px;
+      padding-bottom: 48px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .quiz-container {
+      width: 100%;
+      max-width: 1080px;
+      padding: 0 24px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .question {
+      font-size: 28px;
+      margin-bottom: 48px;
+      text-align: center;
+    }
+
+    .tiles {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 24px;
+      width: 100%;
+      max-width: 1080px;
+    }
+
+    .tile {
+      background-color: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 32px;
+      cursor: pointer;
+      transition: box-shadow 0.2s var(--ease);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--shadow);
+    }
+
+    .tile:hover {
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+    }
+
+    .tile::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 200px;
+      border-radius: 14px;
+      margin-bottom: 16px;
+      background-image: linear-gradient(135deg, var(--accent) 25%, transparent 25%, transparent 50%, var(--accent) 50%, var(--accent) 75%, transparent 75%, transparent);
+      background-size: 20px 20px;
+    }
+
+    .results {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 48px;
+      background-color: var(--surface);
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      box-shadow: var(--shadow);
+    }
+
+    .result-title {
+      font-family: 'Playfair Display', Georgia, serif;
+      font-size: 38px;
+      margin-bottom: 24px;
+      text-transform: uppercase;
+      letter-spacing: 0.18em;
+    }
+
+    .result-description {
+      font-size: 16px;
+      color: var(--muted);
+      max-width: 600px;
+      margin-bottom: 24px;
+    }
+
+    .result-swatch {
+      width: 100%;
+      height: 200px;
+      border-radius: 14px;
+      background-image: linear-gradient(135deg, var(--accent) 25%, transparent 25%, transparent 50%, var(--accent) 50%, var(--accent) 75%, transparent 75%, transparent);
+      background-size: 20px 20px;
+      box-shadow: var(--glow);
+    }
+
+    .result-button {
+      background-color: var(--accent);
+      color: var(--text);
+      font-size: 16px;
+      font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.15em;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 14px;
+      cursor: pointer;
+      transition: background-color 0.2s var(--ease);
+    }
+
+    .result-button:hover {
+      background-color: #c9a961;
+    }
+
+    @keyframes fadeUp {
+      from {
+        opacity: 0;
+        transform: translateY(28px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .fade-in {
+      animation: fadeUp 0.7s var(--ease) both;
+    }
+
+    .stagger {
+      animation-delay: 90ms;
+    }
+
+    .bg-gradient {
+      background: linear-gradient(270deg, #0d0d0f 0%, #17171c 100%);
+      background-size: 400% 400%;
+      animation: drift 18s linear infinite;
+    }
+
+    @keyframes drift {
+      0% { background-position: 0% 50%; }
+      100% { background-position: 100% 50%; }
+    }
+  </style>
+</head>
+<body class="bg-gradient">
+  <header>DESIGNER WALLCOVERINGS</header>
+  <main>
+    <div class="quiz-container">
+      <div class="question" id="question">What's Your Wallcovering Style?</div>
+      <div class="tiles" id="tiles">
+        <div class="tile" data-style="Traditional Damask" onclick="selectAnswer(this)">Tile 1</div>
+        <div class="tile" data-style="Modern Minimalist" onclick="selectAnswer(this)">Tile 2</div>
+        <div class="tile" data-style="Bohemian Maximalist" onclick="selectAnswer(this)">Tile 3</div>
+        <div class="tile" data-style="Art Deco Glam" onclick="selectAnswer(this)">Tile 4</div>
+      </div>
+    </div>
+    <div class="results" id="results" style="display: none;">
+      <div class="result-title" id="result-title">Traditional Damask</div>
+      <div class="result-description" id="result-description">Timeless elegance with intricate patterns, perfect for heritage interiors.</div>
+      <div class="result-swatch" id="result-swatch"></div>
+      <button class="result-button" id="shop-button">Shop this style</button>
+    </div>
+  </main>
+
+  <script>
+    const questions = [
+      "What's your preferred interior mood?",
+      "Do you prefer bold patterns or clean lines?",
+      "Which era's design inspires you most?",
+      "What color palette do you gravitate toward?",
+      "How would you describe your personal style?"
+    ];
+
+    const styles = {
+      "Traditional Damask": {
+        score: 0
+      },
+      "Modern Minimalist": {
+        score: 0
+      },
+      "Bohemian Maximalist": {
+        score: 0
+      },
+      "Art Deco Glam": {
+        score: 0
+      }
+    };
+
+    const answers = {
+      "Traditional Damask": [0, 0, 0, 0, 0],
+      "Modern Minimalist": [0, 1, 1, 1, 1],
+      "Bohemian Maximalist": [2, 2, 2, 2, 2],
+      "Art Deco Glam": [3, 3, 3, 3, 3]
+    };
+
+    let currentQuestion = 0;
+    let currentTiles = [];
+
+    function initTiles() {
+      const tiles = document.getElementById("tiles");
+      tiles.innerHTML = '';
+      const question = questions[currentQuestion];
+      document.getElementById("question").textContent = question;
+
+      for (let i = 0; i < 4; i++) {
+        const tile = document.createElement("div");
+        tile.className = "tile";
+        tile.textContent = "Tile " + (i + 1);
+        tile.dataset.style = Object.keys(answers)[i];
+        tile.onclick = () => selectAnswer(tile);
+        tiles.appendChild(tile);
+      }
+    }
+
+    function selectAnswer(tile) {
+      const style = tile.dataset.style;
+      const score = answers[style][currentQuestion];
+      styles[style].score += score;
+
+      currentQuestion++;
+      if (currentQuestion < questions.length) {
+        initTiles();
+      } else {
+        showResult();
+      }
+    }
+
+    function showResult() {
+      const results = document.getElementById("results");
+      const resultTitle = document.getElementById("result-title");
+      const resultDescription = document.getElementById("result-description");
+      const resultSwatch = document.getElementById("result-swatch");
+      const shopButton = document.getElementById("shop-button");
+
+      let bestStyle = "Traditional Damask";
+      let bestScore = styles[bestStyle].score;
+
+      for (const style in styles) {
+        if (styles[style].score > bestScore) {
+          bestStyle = style;
+          bestScore = styles[style].score;
+        }
+      }
+
+      resultTitle.textContent = bestStyle;
+      resultDescription.textContent = getDescription(bestStyle);
+      resultSwatch.style.backgroundImage = getSwatch(bestStyle);
+      shopButton.onclick = () => alert("Shopping for " + bestStyle + " style...");
+
+      results.style.display = "flex";
+      results.classList.add("fade-in");
+    }
+
+    function getDescription(style) {
+      switch (style) {
+        case "Traditional Damask":
+          return "Timeless elegance with intricate patterns, perfect for heritage interiors.";
+        case "Modern Minimalist":
+          return "Clean lines and neutral tones for a serene, uncluttered look.";
+        case "Bohemian Maximalist":
+          return "Vibrant colors, eclectic patterns, and layered textures for a rich, lived-in feel.";
+        case "Art Deco Glam":
+          return "Opulent curves, metallic accents, and bold geometric designs for a luxurious, 1920s-inspired look.";
+        default:
+          return "Discover your unique style with designer wallcoverings.";
+      }
+    }
+
+    function getSwatch(style) {
+      switch (style) {
+        case "Traditional Damask":
+          return "linear-gradient(135deg, #c9a961 25%, transparent 25%, transparent 50%, #c9a961 50%, #c9a961 75%, transparent 75%, transparent)";
+        case "Modern Minimalist":
+          return "linear-gradient(135deg, #b0472e 25%, transparent 25%, transparent 50%, #b0472e 50%, #b0472e 75%, transparent 75%, transparent)";
+        case "Bohemian Maximalist":
+          return "linear-gradient(135deg, #c65f38 25%, transparent 25%, transparent 50%, #c65f38 50%, #c65f38 75%, transparent 75%, transparent)";
+        case "Art Deco Glam":
+          return "linear-gradient(135deg, #ff2e88 25%, transparent 25%, transparent 50%, #ff2e88 50%, #ff2e88 75%, transparent 75%, transparent)";
+        default:
+          return "linear-gradient(135deg, #c9a961 25%, transparent 25%, transparent 50%, #c9a961 50%, #c9a961 75%, transparent 75%, transparent)";
+      }
+    }
+
+    window.onload = initTiles;
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e65340723412/qwen3-14b.png b/data/artifacts/e65340723412/qwen3-14b.png
new file mode 100644
index 0000000..e8bff7c
Binary files /dev/null and b/data/artifacts/e65340723412/qwen3-14b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index ea7e94b..950a14a 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -16041,7 +16041,14 @@
           "opendesign"
         ],
         "bytes": 7084,
-        "thumb": true
+        "thumb": true,
+        "aiScore": 7.3,
+        "aiReason": "The game is functional but lacks visual polish and feedback elements.",
+        "aiScores": {
+          "qwen2.5vl:7b": 7,
+          "minicpm-v:latest": 7.5
+        },
+        "aiSpread": 0.5
       },
       {
         "model": "gemma3-12b",
@@ -20015,95 +20022,131 @@
     "runs": [
       {
         "model": "qwen3-14b",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.568Z"
+        "seconds": 207,
+        "cost": 0,
+        "started_at": "2026-07-25T10:24:21.473Z",
+        "finished_at": "2026-07-25T10:27:48.895Z",
+        "queued_at": "2026-07-25T10:24:13.568Z",
+        "bytes": 10337,
+        "thumb": true
       },
       {
         "model": "gemma3-12b",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.575Z"
+        "seconds": 169,
+        "cost": 0,
+        "started_at": "2026-07-25T10:27:48.902Z",
+        "finished_at": "2026-07-25T10:30:38.033Z",
+        "queued_at": "2026-07-25T10:24:13.575Z",
+        "bytes": 10632,
+        "thumb": true
       },
       {
         "model": "hermes3-8b",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.583Z"
+        "seconds": 24,
+        "cost": 0,
+        "started_at": "2026-07-25T10:30:38.039Z",
+        "finished_at": "2026-07-25T10:31:02.476Z",
+        "queued_at": "2026-07-25T10:24:13.583Z",
+        "bytes": 5516,
+        "thumb": true
       },
       {
         "model": "qwen25-7b",
-        "status": "running",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
+        "seconds": 31,
+        "cost": 0,
         "started_at": "2026-07-25T10:24:13.613Z",
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.590Z"
+        "finished_at": "2026-07-25T10:24:44.533Z",
+        "queued_at": "2026-07-25T10:24:13.590Z",
+        "bytes": 4295,
+        "thumb": true
       },
       {
         "model": "hf-qwen-coder-32b",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.595Z"
+        "seconds": 125,
+        "cost": 0,
+        "started_at": "2026-07-25T10:31:02.487Z",
+        "finished_at": "2026-07-25T10:33:07.676Z",
+        "queued_at": "2026-07-25T10:24:13.595Z",
+        "bytes": 7804,
+        "thumb": true
       },
       {
         "model": "claude-code",
-        "status": "running",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
+        "seconds": 99,
+        "cost": 0,
         "started_at": "2026-07-25T10:24:13.617Z",
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.599Z"
+        "finished_at": "2026-07-25T10:25:52.687Z",
+        "queued_at": "2026-07-25T10:24:13.599Z",
+        "bytes": 18697,
+        "thumb": true
       },
       {
         "model": "kimi",
-        "status": "running",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
+        "seconds": 107,
+        "cost": 0.0183,
         "started_at": "2026-07-25T10:24:13.623Z",
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.603Z"
+        "finished_at": "2026-07-25T10:26:00.752Z",
+        "queued_at": "2026-07-25T10:24:13.603Z",
+        "toolCalls": [
+          "opendesign",
+          "opendesign",
+          "opendesign",
+          "hyperframes",
+          "hyperframes"
+        ],
+        "bytes": 19493,
+        "thumb": true
       },
       {
         "model": "gpt",
-        "status": "running",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
+        "seconds": 67,
+        "cost": 0.1617,
         "started_at": "2026-07-25T10:24:13.628Z",
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.606Z"
+        "finished_at": "2026-07-25T10:25:20.192Z",
+        "queued_at": "2026-07-25T10:24:13.606Z",
+        "toolCalls": [
+          "opendesign",
+          "opendesign",
+          "hyperframes"
+        ],
+        "bytes": 41197,
+        "thumb": true
       },
       {
         "model": "grok",
-        "status": "running",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
+        "seconds": 146,
+        "cost": 0.2036,
         "started_at": "2026-07-25T10:24:13.632Z",
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.609Z"
+        "finished_at": "2026-07-25T10:26:39.336Z",
+        "queued_at": "2026-07-25T10:24:13.609Z",
+        "toolCalls": [
+          "opendesign",
+          "opendesign",
+          "hyperframes"
+        ],
+        "bytes": 34691,
+        "thumb": true
       }
-    ]
+    ],
+    "judging": true
   },
   {
     "id": "18bd2744dce2",
@@ -20116,11 +20159,11 @@
     "runs": [
       {
         "model": "qwen3-14b",
-        "status": "queued",
+        "status": "running",
         "error": null,
         "seconds": null,
         "cost": null,
-        "started_at": null,
+        "started_at": "2026-07-25T10:33:07.688Z",
         "finished_at": null,
         "queued_at": "2026-07-25T10:24:13.675Z"
       },
@@ -20146,13 +20189,15 @@
       },
       {
         "model": "qwen25-7b",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.686Z"
+        "seconds": 34,
+        "cost": 0,
+        "started_at": "2026-07-25T10:24:44.541Z",
+        "finished_at": "2026-07-25T10:25:18.584Z",
+        "queued_at": "2026-07-25T10:24:13.686Z",
+        "bytes": 4581,
+        "thumb": true
       },
       {
         "model": "hf-qwen-coder-32b",
@@ -20166,43 +20211,66 @@
       },
       {
         "model": "claude-code",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.693Z"
+        "seconds": 80,
+        "cost": 0,
+        "started_at": "2026-07-25T10:25:52.691Z",
+        "finished_at": "2026-07-25T10:27:12.830Z",
+        "queued_at": "2026-07-25T10:24:13.693Z",
+        "bytes": 14586,
+        "thumb": true
       },
       {
         "model": "kimi",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.697Z"
+        "seconds": 82,
+        "cost": 0.0137,
+        "started_at": "2026-07-25T10:26:00.774Z",
+        "finished_at": "2026-07-25T10:27:22.450Z",
+        "queued_at": "2026-07-25T10:24:13.697Z",
+        "toolCalls": [
+          "opendesign",
+          "opendesign",
+          "hyperframes"
+        ],
+        "bytes": 14602,
+        "thumb": true
       },
       {
         "model": "gpt",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.701Z"
+        "seconds": 53,
+        "cost": 0.1201,
+        "started_at": "2026-07-25T10:25:20.199Z",
+        "finished_at": "2026-07-25T10:26:12.834Z",
+        "queued_at": "2026-07-25T10:24:13.701Z",
+        "toolCalls": [
+          "opendesign",
+          "opendesign",
+          "hyperframes"
+        ],
+        "bytes": 26300,
+        "thumb": true
       },
       {
         "model": "grok",
-        "status": "queued",
+        "status": "done",
         "error": null,
-        "seconds": null,
-        "cost": null,
-        "started_at": null,
-        "finished_at": null,
-        "queued_at": "2026-07-25T10:24:13.705Z"
+        "seconds": 66,
+        "cost": 0.1036,
+        "started_at": "2026-07-25T10:26:39.339Z",
+        "finished_at": "2026-07-25T10:27:45.658Z",
+        "queued_at": "2026-07-25T10:24:13.705Z",
+        "toolCalls": [
+          "opendesign",
+          "opendesign",
+          "hyperframes"
+        ],
+        "bytes": 18147,
+        "thumb": true
       }
     ]
   }
diff --git a/data/costlog.jsonl b/data/costlog.jsonl
index 31fa727..7861264 100644
--- a/data/costlog.jsonl
+++ b/data/costlog.jsonl
@@ -273,3 +273,9 @@
 {"ts":"2026-07-25T10:12:27.475Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2720,"output_tokens":10975,"cost_usd":0.15841}
 {"ts":"2026-07-25T10:13:55.688Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":2747,"output_tokens":7408,"cost_usd":0.020168}
 {"ts":"2026-07-25T10:14:01.169Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3251,"output_tokens":9890,"cost_usd":0.158103}
+{"ts":"2026-07-25T10:25:20.189Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2865,"output_tokens":11193,"cost_usd":0.161716}
+{"ts":"2026-07-25T10:26:00.749Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":3306,"output_tokens":6522,"cost_usd":0.018289}
+{"ts":"2026-07-25T10:26:12.831Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2859,"output_tokens":8223,"cost_usd":0.120125}
+{"ts":"2026-07-25T10:26:39.335Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3587,"output_tokens":12853,"cost_usd":0.203556}
+{"ts":"2026-07-25T10:27:22.446Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":3254,"output_tokens":4716,"cost_usd":0.013742}
+{"ts":"2026-07-25T10:27:45.655Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3982,"output_tokens":6109,"cost_usd":0.103581}
← 437b338 night-loop: cycle 03:24 — judged=6923e6180f0f · fired 2 →; F · back to Model Arena · night-loop: cycle 03:36 — judged=e65340723412 · fired 1 →; F eb1d5c1 →