← back to Model Arena
night-loop: cycle 02:31 — judged=0b9bb5066c06 · fired 1 →; FIRED idx=10/16 id=b325446e067a title=Designer Wallcoverings — Color Harmony Game
e83ae896d940c794ef35cb81234c61076db1f22c · 2026-07-25 02:31:21 -0700 · Steve Abrams
Files touched
A data/artifacts/0b9bb5066c06/claude-code.htmlA data/artifacts/0b9bb5066c06/claude-code.pngA data/artifacts/0b9bb5066c06/gemma3-12b.htmlA data/artifacts/0b9bb5066c06/gemma3-12b.pngA data/artifacts/0b9bb5066c06/gpt.htmlA data/artifacts/0b9bb5066c06/gpt.pngA data/artifacts/0b9bb5066c06/grok.htmlA data/artifacts/0b9bb5066c06/grok.pngA data/artifacts/0b9bb5066c06/hermes3-8b.htmlA data/artifacts/0b9bb5066c06/hermes3-8b.pngA data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.htmlA data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.pngA data/artifacts/0b9bb5066c06/kimi.htmlA data/artifacts/0b9bb5066c06/kimi.pngA data/artifacts/0b9bb5066c06/qwen25-7b.htmlA data/artifacts/0b9bb5066c06/qwen25-7b.pngA data/artifacts/0b9bb5066c06/qwen3-14b.htmlA data/artifacts/0b9bb5066c06/qwen3-14b.pngA data/artifacts/52cab5a7ddb7/gemma3-12b.htmlA data/artifacts/52cab5a7ddb7/gemma3-12b.pngA data/artifacts/52cab5a7ddb7/hermes3-8b.htmlA data/artifacts/52cab5a7ddb7/hermes3-8b.pngA data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.htmlA data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.pngA data/artifacts/52cab5a7ddb7/qwen25-7b.htmlA data/artifacts/52cab5a7ddb7/qwen25-7b.pngA data/artifacts/52cab5a7ddb7/qwen3-14b.htmlA data/artifacts/52cab5a7ddb7/qwen3-14b.pngA data/artifacts/776187e02cf0/claude-code.htmlA data/artifacts/776187e02cf0/claude-code.pngA data/artifacts/776187e02cf0/gpt.htmlA data/artifacts/776187e02cf0/gpt.pngA data/artifacts/776187e02cf0/grok.htmlA data/artifacts/776187e02cf0/grok.pngA data/artifacts/776187e02cf0/kimi.htmlA data/artifacts/776187e02cf0/kimi.pngA data/artifacts/776187e02cf0/qwen25-7b.htmlA data/artifacts/776187e02cf0/qwen25-7b.pngA data/artifacts/cd9c858a083c/claude-code.htmlA data/artifacts/cd9c858a083c/claude-code.pngA data/artifacts/cd9c858a083c/grok.htmlA data/artifacts/cd9c858a083c/grok.pngA data/artifacts/cd9c858a083c/kimi.htmlA data/artifacts/cd9c858a083c/kimi.pngA data/artifacts/cd9c858a083c/qwen25-7b.htmlA data/artifacts/cd9c858a083c/qwen25-7b.pngM data/challenges.jsonM data/costlog.jsonlM idea-run/.dw-brand-style-color-pointer
Diff
commit e83ae896d940c794ef35cb81234c61076db1f22c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 02:31:21 2026 -0700
night-loop: cycle 02:31 — judged=0b9bb5066c06 · fired 1 →; FIRED idx=10/16 id=b325446e067a title=Designer Wallcoverings — Color Harmony Game
---
data/artifacts/0b9bb5066c06/claude-code.html | 729 ++++++++++
data/artifacts/0b9bb5066c06/claude-code.png | Bin 0 -> 104197 bytes
data/artifacts/0b9bb5066c06/gemma3-12b.html | 245 ++++
data/artifacts/0b9bb5066c06/gemma3-12b.png | Bin 0 -> 20109 bytes
data/artifacts/0b9bb5066c06/gpt.html | 1472 +++++++++++++++++++
data/artifacts/0b9bb5066c06/gpt.png | Bin 0 -> 233031 bytes
data/artifacts/0b9bb5066c06/grok.html | 1476 ++++++++++++++++++++
data/artifacts/0b9bb5066c06/grok.png | Bin 0 -> 36895 bytes
data/artifacts/0b9bb5066c06/hermes3-8b.html | 70 +
data/artifacts/0b9bb5066c06/hermes3-8b.png | Bin 0 -> 26215 bytes
data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.html | 136 ++
data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.png | Bin 0 -> 41618 bytes
data/artifacts/0b9bb5066c06/kimi.html | 816 +++++++++++
data/artifacts/0b9bb5066c06/kimi.png | Bin 0 -> 42971 bytes
data/artifacts/0b9bb5066c06/qwen25-7b.html | 127 ++
data/artifacts/0b9bb5066c06/qwen25-7b.png | Bin 0 -> 31765 bytes
data/artifacts/0b9bb5066c06/qwen3-14b.html | 312 +++++
data/artifacts/0b9bb5066c06/qwen3-14b.png | Bin 0 -> 56238 bytes
data/artifacts/52cab5a7ddb7/gemma3-12b.html | 368 +++++
data/artifacts/52cab5a7ddb7/gemma3-12b.png | Bin 0 -> 36567 bytes
data/artifacts/52cab5a7ddb7/hermes3-8b.html | 306 ++++
data/artifacts/52cab5a7ddb7/hermes3-8b.png | Bin 0 -> 8420 bytes
data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.html | 237 ++++
data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.png | Bin 0 -> 35997 bytes
data/artifacts/52cab5a7ddb7/qwen25-7b.html | 216 +++
data/artifacts/52cab5a7ddb7/qwen25-7b.png | Bin 0 -> 45226 bytes
data/artifacts/52cab5a7ddb7/qwen3-14b.html | 378 +++++
data/artifacts/52cab5a7ddb7/qwen3-14b.png | Bin 0 -> 59638 bytes
data/artifacts/776187e02cf0/claude-code.html | 394 ++++++
data/artifacts/776187e02cf0/claude-code.png | Bin 0 -> 110286 bytes
data/artifacts/776187e02cf0/gpt.html | 1196 ++++++++++++++++
data/artifacts/776187e02cf0/gpt.png | Bin 0 -> 248828 bytes
data/artifacts/776187e02cf0/grok.html | 921 ++++++++++++
data/artifacts/776187e02cf0/grok.png | Bin 0 -> 52677 bytes
data/artifacts/776187e02cf0/kimi.html | 658 +++++++++
data/artifacts/776187e02cf0/kimi.png | Bin 0 -> 166610 bytes
data/artifacts/776187e02cf0/qwen25-7b.html | 141 ++
data/artifacts/776187e02cf0/qwen25-7b.png | Bin 0 -> 25895 bytes
data/artifacts/cd9c858a083c/claude-code.html | 424 ++++++
data/artifacts/cd9c858a083c/claude-code.png | Bin 0 -> 74085 bytes
data/artifacts/cd9c858a083c/grok.html | 631 +++++++++
data/artifacts/cd9c858a083c/grok.png | Bin 0 -> 16543 bytes
data/artifacts/cd9c858a083c/kimi.html | 703 ++++++++++
data/artifacts/cd9c858a083c/kimi.png | Bin 0 -> 40346 bytes
data/artifacts/cd9c858a083c/qwen25-7b.html | 134 ++
data/artifacts/cd9c858a083c/qwen25-7b.png | Bin 0 -> 10780 bytes
data/challenges.json | 546 ++++++--
data/costlog.jsonl | 8 +
idea-run/.dw-brand-style-color-pointer | 2 +-
49 files changed, 12529 insertions(+), 117 deletions(-)
diff --git a/data/artifacts/0b9bb5066c06/claude-code.html b/data/artifacts/0b9bb5066c06/claude-code.html
new file mode 100644
index 0000000..a4dec15
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/claude-code.html
@@ -0,0 +1,729 @@
+<!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;
+ --text:#f5f2ea;
+ --muted:#8a8578;
+ --accent:#c9a961;
+ --accent-deep:#7d6a45;
+ --line:rgba(201,169,97,.22);
+ --hairline:rgba(245,242,234,.10);
+ --radius:14px;
+ --serif:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{height:100%}
+ body{
+ background:var(--bg);
+ color:var(--text);
+ font-family:var(--sans);
+ font-size:16px;
+ line-height:1.55;
+ -webkit-font-smoothing:antialiased;
+ min-height:100%;
+ display:flex;
+ flex-direction:column;
+ overflow-x:hidden;
+ }
+ /* ambient drift */
+ body::before{
+ content:"";
+ position:fixed;
+ inset:-30%;
+ z-index:0;
+ background:
+ radial-gradient(closest-side at 20% 25%, rgba(201,169,97,.06), transparent 70%),
+ radial-gradient(closest-side at 80% 75%, rgba(125,106,69,.07), transparent 70%);
+ animation:drift 18s ease-in-out infinite alternate;
+ pointer-events:none;
+ }
+ @keyframes drift{
+ from{transform:translate3d(-2%,-1%,0) scale(1)}
+ to{transform:translate3d(2%,2%,0) scale(1.08)}
+ }
+
+ /* ---------- Top bar ---------- */
+ .topbar{
+ position:fixed;top:0;left:0;right:0;z-index:40;
+ display:flex;align-items:center;justify-content:space-between;
+ padding:18px 32px;
+ background:rgba(13,13,15,.72);
+ backdrop-filter:blur(14px) saturate(1.1);
+ border-bottom:1px solid var(--hairline);
+ }
+ .wordmark{
+ font-family:var(--serif);
+ font-weight:400;
+ font-size:20px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--text);
+ white-space:nowrap;
+ }
+ .wordmark .amp{color:var(--accent)}
+ .topbar .tag{
+ font-size:12px;letter-spacing:.15em;text-transform:uppercase;
+ color:var(--muted);white-space:nowrap;
+ }
+
+ /* ---------- Layout ---------- */
+ .wrap{
+ position:relative;z-index:1;
+ flex:1;
+ width:100%;
+ max-width:1080px;
+ margin:0 auto;
+ padding:120px 32px 64px;
+ display:flex;
+ flex-direction:column;
+ }
+
+ .eyebrow{
+ font-size:12px;letter-spacing:.28em;text-transform:uppercase;
+ color:var(--accent);
+ margin-bottom:14px;
+ }
+ h1.title{
+ font-family:var(--serif);
+ font-weight:400;
+ font-size:50px;
+ line-height:1.05;
+ letter-spacing:.01em;
+ margin-bottom:10px;
+ }
+ h1.title em{font-style:italic;color:var(--accent)}
+ .subtitle{
+ color:var(--muted);
+ font-size:17px;
+ max-width:52ch;
+ margin-bottom:8px;
+ }
+
+ /* ---------- Scoreboard ---------- */
+ .scorebar{
+ display:flex;flex-wrap:wrap;gap:14px;
+ margin:28px 0 24px;
+ }
+ .stat{
+ background:var(--surface);
+ border:1px solid var(--hairline);
+ border-radius:var(--radius);
+ padding:14px 20px;
+ min-width:104px;
+ box-shadow:0 8px 24px rgba(0,0,0,.24);
+ }
+ .stat .k{
+ font-size:11px;letter-spacing:.18em;text-transform:uppercase;
+ color:var(--muted);margin-bottom:6px;
+ }
+ .stat .v{
+ font-family:var(--serif);font-size:30px;line-height:1;
+ color:var(--text);
+ }
+ .stat.best .v{color:var(--accent)}
+
+ /* progress rail */
+ .rail{
+ height:2px;width:100%;
+ background:var(--hairline);
+ border-radius:2px;overflow:hidden;
+ margin-bottom:30px;
+ }
+ .rail span{
+ display:block;height:100%;
+ background:linear-gradient(90deg,var(--accent-deep),var(--accent));
+ width:0;transition:width .6s cubic-bezier(.22,1,.36,1);
+ }
+
+ /* ---------- Stage / vignette ---------- */
+ .stage-wrap{
+ display:grid;
+ grid-template-columns:1fr;
+ gap:32px;
+ }
+ @media(min-width:860px){
+ .stage-wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
+ }
+
+ .vignette{
+ position:relative;
+ aspect-ratio:4/3;
+ border-radius:var(--radius);
+ overflow:hidden;
+ border:1px solid var(--hairline);
+ box-shadow:0 16px 48px rgba(0,0,0,.42);
+ background:#111;
+ animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
+ }
+ .vignette .frame-label{
+ position:absolute;left:14px;top:14px;z-index:6;
+ font-size:11px;letter-spacing:.2em;text-transform:uppercase;
+ color:rgba(255,255,255,.72);
+ background:rgba(0,0,0,.34);
+ backdrop-filter:blur(4px);
+ padding:6px 12px;border-radius:40px;
+ border:1px solid rgba(255,255,255,.14);
+ }
+
+ /* the room: floor + wall + rug + furniture built in CSS */
+ .room{position:absolute;inset:0}
+ .wall{position:absolute;left:0;right:0;top:0;height:70%}
+ .floor{position:absolute;left:0;right:0;bottom:0;height:30%}
+ .baseboard{position:absolute;left:0;right:0;top:70%;height:2.4%;transform:translateY(-100%)}
+ /* window / art frame */
+ .feature{
+ position:absolute;left:50%;top:15%;transform:translateX(-50%);
+ width:34%;height:42%;
+ border-radius:4px;
+ }
+ /* sofa / console */
+ .furniture{
+ position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
+ width:56%;height:26%;
+ border-radius:10px 10px 6px 6px;
+ }
+ .furniture::after{
+ content:"";position:absolute;left:8%;right:8%;bottom:-9px;height:12px;
+ background:rgba(0,0,0,.35);filter:blur(7px);border-radius:50%;
+ }
+ /* lamp / accent object */
+ .accentobj{
+ position:absolute;bottom:12%;width:9%;height:30%;
+ border-radius:6px 6px 2px 2px;
+ }
+ .accentobj.l{left:7%}
+ .accentobj.r{right:7%}
+ .glow{
+ position:absolute;inset:0;pointer-events:none;
+ background:radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.10), transparent 60%);
+ mix-blend-mode:screen;
+ }
+ .vin{
+ position:absolute;inset:0;pointer-events:none;
+ box-shadow:inset 0 0 120px 30px rgba(0,0,0,.55);
+ }
+
+ /* ---------- Panel (guesses / reveal) ---------- */
+ .panel{
+ display:flex;flex-direction:column;justify-content:center;
+ animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .09s both;
+ }
+ .panel .prompt{
+ font-size:12px;letter-spacing:.2em;text-transform:uppercase;
+ color:var(--muted);margin-bottom:16px;
+ }
+ .choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+ @media(max-width:420px){.choices{grid-template-columns:1fr}}
+ .choice{
+ appearance:none;cursor:pointer;
+ font-family:var(--serif);
+ font-size:19px;letter-spacing:.01em;
+ color:var(--text);
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:var(--radius);
+ padding:20px 16px;
+ text-align:left;
+ line-height:1.2;
+ transition:transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
+ }
+ .choice small{
+ display:block;
+ font-family:var(--sans);
+ font-size:11px;letter-spacing:.16em;text-transform:uppercase;
+ color:var(--muted);margin-top:8px;
+ transition:color .2s ease;
+ }
+ .choice:hover:not(:disabled){
+ transform:translateY(-3px);
+ border-color:var(--accent);
+ box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 24px rgba(201,169,97,.18);
+ }
+ .choice:disabled{cursor:default}
+ .choice.correct{
+ border-color:var(--accent);
+ background:linear-gradient(180deg,rgba(201,169,97,.16),rgba(201,169,97,.05));
+ box-shadow:0 0 24px rgba(201,169,97,.32);
+ }
+ .choice.correct small{color:var(--accent)}
+ .choice.wrong{
+ border-color:rgba(176,71,46,.6);
+ background:rgba(176,71,46,.09);
+ opacity:.92;
+ }
+ .choice.dim{opacity:.4}
+
+ /* reveal card */
+ .reveal{
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:var(--radius);
+ padding:24px;
+ box-shadow:0 16px 48px rgba(0,0,0,.38);
+ animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both;
+ }
+ .reveal .verdict{
+ font-size:12px;letter-spacing:.2em;text-transform:uppercase;
+ margin-bottom:10px;
+ }
+ .reveal .verdict.hit{color:var(--accent)}
+ .reveal .verdict.miss{color:#d98b6f}
+ .reveal h3{
+ font-family:var(--serif);font-weight:400;
+ font-size:28px;line-height:1.1;margin-bottom:4px;
+ }
+ .reveal .years{
+ font-size:12px;letter-spacing:.14em;text-transform:uppercase;
+ color:var(--muted);margin-bottom:14px;
+ }
+ .reveal .fact{
+ color:var(--text);font-size:15px;line-height:1.6;
+ padding-top:14px;border-top:1px solid var(--hairline);
+ }
+ .reveal .fact b{color:var(--accent);font-weight:600}
+
+ .actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
+ .btn{
+ appearance:none;cursor:pointer;
+ font-family:var(--sans);
+ font-size:12px;letter-spacing:.16em;text-transform:uppercase;
+ padding:14px 26px;border-radius:40px;
+ border:1px solid var(--accent);
+ background:var(--accent);color:#141310;font-weight:600;
+ transition:transform .18s ease,box-shadow .2s ease,background .2s ease;
+ }
+ .btn:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(201,169,97,.4)}
+ .btn.ghost{background:transparent;color:var(--text);border-color:var(--hairline)}
+ .btn.ghost:hover{border-color:var(--accent);box-shadow:none}
+
+ /* ---------- Final screen ---------- */
+ .final{
+ text-align:center;
+ max-width:640px;margin:0 auto;
+ animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
+ padding:24px 0;
+ }
+ .final .grade{
+ font-family:var(--serif);
+ font-size:67px;line-height:1;
+ color:var(--accent);
+ margin:6px 0 4px;
+ }
+ .final .finalscore{
+ font-family:var(--serif);font-size:38px;margin-bottom:8px;
+ }
+ .final p{color:var(--muted);font-size:16px;margin-bottom:6px}
+ .final .newbest{
+ display:inline-block;margin:14px 0;
+ font-size:12px;letter-spacing:.2em;text-transform:uppercase;
+ color:var(--accent);
+ border:1px solid var(--line);border-radius:40px;padding:8px 18px;
+ }
+
+ .hidden{display:none !important}
+
+ footer{
+ position:relative;z-index:1;
+ text-align:center;padding:26px 32px 34px;
+ font-size:11px;letter-spacing:.16em;text-transform:uppercase;
+ color:var(--muted);
+ border-top:1px solid var(--hairline);
+ }
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+ @media(max-width:560px){
+ h1.title{font-size:38px}
+ .topbar{padding:14px 20px}
+ .topbar .tag{display:none}
+ .wrap{padding:104px 20px 48px}
+ }
+</style>
+</head>
+<body>
+ <header class="topbar">
+ <div class="wordmark">Designer Wallcoverings</div>
+ <div class="tag">The Design Era Salon</div>
+ </header>
+
+ <main class="wrap">
+ <!-- Intro / persistent header -->
+ <div class="eyebrow">A Connoisseur's Game</div>
+ <h1 class="title">Which <em>Design Era</em>?</h1>
+ <p class="subtitle">Study each interior vignette and name the period it belongs to. Eight rounds. One trained eye.</p>
+
+ <div class="scorebar">
+ <div class="stat"><div class="k">Round</div><div class="v" id="roundNum">1<span style="color:var(--muted);font-size:18px">/8</span></div></div>
+ <div class="stat"><div class="k">Score</div><div class="v" id="scoreNum">0</div></div>
+ <div class="stat best"><div class="k">Best</div><div class="v" id="bestNum">0</div></div>
+ </div>
+ <div class="rail"><span id="rail"></span></div>
+
+ <!-- Game area -->
+ <section id="gameArea" class="stage-wrap">
+ <div class="vignette" id="vignette">
+ <span class="frame-label">Interior Study № <span id="studyNo">01</span></span>
+ <div class="room" id="room"></div>
+ <div class="glow"></div>
+ <div class="vin"></div>
+ </div>
+
+ <div class="panel">
+ <div id="guessBlock">
+ <div class="prompt">Name the era</div>
+ <div class="choices" id="choices"></div>
+ </div>
+ <div id="revealBlock" class="hidden"></div>
+ </div>
+ </section>
+
+ <!-- Final -->
+ <section id="finalArea" class="final hidden"></section>
+ </main>
+
+ <footer>Designer Wallcoverings · Curated Interiors Since The Grand Tradition</footer>
+
+<script>
+(function(){
+ "use strict";
+
+ /* ---------- Era definitions (with CSS-render recipes) ---------- */
+ var ERAS = [
+ {
+ id:"victorian",
+ name:"Victorian",
+ years:"c. 1837 – 1901",
+ fact:"The Victorians pioneered mass-produced wallpaper — deep jewel tones, dense damask and floral repeats, and layered pattern-on-pattern. William Morris's <b>arts-and-crafts botanicals</b> defined the age's love of ornament.",
+ render:function(){
+ return {
+ wall:"repeating-linear-gradient(45deg,#3a1220 0 14px,#4a1a2b 14px 28px),radial-gradient(circle at 30% 30%,rgba(201,169,97,.16),transparent 40%)",
+ wallExtra:"#3d1424",
+ floor:"repeating-linear-gradient(90deg,#3a2418 0 26px,#2e1c12 26px 30px)",
+ baseboard:"#1c0f14",
+ feature:{bg:"linear-gradient(160deg,#6d2338,#3a1120)",border:"5px solid #b8933f",radius:"50% 50% 4px 4px"},
+ furniture:{bg:"linear-gradient(180deg,#7a2438,#521726)",border:"1px solid #a07a34"},
+ accent:{bg:"linear-gradient(180deg,#c9a961,#8a6d34)"},
+ accentShape:"2px"
+ };
+ }
+ },
+ {
+ id:"artdeco",
+ name:"Art Deco",
+ years:"c. 1920 – 1939",
+ fact:"Art Deco celebrated the machine age — <b>bold geometry, sunburst and chevron motifs, and lacquered luxury</b>. Black, gold and jade in symmetrical, streamlined compositions signalled glamour and modern optimism.",
+ render:function(){
+ return {
+ wall:"repeating-linear-gradient(90deg,#12181b 0 40px,#161f22 40px 80px),linear-gradient(180deg,rgba(201,169,97,.14),transparent 55%)",
+ wallExtra:"#12181b",
+ floor:"repeating-linear-gradient(90deg,#0e1214 0 20px,#1a2226 20px 40px)",
+ baseboard:"linear-gradient(90deg,#c9a961,#7d6a45)",
+ feature:{bg:"conic-gradient(from 270deg at 50% 100%,#c9a961 0 25%,#1a2226 0 50%,#c9a961 0 75%,#1a2226 0)",border:"3px solid #c9a961",radius:"4px"},
+ furniture:{bg:"linear-gradient(180deg,#12454a,#0c2e32)",border:"1px solid #c9a961"},
+ accent:{bg:"linear-gradient(180deg,#c9a961,#6d5a2e)"},
+ accentShape:"50% 50% 0 0"
+ };
+ }
+ },
+ {
+ id:"midcentury",
+ name:"Mid-Century Modern",
+ years:"c. 1945 – 1969",
+ fact:"Post-war design embraced <b>clean lines, organic curves and warm woods</b>. Atomic-age motifs, tapered legs, mustard-teal-walnut palettes and an easy indoor-outdoor optimism defined the modern home.",
+ render:function(){
+ return {
+ wall:"linear-gradient(180deg,#c98a3f,#b07530)",
+ wallExtra:"#bd7f37",
+ floor:"linear-gradient(180deg,#6b4a2c,#54371f)",
+ baseboard:"#3c2817",
+ feature:{bg:"radial-gradient(circle at 50% 50%,#2f7d6b 0 30%,#e0c07a 30% 42%,#c05a34 42% 54%,#2f7d6b 54% 66%,transparent 66%)",border:"0",radius:"50%"},
+ furniture:{bg:"linear-gradient(180deg,#d8a94e,#b98634)",border:"1px solid #8a5f2c"},
+ accent:{bg:"linear-gradient(180deg,#2f7d6b,#1f5548)"},
+ accentShape:"40% 40% 6px 6px"
+ };
+ }
+ },
+ {
+ id:"grandmillennial",
+ name:"Grandmillennial",
+ years:"c. 2015 – present",
+ fact:"A modern revival of <b>'granny chic' — chintz florals, scalloped edges, skirted tables and ruffles</b> reimagined for a new generation. Soft pinks, blues and layered pattern bring maximalist warmth back to interiors.",
+ render:function(){
+ return {
+ wall:"repeating-radial-gradient(circle at 20px 20px,rgba(176,71,46,.14) 0 6px,transparent 6px 22px),linear-gradient(180deg,#e9eef0,#dbe6e6)",
+ wallExtra:"#e6edee",
+ floor:"linear-gradient(180deg,#c9b9a6,#b6a390)",
+ baseboard:"#f5f2ea",
+ feature:{bg:"repeating-linear-gradient(45deg,#e79db0 0 10px,#f3d0da 10px 20px)",border:"5px solid #ffffff",radius:"8px 8px 40% 40%"},
+ furniture:{bg:"repeating-linear-gradient(90deg,#7fa7c4 0 12px,#a9c6dc 12px 24px)",border:"2px solid #ffffff"},
+ accent:{bg:"linear-gradient(180deg,#e79db0,#c56f84)"},
+ accentShape:"50% 50% 4px 4px"
+ };
+ }
+ }
+ ];
+
+ var ERA_META = {
+ victorian:"c. 1837 – 1901",
+ artdeco:"c. 1920 – 1939",
+ midcentury:"c. 1945 – 1969",
+ grandmillennial:"c. 2015 – now"
+ };
+
+ var TOTAL_ROUNDS = 8;
+ var BEST_KEY = "dw_design_era_best";
+
+ /* ---------- State ---------- */
+ var state = {
+ round:0,
+ score:0,
+ best:0,
+ sequence:[],
+ answered:false
+ };
+
+ /* ---------- Elements ---------- */
+ var el = {
+ room:document.getElementById("room"),
+ studyNo:document.getElementById("studyNo"),
+ choices:document.getElementById("choices"),
+ guessBlock:document.getElementById("guessBlock"),
+ revealBlock:document.getElementById("revealBlock"),
+ roundNum:document.getElementById("roundNum"),
+ scoreNum:document.getElementById("scoreNum"),
+ bestNum:document.getElementById("bestNum"),
+ rail:document.getElementById("rail"),
+ gameArea:document.getElementById("gameArea"),
+ finalArea:document.getElementById("finalArea"),
+ vignette:document.getElementById("vignette")
+ };
+
+ /* ---------- Utilities ---------- */
+ function shuffle(arr){
+ var a = arr.slice();
+ for(var i=a.length-1;i>0;i--){
+ var j = Math.floor(Math.random()*(i+1));
+ var t=a[i];a[i]=a[j];a[j]=t;
+ }
+ return a;
+ }
+ function pad(n){return n<10?("0"+n):(""+n);}
+
+ function loadBest(){
+ try{
+ var v = localStorage.getItem(BEST_KEY);
+ state.best = v ? (parseInt(v,10)||0) : 0;
+ }catch(e){ state.best = 0; }
+ }
+ function saveBest(){
+ try{ localStorage.setItem(BEST_KEY, String(state.best)); }catch(e){}
+ }
+
+ /* ---------- Build the CSS room for an era ---------- */
+ function paintRoom(era){
+ var r = era.render();
+ el.room.innerHTML = "";
+
+ var wall = document.createElement("div");
+ wall.className = "wall";
+ wall.style.background = r.wallExtra;
+ wall.style.backgroundImage = r.wall;
+
+ var baseboard = document.createElement("div");
+ baseboard.className = "baseboard";
+ baseboard.style.background = r.baseboard;
+
+ var floor = document.createElement("div");
+ floor.className = "floor";
+ floor.style.backgroundImage = r.floor;
+
+ var feature = document.createElement("div");
+ feature.className = "feature";
+ feature.style.background = r.feature.bg;
+ feature.style.border = r.feature.border;
+ feature.style.borderRadius = r.feature.radius;
+ feature.style.boxShadow = "0 10px 30px rgba(0,0,0,.4)";
+
+ var furn = document.createElement("div");
+ furn.className = "furniture";
+ furn.style.background = r.furniture.bg;
+ furn.style.border = r.furniture.border;
+ furn.style.boxShadow = "0 12px 26px rgba(0,0,0,.4)";
+
+ var lampL = document.createElement("div");
+ lampL.className = "accentobj l";
+ lampL.style.background = r.accent.bg;
+ lampL.style.borderRadius = r.accentShape;
+
+ var lampR = document.createElement("div");
+ lampR.className = "accentobj r";
+ lampR.style.background = r.accent.bg;
+ lampR.style.borderRadius = r.accentShape;
+
+ el.room.appendChild(wall);
+ el.room.appendChild(floor);
+ el.room.appendChild(baseboard);
+ el.room.appendChild(feature);
+ el.room.appendChild(lampL);
+ el.room.appendChild(lampR);
+ el.room.appendChild(furn);
+
+ /* re-trigger entrance animation */
+ el.vignette.style.animation = "none";
+ void el.vignette.offsetWidth;
+ el.vignette.style.animation = "";
+ }
+
+ /* ---------- Render a round ---------- */
+ function renderRound(){
+ state.answered = false;
+ var era = state.sequence[state.round];
+
+ el.studyNo.textContent = pad(state.round+1);
+ el.roundNum.innerHTML = (state.round+1) + '<span style="color:var(--muted);font-size:18px">/'+TOTAL_ROUNDS+'</span>';
+ el.scoreNum.textContent = state.score;
+ el.bestNum.textContent = state.best;
+ el.rail.style.width = ((state.round)/TOTAL_ROUNDS*100) + "%";
+
+ paintRoom(era);
+
+ el.revealBlock.classList.add("hidden");
+ el.revealBlock.innerHTML = "";
+ el.guessBlock.classList.remove("hidden");
+
+ el.choices.innerHTML = "";
+ var order = shuffle(ERAS);
+ order.forEach(function(opt){
+ var b = document.createElement("button");
+ b.className = "choice";
+ b.type = "button";
+ b.setAttribute("data-id", opt.id);
+ b.innerHTML = opt.name + "<small>" + ERA_META[opt.id] + "</small>";
+ b.addEventListener("click", function(){ onGuess(opt, era, b); });
+ el.choices.appendChild(b);
+ });
+ }
+
+ /* ---------- Handle a guess ---------- */
+ function onGuess(picked, actual, btnEl){
+ if(state.answered) return;
+ state.answered = true;
+
+ var correct = picked.id === actual.id;
+ if(correct) state.score++;
+
+ /* mark buttons */
+ var btns = el.choices.querySelectorAll(".choice");
+ btns.forEach(function(b){
+ b.disabled = true;
+ var id = b.getAttribute("data-id");
+ if(id === actual.id){ b.classList.add("correct"); }
+ else if(b === btnEl){ b.classList.add("wrong"); }
+ else { b.classList.add("dim"); }
+ });
+
+ el.scoreNum.textContent = state.score;
+ el.rail.style.width = ((state.round+1)/TOTAL_ROUNDS*100) + "%";
+
+ /* reveal card */
+ var isLast = (state.round+1) >= TOTAL_ROUNDS;
+ var v = correct
+ ? '<div class="verdict hit">✦ Correct — a trained eye</div>'
+ : '<div class="verdict miss">Not quite — you guessed '+picked.name+'</div>';
+
+ el.revealBlock.innerHTML =
+ '<div class="reveal">'+
+ v+
+ '<h3>'+actual.name+'</h3>'+
+ '<div class="years">'+actual.years+'</div>'+
+ '<div class="fact">'+actual.fact+'</div>'+
+ '<div class="actions">'+
+ '<button class="btn" id="nextBtn">'+(isLast?"See Results":"Next Vignette")+'</button>'+
+ '</div>'+
+ '</div>';
+
+ el.guessBlock.classList.add("hidden");
+ el.revealBlock.classList.remove("hidden");
+
+ document.getElementById("nextBtn").addEventListener("click", function(){
+ if(isLast){ showFinal(); }
+ else { state.round++; renderRound(); }
+ });
+ }
+
+ /* ---------- Final screen ---------- */
+ function gradeFor(score){
+ var pct = score/TOTAL_ROUNDS;
+ if(pct === 1) return {g:"Curator", note:"A flawless eye. The archive is yours."};
+ if(pct >= .75) return {g:"Connoisseur", note:"Exceptional taste and a discerning eye."};
+ if(pct >= .5) return {g:"Aesthete", note:"A fine sense of period and place."};
+ if(pct >= .25) return {g:"Apprentice", note:"The eye is training. Study on."};
+ return {g:"Novice", note:"Every collector begins somewhere."};
+ }
+
+ function showFinal(){
+ var newBest = false;
+ if(state.score > state.best){
+ state.best = state.score;
+ saveBest();
+ newBest = true;
+ }
+ el.bestNum.textContent = state.best;
+ el.rail.style.width = "100%";
+
+ var gr = gradeFor(state.score);
+
+ el.gameArea.classList.add("hidden");
+ el.finalArea.classList.remove("hidden");
+ el.finalArea.innerHTML =
+ '<div class="eyebrow" style="text-align:center">The Verdict</div>'+
+ '<div class="grade">'+gr.g+'</div>'+
+ '<div class="finalscore">'+state.score+' <span style="color:var(--muted);font-size:24px">/ '+TOTAL_ROUNDS+'</span></div>'+
+ '<p>'+gr.note+'</p>'+
+ (newBest ? '<div class="newbest">✦ New Personal Best</div>' : '<p style="margin-top:8px">Personal best · '+state.best+' / '+TOTAL_ROUNDS+'</p>')+
+ '<div class="actions" style="justify-content:center;margin-top:26px">'+
+ '<button class="btn" id="restartBtn">Play Again</button>'+
+ '</div>';
+
+ document.getElementById("restartBtn").addEventListener("click", startGame);
+ }
+
+ /* ---------- Start / restart ---------- */
+ function buildSequence(){
+ /* 8 rounds: two shuffled passes of the four eras so each appears twice, order randomized */
+ var seq = shuffle(ERAS).concat(shuffle(ERAS));
+ /* avoid the same era back-to-back at the seam */
+ if(seq.length>4 && seq[3].id === seq[4].id){
+ var tmp = seq[4]; seq[4] = seq[5]; seq[5] = tmp;
+ }
+ return seq;
+ }
+
+ function startGame(){
+ state.round = 0;
+ state.score = 0;
+ state.answered = false;
+ state.sequence = buildSequence();
+
+ el.finalArea.classList.add("hidden");
+ el.finalArea.innerHTML = "";
+ el.gameArea.classList.remove("hidden");
+
+ renderRound();
+ }
+
+ /* ---------- Init ---------- */
+ loadBest();
+ el.bestNum.textContent = state.best;
+ startGame();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/claude-code.png b/data/artifacts/0b9bb5066c06/claude-code.png
new file mode 100644
index 0000000..90f1a49
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/claude-code.png differ
diff --git a/data/artifacts/0b9bb5066c06/gemma3-12b.html b/data/artifacts/0b9bb5066c06/gemma3-12b.html
new file mode 100644
index 0000000..c5d381c
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/gemma3-12b.html
@@ -0,0 +1,245 @@
+<!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-color: #faf8f4; /* ivory-gallery */
+ --surface-color: #ffffff;
+ --text-color: #1c1a17;
+ --muted-color: #9b948a;
+ --accent-color-1: #b0472e;
+ --accent-color-2: #2f4c39;
+ --font-display: 'Playfair Display', Georgia, serif;
+ --font-body: apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ }
+
+ body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: var(--font-body);
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ .top-bar {
+ background-color: var(--surface-color);
+ padding: 16px;
+ text-align: left;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ }
+
+ .wordmark {
+ font-family: var(--font-display);
+ font-size: 2.5em; /* Adjusted for better visual impact */
+ text-transform: uppercase;
+ letter-spacing: .18em;
+ margin: 0;
+ }
+
+ .container {
+ padding: 96px;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .vignette {
+ width: 100%;
+ height: 400px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ margin-bottom: 32px;
+ }
+
+ .options {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 24px;
+ }
+
+ .option-button {
+ background-color: var(--surface-color);
+ border: 1px solid var(--muted-color);
+ padding: 16px 24px;
+ border-radius: 14px;
+ cursor: pointer;
+ transition: background-color 0.2s ease, box-shadow 0.2s ease;
+ }
+
+ .option-button:hover {
+ background-color: #f9f9f9; /* Lighter shade on hover */
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+ }
+
+ .feedback {
+ text-align: center;
+ font-size: 1.2em;
+ margin-top: 32px;
+ }
+
+ .fun-fact {
+ font-style: italic;
+ color: var(--muted-color);
+ margin-top: 8px;
+ }
+
+
+ .score {
+ text-align: center;
+ font-size: 1.5em;
+ margin-bottom: 32px;
+ }
+
+ #restart-button {
+ background-color: var(--accent-color-1);
+ color: white;
+ border: none;
+ padding: 16px 24px;
+ border-radius: 14px;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+ margin-top: 32px;
+ }
+
+ #restart-button:hover {
+ background-color: darken(var(--accent-color-1), 10%); /* Darken on hover */
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+
+ </style>
+</head>
+<body>
+
+ <div class="top-bar">
+ <h1 class="wordmark">DESIGNER WALLCOVERINGS</h1>
+ </div>
+
+ <div class="container" id="gameContainer">
+ <div class="score" id="scoreDisplay">Score: 0</div>
+ <div class="vignette" id="vignetteImage"></div>
+ <div class="options" id="optionButtons"></div>
+ <div class="feedback" id="feedbackMessage"></div>
+ <div class="fun-fact" id="funFactDisplay"></div>
+ <button id="restart-button">Restart</button>
+ </div>
+
+ <script>
+ const eras = [
+ { name: "Victorian", image: "victorian.jpg", fact: "Victorian interiors often featured dark, rich colors and ornate details." },
+ { name: "Art Deco", image: "art_deco.jpg", fact: "Art Deco emphasized geometric shapes, luxurious materials like chrome and velvet, and a sense of glamour." },
+ { name: "Mid-Century Modern", image: "mid_century.jpg", fact: "Mid-Century Modern design focused on clean lines, organic forms, and functionality." },
+ { name: "Grandmillennial", image: "grandmillennial.jpg", fact: "Grandmillennial style blends traditional elements like chintz and florals with a modern sensibility." }
+ ];
+
+ let currentEraIndex = 0;
+ let score = 0;
+ let round = 1;
+ let highScore = localStorage.getItem("highScore") || 0;
+
+
+ function setVignette() {
+ const vignetteImage = document.getElementById("vignetteImage");
+ vignetteImage.style.backgroundImage = `url(${eras[currentEraIndex].image})`;
+ }
+
+ function setOptions() {
+ const optionButtonsDiv = document.getElementById("optionButtons");
+ optionButtonsDiv.innerHTML = ""; // Clear previous options
+
+ const correctEra = eras[currentEraIndex];
+
+ let availableEras = [...eras];
+ availableEras.splice(availableEras.indexOf(correctEra), 1); // Remove the current era to prevent it from appearing as an option
+
+ for (let i = 0; i < 3; i++) {
+ const randomIndex = Math.floor(Math.random() * availableEras.length);
+ const wrongEra = availableEras[randomIndex];
+ availableEras.splice(randomIndex, 1); // Remove the selected era to ensure uniqueness
+ }
+
+ let allOptions = [correctEra, ...availableEras];
+ allOptions.sort(() => Math.random() - 0.5); // Shuffle options
+
+
+ allOptions.forEach(era => {
+ const button = document.createElement("button");
+ button.classList.add("option-button");
+ button.textContent = era.name;
+
+ button.addEventListener("click", () => {
+ checkAnswer(era);
+ });
+
+ optionButtonsDiv.appendChild(button);
+ });
+ }
+
+
+ function checkAnswer(selectedEra) {
+ const feedbackMessage = document.getElementById("feedbackMessage");
+ const funFactDisplay = document.getElementById("funFactDisplay");
+ if (selectedEra.name === eras[currentEraIndex].name) {
+ score++;
+ feedbackMessage.textContent = "Correct!";
+ funFactDisplay.textContent = eras[currentEraIndex].fact;
+ } else {
+ feedbackMessage.textContent = "Incorrect.";
+ funFactDisplay.textContent = "";
+ }
+
+ document.getElementById("scoreDisplay").textContent = `Score: ${score}`;
+
+ setTimeout(() => {
+ nextRound();
+ }, 1500); // Delay before showing next round
+ }
+
+
+ function nextRound() {
+ round++;
+ currentEraIndex = (currentEraIndex + 1) % eras.length;
+ setVignette();
+ setOptions();
+ feedbackMessage.textContent = "";
+ funFactDisplay.textContent = "";
+
+ //animate vignette fade in on new round
+ document.getElementById("vignetteImage").classList.add('fadeUp');
+ }
+
+
+
+ function restartGame() {
+ score = 0;
+ round = 1;
+ currentEraIndex = 0;
+ highScore = localStorage.getItem("highScore") || 0; // Reset high score on restart
+
+ document.getElementById("scoreDisplay").textContent = `Score: ${score}`;
+ setVignette();
+ setOptions();
+ feedbackMessage.textContent = "";
+ funFactDisplay.textContent = "";
+ }
+
+
+ // Initialize game
+ window.onload = () => {
+ setVignette();
+ setOptions();
+
+ document.getElementById("restart-button").addEventListener("click", restartGame);
+ };
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/gemma3-12b.png b/data/artifacts/0b9bb5066c06/gemma3-12b.png
new file mode 100644
index 0000000..574bcb4
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/gemma3-12b.png differ
diff --git a/data/artifacts/0b9bb5066c06/gpt.html b/data/artifacts/0b9bb5066c06/gpt.html
new file mode 100644
index 0000000..69eaf7c
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/gpt.html
@@ -0,0 +1,1472 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Which Design Era? – Designer Wallcoverings</title>
+<style>
+:root {
+ /* Palette from luxe-noir */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #14141a;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961; /* single metallic gold */
+ --accent-deep: #7d6a45;
+
+ --border-subtle: rgba(201,169,97,0.24);
+ --border-strong: rgba(245,242,234,0.08);
+
+ /* Typography */
+ --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
+ --font-body: "Avenir Next", "Century Gothic", Futura, "Segoe UI", sans-serif;
+
+ --fs-caption: 12px;
+ --fs-label: 11px;
+ --fs-body: 16px;
+ --fs-lead: 21px;
+ --fs-h3: 28px;
+ --fs-h2: 38px;
+ --fs-h1: 50px;
+
+ --radius-card: 18px;
+ --radius-pill: 999px;
+
+ --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.55);
+ --shadow-subtle: 0 10px 30px rgba(0,0,0,0.45);
+
+ --easing-swift-out: cubic-bezier(.22,.9,.24,1);
+
+ --vignette-size: 320px;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top, #181820 0, #050507 55%, #000000 100%);
+ color: var(--text);
+ font-family: var(--font-body);
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Top bar */
+.app-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 64px;
+ padding: 0 32px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ backdrop-filter: blur(18px);
+ background: linear-gradient(to right, rgba(13,13,15,0.95), rgba(23,23,28,0.94));
+ border-bottom: 1px solid rgba(201,169,97,0.3);
+ z-index: 20;
+}
+
+.app-header-left {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+}
+
+.wordmark {
+ font-family: var(--font-display);
+ font-size: 13px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ white-space: nowrap;
+}
+
+.wordmark::before {
+ content: "";
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ border-radius: 999px;
+ margin-right: 12px;
+ background: radial-gradient(circle at 30% 15%, #fff7d9 0, var(--accent) 35%, #7d5c37 72%, #2b1b0c 100%);
+ box-shadow: 0 0 18px rgba(201,169,97,0.75);
+ vertical-align: middle;
+}
+
+.app-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 7px 14px;
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(245,242,234,0.14);
+ background: linear-gradient(135deg, rgba(23,23,28,0.9), rgba(13,13,15,0.95));
+ color: var(--muted);
+ font-size: 11px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.app-pill span {
+ font-size: 10px;
+}
+
+.app-pill-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 15%, #fff 0, var(--accent) 45%, var(--accent-deep) 100%);
+}
+
+/* Main layout */
+.app-shell {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ padding: 96px 24px 32px; /* leave space for header */
+}
+
+.main-card {
+ width: 100%;
+ max-width: 1120px;
+ display: grid;
+ grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+ gap: 32px;
+ padding: 28px 28px 26px;
+ background: radial-gradient(circle at top left, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.02) 42%, transparent 70%), rgba(13,13,15,0.94);
+ border-radius: 26px;
+ border: 1px solid var(--border-subtle);
+ box-shadow: var(--shadow-soft);
+ position: relative;
+ overflow: hidden;
+}
+
+@media (max-width: 900px) {
+ .main-card {
+ grid-template-columns: minmax(0, 1fr);
+ padding: 22px 18px 20px;
+ }
+ :root {
+ --vignette-size: 260px;
+ }
+}
+
+.main-card::before {
+ content: "";
+ position: absolute;
+ inset: -80%;
+ background:
+ radial-gradient(circle at 10% 0, rgba(201,169,97,0.16) 0, transparent 52%),
+ radial-gradient(circle at 95% 20%, rgba(255,255,255,0.06) 0, transparent 50%);
+ opacity: 0.85;
+ pointer-events: none;
+}
+
+/* Left column: vignette */
+.vignette-panel {
+ position: relative;
+ z-index: 1;
+ padding: 24px 22px;
+ border-radius: 20px;
+ background: radial-gradient(circle at top, #22222b 0, #121219 45%, #09090d 100%);
+ border: 1px solid rgba(245,242,234,0.06);
+ box-shadow: var(--shadow-subtle);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 18px;
+}
+
+.vignette-header {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.vignette-label {
+ font-family: var(--font-display);
+ font-size: 13px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.round-pill {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(245,242,234,0.12);
+ padding: 5px 12px;
+}
+
+/* Scene container */
+.vignette-scene-shell {
+ display: flex;
+ justify-content: center;
+ padding: 6px 0 4px;
+}
+
+.vignette-scene {
+ width: var(--vignette-size);
+ height: calc(var(--vignette-size) * 0.78);
+ border-radius: 18px;
+ position: relative;
+ overflow: hidden;
+ background: linear-gradient(to bottom, #201f26 0, #14131b 40%, #08070a 100%);
+ border: 1px solid rgba(245,242,234,0.1);
+ box-shadow: 0 26px 60px rgba(0,0,0,0.75);
+ transform-origin: center;
+ transition: transform 260ms var(--easing-swift-out), box-shadow 260ms var(--easing-swift-out), border-color 260ms var(--easing-swift-out);
+}
+
+.vignette-scene.is-revealed {
+ transform: translateY(-2px) scale(1.012);
+ border-color: rgba(201,169,97,0.5);
+ box-shadow: 0 32px 70px rgba(0,0,0,0.9);
+}
+
+/* Shared scene primitives */
+.scene-wall {
+ position: absolute;
+ inset: 0 0 28%;
+ background: linear-gradient(to bottom, #27242e 0, #18171f 46%, #121019 100%);
+}
+
+.scene-floor {
+ position: absolute;
+ left: -8%;
+ right: -8%;
+ bottom: -20%;
+ height: 55%;
+ background:
+ linear-gradient(135deg, rgba(245,242,234,0.04) 0, transparent 35%),
+ linear-gradient(to right, #473629, #2d2018 30%, #1b1511 80%);
+ transform: skewY(-6deg);
+ transform-origin: top left;
+ box-shadow: 0 -8px 22px rgba(0,0,0,0.8);
+}
+
+/* era-specific structural overrides and details, toggled via body data attribute */
+.vignette-scene .piece {
+ position: absolute;
+ box-sizing: border-box;
+}
+
+/* Lighting aura */
+.scene-glow {
+ position: absolute;
+ inset: 12% 8% 28%;
+ background: radial-gradient(circle at 50% 0, rgba(250,247,235,0.34) 0, rgba(201,169,97,0.06) 35%, transparent 68%);
+ mix-blend-mode: screen;
+ opacity: 0.9;
+}
+
+/* Victorian */
+body[data-era="Victorian"] .scene-wall {
+ background:
+ repeating-linear-gradient(-45deg, #1b171b 0, #1b171b 6px, #151017 6px, #151017 12px),
+ radial-gradient(circle at top, #2e2832 0, #141019 60%);
+}
+body[data-era="Victorian"] .scene-wall::before {
+ content: "";
+ position: absolute;
+ inset: 18px 22px 38%;
+ border-radius: 18px;
+ border: 1px solid rgba(201,169,97,0.6);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.7);
+}
+body[data-era="Victorian"] .scene-wall::after {
+ content: "";
+ position: absolute;
+ inset: 26px 30px 41%;
+ border-radius: 14px;
+ border: 1px solid rgba(201,169,97,0.25);
+}
+body[data-era="Victorian"] .scene-floor {
+ background:
+ linear-gradient(120deg, rgba(201,169,97,0.18) 0, transparent 30%),
+ repeating-linear-gradient(90deg, #3c2920 0, #3c2920 9px, #2a1b14 9px, #2a1b14 18px);
+}
+
+/* Victorian Settee */
+body[data-era="Victorian"] .sofa {
+ left: 14%;
+ right: 14%;
+ bottom: 6%;
+ height: 32%;
+ border-radius: 60px 60px 26px 26px;
+ background:
+ radial-gradient(circle at 20% 0, #f3e1b1 0, #cfa665 32%, #8e5832 75%, #3b1e14 100%);
+ box-shadow: 0 12px 24px rgba(0,0,0,0.75);
+}
+body[data-era="Victorian"] .sofa::before {
+ content: "";
+ position: absolute;
+ inset: 18% 16% 40%;
+ border-radius: 44px;
+ background:
+ repeating-linear-gradient(45deg, rgba(53,21,18,0.92) 0, rgba(53,21,18,0.92) 8px, rgba(28,10,9,0.96) 8px, rgba(28,10,9,0.96) 16px);
+ box-shadow: inset 0 0 0 2px rgba(243,222,178,0.25);
+}
+body[data-era="Victorian"] .sofa::after {
+ content: "";
+ position: absolute;
+ left: 8%;
+ right: 8%;
+ bottom: -14%;
+ height: 28%;
+ border-radius: 26px;
+ background: linear-gradient(to bottom, #2c1b11, #0b0604);
+ box-shadow: 0 18px 26px rgba(0,0,0,0.9);
+}
+
+/* Victorian tufting hints */
+body[data-era="Victorian"] .tuft {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: radial-gradient(circle, #fbe4ba 0, #c18b49 50%, #5a3116 100%);
+ box-shadow: 0 0 3px rgba(0,0,0,0.7);
+}
+body[data-era="Victorian"] .tuft:nth-child(1) { top: 34%; left: 32%; }
+body[data-era="Victorian"] .tuft:nth-child(2) { top: 34%; left: 50%; }
+body[data-era="Victorian"] .tuft:nth-child(3) { top: 34%; left: 68%; }
+
+/* Victorian Lamp */
+body[data-era="Victorian"] .lamp {
+ left: 72%;
+ bottom: 28%;
+ width: 9%;
+ height: 48%;
+}
+body[data-era="Victorian"] .lamp::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -40%;
+ right: -15%;
+ height: 40%;
+ border-radius: 50% 50% 35% 35%;
+ background:
+ radial-gradient(circle at 50% 0, #fffbea 0, #e6c46d 35%, #b5843e 80%);
+ box-shadow: 0 12px 24px rgba(0,0,0,0.8);
+}
+body[data-era="Victorian"] .lamp::after {
+ content: "";
+ position: absolute;
+ top: 42%;
+ left: 26%;
+ width: 19%;
+ height: 34%;
+ background: linear-gradient(to bottom, #f9f1d5, #b58b48);
+ box-shadow: 0 6px 6px rgba(0,0,0,0.7);
+}
+
+/* Victorian frame art */
+body[data-era="Victorian"] .art-frame {
+ top: 18%;
+ left: 16%;
+ width: 22%;
+ height: 28%;
+ border-radius: 14px;
+ border: 3px solid rgba(201,169,97,0.85);
+ box-shadow: 0 4px 10px rgba(0,0,0,0.9);
+ background:
+ linear-gradient(135deg, #39211a, #1b0b08);
+}
+body[data-era="Victorian"] .art-frame::before {
+ content: "";
+ position: absolute;
+ inset: 11%;
+ border-radius: 10px;
+ background: radial-gradient(circle at 10% 10%, #f9e3c5 0, #84502d 40%, #2b1210 100%);
+}
+
+/* Art Deco */
+body[data-era="Art Deco"] .scene-wall {
+ background:
+ radial-gradient(circle at top, #302832 0, #141019 60%);
+}
+body[data-era="Art Deco"] .scene-wall::before {
+ content: "";
+ position: absolute;
+ inset: 12% 16% 42%;
+ background-image:
+ conic-gradient(from 0deg, rgba(201,169,97,0.6) 0 3deg, transparent 3deg 15deg),
+ conic-gradient(from 18deg, rgba(201,169,97,0.35) 0 2deg, transparent 2deg 16deg);
+ mask-image: radial-gradient(circle at bottom, #000 0, #000 68%, transparent 69%);
+ opacity: 0.9;
+}
+
+/* Deco Chair */
+body[data-era="Art Deco"] .chair {
+ left: 18%;
+ bottom: 8%;
+ width: 32%;
+ height: 38%;
+}
+body[data-era="Art Deco"] .chair::before {
+ content: "";
+ position: absolute;
+ inset: 10% 4% 42%;
+ border-radius: 40px 40px 18px 18px;
+ background:
+ linear-gradient(135deg, #f4f0df, #d3c19b 40%, #b19162 100%);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.8);
+}
+body[data-era="Art Deco"] .chair::after {
+ content: "";
+ position: absolute;
+ left: 6%;
+ right: 6%;
+ bottom: 0;
+ height: 36%;
+ border-radius: 26px 26px 18px 18px;
+ background:
+ linear-gradient(to right, #f5f0de, #c9a865 50%, #f5f0de 100%);
+}
+
+/* Deco legs */
+body[data-era="Art Deco"] .chair-leg {
+ bottom: -12%;
+ width: 10%;
+ height: 40%;
+ background: linear-gradient(to bottom, #caa962, #7a5a3b);
+ border-radius: 0 0 40px 40px;
+ box-shadow: 0 6px 8px rgba(0,0,0,0.75);
+}
+body[data-era="Art Deco"] .chair-leg.left { left: 22%; }
+body[data-era="Art Deco"] .chair-leg.right { right: 22%; }
+
+/* Deco Console */
+body[data-era="Art Deco"] .console {
+ right: 14%;
+ bottom: 10%;
+ width: 30%;
+ height: 32%;
+ border-radius: 14px;
+ background:
+ linear-gradient(120deg, #252029, #151018);
+ border: 1px solid rgba(245,242,234,0.08);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.85);
+}
+body[data-era="Art Deco"] .console::before {
+ content: "";
+ position: absolute;
+ inset: 10% 10% 46%;
+ border-radius: 10px;
+ background:
+ linear-gradient(to right, rgba(201,169,97,0.7), rgba(201,169,97,0.3));
+}
+body[data-era="Art Deco"] .console::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ bottom: -22%;
+ transform: translateX(-50%);
+ width: 36%;
+ height: 32%;
+ border-radius: 0 0 40px 40px;
+ background: linear-gradient(to bottom, #c7a763, #7e5c36);
+ box-shadow: 0 8px 14px rgba(0,0,0,0.9);
+}
+
+/* Deco Sunburst Mirror */
+body[data-era="Art Deco"] .sunburst {
+ top: 18%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 28%;
+ height: 36%;
+}
+body[data-era="Art Deco"] .sunburst::before {
+ content: "";
+ position: absolute;
+ inset: 18%;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 30% 20%, #fff 0, #f9f5e5 22%, #c7a763 60%, #4f351d 100%);
+ box-shadow: 0 0 24px rgba(201,169,97,0.6);
+}
+body[data-era="Art Deco"] .sunburst::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ border: 1px solid rgba(201,169,97,0.4);
+ background-image:
+ conic-gradient(from 0deg, rgba(201,169,97,0.8) 0 6deg, transparent 6deg 12deg);
+ mask-image: radial-gradient(circle, transparent 0 52%, #000 54%);
+}
+
+/* Mid-Century Modern */
+body[data-era="Mid-Century Modern"] .scene-wall {
+ background:
+ radial-gradient(circle at top left, #323842 0, #1b2026 45%, #14151c 60%, #0c0d13 100%);
+}
+body[data-era="Mid-Century Modern"] .scene-floor {
+ background:
+ linear-gradient(120deg, rgba(201,169,97,0.2) 0, transparent 40%),
+ repeating-linear-gradient(90deg, #3e2f25 0, #3e2f25 12px, #241b14 12px, #241b14 24px);
+}
+
+/* MCM Sofa */
+body[data-era="Mid-Century Modern"] .sofa {
+ left: 12%;
+ right: 12%;
+ bottom: 12%;
+ height: 30%;
+ border-radius: 18px;
+ background:
+ linear-gradient(135deg, #f3f2e6, #d0c9b0 55%, #9c8360 100%);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.85);
+}
+body[data-era="Mid-Century Modern"] .sofa::before {
+ content: "";
+ position: absolute;
+ inset: 12% 8% 40%;
+ background:
+ repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 4px, transparent 4px, transparent 14px);
+ opacity: 0.75;
+}
+body[data-era="Mid-Century Modern"] .sofa::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -22%;
+ height: 34%;
+ border-radius: 18px;
+ background: linear-gradient(to bottom, #e4ddca, #90734f);
+}
+
+/* tapered legs */
+body[data-era="Mid-Century Modern"] .mcm-leg {
+ bottom: -28%;
+ width: 8%;
+ height: 46%;
+ background: linear-gradient(to bottom, #d5c9ae, #815f3a);
+ border-radius: 0 0 999px 999px;
+ box-shadow: 0 6px 10px rgba(0,0,0,0.85);
+}
+body[data-era="Mid-Century Modern"] .mcm-leg.left { left: 20%; }
+body[data-era="Mid-Century Modern"] .mcm-leg.right { right: 20%; }
+
+/* MCM sideboard & art */
+body[data-era="Mid-Century Modern"] .sideboard {
+ right: 12%;
+ bottom: 18%;
+ width: 26%;
+ height: 22%;
+ border-radius: 4px;
+ background:
+ linear-gradient(135deg, #3d2b1f, #1c130f);
+ box-shadow: 0 10px 16px rgba(0,0,0,0.85);
+}
+body[data-era="Mid-Century Modern"] .sideboard::before {
+ content: "";
+ position: absolute;
+ inset: 18% 14% 40%;
+ background:
+ repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 6px, transparent 6px, transparent 12px);
+}
+body[data-era="Mid-Century Modern"] .sideboard::after {
+ content: "";
+ position: absolute;
+ left: 20%;
+ bottom: -40%;
+ width: 60%;
+ height: 50%;
+ background: linear-gradient(to bottom, #d4c8b1, #7a5733);
+ border-radius: 0 0 999px 999px;
+}
+
+/* MCM art */
+body[data-era="Mid-Century Modern"] .mcm-art {
+ top: 18%;
+ left: 16%;
+ width: 24%;
+ height: 34%;
+ border-radius: 10px;
+ background: #121219;
+ box-shadow: 0 6px 14px rgba(0,0,0,0.85);
+}
+body[data-era="Mid-Century Modern"] .mcm-art::before {
+ content: "";
+ position: absolute;
+ inset: 12%;
+ border-radius: 8px;
+ background:
+ radial-gradient(circle at 25% 25%, #f0e6cf 0, #d29a54 34%, transparent 38%),
+ radial-gradient(circle at 75% 65%, #f6f1dd 0, #acc9ba 30%, transparent 40%),
+ linear-gradient(135deg, rgba(201,169,97,0.35), transparent 50%),
+ linear-gradient(200deg, rgba(236,116,73,0.7) 0, transparent 50%);
+}
+
+/* MCM pendant */
+body[data-era="Mid-Century Modern"] .pendant {
+ top: 14%;
+ left: 60%;
+ width: 12%;
+ height: 38%;
+}
+body[data-era="Mid-Century Modern"] .pendant::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 48%;
+ width: 2px;
+ height: 22%;
+ background: linear-gradient(to bottom, #555, #222);
+}
+body[data-era="Mid-Century Modern"] .pendant::after {
+ content: "";
+ position: absolute;
+ top: 24%;
+ left: 0;
+ right: 0;
+ height: 44%;
+ border-radius: 50% 50% 40% 40%;
+ background:
+ radial-gradient(circle at 30% 15%, #fff 0, #f7f1df 30%, #d3a95d 70%, #71532e 100%);
+ box-shadow: 0 10px 18px rgba(0,0,0,0.8);
+}
+
+/* Grandmillennial */
+body[data-era="Grandmillennial"] .scene-wall {
+ background:
+ radial-gradient(circle at top left, #424052 0, #252638 50%, #151521 80%),
+ repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 3px, transparent 3px, transparent 8px);
+}
+body[data-era="Grandmillennial"] .scene-wall::before {
+ content: "";
+ position: absolute;
+ inset: 16% 18% 38%;
+ border-radius: 20px;
+ border: 1px solid rgba(245,242,234,0.32);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.75);
+ background:
+ radial-gradient(circle at 20% 20%, rgba(245,242,234,0.18) 0, transparent 30%),
+ radial-gradient(circle at 80% 50%, rgba(245,242,234,0.14) 0, transparent 34%);
+}
+
+/* floral hint */
+body[data-era="Grandmillennial"] .scene-wall::after {
+ content: "";
+ position: absolute;
+ inset: 22% 22% 42%;
+ background-image:
+ radial-gradient(circle, rgba(245,242,234,0.24) 0, transparent 42%),
+ radial-gradient(circle at 70% 30%, rgba(245,242,234,0.18) 0, transparent 40%);
+ mix-blend-mode: screen;
+ opacity: 0.45;
+}
+
+/* skirted sofa */
+body[data-era="Grandmillennial"] .sofa {
+ left: 12%;
+ right: 12%;
+ bottom: 12%;
+ height: 34%;
+ border-radius: 28px 28px 10px 10px;
+ background:
+ linear-gradient(135deg, #f6f3ea, #dad0c4 45%, #b99a7b 100%);
+ box-shadow: 0 12px 22px rgba(0,0,0,0.85);
+}
+body[data-era="Grandmillennial"] .sofa::before {
+ content: "";
+ position: absolute;
+ inset: 12% 8% 40%;
+ border-radius: 20px 20px 0 0;
+ background:
+ repeating-linear-gradient(45deg, rgba(141,113,154,0.85) 0, rgba(141,113,154,0.85) 6px, rgba(210,185,196,0.95) 6px, rgba(210,185,196,0.95) 12px);
+ opacity: 0.8;
+}
+body[data-era="Grandmillennial"] .sofa::after {
+ content: "";
+ position: absolute;
+ left: -2%;
+ right: -2%;
+ bottom: -26%;
+ height: 46%;
+ border-radius: 0 0 20px 20px;
+ background:
+ repeating-linear-gradient(90deg, #f5f0e8 0, #f5f0e8 9px, #dfd3c4 9px, #dfd3c4 18px);
+}
+
+/* side table + lamp */
+body[data-era="Grandmillennial"] .side-table {
+ right: 16%;
+ bottom: 20%;
+ width: 18%;
+ height: 24%;
+ border-radius: 40px;
+ background:
+ linear-gradient(to bottom, #f5f0e8, #d6c6b7);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.85);
+}
+body[data-era="Grandmillennial"] .side-table::before {
+ content: "";
+ position: absolute;
+ top: -42%;
+ left: 18%;
+ right: 18%;
+ height: 58%;
+ border-radius: 999px 999px 70px 70px;
+ background:
+ radial-gradient(circle at 30% 18%, #fff 0, #f6f2e8 32%, #d6c2af 70%, #9a7351 100%);
+ box-shadow: 0 12px 22px rgba(0,0,0,0.85);
+}
+
+/* framed art pair */
+body[data-era="Grandmillennial"] .gm-art-left,
+body[data-era="Grandmillennial"] .gm-art-right {
+ top: 18%;
+ width: 18%;
+ height: 30%;
+ border-radius: 14px;
+ background: #121219;
+ box-shadow: 0 6px 14px rgba(0,0,0,0.85);
+}
+body[data-era="Grandmillennial"] .gm-art-left { left: 18%; }
+body[data-era="Grandmillennial"] .gm-art-right { left: 40%; }
+
+body[data-era="Grandmillennial"] .gm-art-left::before,
+body[data-era="Grandmillennial"] .gm-art-right::before {
+ content: "";
+ position: absolute;
+ inset: 10%;
+ border-radius: 10px;
+ background:
+ radial-gradient(circle at 30% 20%, #fefaf4 0, #f1c6c1 26%, transparent 40%),
+ radial-gradient(circle at 70% 80%, #fefaf4 0, #b2c7e8 30%, transparent 44%),
+ linear-gradient(145deg, rgba(166,133,189,0.7), transparent 55%);
+}
+
+/* vignette caption */
+.vignette-caption {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: 10px;
+ color: var(--muted);
+ font-size: 12px;
+}
+
+.vignette-caption span.emphasis {
+ color: var(--accent);
+}
+
+/* Right column: controls */
+.control-panel {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 6px 2px 2px;
+}
+
+/* Game meta */
+.meta-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 4px;
+}
+
+.meta-label {
+ font-size: var(--fs-caption);
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--muted);
+}
+
+.meta-stats {
+ display: inline-flex;
+ gap: 8px;
+}
+
+.stat-pill {
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(245,242,234,0.12);
+ padding: 4px 10px 5px;
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.stat-pill strong {
+ color: var(--accent);
+ font-weight: 600;
+}
+
+/* Headline */
+h1 {
+ margin: 0 0 6px;
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ line-height: 1.05;
+}
+
+.lead {
+ margin: 0 0 10px;
+ font-size: var(--fs-lead);
+ color: rgba(245,242,234,0.92);
+}
+
+/* Score line */
+.score-line {
+ font-size: 13px;
+ color: var(--muted);
+ margin-bottom: 12px;
+}
+
+.score-line strong {
+ color: var(--accent);
+}
+
+/* Buttons */
+.button-group {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+ margin: 8px 0 8px;
+}
+
+button {
+ font-family: var(--font-body);
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.guess-btn {
+ position: relative;
+ padding: 12px 12px 11px;
+ border-radius: 14px;
+ border: 1px solid rgba(245,242,234,0.12);
+ background: linear-gradient(135deg, rgba(24,24,30,0.96), rgba(15,15,19,0.96));
+ color: var(--text);
+ text-align: left;
+ font-size: 13px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ overflow: hidden;
+ transition:
+ border-color 200ms var(--easing-swift-out),
+ background 200ms var(--easing-swift-out),
+ transform 200ms var(--easing-swift-out),
+ box-shadow 200ms var(--easing-swift-out),
+ color 200ms var(--easing-swift-out),
+ opacity 130ms var(--easing-swift-out);
+}
+
+.guess-btn::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.24) 0, transparent 40%);
+ opacity: 0;
+ transition: opacity 220ms var(--easing-swift-out);
+}
+
+.guess-btn span {
+ position: relative;
+ z-index: 1;
+}
+
+.guess-btn:hover {
+ border-color: rgba(201,169,97,0.55);
+ transform: translateY(-1px);
+ background: linear-gradient(135deg, rgba(31,29,35,0.98), rgba(10,10,12,0.98));
+ box-shadow: 0 12px 26px rgba(0,0,0,0.75);
+}
+.guess-btn:hover::before {
+ opacity: 1;
+}
+
+.guess-btn.correct {
+ border-color: rgba(201,169,97,0.9);
+ background: linear-gradient(135deg, rgba(201,169,97,0.18), rgba(18,17,19,0.98));
+ box-shadow: 0 14px 28px rgba(0,0,0,0.85);
+}
+.guess-btn.wrong {
+ border-color: rgba(189,88,73,0.8);
+ background: linear-gradient(135deg, rgba(80,22,22,0.86), rgba(12,7,9,0.98));
+ color: #fbeae2;
+}
+
+/* disabled state */
+button:disabled {
+ cursor: default;
+ opacity: 0.78;
+}
+
+/* Feedback + fact */
+.feedback {
+ min-height: 48px;
+ font-size: 13px;
+ color: var(--muted);
+ margin: 4px 0 0;
+}
+
+.feedback span.label {
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ font-size: 11px;
+ display: inline-block;
+ margin-bottom: 3px;
+}
+
+.feedback span.correct-label {
+ color: var(--accent);
+}
+
+.feedback span.wrong-label {
+ color: #f5a08b;
+}
+
+.fun-fact {
+ margin-top: 4px;
+ color: rgba(245,242,234,0.92);
+}
+
+/* Progress bar */
+.progress-shell {
+ margin-top: 10px;
+}
+
+.progress-track {
+ position: relative;
+ width: 100%;
+ height: 3px;
+ border-radius: 999px;
+ background: rgba(245,242,234,0.13);
+ overflow: hidden;
+}
+
+.progress-fill {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 0%;
+ background: linear-gradient(90deg, #f8e9c5, var(--accent));
+ border-radius: 999px;
+ transition: width 260ms var(--easing-swift-out);
+}
+
+/* Footer controls */
+.footer-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ margin-top: 14px;
+ padding-top: 10px;
+ border-top: 1px solid var(--border-strong);
+ font-size: 12px;
+ color: var(--muted);
+}
+
+.footer-row strong {
+ color: var(--accent);
+}
+
+.subtle-label {
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ font-size: 11px;
+}
+
+.restart-btn {
+ padding: 7px 16px 8px;
+ border-radius: var(--radius-pill);
+ border: 1px solid rgba(245,242,234,0.16);
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.26) 0, rgba(24,22,26,0.98) 48%);
+ color: var(--text);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ transition:
+ background 220ms var(--easing-swift-out),
+ border-color 220ms var(--easing-swift-out),
+ transform 220ms var(--easing-swift-out),
+ box-shadow 220ms var(--easing-swift-out);
+}
+
+.restart-btn:hover {
+ border-color: rgba(201,169,97,0.9);
+ transform: translateY(-1px);
+ box-shadow: 0 10px 24px rgba(0,0,0,0.8);
+}
+
+.restart-btn .circle {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ border: 1px solid rgba(245,242,234,0.36);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 9px;
+}
+
+/* End overlay */
+.end-overlay {
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background: radial-gradient(circle at top, rgba(0,0,0,0.55), rgba(0,0,0,0.95));
+ backdrop-filter: blur(14px);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 5;
+}
+
+.end-overlay.visible {
+ display: flex;
+}
+
+.end-card {
+ padding: 18px 22px 18px;
+ border-radius: 18px;
+ border: 1px solid rgba(245,242,234,0.18);
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.26) 0, rgba(18,17,20,0.98) 48%);
+ box-shadow: var(--shadow-subtle);
+ max-width: 320px;
+ text-align: left;
+}
+
+.end-card h2 {
+ margin: 0 0 6px;
+ font-family: var(--font-display);
+ font-size: 24px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.end-card p {
+ margin: 0 0 6px;
+ font-size: 13px;
+}
+
+.end-card p span {
+ color: var(--accent);
+}
+
+/* Accessibility focus */
+button:focus-visible {
+ outline: 1px solid var(--accent);
+ outline-offset: 2px;
+}
+
+/* Small devices tweak */
+@media (max-width: 640px) {
+ .app-header {
+ padding: 0 18px;
+ }
+ .wordmark {
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ }
+ h1 {
+ font-size: 26px;
+ }
+ .lead {
+ font-size: 17px;
+ }
+ .button-group {
+ grid-template-columns: 1fr;
+ }
+}
+</style>
+</head>
+<body data-era="Victorian">
+<header class="app-header">
+ <div class="app-header-left">
+ <div class="wordmark">Designer Wallcoverings</div>
+ </div>
+ <div class="app-pill">
+ <span class="app-pill-dot"></span>
+ <span>Which Design Era?</span>
+ </div>
+</header>
+
+<main class="app-shell">
+ <section class="main-card" aria-label="Which Design Era guessing game">
+ <!-- Left: vignette -->
+ <div class="vignette-panel">
+ <div class="vignette-header">
+ <div class="vignette-label">Interior Vignette</div>
+ <div class="round-pill" id="roundLabel">Round 1 of 8</div>
+ </div>
+ <div class="vignette-scene-shell">
+ <div class="vignette-scene" aria-hidden="true">
+ <div class="scene-wall"></div>
+ <div class="scene-glow"></div>
+ <div class="scene-floor"></div>
+
+ <!-- shared sofa placeholder, decorated per-era -->
+ <div class="piece sofa"></div>
+
+ <!-- Victorian tuft markers -->
+ <div class="piece tuft"></div>
+ <div class="piece tuft"></div>
+ <div class="piece tuft"></div>
+
+ <!-- Victorian lamp & art -->
+ <div class="piece lamp"></div>
+ <div class="piece art-frame"></div>
+
+ <!-- Art Deco pieces -->
+ <div class="piece chair"></div>
+ <div class="piece chair-leg left"></div>
+ <div class="piece chair-leg right"></div>
+ <div class="piece console"></div>
+ <div class="piece sunburst"></div>
+
+ <!-- Mid-century pieces -->
+ <div class="piece mcm-leg left"></div>
+ <div class="piece mcm-leg right"></div>
+ <div class="piece sideboard"></div>
+ <div class="piece mcm-art"></div>
+ <div class="piece pendant"></div>
+
+ <!-- Grandmillennial pieces -->
+ <div class="piece side-table"></div>
+ <div class="piece gm-art-left"></div>
+ <div class="piece gm-art-right"></div>
+ </div>
+ </div>
+ <div class="vignette-caption">
+ <span>Can you read the room?</span>
+ <span class="emphasis" id="vignetteEraHint">Era concealed</span>
+ </div>
+ </div>
+
+ <!-- Right: controls -->
+ <div class="control-panel">
+ <div class="meta-row">
+ <div class="meta-label">Design Era Guessing Game</div>
+ <div class="meta-stats">
+ <div class="stat-pill" id="bestScorePill">Best <strong>0</strong>/8</div>
+ </div>
+ </div>
+ <h1>Which Design Era?</h1>
+ <p class="lead">Study the vignette, then choose the era that feels right.</p>
+
+ <p class="score-line">
+ Score: <strong><span id="scoreDisplay">0</span></strong> / <span id="totalRoundsDisplay">8</span>
+ · Attempt <span id="roundDisplay">1</span>
+ </p>
+
+ <div class="button-group" aria-label="Era choices">
+ <button class="guess-btn" data-era-choice="Victorian">
+ <span>Victorian</span>
+ </button>
+ <button class="guess-btn" data-era-choice="Art Deco">
+ <span>Art Deco</span>
+ </button>
+ <button class="guess-btn" data-era-choice="Mid-Century Modern">
+ <span>Mid-Century Modern</span>
+ </button>
+ <button class="guess-btn" data-era-choice="Grandmillennial">
+ <span>Grandmillennial</span>
+ </button>
+ </div>
+
+ <div class="feedback" id="feedback">
+ <span class="label">Awaiting your eye.</span>
+ </div>
+
+ <div class="progress-shell">
+ <div class="progress-track" aria-hidden="true">
+ <div class="progress-fill" id="progressFill"></div>
+ </div>
+ </div>
+
+ <div class="footer-row">
+ <div>
+ <div class="subtle-label">Rounds</div>
+ <div>Eight curated vignettes, one per era, reshuffled each game.</div>
+ </div>
+ <button class="restart-btn" id="restartBtn" type="button">
+ <span class="circle">↻</span>
+ <span>Restart</span>
+ </button>
+ </div>
+
+ <!-- End overlay on top of right panel -->
+ <div class="end-overlay" id="endOverlay" aria-hidden="true">
+ <div class="end-card">
+ <h2>Set Complete</h2>
+ <p>You scored <span id="finalScoreText">0</span> out of <span id="finalTotalText">8</span>.</p>
+ <p id="finalBestText">Your best so far: <span>0</span>.</p>
+ <p style="margin-top:8px;">Ready for another pass through the eras?</p>
+ <button class="restart-btn" id="playAgainBtn" type="button" style="margin-top:10px;">
+ <span class="circle">↻</span>
+ <span>Play Again</span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<script>
+(function() {
+ const ERAS = [
+ {
+ name: "Victorian",
+ difficultyTagline: "Look for opulence and ornament.",
+ fact: "Victorian interiors layered rich jewel tones, carved wood, and ornate upholstery—from fainting couches to fringed lampshades."
+ },
+ {
+ name: "Art Deco",
+ difficultyTagline: "Look for symmetry and glamour.",
+ fact: "Art Deco celebrates geometry, sunburst motifs, and luxe materials like lacquer, chrome, and gilded details inspired by 1920s cinema."
+ },
+ {
+ name: "Mid-Century Modern",
+ difficultyTagline: "Look for clean lines and warm wood.",
+ fact: "Mid-Century Modern design prized simple silhouettes, tapered legs, and optimistic colors that suited compact post‑war homes."
+ },
+ {
+ name: "Grandmillennial",
+ difficultyTagline: "Look for florals and nostalgia.",
+ fact: "Grandmillennial style mixes chintz, pleated lamps, skirted sofas, and heirloom antiques with contemporary art and color."
+ }
+ ];
+
+ const TOTAL_ROUNDS = 8;
+
+ const bodyEl = document.body;
+ const vignetteScene = document.querySelector('.vignette-scene');
+ const vignetteEraHint = document.getElementById('vignetteEraHint');
+ const roundLabel = document.getElementById('roundLabel');
+ const scoreDisplay = document.getElementById('scoreDisplay');
+ const totalRoundsDisplay = document.getElementById('totalRoundsDisplay');
+ const roundDisplay = document.getElementById('roundDisplay');
+ const feedbackEl = document.getElementById('feedback');
+ const progressFill = document.getElementById('progressFill');
+ const bestScorePill = document.getElementById('bestScorePill');
+ const restartBtn = document.getElementById('restartBtn');
+ const guessButtons = Array.from(document.querySelectorAll('.guess-btn'));
+ const endOverlay = document.getElementById('endOverlay');
+ const finalScoreText = document.getElementById('finalScoreText');
+ const finalTotalText = document.getElementById('finalTotalText');
+ const finalBestText = document.getElementById('finalBestText');
+ const playAgainBtn = document.getElementById('playAgainBtn');
+
+ let currentEraIndex = 0;
+ let currentRound = 1;
+ let score = 0;
+ let bestScore = 0;
+ let locked = false;
+ let sequence = [];
+
+ function shuffle(array) {
+ const a = array.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() {
+ const base = shuffle(ERAS);
+ const seq = [];
+ while (seq.length < TOTAL_ROUNDS) {
+ for (let i = 0; i < base.length && seq.length < TOTAL_ROUNDS; i++) {
+ seq.push(base[i]);
+ }
+ }
+ return shuffle(seq); // reshuffle to avoid predictable blocks
+ }
+
+ function loadBestScore() {
+ try {
+ const v = localStorage.getItem('dw_design_era_best');
+ const parsed = v ? parseInt(v, 10) : 0;
+ bestScore = isNaN(parsed) ? 0 : parsed;
+ } catch (e) {
+ bestScore = 0;
+ }
+ updateBestPill();
+ }
+
+ function saveBestScore() {
+ try {
+ localStorage.setItem('dw_design_era_best', String(bestScore));
+ } catch (e) {}
+ }
+
+ function updateBestPill() {
+ bestScorePill.innerHTML = 'Best <strong>' + bestScore + '</strong>/' + TOTAL_ROUNDS;
+ }
+
+ function updateLayoutForEra(eraName) {
+ bodyEl.setAttribute('data-era', eraName);
+ vignetteScene.classList.remove('is-revealed');
+ vignetteEraHint.textContent = "Era concealed";
+ }
+
+ function updateProgress() {
+ const pct = ((currentRound - 1) / TOTAL_ROUNDS) * 100;
+ progressFill.style.width = pct + '%';
+ }
+
+ function updateMeta() {
+ scoreDisplay.textContent = score;
+ totalRoundsDisplay.textContent = TOTAL_ROUNDS;
+ roundDisplay.textContent = currentRound;
+ roundLabel.textContent = 'Round ' + currentRound + ' of ' + TOTAL_ROUNDS;
+ }
+
+ function setFeedbackIdle() {
+ feedbackEl.innerHTML = '<span class="label">Awaiting your eye.</span>';
+ }
+
+ function setFeedbackResult(correct, eraObj) {
+ const labelClass = correct ? 'correct-label' : 'wrong-label';
+ const verdict = correct ? 'Correct' : 'Not quite';
+ const lead = '<span class="label ' + labelClass + '">' + verdict + ' · ' + eraObj.name + '</span>';
+ const copy = '<div class="fun-fact">' + eraObj.fact + '</div>';
+ feedbackEl.innerHTML = lead + copy;
+ }
+
+ function setButtonsEnabled(enabled) {
+ guessButtons.forEach(btn => {
+ btn.disabled = !enabled;
+ if (!enabled) {
+ btn.classList.remove('correct', 'wrong');
+ }
+ });
+ }
+
+ function revealScene() {
+ vignetteScene.classList.add('is-revealed');
+ }
+
+ function nextRound() {
+ currentRound++;
+ if (currentRound > TOTAL_ROUNDS) {
+ endGame();
+ return;
+ }
+ const eraObj = sequence[currentRound - 1];
+ currentEraIndex = ERAS.findIndex(e => e.name === eraObj.name);
+ updateLayoutForEra(eraObj.name);
+ updateMeta();
+ updateProgress();
+ setFeedbackIdle();
+ setButtonsEnabled(true);
+ locked = false;
+ }
+
+ function endGame() {
+ locked = true;
+ setButtonsEnabled(false);
+ const total = TOTAL_ROUNDS;
+ finalScoreText.textContent = score;
+ finalTotalText.textContent = total;
+ if (score > bestScore) {
+ bestScore = score;
+ saveBestScore();
+ }
+ updateBestPill();
+ finalBestText.innerHTML = 'Your best so far: <span>' + bestScore + '</span>.';
+ endOverlay.classList.add('visible');
+ endOverlay.setAttribute('aria-hidden', 'false');
+ }
+
+ function startGame() {
+ sequence = buildSequence();
+ currentRound = 1;
+ score = 0;
+ locked = false;
+ const firstEra = sequence[0];
+ currentEraIndex = ERAS.findIndex(e => e.name === firstEra.name);
+ updateLayoutForEra(firstEra.name);
+ updateMeta();
+ updateProgress();
+ setFeedbackIdle();
+ setButtonsEnabled(true);
+ endOverlay.classList.remove('visible');
+ endOverlay.setAttribute('aria-hidden', 'true');
+ }
+
+ function handleGuess(targetEraName, btn) {
+ if (locked) return;
+ locked = true;
+ const correctEra = sequence[currentRound - 1];
+ const isCorrect = targetEraName === correctEra.name;
+ if (isCorrect) {
+ score++;
+ }
+ guessButtons.forEach(b => {
+ const eraChoice = b.getAttribute('data-era-choice');
+ b.classList.remove('correct', 'wrong');
+ if (eraChoice === correctEra.name) {
+ b.classList.add('correct');
+ } else if (eraChoice === targetEraName) {
+ b.classList.add('wrong');
+ }
+ });
+ revealScene();
+ vignetteEraHint.textContent = correctEra.name;
+ setFeedbackResult(isCorrect, correctEra);
+ updateMeta();
+ setTimeout(() => {
+ nextRound();
+ }, 950);
+ }
+
+ // Event wiring
+ guessButtons.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const choice = btn.getAttribute('data-era-choice');
+ handleGuess(choice, btn);
+ });
+ });
+
+ restartBtn.addEventListener('click', () => {
+ startGame();
+ });
+ playAgainBtn.addEventListener('click', () => {
+ startGame();
+ });
+
+ // Init
+ loadBestScore();
+ startGame();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/gpt.png b/data/artifacts/0b9bb5066c06/gpt.png
new file mode 100644
index 0000000..900dcbe
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/gpt.png differ
diff --git a/data/artifacts/0b9bb5066c06/grok.html b/data/artifacts/0b9bb5066c06/grok.html
new file mode 100644
index 0000000..1ed6296
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/grok.html
@@ -0,0 +1,1476 @@
+<!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;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-dim: #7d6a45;
+ --hairline: rgba(245, 242, 234, 0.12);
+ --shadow: 0 24px 64px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
+ --ease: cubic-bezier(.22,.9,.24,1);
+ --ease-out: cubic-bezier(.22,1,.36,1);
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
+ }
+
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+ html, body {
+ height: 100%;
+ background: var(--bg);
+ color: var(--text);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+ overflow-x: hidden;
+ }
+
+ /* ── Top bar ── */
+ .topbar {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: 56px;
+ display: flex;
+ align-items: center;
+ padding: 0 2rem;
+ background: rgba(13,13,15,0.92);
+ backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--hairline);
+ }
+ .wordmark {
+ font-family: var(--serif);
+ font-size: 13px;
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ }
+
+ /* ── Layout ── */
+ .app {
+ min-height: 100%;
+ padding: 88px 1.5rem 3rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .shell {
+ width: 100%;
+ max-width: 720px;
+ }
+
+ /* ── Header meta ── */
+ .meta-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ margin-bottom: 1.75rem;
+ gap: 1rem;
+ }
+ .game-title {
+ font-family: var(--serif);
+ font-size: 28px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.15;
+ color: var(--text);
+ }
+ .game-title span {
+ color: var(--accent);
+ }
+ .scores {
+ display: flex;
+ gap: 1.5rem;
+ font-size: 12px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ white-space: nowrap;
+ }
+ .scores strong {
+ color: var(--accent);
+ font-weight: 500;
+ font-family: var(--serif);
+ font-size: 16px;
+ letter-spacing: 0.04em;
+ margin-left: 0.35em;
+ }
+
+ /* ── Progress ── */
+ .progress {
+ display: flex;
+ gap: 6px;
+ margin-bottom: 1.75rem;
+ }
+ .progress i {
+ flex: 1;
+ height: 2px;
+ background: var(--hairline);
+ border-radius: 1px;
+ transition: background 0.4s var(--ease);
+ }
+ .progress i.done { background: var(--accent-dim); }
+ .progress i.now { background: var(--accent); }
+
+ /* ── Vignette stage ── */
+ .stage {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 16 / 11;
+ background: var(--surface);
+ border: 1px solid var(--hairline);
+ border-radius: 2px;
+ box-shadow: var(--shadow);
+ overflow: hidden;
+ margin-bottom: 1.75rem;
+ }
+
+ .vignette {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 0.6s var(--ease-out);
+ pointer-events: none;
+ }
+ .vignette.active { opacity: 1; }
+
+ /* Shared room geometry */
+ .room {
+ position: absolute;
+ inset: 0;
+ }
+ .floor {
+ position: absolute;
+ left: 0; right: 0; bottom: 0;
+ height: 32%;
+ }
+ .wall {
+ position: absolute;
+ left: 0; right: 0; top: 0;
+ height: 68%;
+ }
+ .baseboard {
+ position: absolute;
+ left: 0; right: 0;
+ top: 68%;
+ height: 3px;
+ transform: translateY(-100%);
+ }
+ .wainscot {
+ position: absolute;
+ left: 0; right: 0;
+ bottom: 32%;
+ height: 22%;
+ }
+
+ /* ════════ VICTORIAN ════════ */
+ .vic .wall {
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ #2a1810 0px, #2a1810 28px,
+ #3d2418 28px, #3d2418 30px
+ ),
+ linear-gradient(180deg, #3a2014 0%, #2a1810 100%);
+ background-blend-mode: multiply;
+ }
+ .vic .wall::before {
+ content: '';
+ position: absolute;
+ inset: 8% 6% 28% 6%;
+ background:
+ radial-gradient(ellipse 40% 50% at 30% 40%, rgba(139,90,43,0.35) 0%, transparent 70%),
+ radial-gradient(ellipse 35% 45% at 70% 55%, rgba(101,67,33,0.3) 0%, transparent 70%),
+ repeating-linear-gradient(
+ 0deg,
+ transparent 0, transparent 18px,
+ rgba(201,169,97,0.08) 18px, rgba(201,169,97,0.08) 19px
+ ),
+ repeating-linear-gradient(
+ 90deg,
+ transparent 0, transparent 18px,
+ rgba(201,169,97,0.08) 18px, rgba(201,169,97,0.08) 19px
+ );
+ border: 1px solid rgba(201,169,97,0.2);
+ box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
+ }
+ /* damask dots */
+ .vic .wall::after {
+ content: '';
+ position: absolute;
+ inset: 10% 8% 30% 8%;
+ background-image:
+ radial-gradient(circle at 50% 50%, rgba(201,169,97,0.18) 1.5px, transparent 1.8px);
+ background-size: 24px 28px;
+ opacity: 0.7;
+ }
+ .vic .wainscot {
+ background: linear-gradient(180deg, #1a100c 0%, #120b08 100%);
+ border-top: 2px solid #c9a961;
+ box-shadow: inset 0 8px 16px rgba(0,0,0,0.4);
+ }
+ .vic .wainscot::before {
+ content: '';
+ position: absolute;
+ inset: 12% 4%;
+ border: 1px solid rgba(201,169,97,0.25);
+ box-shadow: inset 0 0 0 4px #1a100c, inset 0 0 0 5px rgba(201,169,97,0.15);
+ }
+ .vic .baseboard {
+ background: #c9a961;
+ height: 4px;
+ }
+ .vic .floor {
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ #1c100a 0px, #1c100a 40px,
+ #241610 40px, #241610 42px
+ );
+ }
+ .vic .floor::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 40%);
+ }
+ /* chandelier suggestion */
+ .vic .fixture {
+ position: absolute;
+ top: 0; left: 50%;
+ width: 2px; height: 14%;
+ background: linear-gradient(180deg, #c9a961, #8a7340);
+ transform: translateX(-50%);
+ }
+ .vic .fixture::before {
+ content: '';
+ position: absolute;
+ bottom: -8px; left: 50%;
+ transform: translateX(-50%);
+ width: 48px; height: 20px;
+ background:
+ radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.5) 0%, transparent 70%);
+ border-bottom: 1px solid rgba(201,169,97,0.4);
+ }
+ .vic .fixture::after {
+ content: '';
+ position: absolute;
+ bottom: -18px; left: 50%;
+ transform: translateX(-50%);
+ width: 8px; height: 8px;
+ border-radius: 50%;
+ background: #c9a961;
+ box-shadow:
+ -14px -4px 0 -2px #c9a961,
+ 14px -4px 0 -2px #c9a961,
+ -8px 2px 0 -2.5px #a08850,
+ 8px 2px 0 -2.5px #a08850,
+ 0 0 20px 6px rgba(201,169,97,0.25);
+ }
+ /* ornate frame / portrait */
+ .vic .art {
+ position: absolute;
+ top: 14%; left: 50%;
+ transform: translateX(-50%);
+ width: 16%; height: 28%;
+ border: 3px solid #c9a961;
+ box-shadow:
+ inset 0 0 0 2px #2a1810,
+ inset 0 0 0 4px rgba(201,169,97,0.4),
+ 0 8px 24px rgba(0,0,0,0.5);
+ background:
+ radial-gradient(ellipse at 40% 35%, #5a3a28 0%, #2a1810 70%);
+ }
+ .vic .art::after {
+ content: '';
+ position: absolute;
+ inset: 15%;
+ border-radius: 50% 50% 45% 45%;
+ background: radial-gradient(ellipse at 45% 40%, #8a6a50 0%, #3a2418 80%);
+ opacity: 0.7;
+ }
+ /* side tables */
+ .vic .furn-l, .vic .furn-r {
+ position: absolute;
+ bottom: 28%;
+ width: 12%; height: 18%;
+ background: linear-gradient(180deg, #3a2818 0%, #1a1008 100%);
+ border: 1px solid rgba(201,169,97,0.3);
+ }
+ .vic .furn-l { left: 10%; }
+ .vic .furn-r { right: 10%; }
+ .vic .furn-l::before, .vic .furn-r::before {
+ content: '';
+ position: absolute;
+ top: -22%; left: 10%; right: 10%;
+ height: 22%;
+ background: #c9a961;
+ opacity: 0.7;
+ }
+ .vic .lamp {
+ position: absolute;
+ bottom: 46%; left: 13%;
+ width: 6%; height: 14%;
+ }
+ .vic .lamp::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 50%;
+ transform: translateX(-50%);
+ width: 3px; height: 60%;
+ background: #c9a961;
+ }
+ .vic .lamp::after {
+ content: '';
+ position: absolute;
+ top: 0; left: 50%;
+ transform: translateX(-50%);
+ width: 100%; height: 50%;
+ background: linear-gradient(180deg, #d4b878, #a08840);
+ clip-path: polygon(15% 100%, 85% 100%, 100% 0, 0 0);
+ box-shadow: 0 0 16px rgba(201,169,97,0.35);
+ }
+
+ /* ════════ ART DECO ════════ */
+ .deco .wall {
+ background: linear-gradient(180deg, #1a1a22 0%, #12121a 100%);
+ }
+ .deco .wall::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ transparent 0, transparent 47px,
+ rgba(201,169,97,0.07) 47px, rgba(201,169,97,0.07) 48px
+ );
+ }
+ /* sunburst */
+ .deco .wall::after {
+ content: '';
+ position: absolute;
+ top: 5%; left: 50%;
+ transform: translateX(-50%);
+ width: 55%; height: 70%;
+ background: conic-gradient(
+ from 200deg at 50% 100%,
+ transparent 0deg,
+ rgba(201,169,97,0.12) 8deg,
+ transparent 16deg,
+ rgba(201,169,97,0.08) 24deg,
+ transparent 32deg,
+ rgba(201,169,97,0.12) 40deg,
+ transparent 48deg,
+ rgba(201,169,97,0.08) 56deg,
+ transparent 64deg,
+ rgba(201,169,97,0.1) 72deg,
+ transparent 80deg,
+ rgba(201,169,97,0.08) 88deg,
+ transparent 96deg,
+ rgba(201,169,97,0.12) 104deg,
+ transparent 112deg,
+ rgba(201,169,97,0.08) 120deg,
+ transparent 128deg,
+ rgba(201,169,97,0.1) 136deg,
+ transparent 144deg,
+ rgba(201,169,97,0.08) 152deg,
+ transparent 160deg
+ );
+ opacity: 0.9;
+ mask-image: linear-gradient(180deg, black 0%, transparent 85%);
+ }
+ .deco .wainscot {
+ background: linear-gradient(180deg, #0e0e14 0%, #0a0a10 100%);
+ border-top: 1px solid rgba(201,169,97,0.5);
+ height: 18%;
+ }
+ .deco .wainscot::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 6px;
+ background: repeating-linear-gradient(
+ 90deg,
+ #c9a961 0, #c9a961 8px,
+ transparent 8px, transparent 16px
+ );
+ opacity: 0.5;
+ }
+ .deco .baseboard {
+ background: linear-gradient(90deg, #8a7340, #c9a961, #8a7340);
+ height: 3px;
+ }
+ .deco .floor {
+ background:
+ linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%),
+ repeating-linear-gradient(
+ 90deg,
+ #14141c 0px, #14141c 60px,
+ #1a1a24 60px, #1a1a24 120px
+ );
+ }
+ /* geometric mirror */
+ .deco .art {
+ position: absolute;
+ top: 12%; left: 50%;
+ transform: translateX(-50%);
+ width: 22%; height: 36%;
+ background: linear-gradient(135deg, #2a2a38 0%, #1a1a28 50%, #222230 100%);
+ border: 2px solid #c9a961;
+ clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
+ box-shadow: 0 0 40px rgba(201,169,97,0.15), inset 0 0 30px rgba(201,169,97,0.08);
+ }
+ .deco .art::before {
+ content: '';
+ position: absolute;
+ inset: 8%;
+ border: 1px solid rgba(201,169,97,0.35);
+ clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
+ }
+ .deco .art::after {
+ content: '';
+ position: absolute;
+ inset: 20%;
+ background: linear-gradient(160deg, rgba(245,242,234,0.12) 0%, transparent 50%);
+ clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
+ }
+ /* stepped console */
+ .deco .furn-l {
+ position: absolute;
+ bottom: 28%; left: 8%;
+ width: 18%; height: 16%;
+ }
+ .deco .furn-l::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 40%;
+ background: #1a1a24;
+ border: 1px solid rgba(201,169,97,0.4);
+ }
+ .deco .furn-l::after {
+ content: '';
+ position: absolute;
+ bottom: 40%; left: 15%; right: 15%;
+ height: 30%;
+ background: #222230;
+ border: 1px solid rgba(201,169,97,0.3);
+ }
+ .deco .furn-r {
+ position: absolute;
+ bottom: 28%; right: 8%;
+ width: 18%; height: 16%;
+ }
+ .deco .furn-r::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 40%;
+ background: #1a1a24;
+ border: 1px solid rgba(201,169,97,0.4);
+ }
+ .deco .furn-r::after {
+ content: '';
+ position: absolute;
+ bottom: 40%; left: 15%; right: 15%;
+ height: 30%;
+ background: #222230;
+ border: 1px solid rgba(201,169,97,0.3);
+ }
+ /* tall black lacquer vase */
+ .deco .fixture {
+ position: absolute;
+ bottom: 44%; left: 14%;
+ width: 5%; height: 20%;
+ background: linear-gradient(90deg, #0a0a10, #1a1a22, #0a0a10);
+ border-radius: 40% 40% 10% 10%;
+ border: 1px solid rgba(201,169,97,0.3);
+ box-shadow: 0 0 12px rgba(201,169,97,0.1);
+ }
+ .deco .fixture::after {
+ content: '';
+ position: absolute;
+ top: -8%; left: 20%; right: 20%;
+ height: 12%;
+ background: #c9a961;
+ border-radius: 2px;
+ }
+ .deco .lamp {
+ position: absolute;
+ bottom: 44%; right: 14%;
+ width: 5%; height: 22%;
+ background: linear-gradient(90deg, #0a0a10, #1a1a22, #0a0a10);
+ clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
+ border-top: 2px solid #c9a961;
+ box-shadow: 0 -4px 20px rgba(201,169,97,0.2);
+ }
+
+ /* ════════ MID-CENTURY MODERN ════════ */
+ .mcm .wall {
+ background: linear-gradient(180deg, #d4cfc4 0%, #c8c2b4 100%);
+ }
+ .mcm .wall::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 60% at 70% 30%, rgba(180,140,90,0.12) 0%, transparent 60%);
+ }
+ /* walnut accent wall panel */
+ .mcm .wall::after {
+ content: '';
+ position: absolute;
+ top: 0; right: 0;
+ width: 28%; height: 100%;
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ #5c4030 0px, #5c4030 14px,
+ #6b4c38 14px, #6b4c38 15px
+ );
+ opacity: 0.85;
+ }
+ .mcm .wainscot { display: none; }
+ .mcm .baseboard {
+ background: #4a3428;
+ height: 4px;
+ }
+ .mcm .floor {
+ background:
+ linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 25%),
+ repeating-linear-gradient(
+ 90deg,
+ #b8a890 0px, #b8a890 48px,
+ #c4b49c 48px, #c4b49c 50px
+ );
+ }
+ /* starburst clock */
+ .mcm .art {
+ position: absolute;
+ top: 18%; left: 32%;
+ width: 14%; height: 22%;
+ }
+ .mcm .art::before {
+ content: '';
+ position: absolute;
+ inset: 25%;
+ border-radius: 50%;
+ background: #2a2420;
+ border: 2px solid #c9a961;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+ }
+ .mcm .art::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ conic-gradient(from 0deg,
+ transparent 0deg 8deg, #4a4038 8deg 10deg,
+ transparent 10deg 28deg, #4a4038 28deg 30deg,
+ transparent 30deg 48deg, #4a4038 48deg 50deg,
+ transparent 50deg 68deg, #4a4038 68deg 70deg,
+ transparent 70deg 88deg, #4a4038 88deg 90deg,
+ transparent 90deg 108deg, #4a4038 108deg 110deg,
+ transparent 110deg 128deg, #4a4038 128deg 130deg,
+ transparent 130deg 148deg, #4a4038 148deg 150deg,
+ transparent 150deg 168deg, #4a4038 168deg 170deg,
+ transparent 170deg 188deg, #4a4038 188deg 190deg,
+ transparent 190deg 208deg, #4a4038 208deg 210deg,
+ transparent 210deg 228deg, #4a4038 228deg 230deg,
+ transparent 230deg 248deg, #4a4038 248deg 250deg,
+ transparent 250deg 268deg, #4a4038 268deg 270deg,
+ transparent 270deg 288deg, #4a4038 288deg 290deg,
+ transparent 290deg 308deg, #4a4038 308deg 310deg,
+ transparent 310deg 328deg, #4a4038 328deg 330deg,
+ transparent 330deg 348deg, #4a4038 348deg 350deg,
+ transparent 350deg 360deg
+ );
+ border-radius: 50%;
+ opacity: 0.7;
+ }
+ /* Eames-ish lounge */
+ .mcm .furn-l {
+ position: absolute;
+ bottom: 26%; left: 12%;
+ width: 22%; height: 22%;
+ }
+ .mcm .furn-l::before {
+ /* seat */
+ content: '';
+ position: absolute;
+ bottom: 20%; left: 5%; right: 15%;
+ height: 35%;
+ background: #8b4518;
+ border-radius: 50% 40% 8% 8%;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+ }
+ .mcm .furn-l::after {
+ /* back */
+ content: '';
+ position: absolute;
+ bottom: 48%; right: 8%;
+ width: 45%; height: 48%;
+ background: #6b3410;
+ border-radius: 40% 50% 8% 20%;
+ transform: rotate(12deg);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ }
+ /* legs */
+ .mcm .fixture {
+ position: absolute;
+ bottom: 26%; left: 15%;
+ width: 18%; height: 8%;
+ background: transparent;
+ border-bottom: 2px solid #3a3028;
+ border-left: 2px solid transparent;
+ border-right: 2px solid transparent;
+ transform: perspective(40px) rotateX(20deg);
+ }
+ .mcm .fixture::before, .mcm .fixture::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ width: 2px; height: 18px;
+ background: #3a3028;
+ }
+ .mcm .fixture::before { left: 10%; transform: rotate(-15deg); }
+ .mcm .fixture::after { right: 10%; transform: rotate(15deg); }
+ /* planter / kidney table */
+ .mcm .furn-r {
+ position: absolute;
+ bottom: 28%; right: 34%;
+ width: 14%; height: 12%;
+ }
+ .mcm .furn-r::before {
+ content: '';
+ position: absolute;
+ bottom: 30%; left: 0; right: 0;
+ height: 25%;
+ background: #4a4030;
+ border-radius: 50%;
+ box-shadow: 0 3px 8px rgba(0,0,0,0.2);
+ }
+ .mcm .furn-r::after {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 45%;
+ width: 2px; height: 55%;
+ background: #3a3028;
+ box-shadow: -8px 0 0 #3a3028, 8px 0 0 #3a3028;
+ }
+ /* boomerang lamp */
+ .mcm .lamp {
+ position: absolute;
+ bottom: 40%; right: 36%;
+ width: 8%; height: 16%;
+ }
+ .mcm .lamp::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 40%;
+ width: 3px; height: 70%;
+ background: #3a3028;
+ transform: rotate(-8deg);
+ }
+ .mcm .lamp::after {
+ content: '';
+ position: absolute;
+ top: 0; left: 10%;
+ width: 70%; height: 40%;
+ background: #f0ebe0;
+ border-radius: 50% 50% 40% 40%;
+ box-shadow: 0 0 20px rgba(240,235,224,0.5);
+ }
+ /* large window suggestion */
+ .mcm .window {
+ position: absolute;
+ top: 10%; left: 6%;
+ width: 20%; height: 48%;
+ background: linear-gradient(180deg, #a8c4c8 0%, #8a greyscale 100%);
+ background: linear-gradient(160deg, #b8d0d4 0%, #90a8b0 100%);
+ border: 3px solid #4a4038;
+ box-shadow: inset 0 0 20px rgba(255,255,255,0.2);
+ }
+ .mcm .window::before {
+ content: '';
+ position: absolute;
+ top: 0; bottom: 0; left: 50%;
+ width: 3px;
+ background: #4a4038;
+ }
+ .mcm .window::after {
+ content: '';
+ position: absolute;
+ left: 0; right: 0; top: 50%;
+ height: 3px;
+ background: #4a4038;
+ }
+
+ /* ════════ GRANDMILLENNIAL ════════ */
+ .gm .wall {
+ background: #f0e8dc;
+ }
+ /* chintz / floral wallpaper suggestion */
+ .gm .wall::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 20% 30%, rgba(180,80,90,0.2) 0%, transparent 8%),
+ radial-gradient(circle at 50% 20%, rgba(70,120,90,0.18) 0%, transparent 7%),
+ radial-gradient(circle at 75% 40%, rgba(180,80,90,0.18) 0%, transparent 9%),
+ radial-gradient(circle at 35% 60%, rgba(70,120,90,0.15) 0%, transparent 8%),
+ radial-gradient(circle at 60% 70%, rgba(180,80,90,0.16) 0%, transparent 7%),
+ radial-gradient(circle at 15% 75%, rgba(180,80,90,0.14) 0%, transparent 6%),
+ radial-gradient(circle at 85% 15%, rgba(70,120,90,0.16) 0%, transparent 7%),
+ radial-gradient(circle at 90% 65%, rgba(180,80,90,0.15) 0%, transparent 8%),
+ radial-gradient(circle at 40% 40%, rgba(200,160,80,0.12) 0%, transparent 5%),
+ radial-gradient(circle at 65% 50%, rgba(200,160,80,0.1) 0%, transparent 5%);
+ background-size: 100% 100%;
+ }
+ .gm .wall::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 25% 35%, rgba(180,80,90,0.25) 0 2px, transparent 2.5px),
+ radial-gradient(circle at 55% 25%, rgba(70,120,90,0.22) 0 1.5px, transparent 2px),
+ radial-gradient(circle at 70% 55%, rgba(180,80,90,0.2) 0 2px, transparent 2.5px),
+ radial-gradient(circle at 40% 70%, rgba(70,120,90,0.2) 0 1.5px, transparent 2px);
+ background-size: 80px 90px;
+ opacity: 0.8;
+ }
+ .gm .wainscot {
+ background: linear-gradient(180deg, #f7f2ea 0%, #efe8dc 100%);
+ border-top: 1px solid rgba(139,105,70,0.3);
+ height: 24%;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
+ }
+ .gm .wainscot::before {
+ content: '';
+ position: absolute;
+ inset: 10% 3%;
+ border: 1px solid rgba(139,105,70,0.2);
+ box-shadow: inset 0 0 0 6px #f7f2ea, inset 0 0 0 7px rgba(139,105,70,0.12);
+ }
+ .gm .baseboard {
+ background: #8b6946;
+ height: 5px;
+ }
+ .gm .floor {
+ background:
+ linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 30%),
+ repeating-linear-gradient(
+ 90deg,
+ #d4c4a8 0px, #d4c4a8 36px,
+ #cbb896 36px, #cbb896 38px
+ );
+ }
+ /* gallery wall frames */
+ .gm .art {
+ position: absolute;
+ top: 12%; left: 22%;
+ width: 12%; height: 20%;
+ background: #e8dcc8;
+ border: 3px solid #8b6946;
+ box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
+ }
+ .gm .art::before {
+ content: '';
+ position: absolute;
+ top: -8%; right: -120%;
+ width: 100%; height: 85%;
+ background: #e0d4c0;
+ border: 2px solid #8b6946;
+ box-shadow: 2px 3px 8px rgba(0,0,0,0.1);
+ }
+ .gm .art::after {
+ content: '';
+ position: absolute;
+ top: 40%; right: -230%;
+ width: 90%; height: 110%;
+ background: #d8ccb8;
+ border: 4px solid #6b4e32;
+ box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
+ }
+ /* skirted table */
+ .gm .furn-l {
+ position: absolute;
+ bottom: 26%; left: 8%;
+ width: 16%; height: 24%;
+ }
+ .gm .furn-l::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 75%;
+ background: linear-gradient(180deg, #8b3040 0%, #6b2030 100%);
+ border-radius: 4px 4px 0 0;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ }
+ .gm .furn-l::after {
+ content: '';
+ position: absolute;
+ top: 10%; left: 5%; right: 5%;
+ height: 20%;
+ background: #f5f0e6;
+ border: 1px solid rgba(139,105,70,0.3);
+ border-radius: 2px;
+ }
+ /* wingback chair silhouette */
+ .gm .furn-r {
+ position: absolute;
+ bottom: 26%; right: 12%;
+ width: 16%; height: 30%;
+ }
+ .gm .furn-r::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 15%; right: 15%;
+ height: 55%;
+ background: #4a6b58;
+ border-radius: 8px 8px 2px 2px;
+ }
+ .gm .furn-r::after {
+ content: '';
+ position: absolute;
+ bottom: 45%; left: 0; right: 0;
+ height: 50%;
+ background: #3d5a4a;
+ border-radius: 40% 40% 8% 8%;
+ box-shadow: inset 0 -8px 0 #4a6b58;
+ }
+ /* ginger jar */
+ .gm .fixture {
+ position: absolute;
+ bottom: 50%; left: 12%;
+ width: 7%; height: 14%;
+ background: linear-gradient(90deg, #d0dce4, #e8f0f4, #d0dce4);
+ border-radius: 40% 40% 15% 15%;
+ border: 1px solid rgba(100,130,150,0.4);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+ .gm .fixture::before {
+ content: '';
+ position: absolute;
+ top: -12%; left: 25%; right: 25%;
+ height: 18%;
+ background: #c8d4dc;
+ border-radius: 2px;
+ }
+ .gm .fixture::after {
+ content: '';
+ position: absolute;
+ inset: 20% 15%;
+ border: 1px solid rgba(70,110,140,0.35);
+ border-radius: 30%;
+ }
+ /* scalloped lamp shade */
+ .gm .lamp {
+ position: absolute;
+ bottom: 56%; right: 15%;
+ width: 10%; height: 18%;
+ }
+ .gm .lamp::before {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 45%;
+ width: 2px; height: 45%;
+ background: #c9a961;
+ }
+ .gm .lamp::after {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 55%;
+ background: #f8f0e0;
+ clip-path: polygon(10% 100%, 90% 100%, 100% 15%, 85% 0, 15% 0, 0 15%);
+ box-shadow: 0 0 16px rgba(248,240,224,0.45);
+ border-bottom: 2px solid #c9a961;
+ }
+
+ /* ── Prompt + buttons ── */
+ .prompt {
+ text-align: center;
+ margin-bottom: 1.25rem;
+ }
+ .prompt p {
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .choices {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+ margin-bottom: 1.5rem;
+ }
+
+ .choice {
+ appearance: none;
+ border: 1px solid var(--hairline);
+ background: var(--surface);
+ color: var(--text);
+ font-family: var(--sans);
+ font-size: 14px;
+ letter-spacing: 0.04em;
+ padding: 1rem 1.25rem;
+ cursor: pointer;
+ border-radius: 1px;
+ transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
+ text-align: center;
+ }
+ .choice:hover:not(:disabled) {
+ border-color: var(--accent);
+ color: var(--accent);
+ }
+ .choice:active:not(:disabled) {
+ transform: scale(0.98);
+ }
+ .choice:disabled {
+ cursor: default;
+ opacity: 0.55;
+ }
+ .choice.correct {
+ border-color: var(--accent);
+ background: rgba(201,169,97,0.12);
+ color: var(--accent);
+ opacity: 1;
+ }
+ .choice.wrong {
+ border-color: rgba(180,80,80,0.5);
+ background: rgba(180,80,80,0.08);
+ color: #c08080;
+ opacity: 1;
+ }
+
+ /* ── Reveal card ── */
+ .reveal {
+ display: none;
+ border: 1px solid var(--hairline);
+ background: var(--surface);
+ padding: 1.5rem 1.75rem;
+ margin-bottom: 1.5rem;
+ border-radius: 1px;
+ animation: fadeUp 0.5s var(--ease-out) both;
+ }
+ .reveal.show { display: block; }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(12px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ .reveal-label {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 0.5rem;
+ }
+ .reveal h2 {
+ font-family: var(--serif);
+ font-size: 28px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.15;
+ margin-bottom: 0.75rem;
+ }
+ .reveal h2.miss { color: #c08080; }
+ .reveal h2.hit { color: var(--accent); }
+ .reveal .fact {
+ font-size: 15px;
+ line-height: 1.65;
+ color: var(--muted);
+ max-width: 58ch;
+ }
+ .reveal .fact em {
+ color: var(--text);
+ font-style: normal;
+ border-bottom: 1px solid var(--hairline);
+ }
+
+ .next-row {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1.25rem;
+ }
+
+ .btn {
+ appearance: none;
+ border: 1px solid var(--accent);
+ background: transparent;
+ color: var(--accent);
+ font-family: var(--sans);
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ padding: 0.85rem 1.75rem;
+ cursor: pointer;
+ border-radius: 1px;
+ transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
+ }
+ .btn:hover {
+ background: var(--accent);
+ color: var(--bg);
+ }
+ .btn:active { transform: scale(0.98); }
+ .btn.primary {
+ background: var(--accent);
+ color: var(--bg);
+ }
+ .btn.primary:hover {
+ background: #d4b878;
+ }
+
+ /* ── End screen ── */
+ .end-screen {
+ display: none;
+ text-align: center;
+ padding: 3rem 1.5rem;
+ animation: fadeUp 0.6s var(--ease-out) both;
+ }
+ .end-screen.show { display: block; }
+
+ .end-screen .eyebrow {
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 1rem;
+ }
+ .end-screen h1 {
+ font-family: var(--serif);
+ font-size: 50px;
+ font-weight: 400;
+ letter-spacing: -0.03em;
+ line-height: 1.05;
+ margin-bottom: 0.75rem;
+ }
+ .end-screen .final-score {
+ font-family: var(--serif);
+ font-size: 38px;
+ color: var(--accent);
+ margin-bottom: 0.5rem;
+ }
+ .end-screen .best {
+ font-size: 13px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 2rem;
+ }
+ .end-screen .best strong {
+ color: var(--text);
+ font-weight: 500;
+ }
+ .end-screen .blurb {
+ font-size: 16px;
+ color: var(--muted);
+ max-width: 40ch;
+ margin: 0 auto 2.5rem;
+ line-height: 1.65;
+ }
+
+ /* ── Intro ── */
+ .intro {
+ text-align: center;
+ padding: 2.5rem 1rem 1rem;
+ animation: fadeUp 0.6s var(--ease-out) both;
+ }
+ .intro .eyebrow {
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 1.25rem;
+ }
+ .intro h1 {
+ font-family: var(--serif);
+ font-size: clamp(38px, 6vw, 50px);
+ font-weight: 400;
+ letter-spacing: -0.03em;
+ line-height: 1.08;
+ margin-bottom: 1.25rem;
+ }
+ .intro h1 em {
+ font-style: italic;
+ color: var(--accent);
+ }
+ .intro p {
+ font-size: 16px;
+ color: var(--muted);
+ max-width: 42ch;
+ margin: 0 auto 2.5rem;
+ line-height: 1.7;
+ }
+ .intro .hair {
+ width: 48px;
+ height: 1px;
+ background: var(--accent);
+ margin: 0 auto 2rem;
+ opacity: 0.6;
+ }
+
+ .play-area { display: none; }
+ .play-area.show { display: block; }
+
+ .hidden { display: none !important; }
+
+ /* subtle stage entrance */
+ .stage.enter {
+ animation: stageIn 0.7s var(--ease-out) both;
+ }
+ @keyframes stageIn {
+ from { opacity: 0; transform: translateY(16px) scale(0.985); }
+ to { opacity: 1; transform: translateY(0) scale(1); }
+ }
+
+ @media (max-width: 540px) {
+ .topbar { padding: 0 1.25rem; }
+ .app { padding: 80px 1rem 2rem; }
+ .choices { grid-template-columns: 1fr; }
+ .game-title { font-size: 22px; }
+ .end-screen h1 { font-size: 36px; }
+ .meta-row { flex-direction: column; gap: 0.5rem; }
+ }
+</style>
+</head>
+<body>
+ <header class="topbar">
+ <div class="wordmark">Designer Wallcoverings</div>
+ </header>
+
+ <main class="app">
+ <div class="shell">
+
+ <!-- INTRO -->
+ <section class="intro" id="intro">
+ <div class="eyebrow">A Connoisseur’s Quiz</div>
+ <h1>Which <em>Design Era</em><br>is this room?</h1>
+ <div class="hair"></div>
+ <p>Eight vignettes. Four eras. Read the room — mouldings, metals, silhouettes — and name the period. A single jewel-box of interior history.</p>
+ <button class="btn primary" id="startBtn">Begin</button>
+ </section>
+
+ <!-- PLAY -->
+ <section class="play-area" id="play">
+ <div class="meta-row">
+ <h1 class="game-title">Which <span>Era?</span></h1>
+ <div class="scores">
+ <div>Round<strong id="roundNum">1</strong>/8</div>
+ <div>Score<strong id="scoreNum">0</strong></div>
+ <div>Best<strong id="bestNum">0</strong></div>
+ </div>
+ </div>
+
+ <div class="progress" id="progress" aria-hidden="true"></div>
+
+ <div class="stage" id="stage">
+ <!-- Victorian -->
+ <div class="vignette vic" data-era="victorian">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="fixture"></div>
+ <div class="art"></div>
+ <div class="furn-l"></div>
+ <div class="furn-r"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ <!-- Art Deco -->
+ <div class="vignette deco" data-era="artdeco">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="art"></div>
+ <div class="furn-l"></div>
+ <div class="furn-r"></div>
+ <div class="fixture"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ <!-- Mid-Century Modern -->
+ <div class="vignette mcm" data-era="mcm">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="window"></div>
+ <div class="art"></div>
+ <div class="furn-l"></div>
+ <div class="furn-r"></div>
+ <div class="fixture"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ <!-- Grandmillennial -->
+ <div class="vignette gm" data-era="grandmillennial">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="art"></div>
+ <div class="furn-l"></div>
+ <div class="furn-r"></div>
+ <div class="fixture"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="prompt"><p>Select the design era</p></div>
+
+ <div class="choices" id="choices">
+ <button class="choice" data-guess="victorian">Victorian</button>
+ <button class="choice" data-guess="artdeco">Art Deco</button>
+ <button class="choice" data-guess="mcm">Mid-Century Modern</button>
+ <button class="choice" data-guess="grandmillennial">Grandmillennial</button>
+ </div>
+
+ <div class="reveal" id="reveal">
+ <div class="reveal-label" id="revealLabel">Correct</div>
+ <h2 id="revealTitle"></h2>
+ <p class="fact" id="revealFact"></p>
+ <div class="next-row">
+ <button class="btn" id="nextBtn">Next Room</button>
+ </div>
+ </div>
+ </section>
+
+ <!-- END -->
+ <section class="end-screen" id="end">
+ <div class="eyebrow">Collection Complete</div>
+ <h1 id="endHeadline">Impeccable eye.</h1>
+ <div class="final-score" id="endScore">0 / 8</div>
+ <div class="best">Best<span> — </span><strong id="endBest">0</strong></div>
+ <p class="blurb" id="endBlurb"></p>
+ <button class="btn primary" id="restartBtn">Play Again</button>
+ </section>
+
+ </div>
+ </main>
+
+<script>
+(function () {
+ const ERAS = {
+ victorian: {
+ name: 'Victorian',
+ fact: 'Named for Queen Victoria\'s reign (1837–1901), this era layered <em>damask wallpapers, dark mahogany, and ornamental plaster</em> into rooms that read as richly furnished jewel boxes — more pattern was always more.'
+ },
+ artdeco: {
+ name: 'Art Deco',
+ fact: 'Born of the 1925 Paris Exposition, Art Deco loved <em>sunbursts, stepped forms, lacquer, and polished brass</em>. Geometry replaced Victorian fuss — glamour with a machine-age edge.'
+ },
+ mcm: {
+ name: 'Mid-Century Modern',
+ fact: 'From roughly 1945–1969, MCM stripped rooms to <em>clean lines, organic curves, walnut, and starburst motifs</em>. Form followed function — with a cocktail in hand and a picture window open to the yard.'
+ },
+ grandmillennial: {
+ name: 'Grandmillennial',
+ fact: 'A 21st-century revival of "granny chic": <em>floral chintz, skirted tables, ginger jars, and gallery walls</em>. Nostalgia, needlepoint, and a knowing wink — heritage without the stuffiness.'
+ }
+ };
+
+ const ERA_KEYS = Object.keys(ERAS);
+ const TOTAL = 8;
+
+ let round = 0;
+ let score = 0;
+ let sequence = [];
+ let answered = false;
+ let best = 0;
+
+ try { best = parseInt(localStorage.getItem('dw_era_best') || '0', 10) || 0; } catch (e) { best = 0; }
+
+ const $ = (id) => document.getElementById(id);
+ const intro = $('intro');
+ const play = $('play');
+ const end = $('end');
+ const stage = $('stage');
+ const progress = $('progress');
+ const choicesEl = $('choices');
+ const reveal = $('reveal');
+ const nextBtn = $('nextBtn');
+
+ 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('i');
+ if (i < round) d.className = 'done';
+ else if (i === round) d.className = 'now';
+ progress.appendChild(d);
+ }
+ }
+
+ function showVignette(era) {
+ const all = stage.querySelectorAll('.vignette');
+ all.forEach(v => v.classList.remove('active'));
+ const target = stage.querySelector('.vignette[data-era="' + era + '"]');
+ if (target) {
+ // force reflow for fade
+ void target.offsetWidth;
+ target.classList.add('active');
+ }
+ stage.classList.remove('enter');
+ void stage.offsetWidth;
+ stage.classList.add('enter');
+ }
+
+ function resetChoices() {
+ const btns = choicesEl.querySelectorAll('.choice');
+ btns.forEach(b => {
+ b.disabled = false;
+ b.classList.remove('correct', 'wrong');
+ });
+ // reshuffle button order each round for freshness
+ const order = shuffle(ERA_KEYS);
+ btns.forEach((b, i) => {
+ b.dataset.guess = order[i];
+ b.textContent = ERAS[order[i]].name;
+ });
+ }
+
+ function updateMeta() {
+ $('roundNum').textContent = String(round + 1);
+ $('scoreNum').textContent = String(score);
+ $('bestNum').textContent = String(best);
+ }
+
+ function startRound() {
+ answered = false;
+ reveal.classList.remove('show');
+ choicesEl.classList.remove('hidden');
+ document.querySelector('.prompt').classList.remove('hidden');
+ buildProgress();
+ updateMeta();
+ resetChoices();
+ showVignette(sequence[round]);
+ nextBtn.textContent = round === TOTAL - 1 ? 'See Results' : 'Next Room';
+ }
+
+ function onGuess(guess) {
+ if (answered) return;
+ answered = true;
+ const correct = sequence[round];
+ const hit = guess === correct;
+
+ if (hit) score++;
+
+ const btns = choicesEl.querySelectorAll('.choice');
+ btns.forEach(b => {
+ b.disabled = true;
+ if (b.dataset.guess === correct) b.classList.add('correct');
+ else if (b.dataset.guess === guess && !hit) b.classList.add('wrong');
+ });
+
+ $('revealLabel').textContent = hit ? 'Correct' : 'Not quite';
+ const title = $('revealTitle');
+ title.textContent = ERAS[correct].name;
+ title.className = hit ? 'hit' : 'miss';
+ $('revealFact').innerHTML = ERAS[correct].fact;
+
+ updateMeta();
+ reveal.classList.add('show');
+ }
+
+ function next() {
+ round++;
+ if (round >= TOTAL) {
+ finish();
+ } else {
+ startRound();
+ }
+ }
+
+ function finish() {
+ play.classList.remove('show');
+ // persist best
+ if (score > best) {
+ best = score;
+ try { localStorage.setItem('dw_era_best', String(best)); } catch (e) {}
+ }
+ $('endScore').textContent = score + ' / ' + TOTAL;
+ $('endBest').textContent = String(best);
+
+ let headline, blurb;
+ if (score >= 8) {
+ headline = 'Impeccable eye.';
+ blurb = 'A perfect eight. You read mouldings and metals like a monographer — the archive would hire you tomorrow.';
+ } else if (score >= 6) {
+ headline = 'A refined eye.';
+ blurb = 'You know your sunbursts from your starbursts. A little more time with the sample books and you\'ll be flawless.';
+ } else if (score >= 4) {
+ headline = 'A promising start.';
+ blurb = 'The eras are beginning to sort themselves. Walk a few more period rooms and the silhouettes will lock in.';
+ } else {
+ headline = 'The tour continues.';
+ blurb = 'Every great decorator began by looking closely. Run it again — the vignettes will teach you their tells.';
+ }
+ $('endHeadline').textContent = headline;
+ $('endBlurb').textContent = blurb;
+ end.classList.add('show');
+ }
+
+ function startGame() {
+ intro.classList.add('hidden');
+ end.classList.remove('show');
+ play.classList.add('show');
+ round = 0;
+ score = 0;
+ buildSequence();
+ startRound();
+ }
+
+ // events
+ $('startBtn').addEventListener('click', startGame);
+ $('restartBtn').addEventListener('click', startGame);
+ nextBtn.addEventListener('click', next);
+ choicesEl.addEventListener('click', function (e) {
+ const btn = e.target.closest('.choice');
+ if (!btn || btn.disabled) return;
+ onGuess(btn.dataset.guess);
+ });
+
+ // init best display on intro path (shown once play starts)
+ $('bestNum').textContent = String(best);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/grok.png b/data/artifacts/0b9bb5066c06/grok.png
new file mode 100644
index 0000000..6a0d3a3
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/grok.png differ
diff --git a/data/artifacts/0b9bb5066c06/hermes3-8b.html b/data/artifacts/0b9bb5066c06/hermes3-8b.html
new file mode 100644
index 0000000..7640b85
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/hermes3-8b.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design Era Guessing Game</title>
+<style>
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: #faf8f4;
+ color: #1c1a17;
+ padding: 96px;
+ }
+ h1 {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 50px;
+ letter-spacing: .15em;
+ margin-bottom: 32px;
+ }
+ h2 {
+ font-size: 38px;
+ margin-bottom: 24px;
+ }
+ p {
+ max-width: 600px;
+ margin: 0 auto;
+ }
+ .card {
+ background-color: #fff9f1;
+ color: #3a2c22;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ margin-bottom: 48px;
+ padding: 32px;
+ transition: box-shadow .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
+ }
+ .card:hover {
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+ transform: translateY(-8px);
+ }
+ .btn {
+ background-color: #f5f2ea;
+ color: #17171c;
+ border-radius: 14px;
+ padding: 12px 32px;
+ margin: 0 auto;
+ display: block;
+ text-align: center;
+ letter-spacing: .15em;
+ transition: background-color .3s, color .3s, box-shadow .3s;
+ }
+ .btn:hover {
+ color: #fff;
+ background-color: #17171c;
+ box-shadow: 0 8px 24px rgba(0,0,0,.18);
+ text-decoration: none;
+ }
+</style>
+</head>
+<body>
+<div class="card">
+ <h1>Which Design Era?</h1>
+ <p>Guess the design era from the vignette below and try to score as many points as you can in these 8 rounds!</p>
+
+ <!--
+ Place your era images, buttons and game logic here.
+ -->
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/hermes3-8b.png b/data/artifacts/0b9bb5066c06/hermes3-8b.png
new file mode 100644
index 0000000..5c66785
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/hermes3-8b.png differ
diff --git a/data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.html b/data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..c486464
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.html
@@ -0,0 +1,136 @@
+<!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-color: #faf8f4;
+ --surface-color: #ffffff;
+ --text-color: #1c1a17;
+ --muted-color: #9b948a;
+ --accent-color: #b0472e;
+ --secondary-accent-color: #2f4c39;
+ --font-display: 'Playfair Display', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
+ }
+ body {
+ margin: 0;
+ font-family: var(--font-body);
+ color: var(--text-color);
+ background-color: var(--bg-color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ position: relative;
+ }
+ header {
+ width: 100%;
+ background-color: var(--surface-color);
+ padding: 24px 32px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ z-index: 1000;
+ }
+ header h1 {
+ font-family: var(--font-display);
+ font-size: 38px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ margin: 0;
+ }
+ main {
+ padding-top: 96px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+ }
+ .card {
+ background-color: var(--surface-color);
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ padding: 32px;
+ width: 90%;
+ max-width: 600px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .card img {
+ width: 100%;
+ border-radius: 14px;
+ margin-bottom: 24px;
+ }
+ .card button {
+ background-color: var(--accent-color);
+ color: var(--surface-color);
+ font-size: 28px;
+ padding: 16px 32px;
+ border: none;
+ border-radius: 14px;
+ cursor: pointer;
+ transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
+ margin-bottom: 16px;
+ }
+ .card button:hover {
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+ transform: translateY(-2px);
+ }
+ .card p {
+ font-size: 21px;
+ margin-bottom: 32px;
+ }
+ .card footer {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ font-size: 16px;
+ color: var(--muted-color);
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ .fade-up-enter-active {
+ animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both;
+ }
+ </style>
+</head>
+<body>
+<header>
+ <h1>DESIGNER WALLCOVERINGS</h1>
+</header>
+<main>
+ <div class="card fade-up-enter-active">
+ <img id="era-image" src="" alt="Design Era Interior Vignette">
+ <button onclick="guess('Victorian')">VICTORIAN</button>
+ <button onclick="guess('Art Deco')">ART DECO</button>
+ <button onclick="guess('Mid-Century Modern')">MID-CENTURY MODERN</button>
+ <button onclick="guess('Grandmillennial')">GRANDMILLENNIAL</button>
+ <p id="result-message"></p>
+ <footer>
+ <span>Score: <span id="score">0</span></span>
+ <span>Best Score: <span id="best-score">0</span></span>
+ </footer>
+ </div>
+</main>
+<script>
+ const eras = ['Victorian', 'Art Deco', 'Mid-Century Modern', 'Grandmillennial'];
+ const facts = {
+ 'Victorian': "Victorian era design is characterized by elaborate ornamentation, rich textures, and vibrant colors.",
+ 'Art Deco': "Art Deco features sleek, geometric shapes, metallic finishes, and bold, modernist aesthetics.",
+ 'Mid-Century Modern': "This period emphasizes clean lines, natural materials, and a mix of traditional and modern styles.",
+ 'Grandmillennial': "Combining retro-futuristic elements with luxury and glamour, Grandmillennial design exudes opulence."
+ };
+ const images = {
+ 'Victorian': "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAAAW2QGkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASzSURBVHhe7d3NixrXHYeDZ2dndndndndndndndndndndndndndndndndndndndndndndndndndndndndndndnd
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.png b/data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..d40a514
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/0b9bb5066c06/kimi.html b/data/artifacts/0b9bb5066c06/kimi.html
new file mode 100644
index 0000000..cc4cfd8
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/kimi.html
@@ -0,0 +1,816 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>DESIGNER WALLCOVERINGS — Design Era Quiz</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent2: #7d6a45;
+ --swift-out: cubic-bezier(.22,.9,.24,1);
+ --power-in-out: cubic-bezier(.77,0,.18,1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ min-height: 100vh;
+ line-height: 1.6;
+ overflow-x: hidden;
+ }
+
+ /* Fixed Header */
+ .header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 72px;
+ background: rgba(13, 13, 15, 0.95);
+ backdrop-filter: blur(20px);
+ border-bottom: 1px solid rgba(201, 169, 97, 0.15);
+ display: flex;
+ align-items: center;
+ padding: 0 48px;
+ z-index: 1000;
+ }
+
+ .wordmark {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 14px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ font-weight: 400;
+ }
+
+ /* Main Content */
+ .main {
+ padding-top: 120px;
+ padding-bottom: 80px;
+ max-width: 900px;
+ margin: 0 auto;
+ padding-left: 24px;
+ padding-right: 24px;
+ }
+
+ /* Game Header */
+ .game-header {
+ text-align: center;
+ margin-bottom: 48px;
+ }
+
+ .game-title {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ margin-bottom: 12px;
+ color: var(--text);
+ }
+
+ .game-subtitle {
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .score-board {
+ display: flex;
+ justify-content: center;
+ gap: 48px;
+ margin-top: 32px;
+ padding: 24px;
+ border: 1px solid rgba(201, 169, 97, 0.2);
+ background: var(--surface);
+ }
+
+ .score-item {
+ text-align: center;
+ }
+
+ .score-label {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 8px;
+ }
+
+ .score-value {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 28px;
+ color: var(--accent);
+ }
+
+ /* Vignette Container */
+ .vignette-container {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 4/3;
+ background: var(--surface);
+ border: 1px solid rgba(201, 169, 97, 0.2);
+ margin-bottom: 48px;
+ overflow: hidden;
+ box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+ transition: transform 0.6s var(--swift-out);
+ }
+
+ .vignette-container:hover {
+ transform: translateY(-4px);
+ }
+
+ /* Victorian Era CSS Art */
+ .era-victorian {
+ background: linear-gradient(180deg, #2a2420 0%, #1a1512 100%);
+ position: relative;
+ }
+
+ .era-victorian::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 50% at 50% 30%, rgba(139, 90, 43, 0.3), transparent),
+ repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,0.1) 40px, rgba(0,0,0,0.1) 41px);
+ }
+
+ .victorian-wallpaper {
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 20% 20%, rgba(201, 169, 97, 0.15) 0%, transparent 50%),
+ radial-gradient(circle at 80% 80%, rgba(139, 90, 43, 0.2) 0%, transparent 40%);
+ }
+
+ .victorian-chair {
+ position: absolute;
+ bottom: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 160px;
+ height: 200px;
+ }
+
+ .victorian-chair::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 20px;
+ width: 120px;
+ height: 80px;
+ background: linear-gradient(180deg, #4a3728 0%, #2f1f16 100%);
+ border-radius: 4px 4px 0 0;
+ border: 2px solid #6b4423;
+ }
+
+ .victorian-chair::after {
+ content: '';
+ position: absolute;
+ bottom: 80px;
+ left: 10px;
+ width: 140px;
+ height: 120px;
+ background: linear-gradient(180deg, #3d2b1f 0%, #1f1510 100%);
+ border-radius: 60px 60px 0 0;
+ border: 3px solid #6b4423;
+ }
+
+ .victorian-lamp {
+ position: absolute;
+ top: 60px;
+ right: 80px;
+ width: 60px;
+ height: 100px;
+ }
+
+ .victorian-lamp::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 20px;
+ width: 20px;
+ height: 60px;
+ background: linear-gradient(90deg, #8b7355, #6b5344);
+ }
+
+ .victorian-lamp::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 60px;
+ height: 40px;
+ background: radial-gradient(ellipse, rgba(255, 220, 150, 0.6), rgba(201, 169, 97, 0.3));
+ border-radius: 50% 50% 20% 20%;
+ border: 2px solid #6b4423;
+ }
+
+ /* Art Deco Era CSS Art */
+ .era-artdeco {
+ background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
+ position: relative;
+ }
+
+ .artdeco-sunburst {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 300px;
+ height: 300px;
+ background:
+ conic-gradient(from 0deg, transparent 0deg, var(--accent) 2deg, transparent 4deg, transparent 14deg, var(--accent) 16deg, transparent 18deg, transparent 28deg, var(--accent) 30deg, transparent 32deg, transparent 42deg, var(--accent) 44deg, transparent 46deg, transparent 56deg, var(--accent) 58deg, transparent 60deg, transparent 70deg, var(--accent) 72deg, transparent 74deg, transparent 84deg, var(--accent) 86deg, transparent 88deg, transparent 98deg, var(--accent) 100deg, transparent 102deg, transparent 112deg, var(--accent) 114deg, transparent 116deg, transparent 126deg, var(--accent) 128deg, transparent 130deg, transparent 140deg, var(--accent) 142deg, transparent 144deg, transparent 154deg, var(--accent) 156deg, transparent 158deg, transparent 168deg, var(--accent) 170deg, transparent 172deg, transparent 182deg, var(--accent) 184deg, transparent 186deg, transparent 196deg, var(--accent) 198deg, transparent 200deg, transparent 210deg, var(--accent) 212deg, transparent 214deg, transparent 224deg, var(--accent) 226deg, transparent 228deg, transparent 238deg, var(--accent) 240deg, transparent 242deg, transparent 252deg, var(--accent) 254deg, transparent 256deg, transparent 266deg, var(--accent) 268deg, transparent 270deg, transparent 280deg, var(--accent) 282deg, transparent 284deg, transparent 294deg, var(--accent) 296deg, transparent 298deg, transparent 308deg, var(--accent) 310deg, transparent 312deg, transparent 322deg, var(--accent) 324deg, transparent 326deg, transparent 336deg, var(--accent) 338deg, transparent 340deg, transparent 350deg, var(--accent) 352deg, transparent 354deg);
+ opacity: 0.3;
+ }
+
+ .artdeco-console {
+ position: absolute;
+ bottom: 60px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 240px;
+ height: 100px;
+ background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
+ border: 2px solid var(--accent);
+ border-radius: 4px;
+ }
+
+ .artdeco-console::before {
+ content: '';
+ position: absolute;
+ top: -40px;
+ left: 20px;
+ right: 20px;
+ height: 40px;
+ background: linear-gradient(180deg, rgba(201, 169, 97, 0.3), transparent);
+ border-left: 1px solid var(--accent);
+ border-right: 1px solid var(--accent);
+ }
+
+ .artdeco-mirror {
+ position: absolute;
+ top: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 120px;
+ height: 160px;
+ background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(201, 169, 97, 0.2));
+ border: 3px solid var(--accent);
+ border-radius: 0;
+ box-shadow: 0 0 20px rgba(201, 169, 97, 0.3);
+ }
+
+ .artdeco-geometry {
+ position: absolute;
+ bottom: 20px;
+ right: 40px;
+ width: 80px;
+ height: 80px;
+ border: 2px solid var(--accent);
+ transform: rotate(45deg);
+ opacity: 0.5;
+ }
+
+ /* Mid-Century Modern Era CSS Art */
+ .era-midcentury {
+ background: linear-gradient(180deg, #e8e4dc 0%, #d4cfc4 100%);
+ position: relative;
+ }
+
+ .midcentury-wall {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(90deg, transparent 49%, rgba(139, 125, 107, 0.1) 50%, transparent 51%),
+ linear-gradient(0deg, transparent 49%, rgba(139, 125, 107, 0.1) 50%, transparent 51%);
+ background-size: 60px 60px;
+ }
+
+ .midcentury-chair {
+ position: absolute;
+ bottom: 80px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 140px;
+ height: 140px;
+ }
+
+ .midcentury-chair::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 20px;
+ width: 100px;
+ height: 20px;
+ background: #8b6914;
+ border-radius: 10px;
+ }
+
+ .midcentury-chair::after {
+ content: '';
+ position: absolute;
+ bottom: 20px;
+ left: 10px;
+ width: 120px;
+ height: 100px;
+ background: linear-gradient(135deg, #d4a574 0%, #a67c52 100%);
+ border-radius: 20px 20px 0 0;
+ box-shadow: -10px 0 0 #6b4423, 10px 0 0 #6b4423;
+ }
+
+ .midcentury-plant {
+ position: absolute;
+ bottom: 60px;
+ right: 80px;
+ width: 80px;
+ height: 120px;
+ }
+
+ .midcentury-plant::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 30px;
+ width: 20px;
+ height: 40px;
+ background: #5c4033;
+ border-radius: 0 0 10px 10px;
+ }
+
+ .midcentury-plant::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 10px;
+ width: 60px;
+ height: 80px;
+ background: radial-gradient(ellipse at 30% 70%, #4a7c59 0%, #2d5a3d 50%, transparent 70%);
+ border-radius: 50%;
+ }
+
+ /* Grandmillennial Era CSS Art */
+ .era-grandmillennial {
+ background: linear-gradient(180deg, #f5f0e8 0%, #e8e0d4 100%);
+ position: relative;
+ }
+
+ .grandmillennial-wallpaper {
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 25% 25%, rgba(201, 169, 97, 0.2) 0%, transparent 15%),
+ radial-gradient(circle at 75% 75%, rgba(139, 90, 43, 0.15) 0%, transparent 20%);
+ background-size: 80px 80px;
+ }
+
+ .grandmillennial-sofa {
+ position: absolute;
+ bottom: 50px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 200px;
+ height: 100px;
+ background: linear-gradient(180deg, #d4a5a5 0%, #b88a8a 100%);
+ border-radius: 20px 20px 0 0;
+ border: 3px solid #fff;
+ box-shadow: inset 0 10px 20px rgba(255,255,255,0.5);
+ }
+
+ .grandmillennial-sofa::before {
+ content: '';
+ position: absolute;
+ top: -30px;
+ left: 20px;
+ right: 20px;
+ height: 30px;
+ background: repeating-linear-gradient(90deg, #d4a5a5, #d4a5a5 20px, #fff 20px, #fff 22px);
+ border-radius: 10px 10px 0 0;
+ }
+
+ .grandmillennial-table {
+ position: absolute;
+ bottom: 30px;
+ right: 60px;
+ width: 60px;
+ height: 60px;
+ background: #8b6914;
+ border-radius: 50%;
+ border: 4px solid #fff;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+ }
+
+ .grandmillennial-basket {
+ position: absolute;
+ bottom: 40px;
+ left: 60px;
+ width: 50px;
+ height: 40px;
+ background: repeating-linear-gradient(0deg, #d4a574, #d4a574 4px, #8b6914 4px, #8b6914 6px);
+ border-radius: 0 0 25px 25px;
+ border: 2px solid #8b6914;
+ }
+
+ /* Controls */
+ .controls {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ margin-bottom: 32px;
+ }
+
+ .guess-btn {
+ padding: 20px 32px;
+ background: transparent;
+ border: 1px solid rgba(201, 169, 97, 0.4);
+ color: var(--text);
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 16px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 0.4s var(--swift-out);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .guess-btn::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--accent);
+ opacity: 0;
+ transition: opacity 0.4s var(--swift-out);
+ }
+
+ .guess-btn:hover {
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(201, 169, 97, 0.15);
+ }
+
+ .guess-btn:hover::before {
+ opacity: 0.1;
+ }
+
+ .guess-btn span {
+ position: relative;
+ z-index: 1;
+ }
+
+ .guess-btn.correct {
+ background: rgba(201, 169, 97, 0.2);
+ border-color: var(--accent);
+ pointer-events: none;
+ }
+
+ .guess-btn.incorrect {
+ opacity: 0.4;
+ pointer-events: none;
+ }
+
+ /* Reveal Panel */
+ .reveal-panel {
+ background: var(--surface);
+ border: 1px solid rgba(201, 169, 97, 0.2);
+ padding: 32px;
+ margin-bottom: 32px;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.6s var(--swift-out);
+ display: none;
+ }
+
+ .reveal-panel.active {
+ display: block;
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .reveal-title {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 28px;
+ color: var(--accent);
+ margin-bottom: 16px;
+ letter-spacing: -0.01em;
+ }
+
+ .reveal-fact {
+ font-size: 16px;
+ line-height: 1.7;
+ color: var(--text);
+ margin-bottom: 24px;
+ }
+
+ .next-btn, .restart-btn {
+ padding: 16px 40px;
+ background: var(--accent);
+ border: none;
+ color: var(--bg);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 0.4s var(--swift-out);
+ }
+
+ .next-btn:hover, .restart-btn:hover {
+ background: var(--text);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(201, 169, 97, 0.3);
+ }
+
+ /* Game Over */
+ .game-over {
+ text-align: center;
+ padding: 48px;
+ background: var(--surface);
+ border: 1px solid rgba(201, 169, 97, 0.2);
+ display: none;
+ }
+
+ .game-over.active {
+ display: block;
+ }
+
+ .final-score {
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 67px;
+ color: var(--accent);
+ margin: 24px 0;
+ letter-spacing: -0.02em;
+ }
+
+ .best-score {
+ font-size: 14px;
+ color: var(--muted);
+ margin-bottom: 32px;
+ }
+
+ .round-indicator {
+ text-align: center;
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 24px;
+ }
+
+ /* Fade animation for era transition */
+ @keyframes fadeIn {
+ from { opacity: 0; transform: scale(0.98); }
+ to { opacity: 1; transform: scale(1); }
+ }
+
+ .vignette-container.new-era {
+ animation: fadeIn 0.8s var(--swift-out);
+ }
+ </style>
+</head>
+<body>
+ <header class="header">
+ <div class="wordmark">DESIGNER WALLCOVERINGS</div>
+ </header>
+
+ <main class="main">
+ <div class="game-header">
+ <h1 class="game-title">Which Design Era?</h1>
+ <p class="game-subtitle">Identify the interior design style</p>
+
+ <div class="score-board">
+ <div class="score-item">
+ <div class="score-label">Score</div>
+ <div class="score-value" id="currentScore">0</div>
+ </div>
+ <div class="score-item">
+ <div class="score-label">Round</div>
+ <div class="score-value" id="currentRound">1/8</div>
+ </div>
+ <div class="score-item">
+ <div class="score-label">Best</div>
+ <div class="score-value" id="bestScore">0</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="round-indicator" id="roundIndicator">Round 1 of 8</div>
+
+ <div class="vignette-container" id="vignette">
+ <!-- Era-specific CSS art will be injected here -->
+ </div>
+
+ <div class="controls" id="controls">
+ <button class="guess-btn" onclick="makeGuess('Victorian')"><span>Victorian</span></button>
+ <button class="guess-btn" onclick="makeGuess('Art Deco')"><span>Art Deco</span></button>
+ <button class="guess-btn" onclick="makeGuess('Mid-Century Modern')"><span>Mid-Century Modern</span></button>
+ <button class="guess-btn" onclick="makeGuess('Grandmillennial')"><span>Grandmillennial</span></button>
+ </div>
+
+ <div class="reveal-panel" id="revealPanel">
+ <div class="reveal-title" id="revealTitle"></div>
+ <div class="reveal-fact" id="revealFact"></div>
+ <button class="next-btn" id="nextBtn" onclick="nextRound()">Next Room</button>
+ </div>
+
+ <div class="game-over" id="gameOver">
+ <div class="game-subtitle">Game Complete</div>
+ <div class="final-score" id="finalScore">0/8</div>
+ <div class="best-score" id="finalBest">Best: 0</div>
+ <button class="restart-btn" onclick="restartGame()">Play Again</button>
+ </div>
+ </main>
+
+ <script>
+ const eras = {
+ 'Victorian': {
+ class: 'era-victorian',
+ html: `
+ <div class="victorian-wallpaper"></div>
+ <div class="victorian-chair"></div>
+ <div class="victorian-lamp"></div>
+ `,
+ fact: 'Victorian interiors (1837-1901) embraced maximalism with rich damasks, dark mahogany furniture, and heavy drapery. Walls were often covered in ornate wallpaper featuring florals and scrollwork, while gas lighting cast warm, dramatic shadows across cluttered parlors filled with collected curiosities.'
+ },
+ 'Art Deco': {
+ class: 'era-artdeco',
+ html: `
+ <div class="artdeco-sunburst"></div>
+ <div class="artdeco-mirror"></div>
+ <div class="artdeco-console"></div>
+ <div class="artdeco-geometry"></div>
+ `,
+ fact: 'Art Deco (1920s-1930s) celebrated the machine age with geometric patterns, sunburst motifs, and luxurious materials like lacquer, chrome, and exotic woods. Interiors featured stepped forms, chevrons, and zebra prints, reflecting the era\'s fascination with speed, luxury, and modernity.'
+ },
+ 'Mid-Century Modern': {
+ class: 'era-midcentury',
+ html: `
+ <div class="midcentury-wall"></div>
+ <div class="midcentury-chair"></div>
+ <div class="midcentury-plant"></div>
+ `,
+ fact: 'Mid-Century Modern (1945-1969) brought the outdoors in with organic shapes, clean lines, and materials like teak, walnut, and molded plastic. Open floor plans, large windows, and biomorphic forms created harmonious spaces that rejected ornament in favor of functional beauty and connection to nature.'
+ },
+ 'Grandmillennial': {
+ class: 'era-grandmillennial',
+ html: `
+ <div class="grandmillennial-wallpaper"></div>
+ <div class="grandmillennial-sofa"></div>
+ <div class="grandmillennial-table"></div>
+ <div class="grandmillennial-basket"></div>
+ `,
+ fact: 'Grandmillennial style (2010s-present) rebels against minimalism by embracing chintz, ruffles, wicker, and collected antiques. This "granny chic" aesthetic mixes traditional patterns like toile and florals with fresh colors, creating layered, nostalgic spaces that celebrate craftsmanship and inherited treasures.'
+ }
+ };
+
+ const eraNames = Object.keys(eras);
+ let currentRound = 1;
+ let totalRounds = 8;
+ let score = 0;
+ let currentEra = '';
+ let roundEras = [];
+ let hasGuessed = false;
+
+ function initGame() {
+ const savedBest = localStorage.getItem('dwDesignEraBest');
+ if (savedBest) {
+ document.getElementById('bestScore').textContent = savedBest;
+ }
+ generateRoundOrder();
+ loadRound();
+ }
+
+ function generateRoundOrder() {
+ roundEras = [];
+ for (let i = 0; i < totalRounds; i++) {
+ roundEras.push(eraNames[Math.floor(Math.random() * eraNames.length)]);
+ }
+ }
+
+ function loadRound() {
+ hasGuessed = false;
+ currentEra = roundEras[currentRound - 1];
+ const vignette = document.getElementById('vignette');
+ const era = eras[currentEra];
+
+ vignette.className = 'vignette-container new-era ' + era.class;
+ vignette.innerHTML = era.html;
+
+ document.getElementById('roundIndicator').textContent = `Round ${currentRound} of ${totalRounds}`;
+ document.getElementById('currentRound').textContent = `${currentRound}/${totalRounds}`;
+ document.getElementById('revealPanel').classList.remove('active');
+
+ // Reset buttons
+ document.querySelectorAll('.guess-btn').forEach(btn => {
+ btn.classList.remove('correct', 'incorrect');
+ btn.style.pointerEvents = 'auto';
+ btn.style.opacity = '1';
+ });
+
+ // Remove animation class after animation completes
+ setTimeout(() => {
+ vignette.classList.remove('new-era');
+ }, 800);
+ }
+
+ function makeGuess(era) {
+ if (hasGuessed) return;
+ hasGuessed = true;
+
+ const buttons = document.querySelectorAll('.guess-btn');
+ const revealPanel = document.getElementById('revealPanel');
+ const revealTitle = document.getElementById('revealTitle');
+ const revealFact = document.getElementById('revealFact');
+
+ buttons.forEach(btn => {
+ const btnEra = btn.getAttribute('onclick').match(/'([^']+)'/)[1];
+ if (btnEra === currentEra) {
+ btn.classList.add('correct');
+ } else if (btn === event.target.closest('button')) {
+ btn.classList.add('incorrect');
+ } else {
+ btn.style.opacity = '0.4';
+ }
+ btn.style.pointerEvents = 'none';
+ });
+
+ if (era === currentEra) {
+ score++;
+ document.getElementById('currentScore').textContent = score;
+ revealTitle.textContent = 'Correct — ' + currentEra;
+ } else {
+ revealTitle.textContent = 'It was ' + currentEra;
+ }
+
+ revealFact.textContent = eras[currentEra].fact;
+ revealPanel.classList.add('active');
+
+ if (currentRound === totalRounds) {
+ document.getElementById('nextBtn').textContent = 'See Final Score';
+ }
+ }
+
+ function nextRound() {
+ if (currentRound < totalRounds) {
+ currentRound++;
+ loadRound();
+ } else {
+ endGame();
+ }
+ }
+
+ function endGame() {
+ document.getElementById('vignette').style.display = 'none';
+ document.getElementById('controls').style.display = 'none';
+ document.getElementById('revealPanel').style.display = 'none';
+ document.getElementById('roundIndicator').style.display = 'none';
+ document.getElementById('gameOver').classList.add('active');
+ document.getElementById('finalScore').textContent = score + '/' + totalRounds;
+
+ const savedBest = parseInt(localStorage.getItem('dwDesignEraBest') || '0');
+ if (score > savedBest) {
+ localStorage.setItem('dwDesignEraBest', score);
+ document.getElementById('finalBest').textContent = 'New Best! Previous: ' + savedBest;
+ } else {
+ document.getElementById('finalBest').textContent = 'Best: ' + Math.max(savedBest, score);
+ }
+ }
+
+ function restartGame() {
+ currentRound = 1;
+ score = 0;
+ document.getElementById('currentScore').textContent = '0';
+ document.getElementById('vignette').style.display = 'block';
+ document.getElementById('controls').style.display = 'grid';
+ document.getElementById('revealPanel').style.display = 'block';
+ document.getElementById('roundIndicator').style.display = 'block';
+ document.getElementById('gameOver').classList.remove('active');
+ document.getElementById('nextBtn').textContent = 'Next Room';
+
+ const savedBest = localStorage.getItem('dwDesignEraBest');
+ if (savedBest) {
+ document.getElementById('bestScore').textContent = savedBest;
+ }
+
+ generateRoundOrder();
+ loadRound();
+ }
+
+ // Initialize
+ initGame();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/kimi.png b/data/artifacts/0b9bb5066c06/kimi.png
new file mode 100644
index 0000000..63d4348
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/kimi.png differ
diff --git a/data/artifacts/0b9bb5066c06/qwen25-7b.html b/data/artifacts/0b9bb5066c06/qwen25-7b.html
new file mode 100644
index 0000000..c29b228
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/qwen25-7b.html
@@ -0,0 +1,127 @@
+<!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>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ body {
+ background-color: #f7efe6;
+ color: #3a2c22;
+ font-family: 'Didot', serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ .top-bar {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ background-color: #17171c;
+ padding: 24px;
+ text-align: left;
+ color: #f5f2ea;
+ font-size: 2rem;
+ letter-spacing: .18em;
+ }
+ .game-container {
+ max-width: 600px;
+ width: 100%;
+ padding: 48px;
+ background-color: white;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ }
+ .title {
+ font-size: 38px;
+ margin-bottom: 32px;
+ }
+ .options {
+ display: flex;
+ justify-content: space-around;
+ gap: 16px;
+ }
+ .option-btn {
+ padding: 16px 32px;
+ background-color: #c9a961;
+ color: white;
+ border: none;
+ border-radius: 14px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: all .3s ease;
+ }
+ .option-btn:hover {
+ transform: translateY(-2px);
+ }
+ .fact-reveal {
+ margin-top: 32px;
+ text-align: center;
+ opacity: 0;
+ animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both;
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ </style>
+</head>
+<body>
+ <div class="top-bar">DESIGNER WALLCOVERINGS</div>
+ <div class="game-container">
+ <h1 class="title">Which Design Era?</h1>
+ <p id="guess">Guess the era:</p>
+ <div class="options" id="options">
+ <button class="option-btn" onclick="checkEra('Victorian')">Victorian</button>
+ <button class="option-btn" onclick="checkEra('Art Deco')">Art Deco</button>
+ <button class="option-btn" onclick="checkEra('Mid-Century Modern')">Mid-Century Modern</button>
+ <button class="option-btn" onclick="checkEra('Grandmillennial')">Grandmillennial</button>
+ </div>
+ <p id="score">Score: 0/8</p>
+ <div id="fact-reveal" class="fact-reveal"></div>
+ </div>
+
+ <script>
+ const eras = ['Victorian', 'Art Deco', 'Mid-Century Modern', 'Grandmillennial'];
+ let correctCount = 0;
+ let score = localStorage.getItem('score') || 0;
+
+ function checkEra(era) {
+ if (eras.includes(era)) {
+ const factIndex = eras.indexOf(era);
+ document.getElementById('fact-reveal').textContent = `Correct! The era is ${era}. Here's a fun-fact: ${getFunFact(factIndex)}`;
+ correctCount++;
+ score += 1;
+ } else {
+ document.getElementById('fact-reveal').textContent = 'Incorrect, try again!';
+ }
+ if (correctCount === 8) {
+ alert(`Congratulations! You scored ${score}/8`);
+ localStorage.setItem('score', score);
+ window.location.reload();
+ } else {
+ score++;
+ localStorage.setItem('score', score);
+ }
+ document.getElementById('score').textContent = `Score: ${score}/8`;
+ }
+
+ function getFunFact(index) {
+ const facts = [
+ "Victorian era is known for its intricate woodwork and ornate designs.",
+ "Art Deco features geometric patterns and bold, streamlined forms.",
+ "Mid-Century Modern emphasizes simplicity and functionality in design.",
+ "Grandmillennial combines futuristic elements with nostalgic references."
+ ];
+ return facts[index];
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/qwen25-7b.png b/data/artifacts/0b9bb5066c06/qwen25-7b.png
new file mode 100644
index 0000000..c87bb06
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/qwen25-7b.png differ
diff --git a/data/artifacts/0b9bb5066c06/qwen3-14b.html b/data/artifacts/0b9bb5066c06/qwen3-14b.html
new file mode 100644
index 0000000..ff3ce9e
--- /dev/null
+++ b/data/artifacts/0b9bb5066c06/qwen3-14b.html
@@ -0,0 +1,312 @@
+<!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: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ --glow: 0 0 24px rgba(201, 169, 97, 0.35);
+ --spacing: 4px 8px 12px 16px 24px 32px 48px 64px 96px 128px;
+ --card-radius: 14px;
+ --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ --type-scale: 12px 16px 21px 28px 38px 50px 67px;
+ }
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: var(--font-body);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--surface);
+ padding: var(--spacing-8) var(--spacing-16);
+ font-family: var(--font-display);
+ font-size: var(--type-scale-3);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ box-shadow: var(--shadow);
+ }
+
+ main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-16) var(--spacing-24);
+ position: relative;
+ z-index: 1;
+ }
+
+ .vignette {
+ width: 100%;
+ max-width: 600px;
+ height: 400px;
+ border-radius: var(--card-radius);
+ background-size: cover;
+ background-position: center;
+ box-shadow: var(--shadow);
+ transition: transform 0.25s ease-in-out;
+ }
+
+ .vignette:hover {
+ transform: scale(1.02);
+ box-shadow: var(--shadow), var(--glow);
+ }
+
+ .scoreboard {
+ margin-bottom: var(--spacing-24);
+ font-size: var(--type-scale-2);
+ font-family: var(--font-display);
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .scoreboard span {
+ color: var(--accent);
+ font-weight: bold;
+ }
+
+ .buttons {
+ display: flex;
+ gap: var(--spacing-16);
+ margin-bottom: var(--spacing-32);
+ }
+
+ .button {
+ padding: var(--spacing-8) var(--spacing-16);
+ font-size: var(--type-scale-1);
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ background-color: var(--surface);
+ color: var(--text);
+ border: 1px solid var(--muted);
+ border-radius: var(--card-radius);
+ transition: background-color 0.2s ease, box-shadow 0.2s ease;
+ cursor: pointer;
+ }
+
+ .button:hover {
+ background-color: var(--muted);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
+
+ .button:active {
+ transform: scale(0.98);
+ }
+
+ .result {
+ font-size: var(--type-scale-2);
+ font-family: var(--font-display);
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--accent);
+ text-align: center;
+ margin-bottom: var(--spacing-16);
+ }
+
+ .fact {
+ font-size: var(--type-scale-1);
+ color: var(--text);
+ text-align: center;
+ max-width: 600px;
+ margin: 0 auto;
+ }
+
+ .footer {
+ margin-top: var(--spacing-32);
+ font-size: var(--type-scale-1);
+ font-family: var(--font-display);
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+ text-align: center;
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .fade-in {
+ animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+ }
+
+ .fade-in-delay {
+ animation-delay: 0.1s;
+ }
+
+ @keyframes drift {
+ 0% { background-position: 0% 50%; }
+ 100% { background-position: 100% 50%; }
+ }
+
+ body {
+ background-image: linear-gradient(135deg, #0d0d0f 0%, #17171c 100%);
+ background-size: 800% 800%;
+ animation: drift 18s ease-in-out infinite;
+ }
+ </style>
+</head>
+<body>
+ <header class="fade-in">DESIGNER WALLCOVERINGS</header>
+ <main>
+ <div class="scoreboard fade-in" id="scoreboard">SCORE: <span>0</span> / 8</div>
+ <div class="vignette" id="vignette"></div>
+ <div class="buttons fade-in" id="buttons"></div>
+ <div class="result" id="result"></div>
+ <div class="fact" id="fact"></div>
+ <div class="footer fade-in">DESIGN YOUR SPACE. REDEFINE STYLE.</div>
+ </main>
+ <script>
+ const eras = [
+ {
+ name: "Victorian",
+ image: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80",
+ fact: "The Victorian era was marked by the use of rich materials and intricate detailing, often inspired by nature and the Arts and Crafts movement."
+ },
+ {
+ name: "Art Deco",
+ image: "https://images.unsplash.com/photo-1507973952625-54448983683e?auto=format&fit=crop&w=600&q=80",
+ fact: "Art Deco, popular in the 1920s-1940s, featured bold geometric shapes, lavish materials, and a love for symmetry and luxury."
+ },
+ {
+ name: "Mid-Century Modern",
+ image: "https://images.unsplash.com/photo-1473152992598-f18e0f6078e6?auto=format&fit=crop&w=600&q=80",
+ fact: "Mid-Century Modern design, from the 1950s-1960s, emphasized clean lines, functionality, and a minimalist aesthetic with organic curves."
+ },
+ {
+ name: "Grandmillennial",
+ image: "https://images.unsplash.com/photo-1539838636893-2d63f0b61b4f?auto=format&fit=crop&w=600&q=80",
+ fact: "Grandmillennial style blends vintage charm with modern comfort, often featuring pastel hues, floral prints, and ornate details."
+ }
+ ];
+
+ let currentRound = 0;
+ let score = 0;
+ let currentEra = {};
+ let highScore = localStorage.getItem("highScore") || 0;
+
+ const vignette = document.getElementById("vignette");
+ const buttons = document.getElementById("buttons");
+ const result = document.getElementById("result");
+ const fact = document.getElementById("fact");
+ const scoreboard = document.getElementById("scoreboard");
+
+ function shuffle(array) {
+ for (let i = array.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [array[i], array[j]] = [array[j], array[i]];
+ }
+ return array;
+ }
+
+ function generateButtons() {
+ const shuffled = shuffle(eras);
+ buttons.innerHTML = "";
+ shuffled.forEach((era) => {
+ const button = document.createElement("button");
+ button.classList.add("button");
+ button.textContent = era.name;
+ button.addEventListener("click", () => {
+ if (era.name === currentEra.name) {
+ score++;
+ result.textContent = "Correct!";
+ result.style.color = "var(--accent)";
+ updateScoreboard();
+ } else {
+ result.textContent = "Incorrect. Try again!";
+ result.style.color = "var(--muted)";
+ }
+ setTimeout(showFact, 1000);
+ });
+ buttons.appendChild(button);
+ });
+ }
+
+ function showFact() {
+ result.textContent = "";
+ fact.textContent = currentEra.fact;
+ currentRound++;
+ if (currentRound < 8) {
+ setTimeout(loadNextRound, 3000);
+ } else {
+ endGame();
+ }
+ }
+
+ function loadNextRound() {
+ currentEra = eras[Math.floor(Math.random() * eras.length)];
+ vignette.style.backgroundImage = `url('${currentEra.image}')`;
+ generateButtons();
+ fact.textContent = "";
+ }
+
+ function updateScoreboard() {
+ scoreboard.querySelector("span").textContent = score;
+ }
+
+ function endGame() {
+ if (score > highScore) {
+ localStorage.setItem("highScore", score);
+ highScore = score;
+ }
+ result.textContent = "Game Over!";
+ fact.textContent = `Your score: ${score}. High score: ${highScore}.`;
+ buttons.innerHTML = "<button class='button'>Restart</button>";
+ buttons.querySelector("button").addEventListener("click", () => {
+ resetGame();
+ });
+ }
+
+ function resetGame() {
+ currentRound = 0;
+ score = 0;
+ currentEra = {};
+ result.textContent = "";
+ fact.textContent = "";
+ updateScoreboard();
+ loadNextRound();
+ }
+
+ function init() {
+ currentEra = eras[Math.floor(Math.random() * eras.length)];
+ vignette.style.backgroundImage = `url('${currentEra.image}')`;
+ generateButtons();
+ updateScoreboard();
+ }
+
+ init();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/0b9bb5066c06/qwen3-14b.png b/data/artifacts/0b9bb5066c06/qwen3-14b.png
new file mode 100644
index 0000000..136451d
Binary files /dev/null and b/data/artifacts/0b9bb5066c06/qwen3-14b.png differ
diff --git a/data/artifacts/52cab5a7ddb7/gemma3-12b.html b/data/artifacts/52cab5a7ddb7/gemma3-12b.html
new file mode 100644
index 0000000..68d43e0
--- /dev/null
+++ b/data/artifacts/52cab5a7ddb7/gemma3-12b.html
@@ -0,0 +1,368 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Tron Light Cycles</title>
+ <style>
+ *{margin:0;padding:0;box-sizing:border-box}
+ body{background:#000;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden;color:#0ff}
+ #wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
+ canvas{border:2px solid #0ff;box-shadow:0 0 20px #0ff4,inset 0 0 40px #0ff1;background:#050510;image-rendering:pixelated;cursor:none}
+ #hud{display:flex;gap:32px;font-size:14px;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px #0ff}
+ #hud span{color:#fff}
+ #overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0,0,0,.85);z-index:10;gap:16px}
+ #overlay h1{font-size:48px;letter-spacing:8px;text-shadow:0 0 20px #0ff,0 0 40px #0ff;color:#0ff}
+ #overlay p{font-size:16px;color:#8ff;letter-spacing:2px;max-width:400px;text-align:center;line-height:1.6}
+ #overlay .btn{margin-top:12px;padding:12px 36px;border:2px solid #0ff;background:transparent;color:#0ff;font-size:18px;letter-spacing:4px;cursor:pointer;text-transform:uppercase;transition:all .2s;font-family:inherit}
+ #overlay .btn:hover{background:#0ff;color:#000;box-shadow:0 0 30px #0ff}
+ #scores{display:flex;gap:40px;font-size:13px;letter-spacing:1px}
+ .p1{color:#0ff;text-shadow:0 0 6px #0ff}
+ .p2{color:#f0f;text-shadow:0 0 6px #f0f}
+ .hidden{display:none!important}
+ </style>
+</head>
+<body onkeydown="handleKeyDown(event)">
+ <div id="wrap">
+ <div id="hud">
+ <div class="p1">YOU <span id="s1">0</span></div>
+ <div class="p2">CPU <span id="s2">0</span></div>
+ </div>
+ <canvas id="c" width="640" height="480"></canvas>
+ <div id="overlay">
+ <h1 style="font-size: 52px; letter-spacing: 10px;">TRON</h1>
+ <p style="font-size: 18px; line-height: 1.7;">Light Cycles — survive longer than the CPU.<br>Arrow keys or WASD to steer.<br>Don't hit walls or trails.</p>
+ <button class="btn" id="startBtn">Start</button>
+ </div>
+ </div>
+ <script>
+ const canvas = document.getElementById('c');
+ const ctx = canvas.getContext('2d');
+ const overlay = document.getElementById('overlay');
+ const startBtn = document.getElementById('startBtn');
+ const s1El = document.getElementById('s1');
+ const s2El = document.getElementById('s2');
+
+ const CELL_SIZE = 8;
+ const GRID_WIDTH = canvas.width / CELL_SIZE;
+ const GRID_HEIGHT = canvas.height / CELL_SIZE;
+
+ const DIRECTIONS = {
+ UP: [0, -1],
+ DOWN: [0, 1],
+ LEFT: [-1, 0],
+ RIGHT: [1, 0]
+ };
+
+ const OPPOSITE_DIRECTIONS = {
+ UP: 'DOWN',
+ DOWN: 'UP',
+ LEFT: 'RIGHT',
+ RIGHT: 'LEFT'
+ };
+
+
+ let grid;
+ let players;
+ let running;
+ let frame;
+ let scores = [0, 0];
+ let keys = {};
+ let animId;
+
+ function resetGrid() {
+ grid = new Array(GRID_WIDTH * GRID_HEIGHT).fill(0);
+ }
+
+
+ function idx(x, y) {
+ return y * GRID_WIDTH + x;
+ }
+
+ function makePlayer(x, y, dir, color, glow, isAI) {
+ return {
+ x: x,
+ y: y,
+ dir: dir,
+ nextDir: dir,
+ color: color,
+ glow: glow,
+ alive: true,
+ trail: [],
+ isAI: isAI,
+ path: []
+ };
+ }
+
+ function initGame() {
+ resetGrid();
+ players = [
+ makePlayer(Math.floor(GRID_WIDTH * 0.25), Math.floor(GRID_HEIGHT / 2), 'RIGHT', '#00ffff', '#00ffff88', false),
+ makePlayer(Math.floor(GRID_WIDTH * 0.75), Math.floor(GRID_HEIGHT / 2), 'LEFT', '#ff00ff', '#ff00ff88', true)
+ ];
+ running = true;
+ frame = 0;
+ keys = {};
+ }
+
+ function drawGridBg() {
+ ctx.fillStyle = '#050510';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.strokeStyle = '#0a0a20';
+ ctx.lineWidth = CELL_SIZE;
+
+ for (let x = 0; x <= canvas.width; x += CELL_SIZE) {
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, canvas.height);
+ ctx.stroke();
+ }
+ for (let y = 0; y <= canvas.height; y += CELL_SIZE) {
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(canvas.width, y);
+ ctx.stroke();
+ }
+ }
+
+ function drawTrail(player) {
+ if (player.trail.length < 1) return;
+
+ ctx.shadowBlur = 12;
+ ctx.shadowColor = player.color;
+ ctx.strokeStyle = player.color;
+ ctx.lineWidth = CELL_SIZE - 2;
+ ctx.lineCap = 'square';
+ ctx.lineJoin = 'miter';
+
+ ctx.beginPath();
+ const trail = player.trail;
+ ctx.moveTo(trail[0][0] * CELL_SIZE + CELL_SIZE / 2, trail[0][1] * CELL_SIZE + CELL_SIZE / 2);
+
+ for (let i = 1; i < trail.length; i++) {
+ ctx.lineTo(trail[i][0] * CELL_SIZE + CELL_SIZE / 2, trail[i][1] * CELL_SIZE + CELL_SIZE / 2);
+ }
+
+ ctx.lineTo(player.x * CELL_SIZE + CELL_SIZE / 2, player.y * CELL_SIZE + CELL_SIZE / 2);
+ ctx.stroke();
+
+ ctx.shadowBlur = 0;
+
+ // Head glow
+ ctx.fillStyle = player.color;
+ ctx.shadowBlur = 18;
+ ctx.shadowColor = player.color;
+ ctx.fillRect(player.x * CELL_SIZE + 1, player.y * CELL_SIZE + 1, CELL_SIZE - 2, CELL_SIZE - 2);
+ ctx.shadowBlur = 0;
+ }
+
+ function isValidMove(x, y) {
+ return x >= 0 && x < GRID_WIDTH && y >= 0 && y < GRID_HEIGHT && grid[idx(x, y)] === 0;
+ }
+
+
+ function aiThink(player) {
+ const dirs = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
+ let bestDir = null;
+ let bestScore = -Infinity;
+
+ for (const d of dirs) {
+ if (d === OPPOSITE_DIRECTIONS[player.dir]) continue;
+
+ const [dx, dy] = DIRECTIONS[d];
+ const nx = player.x + dx;
+ const ny = player.y + dy;
+
+ if (isValidMove(nx, ny)) {
+ let score = 0;
+
+ // Basic scoring: prefer forward movement if possible
+ if (player.dir === d) {
+ score += 2;
+ }
+
+ // Add a bit of randomness to make the AI less predictable
+ if (Math.random() < 0.3) {
+ score += 1;
+ }
+
+ if (score > bestScore) {
+ bestScore = score;
+ bestDir = d;
+ }
+ }
+ }
+
+ // If no valid directions found, use the current direction
+ player.nextDir = bestDir || player.dir;
+ }
+
+
+ function step() {
+ if (!running) return;
+ frame++;
+
+ // AI Turn
+ for (const player of players) {
+ if (player.alive && player.isAI && frame % 2 === 0) {
+ aiThink(player);
+ }
+ }
+
+
+ // Apply Next Direction
+ for (const player of players) {
+ if (!player.alive) continue;
+ if (player.nextDir !== OPPOSITE_DIRECTIONS[player.dir]) {
+ player.dir = player.nextDir;
+ }
+ }
+
+ // Move Players
+ for (const player of players) {
+ if (!player.alive) continue;
+
+ player.trail.push([player.x, player.y]);
+ grid[idx(player.x, player.y)] = 1;
+
+ const [dx, dy] = DIRECTIONS[player.dir];
+ player.x += dx;
+ player.y += dy;
+ }
+
+ // Collision Detection (Simultaneous)
+ let deadPlayers = [];
+
+ for (let i = 0; i < players.length; i++) {
+ const player = players[i];
+ if (!player.alive) continue;
+
+ if (player.x < 0 || player.x >= GRID_WIDTH || player.y < 0 || player.y >= GRID_HEIGHT) {
+ deadPlayers.push(i);
+ continue;
+ }
+
+ // Check for collisions with wall or trail
+ if (grid[idx(player.x, player.y)] !== 0) {
+ deadPlayers.push(i);
+ continue;
+ }
+
+ // Check for self-collision
+ for (let j = 0; j < players.length; j++) {
+ if (i === j) continue;
+ const otherPlayer = players[j];
+ if (otherPlayer.alive && otherPlayer.x === player.x && otherPlayer.y === player.y) {
+ deadPlayers.push(i);
+ break;
+ }
+ }
+ }
+
+
+ for (const i of deadPlayers) {
+ players[i].alive = false;
+ }
+
+ // Mark new head positions on the grid
+ for (const player of players) {
+ if (player.alive) {
+ grid[idx(player.x, player.y)] = 1;
+ }
+ }
+
+
+ // Check for Game Over
+ const alivePlayers = players.filter(p => p.alive);
+ if (alivePlayers.length <= 1) {
+ running = false;
+
+ if (alivePlayers.length === 1) {
+ if (!alivePlayers[0].isAI) {
+ scores[0]++;
+ s1El.textContent = scores[0];
+ showEnd('YOU WIN');
+ } else {
+ scores[1]++;
+ s2El.textContent = scores[1];
+ showEnd('CPU WINS');
+ }
+ } else {
+ showEnd('DRAW');
+ }
+ }
+ }
+
+ function render() {
+ drawGridBg();
+ for (const player of players) {
+ drawTrail(player);
+ }
+ }
+
+
+ function loop() {
+ step();
+ render();
+ if (running) {
+ animId = requestAnimationFrame(() => {
+ setTimeout(loop, 1000 / 14); // ~14 moves per second
+ });
+ }
+ }
+
+ function startNewGame() {
+ cancelAnimationFrame(animId);
+ overlay.classList.add('hidden');
+ initGame();
+ render();
+ loop();
+ }
+
+
+ startBtn.addEventListener('click', startNewGame);
+
+
+ function handleKeyDown(event) {
+ if (!running || !players[0].alive) return;
+
+ const player = players[0]; // Control only the first (human) player.
+
+ let newDir = null;
+
+ switch (event.key.toLowerCase()) {
+ case 'arrowup':
+ case 'w':
+ newDir = 'UP';
+ break;
+ case 'arrowdown':
+ case 's':
+ newDir = 'DOWN';
+ break;
+ case 'arrowleft':
+ case 'a':
+ newDir = 'LEFT';
+ break;
+ case 'arrowright':
+ case 'd':
+ newDir = 'RIGHT';
+ break;
+
+ }
+
+ if (newDir && newDir !== OPPOSITE_DIRECTIONS[player.dir]) {
+ player.nextDir = newDir;
+ }
+
+
+ }
+
+
+
+ // Initial game setup and rendering:
+ resetGrid();
+ initGame();
+ render();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/52cab5a7ddb7/gemma3-12b.png b/data/artifacts/52cab5a7ddb7/gemma3-12b.png
new file mode 100644
index 0000000..9293a29
Binary files /dev/null and b/data/artifacts/52cab5a7ddb7/gemma3-12b.png differ
diff --git a/data/artifacts/52cab5a7ddb7/hermes3-8b.html b/data/artifacts/52cab5a7ddb7/hermes3-8b.html
new file mode 100644
index 0000000..df850a1
--- /dev/null
+++ b/data/artifacts/52cab5a7ddb7/hermes3-8b.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>Tron Light Cycles</title>
+<style>
+body{display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Cantarell,Helvetica,Arial,sans-serif;padding:20px;}
+canvas{border:2px solid #0ff;box-shadow:0 0 30px rgba(0,255,0,.7);background:#000;color:#0ff;font-size:.8em;text-align:center;cursor:none}
+.hidden{display:none}
+#hud{display:flex;justify-content:space-between;padding:5px;}
+.p1,p2{display:flex;align-items:center;gap:10px}
+.p1{color:#0ff} .p1 span{background:#00f;color:#fff}
+.p2{color:#f0f} .p2 span{background:#f0f;color:#000}
+#overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.8);gap:16px}
+#overlay h1{font-size:3em;line-height:.9;}
+#overlay p{font-size:1.2em;text-align:center}
+.btn{padding:12px 36px;font-size:1.2em;cursor:pointer;transition:.2s} .btn:hover{background:#fff;color:#000;box-shadow:0 0 30px rgba(255,255,255,.9)}
+</style>
+</head>
+<body>
+<div id="wrap">
+<canvas id=c width=640 height=480></canvas>
+<div id="hud" class="hidden">
+<div class="p1">YOU<span id=s1>0</span></div>
+<div class="p2">CPU <span id=s2>0</span></div>
+</div>
+<div id="overlay">
+<h1>TRON</h1>
+<p>Light Cycles — survive longer than the CPU.<br>Arrow keys to steer.<br>Don't hit walls or trails.</p>
+<button class="btn" id=startBtn>Start</button>
+</div>
+</div>
+
+<script>
+const c = document.getElementById('c');
+const ctx = c.getContext('2d');
+
+const W = 640, H = 480, CELL = 8;
+const COLS = W/CELL, ROWS = H/CELL;
+
+let grid, players, running, frame, scores = [0, 0], keys={}, animId;
+
+function resetGrid(){
+ grid = new Array(COLS*ROWS).fill(0);
+}
+
+function idx(x,y){return y*COLS+x;}
+
+function makePlayer(x, y, dir, color, isAI){
+ return {x, y, dir, nextdir: dir, color, alive: true, trail: [], isAI};
+}
+
+function initGame(){
+ resetGrid();
+ players = [
+ makePlayer(Math.floor(COLS*0.25), Math.floor(ROWS/2), 'RIGHT', '#00ffff', false),
+ makePlayer(Math.floor(COLS*0.75), Math.floor(ROWS/2), 'LEFT', '#ff00ff', true)
+ ];
+ running = true;
+ frame = 0;
+}
+
+function drawGrid(){
+ ctx.fillStyle='#050510';
+ ctx.fillRect(0,0,W,H);
+ for(let x=0;x<=W;x+=CELL){ctx.strokeStyle='rgba(8,21,32,.9)';ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
+ for(let y=0;y<=H;y+=CELL){ctx.strokeStyle='rgba(8,21,32,.9)';ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}
+}
+
+function drawTrail(p){
+ if(p.trail.length<1)return;
+ ctx.shadowBlur = 12;
+ ctx.strokeStyle = p.color;
+ ctx.lineWidth = CELL-2;
+ ctx.lineCap = 'square';
+ ctx.beginPath();
+ const t=p.trail;
+ ctx.moveTo(t[0][0]*CELL+CELL/2,t[0][1]*CELL+CELL/2);
+ for(let i=1;i<t.length;i++){
+ ctx.lineTo(t[i][0]*CELL+CELL/2,t[i][1]*CELL+CELL/2);
+ }
+ ctx.lineTo(p.x*CELL+CELL/2,p.y*CELL+CELL/2);
+ ctx.stroke();
+ ctx.shadowBlur = 0;
+
+ // head glow
+ ctx.fillStyle=p.color;
+ ctx.shadowBlur = 18;
+ ctx.shadowColor = p.color;
+ ctx.fillRect(p.x*CELL+1,p.y*CELL+1,CELL-2,CELL-2);
+ ctx.shadowBlur = 0;
+}
+
+function valid(x,y){
+ return x>=0&&x<COLS&&y>=0&&y<ROWS&&grid[idx(x,y)]===0;
+}
+
+function aiThink(p){
+ const dirs = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
+ const cur = p.dir;
+ let bestScore = -Infinity, bestDir;
+
+ for(const d of dirs){
+ if(d===OPP[cur]) continue;
+
+ const [dx, dy] = DIRS[d];
+ const nx = p.x + dx, ny = p.y + dy;
+
+ if(valid(nx, ny)){
+ let open = countOpenSpaceAhead(p, d);
+
+ // Look sideways a bit
+ const sideDirs = d === 'UP' || d === 'DOWN' ? ['LEFT', 'RIGHT'] : ['UP', 'DOWN'];
+ for(const sd of sideDirs){
+ const [sx, sy] = DIRS[sd];
+ if(valid(p.x + sx * 2, p.y + sy * 2)){
+ open += countOpenSpaceAhead(players[1 - players.map(p => p.isAI).indexOf(p)], sd);
+ }
+ }
+
+ // Prefer not turning if straight is good
+ if(d === cur) open += 1.5;
+
+ if(open > bestScore){
+ bestScore = open;
+ bestDir = d;
+ }
+ }
+ }
+
+ if(bestScore <= -Infinity) return;
+ p.nextdir = bestDir;
+}
+
+function countOpenSpaceAhead(player, dir){
+ let spaces = 0, cx = player.x, cy = player.y;
+
+ for(let i=0; i<12; i++){
+ const dx = dir === 'UP' || dir === 'DOWN' ? 0 : (dir === 'LEFT' ? -1 : 1);
+ const dy = dir === 'UP' || dir === 'DOWN' ? -1 : 0;
+
+ if(!valid(cx + dx, cy + dy)) break;
+
+ cx += dx;
+ cy += dy;
+ spaces++;
+ }
+
+ return spaces;
+}
+
+function step(){
+ if(!running) return;
+ frame++;
+
+ for(const p of players){
+ if(p.alive && p.isAI && frame % 2 === 0) aiThink(p);
+ }
+
+ // Apply next dir
+ for(let i=0; i<players.length; i++){
+ const p = players[i];
+
+ if(!p.alive) continue;
+
+ if(p.nextdir !== OPP[p.dir]) p.nextdir = p.nextDir;
+ p.trail.push([p.x, p.y]);
+ grid[idx(p.x, p.y)] = 1;
+
+ const [dx, dy] = DIRS[p.dir];
+ p.x += dx;
+ p.y += dy;
+ }
+
+ // Collisions (after all moved — simultaneous)
+ for(let i=0; i<players.length; i++){
+ const p = players[i];
+
+ if(!p.alive) continue;
+
+ if(p.x < 0 || p.x >= COLS || p.y < 0 || p.y >= ROWS){
+ players.splice(i, 1);
+ break;
+ }
+
+ for(let j=0; j<players.length; j++){
+ const o = players[j];
+
+ if(o.alive && i !== j && p.x === o.x && p.y === o.y){
+ players[i].alive = false;
+ break;
+ }
+ }
+ }
+
+ // Mark new heads
+ for(const p of players){
+ if(p.alive) grid[idx(p.x, p.y)] = 1;
+ }
+
+ // Check end
+ const alive = players.filter(p => p.alive);
+
+ if(alive.length <= 1){
+ running = false;
+
+ if(alive.length === 1){
+ if(!alive[0].isAI) {
+ scores[0]++;
+ s1El.textContent = scores[0];
+ showEnd('YOU WIN');
+ }
+ else {
+ scores[1]++;
+ s2El.textContent = scores[1];
+ showEnd('CPU WINS');
+ }
+ }else{
+ showEnd('DRAW');
+ }
+ }
+}
+
+function showEnd(msg){
+ const overlay = document.getElementById('overlay');
+
+ overlay.classList.remove('hidden');
+
+ overlay.querySelector('h1').textContent = msg;
+ overlay.querySelector('p').textContent =
+ 'Press Start or Space for another round';
+
+ startBtn.textContent = 'Again';
+}
+
+function render(){
+ drawGrid();
+ for(const p of players) drawTrail(p);
+}
+
+function loop(){
+ step();
+ render();
+
+ if(running) animId = requestAnimationFrame(() => {
+ // Speed control ~12 moves/sec
+ setTimeout(loop, 1000 / 14);
+ });
+}
+
+function start(){
+ cancelAnimationFrame(animId);
+
+ overlay.classList.add('hidden');
+
+ initGame();
+
+ render();
+
+ loop();
+}
+
+startBtn.addEventListener('click', start);
+
+document.addEventListener('keydown', e => {
+ const k = e.key.toLowerCase();
+
+ if(k === ' ' || k === 'enter') {
+ if(!running) start();
+
+ e.preventDefault();
+ return;
+ }
+
+ if(!running || !players[0].alive) return;
+
+ const p = players[0];
+
+ let nd = null;
+
+ if(k === 'arrowup') nd = 'UP';
+ else if(k === 'arrowdown') nd = 'DOWN';
+ else if(k === 'arrowleft') nd = 'LEFT';
+ else if(k === 'arrowright') nd = 'RIGHT';
+
+ if(nd && nd !== OPP[p.dir]) {
+ p.nextdir = nd;
+ e.preventDefault();
+ }
+});
+
+// Initial splash render
+resetGrid();
+
+players.push(makePlayer(Math.floor(COLS * 0.25), Math.floor(ROWS / 2), 'RIGHT', '#00ffff', false));
+players.push(makePlayer(Math.floor(COLS * 0.75), Math.floor(ROWS / 2), 'LEFT', '#ff00ff', true));
+
+drawGrid();
+ctx.fillStyle = '#0ff';
+ctx.font = 'bold 20px monospace';
+ctx.textAlign = 'center';
+ctx.shadowBlur = 10; ctx.shadowColor = '#0ff';
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/52cab5a7ddb7/hermes3-8b.png b/data/artifacts/52cab5a7ddb7/hermes3-8b.png
new file mode 100644
index 0000000..731a293
Binary files /dev/null and b/data/artifacts/52cab5a7ddb7/hermes3-8b.png differ
diff --git a/data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.html b/data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..2061f46
--- /dev/null
+++ b/data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tron Light Cycles</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#000;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden;color:#0ff}
+#wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
+canvas{border:2px solid #0ff;box-shadow:0 0 20px #0ff4,inset 0 0 40px #0ff;background:#050510;image-rendering:pixelated;cursor:none}
+#hud{display:flex;gap:32px;font-size:16px;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px #0ff;color:#fff}
+#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0,0,0,.9);z-index:10;gap:16px}
+#overlay h1{font-size:52px;letter-spacing:8px;text-shadow:0 0 20px #0ff,0 0 40px #0ff;color:#0ff}
+#overlay p{font-size:18px;color:#8ff;letter-spacing:2px;max-width:400px;text-align:center;line-height:1.6}
+#overlay .btn{margin-top:12px;padding:14px 38px;border:2px solid #0ff;background:transparent;color:#0ff;font-size:20px;letter-spacing:4px;cursor:pointer;text-transform:uppercase;transition:all .2s;font-family:inherit}
+#overlay .btn:hover{background:#0ff;color:#000;box-shadow:0 0 30px #0ff}
+#scores{display:flex;gap:48px;font-size:16px;letter-spacing:1px}
+.p1{color:#0ff;text-shadow:0 0 6px #0ff}
+.p2{color:#f0f;text-shadow:0 0 6px #f0f}
+.hidden{display:none!important}
+</style>
+</head>
+<body>
+<div id="wrap">
+<div id="hud">
+<div class="p1">YOU <span id="s1">0</span></div>
+<div class="p2">CPU <span id="s2">0</span></div>
+</div>
+<canvas id="c" width="640" height="480"></canvas>
+<div id="overlay">
+<h1>TRON</h1>
+<p>Light Cycles — survive longer than the CPU.<br>Arrow keys or WASD to steer.<br>Don't hit walls or trails.</p>
+<button class="btn" id="startBtn">Start</button>
+</div>
+</div>
+<script>
+const canvas=document.getElementById('c');
+const ctx=canvas.getContext('2d');
+const overlay=document.getElementById('overlay');
+const startBtn=document.getElementById('startBtn');
+const s1El=document.getElementById('s1');
+const s2El=document.getElementById('s2');
+
+const W=640,H=480,CELL=8;
+const COLS=W/CELL,ROWS=H/CELL;
+const DIRS={UP:[0,-1],DOWN:[0,1],LEFT:[-1,0],RIGHT:[1,0]};
+const OPP={UP:'DOWN',DOWN:'UP',LEFT:'RIGHT',RIGHT:'LEFT'};
+
+let grid,players,running,frame,scores=[0,0],keys={},animId;
+
+function resetGrid(){
+ grid=new Array(COLS*ROWS).fill(0);
+}
+
+function idx(x,y){return y*COLS+x;}
+
+function makePlayer(x,y,dir,color,glow,isAI){
+ return{x,y,dir,nextdir:dir,color,glow,alive:true,trail:[],isAI,path:[]};
+}
+
+function initGame(){
+ resetGrid();
+ players=[
+ makePlayer(Math.floor(COLS*0.25),Math.floor(ROWS/2),'RIGHT','#00ffff','#00ffff88',false),
+ makePlayer(Math.floor(COLS*0.75),Math.floor(ROWS/2),'LEFT','#ff00ff','#ff00ff88',true)
+ ];
+ running=true;
+ frame=0;
+ keys={};
+}
+
+function drawGridBg(){
+ ctx.fillStyle='#050510';
+ ctx.fillRect(0,0,W,H);
+}
+
+function drawTrail(p){
+ if(p.trail.length<1)return;
+ ctx.shadowBlur=12;
+ ctx.shadowColor=p.color;
+ ctx.strokeStyle=p.color;
+ ctx.lineWidth=CELL-2;
+ ctx.lineCap='square';
+ ctx.beginPath();
+ const t=p.trail;
+ ctx.moveTo(t[0][0]*CELL+CELL/2,t[0][1]*CELL+CELL/2);
+ for(let i=1;i<t.length;i++){
+ ctx.lineTo(t[i][0]*CELL+CELL/2,t[i][1]*CELL+CELL/2);
+ }
+ ctx.stroke();
+ ctx.shadowBlur=0;
+ // head glow
+ ctx.fillStyle=p.color;
+ ctx.shadowBlur=18;
+ ctx.shadowColor=p.color;
+ ctx.fillRect(p.x*CELL+1,p.y*CELL+1,CELL-2,CELL-2);
+ ctx.shadowBlur=0;
+}
+
+function valid(x,y){
+ return x>=0&&x<COLS&&y>=0&&y<ROWS&&grid[idx(x,y)]===0;
+}
+
+function aiThink(p){
+ const dirs=['UP','DOWN','LEFT','RIGHT'];
+ const cur=p.dir;
+ const candidates=[];
+ for(const d of dirs){
+ if(d===OPP[cur])continue;
+ const [dx,dy]=DIRS[d];
+ const nx=p.x+dx,ny=p.y+dy;
+ if(valid(nx,ny)){
+ let open=0,cx=nx,cy=ny;
+ for(let i=0;i<12;i++){
+ cx+=dx;cy+=dy;
+ if(!valid(cx,cy))break;
+ open++;
+ }
+ const side=d==='UP'||d==='DOWN'?['LEFT','RIGHT']:['UP','DOWN'];
+ for(const s of side){
+ const [sx,sy]=DIRS[s];
+ if(valid(nx+sx,ny+sy))open+=0.5;
+ }
+ if(d===cur)open+=1.5;
+ candidates.push({d,open});
+ }
+ }
+ if(candidates.length===0)return;
+ candidates.sort((a,b)=>b.open-a.open);
+ const top=candidates.filter(c=>c.open>=candidates[0].open-1);
+ p.nextdir=top[Math.floor(Math.random()*top.length)].d;
+}
+
+function step(){
+ if(!running)return;
+ frame++;
+ for(const p of players){
+ if(p.alive&&p.isAI&&frame%2===0)aiThink(p);
+ }
+ for(const p of players){
+ if(!p.alive)continue;
+ if(p.nextdir!==OPP[p.dir])p.dir=p.nextdir;
+ }
+ for(const p of players){
+ if(!p.alive)continue;
+ p.trail.push([p.x,p.y]);
+ grid[idx(p.x,p.y)]=1;
+ const [dx,dy]=DIRS[p.dir];
+ p.x+=dx;p.y+=dy;
+ }
+ const dead=[];
+ for(let i=0;i<players.length;i++){
+ const p=players[i];
+ if(!p.alive)continue;
+ if(p.x<0||p.x>=COLS||p.y<0||p.y>=ROWS){dead.push(i);continue;}
+ if(grid[idx(p.x,p.y)]!==0){dead.push(i);continue;}
+ for(let j=0;j<players.length;j++){
+ if(i===j)continue;
+ const o=players[j];
+ if(o.alive&&o.x===p.x&&o.y===p.y){dead.push(i);break;}
+ }
+ }
+ for(const i of dead)players[i].alive=false;
+ for(const p of players){
+ if(p.alive)grid[idx(p.x,p.y)]=1;
+ }
+ const alive=players.filter(p=>p.alive);
+ if(alive.length<=1){
+ running=false;
+ if(alive.length===1){
+ if(!alive[0].isAI){scores[0]++;s1El.textContent=scores[0];showEnd('YOU WIN');}
+ else{scores[1]++;s2El.textContent=scores[1];showEnd('CPU WINS');}
+ }else{
+ showEnd('DRAW');
+ }
+ }
+}
+
+function showEnd(msg){
+ overlay.classList.remove('hidden');
+ overlay.querySelector('h1').textContent=msg;
+ overlay.querySelector('p').textContent='Press Start or Space for another round';
+ startBtn.textContent='Again';
+}
+
+function render(){
+ drawGridBg();
+ for(const p of players)drawTrail(p);
+}
+
+function loop(){
+ step();
+ render();
+ if(running)animId=requestAnimationFrame(()=>{
+ setTimeout(loop,1000/14);
+ });
+}
+
+function start(){
+ cancelAnimationFrame(animId);
+ overlay.classList.add('hidden');
+ initGame();
+ render();
+ loop();
+}
+
+startBtn.addEventListener('click',start);
+
+document.addEventListener('keydown',e=>{
+ const k=e.key.toLowerCase();
+ if(k===' '||k==='enter'){
+ if(!running)start();
+ e.preventDefault();
+ return;
+ }
+ if(!running||!players[0].alive)return;
+ const p=players[0];
+ let nd=null;
+ if(k==='arrowup'||k==='w')nd='UP';
+ else if(k==='arrowdown'||k==='s')nd='DOWN';
+ else if(k==='arrowleft'||k==='a')nd='LEFT';
+ else if(k==='arrowright'||k==='d')nd='RIGHT';
+ if(nd&&nd!==OPP[p.dir]){p.nextdir=nd;e.preventDefault();}
+});
+
+resetGrid();
+players=[];
+drawGridBg();
+ctx.fillStyle='#0ff';
+ctx.font='bold 24px monospace';
+ctx.textAlign='center';
+ctx.shadowBlur=10;
+ctx.shadowColor='#0ff';
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.png b/data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..da3ba97
Binary files /dev/null and b/data/artifacts/52cab5a7ddb7/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/52cab5a7ddb7/qwen25-7b.html b/data/artifacts/52cab5a7ddb7/qwen25-7b.html
new file mode 100644
index 0000000..191134c
--- /dev/null
+++ b/data/artifacts/52cab5a7ddb7/qwen25-7b.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Tron Light Cycles</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { background: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; overflow: hidden; color: #0ff; }
+#wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+canvas { border: 3px solid #0ff; box-shadow: 0 0 40px #0ff, inset 0 0 60px #0ff; background: #050510; image-rendering: pixelated; cursor: none; outline: none; }
+#hud { display: flex; gap: 32px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 8px #0ff; }
+#hud span { color: #fff; }
+#overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, .85); z-index: 10; gap: 16px; }
+#overlay h1 { font-size: 48px; letter-spacing: 8px; text-shadow: 0 0 20px #0ff, 0 0 30px #0ff; color: #0ff; }
+#overlay p { font-size: 16px; color: #8ff; letter-spacing: 2px; max-width: 400px; text-align: center; line-height: 1.6; }
+#overlay .btn { margin-top: 12px; padding: 12px 36px; border: 3px solid #0ff; background: transparent; color: #0ff; font-size: 18px; letter-spacing: 4px; cursor: pointer; text-transform: uppercase; transition: all .2s; font-family: inherit; }
+#overlay .btn:hover { background: #0ff; color: #000; box-shadow: 0 0 30px #0ff; }
+#scores { display: flex; gap: 40px; font-size: 13px; letter-spacing: 1px; }
+.p1 { color: #0ff; text-shadow: 0 0 6px #0ff; }
+.p2 { color: #f0f; text-shadow: 0 0 6px #f0f; }
+.hidden { display: none!important; }
+</style>
+</head>
+<body>
+<div id="wrap">
+ <div id="hud">
+ <div class="p1">YOU <span id="s1">0</span></div>
+ <div class="p2">CPU <span id="s2">0</span></div>
+ </div>
+ <canvas id="c" width="640" height="480"></canvas>
+ <div id="overlay">
+ <h1>TRON</h1>
+ <p>Light Cycles — survive longer than the CPU.<br>Arrow keys or WASD to steer.<br>Don't hit walls or trails.</p>
+ <button class="btn" id="startBtn">Start</button>
+ </div>
+</div>
+<script>
+const canvas = document.getElementById('c');
+const ctx = canvas.getContext('2d');
+const overlay = document.getElementById('overlay');
+const startBtn = document.getElementById('startBtn');
+const s1El = document.getElementById('s1');
+const s2El = document.getElementById('s2');
+
+const W = 640, H = 480, CELL = 8;
+const COLS = Math.floor(W / CELL), ROWS = Math.floor(H / CELL);
+const DIRS = { UP: [0, -1], DOWN: [0, 1], LEFT: [-1, 0], RIGHT: [1, 0] };
+const OPP = { UP: 'DOWN', DOWN: 'UP', LEFT: 'RIGHT', RIGHT: 'LEFT' };
+
+let grid, players, running, frame, scores = [0, 0], keys = {}, animId;
+
+function resetGrid() {
+ grid = new Array(COLS * ROWS).fill(0);
+}
+
+function idx(x, y) { return y * COLS + x; }
+
+function makePlayer(x, y, dir, color, glow, isAI) {
+ return { x, y, dir: nextdir: dir, color, glow, alive: true, trail: [], isAI, path: [] };
+}
+
+function initGame() {
+ resetGrid();
+ players = [
+ makePlayer(Math.floor(COLS * 0.25), Math.floor(ROWS / 2), 'RIGHT', '#00ffff', '#00ffff88', false),
+ makePlayer(Math.floor(COLS * 0.75), Math.floor(ROWS / 2), 'LEFT', '#ff00ff', '#ff00ff88', true)
+ ];
+ running = true;
+ frame = 0;
+ keys = {};
+}
+
+function drawGridBg() {
+ ctx.fillStyle = '#050510';
+ ctx.fillRect(0, 0, W, H);
+ ctx.strokeStyle = '#0a0a20';
+ ctx.lineWidth = 3;
+ for (let x = 0; x <= W; x += CELL) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
+ for (let y = 0; y <= H; y += CELL) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }
+}
+
+function drawTrail(p) {
+ if (p.trail.length < 1) return;
+ ctx.shadowBlur = 24;
+ ctx.shadowColor = p.color;
+ ctx.strokeStyle = p.color;
+ ctx.lineWidth = CELL - 3;
+ ctx.lineCap = 'square';
+ ctx.lineJoin = 'miter';
+ ctx.beginPath();
+ const t = p.trail;
+ ctx.moveTo(t[0][0] * CELL + CELL / 2, t[0][1] * CELL + CELL / 2);
+ for (let i = 1; i < t.length; i++) {
+ ctx.lineTo(t[i][0] * CELL + CELL / 2, t[i][1] * CELL + CELL / 2);
+ }
+ ctx.stroke();
+}
+
+function step() {
+ const alive = players.filter(p => p.alive);
+ if (alive.length <= 1) {
+ running = false;
+ showEnd(alive.length === 1 ? 'YOU WIN' : 'DRAW');
+ }
+
+ for (let i = 0; i < players.length; i++) {
+ const player = players[i];
+ if (!player.alive) continue;
+
+ let nd = null;
+ if ('w' in keys || 'ArrowUp' in keys) { nd = 'UP'; }
+ else if ('s' in keys || 'ArrowDown' in keys) { nd = 'DOWN'; }
+ else if ('a' in keys || 'ArrowLeft' in keys) { nd = 'LEFT'; }
+ else if ('d' in keys || 'ArrowRight' in keys) { nd = 'RIGHT'; }
+
+ if (nd && nd !== OPP[player.dir]) {
+ player.nextdir = nd;
+ }
+
+ const [dx, dy] = DIRS[player.nextdir];
+ const nx = player.x + dx, ny = player.y + dy;
+
+ if (!isWall(nx, ny) && !checkCollision(players.filter(p => p.alive), nx, ny)) {
+ ctx.fillStyle = player.color;
+ ctx.fillRect(nx * CELL, ny * CELL, CELL - 2, CELL - 2);
+ grid[idx(nx, ny)] = 1;
+
+ if (i === 0) { s1El.textContent = ++scores[0]; }
+ else { s2El.textContent = ++scores[1]; }
+
+ player.x = nx;
+ player.y = ny;
+ } else {
+ player.alive = false;
+ }
+ }
+}
+
+function isWall(x, y) { return x < 0 || x >= COLS || y < 0 || y >= ROWS; }
+
+function checkCollision(players, nx, ny) {
+ for (let i = 0; i < players.length; i++) {
+ const p = players[i];
+ if (!p.alive) continue;
+ if (p.x === nx && p.y === ny) return true;
+ }
+ return false;
+}
+
+function showEnd(msg) {
+ overlay.classList.remove('hidden');
+ overlay.querySelector('h1').textContent = msg;
+ overlay.querySelector('p').textContent = 'Press Start or Space for another round';
+ startBtn.textContent = 'Again';
+}
+
+function render() {
+ drawGridBg();
+ step();
+ players.forEach(drawTrail);
+}
+
+function loop() {
+ requestAnimationFrame(() => {
+ setTimeout(() => {
+ if (running) {
+ loop();
+ }
+ }, 1000 / 14);
+ });
+}
+
+function start() {
+ cancelAnimationFrame(animId);
+ overlay.classList.add('hidden');
+ initGame();
+ render();
+ step();
+ loop();
+}
+
+startBtn.addEventListener('click', start);
+
+document.addEventListener('keydown', e => {
+ if (' ' in keys || 'Enter' in keys) {
+ if (!running) start();
+ e.preventDefault();
+ return;
+ }
+ const k = e.key.toLowerCase();
+ if (k === 'w' || k === 'ArrowUp') keys['w'] = true;
+ else if (k === 's' || k === 'ArrowDown') keys['s'] = true;
+ else if (k === 'a' || k === 'ArrowLeft') keys['a'] = true;
+ else if (k === 'd' || k === 'ArrowRight') keys['d'] = true;
+});
+
+document.addEventListener('keyup', e => {
+ const k = e.key.toLowerCase();
+ if (k === 'w' || k === 'ArrowUp') delete keys['w'];
+ else if (k === 's' || k === 'ArrowDown') delete keys['s'];
+ else if (k === 'a' || k === 'ArrowLeft') delete keys['a'];
+ else if (k === 'd' || k === 'ArrowRight') delete keys['d'];
+});
+
+// initial splash render
+resetGrid();
+players = [];
+drawGridBg();
+ctx.fillStyle = '#0ff';
+ctx.font = 'bold 24px monospace';
+ctx.textAlign = 'center';
+ctx.shadowBlur = 15; ctx.shadowColor = '#0ff';
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/52cab5a7ddb7/qwen25-7b.png b/data/artifacts/52cab5a7ddb7/qwen25-7b.png
new file mode 100644
index 0000000..bdd2c06
Binary files /dev/null and b/data/artifacts/52cab5a7ddb7/qwen25-7b.png differ
diff --git a/data/artifacts/52cab5a7ddb7/qwen3-14b.html b/data/artifacts/52cab5a7ddb7/qwen3-14b.html
new file mode 100644
index 0000000..7d8ff58
--- /dev/null
+++ b/data/artifacts/52cab5a7ddb7/qwen3-14b.html
@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TRON Light Cycles</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+ background: #000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ overflow: hidden;
+ color: #0ff;
+}
+#wrap {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ width: 100%;
+ max-width: 800px;
+}
+#hud {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 12px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 12px;
+ box-shadow: 0 0 10px #0ff;
+}
+#hud span {
+ color: #fff;
+ font-size: 18px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ text-shadow: 0 0 6px #0ff;
+}
+#hud .p1 {
+ color: #0ff;
+}
+#hud .p2 {
+ color: #f0f;
+}
+canvas {
+ border: 3px solid #0ff;
+ box-shadow: 0 0 20px #0ff, inset 0 0 20px #0ff;
+ background: #050510;
+ image-rendering: pixelated;
+ cursor: none;
+ width: 100%;
+ max-width: 640px;
+ height: auto;
+}
+#overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0, 0, 0, 0.85);
+ z-index: 10;
+ gap: 16px;
+}
+#overlay h1 {
+ font-size: 48px;
+ letter-spacing: 8px;
+ text-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
+ color: #0ff;
+}
+#overlay p {
+ font-size: 16px;
+ color: #8ff;
+ letter-spacing: 2px;
+ max-width: 400px;
+ text-align: center;
+ line-height: 1.6;
+ text-shadow: 0 0 4px #0ff;
+}
+#overlay .btn {
+ margin-top: 12px;
+ padding: 12px 36px;
+ border: 2px solid #0ff;
+ background: transparent;
+ color: #0ff;
+ font-size: 18px;
+ letter-spacing: 4px;
+ cursor: pointer;
+ text-transform: uppercase;
+ transition: all 0.2s ease;
+ font-family: inherit;
+ box-shadow: 0 0 10px #0ff;
+}
+#overlay .btn:hover {
+ background: #0ff;
+ color: #000;
+ box-shadow: 0 0 30px #0ff;
+}
+.hidden {
+ display: none !important;
+}
+</style>
+</head>
+<body>
+<div id="wrap">
+ <div id="hud">
+ <div class="p1">YOU <span id="s1">0</span></div>
+ <div class="p2">CPU <span id="s2">0</span></div>
+ </div>
+ <canvas id="c" width="640" height="480"></canvas>
+ <div id="overlay">
+ <h1>TRON</h1>
+ <p>Light Cycles — survive longer than the CPU.<br>Arrow keys or WASD to steer.<br>Don't hit walls or trails.</p>
+ <button class="btn" id="startBtn">Start</button>
+ </div>
+</div>
+<script>
+const canvas = document.getElementById('c');
+const ctx = canvas.getContext('2d');
+const overlay = document.getElementById('overlay');
+const startBtn = document.getElementById('startBtn');
+const s1El = document.getElementById('s1');
+const s2El = document.getElementById('s2');
+
+const W = 640, H = 480, CELL = 8;
+const COLS = W / CELL, ROWS = H / CELL;
+const DIRS = { UP: [0, -1], DOWN: [0, 1], LEFT: [-1, 0], RIGHT: [1, 0] };
+const OPP = { UP: 'DOWN', DOWN: 'UP', LEFT: 'RIGHT', RIGHT: 'LEFT' };
+
+let grid, players, running, frame, scores = [0, 0], keys = {}, animId;
+
+function resetGrid() {
+ grid = new Array(COLS * ROWS).fill(0);
+}
+
+function idx(x, y) {
+ return y * COLS + x;
+}
+
+function makePlayer(x, y, dir, color, glow, isAI) {
+ return { x, y, dir, nextdir: dir, color, glow, alive: true, trail: [], isAI, path: [] };
+}
+
+function initGame() {
+ resetGrid();
+ players = [
+ makePlayer(Math.floor(COLS * 0.25), Math.floor(ROWS / 2), 'RIGHT', '#00ffff', '#00ffff88', false),
+ makePlayer(Math.floor(COLS * 0.75), Math.floor(ROWS / 2), 'LEFT', '#ff00ff', '#ff00ff88', true)
+ ];
+ running = true;
+ frame = 0;
+ keys = {};
+}
+
+function drawGridBg() {
+ ctx.fillStyle = '#050510';
+ ctx.fillRect(0, 0, W, H);
+ ctx.strokeStyle = '#0a0a20';
+ ctx.lineWidth = 1;
+ for (let x = 0; x <= W; x += CELL) {
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, H);
+ ctx.stroke();
+ }
+ for (let y = 0; y <= H; y += CELL) {
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(W, y);
+ ctx.stroke();
+ }
+}
+
+function drawTrail(p) {
+ if (p.trail.length < 1) return;
+ ctx.shadowBlur = 12;
+ ctx.shadowColor = p.color;
+ ctx.strokeStyle = p.color;
+ ctx.lineWidth = CELL - 2;
+ ctx.lineCap = 'square';
+ ctx.lineJoin = 'miter';
+ ctx.beginPath();
+ const t = p.trail;
+ ctx.moveTo(t[0][0] * CELL + CELL / 2, t[0][1] * CELL + CELL / 2);
+ for (let i = 1; i < t.length; i++) {
+ ctx.lineTo(t[i][0] * CELL + CELL / 2, t[i][1] * CELL + CELL / 2);
+ }
+ ctx.lineTo(p.x * CELL + CELL / 2, p.y * CELL + CELL / 2);
+ ctx.stroke();
+ ctx.shadowBlur = 0;
+ // head glow
+ ctx.fillStyle = p.color;
+ ctx.shadowBlur = 18;
+ ctx.shadowColor = p.color;
+ ctx.fillRect(p.x * CELL + 1, p.y * CELL + 1, CELL - 2, CELL - 2);
+ ctx.shadowBlur = 0;
+}
+
+function valid(x, y) {
+ return x >= 0 && x < COLS && y >= 0 && y < ROWS && grid[idx(x, y)] === 0;
+}
+
+function aiThink(p) {
+ const dirs = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
+ const cur = p.dir;
+ const candidates = [];
+ for (const d of dirs) {
+ if (d === OPP[cur]) continue;
+ const [dx, dy] = DIRS[d];
+ const nx = p.x + dx, ny = p.y + dy;
+ if (valid(nx, ny)) {
+ let open = 0, cx = nx, cy = ny;
+ for (let i = 0; i < 12; i++) {
+ cx += dx; cy += dy;
+ if (!valid(cx, cy)) break;
+ open++;
+ }
+ const side = d === 'UP' || d === 'DOWN' ? ['LEFT', 'RIGHT'] : ['UP', 'DOWN'];
+ for (const s of side) {
+ const [sx, sy] = DIRS[s];
+ if (valid(nx + sx, ny + sy)) open += 0.5;
+ }
+ if (d === cur) open += 1.5;
+ candidates.push({ d, open });
+ }
+ }
+ if (candidates.length === 0) return;
+ candidates.sort((a, b) => b.open - a.open);
+ const top = candidates.filter(c => c.open >= candidates[0].open - 1);
+ p.nextdir = top[Math.floor(Math.random() * top.length)].d;
+}
+
+function step() {
+ if (!running) return;
+ frame++;
+
+ // AI decision
+ for (const p of players) {
+ if (p.alive && p.isAI && frame % 2 === 0) aiThink(p);
+ }
+
+ // Apply next direction
+ for (const p of players) {
+ if (!p.alive) continue;
+ if (p.nextdir !== OPP[p.dir]) p.dir = p.nextdir;
+ }
+
+ // Move players
+ for (const p of players) {
+ if (!p.alive) continue;
+ p.trail.push([p.x, p.y]);
+ grid[idx(p.x, p.y)] = 1;
+ const [dx, dy] = DIRS[p.dir];
+ p.x += dx;
+ p.y += dy;
+ }
+
+ // Check for collisions
+ const dead = [];
+ for (let i = 0; i < players.length; i++) {
+ const p = players[i];
+ if (!p.alive) continue;
+ if (p.x < 0 || p.x >= COLS || p.y < 0 || p.y >= ROWS) {
+ dead.push(i);
+ continue;
+ }
+ if (grid[idx(p.x, p.y)] !== 0) {
+ dead.push(i);
+ continue;
+ }
+ for (let j = 0; j < players.length; j++) {
+ if (i === j) continue;
+ const o = players[j];
+ if (o.alive && o.x === p.x && o.y === p.y) {
+ dead.push(i);
+ break;
+ }
+ }
+ }
+ for (const i of dead) players[i].alive = false;
+
+ // Mark new heads
+ for (const p of players) {
+ if (p.alive) grid[idx(p.x, p.y)] = 1;
+ }
+
+ // Check if game is over
+ const alive = players.filter(p => p.alive);
+ if (alive.length <= 1) {
+ running = false;
+ if (alive.length === 1) {
+ if (!alive[0].isAI) {
+ scores[0]++;
+ s1El.textContent = scores[0];
+ showEnd('YOU WIN');
+ } else {
+ scores[1]++;
+ s2El.textContent = scores[1];
+ showEnd('CPU WINS');
+ }
+ } else {
+ showEnd('DRAW');
+ }
+ }
+}
+
+function showEnd(msg) {
+ overlay.classList.remove('hidden');
+ overlay.querySelector('h1').textContent = msg;
+ overlay.querySelector('p').textContent = 'Press Start or Space for another round';
+ startBtn.textContent = 'Again';
+}
+
+function render() {
+ drawGridBg();
+ for (const p of players) drawTrail(p);
+}
+
+function loop() {
+ step();
+ render();
+ if (running) {
+ animId = requestAnimationFrame(() => {
+ setTimeout(loop, 70);
+ });
+ }
+}
+
+function start() {
+ cancelAnimationFrame(animId);
+ overlay.classList.add('hidden');
+ initGame();
+ render();
+ loop();
+}
+
+startBtn.addEventListener('click', start);
+
+document.addEventListener('keydown', e => {
+ const k = e.key.toLowerCase();
+ if (k === ' ' || k === 'enter') {
+ if (!running) start();
+ e.preventDefault();
+ return;
+ }
+ if (!running || !players[0].alive) return;
+ const p = players[0];
+ let nd = null;
+ if (k === 'arrowup' || k === 'w') nd = 'UP';
+ else if (k === 'arrowdown' || k === 's') nd = 'DOWN';
+ else if (k === 'arrowleft' || k === 'a') nd = 'LEFT';
+ else if (k === 'arrowright' || k === 'd') nd = 'RIGHT';
+ if (nd && nd !== OPP[p.dir]) {
+ p.nextdir = nd;
+ e.preventDefault();
+ }
+});
+
+// Initial splash render
+resetGrid();
+players = [];
+drawGridBg();
+ctx.fillStyle = '#0ff';
+ctx.font = 'bold 20px monospace';
+ctx.textAlign = 'center';
+ctx.shadowBlur = 10;
+ctx.shadowColor = '#0ff';
+ctx.fillText('TRON', W / 2, H / 2 + 20);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/52cab5a7ddb7/qwen3-14b.png b/data/artifacts/52cab5a7ddb7/qwen3-14b.png
new file mode 100644
index 0000000..07b8924
Binary files /dev/null and b/data/artifacts/52cab5a7ddb7/qwen3-14b.png differ
diff --git a/data/artifacts/776187e02cf0/claude-code.html b/data/artifacts/776187e02cf0/claude-code.html
new file mode 100644
index 0000000..d53dd07
--- /dev/null
+++ b/data/artifacts/776187e02cf0/claude-code.html
@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Designer Wallcoverings — Mood Board Studio</title>
+<style>
+ :root{
+ --bg:#0d0d0f; --surface:#17171c; --text:#f5f2ea; --muted:#8a8578;
+ --accent:#c9a961; --accent-2:#7d6a45; --line:rgba(245,242,234,.12);
+ --serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+ *{margin:0;padding:0;box-sizing:border-box}
+ html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+ body{min-height:100vh;display:flex;flex-direction:column;align-items:center}
+
+ /* ambient drift */
+ body::before{
+ content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
+ background:radial-gradient(60% 50% at 20% 15%,rgba(201,169,97,.10),transparent 60%),
+ radial-gradient(55% 55% at 85% 85%,rgba(125,106,69,.10),transparent 60%);
+ animation:drift 18s ease-in-out infinite alternate;
+ }
+ @keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
+
+ /* fixed top bar */
+ .topbar{
+ position:sticky;top:0;z-index:20;width:100%;
+ display:flex;align-items:center;justify-content:space-between;
+ padding:22px clamp(24px,5vw,64px);
+ background:linear-gradient(180deg,rgba(13,13,15,.94),rgba(13,13,15,.72));
+ backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
+ }
+ .wordmark{
+ font-family:var(--serif);font-weight:600;text-transform:uppercase;
+ letter-spacing:.18em;font-size:clamp(16px,2vw,22px);color:var(--text);
+ line-height:1;
+ }
+ .wordmark span{color:var(--accent)}
+ .topbar .meta{
+ font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
+ }
+
+ .stage{
+ position:relative;z-index:1;width:100%;
+ display:flex;flex-direction:column;align-items:center;
+ padding:48px 24px 96px;gap:32px;
+ }
+
+ /* controls */
+ .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 24px}
+ .themes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
+ .theme-btn{
+ font-family:var(--sans);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
+ color:var(--muted);background:transparent;border:1px solid var(--line);
+ padding:10px 18px;border-radius:40px;cursor:pointer;transition:all .22s cubic-bezier(.22,1,.36,1);
+ }
+ .theme-btn:hover{color:var(--text);border-color:rgba(245,242,234,.28)}
+ .theme-btn.active{color:#0d0d0f;background:var(--accent);border-color:var(--accent)}
+ .regen{
+ font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
+ color:var(--text);background:transparent;border:1px solid var(--accent);
+ padding:13px 30px;border-radius:40px;cursor:pointer;position:relative;overflow:hidden;
+ transition:all .22s cubic-bezier(.22,1,.36,1);
+ }
+ .regen:hover{color:#0d0d0f;background:var(--accent);box-shadow:0 0 24px rgba(201,169,97,.35)}
+ .regen:active{transform:translateY(1px)}
+
+ /* the 1080x1350 board */
+ .board-wrap{
+ width:min(540px,92vw);
+ }
+ .board{
+ position:relative;width:100%;aspect-ratio:1080/1350;
+ background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
+ box-shadow:0 24px 64px rgba(0,0,0,.5);
+ display:grid;
+ grid-template-columns:1.55fr 1fr;
+ grid-template-rows:auto 1.35fr 1fr auto;
+ grid-template-areas:
+ "head head"
+ "hero swatches"
+ "hero texture"
+ "type type";
+ padding:clamp(16px,3.4vw,26px);
+ gap:clamp(10px,2vw,16px);
+ }
+
+ .b-head{grid-area:head;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:12px}
+ .b-head .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+ .b-head .collection{font-family:var(--serif);font-size:clamp(20px,4.4vw,30px);font-weight:600;letter-spacing:.01em;line-height:1;margin-top:6px}
+ .b-head .season{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-align:right}
+
+ .hero{grid-area:hero;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
+ .hero-label{
+ position:absolute;left:12px;bottom:12px;z-index:2;
+ font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);
+ background:rgba(13,13,15,.55);backdrop-filter:blur(4px);
+ padding:6px 10px;border-radius:20px;border:1px solid rgba(245,242,234,.14);
+ }
+
+ .swatches{grid-area:swatches;display:flex;flex-direction:column;gap:clamp(6px,1.4vw,10px)}
+ .chip{
+ flex:1;border-radius:8px;position:relative;overflow:hidden;border:1px solid var(--line);
+ display:flex;align-items:flex-end;padding:9px 11px;min-height:0;
+ }
+ .chip .name{
+ font-size:10px;letter-spacing:.06em;line-height:1.15;
+ font-family:var(--serif);font-weight:600;
+ }
+ .chip .hex{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin-top:2px}
+
+ .texture{grid-area:texture;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--line)}
+ .texture .tag{
+ position:absolute;top:10px;right:10px;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
+ color:var(--text);background:rgba(13,13,15,.5);padding:4px 8px;border-radius:14px;border:1px solid rgba(245,242,234,.14)
+ }
+
+ .type{grid-area:type;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px}
+ .type .display{font-family:var(--serif);font-weight:600;font-size:clamp(22px,5vw,34px);line-height:1;letter-spacing:.01em}
+ .type .pairing{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
+ .type .body{font-family:var(--sans);font-size:11px;line-height:1.5;color:var(--muted);max-width:64%}
+ .type .pairnote{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
+
+ /* entrance stagger */
+ .anim{opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}
+ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
+
+ .footnote{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
+ .footnote b{color:var(--accent);font-weight:400}
+</style>
+</head>
+<body>
+ <header class="topbar">
+ <div class="wordmark">Designer <span>Wallcoverings</span></div>
+ <div class="meta">Mood Board Studio</div>
+ </header>
+
+ <main class="stage">
+ <div class="controls">
+ <div class="themes" id="themes"></div>
+ <button class="regen" id="regen">↻ Regenerate</button>
+ </div>
+
+ <div class="board-wrap">
+ <section class="board" id="board" aria-label="Mood board canvas">
+ <div class="b-head">
+ <div>
+ <div class="k">Curated Set</div>
+ <div class="collection" id="collectionName">Amber Reverie</div>
+ </div>
+ <div class="season" id="seasonTag">No. 001 · FW26</div>
+ </div>
+
+ <div class="hero" id="hero">
+ <div class="hero-label" id="heroLabel">Hero Pattern</div>
+ </div>
+
+ <div class="swatches" id="swatches"></div>
+
+ <div class="texture" id="texture">
+ <div class="tag" id="textureTag">Texture</div>
+ </div>
+
+ <div class="type">
+ <div class="display" id="typeDisplay">Quiet Luxury</div>
+ <div class="pairing">
+ <div class="body" id="typeBody">A restrained pairing of a high-contrast serif display against a refined sans — measured, editorial, unmistakably crafted.</div>
+ <div class="pairnote" id="pairNote">Serif × Sans</div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="footnote">Share-ready · <b>1080 × 1350</b> · Interior Design Editorial</div>
+ </main>
+
+<script>
+(function(){
+ // ---- Theme data ------------------------------------------------------
+ const THEMES = {
+ Classic: {
+ accent:'#c9a961', accent2:'#7d6a45', ground:'#141216', hero:'#1c1a20',
+ collections:['Amber Reverie','Estate Damask','Gilded Study','Heritage Room','Old World Salon'],
+ colors:[
+ {name:'Champagne',hex:'#d9c79c'},{name:'Oxblood',hex:'#6e2c2c'},{name:'Ink Damask',hex:'#242028'},
+ {name:'Alabaster',hex:'#e9e3d5'},{name:'Antique Brass',hex:'#a9863f'},{name:'Deep Bordeaux',hex:'#4a1f27'},
+ {name:'Ivory Silk',hex:'#efe9dc'},{name:'Bronze',hex:'#7d6a45'},{name:'Slate Noir',hex:'#20202a'}
+ ],
+ displays:['Quiet Luxury','The Grand Salon','Heritage & Craft','Timeless Room'],
+ patterns:['damask','stripe','trellis','medallion'],
+ textures:['silk','grasscloth','linen'],
+ pairNotes:['Didot × Sans','Bodoni × Grotesk','Serif × Sans']
+ },
+ Coastal: {
+ accent:'#9fb8c4', accent2:'#5f7d8c', ground:'#101418', hero:'#16202a',
+ collections:['Salt & Sail','Harbor Mist','Driftwood','Tidal Room','Pale Shores'],
+ colors:[
+ {name:'Sea Glass',hex:'#a9c6c2'},{name:'Deep Marine',hex:'#1f3b4d'},{name:'Sailcloth',hex:'#e4e6e2'},
+ {name:'Faded Denim',hex:'#5f7d8c'},{name:'Driftwood',hex:'#b3a68f'},{name:'Fog',hex:'#c9d2d4'},
+ {name:'Slate Tide',hex:'#37505c'},{name:'Oyster',hex:'#ddd8cc'},{name:'Storm Blue',hex:'#2a4658'}
+ ],
+ displays:['By the Water','Open Horizons','A Coastal Calm','Salt Air'],
+ patterns:['wave','stripe','trellis','grid'],
+ textures:['linen','grasscloth','silk'],
+ pairNotes:['Serif × Sans','Georgia × Grotesk','Didot × Sans']
+ },
+ Moody: {
+ accent:'#b78be0', accent2:'#5b4a6e', ground:'#0c0b10', hero:'#141019',
+ collections:['Midnight Atelier','Velvet Hours','Noir Botanica','After Dark','The Dim Room'],
+ colors:[
+ {name:'Aubergine',hex:'#3d2a45'},{name:'Ember',hex:'#8a3b2e'},{name:'Charcoal',hex:'#1c1a20'},
+ {name:'Plum Smoke',hex:'#5b4a6e'},{name:'Antique Gold',hex:'#9c7d3a'},{name:'Deep Teal',hex:'#1f3a3a'},
+ {name:'Obsidian',hex:'#131217'},{name:'Muted Rose',hex:'#7a4a52'},{name:'Pewter',hex:'#4a4750'}
+ ],
+ displays:['Low Light','The Velvet Hour','Dark & Refined','Nocturne'],
+ patterns:['medallion','damask','wave','trellis'],
+ textures:['velvet','silk','grasscloth'],
+ pairNotes:['Bodoni × Sans','Didot × Grotesk','Serif × Sans']
+ },
+ Botanical: {
+ accent:'#a8bd7a', accent2:'#5c6e3f', ground:'#0f130c', hero:'#161c12',
+ collections:['Fern & Frond','Conservatory','Garden Study','Verdant Room','Wild Trellis'],
+ colors:[
+ {name:'Moss',hex:'#5c6e3f'},{name:'Celadon',hex:'#b7c9a3'},{name:'Terracotta',hex:'#a35a3a'},
+ {name:'Olive Leaf',hex:'#7a8450'},{name:'Cream Bloom',hex:'#e7e2cf'},{name:'Deep Forest',hex:'#243521'},
+ {name:'Ochre',hex:'#b28a3c'},{name:'Sage Mist',hex:'#c3cbb2'},{name:'Bark',hex:'#4a3b2a'}
+ ],
+ displays:['The Conservatory','A Verdant Room','Garden & Grove','In Full Bloom'],
+ patterns:['trellis','medallion','wave','stripe'],
+ textures:['grasscloth','linen','silk'],
+ pairNotes:['Serif × Sans','Georgia × Grotesk','Didot × Sans']
+ }
+ };
+
+ // deterministic-ish RNG helpers
+ const rand = a => a[Math.floor(Math.random()*a.length)];
+ function pick3(arr){
+ const c=[...arr], out=[];
+ for(let i=0;i<3 && c.length;i++){out.push(c.splice(Math.floor(Math.random()*c.length),1)[0]);}
+ return out;
+ }
+
+ // ---- Pattern generators (pure CSS backgrounds) -----------------------
+ function heroBackground(kind, a, a2, ground){
+ switch(kind){
+ case 'damask':
+ return `radial-gradient(circle at 25% 25%, ${a}22 0 12%, transparent 13%),
+ radial-gradient(circle at 75% 75%, ${a}22 0 12%, transparent 13%),
+ radial-gradient(circle at 75% 25%, ${a2}30 0 9%, transparent 10%),
+ radial-gradient(circle at 25% 75%, ${a2}30 0 9%, transparent 10%),
+ linear-gradient(135deg, ${ground}, #0c0b0e)`;
+ case 'stripe':
+ return `repeating-linear-gradient(90deg, ${a}1e 0 6px, transparent 6px 14px, ${a2}22 14px 16px, transparent 16px 30px),
+ linear-gradient(180deg, ${ground}, #0c0b0e)`;
+ case 'trellis':
+ return `repeating-linear-gradient(45deg, ${a}22 0 2px, transparent 2px 26px),
+ repeating-linear-gradient(-45deg, ${a}22 0 2px, transparent 2px 26px),
+ linear-gradient(135deg, ${ground}, #0c0b0e)`;
+ case 'medallion':
+ return `radial-gradient(circle at 50% 50%, ${a}30 0 6%, transparent 7% 12%, ${a2}26 13% 15%, transparent 16%),
+ repeating-radial-gradient(circle at 50% 50%, transparent 0 30px, ${a}12 30px 32px),
+ linear-gradient(135deg, ${ground}, #0c0b0e)`;
+ case 'wave':
+ return `repeating-radial-gradient(circle at 0% 50%, transparent 0 14px, ${a}1c 14px 16px),
+ repeating-radial-gradient(circle at 100% 50%, transparent 0 14px, ${a2}20 14px 16px),
+ linear-gradient(180deg, ${ground}, #0c0b0e)`;
+ case 'grid':
+ return `repeating-linear-gradient(0deg, ${a}1c 0 1px, transparent 1px 22px),
+ repeating-linear-gradient(90deg, ${a}1c 0 1px, transparent 1px 22px),
+ linear-gradient(135deg, ${ground}, #0c0b0e)`;
+ default:
+ return `linear-gradient(135deg, ${ground}, #0c0b0e)`;
+ }
+ }
+ const heroSize = {
+ damask:'88px 88px', stripe:'30px 100%', trellis:'auto', medallion:'120px 120px',
+ wave:'32px 32px', grid:'22px 22px'
+ };
+
+ function textureBackground(kind, a, a2, ground){
+ switch(kind){
+ case 'silk':
+ return `linear-gradient(115deg, ${a2}00 0%, ${a}22 40%, ${a2}00 55%, ${a}18 75%, ${a2}00 100%),
+ linear-gradient(160deg, ${ground}, #0b0a0d)`;
+ case 'grasscloth':
+ return `repeating-linear-gradient(90deg, ${a2}22 0 1px, transparent 1px 4px),
+ repeating-linear-gradient(0deg, ${a2}14 0 1px, transparent 1px 3px),
+ linear-gradient(135deg, ${a2}22, ${ground})`;
+ case 'linen':
+ return `repeating-linear-gradient(0deg, ${a}12 0 1px, transparent 1px 3px),
+ repeating-linear-gradient(90deg, ${a}10 0 1px, transparent 1px 3px),
+ linear-gradient(135deg, #14131a, ${ground})`;
+ case 'velvet':
+ return `radial-gradient(120% 90% at 30% 20%, ${a}2e, transparent 60%),
+ radial-gradient(120% 90% at 80% 90%, ${a2}3a, transparent 60%),
+ linear-gradient(135deg, #14101a, ${ground})`;
+ default:
+ return `linear-gradient(135deg, ${a2}22, ${ground})`;
+ }
+ }
+
+ function readableText(hex){
+ const c=hex.replace('#','');
+ const r=parseInt(c.substr(0,2),16),g=parseInt(c.substr(2,2),16),b=parseInt(c.substr(4,2),16);
+ const l=(0.299*r+0.587*g+0.114*b)/255;
+ return l>0.55 ? '#1c1a17' : '#f5f2ea';
+ }
+
+ // ---- State ------------------------------------------------------------
+ let current='Classic';
+ let counter=0;
+
+ const $ = id => document.getElementById(id);
+
+ function setThemeVars(t){
+ document.documentElement.style.setProperty('--accent', t.accent);
+ document.documentElement.style.setProperty('--accent-2', t.accent2);
+ }
+
+ function reflow(el){ el.classList.remove('anim'); void el.offsetWidth; el.classList.add('anim'); }
+
+ function generate(){
+ const t = THEMES[current];
+ setThemeVars(t);
+ counter++;
+
+ const collection = rand(t.collections);
+ const patKind = rand(t.patterns);
+ const texKind = rand(t.textures);
+ const chips = pick3(t.colors);
+ const display = rand(t.displays);
+ const pairNote = rand(t.pairNotes);
+
+ // header
+ $('collectionName').textContent = collection;
+ $('seasonTag').textContent = 'No. ' + String(counter).padStart(3,'0') + ' · FW26';
+
+ // hero
+ const hero=$('hero');
+ hero.style.backgroundImage = heroBackground(patKind, t.accent, t.accent2, t.hero);
+ hero.style.backgroundSize = heroSize[patKind] || 'auto';
+ $('heroLabel').textContent = patKind.charAt(0).toUpperCase()+patKind.slice(1)+' Pattern';
+
+ // swatches
+ const sw=$('swatches'); sw.innerHTML='';
+ chips.forEach((ch,i)=>{
+ const div=document.createElement('div');
+ div.className='chip';
+ div.style.background=ch.hex;
+ const tc=readableText(ch.hex);
+ div.innerHTML=`<div class="name" style="color:${tc}">${ch.name}<span class="hex" style="color:${tc}">${ch.hex}</span></div>`;
+ div.style.animationDelay=(i*0.09)+'s';
+ sw.appendChild(div);
+ });
+
+ // texture
+ const tex=$('texture');
+ tex.style.backgroundImage = textureBackground(texKind, t.accent, t.accent2, t.ground);
+ tex.style.backgroundSize = texKind==='grasscloth'?'4px 4px, 3px 3px, 100% 100%':'auto';
+ $('textureTag').textContent = texKind.charAt(0).toUpperCase()+texKind.slice(1);
+
+ // type pairing
+ $('typeDisplay').textContent = display;
+ $('pairNote').textContent = pairNote;
+
+ // animate
+ const board=$('board');
+ [...board.children].forEach((c,i)=>{ c.style.animationDelay=(i*0.09)+'s'; reflow(c); });
+ }
+
+ // ---- Build theme buttons ---------------------------------------------
+ const wrap=$('themes');
+ Object.keys(THEMES).forEach(name=>{
+ const b=document.createElement('button');
+ b.className='theme-btn'+(name===current?' active':'');
+ b.textContent=name;
+ b.addEventListener('click',()=>{
+ current=name;
+ [...wrap.children].forEach(x=>x.classList.remove('active'));
+ b.classList.add('active');
+ generate();
+ });
+ wrap.appendChild(b);
+ });
+
+ $('regen').addEventListener('click', generate);
+
+ generate();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/776187e02cf0/claude-code.png b/data/artifacts/776187e02cf0/claude-code.png
new file mode 100644
index 0000000..c9e1562
Binary files /dev/null and b/data/artifacts/776187e02cf0/claude-code.png differ
diff --git a/data/artifacts/776187e02cf0/gpt.html b/data/artifacts/776187e02cf0/gpt.html
new file mode 100644
index 0000000..f6da930
--- /dev/null
+++ b/data/artifacts/776187e02cf0/gpt.html
@@ -0,0 +1,1196 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Designer Wallcoverings — Moodboard Generator</title>
+<style>
+:root {
+ /* Palette from luxe-noir */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #181820;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961; /* metallic gold */
+ --accent2: #7d6a45;
+
+ /* Typography scale */
+ --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
+ --font-body: "Avenir Next", "Century Gothic", Futura, "Segoe UI", sans-serif;
+
+ --fs-caption: 12px;
+ --fs-body: 16px;
+ --fs-lead: 21px;
+ --fs-h3: 28px;
+ --fs-h2: 38px;
+ --fs-h1: 50px;
+
+ /* Motion */
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --ease-ui: cubic-bezier(.22,.9,.24,1);
+
+ --radius-card: 14px;
+ --radius-chip: 999px;
+ --shadow-soft: 0 26px 45px rgba(0, 0, 0, 0.65);
+ --shadow-subtle: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.65);
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(circle at top left, #17171c 0, #070709 52%, #020203 100%);
+ color: var(--text);
+ font-family: var(--font-body);
+ font-size: var(--fs-body);
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Top Bar */
+
+.app-shell {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+.top-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 64px;
+ padding: 0 32px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ backdrop-filter: blur(18px);
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.18), transparent 55%),
+ linear-gradient(to bottom, rgba(7,7,10,0.96), rgba(7,7,10,0.90));
+ border-bottom: 1px solid rgba(255,255,255,0.06);
+ z-index: 20;
+}
+
+.wordmark {
+ font-family: "Cormorant Garamond", "EB Garamond", "Playfair Display", "Times New Roman", Georgia, serif;
+ font-size: 14px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ line-height: 1.2;
+}
+
+.wordmark span {
+ display: inline-block;
+ transform: translateY(-0.5px);
+}
+
+.top-controls {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.badge-theme {
+ padding: 4px 10px 3px;
+ border-radius: 999px;
+ border: 1px solid rgba(201,169,97,0.55);
+ color: var(--accent);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ background: radial-gradient(circle at 30% 0, rgba(201,169,97,0.24), transparent 60%);
+}
+
+.badge-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 0, #f5f2ea, #c9a961);
+ box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
+}
+
+/* Layout */
+
+.main {
+ flex: 1;
+ padding: 92px 32px 32px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+}
+
+.canvas-shell {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ align-items: center;
+}
+
+/* Canvas 1080x1350 (4:5) */
+
+.moodboard-frame {
+ width: min(540px, 100%);
+ aspect-ratio: 4 / 5;
+ border-radius: 20px;
+ padding: 22px 22px 20px;
+ background: radial-gradient(circle at top left, #22232b, #0a0a0d);
+ box-shadow: var(--shadow-soft);
+ position: relative;
+ overflow: hidden;
+}
+
+.moodboard-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 18px;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.16), transparent 52%),
+ linear-gradient(145deg, #111119 0, #07070b 50%, #050506 100%);
+ border: 1px solid rgba(255,255,255,0.06);
+ overflow: hidden;
+}
+
+/* Fine border grid */
+
+.moodboard-inner::before {
+ content: "";
+ position: absolute;
+ inset: 16px 18px 18px 18px;
+ border-radius: 14px;
+ border: 1px solid rgba(255,255,255,0.06);
+ pointer-events: none;
+}
+
+.moodboard-inner::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
+ background-size: 40px 40px;
+ mix-blend-mode: soft-light;
+ opacity: 0.35;
+ pointer-events: none;
+}
+
+/* Header inside canvas */
+
+.board-header {
+ position: absolute;
+ top: 20px;
+ left: 26px;
+ right: 26px;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 16px;
+ z-index: 2;
+}
+
+.board-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.board-label {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+}
+
+.board-title {
+ font-family: var(--font-display);
+ font-size: 24px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--text);
+}
+
+.board-caption {
+ font-size: 12px;
+ color: rgba(245,242,234,0.7);
+ max-width: 220px;
+}
+
+.board-badge {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ padding: 4px 10px 4px;
+ border-radius: 999px;
+ border: 1px solid rgba(255,255,255,0.10);
+ color: rgba(245,242,234,0.78);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.board-badge-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 0, #c9a961, #7d6a45);
+}
+
+/* Layout grid of elements */
+
+.board-grid {
+ position: absolute;
+ inset: 76px 26px 26px 26px;
+ display: grid;
+ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+ grid-template-rows: minmax(0, 1.25fr) minmax(0, 0.9fr);
+ gap: 18px;
+ z-index: 1;
+}
+
+/* Hero pattern card */
+
+.card {
+ position: relative;
+ border-radius: var(--radius-card);
+ background: var(--surface-soft);
+ border: 1px solid rgba(255,255,255,0.06);
+ box-shadow: var(--shadow-subtle);
+ overflow: hidden;
+}
+
+.card-header {
+ position: absolute;
+ top: 14px;
+ left: 14px;
+ right: 14px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: rgba(245,242,234,0.7);
+ z-index: 3;
+}
+
+.card-tag {
+ padding: 2px 8px 2px;
+ border-radius: 999px;
+ border: 1px solid rgba(255,255,255,0.1);
+ background: rgba(11,11,15,0.84);
+}
+
+.card-body {
+ position: absolute;
+ inset: 0;
+ padding: 40px 18px 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+}
+
+/* Hero pattern geometry */
+
+.hero-pattern {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+ border-radius: inherit;
+ background: radial-gradient(circle at top left, rgba(201,169,97,0.4), transparent 55%),
+ radial-gradient(circle at bottom right, rgba(9,7,2,0.9), #050508 60%);
+}
+
+.hero-pattern::before,
+.hero-pattern::after {
+ content: "";
+ position: absolute;
+ inset: 18% 10%;
+ border-radius: 24px;
+ border: 1px solid rgba(201,169,97,0.5);
+ box-shadow:
+ 0 0 0 1px rgba(0,0,0,0.8),
+ 0 18px 40px rgba(0,0,0,0.9);
+ mix-blend-mode: screen;
+}
+
+.hero-pattern::after {
+ inset: 28% 20%;
+ border-radius: 32px;
+ border-color: rgba(250,242,214,0.35);
+}
+
+.hero-lines {
+ position: absolute;
+ inset: 10% 8%;
+ border-radius: 18px;
+ overflow: hidden;
+ mix-blend-mode: lighten;
+ opacity: 0.9;
+}
+
+.hero-lines::before,
+.hero-lines::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image:
+ linear-gradient(135deg,
+ rgba(201,169,97,0.0) 0,
+ rgba(201,169,97,0.65) 32%,
+ rgba(245,242,234,0.8) 50%,
+ rgba(201,169,97,0.0) 75%);
+ background-size: 55px 55px;
+ background-repeat: repeat;
+ opacity: 0.82;
+}
+
+.hero-lines::after {
+ transform: rotate(90deg);
+ opacity: 0.55;
+}
+
+/* Hero text overlay */
+
+.hero-text {
+ position: relative;
+ margin-top: auto;
+ max-width: 80%;
+ z-index: 2;
+}
+
+.hero-name {
+ font-family: var(--font-display);
+ font-size: 22px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ margin-bottom: 4px;
+}
+
+.hero-subline {
+ font-size: 12px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: rgba(245,242,234,0.7);
+}
+
+/* Color chips */
+
+.card-colors {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 14px 14px 12px;
+}
+
+.color-chip-row {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.color-chip {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.color-swatch {
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ border: 1px solid rgba(255,255,255,0.18);
+ box-shadow: 0 10px 18px rgba(0,0,0,0.85);
+}
+
+.color-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.color-name {
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: rgba(245,242,234,0.9);
+}
+
+.color-code {
+ font-size: 11px;
+ color: rgba(245,242,234,0.65);
+}
+
+/* Type pairing */
+
+.card-type {
+ padding: 16px 16px 14px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.type-label {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ margin-bottom: 8px;
+}
+
+.type-pair {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.type-display {
+ font-family: var(--font-display);
+ font-size: 24px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.type-body {
+ font-size: 13px;
+ max-width: 32ch;
+ color: rgba(245,242,234,0.78);
+}
+
+.type-meta {
+ margin-top: 8px;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: rgba(245,242,234,0.65);
+}
+
+/* Texture tile */
+
+.card-texture {
+ position: relative;
+ padding: 16px 16px 14px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.texture-tile {
+ position: relative;
+ margin-top: 6px;
+ border-radius: 14px;
+ overflow: hidden;
+ height: 96px;
+ border: 1px solid rgba(255,255,255,0.10);
+ background:
+ radial-gradient(circle at 0 0, rgba(245,242,234,0.5), transparent 50%),
+ radial-gradient(circle at 100% 100%, rgba(201,169,97,0.7), #050504 65%);
+}
+
+.texture-noise {
+ position: absolute;
+ inset: -40%;
+ background-image:
+ radial-gradient(circle, rgba(245,242,234,0.12) 1px, transparent 0),
+ radial-gradient(circle, rgba(201,169,97,0.22) 1px, transparent 0);
+ background-size: 3px 3px, 7px 7px;
+ mix-blend-mode: soft-light;
+ opacity: 0.7;
+}
+
+.texture-stripe {
+ position: absolute;
+ inset: 12% 18%;
+ border-radius: 10px;
+ background-image:
+ linear-gradient(135deg,
+ rgba(5,5,4,0) 0,
+ rgba(8,8,8,0.95) 10%,
+ rgba(14,13,9,0.95) 40%,
+ rgba(9,8,5,0.85) 60%,
+ rgba(3,2,1,0) 90%);
+ box-shadow: 0 18px 36px rgba(0,0,0,0.85);
+ opacity: 0.95;
+}
+
+.texture-caption {
+ font-size: 11px;
+ color: rgba(245,242,234,0.78);
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+}
+
+/* Regenerate button + theme select */
+
+.controls-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18px;
+ width: min(540px, 100%);
+}
+
+.select-wrap {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.select-wrap label {
+ white-space: nowrap;
+}
+
+.select-wrap select {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ padding: 6px 28px 6px 10px;
+ border-radius: 999px;
+ border: 1px solid rgba(255,255,255,0.14);
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.15), transparent 55%),
+ rgba(9,9,13,0.96);
+ color: var(--text);
+ font-family: inherit;
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ cursor: pointer;
+ outline: none;
+}
+
+.select-wrap::after {
+ content: "";
+ position: absolute;
+ right: 10px;
+ width: 8px;
+ height: 8px;
+ border-radius: 2px;
+ border-right: 1px solid rgba(245,242,234,0.8);
+ border-bottom: 1px solid rgba(245,242,234,0.8);
+ transform: rotate(45deg);
+ pointer-events: none;
+}
+
+.button-primary {
+ margin-left: auto;
+ padding: 9px 22px 9px;
+ border-radius: 999px;
+ border: 1px solid rgba(201,169,97,0.7);
+ background:
+ radial-gradient(circle at top left, rgba(201,169,97,0.28), transparent 58%),
+ linear-gradient(135deg, #1a1a1f, #09090d);
+ color: var(--text);
+ font-size: 11px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ outline: none;
+ position: relative;
+ overflow: hidden;
+ transition:
+ background 260ms var(--ease-ui),
+ box-shadow 260ms var(--ease-ui),
+ transform 260ms var(--ease-ui),
+ border-color 260ms var(--ease-ui);
+ box-shadow: 0 14px 28px rgba(0,0,0,0.7);
+}
+
+.button-primary span.icon {
+ width: 14px;
+ height: 14px;
+ border-radius: 999px;
+ border: 1px solid rgba(201,169,97,0.7);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.button-primary span.icon::before {
+ content: "";
+ width: 8px;
+ height: 1px;
+ background: rgba(201,169,97,0.9);
+ transform-origin: center;
+}
+
+.button-primary span.icon::after {
+ content: "";
+ position: absolute;
+ width: 1px;
+ height: 8px;
+ background: rgba(201,169,97,0.9);
+}
+
+.button-primary:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 20px 38px rgba(0,0,0,0.85);
+ border-color: rgba(250,242,214,0.9);
+}
+
+.button-primary:active {
+ transform: translateY(0);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.8);
+}
+
+.button-primary::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle at 0 0, rgba(250,242,214,0.18), transparent 52%);
+ opacity: 0;
+ transition: opacity 320ms var(--ease-ui);
+}
+
+.button-primary:hover::after {
+ opacity: 1;
+}
+
+/* Motion */
+
+@keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scaleIn {
+ from { opacity: 0; transform: scale(.92); }
+ to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes blurIn {
+ from { opacity: 0; filter: blur(12px); }
+ to { opacity: 1; filter: blur(0); }
+}
+
+@keyframes clipReveal {
+ from { clip-path: inset(0 100% 0 0); }
+ to { clip-path: inset(0); }
+}
+
+.moodboard-inner.animate-in {
+ animation: fadeUp 640ms var(--ease-hero) both;
+}
+
+.hero-pattern.animate-in {
+ animation: blurIn 900ms var(--ease-hero) both;
+}
+
+.hero-text.animate-in {
+ animation: clipReveal 700ms var(--ease-hero) both;
+ animation-delay: 120ms;
+}
+
+.board-grid.animate-in > * {
+ animation: scaleIn 620ms var(--ease-hero) both;
+}
+
+.board-grid.animate-in > *:nth-child(1) { animation-delay: 40ms; }
+.board-grid.animate-in > *:nth-child(2) { animation-delay: 90ms; }
+.board-grid.animate-in > *:nth-child(3) { animation-delay: 140ms; }
+.board-grid.animate-in > *:nth-child(4) { animation-delay: 190ms; }
+
+/* Responsive */
+
+@media (max-width: 720px) {
+ .top-bar {
+ padding: 0 18px;
+ }
+ .wordmark {
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ }
+ .main {
+ padding: 88px 16px 24px;
+ }
+ .moodboard-frame {
+ width: 100%;
+ }
+ .controls-row {
+ width: 100%;
+ flex-direction: column-reverse;
+ align-items: stretch;
+ }
+ .button-primary {
+ width: 100%;
+ justify-content: center;
+ }
+ .select-wrap {
+ width: 100%;
+ justify-content: space-between;
+ }
+ .select-wrap select {
+ flex: 1;
+ }
+}
+
+/* No focus rings override; keep browser default but slightly refine */
+button:focus-visible,
+select:focus-visible {
+ outline: 1px solid rgba(201,169,97,0.9);
+ outline-offset: 2px;
+}
+</style>
+</head>
+<body>
+<div class="app-shell">
+ <header class="top-bar">
+ <div class="wordmark"><span>DESIGNER WALLCOVERINGS</span></div>
+ <div class="top-controls">
+ <div class="badge-theme">
+ <span class="badge-dot"></span>
+ <span id="top-theme-label">CLASSIC PALETTE</span>
+ </div>
+ </div>
+ </header>
+
+ <main class="main">
+ <div class="canvas-shell">
+ <div class="moodboard-frame">
+ <div class="moodboard-inner" id="board">
+ <div class="board-header">
+ <div class="board-meta">
+ <div class="board-label">Wallcovering Mood Study</div>
+ <div class="board-title" id="board-title">Classic Salon</div>
+ <div class="board-caption" id="board-caption">
+ A composed study in tailored geometrics, champagne metallics, and refined contrast for formal entertaining spaces.
+ </div>
+ </div>
+ <div class="board-badge">
+ <span class="board-badge-dot"></span>
+ <span id="board-style-label">Classic</span>
+ </div>
+ </div>
+
+ <div class="board-grid" id="board-grid">
+ <!-- Hero pattern -->
+ <section class="card" id="hero-card">
+ <div class="hero-pattern" id="hero-pattern">
+ <div class="hero-lines"></div>
+ </div>
+ <div class="card-header">
+ <span class="card-tag">Signature Pattern</span>
+ <span id="hero-code">DW–CL01</span>
+ </div>
+ <div class="card-body">
+ <div class="hero-text" id="hero-text">
+ <div class="hero-name" id="hero-name">Salon Parquet</div>
+ <div class="hero-subline" id="hero-subline">Champagne Geometric Weave</div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Color chips -->
+ <section class="card card-colors" id="color-card">
+ <div class="card-header">
+ <span class="card-tag">Palette</span>
+ <span id="palette-name">Luxe Noir</span>
+ </div>
+ <div class="color-chip-row" id="color-chip-row">
+ <!-- Chips injected via JS -->
+ </div>
+ </section>
+
+ <!-- Type pairing -->
+ <section class="card card-type" id="type-card">
+ <div>
+ <div class="type-label">Type pairing</div>
+ <div class="type-pair">
+ <div class="type-display" id="type-display">Salon Heading</div>
+ <div class="type-body" id="type-body">
+ A composed serif headline pairs with a geometric sans body to frame architectural photography and finish details.
+ </div>
+ </div>
+ </div>
+ <div class="type-meta" id="type-meta">
+ Display: Playfair · Body: Geometric Sans
+ </div>
+ </section>
+
+ <!-- Texture tile -->
+ <section class="card card-texture" id="texture-card">
+ <div>
+ <div class="type-label">Tactile note</div>
+ <div class="texture-caption" id="texture-caption">
+ Brushed silk, low-sheen metallic
+ </div>
+ </div>
+ <div class="texture-tile" id="texture-tile">
+ <div class="texture-noise"></div>
+ <div class="texture-stripe"></div>
+ </div>
+ </section>
+ </div>
+ </div>
+ </div>
+
+ <div class="controls-row">
+ <div class="select-wrap">
+ <label for="theme-select">Style theme</label>
+ <select id="theme-select">
+ <option value="Classic">Classic</option>
+ <option value="Coastal">Coastal</option>
+ <option value="Moody">Moody</option>
+ <option value="Botanical">Botanical</option>
+ </select>
+ </div>
+ <button class="button-primary" id="regen-btn" type="button">
+ <span class="icon"></span>
+ <span>Regenerate board</span>
+ </button>
+ </div>
+ </div>
+ </main>
+</div>
+
+<script>
+(function() {
+ const themes = {
+ Classic: {
+ title: "Classic Salon",
+ caption: "A composed study in tailored geometrics, champagne metallics, and refined contrast for formal entertaining spaces.",
+ styleLabel: "Classic",
+ hero: {
+ name: ["Salon Parquet", "Grand Moulding", "Pavilion Panel"],
+ subline: [
+ "Champagne Geometric Weave",
+ "Ivory Moulded Damask",
+ "Viennese Panel Stripe"
+ ],
+ codePrefix: "DW–CL"
+ },
+ paletteName: "Luxe Noir",
+ colors: [
+ { name: "Ivory Panel", hex: "#f5f2ea" },
+ { name: "Salon Noir", hex: "#0d0d10" },
+ { name: "Champagne Metal", hex: "#c9a961" }
+ ],
+ type: {
+ display: ["Salon Heading", "Pavilion Script", "Gallery Title"],
+ body: [
+ "A composed serif headline pairs with a geometric sans body to frame architectural photography and finish details.",
+ "Use generous tracking and restrained lines to echo the quiet rhythm of traditional millwork.",
+ "Suited for invitations, presentation decks, and curated sample edits."
+ ],
+ meta: "Display: Playfair · Body: Geometric Sans"
+ },
+ texture: [
+ "Brushed silk, low-sheen metallic",
+ "Pressed linen with tailored emboss",
+ "Layered plaster with hand-drawn linework"
+ ],
+ heroStyle: function(el) {
+ el.style.background =
+ "radial-gradient(circle at top left, rgba(201,169,97,0.40), transparent 55%)," +
+ "radial-gradient(circle at bottom right, rgba(9,7,2,0.9), #050508 60%)";
+ }
+ },
+ Coastal: {
+ title: "Coastal Atelier",
+ caption: "Sun-washed neutrals, oyster whites, and glints of brushed brass evoke ocean light across softly textured walls.",
+ styleLabel: "Coastal",
+ hero: {
+ name: ["Tidal Weave", "Dune Grass", "Oyster Shell"],
+ subline: [
+ "Sun-Washed Linear Texture",
+ "Soft Vertical Reed Pattern",
+ "Pearlized Sandstone Mosaic"
+ ],
+ codePrefix: "DW–CS"
+ },
+ paletteName: "Coastal Ivory",
+ colors: [
+ { name: "Oyster White", hex: "#f6f3eb" },
+ { name: "Sea Mist", hex: "#d3e0dc" },
+ { name: "Brushed Brass", hex: "#c9a961" }
+ ],
+ type: {
+ display: ["Atelier Heading", "Shoreline Title", "Gallery Label"],
+ body: [
+ "Airy tracking, soft contrast, and a light serif weight echo coastal light and open horizons.",
+ "Pair with restrained imagery and generous breathing room to keep the palette buoyant.",
+ "Ideal for spa retreats, coastal residences, and boutique hospitality concepting."
+ ],
+ meta: "Display: Playfair · Body: Geometric Sans"
+ },
+ texture: [
+ "Hand-brushed limewash, salt-worn",
+ "Slubbed linen with pearlized thread",
+ "Crosshatched grasscloth, matte + sheen"
+ ],
+ heroStyle: function(el) {
+ el.style.background =
+ "radial-gradient(circle at top left, rgba(214,225,219,0.55), transparent 60%)," +
+ "radial-gradient(circle at bottom right, rgba(108,129,127,0.70), #050607 60%)";
+ }
+ },
+ Moody: {
+ title: "Midnight Study",
+ caption: "Inky grounds, deep contrast, and precise metallic linework for immersive, gallery-like interiors.",
+ styleLabel: "Moody",
+ hero: {
+ name: ["Obsidian Lattice", "Night Ledger", "Shadow Grid"],
+ subline: [
+ "Graphite Metallic Framework",
+ "Ink-Washed Architectural Stripe",
+ "Smoke-Toned Linear Mosaic"
+ ],
+ codePrefix: "DW–MD"
+ },
+ paletteName: "Midnight Noir",
+ colors: [
+ { name: "Inkwell", hex: "#050508" },
+ { name: "Gallery Grey", hex: "#2a2b33" },
+ { name: "Burnished Gold", hex: "#c9a961" }
+ ],
+ type: {
+ display: ["Study Header", "Gallery Wall", "Collector's Note"],
+ body: [
+ "Sharp, high-contrast serif headings with tight spacing underscore the intensity of a midnight palette.",
+ "Use with large-scale photographic vignettes and minimal copy for drama.",
+ "Best in dining rooms, listening lounges, and private galleries."
+ ],
+ meta: "Display: Playfair · Body: Geometric Sans"
+ },
+ texture: [
+ "Velvet flock over satin ground",
+ "Oxidized foil with controlled patina",
+ "Shadowed plaster with scored linework"
+ ],
+ heroStyle: function(el) {
+ el.style.background =
+ "radial-gradient(circle at top left, rgba(71,68,60,0.45), transparent 55%)," +
+ "radial-gradient(circle at bottom right, rgba(0,0,0,0.95), #020203 60%)";
+ }
+ },
+ Botanical: {
+ title: "Winter Conservatory",
+ caption: "Shadowed botanicals, inked foliage, and antique brass details bring garden rooms to life year-round.",
+ styleLabel: "Botanical",
+ hero: {
+ name: ["Conservatory Vine", "Orangerie Leaf", "Herbarium Etching"],
+ subline: [
+ "Etched Botanical Silhouette",
+ "Layered Canopy Damask",
+ "Fine-Line Herbarium Panel"
+ ],
+ codePrefix: "DW–BT"
+ },
+ paletteName: "Botanical Noir",
+ colors: [
+ { name: "Fig Leaf", hex: "#28372b" },
+ { name: "Conservatory Black", hex: "#050706" },
+ { name: "Antique Brass", hex: "#c9a961" }
+ ],
+ type: {
+ display: ["Conservatory Title", "Garden Study", "Floral Header"],
+ body: [
+ "Organic serif curves and measured line length complement intricate botanical surfaces.",
+ "Reserve metallics for linework and monograms to keep the palette grounded.",
+ "Refined for sunrooms, garden dining, and glasshouse suites."
+ ],
+ meta: "Display: Playfair · Body: Geometric Sans"
+ },
+ texture: [
+ "Hand-inked leaves on matte ground",
+ "Embossed foliage with dry-brush metallic",
+ "Shadowed botanicals over textured plaster"
+ ],
+ heroStyle: function(el) {
+ el.style.background =
+ "radial-gradient(circle at top left, rgba(53,82,63,0.6), transparent 55%)," +
+ "radial-gradient(circle at bottom right, rgba(4,7,5,0.9), #020403 60%)";
+ }
+ }
+ };
+
+ const board = document.getElementById("board");
+ const boardGrid = document.getElementById("board-grid");
+ const themeSelect = document.getElementById("theme-select");
+ const topThemeLabel = document.getElementById("top-theme-label");
+
+ const boardTitle = document.getElementById("board-title");
+ const boardCaption = document.getElementById("board-caption");
+ const boardStyleLabel = document.getElementById("board-style-label");
+
+ const heroPattern = document.getElementById("hero-pattern");
+ const heroText = document.getElementById("hero-text");
+ const heroName = document.getElementById("hero-name");
+ const heroSubline = document.getElementById("hero-subline");
+ const heroCode = document.getElementById("hero-code");
+
+ const paletteNameEl = document.getElementById("palette-name");
+ const colorChipRow = document.getElementById("color-chip-row");
+
+ const typeDisplay = document.getElementById("type-display");
+ const typeBody = document.getElementById("type-body");
+ const typeMeta = document.getElementById("type-meta");
+
+ const textureCaption = document.getElementById("texture-caption");
+ const regenBtn = document.getElementById("regen-btn");
+
+ function randItem(arr) {
+ return arr[Math.floor(Math.random() * arr.length)];
+ }
+
+ function randInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function setColorChips(colors) {
+ colorChipRow.innerHTML = "";
+ colors.forEach((c, i) => {
+ const row = document.createElement("div");
+ row.className = "color-chip";
+
+ const swatch = document.createElement("div");
+ swatch.className = "color-swatch";
+ swatch.style.background = c.hex;
+
+ if (i === 2) {
+ swatch.style.background =
+ "radial-gradient(circle at 20% 0, #fdf8e2, #c9a961 45%, #7d6a45 85%)";
+ }
+
+ const meta = document.createElement("div");
+ meta.className = "color-meta";
+
+ const name = document.createElement("div");
+ name.className = "color-name";
+ name.textContent = c.name;
+
+ const code = document.createElement("div");
+ code.className = "color-code";
+ code.textContent = c.hex.toUpperCase();
+
+ meta.appendChild(name);
+ meta.appendChild(code);
+
+ row.appendChild(swatch);
+ row.appendChild(meta);
+
+ colorChipRow.appendChild(row);
+ });
+ }
+
+ function applyHeroPatternVariation(themeKey) {
+ const t = themes[themeKey];
+ t.heroStyle(heroPattern);
+
+ const jitterX = randInt(-12, 12);
+ const jitterY = randInt(-8, 16);
+ const scale = 0.9 + Math.random() * 0.25;
+
+ heroPattern.style.transform =
+ "translate(" + jitterX + "px," + jitterY + "px) scale(" + scale.toFixed(2) + ")";
+ }
+
+ function reshuffleLayout() {
+ const layouts = [
+ '"hero colors" "type texture"',
+ '"hero type" "colors texture"',
+ '"hero texture" "colors type"'
+ ];
+ const layout = randItem(layouts);
+ boardGrid.style.gridTemplateAreas = layout;
+
+ const children = Array.from(boardGrid.children);
+ const map = {
+ 0: "hero",
+ 1: "colors",
+ 2: "type",
+ 3: "texture"
+ };
+ children.forEach((child, idx) => {
+ const area = map[idx];
+ child.style.gridArea = area;
+ });
+ }
+
+ function animateBoard() {
+ board.classList.remove("animate-in");
+ boardGrid.classList.remove("animate-in");
+ heroPattern.classList.remove("animate-in");
+ heroText.classList.remove("animate-in");
+ // Force reflow
+ void board.offsetWidth;
+ board.classList.add("animate-in");
+ boardGrid.classList.add("animate-in");
+ heroPattern.classList.add("animate-in");
+ heroText.classList.add("animate-in");
+ }
+
+ function updateTheme(themeKey) {
+ const t = themes[themeKey];
+
+ boardTitle.textContent = t.title;
+ boardCaption.textContent = t.caption;
+ boardStyleLabel.textContent = t.styleLabel;
+
+ topThemeLabel.textContent = t.styleLabel.toUpperCase() + " PALETTE";
+
+ const heroNameValue = randItem(t.hero.name);
+ const heroSublineValue = randItem(t.hero.subline);
+ const codeNum = randInt(1, 9).toString().padStart(2, "0");
+ const variantLetter = String.fromCharCode(65 + randInt(0, 2)); // A–C
+ heroName.textContent = heroNameValue;
+ heroSubline.textContent = heroSublineValue;
+ heroCode.textContent = t.hero.codePrefix + codeNum + variantLetter;
+
+ paletteNameEl.textContent = t.paletteName;
+ setColorChips(t.colors);
+
+ const typeDisplayValue = randItem(t.type.display);
+ const typeBodyValue = randItem(t.type.body);
+ typeDisplay.textContent = typeDisplayValue;
+ typeBody.textContent = typeBodyValue;
+ typeMeta.textContent = t.type.meta;
+
+ textureCaption.textContent = randItem(t.texture);
+
+ applyHeroPatternVariation(themeKey);
+ reshuffleLayout();
+ animateBoard();
+ }
+
+ regenBtn.addEventListener("click", function() {
+ const theme = themeSelect.value || "Classic";
+ updateTheme(theme);
+ });
+
+ themeSelect.addEventListener("change", function() {
+ updateTheme(this.value);
+ });
+
+ // Initialize
+ updateTheme("Classic");
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/776187e02cf0/gpt.png b/data/artifacts/776187e02cf0/gpt.png
new file mode 100644
index 0000000..f5922af
Binary files /dev/null and b/data/artifacts/776187e02cf0/gpt.png differ
diff --git a/data/artifacts/776187e02cf0/grok.html b/data/artifacts/776187e02cf0/grok.html
new file mode 100644
index 0000000..9af06e6
--- /dev/null
+++ b/data/artifacts/776187e02cf0/grok.html
@@ -0,0 +1,921 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Designer Wallcoverings — Mood Board</title>
+<style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-2: #1e1e24;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-dim: #7d6a45;
+ --hairline: rgba(245,242,234,0.12);
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', Futura, 'Helvetica Neue', sans-serif;
+ --ease: cubic-bezier(.22,1,.36,1);
+ --ease-ui: cubic-bezier(.22,.9,.24,1);
+ --shadow-1: 0 1px 2px rgba(0,0,0,.06);
+ --shadow-2: 0 2px 8px rgba(0,0,0,.08);
+ --shadow-3: 0 8px 24px rgba(0,0,0,.12);
+ --shadow-4: 0 16px 48px rgba(0,0,0,.18);
+ --shadow-5: 0 32px 80px rgba(0,0,0,.28);
+ }
+
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+ html, body {
+ height: 100%;
+ background: var(--bg);
+ color: var(--text);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ /* —— Top bar —— */
+ .topbar {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 40px;
+ background: rgba(13,13,15,0.92);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border-bottom: 1px solid var(--hairline);
+ }
+
+ .wordmark {
+ font-family: var(--serif);
+ font-size: 13px;
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ }
+
+ .topbar-actions {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ }
+
+ .theme-label {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .theme-label span {
+ color: var(--accent);
+ margin-left: 8px;
+ }
+
+ .btn {
+ appearance: none;
+ border: 1px solid var(--accent);
+ background: transparent;
+ color: var(--accent);
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ padding: 12px 28px;
+ cursor: pointer;
+ transition: background 0.45s var(--ease-ui), color 0.45s var(--ease-ui), box-shadow 0.45s var(--ease-ui);
+ }
+ .btn:hover {
+ background: var(--accent);
+ color: var(--bg);
+ box-shadow: 0 0 24px 2px rgba(201,169,97,0.35);
+ }
+ .btn:active { transform: scale(0.98); }
+
+ /* —— Stage —— */
+ .stage {
+ min-height: 100vh;
+ padding: 104px 40px 60px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 28px;
+ }
+
+ .stage-meta {
+ width: 1080px;
+ max-width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ }
+
+ .stage-meta h1 {
+ font-family: var(--serif);
+ font-size: 28px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.15;
+ color: var(--text);
+ }
+
+ .stage-meta p {
+ font-size: 12px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ /* —— Canvas 1080×1350 —— */
+ .canvas-wrap {
+ width: 1080px;
+ max-width: 100%;
+ aspect-ratio: 1080 / 1350;
+ position: relative;
+ box-shadow: var(--shadow-5);
+ }
+
+ .canvas {
+ width: 100%;
+ height: 100%;
+ background: var(--board-bg, #141416);
+ position: relative;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: 1.15fr 0.85fr;
+ grid-template-rows: 1.1fr 0.55fr 0.7fr;
+ gap: 0;
+ border: 1px solid var(--hairline);
+ }
+
+ .canvas.is-animating .cell {
+ animation: none;
+ }
+
+ .cell {
+ position: relative;
+ overflow: hidden;
+ opacity: 0;
+ animation: fadeUp 0.85s var(--ease) both;
+ }
+ .cell:nth-child(1) { animation-delay: 0.05s; }
+ .cell:nth-child(2) { animation-delay: 0.14s; }
+ .cell:nth-child(3) { animation-delay: 0.22s; }
+ .cell:nth-child(4) { animation-delay: 0.30s; }
+ .cell:nth-child(5) { animation-delay: 0.38s; }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ @keyframes scaleIn {
+ from { opacity: 0; transform: scale(0.92); }
+ to { opacity: 1; transform: none; }
+ }
+ @keyframes softReveal {
+ from { opacity: 0; filter: blur(10px); }
+ to { opacity: 1; filter: blur(0); }
+ }
+
+ /* Hero pattern — spans left column top two rows-ish */
+ .hero {
+ grid-column: 1;
+ grid-row: 1 / 3;
+ border-right: 1px solid var(--hairline);
+ border-bottom: 1px solid var(--hairline);
+ }
+
+ .hero-pattern {
+ position: absolute;
+ inset: 0;
+ transition: opacity 0.6s var(--ease);
+ }
+
+ .hero-overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ padding: 40px;
+ background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
+ pointer-events: none;
+ }
+
+ .hero-tag {
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 10px;
+ }
+
+ .hero-title {
+ font-family: var(--serif);
+ font-size: 38px;
+ font-weight: 400;
+ letter-spacing: -0.025em;
+ line-height: 1.1;
+ color: #f5f2ea;
+ max-width: 14ch;
+ }
+
+ /* Color chips */
+ .chips {
+ grid-column: 2;
+ grid-row: 1;
+ border-bottom: 1px solid var(--hairline);
+ padding: 36px 32px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: var(--board-surface, #1a1a1f);
+ }
+
+ .chips-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ }
+
+ .section-label {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .chips-row {
+ display: flex;
+ gap: 18px;
+ align-items: stretch;
+ }
+
+ .chip {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ }
+
+ .chip-swatch {
+ aspect-ratio: 1;
+ border: 1px solid var(--hairline);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-2);
+ transition: transform 0.5s var(--ease);
+ }
+ .chip:hover .chip-swatch { transform: scale(1.03); }
+
+ .chip-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ }
+
+ .chip-name {
+ font-family: var(--serif);
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ color: var(--text);
+ }
+
+ .chip-hex {
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ /* Type pairing */
+ .type-pair {
+ grid-column: 2;
+ grid-row: 2;
+ border-bottom: 1px solid var(--hairline);
+ padding: 32px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 18px;
+ background: var(--board-surface, #1a1a1f);
+ }
+
+ .type-sample-display {
+ font-family: var(--serif);
+ font-size: 42px;
+ font-weight: 400;
+ letter-spacing: -0.03em;
+ line-height: 1.05;
+ color: var(--text);
+ }
+
+ .type-sample-body {
+ font-family: var(--sans);
+ font-size: 14px;
+ line-height: 1.65;
+ color: var(--muted);
+ max-width: 36ch;
+ }
+
+ .type-meta {
+ display: flex;
+ gap: 24px;
+ padding-top: 4px;
+ border-top: 1px solid var(--hairline);
+ margin-top: 4px;
+ }
+
+ .type-meta span {
+ font-size: 10px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--accent-dim);
+ }
+
+ /* Texture tile — bottom full width-ish */
+ .texture {
+ grid-column: 1;
+ grid-row: 3;
+ border-right: 1px solid var(--hairline);
+ position: relative;
+ }
+
+ .texture-tile {
+ position: absolute;
+ inset: 0;
+ }
+
+ .texture-caption {
+ position: absolute;
+ left: 28px;
+ bottom: 24px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: rgba(245,242,234,0.75);
+ background: rgba(0,0,0,0.35);
+ padding: 8px 14px;
+ border: 1px solid rgba(245,242,234,0.1);
+ backdrop-filter: blur(8px);
+ }
+
+ /* Brand lockup cell */
+ .lockup {
+ grid-column: 2;
+ grid-row: 3;
+ padding: 32px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: var(--board-bg, #141416);
+ }
+
+ .lockup-mark {
+ width: 36px;
+ height: 36px;
+ border: 1px solid var(--accent);
+ display: grid;
+ place-items: center;
+ }
+ .lockup-mark svg { width: 18px; height: 18px; }
+
+ .lockup-text {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .lockup-brand {
+ font-family: var(--serif);
+ font-size: 13px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ }
+
+ .lockup-collection {
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ color: var(--muted);
+ }
+
+ .lockup-rule {
+ width: 48px;
+ height: 1px;
+ background: var(--accent);
+ margin: 4px 0;
+ }
+
+ /* Footer note */
+ .footnote {
+ width: 1080px;
+ max-width: 100%;
+ display: flex;
+ justify-content: space-between;
+ font-size: 11px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding-top: 4px;
+ }
+
+ .footnote em {
+ font-style: normal;
+ color: var(--accent-dim);
+ }
+
+ /* Pattern generators via CSS */
+ .pat-damask {
+ background-color: var(--p-a);
+ background-image:
+ radial-gradient(ellipse 40% 30% at 50% 0%, var(--p-b) 0%, transparent 70%),
+ radial-gradient(ellipse 40% 30% at 50% 100%, var(--p-b) 0%, transparent 70%),
+ radial-gradient(circle at 50% 50%, transparent 28%, var(--p-c) 28.5%, var(--p-c) 29.5%, transparent 30%),
+ radial-gradient(circle at 50% 20%, var(--p-b) 3%, transparent 3.5%),
+ radial-gradient(circle at 50% 80%, var(--p-b) 3%, transparent 3.5%),
+ radial-gradient(circle at 20% 50%, var(--p-b) 2.5%, transparent 3%),
+ radial-gradient(circle at 80% 50%, var(--p-b) 2.5%, transparent 3%);
+ background-size: 100% 100%, 100% 100%, 120px 160px, 120px 160px, 120px 160px, 120px 160px, 120px 160px;
+ }
+
+ .pat-wave {
+ background-color: var(--p-a);
+ background-image:
+ repeating-linear-gradient(
+ 0deg,
+ transparent,
+ transparent 18px,
+ var(--p-b) 18px,
+ var(--p-b) 19px
+ ),
+ repeating-linear-gradient(
+ 90deg,
+ transparent,
+ transparent 40px,
+ rgba(255,255,255,0.02) 40px,
+ rgba(255,255,255,0.02) 41px
+ );
+ position: relative;
+ }
+ .pat-wave::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 40% at 50% 30%, var(--p-c) 0%, transparent 60%),
+ radial-gradient(ellipse 60% 30% at 30% 70%, var(--p-b) 0%, transparent 50%);
+ opacity: 0.55;
+ }
+
+ .pat-botanical {
+ background-color: var(--p-a);
+ background-image:
+ radial-gradient(circle at 25% 30%, var(--p-b) 0 2px, transparent 2.5px),
+ radial-gradient(circle at 75% 60%, var(--p-b) 0 2px, transparent 2.5px),
+ radial-gradient(circle at 50% 80%, var(--p-c) 0 1.5px, transparent 2px),
+ radial-gradient(ellipse 12px 28px at 30% 40%, transparent 60%, var(--p-b) 61%, var(--p-b) 64%, transparent 65%),
+ radial-gradient(ellipse 10px 24px at 70% 55%, transparent 60%, var(--p-c) 61%, var(--p-c) 64%, transparent 65%),
+ radial-gradient(ellipse 14px 32px at 55% 25%, transparent 60%, var(--p-b) 61%, var(--p-b) 63%, transparent 64%),
+ radial-gradient(ellipse 8px 20px at 40% 70%, transparent 60%, var(--p-c) 61%, var(--p-c) 64%, transparent 65%);
+ background-size: 160px 200px;
+ }
+
+ .pat-moody {
+ background-color: var(--p-a);
+ background-image:
+ linear-gradient(135deg, var(--p-b) 0%, transparent 40%),
+ linear-gradient(315deg, var(--p-c) 0%, transparent 45%),
+ repeating-linear-gradient(
+ -18deg,
+ transparent,
+ transparent 47px,
+ rgba(255,255,255,0.025) 47px,
+ rgba(255,255,255,0.025) 48px
+ );
+ }
+
+ .pat-classic-geo {
+ background-color: var(--p-a);
+ background-image:
+ linear-gradient(var(--p-b) 1px, transparent 1px),
+ linear-gradient(90deg, var(--p-b) 1px, transparent 1px),
+ linear-gradient(var(--p-c) 1px, transparent 1px),
+ linear-gradient(90deg, var(--p-c) 1px, transparent 1px);
+ background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
+ background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
+ }
+
+ /* Texture patterns */
+ .tex-linen {
+ background-color: var(--t-a);
+ background-image:
+ repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px),
+ repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 3px);
+ }
+
+ .tex-silk {
+ background:
+ linear-gradient(120deg, var(--t-a) 0%, var(--t-b) 35%, var(--t-a) 50%, var(--t-c) 75%, var(--t-a) 100%);
+ background-size: 200% 200%;
+ }
+
+ .tex-grasscloth {
+ background-color: var(--t-a);
+ background-image:
+ repeating-linear-gradient(
+ 90deg,
+ var(--t-b) 0px,
+ var(--t-a) 1px,
+ var(--t-a) 3px,
+ var(--t-c) 4px,
+ var(--t-a) 6px,
+ var(--t-a) 8px
+ ),
+ repeating-linear-gradient(
+ 0deg,
+ transparent 0px,
+ transparent 12px,
+ rgba(0,0,0,0.04) 12px,
+ rgba(0,0,0,0.04) 13px
+ );
+ }
+
+ .tex-plaster {
+ background-color: var(--t-a);
+ background-image:
+ radial-gradient(ellipse 3px 2px at 20% 30%, var(--t-b) 0%, transparent 100%),
+ radial-gradient(ellipse 2px 3px at 70% 60%, var(--t-c) 0%, transparent 100%),
+ radial-gradient(ellipse 4px 2px at 40% 80%, var(--t-b) 0%, transparent 100%),
+ radial-gradient(ellipse 2px 2px at 85% 25%, var(--t-c) 0%, transparent 100%),
+ radial-gradient(ellipse 3px 3px at 55% 45%, rgba(255,255,255,0.04) 0%, transparent 100%);
+ background-size: 60px 60px, 80px 70px, 70px 90px, 50px 50px, 100px 100px;
+ }
+
+ @media (max-width: 1140px) {
+ .stage { padding: 96px 20px 40px; }
+ .canvas-wrap, .stage-meta, .footnote { width: 100%; }
+ .hero-title { font-size: 28px; }
+ .type-sample-display { font-size: 32px; }
+ .chips, .type-pair, .lockup { padding: 20px; }
+ }
+</style>
+</head>
+<body>
+ <header class="topbar">
+ <div class="wordmark">Designer Wallcoverings</div>
+ <div class="topbar-actions">
+ <div class="theme-label">Collection<span id="themeName">Classic</span></div>
+ <button class="btn" id="regen" type="button">Regenerate</button>
+ </div>
+ </header>
+
+ <main class="stage">
+ <div class="stage-meta">
+ <h1 id="boardTitle">Maison Élevé</h1>
+ <p id="boardSub">Curated mood · 1080 × 1350</p>
+ </div>
+
+ <div class="canvas-wrap">
+ <div class="canvas" id="canvas" aria-label="Mood board canvas">
+ <!-- Hero -->
+ <div class="cell hero">
+ <div class="hero-pattern" id="heroPat"></div>
+ <div class="hero-overlay">
+ <div class="hero-tag" id="heroTag">Wallcovering Study</div>
+ <div class="hero-title" id="heroTitle">Quiet Grandeur</div>
+ </div>
+ </div>
+
+ <!-- Color chips -->
+ <div class="cell chips">
+ <div class="chips-header">
+ <span class="section-label">Palette</span>
+ <span class="section-label" id="paletteRef">DW · 01</span>
+ </div>
+ <div class="chips-row" id="chipsRow">
+ <div class="chip">
+ <div class="chip-swatch" id="sw0"></div>
+ <div class="chip-meta">
+ <span class="chip-name" id="cn0">Ivory</span>
+ <span class="chip-hex" id="ch0">#F5F2EA</span>
+ </div>
+ </div>
+ <div class="chip">
+ <div class="chip-swatch" id="sw1"></div>
+ <div class="chip-meta">
+ <span class="chip-name" id="cn1">Gilt</span>
+ <span class="chip-hex" id="ch1">#C9A961</span>
+ </div>
+ </div>
+ <div class="chip">
+ <div class="chip-swatch" id="sw2"></div>
+ <div class="chip-meta">
+ <span class="chip-name" id="cn2">Noir</span>
+ <span class="chip-hex" id="ch2">#0D0D0F</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Type pairing -->
+ <div class="cell type-pair">
+ <span class="section-label">Type Pairing</span>
+ <div class="type-sample-display" id="typeDisplay">Atelier</div>
+ <div class="type-sample-body" id="typeBody">Refined interiors begin with surface — texture, tone, and proportion in quiet dialogue.</div>
+ <div class="type-meta">
+ <span id="typeSerif">Display Serif</span>
+ <span id="typeSans">Humanist Sans</span>
+ </div>
+ </div>
+
+ <!-- Texture -->
+ <div class="cell texture">
+ <div class="texture-tile" id="texTile"></div>
+ <div class="texture-caption" id="texCaption">Hand-loomed linen</div>
+ </div>
+
+ <!-- Lockup -->
+ <div class="cell lockup">
+ <div class="lockup-mark" aria-hidden="true">
+ <svg viewBox="0 0 24 24" fill="none" stroke="#c9a961" stroke-width="1">
+ <rect x="3" y="3" width="18" height="18"/>
+ <path d="M3 12h18M12 3v18"/>
+ </svg>
+ </div>
+ <div class="lockup-text">
+ <div class="lockup-rule"></div>
+ <div class="lockup-brand">Designer Wallcoverings</div>
+ <div class="lockup-collection" id="lockupCol">Classic Collection · 2025</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="footnote">
+ <span>Shareable board · On-brand only</span>
+ <span><em id="footTheme">Classic</em> · Regenerated client-side</span>
+ </div>
+ </main>
+
+<script>
+(function () {
+ const THEMES = {
+ Classic: {
+ boardBg: '#121214',
+ boardSurface: '#1a1a1f',
+ titles: ['Maison Élevé', 'Salon Doré', 'The Heritage Suite', 'Palladian Quiet', 'Gilded Archive'],
+ heroTitles: ['Quiet Grandeur', 'Empire Light', 'The Long Gallery', 'Ordre Noble', 'A Formal Calm'],
+ tags: ['Wallcovering Study', 'Heritage Print', 'Atelier Series', 'Panel No. IV'],
+ patterns: [
+ { cls: 'pat-damask', a: '#1c1814', b: 'rgba(201,169,97,0.22)', c: 'rgba(201,169,97,0.12)' },
+ { cls: 'pat-classic-geo', a: '#16141a', b: 'rgba(201,169,97,0.14)', c: 'rgba(245,242,234,0.04)' },
+ { cls: 'pat-damask', a: '#141210', b: 'rgba(184,150,90,0.28)', c: 'rgba(184,150,90,0.1)' }
+ ],
+ palettes: [
+ [
+ { name: 'Warm Ivory', hex: '#F0EBE0' },
+ { name: 'Antique Gold', hex: '#C9A961' },
+ { name: 'Near Black', hex: '#141416' }
+ ],
+ [
+ { name: 'Parchment', hex: '#E8E0D0' },
+ { name: 'Burnished Brass', hex: '#B8955A' },
+ { name: 'Espresso', hex: '#1A1410' }
+ ],
+ [
+ { name: 'Champagne', hex: '#EDE4D4' },
+ { name: 'Soft Gilt', hex: '#D4BC7D' },
+ { name: 'Ink', hex: '#0E0E12' }
+ ]
+ ],
+ types: [
+ { display: 'Atelier', body: 'Refined interiors begin with surface — texture, tone, and proportion in quiet dialogue.', serif: 'Didot Display', sans: 'Avenir Next' },
+ { display: 'Époque', body: 'A measured palette of ivory, gilt, and deep umber — architecture for the wall.', serif: 'Bodoni', sans: 'Futura' },
+ { display: 'Galerie', body: 'Heritage motifs redrawn for contemporary rooms: restraint over ornament.', serif: 'Playfair', sans: 'Helvetica Neue' }
+ ],
+ textures: [
+ { cls: 'tex-linen', a: '#2a2420', b: '#3a322c', c: '#1e1a16', caption: 'Belgian linen weave' },
+ { cls: 'tex-silk', a: '#2c2618', b: '#4a3f28', c: '#1a1610', caption: 'Raw silk panel' },
+ { cls: 'tex-plaster', a: '#242018', b: '#3a3428', c: '#1c1814', caption: 'Venetian plaster' }
+ ]
+ },
+ Coastal: {
+ boardBg: '#0f1416',
+ boardSurface: '#161c1f',
+ titles: ['Tide & Linen', 'Harbour Light', 'Salt Air Suite', 'Aegean Calm', 'The Shore House'],
+ heroTitles: ['Soft Horizon', 'Morning Tide', 'Driftwood Pale', 'Sea-Glass Quiet', 'Coastal Order'],
+ tags: ['Coastal Study', 'Marine Weave', 'Shore Collection', 'Panel No. II'],
+ patterns: [
+ { cls: 'pat-wave', a: '#0e181c', b: 'rgba(140,170,175,0.18)', c: 'rgba(200,180,140,0.12)' },
+ { cls: 'pat-wave', a: '#121c20', b: 'rgba(160,190,185,0.15)', c: 'rgba(220,200,160,0.1)' },
+ { cls: 'pat-classic-geo', a: '#10181a', b: 'rgba(150,175,180,0.12)', c: 'rgba(245,242,234,0.03)' }
+ ],
+ palettes: [
+ [
+ { name: 'Sea Salt', hex: '#E6EBE8' },
+ { name: 'Driftwood', hex: '#A89880' },
+ { name: 'Deep Harbour', hex: '#0E181C' }
+ ],
+ [
+ { name: 'Shell', hex: '#F2EDE4' },
+ { name: 'Weathered Teak', hex: '#8A7A62' },
+ { name: 'Midnight Tide', hex: '#0A1216' }
+ ],
+ [
+ { name: 'Fog', hex: '#D8E0DC' },
+ { name: 'Brushed Bronze', hex: '#B09A72' },
+ { name: 'Inkwell', hex: '#10161A' }
+ ]
+ ],
+ types: [
+ { display: 'Horizon', body: 'Washed pigments and open weave — rooms that breathe with salt light and quiet linen.', serif: 'Didot Display', sans: 'Avenir Next' },
+ { display: 'Mistral', body: 'Cool mineral grounds against warm timber notes; coastal without cliché.', serif: 'Bodoni', sans: 'Futura' },
+ { display: 'Marée', body: 'Tidal rhythm in pattern: long lines, soft contrast, lasting calm.', serif: 'Playfair', sans: 'Helvetica Neue' }
+ ],
+ textures: [
+ { cls: 'tex-linen', a: '#1a2428', b: '#2a383c', c: '#121c20', caption: 'Open-weave linen' },
+ { cls: 'tex-grasscloth', a: '#1c2824', b: '#2a3a34', c: '#243430', caption: 'Natural grasscloth' },
+ { cls: 'tex-silk', a: '#182428', b: '#2a3a40', c: '#10181c', caption: 'Washed silk' }
+ ]
+ },
+ Moody: {
+ boardBg: '#0c0c0e',
+ boardSurface: '#141418',
+ titles: ['Nocturne', 'Velvet Hour', 'The Dark Salon', 'Obsidian Room', 'After Midnight'],
+ heroTitles: ['Low Light', 'Shadow & Gilt', 'Inkwell Depth', 'Private Club', 'Sable Chamber'],
+ tags: ['Nocturne Series', 'Dark Matter', 'Evening Study', 'Panel No. VII'],
+ patterns: [
+ { cls: 'pat-moody', a: '#0e0c10', b: 'rgba(120,40,50,0.35)', c: 'rgba(201,169,97,0.12)' },
+ { cls: 'pat-moody', a: '#100e12', b: 'rgba(60,50,90,0.4)', c: 'rgba(180,140,80,0.1)' },
+ { cls: 'pat-damask', a: '#0c0a0e', b: 'rgba(201,169,97,0.16)', c: 'rgba(140,60,70,0.15)' }
+ ],
+ palettes: [
+ [
+ { name: 'Bone', hex: '#E8E2D6' },
+ { name: 'Aged Gold', hex: '#C9A961' },
+ { name: 'Sable', hex: '#0C0C0E' }
+ ],
+ [
+ { name: 'Smoke', hex: '#C8C2B8' },
+ { name: 'Garnet', hex: '#6B2C34' },
+ { name: 'Pitch', hex: '#0A0A0C' }
+ ],
+ [
+ { name: 'Pearl Ash', hex: '#D4CFC4' },
+ { name: 'Oxblood', hex: '#5C2430' },
+ { name: 'Void', hex: '#08080A' }
+ ]
+ ],
+ types: [
+ { display: 'Nocturne', body: 'Deep grounds, a single jewel note, and gold that catches only what it must.', serif: 'Didot Display', sans: 'Avenir Next' },
+ { display: 'Velours', body: 'Moody does not mean heavy — it means edited, intimate, and precise.', serif: 'Bodoni', sans: 'Futura' },
+ { display: 'Sable', body: 'Walls that hold conversation after dark; pattern as atmosphere.', serif: 'Playfair', sans: 'Helvetica Neue' }
+ ],
+ textures: [
+ { cls: 'tex-silk', a: '#1a1014', b: '#2c1820', c: '#0e0a0c', caption: 'Crushed velvet silk' },
+ { cls: 'tex-plaster', a: '#16141a', b: '#28242e', c: '#0e0c12', caption: 'Smoked plaster' },
+ { cls: 'tex-linen', a: '#1a1418', b: '#2a2026', c: '#100c10', caption: 'Charcoal linen' }
+ ]
+ },
+ Botanical: {
+ boardBg: '#0e100e',
+ boardSurface: '#161a16',
+ titles: ['Orangerie', 'Herbarium', 'The Green Room', 'Fernery', 'Conservatory'],
+ heroTitles: ['Living Archive', 'Leaf & Stone', 'Quiet Grove', 'Botanica', 'Under Canopy'],
+ tags: ['Botanical Study', 'Herbarium Print', 'Garden Series', 'Panel No. III'],
+ patterns: [
+ { cls: 'pat-botanical', a: '#121612', b: 'rgba(120,140,100,0.35)', c: 'rgba(180,160,100,0.2)' },
+ { cls: 'pat-botanical', a: '#101410', b: 'rgba(90,120,90,0.4)', c: 'rgba(201,169,97,0.18)' },
+ { cls: 'pat-damask', a: '#121610', b: 'rgba(140,150,90,0.2)', c: 'rgba(100,130,90,0.12)' }
+ ],
+ palettes: [
+ [
+ { name: 'Calico', hex: '#E8E4D8' },
+ { name: 'Olive Leaf', hex: '#6A7A54' },
+ { name: 'Forest Floor', hex: '#121612' }
+ ],
+ [
+ { name: 'Cream Clay', hex: '#E4DCCE' },
+ { name: 'Moss', hex: '#5C6B48' },
+ { name: 'Deep Grove', hex: '#0E120E' }
+ ],
+ [
+ { name: 'Parchment', hex: '#EDE6D6' },
+ { name: 'Bronze Leaf', hex: '#A89060' },
+ { name: 'Soil', hex: '#141210' }
+ ]
+ ],
+ types: [
+ { display: 'Herbarium', body: 'Pressed-leaf geometry and mineral greens — nature edited for the interior.', serif: 'Didot Display', sans: 'Avenir Next' },
+ { display: 'Orangerie', body: 'Botanical pattern with classical bones; garden light held indoors.', serif: 'Bodoni', sans: 'Futura' },
+ { display: 'Verdure', body: 'A quieter green story: tonal layers, soft gold, and living texture.', serif: 'Playfair', sans: 'Helvetica Neue' }
+ ],
+ textures: [
+ { cls: 'tex-grasscloth', a: '#1a2018', b: '#2a3426', c: '#222c20', caption: 'Hand-tied grasscloth' },
+ { cls: 'tex-linen', a: '#1c221a', b: '#2c3428', c: '#141810', caption: 'Undyed linen' },
+ { cls: 'tex-plaster', a: '#1a1e16', b: '#2a3024', c: '#121610', caption: 'Limewash plaster' }
+ ]
+ }
+ };
+
+ const THEME_KEYS = Object.keys(THEMES);
+ let themeIndex = 0;
+ let boardIndex = 0;
+
+ const $ = (id) => document.getElementById(id);
+
+ function pick(arr, i) {
+ return arr[i % arr.length];
+ }
+
+ function applyBoard(animate) {
+ const themeName = THEME_KEYS[themeIndex % THEME_KEYS.length];
+ const T = THEMES[themeName];
+ const i = boardIndex;
+
+ const title = pick(T.titles, i);
+ const heroTitle = pick(T.heroTitles, i);
+ const tag = pick(T.tags, i);
+ const pat = pick(T.patterns, i);
+ const palette = pick(T.palettes, i);
+ const type = pick(T.types, i);
+ const tex = pick(T.textures, i);
+
+ $('themeName').textContent = themeName;
+ $('footTheme').textContent = themeName;
+ $('boardTitle').textContent = title;
+ $('heroTitle').textContent = heroTitle;
+ $('heroTag').textContent = tag;
+ $('paletteRef').textContent = 'DW · 0' + ((i % 9) + 1);
+ $('lockupCol').textContent = themeName + ' Collection · 2025';
+
+ const canvas = $('canvas');
+ canvas.style.setProperty('--board-bg', T.boardBg);
+ canvas.style.setProperty('--board-surface', T.boardSurface);
+
+ // Hero pattern
+ const hero = $('heroPat');
+ hero.className = 'hero-pattern ' + pat.cls;
+ hero.style.setProperty('--p-a', pat.a);
+ hero.style.setProperty('--p-b', pat.b);
+ hero.style.setProperty('--p-c', pat.c);
+
+ // Chips
+ palette.forEach((c, idx) => {
+ $('sw' + idx).style.background = c.hex;
+ $('cn' + idx).textContent = c.name;
+ $('ch' + idx).textContent = c.hex;
+ });
+
+ // Type
+ $('typeDisplay').textContent = type.display;
+ $('typeBody').textContent = type.body;
+ $('typeSerif').textContent = type.serif;
+ $('typeSans').textContent = type.sans;
+
+ // Texture
+ const tile = $('texTile');
+ tile.className = 'texture-tile ' + tex.cls;
+ tile.style.setProperty('--t-a', tex.a);
+ tile.style.setProperty('--t-b', tex.b);
+ tile.style.setProperty('--t-c', tex.c);
+ $('texCaption').textContent = tex.caption;
+
+ if (animate) {
+ const cells = canvas.querySelectorAll('.cell');
+ cells.forEach((cell, idx) => {
+ cell.style.animation = 'none';
+ void cell.offsetWidth;
+ cell.style.animation = '';
+ cell.style.animationDelay = (0.05 + idx * 0.09) + 's';
+ });
+ }
+ }
+
+ $('regen').addEventListener('click', function () {
+ boardIndex += 1;
+ // Cycle theme every 3 boards for variety, but allow full reshuffle feel
+ if (boardIndex % 3 === 0) {
+ themeIndex = (themeIndex + 1) % THEME_KEYS.length;
+ }
+ // Also occasionally jump theme for more surprise
+ if (boardIndex % 5 === 0) {
+ themeIndex = (themeIndex + 1) % THEME_KEYS.length;
+ }
+ applyBoard(true);
+ });
+
+ // Initial
+ applyBoard(true);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/776187e02cf0/grok.png b/data/artifacts/776187e02cf0/grok.png
new file mode 100644
index 0000000..d1a45fe
Binary files /dev/null and b/data/artifacts/776187e02cf0/grok.png differ
diff --git a/data/artifacts/776187e02cf0/kimi.html b/data/artifacts/776187e02cf0/kimi.html
new file mode 100644
index 0000000..0241706
--- /dev/null
+++ b/data/artifacts/776187e02cf0/kimi.html
@@ -0,0 +1,658 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Designer Wallcoverings — Mood Board Generator</title>
+<style>
+:root{
+ --bg:#0d0d0f;
+ --surface:#17171c;
+ --text:#f5f2ea;
+ --muted:#8a8578;
+ --accent:#c9a961;
+ --hairline:rgba(245,242,234,0.12);
+ --shadow:rgba(0,0,0,0.4);
+ --font-display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
+ --font-body:'Avenir Next','Century Gothic',Futura,'Segoe UI',sans-serif;
+ --ease-hero:cubic-bezier(.22,1,.36,1);
+ --ease-ui:cubic-bezier(.22,.9,.24,1);
+}
+
+*{
+ margin:0;
+ padding:0;
+ box-sizing:border-box;
+}
+
+body{
+ background:var(--bg);
+ color:var(--text);
+ font-family:var(--font-body);
+ min-height:100vh;
+ display:flex;
+ flex-direction:column;
+ align-items:center;
+ padding-top:80px;
+ padding-bottom:60px;
+}
+
+/* Fixed Top Bar */
+.top-bar{
+ position:fixed;
+ top:0;
+ left:0;
+ right:0;
+ height:64px;
+ background:rgba(13,13,15,0.95);
+ backdrop-filter:blur(12px);
+ border-bottom:1px solid var(--hairline);
+ display:flex;
+ align-items:center;
+ padding:0 48px;
+ z-index:100;
+}
+
+.wordmark{
+ font-family:var(--font-display);
+ font-size:14px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--text);
+ font-weight:400;
+}
+
+/* Controls */
+.controls{
+ display:flex;
+ gap:16px;
+ margin-bottom:32px;
+ align-items:center;
+}
+
+.theme-btn{
+ font-family:var(--font-body);
+ font-size:11px;
+ letter-spacing:.12em;
+ text-transform:uppercase;
+ color:var(--muted);
+ background:transparent;
+ border:1px solid var(--hairline);
+ padding:10px 20px;
+ cursor:pointer;
+ transition:all .3s var(--ease-ui);
+}
+
+.theme-btn:hover,.theme-btn.active{
+ color:var(--text);
+ border-color:var(--accent);
+}
+
+.regenerate-btn{
+ font-family:var(--font-body);
+ font-size:11px;
+ letter-spacing:.12em;
+ text-transform:uppercase;
+ color:var(--bg);
+ background:var(--accent);
+ border:none;
+ padding:12px 28px;
+ cursor:pointer;
+ transition:transform .3s var(--ease-ui),box-shadow .3s var(--ease-ui);
+ box-shadow:0 4px 20px rgba(201,169,97,0.2);
+}
+
+.regenerate-btn:hover{
+ transform:translateY(-2px);
+ box-shadow:0 8px 30px rgba(201,169,97,0.3);
+}
+
+/* Canvas */
+.canvas-wrapper{
+ position:relative;
+ box-shadow:0 24px 80px var(--shadow);
+ border:1px solid var(--hairline);
+}
+
+.mood-board{
+ width:1080px;
+ height:1350px;
+ background:var(--surface);
+ position:relative;
+ overflow:hidden;
+ display:grid;
+ grid-template-columns:repeat(12,1fr);
+ grid-template-rows:repeat(15,1fr);
+ gap:0;
+}
+
+/* Animations */
+@keyframes fadeUp{
+ from{opacity:0;transform:translateY(28px)}
+ to{opacity:1;transform:none}
+}
+
+@keyframes scaleIn{
+ from{opacity:0;transform:scale(.92)}
+ to{opacity:1;transform:none}
+}
+
+.anim-fade-up{animation:fadeUp .7s var(--ease-hero) both}
+.anim-scale-in{animation:scaleIn .6s var(--ease-hero) both}
+
+/* Hero Pattern Area */
+.hero-pattern{
+ grid-column:1 / 8;
+ grid-row:1 / 9;
+ position:relative;
+ overflow:hidden;
+ border-right:1px solid var(--hairline);
+ border-bottom:1px solid var(--hairline);
+}
+
+.pattern-classic{
+ background:linear-gradient(135deg,#17171c 0%,#1f1f26 100%);
+}
+
+.pattern-classic::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background-image:
+ repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(201,169,97,0.03) 35px,rgba(201,169,97,0.03) 70px),
+ repeating-linear-gradient(-45deg,transparent,transparent 35px,rgba(201,169,97,0.03) 35px,rgba(201,169,97,0.03) 70px);
+ background-size:100px 100px;
+}
+
+.pattern-classic::after{
+ content:'';
+ position:absolute;
+ inset:60px;
+ border:1px solid rgba(201,169,97,0.15);
+ background:radial-gradient(circle at 30% 30%,rgba(201,169,97,0.08) 0%,transparent 50%);
+}
+
+.pattern-coastal{
+ background:linear-gradient(180deg,#1a1d22 0%,#17171c 100%);
+}
+
+.pattern-coastal::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(138,133,120,0.06) 40px,rgba(138,133,120,0.06) 41px);
+}
+
+.pattern-coastal::after{
+ content:'';
+ position:absolute;
+ inset:0;
+ background:repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(201,169,97,0.04) 80px,rgba(201,169,97,0.04) 81px);
+}
+
+.pattern-moody{
+ background:linear-gradient(160deg,#0d0d0f 0%,#1a1a20 50%,#17171c 100%);
+}
+
+.pattern-moody::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background:
+ radial-gradient(ellipse at 20% 80%,rgba(201,169,97,0.1) 0%,transparent 40%),
+ radial-gradient(ellipse at 80% 20%,rgba(138,133,120,0.08) 0%,transparent 40%);
+}
+
+.pattern-moody::after{
+ content:'';
+ position:absolute;
+ inset:40px;
+ border:1px solid rgba(245,242,234,0.06);
+}
+
+.pattern-botanical{
+ background:linear-gradient(135deg,#17171c 0%,#1c1c22 100%);
+}
+
+.pattern-botanical::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q35 20 30 35 Q25 20 30 5' fill='none' stroke='rgba(201,169,97,0.08)' stroke-width='0.5'/%3E%3Cpath d='M30 35 Q40 45 30 55 Q20 45 30 35' fill='none' stroke='rgba(138,133,120,0.06)' stroke-width='0.5'/%3E%3C/svg%3E");
+ background-size:60px 60px;
+}
+
+/* Color Chips */
+.color-chips{
+ grid-column:8 / 13;
+ grid-row:1 / 6;
+ display:flex;
+ flex-direction:column;
+ border-bottom:1px solid var(--hairline);
+ padding:48px;
+ gap:24px;
+}
+
+.chip-label{
+ font-size:11px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--muted);
+ margin-bottom:8px;
+}
+
+.color-chip{
+ display:flex;
+ align-items:center;
+ gap:20px;
+}
+
+.chip-swatch{
+ width:72px;
+ height:72px;
+ border:1px solid var(--hairline);
+ box-shadow:0 4px 20px rgba(0,0,0,0.3);
+ transition:transform .4s var(--ease-ui);
+}
+
+.color-chip:hover .chip-swatch{
+ transform:scale(1.05);
+}
+
+.chip-info{
+ display:flex;
+ flex-direction:column;
+ gap:4px;
+}
+
+.chip-name{
+ font-family:var(--font-display);
+ font-size:18px;
+ color:var(--text);
+ letter-spacing:0.02em;
+}
+
+.chip-hex{
+ font-size:12px;
+ color:var(--muted);
+ letter-spacing:0.1em;
+ text-transform:uppercase;
+}
+
+/* Type Sample */
+.type-sample{
+ grid-column:8 / 13;
+ grid-row:6 / 9;
+ border-bottom:1px solid var(--hairline);
+ padding:48px;
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+}
+
+.type-label{
+ font-size:11px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--muted);
+ margin-bottom:24px;
+}
+
+.type-pairing{
+ display:flex;
+ flex-direction:column;
+ gap:16px;
+}
+
+.type-display{
+ font-family:var(--font-display);
+ font-size:38px;
+ line-height:1.1;
+ color:var(--text);
+ letter-spacing:-0.02em;
+}
+
+.type-body{
+ font-family:var(--font-body);
+ font-size:16px;
+ line-height:1.6;
+ color:var(--muted);
+ max-width:280px;
+}
+
+/* Texture Tile */
+.texture-tile{
+ grid-column:1 / 5;
+ grid-row:9 / 13;
+ border-right:1px solid var(--hairline);
+ border-bottom:1px solid var(--hairline);
+ position:relative;
+ overflow:hidden;
+}
+
+.texture-classic{
+ background:linear-gradient(45deg,#1f1f26 25%,transparent 25%,transparent 75%,#1f1f26 75%,#1f1f26),
+ linear-gradient(45deg,#1f1f26 25%,transparent 25%,transparent 75%,#1f1f26 75%,#1f1f26);
+ background-size:20px 20px;
+ background-position:0 0,10px 10px;
+ background-color:#17171c;
+}
+
+.texture-classic::after{
+ content:'';
+ position:absolute;
+ inset:0;
+ background:linear-gradient(135deg,rgba(201,169,97,0.1) 0%,transparent 50%);
+}
+
+.texture-coastal{
+ background:#1a1d22;
+}
+
+.texture-coastal::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(245,242,234,0.03) 2px,rgba(245,242,234,0.03) 4px);
+}
+
+.texture-moody{
+ background:#141418;
+}
+
+.texture-moody::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background:radial-gradient(circle at 50% 50%,rgba(201,169,97,0.05) 0%,transparent 70%);
+}
+
+.texture-botanical{
+ background:#1c1c22;
+}
+
+.texture-botanical::before{
+ content:'';
+ position:absolute;
+ inset:0;
+ background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(138,133,120,0.15)'/%3E%3C/svg%3E");
+ background-size:40px 40px;
+}
+
+/* Info Panel */
+.info-panel{
+ grid-column:5 / 13;
+ grid-row:9 / 13;
+ border-bottom:1px solid var(--hairline);
+ padding:48px;
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+}
+
+.collection-label{
+ font-size:11px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--accent);
+ margin-bottom:16px;
+}
+
+.collection-title{
+ font-family:var(--font-display);
+ font-size:50px;
+ line-height:1.05;
+ color:var(--text);
+ margin-bottom:24px;
+ letter-spacing:-0.02em;
+}
+
+.collection-desc{
+ font-size:16px;
+ line-height:1.7;
+ color:var(--muted);
+ max-width:480px;
+}
+
+/* Footer strip */
+.board-footer{
+ grid-column:1 / 13;
+ grid-row:13 / 16;
+ padding:48px;
+ display:flex;
+ align-items:center;
+ justify-content:space-between;
+}
+
+.footer-mark{
+ font-family:var(--font-display);
+ font-size:24px;
+ letter-spacing:.12em;
+ text-transform:uppercase;
+ color:var(--text);
+}
+
+.footer-detail{
+ font-size:12px;
+ letter-spacing:.12em;
+ text-transform:uppercase;
+ color:var(--muted);
+}
+
+/* Stagger delays */
+[style*="--i:0"]{animation-delay:0ms}
+[style*="--i:1"]{animation-delay:90ms}
+[style*="--i:2"]{animation-delay:180ms}
+[style*="--i:3"]{animation-delay:270ms}
+[style*="--i:4"]{animation-delay:360ms}
+[style*="--i:5"]{animation-delay:450ms}
+[style*="--i:6"]{animation-delay:540ms}
+
+</style>
+</head>
+<body>
+
+<div class="top-bar">
+ <div class="wordmark">Designer Wallcoverings</div>
+</div>
+
+<div class="controls">
+ <button class="theme-btn active" onclick="setTheme('classic')">Classic</button>
+ <button class="theme-btn" onclick="setTheme('coastal')">Coastal</button>
+ <button class="theme-btn" onclick="setTheme('moody')">Moody</button>
+ <button class="theme-btn" onclick="setTheme('botanical')">Botanical</button>
+ <button class="regenerate-btn" onclick="regenerate()">Regenerate</button>
+</div>
+
+<div class="canvas-wrapper">
+ <div class="mood-board" id="board">
+
+ <!-- Hero Pattern -->
+ <div class="hero-pattern pattern-classic anim-scale-in" id="hero" style="--i:0">
+ </div>
+
+ <!-- Color Chips -->
+ <div class="color-chips anim-fade-up" id="chips" style="--i:1">
+ <div class="chip-label">Palette</div>
+ <div class="color-chip">
+ <div class="chip-swatch" style="background:#c9a961"></div>
+ <div class="chip-info">
+ <div class="chip-name">Gilded Ivory</div>
+ <div class="chip-hex">#C9A961</div>
+ </div>
+ </div>
+ <div class="color-chip">
+ <div class="chip-swatch" style="background:#f5f2ea"></div>
+ <div class="chip-info">
+ <div class="chip-name">Plaster White</div>
+ <div class="chip-hex">#F5F2EA</div>
+ </div>
+ </div>
+ <div class="color-chip">
+ <div class="chip-swatch" style="background:#1f1f26"></div>
+ <div class="chip-info">
+ <div class="chip-name">Deep Umber</div>
+ <div class="chip-hex">#1F1F26</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Type Sample -->
+ <div class="type-sample anim-fade-up" id="typeSample" style="--i:2">
+ <div class="type-label">Typography</div>
+ <div class="type-pairing">
+ <div class="type-display">Elegant<br>Interiors</div>
+ <div class="type-body">Refined spaces begin with exceptional surfaces. Our wallcoverings bring timeless sophistication to every room.</div>
+ </div>
+ </div>
+
+ <!-- Texture Tile -->
+ <div class="texture-tile texture-classic anim-scale-in" id="texture" style="--i:3">
+ </div>
+
+ <!-- Info Panel -->
+ <div class="info-panel anim-fade-up" id="infoPanel" style="--i:4">
+ <div class="collection-label">The Collection</div>
+ <div class="collection-title" id="collectionTitle">Heritage</div>
+ <div class="collection-desc" id="collectionDesc">Drawing from centuries of decorative arts, this collection honors traditional craftsmanship while embracing contemporary refinement. Each pattern tells a story of enduring elegance.</div>
+ </div>
+
+ <!-- Footer -->
+ <div class="board-footer anim-fade-up" style="--i:5">
+ <div class="footer-mark">DW</div>
+ <div class="footer-detail">Est. 1987 · Handcrafted in England</div>
+ </div>
+
+ </div>
+</div>
+
+<script>
+const themes={
+ classic:{
+ heroClass:'pattern-classic',
+ textureClass:'texture-classic',
+ title:'Heritage',
+ desc:'Drawing from centuries of decorative arts, this collection honors traditional craftsmanship while embracing contemporary refinement. Each pattern tells a story of enduring elegance.',
+ colors:[
+ {name:'Gilded Ivory',hex:'#C9A961',bg:'#c9a961'},
+ {name:'Plaster White',hex:'#F5F2EA',bg:'#f5f2ea'},
+ {name:'Deep Umber',hex:'#1F1F26',bg:'#1f1f26'}
+ ],
+ typeDisplay:'Elegant<br>Interiors',
+ typeBody:'Refined spaces begin with exceptional surfaces. Our wallcoverings bring timeless sophistication to every room.'
+ },
+ coastal:{
+ heroClass:'pattern-coastal',
+ textureClass:'texture-coastal',
+ title:'Seaside',
+ desc:'Evoking the serenity of coastal living, this palette captures the interplay of light on water and the quiet luxury of beachside estates. Soft horizons meet refined textures.',
+ colors:[
+ {name:'Driftwood',hex:'#B8B0A0',bg:'#b8b0a0'},
+ {name:'Sea Mist',hex:'#D4D9E0',bg:'#d4d9e0'},
+ {name:'Tidal Pool',hex:'#2A3A4A',bg:'#2a3a4a'}
+ ],
+ typeDisplay:'Coastal<br>Grace',
+ typeBody:'Where land meets sea, tranquility finds form. Soft textures and luminous tones create spaces of calm repose.'
+ },
+ moody:{
+ heroClass:'pattern-moody',
+ textureClass:'texture-moody',
+ title:'Nocturne',
+ desc:'Dramatic shadows and lustrous highlights define this collection for bold interiors. Deep, saturated tones create intimate atmospheres of sophisticated allure.',
+ colors:[
+ {name:'Burnished Gold',hex:'#C9A961',bg:'#c9a961'},
+ {name:'Midnight',hex:'#0D0D0F',bg:'#0d0d0f'},
+ {name:'Smoked Plum',hex:'#3D313A',bg:'#3d313a'}
+ ],
+ typeDisplay:'Dramatic<br>Spaces',
+ typeBody:'Embrace the power of darkness. Rich, saturated hues and metallic accents transform walls into statements.'
+ },
+ botanical:{
+ heroClass:'pattern-botanical',
+ textureClass:'texture-botanical',
+ title:'Verdant',
+ desc:'Organic forms and natural rhythms inspire this celebration of the living world. Subtle references to flora create connection to the outdoors within refined interiors.',
+ colors:[
+ {name:'Sage Leaf',hex:'#7D8471',bg:'#7d8471'},
+ {name:'Raw Linen',hex:'#E8E3D9',bg:'#e8e3d9'},
+ {name:'Moss Green',hex:'#4A4A3A',bg:'#4a4a3a'}
+ ],
+ typeDisplay:'Natural<br>Beauty',
+ typeBody:'Bring the outside in. Organic patterns and earthy tones create harmonious spaces that breathe with life.'
+ }
+};
+
+let currentTheme='classic';
+
+function setTheme(theme){
+ currentTheme=theme;
+ document.querySelectorAll('.theme-btn').forEach(btn=>{
+ btn.classList.remove('active');
+ if(btn.textContent.toLowerCase()===theme) btn.classList.add('active');
+ });
+ regenerate();
+}
+
+function regenerate(){
+ const board=document.getElementById('board');
+ const t=themes[currentTheme];
+
+ // Remove animation classes
+ const animElements=board.querySelectorAll('.anim-fade-up, .anim-scale-in');
+ animElements.forEach(el=>{
+ el.classList.remove('anim-fade-up','anim-scale-in');
+ void el.offsetWidth; // Trigger reflow
+ });
+
+ // Update hero pattern
+ const hero=document.getElementById('hero');
+ hero.className='hero-pattern '+t.heroClass+' anim-scale-in';
+
+ // Update texture
+ const texture=document.getElementById('texture');
+ texture.className='texture-tile '+t.textureClass+' anim-scale-in';
+
+ // Update color chips
+ const chipsContainer=document.getElementById('chips');
+ chipsContainer.innerHTML='<div class="chip-label anim-fade-up" style="--i:1">Palette</div>';
+ t.colors.forEach((c,i)=>{
+ chipsContainer.innerHTML+=`
+ <div class="color-chip anim-fade-up" style="--i:${i+2}">
+ <div class="chip-swatch" style="background:${c.bg}"></div>
+ <div class="chip-info">
+ <div class="chip-name">${c.name}</div>
+ <div class="chip-hex">${c.hex}</div>
+ </div>
+ </div>
+ `;
+ });
+
+ // Update type sample
+ const typeSample=document.getElementById('typeSample');
+ typeSample.innerHTML=`
+ <div class="type-label anim-fade-up" style="--i:2">Typography</div>
+ <div class="type-pairing">
+ <div class="type-display anim-fade-up" style="--i:3">${t.typeDisplay}</div>
+ <div class="type-body anim-fade-up" style="--i:4">${t.typeBody}</div>
+ </div>
+ `;
+
+ // Update info panel
+ const infoPanel=document.getElementById('infoPanel');
+ infoPanel.innerHTML=`
+ <div class="collection-label anim-fade-up" style="--i:4">The Collection</div>
+ <div class="collection-title anim-fade-up" style="--i:5">${t.title}</div>
+ <div class="collection-desc anim-fade-up" style="--i:6">${t.desc}</div>
+ `;
+
+ // Update footer
+ const footer=board.querySelector('.board-footer');
+ footer.style.animation='none';
+ void footer.offsetWidth;
+ footer.classList.add('anim-fade-up');
+ footer.style.setProperty('--i','5');
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/776187e02cf0/kimi.png b/data/artifacts/776187e02cf0/kimi.png
new file mode 100644
index 0000000..e957bf4
Binary files /dev/null and b/data/artifacts/776187e02cf0/kimi.png differ
diff --git a/data/artifacts/776187e02cf0/qwen25-7b.html b/data/artifacts/776187e02cf0/qwen25-7b.html
new file mode 100644
index 0000000..e693eba
--- /dev/null
+++ b/data/artifacts/776187e02cf0/qwen25-7b.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>DESIGNER WALLCOVERINGS Mood Board</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ background-color: #17171c;
+ color: #f5f2ea;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ .header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: #2f4c39;
+ padding: 24px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ }
+ .header h1 {
+ font-size: 24px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ margin: 0;
+ color: #f5f2ea;
+ }
+ .canvas {
+ width: 1080px;
+ height: 1350px;
+ background-color: #ffffff;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ display: grid;
+ gap: 24px;
+ padding: 96px;
+ }
+ .card {
+ border-radius: 14px;
+ background-color: #ffffff;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s cubic-bezier(.22,1,.36,1);
+ }
+ .card:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 16px 48px rgba(0,0,0,.18);
+ }
+ .card img {
+ width: 150px;
+ height: auto;
+ }
+ .card-text {
+ margin-left: 24px;
+ }
+ .card h3 {
+ font-size: 28px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ color: #f5f2ea;
+ }
+ .card p {
+ font-size: 16px;
+ line-height: 1.5;
+ margin: 0;
+ }
+ .regenerate {
+ background-color: #c9a961;
+ border: none;
+ color: #17171c;
+ padding: 24px;
+ font-size: 20px;
+ cursor: pointer;
+ transition: all 0.3s ease-in-out;
+ }
+ .regenerate:hover {
+ background-color: #b0472e;
+ }
+ </style>
+</head>
+<body>
+ <div class="header">
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </div>
+ <div class="canvas">
+ <button class="regenerate">Regenerate</button>
+ <div class="card" style="--accent-color:#c9a961;">
+ <img src="https://via.placeholder.com/150" alt="Hero Pattern">
+ <div class="card-text">
+ <h3>HERO PATTERN</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ <div class="card" style="--accent-color:#c9a961;">
+ <span>#E0A458 #F7EFE6</span>
+ <div class="card-text">
+ <h3>COLORED CHIPS</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ <div class="card" style="--accent-color:#c9a961;">
+ <img src="https://via.placeholder.com/150" alt="Type Pairing">
+ <div class="card-text">
+ <h3>TYPE PAIRING</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ <div class="card" style="--accent-color:#c9a961;">
+ <img src="https://via.placeholder.com/150" alt="Texture Tile">
+ <div class="card-text">
+ <h3>TEXTURE TILE</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ </div>
+
+ <script>
+ const regenerateButton = document.querySelector('.regenerate');
+ const canvas = document.querySelector('.canvas');
+
+ regenerateButton.addEventListener('click', () => {
+ const cards = Array.from(canvas.children).slice(1);
+ for (let card of cards) {
+ canvas.removeChild(card);
+ setTimeout(() => {
+ canvas.appendChild(card);
+ card.style.transform = 'translateY(-28px)';
+ }, 90 * cards.indexOf(card));
+ }
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/776187e02cf0/qwen25-7b.png b/data/artifacts/776187e02cf0/qwen25-7b.png
new file mode 100644
index 0000000..a44e1be
Binary files /dev/null and b/data/artifacts/776187e02cf0/qwen25-7b.png differ
diff --git a/data/artifacts/cd9c858a083c/claude-code.html b/data/artifacts/cd9c858a083c/claude-code.html
new file mode 100644
index 0000000..5f21dad
--- /dev/null
+++ b/data/artifacts/cd9c858a083c/claude-code.html
@@ -0,0 +1,424 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Color of the Season — Designer Wallcoverings</title>
+<style>
+ :root{
+ --bg:#0d0d0f;
+ --surface:#17171c;
+ --text:#f5f2ea;
+ --muted:#8a8578;
+ --gold:#c9a961;
+ --gold-deep:#7d6a45;
+ --celadon:#a8c3a5;
+ --celadon-soft:#c4d6c1;
+ --hair:rgba(201,169,97,.28);
+ --display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
+ --body:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+ *{margin:0;padding:0;box-sizing:border-box;}
+ html,body{height:100%;background:#050506;}
+ body{
+ font-family:var(--body);
+ color:var(--text);
+ display:flex;align-items:center;justify-content:center;
+ min-height:100vh;
+ -webkit-font-smoothing:antialiased;
+ }
+
+ /* ---- 9:16 stage ---- */
+ .reel{
+ position:relative;
+ width:min(100vw,calc(100vh*9/16));
+ height:min(100vh,calc(100vw*16/9));
+ max-width:480px;
+ background:var(--bg);
+ overflow:hidden;
+ box-shadow:0 30px 90px rgba(0,0,0,.6);
+ isolation:isolate;
+ }
+
+ /* ambient drifting ground */
+ .ambient{
+ position:absolute;inset:-20%;
+ background:
+ radial-gradient(60% 45% at 30% 20%, rgba(201,169,97,.10), transparent 60%),
+ radial-gradient(55% 40% at 75% 80%, rgba(168,195,165,.10), transparent 60%);
+ animation:drift 18s ease-in-out infinite alternate;
+ z-index:0;
+ pointer-events:none;
+ }
+ @keyframes drift{
+ from{transform:translate3d(-2%,-1%,0) scale(1.02);}
+ to{transform:translate3d(3%,2%,0) scale(1.08);}
+ }
+ .grain{
+ position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
+ background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
+ background-size:3px 3px;
+ mix-blend-mode:screen;
+ }
+
+ /* ---- top bar wordmark ---- */
+ .topbar{
+ position:absolute;top:0;left:0;right:0;z-index:6;
+ display:flex;align-items:center;justify-content:space-between;
+ padding:22px 24px 16px;
+ background:linear-gradient(to bottom,rgba(13,13,15,.85),rgba(13,13,15,0));
+ }
+ .wordmark{
+ font-family:var(--display);
+ font-size:14px;
+ letter-spacing:.18em;
+ text-transform:uppercase;
+ color:var(--text);
+ font-weight:400;
+ line-height:1.1;
+ }
+ .wordmark b{color:var(--gold);font-weight:400;}
+ .est{
+ font-size:9px;letter-spacing:.22em;text-transform:uppercase;
+ color:var(--muted);
+ }
+
+ /* ---- progress bar (segments) ---- */
+ .progress{
+ position:absolute;top:64px;left:24px;right:24px;z-index:6;
+ display:flex;gap:6px;
+ }
+ .seg{
+ flex:1;height:2px;border-radius:2px;
+ background:rgba(245,242,234,.16);
+ overflow:hidden;
+ }
+ .seg > i{
+ display:block;height:100%;width:0%;
+ background:linear-gradient(90deg,var(--gold-deep),var(--gold));
+ box-shadow:0 0 10px rgba(201,169,97,.5);
+ }
+ .seg.done > i{width:100%;}
+ .seg.active > i{width:0%;}
+
+ /* ---- scenes ---- */
+ .scenes{position:absolute;inset:0;z-index:2;}
+ .scene{
+ position:absolute;inset:0;
+ display:flex;flex-direction:column;align-items:center;justify-content:center;
+ text-align:center;
+ padding:96px 40px 92px;
+ opacity:0;visibility:hidden;
+ transition:opacity .7s cubic-bezier(.22,1,.36,1);
+ }
+ .scene.on{opacity:1;visibility:visible;}
+
+ .kicker{
+ font-family:var(--body);
+ font-size:12px;letter-spacing:.15em;text-transform:uppercase;
+ color:var(--muted);
+ margin-bottom:22px;
+ }
+
+ /* entrance util */
+ .rise{opacity:0;transform:translateY(28px);}
+ .scene.on .rise{
+ animation:fadeUp .7s cubic-bezier(.22,1,.36,1) forwards;
+ }
+ .scene.on .d1{animation-delay:.10s;}
+ .scene.on .d2{animation-delay:.20s;}
+ .scene.on .d3{animation-delay:.30s;}
+ .scene.on .d4{animation-delay:.40s;}
+ @keyframes fadeUp{to{opacity:1;transform:none;}}
+
+ /* Scene 1 — hook */
+ .hook{
+ font-family:var(--display);
+ font-size:44px;line-height:1.12;font-weight:400;
+ letter-spacing:.01em;
+ }
+ .hook .em{font-style:italic;color:var(--gold);}
+ .hook-sub{
+ margin-top:20px;font-size:16px;color:var(--muted);letter-spacing:.02em;
+ max-width:16em;
+ }
+
+ /* Scene 2 — hue name fills screen */
+ .huewrap{position:relative;display:flex;flex-direction:column;align-items:center;}
+ .hue-label{
+ font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
+ margin-bottom:18px;
+ }
+ .hue{
+ font-family:var(--display);
+ font-weight:400;
+ font-size:clamp(68px,20vw,104px);
+ line-height:.92;
+ letter-spacing:.005em;
+ background:linear-gradient(180deg,var(--celadon-soft),var(--celadon) 55%,#7f9b7c);
+ -webkit-background-clip:text;background-clip:text;
+ -webkit-text-fill-color:transparent;color:transparent;
+ text-shadow:0 0 40px rgba(168,195,165,.18);
+ }
+ .hue-hex{
+ margin-top:24px;font-size:12px;letter-spacing:.28em;color:var(--muted);
+ text-transform:uppercase;
+ }
+ .hue-hex b{color:var(--celadon);font-weight:400;}
+
+ /* Scene 3 — 3 swatches */
+ .swatch-title{
+ font-family:var(--display);font-size:30px;margin-bottom:6px;font-weight:400;
+ }
+ .swatch-sub{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:32px;}
+ .swatches{
+ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:340px;
+ }
+ .sw{
+ border-radius:14px;overflow:hidden;
+ border:1px solid var(--hair);
+ box-shadow:0 8px 24px rgba(0,0,0,.35);
+ background:var(--surface);
+ }
+ .sw .fill{height:132px;position:relative;}
+ .sw .cap{
+ padding:12px 8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
+ color:var(--muted);text-align:center;
+ }
+ /* pattern A — damask-ish radial */
+ .p-damask{
+ background:
+ radial-gradient(circle at 50% 22%, rgba(255,255,255,.22) 0 8%, transparent 9%),
+ radial-gradient(circle at 50% 78%, rgba(255,255,255,.16) 0 6%, transparent 7%),
+ radial-gradient(circle at 20% 50%, rgba(0,0,0,.10) 0 5%, transparent 6%),
+ radial-gradient(circle at 80% 50%, rgba(0,0,0,.10) 0 5%, transparent 6%),
+ linear-gradient(135deg,#b6cfb2,#93b18f);
+ background-size:40px 60px,40px 60px,40px 60px,40px 60px,cover;
+ }
+ /* pattern B — stripe */
+ .p-stripe{
+ background:
+ repeating-linear-gradient(90deg,#a8c3a5 0 14px,#8fae8b 14px 16px,#bcd3b8 16px 30px),
+ #a8c3a5;
+ }
+ /* pattern C — grid / trellis */
+ .p-trellis{
+ background:
+ repeating-linear-gradient(45deg,transparent 0 16px,rgba(255,255,255,.18) 16px 18px),
+ repeating-linear-gradient(-45deg,transparent 0 16px,rgba(0,0,0,.10) 16px 18px),
+ linear-gradient(180deg,#9fbd9b,#7f9c7b);
+ }
+
+ /* Scene 4 — styling tip */
+ .tip-num{
+ font-family:var(--display);font-style:italic;font-size:20px;color:var(--gold);
+ letter-spacing:.04em;margin-bottom:18px;
+ }
+ .tip{
+ font-family:var(--display);font-size:34px;line-height:1.24;font-weight:400;
+ max-width:12em;
+ }
+ .tip .u{
+ background:linear-gradient(transparent 68%,rgba(201,169,97,.32) 0);
+ }
+ .tip-foot{margin-top:26px;font-size:13px;color:var(--muted);letter-spacing:.02em;max-width:18em;}
+
+ /* Scene 5 — CTA */
+ .cta-mark{
+ width:46px;height:1px;background:var(--gold);margin:0 auto 26px;
+ }
+ .cta-h{
+ font-family:var(--display);font-size:40px;line-height:1.1;font-weight:400;
+ }
+ .cta-h .em{font-style:italic;color:var(--gold);}
+ .cta-sub{margin-top:18px;font-size:15px;color:var(--muted);max-width:17em;letter-spacing:.01em;}
+ .cta-btn{
+ margin-top:34px;
+ display:inline-flex;align-items:center;gap:10px;
+ padding:15px 30px;border-radius:999px;
+ border:1px solid var(--gold);
+ color:var(--gold);
+ font-size:12px;letter-spacing:.18em;text-transform:uppercase;
+ background:rgba(201,169,97,.05);
+ }
+ .cta-hand{
+ margin-top:30px;font-family:var(--display);font-size:13px;letter-spacing:.2em;
+ text-transform:uppercase;color:var(--muted);
+ }
+
+ /* ---- controls ---- */
+ .controls{
+ position:absolute;left:0;right:0;bottom:0;z-index:6;
+ display:flex;align-items:center;justify-content:center;gap:18px;
+ padding:18px 24px 24px;
+ background:linear-gradient(to top,rgba(13,13,15,.85),rgba(13,13,15,0));
+ }
+ .btn{
+ appearance:none;border:1px solid var(--hair);background:rgba(23,23,28,.6);
+ color:var(--text);width:44px;height:44px;border-radius:50%;
+ display:flex;align-items:center;justify-content:center;cursor:pointer;
+ transition:border-color .2s ease,transform .2s ease,background .2s ease;
+ }
+ .btn:hover{border-color:var(--gold);transform:translateY(-1px);}
+ .btn:active{transform:scale(.94);}
+ .btn svg{width:16px;height:16px;fill:var(--text);}
+ .btn.play svg{fill:var(--gold);}
+ .dots{display:flex;gap:7px;align-items:center;}
+ .dot{width:6px;height:6px;border-radius:50%;background:rgba(245,242,234,.22);transition:all .3s ease;}
+ .dot.active{background:var(--gold);width:18px;border-radius:3px;}
+</style>
+</head>
+<body>
+ <div class="reel" id="reel">
+ <div class="ambient"></div>
+ <div class="grain"></div>
+
+ <!-- top bar -->
+ <div class="topbar">
+ <div class="wordmark">Designer<br><b>Wallcoverings</b></div>
+ <div class="est">Est. Season Edit</div>
+ </div>
+
+ <!-- progress -->
+ <div class="progress" id="progress"></div>
+
+ <!-- scenes -->
+ <div class="scenes">
+ <!-- 1 hook -->
+ <section class="scene" data-dur="3600">
+ <div class="kicker rise d1">The Season Edit · No. 01</div>
+ <h1 class="hook rise d2">This season,<br>it's all <span class="em">about…</span></h1>
+ <p class="hook-sub rise d3">A single hue to redraw the mood of a room.</p>
+ </section>
+
+ <!-- 2 hue -->
+ <section class="scene" data-dur="3400">
+ <div class="huewrap">
+ <div class="hue-label rise d1">Color of the Season</div>
+ <div class="hue rise d2">Celadon</div>
+ <div class="hue-hex rise d3">Soft Green · <b>#A8C3A5</b></div>
+ </div>
+ </section>
+
+ <!-- 3 swatches -->
+ <section class="scene" data-dur="4000">
+ <h2 class="swatch-title rise d1">Three Ways in Celadon</h2>
+ <p class="swatch-sub rise d2">Pattern · Texture · Line</p>
+ <div class="swatches">
+ <div class="sw rise d2"><div class="fill p-damask"></div><div class="cap">Damask</div></div>
+ <div class="sw rise d3"><div class="fill p-stripe"></div><div class="cap">Regency Stripe</div></div>
+ <div class="sw rise d4"><div class="fill p-trellis"></div><div class="cap">Trellis</div></div>
+ </div>
+ </section>
+
+ <!-- 4 tip -->
+ <section class="scene" data-dur="4000">
+ <div class="tip-num rise d1">The Styling Note</div>
+ <p class="tip rise d2">Ground Celadon with <span class="u">warm brass</span> and unbleached linen —<br>let one wall carry it.</p>
+ <p class="tip-foot rise d3">Restful, never cold. Pair with ivory trim for quiet contrast.</p>
+ </section>
+
+ <!-- 5 cta -->
+ <section class="scene" data-dur="4200">
+ <div class="cta-mark rise d1"></div>
+ <h2 class="cta-h rise d2">Bring <span class="em">Celadon</span><br>home this season.</h2>
+ <p class="cta-sub rise d3">Order swatches from the Season Edit collection.</p>
+ <span class="cta-btn rise d3">Shop the Hue →</span>
+ <div class="cta-hand rise d4">Designer Wallcoverings</div>
+ </section>
+ </div>
+
+ <!-- controls -->
+ <div class="controls">
+ <button class="btn play" id="toggle" aria-label="Play or pause">
+ <svg id="icon" viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
+ </button>
+ <div class="dots" id="dots"></div>
+ </div>
+ </div>
+
+<script>
+(function(){
+ var reel = document.getElementById('reel');
+ var scenes = Array.prototype.slice.call(document.querySelectorAll('.scene'));
+ var progress = document.getElementById('progress');
+ var dots = document.getElementById('dots');
+ var toggle = document.getElementById('toggle');
+ var icon = document.getElementById('icon');
+ var N = scenes.length;
+ var idx = 0, playing = true;
+ var startTime = 0, elapsed = 0, raf = null, curDur = 0;
+
+ // build progress segments + dots
+ var segs = [];
+ for(var i=0;i<N;i++){
+ var s = document.createElement('div'); s.className='seg';
+ var fill = document.createElement('i'); s.appendChild(fill);
+ progress.appendChild(s); segs.push(s);
+ var d = document.createElement('div'); d.className='dot'; dots.appendChild(d);
+ }
+ var dotEls = Array.prototype.slice.call(dots.children);
+
+ function playIcon(){ icon.innerHTML='<path d="M8 5v14l11-7z"/>'; toggle.classList.remove('play'); }
+ function pauseIcon(){ icon.innerHTML='<rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/>'; toggle.classList.add('play'); }
+
+ function setScene(n){
+ idx = (n+N)%N;
+ scenes.forEach(function(s,i){ s.classList.toggle('on', i===idx); });
+ dotEls.forEach(function(d,i){ d.classList.toggle('active', i===idx); });
+ segs.forEach(function(s,i){
+ s.classList.remove('active','done');
+ var fill = s.firstChild;
+ if(i<idx){ s.classList.add('done'); fill.style.transition='none'; fill.style.width='100%'; }
+ else if(i===idx){ s.classList.add('active'); fill.style.transition='none'; fill.style.width='0%'; }
+ else { fill.style.transition='none'; fill.style.width='0%'; }
+ });
+ curDur = parseInt(scenes[idx].getAttribute('data-dur'),10)||3800;
+ elapsed = 0; startTime = now();
+ if(playing) loop();
+ }
+
+ function now(){ return (window.performance&&performance.now)?performance.now():Date.now(); }
+
+ function loop(){
+ cancelAnimationFrame(raf);
+ function step(){
+ if(!playing) return;
+ var t = now();
+ var e = elapsed + (t - startTime);
+ var p = Math.min(e/curDur,1);
+ segs[idx].firstChild.style.width = (p*100)+'%';
+ if(p>=1){ setScene(idx+1); return; }
+ raf = requestAnimationFrame(step);
+ }
+ startTime = now();
+ raf = requestAnimationFrame(step);
+ }
+
+ function play(){ if(playing) return; playing=true; pauseIcon(); startTime=now(); loop(); }
+ function pause(){ if(!playing) return; playing=false; cancelAnimationFrame(raf); elapsed += now()-startTime; playIcon(); }
+
+ toggle.addEventListener('click', function(){ playing?pause():play(); });
+
+ // tap left/right thirds to navigate (but not on controls)
+ reel.addEventListener('click', function(e){
+ if(e.target.closest('.controls')) return;
+ var r = reel.getBoundingClientRect();
+ var x = e.clientX - r.left;
+ if(x < r.width*0.34){ elapsed=0; setScene(idx-1); }
+ else if(x > r.width*0.66){ elapsed=0; setScene(idx+1); }
+ else { playing?pause():play(); }
+ });
+
+ document.addEventListener('keydown', function(e){
+ if(e.key===' '){ e.preventDefault(); playing?pause():play(); }
+ else if(e.key==='ArrowRight'){ elapsed=0; setScene(idx+1); }
+ else if(e.key==='ArrowLeft'){ elapsed=0; setScene(idx-1); }
+ });
+
+ pauseIcon();
+ setScene(0);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/cd9c858a083c/claude-code.png b/data/artifacts/cd9c858a083c/claude-code.png
new file mode 100644
index 0000000..5486cd6
Binary files /dev/null and b/data/artifacts/cd9c858a083c/claude-code.png differ
diff --git a/data/artifacts/cd9c858a083c/grok.html b/data/artifacts/cd9c858a083c/grok.html
new file mode 100644
index 0000000..b21b4ca
--- /dev/null
+++ b/data/artifacts/cd9c858a083c/grok.html
@@ -0,0 +1,631 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Color of the Season — Designer Wallcoverings</title>
+<style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent2: #7d6a45;
+ --celadon: #7ba89a;
+ --celadon-deep: #4a7366;
+ --celadon-light: #a8c9bc;
+ --celadon-mist: #c5ddd4;
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', Futura, 'Helvetica Neue', sans-serif;
+ --ease: cubic-bezier(.22,.9,.24,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --ease-scene: cubic-bezier(.77,0,.18,1);
+ --reel-w: 360px;
+ --reel-h: 640px;
+ }
+
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+ html, body {
+ height: 100%;
+ background: #080809;
+ color: var(--text);
+ font-family: var(--sans);
+ -webkit-font-smoothing: antialiased;
+ overflow: hidden;
+ }
+
+ body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ }
+
+ /* ── Top wordmark bar ── */
+ .brand-bar {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ padding: 0 28px;
+ background: rgba(13,13,15,0.92);
+ border-bottom: 1px solid rgba(201,169,97,0.18);
+ backdrop-filter: blur(12px);
+ }
+ .brand-bar span {
+ font-family: var(--serif);
+ font-size: 11px;
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ }
+
+ /* ── Reel frame ── */
+ .reel-shell {
+ position: relative;
+ width: var(--reel-w);
+ height: var(--reel-h);
+ max-height: calc(100vh - 80px);
+ margin-top: 24px;
+ background: var(--bg);
+ border: 1px solid rgba(201,169,97,0.22);
+ border-radius: 4px;
+ box-shadow:
+ 0 0 0 1px rgba(0,0,0,0.4),
+ 0 24px 64px rgba(0,0,0,0.55),
+ 0 2px 8px rgba(0,0,0,0.3);
+ overflow: hidden;
+ }
+
+ .reel {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ /* ── Scenes ── */
+ .scene {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 48px 32px 72px;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: opacity 0.7s var(--ease-scene), visibility 0.7s;
+ }
+ .scene.active {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ }
+
+ /* Hairline frame accent */
+ .scene::before {
+ content: '';
+ position: absolute;
+ inset: 16px;
+ border: 1px solid rgba(201,169,97,0.12);
+ pointer-events: none;
+ }
+
+ /* ── Typography ── */
+ .label {
+ font-family: var(--sans);
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 20px;
+ }
+
+ .hook-line {
+ font-family: var(--serif);
+ font-size: 28px;
+ font-weight: 400;
+ line-height: 1.25;
+ text-align: center;
+ color: var(--text);
+ max-width: 14ch;
+ }
+
+ .hue-name {
+ font-family: var(--serif);
+ font-size: 58px;
+ font-weight: 400;
+ letter-spacing: -0.03em;
+ line-height: 1.05;
+ text-align: center;
+ color: var(--celadon-light);
+ text-shadow: 0 0 60px rgba(123,168,154,0.25);
+ }
+
+ .hue-sub {
+ margin-top: 16px;
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+
+ .tip-text {
+ font-family: var(--serif);
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 1.35;
+ text-align: center;
+ color: var(--text);
+ max-width: 18ch;
+ }
+
+ .tip-detail {
+ margin-top: 18px;
+ font-size: 13px;
+ line-height: 1.65;
+ text-align: center;
+ color: var(--muted);
+ max-width: 28ch;
+ }
+
+ .cta-title {
+ font-family: var(--serif);
+ font-size: 32px;
+ font-weight: 400;
+ line-height: 1.2;
+ text-align: center;
+ color: var(--text);
+ max-width: 12ch;
+ }
+
+ .cta-btn {
+ margin-top: 28px;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 14px 28px;
+ border: 1px solid var(--accent);
+ background: transparent;
+ color: var(--accent);
+ font-family: var(--sans);
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background 0.4s var(--ease), color 0.4s var(--ease);
+ }
+ .cta-btn:hover {
+ background: var(--accent);
+ color: var(--bg);
+ }
+
+ /* ── Captions (animated) ── */
+ .cap {
+ opacity: 0;
+ transform: translateY(18px);
+ transition: opacity 0.8s var(--ease-hero), transform 0.8s var(--ease-hero);
+ }
+ .scene.active .cap { opacity: 1; transform: translateY(0); }
+ .scene.active .cap-d1 { transition-delay: 0.15s; }
+ .scene.active .cap-d2 { transition-delay: 0.35s; }
+ .scene.active .cap-d3 { transition-delay: 0.55s; }
+ .scene.active .cap-d4 { transition-delay: 0.75s; }
+
+ /* Hue scale-in */
+ .hue-name {
+ opacity: 0;
+ transform: scale(0.92);
+ transition: opacity 1s var(--ease-hero), transform 1s var(--ease-hero);
+ }
+ .scene.active .hue-name {
+ opacity: 1;
+ transform: scale(1);
+ transition-delay: 0.2s;
+ }
+
+ /* ── Pattern swatches ── */
+ .swatches {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ width: 100%;
+ max-width: 260px;
+ }
+ .swatch {
+ position: relative;
+ height: 88px;
+ border: 1px solid rgba(201,169,97,0.2);
+ overflow: hidden;
+ opacity: 0;
+ transform: translateY(24px);
+ transition: opacity 0.7s var(--ease-hero), transform 0.7s var(--ease-hero);
+ box-shadow: 0 4px 20px rgba(0,0,0,0.35);
+ }
+ .scene.active .swatch { opacity: 1; transform: translateY(0); }
+ .scene.active .swatch:nth-child(1) { transition-delay: 0.2s; }
+ .scene.active .swatch:nth-child(2) { transition-delay: 0.4s; }
+ .scene.active .swatch:nth-child(3) { transition-delay: 0.6s; }
+
+ .swatch-label {
+ position: absolute;
+ bottom: 8px; left: 10px;
+ font-size: 9px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: rgba(245,242,234,0.7);
+ z-index: 2;
+ text-shadow: 0 1px 4px rgba(0,0,0,0.5);
+ }
+
+ /* Pattern 1 — fine vertical stripe */
+ .pat-stripe {
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ var(--celadon-deep) 0px,
+ var(--celadon-deep) 3px,
+ var(--celadon) 3px,
+ var(--celadon) 8px
+ );
+ }
+
+ /* Pattern 2 — diamond lattice */
+ .pat-diamond {
+ background-color: var(--celadon-deep);
+ background-image:
+ linear-gradient(45deg, var(--celadon) 25%, transparent 25%),
+ linear-gradient(-45deg, var(--celadon) 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, var(--celadon) 75%),
+ linear-gradient(-45deg, transparent 75%, var(--celadon) 75%);
+ background-size: 18px 18px;
+ background-position: 0 0, 0 9px, 9px -9px, -9px 0;
+ }
+
+ /* Pattern 3 — soft damask dots */
+ .pat-damask {
+ background-color: var(--celadon);
+ background-image:
+ radial-gradient(circle at 30% 40%, var(--celadon-mist) 0 1.5px, transparent 2px),
+ radial-gradient(circle at 70% 60%, var(--celadon-light) 0 1px, transparent 1.5px),
+ radial-gradient(circle at 50% 20%, rgba(245,242,234,0.15) 0 2px, transparent 3px),
+ radial-gradient(ellipse 40% 30% at 50% 50%, var(--celadon-deep) 0%, transparent 70%);
+ background-size: 24px 24px, 16px 16px, 32px 32px, 100% 100%;
+ }
+
+ /* Decorative rule */
+ .rule {
+ width: 40px;
+ height: 1px;
+ background: var(--accent);
+ margin: 0 auto 20px;
+ opacity: 0;
+ transform: scaleX(0);
+ transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
+ }
+ .scene.active .rule {
+ opacity: 1;
+ transform: scaleX(1);
+ transition-delay: 0.1s;
+ }
+
+ /* Color chip on hue scene */
+ .color-chip {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background: var(--celadon);
+ border: 1px solid rgba(201,169,97,0.35);
+ box-shadow:
+ 0 0 0 4px rgba(123,168,154,0.12),
+ 0 8px 28px rgba(123,168,154,0.3);
+ margin-bottom: 28px;
+ opacity: 0;
+ transform: scale(0.6);
+ transition: opacity 0.7s var(--ease-hero), transform 0.7s var(--ease-hero);
+ }
+ .scene.active .color-chip {
+ opacity: 1;
+ transform: scale(1);
+ transition-delay: 0.05s;
+ }
+
+ /* ── Progress + controls ── */
+ .chrome {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ z-index: 20;
+ padding: 0 16px 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .progress-track {
+ display: flex;
+ gap: 4px;
+ height: 2px;
+ }
+ .progress-seg {
+ flex: 1;
+ background: rgba(245,242,234,0.12);
+ border-radius: 1px;
+ overflow: hidden;
+ position: relative;
+ }
+ .progress-seg .fill {
+ position: absolute;
+ inset: 0;
+ background: var(--accent);
+ transform-origin: left center;
+ transform: scaleX(0);
+ }
+ .progress-seg.done .fill {
+ transform: scaleX(1);
+ transition: none;
+ }
+ .progress-seg.active .fill {
+ animation: progFill linear forwards;
+ }
+ @keyframes progFill {
+ from { transform: scaleX(0); }
+ to { transform: scaleX(1); }
+ }
+
+ .controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .scene-count {
+ font-size: 10px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
+ .play-btn {
+ width: 32px;
+ height: 32px;
+ border: 1px solid rgba(201,169,97,0.35);
+ background: rgba(23,23,28,0.8);
+ color: var(--accent);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
+ }
+ .play-btn:hover {
+ border-color: var(--accent);
+ background: rgba(201,169,97,0.1);
+ }
+ .play-btn svg { display: block; }
+
+ /* Ambient gold dust */
+ .ambient {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ overflow: hidden;
+ z-index: 0;
+ }
+ .ambient span {
+ position: absolute;
+ width: 2px;
+ height: 2px;
+ border-radius: 50%;
+ background: var(--accent);
+ opacity: 0;
+ animation: drift 8s var(--ease) infinite;
+ }
+ @keyframes drift {
+ 0% { opacity: 0; transform: translateY(20px); }
+ 20% { opacity: 0.35; }
+ 80% { opacity: 0.15; }
+ 100% { opacity: 0; transform: translateY(-80px); }
+ }
+
+ /* Pause state freezes progress animation */
+ .reel.paused .progress-seg.active .fill {
+ animation-play-state: paused;
+ }
+</style>
+</head>
+<body>
+
+<div class="brand-bar">
+ <span>Designer Wallcoverings</span>
+</div>
+
+<div class="reel-shell">
+ <div class="reel" id="reel">
+
+ <div class="ambient" id="ambient" aria-hidden="true"></div>
+
+ <!-- Scene 0: Hook -->
+ <section class="scene active" data-scene="0">
+ <div class="rule"></div>
+ <p class="label cap cap-d1">Seasonal Edit</p>
+ <h1 class="hook-line cap cap-d2">This season it’s all about…</h1>
+ </section>
+
+ <!-- Scene 1: Hue reveal -->
+ <section class="scene" data-scene="1">
+ <div class="color-chip"></div>
+ <h1 class="hue-name">Celadon</h1>
+ <p class="hue-sub cap cap-d3">Pantone-adjacent · SS25</p>
+ </section>
+
+ <!-- Scene 2: Pattern swatches -->
+ <section class="scene" data-scene="2">
+ <p class="label cap cap-d1">In the collection</p>
+ <div class="swatches">
+ <div class="swatch pat-stripe">
+ <span class="swatch-label">Maison Stripe</span>
+ </div>
+ <div class="swatch pat-diamond">
+ <span class="swatch-label">Lattice No. 4</span>
+ </div>
+ <div class="swatch pat-damask">
+ <span class="swatch-label">Mist Damask</span>
+ </div>
+ </div>
+ </section>
+
+ <!-- Scene 3: Styling tip -->
+ <section class="scene" data-scene="3">
+ <div class="rule"></div>
+ <p class="label cap cap-d1">Styling Note</p>
+ <p class="tip-text cap cap-d2">Pair celadon with warm ivory and unlacquered brass.</p>
+ <p class="tip-detail cap cap-d3">Let the green breathe on a single feature wall; ground it with linen upholstery and a single sculptural sconce.</p>
+ </section>
+
+ <!-- Scene 4: CTA -->
+ <section class="scene" data-scene="4">
+ <div class="rule"></div>
+ <p class="label cap cap-d1">The Collection</p>
+ <h2 class="cta-title cap cap-d2">Bring celadon home</h2>
+ <button class="cta-btn cap cap-d3" type="button">
+ Request Samples
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.2"/></svg>
+ </button>
+ </section>
+
+ <!-- Chrome -->
+ <div class="chrome">
+ <div class="progress-track" id="progress"></div>
+ <div class="controls">
+ <span class="scene-count" id="count">01 — 05</span>
+ <button class="play-btn" id="playBtn" aria-label="Pause" type="button">
+ <svg id="iconPause" width="12" height="12" viewBox="0 0 12 12"><rect x="2" y="1" width="2.5" height="10" fill="currentColor"/><rect x="7.5" y="1" width="2.5" height="10" fill="currentColor"/></svg>
+ <svg id="iconPlay" width="12" height="12" viewBox="0 0 12 12" style="display:none"><path d="M3 1.5v9l8-4.5-8-4.5z" fill="currentColor"/></svg>
+ </button>
+ </div>
+ </div>
+
+ </div>
+</div>
+
+<script>
+(function () {
+ var DURATIONS = [3200, 3600, 4200, 4500, 4000];
+ var total = DURATIONS.length;
+ var current = 0;
+ var playing = true;
+ var timer = null;
+ var startTs = 0;
+ var remaining = 0;
+
+ var reel = document.getElementById('reel');
+ var scenes = reel.querySelectorAll('.scene');
+ var progress = document.getElementById('progress');
+ var countEl = document.getElementById('count');
+ var playBtn = document.getElementById('playBtn');
+ var iconPause = document.getElementById('iconPause');
+ var iconPlay = document.getElementById('iconPlay');
+
+ // Build progress segments
+ for (var i = 0; i < total; i++) {
+ var seg = document.createElement('div');
+ seg.className = 'progress-seg' + (i === 0 ? ' active' : '');
+ var fill = document.createElement('div');
+ fill.className = 'fill';
+ fill.style.animationDuration = DURATIONS[i] + 'ms';
+ seg.appendChild(fill);
+ progress.appendChild(seg);
+ }
+ var segs = progress.querySelectorAll('.progress-seg');
+
+ // Ambient particles
+ var amb = document.getElementById('ambient');
+ for (var p = 0; p < 12; p++) {
+ var s = document.createElement('span');
+ s.style.left = (8 + Math.random() * 84) + '%';
+ s.style.bottom = (Math.random() * 30) + '%';
+ s.style.animationDelay = (Math.random() * 6) + 's';
+ s.style.animationDuration = (6 + Math.random() * 5) + 's';
+ amb.appendChild(s);
+ }
+
+ function pad(n) { return (n < 10 ? '0' : '') + n; }
+
+ function goTo(idx) {
+ scenes[current].classList.remove('active');
+ segs[current].classList.remove('active');
+ if (idx > current || (current === total - 1 && idx === 0)) {
+ segs[current].classList.add('done');
+ }
+ // Reset all if looping
+ if (idx === 0 && current === total - 1) {
+ for (var j = 0; j < total; j++) {
+ segs[j].classList.remove('done', 'active');
+ var f = segs[j].querySelector('.fill');
+ f.style.animation = 'none';
+ void f.offsetWidth;
+ f.style.animation = '';
+ f.style.animationDuration = DURATIONS[j] + 'ms';
+ }
+ }
+ current = idx;
+ scenes[current].classList.add('active');
+ segs[current].classList.add('active');
+ var fill = segs[current].querySelector('.fill');
+ fill.style.animation = 'none';
+ void fill.offsetWidth;
+ fill.style.animation = '';
+ fill.style.animationDuration = DURATIONS[current] + 'ms';
+ countEl.textContent = pad(current + 1) + ' — ' + pad(total);
+ remaining = DURATIONS[current];
+ if (playing) schedule(remaining);
+ }
+
+ function schedule(ms) {
+ clearTimeout(timer);
+ startTs = Date.now();
+ remaining = ms;
+ timer = setTimeout(function () {
+ goTo((current + 1) % total);
+ }, ms);
+ }
+
+ function pause() {
+ playing = false;
+ reel.classList.add('paused');
+ clearTimeout(timer);
+ remaining -= (Date.now() - startTs);
+ iconPause.style.display = 'none';
+ iconPlay.style.display = 'block';
+ playBtn.setAttribute('aria-label', 'Play');
+ }
+
+ function resume() {
+ playing = true;
+ reel.classList.remove('paused');
+ iconPause.style.display = 'block';
+ iconPlay.style.display = 'none';
+ playBtn.setAttribute('aria-label', 'Pause');
+ schedule(Math.max(remaining, 200));
+ }
+
+ playBtn.addEventListener('click', function () {
+ if (playing) pause(); else resume();
+ });
+
+ // Kick off
+ countEl.textContent = '01 — ' + pad(total);
+ remaining = DURATIONS[0];
+ schedule(DURATIONS[0]);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/cd9c858a083c/grok.png b/data/artifacts/cd9c858a083c/grok.png
new file mode 100644
index 0000000..94c02c8
Binary files /dev/null and b/data/artifacts/cd9c858a083c/grok.png differ
diff --git a/data/artifacts/cd9c858a083c/kimi.html b/data/artifacts/cd9c858a083c/kimi.html
new file mode 100644
index 0000000..6b90a3c
--- /dev/null
+++ b/data/artifacts/cd9c858a083c/kimi.html
@@ -0,0 +1,703 @@
+<!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 of the Season</title>
+ <style>
+ :root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --text: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --celadon: #a8d5c7;
+ --celadon-deep: #7db9a8;
+
+ --display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+
+ --ease-out-quint: cubic-bezier(.22,1,.36,1);
+ --ease-power: cubic-bezier(.77,0,.18,1);
+ --duration: 0.8s;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+
+ @keyframes scaleIn {
+ from { opacity: 0; transform: scale(0.92); }
+ to { opacity: 1; transform: scale(1); }
+ }
+
+ @keyframes clipReveal {
+ from { clip-path: inset(0 100% 0 0); }
+ to { clip-path: inset(0); }
+ }
+
+ @keyframes blurIn {
+ from { opacity: 0; filter: blur(12px); }
+ to { opacity: 1; filter: blur(0); }
+ }
+
+ @keyframes progress {
+ from { width: 0%; }
+ to { width: 100%; }
+ }
+
+ @keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-8px); }
+ }
+
+ @keyframes shimmer {
+ 0% { background-position: -200% center; }
+ 100% { background-position: 200% center; }
+ }
+
+ body {
+ font-family: var(--body);
+ background: var(--bg);
+ color: var(--text);
+ overflow: hidden;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* Fixed Top Bar */
+ .top-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ padding: 24px 32px;
+ background: linear-gradient(to bottom, rgba(13,13,15,0.95) 0%, rgba(13,13,15,0) 100%);
+ }
+
+ .wordmark {
+ font-family: var(--display);
+ font-size: 13px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text);
+ font-weight: 400;
+ }
+
+ /* Reel Container - 9:16 */
+ .reel-container {
+ position: relative;
+ width: 100%;
+ max-width: 450px;
+ height: 100vh;
+ margin: 0 auto;
+ background: var(--bg);
+ overflow: hidden;
+ }
+
+ /* Scene Container */
+ .scenes {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+
+ .scene {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 80px 40px 120px;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.6s var(--ease-power);
+ }
+
+ .scene.active {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ /* Scene 1: Hook */
+ .scene-hook {
+ text-align: center;
+ }
+
+ .hook-label {
+ font-family: var(--display);
+ font-size: 12px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 24px;
+ animation: fadeUp 0.7s var(--ease-out-quint) both;
+ }
+
+ .hook-text {
+ font-family: var(--display);
+ font-size: 38px;
+ line-height: 1.1;
+ color: var(--text);
+ animation: fadeUp 0.7s var(--ease-out-quint) 0.15s both;
+ }
+
+ /* Scene 2: Color Name */
+ .scene-color {
+ text-align: center;
+ }
+
+ .color-label {
+ font-family: var(--body);
+ font-size: 11px;
+ letter-spacing: 0.25em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 16px;
+ animation: fadeUp 0.7s var(--ease-out-quint) both;
+ }
+
+ .color-name {
+ font-family: var(--display);
+ font-size: 67px;
+ line-height: 0.95;
+ color: var(--celadon);
+ text-transform: uppercase;
+ letter-spacing: -0.02em;
+ animation: scaleIn 1s var(--ease-out-quint) 0.2s both;
+ text-shadow: 0 0 80px rgba(168, 213, 199, 0.3);
+ }
+
+ .color-subtitle {
+ font-family: var(--body);
+ font-size: 16px;
+ color: var(--muted);
+ margin-top: 24px;
+ font-style: italic;
+ animation: fadeUp 0.7s var(--ease-out-quint) 0.5s both;
+ }
+
+ /* Scene 3: Swatches */
+ .scene-swatches {
+ padding-top: 100px;
+ }
+
+ .swatches-title {
+ font-family: var(--display);
+ font-size: 28px;
+ color: var(--text);
+ margin-bottom: 48px;
+ text-align: center;
+ animation: fadeUp 0.7s var(--ease-out-quint) both;
+ }
+
+ .swatches-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 100%;
+ max-width: 280px;
+ }
+
+ .swatch {
+ position: relative;
+ height: 140px;
+ border-radius: 2px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
+ animation: scaleIn 0.8s var(--ease-out-quint) both;
+ }
+
+ .swatch:nth-child(1) { animation-delay: 0.1s; }
+ .swatch:nth-child(2) { animation-delay: 0.25s; }
+ .swatch:nth-child(3) { animation-delay: 0.4s; }
+
+ /* Pattern 1: Geometric Lattice */
+ .pattern-lattice {
+ background-color: var(--celadon);
+ background-image:
+ linear-gradient(45deg, transparent 48%, rgba(13,13,15,0.15) 48%, rgba(13,13,15,0.15) 52%, transparent 52%),
+ linear-gradient(-45deg, transparent 48%, rgba(13,13,15,0.15) 48%, rgba(13,13,15,0.15) 52%, transparent 52%);
+ background-size: 30px 30px;
+ }
+
+ /* Pattern 2: Organic Brushstrokes */
+ .pattern-brush {
+ background-color: var(--celadon-deep);
+ background-image:
+ radial-gradient(ellipse 60% 40% at 20% 30%, rgba(168,213,199,0.6) 0%, transparent 60%),
+ radial-gradient(ellipse 40% 70% at 70% 60%, rgba(13,13,15,0.1) 0%, transparent 50%),
+ radial-gradient(ellipse 50% 50% at 40% 80%, rgba(168,213,199,0.4) 0%, transparent 55%);
+ background-size: 120px 120px;
+ }
+
+ /* Pattern 3: Metallic Grid */
+ .pattern-grid {
+ background-color: var(--celadon);
+ background-image:
+ linear-gradient(to right, rgba(201,169,97,0.3) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(201,169,97,0.3) 1px, transparent 1px);
+ background-size: 20px 20px;
+ position: relative;
+ }
+
+ .pattern-grid::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, transparent 40%, rgba(201,169,97,0.15) 50%, transparent 60%);
+ background-size: 200% 200%;
+ animation: shimmer 4s linear infinite;
+ }
+
+ .swatch-label {
+ position: absolute;
+ bottom: 16px;
+ left: 16px;
+ font-family: var(--body);
+ font-size: 11px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: rgba(13,13,15,0.7);
+ background: rgba(245,242,234,0.9);
+ padding: 6px 12px;
+ border-radius: 1px;
+ }
+
+ /* Scene 4: Styling Tip */
+ .scene-tip {
+ text-align: center;
+ }
+
+ .tip-label {
+ font-family: var(--body);
+ font-size: 11px;
+ letter-spacing: 0.25em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 32px;
+ animation: fadeUp 0.7s var(--ease-out-quint) both;
+ }
+
+ .tip-content {
+ font-family: var(--display);
+ font-size: 38px;
+ line-height: 1.2;
+ color: var(--text);
+ margin-bottom: 40px;
+ animation: blurIn 1s var(--ease-out-quint) 0.2s both;
+ }
+
+ .tip-accent {
+ color: var(--celadon);
+ }
+
+ .tip-detail {
+ font-family: var(--body);
+ font-size: 16px;
+ line-height: 1.6;
+ color: var(--muted);
+ max-width: 280px;
+ animation: fadeUp 0.7s var(--ease-out-quint) 0.5s both;
+ }
+
+ /* Scene 5: CTA */
+ .scene-cta {
+ text-align: center;
+ }
+
+ .cta-headline {
+ font-family: var(--display);
+ font-size: 50px;
+ line-height: 1;
+ color: var(--text);
+ margin-bottom: 16px;
+ animation: scaleIn 0.8s var(--ease-out-quint) both;
+ }
+
+ .cta-sub {
+ font-family: var(--body);
+ font-size: 16px;
+ color: var(--muted);
+ margin-bottom: 48px;
+ animation: fadeUp 0.7s var(--ease-out-quint) 0.2s both;
+ }
+
+ .cta-button {
+ display: inline-block;
+ font-family: var(--body);
+ font-size: 12px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--bg);
+ background: var(--accent);
+ padding: 20px 48px;
+ border: none;
+ border-radius: 1px;
+ cursor: pointer;
+ text-decoration: none;
+ animation: fadeUp 0.7s var(--ease-out-quint) 0.4s both;
+ transition: transform 0.3s var(--ease-out-quint), box-shadow 0.3s var(--ease-out-quint);
+ box-shadow: 0 8px 32px rgba(201,169,97,0.3);
+ }
+
+ .cta-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 12px 40px rgba(201,169,97,0.4);
+ }
+
+ /* Progress Bar */
+ .progress-container {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: rgba(245,242,234,0.1);
+ z-index: 1000;
+ }
+
+ .progress-bar {
+ height: 100%;
+ background: var(--accent);
+ width: 0%;
+ transition: width 0.1s linear;
+ }
+
+ .progress-bar.active {
+ animation: progress 15s linear forwards;
+ }
+
+ .progress-bar.paused {
+ animation-play-state: paused;
+ }
+
+ /* Controls */
+ .controls {
+ position: fixed;
+ bottom: 32px;
+ right: 32px;
+ z-index: 1001;
+ }
+
+ .play-pause {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ border: 1px solid rgba(245,242,234,0.2);
+ background: rgba(13,13,15,0.8);
+ backdrop-filter: blur(10px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s var(--ease-out-quint);
+ }
+
+ .play-pause:hover {
+ border-color: var(--accent);
+ transform: scale(1.05);
+ }
+
+ .play-pause svg {
+ width: 20px;
+ height: 20px;
+ fill: var(--text);
+ }
+
+ /* Scene indicators */
+ .indicators {
+ position: fixed;
+ bottom: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 8px;
+ z-index: 1001;
+ }
+
+ .indicator {
+ width: 32px;
+ height: 2px;
+ background: rgba(245,242,234,0.2);
+ transition: all 0.3s var(--ease-out-quint);
+ }
+
+ .indicator.active {
+ background: var(--accent);
+ }
+
+ /* Caption overlay */
+ .caption {
+ position: fixed;
+ bottom: 100px;
+ left: 40px;
+ right: 40px;
+ font-family: var(--body);
+ font-size: 14px;
+ color: var(--text);
+ opacity: 0;
+ transform: translateY(10px);
+ transition: all 0.5s var(--ease-out-quint);
+ z-index: 100;
+ pointer-events: none;
+ }
+
+ .caption.visible {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ /* Decorative elements */
+ .deco-line {
+ position: absolute;
+ width: 1px;
+ height: 60px;
+ background: linear-gradient(to bottom, transparent, var(--accent), transparent);
+ opacity: 0.3;
+ }
+
+ .deco-line.left {
+ left: 32px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .deco-line.right {
+ right: 32px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ </style>
+</head>
+<body>
+ <!-- Fixed Top Bar -->
+ <div class="top-bar">
+ <div class="wordmark">Designer Wallcoverings</div>
+ </div>
+
+ <!-- Main Reel -->
+ <div class="reel-container">
+ <div class="deco-line left"></div>
+ <div class="deco-line right"></div>
+
+ <div class="scenes">
+ <!-- Scene 1: Hook -->
+ <div class="scene scene-hook active" data-duration="2500">
+ <div class="hook-label">The Color Report</div>
+ <div class="hook-text">This season<br>it's all about...</div>
+ </div>
+
+ <!-- Scene 2: Color Name -->
+ <div class="scene scene-color" data-duration="3500">
+ <div class="color-label">Introducing</div>
+ <div class="color-name">Celadon</div>
+ <div class="color-subtitle">Serene. Sophisticated. Unmistakably now.</div>
+ </div>
+
+ <!-- Scene 3: Swatches -->
+ <div class="scene scene-swatches" data-duration="4500">
+ <div class="swatches-title">Three ways to wear it</div>
+ <div class="swatches-grid">
+ <div class="swatch pattern-lattice">
+ <span class="swatch-label">Lattice</span>
+ </div>
+ <div class="swatch pattern-brush">
+ <span class="swatch-label">Atelier</span>
+ </div>
+ <div class="swatch pattern-grid">
+ <span class="swatch-label">Gilded Grid</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Scene 4: Styling Tip -->
+ <div class="scene scene-tip" data-duration="3500">
+ <div class="tip-label">Curator's Note</div>
+ <div class="tip-content">
+ Pair with<br>
+ <span class="tip-accent">warm brass</span><br>
+ & ivory linen
+ </div>
+ <div class="tip-detail">The muted green sings against natural textures and metallic accents.</div>
+ </div>
+
+ <!-- Scene 5: CTA -->
+ <div class="scene scene-cta" data-duration="4000">
+ <div class="cta-headline">Make it<br>yours</div>
+ <div class="cta-sub">Request a sample portfolio</div>
+ <a href="#" class="cta-button">Explore Collection</a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Progress Bar -->
+ <div class="progress-container">
+ <div class="progress-bar active" id="progressBar"></div>
+ </div>
+
+ <!-- Scene Indicators -->
+ <div class="indicators" id="indicators">
+ <div class="indicator active" data-index="0"></div>
+ <div class="indicator" data-index="1"></div>
+ <div class="indicator" data-index="2"></div>
+ <div class="indicator" data-index="3"></div>
+ <div class="indicator" data-index="4"></div>
+ </div>
+
+ <!-- Play/Pause Control -->
+ <div class="controls">
+ <button class="play-pause" id="playPause" aria-label="Pause">
+ <svg id="pauseIcon" viewBox="0 0 24 24">
+ <rect x="6" y="4" width="4" height="16"/>
+ <rect x="14" y="4" width="4" height="16"/>
+ </svg>
+ <svg id="playIcon" viewBox="0 0 24 24" style="display: none; margin-left: 2px;">
+ <polygon points="5,3 19,12 5,21"/>
+ </svg>
+ </button>
+ </div>
+
+ <!-- Dynamic Caption -->
+ <div class="caption" id="caption"></div>
+
+ <script>
+ const scenes = document.querySelectorAll('.scene');
+ const indicators = document.querySelectorAll('.indicator');
+ const progressBar = document.getElementById('progressBar');
+ const playPauseBtn = document.getElementById('playPause');
+ const pauseIcon = document.getElementById('pauseIcon');
+ const playIcon = document.getElementById('playIcon');
+ const caption = document.getElementById('caption');
+
+ let currentScene = 0;
+ let isPlaying = true;
+ let sceneTimer = null;
+ let progressTimer = null;
+ let sceneStartTime = 0;
+ let currentSceneDuration = 0;
+
+ const captions = [
+ "Discover what top designers are specifying this season.",
+ "Celadon — a mineral-inspired hue that brings the outside in.",
+ "Handcrafted patterns in our signature wallcovering weight.",
+ "Styling secrets from our design studio.",
+ "Experience the collection in your own space."
+ ];
+
+ function showScene(index) {
+ scenes.forEach((scene, i) => {
+ scene.classList.toggle('active', i === index);
+ });
+ indicators.forEach((ind, i) => {
+ ind.classList.toggle('active', i === index);
+ });
+
+ caption.textContent = captions[index];
+ caption.classList.add('visible');
+ setTimeout(() => caption.classList.remove('visible'), 2000);
+
+ currentScene = index;
+ sceneStartTime = Date.now();
+ currentSceneDuration = parseInt(scenes[index].dataset.duration);
+
+ // Reset and animate progress bar
+ progressBar.style.animation = 'none';
+ progressBar.offsetHeight; // Trigger reflow
+ progressBar.style.animation = `progress ${currentSceneDuration}ms linear forwards`;
+
+ if (!isPlaying) {
+ progressBar.style.animationPlayState = 'paused';
+ }
+ }
+
+ function nextScene() {
+ const next = (currentScene + 1) % scenes.length;
+ showScene(next);
+ }
+
+ function startAutoAdvance() {
+ clearTimeout(sceneTimer);
+ if (isPlaying) {
+ const elapsed = Date.now() - sceneStartTime;
+ const remaining = Math.max(0, currentSceneDuration - elapsed);
+ sceneTimer = setTimeout(nextScene, remaining);
+ }
+ }
+
+ function togglePlayPause() {
+ isPlaying = !isPlaying;
+
+ if (isPlaying) {
+ pauseIcon.style.display = 'block';
+ playIcon.style.display = 'none';
+ progressBar.style.animationPlayState = 'running';
+ startAutoAdvance();
+ } else {
+ pauseIcon.style.display = 'none';
+ playIcon.style.display = 'block';
+ progressBar.style.animationPlayState = 'paused';
+ clearTimeout(sceneTimer);
+ }
+ }
+
+ // Initialize
+ showScene(0);
+ startAutoAdvance();
+
+ // Event listeners
+ playPauseBtn.addEventListener('click', togglePlayPause);
+
+ indicators.forEach((ind, i) => {
+ ind.addEventListener('click', () => {
+ showScene(i);
+ startAutoAdvance();
+ });
+ });
+
+ // Keyboard controls
+ document.addEventListener('keydown', (e) => {
+ if (e.code === 'Space') {
+ e.preventDefault();
+ togglePlayPause();
+ }
+ });
+
+ // Touch swipe support
+ let touchStartY = 0;
+ document.addEventListener('touchstart', (e) => {
+ touchStartY = e.touches[0].clientY;
+ });
+
+ document.addEventListener('touchend', (e) => {
+ const touchEndY = e.changedTouches[0].clientY;
+ const diff = touchStartY - touchEndY;
+
+ if (Math.abs(diff) > 50) {
+ if (diff > 0) {
+ // Swipe up - next
+ nextScene();
+ } else {
+ // Swipe down - previous
+ const prev = (currentScene - 1 + scenes.length) % scenes.length;
+ showScene(prev);
+ }
+ startAutoAdvance();
+ }
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/cd9c858a083c/kimi.png b/data/artifacts/cd9c858a083c/kimi.png
new file mode 100644
index 0000000..58acb0c
Binary files /dev/null and b/data/artifacts/cd9c858a083c/kimi.png differ
diff --git a/data/artifacts/cd9c858a083c/qwen25-7b.html b/data/artifacts/cd9c858a083c/qwen25-7b.html
new file mode 100644
index 0000000..3fbd778
--- /dev/null
+++ b/data/artifacts/cd9c858a083c/qwen25-7b.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Color of the Season</title>
+ <style>
+ body {
+ margin: 0;
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ background-color: #0d0d0f;
+ color: #f5f2ea;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+ .header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: #17171c;
+ padding: 24px 32px;
+ display: flex;
+ align-items: center;
+ }
+ .header span {
+ font-size: 24px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ }
+ .content {
+ position: relative;
+ width: 90%;
+ max-width: 600px;
+ padding: 32px;
+ background-color: #17171c;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.12);
+ }
+ .content section {
+ margin-bottom: 24px;
+ }
+ .content h1 {
+ font-size: 50px;
+ line-height: 1.2;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ margin-top: 0;
+ }
+ .content p {
+ font-size: 16px;
+ margin-bottom: 16px;
+ }
+ .color-swatch {
+ width: 150px;
+ height: 150px;
+ border-radius: 8px;
+ margin-right: 24px;
+ }
+ .cta-button {
+ display: inline-block;
+ padding: 16px 32px;
+ background-color: #c9a961;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 8px;
+ transition: background-color 0.2s ease-out;
+ }
+ .cta-button:hover {
+ background-color: #b0472e;
+ }
+ .progress-bar {
+ width: 100%;
+ height: 3px;
+ background-color: rgba(255,255,255,.1);
+ position: absolute;
+ bottom: 8px;
+ left: 0;
+ border-radius: 4px;
+ }
+ .progress-fill {
+ width: 0%;
+ height: 3px;
+ background-color: #c9a961;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ transition: width 1.5s ease-out;
+ }
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(28px); }
+ to { opacity: 1; transform: none; }
+ }
+ </style>
+</head>
+<body>
+ <div class="header">
+ <span>DESIGNER WALLCOVERINGS</span>
+ </div>
+ <div class="content" id="reel-container">
+ <section>
+ <h1>This season it's all about...</h1>
+ <p>Celadon</p>
+ <div class="color-swatch" style="background-color: #c9a961;"></div>
+ <div class="color-swatch" style="background-color: #c9a961;"></div>
+ <div class="color-swatch" style="background-color: #c9a961;"></div>
+ <p>Styling Tip: Use it in a monochromatic scheme for a cohesive and sophisticated look.</p>
+ </section>
+ <a href="#" class="cta-button">Shop Now</a>
+ <div class="progress-bar">
+ <div class="progress-fill" id="progress-fill"></div>
+ </div>
+ </div>
+
+ <script>
+ const reelContainer = document.getElementById('reel-container');
+ let progressFill = document.getElementById('progress-fill');
+
+ setTimeout(() => {
+ progressFill.style.width = '100%';
+ setTimeout(() => {
+ reelContainer.style.animation = 'fadeUp 1.5s ease-out both';
+ }, 1500);
+ }, 2000);
+
+ const sections = document.querySelectorAll('section');
+ sections.forEach((section, index) => {
+ section.style.transitionDelay = `${index * 90}ms`;
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/cd9c858a083c/qwen25-7b.png b/data/artifacts/cd9c858a083c/qwen25-7b.png
new file mode 100644
index 0000000..3c74bc7
Binary files /dev/null and b/data/artifacts/cd9c858a083c/qwen25-7b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index a3f3321..c453ef3 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -16406,7 +16406,14 @@
"hyperframes"
],
"bytes": 4343,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The design is visually appealing and fulfills most of the requirements but lacks some refinement in typography and slider styling.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 0.5
},
{
"model": "qwen25-7b",
@@ -16578,7 +16585,14 @@
"finished_at": "2026-07-25T08:34:23.297Z",
"queued_at": "2026-07-25T08:34:13.047Z",
"bytes": 699,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.5,
+ "aiReason": "The previous attempt has good structure but lacks visual polish and clarity.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6
+ },
+ "aiSpread": 1
},
{
"model": "hf-qwen-coder-32b",
@@ -16678,7 +16692,14 @@
"finished_at": "2026-07-25T08:36:27.941Z",
"queued_at": "2026-07-25T08:35:55.366Z",
"bytes": 4475,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The design fulfills most requirements but lacks the damask SVG motif and refined geometric sans for HUD/button text.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 9.5
+ },
+ "aiSpread": 2.5
},
{
"model": "hf-qwen-coder-32b",
@@ -16843,7 +16864,14 @@
"queued_at": "2026-07-25T08:46:22.589Z",
"resumes": 1,
"bytes": 6776,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file effectively fulfills the challenge by creating a recursive fractal tree that grows and sways in wind, with seasonal leaf particles falling. The visual quality is polished and the impleme",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
},
{
"model": "hf-qwen-coder-32b",
@@ -16923,7 +16951,14 @@
"queued_at": "2026-07-25T08:46:22.602Z",
"resumes": 1,
"bytes": 2305,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The HTML file is self-contained and fulfills the challenge requirements well, but lacks the CSS styling for the game mechanics.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 0.5
},
{
"model": "qwen25-7b",
@@ -17080,7 +17115,14 @@
"finished_at": "2026-07-25T09:10:25.640Z",
"queued_at": "2026-07-25T08:47:53.310Z",
"bytes": 3298,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The design is visually appealing and adheres to the luxury register, but lacks some of the specified elements like scrolling feed and bar chart.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 0.5
},
{
"model": "qwen25-7b",
@@ -17215,7 +17257,14 @@
"finished_at": "2026-07-25T09:12:56.749Z",
"queued_at": "2026-07-25T09:08:14.244Z",
"bytes": 2139,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The HTML document is well-implemented and visually appealing for the given challenge.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "hermes3-8b",
@@ -17294,7 +17343,14 @@
"finished_at": "2026-07-25T09:15:56.372Z",
"queued_at": "2026-07-25T09:08:14.323Z",
"bytes": 8884,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.5,
+ "aiReason": "The design is visually appealing and adheres to the luxury UI requirements, but it lacks some of the refined sans-serif body text as specified.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6
+ },
+ "aiSpread": 1
},
{
"model": "hermes3-8b",
@@ -17413,55 +17469,66 @@
"runs": [
{
"model": "qwen3-14b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.037Z"
+ "seconds": 78,
+ "cost": 0,
+ "started_at": "2026-07-25T09:22:10.875Z",
+ "finished_at": "2026-07-25T09:23:28.555Z",
+ "queued_at": "2026-07-25T09:20:17.037Z",
+ "bytes": 8902,
+ "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-25T09:20:17.040Z"
+ "seconds": 94,
+ "cost": 0,
+ "started_at": "2026-07-25T09:23:28.558Z",
+ "finished_at": "2026-07-25T09:25:02.297Z",
+ "queued_at": "2026-07-25T09:20:17.040Z",
+ "bytes": 12150,
+ "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-25T09:20:17.043Z"
+ "seconds": 53,
+ "cost": 0,
+ "started_at": "2026-07-25T09:25:02.302Z",
+ "finished_at": "2026-07-25T09:25:55.708Z",
+ "queued_at": "2026-07-25T09:20:17.043Z",
+ "bytes": 7632,
+ "thumb": true
},
{
"model": "qwen25-7b",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 68,
+ "cost": 0,
"started_at": "2026-07-25T09:20:17.053Z",
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.047Z"
+ "finished_at": "2026-07-25T09:21:25.091Z",
+ "queued_at": "2026-07-25T09:20:17.047Z",
+ "bytes": 7577,
+ "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-25T09:20:17.050Z"
+ "seconds": 123,
+ "cost": 0,
+ "started_at": "2026-07-25T09:25:55.711Z",
+ "finished_at": "2026-07-25T09:27:58.911Z",
+ "queued_at": "2026-07-25T09:20:17.050Z",
+ "bytes": 7021,
+ "thumb": true
}
- ]
+ ],
+ "judging": true
},
{
"id": "0b9bb5066c06",
@@ -17474,13 +17541,149 @@
"runs": [
{
"model": "qwen3-14b",
- "status": "queued",
+ "status": "done",
+ "error": null,
+ "seconds": 61,
+ "cost": 0,
+ "started_at": "2026-07-25T09:27:58.918Z",
+ "finished_at": "2026-07-25T09:28:59.490Z",
+ "queued_at": "2026-07-25T09:20:17.109Z",
+ "bytes": 8859,
+ "thumb": true
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "done",
+ "error": null,
+ "seconds": 53,
+ "cost": 0,
+ "started_at": "2026-07-25T09:28:59.497Z",
+ "finished_at": "2026-07-25T09:29:52.716Z",
+ "queued_at": "2026-07-25T09:20:17.112Z",
+ "bytes": 8025,
+ "thumb": true
+ },
+ {
+ "model": "hermes3-8b",
+ "status": "done",
+ "error": null,
+ "seconds": 11,
+ "cost": 0,
+ "started_at": "2026-07-25T09:29:52.719Z",
+ "finished_at": "2026-07-25T09:30:03.790Z",
+ "queued_at": "2026-07-25T09:20:17.115Z",
+ "bytes": 1700,
+ "thumb": true
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 28,
+ "cost": 0,
+ "started_at": "2026-07-25T09:21:25.143Z",
+ "finished_at": "2026-07-25T09:21:53.643Z",
+ "queued_at": "2026-07-25T09:20:17.118Z",
+ "bytes": 4324,
+ "thumb": true
+ },
+ {
+ "model": "hf-qwen-coder-32b",
+ "status": "done",
+ "error": null,
+ "seconds": 65,
+ "cost": 0,
+ "started_at": "2026-07-25T09:30:03.796Z",
+ "finished_at": "2026-07-25T09:31:08.607Z",
+ "queued_at": "2026-07-25T09:20:17.121Z",
+ "bytes": 4887,
+ "thumb": true
+ },
+ {
+ "model": "claude-code",
+ "status": "done",
+ "error": null,
+ "seconds": 125,
+ "cost": 0,
+ "started_at": "2026-07-25T09:20:17.138Z",
+ "finished_at": "2026-07-25T09:22:22.085Z",
+ "queued_at": "2026-07-25T09:20:17.124Z",
+ "bytes": 24392,
+ "thumb": true
+ },
+ {
+ "model": "kimi",
+ "status": "done",
+ "error": null,
+ "seconds": 131,
+ "cost": 0.0216,
+ "started_at": "2026-07-25T09:20:17.144Z",
+ "finished_at": "2026-07-25T09:22:27.857Z",
+ "queued_at": "2026-07-25T09:20:17.128Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 29573,
+ "thumb": true
+ },
+ {
+ "model": "gpt",
+ "status": "done",
+ "error": null,
+ "seconds": 78,
+ "cost": 0.1812,
+ "started_at": "2026-07-25T09:20:17.148Z",
+ "finished_at": "2026-07-25T09:21:35.611Z",
+ "queued_at": "2026-07-25T09:20:17.131Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 38384,
+ "thumb": true
+ },
+ {
+ "model": "grok",
+ "status": "done",
+ "error": null,
+ "seconds": 166,
+ "cost": 0.2257,
+ "started_at": "2026-07-25T09:20:17.152Z",
+ "finished_at": "2026-07-25T09:23:03.511Z",
+ "queued_at": "2026-07-25T09:20:17.134Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 40883,
+ "thumb": true
+ }
+ ],
+ "judging": true,
+ "judged_at": null
+ },
+ {
+ "id": "776187e02cf0",
+ "title": "Designer Wallcoverings — Brand Mood Board Maker",
+ "prompt": "Build a single self-contained HTML file: a shareable mood-board generator for a luxury wallcovering brand. A 1080x1350 canvas auto-arranges a curated set (a hero CSS pattern, 3 color chips with names, a type-pairing sample, a texture tile); a \"Regenerate\" button reshuffles into a new on-brand board with easing. Pick a style theme (Classic, Coastal, Moody, Botanical). Output ONLY the HTML. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. It must look like a luxury interior-design brand, not a generic AI demo.",
+ "category": "Custom",
+ "designTools": true,
+ "created_at": "2026-07-25T09:20:17.195Z",
+ "winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T09:31:08.614Z",
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.109Z"
+ "queued_at": "2026-07-25T09:20:17.198Z"
},
{
"model": "gemma3-12b",
@@ -17490,7 +17693,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.112Z"
+ "queued_at": "2026-07-25T09:20:17.202Z"
},
{
"model": "hermes3-8b",
@@ -17500,17 +17703,19 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.115Z"
+ "queued_at": "2026-07-25T09:20:17.205Z"
},
{
"model": "qwen25-7b",
- "status": "queued",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": null,
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.118Z"
+ "seconds": 32,
+ "cost": 0,
+ "started_at": "2026-07-25T09:21:53.649Z",
+ "finished_at": "2026-07-25T09:22:25.743Z",
+ "queued_at": "2026-07-25T09:20:17.208Z",
+ "bytes": 4502,
+ "thumb": true
},
{
"model": "hf-qwen-coder-32b",
@@ -17520,57 +17725,84 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.121Z"
+ "queued_at": "2026-07-25T09:20:17.211Z"
},
{
"model": "claude-code",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": "2026-07-25T09:20:17.138Z",
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.124Z"
+ "seconds": 96,
+ "cost": 0,
+ "started_at": "2026-07-25T09:22:22.088Z",
+ "finished_at": "2026-07-25T09:23:57.962Z",
+ "queued_at": "2026-07-25T09:20:17.215Z",
+ "bytes": 17744,
+ "thumb": true
},
{
"model": "kimi",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": "2026-07-25T09:20:17.144Z",
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.128Z"
+ "seconds": 98,
+ "cost": 0.0178,
+ "started_at": "2026-07-25T09:22:27.863Z",
+ "finished_at": "2026-07-25T09:24:05.381Z",
+ "queued_at": "2026-07-25T09:20:17.218Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 17494,
+ "thumb": true
},
{
"model": "gpt",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": "2026-07-25T09:20:17.148Z",
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.131Z"
+ "seconds": 65,
+ "cost": 0.1319,
+ "started_at": "2026-07-25T09:21:35.616Z",
+ "finished_at": "2026-07-25T09:22:40.613Z",
+ "queued_at": "2026-07-25T09:20:17.221Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 30931,
+ "thumb": true
},
{
"model": "grok",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
- "started_at": "2026-07-25T09:20:17.152Z",
- "finished_at": null,
- "queued_at": "2026-07-25T09:20:17.134Z"
+ "seconds": 156,
+ "cost": 0.1606,
+ "started_at": "2026-07-25T09:23:03.513Z",
+ "finished_at": "2026-07-25T09:25:39.425Z",
+ "queued_at": "2026-07-25T09:20:17.225Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 28940,
+ "thumb": true
}
]
},
{
- "id": "776187e02cf0",
- "title": "Designer Wallcoverings — Brand Mood Board Maker",
- "prompt": "Build a single self-contained HTML file: a shareable mood-board generator for a luxury wallcovering brand. A 1080x1350 canvas auto-arranges a curated set (a hero CSS pattern, 3 color chips with names, a type-pairing sample, a texture tile); a \"Regenerate\" button reshuffles into a new on-brand board with easing. Pick a style theme (Classic, Coastal, Moody, Botanical). Output ONLY the HTML. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. It must look like a luxury interior-design brand, not a generic AI demo.",
+ "id": "cd9c858a083c",
+ "title": "Designer Wallcoverings — Trending Color Reel",
+ "prompt": "Build a single self-contained HTML file: a vertical 9:16 Reel that reveals a \"Color of the Season\" for a wallcovering brand. Auto-advancing timed scenes: hook (\"This season it's all about...\"), the hue name filling the screen (e.g. Celadon), 3 CSS pattern swatches in that color, styling tip, CTA. Animated captions + progress bar, play/pause. Output ONLY the HTML. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. It must look like a luxury interior-design brand, not a generic AI demo.",
"category": "Custom",
"designTools": true,
- "created_at": "2026-07-25T09:20:17.195Z",
+ "created_at": "2026-07-25T09:20:17.286Z",
"winner": null,
"runs": [
{
@@ -17581,7 +17813,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.198Z"
+ "queued_at": "2026-07-25T09:20:17.289Z"
},
{
"model": "gemma3-12b",
@@ -17591,7 +17823,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.202Z"
+ "queued_at": "2026-07-25T09:20:17.292Z"
},
{
"model": "hermes3-8b",
@@ -17601,77 +17833,159 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.205Z"
+ "queued_at": "2026-07-25T09:20:17.296Z"
},
{
"model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 29,
+ "cost": 0,
+ "started_at": "2026-07-25T09:22:25.758Z",
+ "finished_at": "2026-07-25T09:22:54.363Z",
+ "queued_at": "2026-07-25T09:20:17.298Z",
+ "bytes": 4062,
+ "thumb": true
+ },
+ {
+ "model": "hf-qwen-coder-32b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.208Z"
+ "queued_at": "2026-07-25T09:20:17.301Z"
},
{
- "model": "hf-qwen-coder-32b",
+ "model": "claude-code",
+ "status": "done",
+ "error": null,
+ "seconds": 76,
+ "cost": 0,
+ "started_at": "2026-07-25T09:23:57.965Z",
+ "finished_at": "2026-07-25T09:25:14.300Z",
+ "queued_at": "2026-07-25T09:20:17.305Z",
+ "bytes": 15124,
+ "thumb": true
+ },
+ {
+ "model": "kimi",
+ "status": "done",
+ "error": null,
+ "seconds": 98,
+ "cost": 0.0182,
+ "started_at": "2026-07-25T09:24:05.386Z",
+ "finished_at": "2026-07-25T09:25:43.856Z",
+ "queued_at": "2026-07-25T09:20:17.308Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes",
+ "hyperframes",
+ "hyperframes"
+ ],
+ "bytes": 22461,
+ "thumb": true
+ },
+ {
+ "model": "gpt",
+ "status": "error",
+ "error": "openai error: {\"message\":\"The server had an error processing your request. Sorry about that! You can retry your request, or contact us through our help center at help.openai.com if you keep seeing this error. (Plea",
+ "seconds": 3,
+ "cost": null,
+ "started_at": "2026-07-25T09:22:40.615Z",
+ "finished_at": "2026-07-25T09:22:43.845Z",
+ "queued_at": "2026-07-25T09:20:17.311Z"
+ },
+ {
+ "model": "grok",
+ "status": "done",
+ "error": null,
+ "seconds": 62,
+ "cost": 0.096,
+ "started_at": "2026-07-25T09:25:39.429Z",
+ "finished_at": "2026-07-25T09:26:41.818Z",
+ "queued_at": "2026-07-25T09:20:17.313Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 17073,
+ "thumb": true
+ }
+ ]
+ },
+ {
+ "id": "e23b2dee4b1a",
+ "title": "Remix: Smoke Test: Particle Fireworks",
+ "prompt": "Build an interactive fireworks simulator in a single HTML file: click anywhere to launch a rocket that explodes into physics-based particles with trails, gravity, and glow. Include an auto-show mode. Keep it under 200 lines.\n\nHere is a strong previous attempt at this exact challenge. IMPROVE on it — keep what works, fix its weaknesses, and elevate the visual quality and polish. Return a complete, improved single-file HTML document.\n\n=== PREVIOUS ATTEMPT (Kimi K2.5) ===\n<!DOCTYPE html>\n<html>\n<head>\n<style>\nbody{margin:0;overflow:hidden;background:#000}\ncanvas{display:block}\n</style>\n</head>\n<body>\n<canvas id=\"c\"></canvas>\n<script>\nconst c=document.getElementById('c'),x=c.getContext('2d');\nlet w=c.width=innerWidth,h=c.height=innerHeight;\nonresize=()=>{w=c.width=innerWidth;h=c.height=innerHeight};\nconst R=[],P=[];\nclass Particle{\nconstructor(x,y,c){\nthis.x=x;this.y=y;\nconst a=Math.random()*6.28,v=Math.random()*6;\nthis.vx=Math.cos(a)*v;this.vy=Math.sin(a)*v;\nthis.l=1;this.c=c;this.g=0.08;\n}\nupdate(){\nthis.vy+=this.g;this.x+=this.vx;this.y+=this.vy;this.l-=0.015;\nx.globalAlpha=this.l;x.fillStyle=this.c;x.beginPath();x.arc(this.x,this.y,2.5,0,7);x.fill();\n}\n}\nclass Rocket{\nconstructor(tx,ty){\nthis.x=Math.random()*w;this.y=h;this.tx=tx;this.ty=ty;\nconst dx=tx-this.x,dy=ty-h,d=Math.sqrt(dx*dx+dy*dy);\nthis.vx=dx/d*12;this.vy=dy/d*12;this.dead=0;\nthis.c=`hsl(${Math.random()*360},100%,60%)`;\n}\nupdate(){\nthis.x+=this.vx;this.y+=this.vy;\nif(Math.hypot(this.x-this.tx,this.y-this.ty)<10||this.vy>0){\nthis.dead=1;\nfor(let i=0;i<40;i++)P.push(new Particle(this.x,this.y,this.c));\n}\nx.fillStyle=this.c;x.beginPath();x.arc(this.x,this.y,3,0,7);x.fill();\n}\n}\nfunction loop(){\nx.globalCompositeOperation='source-over';\nx.fillStyle='rgba(0,0,0,0.15)';x.fillRect(0,0,w,h);\nx.globalCompositeOperation='lighter';\nfor(let i=R.length-1;i>=0;i--){R[i].update();if(R[i].dead)R.splice(i,1)}\nfor(let i=P.length-1;i>=0;i--){P[i].update();if(P[i].l<=0)P.splice(i,1)}\nrequestAnimationFrame(loop);\n}\nc.onclick=e=>R.push(new Rocket(e.clientX,e.clientY));\nsetInterval(()=>R.push(new Rocket(Math.random()*w,Math.random()*h*0.6)),600);\nloop();\n</script>\n</body>\n</html>",
+ "remixOf": "0ac1af2eaed4",
+ "remixSource": "kimi",
+ "designTools": false,
+ "created_at": "2026-07-25T09:31:21.503Z",
+ "winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.211Z"
+ "queued_at": "2026-07-25T09:31:21.507Z"
},
{
- "model": "claude-code",
+ "model": "gemma3-12b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.215Z"
+ "queued_at": "2026-07-25T09:31:21.513Z"
},
{
- "model": "kimi",
+ "model": "hermes3-8b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.218Z"
+ "queued_at": "2026-07-25T09:31:21.518Z"
},
{
- "model": "gpt",
- "status": "queued",
+ "model": "qwen25-7b",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T09:31:21.533Z",
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.221Z"
+ "queued_at": "2026-07-25T09:31:21.524Z"
},
{
- "model": "grok",
+ "model": "hf-qwen-coder-32b",
"status": "queued",
"error": null,
"seconds": null,
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.225Z"
+ "queued_at": "2026-07-25T09:31:21.527Z"
}
]
},
{
- "id": "cd9c858a083c",
- "title": "Designer Wallcoverings — Trending Color Reel",
- "prompt": "Build a single self-contained HTML file: a vertical 9:16 Reel that reveals a \"Color of the Season\" for a wallcovering brand. Auto-advancing timed scenes: hook (\"This season it's all about...\"), the hue name filling the screen (e.g. Celadon), 3 CSS pattern swatches in that color, styling tip, CTA. Animated captions + progress bar, play/pause. Output ONLY the HTML. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. It must look like a luxury interior-design brand, not a generic AI demo.",
- "category": "Custom",
+ "id": "b325446e067a",
+ "title": "Designer Wallcoverings — Color Harmony Game",
+ "prompt": "Build a single self-contained HTML file: a color-matching mini-game. A target luxury interior palette is shown; three swatch reels spin and the player taps STOP to match the target hues; closeness scores points. 5 rounds, combo bonus, designer color names, best score in localStorage, restart. Elegant, 60fps. Output ONLY the HTML. DW LUXURY UI REQUIREMENTS (mandatory): (a) a fixed top bar with the wordmark 'DESIGNER WALLCOVERINGS' left-aligned in a SERIF display face (Cormorant Garamond / Playfair / EB Garamond via system serif stack), uppercase, letter-spacing .18em; (b) NEVER use system-ui/Arial as the display face — headings in the serif, body in a refined sans; generous type scale (headings >=24px); (c) a restrained luxury palette (deep near-black or warm ivory ground, ONE metallic/jewel accent), no muddy mid-tones, strong value contrast; (d) generous whitespace, hairline 1px strokes, soft shadows, tasteful easing on any motion. It must look like a luxury interior-design brand, not a generic AI demo.",
+ "category": "Real Work",
"designTools": true,
- "created_at": "2026-07-25T09:20:17.286Z",
+ "created_at": "2026-07-25T09:31:21.588Z",
"winner": null,
"runs": [
{
@@ -17682,7 +17996,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.289Z"
+ "queued_at": "2026-07-25T09:31:21.592Z"
},
{
"model": "gemma3-12b",
@@ -17692,7 +18006,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.292Z"
+ "queued_at": "2026-07-25T09:31:21.595Z"
},
{
"model": "hermes3-8b",
@@ -17702,7 +18016,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.296Z"
+ "queued_at": "2026-07-25T09:31:21.599Z"
},
{
"model": "qwen25-7b",
@@ -17712,7 +18026,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.298Z"
+ "queued_at": "2026-07-25T09:31:21.602Z"
},
{
"model": "hf-qwen-coder-32b",
@@ -17722,47 +18036,47 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.301Z"
+ "queued_at": "2026-07-25T09:31:21.605Z"
},
{
"model": "claude-code",
- "status": "queued",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T09:31:21.624Z",
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.305Z"
+ "queued_at": "2026-07-25T09:31:21.608Z"
},
{
"model": "kimi",
- "status": "queued",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T09:31:21.631Z",
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.308Z"
+ "queued_at": "2026-07-25T09:31:21.611Z"
},
{
"model": "gpt",
- "status": "queued",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T09:31:21.637Z",
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.311Z"
+ "queued_at": "2026-07-25T09:31:21.615Z"
},
{
"model": "grok",
- "status": "queued",
+ "status": "running",
"error": null,
"seconds": null,
"cost": null,
- "started_at": null,
+ "started_at": "2026-07-25T09:31:21.644Z",
"finished_at": null,
- "queued_at": "2026-07-25T09:20:17.313Z"
+ "queued_at": "2026-07-25T09:31:21.620Z"
}
]
}
diff --git a/data/costlog.jsonl b/data/costlog.jsonl
index 88d77c8..fb08db2 100644
--- a/data/costlog.jsonl
+++ b/data/costlog.jsonl
@@ -243,3 +243,11 @@
{"ts":"2026-07-25T09:09:18.272Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2736,"output_tokens":10842,"cost_usd":0.156576}
{"ts":"2026-07-25T09:10:09.513Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":2734,"output_tokens":6898,"cost_usd":0.018885}
{"ts":"2026-07-25T09:10:25.469Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3465,"output_tokens":10840,"cost_usd":0.172995}
+{"ts":"2026-07-25T09:21:35.600Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2509,"output_tokens":12629,"cost_usd":0.181197}
+{"ts":"2026-07-25T09:22:27.854Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":2736,"output_tokens":7994,"cost_usd":0.021627}
+{"ts":"2026-07-25T09:22:40.611Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":2722,"output_tokens":9078,"cost_usd":0.131855}
+{"ts":"2026-07-25T09:23:03.509Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3218,"output_tokens":14405,"cost_usd":0.225729}
+{"ts":"2026-07-25T09:24:05.379Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":4792,"output_tokens":5976,"cost_usd":0.017815}
+{"ts":"2026-07-25T09:25:39.423Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3642,"output_tokens":9976,"cost_usd":0.160566}
+{"ts":"2026-07-25T09:25:43.855Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":4964,"output_tokens":6075,"cost_usd":0.018166}
+{"ts":"2026-07-25T09:26:41.815Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3223,"output_tokens":5757,"cost_usd":0.096024}
diff --git a/idea-run/.dw-brand-style-color-pointer b/idea-run/.dw-brand-style-color-pointer
index f599e28..b4de394 100644
--- a/idea-run/.dw-brand-style-color-pointer
+++ b/idea-run/.dw-brand-style-color-pointer
@@ -1 +1 @@
-10
+11
← fe43ebb night-loop: cycle 02:20 — judged=fb3e4f038fb6 · fired 3 →; F
·
back to Model Arena
·
auto-save: 2026-07-25T02:32:56 (8 files) — data/challenges.j 113f051 →