← back to Model Arena
night-loop: cycle 06:59 — judged=b0bfeedddee6 · fired 2 →; FIRED idx=2/16 id=d67ca64a7bfc title=Designer Wallcoverings — Color Story of the Month Carousel; FIRED idx=3/16 id=e1961bf42e98 title=Designer Wallcoverings — Guess the Style Game
15e383ca0f8144166a7f4209f899ff66a4046d67 · 2026-07-25 06:59:48 -0700 · Steve Abrams
Files touched
A data/artifacts/b0bfeedddee6/claude-code.htmlA data/artifacts/b0bfeedddee6/claude-code.pngA data/artifacts/b0bfeedddee6/gemma3-12b.htmlA data/artifacts/b0bfeedddee6/gemma3-12b.pngA data/artifacts/b0bfeedddee6/gpt.htmlA data/artifacts/b0bfeedddee6/gpt.pngA data/artifacts/b0bfeedddee6/grok.htmlA data/artifacts/b0bfeedddee6/grok.pngA data/artifacts/b0bfeedddee6/hermes3-8b.htmlA data/artifacts/b0bfeedddee6/hermes3-8b.pngA data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.htmlA data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.pngA data/artifacts/b0bfeedddee6/kimi.htmlA data/artifacts/b0bfeedddee6/kimi.pngA data/artifacts/b0bfeedddee6/qwen25-7b.htmlA data/artifacts/b0bfeedddee6/qwen25-7b.pngA data/artifacts/b0bfeedddee6/qwen3-14b.htmlA data/artifacts/b0bfeedddee6/qwen3-14b.pngA data/artifacts/e2ddb50bc672/claude-code.htmlA data/artifacts/e2ddb50bc672/claude-code.pngA data/artifacts/e2ddb50bc672/gemma3-12b.htmlA data/artifacts/e2ddb50bc672/gemma3-12b.pngA data/artifacts/e2ddb50bc672/gpt.htmlA data/artifacts/e2ddb50bc672/gpt.pngA data/artifacts/e2ddb50bc672/grok.htmlA data/artifacts/e2ddb50bc672/grok.pngA data/artifacts/e2ddb50bc672/hermes3-8b.htmlA data/artifacts/e2ddb50bc672/hermes3-8b.pngA data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.htmlA data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.pngA data/artifacts/e2ddb50bc672/kimi.htmlA data/artifacts/e2ddb50bc672/kimi.pngA data/artifacts/e2ddb50bc672/qwen25-7b.htmlA data/artifacts/e2ddb50bc672/qwen25-7b.pngA data/artifacts/e2ddb50bc672/qwen3-14b.htmlA data/artifacts/e2ddb50bc672/qwen3-14b.pngM data/challenges.jsonM data/costlog.jsonlM idea-run/.dw-brand-style-color-pointer
Diff
commit 15e383ca0f8144166a7f4209f899ff66a4046d67
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 06:59:48 2026 -0700
night-loop: cycle 06:59 — judged=b0bfeedddee6 · fired 2 →; FIRED idx=2/16 id=d67ca64a7bfc title=Designer Wallcoverings — Color Story of the Month Carousel; FIRED idx=3/16 id=e1961bf42e98 title=Designer Wallcoverings — Guess the Style Game
---
data/artifacts/b0bfeedddee6/claude-code.html | 461 +++++++
data/artifacts/b0bfeedddee6/claude-code.png | Bin 0 -> 152708 bytes
data/artifacts/b0bfeedddee6/gemma3-12b.html | 388 ++++++
data/artifacts/b0bfeedddee6/gemma3-12b.png | Bin 0 -> 57879 bytes
data/artifacts/b0bfeedddee6/gpt.html | 1369 +++++++++++++++++++
data/artifacts/b0bfeedddee6/gpt.png | Bin 0 -> 167650 bytes
data/artifacts/b0bfeedddee6/grok.html | 872 ++++++++++++
data/artifacts/b0bfeedddee6/grok.png | Bin 0 -> 39650 bytes
data/artifacts/b0bfeedddee6/hermes3-8b.html | 198 +++
data/artifacts/b0bfeedddee6/hermes3-8b.png | Bin 0 -> 9011 bytes
data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.html | 263 ++++
data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.png | Bin 0 -> 20005 bytes
data/artifacts/b0bfeedddee6/kimi.html | 534 ++++++++
data/artifacts/b0bfeedddee6/kimi.png | Bin 0 -> 44073 bytes
data/artifacts/b0bfeedddee6/qwen25-7b.html | 134 ++
data/artifacts/b0bfeedddee6/qwen25-7b.png | Bin 0 -> 14206 bytes
data/artifacts/b0bfeedddee6/qwen3-14b.html | 327 +++++
data/artifacts/b0bfeedddee6/qwen3-14b.png | Bin 0 -> 48367 bytes
data/artifacts/e2ddb50bc672/claude-code.html | 484 +++++++
data/artifacts/e2ddb50bc672/claude-code.png | Bin 0 -> 73884 bytes
data/artifacts/e2ddb50bc672/gemma3-12b.html | 227 ++++
data/artifacts/e2ddb50bc672/gemma3-12b.png | Bin 0 -> 27469 bytes
data/artifacts/e2ddb50bc672/gpt.html | 1406 ++++++++++++++++++++
data/artifacts/e2ddb50bc672/gpt.png | Bin 0 -> 213418 bytes
data/artifacts/e2ddb50bc672/grok.html | 1143 ++++++++++++++++
data/artifacts/e2ddb50bc672/grok.png | Bin 0 -> 67229 bytes
data/artifacts/e2ddb50bc672/hermes3-8b.html | 145 ++
data/artifacts/e2ddb50bc672/hermes3-8b.png | Bin 0 -> 18453 bytes
data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.html | 342 +++++
data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.png | Bin 0 -> 46564 bytes
data/artifacts/e2ddb50bc672/kimi.html | 930 +++++++++++++
data/artifacts/e2ddb50bc672/kimi.png | Bin 0 -> 34292 bytes
data/artifacts/e2ddb50bc672/qwen25-7b.html | 130 ++
data/artifacts/e2ddb50bc672/qwen25-7b.png | Bin 0 -> 18939 bytes
data/artifacts/e2ddb50bc672/qwen3-14b.html | 279 ++++
data/artifacts/e2ddb50bc672/qwen3-14b.png | Bin 0 -> 38045 bytes
data/challenges.json | 406 +++++-
data/costlog.jsonl | 6 +
idea-run/.dw-brand-style-color-pointer | 2 +-
39 files changed, 10012 insertions(+), 34 deletions(-)
diff --git a/data/artifacts/b0bfeedddee6/claude-code.html b/data/artifacts/b0bfeedddee6/claude-code.html
new file mode 100644
index 0000000..2743dfd
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/claude-code.html
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style? — Designer Wallcoverings</title>
+<style>
+:root{
+ --bg:#f4efe6;
+ --surface:#fbf8f2;
+ --surface-2:#f0e9db;
+ --ink:#1c1a17;
+ --ink-soft:#3d3830;
+ --muted:#9b948a;
+ --accent:#a67c34;
+ --accent-deep:#7d5f24;
+ --accent-light:#c9a24e;
+ --line:rgba(28,26,23,.14);
+ --line-strong:rgba(28,26,23,.28);
+ --shadow:0 8px 30px rgba(28,26,23,.10);
+ --shadow-hover:0 18px 50px rgba(28,26,23,.18);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%}
+body{
+ background:var(--bg);
+ color:var(--ink);
+ font-family:var(--sans);
+ -webkit-font-smoothing:antialiased;
+ line-height:1.5;
+ min-height:100%;
+ position:relative;
+ overflow-x:hidden;
+}
+body::before{
+ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
+ background:
+ radial-gradient(1100px 700px at 80% -10%, rgba(166,124,52,.10), transparent 60%),
+ radial-gradient(900px 600px at -10% 110%, rgba(166,124,52,.07), transparent 60%);
+}
+
+/* ---------- Header / wordmark ---------- */
+header.topbar{
+ position:fixed;top:0;left:0;right:0;z-index:20;
+ display:flex;align-items:center;justify-content:space-between;
+ padding:20px 32px;
+ background:rgba(244,239,230,.82);
+ backdrop-filter:saturate(120%) blur(10px);
+ border-bottom:1px solid var(--line);
+}
+.wordmark{
+ font-family:var(--serif);
+ color:var(--ink);
+ font-weight:600;
+ font-size:42px;
+ line-height:.95;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ white-space:normal;
+ max-width:300px;
+}
+.wordmark .l2{display:block;font-size:.5em;letter-spacing:.42em;color:var(--accent-deep);font-weight:500;margin-top:4px}
+.topbar .badge{
+ font-family:var(--sans);
+ font-size:11px;letter-spacing:.22em;text-transform:uppercase;
+ color:var(--muted);
+ border:1px solid var(--line);
+ padding:8px 14px;border-radius:40px;white-space:nowrap;
+}
+
+/* ---------- Layout ---------- */
+main{
+ position:relative;z-index:1;
+ max-width:1120px;margin:0 auto;
+ padding:150px 24px 80px;
+ min-height:100vh;
+}
+.eyebrow{
+ font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-deep);
+ font-weight:600;margin-bottom:22px;
+}
+@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+/* ---------- Intro ---------- */
+#intro{max-width:760px;margin:0 auto;text-align:center;animation:fadeUp .8s var(--ease) both}
+#intro h1{
+ font-family:var(--serif);font-weight:600;
+ font-size:clamp(48px,8vw,84px);line-height:1.02;letter-spacing:.5px;
+ margin-bottom:26px;
+}
+#intro h1 em{font-style:italic;color:var(--accent-deep)}
+#intro p.lead{font-size:21px;color:var(--ink-soft);max-width:560px;margin:0 auto 20px;font-weight:300}
+.rule{width:64px;height:1px;background:var(--line-strong);margin:36px auto}
+.mini-swatches{display:flex;gap:14px;justify-content:center;margin:40px auto 44px;flex-wrap:wrap}
+.mini-swatches .ms{width:74px;height:74px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
+
+/* ---------- Buttons ---------- */
+.btn{
+ font-family:var(--sans);
+ font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
+ padding:17px 40px;border-radius:40px;border:1px solid var(--ink);
+ background:var(--ink);color:var(--surface);cursor:pointer;
+ transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
+}
+.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);background:var(--accent-deep);border-color:var(--accent-deep)}
+.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
+.btn.ghost:hover{background:transparent;color:var(--accent-deep);border-color:var(--accent-deep)}
+.btn.gold{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
+.btn.gold:hover{background:var(--accent);border-color:var(--accent)}
+
+/* ---------- Quiz ---------- */
+#quiz{display:none}
+.q-head{text-align:center;margin-bottom:40px;animation:fadeUp .6s var(--ease) both}
+.q-count{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
+.q-title{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5vw,50px);line-height:1.08;letter-spacing:.4px}
+.progress{display:flex;gap:9px;justify-content:center;margin-top:26px}
+.progress .dot{width:34px;height:3px;border-radius:3px;background:var(--line);transition:background .4s var(--ease)}
+.progress .dot.done{background:var(--accent)}
+.progress .dot.active{background:var(--ink)}
+
+.tiles{
+ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;max-width:960px;margin:0 auto;
+}
+.tile{
+ background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
+ cursor:pointer;text-align:left;padding:0;
+ box-shadow:var(--shadow);
+ transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
+ animation:fadeUp .6s var(--ease) both;
+}
+.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
+.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
+.tile .swatch{height:150px;width:100%;display:block;border-bottom:1px solid var(--line)}
+.tile .body{padding:20px 22px 24px}
+.tile .name{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.15;margin-bottom:5px}
+.tile .cap{font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
+
+/* ---------- Signature swatch motifs ---------- */
+.sw-damask{
+ background-color:#efe6d3;
+ background-image:
+ radial-gradient(circle at 50% 0,transparent 66%,var(--accent) 67% 70%,transparent 71%),
+ radial-gradient(circle at 50% 100%,transparent 66%,var(--accent) 67% 70%,transparent 71%),
+ radial-gradient(circle at 0 50%,transparent 74%,var(--accent-deep) 75% 78%,transparent 79%),
+ radial-gradient(circle at 100% 50%,transparent 74%,var(--accent-deep) 75% 78%,transparent 79%),
+ radial-gradient(circle at 50% 50%,var(--accent-light) 0 8%,transparent 9%);
+ background-size:56px 56px;
+ background-position:0 0;
+}
+.sw-minimal{
+ background-color:#f7f3ec;
+ background-image:linear-gradient(90deg,transparent 0 calc(50% - .5px),var(--line-strong) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
+ repeating-linear-gradient(90deg,transparent 0 44px,rgba(28,26,23,.05) 44px 45px);
+}
+.sw-boho{
+ background-color:#e9dcc7;
+ background-image:
+ repeating-linear-gradient(45deg,rgba(176,71,46,.55) 0 12px,transparent 12px 24px),
+ repeating-linear-gradient(-45deg,rgba(47,76,57,.55) 0 12px,transparent 12px 24px),
+ repeating-linear-gradient(45deg,rgba(166,124,52,.5) 0 6px,transparent 6px 18px);
+ background-size:34px 34px,34px 34px,20px 20px;
+}
+.sw-deco{
+ background-color:#14241d;
+ background-image:
+ repeating-conic-gradient(from 0deg at 50% 118%,var(--accent-light) 0 3deg,transparent 3deg 9deg),
+ radial-gradient(circle at 50% 118%,rgba(201,162,78,.35) 0 30%,transparent 60%);
+}
+
+/* ---------- Result overlay ---------- */
+#result{
+ display:none;position:fixed;inset:0;z-index:60;
+ background:rgba(28,26,23,.68);backdrop-filter:blur(6px);
+ padding:24px 12px;overflow:auto;
+}
+#result.open{display:flex;flex-direction:column;align-items:center}
+.result-inner{animation:fadeUp .7s var(--ease) both;display:flex;flex-direction:column;align-items:center}
+.card-scaler{position:relative}
+.card-stage{
+ width:1080px;height:1080px;transform-origin:top center;
+ background:var(--surface);border-radius:6px;overflow:hidden;
+ box-shadow:0 40px 120px rgba(0,0,0,.5);
+ position:relative;
+}
+.card-stage .patternfill{position:absolute;inset:0}
+.card-stage .veil{
+ position:absolute;inset:0;
+ background:linear-gradient(180deg,rgba(251,248,242,.16) 0%,rgba(251,248,242,.9) 46%,rgba(251,248,242,.98) 100%);
+}
+.card-content{
+ position:absolute;inset:0;z-index:2;
+ display:flex;flex-direction:column;align-items:center;text-align:center;
+ padding:96px 110px;
+}
+.card-wm{font-family:var(--serif);color:var(--ink);font-size:34px;letter-spacing:.30em;text-transform:uppercase;font-weight:600}
+.card-wm .l2{display:block;font-size:.46em;letter-spacing:.5em;color:var(--accent-deep);margin-top:8px}
+.card-spacer{flex:1}
+.card-eyebrow{font-size:22px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:24px}
+.card-swatch{
+ width:210px;height:210px;border-radius:16px;border:2px solid rgba(28,26,23,.18);
+ box-shadow:0 20px 50px rgba(28,26,23,.22);margin-bottom:44px;
+}
+.card-title{font-family:var(--serif);font-weight:600;font-size:92px;line-height:1;letter-spacing:1px;margin-bottom:12px}
+.card-title em{font-style:italic;color:var(--accent-deep)}
+.card-rule{width:90px;height:2px;background:var(--accent);margin:30px auto 34px}
+.card-desc{font-size:30px;line-height:1.55;color:var(--ink-soft);max-width:760px;font-weight:300}
+.card-foot{font-size:20px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:46px}
+
+.result-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:30px}
+.share-hint{color:#e9e0d1;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-top:22px;text-align:center;opacity:.85}
+
+/* toast */
+#toast{
+ position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:90;
+ background:var(--ink);color:var(--surface);
+ font-size:12px;letter-spacing:.16em;text-transform:uppercase;
+ padding:14px 26px;border-radius:40px;box-shadow:var(--shadow-hover);
+ opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
+}
+#toast.show{opacity:1;transform:translate(-50%,0)}
+
+@media(max-width:560px){
+ header.topbar{padding:16px 20px}
+ .wordmark{font-size:34px;max-width:230px}
+ .topbar .badge{display:none}
+ main{padding:132px 18px 60px}
+}
+</style>
+</head>
+<body>
+
+<header class="topbar">
+ <div class="wordmark">Designer<span class="l2">Wallcoverings</span></div>
+ <div class="badge">Style Quiz</div>
+</header>
+
+<main>
+ <!-- INTRO -->
+ <section id="intro">
+ <div class="eyebrow">A Curated Design Discovery</div>
+ <h1>What's Your <em>Wallcovering</em> Style?</h1>
+ <p class="lead">Five quiet questions. One defining aesthetic. Discover the wallcovering language your rooms have been waiting for.</p>
+ <div class="mini-swatches" aria-hidden="true">
+ <div class="ms sw-damask"></div>
+ <div class="ms sw-minimal"></div>
+ <div class="ms sw-boho"></div>
+ <div class="ms sw-deco"></div>
+ </div>
+ <button class="btn" id="startBtn">Begin the Quiz</button>
+ </section>
+
+ <!-- QUIZ -->
+ <section id="quiz">
+ <div class="q-head">
+ <div class="q-count" id="qCount">Question 1 of 5</div>
+ <h2 class="q-title" id="qTitle"></h2>
+ <div class="progress" id="progress"></div>
+ </div>
+ <div class="tiles" id="tiles"></div>
+ </section>
+</main>
+
+<!-- RESULT OVERLAY -->
+<div id="result" role="dialog" aria-modal="true" aria-label="Your wallcovering style result">
+ <div class="result-inner">
+ <div class="card-scaler">
+ <div class="card-stage" id="cardStage">
+ <div class="patternfill" id="cardPattern"></div>
+ <div class="veil"></div>
+ <div class="card-content">
+ <div class="card-wm">Designer<span class="l2">Wallcoverings</span></div>
+ <div class="card-spacer"></div>
+ <div class="card-eyebrow">Your Style Is</div>
+ <div class="card-swatch" id="cardSwatch"></div>
+ <div class="card-title" id="cardTitle"></div>
+ <div class="card-rule"></div>
+ <div class="card-desc" id="cardDesc"></div>
+ <div class="card-spacer"></div>
+ <div class="card-foot">designerwallcoverings.com · #FindYourStyle</div>
+ </div>
+ </div>
+ </div>
+ <div class="result-actions">
+ <a class="btn gold" id="shopBtn" href="https://designerwallcoverings.com" target="_blank" rel="noopener noreferrer">Shop This Style</a>
+ <button class="btn ghost" id="retakeBtn">Retake Quiz</button>
+ </div>
+ <div class="share-hint">Screenshot to share your result on Instagram</div>
+ </div>
+</div>
+
+<div id="toast">Opening the collection…</div>
+
+<script>
+const STYLES={
+ damask:{
+ key:'damask',name:'Traditional Damask',title:'Traditional <em>Damask</em>',sw:'sw-damask',
+ desc:"You gravitate to heritage and grandeur — ogee scrolls, gilded detail, and rooms that feel as though they were always meant to be beautiful. Rich, symmetrical, quietly opulent."
+ },
+ minimal:{
+ key:'minimal',name:'Modern Minimalist',title:'Modern <em>Minimalist</em>',sw:'sw-minimal',
+ desc:"Restraint is your luxury. Clean lines, tonal calm, and a single perfect gesture. Your spaces breathe — nothing extra, nothing missing, everything considered."
+ },
+ boho:{
+ key:'boho',name:'Bohemian Maximalist',title:'Bohemian <em>Maximalist</em>',sw:'sw-boho',
+ desc:"You collect beauty fearlessly — colour upon colour, pattern upon pattern. Warm, worldly, and gloriously personal, your rooms tell the story of a life well travelled."
+ },
+ deco:{
+ key:'deco',name:'Art Deco Glam',title:'Art Deco <em>Glam</em>',sw:'sw-deco',
+ desc:"Drama, symmetry, and shine. Sunbursts, brass, and jewel tones — you love a room that makes an entrance. Bold geometry and unapologetic glamour, poured like a cocktail."
+ }
+};
+
+const QUESTIONS=[
+ { q:"Your dream room feels…",
+ opts:[
+ {s:'damask', sw:'sw-damask', name:'Timeless & Regal', cap:'Heritage grandeur'},
+ {s:'minimal',sw:'sw-minimal',name:'Calm & Uncluttered',cap:'Quiet negative space'},
+ {s:'boho', sw:'sw-boho', name:'Layered & Collected',cap:'Worldly warmth'},
+ {s:'deco', sw:'sw-deco', name:'Glamorous & Bold', cap:'A room that dazzles'}
+ ]},
+ { q:"Choose a palette",
+ opts:[
+ {s:'damask', sw:'sw-damask', name:'Ivory & Antique Gold',cap:'Gilded neutrals'},
+ {s:'minimal',sw:'sw-minimal',name:'Greige & Soft White', cap:'Tonal & serene'},
+ {s:'boho', sw:'sw-boho', name:'Terracotta & Teal', cap:'Sun-warmed spice'},
+ {s:'deco', sw:'sw-deco', name:'Emerald, Black & Brass',cap:'Jewel-box drama'}
+ ]},
+ { q:"A pattern catches your eye",
+ opts:[
+ {s:'damask', sw:'sw-damask', name:'Ornate Ogee Scrollwork',cap:'Symmetrical & rich'},
+ {s:'minimal',sw:'sw-minimal',name:'A Single Quiet Line', cap:'One clean gesture'},
+ {s:'boho', sw:'sw-boho', name:'A Kaleidoscope of Motifs',cap:'More is more'},
+ {s:'deco', sw:'sw-deco', name:'Fanned Sunburst Rays', cap:'Geometric radiance'}
+ ]},
+ { q:"Your ideal evening",
+ opts:[
+ {s:'damask', sw:'sw-damask', name:'A Candlelit Dinner Party',cap:'Old-world hosting'},
+ {s:'minimal',sw:'sw-minimal',name:'A Quiet Night & Good Book',cap:'Considered stillness'},
+ {s:'boho', sw:'sw-boho', name:'Music, Friends, No Plan',cap:'Free-spirited'},
+ {s:'deco', sw:'sw-deco', name:'Cocktails at a Jazz Bar',cap:'Glittering nightlife'}
+ ]},
+ { q:"Pick a finishing touch",
+ opts:[
+ {s:'damask', sw:'sw-damask', name:'Gilded Framed Portraits',cap:'Layered legacy'},
+ {s:'minimal',sw:'sw-minimal',name:'One Sculptural Vase', cap:'Editing as art'},
+ {s:'boho', sw:'sw-boho', name:'Vintage Rugs & Plants', cap:'Living texture'},
+ {s:'deco', sw:'sw-deco', name:'Mirrored & Lacquer Accents',cap:'High-shine polish'}
+ ]}
+];
+
+let current=0;
+let scores={damask:0,minimal:0,boho:0,deco:0};
+
+const intro=document.getElementById('intro');
+const quiz=document.getElementById('quiz');
+const tilesEl=document.getElementById('tiles');
+const qTitle=document.getElementById('qTitle');
+const qCount=document.getElementById('qCount');
+const progressEl=document.getElementById('progress');
+
+function buildProgress(){
+ progressEl.innerHTML='';
+ QUESTIONS.forEach((_,i)=>{
+ const d=document.createElement('div');
+ d.className='dot'+(i<current?' done':i===current?' active':'');
+ progressEl.appendChild(d);
+ });
+}
+
+function renderQuestion(){
+ const Q=QUESTIONS[current];
+ qCount.textContent=`Question ${current+1} of ${QUESTIONS.length}`;
+ qTitle.textContent=Q.q;
+ buildProgress();
+ tilesEl.innerHTML='';
+ Q.opts.forEach((o,i)=>{
+ const t=document.createElement('button');
+ t.className='tile';
+ t.style.animationDelay=(i*90)+'ms';
+ t.setAttribute('aria-label',o.name);
+ t.innerHTML=`<span class="swatch ${o.sw}"></span>
+ <span class="body"><span class="name">${o.name}</span><span class="cap">${o.cap}</span></span>`;
+ t.addEventListener('click',()=>choose(o.s));
+ tilesEl.appendChild(t);
+ });
+}
+
+function choose(styleKey){
+ scores[styleKey]++;
+ current++;
+ if(current<QUESTIONS.length){
+ renderQuestion();
+ window.scrollTo({top:0,behavior:'smooth'});
+ }else{
+ showResult();
+ }
+}
+
+function winner(){
+ // tie-break by question order preference
+ const order=['damask','minimal','boho','deco'];
+ let best=order[0];
+ order.forEach(k=>{ if(scores[k]>scores[best]) best=k; });
+ return STYLES[best];
+}
+
+function showResult(){
+ const w=winner();
+ document.getElementById('cardTitle').innerHTML=w.title;
+ document.getElementById('cardDesc').textContent=w.desc;
+ document.getElementById('cardPattern').className='patternfill '+w.sw;
+ document.getElementById('cardSwatch').className='card-swatch '+w.sw;
+ const res=document.getElementById('result');
+ res.classList.add('open');
+ document.body.style.overflow='hidden';
+ requestAnimationFrame(scaleCard);
+}
+
+function scaleCard(){
+ const stage=document.getElementById('cardStage');
+ const scaler=stage.parentElement;
+ const availW=Math.min(window.innerWidth*0.94,620);
+ const availH=window.innerHeight*0.72;
+ const scale=Math.min(availW/1080,availH/1080);
+ stage.style.transform='scale('+scale+')';
+ scaler.style.width=(1080*scale)+'px';
+ scaler.style.height=(1080*scale)+'px';
+}
+window.addEventListener('resize',()=>{
+ if(document.getElementById('result').classList.contains('open')) scaleCard();
+});
+
+function reset(){
+ current=0;scores={damask:0,minimal:0,boho:0,deco:0};
+ document.getElementById('result').classList.remove('open');
+ document.body.style.overflow='';
+ quiz.style.display='none';
+ intro.style.display='block';
+ window.scrollTo({top:0,behavior:'smooth'});
+}
+
+document.getElementById('startBtn').addEventListener('click',()=>{
+ intro.style.display='none';
+ quiz.style.display='block';
+ current=0;scores={damask:0,minimal:0,boho:0,deco:0};
+ renderQuestion();
+ window.scrollTo({top:0,behavior:'smooth'});
+});
+document.getElementById('retakeBtn').addEventListener('click',reset);
+
+const toast=document.getElementById('toast');
+document.getElementById('shopBtn').addEventListener('click',()=>{
+ toast.classList.add('show');
+ setTimeout(()=>toast.classList.remove('show'),1800);
+});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/claude-code.png b/data/artifacts/b0bfeedddee6/claude-code.png
new file mode 100644
index 0000000..6fe3047
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/claude-code.png differ
diff --git a/data/artifacts/b0bfeedddee6/gemma3-12b.html b/data/artifacts/b0bfeedddee6/gemma3-12b.html
new file mode 100644
index 0000000..74bb894
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/gemma3-12b.html
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>What's Your Wallcovering Style?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #3a2c22;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #ddd;
+ --shadow: rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ body {
+ font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ header {
+ background-color: var(--surface);
+ padding: 24px;
+ text-align: left;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 67px; /* Increased font size */
+ letter-spacing: .18em;
+ color: var(--text);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1000; /* Ensure it stays on top */
+ }
+
+ section {
+ padding: 96px;
+ }
+
+ h1 {
+ font-size: 50px;
+ text-align: center;
+ margin-bottom: 48px;
+ }
+
+ .question-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .answer-tiles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ margin-top: 32px;
+ width: 100%;
+ }
+
+ .answer-tile {
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 24px;
+ box-shadow: 0 8px 24px var(--shadow);
+ transition: box-shadow .3s ease, transform .3s ease;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .answer-tile:hover {
+ box-shadow: 0 16px 48px var(--shadow);
+ transform: translateY(-5px);
+ }
+
+ .pattern-svg {
+ width: 80%;
+ height: auto;
+ }
+ /* Pattern SVG definitions */
+ .damask-pattern svg {
+ mask: url(#damask-gradient) ;
+ display: block; /* Important for masking */
+ }
+
+ .minimalist-pattern svg {
+ mask: url(#minimalist-gradient);
+ display: block;
+ }
+
+ .bohemian-pattern svg{
+ mask: url(#bohemian-gradient);
+ display:block;
+ }
+
+ .artdeco-pattern svg {
+ mask: url(#artdeco-gradient);
+ display: block;
+ }
+
+
+ /* Result Card */
+ .result-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 48px;
+ box-shadow: 0 8px 24px var(--shadow);
+ text-align: center;
+ margin-top: 64px;
+ }
+
+ .result-card h2 {
+ font-size: 38px;
+ margin-bottom: 16px;
+ }
+
+ .style-description {
+ margin-bottom: 32px;
+ }
+
+ .pattern-swatch {
+ width: 200px;
+ height: 200px;
+ background-color: var(--accent); /* Default, will be masked */
+ border-radius: 50%;
+ margin: 0 auto;
+ display: block;
+ }
+
+ .shop-button {
+ background-color: var(--accent);
+ color: #fff;
+ padding: 12px 24px;
+ border: none;
+ border-radius: 8px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ cursor: pointer;
+ margin-top: 32px;
+ }
+
+ /*Overlay*/
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ }
+
+ /*SVG Definitions*/
+ defs {
+ display: none;
+ }
+
+ #damask-gradient{
+ patternUnits : userSpaceOnUse;
+ patternKey : damask_pattern;
+ fill: url(#damask-grad); /* Reference the gradient */
+ }
+
+ #minimalist-gradient{
+ patternUnits : userSpaceOnUse;
+ patternKey : minimalist_pattern;
+ fill:url(#minimalist-grad) ;
+ }
+
+ #bohemian-gradient {
+ patternUnits:userSpaceOnUse;
+ patternKey: bohemian_pattern;
+ fill:url(#bohemian_grad);
+
+ }
+
+ #artdeco-gradient{
+ patternUnits : userSpaceOnUse;
+ patternKey : artdeco_pattern;
+ fill: url(#artdeco_grad) ;
+ }
+
+
+ </style>
+</head>
+<body>
+
+ <header>DESIGNER WALLCOVERINGS</header>
+
+ <section>
+ <h1>What's Your Wallcovering Style?</h1>
+ <div class="question-container" id="question1">
+ <h2>Question 1: What’s your ideal Sunday morning like?</h2>
+ <div class="answer-tiles">
+ <div class="answer-tile" data-style="traditional">Sleeping in, then a leisurely brunch.</div>
+ <div class="answer-tile" data-style="modern">Yoga and a green smoothie on the balcony.</div>
+ <div class="answer-tile" data-style="bohemian">Wandering through a flea market with coffee.</div>
+ <div class="answer-tile" data-style="artdeco">A mimosa and jazz music in a sunroom.</div>
+ </div>
+ </div>
+
+ <div class="question-container" id="question2" style="display:none;">
+ <h2>Question 2: Which color palette makes you feel most at peace?</h2>
+ <div class="answer-tiles">
+ <div class="answer-tile" data-style="traditional">Deep reds and golds.</div>
+ <div class="answer-tile" data-style="modern">Cool grays and whites.</div>
+ <div class="answer-tile" data-style="bohemian">Warm earth tones and jewel blues.</div>
+ <div class="answer-tile" data-style="artdeco">Emerald green and black with silver accents.</div>
+ </div>
+ </div>
+
+ <div class="question-container" id="question3" style="display:none;">
+ <h2>Question 3: Your living room is…</h2>
+ <div class="answer-tiles">
+ <div class="answer-tile" data-style="traditional">Filled with antique furniture and family heirlooms.</div>
+ <div class="answer-tile" data-style="modern">Clean, uncluttered, and functional.</div>
+ <div class="answer-tile" data-style="bohemian">A cozy haven overflowing with textiles and treasures.</div>
+ <div class="answer-tile" data-style="artdeco">Glamorous with geometric patterns and metallic finishes.</div>
+ </div>
+ </div>
+
+ <div class="question-container" id="question4" style="display:none;">
+ <h2>Question 4: Describe your ideal vacation</h2>
+ <div class="answer-tiles">
+ <div class="answer-tile" data-style="traditional">Exploring historic castles in Europe.</div>
+ <div class="answer-tile" data-style="modern">A minimalist retreat to a Scandinavian design hotel.</div>
+ <div class="answer-tile" data-style="bohemian">Backpacking through Southeast Asia.</div>
+ <div class="answer-tile" data-style="artdeco">A luxurious cruise on the Mediterranean. </div>
+ </div>
+
+ </div>
+
+ <div class="question-container" id="question5" style="display:none;">
+ <h2>Question 5: What's your favorite texture?</h2>
+ <div class="answer-tiles">
+ <div class="answer-tile" data-style="traditional">Velvet.</div>
+ <div class="answer-tile" data-style="modern">Concrete.</div>
+ <div class="answer-tile" data-style="bohemian">Macrame.</div>
+ <div class="answer-tile" data-style="artdeco">Lacquered wood.</div>
+ </div>
+ </div>
+
+ </section>
+
+
+
+ <!-- SVG Definitions -->
+ <svg width="0" height="0">
+ <defs>
+ <radialGradient id="damask-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+ <stop offset="0%" stopColor="#c9a961"/>
+ <stop offset="100%" stopColor="#7d6a45"/>
+ </radialGradient>
+
+ <radialGradient id="minimalist-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+ <stop offset="0%" stopColor="#faf8f4"/>
+ <stop offset="100%" stopColor="#ffffff"/>
+ </radialGradient>
+
+ <radialGradient id="bohemian_grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+ <stop offset="0%" stopColor="#b0472e"/>
+ <stop offset="100%" stopColor="#2f4c39"/>
+ </radialGradient>
+
+ <radialGradient id="artdeco_grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+ <stop offset="0%" stopColor="#ff2e88"/>
+ <stop offset="100%" stopColor="#00e5ff"/>
+ </radialGradient>
+
+ <!-- Damask Pattern -->
+ <pattern id="damask-pattern" width="100" height="100" patternUnits="userSpaceOnUse">
+ <path d="M 0,0 L 100,0 L 50,50 L 0,100 Z" fill="#c9a961"/>
+ </pattern>
+
+ <!-- Minimalist Pattern -->
+ <pattern id="minimalist-pattern" width="20" height="20" patternUnits="userSpaceOnUse">
+ <line x1="0" y1="0" x2="20" y2="20" stroke="#ddd"/>
+ </pattern>
+
+ <!-- Bohemian Pattern -->
+ <pattern id="bohemian_pattern" width="30" height="30" patternUnits="userSpaceOnUse">
+ <circle cx="15" cy="15" r="10" fill="#b0472e"/>
+ </pattern>
+
+ <!-- Art Deco Pattern -->
+ <pattern id="artdeco-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
+ <rect x="0" y="0" width="40" height="40" fill="#ff2e88"/>
+ </pattern>
+
+ </defs>
+ </svg>
+
+
+ <div id="resultOverlay" class="overlay" style="display:none;">
+ <div class="result-card">
+ <h2>Your Style is...</h2>
+ <div class="style-description"></div>
+ <div class="pattern-swatch"></div>
+ <a href="#" class="shop-button uppercase tracked">Shop this style</a>
+ </div>
+ </div>
+
+ <script>
+ const questions = document.querySelectorAll('.question-container');
+ const answerTiles = document.querySelectorAll('.answer-tile');
+ let currentQuestion = 1;
+ let score = {};
+ let resultOverlay = document.getElementById('resultOverlay');
+
+
+ function showNextQuestion() {
+ questions.forEach((q, i) => {
+ if (i === currentQuestion - 1) {
+ q.style.display = 'flex';
+ } else {
+ q.style.display = 'none';
+ }
+ });
+ }
+
+ showNextQuestion();
+
+ answerTiles.forEach(tile => {
+ tile.addEventListener('click', () => {
+ const style = tile.dataset.style;
+ score[style] = (score[style] || 0) + 1;
+ currentQuestion++;
+ if (currentQuestion <= questions.length) {
+ showNextQuestion();
+ } else {
+ calculateResult();
+ }
+ });
+ });
+
+ function calculateResult() {
+ let winningStyle = '';
+ let highestScore = 0;
+
+ for (const style in score) {
+ if (score[style] > highestScore) {
+ highestScore = score[style];
+ winningStyle = style;
+ }
+ }
+
+
+ switch (winningStyle) {
+ case 'traditional':
+ resultOverlay.querySelector('.style-description').textContent = "Embrace timeless elegance with rich textures and classic motifs.";
+ resultOverlay.querySelector('.pattern-swatch').style.backgroundImage = `url("data:image/svg+xml,<svg width='200' height='200'><defs><pattern id='damask-pattern' patternUnits='userSpaceOnUse' width='100' height='100'><path d='M 0,0 L 100,0 L 50,50 L 0,100 Z' fill='#c9a961'/></pattern></defs><rect width='200' height='200' fill='url(#damask-pattern)'/></svg>")`;
+ break;
+ case 'modern':
+ resultOverlay.querySelector('.style-description').textContent = "Minimalism meets sophistication with clean lines and a neutral palette.";
+ resultOverlay.querySelector('.pattern-swatch').style.backgroundImage = `url("data:image/svg+xml,<svg width='200' height='200'><defs><pattern id='minimalist-pattern' patternUnits='userSpaceOnUse' width='20' height='20'><line x1='0' y1='0' x2='20' y2='20' stroke='#ddd'/></pattern></defs><rect width='200' height='200' fill='url(#minimalist-pattern)'/></svg>")`;
+ break;
+ case 'bohemian':
+ resultOverlay.querySelector('.style-description').textContent = "Create a vibrant and eclectic space with layered textures and global influences.";
+ resultOverlay.querySelector('.pattern-swatch').style.backgroundImage = `url("data:image/svg+xml,<svg width='200' height='200'><defs><pattern id='bohemian_pattern' patternUnits='userSpaceOnUse' width='30' height='30'><circle cx='15' cy='15' r='10' fill='#b0472e'/></pattern></defs><rect width='200' height='200' fill='url(#bohemian_pattern)'/></svg>")`;
+ break;
+ case 'artdeco':
+ resultOverlay.querySelector('.style-description').textContent = "Indulge in glamour and opulence with geometric patterns and luxurious details.";
+ resultOverlay.querySelector('.pattern-swatch').style.backgroundImage = `url("data:image/svg+xml,<svg width='200' height='200'><defs><pattern id='artdeco-pattern' patternUnits='userSpaceOnUse' width='40' height='40'><rect x='0' y='0' width='40' height='40' fill='#ff2e88'/></pattern></defs><rect width='200' height='200' fill='url(#artdeco-pattern)'/></svg>")`;
+ break;
+
+ }
+
+
+ resultOverlay.style.display = 'flex';
+ }
+
+
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/gemma3-12b.png b/data/artifacts/b0bfeedddee6/gemma3-12b.png
new file mode 100644
index 0000000..9cdb940
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/gemma3-12b.png differ
diff --git a/data/artifacts/b0bfeedddee6/gpt.html b/data/artifacts/b0bfeedddee6/gpt.html
new file mode 100644
index 0000000..e69dacc
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/gpt.html
@@ -0,0 +1,1369 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Designer Wallcoverings – Style Quiz</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<style>
+:root {
+ /* design tokens */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #1f2026;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961; /* metallic gold */
+ --accent-soft: #7d6a45;
+ --line: rgba(245, 242, 234, 0.12);
+ --line-strong: rgba(245, 242, 234, 0.32);
+ --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.7);
+ --shadow-subtle: 0 8px 30px rgba(0, 0, 0, 0.45);
+ --radius-card: 24px;
+ --radius-pill: 999px;
+ --ease-swift: cubic-bezier(.22,.9,.24,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --duration-fast: 160ms;
+ --duration-med: 260ms;
+ --duration-slow: 480ms;
+
+ --font-display: "Playfair Display", "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
+ --font-body: "Avenir Next", "Century Gothic", Futura, "Segoe UI", system-ui, sans-serif;
+
+ --fs-caption: 12px;
+ --fs-label: 12px;
+ --fs-body: 16px;
+ --fs-lead: 21px;
+ --fs-h3: 28px;
+ --fs-h2: 38px;
+ --fs-h1: 50px;
+
+ --quiz-width: min(1080px, 100vw);
+ --quiz-height: min(1080px, 100vh - 80px);
+}
+
+/* MOTION KEYFRAMES */
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+@keyframes scaleIn {
+ from { opacity: 0; transform: scale(.92); }
+ to { opacity: 1; transform: scale(1); }
+}
+@keyframes blurIn {
+ from { opacity: 0; filter: blur(12px); }
+ to { opacity: 1; filter: blur(0); }
+}
+
+/* base reset */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top, #15151b 0, var(--bg) 55%, #050507 100%);
+ color: var(--text);
+ font-family: var(--font-body);
+ -webkit-font-smoothing: antialiased;
+}
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* HEADER / WORDMARK */
+.app-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 72px;
+ padding: 14px 24px 10px;
+ background: linear-gradient(to bottom, rgba(13,13,15,0.96), rgba(13,13,15,0.9));
+ border-bottom: 1px solid rgba(201,169,97,0.28);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ z-index: 10;
+ backdrop-filter: blur(20px);
+}
+.wordmark {
+ font-family: var(--font-display);
+ font-size: 40px;
+ line-height: 1.04;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ white-space: normal;
+ max-width: 280px;
+}
+.header-meta {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+.meta-label {
+ font-size: var(--fs-label);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.progress-dots {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+.progress-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 999px;
+ background: rgba(245,242,234,0.16);
+ border: 1px solid rgba(245,242,234,0.2);
+ transition: all var(--duration-fast) var(--ease-swift);
+}
+.progress-dot.is-active {
+ width: 18px;
+ background: var(--accent);
+ border-color: rgba(0,0,0,0.2);
+}
+
+/* APP SHELL */
+.app-shell {
+ padding-top: 80px;
+ padding-bottom: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.quiz-frame {
+ width: var(--quiz-width);
+ height: var(--quiz-height);
+ max-width: 1080px;
+ max-height: 1080px;
+ margin: 0 auto;
+ border-radius: 32px;
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.18), transparent 55%),
+ radial-gradient(circle at bottom right, rgba(125,106,69,0.3), transparent 55%),
+ var(--surface);
+ box-shadow: var(--shadow-soft);
+ border: 1px solid rgba(245,242,234,0.08);
+ overflow: hidden;
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ position: relative;
+}
+
+/* CONTENT LAYOUT */
+.quiz-inner {
+ display: grid;
+ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+ gap: 1px;
+ width: 100%;
+ height: 100%;
+}
+@media (max-width: 900px) {
+ .quiz-inner {
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto auto;
+ }
+}
+.panel {
+ padding: 40px 40px 36px;
+}
+@media (max-width: 600px) {
+ .panel {
+ padding: 28px 20px 24px;
+ }
+}
+.panel-primary {
+ background: radial-gradient(circle at top, rgba(245,242,234,0.03), transparent 65%), var(--surface);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.panel-secondary {
+ background:
+ linear-gradient(135deg, rgba(23,23,28,1) 0, rgba(12,12,16,1) 100%);
+ border-left: 1px solid rgba(245,242,234,0.06);
+ display: flex;
+ flex-direction: column;
+}
+@media (max-width: 900px) {
+ .panel-secondary {
+ border-left: none;
+ border-top: 1px solid rgba(245,242,234,0.06);
+ }
+}
+
+/* INTRO / QUESTION */
+.eyebrow {
+ font-family: var(--font-body);
+ font-size: var(--fs-label);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 14px;
+}
+.quiz-title {
+ font-family: var(--font-display);
+ font-size: var(--fs-h1);
+ line-height: 1.05;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ margin: 0 0 18px;
+}
+.quiz-subtitle {
+ font-size: var(--fs-lead);
+ line-height: 1.35;
+ color: rgba(245,242,234,0.82);
+ max-width: 38ch;
+ margin-bottom: 28px;
+}
+.question-meta {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 20px;
+}
+.question-counter {
+ font-size: var(--fs-caption);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.question-text {
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ line-height: 1.12;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+ margin: 0;
+}
+
+/* ANSWER GRID */
+.answer-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 18px;
+}
+@media (max-width: 600px) {
+ .answer-grid {
+ gap: 12px;
+ }
+}
+.answer-tile {
+ position: relative;
+ border-radius: 20px;
+ padding: 0;
+ border: 1px solid var(--line);
+ background: radial-gradient(circle at top left, rgba(245,242,234,0.08), transparent 60%), rgba(13,13,15,0.85);
+ overflow: hidden;
+ min-height: 150px;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ transition: transform var(--duration-med) var(--ease-swift),
+ box-shadow var(--duration-med) var(--ease-swift),
+ border-color var(--duration-med) var(--ease-swift),
+ background var(--duration-med) var(--ease-swift);
+ box-shadow: 0 0 0 rgba(0,0,0,0);
+}
+.answer-tile::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ mix-blend-mode: screen;
+ opacity: 0;
+ transition: opacity var(--duration-med) var(--ease-swift);
+ background: radial-gradient(circle at 20% 0, rgba(201,169,97,0.7), transparent 55%);
+}
+.answer-tile:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-subtle);
+ border-color: var(--line-strong);
+}
+.answer-tile:hover::before {
+ opacity: 0.55;
+}
+.answer-tile-label {
+ position: relative;
+ padding: 14px 16px 16px;
+ background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.32));
+ backdrop-filter: blur(12px);
+ border-top: 1px solid rgba(245,242,234,0.08);
+}
+.answer-title {
+ font-size: var(--fs-body);
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+.answer-caption {
+ margin-top: 4px;
+ font-size: var(--fs-caption);
+ color: rgba(245,242,234,0.76);
+}
+
+/* PATTERN SWATCHES - ANSWERS (CSS only) */
+.swatch {
+ position: absolute;
+ inset: 0;
+}
+
+/* Swatch styles per answer id */
+/* Q1 - Room mood */
+.swatch-q1-a {
+ background:
+ radial-gradient(circle at 20% 0%, rgba(201,169,97,0.45), transparent 60%),
+ linear-gradient(135deg, #22222a 0, #101018 50%, #08080d 100%);
+}
+.swatch-q1-b {
+ background:
+ repeating-linear-gradient(135deg, #1a1a20 0, #1a1a20 4px, #101016 4px, #101016 8px),
+ radial-gradient(circle at 80% 100%, rgba(201,169,97,0.18), transparent 60%);
+}
+.swatch-q1-c {
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.55), transparent 55%),
+ repeating-radial-gradient(circle at 30% 80%, rgba(245,242,234,0.14) 0, rgba(245,242,234,0.14) 10px, transparent 10px, transparent 20px),
+ linear-gradient(135deg, #3e2930, #180d1a 60%, #09050a 100%);
+}
+.swatch-q1-d {
+ background:
+ radial-gradient(circle at 15% 15%, rgba(201,169,97,0.7), transparent 55%),
+ repeating-linear-gradient(135deg, #201824 0, #201824 14px, #08050a 14px, #08050a 28px);
+}
+
+/* Q2 - Pattern preference */
+.swatch-q2-a {
+ background:
+ linear-gradient(135deg, #1a1a22 0, #0c0c12 60%),
+ radial-gradient(circle at 20% 20%, rgba(201,169,97,0.4), transparent 55%);
+}
+.swatch-q2-a::before,
+.swatch-q2-a::after {
+ content: "";
+ position: absolute;
+ inset: 16%;
+ border-radius: 18px;
+ border: 1px solid rgba(245,242,234,0.18);
+}
+.swatch-q2-a::after {
+ inset: 32%;
+}
+.swatch-q2-b {
+ background:
+ linear-gradient(135deg, #2a2721 0, #120f0b 60%),
+ repeating-radial-gradient(circle at 10% 0, rgba(201,169,97,0.8) 0, rgba(201,169,97,0.8) 10px, transparent 10px, transparent 20px);
+ background-blend-mode: screen;
+}
+.swatch-q2-c {
+ background:
+ linear-gradient(135deg, #2b233b 0, #110919 60%),
+ repeating-linear-gradient(45deg, rgba(245,242,234,0.18) 0, rgba(245,242,234,0.18) 3px, transparent 3px, transparent 10px),
+ repeating-linear-gradient(-45deg, rgba(201,169,97,0.4) 0, rgba(201,169,97,0.4) 2px, transparent 2px, transparent 12px);
+}
+.swatch-q2-d {
+ background:
+ linear-gradient(135deg, #221820 0, #0b050b 60%),
+ repeating-linear-gradient(90deg, rgba(201,169,97,0.3) 0, rgba(201,169,97,0.3) 1px, transparent 1px, transparent 8px);
+ background-size: cover;
+}
+
+/* Q3 - Palette */
+.swatch-q3-a {
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.6), transparent 55%),
+ linear-gradient(135deg, #42302e, #231916 40%, #0b0807 100%);
+}
+.swatch-q3-b {
+ background:
+ linear-gradient(135deg, #25252c 0, #101018 60%),
+ radial-gradient(circle at 80% 0, rgba(201,169,97,0.28), transparent 55%);
+}
+.swatch-q3-c {
+ background:
+ radial-gradient(circle at 10% 90%, rgba(201,169,97,0.75), transparent 55%),
+ linear-gradient(135deg, #3e303b 0, #1b111e 40%, #060308 100%);
+}
+.swatch-q3-d {
+ background:
+ radial-gradient(circle at 0 60%, rgba(201,169,97,0.4), transparent 55%),
+ radial-gradient(circle at 100% 0, rgba(201,169,97,0.75), transparent 55%),
+ linear-gradient(135deg, #353336 0, #101015 60%);
+}
+
+/* Q4 - Texture */
+.swatch-q4-a {
+ background:
+ linear-gradient(135deg, #2b2219 0, #120d09 60%),
+ repeating-linear-gradient(135deg, rgba(201,169,97,0.55) 0, rgba(201,169,97,0.55) 2px, transparent 2px, transparent 7px);
+}
+.swatch-q4-b {
+ background:
+ repeating-linear-gradient(0deg, rgba(245,242,234,0.24) 0, rgba(245,242,234,0.24) 1px, transparent 1px, transparent 6px),
+ linear-gradient(135deg, #1a1a22 0, #050508 70%);
+}
+.swatch-q4-c {
+ background:
+ repeating-radial-gradient(circle at 20% 20%, rgba(201,169,97,0.5) 0, rgba(201,169,97,0.5) 3px, transparent 3px, transparent 9px),
+ linear-gradient(135deg, #3a2833 0, #110610 75%);
+}
+.swatch-q4-d {
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.8), transparent 55%),
+ conic-gradient(from 45deg, #14141b 0 90deg, #050507 90deg 180deg, #14141b 180deg 270deg, #050507 270deg 360deg);
+}
+
+/* Q5 - Art mix */
+.swatch-q5-a {
+ background:
+ radial-gradient(circle at 75% 20%, rgba(201,169,97,0.65), transparent 55%),
+ linear-gradient(135deg, #2c2830 0, #110f16 60%);
+}
+.swatch-q5-a::before {
+ content: "";
+ position: absolute;
+ inset: 18% 22%;
+ border-radius: 40% 60% 55% 45%;
+ border: 1px solid rgba(245,242,234,0.2);
+}
+.swatch-q5-b {
+ background:
+ linear-gradient(135deg, #181820 0, #050509 60%);
+}
+.swatch-q5-b::before,
+.swatch-q5-b::after {
+ content: "";
+ position: absolute;
+ inset: 18%;
+ border-radius: 50%;
+ border: 1px solid rgba(245,242,234,0.14);
+}
+.swatch-q5-b::after {
+ inset: 30%;
+ border-style: dashed;
+ border-color: rgba(201,169,97,0.6);
+}
+.swatch-q5-c {
+ background:
+ linear-gradient(135deg, #3c2632 0, #140811 60%);
+}
+.swatch-q5-c::before {
+ content: "";
+ position: absolute;
+ inset: 12%;
+ background:
+ repeating-linear-gradient(120deg, rgba(245,242,234,0.4) 0, rgba(245,242,234,0.4) 2px, transparent 2px, transparent 6px),
+ repeating-linear-gradient(-60deg, rgba(201,169,97,0.6) 0, rgba(201,169,97,0.6) 2px, transparent 2px, transparent 8px);
+ opacity: 0.8;
+}
+.swatch-q5-d {
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.7), transparent 55%),
+ conic-gradient(from 20deg, #181018 0 25%, #050507 25% 50%, #181018 50% 75%, #050507 75% 100%);
+}
+
+/* CONTROLS */
+.controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 28px;
+}
+.button {
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(245,242,234,0.2);
+ padding: 9px 22px 10px;
+ font-size: var(--fs-label);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ background: transparent;
+ color: var(--text);
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ transition: background var(--duration-fast) var(--ease-swift),
+ color var(--duration-fast) var(--ease-swift),
+ border-color var(--duration-fast) var(--ease-swift),
+ transform var(--duration-fast) var(--ease-swift),
+ box-shadow var(--duration-fast) var(--ease-swift);
+}
+.button span.icon {
+ display: inline-block;
+ width: 12px;
+ height: 1px;
+ background: currentColor;
+ position: relative;
+}
+.button span.icon::after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: -3px;
+ width: 6px;
+ height: 6px;
+ border-top: 1px solid currentColor;
+ border-right: 1px solid currentColor;
+ transform: rotate(45deg);
+}
+.button-primary {
+ background: linear-gradient(135deg, var(--accent) 0, var(--accent-soft) 100%);
+ color: #120f09;
+ border-color: rgba(0,0,0,0.4);
+ box-shadow: 0 10px 24px rgba(0,0,0,0.6);
+}
+.button-primary:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 14px 30px rgba(0,0,0,0.7);
+}
+.button-ghost {
+ background: transparent;
+ color: var(--muted);
+}
+.button-ghost:hover {
+ background: rgba(245,242,234,0.04);
+ color: var(--text);
+}
+.button[disabled],
+.button[aria-disabled="true"] {
+ opacity: 0.45;
+ cursor: default;
+ pointer-events: none;
+}
+
+/* SIDE PANEL – STYLE TRACKER / HINTS */
+.side-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ margin-bottom: 22px;
+}
+.side-title {
+ font-family: var(--font-display);
+ font-size: var(--fs-h3);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+.side-caption {
+ font-size: var(--fs-caption);
+ color: var(--muted);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+.style-pills {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 10px;
+ margin-bottom: 26px;
+}
+.style-pill {
+ border-radius: var(--radius-pill);
+ padding: 8px 14px;
+ border: 1px solid rgba(245,242,234,0.08);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: rgba(5,5,7,0.6);
+}
+.style-pill-label {
+ font-size: var(--fs-caption);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.style-pill-meter {
+ position: relative;
+ flex: 1;
+ margin-left: 10px;
+ height: 3px;
+ border-radius: 999px;
+ background: rgba(245,242,234,0.08);
+ overflow: hidden;
+}
+.style-pill-fill {
+ position: absolute;
+ inset: 0;
+ width: 0%;
+ border-radius: inherit;
+ background: linear-gradient(90deg, rgba(201,169,97,0.8), rgba(201,169,97,0.3));
+ transition: width 320ms var(--ease-swift);
+}
+.side-footer {
+ margin-top: auto;
+ font-size: var(--fs-caption);
+ color: rgba(245,242,234,0.76);
+ max-width: 32ch;
+}
+
+/* RESULT OVERLAY */
+.result-overlay {
+ position: absolute;
+ inset: 0;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ padding: 22px;
+ background: radial-gradient(circle at top, rgba(0,0,0,0.7), rgba(0,0,0,0.92));
+ backdrop-filter: blur(26px);
+ z-index: 5;
+}
+.result-overlay.is-active {
+ display: flex;
+ animation: blurIn 520ms var(--ease-hero) both;
+}
+.result-card {
+ width: 100%;
+ max-width: 640px;
+ aspect-ratio: 1 / 1;
+ border-radius: 32px;
+ background:
+ radial-gradient(circle at 10% 0, rgba(201,169,97,0.6), transparent 55%),
+ radial-gradient(circle at 100% 100%, rgba(125,106,69,0.6), transparent 55%),
+ #050508;
+ border: 1px solid rgba(245,242,234,0.18);
+ box-shadow: var(--shadow-soft);
+ padding: 30px 28px 24px;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ gap: 12px;
+ animation: scaleIn 520ms var(--ease-hero) both;
+}
+.result-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: 12px;
+}
+.result-tag {
+ font-size: var(--fs-label);
+ letter-spacing: 0.24em;
+ text-transform: uppercase;
+ color: rgba(245,242,234,0.8);
+}
+.result-style-name {
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ line-height: 1.08;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+}
+.result-middle {
+ display: grid;
+ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+ gap: 18px;
+ align-items: stretch;
+}
+@media (max-width: 650px) {
+ .result-card {
+ padding: 22px 18px 18px;
+ border-radius: 24px;
+ }
+ .result-middle {
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto auto;
+ }
+ .result-style-name {
+ font-size: 28px;
+ }
+}
+.result-copy {
+ font-size: var(--fs-body);
+ line-height: 1.6;
+ color: rgba(245,242,234,0.9);
+}
+.result-note {
+ margin-top: 10px;
+ font-size: var(--fs-caption);
+ color: rgba(245,242,234,0.7);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+/* RESULT SWATCH PATTERNS – DISTINCT FOR EACH STYLE */
+.result-swatch {
+ border-radius: 22px;
+ border: 1px solid rgba(245,242,234,0.22);
+ overflow: hidden;
+ position: relative;
+ background: #0a0a10;
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+}
+.result-swatch-inner {
+ position: relative;
+ flex: 1;
+}
+
+/* TRADITIONAL DAMASK – ornate radial / fleur-de-lis lattice */
+.pattern-traditional {
+ background:
+ radial-gradient(circle at 10% 0, rgba(201,169,97,0.7), transparent 55%),
+ radial-gradient(circle at 90% 100%, rgba(201,169,97,0.4), transparent 55%),
+ #171019;
+}
+.pattern-traditional::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ opacity: 0.9;
+ background-image:
+ radial-gradient(circle at 10% 10%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 8px, rgba(201,169,97,0.8) 8px, rgba(201,169,97,0.8) 9px, transparent 9px),
+ radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 18px, rgba(245,242,234,0.22) 18px, rgba(245,242,234,0.22) 19px, transparent 19px),
+ radial-gradient(circle at 90% 90%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 8px, rgba(201,169,97,0.8) 8px, rgba(201,169,97,0.8) 9px, transparent 9px);
+ background-size: 80px 80px;
+ background-position: 0 0, 40px 40px, 80px 80px;
+ mix-blend-mode: screen;
+}
+
+/* MODERN MINIMALIST – fine grid and bands */
+.pattern-modern {
+ background:
+ linear-gradient(135deg, #161920 0, #06070b 60%);
+}
+.pattern-modern::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image:
+ repeating-linear-gradient(90deg, rgba(245,242,234,0.12) 0, rgba(245,242,234,0.12) 0.5px, transparent 0.5px, transparent 10px),
+ repeating-linear-gradient(180deg, rgba(245,242,234,0.08) 0, rgba(245,242,234,0.08) 0.5px, transparent 0.5px, transparent 16px);
+ mix-blend-mode: screen;
+ opacity: 0.9;
+}
+.pattern-modern::after {
+ content: "";
+ position: absolute;
+ inset: 12% 58% 12% 0;
+ background: linear-gradient(135deg, rgba(201,169,97,0.2), transparent 80%);
+ border-right: 1px solid rgba(245,242,234,0.18);
+}
+
+/* BOHEMIAN MAXIMALIST – rich jewel, layered motifs */
+.pattern-bohemian {
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.7), transparent 55%),
+ radial-gradient(circle at 100% 40%, rgba(201,169,97,0.5), transparent 55%),
+ linear-gradient(135deg, #4a2835 0, #1c0814 45%, #070105 100%);
+}
+.pattern-bohemian::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image:
+ repeating-radial-gradient(circle at 10% 20%, rgba(245,242,234,0.32) 0, rgba(245,242,234,0.32) 4px, transparent 4px, transparent 14px),
+ repeating-linear-gradient(60deg, rgba(201,169,97,0.5) 0, rgba(201,169,97,0.5) 3px, transparent 3px, transparent 9px);
+ mix-blend-mode: screen;
+ opacity: 0.9;
+}
+
+/* ART DECO GLAM – sunbursts + stepped fans */
+.pattern-artdeco {
+ background:
+ radial-gradient(circle at 15% -10%, rgba(201,169,97,1) 0, rgba(201,169,97,0.2) 45%, transparent 70%),
+ linear-gradient(135deg, #26222b 0, #0c080f 60%);
+}
+.pattern-artdeco::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image:
+ conic-gradient(from -45deg, rgba(201,169,97,0.9) 0 10deg, transparent 10deg 20deg, rgba(201,169,97,0.9) 20deg 30deg, transparent 30deg 40deg, rgba(201,169,97,0.9) 40deg 50deg, transparent 50deg 360deg);
+ mask-image: radial-gradient(circle at 15% -10%, black 0, black 60%, transparent 65%);
+ opacity: 0.85;
+}
+.pattern-artdeco::after {
+ content: "";
+ position: absolute;
+ inset: 32% 10% 8% 45%;
+ background-image:
+ repeating-linear-gradient(180deg, rgba(201,169,97,0.7) 0, rgba(201,169,97,0.7) 2px, transparent 2px, transparent 8px);
+ clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
+}
+
+/* RESULT CTA AREA */
+.result-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 16px;
+ margin-top: 10px;
+}
+.result-tagline {
+ font-size: var(--fs-caption);
+ color: rgba(245,242,234,0.8);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+}
+.result-cta-group {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+
+/* TRANSITIONS BETWEEN QUESTIONS */
+.question-view {
+ opacity: 0;
+ transform: translateY(22px);
+ animation: fadeUp 480ms var(--ease-hero) both;
+}
+
+/* UTILITIES */
+.hidden {
+ display: none !important;
+}
+</style>
+</head>
+<body>
+<header class="app-header">
+ <div class="wordmark">DESIGNER<br>WALLCOVERINGS</div>
+ <div class="header-meta">
+ <div class="meta-label">Wallcovering Style Quiz</div>
+ <div class="progress-dots" aria-hidden="true">
+ <div class="progress-dot is-active" data-step="1"></div>
+ <div class="progress-dot" data-step="2"></div>
+ <div class="progress-dot" data-step="3"></div>
+ <div class="progress-dot" data-step="4"></div>
+ <div class="progress-dot" data-step="5"></div>
+ </div>
+ </div>
+</header>
+
+<main class="app-shell">
+ <section class="quiz-frame" aria-label="What's Your Wallcovering Style?">
+ <div class="quiz-inner">
+ <!-- PRIMARY PANEL -->
+ <div class="panel panel-primary">
+ <div class="question-view" id="questionView">
+ <div class="eyebrow" id="introLabel">What's Your</div>
+ <h1 class="quiz-title" id="quizTitle">Wallcovering Style?</h1>
+ <p class="quiz-subtitle" id="quizSubtitle">
+ Tap through five scenes; we’ll reveal the pattern language that belongs on your walls.
+ </p>
+ <div class="question-meta">
+ <div class="question-counter" id="questionCounter">Question 1 of 5</div>
+ </div>
+ <h2 class="question-text" id="questionText">
+ Which room mood feels like home?
+ </h2>
+
+ <div class="answer-grid" id="answerGrid" role="listbox" aria-label="Quiz answers">
+ <!-- tiles injected via JS -->
+ </div>
+
+ <div class="controls">
+ <button class="button button-ghost" id="backButton" aria-disabled="true">
+ <span class="icon" style="transform: rotate(180deg);"></span>
+ Back
+ </button>
+ <button class="button button-primary" id="nextButton">
+ Next Scene
+ <span class="icon"></span>
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <!-- SECONDARY PANEL -->
+ <aside class="panel panel-secondary" aria-label="Style tracker">
+ <div class="side-header">
+ <div>
+ <div class="side-caption">Style Signals</div>
+ <h3 class="side-title">Where You’re Trending</h3>
+ </div>
+ </div>
+ <div class="style-pills" aria-hidden="true">
+ <div class="style-pill">
+ <span class="style-pill-label">Traditional Damask</span>
+ <div class="style-pill-meter">
+ <div class="style-pill-fill" id="meter-traditional"></div>
+ </div>
+ </div>
+ <div class="style-pill">
+ <span class="style-pill-label">Modern Minimalist</span>
+ <div class="style-pill-meter">
+ <div class="style-pill-fill" id="meter-modern"></div>
+ </div>
+ </div>
+ <div class="style-pill">
+ <span class="style-pill-label">Bohemian Maximalist</span>
+ <div class="style-pill-meter">
+ <div class="style-pill-fill" id="meter-bohemian"></div>
+ </div>
+ </div>
+ <div class="style-pill">
+ <span class="style-pill-label">Art Deco Glam</span>
+ <div class="style-pill-meter">
+ <div class="style-pill-fill" id="meter-artdeco"></div>
+ </div>
+ </div>
+ </div>
+ <p class="side-footer">
+ Each tap layers a pattern story. When you reach the end, your walls will tell it in one bold square.
+ </p>
+ </aside>
+ </div>
+
+ <!-- RESULT OVERLAY -->
+ <div class="result-overlay" id="resultOverlay" role="dialog" aria-modal="true" aria-labelledby="resultTitle">
+ <div class="result-card">
+ <div class="result-top">
+ <div>
+ <div class="result-tag">Your Wallcovering Style</div>
+ <div class="result-style-name" id="resultTitle">Traditional Damask</div>
+ </div>
+ </div>
+ <div class="result-middle">
+ <div class="result-copy">
+ <p id="resultDescription">
+ You gravitate toward layered, heirloom spaces—rooms that feel composed, not improvised. Intricate motifs, tailored symmetry and a touch of antique gold give your walls a couture presence.
+ </p>
+ <p class="result-note" id="resultNote">
+ Save this card to your camera roll — it’s sized for an Instagram square.
+ </p>
+ </div>
+ <div class="result-swatch" aria-hidden="true">
+ <div class="result-swatch-inner pattern-traditional" id="resultPattern"></div>
+ </div>
+ </div>
+ <div class="result-actions">
+ <div class="result-tagline">Dress your walls like they’re on the runway.</div>
+ <div class="result-cta-group">
+ <button class="button button-ghost" id="retakeButton">
+ Retake
+ </button>
+ <button class="button button-primary" id="shopButton">
+ Shop This Style
+ <span class="icon"></span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </section>
+</main>
+
+<script>
+(function() {
+ const questions = [
+ {
+ id: 1,
+ text: "Which room mood feels like home?",
+ subtitle: "Tap a scene and we’ll translate it into pattern.",
+ answers: [
+ {
+ id: "q1a",
+ title: "Candlelit salon",
+ caption: "Paneled walls, low light, champagne flutes.",
+ swatchClass: "swatch swatch-q1-a",
+ scores: { traditional: 2, modern: 0.5, bohemian: 0.5, artdeco: 1 }
+ },
+ {
+ id: "q1b",
+ title: "Minimal gallery",
+ caption: "Clean lines, negative space, curated pieces.",
+ swatchClass: "swatch swatch-q1-b",
+ scores: { traditional: 0.5, modern: 2, bohemian: 0.5, artdeco: 1 }
+ },
+ {
+ id: "q1c",
+ title: "Eclectic atelier",
+ caption: "Stacks of books, textiles, found treasures.",
+ swatchClass: "swatch swatch-q1-c",
+ scores: { traditional: 0.5, modern: 0.5, bohemian: 2, artdeco: 1 }
+ },
+ {
+ id: "q1d",
+ title: "Velvet cocktail bar",
+ caption: "Mirrors, brass, jewel tones, late nights.",
+ swatchClass: "swatch swatch-q1-d",
+ scores: { traditional: 1, modern: 0.5, bohemian: 1, artdeco: 2 }
+ }
+ ]
+ },
+ {
+ id: 2,
+ text: "How bold should your walls feel?",
+ subtitle: "From whisper to statement piece.",
+ answers: [
+ {
+ id: "q2a",
+ title: "Barely-there",
+ caption: "Soft texture, almost solid, calming.",
+ swatchClass: "swatch swatch-q2-a",
+ scores: { traditional: 0.5, modern: 2, bohemian: 0.5, artdeco: 0.5 }
+ },
+ {
+ id: "q2b",
+ title: "Regal & ornate",
+ caption: "Scrolls, medallions, grand hotel energy.",
+ swatchClass: "swatch swatch-q2-b",
+ scores: { traditional: 2, modern: 0.5, bohemian: 1, artdeco: 1 }
+ },
+ {
+ id: "q2c",
+ title: "Pattern on pattern",
+ caption: "Layered prints, joyful clash, nothing shy.",
+ swatchClass: "swatch swatch-q2-c",
+ scores: { traditional: 0.5, modern: 0.5, bohemian: 2, artdeco: 1 }
+ },
+ {
+ id: "q2d",
+ title: "Graphic geometry",
+ caption: "Lines, stripes, sharp contrast, sleek.",
+ swatchClass: "swatch swatch-q2-d",
+ scores: { traditional: 0.5, modern: 1.5, bohemian: 0.5, artdeco: 2 }
+ }
+ ]
+ },
+ {
+ id: 3,
+ text: "Which palette belongs in your living room?",
+ subtitle: "Trust your instinct, not the trend cycle.",
+ answers: [
+ {
+ id: "q3a",
+ title: "Warm cognac & gold",
+ caption: "Honeyed woods, antique brass details.",
+ swatchClass: "swatch swatch-q3-a",
+ scores: { traditional: 2, modern: 0.5, bohemian: 1, artdeco: 1 }
+ },
+ {
+ id: "q3b",
+ title: "Charcoal & ivory",
+ caption: "Clean, high contrast, quietly dramatic.",
+ swatchClass: "swatch swatch-q3-b",
+ scores: { traditional: 0.5, modern: 2, bohemian: 0.5, artdeco: 1 }
+ },
+ {
+ id: "q3c",
+ title: "Plum & garnet",
+ caption: "Velvety, romantic, a little mysterious.",
+ swatchClass: "swatch swatch-q3-c",
+ scores: { traditional: 1, modern: 0.5, bohemian: 2, artdeco: 1.5 }
+ },
+ {
+ id: "q3d",
+ title: "Ink, ivory & gold",
+ caption: "Sharp, tailored, evening-ready.",
+ swatchClass: "swatch swatch-q3-d",
+ scores: { traditional: 1, modern: 1, bohemian: 0.5, artdeco: 2 }
+ }
+ ]
+ },
+ {
+ id: 4,
+ text: "How do you feel about texture you can almost touch?",
+ subtitle: "Imagine brushing your hand along the wall.",
+ answers: [
+ {
+ id: "q4a",
+ title: "Rich & tactile",
+ caption: "Silk, grasscloth, embroidery energy.",
+ swatchClass: "swatch swatch-q4-a",
+ scores: { traditional: 2, modern: 0.5, bohemian: 1.5, artdeco: 1 }
+ },
+ {
+ id: "q4b",
+ title: "Smooth & seamless",
+ caption: "Gallery walls, almost plastered calm.",
+ swatchClass: "swatch swatch-q4-b",
+ scores: { traditional: 0.5, modern: 2, bohemian: 0.5, artdeco: 1 }
+ },
+ {
+ id: "q4c",
+ title: "Layered & artisanal",
+ caption: "Block prints, brushstrokes, woven feel.",
+ swatchClass: "swatch swatch-q4-c",
+ scores: { traditional: 1, modern: 0.5, bohemian: 2, artdeco: 1 }
+ },
+ {
+ id: "q4d",
+ title: "Sleek with shimmer",
+ caption: "Metallic threads, subtle sparkle, bar cart ready.",
+ swatchClass: "swatch swatch-q4-d",
+ scores: { traditional: 1, modern: 0.5, bohemian: 0.5, artdeco: 2 }
+ }
+ ]
+ },
+ {
+ id: 5,
+ text: "If your walls hosted a party, what would the art look like?",
+ subtitle: "Consider the pieces you’d never take down.",
+ answers: [
+ {
+ id: "q5a",
+ title: "Painterly & romantic",
+ caption: "Florals, portraits, soft light.",
+ swatchClass: "swatch swatch-q5-a",
+ scores: { traditional: 2, modern: 0.5, bohemian: 1, artdeco: 1 }
+ },
+ {
+ id: "q5b",
+ title: "Minimal & sculptural",
+ caption: "Monochrome, negative space, form first.",
+ swatchClass: "swatch swatch-q5-b",
+ scores: { traditional: 0.5, modern: 2, bohemian: 0.5, artdeco: 1 }
+ },
+ {
+ id: "q5c",
+ title: "Collected & storied",
+ caption: "Textiles, travel finds, layered frames.",
+ swatchClass: "swatch swatch-q5-c",
+ scores: { traditional: 1, modern: 0.5, bohemian: 2, artdeco: 1 }
+ },
+ {
+ id: "q5d",
+ title: "Graphic & glam",
+ caption: "Posters, neon, bold shapes and shine.",
+ swatchClass: "swatch swatch-q5-d",
+ scores: { traditional: 0.5, modern: 1, bohemian: 0.5, artdeco: 2 }
+ }
+ ]
+ }
+ ];
+
+ const stylesMeta = {
+ traditional: {
+ name: "Traditional Damask",
+ patternClass: "pattern-traditional",
+ description: "You gravitate toward layered, heirloom spaces—rooms that feel composed, not improvised. Intricate motifs, tailored symmetry and a touch of antique gold give your walls a couture presence.",
+ },
+ modern: {
+ name: "Modern Minimalist",
+ patternClass: "pattern-modern",
+ description: "You edit ruthlessly and live with intention. Quiet textures, precise geometry and crisp contrasts turn your walls into a serene backdrop for art, light and conversation.",
+ },
+ bohemian: {
+ name: "Bohemian Maximalist",
+ patternClass: "pattern-bohemian",
+ description: "You collect stories, not stuff. Pattern-rich, color-drenched walls are your canvas—each motif layering in another chapter of your travels, playlists and late-night ideas.",
+ },
+ artdeco: {
+ name: "Art Deco Glam",
+ patternClass: "pattern-artdeco",
+ description: "You love a grand entrance. Sunburst metallics, architectural fans and inky grounds bring the drama of a champagne bar home—every wall a tailored statement piece.",
+ }
+ };
+
+ let currentIndex = 0;
+ const selections = new Array(questions.length).fill(null);
+ const scores = { traditional: 0, modern: 0, bohemian: 0, artdeco: 0 };
+
+ const introLabel = document.getElementById("introLabel");
+ const quizTitle = document.getElementById("quizTitle");
+ const quizSubtitle = document.getElementById("quizSubtitle");
+ const questionCounter = document.getElementById("questionCounter");
+ const questionText = document.getElementById("questionText");
+ const answerGrid = document.getElementById("answerGrid");
+ const backButton = document.getElementById("backButton");
+ const nextButton = document.getElementById("nextButton");
+ const progressDots = document.querySelectorAll(".progress-dot");
+
+ const meterTraditional = document.getElementById("meter-traditional");
+ const meterModern = document.getElementById("meter-modern");
+ const meterBohemian = document.getElementById("meter-bohemian");
+ const meterArtdeco = document.getElementById("meter-artdeco");
+
+ const resultOverlay = document.getElementById("resultOverlay");
+ const resultTitle = document.getElementById("resultTitle");
+ const resultDescription = document.getElementById("resultDescription");
+ const resultNote = document.getElementById("resultNote");
+ const resultPattern = document.getElementById("resultPattern");
+ const retakeButton = document.getElementById("retakeButton");
+ const shopButton = document.getElementById("shopButton");
+
+ function renderQuestion(index) {
+ const q = questions[index];
+
+ introLabel.textContent = "Scene " + (index + 1);
+ quizTitle.textContent = "What's Your Wallcovering Style?";
+ quizSubtitle.textContent = q.subtitle;
+ questionCounter.textContent = "Question " + (index + 1) + " of " + questions.length;
+ questionText.textContent = q.text;
+
+ answerGrid.innerHTML = "";
+
+ q.answers.forEach((answer, i) => {
+ const tile = document.createElement("button");
+ tile.type = "button";
+ tile.className = "answer-tile";
+ tile.setAttribute("role", "option");
+ tile.setAttribute("data-answer-id", answer.id);
+ tile.setAttribute("data-index", i);
+
+ const swatch = document.createElement("div");
+ swatch.className = answer.swatchClass;
+
+ const label = document.createElement("div");
+ label.className = "answer-tile-label";
+
+ const titleEl = document.createElement("div");
+ titleEl.className = "answer-title";
+ titleEl.textContent = answer.title;
+
+ const captionEl = document.createElement("div");
+ captionEl.className = "answer-caption";
+ captionEl.textContent = answer.caption;
+
+ label.appendChild(titleEl);
+ label.appendChild(captionEl);
+
+ tile.appendChild(swatch);
+ tile.appendChild(label);
+
+ tile.addEventListener("click", () => {
+ selections[index] = answer;
+ flashSelection(tile);
+ if (index < questions.length - 1) {
+ // brief delay for tap feedback
+ setTimeout(() => {
+ goToQuestion(index + 1);
+ }, 160);
+ } else {
+ setTimeout(showResult, 220);
+ }
+ });
+
+ answerGrid.appendChild(tile);
+ });
+
+ updateProgressDots();
+ updateNavButtons();
+ updateMeters();
+ }
+
+ function flashSelection(tile) {
+ tile.style.transform = "translateY(-2px) scale(0.98)";
+ tile.style.boxShadow = "0 0 0 rgba(0,0,0,0)";
+ setTimeout(() => {
+ tile.style.transform = "";
+ tile.style.boxShadow = "";
+ }, 160);
+ }
+
+ function goToQuestion(index) {
+ currentIndex = index;
+ renderQuestion(index);
+ }
+
+ function updateProgressDots() {
+ progressDots.forEach((dot, idx) => {
+ dot.classList.toggle("is-active", idx === currentIndex);
+ });
+ }
+
+ function updateNavButtons() {
+ if (currentIndex === 0) {
+ backButton.setAttribute("aria-disabled", "true");
+ } else {
+ backButton.removeAttribute("aria-disabled");
+ }
+
+ if (currentIndex === questions.length - 1) {
+ nextButton.textContent = "Reveal My Style";
+ const iconSpan = document.createElement("span");
+ iconSpan.className = "icon";
+ nextButton.appendChild(iconSpan);
+ } else {
+ nextButton.textContent = "Next Scene";
+ const iconSpan = document.createElement("span");
+ iconSpan.className = "icon";
+ nextButton.appendChild(iconSpan);
+ }
+ }
+
+ function recalcScores() {
+ scores.traditional = 0;
+ scores.modern = 0;
+ scores.bohemian = 0;
+ scores.artdeco = 0;
+
+ selections.forEach(sel => {
+ if (!sel) return;
+ const s = sel.scores;
+ scores.traditional += s.traditional || 0;
+ scores.modern += s.modern || 0;
+ scores.bohemian += s.bohemian || 0;
+ scores.artdeco += s.artdeco || 0;
+ });
+ }
+
+ function updateMeters() {
+ recalcScores();
+ const maxPossible = questions.length * 2;
+ const toPercent = (value) => (value / maxPossible) * 100;
+
+ meterTraditional.style.width = toPercent(scores.traditional) + "%";
+ meterModern.style.width = toPercent(scores.modern) + "%";
+ meterBohemian.style.width = toPercent(scores.bohemian) + "%";
+ meterArtdeco.style.width = toPercent(scores.artdeco) + "%";
+ }
+
+ function getResultKey() {
+ recalcScores();
+ const entries = Object.entries(scores);
+ entries.sort((a, b) => b[1] - a[1]);
+ return entries[0][0]; // traditional | modern | bohemian | artdeco
+ }
+
+ function showResult() {
+ const key = getResultKey();
+ const meta = stylesMeta[key];
+
+ resultTitle.textContent = meta.name;
+ resultDescription.textContent = meta.description;
+ resultNote.textContent = "Save or screenshot this result card—it's designed to sit perfectly in a 1080 × 1080 Instagram square.";
+
+ resultPattern.className = "result-swatch-inner " + meta.patternClass;
+
+ resultOverlay.classList.add("is-active");
+ }
+
+ backButton.addEventListener("click", () => {
+ if (currentIndex > 0) {
+ goToQuestion(currentIndex - 1);
+ }
+ });
+
+ nextButton.addEventListener("click", () => {
+ if (currentIndex < questions.length - 1) {
+ goToQuestion(currentIndex + 1);
+ } else {
+ showResult();
+ }
+ });
+
+ retakeButton.addEventListener("click", () => {
+ resultOverlay.classList.remove("is-active");
+ for (let i = 0; i < selections.length; i++) selections[i] = null;
+ scores.traditional = scores.modern = scores.bohemian = scores.artdeco = 0;
+ currentIndex = 0;
+ renderQuestion(0);
+ });
+
+ shopButton.addEventListener("click", () => {
+ // In-page, no network action; subtle visual pulse as a placeholder.
+ shopButton.style.transform = "translateY(-1px) scale(0.99)";
+ setTimeout(() => {
+ shopButton.style.transform = "";
+ }, 120);
+ });
+
+ // init
+ renderQuestion(0);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/gpt.png b/data/artifacts/b0bfeedddee6/gpt.png
new file mode 100644
index 0000000..b1c3e61
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/gpt.png differ
diff --git a/data/artifacts/b0bfeedddee6/grok.html b/data/artifacts/b0bfeedddee6/grok.html
new file mode 100644
index 0000000..e37b694
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/grok.html
@@ -0,0 +1,872 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>What's Your Wallcovering Style? · Designer Wallcoverings</title>
+<style>
+:root {
+ --bg: #f7f3eb;
+ --bg-deep: #efe8dc;
+ --surface: #fffcf6;
+ --ink: #1c1a17;
+ --ink-soft: #3a3630;
+ --muted: #8a8478;
+ --accent: #b8952a;
+ --accent-deep: #8a6e1f;
+ --line: rgba(28, 26, 23, 0.12);
+ --line-strong: rgba(28, 26, 23, 0.22);
+ --shadow: 0 12px 40px rgba(28, 26, 23, 0.08);
+ --shadow-soft: 0 4px 16px rgba(28, 26, 23, 0.06);
+ --ease: cubic-bezier(.22, .9, .24, 1);
+ --ease-out: cubic-bezier(.22, 1, .36, 1);
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', 'Helvetica Neue', Futura, sans-serif;
+ --r-card: 14px;
+ --r-tight: 6px;
+ --header-h: 72px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+ min-height: 100%;
+ background: var(--bg);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.55;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+/* ── Fixed wordmark bar ── */
+.site-header {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: var(--header-h);
+ background: var(--bg);
+ border-bottom: 1px solid var(--line);
+ display: flex;
+ align-items: center;
+ padding: 0 28px;
+}
+
+.wordmark {
+ font-family: var(--serif);
+ font-size: 15px;
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--ink);
+ line-height: 1.25;
+ white-space: normal;
+ max-width: 280px;
+}
+
+/* ── App shell ── */
+.app {
+ min-height: 100vh;
+ padding-top: var(--header-h);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.stage {
+ width: 100%;
+ max-width: 720px;
+ padding: 48px 24px 80px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+/* ── Shared type ── */
+.eyebrow {
+ font-family: var(--sans);
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+h1, h2, h3 {
+ font-family: var(--serif);
+ font-weight: 400;
+ color: var(--ink);
+ line-height: 1.15;
+}
+
+/* ── Screens ── */
+.screen { display: none; animation: fadeUp 0.55s var(--ease-out) both; }
+.screen.active { display: flex; flex-direction: column; }
+
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(18px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Intro ── */
+#screen-intro {
+ align-items: center;
+ text-align: center;
+ padding-top: 48px;
+ gap: 28px;
+}
+
+.intro-ornament {
+ width: 48px; height: 1px;
+ background: var(--accent);
+}
+
+#screen-intro h1 {
+ font-size: clamp(36px, 6vw, 50px);
+ letter-spacing: -0.02em;
+ max-width: 14ch;
+}
+
+#screen-intro .lead {
+ font-size: 17px;
+ color: var(--ink-soft);
+ max-width: 38ch;
+ line-height: 1.65;
+}
+
+.btn {
+ font-family: var(--sans);
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ border: none;
+ cursor: pointer;
+ transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
+ border-radius: 999px;
+}
+
+.btn:active { transform: scale(0.97); }
+
+.btn-primary {
+ background: var(--ink);
+ color: var(--bg);
+ padding: 18px 36px;
+ box-shadow: var(--shadow-soft);
+}
+.btn-primary:hover {
+ background: var(--accent-deep);
+ box-shadow: var(--shadow);
+}
+
+.btn-ghost {
+ background: transparent;
+ color: var(--ink);
+ padding: 14px 28px;
+ border: 1px solid var(--line-strong);
+}
+.btn-ghost:hover {
+ border-color: var(--ink);
+}
+
+/* ── Quiz progress ── */
+.progress-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 36px;
+ gap: 16px;
+}
+
+.progress-track {
+ flex: 1;
+ height: 1px;
+ background: var(--line);
+ position: relative;
+ overflow: hidden;
+}
+.progress-fill {
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: 0%;
+ background: var(--accent);
+ transition: width 0.5s var(--ease);
+}
+
+.progress-label {
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.q-title {
+ font-size: clamp(26px, 4.5vw, 34px);
+ margin-bottom: 8px;
+ letter-spacing: -0.015em;
+}
+
+.q-sub {
+ font-size: 15px;
+ color: var(--muted);
+ margin-bottom: 32px;
+}
+
+/* ── Answer tiles ── */
+.tiles {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 14px;
+}
+
+.tile {
+ position: relative;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--r-card);
+ overflow: hidden;
+ cursor: pointer;
+ text-align: left;
+ padding: 0;
+ font: inherit;
+ color: inherit;
+ transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
+ display: flex;
+ flex-direction: column;
+ min-height: 200px;
+ box-shadow: var(--shadow-soft);
+}
+.tile:hover {
+ border-color: var(--accent);
+ box-shadow: var(--shadow);
+ transform: translateY(-2px);
+}
+.tile:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 3px;
+}
+
+.tile-swatch {
+ height: 120px;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid var(--line);
+}
+
+.tile-body {
+ padding: 16px 18px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+}
+
+.tile-name {
+ font-family: var(--serif);
+ font-size: 18px;
+ line-height: 1.25;
+ color: var(--ink);
+}
+
+.tile-hint {
+ font-size: 12px;
+ color: var(--muted);
+ letter-spacing: 0.02em;
+ line-height: 1.4;
+}
+
+/* ── CSS pattern swatches (visually distinct) ── */
+
+/* Damask: ornate diamond medallion */
+.pat-damask {
+ background-color: #2a2420;
+ background-image:
+ radial-gradient(ellipse 30% 40% at 50% 50%, rgba(201,169,97,0.35) 0%, transparent 70%),
+ radial-gradient(circle at 50% 20%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 50% 80%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 20% 50%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 80% 50%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ repeating-linear-gradient(45deg, transparent 0 18px, rgba(201,169,97,0.07) 18px 19px),
+ repeating-linear-gradient(-45deg, transparent 0 18px, rgba(201,169,97,0.07) 18px 19px);
+}
+
+/* Minimalist: soft linen weave + quiet verticals */
+.pat-minimal {
+ background-color: #e8e4dc;
+ background-image:
+ linear-gradient(90deg, transparent 0, transparent 47%, rgba(28,26,23,0.06) 47%, rgba(28,26,23,0.06) 53%, transparent 53%),
+ linear-gradient(0deg, rgba(255,255,255,0.4) 0 1px, transparent 1px),
+ linear-gradient(90deg, rgba(28,26,23,0.03) 0 1px, transparent 1px);
+ background-size: 100% 100%, 100% 6px, 6px 100%;
+}
+
+/* Bohemian: layered botanical dots + warm terracotta */
+.pat-boho {
+ background-color: #6b3a2a;
+ background-image:
+ radial-gradient(circle at 20% 30%, #c4784a 0 6px, transparent 7px),
+ radial-gradient(circle at 70% 60%, #d4a05a 0 4px, transparent 5px),
+ radial-gradient(circle at 50% 80%, #8a9a5b 0 8px, transparent 9px),
+ radial-gradient(circle at 80% 20%, #c4784a 0 3px, transparent 4px),
+ radial-gradient(circle at 35% 65%, #d4a05a 0 5px, transparent 6px),
+ radial-gradient(circle at 10% 75%, #8a9a5b 0 4px, transparent 5px),
+ radial-gradient(ellipse at 60% 40%, rgba(212,160,90,0.25) 0%, transparent 50%);
+}
+
+/* Art Deco: fan geometry + gold on noir */
+.pat-deco {
+ background-color: #12141a;
+ background-image:
+ repeating-linear-gradient(0deg, transparent 0 14px, rgba(201,169,97,0.15) 14px 15px),
+ repeating-linear-gradient(90deg, transparent 0 14px, rgba(201,169,97,0.08) 14px 15px),
+ linear-gradient(135deg, transparent 40%, rgba(201,169,97,0.2) 40%, rgba(201,169,97,0.2) 42%, transparent 42%),
+ linear-gradient(45deg, transparent 40%, rgba(201,169,97,0.15) 40%, rgba(201,169,97,0.15) 42%, transparent 42%),
+ radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,169,97,0.35) 0%, transparent 60%);
+}
+
+/* Extra pattern variants for question tiles */
+.pat-velvet {
+ background:
+ radial-gradient(ellipse at 30% 40%, #4a1e2e 0%, #2a121c 60%, #1a0c12 100%);
+ position: relative;
+}
+.pat-velvet::after {
+ content: '';
+ position: absolute; inset: 0;
+ background:
+ repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,220,230,0.03) 3px 4px);
+}
+
+.pat-grasscloth {
+ background-color: #c4b89a;
+ background-image:
+ repeating-linear-gradient(90deg,
+ rgba(90,70,40,0.12) 0px,
+ rgba(90,70,40,0.04) 2px,
+ transparent 3px,
+ transparent 7px),
+ linear-gradient(180deg, rgba(255,255,255,0.15), transparent 40%, rgba(0,0,0,0.06));
+}
+
+.pat-floral {
+ background-color: #3d4a38;
+ background-image:
+ radial-gradient(circle at 25% 35%, #c9a0a8 0 5px, transparent 6px),
+ radial-gradient(circle at 28% 32%, #d4b5bb 0 2px, transparent 3px),
+ radial-gradient(circle at 70% 55%, #a8b87a 0 7px, transparent 8px),
+ radial-gradient(circle at 55% 25%, #c9a0a8 0 4px, transparent 5px),
+ radial-gradient(circle at 40% 70%, #8a9a5b 0 6px, transparent 7px),
+ radial-gradient(circle at 80% 30%, #d4c48a 0 3px, transparent 4px),
+ radial-gradient(circle at 15% 75%, #a8b87a 0 4px, transparent 5px);
+}
+
+.pat-stripe {
+ background: repeating-linear-gradient(
+ 90deg,
+ #1c1a17 0 10px,
+ #c9a961 10px 14px,
+ #f5f0e6 14px 28px,
+ #8a6e1f 28px 30px
+ );
+}
+
+.pat-marble {
+ background-color: #eae6df;
+ background-image:
+ linear-gradient(122deg, transparent 40%, rgba(120,110,100,0.12) 41%, transparent 42%),
+ linear-gradient(18deg, transparent 55%, rgba(90,80,70,0.1) 56%, transparent 58%),
+ linear-gradient(78deg, transparent 30%, rgba(140,130,120,0.08) 32%, transparent 34%),
+ radial-gradient(ellipse at 70% 30%, rgba(200,190,180,0.5), transparent 50%);
+}
+
+.pat-ikat {
+ background-color: #2c3a4a;
+ background-image:
+ linear-gradient(90deg, transparent 20%, #c4784a 20% 28%, transparent 28% 40%, #d4a05a 40% 48%, transparent 48% 60%, #8a9a5b 60% 68%, transparent 68%),
+ linear-gradient(90deg, transparent 22%, #c4784a 24% 26%, transparent 28% 42%, #d4a05a 44% 46%, transparent 48% 62%, #8a9a5b 64% 66%, transparent 68%);
+ background-size: 100% 50%, 100% 50%;
+ background-position: 0 0, 0 100%;
+}
+
+.pat-chinoiserie {
+ background-color: #1a2a3a;
+ background-image:
+ radial-gradient(ellipse 8px 20px at 30% 50%, #c9a961 0 40%, transparent 50%),
+ radial-gradient(circle at 50% 30%, #e8d5a3 0 3px, transparent 4px),
+ radial-gradient(circle at 70% 60%, #8a9a5b 0 4px, transparent 5px),
+ radial-gradient(circle at 40% 75%, #c9a961 0 2px, transparent 3px),
+ linear-gradient(180deg, transparent 70%, rgba(201,169,97,0.15) 100%);
+}
+
+.pat-geometric {
+ background-color: #0e1014;
+ background-image:
+ linear-gradient(45deg, #c9a961 25%, transparent 25%),
+ linear-gradient(-45deg, #c9a961 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, #c9a961 75%),
+ linear-gradient(-45deg, transparent 75%, #c9a961 75%);
+ background-size: 28px 28px;
+ background-position: 0 0, 0 14px, 14px -14px, -14px 0;
+ opacity: 1;
+}
+.pat-geometric {
+ background-color: #0e1014;
+ background-image:
+ repeating-conic-gradient(from 45deg at 50% 50%, #c9a961 0deg 2deg, transparent 2deg 90deg);
+ background-size: 32px 32px;
+}
+
+.pat-toile {
+ background-color: #e8e0d4;
+ background-image:
+ radial-gradient(circle at 20% 30%, #5a6a7a 0 1.5px, transparent 2px),
+ radial-gradient(circle at 60% 50%, #5a6a7a 0 1px, transparent 1.5px),
+ radial-gradient(ellipse 40px 20px at 70% 35%, transparent 40%, rgba(90,106,122,0.2) 45%, transparent 55%),
+ radial-gradient(ellipse 25px 35px at 30% 70%, transparent 40%, rgba(90,106,122,0.15) 48%, transparent 58%);
+}
+
+.pat-silk {
+ background: linear-gradient(135deg, #2a1830 0%, #4a2a50 35%, #6b3a5a 50%, #4a2a50 65%, #2a1830 100%);
+ position: relative;
+}
+.pat-silk::after {
+ content: '';
+ position: absolute; inset: 0;
+ background: repeating-linear-gradient(
+ 105deg,
+ transparent 0 8px,
+ rgba(255,220,240,0.04) 8px 9px
+ );
+}
+
+.pat-rattan {
+ background-color: #c4a574;
+ background-image:
+ repeating-linear-gradient(0deg, transparent 0 10px, rgba(90,60,30,0.2) 10px 11px),
+ repeating-linear-gradient(90deg, transparent 0 10px, rgba(90,60,30,0.15) 10px 11px),
+ linear-gradient(180deg, rgba(255,240,200,0.2), transparent);
+}
+
+.pat-mosaic {
+ background-color: #1a1814;
+ background-image:
+ linear-gradient(30deg, #c9a961 12%, transparent 12.5%, transparent 87%, #c9a961 87.5%, #c9a961),
+ linear-gradient(150deg, #c9a961 12%, transparent 12.5%, transparent 87%, #c9a961 87.5%, #c9a961),
+ linear-gradient(30deg, #c9a961 12%, transparent 12.5%, transparent 87%, #c9a961 87.5%, #c9a961),
+ linear-gradient(150deg, #c9a961 12%, transparent 12.5%, transparent 87%, #c9a961 87.5%, #c9a961),
+ linear-gradient(60deg, #8a6e1f 25%, transparent 25.5%, transparent 75%, #8a6e1f 75%, #8a6e1f),
+ linear-gradient(60deg, #8a6e1f 25%, transparent 25.5%, transparent 75%, #8a6e1f 75%, #8a6e1f);
+ background-size: 28px 48px;
+ background-position: 0 0, 0 0, 14px 24px, 14px 24px, 0 0, 14px 24px;
+}
+
+.pat-plaster {
+ background-color: #f0ebe3;
+ background-image:
+ radial-gradient(ellipse at 20% 40%, rgba(180,170,155,0.3) 0%, transparent 50%),
+ radial-gradient(ellipse at 80% 70%, rgba(160,150,135,0.2) 0%, transparent 40%),
+ radial-gradient(ellipse at 50% 20%, rgba(200,190,175,0.25) 0%, transparent 45%);
+}
+
+.pat-palm {
+ background-color: #1e2a22;
+ background-image:
+ radial-gradient(ellipse 4px 28px at 25% 50%, #6a8a5a 0 50%, transparent 60%),
+ radial-gradient(ellipse 3px 22px at 28% 45%, #8aaa6a 0 40%, transparent 55%),
+ radial-gradient(ellipse 4px 30px at 55% 55%, #5a7a4a 0 50%, transparent 60%),
+ radial-gradient(ellipse 3px 20px at 70% 40%, #7a9a5a 0 45%, transparent 55%),
+ radial-gradient(ellipse 5px 26px at 80% 60%, #4a6a3a 0 50%, transparent 60%),
+ radial-gradient(ellipse 3px 18px at 40% 35%, #8aaa6a 0 40%, transparent 55%);
+}
+
+.pat-chevron {
+ background-color: #1a1816;
+ background-image: repeating-linear-gradient(
+ 135deg,
+ #1a1816 0 10px,
+ #c9a961 10px 12px,
+ #1a1816 12px 22px,
+ #8a6e1f 22px 24px
+ );
+}
+
+.pat-linen {
+ background-color: #ddd6c8;
+ background-image:
+ repeating-linear-gradient(0deg, rgba(80,70,50,0.05) 0 1px, transparent 1px 3px),
+ repeating-linear-gradient(90deg, rgba(80,70,50,0.04) 0 1px, transparent 1px 4px);
+}
+
+/* ── Result overlay ── */
+#screen-result {
+ align-items: center;
+ gap: 28px;
+ width: 100%;
+}
+
+.result-card {
+ width: min(100%, 540px);
+ aspect-ratio: 1 / 1;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--r-card);
+ box-shadow: var(--shadow);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ position: relative;
+}
+
+.result-swatch {
+ height: 42%;
+ width: 100%;
+ position: relative;
+ flex-shrink: 0;
+}
+
+.result-body {
+ flex: 1;
+ padding: 28px 32px 24px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: var(--surface);
+}
+
+.result-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.result-kicker {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent-deep);
+ font-weight: 600;
+}
+
+.result-title {
+ font-family: var(--serif);
+ font-size: clamp(28px, 5vw, 38px);
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+ color: var(--ink);
+}
+
+.result-desc {
+ font-size: 14px;
+ color: var(--ink-soft);
+ line-height: 1.6;
+ max-width: 42ch;
+ margin-top: 4px;
+}
+
+.result-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: 16px;
+ border-top: 1px solid var(--line);
+ margin-top: 16px;
+}
+
+.result-brand {
+ font-family: var(--serif);
+ font-size: 10px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.result-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ justify-content: center;
+ width: min(100%, 540px);
+}
+
+/* ── Responsive ── */
+@media (max-width: 520px) {
+ .tiles { grid-template-columns: 1fr; }
+ .tile { min-height: 160px; flex-direction: row; }
+ .tile-swatch { width: 110px; height: auto; min-height: 140px; border-bottom: none; border-right: 1px solid var(--line); flex-shrink: 0; }
+ .wordmark { font-size: 12px; max-width: 200px; letter-spacing: 0.14em; }
+ .stage { padding: 32px 16px 64px; }
+ .result-body { padding: 20px 22px 18px; }
+}
+
+/* ── Decorative hairline rule ── */
+.rule {
+ width: 40px;
+ height: 1px;
+ background: var(--accent);
+ border: none;
+ margin: 4px 0;
+}
+</style>
+</head>
+<body>
+
+<header class="site-header">
+ <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<main class="app">
+ <div class="stage">
+
+ <!-- INTRO -->
+ <section id="screen-intro" class="screen active">
+ <div class="intro-ornament" aria-hidden="true"></div>
+ <p class="eyebrow">A five-question style study</p>
+ <h1>What's Your Wallcovering Style?</h1>
+ <p class="lead">An editorial quiz to reveal the pattern language that belongs in your rooms — from quiet linen to gilded damask.</p>
+ <button type="button" class="btn btn-primary" id="btn-start">Begin the Quiz</button>
+ </section>
+
+ <!-- QUIZ -->
+ <section id="screen-quiz" class="screen">
+ <div class="progress-row">
+ <div class="progress-track"><div class="progress-fill" id="progress-fill"></div></div>
+ <span class="progress-label" id="progress-label">1 / 5</span>
+ </div>
+ <h2 class="q-title" id="q-title"></h2>
+ <p class="q-sub" id="q-sub"></p>
+ <div class="tiles" id="tiles" role="group" aria-label="Answer choices"></div>
+ </section>
+
+ <!-- RESULT -->
+ <section id="screen-result" class="screen">
+ <div class="result-card" id="result-card">
+ <div class="result-swatch" id="result-swatch"></div>
+ <div class="result-body">
+ <div class="result-meta">
+ <span class="result-kicker">Your wallcovering style</span>
+ <h2 class="result-title" id="result-title"></h2>
+ <hr class="rule">
+ <p class="result-desc" id="result-desc"></p>
+ </div>
+ <div class="result-footer">
+ <span class="result-brand">Designer Wallcoverings</span>
+ <span class="eyebrow" id="result-tag"></span>
+ </div>
+ </div>
+ </div>
+ <div class="result-actions">
+ <button type="button" class="btn btn-primary" id="btn-shop">Shop this style</button>
+ <button type="button" class="btn btn-ghost" id="btn-retry">Retake the quiz</button>
+ </div>
+ </section>
+
+ </div>
+</main>
+
+<script>
+(function () {
+ const STYLES = {
+ damask: {
+ id: 'damask',
+ name: 'Traditional Damask',
+ tag: 'Heritage · Ornament',
+ swatch: 'pat-damask',
+ desc: 'You gravitate toward heritage craft — scrolled medallions, silk-ground depth, and rooms that feel collected over generations. Think paneled libraries and candlelit dining halls.'
+ },
+ minimal: {
+ id: 'minimal',
+ name: 'Modern Minimalist',
+ tag: 'Quiet · Refined',
+ swatch: 'pat-minimal',
+ desc: 'Your eye seeks calm surfaces and honest texture. Soft linen weaves, tonal plaster, and architectural restraint — beauty in what you leave unsaid.'
+ },
+ boho: {
+ id: 'boho',
+ name: 'Bohemian Maximalist',
+ tag: 'Layered · Free',
+ swatch: 'pat-boho',
+ desc: 'More is a philosophy. You layer botanicals, global motifs, and sun-washed pigment until a room hums with story — collected, warm, and gloriously unrestrained.'
+ },
+ deco: {
+ id: 'deco',
+ name: 'Art Deco Glam',
+ tag: 'Gilded · Graphic',
+ swatch: 'pat-deco',
+ desc: 'Geometry, metallics, and cinematic contrast. You favor fan motifs, chevrons, and lacquered drama — evenings that sparkle and walls that dress for dinner.'
+ }
+ };
+
+ const QUESTIONS = [
+ {
+ title: 'Which foyer greets you home?',
+ sub: 'First impressions — choose the atmosphere you crave.',
+ answers: [
+ { label: 'Candlelit paneling', hint: 'Deep wood, gilt mirror', pat: 'pat-damask', scores: { damask: 2, deco: 1 } },
+ { label: 'Gallery white', hint: 'Quiet plaster, one sculpture', pat: 'pat-plaster', scores: { minimal: 2, damask: 0 } },
+ { label: 'Collected salon', hint: 'Textiles, travel finds', pat: 'pat-ikat', scores: { boho: 2, damask: 1 } },
+ { label: 'Lacquered evening', hint: 'Black gloss, brass stair', pat: 'pat-deco', scores: { deco: 2, minimal: 0 } }
+ ]
+ },
+ {
+ title: 'Your ideal dinner table?',
+ sub: 'The room around the meal tells the story.',
+ answers: [
+ { label: 'Toile & porcelain', hint: 'Blue-grey narrative scenes', pat: 'pat-toile', scores: { damask: 2, minimal: 0 } },
+ { label: 'Stone & linen', hint: 'Bare oak, low florals', pat: 'pat-linen', scores: { minimal: 2, boho: 0 } },
+ { label: 'Spice market', hint: 'Patterned cloth, clay vessels', pat: 'pat-boho', scores: { boho: 2, deco: 0 } },
+ { label: 'Champagne bar', hint: 'Mirrored trays, fan palms', pat: 'pat-chevron', scores: { deco: 2, damask: 1 } }
+ ]
+ },
+ {
+ title: 'Which textile do you reach for?',
+ sub: 'Touch is half of taste — pick a surface.',
+ answers: [
+ { label: 'Silk damask', hint: 'Raised motif, candle sheen', pat: 'pat-silk', scores: { damask: 2, deco: 1 } },
+ { label: 'Raw grasscloth', hint: 'Honest weave, soft grain', pat: 'pat-grasscloth', scores: { minimal: 2, boho: 1 } },
+ { label: 'Block-print cotton', hint: 'Hand-dyed florals', pat: 'pat-floral', scores: { boho: 2, damask: 1 } },
+ { label: 'Metallic geometric', hint: 'Gold line on noir', pat: 'pat-geometric', scores: { deco: 2, minimal: 0 } }
+ ]
+ },
+ {
+ title: 'A weekend away — where?',
+ sub: 'The place that resets your eye.',
+ answers: [
+ { label: 'English manor', hint: 'Library ladders, rain on glass', pat: 'pat-chinoiserie', scores: { damask: 2, deco: 0 } },
+ { label: 'Coastal concrete', hint: 'Sea light, empty rooms', pat: 'pat-marble', scores: { minimal: 2, deco: 1 } },
+ { label: 'Desert riad', hint: 'Tiles, citrus, open sky', pat: 'pat-mosaic', scores: { boho: 2, damask: 1 } },
+ { label: 'City penthouse', hint: 'Skyline, velvet banquette', pat: 'pat-velvet', scores: { deco: 2, minimal: 1 } }
+ ]
+ },
+ {
+ title: 'How should a wall feel at dusk?',
+ sub: 'Last light — the mood you keep.',
+ answers: [
+ { label: 'Warm & storied', hint: 'Ember gold on scrollwork', pat: 'pat-damask', scores: { damask: 2, boho: 1 } },
+ { label: 'Hushed & even', hint: 'Shadow without pattern noise', pat: 'pat-minimal', scores: { minimal: 2, damask: 0 } },
+ { label: 'Alive with color', hint: 'Botanicals still glowing', pat: 'pat-palm', scores: { boho: 2, deco: 0 } },
+ { label: 'Graphic & lit', hint: 'Edges catching brass light', pat: 'pat-stripe', scores: { deco: 2, damask: 1 } }
+ ]
+ }
+ ];
+
+ const scores = { damask: 0, minimal: 0, boho: 0, deco: 0 };
+ let qIndex = 0;
+
+ const $ = (sel) => document.querySelector(sel);
+ const intro = $('#screen-intro');
+ const quiz = $('#screen-quiz');
+ const result = $('#screen-result');
+ const tilesEl = $('#tiles');
+ const progressFill = $('#progress-fill');
+ const progressLabel = $('#progress-label');
+ const qTitle = $('#q-title');
+ const qSub = $('#q-sub');
+
+ function show(screen) {
+ [intro, quiz, result].forEach((s) => s.classList.remove('active'));
+ // reflow for re-animation
+ void screen.offsetWidth;
+ screen.classList.add('active');
+ }
+
+ function renderQuestion() {
+ const q = QUESTIONS[qIndex];
+ qTitle.textContent = q.title;
+ qSub.textContent = q.sub;
+ progressLabel.textContent = (qIndex + 1) + ' / ' + QUESTIONS.length;
+ progressFill.style.width = ((qIndex) / QUESTIONS.length * 100) + '%';
+
+ tilesEl.innerHTML = '';
+ q.answers.forEach((a, i) => {
+ const btn = document.createElement('button');
+ btn.type = 'button';
+ btn.className = 'tile';
+ btn.style.animationDelay = (i * 0.06) + 's';
+ btn.innerHTML =
+ '<div class="tile-swatch ' + a.pat + '" aria-hidden="true"></div>' +
+ '<div class="tile-body">' +
+ '<span class="tile-name">' + a.label + '</span>' +
+ '<span class="tile-hint">' + a.hint + '</span>' +
+ '</div>';
+ btn.addEventListener('click', () => choose(a));
+ tilesEl.appendChild(btn);
+ });
+
+ // animate progress to current step after paint
+ requestAnimationFrame(() => {
+ progressFill.style.width = ((qIndex + 1) / QUESTIONS.length * 100) + '%';
+ });
+ }
+
+ function choose(answer) {
+ Object.keys(answer.scores).forEach((k) => {
+ scores[k] = (scores[k] || 0) + answer.scores[k];
+ });
+ qIndex++;
+ if (qIndex >= QUESTIONS.length) {
+ finish();
+ } else {
+ // brief exit then next
+ quiz.style.opacity = '0';
+ quiz.style.transition = 'opacity 0.2s var(--ease)';
+ setTimeout(() => {
+ quiz.style.opacity = '';
+ quiz.style.transition = '';
+ renderQuestion();
+ // restart fadeUp
+ quiz.classList.remove('active');
+ void quiz.offsetWidth;
+ quiz.classList.add('active');
+ }, 200);
+ }
+ }
+
+ function finish() {
+ let winner = 'damask';
+ let best = -1;
+ Object.keys(scores).forEach((k) => {
+ if (scores[k] > best) { best = scores[k]; winner = k; }
+ });
+ const style = STYLES[winner];
+ const swatch = $('#result-swatch');
+ swatch.className = 'result-swatch ' + style.swatch;
+ $('#result-title').textContent = style.name;
+ $('#result-desc').textContent = style.desc;
+ $('#result-tag').textContent = style.tag;
+ show(result);
+ }
+
+ function reset() {
+ Object.keys(scores).forEach((k) => { scores[k] = 0; });
+ qIndex = 0;
+ show(intro);
+ }
+
+ $('#btn-start').addEventListener('click', () => {
+ qIndex = 0;
+ Object.keys(scores).forEach((k) => { scores[k] = 0; });
+ renderQuestion();
+ show(quiz);
+ });
+
+ $('#btn-retry').addEventListener('click', reset);
+
+ $('#btn-shop').addEventListener('click', () => {
+ // In-page confirmation strip — no alert()
+ const btn = $('#btn-shop');
+ const prev = btn.textContent;
+ btn.textContent = 'Opening collection…';
+ btn.disabled = true;
+ setTimeout(() => {
+ btn.textContent = prev;
+ btn.disabled = false;
+ }, 1600);
+ });
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/grok.png b/data/artifacts/b0bfeedddee6/grok.png
new file mode 100644
index 0000000..b689b48
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/grok.png differ
diff --git a/data/artifacts/b0bfeedddee6/hermes3-8b.html b/data/artifacts/b0bfeedddee6/hermes3-8b.html
new file mode 100644
index 0000000..fcbc164
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/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>What's Your Wallcovering Style Quiz</title>
+<style>
+:root {
+ --bg: #f7efe6;
+ --surface: #fff9f1;
+ --text: #3a2c22;
+ --muted: #a08c7a;
+ --accent-bg: #c65f38;
+ --accent-fg: #e0a458;
+ --line: rgba(255,255,255,.12);
+ --shadow: rgba(0,0,0,.12);
+ --ease: cubic-bezier(.22,1,.36,1);
+}
+body {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ line-height: 1.4;
+ color: var(--text);
+ background-color: var(--bg);
+}
+.display {
+ font-size: 67px; letter-spacing: .15em;
+ margin-bottom: 8px; color: var(--muted);
+}
+body > * {
+ max-width: 960px; margin: 0 auto; padding: 96px;
+}
+header {
+ display: flex; align-items: center;
+ font-size: 72px; letter-spacing: .18em;
+ color: #1c1a17; background-color: #faf8f4;
+}
+.logo {
+ font-family: Apple Color Emoji, sans-serif;
+ font-size: 60vw; padding: 0 12px;
+}
+h2 {
+ margin-top: 32px;
+}
+card {
+ display: flex; align-items: center;
+ gap: 24px; padding: 16px 24px;
+ background-color: var(--surface); color: var(--text);
+ box-shadow: 0 8px 24px var(--shadow);
+ border-radius: 14px;
+ transition: transform .7s var(--ease), opacity .7s ease-in-out;
+}
+card:hover,
+.card.active {
+ transform: translateY(-16px); opacity: .9;
+}
+.question {
+ flex-grow: 1; font-size: 28px; margin-right: 24px;
+}
+button {
+ background-color: var(--accent-bg);
+ color: var(--surface);
+ border: none;
+ padding: 12px 24px;
+ font-family: 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ letter-spacing: .1em; text-transform: uppercase;
+ cursor: pointer;
+ transition: background-color .3s ease-in-out;
+}
+button:hover {
+ background-color: var(--accent-fg);
+}
+.result {
+ display: none;
+ place-content: center;
+ gap: 24px;
+ padding: 96px;
+}
+.overlay {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: rgba(0,0,0,.8);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+@media (max-width: 600px) {
+ header {
+ font-size: 48px; padding: 24px;
+ }
+ .logo {
+ font-size: 30vw;
+ }
+ h2 { margin-top: 20px; }
+ card, button {
+ gap: 12px;
+ padding: 8px 12px;
+ border-radius: 6px;
+ }
+ button {
+ padding: 10px 20px;
+ }
+}
+</style>
+<body>
+<header class="logo">
+ <span id="wordmark">DESIGNER WALLCOVERINGS</span>
+</header>
+<h2>What's Your Wallcovering Style?</h2>
+<div class="result">
+ <!-- Results will go here -->
+</div>
+<script>
+// Quiz logic and DOM manipulation goes here
+let score = {traditional:0, modern:0, bohemian:0, artdeco:0};
+const patterns = {
+ traditional: 'linear-gradient(45deg, #b7e4d3 25%, #f8d9c8 50%, #aee1d5 75%)',
+ modern: 'linear-gradient(45deg, #ececec 25%, #ffffff 50%, #dddddd 75%)',
+ bohemian: 'linear-gradient(45deg, #fce4ec 25%, #f9c8de 50%, #e6c3d5 75%)',
+ artdeco: 'linear-gradient(45deg, #f1eee6 25%, #ffffff 50%, #ededed 75%)'
+};
+const questions = [
+ {q:'Do you prefer classic or contemporary aesthetics?', a:'traditional', cards:[
+ {q:'A symphony of symmetry and detail', swatch:patterns.traditional},
+ {q:'Streamlined shapes and monochromatic palettes', swatch:patterns.modern}
+ ]},
+ {q:"Are you drawn to the exotic or the familiar?", a:'bohemian', cards:[
+ {q:'A fusion of global influences and textures', swatch:patterns.bohemian},
+ {q:'The comfort of the expected and traditional', swatch:patterns.traditional}
+ ]},
+ {q:"Do you appreciate opulence or minimalism?", a:'artdeco', cards:[
+ {q:'A celebration of luxury and grandeur', swatch:patterns.artdeco},
+ {q:'Simplicity and the beauty of less is more', swatch:patterns.modern}
+ ]},
+ {q:"Is your style more high-end or budget-friendly?", a:'modern', cards:[
+ {q:'An investment in timeless quality', swatch:patterns.traditional},
+ {q:'Affordable elegance for everyday life', swatch:patterns.modern}
+ ]},
+ {q:"Do you gravitate towards patterns or solids?", a:'bohemian', cards:[
+ {q:'A canvas for intricate designs and motifs', swatch:patterns.bohemian},
+ {q:'The purity and simplicity of solid colors', swatch:patterns.artdeco}
+ ]}
+];
+const resultCards = document.querySelector('.result');
+function showQuestion({q,a,cards}) {
+ let maxScore = cards.length;
+ const card = document.createElement('div');
+ for(const c of cards) {
+ const ca = document.createElement('div');
+ ca.className = 'card';
+ ca.innerHTML = `<span class="question">${c.q}</span>`;
+ if(c.swatch) {
+ ca.style.backgroundImage = c.swatch;
+ ca.onclick = () => {
+ score[a] += maxScore;
+ ca.classList.add('active');
+ setTimeout(() => {
+ card.appendChild(ca);
+ showQuestion(questions.shift());
+ }, 700);
+ };
+ }
+ card.appendChild(ca);
+ }
+ document.querySelector('.result').style.display = 'block';
+ resultCards.appendChild(card);
+}
+document.querySelector('.result').onclick = (e) => { if(e.target.tagName === 'DIV') e.stopPropagation(); };
+window.onclick = () => {
+ if(score['traditional'] + score['modern'] + score['bohemian'] + score['artdeco'] > 0)
+ showResult();
+ else
+ setTimeout(() => { questions.shift(); }, 700);
+};
+function showResult() {
+ resultCards.style.display = 'none';
+ const overlay = document.createElement('div');
+ overlay.className = 'overlay';
+ let desc = '';
+ switch(Math.max(...Object.values(score))) {
+ case score['traditional']: desc = 'Traditional Damask'; break;
+ case score['modern']: desc = 'Modern Minimalist'; break;
+ case score['bohemian']: desc = 'Bohemian Maximalist'; break;
+ case score['artdeco']: desc = 'Art Deco Glam'; break;
+ }
+ overlay.innerHTML = `
+ <div class="display">${Math.max(...Object.values(score))}</div>
+ <p>The style that resonates with you most is:</p>
+ <h2>${desc}</h2>
+ <p>A luxurious fusion of textures and colors</p>
+ <button>Shop this style</button>`;
+ document.body.appendChild(overlay);
+}
+showQuestion(questions.shift());
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/hermes3-8b.png b/data/artifacts/b0bfeedddee6/hermes3-8b.png
new file mode 100644
index 0000000..867f878
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/hermes3-8b.png differ
diff --git a/data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.html b/data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..11f6139
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>What's Your Wallcovering Style?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #dddcdc;
+ --shadow: rgba(0, 0, 0, .12);
+ --hover-shadow: rgba(0, 0, 0, .18);
+ --glow: rgba(176, 71, 46, .35);
+ --ease: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 16px;
+ }
+
+ header {
+ background-color: var(--surface);
+ width: 100%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ padding: 16px;
+ }
+
+ header h1 {
+ font-family: 'Playfair Display', Georgia, serif;
+ color: var(--text);
+ margin: 0;
+ font-size: 48px;
+ letter-spacing: .18em;
+ text-align: left;
+ }
+
+ main {
+ width: 90%;
+ max-width: 600px;
+ padding-top: 128px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ h2 {
+ font-family: 'Playfair Display', Georgia, serif;
+ color: var(--text);
+ margin-bottom: 48px;
+ text-align: center;
+ }
+
+ .question {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 32px;
+ }
+
+ .answer-tile {
+ background-color: var(--surface);
+ border-radius: 8px;
+ padding: 24px;
+ box-shadow: var(--shadow);
+ cursor: pointer;
+ transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: calc(50% - 8px);
+ }
+
+ .answer-tile:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--hover-shadow);
+ }
+
+ .result-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 32px;
+ width: 90%;
+ max-width: 600px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
+ text-align: center;
+ margin-top: 48px;
+ }
+
+ .result-card h3 {
+ font-family: 'Playfair Display', Georgia, serif;
+ color: var(--text);
+ margin-bottom: 24px;
+ }
+
+ .result-card p {
+ font-size: 1.25rem;
+ line-height: 1.6;
+ color: var(--muted);
+ margin-bottom: 32px;
+ }
+
+ .result-card button {
+ background-color: var(--accent);
+ color: var(--surface);
+ border: none;
+ padding: 12px 24px;
+ font-size: .875rem;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background-color .15s ease-in-out, transform .15s ease-in-out;
+ }
+
+ .result-card button:hover {
+ background-color: #963214;
+ transform: translateY(-2px);
+ }
+
+ .pattern-swatch {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 24px;
+ }
+
+ .traditional-damask {
+ background-image: linear-gradient(135deg, #c9a961 25%, transparent 25%),
+ linear-gradient(-135deg, #c9a961 25%, transparent 25%);
+ background-size: 40px 40px;
+ }
+
+ .modern-minimalist {
+ background-image: radial-gradient(circle at center, #b0472e 20%, transparent 20%);
+ background-size: 40px 40px;
+ }
+
+ .bohemian-maximalist {
+ background-image: linear-gradient(135deg, #c9a961 25%, transparent 25%),
+ linear-gradient(-135deg, #7d6a45 25%, transparent 25%);
+ background-size: 40px 40px;
+ }
+
+ .art-deco-glam {
+ background-image: repeating-linear-gradient(45deg, #c9a961, #c9a961 8px, transparent 8px, transparent 16px);
+ background-size: 40px 40px;
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+
+ .fade-up {
+ animation: fadeUp .7s var(--ease) both;
+ }
+
+ .fade-up-2 {
+ animation: fadeUp .7s var(--ease) .09s both;
+ }
+
+ .fade-up-3 {
+ animation: fadeUp .7s var(--ease) .18s both;
+ }
+ </style>
+</head>
+<body>
+<header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+</header>
+<main id="quiz">
+ <h2 class="fade-up">What's Your Wallcovering Style?</h2>
+ <div class="question fade-up-2">
+ <div class="answer-tile" onclick="selectAnswer(0, 'traditional')"></div>
+ <div class="answer-tile" onclick="selectAnswer(0, 'modern')"></div>
+ </div>
+ <div class="question fade-up-3">
+ <div class="answer-tile" onclick="selectAnswer(1, 'bohemian')"></div>
+ <div class="answer-tile" onclick="selectAnswer(1, 'artdeco')"></div>
+ </div>
+ <!-- Additional questions can be added here -->
+</main>
+<div id="result" style="display: none;">
+ <div class="result-card">
+ <h3 id="style-title"></h3>
+ <div id="pattern-swatch" class="pattern-swatch"></div>
+ <p id="style-description"></p>
+ <button onclick="location.href='#'">Shop this style</button>
+ </div>
+</div>
+
+<script>
+ let answers = [];
+
+ function selectAnswer(questionIndex, answer) {
+ if (questionIndex === 0) {
+ answers[questionIndex] = answer;
+ document.querySelector('.question.fade-up-2').style.display = 'flex';
+ } else if (questionIndex === 1) {
+ answers[questionIndex] = answer;
+ determineStyle();
+ }
+ }
+
+ function determineStyle() {
+ let styleScores = {
+ traditional: 0,
+ modern: 0,
+ bohemian: 0,
+ artdeco: 0
+ };
+
+ answers.forEach(answer => {
+ styleScores[answer]++;
+ });
+
+ let maxScore = Math.max(...Object.values(styleScores));
+ let selectedStyle = Object.keys(styleScores).find(key => styleScores[key] === maxScore);
+
+ document.getElementById('quiz').style.display = 'none';
+ document.getElementById('result').style.display = 'block';
+
+ switch (selectedStyle) {
+ case 'traditional':
+ document.getElementById('style-title').innerText = 'Traditional Damask';
+ document.getElementById('pattern-swatch').className = 'pattern-swatch traditional-damask';
+ document.getElementById('style-description').innerText = 'Elevate your space with intricate, timeless designs that exude sophistication and elegance.';
+ break;
+ case 'modern':
+ document.getElementById('style-title').innerText = 'Modern Minimalist';
+ document.getElementById('pattern-swatch').className = 'pattern-swatch modern-minimalist';
+ document.getElementById('style-description').innerText = 'Simplify your space with clean lines, neutral tones, and understated elegance.';
+ break;
+ case 'bohemian':
+ document.getElementById('style-title').innerText = 'Bohemian Maximalist';
+ document.getElementById('pattern-swatch').className = 'pattern-swatch bohemian-maximalist';
+ document.getElementById('style-description').innerText = 'Embrace a vibrant and eclectic style with bold patterns, rich textures, and an abundance of color.';
+ break;
+ case 'artdeco':
+ document.getElementById('style-title').innerText = 'Art Deco Glam';
+ document.getElementById('pattern-swatch').className = 'pattern-swatch art-deco-glam';
+ document.getElementById('style-description').innerText = 'Add a touch of glamour to your space with sleek, geometric patterns and metallic accents.';
+ break;
+ }
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.png b/data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..9aee0b0
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/b0bfeedddee6/kimi.html b/data/artifacts/b0bfeedddee6/kimi.html
new file mode 100644
index 0000000..e0c4b8f
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/kimi.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Designer Wallcoverings — Style Quiz</title>
+<style>
+/* DESIGN TOKENS — LUXURY PALETTE */
+:root{
+ /* Color System — luxe-noir */
+ --bg:#0d0d0f;
+ --surface:#17171c;
+ --text:#f5f2ea;
+ --muted:#8a8578;
+ --accent:#c9a961;
+ --accent-dim:#7d6a45;
+
+ /* Lines & Shadows */
+ --line:rgba(245,242,234,0.12);
+ --shadow:0 24px 48px rgba(0,0,0,0.45);
+
+ /* Typography */
+ --font-display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
+ --font-body:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ --text-display:50px;
+ --text-h1:38px;
+ --text-h2:28px;
+ --text-body:16px;
+ --text-caption:12px;
+
+ /* Spacing */
+ --space-xs:8px;
+ --space-sm:16px;
+ --space-md:24px;
+ --space-lg:48px;
+ --space-xl:96px;
+
+ /* Motion */
+ --ease-swift:cubic-bezier(.22,.9,.24,1);
+ --ease-power:cubic-bezier(.77,0,.18,1);
+ --ease-entrance:cubic-bezier(.22,1,.36,1);
+}
+
+/* RESET & BASE */
+*{box-sizing:border-box;margin:0;padding:0}
+html{height:100%}
+body{
+ min-height:100%;
+ background:var(--bg);
+ color:var(--text);
+ font-family:var(--font-body);
+ font-size:var(--text-body);
+ line-height:1.6;
+ -webkit-font-smoothing:antialiased;
+}
+
+/* HEADER — FIXED LUXURY WORDMARK */
+.header{
+ position:fixed;
+ top:0;left:0;right:0;
+ z-index:100;
+ background:var(--bg);
+ border-bottom:1px solid var(--line);
+ padding:var(--space-sm) var(--space-md);
+}
+.wordmark{
+ font-family:var(--font-display);
+ font-size:42px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ color:#1c1a17; /* DARKEST INK per requirements */
+ line-height:1.1;
+ max-width:280px;
+}
+
+/* MAIN QUIZ CONTAINER — 1080x1080 INSTAGRAM FORMAT */
+.quiz-wrapper{
+ min-height:100vh;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ padding:120px var(--space-md) var(--space-xl);
+}
+.quiz-card{
+ width:100%;
+ max-width:1080px;
+ aspect-ratio:1/1;
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:14px;
+ box-shadow:var(--shadow);
+ position:relative;
+ overflow:hidden;
+ display:flex;
+ flex-direction:column;
+}
+
+/* VIEW STATES */
+.view{
+ flex:1;
+ display:none;
+ padding:var(--space-lg);
+ flex-direction:column;
+ align-items:center;
+ justify-content:center;
+ text-align:center;
+ animation:fadeUp 0.7s var(--ease-entrance) both;
+}
+.view.active{display:flex}
+
+/* INTRO VIEW */
+.intro-headline{
+ font-family:var(--font-display);
+ font-size:var(--text-display);
+ letter-spacing:-0.02em;
+ line-height:1.05;
+ margin-bottom:var(--space-sm);
+ color:var(--text);
+}
+.intro-sub{
+ font-size:var(--text-body);
+ color:var(--muted);
+ margin-bottom:var(--space-lg);
+ max-width:45ch;
+}
+.btn-primary{
+ background:transparent;
+ color:var(--accent);
+ border:1px solid var(--accent);
+ padding:var(--space-sm) var(--space-lg);
+ font-family:var(--font-body);
+ font-size:11px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ cursor:pointer;
+ transition:all 0.3s var(--ease-swift);
+ border-radius:999px;
+}
+.btn-primary:hover{
+ background:var(--accent);
+ color:var(--bg);
+}
+
+/* QUESTION VIEW */
+.question-counter{
+ font-size:11px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ color:var(--muted);
+ margin-bottom:var(--space-md);
+}
+.question-text{
+ font-family:var(--font-display);
+ font-size:var(--text-h1);
+ margin-bottom:var(--space-lg);
+ max-width:30ch;
+ line-height:1.15;
+}
+.answers-grid{
+ display:grid;
+ grid-template-columns:repeat(2,1fr);
+ gap:var(--space-md);
+ width:100%;
+ max-width:720px;
+}
+.answer-tile{
+ position:relative;
+ aspect-ratio:16/10;
+ background:var(--bg);
+ border:1px solid var(--line);
+ border-radius:8px;
+ cursor:pointer;
+ overflow:hidden;
+ transition:transform 0.3s var(--ease-swift),border-color 0.3s var(--ease-swift);
+ display:flex;
+ align-items:flex-end;
+ padding:var(--space-sm);
+}
+.answer-tile:hover{
+ transform:translateY(-4px);
+ border-color:var(--accent);
+}
+.answer-pattern{
+ position:absolute;
+ inset:0;
+ opacity:0.4;
+ transition:opacity 0.3s var(--ease-swift);
+}
+.answer-tile:hover .answer-pattern{opacity:0.7}
+.answer-label{
+ position:relative;
+ z-index:2;
+ font-size:11px;
+ letter-spacing:0.12em;
+ text-transform:uppercase;
+ color:var(--text);
+ background:rgba(13,13,15,0.8);
+ padding:6px 12px;
+ border-radius:4px;
+ backdrop-filter:blur(4px);
+}
+
+/* PATTERN STYLES — CSS ILLUSTRATED */
+/* Traditional Damask — ornate baroque */
+.pattern-damask{
+ background-color:#1a1a1f;
+ background-image:
+ radial-gradient(circle at 30% 30%,rgba(201,169,97,0.15) 0%,transparent 50%),
+ radial-gradient(circle at 70% 70%,rgba(201,169,97,0.1) 0%,transparent 40%),
+ repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(201,169,97,0.03) 10px,rgba(201,169,97,0.03) 20px);
+}
+.pattern-damask::before{
+ content:'';position:absolute;inset:0;
+ background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5C25 15 15 25 5 30C15 35 25 45 30 55C35 45 45 35 55 30C45 25 35 15 30 5Z' fill='none' stroke='%23c9a961' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
+ opacity:0.6;
+}
+
+/* Modern Minimalist — clean geometric */
+.pattern-minimal{
+ background-color:#f5f2ea;
+ background-image:
+ linear-gradient(90deg,var(--line) 1px,transparent 1px),
+ linear-gradient(var(--line) 1px,transparent 1px);
+ background-size:40px 40px;
+}
+.pattern-minimal::before{
+ content:'';position:absolute;inset:0;
+ background:linear-gradient(135deg,transparent 40%,rgba(201,169,97,0.08) 50%,transparent 60%);
+}
+
+/* Bohemian Maximalist — organic layered */
+.pattern-bohemian{
+ background-color:#141416;
+ background-image:
+ radial-gradient(ellipse at 20% 80%,rgba(201,169,97,0.2) 0%,transparent 50%),
+ radial-gradient(ellipse at 80% 20%,rgba(139,90,60,0.15) 0%,transparent 45%),
+ radial-gradient(circle at 50% 50%,rgba(201,169,97,0.05) 0%,transparent 70%);
+}
+.pattern-bohemian::before{
+ content:'';position:absolute;inset:0;
+ background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,50 Q30,20 50,50 T90,50' fill='none' stroke='%23c9a961' stroke-width='0.8' opacity='0.15'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%238a8578' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
+}
+
+/* Art Deco Glam — bold geometric */
+.pattern-artdeco{
+ background-color:#0f0f12;
+ background-image:
+ repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(201,169,97,0.08) 35px,rgba(201,169,97,0.08) 70px),
+ repeating-linear-gradient(-45deg,transparent,transparent 35px,rgba(201,169,97,0.05) 35px,rgba(201,169,97,0.05) 70px);
+}
+.pattern-artdeco::before{
+ content:'';position:absolute;inset:0;
+ background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z' fill='none' stroke='%23c9a961' stroke-width='0.8' opacity='0.25'/%3E%3C/svg%3E");
+ opacity:0.8;
+}
+
+/* RESULT CARD */
+.result-content{
+ display:flex;
+ flex-direction:column;
+ align-items:center;
+ gap:var(--space-md);
+ max-width:600px;
+}
+.result-pattern{
+ width:320px;
+ height:320px;
+ border-radius:8px;
+ border:1px solid var(--line);
+ position:relative;
+ overflow:hidden;
+ box-shadow:0 16px 32px rgba(0,0,0,0.3);
+}
+.result-title{
+ font-family:var(--font-display);
+ font-size:var(--text-display);
+ letter-spacing:-0.02em;
+ color:var(--text);
+ margin-top:var(--space-sm);
+}
+.result-desc{
+ font-size:var(--text-body);
+ color:var(--muted);
+ line-height:1.7;
+ max-width:45ch;
+}
+.cta-button{
+ margin-top:var(--space-sm);
+ background:var(--accent);
+ color:var(--bg);
+ border:none;
+ padding:var(--space-sm) var(--space-lg);
+ font-family:var(--font-body);
+ font-size:11px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ cursor:pointer;
+ border-radius:999px;
+ transition:transform 0.3s var(--ease-swift),box-shadow 0.3s var(--ease-swift);
+ font-weight:600;
+}
+.cta-button:hover{
+ transform:translateY(-2px);
+ box-shadow:0 8px 24px rgba(201,169,97,0.25);
+}
+
+/* PROGRESS INDICATOR */
+.progress-bar{
+ position:absolute;
+ top:0;left:0;right:0;
+ height:2px;
+ background:var(--line);
+ z-index:10;
+}
+.progress-fill{
+ height:100%;
+ background:var(--accent);
+ width:0%;
+ transition:width 0.5s var(--ease-power);
+}
+
+/* ANIMATIONS */
+@keyframes fadeUp{
+ from{opacity:0;transform:translateY(28px)}
+ to{opacity:1;transform:none}
+}
+@keyframes scaleIn{
+ from{opacity:0;transform:scale(0.92)}
+ to{opacity:1;transform:none}
+}
+
+/* RESPONSIVE */
+@media(max-width:768px){
+ .wordmark{font-size:32px;max-width:220px}
+ .answers-grid{grid-template-columns:1fr;gap:var(--space-sm)}
+ .result-pattern{width:240px;height:240px}
+ .intro-headline{font-size:var(--text-h1)}
+ .question-text{font-size:var(--text-h2)}
+}
+</style>
+</head>
+<body>
+
+<!-- LUXURY HEADER — WORDMARK DOM ELEMENT REQUIRED -->
+<header class="header">
+ <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<!-- QUIZ CONTAINER -->
+<div class="quiz-wrapper">
+ <div class="quiz-card">
+ <div class="progress-bar"><div class="progress-fill" id="progress"></div></div>
+
+ <!-- INTRO VIEW -->
+ <div class="view active" id="view-intro">
+ <h1 class="intro-headline">What's Your<br>Wallcovering Style?</h1>
+ <p class="intro-sub">Discover your interior design persona through five curated questions. From timeless damasks to bold Art Deco statements—find the pattern that speaks to your space.</p>
+ <button class="btn-primary" onclick="startQuiz()">Begin the Quiz</button>
+ </div>
+
+ <!-- QUESTION VIEWS (Generated via JS) -->
+ <div class="view" id="view-question">
+ <div class="question-counter" id="counter">Question 1 of 5</div>
+ <h2 class="question-text" id="question-text">Your ideal Sunday morning begins in a room that feels...</h2>
+ <div class="answers-grid" id="answers-container"></div>
+ </div>
+
+ <!-- RESULT VIEW -->
+ <div class="view" id="view-result">
+ <div class="result-content">
+ <div class="result-pattern" id="result-pattern"></div>
+ <h2 class="result-title" id="result-title">Traditional Damask</h2>
+ <p class="result-desc" id="result-desc">You gravitate toward heritage and craftsmanship. Ornate botanicals and baroque flourishes speak to your appreciation for timeless elegance and layered history.</p>
+ <button class="cta-button" onclick="resetQuiz()">Shop This Style</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+// QUIZ DATA — 5 Questions mapping to 4 styles
+const questions=[
+ {
+ text:"Your ideal Sunday morning begins in a room that feels...",
+ answers:[
+ {text:"Grand and timeless",style:"damask",pattern:"pattern-damask"},
+ {text:"Serene and uncluttered",style:"minimal",pattern:"pattern-minimal"},
+ {text:"Layered with stories",style:"bohemian",pattern:"pattern-bohemian"},
+ {text:"Dramatic and bold",style:"artdeco",pattern:"pattern-artdeco"}
+ ]
+ },
+ {
+ text:"Which museum wing calls to you first?",
+ answers:[
+ {text:"European Decorative Arts",style:"damask",pattern:"pattern-damask"},
+ {text:"Contemporary Minimalism",style:"minimal",pattern:"pattern-minimal"},
+ {text:"Textile & Folk Collections",style:"bohemian",pattern:"pattern-bohemian"},
+ {text:"Roaring Twenties Design",style:"artdeco",pattern:"pattern-artdeco"}
+ ]
+ },
+ {
+ text:"Choose a signature scent for your space:",
+ answers:[
+ {text:"Aged leather and amber",style:"damask",pattern:"pattern-damask"},
+ {text:"White tea and linen",style:"minimal",pattern:"pattern-minimal"},
+ {text:"Sandalwood and patchouli",style:"bohemian",pattern:"pattern-bohemian"},
+ {text:"Black pepper and oud",style:"artdeco",pattern:"pattern-artdeco"}
+ ]
+ },
+ {
+ text:"The perfect accent chair would feature...",
+ answers:[
+ {text:"Tufted velvet in burgundy",style:"damask",pattern:"pattern-damask"},
+ {text:"Clean lines in natural oak",style:"minimal",pattern:"pattern-minimal"},
+ {text:"Woven rattan with cushions",style:"bohemian",pattern:"pattern-bohemian"},
+ {text:"Mirrored surfaces and gold",style:"artdeco",pattern:"pattern-artdeco"}
+ ]
+ },
+ {
+ text:"Your dream dinner party aesthetic:",
+ answers:[
+ {text:"Candelabras and heirlooms",style:"damask",pattern:"pattern-damask"},
+ {text:"Monochrome ceramics",style:"minimal",pattern:"pattern-minimal"},
+ {text:"Eclectic vintage mix",style:"bohemian",pattern:"pattern-bohemian"},
+ {text:"Champagne towers and chrome",style:"artdeco",pattern:"pattern-artdeco"}
+ ]
+ }
+];
+
+const results={
+ damask:{
+ title:"Traditional Damask",
+ desc:"You gravitate toward heritage and craftsmanship. Ornate botanicals and baroque flourishes speak to your appreciation for timeless elegance and layered history.",
+ pattern:"pattern-damask"
+ },
+ minimal:{
+ title:"Modern Minimalist",
+ desc:"Quiet luxury defines your aesthetic. You seek calm through negative space, finding beauty in restraint, precision, and the poetry of simple forms.",
+ pattern:"pattern-minimal"
+ },
+ bohemian:{
+ title:"Bohemian Maximalist",
+ desc:"Your space tells a story of travels and textures. Layered patterns, organic motifs, and collected objects create an atmosphere of creative warmth.",
+ pattern:"pattern-bohemian"
+ },
+ artdeco:{
+ title:"Art Deco Glam",
+ desc:"Bold geometry and metallic sophistication define your vision. You embrace drama, symmetry, and the golden-age glamour of modernist luxury.",
+ pattern:"pattern-artdeco"
+ }
+};
+
+// STATE
+let currentQ=0;
+let scores={damask:0,minimal:0,bohemian:0,artdeco:0};
+
+function startQuiz(){
+ currentQ=0;
+ scores={damask:0,minimal:0,bohemian:0,artdeco:0};
+ document.getElementById('view-intro').classList.remove('active');
+ document.getElementById('view-question').classList.add('active');
+ renderQuestion();
+ updateProgress();
+}
+
+function renderQuestion(){
+ const q=questions[currentQ];
+ document.getElementById('counter').textContent=`Question ${currentQ+1} of ${questions.length}`;
+ document.getElementById('question-text').textContent=q.text;
+
+ const container=document.getElementById('answers-container');
+ container.innerHTML='';
+
+ q.answers.forEach((ans,idx)=>{
+ const tile=document.createElement('div');
+ tile.className='answer-tile';
+ tile.style.animationDelay=`${idx*90}ms`;
+ tile.innerHTML=`
+ <div class="answer-pattern ${ans.pattern}"></div>
+ <span class="answer-label">${ans.text}</span>
+ `;
+ tile.onclick=()=>selectAnswer(ans.style);
+ container.appendChild(tile);
+ });
+}
+
+function selectAnswer(style){
+ scores[style]++;
+ currentQ++;
+ updateProgress();
+
+ if(currentQ<questions.length){
+ // Fade out and render next
+ const view=document.getElementById('view-question');
+ view.style.animation='none';
+ setTimeout(()=>{
+ view.style.animation='fadeUp 0.5s cubic-bezier(.22,1,.36,1) both';
+ renderQuestion();
+ },50);
+ }else{
+ showResult();
+ }
+}
+
+function updateProgress(){
+ const pct=((currentQ)/questions.length)*100;
+ document.getElementById('progress').style.width=`${pct}%`;
+}
+
+function showResult(){
+ document.getElementById('view-question').classList.remove('active');
+ document.getElementById('view-result').classList.add('active');
+
+ // Determine winner
+ let winner=Object.entries(scores).sort((a,b)=>b[1]-a[1])[0][0];
+ const result=results[winner];
+
+ document.getElementById('result-title').textContent=result.title;
+ document.getElementById('result-desc').textContent=result.desc;
+
+ const patternDiv=document.getElementById('result-pattern');
+ patternDiv.className=`result-pattern ${result.pattern}`;
+}
+
+function resetQuiz(){
+ // Reset to intro
+ document.getElementById('view-result').classList.remove('active');
+ document.getElementById('view-intro').classList.add('active');
+ document.getElementById('progress').style.width='0%';
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/kimi.png b/data/artifacts/b0bfeedddee6/kimi.png
new file mode 100644
index 0000000..659a84a
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/kimi.png differ
diff --git a/data/artifacts/b0bfeedddee6/qwen25-7b.html b/data/artifacts/b0bfeedddee6/qwen25-7b.html
new file mode 100644
index 0000000..921f6dd
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/qwen25-7b.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>DESIGNER WALLCOVERINGS Quiz</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: 1px solid rgba(255, 255, 255, 0.1);
+ --shadow-card: 0 8px 24px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.18);
+ --shadow-glow: 0 0 24px var(--accent)@35%;
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: 'Didot', 'Bodoni MT', Georgia, serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ header {
+ text-align: left;
+ color: var(--text);
+ font-size: 56px;
+ letter-spacing: .2em;
+ margin-bottom: 48px;
+ }
+ .quiz-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 32px;
+ }
+ .question-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 24px;
+ box-shadow: var(--shadow-card);
+ width: 500px;
+ text-align: center;
+ margin-bottom: 32px;
+ position: relative;
+ }
+ .question-title {
+ font-size: 38px;
+ color: var(--text);
+ letter-spacing: .15em;
+ margin-bottom: 24px;
+ }
+ .answer-tile {
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 20px;
+ width: 300px;
+ height: 200px;
+ box-shadow: var(--shadow-card), inset 0 -5px 8px rgba(0,0,0,.1);
+ margin-bottom: 24px;
+ }
+ .result-card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 32px;
+ box-shadow: var(--shadow-card), var(--shadow-glow);
+ width: 500px;
+ text-align: center;
+ margin-top: 96px;
+ }
+ .result-title {
+ font-size: 48px;
+ color: var(--text);
+ letter-spacing: .15em;
+ margin-bottom: 24px;
+ }
+ .result-swatch {
+ width: 300px;
+ height: 200px;
+ border-radius: 14px;
+ box-shadow: inset 0 -5px 8px rgba(0,0,0,.1);
+ background-color: var(--accent);
+ }
+ .result-description {
+ font-size: 16px;
+ color: var(--muted);
+ }
+ .shop-button {
+ display: inline-block;
+ padding: 12px 32px;
+ margin-top: 24px;
+ background-color: var(--accent);
+ color: white;
+ text-align: center;
+ text-decoration: none;
+ font-size: 16px;
+ border-radius: 8px;
+ transition: all .3s ease-in-out;
+ }
+ .shop-button:hover {
+ transform: scale(1.05);
+ box-shadow: var(--shadow-card), inset 0 -7px 9px rgba(0,0,0,.12);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ DESIG<em>NER WALLCOVERINGS</em>
+ </header>
+ <div class="quiz-container">
+ <div class="question-card">
+ <h3 class="question-title">What is your favorite wallcovering texture?</h3>
+ <div class="answer-tile" data-style="Traditional Damask"></div>
+ <div class="answer-tile" data-style="Modern Minimalist"></div>
+ <div class="answer-tile" data-style="Bohemian Maximalist"></div>
+ <div class="answer-tile" data-style="Art Deco Glam"></div>
+ </div>
+ <!-- More questions would be added here -->
+ </div>
+ <div class="result-card">
+ <h3 class="result-title">Your Wallcovering Style is:</h3>
+ <div class="result-swatch"></div>
+ <p class="result-description">Experience the beauty and elegance of our <strong>Art Deco Glam</strong> style, where luxurious patterns meet refined aesthetics.</p>
+ <a href="#" class="shop-button">Shop this style</a>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/qwen25-7b.png b/data/artifacts/b0bfeedddee6/qwen25-7b.png
new file mode 100644
index 0000000..07b5e65
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/qwen25-7b.png differ
diff --git a/data/artifacts/b0bfeedddee6/qwen3-14b.html b/data/artifacts/b0bfeedddee6/qwen3-14b.html
new file mode 100644
index 0000000..89db412
--- /dev/null
+++ b/data/artifacts/b0bfeedddee6/qwen3-14b.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>What's Your Wallcovering Style?</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: #1c1a17;
+ --shadow: 0 8px 24px rgba(0,0,0,0.12);
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --radius: 14px;
+ --spacing: 16px;
+ --transition: 150ms ease-in-out;
+ --glow: 0 0 24px rgba(var(--accent), 0.35);
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+ }
+
+ header {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 48px;
+ letter-spacing: 0.18em;
+ color: var(--text);
+ padding: 16px 24px;
+ background-color: var(--surface);
+ display: flex;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ }
+
+ main {
+ padding-top: 80px;
+ padding-bottom: 96px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ overflow-y: auto;
+ scroll-behavior: smooth;
+ }
+
+ .question {
+ max-width: 600px;
+ width: 100%;
+ text-align: center;
+ margin-bottom: 48px;
+ font-size: 24px;
+ line-height: 1.6;
+ }
+
+ .tile-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .tile {
+ background-color: var(--surface);
+ padding: 24px;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ cursor: pointer;
+ transition: transform var(--transition), box-shadow var(--transition);
+ box-shadow: var(--shadow);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .tile::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg, transparent 25%, var(--accent) 25%, var(--accent) 75%, transparent 75%);
+ z-index: 0;
+ opacity: 0;
+ transition: opacity var(--transition);
+ }
+
+ .tile:hover::after {
+ opacity: 0.1;
+ }
+
+ .tile:hover {
+ transform: scale(1.02);
+ box-shadow: var(--shadow), var(--glow);
+ }
+
+ .tile h3 {
+ font-size: 18px;
+ margin-bottom: 12px;
+ color: var(--text);
+ font-weight: 600;
+ position: relative;
+ z-index: 1;
+ }
+
+ .tile p {
+ font-size: 14px;
+ color: var(--muted);
+ line-height: 1.4;
+ }
+
+ .result {
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 96px 24px;
+ text-align: center;
+ min-height: 1080px;
+ background-color: var(--surface);
+ }
+
+ .result.show {
+ display: flex;
+ }
+
+ .result h2 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ margin-bottom: 24px;
+ color: var(--text);
+ letter-spacing: 0.1em;
+ }
+
+ .result .pattern {
+ width: 100%;
+ height: 400px;
+ background: repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 10px, var(--surface) 10px, var(--surface) 20px);
+ border-radius: var(--radius);
+ margin-bottom: 32px;
+ }
+
+ .result p {
+ font-size: 18px;
+ color: var(--muted);
+ margin-bottom: 32px;
+ max-width: 600px;
+ width: 100%;
+ }
+
+ .result button {
+ background: var(--accent);
+ color: var(--text);
+ border: none;
+ padding: 16px 32px;
+ border-radius: var(--radius);
+ font-size: 16px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: transform var(--transition);
+ }
+
+ .result button:hover {
+ transform: scale(1.05);
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .fade-up {
+ animation: fadeUp 0.7s var(--ease) both;
+ }
+
+ .fade-up-delayed {
+ animation-delay: 0.1s;
+ }
+
+ @keyframes drift {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: 100% 100%;
+ }
+ }
+
+ body {
+ background: linear-gradient(135deg, var(--bg) 0%, var(--bg) 50%, var(--surface) 50%, var(--surface) 100%);
+ background-size: 400% 400%;
+ animation: drift 18s linear infinite;
+ }
+ </style>
+</head>
+<body>
+ <header>DESIGNER WALLCOVERINGS</header>
+ <main>
+ <div class="question fade-up">What's Your Wallcovering Style?</div>
+ <div class="tile-container">
+ <div class="tile fade-up" onclick="selectAnswer('traditional')">
+ <h3>Classic Elegance</h3>
+ <p>Timeless patterns and refined details.</p>
+ </div>
+ <div class="tile fade-up" onclick="selectAnswer('minimalist')">
+ <h3>Clean Lines</h3>
+ <p>Simple, uncluttered, and modern.</p>
+ </div>
+ <div class="tile fade-up" onclick="selectAnswer('bohemian')">
+ <h3>Eclectic Mix</h3>
+ <p>Rich textures and vibrant colors.</p>
+ </div>
+ <div class="tile fade-up" onclick="selectAnswer('artdeco')">
+ <h3>Gilded Glamour</h3>
+ <p>Opulence and symmetry in every detail.</p>
+ </div>
+ </div>
+ </main>
+
+ <div class="result" id="result">
+ <div class="pattern" id="pattern"></div>
+ <h2 id="style"></h2>
+ <p id="description"></p>
+ <button id="shop">Shop this style</button>
+ </div>
+
+ <script>
+ const answers = [];
+ const styles = {
+ traditional: {
+ name: "Traditional Damask",
+ description: "A style steeped in history, with intricate damask patterns that exude timeless elegance and refined opulence.",
+ pattern: "repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 10px, var(--surface) 10px, var(--surface) 20px)"
+ },
+ minimalist: {
+ name: "Modern Minimalist",
+ description: "Clean, uncluttered, and focused on form and function, with subtle textures and muted tones.",
+ pattern: "repeating-linear-gradient(90deg, var(--surface) 0, var(--surface) 40px, var(--accent) 40px, var(--accent) 60px)"
+ },
+ bohemian: {
+ name: "Bohemian Maximalist",
+ description: "A rich tapestry of colors, textures, and patterns that celebrate individuality and artistic flair.",
+ pattern: "repeating-conic-gradient(var(--accent) 0 10%, var(--surface) 10% 20%, var(--accent) 20% 30%)"
+ },
+ artdeco: {
+ name: "Art Deco Glam",
+ description: "A bold, geometric style inspired by the roaring twenties, with luxurious materials and striking symmetry.",
+ pattern: "repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 20px, var(--surface) 20px, var(--surface) 40px)"
+ }
+ };
+
+ function selectAnswer(style) {
+ answers.push(style);
+ if (answers.length === 5) {
+ showResult();
+ }
+ }
+
+ function showResult() {
+ const resultEl = document.getElementById("result");
+ const style = determineStyle(answers);
+ const styleData = styles[style];
+
+ document.getElementById("style").textContent = styleData.name;
+ document.getElementById("description").textContent = styleData.description;
+ document.getElementById("pattern").style.background = styleData.pattern;
+ document.getElementById("shop").textContent = "Shop this style";
+
+ resultEl.classList.add("show");
+ }
+
+ function determineStyle(answers) {
+ const counts = {
+ traditional: 0,
+ minimalist: 0,
+ bohemian: 0,
+ artdeco: 0
+ };
+
+ answers.forEach(answer => {
+ counts[answer]++;
+ });
+
+ let max = 0, style = '';
+ for (const key in counts) {
+ if (counts[key] > max) {
+ max = counts[key];
+ style = key;
+ }
+ }
+
+ return style;
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/b0bfeedddee6/qwen3-14b.png b/data/artifacts/b0bfeedddee6/qwen3-14b.png
new file mode 100644
index 0000000..cdcf93d
Binary files /dev/null and b/data/artifacts/b0bfeedddee6/qwen3-14b.png differ
diff --git a/data/artifacts/e2ddb50bc672/claude-code.html b/data/artifacts/e2ddb50bc672/claude-code.html
new file mode 100644
index 0000000..87242ae
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/claude-code.html
@@ -0,0 +1,484 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style Showdown — Designer Wallcoverings</title>
+<style>
+ :root{
+ --bg:#0d0d0f;
+ --surface:#17171c;
+ --surface-2:#1e1e24;
+ --ink:#f5f2ea;
+ --text:#1c1a17;
+ --muted:#8a8578;
+ --accent:#c9a961;
+ --accent-deep:#7d6a45;
+ --line:rgba(201,169,97,.28);
+ --hair:rgba(245,242,234,.10);
+ --shadow:0 8px 24px rgba(0,0,0,.45);
+ --shadow-hi:0 20px 60px rgba(0,0,0,.6);
+ --glow:0 0 28px rgba(201,169,97,.35);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{height:100%}
+ body{
+ background:var(--bg);
+ color:var(--ink);
+ font-family:var(--sans);
+ -webkit-font-smoothing:antialiased;
+ min-height:100%;
+ overflow-x:hidden;
+ position:relative;
+ }
+ body::before{
+ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
+ background:
+ radial-gradient(1200px 600px at 15% -10%, rgba(201,169,97,.10), transparent 60%),
+ radial-gradient(900px 500px at 100% 110%, rgba(125,106,69,.12), transparent 60%);
+ animation:drift 22s ease-in-out infinite alternate;
+ }
+ @keyframes drift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,1%,0)}}
+
+ /* ---------- Header / Wordmark ---------- */
+ header.topbar{
+ position:sticky;top:0;z-index:20;
+ display:flex;align-items:center;justify-content:space-between;
+ gap:24px;
+ padding:18px 28px;
+ background:linear-gradient(180deg, rgba(13,13,15,.96), rgba(13,13,15,.78));
+ border-bottom:1px solid var(--hair);
+ backdrop-filter:blur(8px);
+ }
+ .wordmark{
+ display:flex;flex-direction:column;line-height:.98;
+ color:var(--ink);
+ }
+ .wordmark .brand{
+ font-family:var(--serif);
+ color:var(--ink);
+ font-weight:600;
+ text-transform:uppercase;
+ letter-spacing:.18em;
+ font-size:42px;
+ white-space:nowrap;
+ }
+ .wordmark .sub{
+ font-family:var(--sans);
+ text-transform:uppercase;
+ letter-spacing:.34em;
+ font-size:10px;
+ color:var(--accent);
+ margin-top:7px;
+ padding-left:3px;
+ }
+ .scoreboard{
+ font-family:var(--sans);
+ text-transform:uppercase;
+ letter-spacing:.15em;
+ font-size:11px;
+ color:var(--muted);
+ text-align:right;
+ white-space:nowrap;
+ }
+ .scoreboard b{color:var(--accent);font-weight:600}
+
+ /* ---------- Stage ---------- */
+ main{position:relative;z-index:1;padding:40px 20px 90px;max-width:1080px;margin:0 auto}
+ .roundhead{text-align:center;margin-bottom:34px;animation:fadeUp .7s var(--ease) both}
+ .roundhead .stage{
+ font-family:var(--sans);text-transform:uppercase;letter-spacing:.32em;
+ font-size:11px;color:var(--accent);margin-bottom:12px;
+ }
+ .roundhead h1{
+ font-family:var(--serif);font-weight:600;
+ font-size:52px;letter-spacing:.01em;color:var(--ink);
+ }
+ .roundhead .hint{
+ margin-top:12px;color:var(--muted);font-size:14px;letter-spacing:.02em;
+ }
+ .progress{
+ display:flex;justify-content:center;gap:10px;margin-top:20px;
+ }
+ .progress span{
+ width:34px;height:2px;background:var(--hair);border-radius:2px;transition:background .4s var(--ease);
+ }
+ .progress span.on{background:var(--accent)}
+
+ .matchups{display:flex;flex-direction:column;gap:30px}
+ .match{
+ display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;gap:0;
+ animation:fadeUp .7s var(--ease) both;
+ }
+ .vs{
+ display:flex;align-items:center;justify-content:center;
+ font-family:var(--serif);font-style:italic;font-size:24px;color:var(--muted);
+ position:relative;
+ }
+ .vs::before,.vs::after{
+ content:"";position:absolute;left:50%;width:1px;height:calc(50% - 24px);
+ background:var(--hair);
+ }
+ .vs::before{top:0}.vs::after{bottom:0}
+
+ .tile{
+ position:relative;
+ background:var(--surface);
+ border:1px solid var(--hair);
+ border-radius:14px;
+ overflow:hidden;
+ cursor:pointer;
+ box-shadow:var(--shadow);
+ transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),opacity .5s var(--ease);
+ display:flex;flex-direction:column;
+ min-height:210px;
+ }
+ .tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-hi),var(--glow);border-color:var(--line)}
+ .tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
+ .swatch{flex:1;position:relative;min-height:150px}
+ .swatch svg{position:absolute;inset:0;width:100%;height:100%;display:block}
+ .tile .cap{
+ display:flex;align-items:center;justify-content:space-between;gap:8px;
+ padding:14px 18px;border-top:1px solid var(--hair);
+ background:linear-gradient(180deg,rgba(23,23,28,.2),var(--surface));
+ }
+ .tile .name{
+ font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);letter-spacing:.01em;
+ }
+ .tile .pick{
+ font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:10px;
+ color:var(--accent);border:1px solid var(--line);border-radius:20px;padding:5px 11px;
+ transition:background .2s var(--ease),color .2s var(--ease);white-space:nowrap;
+ }
+ .tile:hover .pick{background:var(--accent);color:var(--bg)}
+
+ .tile.win{animation:crown .8s var(--ease) both}
+ .tile.lose{opacity:.12;filter:grayscale(.7);transform:scale(.96)}
+ @keyframes crown{
+ 0%{transform:scale(1)}
+ 35%{transform:scale(1.05);box-shadow:var(--shadow-hi),var(--glow);border-color:var(--accent)}
+ 100%{transform:scale(1);box-shadow:var(--shadow-hi),var(--glow);border-color:var(--accent)}
+ }
+
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+ /* ---------- Result overlay ---------- */
+ .overlay{
+ position:fixed;inset:0;z-index:40;display:none;
+ align-items:center;justify-content:center;padding:24px;
+ background:rgba(6,6,8,.82);backdrop-filter:blur(6px);
+ }
+ .overlay.show{display:flex;animation:ovin .5s var(--ease) both}
+ @keyframes ovin{from{opacity:0}to{opacity:1}}
+ .card{
+ width:min(440px,94vw);
+ background:linear-gradient(180deg,var(--surface-2),var(--surface));
+ border:1px solid var(--line);
+ border-radius:18px;
+ box-shadow:var(--shadow-hi),var(--glow);
+ overflow:hidden;
+ animation:cardin .7s var(--ease) both;
+ }
+ @keyframes cardin{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
+ .card .crownline{
+ text-align:center;padding:26px 24px 8px;
+ }
+ .card .crownline .tag{
+ font-family:var(--sans);text-transform:uppercase;letter-spacing:.34em;font-size:10px;color:var(--accent);
+ }
+ .card .crownline .champ{
+ font-family:var(--serif);font-size:46px;font-weight:600;color:var(--ink);margin-top:8px;line-height:1;
+ }
+ .card .bigswatch{height:190px;position:relative;margin:18px 24px 0;border-radius:12px;overflow:hidden;border:1px solid var(--hair)}
+ .card .bigswatch svg{position:absolute;inset:0;width:100%;height:100%}
+ .card .meta{
+ padding:18px 26px 6px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.5;letter-spacing:.01em;
+ }
+ .card .path{
+ display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
+ padding:6px 26px 20px;
+ }
+ .card .path span{
+ font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;
+ color:var(--muted);border:1px solid var(--hair);border-radius:14px;padding:4px 9px;
+ }
+ .card .actions{
+ display:flex;gap:12px;padding:6px 26px 26px;
+ }
+ .btn{
+ flex:1;text-align:center;cursor:pointer;
+ font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
+ padding:14px 12px;border-radius:12px;border:1px solid var(--line);
+ background:transparent;color:var(--ink);
+ transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease);
+ }
+ .btn:hover{transform:translateY(-2px)}
+ .btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
+ .btn.primary:hover{box-shadow:var(--glow)}
+ .btn.ghost:hover{background:var(--surface-2);border-color:var(--accent)}
+ .toast{
+ position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
+ z-index:60;background:var(--surface-2);border:1px solid var(--line);
+ color:var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
+ padding:12px 20px;border-radius:30px;box-shadow:var(--shadow);opacity:0;pointer-events:none;
+ transition:opacity .3s var(--ease),transform .3s var(--ease);
+ }
+ .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+
+ @media(max-width:640px){
+ .wordmark .brand{font-size:clamp(20px,7.4vw,40px)}
+ .roundhead h1{font-size:40px}
+ .match{grid-template-columns:1fr 44px 1fr}
+ .tile .name{font-size:21px}
+ .swatch{min-height:120px}
+ .tile{min-height:180px}
+ }
+</style>
+</head>
+<body>
+ <header class="topbar">
+ <div class="wordmark">
+ <span class="brand">Designer Wallcoverings</span>
+ <span class="sub">Style Showdown</span>
+ </div>
+ <div class="scoreboard" id="scoreboard">ROUND <b>1</b> / 3 · <b>8</b> STYLES</div>
+ </header>
+
+ <main>
+ <div class="roundhead" id="roundhead">
+ <div class="stage" id="stageLabel">Quarterfinals</div>
+ <h1 id="roundTitle">Choose Your Champion</h1>
+ <div class="hint" id="roundHint">Tap the style you love more in each pairing.</div>
+ <div class="progress" id="progress">
+ <span class="on"></span><span></span><span></span>
+ </div>
+ </div>
+ <div class="matchups" id="matchups"></div>
+ </main>
+
+ <div class="overlay" id="overlay">
+ <div class="card">
+ <div class="crownline">
+ <div class="tag">Your Winning Style</div>
+ <div class="champ" id="champName">—</div>
+ </div>
+ <div class="bigswatch" id="champSwatch"></div>
+ <div class="meta" id="champMeta"></div>
+ <div class="path" id="champPath"></div>
+ <div class="actions">
+ <button class="btn primary" id="shareBtn">Share Result</button>
+ <button class="btn ghost" id="againBtn">Play Again</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="toast" id="toast"></div>
+
+<script>
+(function(){
+ "use strict";
+
+ // ---- Distinct CSS/SVG swatch motifs (no external images) ----
+ function swatch(id){
+ switch(id){
+ case 'damask': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><defs><pattern id="dm" width="60" height="80" patternUnits="userSpaceOnUse"><rect width="60" height="80" fill="#241f16"/><g fill="none" stroke="#c9a961" stroke-width="1.6"><path d="M30 6 C46 18 46 34 30 42 C14 34 14 18 30 6Z"/><path d="M30 42 C40 52 40 64 30 74 C20 64 20 52 30 42Z"/><circle cx="30" cy="24" r="4" fill="#c9a961" stroke="none"/><path d="M12 40 q8 6 0 14 M48 40 q-8 6 0 14"/></g></pattern></defs><rect width="120" height="120" fill="url(#dm)"/></svg>`;
+ case 'toile': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><rect width="120" height="120" fill="#f2ead8"/><g fill="none" stroke="#4a5b6e" stroke-width="1.1" opacity=".9"><path d="M8 96 q14-26 34-24 q22 2 24-22"/><circle cx="34" cy="70" r="7"/><path d="M27 70 l-6 14 M41 70 l6 14"/><path d="M78 40 q10-14 24-6"/><path d="M70 100 q6-16 24-14"/><circle cx="96" cy="30" r="3"/><path d="M96 33 l0 12 M92 46 l8 0"/><path d="M14 40 q10-8 20 0" /><circle cx="24" cy="34" r="2.4" fill="#4a5b6e"/></g></svg>`;
+ case 'ikat': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="ik" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2a4a55"/><stop offset="1" stop-color="#153039"/></linearGradient><filter id="blur"><feGaussianBlur stdDeviation="1.6"/></filter></defs><rect width="120" height="120" fill="url(#ik)"/><g filter="url(#blur)" fill="none" stroke="#e0b3a0" stroke-width="3" stroke-dasharray="5 4"><path d="M60 8 L96 60 L60 112 L24 60 Z"/><path d="M60 30 L80 60 L60 90 L40 60 Z" stroke="#c9a961"/></g><path d="M60 52 L68 60 L60 68 L52 60 Z" fill="#e0b3a0" filter="url(#blur)"/></svg>`;
+ case 'chino': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><rect width="120" height="120" fill="#12312b"/><g fill="none" stroke="#c9a961" stroke-width="1.3"><path d="M20 118 C24 80 40 66 34 30 C32 18 40 10 48 8"/><path d="M34 60 q16-8 26 2 M30 40 q14-10 26 0 M36 82 q14-6 24 4"/><g stroke-width="1"><path d="M84 24 q10 2 12 12 q-12 2 -14 -8Z" fill="#e8d9a8" fill-opacity=".25"/><path d="M84 24 q-10 2 -12 12 q12 2 14 -8Z" fill="#e8d9a8" fill-opacity=".25"/><circle cx="84" cy="28" r="2.2" fill="#c9a961"/></g><circle cx="46" cy="30" r="3" fill="#e0b3a0" stroke="none"/><circle cx="30" cy="48" r="2.4" fill="#e0b3a0" stroke="none"/></g></svg>`;
+ case 'deco': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><rect width="120" height="120" fill="#141416"/><g fill="none" stroke="#c9a961" stroke-width="1.5"><g transform="translate(60,0)"><path d="M0 0 A34 34 0 0 1 34 34"/><path d="M0 0 A24 24 0 0 1 24 24"/><path d="M0 0 A14 14 0 0 1 14 14"/><path d="M0 0 A34 34 0 0 0 -34 34"/><path d="M0 0 A24 24 0 0 0 -24 24"/><path d="M0 0 A14 14 0 0 0 -14 14"/></g><g transform="translate(60,120)"><path d="M0 0 A34 34 0 0 1 34 -34"/><path d="M0 0 A24 24 0 0 1 24 -24"/><path d="M0 0 A34 34 0 0 0 -34 -34"/><path d="M0 0 A24 24 0 0 0 -24 -24"/></g><line x1="0" y1="60" x2="120" y2="60" stroke-width="1" stroke-dasharray="3 5"/></g></svg>`;
+ case 'boho': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><rect width="120" height="120" fill="#3a2118"/><g fill="none" stroke="#e0a458" stroke-width="1.3"><circle cx="60" cy="60" r="30"/><circle cx="60" cy="60" r="20"/><circle cx="60" cy="60" r="9"/></g><g stroke="#c9a961" stroke-width="1.2" fill="none"><g id="ray"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(45 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(90 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(135 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(180 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(225 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(270 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g><g transform="rotate(315 60 60)"><path d="M60 60 L60 22 M56 30 L60 22 L64 30"/></g></g><circle cx="60" cy="60" r="3" fill="#e0a458"/></svg>`;
+ case 'coastal': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><rect width="120" height="120" fill="#eef4f4"/><g fill="none" stroke="#2f6f86" stroke-width="2"><path d="M-6 30 q15-12 30 0 t30 0 t30 0 t30 0"/><path d="M-6 54 q15-12 30 0 t30 0 t30 0 t30 0" opacity=".7"/><path d="M-6 78 q15-12 30 0 t30 0 t30 0 t30 0" opacity=".5"/><path d="M-6 102 q15-12 30 0 t30 0 t30 0 t30 0" opacity=".35"/></g><g stroke="#c9a961" stroke-width="1.4" opacity=".8"><path d="M-6 42 q15-10 30 0 t30 0 t30 0 t30 0"/><path d="M-6 90 q15-10 30 0 t30 0 t30 0 t30 0"/></g></svg>`;
+ case 'grand': return `<svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice"><rect width="120" height="120" fill="#f6ecec"/><defs><pattern id="gm" width="40" height="34" patternUnits="userSpaceOnUse"><path d="M0 6 q10-12 20 0 q10-12 20 0" fill="none" stroke="#b7607c" stroke-width="1.8"/><path d="M0 22 q10-12 20 0 q10-12 20 0" fill="none" stroke="#6f8f5a" stroke-width="1.8"/><circle cx="20" cy="14" r="2" fill="#c9a961"/></pattern></defs><rect width="120" height="120" fill="url(#gm)"/><g fill="none" stroke="#b7607c" stroke-width="1" opacity=".5"><path d="M10 0 V120 M50 0 V120 M90 0 V120"/></g></svg>`;
+ }
+ return '';
+ }
+
+ var STYLES = [
+ {id:'damask', name:'Damask', note:'Ornate, symmetrical, heritage grandeur.'},
+ {id:'toile', name:'Toile', note:'Pastoral scenes in a single elegant ink.'},
+ {id:'ikat', name:'Ikat', note:'Blurred-edge weave, artisanal and worldly.'},
+ {id:'chino', name:'Chinoiserie', note:'Hand-painted branches, birds & blossoms.'},
+ {id:'deco', name:'Art Deco', note:'Geometric sunbursts, jazz-age glamour.'},
+ {id:'boho', name:'Boho', note:'Layered mandalas, warm & free-spirited.'},
+ {id:'coastal', name:'Coastal', note:'Airy waves, breezy blue serenity.'},
+ {id:'grand', name:'Grandmillennial',note:'Chintz & scallop, nostalgic and cozy.'}
+ ];
+ // display-name mapping
+ STYLES.forEach(s=>{ if(s.id==='chino') s.name='Chinoiserie'; });
+
+ var el = {
+ matchups: document.getElementById('matchups'),
+ stageLabel: document.getElementById('stageLabel'),
+ roundTitle: document.getElementById('roundTitle'),
+ roundHint: document.getElementById('roundHint'),
+ progress: document.getElementById('progress'),
+ scoreboard: document.getElementById('scoreboard'),
+ overlay: document.getElementById('overlay'),
+ champName: document.getElementById('champName'),
+ champSwatch: document.getElementById('champSwatch'),
+ champMeta: document.getElementById('champMeta'),
+ champPath: document.getElementById('champPath'),
+ shareBtn: document.getElementById('shareBtn'),
+ againBtn: document.getElementById('againBtn'),
+ toast: document.getElementById('toast')
+ };
+
+ var ROUND_META = [
+ {label:'Quarterfinals', title:'Choose Your Champion', hint:'Tap the style you love more in each pairing.'},
+ {label:'Semifinals', title:'Down to Four', hint:'Two pairings remain. Trust your eye.'},
+ {label:'The Final', title:'One Last Duel', hint:'Only one style can take the crown.'}
+ ];
+
+ var current; // array of style objects in this round
+ var roundIdx; // 0,1,2
+ var journey; // winners chosen along the way for the result path
+
+ function shuffle(a){
+ a = a.slice();
+ for(var i=a.length-1;i>0;i--){
+ var j=Math.floor(Math.random()*(i+1));
+ var t=a[i];a[i]=a[j];a[j]=t;
+ }
+ return a;
+ }
+
+ function start(){
+ current = shuffle(STYLES);
+ roundIdx = 0;
+ journey = [];
+ el.overlay.classList.remove('show');
+ renderRound();
+ }
+
+ function renderRound(){
+ var meta = ROUND_META[roundIdx];
+ el.stageLabel.textContent = meta.label;
+ el.roundTitle.textContent = meta.title;
+ el.roundHint.textContent = meta.hint;
+ el.scoreboard.innerHTML = 'ROUND <b>'+(roundIdx+1)+'</b> / 3 · <b>'+current.length+'</b> STYLES';
+ var dots = el.progress.children;
+ for(var d=0;d<dots.length;d++){ dots[d].classList.toggle('on', d<=roundIdx); }
+
+ el.matchups.innerHTML='';
+ var pairs = current.length/2;
+ for(var p=0;p<pairs;p++){
+ var a = current[p*2], b = current[p*2+1];
+ var match = document.createElement('div');
+ match.className='match';
+ match.style.animationDelay = (p*0.09)+'s';
+ match.appendChild(tile(a, p, 0));
+ var vs=document.createElement('div'); vs.className='vs'; vs.textContent='vs';
+ match.appendChild(vs);
+ match.appendChild(tile(b, p, 1));
+ el.matchups.appendChild(match);
+ }
+ }
+
+ function tile(style, pairIndex, slot){
+ var t=document.createElement('button');
+ t.className='tile';
+ t.type='button';
+ t.setAttribute('aria-label','Advance '+style.name);
+ t.innerHTML =
+ '<div class="swatch">'+swatch(style.id)+'</div>'+
+ '<div class="cap"><span class="name">'+style.name+'</span>'+
+ '<span class="pick">Advance →</span></div>';
+ t.addEventListener('click', function(){ choose(pairIndex, slot, style, t); });
+ return t;
+ }
+
+ var busy=false;
+ function choose(pairIndex, slot, winner, tileEl){
+ if(busy) return; busy=true;
+ var match = tileEl.parentNode;
+ var tiles = match.querySelectorAll('.tile');
+ tiles.forEach(function(x){
+ if(x===tileEl){ x.classList.add('win'); }
+ else{ x.classList.add('lose'); }
+ x.style.pointerEvents='none';
+ });
+ journey.push({round:roundIdx, winner:winner.name});
+ // store winner in a staged array on the match
+ match.dataset.winnerId = winner.id;
+
+ // wait, then check whether the whole round is resolved
+ setTimeout(function(){
+ // collect winners in DOM order
+ var resolved = el.matchups.querySelectorAll('.match');
+ var allDone = true, winners=[];
+ resolved.forEach(function(m){
+ if(m.dataset.winnerId){ winners.push(styleById(m.dataset.winnerId)); }
+ else { allDone=false; }
+ });
+ busy=false;
+ if(allDone){
+ advance(winners);
+ }
+ }, 720);
+ }
+
+ function styleById(id){ return STYLES.filter(function(s){return s.id===id;})[0]; }
+
+ function advance(winners){
+ if(winners.length===1){
+ finish(winners[0]);
+ return;
+ }
+ roundIdx++;
+ current = winners;
+ // brief transition
+ el.matchups.style.opacity=0;
+ setTimeout(function(){
+ el.matchups.style.transition='opacity .4s var(--ease)';
+ renderRound();
+ requestAnimationFrame(function(){ el.matchups.style.opacity=1; });
+ }, 260);
+ }
+
+ function finish(champ){
+ el.champName.textContent = champ.name;
+ el.champSwatch.innerHTML = swatch(champ.id);
+ el.champMeta.textContent = champ.note + ' A three-round victor, chosen by your eye alone.';
+ // build path chips: the finalists you beat it against, simplified as round labels
+ el.champPath.innerHTML='';
+ ['Quarterfinal ✓','Semifinal ✓','Final ✓ — Crowned'].forEach(function(txt){
+ var s=document.createElement('span'); s.textContent=txt; el.champPath.appendChild(s);
+ });
+ setTimeout(function(){ el.overlay.classList.add('show'); }, 200);
+ window._champ = champ;
+ }
+
+ function toast(msg){
+ el.toast.textContent=msg;
+ el.toast.classList.add('show');
+ clearTimeout(el.toast._t);
+ el.toast._t=setTimeout(function(){ el.toast.classList.remove('show'); },2200);
+ }
+
+ el.shareBtn.addEventListener('click', function(){
+ var c=window._champ;
+ var text='My interior style is '+c.name+' — decided in the Designer Wallcoverings Style Showdown. What\'s yours?';
+ if(navigator.share){
+ navigator.share({title:'Style Showdown', text:text}).catch(function(){});
+ } else if(navigator.clipboard && navigator.clipboard.writeText){
+ navigator.clipboard.writeText(text).then(function(){ toast('Result copied to clipboard'); },
+ function(){ toast('Copy unavailable'); });
+ } else {
+ toast('Result: '+c.name);
+ }
+ });
+
+ el.againBtn.addEventListener('click', function(){
+ el.overlay.classList.remove('show');
+ el.matchups.style.opacity=1;
+ setTimeout(start, 260);
+ });
+
+ start();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/claude-code.png b/data/artifacts/e2ddb50bc672/claude-code.png
new file mode 100644
index 0000000..ec706e5
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/claude-code.png differ
diff --git a/data/artifacts/e2ddb50bc672/gemma3-12b.html b/data/artifacts/e2ddb50bc672/gemma3-12b.html
new file mode 100644
index 0000000..3f661a6
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/gemma3-12b.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Style Showdown</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #3a2c22;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #dcdcdc;
+ --shadow: rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+
+ body {
+ font-family: 'apple-system', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+ }
+
+ header {
+ background-color: transparent;
+ padding: 32px;
+ text-align: left;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 50px;
+ letter-spacing: .18em;
+ color: #3a2c22;
+ }
+
+ .tournament {
+ padding: 96px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ }
+
+ .matchup {
+ border-radius: 14px;
+ padding: 24px;
+ background-color: var(--surface);
+ box-shadow: 0 8px 24px var(--shadow);
+ transition: box-shadow .3s var(--ease);
+ }
+
+ .matchup:hover {
+ box-shadow: 0 16px 48px var(--shadow);
+ }
+
+ .style {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ cursor: pointer;
+ transition: transform .2s var(--ease);
+ }
+
+ .style:hover {
+ transform: scale(1.05);
+ }
+
+ .style__name {
+ font-size: 16px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ color: var(--muted);
+ }
+
+ .style__swatch {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background: linear-gradient(to bottom, var(--accent), darken(@accent, 10%)); /* Example darkening - needs a sass/less compiler */
+ }
+
+ .winner {
+ opacity: 1;
+ }
+
+ .result-card {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--surface);
+ border-radius: 14px;
+ padding: 32px;
+ box-shadow: 0 8px 24px var(--shadow);
+ z-index: 1000;
+ display: none; /* Initially hidden */
+ }
+
+ .result-card h2 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ text-align: center;
+ }
+
+ .result-card p {
+ font-size: 16px;
+ text-align: center;
+ margin-top: 24px;
+ }
+
+ /* Styles for different design styles - customize these! */
+ .damask .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Crect x='25%' y='25%' width='50' height='50' fill='%237d6a45'/%3E%3C/svg%3E"); }
+ .toile .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Cpath d='M10,50 L30,50 M70,50 L90,50' stroke='%237d6a45' stroke-width='3'/%3E%3C/svg%3E"); }
+ .ikat .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Cpolygon points='0,50 50,0 100,50 50,100' fill='%237d6a45'/%3E%3C/svg%3E"); }
+ .chinoiserie .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Ccircle cx='50' cy='50' r='40' stroke='%237d6a45' stroke-width='3'/%3E%3C/svg%3E"); }
+ .artdeco .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Cline x1='10' y1='10' x2='90' y2='90' stroke='%237d6a45' stroke-width='3'/%3E%3C/svg%3E"); }
+ .boho .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Ccircle cx='40' cy='40' r='20' fill='%237d6a45'/%3E%3C/svg%3E"); }
+ .coastal .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Cpath d='M10 50 L 90 50 M 50 10 L 50 90' stroke='%237d6a45' stroke-width='3'/%3E%3C/svg%3E"); }
+ .grandmillennial .style__swatch { background: url("data:image/svg+xml,%3Csvg width='100' height='100'%3E%3Crect width='100' height='100' fill='%23c9a961'/%3E%3Ccircle cx='50' cy='50' r='40' stroke='%237d6a45' stroke-width='2'/%3E%3C/svg%3E"); }
+ </style>
+</head>
+<body>
+
+ <header>
+ DESIGNER WALLCOVERINGS
+ </header>
+
+ <div class="tournament">
+ <div class="matchup damask" data-winner="false">
+ <div class="style" data-style="damask">
+ <span>Damask</span>
+ <div class="style__swatch"></div>
+ </div>
+ <div class="style" data-style="toile">
+ <span>Toile</span>
+ <div class="style__swatch"></div>
+ </div>
+ </div>
+
+ <div class="matchup ikat" data-winner="false">
+ <div class="style" data-style="ikat">
+ <span>Ikat</span>
+ <div class="style__swatch"></div>
+ </div>
+ <div class="style" data-style="chinoiserie">
+ <span>Chinoiserie</span>
+ <div class="style__swatch"></div>
+ </div>
+ </div>
+
+ <div class="matchup artdeco" data-winner="false">
+ <div class="style" data-style="artdeco">
+ <span>Art Deco</span>
+ <div class="style__swatch"></div>
+ </div>
+ <div class="style" data-style="boho">
+ <span>Boho</span>
+ <div class="style__swatch"></div>
+ </div>
+ </div>
+
+ <div class="matchup coastal" data-winner="false">
+ <div class="style" data-style="coastal">
+ <span>Coastal</span>
+ <div class="style__swatch"></div>
+ </div>
+ <div class="style" data-style="grandmillennial">
+ <span>Grandmillennial</span>
+ <div class="style__swatch"></div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="result-card" id="resultCard">
+ <h2>Champion!</h2>
+ <p>The winning style will be revealed soon.</p>
+ </div>
+
+ <script>
+ const matchups = document.querySelectorAll('.matchup');
+ let winnerStyle = null;
+
+
+ matchups.forEach(matchup => {
+ const styles = matchup.querySelectorAll('.style');
+ styles[0].addEventListener('click', () => {
+ markWinner(styles[0]);
+ });
+ styles[1].addEventListener('click', () => {
+ markWinner(styles[1]);
+ });
+ });
+
+ function markWinner(selectedStyle) {
+ const matchup = selectedStyle.closest('.matchup');
+ if (matchup && !matchup.dataset.winner) {
+ matchup.dataset.winner = 'true';
+ selectedStyle.classList.add('winner');
+
+ // Animate the advancement (simple fade) - remove for production if needed.
+ selectedStyle.style.animation = "fadeUp .7s var(--ease)";
+ setTimeout(() => { selectedStyle.style.animation = ""; }, 700);
+
+
+ winnerStyle = selectedStyle.dataset.style;
+
+ }
+ }
+
+
+
+ // Placeholder for result display - replace with actual logic based on winnerStyle
+ document.addEventListener('click', () => {
+ const resultCard = document.getElementById('resultCard');
+
+ if (winnerStyle) {
+ resultCard.querySelector("h2").textContent = `The Winner: ${winnerStyle.charAt(0).toUpperCase() + winnerStyle.slice(1)}`; // Capitalize the first letter
+ resultCard.style.display = 'block';
+ }
+ });
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/gemma3-12b.png b/data/artifacts/e2ddb50bc672/gemma3-12b.png
new file mode 100644
index 0000000..e3fe63a
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/gemma3-12b.png differ
diff --git a/data/artifacts/e2ddb50bc672/gpt.html b/data/artifacts/e2ddb50bc672/gpt.html
new file mode 100644
index 0000000..6f8416e
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/gpt.html
@@ -0,0 +1,1406 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Style Showdown – Designer Wallcoverings</title>
+<style>
+:root {
+ /* Design tokens */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #1f2026;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961; /* metallic gold */
+ --accent-soft: #7d6a45;
+ --line: rgba(245, 242, 234, 0.12);
+ --line-strong: rgba(245, 242, 234, 0.3);
+ --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.65);
+ --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.4);
+ --radius-lg: 18px;
+ --radius-md: 12px;
+ --radius-pill: 999px;
+ --ease-swift: cubic-bezier(.22,.9,.24,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --border-width-hairline: 1px;
+ --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
+ --font-body: "Avenir Next", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --fs-caption: 12px;
+ --fs-label: 11px;
+ --fs-body: 16px;
+ --fs-lead: 21px;
+ --fs-h3: 28px;
+ --fs-h2: 38px;
+ --fs-h1: 50px;
+ --layout-max-width: 1120px;
+ --transition-fast: 160ms var(--ease-swift);
+ --transition-med: 260ms var(--ease-swift);
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top left, #181923 0, #070708 52%, #050506 100%);
+ color: var(--text);
+ font-family: var(--font-body);
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Top wordmark bar */
+.app-shell {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header.app-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 40;
+ backdrop-filter: blur(18px);
+ background: linear-gradient(to bottom, rgba(7,7,9,0.96), rgba(7,7,9,0.85));
+ border-bottom: var(--border-width-hairline) solid rgba(201,169,97,0.16);
+}
+
+.header-inner {
+ max-width: var(--layout-max-width);
+ margin: 0 auto;
+ padding: 18px 24px 14px;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.brand-lockup {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.brand-wordmark {
+ font-family: var(--font-display);
+ font-size: 44px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ line-height: 1.02;
+ white-space: normal;
+}
+
+.brand-subtitle {
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.header-meta {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.badge-pill {
+ border-radius: var(--radius-pill);
+ border: var(--border-width-hairline) solid rgba(201,169,97,0.55);
+ padding: 6px 12px 5px;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.15), rgba(23,23,28,0.95));
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
+ color: var(--accent);
+}
+
+.badge-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 999px;
+ background: radial-gradient(circle at 30% 20%, #f6f0da, #c9a961);
+}
+
+/* Main layout */
+main {
+ flex: 1;
+ padding: 120px 16px 32px;
+}
+
+.app-main-inner {
+ max-width: var(--layout-max-width);
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr);
+ gap: 28px;
+}
+
+@media (max-width: 900px) {
+ .app-main-inner {
+ grid-template-columns: minmax(0, 1fr);
+ }
+}
+
+/* Left: bracket */
+.card {
+ background: radial-gradient(circle at top left, rgba(255,255,255,0.06), rgba(23,23,28,0.98));
+ border-radius: 24px;
+ box-shadow: var(--shadow-soft);
+ border: var(--border-width-hairline) solid rgba(245, 242, 234, 0.08);
+ position: relative;
+ overflow: hidden;
+}
+
+.card::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ border: 1px solid rgba(201,169,97,0.16);
+ mix-blend-mode: soft-light;
+ pointer-events: none;
+}
+
+.card-inner {
+ position: relative;
+ padding: 22px 24px 24px;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 16px;
+ margin-bottom: 18px;
+}
+
+.card-title-block {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.kicker {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.h1 {
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ line-height: 1.05;
+ letter-spacing: -0.02em;
+}
+
+.card-caption {
+ font-size: 13px;
+ color: var(--muted);
+ max-width: 40ch;
+}
+
+.card-header-meta {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 8px;
+}
+
+.round-indicator {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.progress-rail {
+ width: 120px;
+ height: 4px;
+ border-radius: 999px;
+ background: rgba(245, 242, 234, 0.06);
+ overflow: hidden;
+}
+
+.progress-fill {
+ height: 100%;
+ border-radius: inherit;
+ background: linear-gradient(90deg, rgba(201,169,97,0.2), rgba(201,169,97,0.9));
+ width: 0%;
+ transition: width 260ms var(--ease-swift);
+}
+
+/* Bracket layout */
+.bracket-grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 12px 20px;
+ align-items: stretch;
+}
+
+@media (max-width: 880px) {
+ .bracket-grid {
+ grid-template-columns: minmax(0,1fr);
+ }
+}
+
+.round-column {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ position: relative;
+}
+
+/* Match cards */
+.match {
+ position: relative;
+ border-radius: var(--radius-md);
+ background: rgba(7,7,9,0.82);
+ border: var(--border-width-hairline) solid rgba(245,242,234,0.08);
+ box-shadow: var(--shadow-light);
+ padding: 10px 10px 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ min-height: 116px;
+ overflow: hidden;
+}
+
+.match::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.14), transparent 55%);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity var(--transition-med);
+}
+
+.match.active::before {
+ opacity: 1;
+}
+
+.match-label {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.match-round-tag {
+ padding: 3px 7px 2px;
+ border-radius: var(--radius-pill);
+ border: var(--border-width-hairline) solid rgba(245, 242, 234, 0.15);
+ background: rgba(14,14,18,0.8);
+}
+
+.match-status {
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.contestants {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 6px;
+}
+
+/* Style tiles */
+.style-pill {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr);
+ gap: 8px;
+ padding: 6px;
+ border-radius: 999px;
+ border: var(--border-width-hairline) solid rgba(245,242,234,0.1);
+ background: radial-gradient(circle at top left, rgba(26,26,32,1), rgba(10,10,13,1));
+ cursor: pointer;
+ align-items: center;
+ transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.style-pill.disabled {
+ cursor: default;
+ opacity: 0.6;
+}
+
+.style-pill:hover:not(.disabled) {
+ border-color: rgba(201,169,97,0.75);
+ background: radial-gradient(circle at top left, rgba(26,26,32,1), rgba(18,18,22,1));
+ transform: translateY(-1px);
+ box-shadow: 0 10px 26px rgba(0,0,0,0.6);
+}
+
+.style-pill.selected {
+ border-color: rgba(201,169,97,1);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.7);
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.22), rgba(14,14,18,1));
+}
+
+.style-pill.winner {
+ transform: translateY(-1px) scale(1.01);
+}
+
+.swatch {
+ width: 40px;
+ height: 40px;
+ border-radius: 999px;
+ overflow: hidden;
+ position: relative;
+ border: var(--border-width-hairline) solid rgba(245,242,234,0.22);
+ box-shadow: 0 6px 16px rgba(0,0,0,0.7);
+}
+
+/* Individual style patterns */
+.swatch-inner {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+/* Damask – ornate floral via radial gradients */
+.swatch-damask {
+ background:
+ radial-gradient(circle at 20% 25%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.02) 28%, transparent 40%),
+ radial-gradient(circle at 80% 75%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0.02) 26%, transparent 40%),
+ radial-gradient(circle at 50% 50%, rgba(201,169,97,0.65), rgba(65,54,26,1));
+}
+
+/* Toile – etched pastoral with diagonal sketch lines */
+.swatch-toile {
+ background:
+ repeating-linear-gradient(-45deg, rgba(245,242,234,0.4) 0, rgba(245,242,234,0.4) 1px, transparent 1px, transparent 4px),
+ radial-gradient(circle at 30% 30%, rgba(245,242,234,0.35), rgba(32,32,38,1));
+ filter: contrast(1.1);
+}
+
+/* Ikat – blurred chevron bands */
+.swatch-ikat {
+ background:
+ repeating-linear-gradient(135deg,
+ rgba(201,169,97,0.2) 0,
+ rgba(201,169,97,0.7) 12%,
+ rgba(7,7,9,1) 24%
+ );
+ filter: blur(0.2px) contrast(1.15);
+}
+
+/* Chinoiserie – delicate vignette + branches */
+.swatch-chinoiserie {
+ background:
+ radial-gradient(circle at 30% 20%, rgba(245,242,234,0.88) 0, rgba(245,242,234,0.4) 26%, rgba(13,13,18,1) 60%),
+ radial-gradient(circle at 80% 80%, rgba(201,169,97,0.55), rgba(10,10,14,1));
+}
+.swatch-chinoiserie::before,
+.swatch-chinoiserie::after {
+ content: "";
+ position: absolute;
+ border-radius: 999px;
+ border: 1px solid rgba(125,106,69,0.9);
+}
+.swatch-chinoiserie::before {
+ width: 90%;
+ height: 30%;
+ top: 50%;
+ left: 5%;
+ transform: rotate(-24deg);
+ border-top: none;
+ border-left: none;
+}
+.swatch-chinoiserie::after {
+ width: 40%;
+ height: 40%;
+ top: 10%;
+ right: 0%;
+ border-bottom: none;
+ border-left: none;
+}
+
+/* Art Deco – stepped fan geometry */
+.swatch-artdeco {
+ background:
+ conic-gradient(from 210deg,
+ rgba(201,169,97,0.95) 0 18deg,
+ rgba(19,19,24,1) 18deg 22deg,
+ rgba(201,169,97,0.95) 22deg 40deg,
+ rgba(19,19,24,1) 40deg 44deg,
+ rgba(201,169,97,0.95) 44deg 62deg,
+ rgba(19,19,24,1) 62deg 66deg,
+ rgba(201,169,97,0.95) 66deg 84deg,
+ rgba(19,19,24,1) 84deg 360deg
+ );
+ clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
+}
+
+/* Boho – sun + concentric arcs */
+.swatch-boho {
+ background:
+ radial-gradient(circle at 26% 26%, rgba(201,169,97,0.85) 0, rgba(201,169,97,0.1) 30%, transparent 40%),
+ radial-gradient(circle at 50% 110%, rgba(245,242,234,0.45) 0, rgba(245,242,234,0.02) 40%, transparent 64%),
+ linear-gradient(to bottom, #2a2018, #0c0b0b);
+}
+
+/* Coastal – soft waves */
+.swatch-coastal {
+ background:
+ repeating-radial-gradient(circle at 0 120%, rgba(245,242,234,0.65) 0, rgba(245,242,234,0.0) 16px, rgba(33,42,57,1) 18px, rgba(33,42,57,1) 22px),
+ radial-gradient(circle at 50% -20%, rgba(245,242,234,0.7), rgba(22,29,43,1));
+}
+
+/* Grandmillennial – mini florals dot grid */
+.swatch-grandmillennial {
+ background:
+ radial-gradient(circle at 30% 30%, rgba(201,169,97,0.9) 0, rgba(201,169,97,0.1) 32%, transparent 40%),
+ radial-gradient(circle at 70% 70%, rgba(245,242,234,0.9) 0, rgba(245,242,234,0.08) 30%, transparent 40%),
+ radial-gradient(circle at 50% 50%, rgba(34,26,40,1), rgba(10,8,13,1));
+}
+.swatch-grandmillennial::before {
+ content:"";
+ position:absolute;
+ inset:0;
+ background-image:
+ radial-gradient(circle, rgba(245,242,234,0.85) 0, rgba(245,242,234,0.0) 58%);
+ background-size: 18px 18px;
+ opacity:0.9;
+ mix-blend-mode: screen;
+}
+
+/* Info text */
+.style-text-block {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.style-name {
+ font-size: 13px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.style-meta {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+/* Right column: social/result */
+.side-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.badge-rounds {
+ border-radius: var(--radius-md);
+ border: var(--border-width-hairline) solid rgba(245,242,234,0.12);
+ padding: 10px 14px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+.badge-rounds span.current {
+ color: var(--accent);
+}
+
+/* Result card */
+.result-card {
+ border-radius: 22px;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.2), rgba(15,15,20,0.98));
+ border: var(--border-width-hairline) solid rgba(245,242,234,0.18);
+ padding: 18px 18px 16px;
+ position: relative;
+ overflow: hidden;
+ box-shadow: var(--shadow-light);
+}
+
+.result-card::before {
+ content:"";
+ position:absolute;
+ inset:-1px;
+ border-radius:inherit;
+ border:1px solid rgba(0,0,0,0.7);
+ mix-blend-mode:multiply;
+ pointer-events:none;
+}
+
+.result-header {
+ display:flex;
+ justify-content:space-between;
+ align-items:flex-start;
+ gap:12px;
+ margin-bottom:10px;
+}
+
+.result-title-block {
+ display:flex;
+ flex-direction:column;
+ gap:4px;
+}
+
+.result-kicker {
+ font-size:11px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ color:var(--muted);
+}
+
+.result-heading {
+ font-family:var(--font-display);
+ font-size:24px;
+ letter-spacing:-0.02em;
+ line-height:1.05;
+}
+
+.result-meta {
+ font-size:11px;
+ letter-spacing:0.14em;
+ text-transform:uppercase;
+ color:var(--muted);
+}
+
+.result-body {
+ display:grid;
+ grid-template-columns:auto minmax(0,1fr);
+ gap:12px;
+ align-items:center;
+}
+
+.result-swatch-frame {
+ width:72px;
+ height:72px;
+ border-radius:20px;
+ padding:4px;
+ border:1px solid rgba(245,242,234,0.28);
+ background:radial-gradient(circle at top left, rgba(201,169,97,0.35), rgba(15,15,20,1));
+ box-shadow:0 14px 34px rgba(0,0,0,0.8);
+}
+
+.result-swatch-inner {
+ width:100%;
+ height:100%;
+ border-radius:16px;
+ overflow:hidden;
+ position:relative;
+ border:1px solid rgba(0,0,0,0.8);
+}
+
+.result-copy {
+ font-size:13px;
+ color:var(--muted);
+ max-width:32ch;
+}
+
+.result-champ-name {
+ font-family:var(--font-display);
+ font-size:20px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ color:var(--accent);
+ margin-bottom:2px;
+}
+
+.result-actions {
+ display:flex;
+ flex-wrap:wrap;
+ gap:10px;
+ margin-top:14px;
+}
+
+.btn {
+ border-radius:var(--radius-pill);
+ border:var(--border-width-hairline) solid rgba(245,242,234,0.32);
+ padding:7px 14px 6px;
+ font-size:11px;
+ letter-spacing:0.2em;
+ text-transform:uppercase;
+ background:rgba(7,7,9,0.9);
+ color:var(--text);
+ display:inline-flex;
+ align-items:center;
+ gap:7px;
+ cursor:pointer;
+ transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
+}
+
+.btn-primary {
+ background:linear-gradient(135deg, rgba(201,169,97,0.95), rgba(125,106,69,1));
+ color:#18120a;
+ box-shadow:0 12px 26px rgba(0,0,0,0.8);
+ border-color:rgba(0,0,0,0.8);
+}
+
+.btn-primary:hover {
+ transform:translateY(-1px);
+ box-shadow:0 16px 36px rgba(0,0,0,0.9);
+}
+
+.btn-secondary {
+ background:rgba(10,10,13,0.9);
+}
+
+.btn-secondary:hover {
+ border-color:rgba(201,169,97,0.6);
+ background:rgba(18,18,24,0.95);
+ box-shadow:0 12px 28px rgba(0,0,0,0.75);
+}
+
+/* pseudo icon */
+.icon-mark {
+ width:10px;
+ height:10px;
+ border-radius:2px;
+ border:1px solid currentColor;
+ position:relative;
+}
+.icon-mark::after {
+ content:"";
+ position:absolute;
+ inset:2px;
+ border-radius:1px;
+ background:currentColor;
+}
+
+/* Mini bracket legend */
+.legend {
+ font-size:11px;
+ letter-spacing:0.16em;
+ text-transform:uppercase;
+ color:var(--muted);
+ display:flex;
+ justify-content:space-between;
+ gap:10px;
+}
+
+/* Overlay for shareable card */
+.overlay {
+ position:fixed;
+ inset:0;
+ background:rgba(4,4,7,0.86);
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ padding:20px;
+ z-index:60;
+ opacity:0;
+ pointer-events:none;
+ transition:opacity 260ms var(--ease-hero);
+}
+
+.overlay.visible {
+ opacity:1;
+ pointer-events:auto;
+}
+
+.overlay-panel {
+ max-width:460px;
+ width:100%;
+ border-radius:24px;
+ background:radial-gradient(circle at top left, rgba(201,169,97,0.18), rgba(12,12,16,0.98));
+ border:var(--border-width-hairline) solid rgba(245,242,234,0.22);
+ box-shadow:0 24px 80px rgba(0,0,0,0.9);
+ padding:20px 20px 18px;
+ position:relative;
+ overflow:hidden;
+}
+
+.overlay-panel::before {
+ content:"";
+ position:absolute;
+ inset:-1px;
+ border-radius:inherit;
+ border:1px solid rgba(0,0,0,0.85);
+ pointer-events:none;
+}
+
+.overlay-header {
+ display:flex;
+ justify-content:space-between;
+ align-items:flex-start;
+ gap:12px;
+ margin-bottom:14px;
+}
+
+.overlay-title-group {
+ display:flex;
+ flex-direction:column;
+ gap:4px;
+}
+
+.overlay-kicker {
+ font-size:11px;
+ letter-spacing:0.18em;
+ text-transform:uppercase;
+ color:var(--muted);
+}
+
+.overlay-title {
+ font-family:var(--font-display);
+ font-size:24px;
+ letter-spacing:-0.02em;
+ line-height:1.05;
+}
+
+.overlay-close {
+ border-radius:999px;
+ width:28px;
+ height:28px;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ border:var(--border-width-hairline) solid rgba(245,242,234,0.32);
+ background:rgba(10,10,13,0.9);
+ cursor:pointer;
+ font-size:16px;
+ line-height:1;
+ color:var(--muted);
+}
+
+.overlay-body {
+ display:grid;
+ grid-template-columns:auto minmax(0,1fr);
+ gap:16px;
+ align-items:center;
+}
+
+.overlay-swatch-stack {
+ display:flex;
+ flex-direction:column;
+ align-items:center;
+ gap:10px;
+}
+
+.overlay-swatch-ring {
+ width:96px;
+ height:96px;
+ border-radius:32px;
+ padding:5px;
+ background:conic-gradient(from 210deg, rgba(201,169,97,0.3), rgba(201,169,97,0.04), rgba(201,169,97,0.5), rgba(201,169,97,0.04));
+ box-shadow:0 26px 70px rgba(0,0,0,0.95);
+}
+
+.overlay-swatch-inner {
+ width:100%;
+ height:100%;
+ border-radius:26px;
+ overflow:hidden;
+ border:1px solid rgba(0,0,0,0.8);
+}
+
+.overlay-champ-name {
+ font-family:var(--font-display);
+ font-size:22px;
+ letter-spacing:0.22em;
+ text-transform:uppercase;
+ color:var(--accent);
+ text-align:center;
+}
+
+.overlay-text {
+ font-size:13px;
+ color:var(--muted);
+ max-width:30ch;
+}
+
+.overlay-footer {
+ margin-top:16px;
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ gap:12px;
+ font-size:11px;
+ letter-spacing:0.16em;
+ text-transform:uppercase;
+ color:var(--muted);
+}
+
+.overlay-tagline {
+ color:var(--accent);
+}
+
+/* Utility */
+.hidden {
+ display:none !important;
+}
+</style>
+</head>
+<body>
+<div class="app-shell">
+ <header class="app-header">
+ <div class="header-inner">
+ <div class="brand-lockup">
+ <div class="brand-wordmark">DESIGNER WALLCOVERINGS</div>
+ <div class="brand-subtitle">Style Showdown • Interactive Bracket</div>
+ </div>
+ <div class="header-meta">
+ <div class="badge-pill">
+ <span class="badge-dot"></span>
+ <span>Live Tournament</span>
+ </div>
+ <span>Tap your favourites through to a champion.</span>
+ </div>
+ </div>
+ </header>
+
+ <main>
+ <div class="app-main-inner">
+ <!-- Bracket card -->
+ <section class="card" aria-label="Style Showdown Bracket">
+ <div class="card-inner">
+ <div class="card-header">
+ <div class="card-title-block">
+ <div class="kicker">Tournament</div>
+ <div class="h1">Style Showdown</div>
+ <p class="card-caption">Eight iconic wallcovering moods enter. Tap a winner in each pairing to reveal your champion.</p>
+ </div>
+ <div class="card-header-meta">
+ <div class="round-indicator" id="round-indicator">Quarterfinals · 4 matchups</div>
+ <div class="progress-rail" aria-hidden="true">
+ <div class="progress-fill" id="progress-fill"></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="bracket-grid" id="bracket">
+ <!-- Quarterfinals column -->
+ <div class="round-column" aria-label="Quarterfinals">
+ <div class="match" data-round="qf" data-match="1">
+ <div class="match-label">
+ <span class="match-round-tag">QF · 01</span>
+ <span class="match-status">Tap to advance</span>
+ </div>
+ <div class="contestants">
+ <button class="style-pill" data-style="Damask" data-source="qf1">
+ <div class="swatch">
+ <div class="swatch-inner swatch-damask"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Damask</span>
+ <span class="style-meta">Ornate • Heritage</span>
+ </div>
+ </button>
+ <button class="style-pill" data-style="Toile" data-source="qf1">
+ <div class="swatch">
+ <div class="swatch-inner swatch-toile"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Toile</span>
+ <span class="style-meta">Storybook • Pastoral</span>
+ </div>
+ </button>
+ </div>
+ </div>
+
+ <div class="match" data-round="qf" data-match="2">
+ <div class="match-label">
+ <span class="match-round-tag">QF · 02</span>
+ <span class="match-status">Tap to advance</span>
+ </div>
+ <div class="contestants">
+ <button class="style-pill" data-style="Ikat" data-source="qf2">
+ <div class="swatch">
+ <div class="swatch-inner swatch-ikat"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Ikat</span>
+ <span class="style-meta">Global • Kinetic</span>
+ </div>
+ </button>
+ <button class="style-pill" data-style="Chinoiserie" data-source="qf2">
+ <div class="swatch">
+ <div class="swatch-inner swatch-chinoiserie"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Chinoiserie</span>
+ <span class="style-meta">Painterly • Mythic</span>
+ </div>
+ </button>
+ </div>
+ </div>
+
+ <div class="match" data-round="qf" data-match="3">
+ <div class="match-label">
+ <span class="match-round-tag">QF · 03</span>
+ <span class="match-status">Tap to advance</span>
+ </div>
+ <div class="contestants">
+ <button class="style-pill" data-style="Art Deco" data-source="qf3">
+ <div class="swatch">
+ <div class="swatch-inner swatch-artdeco"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Art Deco</span>
+ <span class="style-meta">Geometric • Glam</span>
+ </div>
+ </button>
+ <button class="style-pill" data-style="Boho" data-source="qf3">
+ <div class="swatch">
+ <div class="swatch-inner swatch-boho"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Boho</span>
+ <span class="style-meta">Sunlit • Collected</span>
+ </div>
+ </button>
+ </div>
+ </div>
+
+ <div class="match" data-round="qf" data-match="4">
+ <div class="match-label">
+ <span class="match-round-tag">QF · 04</span>
+ <span class="match-status">Tap to advance</span>
+ </div>
+ <div class="contestants">
+ <button class="style-pill" data-style="Coastal" data-source="qf4">
+ <div class="swatch">
+ <div class="swatch-inner swatch-coastal"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Coastal</span>
+ <span class="style-meta">Breezy • Effortless</span>
+ </div>
+ </button>
+ <button class="style-pill" data-style="Grandmillennial" data-source="qf4">
+ <div class="swatch">
+ <div class="swatch-inner swatch-grandmillennial"></div>
+ </div>
+ <div class="style-text-block">
+ <span class="style-name">Grandmillennial</span>
+ <span class="style-meta">Nostalgic • Layered</span>
+ </div>
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <!-- Semifinals column -->
+ <div class="round-column" aria-label="Semifinals">
+ <div class="match" data-round="sf" data-match="1">
+ <div class="match-label">
+ <span class="match-round-tag">SF · 01</span>
+ <span class="match-status">Awaiting winners</span>
+ </div>
+ <div class="contestants" data-slot="sf1">
+ <!-- populated via JS -->
+ </div>
+ </div>
+ <div class="match" data-round="sf" data-match="2">
+ <div class="match-label">
+ <span class="match-round-tag">SF · 02</span>
+ <span class="match-status">Awaiting winners</span>
+ </div>
+ <div class="contestants" data-slot="sf2">
+ <!-- populated via JS -->
+ </div>
+ </div>
+ </div>
+
+ <!-- Final column -->
+ <div class="round-column" aria-label="Final">
+ <div class="match" data-round="final" data-match="1">
+ <div class="match-label">
+ <span class="match-round-tag">Final</span>
+ <span class="match-status">Crown your champion</span>
+ </div>
+ <div class="contestants" data-slot="final">
+ <!-- populated via JS -->
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </section>
+
+ <!-- Side panel with result + controls -->
+ <aside class="side-panel" aria-label="Result and sharing">
+ <div class="badge-rounds">
+ <span>Rounds: <span class="current" id="round-count">0 / 7</span></span>
+ <span id="round-label-mini">Quarterfinals</span>
+ </div>
+
+ <section class="result-card" aria-live="polite">
+ <div class="result-header">
+ <div class="result-title-block">
+ <div class="result-kicker">Your Winner</div>
+ <div class="result-heading" id="result-heading">Who will define your walls?</div>
+ </div>
+ <div class="result-meta" id="result-meta">Complete the bracket to reveal a champion card.</div>
+ </div>
+ <div class="result-body">
+ <div class="result-swatch-frame">
+ <div class="result-swatch-inner" id="result-swatch">
+ <!-- champion pattern replicated here -->
+ </div>
+ </div>
+ <div class="result-copy">
+ <div class="result-champ-name" id="result-champ-name">Awaiting Selection</div>
+ <div id="result-description">Tap through each pairing. Your final pick becomes a share-ready Designer Wallcoverings card.</div>
+ </div>
+ </div>
+ <div class="result-actions">
+ <button class="btn btn-primary" id="share-card" disabled>
+ <span class="icon-mark"></span>
+ <span>Generate Share Card</span>
+ </button>
+ <button class="btn btn-secondary" id="reset-bracket">
+ <span>Reset Bracket</span>
+ </button>
+ </div>
+ </section>
+
+ <div class="legend">
+ <span>Gold halo = match in play</span>
+ <span>Double-tap to rethink before the final.</span>
+ </div>
+ </aside>
+ </div>
+ </main>
+</div>
+
+<!-- Overlay for shareable result card -->
+<div class="overlay" id="share-overlay" aria-modal="true" role="dialog" aria-labelledby="share-overlay-title" aria-hidden="true">
+ <div class="overlay-panel">
+ <div class="overlay-header">
+ <div class="overlay-title-group">
+ <div class="overlay-kicker">Shareable Card</div>
+ <div class="overlay-title" id="share-overlay-title">Your Designer Wallcoverings Champion</div>
+ </div>
+ <button class="overlay-close" type="button" id="overlay-close-btn" aria-label="Close share card">
+ ×
+ </button>
+ </div>
+ <div class="overlay-body">
+ <div class="overlay-swatch-stack">
+ <div class="overlay-swatch-ring">
+ <div class="overlay-swatch-inner" id="overlay-swatch">
+ <!-- champion swatch pattern -->
+ </div>
+ </div>
+ <div class="overlay-champ-name" id="overlay-champ-name">Champion</div>
+ </div>
+ <div class="overlay-text" id="overlay-copy">
+ Your bracket crowns <span id="overlay-style-inline">Damask</span> as the ultimate wallcovering mood. Save this card or screenshot it to share where you style.
+ </div>
+ </div>
+ <div class="overlay-footer">
+ <span class="overlay-tagline">Designer Wallcoverings · Style Showdown</span>
+ <span id="overlay-handle">@designerwallcoverings</span>
+ </div>
+ </div>
+</div>
+
+<script>
+(function() {
+ const progressFill = document.getElementById('progress-fill');
+ const roundIndicator = document.getElementById('round-indicator');
+ const roundCountEl = document.getElementById('round-count');
+ const roundLabelMini = document.getElementById('round-label-mini');
+ const resultHeading = document.getElementById('result-heading');
+ const resultMeta = document.getElementById('result-meta');
+ const resultChampName = document.getElementById('result-champ-name');
+ const resultDescription = document.getElementById('result-description');
+ const resultSwatch = document.getElementById('result-swatch');
+ const shareBtn = document.getElementById('share-card');
+ const resetBtn = document.getElementById('reset-bracket');
+ const overlay = document.getElementById('share-overlay');
+ const overlayClose = document.getElementById('overlay-close-btn');
+ const overlaySwatch = document.getElementById('overlay-swatch');
+ const overlayChampName = document.getElementById('overlay-champ-name');
+ const overlayStyleInline = document.getElementById('overlay-style-inline');
+
+ const totalMatches = 7;
+ let completedMatches = 0;
+ let bracketComplete = false;
+ const matchWinners = {
+ qf1: null,
+ qf2: null,
+ qf3: null,
+ qf4: null,
+ sf1: null,
+ sf2: null,
+ final: null
+ };
+
+ const stylePatternClass = {
+ 'Damask': 'swatch-damask',
+ 'Toile': 'swatch-toile',
+ 'Ikat': 'swatch-ikat',
+ 'Chinoiserie': 'swatch-chinoiserie',
+ 'Art Deco': 'swatch-artdeco',
+ 'Boho': 'swatch-boho',
+ 'Coastal': 'swatch-coastal',
+ 'Grandmillennial': 'swatch-grandmillennial'
+ };
+
+ function updateProgress() {
+ const pct = (completedMatches / totalMatches) * 100;
+ progressFill.style.width = pct + '%';
+ roundCountEl.textContent = completedMatches + ' / ' + totalMatches;
+
+ let label = 'Quarterfinals';
+ if (completedMatches >= 4 && completedMatches < 6) label = 'Semifinals';
+ else if (completedMatches === 6) label = 'Final';
+ else if (completedMatches === 7) label = 'Champion crowned';
+
+ roundIndicator.textContent = label + ' · 4 • 2 • 1';
+ roundLabelMini.textContent = label;
+ }
+
+ function cloneContestant(styleName, fromSource) {
+ const pill = document.createElement('button');
+ pill.className = 'style-pill';
+ pill.dataset.style = styleName;
+ pill.dataset.source = fromSource;
+ const swatchDiv = document.createElement('div');
+ swatchDiv.className = 'swatch';
+ const inner = document.createElement('div');
+ inner.className = 'swatch-inner ' + (stylePatternClass[styleName] || '');
+ swatchDiv.appendChild(inner);
+
+ const textBlock = document.createElement('div');
+ textBlock.className = 'style-text-block';
+
+ const nameSpan = document.createElement('span');
+ nameSpan.className = 'style-name';
+ nameSpan.textContent = styleName;
+
+ const metaSpan = document.createElement('span');
+ metaSpan.className = 'style-meta';
+ metaSpan.textContent = 'Advancing';
+
+ textBlock.appendChild(nameSpan);
+ textBlock.appendChild(metaSpan);
+
+ pill.appendChild(swatchDiv);
+ pill.appendChild(textBlock);
+
+ return pill;
+ }
+
+ function onStyleClick(evt) {
+ const target = evt.currentTarget;
+ if (target.classList.contains('disabled')) return;
+
+ const styleName = target.dataset.style;
+ const matchEl = target.closest('.match');
+ const round = matchEl.dataset.round;
+ const matchKey = matchEl.dataset.match;
+
+ // Double-click (second tap) to clear before advancing round
+ if (target.classList.contains('selected') && !bracketComplete) {
+ target.classList.remove('selected', 'winner');
+ matchEl.classList.remove('active');
+ matchEl.querySelectorAll('.style-pill').forEach(btn => {
+ btn.classList.remove('disabled');
+ });
+ const source = target.dataset.source;
+ if (round === 'qf') {
+ matchWinners[source] = null;
+ if (source === 'qf1' || source === 'qf2') clearSlot('sf1');
+ else clearSlot('sf2');
+ } else if (round === 'sf') {
+ matchWinners['sf' + matchKey] = null;
+ clearSlot('final');
+ } else if (round === 'final') {
+ matchWinners.final = null;
+ bracketComplete = false;
+ }
+ completedMatches = Math.max(0, completedMatches - 1);
+ updateProgress();
+ refreshResultCard();
+ return;
+ }
+
+ // Normal selection
+ matchEl.classList.add('active');
+
+ matchEl.querySelectorAll('.style-pill').forEach(btn => {
+ btn.classList.remove('winner', 'selected');
+ if (btn !== target) btn.classList.add('disabled');
+ });
+
+ target.classList.add('selected', 'winner');
+
+ const source = target.dataset.source;
+ const key = round === 'qf' ? source :
+ round === 'sf' ? 'sf' + matchKey : 'final';
+
+ const alreadyHadWinner = !!matchWinners[key];
+ matchWinners[key] = styleName;
+ if (!alreadyHadWinner) {
+ completedMatches = Math.min(totalMatches, completedMatches + 1);
+ }
+
+ advanceBracket(round, matchKey, styleName, source);
+ updateProgress();
+ refreshResultCard();
+ }
+
+ function clearSlot(slotName) {
+ const slot = document.querySelector('.contestants[data-slot="' + slotName + '"]');
+ if (slot) {
+ slot.innerHTML = '';
+ const parentMatch = slot.closest('.match');
+ if (parentMatch) {
+ parentMatch.classList.remove('active');
+ const status = parentMatch.querySelector('.match-status');
+ if (slotName.startsWith('sf')) status.textContent = 'Awaiting winners';
+ else if (slotName === 'final') status.textContent = 'Crown your champion';
+ }
+ }
+ }
+
+ function advanceBracket(round, matchKey, styleName, source) {
+ if (round === 'qf') {
+ const isLeft = (source === 'qf1' || source === 'qf2');
+ const targetSlotName = isLeft ? 'sf1' : 'sf2';
+ const slot = document.querySelector('.contestants[data-slot="' + targetSlotName + '"]');
+ const parentMatch = slot.closest('.match');
+ const status = parentMatch.querySelector('.match-status');
+ if (!slot.querySelector('.style-pill')) {
+ slot.appendChild(cloneContestant(styleName, 'sf' + (isLeft ? '1' : '2')));
+ } else {
+ const existing = slot.querySelector('.style-pill');
+ if (existing.dataset.style === styleName) return;
+ slot.innerHTML = '';
+ slot.appendChild(cloneContestant(styleName, 'sf' + (isLeft ? '1' : '2')));
+ }
+ attachHandlers(slot.querySelectorAll('.style-pill'));
+ status.textContent = 'Tap your favourite';
+ } else if (round === 'sf') {
+ const isFirst = (matchKey === '1');
+ const finalSlot = document.querySelector('.contestants[data-slot="final"]');
+ const status = finalSlot.closest('.match').querySelector('.match-status');
+ const fromSource = isFirst ? 'final1' : 'final2';
+ if (!finalSlot.querySelector('.style-pill')) {
+ finalSlot.appendChild(cloneContestant(styleName, fromSource));
+ } else {
+ const existing = finalSlot.querySelector('.style-pill');
+ if (existing.dataset.style === styleName) return;
+ finalSlot.appendChild(cloneContestant(styleName, fromSource));
+ }
+ attachHandlers(finalSlot.querySelectorAll('.style-pill'));
+ status.textContent = 'Crown your champion';
+ } else if (round === 'final') {
+ bracketComplete = true;
+ shareBtn.disabled = false;
+ }
+ }
+
+ function refreshResultCard() {
+ const champion = matchWinners.final;
+ if (!champion) {
+ resultHeading.textContent = 'Who will define your walls?';
+ resultMeta.textContent = 'Complete the bracket to reveal a champion card.';
+ resultChampName.textContent = 'Awaiting Selection';
+ resultDescription.textContent = 'Tap through each pairing. Your final pick becomes a share-ready Designer Wallcoverings card.';
+ resultSwatch.innerHTML = '';
+ shareBtn.disabled = true;
+ return;
+ }
+ resultHeading.textContent = 'Your champion has been crowned.';
+ resultMeta.textContent = 'Ready for its close‑up — generate a shareable card.';
+ resultChampName.textContent = champion;
+ resultDescription.textContent = champion + ' takes the win in your personal Style Showdown. Capture this mood as a luxurious wallcovering moment.';
+ resultSwatch.innerHTML = '';
+ const inner = document.createElement('div');
+ inner.className = 'swatch-inner ' + (stylePatternClass[champion] || '');
+ resultSwatch.appendChild(inner);
+ }
+
+ function attachHandlers(nodeList) {
+ nodeList.forEach(btn => {
+ btn.removeEventListener('click', onStyleClick);
+ btn.addEventListener('click', onStyleClick);
+ });
+ }
+
+ function resetBracket() {
+ completedMatches = 0;
+ bracketComplete = false;
+ for (let key in matchWinners) matchWinners[key] = null;
+ document.querySelectorAll('.match').forEach(match => {
+ match.classList.remove('active');
+ const status = match.querySelector('.match-status');
+ const round = match.dataset.round;
+ if (round === 'qf') status.textContent = 'Tap to advance';
+ else if (round === 'sf') status.textContent = 'Awaiting winners';
+ else status.textContent = 'Crown your champion';
+ });
+ document.querySelectorAll('.style-pill').forEach(btn => {
+ if (!['qf1','qf2','qf3','qf4'].includes(btn.dataset.source)) {
+ btn.remove();
+ } else {
+ btn.classList.remove('disabled', 'selected', 'winner');
+ }
+ });
+ updateProgress();
+ refreshResultCard();
+ }
+
+ function openOverlay() {
+ const champion = matchWinners.final;
+ if (!champion) return;
+ overlayChampName.textContent = champion;
+ overlayStyleInline.textContent = champion;
+ overlaySwatch.innerHTML = '';
+ const inner = document.createElement('div');
+ inner.className = 'swatch-inner ' + (stylePatternClass[champion] || '');
+ overlaySwatch.appendChild(inner);
+ overlay.setAttribute('aria-hidden', 'false');
+ overlay.classList.add('visible');
+ }
+
+ function closeOverlay() {
+ overlay.classList.remove('visible');
+ overlay.setAttribute('aria-hidden', 'true');
+ }
+
+ // Initial bindings
+ attachHandlers(document.querySelectorAll('.style-pill'));
+ resetBtn.addEventListener('click', resetBracket);
+ shareBtn.addEventListener('click', openOverlay);
+ overlayClose.addEventListener('click', closeOverlay);
+ overlay.addEventListener('click', function(e) {
+ if (e.target === overlay) closeOverlay();
+ });
+
+ updateProgress();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/gpt.png b/data/artifacts/e2ddb50bc672/gpt.png
new file mode 100644
index 0000000..5305f69
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/gpt.png differ
diff --git a/data/artifacts/e2ddb50bc672/grok.html b/data/artifacts/e2ddb50bc672/grok.html
new file mode 100644
index 0000000..fc41f07
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/grok.html
@@ -0,0 +1,1143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style Showdown — Designer Wallcoverings</title>
+<style>
+:root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-2: #1e1e24;
+ --ink: #f5f2ea;
+ --text: #1c1a17;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-dim: #7d6a45;
+ --line: rgba(201, 169, 97, 0.28);
+ --line-soft: rgba(245, 242, 234, 0.08);
+ --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+ --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.28);
+ --ease: cubic-bezier(.22, .9, .24, 1);
+ --ease-out: cubic-bezier(.22, 1, .36, 1);
+ --ease-power: cubic-bezier(.77, 0, .18, 1);
+ --radius: 6px;
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', 'Helvetica Neue', sans-serif;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+ min-height: 100%;
+ background: var(--bg);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.55;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* ── Fixed top bar ���─ */
+.site-header {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ background: rgba(13, 13, 15, 0.94);
+ backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--line);
+ padding: 14px 28px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.wordmark {
+ font-family: var(--serif);
+ font-size: 42px;
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--ink);
+ line-height: 1.15;
+ white-space: normal;
+ max-width: min(520px, 70vw);
+}
+
+.header-meta {
+ font-family: var(--sans);
+ font-size: 10px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--muted);
+ white-space: nowrap;
+}
+
+/* ── Layout ── */
+main {
+ max-width: 880px;
+ margin: 0 auto;
+ padding: 110px 24px 80px;
+}
+
+.hero {
+ text-align: center;
+ margin-bottom: 48px;
+}
+
+.eyebrow {
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 14px;
+}
+
+.hero h1 {
+ font-family: var(--serif);
+ font-size: clamp(38px, 6vw, 50px);
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+ color: var(--ink);
+ margin-bottom: 12px;
+}
+
+.hero p {
+ color: var(--muted);
+ font-size: 15px;
+ max-width: 42ch;
+ margin: 0 auto;
+ line-height: 1.65;
+}
+
+/* Round indicator */
+.round-bar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ margin-bottom: 36px;
+ flex-wrap: wrap;
+}
+
+.round-pill {
+ font-family: var(--sans);
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding: 6px 14px;
+ border: 1px solid var(--line-soft);
+ border-radius: 100px;
+ transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
+}
+
+.round-pill.active {
+ color: var(--bg);
+ background: var(--accent);
+ border-color: var(--accent);
+}
+
+.round-pill.done {
+ color: var(--accent);
+ border-color: var(--line);
+}
+
+.round-connector {
+ width: 18px;
+ height: 1px;
+ background: var(--line-soft);
+}
+
+/* Matchup stage */
+.stage {
+ position: relative;
+ min-height: 420px;
+}
+
+.matchup {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ gap: 20px;
+ align-items: stretch;
+ animation: fadeRise 0.55s var(--ease-out) both;
+}
+
+@keyframes fadeRise {
+ from { opacity: 0; transform: translateY(18px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+ to { opacity: 0; transform: scale(0.96); }
+}
+
+.matchup.leaving {
+ animation: fadeOut 0.35s var(--ease) forwards;
+}
+
+.vs {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 0 4px;
+}
+
+.vs span {
+ font-family: var(--serif);
+ font-size: 22px;
+ color: var(--accent);
+ letter-spacing: 0.12em;
+}
+
+.vs-line {
+ width: 1px;
+ height: 40px;
+ background: linear-gradient(to bottom, transparent, var(--line), transparent);
+}
+
+/* Style card */
+.card {
+ background: var(--surface);
+ border: 1px solid var(--line-soft);
+ border-radius: var(--radius);
+ overflow: hidden;
+ cursor: pointer;
+ transition: transform 0.4s var(--ease), border-color 0.35s var(--ease), box-shadow 0.4s var(--ease);
+ display: flex;
+ flex-direction: column;
+ box-shadow: var(--shadow-soft);
+ position: relative;
+}
+
+.card:hover, .card:focus-visible {
+ transform: translateY(-4px);
+ border-color: var(--accent);
+ box-shadow: var(--shadow);
+ outline: none;
+}
+
+.card.winner-flash {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 1px var(--accent), var(--shadow);
+}
+
+.card.loser-fade {
+ opacity: 0.35;
+ transform: scale(0.97);
+ pointer-events: none;
+}
+
+.swatch {
+ height: 200px;
+ position: relative;
+ overflow: hidden;
+}
+
+.card-body {
+ padding: 18px 20px 22px;
+ border-top: 1px solid var(--line-soft);
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.card-name {
+ font-family: var(--serif);
+ font-size: 24px;
+ font-weight: 400;
+ letter-spacing: 0.02em;
+ color: var(--ink);
+ line-height: 1.2;
+}
+
+.card-tag {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.tap-hint {
+ margin-top: auto;
+ padding-top: 12px;
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent-dim);
+ transition: color 0.3s var(--ease);
+}
+
+.card:hover .tap-hint { color: var(--accent); }
+
+/* ── Pattern swatches (pure CSS / SVG) ── */
+
+/* Damask — ornate diamond medallion */
+.pat-damask {
+ background-color: #1a1510;
+ background-image:
+ radial-gradient(ellipse 30% 40% at 50% 50%, rgba(201,169,97,0.35) 0%, transparent 70%),
+ radial-gradient(circle at 50% 20%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 50% 80%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 20% 50%, rgba(201,169,97,0.2) 0 2px, transparent 3px),
+ radial-gradient(circle at 80% 50%, rgba(201,169,97,0.2) 0 2px, transparent 3px);
+ background-size: 100% 100%, 48px 48px, 48px 48px, 48px 48px, 48px 48px;
+}
+.pat-damask::before {
+ content: '';
+ position: absolute;
+ inset: 18%;
+ border: 1px solid rgba(201,169,97,0.4);
+ border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
+ box-shadow:
+ inset 0 0 0 8px rgba(201,169,97,0.08),
+ 0 0 0 12px rgba(201,169,97,0.06);
+}
+.pat-damask::after {
+ content: '';
+ position: absolute;
+ inset: 32%;
+ background:
+ radial-gradient(circle at center, rgba(201,169,97,0.55) 0 18%, transparent 19%),
+ conic-gradient(from 45deg, transparent 0 10%, rgba(201,169,97,0.25) 10% 15%, transparent 15% 35%, rgba(201,169,97,0.25) 35% 40%, transparent 40% 60%, rgba(201,169,97,0.25) 60% 65%, transparent 65% 85%, rgba(201,169,97,0.25) 85% 90%, transparent 90%);
+ border-radius: 50%;
+}
+
+/* Toile — pastoral line scene suggestion */
+.pat-toile {
+ background-color: #e8e0d4;
+ background-image:
+ radial-gradient(circle at 25% 30%, transparent 8px, #3a4a5c 8.5px, #3a4a5c 9.5px, transparent 10px),
+ radial-gradient(ellipse 40px 20px at 70% 65%, transparent 40%, #3a4a5c 42%, #3a4a5c 44%, transparent 46%),
+ radial-gradient(circle at 60% 25%, #3a4a5c 0 1.5px, transparent 2px),
+ radial-gradient(circle at 35% 70%, #3a4a5c 0 1.5px, transparent 2px),
+ radial-gradient(circle at 80% 40%, #3a4a5c 0 1px, transparent 1.5px),
+ linear-gradient(135deg, transparent 48%, rgba(58,74,92,0.12) 49%, rgba(58,74,92,0.12) 51%, transparent 52%);
+ background-size: 90px 90px, 90px 90px, 45px 45px, 45px 45px, 30px 30px, 60px 60px;
+}
+.pat-toile::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(58,74,92,0.06) 28px, rgba(58,74,92,0.06) 29px),
+ repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(58,74,92,0.06) 28px, rgba(58,74,92,0.06) 29px);
+ opacity: 0.7;
+}
+.pat-toile::after {
+ content: '';
+ position: absolute;
+ width: 50px; height: 36px;
+ left: 55%; top: 42%;
+ border: 1.5px solid #3a4a5c;
+ border-radius: 50% 50% 40% 40%;
+ opacity: 0.55;
+ box-shadow: -40px 20px 0 -8px #3a4a5c, 20px -30px 0 -12px rgba(58,74,92,0.4);
+}
+
+/* Ikat — blurred zigzag dye */
+.pat-ikat {
+ background-color: #2a1f18;
+ background-image:
+ repeating-linear-gradient(
+ 90deg,
+ #8b3a2a 0px, #8b3a2a 14px,
+ #c9a961 14px, #c9a961 22px,
+ #1f3a4a 22px, #1f3a4a 36px,
+ #d4c4a0 36px, #d4c4a0 44px,
+ #8b3a2a 44px, #8b3a2a 58px
+ );
+ filter: none;
+}
+.pat-ikat::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(
+ 0deg,
+ transparent 0px, transparent 10px,
+ rgba(13,13,15,0.25) 10px, rgba(13,13,15,0.25) 12px,
+ transparent 12px, transparent 22px,
+ rgba(245,242,234,0.08) 22px, rgba(245,242,234,0.08) 24px
+ );
+ mix-blend-mode: overlay;
+}
+.pat-ikat::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: repeating-linear-gradient(
+ 90deg,
+ transparent 0 8px,
+ rgba(13,13,15,0.35) 8px 10px,
+ transparent 10px 18px,
+ rgba(245,242,234,0.12) 18px 19px
+ );
+ filter: blur(1.5px);
+}
+
+/* Chinoiserie — branch + bird motif */
+.pat-chinoiserie {
+ background: linear-gradient(160deg, #1a2830 0%, #0f1a20 50%, #1c2e28 100%);
+}
+.pat-chinoiserie svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+/* Art Deco — fan + geometry */
+.pat-artdeco {
+ background: #0e0e12;
+ background-image:
+ linear-gradient(30deg, transparent 40%, rgba(201,169,97,0.15) 40%, rgba(201,169,97,0.15) 42%, transparent 42%),
+ linear-gradient(-30deg, transparent 40%, rgba(201,169,97,0.15) 40%, rgba(201,169,97,0.15) 42%, transparent 42%),
+ linear-gradient(90deg, transparent 49%, rgba(201,169,97,0.35) 49%, rgba(201,169,97,0.35) 51%, transparent 51%),
+ radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,169,97,0.4) 0%, transparent 55%);
+}
+.pat-artdeco::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 8%;
+ transform: translateX(-50%);
+ width: 70%; height: 55%;
+ background:
+ conic-gradient(from 200deg at 50% 100%,
+ transparent 0deg,
+ rgba(201,169,97,0.5) 0deg 8deg,
+ transparent 8deg 16deg,
+ rgba(201,169,97,0.4) 16deg 24deg,
+ transparent 24deg 32deg,
+ rgba(201,169,97,0.5) 32deg 40deg,
+ transparent 40deg 48deg,
+ rgba(201,169,97,0.35) 48deg 56deg,
+ transparent 56deg 64deg,
+ rgba(201,169,97,0.5) 64deg 72deg,
+ transparent 72deg 140deg);
+ border-radius: 100% 100% 0 0;
+}
+.pat-artdeco::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 18%;
+ transform: translateX(-50%);
+ width: 36px; height: 36px;
+ border: 1.5px solid var(--accent);
+ border-radius: 50%;
+ box-shadow: 0 0 0 6px rgba(201,169,97,0.12), inset 0 0 0 6px rgba(201,169,97,0.15);
+}
+
+/* Boho — terracotta + tribal diamonds */
+.pat-boho {
+ background-color: #c4785a;
+ background-image:
+ repeating-linear-gradient(0deg, transparent 0 16px, rgba(61,40,28,0.2) 16px 17px),
+ linear-gradient(135deg, #3d281c 25%, transparent 25%),
+ linear-gradient(225deg, #3d281c 25%, transparent 25%),
+ linear-gradient(45deg, #3d281c 25%, transparent 25%),
+ linear-gradient(315deg, #3d281c 25%, transparent 25%);
+ background-size: 100% 100%, 28px 28px, 28px 28px, 28px 28px, 28px 28px;
+ background-position: 0 0, 0 0, 14px 0, 14px 0, 0 0;
+}
+.pat-boho::before {
+ content: '';
+ position: absolute;
+ inset: 20% 15%;
+ border: 2px solid rgba(244, 220, 180, 0.55);
+ background:
+ linear-gradient(45deg, transparent 46%, rgba(244,220,180,0.7) 46%, rgba(244,220,180,0.7) 54%, transparent 54%),
+ linear-gradient(-45deg, transparent 46%, rgba(244,220,180,0.7) 46%, rgba(244,220,180,0.7) 54%, transparent 54%);
+}
+.pat-boho::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 50%;
+ transform: translate(-50%,-50%) rotate(45deg);
+ width: 22px; height: 22px;
+ background: #f4dcb4;
+ box-shadow: 0 0 0 6px #c4785a, 0 0 0 8px rgba(244,220,180,0.5);
+}
+
+/* Coastal — soft stripes + wave */
+.pat-coastal {
+ background-color: #dfe8e6;
+ background-image:
+ repeating-linear-gradient(
+ 0deg,
+ #dfe8e6 0px, #dfe8e6 14px,
+ #a8c4c0 14px, #a8c4c0 15px,
+ #dfe8e6 15px, #dfe8e6 28px,
+ #7a9eae 28px, #7a9eae 29px
+ );
+}
+.pat-coastal::before {
+ content: '';
+ position: absolute;
+ left: 0; right: 0; bottom: 0;
+ height: 45%;
+ background:
+ radial-gradient(ellipse 60% 40% at 20% 100%, #7a9eae 0%, transparent 70%),
+ radial-gradient(ellipse 50% 35% at 70% 100%, #5a8494 0%, transparent 70%),
+ linear-gradient(to top, #8eb0b8 0%, transparent 100%);
+ opacity: 0.55;
+}
+.pat-coastal::after {
+ content: '';
+ position: absolute;
+ left: -10%; right: -10%; bottom: 28%;
+ height: 24px;
+ background: repeating-radial-gradient(
+ circle at 0 100%,
+ transparent 0, transparent 18px,
+ rgba(90,132,148,0.35) 18px, rgba(90,132,148,0.35) 20px,
+ transparent 20px, transparent 40px
+ );
+ background-size: 40px 24px;
+}
+
+/* Grandmillennial — chintz florals on soft ground */
+.pat-grand {
+ background-color: #f0e6dc;
+ background-image:
+ radial-gradient(circle at 20% 30%, #c45c6a 0 6px, transparent 7px),
+ radial-gradient(circle at 22% 28%, #e8a0a8 0 3px, transparent 4px),
+ radial-gradient(circle at 70% 60%, #5a7a4a 0 5px, transparent 6px),
+ radial-gradient(circle at 72% 58%, #8aab6a 0 3px, transparent 4px),
+ radial-gradient(circle at 50% 75%, #c45c6a 0 5px, transparent 6px),
+ radial-gradient(circle at 80% 25%, #b08a3a 0 4px, transparent 5px),
+ radial-gradient(circle at 35% 70%, #b08a3a 0 3px, transparent 4px),
+ radial-gradient(circle at 55% 35%, #5a7a4a 0 4px, transparent 5px),
+ radial-gradient(circle at 15% 80%, #8aab6a 0 4px, transparent 5px),
+ radial-gradient(ellipse 12px 8px at 20% 36%, #5a7a4a 0%, transparent 100%),
+ radial-gradient(ellipse 10px 7px at 70% 66%, #c45c6a 0%, transparent 100%);
+ background-size: 100px 100px;
+}
+.pat-grand::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at 45% 20%, rgba(196,92,106,0.35) 0 8px, transparent 9px),
+ radial-gradient(circle at 85% 80%, rgba(90,122,74,0.3) 0 7px, transparent 8px),
+ radial-gradient(circle at 10% 50%, rgba(176,138,58,0.3) 0 6px, transparent 7px);
+ background-size: 80px 80px;
+ opacity: 0.85;
+}
+.pat-grand::after {
+ content: '';
+ position: absolute;
+ inset: 12%;
+ border: 1px dashed rgba(140, 110, 90, 0.35);
+ border-radius: 4px;
+ pointer-events: none;
+}
+
+/* Progress track */
+.progress-wrap {
+ margin: 40px auto 0;
+ max-width: 320px;
+ text-align: center;
+}
+
+.progress-label {
+ font-size: 10px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 10px;
+}
+
+.progress-track {
+ height: 2px;
+ background: var(--line-soft);
+ border-radius: 2px;
+ overflow: hidden;
+}
+
+.progress-fill {
+ height: 100%;
+ background: var(--accent);
+ width: 0%;
+ transition: width 0.55s var(--ease-power);
+}
+
+/* Bracket crumbs */
+.bracket-path {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: center;
+ margin-top: 28px;
+ min-height: 28px;
+}
+
+.crumb {
+ font-size: 10px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding: 4px 10px;
+ border: 1px solid var(--line-soft);
+ border-radius: 100px;
+ animation: fadeRise 0.4s var(--ease-out) both;
+}
+
+.crumb.champ {
+ color: var(--accent);
+ border-color: var(--line);
+}
+
+/* ── Result overlay ── */
+.overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ background: rgba(13, 13, 15, 0.88);
+ backdrop-filter: blur(16px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
+}
+
+.overlay.open {
+ opacity: 1;
+ visibility: visible;
+}
+
+.result-card {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ max-width: 420px;
+ width: 100%;
+ overflow: hidden;
+ transform: translateY(24px) scale(0.97);
+ transition: transform 0.55s var(--ease-out);
+}
+
+.overlay.open .result-card {
+ transform: translateY(0) scale(1);
+}
+
+.result-swatch {
+ height: 180px;
+ position: relative;
+}
+
+.result-body {
+ padding: 28px 28px 32px;
+ text-align: center;
+}
+
+.result-eyebrow {
+ font-size: 10px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 10px;
+}
+
+.result-title {
+ font-family: var(--serif);
+ font-size: 38px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+ color: var(--ink);
+ margin-bottom: 8px;
+}
+
+.result-sub {
+ color: var(--muted);
+ font-size: 14px;
+ margin-bottom: 24px;
+ line-height: 1.6;
+}
+
+.result-path {
+ font-size: 11px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding: 12px;
+ border-top: 1px solid var(--line-soft);
+ border-bottom: 1px solid var(--line-soft);
+ margin-bottom: 24px;
+ line-height: 1.8;
+}
+
+.result-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.btn {
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ padding: 12px 22px;
+ border-radius: 2px;
+ border: 1px solid var(--line);
+ background: transparent;
+ color: var(--ink);
+ cursor: pointer;
+ transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
+}
+
+.btn:hover, .btn:focus-visible {
+ background: var(--accent);
+ color: var(--bg);
+ border-color: var(--accent);
+ outline: none;
+}
+
+.btn-ghost {
+ border-color: var(--line-soft);
+ color: var(--muted);
+}
+
+.btn-ghost:hover, .btn-ghost:focus-visible {
+ color: var(--ink);
+ background: var(--surface-2);
+ border-color: var(--line);
+}
+
+.share-toast {
+ position: fixed;
+ bottom: 28px;
+ left: 50%;
+ transform: translateX(-50%) translateY(20px);
+ background: var(--surface);
+ border: 1px solid var(--line);
+ color: var(--ink);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ padding: 12px 22px;
+ border-radius: 2px;
+ box-shadow: var(--shadow-soft);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
+ z-index: 300;
+}
+
+.share-toast.show {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+}
+
+/* Final matchup slight emphasis */
+.final-glow .card {
+ border-color: rgba(201,169,97,0.25);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+ .wordmark {
+ font-size: 28px;
+ letter-spacing: 0.14em;
+ max-width: 100%;
+ }
+ .header-meta { display: none; }
+ .site-header { padding: 12px 16px; }
+ main { padding: 96px 16px 64px; }
+ .matchup {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+ .vs {
+ flex-direction: row;
+ padding: 4px 0;
+ }
+ .vs-line {
+ width: 40px;
+ height: 1px;
+ }
+ .swatch { height: 150px; }
+ .card-name { font-size: 22px; }
+ .result-title { font-size: 30px; }
+}
+</style>
+</head>
+<body>
+
+<header class="site-header">
+ <div class="wordmark">Designer Wallcoverings</div>
+ <div class="header-meta">Style Showdown</div>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="eyebrow">Tournament · Eight Styles</div>
+ <h1>Style Showdown</h1>
+ <p>Tap the wallcovering that wins each pairing. Advance through quarters, semis, and the final — then claim your champion.</p>
+ </section>
+
+ <div class="round-bar" id="roundBar" aria-live="polite"></div>
+
+ <div class="stage" id="stage"></div>
+
+ <div class="progress-wrap">
+ <div class="progress-label" id="progressLabel">Match 1 of 7</div>
+ <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
+ </div>
+
+ <div class="bracket-path" id="bracketPath" aria-label="Winners so far"></div>
+</main>
+
+<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="resultTitle">
+ <div class="result-card">
+ <div class="result-swatch" id="resultSwatch"></div>
+ <div class="result-body">
+ <div class="result-eyebrow">Your Champion</div>
+ <h2 class="result-title" id="resultTitle">—</h2>
+ <p class="result-sub" id="resultSub"></p>
+ <div class="result-path" id="resultPath"></div>
+ <div class="result-actions">
+ <button type="button" class="btn" id="shareBtn">Share Result</button>
+ <button type="button" class="btn btn-ghost" id="replayBtn">Play Again</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="share-toast" id="toast" role="status">Result copied</div>
+
+<script>
+(function () {
+ const STYLES = [
+ {
+ id: 'damask',
+ name: 'Damask',
+ tag: 'Ornate · Formal',
+ blurb: 'Sculpted medallions and mirror symmetry — timeless salon grandeur.',
+ pat: 'pat-damask'
+ },
+ {
+ id: 'toile',
+ name: 'Toile',
+ tag: 'Narrative · Classic',
+ blurb: 'Pastoral vignettes in indigo linework — storybook elegance.',
+ pat: 'pat-toile'
+ },
+ {
+ id: 'ikat',
+ name: 'Ikat',
+ tag: 'Dyed · Global',
+ blurb: 'Blurred warp-resist bands — craft energy with jewel depth.',
+ pat: 'pat-ikat'
+ },
+ {
+ id: 'chinoiserie',
+ name: 'Chinoiserie',
+ tag: 'Eastern · Lyrical',
+ blurb: 'Willow branches and garden birds — romantic Far East fantasy.',
+ pat: 'pat-chinoiserie',
+ svg: true
+ },
+ {
+ id: 'artdeco',
+ name: 'Art Deco',
+ tag: 'Geometry · Gilded',
+ blurb: 'Sunburst fans and strict symmetry — jazz-age glamour.',
+ pat: 'pat-artdeco'
+ },
+ {
+ id: 'boho',
+ name: 'Boho',
+ tag: 'Tribal · Free',
+ blurb: 'Terracotta diamonds and hand-loom spirit — collected wanderlust.',
+ pat: 'pat-boho'
+ },
+ {
+ id: 'coastal',
+ name: 'Coastal',
+ tag: 'Airy · Nautical',
+ blurb: 'Sea-glass stripes and soft horizon waves — breezy restraint.',
+ pat: 'pat-coastal'
+ },
+ {
+ id: 'grand',
+ name: 'Grandmillennial',
+ tag: 'Chintz · Layered',
+ blurb: 'Heirloom florals on ivory ground — grandma chic, reborn.',
+ pat: 'pat-grand'
+ }
+ ];
+
+ const CHINO_SVG = `
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+ <path d="M20 180 C40 140, 35 100, 55 70 C70 48, 90 55, 95 80" fill="none" stroke="#c9a961" stroke-width="1.2" opacity="0.7"/>
+ <path d="M55 70 C60 40, 85 25, 110 40 C130 52, 125 80, 105 90" fill="none" stroke="#8aab6a" stroke-width="1" opacity="0.65"/>
+ <path d="M95 80 C115 95, 140 90, 155 70 C168 54, 160 35, 140 30" fill="none" stroke="#c9a961" stroke-width="1" opacity="0.55"/>
+ <circle cx="48" cy="95" r="3" fill="#c45c6a" opacity="0.7"/>
+ <circle cx="72" cy="55" r="2.5" fill="#c9a961" opacity="0.8"/>
+ <circle cx="118" cy="48" r="3" fill="#c45c6a" opacity="0.65"/>
+ <circle cx="148" cy="55" r="2" fill="#8aab6a" opacity="0.7"/>
+ <ellipse cx="130" cy="120" rx="14" ry="6" fill="none" stroke="#c9a961" stroke-width="1" opacity="0.6" transform="rotate(-25 130 120)"/>
+ <path d="M118 118 Q130 108 142 120" fill="none" stroke="#e8d5a8" stroke-width="0.8" opacity="0.7"/>
+ <circle cx="145" cy="116" r="2" fill="#c45c6a" opacity="0.75"/>
+ <path d="M100 160 C110 145, 130 150, 140 165" fill="none" stroke="#5a7a4a" stroke-width="1" opacity="0.5"/>
+ <path d="M30 50 C50 45, 55 30, 45 20" fill="none" stroke="#8aab6a" stroke-width="0.9" opacity="0.45"/>
+ <circle cx="42" cy="22" r="2" fill="#c9a961" opacity="0.5"/>
+</svg>`;
+
+ const ROUNDS = ['Quarterfinals', 'Semifinals', 'Final', 'Champion'];
+
+ // Deterministic shuffle of pairing order for variety without randomness flakiness
+ let bracket = shuffle([...STYLES]);
+ let roundIndex = 0; // 0 QF, 1 SF, 2 F
+ let matchIndex = 0;
+ let winners = [];
+ let pathNames = [];
+ let totalMatches = 7;
+ let matchesDone = 0;
+ let locked = false;
+
+ const stage = document.getElementById('stage');
+ const roundBar = document.getElementById('roundBar');
+ const progressFill = document.getElementById('progressFill');
+ const progressLabel = document.getElementById('progressLabel');
+ const bracketPath = document.getElementById('bracketPath');
+ const overlay = document.getElementById('overlay');
+ const toast = document.getElementById('toast');
+
+ function shuffle(arr) {
+ const a = arr.slice();
+ for (let i = a.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [a[i], a[j]] = [a[j], a[i]];
+ }
+ return a;
+ }
+
+ function renderRoundBar() {
+ const labels = ['Quarters', 'Semis', 'Final'];
+ roundBar.innerHTML = labels.map((lab, i) => {
+ let cls = 'round-pill';
+ if (i < roundIndex) cls += ' done';
+ if (i === roundIndex) cls += ' active';
+ const conn = i < labels.length - 1 ? '<div class="round-connector"></div>' : '';
+ return `<div class="${cls}">${lab}</div>${conn}`;
+ }).join('');
+ }
+
+ function updateProgress() {
+ const pct = (matchesDone / totalMatches) * 100;
+ progressFill.style.width = pct + '%';
+ if (matchesDone >= totalMatches) {
+ progressLabel.textContent = 'Champion crowned';
+ } else {
+ progressLabel.textContent = 'Match ' + (matchesDone + 1) + ' of ' + totalMatches;
+ }
+ }
+
+ function swatchHTML(style) {
+ const inner = style.svg ? CHINO_SVG : '';
+ return `<div class="swatch ${style.pat}">${inner}</div>`;
+ }
+
+ function cardHTML(style, side) {
+ return `
+ <article class="card" tabindex="0" role="button" data-id="${style.id}" data-side="${side}" aria-label="Vote for ${style.name}">
+ ${swatchHTML(style)}
+ <div class="card-body">
+ <div class="card-name">${style.name}</div>
+ <div class="card-tag">${style.tag}</div>
+ <div class="tap-hint">Tap to advance →</div>
+ </div>
+ </article>`;
+ }
+
+ function currentPair() {
+ const i = matchIndex * 2;
+ return [bracket[i], bracket[i + 1]];
+ }
+
+ function renderMatch() {
+ locked = false;
+ const [a, b] = currentPair();
+ const isFinal = roundIndex === 2;
+ stage.className = 'stage' + (isFinal ? ' final-glow' : '');
+ stage.innerHTML = `
+ <div class="matchup" id="matchup">
+ ${cardHTML(a, 'a')}
+ <div class="vs"><div class="vs-line"></div><span>VS</span><div class="vs-line"></div></div>
+ ${cardHTML(b, 'b')}
+ </div>`;
+
+ stage.querySelectorAll('.card').forEach(card => {
+ card.addEventListener('click', () => onPick(card));
+ card.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ onPick(card);
+ }
+ });
+ });
+
+ renderRoundBar();
+ updateProgress();
+ }
+
+ function onPick(cardEl) {
+ if (locked) return;
+ locked = true;
+ const id = cardEl.dataset.id;
+ const [a, b] = currentPair();
+ const winner = a.id === id ? a : b;
+ const loserEl = stage.querySelector(`.card:not([data-id="${id}"])`);
+ const winEl = cardEl;
+
+ winEl.classList.add('winner-flash');
+ if (loserEl) loserEl.classList.add('loser-fade');
+
+ winners.push(winner);
+ pathNames.push(winner.name);
+ matchesDone++;
+
+ const crumb = document.createElement('span');
+ crumb.className = 'crumb';
+ crumb.textContent = winner.name;
+ bracketPath.appendChild(crumb);
+
+ updateProgress();
+
+ const matchup = document.getElementById('matchup');
+ setTimeout(() => {
+ if (matchup) matchup.classList.add('leaving');
+ setTimeout(() => advance(), 320);
+ }, 520);
+ }
+
+ function advance() {
+ const pairsThisRound = bracket.length / 2;
+ matchIndex++;
+
+ if (matchIndex < pairsThisRound) {
+ renderMatch();
+ return;
+ }
+
+ // Round complete
+ if (roundIndex === 2) {
+ // Final done — champion
+ showChampion(winners[winners.length - 1]);
+ return;
+ }
+
+ bracket = winners.slice();
+ winners = [];
+ matchIndex = 0;
+ roundIndex++;
+ renderMatch();
+ }
+
+ function showChampion(champ) {
+ renderRoundBar();
+ updateProgress();
+
+ const crumbs = bracketPath.querySelectorAll('.crumb');
+ if (crumbs.length) crumbs[crumbs.length - 1].classList.add('champ');
+
+ document.getElementById('resultTitle').textContent = champ.name;
+ document.getElementById('resultSub').textContent = champ.blurb;
+ document.getElementById('resultPath').textContent =
+ 'Path · ' + pathNames.join(' → ');
+
+ const rs = document.getElementById('resultSwatch');
+ rs.className = 'result-swatch ' + champ.pat;
+ rs.innerHTML = champ.svg ? CHINO_SVG : '';
+
+ stage.innerHTML = `
+ <div class="matchup" style="grid-template-columns:1fr;max-width:360px;margin:0 auto">
+ <article class="card winner-flash" style="cursor:default">
+ ${swatchHTML(champ)}
+ <div class="card-body">
+ <div class="card-name">${champ.name}</div>
+ <div class="card-tag">${champ.tag}</div>
+ <div class="tap-hint" style="color:var(--accent)">Tournament Champion</div>
+ </div>
+ </article>
+ </div>`;
+
+ overlay.classList.add('open');
+ window.__champion = champ;
+ }
+
+ function shareResult() {
+ const champ = window.__champion;
+ if (!champ) return;
+ const text = `My Style Showdown champion: ${champ.name} — ${champ.tag}. Path: ${pathNames.join(' → ')}. Designer Wallcoverings.`;
+
+ const done = () => {
+ toast.textContent = 'Result copied';
+ toast.classList.add('show');
+ setTimeout(() => toast.classList.remove('show'), 2200);
+ };
+
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ navigator.clipboard.writeText(text).then(done).catch(() => fallbackCopy(text, done));
+ } else {
+ fallbackCopy(text, done);
+ }
+ }
+
+ function fallbackCopy(text, cb) {
+ const ta = document.createElement('textarea');
+ ta.value = text;
+ ta.setAttribute('readonly', '');
+ ta.style.cssText = 'position:fixed;left:-9999px;top:0';
+ document.body.appendChild(ta);
+ ta.select();
+ try { document.execCommand('copy'); } catch (e) {}
+ document.body.removeChild(ta);
+ cb();
+ }
+
+ function reset() {
+ overlay.classList.remove('open');
+ bracket = shuffle([...STYLES]);
+ roundIndex = 0;
+ matchIndex = 0;
+ winners = [];
+ pathNames = [];
+ matchesDone = 0;
+ locked = false;
+ window.__champion = null;
+ bracketPath.innerHTML = '';
+ renderMatch();
+ }
+
+ document.getElementById('shareBtn').addEventListener('click', shareResult);
+ document.getElementById('replayBtn').addEventListener('click', reset);
+
+ overlay.addEventListener('click', (e) => {
+ if (e.target === overlay) {
+ /* keep open — deliberate choice; use Play Again */
+ }
+ });
+
+ // Boot
+ renderMatch();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/grok.png b/data/artifacts/e2ddb50bc672/grok.png
new file mode 100644
index 0000000..b2f5619
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/grok.png differ
diff --git a/data/artifacts/e2ddb50bc672/hermes3-8b.html b/data/artifacts/e2ddb50bc672/hermes3-8b.html
new file mode 100644
index 0000000..40e0ac8
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/hermes3-8b.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Design Style Showdown</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent1: #c9a961;
+ --accent2: #7d6a45;
+ --line: 1px solid var(--accent1);
+ --shadow: 0 8px 24px rgba(0,0,0,.12);
+ --ease-in-out-quart: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: 'EB Garamond', serif;
+ font-size: 16px;
+ line-height: 1.5;
+ margin: 0;
+ padding: 96px;
+ }
+
+ h1 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 50px;
+ letter-spacing: .18em;
+ margin: 0;
+ }
+
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: var(--surface);
+ padding: 12px 24px;
+ color: var(--surface);
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 40px;
+ }
+
+ .wordmark {
+ font-weight: bold;
+ }
+
+ section {
+ margin-bottom: 96px;
+ }
+
+ .card {
+ display: flex;
+ align-items: center;
+ padding: 16px;
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ cursor: pointer;
+ gap: 24px;
+ }
+
+ .swatch {
+ width: 48px;
+ height: 48px;
+ background-color: var(--muted);
+ display: block;
+ }
+
+ .style-name {
+ font-family: 'EB Garamond', serif;
+ color: var(--text);
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ font-size: 12px;
+ }
+
+ .progress-bar {
+ height: 8px;
+ background-color: var(--surface);
+ border-radius: 4px;
+ margin-top: 8px;
+ overflow: hidden;
+ }
+
+ .vote-count {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ color: var(--accent1);
+ font-family: 'EB Garamond', serif;
+ text-transform: uppercase;
+ }
+
+ .votes {
+ background-color: var(--accent1);
+ padding: 4px 8px;
+ border-radius: 50%;
+ }
+
+ @keyframes fadeUp {
+ from {opacity: 0; transform: translateY(28px);}
+ to {opacity: 1; transform: translateY(0);}
+ }
+
+ .fade-in {
+ animation-name: fadeUp;
+ animation-duration: .7s;
+ animation-fill-mode: both;
+ animation-timing-function: var(--ease-in-out-quart);
+ }
+
+ @keyframes driftBackground {
+ to {background-position: -18px 0;}
+ }
+
+ body:hover::after {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: linear-gradient(45deg, var(--accent1), var(--accent2));
+ z-index: -1;
+ animation: driftBackground 18s linear infinite;
+ }
+ </style>
+</head>
+<body>
+ <header class="fade-in">
+ <span class="wordmark">DESIGNER WALLCOVERINGS</span>
+ </header>
+
+ <section class="fade-in" style="animation-delay:.1s">
+ <h1>Design Style Showdown</h1>
+ <!-- Output HTML content here -->
+ </section>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/hermes3-8b.png b/data/artifacts/e2ddb50bc672/hermes3-8b.png
new file mode 100644
index 0000000..5d654d9
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/hermes3-8b.png differ
diff --git a/data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.html b/data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..0d57677
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.html
@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Style Showdown</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent1: #b0472e;
+ --accent2: #2f4c39;
+ --line: 1px solid #ddd;
+ --shadow: 0 8px 24px rgba(0,0,0,.12);
+ --hover-shadow: 0 16px 48px rgba(0,0,0,.18);
+ --glow: 0 0 24px #b0472e35;
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+ body {
+ margin: 0;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 96px;
+ }
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--bg);
+ padding: 24px;
+ box-shadow: var(--shadow);
+ z-index: 1000;
+ text-align: left;
+ }
+ header h1 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 50px;
+ letter-spacing: .18em;
+ margin: 0;
+ color: var(--text);
+ }
+ main {
+ width: 90%;
+ max-width: 1200px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ section {
+ margin-bottom: 96px;
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ }
+ .card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ transition: all .3s ease-in-out;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 260px;
+ }
+ .card:hover {
+ box-shadow: var(--hover-shadow);
+ }
+ .card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--accent1);
+ opacity: 0;
+ transition: opacity .3s ease-in-out;
+ }
+ .card:hover::before {
+ opacity: .25;
+ }
+ .swatch {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+ .swatch svg {
+ width: 80%;
+ height: 80%;
+ }
+ .button-group {
+ display: flex;
+ gap: 12px;
+ margin-top: 24px;
+ }
+ .button-group button {
+ background-color: var(--accent1);
+ color: var(--surface);
+ border: none;
+ padding: 8px 16px;
+ font-size: 12px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all .3s ease-in-out;
+ }
+ .button-group button:hover {
+ background-color: var(--accent2);
+ }
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,.75);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 999;
+ }
+ .overlay .result-card {
+ background-color: var(--surface);
+ padding: 32px;
+ border-radius: 14px;
+ box-shadow: var(--hover-shadow);
+ text-align: center;
+ animation: fadeUp .7s ease-in-out both;
+ }
+ .overlay .result-card h2 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ margin-bottom: 24px;
+ }
+ .overlay .result-card p {
+ font-size: 16px;
+ color: var(--muted);
+ margin-bottom: 24px;
+ }
+ .overlay .result-card button {
+ background-color: var(--accent1);
+ color: var(--surface);
+ border: none;
+ padding: 12px 24px;
+ font-size: 16px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all .3s ease-in-out;
+ }
+ .overlay .result-card button:hover {
+ background-color: var(--accent2);
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </header>
+ <main>
+ <section id="round-1">
+ <div class="card" data-style="Damask">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <defs><pattern id="a" x="0" y="0" width=".1667" height=".1667"><line x1="0" y1="0" x2="1" y2="1" stroke="#b0472e" /><line x1="1" y1="0" x2="0" y2="1" stroke="#b0472e" /></pattern></defs>
+ <rect width="24" height="24" fill="url(#a)" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Toile">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <circle cx="12" cy="12" r="10" fill="#ffffff" stroke="#b0472e" />
+ <circle cx="12" cy="12" r="5" fill="#ffffff" stroke="#b0472e" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Ikat">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12c6.617,0,12-5.383,12-12S18.617,0,12,0z" fill="#ffffff" />
+ <path d="M18.944,11.056l-5.889,5.889c-0.293,0.293-0.769,0.293-1.062,0L10.944,12l2.056-2.056c0.293-0.293,0.768-0.293,1.061,0L18.944,11.056z" fill="#b0472e" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Chinoiserie">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <rect width="24" height="24" fill="#ffffff" />
+ <path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12c6.617,0,12-5.383,12-12S18.617,0,12,0z" fill="none" stroke="#b0472e" />
+ <path d="M9.5,13.5l3-3 3,3" stroke="#b0472e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Art Deco">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <rect width="24" height="24" fill="#ffffff" />
+ <polygon points="12,0 18,6 12,12 6,6" fill="#b0472e" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Boho">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <circle cx="12" cy="12" r="10" fill="#ffffff" stroke="#b0472e" />
+ <path d="M12,6a6,6 0 0,0-6,6v3h12v-3A6,6 0 0,0,12,6z" fill="#ffffff" stroke="#b0472e" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Coastal">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <rect width="24" height="24" fill="#ffffff" />
+ <path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12c6.617,0,12-5.383,12-12S18.617,0,12,0z" fill="none" stroke="#b0472e" />
+ <path d="M9.5,13.5l3-3 3,3" stroke="#b0472e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ </svg>
+ </div>
+ </div>
+ <div class="card" data-style="Grandmillennial">
+ <div class="swatch">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <rect width="24" height="24" fill="#ffffff" />
+ <circle cx="12" cy="12" r="10" fill="#ffffff" stroke="#b0472e" />
+ <path d="M18,6L12,12l-3-3" stroke="#b0472e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ </svg>
+ </div>
+ </div>
+ </section>
+ <section id="round-2" style="display:none;">
+ <!-- Round 2 Cards will be populated here -->
+ </section>
+ <section id="round-3" style="display:none;">
+ <!-- Round 3 Cards will be populated here -->
+ </section>
+ <section id="final" style="display:none;">
+ <!-- Final Card will be populated here -->
+ </section>
+ </main>
+ <div class="overlay" id="resultOverlay" style="display:none;">
+ <div class="result-card">
+ <h2>Champion</h2>
+ <p id="championName"></p>
+ <button onclick="restart()">Restart Tournament</button>
+ </div>
+ </div>
+ <script>
+ const rounds = document.querySelectorAll('section');
+ let currentRoundIndex = 0;
+ let nextMatchupIndex = 0;
+
+ function advanceWinner(winnerCard) {
+ const winnerStyle = winnerCard.getAttribute('data-style');
+
+ if (currentRoundIndex === rounds.length - 1) {
+ // Final round
+ document.getElementById('championName').textContent = winnerStyle;
+ document.getElementById('resultOverlay').style.display = 'flex';
+ } else {
+ const nextRound = rounds[currentRoundIndex + 1];
+ const nextMatchupCard = nextRound.children[nextMatchupIndex];
+
+ if (!nextMatchupCard) {
+ // No more matchups in this round, move to the next round
+ currentRoundIndex++;
+ nextMatchupIndex = 0;
+ advanceWinner(winnerCard);
+ } else {
+ nextMatchupCard.innerHTML = winnerCard.innerHTML;
+ nextMatchupCard.setAttribute('data-style', winnerStyle);
+
+ const buttonGroup = document.createElement('div');
+ buttonGroup.className = 'button-group';
+
+ const buttons = Array.from(document.querySelectorAll(`#round-${currentRoundIndex + 1} .card`)).map(card => {
+ if (card === winnerCard) return null;
+ const button = document.createElement('button');
+ button.textContent = card.getAttribute('data-style').toUpperCase();
+ button.onclick = () => advanceWinner(card);
+ return button;
+ }).filter(Boolean);
+
+ buttons.forEach(button => buttonGroup.appendChild(button));
+
+ nextMatchupCard.appendChild(buttonGroup);
+ }
+ }
+
+ winnerCard.style.display = 'none';
+ }
+
+ function setupMatchups() {
+ const currentRound = rounds[currentRoundIndex];
+ Array.from(currentRound.children).forEach(card => {
+ if (card.nextElementSibling) {
+ const buttonGroup = document.createElement('div');
+ buttonGroup.className = 'button-group';
+
+ const buttons = [card, card.nextElementSibling].map(c => {
+ const button = document.createElement('button');
+ button.textContent = c.getAttribute('data-style').toUpperCase();
+ button.onclick = () => advanceWinner(c);
+ return button;
+ });
+
+ buttons.forEach(button => buttonGroup.appendChild(button));
+
+ card.appendChild(buttonGroup);
+ }
+ });
+ }
+
+ function restart() {
+ rounds.forEach(round => round.style.display = 'none');
+ document.getElementById('round-1').style.display = '';
+ currentRoundIndex = 0;
+ nextMatchupIndex = 0;
+ document.getElementById('resultOverlay').style.display = 'none';
+ setupMatchups();
+ }
+
+ setupMatchups();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.png b/data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..58d0384
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/e2ddb50bc672/kimi.html b/data/artifacts/e2ddb50bc672/kimi.html
new file mode 100644
index 0000000..d50b4f9
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/kimi.html
@@ -0,0 +1,930 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Style Showdown | Designer Wallcoverings</title>
+<style>
+:root {
+ /* Luxe Ivory Palette */
+ --bg: #f5f2ea;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: #e0dcd3;
+ --shadow: rgba(28,26,23,0.06);
+ --shadow-elevated: rgba(28,26,23,0.12);
+
+ /* Typography */
+ --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
+ --font-body: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
+
+ /* Motion */
+ --ease-swift: cubic-bezier(.22,.9,.24,1);
+ --ease-power: cubic-bezier(.77,0,.18,1);
+ --ease-out: cubic-bezier(.22,1,.36,1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+}
+
+@keyframes scaleIn {
+ from { opacity: 0; transform: scale(0.92); }
+ to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes clipReveal {
+ from { clip-path: inset(0 100% 0 0); }
+ to { clip-path: inset(0); }
+}
+
+@keyframes pulse {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.02); }
+}
+
+body {
+ font-family: var(--font-body);
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.6;
+ min-height: 100vh;
+ padding-top: 100px;
+}
+
+/* Fixed Header */
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 80px;
+ background: var(--bg);
+ border-bottom: 1px solid var(--line);
+ display: flex;
+ align-items: center;
+ padding: 0 48px;
+ z-index: 1000;
+ backdrop-filter: blur(10px);
+}
+
+.wordmark {
+ font-family: var(--font-display);
+ font-size: 42px;
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ line-height: 1.1;
+}
+
+/* Main Container */
+main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 48px;
+}
+
+/* Tournament Header */
+.tourney-title {
+ font-family: var(--font-display);
+ font-size: 67px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ margin-bottom: 8px;
+ animation: fadeUp 0.8s var(--ease-out) both;
+}
+
+.tourney-subtitle {
+ font-family: var(--font-body);
+ font-size: 13px;
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ color: var(--muted);
+ margin-bottom: 48px;
+ animation: fadeUp 0.8s var(--ease-out) 0.1s both;
+}
+
+/* Bracket Layout */
+.bracket-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 48px;
+ margin-top: 48px;
+}
+
+.round {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.round-title {
+ font-family: var(--font-body);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ margin-bottom: 16px;
+ border-bottom: 1px solid var(--line);
+ padding-bottom: 12px;
+}
+
+/* Matchup Cards */
+.matchup {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ padding: 24px;
+ position: relative;
+ box-shadow: 0 4px 24px var(--shadow);
+ animation: fadeUp 0.7s var(--ease-out) both;
+ transition: all 0.4s var(--ease-swift);
+}
+
+.matchup:hover {
+ box-shadow: 0 8px 32px var(--shadow-elevated);
+ transform: translateY(-2px);
+}
+
+.matchup.completed {
+ opacity: 0.6;
+}
+
+.matchup.current {
+ border-color: var(--accent);
+ box-shadow: 0 4px 24px var(--shadow), inset 0 0 0 1px var(--accent);
+}
+
+.contestant {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ margin: 8px 0;
+ cursor: pointer;
+ transition: all 0.3s var(--ease-swift);
+ border: 1px solid transparent;
+ position: relative;
+ overflow: hidden;
+}
+
+.contestant::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--bg);
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+
+.contestant:hover::before {
+ opacity: 0.5;
+}
+
+.contestant:hover {
+ border-color: var(--accent);
+ transform: translateX(4px);
+}
+
+.contestant.winner {
+ border-color: var(--accent);
+ background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
+}
+
+.contestant.winner::after {
+ content: 'SELECTED';
+ position: absolute;
+ right: 16px;
+ font-size: 10px;
+ letter-spacing: 0.14em;
+ color: var(--accent);
+ font-weight: 600;
+}
+
+.swatch {
+ width: 64px;
+ height: 64px;
+ border: 1px solid var(--line);
+ flex-shrink: 0;
+ position: relative;
+ overflow: hidden;
+ background: var(--surface);
+}
+
+.swatch svg {
+ width: 100%;
+ height: 100%;
+}
+
+.contestant-info h3 {
+ font-family: var(--font-display);
+ font-size: 21px;
+ font-weight: 400;
+ letter-spacing: 0.02em;
+ margin-bottom: 4px;
+ position: relative;
+ z-index: 1;
+}
+
+.contestant-info p {
+ font-size: 12px;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ position: relative;
+ z-index: 1;
+}
+
+.vs-divider {
+ text-align: center;
+ font-size: 11px;
+ color: var(--muted);
+ letter-spacing: 0.2em;
+ margin: 8px 0;
+ position: relative;
+}
+
+.vs-divider::before,
+.vs-divider::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ width: 40%;
+ height: 1px;
+ background: var(--line);
+}
+
+.vs-divider::before { left: 0; }
+.vs-divider::after { right: 0; }
+
+/* Connector Lines */
+.connector {
+ position: absolute;
+ right: -48px;
+ top: 50%;
+ width: 48px;
+ height: 1px;
+ background: var(--line);
+ display: none;
+}
+
+.round:not(:last-child) .matchup {
+ position: relative;
+}
+
+.round:not(:last-child) .matchup::after {
+ content: '';
+ position: absolute;
+ right: -24px;
+ top: 50%;
+ width: 24px;
+ height: 1px;
+ background: var(--line);
+}
+
+/* Champion Section */
+.champion-section {
+ margin-top: 64px;
+ text-align: center;
+ padding: 64px;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ box-shadow: 0 8px 48px var(--shadow-elevated);
+ animation: scaleIn 0.8s var(--ease-out) both;
+ display: none;
+}
+
+.champion-section.revealed {
+ display: block;
+}
+
+.champion-crown {
+ width: 48px;
+ height: 48px;
+ margin: 0 auto 24px;
+ color: var(--accent);
+}
+
+.champion-title {
+ font-family: var(--font-display);
+ font-size: 50px;
+ font-weight: 400;
+ margin-bottom: 8px;
+ letter-spacing: -0.01em;
+}
+
+.champion-name {
+ font-family: var(--font-display);
+ font-size: 67px;
+ font-weight: 400;
+ color: var(--accent);
+ margin-bottom: 32px;
+ letter-spacing: -0.02em;
+}
+
+.share-btn {
+ display: inline-block;
+ padding: 16px 48px;
+ background: var(--text);
+ color: var(--surface);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ border: none;
+ cursor: pointer;
+ transition: all 0.3s var(--ease-swift);
+ margin-top: 24px;
+}
+
+.share-btn:hover {
+ background: var(--accent);
+ color: var(--text);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 16px rgba(201,169,97,0.3);
+}
+
+/* Progress Indicator */
+.progress-bar {
+ position: fixed;
+ top: 80px;
+ left: 0;
+ height: 2px;
+ background: var(--accent);
+ transition: width 0.6s var(--ease-power);
+ z-index: 999;
+}
+
+/* Result Card Overlay */
+.result-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(28,26,23,0.9);
+ backdrop-filter: blur(10px);
+ z-index: 2000;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ padding: 48px;
+}
+
+.result-overlay.active {
+ display: flex;
+ animation: fadeUp 0.5s var(--ease-out) both;
+}
+
+.result-card {
+ background: var(--surface);
+ padding: 64px;
+ max-width: 600px;
+ width: 100%;
+ text-align: center;
+ border: 1px solid var(--line);
+ box-shadow: 0 24px 96px rgba(0,0,0,0.2);
+ position: relative;
+}
+
+.close-overlay {
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ width: 40px;
+ height: 40px;
+ border: 1px solid var(--line);
+ background: transparent;
+ cursor: pointer;
+ font-size: 20px;
+ color: var(--text);
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.close-overlay:hover {
+ background: var(--text);
+ color: var(--surface);
+}
+
+.result-card h2 {
+ font-family: var(--font-display);
+ font-size: 38px;
+ margin-bottom: 8px;
+}
+
+.result-card .champion-display {
+ font-size: 50px;
+ color: var(--accent);
+ margin: 24px 0;
+ font-family: var(--font-display);
+}
+
+.result-pattern {
+ width: 200px;
+ height: 200px;
+ margin: 32px auto;
+ border: 1px solid var(--line);
+ box-shadow: 0 4px 24px var(--shadow);
+}
+
+/* Utility */
+.hidden {
+ display: none !important;
+}
+
+.fade-in {
+ animation: fadeUp 0.7s var(--ease-out) both;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+ .bracket-container {
+ grid-template-columns: 1fr;
+ }
+
+ .round:not(:last-child) .matchup::after {
+ display: none;
+ }
+
+ .wordmark {
+ font-size: 28px;
+ }
+
+ header {
+ padding: 0 24px;
+ }
+
+ .tourney-title {
+ font-size: 38px;
+ }
+}
+</style>
+</head>
+<body>
+
+<header>
+ <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<div class="progress-bar" id="progressBar" style="width: 0%"></div>
+
+<main>
+ <h1 class="tourney-title">Style Showdown</h1>
+ <p class="tourney-subtitle">Select your favorite in each matchup to crown a champion</p>
+
+ <div class="bracket-container" id="bracket">
+ <!-- Quarter Finals -->
+ <div class="round" id="quarterFinals">
+ <div class="round-title">Quarter Finals</div>
+
+ <div class="matchup" data-match="1" data-round="1">
+ <div class="contestant" data-style="damask" onclick="selectWinner(1, 'damask')">
+ <div class="swatch" id="swatch-damask"></div>
+ <div class="contestant-info">
+ <h3>Damask</h3>
+ <p>Symmetrical Floral</p>
+ </div>
+ </div>
+ <div class="vs-divider">VS</div>
+ <div class="contestant" data-style="toile" onclick="selectWinner(1, 'toile')">
+ <div class="swatch" id="swatch-toile"></div>
+ <div class="contestant-info">
+ <h3>Toile</h3>
+ <p>Pastoral Scenes</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="matchup" data-match="2" data-round="1">
+ <div class="contestant" data-style="ikat" onclick="selectWinner(2, 'ikat')">
+ <div class="swatch" id="swatch-ikat"></div>
+ <div class="contestant-info">
+ <h3>Ikat</h3>
+ <p>Resist-Dyed Texture</p>
+ </div>
+ </div>
+ <div class="vs-divider">VS</div>
+ <div class="contestant" data-style="chinoiserie" onclick="selectWinner(2, 'chinoiserie')">
+ <div class="swatch" id="swatch-chinoiserie"></div>
+ <div class="contestant-info">
+ <h3>Chinoiserie</h3>
+ <p>Asian Inspired</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="matchup" data-match="3" data-round="1">
+ <div class="contestant" data-style="artdeco" onclick="selectWinner(3, 'artdeco')">
+ <div class="swatch" id="swatch-artdeco"></div>
+ <div class="contestant-info">
+ <h3>Art Deco</h3>
+ <p>Geometric Glamour</p>
+ </div>
+ </div>
+ <div class="vs-divider">VS</div>
+ <div class="contestant" data-style="boho" onclick="selectWinner(3, 'boho')">
+ <div class="swatch" id="swatch-boho"></div>
+ <div class="contestant-info">
+ <h3>Boho</h3>
+ <p>Eclectic & Organic</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="matchup" data-match="4" data-round="1">
+ <div class="contestant" data-style="coastal" onclick="selectWinner(4, 'coastal')">
+ <div class="swatch" id="swatch-coastal"></div>
+ <div class="contestant-info">
+ <h3>Coastal</h3>
+ <p>Nautical Stripes</p>
+ </div>
+ </div>
+ <div class="vs-divider">VS</div>
+ <div class="contestant" data-style="grandmillennial" onclick="selectWinner(4, 'grandmillennial')">
+ <div class="swatch" id="swatch-grandmillennial"></div>
+ <div class="contestant-info">
+ <h3>Grandmillennial</h3>
+ <p>Chintz & Tradition</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Semi Finals -->
+ <div class="round" id="semiFinals">
+ <div class="round-title">Semi Finals</div>
+ <div id="semiContainer"></div>
+ </div>
+
+ <!-- Finals -->
+ <div class="round" id="finals">
+ <div class="round-title">Final</div>
+ <div id="finalContainer"></div>
+ </div>
+ </div>
+
+ <!-- Champion Section -->
+ <div class="champion-section" id="championSection">
+ <svg class="champion-crown" viewBox="0 0 24 24" fill="currentColor">
+ <path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"/>
+ </svg>
+ <div class="champion-title">Champion</div>
+ <div class="champion-name" id="championName"></div>
+ <div id="championSwatch" style="width: 120px; height: 120px; margin: 0 auto 32px; border: 2px solid var(--accent); box-shadow: 0 8px 32px var(--shadow-elevated);"></div>
+ <button class="share-btn" onclick="showResultCard()">Share Result</button>
+ </div>
+</main>
+
+<!-- Result Overlay -->
+<div class="result-overlay" id="resultOverlay" onclick="if(event.target === this) closeResultCard()">
+ <div class="result-card">
+ <button class="close-overlay" onclick="closeResultCard()">×</button>
+ <h2>My Style Champion</h2>
+ <div class="champion-display" id="resultChampionName"></div>
+ <div class="result-pattern" id="resultPattern"></div>
+ <p style="color: var(--muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 24px;">
+ Designer Wallcoverings • Style Showdown
+ </p>
+ <button class="share-btn" onclick="copyResult()">Copy Link to Share</button>
+ <p id="copyFeedback" style="margin-top: 16px; font-size: 12px; color: var(--accent); opacity: 0; transition: opacity 0.3s;">Link copied to clipboard!</p>
+ </div>
+</div>
+
+<!-- SVG Patterns Definitions -->
+<svg width="0" height="0" style="position: absolute;">
+ <defs>
+ <!-- Damask: Symmetrical Floral -->
+ <pattern id="pattern-damask" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
+ <rect width="60" height="60" fill="#f5f2ea"/>
+ <path d="M30 10 Q40 20 30 30 Q20 20 30 10 M30 30 Q40 40 30 50 Q20 40 30 30 M10 30 Q20 20 30 30 Q20 40 10 30 M50 30 Q40 20 30 30 Q40 40 50 30"
+ fill="none" stroke="#1c1a17" stroke-width="1.5" opacity="0.8"/>
+ <circle cx="30" cy="30" r="4" fill="#c9a961"/>
+ <circle cx="30" cy="10" r="2" fill="#1c1a17" opacity="0.6"/>
+ <circle cx="30" cy="50" r="2" fill="#1c1a17" opacity="0.6"/>
+ <circle cx="10" cy="30" r="2" fill="#1c1a17" opacity="0.6"/>
+ <circle cx="50" cy="30" r="2" fill="#1c1a17" opacity="0.6"/>
+ </pattern>
+
+ <!-- Toile: Pastoral Silhouette -->
+ <pattern id="pattern-toile" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
+ <rect width="80" height="80" fill="#ffffff"/>
+ <path d="M20 60 Q25 40 30 60 M35 60 Q40 30 45 60 M50 60 Q55 40 60 60 M25 55 Q30 45 35 55"
+ fill="none" stroke="#4a5568" stroke-width="1.2" opacity="0.7"/>
+ <path d="M10 20 Q15 10 20 20 Q25 30 20 40 Q15 50 10 40 Q5 30 10 20 M60 15 Q70 5 75 15 Q80 25 75 35 Q70 45 60 35 Q55 25 60 15"
+ fill="#4a5568" opacity="0.6"/>
+ <circle cx="15" cy="25" r="1.5" fill="#4a5568" opacity="0.5"/>
+ <circle cx="70" cy="22" r="1.5" fill="#4a5568" opacity="0.5"/>
+ </pattern>
+
+ <!-- Ikat: Diamond Feathered -->
+ <pattern id="pattern-ikat" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+ <rect width="40" height="40" fill="#e8e4dc"/>
+ <path d="M20 0 L30 10 L20 20 L10 10 Z" fill="#b8934f" opacity="0.6"/>
+ <path d="M20 20 L30 30 L20 40 L10 30 Z" fill="#8b6914" opacity="0.5"/>
+ <path d="M0 20 L10 10 L20 20 L10 30 Z" fill="#c9a961" opacity="0.4"/>
+ <path d="M20 20 L30 10 L40 20 L30 30 Z" fill="#c9a961" opacity="0.4"/>
+ </pattern>
+
+ <!-- Chinoiserie: Bamboo & Birds -->
+ <pattern id="pattern-chinoiserie" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
+ <rect width="100" height="100" fill="#f8f6f2"/>
+ <path d="M10 100 Q15 70 10 40 Q5 20 15 0" fill="none" stroke="#2d5016" stroke-width="2" opacity="0.7"/>
+ <path d="M12 30 L20 25 L18 35 Z" fill="#2d5016" opacity="0.6"/>
+ <path d="M8 60 L16 55 L14 65 Z" fill="#2d5016" opacity="0.6"/>
+ <path d="M70 20 Q80 15 85 25 Q80 35 70 30 Q65 25 70 20" fill="#8b4513" opacity="0.5"/>
+ <path d="M75 25 L90 20 L85 30 Z" fill="#8b4513" opacity="0.4"/>
+ <circle cx="50" cy="70" r="3" fill="#c9a961" opacity="0.8"/>
+ <path d="M45 75 Q50 85 55 75" fill="none" stroke="#c9a961" stroke-width="1"/>
+ </pattern>
+
+ <!-- Art Deco: Geometric Sunburst -->
+ <pattern id="pattern-artdeco" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
+ <rect width="50" height="50" fill="#1a1a1a"/>
+ <path d="M25 0 L25 50 M0 25 L50 25 M10 10 L40 40 M40 10 L10 40" stroke="#c9a961" stroke-width="1.5" opacity="0.9"/>
+ <circle cx="25" cy="25" r="10" fill="none" stroke="#c9a961" stroke-width="2"/>
+ <circle cx="25" cy="25" r="4" fill="#c9a961"/>
+ <rect x="22" y="0" width="6" height="8" fill="#c9a961" opacity="0.6"/>
+ <rect x="22" y="42" width="6" height="8" fill="#c9a961" opacity="0.6"/>
+ <rect x="0" y="22" width="8" height="6" fill="#c9a961" opacity="0.6"/>
+ <rect x="42" y="22" width="8" height="6" fill="#c9a961" opacity="0.6"/>
+ </pattern>
+
+ <!-- Boho: Macrame Texture -->
+ <pattern id="pattern-boho" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
+ <rect width="30" height="30" fill="#faf8f5"/>
+ <path d="M0 15 Q7.5 10 15 15 Q22.5 20 30 15" fill="none" stroke="#d4c4b0" stroke-width="1.5"/>
+ <path d="M0 15 Q7.5 20 15 15 Q22.5 10 30 15" fill="none" stroke="#d4c4b0" stroke-width="1.5"/>
+ <circle cx="15" cy="15" r="2" fill="#c9a961" opacity="0.6"/>
+ <circle cx="0" cy="15" r="1.5" fill="#8a8578" opacity="0.4"/>
+ <circle cx="30" cy="15" r="1.5" fill="#8a8578" opacity="0.4"/>
+ <path d="M15 15 L15 30 M15 15 L10 30 M15 15 L20 30" stroke="#d4c4b0" stroke-width="0.5" opacity="0.6"/>
+ </pattern>
+
+ <!-- Coastal: Nautical Stripes -->
+ <pattern id="pattern-coastal" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
+ <rect width="60" height="60" fill="#ffffff"/>
+ <rect y="0" width="60" height="12" fill="#1e3a5f" opacity="0.9"/>
+ <rect y="24" width="60" height="12" fill="#1e3a5f" opacity="0.9"/>
+ <rect y="48" width="60" height="12" fill="#1e3a5f" opacity="0.9"/>
+ <line x1="0" y1="12" x2="60" y2="12" stroke="#c9a961" stroke-width="0.5"/>
+ <line x1="0" y1="36" x2="60" y2="36" stroke="#c9a961" stroke-width="0.5"/>
+ <line x1="0" y1="60" x2="60" y2="60" stroke="#c9a961" stroke-width="0.5"/>
+ </pattern>
+
+ <!-- Grandmillennial: Chintz Floral -->
+ <pattern id="pattern-grandmillennial" x="0" y="0" width="70" height="70" patternUnits="userSpaceOnUse">
+ <rect width="70" height="70" fill="#fefcfa"/>
+ <path d="M35 35 Q45 25 50 35 Q55 45 45 50 Q35 55 30 45 Q25 35 35 35" fill="#e8d4d4" opacity="0.8"/>
+ <path d="M35 35 Q25 25 20 35 Q15 45 25 50 Q35 55 40 45 Q45 35 35 35" fill="#d4e8d4" opacity="0.6"/>
+ <circle cx="35" cy="35" r="3" fill="#c9a961" opacity="0.8"/>
+ <path d="M35 32 L35 20 M35 38 L35 50 M32 35 L20 35 M38 35 L50 35" stroke="#8a8578" stroke-width="1" opacity="0.4"/>
+ <circle cx="20" cy="20" r="2" fill="#d4e8d4" opacity="0.7"/>
+ <circle cx="50" cy="50" r="2" fill="#e8d4d4" opacity="0.7"/>
+ </pattern>
+ </defs>
+</svg>
+
+<script>
+// Tournament State
+const state = {
+ round1: {}, // match -> winner
+ round2: {},
+ round3: {},
+ champion: null
+};
+
+const styleData = {
+ damask: { name: 'Damask', pattern: 'pattern-damask' },
+ toile: { name: 'Toile', pattern: 'pattern-toile' },
+ ikat: { name: 'Ikat', pattern: 'pattern-ikat' },
+ chinoiserie: { name: 'Chinoiserie', pattern: 'pattern-chinoiserie' },
+ artdeco: { name: 'Art Deco', pattern: 'pattern-artdeco' },
+ boho: { name: 'Boho', pattern: 'pattern-boho' },
+ coastal: { name: 'Coastal', pattern: 'pattern-coastal' },
+ grandmillennial: { name: 'Grandmillennial', pattern: 'pattern-grandmillennial' }
+};
+
+// Initialize swatches
+function initializeSwatches() {
+ Object.keys(styleData).forEach(style => {
+ const swatch = document.getElementById(`swatch-${style}`);
+ if (swatch) {
+ swatch.innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[style].pattern})"/></svg>`;
+ }
+ });
+}
+
+function selectWinner(match, style) {
+ const matchup = document.querySelector(`[data-match="${match}"][data-round="1"]`);
+ const contestants = matchup.querySelectorAll('.contestant');
+
+ // Don't allow re-selection if already has winner
+ if (state.round1[match]) return;
+
+ // Mark winner
+ contestants.forEach(c => {
+ if (c.dataset.style === style) {
+ c.classList.add('winner');
+ state.round1[match] = style;
+ } else {
+ c.style.opacity = '0.3';
+ }
+ });
+
+ matchup.classList.add('completed');
+
+ updateProgress();
+
+ // Check if round 1 complete
+ if (Object.keys(state.round1).length === 4) {
+ setTimeout(startRound2, 600);
+ }
+}
+
+function startRound2() {
+ const container = document.getElementById('semiContainer');
+ const winners = [state.round1[1], state.round1[2], state.round1[3], state.round1[4]];
+
+ // Create 2 matchups
+ const matchups = [
+ { num: 1, a: winners[0], b: winners[1] },
+ { num: 2, a: winners[2], b: winners[3] }
+ ];
+
+ container.innerHTML = matchups.map(m => `
+ <div class="matchup fade-in" data-match="${m.num}" data-round="2" style="animation-delay: ${m.num * 100}ms">
+ <div class="contestant" data-style="${m.a}" onclick="selectWinnerSemi(${m.num}, '${m.a}')">
+ <div class="swatch" style="background: url(#${styleData[m.a].pattern})"></div>
+ <div class="contestant-info">
+ <h3>${styleData[m.a].name}</h3>
+ <p>Quarter Final Winner</p>
+ </div>
+ </div>
+ <div class="vs-divider">VS</div>
+ <div class="contestant" data-style="${m.b}" onclick="selectWinnerSemi(${m.num}, '${m.b}')">
+ <div class="swatch" style="background: url(#${styleData[m.b].pattern})"></div>
+ <div class="contestant-info">
+ <h3>${styleData[m.b].name}</h3>
+ <p>Quarter Final Winner</p>
+ </div>
+ </div>
+ </div>
+ `).join('');
+
+ // Fill swatches
+ setTimeout(() => {
+ matchups.forEach(m => {
+ const matchupEl = document.querySelector(`[data-match="${m.num}"][data-round="2"]`);
+ const swatches = matchupEl.querySelectorAll('.swatch');
+ swatches[0].innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[m.a].pattern})"/></svg>`;
+ swatches[1].innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[m.b].pattern})"/></svg>`;
+ });
+ }, 100);
+}
+
+function selectWinnerSemi(match, style) {
+ const matchup = document.querySelector(`[data-match="${match}"][data-round="2"]`);
+ const contestants = matchup.querySelectorAll('.contestant');
+
+ if (state.round2[match]) return;
+
+ contestants.forEach(c => {
+ if (c.dataset.style === style) {
+ c.classList.add('winner');
+ state.round2[match] = style;
+ } else {
+ c.style.opacity = '0.3';
+ }
+ });
+
+ matchup.classList.add('completed');
+ updateProgress();
+
+ if (Object.keys(state.round2).length === 2) {
+ setTimeout(startRound3, 600);
+ }
+}
+
+function startRound3() {
+ const container = document.getElementById('finalContainer');
+ const winners = [state.round2[1], state.round2[2]];
+
+ container.innerHTML = `
+ <div class="matchup fade-in" data-match="1" data-round="3">
+ <div class="contestant" data-style="${winners[0]}" onclick="selectWinnerFinal('${winners[0]}')">
+ <div class="swatch" id="final-swatch-1"></div>
+ <div class="contestant-info">
+ <h3>${styleData[winners[0]].name}</h3>
+ <p>Semi Final Winner</p>
+ </div>
+ </div>
+ <div class="vs-divider">VS</div>
+ <div class="contestant" data-style="${winners[1]}" onclick="selectWinnerFinal('${winners[1]}')">
+ <div class="swatch" id="final-swatch-2"></div>
+ <div class="contestant-info">
+ <h3>${styleData[winners[1]].name}</h3>
+ <p>Semi Final Winner</p>
+ </div>
+ </div>
+ </div>
+ `;
+
+ setTimeout(() => {
+ document.getElementById('final-swatch-1').innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[winners[0]].pattern})"/></svg>`;
+ document.getElementById('final-swatch-2').innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[winners[1]].pattern})"/></svg>`;
+ }, 100);
+}
+
+function selectWinnerFinal(style) {
+ const matchup = document.querySelector(`[data-match="1"][data-round="3"]`);
+ const contestants = matchup.querySelectorAll('.contestant');
+
+ if (state.round3[1]) return;
+
+ contestants.forEach(c => {
+ if (c.dataset.style === style) {
+ c.classList.add('winner');
+ state.round3[1] = style;
+ state.champion = style;
+ } else {
+ c.style.opacity = '0.3';
+ }
+ });
+
+ matchup.classList.add('completed');
+ updateProgress();
+
+ setTimeout(showChampion, 800);
+}
+
+function showChampion() {
+ const section = document.getElementById('championSection');
+ const nameEl = document.getElementById('championName');
+ const swatchEl = document.getElementById('championSwatch');
+
+ nameEl.textContent = styleData[state.champion].name;
+ swatchEl.innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[state.champion].pattern})"/></svg>`;
+
+ section.classList.add('revealed');
+ section.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ updateProgress();
+}
+
+function updateProgress() {
+ const totalRounds = 7; // 4 + 2 + 1
+ const completed = Object.keys(state.round1).length + Object.keys(state.round2).length + Object.keys(state.round3).length;
+ const pct = (completed / totalRounds) * 100;
+ document.getElementById('progressBar').style.width = pct + '%';
+}
+
+function showResultCard() {
+ document.getElementById('resultOverlay').classList.add('active');
+ document.getElementById('resultChampionName').textContent = styleData[state.champion].name;
+ document.getElementById('resultPattern').innerHTML = `<svg width="100%" height="100%"><rect width="100%" height="100%" fill="url(#${styleData[state.champion].pattern})"/></svg>`;
+}
+
+function closeResultCard() {
+ document.getElementById('resultOverlay').classList.remove('active');
+}
+
+function copyResult() {
+ const text = `My Style Showdown Champion: ${styleData[state.champion].name} | Designer Wallcoverings`;
+
+ if (navigator.clipboard) {
+ navigator.clipboard.writeText(text).then(() => {
+ showCopyFeedback();
+ });
+ } else {
+ // Fallback
+ const textarea = document.createElement('textarea');
+ textarea.value = text;
+ document.body.appendChild(textarea);
+ textarea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textarea);
+ showCopyFeedback();
+ }
+}
+
+function showCopyFeedback() {
+ const feedback = document.getElementById('copyFeedback');
+ feedback.style.opacity = '1';
+ setTimeout(() => {
+ feedback.style.opacity = '0';
+ }, 2000);
+}
+
+// Initialize on load
+initializeSwatches();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/kimi.png b/data/artifacts/e2ddb50bc672/kimi.png
new file mode 100644
index 0000000..88d5516
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/kimi.png differ
diff --git a/data/artifacts/e2ddb50bc672/qwen25-7b.html b/data/artifacts/e2ddb50bc672/qwen25-7b.html
new file mode 100644
index 0000000..a70243e
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/qwen25-7b.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Style Showdown</title>
+ <style>
+ :root {
+ --bg: #17171c;
+ --surface: #f5f2ea;
+ --text: #3a2c22;
+ --muted: #8d7bb0;
+ --accent: #b0472e;
+ --line: 1px solid var(--muted);
+ --shadow: 0 8px 24px rgba(0, 0, 0, .12), hover 0 16px 48px rgba(0, 0, 0, .18);
+ --ease: cubic-bezier(.22,1,.36,1) both;
+ }
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: 'Didot', 'Bodoni MT', Georgia, serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--surface);
+ padding: 24px 32px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .header-text {
+ font-size: 50px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ }
+ main {
+ max-width: 960px;
+ padding: 48px;
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ display: flex;
+ flex-direction: column;
+ }
+ .style-swatch {
+ width: 250px;
+ height: 300px;
+ margin-bottom: 24px;
+ position: relative;
+ border: var(--line);
+ transition: transform 150ms ease-in-out, box-shadow 250ms ease-in-out;
+ }
+ .style-swatch:hover {
+ box-shadow: var(--shadow), inset 0 0 30px rgba(var(--accent-rgb),.3);
+ }
+ .result-card {
+ display: none;
+ margin-top: 48px;
+ padding: 24px;
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ }
+ #winning-style {
+ font-size: 38px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ color: var(--text);
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ section {
+ animation: ambient-bg 18s infinite linear;
+ }
+ @keyframes ambient-bg {
+ 0% { background-color: var(--bg); }
+ 50% { background-color: rgba(255, 243, 255, .5); }
+ 100% { background-color: var(--bg); }
+ }
+ </style>
+</head>
+<body>
+<header class="header">
+ <span class="header-text">DESIGNER WALLCOVERINGS</span>
+</header>
+<main>
+ <section id="styles" style="display: flex; gap: 24px;">
+ <div class="style-swatch" data-style="Damask"></div>
+ <div class="style-swatch" data-style="Toile"></div>
+ <div class="style-swatch" data-style="Ikat"></div>
+ <div class="style-swatch" data-style="Chinoiserie"></div>
+ </section>
+ <section id="result" class="result-card">
+ <h1 id="winning-style">CHAMPION</h1>
+ <button onclick="reset()">Play Again</button>
+ </section>
+</main>
+
+<script>
+function reset() {
+ const styles = document.querySelectorAll('.style-swatch');
+ styles.forEach(style => style.style.transform = 'translateY(0)');
+ document.getElementById('result').style.display = 'none';
+}
+
+document.querySelectorAll('.style-swatch').forEach(swatch => {
+ swatch.addEventListener('click', function() {
+ const winner = this.getAttribute('data-style');
+ const resultCard = document.getElementById('result');
+ resultCard.style.display = '';
+ setTimeout(() => {
+ resultCard.querySelector('#winning-style').innerText = `Champion: ${winner}`;
+ reset();
+ }, 1000);
+ });
+});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/qwen25-7b.png b/data/artifacts/e2ddb50bc672/qwen25-7b.png
new file mode 100644
index 0000000..500d34b
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/qwen25-7b.png differ
diff --git a/data/artifacts/e2ddb50bc672/qwen3-14b.html b/data/artifacts/e2ddb50bc672/qwen3-14b.html
new file mode 100644
index 0000000..93449f6
--- /dev/null
+++ b/data/artifacts/e2ddb50bc672/qwen3-14b.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Style Showdown</title>
+ <style>
+ :root {
+ --bg: #17171c;
+ --surface: #faf8f4;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: #1c1a17;
+ --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ header {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 40px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ padding: 16px 24px;
+ background-color: var(--line);
+ color: var(--text);
+ display: flex;
+ align-items: center;
+ }
+
+ main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 96px 24px;
+ }
+
+ .bracket {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .matchup {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 600px;
+ margin: 48px 0;
+ }
+
+ .swatch {
+ width: 200px;
+ height: 200px;
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: box-shadow 0.2s var(--ease);
+ }
+
+ .swatch:hover {
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+ }
+
+ .swatch svg {
+ width: 100%;
+ height: 100%;
+ }
+
+ .results {
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 48px;
+ text-align: center;
+ }
+
+ .champion {
+ font-size: 32px;
+ margin-bottom: 16px;
+ }
+
+ .result-card {
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: 32px;
+ box-shadow: var(--shadow);
+ max-width: 400px;
+ text-align: center;
+ }
+
+ .result-card h2 {
+ font-size: 28px;
+ margin-bottom: 8px;
+ }
+
+ .result-card p {
+ font-size: 16px;
+ color: var(--muted);
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+ }
+
+ .fade-in {
+ animation: fadeUp 0.7s var(--ease) both;
+ }
+
+ @keyframes drift {
+ 0% {
+ background-image: linear-gradient(135deg, var(--accent) 25%, transparent 25%, transparent 50%, var(--accent) 50%, var(--accent) 75%, transparent 75%, transparent 100%);
+ }
+ 100% {
+ background-image: linear-gradient(135deg, transparent 25%, var(--accent) 25%, var(--accent) 50%, transparent 50%, transparent 75%, var(--accent) 75%, var(--accent) 100%);
+ }
+ }
+
+ .bg-drift {
+ background-image: linear-gradient(135deg, var(--accent) 25%, transparent 25%, transparent 50%, var(--accent) 50%, var(--accent) 75%, transparent 75%, transparent 100%);
+ background-size: 800% 800%;
+ animation: drift 18s linear infinite;
+ }
+ </style>
+</head>
+<body class="bg-drift">
+ <header>
+ DESIGNER WALLCOVERINGS
+ </header>
+ <main>
+ <div class="bracket">
+ <div class="matchup">
+ <div class="swatch" data-style="damask" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="damask" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#damask)" />
+ </svg>
+ </div>
+ <div class="swatch" data-style="toile" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="toile" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--muted)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#toile)" />
+ </svg>
+ </div>
+ </div>
+ <div class="matchup">
+ <div class="swatch" data-style="ikat" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="ikat" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#ikat)" />
+ </svg>
+ </div>
+ <div class="swatch" data-style="chinoiserie" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="chinoiserie" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--muted)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#chinoiserie)" />
+ </svg>
+ </div>
+ </div>
+ <div class="matchup">
+ <div class="swatch" data-style="art-deco" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="art-deco" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#art-deco)" />
+ </svg>
+ </div>
+ <div class="swatch" data-style="boho" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="boho" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--muted)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#boho)" />
+ </svg>
+ </div>
+ </div>
+ <div class="matchup">
+ <div class="swatch" data-style="coastal" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="coastal" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--accent)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#coastal)" />
+ </svg>
+ </div>
+ <div class="swatch" data-style="grandmillennial" onclick="selectWinner(this)">
+ <svg viewBox="0 0 100 100">
+ <defs>
+ <pattern id="grandmillennial" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+ <path d="M 10 0 L 0 10 L 10 20 L 20 10 Z" fill="var(--muted)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#grandmillennial)" />
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div class="results fade-in">
+ <div class="champion">Grandmillennial Wins!</div>
+ <div class="result-card">
+ <h2>Congratulations, Grandmillennial!</h2>
+ <p>Grandmillennial design style triumphs with its blend of classic elegance and modern comfort, making it the ultimate winner of the Style Showdown.</p>
+ </div>
+ </div>
+ </main>
+ <script>
+ const styles = ['damask', 'toile', 'ikat', 'chinoiserie', 'art-deco', 'boho', 'coastal', 'grandmillennial'];
+ let winners = [];
+
+ function selectWinner(element) {
+ const style = element.getAttribute('data-style');
+ if (winners.length < 8) {
+ winners.push(style);
+ element.classList.add('selected');
+ element.style.pointerEvents = 'none';
+ if (winners.length === 8) {
+ setTimeout(() => {
+ document.querySelector('.results').style.display = 'flex';
+ }, 500);
+ }
+ }
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/e2ddb50bc672/qwen3-14b.png b/data/artifacts/e2ddb50bc672/qwen3-14b.png
new file mode 100644
index 0000000..35c2158
Binary files /dev/null and b/data/artifacts/e2ddb50bc672/qwen3-14b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index 2959bfb..b38967c 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -3372,10 +3372,10 @@
],
"bytes": 2388,
"thumb": true,
- "aiScore": 6.5,
- "aiReason": "The cover has a clear theme but lacks the full-bleed photographic hero image and subtle entrance animation.",
+ "aiScore": 5.5,
+ "aiReason": "The cover is visually rich but lacks the full-bleed photographic hero image and subtle entrance animation as specified in the challenge.",
"aiScores": {
- "qwen2.5vl:7b": 7,
+ "qwen2.5vl:7b": 5,
"minicpm-v:latest": 6
},
"aiSpread": 1
@@ -3397,7 +3397,7 @@
"bytes": 5167,
"thumb": true,
"aiScore": 9.3,
- "aiReason": "The cover is visually rich and well-designed, featuring an elegant masthead, clear typography, and a high-quality image that fulfills the challenge criteria.",
+ "aiReason": "The cover is visually rich and well-designed, featuring an elegant masthead, clear typography, and a high-quality image of Santorini at sunset.",
"aiScores": {
"qwen2.5vl:7b": 9,
"minicpm-v:latest": 9.5
@@ -3405,8 +3405,9 @@
"aiSpread": 0.5
}
],
- "judging": true,
- "judged_at": null
+ "judging": false,
+ "judged_at": "2026-07-25T13:59:08.404Z",
+ "aiPick": "kimi"
},
{
"id": "59cdaeca7f55",
@@ -26898,6 +26899,345 @@
"designTools": true,
"created_at": "2026-07-25T13:48:12.047Z",
"winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "done",
+ "error": null,
+ "seconds": 66,
+ "cost": 0,
+ "started_at": "2026-07-25T13:48:16.319Z",
+ "finished_at": "2026-07-25T13:49:22.089Z",
+ "queued_at": "2026-07-25T13:48:12.060Z",
+ "bytes": 8525,
+ "thumb": true,
+ "aiScore": 5.3,
+ "aiReason": "The design is visually appealing and follows the brief closely, but lacks some of the required animations and interactivity.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 3.5
+ },
+ "aiSpread": 3.5
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "done",
+ "error": null,
+ "seconds": 75,
+ "cost": 0,
+ "started_at": "2026-07-25T13:49:22.101Z",
+ "finished_at": "2026-07-25T13:50:36.870Z",
+ "queued_at": "2026-07-25T13:48:12.070Z",
+ "bytes": 8374,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The HTML fulfills the challenge requirements but lacks some visual elements and animations.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "hermes3-8b",
+ "status": "done",
+ "error": null,
+ "seconds": 28,
+ "cost": 0,
+ "started_at": "2026-07-25T13:50:36.876Z",
+ "finished_at": "2026-07-25T13:51:04.813Z",
+ "queued_at": "2026-07-25T13:48:12.078Z",
+ "bytes": 3808,
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The HTML file fulfills most of the requirements but lacks some visual flair and animation.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 31,
+ "cost": 0,
+ "started_at": "2026-07-25T13:48:12.105Z",
+ "finished_at": "2026-07-25T13:48:42.634Z",
+ "queued_at": "2026-07-25T13:48:12.082Z",
+ "bytes": 4122,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The design fulfills most requirements but lacks some visual distinctiveness in the swatches and could benefit from more refined easing effects.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "hf-qwen-coder-32b",
+ "status": "done",
+ "error": null,
+ "seconds": 168,
+ "cost": 0,
+ "started_at": "2026-07-25T13:51:04.823Z",
+ "finished_at": "2026-07-25T13:53:52.984Z",
+ "queued_at": "2026-07-25T13:48:12.085Z",
+ "bytes": 13156,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML fulfills the challenge requirements well and has an elegant visual quality.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
+ },
+ {
+ "model": "claude-code",
+ "status": "done",
+ "error": null,
+ "seconds": 126,
+ "cost": 0,
+ "started_at": "2026-07-25T13:48:12.110Z",
+ "finished_at": "2026-07-25T13:50:17.919Z",
+ "queued_at": "2026-07-25T13:48:12.091Z",
+ "bytes": 22742,
+ "thumb": true
+ },
+ {
+ "model": "kimi",
+ "status": "done",
+ "error": null,
+ "seconds": 181,
+ "cost": 0.0324,
+ "started_at": "2026-07-25T13:48:12.115Z",
+ "finished_at": "2026-07-25T13:51:13.291Z",
+ "queued_at": "2026-07-25T13:48:12.095Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 27349,
+ "thumb": true
+ },
+ {
+ "model": "gpt",
+ "status": "done",
+ "error": null,
+ "seconds": 73,
+ "cost": 0.1653,
+ "started_at": "2026-07-25T13:48:12.120Z",
+ "finished_at": "2026-07-25T13:49:25.346Z",
+ "queued_at": "2026-07-25T13:48:12.098Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 40488,
+ "thumb": true
+ },
+ {
+ "model": "grok",
+ "status": "done",
+ "error": null,
+ "seconds": 143,
+ "cost": 0.1776,
+ "started_at": "2026-07-25T13:48:12.125Z",
+ "finished_at": "2026-07-25T13:50:35.429Z",
+ "queued_at": "2026-07-25T13:48:12.102Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 30876,
+ "thumb": true
+ }
+ ],
+ "judging": true
+ },
+ {
+ "id": "b0bfeedddee6",
+ "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. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. (e) Open with a CSS design-token block in :root (e.g. --bg, --ink, --accent, --line, --shadow, --ease) and reference the tokens throughout, so the palette is systematic not one-off. (f) The wordmark is a compact upper-left lockup that shows the FULL 'DESIGNER WALLCOVERINGS' text WITHOUT clipping — size the serif so it fits (~200-280px) or wrap to two lines; NEVER truncate/overflow-hidden the wordmark. Demote scoreboards/buttons to a small refined SANS (uppercase, tracked) so the header reads as a logo zone, not competing with the content. (g) Let color/imagery carry the meaning — do NOT slap letter labels on swatches/tiles; a bare luxury swatch beats a lettered one; when a build shows multiple 'styles/patterns', make them VISUALLY DISTINCT (different SVG/CSS motifs, not the same stripe at different densities). (h) NEVER use alert()/confirm()/prompt() — win/game-over/result states must be in-page overlays styled with the token palette. (i) NO external images or URLs (picsum.photos, unsplash, any CDN/http src) — the artifact runs under a strict no-network CSP so they render BROKEN; draw all patterns/imagery with CSS gradients or inline SVG only. (j) Actually INSTANTIATE the wordmark: put a real <header> element containing the wordmark text in the DOM (defining the CSS class is not enough), The wordmark/header text color MUST be the DARKEST ink token (near-black, e.g. #1c1a17 / var(--text)); NEVER a white/surface/background token — a common fatal bug is color:var(--surface) rendering the wordmark white-on-cream and invisible. Wordmark font-size >=40px. It must look like a luxury interior-design brand, not a generic AI demo. (No hamburger/nav needed — these are self-contained games/social widgets.)",
+ "category": "Real Work",
+ "designTools": true,
+ "created_at": "2026-07-25T13:48:12.155Z",
+ "winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "done",
+ "error": null,
+ "seconds": 66,
+ "cost": 0,
+ "started_at": "2026-07-25T13:53:52.999Z",
+ "finished_at": "2026-07-25T13:54:59.049Z",
+ "queued_at": "2026-07-25T13:48:12.159Z",
+ "bytes": 8468,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML fulfills the challenge requirements well and presents an elegant luxury UI with distinct styles and a polished design.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "done",
+ "error": null,
+ "seconds": 97,
+ "cost": 0,
+ "started_at": "2026-07-25T13:54:59.064Z",
+ "finished_at": "2026-07-25T13:56:35.653Z",
+ "queued_at": "2026-07-25T13:48:12.163Z",
+ "bytes": 14450,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML meets all the DW LUXURY UI requirements and presents a polished, on-brief result.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
+ },
+ {
+ "model": "hermes3-8b",
+ "status": "done",
+ "error": null,
+ "seconds": 25,
+ "cost": 0,
+ "started_at": "2026-07-25T13:56:35.664Z",
+ "finished_at": "2026-07-25T13:57:00.681Z",
+ "queued_at": "2026-07-25T13:48:12.167Z",
+ "bytes": 6033,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The HTML file is self-contained and fulfills the requirements for a luxury brand quiz. However, it lacks some of the detailed design elements such as CSS gradients or inline SVGs for patterns, and the",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 32,
+ "cost": 0,
+ "started_at": "2026-07-25T13:48:42.648Z",
+ "finished_at": "2026-07-25T13:49:14.608Z",
+ "queued_at": "2026-07-25T13:48:12.171Z",
+ "bytes": 4433,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The HTML file is largely in line with the challenge requirements but lacks some of the visual elegance and refined typography expected. The wordmark appears correctly, but there's a lack of distinct p",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "hf-qwen-coder-32b",
+ "status": "done",
+ "error": null,
+ "seconds": 101,
+ "cost": 0,
+ "started_at": "2026-07-25T13:57:00.690Z",
+ "finished_at": "2026-07-25T13:58:41.883Z",
+ "queued_at": "2026-07-25T13:48:12.176Z",
+ "bytes": 8745,
+ "thumb": true
+ },
+ {
+ "model": "claude-code",
+ "status": "done",
+ "error": null,
+ "seconds": 149,
+ "cost": 0,
+ "started_at": "2026-07-25T13:50:17.925Z",
+ "finished_at": "2026-07-25T13:52:46.538Z",
+ "queued_at": "2026-07-25T13:48:12.180Z",
+ "bytes": 19045,
+ "thumb": true
+ },
+ {
+ "model": "kimi",
+ "status": "done",
+ "error": null,
+ "seconds": 94,
+ "cost": 0.0179,
+ "started_at": "2026-07-25T13:51:13.296Z",
+ "finished_at": "2026-07-25T13:52:47.187Z",
+ "queued_at": "2026-07-25T13:48:12.184Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes",
+ "opendesign"
+ ],
+ "bytes": 16142,
+ "thumb": true
+ },
+ {
+ "model": "gpt",
+ "status": "done",
+ "error": null,
+ "seconds": 108,
+ "cost": 0.1822,
+ "started_at": "2026-07-25T13:49:25.359Z",
+ "finished_at": "2026-07-25T13:51:13.181Z",
+ "queued_at": "2026-07-25T13:48:12.187Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 41157,
+ "thumb": true
+ },
+ {
+ "model": "grok",
+ "status": "done",
+ "error": null,
+ "seconds": 121,
+ "cost": 0.1555,
+ "started_at": "2026-07-25T13:50:35.439Z",
+ "finished_at": "2026-07-25T13:52:36.665Z",
+ "queued_at": "2026-07-25T13:48:12.191Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 26756,
+ "thumb": true
+ }
+ ],
+ "judging": true,
+ "judged_at": null
+ },
+ {
+ "id": "d67ca64a7bfc",
+ "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. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. (e) Open with a CSS design-token block in :root (e.g. --bg, --ink, --accent, --line, --shadow, --ease) and reference the tokens throughout, so the palette is systematic not one-off. (f) The wordmark is a compact upper-left lockup that shows the FULL 'DESIGNER WALLCOVERINGS' text WITHOUT clipping — size the serif so it fits (~200-280px) or wrap to two lines; NEVER truncate/overflow-hidden the wordmark. Demote scoreboards/buttons to a small refined SANS (uppercase, tracked) so the header reads as a logo zone, not competing with the content. (g) Let color/imagery carry the meaning — do NOT slap letter labels on swatches/tiles; a bare luxury swatch beats a lettered one; when a build shows multiple 'styles/patterns', make them VISUALLY DISTINCT (different SVG/CSS motifs, not the same stripe at different densities). (h) NEVER use alert()/confirm()/prompt() — win/game-over/result states must be in-page overlays styled with the token palette. (i) NO external images or URLs (picsum.photos, unsplash, any CDN/http src) — the artifact runs under a strict no-network CSP so they render BROKEN; draw all patterns/imagery with CSS gradients or inline SVG only. (j) Actually INSTANTIATE the wordmark: put a real <header> element containing the wordmark text in the DOM (defining the CSS class is not enough), The wordmark/header text color MUST be the DARKEST ink token (near-black, e.g. #1c1a17 / var(--text)); NEVER a white/surface/background token — a common fatal bug is color:var(--surface) rendering the wordmark white-on-cream and invisible. Wordmark font-size >=40px. It must look like a luxury interior-design brand, not a generic AI demo. (No hamburger/nav needed — these are self-contained games/social widgets.)",
+ "category": "Real Work",
+ "designTools": true,
+ "created_at": "2026-07-25T13:59:48.440Z",
+ "winner": null,
"runs": [
{
"model": "qwen3-14b",
@@ -26907,7 +27247,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.060Z"
+ "queued_at": "2026-07-25T13:59:48.456Z"
},
{
"model": "gemma3-12b",
@@ -26917,7 +27257,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.070Z"
+ "queued_at": "2026-07-25T13:59:48.466Z"
},
{
"model": "hermes3-8b",
@@ -26927,7 +27267,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.078Z"
+ "queued_at": "2026-07-25T13:59:48.475Z"
},
{
"model": "qwen25-7b",
@@ -26935,9 +27275,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T13:48:12.105Z",
+ "started_at": "2026-07-25T13:59:48.508Z",
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.082Z"
+ "queued_at": "2026-07-25T13:59:48.480Z"
},
{
"model": "hf-qwen-coder-32b",
@@ -26947,7 +27287,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.085Z"
+ "queued_at": "2026-07-25T13:59:48.486Z"
},
{
"model": "claude-code",
@@ -26955,9 +27295,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T13:48:12.110Z",
+ "started_at": "2026-07-25T13:59:48.516Z",
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.091Z"
+ "queued_at": "2026-07-25T13:59:48.490Z"
},
{
"model": "kimi",
@@ -26965,9 +27305,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T13:48:12.115Z",
+ "started_at": "2026-07-25T13:59:48.522Z",
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.095Z"
+ "queued_at": "2026-07-25T13:59:48.495Z"
},
{
"model": "gpt",
@@ -26975,9 +27315,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T13:48:12.120Z",
+ "started_at": "2026-07-25T13:59:48.528Z",
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.098Z"
+ "queued_at": "2026-07-25T13:59:48.499Z"
},
{
"model": "grok",
@@ -26985,19 +27325,19 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T13:48:12.125Z",
+ "started_at": "2026-07-25T13:59:48.534Z",
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.102Z"
+ "queued_at": "2026-07-25T13:59:48.504Z"
}
]
},
{
- "id": "b0bfeedddee6",
- "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. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. (e) Open with a CSS design-token block in :root (e.g. --bg, --ink, --accent, --line, --shadow, --ease) and reference the tokens throughout, so the palette is systematic not one-off. (f) The wordmark is a compact upper-left lockup that shows the FULL 'DESIGNER WALLCOVERINGS' text WITHOUT clipping — size the serif so it fits (~200-280px) or wrap to two lines; NEVER truncate/overflow-hidden the wordmark. Demote scoreboards/buttons to a small refined SANS (uppercase, tracked) so the header reads as a logo zone, not competing with the content. (g) Let color/imagery carry the meaning — do NOT slap letter labels on swatches/tiles; a bare luxury swatch beats a lettered one; when a build shows multiple 'styles/patterns', make them VISUALLY DISTINCT (different SVG/CSS motifs, not the same stripe at different densities). (h) NEVER use alert()/confirm()/prompt() — win/game-over/result states must be in-page overlays styled with the token palette. (i) NO external images or URLs (picsum.photos, unsplash, any CDN/http src) — the artifact runs under a strict no-network CSP so they render BROKEN; draw all patterns/imagery with CSS gradients or inline SVG only. (j) Actually INSTANTIATE the wordmark: put a real <header> element containing the wordmark text in the DOM (defining the CSS class is not enough), The wordmark/header text color MUST be the DARKEST ink token (near-black, e.g. #1c1a17 / var(--text)); NEVER a white/surface/background token — a common fatal bug is color:var(--surface) rendering the wordmark white-on-cream and invisible. Wordmark font-size >=40px. It must look like a luxury interior-design brand, not a generic AI demo. (No hamburger/nav needed — these are self-contained games/social widgets.)",
+ "id": "e1961bf42e98",
+ "title": "Designer Wallcoverings — Guess the Style Game",
+ "prompt": "Build a single self-contained HTML file: a fast \"Guess the Design Style\" game. A CSS-drawn wallpaper motif appears; the player picks its style from 4 buttons (Damask, Toile, Ikat, Chinoiserie, Geometric, Grasscloth — rotate). Score, streak, 10 rounds, timer, best score in localStorage, restart. Refined luxe palette, satisfying correct/wrong feedback. Output ONLY the HTML. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. (e) Open with a CSS design-token block in :root (e.g. --bg, --ink, --accent, --line, --shadow, --ease) and reference the tokens throughout, so the palette is systematic not one-off. (f) The wordmark is a compact upper-left lockup that shows the FULL 'DESIGNER WALLCOVERINGS' text WITHOUT clipping — size the serif so it fits (~200-280px) or wrap to two lines; NEVER truncate/overflow-hidden the wordmark. Demote scoreboards/buttons to a small refined SANS (uppercase, tracked) so the header reads as a logo zone, not competing with the content. (g) Let color/imagery carry the meaning — do NOT slap letter labels on swatches/tiles; a bare luxury swatch beats a lettered one; when a build shows multiple 'styles/patterns', make them VISUALLY DISTINCT (different SVG/CSS motifs, not the same stripe at different densities). (h) NEVER use alert()/confirm()/prompt() — win/game-over/result states must be in-page overlays styled with the token palette. (i) NO external images or URLs (picsum.photos, unsplash, any CDN/http src) — the artifact runs under a strict no-network CSP so they render BROKEN; draw all patterns/imagery with CSS gradients or inline SVG only. (j) Actually INSTANTIATE the wordmark: put a real <header> element containing the wordmark text in the DOM (defining the CSS class is not enough), The wordmark/header text color MUST be the DARKEST ink token (near-black, e.g. #1c1a17 / var(--text)); NEVER a white/surface/background token — a common fatal bug is color:var(--surface) rendering the wordmark white-on-cream and invisible. Wordmark font-size >=40px. It must look like a luxury interior-design brand, not a generic AI demo. (No hamburger/nav needed — these are self-contained games/social widgets.)",
"category": "Real Work",
"designTools": true,
- "created_at": "2026-07-25T13:48:12.155Z",
+ "created_at": "2026-07-25T13:59:48.561Z",
"winner": null,
"runs": [
{
@@ -27008,7 +27348,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.159Z"
+ "queued_at": "2026-07-25T13:59:48.566Z"
},
{
"model": "gemma3-12b",
@@ -27018,7 +27358,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.163Z"
+ "queued_at": "2026-07-25T13:59:48.571Z"
},
{
"model": "hermes3-8b",
@@ -27028,7 +27368,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.167Z"
+ "queued_at": "2026-07-25T13:59:48.576Z"
},
{
"model": "qwen25-7b",
@@ -27038,7 +27378,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.171Z"
+ "queued_at": "2026-07-25T13:59:48.580Z"
},
{
"model": "hf-qwen-coder-32b",
@@ -27048,7 +27388,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.176Z"
+ "queued_at": "2026-07-25T13:59:48.585Z"
},
{
"model": "claude-code",
@@ -27058,7 +27398,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.180Z"
+ "queued_at": "2026-07-25T13:59:48.589Z"
},
{
"model": "kimi",
@@ -27068,7 +27408,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.184Z"
+ "queued_at": "2026-07-25T13:59:48.594Z"
},
{
"model": "gpt",
@@ -27078,7 +27418,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.187Z"
+ "queued_at": "2026-07-25T13:59:48.598Z"
},
{
"model": "grok",
@@ -27088,7 +27428,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T13:48:12.191Z"
+ "queued_at": "2026-07-25T13:59:48.602Z"
}
]
}
diff --git a/data/costlog.jsonl b/data/costlog.jsonl
index c1489ca..4943be6 100644
--- a/data/costlog.jsonl
+++ b/data/costlog.jsonl
@@ -369,3 +369,9 @@
{"ts":"2026-07-25T13:39:35.660Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":4063,"output_tokens":7836,"cost_usd":0.129729}
{"ts":"2026-07-25T13:39:39.739Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":3695,"output_tokens":5986,"cost_usd":0.017182}
{"ts":"2026-07-25T13:39:51.092Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3514,"output_tokens":12047,"cost_usd":0.174808}
+{"ts":"2026-07-25T13:49:25.343Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3335,"output_tokens":11392,"cost_usd":0.165324}
+{"ts":"2026-07-25T13:50:35.425Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":4092,"output_tokens":11024,"cost_usd":0.177636}
+{"ts":"2026-07-25T13:51:13.179Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3552,"output_tokens":12570,"cost_usd":0.182196}
+{"ts":"2026-07-25T13:51:13.290Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":7452,"output_tokens":11174,"cost_usd":0.032406}
+{"ts":"2026-07-25T13:52:36.664Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":4321,"output_tokens":9505,"cost_usd":0.155538}
+{"ts":"2026-07-25T13:52:47.183Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":6531,"output_tokens":5575,"cost_usd":0.017856}
diff --git a/idea-run/.dw-brand-style-color-pointer b/idea-run/.dw-brand-style-color-pointer
index 0cfbf08..b8626c4 100644
--- a/idea-run/.dw-brand-style-color-pointer
+++ b/idea-run/.dw-brand-style-color-pointer
@@ -1 +1 @@
-2
+4
← 2781baa night-loop: cycle 06:48 — judged=6dcfbb559ecb · fired 2 →; F
·
back to Model Arena
·
auto-save: 2026-07-25T07:04:29 (4 files) — data/challenges.j eac99fb →