← back to Model Arena
night-loop: cycle 04:12 — judged=689983752ba8 · fired 2 →; FIRED idx=8/16 id=f8631f89ab43 title=Designer Wallcoverings — Brand Mood Board Maker; FIRED idx=9/16 id=131728b7aeb6 title=Designer Wallcoverings — Trending Color Reel
c5f0c7679702d6584eb4b4b17d7a58ffdedcfd7c · 2026-07-25 04:12:15 -0700 · Steve Abrams
Files touched
A data/artifacts/98e38ea3773f/hf-qwen-coder-32b.htmlA data/artifacts/98e38ea3773f/hf-qwen-coder-32b.pngA data/artifacts/a17a50ae57ef/claude-code.htmlA data/artifacts/a17a50ae57ef/claude-code.pngA data/artifacts/a17a50ae57ef/gemma3-12b.htmlA data/artifacts/a17a50ae57ef/gemma3-12b.pngA data/artifacts/a17a50ae57ef/gpt.htmlA data/artifacts/a17a50ae57ef/gpt.pngA data/artifacts/a17a50ae57ef/grok.htmlA data/artifacts/a17a50ae57ef/grok.pngA data/artifacts/a17a50ae57ef/hermes3-8b.htmlA data/artifacts/a17a50ae57ef/hermes3-8b.pngA data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.htmlA data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.pngA data/artifacts/a17a50ae57ef/kimi.htmlA data/artifacts/a17a50ae57ef/kimi.pngA data/artifacts/a17a50ae57ef/qwen3-14b.htmlA data/artifacts/a17a50ae57ef/qwen3-14b.pngM data/challenges.jsonM data/costlog.jsonlM idea-run/.dw-brand-style-color-pointer
Diff
commit c5f0c7679702d6584eb4b4b17d7a58ffdedcfd7c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 04:12:15 2026 -0700
night-loop: cycle 04:12 — judged=689983752ba8 · fired 2 →; FIRED idx=8/16 id=f8631f89ab43 title=Designer Wallcoverings — Brand Mood Board Maker; FIRED idx=9/16 id=131728b7aeb6 title=Designer Wallcoverings — Trending Color Reel
---
data/artifacts/98e38ea3773f/hf-qwen-coder-32b.html | 265 ++++
data/artifacts/98e38ea3773f/hf-qwen-coder-32b.png | Bin 0 -> 24918 bytes
data/artifacts/a17a50ae57ef/claude-code.html | 647 +++++++++
data/artifacts/a17a50ae57ef/claude-code.png | Bin 0 -> 84902 bytes
data/artifacts/a17a50ae57ef/gemma3-12b.html | 272 ++++
data/artifacts/a17a50ae57ef/gemma3-12b.png | Bin 0 -> 33303 bytes
data/artifacts/a17a50ae57ef/gpt.html | 1409 ++++++++++++++++++++
data/artifacts/a17a50ae57ef/gpt.png | Bin 0 -> 267886 bytes
data/artifacts/a17a50ae57ef/grok.html | 1291 ++++++++++++++++++
data/artifacts/a17a50ae57ef/grok.png | Bin 0 -> 38568 bytes
data/artifacts/a17a50ae57ef/hermes3-8b.html | 292 ++++
data/artifacts/a17a50ae57ef/hermes3-8b.png | Bin 0 -> 24976 bytes
data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.html | 226 ++++
data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.png | Bin 0 -> 17957 bytes
data/artifacts/a17a50ae57ef/kimi.html | 914 +++++++++++++
data/artifacts/a17a50ae57ef/kimi.png | Bin 0 -> 30090 bytes
data/artifacts/a17a50ae57ef/qwen3-14b.html | 360 +++++
data/artifacts/a17a50ae57ef/qwen3-14b.png | Bin 0 -> 25564 bytes
data/challenges.json | 470 ++++++-
data/costlog.jsonl | 3 +
idea-run/.dw-brand-style-color-pointer | 2 +-
21 files changed, 6110 insertions(+), 41 deletions(-)
diff --git a/data/artifacts/98e38ea3773f/hf-qwen-coder-32b.html b/data/artifacts/98e38ea3773f/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..65fa272
--- /dev/null
+++ b/data/artifacts/98e38ea3773f/hf-qwen-coder-32b.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Designer Wallcoverings</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent1: #b0472e;
+ --accent2: #2f4c39;
+ --line: 1px solid rgba(0,0,0,.05);
+ --shadow: 0 8px 24px rgba(0,0,0,.12);
+ --hover-shadow: 0 16px 48px rgba(0,0,0,.18);
+ --glow: 0 0 24px rgba(176,71,46,.35);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+ body {
+ margin: 0;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ color: var(--text);
+ background-color: var(--bg);
+ line-height: 1.5;
+ }
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 24px;
+ background-color: var(--surface);
+ box-shadow: var(--shadow);
+ z-index: 1000;
+ }
+ .wordmark {
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ margin: 0;
+ }
+ main {
+ padding-top: 128px;
+ padding-bottom: 96px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .palette-builder {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ width: 90%;
+ max-width: 800px;
+ padding: 32px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .palette-builder h2 {
+ font-size: 48px;
+ margin-bottom: 24px;
+ }
+ .color-wheel {
+ width: 100%;
+ max-width: 300px;
+ height: 300px;
+ border-radius: 50%;
+ background-color: conic-gradient(var(--accent1) 0% 90deg, var(--accent2) 90deg 180deg, var(--muted) 180deg 270deg, var(--text) 270deg 360deg);
+ margin-bottom: 32px;
+ }
+ .color-options {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ max-width: 400px;
+ margin-bottom: 24px;
+ }
+ .color-option {
+ font-size: 12px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: color .3s var(--ease);
+ }
+ .swatch-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+ gap: 24px;
+ width: 100%;
+ max-width: 560px;
+ }
+ .swatch {
+ width: 80px;
+ height: 80px;
+ border-radius: 4px;
+ box-shadow: var(--line);
+ cursor: pointer;
+ transition: transform .3s var(--ease), box-shadow .3s var(--ease);
+ }
+ .swatch:hover {
+ transform: scale(1.05);
+ box-shadow: var(--hover-shadow);
+ }
+ .room-preview {
+ width: 100%;
+ height: 64px;
+ background-color: var(--surface);
+ border-radius: 8px;
+ margin-top: 32px;
+ display: flex;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ }
+ .room-preview div {
+ width: 100%;
+ height: 100%;
+ }
+ .controls {
+ margin-top: 48px;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 560px;
+ }
+ button {
+ background-color: var(--surface);
+ border: none;
+ font-size: 12px;
+ letter-spacing: .15em;
+ text-transform: uppercase;
+ padding: 8px 16px;
+ cursor: pointer;
+ box-shadow: var(--line);
+ transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
+ }
+ button:hover {
+ background-color: rgba(0,0,0,.05);
+ box-shadow: var(--hover-shadow);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1 class="wordmark">DESIGNER WALLCOVERINGS</h1>
+ </header>
+ <main>
+ <div class="palette-builder">
+ <h2>Choose Your Palette</h2>
+ <div class="color-wheel"></div>
+ <div class="color-options">
+ <span class="color-option" onclick="setPalette('analogous')">Analogous</span>
+ <span class="color-option" onclick="setPalette('complementary')">Complementary</span>
+ <span class="color-option" onclick="setPalette('triadic')">Triadic</span>
+ </div>
+ <div class="swatch-grid">
+ <div class="swatch" style="background-color: #f5f2ea;" data-name="Alabaster"></div>
+ <div class="swatch" style="background-color: #1c1a17;" data-name="Greige"></div>
+ <div class="swatch" style="background-color: #b0472e;" data-name="Celadon"></div>
+ <div class="swatch" style="background-color: #2f4c39;" data-name="Ink"></div>
+ <div class="swatch" style="background-color: #9b948a;" data-name="Brass"></div>
+ </div>
+ <div class="room-preview">
+ <div style="background-color: #f5f2ea;"></div>
+ <div style="background-color: #1c1a17;"></div>
+ <div style="background-color: #b0472e;"></div>
+ <div style="background-color: #2f4c39;"></div>
+ <div style="background-color: #9b948a;"></div>
+ </div>
+ <div class="controls">
+ <button onclick="copyHex()">Copy HEX</button>
+ <button onclick="exportCard()">Export Card</button>
+ </div>
+ </div>
+ </main>
+ <script>
+ const swatches = document.querySelectorAll('.swatch');
+ const roomPreview = document.querySelector('.room-preview');
+
+ function setPalette(type) {
+ let colors;
+ switch (type) {
+ case 'analogous':
+ colors = ['#f5f2ea', '#1c1a17', '#b0472e', '#2f4c39', '#9b948a'];
+ break;
+ case 'complementary':
+ colors = ['#b0472e', '#2f4c39', '#f5f2ea', '#1c1a17', '#9b948a'];
+ break;
+ case 'triadic':
+ colors = ['#f5f2ea', '#b0472e', '#2f4c39', '#9b948a', '#1c1a17'];
+ break;
+ default:
+ colors = ['#f5f2ea', '#1c1a17', '#b0472e', '#2f4c39', '#9b948a'];
+ }
+ swatches.forEach((swatch, index) => {
+ swatch.style.backgroundColor = colors[index];
+ });
+ updateRoomPreview();
+ }
+
+ function updateRoomPreview() {
+ roomPreview.innerHTML = '';
+ swatches.forEach(swatch => {
+ const previewDiv = document.createElement('div');
+ previewDiv.style.backgroundColor = swatch.style.backgroundColor;
+ roomPreview.appendChild(previewDiv);
+ });
+ }
+
+ function copyHex() {
+ let hexColors = [];
+ swatches.forEach(swatch => {
+ hexColors.push(swatch.style.backgroundColor.match(/\d+/g).map(byte => ('0' + parseInt(byte, 10).toString(16)).slice(-2)).join(''));
+ });
+ navigator.clipboard.writeText(hexColors.join('\n')).then(() => {
+ alert('HEX codes copied to clipboard!');
+ }).catch(err => {
+ console.error('Failed to copy: ', err);
+ });
+ }
+
+ function exportCard() {
+ const canvas = document.createElement('canvas');
+ canvas.width = 1080;
+ canvas.height = 1080;
+ const ctx = canvas.getContext('2d');
+
+ // Background
+ ctx.fillStyle = '#faf8f4';
+ ctx.fillRect(0, 0, 1080, 1080);
+
+ // Swatches
+ swatches.forEach((swatch, index) => {
+ ctx.fillStyle = swatch.style.backgroundColor;
+ ctx.fillRect(120 + (index * 160), 300, 100, 100);
+ });
+
+ // Room Preview
+ roomPreview.children.forEach((preview, index) => {
+ ctx.fillStyle = preview.style.backgroundColor;
+ ctx.fillRect(120 + (index * 160), 500, 100, 100);
+ });
+
+ // Wordmark
+ ctx.font = 'bold 72px "Playfair Display", Georgia, serif';
+ ctx.fillStyle = '#1c1a17';
+ ctx.fillText('DESIGNER WALLCOVERINGS', 80, 150);
+
+ // Save as image
+ const link = document.createElement('a');
+ link.href = canvas.toDataURL();
+ link.download = 'wallcovering-palette.png';
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+
+ setPalette('analogous');
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/98e38ea3773f/hf-qwen-coder-32b.png b/data/artifacts/98e38ea3773f/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..539874a
Binary files /dev/null and b/data/artifacts/98e38ea3773f/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/a17a50ae57ef/claude-code.html b/data/artifacts/a17a50ae57ef/claude-code.html
new file mode 100644
index 0000000..43fad6e
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/claude-code.html
@@ -0,0 +1,647 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Which Design Era? — Designer Wallcoverings</title>
+<style>
+ :root{
+ --bg:#0d0d0f;
+ --surface:#17171c;
+ --surface-2:#1e1e24;
+ --ink:#f5f2ea;
+ --muted:#8a8578;
+ --accent:#c9a961;
+ --accent-deep:#7d6a45;
+ --line:rgba(201,169,97,.22);
+ --hair:rgba(245,242,234,.08);
+ --shadow:0 8px 24px rgba(0,0,0,.35);
+ --shadow-hover:0 16px 48px rgba(0,0,0,.5);
+ --glow:0 0 28px rgba(201,169,97,.30);
+ --ease:cubic-bezier(.22,1,.36,1);
+ --serif:'Cormorant Garamond','Playfair Display','EB Garamond',Didot,'Bodoni MT',Georgia,serif;
+ --sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
+ }
+
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{height:100%}
+ body{
+ background:var(--bg);
+ color:var(--ink);
+ font-family:var(--sans);
+ font-size:16px;
+ line-height:1.55;
+ -webkit-font-smoothing:antialiased;
+ min-height:100%;
+ background-image:
+ radial-gradient(1200px 600px at 80% -10%,rgba(201,169,97,.07),transparent 60%),
+ radial-gradient(900px 500px at 0% 110%,rgba(125,106,69,.06),transparent 55%);
+ }
+
+ /* ---------- TOP BAR ---------- */
+ .topbar{
+ position:fixed;top:0;left:0;right:0;z-index:50;
+ display:flex;align-items:center;justify-content:space-between;
+ padding:18px 32px;
+ background:rgba(13,13,15,.82);
+ backdrop-filter:blur(14px);
+ border-bottom:1px solid var(--hair);
+ }
+ .wordmark{
+ font-family:var(--serif);
+ font-weight:600;
+ text-transform:uppercase;
+ letter-spacing:.18em;
+ line-height:1.05;
+ color:var(--ink);
+ font-size:19px;
+ white-space:nowrap;
+ max-width:280px;
+ }
+ .wordmark .amp{color:var(--accent);display:block;font-size:11px;letter-spacing:.34em;font-weight:500;color:var(--muted);margin-top:2px}
+ .topbar .scoreboard{
+ display:flex;gap:22px;align-items:center;
+ font-family:var(--sans);
+ }
+ .stat{ text-align:right; }
+ .stat .k{
+ display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
+ }
+ .stat .v{
+ display:block;font-size:15px;letter-spacing:.08em;color:var(--ink);font-variant-numeric:tabular-nums;
+ }
+ .stat .v.gold{color:var(--accent)}
+
+ /* ---------- LAYOUT ---------- */
+ .wrap{
+ max-width:1080px;margin:0 auto;
+ padding:118px 24px 80px;
+ }
+ .lead{
+ text-align:center;margin-bottom:32px;
+ animation:fadeUp .7s var(--ease) both;
+ }
+ .kicker{
+ font-family:var(--sans);
+ font-size:11px;letter-spacing:.30em;text-transform:uppercase;color:var(--accent);
+ margin-bottom:14px;
+ }
+ h1{
+ font-family:var(--serif);
+ font-weight:600;
+ font-size:44px;
+ line-height:1.08;
+ letter-spacing:.01em;
+ }
+ .subtitle{
+ color:var(--muted);
+ font-size:16px;
+ margin-top:12px;
+ font-style:italic;
+ font-family:var(--serif);
+ font-size:21px;
+ }
+ .roundline{
+ display:flex;justify-content:center;gap:8px;margin-top:22px;
+ }
+ .pip{
+ width:26px;height:3px;border-radius:2px;background:var(--hair);
+ transition:background .35s var(--ease);
+ }
+ .pip.done{background:var(--accent-deep)}
+ .pip.right{background:var(--accent)}
+ .pip.wrong{background:#6e3b34}
+ .pip.current{background:var(--ink)}
+
+ /* ---------- VIGNETTE STAGE ---------- */
+ .stage{
+ margin:34px auto 30px;
+ max-width:640px;
+ aspect-ratio:16/10;
+ border-radius:14px;
+ border:1px solid var(--line);
+ box-shadow:var(--shadow);
+ overflow:hidden;
+ position:relative;
+ background:var(--surface);
+ }
+ .vignette{position:absolute;inset:0;animation:fadeUp .8s var(--ease) both}
+
+ /* Shared room scaffold */
+ .room{position:absolute;inset:0}
+ .floor{position:absolute;left:0;right:0;bottom:0;height:26%}
+ .lamp-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5}
+
+ /* ===== VICTORIAN ===== */
+ .v-victorian .wall{
+ position:absolute;inset:0;
+ background:#3a2230;
+ background-image:
+ radial-gradient(circle at 25% 25%,rgba(176,132,74,.55) 0 6px,transparent 7px),
+ radial-gradient(circle at 75% 75%,rgba(176,132,74,.55) 0 6px,transparent 7px),
+ radial-gradient(circle at 25% 75%,rgba(120,42,63,.9) 0 14px,transparent 15px),
+ radial-gradient(circle at 75% 25%,rgba(120,42,63,.9) 0 14px,transparent 15px),
+ radial-gradient(circle at 50% 50%,rgba(196,150,86,.35) 0 22px,transparent 24px);
+ background-size:120px 120px;
+ background-position:0 0;
+ }
+ .v-victorian .floor{background:linear-gradient(#4a3326,#2c1d15);border-top:3px solid #6b4a30}
+ .v-victorian .wainscot{position:absolute;left:0;right:0;bottom:26%;height:16%;background:linear-gradient(#5a3a28,#3d2618);border-top:2px solid #7d5636;border-bottom:2px solid #23140d}
+ .v-victorian .chair{
+ position:absolute;bottom:26%;left:50%;transform:translateX(-50%);
+ width:150px;height:150px;
+ }
+ .v-victorian .chair .back{position:absolute;left:20px;right:20px;top:0;height:96px;border-radius:60px 60px 12px 12px;background:linear-gradient(#7a1f38,#571026);box-shadow:inset 0 6px 18px rgba(0,0,0,.4),0 0 0 4px #40202a}
+ .v-victorian .chair .seat{position:absolute;left:8px;right:8px;bottom:24px;height:40px;border-radius:10px;background:linear-gradient(#8a2743,#611330)}
+ .v-victorian .chair .leg{position:absolute;bottom:0;width:8px;height:26px;background:#3a2016;border-radius:0 0 4px 4px}
+ .v-victorian .chair .leg.l{left:24px}.v-victorian .chair .leg.r{right:24px}
+ .v-victorian .frame{position:absolute;top:16%;width:64px;height:82px;border:6px solid #b08a44;border-radius:4px;background:linear-gradient(135deg,#5a3550,#39203a);box-shadow:0 0 0 2px #2a1522, var(--shadow)}
+ .v-victorian .frame.f1{left:14%}.v-victorian .frame.f2{right:14%}
+ .v-victorian .sconce{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:14px;height:44px;background:linear-gradient(#c9a961,#7d6a45);border-radius:7px}
+ .v-victorian .sconce::after{content:"";position:absolute;top:-14px;left:-9px;width:32px;height:24px;border-radius:50%;background:radial-gradient(#ffe9b0,#e0a458);box-shadow:0 0 26px rgba(224,164,88,.7)}
+
+ /* ===== ART DECO ===== */
+ .v-deco .wall{position:absolute;inset:0;background:#0f2a2e}
+ .v-deco .sunburst{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;height:120%;
+ background:conic-gradient(from 90deg,
+ #123a3f 0 12deg,#0f2a2e 12deg 24deg,#123a3f 24deg 36deg,#0f2a2e 36deg 48deg,
+ #123a3f 48deg 60deg,#0f2a2e 60deg 72deg,#123a3f 72deg 84deg,#0f2a2e 84deg 96deg,
+ #123a3f 96deg 108deg,#0f2a2e 108deg 120deg,#123a3f 120deg 132deg,#0f2a2e 132deg 144deg,
+ #123a3f 144deg 156deg,#0f2a2e 156deg 168deg,#123a3f 168deg 180deg);
+ border-radius:50%;opacity:.85}
+ .v-deco .chevrons{position:absolute;left:0;right:0;bottom:26%;height:14%;
+ background:repeating-linear-gradient(135deg,#c9a961 0 10px,#0f2a2e 10px 20px,#7d6a45 20px 30px,#0f2a2e 30px 40px);opacity:.9;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
+ .v-deco .floor{background:linear-gradient(#101a1a,#060c0c);border-top:3px solid var(--accent)}
+ .v-deco .fan{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:180px;height:90px;
+ background:conic-gradient(from 180deg at 50% 100%,#c9a961 0 15deg,transparent 15deg 30deg,#c9a961 30deg 45deg,transparent 45deg 60deg,#c9a961 60deg 75deg,transparent 75deg 90deg,#c9a961 90deg 105deg,transparent 105deg 120deg,#c9a961 120deg 135deg,transparent 135deg 150deg,#c9a961 150deg 165deg,transparent 165deg 180deg);
+ -webkit-mask:radial-gradient(circle at 50% 100%,transparent 0 22px,#000 23px);mask:radial-gradient(circle at 50% 100%,transparent 0 22px,#000 23px)}
+ .v-deco .console{position:absolute;bottom:26%;left:50%;transform:translateX(-50%);width:200px;height:70px}
+ .v-deco .console .top{position:absolute;top:0;left:0;right:0;height:14px;background:linear-gradient(#e8cd8a,#c9a961);border-radius:4px}
+ .v-deco .console .body{position:absolute;top:14px;left:20px;right:20px;bottom:0;background:linear-gradient(#1a1010,#0c0808);border-left:4px solid #7d6a45;border-right:4px solid #7d6a45}
+ .v-deco .console .stripe{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:6px;bottom:6px;background:var(--accent)}
+ .v-deco .vase{position:absolute;bottom:calc(26% + 70px);left:50%;transform:translateX(-50%);width:26px;height:52px;background:linear-gradient(#0e6b6b,#0a3a3a);border-radius:13px 13px 6px 6px;box-shadow:0 0 0 2px var(--accent)}
+
+ /* ===== MID-CENTURY MODERN ===== */
+ .v-mcm .wall{position:absolute;inset:0;background:linear-gradient(#c78b52,#a9713f)}
+ .v-mcm .accentwall{position:absolute;top:0;bottom:26%;left:0;width:44%;background:#2f6b5f;
+ background-image:
+ radial-gradient(circle at 50% 30%,#e0a458 0 8px,transparent 9px),
+ linear-gradient(#2f6b5f,#2f6b5f);
+ background-size:60px 90px}
+ .v-mcm .starburst{position:absolute;top:16%;right:16%;width:80px;height:80px}
+ .v-mcm .starburst i{position:absolute;top:50%;left:50%;width:38px;height:2px;background:#f0d9a0;transform-origin:0 50%}
+ .v-mcm .starburst i::after{content:"";position:absolute;right:-4px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
+ .v-mcm .floor{background:linear-gradient(#7a4a2a,#3d2413);border-top:3px solid #93613a}
+ .v-mcm .sofa{position:absolute;bottom:26%;left:50%;transform:translateX(-50%);width:260px;height:78px}
+ .v-mcm .sofa .cush{position:absolute;top:10px;left:0;right:0;height:40px;background:linear-gradient(#d98c3a,#b96f26);border-radius:8px}
+ .v-mcm .sofa .base{position:absolute;bottom:12px;left:8px;right:8px;height:22px;background:#c47e30;border-radius:4px}
+ .v-mcm .sofa .leg{position:absolute;bottom:-2px;width:5px;height:16px;background:#2b1a0e;transform:rotate(12deg)}
+ .v-mcm .sofa .leg.l{left:24px}.v-mcm .sofa .leg.r{right:24px;transform:rotate(-12deg)}
+ .v-mcm .plant{position:absolute;bottom:26%;right:10%;width:60px;height:120px}
+ .v-mcm .plant .pot{position:absolute;bottom:0;left:14px;width:32px;height:30px;background:#7d6a45;border-radius:4px 4px 8px 8px}
+ .v-mcm .plant .leaf{position:absolute;bottom:26px;left:50%;width:10px;height:70px;background:#2f6b5f;border-radius:50% 50% 0 0;transform-origin:bottom}
+ .v-mcm .plant .leaf:nth-child(2){transform:rotate(-26deg)}
+ .v-mcm .plant .leaf:nth-child(3){transform:rotate(0deg)}
+ .v-mcm .plant .leaf:nth-child(4){transform:rotate(26deg)}
+
+ /* ===== GRANDMILLENNIAL ===== */
+ .v-grand .wall{position:absolute;inset:0;background:#eef1e6;
+ background-image:
+ radial-gradient(ellipse 8px 14px at 20% 20%,#7fa0c4 48%,transparent 50%),
+ radial-gradient(ellipse 8px 14px at 20% 20%,#c98aa8 0,transparent 0),
+ radial-gradient(circle at 20% 46%,#8ab08a 0 4px,transparent 5px),
+ radial-gradient(ellipse 7px 12px at 60% 60%,#c98aa8 48%,transparent 50%),
+ radial-gradient(circle at 60% 82%,#8ab08a 0 4px,transparent 5px),
+ radial-gradient(ellipse 7px 12px at 88% 30%,#7fa0c4 48%,transparent 50%);
+ background-size:110px 110px}
+ .v-grand .floor{background:linear-gradient(#e3ddcf,#cfc6b2);border-top:3px solid #b7ab90}
+ .v-grand .rug{position:absolute;left:14%;right:14%;bottom:5%;height:16%;background:
+ repeating-linear-gradient(45deg,#c98aa8 0 8px,#eef1e6 8px 16px);border:4px solid #7fa0c4;border-radius:6px;opacity:.85}
+ .v-grand .skirt{position:absolute;bottom:26%;left:50%;transform:translateX(-50%);width:150px;height:110px}
+ .v-grand .skirt .table{position:absolute;top:0;left:8px;right:8px;height:8px;background:#8ab08a;border-radius:4px}
+ .v-grand .skirt .cloth{position:absolute;top:6px;left:0;right:0;bottom:0;background:
+ repeating-linear-gradient(#f3d8e2 0 14px,#e7bfd0 14px 20px);
+ border-radius:0 0 8px 8px;clip-path:polygon(0 0,100% 0,100% 86%,92% 100%,84% 86%,76% 100%,68% 86%,60% 100%,52% 86%,44% 100%,36% 86%,28% 100%,20% 86%,12% 100%,4% 86%,0 100%)}
+ .v-grand .lamp{position:absolute;bottom:calc(26% + 110px);left:50%;transform:translateX(-50%);width:64px;height:60px}
+ .v-grand .lamp .shade{position:absolute;top:0;left:6px;right:6px;height:34px;background:linear-gradient(#f6e7b8,#e9cf88);border-radius:8px 8px 2px 2px;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}
+ .v-grand .lamp .base{position:absolute;bottom:0;left:28px;width:8px;height:26px;background:#c98aa8;border-radius:4px}
+ .v-grand .plate{position:absolute;top:14%;width:56px;height:56px;border-radius:50%;background:radial-gradient(#fff,#eef1e6);border:5px solid #7fa0c4;box-shadow:var(--shadow)}
+ .v-grand .plate::after{content:"";position:absolute;inset:10px;border-radius:50%;border:2px solid #c98aa8}
+ .v-grand .plate.p1{left:16%}.v-grand .plate.p2{right:16%}
+ .v-grand .plate.p3{left:50%;transform:translateX(-50%);top:8%}
+
+ .stage-empty{
+ display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);
+ font-family:var(--serif);font-style:italic;font-size:22px;
+ }
+
+ /* ---------- CHOICES ---------- */
+ .choices{
+ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
+ gap:16px;max-width:760px;margin:0 auto;
+ }
+ .choice{
+ appearance:none;cursor:pointer;
+ background:var(--surface);
+ border:1px solid var(--hair);
+ border-radius:14px;
+ padding:20px 18px;
+ text-align:left;
+ color:var(--ink);
+ transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
+ box-shadow:var(--shadow);
+ }
+ .choice:hover:not(:disabled){transform:translateY(-3px);border-color:var(--line);box-shadow:var(--shadow-hover)}
+ .choice:disabled{cursor:default}
+ .choice .era{
+ font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.01em;display:block;
+ }
+ .choice .yrs{
+ font-family:var(--sans);font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:var(--muted);margin-top:4px;display:block;
+ }
+ .choice.correct{background:linear-gradient(#1f2416,#171c11);border-color:var(--accent);box-shadow:var(--glow)}
+ .choice.correct .era{color:var(--accent)}
+ .choice.wrong{background:#22161a;border-color:#6e3b34}
+ .choice.wrong .era{color:#c98a82}
+ .choice.dim{opacity:.4}
+
+ /* ---------- REVEAL ---------- */
+ .reveal{
+ max-width:760px;margin:26px auto 0;
+ background:var(--surface);
+ border:1px solid var(--line);
+ border-radius:14px;
+ padding:26px 28px;
+ box-shadow:var(--shadow);
+ animation:fadeUp .5s var(--ease) both;
+ }
+ .reveal .verdict{
+ font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px;
+ }
+ .reveal .verdict.hit{color:var(--accent)}
+ .reveal .verdict.miss{color:#c98a82}
+ .reveal h3{
+ font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:4px;
+ }
+ .reveal .era-years{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
+ .reveal .fact{color:var(--ink);opacity:.9;font-size:16px;line-height:1.6}
+ .reveal .fact b{color:var(--accent);font-weight:600}
+ .btn{
+ appearance:none;cursor:pointer;margin-top:20px;
+ background:transparent;border:1px solid var(--accent);
+ color:var(--accent);
+ font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
+ padding:13px 30px;border-radius:40px;
+ transition:background .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease);
+ }
+ .btn:hover{background:var(--accent);color:#141210;box-shadow:var(--glow)}
+ .btn.solid{background:var(--accent);color:#141210}
+ .btn.solid:hover{box-shadow:var(--glow)}
+
+ /* ---------- OVERLAY ---------- */
+ .overlay{
+ position:fixed;inset:0;z-index:100;display:none;
+ align-items:center;justify-content:center;padding:24px;
+ background:rgba(9,9,11,.86);backdrop-filter:blur(10px);
+ }
+ .overlay.show{display:flex;animation:fadeIn .4s var(--ease) both}
+ .card{
+ max-width:520px;width:100%;
+ background:linear-gradient(180deg,var(--surface-2),var(--surface));
+ border:1px solid var(--line);
+ border-radius:16px;
+ padding:46px 40px;
+ text-align:center;
+ box-shadow:var(--shadow-hover),var(--glow);
+ animation:fadeUp .6s var(--ease) both;
+ }
+ .card .crown{font-family:var(--sans);font-size:11px;letter-spacing:.30em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
+ .card h2{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1.1;margin-bottom:8px}
+ .card .score-big{font-family:var(--serif);font-size:72px;line-height:1;color:var(--accent);margin:18px 0 4px;font-variant-numeric:tabular-nums}
+ .card .score-sub{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
+ .card .grade{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);opacity:.85;margin:16px 0 6px}
+ .card .best{font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--muted);margin-top:6px}
+ .card .best b{color:var(--accent)}
+ .card .newbest{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#141210;background:var(--accent);padding:6px 16px;border-radius:30px}
+
+ @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
+ @keyframes fadeIn{from{opacity:0}to{opacity:1}}
+
+ @media(max-width:600px){
+ h1{font-size:32px}
+ .topbar{padding:14px 18px}
+ .wordmark{font-size:15px;white-space:normal;line-height:1.15}
+ .topbar .scoreboard{gap:14px}
+ .wrap{padding:132px 16px 60px}
+ .card{padding:36px 24px}
+ .card h2{font-size:30px}
+ .card .score-big{font-size:58px}
+ }
+</style>
+</head>
+<body>
+ <header class="topbar">
+ <div class="wordmark">Designer Wallcoverings<span class="amp">Interiors · Est. Heritage</span></div>
+ <div class="scoreboard">
+ <div class="stat"><span class="k">Round</span><span class="v" id="roundStat">1 / 8</span></div>
+ <div class="stat"><span class="k">Score</span><span class="v gold" id="scoreStat">0</span></div>
+ <div class="stat"><span class="k">Best</span><span class="v" id="bestStat">0</span></div>
+ </div>
+ </header>
+
+ <main class="wrap">
+ <div class="lead">
+ <div class="kicker">A Guessing Game of Interiors</div>
+ <h1>Which Design Era?</h1>
+ <div class="subtitle">Read the room. Name the age it was born in.</div>
+ <div class="roundline" id="roundline"></div>
+ </div>
+
+ <div class="stage" id="stage">
+ <div class="stage-empty">Setting the scene…</div>
+ </div>
+
+ <div class="choices" id="choices"></div>
+
+ <div id="revealSlot"></div>
+ </main>
+
+ <div class="overlay" id="overlay">
+ <div class="card">
+ <div class="crown" id="crown">The Salon Closes</div>
+ <h2 id="endTitle">A Discerning Eye</h2>
+ <div class="score-big" id="endScore">0</div>
+ <div class="score-sub">Rooms Correctly Placed of 8</div>
+ <div class="grade" id="endGrade"></div>
+ <div class="best" id="endBest"></div>
+ <div id="newbestSlot"></div>
+ <div><button class="btn solid" id="restartBtn">Play Again</button></div>
+ </div>
+ </div>
+
+<script>
+(function(){
+ "use strict";
+
+ const ERAS = [
+ {
+ key:"victorian",
+ name:"Victorian",
+ years:"1837 – 1901",
+ fact:"Victorian interiors prized <b>abundance</b> — layered damasks, deep jewel tones, framed portraits and dark carved wood. Wallpaper became a mass luxury after the 1840s, and a well-dressed parlour was never a bare surface in sight."
+ },
+ {
+ key:"deco",
+ name:"Art Deco",
+ years:"1920s – 1930s",
+ fact:"Art Deco worshipped <b>geometry and glamour</b> — sunbursts, chevrons, lacquer and gilded metal. Born at the 1925 Paris Exposition, it turned the machine age into pure ornament: symmetry, jade green, and gold everywhere."
+ },
+ {
+ key:"mcm",
+ name:"Mid-Century Modern",
+ years:"1945 – 1969",
+ fact:"Mid-Century Modern chased <b>clean lines and optimism</b> — teak legs, atomic starbursts, tangerine and avocado. Form followed function, furniture floated on tapered legs, and a single bold accent wall did the talking."
+ },
+ {
+ key:"grand",
+ name:"Grandmillennial",
+ years:"2010s – Today",
+ fact:"Grandmillennial style is <b>'granny chic' reborn</b> — chintz florals, skirted tables, ruffles, scalloped edges and displayed china. A 2019 revival, it layers heirloom charm with a fresh, collected-over-time confidence."
+ }
+ ];
+
+ const TOTAL = 8;
+ const BEST_KEY = "dw_which_era_best_v1";
+
+ const stageEl = document.getElementById("stage");
+ const choicesEl = document.getElementById("choices");
+ const revealSlot= document.getElementById("revealSlot");
+ const roundStat = document.getElementById("roundStat");
+ const scoreStat = document.getElementById("scoreStat");
+ const bestStat = document.getElementById("bestStat");
+ const roundline = document.getElementById("roundline");
+ const overlay = document.getElementById("overlay");
+
+ let sequence = [];
+ let round = 0; // 0-indexed
+ let score = 0;
+ let locked = false;
+ let results = []; // per-round: 'right'|'wrong'
+
+ function getBest(){
+ try{ const v = parseInt(localStorage.getItem(BEST_KEY),10); return isNaN(v)?0:v; }
+ catch(e){ return 0; }
+ }
+ function setBest(v){
+ try{ localStorage.setItem(BEST_KEY, String(v)); }catch(e){}
+ }
+
+ // Build a balanced-ish random sequence of era indexes
+ function buildSequence(){
+ const pool = [];
+ // ensure each era appears at least once, then fill randomly, avoid immediate repeats
+ for(let i=0;i<ERAS.length;i++) pool.push(i);
+ while(pool.length<TOTAL) pool.push(Math.floor(Math.random()*ERAS.length));
+ // shuffle
+ for(let i=pool.length-1;i>0;i--){
+ const j=Math.floor(Math.random()*(i+1));
+ [pool[i],pool[j]]=[pool[j],pool[i]];
+ }
+ // reduce adjacent duplicates
+ for(let i=1;i<pool.length;i++){
+ if(pool[i]===pool[i-1]){
+ for(let k=i+1;k<pool.length;k++){
+ if(pool[k]!==pool[i-1]){ [pool[i],pool[k]]=[pool[k],pool[i]]; break; }
+ }
+ }
+ }
+ return pool.slice(0,TOTAL);
+ }
+
+ function vignetteHTML(key){
+ switch(key){
+ case "victorian":
+ return `<div class="vignette v-victorian"><div class="room">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="sconce"></div>
+ <div class="frame f1"></div>
+ <div class="frame f2"></div>
+ <div class="floor"></div>
+ <div class="chair"><div class="back"></div><div class="seat"></div><div class="leg l"></div><div class="leg r"></div></div>
+ </div></div>`;
+ case "deco":
+ return `<div class="vignette v-deco"><div class="room">
+ <div class="wall"></div>
+ <div class="sunburst"></div>
+ <div class="fan"></div>
+ <div class="chevrons"></div>
+ <div class="floor"></div>
+ <div class="vase"></div>
+ <div class="console"><div class="top"></div><div class="body"></div><div class="stripe"></div></div>
+ </div></div>`;
+ case "mcm":
+ return `<div class="vignette v-mcm"><div class="room">
+ <div class="wall"></div>
+ <div class="accentwall"></div>
+ <div class="starburst" id="sb"></div>
+ <div class="floor"></div>
+ <div class="plant"><div class="pot"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div><div class="leaf"></div></div>
+ <div class="sofa"><div class="cush"></div><div class="base"></div><div class="leg l"></div><div class="leg r"></div></div>
+ </div></div>`;
+ case "grand":
+ return `<div class="vignette v-grand"><div class="room">
+ <div class="wall"></div>
+ <div class="plate p3"></div>
+ <div class="plate p1"></div>
+ <div class="plate p2"></div>
+ <div class="floor"></div>
+ <div class="rug"></div>
+ <div class="lamp"><div class="shade"></div><div class="base"></div></div>
+ <div class="skirt"><div class="table"></div><div class="cloth"></div></div>
+ </div></div>`;
+ }
+ return "";
+ }
+
+ function renderStarburst(){
+ const sb = document.getElementById("sb");
+ if(!sb) return;
+ for(let a=0;a<12;a++){
+ const i=document.createElement("i");
+ i.style.transform = "rotate("+(a*30)+"deg)";
+ sb.appendChild(i);
+ }
+ }
+
+ function renderRoundline(){
+ roundline.innerHTML="";
+ for(let i=0;i<TOTAL;i++){
+ const p=document.createElement("span");
+ p.className="pip";
+ if(i<round){ p.className += " " + (results[i]==="right"?"right":"wrong"); }
+ else if(i===round){ p.className+=" current"; }
+ roundline.appendChild(p);
+ }
+ }
+
+ function updateHUD(){
+ roundStat.textContent = (round+1)+" / "+TOTAL;
+ scoreStat.textContent = score;
+ bestStat.textContent = getBest();
+ }
+
+ function shuffledChoices(){
+ const idx = ERAS.map((_,i)=>i);
+ for(let i=idx.length-1;i>0;i--){
+ const j=Math.floor(Math.random()*(i+1));
+ [idx[i],idx[j]]=[idx[j],idx[i]];
+ }
+ return idx;
+ }
+
+ function loadRound(){
+ locked=false;
+ revealSlot.innerHTML="";
+ const eraIdx = sequence[round];
+ const era = ERAS[eraIdx];
+
+ stageEl.innerHTML = vignetteHTML(era.key);
+ if(era.key==="mcm") renderStarburst();
+
+ choicesEl.innerHTML="";
+ shuffledChoices().forEach(function(ci){
+ const e = ERAS[ci];
+ const btn=document.createElement("button");
+ btn.className="choice";
+ btn.setAttribute("aria-label","Guess "+e.name);
+ btn.innerHTML = '<span class="era">'+e.name+'</span><span class="yrs">'+e.years+'</span>';
+ btn.addEventListener("click", function(){ guess(ci, eraIdx, btn); });
+ choicesEl.appendChild(btn);
+ });
+
+ renderRoundline();
+ updateHUD();
+ }
+
+ function guess(chosenIdx, correctIdx, btnEl){
+ if(locked) return;
+ locked=true;
+ const correct = chosenIdx===correctIdx;
+ if(correct){ score++; results[round]="right"; }
+ else{ results[round]="wrong"; }
+
+ const btns = Array.from(choicesEl.children);
+ btns.forEach(function(b){
+ b.disabled=true;
+ const label = b.querySelector(".era").textContent;
+ if(label===ERAS[correctIdx].name){ b.classList.add("correct"); }
+ else if(b===btnEl){ b.classList.add("wrong"); }
+ else{ b.classList.add("dim"); }
+ });
+
+ renderRoundline();
+ updateHUD();
+ showReveal(correct, correctIdx);
+ }
+
+ function showReveal(correct, correctIdx){
+ const era = ERAS[correctIdx];
+ const last = round===TOTAL-1;
+ const div=document.createElement("div");
+ div.className="reveal";
+ div.innerHTML =
+ '<div class="verdict '+(correct?'hit':'miss')+'">'+(correct?'Correctly Placed':'Not Quite')+'</div>'+
+ '<h3>'+era.name+'</h3>'+
+ '<div class="era-years">'+era.years+'</div>'+
+ '<div class="fact">'+era.fact+'</div>'+
+ '<button class="btn" id="nextBtn">'+(last?'See Your Result':'Next Room')+'</button>';
+ revealSlot.appendChild(div);
+ div.scrollIntoView({behavior:"smooth", block:"nearest"});
+ document.getElementById("nextBtn").addEventListener("click", function(){
+ if(last){ endGame(); }
+ else{ round++; loadRound(); window.scrollTo({top:0,behavior:"smooth"}); }
+ });
+ }
+
+ function gradeFor(s){
+ if(s===8) return "Impeccable — a curator's instinct.";
+ if(s>=6) return "A refined and knowing eye.";
+ if(s>=4) return "A promising sense of period.";
+ if(s>=2) return "Room to study the archives.";
+ return "Every collector begins somewhere.";
+ }
+
+ function endGame(){
+ const prevBest = getBest();
+ const isNewBest = score>prevBest;
+ if(isNewBest) setBest(score);
+
+ document.getElementById("endTitle").textContent =
+ score===8 ? "A Flawless Eye" : (score>=5 ? "A Discerning Eye" : "An Eye in Training");
+ document.getElementById("endScore").textContent = score;
+ document.getElementById("endGrade").textContent = gradeFor(score);
+ document.getElementById("endBest").innerHTML = "Personal Best · <b>"+getBest()+" / 8</b>";
+ document.getElementById("newbestSlot").innerHTML = isNewBest
+ ? '<div class="newbest">New Personal Best</div>' : '';
+
+ overlay.classList.add("show");
+ bestStat.textContent = getBest();
+ }
+
+ function startGame(){
+ sequence = buildSequence();
+ round=0; score=0; results=[];
+ overlay.classList.remove("show");
+ updateHUD();
+ loadRound();
+ }
+
+ document.getElementById("restartBtn").addEventListener("click", startGame);
+
+ bestStat.textContent = getBest();
+ startGame();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/claude-code.png b/data/artifacts/a17a50ae57ef/claude-code.png
new file mode 100644
index 0000000..f2ccd7e
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/claude-code.png differ
diff --git a/data/artifacts/a17a50ae57ef/gemma3-12b.html b/data/artifacts/a17a50ae57ef/gemma3-12b.html
new file mode 100644
index 0000000..61b867c
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/gemma3-12b.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: rgba(0, 0, 0, 0.1);
+ --shadow: rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+
+ body {
+ font-family: system-ui, 'Segoe UI', Helvetica Neue, Arial, sans-serif;
+ margin: 0;
+ background-color: var(--bg);
+ color: var(--text);
+ overflow-x: hidden; /* Prevent horizontal scrolling */
+ }
+
+ /* Wordmark (Top Bar) */
+ .wordmark {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 24px;
+ background-color: var(--surface);
+ text-align: left;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: calc(1em + 1.5rem); /* Adjust for responsiveness */
+ letter-spacing: .18em;
+ line-height: 1.2;
+ text-transform: uppercase;
+ box-shadow: 0 4px 8px var(--shadow);
+ z-index: 1000; /* Ensure it's above other content */
+ }
+
+ /* Main Game Container */
+ .game-container {
+ padding: 96px;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ /* Image Display Area */
+ .image-area {
+ text-align: center;
+ margin-bottom: 32px;
+ }
+
+ .vignette {
+ width: 100%;
+ max-width: 600px; /* Limit image size */
+ margin: 0 auto;
+ border-radius: 14px;
+ box-shadow: 0 8px 24px var(--shadow);
+ background-color: var(--surface);
+ padding: 32px;
+ }
+
+ /* Guess Buttons */
+ .guess-buttons {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 24px;
+ margin-bottom: 32px;
+ text-align: center;
+ }
+
+ .guess-button {
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ padding: 16px 24px;
+ border-radius: 8px;
+ font-family: system-ui, 'Segoe UI', Helvetica Neue, Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ color: var(--muted);
+ cursor: pointer;
+ transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
+ }
+
+ .guess-button:hover {
+ background-color: #f9f9f9; /* Lighter background on hover */
+ color: var(--text);
+ }
+
+ /* Scoreboard */
+ .scoreboard {
+ font-family: system-ui, 'Segoe UI', Helvetica Neue, Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ color: var(--muted);
+ margin-bottom: 32px;
+ }
+
+ /* Fun Fact Display */
+ .fun-fact {
+ font-size: 18px;
+ line-height: 1.6;
+ margin-top: 32px;
+ color: var(--text);
+ }
+
+ /* Game Over Overlay */
+ .game-over {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ z-index: 2000;
+ }
+
+ .game-over p {
+ color: var(--surface);
+ font-size: 32px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ margin-bottom: 24px;
+ }
+
+ .restart-button {
+ background-color: var(--accent);
+ color: var(--surface);
+ border: none;
+ padding: 16px 32px;
+ font-family: system-ui, 'Segoe UI', Helvetica Neue, Arial, sans-serif;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ cursor: pointer;
+ border-radius: 8px;
+ }
+
+ /* Hidden elements */
+ .hidden {
+ display: none;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div class="wordmark">DESIGNER WALLCOVERINGS</div>
+
+ <div class="game-container">
+ <h1>Which Design Era?</h1>
+ <div class="scoreboard" id="score">Score: 0 / 8</div>
+
+ <div class="image-area">
+ <img id="vignetteImage" src="" alt="Design Era Vignette" class="vignette hidden">
+ </div>
+
+ <div class="guess-buttons" id="buttonContainer">
+ <!-- Buttons will be dynamically added here -->
+ </div>
+
+ <div class="fun-fact" id="funFactArea" style="display: none;"></div>
+
+ <div class="game-over" id="gameOverOverlay" class="hidden">
+ <p>Game Over!</p>
+ <button class="restart-button" onclick="restartGame()">Restart</button>
+ </div>
+ </div>
+
+
+ <script>
+ const eras = [
+ { name: "Victorian", image: "victorian.jpg", fact: "Victorian design emphasized ornate details, rich colors, and a sense of grandeur." },
+ { name: "Art Deco", image: "artdeco.jpg", fact: "Art Deco embraced geometric shapes, luxurious materials like chrome and lacquer, and a streamlined aesthetic." },
+ { name: "Mid-Century Modern", image: "midcentury.jpg", fact: "Mid-Century Modern is known for its clean lines, organic forms, and functional design principles." },
+ { name: "Grandmillennial", image: "grandmillennial.jpg", fact: "Grandmillennial style combines traditional elements with a modern sensibility, creating cozy and nostalgic spaces." }
+ ];
+
+ let currentRound = 0;
+ let score = 0;
+ let selectedEra;
+
+ const scoreboardElement = document.getElementById("score");
+ const buttonContainer = document.getElementById("buttonContainer");
+ const funFactArea = document.getElementById("funFactArea");
+ const gameOverOverlay = document.getElementById("gameOverOverlay");
+ const vignetteImage = document.getElementById("vignetteImage");
+
+ function startGame() {
+ updateScoreboard();
+ newRound();
+ }
+
+ function newRound() {
+ currentRound++;
+
+ // Select a random era
+ selectedEra = eras[Math.floor(Math.random() * eras.length)];
+
+ // Display the image
+ vignetteImage.src = selectedEra.image;
+ vignetteImage.classList.remove("hidden"); // Show the image
+
+ // Create guess buttons
+ buttonContainer.innerHTML = ""; // Clear previous buttons
+ for (let i = 0; i < 4; i++) {
+ const era = eras[Math.floor(Math.random() * eras.length)];
+ const button = document.createElement("button");
+ button.classList.add("guess-button");
+ button.textContent = era.name;
+ button.addEventListener("click", () => guessEra(era));
+ buttonContainer.appendChild(button);
+ }
+
+ }
+
+
+ function guessEra(guessedEra) {
+ if (guessedEra.name === selectedEra.name) {
+ score++;
+ updateScoreboard();
+ showFunFact(selectedEra.fact);
+ setTimeout(() => newRound(), 1500); // Proceed to the next round after a delay
+ } else {
+ gameOver();
+ }
+ }
+
+ function updateScoreboard() {
+ scoreboardElement.textContent = `Score: ${score} / ${8}`;
+ }
+
+ function showFunFact(fact) {
+ funFactArea.textContent = fact;
+ funFactArea.style.display = "block";
+ }
+
+
+ function gameOver() {
+ gameOverOverlay.classList.remove("hidden");
+ // Save best score to localStorage if applicable
+ const bestScore = parseInt(localStorage.getItem('bestScore')) || 0;
+ if (score > bestScore) {
+ localStorage.setItem('bestScore', score);
+ }
+
+ }
+
+
+ function restartGame() {
+ gameOverOverlay.classList.add("hidden");
+ score = 0;
+ currentRound = 0;
+ startGame(); // Restart the game from the beginning
+ }
+
+ // Initialize the game on page load
+ window.onload = () => {
+ startGame();
+ };
+ </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/gemma3-12b.png b/data/artifacts/a17a50ae57ef/gemma3-12b.png
new file mode 100644
index 0000000..9a7a251
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/gemma3-12b.png differ
diff --git a/data/artifacts/a17a50ae57ef/gpt.html b/data/artifacts/a17a50ae57ef/gpt.html
new file mode 100644
index 0000000..b7f1d8f
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/gpt.html
@@ -0,0 +1,1409 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Which Design Era? – Designer Wallcoverings</title>
+<style>
+:root {
+ /* Design tokens */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-soft: #121217;
+ --ink: #f5f2ea;
+ --ink-muted: #8a8578;
+ --accent: #c9a961; /* single metallic accent */
+ --line: rgba(201,169,97,0.26);
+ --shadow-soft: 0 18px 40px rgba(0,0,0,0.6);
+ --radius-card: 18px;
+ --radius-chip: 999px;
+ --radius-vignette: 22px;
+ --ease-default: cubic-bezier(.22,.9,.24,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+ --header-height: 76px;
+
+ /* Typography */
+ --font-display: "Playfair Display", "Times New Roman", Georgia, 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;
+}
+
+/* Global reset */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ background: radial-gradient(120% 160% at 10% 0%, #20202a 0%, #050507 48%, #000000 100%);
+ color: var(--ink);
+ font-family: var(--font-body);
+ -webkit-font-smoothing: antialiased;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Top bar / wordmark */
+.app-shell {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.app-header {
+ position: fixed;
+ inset: 0 0 auto 0;
+ height: var(--header-height);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 32px;
+ background: linear-gradient(to bottom, rgba(7,7,10,0.95), rgba(7,7,10,0.94));
+ backdrop-filter: blur(16px);
+ border-bottom: 1px solid var(--line);
+ z-index: 20;
+}
+
+.brand-lockup {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ max-width: 280px;
+}
+
+.brand-wordmark {
+ font-family: var(--font-display);
+ font-size: 15px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ white-space: normal;
+ line-height: 1.25;
+}
+
+.brand-sub {
+ margin-top: 4px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--ink-muted);
+}
+
+.header-meta {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ font-family: var(--font-body);
+}
+
+.meta-label {
+ font-size: var(--fs-label);
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--ink-muted);
+}
+
+.meta-value {
+ font-size: 13px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ padding: 6px 12px;
+ border-radius: var(--radius-chip);
+ border: 1px solid var(--line);
+ background: radial-gradient(circle at 0 0, rgba(201,169,97,0.2), transparent 55%);
+}
+
+/* Main layout */
+.app-main {
+ flex: 1;
+ padding: calc(var(--header-height) + 32px) 32px 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.game-shell {
+ width: 100%;
+ max-width: 1080px;
+ display: grid;
+ grid-template-columns: 3fr 2.3fr;
+ gap: 32px;
+ align-items: stretch;
+}
+
+@media (max-width: 880px) {
+ .app-header {
+ padding-inline: 20px;
+ }
+ .app-main {
+ padding: calc(var(--header-height) + 24px) 20px 24px;
+ }
+ .game-shell {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Card containers */
+.card {
+ border-radius: var(--radius-card);
+ background: radial-gradient(140% 240% at 10% 0%, #23232c 0%, #121217 42%, #050507 100%);
+ border: 1px solid rgba(255,255,255,0.02);
+ box-shadow: var(--shadow-soft);
+ position: relative;
+ overflow: hidden;
+}
+
+.card::before {
+ content: "";
+ position: absolute;
+ inset: -40%;
+ background: radial-gradient(circle at 0 0, rgba(201,169,97,0.16), transparent 60%);
+ opacity: 0.8;
+ mix-blend-mode: screen;
+ pointer-events: none;
+}
+
+/* Vignette / scene */
+.vignette-card {
+ padding: 22px 22px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.vignette-shell {
+ position: relative;
+ flex: 1;
+ border-radius: var(--radius-vignette);
+ background: radial-gradient(220% 220% at 10% 0%, #252533 0%, #101016 40%, #050509 100%);
+ padding: 22px;
+ border: 1px solid rgba(255,255,255,0.04);
+ overflow: hidden;
+}
+
+/* Subtle grid background */
+.vignette-shell::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image:
+ linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
+ background-size: 22px 22px;
+ mix-blend-mode: soft-light;
+ opacity: 0.8;
+}
+
+/* soft vignette */
+.vignette-shell::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(70% 100% at 50% 100%, rgba(0,0,0,0.6), transparent 65%),
+ radial-gradient(80% 50% at 50% 0, rgba(255,255,255,0.06), transparent 65%);
+ pointer-events: none;
+}
+
+/* Era vignette base layout */
+.vignette-stage {
+ position: relative;
+ width: 100%;
+ height: 0;
+ padding-bottom: 68%;
+}
+
+.vignette-layer {
+ position: absolute;
+ inset: 0;
+}
+
+/* Shared vignette primitives */
+.wall {
+ position: absolute;
+ inset: 0 0 28%;
+ border-radius: 18px 18px 0 0;
+}
+
+.floor {
+ position: absolute;
+ left: -8%;
+ right: -8%;
+ bottom: -6%;
+ height: 42%;
+ background: linear-gradient(to bottom, rgba(0,0,0,0.6), #050507);
+ transform: perspective(700px) rotateX(68deg);
+ transform-origin: top;
+ border-radius: 40% 40% 0 0;
+ box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
+}
+
+.rug {
+ position: absolute;
+ left: 20%;
+ right: 20%;
+ bottom: 0;
+ height: 34%;
+ border-radius: 50%;
+ box-shadow: 0 24px 60px rgba(0,0,0,0.9) inset, 0 0 0 1px rgba(0,0,0,0.8);
+ transform: translateY(32%);
+}
+
+/* Furnishing containers */
+.seating {
+ position: absolute;
+ bottom: 16%;
+ left: 15%;
+ width: 40%;
+ height: 34%;
+}
+
+.table {
+ position: absolute;
+ bottom: 18%;
+ right: 15%;
+ width: 19%;
+ height: 26%;
+}
+
+.lamp {
+ position: absolute;
+ bottom: 24%;
+ right: 12%;
+ width: 12%;
+ height: 40%;
+}
+
+.art-wall {
+ position: absolute;
+ inset: 10% 12% 38% 20%;
+}
+
+/* Era-specific styling */
+
+/* Victorian: deep claret, ornate paneling, tufted sofa, fringe lamp, oriental rug */
+.victorian .wall {
+ background:
+ repeating-linear-gradient(135deg,
+ #4b1722 0, #4b1722 6px,
+ #5e1c2a 6px, #5e1c2a 10px),
+ radial-gradient(circle at 20% 0%, #823747, transparent 60%);
+ box-shadow: 0 16px 40px rgba(0,0,0,0.9) inset;
+ border: 1px solid rgba(255,255,255,0.04);
+}
+.victorian .wall::before {
+ content: "";
+ position: absolute;
+ inset: 10% 14% 45% 14%;
+ border-radius: 18px;
+ border: 1px solid rgba(255,255,255,0.14);
+ box-shadow:
+ 0 0 0 1px rgba(0,0,0,0.8) inset,
+ 0 18px 30px rgba(0,0,0,0.8);
+}
+.victorian .wall::after {
+ content: "";
+ position: absolute;
+ inset: 14% 18% 52% 18%;
+ border-radius: 14px;
+ border: 1px solid rgba(201,169,97,0.8);
+ box-shadow: 0 0 0 1px rgba(95,55,53,0.9) inset;
+}
+.victorian .floor {
+ background: radial-gradient(120% 160% at 50% 0%, #1a0709 0%, #030203 55%, #000000 100%);
+}
+.victorian .rug {
+ background-image:
+ radial-gradient(circle at 50% 40%, #70252f 0, #3e0f19 40%, #120406 68%);
+ border: 3px solid #c9a961;
+}
+.victorian .seating::before {
+ /* sofa body */
+ content: "";
+ position: absolute;
+ inset: 22% 8% 18% 14%;
+ border-radius: 34px 34px 26px 26px;
+ background:
+ radial-gradient(circle at 10% 0%, rgba(255,255,255,0.16), transparent 60%),
+ repeating-linear-gradient(135deg,
+ #742736 0, #742736 4px,
+ #8d3440 4px, #8d3440 7px);
+ box-shadow:
+ 0 14px 30px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(0,0,0,0.9) inset;
+}
+.victorian .seating::after {
+ /* tufting */
+ content: "";
+ position: absolute;
+ inset: 28% 14% 26% 18%;
+ background:
+ radial-gradient(circle at 12% 40%, rgba(0,0,0,0.9) 0, transparent 46%),
+ radial-gradient(circle at 36% 52%, rgba(0,0,0,0.9) 0, transparent 46%),
+ radial-gradient(circle at 60% 40%, rgba(0,0,0,0.9) 0, transparent 46%),
+ radial-gradient(circle at 84% 52%, rgba(0,0,0,0.9) 0, transparent 46%);
+ opacity: 0.6;
+}
+.victorian .table::before {
+ content: "";
+ position: absolute;
+ inset: 32% 12% auto 12%;
+ height: 10%;
+ border-radius: 50%;
+ background: radial-gradient(circle at 50% 30%, #c9a961 0, #7d6a45 55%, #2b2520 100%);
+ box-shadow:
+ 0 6px 14px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.9) inset;
+}
+.victorian .table::after {
+ /* pedestal */
+ content: "";
+ position: absolute;
+ inset: 40% 40% 10% 40%;
+ border-radius: 999px;
+ background: linear-gradient(to bottom, #7d6a45, #201915);
+}
+.victorian .lamp::before {
+ /* fringed shade */
+ content: "";
+ position: absolute;
+ left: 18%;
+ right: 18%;
+ top: 0;
+ height: 44%;
+ border-radius: 50% 50% 18% 18%;
+ background:
+ linear-gradient(to bottom, #e3d7b7, #c9a961);
+ box-shadow:
+ 0 12px 18px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.5) inset;
+}
+.victorian .lamp::after {
+ /* fringe */
+ content: "";
+ position: absolute;
+ left: 24%;
+ right: 24%;
+ top: 44%;
+ height: 10%;
+ background-image: repeating-linear-gradient(to right,
+ #c9a961 0, #c9a961 2px,
+ transparent 2px, transparent 4px);
+ opacity: 0.8;
+}
+
+/* Art Deco: fan motifs, stepped geometry, champagne tones */
+.artdeco .wall {
+ background:
+ radial-gradient(circle at 10% 0%, #444258 0, #1b1a23 40%, #050507 100%),
+ repeating-linear-gradient(135deg,
+ rgba(201,169,97,0.08) 0, rgba(201,169,97,0.08) 1px,
+ transparent 1px, transparent 12px);
+ box-shadow: 0 16px 40px rgba(0,0,0,0.9) inset;
+ border: 1px solid rgba(201,169,97,0.14);
+}
+.artdeco .art-wall::before {
+ content: "";
+ position: absolute;
+ inset: 6% 18% 40% 0;
+ margin-inline: auto;
+ width: 54%;
+ border-radius: 18px;
+ background:
+ radial-gradient(circle at 50% 0%, #f5f2ea 0, #d1c9b0 58%, #7d6a45 100%);
+ box-shadow:
+ 0 10px 24px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.9) inset;
+}
+.artdeco .art-wall::after {
+ /* fan motif */
+ content: "";
+ position: absolute;
+ inset: 20% 28% 50% 28%;
+ background:
+ conic-gradient(from -90deg, rgba(201,169,97,0.9), rgba(201,169,97,0.1), rgba(201,169,97,0.9));
+ clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+ opacity: 0.9;
+}
+.artdeco .floor {
+ background: radial-gradient(120% 200% at 50% 0%, #292733 0%, #0b0a0f 60%, #000000 100%);
+}
+.artdeco .rug {
+ background:
+ repeating-conic-gradient(from 0deg,
+ rgba(201,169,97,0.2) 0 15deg,
+ transparent 15deg 30deg),
+ radial-gradient(circle at 50% 50%, #13111a 0, #020104 70%);
+ border: 2px solid rgba(201,169,97,0.8);
+}
+.artdeco .seating::before {
+ /* armless sofa */
+ content: "";
+ position: absolute;
+ inset: 36% 4% 20% 8%;
+ border-radius: 6px 36px 18px 18px;
+ background:
+ linear-gradient(135deg, #f5f2ea, #d0c7b3);
+ box-shadow:
+ 0 16px 24px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+.artdeco .seating::after {
+ /* scalloped back */
+ content: "";
+ position: absolute;
+ inset: 12% 8% 48% 6%;
+ background:
+ radial-gradient(circle at 0% 100%, #b9b29d 0, #857d69 46%, transparent 50%),
+ radial-gradient(circle at 25% 100%, #c7beab 0, #8f8772 46%, transparent 50%),
+ radial-gradient(circle at 50% 100%, #d2c9b4 0, #958c77 46%, transparent 50%),
+ radial-gradient(circle at 75% 100%, #c5bda8 0, #867f6a 46%, transparent 50%),
+ radial-gradient(circle at 100% 100%, #b8b19c 0, #7a7360 46%, transparent 50%);
+}
+.artdeco .table::before {
+ /* stepped sideboard silhouette */
+ content: "";
+ position: absolute;
+ inset: 34% 8% 18% 0;
+ border-radius: 4px;
+ background:
+ linear-gradient(to right, #3b3745, #15131d);
+ clip-path: polygon(0 40%, 40% 40%, 40% 0, 65% 0, 65% 40%, 100% 40%, 100% 100%, 0 100%);
+ box-shadow:
+ 0 14px 26px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.9) inset;
+}
+.artdeco .table::after {
+ /* metallic inlay stripe */
+ content: "";
+ position: absolute;
+ inset: 44% 12% auto 6%;
+ height: 8%;
+ background: linear-gradient(to right, rgba(201,169,97,0.4), rgba(201,169,97,0.9), rgba(201,169,97,0.4));
+ opacity: 0.9;
+}
+.artdeco .lamp::before {
+ /* skyscraper lamp */
+ content: "";
+ position: absolute;
+ left: 48%;
+ right: 30%;
+ bottom: 20%;
+ top: 40%;
+ border-radius: 2px;
+ background: linear-gradient(to bottom, #f1ebda, #c9a961);
+ box-shadow:
+ 0 0 0 1px rgba(0,0,0,0.8) inset,
+ 0 12px 18px rgba(0,0,0,0.9);
+}
+.artdeco .lamp::after {
+ content: "";
+ position: absolute;
+ left: 34%;
+ right: 18%;
+ top: 8%;
+ height: 36%;
+ border-radius: 8px 8px 2px 2px;
+ background: linear-gradient(to bottom, #f5f2ea, #d7cfbb);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.8);
+}
+
+/* Mid‑Century Modern: teak, low sofa, starburst, graphic rug */
+.midcentury .wall {
+ background:
+ radial-gradient(circle at 10% 0%, #3c5648 0, #1b2520 38%, #050609 100%);
+ box-shadow: 0 16px 40px rgba(0,0,0,0.9) inset;
+}
+.midcentury .wall::before {
+ /* warm wood panel */
+ content: "";
+ position: absolute;
+ inset: 18% 12% 42% 18%;
+ border-radius: 12px;
+ background:
+ repeating-linear-gradient(90deg,
+ #7c4a2e 0, #7c4a2e 4px,
+ #935837 4px, #935837 7px);
+ box-shadow:
+ 0 12px 26px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+.midcentury .wall::after {
+ /* starburst clock */
+ content: "";
+ position: absolute;
+ top: 22%;
+ left: 34%;
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 50% 50%, #f5f2ea 0, #d0c7b3 65%, #7d6a45 100%);
+ box-shadow: 0 0 0 6px #0d0d0f, 0 0 0 1px rgba(0,0,0,0.8);
+}
+.midcentury .art-wall::before {
+ /* starburst rays */
+ content: "";
+ position: absolute;
+ top: 24%;
+ left: 36%;
+ width: 62px;
+ height: 62px;
+ background:
+ conic-gradient(from 0deg,
+ transparent 0 5deg,
+ rgba(201,169,97,0.8) 5deg 6deg,
+ transparent 6deg 12deg);
+ border-radius: 50%;
+ filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
+}
+.midcentury .floor {
+ background: radial-gradient(130% 220% at 50% 0%, #261913 0%, #080404 65%, #000000 100%);
+}
+.midcentury .rug {
+ background:
+ linear-gradient(135deg, #f5f2ea 0, #d0c7b3 35%, #5c3c27 80%);
+ clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
+ box-shadow:
+ 0 0 0 1px rgba(0,0,0,0.8) inset,
+ 0 24px 60px rgba(0,0,0,0.9);
+}
+.midcentury .seating::before {
+ /* low bench sofa */
+ content: "";
+ position: absolute;
+ inset: 42% 4% 20% 2%;
+ border-radius: 18px;
+ background:
+ linear-gradient(135deg, #f5f2ea, #d7cfbb);
+ box-shadow:
+ 0 16px 30px rgba(0,0,0,0.95),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+.midcentury .seating::after {
+ /* tapered legs */
+ content: "";
+ position: absolute;
+ inset: 68% 10% 12% 10%;
+ background:
+ linear-gradient(to right,
+ transparent 0 4%,
+ #2b1a11 4% 6%,
+ transparent 6% 32%,
+ #2b1a11 32% 34%,
+ transparent 34% 66%,
+ #2b1a11 66% 68%,
+ transparent 68% 96%,
+ #2b1a11 96% 98%,
+ transparent 98% 100%);
+}
+.midcentury .table::before {
+ /* round teak table */
+ content: "";
+ position: absolute;
+ inset: 42% 10% 32% 10%;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 30% 10%, #d2a26a 0, #8a552e 65%, #5a3319 100%);
+ box-shadow:
+ 0 10px 24px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.9) inset;
+}
+.midcentury .table::after {
+ /* tapered base */
+ content: "";
+ position: absolute;
+ inset: 58% 40% 16% 40%;
+ border-radius: 999px;
+ background: linear-gradient(to bottom, #8a552e, #3b2313);
+}
+.midcentury .lamp::before {
+ /* arc floor lamp */
+ content: "";
+ position: absolute;
+ bottom: 18%;
+ left: 18%;
+ width: 70%;
+ height: 70%;
+ border-radius: 50%;
+ border: 2px solid rgba(201,169,97,0.7);
+ border-color: transparent transparent rgba(201,169,97,0.7) transparent;
+ transform: rotate(-30deg);
+}
+.midcentury .lamp::after {
+ content: "";
+ position: absolute;
+ right: 0%;
+ top: 10%;
+ width: 32%;
+ height: 26%;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 20%, #ffffff 0, #f5f2ea 40%, #c9a961 100%);
+ box-shadow:
+ 0 10px 20px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.7) inset;
+}
+
+/* Grandmillennial: floral chintz, skirted chair, pleated shade */
+.grandmillennial .wall {
+ background:
+ radial-gradient(circle at 10% 0%, #3e5060 0, #101720 45%, #05070b 100%);
+ box-shadow: 0 16px 40px rgba(0,0,0,0.9) inset;
+}
+.grandmillennial .wall::before {
+ /* floral wallpaper band */
+ content: "";
+ position: absolute;
+ inset: 12% 14% 44% 16%;
+ border-radius: 18px;
+ background-color: #f5f2ea;
+ background-image:
+ radial-gradient(circle at 10% 20%, #7b3d4a 0 7px, transparent 8px),
+ radial-gradient(circle at 40% 40%, #3b6f5c 0 6px, transparent 7px),
+ radial-gradient(circle at 70% 30%, #c9a961 0 5px, transparent 6px),
+ radial-gradient(circle at 20% 70%, #7b3d4a 0 5px, transparent 6px),
+ radial-gradient(circle at 65% 75%, #3b6f5c 0 7px, transparent 8px);
+ background-size: 80px 80px;
+ box-shadow:
+ 0 12px 24px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.7) inset;
+}
+.grandmillennial .wall::after {
+ /* plate cluster */
+ content: "";
+ position: absolute;
+ top: 20%;
+ right: 18%;
+ width: 90px;
+ height: 60px;
+ background:
+ radial-gradient(circle at 20% 40%, #f5f2ea 0 12px, #3b5a78 13px 15px, transparent 16px),
+ radial-gradient(circle at 60% 60%, #f5f2ea 0 11px, #7b3d4a 12px 14px, transparent 15px),
+ radial-gradient(circle at 90% 40%, #f5f2ea 0 10px, #3b5a78 11px 13px, transparent 14px);
+}
+.grandmillennial .floor {
+ background: radial-gradient(130% 220% at 50% 0%, #2a2220 0%, #090404 65%, #000000 100%);
+}
+.grandmillennial .rug {
+ background-color: #f5f2ea;
+ background-image:
+ repeating-linear-gradient(45deg,
+ rgba(123,61,74,0.4) 0 4px,
+ transparent 4px 8px),
+ repeating-linear-gradient(-45deg,
+ rgba(59,90,120,0.35) 0 4px,
+ transparent 4px 8px);
+ border-radius: 50%;
+ border: 2px solid rgba(201,169,97,0.6);
+}
+.grandmillennial .seating::before {
+ /* slipcovered chair */
+ content: "";
+ position: absolute;
+ inset: 26% 18% 16% 18%;
+ border-radius: 18px 18px 30px 30px;
+ background-color: #f5f2ea;
+ background-image:
+ linear-gradient(135deg,
+ rgba(59,90,120,0.22) 0 22%,
+ transparent 23% 100%),
+ radial-gradient(circle at 10% 20%, rgba(123,61,74,0.7) 0 6px, transparent 7px),
+ radial-gradient(circle at 70% 40%, rgba(59,90,120,0.8) 0 6px, transparent 7px);
+ background-size: 140px 140px;
+ box-shadow:
+ 0 18px 30px rgba(0,0,0,0.96),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+.grandmillennial .seating::after {
+ /* skirt pleats */
+ content: "";
+ position: absolute;
+ inset: 64% 16% 20% 16%;
+ background-image:
+ repeating-linear-gradient(90deg,
+ rgba(203,193,170,0.95) 0 6px,
+ transparent 6px 9px);
+ opacity: 0.8;
+}
+.grandmillennial .table::before {
+ /* painted round table */
+ content: "";
+ position: absolute;
+ inset: 38% 12% 24% 12%;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 30% 10%, #f5f2ea 0, #d7cfbb 60%, #7d6a45 100%);
+ box-shadow:
+ 0 10px 22px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+.grandmillennial .table::after {
+ /* vase */
+ content: "";
+ position: absolute;
+ inset: 32% 42% 34% 42%;
+ border-radius: 40% 40% 60% 60%;
+ background: radial-gradient(circle at 50% 0%, #d6e0ea 0, #7b99b6 70%);
+ box-shadow:
+ 0 6px 12px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+.grandmillennial .lamp::before {
+ /* pleated shade */
+ content: "";
+ position: absolute;
+ left: 12%;
+ right: 12%;
+ top: 6%;
+ height: 40%;
+ border-radius: 50% 50% 18% 18%;
+ background:
+ repeating-linear-gradient(90deg,
+ #f5f2ea 0 5px,
+ #d7cfbb 5px 8px);
+ box-shadow:
+ 0 12px 18px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.7) inset;
+}
+.grandmillennial .lamp::after {
+ /* ceramic base */
+ content: "";
+ position: absolute;
+ left: 28%;
+ right: 28%;
+ bottom: 0;
+ top: 42%;
+ border-radius: 50% 50% 36% 36%;
+ background: radial-gradient(circle at 30% 0%, #ffffff 0, #d6e0ea 40%, #7b99b6 100%);
+ box-shadow:
+ 0 10px 16px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(0,0,0,0.8) inset;
+}
+
+/* Glow for active era reveal */
+.vignette-shell.revealed::before {
+ background-image:
+ radial-gradient(circle at 10% 0%, rgba(201,169,97,0.32), transparent 60%);
+}
+
+/* Game HUD over vignette */
+.vignette-topline {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 12px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--ink-muted);
+ padding-inline: 2px;
+}
+.vignette-era-label {
+ font-family: var(--font-display);
+ font-size: 18px;
+ letter-spacing: 0.12em;
+}
+
+/* Right info / controls */
+.info-card {
+ padding: 22px 24px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.info-heading {
+ font-family: var(--font-display);
+ font-size: var(--fs-h3);
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+.info-subtitle {
+ font-size: var(--fs-lead);
+ color: var(--ink-muted);
+ max-width: 26rem;
+}
+
+.info-meta-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 18px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+}
+
+.info-pill {
+ padding: 4px 10px;
+ border-radius: var(--radius-chip);
+ border: 1px solid var(--line);
+ background: rgba(0,0,0,0.35);
+}
+
+/* Guess buttons */
+.guess-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0,1fr));
+ gap: 10px;
+ margin-top: 6px;
+}
+
+.button-guess {
+ position: relative;
+ border-radius: 999px;
+ padding: 10px 16px 9px;
+ border: 1px solid rgba(255,255,255,0.06);
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.18), transparent 60%),
+ rgba(7,7,10,0.92);
+ color: var(--ink);
+ font-family: var(--font-body);
+ font-size: 12px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ text-align: center;
+ cursor: pointer;
+ transition:
+ border-color 200ms var(--ease-default),
+ background 200ms var(--ease-default),
+ transform 200ms var(--ease-default),
+ box-shadow 200ms var(--ease-default),
+ color 180ms var(--ease-default),
+ opacity 160ms linear;
+ box-shadow: 0 10px 24px rgba(0,0,0,0.7);
+}
+.button-guess:hover {
+ border-color: rgba(201,169,97,0.9);
+ box-shadow:
+ 0 16px 32px rgba(0,0,0,0.9),
+ 0 0 0 1px rgba(201,169,97,0.28);
+ transform: translateY(-1px);
+}
+.button-guess:active {
+ transform: translateY(0);
+ box-shadow: 0 6px 16px rgba(0,0,0,0.8);
+}
+.button-guess.correct {
+ background:
+ radial-gradient(circle at 0 0, rgba(201,169,97,0.36), transparent 70%),
+ linear-gradient(120deg, #c9a961, #7d6a45);
+ color: #050507;
+ border-color: rgba(201,169,97,0.9);
+}
+.button-guess.incorrect {
+ opacity: 0.45;
+}
+
+/* Footer controls */
+.controls-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 10px;
+ gap: 10px;
+}
+
+.caption {
+ font-size: var(--fs-caption);
+ color: var(--ink-muted);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.button-ghost {
+ border-radius: 999px;
+ border: 1px solid rgba(255,255,255,0.12);
+ background: transparent;
+ color: var(--ink);
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ padding: 8px 14px;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ backdrop-filter: blur(12px);
+ transition:
+ background 200ms var(--ease-default),
+ border-color 200ms var(--ease-default),
+ color 180ms var(--ease-default),
+ transform 160ms var(--ease-default);
+}
+.button-ghost:hover {
+ background: rgba(201,169,97,0.12);
+ border-color: rgba(201,169,97,0.46);
+ transform: translateY(-1px);
+}
+.button-ghost:active {
+ transform: translateY(0);
+}
+
+/* Era detail / fun fact */
+.era-detail {
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px solid rgba(255,255,255,0.05);
+ min-height: 70px;
+}
+
+.era-name {
+ font-family: var(--font-display);
+ font-size: 20px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.era-tagline {
+ font-size: 13px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--ink-muted);
+ margin-top: 4px;
+}
+
+.era-fact {
+ margin-top: 8px;
+ font-size: 13px;
+ line-height: 1.5;
+ color: var(--ink);
+ max-width: 30rem;
+}
+
+/* Overlay for end-state */
+.overlay {
+ position: fixed;
+ inset: 0;
+ background: radial-gradient(140% 180% at 10% 0%, rgba(201,169,97,0.26), rgba(0,0,0,0.92));
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 40;
+}
+.overlay.active {
+ display: flex;
+}
+
+.overlay-panel {
+ width: 100%;
+ max-width: 460px;
+ border-radius: 24px;
+ background:
+ radial-gradient(130% 200% at 0 0, rgba(201,169,97,0.36), rgba(11,11,16,0.98));
+ border: 1px solid rgba(201,169,97,0.38);
+ box-shadow: 0 30px 70px rgba(0,0,0,0.95);
+ padding: 26px 26px 22px;
+ position: relative;
+ overflow: hidden;
+}
+.overlay-panel::before {
+ content: "";
+ position: absolute;
+ inset: -40%;
+ background: radial-gradient(circle at 0 0, rgba(255,255,255,0.3), transparent 50%);
+ mix-blend-mode: soft-light;
+ opacity: 0.7;
+ pointer-events: none;
+}
+.overlay-heading {
+ font-family: var(--font-display);
+ font-size: var(--fs-h2);
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+.overlay-body {
+ margin-top: 10px;
+ font-size: 14px;
+ color: var(--ink);
+ line-height: 1.6;
+}
+.overlay-row {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 14px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+}
+.overlay-actions {
+ margin-top: 18px;
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
+
+/* Simple fade for overlay */
+@keyframes overlay-fade {
+ from { opacity: 0; transform: translateY(12px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+.overlay.active .overlay-panel {
+ animation: overlay-fade 380ms var(--ease-hero) forwards;
+}
+
+/* Scene entrance */
+@keyframes vignette-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px) scale(1.01);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+.vignette-shell.animate-in {
+ animation: vignette-in 540ms var(--ease-hero) forwards;
+}
+
+/* Utility hidden */
+.hidden {
+ display: none !important;
+}
+</style>
+</head>
+<body>
+<div class="app-shell">
+ <header class="app-header">
+ <div class="brand-lockup">
+ <div class="brand-wordmark">DESIGNER WALLCOVERINGS</div>
+ <div class="brand-sub">Era Study • Interior Motifs</div>
+ </div>
+ <div class="header-meta">
+ <div>
+ <div class="meta-label">Round</div>
+ <div class="meta-value" id="roundDisplay">01 / 08</div>
+ </div>
+ <div>
+ <div class="meta-label">Score</div>
+ <div class="meta-value" id="scoreDisplay">0</div>
+ </div>
+ <div>
+ <div class="meta-label">Best</div>
+ <div class="meta-value" id="bestDisplay">0</div>
+ </div>
+ </div>
+ </header>
+
+ <main class="app-main">
+ <div class="game-shell">
+ <!-- Left: vignette -->
+ <section class="card vignette-card">
+ <div class="vignette-topline">
+ <div>Which design era is this room?</div>
+ <div id="statusChip" class="caption">Make your guess</div>
+ </div>
+ <div class="vignette-shell animate-in" id="vignetteShell">
+ <div id="vignetteStage" class="vignette-stage victorian">
+ <div class="vignette-layer">
+ <div class="wall"></div>
+ <div class="art-wall"></div>
+ <div class="floor"></div>
+ <div class="rug"></div>
+ <div class="seating"></div>
+ <div class="table"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Right: info + controls -->
+ <section class="card info-card">
+ <div>
+ <div class="info-heading">Which Design Era?</div>
+ <div class="info-subtitle">Study the silhouettes, patterns, and palette — then choose the era.</div>
+ </div>
+
+ <div class="info-meta-row">
+ <div class="info-pill">Interior vignette • 4 eras</div>
+ <div class="info-pill">Eight curated rounds</div>
+ </div>
+
+ <div class="guess-grid">
+ <button class="button-guess" data-era="victorian">Victorian</button>
+ <button class="button-guess" data-era="artdeco">Art Deco</button>
+ <button class="button-guess" data-era="midcentury">Mid‑Century Modern</button>
+ <button class="button-guess" data-era="grandmillennial">Grandmillennial</button>
+ </div>
+
+ <div class="era-detail" id="eraDetail">
+ <div class="era-name" id="eraName"> </div>
+ <div class="era-tagline" id="eraTagline"> </div>
+ <div class="era-fact" id="eraFact"> </div>
+ </div>
+
+ <div class="controls-row">
+ <div class="caption" id="roundHint">Round 1 of 8</div>
+ <button class="button-ghost" id="restartButton" type="button">
+ Restart Study
+ </button>
+ </div>
+ </section>
+ </div>
+ </main>
+
+ <!-- Overlay for final score -->
+ <div class="overlay" id="overlay">
+ <div class="overlay-panel">
+ <div class="overlay-heading" id="overlayTitle">Era Eye</div>
+ <div class="overlay-body" id="overlayBody">
+ <!-- filled via JS -->
+ </div>
+ <div class="overlay-row">
+ <div>Final Score</div>
+ <div id="overlayScore">0 / 8</div>
+ </div>
+ <div class="overlay-row">
+ <div>Best Session</div>
+ <div id="overlayBest">0 / 8</div>
+ </div>
+ <div class="overlay-actions">
+ <button class="button-ghost" type="button" id="overlayClose">Close</button>
+ <button class="button-ghost" type="button" id="overlayRestart">
+ Play Again
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+(function() {
+ const ERA_DATA = [
+ {
+ id: "victorian",
+ name: "Victorian",
+ tagline: "Velvet, ornament, and evening lamps",
+ fact: "Victorian interiors layered damask papers, tufted seating, and carved wood — more was more, especially in drawing rooms meant to impress guests."
+ },
+ {
+ id: "artdeco",
+ name: "Art Deco",
+ tagline: "Glamour in geometry and gleam",
+ fact: "Art Deco rooms favored stepped silhouettes, fan motifs, and lacquered furniture — a luxurious look born from jazz-age optimism and skyscraper skylines."
+ },
+ {
+ id: "midcentury",
+ name: "Mid‑Century Modern",
+ tagline: "Low silhouettes and honest materials",
+ fact: "Mid‑century interiors mixed teak, simple upholstery, and graphic rugs — designed for relaxed, everyday living in open-plan homes."
+ },
+ {
+ id: "grandmillennial",
+ name: "Grandmillennial",
+ tagline: "Chintz, pleats, and curated nostalgia",
+ fact: "Grandmillennial style revives granny-chic staples — floral wallpaper, skirted chairs, pleated shades — but edited and artful rather than cluttered."
+ }
+ ];
+
+ const TOTAL_ROUNDS = 8;
+ const bestKey = "whichDesignEra_bestScore_v1";
+
+ const vignetteStage = document.getElementById("vignetteStage");
+ const vignetteShell = document.getElementById("vignetteShell");
+ const statusChip = document.getElementById("statusChip");
+ const roundDisplay = document.getElementById("roundDisplay");
+ const scoreDisplay = document.getElementById("scoreDisplay");
+ const bestDisplay = document.getElementById("bestDisplay");
+ const roundHint = document.getElementById("roundHint");
+ const eraNameEl = document.getElementById("eraName");
+ const eraTaglineEl = document.getElementById("eraTagline");
+ const eraFactEl = document.getElementById("eraFact");
+ const guessButtons = Array.from(document.querySelectorAll(".button-guess"));
+ const restartButton = document.getElementById("restartButton");
+
+ const overlay = document.getElementById("overlay");
+ const overlayTitle = document.getElementById("overlayTitle");
+ const overlayBody = document.getElementById("overlayBody");
+ const overlayScore = document.getElementById("overlayScore");
+ const overlayBest = document.getElementById("overlayBest");
+ const overlayClose = document.getElementById("overlayClose");
+ const overlayRestart = document.getElementById("overlayRestart");
+
+ let currentRound = 1;
+ let currentScore = 0;
+ let currentEra = ERA_DATA[0];
+ let locked = false;
+ let bestScore = 0;
+
+ function loadBest() {
+ try {
+ const stored = localStorage.getItem(bestKey);
+ const val = stored != null ? parseInt(stored, 10) : 0;
+ if (!isNaN(val) && val >= 0 && val <= TOTAL_ROUNDS) {
+ bestScore = val;
+ }
+ } catch (_) {}
+ bestDisplay.textContent = bestScore;
+ }
+
+ function saveBest() {
+ try {
+ localStorage.setItem(bestKey, String(bestScore));
+ } catch (_) {}
+ }
+
+ function sampleEra() {
+ const idx = Math.floor(Math.random() * ERA_DATA.length);
+ return ERA_DATA[idx];
+ }
+
+ function setEra(era) {
+ ERA_DATA.forEach(e => vignetteStage.classList.remove(e.id));
+ vignetteStage.classList.add(era.id);
+ currentEra = era;
+ }
+
+ function resetButtons() {
+ guessButtons.forEach(btn => {
+ btn.classList.remove("correct", "incorrect");
+ btn.disabled = false;
+ });
+ }
+
+ function clearDetail() {
+ eraNameEl.textContent = "\u00A0";
+ eraTaglineEl.textContent = "\u00A0";
+ eraFactEl.textContent = "\u00A0";
+ }
+
+ function updateHUD() {
+ roundDisplay.textContent = String(currentRound).padStart(2, "0") + " / " + String(TOTAL_ROUNDS).padStart(2, "0");
+ scoreDisplay.textContent = String(currentScore);
+ roundHint.textContent = "Round " + currentRound + " of " + TOTAL_ROUNDS;
+ }
+
+ function animateSceneIn() {
+ vignetteShell.classList.remove("animate-in", "revealed");
+ // force reflow
+ void vignetteShell.offsetWidth;
+ vignetteShell.classList.add("animate-in");
+ }
+
+ function startRound() {
+ locked = false;
+ if (currentRound > TOTAL_ROUNDS) {
+ endGame();
+ return;
+ }
+ setEra(sampleEra());
+ resetButtons();
+ clearDetail();
+ statusChip.textContent = "Make your guess";
+ statusChip.style.color = "var(--ink-muted)";
+ updateHUD();
+ animateSceneIn();
+ }
+
+ function reveal(correct) {
+ locked = true;
+ vignetteShell.classList.add("revealed");
+ const eraMeta = currentEra;
+ eraNameEl.textContent = eraMeta.name;
+ eraTaglineEl.textContent = eraMeta.tagline;
+ eraFactEl.textContent = eraMeta.fact;
+ statusChip.textContent = correct ? "Correct" : "Era revealed";
+ statusChip.style.color = correct ? "var(--accent)" : "var(--ink-muted)";
+ }
+
+ function handleGuessClick(ev) {
+ if (locked) return;
+ const btn = ev.currentTarget;
+ const guessId = btn.getAttribute("data-era");
+ const isCorrect = guessId === currentEra.id;
+ guessButtons.forEach(b => {
+ const id = b.getAttribute("data-era");
+ if (id === currentEra.id) {
+ b.classList.add("correct");
+ } else if (id === guessId) {
+ b.classList.add("incorrect");
+ } else {
+ b.classList.add("incorrect");
+ }
+ b.disabled = true;
+ });
+ if (isCorrect) currentScore++;
+ reveal(isCorrect);
+
+ // Advance to next round after short delay
+ setTimeout(() => {
+ currentRound++;
+ if (currentRound > TOTAL_ROUNDS) {
+ endGame();
+ } else {
+ startRound();
+ }
+ }, 1400);
+ }
+
+ function endGame() {
+ locked = true;
+ // update best
+ if (currentScore > bestScore) {
+ bestScore = currentScore;
+ saveBest();
+ }
+ bestDisplay.textContent = bestScore;
+ overlayScore.textContent = currentScore + " / " + TOTAL_ROUNDS;
+ overlayBest.textContent = bestScore + " / " + TOTAL_ROUNDS;
+
+ if (currentScore === TOTAL_ROUNDS) {
+ overlayTitle.textContent = "Flawless Eye";
+ overlayBody.textContent =
+ "You read every motif correctly — a perfect era intuition. Collect another eight rounds and see if the streak holds.";
+ } else if (currentScore >= 6) {
+ overlayTitle.textContent = "Collector‑Level Instinct";
+ overlayBody.textContent =
+ "You’re catching the nuance between paneling, silhouettes, and pattern scale. Another pass will sharpen your sense of each era’s signatures.";
+ } else if (currentScore >= 3) {
+ overlayTitle.textContent = "Emerging Stylist";
+ overlayBody.textContent =
+ "You’re spotting some of the cues — try watching for wood tones, lamp profiles, and wall motifs to refine your calls.";
+ } else {
+ overlayTitle.textContent = "Fresh to the Studio";
+ overlayBody.textContent =
+ "Every room is a reference. Look again at how each era handles ornament, geometry, and color; a few more rounds will change your eye.";
+ }
+
+ overlay.classList.add("active");
+ }
+
+ function resetGame() {
+ overlay.classList.remove("active");
+ currentRound = 1;
+ currentScore = 0;
+ clearDetail();
+ resetButtons();
+ statusChip.textContent = "Make your guess";
+ statusChip.style.color = "var(--ink-muted)";
+ startRound();
+ }
+
+ // Event wiring
+ guessButtons.forEach(btn => btn.addEventListener("click", handleGuessClick));
+ restartButton.addEventListener("click", resetGame);
+ overlayRestart.addEventListener("click", resetGame);
+ overlayClose.addEventListener("click", () => {
+ overlay.classList.remove("active");
+ });
+
+ // Init
+ loadBest();
+ startRound();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/gpt.png b/data/artifacts/a17a50ae57ef/gpt.png
new file mode 100644
index 0000000..75777ed
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/gpt.png differ
diff --git a/data/artifacts/a17a50ae57ef/grok.html b/data/artifacts/a17a50ae57ef/grok.html
new file mode 100644
index 0000000..b715521
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/grok.html
@@ -0,0 +1,1291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Which Design Era? — Designer Wallcoverings</title>
+<style>
+:root {
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-2: #1e1e24;
+ --ink: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-dim: #7d6a45;
+ --line: rgba(201, 169, 97, 0.22);
+ --line-strong: rgba(201, 169, 97, 0.45);
+ --shadow: 0 24px 64px rgba(0,0,0,0.55), 0 2px 0 rgba(201,169,97,0.06);
+ --shadow-soft: 0 8px 32px rgba(0,0,0,0.35);
+ --ease: cubic-bezier(.22,.9,.24,1);
+ --ease-out: cubic-bezier(.22,1,.36,1);
+ --radius: 14px;
+ --radius-sm: 6px;
+ --serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
+ --sans: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
+ --measure: 720px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+ min-height: 100%;
+ background: var(--bg);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.6;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* ── Top bar ── */
+.topbar {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 24px;
+ padding: 18px 32px;
+ background: rgba(13,13,15,0.92);
+ backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--line);
+}
+
+.wordmark {
+ font-family: var(--serif);
+ font-size: clamp(13px, 1.6vw, 15px);
+ font-weight: 400;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--ink);
+ line-height: 1.35;
+ max-width: 280px;
+ white-space: normal;
+ flex-shrink: 0;
+}
+
+.topbar-meta {
+ display: flex;
+ align-items: center;
+ gap: 28px;
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.topbar-meta strong {
+ color: var(--accent);
+ font-weight: 500;
+}
+
+/* ── Layout ── */
+main {
+ max-width: 880px;
+ margin: 0 auto;
+ padding: 120px 24px 96px;
+}
+
+.intro {
+ text-align: center;
+ margin-bottom: 48px;
+}
+
+.eyebrow {
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 16px;
+}
+
+h1 {
+ font-family: var(--serif);
+ font-size: clamp(32px, 5vw, 50px);
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+ color: var(--ink);
+ margin-bottom: 12px;
+}
+
+.lede {
+ color: var(--muted);
+ font-size: 16px;
+ max-width: 42ch;
+ margin: 0 auto;
+}
+
+/* ── Vignette stage ── */
+.stage {
+ position: relative;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ overflow: hidden;
+ aspect-ratio: 16 / 11;
+ margin-bottom: 32px;
+}
+
+.vignette {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 0.7s 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(-50%);
+}
+.wainscot {
+ position: absolute;
+ left: 0; right: 0;
+ top: 42%;
+ height: 26%;
+}
+
+/* Furniture primitives */
+.sofa, .chair, .table, .lamp, .art, .plant, .mirror, .console, .rug {
+ position: absolute;
+}
+
+/* ═══════════════ VICTORIAN ═══════════════ */
+.era-victorian .wall {
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ transparent 0, transparent 47px,
+ rgba(80,20,30,0.15) 47px, rgba(80,20,30,0.15) 48px
+ ),
+ repeating-linear-gradient(
+ 0deg,
+ transparent 0, transparent 47px,
+ rgba(80,20,30,0.12) 47px, rgba(80,20,30,0.12) 48px
+ ),
+ radial-gradient(ellipse 8px 8px at 24px 24px, #6b2a38 0 40%, transparent 42%),
+ radial-gradient(ellipse 8px 8px at 24px 24px, #6b2a38 0 40%, transparent 42%),
+ linear-gradient(180deg, #3a181f 0%, #2a1016 100%);
+ background-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, 100% 100%;
+ background-position: 0 0, 0 0, 0 0, 24px 24px, 0 0;
+}
+.era-victorian .wainscot {
+ background: linear-gradient(180deg, #1a0c10 0%, #241016 40%, #1a0c10 100%);
+ border-top: 2px solid #8a6a3a;
+ box-shadow: inset 0 8px 0 rgba(138,106,58,0.15), inset 0 -1px 0 #8a6a3a;
+}
+.era-victorian .wainscot::before {
+ content: '';
+ position: absolute;
+ inset: 10px 8% 10px;
+ border: 1px solid rgba(138,106,58,0.35);
+ box-shadow: inset 0 0 0 6px rgba(26,12,16,0.5);
+}
+.era-victorian .baseboard {
+ background: linear-gradient(180deg, #a8844a, #6a4e28);
+ height: 5px;
+}
+.era-victorian .floor {
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ #2a1810 0px, #2a1810 28px,
+ #23140c 28px, #23140c 30px
+ );
+}
+.era-victorian .rug {
+ left: 18%; right: 18%; bottom: 6%; height: 22%;
+ background:
+ radial-gradient(ellipse at 50% 50%, #5a1a24 0%, #3a1018 55%, #2a0c12 100%);
+ border: 3px solid #8a6a3a;
+ border-radius: 4px;
+ box-shadow: inset 0 0 0 8px #4a1420, inset 0 0 0 10px #8a6a3a;
+}
+.era-victorian .sofa {
+ left: 22%; right: 22%; bottom: 28%; height: 22%;
+ background: linear-gradient(180deg, #4a1a28 0%, #3a121c 100%);
+ border-radius: 40% 40% 4px 4px / 55% 55% 4px 4px;
+ border: 1px solid #6a2a38;
+ box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 8px 12px rgba(0,0,0,0.25);
+}
+.era-victorian .sofa::before {
+ content: '';
+ position: absolute;
+ left: 6%; right: 6%; top: -28%; height: 40%;
+ background: linear-gradient(180deg, #3a121c, #4a1a28);
+ border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+ border: 1px solid #6a2a38;
+ border-bottom: none;
+}
+.era-victorian .sofa::after {
+ content: '';
+ position: absolute;
+ left: 10%; right: 10%; top: 18%; height: 8px;
+ background: repeating-linear-gradient(90deg, #8a6a3a 0 4px, transparent 4px 14px);
+ opacity: 0.5;
+}
+.era-victorian .lamp {
+ left: 8%; bottom: 30%; width: 48px; height: 38%;
+}
+.era-victorian .lamp::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 0; transform: translateX(-50%);
+ width: 6px; height: 70%;
+ background: linear-gradient(180deg, #c9a961, #8a6a3a);
+ border-radius: 2px;
+}
+.era-victorian .lamp::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 0; transform: translateX(-50%);
+ width: 44px; height: 36%;
+ background: radial-gradient(ellipse at 50% 80%, #e8c878, #a8844a 60%, #6a4e28);
+ border-radius: 50% 50% 8% 8%;
+ box-shadow: 0 0 40px rgba(201,169,97,0.35);
+}
+.era-victorian .art {
+ left: 38%; right: 38%; top: 10%; height: 26%;
+ background: linear-gradient(145deg, #2a2030, #1a1520);
+ border: 4px solid #8a6a3a;
+ box-shadow: inset 0 0 0 3px #3a2818, 0 4px 16px rgba(0,0,0,0.4);
+}
+.era-victorian .art::before {
+ content: '';
+ position: absolute;
+ inset: 10%;
+ background:
+ radial-gradient(ellipse at 40% 40%, #5a4060 0%, transparent 50%),
+ radial-gradient(ellipse at 60% 70%, #3a2840 0%, #1a1020 80%);
+ border: 1px solid rgba(138,106,58,0.3);
+}
+.era-victorian .mirror {
+ right: 9%; top: 14%; width: 56px; height: 32%;
+ background: linear-gradient(160deg, #4a5560, #2a3038 40%, #5a6570 70%, #3a4048);
+ border: 3px solid #a8844a;
+ border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 0 12px rgba(255,255,255,0.08);
+}
+
+/* ═══════════════ ART DECO ═══════════════ */
+.era-deco .wall {
+ background:
+ linear-gradient(180deg, #1a1c28 0%, #12141e 100%);
+}
+.era-deco .wall::before {
+ content: '';
+ position: absolute;
+ left: 50%; top: 0; bottom: 0;
+ width: 42%;
+ transform: translateX(-50%);
+ background:
+ repeating-linear-gradient(
+ 180deg,
+ transparent 0, transparent 18px,
+ rgba(201,169,97,0.08) 18px, rgba(201,169,97,0.08) 19px
+ ),
+ linear-gradient(180deg, rgba(201,169,97,0.06), transparent 60%);
+ border-left: 1px solid rgba(201,169,97,0.25);
+ border-right: 1px solid rgba(201,169,97,0.25);
+}
+.era-deco .wall::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 6%;
+ transform: translateX(-50%);
+ width: 80px; height: 80px;
+ background:
+ conic-gradient(from 0deg, transparent 0deg 20deg, rgba(201,169,97,0.35) 20deg 25deg, transparent 25deg 45deg,
+ rgba(201,169,97,0.35) 45deg 50deg, transparent 50deg 70deg,
+ rgba(201,169,97,0.35) 70deg 75deg, transparent 75deg 90deg,
+ rgba(201,169,97,0.35) 90deg 95deg, transparent 95deg 180deg,
+ rgba(201,169,97,0.35) 180deg 185deg, transparent 185deg 270deg,
+ rgba(201,169,97,0.35) 270deg 275deg, transparent 275deg 360deg),
+ radial-gradient(circle, rgba(201,169,97,0.15) 0 30%, transparent 32%);
+ border-radius: 50%;
+ border: 1px solid rgba(201,169,97,0.4);
+ box-shadow: 0 0 0 6px rgba(18,20,30,0.8), 0 0 0 7px rgba(201,169,97,0.25);
+}
+.era-deco .wainscot {
+ background: linear-gradient(180deg, #0e1018, #161822);
+ border-top: 2px solid var(--accent);
+ top: 48%;
+ height: 20%;
+}
+.era-deco .wainscot::before {
+ content: '';
+ position: absolute;
+ left: 0; right: 0; top: 0;
+ height: 8px;
+ background: repeating-linear-gradient(90deg,
+ var(--accent) 0 2px, transparent 2px 10px,
+ rgba(201,169,97,0.4) 10px 12px, transparent 12px 20px);
+ opacity: 0.6;
+}
+.era-deco .baseboard {
+ background: var(--accent);
+ height: 2px;
+ top: 68%;
+}
+.era-deco .floor {
+ background:
+ linear-gradient(90deg, #1a1c24 0%, #22242e 50%, #1a1c24 100%),
+ repeating-linear-gradient(90deg, #1c1e28 0 40px, #181a22 40px 80px);
+ background-blend-mode: overlay;
+}
+.era-deco .floor::before {
+ content: '';
+ position: absolute;
+ left: 50%; top: 20%;
+ transform: translateX(-50%) rotate(45deg);
+ width: 70px; height: 70px;
+ border: 1px solid rgba(201,169,97,0.3);
+ box-shadow: inset 0 0 0 8px rgba(18,20,30,0.5), inset 0 0 0 9px rgba(201,169,97,0.2);
+}
+.era-deco .sofa {
+ left: 25%; right: 25%; bottom: 26%; height: 18%;
+ background: linear-gradient(180deg, #2a2c3a, #1a1c28);
+ border-radius: 4px 4px 0 0;
+ border: 1px solid rgba(201,169,97,0.3);
+ box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+}
+.era-deco .sofa::before {
+ content: '';
+ position: absolute;
+ left: -4%; right: -4%; top: -8%; height: 30%;
+ background: linear-gradient(180deg, #3a3c4a, #2a2c3a);
+ border-radius: 2px;
+ border: 1px solid rgba(201,169,97,0.35);
+}
+.era-deco .sofa::after {
+ content: '';
+ position: absolute;
+ left: 15%; right: 15%; bottom: 30%; height: 2px;
+ background: var(--accent);
+ opacity: 0.5;
+}
+.era-deco .console {
+ left: 6%; bottom: 30%; width: 70px; height: 20%;
+ background: linear-gradient(180deg, #2a2c38, #1a1c26);
+ border: 1px solid rgba(201,169,97,0.4);
+ border-radius: 2px;
+}
+.era-deco .console::before {
+ content: '';
+ position: absolute;
+ left: 8%; right: 8%; top: 0; height: 3px;
+ background: var(--accent);
+}
+.era-deco .console::after {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: -40%;
+ transform: translateX(-50%);
+ width: 4px; height: 40%;
+ background: linear-gradient(180deg, var(--accent), #8a6a3a);
+}
+.era-deco .lamp {
+ right: 10%; bottom: 30%; width: 40px; height: 34%;
+}
+.era-deco .lamp::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 0; transform: translateX(-50%);
+ width: 4px; height: 55%;
+ background: linear-gradient(180deg, #e8d5a0, var(--accent));
+}
+.era-deco .lamp::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 5%; transform: translateX(-50%);
+ width: 0; height: 0;
+ border-left: 22px solid transparent;
+ border-right: 22px solid transparent;
+ border-bottom: 48px solid #e8d5a0;
+ filter: drop-shadow(0 0 20px rgba(201,169,97,0.4));
+ opacity: 0.9;
+}
+.era-deco .art {
+ left: 42%; right: 42%; top: 28%; height: 16%;
+ background: linear-gradient(180deg, #c9a961 0 12%, #1a1c28 12% 22%, #c9a961 22% 28%, #1a1c28 28%);
+ border: 1px solid var(--accent);
+ box-shadow: 0 0 0 4px #12141e, 0 0 0 5px rgba(201,169,97,0.3);
+}
+
+/* ═══════════════ MID-CENTURY MODERN ═══════════════ */
+.era-mcm .wall {
+ background: linear-gradient(180deg, #d4c4a8 0%, #c8b898 100%);
+}
+.era-mcm .wall::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at 20% 30%, rgba(180,100,60,0.12) 0 3px, transparent 4px),
+ radial-gradient(circle at 70% 50%, rgba(180,100,60,0.1) 0 2px, transparent 3px),
+ radial-gradient(circle at 45% 70%, rgba(60,100,80,0.1) 0 2.5px, transparent 3.5px),
+ radial-gradient(circle at 85% 25%, rgba(180,100,60,0.08) 0 2px, transparent 3px);
+ background-size: 60px 60px, 80px 80px, 70px 70px, 90px 90px;
+ opacity: 0.7;
+}
+.era-mcm .wainscot { display: none; }
+.era-mcm .baseboard {
+ background: #3a3028;
+ height: 4px;
+ top: 68%;
+}
+.era-mcm .floor {
+ background:
+ linear-gradient(90deg,
+ #c4a070 0%, #d4b080 8%, #c4a070 16%,
+ #b89060 16%, #c8a070 24%, #b89060 32%,
+ #c4a070 32%, #d4b080 40%, #c4a070 48%,
+ #b89060 48%, #c8a070 56%, #b89060 64%,
+ #c4a070 64%, #d4b080 72%, #c4a070 80%,
+ #b89060 80%, #c8a070 88%, #b89060 100%);
+}
+.era-mcm .rug {
+ left: 28%; right: 20%; bottom: 8%; height: 18%;
+ background: #2a5a48;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+ overflow: hidden;
+}
+.era-mcm .rug::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(90deg, transparent 0 12px, rgba(232,200,100,0.35) 12px 14px);
+}
+.era-mcm .sofa {
+ left: 30%; width: 36%; bottom: 24%; height: 16%;
+ background: #c45a38;
+ border-radius: 8px 8px 2px 2px;
+ box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+}
+.era-mcm .sofa::before {
+ content: '';
+ position: absolute;
+ left: 0; right: 0; top: -35%; height: 45%;
+ background: #b04e30;
+ border-radius: 6px 6px 0 0;
+}
+.era-mcm .sofa::after {
+ /* tapered legs */
+ content: '';
+ position: absolute;
+ left: 8%; right: 8%; bottom: -28%; height: 28%;
+ background:
+ linear-gradient(180deg, transparent 0 40%, #3a3028 40%),
+ linear-gradient(90deg,
+ #3a3028 0 3px, transparent 3px,
+ transparent calc(100% - 3px), #3a3028 calc(100% - 3px));
+}
+.era-mcm .chair {
+ left: 14%; bottom: 26%; width: 12%; height: 14%;
+ background: #3a6a58;
+ border-radius: 50% 50% 4px 4px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+.era-mcm .chair::after {
+ content: '';
+ position: absolute;
+ left: 15%; right: 15%; bottom: -40%; height: 40%;
+ background:
+ linear-gradient(90deg, #3a3028 0 2px, transparent 2px, transparent calc(100% - 2px), #3a3028 calc(100% - 2px));
+}
+.era-mcm .table {
+ left: 42%; width: 14%; bottom: 28%; height: 8%;
+ background: #5a4030;
+ border-radius: 50%;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+.era-mcm .table::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 100%;
+ transform: translateX(-50%);
+ width: 3px; height: 18px;
+ background: #3a3028;
+}
+.era-mcm .lamp {
+ right: 14%; bottom: 30%; width: 50px; height: 36%;
+}
+.era-mcm .lamp::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 0; transform: translateX(-50%);
+ width: 5px; height: 50%;
+ background: #3a3028;
+ border-radius: 1px;
+}
+.era-mcm .lamp::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 0; transform: translateX(-50%);
+ width: 48px; height: 48%;
+ background: #e8dcc0;
+ border-radius: 50% 50% 4% 4%;
+ box-shadow: 0 0 30px rgba(232,220,180,0.5);
+}
+.era-mcm .art {
+ left: 38%; width: 22%; top: 12%; height: 28%;
+ background:
+ linear-gradient(135deg, #e8a040 0 30%, transparent 30%),
+ linear-gradient(225deg, #2a6a58 0 40%, transparent 40%),
+ linear-gradient(45deg, #c45a38 0 25%, #d4c4a8 25%);
+ border: 3px solid #f5f0e6;
+ box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+}
+.era-mcm .plant {
+ right: 8%; bottom: 30%; width: 28px; height: 22%;
+}
+.era-mcm .plant::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 0; transform: translateX(-50%);
+ width: 18px; height: 40%;
+ background: #c45a38;
+ border-radius: 2px 2px 1px 1px;
+}
+.era-mcm .plant::after {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 35%; transform: translateX(-50%);
+ width: 28px; height: 60%;
+ background:
+ radial-gradient(ellipse 10px 16px at 30% 60%, #2a6a48 0 50%, transparent 52%),
+ radial-gradient(ellipse 10px 16px at 70% 50%, #3a7a58 0 50%, transparent 52%),
+ radial-gradient(ellipse 8px 14px at 50% 30%, #2a6a48 0 50%, transparent 52%);
+}
+
+/* ═══════════════ GRANDMILLENNIAL ═══════════════ */
+.era-grand .wall {
+ background:
+ radial-gradient(ellipse 5px 7px at 12px 14px, #7a8a6a 0 40%, transparent 42%),
+ radial-gradient(ellipse 4px 6px at 28px 8px, #9a6a7a 0 40%, transparent 42%),
+ radial-gradient(ellipse 5px 5px at 20px 28px, #6a7a9a 0 35%, transparent 38%),
+ linear-gradient(180deg, #e8e0d4 0%, #ddd4c6 100%);
+ background-size: 40px 40px, 40px 40px, 40px 40px, 100% 100%;
+}
+.era-grand .wainscot {
+ background: #f2ebe0;
+ border-top: 1px solid #c4b8a4;
+ box-shadow: inset 0 1px 0 #fff8f0;
+ top: 44%;
+ height: 24%;
+}
+.era-grand .wainscot::before {
+ content: '';
+ position: absolute;
+ inset: 8px 6%;
+ border: 1px solid #c4b8a4;
+ border-radius: 2px;
+ box-shadow: inset 0 0 0 4px #f2ebe0, inset 0 0 0 5px rgba(196,184,164,0.5);
+}
+.era-grand .baseboard {
+ background: linear-gradient(180deg, #e8e0d4, #c4b8a4);
+ height: 6px;
+ top: 68%;
+}
+.era-grand .floor {
+ background:
+ repeating-linear-gradient(
+ 90deg,
+ #d4c8b0 0px, #d4c8b0 36px,
+ #c8bca4 36px, #c8bca4 38px
+ );
+}
+.era-grand .rug {
+ left: 16%; right: 16%; bottom: 5%; height: 24%;
+ background:
+ repeating-linear-gradient(0deg, #6a3a4a 0 3px, #8a5a6a 3px 6px, #6a3a4a 6px 8px, #a87850 8px 10px),
+ #6a3a4a;
+ border: 6px solid #e8d8c0;
+ border-radius: 50%;
+ box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 0 0 3px #a87850;
+}
+.era-grand .sofa {
+ left: 24%; right: 24%; bottom: 26%; height: 20%;
+ background: #7a9aaa;
+ border-radius: 12px 12px 4px 4px;
+ border: 1px solid #6a8a9a;
+ box-shadow: 0 6px 18px rgba(0,0,0,0.15);
+ overflow: hidden;
+}
+.era-grand .sofa::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 8px 6px at 20% 40%, rgba(255,255,255,0.2) 0 40%, transparent 42%),
+ radial-gradient(ellipse 8px 6px at 50% 55%, rgba(255,255,255,0.15) 0 40%, transparent 42%),
+ radial-gradient(ellipse 8px 6px at 80% 40%, rgba(255,255,255,0.2) 0 40%, transparent 42%);
+ background-size: 30px 24px;
+}
+.era-grand .sofa::after {
+ content: '';
+ position: absolute;
+ left: 0; right: 0; top: -22%; height: 30%;
+ background: #6a8a9a;
+ border-radius: 10px 10px 0 0;
+ border: 1px solid #5a7a8a;
+ border-bottom: none;
+}
+.era-grand .lamp {
+ left: 7%; bottom: 30%; width: 44px; height: 36%;
+}
+.era-grand .lamp::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 0; transform: translateX(-50%);
+ width: 14px; height: 12%;
+ background: #c4a870;
+ border-radius: 50%;
+ box-shadow: 0 -40px 0 -4px #c4a870, 0 -40px 0 -5px #a88850;
+}
+.era-grand .lamp::after {
+ content: '';
+ position: absolute;
+ left: 50%; top: 0; transform: translateX(-50%);
+ width: 42px; height: 42%;
+ background: #f0e8d8;
+ border-radius: 8px 8px 2px 2px;
+ border: 1px solid #d4c8b0;
+ box-shadow: 0 0 28px rgba(240,232,216,0.55),
+ inset 0 0 0 4px transparent,
+ inset 0 -100% 0 rgba(180,140,160,0.12);
+ /* pleated shade hint */
+ background-image: repeating-linear-gradient(90deg,
+ #f0e8d8 0 4px, #e4d8c4 4px 5px);
+}
+.era-grand .art {
+ left: 36%; width: 12%; top: 10%; height: 24%;
+ background: #e8d8c8;
+ border: 5px solid #c4a870;
+ box-shadow: inset 0 0 0 2px #f5efe4, 0 3px 12px rgba(0,0,0,0.1);
+}
+.era-grand .art::before {
+ content: '';
+ position: absolute;
+ inset: 8%;
+ background:
+ radial-gradient(ellipse at 50% 60%, #9a6a7a 0%, #7a8a6a 40%, #6a7a9a 70%, #c4b8a0 100%);
+ border-radius: 40% 40% 45% 45%;
+}
+.era-grand .mirror {
+ right: 10%; top: 12%; width: 48px; height: 30%;
+ background: linear-gradient(150deg, #d0d8e0, #a8b0b8 40%, #c8d0d8);
+ border: 4px solid #c4a870;
+ border-radius: 50%;
+ box-shadow: 0 0 0 2px #e8dcc0, 0 4px 14px rgba(0,0,0,0.12);
+}
+.era-grand .plant {
+ right: 28%; bottom: 30%; width: 24px; height: 18%;
+}
+.era-grand .plant::before {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 0; transform: translateX(-50%);
+ width: 16px; height: 45%;
+ background: #8a6a5a;
+ border-radius: 2px 2px 1px 1px;
+ border: 1px solid #6a4a3a;
+}
+.era-grand .plant::after {
+ content: '';
+ position: absolute;
+ left: 50%; bottom: 40%; transform: translateX(-50%);
+ width: 26px; height: 55%;
+ background:
+ radial-gradient(ellipse 7px 12px at 25% 50%, #4a6a48 0 55%, transparent 57%),
+ radial-gradient(ellipse 7px 12px at 75% 45%, #5a7a58 0 55%, transparent 57%),
+ radial-gradient(ellipse 6px 10px at 50% 25%, #3a5a38 0 55%, transparent 57%);
+}
+.era-grand .console {
+ right: 7%; bottom: 30%; width: 54px; height: 4px;
+ background: #c4a870;
+ border-radius: 1px;
+ box-shadow: 0 10px 0 0 #c4a870;
+}
+.era-grand .console::after {
+ content: '';
+ position: absolute;
+ left: 6px; right: 6px; top: 4px; height: 10px;
+ border-left: 2px solid #c4a870;
+ border-right: 2px solid #c4a870;
+}
+
+/* ── Guess buttons ── */
+.guesses {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 12px;
+ margin-bottom: 32px;
+}
+@media (min-width: 560px) {
+ .guesses { grid-template-columns: repeat(4, 1fr); }
+}
+
+.guess-btn {
+ appearance: none;
+ background: var(--surface);
+ color: var(--ink);
+ border: 1px solid var(--line);
+ border-radius: var(--radius-sm);
+ padding: 16px 12px;
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
+}
+.guess-btn:hover:not(:disabled) {
+ border-color: var(--line-strong);
+ background: var(--surface-2);
+ color: var(--accent);
+}
+.guess-btn:active:not(:disabled) {
+ transform: scale(0.98);
+}
+.guess-btn:disabled {
+ cursor: default;
+ opacity: 0.55;
+}
+.guess-btn.correct {
+ border-color: var(--accent);
+ color: var(--accent);
+ background: rgba(201,169,97,0.08);
+ opacity: 1;
+ box-shadow: 0 0 0 1px var(--accent);
+}
+.guess-btn.wrong {
+ border-color: rgba(180,80,80,0.5);
+ color: #c07070;
+ opacity: 1;
+}
+
+/* ── Fact panel ── */
+.fact-panel {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ padding: 28px 32px;
+ margin-bottom: 28px;
+ min-height: 120px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 10px;
+ box-shadow: var(--shadow-soft);
+ opacity: 0;
+ transform: translateY(8px);
+ transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
+ pointer-events: none;
+}
+.fact-panel.show {
+ opacity: 1;
+ transform: translateY(0);
+ pointer-events: auto;
+}
+.fact-label {
+ font-size: 10px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+}
+.fact-era {
+ font-family: var(--serif);
+ font-size: 28px;
+ letter-spacing: -0.02em;
+ line-height: 1.15;
+}
+.fact-text {
+ color: var(--muted);
+ font-size: 15px;
+ line-height: 1.65;
+ max-width: 60ch;
+}
+.fact-result {
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ margin-top: 4px;
+}
+.fact-result.yes { color: var(--accent); }
+.fact-result.no { color: #c07070; }
+
+.next-row {
+ display: flex;
+ justify-content: center;
+ min-height: 48px;
+}
+.btn-next {
+ appearance: none;
+ background: transparent;
+ color: var(--accent);
+ border: 1px solid var(--line-strong);
+ border-radius: 999px;
+ padding: 14px 36px;
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(6px);
+ transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
+}
+.btn-next.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+}
+.btn-next:hover {
+ background: var(--accent);
+ color: var(--bg);
+ border-color: var(--accent);
+}
+
+/* ── Overlay ── */
+.overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 200;
+ background: rgba(13,13,15,0.88);
+ backdrop-filter: blur(16px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.5s var(--ease);
+}
+.overlay.show {
+ opacity: 1;
+ pointer-events: auto;
+}
+.overlay-card {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+ padding: 48px 40px;
+ max-width: 440px;
+ width: 100%;
+ text-align: center;
+ transform: translateY(12px) scale(0.98);
+ transition: transform 0.55s var(--ease-out);
+}
+.overlay.show .overlay-card {
+ transform: translateY(0) scale(1);
+}
+.overlay-card .eyebrow { margin-bottom: 12px; }
+.overlay-card h2 {
+ font-family: var(--serif);
+ font-size: clamp(28px, 4vw, 38px);
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ line-height: 1.15;
+ margin-bottom: 12px;
+}
+.overlay-card p {
+ color: var(--muted);
+ font-size: 15px;
+ margin-bottom: 8px;
+ line-height: 1.6;
+}
+.score-big {
+ font-family: var(--serif);
+ font-size: 67px;
+ letter-spacing: -0.03em;
+ color: var(--accent);
+ line-height: 1;
+ margin: 20px 0 8px;
+}
+.score-sub {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 32px;
+}
+.btn-primary {
+ appearance: none;
+ background: var(--accent);
+ color: var(--bg);
+ border: none;
+ border-radius: 999px;
+ padding: 16px 40px;
+ font-family: var(--sans);
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background 0.3s var(--ease), transform 0.3s var(--ease);
+}
+.btn-primary:hover {
+ background: #d4b870;
+ transform: translateY(-1px);
+}
+
+/* Start overlay slight variant */
+#startOverlay .overlay-card { max-width: 480px; }
+#startOverlay .lede-start {
+ color: var(--muted);
+ font-size: 15px;
+ max-width: 36ch;
+ margin: 0 auto 32px;
+ line-height: 1.65;
+}
+
+.era-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: center;
+ margin-bottom: 36px;
+}
+.era-chip {
+ font-size: 10px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ padding: 6px 14px;
+}
+
+footer.note {
+ text-align: center;
+ margin-top: 48px;
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ opacity: 0.6;
+}
+</style>
+</head>
+<body>
+
+<header class="topbar">
+ <div class="wordmark">Designer<br>Wallcoverings</div>
+ <div class="topbar-meta">
+ <span>Round <strong id="roundNum">1</strong> / 8</span>
+ <span>Score <strong id="scoreNum">0</strong></span>
+ <span>Best <strong id="bestNum">0</strong></span>
+ </div>
+</header>
+
+<main>
+ <div class="intro">
+ <div class="eyebrow">A connoisseur’s quiz</div>
+ <h1>Which Design Era?</h1>
+ <p class="lede">Study the room. Name the era. Eight vignettes, one refined eye.</p>
+ </div>
+
+ <div class="stage" id="stage" aria-live="polite">
+ <!-- Victorian -->
+ <div class="vignette era-victorian" data-era="victorian">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="rug"></div>
+ <div class="art"></div>
+ <div class="mirror"></div>
+ <div class="sofa"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ <!-- Art Deco -->
+ <div class="vignette era-deco" data-era="deco">
+ <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="sofa"></div>
+ <div class="console"></div>
+ <div class="lamp"></div>
+ </div>
+ </div>
+ <!-- Mid-Century Modern -->
+ <div class="vignette era-mcm" data-era="mcm">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="rug"></div>
+ <div class="art"></div>
+ <div class="sofa"></div>
+ <div class="chair"></div>
+ <div class="table"></div>
+ <div class="lamp"></div>
+ <div class="plant"></div>
+ </div>
+ </div>
+ <!-- Grandmillennial -->
+ <div class="vignette era-grand" data-era="grand">
+ <div class="room">
+ <div class="wall"></div>
+ <div class="wainscot"></div>
+ <div class="baseboard"></div>
+ <div class="floor"></div>
+ <div class="rug"></div>
+ <div class="art"></div>
+ <div class="mirror"></div>
+ <div class="sofa"></div>
+ <div class="lamp"></div>
+ <div class="plant"></div>
+ <div class="console"></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="guesses" id="guesses">
+ <button class="guess-btn" data-guess="victorian">Victorian</button>
+ <button class="guess-btn" data-guess="deco">Art Deco</button>
+ <button class="guess-btn" data-guess="mcm">Mid-Century</button>
+ <button class="guess-btn" data-guess="grand">Grandmillennial</button>
+ </div>
+
+ <div class="fact-panel" id="factPanel">
+ <div class="fact-label">The era revealed</div>
+ <div class="fact-era" id="factEra"></div>
+ <p class="fact-text" id="factText"></p>
+ <div class="fact-result" id="factResult"></div>
+ </div>
+
+ <div class="next-row">
+ <button class="btn-next" id="btnNext">Next vignette</button>
+ </div>
+
+ <footer class="note">Designer Wallcoverings · Era Study</footer>
+</main>
+
+<!-- Start overlay -->
+<div class="overlay show" id="startOverlay">
+ <div class="overlay-card">
+ <div class="eyebrow">Designer Wallcoverings</div>
+ <h2>Which Design Era?</h2>
+ <p class="lede-start">Eight interiors. Four eras. Read the wallpaper, the silhouette, the light — then name the period.</p>
+ <div class="era-chips">
+ <span class="era-chip">Victorian</span>
+ <span class="era-chip">Art Deco</span>
+ <span class="era-chip">Mid-Century</span>
+ <span class="era-chip">Grandmillennial</span>
+ </div>
+ <button class="btn-primary" id="btnStart">Begin the study</button>
+ </div>
+</div>
+
+<!-- End overlay -->
+<div class="overlay" id="endOverlay">
+ <div class="overlay-card">
+ <div class="eyebrow" id="endEyebrow">Session complete</div>
+ <h2 id="endTitle">A refined eye</h2>
+ <div class="score-big" id="endScore">0</div>
+ <div class="score-sub">of 8 correctly named · best <span id="endBest">0</span></div>
+ <p id="endBlurb" style="margin-bottom:28px;color:var(--muted);font-size:15px;"></p>
+ <button class="btn-primary" id="btnRestart">Play again</button>
+ </div>
+</div>
+
+<script>
+(function () {
+ const TOTAL = 8;
+ const ERAS = {
+ victorian: {
+ name: 'Victorian',
+ fact: 'Heavy damask, button-tufted seating, and gilt frames defined the Victorian parlor — a room meant to display prosperity as much as hospitality. Pattern layered upon pattern was a virtue.'
+ },
+ deco: {
+ name: 'Art Deco',
+ fact: 'Born of the 1925 Paris Exposition, Art Deco favored sunbursts, stepped geometry, and high-contrast metallics. Lacquer, brass, and mirrored surfaces made every salon feel like a liner at midnight.'
+ },
+ mcm: {
+ name: 'Mid-Century Modern',
+ fact: 'Post-war optimism distilled into clean planes, tapered legs, and organic curves. Teak, warm ochre, and a single sculptural lamp said more than ornament ever could.'
+ },
+ grand: {
+ name: 'Grandmillennial',
+ fact: 'A 21st-century love letter to heirloom taste: chintz florals, skirted seating, needlepoint, and blue-and-white china — grandma’s house, edited with a contemporary eye.'
+ }
+ };
+ const KEYS = Object.keys(ERAS);
+
+ const $ = (s, r) => (r || document).querySelector(s);
+ const $$ = (s, r) => Array.from((r || document).querySelectorAll(s));
+
+ let round = 0;
+ let score = 0;
+ let sequence = [];
+ let locked = false;
+ let best = 0;
+
+ try { best = parseInt(localStorage.getItem('dw-era-best') || '0', 10) || 0; } catch (e) {}
+ $('#bestNum').textContent = best;
+
+ 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() {
+ // Ensure each era appears at least once, then fill randomly
+ let base = shuffle(KEYS);
+ while (base.length < TOTAL) {
+ base = base.concat(shuffle(KEYS));
+ }
+ sequence = shuffle(base.slice(0, TOTAL));
+ }
+
+ function showVignette(era) {
+ $$('.vignette').forEach(v => v.classList.toggle('active', v.dataset.era === era));
+ }
+
+ function resetButtons() {
+ $$('.guess-btn').forEach(b => {
+ b.disabled = false;
+ b.classList.remove('correct', 'wrong');
+ });
+ }
+
+ function startRound() {
+ locked = false;
+ $('#roundNum').textContent = round + 1;
+ $('#scoreNum').textContent = score;
+ $('#factPanel').classList.remove('show');
+ $('#btnNext').classList.remove('show');
+ $('#btnNext').textContent = round >= TOTAL - 1 ? 'See results' : 'Next vignette';
+ resetButtons();
+ showVignette(sequence[round]);
+ }
+
+ function onGuess(guess) {
+ if (locked) return;
+ locked = true;
+ const answer = sequence[round];
+ const correct = guess === answer;
+ if (correct) score++;
+
+ $$('.guess-btn').forEach(b => {
+ b.disabled = true;
+ if (b.dataset.guess === answer) b.classList.add('correct');
+ else if (b.dataset.guess === guess && !correct) b.classList.add('wrong');
+ });
+
+ $('#scoreNum').textContent = score;
+ const info = ERAS[answer];
+ $('#factEra').textContent = info.name;
+ $('#factText').textContent = info.fact;
+ const res = $('#factResult');
+ if (correct) {
+ res.textContent = 'Correct — well observed';
+ res.className = 'fact-result yes';
+ } else {
+ res.textContent = 'Not quite — it was ' + info.name;
+ res.className = 'fact-result no';
+ }
+ $('#factPanel').classList.add('show');
+ setTimeout(() => $('#btnNext').classList.add('show'), 280);
+ }
+
+ function next() {
+ round++;
+ if (round >= TOTAL) {
+ endGame();
+ } else {
+ startRound();
+ }
+ }
+
+ function endGame() {
+ if (score > best) {
+ best = score;
+ try { localStorage.setItem('dw-era-best', String(best)); } catch (e) {}
+ $('#bestNum').textContent = best;
+ }
+ const titles = [
+ 'A wandering eye',
+ 'An emerging taste',
+ 'A cultivated glance',
+ 'A discerning eye',
+ 'A connoisseur'
+ ];
+ const blurbs = [
+ 'The eras will wait for you. Another round sharpens the gaze.',
+ 'You are beginning to read the room — pattern, proportion, posture.',
+ 'Solid instincts. A little more study and the silhouettes will sing.',
+ 'Refined reading of form and finish. The atelier approves.',
+ 'Faultless. You belong among the great room-readers.'
+ ];
+ const idx = score <= 1 ? 0 : score <= 3 ? 1 : score <= 5 ? 2 : score <= 7 ? 3 : 4;
+ $('#endTitle').textContent = titles[idx];
+ $('#endScore').textContent = score;
+ $('#endBest').textContent = best;
+ $('#endBlurb').textContent = blurbs[idx];
+ $('#endEyebrow').textContent = score === TOTAL ? 'Perfect session' : 'Session complete';
+ $('#endOverlay').classList.add('show');
+ }
+
+ function restart() {
+ $('#endOverlay').classList.remove('show');
+ round = 0;
+ score = 0;
+ buildSequence();
+ startRound();
+ }
+
+ // Wire up
+ $$('.guess-btn').forEach(b => b.addEventListener('click', () => onGuess(b.dataset.guess)));
+ $('#btnNext').addEventListener('click', next);
+ $('#btnStart').addEventListener('click', () => {
+ $('#startOverlay').classList.remove('show');
+ buildSequence();
+ startRound();
+ });
+ $('#btnRestart').addEventListener('click', restart);
+
+ // Prefill best, idle first vignette behind start
+ showVignette('deco');
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/grok.png b/data/artifacts/a17a50ae57ef/grok.png
new file mode 100644
index 0000000..f7de5f2
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/grok.png differ
diff --git a/data/artifacts/a17a50ae57ef/hermes3-8b.html b/data/artifacts/a17a50ae57ef/hermes3-8b.html
new file mode 100644
index 0000000..8daef7e
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/hermes3-8b.html
@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --text: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e / #2f4c39;
+ --line: 1px solid #e0a458;
+ --shadow: 0 8px 24px rgba(0, 0, 0, .12);
+ --ease: cubic-bezier(.22, 1, .36, 1);
+ }
+
+ body {
+ background-color: var(--bg);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ line-height: 1.6;
+ margin: 0;
+ padding: 96px;
+ }
+
+ h1 {
+ background-color: var(--surface);
+ clip-path: polygon(0 0 100% 0 100% 100% 0 100%);
+ color: var(--text);
+ font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ font-size: 50px;
+ letter-spacing: .18em;
+ margin-bottom: 48px;
+ }
+
+ h2 {
+ background-color: var(--surface);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 38px;
+ letter-spacing: .15em;
+ margin-bottom: 24px;
+ }
+
+ h3 {
+ background-color: var(--surface);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 28px;
+ letter-spacing: .15em;
+ margin-bottom: 16px;
+ }
+
+ button {
+ background-color: var(--surface);
+ border: none;
+ border-bottom: var(--line);
+ color: var(--text);
+ cursor: pointer;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ letter-spacing: .15em;
+ margin: 8px 0;
+ padding: 12px 24px;
+ position: relative;
+ transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
+ }
+
+ button:hover {
+ background-color: var(--accent);
+ color: #fff;
+ box-shadow: var(--shadow) rgba(255, 40, 0, .5);
+ }
+
+ section {
+ padding: 96px;
+ }
+
+ .vignette {
+ align-items: center;
+ border-radius: 14px;
+ display: flex;
+ gap: 24px;
+ justify-content: center;
+ margin-bottom: 48px;
+ padding: 32px;
+ position: relative;
+ z-index: 2;
+ }
+
+ .vignette::before {
+ background-color: var(--surface);
+ content: '';
+ position: absolute;
+ top: -8px;
+ left: -8px;
+ right: -8px;
+ bottom: calc(100% - var(--body, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif); clip-path: polygon(14% 0 86% 0 86% 100% 14% 100% 0 100%);
+ z-index: -1;
+ box-shadow: var(--shadow);
+ }
+
+ .vignette img {
+ max-width: 80%;
+ width: auto;
+ height: auto;
+ }
+
+ .scoreboard {
+ background-color: var(--surface);
+ border: none;
+ border-bottom: var(--line);
+ color: var(--text);
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ letter-spacing: .15em;
+ margin-top: 64px;
+ padding: 24px;
+ }
+
+ .scoreboard p {
+ margin: 0;
+ }
+
+ .restart {
+ background-color: var(--accent);
+ border: none;
+ color: #fff;
+ cursor: pointer;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ letter-spacing: .15em;
+ padding: 12px 24px;
+ }
+
+ .overlay {
+ align-items: center;
+ background-color: rgba(0, 0, 0, .8);
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ }
+
+ .overlay > * {
+ color: #fff;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ }
+ </style>
+</head>
+<body>
+ <h1 class="lockup">DESIGNER WALLCOVERINGS</h1>
+ <section id="game">
+ <h2>Which Design Era?</h2>
+ <button id="start">START GAME</button>
+ <div class="scoreboard">
+ <p id="score">0 / 8</p>
+ <p id="best" class="hidden">Best: 0</p>
+ </div>
+ </section>
+ <section id="game-over" class="overlay hidden">
+ <h2>Game Over!</h2>
+ <p id="final-score">Your Score: 0 / 8</p>
+ <button id="restart">PLAY AGAIN</button>
+ </section>
+ <div id="rounds" class="hidden">
+ <section id="round-1">
+ <h3>Round 1</h3>
+ <div class="vignette">
+ <img src="https://picsum.photos/300/200?image=0" alt="">
+ <p>Victorian</p>
+ </div>
+ <button class="guess Victorian">VICTORIAN</button>
+ <button class="guess ArtDeco">ART DECO</button>
+ <button class="guess MidCenturyModern">MID-CENTURY MODERN</button>
+ <button class="guess Grandmillennial">GRANDMILLENNIAL</button>
+ </section>
+ <!-- ... seven more rounds like round-1 ... -->
+ </div>
+ <script>
+ const eras = [
+ { name: "Victorian", image: "https://picsum.photos/300/200?image=1" },
+ { name: "Art Deco", image: "https://picsum.photos/300/200?image=2" },
+ // ... other eras ...
+ ];
+
+ const eraFacts = {
+ Victorian: "Characterized by dark, heavy wooden furniture, ornate decorations and a focus on symmetry.",
+ ArtDeco: "Known for geometric shapes, luxurious materials and bold ornamentation.",
+ MidCenturyModern: "Emphasized clean lines, organic forms and an emphasis on functionality.",
+ Grandmillennial: "Celebrates classic elements from the past with a modern twist."
+ };
+
+ let score = 0;
+ let roundIndex = 0;
+ const bestScore = localStorage.getItem("bestWhichDesignEra");
+ if (bestScore) {
+ document.getElementById("score").textContent = `${bestScore} / 8`;
+ }
+
+ function resetGame() {
+ score = 0;
+ roundIndex = 0;
+ document.getElementById("score").textContent = `0 / 8`;
+ Array.from(document.getElementsByClassName("guess")).forEach(button => button.removeEventListener("click", checkGuess));
+ document.getElementById("game-over").classList.add("hidden");
+
+ if (bestScore && parseInt(bestScore) === 8) {
+ localStorage.setItem("bestWhichDesignEra", "8 / 8");
+ } else {
+ localStorage.setItem("bestWhichDesignEra", `${score} / 8`);
+ }
+ }
+
+ function startGame() {
+ document.getElementById("start").classList.add("hidden");
+ document.getElementById("rounds").classList.remove("hidden");
+
+ if (!document.getElementById("game-over").classList.contains("hidden")) {
+ resetGame();
+ } else {
+ roundIndex = 0;
+ }
+
+ updateRound();
+ }
+
+ function checkGuess(e) {
+ const guess = e.target.textContent.toLowerCase();
+ const eraName = eras[roundIndex].name.toLowerCase();
+
+ if (guess === eraName) {
+ score++;
+ document.getElementById("score").textContent = `${score} / 8`;
+
+ if (score === 8 && bestScore) {
+ localStorage.setItem("bestWhichDesignEra", "8 / 8");
+ } else {
+ localStorage.setItem("bestWhichDesignEra", `${score} / 8`);
+ }
+ }
+
+ roundIndex++;
+ updateRound();
+ }
+
+ function updateRound() {
+ if (roundIndex >= eras.length) {
+ document.getElementById("game").classList.add("hidden");
+ document.getElementById("game-over").classList.remove("hidden");
+ document.getElementById("final-score").textContent = `Your Score: ${score} / 8`;
+ return;
+ }
+
+ const eraName = eras[roundIndex].name;
+ const vignetteSection = document.getElementById(`round-${roundIndex + 1}`);
+ const eraElement = vignetteSection.querySelector(".vignette p");
+ const guessButtons = vignetteSection.querySelectorAll(".guess");
+
+ eraElement.textContent = eraName.toUpperCase();
+ eraElement.style.backgroundImage = `url(${eras[roundIndex].image})`;
+ Array.from(guessButtons).forEach(button => button.classList.remove("hidden"));
+
+ if (score === roundIndex) {
+ Array.from(guessButtons).forEach(button => button.removeEventListener("click", checkGuess));
+
+ setTimeout(() => {
+ eraElement.textContent = eraFacts[eraName];
+ guessButtons.forEach(button => button.classList.add("hidden"));
+
+ const newRoundButton = document.createElement("button");
+ newRoundButton.textContent = "NEXT ROUND";
+ newRoundButton.addEventListener("click", startGame);
+
+ vignetteSection.appendChild(newRoundButton);
+ }, 2000);
+ } else {
+ Array.from(guessButtons).forEach(button => button.addEventListener("click", checkGuess));
+ }
+ }
+
+ document.getElementById("start").addEventListener("click", startGame);
+ document.getElementById("restart").addEventListener("click", resetGame);
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/hermes3-8b.png b/data/artifacts/a17a50ae57ef/hermes3-8b.png
new file mode 100644
index 0000000..41c351c
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/hermes3-8b.png differ
diff --git a/data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.html b/data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.html
new file mode 100644
index 0000000..26c96ae
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --ink: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: 1px solid #d3cdc7;
+ --shadow: 0 8px 24px rgba(0,0,0,.12);
+ --hover-shadow: 0 16px 48px rgba(0,0,0,.18);
+ --glow: 0 0 24px rgba(176,71,46,.35);
+ --ease: cubic-bezier(.22,1,.36,1);
+ }
+ body {
+ margin: 0;
+ font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg);
+ color: var(--ink);
+ line-height: 1.5;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ }
+ .header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: var(--bg);
+ padding: 24px;
+ box-shadow: var(--shadow);
+ z-index: 1000;
+ }
+ .header h1 {
+ margin: 0;
+ font-family: 'Playfair Display', Georgia, serif;
+ font-size: 38px;
+ letter-spacing: .18em;
+ text-transform: uppercase;
+ }
+ .main-content {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-top: 96px;
+ }
+ .card-container {
+ display: grid;
+ gap: 24px;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ }
+ .card {
+ background-color: var(--surface);
+ border-radius: 14px;
+ box-shadow: var(--shadow);
+ padding: 32px;
+ transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
+ cursor: pointer;
+ position: relative;
+ }
+ .card:hover {
+ transform: translateY(-8px);
+ box-shadow: var(--hover-shadow);
+ }
+ .vignette {
+ width: 100%;
+ height: 260px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 14px;
+ }
+ .victorian { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><rect width="100%" height="100%" fill="#f5f2ea"/><path d="M0,0 L500,500 M500,0 L0,500 Z" stroke="#c9a961" stroke-width="8"/></svg>'); }
+ .art-deco { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><rect width="100%" height="100%" fill="#faf8f4"/><path d="M100,100 L400,400 M400,100 L100,400 Z" stroke="#b0472e" stroke-width="8"/></svg>'); }
+ .mid-century { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><rect width="100%" height="100%" fill="#fff9f1"/><path d="M0,250 L500,250 M250,0 L250,500 Z" stroke="#c65f38" stroke-width="8"/></svg>'); }
+ .grandmillennial { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><rect width="100%" height="100%" fill="#f7efe6"/><path d="M50,50 L450,450 M450,50 L50,450 Z" stroke="#e0a458" stroke-width="8"/></svg>'); }
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 2000;
+ }
+ .overlay-inner {
+ background-color: var(--surface);
+ padding: 48px;
+ border-radius: 14px;
+ text-align: center;
+ box-shadow: var(--shadow);
+ }
+ .overlay h2 {
+ margin-bottom: 24px;
+ font-size: 38px;
+ color: var(--accent);
+ }
+ .overlay p {
+ margin-bottom: 24px;
+ font-size: 16px;
+ }
+ .button-container {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ }
+ .btn {
+ background-color: var(--accent);
+ color: var(--surface);
+ border: none;
+ padding: 12px 24px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: .15em;
+ cursor: pointer;
+ transition: transform .15s ease-in-out, background-color .15s ease-in-out;
+ }
+ .btn:hover {
+ transform: translateY(-2px);
+ background-color: var(--muted);
+ }
+ </style>
+</head>
+<body>
+ <div class="header">
+ <h1>DESIGNER WALLCOVERINGS</h1>
+ </div>
+ <div class="main-content">
+ <div class="card-container" id="cardContainer"></div>
+ </div>
+ <div class="overlay" id="resultOverlay" style="display: none;">
+ <div class="overlay-inner">
+ <h2 id="resultTitle"></h2>
+ <p id="resultDescription"></p>
+ <div class="button-container">
+ <button class="btn" onclick="restartGame()">RESTART</button>
+ </div>
+ </div>
+ </div>
+ <script>
+ const eras = [
+ { name: 'Victorian', imageClass: 'victorian', fact: 'The Victorian era was known for its ornate and elaborate designs, often featuring intricate patterns and rich textures.' },
+ { name: 'Art Deco', imageClass: 'art-deco', fact: 'Art Deco is characterized by geometric shapes, metallic finishes, and bold colors, reflecting the modernism of the 1920s and 1930s.' },
+ { name: 'Mid-Century Modern', imageClass: 'mid-century', fact: 'This era focused on clean lines, organic forms, and a blend of traditional craftsmanship with new materials like plastic and metal.' },
+ { name: 'Grandmillennial', imageClass: 'grandmillennial', fact: 'The Grandmillennial style combines luxurious textures, bold colors, and modern technology to create a sophisticated yet playful aesthetic.' }
+ ];
+
+ let currentEra;
+ let score = 0;
+ const maxRounds = 8;
+
+ 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]];
+ }
+ }
+
+ function createCard(era, isCorrect) {
+ const card = document.createElement('div');
+ card.className = 'card';
+ const vignette = document.createElement('div');
+ vignette.className = `vignette ${era.imageClass}`;
+ card.appendChild(vignette);
+ card.addEventListener('click', () => checkAnswer(isCorrect));
+ return card;
+ }
+
+ function displayEra() {
+ currentEra = eras[Math.floor(Math.random() * eras.length)];
+ shuffle(eras);
+
+ const cardsContainer = document.getElementById('cardContainer');
+ cardsContainer.innerHTML = '';
+
+ for (let i = 0; i < 4; i++) {
+ const card = createCard(eras[i], currentEra.name === eras[i].name);
+ cardsContainer.appendChild(card);
+ }
+ }
+
+ function checkAnswer(isCorrect) {
+ if (isCorrect) {
+ score++;
+ }
+ showResult();
+ }
+
+ function showResult() {
+ const resultOverlay = document.getElementById('resultOverlay');
+ const resultTitle = document.getElementById('resultTitle');
+ const resultDescription = document.getElementById('resultDescription');
+
+ resultTitle.textContent = isCorrect ? 'CORRECT!' : 'WRONG!';
+ resultDescription.textContent = `The era was ${currentEra.name}. ${currentEra.fact} Your score: ${score}/${maxRounds}`;
+
+ if (score > localStorage.getItem('bestScore')) {
+ localStorage.setItem('bestScore', score);
+ resultDescription.textContent += `\nNew best score!`;
+ }
+
+ resultOverlay.style.display = 'flex';
+ }
+
+ function restartGame() {
+ const resultOverlay = document.getElementById('resultOverlay');
+ resultOverlay.style.display = 'none';
+ score = 0;
+ displayEra();
+ }
+
+ window.onload = () => {
+ displayEra();
+ };
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.png b/data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.png
new file mode 100644
index 0000000..6ab6335
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/hf-qwen-coder-32b.png differ
diff --git a/data/artifacts/a17a50ae57ef/kimi.html b/data/artifacts/a17a50ae57ef/kimi.html
new file mode 100644
index 0000000..8bee302
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/kimi.html
@@ -0,0 +1,914 @@
+<!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 {
+ /* Design Tokens - Luxury Palette */
+ --bg: #0d0d0f;
+ --surface: #17171c;
+ --surface-2: #1e1e24;
+ --ink: #f5f2ea;
+ --muted: #8a8578;
+ --accent: #c9a961;
+ --accent-dim: #7d6a45;
+ --line: rgba(245, 242, 234, 0.12);
+ --shadow: rgba(0, 0, 0, 0.4);
+ --shadow-soft: rgba(0, 0, 0, 0.15);
+
+ /* Typography */
+ --font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
+ --font-body: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
+
+ /* Motion */
+ --ease-swift: cubic-bezier(.22,.9,.24,1);
+ --ease-power: cubic-bezier(.77,0,.18,1);
+ --ease-hero: cubic-bezier(.22,1,.36,1);
+
+ /* Spacing Scale */
+ --space-xs: 0.5rem;
+ --space-sm: 0.875rem;
+ --space-md: 1.25rem;
+ --space-lg: 2rem;
+ --space-xl: 3.5rem;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+ background: var(--bg);
+ color: var(--ink);
+}
+
+body {
+ font-family: var(--font-body);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ 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(12px);
+ border-bottom: 1px solid var(--line);
+ display: flex;
+ align-items: center;
+ padding: 0 var(--space-lg);
+ z-index: 100;
+}
+
+.wordmark {
+ font-family: var(--font-display);
+ font-size: 18px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--ink);
+ line-height: 1.3;
+ width: 260px;
+}
+
+.score-panel {
+ margin-left: auto;
+ display: flex;
+ gap: var(--space-lg);
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.score-panel span {
+ color: var(--accent);
+ font-weight: 600;
+}
+
+/* Main Content */
+main {
+ flex: 1;
+ margin-top: 72px;
+ padding: var(--space-xl) var(--space-lg);
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+}
+
+.game-container {
+ display: grid;
+ gap: var(--space-xl);
+}
+
+/* Vignette Display */
+.vignette-stage {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 16/10;
+ background: var(--surface);
+ border-radius: 4px;
+ overflow: hidden;
+ box-shadow:
+ 0 24px 48px var(--shadow),
+ 0 2px 4px var(--shadow-soft);
+ border: 1px solid var(--line);
+}
+
+.vignette {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 800ms var(--ease-hero);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.vignette.active {
+ opacity: 1;
+}
+
+/* Victorian Vignette */
+.vignette-victorian {
+ background: linear-gradient(135deg, #1a1518 0%, #2d1810 50%, #1a1518 100%);
+}
+
+.vignette-victorian::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(201, 169, 97, 0.03) 48px, rgba(201, 169, 97, 0.03) 50px),
+ repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(201, 169, 97, 0.03) 48px, rgba(201, 169, 97, 0.03) 50px);
+}
+
+.vignette-victorian .ornament {
+ position: absolute;
+ width: 280px;
+ height: 280px;
+ border: 2px solid rgba(201, 169, 97, 0.3);
+ border-radius: 50%;
+}
+
+.vignette-victorian .ornament::before {
+ content: '';
+ position: absolute;
+ inset: 20px;
+ border: 1px solid rgba(201, 169, 97, 0.2);
+ border-radius: 50%;
+}
+
+.vignette-victorian .ornament::after {
+ content: '';
+ position: absolute;
+ inset: 40px;
+ border: 1px solid rgba(201, 169, 97, 0.15);
+ border-radius: 50%;
+}
+
+.vignette-victorian .furniture {
+ position: absolute;
+ bottom: 60px;
+ width: 200px;
+ height: 120px;
+ background: linear-gradient(180deg, #3d2817 0%, #2a1a0f 100%);
+ border-radius: 4px 4px 0 0;
+ box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
+}
+
+.vignette-victorian .furniture::before {
+ content: '';
+ position: absolute;
+ top: -30px;
+ left: 20px;
+ right: 20px;
+ height: 40px;
+ background: linear-gradient(180deg, #4a3728 0%, #3d2817 100%);
+ border-radius: 4px;
+}
+
+.vignette-victorian .wall-detail {
+ position: absolute;
+ top: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 120px;
+ height: 60px;
+ background: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.15) 0%, transparent 70%);
+}
+
+/* Art Deco Vignette */
+.vignette-artdeco {
+ background: linear-gradient(180deg, #0f1419 0%, #1a1f2e 100%);
+}
+
+.vignette-artdeco::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image:
+ linear-gradient(45deg, transparent 48%, rgba(201, 169, 97, 0.08) 49%, rgba(201, 169, 97, 0.08) 51%, transparent 52%),
+ linear-gradient(-45deg, transparent 48%, rgba(201, 169, 97, 0.08) 49%, rgba(201, 169, 97, 0.08) 51%, transparent 52%);
+ background-size: 60px 60px;
+}
+
+.vignette-artdeco .sunburst {
+ position: absolute;
+ width: 400px;
+ height: 400px;
+ background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 169, 97, 0.1) 5deg, transparent 10deg, transparent 35deg, rgba(201, 169, 97, 0.1) 40deg, transparent 45deg, transparent 80deg, rgba(201, 169, 97, 0.1) 85deg, transparent 90deg, transparent 125deg, rgba(201, 169, 97, 0.1) 130deg, transparent 135deg, transparent 170deg, rgba(201, 169, 97, 0.1) 175deg, transparent 180deg, transparent 215deg, rgba(201, 169, 97, 0.1) 220deg, transparent 225deg, transparent 260deg, rgba(201, 169, 97, 0.1) 265deg, transparent 270deg, transparent 305deg, rgba(201, 169, 97, 0.1) 310deg, transparent 315deg, transparent 350deg, rgba(201, 169, 97, 0.1) 355deg, transparent 360deg);
+ animation: rotate 60s linear infinite;
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.vignette-artdeco .geometric-panel {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 240px;
+ height: 160px;
+ background: linear-gradient(180deg, #1e2a3a 0%, #0f1419 100%);
+ clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
+ border-top: 3px solid var(--accent);
+}
+
+.vignette-artdeco .stepped-form {
+ position: absolute;
+ top: 60px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 180px;
+ height: 40px;
+ background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 97, 0.2) 50%, transparent 100%);
+ clip-path: polygon(0% 50%, 20% 0%, 40% 50%, 60% 0%, 80% 50%, 100% 0%, 100% 100%, 0% 100%);
+}
+
+/* Mid-Century Modern Vignette */
+.vignette-midcentury {
+ background: linear-gradient(180deg, #e8e4dc 0%, #d4cfc4 100%);
+}
+
+.vignette-midcentury::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: radial-gradient(circle at 30% 50%, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
+ radial-gradient(circle at 70% 50%, rgba(139, 115, 85, 0.05) 0%, transparent 50%);
+}
+
+.vignette-midcentury .organic-shape {
+ position: absolute;
+ width: 200px;
+ height: 120px;
+ background: rgba(201, 169, 97, 0.15);
+ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.vignette-midcentury .furniture-mc {
+ position: absolute;
+ bottom: 80px;
+ width: 220px;
+ height: 80px;
+ background: linear-gradient(180deg, #8b6914 0%, #6b4e0a 100%);
+ border-radius: 4px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+.vignette-midcentury .furniture-mc::before {
+ content: '';
+ position: absolute;
+ bottom: -40px;
+ left: 30px;
+ width: 8px;
+ height: 40px;
+ background: #5a4508;
+ border-radius: 0 0 4px 4px;
+ box-shadow: 152px 0 0 #5a4508;
+}
+
+.vignette-midcentury .starburst {
+ position: absolute;
+ top: 60px;
+ right: 80px;
+ width: 80px;
+ height: 80px;
+ background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%);
+ opacity: 0.6;
+}
+
+.vignette-midcentury .starburst::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: inherit;
+ transform: rotate(45deg);
+}
+
+/* Grandmillennial Vignette */
+.vignette-grandmillennial {
+ background: linear-gradient(180deg, #f5f2ea 0%, #ebe6dc 100%);
+}
+
+.vignette-grandmillennial::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 20% 30%, rgba(139, 115, 85, 0.06) 0%, transparent 25%),
+ radial-gradient(circle at 80% 70%, rgba(139, 115, 85, 0.06) 0%, transparent 25%),
+ radial-gradient(circle at 50% 50%, rgba(139, 115, 85, 0.04) 0%, transparent 35%);
+}
+
+.vignette-grandmillennial .floral-motif {
+ position: absolute;
+ top: 40px;
+ left: 60px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid rgba(139, 115, 85, 0.2);
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 30%, rgba(201, 169, 97, 0.1) 0%, transparent 50%);
+}
+
+.vignette-grandmillennial .floral-motif::before {
+ content: '';
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 60px;
+ height: 60px;
+ border: 1px solid rgba(139, 115, 85, 0.15);
+ border-radius: 50%;
+}
+
+.vignette-grandmillennial .wicker {
+ position: absolute;
+ bottom: 60px;
+ right: 100px;
+ width: 120px;
+ height: 100px;
+ background:
+ repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(139, 115, 85, 0.15) 8px, rgba(139, 115, 85, 0.15) 10px),
+ repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(139, 115, 85, 0.15) 8px, rgba(139, 115, 85, 0.15) 10px);
+ border-radius: 8px;
+ opacity: 0.6;
+}
+
+.vignette-grandmillennial .traditional-frame {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 160px;
+ height: 100px;
+ border: 3px solid rgba(139, 115, 85, 0.3);
+ background: rgba(255,255,255,0.4);
+}
+
+.vignette-grandmillennial .traditional-frame::before {
+ content: '';
+ position: absolute;
+ inset: 8px;
+ border: 1px solid rgba(139, 115, 85, 0.2);
+}
+
+/* Controls Section */
+.controls {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: var(--space-md);
+}
+
+.era-btn {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ padding: var(--space-lg) var(--space-md);
+ cursor: pointer;
+ transition: all 300ms var(--ease-swift);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-sm);
+ position: relative;
+ overflow: hidden;
+}
+
+.era-btn:hover {
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px var(--shadow-soft);
+}
+
+.era-btn:active {
+ transform: translateY(0);
+}
+
+.era-btn .swatch {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ border: 1px solid var(--line);
+ margin-bottom: var(--space-xs);
+}
+
+.era-btn[data-era="victorian"] .swatch {
+ background: conic-gradient(from 0deg, #2d1810 0deg, #1a1518 90deg, #3d2817 180deg, #2d1810 270deg, #1a1518 360deg);
+ box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
+}
+
+.era-btn[data-era="artdeco"] .swatch {
+ background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 50%, var(--accent) 50%, #c9a961 100%);
+ position: relative;
+}
+
+.era-btn[data-era="artdeco"] .swatch::before {
+ content: '';
+ position: absolute;
+ inset: 8px;
+ border: 1px solid var(--accent);
+ border-radius: 50%;
+}
+
+.era-btn[data-era="midcentury"] .swatch {
+ background: radial-gradient(circle at 30% 30%, #e8e4dc 0%, #d4cfc4 40%, #8b6914 40%, #6b4e0a 100%);
+ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+}
+
+.era-btn[data-era="grandmillennial"] .swatch {
+ background: #f5f2ea;
+ position: relative;
+ border: 2px solid rgba(139, 115, 85, 0.3);
+}
+
+.era-btn[data-era="grandmillennial"] .swatch::before {
+ content: '';
+ position: absolute;
+ inset: 6px;
+ border: 1px dotted rgba(139, 115, 85, 0.4);
+ border-radius: 50%;
+}
+
+.era-btn .label {
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+ transition: color 300ms var(--ease-swift);
+}
+
+.era-btn:hover .label {
+ color: var(--ink);
+}
+
+/* Overlay States */
+.overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(13, 13, 15, 0.95);
+ backdrop-filter: blur(8px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 400ms var(--ease-hero);
+ z-index: 200;
+ padding: var(--space-lg);
+}
+
+.overlay.active {
+ opacity: 1;
+ pointer-events: all;
+}
+
+.overlay-content {
+ max-width: 480px;
+ text-align: center;
+ transform: translateY(20px);
+ transition: transform 500ms var(--ease-hero);
+}
+
+.overlay.active .overlay-content {
+ transform: translateY(0);
+}
+
+.overlay h2 {
+ font-family: var(--font-display);
+ font-size: 38px;
+ color: var(--ink);
+ margin-bottom: var(--space-md);
+ letter-spacing: -0.02em;
+}
+
+.overlay p {
+ color: var(--muted);
+ font-size: 16px;
+ line-height: 1.7;
+ margin-bottom: var(--space-lg);
+}
+
+.fun-fact {
+ background: var(--surface);
+ border: 1px solid var(--line);
+ padding: var(--space-lg);
+ margin: var(--space-lg) 0;
+ text-align: left;
+ position: relative;
+}
+
+.fun-fact::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
+}
+
+.fun-fact-label {
+ font-size: 10px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: var(--space-sm);
+ display: block;
+}
+
+.fun-fact-text {
+ color: var(--ink);
+ font-size: 14px;
+ line-height: 1.6;
+ font-style: italic;
+}
+
+.btn-primary {
+ background: transparent;
+ border: 1px solid var(--accent);
+ color: var(--accent);
+ padding: var(--space-sm) var(--space-xl);
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: all 300ms var(--ease-swift);
+ margin-top: var(--space-md);
+}
+
+.btn-primary:hover {
+ background: var(--accent);
+ color: var(--bg);
+}
+
+.result-correct {
+ color: var(--accent);
+}
+
+.result-wrong {
+ color: #c96161;
+}
+
+/* Start Screen */
+.start-screen h1 {
+ font-family: var(--font-display);
+ font-size: 50px;
+ letter-spacing: -0.02em;
+ margin-bottom: var(--space-md);
+ color: var(--ink);
+}
+
+.start-screen .subtitle {
+ font-size: 14px;
+ color: var(--muted);
+ margin-bottom: var(--space-xl);
+ letter-spacing: 0.05em;
+}
+
+.round-indicator {
+ position: absolute;
+ top: var(--space-md);
+ right: var(--space-md);
+ font-family: var(--font-body);
+ font-size: 11px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+ background: rgba(13, 13, 15, 0.6);
+ padding: var(--space-xs) var(--space-sm);
+ border-radius: 2px;
+ z-index: 10;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .controls {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .vignette-stage {
+ aspect-ratio: 4/3;
+ }
+
+ .wordmark {
+ font-size: 14px;
+ width: 200px;
+ }
+
+ .start-screen h1 {
+ font-size: 32px;
+ }
+}
+</style>
+</head>
+<body>
+<header class="header">
+ <div class="wordmark">Designer Wallcoverings</div>
+ <div class="score-panel">
+ <div>Score: <span id="score">0</span>/8</div>
+ <div>Best: <span id="best">0</span></div>
+ </div>
+</header>
+
+<main>
+ <div class="game-container" id="gameArea" style="display: none;">
+ <div class="vignette-stage" id="vignetteStage">
+ <div class="round-indicator">Round <span id="roundNum">1</span> of 8</div>
+
+ <!-- Victorian -->
+ <div class="vignette vignette-victorian" data-era="victorian">
+ <div class="ornament"></div>
+ <div class="furniture"></div>
+ <div class="wall-detail"></div>
+ </div>
+
+ <!-- Art Deco -->
+ <div class="vignette vignette-artdeco" data-era="artdeco">
+ <div class="sunburst"></div>
+ <div class="stepped-form"></div>
+ <div class="geometric-panel"></div>
+ </div>
+
+ <!-- Mid-Century Modern -->
+ <div class="vignette vignette-midcentury" data-era="midcentury">
+ <div class="organic-shape"></div>
+ <div class="furniture-mc"></div>
+ <div class="starburst"></div>
+ </div>
+
+ <!-- Grandmillennial -->
+ <div class="vignette vignette-grandmillennial" data-era="grandmillennial">
+ <div class="floral-motif"></div>
+ <div class="traditional-frame"></div>
+ <div class="wicker"></div>
+ </div>
+ </div>
+
+ <div class="controls" id="controls">
+ <button class="era-btn" data-era="victorian">
+ <div class="swatch"></div>
+ <span class="label">Victorian</span>
+ </button>
+ <button class="era-btn" data-era="artdeco">
+ <div class="swatch"></div>
+ <span class="label">Art Deco</span>
+ </button>
+ <button class="era-btn" data-era="midcentury">
+ <div class="swatch"></div>
+ <span class="label">Mid-Century</span>
+ </button>
+ <button class="era-btn" data-era="grandmillennial">
+ <div class="swatch"></div>
+ <span class="label">Grandmillennial</span>
+ </button>
+ </div>
+ </div>
+</main>
+
+<!-- Start Overlay -->
+<div class="overlay active" id="startOverlay">
+ <div class="overlay-content start-screen">
+ <h1>Which Design Era?</h1>
+ <p class="subtitle">Test your eye for interior design history</p>
+ <p style="color: var(--muted); font-size: 14px; margin-bottom: var(--space-xl);">
+ Identify the style of each room vignette from four iconic periods:<br>
+ Victorian opulence, Art Deco glamour, Mid-Century optimism, or Grandmillennial charm.
+ </p>
+ <button class="btn-primary" onclick="game.start()">Begin Quiz</button>
+ </div>
+</div>
+
+<!-- Result Overlay -->
+<div class="overlay" id="resultOverlay">
+ <div class="overlay-content">
+ <h2 id="resultTitle"></h2>
+ <p id="resultMessage"></p>
+ <div class="fun-fact" id="funFactBox" style="display: none;">
+ <span class="fun-fact-label">Design Note</span>
+ <p class="fun-fact-text" id="funFactText"></p>
+ </div>
+ <button class="btn-primary" id="nextBtn" onclick="game.nextRound()">Next Room</button>
+ </div>
+</div>
+
+<!-- Game Over Overlay -->
+<div class="overlay" id="gameOverOverlay">
+ <div class="overlay-content">
+ <h2 id="gameOverTitle">Quiz Complete</h2>
+ <p id="finalScore"></p>
+ <button class="btn-primary" onclick="game.restart()">Play Again</button>
+ </div>
+</div>
+
+<script>
+const game = {
+ eras: ['victorian', 'artdeco', 'midcentury', 'grandmillennial'],
+ facts: {
+ victorian: "Victorian interiors (1837–1901) favored dark woods, ornate carving, and rich jewel tones. Layered patterns and heavy drapery created cocoon-like spaces that signaled wealth and worldliness.",
+ artdeco: "Art Deco (1920s–1930s) celebrated the machine age with geometric patterns, sunburst motifs, and lavish materials like lacquer, chrome, and exotic woods. Symmetry and stepped forms created dramatic verticality.",
+ midcentury: "Mid-Century Modern (1945–1969) embraced organic curves, clean lines, and honest materials. Designers like Eames and Saarinen brought the outside in with teak, wool, and optimistic atomic-era patterns.",
+ grandmillennial: "Grandmillennial style (2010s–present) reinterprets traditional chintz, wicker, and collected antiques through a modern lens. It's maximalism with memory—pattern-on-pattern coziness meets fresh millennial irreverence."
+ },
+ rounds: [],
+ currentRound: 0,
+ score: 0,
+ bestScore: parseInt(localStorage.getItem('dw_best_score') || '0'),
+
+ init() {
+ document.getElementById('best').textContent = this.bestScore;
+ this.setupControls();
+ },
+
+ setupControls() {
+ document.querySelectorAll('.era-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const era = btn.dataset.era;
+ this.makeGuess(era);
+ });
+ });
+ },
+
+ start() {
+ this.generateRounds();
+ this.currentRound = 0;
+ this.score = 0;
+ this.updateScore();
+ document.getElementById('startOverlay').classList.remove('active');
+ document.getElementById('gameArea').style.display = 'block';
+ this.showRound();
+ },
+
+ generateRounds() {
+ this.rounds = [];
+ // Ensure at least one of each era in first 4, then random for remaining 4
+ const shuffled = [...this.eras].sort(() => Math.random() - 0.5);
+ this.rounds.push(...shuffled);
+ for (let i = 4; i < 8; i++) {
+ this.rounds.push(this.eras[Math.floor(Math.random() * this.eras.length)]);
+ }
+ },
+
+ showRound() {
+ const era = this.rounds[this.currentRound];
+ document.getElementById('roundNum').textContent = this.currentRound + 1;
+
+ // Hide all vignettes
+ document.querySelectorAll('.vignette').forEach(v => v.classList.remove('active'));
+
+ // Show current with slight delay for transition
+ setTimeout(() => {
+ document.querySelector(`.vignette[data-era="${era}"]`).classList.add('active');
+ }, 50);
+ },
+
+ makeGuess(guessedEra) {
+ const correctEra = this.rounds[this.currentRound];
+ const isCorrect = guessedEra === correctEra;
+
+ if (isCorrect) {
+ this.score++;
+ this.updateScore();
+ }
+
+ this.showResult(isCorrect, correctEra);
+ },
+
+ showResult(isCorrect, era) {
+ const overlay = document.getElementById('resultOverlay');
+ const title = document.getElementById('resultTitle');
+ const message = document.getElementById('resultMessage');
+ const factBox = document.getElementById('funFactBox');
+ const factText = document.getElementById('funFactText');
+ const nextBtn = document.getElementById('nextBtn');
+
+ if (isCorrect) {
+ title.innerHTML = '<span class="result-correct">Correct</span>';
+ title.className = 'result-correct';
+ message.textContent = `This is indeed ${this.getEraDisplayName(era)} style.`;
+ } else {
+ title.innerHTML = '<span class="result-wrong">Not Quite</span>';
+ title.className = 'result-wrong';
+ message.textContent = `This is ${this.getEraDisplayName(era)}, not ${this.getEraDisplayName(event ? event.target.closest('.era-btn').dataset.era : 'your guess')}.`;
+ }
+
+ factText.textContent = this.facts[era];
+ factBox.style.display = 'block';
+
+ if (this.currentRound === 7) {
+ nextBtn.textContent = 'See Final Score';
+ } else {
+ nextBtn.textContent = 'Next Room';
+ }
+
+ overlay.classList.add('active');
+ },
+
+ getEraDisplayName(era) {
+ const names = {
+ victorian: 'Victorian',
+ artdeco: 'Art Deco',
+ midcentury: 'Mid-Century Modern',
+ grandmillennial: 'Grandmillennial'
+ };
+ return names[era] || era;
+ },
+
+ nextRound() {
+ document.getElementById('resultOverlay').classList.remove('active');
+ this.currentRound++;
+
+ if (this.currentRound >= 8) {
+ this.endGame();
+ } else {
+ this.showRound();
+ }
+ },
+
+ endGame() {
+ // Update best score
+ if (this.score > this.bestScore) {
+ this.bestScore = this.score;
+ localStorage.setItem('dw_best_score', this.bestScore.toString());
+ document.getElementById('best').textContent = this.bestScore;
+ }
+
+ const overlay = document.getElementById('gameOverOverlay');
+ const title = document.getElementById('gameOverTitle');
+ const finalScore = document.getElementById('finalScore');
+
+ let message = '';
+ if (this.score === 8) {
+ title.textContent = 'Perfect Eye';
+ message = 'Impeccable taste. You scored 8/8—a true connoisseur of design history.';
+ } else if (this.score >= 6) {
+ title.textContent = 'Excellent Vision';
+ message = `You scored ${this.score}/8. Your eye for period detail is refined.`;
+ } else if (this.score >= 4) {
+ title.textContent = 'Developing Eye';
+ message = `You scored ${this.score}/8. Keep studying those material palettes.`;
+ } else {
+ title.textContent = 'Room to Grow';
+ message = `You scored ${this.score}/8. Perhaps a visit to the design archives is in order.`;
+ }
+
+ finalScore.textContent = message;
+ overlay.classList.add('active');
+ },
+
+ restart() {
+ document.getElementById('gameOverOverlay').classList.remove('active');
+ this.start();
+ },
+
+ updateScore() {
+ document.getElementById('score').textContent = this.score;
+ }
+};
+
+game.init();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/kimi.png b/data/artifacts/a17a50ae57ef/kimi.png
new file mode 100644
index 0000000..27fa188
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/kimi.png differ
diff --git a/data/artifacts/a17a50ae57ef/qwen3-14b.html b/data/artifacts/a17a50ae57ef/qwen3-14b.html
new file mode 100644
index 0000000..044ab49
--- /dev/null
+++ b/data/artifacts/a17a50ae57ef/qwen3-14b.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Which Design Era?</title>
+ <style>
+ :root {
+ --bg: #faf8f4;
+ --surface: #ffffff;
+ --ink: #1c1a17;
+ --muted: #9b948a;
+ --accent: #b0472e;
+ --line: #e0e0e0;
+ --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
+ --font-display: 'Playfair Display', Georgia, serif;
+ --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+ --spacing: 4px;
+ --card-radius: 14px;
+ --card-gap: 24px;
+ --grid-minmax: minmax(260px, 1fr);
+ --section-pad: 96px;
+ --glow: 0 0 24px rgba(var(--accent-rgb), 0.35);
+ --accent-rgb: 176, 69, 46;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: var(--font-body);
+ background-color: var(--bg);
+ color: var(--ink);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+ }
+
+ header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 16px 48px;
+ background-color: var(--surface);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ font-family: var(--font-display);
+ font-size: 24px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ display: flex;
+ align-items: center;
+ z-index: 1000;
+ }
+
+ main {
+ padding-top: var(--section-pad);
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding-bottom: 48px;
+ }
+
+ .vignette {
+ width: 400px;
+ height: 300px;
+ border: 1px solid var(--line);
+ box-shadow: var(--shadow);
+ background-size: cover;
+ background-position: center;
+ border-radius: var(--card-radius);
+ transition: transform 0.3s var(--ease);
+ }
+
+ .vignette:hover {
+ transform: scale(1.02);
+ box-shadow: var(--shadow), var(--glow);
+ }
+
+ .controls {
+ margin-top: 32px;
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .controls button {
+ font-family: var(--font-body);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ padding: 12px 24px;
+ background-color: var(--surface);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ cursor: pointer;
+ transition: background-color 0.2s var(--ease);
+ }
+
+ .controls button:hover {
+ background-color: var(--muted);
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 2000;
+ visibility: hidden;
+ opacity: 0;
+ transition: opacity 0.5s var(--ease);
+ }
+
+ .overlay.show {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .overlay-content {
+ background-color: var(--surface);
+ padding: 48px;
+ border-radius: var(--card-radius);
+ box-shadow: var(--shadow);
+ max-width: 600px;
+ text-align: center;
+ font-family: var(--font-body);
+ font-size: 16px;
+ line-height: 1.6;
+ color: var(--ink);
+ }
+
+ .overlay-content h2 {
+ font-family: var(--font-display);
+ font-size: 28px;
+ margin-bottom: 24px;
+ color: var(--accent);
+ }
+
+ .overlay-content .scoreboard {
+ margin: 24px 0;
+ font-size: 18px;
+ font-weight: bold;
+ }
+
+ .overlay-content .funfact {
+ margin-top: 24px;
+ color: var(--muted);
+ }
+
+ .overlay-footer {
+ margin-top: 32px;
+ display: flex;
+ gap: 16px;
+ }
+
+ .overlay-footer button {
+ font-family: var(--font-body);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ padding: 12px 24px;
+ background-color: var(--accent);
+ color: var(--surface);
+ border: none;
+ border-radius: 14px;
+ cursor: pointer;
+ transition: background-color 0.2s var(--ease);
+ }
+
+ .overlay-footer button:hover {
+ background-color: #a0472e;
+ }
+
+ footer {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ padding: 16px;
+ font-size: 12px;
+ color: var(--muted);
+ font-family: var(--font-body);
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(28px);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+ }
+
+ .fade-up {
+ animation: fadeUp 0.7s var(--ease) both;
+ }
+
+ .scoreboard {
+ font-size: 20px;
+ font-weight: bold;
+ margin: 24px 0;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ DESIGNER WALLCOVERINGS
+ </header>
+ <main>
+ <div class="vignette" id="vignette"></div>
+ <div class="controls" id="controls"></div>
+ <div class="scoreboard" id="scoreboard">Score: 0 / 8</div>
+ </main>
+ <footer>
+ A game by Designer Wallcoverings. Use your best judgment.
+ </footer>
+
+ <div class="overlay" id="overlay">
+ <div class="overlay-content fade-up">
+ <h2 id="overlay-title">Design Era Revealed!</h2>
+ <div class="scoreboard" id="overlay-score"></div>
+ <div class="funfact" id="overlay-funfact"></div>
+ <div class="overlay-footer">
+ <button onclick="restartGame()">Restart</button>
+ <button onclick="hideOverlay()">Close</button>
+ </div>
+ </div>
+ </div>
+
+ <script>
+ const eras = [
+ {
+ name: "Victorian",
+ image: "https://source.unsplash.com/400x300/?victorian,interior,design,wallpaper",
+ funFact: "Victorian design was heavily influenced by the Industrial Revolution, often incorporating ornate woodwork and intricate fabrics."
+ },
+ {
+ name: "Art Deco",
+ image: "https://source.unsplash.com/400x300/?art-deco,interior,design,wallpaper",
+ funFact: "Art Deco was all about geometric shapes and bold colors—think streamlined furniture and mirrored surfaces."
+ },
+ {
+ name: "Mid-Century Modern",
+ image: "https://source.unsplash.com/400x300/?mid-century-modern,interior,design,wallpaper",
+ funFact: "Mid-Century Modern design is known for its clean lines, functionality, and use of natural materials like wood and leather."
+ },
+ {
+ name: "Grandmillennial",
+ image: "https://source.unsplash.com/400x300/?grandmillennial,interior,design,wallpaper",
+ funFact: "Grandmillennial style blends vintage charm with modern minimalism, often featuring pastel tones and floral prints."
+ }
+ ];
+
+ const maxRounds = 8;
+ let currentRound = 0;
+ let score = 0;
+ let currentEra = null;
+
+ const vignette = document.getElementById('vignette');
+ const controls = document.getElementById('controls');
+ const scoreboard = document.getElementById('scoreboard');
+ const overlay = document.getElementById('overlay');
+ const overlayTitle = document.getElementById('overlay-title');
+ const overlayScore = document.getElementById('overlay-score');
+ const overlayFunfact = document.getElementById('overlay-funfact');
+
+ const bestScoreKey = 'designer-wallcoverings-best-score';
+
+ function shuffleArray(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() {
+ controls.innerHTML = '';
+ const buttons = [];
+ const shuffledEras = shuffleArray([...eras]);
+
+ for (let i = 0; i < 4; i++) {
+ const era = shuffledEras[i];
+ const button = document.createElement('button');
+ button.textContent = era.name;
+ button.onclick = () => checkGuess(era.name);
+ buttons.push(button);
+ }
+
+ buttons.sort(() => Math.random() - 0.5).forEach(button => controls.appendChild(button));
+ }
+
+ function checkGuess(guess) {
+ if (guess === currentEra.name) {
+ score++;
+ alert(`Correct! ${currentEra.name} era.`);
+ } else {
+ alert(`Incorrect. The correct era was ${currentEra.name}.`);
+ }
+
+ currentRound++;
+ if (currentRound < maxRounds) {
+ showNextRound();
+ } else {
+ endGame();
+ }
+ }
+
+ function showNextRound() {
+ if (currentRound < maxRounds) {
+ currentEra = eras[Math.floor(Math.random() * eras.length)];
+ vignette.style.backgroundImage = `url(${currentEra.image})`;
+ generateButtons();
+ scoreboard.textContent = `Score: ${score} / ${maxRounds}`;
+ }
+ }
+
+ function endGame() {
+ let bestScore = parseInt(localStorage.getItem(bestScoreKey)) || 0;
+ if (score > bestScore) {
+ localStorage.setItem(bestScoreKey, score);
+ }
+
+ overlayTitle.textContent = "Game Over!";
+ overlayScore.textContent = `Final Score: ${score} / ${maxRounds}`;
+ overlayFunfact.textContent = "Thank you for playing!";
+
+ overlay.classList.add('show');
+ }
+
+ function restartGame() {
+ currentRound = 0;
+ score = 0;
+ showNextRound();
+ hideOverlay();
+ }
+
+ function hideOverlay() {
+ overlay.classList.remove('show');
+ }
+
+ function initGame() {
+ showNextRound();
+ }
+
+ initGame();
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/data/artifacts/a17a50ae57ef/qwen3-14b.png b/data/artifacts/a17a50ae57ef/qwen3-14b.png
new file mode 100644
index 0000000..5621401
Binary files /dev/null and b/data/artifacts/a17a50ae57ef/qwen3-14b.png differ
diff --git a/data/challenges.json b/data/challenges.json
index 7e77b6d..2d5ec39 100644
--- a/data/challenges.json
+++ b/data/challenges.json
@@ -15852,7 +15852,7 @@
"thumb": true
}
],
- "judging": false,
+ "judging": true,
"judged_at": null
},
{
@@ -15905,7 +15905,14 @@
"finished_at": "2026-07-25T08:25:20.778Z",
"queued_at": "2026-07-25T08:12:12.478Z",
"bytes": 8025,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The game is functional and visually appealing with clear HUD elements and a monospace ASCII grid.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "qwen25-7b",
@@ -15917,7 +15924,14 @@
"finished_at": "2026-07-25T08:13:04.146Z",
"queued_at": "2026-07-25T08:12:12.483Z",
"bytes": 7887,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The game is functional and visually appealing with clear HUD elements and a monospace grid layout.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 5.5
+ },
+ "aiSpread": 3.5
},
{
"model": "hf-qwen-coder-32b",
@@ -15929,12 +15943,20 @@
"finished_at": "2026-07-25T08:26:54.225Z",
"queued_at": "2026-07-25T08:12:12.488Z",
"bytes": 7744,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The page is fully functional and visually polished, adhering to the challenge's requirements.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
}
],
- "judging": true,
+ "judging": false,
"category": "Games",
- "judged_at": null
+ "judged_at": "2026-07-25T11:10:58.720Z",
+ "aiPick": "hermes3-8b"
},
{
"id": "8443d9162963",
@@ -21126,7 +21148,14 @@
"finished_at": "2026-07-25T11:01:51.963Z",
"queued_at": "2026-07-25T11:00:11.352Z",
"bytes": 13736,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The HTML file meets all the requirements and has a polished, luxurious appearance.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "gemma3-12b",
@@ -21138,7 +21167,14 @@
"finished_at": "2026-07-25T11:03:02.798Z",
"queued_at": "2026-07-25T11:00:11.360Z",
"bytes": 10413,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The design is visually appealing and adheres to the luxury UI requirements, but lacks some of the finer details in terms of color contrast and motion easing.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "hermes3-8b",
@@ -21150,7 +21186,14 @@
"finished_at": "2026-07-25T11:03:18.170Z",
"queued_at": "2026-07-25T11:00:11.367Z",
"bytes": 3597,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.3,
+ "aiReason": "The design is visually appealing but lacks the necessary interactive elements and branding details required by the challenge.",
+ "aiScores": {
+ "qwen2.5vl:7b": 6,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "qwen25-7b",
@@ -21162,17 +21205,33 @@
"finished_at": "2026-07-25T11:00:43.583Z",
"queued_at": "2026-07-25T11:00:11.374Z",
"bytes": 4609,
- "thumb": true
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The design is visually appealing and adheres to the luxury UI requirements, but it lacks some of the finer details such as motion easing and a more refined layout.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
},
{
"model": "hf-qwen-coder-32b",
- "status": "running",
+ "status": "done",
"error": null,
- "seconds": null,
- "cost": null,
+ "seconds": 113,
+ "cost": 0,
"started_at": "2026-07-25T11:03:18.182Z",
- "finished_at": null,
- "queued_at": "2026-07-25T11:00:11.379Z"
+ "finished_at": "2026-07-25T11:05:10.824Z",
+ "queued_at": "2026-07-25T11:00:11.379Z",
+ "bytes": 9319,
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The design is visually appealing and fulfills most of the requirements but lacks some refinement in typography and layout.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 0.5
},
{
"model": "claude-code",
@@ -21184,7 +21243,14 @@
"finished_at": "2026-07-25T11:03:20.530Z",
"queued_at": "2026-07-25T11:00:11.382Z",
"bytes": 27985,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The design is visually appealing and adheres closely to the DW LUXURY UI requirements, with a polished layout and thoughtful use of color and typography.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
},
{
"model": "kimi",
@@ -21202,7 +21268,14 @@
"hyperframes"
],
"bytes": 19732,
- "thumb": true
+ "thumb": true,
+ "aiScore": 7.8,
+ "aiReason": "The model effectively fulfills the challenge by creating a visually appealing and functional color palette builder that adheres to luxury UI requirements.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 2.5
},
{
"model": "gpt",
@@ -21219,7 +21292,14 @@
"hyperframes"
],
"bytes": 39730,
- "thumb": true
+ "thumb": true,
+ "aiScore": 9.3,
+ "aiReason": "The design is visually appealing and adheres closely to the DW Luxury UI requirements. It effectively uses a restrained color palette and maintains a high level of detail in its layout.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 9.5
+ },
+ "aiSpread": 0.5
},
{
"model": "grok",
@@ -21237,9 +21317,19 @@
"hyperframes"
],
"bytes": 30160,
- "thumb": true
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file effectively fulfills the challenge requirements with a polished and luxurious design.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
}
- ]
+ ],
+ "judging": false,
+ "aiPick": "gpt",
+ "judged_at": "2026-07-25T11:11:56.397Z"
},
{
"id": "a17a50ae57ef",
@@ -21249,6 +21339,207 @@
"designTools": true,
"created_at": "2026-07-25T11:00:11.445Z",
"winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "done",
+ "error": null,
+ "seconds": 62,
+ "cost": 0,
+ "started_at": "2026-07-25T11:05:10.834Z",
+ "finished_at": "2026-07-25T11:06:13.336Z",
+ "queued_at": "2026-07-25T11:00:11.448Z",
+ "bytes": 9385,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The game fulfills the requirements well but lacks some visual flair and could benefit from more refined typography or color contrast.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "done",
+ "error": null,
+ "seconds": 58,
+ "cost": 0,
+ "started_at": "2026-07-25T11:06:13.343Z",
+ "finished_at": "2026-07-25T11:07:11.509Z",
+ "queued_at": "2026-07-25T11:00:11.452Z",
+ "bytes": 8659,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The game is functional and visually appealing but lacks some of the finer details required for a polished luxury aesthetic.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "hermes3-8b",
+ "status": "done",
+ "error": null,
+ "seconds": 53,
+ "cost": 0,
+ "started_at": "2026-07-25T11:07:11.515Z",
+ "finished_at": "2026-07-25T11:08:04.782Z",
+ "queued_at": "2026-07-25T11:00:11.455Z",
+ "bytes": 10492,
+ "thumb": true,
+ "aiScore": 7.3,
+ "aiReason": "The HTML file adheres to the challenge's requirements but lacks some visual flair and could benefit from more refined typography and color contrast.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "done",
+ "error": null,
+ "seconds": 30,
+ "cost": 0,
+ "started_at": "2026-07-25T11:00:43.590Z",
+ "finished_at": "2026-07-25T11:01:13.572Z",
+ "queued_at": "2026-07-25T11:00:11.459Z",
+ "bytes": 3696,
+ "thumb": true,
+ "aiScore": 5.3,
+ "aiReason": "The HTML file meets most of the requirements but lacks some visual elements and interactivity.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 3.5
+ },
+ "aiSpread": 3.5
+ },
+ {
+ "model": "hf-qwen-coder-32b",
+ "status": "done",
+ "error": null,
+ "seconds": 107,
+ "cost": 0,
+ "started_at": "2026-07-25T11:08:04.792Z",
+ "finished_at": "2026-07-25T11:09:51.764Z",
+ "queued_at": "2026-07-25T11:00:11.462Z",
+ "bytes": 8658,
+ "thumb": true,
+ "aiScore": 6.8,
+ "aiReason": "The design is visually appealing and adheres to the luxury aesthetic, but lacks some of the refined details required for a polished game interface.",
+ "aiScores": {
+ "qwen2.5vl:7b": 7,
+ "minicpm-v:latest": 6.5
+ },
+ "aiSpread": 0.5
+ },
+ {
+ "model": "claude-code",
+ "status": "done",
+ "error": null,
+ "seconds": 150,
+ "cost": 0,
+ "started_at": "2026-07-25T11:03:20.533Z",
+ "finished_at": "2026-07-25T11:05:50.419Z",
+ "queued_at": "2026-07-25T11:00:11.465Z",
+ "bytes": 28704,
+ "thumb": true,
+ "aiScore": 8,
+ "aiReason": "The HTML file meets all the requirements and presents a visually appealing luxury interior design game.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7
+ },
+ "aiSpread": 2
+ },
+ {
+ "model": "kimi",
+ "status": "done",
+ "error": null,
+ "seconds": 132,
+ "cost": 0.0229,
+ "started_at": "2026-07-25T11:01:58.611Z",
+ "finished_at": "2026-07-25T11:04:10.280Z",
+ "queued_at": "2026-07-25T11:00:11.469Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 24077,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file meets all the requirements and presents a polished, luxurious design.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
+ },
+ {
+ "model": "gpt",
+ "status": "done",
+ "error": null,
+ "seconds": 76,
+ "cost": 0.1797,
+ "started_at": "2026-07-25T11:02:55.914Z",
+ "finished_at": "2026-07-25T11:04:11.616Z",
+ "queued_at": "2026-07-25T11:00:11.472Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 37096,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML file fulfills all the requirements and presents a polished, luxurious design aesthetic.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
+ },
+ {
+ "model": "grok",
+ "status": "done",
+ "error": null,
+ "seconds": 185,
+ "cost": 0.2181,
+ "started_at": "2026-07-25T11:02:18.286Z",
+ "finished_at": "2026-07-25T11:05:22.804Z",
+ "queued_at": "2026-07-25T11:00:11.476Z",
+ "toolCalls": [
+ "opendesign",
+ "opendesign",
+ "opendesign",
+ "hyperframes"
+ ],
+ "bytes": 36437,
+ "thumb": true,
+ "aiScore": 8.3,
+ "aiReason": "The HTML meets all the requirements and presents a polished luxury aesthetic.",
+ "aiScores": {
+ "qwen2.5vl:7b": 9,
+ "minicpm-v:latest": 7.5
+ },
+ "aiSpread": 1.5
+ }
+ ],
+ "judging": false,
+ "aiPick": "kimi",
+ "judged_at": "2026-07-25T11:11:56.400Z"
+ },
+ {
+ "id": "f8631f89ab43",
+ "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. (e) Open with a CSS design-token block in :root (e.g. --bg, --ink, --accent, --line, --shadow, --ease) and reference the tokens throughout, so the palette is systematic not one-off. (f) The wordmark is a compact upper-left lockup that shows the FULL 'DESIGNER WALLCOVERINGS' text WITHOUT clipping — size the serif so it fits (~200-280px) or wrap to two lines; NEVER truncate/overflow-hidden the wordmark. Demote scoreboards/buttons to a small refined SANS (uppercase, tracked) so the header reads as a logo zone, not competing with the content. (g) Let color/imagery carry the meaning — do NOT slap letter labels on swatches/tiles; a bare luxury swatch beats a lettered one; when a build shows multiple 'styles/patterns', make them VISUALLY DISTINCT (different SVG/CSS motifs, not the same stripe at different densities). (h) NEVER use alert()/confirm()/prompt() — win/game-over/result states must be in-page overlays styled with the token palette. It must look like a luxury interior-design brand, not a generic AI demo. (No hamburger/nav needed — these are self-contained games/social widgets.)",
+ "category": "Real Work",
+ "designTools": true,
+ "created_at": "2026-07-25T11:12:15.679Z",
+ "winner": null,
"runs": [
{
"model": "qwen3-14b",
@@ -21258,7 +21549,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.448Z"
+ "queued_at": "2026-07-25T11:12:15.687Z"
},
{
"model": "gemma3-12b",
@@ -21268,7 +21559,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.452Z"
+ "queued_at": "2026-07-25T11:12:15.694Z"
},
{
"model": "hermes3-8b",
@@ -21278,19 +21569,17 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.455Z"
+ "queued_at": "2026-07-25T11:12:15.701Z"
},
{
"model": "qwen25-7b",
- "status": "done",
+ "status": "running",
"error": null,
- "seconds": 30,
- "cost": 0,
- "started_at": "2026-07-25T11:00:43.590Z",
- "finished_at": "2026-07-25T11:01:13.572Z",
- "queued_at": "2026-07-25T11:00:11.459Z",
- "bytes": 3696,
- "thumb": true
+ "seconds": null,
+ "cost": null,
+ "started_at": "2026-07-25T11:12:15.729Z",
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.707Z"
},
{
"model": "hf-qwen-coder-32b",
@@ -21300,7 +21589,7 @@
"cost": null,
"started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.462Z"
+ "queued_at": "2026-07-25T11:12:15.713Z"
},
{
"model": "claude-code",
@@ -21308,9 +21597,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T11:03:20.533Z",
+ "started_at": "2026-07-25T11:12:15.734Z",
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.465Z"
+ "queued_at": "2026-07-25T11:12:15.717Z"
},
{
"model": "kimi",
@@ -21318,9 +21607,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T11:01:58.611Z",
+ "started_at": "2026-07-25T11:12:15.738Z",
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.469Z"
+ "queued_at": "2026-07-25T11:12:15.720Z"
},
{
"model": "gpt",
@@ -21328,9 +21617,9 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T11:02:55.914Z",
+ "started_at": "2026-07-25T11:12:15.743Z",
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.472Z"
+ "queued_at": "2026-07-25T11:12:15.723Z"
},
{
"model": "grok",
@@ -21338,9 +21627,110 @@
"error": null,
"seconds": null,
"cost": null,
- "started_at": "2026-07-25T11:02:18.286Z",
+ "started_at": "2026-07-25T11:12:15.747Z",
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.726Z"
+ }
+ ]
+ },
+ {
+ "id": "131728b7aeb6",
+ "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. (e) Open with a CSS design-token block in :root (e.g. --bg, --ink, --accent, --line, --shadow, --ease) and reference the tokens throughout, so the palette is systematic not one-off. (f) The wordmark is a compact upper-left lockup that shows the FULL 'DESIGNER WALLCOVERINGS' text WITHOUT clipping — size the serif so it fits (~200-280px) or wrap to two lines; NEVER truncate/overflow-hidden the wordmark. Demote scoreboards/buttons to a small refined SANS (uppercase, tracked) so the header reads as a logo zone, not competing with the content. (g) Let color/imagery carry the meaning — do NOT slap letter labels on swatches/tiles; a bare luxury swatch beats a lettered one; when a build shows multiple 'styles/patterns', make them VISUALLY DISTINCT (different SVG/CSS motifs, not the same stripe at different densities). (h) NEVER use alert()/confirm()/prompt() — win/game-over/result states must be in-page overlays styled with the token palette. It must look like a luxury interior-design brand, not a generic AI demo. (No hamburger/nav needed — these are self-contained games/social widgets.)",
+ "category": "Real Work",
+ "designTools": true,
+ "created_at": "2026-07-25T11:12:15.777Z",
+ "winner": null,
+ "runs": [
+ {
+ "model": "qwen3-14b",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.780Z"
+ },
+ {
+ "model": "gemma3-12b",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.783Z"
+ },
+ {
+ "model": "hermes3-8b",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.787Z"
+ },
+ {
+ "model": "qwen25-7b",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.790Z"
+ },
+ {
+ "model": "hf-qwen-coder-32b",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.794Z"
+ },
+ {
+ "model": "claude-code",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.797Z"
+ },
+ {
+ "model": "kimi",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.800Z"
+ },
+ {
+ "model": "gpt",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
+ "finished_at": null,
+ "queued_at": "2026-07-25T11:12:15.804Z"
+ },
+ {
+ "model": "grok",
+ "status": "queued",
+ "error": null,
+ "seconds": null,
+ "cost": null,
+ "started_at": null,
"finished_at": null,
- "queued_at": "2026-07-25T11:00:11.476Z"
+ "queued_at": "2026-07-25T11:12:15.807Z"
}
]
}
diff --git a/data/costlog.jsonl b/data/costlog.jsonl
index 6f4c888..feeade4 100644
--- a/data/costlog.jsonl
+++ b/data/costlog.jsonl
@@ -291,3 +291,6 @@
{"ts":"2026-07-25T11:01:58.596Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":5665,"output_tokens":6660,"cost_usd":0.020049}
{"ts":"2026-07-25T11:02:18.261Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3990,"output_tokens":10493,"cost_usd":0.169365}
{"ts":"2026-07-25T11:02:55.901Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3037,"output_tokens":12414,"cost_usd":0.179111}
+{"ts":"2026-07-25T11:04:10.276Z","provider":"moonshot","model":"kimi-k2.5","task":"model-arena-tools","input_tokens":3347,"output_tokens":8337,"cost_usd":0.022851}
+{"ts":"2026-07-25T11:04:11.614Z","provider":"openai","model":"gpt-5.1","task":"model-arena-tools","input_tokens":3001,"output_tokens":12459,"cost_usd":0.179678}
+{"ts":"2026-07-25T11:05:22.803Z","provider":"xai","model":"grok-4.5","task":"model-arena-tools","input_tokens":3946,"output_tokens":13754,"cost_usd":0.218148}
diff --git a/idea-run/.dw-brand-style-color-pointer b/idea-run/.dw-brand-style-color-pointer
index 45a4fb7..f599e28 100644
--- a/idea-run/.dw-brand-style-color-pointer
+++ b/idea-run/.dw-brand-style-color-pointer
@@ -1 +1 @@
-8
+10
← 770df13 auto-save: 2026-07-25T04:03:25 (4 files) — data/challenges.j
·
back to Model Arena
·
night-loop: cycle 04:24 — judged=6a3a34df3dc6 · fired 2 →; F 22eaef9 →