← back to Model Arena
night-loop: cycle 01:01 — judged=172f180e3161 · fired 1 →; FIRED idx=2/16 id=6a3a34df3dc6 title=Designer Wallcoverings — Color Story of the Month Carousel
785d7cfee4ed9c9cb2d2abd622174f41aedaacc6 · 2026-07-25 01:01:12 -0700 · Steve Abrams
Files touched
A data/artifacts/028885e12558/claude-code.htmlA data/artifacts/028885e12558/claude-code.pngA data/artifacts/028885e12558/gpt.htmlA data/artifacts/028885e12558/gpt.pngA data/artifacts/028885e12558/grok.htmlA data/artifacts/028885e12558/grok.pngA data/artifacts/028885e12558/kimi.htmlA data/artifacts/028885e12558/kimi.pngA data/artifacts/028885e12558/qwen25-7b.htmlA data/artifacts/028885e12558/qwen25-7b.pngA data/artifacts/172f180e3161/gemma3-12b.htmlA data/artifacts/172f180e3161/gemma3-12b.pngA data/artifacts/172f180e3161/hermes3-8b.htmlA data/artifacts/172f180e3161/hermes3-8b.pngA data/artifacts/172f180e3161/hf-qwen-coder-32b.htmlA data/artifacts/172f180e3161/hf-qwen-coder-32b.pngA data/artifacts/172f180e3161/qwen25-7b.htmlA data/artifacts/172f180e3161/qwen25-7b.pngA data/artifacts/172f180e3161/qwen3-14b.htmlA data/artifacts/172f180e3161/qwen3-14b.pngA data/artifacts/bde366feb227/gemma3-12b.htmlA data/artifacts/bde366feb227/gemma3-12b.pngA data/artifacts/bde366feb227/hermes3-8b.htmlA data/artifacts/bde366feb227/hermes3-8b.pngA data/artifacts/bde366feb227/hf-qwen-coder-32b.htmlA data/artifacts/bde366feb227/hf-qwen-coder-32b.pngA data/artifacts/eda6b5e29387/qwen25-7b.htmlA data/artifacts/eda6b5e29387/qwen25-7b.pngA data/artifacts/eda6b5e29387/qwen3-14b.htmlA data/artifacts/eda6b5e29387/qwen3-14b.pngM data/challenges.jsonM data/costlog.jsonlA data/landings/028885e12558-gpt.htmlM idea-run/.dw-brand-style-color-pointer
Diff
commit 785d7cfee4ed9c9cb2d2abd622174f41aedaacc6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 01:01:12 2026 -0700
night-loop: cycle 01:01 — judged=172f180e3161 · fired 1 →; FIRED idx=2/16 id=6a3a34df3dc6 title=Designer Wallcoverings — Color Story of the Month Carousel
---
data/artifacts/028885e12558/claude-code.html | 371 +++++
data/artifacts/028885e12558/claude-code.png | Bin 0 -> 99096 bytes
data/artifacts/028885e12558/gpt.html | 1571 +++++++++++++++++++
data/artifacts/028885e12558/gpt.png | Bin 0 -> 235297 bytes
data/artifacts/028885e12558/grok.html | 469 ++++++
data/artifacts/028885e12558/grok.png | Bin 0 -> 2729 bytes
data/artifacts/028885e12558/kimi.html | 642 ++++++++
data/artifacts/028885e12558/kimi.png | Bin 0 -> 81739 bytes
data/artifacts/028885e12558/qwen25-7b.html | 98 ++
data/artifacts/028885e12558/qwen25-7b.png | Bin 0 -> 18806 bytes
data/artifacts/172f180e3161/gemma3-12b.html | 245 +++
data/artifacts/172f180e3161/gemma3-12b.png | Bin 0 -> 3601 bytes
data/artifacts/172f180e3161/hermes3-8b.html | 238 +++
data/artifacts/172f180e3161/hermes3-8b.png | Bin 0 -> 4660 bytes
data/artifacts/172f180e3161/hf-qwen-coder-32b.html | 241 +++
data/artifacts/172f180e3161/hf-qwen-coder-32b.png | Bin 0 -> 4511 bytes
data/artifacts/172f180e3161/qwen25-7b.html | 228 +++
data/artifacts/172f180e3161/qwen25-7b.png | Bin 0 -> 4441 bytes
data/artifacts/172f180e3161/qwen3-14b.html | 256 ++++
data/artifacts/172f180e3161/qwen3-14b.png | Bin 0 -> 6472 bytes
data/artifacts/bde366feb227/gemma3-12b.html | 115 ++
data/artifacts/bde366feb227/gemma3-12b.png | Bin 0 -> 33877 bytes
data/artifacts/bde366feb227/hermes3-8b.html | 198 +++
data/artifacts/bde366feb227/hermes3-8b.png | Bin 0 -> 23729 bytes
data/artifacts/bde366feb227/hf-qwen-coder-32b.html | 175 +++
data/artifacts/bde366feb227/hf-qwen-coder-32b.png | Bin 0 -> 12466 bytes
data/artifacts/eda6b5e29387/qwen25-7b.html | 207 +++
data/artifacts/eda6b5e29387/qwen25-7b.png | Bin 0 -> 3865 bytes
data/artifacts/eda6b5e29387/qwen3-14b.html | 235 +++
data/artifacts/eda6b5e29387/qwen3-14b.png | Bin 0 -> 6714 bytes
data/challenges.json | 391 ++++-
data/costlog.jsonl | 3 +
data/landings/028885e12558-gpt.html | 1580 ++++++++++++++++++++
idea-run/.dw-brand-style-color-pointer | 2 +-
34 files changed, 7200 insertions(+), 65 deletions(-)
diff --git a/data/artifacts/028885e12558/claude-code.html b/data/artifacts/028885e12558/claude-code.html
new file mode 100644
index 0000000..0bdcef9
--- /dev/null
+++ b/data/artifacts/028885e12558/claude-code.html
@@ -0,0 +1,371 @@
+<!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; --accent2:#7d6a45;
+ --radius:14px;
+ --card:0 8px 24px rgba(0,0,0,.35);
+ --hover:0 16px 48px rgba(0,0,0,.5);
+ --glow:0 0 24px rgba(201,169,97,.35);
+ --serif:'Didot','Bodoni MT','Playfair Display',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(--text); font-family:var(--sans);
+ display:flex; align-items:center; justify-content:center;
+ min-height:100vh; padding:24px; overflow-x:hidden;
+ -webkit-font-smoothing:antialiased;
+ }
+ body::before{
+ content:''; position:fixed; inset:-30%; z-index:0; pointer-events:none;
+ background:
+ radial-gradient(circle at 20% 25%, rgba(201,169,97,.10), transparent 42%),
+ radial-gradient(circle at 82% 78%, rgba(125,106,69,.14), transparent 46%);
+ background-size:200% 200%;
+ animation:drift 18s ease-in-out infinite alternate;
+ }
+ @keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+ @keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
+
+ .stage{position:relative; z-index:1; width:100%; max-width:640px}
+
+ .label{
+ text-transform:uppercase; font-size:12px; letter-spacing:.15em;
+ color:var(--muted); font-weight:600;
+ }
+
+ /* ---------- INTRO ---------- */
+ .intro{
+ background:var(--surface); border:1px solid rgba(201,169,97,.18);
+ border-radius:var(--radius); padding:64px 48px; text-align:center;
+ box-shadow:var(--card); animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
+ }
+ .brand{letter-spacing:.34em; color:var(--accent); margin-bottom:32px; animation:fadeUp .7s .05s both}
+ .intro h1{
+ font-family:var(--serif); font-weight:400; line-height:1.02;
+ font-size:clamp(38px,9vw,67px); margin-bottom:20px;
+ animation:fadeUp .7s .14s both;
+ }
+ .intro h1 em{font-style:italic; color:var(--accent)}
+ .intro p{
+ color:var(--muted); font-size:21px; line-height:1.5; max-width:460px;
+ margin:0 auto 40px; animation:fadeUp .7s .23s both;
+ }
+ .btn{
+ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
+ font-weight:700; cursor:pointer; border:none; color:var(--bg);
+ background:linear-gradient(135deg,var(--accent),var(--accent2));
+ padding:18px 44px; border-radius:999px; transition:transform .2s, box-shadow .2s;
+ }
+ .btn:hover{transform:translateY(-2px); box-shadow:var(--glow)}
+ .intro .btn{animation:fadeUp .7s .32s both}
+
+ /* ---------- QUIZ ---------- */
+ .quiz{display:none}
+ .quiz.active{display:block; animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both}
+ .progress{display:flex; gap:8px; margin-bottom:28px; padding:0 4px}
+ .progress span{flex:1; height:3px; border-radius:2px; background:rgba(245,242,234,.12); transition:background .4s}
+ .progress span.done{background:var(--accent)}
+ .qcount{display:block; margin-bottom:10px; text-align:center}
+ .qtext{
+ font-family:var(--serif); font-weight:400; font-size:clamp(28px,6vw,38px);
+ text-align:center; line-height:1.15; margin-bottom:36px;
+ }
+ .tiles{display:grid; grid-template-columns:1fr 1fr; gap:16px}
+ .tile{
+ position:relative; background:var(--surface); border:1px solid rgba(245,242,234,.08);
+ border-radius:var(--radius); padding:0 0 18px; cursor:pointer; overflow:hidden;
+ box-shadow:var(--card); transition:transform .18s, box-shadow .18s, border-color .18s;
+ animation:pop .5s cubic-bezier(.22,1,.36,1) both;
+ }
+ .tile:nth-child(1){animation-delay:.04s}
+ .tile:nth-child(2){animation-delay:.13s}
+ .tile:nth-child(3){animation-delay:.22s}
+ .tile:nth-child(4){animation-delay:.31s}
+ .tile:hover{transform:translateY(-4px); box-shadow:var(--hover); border-color:rgba(201,169,97,.45)}
+ .swatch{height:118px; width:100%; display:block}
+ .tile-name{
+ font-family:var(--serif); font-size:19px; margin-top:14px; padding:0 16px; line-height:1.2;
+ }
+ .tile-sub{font-size:12.5px; color:var(--muted); padding:0 16px; margin-top:4px}
+
+ /* ---------- RESULT ---------- */
+ .result{display:none}
+ .result.active{display:block; animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}
+ .card-wrap{width:100%; max-width:540px; margin:0 auto}
+ /* 1080x1080 aspect card */
+ .card{
+ position:relative; aspect-ratio:1/1; width:100%;
+ background:var(--surface); border-radius:var(--radius); overflow:hidden;
+ box-shadow:var(--card); border:1px solid rgba(201,169,97,.22);
+ display:flex; flex-direction:column;
+ }
+ .card-pattern{height:44%; width:100%; position:relative}
+ .card-pattern::after{
+ content:''; position:absolute; inset:0;
+ box-shadow:inset 0 -60px 60px -30px var(--surface);
+ }
+ .card-body{
+ flex:1; padding:26px 30px 22px; display:flex; flex-direction:column;
+ align-items:center; text-align:center; justify-content:space-between;
+ }
+ .card-eyebrow{color:var(--accent); letter-spacing:.24em; margin-bottom:12px}
+ .card-title{
+ font-family:var(--serif); font-weight:400; font-size:clamp(26px,6.6vw,40px);
+ line-height:1.05; margin-bottom:14px;
+ }
+ .card-desc{color:var(--muted); font-size:clamp(13px,3.4vw,16px); line-height:1.55; max-width:400px}
+ .card-foot{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px}
+ .card-brand{letter-spacing:.3em; color:var(--muted); font-size:11px}
+ .actions{display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap}
+ .btn.ghost{
+ background:transparent; color:var(--accent); border:1px solid rgba(201,169,97,.5);
+ }
+ .btn.ghost:hover{box-shadow:none; background:rgba(201,169,97,.08)}
+
+ /* ---------- CSS PATTERN SWATCHES ---------- */
+ .p-damask{
+ background-color:#1c1614;
+ background-image:
+ radial-gradient(circle at 25% 25%, rgba(201,169,97,.55) 0 6%, transparent 7%),
+ radial-gradient(circle at 75% 75%, rgba(201,169,97,.55) 0 6%, transparent 7%),
+ radial-gradient(ellipse 14% 22% at 50% 50%, rgba(201,169,97,.7) 0 60%, transparent 62%),
+ radial-gradient(ellipse 9% 15% at 50% 12%, rgba(201,169,97,.5) 0 60%, transparent 62%),
+ radial-gradient(ellipse 9% 15% at 50% 88%, rgba(201,169,97,.5) 0 60%, transparent 62%);
+ background-size:64px 64px;
+ }
+ .p-minimal{
+ background-color:#e9e5dc;
+ background-image:linear-gradient(90deg, rgba(60,58,54,.14) 1.5px, transparent 1.5px);
+ background-size:26px 100%;
+ }
+ .p-minimal.alt{background-color:#dfdacf}
+ .p-boho{
+ background-color:#3a241f;
+ background-image:
+ radial-gradient(circle at 50% 50%, #c65f38 0 12%, transparent 13%),
+ conic-gradient(from 0deg at 50% 50%, #e0a458 0 25%, #7d9a6a 0 50%, #c65f38 0 75%, #b3823f 0 100%),
+ radial-gradient(circle at 0 0, #e0a458 0 14%, transparent 15%),
+ radial-gradient(circle at 100% 100%, #7d9a6a 0 14%, transparent 15%);
+ background-size:52px 52px, 52px 52px, 52px 52px, 52px 52px;
+ background-blend-mode:normal, overlay, normal, normal;
+ }
+ .p-deco{
+ background-color:#101418;
+ background-image:
+ repeating-linear-gradient(45deg, rgba(201,169,97,.55) 0 2px, transparent 2px 13px),
+ repeating-linear-gradient(-45deg, rgba(201,169,97,.55) 0 2px, transparent 2px 13px),
+ radial-gradient(circle at 50% 50%, rgba(201,169,97,.9) 0 3px, transparent 4px);
+ background-size:38px 38px, 38px 38px, 38px 38px;
+ }
+ /* small tile variants scale down */
+ .swatch.p-damask{background-size:44px 44px}
+ .swatch.p-deco{background-size:28px 28px}
+ .swatch.p-boho{background-size:40px 40px,40px 40px,40px 40px,40px 40px}
+
+ @media (max-width:420px){
+ .intro{padding:48px 26px}
+ .tile-name{font-size:17px}
+ }
+</style>
+</head>
+<body>
+<div class="stage">
+
+ <!-- INTRO -->
+ <section class="intro" id="intro">
+ <div class="label brand">MAISON NOIR · WALLCOVERINGS</div>
+ <h1>What's Your <em>Wallcovering</em> Style?</h1>
+ <p>Five questions to reveal the surface that speaks to you — then shop the collection made for it.</p>
+ <button class="btn" onclick="start()">Begin the Quiz</button>
+ </section>
+
+ <!-- QUIZ -->
+ <section class="quiz" id="quiz">
+ <div class="progress" id="progress"></div>
+ <span class="label qcount" id="qcount">Question 1 of 5</span>
+ <h2 class="qtext" id="qtext"></h2>
+ <div class="tiles" id="tiles"></div>
+ </section>
+
+ <!-- RESULT -->
+ <section class="result" id="result">
+ <div class="card-wrap">
+ <div class="card" id="card">
+ <div class="card-pattern" id="cardPattern"></div>
+ <div class="card-body">
+ <div>
+ <div class="label card-eyebrow">YOUR WALLCOVERING STYLE</div>
+ <h2 class="card-title" id="rTitle"></h2>
+ <p class="card-desc" id="rDesc"></p>
+ </div>
+ <div class="card-foot">
+ <div class="card-brand">MAISON NOIR</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="actions">
+ <button class="btn" id="shopBtn">Shop This Style</button>
+ <button class="btn ghost" onclick="restart()">Retake Quiz</button>
+ </div>
+ </section>
+
+</div>
+
+<script>
+ const RESULTS = {
+ damask:{
+ title:'Traditional Damask',
+ desc:'You are drawn to heritage, symmetry and quiet grandeur. Ornate scrollwork and tonal golds create rooms with a sense of history and ceremony.',
+ pattern:'p-damask'
+ },
+ minimal:{
+ title:'Modern Minimalist',
+ desc:'Restraint is your luxury. Clean linear rhythm, breathable neutrals and precise detail let architecture and light do the talking.',
+ pattern:'p-minimal'
+ },
+ boho:{
+ title:'Bohemian Maximalist',
+ desc:'You collect colour, texture and story. Layered motifs and warm earthen tones turn every wall into a well-travelled, joyful escape.',
+ pattern:'p-boho'
+ },
+ deco:{
+ title:'Art Deco Glam',
+ desc:'Geometry, gloss and drama define you. Fan motifs, metallic lines and bold symmetry bring 1920s glamour into a sharp modern frame.',
+ pattern:'p-deco'
+ }
+ };
+
+ const QUESTIONS = [
+ {
+ q:'Pick the room that feels like home.',
+ options:[
+ {name:'Grand Library',sub:'Carved wood & warm gold',s:'damask',sw:'p-damask'},
+ {name:'Sunlit Loft',sub:'White walls, clean lines',s:'minimal',sw:'p-minimal'},
+ {name:'Layered Salon',sub:'Rugs, plants & colour',s:'boho',sw:'p-boho'},
+ {name:'Velvet Lounge',sub:'Brass, black & mirror',s:'deco',sw:'p-deco'}
+ ]
+ },
+ {
+ q:'Which palette do you reach for?',
+ options:[
+ {name:'Antique Gold',sub:'Ochre & bronze',s:'damask',sw:'p-damask'},
+ {name:'Soft Neutrals',sub:'Alabaster & greige',s:'minimal',sw:'p-minimal alt'},
+ {name:'Spice Market',sub:'Terracotta & olive',s:'boho',sw:'p-boho'},
+ {name:'Onyx & Brass',sub:'Ink black & metallic',s:'deco',sw:'p-deco'}
+ ]
+ },
+ {
+ q:'Choose a motif you love.',
+ options:[
+ {name:'Scrolling Damask',sub:'Classic & ornate',s:'damask',sw:'p-damask'},
+ {name:'Fine Pinstripe',sub:'Barely-there line',s:'minimal',sw:'p-minimal'},
+ {name:'Folk Medallion',sub:'Bold & eclectic',s:'boho',sw:'p-boho'},
+ {name:'Sunburst Fan',sub:'Geometric glamour',s:'deco',sw:'p-deco'}
+ ]
+ },
+ {
+ q:'How should a room make you feel?',
+ options:[
+ {name:'Timeless',sub:'Refined & rooted',s:'damask',sw:'p-damask'},
+ {name:'Serene',sub:'Calm & uncluttered',s:'minimal',sw:'p-minimal alt'},
+ {name:'Alive',sub:'Warm & expressive',s:'boho',sw:'p-boho'},
+ {name:'Dazzling',sub:'Bold & theatrical',s:'deco',sw:'p-deco'}
+ ]
+ },
+ {
+ q:'Your finishing touch is…',
+ options:[
+ {name:'Gilt Frames',sub:'Heirloom art',s:'damask',sw:'p-damask'},
+ {name:'One Sculpture',sub:'A single object',s:'minimal',sw:'p-minimal'},
+ {name:'Global Textiles',sub:'Kilims & tassels',s:'boho',sw:'p-boho'},
+ {name:'Mirror & Marble',sub:'Polished sheen',s:'deco',sw:'p-deco'}
+ ]
+ }
+ ];
+
+ let current = 0;
+ let scores = {damask:0,minimal:0,boho:0,deco:0};
+
+ const $ = id => document.getElementById(id);
+
+ function start(){
+ $('intro').style.display='none';
+ $('quiz').classList.add('active');
+ buildProgress();
+ render();
+ }
+
+ function buildProgress(){
+ const p = $('progress'); p.innerHTML='';
+ QUESTIONS.forEach(()=>p.appendChild(document.createElement('span')));
+ }
+
+ function render(){
+ const item = QUESTIONS[current];
+ $('qcount').textContent = `Question ${current+1} of ${QUESTIONS.length}`;
+ $('qtext').textContent = item.q;
+ [...$('progress').children].forEach((s,i)=>s.classList.toggle('done', i<current));
+ const tiles = $('tiles'); tiles.innerHTML='';
+ item.options.forEach(opt=>{
+ const t = document.createElement('div');
+ t.className='tile';
+ t.innerHTML =
+ `<div class="swatch ${opt.sw}"></div>
+ <div class="tile-name">${opt.name}</div>
+ <div class="tile-sub">${opt.sub}</div>`;
+ t.onclick = ()=>choose(opt.s);
+ tiles.appendChild(t);
+ });
+ }
+
+ function choose(style){
+ scores[style]++;
+ current++;
+ if(current < QUESTIONS.length){
+ render();
+ window.scrollTo({top:0,behavior:'smooth'});
+ } else {
+ finish();
+ }
+ }
+
+ function finish(){
+ // determine winner; tie broken by question order priority
+ const order = ['damask','minimal','boho','deco'];
+ let best = order[0];
+ order.forEach(k=>{ if(scores[k] > scores[best]) best = k; });
+ const r = RESULTS[best];
+ $('quiz').classList.remove('active');
+ $('quiz').style.display='none';
+ $('rTitle').textContent = r.title;
+ $('rDesc').textContent = r.desc;
+ $('cardPattern').className = 'card-pattern ' + r.pattern;
+ $('shopBtn').onclick = ()=>{
+ $('shopBtn').textContent = 'Opening Collection…';
+ };
+ $('result').classList.add('active');
+ window.scrollTo({top:0,behavior:'smooth'});
+ }
+
+ function restart(){
+ current=0; scores={damask:0,minimal:0,boho:0,deco:0};
+ $('result').classList.remove('active');
+ $('quiz').style.display='block';
+ $('quiz').classList.add('active');
+ buildProgress();
+ render();
+ window.scrollTo({top:0,behavior:'smooth'});
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/028885e12558/claude-code.png b/data/artifacts/028885e12558/claude-code.png
new file mode 100644
index 0000000..10020e3
Binary files /dev/null and b/data/artifacts/028885e12558/claude-code.png differ
diff --git a/data/artifacts/028885e12558/gpt.html b/data/artifacts/028885e12558/gpt.html
new file mode 100644
index 0000000..86c9075
--- /dev/null
+++ b/data/artifacts/028885e12558/gpt.html
@@ -0,0 +1,1571 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>What’s Your Wallcovering Style?</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #1f1f26;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-soft: #7d6a45;
+
+ --radius-lg: 28px;
+ --radius-md: 18px;
+ --radius-sm: 10px;
+
+ --shadow-soft: 0 26px 80px rgba(0, 0, 0, 0.65);
+
+ --font-display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
+ --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+
+ --fs-caption: 12px;
+ --fs-body: 16px;
+ --fs-lead: 21px;
+ --fs-h3: 28px;
+ --fs-h2: 38px;
+ --fs-h1: 50px;
+ --fs-display: 67px;
+
+ --elevated-border: 1px solid rgba(255, 255, 255, 0.04);
+
+ --ease-out: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ @keyframes scaleIn {
+ from { opacity: 0; transform: scale(.92); }
+ to { opacity: 1; transform: none; }
+ }
+ @keyframes clipReveal {
+ from { clip-path: inset(0 100% 0 0); }
+ to { clip-path: inset(0); }
+ }
+ @keyframes blurIn {
+ from { opacity: 0; filter: blur(12px); }
+ to { opacity: 1; filter: blur(0); }
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top, #1d1d23 0, #050507 55%, #000 100%);
+ color: var(--text);
+ font-family: var(--font-body);
+ -webkit-font-smoothing: antialiased;
+ height: 100%;
+ }
+
+ body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ }
+
+ .frame {
+ width: 100%;
+ max-width: 1080px;
+ max-height: 1080px;
+ aspect-ratio: 1 / 1;
+ background: radial-gradient(circle at 10% 0, #252531 0, #0b0b0d 40%, #050507 100%);
+ border-radius: 40px;
+ box-shadow: var(--shadow-soft);
+ padding: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ @media (max-width: 768px) {
+ .frame {
+ border-radius: 0;
+ box-shadow: none;
+ max-height: none;
+ padding: 20px;
+ }
+ }
+
+ .card-shell {
+ width: 100%;
+ height: 100%;
+ border-radius: 32px;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ background:
+ linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 40%),
+ radial-gradient(circle at 0 0, rgba(201, 169, 97, 0.16), transparent 55%),
+ radial-gradient(circle at 100% 100%, rgba(125, 106, 69, 0.24), transparent 60%),
+ radial-gradient(circle at 50% 0, rgba(10, 10, 14, 0.7), rgba(13, 13, 15, 0.98));
+ padding: 32px 32px 28px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ @media (max-width: 768px) {
+ .card-shell {
+ border-radius: 24px;
+ padding: 20px 18px 18px;
+ }
+ }
+
+ .card-inner {
+ flex: 1;
+ border-radius: 26px;
+ border: var(--elevated-border);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.04), transparent 55%), #101014;
+ padding: 28px 28px 24px;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+ }
+
+ @media (max-width: 768px) {
+ .card-inner {
+ padding: 22px 18px 18px;
+ }
+ }
+
+ .chrome {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ margin-bottom: 18px;
+ position: relative;
+ z-index: 3;
+ }
+
+ .brand-lockup {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ font-size: 11px;
+ color: var(--muted);
+ }
+
+ .brand-mark {
+ width: 18px;
+ height: 18px;
+ border-radius: 999px;
+ border: 1px solid rgba(201, 169, 97, 0.6);
+ background:
+ conic-gradient(from 210deg, rgba(255, 255, 255, 0.12), rgba(201, 169, 97, 0.65), rgba(125, 106, 69, 0.4), rgba(0, 0, 0, 0.85), rgba(255, 255, 255, 0.12));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .brand-mark::after {
+ content: "";
+ width: 7px;
+ height: 7px;
+ border-radius: 999px;
+ border: 1px solid rgba(13, 13, 15, 0.9);
+ background: radial-gradient(circle at 30% 0, #f5f2ea 0, #e4d4ae 40%, #8d6a2b 100%);
+ box-shadow: 0 0 0 1px rgba(13, 13, 15, 0.6);
+ }
+
+ .chrome-meta {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ font-size: 11px;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ }
+
+ .pill {
+ padding: 4px 9px 4px 9px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), transparent 60%),
+ linear-gradient(135deg, rgba(23, 23, 28, 0.96), rgba(15, 15, 19, 0.96));
+ }
+
+ .steps {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ }
+
+ .steps-dot {
+ width: 4px;
+ height: 12px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.08);
+ overflow: hidden;
+ position: relative;
+ }
+
+ .steps-dot-fill {
+ position: absolute;
+ inset: 0;
+ transform-origin: bottom;
+ transform: scaleY(0);
+ background: linear-gradient(to top, #c9a961, #f5e3b7);
+ transition: transform 260ms var(--ease-out);
+ }
+
+ .steps-dot.active .steps-dot-fill {
+ transform: scaleY(1);
+ }
+
+ .share-tag {
+ border-radius: 999px;
+ padding: 4px 10px;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.8));
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .share-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 999px;
+ background: radial-gradient(circle at 20% 0, #f5f2ea, #c9a961);
+ }
+
+ .content {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 1.25fr 1.1fr;
+ gap: 22px;
+ min-height: 0;
+ position: relative;
+ z-index: 2;
+ }
+
+ @media (max-width: 900px) {
+ .content {
+ grid-template-columns: 1fr;
+ grid-auto-rows: auto;
+ }
+ }
+
+ .left-panel {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 20px;
+ min-width: 0;
+ }
+
+ .headline-block {
+ animation: fadeUp 0.7s var(--ease-out) both;
+ }
+
+ .eyebrow {
+ font-family: var(--font-body);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ color: var(--muted);
+ margin-bottom: 8px;
+ }
+
+ .title {
+ font-family: var(--font-display);
+ font-size: clamp(32px, 3.2vw, 40px);
+ line-height: 1.03;
+ letter-spacing: -0.03em;
+ text-transform: uppercase;
+ margin: 0 0 6px;
+ }
+
+ .title span.em {
+ color: var(--accent);
+ }
+
+ .subtitle {
+ font-size: 14px;
+ color: rgba(245, 242, 234, 0.74);
+ max-width: 36rem;
+ }
+
+ .quiz-panel {
+ position: relative;
+ min-height: 0;
+ }
+
+ .quiz-screen {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(18px);
+ transition:
+ opacity 320ms var(--ease-out),
+ transform 320ms var(--ease-out);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 18px;
+ }
+
+ .quiz-screen.active {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+
+ .quiz-screen.quiz-result {
+ transform: scale(0.96);
+ }
+
+ .quiz-screen.quiz-result.active {
+ transform: scale(1);
+ }
+
+ .question-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 6px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ }
+
+ .question-label-line {
+ flex: 1;
+ height: 1px;
+ background: linear-gradient(to right, rgba(201, 169, 97, 0.74), transparent);
+ }
+
+ .question-title {
+ font-family: var(--font-display);
+ font-size: 20px;
+ letter-spacing: -0.03em;
+ margin-bottom: 14px;
+ }
+
+ .answers-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+ }
+
+ .answer-card {
+ position: relative;
+ border-radius: 18px;
+ padding: 12px 12px 10px;
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 55%),
+ linear-gradient(145deg, #15151b, #101016);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ cursor: pointer;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ transition:
+ transform 200ms var(--ease-out),
+ box-shadow 200ms var(--ease-out),
+ border-color 200ms var(--ease-out),
+ background 200ms var(--ease-out);
+ }
+
+ .answer-card::before {
+ content: "";
+ position: absolute;
+ inset: -40%;
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%),
+ radial-gradient(circle at 100% 0, rgba(201, 169, 97, 0.24), transparent 60%);
+ opacity: 0;
+ mix-blend-mode: screen;
+ transition: opacity 220ms var(--ease-out);
+ }
+
+ .answer-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
+ border-color: rgba(201, 169, 97, 0.7);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.12), transparent 55%),
+ linear-gradient(145deg, #1b1b23, #111019);
+ }
+
+ .answer-card:hover::before {
+ opacity: 0.6;
+ }
+
+ .answer-card:active {
+ transform: translateY(-1px) scale(0.99);
+ }
+
+ .answer-label {
+ font-size: 12px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: rgba(245, 242, 234, 0.82);
+ }
+
+ .answer-meta {
+ font-size: 11px;
+ color: var(--muted);
+ }
+
+ .swatch {
+ position: relative;
+ border-radius: 14px;
+ overflow: hidden;
+ height: 80px;
+ background: #17171f;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .swatch-inner {
+ width: 130%;
+ height: 130%;
+ transform: translate(-8%, -8%);
+ opacity: 0.9;
+ }
+
+ .swatch-tag {
+ position: absolute;
+ right: 8px;
+ bottom: 8px;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ background: rgba(10, 10, 14, 0.76);
+ border: 1px solid rgba(255, 255, 255, 0.22);
+ color: rgba(245, 242, 234, 0.94);
+ }
+
+ .hint {
+ font-size: 11px;
+ color: var(--muted);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 4px;
+ }
+
+ .hint-line {
+ width: 26px;
+ height: 1px;
+ background: linear-gradient(to right, rgba(201, 169, 97, 0.7), transparent);
+ }
+
+ .right-panel {
+ position: relative;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), transparent 60%),
+ radial-gradient(circle at 100% 100%, rgba(201, 169, 97, 0.5), rgba(13, 13, 15, 0.9) 60%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ min-height: 0;
+ }
+
+ .result-card {
+ width: 100%;
+ height: 100%;
+ max-height: 100%;
+ border-radius: 22px;
+ background:
+ linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(7, 7, 10, 0.96)),
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%);
+ padding: 18px 18px 16px;
+ display: flex;
+ flex-direction: column;
+ color: var(--text);
+ animation: clipReveal 0.7s var(--ease-out) both;
+ }
+
+ .result-badge-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 14px;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ }
+
+ .result-main {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 1.1fr 1.05fr;
+ gap: 16px;
+ align-items: stretch;
+ min-height: 0;
+ }
+
+ @media (max-width: 900px) {
+ .result-main {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .result-pattern {
+ position: relative;
+ border-radius: 18px;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%), #15151e;
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+ min-height: 0;
+ }
+
+ .result-pattern-inner {
+ flex: 1;
+ display: grid;
+ place-items: center;
+ padding: 8px;
+ }
+
+ .result-pattern-tag {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ background: rgba(10, 10, 14, 0.78);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ }
+
+ .result-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 14px;
+ }
+
+ .result-type {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ color: var(--muted);
+ margin-bottom: 4px;
+ }
+
+ .result-title {
+ font-family: var(--font-display);
+ font-size: 24px;
+ letter-spacing: -0.03em;
+ text-transform: uppercase;
+ margin-bottom: 6px;
+ }
+
+ .result-line {
+ width: 32px;
+ height: 1px;
+ background: linear-gradient(to right, #c9a961, transparent);
+ margin-bottom: 8px;
+ }
+
+ .result-description {
+ font-size: 13px;
+ color: rgba(245, 242, 234, 0.8);
+ line-height: 1.5;
+ margin-bottom: 8px;
+ }
+
+ .result-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-bottom: 10px;
+ }
+
+ .result-tag-chip {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.14), transparent 60%),
+ linear-gradient(135deg, #15151b, #0f0f14);
+ color: rgba(245, 242, 234, 0.92);
+ }
+
+ .cta-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ margin-top: auto;
+ }
+
+ .btn-primary {
+ flex: 1;
+ border-radius: 999px;
+ border: none;
+ outline: none;
+ padding: 10px 16px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.22em;
+ background-image:
+ linear-gradient(120deg, #c9a961, #f9e8bd, #7d6a45);
+ background-size: 180% 100%;
+ color: #111015;
+ cursor: pointer;
+ transition:
+ background-position 260ms var(--ease-out),
+ transform 180ms var(--ease-out),
+ box-shadow 180ms var(--ease-out);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
+ white-space: nowrap;
+ }
+
+ .btn-primary:hover {
+ background-position: 100% 0;
+ transform: translateY(-1px);
+ box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
+ }
+
+ .btn-primary:active {
+ transform: translateY(0);
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
+ }
+
+ .cta-note {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ text-align: right;
+ max-width: 150px;
+ }
+
+ .footer {
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ }
+
+ .progress-rail {
+ flex: 1;
+ height: 1px;
+ background: rgba(255, 255, 255, 0.08);
+ position: relative;
+ margin-right: 10px;
+ overflow: hidden;
+ border-radius: 999px;
+ }
+
+ .progress-bar {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(to right, #c9a961, #f5e3b7);
+ transform-origin: left;
+ transform: scaleX(0.2);
+ transition: transform 280ms var(--ease-out);
+ }
+
+ .footer-label {
+ opacity: 0.8;
+ }
+
+ /* Pattern styles for answers & results */
+
+ .pattern-damask {
+ --c1: #15141c;
+ --c2: #22202b;
+ --c3: #c9a961;
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 45%),
+ repeating-radial-gradient(circle at 50% 40%, var(--c3) 0 1px, transparent 1px 10px),
+ repeating-conic-gradient(from 0deg, var(--c1) 0 15deg, var(--c2) 15deg 30deg);
+ mask-image: radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.45));
+ }
+
+ .pattern-damask::before {
+ content: "";
+ position: absolute;
+ inset: 6% 10%;
+ border-radius: 50%;
+ border: 1px solid rgba(201, 169, 97, 0.45);
+ opacity: 0.8;
+ mix-blend-mode: screen;
+ }
+
+ .pattern-minimal {
+ --line: rgba(245, 242, 234, 0.08);
+ --block: rgba(245, 242, 234, 0.04);
+ background:
+ linear-gradient(120deg, #121219, #0c0c10);
+ background-image:
+ linear-gradient(to right, var(--line) 1px, transparent 1px),
+ linear-gradient(to bottom, var(--line) 1px, transparent 1px),
+ linear-gradient(135deg, var(--block) 25%, transparent 25% 50%, var(--block) 50% 75%, transparent 75%);
+ background-size:
+ 28px 28px,
+ 28px 28px,
+ 56px 56px;
+ }
+
+ .pattern-maximal {
+ background:
+ radial-gradient(circle at 0 0, #f5e3b7 0 8%, transparent 8% 22%, #f5e3b7 22% 30%, transparent 30%),
+ radial-gradient(circle at 60% 40%, #c16b5a 0 7%, transparent 7% 18%, #c16b5a 18% 26%, transparent 26%),
+ radial-gradient(circle at 30% 90%, #578f7a 0 8%, transparent 8% 19%, #578f7a 19% 27%, transparent 27%),
+ conic-gradient(from 45deg, #27131c, #221521, #171621, #1b2023, #27131c);
+ background-size: 120px 120px;
+ background-blend-mode: screen;
+ }
+
+ .pattern-maximal::before {
+ content: "";
+ position: absolute;
+ inset: 14% 6% 6% 14%;
+ background-image:
+ radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.3), transparent 60%),
+ repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.35) 0 6deg, transparent 6deg 12deg);
+ mix-blend-mode: multiply;
+ opacity: 0.9;
+ }
+
+ .pattern-deco {
+ --base: #15121a;
+ --gold: #c9a961;
+ background:
+ linear-gradient(135deg, #16131d, #0d0a11);
+ background-image:
+ linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+ background-size:
+ 20px 20px,
+ 20px 20px;
+ }
+
+ .pattern-deco::before {
+ content: "";
+ position: absolute;
+ inset: 12%;
+ background:
+ conic-gradient(from 0deg, transparent 0 10deg, rgba(201, 169, 97, 0.6) 10deg 20deg, transparent 20deg 30deg);
+ mask-image:
+ radial-gradient(circle at 50% 0, transparent 0 46%, black 46% 100%);
+ opacity: 0.9;
+ }
+
+ .pattern-deco::after {
+ content: "";
+ position: absolute;
+ inset: 18% 28% -8%;
+ border-radius: 60% 60% 0 0;
+ border: 2px solid rgba(201, 169, 97, 0.7);
+ border-bottom: none;
+ box-shadow:
+ 0 0 0 1px rgba(10, 10, 14, 0.8),
+ 0 12px 26px rgba(0, 0, 0, 0.9);
+ }
+
+ .pattern-minimal-lg,
+ .pattern-maximal-lg,
+ .pattern-damask-lg,
+ .pattern-deco-lg {
+ width: 100%;
+ height: 100%;
+ border-radius: 16px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .pattern-damask-lg {
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 45%),
+ repeating-radial-gradient(circle at 50% 40%, rgba(201, 169, 97, 0.9) 0 2px, transparent 2px 14px),
+ repeating-conic-gradient(from 0deg, #15141c 0 15deg, #22202b 15deg 30deg);
+ }
+
+ .pattern-damask-lg::before {
+ content: "";
+ position: absolute;
+ inset: 10% 18%;
+ border-radius: 50%;
+ border: 2px solid rgba(201, 169, 97, 0.8);
+ box-shadow: 0 0 0 1px rgba(21, 20, 28, 0.8), 0 28px 70px rgba(0, 0, 0, 0.9);
+ }
+
+ .pattern-damask-lg::after {
+ content: "";
+ position: absolute;
+ inset: 22% 32%;
+ border-radius: 50%;
+ border: 1px solid rgba(245, 242, 234, 0.78);
+ box-shadow: 0 0 32px rgba(201, 169, 97, 0.9);
+ }
+
+ .pattern-minimal-lg {
+ background:
+ linear-gradient(135deg, #101017, #050507);
+ background-image:
+ linear-gradient(to right, rgba(245, 242, 234, 0.08) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(245, 242, 234, 0.04) 1px, transparent 1px),
+ linear-gradient(135deg, rgba(245, 242, 234, 0.08) 25%, transparent 25% 50%, rgba(245, 242, 234, 0.08) 50% 75%, transparent 75%);
+ background-size:
+ 32px 32px,
+ 32px 32px,
+ 64px 64px;
+ }
+
+ .pattern-minimal-lg::before {
+ content: "";
+ position: absolute;
+ inset: 16% 18%;
+ border-radius: 26px;
+ border: 1px solid rgba(245, 242, 234, 0.4);
+ box-shadow: 0 22px 55px rgba(0, 0, 0, 0.8);
+ backdrop-filter: blur(4px);
+ }
+
+ .pattern-minimal-lg::after {
+ content: "";
+ position: absolute;
+ inset: 26% 30%;
+ border-radius: 20px;
+ border: 1px solid rgba(245, 242, 234, 0.22);
+ background: radial-gradient(circle at 0 0, rgba(245, 242, 234, 0.2), transparent 60%);
+ opacity: 0.9;
+ }
+
+ .pattern-maximal-lg {
+ background:
+ radial-gradient(circle at 0 0, #fbe4c4 0 10%, transparent 10% 26%, #fbe4c4 26% 34%, transparent 34%),
+ radial-gradient(circle at 80% 20%, #ffb6a0 0 9%, transparent 9% 23%, #ffb6a0 23% 31%, transparent 31%),
+ radial-gradient(circle at 40% 90%, #8bd3b3 0 9%, transparent 9% 23%, #8bd3b3 23% 31%, transparent 31%),
+ conic-gradient(from 45deg, #2a1120, #1d1020, #121322, #182329, #2a1120);
+ background-size: 160px 160px;
+ background-blend-mode: screen;
+ }
+
+ .pattern-maximal-lg::before {
+ content: "";
+ position: absolute;
+ inset: 12% 10% 20% 20%;
+ border-radius: 45% 60% 50% 70%;
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.2), transparent 65%);
+ box-shadow:
+ 0 0 0 1px rgba(255, 255, 255, 0.24),
+ 0 32px 70px rgba(0, 0, 0, 0.9);
+ mix-blend-mode: multiply;
+ }
+
+ .pattern-maximal-lg::after {
+ content: "";
+ position: absolute;
+ inset: 42% 14% 10% 8%;
+ border-radius: 60% 40% 60% 40%;
+ border: 1px solid rgba(0, 0, 0, 0.7);
+ background: radial-gradient(circle at 80% 0, rgba(255, 255, 255, 0.2), transparent 70%);
+ mix-blend-mode: soft-light;
+ }
+
+ .pattern-deco-lg {
+ background:
+ linear-gradient(135deg, #120f18, #08050a);
+ background-image:
+ linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+ background-size:
+ 22px 22px,
+ 22px 22px;
+ position: relative;
+ }
+
+ .pattern-deco-lg::before {
+ content: "";
+ position: absolute;
+ inset: 12% 18%;
+ border-radius: 0;
+ border: 2px solid rgba(201, 169, 97, 0.9);
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.9),
+ 0 26px 60px rgba(0, 0, 0, 1);
+ }
+
+ .pattern-deco-lg::after {
+ content: "";
+ position: absolute;
+ left: 22%;
+ right: 22%;
+ bottom: 8%;
+ height: 40%;
+ border-radius: 50% 50% 0 0;
+ border: 2px solid rgba(201, 169, 97, 0.9);
+ border-bottom: none;
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.9),
+ 0 22px 50px rgba(0, 0, 0, 1);
+ }
+
+ .result-style-damask .result-title {
+ color: #f5e3c2;
+ }
+ .result-style-minimal .result-title {
+ color: #f5f2ea;
+ }
+ .result-style-maximal .result-title {
+ color: #ffd2b9;
+ }
+ .result-style-deco .result-title {
+ color: #f6e2b5;
+ }
+
+ .result-style-damask .result-badge-row,
+ .result-style-damask .result-type {
+ color: #d6c496;
+ }
+
+ .result-style-maximal .result-badge-row,
+ .result-style-maximal .result-type {
+ color: #f3b6a3;
+ }
+
+ .result-style-deco .result-badge-row,
+ .result-style-deco .result-type {
+ color: #e5d5a7;
+ }
+
+ .result-style-minimal .result-badge-row,
+ .result-style-minimal .result-type {
+ color: #b7b4a8;
+ }
+
+ .result-style-damask .result-line {
+ background: linear-gradient(to right, #c9a961, #f7e5bd);
+ }
+
+ .result-style-minimal .result-line {
+ background: linear-gradient(to right, rgba(245, 242, 234, 0.8), transparent);
+ }
+
+ .result-style-maximal .result-line {
+ background: linear-gradient(to right, #ffb6a0, #fbe4c4);
+ }
+
+ .result-style-deco .result-line {
+ background: linear-gradient(to right, #c9a961, #f6e2b5);
+ }
+
+ .badge-style-tag {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%),
+ linear-gradient(135deg, rgba(10, 10, 14, 0.9), rgba(0, 0, 0, 1));
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .badge-style-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: conic-gradient(from 160deg, #c9a961, #f7e5bd, #7d6a45, #c9a961);
+ }
+
+ .ar-badge {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: rgba(245, 242, 234, 0.65);
+ }
+
+ .footer-logo {
+ font-family: var(--font-display);
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ font-size: 11px;
+ }
+
+ .footer-logo span {
+ color: var(--accent);
+ }
+
+ .footer-meta {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ }
+
+ .footer-divider {
+ width: 1px;
+ height: 14px;
+ background: rgba(255, 255, 255, 0.18);
+ }
+ </style>
+</head>
+<body>
+<div class="frame">
+ <div class="card-shell">
+ <div class="card-inner">
+ <div class="chrome">
+ <div class="brand-lockup">
+ <div class="brand-mark"></div>
+ <span>Maison Aurelia</span>
+ </div>
+ <div class="chrome-meta">
+ <div class="pill">
+ <div class="steps" aria-hidden="true">
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ </div>
+ </div>
+ <div class="share-tag">
+ <div class="share-dot"></div>
+ <span>Tap to reveal</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="content">
+ <div class="left-panel">
+ <div class="headline-block">
+ <div class="eyebrow">Style Quiz</div>
+ <h1 class="title">
+ What’s Your<br />
+ <span class="em">Wallcovering</span><br />
+ Style?
+ </h1>
+ <p class="subtitle">
+ Five quick taps to discover the pattern that feels like home. Answer instinctively — your walls will thank you.
+ </p>
+ </div>
+
+ <div class="quiz-panel" aria-live="polite">
+ <div class="quiz-screen active" data-screen="1">
+ <div>
+ <div class="question-label">
+ Q1 — Mood
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">How do you want your space to feel?</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Opulent Calm</div>
+ </div>
+ <div class="answer-label">Timeless & grand</div>
+ <div class="answer-meta">Candlelit dinners, heirloom silver, soft strings in the background.</div>
+ </button>
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Quiet Clarity</div>
+ </div>
+ <div class="answer-label">Clean & composed</div>
+ <div class="answer-meta">Sunlight, negative space, one perfect chair and a good book.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Eclectic Joy</div>
+ </div>
+ <div class="answer-label">Playful & collected</div>
+ <div class="answer-meta">Layered textiles, travel finds, and a story on every surface.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Evening Glam</div>
+ </div>
+ <div class="answer-label">Dramatic & polished</div>
+ <div class="answer-meta">Velvet banquettes, champagne coupes, city lights at midnight.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Tap a tile to continue</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="2">
+ <div>
+ <div class="question-label">
+ Q2 — Architecture
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Which backdrop feels most like “home”?</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Gallery Walls</div>
+ </div>
+ <div class="answer-label">Airy loft</div>
+ <div class="answer-meta">Crisp lines, pale oak, hidden hardware, soft architectural light.</div>
+ </button>
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Townhouse</div>
+ </div>
+ <div class="answer-label">Historic brownstone</div>
+ <div class="answer-meta">Crown mouldings, marble mantels, and library-green doors.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Skyline Suite</div>
+ </div>
+ <div class="answer-label">City penthouse</div>
+ <div class="answer-meta">Metallic accents, skyline views, a bar cart always at the ready.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Artist Loft</div>
+ </div>
+ <div class="answer-label">Sun-drenched studio</div>
+ <div class="answer-meta">Plants, paint splatters, vintage rugs, and a curated chaos.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Follow your first instinct</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="3">
+ <div>
+ <div class="question-label">
+ Q3 — Pattern
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Choose the pattern energy that draws you in.</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Heritage</div>
+ </div>
+ <div class="answer-label">Ornate motifs</div>
+ <div class="answer-meta">Scrolling florals, medallions, and a whisper of old-world romance.</div>
+ </button>
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Precision</div>
+ </div>
+ <div class="answer-label">Linear & graphic</div>
+ <div class="answer-meta">Architectural stripes, grids, and quiet tonal shifts.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Botanical</div>
+ </div>
+ <div class="answer-label">Botanical & wild</div>
+ <div class="answer-meta">Overscale florals, palms, and a lush, layered jungle vibe.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Geometry</div>
+ </div>
+ <div class="answer-label">Geometric glamour</div>
+ <div class="answer-meta">Fans, arches, and sharp metallic repeats.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Imagine this wrapping an entire room</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="4">
+ <div>
+ <div class="question-label">
+ Q4 — Palette
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Which palette would you happily wake up to?</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Bone & Ink</div>
+ </div>
+ <div class="answer-label">Soft neutrals</div>
+ <div class="answer-meta">Ivories, warm greys, and the gentlest hint of charcoal.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Champagne</div>
+ </div>
+ <div class="answer-label">Noir & metallic</div>
+ <div class="answer-meta">Inky blacks, molten metals, and candlelit warmth.</div>
+ </button>
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Antique Gold</div>
+ </div>
+ <div class="answer-label">Rich jewel tones</div>
+ <div class="answer-meta">Sapphire, garnet, and deep, velvety neutrals.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Sunset</div>
+ </div>
+ <div class="answer-label">Sun-soaked brights</div>
+ <div class="answer-meta">Terracotta, olive, ochre, and saturated, joyful color.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Trust your eye, not the trends</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="5">
+ <div>
+ <div class="question-label">
+ Q5 — Lifestyle
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Your Friday night at home looks like…</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Salon</div>
+ </div>
+ <div class="answer-label">Slow dinner party</div>
+ <div class="answer-meta">Linen tablecloths, candles, and a playlist that never ends.</div>
+ </button>
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Reset</div>
+ </div>
+ <div class="answer-label">Solo reset</div>
+ <div class="answer-meta">Fresh sheets, a face mask, and a perfectly plumped pillow.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Gather</div>
+ </div>
+ <div class="answer-label">Friends & laughter</div>
+ <div class="answer-meta">Board games, bold drinks, and playlists on shuffle.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">After Dark</div>
+ </div>
+ <div class="answer-label">Cocktail hour</div>
+ <div class="answer-meta">Shaken, not stirred, with a late-night movie queue.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Last one — tap to see your style</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen quiz-result" data-screen="result">
+ <div class="result-card result-style-minimal" id="resultCard">
+ <div class="result-badge-row">
+ <span class="ar-badge">1080 × 1080 — Save & Share</span>
+ <span class="badge-style-tag">
+ <span class="badge-style-dot"></span>
+ <span id="resultShortLabel">Your Wallcovering DNA</span>
+ </span>
+ </div>
+ <div class="result-main">
+ <div class="result-pattern">
+ <div class="result-pattern-tag">Pattern Match</div>
+ <div class="result-pattern-inner">
+ <div class="pattern-minimal-lg" id="resultPattern"></div>
+ </div>
+ </div>
+ <div class="result-info">
+ <div>
+ <div class="result-type" id="resultCategory">Modern Minimalist</div>
+ <div class="result-title" id="resultTitle">Gallery-Quiet Walls</div>
+ <div class="result-line"></div>
+ <p class="result-description" id="resultDescription">
+ You’re drawn to calm, considered spaces where every line has purpose. Think tonal textures, subtle sheen, and patterns that reward a second look — never shouting, always softly framing your life.
+ </p>
+ <div class="result-tags" id="resultTags">
+ <span class="result-tag-chip">Soft contrast</span>
+ <span class="result-tag-chip">Architectural lines</span>
+ <span class="result-tag-chip">Museum-grade calm</span>
+ </div>
+ </div>
+ <div class="cta-row">
+ <button class="btn-primary" type="button" id="shopButton">Shop this style</button>
+ <div class="cta-note">
+ Tap & hold to save, or tag us @MaisonAurelia to be featured.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <aside class="right-panel" aria-hidden="true">
+ <div class="result-card result-style-minimal">
+ <div class="result-badge-row">
+ <span class="ar-badge">Live Preview</span>
+ <span class="badge-style-tag">
+ <span class="badge-style-dot"></span>
+ Your style loading
+ </span>
+ </div>
+ <div class="result-main">
+ <div class="result-pattern">
+ <div class="result-pattern-tag">Wallcovering</div>
+ <div class="result-pattern-inner">
+ <div class="pattern-minimal-lg"></div>
+ </div>
+ </div>
+ <div class="result-info">
+ <div>
+ <div class="result-type">Signature Edit</div>
+ <div class="result-title">Curated for You</div>
+ <div class="result-line"></div>
+ <p class="result-description">
+ As you tap through, we’re building a palette of pattern, mood, and sheen. Your final match will reveal a bespoke wallcovering story — ready to shop in a single tap.
+ </p>
+ <div class="result-tags">
+ <span class="result-tag-chip">5 questions</span>
+ <span class="result-tag-chip">4 style houses</span>
+ <span class="result-tag-chip">1 signature look</span>
+ </div>
+ </div>
+ <div class="cta-row">
+ <button class="btn-primary" type="button">Begin</button>
+ <div class="cta-note">
+ Designed to fit perfectly inside your feed.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </aside>
+ </div>
+
+ <footer class="footer">
+ <div class="progress-rail">
+ <div class="progress-bar" id="progressBar"></div>
+ </div>
+ <div class="footer-meta">
+ <span class="footer-label">Swipe-worthy interiors</span>
+ <div class="footer-divider"></div>
+ <span class="footer-logo"><span>Maison</span> Aurelia</span>
+ </div>
+ </footer>
+ </div>
+ </div>
+</div>
+
+<script>
+(function() {
+ const TOTAL_QUESTIONS = 5;
+ const score = { damask: 0, minimal: 0, maximal: 0, deco: 0 };
+ let currentScreen = 1;
+
+ const screens = {};
+ document.querySelectorAll('.quiz-screen').forEach(el => {
+ const id = el.getAttribute('data-screen');
+ screens[id] = el;
+ });
+
+ const stepDots = Array.from(document.querySelectorAll('.steps-dot'));
+ const progressBar = document.getElementById('progressBar');
+ const resultCard = document.getElementById('resultCard');
+ const resultPattern = document.getElementById('resultPattern');
+ const resultCategory = document.getElementById('resultCategory');
+ const resultTitle = document.getElementById('resultTitle');
+ const resultDescription = document.getElementById('resultDescription');
+ const resultTags = document.getElementById('resultTags');
+ const resultShortLabel = document.getElementById('resultShortLabel');
+ const shopButton = document.getElementById('shopButton');
+
+ const resultConfig = {
+ damask: {
+ className: 'result-style-damask',
+ patternClass: 'pattern-damask-lg',
+ category: 'Traditional Damask',
+ title: 'Gilded Heritage Walls',
+ description:
+ 'You gravitate toward rooms with history and a hint of ceremony. Ornate damask motifs, antique-gold inks, and tactile embossing turn your walls into a modern-day manor — romantic, refined, and endlessly photogenic.',
+ tags: ['Chandelier-ready', 'Silk-inspired sheen', 'Heirloom details'],
+ shortLabel: 'Old World, New Mood'
+ },
+ minimal: {
+ className: 'result-style-minimal',
+ patternClass: 'pattern-minimal-lg',
+ category: 'Modern Minimalist',
+ title: 'Gallery-Quiet Walls',
+ description:
+ 'You breathe easiest in spaces that feel edited, intentional, and quietly luxurious. Understated patterning, tonal shifts, and architectural lines create a soft backdrop that makes everything else in the room shine.',
+ tags: ['Soft contrast', 'Architectural lines', 'Museum-grade calm'],
+ shortLabel: 'Quiet Luxury'
+ },
+ maximal: {
+ className: 'result-style-maximal',
+ patternClass: 'pattern-maximal-lg',
+ category: 'Bohemian Maximalist',
+ title: 'Collected Story Walls',
+ description:
+ 'You curate spaces like you collect memories — boldly, joyfully, and without apology. Lush botanicals, layered prints, and rich, sun-warmed color turn every wall into a passport stamp.',
+ tags: ['Pattern-on-pattern', 'Lush botanicals', 'Global eclectic'],
+ shortLabel: 'More Is More'
+ },
+ deco: {
+ className: 'result-style-deco',
+ patternClass: 'pattern-deco-lg',
+ category: 'Art Deco Glam',
+ title: 'Midnight Deco Walls',
+ description:
+ 'You live for a little drama. Think fan motifs, sharp geometrics, and metallic inks that catch the light just so. Your walls feel like the lobby of a grand hotel — always ready for the next cocktail hour.',
+ tags: ['Metallic accents', 'Geometric glamour', 'After-dark glow'],
+ shortLabel: 'Iconic Glamour'
+ }
+ };
+
+ function updateProgress() {
+ const ratio = Math.min(currentScreen, TOTAL_QUESTIONS) / TOTAL_QUESTIONS;
+ progressBar.style.transform = 'scaleX(' + ratio + ')';
+ stepDots.forEach((dot, index) => {
+ const fill = dot.querySelector('.steps-dot-fill');
+ if (index < currentScreen) {
+ dot.classList.add('active');
+ fill.style.transform = 'scaleY(1)';
+ } else {
+ dot.classList.remove('active');
+ fill.style.transform = 'scaleY(0)';
+ }
+ });
+ }
+
+ function showScreen(id) {
+ Object.values(screens).forEach(el => el.classList.remove('active'));
+ if (screens[id]) {
+ screens[id].classList.add('active');
+ }
+ }
+
+ function computeResult() {
+ const entries = Object.entries(score);
+ entries.sort((a, b) => b[1] - a[1]);
+ const top = entries[0][0] || 'minimal';
+ return top;
+ }
+
+ function renderResult() {
+ const styleKey = computeResult();
+ const cfg = resultConfig[styleKey] || resultConfig.minimal;
+
+ resultCard.classList.remove(
+ 'result-style-damask',
+ 'result-style-minimal',
+ 'result-style-maximal',
+ 'result-style-deco'
+ );
+ resultCard.classList.add(cfg.className);
+
+ resultPattern.className = cfg.patternClass;
+ resultCategory.textContent = cfg.category;
+ resultTitle.textContent = cfg.title;
+ resultDescription.textContent = cfg.description;
+ resultShortLabel.textContent = cfg.shortLabel;
+
+ resultTags.innerHTML = '';
+ cfg.tags.forEach(tag => {
+ const span = document.createElement('span');
+ span.className = 'result-tag-chip';
+ span.textContent = tag;
+ resultTags.appendChild(span);
+ });
+ }
+
+ function handleAnswerClick(e) {
+ const card = e.currentTarget;
+ const key = card.getAttribute('data-score');
+ if (!key) return;
+ if (score[key] != null) score[key] += 1;
+
+ if (currentScreen < TOTAL_QUESTIONS) {
+ currentScreen += 1;
+ showScreen(String(currentScreen));
+ updateProgress();
+ } else {
+ renderResult();
+ currentScreen = TOTAL_QUESTIONS;
+ updateProgress();
+ showScreen('result');
+ }
+ }
+
+ document.querySelectorAll('.answer-card').forEach(card => {
+ card.addEventListener('click', handleAnswerClick);
+ });
+
+ updateProgress();
+
+ if (shopButton) {
+ shopButton.addEventListener('click', function() {
+ alert('In a live experience, this button would take you directly to the curated wallcovering edit for your style.');
+ });
+ }
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/028885e12558/gpt.png b/data/artifacts/028885e12558/gpt.png
new file mode 100644
index 0000000..da56d21
Binary files /dev/null and b/data/artifacts/028885e12558/gpt.png differ
diff --git a/data/artifacts/028885e12558/grok.html b/data/artifacts/028885e12558/grok.html
new file mode 100644
index 0000000..f3e7628
--- /dev/null
+++ b/data/artifacts/028885e12558/grok.html
@@ -0,0 +1,469 @@
+<!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;
+ --accent2: #7d6a45;
+ --ease: cubic-bezier(.22,.9,.24,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --ease-power: cubic-bezier(.77,0,.18,1);
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --sans: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+ height: 100%;
+ background: var(--bg);
+ color: var(--text);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.55;
+ -webkit-font-smoothing: antialiased;
+ overflow-x: hidden;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ min-height: 100dvh;
+}
+
+/* ── Screen system ── */
+.screen {
+ display: none;
+ width: 100%;
+ max-width: 480px;
+ margin: 0 auto;
+ padding: 28px 22px 48px;
+ flex-direction: column;
+ animation: fadeUp .55s var(--ease-hero) both;
+}
+.screen.active { display: flex; }
+
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(18px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@keyframes scaleIn {
+ from { opacity: 0; transform: scale(.96); }
+ to { opacity: 1; transform: scale(1); }
+}
+@keyframes shimmer {
+ 0% { background-position: -200% center; }
+ 100% { background-position: 200% center; }
+}
+@keyframes drawLine {
+ from { transform: scaleX(0); }
+ to { transform: scaleX(1); }
+}
+
+/* ── Brand lockup ── */
+.brand {
+ text-align: center;
+ margin-bottom: 32px;
+}
+.brand-label {
+ font-size: 11px;
+ letter-spacing: .2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ font-weight: 500;
+ margin-bottom: 10px;
+}
+.brand-rule {
+ width: 40px;
+ height: 1px;
+ background: var(--accent);
+ margin: 0 auto 14px;
+ transform-origin: center;
+ animation: drawLine .7s var(--ease) .2s both;
+}
+
+/* ── Intro ── */
+#intro {
+ justify-content: center;
+ min-height: 100vh;
+ min-height: 100dvh;
+ text-align: center;
+ padding-top: 60px;
+ padding-bottom: 60px;
+}
+#intro h1 {
+ font-family: var(--serif);
+ font-size: clamp(36px, 9vw, 50px);
+ font-weight: 400;
+ letter-spacing: -.03em;
+ line-height: 1.1;
+ margin-bottom: 18px;
+ color: var(--text);
+}
+#intro h1 em {
+ font-style: italic;
+ color: var(--accent);
+}
+#intro .lede {
+ font-size: 15px;
+ color: var(--muted);
+ max-width: 32ch;
+ margin: 0 auto 40px;
+ line-height: 1.65;
+}
+.ornament {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ margin-bottom: 36px;
+ color: var(--accent2);
+ font-size: 10px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+}
+.ornament::before,
+.ornament::after {
+ content: '';
+ width: 28px;
+ height: 1px;
+ background: var(--accent2);
+}
+
+/* ── Buttons ── */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ font-family: var(--sans);
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: .16em;
+ text-transform: uppercase;
+ border: none;
+ cursor: pointer;
+ transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
+ -webkit-tap-highlight-color: transparent;
+}
+.btn:active { transform: scale(.97); }
+.btn-primary {
+ background: var(--accent);
+ color: var(--bg);
+ padding: 18px 40px;
+ border-radius: 1px;
+}
+.btn-primary:hover { background: #d4b56e; }
+.btn-ghost {
+ background: transparent;
+ color: var(--text);
+ border: 1px solid rgba(245,242,234,.22);
+ padding: 16px 32px;
+ border-radius: 1px;
+}
+.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
+.btn-shop {
+ background: var(--accent);
+ color: #0d0d0f;
+ padding: 16px 36px;
+ border-radius: 1px;
+ width: 100%;
+ max-width: 280px;
+ margin-top: 8px;
+}
+.btn-shop:hover { background: #d4b56e; }
+
+/* ── Progress ── */
+.progress-wrap {
+ margin-bottom: 28px;
+}
+.progress-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ margin-bottom: 10px;
+}
+.progress-meta span {
+ font-size: 11px;
+ letter-spacing: .16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.progress-meta .step-num { color: var(--accent); }
+.progress-bar {
+ height: 1px;
+ background: rgba(245,242,234,.1);
+ position: relative;
+ overflow: hidden;
+}
+.progress-fill {
+ position: absolute;
+ left: 0; top: 0; bottom: 0;
+ background: var(--accent);
+ transition: width .5s var(--ease-power);
+ width: 0%;
+}
+
+/* ── Question ── */
+.q-number {
+ font-size: 11px;
+ letter-spacing: .2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 12px;
+}
+.q-text {
+ font-family: var(--serif);
+ font-size: clamp(24px, 6vw, 32px);
+ font-weight: 400;
+ letter-spacing: -.02em;
+ line-height: 1.2;
+ margin-bottom: 28px;
+}
+
+/* ── Answer tiles ── */
+.tiles {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+}
+.tile {
+ position: relative;
+ background: var(--surface);
+ border: 1px solid rgba(245,242,234,.08);
+ border-radius: 2px;
+ padding: 0;
+ cursor: pointer;
+ overflow: hidden;
+ text-align: left;
+ color: var(--text);
+ font-family: var(--sans);
+ transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
+ -webkit-tap-highlight-color: transparent;
+ animation: fadeUp .5s var(--ease-hero) both;
+}
+.tile:nth-child(1) { animation-delay: .05s; }
+.tile:nth-child(2) { animation-delay: .12s; }
+.tile:nth-child(3) { animation-delay: .19s; }
+.tile:nth-child(4) { animation-delay: .26s; }
+.tile:hover {
+ border-color: rgba(201,169,97,.45);
+ transform: translateY(-2px);
+ box-shadow: 0 12px 32px rgba(0,0,0,.35);
+}
+.tile:active { transform: scale(.98); }
+.tile.selected {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(0,0,0,.35);
+}
+.tile-swatch {
+ height: 88px;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+}
+.tile-body {
+ padding: 14px 14px 16px;
+}
+.tile-label {
+ font-size: 13px;
+ font-weight: 500;
+ letter-spacing: .01em;
+ line-height: 1.35;
+ margin-bottom: 4px;
+}
+.tile-hint {
+ font-size: 11px;
+ color: var(--muted);
+ line-height: 1.4;
+}
+
+/* ── CSS pattern illustrations ── */
+/* Damask-like */
+.pat-damask {
+ background-color: #1a1510;
+ background-image:
+ radial-gradient(ellipse 30% 40% at 50% 50%, rgba(201,169,97,.35) 0%, transparent 70%),
+ radial-gradient(circle at 50% 20%, rgba(201,169,97,.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 50% 80%, rgba(201,169,97,.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 20% 50%, rgba(201,169,97,.15) 0 1.5px, transparent 2.5px),
+ radial-gradient(circle at 80% 50%, rgba(201,169,97,.15) 0 1.5px, transparent 2.5px),
+ repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(125,106,69,.12) 8px, rgba(125,106,69,.12) 9px),
+ repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(125,106,69,.12) 8px, rgba(125,106,69,.12) 9px);
+}
+.pat-damask::after {
+ content: '❧';
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 28px;
+ color: rgba(201,169,97,.55);
+}
+
+/* Minimalist */
+.pat-minimal {
+ background: linear-gradient(160deg, #e8e4dc 0%, #d4cfc4 100%);
+}
+.pat-minimal::before {
+ content: '';
+ position: absolute;
+ left: 18%; right: 18%;
+ top: 42%;
+ height: 1px;
+ background: rgba(13,13,15,.18);
+}
+.pat-minimal::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 28%; bottom: 28%;
+ width: 1px;
+ background: rgba(13,13,15,.12);
+ transform: translateX(-50%);
+}
+
+/* Bohemian */
+.pat-boho {
+ background-color: #2a1810;
+ background-image:
+ repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(196,122,72,.35) 11px, rgba(196,122,72,.35) 12px),
+ repeating-linear-gradient(60deg, transparent, transparent 11px, rgba(180,90,60,.25) 11px, rgba(180,90,60,.25) 12px),
+ repeating-linear-gradient(120deg, transparent, transparent 11px, rgba(140,70,50,.2) 11px, rgba(140,70,50,.2) 12px),
+ radial-gradient(circle at 30% 40%, rgba(201,169,97,.3) 0 6px, transparent 7px),
+ radial-gradient(circle at 70% 65%, rgba(201,100,60,.35) 0 5px, transparent 6px);
+}
+
+/* Art Deco */
+.pat-deco {
+ background-color: #0e1018;
+ background-image:
+ linear-gradient(135deg, rgba(201,169,97,.5) 25%, transparent 25%),
+ linear-gradient(225deg, rgba(201,169,97,.5) 25%, transparent 25%),
+ linear-gradient(45deg, rgba(201,169,97,.5) 25%, transparent 25%),
+ linear-gradient(315deg, rgba(201,169,97,.5) 25%, transparent 25%),
+ linear-gradient(180deg, transparent 48%, rgba(201,169,97,.35) 48%, rgba(201,169,97,.35) 52%, transparent 52%),
+ linear-gradient(90deg, transparent 48%, rgba(201,169,97,.25) 48%, rgba(201,169,97,.25) 52%, transparent 52%);
+ background-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px, 100% 100%, 100% 100%;
+ background-position: 14px 0, 14px 0, 0 0, 0 0, 0 0, 0 0;
+}
+
+/* Additional mood patterns for Q tiles */
+.pat-velvet {
+ background: radial-gradient(ellipse at 40% 30%, #3d1f2e 0%, #1a0e14 70%);
+ background-color: #1a0e14;
+}
+.pat-velvet::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(120,60,80,.15) 3px, rgba(120,60,80,.15) 4px);
+ opacity: .7;
+}
+.pat-linen {
+ background-color: #c8bfb0;
+ background-image:
+ repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(90,80,70,.08) 2px, rgba(90,80,70,.08) 3px),
+ repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(90,80,70,.06) 2px, rgba(90,80,70,.06) 3px);
+}
+.pat-marble {
+ background:
+ radial-gradient(ellipse 80% 50% at 20% 40%, rgba(200,200,210,.15) 0%, transparent 50%),
+ radial-gradient(ellipse 60% 40% at 70% 60%, rgba(180,180,190,.12) 0%, transparent 50%),
+ linear-gradient(125deg, #2a2a30 0%, #1c1c22 40%, #252528 60%, #18181c 100%);
+}
+.pat-marble::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(105deg, transparent 40%, rgba(201,169,97,.08) 45%, transparent 50%),
+ linear-gradient(70deg, transparent 55%, rgba(255,255,255,.04) 60%, transparent 65%);
+}
+.pat-tropical {
+ background-color: #0f1f18;
+ background-image:
+ radial-gradient(ellipse 40% 60% at 25% 50%, rgba(40,120,70,.4) 0%, transparent 70%),
+ radial-gradient(ellipse 35% 50% at 75% 40%, rgba(30,100,60,.35) 0%, transparent 70%),
+ radial-gradient(circle at 50% 70%, rgba(201,169,97,.2) 0 3px, transparent 4px);
+}
+.pat-tropical::after {
+ content: '';
+ position: absolute;
+ width: 40px; height: 50px;
+ left: 50%; top: 50%;
+ transform: translate(-50%,-50%) rotate(-15deg);
+ border: 1.5px solid rgba(80,160,100,.4);
+ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+ box-shadow: 12px -4px 0 -4px rgba(60,140,80,.3), -10px 6px 0 -5px rgba(50,120,70,.25);
+}
+.pat-stripe {
+ background: repeating-linear-gradient(
+ 90deg,
+ #1a1520 0px, #1a1520 10px,
+ #c9a961 10px, #c9a961 12px,
+ #1a1520 12px, #1a1520 22px,
+ #8a7050 22px, #8a7050 23px
+ );
+}
+.pat-geometric {
+ background-color: #141418;
+ background-image:
+ linear-gradient(30deg, rgba(201,169,97,.25) 12%, transparent 12.5%, transparent 87%, rgba(201,169,97,.25) 87.5%),
+ linear-gradient(150deg, rgba(201,169,97,.25) 12%, transparent 12.5%, transparent 87%, rgba(201,169,97,.25) 87.5%),
+ linear-gradient(30deg, rgba(201,169,97,.25) 12%, transparent 12.5%, transparent 87%, rgba(201,169,97,.25) 87.5%),
+ linear-gradient(150deg, rgba(201,169,97,.25) 12%, transparent 12.5%, transparent 87%, rgba(201,169,97,.25) 87.5%),
+ linear-gradient(60deg, rgba(125,106,69,.2) 25%, transparent 25.5%, transparent 75%, rgba(125,106,69,.2) 75%),
+ linear-gradient(60deg, rgba(125,106,69,.2) 25%, transparent 25.5%, transparent 75%, rgba(125,106,69,.2) 75%);
+ background-size: 40px 70px;
+ background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
+}
+.pat-floral {
+ background-color: #1c1418;
+ background-image:
+ radial-gradient(circle at 50% 50%, rgba(180,100,120,.3) 0 8px, transparent 9px),
+ radial-gradient(circle at 30% 35%, rgba(201,169,97,.25) 0 4px, transparent 5px),
+ radial-gradient(circle at 70% 35%, rgba(201,169,97,.25) 0 4px, transparent 5px),
+ radial-gradient(circle at 30% 65%, rgba(201,169,97,.25) 0 4px, transparent 5px),
+ radial-gradient(circle at 70% 65%, rgba(201,169,97,.25) 0 4px, transparent 5px),
+ radial-gradient(circle at 50% 25%, rgba(160,80,100,.2) 0 3px, transparent 4px),
+ radial-gradient(circle at 50% 75%, rgba(160,80,100,.2) 0 3px, transparent 4px);
+}
+.pat-grasscloth {
+ background-color: #b5a88e;
+ background-image:
+ repeating-linear-gradient(0deg,
+ transparent 0px, transparent 1px,
+ rgba(80,70,50,.12) 1px, rgba(80,70,50,.12) 2px,
+ transparent 2px, transparent 4px,
+ rgba(60,50,40,.08) 4px, rgba(60,50,40,.08) 5px
+ ),
+ repeating-linear-gradient(90deg,
+ transparent, transparent 8px,
+ rgba(90,80,60,.06) 8px, rgba(90,80,60,.06) 9px
+ );
+}
+.pat-toile {
+ background-color: #f0ebe3;
+ background-image:
+ radial-gradient(circle at 25% 30%, rgba(40,60,90,.15) 0 10px, transparent 11px),
+ radial-gradient(ellipse 20% 30% at 70% 60%, rgba(40,60,90,.12) 0%, transparent 70%),
+ radial-gradient(circle at 55% 25%, rgba(40,60,90,.1) 0 3px, transparent 4px),
+ radial-gradient(circle at 40% 70%, rgba(40,60,90,.1) 0 4px, transparent 5px);
+}
+.pat-toil<|eos|>
\ No newline at end of file
diff --git a/data/artifacts/028885e12558/grok.png b/data/artifacts/028885e12558/grok.png
new file mode 100644
index 0000000..63fa0ac
Binary files /dev/null and b/data/artifacts/028885e12558/grok.png differ
diff --git a/data/artifacts/028885e12558/kimi.html b/data/artifacts/028885e12558/kimi.html
new file mode 100644
index 0000000..699c1b5
--- /dev/null
+++ b/data/artifacts/028885e12558/kimi.html
@@ -0,0 +1,642 @@
+<!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;
+--accent2:#7d6a45;
+--font-display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
+--font-body:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+--ease-out:cubic-bezier(.22,1,.36,1);
+--ease-spring:cubic-bezier(.22,.9,.24,1);
+--shadow-3:0 8px 24px rgba(0,0,0,.12);
+--shadow-4:0 16px 48px rgba(0,0,0,.18);
+--radius-card:14px;
+}
+
+*{box-sizing:border-box;margin:0;padding:0}
+
+body{
+font-family:var(--font-body);
+background:var(--bg);
+color:var(--text);
+min-height:100vh;
+display:flex;
+justify-content:center;
+align-items:center;
+padding:24px;
+}
+
+.quiz-container{
+width:100%;
+max-width:480px;
+background:var(--surface);
+border-radius:var(--radius-card);
+box-shadow:var(--shadow-4);
+padding:48px 32px;
+position:relative;
+overflow:hidden;
+}
+
+.quiz-container::before{
+content:'';
+position:absolute;
+top:0;left:0;right:0;
+height:3px;
+background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
+}
+
+@keyframes fadeUp{
+from{opacity:0;transform:translateY(28px)}
+to{opacity:1;transform:none}
+}
+
+@keyframes scaleIn{
+from{opacity:0;transform:scale(.92)}
+to{opacity:1;transform:none}
+}
+
+.step{
+display:none;
+animation:fadeUp .7s var(--ease-out) both;
+}
+
+.step.active{display:block}
+
+.step h2{
+font-family:var(--font-display);
+font-size:28px;
+line-height:1.1;
+letter-spacing:-0.02em;
+margin-bottom:8px;
+font-weight:400;
+}
+
+.step-number{
+font-size:11px;
+text-transform:uppercase;
+letter-spacing:0.18em;
+color:var(--muted);
+margin-bottom:16px;
+display:block;
+}
+
+.answers{
+display:grid;
+grid-template-columns:1fr 1fr;
+gap:16px;
+margin-top:32px;
+}
+
+.answer-tile{
+background:linear-gradient(145deg,#1e1e26,#141418);
+border:1px solid rgba(245,242,234,0.08);
+border-radius:12px;
+padding:24px 16px;
+cursor:pointer;
+transition:all .35s var(--ease-spring);
+position:relative;
+overflow:hidden;
+}
+
+.answer-tile:hover{
+transform:translateY(-4px);
+border-color:rgba(201,169,97,0.4);
+box-shadow:0 0 24px 2px rgba(201,169,97,0.15),var(--shadow-3);
+}
+
+.answer-tile:active{transform:translateY(-2px) scale(0.98)}
+
+.tile-visual{
+width:100%;
+height:80px;
+border-radius:8px;
+margin-bottom:16px;
+position:relative;
+}
+
+/* CSS Pattern Illustrations */
+.pattern-damask{
+background-color:#2a2520;
+background-image:
+radial-gradient(circle at 30% 30%,rgba(201,169,97,0.3) 0%,transparent 50%),
+radial-gradient(circle at 70% 70%,rgba(201,169,97,0.2) 0%,transparent 40%),
+repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(201,169,97,0.05) 10px,rgba(201,169,97,0.05) 20px);
+}
+
+.pattern-minimal{
+background:linear-gradient(135deg,#1a1a1e 0%,#25252b 100%);
+position:relative;
+}
+
+.pattern-minimal::after{
+content:'';
+position:absolute;
+inset:20%;
+border:1px solid rgba(245,242,234,0.15);
+}
+
+.pattern-bohemian{
+background:
+repeating-conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,0.15) 0deg 10deg,transparent 10deg 20deg),
+radial-gradient(circle at 20% 80%,rgba(201,169,97,0.25),transparent 50%),
+radial-gradient(circle at 80% 20%,rgba(125,106,69,0.3),transparent 50%);
+background-color:#1e1c18;
+}
+
+.pattern-artdeco{
+background:
+linear-gradient(45deg,transparent 48%,rgba(201,169,97,0.4) 49%,rgba(201,169,97,0.4) 51%,transparent 52%),
+linear-gradient(-45deg,transparent 48%,rgba(201,169,97,0.4) 49%,rgba(201,169,97,0.4) 51%,transparent 52%);
+background-color:#151418;
+background-size:30px 30px;
+}
+
+.pattern-ornate{
+background:
+radial-gradient(circle at 50% 0,rgba(201,169,97,0.3) 0%,transparent 60%),
+radial-gradient(circle at 50% 100%,rgba(201,169,97,0.3) 0%,transparent 60%);
+background-color:#1f1d19;
+}
+
+.pattern-clean{
+background:linear-gradient(180deg,#1e1e22 0%,#16161a 100%);
+box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+.pattern-eclectic{
+background:
+radial-gradient(circle at 0% 0%,rgba(201,169,97,0.4) 0%,transparent 40%),
+radial-gradient(circle at 100% 100%,rgba(125,106,69,0.5) 0%,transparent 40%),
+radial-gradient(circle at 50% 50%,rgba(201,169,97,0.1) 0%,transparent 70%);
+background-color:#252219;
+}
+
+.pattern-geometric{
+background-image:
+linear-gradient(30deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3)),
+linear-gradient(150deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3)),
+linear-gradient(30deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3)),
+linear-gradient(150deg,rgba(201,169,97,0.3) 12%,transparent 12.5%,transparent 87%,rgba(201,169,97,0.3) 87.5%,rgba(201,169,97,0.3));
+background-color:#0f0f12;
+background-size:40px 70px;
+background-position:0 0,0 0,20px 35px,20px 35px;
+}
+
+.pattern-floral{background:var(--pattern-damask)}
+.pattern-neutral{background:var(--pattern-minimal)}
+.pattern-texture{background:var(--pattern-bohemian)}
+.pattern-metallic{background:var(--pattern-artdeco)}
+.pattern-library{background:var(--pattern-damask)}
+.pattern-loft{background:var(--pattern-minimal)}
+.pattern-studio{background:var(--pattern-bohemian)}
+.pattern-penthouse{background:var(--pattern-artdeco)}
+.pattern-heirloom{background:var(--pattern-damask)}
+.pattern-statement{background:var(--pattern-artdeco)}
+.pattern-curated{background:var(--pattern-minimal)}
+.pattern-collected{background:var(--pattern-bohemian)}
+
+.tile-label{
+font-size:14px;
+font-weight:500;
+color:var(--text);
+text-align:center;
+line-height:1.4;
+}
+
+.progress-bar{
+position:absolute;
+bottom:0;left:0;height:2px;
+background:rgba(245,242,234,0.1);
+width:100%;
+}
+
+.progress-fill{
+height:100%;
+background:linear-gradient(90deg,var(--accent),var(--accent2));
+transition:width .5s var(--ease-out);
+width:0%;
+}
+
+.result-card{
+width:1080px;
+height:1080px;
+background:var(--bg);
+display:none;
+position:relative;
+overflow:hidden;
+}
+
+.result-card.active{
+display:block;
+animation:scaleIn .8s var(--ease-out) both;
+}
+
+.result-content{
+position:absolute;
+inset:80px;
+display:flex;
+flex-direction:column;
+justify-content:center;
+align-items:center;
+text-align:center;
+}
+
+.result-pattern{
+width:400px;
+height:400px;
+border-radius:50%;
+margin-bottom:48px;
+position:relative;
+box-shadow:var(--shadow-4);
+}
+
+.pattern-result-damask{
+background-color:#2a2520;
+background-image:
+repeating-radial-gradient(circle at 50% 50%,rgba(201,169,97,0.15) 0px,rgba(201,169,97,0.15) 20px,transparent 20px,transparent 40px),
+repeating-conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,0.1) 0deg 15deg,transparent 15deg 30deg);
+border:2px solid rgba(201,169,97,0.3);
+}
+
+.pattern-result-minimal{
+background:linear-gradient(145deg,#1a1a1e 0%,#0d0d0f 100%);
+border:1px solid rgba(245,242,234,0.1);
+position:relative;
+}
+
+.pattern-result-minimal::before{
+content:'';
+position:absolute;
+inset:40px;
+border:1px solid rgba(245,242,234,0.2);
+border-radius:4px;
+}
+
+.pattern-result-bohemian{
+background:
+radial-gradient(circle at 20% 20%,rgba(201,169,97,0.4) 0%,transparent 40%),
+radial-gradient(circle at 80% 80%,rgba(125,106,69,0.5) 0%,transparent 40%),
+conic-gradient(from 0deg at 50% 50%,rgba(201,169,97,0.1) 0deg,rgba(125,106,69,0.1) 60deg,rgba(201,169,97,0.1) 120deg,rgba(125,106,69,0.1) 180deg,rgba(201,169,97,0.1) 240deg,rgba(125,106,69,0.1) 300deg,rgba(201,169,97,0.1) 360deg);
+background-color:#1e1c18;
+border:2px solid rgba(201,169,97,0.2);
+}
+
+.pattern-result-artdeco{
+background:
+repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(201,169,97,0.1) 20px,rgba(201,169,97,0.1) 40px),
+repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(201,169,97,0.1) 20px,rgba(201,169,97,0.1) 40px),
+radial-gradient(circle at 50% 50%,rgba(201,169,97,0.15) 0%,transparent 70%);
+background-color:#0f0f12;
+border:3px solid rgba(201,169,97,0.4);
+position:relative;
+}
+
+.pattern-result-artdeco::after{
+content:'';
+position:absolute;
+inset:30px;
+border:1px solid rgba(201,169,97,0.3);
+transform:rotate(45deg);
+}
+
+.result-title{
+font-family:var(--font-display);
+font-size:72px;
+letter-spacing:-0.03em;
+color:var(--text);
+margin-bottom:24px;
+line-height:1;
+}
+
+.result-subtitle{
+font-size:14px;
+text-transform:uppercase;
+letter-spacing:0.2em;
+color:var(--accent);
+margin-bottom:32px;
+}
+
+.result-desc{
+font-size:24px;
+line-height:1.6;
+color:var(--muted);
+max-width:600px;
+margin-bottom:48px;
+font-weight:300;
+}
+
+.shop-btn{
+display:inline-flex;
+align-items:center;
+gap:12px;
+padding:24px 48px;
+background:transparent;
+border:1px solid var(--accent);
+color:var(--accent);
+font-size:14px;
+text-transform:uppercase;
+letter-spacing:0.15em;
+text-decoration:none;
+transition:all .35s var(--ease-spring);
+cursor:pointer;
+}
+
+.shop-btn:hover{
+background:var(--accent);
+color:var(--bg);
+transform:translateY(-2px);
+box-shadow:0 8px 32px rgba(201,169,97,0.3);
+}
+
+.corner-accent{
+position:absolute;
+width:120px;
+height:120px;
+border:1px solid rgba(201,169,97,0.2);
+}
+
+.corner-tl{top:40px;left:40px;border-right:none;border-bottom:none}
+.corner-tr{top:40px;right:40px;border-left:none;border-bottom:none}
+.corner-bl{bottom:40px;left:40px;border-right:none;border-top:none}
+.corner-br{bottom:40px;right:40px;border-left:none;border-top:none}
+
+.quiz-view{display:block}
+.result-view{display:none;justify-content:center;align-items:center;min-height:100vh;padding:40px}
+
+.result-view.active{display:flex}
+
+@media(max-width:1200px){
+.result-card{transform:scale(0.5);transform-origin:center}
+}
+
+@media(max-width:640px){
+.quiz-container{padding:32px 20px}
+.answers{grid-template-columns:1fr}
+.result-card{transform:scale(0.35)}
+}
+
+.restart-btn{
+position:fixed;
+top:24px;
+right:24px;
+padding:12px 24px;
+background:rgba(23,23,28,0.9);
+border:1px solid rgba(245,242,234,0.1);
+color:var(--muted);
+font-size:12px;
+text-transform:uppercase;
+letter-spacing:0.1em;
+cursor:pointer;
+transition:all .3s var(--ease-spring);
+z-index:100;
+border-radius:6px;
+}
+
+.restart-btn:hover{
+border-color:var(--accent);
+color:var(--accent);
+}
+
+.brand-mark{
+position:absolute;
+top:32px;
+left:50%;
+transform:translateX(-50%);
+font-family:var(--font-display);
+font-size:11px;
+text-transform:uppercase;
+letter-spacing:0.25em;
+color:var(--muted);
+}
+</style>
+</head>
+<body>
+
+<div class="quiz-view" id="quizView">
+<div class="quiz-container">
+<div class="brand-mark">Atelier Luxe</div>
+
+<div class="step active" data-step="1">
+<span class="step-number">Question 01 / 05</span>
+<h2>Which room calls to you?</h2>
+<div class="answers">
+<div class="answer-tile" onclick="selectAnswer(1,'traditional')">
+<div class="tile-visual pattern-ornate"></div>
+<div class="tile-label">A grand library with leather-bound books</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(1,'modern')">
+<div class="tile-visual pattern-clean"></div>
+<div class="tile-label">A sunlit loft with floor-to-ceiling windows</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(1,'bohemian')">
+<div class="tile-visual pattern-eclectic"></div>
+<div class="tile-label">An artist's studio filled with treasures</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(1,'artdeco')">
+<div class="tile-visual pattern-geometric"></div>
+<div class="tile-label">A penthouse with skyline views</div>
+</div>
+</div>
+</div>
+
+<div class="step" data-step="2">
+<span class="step-number">Question 02 / 05</span>
+<h2>What's your ideal pattern?</h2>
+<div class="answers">
+<div class="answer-tile" onclick="selectAnswer(2,'traditional')">
+<div class="tile-visual pattern-damask"></div>
+<div class="tile-label">Intricate florals that tell a story</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(2,'modern')">
+<div class="tile-visual pattern-minimal"></div>
+<div class="tile-label">Clean lines, pure color, no distraction</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(2,'bohemian')">
+<div class="tile-visual pattern-bohemian"></div>
+<div class="tile-label">Layered textures, mixed prints</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(2,'artdeco')">
+<div class="tile-visual pattern-artdeco"></div>
+<div class="tile-label">Bold geometry with metallic accents</div>
+</div>
+</div>
+</div>
+
+<div class="step" data-step="3">
+<span class="step-number">Question 03 / 05</span>
+<h2>Choose your color mood:</h2>
+<div class="answers">
+<div class="answer-tile" onclick="selectAnswer(3,'traditional')">
+<div class="tile-visual pattern-damask"></div>
+<div class="tile-label">Rich burgundies and forest greens</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(3,'modern')">
+<div class="tile-visual pattern-minimal"></div>
+<div class="tile-label">Soft greys and warm whites</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(3,'bohemian')">
+<div class="tile-visual pattern-bohemian"></div>
+<div class="tile-label">Terracotta, ochre, and jewel tones</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(3,'artdeco')">
+<div class="tile-visual pattern-artdeco"></div>
+<div class="tile-label">Midnight blue, gold, and black</div>
+</div>
+</div>
+</div>
+
+<div class="step" data-step="4">
+<span class="step-number">Question 04 / 05</span>
+<h2>Your dream dinner party:</h2>
+<div class="answers">
+<div class="answer-tile" onclick="selectAnswer(4,'traditional')">
+<div class="tile-visual pattern-ornate"></div>
+<div class="tile-label">Formal seating, heirloom silver</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(4,'modern')">
+<div class="tile-visual pattern-clean"></div>
+<div class="tile-label">Intimate, curated, effortless</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(4,'bohemian')">
+<div class="tile-visual pattern-eclectic"></div>
+<div class="tile-label">Family-style, mismatched charm</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(4,'artdeco')">
+<div class="tile-visual pattern-geometric"></div>
+<div class="tile-label">Champagne towers, crystal glinting</div>
+</div>
+</div>
+</div>
+
+<div class="step" data-step="5">
+<span class="step-number">Question 05 / 05</span>
+<h2>The detail that stops you in your tracks:</h2>
+<div class="answers">
+<div class="answer-tile" onclick="selectAnswer(5,'traditional')">
+<div class="tile-visual pattern-damask"></div>
+<div class="tile-label">Hand-painted craftsmanship</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(5,'modern')">
+<div class="tile-visual pattern-minimal"></div>
+<div class="tile-label">Perfect proportion, subtle texture</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(5,'bohemian')">
+<div class="tile-visual pattern-bohemian"></div>
+<div class="tile-label">Vintage finds, stories embedded</div>
+</div>
+<div class="answer-tile" onclick="selectAnswer(5,'artdeco')">
+<div class="tile-visual pattern-artdeco"></div>
+<div class="tile-label">Gilded edges, mirrored luxury</div>
+</div>
+</div>
+</div>
+
+<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
+</div>
+</div>
+
+<div class="result-view" id="resultView">
+<button class="restart-btn" onclick="restartQuiz()">Retake Quiz</button>
+
+<div class="result-card" id="resultCard">
+<div class="corner-accent corner-tl"></div>
+<div class="corner-accent corner-tr"></div>
+<div class="corner-accent corner-bl"></div>
+<div class="corner-accent corner-br"></div>
+<div class="result-content">
+<div class="result-pattern" id="resultPattern"></div>
+<div class="result-subtitle" id="resultSubtitle">Your Wallcovering Style</div>
+<h1 class="result-title" id="resultTitle"></h1>
+<p class="result-desc" id="resultDesc"></p>
+<a href="#" class="shop-btn">Shop This Style →</a>
+</div>
+</div>
+</div>
+
+<script>
+const scores={traditional:0,modern:0,bohemian:0,artdeco:0};
+let currentStep=1;
+
+const results={
+traditional:{
+title:'Traditional Damask',
+subtitle:'Timeless Elegance',
+desc:'You gravitate toward heritage patterns and storied craftsmanship. Your walls whisper of ancestral estates and candlelit libraries—rich, layered, and enduringly sophisticated.',
+patternClass:'pattern-result-damask'
+},
+modern:{
+title:'Modern Minimalist',
+subtitle:'Quiet Luxury',
+desc:'You find beauty in restraint. Clean planes, subtle textures, and deliberate negative space create your sanctuary—a meditation on form, light, and essential elegance.',
+patternClass:'pattern-result-minimal'
+},
+bohemian:{
+title:'Bohemian Maximalist',
+subtitle:'Curated Abundance',
+desc:'Your spirit collects beauty without boundaries. Layered patterns, sun-washed colors, and global influences converge in spaces that feel both traveled and deeply personal.',
+patternClass:'pattern-result-bohemian'
+},
+artdeco:{
+title:'Art Deco Glam',
+subtitle:'Bold Opulence',
+desc:'You command drama and geometry in equal measure. Gilded accents, sharp lines, and unapologetic luxury define your aesthetic—glamour that demands to be witnessed.',
+patternClass:'pattern-result-artdeco'
+}
+};
+
+function selectAnswer(step,style){
+scores[style]++;
+if(step<5){
+document.querySelector(`.step[data-step="${step}"]`).classList.remove('active');
+setTimeout(()=>{
+document.querySelector(`.step[data-step="${step+1}"]`).classList.add('active');
+updateProgress(step+1);
+},50);
+}else{
+showResult();
+}
+}
+
+function updateProgress(step){
+document.getElementById('progressFill').style.width=(step/5*100)+'%';
+}
+
+function showResult(){
+const winner=Object.entries(scores).sort((a,b)=>b[1]-a[1])[0][0];
+const result=results[winner];
+
+document.getElementById('quizView').style.display='none';
+document.getElementById('resultView').classList.add('active');
+document.getElementById('resultCard').classList.add('active');
+
+document.getElementById('resultTitle').textContent=result.title;
+document.getElementById('resultSubtitle').textContent=result.subtitle;
+document.getElementById('resultDesc').textContent=result.desc;
+document.getElementById('resultPattern').className='result-pattern '+result.patternClass;
+}
+
+function restartQuiz(){
+Object.keys(scores).forEach(k=>scores[k]=0);
+currentStep=1;
+document.querySelectorAll('.step').forEach((el,i)=>{
+el.classList.toggle('active',i===0);
+});
+document.getElementById('progressFill').style.width='20%';
+document.getElementById('resultView').classList.remove('active');
+document.getElementById('resultCard').classList.remove('active');
+document.getElementById('quizView').style.display='block';
+}
+
+updateProgress(1);
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/028885e12558/kimi.png b/data/artifacts/028885e12558/kimi.png
new file mode 100644
index 0000000..54a1db3
Binary files /dev/null and b/data/artifacts/028885e12558/kimi.png differ
diff --git a/data/artifacts/028885e12558/qwen25-7b.html b/data/artifacts/028885e12558/qwen25-7b.html
new file mode 100644
index 0000000..1e6eeab
--- /dev/null
+++ b/data/artifacts/028885e12558/qwen25-7b.html
@@ -0,0 +1,98 @@
+<!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>
+ body {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ background-color: #0d0d0f;
+ color: #f5f2ea;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ place-items: center;
+ min-height: 1080px;
+ }
+ .quiz-container {
+ max-width: 768px;
+ width: 100%;
+ text-align: center;
+ }
+ .question-card, .result-card {
+ background-color: #17171c;
+ color: #f5f2ea;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ overflow: hidden;
+ }
+ .question-card {
+ padding: 32px;
+ margin-bottom: 24px;
+ }
+ .result-card {
+ display: none;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 24px;
+ padding: 96px;
+ }
+ .answer-tile {
+ background-color: #c9a961;
+ color: #f5f2ea;
+ border-radius: 14px;
+ padding: 32px;
+ cursor: pointer;
+ transition: box-shadow 0.7s cubic-bezier(.22,1,.36,1) both, transform 0.7s cubic-bezier(.22,1,.36,1) both;
+ }
+ .answer-tile:hover {
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+ transform: translateY(-15px);
+ }
+ .result-card .card-result {
+ background-color: #c9a961;
+ color: #f5f2ea;
+ border-radius: 14px;
+ padding: 32px;
+ text-align: center;
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ .fade-up-enter-active, .fade-up-leave-active {
+ transition: all 0.7s cubic-bezier(.22,1,.36,1) both;
+ }
+ .fade-up-enter-from, .fade-up-leave-to {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ </style>
+</head>
+<body>
+ <div class="quiz-container">
+ <h1 class="question-card">What's Your Wallcovering Style?</h1>
+ <form id="quizForm" onsubmit="return false;">
+ <div class="answer-tile" onclick="selectAnswer('Traditional Damask')">Traditional Damask</div>
+ <div class="answer-tile" onclick="selectAnswer('Modern Minimalist')">Modern Minimalist</div>
+ <div class="answer-tile" onclick="selectAnswer('Bohemian Maximalist')">Bohemian Maximalist</div>
+ <div class="answer-tile" onclick="selectAnswer('Art Deco Glam')">Art Deco Glam</div>
+ </form>
+ <div id="resultCard" class="result-card fade-up-enter-active"></div>
+ </div>
+
+ <script>
+ function selectAnswer(style) {
+ document.getElementById("resultCard").innerHTML = `
+ <h2 class="card-result">${style}</h2>
+ <p class="card-result">Shop this style</p>
+ <button class="card-result" onclick="window.location.href='https://example.com/shop-style'">Shop this style</button>
+ `;
+ document.getElementById("resultCard").classList.remove('fade-up-enter-active');
+ setTimeout(() => {
+ document.getElementById("resultCard").classList.add('fade-up-enter-active');
+ }, 10);
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/028885e12558/qwen25-7b.png b/data/artifacts/028885e12558/qwen25-7b.png
new file mode 100644
index 0000000..2aae0d6
Binary files /dev/null and b/data/artifacts/028885e12558/qwen25-7b.png differ
diff --git a/data/artifacts/172f180e3161/gemma3-12b.html b/data/artifacts/172f180e3161/gemma3-12b.html
new file mode 100644
index 0000000..a6c37ab
--- /dev/null
+++ b/data/artifacts/172f180e3161/gemma3-12b.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Two-Player Pong</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #111; /* Darker background */
+ color: #fff;
+ font-family: 'Press Start 2P', monospace; /* Retro font */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+
+ canvas {
+ background: #000;
+ display: block;
+ image-rendering: pixelated; /* Sharpens pixels */
+ }
+
+ #gameOver, #restart {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ text-align: center;
+ font-size: 2em;
+ width: 100%;
+ color: #f0f0f0;
+ cursor: pointer;
+ padding: 10px;
+ border: 1px solid #444; /* Subtle border */
+ background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
+ }
+
+ #restart {
+ display: none;
+ }
+ </style>
+ <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+</head>
+<body>
+ <canvas id="pongCanvas" width="800" height="400"></canvas>
+ <div id="gameOver" style="display:none;">Game Over</div>
+ <div id="restart" style="display:none;" onclick="init()">Press to Restart</div>
+
+ <script>
+ const canvas = document.getElementById('pongCanvas');
+ const ctx = canvas.getContext('2d');
+
+ const width = canvas.width;
+ const height = canvas.height;
+
+ let leftPaddle = { x: 10, y: 150, width: 8, height: 80, dy: 0 };
+ let rightPaddle = { x: width - 20, y: 150, width: 8, height: 80, dy: 0 };
+ let ball = {
+ x: width / 2,
+ y: height / 2,
+ radius: 8,
+ dx: 3,
+ dy: 3,
+ speed: 3
+ };
+ let leftScore = 0;
+ let rightScore = 0;
+ let gameOver = false;
+ const winScore = 11;
+
+ function drawPaddle(paddle) {
+ ctx.fillStyle = '#fff'; /* White paddles */
+ ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+ }
+
+ function drawBall() {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = '#fff'; /* White ball */
+ ctx.fill();
+ ctx.closePath();
+ }
+
+ function drawNet() {
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 1;
+ for (let i = 0; i < height; i += 25) {
+ ctx.beginPath();
+ ctx.moveTo(width / 2, i);
+ ctx.lineTo(width / 2, i + 12);
+ ctx.stroke();
+ }
+ }
+
+ function drawScore() {
+ ctx.font = '32px "Press Start 2P", monospace'; /* Retro font */
+ ctx.fillStyle = '#fff';
+ ctx.fillText(leftScore, width / 4 - 20, 50);
+ ctx.fillText(rightScore, 3 * width / 4 + 20, 50);
+ }
+
+ function movePaddles() {
+ leftPaddle.y += leftPaddle.dy;
+ rightPaddle.y += rightPaddle.dy;
+
+ // Prevent paddles from moving out of bounds
+ if (leftPaddle.y < 0) leftPaddle.y = 0;
+ if (leftPaddle.y + leftPaddle.height > height) leftPaddle.y = height - leftPaddle.height;
+ if (rightPaddle.y < 0) rightPaddle.y = 0;
+ if (rightPaddle.y + rightPaddle.height > height) rightPaddle.y = height - rightPaddle.height;
+ }
+
+ function moveBall() {
+ ball.x += ball.dx;
+ ball.y += ball.dy;
+
+ // Bounce off top and bottom
+ if (ball.y - ball.radius < 0 || ball.y + ball.radius > height) {
+ ball.dy *= -1;
+ playSound('hit');
+ }
+
+ // Paddle collision
+ let leftPaddleCollision = ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
+ ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height;
+ if (leftPaddleCollision) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (leftPaddle.y + leftPaddle.height / 2)) / (leftPaddle.height / 2);
+ ball.dy = relativeY * 4; // Adjusted angle
+ ball.speed += 0.15;
+ playSound('hit');
+ }
+
+ let rightPaddleCollision = ball.x + ball.radius > rightPaddle.x &&
+ ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height;
+ if (rightPaddleCollision) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (rightPaddle.y + rightPaddle.height / 2)) / (rightPaddle.height / 2);
+ ball.dy = relativeY * 4; // Adjusted angle
+ ball.speed += 0.15;
+ playSound('hit');
+ }
+
+ // Score
+ if (ball.x - ball.radius < 0) {
+ rightScore++;
+ resetBall();
+ playSound('score');
+ }
+
+ if (ball.x + ball.radius > width) {
+ leftScore++;
+ resetBall();
+ playSound('score');
+ }
+ }
+
+ function resetBall() {
+ ball.x = width / 2;
+ ball.y = height / 2;
+ ball.dx = (Math.random() > 0.5 ? -1 : 1) * ball.speed;
+ ball.dy = (Math.random() - 0.5) * 6;
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, width, height);
+ drawNet();
+ drawPaddle(leftPaddle);
+ drawPaddle(rightPaddle);
+ drawBall();
+ drawScore();
+ }
+
+ function update() {
+ movePaddles();
+ moveBall();
+ draw();
+ }
+
+ function gameLoop() {
+ if (gameOver) return;
+ update();
+ requestAnimationFrame(gameLoop);
+ }
+
+ function checkWin() {
+ if (leftScore >= winScore || rightScore >= winScore) {
+ gameOver = true;
+ document.getElementById('gameOver').style.display = 'block';
+ document.getElementById('restart').style.display = 'block';
+ }
+ }
+
+ function init() {
+ leftScore = 0;
+ rightScore = 0;
+ gameOver = false;
+ resetBall();
+ ball.speed = 3; // Reset ball speed on restart
+ document.getElementById('gameOver').style.display = 'none';
+ document.getElementById('restart').style.display = 'none';
+ gameLoop();
+ }
+
+ document.addEventListener('keydown', function(e) {
+ if (e.key === 'w') leftPaddle.dy = -6;
+ if (e.key === 's') leftPaddle.dy = 6;
+ if (e.key === 'ArrowUp') rightPaddle.dy = -6;
+ if (e.key === 'ArrowDown') rightPaddle.dy = 6;
+ });
+
+ document.addEventListener('keyup', function(e) {
+ if (e.key === 'w' || e.key === 's') leftPaddle.dy = 0;
+ if (e.key === 'ArrowUp' || e.key === 'ArrowDown') rightPaddle.dy = 0;
+ });
+
+ const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+ function playSound(type) {
+ if (!audioCtx) return;
+ if (audioCtx.state === 'suspended') {
+ audioCtx.resume();
+ }
+
+ const osc = audioCtx.createOscillator();
+ const gain = audioCtx.createGain();
+
+ osc.type = type === 'hit' ? 'square' : 'sine';
+ osc.frequency.value = type === 'hit' ? 1200 : 440;
+ gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
+ gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);
+
+ osc.connect(gain);
+ gain.connect(audioCtx.destination);
+
+ osc.start();
+ osc.stop(audioCtx.currentTime + 0.2);
+ }
+
+ init();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/172f180e3161/gemma3-12b.png b/data/artifacts/172f180e3161/gemma3-12b.png
new file mode 100644
index 0000000..5263b00
Binary files /dev/null and b/data/artifacts/172f180e3161/gemma3-12b.png differ
diff --git a/data/artifacts/172f180e3161/hermes3-8b.html b/data/artifacts/172f180e3161/hermes3-8b.html
new file mode 100644
index 0000000..9caaa66
--- /dev/null
+++ b/data/artifacts/172f180e3161/hermes3-8b.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Two-Player Pong</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+ color: white;
+ font-family: 'Press Start 2P', cursive;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+ canvas {
+ background: #1e1e2e;
+ display: block;
+ }
+ .score {
+ font-size: 3em;
+ text-shadow: 2px 2px 0 #000;
+ margin: 0;
+ padding: 10px;
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ top: 10px;
+ right: 0;
+ left: 0;
+ }
+ .game-over {
+ font-size: 5em;
+ text-shadow: 4px 4px 0 #000;
+ margin: 0;
+ padding: 20px;
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .restart {
+ font-size: 2em;
+ text-shadow: 1px 1px 0 #000;
+ margin: 0;
+ padding: 10px 20px;
+ background-color: #e52d27;
+ color: #fff;
+ border-radius: 5px;
+ display: inline-block;
+ cursor: pointer;
+ position: absolute;
+ bottom: 10%;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ </style>
+</head>
+<body>
+<canvas id="pongCanvas" width="800" height="400"></canvas>
+<div class="score">
+ <span class="left-score">0</span> : <span class="right-score">0</span>
+</div>
+<div class="game-over" style="display:none;">Game Over</div>
+<div class="restart" style="display:none;" onclick="init()">Press to Restart</div>
+<script>
+const canvas = document.getElementById('pongCanvas');
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width;
+const height = canvas.height;
+
+let leftPaddle = { x: 20, y: (height - 100) / 2, width: 10, height: 100 };
+let rightPaddle = { x: width - 30, y: (height - 100) / 2, width: 10, height: 100 };
+let ball = {
+ x: width / 2,
+ y: height / 2,
+ radius: 7,
+ dx: 3,
+ dy: 3,
+ speed: 3
+};
+const leftScore = 0;
+const rightScore = 0;
+let gameOver = false;
+
+const paddleSpeed = 6;
+const winScore = 11;
+
+function drawPaddle(paddle) {
+ ctx.fillStyle = 'white';
+ ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+}
+
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ctx.closePath();
+}
+
+function movePaddles() {
+ leftPaddle.y += (canvas.height - leftPaddle.height) / 2;
+ rightPaddle.y += (canvas.height - rightPaddle.height) / 2;
+}
+
+function moveBall() {
+ ball.x += ball.dx;
+ ball.y += ball.dy;
+
+ if (
+ ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
+ ball.y > leftPaddle.y &&
+ ball.y < leftPaddle.y + leftPaddle.height
+ ) {
+ ball.x = leftPaddle.x + leftPaddle.width;
+ ball.dx *= -1;
+
+ const paddleTop = leftPaddle.y;
+ const paddleBottom = leftPaddle.y + leftPaddle.height;
+ const ballCenter = ball.y;
+
+ if (ballCenter < (paddleTop + paddleBottom) / 2) {
+ ball.dy = 4;
+ } else {
+ ball.dy = -4;
+ }
+ }
+
+ if (
+ ball.x + ball.radius > rightPaddle.x &&
+ ball.y > rightPaddle.y &&
+ ball.y < rightPaddle.y + rightPaddle.height
+ ) {
+ ball.x = rightPaddle.x - ball.radius;
+ ball.dx *= -1;
+
+ const paddleTop = rightPaddle.y;
+ const paddleBottom = rightPaddle.y + rightPaddle.height;
+ const ballCenter = ball.y;
+
+ if (ballCenter < (paddleTop + paddleBottom) / 2) {
+ ball.dy = 4;
+ } else {
+ ball.dy = -4;
+ }
+ }
+
+ // Bounce off top and bottom
+ if (ball.y - ball.radius < 0 || ball.y + ball.radius > height) {
+ ball.dy *= -1;
+ }
+
+ // Score
+ if (ball.x - ball.radius < 0) {
+ rightScore++;
+ resetBall();
+ }
+
+ if (ball.x + ball.radius > width) {
+ leftScore++;
+ resetBall();
+ }
+}
+
+function resetBall() {
+ ball.x = width / 2;
+ ball.y = height / 2;
+ ball.dx = (Math.random() > 0.5 ? -1 : 1) * ball.speed;
+ ball.dy = (Math.random() - 0.5) * 4;
+}
+
+function drawScore() {
+ ctx.font = '32px "Press Start 2P", cursive';
+ ctx.fillStyle = 'white';
+
+ ctx.fillText(leftScore, width / 4, 50);
+ ctx.fillText(rightScore, 3 * width / 4, 50);
+}
+
+function update() {
+ movePaddles();
+ moveBall();
+ drawScore();
+}
+
+function gameLoop() {
+ if (gameOver) return;
+
+ update();
+ requestAnimationFrame(gameLoop);
+}
+
+function checkWin() {
+ if (leftScore >= winScore || rightScore >= winScore) {
+ gameOver = true;
+
+ document.querySelector('.score').style.display = 'none';
+ document.querySelector('.game-over').style.display = 'block';
+ }
+}
+
+function init() {
+ leftScore = 0;
+ rightScore = 0;
+ gameOver = false;
+
+ resetBall();
+
+ document.querySelector('.score .left-score').textContent = leftScore;
+ document.querySelector('.score .right-score').textContent = rightScore;
+
+ gameLoop();
+}
+
+document.addEventListener('keydown', function(e) {
+ if (e.key === 'w') leftPaddle.y += -paddleSpeed;
+ if (e.key === 's') leftPaddle.y += paddleSpeed;
+
+ if (e.key === 'ArrowUp') rightPaddle.y += -paddleSpeed;
+ if (e.key === 'ArrowDown') rightPaddle.y += paddleSpeed;
+});
+
+function playSound(type) {
+ const audio = new Audio(`./sounds/${type}.mp3`);
+ audio.volume = 0.2;
+ audio.play();
+}
+
+init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/172f180e3161/hermes3-8b.png b/data/artifacts/172f180e3161/hermes3-8b.png
new file mode 100644
index 0000000..15e42f4
Binary files /dev/null and b/data/artifacts/172f180e3161/hermes3-8b.png differ
diff --git a/data/artifacts/172f180e3161/hf-qwen-coder-32b.html b/data/artifacts/172f180e3161/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..3a08b8e
--- /dev/null
+++ b/data/artifacts/172f180e3161/hf-qwen-coder-32b.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Two-Player Pong</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #1e1e2f;
+ color: white;
+ font-family: 'Courier New', monospace;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+ canvas {
+ background: #1e1e2f;
+ display: block;
+ }
+ #gameOver {
+ position: absolute;
+ top: 40%;
+ text-align: center;
+ font-size: 3em;
+ width: 100%;
+ color: #ff6347;
+ }
+ #restart {
+ position: absolute;
+ top: 50%;
+ text-align: center;
+ font-size: 1.5em;
+ width: 100%;
+ cursor: pointer;
+ color: #ff6347;
+ }
+ </style>
+</head>
+<body>
+<canvas id="pongCanvas" width="800" height="400"></canvas>
+<div id="gameOver" style="display:none;">Game Over</div>
+<div id="restart" style="display:none;" onclick="init()">Press to Restart</div>
+<script>
+const canvas = document.getElementById('pongCanvas');
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width;
+const height = canvas.height;
+
+let leftPaddle = { x: 30, y: 150, width: 10, height: 100, dy: 0 };
+let rightPaddle = { x: width - 40, y: 150, width: 10, height: 100, dy: 0 };
+let ball = {
+ x: width / 2,
+ y: height / 2,
+ radius: 10,
+ dx: 4,
+ dy: 4,
+ speed: 4
+};
+let leftScore = 0;
+let rightScore = 0;
+let gameOver = false;
+
+const paddleSpeed = 6;
+const winScore = 11;
+
+function drawPaddle(paddle) {
+ ctx.fillStyle = '#ff6347';
+ ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+}
+
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = '#ff6347';
+ ctx.fill();
+ ctx.closePath();
+}
+
+function drawNet() {
+ ctx.strokeStyle = '#ff6347';
+ ctx.lineWidth = 2;
+ for (let i = 0; i < height; i += 20) {
+ ctx.beginPath();
+ ctx.moveTo(width / 2, i);
+ ctx.lineTo(width / 2, i + 10);
+ ctx.stroke();
+ }
+}
+
+function drawScore() {
+ ctx.font = '32px monospace';
+ ctx.fillText(leftScore, width / 4, 50);
+ ctx.fillText(rightScore, 3 * width / 4, 50);
+}
+
+function movePaddles() {
+ leftPaddle.y += leftPaddle.dy;
+ rightPaddle.y += rightPaddle.dy;
+
+ if (leftPaddle.y < 0) leftPaddle.y = 0;
+ if (leftPaddle.y + leftPaddle.height > height) leftPaddle.y = height - leftPaddle.height;
+ if (rightPaddle.y < 0) rightPaddle.y = 0;
+ if (rightPaddle.y + rightPaddle.height > height) rightPaddle.y = height - rightPaddle.height;
+}
+
+function moveBall() {
+ ball.x += ball.dx;
+ ball.y += ball.dy;
+
+ if (ball.y - ball.radius < 0 || ball.y + ball.radius > height) {
+ ball.dy *= -1;
+ playSound('hit');
+ }
+
+ if (
+ ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
+ ball.y > leftPaddle.y &&
+ ball.y < leftPaddle.y + leftPaddle.height
+ ) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (leftPaddle.y + leftPaddle.height / 2)) / (leftPaddle.height / 2);
+ ball.dy = relativeY * 6;
+ ball.speed += 0.1;
+ playSound('hit');
+ }
+
+ if (
+ ball.x + ball.radius > rightPaddle.x &&
+ ball.y > rightPaddle.y &&
+ ball.y < rightPaddle.y + rightPaddle.height
+ ) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (rightPaddle.y + rightPaddle.height / 2)) / (rightPaddle.height / 2);
+ ball.dy = relativeY * 6;
+ ball.speed += 0.1;
+ playSound('hit');
+ }
+
+ if (ball.x - ball.radius < 0) {
+ rightScore++;
+ resetBall();
+ playSound('score');
+ }
+
+ if (ball.x + ball.radius > width) {
+ leftScore++;
+ resetBall();
+ playSound('score');
+ }
+}
+
+function resetBall() {
+ ball.x = width / 2;
+ ball.y = height / 2;
+ ball.dx = (Math.random() > 0.5 ? -1 : 1) * ball.speed;
+ ball.dy = (Math.random() - 0.5) * 8;
+}
+
+function draw() {
+ ctx.clearRect(0, 0, width, height);
+ drawNet();
+ drawPaddle(leftPaddle);
+ drawPaddle(rightPaddle);
+ drawBall();
+ drawScore();
+}
+
+function update() {
+ movePaddles();
+ moveBall();
+ draw();
+}
+
+function gameLoop() {
+ if (gameOver) return;
+ checkWin();
+ update();
+ requestAnimationFrame(gameLoop);
+}
+
+function checkWin() {
+ if (leftScore >= winScore || rightScore >= winScore) {
+ gameOver = true;
+ document.getElementById('gameOver').style.display = 'block';
+ document.getElementById('restart').style.display = 'block';
+ }
+}
+
+function init() {
+ leftScore = 0;
+ rightScore = 0;
+ gameOver = false;
+ resetBall();
+ document.getElementById('gameOver').style.display = 'none';
+ document.getElementById('restart').style.display = 'none';
+ gameLoop();
+}
+
+document.addEventListener('keydown', function(e) {
+ if (e.key === 'w') leftPaddle.dy = -paddleSpeed;
+ if (e.key === 's') leftPaddle.dy = paddleSpeed;
+ if (e.key === 'ArrowUp') rightPaddle.dy = -paddleSpeed;
+ if (e.key === 'ArrowDown') rightPaddle.dy = paddleSpeed;
+});
+
+document.addEventListener('keyup', function(e) {
+ if (e.key === 'w' || e.key === 's') leftPaddle.dy = 0;
+ if (e.key === 'ArrowUp' || e.key === 'ArrowDown') rightPaddle.dy = 0;
+});
+
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+function playSound(type) {
+ if (!audioCtx) return;
+ if (audioCtx.state === 'suspended') {
+ audioCtx.resume();
+ }
+
+ const osc = audioCtx.createOscillator();
+ const gain = audioCtx.createGain();
+
+ osc.type = 'square';
+ osc.frequency.value = type === 'hit' ? 1000 : 500;
+ gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+ gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.2);
+
+ osc.connect(gain);
+ gain.connect(audioCtx.destination);
+
+ osc.start();
+ osc.stop(audioCtx.currentTime + 0.2);
+}
+
+init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/172f180e3161/hf-qwen-coder-32b.png b/data/artifacts/172f180e3161/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..29dfa93
Binary files /dev/null and b/data/artifacts/172f180e3161/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/172f180e3161/qwen25-7b.html b/data/artifacts/172f180e3161/qwen25-7b.html
new file mode 100644
index 0000000..5f583e1
--- /dev/null
+++ b/data/artifacts/172f180e3161/qwen25-7b.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Two-Player Pong</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: black;
+ color: white;
+ font-family: monospace;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+ canvas {
+ background: #000;
+ display: block;
+ }
+ #gameOver, #restart {
+ position: absolute;
+ top: 40%;
+ text-align: center;
+ font-size: 3em;
+ width: 100%;
+ }
+ #restart {
+ top: 50%;
+ cursor: pointer;
+ }
+ </style>
+</head>
+<body>
+<canvas id="pongCanvas" width="800" height="400"></canvas>
+<div id="gameOver" style="display:none;">Game Over</div>
+<div id="restart" style="display:none;" onclick="init()">Press to Restart</div>
+<script>
+const canvas = document.getElementById('pongCanvas');
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width;
+const height = canvas.height;
+
+let leftPaddle = { x: 10, y: 150, width: 10, height: 100, dy: 0 };
+let rightPaddle = { x: width - 20, y: 150, width: 10, height: 100, dy: 0 };
+let ball = {
+ x: width / 2,
+ y: height / 2,
+ radius: 10,
+ dx: 4,
+ dy: 4,
+ speed: 4
+};
+let leftScore = 0;
+let rightScore = 0;
+let gameOver = false;
+
+const paddleSpeed = 6;
+const winScore = 11;
+
+function drawPaddle(paddle) {
+ ctx.fillStyle = 'white';
+ ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+}
+
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ctx.closePath();
+}
+
+function drawNet() {
+ ctx.strokeStyle = 'white';
+ ctx.lineWidth = 2;
+ for (let i = 0; i < height; i += 20) {
+ ctx.beginPath();
+ ctx.moveTo(width / 2, i);
+ ctx.lineTo(width / 2, i + 10);
+ ctx.stroke();
+ }
+}
+
+function drawScore() {
+ ctx.font = '32px monospace';
+ ctx.fillText(leftScore, width / 4, 50);
+ ctx.fillText(rightScore, 3 * width / 4, 50);
+}
+
+function movePaddles() {
+ leftPaddle.y += leftPaddle.dy;
+ rightPaddle.y += rightPaddle.dy;
+
+ if (leftPaddle.y < 0) leftPaddle.y = 0;
+ if (leftPaddle.y + leftPaddle.height > height) leftPaddle.y = height - leftPaddle.height;
+ if (rightPaddle.y < 0) rightPaddle.y = 0;
+ if (rightPaddle.y + rightPaddle.height > height) rightPaddle.y = height - rightPaddle.height;
+}
+
+function moveBall() {
+ ball.x += ball.dx;
+ ball.y += ball.dy;
+
+ if (ball.y - ball.radius < 0 || ball.y + ball.radius > height) {
+ ball.dy *= -1;
+ playSound('hit');
+ }
+
+ if (
+ ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
+ ball.y > leftPaddle.y &&
+ ball.y < leftPaddle.y + leftPaddle.height
+ ) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (leftPaddle.y + leftPaddle.height / 2)) / (leftPaddle.height / 2);
+ ball.dy = relativeY * 6;
+ ball.speed += 0.1;
+ playSound('hit');
+ }
+
+ if (
+ ball.x + ball.radius > rightPaddle.x &&
+ ball.y > rightPaddle.y &&
+ ball.y < rightPaddle.y + rightPaddle.height
+ ) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (rightPaddle.y + rightPaddle.height / 2)) / (rightPaddle.height / 2);
+ ball.dy = relativeY * 6;
+ ball.speed += 0.1;
+ playSound('hit');
+ }
+
+ if (ball.x - ball.radius < 0) {
+ rightScore++;
+ resetBall();
+ playSound('score');
+ }
+
+ if (ball.x + ball.radius > width) {
+ leftScore++;
+ resetBall();
+ playSound('score');
+ }
+}
+
+function resetBall() {
+ ball.x = width / 2;
+ ball.y = height / 2;
+ ball.dx = (Math.random() > 0.5 ? -1 : 1) * ball.speed;
+ ball.dy = (Math.random() - 0.5) * 8;
+}
+
+function draw() {
+ ctx.clearRect(0, 0, width, height);
+ drawNet();
+ drawPaddle(leftPaddle);
+ drawPaddle(rightPaddle);
+ drawBall();
+ drawScore();
+}
+
+function update() {
+ movePaddles();
+ moveBall();
+ draw();
+}
+
+function gameLoop() {
+ if (gameOver) return;
+ update();
+ requestAnimationFrame(gameLoop);
+}
+
+function checkWin() {
+ if (leftScore >= winScore || rightScore >= winScore) {
+ gameOver = true;
+ document.getElementById('gameOver').style.display = 'block';
+ document.getElementById('restart').style.display = 'block';
+ }
+}
+
+function init() {
+ leftScore = 0;
+ rightScore = 0;
+ gameOver = false;
+ resetBall();
+ document.getElementById('gameOver').style.display = 'none';
+ document.getElementById('restart').style.display = 'none';
+ gameLoop();
+}
+
+document.addEventListener('keydown', function(e) {
+ if (e.key === 'w') leftPaddle.dy = -paddleSpeed;
+ if (e.key === 's') leftPaddle.dy = paddleSpeed;
+ if (e.key === 'ArrowUp') rightPaddle.dy = -paddleSpeed;
+ if (e.key === 'ArrowDown') rightPaddle.dy = paddleSpeed;
+});
+
+document.addEventListener('keyup', function(e) {
+ if (e.key === 'w' || e.key === 's') leftPaddle.dy = 0;
+ if (e.key === 'ArrowUp' || e.key === 'ArrowDown') rightPaddle.dy = 0;
+});
+
+function playSound(type) {
+ const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+ const osc = audioCtx.createOscillator();
+ const gain = audioCtx.createGain();
+
+ osc.type = type === 'hit' ? 'square' : 'sine';
+ osc.frequency.value = type === 'hit' ? 1000 : 500;
+ gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+ gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.2);
+
+ osc.connect(gain);
+ gain.connect(audioCtx.destination);
+
+ osc.start();
+ osc.stop(audioCtx.currentTime + 0.2);
+}
+
+init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/172f180e3161/qwen25-7b.png b/data/artifacts/172f180e3161/qwen25-7b.png
new file mode 100644
index 0000000..ff754fe
Binary files /dev/null and b/data/artifacts/172f180e3161/qwen25-7b.png differ
diff --git a/data/artifacts/172f180e3161/qwen3-14b.html b/data/artifacts/172f180e3161/qwen3-14b.html
new file mode 100644
index 0000000..262557c
--- /dev/null
+++ b/data/artifacts/172f180e3161/qwen3-14b.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Two-Player Pong</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+ color: #fff;
+ font-family: 'Courier New', monospace;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ }
+ canvas {
+ background: #000;
+ display: block;
+ border: 2px solid #444;
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
+ }
+ #gameOver {
+ position: absolute;
+ top: 40%;
+ text-align: center;
+ font-size: 3em;
+ width: 100%;
+ opacity: 0.9;
+ pointer-events: none;
+ }
+ #restart {
+ position: absolute;
+ top: 55%;
+ text-align: center;
+ font-size: 1.5em;
+ width: 100%;
+ color: #00f;
+ cursor: pointer;
+ pointer-events: auto;
+ }
+ #scoreboard {
+ position: absolute;
+ top: 20px;
+ font-size: 2em;
+ color: #0ff;
+ text-shadow: 0 0 8px #0ff;
+ }
+ </style>
+</head>
+<body>
+<canvas id="pongCanvas" width="800" height="400"></canvas>
+<div id="scoreboard">0 - 0</div>
+<div id="gameOver" style="display:none;">Game Over</div>
+<div id="restart" style="display:none;" onclick="init()">Press to Restart</div>
+<script>
+const canvas = document.getElementById('pongCanvas');
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width;
+const height = canvas.height;
+
+let leftPaddle = { x: 10, y: 150, width: 10, height: 100, dy: 0 };
+let rightPaddle = { x: width - 20, y: 150, width: 10, height: 100, dy: 0 };
+let ball = {
+ x: width / 2,
+ y: height / 2,
+ radius: 10,
+ dx: 4,
+ dy: 4,
+ speed: 4
+};
+let leftScore = 0;
+let rightScore = 0;
+let gameOver = false;
+
+const paddleSpeed = 6;
+const winScore = 11;
+
+function drawPaddle(paddle) {
+ ctx.fillStyle = '#0ff';
+ ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+}
+
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+ ctx.fillStyle = '#0ff';
+ ctx.fill();
+ ctx.closePath();
+}
+
+function drawNet() {
+ ctx.strokeStyle = '#0ff';
+ ctx.lineWidth = 2;
+ for (let i = 0; i < height; i += 20) {
+ ctx.beginPath();
+ ctx.moveTo(width / 2, i);
+ ctx.lineTo(width / 2, i + 10);
+ ctx.stroke();
+ }
+}
+
+function drawScore() {
+ document.getElementById('scoreboard').textContent = `${leftScore} - ${rightScore}`;
+}
+
+function movePaddles() {
+ leftPaddle.y += leftPaddle.dy;
+ rightPaddle.y += rightPaddle.dy;
+
+ // Clamp paddles within canvas
+ if (leftPaddle.y < 0) leftPaddle.y = 0;
+ if (leftPaddle.y + leftPaddle.height > height) leftPaddle.y = height - leftPaddle.height;
+ if (rightPaddle.y < 0) rightPaddle.y = 0;
+ if (rightPaddle.y + rightPaddle.height > height) rightPaddle.y = height - rightPaddle.height;
+}
+
+function moveBall() {
+ ball.x += ball.dx;
+ ball.y += ball.dy;
+
+ // Bounce off top and bottom
+ if (ball.y - ball.radius < 0 || ball.y + ball.radius > height) {
+ ball.dy *= -1;
+ playSound('hit');
+ }
+
+ // Paddle collision
+ if (
+ ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
+ ball.y > leftPaddle.y &&
+ ball.y < leftPaddle.y + leftPaddle.height
+ ) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (leftPaddle.y + leftPaddle.height / 2)) / (leftPaddle.height / 2);
+ ball.dy = relativeY * 8;
+ ball.speed += 0.1;
+ playSound('hit');
+ }
+
+ if (
+ ball.x + ball.radius > rightPaddle.x &&
+ ball.y > rightPaddle.y &&
+ ball.y < rightPaddle.y + rightPaddle.height
+ ) {
+ ball.dx *= -1;
+ let relativeY = (ball.y - (rightPaddle.y + rightPaddle.height / 2)) / (rightPaddle.height / 2);
+ ball.dy = relativeY * 8;
+ ball.speed += 0.1;
+ playSound('hit');
+ }
+
+ // Score
+ if (ball.x - ball.radius < 0) {
+ rightScore++;
+ resetBall();
+ playSound('score');
+ }
+
+ if (ball.x + ball.radius > width) {
+ leftScore++;
+ resetBall();
+ playSound('score');
+ }
+}
+
+function resetBall() {
+ ball.x = width / 2;
+ ball.y = height / 2;
+ ball.dx = (Math.random() > 0.5 ? -1 : 1) * ball.speed;
+ ball.dy = (Math.random() - 0.5) * 8;
+}
+
+function draw() {
+ ctx.clearRect(0, 0, width, height);
+ drawNet();
+ drawPaddle(leftPaddle);
+ drawPaddle(rightPaddle);
+ drawBall();
+}
+
+function update() {
+ movePaddles();
+ moveBall();
+ draw();
+ drawScore();
+}
+
+function gameLoop() {
+ if (gameOver) return;
+ update();
+ requestAnimationFrame(gameLoop);
+}
+
+function checkWin() {
+ if (leftScore >= winScore || rightScore >= winScore) {
+ gameOver = true;
+ document.getElementById('gameOver').style.display = 'block';
+ document.getElementById('restart').style.display = 'block';
+ }
+}
+
+function init() {
+ leftScore = 0;
+ rightScore = 0;
+ gameOver = false;
+ resetBall();
+ document.getElementById('gameOver').style.display = 'none';
+ document.getElementById('restart').style.display = 'none';
+ gameLoop();
+}
+
+document.addEventListener('keydown', function(e) {
+ if (e.key === 'w') leftPaddle.dy = -paddleSpeed;
+ if (e.key === 's') leftPaddle.dy = paddleSpeed;
+ if (e.key === 'ArrowUp') rightPaddle.dy = -paddleSpeed;
+ if (e.key === 'ArrowDown') rightPaddle.dy = paddleSpeed;
+});
+
+document.addEventListener('keyup', function(e) {
+ if (e.key === 'w' || e.key === 's') leftPaddle.dy = 0;
+ if (e.key === 'ArrowUp' || e.key === 'ArrowDown') rightPaddle.dy = 0;
+});
+
+// Web Audio for sounds
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+function playSound(type) {
+ if (!audioCtx) return;
+ if (audioCtx.state === 'suspended') {
+ audioCtx.resume();
+ }
+
+ const osc = audioCtx.createOscillator();
+ const gain = audioCtx.createGain();
+
+ osc.type = 'square';
+ osc.frequency.value = type === 'hit' ? 1200 : 300;
+ gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+ gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.2);
+
+ osc.connect(gain);
+ gain.connect(audioCtx.destination);
+
+ osc.start();
+ osc.stop(audioCtx.currentTime + (type === 'hit' ? 0.2 : 0.5));
+}
+
+init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/172f180e3161/qwen3-14b.png b/data/artifacts/172f180e3161/qwen3-14b.png
new file mode 100644
index 0000000..551c025
Binary files /dev/null and b/data/artifacts/172f180e3161/qwen3-14b.png differ
diff --git a/data/artifacts/bde366feb227/gemma3-12b.html b/data/artifacts/bde366feb227/gemma3-12b.html
new file mode 100644
index 0000000..c85a8ca
--- /dev/null
+++ b/data/artifacts/bde366feb227/gemma3-12b.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Wallcovering Shoppable Post</title>
+ <style>
+ body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f8f9fa; }
+ .post-container { width: 100%; max-width: 600px; margin: 20px auto; background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+ .header { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #eee; }
+ .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-right: 10px; }
+ .user-info { display: flex; align-items: center; }
+ .username { font-weight: bold; }
+ .post-image { width: 100%; height: auto; }
+ .tags { position: absolute; top: 15px; right: 15px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 2; padding: 5px; background-color: rgba(255, 255, 255, 0.8); border-radius: 5px;}
+ .tag { border: 1px solid #ccc; border-radius: 5px; padding: 5px; text-align: center; cursor: pointer; width: max-content; }
+ .product-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #ccc; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: none; z-index: 3;}
+ .product-card img { width: 100px; height: auto; margin-bottom: 10px; }
+ .caption { padding: 15px; line-height: 1.6; color: #444; }
+ .footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; border-top: 1px solid #eee; }
+ .likes { font-size: 12px; color: #888; }
+ .comments { font-size: 12px; color: #888; }
+ </style>
+</head>
+<body>
+
+ <div class="post-container">
+ <div class="header">
+ <img src="https://via.placeholder.com/30x30" alt="Avatar" class="avatar">
+ <div class="user-info">
+ <span class="username">@wallcoveringco</span>
+ <span>·</span>
+ <span>2h ago</span>
+ </div>
+ </div>
+
+ <img src="https://via.placeholder.com/600x400/87CEEB/FFFFFF?text=Styled+Room" alt="Room Photo" class="post-image">
+
+ <div class="tags">
+ <span class="tag product1">Product 1</span>
+ <span class="tag product2">Product 2</span>
+ <span class="tag product3">Product 3</span>
+ </div>
+
+ <div class="caption">
+ Bringing texture and warmth to this cozy corner. ✨ Loving how these wallcoverings transform the space! #wallcovering #interiordesign #homedecor #wallpaper #designinspiration
+ </div>
+
+ <div class="footer">
+ <span class="likes">❤️ 1,234 Likes</span>
+ <span class="comments">💬 78 Comments</span>
+ </div>
+
+ <div class="product-card" id="productCard">
+ <img src="" alt="Product Swatch" id="productSwatch">
+ <h3 id="productName"></h3>
+ <p id="productPrice"></p>
+ <button id="viewButton">View</button>
+ </div>
+
+ </div>
+
+ <script>
+ const tags = document.querySelectorAll('.tag');
+ const productCard = document.getElementById('productCard');
+ const productNameElement = document.getElementById('productName');
+ const productPriceElement = document.getElementById('productPrice');
+ const productSwatchElement = document.getElementById('productSwatch');
+ const viewButton = document.getElementById('viewButton');
+
+ tags.forEach(tag => {
+ tag.addEventListener('click', (event) => {
+ let productId = tag.classList[1];
+
+ let productName, patternUrl, price;
+ switch (productId) {
+ case 'product1':
+ productName = "Linen Texture";
+ patternUrl = "https://via.placeholder.com/100x100/D3D3D3/000000?text=Swatch+1";
+ price = "$65 / roll";
+ break;
+ case 'product2':
+ productName = "Geometric Print";
+ patternUrl = "https://via.placeholder.com/100x100/F0FFFF/000000?text=Swatch+2";
+ price = "$75 / roll";
+ break;
+ case 'product3':
+ productName = "Floral Bloom";
+ patternUrl = "https://via.placeholder.com/100x100/FA8072/000000?text=Swatch+3";
+ price = "$85 / roll";
+ break;
+ default:
+ productName = "Unknown Product";
+ patternUrl = "https://via.placeholder.com/100x100/CCCCCC/000000?text=Swatch";
+ price = "$0";
+ }
+
+ productNameElement.textContent = productName;
+ productPriceElement.textContent = price;
+ productSwatchElement.src = patternUrl;
+
+ productCard.style.display = 'block';
+ });
+ });
+
+ viewButton.addEventListener('click', () => {
+ // In a real implementation, this would redirect to the product page.
+ alert("View Product (Placeholder)");
+ productCard.style.display = 'none'; // Hide card after "View"
+ })
+
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/bde366feb227/gemma3-12b.png b/data/artifacts/bde366feb227/gemma3-12b.png
new file mode 100644
index 0000000..f252ef4
Binary files /dev/null and b/data/artifacts/bde366feb227/gemma3-12b.png differ
diff --git a/data/artifacts/bde366feb227/hermes3-8b.html b/data/artifacts/bde366feb227/hermes3-8b.html
new file mode 100644
index 0000000..b31b044
--- /dev/null
+++ b/data/artifacts/bde366feb227/hermes3-8b.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Instagram Shoppable Post</title>
+ <style>
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f0f0f0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+
+ .post-container {
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ width: 90%;
+ max-width: 500px;
+ }
+
+ .post-header {
+ background-color: #f7d9c7;
+ padding: 15px;
+ display: flex;
+
+ }
+
+ .profile-pic {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 15px;
+ }
+
+ .header-info {
+ flex-grow: 1;
+ }
+
+ h2 {
+ font-size: 18px;
+ margin-bottom: 5px;
+ }
+
+ p {
+ font-size: 14px;
+ color: #999;
+ }
+
+ .post-content {
+ padding: 15px;
+ }
+
+ .product-tag {
+ display: inline-block;
+ background-color: #d7e2fb;
+ border-radius: 10px;
+ padding: 5px 10px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ }
+
+ .product-card {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: white;
+ border-radius: 5px;
+ padding: 20px;
+ display: none;
+ }
+
+ .close-modal {
+ font-weight: bold;
+ cursor: pointer;
+ }
+
+ .modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .modal-title {
+ font-size: 18px;
+ }
+
+ .product-img {
+ width: 80px;
+ height: auto;
+ margin-bottom: 10px;
+ }
+
+ .modal-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 20px;
+ }
+
+ .price {
+ font-weight: bold;
+ color: #333;
+ }
+
+ .view-product {
+ background-color: #0075ff;
+ padding: 8px 15px;
+ border-radius: 5px;
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+ }
+ </style>
+</head>
+<body>
+ <div class="post-container">
+ <div class="post-header">
+ <img src="https://via.placeholder.com/150" alt="Profile picture" class="profile-pic">
+ <div class="header-info">
+ <h2>Wallcovering Brand</h2>
+ <p>@wallcoverbrand</p>
+ </div>
+ </div>
+ <div class="post-content">
+ <img src="https://i.imgur.com/WallPhoto.jpg" alt="Styled room photo with wall coverings" style="width: 100%; max-width: 500px; height: auto;">
+
+ <!-- Product tags -->
+ <span class="product-tag" data-product-id="1">Elegant Geometric</span>
+ <span class="product-tag" data-product-id="2">Vintage Floral</span>
+ <span class="product-tag" data-product-id="3">Modern Stripes</span>
+
+ </div>
+ </div>
+
+ <!-- Product card modal -->
+ <div id="productModal" class="product-card">
+ <div class="modal-header">
+ <h2 id="modalTitle" class="modal-title"></h2>
+ <span id="closeModal" class="close-modal">X</span>
+ </div>
+ <img src="https://i.imgur.com/Pattern1.jpg" alt="Product image" class="product-img">
+ <p id="productName" class="product-name"></p>
+ <img src="https://i.imgur.com/Pattern2.jpg" alt="Product swatch" class="product-swatch">
+ <p id="productPrice" class="price">$99</p>
+ <button id="viewButton" class="view-product">View Product</button>
+ </div>
+
+ <script>
+ const productTags = document.querySelectorAll('.product-tag');
+ const modal = document.getElementById('productModal');
+ const closeModal = document.getElementById('closeModal');
+ const modalTitle = document.getElementById('modalTitle');
+ const productNameElement = document.getElementById('productName');
+ const productPriceElement = document.getElementById('productPrice');
+ const viewButton = document.getElementById('viewButton');
+
+ for (let tag of productTags) {
+ tag.addEventListener('click', () => {
+ showModal(tag.dataset.productId);
+ });
+ }
+
+ function showModal(productId) {
+ modal.style.display = 'block';
+ fetch(`/api/products/${productId}`)
+ .then(response => response.json())
+ .then(product => {
+ modalTitle.innerHTML = product.name;
+ productNameElement.innerHTML = `<strong>${product.name}</strong>`;
+ productPriceElement.innerHTML = `$${product.price}`;
+ const patternUrl = `/images/${product.image_url}`;
+ document.querySelector('.product-img').src = patternUrl;
+ });
+ }
+
+ closeModal.addEventListener('click', () => {
+ modal.style.display = 'none';
+ });
+
+ viewButton.addEventListener('click', () => {
+ // Code to handle "View Product" click
+ alert('View product clicked!');
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/bde366feb227/hermes3-8b.png b/data/artifacts/bde366feb227/hermes3-8b.png
new file mode 100644
index 0000000..462c3f4
Binary files /dev/null and b/data/artifacts/bde366feb227/hermes3-8b.png differ
diff --git a/data/artifacts/bde366feb227/hf-qwen-coder-32b.html b/data/artifacts/bde366feb227/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..781cb14
--- /dev/null
+++ b/data/artifacts/bde366feb227/hf-qwen-coder-32b.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Instagram Shoppable Post Mockup</title>
+ <style>
+ body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f8f8f8;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ .post {
+ width: 375px;
+ background-color: #fff;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+ .header {
+ padding: 12px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #e9e9e9;
+ }
+ .avatar {
+ width: 32px;
+ height: 32px;
+ background-color: #ccc;
+ border-radius: 50%;
+ margin-right: 8px;
+ }
+ .profile-name {
+ font-weight: bold;
+ }
+ .room-photo {
+ position: relative;
+ width: 100%;
+ height: 600px;
+ background-color: #f0e68c; /* Light khaki */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ }
+ .tag {
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.7);
+ border-radius: 4px;
+ padding: 8px;
+ cursor: pointer;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+ }
+ .tag1 { top: 25%; left: 30%; }
+ .tag2 { top: 45%; right: 25%; }
+ .tag3 { bottom: 25%; left: 15%; }
+ .caption {
+ padding: 16px;
+ border-top: 1px solid #e9e9e9;
+ }
+ .comments {
+ padding: 0 16px 12px;
+ color: #8e8e8e;
+ font-size: 12px;
+ }
+ .footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px;
+ border-top: 1px solid #e9e9e9;
+ }
+ .icons {
+ color: #8e8e8e;
+ font-size: 24px;
+ }
+ .likes-comments {
+ font-size: 14px;
+ color: #333;
+ }
+ .product-card {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff;
+ border-radius: 8px;
+ padding: 16px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ z-index: 10;
+ display: none;
+ }
+ .product-card.active {
+ display: block;
+ }
+ .swatch {
+ width: 50px;
+ height: 50px;
+ border-radius: 4px;
+ margin-bottom: 8px;
+ }
+ .close-btn {
+ position: absolute;
+ top: 12px;
+ right: 16px;
+ cursor: pointer;
+ font-size: 16px;
+ color: #333;
+ }
+ </style>
+</head>
+<body>
+ <div class="post">
+ <div class="header">
+ <div class="avatar"></div>
+ <div class="profile-name">WallCoveringsInc</div>
+ </div>
+ <div class="room-photo" id="roomPhoto">
+ <div class="tag tag1" onclick="showProductCard('productCard1')">+</div>
+ <div class="tag tag2" onclick="showProductCard('productCard2')">+</div>
+ <div class="tag tag3" onclick="showProductCard('productCard3')">+</div>
+ </div>
+ <div class="caption">
+ Transform your space with our premium wallcoverings! 🌟 #HomeDecor #WallCoverings
+ </div>
+ <div class="comments">
+ 12 comments • 2 hours ago
+ </div>
+ <div class="footer">
+ <span class="icons">❤️💬</span>
+ <span class="likes-comments">1,500 likes 12 comments</span>
+ </div>
+ </div>
+
+ <!-- Product Cards -->
+ <div id="productCard1" class="product-card">
+ <span class="close-btn" onclick="hideProductCards()">×</span>
+ <h3>Geometric Floral</h3>
+ <div class="swatch" style="background-color: #f4f4f4;"></div>
+ <p>$79.99</p>
+ <button>View</button>
+ </div>
+ <div id="productCard2" class="product-card">
+ <span class="close-btn" onclick="hideProductCards()">×</span>
+ <h3>Abstract Stripe</h3>
+ <div class="swatch" style="background-color: #e0e0e0;"></div>
+ <p>$89.99</p>
+ <button>View</button>
+ </div>
+ <div id="productCard3" class="product-card">
+ <span class="close-btn" onclick="hideProductCards()">×</span>
+ <h3>Nature Prints</h3>
+ <div class="swatch" style="background-color: #dcdcdc;"></div>
+ <p>$99.99</p>
+ <button>View</button>
+ </div>
+
+ <script>
+ function showProductCard(cardId) {
+ hideProductCards();
+ document.getElementById(cardId).classList.add('active');
+ }
+
+ function hideProductCards() {
+ const cards = document.querySelectorAll('.product-card');
+ cards.forEach(card => card.classList.remove('active'));
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/bde366feb227/hf-qwen-coder-32b.png b/data/artifacts/bde366feb227/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..58e3559
Binary files /dev/null and b/data/artifacts/bde366feb227/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/eda6b5e29387/qwen25-7b.html b/data/artifacts/eda6b5e29387/qwen25-7b.html
new file mode 100644
index 0000000..0fb6bcd
--- /dev/null
+++ b/data/artifacts/eda6b5e29387/qwen25-7b.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Fluid Simulation</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+ font-family: sans-serif;
+ }
+ canvas {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: rgba(0,0,0,0.5);
+ padding: 10px;
+ border-radius: 5px;
+ }
+ #colorPicker {
+ margin: 5px 0;
+ }
+ #clearButton {
+ margin-top: 5px;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <label for="colorPicker">Color:</label>
+ <input type="color" id="colorPicker" value="#00ffcc">
+ <button id="clearButton">Clear</button>
+ </div>
+ <canvas id="canvas"></canvas>
+ <script>
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const colorPicker = document.getElementById('colorPicker');
+ const clearButton = document.getElementById('clearButton');
+
+ let width = canvas.width = window.innerWidth;
+ let height = canvas.height = window.innerHeight;
+
+ window.addEventListener('resize', () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ });
+
+ const SIZE = 32;
+ const NUM_CELLS_X = Math.floor(width / SIZE);
+ const NUM_CELLS_Y = Math.floor(height / SIZE);
+
+ const DENSITY = 1;
+ const MAX_DENSITY = 50;
+ const DIFFUSION = 0.17;
+ const ADVECTION = 0.28;
+ const DAMPING = 0.9;
+
+ const density = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityX = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityY = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const densityPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityXPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityYPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+
+ const mouse = { x: -1, y: -1, down: false };
+ const color = [255, 238, 64];
+
+ function getIndex(x, y) {
+ return y * NUM_CELLS_X + x;
+ }
+
+ function addDensity(x, y, val) {
+ const i = getIndex(x, y);
+ density[i] = Math.min(MAX_DENSITY, density[i] + val);
+ }
+
+ function addVelocity(x, y, vx, vy) {
+ const i = getIndex(x, y);
+ velocityX[i] += vx;
+ velocityY[i] += vy;
+ }
+
+ function advect(field, fieldPrev, vx, vy, dt) {
+ for (let y = 0; y < NUM_CELLS_Y; y++) {
+ for (let x = 0; x < NUM_CELLS_X; x++) {
+ const i = getIndex(x, y);
+ const u = (x - dt * vx[i]) % NUM_CELLS_X;
+ const v = (y - dt * vy[i]) % NUM_CELLS_Y;
+ const uClamped = Math.max(0, Math.min(NUM_CELLS_X - 1, u));
+ const vClamped = Math.max(0, Math.min(NUM_CELLS_Y - 1, v));
+ field[i] = fieldPrev[getIndex(Math.floor(uClamped), Math.floor(vClamped))];
+ }
+ }
+ }
+
+ function diffuse(field, fieldPrev, dt, diff) {
+ for (let y = 0; y < NUM_CELLS_Y; y++) {
+ for (let x = 0; x < NUM_CELLS_X; x++) {
+ fieldPrev[getIndex(x, y)] = field[getIndex(x, y)];
+ }
+ }
+ for (let iter = 0; iter < 25; iter++) {
+ for (let y = 1; y < NUM_CELLS_Y - 1; y++) {
+ for (let x = 1; x < NUM_CELLS_X - 1; x++) {
+ const i = getIndex(x, y);
+ field[i] = (fieldPrev[i] + diff * (fieldPrev[getIndex(x + 1, y)] + fieldPrev[getIndex(x - 1, y)] + fieldPrev[getIndex(x, y + 1)] + fieldPrev[getIndex(x, y - 1)])) / (1 + 4 * diff);
+ }
+ }
+ }
+ }
+
+ function step() {
+ // Advect density
+ advect(density, densityPrev, velocityX, velocityY, ADVECTION);
+ // Advect velocity
+ advect(velocityX, velocityXPrev, velocityX, velocityY, ADVECTION);
+ advect(velocityY, velocityYPrev, velocityX, velocityY, ADVECTION);
+
+ // Diffuse density
+ diffuse(density, densityPrev, DIFFUSION, DIFFUSION);
+ diffuse(velocityX, velocityXPrev, DIFFUSION, DIFFUSION);
+ diffuse(velocityY, velocityYPrev, DIFFUSION, DIFFUSION);
+
+ // Damp velocity
+ for (let i = 0; i < density.length; i++) {
+ velocityX[i] *= DAMPING;
+ velocityY[i] *= DAMPING;
+ }
+
+ // Copy to previous for next step
+ for (let i = 0; i < density.length; i++) {
+ densityPrev[i] = density[i];
+ velocityXPrev[i] = velocityX[i];
+ velocityYPrev[i] = velocityY[i];
+ }
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, width, height);
+ for (let y = 0; y < NUM_CELLS_Y; y++) {
+ for (let x = 0; x < NUM_CELLS_X; x++) {
+ const i = getIndex(x, y);
+ const d = density[i];
+ if (d > 0) {
+ const value = Math.min(1, d / MAX_DENSITY);
+ const r = Math.floor(color[0] * value);
+ const g = Math.floor(color[1] * value);
+ const b = Math.floor(color[2] * value);
+ ctx.fillStyle = `rgb(${r},${g},${b})`;
+ ctx.fillRect(x * SIZE, y * SIZE, SIZE, SIZE);
+ }
+ }
+ }
+ }
+
+ function animate() {
+ step();
+ draw();
+ requestAnimationFrame(animate);
+ }
+
+ canvas.addEventListener('mousedown', (e) => {
+ mouse.x = e.offsetX;
+ mouse.y = e.offsetY;
+ mouse.down = true;
+ });
+
+ canvas.addEventListener('mousemove', (e) => {
+ if (mouse.down) {
+ mouse.x = e.offsetX;
+ mouse.y = e.offsetY;
+ const x = Math.floor(mouse.x / SIZE);
+ const y = Math.floor(mouse.y / SIZE);
+ addDensity(x, y, 15);
+ addVelocity(x, y, -0.2, 0.3);
+ }
+ });
+
+ canvas.addEventListener('mouseup', () => {
+ mouse.down = false;
+ });
+
+ clearButton.addEventListener('click', () => {
+ for (let i = 0; i < density.length; i++) {
+ density[i] = 0;
+ velocityX[i] = 0;
+ velocityY[i] = 0;
+ }
+ });
+
+ colorPicker.addEventListener('input', (e) => {
+ const c = e.target.value;
+ color[0] = parseInt(c.slice(1, 3), 16);
+ color[1] = parseInt(c.slice(3, 5), 16);
+ color[2] = parseInt(c.slice(5, 7), 16);
+ });
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/eda6b5e29387/qwen25-7b.png b/data/artifacts/eda6b5e29387/qwen25-7b.png
new file mode 100644
index 0000000..5c6c5e7
Binary files /dev/null and b/data/artifacts/eda6b5e29387/qwen25-7b.png differ
diff --git a/data/artifacts/eda6b5e29387/qwen3-14b.html b/data/artifacts/eda6b5e29387/qwen3-14b.html
new file mode 100644
index 0000000..12a0f84
--- /dev/null
+++ b/data/artifacts/eda6b5e29387/qwen3-14b.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Enhanced Fluid Simulation</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+ canvas {
+ display: block;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: rgba(0, 0, 0, 0.6);
+ padding: 12px;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(4px);
+ }
+ #colorPicker {
+ margin: 5px 0;
+ padding: 6px 8px;
+ border-radius: 5px;
+ border: 1px solid #555;
+ background: #222;
+ color: #fff;
+ }
+ #clearButton {
+ margin-top: 8px;
+ padding: 6px 12px;
+ border: none;
+ border-radius: 5px;
+ background: #444;
+ color: #fff;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ }
+ #clearButton:hover {
+ background: #666;
+ }
+ #info {
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #aaa;
+ font-size: 14px;
+ text-align: center;
+ }
+ </style>
+</head>
+<body>
+ <div id="controls">
+ <label for="colorPicker">Color:</label>
+ <input type="color" id="colorPicker" value="#00ffcc">
+ <button id="clearButton">Clear</button>
+ </div>
+ <div id="info">Drag mouse to inject ink</div>
+ <canvas id="canvas"></canvas>
+ <script>
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const colorPicker = document.getElementById('colorPicker');
+ const clearButton = document.getElementById('clearButton');
+
+ let width = canvas.width = window.innerWidth;
+ let height = canvas.height = window.innerHeight;
+
+ window.addEventListener('resize', () => {
+ width = canvas.width = window.innerWidth;
+ height = canvas.height = window.innerHeight;
+ });
+
+ const CELL_SIZE = 8;
+ const NUM_CELLS_X = Math.floor(width / CELL_SIZE);
+ const NUM_CELLS_Y = Math.floor(height / CELL_SIZE);
+
+ const DENSITY = 1;
+ const MAX_DENSITY = 200;
+ const DIFFUSION = 0.18;
+ const ADVECTION = 0.18;
+ const DAMPING = 0.85;
+
+ const density = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityX = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityY = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const densityPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityXPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+ const velocityYPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);
+
+ const mouse = { x: -1, y: -1, down: false };
+ const color = [0, 255, 204];
+
+ function getIndex(x, y) {
+ return y * NUM_CELLS_X + x;
+ }
+
+ function addDensity(x, y, val) {
+ const i = getIndex(x, y);
+ density[i] = Math.min(MAX_DENSITY, density[i] + val);
+ }
+
+ function addVelocity(x, y, vx, vy) {
+ const i = getIndex(x, y);
+ velocityX[i] += vx;
+ velocityY[i] += vy;
+ }
+
+ function advect(field, fieldPrev, vx, vy, dt) {
+ for (let y = 0; y < NUM_CELLS_Y; y++) {
+ for (let x = 0; x < NUM_CELLS_X; x++) {
+ const i = getIndex(x, y);
+ const u = x - dt * vx[i];
+ const v = y - dt * vy[i];
+ const uClamped = Math.max(0, Math.min(NUM_CELLS_X - 1, u));
+ const vClamped = Math.max(0, Math.min(NUM_CELLS_Y - 1, v));
+ field[i] = fieldPrev[getIndex(Math.floor(uClamped), Math.floor(vClamped))];
+ }
+ }
+ }
+
+ function diffuse(field, fieldPrev, dt, diff) {
+ for (let y = 0; y < NUM_CELLS_Y; y++) {
+ for (let x = 0; x < NUM_CELLS_X; x++) {
+ fieldPrev[getIndex(x, y)] = field[getIndex(x, y)];
+ }
+ }
+ for (let iter = 0; iter < 20; iter++) {
+ for (let y = 1; y < NUM_CELLS_Y - 1; y++) {
+ for (let x = 1; x < NUM_CELLS_X - 1; x++) {
+ const i = getIndex(x, y);
+ field[i] = (fieldPrev[i] + diff * (fieldPrev[getIndex(x + 1, y)] + fieldPrev[getIndex(x - 1, y)] + fieldPrev[getIndex(x, y + 1)] + fieldPrev[getIndex(x, y - 1)])) / (1 + 4 * diff);
+ }
+ }
+ }
+ }
+
+ function step() {
+ // Advect density
+ advect(density, densityPrev, velocityX, velocityY, ADVECTION);
+ // Advect velocity
+ advect(velocityX, velocityXPrev, velocityX, velocityY, ADVECTION);
+ advect(velocityY, velocityYPrev, velocityX, velocityY, ADVECTION);
+
+ // Diffuse density
+ diffuse(density, densityPrev, DIFFUSION, DIFFUSION);
+ diffuse(velocityX, velocityXPrev, DIFFUSION, DIFFUSION);
+ diffuse(velocityY, velocityYPrev, DIFFUSION, DIFFUSION);
+
+ // Damp velocity
+ for (let i = 0; i < density.length; i++) {
+ velocityX[i] *= DAMPING;
+ velocityY[i] *= DAMPING;
+ }
+
+ // Copy to previous for next step
+ for (let i = 0; i < density.length; i++) {
+ densityPrev[i] = density[i];
+ velocityXPrev[i] = velocityX[i];
+ velocityYPrev[i] = velocityY[i];
+ }
+ }
+
+ function draw() {
+ ctx.clearRect(0, 0, width, height);
+ for (let y = 0; y < NUM_CELLS_Y; y++) {
+ for (let x = 0; x < NUM_CELLS_X; x++) {
+ const i = getIndex(x, y);
+ const d = density[i];
+ if (d > 0) {
+ const value = Math.min(1, d / MAX_DENSITY);
+ const r = Math.floor(color[0] * value);
+ const g = Math.floor(color[1] * value);
+ const b = Math.floor(color[2] * value);
+ ctx.fillStyle = `rgb(${r},${g},${b})`;
+ ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
+ }
+ }
+ }
+ }
+
+ function animate() {
+ step();
+ draw();
+ requestAnimationFrame(animate);
+ }
+
+ canvas.addEventListener('mousedown', (e) => {
+ mouse.x = e.offsetX;
+ mouse.y = e.offsetY;
+ mouse.down = true;
+ });
+
+ canvas.addEventListener('mousemove', (e) => {
+ if (mouse.down) {
+ mouse.x = e.offsetX;
+ mouse.y = e.offsetY;
+ const x = Math.floor(mouse.x / CELL_SIZE);
+ const y = Math.floor(mouse.y / CELL_SIZE);
+ addDensity(x, y, 20);
+ addVelocity(x, y, 0.1, 0.1);
+ }
+ });
+
+ canvas.addEventListener('mouseup', () => {
+ mouse.down = false;
+ });
+
+ clearButton.addEventListener('click', () => {
+ for (let i = 0; i < density.length; i++) {
+ density[i] = 0;
+ velocityX[i] = 0;
+ velocityY[i] = 0;
+ }
+ });
+
+ colorPicker.addEventListener('input', (e) => {
+ const c = e.target.value;
+ color[0] = parseInt(c.slice(1, 3), 16);
+ color[1] = parseInt(c.slice(3, 5), 16);
+ color[2] = parseInt(c.slice(5, 7), 16);
+ });
+
+ animate();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/eda6b5e29387/qwen3-14b.png b/data/artifacts/eda6b5e29387/qwen3-14b.png
new file mode 100644
index 0000000..1ede2c6
Binary files /dev/null and b/data/artifacts/eda6b5e29387/qwen3-14b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index 07e4cd7..194725a 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -13881,7 +13881,14 @@
"finished_at": "2026-07-25T07:28:26.734Z",
"queued_at": "2026-07-25T07:27:10.215Z",
"bytes": 46126,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8,
+ "aiReason": "The HTML file fulfills the challenge requirements and has an engaging visual theme.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7
+ },
+ "aiSpread": 2
},
{
"model": "grok",
@@ -14031,7 +14038,14 @@
"finished_at": "2026-07-25T07:32:30.484Z",
"queued_at": "2026-07-25T07:27:10.313Z",
"bytes": 14065,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8,
+ "aiReason": "The game is fully functional and visually appealing with a refined muted palette and smooth animation.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7
+ },
+ "aiSpread": 2
},
{
"model": "gpt",
@@ -14174,7 +14188,14 @@
"finished_at": "2026-07-25T07:30:42.261Z",
"queued_at": "2026-07-25T07:27:10.408Z",
"bytes": 15573,
- "thumb": true
+ "thumb": true,
+ "aiScore": 9.3,
+ "aiReason": "The dashboard is visually appealing and fulfills the challenge requirements effectively.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 9.5
+ },
+ "aiSpread": 0.5
},
{
"model": "kimi",
@@ -14351,7 +14372,14 @@
"finished_at": "2026-07-25T07:31:16.270Z",
"queued_at": "2026-07-25T07:27:37.009Z",
"bytes": 21347,
- "thumb": true
+ "thumb": true,
+ "aiScore": 9,
+ "aiReason": "The simulator is interactive and fulfills all requirements with high visual quality.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 9
+ },
+ "aiSpread": 0
},
{
"model": "grok",
@@ -14388,7 +14416,14 @@
"finished_at": "2026-07-25T07:40:07.947Z",
"queued_at": "2026-07-25T07:39:01.053Z",
"bytes": 7304,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.3,
+ "aiReason": "The carousel is present but lacks the damask swatch and pattern feature slides.",
+ "aiScores": {
+ "qwen2.5vl:7b": 6,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "gemma3-12b",
@@ -14508,7 +14543,14 @@
"finished_at": "2026-07-25T07:43:30.739Z",
"queued_at": "2026-07-25T07:39:01.151Z",
"bytes": 6764,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The tool meets the challenge criteria but lacks some visual polish and animation.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 9.5
+ },
+ "aiSpread": 2.5
},
{
"model": "gemma3-12b",
@@ -14628,7 +14670,14 @@
"finished_at": "2026-07-25T07:46:02.946Z",
"queued_at": "2026-07-25T07:39:01.227Z",
"bytes": 5563,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7,
+ "aiReason": "The puzzle is visually appealing and fulfills the challenge requirements well.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7
+ },
+ "aiSpread": 0
},
{
"model": "gemma3-12b",
@@ -14753,23 +14802,27 @@
},
{
"model": "gemma3-12b",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 52,
+ "cost": 0,
"started_at": "2026-07-25T07:49:03.953Z",
- "finished_at": null,
- "queued_at": "2026-07-25T07:39:01.306Z"
+ "finished_at": "2026-07-25T07:49:55.670Z",
+ "queued_at": "2026-07-25T07:39:01.306Z",
+ "bytes": 5453,
+ "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-25T07:39:01.308Z"
+ "seconds": 44,
+ "cost": 0,
+ "started_at": "2026-07-25T07:49:55.686Z",
+ "finished_at": "2026-07-25T07:50:39.802Z",
+ "queued_at": "2026-07-25T07:39:01.308Z",
+ "bytes": 5966,
+ "thumb": true
},
{
"model": "qwen25-7b",
@@ -14785,13 +14838,15 @@
},
{
"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-25T07:39:01.313Z"
+ "seconds": 113,
+ "cost": 0,
+ "started_at": "2026-07-25T07:50:39.811Z",
+ "finished_at": "2026-07-25T07:52:33.203Z",
+ "queued_at": "2026-07-25T07:39:01.313Z",
+ "bytes": 5312,
+ "thumb": true
},
{
"model": "claude-code",
@@ -14841,7 +14896,8 @@
"bytes": 20418,
"thumb": true
}
- ]
+ ],
+ "judging": true
},
{
"id": "172f180e3161",
@@ -14855,43 +14911,184 @@
"runs": [
{
"model": "qwen3-14b",
+ "status": "done",
+ "error": null,
+ "seconds": 47,
+ "cost": 0,
+ "started_at": "2026-07-25T07:54:07.615Z",
+ "finished_at": "2026-07-25T07:54:54.181Z",
+ "queued_at": "2026-07-25T07:49:29.664Z",
+ "bytes": 6056,
+ "thumb": true
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "done",
+ "error": null,
+ "seconds": 74,
+ "cost": 0,
+ "started_at": "2026-07-25T07:54:54.189Z",
+ "finished_at": "2026-07-25T07:56:08.167Z",
+ "queued_at": "2026-07-25T07:49:29.673Z",
+ "bytes": 6894,
+ "thumb": true
+ },
+ {
+ "model": "hermes3-8b",
+ "status": "done",
+ "error": null,
+ "seconds": 51,
+ "cost": 0,
+ "started_at": "2026-07-25T07:56:08.176Z",
+ "finished_at": "2026-07-25T07:56:58.834Z",
+ "queued_at": "2026-07-25T07:49:29.678Z",
+ "bytes": 5260,
+ "thumb": true
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 48,
+ "cost": 0,
+ "started_at": "2026-07-25T07:49:29.690Z",
+ "finished_at": "2026-07-25T07:50:17.251Z",
+ "queued_at": "2026-07-25T07:49:29.684Z",
+ "bytes": 5401,
+ "thumb": true
+ },
+ {
+ "model": "hf-qwen-coder-32b",
+ "status": "done",
+ "error": null,
+ "seconds": 149,
+ "cost": 0,
+ "started_at": "2026-07-25T07:56:58.841Z",
+ "finished_at": "2026-07-25T07:59:28.106Z",
+ "queued_at": "2026-07-25T07:49:29.687Z",
+ "bytes": 5636,
+ "thumb": true
+ }
+ ],
+ "judging": true,
+ "judged_at": null
+ },
+ {
+ "id": "eda6b5e29387",
+ "title": "Remix: All-Models — Fluid Ink Sim",
+ "prompt": "Build a single-file HTML page: an interactive fluid/ink simulation. Dragging the mouse injects swirling colored ink that diffuses and advects across a dark canvas; a clear button and a color picker. Grid-based fluid solver, self-contained, no external libraries.\n\nHere is a strong previous attempt at this exact challenge. IMPROVE on it — keep what works, fix its weaknesses, and elevate the visual quality and polish. Return a complete, improved single-file HTML document.\n\n=== PREVIOUS ATTEMPT (Qwen3 14B) ===\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <title>Fluid Simulation</title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #000;\n font-family: sans-serif;\n }\n canvas {\n display: block;\n }\n #controls {\n position: absolute;\n top: 10px;\n left: 10px;\n background: rgba(0,0,0,0.5);\n padding: 10px;\n border-radius: 5px;\n }\n #colorPicker {\n margin: 5px 0;\n }\n #clearButton {\n margin-top: 5px;\n }\n </style>\n</head>\n<body>\n <div id=\"controls\">\n <label for=\"colorPicker\">Color:</label>\n <input type=\"color\" id=\"colorPicker\" value=\"#00ffcc\">\n <button id=\"clearButton\">Clear</button>\n </div>\n <canvas id=\"canvas\"></canvas>\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n const colorPicker = document.getElementById('colorPicker');\n const clearButton = document.getElementById('clearButton');\n\n let width = canvas.width = window.innerWidth;\n let height = canvas.height = window.innerHeight;\n\n window.addEventListener('resize', () => {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n });\n\n const SIZE = 64;\n const NUM_CELLS_X = Math.floor(width / SIZE);\n const NUM_CELLS_Y = Math.floor(height / SIZE);\n\n const DENSITY = 1;\n const MAX_DENSITY = 100;\n const DIFFUSION = 0.19;\n const ADVECTION = 0.19;\n const DAMPING = 0.8;\n\n const density = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityX = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityY = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const densityPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityXPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityYPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n\n const mouse = { x: -1, y: -1, down: false };\n const color = [0, 255, 204];\n\n function getIndex(x, y) {\n return y * NUM_CELLS_X + x;\n }\n\n function addDensity(x, y, val) {\n const i = getIndex(x, y);\n density[i] = Math.min(MAX_DENSITY, density[i] + val);\n }\n\n function addVelocity(x, y, vx, vy) {\n const i = getIndex(x, y);\n velocityX[i] += vx;\n velocityY[i] += vy;\n }\n\n function advect(field, fieldPrev, vx, vy, dt) {\n for (let y = 0; y < NUM_CELLS_Y; y++) {\n for (let x = 0; x < NUM_CELLS_X; x++) {\n const i = getIndex(x, y);\n const u = (x - dt * vx[i]) % NUM_CELLS_X;\n const v = (y - dt * vy[i]) % NUM_CELLS_Y;\n const uClamped = Math.max(0, Math.min(NUM_CELLS_X - 1, u));\n const vClamped = Math.max(0, Math.min(NUM_CELLS_Y - 1, v));\n field[i] = fieldPrev[getIndex(Math.floor(uClamped), Math.floor(vClamped))];\n }\n }\n }\n\n function diffuse(field, fieldPrev, dt, diff) {\n for (let y = 0; y < NUM_CELLS_Y; y++) {\n for (let x = 0; x < NUM_CELLS_X; x++) {\n fieldPrev[getIndex(x, y)] = field[getIndex(x, y)];\n }\n }\n for (let iter = 0; iter < 20; iter++) {\n for (let y = 1; y < NUM_CELLS_Y - 1; y++) {\n for (let x = 1; x < NUM_CELLS_X - 1; x++) {\n const i = getIndex(x, y);\n field[i] = (fieldPrev[i] + diff * (fieldPrev[getIndex(x + 1, y)] + fieldPrev[getIndex(x - 1, y)] + fieldPrev[getIndex(x, y + 1)] + fieldPrev[getIndex(x, y - 1)])) / (1 + 4 * diff);\n }\n }\n }\n }\n\n function step() {\n // Advect density\n advect(density, densityPrev, velocityX, velocityY, ADVECTION);\n // Advect velocity\n advect(velocityX, velocityXPrev, velocityX, velocityY, ADVECTION);\n advect(velocityY, velocityYPrev, velocityX, velocityY, ADVECTION);\n\n // Diffuse density\n diffuse(density, densityPrev, DIFFUSION, DIFFUSION);\n diffuse(velocityX, velocityXPrev, DIFFUSION, DIFFUSION);\n diffuse(velocityY, velocityYPrev, DIFFUSION, DIFFUSION);\n\n // Damp velocity\n for (let i = 0; i < density.length; i++) {\n velocityX[i] *= DAMPING;\n velocityY[i] *= DAMPING;\n }\n\n // Copy to previous for next step\n for (let i = 0; i < density.length; i++) {\n densityPrev[i] = density[i];\n velocityXPrev[i] = velocityX[i];\n velocityYPrev[i] = velocityY[i];\n }\n }\n\n function draw() {\n ctx.clearRect(0, 0, width, height);\n for (let y = 0; y < NUM_CELLS_Y; y++) {\n for (let x = 0; x < NUM_CELLS_X; x++) {\n const i = getIndex(x, y);\n const d = density[i];\n if (d > 0) {\n const value = Math.min(1, d / MAX_DENSITY);\n const r = Math.floor(color[0] * value);\n const g = Math.floor(color[1] * value);\n const b = Math.floor(color[2] * value);\n ctx.fillStyle = `rgb(${r},${g},${b})`;\n ctx.fillRect(x * SIZE, y * SIZE, SIZE, SIZE);\n }\n }\n }\n }\n\n function animate() {\n step();\n draw();\n requestAnimationFrame(animate);\n }\n\n canvas.addEventListener('mousedown', (e) => {\n mouse.x = e.offsetX;\n mouse.y = e.offsetY;\n mouse.down = true;\n });\n\n canvas.addEventListener('mousemove', (e) => {\n if (mouse.down) {\n mouse.x = e.offsetX;\n mouse.y = e.offsetY;\n const x = Math.floor(mouse.x / SIZE);\n const y = Math.floor(mouse.y / SIZE);\n addDensity(x, y, 10);\n addVelocity(x, y, 0.1, 0.1);\n }\n });\n\n canvas.addEventListener('mouseup', () => {\n mouse.down = false;\n });\n\n clearButton.addEventListener('click', () => {\n for (let i = 0; i < density.length; i++) {\n density[i] = 0;\n velocityX[i] = 0;\n velocityY[i] = 0;\n }\n });\n\n colorPicker.addEventListener('input', (e) => {\n const c = e.target.value;\n color[0] = parseInt(c.slice(1, 3), 16);\n color[1] = parseInt(c.slice(3, 5), 16);\n color[2] = parseInt(c.slice(5, 7), 16);\n });\n\n animate();\n </script>\n</body>\n</html>",
+ "remixOf": "edbe5de71e26",
+ "remixSource": "qwen3-14b",
+ "designTools": false,
+ "created_at": "2026-07-25T07:49:49.642Z",
+ "winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "done",
+ "error": null,
+ "seconds": 55,
+ "cost": 0,
+ "started_at": "2026-07-25T07:59:28.115Z",
+ "finished_at": "2026-07-25T08:00:23.227Z",
+ "queued_at": "2026-07-25T07:49:49.653Z",
+ "bytes": 6863,
+ "thumb": true
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "running",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": "2026-07-25T08:00:23.235Z",
+ "finished_at": null,
+ "queued_at": "2026-07-25T07:49:49.661Z"
+ },
+ {
+ "model": "hermes3-8b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:29.664Z"
+ "queued_at": "2026-07-25T07:49:49.668Z"
},
{
- "model": "gemma3-12b",
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 52,
+ "cost": 0,
+ "started_at": "2026-07-25T07:50:17.261Z",
+ "finished_at": "2026-07-25T07:51:08.941Z",
+ "queued_at": "2026-07-25T07:49:49.674Z",
+ "bytes": 6107,
+ "thumb": true
+ },
+ {
+ "model": "hf-qwen-coder-32b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:29.673Z"
+ "queued_at": "2026-07-25T07:49:49.677Z"
+ }
+ ]
+ },
+ {
+ "id": "028885e12558",
+ "title": "Designer Wallcoverings — Find Your Style Quiz",
+ "prompt": "Build a single self-contained HTML file: an Instagram-shareable \"What's Your Wallcovering Style?\" quiz for a luxury brand. 5 tap-through questions with CSS-illustrated answer tiles; scoring maps to one of four style results (Traditional Damask, Modern Minimalist, Bohemian Maximalist, Art Deco Glam) shown on a 1080x1080 result card with a matching CSS pattern swatch, a short description, and a \"Shop this style\" button. Elegant editorial UI. Output ONLY the HTML.",
+ "category": "Real Work",
+ "designTools": true,
+ "created_at": "2026-07-25T07:49:49.730Z",
+ "winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T07:49:49.737Z"
},
{
- "model": "hermes3-8b",
+ "model": "gemma3-12b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:29.678Z"
+ "queued_at": "2026-07-25T07:49:49.743Z"
},
{
- "model": "qwen25-7b",
- "status": "running",
+ "model": "hermes3-8b",
+ "status": "queued",
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T07:49:29.690Z",
+ "started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:29.684Z"
+ "queued_at": "2026-07-25T07:49:49.748Z"
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 25,
+ "cost": 0,
+ "started_at": "2026-07-25T07:51:08.943Z",
+ "finished_at": "2026-07-25T07:51:34.434Z",
+ "queued_at": "2026-07-25T07:49:49.750Z",
+ "bytes": 3562,
+ "thumb": true
},
{
"model": "hf-qwen-coder-32b",
@@ -14901,18 +15098,84 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:29.687Z"
+ "queued_at": "2026-07-25T07:49:49.753Z"
+ },
+ {
+ "model": "claude-code",
+ "status": "done",
+ "error": null,
+ "seconds": 77,
+ "cost": 0,
+ "started_at": "2026-07-25T07:49:49.767Z",
+ "finished_at": "2026-07-25T07:51:06.747Z",
+ "queued_at": "2026-07-25T07:49:49.755Z",
+ "bytes": 14620,
+ "thumb": true
+ },
+ {
+ "model": "kimi",
+ "status": "done",
+ "error": null,
+ "seconds": 97,
+ "cost": 0.0165,
+ "started_at": "2026-07-25T07:49:49.771Z",
+ "finished_at": "2026-07-25T07:51:26.553Z",
+ "queued_at": "2026-07-25T07:49:49.758Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 18276,
+ "thumb": true
+ },
+ {
+ "model": "gpt",
+ "status": "done",
+ "error": null,
+ "seconds": 82,
+ "cost": 0.2006,
+ "started_at": "2026-07-25T07:49:49.775Z",
+ "finished_at": "2026-07-25T07:51:11.575Z",
+ "queued_at": "2026-07-25T07:49:49.762Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 51202,
+ "thumb": true
+ },
+ {
+ "model": "grok",
+ "status": "done",
+ "error": null,
+ "seconds": 65,
+ "cost": 0.0872,
+ "started_at": "2026-07-25T07:49:49.778Z",
+ "finished_at": "2026-07-25T07:50:54.578Z",
+ "queued_at": "2026-07-25T07:49:49.764Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 13691,
+ "thumb": true
}
]
},
{
- "id": "eda6b5e29387",
- "title": "Remix: All-Models — Fluid Ink Sim",
- "prompt": "Build a single-file HTML page: an interactive fluid/ink simulation. Dragging the mouse injects swirling colored ink that diffuses and advects across a dark canvas; a clear button and a color picker. Grid-based fluid solver, self-contained, no external libraries.\n\nHere is a strong previous attempt at this exact challenge. IMPROVE on it — keep what works, fix its weaknesses, and elevate the visual quality and polish. Return a complete, improved single-file HTML document.\n\n=== PREVIOUS ATTEMPT (Qwen3 14B) ===\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <title>Fluid Simulation</title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #000;\n font-family: sans-serif;\n }\n canvas {\n display: block;\n }\n #controls {\n position: absolute;\n top: 10px;\n left: 10px;\n background: rgba(0,0,0,0.5);\n padding: 10px;\n border-radius: 5px;\n }\n #colorPicker {\n margin: 5px 0;\n }\n #clearButton {\n margin-top: 5px;\n }\n </style>\n</head>\n<body>\n <div id=\"controls\">\n <label for=\"colorPicker\">Color:</label>\n <input type=\"color\" id=\"colorPicker\" value=\"#00ffcc\">\n <button id=\"clearButton\">Clear</button>\n </div>\n <canvas id=\"canvas\"></canvas>\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n const colorPicker = document.getElementById('colorPicker');\n const clearButton = document.getElementById('clearButton');\n\n let width = canvas.width = window.innerWidth;\n let height = canvas.height = window.innerHeight;\n\n window.addEventListener('resize', () => {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n });\n\n const SIZE = 64;\n const NUM_CELLS_X = Math.floor(width / SIZE);\n const NUM_CELLS_Y = Math.floor(height / SIZE);\n\n const DENSITY = 1;\n const MAX_DENSITY = 100;\n const DIFFUSION = 0.19;\n const ADVECTION = 0.19;\n const DAMPING = 0.8;\n\n const density = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityX = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityY = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const densityPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityXPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n const velocityYPrev = new Array(NUM_CELLS_X * NUM_CELLS_Y).fill(0);\n\n const mouse = { x: -1, y: -1, down: false };\n const color = [0, 255, 204];\n\n function getIndex(x, y) {\n return y * NUM_CELLS_X + x;\n }\n\n function addDensity(x, y, val) {\n const i = getIndex(x, y);\n density[i] = Math.min(MAX_DENSITY, density[i] + val);\n }\n\n function addVelocity(x, y, vx, vy) {\n const i = getIndex(x, y);\n velocityX[i] += vx;\n velocityY[i] += vy;\n }\n\n function advect(field, fieldPrev, vx, vy, dt) {\n for (let y = 0; y < NUM_CELLS_Y; y++) {\n for (let x = 0; x < NUM_CELLS_X; x++) {\n const i = getIndex(x, y);\n const u = (x - dt * vx[i]) % NUM_CELLS_X;\n const v = (y - dt * vy[i]) % NUM_CELLS_Y;\n const uClamped = Math.max(0, Math.min(NUM_CELLS_X - 1, u));\n const vClamped = Math.max(0, Math.min(NUM_CELLS_Y - 1, v));\n field[i] = fieldPrev[getIndex(Math.floor(uClamped), Math.floor(vClamped))];\n }\n }\n }\n\n function diffuse(field, fieldPrev, dt, diff) {\n for (let y = 0; y < NUM_CELLS_Y; y++) {\n for (let x = 0; x < NUM_CELLS_X; x++) {\n fieldPrev[getIndex(x, y)] = field[getIndex(x, y)];\n }\n }\n for (let iter = 0; iter < 20; iter++) {\n for (let y = 1; y < NUM_CELLS_Y - 1; y++) {\n for (let x = 1; x < NUM_CELLS_X - 1; x++) {\n const i = getIndex(x, y);\n field[i] = (fieldPrev[i] + diff * (fieldPrev[getIndex(x + 1, y)] + fieldPrev[getIndex(x - 1, y)] + fieldPrev[getIndex(x, y + 1)] + fieldPrev[getIndex(x, y - 1)])) / (1 + 4 * diff);\n }\n }\n }\n }\n\n function step() {\n // Advect density\n advect(density, densityPrev, velocityX, velocityY, ADVECTION);\n // Advect velocity\n advect(velocityX, velocityXPrev, velocityX, velocityY, ADVECTION);\n advect(velocityY, velocityYPrev, velocityX, velocityY, ADVECTION);\n\n // Diffuse density\n diffuse(density, densityPrev, DIFFUSION, DIFFUSION);\n diffuse(velocityX, velocityXPrev, DIFFUSION, DIFFUSION);\n diffuse(velocityY, velocityYPrev, DIFFUSION, DIFFUSION);\n\n // Damp velocity\n for (let i = 0; i < density.length; i++) {\n velocityX[i] *= DAMPING;\n velocityY[i] *= DAMPING;\n }\n\n // Copy to previous for next step\n for (let i = 0; i < density.length; i++) {\n densityPrev[i] = density[i];\n velocityXPrev[i] = velocityX[i];\n velocityYPrev[i] = velocityY[i];\n }\n }\n\n function draw() {\n ctx.clearRect(0, 0, width, height);\n for (let y = 0; y < NUM_CELLS_Y; y++) {\n for (let x = 0; x < NUM_CELLS_X; x++) {\n const i = getIndex(x, y);\n const d = density[i];\n if (d > 0) {\n const value = Math.min(1, d / MAX_DENSITY);\n const r = Math.floor(color[0] * value);\n const g = Math.floor(color[1] * value);\n const b = Math.floor(color[2] * value);\n ctx.fillStyle = `rgb(${r},${g},${b})`;\n ctx.fillRect(x * SIZE, y * SIZE, SIZE, SIZE);\n }\n }\n }\n }\n\n function animate() {\n step();\n draw();\n requestAnimationFrame(animate);\n }\n\n canvas.addEventListener('mousedown', (e) => {\n mouse.x = e.offsetX;\n mouse.y = e.offsetY;\n mouse.down = true;\n });\n\n canvas.addEventListener('mousemove', (e) => {\n if (mouse.down) {\n mouse.x = e.offsetX;\n mouse.y = e.offsetY;\n const x = Math.floor(mouse.x / SIZE);\n const y = Math.floor(mouse.y / SIZE);\n addDensity(x, y, 10);\n addVelocity(x, y, 0.1, 0.1);\n }\n });\n\n canvas.addEventListener('mouseup', () => {\n mouse.down = false;\n });\n\n clearButton.addEventListener('click', () => {\n for (let i = 0; i < density.length; i++) {\n density[i] = 0;\n velocityX[i] = 0;\n velocityY[i] = 0;\n }\n });\n\n colorPicker.addEventListener('input', (e) => {\n const c = e.target.value;\n color[0] = parseInt(c.slice(1, 3), 16);\n color[1] = parseInt(c.slice(3, 5), 16);\n color[2] = parseInt(c.slice(5, 7), 16);\n });\n\n animate();\n </script>\n</body>\n</html>",
- "remixOf": "edbe5de71e26",
+ "id": "45271386f3f4",
+ "title": "Remix: Mandelbrot Explorer",
+ "prompt": "Build a single-file HTML page: an interactive Mandelbrot set explorer. Click to zoom in (scroll or buttons to zoom out), smooth color-cycling palette, iteration slider, and a reset. Render on canvas with escape-time coloring. Self-contained, no external libraries.\n\nHere is a strong previous attempt at this exact challenge. IMPROVE on it — keep what works, fix its weaknesses, and elevate the visual quality and polish. Return a complete, improved single-file HTML document.\n\n=== PREVIOUS ATTEMPT (Qwen3 14B) ===\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Mandelbrot Explorer</title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #000;\n color: #fff;\n font-family: sans-serif;\n }\n canvas {\n display: block;\n }\n #controls {\n position: absolute;\n top: 10px;\n left: 10px;\n background: rgba(0, 0, 0, 0.5);\n padding: 10px;\n border-radius: 5px;\n z-index: 10;\n }\n #controls input[type=\"range\"] {\n width: 200px;\n }\n #controls button {\n margin-left: 10px;\n padding: 5px 10px;\n cursor: pointer;\n }\n </style>\n</head>\n<body>\n <canvas id=\"mandelbrot\"></canvas>\n <div id=\"controls\">\n <label>Iterations: <input type=\"range\" id=\"iterationSlider\" min=\"10\" max=\"1000\" value=\"200\" /></label>\n <button id=\"reset\">Reset</button>\n </div>\n <script>\n const canvas = document.getElementById('mandelbrot');\n const ctx = canvas.getContext('2d');\n const controls = document.getElementById('controls');\n const iterationSlider = document.getElementById('iterationSlider');\n const resetButton = document.getElementById('reset');\n\n let width = canvas.width = window.innerWidth;\n let height = canvas.height = window.innerHeight;\n let scale = 2.0 / Math.min(width, height);\n let offsetX = -0.5;\n let offsetY = 0;\n let maxIterations = 200;\n\n window.addEventListener('resize', () => {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n scale = 2.0 / Math.min(width, height);\n drawMandelbrot();\n });\n\n function map(x, a, b, c, d) {\n return (x - a) * (d - c) / (b - a) + c;\n }\n\n function mandelbrot(x, y, maxIter) {\n let zx = 0, zy = 0;\n let iteration = 0;\n let x0 = x;\n let y0 = y;\n while (zx * zx + zy * zy < 4 && iteration < maxIter) {\n let temp = zx * zx - zy * zy + x0;\n zy = 2 * zx * zy + y0;\n zx = temp;\n iteration++;\n }\n return iteration;\n }\n\n function getColor(iter) {\n const t = iter / maxIterations;\n const r = Math.floor(255 * (t < 0.5 ? t * 2 : 1 - 2 * (t - 0.5)));\n const g = Math.floor(255 * (t < 0.25 ? t * 4 : t >= 0.75 ? 2 - 4 * t : 1));\n const b = Math.floor(255 * (t < 0.5 ? 1 - 2 * t : t < 0.75 ? 2 * (t - 0.5) : 1 - 2 * (t - 0.75)));\n return [r, g, b];\n }\n\n function drawMandelbrot() {\n const imageData = ctx.createImageData(width, height);\n const data = imageData.data;\n maxIterations = parseInt(iterationSlider.value);\n for (let px = 0; px < width; px++) {\n for (let py = 0; py < height; py++) {\n const x = map(px, 0, width, offsetX, offsetX + scale);\n const y = map(py, 0, height, offsetY, offsetY + scale);\n const iter = mandelbrot(x, y, maxIterations);\n const [r, g, b] = getColor(iter);\n const idx = (py * width + px) * 4;\n data[idx] = r;\n data[idx + 1] = g;\n data[idx + 2] = b;\n data[idx + 3] = 255;\n }\n }\n ctx.putImageData(imageData, 0, 0);\n }\n\n canvas.addEventListener('click', (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const zoomFactor = 1.5;\n const zoomX = map(x, 0, width, offsetX, offsetX + scale);\n const zoomY = map(y, 0, height, offsetY, offsetY + scale);\n scale /= zoomFactor;\n offsetX = zoomX - (scale * width) / 2;\n offsetY = zoomY - (scale * height) / 2;\n drawMandelbrot();\n });\n\n canvas.addEventListener('wheel', (e) => {\n e.preventDefault();\n const zoomFactor = e.deltaY < 0 ? 1.2 : 0.8;\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const zoomX = map(x, 0, width, offsetX, offsetX + scale);\n const zoomY = map(y, 0, height, offsetY, offsetY + scale);\n scale *= zoomFactor;\n offsetX = zoomX - (scale * width) / 2;\n offsetY = zoomY - (scale * height) / 2;\n drawMandelbrot();\n });\n\n resetButton.addEventListener('click', () => {\n offsetX = -0.5;\n offsetY = 0;\n scale = 2.0 / Math.min(width, height);\n iterationSlider.value = 200;\n maxIterations = 200;\n drawMandelbrot();\n });\n\n iterationSlider.addEventListener('input', () => {\n maxIterations = parseInt(iterationSlider.value);\n drawMandelbrot();\n });\n\n drawMandelbrot();\n </script>\n</body>\n</html>",
+ "remixOf": "a353bd10ea1b",
"remixSource": "qwen3-14b",
"designTools": false,
- "created_at": "2026-07-25T07:49:49.642Z",
+ "created_at": "2026-07-25T08:01:12.454Z",
"winner": null,
"runs": [
{
@@ -14923,7 +15186,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.653Z"
+ "queued_at": "2026-07-25T08:01:12.462Z"
},
{
"model": "gemma3-12b",
@@ -14933,7 +15196,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.661Z"
+ "queued_at": "2026-07-25T08:01:12.470Z"
},
{
"model": "hermes3-8b",
@@ -14943,17 +15206,17 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.668Z"
+ "queued_at": "2026-07-25T08:01:12.476Z"
},
{
"model": "qwen25-7b",
- "status": "queued",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T08:01:12.492Z",
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.674Z"
+ "queued_at": "2026-07-25T08:01:12.482Z"
},
{
"model": "hf-qwen-coder-32b",
@@ -14963,17 +15226,17 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.677Z"
+ "queued_at": "2026-07-25T08:01:12.487Z"
}
]
},
{
- "id": "028885e12558",
- "title": "Designer Wallcoverings — Find Your Style Quiz",
- "prompt": "Build a single self-contained HTML file: an Instagram-shareable \"What's Your Wallcovering Style?\" quiz for a luxury brand. 5 tap-through questions with CSS-illustrated answer tiles; scoring maps to one of four style results (Traditional Damask, Modern Minimalist, Bohemian Maximalist, Art Deco Glam) shown on a 1080x1080 result card with a matching CSS pattern swatch, a short description, and a \"Shop this style\" button. Elegant editorial UI. Output ONLY the HTML.",
+ "id": "6a3a34df3dc6",
+ "title": "Designer Wallcoverings — Color Story of the Month Carousel",
+ "prompt": "Build a single self-contained HTML file: an Instagram carousel (1080x1080, swipe/dots) presenting a seasonal wallcovering COLOR STORY. Slide 1 cover with the palette name (e.g. \"Terracotta & Sage\"), slides 2-4 each feature one hue with its designer name (Oatmeal, Celadon, Terracotta) over a CSS-drawn swatch + a room-use tip, slide 5 CTA. Muted luxe type. Editable palette. Output ONLY the HTML.",
"category": "Real Work",
"designTools": true,
- "created_at": "2026-07-25T07:49:49.730Z",
+ "created_at": "2026-07-25T08:01:12.544Z",
"winner": null,
"runs": [
{
@@ -14984,7 +15247,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.737Z"
+ "queued_at": "2026-07-25T08:01:12.550Z"
},
{
"model": "gemma3-12b",
@@ -14994,7 +15257,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.743Z"
+ "queued_at": "2026-07-25T08:01:12.557Z"
},
{
"model": "hermes3-8b",
@@ -15004,7 +15267,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.748Z"
+ "queued_at": "2026-07-25T08:01:12.562Z"
},
{
"model": "qwen25-7b",
@@ -15014,7 +15277,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.750Z"
+ "queued_at": "2026-07-25T08:01:12.565Z"
},
{
"model": "hf-qwen-coder-32b",
@@ -15024,7 +15287,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.753Z"
+ "queued_at": "2026-07-25T08:01:12.568Z"
},
{
"model": "claude-code",
@@ -15032,9 +15295,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T07:49:49.767Z",
+ "started_at": "2026-07-25T08:01:12.582Z",
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.755Z"
+ "queued_at": "2026-07-25T08:01:12.570Z"
},
{
"model": "kimi",
@@ -15042,9 +15305,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T07:49:49.771Z",
+ "started_at": "2026-07-25T08:01:12.586Z",
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.758Z"
+ "queued_at": "2026-07-25T08:01:12.574Z"
},
{
"model": "gpt",
@@ -15052,9 +15315,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T07:49:49.775Z",
+ "started_at": "2026-07-25T08:01:12.590Z",
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.762Z"
+ "queued_at": "2026-07-25T08:01:12.576Z"
},
{
"model": "grok",
@@ -15062,9 +15325,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T07:49:49.778Z",
+ "started_at": "2026-07-25T08:01:12.593Z",
"finished_at": null,
- "queued_at": "2026-07-25T07:49:49.764Z"
+ "queued_at": "2026-07-25T08:01:12.579Z"
}
]
}
diff --git a/data/costlog.jsonl b/data/costlog.jsonl
index a9158f5..7056987 100644
--- a/data/costlog.jsonl
+++ b/data/costlog.jsonl
@@ -208,3 +208,6 @@
{"ts":"2026-07-25T07:45:36.642Z","provider":"openai","model":"gpt-5.1","task":"model-arena","input_tokens":161,"output_tokens":10798,"cost_usd":0.151454}
{"ts":"2026-07-25T07:45:55.839Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena","input_tokens":156,"output_tokens":11151,"cost_usd":0.027971}
{"ts":"2026-07-25T07:47:55.205Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena","input_tokens":163,"output_tokens":6755,"cost_usd":0.016985}
+{"ts":"2026-07-25T07:50:54.566Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":2911,"output_tokens":5229,"cost_usd":0.087168}
+{"ts":"2026-07-25T07:51:11.570Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2269,"output_tokens":14045,"cost_usd":0.200601}
+{"ts":"2026-07-25T07:51:26.550Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":2913,"output_tokens":5901,"cost_usd":0.0165}
diff --git a/data/landings/028885e12558-gpt.html b/data/landings/028885e12558-gpt.html
new file mode 100644
index 0000000..006b5c6
--- /dev/null
+++ b/data/landings/028885e12558-gpt.html
@@ -0,0 +1,1580 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Designer Wallcoverings — Find Your Style Quiz — built by GPT-5.1 · Model Arena</title>
+<style>*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d10;color:#e6ecf2;font:14px/1.5 ui-monospace,Menlo,monospace}
+header{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid #1c2430;background:#0e1116}
+header .k{color:#7cf;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:12px;white-space:nowrap}
+header h1{font-size:15px;margin:0;font-weight:600}header .by{color:#8a93a0;font-size:12px;margin-left:auto;white-space:nowrap}
+.wrap{height:calc(100% - 51px)}iframe{width:100%;height:100%;border:0;background:#000;display:block}</style></head><body>
+<header><span class="k">⚔ Model Arena</span><h1>Designer Wallcoverings — Find Your Style Quiz</h1><span class="by">built by <b>GPT-5.1</b></span></header>
+<div class="wrap"><iframe sandbox="allow-scripts allow-pointer-lock" srcdoc="<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>What’s Your Wallcovering Style?</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #1f1f26;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-soft: #7d6a45;
+
+ --radius-lg: 28px;
+ --radius-md: 18px;
+ --radius-sm: 10px;
+
+ --shadow-soft: 0 26px 80px rgba(0, 0, 0, 0.65);
+
+ --font-display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
+ --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+
+ --fs-caption: 12px;
+ --fs-body: 16px;
+ --fs-lead: 21px;
+ --fs-h3: 28px;
+ --fs-h2: 38px;
+ --fs-h1: 50px;
+ --fs-display: 67px;
+
+ --elevated-border: 1px solid rgba(255, 255, 255, 0.04);
+
+ --ease-out: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ @keyframes scaleIn {
+ from { opacity: 0; transform: scale(.92); }
+ to { opacity: 1; transform: none; }
+ }
+ @keyframes clipReveal {
+ from { clip-path: inset(0 100% 0 0); }
+ to { clip-path: inset(0); }
+ }
+ @keyframes blurIn {
+ from { opacity: 0; filter: blur(12px); }
+ to { opacity: 1; filter: blur(0); }
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top, #1d1d23 0, #050507 55%, #000 100%);
+ color: var(--text);
+ font-family: var(--font-body);
+ -webkit-font-smoothing: antialiased;
+ height: 100%;
+ }
+
+ body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ }
+
+ .frame {
+ width: 100%;
+ max-width: 1080px;
+ max-height: 1080px;
+ aspect-ratio: 1 / 1;
+ background: radial-gradient(circle at 10% 0, #252531 0, #0b0b0d 40%, #050507 100%);
+ border-radius: 40px;
+ box-shadow: var(--shadow-soft);
+ padding: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ @media (max-width: 768px) {
+ .frame {
+ border-radius: 0;
+ box-shadow: none;
+ max-height: none;
+ padding: 20px;
+ }
+ }
+
+ .card-shell {
+ width: 100%;
+ height: 100%;
+ border-radius: 32px;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ background:
+ linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 40%),
+ radial-gradient(circle at 0 0, rgba(201, 169, 97, 0.16), transparent 55%),
+ radial-gradient(circle at 100% 100%, rgba(125, 106, 69, 0.24), transparent 60%),
+ radial-gradient(circle at 50% 0, rgba(10, 10, 14, 0.7), rgba(13, 13, 15, 0.98));
+ padding: 32px 32px 28px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ @media (max-width: 768px) {
+ .card-shell {
+ border-radius: 24px;
+ padding: 20px 18px 18px;
+ }
+ }
+
+ .card-inner {
+ flex: 1;
+ border-radius: 26px;
+ border: var(--elevated-border);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.04), transparent 55%), #101014;
+ padding: 28px 28px 24px;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+ }
+
+ @media (max-width: 768px) {
+ .card-inner {
+ padding: 22px 18px 18px;
+ }
+ }
+
+ .chrome {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ margin-bottom: 18px;
+ position: relative;
+ z-index: 3;
+ }
+
+ .brand-lockup {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ font-size: 11px;
+ color: var(--muted);
+ }
+
+ .brand-mark {
+ width: 18px;
+ height: 18px;
+ border-radius: 999px;
+ border: 1px solid rgba(201, 169, 97, 0.6);
+ background:
+ conic-gradient(from 210deg, rgba(255, 255, 255, 0.12), rgba(201, 169, 97, 0.65), rgba(125, 106, 69, 0.4), rgba(0, 0, 0, 0.85), rgba(255, 255, 255, 0.12));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .brand-mark::after {
+ content: "";
+ width: 7px;
+ height: 7px;
+ border-radius: 999px;
+ border: 1px solid rgba(13, 13, 15, 0.9);
+ background: radial-gradient(circle at 30% 0, #f5f2ea 0, #e4d4ae 40%, #8d6a2b 100%);
+ box-shadow: 0 0 0 1px rgba(13, 13, 15, 0.6);
+ }
+
+ .chrome-meta {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ font-size: 11px;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ }
+
+ .pill {
+ padding: 4px 9px 4px 9px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), transparent 60%),
+ linear-gradient(135deg, rgba(23, 23, 28, 0.96), rgba(15, 15, 19, 0.96));
+ }
+
+ .steps {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ }
+
+ .steps-dot {
+ width: 4px;
+ height: 12px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.08);
+ overflow: hidden;
+ position: relative;
+ }
+
+ .steps-dot-fill {
+ position: absolute;
+ inset: 0;
+ transform-origin: bottom;
+ transform: scaleY(0);
+ background: linear-gradient(to top, #c9a961, #f5e3b7);
+ transition: transform 260ms var(--ease-out);
+ }
+
+ .steps-dot.active .steps-dot-fill {
+ transform: scaleY(1);
+ }
+
+ .share-tag {
+ border-radius: 999px;
+ padding: 4px 10px;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.8));
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .share-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 999px;
+ background: radial-gradient(circle at 20% 0, #f5f2ea, #c9a961);
+ }
+
+ .content {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 1.25fr 1.1fr;
+ gap: 22px;
+ min-height: 0;
+ position: relative;
+ z-index: 2;
+ }
+
+ @media (max-width: 900px) {
+ .content {
+ grid-template-columns: 1fr;
+ grid-auto-rows: auto;
+ }
+ }
+
+ .left-panel {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 20px;
+ min-width: 0;
+ }
+
+ .headline-block {
+ animation: fadeUp 0.7s var(--ease-out) both;
+ }
+
+ .eyebrow {
+ font-family: var(--font-body);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ color: var(--muted);
+ margin-bottom: 8px;
+ }
+
+ .title {
+ font-family: var(--font-display);
+ font-size: clamp(32px, 3.2vw, 40px);
+ line-height: 1.03;
+ letter-spacing: -0.03em;
+ text-transform: uppercase;
+ margin: 0 0 6px;
+ }
+
+ .title span.em {
+ color: var(--accent);
+ }
+
+ .subtitle {
+ font-size: 14px;
+ color: rgba(245, 242, 234, 0.74);
+ max-width: 36rem;
+ }
+
+ .quiz-panel {
+ position: relative;
+ min-height: 0;
+ }
+
+ .quiz-screen {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(18px);
+ transition:
+ opacity 320ms var(--ease-out),
+ transform 320ms var(--ease-out);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 18px;
+ }
+
+ .quiz-screen.active {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+
+ .quiz-screen.quiz-result {
+ transform: scale(0.96);
+ }
+
+ .quiz-screen.quiz-result.active {
+ transform: scale(1);
+ }
+
+ .question-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 6px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ }
+
+ .question-label-line {
+ flex: 1;
+ height: 1px;
+ background: linear-gradient(to right, rgba(201, 169, 97, 0.74), transparent);
+ }
+
+ .question-title {
+ font-family: var(--font-display);
+ font-size: 20px;
+ letter-spacing: -0.03em;
+ margin-bottom: 14px;
+ }
+
+ .answers-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+ }
+
+ .answer-card {
+ position: relative;
+ border-radius: 18px;
+ padding: 12px 12px 10px;
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 55%),
+ linear-gradient(145deg, #15151b, #101016);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ cursor: pointer;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ transition:
+ transform 200ms var(--ease-out),
+ box-shadow 200ms var(--ease-out),
+ border-color 200ms var(--ease-out),
+ background 200ms var(--ease-out);
+ }
+
+ .answer-card::before {
+ content: "";
+ position: absolute;
+ inset: -40%;
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%),
+ radial-gradient(circle at 100% 0, rgba(201, 169, 97, 0.24), transparent 60%);
+ opacity: 0;
+ mix-blend-mode: screen;
+ transition: opacity 220ms var(--ease-out);
+ }
+
+ .answer-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
+ border-color: rgba(201, 169, 97, 0.7);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.12), transparent 55%),
+ linear-gradient(145deg, #1b1b23, #111019);
+ }
+
+ .answer-card:hover::before {
+ opacity: 0.6;
+ }
+
+ .answer-card:active {
+ transform: translateY(-1px) scale(0.99);
+ }
+
+ .answer-label {
+ font-size: 12px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: rgba(245, 242, 234, 0.82);
+ }
+
+ .answer-meta {
+ font-size: 11px;
+ color: var(--muted);
+ }
+
+ .swatch {
+ position: relative;
+ border-radius: 14px;
+ overflow: hidden;
+ height: 80px;
+ background: #17171f;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .swatch-inner {
+ width: 130%;
+ height: 130%;
+ transform: translate(-8%, -8%);
+ opacity: 0.9;
+ }
+
+ .swatch-tag {
+ position: absolute;
+ right: 8px;
+ bottom: 8px;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ background: rgba(10, 10, 14, 0.76);
+ border: 1px solid rgba(255, 255, 255, 0.22);
+ color: rgba(245, 242, 234, 0.94);
+ }
+
+ .hint {
+ font-size: 11px;
+ color: var(--muted);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 4px;
+ }
+
+ .hint-line {
+ width: 26px;
+ height: 1px;
+ background: linear-gradient(to right, rgba(201, 169, 97, 0.7), transparent);
+ }
+
+ .right-panel {
+ position: relative;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.1), transparent 60%),
+ radial-gradient(circle at 100% 100%, rgba(201, 169, 97, 0.5), rgba(13, 13, 15, 0.9) 60%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ min-height: 0;
+ }
+
+ .result-card {
+ width: 100%;
+ height: 100%;
+ max-height: 100%;
+ border-radius: 22px;
+ background:
+ linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(7, 7, 10, 0.96)),
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%);
+ padding: 18px 18px 16px;
+ display: flex;
+ flex-direction: column;
+ color: var(--text);
+ animation: clipReveal 0.7s var(--ease-out) both;
+ }
+
+ .result-badge-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 14px;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ }
+
+ .result-main {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 1.1fr 1.05fr;
+ gap: 16px;
+ align-items: stretch;
+ min-height: 0;
+ }
+
+ @media (max-width: 900px) {
+ .result-main {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .result-pattern {
+ position: relative;
+ border-radius: 18px;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%), #15151e;
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+ min-height: 0;
+ }
+
+ .result-pattern-inner {
+ flex: 1;
+ display: grid;
+ place-items: center;
+ padding: 8px;
+ }
+
+ .result-pattern-tag {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ background: rgba(10, 10, 14, 0.78);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ }
+
+ .result-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 14px;
+ }
+
+ .result-type {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ color: var(--muted);
+ margin-bottom: 4px;
+ }
+
+ .result-title {
+ font-family: var(--font-display);
+ font-size: 24px;
+ letter-spacing: -0.03em;
+ text-transform: uppercase;
+ margin-bottom: 6px;
+ }
+
+ .result-line {
+ width: 32px;
+ height: 1px;
+ background: linear-gradient(to right, #c9a961, transparent);
+ margin-bottom: 8px;
+ }
+
+ .result-description {
+ font-size: 13px;
+ color: rgba(245, 242, 234, 0.8);
+ line-height: 1.5;
+ margin-bottom: 8px;
+ }
+
+ .result-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-bottom: 10px;
+ }
+
+ .result-tag-chip {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.14), transparent 60%),
+ linear-gradient(135deg, #15151b, #0f0f14);
+ color: rgba(245, 242, 234, 0.92);
+ }
+
+ .cta-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ margin-top: auto;
+ }
+
+ .btn-primary {
+ flex: 1;
+ border-radius: 999px;
+ border: none;
+ outline: none;
+ padding: 10px 16px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.22em;
+ background-image:
+ linear-gradient(120deg, #c9a961, #f9e8bd, #7d6a45);
+ background-size: 180% 100%;
+ color: #111015;
+ cursor: pointer;
+ transition:
+ background-position 260ms var(--ease-out),
+ transform 180ms var(--ease-out),
+ box-shadow 180ms var(--ease-out);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
+ white-space: nowrap;
+ }
+
+ .btn-primary:hover {
+ background-position: 100% 0;
+ transform: translateY(-1px);
+ box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
+ }
+
+ .btn-primary:active {
+ transform: translateY(0);
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
+ }
+
+ .cta-note {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ text-align: right;
+ max-width: 150px;
+ }
+
+ .footer {
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ }
+
+ .progress-rail {
+ flex: 1;
+ height: 1px;
+ background: rgba(255, 255, 255, 0.08);
+ position: relative;
+ margin-right: 10px;
+ overflow: hidden;
+ border-radius: 999px;
+ }
+
+ .progress-bar {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(to right, #c9a961, #f5e3b7);
+ transform-origin: left;
+ transform: scaleX(0.2);
+ transition: transform 280ms var(--ease-out);
+ }
+
+ .footer-label {
+ opacity: 0.8;
+ }
+
+ /* Pattern styles for answers & results */
+
+ .pattern-damask {
+ --c1: #15141c;
+ --c2: #22202b;
+ --c3: #c9a961;
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 45%),
+ repeating-radial-gradient(circle at 50% 40%, var(--c3) 0 1px, transparent 1px 10px),
+ repeating-conic-gradient(from 0deg, var(--c1) 0 15deg, var(--c2) 15deg 30deg);
+ mask-image: radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.45));
+ }
+
+ .pattern-damask::before {
+ content: "";
+ position: absolute;
+ inset: 6% 10%;
+ border-radius: 50%;
+ border: 1px solid rgba(201, 169, 97, 0.45);
+ opacity: 0.8;
+ mix-blend-mode: screen;
+ }
+
+ .pattern-minimal {
+ --line: rgba(245, 242, 234, 0.08);
+ --block: rgba(245, 242, 234, 0.04);
+ background:
+ linear-gradient(120deg, #121219, #0c0c10);
+ background-image:
+ linear-gradient(to right, var(--line) 1px, transparent 1px),
+ linear-gradient(to bottom, var(--line) 1px, transparent 1px),
+ linear-gradient(135deg, var(--block) 25%, transparent 25% 50%, var(--block) 50% 75%, transparent 75%);
+ background-size:
+ 28px 28px,
+ 28px 28px,
+ 56px 56px;
+ }
+
+ .pattern-maximal {
+ background:
+ radial-gradient(circle at 0 0, #f5e3b7 0 8%, transparent 8% 22%, #f5e3b7 22% 30%, transparent 30%),
+ radial-gradient(circle at 60% 40%, #c16b5a 0 7%, transparent 7% 18%, #c16b5a 18% 26%, transparent 26%),
+ radial-gradient(circle at 30% 90%, #578f7a 0 8%, transparent 8% 19%, #578f7a 19% 27%, transparent 27%),
+ conic-gradient(from 45deg, #27131c, #221521, #171621, #1b2023, #27131c);
+ background-size: 120px 120px;
+ background-blend-mode: screen;
+ }
+
+ .pattern-maximal::before {
+ content: "";
+ position: absolute;
+ inset: 14% 6% 6% 14%;
+ background-image:
+ radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.3), transparent 60%),
+ repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.35) 0 6deg, transparent 6deg 12deg);
+ mix-blend-mode: multiply;
+ opacity: 0.9;
+ }
+
+ .pattern-deco {
+ --base: #15121a;
+ --gold: #c9a961;
+ background:
+ linear-gradient(135deg, #16131d, #0d0a11);
+ background-image:
+ linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+ background-size:
+ 20px 20px,
+ 20px 20px;
+ }
+
+ .pattern-deco::before {
+ content: "";
+ position: absolute;
+ inset: 12%;
+ background:
+ conic-gradient(from 0deg, transparent 0 10deg, rgba(201, 169, 97, 0.6) 10deg 20deg, transparent 20deg 30deg);
+ mask-image:
+ radial-gradient(circle at 50% 0, transparent 0 46%, black 46% 100%);
+ opacity: 0.9;
+ }
+
+ .pattern-deco::after {
+ content: "";
+ position: absolute;
+ inset: 18% 28% -8%;
+ border-radius: 60% 60% 0 0;
+ border: 2px solid rgba(201, 169, 97, 0.7);
+ border-bottom: none;
+ box-shadow:
+ 0 0 0 1px rgba(10, 10, 14, 0.8),
+ 0 12px 26px rgba(0, 0, 0, 0.9);
+ }
+
+ .pattern-minimal-lg,
+ .pattern-maximal-lg,
+ .pattern-damask-lg,
+ .pattern-deco-lg {
+ width: 100%;
+ height: 100%;
+ border-radius: 16px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .pattern-damask-lg {
+ background:
+ radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 45%),
+ repeating-radial-gradient(circle at 50% 40%, rgba(201, 169, 97, 0.9) 0 2px, transparent 2px 14px),
+ repeating-conic-gradient(from 0deg, #15141c 0 15deg, #22202b 15deg 30deg);
+ }
+
+ .pattern-damask-lg::before {
+ content: "";
+ position: absolute;
+ inset: 10% 18%;
+ border-radius: 50%;
+ border: 2px solid rgba(201, 169, 97, 0.8);
+ box-shadow: 0 0 0 1px rgba(21, 20, 28, 0.8), 0 28px 70px rgba(0, 0, 0, 0.9);
+ }
+
+ .pattern-damask-lg::after {
+ content: "";
+ position: absolute;
+ inset: 22% 32%;
+ border-radius: 50%;
+ border: 1px solid rgba(245, 242, 234, 0.78);
+ box-shadow: 0 0 32px rgba(201, 169, 97, 0.9);
+ }
+
+ .pattern-minimal-lg {
+ background:
+ linear-gradient(135deg, #101017, #050507);
+ background-image:
+ linear-gradient(to right, rgba(245, 242, 234, 0.08) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(245, 242, 234, 0.04) 1px, transparent 1px),
+ linear-gradient(135deg, rgba(245, 242, 234, 0.08) 25%, transparent 25% 50%, rgba(245, 242, 234, 0.08) 50% 75%, transparent 75%);
+ background-size:
+ 32px 32px,
+ 32px 32px,
+ 64px 64px;
+ }
+
+ .pattern-minimal-lg::before {
+ content: "";
+ position: absolute;
+ inset: 16% 18%;
+ border-radius: 26px;
+ border: 1px solid rgba(245, 242, 234, 0.4);
+ box-shadow: 0 22px 55px rgba(0, 0, 0, 0.8);
+ backdrop-filter: blur(4px);
+ }
+
+ .pattern-minimal-lg::after {
+ content: "";
+ position: absolute;
+ inset: 26% 30%;
+ border-radius: 20px;
+ border: 1px solid rgba(245, 242, 234, 0.22);
+ background: radial-gradient(circle at 0 0, rgba(245, 242, 234, 0.2), transparent 60%);
+ opacity: 0.9;
+ }
+
+ .pattern-maximal-lg {
+ background:
+ radial-gradient(circle at 0 0, #fbe4c4 0 10%, transparent 10% 26%, #fbe4c4 26% 34%, transparent 34%),
+ radial-gradient(circle at 80% 20%, #ffb6a0 0 9%, transparent 9% 23%, #ffb6a0 23% 31%, transparent 31%),
+ radial-gradient(circle at 40% 90%, #8bd3b3 0 9%, transparent 9% 23%, #8bd3b3 23% 31%, transparent 31%),
+ conic-gradient(from 45deg, #2a1120, #1d1020, #121322, #182329, #2a1120);
+ background-size: 160px 160px;
+ background-blend-mode: screen;
+ }
+
+ .pattern-maximal-lg::before {
+ content: "";
+ position: absolute;
+ inset: 12% 10% 20% 20%;
+ border-radius: 45% 60% 50% 70%;
+ border: 1px solid rgba(0, 0, 0, 0.6);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.2), transparent 65%);
+ box-shadow:
+ 0 0 0 1px rgba(255, 255, 255, 0.24),
+ 0 32px 70px rgba(0, 0, 0, 0.9);
+ mix-blend-mode: multiply;
+ }
+
+ .pattern-maximal-lg::after {
+ content: "";
+ position: absolute;
+ inset: 42% 14% 10% 8%;
+ border-radius: 60% 40% 60% 40%;
+ border: 1px solid rgba(0, 0, 0, 0.7);
+ background: radial-gradient(circle at 80% 0, rgba(255, 255, 255, 0.2), transparent 70%);
+ mix-blend-mode: soft-light;
+ }
+
+ .pattern-deco-lg {
+ background:
+ linear-gradient(135deg, #120f18, #08050a);
+ background-image:
+ linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+ background-size:
+ 22px 22px,
+ 22px 22px;
+ position: relative;
+ }
+
+ .pattern-deco-lg::before {
+ content: "";
+ position: absolute;
+ inset: 12% 18%;
+ border-radius: 0;
+ border: 2px solid rgba(201, 169, 97, 0.9);
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.9),
+ 0 26px 60px rgba(0, 0, 0, 1);
+ }
+
+ .pattern-deco-lg::after {
+ content: "";
+ position: absolute;
+ left: 22%;
+ right: 22%;
+ bottom: 8%;
+ height: 40%;
+ border-radius: 50% 50% 0 0;
+ border: 2px solid rgba(201, 169, 97, 0.9);
+ border-bottom: none;
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.9),
+ 0 22px 50px rgba(0, 0, 0, 1);
+ }
+
+ .result-style-damask .result-title {
+ color: #f5e3c2;
+ }
+ .result-style-minimal .result-title {
+ color: #f5f2ea;
+ }
+ .result-style-maximal .result-title {
+ color: #ffd2b9;
+ }
+ .result-style-deco .result-title {
+ color: #f6e2b5;
+ }
+
+ .result-style-damask .result-badge-row,
+ .result-style-damask .result-type {
+ color: #d6c496;
+ }
+
+ .result-style-maximal .result-badge-row,
+ .result-style-maximal .result-type {
+ color: #f3b6a3;
+ }
+
+ .result-style-deco .result-badge-row,
+ .result-style-deco .result-type {
+ color: #e5d5a7;
+ }
+
+ .result-style-minimal .result-badge-row,
+ .result-style-minimal .result-type {
+ color: #b7b4a8;
+ }
+
+ .result-style-damask .result-line {
+ background: linear-gradient(to right, #c9a961, #f7e5bd);
+ }
+
+ .result-style-minimal .result-line {
+ background: linear-gradient(to right, rgba(245, 242, 234, 0.8), transparent);
+ }
+
+ .result-style-maximal .result-line {
+ background: linear-gradient(to right, #ffb6a0, #fbe4c4);
+ }
+
+ .result-style-deco .result-line {
+ background: linear-gradient(to right, #c9a961, #f6e2b5);
+ }
+
+ .badge-style-tag {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ padding: 3px 7px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%),
+ linear-gradient(135deg, rgba(10, 10, 14, 0.9), rgba(0, 0, 0, 1));
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .badge-style-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: conic-gradient(from 160deg, #c9a961, #f7e5bd, #7d6a45, #c9a961);
+ }
+
+ .ar-badge {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: rgba(245, 242, 234, 0.65);
+ }
+
+ .footer-logo {
+ font-family: var(--font-display);
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ font-size: 11px;
+ }
+
+ .footer-logo span {
+ color: var(--accent);
+ }
+
+ .footer-meta {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ }
+
+ .footer-divider {
+ width: 1px;
+ height: 14px;
+ background: rgba(255, 255, 255, 0.18);
+ }
+ </style>
+</head>
+<body>
+<div class="frame">
+ <div class="card-shell">
+ <div class="card-inner">
+ <div class="chrome">
+ <div class="brand-lockup">
+ <div class="brand-mark"></div>
+ <span>Maison Aurelia</span>
+ </div>
+ <div class="chrome-meta">
+ <div class="pill">
+ <div class="steps" aria-hidden="true">
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ <div class="steps-dot"><div class="steps-dot-fill"></div></div>
+ </div>
+ </div>
+ <div class="share-tag">
+ <div class="share-dot"></div>
+ <span>Tap to reveal</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="content">
+ <div class="left-panel">
+ <div class="headline-block">
+ <div class="eyebrow">Style Quiz</div>
+ <h1 class="title">
+ What’s Your<br />
+ <span class="em">Wallcovering</span><br />
+ Style?
+ </h1>
+ <p class="subtitle">
+ Five quick taps to discover the pattern that feels like home. Answer instinctively — your walls will thank you.
+ </p>
+ </div>
+
+ <div class="quiz-panel" aria-live="polite">
+ <div class="quiz-screen active" data-screen="1">
+ <div>
+ <div class="question-label">
+ Q1 &mdash; Mood
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">How do you want your space to feel?</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Opulent Calm</div>
+ </div>
+ <div class="answer-label">Timeless &amp; grand</div>
+ <div class="answer-meta">Candlelit dinners, heirloom silver, soft strings in the background.</div>
+ </button>
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Quiet Clarity</div>
+ </div>
+ <div class="answer-label">Clean &amp; composed</div>
+ <div class="answer-meta">Sunlight, negative space, one perfect chair and a good book.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Eclectic Joy</div>
+ </div>
+ <div class="answer-label">Playful &amp; collected</div>
+ <div class="answer-meta">Layered textiles, travel finds, and a story on every surface.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Evening Glam</div>
+ </div>
+ <div class="answer-label">Dramatic &amp; polished</div>
+ <div class="answer-meta">Velvet banquettes, champagne coupes, city lights at midnight.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Tap a tile to continue</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="2">
+ <div>
+ <div class="question-label">
+ Q2 &mdash; Architecture
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Which backdrop feels most like “home”?</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Gallery Walls</div>
+ </div>
+ <div class="answer-label">Airy loft</div>
+ <div class="answer-meta">Crisp lines, pale oak, hidden hardware, soft architectural light.</div>
+ </button>
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Townhouse</div>
+ </div>
+ <div class="answer-label">Historic brownstone</div>
+ <div class="answer-meta">Crown mouldings, marble mantels, and library-green doors.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Skyline Suite</div>
+ </div>
+ <div class="answer-label">City penthouse</div>
+ <div class="answer-meta">Metallic accents, skyline views, a bar cart always at the ready.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Artist Loft</div>
+ </div>
+ <div class="answer-label">Sun-drenched studio</div>
+ <div class="answer-meta">Plants, paint splatters, vintage rugs, and a curated chaos.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Follow your first instinct</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="3">
+ <div>
+ <div class="question-label">
+ Q3 &mdash; Pattern
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Choose the pattern energy that draws you in.</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Heritage</div>
+ </div>
+ <div class="answer-label">Ornate motifs</div>
+ <div class="answer-meta">Scrolling florals, medallions, and a whisper of old-world romance.</div>
+ </button>
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Precision</div>
+ </div>
+ <div class="answer-label">Linear &amp; graphic</div>
+ <div class="answer-meta">Architectural stripes, grids, and quiet tonal shifts.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Botanical</div>
+ </div>
+ <div class="answer-label">Botanical &amp; wild</div>
+ <div class="answer-meta">Overscale florals, palms, and a lush, layered jungle vibe.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Geometry</div>
+ </div>
+ <div class="answer-label">Geometric glamour</div>
+ <div class="answer-meta">Fans, arches, and sharp metallic repeats.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Imagine this wrapping an entire room</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="4">
+ <div>
+ <div class="question-label">
+ Q4 &mdash; Palette
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Which palette would you happily wake up to?</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Bone &amp; Ink</div>
+ </div>
+ <div class="answer-label">Soft neutrals</div>
+ <div class="answer-meta">Ivories, warm greys, and the gentlest hint of charcoal.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">Champagne</div>
+ </div>
+ <div class="answer-label">Noir &amp; metallic</div>
+ <div class="answer-meta">Inky blacks, molten metals, and candlelit warmth.</div>
+ </button>
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Antique Gold</div>
+ </div>
+ <div class="answer-label">Rich jewel tones</div>
+ <div class="answer-meta">Sapphire, garnet, and deep, velvety neutrals.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Sunset</div>
+ </div>
+ <div class="answer-label">Sun-soaked brights</div>
+ <div class="answer-meta">Terracotta, olive, ochre, and saturated, joyful color.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Trust your eye, not the trends</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen" data-screen="5">
+ <div>
+ <div class="question-label">
+ Q5 &mdash; Lifestyle
+ <div class="question-label-line"></div>
+ </div>
+ <div class="question-title">Your Friday night at home looks like&hellip;</div>
+ <div class="answers-grid">
+ <button class="answer-card" data-score="damask">
+ <div class="swatch">
+ <div class="swatch-inner pattern-damask"></div>
+ <div class="swatch-tag">Salon</div>
+ </div>
+ <div class="answer-label">Slow dinner party</div>
+ <div class="answer-meta">Linen tablecloths, candles, and a playlist that never ends.</div>
+ </button>
+ <button class="answer-card" data-score="minimal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-minimal"></div>
+ <div class="swatch-tag">Reset</div>
+ </div>
+ <div class="answer-label">Solo reset</div>
+ <div class="answer-meta">Fresh sheets, a face mask, and a perfectly plumped pillow.</div>
+ </button>
+ <button class="answer-card" data-score="maximal">
+ <div class="swatch">
+ <div class="swatch-inner pattern-maximal"></div>
+ <div class="swatch-tag">Gather</div>
+ </div>
+ <div class="answer-label">Friends &amp; laughter</div>
+ <div class="answer-meta">Board games, bold drinks, and playlists on shuffle.</div>
+ </button>
+ <button class="answer-card" data-score="deco">
+ <div class="swatch">
+ <div class="swatch-inner pattern-deco"></div>
+ <div class="swatch-tag">After Dark</div>
+ </div>
+ <div class="answer-label">Cocktail hour</div>
+ <div class="answer-meta">Shaken, not stirred, with a late-night movie queue.</div>
+ </button>
+ </div>
+ </div>
+ <div class="hint">
+ <div class="hint-line"></div>
+ <span>Last one &mdash; tap to see your style</span>
+ </div>
+ </div>
+
+ <div class="quiz-screen quiz-result" data-screen="result">
+ <div class="result-card result-style-minimal" id="resultCard">
+ <div class="result-badge-row">
+ <span class="ar-badge">1080 &times; 1080 &mdash; Save &amp; Share</span>
+ <span class="badge-style-tag">
+ <span class="badge-style-dot"></span>
+ <span id="resultShortLabel">Your Wallcovering DNA</span>
+ </span>
+ </div>
+ <div class="result-main">
+ <div class="result-pattern">
+ <div class="result-pattern-tag">Pattern Match</div>
+ <div class="result-pattern-inner">
+ <div class="pattern-minimal-lg" id="resultPattern"></div>
+ </div>
+ </div>
+ <div class="result-info">
+ <div>
+ <div class="result-type" id="resultCategory">Modern Minimalist</div>
+ <div class="result-title" id="resultTitle">Gallery-Quiet Walls</div>
+ <div class="result-line"></div>
+ <p class="result-description" id="resultDescription">
+ You’re drawn to calm, considered spaces where every line has purpose. Think tonal textures, subtle sheen, and patterns that reward a second look — never shouting, always softly framing your life.
+ </p>
+ <div class="result-tags" id="resultTags">
+ <span class="result-tag-chip">Soft contrast</span>
+ <span class="result-tag-chip">Architectural lines</span>
+ <span class="result-tag-chip">Museum-grade calm</span>
+ </div>
+ </div>
+ <div class="cta-row">
+ <button class="btn-primary" type="button" id="shopButton">Shop this style</button>
+ <div class="cta-note">
+ Tap &amp; hold to save, or tag us @MaisonAurelia to be featured.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <aside class="right-panel" aria-hidden="true">
+ <div class="result-card result-style-minimal">
+ <div class="result-badge-row">
+ <span class="ar-badge">Live Preview</span>
+ <span class="badge-style-tag">
+ <span class="badge-style-dot"></span>
+ Your style loading
+ </span>
+ </div>
+ <div class="result-main">
+ <div class="result-pattern">
+ <div class="result-pattern-tag">Wallcovering</div>
+ <div class="result-pattern-inner">
+ <div class="pattern-minimal-lg"></div>
+ </div>
+ </div>
+ <div class="result-info">
+ <div>
+ <div class="result-type">Signature Edit</div>
+ <div class="result-title">Curated for You</div>
+ <div class="result-line"></div>
+ <p class="result-description">
+ As you tap through, we’re building a palette of pattern, mood, and sheen. Your final match will reveal a bespoke wallcovering story &mdash; ready to shop in a single tap.
+ </p>
+ <div class="result-tags">
+ <span class="result-tag-chip">5 questions</span>
+ <span class="result-tag-chip">4 style houses</span>
+ <span class="result-tag-chip">1 signature look</span>
+ </div>
+ </div>
+ <div class="cta-row">
+ <button class="btn-primary" type="button">Begin</button>
+ <div class="cta-note">
+ Designed to fit perfectly inside your feed.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </aside>
+ </div>
+
+ <footer class="footer">
+ <div class="progress-rail">
+ <div class="progress-bar" id="progressBar"></div>
+ </div>
+ <div class="footer-meta">
+ <span class="footer-label">Swipe-worthy interiors</span>
+ <div class="footer-divider"></div>
+ <span class="footer-logo"><span>Maison</span> Aurelia</span>
+ </div>
+ </footer>
+ </div>
+ </div>
+</div>
+
+<script>
+(function() {
+ const TOTAL_QUESTIONS = 5;
+ const score = { damask: 0, minimal: 0, maximal: 0, deco: 0 };
+ let currentScreen = 1;
+
+ const screens = {};
+ document.querySelectorAll('.quiz-screen').forEach(el => {
+ const id = el.getAttribute('data-screen');
+ screens[id] = el;
+ });
+
+ const stepDots = Array.from(document.querySelectorAll('.steps-dot'));
+ const progressBar = document.getElementById('progressBar');
+ const resultCard = document.getElementById('resultCard');
+ const resultPattern = document.getElementById('resultPattern');
+ const resultCategory = document.getElementById('resultCategory');
+ const resultTitle = document.getElementById('resultTitle');
+ const resultDescription = document.getElementById('resultDescription');
+ const resultTags = document.getElementById('resultTags');
+ const resultShortLabel = document.getElementById('resultShortLabel');
+ const shopButton = document.getElementById('shopButton');
+
+ const resultConfig = {
+ damask: {
+ className: 'result-style-damask',
+ patternClass: 'pattern-damask-lg',
+ category: 'Traditional Damask',
+ title: 'Gilded Heritage Walls',
+ description:
+ 'You gravitate toward rooms with history and a hint of ceremony. Ornate damask motifs, antique-gold inks, and tactile embossing turn your walls into a modern-day manor — romantic, refined, and endlessly photogenic.',
+ tags: ['Chandelier-ready', 'Silk-inspired sheen', 'Heirloom details'],
+ shortLabel: 'Old World, New Mood'
+ },
+ minimal: {
+ className: 'result-style-minimal',
+ patternClass: 'pattern-minimal-lg',
+ category: 'Modern Minimalist',
+ title: 'Gallery-Quiet Walls',
+ description:
+ 'You breathe easiest in spaces that feel edited, intentional, and quietly luxurious. Understated patterning, tonal shifts, and architectural lines create a soft backdrop that makes everything else in the room shine.',
+ tags: ['Soft contrast', 'Architectural lines', 'Museum-grade calm'],
+ shortLabel: 'Quiet Luxury'
+ },
+ maximal: {
+ className: 'result-style-maximal',
+ patternClass: 'pattern-maximal-lg',
+ category: 'Bohemian Maximalist',
+ title: 'Collected Story Walls',
+ description:
+ 'You curate spaces like you collect memories — boldly, joyfully, and without apology. Lush botanicals, layered prints, and rich, sun-warmed color turn every wall into a passport stamp.',
+ tags: ['Pattern-on-pattern', 'Lush botanicals', 'Global eclectic'],
+ shortLabel: 'More Is More'
+ },
+ deco: {
+ className: 'result-style-deco',
+ patternClass: 'pattern-deco-lg',
+ category: 'Art Deco Glam',
+ title: 'Midnight Deco Walls',
+ description:
+ 'You live for a little drama. Think fan motifs, sharp geometrics, and metallic inks that catch the light just so. Your walls feel like the lobby of a grand hotel — always ready for the next cocktail hour.',
+ tags: ['Metallic accents', 'Geometric glamour', 'After-dark glow'],
+ shortLabel: 'Iconic Glamour'
+ }
+ };
+
+ function updateProgress() {
+ const ratio = Math.min(currentScreen, TOTAL_QUESTIONS) / TOTAL_QUESTIONS;
+ progressBar.style.transform = 'scaleX(' + ratio + ')';
+ stepDots.forEach((dot, index) => {
+ const fill = dot.querySelector('.steps-dot-fill');
+ if (index < currentScreen) {
+ dot.classList.add('active');
+ fill.style.transform = 'scaleY(1)';
+ } else {
+ dot.classList.remove('active');
+ fill.style.transform = 'scaleY(0)';
+ }
+ });
+ }
+
+ function showScreen(id) {
+ Object.values(screens).forEach(el => el.classList.remove('active'));
+ if (screens[id]) {
+ screens[id].classList.add('active');
+ }
+ }
+
+ function computeResult() {
+ const entries = Object.entries(score);
+ entries.sort((a, b) => b[1] - a[1]);
+ const top = entries[0][0] || 'minimal';
+ return top;
+ }
+
+ function renderResult() {
+ const styleKey = computeResult();
+ const cfg = resultConfig[styleKey] || resultConfig.minimal;
+
+ resultCard.classList.remove(
+ 'result-style-damask',
+ 'result-style-minimal',
+ 'result-style-maximal',
+ 'result-style-deco'
+ );
+ resultCard.classList.add(cfg.className);
+
+ resultPattern.className = cfg.patternClass;
+ resultCategory.textContent = cfg.category;
+ resultTitle.textContent = cfg.title;
+ resultDescription.textContent = cfg.description;
+ resultShortLabel.textContent = cfg.shortLabel;
+
+ resultTags.innerHTML = '';
+ cfg.tags.forEach(tag => {
+ const span = document.createElement('span');
+ span.className = 'result-tag-chip';
+ span.textContent = tag;
+ resultTags.appendChild(span);
+ });
+ }
+
+ function handleAnswerClick(e) {
+ const card = e.currentTarget;
+ const key = card.getAttribute('data-score');
+ if (!key) return;
+ if (score[key] != null) score[key] += 1;
+
+ if (currentScreen < TOTAL_QUESTIONS) {
+ currentScreen += 1;
+ showScreen(String(currentScreen));
+ updateProgress();
+ } else {
+ renderResult();
+ currentScreen = TOTAL_QUESTIONS;
+ updateProgress();
+ showScreen('result');
+ }
+ }
+
+ document.querySelectorAll('.answer-card').forEach(card => {
+ card.addEventListener('click', handleAnswerClick);
+ });
+
+ updateProgress();
+
+ if (shopButton) {
+ shopButton.addEventListener('click', function() {
+ alert('In a live experience, this button would take you directly to the curated wallcovering edit for your style.');
+ });
+ }
+})();
+</script>
+</body>
+</html>" title="Designer Wallcoverings — Find Your Style Quiz"></iframe></div>
+</body></html>
\ No newline at end of file
diff --git a/idea-run/.dw-brand-style-color-pointer b/idea-run/.dw-brand-style-color-pointer
index 0cfbf08..00750ed 100644
--- a/idea-run/.dw-brand-style-color-pointer
+++ b/idea-run/.dw-brand-style-color-pointer
@@ -1 +1 @@
-2
+3
← 0091c16 night-loop: cycle 00:49 — judged=d7f4f8ca5f8d · fired 1 →; F
·
back to Model Arena
·
auto-save: 2026-07-25T01:02:17 (6 files) — data/challenges.j b8c1f94 →