← back to Model Arena
auto-save: 2026-07-25T07:34:42 (6 files) — data/challenges.json data/costlog.jsonl data/artifacts/0219528ac7d7/ data/artifacts/258516d076e6/claude-code.html data/artifacts/258516d076e6/claude-code.png
dc07f8fbfdf0beb84ddf82fdbfb22125533ecb43 · 2026-07-25 07:34:49 -0700 · Steve Abrams
Files touched
A data/artifacts/0219528ac7d7/claude-code.htmlA data/artifacts/0219528ac7d7/claude-code.pngA data/artifacts/0219528ac7d7/gemma3-12b.htmlA data/artifacts/0219528ac7d7/gemma3-12b.pngA data/artifacts/0219528ac7d7/gpt.htmlA data/artifacts/0219528ac7d7/gpt.pngA data/artifacts/0219528ac7d7/grok.htmlA data/artifacts/0219528ac7d7/grok.pngA data/artifacts/0219528ac7d7/hermes3-8b.htmlA data/artifacts/0219528ac7d7/hermes3-8b.pngA data/artifacts/0219528ac7d7/kimi.htmlA data/artifacts/0219528ac7d7/kimi.pngA data/artifacts/0219528ac7d7/qwen25-7b.htmlA data/artifacts/0219528ac7d7/qwen25-7b.pngA data/artifacts/0219528ac7d7/qwen3-14b.htmlA data/artifacts/0219528ac7d7/qwen3-14b.pngA data/artifacts/258516d076e6/claude-code.htmlA data/artifacts/258516d076e6/claude-code.pngA data/artifacts/edd68668d3dc/claude-code.htmlA data/artifacts/edd68668d3dc/claude-code.pngA data/artifacts/edd68668d3dc/gemma3-12b.htmlA data/artifacts/edd68668d3dc/gemma3-12b.pngA data/artifacts/edd68668d3dc/gpt.htmlA data/artifacts/edd68668d3dc/gpt.pngA data/artifacts/edd68668d3dc/grok.htmlA data/artifacts/edd68668d3dc/grok.pngA data/artifacts/edd68668d3dc/hermes3-8b.htmlA data/artifacts/edd68668d3dc/hermes3-8b.pngA data/artifacts/edd68668d3dc/hf-qwen-coder-32b.htmlA data/artifacts/edd68668d3dc/hf-qwen-coder-32b.pngA data/artifacts/edd68668d3dc/kimi.htmlA data/artifacts/edd68668d3dc/kimi.pngA data/artifacts/edd68668d3dc/qwen25-7b.htmlA data/artifacts/edd68668d3dc/qwen25-7b.pngA data/artifacts/edd68668d3dc/qwen3-14b.htmlA data/artifacts/edd68668d3dc/qwen3-14b.pngM data/challenges.jsonM data/costlog.jsonl
Diff
commit dc07f8fbfdf0beb84ddf82fdbfb22125533ecb43
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 07:34:49 2026 -0700
auto-save: 2026-07-25T07:34:42 (6 files) — data/challenges.json data/costlog.jsonl data/artifacts/0219528ac7d7/ data/artifacts/258516d076e6/claude-code.html data/artifacts/258516d076e6/claude-code.png
---
data/artifacts/0219528ac7d7/claude-code.html | 536 ++++++
data/artifacts/0219528ac7d7/claude-code.png | Bin 0 -> 42614 bytes
data/artifacts/0219528ac7d7/gemma3-12b.html | 270 +++
data/artifacts/0219528ac7d7/gemma3-12b.png | Bin 0 -> 31971 bytes
data/artifacts/0219528ac7d7/gpt.html | 1732 ++++++++++++++++++
data/artifacts/0219528ac7d7/gpt.png | Bin 0 -> 199606 bytes
data/artifacts/0219528ac7d7/grok.html | 1545 ++++++++++++++++
data/artifacts/0219528ac7d7/grok.png | Bin 0 -> 36056 bytes
data/artifacts/0219528ac7d7/hermes3-8b.html | 385 ++++
data/artifacts/0219528ac7d7/hermes3-8b.png | Bin 0 -> 53963 bytes
data/artifacts/0219528ac7d7/kimi.html | 1099 +++++++++++
data/artifacts/0219528ac7d7/kimi.png | Bin 0 -> 22659 bytes
data/artifacts/0219528ac7d7/qwen25-7b.html | 158 ++
data/artifacts/0219528ac7d7/qwen25-7b.png | Bin 0 -> 30072 bytes
data/artifacts/0219528ac7d7/qwen3-14b.html | 284 +++
data/artifacts/0219528ac7d7/qwen3-14b.png | Bin 0 -> 122917 bytes
data/artifacts/258516d076e6/claude-code.html | 482 +++++
data/artifacts/258516d076e6/claude-code.png | Bin 0 -> 86635 bytes
data/artifacts/edd68668d3dc/claude-code.html | 1019 +++++++++++
data/artifacts/edd68668d3dc/claude-code.png | Bin 0 -> 111089 bytes
data/artifacts/edd68668d3dc/gemma3-12b.html | 275 +++
data/artifacts/edd68668d3dc/gemma3-12b.png | Bin 0 -> 55272 bytes
data/artifacts/edd68668d3dc/gpt.html | 1914 ++++++++++++++++++++
data/artifacts/edd68668d3dc/gpt.png | Bin 0 -> 266483 bytes
data/artifacts/edd68668d3dc/grok.html | 1348 ++++++++++++++
data/artifacts/edd68668d3dc/grok.png | Bin 0 -> 100247 bytes
data/artifacts/edd68668d3dc/hermes3-8b.html | 158 ++
data/artifacts/edd68668d3dc/hermes3-8b.png | Bin 0 -> 46324 bytes
data/artifacts/edd68668d3dc/hf-qwen-coder-32b.html | 319 ++++
data/artifacts/edd68668d3dc/hf-qwen-coder-32b.png | Bin 0 -> 27153 bytes
data/artifacts/edd68668d3dc/kimi.html | 1232 +++++++++++++
data/artifacts/edd68668d3dc/kimi.png | Bin 0 -> 68570 bytes
data/artifacts/edd68668d3dc/qwen25-7b.html | 171 ++
data/artifacts/edd68668d3dc/qwen25-7b.png | Bin 0 -> 40950 bytes
data/artifacts/edd68668d3dc/qwen3-14b.html | 369 ++++
data/artifacts/edd68668d3dc/qwen3-14b.png | Bin 0 -> 54577 bytes
data/challenges.json | 303 ++--
data/costlog.jsonl | 6 +
38 files changed, 13496 insertions(+), 109 deletions(-)
diff --git a/data/artifacts/0219528ac7d7/claude-code.html b/data/artifacts/0219528ac7d7/claude-code.html
new file mode 100644
index 0000000..4394d10
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/claude-code.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Which Design Era? — Designer Wallcoverings</title>
+<style>
+ :root{
+ --bg:#faf8f4;
+ --surface:#ffffff;
+ --ink:#1c1a17;
+ --text:#1c1a17;
+ --muted:#9b948a;
+ --accent:#a9863f; /* soft antique gold */
+ --accent-deep:#7d6a45;
+ --line:rgba(28,26,23,.12);
+ --shadow:0 8px 24px rgba(28,26,23,.10);
+ --shadow-hi:0 16px 48px rgba(28,26,23,.16);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Didot','Bodoni MT','Playfair Display','Cormorant Garamond',Georgia,'Times New Roman',serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{height:100%}
+ body{
+ background:var(--bg);
+ color:var(--text);
+ font-family:var(--sans);
+ -webkit-font-smoothing:antialiased;
+ min-height:100%;
+ display:flex;
+ flex-direction:column;
+ }
+
+ /* ---------- Fixed top bar / wordmark ---------- */
+ header.topbar{
+ position:sticky;top:0;z-index:50;
+ background:rgba(250,248,244,.92);
+ backdrop-filter:blur(8px);
+ border-bottom:1px solid var(--line);
+ display:flex;align-items:center;justify-content:space-between;
+ padding:18px 28px;
+ }
+ .wordmark{
+ font-family:var(--serif);
+ color:var(--ink);
+ font-size:clamp(20px,3.6vw,30px);
+ font-weight:600;
+ line-height:1.02;
+ text-transform:uppercase;
+ letter-spacing:.18em;
+ white-space:normal;
+ max-width:300px;
+ }
+ .wordmark small{
+ display:block;
+ font-family:var(--sans);
+ font-size:10px;
+ letter-spacing:.34em;
+ color:var(--muted);
+ font-weight:600;
+ margin-top:6px;
+ }
+ .scorebar{
+ display:flex;gap:22px;align-items:center;
+ font-family:var(--sans);
+ text-transform:uppercase;letter-spacing:.15em;
+ font-size:11px;color:var(--muted);
+ }
+ .scorebar b{
+ display:block;
+ font-family:var(--serif);
+ font-size:26px;letter-spacing:.02em;
+ color:var(--ink);font-weight:600;margin-top:2px;
+ }
+
+ /* ---------- Layout ---------- */
+ main{
+ flex:1;
+ width:100%;max-width:1040px;margin:0 auto;
+ padding:40px 28px 80px;
+ display:flex;flex-direction:column;align-items:center;
+ }
+ .kicker{
+ font-size:12px;letter-spacing:.22em;text-transform:uppercase;
+ color:var(--accent-deep);margin-bottom:14px;font-weight:600;
+ }
+ h1.prompt{
+ font-family:var(--serif);
+ font-weight:500;
+ font-size:clamp(26px,4.4vw,40px);
+ text-align:center;line-height:1.12;
+ margin-bottom:6px;color:var(--ink);
+ }
+ .subprompt{color:var(--muted);font-size:14px;margin-bottom:34px;text-align:center}
+
+ /* ---------- Vignette frame ---------- */
+ .stage{
+ width:100%;max-width:760px;
+ aspect-ratio:16/10;
+ border-radius:14px;
+ overflow:hidden;
+ position:relative;
+ box-shadow:var(--shadow-hi);
+ border:1px solid var(--line);
+ background:#eee;
+ animation:fadeUp .7s var(--ease) both;
+ }
+ .vignette{position:absolute;inset:0}
+ .plaque{
+ position:absolute;left:20px;bottom:18px;
+ background:rgba(255,255,255,.86);
+ backdrop-filter:blur(4px);
+ border:1px solid var(--line);
+ padding:8px 14px;border-radius:8px;
+ font-size:10px;letter-spacing:.2em;text-transform:uppercase;
+ color:var(--accent-deep);font-weight:700;
+ box-shadow:var(--shadow);
+ }
+
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+ /* ---------- Guess buttons ---------- */
+ .options{
+ margin-top:34px;width:100%;max-width:760px;
+ display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;
+ }
+ .opt{
+ font-family:var(--sans);
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:12px;
+ padding:20px 16px;
+ cursor:pointer;
+ text-align:center;
+ text-transform:uppercase;letter-spacing:.14em;
+ font-size:12px;font-weight:600;color:var(--ink);
+ box-shadow:var(--shadow);
+ transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
+ }
+ .opt:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow-hi);border-color:var(--accent)}
+ .opt:disabled{cursor:default}
+ .opt.correct{border-color:var(--accent);background:#fbf6ea;box-shadow:0 0 24px rgba(169,134,63,.32)}
+ .opt.wrong{border-color:#b0472e;background:#fbefe c;opacity:.9}
+ .opt.wrong{background:#fbefec;border-color:#b0472e}
+ .opt.dim{opacity:.4}
+
+ /* ---------- Reveal card ---------- */
+ .reveal{
+ margin-top:30px;width:100%;max-width:760px;
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:14px;
+ padding:28px 30px;
+ box-shadow:var(--shadow);
+ display:none;
+ animation:fadeUp .5s var(--ease) both;
+ }
+ .reveal.show{display:block}
+ .reveal .verdict{
+ font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
+ font-weight:700;margin-bottom:10px;
+ }
+ .reveal .verdict.hit{color:var(--accent-deep)}
+ .reveal .verdict.miss{color:#b0472e}
+ .reveal h2{
+ font-family:var(--serif);font-weight:500;font-size:28px;color:var(--ink);margin-bottom:12px;
+ }
+ .reveal p{color:#4a453e;font-size:15px;line-height:1.65;max-width:60ch}
+ .reveal .next{
+ margin-top:22px;
+ display:inline-block;
+ font-family:var(--sans);
+ background:var(--ink);color:var(--bg);
+ border:none;border-radius:10px;
+ padding:14px 30px;cursor:pointer;
+ text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;
+ transition:background .2s var(--ease),transform .2s var(--ease);
+ }
+ .reveal .next:hover{background:var(--accent-deep);transform:translateY(-2px)}
+
+ .progress{
+ margin-top:30px;display:flex;gap:8px;
+ }
+ .pip{width:26px;height:3px;border-radius:2px;background:var(--line);transition:background .3s var(--ease)}
+ .pip.done{background:var(--accent)}
+ .pip.now{background:var(--ink)}
+
+ /* ---------- Overlay ---------- */
+ .overlay{
+ position:fixed;inset:0;z-index:100;
+ background:rgba(28,26,23,.55);
+ backdrop-filter:blur(6px);
+ display:none;align-items:center;justify-content:center;padding:24px;
+ }
+ .overlay.show{display:flex;animation:fadeIn .35s var(--ease) both}
+ @keyframes fadeIn{from{opacity:0}to{opacity:1}}
+ .modal{
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:16px;
+ max-width:460px;width:100%;
+ padding:48px 40px;text-align:center;
+ box-shadow:var(--shadow-hi);
+ animation:fadeUp .5s var(--ease) both;
+ }
+ .modal .kicker{margin-bottom:18px}
+ .modal h2{font-family:var(--serif);font-weight:500;font-size:40px;color:var(--ink);line-height:1.05}
+ .modal .bigscore{
+ font-family:var(--serif);font-size:66px;color:var(--accent-deep);margin:18px 0 6px;font-weight:600;
+ }
+ .modal .best{
+ font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;
+ }
+ .modal .msg{color:#4a453e;font-size:15px;line-height:1.6;margin:8px 0 30px}
+ .modal button{
+ font-family:var(--sans);
+ background:var(--ink);color:var(--bg);border:none;border-radius:10px;
+ padding:15px 40px;cursor:pointer;
+ text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;
+ transition:background .2s var(--ease),transform .2s var(--ease);
+ }
+ .modal button:hover{background:var(--accent-deep);transform:translateY(-2px)}
+ .modal .newbest{
+ display:inline-block;margin-top:12px;
+ font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;
+ }
+
+ footer{
+ text-align:center;padding:26px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
+ color:var(--muted);border-top:1px solid var(--line);
+ }
+</style>
+</head>
+<body>
+
+ <header class="topbar">
+ <div class="wordmark">Designer Wallcoverings<small>The Design Era Salon</small></div>
+ <div class="scorebar">
+ <div>Round<b id="roundNum">1<span style="font-size:15px;color:var(--muted)">/8</span></b></div>
+ <div>Score<b id="scoreNum">0</b></div>
+ <div>Best<b id="bestNum">—</b></div>
+ </div>
+ </header>
+
+ <main>
+ <div class="kicker">Guess the Interior</div>
+ <h1 class="prompt">Which design era is this room?</h1>
+ <p class="subprompt">Study the palette, pattern & silhouette — then name the style.</p>
+
+ <div class="stage" id="stage" aria-label="An interior vignette to identify">
+ <div class="vignette" id="vignette"></div>
+ <div class="plaque">A Vignette · No. <span id="plaqueNum">1</span></div>
+ </div>
+
+ <div class="options" id="options"></div>
+
+ <div class="reveal" id="reveal">
+ <div class="verdict" id="verdict"></div>
+ <h2 id="revealTitle"></h2>
+ <p id="revealFact"></p>
+ <button class="next" id="nextBtn">Next Vignette →</button>
+ </div>
+
+ <div class="progress" id="progress"></div>
+ </main>
+
+ <footer>Designer Wallcoverings — A Salon of Style</footer>
+
+ <!-- Game over overlay -->
+ <div class="overlay" id="overlay">
+ <div class="modal">
+ <div class="kicker">The Verdict</div>
+ <h2 id="modalTitle">Well Composed</h2>
+ <div class="bigscore" id="modalScore">0</div>
+ <div class="best">of 8 rooms named correctly</div>
+ <div id="newBestWrap"></div>
+ <p class="msg" id="modalMsg"></p>
+ <button id="restartBtn">Play Again</button>
+ </div>
+ </div>
+
+<script>
+(function(){
+ "use strict";
+
+ // ---------- Era definitions with CSS-drawn vignettes ----------
+ const ERAS = {
+ victorian: {
+ name: "Victorian",
+ fact: "Victorian interiors (1837–1901) prized abundance: deep jewel tones, layered damask wallpapers, dark carved mahogany and rooms dressed almost floor-to-ceiling in pattern. William Morris' arabesques defined the age.",
+ draw: victorian
+ },
+ deco: {
+ name: "Art Deco",
+ fact: "Art Deco (1920s–30s) celebrated the machine age with bold symmetry, sunburst fans, lacquered black and glinting gold. Stepped geometry, chevrons and chrome made luxury feel modern and streamlined.",
+ draw: deco
+ },
+ midcentury: {
+ name: "Mid-Century Modern",
+ fact: "Mid-Century Modern (1945–1965) stripped rooms to clean lines, tapered wooden legs and warm atomic hues — mustard, teal and orange — with organic 'boomerang' motifs and a love of unadorned function.",
+ draw: midcentury
+ },
+ grandmillennial: {
+ name: "Grandmillennial",
+ fact: "Grandmillennial style revives 'granny chic' — chintz florals, scalloped edges, blue-and-white porcelain and skirted furniture — reinterpreting traditional patterns with a fresh, joyful, layered hand.",
+ draw: grandmillennial
+ }
+ };
+ const KEYS = Object.keys(ERAS);
+
+ // ---------- Vignette renderers (return CSS on a wrapper div) ----------
+ function baseRoom(el, wallCSS, floor, accent){
+ el.innerHTML =
+ '<div style="position:absolute;inset:0;'+wallCSS+'"></div>'+
+ // floor
+ '<div style="position:absolute;left:0;right:0;bottom:0;height:26%;background:'+floor+';border-top:2px solid rgba(0,0,0,.18)"></div>';
+ return el.firstChild;
+ }
+
+ function victorian(el){
+ // deep burgundy damask wall, dark floor, ornate framed art + sofa silhouette
+ const damask =
+ 'background-color:#4a1522;'+
+ 'background-image:'+
+ 'radial-gradient(circle at 20px 30px, rgba(180,140,70,.28) 0 6px, transparent 7px),'+
+ 'radial-gradient(circle at 60px 90px, rgba(180,140,70,.28) 0 6px, transparent 7px),'+
+ 'radial-gradient(ellipse 14px 26px at 20px 60px, rgba(150,40,60,.55) 0 100%, transparent),'+
+ 'radial-gradient(ellipse 14px 26px at 60px 120px, rgba(150,40,60,.55) 0 100%, transparent),'+
+ 'linear-gradient(#4a1522,#3a1019);'+
+ 'background-size:80px 120px,80px 120px,80px 120px,80px 120px,100% 100%;';
+ baseRoom(el, damask, 'linear-gradient(#3c2a1e,#2c1d14)', '#b48c46');
+ el.insertAdjacentHTML('beforeend',
+ // gilded oval frame
+ '<div style="position:absolute;left:50%;top:14%;transform:translateX(-50%);width:26%;height:40%;border-radius:50%;'+
+ 'background:radial-gradient(circle at 40% 35%,#6a2233,#3a0f1b);border:8px solid #b48c46;box-shadow:0 0 0 2px #7d5a2a,inset 0 0 20px rgba(0,0,0,.6)"></div>'+
+ // tufted sofa
+ '<div style="position:absolute;left:14%;bottom:20%;width:72%;height:26%;background:linear-gradient(#6d1f2f,#57121f);'+
+ 'border-radius:16px 16px 8px 8px;box-shadow:inset 0 -8px 14px rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.4);'+
+ 'border-top:3px solid #8a3a4a"></div>'+
+ '<div style="position:absolute;left:16%;bottom:20%;width:68%;height:12%;background:repeating-linear-gradient(90deg,#7d2434 0 3px,transparent 3px 46px)"></div>'
+ );
+ }
+
+ function deco(el){
+ // black & gold sunburst, symmetrical
+ baseRoom(el,'background:linear-gradient(#161311,#221c16);','linear-gradient(#0e0c0a,#1a1512)','#c9a24a');
+ el.insertAdjacentHTML('beforeend',
+ // radiating gold fan
+ '<div style="position:absolute;left:50%;top:6%;transform:translateX(-50%);width:44%;height:64%;'+
+ 'background:conic-gradient(from 200deg at 50% 100%,'+
+ '#c9a24a 0 4deg,transparent 4deg 14deg,#a9843a 14deg 18deg,transparent 18deg 28deg,'+
+ '#c9a24a 28deg 32deg,transparent 32deg 42deg,#a9843a 42deg 46deg,transparent 46deg 56deg,'+
+ '#c9a24a 56deg 60deg,transparent 60deg 70deg,#a9843a 70deg 74deg,transparent 74deg 84deg,#c9a24a 84deg 88deg,transparent 88deg 140deg);'+
+ 'border-radius:0 0 6px 6px;opacity:.9"></div>'+
+ // stepped console
+ '<div style="position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:40%;height:22%;background:linear-gradient(#2b2320,#171310);'+
+ 'border-top:4px solid #c9a24a;box-shadow:0 8px 18px rgba(0,0,0,.5)"></div>'+
+ '<div style="position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:20%;height:30%;background:#0f0c0a;border-left:2px solid #c9a24a;border-right:2px solid #c9a24a"></div>'+
+ // chevron border
+ '<div style="position:absolute;left:0;right:0;top:0;height:8%;background:repeating-linear-gradient(135deg,#c9a24a 0 8px,#161311 8px 16px)"></div>'
+ );
+ }
+
+ function midcentury(el){
+ // warm cream wall w/ atomic ovals, teal + orange, tapered legs
+ const wall='background:linear-gradient(#efe3ce,#e6d7bd);';
+ baseRoom(el,wall,'linear-gradient(#c58a4d,#a9713a)','#d97b34');
+ el.insertAdjacentHTML('beforeend',
+ // atomic starbursts
+ '<div style="position:absolute;left:18%;top:14%;width:70px;height:70px;'+
+ 'background:conic-gradient(from 0deg,#e07b34 0 10deg,transparent 10deg 45deg,#2f7f78 45deg 55deg,transparent 55deg 90deg,#e07b34 90deg 100deg,transparent 100deg 135deg,#2f7f78 135deg 145deg,transparent 145deg 180deg,#e07b34 180deg 190deg,transparent 190deg 225deg,#2f7f78 225deg 235deg,transparent 235deg 270deg,#e07b34 270deg 280deg,transparent 280deg 315deg,#2f7f78 315deg 325deg,transparent 325deg 360deg);border-radius:50%"></div>'+
+ // boomerang ovals
+ '<div style="position:absolute;right:16%;top:20%;width:120px;height:44px;border:5px solid #2f7f78;border-radius:50%;transform:rotate(-18deg)"></div>'+
+ '<div style="position:absolute;right:24%;top:32%;width:80px;height:30px;border:5px solid #d97b34;border-radius:50%;transform:rotate(-18deg)"></div>'+
+ // low couch teal
+ '<div style="position:absolute;left:20%;bottom:22%;width:60%;height:16%;background:linear-gradient(#2f7f78,#256560);border-radius:6px;box-shadow:0 6px 12px rgba(0,0,0,.25)"></div>'+
+ '<div style="position:absolute;left:22%;bottom:14%;width:8px;height:9%;background:#5c3a1e;transform:rotate(8deg)"></div>'+
+ '<div style="position:absolute;right:22%;bottom:14%;width:8px;height:9%;background:#5c3a1e;transform:rotate(-8deg)"></div>'
+ );
+ }
+
+ function grandmillennial(el){
+ // blue & white chintz floral, scalloped, skirted table + ginger jar
+ const chintz=
+ 'background-color:#f4f8fb;'+
+ 'background-image:'+
+ 'radial-gradient(circle at 25px 25px,#9cc0dd 0 7px,transparent 8px),'+
+ 'radial-gradient(circle at 25px 25px,#4a76a8 0 3px,transparent 4px),'+
+ 'radial-gradient(circle at 75px 75px,#9cc0dd 0 7px,transparent 8px),'+
+ 'radial-gradient(circle at 75px 75px,#4a76a8 0 3px,transparent 4px),'+
+ 'linear-gradient(#f4f8fb,#eaf1f7);'+
+ 'background-size:100px 100px,100px 100px,100px 100px,100px 100px,100% 100%;';
+ baseRoom(el,chintz,'linear-gradient(#dfe7ec,#cdd8df)','#4a76a8');
+ el.insertAdjacentHTML('beforeend',
+ // scalloped valance
+ '<div style="position:absolute;left:0;right:0;top:0;height:9%;background:'+
+ 'radial-gradient(circle at 20px 0,#4a76a8 0 18px,transparent 19px) 0 0/40px 20px repeat-x,#6f9ac4"></div>'+
+ // ginger jar
+ '<div style="position:absolute;left:50%;top:26%;transform:translateX(-50%);width:16%;height:30%;'+
+ 'background:radial-gradient(circle at 40% 30%,#fff,#dbe8f2);border-radius:50% 50% 46% 46%;border:2px solid #4a76a8;box-shadow:inset -6px 0 10px rgba(74,118,168,.3)"></div>'+
+ '<div style="position:absolute;left:50%;top:24%;transform:translateX(-50%);width:6%;height:5%;background:#4a76a8;border-radius:4px"></div>'+
+ // skirted table
+ '<div style="position:absolute;left:33%;bottom:16%;width:34%;height:20%;background:linear-gradient(#fbe4ec,#f2c9d8);'+
+ 'border-radius:8px 8px 0 0;box-shadow:0 6px 14px rgba(0,0,0,.15)"></div>'+
+ '<div style="position:absolute;left:33%;bottom:16%;width:34%;height:6%;background:repeating-linear-gradient(90deg,#e2a3ba 0 6px,#f2c9d8 6px 14px)"></div>'
+ );
+ }
+
+ // ---------- Game state ----------
+ const TOTAL = 8;
+ let round, score, sequence, answered, best;
+
+ const $ = id => document.getElementById(id);
+ const optionsEl=$('options'), revealEl=$('reveal'), progressEl=$('progress');
+
+ best = parseInt(localStorage.getItem('dw_era_best')||'',10);
+ if(!isNaN(best)) $('bestNum').textContent = best;
+
+ function buildProgress(){
+ progressEl.innerHTML='';
+ for(let i=0;i<TOTAL;i++){
+ const p=document.createElement('div');p.className='pip';p.dataset.i=i;progressEl.appendChild(p);
+ }
+ }
+ function updateProgress(){
+ [...progressEl.children].forEach((p,i)=>{
+ p.className='pip'+(i<round?' done':i===round?' now':'');
+ });
+ }
+
+ function shuffled(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 startGame(){
+ round=0;score=0;answered=false;
+ // sequence: at least each era once when possible, then random, shuffled
+ let seq=[];
+ while(seq.length<TOTAL){ seq=seq.concat(shuffled(KEYS)); }
+ sequence=shuffled(seq).slice(0,TOTAL);
+ $('scoreNum').textContent=0;
+ buildProgress();
+ $('overlay').classList.remove('show');
+ loadRound();
+ }
+
+ function loadRound(){
+ answered=false;
+ const eraKey=sequence[round];
+ $('roundNum').innerHTML=(round+1)+'<span style="font-size:15px;color:var(--muted)">/'+TOTAL+'</span>';
+ $('plaqueNum').textContent=round+1;
+ updateProgress();
+
+ // draw vignette
+ const v=$('vignette');
+ v.innerHTML='';
+ v.style.cssText='position:absolute;inset:0';
+ ERAS[eraKey].draw(v);
+ // re-trigger entrance
+ const stage=$('stage');stage.style.animation='none';void stage.offsetWidth;stage.style.animation='';
+
+ // build options
+ optionsEl.innerHTML='';
+ shuffled(KEYS).forEach(k=>{
+ const b=document.createElement('button');
+ b.className='opt';b.textContent=ERAS[k].name;b.dataset.key=k;
+ b.addEventListener('click',()=>choose(k,b));
+ optionsEl.appendChild(b);
+ });
+
+ revealEl.classList.remove('show');
+ }
+
+ function choose(guess,btn){
+ if(answered) return;
+ answered=true;
+ const correctKey=sequence[round];
+ const correct = guess===correctKey;
+ if(correct){ score++; $('scoreNum').textContent=score; }
+
+ [...optionsEl.children].forEach(b=>{
+ b.disabled=true;
+ const k=b.dataset.key;
+ if(k===correctKey) b.classList.add('correct');
+ else if(k===guess) b.classList.add('wrong');
+ else b.classList.add('dim');
+ });
+
+ const era=ERAS[correctKey];
+ const vEl=$('verdict');
+ if(correct){ vEl.textContent='Correct — Beautifully Read'; vEl.className='verdict hit'; }
+ else { vEl.textContent='Not Quite — It Was…'; vEl.className='verdict miss'; }
+ $('revealTitle').textContent=era.name;
+ $('revealFact').textContent=era.fact;
+ $('nextBtn').textContent = (round+1<TOTAL) ? 'Next Vignette →' : 'See Your Result →';
+ revealEl.classList.add('show');
+ revealEl.scrollIntoView({behavior:'smooth',block:'nearest'});
+ }
+
+ $('nextBtn').addEventListener('click',()=>{
+ round++;
+ if(round<TOTAL){ loadRound(); window.scrollTo({top:0,behavior:'smooth'}); }
+ else finish();
+ });
+
+ function finish(){
+ $('modalScore').textContent=score;
+ let title,msg;
+ if(score===TOTAL){ title='Connoisseur'; msg='A flawless eye. Every era named without a false step — the salon is yours.'; }
+ else if(score>=6){ title='Well-Studied'; msg='A refined sensibility for period and pattern. A stray guess or two, but a discerning eye.'; }
+ else if(score>=4){ title='Coming Along'; msg='A promising instinct for style. Another turn through the rooms will sharpen it.'; }
+ else { title='A Fresh Start'; msg='Every collector begins somewhere. Study the palettes and motifs, then take another turn.'; }
+ $('modalTitle').textContent=title;
+ $('modalMsg').textContent=msg;
+
+ const nb=$('newBestWrap');nb.innerHTML='';
+ if(isNaN(best)||score>best){
+ best=score;localStorage.setItem('dw_era_best',String(best));
+ $('bestNum').textContent=best;
+ nb.innerHTML='<span class="newbest">★ New Personal Best</span>';
+ } else {
+ nb.innerHTML='<span class="best" style="color:var(--muted)">Best so far: '+best+'</span>';
+ }
+ $('overlay').classList.add('show');
+ }
+
+ $('restartBtn').addEventListener('click',startGame);
+
+ startGame();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/claude-code.png b/data/artifacts/0219528ac7d7/claude-code.png
new file mode 100644
index 0000000..cce7ab0
Binary files /dev/null and b/data/artifacts/0219528ac7d7/claude-code.png differ
diff --git a/data/artifacts/0219528ac7d7/gemma3-12b.html b/data/artifacts/0219528ac7d7/gemma3-12b.html
new file mode 100644
index 0000000..8de8784
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/gemma3-12b.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: rgba(0, 0, 0, 0.06);
+ --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;
+ letter-spacing: .18em;
+ line-height: 1; /* Reduce vertical spacing */
+ color: var(--text);
+ }
+
+ .container {
+ padding: 96px;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .vignette {
+ width: 100%;
+ height: 400px;
+ background-size: cover;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ margin-bottom: 32px;
+ position: relative;
+ }
+
+ .vignette::before { /* decorative gradient overlay */
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) , rgba(255, 255, 255, 0.3));
+ }
+
+ .options {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ }
+
+ .option-button {
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: 16px 24px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ color: var(--muted);
+ cursor: pointer;
+ transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
+ }
+
+ .option-button:hover {
+ background-color: #f9f3e6; /* slightly darker surface */
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+ }
+
+ #score {
+ font-size: 28px;
+ text-align: center;
+ margin-bottom: 32px;
+ }
+
+ #era-fact {
+ font-style: italic;
+ color: var(--muted);
+ text-align: center;
+ margin-top: 32px;
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.9);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ z-index: 1000;
+ }
+
+ .overlay button {
+ padding: 16px 32px;
+ font-size: 18px;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ border: none;
+ background-color: var(--accent);
+ color: #fff;
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+ .hidden {
+ display:none;
+ }
+
+
+ </style>
+</head>
+<body>
+
+ <header>DESIGNER WALLCOVERINGS</header>
+
+ <div class="container">
+ <div id="score">Score: 0</div>
+
+ <div class="vignette" id="vignette">
+ <!-- Vignette image will be set dynamically -->
+ </div>
+
+ <div class="options" id="options">
+ <!-- Option buttons will be generated dynamically -->
+ </div>
+
+ <p id="era-fact"></p>
+
+ <div class="overlay hidden" id="gameover">
+ <h2>Game Over!</h2>
+ <p>Your Final Score: <span id="finalScore">0</span></p>
+ <button onclick="restartGame()">Play Again</button>
+ </div>
+ </div>
+
+
+ <script>
+ const eras = [
+ { name: "Victorian", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" style=\"stop-color:#f3e5ab;stop-opacity:1\"><\/stop><stop offset=\"48.179%\" style=\"stop-color:#d4a36c;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#bcaaa4;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad1)\" /><\/svg>')", fact: "Victorian design emphasized ornate details and rich colors." },
+ { name: "Art Deco", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\" ><stop offset=\"0%\" style=\"stop-color:#3498db;stop-opacity:1\"><\/stop><stop offset=\"50%\" style=\"stop-color:#e74c3c;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#2ecc71;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad2)\" /><\/svg>')", fact: "Art Deco celebrated modernity and geometric forms." },
+ { name: "Mid-Century Modern", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad3\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\" ><stop offset=\"0%\" style=\"stop-color:#f39c12;stop-opacity:1\"><\/stop><stop offset=\"50%\" style=\"stop-color:#e67e22;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#d35400;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad3)\" /><\/svg>')", fact: "Mid-Century Modern focused on functionality and clean lines." },
+ { name: "Grandmillennial", image: "url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\'><linearGradient id=\"grad4\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\" ><stop offset=\"0%\" style=\"stop-color:#9b59b6;stop-opacity:1\"><\/stop><stop offset=\"50%\" style=\"stop-color:#34495e;stop-opacity:1\"><\/stop><stop offset=\"100%\" style=\"stop-color:#2c3e50;stop-opacity:1\"><\/stop><\/linearGradient><rect width=\'100%\' height=\'100%\' fill=\"url(\#grad4)\" /><\/svg>')", fact: "Grandmillennial style blends traditional and modern elements." }
+ ];
+
+ let currentEraIndex = 0;
+ let score = 0;
+ let round = 1;
+ let bestScore = localStorage.getItem('bestScore') || 0;
+
+
+ function startGame() {
+ score = 0;
+ round = 1;
+ updateScore();
+ showEra();
+ document.getElementById('era-fact').textContent = ""; // Clear any previous fact
+
+ }
+
+ function showEra() {
+ const era = eras[currentEraIndex];
+ document.getElementById('vignette').style.backgroundImage = era.image;
+ }
+
+ function createOptions() {
+ const optionContainer = document.getElementById('options');
+ optionContainer.innerHTML = ""; // Clear previous options
+
+ const correctEraName = eras[currentEraIndex].name;
+ let incorrectEras = [];
+
+ // Ensure we get three different incorrect era names
+ while (incorrectEras.length < 3) {
+ let randomIndex = Math.floor(Math.random() * eras.length);
+ if (eras[randomIndex].name !== correctEraName && !incorrectEras.includes(eras[randomIndex].name)) {
+ incorrectEras.push(eras[randomIndex].name);
+ }
+ }
+
+ const allOptions = [correctEraName, ...incorrectEras];
+ allOptions.sort(); // Randomize the order of options
+
+ allOptions.forEach(option => {
+ const button = document.createElement('button');
+ button.classList.add('option-button');
+ button.textContent = option;
+ button.addEventListener('click', () => checkAnswer(option));
+ optionContainer.appendChild(button);
+ });
+ }
+
+
+ function checkAnswer(guess) {
+ if (guess === eras[currentEraIndex].name) {
+ score++;
+ updateScore();
+ showFact();
+ nextRound();
+
+ } else {
+ gameOver();
+ }
+ }
+
+ function showFact() {
+ document.getElementById('era-fact').textContent = eras[currentEraIndex].fact;
+ }
+
+
+ function nextRound() {
+ if (round < 8) {
+ round++;
+ currentEraIndex = (currentEraIndex + 1) % eras.length; // Cycle through eras
+ showEra();
+ createOptions();
+ updateScore();
+
+ } else {
+ gameOver();
+ }
+ }
+
+
+ function updateScore() {
+ document.getElementById('score').textContent = `Score: ${score}`;
+ localStorage.setItem('bestScore', Math.max(parseInt(bestScore), score)); // Update best score in localStorage
+ }
+
+ function gameOver() {
+ const overlay = document.getElementById("gameover");
+ overlay.querySelector("#finalScore").textContent = score;
+ overlay.classList.remove("hidden");
+ }
+
+
+ function restartGame() {
+ startGame();
+ document.getElementById('gameover').classList.add('hidden');
+ }
+
+ window.onload = () => {
+ startGame();
+ };
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/gemma3-12b.png b/data/artifacts/0219528ac7d7/gemma3-12b.png
new file mode 100644
index 0000000..e60ca42
Binary files /dev/null and b/data/artifacts/0219528ac7d7/gemma3-12b.png differ
diff --git a/data/artifacts/0219528ac7d7/gpt.html b/data/artifacts/0219528ac7d7/gpt.html
new file mode 100644
index 0000000..0799caa
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/gpt.html
@@ -0,0 +1,1732 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Which Design Era? – Designer Wallcoverings</title>
+<style>
+:root {
+ /* DESIGN TOKENS */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #1f1f26;
+ --surface-subtle: #111118;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961; /* metallic gold */
+ --accent-soft: #7d6a45;
+ --line: rgba(201,169,97,0.24);
+ --shadow-soft: 0 22px 45px rgba(0,0,0,0.55);
+ --shadow-subtle: 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-hairline: 1px solid var(--line);
+
+ --font-display: "Playfair Display", "Bodoni MT", "Didot", "Times New Roman", serif;
+ --font-serif: "EB Garamond", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
+ --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", -apple-system, sans-serif;
+
+ --fs-display: 3.8rem;
+ --fs-h1: 3.1rem;
+ --fs-h2: 2.4rem;
+ --fs-body: 1rem;
+ --fs-small-label: 0.72rem;
+}
+
+/* GLOBAL */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top, #191922 0, var(--bg) 48%, #050506 100%);
+ color: var(--text);
+ font-family: var(--font-sans);
+ font-size: 16px;
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* HEADER / WORDMARK */
+.app-shell {
+ max-width: 1080px;
+ margin: 0 auto;
+ padding: 92px 32px 40px;
+}
+
+.app-header {
+ position: fixed;
+ inset: 0 auto auto 0;
+ width: 100%;
+ z-index: 20;
+ backdrop-filter: blur(16px);
+ background:
+ linear-gradient(to bottom, rgba(13,13,15,0.96), rgba(13,13,15,0.88), rgba(13,13,15,0.75));
+ border-bottom: var(--border-hairline);
+}
+
+.header-inner {
+ max-width: 1080px;
+ margin: 0 auto;
+ padding: 18px 32px 16px;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 24px;
+}
+
+.brand-lockup {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.wordmark {
+ font-family: var(--font-serif);
+ font-size: 42px;
+ line-height: 1.05;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ white-space: normal;
+ max-width: 280px;
+}
+
+.wordmark span {
+ display: block;
+}
+
+.header-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 12px 24px;
+ font-family: var(--font-sans);
+}
+
+.meta-pill {
+ font-size: var(--fs-small-label);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(201,169,97,0.35);
+ padding: 6px 12px;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.16), transparent 55%);
+}
+
+.meta-pill strong {
+ color: var(--accent);
+ font-weight: 600;
+}
+
+.meta-separator {
+ width: 1px;
+ height: 22px;
+ background: linear-gradient(to bottom, transparent, rgba(201,169,97,0.7), transparent);
+}
+
+/* MAIN LAYOUT */
+main {
+ flex: 1;
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+}
+
+.game-shell {
+ display: grid;
+ grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
+ gap: 28px;
+ align-items: stretch;
+}
+
+@media (max-width: 880px) {
+ .app-shell {
+ padding-inline: 20px;
+ padding-top: 88px;
+ }
+ .header-inner {
+ padding-inline: 20px;
+ }
+ .wordmark {
+ font-size: 38px;
+ }
+ .game-shell {
+ grid-template-columns: minmax(0,1fr);
+ }
+}
+
+/* GAME CARD */
+.panel {
+ border-radius: var(--radius-lg);
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.12), transparent 55%),
+ linear-gradient(145deg, var(--surface) 0, var(--surface-soft) 45%, #101017 100%);
+ border: var(--border-hairline);
+ box-shadow: var(--shadow-soft);
+ position: relative;
+ overflow: hidden;
+}
+
+.panel::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(135deg, rgba(255,255,255,0.06), transparent 30%),
+ radial-gradient(circle at 120% -20%, rgba(201,169,97,0.23), transparent 44%);
+ opacity: 0.55;
+ mix-blend-mode: screen;
+ pointer-events: none;
+}
+
+.panel-inner {
+ position: relative;
+ padding: 22px 22px 20px;
+}
+
+.panel-heading {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: 12px;
+ margin-bottom: 18px;
+}
+
+.panel-title {
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--text);
+}
+
+.panel-subtitle {
+ font-size: 0.85rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+/* VIGNETTE */
+.vignette-shell {
+ border-radius: 16px;
+ border: 1px solid rgba(245,242,234,0.08);
+ background: radial-gradient(circle at top, rgba(201,169,97,0.22), transparent 60%), #101018;
+ box-shadow: var(--shadow-subtle);
+ padding: 14px;
+ position: relative;
+ overflow: hidden;
+}
+
+.vignette-inner {
+ position: relative;
+ border-radius: 12px;
+ overflow: hidden;
+ background: var(--bg);
+ min-height: 260px;
+ max-height: 360px;
+ aspect-ratio: 4 / 3;
+ margin: 0 auto;
+}
+
+/* COMMON ROOM STRUCTURE */
+.room {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ color: inherit;
+ transition: transform 450ms var(--ease-hero), box-shadow 450ms var(--ease-hero);
+}
+
+.vignette-shell:hover .room {
+ transform: translateY(-4px);
+ box-shadow: 0 24px 60px rgba(0,0,0,0.7);
+}
+
+.room-wall {
+ position: absolute;
+ inset: 0 0 30%;
+}
+
+.room-floor {
+ position: absolute;
+ height: 34%;
+ width: 140%;
+ left: -20%;
+ bottom: -10%;
+ background:
+ linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 28%),
+ radial-gradient(circle at center, rgba(0,0,0,0.65), transparent 60%);
+ transform: perspective(900px) rotateX(62deg);
+ transform-origin: top center;
+ filter: drop-shadow(0 32px 40px rgba(0,0,0,0.9));
+}
+
+/* ERA VARIATIONS */
+
+/* Victorian: deep claret damask, ornate frame, tufted sofa */
+.room--victorian .room-wall {
+ background:
+ radial-gradient(circle at 10% 10%, rgba(255,255,255,0.16), transparent 40%),
+ repeating-linear-gradient(45deg,
+ #3c0714 0,
+ #3c0714 14px,
+ #2a040d 14px,
+ #2a040d 26px
+ ),
+ radial-gradient(circle at 20% 0, rgba(136,62,72,0.6), rgba(18,4,7,1) 55%);
+ mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 55%, rgba(0,0,0,0.9) 80%, transparent 95%);
+}
+
+.room--victorian .room-floor {
+ background:
+ repeating-linear-gradient(90deg,
+ #140607 0,
+ #140607 14px,
+ #210608 14px,
+ #210608 28px
+ ),
+ radial-gradient(circle at center, rgba(0,0,0,0.7), transparent 65%);
+}
+
+/* Ornate frame */
+.frame-victorian {
+ position: absolute;
+ width: 32%;
+ height: 38%;
+ left: 11%;
+ top: 14%;
+ border-radius: 18px;
+ background:
+ linear-gradient(145deg, #8f6a2e 0, #f3d69b 30%, #8a6327 55%, #f5e4c0 75%, #6b4a1e 100%);
+ padding: 4px;
+ box-shadow: 0 16px 32px rgba(0,0,0,0.85);
+}
+
+.frame-victorian-inner {
+ width: 100%;
+ height: 100%;
+ border-radius: 14px;
+ background:
+ radial-gradient(circle at 20% 10%, rgba(255,255,255,0.35), transparent 40%),
+ repeating-linear-gradient(135deg,
+ rgba(23,5,9,0.1) 0,
+ rgba(23,5,9,0.1) 6px,
+ rgba(80,17,33,0.4) 6px,
+ rgba(80,17,33,0.4) 12px
+ );
+}
+
+/* Tufted sofa */
+.sofa-victorian {
+ position: absolute;
+ width: 54%;
+ height: 32%;
+ left: 30%;
+ bottom: 9%;
+ border-radius: 999px 999px 80px 80px;
+ background:
+ radial-gradient(circle at 20% 0, rgba(255,255,255,0.18), transparent 50%),
+ radial-gradient(circle at 80% 0, rgba(255,255,255,0.1), transparent 50%),
+ repeating-radial-gradient(circle at 50% 50%,
+ rgba(0,0,0,0.45) 0,
+ rgba(0,0,0,0.45) 2px,
+ rgba(122,45,54,0.45) 2px,
+ rgba(122,45,54,0.45) 6px
+ ),
+ linear-gradient(145deg, #5a1d24 0, #8b333e 35%, #3b0f18 90%);
+ box-shadow: 0 26px 40px rgba(0,0,0,0.95);
+}
+
+.sofa-victorian-back {
+ position: absolute;
+ inset: -24% 10% 44%;
+ border-radius: 999px 999px 80px 80px;
+ background:
+ radial-gradient(circle at 20% 0, rgba(255,255,255,0.16), transparent 50%),
+ radial-gradient(circle at 80% 0, rgba(255,255,255,0.1), transparent 55%),
+ linear-gradient(145deg, #6d222a 0, #b64654 45%, #3a0e16 100%);
+}
+
+.sofa-victorian-leg {
+ position: absolute;
+ width: 16%;
+ height: 18%;
+ bottom: -10%;
+ border-radius: 999px;
+ background:
+ linear-gradient(180deg, #f5d497 0, #8b5f24 52%, #3e260e 100%);
+ box-shadow: 0 8px 12px rgba(0,0,0,0.9);
+}
+.sofa-victorian-leg.left { left: 18%; }
+.sofa-victorian-leg.right { right: 18%; }
+
+/* Victorian lamp */
+.lamp-victorian {
+ position: absolute;
+ width: 9%;
+ height: 46%;
+ right: 17%;
+ bottom: 11%;
+}
+.lamp-victorian-base {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 26%;
+ height: 14%;
+ transform: translateX(-50%);
+ border-radius: 999px;
+ background:
+ radial-gradient(circle at 30% 0, rgba(255,255,255,0.4), transparent 60%),
+ linear-gradient(145deg, #f2d8a3 0, #8c6732 55%, #3a2714 100%);
+ box-shadow: 0 10px 18px rgba(0,0,0,0.9);
+}
+.lamp-victorian-stem {
+ position: absolute;
+ bottom: 14%;
+ left: 50%;
+ width: 6%;
+ height: 34%;
+ transform: translateX(-50%);
+ background:
+ linear-gradient(180deg, #f5e7c5 0, #c8a461 40%, #755325 100%);
+}
+.lamp-victorian-shade {
+ position: absolute;
+ bottom: 48%;
+ left: 50%;
+ width: 120%;
+ height: 52%;
+ transform: translateX(-50%);
+ border-radius: 999px 999px 40% 40%;
+ background:
+ radial-gradient(circle at 50% 0, rgba(255,255,255,0.7), transparent 70%),
+ linear-gradient(180deg, #fff7e0 0, #f0d5a7 55%, #c09d67 100%);
+ box-shadow: 0 18px 30px rgba(0,0,0,0.75);
+}
+
+/* Art Deco: geometric fan wall, stepped console, sunburst mirror */
+.room--artdeco .room-wall {
+ background:
+ repeating-linear-gradient(135deg,
+ #06141c 0,
+ #06141c 10px,
+ #051118 10px,
+ #051118 20px
+ ),
+ radial-gradient(circle at 10% 0, rgba(12,78,93,0.8), transparent 60%),
+ radial-gradient(circle at 90% 0, rgba(10,32,57,0.9), transparent 70%);
+}
+
+.room--artdeco .room-floor {
+ background:
+ repeating-linear-gradient(45deg,
+ #05080b 0,
+ #05080b 14px,
+ #14171c 14px,
+ #14171c 28px
+ );
+}
+
+/* Deco console */
+.console-deco {
+ position: absolute;
+ width: 54%;
+ height: 20%;
+ left: 23%;
+ bottom: 13%;
+ background:
+ linear-gradient(145deg, #10141a 0, #293540 40%, #0a0f14 100%);
+ clip-path: polygon(0 40%, 10% 0, 90% 0, 100% 40%, 100% 100%, 0 100%);
+ box-shadow: 0 18px 30px rgba(0,0,0,0.9);
+}
+
+.console-deco-inlay {
+ position: absolute;
+ inset: 15% 10% 14%;
+ border: 1px solid rgba(201,169,97,0.7);
+ background:
+ repeating-linear-gradient(90deg,
+ rgba(201,169,97,0.16) 0,
+ rgba(201,169,97,0.16) 8px,
+ transparent 8px,
+ transparent 16px
+ );
+}
+
+/* Deco mirror */
+.mirror-deco {
+ position: absolute;
+ width: 24%;
+ height: 32%;
+ left: 12%;
+ top: 18%;
+ background:
+ radial-gradient(circle at 50% 0, rgba(255,255,255,0.9), rgba(184,214,230,0.2) 50%, rgba(0,0,0,0.7) 100%);
+ clip-path: polygon(50% 0, 88% 20%, 100% 60%, 73% 100%, 27% 100%, 0 60%, 12% 20%);
+ box-shadow: 0 20px 30px rgba(0,0,0,0.8);
+}
+.mirror-deco::before {
+ content: "";
+ position: absolute;
+ inset: 9%;
+ border-radius: 24px;
+ border: 3px double rgba(201,169,97,0.85);
+ background:
+ linear-gradient(145deg, rgba(255,255,255,0.7), rgba(206,213,220,0.2));
+}
+
+/* Deco lamp */
+.lamp-deco {
+ position: absolute;
+ width: 11%;
+ height: 40%;
+ right: 18%;
+ bottom: 18%;
+}
+.lamp-deco-base {
+ position: absolute;
+ width: 40%;
+ height: 18%;
+ left: 50%;
+ bottom: 0;
+ transform: translateX(-50%);
+ background:
+ linear-gradient(145deg, #f4dfa6 0, #c9a961 40%, #6f5527 100%);
+ clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
+ box-shadow: 0 12px 22px rgba(0,0,0,0.9);
+}
+.lamp-deco-stem {
+ position: absolute;
+ width: 10%;
+ height: 36%;
+ bottom: 18%;
+ left: 50%;
+ transform: translateX(-50%);
+ background:
+ linear-gradient(180deg, #f8e8c0 0, #c9a961 50%, #84632c 100%);
+}
+.lamp-deco-shade {
+ position: absolute;
+ width: 120%;
+ height: 46%;
+ bottom: 52%;
+ left: 50%;
+ transform: translateX(-50%);
+ clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
+ background:
+ linear-gradient(180deg, #f5f1e6 0, #e2cfaa 60%, #c29b63 100%);
+ box-shadow: 0 18px 28px rgba(0,0,0,0.8);
+}
+
+/* Mid-Century Modern: warm teak panel, low sofa, starburst clock */
+.room--midcentury .room-wall {
+ background:
+ linear-gradient(180deg,
+ rgba(0,0,0,0.4) 0,
+ transparent 40%
+ ),
+ repeating-linear-gradient(90deg,
+ #1c120b 0,
+ #1c120b 18px,
+ #2a1810 18px,
+ #2a1810 36px
+ ),
+ radial-gradient(circle at top right, rgba(235,166,95,0.5), transparent 70%);
+}
+
+.room--midcentury .room-floor {
+ background:
+ linear-gradient(180deg, #171310 0, #0b0705 100%);
+}
+
+/* Mid-century sofa */
+.sofa-mid {
+ position: absolute;
+ width: 60%;
+ height: 22%;
+ left: 22%;
+ bottom: 16%;
+ border-radius: 24px 24px 18px 18px;
+ background:
+ radial-gradient(circle at 20% 0, rgba(255,255,255,0.25), transparent 48%),
+ radial-gradient(circle at 80% 0, rgba(255,255,255,0.18), transparent 50%),
+ linear-gradient(145deg, #f2b88d 0, #d97a4b 38%, #9d4b30 90%);
+ box-shadow: 0 18px 32px rgba(0,0,0,0.9);
+}
+
+.sofa-mid-seat {
+ position: absolute;
+ inset: 46% 6% 12%;
+ border-radius: 18px;
+ background:
+ linear-gradient(145deg, #f8c89d 0, #e18a53 40%, #b35532 90%);
+}
+
+.sofa-mid-leg {
+ position: absolute;
+ width: 8%;
+ height: 32%;
+ bottom: -18%;
+ border-radius: 999px;
+ background:
+ linear-gradient(180deg, #f7e5c7 0, #b98844 55%, #4d2c11 100%);
+ box-shadow: 0 12px 16px rgba(0,0,0,0.9);
+}
+.sofa-mid-leg.left { left: 18%; }
+.sofa-mid-leg.mid { left: 46%; }
+.sofa-mid-leg.right { right: 18%; }
+
+/* Plant */
+.plant-mid {
+ position: absolute;
+ width: 14%;
+ height: 40%;
+ right: 10%;
+ bottom: 17%;
+}
+.plant-mid-pot {
+ position: absolute;
+ width: 52%;
+ height: 28%;
+ left: 50%;
+ bottom: 0;
+ transform: translateX(-50%);
+ border-radius: 0 0 18px 18px;
+ background:
+ linear-gradient(145deg, #f5f1e6 0, #d0c4aa 40%, #95856e 100%);
+ box-shadow: 0 16px 22px rgba(0,0,0,0.8);
+}
+.plant-mid-leaf {
+ position: absolute;
+ width: 46%;
+ height: 46%;
+ bottom: 20%;
+ border-radius: 50% 50% 40% 40%;
+ background:
+ radial-gradient(circle at 20% 10%, rgba(255,255,255,0.3), transparent 60%),
+ linear-gradient(145deg, #2f6b33 0, #5f9142 40%, #1c3c24 100%);
+}
+.plant-mid-leaf.left {
+ left: 2%;
+ transform: rotate(-16deg);
+}
+.plant-mid-leaf.right {
+ right: 2%;
+ transform: rotate(18deg);
+}
+.plant-mid-leaf.center {
+ left: 27%;
+ bottom: 32%;
+ height: 52%;
+ transform: rotate(0deg);
+}
+
+/* Starburst clock */
+.clock-mid {
+ position: absolute;
+ width: 16%;
+ height: 28%;
+ left: 14%;
+ top: 18%;
+}
+.clock-mid-core {
+ position: absolute;
+ width: 42%;
+ height: 42%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 30% 20%, rgba(255,255,255,0.8), transparent 55%),
+ linear-gradient(145deg, #f8f4ea 0, #d9cfb9 60%, #9e8f75 100%);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.7);
+}
+.clock-mid-ray {
+ position: absolute;
+ width: 8%;
+ height: 52%;
+ left: 50%;
+ top: 50%;
+ transform-origin: 50% 100%;
+ background:
+ linear-gradient(180deg, #f2d6a0 0, #c09a5a 65%, #6f4c26 100%);
+ border-radius: 999px;
+ box-shadow: 0 8px 10px rgba(0,0,0,0.7);
+}
+
+/* Grandmillennial: floral wallpaper, skirted armchair, pleated shade */
+.room--grandmillennial .room-wall {
+ background:
+ radial-gradient(circle at 12% 0, rgba(255,255,255,0.25), transparent 50%),
+ radial-gradient(circle at 80% 0, rgba(253,222,230,0.35), transparent 60%),
+ repeating-linear-gradient(90deg,
+ #f7f1e8 0,
+ #f7f1e8 28px,
+ #f0e5d6 28px,
+ #f0e5d6 56px
+ );
+ mask-image: radial-gradient(circle at 30% -30%, transparent 0, rgba(0,0,0,1) 40%);
+}
+
+.room--grandmillennial .room-floor {
+ background:
+ repeating-linear-gradient(45deg,
+ #d6c0aa 0,
+ #d6c0aa 16px,
+ #c1a587 16px,
+ #c1a587 32px
+ );
+}
+
+/* Floral overlay */
+.wall-floral {
+ position: absolute;
+ inset: 8% 10% 40%;
+ background-image:
+ radial-gradient(circle at 10% 20%, #d8849d 0, transparent 45%),
+ radial-gradient(circle at 34% 60%, #7db281 0, transparent 36%),
+ radial-gradient(circle at 70% 30%, #e7a79b 0, transparent 40%),
+ radial-gradient(circle at 90% 70%, #7da7c7 0, transparent 34%);
+ opacity: 0.6;
+}
+
+/* Armchair */
+.chair-grand {
+ position: absolute;
+ width: 40%;
+ height: 32%;
+ left: 20%;
+ bottom: 16%;
+ border-radius: 32px 32px 22px 22px;
+ background:
+ radial-gradient(circle at 18% 0, rgba(255,255,255,0.7), transparent 50%),
+ radial-gradient(circle at 80% 10%, rgba(255,255,255,0.5), transparent 55%),
+ repeating-linear-gradient(135deg,
+ #f7f1e8 0,
+ #f7f1e8 10px,
+ #e3d7c1 10px,
+ #e3d7c1 20px
+ );
+ box-shadow: 0 18px 34px rgba(0,0,0,0.9);
+}
+
+.chair-grand-back {
+ position: absolute;
+ inset: -28% 6% 40%;
+ border-radius: 32px 32px 26px 26px;
+ background:
+ radial-gradient(circle at 20% 0, rgba(255,255,255,0.8), transparent 55%),
+ repeating-linear-gradient(135deg,
+ #f9f4ec 0,
+ #f9f4ec 12px,
+ #e4d7c4 12px,
+ #e4d7c4 24px
+ );
+}
+
+/* Skirt */
+.chair-grand-skirt {
+ position: absolute;
+ inset: 56% 0 -8%;
+ border-radius: 0 0 28px 28px;
+ background:
+ repeating-linear-gradient(90deg,
+ #f2e7d8 0,
+ #f2e7d8 16px,
+ #e0cfb8 16px,
+ #e0cfb8 32px
+ );
+}
+
+/* Side table & lamp */
+.table-grand {
+ position: absolute;
+ width: 18%;
+ height: 22%;
+ right: 18%;
+ bottom: 18%;
+ border-radius: 50% 50% 40% 40%;
+ background:
+ radial-gradient(circle at 30% 0, rgba(255,255,255,0.7), transparent 60%),
+ linear-gradient(145deg, #f7efe5 0, #d9c4aa 50%, #a0825f 100%);
+ box-shadow: 0 18px 28px rgba(0,0,0,0.85);
+}
+
+.lamp-grand {
+ position: absolute;
+ width: 60%;
+ height: 80%;
+ left: 50%;
+ bottom: 18%;
+ transform: translateX(-50%);
+}
+
+.lamp-grand-stem {
+ position: absolute;
+ width: 18%;
+ height: 38%;
+ left: 50%;
+ bottom: 20%;
+ transform: translateX(-50%);
+ background:
+ linear-gradient(180deg, #f6e7cc 0, #c9a961 55%, #8c6a36 100%);
+}
+
+.lamp-grand-shade {
+ position: absolute;
+ width: 138%;
+ height: 54%;
+ left: 50%;
+ bottom: 52%;
+ transform: translateX(-50%);
+ border-radius: 999px 999px 40% 40%;
+ background:
+ radial-gradient(circle at 50% 0, rgba(255,255,255,0.8), transparent 60%),
+ repeating-linear-gradient(135deg,
+ #f9f4ec 0,
+ #f9f4ec 12px,
+ #e0d1c4 12px,
+ #e0d1c4 24px
+ );
+ box-shadow: 0 18px 28px rgba(0,0,0,0.7);
+}
+
+/* GAME CONTROLS PANEL */
+.sidebar {
+ border-radius: var(--radius-lg);
+ background:
+ radial-gradient(circle at top right, rgba(201,169,97,0.12), transparent 60%),
+ linear-gradient(145deg, #14141b 0, #17171f 40%, #101018 100%);
+ border: var(--border-hairline);
+ box-shadow: var(--shadow-soft);
+ position: relative;
+ overflow: hidden;
+}
+
+.sidebar::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 40%),
+ radial-gradient(circle at top left, rgba(201,169,97,0.18), transparent 55%);
+ opacity: 0.75;
+ mix-blend-mode: screen;
+ pointer-events: none;
+}
+
+.sidebar-inner {
+ position: relative;
+ padding: 22px 22px 20px;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.stats-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 14px;
+ margin-bottom: 18px;
+}
+
+.stat-chip {
+ font-family: var(--font-sans);
+ font-size: var(--fs-small-label);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding: 6px 10px;
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(245,242,234,0.1);
+ background: radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 60%);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.stat-value {
+ color: var(--accent);
+ font-weight: 600;
+}
+
+.progress-bar {
+ height: 4px;
+ border-radius: 999px;
+ background: rgba(245,242,234,0.08);
+ overflow: hidden;
+ margin-bottom: 18px;
+}
+
+.progress-fill {
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(90deg, #f5f2ea 0, var(--accent) 45%, #f5f2ea 100%);
+ transition: width 320ms var(--ease-swift);
+}
+
+.question-copy {
+ margin-bottom: 18px;
+}
+
+.question-title {
+ font-family: var(--font-display);
+ font-size: 1.2rem;
+ letter-spacing: 0.10em;
+ text-transform: uppercase;
+ color: var(--text);
+ margin-bottom: 6px;
+}
+
+.question-lead {
+ font-size: 0.95rem;
+ color: var(--muted);
+}
+
+/* BUTTONS */
+.options-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 10px;
+ margin-bottom: 14px;
+}
+
+.option-btn {
+ position: relative;
+ border-radius: 999px;
+ padding: 10px 16px 11px;
+ border: 1px solid rgba(245,242,234,0.14);
+ background:
+ radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 55%),
+ linear-gradient(145deg, rgba(23,23,28,0.96) 0, rgba(16,16,22,0.96) 60%, rgba(9,9,14,0.98) 100%);
+ color: var(--text);
+ font-family: var(--font-sans);
+ font-size: 0.82rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ cursor: pointer;
+ transition:
+ background 260ms var(--ease-swift),
+ transform 260ms var(--ease-swift),
+ box-shadow 260ms var(--ease-swift),
+ border-color 260ms var(--ease-swift),
+ color 260ms var(--ease-swift);
+}
+
+.option-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.option-main {
+ font-weight: 600;
+}
+
+.option-sub {
+ text-transform: none;
+ letter-spacing: 0.08em;
+ font-size: 0.72rem;
+ color: var(--muted);
+}
+
+.option-indicator {
+ width: 28px;
+ height: 28px;
+ border-radius: 999px;
+ border: 1px solid rgba(245,242,234,0.16);
+ background:
+ radial-gradient(circle at 30% 0, rgba(255,255,255,0.65), transparent 75%),
+ linear-gradient(145deg, #25252f 0, #14141a 70%, #050508 100%);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.62rem;
+ color: var(--muted);
+ flex-shrink: 0;
+}
+
+.option-btn:hover:not([disabled]) {
+ border-color: rgba(201,169,97,0.65);
+ transform: translateY(-1px);
+ box-shadow: 0 12px 28px rgba(0,0,0,0.7);
+}
+
+.option-btn:active:not([disabled]) {
+ transform: translateY(0);
+ box-shadow: 0 4px 16px rgba(0,0,0,0.7);
+}
+
+/* States */
+.option-btn.correct {
+ border-color: rgba(120,199,129,0.75);
+ background:
+ radial-gradient(circle at top left, rgba(157,230,151,0.26), transparent 60%),
+ linear-gradient(145deg, #253626 0, #1a261d 70%, #080c09 100%);
+}
+
+.option-btn.incorrect {
+ border-color: rgba(235,132,132,0.8);
+ background:
+ radial-gradient(circle at top left, rgba(245,198,198,0.2), transparent 55%),
+ linear-gradient(145deg, #3a1f1f 0, #251215 70%, #090507 100%);
+}
+
+.option-btn.correct .option-indicator {
+ border-color: rgba(157,230,151,0.9);
+ background:
+ radial-gradient(circle at 30% 0, rgba(255,255,255,0.8), transparent 70%),
+ linear-gradient(145deg, #60b96b 0, #295934 70%, #122017 100%);
+ color: #ecf8ee;
+}
+
+.option-btn.incorrect .option-indicator {
+ border-color: rgba(245,180,180,0.85);
+ background:
+ radial-gradient(circle at 30% 0, rgba(255,255,255,0.8), transparent 70%),
+ linear-gradient(145deg, #c55955 0, #6b2423 70%, #160707 100%);
+ color: #f9ecec;
+}
+
+/* Footer row */
+.sidebar-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-top: auto;
+ padding-top: 14px;
+ border-top: 1px solid rgba(245,242,234,0.06);
+}
+
+.status-pill {
+ font-size: 0.78rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.primary-btn {
+ border-radius: var(--radius-pill);
+ padding: 9px 18px 10px;
+ border: 1px solid rgba(201,169,97,0.7);
+ background:
+ radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 65%),
+ linear-gradient(145deg, #f5f2ea 0, #d4c6a7 44%, #b89a5f 100%);
+ color: #16120b;
+ font-family: var(--font-sans);
+ font-size: 0.8rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 600;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ transition:
+ transform 200ms var(--ease-swift),
+ box-shadow 200ms var(--ease-swift),
+ background 220ms var(--ease-swift),
+ border-color 220ms var(--ease-swift);
+ box-shadow: 0 14px 28px rgba(0,0,0,0.8);
+}
+
+.primary-btn:hover:not([disabled]) {
+ transform: translateY(-1px);
+ box-shadow: 0 18px 32px rgba(0,0,0,0.9);
+}
+
+.primary-btn:active:not([disabled]) {
+ transform: translateY(0);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.8);
+}
+
+.primary-btn[disabled],
+.option-btn[disabled] {
+ cursor: default;
+ opacity: 0.7;
+}
+
+/* Fun fact */
+.fact-box {
+ margin-top: 12px;
+ padding: 12px 14px 11px;
+ border-radius: 12px;
+ border: 1px dashed rgba(245,242,234,0.22);
+ background:
+ radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 55%),
+ linear-gradient(145deg, rgba(11,11,16,0.95), rgba(17,17,23,0.96));
+ font-size: 0.83rem;
+ color: var(--muted);
+ display: none;
+}
+
+.fact-era {
+ font-family: var(--font-serif);
+ font-size: 0.9rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 4px;
+}
+
+.fact-text {
+ font-size: 0.85rem;
+}
+
+/* OVERLAY */
+.overlay {
+ position: fixed;
+ inset: 0;
+ background: radial-gradient(circle at top, rgba(10,10,14,0.96), rgba(3,3,6,0.98));
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 40;
+}
+
+.overlay.active {
+ display: flex;
+}
+
+.overlay-panel {
+ max-width: 460px;
+ margin: 0 20px;
+ border-radius: 20px;
+ border: 1px solid rgba(201,169,97,0.7);
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.24), transparent 60%),
+ linear-gradient(145deg, #14141b 0, #1b1b23 50%, #09090e 100%);
+ box-shadow: 0 28px 70px rgba(0,0,0,0.95);
+ padding: 22px 22px 18px;
+ position: relative;
+ overflow: hidden;
+}
+
+.overlay-panel::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to bottom right, rgba(255,255,255,0.12), transparent 55%);
+ opacity: 0.7;
+ mix-blend-mode: screen;
+ pointer-events: none;
+}
+
+.overlay-body {
+ position: relative;
+}
+
+.overlay-label {
+ font-size: 0.78rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 6px;
+}
+
+.overlay-title {
+ font-family: var(--font-display);
+ font-size: 1.7rem;
+ letter-spacing: 0.10em;
+ text-transform: uppercase;
+ margin-bottom: 8px;
+}
+
+.overlay-score {
+ font-size: 0.98rem;
+ color: var(--muted);
+ margin-bottom: 12px;
+}
+
+.overlay-score strong {
+ color: var(--accent);
+}
+
+.overlay-fact {
+ margin-top: 10px;
+ padding: 10px 12px;
+ border-radius: 12px;
+ border: 1px solid rgba(245,242,234,0.16);
+ background:
+ radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 60%),
+ linear-gradient(145deg, rgba(16,16,22,0.96), rgba(9,9,14,0.98));
+ font-size: 0.86rem;
+ color: var(--muted);
+}
+
+.overlay-actions {
+ margin-top: 16px;
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
+
+.secondary-btn {
+ border-radius: var(--radius-pill);
+ padding: 8px 16px 9px;
+ border: 1px solid rgba(245,242,234,0.22);
+ background:
+ radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 55%),
+ linear-gradient(145deg, #14141b 0, #09090e 85%);
+ color: var(--text);
+ font-family: var(--font-sans);
+ font-size: 0.78rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ transition:
+ transform 200ms var(--ease-swift),
+ box-shadow 200ms var(--ease-swift),
+ border-color 220ms var(--ease-swift),
+ background 220ms var(--ease-swift);
+}
+
+.secondary-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 12px 22px rgba(0,0,0,0.8);
+ border-color: rgba(245,242,234,0.34);
+}
+
+/* Utility */
+.hidden {
+ display: none !important;
+}
+</style>
+</head>
+<body>
+<header class="app-header">
+ <div class="header-inner">
+ <div class="brand-lockup">
+ <div class="wordmark" aria-label="Designer Wallcoverings">
+ <span>DESIGNER</span>
+ <span>WALLCOVERINGS</span>
+ </div>
+ </div>
+ <div class="header-meta">
+ <div class="meta-pill">
+ <span>Which Design Era?</span>
+ <span class="meta-separator" aria-hidden="true"></span>
+ <span><strong>Guess the Room</strong></span>
+ </div>
+ <div class="meta-pill">
+ <span>Best Streak</span>
+ <span class="stat-value" id="headerBestScore">0 / 8</span>
+ </div>
+ </div>
+ </div>
+</header>
+
+<main>
+ <div class="app-shell">
+ <section class="game-shell" aria-label="Design Era Guessing Game">
+ <!-- Vignette Panel -->
+ <article class="panel" aria-hidden="true">
+ <div class="panel-inner">
+ <div class="panel-heading">
+ <h1 class="panel-title">The Room</h1>
+ <div class="panel-subtitle">Rendered in CSS & gradients</div>
+ </div>
+ <div class="vignette-shell">
+ <div class="vignette-inner">
+ <div class="room room--victorian" id="room">
+ <div class="room-wall"></div>
+ <div class="room-floor"></div>
+
+ <!-- Shared elements swap via JS by toggling classes -->
+ <!-- Victorian set -->
+ <div class="frame-victorian"></div>
+ <div class="frame-victorian-inner"></div>
+ <div class="sofa-victorian">
+ <div class="sofa-victorian-back"></div>
+ <div class="sofa-victorian-leg left"></div>
+ <div class="sofa-victorian-leg right"></div>
+ </div>
+ <div class="lamp-victorian">
+ <div class="lamp-victorian-base"></div>
+ <div class="lamp-victorian-stem"></div>
+ <div class="lamp-victorian-shade"></div>
+ </div>
+
+ <!-- Art Deco set -->
+ <div class="console-deco hidden"></div>
+ <div class="console-deco-inlay hidden"></div>
+ <div class="mirror-deco hidden"></div>
+ <div class="lamp-deco hidden">
+ <div class="lamp-deco-base"></div>
+ <div class="lamp-deco-stem"></div>
+ <div class="lamp-deco-shade"></div>
+ </div>
+
+ <!-- Mid-century set -->
+ <div class="sofa-mid hidden">
+ <div class="sofa-mid-seat"></div>
+ <div class="sofa-mid-leg left"></div>
+ <div class="sofa-mid-leg mid"></div>
+ <div class="sofa-mid-leg right"></div>
+ </div>
+ <div class="plant-mid hidden">
+ <div class="plant-mid-pot"></div>
+ <div class="plant-mid-leaf left"></div>
+ <div class="plant-mid-leaf center"></div>
+ <div class="plant-mid-leaf right"></div>
+ </div>
+ <div class="clock-mid hidden">
+ <div class="clock-mid-core"></div>
+ <div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(0deg);"></div>
+ <div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(30deg);"></div>
+ <div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(60deg);"></div>
+ <div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(90deg);"></div>
+ <div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(120deg);"></div>
+ <div class="clock-mid-ray" style="transform: translate(-50%, -50%) rotate(150deg);"></div>
+ </div>
+
+ <!-- Grandmillennial set -->
+ <div class="wall-floral hidden"></div>
+ <div class="chair-grand hidden">
+ <div class="chair-grand-back"></div>
+ <div class="chair-grand-skirt"></div>
+ </div>
+ <div class="table-grand hidden">
+ <div class="lamp-grand">
+ <div class="lamp-grand-stem"></div>
+ <div class="lamp-grand-shade"></div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+
+ <!-- Controls / Sidebar -->
+ <aside class="sidebar" aria-label="Game controls and status">
+ <div class="sidebar-inner">
+ <div class="stats-row">
+ <div class="stat-chip">
+ Round
+ <span class="stat-value" id="roundLabel">1 / 8</span>
+ </div>
+ <div class="stat-chip">
+ Score
+ <span class="stat-value" id="scoreLabel">0</span>
+ </div>
+ <div class="stat-chip">
+ Best
+ <span class="stat-value" id="bestScoreLabel">0</span>
+ </div>
+ </div>
+
+ <div class="progress-bar" aria-hidden="true">
+ <div class="progress-fill" id="progressFill"></div>
+ </div>
+
+ <header class="question-copy">
+ <div class="question-title">Which design era is this?</div>
+ <div class="question-lead">
+ Study the wall treatment, silhouettes and metalwork. Then trust your inner decorator.
+ </div>
+ </header>
+
+ <div class="options-grid" role="radiogroup" aria-label="Design era choices">
+ <button class="option-btn" data-era="victorian">
+ <span class="option-label">
+ <span class="option-main">Victorian</span>
+ <span class="option-sub">High ornament, saturated hues</span>
+ </span>
+ <span class="option-indicator">Pick</span>
+ </button>
+
+ <button class="option-btn" data-era="artdeco">
+ <span class="option-label">
+ <span class="option-main">Art Deco</span>
+ <span class="option-sub">Glam geometry & chrome glamour</span>
+ </span>
+ <span class="option-indicator">Pick</span>
+ </button>
+
+ <button class="option-btn" data-era="midcentury">
+ <span class="option-label">
+ <span class="option-main">Mid-Century Modern</span>
+ <span class="option-sub">Low lines, teak & optimism</span>
+ </span>
+ <span class="option-indicator">Pick</span>
+ </button>
+
+ <button class="option-btn" data-era="grandmillennial">
+ <span class="option-label">
+ <span class="option-main">Grandmillennial</span>
+ <span class="option-sub">Chintz, pleats & pretty pattern</span>
+ </span>
+ <span class="option-indicator">Pick</span>
+ </button>
+ </div>
+
+ <div class="fact-box" id="factBox">
+ <div class="fact-era" id="factEra">Victorian</div>
+ <div class="fact-text" id="factText">
+ Victorian interiors celebrated maximalism: layered textiles, carved wood and jewel-toned walls.
+ </div>
+ </div>
+
+ <div class="sidebar-footer">
+ <div class="status-pill" id="statusPill">
+ Round 1 · Make your first guess
+ </div>
+ <button class="primary-btn" id="nextBtn" disabled>
+ <span id="nextBtnLabel">Reveal</span>
+ <span aria-hidden="true">→</span>
+ </button>
+ </div>
+ </div>
+ </aside>
+ </section>
+ </div>
+</main>
+
+<!-- Overlay -->
+<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="overlayTitle">
+ <div class="overlay-panel">
+ <div class="overlay-body">
+ <div class="overlay-label">Game Complete</div>
+ <h2 class="overlay-title" id="overlayTitle">Your Design Eye</h2>
+ <p class="overlay-score" id="overlayScore">You scored 0 out of 8.</p>
+ <p class="overlay-score" id="overlayBest">Best game so far: 0 / 8.</p>
+ <div class="overlay-fact" id="overlayFact">
+ Across Victorian, Art Deco, Mid-Century and Grandmillennial cues, you’re starting to think like a decorator —
+ notice how silhouette, pattern and metalwork betray an era.
+ </div>
+ <div class="overlay-actions">
+ <button class="secondary-btn" id="closeOverlayBtn">
+ <span>Back to Room</span>
+ </button>
+ <button class="primary-btn" id="restartBtn">
+ <span>Play Again</span>
+ <span aria-hidden="true">↻</span>
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+(function () {
+ const TOTAL_ROUNDS = 8;
+ const eras = [
+ {
+ id: "victorian",
+ name: "Victorian",
+ fact: "Victorian interiors celebrated maximalism — saturated damask walls, tufted seating, brass lamps and heavily carved frames layered into one lavish tableau."
+ },
+ {
+ id: "artdeco",
+ name: "Art Deco",
+ fact: "Art Deco design favors stepped silhouettes, fan motifs and gleaming metal inlays, echoing the glamour of early cinemas and grand city hotels."
+ },
+ {
+ id: "midcentury",
+ name: "Mid-Century Modern",
+ fact: "Mid-Century Modern rooms sit low and light on the floor: teak paneling, optimistic citrus upholstery and starburst clocks defined postwar cool."
+ },
+ {
+ id: "grandmillennial",
+ name: "Grandmillennial",
+ fact: "Grandmillennial style revives traditional chintz, skirts and pleated shades, but edited with airy palettes and a wink to nostalgia."
+ }
+ ];
+
+ let currentRound = 1;
+ let score = 0;
+ let bestScore = 0;
+ let currentEra = null;
+ let hasGuessedThisRound = false;
+ let lastFactEra = "";
+
+ const room = document.getElementById("room");
+ const options = Array.from(document.querySelectorAll(".option-btn"));
+ const factBox = document.getElementById("factBox");
+ const factEra = document.getElementById("factEra");
+ const factText = document.getElementById("factText");
+ const roundLabel = document.getElementById("roundLabel");
+ const scoreLabel = document.getElementById("scoreLabel");
+ const bestScoreLabel = document.getElementById("bestScoreLabel");
+ const headerBestScore = document.getElementById("headerBestScore");
+ const progressFill = document.getElementById("progressFill");
+ const statusPill = document.getElementById("statusPill");
+ const nextBtn = document.getElementById("nextBtn");
+ const nextBtnLabel = document.getElementById("nextBtnLabel");
+
+ const overlay = document.getElementById("overlay");
+ const overlayScore = document.getElementById("overlayScore");
+ const overlayBest = document.getElementById("overlayBest");
+ const overlayFact = document.getElementById("overlayFact");
+ const closeOverlayBtn = document.getElementById("closeOverlayBtn");
+ const restartBtn = document.getElementById("restartBtn");
+
+ function safeGetBest() {
+ try {
+ const stored = localStorage.getItem("designEraBestScore");
+ if (stored != null) {
+ const val = parseInt(stored, 10);
+ if (!isNaN(val)) return val;
+ }
+ } catch (e) { /* ignore */ }
+ return 0;
+ }
+
+ function safeSetBest(value) {
+ try {
+ localStorage.setItem("designEraBestScore", String(value));
+ } catch (e) { /* ignore */ }
+ }
+
+ function updateBestScoreDisplay() {
+ bestScoreLabel.textContent = bestScore;
+ headerBestScore.textContent = bestScore + " / " + TOTAL_ROUNDS;
+ }
+
+ function applyEraToRoom(eraId) {
+ room.classList.remove("room--victorian", "room--artdeco", "room--midcentury", "room--grandmillennial");
+ room.classList.add("room--" + eraId);
+
+ const sets = {
+ victorian: [
+ ".frame-victorian",
+ ".frame-victorian-inner",
+ ".sofa-victorian",
+ ".lamp-victorian"
+ ],
+ artdeco: [
+ ".console-deco",
+ ".console-deco-inlay",
+ ".mirror-deco",
+ ".lamp-deco"
+ ],
+ midcentury: [
+ ".sofa-mid",
+ ".plant-mid",
+ ".clock-mid"
+ ],
+ grandmillennial: [
+ ".wall-floral",
+ ".chair-grand",
+ ".table-grand"
+ ]
+ };
+
+ const allSelectors = [
+ ".frame-victorian", ".frame-victorian-inner", ".sofa-victorian", ".lamp-victorian",
+ ".console-deco", ".console-deco-inlay", ".mirror-deco", ".lamp-deco",
+ ".sofa-mid", ".plant-mid", ".clock-mid",
+ ".wall-floral", ".chair-grand", ".table-grand"
+ ];
+
+ allSelectors.forEach(sel => {
+ const el = room.querySelector(sel);
+ if (el) el.classList.add("hidden");
+ });
+
+ (sets[eraId] || []).forEach(sel => {
+ const el = room.querySelector(sel);
+ if (el) el.classList.remove("hidden");
+ });
+ }
+
+ function randomEra(excludeId) {
+ const pool = eras.filter(e => e.id !== excludeId);
+ return pool[Math.floor(Math.random() * pool.length)];
+ }
+
+ function updateProgress() {
+ const ratio = (currentRound - 1) / TOTAL_ROUNDS;
+ progressFill.style.width = (ratio * 100) + "%";
+ }
+
+ function resetOptionStates() {
+ options.forEach(btn => {
+ btn.classList.remove("correct", "incorrect");
+ btn.disabled = false;
+ const ind = btn.querySelector(".option-indicator");
+ if (ind) ind.textContent = "Pick";
+ });
+ }
+
+ function setStatus(text) {
+ statusPill.textContent = text;
+ }
+
+ function beginRound() {
+ hasGuessedThisRound = false;
+ currentEra = randomEra(currentEra ? currentEra.id : null);
+ applyEraToRoom(currentEra.id);
+ resetOptionStates();
+ factBox.style.display = "none";
+ roundLabel.textContent = currentRound + " / " + TOTAL_ROUNDS;
+ setStatus("Round " + currentRound + " · Choose an era");
+ nextBtnLabel.textContent = "Reveal";
+ nextBtn.disabled = true;
+ updateProgress();
+ }
+
+ function handleGuess(selectedId, btn) {
+ if (hasGuessedThisRound || !currentEra) return;
+ hasGuessedThisRound = true;
+
+ const isCorrect = selectedId === currentEra.id;
+ if (isCorrect) {
+ score += 1;
+ scoreLabel.textContent = score;
+ }
+
+ options.forEach(o => {
+ o.disabled = true;
+ const eraId = o.getAttribute("data-era");
+ const ind = o.querySelector(".option-indicator");
+ if (!ind) return;
+ if (eraId === currentEra.id) {
+ o.classList.add("correct");
+ ind.textContent = "Era";
+ } else if (o === btn && !isCorrect) {
+ o.classList.add("incorrect");
+ ind.textContent = "Guess";
+ } else {
+ ind.textContent = "•";
+ }
+ });
+
+ factEra.textContent = currentEra.name;
+ factText.textContent = currentEra.fact;
+ factBox.style.display = "block";
+ lastFactEra = currentEra.name;
+
+ if (isCorrect) {
+ setStatus("Correct — that was " + currentEra.name + ".");
+ } else {
+ setStatus("Not quite — it was " + currentEra.name + ".");
+ }
+
+ nextBtn.disabled = false;
+ if (currentRound === TOTAL_ROUNDS) {
+ nextBtnLabel.textContent = "View results";
+ } else {
+ nextBtnLabel.textContent = "Next room";
+ }
+ }
+
+ function openOverlay() {
+ overlay.classList.add("active");
+ overlayScore.textContent = "You scored " + score + " out of " + TOTAL_ROUNDS + ".";
+ const previousBest = bestScore;
+ if (score > bestScore) {
+ bestScore = score;
+ safeSetBest(bestScore);
+ updateBestScoreDisplay();
+ }
+ overlayBest.textContent = "Best game so far: " + bestScore + " / " + TOTAL_ROUNDS + ".";
+
+ let line;
+ const ratio = score / TOTAL_ROUNDS;
+ if (ratio === 1) {
+ line = "Flawless. You’re reading silhouettes, finishes and pattern the way a senior decorator does.";
+ } else if (ratio >= 0.75) {
+ line = "Beautiful work — your eye is picking up on the quiet clues each era leaves in its joinery and ornament.";
+ } else if (ratio >= 0.5) {
+ line = "A promising eye. Keep watching for height, hardware and wall treatments; they rarely lie about an era.";
+ } else {
+ line = "Every misstep is training. Linger on the silhouettes and metals — they’ll start to tell you the decade.";
+ }
+ const eraMention = lastFactEra ? ("That last vignette was " + lastFactEra + " — notice how its palette and shapes linger.") : "";
+ overlayFact.textContent = line + " " + eraMention;
+ }
+
+ function closeOverlay() {
+ overlay.classList.remove("active");
+ }
+
+ function nextAction() {
+ if (!hasGuessedThisRound) return;
+ if (currentRound >= TOTAL_ROUNDS) {
+ openOverlay();
+ } else {
+ currentRound += 1;
+ beginRound();
+ }
+ }
+
+ function restartGame() {
+ score = 0;
+ currentRound = 1;
+ scoreLabel.textContent = score;
+ progressFill.style.width = "0%";
+ closeOverlay();
+ beginRound();
+ }
+
+ function init() {
+ bestScore = safeGetBest();
+ updateBestScoreDisplay();
+
+ options.forEach(btn => {
+ btn.addEventListener("click", function () {
+ const eraId = btn.getAttribute("data-era");
+ if (!eraId) return;
+ handleGuess(eraId, btn);
+ });
+ });
+
+ nextBtn.addEventListener("click", nextAction);
+ closeOverlayBtn.addEventListener("click", closeOverlay);
+ restartBtn.addEventListener("click", restartGame);
+
+ // Keyboard: space/enter on overlay buttons trigger click
+ [closeOverlayBtn, restartBtn].forEach(el => {
+ el.addEventListener("keyup", function (e) {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ el.click();
+ }
+ });
+ });
+
+ beginRound();
+ }
+
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", init);
+ } else {
+ init();
+ }
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/gpt.png b/data/artifacts/0219528ac7d7/gpt.png
new file mode 100644
index 0000000..7a896c1
Binary files /dev/null and b/data/artifacts/0219528ac7d7/gpt.png differ
diff --git a/data/artifacts/0219528ac7d7/grok.html b/data/artifacts/0219528ac7d7/grok.html
new file mode 100644
index 0000000..9a08893
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/grok.html
@@ -0,0 +1,1545 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Which Design Era? — 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-subtle: rgba(245, 242, 234, 0.08);
+ --shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
+ --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
+ --ease: cubic-bezier(.22, .9, .24, 1);
+ --ease-out: cubic-bezier(.22, 1, .36, 1);
+ --ease-scene: cubic-bezier(.77, 0, .18, 1);
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', Futura, 'Helvetica Neue', sans-serif;
+ --radius: 2px;
+ --header-h: 72px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+ height: 100%;
+ background: var(--bg);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+ overflow-x: hidden;
+}
+
+/* ── Header / Wordmark ── */
+header.brand-bar {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: var(--header-h);
+ background: rgba(245, 242, 234, 0.97);
+ border-bottom: 1px solid rgba(28, 26, 23, 0.12);
+ display: flex;
+ align-items: center;
+ padding: 0 28px;
+ backdrop-filter: blur(12px);
+}
+
+.wordmark {
+ font-family: var(--serif);
+ font-size: 22px;
+ font-weight: 500;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ line-height: 1.15;
+ white-space: normal;
+ max-width: 280px;
+}
+
+/* ── App shell ── */
+.app {
+ min-height: 100vh;
+ padding: calc(var(--header-h) + 36px) 24px 64px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ max-width: 920px;
+ margin: 0 auto;
+}
+
+/* ── Meta bar (score / round) ── */
+.meta-bar {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ margin-bottom: 28px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid var(--line-subtle);
+}
+
+.meta-label {
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.meta-value {
+ font-family: var(--serif);
+ font-size: 28px;
+ color: var(--ink);
+ margin-left: 10px;
+ font-weight: 400;
+}
+
+.meta-group { display: flex; align-items: baseline; gap: 28px; }
+
+/* ── Title block ── */
+.game-title {
+ text-align: center;
+ margin-bottom: 32px;
+}
+
+.game-title h1 {
+ font-family: var(--serif);
+ font-size: 38px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ color: var(--ink);
+ line-height: 1.15;
+ margin-bottom: 8px;
+}
+
+.game-title p {
+ font-size: 13px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+/* ── Vignette stage ── */
+.stage {
+ width: 100%;
+ max-width: 640px;
+ aspect-ratio: 16 / 11;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ box-shadow: var(--shadow);
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 36px;
+}
+
+.vignette {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 0.7s var(--ease-out);
+ pointer-events: none;
+}
+
+.vignette.active {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+/* ══════════════════════════════════════
+ ERA 1 — VICTORIAN
+══════════════════════════════════════ */
+.era-victorian {
+ background:
+ radial-gradient(ellipse at 50% 0%, #2a1810 0%, transparent 55%),
+ linear-gradient(180deg, #1a0e0a 0%, #0f0806 100%);
+}
+
+/* Damask wallpaper */
+.era-victorian .wall {
+ position: absolute;
+ inset: 0 0 28% 0;
+ background-color: #3d1f18;
+ background-image:
+ radial-gradient(ellipse 18px 22px at 50% 30%, rgba(139, 90, 43, 0.55) 0%, transparent 70%),
+ radial-gradient(ellipse 10px 14px at 50% 55%, rgba(180, 120, 60, 0.35) 0%, transparent 65%),
+ radial-gradient(circle 4px at 50% 72%, rgba(201, 169, 97, 0.4) 0%, transparent 100%),
+ radial-gradient(ellipse 18px 22px at 0% 80%, rgba(139, 90, 43, 0.4) 0%, transparent 70%),
+ radial-gradient(ellipse 18px 22px at 100% 80%, rgba(139, 90, 43, 0.4) 0%, transparent 70%);
+ background-size: 48px 72px;
+}
+
+.era-victorian .wainscot {
+ position: absolute;
+ bottom: 28%;
+ left: 0; right: 0;
+ height: 18%;
+ background: linear-gradient(180deg, #2c1810 0%, #1e100a 100%);
+ border-top: 3px solid #5c3a20;
+ box-shadow: inset 0 4px 0 #4a2e18;
+}
+
+.era-victorian .wainscot::after {
+ content: '';
+ position: absolute;
+ top: 8px; left: 0; right: 0; bottom: 8px;
+ border-top: 1px solid rgba(201, 169, 97, 0.25);
+ border-bottom: 1px solid rgba(201, 169, 97, 0.15);
+ background:
+ repeating-linear-gradient(90deg,
+ transparent 0, transparent 60px,
+ rgba(92, 58, 32, 0.6) 60px, rgba(92, 58, 32, 0.6) 62px);
+}
+
+.era-victorian .floor {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 28%;
+ background:
+ repeating-linear-gradient(90deg,
+ #1a1008 0px, #1a1008 40px,
+ #221408 40px, #221408 80px);
+ background-image:
+ linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 40%),
+ repeating-linear-gradient(90deg, #1a1008 0 38px, #0e0a04 38px 40px, #221408 40px 78px, #0e0a04 78px 80px);
+}
+
+/* Ornate fireplace */
+.era-victorian .fireplace {
+ position: absolute;
+ bottom: 28%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 38%;
+ height: 42%;
+}
+
+.era-victorian .fp-mantel {
+ position: absolute;
+ top: 0; left: -8%; right: -8%;
+ height: 14%;
+ background: linear-gradient(180deg, #6b4423 0%, #4a2e14 40%, #3d2510 100%);
+ border: 1px solid #8b5a2b;
+ box-shadow: 0 2px 0 #c9a96144;
+}
+
+.era-victorian .fp-mantel::before {
+ content: '';
+ position: absolute;
+ top: -6px; left: 10%; right: 10%;
+ height: 6px;
+ background: #5c3a18;
+ border: 1px solid #8b5a2b;
+}
+
+.era-victorian .fp-body {
+ position: absolute;
+ top: 14%; left: 0; right: 0; bottom: 0;
+ background: linear-gradient(180deg, #3d2510, #2a180c);
+ border-left: 8px solid #4a2e14;
+ border-right: 8px solid #4a2e14;
+}
+
+.era-victorian .fp-opening {
+ position: absolute;
+ top: 22%; left: 18%; right: 18%; bottom: 8%;
+ background: radial-gradient(ellipse at 50% 80%, #c45a12 0%, #6b2008 40%, #1a0804 75%);
+ border: 2px solid #5c3a18;
+ box-shadow: inset 0 0 20px #000;
+}
+
+.era-victorian .fp-opening::after {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 15%; right: 15%;
+ height: 30%;
+ background: linear-gradient(0deg, transparent, rgba(255,140,40,0.5));
+ border-radius: 50% 50% 0 0;
+ animation: fire-flicker 1.4s ease-in-out infinite alternate;
+}
+
+@keyframes fire-flicker {
+ from { opacity: 0.7; transform: scaleY(1); }
+ to { opacity: 1; transform: scaleY(1.15); }
+}
+
+/* Portrait frame */
+.era-victorian .portrait {
+ position: absolute;
+ top: 12%;
+ left: 10%;
+ width: 14%;
+ aspect-ratio: 3/4;
+ background: linear-gradient(160deg, #4a3020, #2a1810);
+ border: 4px solid #8b5a2b;
+ box-shadow: 0 0 0 1px #c9a96155, 2px 4px 12px rgba(0,0,0,0.5);
+}
+
+.era-victorian .portrait::after {
+ content: '';
+ position: absolute;
+ inset: 6%;
+ background:
+ radial-gradient(ellipse at 50% 35%, #6b4a30 0%, transparent 50%),
+ radial-gradient(ellipse at 50% 70%, #3d2818 0%, #1a1008 100%);
+ border: 1px solid #5c3a20;
+}
+
+/* Candelabra silhouette */
+.era-victorian .candelabra {
+ position: absolute;
+ top: 18%;
+ right: 12%;
+ width: 10%;
+ height: 28%;
+}
+
+.era-victorian .candelabra::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 40%;
+ width: 20%; height: 70%;
+ background: #c9a961;
+ border-radius: 1px;
+}
+
+.era-victorian .candelabra::after {
+ content: '';
+ position: absolute;
+ top: 20%; left: 10%; right: 10%;
+ height: 3px;
+ background: #c9a961;
+ box-shadow:
+ -12px 8px 0 -1px #c9a961,
+ 12px 8px 0 -1px #c9a961,
+ 0 -14px 0 2px #c9a961,
+ -12px -6px 0 1px #e8c878,
+ 12px -6px 0 1px #e8c878,
+ 0 -22px 0 1px #e8c878;
+}
+
+/* ══════════════════════════════════════
+ ERA 2 — ART DECO
+══════════════════════════════════════ */
+.era-deco {
+ background: linear-gradient(180deg, #0a0a12 0%, #12121e 60%, #0e0e18 100%);
+}
+
+.era-deco .wall {
+ position: absolute;
+ inset: 0 0 30% 0;
+ background:
+ /* sunburst */
+ conic-gradient(from 200deg at 50% 100%,
+ transparent 0deg,
+ rgba(201, 169, 97, 0.07) 8deg,
+ transparent 16deg,
+ rgba(201, 169, 97, 0.07) 24deg,
+ transparent 32deg,
+ rgba(201, 169, 97, 0.07) 40deg,
+ transparent 48deg,
+ rgba(201, 169, 97, 0.07) 56deg,
+ transparent 64deg,
+ rgba(201, 169, 97, 0.07) 72deg,
+ transparent 80deg,
+ rgba(201, 169, 97, 0.07) 88deg,
+ transparent 96deg,
+ rgba(201, 169, 97, 0.07) 104deg,
+ transparent 112deg,
+ rgba(201, 169, 97, 0.07) 120deg,
+ transparent 180deg),
+ linear-gradient(180deg, #0e0e1a, #16162a);
+}
+
+/* Stepped geometric frieze */
+.era-deco .frieze {
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 12%;
+ background: linear-gradient(180deg, #1a1a2e, #12122a);
+ border-bottom: 2px solid var(--accent);
+ overflow: hidden;
+}
+
+.era-deco .frieze::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(90deg,
+ transparent 0 28px,
+ var(--accent) 28px 29px,
+ transparent 29px 56px),
+ repeating-linear-gradient(90deg,
+ transparent 0 14px,
+ rgba(201,169,97,0.3) 14px 15px,
+ transparent 15px 28px);
+ opacity: 0.7;
+}
+
+.era-deco .frieze::after {
+ content: '';
+ position: absolute;
+ bottom: 4px; left: 50%;
+ transform: translateX(-50%);
+ width: 80px; height: 18px;
+ background:
+ linear-gradient(135deg, transparent 40%, var(--accent) 40% 60%, transparent 60%),
+ linear-gradient(45deg, transparent 40%, var(--accent) 40% 60%, transparent 60%);
+ background-size: 20px 18px;
+ opacity: 0.9;
+}
+
+.era-deco .floor {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 30%;
+ background:
+ linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%),
+ repeating-linear-gradient(90deg, #1a1a28 0 40px, #12121e 40px 41px),
+ linear-gradient(180deg, #1c1c2e, #141422);
+ border-top: 1px solid rgba(201,169,97,0.35);
+}
+
+/* Chevron floor pattern */
+.era-deco .floor::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(105deg,
+ transparent 0 18px,
+ rgba(201,169,97,0.06) 18px 19px);
+ opacity: 0.8;
+}
+
+/* Fan / shell motif centerpiece */
+.era-deco .fan {
+ position: absolute;
+ bottom: 30%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 42%;
+ height: 48%;
+}
+
+.era-deco .fan-arc {
+ position: absolute;
+ bottom: 0; left: 50%;
+ transform: translateX(-50%);
+ width: 100%; height: 90%;
+ border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+ border: 2px solid var(--accent);
+ border-bottom: none;
+ background:
+ repeating-conic-gradient(from 270deg at 50% 100%,
+ transparent 0deg 6deg,
+ rgba(201,169,97,0.12) 6deg 12deg);
+ box-shadow:
+ inset 0 0 0 8px transparent,
+ inset 0 0 0 9px rgba(201,169,97,0.4);
+}
+
+.era-deco .fan-arc::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 15%; right: 15%;
+ height: 70%;
+ border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+ border: 1px solid rgba(201,169,97,0.5);
+ border-bottom: none;
+}
+
+.era-deco .fan-arc::after {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 30%; right: 30%;
+ height: 45%;
+ border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+ border: 1px solid rgba(201,169,97,0.35);
+ border-bottom: none;
+ background: radial-gradient(ellipse at 50% 100%, rgba(201,169,97,0.2), transparent 70%);
+}
+
+/* Black lacquer console */
+.era-deco .console {
+ position: absolute;
+ bottom: 30%;
+ left: 8%;
+ width: 18%;
+ height: 22%;
+ background: linear-gradient(180deg, #1e1e2a, #0a0a12);
+ border: 1px solid rgba(201,169,97,0.5);
+ border-bottom: none;
+}
+
+.era-deco .console::before {
+ content: '';
+ position: absolute;
+ top: 0; left: -4%; right: -4%;
+ height: 12%;
+ background: var(--accent);
+}
+
+.era-deco .console::after {
+ content: '';
+ position: absolute;
+ bottom: -20%; left: 10%; right: 10%;
+ height: 20%;
+ border-left: 2px solid var(--accent);
+ border-right: 2px solid var(--accent);
+}
+
+/* Skyscraper mirror */
+.era-deco .mirror {
+ position: absolute;
+ top: 18%;
+ right: 10%;
+ width: 12%;
+ height: 40%;
+ background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2a 100%);
+ border: 1px solid var(--accent);
+ clip-path: polygon(20% 0%, 80% 0%, 100% 12%, 100% 100%, 0% 100%, 0% 12%);
+ box-shadow: inset 0 0 20px rgba(201,169,97,0.15);
+}
+
+.era-deco .mirror::after {
+ content: '';
+ position: absolute;
+ inset: 8%;
+ background: linear-gradient(160deg, rgba(180,200,255,0.12), transparent 60%);
+ border: 1px solid rgba(201,169,97,0.25);
+ clip-path: polygon(18% 0%, 82% 0%, 100% 10%, 100% 100%, 0% 100%, 0% 10%);
+}
+
+/* ══════════════════════════════════════
+ ERA 3 — MID-CENTURY MODERN
+══════════════════════════════════════ */
+.era-mcm {
+ background: linear-gradient(180deg, #e8dcc8 0%, #d4c4a8 100%);
+}
+
+.era-mcm .wall {
+ position: absolute;
+ inset: 0 0 32% 0;
+ background:
+ /* atomic / starburst dots */
+ radial-gradient(circle 2px at 20% 30%, #c45a3a44 0%, transparent 100%),
+ radial-gradient(circle 2px at 70% 20%, #c45a3a33 0%, transparent 100%),
+ radial-gradient(circle 1.5px at 45% 55%, #2a5a4a33 0%, transparent 100%),
+ radial-gradient(circle 2px at 85% 45%, #c45a3a33 0%, transparent 100%),
+ radial-gradient(circle 1.5px at 15% 70%, #2a5a4a33 0%, transparent 100%),
+ linear-gradient(180deg, #e8dcc8, #dccdb0);
+}
+
+/* Walnut panel accent wall */
+.era-mcm .panel-wall {
+ position: absolute;
+ top: 0; right: 0;
+ width: 32%;
+ bottom: 32%;
+ background:
+ repeating-linear-gradient(90deg,
+ #6b4430 0px, #7a5040 8px, #5c3a28 16px, #6b4430 24px);
+ border-left: 3px solid #4a2e1c;
+}
+
+.era-mcm .floor {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 32%;
+ background:
+ linear-gradient(180deg, rgba(80,50,30,0.2) 0%, transparent 20%),
+ repeating-linear-gradient(90deg,
+ #c4a882 0px, #c4a882 48px,
+ #b89870 48px, #b89870 50px);
+}
+
+/* Boomerang / kidney coffee table */
+.era-mcm .table {
+ position: absolute;
+ bottom: 28%;
+ left: 28%;
+ width: 30%;
+ height: 12%;
+ background: #5c3a24;
+ border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
+ box-shadow: 0 6px 0 #3d2414, 0 10px 20px rgba(0,0,0,0.25);
+ z-index: 2;
+}
+
+.era-mcm .table::before {
+ content: '';
+ position: absolute;
+ bottom: -18px; left: 20%;
+ width: 4px; height: 18px;
+ background: #3d2414;
+ box-shadow: 40px 0 0 #3d2414, 70px 0 0 #3d2414;
+ border-radius: 1px;
+}
+
+/* Eames-style lounge */
+.era-mcm .lounge {
+ position: absolute;
+ bottom: 32%;
+ left: 8%;
+ width: 22%;
+ height: 28%;
+ z-index: 1;
+}
+
+.era-mcm .lounge-seat {
+ position: absolute;
+ bottom: 20%; left: 0; right: 10%;
+ height: 45%;
+ background: #c45a3a;
+ border-radius: 8px 8px 4px 4px;
+ box-shadow: 0 4px 0 #8b3a22;
+}
+
+.era-mcm .lounge-back {
+ position: absolute;
+ top: 5%; left: 5%; right: 5%;
+ height: 50%;
+ background: #c45a3a;
+ border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
+ transform: perspective(200px) rotateX(8deg);
+ box-shadow: inset 0 -8px 0 #a84830;
+}
+
+.era-mcm .lounge-leg {
+ position: absolute;
+ bottom: 0;
+ width: 3px; height: 22%;
+ background: #2a2a2a;
+ border-radius: 1px;
+}
+.era-mcm .lounge-leg.l { left: 15%; transform: rotate(-8deg); }
+.era-mcm .lounge-leg.r { right: 20%; transform: rotate(8deg); }
+
+/* Sphere / bubble lamp */
+.era-mcm .lamp {
+ position: absolute;
+ top: 10%;
+ left: 42%;
+ width: 14%;
+ aspect-ratio: 1;
+ border-radius: 50%;
+ background: radial-gradient(circle at 38% 35%, #fff8e8 0%, #f0e0c0 40%, #d4c090 100%);
+ box-shadow: 0 0 40px rgba(255, 230, 180, 0.5), 0 0 80px rgba(255, 200, 100, 0.2);
+ z-index: 3;
+}
+
+.era-mcm .lamp::after {
+ content: '';
+ position: absolute;
+ top: 100%; left: 47%;
+ width: 2px; height: 40px;
+ background: #2a2a2a;
+}
+
+/* Plant / organic form */
+.era-mcm .plant {
+ position: absolute;
+ bottom: 32%;
+ right: 36%;
+ width: 10%;
+ height: 24%;
+ z-index: 2;
+}
+
+.era-mcm .plant-pot {
+ position: absolute;
+ bottom: 0; left: 20%; right: 20%;
+ height: 28%;
+ background: #2a5a4a;
+ border-radius: 2px 2px 4px 4px;
+ clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
+}
+
+.era-mcm .plant-leaf {
+ position: absolute;
+ bottom: 25%;
+ width: 40%; height: 55%;
+ background: #3a7a5a;
+ border-radius: 0 80% 0 80%;
+}
+.era-mcm .plant-leaf.a { left: 10%; transform: rotate(-25deg); }
+.era-mcm .plant-leaf.b { left: 35%; transform: rotate(5deg); background: #2a6a4a; height: 65%; }
+.era-mcm .plant-leaf.c { right: 10%; transform: rotate(30deg) scaleX(-1); }
+
+/* Starburst clock */
+.era-mcm .clock {
+ position: absolute;
+ top: 16%;
+ left: 14%;
+ width: 11%;
+ aspect-ratio: 1;
+}
+
+.era-mcm .clock-face {
+ position: absolute;
+ inset: 28%;
+ border-radius: 50%;
+ background: #f5f0e4;
+ border: 2px solid #2a2a2a;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.era-mcm .clock-rays {
+ position: absolute;
+ inset: 0;
+ background:
+ conic-gradient(from 0deg,
+ #2a2a2a 0deg 2deg, transparent 2deg 28deg,
+ #2a2a2a 28deg 30deg, transparent 30deg 58deg,
+ #2a2a2a 58deg 60deg, transparent 60deg 88deg,
+ #2a2a2a 88deg 90deg, transparent 90deg 118deg,
+ #2a2a2a 118deg 120deg, transparent 120deg 148deg,
+ #2a2a2a 148deg 150deg, transparent 150deg 178deg,
+ #2a2a2a 178deg 180deg, transparent 180deg 208deg,
+ #2a2a2a 208deg 210deg, transparent 210deg 238deg,
+ #2a2a2a 238deg 240deg, transparent 240deg 268deg,
+ #2a2a2a 268deg 270deg, transparent 270deg 298deg,
+ #2a2a2a 298deg 300deg, transparent 300deg 328deg,
+ #2a2a2a 328deg 330deg, transparent 330deg 358deg,
+ #2a2a2a 358deg 360deg);
+ border-radius: 50%;
+}
+
+/* ══════════════════════════════════════
+ ERA 4 — GRANDMILLENNIAL
+══════════════════════════════════════ */
+.era-grand {
+ background: linear-gradient(180deg, #f0ebe0 0%, #e6dfd0 100%);
+}
+
+.era-grand .wall {
+ position: absolute;
+ inset: 0 0 30% 0;
+ /* Chinoiserie / floral toile suggestion via layered soft motifs */
+ background-color: #e8e0d0;
+ background-image:
+ radial-gradient(ellipse 20px 28px at 25% 30%, rgba(90, 110, 80, 0.18) 0%, transparent 70%),
+ radial-gradient(ellipse 14px 18px at 28% 42%, rgba(140, 80, 70, 0.12) 0%, transparent 70%),
+ radial-gradient(ellipse 20px 28px at 75% 25%, rgba(90, 110, 80, 0.16) 0%, transparent 70%),
+ radial-gradient(ellipse 14px 18px at 72% 38%, rgba(140, 80, 70, 0.1) 0%, transparent 70%),
+ radial-gradient(ellipse 20px 28px at 50% 60%, rgba(90, 110, 80, 0.14) 0%, transparent 70%),
+ radial-gradient(ellipse 12px 16px at 15% 70%, rgba(70, 90, 110, 0.1) 0%, transparent 70%),
+ radial-gradient(ellipse 12px 16px at 88% 65%, rgba(70, 90, 110, 0.1) 0%, transparent 70%),
+ radial-gradient(circle 3px at 30% 20%, rgba(180, 140, 60, 0.25) 0%, transparent 100%),
+ radial-gradient(circle 3px at 70% 55%, rgba(180, 140, 60, 0.2) 0%, transparent 100%);
+ background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+}
+
+/* Scalloped valance */
+.era-grand .valance {
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 10%;
+ background: #6b4a5a;
+ overflow: hidden;
+ z-index: 4;
+}
+
+.era-grand .valance::after {
+ content: '';
+ position: absolute;
+ bottom: -10px; left: 0; right: 0;
+ height: 20px;
+ background:
+ radial-gradient(ellipse 18px 12px at 18px 0px, #6b4a5a 0%, #6b4a5a 70%, transparent 71%),
+ radial-gradient(ellipse 18px 12px at 54px 0px, #6b4a5a 0%, #6b4a5a 70%, transparent 71%);
+ background-size: 36px 20px;
+ background-repeat: repeat-x;
+}
+
+.era-grand .floor {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 30%;
+ background:
+ linear-gradient(180deg, rgba(60,40,30,0.12) 0%, transparent 25%),
+ /* herringbone suggestion */
+ repeating-linear-gradient(45deg, #d4c8b0 0 10px, #c8bca0 10px 11px, #d4c8b0 11px 21px, #bcb090 21px 22px),
+ repeating-linear-gradient(-45deg, #d0c4a8 0 10px, #c4b898 10px 11px, #d0c4a8 11px 21px, #b8ac90 21px 22px);
+ background-blend-mode: multiply;
+ border-top: 1px solid rgba(100,80,60,0.2);
+}
+
+/* Skirted sofa */
+.era-grand .sofa {
+ position: absolute;
+ bottom: 30%;
+ left: 18%;
+ width: 48%;
+ height: 28%;
+ z-index: 2;
+}
+
+.era-grand .sofa-body {
+ position: absolute;
+ bottom: 18%; left: 0; right: 0;
+ height: 50%;
+ background: #7a9aaa;
+ border-radius: 6px 6px 0 0;
+ box-shadow: inset 0 8px 0 #8aAABB;
+}
+
+.era-grand .sofa-back {
+ position: absolute;
+ top: 0; left: 4%; right: 4%;
+ height: 48%;
+ background: #7a9aaa;
+ border-radius: 8px 8px 0 0;
+ box-shadow: inset 0 -4px 0 #6a8a9a;
+}
+
+.era-grand .sofa-skirt {
+ position: absolute;
+ bottom: 0; left: -2%; right: -2%;
+ height: 22%;
+ background:
+ repeating-linear-gradient(90deg,
+ #7a9aaa 0 12px,
+ #6a8a9a 12px 13px,
+ #7a9aaa 13px 25px,
+ #8aAABB 25px 26px);
+ border-radius: 0 0 3px 3px;
+}
+
+.era-grand .sofa-arm {
+ position: absolute;
+ bottom: 18%;
+ width: 12%; height: 55%;
+ background: #6a8a9a;
+ border-radius: 50% 50% 2px 2px;
+}
+.era-grand .sofa-arm.l { left: -4%; }
+.era-grand .sofa-arm.r { right: -4%; }
+
+/* Throw pillows */
+.era-grand .pillow {
+ position: absolute;
+ bottom: 48%;
+ width: 12%; height: 22%;
+ border-radius: 4px;
+ z-index: 3;
+}
+.era-grand .pillow.p1 {
+ left: 22%;
+ background: #c45a5a;
+ transform: rotate(-6deg);
+ box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
+}
+.era-grand .pillow.p2 {
+ left: 38%;
+ background:
+ repeating-linear-gradient(45deg, #d4a840 0 3px, #e8c860 3px 6px);
+ transform: rotate(4deg);
+}
+.era-grand .pillow.p3 {
+ left: 52%;
+ background: #5a7a6a;
+ transform: rotate(-3deg);
+}
+
+/* Rattan / cane side table */
+.era-grand .side-table {
+ position: absolute;
+ bottom: 30%;
+ right: 12%;
+ width: 14%;
+ height: 20%;
+ z-index: 2;
+}
+
+.era-grand .st-top {
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 12%;
+ background: #c4a870;
+ border-radius: 2px;
+ box-shadow: 0 2px 0 #a88850;
+}
+
+.era-grand .st-body {
+ position: absolute;
+ top: 12%; left: 8%; right: 8%; bottom: 0;
+ background:
+ repeating-linear-gradient(0deg, transparent 0 4px, rgba(160,130,80,0.35) 4px 5px),
+ repeating-linear-gradient(90deg, transparent 0 4px, rgba(160,130,80,0.35) 4px 5px),
+ #e0d0b0;
+ border: 1px solid #c4a870;
+ border-radius: 0 0 3px 3px;
+}
+
+/* Ginger jar */
+.era-grand .jar {
+ position: absolute;
+ bottom: 50%;
+ right: 14%;
+ width: 8%;
+ height: 18%;
+ z-index: 3;
+ background:
+ radial-gradient(ellipse at 40% 30%, #e8f0f4 0%, #6a9aaa 40%, #4a7a8a 100%);
+ border-radius: 40% 40% 35% 35% / 30% 30% 50% 50%;
+ box-shadow: inset -3px -3px 8px rgba(0,0,0,0.15);
+}
+
+.era-grand .jar::before {
+ content: '';
+ position: absolute;
+ top: -12%; left: 25%; right: 25%;
+ height: 16%;
+ background: #4a7a8a;
+ border-radius: 2px;
+}
+
+.era-grand .jar::after {
+ content: '';
+ position: absolute;
+ top: 20%; left: 15%; right: 15%;
+ height: 25%;
+ border-top: 2px solid rgba(255,255,255,0.35);
+ border-bottom: 2px solid rgba(255,255,255,0.25);
+}
+
+/* Gallery wall frames */
+.era-grand .frame {
+ position: absolute;
+ background: #f5f0e4;
+ border: 3px solid #8b6a3a;
+ box-shadow: 1px 2px 6px rgba(0,0,0,0.12);
+ z-index: 1;
+}
+.era-grand .frame.f1 {
+ top: 16%; left: 8%;
+ width: 11%; aspect-ratio: 1;
+ background: linear-gradient(160deg, #d4c8a0, #b8a880);
+}
+.era-grand .frame.f2 {
+ top: 18%; left: 22%;
+ width: 9%; aspect-ratio: 3/4;
+ border-color: #5a6a5a;
+ background: linear-gradient(180deg, #8aaa9a, #6a8a7a);
+}
+.era-grand .frame.f3 {
+ top: 14%; right: 30%;
+ width: 10%; aspect-ratio: 4/3;
+ border-color: #8b4a4a;
+ background: linear-gradient(140deg, #c4a0a0, #a88080);
+}
+
+/* ── Guess buttons ── */
+.guesses {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+ width: 100%;
+ max-width: 640px;
+ margin-bottom: 24px;
+}
+
+.guess-btn {
+ font-family: var(--sans);
+ font-size: 12px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--ink);
+ background: transparent;
+ border: 1px solid var(--line);
+ padding: 16px 20px;
+ cursor: pointer;
+ transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
+ position: relative;
+ overflow: hidden;
+}
+
+.guess-btn:hover:not(:disabled) {
+ background: rgba(201, 169, 97, 0.1);
+ border-color: var(--accent);
+ color: var(--accent);
+}
+
+.guess-btn:active:not(:disabled) {
+ transform: scale(0.98);
+}
+
+.guess-btn:disabled {
+ cursor: default;
+ opacity: 0.45;
+}
+
+.guess-btn.correct {
+ background: rgba(201, 169, 97, 0.18);
+ border-color: var(--accent);
+ color: var(--accent);
+ opacity: 1;
+}
+
+.guess-btn.wrong {
+ background: rgba(180, 60, 60, 0.12);
+ border-color: rgba(180, 60, 60, 0.5);
+ color: #c07070;
+ opacity: 1;
+}
+
+/* ── Fact reveal panel ── */
+.fact-panel {
+ width: 100%;
+ max-width: 640px;
+ min-height: 0;
+ max-height: 0;
+ overflow: hidden;
+ opacity: 0;
+ transition: max-height 0.6s var(--ease-scene), opacity 0.5s var(--ease), margin 0.5s var(--ease);
+ margin-bottom: 0;
+ border: 1px solid transparent;
+}
+
+.fact-panel.show {
+ max-height: 220px;
+ opacity: 1;
+ margin-bottom: 24px;
+ border-color: var(--line);
+ background: var(--surface);
+ padding: 24px 28px;
+ box-shadow: var(--shadow-soft);
+}
+
+.fact-panel .fact-era {
+ font-family: var(--serif);
+ font-size: 24px;
+ color: var(--accent);
+ margin-bottom: 8px;
+ letter-spacing: -0.01em;
+}
+
+.fact-panel .fact-text {
+ font-size: 15px;
+ line-height: 1.65;
+ color: var(--ink);
+ opacity: 0.85;
+ max-width: 60ch;
+}
+
+.fact-panel .next-row {
+ margin-top: 18px;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.btn-next {
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--bg);
+ background: var(--accent);
+ border: none;
+ padding: 12px 28px;
+ cursor: pointer;
+ transition: background 0.3s var(--ease), transform 0.3s var(--ease);
+}
+
+.btn-next:hover {
+ background: #d4b870;
+ transform: translateY(-1px);
+}
+
+/* ── Overlays ── */
+.overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ background: rgba(13, 13, 15, 0.88);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.5s var(--ease);
+ backdrop-filter: blur(8px);
+}
+
+.overlay.show {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.overlay-card {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ box-shadow: var(--shadow);
+ padding: 48px 52px;
+ max-width: 440px;
+ width: 90%;
+ text-align: center;
+ transform: translateY(16px);
+ transition: transform 0.55s var(--ease-out);
+}
+
+.overlay.show .overlay-card {
+ transform: translateY(0);
+}
+
+.overlay-card .eyebrow {
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 16px;
+}
+
+.overlay-card h2 {
+ font-family: var(--serif);
+ font-size: 38px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ color: var(--ink);
+ line-height: 1.15;
+ margin-bottom: 12px;
+}
+
+.overlay-card .score-big {
+ font-family: var(--serif);
+ font-size: 50px;
+ color: var(--accent);
+ line-height: 1;
+ margin: 20px 0 8px;
+}
+
+.overlay-card .score-sub {
+ font-size: 13px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 28px;
+}
+
+.overlay-card p.blurb {
+ font-size: 15px;
+ color: var(--ink);
+ opacity: 0.8;
+ line-height: 1.65;
+ margin-bottom: 32px;
+}
+
+.btn-primary {
+ font-family: var(--sans);
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--bg);
+ background: var(--accent);
+ border: none;
+ padding: 14px 36px;
+ cursor: pointer;
+ transition: background 0.3s var(--ease), transform 0.3s var(--ease);
+}
+
+.btn-primary:hover {
+ background: #d4b870;
+ transform: translateY(-1px);
+}
+
+.best-badge {
+ display: inline-block;
+ margin-top: 16px;
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ border-top: 1px solid var(--line-subtle);
+ padding-top: 16px;
+ width: 100%;
+}
+
+/* ── Progress dots ── */
+.progress {
+ display: flex;
+ gap: 8px;
+ justify-content: center;
+ margin-bottom: 28px;
+}
+
+.progress .dot {
+ width: 6px; height: 6px;
+ border-radius: 50%;
+ background: var(--line-subtle);
+ border: 1px solid var(--line);
+ transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
+}
+
+.progress .dot.done {
+ background: var(--accent-dim);
+ border-color: var(--accent-dim);
+}
+
+.progress .dot.current {
+ background: var(--accent);
+ border-color: var(--accent);
+ box-shadow: 0 0 8px rgba(201,169,97,0.45);
+}
+
+/* ── Responsive ── */
+@media (max-width: 560px) {
+ .wordmark { font-size: 16px; max-width: 200px; letter-spacing: 0.14em; }
+ header.brand-bar { padding: 0 16px; height: 64px; }
+ :root { --header-h: 64px; }
+ .game-title h1 { font-size: 28px; }
+ .guesses { grid-template-columns: 1fr; }
+ .overlay-card { padding: 36px 28px; }
+ .overlay-card h2 { font-size: 28px; }
+ .meta-value { font-size: 22px; }
+}
+</style>
+</head>
+<body>
+
+<header class="brand-bar">
+ <div class="wordmark">Designer Wallcoverings</div>
+</header>
+
+<div class="app">
+ <div class="meta-bar">
+ <div class="meta-group">
+ <div><span class="meta-label">Round</span><span class="meta-value" id="roundNum">1</span><span class="meta-label"> / 8</span></div>
+ </div>
+ <div class="meta-group">
+ <div><span class="meta-label">Score</span><span class="meta-value" id="scoreNum">0</span></div>
+ <div><span class="meta-label">Best</span><span class="meta-value" id="bestNum">0</span></div>
+ </div>
+ </div>
+
+ <div class="progress" id="progress"></div>
+
+ <div class="game-title">
+ <h1>Which Design Era?</h1>
+ <p>Study the room · Trust your eye</p>
+ </div>
+
+ <div class="stage" id="stage">
+ <!-- Victorian -->
+ <div class="vignette era-victorian" data-era="victorian">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="floor"></div>
+ <div class="fireplace">
+ <div class="fp-mantel"></div>
+ <div class="fp-body">
+ <div class="fp-opening"></div>
+ </div>
+ </div>
+ <div class="portrait"></div>
+ <div class="candelabra"></div>
+ </div>
+
+ <!-- Art Deco -->
+ <div class="vignette era-deco" data-era="deco">
+ <div class="wall"></div>
+ <div class="frieze"></div>
+ <div class="floor"></div>
+ <div class="fan"><div class="fan-arc"></div></div>
+ <div class="console"></div>
+ <div class="mirror"></div>
+ </div>
+
+ <!-- Mid-Century Modern -->
+ <div class="vignette era-mcm" data-era="mcm">
+ <div class="wall"></div>
+ <div class="panel-wall"></div>
+ <div class="floor"></div>
+ <div class="lounge">
+ <div class="lounge-back"></div>
+ <div class="lounge-seat"></div>
+ <div class="lounge-leg l"></div>
+ <div class="lounge-leg r"></div>
+ </div>
+ <div class="table"></div>
+ <div class="lamp"></div>
+ <div class="plant">
+ <div class="plant-leaf a"></div>
+ <div class="plant-leaf b"></div>
+ <div class="plant-leaf c"></div>
+ <div class="plant-pot"></div>
+ </div>
+ <div class="clock">
+ <div class="clock-rays"></div>
+ <div class="clock-face"></div>
+ </div>
+ </div>
+
+ <!-- Grandmillennial -->
+ <div class="vignette era-grand" data-era="grand">
+ <div class="wall"></div>
+ <div class="valance"></div>
+ <div class="floor"></div>
+ <div class="frame f1"></div>
+ <div class="frame f2"></div>
+ <div class="frame f3"></div>
+ <div class="sofa">
+ <div class="sofa-back"></div>
+ <div class="sofa-body"></div>
+ <div class="sofa-arm l"></div>
+ <div class="sofa-arm r"></div>
+ <div class="sofa-skirt"></div>
+ </div>
+ <div class="pillow p1"></div>
+ <div class="pillow p2"></div>
+ <div class="pillow p3"></div>
+ <div class="side-table">
+ <div class="st-top"></div>
+ <div class="st-body"></div>
+ </div>
+ <div class="jar"></div>
+ </div>
+ </div>
+
+ <div class="guesses" id="guesses">
+ <button class="guess-btn" data-guess="victorian">Victorian</button>
+ <button class="guess-btn" data-guess="deco">Art Deco</button>
+ <button class="guess-btn" data-guess="mcm">Mid-Century Modern</button>
+ <button class="guess-btn" data-guess="grand">Grandmillennial</button>
+ </div>
+
+ <div class="fact-panel" id="factPanel">
+ <div class="fact-era" id="factEra"></div>
+ <div class="fact-text" id="factText"></div>
+ <div class="next-row">
+ <button class="btn-next" id="btnNext">Next Round</button>
+ </div>
+ </div>
+</div>
+
+<!-- Start overlay -->
+<div class="overlay show" id="startOverlay">
+ <div class="overlay-card">
+ <div class="eyebrow">Designer Wallcoverings</div>
+ <h2>Which Design Era?</h2>
+ <p class="blurb">Eight rooms. Four eras. Read the silhouettes, the motifs, the mood — then name the period. A cultivated eye is the only tool required.</p>
+ <button class="btn-primary" id="btnStart">Begin</button>
+ <div class="best-badge" id="startBest"></div>
+ </div>
+</div>
+
+<!-- End overlay -->
+<div class="overlay" id="endOverlay">
+ <div class="overlay-card">
+ <div class="eyebrow" id="endEyebrow">Session Complete</div>
+ <h2 id="endTitle">Well Seen</h2>
+ <div class="score-big" id="endScore">0</div>
+ <div class="score-sub">of 8 correct</div>
+ <p class="blurb" id="endBlurb"></p>
+ <button class="btn-primary" id="btnRestart">Play Again</button>
+ <div class="best-badge" id="endBest"></div>
+ </div>
+</div>
+
+<script>
+(function () {
+ const ERAS = {
+ victorian: {
+ name: 'Victorian',
+ fact: 'Victorian interiors reveled in ornament: damask wallpapers, dark carved woods, and layered textiles signaled prosperity. The industrial age made elaborate pattern newly affordable — and maximalism became a moral virtue.'
+ },
+ deco: {
+ name: 'Art Deco',
+ fact: 'Born of the 1925 Paris Exposition, Art Deco married machine-age geometry with luxe materials — lacquer, brass, sunburst motifs. It was glamour engineered for the skyscraper century.'
+ },
+ mcm: {
+ name: 'Mid-Century Modern',
+ fact: 'Post-war optimism shaped MCM: organic curves, tapered legs, open plans, and honest materials. Designers like Eames and Nelson made modernism warm, democratic, and quietly radical.'
+ },
+ grand: {
+ name: 'Grandmillennial',
+ fact: 'A 21st-century revival of heirloom comfort — chinoiserie, skirted sofas, scallops, and collected clutter. Grandmillennial style says tradition is not nostalgia; it is curation with a wink.'
+ }
+ };
+
+ const ERA_KEYS = Object.keys(ERAS);
+ const TOTAL = 8;
+
+ let round = 0;
+ let score = 0;
+ let sequence = [];
+ let answered = false;
+ let best = parseInt(localStorage.getItem('dw-era-best') || '0', 10);
+
+ const $ = (sel) => document.querySelector(sel);
+ const $$ = (sel) => document.querySelectorAll(sel);
+
+ const roundNum = $('#roundNum');
+ const scoreNum = $('#scoreNum');
+ const bestNum = $('#bestNum');
+ const factPanel = $('#factPanel');
+ const factEra = $('#factEra');
+ const factText = $('#factText');
+ const btnNext = $('#btnNext');
+ const progress = $('#progress');
+ const startOverlay = $('#startOverlay');
+ const endOverlay = $('#endOverlay');
+
+ bestNum.textContent = best;
+ $('#startBest').textContent = best > 0 ? 'Best score · ' + best + ' / 8' : 'No best score yet';
+
+ 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 buildSequence() {
+ // 2 of each era, shuffled
+ let seq = [];
+ ERA_KEYS.forEach(k => { seq.push(k, k); });
+ sequence = shuffle(seq);
+ }
+
+ function buildProgress() {
+ progress.innerHTML = '';
+ for (let i = 0; i < TOTAL; i++) {
+ const d = document.createElement('div');
+ d.className = 'dot' + (i === 0 ? ' current' : '');
+ progress.appendChild(d);
+ }
+ }
+
+ function updateProgress() {
+ const dots = progress.querySelectorAll('.dot');
+ dots.forEach((d, i) => {
+ d.className = 'dot';
+ if (i < round) d.classList.add('done');
+ if (i === round) d.classList.add('current');
+ });
+ }
+
+ function showVignette(eraKey) {
+ $$('.vignette').forEach(v => v.classList.remove('active'));
+ const el = document.querySelector('.vignette[data-era="' + eraKey + '"]');
+ if (el) {
+ // Force reflow for transition
+ void el.offsetWidth;
+ el.classList.add('active');
+ }
+ }
+
+ function resetButtons() {
+ $$('.guess-btn').forEach(b => {
+ b.disabled = false;
+ b.classList.remove('correct', 'wrong');
+ });
+ }
+
+ function startRound() {
+ answered = false;
+ factPanel.classList.remove('show');
+ resetButtons();
+ roundNum.textContent = round + 1;
+ updateProgress();
+ showVignette(sequence[round]);
+ btnNext.textContent = round === TOTAL - 1 ? 'See Results' : 'Next Round';
+ }
+
+ function handleGuess(guess) {
+ if (answered) return;
+ answered = true;
+ const correct = sequence[round];
+ const buttons = $$('.guess-btn');
+
+ buttons.forEach(b => {
+ b.disabled = true;
+ const g = b.getAttribute('data-guess');
+ if (g === correct) b.classList.add('correct');
+ else if (g === guess && g !== correct) b.classList.add('wrong');
+ });
+
+ if (guess === correct) {
+ score++;
+ scoreNum.textContent = score;
+ }
+
+ factEra.textContent = ERAS[correct].name;
+ factText.textContent = ERAS[correct].fact;
+ factPanel.classList.add('show');
+ }
+
+ function nextRound() {
+ round++;
+ if (round >= TOTAL) {
+ endGame();
+ } else {
+ startRound();
+ }
+ }
+
+ function endGame() {
+ if (score > best) {
+ best = score;
+ localStorage.setItem('dw-era-best', String(best));
+ bestNum.textContent = best;
+ }
+
+ const titles = [
+ 'A Fresh Eye',
+ 'Getting Warmer',
+ 'Cultivated Taste',
+ 'Discerning',
+ 'Impeccable'
+ ];
+ const blurbs = [
+ 'Every connoisseur begins somewhere. Walk the rooms again — the details will start to speak.',
+ 'You caught more than a few signatures. Another pass will sharpen the instinct.',
+ 'A solid reading of form and period. The decorative arts reward exactly this kind of attention.',
+ 'You have the eye. Motif, silhouette, and palette rarely fool you.',
+ 'Flawless. You move through eras the way a curator moves through a gallery.'
+ ];
+ let idx = score <= 2 ? 0 : score <= 4 ? 1 : score <= 6 ? 2 : score === 7 ? 3 : 4;
+
+ $('#endTitle').textContent = titles[idx];
+ $('#endScore').textContent = score;
+ $('#endBlurb').textContent = blurbs[idx];
+ $('#endBest').textContent = 'Best score · ' + best + ' / 8';
+ $('#endEyebrow').textContent = score === 8 ? 'Perfect Session' : 'Session Complete';
+
+ endOverlay.classList.add('show');
+ }
+
+ function startGame() {
+ round = 0;
+ score = 0;
+ scoreNum.textContent = '0';
+ buildSequence();
+ buildProgress();
+ startOverlay.classList.remove('show');
+ endOverlay.classList.remove('show');
+ startRound();
+ }
+
+ // Events
+ $('#btnStart').addEventListener('click', startGame);
+ $('#btnRestart').addEventListener('click', startGame);
+ btnNext.addEventListener('click', nextRound);
+
+ $$('.guess-btn').forEach(btn => {
+ btn.addEventListener('click', () => handleGuess(btn.getAttribute('data-guess')));
+ });
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/grok.png b/data/artifacts/0219528ac7d7/grok.png
new file mode 100644
index 0000000..7de407d
Binary files /dev/null and b/data/artifacts/0219528ac7d7/grok.png differ
diff --git a/data/artifacts/0219528ac7d7/hermes3-8b.html b/data/artifacts/0219528ac7d7/hermes3-8b.html
new file mode 100644
index 0000000..c9ff55c
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/hermes3-8b.html
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Which Design Era?</title>
+<style>
+:root {
+ --bg: #f7efe6;
+ --surface: #fff9f1;
+ --text: #3a2c22;
+ --muted: #a08c7a;
+ --accent-base: #c65f38;
+ --accent-hl: #e0a458;
+ --line: 1px solid var(--surface);
+ --shadow-card: 0 8px 24px rgba(0,0,0,.12);
+ --shadow-hover: 0 16px 48px rgba(0,0,0,.18);
+ --ease-in-out-quart: cubic-bezier(.22,1,.36,1);
+ --ease-drift: linear;
+}
+body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ padding: 32px;
+ box-sizing: border-box;
+}
+.display {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ letter-spacing: .15em;
+ color: var(--text);
+ text-transform: uppercase;
+ font-size: 12px;
+ margin-bottom: 24px;
+}
+.display::after {
+ content: "luxury, editorial, high-end product";
+ display: block;
+ color: var(--muted);
+ opacity: .5;
+}
+.card {
+ background-color: var(--surface);
+ padding: 48px;
+ border-radius: 14px;
+ box-shadow: var(--shadow-card);
+ margin-bottom: 32px;
+ transition: all .7s var(--ease-in-out-quart);
+}
+.card:hover {
+ box-shadow: var(--shadow-hover);
+}
+button {
+ background-color: var(--accent-base);
+ border: none;
+ color: var(--surface);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ padding: 12px 24px;
+ margin-right: 8px;
+ cursor: pointer;
+ transition: background-color .3s;
+}
+button:hover {
+ background-color: var(--accent-hl);
+}
+.scoreboard {
+ color: var(--muted);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ opacity: .5;
+}
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+.fadeIn {
+ animation: fadeUp .7s var(--ease-in-out-quart) forwards;
+}
+.staggerChild {
+ animation-delay: .9s;
+ animation-fill-mode: forwards;
+}
+@keyframes driftBackground {
+ from { background-color: var(--bg); }
+ to { background-color: lighten(var(--bg), 2%); }
+}
+body, html {
+ width: 100%;
+ height: 100%;
+ margin: 0; padding: 0;
+}
+.header {
+ position: fixed;
+ top: 32px;
+ left: 0;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ background-color: var(--surface);
+ color: var(--text);
+ padding-left: 48px;
+ box-shadow: var(--line) top;
+}
+.header-logo {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 40px;
+ letter-spacing: .18em;
+ color: var(--text);
+ text-transform: uppercase;
+ margin-right: 16px;
+}
+.header-buttons {
+ display: flex;
+ align-items: center;
+ padding-left: 16px;
+}
+.button {
+ background-color: var(--surface);
+ border: var(--line);
+ color: var(--muted);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ padding: 8px 16px;
+ margin-right: 8px;
+ cursor: pointer;
+}
+.button:hover {
+ background-color: var(--muted);
+ color: var(--surface);
+}
+.button-group {
+ display: flex;
+ align-items: center;
+}
+button, .button { touch-action: none; }
+@media (hover: hover) {
+ .card:hover ~ .card { box-shadow: none; }
+}
+</style>
+<body>
+
+<div class="header">
+ <div class="header-logo">DESIGNER WALLCOVERINGS</div>
+ <div class="header-buttons">
+ <button class="button" disabled>Score</button>
+ <button class="button">Restart</button>
+ </div>
+</div>
+
+<div class="display">Which Design Era?</div>
+<div class="card fadeIn">
+ <h1>Victorian</h1>
+ <p>A time of elegance and opulence. Intricate details, heavy textures, and a focus on craftsmanship define this era.</p>
+ <button>Guess Victorian</button>
+ <button>Next Era</button>
+</div>
+
+<div class="card fadeIn staggerChild">
+ <h1>Art Deco</h1>
+ <p>A bold departure from the old. Sleek lines, luxurious materials, and geometric motifs characterize this period.</p>
+ <button>Guess Art Deco</button>
+ <button>Next Era</button>
+</div>
+
+<div class="card fadeIn staggerChild">
+ <h1>Mid-Century Modern</h1>
+ <p>A celebration of simplicity. Organic shapes, clean lines, and a focus on function define this era.</p>
+ <button>Guess Mid-Century Modern</button>
+ <button>Next Era</button>
+</div>
+
+<div class="card fadeIn staggerChild">
+ <h1>Grandmillennial</h1>
+ <p>A nod to the old with a modern twist. Floral patterns, antique finishes, and a focus on comfort define this era.</p>
+ <button>Guess Grandmillennial</button>
+ <button>Next Era</button>
+</div>
+
+<div class="scoreboard">Your Score: 0/4</div>
+
+<style>
+ :root {
+ --bg: #f7efe6;
+ --surface: #fff9f1;
+ --text: #3a2c22;
+ --muted: #a08c7a;
+ --accent-base: #c65f38;
+ --accent-hl: #e0a458;
+ --line: 1px solid var(--surface);
+ --shadow-card: 0 8px 24px rgba(0,0,0,.12);
+ --shadow-hover: 0 16px 48px rgba(0,0,0,.18);
+ --ease-in-out-quart: cubic-bezier(.22,1,.36,1);
+ --ease-drift: linear;
+ }
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ padding: 32px;
+ box-sizing: border-box;
+ }
+ .display {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ letter-spacing: .15em;
+ color: var(--text);
+ text-transform: uppercase;
+ font-size: 12px;
+ margin-bottom: 24px;
+ }
+ .display::after {
+ content: "luxury, editorial, high-end product";
+ display: block;
+ color: var(--muted);
+ opacity: .5;
+ }
+ .card {
+ background-color: var(--surface);
+ padding: 48px;
+ border-radius: 14px;
+ box-shadow: var(--shadow-card);
+ margin-bottom: 32px;
+ transition: all .7s var(--ease-in-out-quart);
+ }
+ .card:hover {
+ box-shadow: var(--shadow-hover);
+ }
+ button {
+ background-color: var(--accent-base);
+ border: none;
+ color: var(--surface);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ padding: 12px 24px;
+ margin-right: 8px;
+ cursor: pointer;
+ transition: background-color .3s;
+ }
+ button:hover {
+ background-color: var(--accent-hl);
+ }
+ .scoreboard {
+ color: var(--muted);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ opacity: .5;
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+ .fadeIn {
+ animation: fadeUp .7s var(--ease-in-out-quart) forwards;
+ }
+ .staggerChild {
+ animation-delay: .9s;
+ animation-fill-mode: forwards;
+ }
+ @keyframes driftBackground {
+ from { background-color: var(--bg); }
+ to { background-color: lighten(var(--bg), 2%); }
+ }
+ body, html {
+ width: 100%;
+ height: 100%;
+ margin: 0; padding: 0;
+ }
+ .header {
+ position: fixed;
+ top: 32px;
+ left: 0;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ background-color: var(--surface);
+ color: var(--text);
+ padding-left: 48px;
+ box-shadow: var(--line) top;
+ }
+ .header-logo {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 40px;
+ letter-spacing: .18em;
+ color: var(--text);
+ text-transform: uppercase;
+ margin-right: 16px;
+ }
+ .header-buttons {
+ display: flex;
+ align-items: center;
+ padding-left: 16px;
+ }
+ .button {
+ background-color: var(--surface);
+ border: var(--line);
+ color: var(--muted);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ padding: 8px 16px;
+ margin-right: 8px;
+ cursor: pointer;
+ }
+ .button:hover {
+ background-color: var(--muted);
+ color: var(--surface);
+ }
+ .button-group {
+ display: flex;
+ align-items: center;
+ }
+ button, .button { touch-action: none; }
+ @media (hover: hover) {
+ .card:hover ~ .card { box-shadow: none; }
+ }
+</style>
+<script>
+// JavaScript goes here
+let eraButtons = document.querySelectorAll('button');
+
+let score = 0;
+
+function nextEra() {
+ let currentCard = document.querySelector('.card');
+
+ if (currentCard) {
+ currentCard.classList.remove('fadeIn');
+
+ setTimeout(() => {
+ currentCard.style.display = 'none';
+
+ // Change background color
+ document.body.style.backgroundColor = `lighten(var(--bg), ${Math.random() * 10}%)`;
+ }, 700);
+ }
+
+ let nextCards = document.querySelectorAll('.card:hidden');
+
+ if (nextCards.length) {
+ nextCards[0].style.display = 'block';
+ nextCards[0].classList.add('fadeIn');
+ nextCards[0].querySelector('button').focus();
+ } else {
+ eraButtons.forEach(button => button.disabled = false);
+ document.querySelector('.scoreboard').textContent = `Your Score: ${score}/4`;
+ }
+}
+
+function checkGuess(e) {
+ let guess = e.target.textContent.toLowerCase();
+
+ if (document.querySelector(`.${guess}`)) {
+ score++;
+
+ e.target.style.backgroundColor = 'gold';
+ e.target.disabled = true;
+
+ setTimeout(() => {
+ e.target.classList.remove('fadeIn');
+ e.target.style.opacity = '0';
+ }, 700);
+ } else {
+ alert(`${guess} is NOT the correct era!`);
+ }
+
+ if (score === 4) {
+ alert(`Congratulations, you guessed all four eras correctly!\nYour final score was ${score}/4.`);
+ nextEra();
+ } else {
+ e.target.blur();
+ nextEra();
+ }
+}
+
+eraButtons.forEach(button => button.addEventListener('click', checkGuess));
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/hermes3-8b.png b/data/artifacts/0219528ac7d7/hermes3-8b.png
new file mode 100644
index 0000000..39d7630
Binary files /dev/null and b/data/artifacts/0219528ac7d7/hermes3-8b.png differ
diff --git a/data/artifacts/0219528ac7d7/kimi.html b/data/artifacts/0219528ac7d7/kimi.html
new file mode 100644
index 0000000..1391ae6
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/kimi.html
@@ -0,0 +1,1099 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Which Design Era? | Designer Wallcoverings</title>
+ <style>
+ :root {
+ /* Luxe Noir Palette */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-elevated: #1f1f26;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent2: #7d6a45;
+ --line: rgba(245, 242, 234, 0.12);
+ --shadow: rgba(0, 0, 0, 0.4);
+
+ /* Typography */
+ --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+
+ /* Motion */
+ --ease-swift: cubic-bezier(.22,.9,.24,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --ease-power: cubic-bezier(.77,0,.18,1);
+
+ /* Spacing Scale */
+ --space-xs: 0.5rem;
+ --space-sm: 0.75rem;
+ --space-md: 1rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2.5rem;
+ --space-2xl: 4rem;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: var(--font-body);
+ background: var(--bg);
+ color: var(--text);
+ min-height: 100vh;
+ line-height: 1.6;
+ overflow-x: hidden;
+ }
+
+ /* Header / Wordmark */
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 100;
+ background: linear-gradient(to bottom, var(--bg) 60%, transparent);
+ padding: var(--space-lg) var(--space-xl);
+ pointer-events: none;
+ }
+
+ .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;
+ pointer-events: auto;
+ display: inline-block;
+ }
+
+ /* Scoreboard */
+ .scoreboard {
+ position: fixed;
+ top: var(--space-lg);
+ right: var(--space-xl);
+ z-index: 101;
+ display: flex;
+ gap: var(--space-xl);
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .score-item {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: var(--space-xs);
+ }
+
+ .score-value {
+ font-size: 21px;
+ color: var(--text);
+ font-weight: 500;
+ letter-spacing: 0.04em;
+ }
+
+ .score-value.accent {
+ color: var(--accent);
+ }
+
+ /* Main Game Area */
+ .game-container {
+ padding-top: 140px;
+ padding-bottom: var(--space-2xl);
+ max-width: 1200px;
+ margin: 0 auto;
+ padding-left: var(--space-xl);
+ padding-right: var(--space-xl);
+ }
+
+ /* Vignette Stage */
+ .stage {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 16/10;
+ background: var(--surface);
+ border-radius: 2px;
+ overflow: hidden;
+ box-shadow: 0 24px 64px var(--shadow);
+ margin-bottom: var(--space-xl);
+ }
+
+ .vignette {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 600ms var(--ease-hero);
+ }
+
+ .vignette.active {
+ opacity: 1;
+ }
+
+ /* Victorian Vignette */
+ .victorian {
+ background:
+ linear-gradient(180deg, #2a2420 0%, #1a1612 100%);
+ }
+
+ .victorian-wall {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 65%;
+ background:
+ repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(201, 169, 97, 0.08) 48px, rgba(201, 169, 97, 0.08) 49px),
+ radial-gradient(ellipse at 30% 80%, rgba(139, 90, 43, 0.3) 0%, transparent 50%),
+ radial-gradient(ellipse at 70% 60%, rgba(201, 169, 97, 0.15) 0%, transparent 40%),
+ #2d2520;
+ }
+
+ .victorian-wall::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 10 Q40 20 30 30 Q20 20 30 10 M30 30 Q40 40 30 50 Q20 40 30 30' fill='none' stroke='%23c9a961' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
+ opacity: 0.6;
+ }
+
+ .victorian-molding {
+ position: absolute;
+ top: 65%;
+ left: 0;
+ right: 0;
+ height: 8%;
+ background: linear-gradient(to bottom, #3d3328, #2a2420);
+ border-top: 2px solid rgba(201, 169, 97, 0.3);
+ border-bottom: 1px solid rgba(201, 169, 97, 0.2);
+ }
+
+ .victorian-molding::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 5%;
+ right: 5%;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.4), transparent);
+ }
+
+ .victorian-floor {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 27%;
+ background:
+ repeating-linear-gradient(90deg, #1f1a16 0px, #1f1a16 40px, #2a2420 40px, #2a2420 80px),
+ linear-gradient(to bottom, #161310, #0f0d0b);
+ }
+
+ .victorian-chair {
+ position: absolute;
+ bottom: 20%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 140px;
+ height: 180px;
+ }
+
+ .victorian-chair-back {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100px;
+ height: 100px;
+ background: #4a3328;
+ border-radius: 50% 50% 0 0;
+ box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
+ }
+
+ .victorian-chair-seat {
+ position: absolute;
+ bottom: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 120px;
+ height: 50px;
+ background: #5c3d2e;
+ border-radius: 4px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+ }
+
+ .victorian-chair-legs {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100px;
+ height: 40px;
+ }
+
+ .victorian-chair-legs::before,
+ .victorian-chair-legs::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ width: 8px;
+ height: 40px;
+ background: #3d2820;
+ border-radius: 0 0 4px 4px;
+ }
+
+ .victorian-chair-legs::before { left: 10px; }
+ .victorian-chair-legs::after { right: 10px; }
+
+ /* Art Deco Vignette */
+ .artdeco {
+ background: linear-gradient(135deg, #1a1a20 0%, #0f0f14 100%);
+ }
+
+ .artdeco-wall {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 70%;
+ background:
+ linear-gradient(45deg, transparent 48%, rgba(201, 169, 97, 0.1) 49%, rgba(201, 169, 97, 0.1) 51%, transparent 52%),
+ linear-gradient(-45deg, transparent 48%, rgba(201, 169, 97, 0.08) 49%, rgba(201, 169, 97, 0.08) 51%, transparent 52%),
+ repeating-linear-gradient(90deg, #1e1e24 0px, #1e1e24 60px, #25252c 60px, #25252c 120px);
+ background-size: 80px 80px, 80px 80px, 100% 100%;
+ }
+
+ .artdeco-sunburst {
+ position: absolute;
+ top: 10%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 200px;
+ height: 200px;
+ }
+
+ .artdeco-sunburst::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ conic-gradient(from 0deg, transparent 0deg, rgba(201, 169, 97, 0.3) 5deg, transparent 10deg, transparent 20deg, rgba(201, 169, 97, 0.2) 25deg, transparent 30deg, transparent 40deg, rgba(201, 169, 97, 0.3) 45deg, transparent 50deg, transparent 60deg, rgba(201, 169, 97, 0.2) 65deg, transparent 70deg, transparent 80deg, rgba(201, 169, 97, 0.3) 85deg, transparent 90deg, transparent 100deg, rgba(201, 169, 97, 0.2) 105deg, transparent 110deg, transparent 120deg, rgba(201, 169, 97, 0.3) 125deg, transparent 130deg, transparent 140deg, rgba(201, 169, 97, 0.2) 145deg, transparent 150deg, transparent 160deg, rgba(201, 169, 97, 0.3) 165deg, transparent 170deg, transparent 180deg, rgba(201, 169, 97, 0.2) 185deg, transparent 190deg, transparent 200deg, rgba(201, 169, 97, 0.3) 205deg, transparent 210deg, transparent 220deg, rgba(201, 169, 97, 0.2) 225deg, transparent 230deg, transparent 240deg, rgba(201, 169, 97, 0.3) 245deg, transparent 250deg, transparent 260deg, rgba(201, 169, 97, 0.2) 265deg, transparent 270deg, transparent 280deg, rgba(201, 169, 97, 0.3) 285deg, transparent 290deg, transparent 300deg, rgba(201, 169, 97, 0.2) 305deg, transparent 310deg, transparent 320deg, rgba(201, 169, 97, 0.3) 325deg, transparent 330deg, transparent 340deg, rgba(201, 169, 97, 0.2) 345deg, transparent 350deg);
+ border-radius: 50%;
+ }
+
+ .artdeco-sunburst::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 60px;
+ height: 60px;
+ background: radial-gradient(circle, rgba(201, 169, 97, 0.6) 0%, transparent 70%);
+ border-radius: 50%;
+ }
+
+ .artdeco-band {
+ position: absolute;
+ top: 70%;
+ left: 0;
+ right: 0;
+ height: 6%;
+ background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.4), transparent);
+ }
+
+ .artdeco-floor {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 24%;
+ background:
+ repeating-linear-gradient(90deg, #16161a 0px, #16161a 30px, #1f1f24 30px, #1f1f24 60px),
+ linear-gradient(to bottom, #1a1a1e, #0d0d10);
+ }
+
+ .artdeco-table {
+ position: absolute;
+ bottom: 18%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 160px;
+ height: 80px;
+ }
+
+ .artdeco-table-top {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 140px;
+ height: 20px;
+ background: linear-gradient(180deg, #2a2a30, #1f1f24);
+ border-radius: 2px;
+ border: 1px solid rgba(201, 169, 97, 0.3);
+ }
+
+ .artdeco-table-base {
+ position: absolute;
+ top: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 20px;
+ height: 50px;
+ background: linear-gradient(90deg, #1f1f24, #2a2a30, #1f1f24);
+ }
+
+ .artdeco-table-base::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 8px;
+ background: #2a2a30;
+ border-radius: 2px;
+ border: 1px solid rgba(201, 169, 97, 0.2);
+ }
+
+ /* Mid-Century Modern Vignette */
+ .midcentury {
+ background: linear-gradient(180deg, #e8e4dc 0%, #d8d4cc 100%);
+ }
+
+ .midcentury-wall {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 68%;
+ background:
+ radial-gradient(circle at 20% 80%, rgba(139, 119, 89, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 80% 30%, rgba(194, 120, 86, 0.08) 0%, transparent 40%),
+ #e8e4dc;
+ }
+
+ .midcentury-wall::before {
+ content: '';
+ position: absolute;
+ top: 30%;
+ left: 10%;
+ right: 10%;
+ height: 40%;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='2' fill='%238b7759' opacity='0.2'/%3E%3C/svg%3E");
+ }
+
+ .midcentury-panel {
+ position: absolute;
+ top: 20%;
+ left: 15%;
+ width: 70%;
+ height: 40%;
+ background: rgba(194, 120, 86, 0.15);
+ border-radius: 50% 50% 0 0 / 20% 20% 0 0;
+ }
+
+ .midcentury-floor {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 32%;
+ background:
+ linear-gradient(to bottom, #a08060, #806040),
+ repeating-linear-gradient(90deg, #907050 0px, #907050 2px, #a08060 2px, #a08060 100px);
+ }
+
+ .midcentury-rug {
+ position: absolute;
+ bottom: 8%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 200px;
+ height: 120px;
+ background:
+ radial-gradient(ellipse, rgba(194, 120, 86, 0.4) 0%, transparent 70%),
+ repeating-conic-gradient(from 0deg at 50% 50%, rgba(139, 119, 89, 0.3) 0deg 10deg, transparent 10deg 20deg);
+ border-radius: 50%;
+ }
+
+ .midcentury-chair {
+ position: absolute;
+ bottom: 22%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 120px;
+ height: 140px;
+ }
+
+ .midcentury-chair-back {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80px;
+ height: 70px;
+ background: #c27856;
+ border-radius: 40px 40px 0 0;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+ }
+
+ .midcentury-chair-seat {
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100px;
+ height: 40px;
+ background: #8b5a3e;
+ border-radius: 20px;
+ box-shadow: 0 8px 25px rgba(0,0,0,0.25);
+ }
+
+ .midcentury-chair-legs {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80px;
+ height: 30px;
+ }
+
+ .midcentury-chair-legs::before,
+ .midcentury-chair-legs::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ width: 6px;
+ height: 30px;
+ background: #654321;
+ border-radius: 0 0 3px 3px;
+ }
+
+ .midcentury-chair-legs::before {
+ left: 15px;
+ transform: rotate(-10deg);
+ }
+ .midcentury-chair-legs::after {
+ right: 15px;
+ transform: rotate(10deg);
+ }
+
+ /* Grandmillennial Vignette */
+ .grandmillennial {
+ background: linear-gradient(180deg, #f5f0e8 0%, #ebe5dc 100%);
+ }
+
+ .grandmillennial-wall {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 70%;
+ background: #f5f0e8;
+ }
+
+ .grandmillennial-wall::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a961' stroke-width='0.8' opacity='0.25'%3E%3Cpath d='M40 20 Q50 30 40 40 Q30 30 40 20 M20 40 Q30 50 20 60 Q10 50 20 40 M60 40 Q70 50 60 60 Q50 50 60 40 M40 60 Q50 70 40 80 Q30 70 40 60'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E");
+ }
+
+ .grandmillennial-wainscoting {
+ position: absolute;
+ bottom: 30%;
+ left: 5%;
+ right: 5%;
+ height: 25%;
+ background: rgba(255, 255, 255, 0.6);
+ border: 1px solid rgba(201, 169, 97, 0.3);
+ border-radius: 2px;
+ }
+
+ .grandmillennial-wainscoting::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 10%;
+ right: 10%;
+ height: 1px;
+ background: rgba(201, 169, 97, 0.3);
+ }
+
+ .grandmillennial-floor {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 30%;
+ background:
+ repeating-linear-gradient(45deg, #d4c8b8 0px, #d4c8b8 10px, #c8bcac 10px, #c8bcac 20px),
+ linear-gradient(to bottom, #e0d4c4, #c8bcac);
+ }
+
+ .grandmillennial-basket {
+ position: absolute;
+ bottom: 25%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100px;
+ height: 80px;
+ }
+
+ .grandmillennial-basket-body {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80px;
+ height: 50px;
+ background:
+ repeating-linear-gradient(0deg, #c9a961 0px, #c9a961 4px, #b8956f 4px, #b8956f 8px),
+ repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(0,0,0,0.1) 8px, rgba(0,0,0,0.1) 9px);
+ border-radius: 0 0 10px 10px;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+ }
+
+ .grandmillennial-basket-handle {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 40px;
+ border: 4px solid #c9a961;
+ border-bottom: none;
+ border-radius: 30px 30px 0 0;
+ }
+
+ /* Guess Buttons */
+ .guess-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: var(--space-md);
+ margin-bottom: var(--space-xl);
+ }
+
+ .guess-btn {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ color: var(--text);
+ padding: var(--space-lg) var(--space-md);
+ font-family: var(--font-body);
+ font-size: 12px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 300ms var(--ease-swift);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .guess-btn::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, transparent, rgba(201, 169, 97, 0.1), transparent);
+ opacity: 0;
+ transition: opacity 300ms var(--ease-swift);
+ }
+
+ .guess-btn:hover {
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+ }
+
+ .guess-btn:hover::before {
+ opacity: 1;
+ }
+
+ .guess-btn:active {
+ transform: translateY(0);
+ }
+
+ .guess-btn.correct {
+ border-color: var(--accent);
+ background: rgba(201, 169, 97, 0.1);
+ }
+
+ .guess-btn.wrong {
+ opacity: 0.4;
+ }
+
+ /* Reveal Overlay */
+ .reveal-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(13, 13, 15, 0.95);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 200;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 400ms var(--ease-hero);
+ }
+
+ .reveal-overlay.active {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .reveal-content {
+ text-align: center;
+ max-width: 500px;
+ padding: var(--space-xl);
+ transform: translateY(20px);
+ transition: transform 500ms var(--ease-hero);
+ }
+
+ .reveal-overlay.active .reveal-content {
+ transform: translateY(0);
+ }
+
+ .reveal-era {
+ font-family: var(--font-display);
+ font-size: 50px;
+ letter-spacing: 0.04em;
+ color: var(--accent);
+ margin-bottom: var(--space-md);
+ line-height: 1.1;
+ }
+
+ .reveal-fact {
+ font-size: 16px;
+ line-height: 1.7;
+ color: var(--text);
+ margin-bottom: var(--space-xl);
+ }
+
+ .next-btn {
+ background: transparent;
+ border: 1px solid var(--accent);
+ color: var(--accent);
+ padding: var(--space-md) var(--space-xl);
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 300ms var(--ease-swift);
+ }
+
+ .next-btn:hover {
+ background: var(--accent);
+ color: var(--bg);
+ }
+
+ /* Game Over Overlay */
+ .gameover-overlay {
+ position: fixed;
+ inset: 0;
+ background: var(--bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 300;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 500ms var(--ease-hero);
+ }
+
+ .gameover-overlay.active {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .gameover-content {
+ text-align: center;
+ padding: var(--space-xl);
+ }
+
+ .gameover-title {
+ font-family: var(--font-display);
+ font-size: 56px;
+ letter-spacing: 0.04em;
+ color: var(--text);
+ margin-bottom: var(--space-lg);
+ }
+
+ .final-score {
+ font-size: 21px;
+ color: var(--accent);
+ letter-spacing: 0.08em;
+ margin-bottom: var(--space-xs);
+ }
+
+ .best-score {
+ font-size: 13px;
+ color: var(--muted);
+ letter-spacing: 0.12em;
+ margin-bottom: var(--space-xl);
+ }
+
+ .restart-btn {
+ background: var(--accent);
+ border: none;
+ color: var(--bg);
+ padding: var(--space-md) var(--space-2xl);
+ font-family: var(--font-body);
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 300ms var(--ease-swift);
+ }
+
+ .restart-btn:hover {
+ background: var(--text);
+ transform: translateY(-2px);
+ box-shadow: 0 12px 32px rgba(201, 169, 97, 0.3);
+ }
+
+ /* Round indicator */
+ .round-indicator {
+ text-align: center;
+ margin-bottom: var(--space-lg);
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .round-indicator span {
+ color: var(--text);
+ }
+
+ /* Start Screen */
+ .start-overlay {
+ position: fixed;
+ inset: 0;
+ background: var(--bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 400;
+ transition: opacity 500ms var(--ease-hero);
+ }
+
+ .start-overlay.hidden {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .start-content {
+ text-align: center;
+ max-width: 600px;
+ padding: var(--space-xl);
+ }
+
+ .start-title {
+ font-family: var(--font-display);
+ font-size: 67px;
+ letter-spacing: 0.02em;
+ color: var(--text);
+ margin-bottom: var(--space-md);
+ line-height: 1;
+ }
+
+ .start-subtitle {
+ font-size: 16px;
+ color: var(--muted);
+ margin-bottom: var(--space-2xl);
+ letter-spacing: 0.04em;
+ }
+
+ .start-btn {
+ background: transparent;
+ border: 1px solid var(--accent);
+ color: var(--accent);
+ padding: var(--space-md) var(--space-2xl);
+ font-family: var(--font-body);
+ font-size: 12px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 300ms var(--ease-swift);
+ }
+
+ .start-btn:hover {
+ background: var(--accent);
+ color: var(--bg);
+ }
+
+ /* Responsive */
+ @media (max-width: 768px) {
+ .wordmark {
+ font-size: 28px;
+ }
+
+ .guess-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .reveal-era, .gameover-title {
+ font-size: 38px;
+ }
+
+ .start-title {
+ font-size: 48px;
+ }
+ }
+ </style>
+</head>
+<body>
+ <!-- Fixed Header -->
+ <header>
+ <div class="wordmark">Designer Wallcoverings</div>
+ </header>
+
+ <!-- Scoreboard -->
+ <div class="scoreboard">
+ <div class="score-item">
+ <span>Score</span>
+ <span class="score-value" id="score">0</span>
+ </div>
+ <div class="score-item">
+ <span>Best</span>
+ <span class="score-value accent" id="bestScore">0</span>
+ </div>
+ </div>
+
+ <!-- Start Screen -->
+ <div class="start-overlay" id="startOverlay">
+ <div class="start-content">
+ <h1 class="start-title">Which Design Era?</h1>
+ <p class="start-subtitle">Test your eye for interior design history across 8 rounds</p>
+ <button class="start-btn" onclick="startGame()">Begin Game</button>
+ </div>
+ </div>
+
+ <!-- Game Container -->
+ <div class="game-container">
+ <div class="round-indicator">Round <span id="currentRound">1</span> of 8</div>
+
+ <!-- Vignette Stage -->
+ <div class="stage" id="stage">
+ <!-- Victorian -->
+ <div class="vignette victorian" id="victorian">
+ <div class="victorian-wall"></div>
+ <div class="victorian-molding"></div>
+ <div class="victorian-floor"></div>
+ <div class="victorian-chair">
+ <div class="victorian-chair-back"></div>
+ <div class="victorian-chair-seat"></div>
+ <div class="victorian-chair-legs"></div>
+ </div>
+ </div>
+
+ <!-- Art Deco -->
+ <div class="vignette artdeco" id="artdeco">
+ <div class="artdeco-wall"></div>
+ <div class="artdeco-sunburst"></div>
+ <div class="artdeco-band"></div>
+ <div class="artdeco-floor"></div>
+ <div class="artdeco-table">
+ <div class="artdeco-table-top"></div>
+ <div class="artdeco-table-base"></div>
+ </div>
+ </div>
+
+ <!-- Mid-Century Modern -->
+ <div class="vignette midcentury" id="midcentury">
+ <div class="midcentury-wall"></div>
+ <div class="midcentury-panel"></div>
+ <div class="midcentury-floor"></div>
+ <div class="midcentury-rug"></div>
+ <div class="midcentury-chair">
+ <div class="midcentury-chair-back"></div>
+ <div class="midcentury-chair-seat"></div>
+ <div class="midcentury-chair-legs"></div>
+ </div>
+ </div>
+
+ <!-- Grandmillennial -->
+ <div class="vignette grandmillennial" id="grandmillennial">
+ <div class="grandmillennial-wall"></div>
+ <div class="grandmillennial-wainscoting"></div>
+ <div class="grandmillennial-floor"></div>
+ <div class="grandmillennial-basket">
+ <div class="grandmillennial-basket-handle"></div>
+ <div class="grandmillennial-basket-body"></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Guess Buttons -->
+ <div class="guess-grid" id="guessGrid">
+ <button class="guess-btn" onclick="makeGuess('victorian')">Victorian</button>
+ <button class="guess-btn" onclick="makeGuess('artdeco')">Art Deco</button>
+ <button class="guess-btn" onclick="makeGuess('midcentury')">Mid-Century Modern</button>
+ <button class="guess-btn" onclick="makeGuess('grandmillennial')">Grandmillennial</button>
+ </div>
+ </div>
+
+ <!-- Reveal Overlay -->
+ <div class="reveal-overlay" id="revealOverlay">
+ <div class="reveal-content">
+ <div class="reveal-era" id="revealEra">Victorian</div>
+ <p class="reveal-fact" id="revealFact">Fact goes here</p>
+ <button class="next-btn" onclick="nextRound()">Continue</button>
+ </div>
+ </div>
+
+ <!-- Game Over Overlay -->
+ <div class="gameover-overlay" id="gameoverOverlay">
+ <div class="gameover-content">
+ <div class="gameover-title">Game Complete</div>
+ <div class="final-score" id="finalScore">Final Score: 0/8</div>
+ <div class="best-score" id="finalBest">Personal Best: 0</div>
+ <button class="restart-btn" onclick="restartGame()">Play Again</button>
+ </div>
+ </div>
+
+ <script>
+ // Game Data
+ const eras = ['victorian', 'artdeco', 'midcentury', 'grandmillennial'];
+
+ const facts = {
+ victorian: "Victorian interiors (1837-1901) favored ornate walnut furniture, deep jewel tones, and elaborate moldings. The era embraced maximalism—pattern on pattern, heavy drapery, and carved details that signaled wealth and refinement.",
+ artdeco: "Art Deco (1920s-1930s) brought geometric precision and luxury materials like lacquer, chrome, and exotic woods. Sunburst motifs, zigzag patterns, and stepped forms reflected the machine age and Jazz Age optimism.",
+ midcentury: "Mid-Century Modern (1945-1969) emphasized organic shapes, clean lines, and honest materials. Teak, walnut, and bold textiles met open floor plans, bringing the outdoors in through expansive glass and biomorphic forms.",
+ grandmillennial: "Grandmillennial (2010s-present) revives chintz, wicker, and needlepoint with ironic appreciation. This 'granny chic' movement celebrates traditional patterns and collected antiques through a contemporary, curated lens."
+ };
+
+ const eraNames = {
+ victorian: 'Victorian',
+ artdeco: 'Art Deco',
+ midcentury: 'Mid-Century Modern',
+ grandmillennial: 'Grandmillennial'
+ };
+
+ // Game State
+ let currentRound = 1;
+ let score = 0;
+ let currentEra = null;
+ let roundSequence = [];
+ let canGuess = false;
+
+ // Load best score
+ let bestScore = parseInt(localStorage.getItem('designEraBestScore') || '0');
+ document.getElementById('bestScore').textContent = bestScore;
+
+ function startGame() {
+ document.getElementById('startOverlay').classList.add('hidden');
+ generateRounds();
+ setTimeout(() => loadRound(), 300);
+ }
+
+ function generateRounds() {
+ roundSequence = [];
+ for (let i = 0; i < 8; i++) {
+ roundSequence.push(eras[Math.floor(Math.random() * eras.length)]);
+ }
+ }
+
+ function loadRound() {
+ if (currentRound > 8) {
+ endGame();
+ return;
+ }
+
+ currentEra = roundSequence[currentRound - 1];
+ canGuess = true;
+
+ // Update UI
+ document.getElementById('currentRound').textContent = currentRound;
+
+ // Hide all vignettes
+ document.querySelectorAll('.vignette').forEach(v => v.classList.remove('active'));
+
+ // Show current era vignette
+ setTimeout(() => {
+ document.getElementById(currentEra).classList.add('active');
+ }, 50);
+
+ // Reset buttons
+ document.querySelectorAll('.guess-btn').forEach(btn => {
+ btn.classList.remove('correct', 'wrong');
+ btn.disabled = false;
+ });
+ }
+
+ function makeGuess(guess) {
+ if (!canGuess) return;
+ canGuess = false;
+
+ const isCorrect = guess === currentEra;
+
+ // Update button states
+ document.querySelectorAll('.guess-btn').forEach(btn => {
+ btn.disabled = true;
+ const btnEra = btn.getAttribute('onclick').match(/'([^']+)'/)[1];
+ if (btnEra === currentEra) {
+ btn.classList.add('correct');
+ } else if (btnEra === guess && !isCorrect) {
+ btn.classList.add('wrong');
+ }
+ });
+
+ if (isCorrect) {
+ score++;
+ document.getElementById('score').textContent = score;
+ }
+
+ // Show reveal after brief delay
+ setTimeout(() => showReveal(isCorrect), 600);
+ }
+
+ function showReveal(isCorrect) {
+ document.getElementById('revealEra').textContent = eraNames[currentEra];
+ document.getElementById('revealFact').textContent = facts[currentEra];
+ document.getElementById('revealOverlay').classList.add('active');
+ }
+
+ function nextRound() {
+ document.getElementById('revealOverlay').classList.remove('active');
+ currentRound++;
+
+ setTimeout(() => loadRound(), 400);
+ }
+
+ function endGame() {
+ // Update best score
+ if (score > bestScore) {
+ bestScore = score;
+ localStorage.setItem('designEraBestScore', bestScore.toString());
+ document.getElementById('bestScore').textContent = bestScore;
+ }
+
+ // Show game over
+ document.getElementById('finalScore').textContent = `Final Score: ${score}/8`;
+ document.getElementById('finalBest').textContent = `Personal Best: ${bestScore}`;
+ document.getElementById('gameoverOverlay').classList.add('active');
+ }
+
+ function restartGame() {
+ document.getElementById('gameoverOverlay').classList.remove('active');
+ currentRound = 1;
+ score = 0;
+ document.getElementById('score').textContent = '0';
+ generateRounds();
+ setTimeout(() => loadRound(), 400);
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/kimi.png b/data/artifacts/0219528ac7d7/kimi.png
new file mode 100644
index 0000000..704bc6a
Binary files /dev/null and b/data/artifacts/0219528ac7d7/kimi.png differ
diff --git a/data/artifacts/0219528ac7d7/qwen25-7b.html b/data/artifacts/0219528ac7d7/qwen25-7b.html
new file mode 100644
index 0000000..db5e824
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/qwen25-7b.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #f7efe6;
+ --surface: #fff9f1;
+ --text: #3a2c22;
+ --muted: #a08c7a;
+ --accent: #c65f38;
+ --line: 1px solid var(--text);
+ --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18), 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', Georgia, serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ header {
+ width: 280px;
+ text-align: left;
+ font-size: 56px;
+ letter-spacing: .18em;
+ color: var(--text);
+ margin-bottom: 32px;
+ }
+ .game-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 48px;
+ }
+ .vignette {
+ width: 300px;
+ height: 400px;
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--surface);
+ }
+ .era-button {
+ font-size: 20px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ padding: 8px 16px;
+ margin: 4px;
+ border: none;
+ cursor: pointer;
+ background-color: var(--surface);
+ color: var(--text);
+ }
+ .era-button:hover {
+ background-color: var(--muted);
+ }
+ .score-container {
+ font-size: 16px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ margin-top: 48px;
+ }
+ #result, #fact {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ color: var(--text);
+ padding: 20px;
+ border-radius: 14px;
+ background-color: var(--surface);
+ }
+ </style>
+</head>
+<body>
+<header>
+ DESIGNER WALLCOVERINGS
+</header>
+<div class="game-container">
+ <div id="vignette" class="vignette"></div>
+ <button class="era-button" onclick="guess('Victorian')">Victorian</button>
+ <button class="era-button" onclick="guess('Art Deco')">Art Deco</button>
+ <button class="era-button" onclick="guess('Mid-Century Modern')">Mid-Century Modern</button>
+ <button class="era-button" onclick="guess('Grandmillennial')">Grandmillennial</button>
+ <div class="score-container">
+ <span id="score">0/8</span> - <span id="bestScore">0/8</span>
+ </div>
+ <div id="result"></div>
+ <div id="fact"></div>
+</div>
+<script>
+ const LOCAL_STORAGE_KEY = 'which-design-era-score';
+
+ let score = localStorage.getItem(LOCAL_STORAGE_KEY) || 0;
+ document.getElementById('score').textContent = `${score}/8`;
+ document.getElementById('bestScore').textContent = `Best: ${score}/8`;
+
+ function guess(era) {
+ const vignette = document.getElementById('vignette');
+ const result = document.getElementById('result');
+ const fact = document.getElementById('fact');
+
+ switch (era) {
+ case 'Victorian':
+ vignette.style.backgroundImage = `
+ linear-gradient(to bottom, #f7efe6 0%, #d9b48c 100%),
+ linear-gradient(#a3522e, #4c3524)
+ `;
+ break;
+ case 'Art Deco':
+ vignette.style.backgroundImage = `
+ linear-gradient(to bottom, #f7efe6 0%, #d9b48c 100%),
+ radial-gradient(circle at top left, var(--accent) 35%, transparent 55%),
+ radial-gradient(circle at bottom right, var(--accent) 35%, transparent 55%)
+ `;
+ break;
+ case 'Mid-Century Modern':
+ vignette.style.backgroundImage = `
+ linear-gradient(to bottom, #f7efe6 0%, #d9b48c 100%),
+ repeating-linear-gradient(45deg, var(--accent) 2px, transparent 2px)
+ `;
+ break;
+ case 'Grandmillennial':
+ vignette.style.backgroundImage = `
+ linear-gradient(to bottom, #f7efe6 0%, #d9b48c 100%),
+ radial-gradient(circle at center, var(--accent) 35%, transparent 55%),
+ radial-gradient(circle at top right, var(--accent) 35%, transparent 55%)
+ `;
+ break;
+ }
+
+ if (era === 'Victorian') {
+ result.textContent = 'Correct!';
+ fact.textContent = 'Victorian era is known for its elaborate and ornate designs.';
+ score++;
+ } else {
+ result.textContent = 'Wrong! Try Again.';
+ fact.textContent = `The vignette was from the ${vignette.style.backgroundImage.split(' ')[0].replace(/"/g, '')} era.`;
+ }
+
+ if (score >= 8) {
+ document.getElementById('result').style.display = 'none';
+ document.getElementById('fact').textContent = 'Congratulations! You got all correct!';
+ fact.style.color = var(--accent);
+ }
+
+ localStorage.setItem(LOCAL_STORAGE_KEY, score);
+ }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/qwen25-7b.png b/data/artifacts/0219528ac7d7/qwen25-7b.png
new file mode 100644
index 0000000..7ea540d
Binary files /dev/null and b/data/artifacts/0219528ac7d7/qwen25-7b.png differ
diff --git a/data/artifacts/0219528ac7d7/qwen3-14b.html b/data/artifacts/0219528ac7d7/qwen3-14b.html
new file mode 100644
index 0000000..6e3e7dc
--- /dev/null
+++ b/data/artifacts/0219528ac7d7/qwen3-14b.html
@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #e0e0e0;
+ --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --font-display: "Playfair Display", Georgia, serif;
+ --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ html, body {
+ height: 100%;
+ font-family: var(--font-body);
+ background-color: var(--bg);
+ color: var(--text);
+ overflow: hidden;
+ }
+
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 24px;
+ background-color: var(--surface);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ z-index: 1000;
+ }
+
+ header h1 {
+ font-family: var(--font-display);
+ font-size: 48px;
+ letter-spacing: 0.18em;
+ color: var(--text);
+ }
+
+ main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ padding: 96px 24px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .vignette {
+ width: 100%;
+ height: 100%;
+ max-width: 600px;
+ max-height: 600px;
+ background: linear-gradient(135deg, var(--accent) 25%, var(--muted) 50%, var(--surface) 75%);
+ background-size: 400% 400%;
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ animation: drift 18s linear infinite;
+ position: relative;
+ }
+
+ .era {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 16px;
+ opacity: 0;
+ pointer-events: none;
+ font-family: var(--font-body);
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--text);
+ }
+
+ .scoreboard {
+ position: absolute;
+ top: 24px;
+ left: 24px;
+ font-size: 16px;
+ color: var(--muted);
+ font-family: var(--font-body);
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ }
+
+ .buttons {
+ position: absolute;
+ bottom: 24px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ flex-wrap: wrap;
+ }
+
+ .button {
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: 12px 24px;
+ font-size: 14px;
+ color: var(--text);
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ cursor: pointer;
+ transition: all 150ms var(--ease);
+ }
+
+ .button:hover {
+ background-color: var(--muted);
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text);
+ font-family: var(--font-display);
+ font-size: 32px;
+ letter-spacing: 0.18em;
+ z-index: 999;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 300ms var(--ease);
+ }
+
+ .overlay.show {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ @keyframes drift {
+ 0% { background-position: 0% 50%; }
+ 100% { background-position: 100% 50%; }
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </header>
+
+ <main>
+ <div class="vignette" id="vignette">
+ <div class="era" id="era">Loading...</div>
+ <div class="scoreboard" id="scoreboard">Score: 0 | Rounds: 0</div>
+ <div class="buttons" id="buttons"></div>
+ </div>
+
+ <div class="overlay" id="overlay">
+ <div id="overlayContent"></div>
+ </div>
+ </main>
+
+ <script>
+ const eras = [
+ { name: "Victorian", pattern: "linear-gradient(135deg, #a67c52 20%, #b59f8a 50%, #c9a961 80%)" },
+ { name: "Art Deco", pattern: "linear-gradient(135deg, #2f4c39 20%, #605a51 50%, #8a8578 80%)" },
+ { name: "Mid-Century Modern", pattern: "linear-gradient(135deg, #c65f38 20%, #e0a458 50%, #f7efe6 80%)" },
+ { name: "Grandmillennial", pattern: "linear-gradient(135deg, #ff2e88 20%, #00e5ff 50%, #b0472e 80%)" }
+ ];
+
+ const vignette = document.getElementById("vignette");
+ const eraText = document.getElementById("era");
+ const buttons = document.getElementById("buttons");
+ const overlay = document.getElementById("overlay");
+ const overlayContent = document.getElementById("overlayContent");
+ const scoreboard = document.getElementById("scoreboard");
+
+ let currentEra = null;
+ let score = 0;
+ let round = 0;
+ let bestScore = parseInt(localStorage.getItem("bestScore")) || 0;
+
+ function getRandomEra() {
+ return eras[Math.floor(Math.random() * eras.length)];
+ }
+
+ function createButtons() {
+ buttons.innerHTML = "";
+ eras.forEach(era => {
+ const btn = document.createElement("button");
+ btn.textContent = era.name;
+ btn.classList.add("button");
+ btn.addEventListener("click", () => checkGuess(era.name));
+ buttons.appendChild(btn);
+ });
+ }
+
+ function checkGuess(guess) {
+ if (guess === currentEra.name) {
+ score++;
+ showOverlay("Correct! 🎉", "green");
+ } else {
+ showOverlay("Wrong! 😕", "red");
+ }
+
+ round++;
+ if (round >= 8) {
+ endGame();
+ } else {
+ currentEra = getRandomEra();
+ updateVignette();
+ updateScoreboard();
+ }
+ }
+
+ function updateVignette() {
+ const current = currentEra;
+ const bg = current.pattern;
+ vignette.style.backgroundImage = bg;
+ eraText.textContent = current.name;
+ eraText.style.animation = "fadeUp 0.7s var(--ease) both";
+ }
+
+ function updateScoreboard() {
+ scoreboard.textContent = `Score: ${score} | Rounds: ${round}`;
+ }
+
+ function showOverlay(message, color) {
+ overlayContent.textContent = message;
+ overlay.style.color = color;
+ overlay.classList.add("show");
+
+ setTimeout(() => {
+ overlay.classList.remove("show");
+ }, 1500);
+ }
+
+ function endGame() {
+ const result = score > bestScore ? "New Best!" : "Game Over";
+ showOverlay(`${result} Your Score: ${score} | Best: ${bestScore}`, score > bestScore ? "gold" : "red");
+ if (score > bestScore) {
+ localStorage.setItem("bestScore", score);
+ }
+ }
+
+ function startGame() {
+ score = 0;
+ round = 0;
+ currentEra = getRandomEra();
+ updateVignette();
+ updateScoreboard();
+ createButtons();
+ }
+
+ // Initialize game
+ startGame();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0219528ac7d7/qwen3-14b.png b/data/artifacts/0219528ac7d7/qwen3-14b.png
new file mode 100644
index 0000000..d831aa0
Binary files /dev/null and b/data/artifacts/0219528ac7d7/qwen3-14b.png differ
diff --git a/data/artifacts/258516d076e6/claude-code.html b/data/artifacts/258516d076e6/claude-code.html
new file mode 100644
index 0000000..d7079ac
--- /dev/null
+++ b/data/artifacts/258516d076e6/claude-code.html
@@ -0,0 +1,482 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<title>Designer Wallcoverings — Shop by Colour</title>
+<style>
+ :root{
+ /* ——— design tokens (ivory-gallery) ——— */
+ --bg:#faf8f4;
+ --surface:#ffffff;
+ --ink:#1c1a17; /* darkest ink — used for wordmark */
+ --text:#1c1a17;
+ --muted:#9b948a;
+ --accent:#b0472e; /* the one jewel accent */
+ --accent-deep:#8a3521;
+ --line:rgba(28,26,23,.14);
+ --line-soft:rgba(28,26,23,.08);
+ --shadow:0 8px 24px rgba(28,26,23,.10);
+ --shadow-hover:0 16px 48px rgba(28,26,23,.18);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Cormorant Garamond','Didot','Bodoni MT','Playfair Display','EB Garamond',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
+ }
+
+ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
+ html,body{margin:0;padding:0;}
+ body{
+ background:var(--bg);
+ color:var(--text);
+ font-family:var(--sans);
+ font-size:16px;
+ line-height:1.55;
+ -webkit-font-smoothing:antialiased;
+ overflow-x:hidden;
+ }
+ /* ambient slow drift */
+ body::before{
+ content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
+ background:
+ radial-gradient(60% 50% at 18% 8%, rgba(176,71,46,.05), transparent 60%),
+ radial-gradient(55% 55% at 88% 92%, rgba(47,76,57,.05), transparent 60%);
+ animation:drift 20s ease-in-out infinite alternate;
+ }
+ @keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1);}to{transform:translate3d(2%,1%,0) scale(1.06);}}
+
+ /* ——— header / wordmark lockup ——— */
+ header{
+ position:sticky;top:0;z-index:50;
+ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
+ padding:14px clamp(16px,4vw,40px);
+ background:rgba(250,248,244,.86);
+ backdrop-filter:saturate(1.1) blur(10px);
+ border-bottom:1px solid var(--line);
+ }
+ .wordmark{
+ font-family:var(--serif);
+ color:var(--ink);
+ text-transform:uppercase;
+ letter-spacing:.18em;
+ font-weight:600;
+ line-height:.94;
+ display:flex;flex-direction:column;
+ }
+ .wordmark span{font-size:clamp(26px,5.4vw,40px);display:block;}
+ .wordmark .m2{color:var(--ink);}
+ .scoreboard{
+ font-family:var(--sans);
+ text-transform:uppercase;
+ letter-spacing:.22em;
+ font-size:11px;
+ color:var(--muted);
+ text-align:right;
+ line-height:1.5;
+ flex-shrink:0;
+ }
+ .scoreboard b{display:block;color:var(--accent);font-weight:600;}
+
+ main{max-width:960px;margin:0 auto;padding:clamp(24px,5vw,64px) clamp(16px,4vw,40px) 96px;}
+
+ .eyebrow{
+ font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
+ font-weight:600;margin:0 0 var(--sp-3);
+ }
+ .hero-title{
+ font-family:var(--serif);font-weight:600;
+ font-size:clamp(38px,8vw,66px);line-height:1.02;letter-spacing:.005em;
+ margin:0 0 var(--sp-4);color:var(--ink);
+ }
+ .hero-title em{font-style:italic;color:var(--accent);}
+ .lede{
+ font-size:clamp(16px,2.4vw,21px);color:#4a463f;max-width:52ch;margin:0 auto var(--sp-8);
+ text-align:center;
+ }
+ .hero{text-align:center;animation:fadeUp .8s var(--ease) both;}
+
+ /* ——— colour wheel ——— */
+ .wheel-wrap{
+ position:relative;width:min(78vw,340px);aspect-ratio:1;margin:var(--sp-6) auto var(--sp-8);
+ animation:fadeUp .8s var(--ease) .12s both;
+ filter:drop-shadow(0 18px 34px rgba(28,26,23,.14));
+ }
+ .wheel{width:100%;height:100%;touch-action:none;cursor:grab;display:block;user-select:none;}
+ .wheel:active{cursor:grabbing;}
+ .wheel path.seg{transition:opacity .28s var(--ease), stroke-width .2s var(--ease);}
+ .wheel .knob{transition:transform .35s var(--ease);}
+
+ .wheel-center{
+ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
+ pointer-events:none;text-align:center;
+ }
+ .wc-cap{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
+ .wc-name{
+ font-family:var(--serif);font-size:clamp(24px,6.6vw,34px);color:var(--ink);line-height:1;margin:4px 0 2px;
+ font-weight:600;transition:opacity .3s var(--ease);
+ }
+ .wc-hex{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:600;}
+ .hint{text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:-14px 0 34px;}
+
+ /* ——— filmstrip ——— */
+ .strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin:0 0 var(--sp-4);
+ border-top:1px solid var(--line);padding-top:var(--sp-6);}
+ .strip-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,4.4vw,32px);margin:0;color:var(--ink);}
+ .strip-head .cnt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
+
+ .filmstrip{
+ display:flex;gap:var(--sp-6);overflow-x:auto;padding:4px 2px 20px;scroll-snap-type:x mandatory;
+ -webkit-overflow-scrolling:touch;scrollbar-width:none;
+ }
+ .filmstrip::-webkit-scrollbar{display:none;}
+ .card{
+ flex:0 0 auto;width:min(64vw,220px);scroll-snap-align:center;
+ background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
+ box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
+ opacity:0;transform:translateY(24px);
+ }
+ .card.in{animation:fadeUp .6s var(--ease) both;}
+ .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
+ .swatch{aspect-ratio:4/5;background-repeat:repeat;background-position:center;}
+ .meta{padding:14px 16px 16px;border-top:1px solid var(--line-soft);}
+ .cname{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);line-height:1.1;}
+ .ccode{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px;}
+ .ccode i{font-style:normal;color:var(--accent);}
+
+ /* ——— share bar ——— */
+ .share{
+ display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;
+ margin:var(--sp-12) auto 0;padding-top:var(--sp-8);border-top:1px solid var(--line);
+ }
+ .share .lbl{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-right:2px;}
+ .sbtn{
+ display:inline-flex;align-items:center;justify-content:center;gap:8px;
+ height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);
+ background:var(--surface);color:var(--ink);cursor:pointer;
+ font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
+ transition:transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
+ }
+ .sbtn svg{width:16px;height:16px;display:block;}
+ .sbtn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow);}
+ .sbtn.icon{width:44px;padding:0;}
+
+ /* footer brand */
+ .foot{
+ text-align:center;margin-top:var(--sp-16);padding-top:var(--sp-8);border-top:1px solid var(--line-soft);
+ }
+ .foot .fw{font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;font-size:15px;color:var(--ink);font-weight:600;}
+ .foot .fc{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
+
+ /* toast overlay */
+ .toast{
+ position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:100;
+ background:var(--ink);color:var(--bg);padding:14px 22px;border-radius:12px;
+ font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
+ box-shadow:0 12px 40px rgba(28,26,23,.3);opacity:0;pointer-events:none;
+ transition:opacity .3s var(--ease),transform .3s var(--ease);
+ }
+ .toast.show{opacity:1;transform:translate(-50%,0);}
+ .toast b{color:var(--accent);}
+
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
+ @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;}}
+</style>
+</head>
+<body>
+ <header>
+ <div class="wordmark" aria-label="Designer Wallcoverings">
+ <span class="m1">Designer</span>
+ <span class="m2">Wallcoverings</span>
+ </div>
+ <div class="scoreboard">
+ Colour Atelier
+ <b>Shop by Colour</b>
+ </div>
+ </header>
+
+ <main>
+ <section class="hero">
+ <p class="eyebrow">The Palette Edit</p>
+ <h1 class="hero-title">Shop by <em>Colour</em></h1>
+ <p class="lede">Turn the wheel to a hue you love. Each tone unfurls a curated filmstrip of four wallcoverings — drawn in that colour family, named the way our studio names them.</p>
+ </section>
+
+ <div class="wheel-wrap">
+ <svg class="wheel" id="wheel" viewBox="0 0 300 300" role="slider" aria-label="Colour selector" tabindex="0" aria-valuemin="0" aria-valuemax="11" aria-valuenow="0">
+ <g id="segs"></g>
+ <circle cx="150" cy="150" r="60" fill="var(--surface)"></circle>
+ <circle cx="150" cy="150" r="60" fill="none" stroke="var(--line)" stroke-width="1"></circle>
+ <g id="knob" class="knob">
+ <circle cx="150" cy="16" r="11" fill="var(--surface)" stroke="var(--accent)" stroke-width="2"></circle>
+ <circle cx="150" cy="16" r="4" fill="var(--accent)"></circle>
+ </g>
+ </svg>
+ <div class="wheel-center">
+ <div class="wc-cap">Colour Family</div>
+ <div class="wc-name" id="wcName">Rouge</div>
+ <div class="wc-hex" id="wcHex">#B0472E</div>
+ </div>
+ </div>
+ <p class="hint">Drag the wheel · tap a hue</p>
+
+ <div class="strip-head">
+ <h2 id="stripTitle">In the Rouge family</h2>
+ <span class="cnt">Four Patterns</span>
+ </div>
+ <div class="filmstrip" id="strip" aria-live="polite"></div>
+
+ <div class="share">
+ <span class="lbl">Share this palette</span>
+ <button class="sbtn" id="copyBtn" type="button" aria-label="Copy link">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/></svg>
+ Copy Link
+ </button>
+ <button class="sbtn icon" data-net="Pinterest" type="button" aria-label="Share on Pinterest">
+ <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 4 5.9 4 9.1c0 1.9.7 3.6 2.3 4.2.3.1.5 0 .5-.3l.2-.9c.1-.3 0-.4-.2-.6-.4-.5-.7-1.2-.7-2.1 0-2.7 2-5.1 5.3-5.1 2.9 0 4.5 1.8 4.5 4.1 0 3.1-1.4 5.7-3.4 5.7-1.1 0-2-.9-1.7-2.1.3-1.3.9-2.7.9-3.7 0-.9-.5-1.6-1.4-1.6-1.1 0-2 1.2-2 2.7 0 1 .3 1.6.3 1.6l-1.3 5.6c-.4 1.7-.1 3.7 0 3.9 0 .1.2.2.3.1.1-.1 1.6-2 2.1-3.8l.8-3c.4.8 1.6 1.4 2.8 1.4 3.6 0 6.1-3.3 6.1-7.7C21 5.3 17.9 2 12 2z"/></svg>
+ </button>
+ <button class="sbtn icon" data-net="Facebook" type="button" aria-label="Share on Facebook">
+ <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 9h3l.4-3H14V4.3c0-.9.3-1.5 1.5-1.5H17V.1C16.7.1 15.6 0 14.4 0 11.9 0 10.2 1.5 10.2 4v2H7v3h3.2v9H14V9z"/></svg>
+ </button>
+ <button class="sbtn icon" data-net="Instagram" type="button" aria-label="Share on Instagram">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1" fill="currentColor" stroke="none"/></svg>
+ </button>
+ </div>
+
+ <div class="foot">
+ <div class="fw">Designer Wallcoverings</div>
+ <div class="fc">Est. Interiors · Handcrafted Palettes</div>
+ </div>
+ </main>
+
+ <div class="toast" id="toast">Copied</div>
+
+<script>
+(function(){
+ "use strict";
+
+ /* ——— colour families ——— */
+ var FAMS = [
+ {family:'Rouge', h:2, names:['Cinnabar','Oxblood','Rosewood','Claret']},
+ {family:'Terracotta', h:18, names:['Terracotta','Sienna','Persimmon','Umber']},
+ {family:'Ochre', h:40, names:['Ochre','Saffron','Honey','Antique Gold']},
+ {family:'Citrine', h:66, names:['Citrine','Chartreuse','Absinthe','Lichen']},
+ {family:'Sage', h:98, names:['Sage','Celadon','Verdigris','Moss']},
+ {family:'Forest', h:140, names:['Fern','Eucalyptus','Juniper','Pine']},
+ {family:'Teal', h:176, names:['Teal','Viridian','Peacock','Deep Sea']},
+ {family:'Cerulean', h:202, names:['Cerulean','Aquamarine','Delft','Prussian']},
+ {family:'Indigo', h:226, names:['Indigo','Sapphire','Cobalt','Midnight']},
+ {family:'Violet', h:262, names:['Violet','Amethyst','Wisteria','Iris']},
+ {family:'Aubergine', h:292, names:['Aubergine','Plum','Mulberry','Damson']},
+ {family:'Blush', h:330, names:['Blush','Rose','Fuchsia','Mauve']}
+ ];
+ /* per-card [saturation, lightness] — 4 distinct shades of the family */
+ var SHADES = [[56,45],[50,32],[44,60],[62,73]];
+ var N = FAMS.length;
+ var CX=150, CY=150, R=140, r=60;
+
+ /* ——— helpers ——— */
+ function hslHex(h,s,l){
+ s/=100; l/=100;
+ var k=function(n){return (n+h/30)%12;};
+ var a=s*Math.min(l,1-l);
+ var f=function(n){var c=l-a*Math.max(-1,Math.min(k(n)-3,Math.min(9-k(n),1)));return Math.round(255*c);};
+ var t=function(v){return ('0'+v.toString(16)).slice(-2);};
+ return ('#'+t(f(0))+t(f(8))+t(f(4))).toUpperCase();
+ }
+ function hsl(h,s,l){return 'hsl('+h+','+s+'%,'+l+'%)';}
+ function svgURL(s){return 'url("data:image/svg+xml,'+encodeURIComponent(s)+'")';}
+
+ /* ——— four visually-distinct CSS/SVG motifs ——— */
+ function motifDamask(g,c,c2){
+ var s="<svg xmlns='http://www.w3.org/2000/svg' width='72' height='96' viewBox='0 0 72 96'>"
+ +"<rect width='72' height='96' fill='"+g+"'/>"
+ +"<g fill='"+c+"'>"
+ +"<path d='M36 6 C52 22 52 40 36 52 C20 40 20 22 36 6 Z'/>"
+ +"<path d='M36 90 C52 74 52 56 36 44 C20 56 20 74 36 90 Z'/>"
+ +"<path d='M0 48 C10 40 10 56 0 48 Z'/><path d='M72 48 C62 40 62 56 72 48 Z'/>"
+ +"</g>"
+ +"<circle cx='36' cy='29' r='5.5' fill='"+g+"'/><circle cx='36' cy='67' r='5.5' fill='"+g+"'/>"
+ +"<g fill='"+c2+"'><circle cx='36' cy='29' r='2.4'/><circle cx='36' cy='67' r='2.4'/>"
+ +"<circle cx='12' cy='48' r='3'/><circle cx='60' cy='48' r='3'/></g>"
+ +"</svg>";
+ return {img:svgURL(s), size:'72px 96px'};
+ }
+ function motifStripe(g,c,c2){
+ var s="<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'>"
+ +"<rect width='48' height='24' fill='"+g+"'/>"
+ +"<rect x='5' width='11' height='24' fill='"+c+"'/>"
+ +"<rect x='24' width='3' height='24' fill='"+c2+"'/>"
+ +"<rect x='31' width='3' height='24' fill='"+c2+"'/>"
+ +"</svg>";
+ return {img:svgURL(s), size:'44px 22px'};
+ }
+ function motifTrellis(g,c,c2){
+ var s="<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'>"
+ +"<rect width='56' height='56' fill='"+g+"'/>"
+ +"<g stroke='"+c+"' stroke-width='2.2' fill='none' stroke-linecap='round'>"
+ +"<path d='M0 28 L28 0 L56 28 L28 56 Z'/>"
+ +"<path d='M28 0 L28 -0 M0 28 L56 28 M28 56 L28 56'/>"
+ +"</g>"
+ +"<circle cx='28' cy='28' r='4' fill='"+c2+"'/>"
+ +"<circle cx='0' cy='0' r='2.6' fill='"+c2+"'/><circle cx='56' cy='0' r='2.6' fill='"+c2+"'/>"
+ +"<circle cx='0' cy='56' r='2.6' fill='"+c2+"'/><circle cx='56' cy='56' r='2.6' fill='"+c2+"'/>"
+ +"</svg>";
+ return {img:svgURL(s), size:'52px 52px'};
+ }
+ function motifFloral(g,c,c2){
+ function flower(cx,cy,rr){
+ return "<g fill='"+c+"'>"
+ +"<circle cx='"+cx+"' cy='"+(cy-rr)+"' r='"+(rr*0.72)+"'/>"
+ +"<circle cx='"+(cx+rr)+"' cy='"+cy+"' r='"+(rr*0.72)+"'/>"
+ +"<circle cx='"+cx+"' cy='"+(cy+rr)+"' r='"+(rr*0.72)+"'/>"
+ +"<circle cx='"+(cx-rr)+"' cy='"+cy+"' r='"+(rr*0.72)+"'/>"
+ +"</g><circle cx='"+cx+"' cy='"+cy+"' r='"+(rr*0.5)+"' fill='"+c2+"'/>";
+ }
+ var s="<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>"
+ +"<rect width='64' height='64' fill='"+g+"'/>"
+ +flower(16,16,7)+flower(48,48,7)+flower(48,16,5)+flower(16,48,5)
+ +"</svg>";
+ return {img:svgURL(s), size:'60px 60px'};
+ }
+ var MOTIFS=[motifDamask,motifStripe,motifTrellis,motifFloral];
+
+ /* ——— build wheel wedges ——— */
+ var SVGNS='http://www.w3.org/2000/svg';
+ var segG=document.getElementById('segs');
+ function pt(rad,deg){var t=deg*Math.PI/180;return [CX+rad*Math.cos(t), CY+rad*Math.sin(t)];}
+ function segAngle(i){return i*(360/N)-90;}
+ for(var i=0;i<N;i++){
+ var deg=segAngle(i), half=(360/N)/2-0.6;
+ var a=deg-half, b=deg+half;
+ var o1=pt(R,a), o2=pt(R,b), in2=pt(r,b), in1=pt(r,a);
+ var d="M"+o1[0]+" "+o1[1]+" A"+R+" "+R+" 0 0 1 "+o2[0]+" "+o2[1]
+ +" L"+in2[0]+" "+in2[1]+" A"+r+" "+r+" 0 0 0 "+in1[0]+" "+in1[1]+" Z";
+ var p=document.createElementNS(SVGNS,'path');
+ p.setAttribute('d',d);
+ p.setAttribute('class','seg');
+ p.setAttribute('fill', hsl(FAMS[i].h,58,46));
+ p.setAttribute('stroke','var(--bg)');
+ p.setAttribute('stroke-width','2');
+ p.setAttribute('data-i',i);
+ segG.appendChild(p);
+ }
+
+ /* ——— render selection ——— */
+ var wheel=document.getElementById('wheel');
+ var knob=document.getElementById('knob');
+ var segs=segG.querySelectorAll('.seg');
+ var wcName=document.getElementById('wcName');
+ var wcHex=document.getElementById('wcHex');
+ var stripTitle=document.getElementById('stripTitle');
+ var strip=document.getElementById('strip');
+ var current=-1;
+
+ function select(i, silent){
+ i=((i%N)+N)%N;
+ if(i===current) return;
+ current=i;
+ var fam=FAMS[i];
+ for(var k=0;k<segs.length;k++){
+ var on=(k===i);
+ segs[k].style.opacity = on?'1':'.5';
+ segs[k].setAttribute('stroke', on?'var(--accent)':'var(--bg)');
+ segs[k].setAttribute('stroke-width', on?'3':'2');
+ }
+ knob.style.transform='rotate('+(i*(360/N))+'deg)';
+ wcName.style.opacity=0;
+ setTimeout(function(){
+ wcName.textContent=fam.family;
+ wcHex.textContent=hslHex(fam.h,58,45);
+ wcName.style.opacity=1;
+ }, silent?0:130);
+ stripTitle.textContent='In the '+fam.family+' family';
+ wheel.setAttribute('aria-valuenow', i);
+
+ /* filmstrip */
+ strip.innerHTML='';
+ for(var c=0;c<4;c++){
+ var sh=SHADES[c];
+ var main=hsl(fam.h, sh[0], sh[1]);
+ var dark=hsl(fam.h, Math.min(sh[0]+10,90), Math.max(sh[1]-16,12));
+ var ground=hsl(fam.h, 22, 95);
+ var m=MOTIFS[c](ground, main, dark);
+ var card=document.createElement('article');
+ card.className='card';
+ card.style.animationDelay=(c*0.09)+'s';
+ card.innerHTML=
+ "<div class='swatch' style=\"background-color:"+ground+";background-image:"+m.img+";background-size:"+m.size+"\"></div>"
+ +"<div class='meta'><div class='cname'>"+fam.names[c]+"</div>"
+ +"<div class='ccode'>"+fam.family+" · <i>"+hslHex(fam.h,sh[0],sh[1])+"</i></div></div>";
+ strip.appendChild(card);
+ void card.offsetWidth;
+ card.classList.add('in');
+ }
+ }
+
+ /* ——— pointer interaction ——— */
+ function angleToIndex(clientX,clientY){
+ var rect=wheel.getBoundingClientRect();
+ var x=(clientX-rect.left)/rect.width*300 - CX;
+ var y=(clientY-rect.top)/rect.height*300 - CY;
+ var dist=Math.sqrt(x*x+y*y);
+ if(dist < 30) return null; /* ignore dead center */
+ var deg=Math.atan2(y,x)*180/Math.PI;
+ return Math.round((deg+90)/(360/N));
+ }
+ var dragging=false;
+ function onDown(e){
+ dragging=true;
+ try{wheel.setPointerCapture(e.pointerId);}catch(_){}
+ var idx=angleToIndex(e.clientX,e.clientY);
+ if(idx!==null) select(idx);
+ e.preventDefault();
+ }
+ function onMove(e){
+ if(!dragging) return;
+ var idx=angleToIndex(e.clientX,e.clientY);
+ if(idx!==null) select(idx);
+ e.preventDefault();
+ }
+ function onUp(){dragging=false;}
+ wheel.addEventListener('pointerdown',onDown);
+ wheel.addEventListener('pointermove',onMove);
+ window.addEventListener('pointerup',onUp);
+ wheel.addEventListener('pointercancel',onUp);
+ wheel.addEventListener('keydown',function(e){
+ if(e.key==='ArrowRight'||e.key==='ArrowDown'){select(current+1);e.preventDefault();}
+ else if(e.key==='ArrowLeft'||e.key==='ArrowUp'){select(current-1);e.preventDefault();}
+ });
+
+ /* ——— share bar ——— */
+ var toast=document.getElementById('toast');
+ var toastTimer;
+ function showToast(html){
+ toast.innerHTML=html;
+ toast.classList.add('show');
+ clearTimeout(toastTimer);
+ toastTimer=setTimeout(function(){toast.classList.remove('show');},2200);
+ }
+ document.getElementById('copyBtn').addEventListener('click',function(){
+ var link=(location.href||'designerwallcoverings.com')+'#'+FAMS[current].family.toLowerCase();
+ if(navigator.clipboard&&navigator.clipboard.writeText){
+ navigator.clipboard.writeText(link).then(
+ function(){showToast('Link <b>copied</b> — '+FAMS[current].family);},
+ function(){showToast('Share the <b>'+FAMS[current].family+'</b> palette');}
+ );
+ } else {
+ showToast('Share the <b>'+FAMS[current].family+'</b> palette');
+ }
+ });
+ var netBtns=document.querySelectorAll('.sbtn[data-net]');
+ for(var b=0;b<netBtns.length;b++){
+ netBtns[b].addEventListener('click',function(){
+ showToast('Shared to <b>'+this.getAttribute('data-net')+'</b> — '+FAMS[current].family);
+ });
+ }
+
+ /* init */
+ select(0,true);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/258516d076e6/claude-code.png b/data/artifacts/258516d076e6/claude-code.png
new file mode 100644
index 0000000..09f77f7
Binary files /dev/null and b/data/artifacts/258516d076e6/claude-code.png differ
diff --git a/data/artifacts/edd68668d3dc/claude-code.html b/data/artifacts/edd68668d3dc/claude-code.html
new file mode 100644
index 0000000..dd424c0
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/claude-code.html
@@ -0,0 +1,1019 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Palette Atelier — Designer Wallcoverings</title>
+<style>
+ :root{
+ --bg:#0d0d0f;
+ --surface:#17171c;
+ --surface-2:#1e1e24;
+ --ink:#f5f2ea;
+ --muted:#8a8578;
+ --accent:#c9a961;
+ --accent-deep:#7d6a45;
+ --line:rgba(201,169,97,.22);
+ --line-soft:rgba(245,242,234,.08);
+ --shadow:0 8px 24px rgba(0,0,0,.42);
+ --shadow-hover:0 16px 48px rgba(0,0,0,.55);
+ --glow:0 0 24px rgba(201,169,97,.3);
+ --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;
+ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;
+ }
+
+ *{box-sizing:border-box;margin:0;padding:0}
+
+ html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+
+ body{
+ background:var(--bg);
+ color:var(--ink);
+ font-family:var(--sans);
+ font-size:16px;
+ line-height:1.55;
+ min-height:100vh;
+ overflow-x:hidden;
+ }
+
+ /* ambient drift */
+ body::before{
+ content:"";
+ position:fixed;
+ inset:-30%;
+ z-index:0;
+ background:
+ radial-gradient(60% 50% at 20% 15%, rgba(201,169,97,.08), transparent 60%),
+ radial-gradient(50% 45% at 85% 80%, rgba(125,106,69,.10), transparent 65%);
+ animation:drift 22s ease-in-out infinite alternate;
+ pointer-events:none;
+ }
+ @keyframes drift{
+ 0%{transform:translate(0,0) scale(1)}
+ 100%{transform:translate(-3%,2%) scale(1.06)}
+ }
+
+ /* ---------- HEADER ---------- */
+ header.topbar{
+ position:fixed;
+ top:0;left:0;right:0;
+ z-index:50;
+ height:78px;
+ display:flex;
+ align-items:center;
+ justify-content:space-between;
+ padding:0 var(--sp-8);
+ background:rgba(13,13,15,.82);
+ backdrop-filter:blur(14px);
+ border-bottom:1px solid var(--line-soft);
+ }
+
+ .wordmark{
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+ line-height:1;
+ color:var(--ink);
+ text-decoration:none;
+ }
+ .wordmark .wm-main{
+ font-family:var(--serif);
+ font-weight:600;
+ font-size:40px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--ink);
+ white-space:nowrap;
+ }
+ .wordmark .wm-sub{
+ font-family:var(--sans);
+ font-size:9.5px;
+ letter-spacing:.42em;
+ text-transform:uppercase;
+ color:var(--accent);
+ margin-top:6px;
+ padding-left:3px;
+ }
+
+ .header-tools{
+ display:flex;
+ align-items:center;
+ gap:var(--sp-6);
+ }
+ .header-tools .tag{
+ font-family:var(--sans);
+ font-size:11px;
+ letter-spacing:.2em;
+ text-transform:uppercase;
+ color:var(--muted);
+ }
+ .header-tools .tag b{color:var(--accent);font-weight:600}
+
+ /* ---------- LAYOUT ---------- */
+ main{
+ position:relative;
+ z-index:1;
+ max-width:1240px;
+ margin:0 auto;
+ padding:calc(78px + var(--sp-16)) var(--sp-8) var(--sp-16);
+ }
+
+ .lede{
+ text-align:center;
+ margin-bottom:var(--sp-12);
+ animation:fadeUp .8s var(--ease) both;
+ }
+ .lede .eyebrow{
+ font-family:var(--sans);
+ font-size:12px;
+ letter-spacing:.34em;
+ text-transform:uppercase;
+ color:var(--accent);
+ margin-bottom:var(--sp-4);
+ }
+ .lede h1{
+ font-family:var(--serif);
+ font-weight:500;
+ font-size:58px;
+ line-height:1.02;
+ letter-spacing:.005em;
+ }
+ .lede h1 em{font-style:italic;color:var(--accent)}
+ .lede p{
+ max-width:540px;
+ margin:var(--sp-4) auto 0;
+ color:var(--muted);
+ font-size:16px;
+ }
+
+ .studio{
+ display:grid;
+ grid-template-columns:340px 1fr;
+ gap:var(--sp-12);
+ align-items:start;
+ }
+ @media(max-width:900px){
+ .studio{grid-template-columns:1fr;gap:var(--sp-8)}
+ }
+
+ /* ---------- CONTROL COLUMN ---------- */
+ .control{
+ animation:fadeUp .8s var(--ease) .09s both;
+ }
+ .panel{
+ background:var(--surface);
+ border:1px solid var(--line-soft);
+ border-radius:14px;
+ padding:var(--sp-8) var(--sp-6);
+ box-shadow:var(--shadow);
+ }
+ .panel + .panel{margin-top:var(--sp-6)}
+
+ .panel-label{
+ font-family:var(--sans);
+ font-size:11px;
+ letter-spacing:.24em;
+ text-transform:uppercase;
+ color:var(--muted);
+ text-align:center;
+ margin-bottom:var(--sp-6);
+ }
+
+ /* wheel */
+ .wheel-wrap{
+ position:relative;
+ width:230px;
+ height:230px;
+ margin:0 auto var(--sp-6);
+ }
+ #wheel{
+ display:block;
+ width:230px;height:230px;
+ border-radius:50%;
+ cursor:crosshair;
+ box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.5);
+ }
+ .wheel-hub{
+ position:absolute;
+ top:50%;left:50%;
+ width:78px;height:78px;
+ transform:translate(-50%,-50%);
+ border-radius:50%;
+ background:var(--surface);
+ border:1px solid var(--line);
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ flex-direction:column;
+ pointer-events:none;
+ box-shadow:0 0 0 6px var(--surface), inset 0 0 20px rgba(0,0,0,.5);
+ }
+ .wheel-hub span{
+ font-family:var(--serif);
+ font-size:22px;
+ color:var(--ink);
+ line-height:1;
+ }
+ .wheel-hub small{
+ font-family:var(--sans);
+ font-size:8.5px;
+ letter-spacing:.2em;
+ text-transform:uppercase;
+ color:var(--muted);
+ margin-top:3px;
+ }
+ #marker{
+ position:absolute;
+ width:20px;height:20px;
+ border-radius:50%;
+ border:2px solid var(--ink);
+ box-shadow:0 0 0 2px rgba(0,0,0,.5), var(--glow);
+ transform:translate(-50%,-50%);
+ pointer-events:none;
+ transition:box-shadow .2s var(--ease);
+ }
+
+ /* harmony toggle */
+ .harmony{
+ display:flex;
+ gap:var(--sp-1);
+ background:var(--surface-2);
+ border:1px solid var(--line-soft);
+ border-radius:10px;
+ padding:4px;
+ }
+ .harmony button{
+ flex:1;
+ background:transparent;
+ border:none;
+ color:var(--muted);
+ font-family:var(--sans);
+ font-size:10.5px;
+ letter-spacing:.14em;
+ text-transform:uppercase;
+ padding:9px 4px;
+ border-radius:7px;
+ cursor:pointer;
+ transition:all .2s var(--ease);
+ }
+ .harmony button:hover{color:var(--ink)}
+ .harmony button.active{
+ background:linear-gradient(180deg,var(--accent),var(--accent-deep));
+ color:#1a160c;
+ font-weight:600;
+ box-shadow:0 2px 10px rgba(201,169,97,.3);
+ }
+
+ .btn-row{
+ display:flex;
+ flex-direction:column;
+ gap:var(--sp-3);
+ margin-top:var(--sp-6);
+ }
+ .btn{
+ font-family:var(--sans);
+ font-size:11.5px;
+ letter-spacing:.2em;
+ text-transform:uppercase;
+ padding:14px;
+ border-radius:10px;
+ cursor:pointer;
+ border:1px solid var(--line);
+ background:transparent;
+ color:var(--ink);
+ transition:all .2s var(--ease);
+ }
+ .btn:hover{border-color:var(--accent);color:var(--accent)}
+ .btn.primary{
+ background:linear-gradient(180deg,var(--accent),var(--accent-deep));
+ color:#1a160c;
+ font-weight:600;
+ border-color:transparent;
+ }
+ .btn.primary:hover{
+ color:#1a160c;
+ box-shadow:var(--glow);
+ transform:translateY(-1px);
+ }
+
+ /* ---------- PALETTE COLUMN ---------- */
+ .display{
+ animation:fadeUp .8s var(--ease) .18s both;
+ }
+
+ .swatches{
+ display:grid;
+ grid-template-columns:repeat(5,1fr);
+ gap:var(--sp-3);
+ border:1px solid var(--line-soft);
+ border-radius:14px;
+ overflow:hidden;
+ padding:var(--sp-3);
+ background:var(--surface);
+ box-shadow:var(--shadow);
+ }
+ @media(max-width:560px){
+ .swatches{grid-template-columns:repeat(2,1fr)}
+ }
+ .swatch{
+ position:relative;
+ border-radius:10px;
+ overflow:hidden;
+ cursor:pointer;
+ border:1px solid rgba(0,0,0,.25);
+ min-height:300px;
+ display:flex;
+ flex-direction:column;
+ justify-content:flex-end;
+ transition:transform .28s var(--ease), box-shadow .28s var(--ease);
+ }
+ .swatch:hover{
+ transform:translateY(-4px);
+ box-shadow:var(--shadow-hover);
+ z-index:2;
+ }
+ .swatch .meta{
+ padding:var(--sp-4) var(--sp-3) var(--sp-3);
+ background:linear-gradient(180deg,transparent, rgba(0,0,0,.55));
+ backdrop-filter:blur(1px);
+ }
+ .swatch .nm{
+ font-family:var(--serif);
+ font-size:19px;
+ line-height:1.05;
+ font-weight:600;
+ letter-spacing:.01em;
+ }
+ .swatch .hx{
+ font-family:var(--sans);
+ font-size:10.5px;
+ letter-spacing:.16em;
+ text-transform:uppercase;
+ margin-top:4px;
+ opacity:.82;
+ }
+ .swatch .copyhint{
+ position:absolute;
+ top:var(--sp-3);
+ left:50%;
+ transform:translateX(-50%) translateY(-8px);
+ font-family:var(--sans);
+ font-size:9px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ padding:5px 10px;
+ border-radius:20px;
+ background:rgba(13,13,15,.68);
+ color:var(--ink);
+ opacity:0;
+ transition:opacity .2s var(--ease), transform .2s var(--ease);
+ pointer-events:none;
+ white-space:nowrap;
+ }
+ .swatch:hover .copyhint{opacity:1;transform:translateX(-50%) translateY(0)}
+ .swatch.copied .copyhint{
+ opacity:1;
+ background:var(--accent);
+ color:#1a160c;
+ font-weight:700;
+ transform:translateX(-50%) translateY(0);
+ }
+
+ /* room preview */
+ .room-block{margin-top:var(--sp-8)}
+ .room-head{
+ display:flex;
+ align-items:baseline;
+ justify-content:space-between;
+ margin-bottom:var(--sp-4);
+ }
+ .room-head h3{
+ font-family:var(--serif);
+ font-weight:500;
+ font-size:26px;
+ }
+ .room-head span{
+ font-family:var(--sans);
+ font-size:10.5px;
+ letter-spacing:.2em;
+ text-transform:uppercase;
+ color:var(--muted);
+ }
+ .room{
+ height:180px;
+ border-radius:14px;
+ overflow:hidden;
+ display:flex;
+ border:1px solid var(--line-soft);
+ box-shadow:var(--shadow);
+ position:relative;
+ }
+ .room .wall{flex:1;position:relative;transition:background .5s var(--ease)}
+ /* subtle vertical shading to imply light */
+ .room::after{
+ content:"";
+ position:absolute;inset:0;
+ background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%,rgba(0,0,0,.22));
+ pointer-events:none;
+ }
+ .room .floor{
+ position:absolute;
+ left:0;right:0;bottom:0;
+ height:34px;
+ background:rgba(0,0,0,.32);
+ border-top:1px solid rgba(255,255,255,.05);
+ z-index:2;
+ }
+ .room .furn{
+ position:absolute;
+ bottom:34px;
+ z-index:3;
+ border-radius:6px 6px 0 0;
+ box-shadow:0 6px 20px rgba(0,0,0,.4);
+ }
+ .room .sofa{
+ left:8%;
+ width:180px;height:58px;
+ border-radius:14px;
+ }
+ .room .art{
+ right:14%;
+ bottom:78px;
+ width:74px;height:60px;
+ border-radius:3px;
+ border:4px solid rgba(255,255,255,.14);
+ }
+ .room .lamp{
+ right:8%;
+ width:8px;height:96px;
+ bottom:34px;
+ border-radius:4px;
+ }
+ .room .lamp::after{
+ content:"";
+ position:absolute;
+ top:-20px;left:50%;
+ transform:translateX(-50%);
+ width:44px;height:26px;
+ border-radius:50% 50% 40% 40%;
+ }
+
+ /* export card (offscreen render target) */
+ .export-stage{
+ position:fixed;
+ left:-9999px;top:0;
+ z-index:-1;
+ }
+ #card{
+ width:1080px;height:1080px;
+ background:var(--bg);
+ position:relative;
+ font-family:var(--serif);
+ overflow:hidden;
+ }
+
+ footer{
+ text-align:center;
+ margin-top:var(--sp-16);
+ padding-top:var(--sp-8);
+ border-top:1px solid var(--line-soft);
+ color:var(--muted);
+ font-size:11px;
+ letter-spacing:.2em;
+ text-transform:uppercase;
+ }
+ footer b{color:var(--accent);font-weight:600}
+
+ @keyframes fadeUp{
+ from{opacity:0;transform:translateY(28px)}
+ to{opacity:1;transform:none}
+ }
+
+ /* toast overlay */
+ #toast{
+ position:fixed;
+ bottom:var(--sp-8);
+ left:50%;
+ transform:translateX(-50%) translateY(20px);
+ background:var(--surface-2);
+ border:1px solid var(--line);
+ color:var(--ink);
+ font-family:var(--sans);
+ font-size:12px;
+ letter-spacing:.14em;
+ text-transform:uppercase;
+ padding:14px 26px;
+ border-radius:30px;
+ box-shadow:var(--shadow-hover);
+ opacity:0;
+ pointer-events:none;
+ transition:all .3s var(--ease);
+ z-index:100;
+ }
+ #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+ #toast b{color:var(--accent);font-weight:600}
+</style>
+</head>
+<body>
+
+<header class="topbar">
+ <a class="wordmark" href="#" aria-label="Designer Wallcoverings">
+ <span class="wm-main">Designer Wallcoverings</span>
+ <span class="wm-sub">Palette Atelier — Colour Studio</span>
+ </a>
+ <div class="header-tools">
+ <span class="tag">Harmony · <b id="modeTag">Analogous</b></span>
+ <span class="tag">Base · <b id="hueTag">28°</b></span>
+ </div>
+</header>
+
+<main>
+ <div class="lede">
+ <div class="eyebrow">The Curated Colour Story</div>
+ <h1>Build a <em>wallcovering</em> palette</h1>
+ <p>Choose a base hue on the wheel. We compose a five-swatch designer story — named, balanced, and ready to share.</p>
+ </div>
+
+ <div class="studio">
+ <!-- CONTROL -->
+ <section class="control">
+ <div class="panel">
+ <div class="panel-label">Base Hue</div>
+ <div class="wheel-wrap">
+ <canvas id="wheel" width="230" height="230"></canvas>
+ <div id="marker"></div>
+ <div class="wheel-hub">
+ <span id="hubHex">—</span>
+ <small>Base</small>
+ </div>
+ </div>
+ <div class="panel-label" style="margin-bottom:var(--sp-3)">Harmony</div>
+ <div class="harmony" id="harmony">
+ <button data-mode="analogous" class="active">Analogous</button>
+ <button data-mode="complementary">Complement</button>
+ <button data-mode="triadic">Triadic</button>
+ </div>
+ <div class="btn-row">
+ <button class="btn" id="shuffleBtn">↻ Reroll Hue</button>
+ <button class="btn primary" id="exportBtn">Export 1080 Card</button>
+ </div>
+ </div>
+ </section>
+
+ <!-- DISPLAY -->
+ <section class="display">
+ <div class="swatches" id="swatches"></div>
+
+ <div class="room-block">
+ <div class="room-head">
+ <h3>Room Preview</h3>
+ <span>Live styling</span>
+ </div>
+ <div class="room" id="room">
+ <div class="wall" id="wall"></div>
+ <div class="furn sofa" id="sofa"></div>
+ <div class="furn art" id="art"></div>
+ <div class="furn lamp" id="lamp"></div>
+ <div class="floor" id="floor"></div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <footer>
+ Designer Wallcoverings · <b>Palette Atelier</b> · Click any swatch to copy its hex
+ </footer>
+</main>
+
+<!-- export render target -->
+<div class="export-stage">
+ <canvas id="card" width="1080" height="1080"></canvas>
+</div>
+
+<div id="toast">Copied <b id="toastHex">#000000</b></div>
+
+<script>
+(function(){
+ "use strict";
+
+ /* ---------- color utils ---------- */
+ function hslToRgb(h,s,l){
+ h=(h%360+360)%360; s/=100; l/=100;
+ const c=(1-Math.abs(2*l-1))*s;
+ const x=c*(1-Math.abs((h/60)%2-1));
+ const m=l-c/2;
+ let r=0,g=0,b=0;
+ if(h<60){r=c;g=x;}
+ else if(h<120){r=x;g=c;}
+ else if(h<180){g=c;b=x;}
+ else if(h<240){g=x;b=c;}
+ else if(h<300){r=x;b=c;}
+ else{r=c;b=x;}
+ return [Math.round((r+m)*255),Math.round((g+m)*255),Math.round((b+m)*255)];
+ }
+ function rgbToHex(r,g,b){
+ return '#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('').toUpperCase();
+ }
+ function hslHex(h,s,l){const [r,g,b]=hslToRgb(h,s,l);return rgbToHex(r,g,b);}
+ function luminance(h,s,l){const [r,g,b]=hslToRgb(h,s,l);return (0.2126*r+0.7152*g+0.0722*b)/255;}
+
+ /* ---------- designer naming ---------- */
+ // hue buckets -> curated name pools; brightness modifies selection
+ const NAME_POOLS = {
+ neutralLight:['Alabaster','Oyster','Chantilly','Linen','Bone','Parchment','Ivory Veil'],
+ neutralMid:['Greige','Oatmeal','Putty','Fresco','Stone','Driftwood','Mushroom'],
+ neutralDark:['Ink','Graphite','Charcoal Silk','Slate','Basalt','Ironstone','Onyx'],
+ red:['Madder','Rosewood','Terra Rosa','Cinnabar','Claret','Persimmon'],
+ orange:['Amber','Sienna','Copper Leaf','Tigerlily','Marmalade','Ochre'],
+ yellow:['Brass','Saffron','Honey','Gilt','Chamois','Straw'],
+ green:['Celadon','Verdigris','Sage','Moss','Malachite','Eucalyptus','Fern'],
+ teal:['Peacock','Viridian','Teal Reserve','Lagoon','Juniper'],
+ blue:['Indigo','Delft','Prussian','Wedgwood','Cerulean','Slate Blue'],
+ purple:['Aubergine','Damson','Heather','Amethyst','Mulberry','Plum'],
+ pink:['Blush','Coral Rose','Fresco Pink','Camellia','Peony']
+ };
+ function hueFamily(h){
+ if(h<15||h>=345)return 'red';
+ if(h<45)return 'orange';
+ if(h<70)return 'yellow';
+ if(h<160)return 'green';
+ if(h<195)return 'teal';
+ if(h<255)return 'blue';
+ if(h<300)return 'purple';
+ return 'pink';
+ }
+ function nameFor(h,s,l,seedIndex){
+ let pool;
+ if(s<14){ // near-neutral
+ pool = l>68 ? NAME_POOLS.neutralLight : l<34 ? NAME_POOLS.neutralDark : NAME_POOLS.neutralMid;
+ } else {
+ pool = NAME_POOLS[hueFamily(h)] || NAME_POOLS.neutralMid;
+ if(l>80) pool = NAME_POOLS.neutralLight.concat(pool);
+ if(l<22) pool = NAME_POOLS.neutralDark.concat(pool);
+ }
+ // deterministic pick from pool using hue + seed so names feel intentional & stable
+ const idx = Math.abs(Math.round(h*3 + seedIndex*7 + l)) % pool.length;
+ return pool[idx];
+ }
+
+ /* ---------- state ---------- */
+ let baseHue = 28; // warm gold-ochre default
+ let mode = 'analogous';
+ const R = 115; // wheel radius (px) matched to canvas 230
+ let currentPalette = [];
+
+ const wheel = document.getElementById('wheel');
+ const ctx = wheel.getContext('2d');
+ const marker = document.getElementById('marker');
+ const swatchesEl = document.getElementById('swatches');
+
+ /* ---------- draw wheel ---------- */
+ function drawWheel(){
+ const cx=R, cy=R;
+ const inner=42;
+ for(let a=0;a<360;a++){
+ const start=(a-90)*Math.PI/180;
+ const end=(a+1.5-90)*Math.PI/180;
+ // radial saturation gradient
+ const grad=ctx.createRadialGradient(cx,cy,inner,cx,cy,R);
+ grad.addColorStop(0, hslHex(a,18,72));
+ grad.addColorStop(0.55, hslHex(a,58,54));
+ grad.addColorStop(1, hslHex(a,82,44));
+ ctx.beginPath();
+ ctx.moveTo(cx,cy);
+ ctx.arc(cx,cy,R,start,end);
+ ctx.closePath();
+ ctx.fillStyle=grad;
+ ctx.fill();
+ }
+ // inner shadow ring
+ ctx.beginPath();
+ ctx.arc(cx,cy,inner,0,Math.PI*2);
+ ctx.fillStyle='#17171c';
+ ctx.fill();
+ }
+
+ function positionMarker(){
+ const rad=(baseHue-90)*Math.PI/180;
+ const rr=R*0.78;
+ const x=R + rr*Math.cos(rad);
+ const y=R + rr*Math.sin(rad);
+ marker.style.left=x+'px';
+ marker.style.top=y+'px';
+ marker.style.background=hslHex(baseHue,68,52);
+ }
+
+ /* ---------- palette composition ---------- */
+ // Produce a curated 5-swatch wallcovering story.
+ // Slot roles: 0 pale ground, 1 soft mid, 2 anchor (base), 3 deep contrast, 4 metallic/jewel accent
+ function buildPalette(){
+ const h=baseHue;
+ let hues; // hues for [ground, mid, anchor, deep, accent]
+ if(mode==='analogous'){
+ hues=[h-24, h-12, h, h+16, h+32];
+ } else if(mode==='complementary'){
+ const comp=h+180;
+ hues=[h-14, h, h, comp, comp-10];
+ } else { // triadic
+ const t1=h+120, t2=h+240;
+ hues=[h-10, h, t1, t2, h+8];
+ }
+
+ // saturation & lightness profile per slot for a tasteful, high-contrast story
+ const profile=[
+ {s:16,l:86}, // pale ground (Alabaster-ish)
+ {s:24,l:66}, // soft mid (Greige)
+ {s:mode==='analogous'?46:52, l:48}, // anchor
+ {s:38,l:20}, // deep contrast (Ink)
+ {s:mode==='triadic'?58:64, l:52} // accent jewel/metal
+ ];
+ // ensure accent leans metallic when base is warm-ish (brass), else jewel
+ const pal=hues.map((hu,i)=>{
+ const p=profile[i];
+ const hex=hslHex(hu,p.s,p.l);
+ const nm=nameFor(((hu%360)+360)%360, p.s, p.l, i);
+ const lum=luminance(hu,p.s,p.l);
+ return {h:((hu%360)+360)%360, s:p.s, l:p.l, hex, name:nm, textDark:lum>0.5};
+ });
+ return pal;
+ }
+
+ /* ---------- render swatches ---------- */
+ function renderSwatches(){
+ currentPalette=buildPalette();
+ swatchesEl.innerHTML='';
+ currentPalette.forEach((c,i)=>{
+ const div=document.createElement('div');
+ div.className='swatch';
+ div.style.background=c.hex;
+ const tc = c.textDark ? '#1a160c' : 'var(--ink)';
+ div.innerHTML=`
+ <div class="copyhint">Click to copy</div>
+ <div class="meta" style="color:${tc}">
+ <div class="nm">${c.name}</div>
+ <div class="hx">${c.hex}</div>
+ </div>`;
+ // stagger entrance
+ div.style.animation=`fadeUp .6s var(--ease) ${i*70}ms both`;
+ div.addEventListener('click',()=>copyHex(c.hex,div));
+ swatchesEl.appendChild(div);
+ });
+ renderRoom();
+ updateTags();
+ }
+
+ /* ---------- room preview ---------- */
+ function renderRoom(){
+ const p=currentPalette;
+ // wall = mid tone, floor = deep, sofa = anchor, art = accent, lamp glow = accent
+ document.getElementById('wall').style.background=
+ `linear-gradient(135deg, ${p[1].hex}, ${p[0].hex})`;
+ document.getElementById('floor').style.background=p[3].hex;
+ document.getElementById('sofa').style.background=p[2].hex;
+ document.getElementById('art').style.background=p[4].hex;
+ const lamp=document.getElementById('lamp');
+ lamp.style.background=p[3].hex;
+ // lamp shade glow
+ lamp.style.setProperty('--x','0');
+ const shade=p[4].hex;
+ lamp.querySelector; // no-op
+ document.documentElement.style.setProperty('--lampshade',shade);
+ // set shade via inline style on ::after through a data attr trick
+ lamp.style.boxShadow=`0 0 22px ${shade}66`;
+ // apply shade color using a CSS var consumed below
+ lamp.style.setProperty('background-image','none');
+ // set the ::after color via a dynamic style tag
+ setLampShade(shade);
+ }
+ let lampStyleTag;
+ function setLampShade(color){
+ if(!lampStyleTag){
+ lampStyleTag=document.createElement('style');
+ document.head.appendChild(lampStyleTag);
+ }
+ lampStyleTag.textContent=`#lamp::after{background:radial-gradient(circle at 50% 40%, ${color}, ${color}55 70%, transparent);box-shadow:0 0 30px ${color}77;}`;
+ }
+
+ /* ---------- copy ---------- */
+ const toast=document.getElementById('toast');
+ const toastHex=document.getElementById('toastHex');
+ function copyHex(hex,el){
+ const done=()=>{
+ el.classList.add('copied');
+ const hint=el.querySelector('.copyhint');
+ const prev=hint.textContent;
+ hint.textContent='Copied ✓';
+ toastHex.textContent=hex;
+ toast.classList.add('show');
+ setTimeout(()=>{
+ el.classList.remove('copied');
+ hint.textContent='Click to copy';
+ toast.classList.remove('show');
+ },1400);
+ };
+ if(navigator.clipboard && navigator.clipboard.writeText){
+ navigator.clipboard.writeText(hex).then(done).catch(()=>{fallbackCopy(hex);done();});
+ } else { fallbackCopy(hex); done(); }
+ }
+ function fallbackCopy(text){
+ const ta=document.createElement('textarea');
+ ta.value=text; ta.style.position='fixed'; ta.style.left='-9999px';
+ document.body.appendChild(ta); ta.select();
+ try{document.execCommand('copy');}catch(e){}
+ document.body.removeChild(ta);
+ }
+
+ /* ---------- tags ---------- */
+ function updateTags(){
+ document.getElementById('modeTag').textContent=
+ mode.charAt(0).toUpperCase()+mode.slice(1);
+ document.getElementById('hueTag').textContent=Math.round(baseHue)+'°';
+ document.getElementById('hubHex').textContent=hslHex(baseHue,52,48);
+ }
+
+ /* ---------- wheel interaction ---------- */
+ function pickFromEvent(e){
+ const rect=wheel.getBoundingClientRect();
+ const px=(e.touches?e.touches[0].clientX:e.clientX)-rect.left-R;
+ const py=(e.touches?e.touches[0].clientY:e.clientY)-rect.top-R;
+ let ang=Math.atan2(py,px)*180/Math.PI + 90;
+ baseHue=((ang%360)+360)%360;
+ positionMarker();
+ renderSwatches();
+ }
+ let dragging=false;
+ wheel.addEventListener('mousedown',e=>{dragging=true;pickFromEvent(e);});
+ window.addEventListener('mousemove',e=>{if(dragging)pickFromEvent(e);});
+ window.addEventListener('mouseup',()=>dragging=false);
+ wheel.addEventListener('touchstart',e=>{e.preventDefault();dragging=true;pickFromEvent(e);},{passive:false});
+ wheel.addEventListener('touchmove',e=>{e.preventDefault();if(dragging)pickFromEvent(e);},{passive:false});
+ wheel.addEventListener('touchend',()=>dragging=false);
+
+ /* ---------- harmony toggle ---------- */
+ document.getElementById('harmony').addEventListener('click',e=>{
+ const b=e.target.closest('button'); if(!b)return;
+ mode=b.dataset.mode;
+ [...document.querySelectorAll('#harmony button')].forEach(x=>x.classList.toggle('active',x===b));
+ renderSwatches();
+ });
+
+ /* ---------- reroll ---------- */
+ document.getElementById('shuffleBtn').addEventListener('click',()=>{
+ baseHue=Math.floor(Math.random()*360);
+ positionMarker();
+ renderSwatches();
+ });
+
+ /* ---------- export 1080 card ---------- */
+ document.getElementById('exportBtn').addEventListener('click',exportCard);
+
+ function roundRect(c,x,y,w,h,r){
+ c.beginPath();
+ c.moveTo(x+r,y);
+ c.arcTo(x+w,y,x+w,y+h,r);
+ c.arcTo(x+w,y+h,x,y+h,r);
+ c.arcTo(x,y+h,x,y,r);
+ c.arcTo(x,y,x+w,y,r);
+ c.closePath();
+ }
+
+ function exportCard(){
+ const card=document.getElementById('card');
+ const c=card.getContext('2d');
+ const W=1080,H=1080;
+ const p=currentPalette;
+
+ // ground
+ c.fillStyle='#0d0d0f';
+ c.fillRect(0,0,W,H);
+
+ // subtle top glow
+ const g=c.createRadialGradient(W*0.25,H*0.12,50,W*0.25,H*0.12,700);
+ g.addColorStop(0,'rgba(201,169,97,0.10)');
+ g.addColorStop(1,'rgba(201,169,97,0)');
+ c.fillStyle=g; c.fillRect(0,0,W,H);
+
+ // frame hairline
+ c.strokeStyle='rgba(201,169,97,0.35)';
+ c.lineWidth=1.5;
+ c.strokeRect(48,48,W-96,H-96);
+
+ // header wordmark
+ c.textAlign='left';
+ c.fillStyle='#f5f2ea';
+ c.font='600 46px "Cormorant Garamond","Playfair Display",Georgia,serif';
+ // letter spacing manual
+ drawTracked(c,'DESIGNER WALLCOVERINGS',96,140,8);
+ c.fillStyle='#c9a961';
+ c.font='600 17px -apple-system,"Segoe UI",Arial,sans-serif';
+ drawTracked(c,'PALETTE ATELIER — COLOUR STUDY',97,172,4.5);
+
+ // title
+ c.fillStyle='#f5f2ea';
+ c.font='italic 500 64px "Cormorant Garamond",Georgia,serif';
+ c.textAlign='left';
+ const modeTitle = mode.charAt(0).toUpperCase()+mode.slice(1);
+ c.fillText('The '+modeTitle+' Story',96,270);
+
+ c.fillStyle='#8a8578';
+ c.font='400 22px -apple-system,"Segoe UI",Arial,sans-serif';
+ c.fillText('Base hue '+Math.round(baseHue)+'° · a curated five-swatch wallcovering palette',96,308);
+
+ // swatch stack — big vertical bars
+ const top=360, bottom=H-150;
+ const areaW=W-192;
+ const gap=18;
+ const bw=(areaW-gap*4)/5;
+ p.forEach((col,i)=>{
+ const x=96 + i*(bw+gap);
+ roundRect(c,x,top,bw,bottom-top,14);
+ c.fillStyle=col.hex;
+ c.fill();
+ // hairline
+ c.strokeStyle='rgba(0,0,0,0.25)';
+ c.lineWidth=1;
+ c.stroke();
+
+ // text
+ const tcDark = col.textDark;
+ c.textAlign='left';
+ c.fillStyle=tcDark?'#1a160c':'#f5f2ea';
+ c.font='600 30px "Cormorant Garamond",Georgia,serif';
+ // name (wrap-friendly single word usually)
+ c.save();
+ c.translate(x+22, bottom-70);
+ wrapText(c,col.name,0,0,bw-44,32);
+ c.restore();
+
+ c.fillStyle=tcDark?'rgba(26,22,12,0.75)':'rgba(245,242,234,0.8)';
+ c.font='600 17px -apple-system,"Segoe UI",Arial,sans-serif';
+ drawTracked(c,col.hex,x+22,bottom-30,2);
+ });
+
+ // footer line
+ c.textAlign='center';
+ c.fillStyle='#8a8578';
+ c.font='600 16px -apple-system,"Segoe UI",Arial,sans-serif';
+ drawTracked(c,'DESIGNERWALLCOVERINGS.COM',W/2,H-90,3, true);
+
+ // trigger download
+ card.toBlob(function(blob){
+ const url=URL.createObjectURL(blob);
+ const a=document.createElement('a');
+ a.href=url;
+ a.download='dw-palette-'+modeTitle.toLowerCase()+'-'+Math.round(baseHue)+'.png';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ setTimeout(()=>URL.revokeObjectURL(url),1500);
+ // toast
+ toastHex.textContent='saved ✓';
+ document.getElementById('toast').firstChild.textContent='Card exported ';
+ toast.classList.add('show');
+ setTimeout(()=>{
+ toast.classList.remove('show');
+ document.getElementById('toast').firstChild.textContent='Copied ';
+ },1600);
+ },'image/png');
+ }
+
+ // draw text with manual letter spacing
+ function drawTracked(c,text,x,y,tracking,center){
+ if(center){
+ // measure total
+ let total=0;
+ for(const ch of text){ total+=c.measureText(ch).width+tracking; }
+ total-=tracking;
+ x=x-total/2;
+ c.textAlign='left';
+ }
+ let cx=x;
+ for(const ch of text){
+ c.fillText(ch,cx,y);
+ cx+=c.measureText(ch).width+tracking;
+ }
+ }
+ function wrapText(c,text,x,y,maxW,lh){
+ const words=text.split(' ');
+ let line='', yy=y;
+ for(let n=0;n<words.length;n++){
+ const test=line+words[n]+' ';
+ if(c.measureText(test).width>maxW && n>0){
+ c.fillText(line.trim(),x,yy);
+ line=words[n]+' '; yy+=lh;
+ } else line=test;
+ }
+ c.fillText(line.trim(),x,yy);
+ }
+
+ /* ---------- init ---------- */
+ drawWheel();
+ positionMarker();
+ renderSwatches();
+
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/claude-code.png b/data/artifacts/edd68668d3dc/claude-code.png
new file mode 100644
index 0000000..9f719e7
Binary files /dev/null and b/data/artifacts/edd68668d3dc/claude-code.png differ
diff --git a/data/artifacts/edd68668d3dc/gemma3-12b.html b/data/artifacts/edd68668d3dc/gemma3-12b.html
new file mode 100644
index 0000000..b15222e
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/gemma3-12b.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Designer Wallcoverings</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent-primary: #b0472e;
+ --accent-secondary: #2f4c39;
+ --line: rgba(0, 0, 0, .08);
+ --shadow: rgba(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: transparent;
+ padding: 32px;
+ text-align: left;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 100;
+ }
+
+ header h1 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 67px;
+ letter-spacing: .18em;
+ line-height: 1;
+ margin: 0;
+ color: var(--text);
+ }
+
+ .container {
+ padding: 96px;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ h2 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ margin-bottom: 24px;
+ }
+
+ p {
+ font-size: 16px;
+ line-height: 1.75;
+ color: var(--text);
+ }
+
+ .palette-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ margin-top: 48px;
+ }
+
+ .color-swatch {
+ width: 100%;
+ height: 260px; /*Fixed height for consistent card size*/
+ background-size: cover;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ transition: transform .25s ease, box-shadow .25s ease;
+ position: relative;
+ }
+
+ .color-swatch:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 16px 48px var(--shadow);
+ }
+
+ .color-name {
+ position: absolute;
+ bottom: 8px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 16px;
+ font-weight: bold;
+ text-align: center;
+ }
+
+ .copy-button {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ background-color: rgba(255, 255, 255, .8);
+ border: 1px solid var(--line);
+ padding: 4px 8px;
+ font-size: 12px;
+ text-transform: UPPERCASE;
+ letter-spacing: .15em;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ .room-preview {
+ margin-top: 48px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+ }
+
+ .room-tile {
+ width: calc(50% - 8px); /* Two tiles per row */
+ height: 200px;
+ background-color: var(--surface);
+ border-radius: 8px;
+ position: relative;
+ }
+
+ .export-button {
+ display: block;
+ margin-top: 48px;
+ padding: 16px 32px;
+ background-color: var(--accent-primary);
+ color: var(--surface);
+ text-transform: UPPERCASE;
+ letter-spacing: .15em;
+ font-size: 12px;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, .7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 200;
+ }
+
+ .overlay p {
+ font-size: 24px;
+ color: var(--surface);
+ }
+
+ /* Palette Styles - Example */
+ .palette-alabaster { background: #f5f2ea; } /*Alabaster*/
+ .palette-greige { background: #8a8578; } /*Greige*/
+ .palette-celadon { background: #c9a961; } /*Celadon*/
+ .palette-ink { background: #1c1a17; } /*Ink*/
+ .palette-brass { background: #7d6a45; } /*Brass*/
+
+ /* Animations */
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px) }
+ to { opacity: 1; transform: none }
+ }
+
+ </style>
+</head>
+<body>
+ <header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </header>
+
+ <div class="container">
+ <h2>Curated Wallcovering Palettes</h2>
+ <p>Explore our expertly crafted palettes, designed to inspire your interior spaces. Choose a style and copy the hex codes directly.</p>
+
+ <div class="palette-container" id="paletteContainer">
+ <!-- Palette Swatches will be dynamically generated here -->
+ </div>
+
+ <div class="room-preview" id="roomPreview">
+ <!-- Room Preview Tiles will be dynamically generated here -->
+ </div>
+
+ <button class="export-button" onclick="exportAsCard()">Export as 1080x1080 Card</button>
+
+ <div class="overlay" id="overlay" style="display:none;">
+ <p>Palette Exported!</p>
+ </div>
+ </div>
+
+
+ <script>
+ const paletteNames = ["Alabaster", "Greige", "Celadon", "Ink", "Brass"];
+ const baseHue = 'alabaster'; // Default Base Hue
+ let style = 'analogous'; //Default Style
+
+ function createPaletteSwatches(baseHue, style) {
+ const paletteContainer = document.getElementById('paletteContainer');
+ paletteContainer.innerHTML = '';
+
+ let colors;
+
+ switch (baseHue) {
+ case 'alabaster':
+ colors = [
+ { name: "Alabaster", hex: "#f5f2ea" },
+ { name: "Greige", hex: "#8a8578" },
+ { name: "Celadon", hex: "#c9a961" },
+ { name: "Ink", hex: "#1c1a17" },
+ { name: "Brass", hex: "#7d6a45" }
+ ];
+ break;
+ // Add more palettes here as needed. For brevity, only one is fully implemented.
+ default:
+ console.warn("Unknown base hue:", baseHue);
+ return;
+ }
+
+ colors.forEach(color => {
+ const swatch = document.createElement('div');
+ swatch.classList.add('color-swatch', `palette-${color.name.toLowerCase()}`); // Added class for styling
+ swatch.style.backgroundColor = color.hex;
+
+ const nameSpan = document.createElement('span');
+ nameSpan.classList.add('color-name');
+ nameSpan.textContent = color.name;
+ swatch.appendChild(nameSpan);
+
+ const copyButton = document.createElement('button');
+ copyButton.classList.add('copy-button');
+ copyButton.textContent = 'COPY HEX';
+ copyButton.addEventListener('click', () => {
+ navigator.clipboard.writeText(color.hex).then(() => alert(`Copied ${color.name} hex: ${color.hex}`));
+ });
+ swatch.appendChild(copyButton);
+
+ paletteContainer.appendChild(swatch);
+ });
+ }
+
+
+ function createRoomPreview(colors) {
+ const roomPreview = document.getElementById('roomPreview');
+ roomPreview.innerHTML = '';
+
+ colors.forEach(color => {
+ const tile = document.createElement('div');
+ tile.classList.add('room-tile');
+ tile.style.backgroundColor = color.hex;
+ });
+ }
+
+
+ function exportAsCard() {
+ const overlay = document.getElementById("overlay");
+ overlay.style.display = "flex";
+ setTimeout(() => {
+ overlay.style.display = "none";
+ }, 3000); // Hide after 3 seconds
+ }
+
+ // Initial Palette Generation
+ createPaletteSwatches(baseHue, style);
+ createRoomPreview([{name: 'test', hex: '#f5f2ea'}])
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/gemma3-12b.png b/data/artifacts/edd68668d3dc/gemma3-12b.png
new file mode 100644
index 0000000..683d3c1
Binary files /dev/null and b/data/artifacts/edd68668d3dc/gemma3-12b.png differ
diff --git a/data/artifacts/edd68668d3dc/gpt.html b/data/artifacts/edd68668d3dc/gpt.html
new file mode 100644
index 0000000..9276fc6
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/gpt.html
@@ -0,0 +1,1914 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Designer Wallcoverings — Palette Builder</title>
+ <style>
+ :root {
+ /* Design tokens */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #14141a;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961; /* Brass */
+ --accent-deep: #7d6a45;
+ --error: #b85c5c;
+
+ --line: rgba(245, 242, 234, 0.14);
+ --line-strong: rgba(245, 242, 234, 0.26);
+ --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.6);
+ --shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.03);
+
+ --radius-card: 18px;
+ --radius-chip: 12px;
+ --radius-pill: 999px;
+
+ --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif;
+ --font-sans: 'Avenir Next', 'Century Gothic', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+ --fs-display: 67px;
+ --fs-h1: 50px;
+ --fs-h2: 38px;
+ --fs-h3: 28px;
+ --fs-lead: 21px;
+ --fs-body: 16px;
+ --fs-caption: 12px;
+
+ --ease-out: cubic-bezier(.22,1,.36,1); /* ease-out-quint */
+ --ease-ui: cubic-bezier(.22,.9,.24,1); /* swift-out */
+
+ --transition-fast: 180ms var(--ease-ui);
+ --transition-med: 420ms var(--ease-out);
+
+ --swatch-size: 72px;
+ --preview-height: 160px;
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top, #15151b 0, #050507 55%, #000000 100%);
+ color: var(--text);
+ font-family: var(--font-sans);
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+ }
+
+ body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* Scrollbar subtle */
+ ::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+ ::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ ::-webkit-scrollbar-thumb {
+ background: rgba(124, 120, 110, 0.6);
+ border-radius: 4px;
+ }
+
+ /* Header / wordmark */
+ header.app-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 82px;
+ background: linear-gradient(to bottom, rgba(13,13,15,0.98), rgba(13,13,15,0.96));
+ border-bottom: 1px solid var(--line);
+ box-shadow: var(--shadow-subtle);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 32px;
+ z-index: 20;
+ backdrop-filter: blur(18px);
+ }
+
+ .wordmark-lockup {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ max-width: 280px;
+ }
+
+ .wordmark-title {
+ font-family: var(--font-display);
+ font-size: 44px;
+ line-height: 1;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--text);
+ white-space: normal;
+ }
+
+ .wordmark-sub {
+ font-family: var(--font-sans);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ margin-top: 6px;
+ }
+
+ .header-meta {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ }
+
+ .chip-label {
+ border-radius: var(--radius-pill);
+ border: 1px solid var(--line);
+ padding: 6px 14px;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .chip-label-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 20%, #f8e6b6, var(--accent-deep) 70%);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
+ }
+
+ .chip-label span {
+ opacity: 0.86;
+ }
+
+ .chip-help {
+ opacity: 0.7;
+ }
+
+ main {
+ flex: 1;
+ padding: 112px 32px 40px;
+ display: flex;
+ justify-content: center;
+ }
+
+ .shell {
+ max-width: 1120px;
+ width: 100%;
+ display: grid;
+ grid-template-columns: minmax(0, 2.1fr) minmax(0, 2.2fr);
+ gap: 28px;
+ }
+
+ @media (max-width: 980px) {
+ header.app-header {
+ height: auto;
+ padding: 16px 20px 14px;
+ flex-wrap: wrap;
+ row-gap: 12px;
+ }
+ .wordmark-title {
+ font-size: 40px;
+ }
+ .shell {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ main {
+ padding: 120px 20px 32px;
+ }
+ }
+
+ @media (max-width: 640px) {
+ .header-meta {
+ width: 100%;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ }
+ .wordmark-lockup {
+ max-width: 100%;
+ }
+ .wordmark-title {
+ font-size: 36px;
+ }
+ :root {
+ --swatch-size: 60px;
+ --preview-height: 140px;
+ }
+ }
+
+ .panel {
+ background: radial-gradient(circle at top left, #202029 0, var(--surface) 45%, #0b0b0e 100%);
+ border-radius: var(--radius-card);
+ border: 1px solid var(--line);
+ box-shadow: var(--shadow-soft);
+ padding: 22px 22px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .panel::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at 8% 0%, rgba(201,169,97,0.16) 0, transparent 55%),
+ radial-gradient(circle at 100% 0%, rgba(201,169,97,0.05) 0, transparent 60%);
+ mix-blend-mode: screen;
+ opacity: 0.9;
+ pointer-events: none;
+ }
+
+ .panel-inner {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .panel-header {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+ align-items: baseline;
+ }
+
+ .panel-title {
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ line-height: 1.05;
+ letter-spacing: -0.03em;
+ }
+
+ .panel-kicker {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ margin-bottom: 6px;
+ }
+
+ .panel-body {
+ font-size: var(--fs-body);
+ color: rgba(245,242,234,0.86);
+ max-width: 52ch;
+ }
+
+ .meta-pill {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ padding: 6px 12px;
+ border-radius: var(--radius-pill);
+ border: 1px solid var(--line);
+ background: linear-gradient(to bottom right, rgba(23,23,28,0.9), rgba(10,10,12,0.9));
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .meta-pill-swatch {
+ width: 17px;
+ height: 10px;
+ border-radius: 999px;
+ background: linear-gradient(90deg, #f5f2ea, #c9a961);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
+ }
+
+ /* Controls */
+ .controls {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-top: 8px;
+ }
+
+ .control-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .control-label {
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ }
+
+ .mode-toggle {
+ display: inline-flex;
+ border-radius: var(--radius-pill);
+ border: 1px solid var(--line-strong);
+ padding: 3px;
+ background: linear-gradient(to right, rgba(21,21,26,0.98), rgba(10,10,12,0.98));
+ gap: 4px;
+ }
+
+ .mode-toggle button {
+ border: none;
+ outline: none;
+ background: transparent;
+ color: rgba(245,242,234,0.8);
+ font-family: var(--font-sans);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ padding: 6px 12px;
+ border-radius: calc(var(--radius-pill) - 4px);
+ cursor: pointer;
+ transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
+ white-space: nowrap;
+ }
+
+ .mode-toggle button.active {
+ background: radial-gradient(circle at 20% 0, rgba(248,235,195,0.4) 0, rgba(201,169,97,0.15) 42%, rgba(10,10,12,1) 80%);
+ color: var(--text);
+ box-shadow:
+ 0 0 0 1px rgba(201,169,97,0.5),
+ 0 10px 25px rgba(0,0,0,0.8);
+ }
+
+ .mode-toggle button span {
+ opacity: 0.8;
+ }
+
+ .hue-wheel {
+ position: relative;
+ width: 180px;
+ height: 180px;
+ border-radius: 50%;
+ background:
+ conic-gradient(
+ hsl(0, 72%, 60%),
+ hsl(30, 72%, 60%),
+ hsl(60, 72%, 60%),
+ hsl(120, 72%, 60%),
+ hsl(180, 72%, 60%),
+ hsl(210, 72%, 60%),
+ hsl(240, 72%, 60%),
+ hsl(280, 72%, 60%),
+ hsl(320, 72%, 60%),
+ hsl(360, 72%, 60%)
+ );
+ box-shadow:
+ 0 18px 40px rgba(0,0,0,0.75),
+ 0 0 0 1px rgba(255,255,255,0.06);
+ flex-shrink: 0;
+ margin-top: 6px;
+ }
+
+ .hue-wheel::before {
+ content: '';
+ position: absolute;
+ inset: 16%;
+ border-radius: 50%;
+ background: radial-gradient(circle at 10% 0%, rgba(255,255,255,0.32), rgba(0,0,0,0.9) 70%);
+ mix-blend-mode: soft-light;
+ opacity: 0.66;
+ pointer-events: none;
+ }
+
+ .hue-handle {
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 2px solid #0b0b0d;
+ box-shadow:
+ 0 0 0 1px rgba(245,242,234,0.9),
+ 0 0 12px rgba(0,0,0,0.8);
+ background: radial-gradient(circle at 25% 25%, #ffffff, #e0ded5 40%, #a89c7f 100%);
+ transform: translate(-50%, -50%);
+ cursor: grab;
+ transition: box-shadow var(--transition-fast), transform 120ms var(--ease-ui);
+ z-index: 2;
+ }
+
+ .hue-handle:active {
+ cursor: grabbing;
+ transform: translate(-50%, -50%) scale(1.04);
+ box-shadow:
+ 0 0 0 1px rgba(245,242,234,1),
+ 0 0 16px rgba(0,0,0,0.9);
+ }
+
+ .hue-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ font-size: 12px;
+ color: rgba(245,242,234,0.84);
+ }
+
+ .hue-meta-hex {
+ font-family: 'SF Mono', 'Cascadia Code', Menlo, monospace;
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ padding: 4px 8px;
+ border-radius: 9px;
+ border: 1px solid var(--line);
+ background: rgba(0,0,0,0.45);
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ max-width: max-content;
+ }
+
+ .hue-meta-hex span.label {
+ text-transform: uppercase;
+ color: var(--muted);
+ letter-spacing: 0.14em;
+ font-size: 11px;
+ }
+
+ .hue-meta-hex span.value {
+ color: var(--text);
+ }
+
+ .hue-input-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ align-items: center;
+ margin-top: 4px;
+ }
+
+ .hue-input-row input[type=range] {
+ flex: 1;
+ appearance: none;
+ height: 2px;
+ border-radius: 999px;
+ background: linear-gradient(90deg,
+ hsl(0, 70%, 60%),
+ hsl(60, 70%, 60%),
+ hsl(120, 70%, 60%),
+ hsl(180, 70%, 60%),
+ hsl(240, 70%, 60%),
+ hsl(300, 70%, 60%),
+ hsl(360, 70%, 60%)
+ );
+ outline: none;
+ }
+
+ .hue-input-row input[type=range]::-webkit-slider-thumb {
+ appearance: none;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ background: #f5f2ea;
+ box-shadow:
+ 0 0 0 2px #0d0d0f,
+ 0 0 0 3px rgba(245,242,234,0.85);
+ cursor: pointer;
+ }
+
+ .hue-number {
+ width: 66px;
+ padding: 5px 8px;
+ font-size: 12px;
+ border-radius: 999px;
+ border: 1px solid var(--line);
+ background: rgba(0,0,0,0.6);
+ color: var(--text);
+ font-family: var(--font-sans);
+ text-align: center;
+ outline: none;
+ transition: border var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
+ }
+
+ .hue-number:focus {
+ border-color: rgba(201,169,97,0.7);
+ box-shadow:
+ 0 0 0 1px rgba(201,169,97,0.55),
+ 0 14px 30px rgba(0,0,0,0.9);
+ background: rgba(0,0,0,0.9);
+ }
+
+ .palette-section {
+ margin-top: 8px;
+ border-top: 1px solid rgba(245,242,234,0.08);
+ padding-top: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ }
+
+ .palette-row {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ }
+
+ .swatch {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .swatch-tile {
+ width: 100%;
+ height: var(--swatch-size);
+ border-radius: var(--radius-chip);
+ border: 1px solid rgba(0,0,0,0.85);
+ box-shadow:
+ 0 16px 40px rgba(0,0,0,0.8),
+ 0 0 0 1px rgba(255,255,255,0.02);
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ transition:
+ transform var(--transition-fast),
+ box-shadow var(--transition-fast),
+ border-color var(--transition-fast);
+ }
+
+ .swatch-tile::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ mix-blend-mode: soft-light;
+ background:
+ radial-gradient(circle at 18% 0%, rgba(255,255,255,0.45) 0, transparent 45%),
+ linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%);
+ transition: opacity var(--transition-fast);
+ pointer-events: none;
+ }
+
+ .swatch-tile:hover::before {
+ opacity: 1;
+ }
+
+ .swatch-tile:hover {
+ transform: translateY(-4px);
+ box-shadow:
+ 0 24px 50px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(255,255,255,0.05);
+ border-color: rgba(255,255,255,0.1);
+ }
+
+ .swatch-label {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ .swatch-name {
+ font-family: var(--font-display);
+ font-size: 16px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ }
+
+ .swatch-meta {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .swatch-hex {
+ font-family: 'SF Mono', 'Cascadia Code', Menlo, monospace;
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: rgba(245,242,234,0.86);
+ }
+
+ .swatch-tag {
+ padding: 2px 8px;
+ border-radius: 999px;
+ border: 1px solid var(--line);
+ background: rgba(0,0,0,0.4);
+ white-space: nowrap;
+ }
+
+ .copy-toast {
+ position: fixed;
+ left: 50%;
+ bottom: 26px;
+ transform: translateX(-50%) translateY(20px);
+ padding: 9px 16px;
+ border-radius: 999px;
+ background: rgba(7,7,8,0.96);
+ border: 1px solid rgba(201,169,97,0.9);
+ box-shadow: 0 16px 40px rgba(0,0,0,0.9);
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--text);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity var(--transition-med), transform var(--transition-med);
+ z-index: 40;
+ }
+
+ .copy-toast-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 20% 10%, #fff8da, #c9a961);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
+ }
+
+ .copy-toast.show {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ pointer-events: auto;
+ }
+
+ /* Room preview */
+ .preview-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .preview-meta-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ flex-wrap: wrap;
+ }
+
+ .preview-title {
+ font-size: 13px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .preview-style-tag {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ padding: 4px 10px;
+ border-radius: 999px;
+ border: 1px solid var(--line);
+ background: rgba(0,0,0,0.4);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: rgba(245,242,234,0.86);
+ }
+
+ .preview-style-dot {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--accent), #f7e4b3);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
+ }
+
+ .preview-strip {
+ position: relative;
+ width: 100%;
+ height: var(--preview-height);
+ border-radius: 16px;
+ border: 1px solid var(--line-strong);
+ overflow: hidden;
+ box-shadow:
+ 0 20px 45px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(255,255,255,0.03);
+ background: radial-gradient(circle at top, rgba(255,255,255,0.12), rgba(0,0,0,1) 60%);
+ display: grid;
+ grid-template-columns: 1.4fr 1fr;
+ }
+
+ @media (max-width: 720px) {
+ .preview-strip {
+ grid-template-columns: 1fr 1fr;
+ height: 150px;
+ }
+ }
+
+ .preview-left,
+ .preview-right {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .preview-wall {
+ position: absolute;
+ inset: 0;
+ transition: background var(--transition-med), transform var(--transition-med);
+ transform-origin: center;
+ }
+
+ .preview-left .preview-wall {
+ background-size: 32px 32px;
+ background-image:
+ linear-gradient(135deg, rgba(0,0,0,0.22) 0, transparent 40%),
+ radial-gradient(circle at 0 0, rgba(255,255,255,0.15) 0, transparent 40%);
+ mix-blend-mode: soft-light;
+ }
+
+ .preview-floor {
+ position: absolute;
+ left: -10%;
+ right: -10%;
+ bottom: -32%;
+ height: 70%;
+ background:
+ linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,1)),
+ linear-gradient(110deg, rgba(246,240,225,0.3), rgba(80,72,60,0.9));
+ transform: skewX(-18deg);
+ transform-origin: left top;
+ box-shadow: 0 -10px 25px rgba(0,0,0,0.9);
+ }
+
+ .preview-paneling {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 18%;
+ height: 32%;
+ background:
+ linear-gradient(to right, rgba(0,0,0,0.26), rgba(255,255,255,0.02), rgba(0,0,0,0.4)),
+ repeating-linear-gradient(90deg,
+ rgba(0,0,0,0.5) 0,
+ rgba(0,0,0,0.5) 1px,
+ transparent 1px,
+ transparent 40px
+ );
+ box-shadow:
+ 0 -1px 0 rgba(255,255,255,0.08),
+ 0 -18px 30px rgba(0,0,0,0.9);
+ opacity: 0.9;
+ }
+
+ .preview-art {
+ position: absolute;
+ top: 12%;
+ left: 19%;
+ width: 32%;
+ height: 48%;
+ border-radius: 6px;
+ background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(255,255,255,0.12));
+ box-shadow:
+ 0 18px 40px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(255,255,255,0.1);
+ overflow: hidden;
+ }
+
+ .preview-art::before {
+ content: '';
+ position: absolute;
+ inset: 6%;
+ border-radius: 4px;
+ background:
+ radial-gradient(circle at 20% 0%, rgba(255,255,255,0.5), transparent 40%),
+ repeating-linear-gradient(135deg,
+ rgba(255,255,255,0.26) 0,
+ rgba(255,255,255,0.26) 1px,
+ transparent 1px,
+ transparent 7px
+ );
+ mix-blend-mode: screen;
+ opacity: 0.7;
+ }
+
+ .preview-sofa {
+ position: absolute;
+ bottom: 10%;
+ left: 45%;
+ width: 46%;
+ height: 24%;
+ border-radius: 14px 14px 12px 12px;
+ background:
+ linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
+ linear-gradient(120deg, rgba(246,240,225,0.8), rgba(170,160,140,0.9));
+ box-shadow:
+ 0 15px 40px rgba(0,0,0,1),
+ 0 0 0 1px rgba(0,0,0,0.8);
+ }
+
+ .preview-sofa::before {
+ content: '';
+ position: absolute;
+ inset: 22% 12% 24%;
+ border-radius: 10px;
+ background:
+ repeating-linear-gradient(90deg,
+ rgba(0,0,0,0.14) 0,
+ rgba(0,0,0,0.14) 1px,
+ transparent 1px,
+ transparent 9px
+ );
+ opacity: 0.7;
+ }
+
+ .preview-side-table {
+ position: absolute;
+ bottom: 8%;
+ left: 14%;
+ width: 12%;
+ height: 21%;
+ border-radius: 4px;
+ background:
+ linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3)),
+ linear-gradient(135deg, #4a4338, #b9a480);
+ box-shadow: 0 12px 30px rgba(0,0,0,1);
+ }
+
+ .preview-side-table::before {
+ content: '';
+ position: absolute;
+ top: -16%;
+ left: 12%;
+ width: 65%;
+ height: 35%;
+ border-radius: 999px;
+ background: radial-gradient(circle at 30% 10%, #fff9df, #c9a961);
+ box-shadow:
+ 0 0 0 2px rgba(0,0,0,0.7),
+ 0 6px 18px rgba(0,0,0,0.9);
+ }
+
+ .preview-right {
+ background:
+ linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.2)),
+ repeating-linear-gradient(135deg,
+ rgba(255,255,255,0.05) 0,
+ rgba(255,255,255,0.05) 1px,
+ transparent 1px,
+ transparent 6px
+ );
+ }
+
+ .preview-strip::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle at top, rgba(255,255,255,0.2), transparent 55%);
+ mix-blend-mode: soft-light;
+ opacity: 0.8;
+ pointer-events: none;
+ }
+
+ .preview-palette {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 14px 14px 12px;
+ gap: 10px;
+ }
+
+ .preview-palette-label {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: rgba(245,242,234,0.8);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .preview-palette-sheen {
+ width: 34px;
+ height: 10px;
+ border-radius: 999px;
+ background: linear-gradient(120deg, rgba(255,255,255,0.9), rgba(201,169,97,0.2), transparent);
+ opacity: 0.7;
+ }
+
+ .preview-palette-swatches {
+ display: flex;
+ gap: 6px;
+ flex: 1;
+ align-items: stretch;
+ }
+
+ .preview-mini {
+ flex: 1;
+ border-radius: 10px;
+ border: 1px solid rgba(0,0,0,0.8);
+ box-shadow:
+ 0 8px 18px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(255,255,255,0.03);
+ overflow: hidden;
+ position: relative;
+ }
+
+ .preview-mini::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(120deg, rgba(255,255,255,0.32), transparent 60%);
+ mix-blend-mode: soft-light;
+ opacity: 0.9;
+ }
+
+ /* Export card */
+ .card-shell {
+ margin-top: 2px;
+ border-radius: 14px;
+ border: 1px solid var(--line);
+ background: radial-gradient(circle at top left, rgba(255,255,255,0.06), rgba(0,0,0,0.95));
+ padding: 12px 14px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .card-shell::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at -10% 10%, rgba(201,169,97,0.45) 0, transparent 55%),
+ radial-gradient(circle at 110% 0%, rgba(201,169,97,0.25) 0, transparent 55%);
+ mix-blend-mode: screen;
+ opacity: 0.9;
+ pointer-events: none;
+ }
+
+ .card-shell-inner {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .card-meta-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+ }
+
+ .card-caption {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .card-caption-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ border: 1px solid rgba(0,0,0,0.9);
+ background: radial-gradient(circle at 20% 0%, #fffdf5, #b79c6a);
+ box-shadow:
+ 0 0 0 1px rgba(255,255,255,0.4),
+ 0 2px 8px rgba(0,0,0,0.9);
+ }
+
+ .card-button {
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(201,169,97,0.9);
+ background:
+ radial-gradient(circle at 0 0, rgba(255,248,224,0.6), rgba(201,169,97,0.2) 40%, rgba(13,13,15,1) 100%);
+ padding: 7px 14px;
+ font-family: var(--font-sans);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--bg);
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ box-shadow:
+ 0 14px 32px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(0,0,0,0.5);
+ transition:
+ transform var(--transition-fast),
+ box-shadow var(--transition-fast),
+ background var(--transition-fast);
+ white-space: nowrap;
+ }
+
+ .card-button:hover {
+ transform: translateY(-2px);
+ box-shadow:
+ 0 20px 40px rgba(0,0,0,1),
+ 0 0 0 1px rgba(0,0,0,0.9);
+ background:
+ radial-gradient(circle at 0 0, rgba(255,252,239,0.9), rgba(201,169,97,0.4) 40%, rgba(13,13,15,1) 100%);
+ }
+
+ .card-button-icon {
+ width: 13px;
+ height: 13px;
+ border-radius: 50%;
+ border: 1px solid rgba(0,0,0,0.7);
+ background:
+ radial-gradient(circle at 20% 0, #fff8de, #c9a961);
+ box-shadow:
+ 0 0 0 1px rgba(255,255,255,0.6),
+ 0 2px 5px rgba(0,0,0,0.85);
+ position: relative;
+ }
+
+ .card-button-icon::before {
+ content: '';
+ position: absolute;
+ inset: 3px 4px;
+ border-radius: 999px;
+ border: 1px solid rgba(0,0,0,0.8);
+ border-top-color: transparent;
+ border-right-color: transparent;
+ transform: rotate(-45deg);
+ }
+
+ .card-preview {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ border-radius: 11px;
+ border: 1px solid rgba(0,0,0,0.9);
+ background: radial-gradient(circle at top, #25252b, #050506 70%);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .card-preview-header {
+ padding: 10px 12px 2px;
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: 12px;
+ }
+
+ .card-preview-logo {
+ font-family: var(--font-display);
+ font-size: 15px;
+ text-transform: uppercase;
+ letter-spacing: 0.22em;
+ color: var(--text);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .card-preview-mode {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+ }
+
+ .card-preview-room {
+ flex: 1;
+ margin: 6px 8px 10px;
+ border-radius: 9px;
+ border: 1px solid rgba(0,0,0,0.9);
+ box-shadow:
+ inset 0 0 0 1px rgba(255,255,255,0.02),
+ 0 10px 24px rgba(0,0,0,0.95);
+ overflow: hidden;
+ display: grid;
+ grid-template-rows: 1.4fr 1fr;
+ }
+
+ .card-preview-top {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .card-preview-wall {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ transition: background var(--transition-med);
+ }
+
+ .card-preview-wall::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at top, rgba(255,255,255,0.25), transparent 55%),
+ linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 35%);
+ mix-blend-mode: soft-light;
+ opacity: 0.9;
+ pointer-events: none;
+ }
+
+ .card-preview-bottom {
+ display: flex;
+ padding: 7px 8px 8px;
+ gap: 6px;
+ background:
+ linear-gradient(to top, rgba(0,0,0,0.96), rgba(0,0,0,0.8)),
+ linear-gradient(to right, rgba(255,255,255,0.06), rgba(0,0,0,0.6));
+ border-top: 1px solid rgba(255,255,255,0.04);
+ }
+
+ .card-preview-swatch {
+ flex: 1;
+ border-radius: 7px;
+ overflow: hidden;
+ border: 1px solid rgba(0,0,0,0.85);
+ box-shadow:
+ 0 8px 18px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(255,255,255,0.03);
+ position: relative;
+ }
+
+ .card-preview-swatch::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 65%);
+ mix-blend-mode: soft-light;
+ opacity: 0.7;
+ }
+
+ .card-preview-caption {
+ padding: 0 10px 10px;
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ align-items: baseline;
+ }
+
+ .card-preview-name {
+ color: rgba(245,242,234,0.95);
+ max-width: 70%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .card-preview-handle {
+ color: rgba(245,242,234,0.7);
+ font-size: 10px;
+ }
+
+ /* Overlay */
+ .overlay-backdrop {
+ position: fixed;
+ inset: 0;
+ background: radial-gradient(circle at top, rgba(0,0,0,0.9), rgba(0,0,0,0.98));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 50;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity var(--transition-med);
+ }
+
+ .overlay-backdrop.show {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+ .overlay-panel {
+ width: min(460px, 92vw);
+ border-radius: 20px;
+ border: 1px solid rgba(201,169,97,0.9);
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.25), rgba(0,0,0,1) 55%),
+ radial-gradient(circle at bottom right, rgba(201,169,97,0.18), rgba(0,0,0,1) 70%);
+ box-shadow:
+ 0 32px 80px rgba(0,0,0,1),
+ 0 0 0 1px rgba(255,255,255,0.04);
+ padding: 22px 22px 18px;
+ transform: translateY(18px) scale(0.98);
+ opacity: 0;
+ transition: opacity var(--transition-med), transform var(--transition-med);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .overlay-backdrop.show .overlay-panel {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+
+ .overlay-panel::before {
+ content: '';
+ position: absolute;
+ inset: -40%;
+ background:
+ radial-gradient(circle at 0 0, rgba(255,255,255,0.16) 0, transparent 60%),
+ radial-gradient(circle at 100% 100%, rgba(255,255,255,0.12) 0, transparent 55%);
+ mix-blend-mode: soft-light;
+ opacity: 0.9;
+ pointer-events: none;
+ }
+
+ .overlay-inner {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .overlay-heading {
+ font-family: var(--font-display);
+ font-size: 26px;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ }
+
+ .overlay-body {
+ font-size: 14px;
+ color: rgba(245,242,234,0.9);
+ }
+
+ .overlay-body strong {
+ color: var(--accent);
+ font-weight: 600;
+ }
+
+ .overlay-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ margin-top: 8px;
+ flex-wrap: wrap;
+ }
+
+ .overlay-meta {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .overlay-close {
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(255,255,255,0.4);
+ background: rgba(0,0,0,0.7);
+ color: var(--text);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ padding: 6px 12px;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ transition:
+ background var(--transition-fast),
+ border var(--transition-fast),
+ transform var(--transition-fast),
+ box-shadow var(--transition-fast);
+ }
+
+ .overlay-close:hover {
+ background: rgba(10,10,10,0.95);
+ border-color: rgba(255,255,255,0.7);
+ transform: translateY(-1px);
+ box-shadow: 0 12px 28px rgba(0,0,0,0.95);
+ }
+
+ .overlay-close::before {
+ content: '';
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ border: 1px solid rgba(0,0,0,0.8);
+ background: radial-gradient(circle at 20% 0, #fff8de, #c9a961);
+ box-shadow:
+ 0 0 0 1px rgba(255,255,255,0.6),
+ 0 2px 6px rgba(0,0,0,0.85);
+ }
+
+ canvas#exportCanvas {
+ display: none;
+ }
+ </style>
+</head>
+<body>
+ <header class="app-header">
+ <div class="wordmark-lockup">
+ <div class="wordmark-title">DESIGNER WALLCOVERINGS</div>
+ <div class="wordmark-sub">PALETTE ATELIER FOR INTERIOR WALLS</div>
+ </div>
+ <div class="header-meta">
+ <div class="chip-label">
+ <div class="chip-label-dot"></div>
+ <span>Social-Ready 1080×1080</span>
+ </div>
+ <div class="chip-help">Click any swatch to copy its hex.</div>
+ </div>
+ </header>
+
+ <main>
+ <div class="shell">
+ <!-- Left: Builder -->
+ <section class="panel" aria-label="Wallcovering palette builder">
+ <div class="panel-inner">
+ <div class="panel-header">
+ <div>
+ <div class="panel-kicker">Palette Builder</div>
+ <h1 class="panel-title">Curated wallcovering stories</h1>
+ </div>
+ <div class="meta-pill">
+ <div class="meta-pill-swatch"></div>
+ <span>Hue-driven, designer named</span>
+ </div>
+ </div>
+ <p class="panel-body">
+ Dial in a base hue and explore three classic relationships—analogous, complementary, and triadic—for walls, trim, textiles, ink, and brass detailing.
+ </p>
+
+ <div class="controls">
+ <div class="control-row">
+ <div class="control-label">Relationship</div>
+ <div class="mode-toggle" role="tablist">
+ <button type="button" class="active" data-mode="analogous" role="tab" aria-selected="true"><span>Analogous</span></button>
+ <button type="button" data-mode="complementary" role="tab" aria-selected="false"><span>Complementary</span></button>
+ <button type="button" data-mode="triadic" role="tab" aria-selected="false"><span>Triadic</span></button>
+ </div>
+ </div>
+
+ <div class="control-row">
+ <div>
+ <div class="control-label">Base Hue</div>
+ <div class="hue-meta">
+ <div class="hue-meta-hex"><span class="label">Anchor</span><span class="value" id="anchorHex">#C4B9A2</span></div>
+ </div>
+ </div>
+ <div class="hue-meta">
+ <div class="hue-input-row">
+ <input type="range" id="hueRange" min="0" max="359" value="38" aria-label="Base hue">
+ <input type="number" id="hueNumber" min="0" max="359" value="38" class="hue-number" aria-label="Base hue numeric value">
+ </div>
+ </div>
+ </div>
+
+ <div class="control-row">
+ <div class="hue-wheel" id="hueWheel" aria-hidden="true">
+ <div class="hue-handle" id="hueHandle"></div>
+ </div>
+ <div class="palette-section" style="flex:1.2">
+ <div class="palette-row" id="swatchRow">
+ <!-- Swatches injected -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Right: Preview + Export -->
+ <section class="panel" aria-label="Room preview and export">
+ <div class="panel-inner">
+ <div class="preview-wrap">
+ <div class="preview-meta-row">
+ <div>
+ <div class="panel-kicker">Room Preview</div>
+ <div class="preview-title">How the story reads on the wall</div>
+ </div>
+ <div class="preview-style-tag" id="previewStyleTag">
+ <div class="preview-style-dot"></div>
+ <span>Analogous Story</span>
+ </div>
+ </div>
+
+ <div class="preview-strip">
+ <div class="preview-left">
+ <div class="preview-wall" id="previewWall"></div>
+ <div class="preview-paneling"></div>
+ <div class="preview-art"></div>
+ <div class="preview-floor"></div>
+ <div class="preview-sofa"></div>
+ <div class="preview-side-table"></div>
+ </div>
+ <div class="preview-right">
+ <div class="preview-palette">
+ <div class="preview-palette-label">
+ <span>Wallcovering Suite</span>
+ <div class="preview-palette-sheen"></div>
+ </div>
+ <div class="preview-palette-swatches" id="previewMiniRow">
+ <!-- Mini swatches -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-shell" aria-label="Export card">
+ <div class="card-shell-inner">
+ <div class="card-meta-row">
+ <div class="card-caption">
+ <div class="card-caption-dot"></div>
+ <span>Export as shareable card</span>
+ </div>
+ <button class="card-button" type="button" id="exportButton">
+ <div class="card-button-icon"></div>
+ <span>Export 1080 × 1080</span>
+ </button>
+ </div>
+ <div class="card-preview" id="cardPreview">
+ <div class="card-preview-header">
+ <div class="card-preview-logo">DESIGNER WALLCOVERINGS</div>
+ <div class="card-preview-mode" id="cardModeLabel">Analogous Suite</div>
+ </div>
+ <div class="card-preview-room">
+ <div class="card-preview-top">
+ <div class="card-preview-wall" id="cardWall"></div>
+ </div>
+ <div class="card-preview-bottom" id="cardSwatchRow">
+ <!-- Card swatches -->
+ </div>
+ </div>
+ <div class="card-preview-caption">
+ <div class="card-preview-name" id="cardTitle">Stone Alabaster · Modern Greige · Smoky Celadon · Evening Ink · Aged Brass</div>
+ <div class="card-preview-handle">@DesignerWallcoverings</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </section>
+ </div>
+ </main>
+
+ <div class="copy-toast" id="copyToast">
+ <div class="copy-toast-dot"></div>
+ <span id="copyToastText">Hex copied</span>
+ </div>
+
+ <div class="overlay-backdrop" id="overlay">
+ <div class="overlay-panel" role="dialog" aria-modal="true">
+ <div class="overlay-inner">
+ <h2 class="overlay-heading">Your palette is export-ready</h2>
+ <p class="overlay-body">
+ A <strong>1080 × 1080</strong> social card of this wallcovering story has been generated in the background.
+ Right-click and <strong>Save Image As…</strong> on the downloaded square artwork, or drop it directly into your post.
+ </p>
+ <div class="overlay-footer">
+ <div class="overlay-meta">
+ Palette: <span id="overlayModeLabel">Analogous</span> · 5-swatch wallcovering suite
+ </div>
+ <button type="button" class="overlay-close" id="overlayClose">Back to studio</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <canvas id="exportCanvas" width="1080" height="1080"></canvas>
+
+ <script>
+ (function() {
+ const MODE_LABELS = {
+ analogous: 'Analogous',
+ complementary: 'Complementary',
+ triadic: 'Triadic'
+ };
+
+ const DESIGNER_NAMES = ['Alabaster', 'Greige', 'Celadon', 'Ink', 'Brass'];
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(h, s, l) {
+ s /= 100;
+ l /= 100;
+ const k = n => (n + h / 30) % 12;
+ const a = s * Math.min(l, 1 - l);
+ const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+ return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+ }
+
+ function rgbToHex(r, g, b) {
+ return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('').toUpperCase();
+ }
+
+ function hslToHex(h, s, l) {
+ const [r, g, b] = hslToRgb(h, s, l);
+ return rgbToHex(r, g, b);
+ }
+
+ function generatePalette(baseHue, mode) {
+ const stories = {
+ analogous: [
+ { role: 'Walls', name: 'Stone Alabaster', offset: -10, s: 12, l: 88 },
+ { role: 'Ground', name: 'Modern Greige', offset: 0, s: 14, l: 72 },
+ { role: 'Accent', name: 'Smoky Celadon', offset: 22, s: 18, l: 58 },
+ { role: 'Ink', name: 'Evening Ink', offset: -35, s: 10, l: 15 },
+ { role: 'Metal', name: 'Aged Brass', offset: 38, s: 42, l: 52 }
+ ],
+ complementary: [
+ { role: 'Walls', name: 'Gallery Alabaster', offset: 0, s: 10, l: 90 },
+ { role: 'Ground', name: 'Soft Greige', offset: -8, s: 13, l: 76 },
+ { role: 'Accent', name: 'Pale Celadon', offset: 160, s: 26, l: 62 },
+ { role: 'Ink', name: 'Midnight Ink', offset: 188, s: 22, l: 12 },
+ { role: 'Metal', name: 'Brushed Brass', offset: 46, s: 48, l: 55 }
+ ],
+ triadic: [
+ { role: 'Walls', name: 'Plaster Alabaster', offset: 0, s: 10, l: 88 },
+ { role: 'Ground', name: 'Warm Greige', offset: 12, s: 16, l: 70 },
+ { role: 'Accent', name: 'Misted Celadon', offset: 120, s: 24, l: 58 },
+ { role: 'Ink', name: 'Gallery Ink', offset: 240, s: 18, l: 18 },
+ { role: 'Metal', name: 'Antique Brass', offset: 40, s: 46, l: 53 }
+ ]
+ };
+
+ const config = stories[mode];
+ const result = [];
+
+ for (let i = 0; i < config.length; i++) {
+ const c = config[i];
+ const h = (baseHue + c.offset + 360) % 360;
+ const hex = hslToHex(h, c.s, c.l);
+ result.push({
+ hex,
+ name: c.name,
+ role: c.role,
+ h,
+ s: c.s,
+ l: c.l
+ });
+ }
+ return result;
+ }
+
+ function updateSwatches(palette) {
+ const row = document.getElementById('swatchRow');
+ row.innerHTML = '';
+ palette.forEach((sw, index) => {
+ const swatch = document.createElement('div');
+ swatch.className = 'swatch';
+
+ const tile = document.createElement('div');
+ tile.className = 'swatch-tile';
+ tile.style.backgroundColor = sw.hex;
+ tile.dataset.hex = sw.hex;
+
+ if (index === 0) {
+ tile.style.backgroundImage =
+ 'repeating-linear-gradient(135deg, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 1px, transparent 1px, transparent 8px)';
+ tile.style.backgroundBlendMode = 'soft-light';
+ } else if (index === 1) {
+ tile.style.backgroundImage =
+ 'linear-gradient(120deg, rgba(0,0,0,0.2), transparent 55%), repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1px, transparent 1px, transparent 12px)';
+ tile.style.backgroundBlendMode = 'soft-light';
+ } else if (index === 2) {
+ tile.style.backgroundImage =
+ 'radial-gradient(circle at 20% 0%, rgba(255,255,255,0.32), transparent 45%), radial-gradient(circle at 80% 120%, rgba(0,0,0,0.4), transparent 55%)';
+ tile.style.backgroundBlendMode = 'soft-light';
+ } else if (index === 3) {
+ tile.style.backgroundImage =
+ 'repeating-linear-gradient(0deg, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 1px, transparent 1px, transparent 6px)';
+ tile.style.backgroundBlendMode = 'soft-light';
+ } else if (index === 4) {
+ tile.style.backgroundImage =
+ 'linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1), rgba(0,0,0,0.4))';
+ tile.style.backgroundBlendMode = 'soft-light';
+ }
+
+ const label = document.createElement('div');
+ label.className = 'swatch-label';
+
+ const name = document.createElement('div');
+ name.className = 'swatch-name';
+ name.textContent = sw.name;
+
+ const meta = document.createElement('div');
+ meta.className = 'swatch-meta';
+
+ const role = document.createElement('span');
+ role.className = 'swatch-tag';
+ role.textContent = sw.role;
+
+ const hex = document.createElement('span');
+ hex.className = 'swatch-hex';
+ hex.textContent = sw.hex;
+
+ meta.appendChild(role);
+ meta.appendChild(hex);
+ label.appendChild(name);
+ label.appendChild(meta);
+
+ swatch.appendChild(tile);
+ swatch.appendChild(label);
+ row.appendChild(swatch);
+ });
+ }
+
+ function updatePreview(palette) {
+ const wall = document.getElementById('previewWall');
+ const [alabaster, greige, celadon, ink, brass] = palette;
+
+ wall.style.background = `
+ linear-gradient(to bottom, ${alabaster.hex}, ${greige.hex})`;
+
+ const miniRow = document.getElementById('previewMiniRow');
+ miniRow.innerHTML = '';
+ palette.forEach(sw => {
+ const mini = document.createElement('div');
+ mini.className = 'preview-mini';
+ mini.style.background = sw.hex;
+ miniRow.appendChild(mini);
+ });
+ }
+
+ function updateCard(palette, mode) {
+ const wall = document.getElementById('cardWall');
+ const cardSwatchRow = document.getElementById('cardSwatchRow');
+ const cardModeLabel = document.getElementById('cardModeLabel');
+ const cardTitle = document.getElementById('cardTitle');
+
+ const [alabaster, greige, celadon, ink, brass] = palette;
+
+ wall.style.background = `
+ radial-gradient(circle at top left, rgba(255,255,255,0.26), transparent 50%),
+ linear-gradient(to bottom right, ${alabaster.hex}, ${greige.hex})`;
+
+ cardSwatchRow.innerHTML = '';
+ palette.forEach(sw => {
+ const swDiv = document.createElement('div');
+ swDiv.className = 'card-preview-swatch';
+ swDiv.style.background = sw.hex;
+ cardSwatchRow.appendChild(swDiv);
+ });
+
+ cardModeLabel.textContent = MODE_LABELS[mode] + ' Suite';
+ cardTitle.textContent = palette.map(sw => sw.name).join(' · ');
+ }
+
+ function updateAnchorHex(palette) {
+ const anchorHex = document.getElementById('anchorHex');
+ if (palette[0]) {
+ anchorHex.textContent = palette[0].hex;
+ }
+ }
+
+ function updateModeLabel(mode) {
+ const tag = document.getElementById('previewStyleTag').querySelector('span');
+ const overlayModeLabel = document.getElementById('overlayModeLabel');
+ tag.textContent = MODE_LABELS[mode] + ' Story';
+ overlayModeLabel.textContent = MODE_LABELS[mode];
+ }
+
+ function setHueOnWheel(h) {
+ const wheel = document.getElementById('hueWheel');
+ const handle = document.getElementById('hueHandle');
+ const rect = wheel.getBoundingClientRect();
+ const radius = rect.width / 2;
+ const angleRad = (h - 90) * (Math.PI / 180);
+ const cx = rect.width / 2;
+ const cy = rect.height / 2;
+ const r = radius - 12;
+ const x = cx + r * Math.cos(angleRad);
+ const y = cy + r * Math.sin(angleRad);
+ handle.style.left = x + 'px';
+ handle.style.top = y + 'px';
+ }
+
+ function showToast(text) {
+ const toast = document.getElementById('copyToast');
+ const label = document.getElementById('copyToastText');
+ label.textContent = text;
+ toast.classList.add('show');
+ clearTimeout(showToast._timer);
+ showToast._timer = setTimeout(() => {
+ toast.classList.remove('show');
+ }, 1800);
+ }
+
+ let currentHue = 38;
+ let currentMode = 'analogous';
+ let currentPalette = [];
+
+ function refresh() {
+ currentPalette = generatePalette(currentHue, currentMode);
+ updateSwatches(currentPalette);
+ updatePreview(currentPalette);
+ updateCard(currentPalette, currentMode);
+ updateAnchorHex(currentPalette);
+ }
+
+ function initSwatchCopy() {
+ document.addEventListener('click', async (e) => {
+ const tile = e.target.closest('.swatch-tile');
+ if (!tile) return;
+ const hex = tile.dataset.hex;
+ if (!hex) return;
+ try {
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ await navigator.clipboard.writeText(hex);
+ }
+ } catch (err) {
+ // silent fallback
+ }
+ showToast(hex + ' copied');
+ });
+ }
+
+ function initModeToggle() {
+ const buttons = Array.from(document.querySelectorAll('.mode-toggle button'));
+ buttons.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const mode = btn.dataset.mode;
+ if (!mode || mode === currentMode) return;
+ currentMode = mode;
+ buttons.forEach(b => b.classList.toggle('active', b === btn));
+ updateModeLabel(currentMode);
+ refresh();
+ });
+ });
+ }
+
+ function initHueInputs() {
+ const range = document.getElementById('hueRange');
+ const number = document.getElementById('hueNumber');
+
+ range.addEventListener('input', () => {
+ const h = parseInt(range.value, 10) || 0;
+ currentHue = h;
+ number.value = h;
+ setHueOnWheel(h);
+ refresh();
+ });
+
+ number.addEventListener('input', () => {
+ const h = clamp(parseInt(number.value, 10) || 0, 0, 359);
+ currentHue = h;
+ range.value = h;
+ setHueOnWheel(h);
+ refresh();
+ });
+ }
+
+ function initHueWheel() {
+ const wheel = document.getElementById('hueWheel');
+ const handle = document.getElementById('hueHandle');
+ let dragging = false;
+
+ function setHueFromPoint(clientX, clientY) {
+ const rect = wheel.getBoundingClientRect();
+ const cx = rect.left + rect.width / 2;
+ const cy = rect.top + rect.height / 2;
+ const dx = clientX - cx;
+ const dy = clientY - cy;
+ const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+ const h = Math.round((angle + 90 + 360) % 360);
+ currentHue = h;
+ document.getElementById('hueRange').value = h;
+ document.getElementById('hueNumber').value = h;
+ setHueOnWheel(h);
+ refresh();
+ }
+
+ wheel.addEventListener('mousedown', (e) => {
+ dragging = true;
+ setHueFromPoint(e.clientX, e.clientY);
+ });
+
+ window.addEventListener('mousemove', (e) => {
+ if (!dragging) return;
+ setHueFromPoint(e.clientX, e.clientY);
+ });
+
+ window.addEventListener('mouseup', () => {
+ dragging = false;
+ });
+
+ wheel.addEventListener('touchstart', (e) => {
+ dragging = true;
+ const t = e.touches[0];
+ setHueFromPoint(t.clientX, t.clientY);
+ e.preventDefault();
+ }, { passive: false });
+
+ window.addEventListener('touchmove', (e) => {
+ if (!dragging) return;
+ const t = e.touches[0];
+ setHueFromPoint(t.clientX, t.clientY);
+ }, { passive: false });
+
+ window.addEventListener('touchend', () => {
+ dragging = false;
+ });
+
+ setHueOnWheel(currentHue);
+ }
+
+ // Export card via canvas
+ function drawExportCard() {
+ const c = document.getElementById('exportCanvas');
+ const ctx = c.getContext('2d');
+ const size = 1080;
+
+ const gradientBg = ctx.createRadialGradient(size * 0.2, size * 0.1, size * 0.1, size * 0.5, size * 0.8, size * 0.9);
+ gradientBg.addColorStop(0, '#25252b');
+ gradientBg.addColorStop(1, '#050506');
+ ctx.fillStyle = gradientBg;
+ ctx.fillRect(0, 0, size, size);
+
+ const palette = currentPalette;
+ const [alabaster, greige, celadon, ink, brass] = palette;
+
+ const wallGradient = ctx.createLinearGradient(0, 0, size, size * 0.6);
+ wallGradient.addColorStop(0, alabaster.hex);
+ wallGradient.addColorStop(1, greige.hex);
+ ctx.save();
+ const roomMargin = 120;
+ const roomHeight = size * 0.52;
+ ctx.beginPath();
+ ctx.roundRect(roomMargin, roomMargin + 40, size - roomMargin * 2, roomHeight, 32);
+ ctx.clip();
+ ctx.fillStyle = wallGradient;
+ ctx.fillRect(roomMargin, roomMargin + 40, size - roomMargin * 2, roomHeight);
+
+ // subtle pattern on wall
+ ctx.globalAlpha = 0.15;
+ ctx.fillStyle = '#FFFFFF';
+ for (let y = roomMargin + 40; y < roomMargin + 40 + roomHeight; y += 24) {
+ ctx.fillRect(roomMargin, y, size - roomMargin * 2, 1);
+ }
+ ctx.globalAlpha = 1;
+
+ // floor
+ const floorY = roomMargin + 40 + roomHeight - 40;
+ ctx.save();
+ ctx.transform(1, 0, -0.45, 1, 0, 0);
+ ctx.fillStyle = '#4a4338';
+ ctx.fillRect(roomMargin + 80, floorY, size - roomMargin * 2 - 160, size * 0.35);
+ ctx.restore();
+
+ // sofa
+ ctx.fillStyle = '#b7aa94';
+ const sofaY = floorY - 80;
+ const sofaX = size * 0.48;
+ const sofaW = size * 0.32;
+ const sofaH = 80;
+ ctx.beginPath();
+ ctx.roundRect(sofaX, sofaY, sofaW, sofaH, 22);
+ ctx.fill();
+
+ // art piece
+ ctx.fillStyle = celadon.hex;
+ const artX = roomMargin + 110;
+ const artY = roomMargin + 60;
+ const artW = 180;
+ const artH = 260;
+ ctx.beginPath();
+ ctx.roundRect(artX, artY, artW, artH, 18);
+ ctx.fill();
+ ctx.globalAlpha = 0.4;
+ ctx.fillStyle = 'white';
+ for (let i = -artH; i < artW + artH; i += 14) {
+ ctx.fillRect(artX + i, artY, 2, artH);
+ }
+ ctx.globalAlpha = 1;
+
+ // side table + lamp
+ ctx.fillStyle = ink.hex;
+ const tableX = roomMargin + 80;
+ const tableY = floorY - 60;
+ ctx.beginPath();
+ ctx.roundRect(tableX, tableY, 70, 70, 12);
+ ctx.fill();
+
+ const brassGrad = ctx.createRadialGradient(tableX + 35, tableY - 10, 4, tableX + 35, tableY + 10, 30);
+ brassGrad.addColorStop(0, '#
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/gpt.png b/data/artifacts/edd68668d3dc/gpt.png
new file mode 100644
index 0000000..c5b211d
Binary files /dev/null and b/data/artifacts/edd68668d3dc/gpt.png differ
diff --git a/data/artifacts/edd68668d3dc/grok.html b/data/artifacts/edd68668d3dc/grok.html
new file mode 100644
index 0000000..ae6a62d
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/grok.html
@@ -0,0 +1,1348 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Designer Wallcoverings — Palette Builder</title>
+<style>
+:root {
+ --bg: #f7f3eb;
+ --bg-deep: #efe8dc;
+ --surface: #fffcf6;
+ --ink: #1c1a17;
+ --ink-soft: #3a3530;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-deep: #7d6a45;
+ --line: rgba(28, 26, 23, 0.12);
+ --line-strong: rgba(28, 26, 23, 0.22);
+ --shadow: 0 18px 48px rgba(28, 26, 23, 0.08), 0 2px 8px rgba(28, 26, 23, 0.04);
+ --shadow-soft: 0 8px 24px rgba(28, 26, 23, 0.06);
+ --ease: cubic-bezier(.22, .9, .24, 1);
+ --ease-out: cubic-bezier(.22, 1, .36, 1);
+ --serif: "Cormorant Garamond", "Playfair Display", "EB Garamond", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
+ --sans: "Avenir Next", "Century Gothic", Futura, "Segoe UI", "Helvetica Neue", sans-serif;
+ --mono: "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
+ --radius: 14px;
+ --radius-tight: 6px;
+ --header-h: 72px;
+ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
+ --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
+}
+
+*, *::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.6;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+/* ── Fixed header / wordmark ── */
+.site-header {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: var(--header-h);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 var(--s6);
+ background: rgba(247, 243, 235, 0.92);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--line);
+}
+
+.wordmark {
+ font-family: var(--serif);
+ font-size: 22px;
+ font-weight: 500;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--ink);
+ line-height: 1.15;
+ white-space: normal;
+ max-width: min(520px, 70vw);
+}
+
+.wordmark span {
+ display: block;
+}
+
+.header-meta {
+ font-family: var(--sans);
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ font-weight: 500;
+}
+
+/* ── Layout ── */
+main {
+ max-width: 1120px;
+ margin: 0 auto;
+ padding: calc(var(--header-h) + var(--s8)) var(--s6) var(--s9);
+}
+
+.hero {
+ text-align: center;
+ margin-bottom: var(--s8);
+}
+
+.eyebrow {
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent-deep);
+ margin-bottom: var(--s4);
+ font-weight: 600;
+}
+
+.hero h1 {
+ font-family: var(--serif);
+ font-size: clamp(38px, 5vw, 50px);
+ font-weight: 500;
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ color: var(--ink);
+ margin-bottom: var(--s4);
+}
+
+.hero p {
+ font-size: 17px;
+ color: var(--ink-soft);
+ max-width: 48ch;
+ margin: 0 auto;
+ line-height: 1.65;
+}
+
+/* ── Workspace grid ── */
+.workspace {
+ display: grid;
+ grid-template-columns: 320px 1fr;
+ gap: var(--s6);
+ align-items: start;
+}
+
+@media (max-width: 880px) {
+ .workspace { grid-template-columns: 1fr; }
+ .wordmark { font-size: 18px; max-width: 58vw; }
+}
+
+/* ── Control card ── */
+.panel {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow-soft);
+ padding: var(--s6);
+}
+
+.panel-label {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ font-weight: 600;
+ margin-bottom: var(--s4);
+}
+
+/* Color wheel */
+.wheel-wrap {
+ position: relative;
+ width: 240px;
+ height: 240px;
+ margin: 0 auto var(--s5);
+}
+
+.wheel-canvas {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ cursor: crosshair;
+ box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
+ display: block;
+}
+
+.wheel-knob {
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ border: 2px solid #fff;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1);
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+ transition: box-shadow 0.2s var(--ease);
+}
+
+.hue-readout {
+ text-align: center;
+ font-family: var(--mono);
+ font-size: 12px;
+ color: var(--muted);
+ letter-spacing: 0.06em;
+ margin-bottom: var(--s5);
+}
+
+/* Mode toggle */
+.mode-toggle {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 4px;
+ background: var(--bg-deep);
+ padding: 4px;
+ border-radius: var(--radius-tight);
+ border: 1px solid var(--line);
+ margin-bottom: var(--s5);
+}
+
+.mode-btn {
+ appearance: none;
+ border: none;
+ background: transparent;
+ font-family: var(--sans);
+ font-size: 10px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding: 10px 4px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 600;
+ transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
+}
+
+.mode-btn[aria-pressed="true"] {
+ background: var(--surface);
+ color: var(--ink);
+ box-shadow: 0 1px 3px rgba(28,26,23,0.08);
+}
+
+.mode-btn:hover:not([aria-pressed="true"]) {
+ color: var(--ink-soft);
+}
+
+/* Sat / Light sliders */
+.slider-row {
+ margin-bottom: var(--s4);
+}
+
+.slider-row label {
+ display: flex;
+ justify-content: space-between;
+ font-size: 10px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ font-weight: 600;
+ margin-bottom: 8px;
+}
+
+.slider-row label span {
+ font-family: var(--mono);
+ letter-spacing: 0.04em;
+ color: var(--ink-soft);
+}
+
+input[type="range"] {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 3px;
+ background: linear-gradient(90deg, var(--line-strong), var(--accent));
+ border-radius: 999px;
+ outline: none;
+ cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: var(--surface);
+ border: 1px solid var(--line-strong);
+ box-shadow: var(--shadow-soft);
+ cursor: grab;
+}
+
+input[type="range"]::-moz-range-thumb {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: var(--surface);
+ border: 1px solid var(--line-strong);
+ box-shadow: var(--shadow-soft);
+ cursor: grab;
+}
+
+/* ── Palette swatches ── */
+.palette-stage {
+ display: flex;
+ flex-direction: column;
+ gap: var(--s5);
+}
+
+.swatch-row {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 12px;
+}
+
+@media (max-width: 600px) {
+ .swatch-row { grid-template-columns: repeat(2, 1fr); }
+}
+
+.swatch {
+ position: relative;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ overflow: hidden;
+ background: var(--surface);
+ box-shadow: var(--shadow-soft);
+ cursor: pointer;
+ transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
+ outline: none;
+}
+
+.swatch:hover, .swatch:focus-visible {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow);
+}
+
+.swatch-chip {
+ height: 120px;
+ position: relative;
+}
+
+.swatch-chip::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.06));
+ pointer-events: none;
+}
+
+.swatch-meta {
+ padding: 14px 12px 16px;
+ border-top: 1px solid var(--line);
+}
+
+.swatch-name {
+ font-family: var(--serif);
+ font-size: 18px;
+ font-weight: 500;
+ color: var(--ink);
+ line-height: 1.2;
+ margin-bottom: 4px;
+}
+
+.swatch-hex {
+ font-family: var(--mono);
+ font-size: 11px;
+ letter-spacing: 0.06em;
+ color: var(--muted);
+ text-transform: uppercase;
+}
+
+.swatch.copied .swatch-hex {
+ color: var(--accent-deep);
+}
+
+/* Room preview */
+.room-preview {
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ overflow: hidden;
+ background: var(--surface);
+ box-shadow: var(--shadow-soft);
+}
+
+.room-label-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 14px 20px;
+ border-bottom: 1px solid var(--line);
+}
+
+.room-label-bar .panel-label { margin: 0; }
+
+.room-scene {
+ position: relative;
+ height: 280px;
+ overflow: hidden;
+}
+
+/* CSS-drawn interior: floor, wall, wainscot, sofa silhouette, lamp, art */
+.room-wall {
+ position: absolute;
+ inset: 0 0 38% 0;
+ transition: background 0.5s var(--ease);
+}
+
+.room-wainscot {
+ position: absolute;
+ left: 0; right: 0;
+ bottom: 38%;
+ height: 18%;
+ border-top: 3px solid rgba(28,26,23,0.12);
+ transition: background 0.5s var(--ease);
+}
+
+.room-wainscot::before {
+ content: "";
+ position: absolute;
+ left: 8%; right: 8%;
+ top: 22%;
+ bottom: 22%;
+ border: 1px solid rgba(28,26,23,0.1);
+ border-radius: 2px;
+}
+
+.room-floor {
+ position: absolute;
+ left: 0; right: 0; bottom: 0;
+ height: 38%;
+ background:
+ linear-gradient(180deg, rgba(28,26,23,0.06), transparent 40%),
+ repeating-linear-gradient(
+ 90deg,
+ #c4a882 0px,
+ #c4a882 48px,
+ #b8986e 48px,
+ #b8986e 50px
+ );
+}
+
+.room-floor::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(0,0,0,0.05), transparent 30%);
+}
+
+.room-sofa {
+ position: absolute;
+ left: 18%;
+ right: 28%;
+ bottom: 32%;
+ height: 22%;
+ border-radius: 10px 10px 4px 4px;
+ transition: background 0.5s var(--ease);
+ box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+
+.room-sofa::before {
+ content: "";
+ position: absolute;
+ left: 6%; right: 6%;
+ top: -28%;
+ height: 40%;
+ border-radius: 8px 8px 0 0;
+ background: inherit;
+ filter: brightness(1.05);
+ box-shadow: inset 0 2px 0 rgba(255,255,255,0.15);
+}
+
+.room-sofa::after {
+ content: "";
+ position: absolute;
+ left: -4%;
+ width: 10%;
+ top: 10%;
+ bottom: 0;
+ border-radius: 6px;
+ background: inherit;
+ filter: brightness(0.92);
+ box-shadow: 4px 0 0 inherit;
+}
+
+.room-sofa-arm {
+ position: absolute;
+ right: -4%;
+ width: 10%;
+ top: 10%;
+ bottom: 0;
+ border-radius: 6px;
+ background: inherit;
+ filter: brightness(0.92);
+}
+
+.room-cushion {
+ position: absolute;
+ width: 22%;
+ height: 45%;
+ top: 18%;
+ border-radius: 6px;
+ transition: background 0.5s var(--ease);
+ box-shadow: inset 0 -2px 4px rgba(0,0,0,0.08);
+}
+
+.room-cushion.c1 { left: 18%; }
+.room-cushion.c2 { left: 44%; filter: brightness(0.96); }
+
+.room-art {
+ position: absolute;
+ top: 12%;
+ right: 12%;
+ width: 14%;
+ height: 28%;
+ border: 6px solid rgba(28,26,23,0.55);
+ box-shadow: var(--shadow-soft);
+ transition: background 0.5s var(--ease);
+}
+
+.room-art::before {
+ content: "";
+ position: absolute;
+ inset: 8%;
+ border: 1px solid rgba(255,255,255,0.2);
+}
+
+.room-lamp {
+ position: absolute;
+ left: 10%;
+ bottom: 38%;
+ width: 4px;
+ height: 28%;
+ background: linear-gradient(180deg, var(--accent), var(--accent-deep));
+}
+
+.room-lamp::before {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: -28px;
+ width: 42px;
+ height: 30px;
+ transform: translateX(-50%);
+ background: #f0e6d0;
+ clip-path: polygon(15% 100%, 85% 100%, 100% 0, 0 0);
+ box-shadow: 0 0 24px rgba(201, 169, 97, 0.35);
+}
+
+.room-lamp::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ bottom: -6px;
+ width: 22px;
+ height: 6px;
+ transform: translateX(-50%);
+ background: var(--accent-deep);
+ border-radius: 2px;
+}
+
+.room-plant {
+ position: absolute;
+ right: 8%;
+ bottom: 38%;
+ width: 36px;
+ height: 48px;
+}
+
+.room-plant svg { width: 100%; height: 100%; display: block; }
+
+/* Actions */
+.actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: var(--s2);
+}
+
+.btn {
+ appearance: none;
+ border: 1px solid var(--line-strong);
+ background: var(--surface);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ font-weight: 600;
+ padding: 14px 22px;
+ border-radius: var(--radius-tight);
+ cursor: pointer;
+ transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
+ box-shadow: var(--shadow-soft);
+}
+
+.btn:hover {
+ border-color: var(--ink);
+ transform: translateY(-1px);
+}
+
+.btn:active { transform: translateY(0); }
+
+.btn-primary {
+ background: var(--ink);
+ color: var(--bg);
+ border-color: var(--ink);
+}
+
+.btn-primary:hover {
+ background: var(--ink-soft);
+ border-color: var(--ink-soft);
+ box-shadow: var(--shadow);
+}
+
+.btn-accent {
+ background: var(--accent);
+ color: var(--ink);
+ border-color: var(--accent-deep);
+}
+
+/* Toast / copy feedback */
+.toast {
+ position: fixed;
+ bottom: 32px;
+ left: 50%;
+ transform: translateX(-50%) translateY(20px);
+ background: var(--ink);
+ color: var(--bg);
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ font-weight: 600;
+ padding: 14px 24px;
+ border-radius: var(--radius-tight);
+ box-shadow: var(--shadow);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
+ z-index: 200;
+}
+
+.toast.show {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+}
+
+/* Export overlay */
+.overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(28, 26, 23, 0.55);
+ backdrop-filter: blur(6px);
+ z-index: 300;
+ display: grid;
+ place-items: center;
+ padding: var(--s5);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.35s var(--ease);
+}
+
+.overlay.open {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.overlay-card {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ padding: var(--s6);
+ max-width: 440px;
+ width: 100%;
+ text-align: center;
+ transform: translateY(12px) scale(0.98);
+ transition: transform 0.4s var(--ease-out);
+}
+
+.overlay.open .overlay-card {
+ transform: translateY(0) scale(1);
+}
+
+.overlay-card h2 {
+ font-family: var(--serif);
+ font-size: 28px;
+ font-weight: 500;
+ margin-bottom: var(--s3);
+ color: var(--ink);
+}
+
+.overlay-card p {
+ color: var(--ink-soft);
+ font-size: 15px;
+ margin-bottom: var(--s5);
+ line-height: 1.55;
+}
+
+.overlay-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+#exportCanvas {
+ position: absolute;
+ left: -9999px;
+ top: 0;
+ width: 1080px;
+ height: 1080px;
+}
+
+/* Palette name strip */
+.palette-title {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: var(--s4);
+ margin-bottom: 4px;
+}
+
+.palette-title h2 {
+ font-family: var(--serif);
+ font-size: 28px;
+ font-weight: 500;
+ letter-spacing: -0.01em;
+ color: var(--ink);
+}
+
+.palette-title .mode-tag {
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent-deep);
+ font-weight: 600;
+}
+
+.hint {
+ font-size: 13px;
+ color: var(--muted);
+ margin-bottom: var(--s4);
+}
+
+/* Accent hairline */
+.divider {
+ height: 1px;
+ background: var(--line);
+ margin: var(--s5) 0;
+}
+
+footer.site-foot {
+ margin-top: var(--s8);
+ padding-top: var(--s5);
+ border-top: 1px solid var(--line);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: var(--s3);
+}
+
+footer.site-foot p {
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+</style>
+</head>
+<body>
+<header class="site-header">
+ <div class="wordmark">Designer<br />Wallcoverings</div>
+ <div class="header-meta">Palette Atelier</div>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="eyebrow">Interior Color Studio</div>
+ <h1>Compose a wallcovering palette</h1>
+ <p>Select a base hue. We curate five harmonious finishes with designer names — ready for mood boards and client decks.</p>
+ </section>
+
+ <div class="workspace">
+ <!-- Controls -->
+ <aside class="panel">
+ <div class="panel-label">Base Hue</div>
+ <div class="wheel-wrap" id="wheelWrap">
+ <canvas class="wheel-canvas" id="wheel" width="480" height="480" aria-label="Color wheel"></canvas>
+ <div class="wheel-knob" id="knob"></div>
+ </div>
+ <div class="hue-readout" id="hueReadout">H 28° · Warm Clay</div>
+
+ <div class="panel-label">Harmony</div>
+ <div class="mode-toggle" role="group" aria-label="Harmony mode">
+ <button type="button" class="mode-btn" data-mode="analogous" aria-pressed="true">Analogous</button>
+ <button type="button" class="mode-btn" data-mode="complementary" aria-pressed="false">Complement</button>
+ <button type="button" class="mode-btn" data-mode="triadic" aria-pressed="false">Triadic</button>
+ </div>
+
+ <div class="slider-row">
+ <label>Saturation <span id="satVal">42%</span></label>
+ <input type="range" id="sat" min="18" max="72" value="42" />
+ </div>
+ <div class="slider-row">
+ <label>Lightness <span id="litVal">58%</span></label>
+ <input type="range" id="lit" min="28" max="82" value="58" />
+ </div>
+
+ <div class="divider"></div>
+
+ <div class="actions" style="margin-top:0">
+ <button type="button" class="btn btn-primary" id="btnExport">Export 1080 Card</button>
+ <button type="button" class="btn" id="btnCopyAll">Copy All Hex</button>
+ </div>
+ </aside>
+
+ <!-- Palette + room -->
+ <section class="palette-stage">
+ <div>
+ <div class="palette-title">
+ <h2 id="paletteName">Sienna Atelier</h2>
+ <span class="mode-tag" id="modeTag">Analogous</span>
+ </div>
+ <p class="hint">Click any swatch to copy its hex</p>
+ <div class="swatch-row" id="swatches" aria-live="polite"></div>
+ </div>
+
+ <div class="room-preview">
+ <div class="room-label-bar">
+ <span class="panel-label">Live Room Preview</span>
+ <span class="panel-label" id="roomScheme">Wall · Trim · Upholstery</span>
+ </div>
+ <div class="room-scene" id="roomScene">
+ <div class="room-wall" id="roomWall"></div>
+ <div class="room-wainscot" id="roomWainscot"></div>
+ <div class="room-floor"></div>
+ <div class="room-lamp"></div>
+ <div class="room-art" id="roomArt"></div>
+ <div class="room-sofa" id="roomSofa">
+ <div class="room-sofa-arm"></div>
+ <div class="room-cushion c1" id="cush1"></div>
+ <div class="room-cushion c2" id="cush2"></div>
+ </div>
+ <div class="room-plant">
+ <svg viewBox="0 0 36 48" fill="none" aria-hidden="true">
+ <rect x="14" y="34" width="8" height="14" rx="1" fill="#6b5a42"/>
+ <path d="M18 34 C18 34 8 28 10 18 C12 22 16 24 18 28 Z" fill="#3d5c45"/>
+ <path d="M18 32 C18 32 28 26 26 14 C24 20 20 24 18 28 Z" fill="#4a7054"/>
+ <path d="M18 30 C18 30 14 16 18 8 C20 14 20 22 18 28 Z" fill="#2f4a38"/>
+ </svg>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <footer class="site-foot">
+ <p>Designer Wallcoverings · Editorial Color</p>
+ <p>Social-ready · 1080×1080</p>
+ </footer>
+</main>
+
+<div class="toast" id="toast" role="status">Copied</div>
+
+<div class="overlay" id="overlay" aria-hidden="true">
+ <div class="overlay-card" role="dialog" aria-labelledby="ovTitle">
+ <h2 id="ovTitle">Card ready</h2>
+ <p id="ovBody">Your 1080×1080 palette card has been generated and downloaded.</p>
+ <div class="overlay-actions">
+ <button type="button" class="btn btn-primary" id="ovClose">Close</button>
+ </div>
+ </div>
+</div>
+
+<canvas id="exportCanvas" width="1080" height="1080"></canvas>
+
+<script>
+(function () {
+ const NAMES = [
+ "Alabaster", "Greige", "Celadon", "Ink", "Brass",
+ "Parchment", "Dove", "Sage", "Obsidian", "Champagne",
+ "Linen", "Taupe", "Moss", "Noir", "Gilt",
+ "Ivory", "Putty", "Fern", "Charcoal", "Bronze",
+ "Bone", "Clay", "Olive", "Soot", "Copper",
+ "Chalk", "Mushroom", "Eucalyptus", "Graphite", "Honey",
+ "Porcelain", "Stone", "Laurel", "Slate", "Amber",
+ "Cream", "Fawn", "Jade", "Ebony", "Ochre",
+ "Bisque", "Sand", "Verdigris", "Midnight", "Sienna"
+ ];
+
+ const HUE_WORDS = [
+ [0, "Crimson Ember"], [15, "Warm Clay"], [30, "Terracotta"],
+ [45, "Marigold"], [60, "Goldenrod"], [75, "Chartreuse Mist"],
+ [90, "Olive Grove"], [105, "Fern Path"], [120, "Botanical"],
+ [150, "Sea Glass"], [165, "Celadon Tide"], [180, "Aqua Depth"],
+ [195, "Horizon Blue"], [210, "Delft"], [225, "Indigo Wash"],
+ [240, "Midnight Ink"], [270, "Amethyst"], [300, "Mulberry"],
+ [330, "Rosewood"], [345, "Blush Clay"]
+ ];
+
+ const state = {
+ hue: 28,
+ sat: 42,
+ lit: 58,
+ mode: "analogous",
+ palette: []
+ };
+
+ const els = {
+ wheel: document.getElementById("wheel"),
+ knob: document.getElementById("knob"),
+ wrap: document.getElementById("wheelWrap"),
+ hueReadout: document.getElementById("hueReadout"),
+ sat: document.getElementById("sat"),
+ lit: document.getElementById("lit"),
+ satVal: document.getElementById("satVal"),
+ litVal: document.getElementById("litVal"),
+ swatches: document.getElementById("swatches"),
+ paletteName: document.getElementById("paletteName"),
+ modeTag: document.getElementById("modeTag"),
+ toast: document.getElementById("toast"),
+ overlay: document.getElementById("overlay"),
+ ovBody: document.getElementById("ovBody"),
+ ovClose: document.getElementById("ovClose"),
+ btnExport: document.getElementById("btnExport"),
+ btnCopyAll: document.getElementById("btnCopyAll"),
+ roomWall: document.getElementById("roomWall"),
+ roomWainscot: document.getElementById("roomWainscot"),
+ roomSofa: document.getElementById("roomSofa"),
+ roomArt: document.getElementById("roomArt"),
+ cush1: document.getElementById("cush1"),
+ cush2: document.getElementById("cush2"),
+ exportCanvas: document.getElementById("exportCanvas")
+ };
+
+ /* ── Color math ── */
+ function hslToRgb(h, s, l) {
+ h = ((h % 360) + 360) % 360;
+ s /= 100; l /= 100;
+ const c = (1 - Math.abs(2 * l - 1)) * s;
+ const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+ const m = l - c / 2;
+ let r = 0, g = 0, b = 0;
+ if (h < 60) { r = c; g = x; }
+ else if (h < 120) { r = x; g = c; }
+ else if (h < 180) { g = c; b = x; }
+ else if (h < 240) { g = x; b = c; }
+ else if (h < 300) { r = x; b = c; }
+ else { r = c; b = x; }
+ return [
+ Math.round((r + m) * 255),
+ Math.round((g + m) * 255),
+ Math.round((b + m) * 255)
+ ];
+ }
+
+ function rgbToHex(r, g, b) {
+ return "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join("").toUpperCase();
+ }
+
+ function hslToHex(h, s, l) {
+ return rgbToHex(...hslToRgb(h, s, l));
+ }
+
+ function relativeLuminance(r, g, b) {
+ const lin = [r, g, b].map(v => {
+ v /= 255;
+ return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+ });
+ return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+ }
+
+ function nameForHue(h) {
+ let best = HUE_WORDS[0][1], bestD = 999;
+ for (const [hh, n] of HUE_WORDS) {
+ let d = Math.abs(h - hh);
+ if (d > 180) d = 360 - d;
+ if (d < bestD) { bestD = d; best = n; }
+ }
+ return best;
+ }
+
+ function pickNames(h, mode) {
+ // Deterministic designer names from hue + mode
+ const seed = Math.round(h) + mode.length * 17;
+ const used = new Set();
+ const out = [];
+ // Prefer classic set first, then extended
+ const pool = NAMES.slice();
+ for (let i = 0; i < 5; i++) {
+ let idx = (seed * (i + 3) + i * 11) % pool.length;
+ let guard = 0;
+ while (used.has(idx) && guard < 40) {
+ idx = (idx + 7) % pool.length;
+ guard++;
+ }
+ used.add(idx);
+ out.push(pool[idx]);
+ }
+ // Ensure some classics appear often
+ const classics = ["Alabaster", "Greige", "Celadon", "Ink", "Brass"];
+ if (seed % 3 === 0) {
+ out[0] = classics[0];
+ out[4] = classics[4];
+ }
+ return out;
+ }
+
+ function buildHarmony(h, s, l, mode) {
+ // Returns 5 {h,s,l} tuned for wallcovering taste
+ const clamps = (v, a, b) => Math.max(a, Math.min(b, v));
+ let specs = [];
+
+ if (mode === "analogous") {
+ specs = [
+ { h: h - 28, s: s * 0.35, l: clamps(l + 28, 78, 94) }, // pale wash
+ { h: h - 12, s: s * 0.55, l: clamps(l + 14, 62, 82) },
+ { h: h, s: s, l: l }, // hero
+ { h: h + 14, s: s * 0.7, l: clamps(l - 16, 28, 52) },
+ { h: h + 26, s: clamps(s * 0.5, 20, 48), l: clamps(l - 32, 14, 32) } // deep
+ ];
+ } else if (mode === "complementary") {
+ const c = h + 180;
+ specs = [
+ { h: h, s: s * 0.25, l: clamps(l + 30, 82, 95) },
+ { h: h, s: s * 0.55, l: clamps(l + 8, 55, 75) },
+ { h: h, s: s, l: clamps(l - 6, 40, 62) },
+ { h: c, s: s * 0.45, l: clamps(l - 4, 38, 58) },
+ { h: c, s: clamps(s * 0.35, 18, 40), l: clamps(l - 28, 16, 30) }
+ ];
+ } else {
+ // triadic
+ const t1 = h + 120, t2 = h + 240;
+ specs = [
+ { h: h, s: s * 0.3, l: clamps(l + 26, 80, 94) },
+ { h: h, s: s * 0.7, l: l },
+ { h: t1, s: s * 0.5, l: clamps(l - 4, 42, 64) },
+ { h: t2, s: s * 0.45, l: clamps(l - 12, 34, 55) },
+ { h: t2, s: s * 0.35, l: clamps(l - 30, 14, 28) }
+ ];
+ }
+
+ const names = pickNames(h, mode);
+ return specs.map((sp, i) => {
+ const hh = ((sp.h % 360) + 360) % 360;
+ const ss = clamps(sp.s, 8, 78);
+ const ll = clamps(sp.l, 10, 96);
+ const hex = hslToHex(hh, ss, ll);
+ const [r, g, b] = hslToRgb(hh, ss, ll);
+ return { h: hh, s: ss, l: ll, hex, r, g, b, name: names[i] };
+ });
+ }
+
+ function paletteTitle(h, mode) {
+ const base = nameForHue(h);
+ const tails = {
+ analogous: ["Atelier", "Suite", "Gallery", "Salon"],
+ complementary: ["Dialogue", "Counterpoint", "Duets", "Balance"],
+ triadic: ["Triptych", "Ensemble", "Chorus", "Triad"]
+ };
+ const t = tails[mode][Math.round(h / 30) % 4];
+ return base + " " + t;
+ }
+
+ /* ── Wheel drawing ── */
+ function drawWheel() {
+ const canvas = els.wheel;
+ const ctx = canvas.getContext("2d");
+ const W = canvas.width, H = canvas.height;
+ const cx = W / 2, cy = H / 2, R = W / 2 - 4;
+ ctx.clearRect(0, 0, W, H);
+
+ // Conic-like hue ring via segments
+ const segs = 360;
+ for (let i = 0; i < segs; i++) {
+ const a0 = ((i - 90) * Math.PI) / 180;
+ const a1 = ((i + 1 - 90) * Math.PI) / 180;
+ ctx.beginPath();
+ ctx.moveTo(cx, cy);
+ ctx.arc(cx, cy, R, a0, a1);
+ ctx.closePath();
+ ctx.fillStyle = "hsl(" + i + ", 70%, 55%)";
+ ctx.fill();
+ }
+
+ // Soft center disc (ivory)
+ const grd = ctx.createRadialGradient(cx, cy, R * 0.15, cx, cy, R * 0.72);
+ grd.addColorStop(0, "rgba(247,243,235,1)");
+ grd.addColorStop(0.55, "rgba(247,243,235,0.85)");
+ grd.addColorStop(1, "rgba(247,243,235,0)");
+ ctx.fillStyle = grd;
+ ctx.beginPath();
+ ctx.arc(cx, cy, R * 0.72, 0, Math.PI * 2);
+ ctx.fill();
+
+ // Inner ring line
+ ctx.beginPath();
+ ctx.arc(cx, cy, R * 0.78, 0, Math.PI * 2);
+ ctx.strokeStyle = "rgba(28,26,23,0.08)";
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ }
+
+ function placeKnob() {
+ const rect = els.wrap.getBoundingClientRect();
+ const size = rect.width;
+ const r = size * 0.42;
+ const a = ((state.hue - 90) * Math.PI) / 180;
+ const x = size / 2 + Math.cos(a) * r;
+ const y = size / 2 + Math.sin(a) * r;
+ els.knob.style.left = x + "px";
+ els.knob.style.top = y + "px";
+ els.knob.style.background = hslToHex(state.hue, 70, 55);
+ }
+
+ function hueFromEvent(e) {
+ const rect = els.wrap.getBoundingClientRect();
+ const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+ const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+ const x = clientX - rect.left - rect.width / 2;
+ const y = clientY - rect.top - rect.height / 2;
+ let ang = (Math.atan2(y, x) * 180) / Math.PI + 90;
+ if (ang < 0) ang += 360;
+ return ang;
+ }
+
+ let dragging = false;
+ function onPointerDown(e) {
+ dragging = true;
+ state.hue = hueFromEvent(e);
+ refresh();
+ e.preventDefault();
+ }
+ function onPointerMove(e) {
+ if (!dragging) return;
+ state.hue = hueFromEvent(e);
+ refresh();
+ e.preventDefault();
+ }
+ function onPointerUp() { dragging = false; }
+
+ els.wheel.addEventListener("mousedown", onPointerDown);
+ window.addEventListener("mousemove", onPointerMove);
+ window.addEventListener("mouseup", onPointerUp);
+ els.wheel.addEventListener("touchstart", onPointerDown, { passive: false });
+ window.addEventListener("touchmove", onPointerMove, { passive: false });
+ window.addEventListener("touchend", onPointerUp);
+
+ /* ── UI binding ── */
+ document.querySelectorAll(".mode-btn").forEach(btn => {
+ btn.addEventListener("click", () => {
+ document.querySelectorAll(".mode-btn").forEach(b => b.setAttribute("aria-pressed", "false"));
+ btn.setAttribute("aria-pressed", "true");
+ state.mode = btn.dataset.mode;
+ refresh();
+ });
+ });
+
+ els.sat.addEventListener("input", () => {
+ state.sat = +els.sat.value;
+ els.satVal.textContent = state.sat + "%";
+ refresh();
+ });
+ els.lit.addEventListener("input", () => {
+ state.lit = +els.lit.value;
+ els.litVal.textContent = state.lit + "%";
+ refresh();
+ });
+
+ function showToast(msg) {
+ els.toast.textContent = msg;
+ els.toast.classList.add("show");
+ clearTimeout(showToast._t);
+ showToast._t = setTimeout(() => els.toast.classList.remove("show"), 1600);
+ }
+
+ function copyText(text) {
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ return navigator.clipboard.writeText(text);
+ }
+ const ta = document.createElement("textarea");
+ ta.value = text;
+ ta.style.position = "fixed";
+ ta.style.left = "-9999px";
+ document.body.appendChild(ta);
+ ta.select();
+ try { document.execCommand("copy"); } catch (e) {}
+ document.body.removeChild(ta);
+ return Promise.resolve();
+ }
+
+ function renderSwatches() {
+ const frag = document.createDocumentFragment();
+ state.palette.forEach((sw, i) => {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.className = "swatch";
+ btn.setAttribute("aria-label", sw.name + " " + sw.hex);
+ btn.innerHTML =
+ '<div class="swatch-chip" style="background:' + sw.hex + '"></div>' +
+ '<div class="swatch-meta">' +
+ '<div class="swatch-name">' + sw.name + '</div>' +
+ '<div class="swatch-hex">' + sw.hex + '</div>' +
+ '</div>';
+ btn.addEventListener("click", () => {
+ copyText(sw.hex).then(() => {
+ showToast("Copied " + sw.hex);
+ btn.classList.add("copied");
+ setTimeout(() => btn.classList.remove("copied"), 800);
+ });
+ });
+ frag.appendChild(btn);
+ });
+ els.swatches.innerHTML = "";
+ els.swatches.appendChild(frag);
+ }
+
+ function renderRoom() {
+ const p = state.palette;
+ if (p.length < 5) return;
+ // Wall = lightest wash, wainscot = mid light, sofa = hero/mid, cushions accent, art deep
+ els.roomWall.style.background = p[0].hex;
+ els.roomWainscot.style.background = p[1].hex;
+ els.roomSofa.style.background = p[2].hex;
+ els.cush1.style.background = p[3].hex;
+ els.cush2.style.background = p[1].hex;
+ els.roomArt.style.background =
+ "linear-gradient(145deg, " + p[3].hex + " 0%, " + p[4].hex + " 100%)";
+ }
+
+ function refresh() {
+ state.palette = buildHarmony(state.hue, state.sat, state.lit, state.mode);
+ placeKnob();
+ els.hueReadout.textContent = "H " + Math.round(state.hue) + "° · " + nameForHue(state.hue);
+ els.paletteName.textContent = paletteTitle(state.hue, state.mode);
+ els.modeTag.textContent = state.mode.charAt(0).toUpperCase() + state.mode.slice(1);
+ renderSwatches();
+ renderRoom();
+ }
+
+ /* ── Export 1080 card ── */
+ function exportCard() {
+ const canvas = els.exportCanvas;
+ const ctx = canvas.getContext("2d");
+ const W = 1080, H = 1080;
+ const p = state.palette;
+ const title = paletteTitle(state.hue, state.mode);
+ const modeLabel = state.mode.toUpperCase();
+
+ // Background ivory
+ ctx.fillStyle = "#f7f3eb";
+ ctx.fillRect(0, 0, W, H);
+
+ // Subtle corner ornament lines
+ ctx.strokeStyle = "rgba(28,26,23,0.12)";
+ ctx.lineWidth = 1;
+ ctx.strokeRect(48, 48, W - 96, H - 96);
+
+ // Wordmark
+ ctx.fillStyle = "#1c1a17";
+ ctx.font = "500 28px Georgia, 'Times New Roman', serif";
+ ctx.letterSpacing = "0.18em";
+ ctx.textAlign = "left";
+ ctx.fillText("DESIGNER WALLCOVERINGS", 96, 120);
+
+ // Accent rule
+ ctx.fillStyle = "#c9a961";
+ ctx.fillRect(96, 148, 72, 2);
+
+ // Title
+ ctx.fillStyle = "#1c1a17";
+ ctx.font = "500 64px Georgia, 'Times New Roman', serif";
+ ctx.fillText(title, 96, 240);
+
+ ctx.fillStyle = "#8a8578";
+ ctx.font = "600 18px 'Avenir Next', 'Helvetica Neue', sans-serif";
+ ctx.fillText(modeLabel + " · WALLCOVERING PALETTE", 96, 286);
+
+ // Five vertical swatches
+ const swY = 360;
+ const swH = 420;
+ const gap = 18;
+ const swW = (W - 96 * 2 - gap * 4) / 5;
+ p.forEach((sw, i) => {
+ const x = 96 + i * (swW + gap);
+ // color block
+ ctx.fillStyle = sw.hex;
+ ctx.fillRect(x, swY, swW, swH - 100);
+ // meta block
+ ctx.fillStyle = "#fffcf6";
+ ctx.fillRect(x, swY + swH - 100, swW, 100);
+ ctx.strokeStyle = "rgba(28,26,23,0.1)";
+ ctx.strokeRect(x + 0.5, swY + 0.5, swW - 1, swH - 1);
+
+ ctx.fillStyle = "#1c1a17";
+ ctx.font = "500 22px Georgia, 'Times New Roman', serif";
+ ctx.textAlign = "left";
+ ctx.fillText(sw.name, x + 16, swY + swH - 52);
+
+ ctx.fillStyle = "#8a8578";
+ ctx.font = "500 16px 'SF Mono', Consolas, monospace";
+ ctx.fillText(sw.hex, x + 16, swY + swH - 24);
+ });
+
+ // Footer
+ ctx.fillStyle = "#8a8578";
+ ctx.font = "600 16px 'Avenir Next', 'Helvetica Neue', sans-serif";
+ ctx.textAlign = "left";
+ ctx.fillText("INTERIOR COLOR STUDIO", 96, H - 88);
+ ctx.textAlign = "right";
+ ctx.fillText("1080 × 1080", W - 96, H - 88);
+
+ // Gold thin bottom accent
+ ctx.fillStyle = "#c9a961";
+ ctx.fillRect(96, H - 64, W - 192, 1);
+
+ canvas.toBlob(function (blob) {
+ if (!blob) {
+ // fallback data url
+ const a = document.createElement("a");
+ a.download = "dw-palette-" + Math.round(state.hue) + ".png";
+ a.href = canvas.toDataURL("image/png");
+ a.click();
+ } else {
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.download = "dw-palette-" + Math.round(state.hue) + ".png";
+ a.href = url;
+ a.click();
+ setTimeout(() => URL.revokeObjectURL(url), 2000);
+ }
+ els.ovBody.textContent = "“" + title + "” — your 1080×1080 palette card has been downloaded.";
+ els.overlay.classList.add("open");
+ els.overlay.setAttribute("aria-hidden", "false");
+ }, "image/png");
+ }
+
+ els.btnExport.addEventListener("click", exportCard);
+ els.btnCopyAll.addEventListener("click", () => {
+ const text = state.palette.map(s => s.name + " " + s.hex).join("\n");
+ copyText(text).then(() => showToast("All hex values copied"));
+ });
+ els.ovClose.addEventListener("click", () => {
+ els.overlay.classList.remove("open");
+ els.overlay.setAttribute("aria-hidden", "true");
+ });
+ els.overlay.addEventListener("click", (e) => {
+ if (e.target === els.overlay) {
+ els.overlay.classList.remove("open");
+ els.overlay.setAttribute("aria-hidden", "true");
+ }
+ });
+
+ // Init
+ drawWheel();
+ refresh();
+ window.addEventListener("resize", placeKnob);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/grok.png b/data/artifacts/edd68668d3dc/grok.png
new file mode 100644
index 0000000..48a862c
Binary files /dev/null and b/data/artifacts/edd68668d3dc/grok.png differ
diff --git a/data/artifacts/edd68668d3dc/hermes3-8b.html b/data/artifacts/edd68668d3dc/hermes3-8b.html
new file mode 100644
index 0000000..70907de
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/hermes3-8b.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Designer Wallcoverings</title>
+<style>
+:root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent-1: #c9a961;
+ --accent-2: #7d6a45;
+ --line: #ffffff;
+ --shadow: rgba(0, 0, 0, .12);
+ --ease: cubic-bezier(.22, 1, .36, 1);
+}
+
+body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 16px;
+}
+
+.header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 32px 0;
+}
+
+.wordmark {
+ font-size: 48px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ color: var(--surface);
+}
+
+.card {
+ background-color: var(--surface);
+ box-shadow: 0 8px 24px var(--shadow);
+ border-radius: 14px;
+ padding: 32px;
+ margin: 0 auto;
+ max-width: 260px;
+}
+
+h2 {
+ font-size: 38px;
+ text-transform: uppercase;
+}
+
+.swatch {
+ display: block;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ border-radius: 50%;
+ margin-bottom: 16px;
+}
+
+.name {
+ font-size: 12px;
+ letter-spacing: .15em;
+ color: var(--muted);
+}
+
+.button {
+ background-color: var(--accent-1);
+ color: var(--surface);
+ text-transform: uppercase;
+ padding: 8px 16px;
+ border-radius: 999px;
+ outline: none;
+ cursor: pointer;
+ transition: .2s ease-in-out;
+}
+
+.button:hover, .button:focus {
+ background-color: var(--accent-2);
+}
+
+@keyframes fadeUp {
+ from {opacity: 0; transform: translateY(28px);}
+ to {opacity: 1; transform: translateY(0);}
+}
+
+.fade-up {
+ animation: fadeUp .7s both;
+ transition-delay: calc(.7s * 0s); /* No stagger */
+}
+
+.staggered {
+ animation: fadeUp .7s both;
+ transition-delay: calc(.7s * (0s + 0.09s)); /* Stagger siblings by 90ms */
+}
+
+.card:hover, .button {
+ box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
+ transform: translateY(-8px);
+ transition-property: color, background-color, box-shadow;
+}
+
+.room-preview {
+ height: 108px;
+ background: linear-gradient(45deg, var(--text), var(--surface));
+ margin: 32px auto;
+ width: 90%;
+ max-width: 600px;
+}
+</style>
+<body>
+<div class="header">
+ <div class="wordmark">DESIGNER WALLCOVERINGS</div>
+</div>
+<div class="card fade-up">
+ <h2>Choose a hue...</h2>
+ <input type="color" value="#0d0d0f">
+ <button class="button" onclick="buildPalette('luxe-noir')">Build</button>
+</div>
+<div class="palette staggered"></div>
+<div class="card room-preview"></div>
+<button class="button">Export as card</button>
+<script>
+function buildPalette(baseHue) {
+ const palettes = {
+ 'luxe-noir': [
+ '#0d0c11',
+ '#1c1a17',
+ '#f5f2ea',
+ '#8a8578',
+ '#c9a961'
+ ],
+ // ... other palettes
+ };
+
+ const swatches = document.createElement('div');
+ swatches.className = 'swatches';
+
+ for (const color of palettes[baseHue]) {
+ const swatch = document.createElement('div');
+ swatch.style.backgroundColor = color;
+ swatch.className = 'swatch';
+
+ const name = document.createElement('span');
+ name.className = 'name';
+ name.textContent = /* designer name */;
+
+ swatch.appendChild(name);
+ swatches.appendChild(swatch);
+ }
+
+ document.querySelector('.palette').appendChild(swatches);
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/hermes3-8b.png b/data/artifacts/edd68668d3dc/hermes3-8b.png
new file mode 100644
index 0000000..afc70fb
Binary files /dev/null and b/data/artifacts/edd68668d3dc/hermes3-8b.png differ
diff --git a/data/artifacts/edd68668d3dc/hf-qwen-coder-32b.html b/data/artifacts/edd68668d3dc/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..6cca118
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/hf-qwen-coder-32b.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Designer Wallcoverings</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #dcdcdc;
+ --shadow: rgba(0, 0, 0, .12);
+ --hover-shadow: rgba(0, 0, 0, .18);
+ --glow: rgba(176, 71, 46, .35);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--bg);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
+ padding: 16px;
+ z-index: 10;
+ }
+ header h1 {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 40px;
+ letter-spacing: .18em;
+ margin: 0;
+ color: var(--text);
+ }
+ main {
+ padding-top: 96px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 1200px;
+ }
+ .palette-container {
+ margin-bottom: 48px;
+ }
+ .hue-selector, .toggle-group {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ width: 100%;
+ max-width: 600px;
+ }
+ .hue-selector input[type="range"] {
+ width: 100%;
+ margin-right: 8px;
+ }
+ .toggle-group label {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 12px;
+ letter-spacing: .15em;
+ color: var(--muted);
+ cursor: pointer;
+ }
+ .palette-swatch {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ max-width: 600px;
+ }
+ .swatch {
+ width: 48px;
+ height: 48px;
+ margin-right: 8px;
+ border-radius: 50%;
+ box-shadow: 0 2px 4px var(--shadow);
+ transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
+ }
+ .swatch:hover {
+ transform: scale(1.1);
+ box-shadow: 0 8px 16px var(--hover-shadow);
+ }
+ .live-preview {
+ width: 100%;
+ max-width: 600px;
+ height: 96px;
+ background-size: cover;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px var(--shadow);
+ margin-bottom: 24px;
+ }
+ .export-button {
+ background-color: var(--accent);
+ color: var(--surface);
+ padding: 12px 24px;
+ border-radius: 6px;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 18px;
+ letter-spacing: .05em;
+ cursor: pointer;
+ transition: background-color .15s ease-in-out;
+ }
+ .export-button:hover {
+ background-color: var(--text);
+ }
+ .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: 20;
+ }
+ .overlay img {
+ max-width: 90%;
+ max-height: 80%;
+ border-radius: 14px;
+ box-shadow: 0 16px 32px rgba(0, 0, 0, .25);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </header>
+ <main>
+ <div class="palette-container">
+ <div class="hue-selector">
+ <input type="range" id="hueSlider" min="0" max="360" value="240">
+ </div>
+ <div class="toggle-group">
+ <label for="analogous">ANALOGOUS</label>
+ <input type="radio" name="paletteType" id="analogous" value="analogous" checked>
+ <label for="complementary">COMPLEMENTARY</label>
+ <input type="radio" name="paletteType" id="complementary" value="complementary">
+ <label for="triadic">TRIADIC</label>
+ <input type="radio" name="paletteType" id="triadic" value="triadic">
+ </div>
+ <div class="palette-swatch">
+ <div class="swatch" data-name="Alabaster"></div>
+ <div class="swatch" data-name="Greige"></div>
+ <div class="swatch" data-name="Celadon"></div>
+ <div class="swatch" data-name="Ink"></div>
+ <div class="swatch" data-name="Brass"></div>
+ </div>
+ </div>
+ <div class="live-preview"></div>
+ <button class="export-button" id="exportButton">EXPORT AS 1080x1080 CARD</button>
+ </main>
+ <script>
+ const hueSlider = document.getElementById('hueSlider');
+ const paletteTypeRadios = document.querySelectorAll('input[name="paletteType"]');
+ const swatches = document.querySelectorAll('.swatch');
+ const livePreview = document.querySelector('.live-preview');
+ const exportButton = document.getElementById('exportButton');
+
+ let currentHue = 240;
+ let currentPaletteType = 'analogous';
+
+ function updateSwatches() {
+ const palette = generatePalette(currentHue, currentPaletteType);
+ swatches.forEach((swatch, index) => {
+ const color = `hsl(${palette[index][0]}, ${palette[index][1]}%, ${palette[index][2]}%)`;
+ swatch.style.backgroundColor = color;
+ swatch.addEventListener('click', () => copyHex(color));
+ });
+ updateLivePreview(palette);
+ }
+
+ function generatePalette(hue, type) {
+ switch (type) {
+ case 'analogous':
+ return [
+ [hue, 90, 75],
+ [(hue + 30) % 360, 85, 70],
+ [(hue + 60) % 360, 80, 65],
+ [(hue + 120) % 360, 75, 60],
+ [(hue + 150) % 360, 95, 80]
+ ];
+ case 'complementary':
+ return [
+ [hue, 85, 75],
+ [(hue + 180) % 360, 80, 70],
+ [(hue + 240) % 360, 90, 85],
+ [(hue + 300) % 360, 75, 65],
+ [(hue + 120) % 360, 80, 60]
+ ];
+ case 'triadic':
+ return [
+ [hue, 90, 75],
+ [(hue + 120) % 360, 85, 70],
+ [(hue + 240) % 360, 80, 65],
+ [(hue + 60) % 360, 95, 85],
+ [(hue + 180) % 360, 75, 60]
+ ];
+ default:
+ return [
+ [hue, 90, 75],
+ [(hue + 30) % 360, 85, 70],
+ [(hue + 60) % 360, 80, 65],
+ [(hue + 120) % 360, 75, 60],
+ [(hue + 150) % 360, 95, 80]
+ ];
+ }
+ }
+
+ function updateLivePreview(palette) {
+ const gradient = `linear-gradient(45deg, ${palette.map(([h, s, l]) => `hsl(${h}, ${s}%, ${l}%)`).join(', ')})`;
+ livePreview.style.backgroundImage = gradient;
+ }
+
+ function copyHex(color) {
+ const tempInput = document.createElement('input');
+ document.body.appendChild(tempInput);
+ tempInput.value = color;
+ tempInput.select();
+ document.execCommand('copy');
+ document.body.removeChild(tempInput);
+
+ const overlay = document.createElement('div');
+ overlay.className = 'overlay';
+ overlay.textContent = 'HEX COPIED: ' + color;
+ document.body.appendChild(overlay);
+
+ setTimeout(() => {
+ document.body.removeChild(overlay);
+ }, 1500);
+ }
+
+ function exportCard() {
+ const canvas = document.createElement('canvas');
+ canvas.width = 1080;
+ canvas.height = 1080;
+ const ctx = canvas.getContext('2d');
+
+ const gradient = `linear-gradient(45deg, ${Array.from(swatches).map(swatch => swatch.style.backgroundColor).join(', ')})`;
+ const imgData = createImageDataFromGradient(ctx, canvas.width, canvas.height, gradient);
+ ctx.putImageData(imgData, 0, 0);
+
+ const overlayText = 'DESIGNER WALLCOVERINGS';
+ const textWidth = ctx.measureText(overlayText).width;
+ ctx.font = '67px "Playfair Display", Georgia, serif';
+ ctx.fillStyle = var(--text);
+ ctx.textAlign = 'center';
+ ctx.fillText(overlayText, canvas.width / 2, canvas.height - 100);
+
+ const dataURL = canvas.toDataURL('image/png');
+ const overlay = document.createElement('div');
+ overlay.className = 'overlay';
+ const img = new Image();
+ img.src = dataURL;
+ overlay.appendChild(img);
+ document.body.appendChild(overlay);
+
+ setTimeout(() => {
+ document.body.removeChild(overlay);
+ }, 5000);
+ }
+
+ function createImageDataFromGradient(ctx, width, height, gradient) {
+ const imageData = ctx.createImageData(width, height);
+ const data = imageData.data;
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const color = getColorFromGradient(x, y, width, height, gradient);
+ const index = (y * width + x) * 4;
+ data[index] = color.r;
+ data[index + 1] = color.g;
+ data[index + 2] = color.b;
+ data[index + 3] = 255;
+ }
+ }
+
+ return imageData;
+ }
+
+ function getColorFromGradient(x, y, width, height, gradient) {
+ const ctx = document.createElement('canvas').getContext('2d');
+ ctx.canvas.width = width;
+ ctx.canvas.height = height;
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, width, height);
+ return ctx.getImageData(x, y, 1, 1).data.slice(0, 3);
+ }
+
+ hueSlider.addEventListener('input', () => {
+ currentHue = parseInt(hueSlider.value);
+ updateSwatches();
+ });
+
+ paletteTypeRadios.forEach(radio => radio.addEventListener('change', () => {
+ currentPaletteType = radio.value;
+ updateSwatches();
+ }));
+
+ exportButton.addEventListener('click', exportCard);
+
+ updateSwatches();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/hf-qwen-coder-32b.png b/data/artifacts/edd68668d3dc/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..74d858c
Binary files /dev/null and b/data/artifacts/edd68668d3dc/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/edd68668d3dc/kimi.html b/data/artifacts/edd68668d3dc/kimi.html
new file mode 100644
index 0000000..6963a2b
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/kimi.html
@@ -0,0 +1,1232 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Designer Wallcoverings — Color Studio</title>
+ <style>
+ /* ===== DESIGN TOKENS ===== */
+ :root {
+ /* Luxury Palette: luxe-noir */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-elev: #1e1e26;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-hover: #d4b872;
+ --ink: #1c1a17;
+
+ /* Lines & Shadows */
+ --line: rgba(245, 242, 234, 0.08);
+ --line-strong: rgba(245, 242, 234, 0.15);
+ --shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
+ --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.25);
+
+ /* Typography */
+ --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --font-sans: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ --font-mono: 'SF Mono', 'Cascadia Code', Consolas, Menlo, monospace;
+
+ /* Scale (ratio 1.333) */
+ --text-caption: 12px;
+ --text-body: 16px;
+ --text-lead: 21px;
+ --text-h3: 28px;
+ --text-h2: 38px;
+ --text-h1: 50px;
+ --text-display: 67px;
+
+ /* Spacing */
+ --space-xs: 4px;
+ --space-sm: 8px;
+ --space-md: 16px;
+ --space-lg: 24px;
+ --space-xl: 32px;
+ --space-2xl: 48px;
+ --space-3xl: 64px;
+ --space-4xl: 96px;
+ --space-5xl: 128px;
+
+ /* Radii */
+ --radius-tight: 6px;
+ --radius-card: 14px;
+ --radius-pill: 999px;
+
+ /* Motion */
+ --ease-swift: cubic-bezier(.22,.9,.24,1);
+ --ease-power: cubic-bezier(.77,0,.18,1);
+ --duration-micro: 200ms;
+ --duration-enter: 600ms;
+ }
+
+ /* ===== RESET & BASE ===== */
+ *, *::before, *::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ html {
+ scroll-behavior: smooth;
+ }
+
+ body {
+ font-family: var(--font-sans);
+ font-size: var(--text-body);
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--bg);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ /* ===== HEADER / WORDMARK ===== */
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ background: var(--bg);
+ border-bottom: 1px solid var(--line);
+ padding: var(--space-md) var(--space-2xl);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .wordmark {
+ font-family: var(--font-display);
+ font-size: 42px;
+ font-weight: 400;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--text);
+ line-height: 1.1;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: var(--space-md);
+ align-items: center;
+ }
+
+ .pill-btn {
+ font-family: var(--font-sans);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--muted);
+ background: transparent;
+ border: 1px solid var(--line-strong);
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-pill);
+ cursor: pointer;
+ transition: all var(--duration-micro) var(--ease-swift);
+ }
+
+ .pill-btn:hover {
+ color: var(--text);
+ border-color: var(--accent);
+ background: var(--surface);
+ }
+
+ .pill-btn.primary {
+ background: var(--accent);
+ color: var(--ink);
+ border-color: var(--accent);
+ }
+
+ .pill-btn.primary:hover {
+ background: var(--accent-hover);
+ }
+
+ /* ===== MAIN LAYOUT ===== */
+ main {
+ padding-top: 100px;
+ min-height: 100vh;
+ }
+
+ .editorial-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: var(--space-4xl) var(--space-2xl);
+ }
+
+ /* ===== HERO SECTION ===== */
+ .hero {
+ text-align: center;
+ margin-bottom: var(--space-5xl);
+ animation: fadeUp var(--duration-enter) var(--ease-swift) both;
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .hero h1 {
+ font-family: var(--font-display);
+ font-size: var(--text-display);
+ font-weight: 400;
+ line-height: 1.05;
+ margin-bottom: var(--space-md);
+ letter-spacing: -0.02em;
+ }
+
+ .hero p {
+ font-size: var(--text-lead);
+ color: var(--muted);
+ max-width: 60ch;
+ margin: 0 auto;
+ }
+
+ /* ===== COLOR WHEEL SECTION ===== */
+ .wheel-section {
+ display: grid;
+ grid-template-columns: 320px 1fr;
+ gap: var(--space-4xl);
+ align-items: start;
+ margin-bottom: var(--space-5xl);
+ }
+
+ .wheel-container {
+ position: relative;
+ width: 320px;
+ height: 320px;
+ border-radius: 50%;
+ background: conic-gradient(
+ from 0deg,
+ hsl(0, 85%, 50%),
+ hsl(60, 85%, 50%),
+ hsl(120, 85%, 50%),
+ hsl(180, 85%, 50%),
+ hsl(240, 85%, 50%),
+ hsl(300, 85%, 50%),
+ hsl(360, 85%, 50%)
+ );
+ box-shadow:
+ inset 0 0 60px rgba(0,0,0,0.5),
+ 0 0 0 1px var(--line-strong),
+ var(--shadow-soft);
+ cursor: crosshair;
+ overflow: hidden;
+ }
+
+ .wheel-container::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle at center, transparent 30%, var(--surface) 70%);
+ pointer-events: none;
+ }
+
+ .wheel-cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid var(--text);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+ box-shadow: 0 0 0 2px var(--bg), 0 4px 12px rgba(0,0,0,0.4);
+ transition: all var(--duration-micro) var(--ease-swift);
+ z-index: 10;
+ }
+
+ .wheel-controls {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xl);
+ }
+
+ .control-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ }
+
+ .control-label {
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ color: var(--muted);
+ }
+
+ .harmony-toggle {
+ display: flex;
+ gap: var(--space-xs);
+ background: var(--surface);
+ padding: var(--space-xs);
+ border-radius: var(--radius-card);
+ border: 1px solid var(--line);
+ }
+
+ .harmony-btn {
+ flex: 1;
+ padding: var(--space-sm) var(--space-md);
+ border: none;
+ background: transparent;
+ color: var(--muted);
+ font-family: var(--font-sans);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ cursor: pointer;
+ border-radius: var(--radius-tight);
+ transition: all var(--duration-micro) var(--ease-swift);
+ }
+
+ .harmony-btn.active {
+ background: var(--surface-elev);
+ color: var(--text);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+ }
+
+ .harmony-btn:hover:not(.active) {
+ color: var(--text);
+ }
+
+ .base-color-display {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ background: var(--surface);
+ border-radius: var(--radius-card);
+ border: 1px solid var(--line);
+ }
+
+ .base-swatch {
+ width: 48px;
+ height: 48px;
+ border-radius: var(--radius-tight);
+ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
+ }
+
+ .base-info {
+ flex: 1;
+ }
+
+ .base-name {
+ font-family: var(--font-display);
+ font-size: var(--text-h3);
+ color: var(--text);
+ line-height: 1;
+ }
+
+ .base-hex {
+ font-family: var(--font-mono);
+ font-size: var(--text-caption);
+ color: var(--muted);
+ text-transform: uppercase;
+ margin-top: var(--space-xs);
+ }
+
+ /* ===== PALETTE STRIP ===== */
+ .palette-section {
+ margin-bottom: var(--space-5xl);
+ }
+
+ .palette-grid {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: var(--space-md);
+ }
+
+ .palette-swatch {
+ position: relative;
+ background: var(--surface);
+ border-radius: var(--radius-card);
+ overflow: hidden;
+ border: 1px solid var(--line);
+ cursor: pointer;
+ transition: all var(--duration-micro) var(--ease-swift);
+ animation: fadeUp var(--duration-enter) var(--ease-swift) both;
+ }
+
+ .palette-swatch:nth-child(1) { animation-delay: 0ms; }
+ .palette-swatch:nth-child(2) { animation-delay: 60ms; }
+ .palette-swatch:nth-child(3) { animation-delay: 120ms; }
+ .palette-swatch:nth-child(4) { animation-delay: 180ms; }
+ .palette-swatch:nth-child(5) { animation-delay: 240ms; }
+
+ .palette-swatch:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow);
+ border-color: var(--line-strong);
+ }
+
+ .swatch-color {
+ height: 140px;
+ position: relative;
+ }
+
+ .swatch-info {
+ padding: var(--space-md);
+ border-top: 1px solid var(--line);
+ }
+
+ .swatch-name {
+ font-family: var(--font-display);
+ font-size: var(--text-lead);
+ color: var(--text);
+ line-height: 1.2;
+ margin-bottom: var(--space-xs);
+ }
+
+ .swatch-hex {
+ font-family: var(--font-mono);
+ font-size: var(--text-caption);
+ color: var(--muted);
+ text-transform: uppercase;
+ }
+
+ .copy-indicator {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0.8);
+ background: var(--ink);
+ color: var(--text);
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-pill);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ opacity: 0;
+ pointer-events: none;
+ transition: all var(--duration-micro) var(--ease-swift);
+ }
+
+ .palette-swatch.copied .copy-indicator {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+ }
+
+ /* ===== ROOM PREVIEW ===== */
+ .preview-section {
+ margin-bottom: var(--space-5xl);
+ }
+
+ .section-header {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ margin-bottom: var(--space-xl);
+ padding-bottom: var(--space-md);
+ border-bottom: 1px solid var(--line);
+ }
+
+ .section-title {
+ font-family: var(--font-display);
+ font-size: var(--text-h2);
+ font-weight: 400;
+ color: var(--text);
+ }
+
+ .section-subtitle {
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--muted);
+ }
+
+ .room-preview {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ grid-template-rows: 200px 200px;
+ gap: var(--space-md);
+ border-radius: var(--radius-card);
+ overflow: hidden;
+ border: 1px solid var(--line);
+ }
+
+ .room-panel {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .room-panel.main-wall {
+ grid-row: span 2;
+ }
+
+ .room-panel::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ opacity: 0.4;
+ }
+
+ /* Geometric patterns for visual distinction */
+ .pattern-stripes {
+ background-image: repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 10px,
+ rgba(255,255,255,0.03) 10px,
+ rgba(255,255,255,0.03) 20px
+ );
+ }
+
+ .pattern-grid {
+ background-image:
+ linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+ background-size: 20px 20px;
+ }
+
+ .pattern-dots {
+ background-image: radial-gradient(
+ circle at center,
+ rgba(255,255,255,0.05) 1px,
+ transparent 1px
+ );
+ background-size: 12px 12px;
+ }
+
+ .pattern-chevron {
+ background-image: repeating-linear-gradient(
+ 90deg,
+ transparent,
+ transparent 15px,
+ rgba(255,255,255,0.04) 15px,
+ rgba(255,255,255,0.04) 30px
+ );
+ }
+
+ .room-label {
+ position: absolute;
+ bottom: var(--space-md);
+ left: var(--space-md);
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: rgba(255,255,255,0.9);
+ text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+ mix-blend-mode: difference;
+ }
+
+ /* ===== EXPORT OVERLAY ===== */
+ .export-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(13, 13, 15, 0.95);
+ backdrop-filter: blur(20px);
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity var(--duration-enter) var(--ease-swift);
+ }
+
+ .export-overlay.active {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+ .export-card {
+ width: 540px;
+ height: 540px;
+ background: var(--surface);
+ border-radius: var(--radius-card);
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ transform: scale(0.9);
+ transition: transform var(--duration-enter) var(--ease-swift);
+ }
+
+ .export-overlay.active .export-card {
+ transform: scale(1);
+ }
+
+ .export-header {
+ padding: var(--space-xl);
+ text-align: center;
+ border-bottom: 1px solid var(--line);
+ }
+
+ .export-brand {
+ font-family: var(--font-display);
+ font-size: 14px;
+ text-transform: uppercase;
+ letter-spacing: 0.3em;
+ color: var(--muted);
+ }
+
+ .export-content {
+ padding: var(--space-2xl);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xl);
+ }
+
+ .export-palette {
+ display: flex;
+ height: 180px;
+ border-radius: var(--radius-tight);
+ overflow: hidden;
+ }
+
+ .export-swatch {
+ flex: 1;
+ position: relative;
+ }
+
+ .export-swatch-hex {
+ position: absolute;
+ bottom: var(--space-md);
+ left: 50%;
+ transform: translateX(-50%);
+ font-family: var(--font-mono);
+ font-size: 10px;
+ text-transform: uppercase;
+ color: rgba(255,255,255,0.9);
+ background: rgba(0,0,0,0.3);
+ padding: var(--space-xs) var(--space-sm);
+ border-radius: var(--radius-tight);
+ opacity: 0;
+ transition: opacity var(--duration-micro) var(--ease-swift);
+ }
+
+ .export-swatch:hover .export-swatch-hex {
+ opacity: 1;
+ }
+
+ .export-names {
+ text-align: center;
+ }
+
+ .export-title {
+ font-family: var(--font-display);
+ font-size: var(--text-h2);
+ color: var(--text);
+ margin-bottom: var(--space-sm);
+ }
+
+ .export-subtitle {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--muted);
+ }
+
+ .export-actions {
+ display: flex;
+ gap: var(--space-md);
+ justify-content: center;
+ padding: 0 var(--space-2xl) var(--space-2xl);
+ }
+
+ .close-btn {
+ position: absolute;
+ top: var(--space-lg);
+ right: var(--space-lg);
+ width: 40px;
+ height: 40px;
+ border: 1px solid var(--line);
+ background: transparent;
+ color: var(--text);
+ border-radius: 50%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ transition: all var(--duration-micro) var(--ease-swift);
+ }
+
+ .close-btn:hover {
+ background: var(--surface);
+ border-color: var(--accent);
+ }
+
+ /* ===== HIDDEN CANVAS ===== */
+ #export-canvas {
+ display: none;
+ }
+
+ /* ===== TOAST NOTIFICATION ===== */
+ .toast {
+ position: fixed;
+ bottom: var(--space-2xl);
+ left: 50%;
+ transform: translateX(-50%) translateY(100px);
+ background: var(--surface-elev);
+ color: var(--text);
+ padding: var(--space-md) var(--space-xl);
+ border-radius: var(--radius-pill);
+ border: 1px solid var(--line-strong);
+ font-size: 13px;
+ font-weight: 500;
+ box-shadow: var(--shadow);
+ opacity: 0;
+ transition: all var(--duration-enter) var(--ease-swift);
+ z-index: 3000;
+ }
+
+ .toast.show {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+
+ /* ===== RESPONSIVE ===== */
+ @media (max-width: 900px) {
+ .wheel-section {
+ grid-template-columns: 1fr;
+ justify-items: center;
+ }
+
+ .palette-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .room-preview {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 150px 150px 150px;
+ }
+
+ .room-panel.main-wall {
+ grid-column: span 2;
+ grid-row: span 1;
+ }
+ }
+
+ @media (max-width: 600px) {
+ .wordmark {
+ font-size: 28px;
+ }
+
+ header {
+ padding: var(--space-md);
+ }
+
+ .hero h1 {
+ font-size: var(--text-h1);
+ }
+
+ .palette-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+ </style>
+</head>
+<body>
+ <!-- HEADER -->
+ <header>
+ <div class="wordmark">Designer Wallcoverings</div>
+ <div class="header-actions">
+ <button class="pill-btn" onclick="resetPalette()">Reset</button>
+ <button class="pill-btn primary" onclick="openExport()">Export Card</button>
+ </div>
+ </header>
+
+ <main>
+ <div class="editorial-container">
+ <!-- HERO -->
+ <section class="hero">
+ <h1>Color Studio</h1>
+ <p>Select a foundation hue on the wheel to generate a curated five-tone wallcovering palette. Crafted for sophisticated interiors.</p>
+ </section>
+
+ <!-- WHEEL & CONTROLS -->
+ <section class="wheel-section">
+ <div class="wheel-container" id="colorWheel">
+ <div class="wheel-cursor" id="wheelCursor" style="left: 50%; top: 50%;"></div>
+ </div>
+
+ <div class="wheel-controls">
+ <div class="control-group">
+ <span class="control-label">Harmony Mode</span>
+ <div class="harmony-toggle">
+ <button class="harmony-btn active" data-mode="analogous" onclick="setHarmony('analogous')">Analogous</button>
+ <button class="harmony-btn" data-mode="complementary" onclick="setHarmony('complementary')">Complementary</button>
+ <button class="harmony-btn" data-mode="triadic" onclick="setHarmony('triadic')">Triadic</button>
+ </div>
+ </div>
+
+ <div class="control-group">
+ <span class="control-label">Foundation Color</span>
+ <div class="base-color-display">
+ <div class="base-swatch" id="baseSwatch"></div>
+ <div class="base-info">
+ <div class="base-name" id="baseName">Celadon</div>
+ <div class="base-hex" id="baseHex">#7A9B76</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="control-group">
+ <span class="control-label">Instructions</span>
+ <p style="color: var(--muted); font-size: 14px; line-height: 1.7;">
+ Click or drag on the wheel to select your foundation hue.
+ The palette generator creates harmonious wallcovering tones
+ using professional color theory. Click any swatch to copy its hex code.
+ </p>
+ </div>
+ </div>
+ </section>
+
+ <!-- PALETTE STRIP -->
+ <section class="palette-section">
+ <div class="section-header">
+ <h2 class="section-title">Curated Palette</h2>
+ <span class="section-subtitle">Five designer wallcoverings</span>
+ </div>
+ <div class="palette-grid" id="paletteGrid">
+ <!-- Generated dynamically -->
+ </div>
+ </section>
+
+ <!-- ROOM PREVIEW -->
+ <section class="preview-section">
+ <div class="section-header">
+ <h2 class="section-title">Room Preview</h2>
+ <span class="section-subtitle">Live visualization</span>
+ </div>
+ <div class="room-preview" id="roomPreview">
+ <div class="room-panel main-wall pattern-stripes" id="panel1">
+ <span class="room-label">Feature Wall</span>
+ </div>
+ <div class="room-panel pattern-grid" id="panel2">
+ <span class="room-label">Accent</span>
+ </div>
+ <div class="room-panel pattern-dots" id="panel3">
+ <span class="room-label">Trim</span>
+ </div>
+ <div class="room-panel pattern-chevron" id="panel4">
+ <span class="room-label">Secondary</span>
+ </div>
+ <div class="room-panel pattern-stripes" id="panel5">
+ <span class="room-label">Ceiling</span>
+ </div>
+ </div>
+ </section>
+ </div>
+ </main>
+
+ <!-- EXPORT OVERLAY -->
+ <div class="export-overlay" id="exportOverlay" onclick="closeExportOnBackground(event)">
+ <button class="close-btn" onclick="closeExport()">×</button>
+ <div class="export-card" id="exportCard">
+ <div class="export-header">
+ <div class="export-brand">Designer Wallcoverings</div>
+ </div>
+ <div class="export-content">
+ <div class="export-palette" id="exportPalette"></div>
+ <div class="export-names">
+ <div class="export-title" id="exportTitle">The Celadon Collection</div>
+ <div class="export-subtitle">Interior Color Study</div>
+ </div>
+ </div>
+ <div class="export-actions">
+ <button class="pill-btn" onclick="closeExport()">Close</button>
+ <button class="pill-btn primary" onclick="downloadCard()">Download 1080×1080</button>
+ </div>
+ </div>
+ </div>
+
+ <!-- TOAST -->
+ <div class="toast" id="toast">Hex code copied to clipboard</div>
+
+ <!-- HIDDEN CANVAS FOR EXPORT -->
+ <canvas id="export-canvas" width="1080" height="1080"></canvas>
+
+ <script>
+ // ===== DESIGNER COLOR NAMES =====
+ const colorNames = [
+ { name: 'Alabaster', h: [0, 360], s: [0, 15], l: [90, 98] },
+ { name: 'Greige', h: [30, 50], s: [5, 20], l: [60, 80] },
+ { name: 'Celadon', h: [90, 150], s: [15, 40], l: [45, 75] },
+ { name: 'Sage', h: [70, 100], s: [10, 30], l: [50, 70] },
+ { name: 'Ink', h: [200, 260], s: [10, 30], l: [8, 20] },
+ { name: 'Navy', h: [210, 240], s: [40, 70], l: [15, 30] },
+ { name: 'Brass', h: [40, 55], s: [50, 80], l: [45, 65] },
+ { name: 'Terracotta', h: [15, 35], s: [40, 70], l: [45, 65] },
+ { name: 'Slate', h: [200, 220], s: [10, 25], l: [35, 55] },
+ { name: 'Ochre', h: [35, 50], s: [50, 80], l: [45, 65] },
+ { name: 'Moss', h: [80, 110], s: [25, 50], l: [30, 50] },
+ { name: 'Dusty Rose', h: [340, 360], s: [20, 45], l: [60, 80] },
+ { name: 'Charcoal', h: [0, 360], s: [0, 10], l: [15, 30] },
+ { name: 'Ivory', h: [40, 60], s: [10, 30], l: [85, 95] },
+ { name: 'Teal', h: [170, 190], s: [40, 70], l: [35, 55] },
+ { name: 'Plum', h: [290, 320], s: [25, 50], l: [30, 50] },
+ { name: 'Sand', h: [30, 50], s: [20, 45], l: [70, 85] },
+ { name: 'Indigo', h: [240, 270], s: [40, 70], l: [25, 45] },
+ { name: 'Rust', h: [10, 25], s: [50, 80], l: [35, 55] },
+ { name: 'Pewter', h: [200, 220], s: [5, 15], l: [50, 65] }
+ ];
+
+ // ===== STATE =====
+ let currentHue = 150;
+ let currentSat = 45;
+ let currentLight = 55;
+ let harmonyMode = 'analogous';
+ let palette = [];
+
+ // ===== UTILITIES =====
+ function hslToHex(h, s, l) {
+ l /= 100;
+ const a = s * Math.min(l, 1 - l) / 100;
+ const f = n => {
+ const k = (n + h / 30) % 12;
+ const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+ return Math.round(255 * color).toString(16).padStart(2, '0');
+ };
+ return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+ }
+
+ function hexToHsl(hex) {
+ const r = parseInt(hex.slice(1, 3), 16) / 255;
+ const g = parseInt(hex.slice(3, 5), 16) / 255;
+ const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+ const max = Math.max(r, g, b);
+ const min = Math.min(r, g, b);
+ let h, s, l = (max + min) / 2;
+
+ if (max === min) {
+ h = s = 0;
+ } else {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+
+ return { h: h * 360, s: s * 100, l: l * 100 };
+ }
+
+ function getColorName(h, s, l) {
+ for (const cn of colorNames) {
+ if (h >= cn.h[0] && h <= cn.h[1] &&
+ s >= cn.s[0] && s <= cn.s[1] &&
+ l >= cn.l[0] && l <= cn.l[1]) {
+ return cn.name;
+ }
+ }
+
+ // Fallback based on hue
+ if (s < 10) return l > 80 ? 'Alabaster' : l < 30 ? 'Ink' : 'Greige';
+ if (h >= 0 && h < 30) return 'Terracotta';
+ if (h >= 30 && h < 60) return s > 50 ? 'Brass' : 'Sand';
+ if (h >= 60 && h < 90) return 'Moss';
+ if (h >= 90 && h < 150) return 'Celadon';
+ if (h >= 150 && h < 190) return 'Teal';
+ if (h >= 190 && h < 260) return 'Ink';
+ if (h >= 260 && h < 300) return 'Plum';
+ if (h >= 300 && h < 340) return 'Dusty Rose';
+ return 'Greige';
+ }
+
+ // ===== PALETTE GENERATION =====
+ function generatePalette() {
+ const baseH = currentHue;
+ const baseS = currentSat;
+ const baseL = currentLight;
+
+ const colors = [];
+
+ if (harmonyMode === 'analogous') {
+ // Analogous: base, ±15°, ±30°
+ colors.push({ h: (baseH - 30 + 360) % 360, s: Math.max(10, baseS - 10), l: Math.min(85, baseL + 25) });
+ colors.push({ h: (baseH - 15 + 360) % 360, s: Math.max(15, baseS - 5), l: Math.min(80, baseL + 15) });
+ colors.push({ h: baseH, s: baseS, l: baseL });
+ colors.push({ h: (baseH + 15) % 360, s: Math.min(80, baseS + 5), l: Math.max(20, baseL - 10) });
+ colors.push({ h: (baseH + 30) % 360, s: Math.min(70, baseS - 10), l: Math.max(10, baseL - 20) });
+ } else if (harmonyMode === 'complementary') {
+ // Complementary: base tints + complement shades
+ colors.push({ h: baseH, s: Math.max(5, baseS - 20), l: Math.min(90, baseL + 30) });
+ colors.push({ h: baseH, s: Math.max(10, baseS - 10), l: Math.min(75, baseL + 15) });
+ colors.push({ h: baseH, s: baseS, l: baseL });
+ colors.push({ h: (baseH + 180) % 360, s: Math.max(20, baseS - 5), l: Math.max(25, baseL - 5) });
+ colors.push({ h: (baseH + 180) % 360, s: Math.max(15, baseS - 15), l: Math.max(15, baseL - 20) });
+ } else if (harmonyMode === 'triadic') {
+ // Triadic: base + 120° + 240°
+ const c1 = { h: baseH, s: baseS, l: baseL };
+ const c2 = { h: (baseH + 120) % 360, s: Math.max(20, baseS - 10), l: Math.min(70, baseL + 10) };
+ const c3 = { h: (baseH + 240) % 360, s: Math.max(20, baseS - 5), l: Math.max(25, baseL - 10) };
+ colors.push({ h: baseH, s: Math.max(5, baseS - 25), l: Math.min(92, baseL + 35) });
+ colors.push(c1);
+ colors.push({ h: (baseH + 120) % 360, s: Math.max(10, baseS - 20), l: Math.min(80, baseL + 20) });
+ colors.push(c2);
+ colors.push(c3);
+ }
+
+ palette = colors.map(c => {
+ const hex = hslToHex(c.h, c.s, c.l);
+ return {
+ h: c.h,
+ s: c.s,
+ l: c.l,
+ hex: hex,
+ name: getColorName(c.h, c.s, c.l)
+ };
+ });
+
+ renderPalette();
+ renderRoomPreview();
+ updateBaseDisplay();
+ }
+
+ function renderPalette() {
+ const grid = document.getElementById('paletteGrid');
+ grid.innerHTML = '';
+
+ palette.forEach((color, i) => {
+ const swatch = document.createElement('div');
+ swatch.className = 'palette-swatch';
+ swatch.innerHTML = `
+ <div class="swatch-color" style="background: ${color.hex}"></div>
+ <div class="swatch-info">
+ <div class="swatch-name">${color.name}</div>
+ <div class="swatch-hex">${color.hex}</div>
+ </div>
+ <div class="copy-indicator">Copied</div>
+ `;
+ swatch.onclick = () => copyHex(color.hex, swatch);
+ grid.appendChild(swatch);
+ });
+ }
+
+ function renderRoomPreview() {
+ const panels = ['panel1', 'panel2', 'panel3', 'panel4', 'panel5'];
+ panels.forEach((id, i) => {
+ if (palette[i]) {
+ document.getElementById(id).style.backgroundColor = palette[i].hex;
+ }
+ });
+ }
+
+ function updateBaseDisplay() {
+ const base = palette[2] || palette[0];
+ document.getElementById('baseSwatch').style.backgroundColor = base.hex;
+ document.getElementById('baseName').textContent = base.name;
+ document.getElementById('baseHex').textContent = base.hex;
+ }
+
+ // ===== WHEEL INTERACTION =====
+ const wheel = document.getElementById('colorWheel');
+ const cursor = document.getElementById('wheelCursor');
+ let isDragging = false;
+
+ function updateWheelFromPoint(x, y) {
+ const rect = wheel.getBoundingClientRect();
+ const centerX = rect.width / 2;
+ const centerY = rect.height / 2;
+ const px = x - rect.left - centerX;
+ const py = y - rect.top - centerY;
+
+ const distance = Math.sqrt(px * px + py * py);
+ const maxRadius = rect.width / 2;
+
+ if (distance <= maxRadius) {
+ // Calculate angle for hue
+ let angle = Math.atan2(py, px) * (180 / Math.PI);
+ angle = (angle + 90 + 360) % 360;
+ currentHue = Math.round(angle);
+
+ // Calculate saturation from distance (closer to center = lower saturation)
+ currentSat = Math.round((distance / maxRadius) * 85) + 10;
+
+ // Update cursor position
+ cursor.style.left = (x - rect.left) + 'px';
+ cursor.style.top = (y - rect.top) + 'px';
+
+ generatePalette();
+ }
+ }
+
+ wheel.addEventListener('mousedown', (e) => {
+ isDragging = true;
+ updateWheelFromPoint(e.clientX, e.clientY);
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (isDragging) {
+ const rect = wheel.getBoundingClientRect();
+ updateWheelFromPoint(e.clientX, e.clientY);
+ }
+ });
+
+ document.addEventListener('mouseup', () => {
+ isDragging = false;
+ });
+
+ wheel.addEventListener('click', (e) => {
+ if (!isDragging) {
+ updateWheelFromPoint(e.clientX, e.clientY);
+ }
+ });
+
+ // Touch support
+ wheel.addEventListener('touchstart', (e) => {
+ isDragging = true;
+ const touch = e.touches[0];
+ updateWheelFromPoint(touch.clientX, touch.clientY);
+ });
+
+ wheel.addEventListener('touchmove', (e) => {
+ if (isDragging) {
+ const touch = e.touches[0];
+ updateWheelFromPoint(touch.clientX, touch.clientY);
+ }
+ });
+
+ wheel.addEventListener('touchend', () => {
+ isDragging = false;
+ });
+
+ // ===== HARMONY TOGGLE =====
+ function setHarmony(mode) {
+ harmonyMode = mode;
+ document.querySelectorAll('.harmony-btn').forEach(btn => {
+ btn.classList.toggle('active', btn.dataset.mode === mode);
+ });
+ generatePalette();
+ }
+
+ // ===== COPY HEX =====
+ function copyHex(hex, element) {
+ navigator.clipboard.writeText(hex).then(() => {
+ element.classList.add('copied');
+ showToast(`${hex} copied`);
+ setTimeout(() => element.classList.remove('copied'), 1500);
+ });
+ }
+
+ function showToast(message) {
+ const toast = document.getElementById('toast');
+ toast.textContent = message;
+ toast.classList.add('show');
+ setTimeout(() => toast.classList.remove('show'), 2500);
+ }
+
+ // ===== EXPORT =====
+ function openExport() {
+ const overlay = document.getElementById('exportOverlay');
+ const paletteContainer = document.getElementById('exportPalette');
+
+ // Build export palette view
+ paletteContainer.innerHTML = '';
+ palette.forEach(color => {
+ const swatch = document.createElement('div');
+ swatch.className = 'export-swatch';
+ swatch.style.backgroundColor = color.hex;
+ swatch.innerHTML = `<div class="export-swatch-hex">${color.hex}</div>`;
+ paletteContainer.appendChild(swatch);
+ });
+
+ // Update title
+ const baseName = palette[2]?.name || palette[0]?.name || 'Curated';
+ document.getElementById('exportTitle').textContent = `The ${baseName} Collection`;
+
+ overlay.classList.add('active');
+ }
+
+ function closeExport() {
+ document.getElementById('exportOverlay').classList.remove('active');
+ }
+
+ function closeExportOnBackground(e) {
+ if (e.target === e.currentTarget) {
+ closeExport();
+ }
+ }
+
+ function downloadCard() {
+ const canvas = document.getElementById('export-canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Background
+ ctx.fillStyle = '#17171c';
+ ctx.fillRect(0, 0, 1080, 1080);
+
+ // Header line
+ ctx.strokeStyle = 'rgba(245, 242, 234, 0.08)';
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.moveTo(80, 180);
+ ctx.lineTo(1000, 180);
+ ctx.stroke();
+
+ // Brand
+ ctx.fillStyle = '#8a8578';
+ ctx.font = '300 24px Georgia, serif';
+ ctx.textAlign = 'center';
+ ctx.letterSpacing = '12px';
+ ctx.fillText('DESIGNER WALLCOVERINGS', 540, 130);
+
+ // Palette swatches
+ const swatchWidth = 840 / palette.length;
+ const startX = (1080 - 840) / 2;
+
+ palette.forEach((color, i) => {
+ ctx.fillStyle = color.hex;
+ ctx.fillRect(startX + i * swatchWidth, 280, swatchWidth, 360);
+
+ // Hex label
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+ ctx.font = '400 20px monospace';
+ ctx.fillText(color.hex, startX + i * swatchWidth + swatchWidth/2, 640);
+ });
+
+ // Title
+ const baseName = palette[2]?.name || palette[0]?.name || 'Curated';
+ ctx.fillStyle = '#f5f2ea';
+ ctx.font = '400 72px Georgia, serif';
+ ctx.fillText(`The ${baseName} Collection`, 540, 820);
+
+ // Subtitle
+ ctx.fillStyle = '#8a8578';
+ ctx.font = '500 20px -apple-system, sans-serif';
+ ctx.letterSpacing = '4px';
+ ctx.fillText('INTERIOR COLOR STUDY', 540, 880);
+
+ // Download
+ const link = document.createElement('a');
+ link.download = `designer-wallcoverings-${baseName.toLowerCase().replace(/\s+/g, '-')}.png`;
+ link.href = canvas.toDataURL();
+ link.click();
+
+ showToast('Card downloaded');
+ }
+
+ function resetPalette() {
+ currentHue = 150;
+ currentSat = 45;
+ currentLight = 55;
+
+ // Reset cursor to center
+ const rect = wheel.getBoundingClientRect();
+ cursor.style.left = '50%';
+ cursor.style.top = '50%';
+
+ setHarmony('analogous');
+ generatePalette();
+ }
+
+ // ===== INIT =====
+ generatePalette();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/kimi.png b/data/artifacts/edd68668d3dc/kimi.png
new file mode 100644
index 0000000..906a19a
Binary files /dev/null and b/data/artifacts/edd68668d3dc/kimi.png differ
diff --git a/data/artifacts/edd68668d3dc/qwen25-7b.html b/data/artifacts/edd68668d3dc/qwen25-7b.html
new file mode 100644
index 0000000..95ebef5
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/qwen25-7b.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DESIGNER WALLCOVERINGS Palette Builder</title>
+<style>
+:root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: 1px solid var(--muted);
+ --shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.18) 0 0 24px var(--accent)35%;
+ --ease: cubic-bezier(.22,1,.36,1);
+}
+
+body {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ background-color: var(--bg);
+ color: var(--text);
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ gap: 24px;
+ font-size: 16px;
+}
+
+header {
+ width: 100%;
+ text-align: left;
+ padding: 32px 0;
+}
+
+.wordmark {
+ display: inline-block;
+ font-size: 50px;
+ letter-spacing: .18em;
+ color: var(--text);
+ background: linear-gradient(to right, rgba(245, 242, 234, 0.8), transparent 75%);
+}
+
+nav {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+}
+
+input[type="color"] {
+ width: 40px;
+ height: 40px;
+ border-radius: 2px;
+ background-color: var(--surface);
+ color: var(--text);
+ cursor: pointer;
+ margin-left: -3px;
+}
+
+.swatches {
+ display: grid;
+ gap: 16px;
+ padding: 32px;
+ max-width: 800px;
+}
+
+.swatch {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: var(--accent);
+ margin-right: -2px;
+ cursor: pointer;
+ box-shadow: var(--shadow);
+ transition: transform .7s ease-in-out, box-shadow .3s ease-in-out;
+}
+
+.swatch:hover {
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 24px var(--accent)50%;
+ transform: translateY(-8px);
+}
+
+.room-preview {
+ width: 300px;
+ height: 400px;
+ background-color: var(--surface);
+ border-radius: 14px;
+ margin-top: 32px;
+ box-shadow: var(--shadow);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.room-preview .wall {
+ width: 80%;
+ height: 50%;
+ background-color: var(--accent);
+ border-radius: 14px;
+}
+
+.export-btn {
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ padding: 8px 16px;
+ background-color: var(--surface);
+ color: var(--text);
+ border: none;
+ cursor: pointer;
+ transition: transform .7s ease-in-out, box-shadow .3s ease-in-out;
+}
+
+.export-btn:hover {
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.18) 0 0 24px var(--accent)35%;
+}
+
+</style>
+</head>
+<body>
+<header>
+ <span class="wordmark">DESIGNER WALLCOVERINGS</span>
+</header>
+<nav>
+ <input type="color" id="baseHue" value="#c9a961">
+ <label for="baseHue">Base Hue</label>
+</nav>
+<div class="swatches">
+ <div class="swatch" id="alabaster"></div>
+ <div class="swatch" id="greige"></div>
+ <div class="swatch" id="celadon"></div>
+ <div class="swatch" id="ink"></div>
+ <div class="swatch" id="brass"></div>
+</div>
+
+<div class="room-preview">
+ <div class="wall" style="background-color: var(--accent)"></div>
+</div>
+
+<button class="export-btn">Export as 1080x1080 Card</button>
+
+<script>
+document.getElementById('baseHue').addEventListener('input', function() {
+ const baseHue = this.value;
+ document.documentElement.style.setProperty('--accent', baseHue);
+
+ // Update swatches
+ document.getElementById('alabaster').style.backgroundColor = colorShift(baseHue, -30, -25, 18);
+ document.getElementById('greige').style.backgroundColor = colorShift(baseHue, 0, -45, 17);
+ document.getElementById('celadon').style.backgroundColor = colorShift(baseHue, 20, -45, 19);
+ document.getElementById('ink').style.backgroundColor = colorShift(baseHue, -35, 0, 16);
+ document.getElementById('brass').style.backgroundColor = colorShift(baseHue, 35, 25, 17);
+
+ // Update room preview
+ document.querySelector('.room-preview .wall').style.backgroundColor = baseHue;
+});
+
+function colorShift(baseColor, hshift, sshift, lshift) {
+ const hue = parseInt((baseColor.slice(1)).replace(/([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/, "$1$2$3"), 16);
+ const sat = baseColor.slice(-2);
+ const light = baseColor.slice(-4, -2);
+
+ return `#${((hue + hshift) % 360).toString(16)}${sat}${light}`;
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/qwen25-7b.png b/data/artifacts/edd68668d3dc/qwen25-7b.png
new file mode 100644
index 0000000..b2cfb84
Binary files /dev/null and b/data/artifacts/edd68668d3dc/qwen25-7b.png differ
diff --git a/data/artifacts/edd68668d3dc/qwen3-14b.html b/data/artifacts/edd68668d3dc/qwen3-14b.html
new file mode 100644
index 0000000..eff3505
--- /dev/null
+++ b/data/artifacts/edd68668d3dc/qwen3-14b.html
@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Designer Wallcoverings</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --line: #25252c;
+ --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ --hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+ --glow: 0 0 24px var(--accent, #c9a961)35%;
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ --spacing: 4px;
+ --card-radius: 14px;
+ --card-gap: 24px;
+ --section-pad: 96px;
+ --caption: 12px;
+ --body: 16px;
+ --lead: 21px;
+ --h3: 28px;
+ --h2: 38px;
+ --h1: 50px;
+ --display: 67px;
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ font-family: var(--font-body);
+ color: var(--text);
+ background-color: var(--bg);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+ }
+
+ header {
+ font-family: var(--font-display);
+ font-size: 44px;
+ letter-spacing: 0.18em;
+ color: var(--text);
+ padding: 24px 32px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: var(--surface);
+ box-shadow: var(--shadow);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ }
+
+ main {
+ padding: var(--section-pad) var(--spacing);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 64px;
+ flex: 1;
+ }
+
+ .palette-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+ }
+
+ .color-swatch {
+ width: 240px;
+ height: 240px;
+ border-radius: var(--card-radius);
+ box-shadow: var(--shadow);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: box-shadow 0.2s var(--ease);
+ background-size: 400px 400px;
+ }
+
+ .color-swatch:hover {
+ box-shadow: var(--hover-shadow);
+ }
+
+ .color-swatch::after {
+ content: attr(data-hex);
+ font-size: 12px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ position: absolute;
+ bottom: 8px;
+ left: 8px;
+ color: var(--text);
+ background: rgba(0, 0, 0, 0.3);
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-family: var(--font-body);
+ }
+
+ .palette-legend {
+ font-family: var(--font-display);
+ font-size: 28px;
+ letter-spacing: 0.18em;
+ color: var(--text);
+ margin-top: 16px;
+ }
+
+ .room-preview {
+ width: 100%;
+ max-width: 1080px;
+ height: 400px;
+ border-radius: var(--card-radius);
+ box-shadow: var(--shadow);
+ background: linear-gradient(135deg, var(--accent) 25%, var(--surface) 50%, var(--muted) 75%);
+ background-size: 600px 600px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .room-preview::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, var(--accent) 25%, var(--surface) 50%, var(--muted) 75%);
+ opacity: 0.1;
+ pointer-events: none;
+ }
+
+ .button {
+ font-family: var(--font-body);
+ font-size: 14px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ background: var(--accent);
+ color: var(--text);
+ padding: 12px 24px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+ transition: background 0.2s var(--ease);
+ }
+
+ .button:hover {
+ background: #c29d4e;
+ }
+
+ .toggle-group {
+ display: flex;
+ gap: 16px;
+ margin-top: 16px;
+ }
+
+ .toggle {
+ font-family: var(--font-body);
+ font-size: 14px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ padding: 8px 16px;
+ border: 1px solid var(--line);
+ border-radius: 4px;
+ background: var(--surface);
+ color: var(--text);
+ cursor: pointer;
+ transition: background 0.2s var(--ease);
+ }
+
+ .toggle.active {
+ background: var(--accent);
+ color: var(--text);
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.95);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 2000;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s var(--ease);
+ }
+
+ .overlay.active {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ .card-export {
+ width: 1080px;
+ height: 1080px;
+ background: var(--surface);
+ box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+ border: 1px solid var(--line);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 32px;
+ color: var(--text);
+ font-family: var(--font-display);
+ letter-spacing: 0.18em;
+ text-align: center;
+ }
+
+ .card-export::after {
+ content: 'click to save as image';
+ font-size: 14px;
+ color: var(--muted);
+ margin-top: 16px;
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .fade-in {
+ animation: fadeUp 0.7s var(--ease) both;
+ }
+ </style>
+</head>
+<body>
+ <header>DESIGNER WALLCOVERINGS</header>
+ <main>
+ <div class="palette-container">
+ <div class="toggle-group">
+ <button class="toggle active" data-type="analogous">Analogous</button>
+ <button class="toggle" data-type="complementary">Complementary</button>
+ <button class="toggle" data-type="triadic">Triadic</button>
+ </div>
+ <div class="palette-legend">Curated 5-Swatch Interior Palette</div>
+ <div id="swatches" class="swatch-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--card-gap);"></div>
+ <div class="room-preview" id="roomPreview"></div>
+ <button class="button" id="exportCard">Export as 1080x1080 Card</button>
+ </div>
+ </main>
+ <div class="overlay" id="exportOverlay">
+ <div class="card-export fade-in" id="exportCardContent">
+ <div id="cardContent"></div>
+ </div>
+ </div>
+ <script>
+ const palette = {
+ base: '#c9a961', // Alabaster
+ swatches: [
+ '#f5f2ea', // Alabaster
+ '#bcb8a4', // Greige
+ '#999581', // Celadon
+ '#3b3731', // Ink
+ '#c2b99d', // Brass
+ ]
+ };
+
+ const swatchContainer = document.getElementById('swatches');
+ const roomPreview = document.getElementById('roomPreview');
+ const exportCard = document.getElementById('exportCard');
+ const exportOverlay = document.getElementById('exportOverlay');
+ const cardContent = document.getElementById('cardContent');
+
+ function generateSwatches(type = 'analogous') {
+ let swatches = [];
+ let base = palette.base;
+
+ if (type === 'analogous') {
+ swatches = [base, '#d6c8a4', '#bcb8a4', '#999581', '#837e6a'];
+ } else if (type === 'complementary') {
+ swatches = [base, '#3b3731', '#555145', '#7d6a45', '#c2b99d'];
+ } else if (type === 'triadic') {
+ swatches = [base, '#7d6a45', '#bcb8a4', '#3b3731', '#c2b99d'];
+ }
+
+ swatchContainer.innerHTML = '';
+ swatches.forEach((color, index) => {
+ const swatch = document.createElement('div');
+ swatch.className = 'color-swatch';
+ swatch.style.backgroundColor = color;
+ swatch.dataset.hex = color;
+ swatch.addEventListener('click', () => {
+ navigator.clipboard.writeText(color);
+ });
+ swatchContainer.appendChild(swatch);
+ });
+
+ updateRoomPreview();
+ }
+
+ function updateRoomPreview() {
+ const swatches = document.querySelectorAll('.color-swatch');
+ const colors = Array.from(swatches).map(s => s.style.backgroundColor);
+ const gradient = `linear-gradient(135deg, ${colors[0]} 25%, ${colors[1]} 50%, ${colors[2]} 75%)`;
+ roomPreview.style.background = gradient;
+ }
+
+ exportCard.addEventListener('click', () => {
+ exportOverlay.classList.add('active');
+ const card = document.createElement('div');
+ card.style.width = '1080px';
+ card.style.height = '1080px';
+ card.style.background = '#17171c';
+ card.style.display = 'flex';
+ card.style.flexDirection = 'column';
+ card.style.alignItems = 'center';
+ card.style.justifyContent = 'center';
+ card.style.padding = '64px';
+ card.style.boxShadow = '0 0 24px rgba(0, 0, 0, 0.2)';
+ card.style.borderRadius = '14px';
+
+ const title = document.createElement('h1');
+ title.style.fontFamily = 'var(--font-display)';
+ title.style.fontSize = '64px';
+ title.style.letterSpacing = '0.18em';
+ title.style.textAlign = 'center';
+ title.textContent = 'DESIGNER WALLCOVERINGS';
+
+ const paletteGrid = document.createElement('div');
+ paletteGrid.style.display = 'grid';
+ paletteGrid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';
+ paletteGrid.style.gap = '32px';
+
+ const swatches = document.querySelectorAll('.color-swatch');
+ swatches.forEach(s => {
+ const swatch = document.createElement('div');
+ swatch.style.width = '200px';
+ swatch.style.height = '200px';
+ swatch.style.borderRadius = '14px';
+ swatch.style.background = s.style.backgroundColor;
+ swatch.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.12)';
+ paletteGrid.appendChild(swatch);
+ });
+
+ card.appendChild(title);
+ card.appendChild(paletteGrid);
+ cardContent.innerHTML = '';
+ cardContent.appendChild(card);
+ }
+
+ generateSwatches();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/edd68668d3dc/qwen3-14b.png b/data/artifacts/edd68668d3dc/qwen3-14b.png
new file mode 100644
index 0000000..bdd5eb8
Binary files /dev/null and b/data/artifacts/edd68668d3dc/qwen3-14b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index a0b7004..acfaba3 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -27781,7 +27781,14 @@
"finished_at": "2026-07-25T14:12:43.893Z",
"queued_at": "2026-07-25T14:12:18.476Z",
"bytes": 4201,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The design is visually appealing and follows the luxury UI requirements closely. However, it lacks some interactive elements that were part of the challenge.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "hf-qwen-coder-32b",
@@ -27797,13 +27804,15 @@
},
{
"model": "claude-code",
- "status": "error",
- "error": "claude CLI: Command failed: /Users/macstudio3/.npm-global/bin/claude --model opus --append-system-prompt You are a headless code generator in a build arena. Respond with ON",
- "seconds": 301,
- "cost": null,
- "started_at": "2026-07-25T14:12:18.509Z",
- "finished_at": "2026-07-25T14:17:19.205Z",
- "queued_at": "2026-07-25T14:12:18.487Z"
+ "status": "done",
+ "error": null,
+ "seconds": 264,
+ "cost": 0,
+ "started_at": "2026-07-25T14:28:44.228Z",
+ "finished_at": "2026-07-25T14:33:08.334Z",
+ "queued_at": "2026-07-25T14:24:31.111Z",
+ "bytes": 21619,
+ "thumb": true
},
{
"model": "kimi",
@@ -27917,7 +27926,14 @@
"finished_at": "2026-07-25T14:19:59.422Z",
"queued_at": "2026-07-25T14:12:18.568Z",
"bytes": 4731,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file meets all the requirements and has a polished visual quality.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
},
{
"model": "qwen25-7b",
@@ -28026,95 +28042,133 @@
"runs": [
{
"model": "qwen3-14b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.807Z"
+ "seconds": 74,
+ "cost": 0,
+ "started_at": "2026-07-25T14:24:25.573Z",
+ "finished_at": "2026-07-25T14:25:39.580Z",
+ "queued_at": "2026-07-25T14:24:17.807Z",
+ "bytes": 10139,
+ "thumb": true
},
{
"model": "gemma3-12b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.817Z"
+ "seconds": 62,
+ "cost": 0,
+ "started_at": "2026-07-25T14:25:39.589Z",
+ "finished_at": "2026-07-25T14:26:41.871Z",
+ "queued_at": "2026-07-25T14:24:17.817Z",
+ "bytes": 7419,
+ "thumb": true
},
{
"model": "hermes3-8b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.825Z"
+ "seconds": 24,
+ "cost": 0,
+ "started_at": "2026-07-25T14:26:41.876Z",
+ "finished_at": "2026-07-25T14:27:06.225Z",
+ "queued_at": "2026-07-25T14:24:17.825Z",
+ "bytes": 3283,
+ "thumb": true
},
{
"model": "qwen25-7b",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 37,
+ "cost": 0,
"started_at": "2026-07-25T14:24:17.858Z",
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.830Z"
+ "finished_at": "2026-07-25T14:24:54.804Z",
+ "queued_at": "2026-07-25T14:24:17.830Z",
+ "bytes": 4194,
+ "thumb": true
},
{
"model": "hf-qwen-coder-32b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.835Z"
+ "seconds": 133,
+ "cost": 0,
+ "started_at": "2026-07-25T14:27:06.240Z",
+ "finished_at": "2026-07-25T14:29:19.187Z",
+ "queued_at": "2026-07-25T14:24:17.835Z",
+ "bytes": 11393,
+ "thumb": true
},
{
"model": "claude-code",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 145,
+ "cost": 0,
"started_at": "2026-07-25T14:24:17.863Z",
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.839Z"
+ "finished_at": "2026-07-25T14:26:43.003Z",
+ "queued_at": "2026-07-25T14:24:17.839Z",
+ "bytes": 29775,
+ "thumb": true
},
{
"model": "kimi",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 195,
+ "cost": 0.0303,
"started_at": "2026-07-25T14:24:17.868Z",
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.843Z"
+ "finished_at": "2026-07-25T14:27:33.199Z",
+ "queued_at": "2026-07-25T14:24:17.843Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 35789,
+ "thumb": true
},
{
"model": "gpt",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 141,
+ "cost": 0.2314,
"started_at": "2026-07-25T14:24:17.874Z",
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.847Z"
+ "finished_at": "2026-07-25T14:26:39.295Z",
+ "queued_at": "2026-07-25T14:24:17.847Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 55155,
+ "thumb": true
},
{
"model": "grok",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 143,
+ "cost": 0.2014,
"started_at": "2026-07-25T14:24:17.879Z",
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.853Z"
+ "finished_at": "2026-07-25T14:26:41.253Z",
+ "queued_at": "2026-07-25T14:24:17.853Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 35642,
+ "thumb": true
}
- ]
+ ],
+ "judging": true
},
{
"id": "0219528ac7d7",
@@ -28127,93 +28181,124 @@
"runs": [
{
"model": "qwen3-14b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.913Z"
+ "seconds": 52,
+ "cost": 0,
+ "started_at": "2026-07-25T14:29:19.198Z",
+ "finished_at": "2026-07-25T14:30:11.310Z",
+ "queued_at": "2026-07-25T14:24:17.913Z",
+ "bytes": 7091,
+ "thumb": true
},
{
"model": "gemma3-12b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.918Z"
+ "seconds": 72,
+ "cost": 0,
+ "started_at": "2026-07-25T14:30:11.323Z",
+ "finished_at": "2026-07-25T14:31:23.604Z",
+ "queued_at": "2026-07-25T14:24:17.918Z",
+ "bytes": 9736,
+ "thumb": true
},
{
"model": "hermes3-8b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.923Z"
+ "seconds": 41,
+ "cost": 0,
+ "started_at": "2026-07-25T14:31:23.612Z",
+ "finished_at": "2026-07-25T14:32:04.924Z",
+ "queued_at": "2026-07-25T14:24:17.923Z",
+ "bytes": 9748,
+ "thumb": true
},
{
"model": "qwen25-7b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.927Z"
+ "seconds": 35,
+ "cost": 0,
+ "started_at": "2026-07-25T14:24:54.821Z",
+ "finished_at": "2026-07-25T14:25:29.874Z",
+ "queued_at": "2026-07-25T14:24:17.927Z",
+ "bytes": 5644,
+ "thumb": true
},
{
"model": "hf-qwen-coder-32b",
- "status": "queued",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T14:32:04.940Z",
"finished_at": null,
"queued_at": "2026-07-25T14:24:17.931Z"
},
{
"model": "claude-code",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.935Z"
+ "seconds": 121,
+ "cost": 0,
+ "started_at": "2026-07-25T14:26:43.007Z",
+ "finished_at": "2026-07-25T14:28:44.222Z",
+ "queued_at": "2026-07-25T14:24:17.935Z",
+ "bytes": 22128,
+ "thumb": true
},
{
"model": "kimi",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.941Z"
+ "seconds": 158,
+ "cost": 0.0271,
+ "started_at": "2026-07-25T14:27:33.224Z",
+ "finished_at": "2026-07-25T14:30:11.676Z",
+ "queued_at": "2026-07-25T14:24:17.941Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 37138,
+ "thumb": true
},
{
"model": "gpt",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.945Z"
+ "seconds": 123,
+ "cost": 0.2082,
+ "started_at": "2026-07-25T14:26:39.319Z",
+ "finished_at": "2026-07-25T14:28:42.038Z",
+ "queued_at": "2026-07-25T14:24:17.945Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 45923,
+ "thumb": true
},
{
"model": "grok",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T14:24:17.950Z"
+ "seconds": 174,
+ "cost": 0.235,
+ "started_at": "2026-07-25T14:26:41.258Z",
+ "finished_at": "2026-07-25T14:29:34.891Z",
+ "queued_at": "2026-07-25T14:24:17.950Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 40434,
+ "thumb": true
}
]
}
diff --git a/data/costlog.jsonl b/data/costlog.jsonl
index 566be09..70cfaae 100644
--- a/data/costlog.jsonl
+++ b/data/costlog.jsonl
@@ -387,3 +387,9 @@
{"ts":"2026-07-25T14:15:28.977Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":6299,"output_tokens":5971,"cost_usd":0.018707}
{"ts":"2026-07-25T14:15:53.444Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3508,"output_tokens":8217,"cost_usd":0.121177}
{"ts":"2026-07-25T14:16:22.601Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":4467,"output_tokens":6891,"cost_usd":0.116766}
+{"ts":"2026-07-25T14:26:39.291Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3502,"output_tokens":16092,"cost_usd":0.231416}
+{"ts":"2026-07-25T14:26:41.251Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":4319,"output_tokens":12561,"cost_usd":0.201372}
+{"ts":"2026-07-25T14:27:33.194Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":3918,"output_tokens":11187,"cost_usd":0.030318}
+{"ts":"2026-07-25T14:28:42.036Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3315,"output_tokens":14454,"cost_usd":0.208157}
+{"ts":"2026-07-25T14:29:34.886Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":4062,"output_tokens":14857,"cost_usd":0.235041}
+{"ts":"2026-07-25T14:30:11.673Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":3451,"output_tokens":10029,"cost_usd":0.027143}
← ba1ba41 night-loop: cycle 07:24 — judged=daab7257c478 · fired 2 →; F
·
back to Model Arena
·
night-loop: cycle 07:36 — judged=0219528ac7d7 · fired 2 →; F ace3873 →