← back to Hormuzy
snapshot: 1 file(s) changed, +1 new
f6f3f736a9ff4b75fd4f819eec9e0a4c33504ac8 · 2026-05-13 08:57:55 -0700 · Steve
Files touched
A mockups/001-operations-room.htmlA mockups/002-museum-archive.htmlA mockups/003-brutalist-spreadsheet.htmlA mockups/004-arcade-crt.htmlA mockups/005-weather-radar.htmlA mockups/006-aviation-dashboard.htmlA mockups/007-library-catalog.htmlA mockups/008-control-tower.htmlA mockups/009-particle-physics.htmlA mockups/010-sci-fi-bridge.htmlA mockups/011-film-cutting-room.htmlA mockups/012-fabric-mill.htmlA mockups/013-orchard-record.htmlA mockups/014-newspaper-front.htmlA mockups/015-subway-blueprint.htmlA mockups/016-nautical-chart.htmlA mockups/017-weather-channel.htmlA mockups/018-swiss-grid.htmlA mockups/019-mid-century-print.htmlA mockups/020-japanese-railway.htmlA mockups/021-fortran-tty.htmlA mockups/022-phosphor-terminal.htmlA mockups/023-amber-cathode.htmlA mockups/024-datacenter-rack.htmlA mockups/025-polaroid-board.htmlA mockups/026-cassette-mixtape.htmlA mockups/027-vinyl-liner-notes.htmlA mockups/028-telegram-receipt.htmlA mockups/029-ledger-tape.htmlA mockups/030-darkroom-redlight.htmlA mockups/031-japanese-tofu-shop.htmlA mockups/032-wine-cellar-tag.htmlA mockups/033-watchmaker-bench.htmlA mockups/034-blueprint-roll.htmlA mockups/035-fbi-case-file.htmlA mockups/036-noir-detective.htmlA mockups/037-polish-poster-1960.htmlA mockups/038-memphis-milano.htmlA mockups/039-vaporwave-grid.htmlA mockups/040-y2k-chrome.htmlA mockups/041-flemish-still-life.htmlA mockups/042-japanese-edo-print.htmlA mockups/043-courthouse-docket.htmlA mockups/044-passport-stamp.htmlA mockups/045-subway-token.htmlA mockups/046-hospital-vitals.htmlA mockups/047-telegram-channel.htmlA mockups/048-morse-code.htmlA mockups/049-lighthouse-log.htmlA mockups/050-circus-broadside.htmlA mockups/051-samurai-scroll.htmlA mockups/052-egyptian-tomb.htmlA mockups/053-bauhaus-school.htmlA mockups/054-art-deco-elevator.htmlA mockups/055-russian-constructivist.htmlA mockups/056-monastery-illuminated.htmlA mockups/057-shipping-manifest.htmlA mockups/058-stadium-scoreboard.htmlA mockups/059-field-naturalist.htmlA mockups/060-garden-seed-packet.htmlA mockups/061-menu-prix-fixe.htmlA mockups/062-tattoo-flash.htmlA mockups/063-skateboard-deck.htmlA mockups/064-rave-flyer-1996.htmlA mockups/065-punk-zine-1980.htmlA mockups/066-magazine-editorial.htmlA mockups/067-industrial-warning.htmlA mockups/068-casino-strip.htmlA mockups/069-peaceful-protest.htmlA mockups/070-lawyer-shingle.htmlA mockups/071-doctor-prescription.htmlA mockups/072-candy-shop.htmlA mockups/073-library-microfiche.htmlA mockups/074-auction-paddle.htmlA mockups/075-prayer-beads.htmlA mockups/076-sushi-bar-counter.htmlA mockups/077-truck-stop-diner.htmlA mockups/078-barbershop-pole.htmlA mockups/079-highway-mile-marker.htmlA mockups/080-fire-watch-tower.htmlA mockups/081-fishing-charter.htmlA mockups/082-carpenter-bench.htmlA mockups/083-bookbinder-press.htmlA mockups/084-lock-key-cutter.htmlA mockups/085-horology-galaxy.htmlA mockups/086-espresso-machine.htmlA mockups/087-ham-radio-shack.htmlA mockups/088-darkmode-magazine.htmlA mockups/089-minimalist-spa.htmlA mockups/090-nasa-mission-patch.htmlA mockups/091-voting-ballot.htmlA mockups/092-fortune-cookie.htmlA mockups/093-telegram-pole.htmlA mockups/094-beekeeper-log.htmlA mockups/095-dive-flag.htmlA mockups/096-gallery-wall-label.htmlA mockups/097-old-school-arcade.htmlA mockups/098-post-office-window.htmlA mockups/099-bus-roll-sign.htmlA mockups/100-midnight-zoom.htmlA mockups/generate.mjsA mockups/index.htmlA mockups/manifest.json
Diff
commit f6f3f736a9ff4b75fd4f819eec9e0a4c33504ac8
Author: Steve <steve@designerwallcoverings.com>
Date: Wed May 13 08:57:55 2026 -0700
snapshot: 1 file(s) changed, +1 new
---
mockups/001-operations-room.html | 221 +++++++
mockups/002-museum-archive.html | 201 ++++++
mockups/003-brutalist-spreadsheet.html | 259 ++++++++
mockups/004-arcade-crt.html | 219 +++++++
mockups/005-weather-radar.html | 225 +++++++
mockups/006-aviation-dashboard.html | 195 ++++++
mockups/007-library-catalog.html | 169 +++++
mockups/008-control-tower.html | 288 +++++++++
mockups/009-particle-physics.html | 240 ++++++++
mockups/010-sci-fi-bridge.html | 268 ++++++++
mockups/011-film-cutting-room.html | 174 ++++++
mockups/012-fabric-mill.html | 169 +++++
mockups/013-orchard-record.html | 209 +++++++
mockups/014-newspaper-front.html | 208 +++++++
mockups/015-subway-blueprint.html | 215 +++++++
mockups/016-nautical-chart.html | 211 +++++++
mockups/017-weather-channel.html | 229 +++++++
mockups/018-swiss-grid.html | 182 ++++++
mockups/019-mid-century-print.html | 203 ++++++
mockups/020-japanese-railway.html | 239 +++++++
mockups/021-fortran-tty.html | 165 +++++
mockups/022-phosphor-terminal.html | 145 +++++
mockups/023-amber-cathode.html | 113 ++++
mockups/024-datacenter-rack.html | 219 +++++++
mockups/025-polaroid-board.html | 225 +++++++
mockups/026-cassette-mixtape.html | 249 ++++++++
mockups/027-vinyl-liner-notes.html | 107 ++++
mockups/028-telegram-receipt.html | 79 +++
mockups/029-ledger-tape.html | 177 ++++++
mockups/030-darkroom-redlight.html | 68 ++
mockups/031-japanese-tofu-shop.html | 182 ++++++
mockups/032-wine-cellar-tag.html | 174 ++++++
mockups/033-watchmaker-bench.html | 215 +++++++
mockups/034-blueprint-roll.html | 230 +++++++
mockups/035-fbi-case-file.html | 163 +++++
mockups/036-noir-detective.html | 72 +++
mockups/037-polish-poster-1960.html | 211 +++++++
mockups/038-memphis-milano.html | 233 +++++++
mockups/039-vaporwave-grid.html | 101 +++
mockups/040-y2k-chrome.html | 105 ++++
mockups/041-flemish-still-life.html | 191 ++++++
mockups/042-japanese-edo-print.html | 218 +++++++
mockups/043-courthouse-docket.html | 185 ++++++
mockups/044-passport-stamp.html | 221 +++++++
mockups/045-subway-token.html | 73 +++
mockups/046-hospital-vitals.html | 174 ++++++
mockups/047-telegram-channel.html | 102 +++
mockups/048-morse-code.html | 211 +++++++
mockups/049-lighthouse-log.html | 222 +++++++
mockups/050-circus-broadside.html | 202 ++++++
mockups/051-samurai-scroll.html | 244 ++++++++
mockups/052-egyptian-tomb.html | 74 +++
mockups/053-bauhaus-school.html | 251 ++++++++
mockups/054-art-deco-elevator.html | 197 ++++++
mockups/055-russian-constructivist.html | 110 ++++
mockups/056-monastery-illuminated.html | 236 +++++++
mockups/057-shipping-manifest.html | 106 ++++
mockups/058-stadium-scoreboard.html | 249 ++++++++
mockups/059-field-naturalist.html | 193 ++++++
mockups/060-garden-seed-packet.html | 172 ++++++
mockups/061-menu-prix-fixe.html | 100 +++
mockups/062-tattoo-flash.html | 101 +++
mockups/063-skateboard-deck.html | 71 +++
mockups/064-rave-flyer-1996.html | 95 +++
mockups/065-punk-zine-1980.html | 82 +++
mockups/066-magazine-editorial.html | 84 +++
mockups/067-industrial-warning.html | 82 +++
mockups/068-casino-strip.html | 194 ++++++
mockups/069-peaceful-protest.html | 74 +++
mockups/070-lawyer-shingle.html | 200 ++++++
mockups/071-doctor-prescription.html | 204 ++++++
mockups/072-candy-shop.html | 187 ++++++
mockups/073-library-microfiche.html | 229 +++++++
mockups/074-auction-paddle.html | 85 +++
mockups/075-prayer-beads.html | 176 ++++++
mockups/076-sushi-bar-counter.html | 197 ++++++
mockups/077-truck-stop-diner.html | 193 ++++++
mockups/078-barbershop-pole.html | 274 +++++++++
mockups/079-highway-mile-marker.html | 197 ++++++
mockups/080-fire-watch-tower.html | 201 ++++++
mockups/081-fishing-charter.html | 178 ++++++
mockups/082-carpenter-bench.html | 223 +++++++
mockups/083-bookbinder-press.html | 75 +++
mockups/084-lock-key-cutter.html | 177 ++++++
mockups/085-horology-galaxy.html | 212 +++++++
mockups/086-espresso-machine.html | 213 +++++++
mockups/087-ham-radio-shack.html | 219 +++++++
mockups/088-darkmode-magazine.html | 212 +++++++
mockups/089-minimalist-spa.html | 198 ++++++
mockups/090-nasa-mission-patch.html | 193 ++++++
mockups/091-voting-ballot.html | 259 ++++++++
mockups/092-fortune-cookie.html | 184 ++++++
mockups/093-telegram-pole.html | 102 +++
mockups/094-beekeeper-log.html | 204 ++++++
mockups/095-dive-flag.html | 71 +++
mockups/096-gallery-wall-label.html | 193 ++++++
mockups/097-old-school-arcade.html | 83 +++
mockups/098-post-office-window.html | 87 +++
mockups/099-bus-roll-sign.html | 85 +++
mockups/100-midnight-zoom.html | 190 ++++++
mockups/generate.mjs | 123 ++++
mockups/index.html | 1025 +++++++++++++++++++++++++++++++
mockups/manifest.json | 120 ++++
103 files changed, 18840 insertions(+)
diff --git a/mockups/001-operations-room.html b/mockups/001-operations-room.html
new file mode 100644
index 0000000..c4cff94
--- /dev/null
+++ b/mockups/001-operations-room.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>operations-room — Four Horsemen Studio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+ :root {
+ --bg:#0b0f1a; --grid:#11192a; --panel:#0f1525; --line:#1c2237;
+ --ink:#f0f0f5; --mute:#9aa0b5; --pri:#10b981; --sec:#f59e0b; --alert:#ff6b6b;
+ --mono: 'IBM Plex Mono', ui-monospace, monospace;
+ --sans: 'IBM Plex Sans', system-ui, sans-serif;
+ }
+ *,*::before,*::after { box-sizing: border-box; }
+ html,body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:13px; line-height:1.45; }
+ body {
+ background-image:
+ linear-gradient(var(--grid) 1px, transparent 1px),
+ linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+ background-size: 32px 32px;
+ }
+ header {
+ display:flex; align-items:center; gap:12px; padding:10px 16px;
+ background:rgba(11,15,26,0.92); border-bottom:1px solid var(--line);
+ font-family: var(--mono); font-size: 11px;
+ }
+ .station { color:var(--pri); letter-spacing:0.18em; text-transform:uppercase; font-weight:600; }
+ .station::before { content:"●"; margin-right:6px; }
+ .pill { padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--mute); }
+ .pill.active { color:var(--pri); border-color:var(--pri); }
+ header select { background:#0a0f1c; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:4px 8px; font:inherit; font-family:var(--mono); }
+ header .clock { margin-left:auto; color:var(--mute); }
+ header .uptime { color:var(--sec); }
+
+ main { display:grid; grid-template-columns: 40% 60%; height: calc(100vh - 38px); }
+
+ .left { display:flex; flex-direction:column; border-right:1px solid var(--line); background:rgba(15,21,37,0.85); }
+ .left-head {
+ padding:8px 12px; font-family:var(--mono); font-size:10px; letter-spacing:0.16em;
+ color:var(--mute); text-transform:uppercase; border-bottom:1px solid var(--line);
+ display:flex; gap:14px; align-items:center;
+ }
+ .left-head .row-num { color:var(--pri); }
+ .chatlog { flex:1; overflow:auto; padding:12px; font-family:var(--mono); font-size:12px; }
+ .msg { margin-bottom:14px; padding-left:14px; border-left:2px solid var(--line); }
+ .msg.op { border-color:var(--pri); }
+ .msg.system { border-color:var(--sec); color:var(--mute); }
+ .msg.alert { border-color:var(--alert); }
+ .msg .head { color:var(--mute); font-size:10px; letter-spacing:0.1em; margin-bottom:4px; text-transform:uppercase; }
+ .msg .head .who { color:var(--ink); }
+ .msg .body { color:var(--ink); white-space:pre-wrap; }
+ .msg.op .body { color:var(--pri); }
+ .msg.alert .body { color:var(--alert); }
+ .cmd { color:var(--sec); }
+
+ .chatbar { border-top:1px solid var(--line); padding:10px 12px; display:flex; gap:8px; background:#0a0f1c; }
+ .chatbar .prompt-prefix { color:var(--pri); font-family:var(--mono); font-size:13px; padding-top:8px; }
+ .chatbar textarea { flex:1; background:#06090f; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:8px 10px; font:inherit; font-family:var(--mono); font-size:12px; resize:none; min-height:46px; }
+ .chatbar button { background:var(--pri); color:#041810; border:none; border-radius:2px; padding:0 18px; font-family:var(--mono); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; }
+
+ .right { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr 1fr; gap:6px; padding:6px; min-width:0; }
+ .right > .pane:nth-child(1) { grid-column: 1 / 3; }
+
+ .pane { background:rgba(15,21,37,0.85); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0; }
+ .pane-head {
+ padding:6px 12px; font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
+ color:var(--mute); text-transform:uppercase;
+ background:#0a0f1c; border-bottom:1px solid var(--line);
+ display:flex; gap:10px; align-items:center;
+ }
+ .pane-head .ix { color:var(--pri); }
+ .pane-head .status { margin-left:auto; }
+ .pane-head .status.green { color:var(--pri); }
+ .pane-head .status.amber { color:var(--sec); }
+ .pane-body { flex:1; padding:14px; font-family:var(--mono); font-size:11px; color:var(--mute); overflow:auto; }
+
+ .ascii-grid { color:var(--pri); font-size:10px; line-height:1.1; opacity:0.55; white-space:pre; }
+ .blinker { display:inline-block; width:8px; height:14px; background:var(--pri); animation: blink 1s steps(2) infinite; vertical-align:-2px; }
+ @keyframes blink { 50% { opacity:0; } }
+
+ .table { width:100%; border-collapse:collapse; font-size:11px; }
+ .table td { padding:4px 0; border-bottom:1px dashed var(--line); }
+ .table .k { color:var(--mute); width:42%; }
+ .table .v { color:var(--ink); }
+ .table .v.amber { color:var(--sec); }
+
+ footer {
+ position:fixed; bottom:0; left:0; right:0; padding:4px 16px;
+ background:rgba(11,15,26,0.92); border-top:1px solid var(--line);
+ font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:0.12em; text-transform:uppercase;
+ display:flex; gap:24px;
+ }
+ footer .alarm { color:var(--sec); }
+ footer .ok { color:var(--pri); }
+</style>
+</head>
+<body>
+ <header>
+ <span class="station">STATION HORMUZ-01</span>
+ <span class="pill">DESK · S.A.</span>
+ <select aria-label="project">
+ <option>PROJ : philipperomano-pdp</option>
+ <option>PROJ : wholivedthere-flagship</option>
+ <option>PROJ : laceats-hero</option>
+ </select>
+ <span class="pill active">RUN</span>
+ <span class="pill">QUEUE 3</span>
+ <span class="clock">SHIFT 14 · 09:42:11 PT · UPTIME <span class="uptime">34h 12m</span></span>
+ </header>
+
+ <main>
+ <section class="left">
+ <div class="left-head">
+ <span class="row-num">CHANNEL · ALPHA</span>
+ <span>OPERATOR · STEVE</span>
+ <span style="margin-left:auto;">FRAME 0214</span>
+ </div>
+ <div class="chatlog">
+ <div class="msg system">
+ <div class="head">SYSTEM · 09:33:00</div>
+ <div class="body">station ready. four horsemen reporting in: paper-ack figma-ack canva-ack 21st-ack. queue empty. awaiting orders.</div>
+ </div>
+ <div class="msg op">
+ <div class="head"><span class="who">OPERATOR</span> · 09:34:18</div>
+ <div class="body"><span class="cmd">/run-topic</span> metallic wallcovering pdp for architects with strong sample CTA</div>
+ </div>
+ <div class="msg">
+ <div class="head">CLAUDETTE · 09:34:21</div>
+ <div class="body">brief compiled. dispatching to all four horsemen. paper=spec figma=layout canva=hero-card 21st=live-preview. eta 90s.</div>
+ </div>
+ <div class="msg op">
+ <div class="head"><span class="who">OPERATOR</span> · 09:36:02</div>
+ <div class="body"><span class="cmd">/stampede</span> 3 wild · 1 maximalist · 1 refined · 1 brutalist</div>
+ </div>
+ <div class="msg">
+ <div class="head">CLAUDETTE · 09:36:04</div>
+ <div class="body">stampede armed. session id #25 created. variants firing in parallel. monitoring.</div>
+ </div>
+ <div class="msg alert">
+ <div class="head">ALERT · 09:36:38</div>
+ <div class="body">21st-dev component_builder rate-limited. retry in 30s. continuing on 3 horsemen.</div>
+ </div>
+ </div>
+ <div class="chatbar">
+ <span class="prompt-prefix">></span>
+ <textarea placeholder="/run-topic … or chat with claudette"></textarea>
+ <button>FIRE</button>
+ </div>
+ </section>
+
+ <div class="right">
+ <div class="pane">
+ <div class="pane-head"><span class="ix">▣ 01</span> PREVIEW · live render <span class="status green">OK · 2.1s</span></div>
+ <div class="pane-body">
+<div class="ascii-grid">┌─────────────────────────────────────────────────────────────────┐
+│ PHILIPPE ROMANO INDEX │
+│ ───────────── │
+│ │
+│ METALLIC WALLCOVERING │
+│ for the long-form architect │
+│ │
+│ [ ORDER A SAMPLE ] ← strong-cta verified │
+│ │
+│ ───── catalog · trade · contact │
+└─────────────────────────────────────────────────────────────────┘</div>
+ </div>
+ </div>
+
+ <div class="pane">
+ <div class="pane-head"><span class="ix">▣ 02</span> PAPER · brief <span class="status green">SYNC</span></div>
+ <div class="pane-body">
+ <table class="table">
+ <tr><td class="k">artboard</td><td class="v">1440 × 900 · light</td></tr>
+ <tr><td class="k">mood</td><td class="v amber">bookish · plaster + ink</td></tr>
+ <tr><td class="k">palette</td><td class="v">#f3ebd9 · #1b1814 · #7b1f1a</td></tr>
+ <tr><td class="k">type pair</td><td class="v">cormorant · inter</td></tr>
+ <tr><td class="k">last write</td><td class="v">14s ago</td></tr>
+ </table>
+ </div>
+ </div>
+
+ <div class="pane">
+ <div class="pane-head"><span class="ix">▣ 03</span> FIGMA · layout <span class="status amber">DIFF · 4 nodes</span></div>
+ <div class="pane-body">
+<div style="font-size:10px; line-height:1.5;">
+node 12 + hero-headline ▲ added<br>
+node 13 + hero-sub ▲ added<br>
+node 18 ~ cta-button (color) ◆ changed<br>
+node 22 ~ image-grid (cols 4→3) ◆ changed<br>
+<br>
+<span style="color:var(--pri)">staged for sync · 1 click</span><span class="blinker"></span>
+</div>
+ </div>
+ </div>
+
+ <div class="pane" style="grid-column: 1 / 3;">
+ <div class="pane-head"><span class="ix">▣ 04</span> CANVA + 21ST · pending stampede <span class="status amber">QUEUE 2</span></div>
+ <div class="pane-body">
+ <table class="table">
+ <tr><td class="k">canva · MAXIMALIST</td><td class="v amber">rendering · 38% · est. 22s</td></tr>
+ <tr><td class="k">canva · REFINED</td><td class="v">queued · pos 1</td></tr>
+ <tr><td class="k">canva · BRUTALIST</td><td class="v">queued · pos 2</td></tr>
+ <tr><td class="k">21st · MAXIMALIST</td><td class="v amber">awaiting rate-limit reset · 18s</td></tr>
+ <tr><td class="k">21st · REFINED</td><td class="v">queued · pos 1</td></tr>
+ <tr><td class="k">21st · BRUTALIST</td><td class="v">queued · pos 2</td></tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ </main>
+
+ <footer>
+ <span>STN HORMUZ-01</span>
+ <span>OPS-LOG /var/log/horsemen.log</span>
+ <span class="ok">● ALL HORSEMEN ACK</span>
+ <span class="alarm">● 21ST RATE-LIMIT 0/60</span>
+ <span style="margin-left:auto;">PG-SESS #25 · 6 VARIANTS · 0 STUB</span>
+ </footer>
+</body>
+</html>
diff --git a/mockups/002-museum-archive.html b/mockups/002-museum-archive.html
new file mode 100644
index 0000000..563c554
--- /dev/null
+++ b/mockups/002-museum-archive.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>museum-archive — Four Horsemen Studio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+ :root {
+ --plaster:#f4ecdb; --paper-2:#ebe2cc; --ink:#1a1410; --mute:#6b6157;
+ --oxblood:#7b1f1a; --rule:#9c8c72; --hairline:#bca995; --bone:#fffaee;
+ }
+ *,*::before,*::after { box-sizing:border-box; }
+ html,body { margin:0; padding:0; height:100%; background:var(--plaster); color:var(--ink);
+ font-family:'Inter', system-ui, sans-serif; font-weight:300; font-size:14px; line-height:1.55; }
+ .display { font-family:'Cormorant Garamond', serif; }
+
+ header {
+ display:flex; align-items:baseline; gap:36px; padding:28px 56px 22px;
+ border-bottom:1px solid var(--rule); background:var(--bone);
+ }
+ .wordmark { font-family:'Cormorant Garamond', serif; font-weight:700; font-size:22px; letter-spacing:0.02em; }
+ .wordmark .dot { color:var(--oxblood); }
+ .wordmark small { display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:9px; letter-spacing:0.28em; color:var(--oxblood); text-transform:uppercase; margin-top:4px; }
+ .meta-bar { display:flex; gap:38px; margin-left:auto; align-items:baseline; font-size:11px; }
+ .meta-bar .k { font-weight:500; font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); margin-bottom:2px; }
+ .meta-bar .v { font-family:'Cormorant Garamond', serif; font-weight:500; font-size:18px; color:var(--ink); }
+ .meta-bar > div { display:flex; flex-direction:column; }
+
+ main { display:grid; grid-template-columns: 38% 62%; min-height: calc(100vh - 100px); }
+
+ .left { padding:36px 56px 36px 56px; border-right:1px solid var(--rule); }
+ .left .kicker { font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:var(--oxblood); margin-bottom:10px; }
+ .left h1 { font-family:'Cormorant Garamond', serif; font-weight:700; font-size:48px; line-height:1.05; letter-spacing:-0.02em; margin:0 0 18px; }
+ .left h1 em { font-style:italic; font-weight:300; color:var(--oxblood); }
+ .left .tagline { font-family:'Cormorant Garamond', serif; font-weight:300; font-style:italic; color:var(--mute); font-size:18px; margin-bottom:28px; }
+
+ .archive-cards { display:flex; flex-direction:column; gap:14px; margin-bottom:30px; }
+ .archive-card {
+ background:var(--bone); border:1px solid var(--hairline); padding:14px 16px 14px 18px;
+ border-left:3px solid var(--oxblood);
+ }
+ .archive-card .label { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); margin-bottom:4px; }
+ .archive-card .body { font-family:'Cormorant Garamond', serif; font-weight:500; font-size:16px; }
+ .archive-card .stamp { font-size:10px; letter-spacing:0.16em; color:var(--oxblood); text-transform:uppercase; margin-top:6px; font-family:'Inter',sans-serif; font-weight:500; }
+
+ .composer { border-top:1px solid var(--rule); padding-top:18px; }
+ .composer .label { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
+ .composer textarea { width:100%; background:var(--bone); border:1px solid var(--hairline); padding:14px 16px; font-family:'Cormorant Garamond', serif; font-size:17px; font-weight:300; color:var(--ink); resize:none; min-height:96px; }
+ .composer .row { display:flex; align-items:center; gap:12px; margin-top:10px; }
+ .composer button {
+ background:var(--ink); color:var(--bone); border:none; padding:10px 22px;
+ font-family:'Inter',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer;
+ }
+ .composer button.secondary { background:transparent; color:var(--ink); border:1px solid var(--ink); }
+ .composer .help { font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--mute); font-size:13px; margin-left:auto; }
+
+ .right { padding:36px 56px 36px 48px; }
+ .case-grid { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.05fr 1fr; gap:18px; }
+ .case-grid > .case:nth-child(1) { grid-column: 1 / 3; }
+ .case {
+ background:var(--bone); border:1px solid var(--hairline); padding:22px 24px;
+ display:flex; flex-direction:column; min-height:0;
+ }
+ .case .head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; padding-bottom:8px; border-bottom:1px dashed var(--hairline); }
+ .case .head .ix { font-family:'Inter',sans-serif; font-weight:500; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--oxblood); }
+ .case .head .label { font-family:'Cormorant Garamond', serif; font-weight:500; font-size:18px; }
+ .case .head .label em { font-style:italic; color:var(--mute); font-weight:400; }
+ .case .head .stamp { font-family:'Inter',sans-serif; font-weight:500; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--oxblood); }
+ .case .body { font-family:'Cormorant Garamond', serif; font-weight:300; font-size:17px; line-height:1.6; flex:1; }
+ .case .footnote { font-family:'Inter',sans-serif; font-size:10px; color:var(--mute); margin-top:10px; padding-top:8px; border-top:1px dashed var(--hairline); display:flex; gap:18px; }
+ .case .footnote span { letter-spacing:0.04em; }
+
+ .case .specimen-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:8px; }
+ .case .specimen { aspect-ratio: 4/5; background:var(--paper-2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px; color:var(--mute); position:relative; }
+ .case .specimen::before { content:""; position:absolute; top:6px; left:6px; right:6px; bottom:6px; border:1px dashed var(--hairline); }
+
+ footer {
+ border-top:1px solid var(--rule); padding:14px 56px; background:var(--bone);
+ font-size:10px; letter-spacing:0.16em; color:var(--mute); text-transform:uppercase;
+ display:flex; gap:30px;
+ }
+ footer .ox { color:var(--oxblood); }
+</style>
+</head>
+<body>
+ <header>
+ <div class="wordmark">
+ Hormuz<span class="dot">·</span>Studio
+ <small>Catalog of the Four Horsemen</small>
+ </div>
+ <div class="meta-bar">
+ <div><span class="k">Reading Room</span><span class="v">Alpha</span></div>
+ <div><span class="k">Today's Folder</span><span class="v">Philippe Romano · PDP</span></div>
+ <div><span class="k">Status</span><span class="v">In review</span></div>
+ <div><span class="k">Session</span><span class="v">№ 25</span></div>
+ </div>
+ </header>
+
+ <main>
+ <section class="left">
+ <p class="kicker">Brief · 09 : 34 · Operator notes</p>
+ <h1>Every brief, <em>copied four times</em>, in four hands.</h1>
+ <p class="tagline">Type a design idea. Hormuz turns it into a brief that Paper, Figma, Canva, and 21st all work from — so the four hands stay on the same page.</p>
+
+ <div class="archive-cards">
+ <div class="archive-card">
+ <p class="label">Operator · 09:34</p>
+ <p class="body">/run-topic — metallic wallcovering PDP for architects with strong sample CTA</p>
+ <p class="stamp">Logged · brief id #142</p>
+ </div>
+ <div class="archive-card">
+ <p class="label">Claudette · 09:34</p>
+ <p class="body">Brief compiled. Dispatched to four hands: Paper for spec, Figma for layout, Canva for hero card, 21st for live preview. ETA ninety seconds.</p>
+ <p class="stamp">Acknowledged by all four</p>
+ </div>
+ <div class="archive-card">
+ <p class="label">Operator · 09:36</p>
+ <p class="body">/stampede — three wild variants. Maximalist. Refined. Brutalist.</p>
+ <p class="stamp">Session opened · variants firing</p>
+ </div>
+ </div>
+
+ <div class="composer">
+ <p class="label">Compose</p>
+ <textarea placeholder="/run-topic — or describe the brief in plain words"></textarea>
+ <div class="row">
+ <button>Dispatch</button>
+ <button class="secondary">Fire 3 variants</button>
+ <span class="help">Anything without a slash goes to Claudette.</span>
+ </div>
+ </div>
+ </section>
+
+ <section class="right">
+ <div class="case-grid">
+ <div class="case">
+ <div class="head">
+ <span class="ix">▣ 01 · Preview</span>
+ <span class="label">The live revamp</span>
+ <span class="stamp">Acquired 09:36 · 2.1s</span>
+ </div>
+ <p class="body">A cream-and-ink front room for Philippe Romano. The sample-request CTA reads in oxblood, full-width, anchored under the headline. Architects' editorial register; no e-commerce noise. <em>Specimen mounted under glass below.</em></p>
+ <div class="specimen-grid">
+ <div class="specimen">Hero · Headline + sample CTA</div>
+ <div class="specimen">Catalog · 4×3 plate index</div>
+ <div class="specimen">Provenance · Trade letter</div>
+ </div>
+ <div class="footnote">
+ <span>Type · Cormorant + Inter</span>
+ <span>Palette · plaster · ink · oxblood</span>
+ <span>Mood · bookish</span>
+ </div>
+ </div>
+
+ <div class="case">
+ <div class="head">
+ <span class="ix">▣ 02 · Paper</span>
+ <span class="label">The brief, <em>spec-side</em></span>
+ <span class="stamp">Synced 14s ago</span>
+ </div>
+ <p class="body">Artboard at 1440×900, light ground. Twelve nodes laid by hand. Ready for the operator's review.</p>
+ <div class="footnote"><span>Nodes · 12</span><span>Last write · 14s</span><span>Drift · none</span></div>
+ </div>
+
+ <div class="case">
+ <div class="head">
+ <span class="ix">▣ 03 · Figma</span>
+ <span class="label">The layout, <em>component-side</em></span>
+ <span class="stamp">Diff · 4 nodes</span>
+ </div>
+ <p class="body">Hero headline added. Sub copy added. CTA recolored for the new oxblood. Image grid retuned from four columns to three.</p>
+ <div class="footnote"><span>Diff · 4 nodes</span><span>Stage · ready</span><span>Branch · session-25</span></div>
+ </div>
+
+ <div class="case" style="grid-column: 1 / 3;">
+ <div class="head">
+ <span class="ix">▣ 04 · Canva & 21st · Stampede</span>
+ <span class="label">Three wild variants <em>in flight</em></span>
+ <span class="stamp">Pending · 6 variants</span>
+ </div>
+ <p class="body">The maximalist is being rendered now. The refined and brutalist are queued behind it. 21st has been rate-limited and is awaiting reset; Canva continues alone for the moment. All variants will land in this room when they are ready.</p>
+ <div class="footnote">
+ <span>Variant 1 · Maximalist · 38%</span>
+ <span>Variant 2 · Refined · queued</span>
+ <span>Variant 3 · Brutalist · queued</span>
+ <span style="margin-left:auto;">Persisted to PG · session #25</span>
+ </div>
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <span>Hormuz · Catalog of the Four Horsemen</span>
+ <span>Reading Room · Alpha</span>
+ <span class="ox">Four hands acknowledged</span>
+ <span style="margin-left:auto;">© Today · Editorial use only</span>
+ </footer>
+</body>
+</html>
diff --git a/mockups/003-brutalist-spreadsheet.html b/mockups/003-brutalist-spreadsheet.html
new file mode 100644
index 0000000..3fd8b4c
--- /dev/null
+++ b/mockups/003-brutalist-spreadsheet.html
@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>brutalist-spreadsheet — Four Horsemen Studio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+ *,*::before,*::after { box-sizing:border-box; }
+ html,body { margin:0; padding:0; height:100%; background:#ffffff; color:#000000;
+ font-family:'Inter', system-ui, sans-serif; font-size:13px; line-height:1.4; font-weight:400; }
+ .mono { font-family:'JetBrains Mono', monospace; }
+
+ header {
+ border-bottom:3px solid #000; padding:0;
+ display:grid; grid-template-columns: auto 1fr auto auto auto;
+ }
+ header > * { padding:14px 18px; border-right:2px solid #000; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono', monospace; font-weight:500; font-size:12px; }
+ header > *:last-child { border-right:none; }
+ header .brand { font-family:'Inter', sans-serif; font-weight:900; font-size:20px; letter-spacing:-0.04em; }
+ header .brand::after { content:"."; color:#ff3b30; }
+ header select { background:#fff; color:#000; border:none; font:inherit; font-family:'JetBrains Mono', monospace; font-weight:500; padding:0; }
+ header .pill { background:#000; color:#fff; padding:4px 10px; }
+ header .pill.alert { background:#ff3b30; color:#fff; }
+
+ main { display:grid; grid-template-columns: 38% 62%; min-height: calc(100vh - 50px); }
+ .left { border-right:3px solid #000; display:flex; flex-direction:column; }
+
+ .col-head {
+ display:grid; grid-template-columns: 60px 90px 1fr 90px; align-items:center;
+ border-bottom:2px solid #000; background:#000; color:#fff;
+ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.06em;
+ }
+ .col-head > div { padding:10px 12px; border-right:1px solid #ffffff44; text-transform:uppercase; }
+ .col-head > div:last-child { border-right:none; }
+
+ .row {
+ display:grid; grid-template-columns: 60px 90px 1fr 90px; align-items:flex-start;
+ border-bottom:1px solid #cccccc; min-height:62px;
+ }
+ .row:hover { background:#f5f5f5; }
+ .row > div { padding:10px 12px; border-right:1px solid #cccccc; font-size:12px; }
+ .row > div:last-child { border-right:none; }
+ .row .id { font-family:'JetBrains Mono', monospace; font-weight:700; }
+ .row .who { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; }
+ .row .who.you { color:#ff3b30; }
+ .row .body { font-family:'Inter', sans-serif; font-weight:400; font-size:13px; line-height:1.5; word-break:break-word; }
+ .row .body .cmd { font-family:'JetBrains Mono', monospace; font-weight:700; background:#000; color:#fff; padding:1px 6px; }
+ .row .ts { font-family:'JetBrains Mono', monospace; font-size:11px; color:#666; }
+
+ .compose-area {
+ border-top:3px solid #000; display:grid; grid-template-columns: 1fr 140px;
+ background:#fff;
+ }
+ .compose-area textarea {
+ border:none; padding:14px 18px; font:inherit; font-family:'Inter', sans-serif; font-size:14px;
+ background:#fff; color:#000; resize:none; min-height:78px;
+ }
+ .compose-area button {
+ border:none; border-left:2px solid #000; background:#000; color:#fff;
+ font-family:'Inter', sans-serif; font-weight:900; font-size:14px; letter-spacing:0.06em; cursor:pointer;
+ }
+ .compose-area button:hover { background:#ff3b30; }
+
+ .right { display:flex; flex-direction:column; }
+ .right-head {
+ border-bottom:2px solid #000; background:#000; color:#fff;
+ display:grid; grid-template-columns: repeat(4, 1fr);
+ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.08em;
+ }
+ .right-head > div { padding:10px 14px; text-transform:uppercase; border-right:1px solid #ffffff33; display:flex; justify-content:space-between; align-items:center; }
+ .right-head > div:last-child { border-right:none; }
+ .right-head .ok { color:#0aef70; }
+ .right-head .pending { color:#ffd23f; }
+ .right-head .err { color:#ff3b30; }
+
+ .horseman-grid { flex:1; display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+ .horseman {
+ border-right:2px solid #000; border-bottom:2px solid #000; padding:18px 22px; display:flex; flex-direction:column;
+ }
+ .horseman:nth-child(2n) { border-right:none; }
+ .horseman:nth-last-child(-n+2) { border-bottom:none; }
+
+ .horseman .h-label {
+ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:10px; margin-bottom:14px;
+ border-bottom:2px solid #000;
+ }
+ .horseman .h-label .name { font-family:'Inter', sans-serif; font-weight:900; font-size:28px; letter-spacing:-0.04em; }
+ .horseman .h-label .ix { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:11px; }
+ .horseman .h-label .stat { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; padding:3px 8px; background:#000; color:#fff; }
+ .horseman .h-label .stat.ok { background:#0aef70; color:#000; }
+ .horseman .h-label .stat.pend { background:#ffd23f; color:#000; }
+ .horseman .h-label .stat.err { background:#ff3b30; color:#fff; }
+
+ .kv { display:grid; grid-template-columns: 110px 1fr; gap:6px 14px; font-size:12px; }
+ .kv .k { font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:#666; padding-top:2px; }
+ .kv .v { font-family:'Inter', sans-serif; font-weight:400; word-break:break-word; }
+ .kv .v.bold { font-weight:700; }
+ .kv .v.red { color:#ff3b30; }
+
+ .horseman .preview-box {
+ margin-top:auto; padding:14px; background:#000; color:#fff; font-family:'JetBrains Mono', monospace; font-size:10px; line-height:1.5; white-space:pre;
+ }
+
+ footer {
+ border-top:3px solid #000; background:#fff; display:flex;
+ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
+ }
+ footer > * { padding:8px 16px; border-right:1px solid #000; }
+ footer > *:last-child { border-right:none; margin-left:auto; }
+ footer .red { color:#ff3b30; font-weight:700; }
+</style>
+</head>
+<body>
+ <header>
+ <div class="brand">HORMUZ</div>
+ <div><select><option>PROJECT · philipperomano · PDP</option><option>PROJECT · wholivedthere · flagship</option></select></div>
+ <div><span class="pill">SESSION 25</span></div>
+ <div><span class="pill">QUEUE 6</span></div>
+ <div><span class="pill alert">RATE 1/4</span></div>
+ </header>
+
+ <main>
+ <section class="left">
+ <div class="col-head">
+ <div>#</div>
+ <div>WHO</div>
+ <div>MESSAGE</div>
+ <div>TS</div>
+ </div>
+ <div class="row">
+ <div class="id mono">001</div>
+ <div class="who">SYS</div>
+ <div class="body">Station ready. Four horsemen reporting in. Queue empty. Awaiting brief.</div>
+ <div class="ts">09:33:00</div>
+ </div>
+ <div class="row">
+ <div class="id mono">002</div>
+ <div class="who you">YOU</div>
+ <div class="body"><span class="cmd">/run-topic</span> Metallic wallcovering PDP for architects with strong sample CTA</div>
+ <div class="ts">09:34:18</div>
+ </div>
+ <div class="row">
+ <div class="id mono">003</div>
+ <div class="who">CLD</div>
+ <div class="body">Brief compiled. Dispatched to all four horsemen. Paper for spec. Figma for layout. Canva for hero. 21st for live preview. ETA 90s.</div>
+ <div class="ts">09:34:21</div>
+ </div>
+ <div class="row">
+ <div class="id mono">004</div>
+ <div class="who you">YOU</div>
+ <div class="body"><span class="cmd">/stampede</span> 3 wild · maximalist · refined · brutalist</div>
+ <div class="ts">09:36:02</div>
+ </div>
+ <div class="row">
+ <div class="id mono">005</div>
+ <div class="who">CLD</div>
+ <div class="body">Stampede armed. Session 25 created. Variants firing. Persisting to PG fh_stampede_versions.</div>
+ <div class="ts">09:36:04</div>
+ </div>
+ <div class="row" style="background:#fff5f4;">
+ <div class="id mono" style="color:#ff3b30;">006</div>
+ <div class="who" style="color:#ff3b30;">ALERT</div>
+ <div class="body">21st-dev component_builder rate-limited. Retry in 30s. Continuing on 3 horsemen.</div>
+ <div class="ts">09:36:38</div>
+ </div>
+
+ <div class="compose-area">
+ <textarea placeholder="Type a brief. Or /run-topic. Or /stampede 3."></textarea>
+ <button>FIRE</button>
+ </div>
+ </section>
+
+ <section class="right">
+ <div class="right-head">
+ <div>▣ 01 PAPER · BRIEF <span class="ok">● OK</span></div>
+ <div>▣ 02 FIGMA · LAYOUT <span class="pending">● DIFF 4</span></div>
+ <div>▣ 03 CANVA · HERO <span class="pending">● 38%</span></div>
+ <div>▣ 04 21ST · PREVIEW <span class="err">● RATE</span></div>
+ </div>
+
+ <div class="horseman-grid">
+ <div class="horseman">
+ <div class="h-label">
+ <span class="name">PAPER.</span>
+ <span class="ix">/01</span>
+ <span class="stat ok">OK</span>
+ </div>
+ <div class="kv">
+ <div class="k">artboard</div><div class="v bold">1440 × 900 · light</div>
+ <div class="k">mood</div><div class="v">bookish · plaster + ink</div>
+ <div class="k">type</div><div class="v">cormorant + inter</div>
+ <div class="k">nodes</div><div class="v">12</div>
+ <div class="k">last write</div><div class="v">14s</div>
+ <div class="k">drift</div><div class="v">none</div>
+ </div>
+ </div>
+
+ <div class="horseman">
+ <div class="h-label">
+ <span class="name">FIGMA.</span>
+ <span class="ix">/02</span>
+ <span class="stat pend">DIFF</span>
+ </div>
+ <div class="kv">
+ <div class="k">node 12</div><div class="v">+ hero-headline</div>
+ <div class="k">node 13</div><div class="v">+ hero-sub</div>
+ <div class="k">node 18</div><div class="v">~ cta-button (color)</div>
+ <div class="k">node 22</div><div class="v">~ image-grid (4→3 cols)</div>
+ <div class="k">staged</div><div class="v bold">4 nodes</div>
+ <div class="k">action</div><div class="v red">CLICK TO SYNC</div>
+ </div>
+ </div>
+
+ <div class="horseman">
+ <div class="h-label">
+ <span class="name">CANVA.</span>
+ <span class="ix">/03</span>
+ <span class="stat pend">38%</span>
+ </div>
+ <div class="kv">
+ <div class="k">variant</div><div class="v bold">MAXIMALIST</div>
+ <div class="k">progress</div><div class="v">38%</div>
+ <div class="k">eta</div><div class="v">22s</div>
+ <div class="k">queued</div><div class="v">REFINED · BRUTALIST</div>
+ </div>
+ <div class="preview-box">[ canva render in flight ]
+hero · max-density · 12 layers
+type · display 96px · body 18px
+state · 38% · 22s remaining</div>
+ </div>
+
+ <div class="horseman">
+ <div class="h-label">
+ <span class="name">21ST.</span>
+ <span class="ix">/04</span>
+ <span class="stat err">RATE</span>
+ </div>
+ <div class="kv">
+ <div class="k">status</div><div class="v red bold">RATE LIMITED</div>
+ <div class="k">reason</div><div class="v">component_builder 1/4 in window</div>
+ <div class="k">reset</div><div class="v">18s</div>
+ <div class="k">queued</div><div class="v">3 variants pending</div>
+ <div class="k">fallback</div><div class="v">queue continues, no degradation</div>
+ </div>
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <span>HORMUZ · STATION-01</span>
+ <span>SESSION #25</span>
+ <span class="red">● 1 OF 4 RATE-LIMITED</span>
+ <span>OPS-LOG /var/log/horsemen.log</span>
+ <span>UPTIME 34h 12m · LAST FIRE 09:36:02 · 09:43:14 NOW</span>
+ </footer>
+</body>
+</html>
diff --git a/mockups/004-arcade-crt.html b/mockups/004-arcade-crt.html
new file mode 100644
index 0000000..e7dd4e6
--- /dev/null
+++ b/mockups/004-arcade-crt.html
@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>arcade-crt — Four Horsemen Studio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap" rel="stylesheet">
+<style>
+ *,*::before,*::after { box-sizing:border-box; }
+ html,body { margin:0; padding:0; height:100%; background:#000;
+ color:#39ff14; font-family:'VT323', monospace; font-size:20px; line-height:1.2;
+ text-shadow: 0 0 4px #39ff14, 0 0 12px #39ff1444;
+ overflow:hidden;
+ }
+ /* CRT scanlines */
+ body::before {
+ content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
+ background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
+ }
+ /* CRT vignette */
+ body::after {
+ content:""; position:fixed; inset:0; pointer-events:none; z-index:51;
+ background: radial-gradient( ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
+ }
+ .px-font { font-family:'Press Start 2P', monospace; }
+ .pink { color:#ff00ff; text-shadow: 0 0 4px #ff00ff, 0 0 12px #ff00ff44; }
+ .cyan { color:#00ffff; text-shadow: 0 0 4px #00ffff, 0 0 12px #00ffff44; }
+ .yellow{ color:#ffff00; text-shadow: 0 0 4px #ffff00, 0 0 12px #ffff0044; }
+ .dim { color:#39ff1488; text-shadow:none; }
+
+ header {
+ border-bottom:2px solid #39ff14; padding:14px 24px;
+ display:flex; align-items:center; gap:24px;
+ }
+ header .marquee { font-family:'Press Start 2P', monospace; font-size:14px; color:#ff00ff; text-shadow: 0 0 6px #ff00ff, 0 0 18px #ff00ff66; }
+ header .credits { margin-left:auto; font-size:18px; }
+
+ main { display:grid; grid-template-columns: 40% 60%; height: calc(100vh - 56px); }
+
+ .left {
+ border-right:2px solid #39ff14; display:flex; flex-direction:column;
+ }
+ .left .panel-head {
+ padding:8px 18px; border-bottom:2px solid #39ff14; font-family:'Press Start 2P', monospace; font-size:10px;
+ display:flex; gap:18px; color:#ffff00; text-shadow: 0 0 6px #ffff0066;
+ }
+ .console { flex:1; overflow:auto; padding:18px 22px; }
+ .console .line { margin-bottom:8px; }
+ .console .who { font-family:'Press Start 2P', monospace; font-size:9px; padding-right:10px; }
+ .console .who.p1 { color:#00ffff; }
+ .console .who.p2 { color:#ff00ff; }
+ .console .who.cpu { color:#ffff00; }
+ .console .body { font-size:18px; }
+ .console .cmd { color:#ff00ff; }
+ .blink { animation: blink 0.9s steps(2) infinite; }
+ @keyframes blink { 50% { opacity:0; } }
+ .arrow { color:#ff00ff; }
+
+ .input-area {
+ border-top:2px solid #39ff14; padding:14px 22px;
+ display:grid; grid-template-columns: 1fr auto; gap:12px;
+ }
+ .input-area .prompt { display:flex; align-items:center; gap:10px; }
+ .input-area .prompt::before { content:"►"; color:#ff00ff; }
+ .input-area input {
+ flex:1; background:#000; color:#39ff14; border:2px solid #39ff14; padding:8px 12px;
+ font:inherit; font-family:'VT323', monospace; font-size:18px;
+ text-shadow: 0 0 4px #39ff14;
+ }
+ .input-area button {
+ background:#39ff14; color:#000; border:none; padding:8px 18px;
+ font-family:'Press Start 2P', monospace; font-size:9px; cursor:pointer;
+ text-shadow:none;
+ }
+
+ .right { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:0; }
+ .level {
+ border-right:2px solid #39ff14; border-bottom:2px solid #39ff14; padding:18px 22px;
+ display:flex; flex-direction:column; min-width:0;
+ }
+ .level:nth-child(2n) { border-right:none; }
+ .level:nth-last-child(-n+2) { border-bottom:none; }
+ .level .head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; padding-bottom:6px; border-bottom:1px dashed #39ff1466; }
+ .level .head .name { font-family:'Press Start 2P', monospace; font-size:13px; }
+ .level .head .ix { font-family:'Press Start 2P', monospace; font-size:9px; color:#ffff0088; }
+ .level .head .lives { font-family:'Press Start 2P', monospace; font-size:9px; }
+ .level .ascii { white-space:pre; font-size:13px; line-height:1.15; flex:1; color:#39ff14; opacity:0.95; }
+ .level .stats { display:grid; grid-template-columns: 1fr 1fr; gap:6px 18px; margin-top:8px; font-size:18px; }
+ .level .stats .k { color:#39ff1488; font-size:14px; text-transform:uppercase; }
+ .level .stats .v { color:#ffff00; }
+
+ .level.boss .head .name { color:#ff00ff; }
+ .level.boss { background: radial-gradient(ellipse at top, rgba(255,0,255,0.1), transparent 70%); }
+
+ footer {
+ position:fixed; bottom:0; left:0; right:0; padding:6px 22px; border-top:2px solid #39ff14;
+ background:#000; font-family:'Press Start 2P', monospace; font-size:8px;
+ display:flex; gap:24px;
+ }
+ footer .high { color:#ff00ff; }
+ footer .credits { color:#ffff00; }
+</style>
+</head>
+<body>
+ <header>
+ <span class="marquee">★ HORMUZ ★ FOUR HORSEMEN ★ STAGE 25 ★</span>
+ <span class="dim">PROJECT — PHILIPPE ROMANO PDP</span>
+ <span class="credits">CREDITS <span class="yellow">∞</span></span>
+ </header>
+
+ <main>
+ <section class="left">
+ <div class="panel-head">
+ <span>1P · OPERATOR</span>
+ <span style="margin-left:auto;">SESSION #25</span>
+ <span>QUEUE 6</span>
+ </div>
+ <div class="console">
+ <div class="line"><span class="who cpu">CPU.</span><span class="body dim">STATION READY. ALL FOUR HORSEMEN STANDING BY. INSERT BRIEF.</span></div>
+
+ <div class="line"><span class="who p1">1P.</span><span class="body"><span class="cmd">/RUN-TOPIC</span> METALLIC WALLCOVERING PDP FOR ARCHITECTS WITH STRONG SAMPLE CTA</span></div>
+
+ <div class="line"><span class="who cpu">CPU.</span><span class="body">BRIEF COMPILED. DISPATCH TO 4 LANES. <span class="yellow">PAPER · FIGMA · CANVA · 21ST</span>. ETA 90S.</span></div>
+
+ <div class="line"><span class="who p1">1P.</span><span class="body"><span class="cmd">/STAMPEDE</span> WILD <span class="cyan">3X</span> · MAX · REF · BRU</span></div>
+
+ <div class="line"><span class="who cpu">CPU.</span><span class="body">STAMPEDE ARMED. SAVING TO HIGH-SCORE TABLE. <span class="pink">FIRE!</span></span></div>
+
+ <div class="line"><span class="who p2">!!.</span><span class="body pink">!! WARNING — 21ST RATE LIMITED — RETRY 18S — 3 LANES STILL UP</span></div>
+
+ <div class="line"><span class="arrow">►</span><span class="body blink"> _</span></div>
+ </div>
+ <div class="input-area">
+ <div class="prompt">
+ <input type="text" placeholder="TYPE BRIEF — OR /STAMPEDE — PRESS START">
+ </div>
+ <button>FIRE</button>
+ </div>
+ </section>
+
+ <section class="right">
+ <div class="level">
+ <div class="head"><span class="name">PAPER</span><span class="ix">LEVEL 01</span><span class="lives cyan">▼ ▼ ▼</span></div>
+ <div class="ascii">┌────────────────────┐
+│ ARTBOARD 1440x900 │
+│ ░░░░░░░░░░░░░░░░ │
+│ ░ HERO ░ │
+│ ░░░░░░░░░░░░░░░░ │
+│ ░ CARD CARD CRD░ │
+│ ░░░░░░░░░░░░░░░░ │
+│ NODES: 12 · LIGHT│
+└────────────────────┘</div>
+ <div class="stats">
+ <span class="k">SCORE</span><span class="v">012,400</span>
+ <span class="k">LAST WRITE</span><span class="v">14S</span>
+ <span class="k">DRIFT</span><span class="v">NONE</span>
+ <span class="k">BONUS</span><span class="v">×2</span>
+ </div>
+ </div>
+
+ <div class="level">
+ <div class="head"><span class="name">FIGMA</span><span class="ix">LEVEL 02</span><span class="lives cyan">▼ ▼ ▼</span></div>
+ <div class="ascii"> + HERO-HEADLINE
+ + HERO-SUB
+ ~ CTA-COLOR
+ ~ GRID 4 → 3
+ -----------
+ 4 NODES STAGED
+ PRESS A TO SYNC</div>
+ <div class="stats">
+ <span class="k">SCORE</span><span class="v">008,700</span>
+ <span class="k">DIFF</span><span class="v">4</span>
+ <span class="k">BRANCH</span><span class="v">SES-25</span>
+ <span class="k">BONUS</span><span class="v">×1</span>
+ </div>
+ </div>
+
+ <div class="level">
+ <div class="head"><span class="name">CANVA</span><span class="ix">LEVEL 03</span><span class="lives yellow">▼ ▼ ░</span></div>
+ <div class="ascii"> ████████████░░░ 38%
+ RENDERING MAX...
+ ETA: 22S
+ -----------
+ QUEUE: REF · BRU
+ COIN: ∞</div>
+ <div class="stats">
+ <span class="k">SCORE</span><span class="v">004,210</span>
+ <span class="k">VARIANT</span><span class="v pink">MAX</span>
+ <span class="k">QUEUE</span><span class="v">2</span>
+ <span class="k">BONUS</span><span class="v">×1</span>
+ </div>
+ </div>
+
+ <div class="level boss">
+ <div class="head"><span class="name pink">21ST · BOSS</span><span class="ix">LEVEL 04</span><span class="lives" style="color:#ff00ff;">▼ ░ ░</span></div>
+ <div class="ascii"> ★★★ RATE LIMITED ★★★
+ RESET IN: 18S
+ -----------
+ LIVES LOST: 2
+ CONTINUE? Y/N
+ PRESS START</div>
+ <div class="stats">
+ <span class="k">SCORE</span><span class="v">000,000</span>
+ <span class="k">STATUS</span><span class="v pink">BOSS RAGE</span>
+ <span class="k">QUEUE</span><span class="v">3</span>
+ <span class="k">BONUS</span><span class="v">×0</span>
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <span>● HORMUZ ARCADE</span>
+ <span class="high">HIGH SCORE 142,300 — STEVE</span>
+ <span class="credits">CREDITS ∞</span>
+ <span style="margin-left:auto;" class="dim">PRESS 1P TO START · INSERT BRIEF</span>
+ </footer>
+</body>
+</html>
diff --git a/mockups/005-weather-radar.html b/mockups/005-weather-radar.html
new file mode 100644
index 0000000..77ce5ed
--- /dev/null
+++ b/mockups/005-weather-radar.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>weather-radar — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Roboto+Mono:wght@400&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Roboto Mono', monospace;
+ background-color: #0a1428;
+ color: #7dffe9;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: linear-gradient(135deg, #06080d 0%, #0a1428 100%);
+ border-bottom: 1px solid #1a243a;
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 700;
+ letter-spacing: 1px;
+ }
+ header .brand {
+ font-size: 1.5rem;
+ color: #ffd166;
+ }
+ header select {
+ padding: 8px 12px;
+ background: #06080d;
+ border: 1px solid #1a243a;
+ color: #7dffe9;
+ font-family: 'Roboto Mono', monospace;
+ border-radius: 4px;
+ }
+ header .status {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 0.9rem;
+ }
+ .status-circle {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: #7dffe9;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background-color: #06080d;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+ }
+ .message {
+ display: flex;
+ gap: 12px;
+ align-items: start;
+ }
+ .message.user {
+ justify-content: flex-end;
+ }
+ .message.user .text {
+ background: #ef4f4f;
+ color: #0a1428;
+ padding: 12px 16px;
+ border-radius: 8px 0 8px 8px;
+ max-width: 70%;
+ }
+ .message.agent .text {
+ background: #1a243a;
+ color: #7dffe9;
+ padding: 12px 16px;
+ border-radius: 0 8px 8px 8px;
+ max-width: 70%;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 12px;
+ background: #06080d;
+ border: 1px solid #1a243a;
+ color: #7dffe9;
+ font-family: 'Roboto Mono', monospace;
+ border-radius: 4px;
+ }
+ .chat-input button {
+ padding: 12px 24px;
+ background: #7dffe9;
+ color: #0a1428;
+ border: none;
+ border-radius: 4px;
+ font-weight: bold;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .sub-panels {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+ flex: 1;
+ }
+ .panel {
+ background: #06080d;
+ border: 1px solid #1a243a;
+ padding: 20px;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 700;
+ color: #ffd166;
+ margin-bottom: 16px;
+ letter-spacing: 0.5px;
+ }
+ .panel-content {
+ color: #7dffe9;
+ font-size: 0.95rem;
+ line-height: 1.5;
+ }
+ .panel-content::before {
+ content: "• ";
+ }
+ .panel-content span {
+ color: #ef4f4f;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select>
+ <option>Project: Stormfront</option>
+ <option>Project: Cyclone-7</option>
+ <option>Project: Tornado-9</option>
+ </select>
+ <div class="status">
+ <div class="status-circle"></div>
+ <span>idle</span>
+ </div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="text">/run-topic "storm dynamics"</div>
+ </div>
+ <div class="message agent">
+ <div class="text">Initiating topic run: storm dynamics. Radar sweep active. Anticipated data inflow: 12 mins.</div>
+ </div>
+ <div class="message user">
+ <div class="text">/stampede "pressure gradients"</div>
+ </div>
+ <div class="message agent">
+ <div class="text">Stampede mode engaged. Analyzing pressure gradients. Expected surge in 3 minutes.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or query">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ Satellite imagery overlay: 85% cloud cover. Wind vectors: NE at 15kt. Pressure: 1013 hPa.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ Design brief: 3D visualization of stormfront. Mockups due by 1600. Current iteration: v2.7.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ Component library updated. 23 assets synced. Last sync: 08:47. Pending: 2 variants.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ Template: Weather report infographic. Assets: 12 icons, 5 charts. Ready for export.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/006-aviation-dashboard.html b/mockups/006-aviation-dashboard.html
new file mode 100644
index 0000000..041bc8c
--- /dev/null
+++ b/mockups/006-aviation-dashboard.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>aviation-dashboard — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Space+Mono:wght@400&display=swap">
+ <style>
+ :root {
+ --bg: #0d1117;
+ --primary: #a5d8ff;
+ --accent: #ffd43b;
+ --alert: #fa5252;
+ --text: #212529;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Space Mono', monospace;
+ background-color: var(--bg);
+ color: var(--primary);
+ height: 900px;
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ border-bottom: 1px solid #1a1f25;
+ font-family: 'Barlow Condensed', sans-serif;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ }
+ header .brand {
+ font-size: 1.5rem;
+ color: var(--primary);
+ }
+ header .project-picker {
+ padding: 6px 12px;
+ background: #1a1f25;
+ border-radius: 4px;
+ color: var(--primary);
+ }
+ header .status {
+ padding: 6px 12px;
+ background: #1a1f25;
+ border-radius: 4px;
+ color: var(--accent);
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #1a1f25;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ .chat-log {
+ padding: 16px;
+ flex: 1;
+ overflow-y: auto;
+ background: #0d1117;
+ border-right: 1px solid #1a1f25;
+ }
+ .chat-log .message {
+ margin: 8px 0;
+ padding: 8px 12px;
+ background: #1a1f25;
+ border-radius: 4px;
+ display: flex;
+ justify-content: space-between;
+ }
+ .chat-log .user {
+ color: var(--accent);
+ font-weight: bold;
+ }
+ .chat-log .timestamp {
+ color: #8892a4;
+ font-size: 0.85rem;
+ }
+ .chat-input {
+ padding: 12px;
+ display: flex;
+ border-top: 1px solid #1a1f25;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ background: #1a1f25;
+ color: var(--primary);
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ }
+ .chat-input button {
+ margin-left: 8px;
+ padding: 8px 16px;
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 16px;
+ padding: 16px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: #1a1f25;
+ border-radius: 4px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ padding: 12px;
+ background: #0d1117;
+ font-weight: bold;
+ color: var(--primary);
+ border-bottom: 1px solid #1a1f25;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 12px;
+ color: #8892a4;
+ font-size: 0.9rem;
+ line-height: 1.4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .panel-body code {
+ color: var(--accent);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN</div>
+ <div>
+ <select class="project-picker">
+ <option>Project HORMUZ</option>
+ <option>Project KALIMA</option>
+ <option>Project SHARQ</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message"><span class="user">AGENT:</span> <span>/run-topic "altimeter settings"</span> <span class="timestamp">09:47</span></div>
+ <div class="message"><span class="user">SYSTEM:</span> <span>Initiating topic: "altimeter settings"</span> <span class="timestamp">09:47</span></div>
+ <div class="message"><span class="user">AGENT:</span> <span>/stampede "heading adjustments"</span> <span class="timestamp">09:48</span></div>
+ <div class="message"><span class="user">SYSTEM:</span> <span>Stampede mode engaged. Heading: 270°</span> <span class="timestamp">09:48</span></div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="> /command">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-body">Current viewport: 1440x900. Altitude: 35,000ft. Heading: 270°. Status: idle</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-body">Sketching wireframe for landing page. Use case: "altitude alerts". Layer: 3 of 5. Status: draft</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-body">Component: "flight status indicator". Variants: 3. Last updated: 09:45. Sync: up to date</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-body">Template: "aviation dashboard". Assets: 12. Last export: 09:30. Status: ready for deployment</div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/007-library-catalog.html b/mockups/007-library-catalog.html
new file mode 100644
index 0000000..292c6f5
--- /dev/null
+++ b/mockups/007-library-catalog.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>library-catalog — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #f0e6d0;
+ color: #1a1812;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 24px 48px;
+ background-color: #1a1812;
+ color: #fffaee;
+ font-family: 'Crimson Pro', serif;
+ font-size: 24px;
+ position: relative;
+ }
+ header select {
+ padding: 8px 16px;
+ font-size: 16px;
+ background-color: #fffaee;
+ color: #1a1812;
+ border: 2px solid #888178;
+ border-radius: 4px;
+ margin-left: 24px;
+ }
+ header .status {
+ position: absolute;
+ right: 48px;
+ padding: 8px 16px;
+ background-color: #fffaee;
+ border: 2px solid #5b3a1a;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background-color: #fffbe6;
+ border-right: 2px solid #888178;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ padding: 24px;
+ overflow-y: auto;
+ flex: 1;
+ font-size: 16px;
+ line-height: 1.6;
+ }
+ .chat-log .message {
+ margin: 12px 0;
+ }
+ .chat-log .user {
+ font-weight: 600;
+ color: #5b3a1a;
+ }
+ .chat-input {
+ display: flex;
+ padding: 16px;
+ border-top: 2px solid #888178;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ font-size: 16px;
+ border: 2px solid #888178;
+ border-radius: 4px;
+ margin-right: 8px;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background-color: #fffbe6;
+ border: 2px solid #888178;
+ border-radius: 8px;
+ padding: 24px;
+ font-size: 16px;
+ line-height: 1.6;
+ }
+ .panel h3 {
+ margin: 0 0 16px 0;
+ font-family: 'Crimson Pro', serif;
+ font-size: 20px;
+ color: #5b3a1a;
+ }
+ .panel .content {
+ color: #888178;
+ }
+ .panel .content code {
+ color: #1a1812;
+ font-family: monospace;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project: HORMUZ</option>
+ <option>Project: ASHES</option>
+ <option>Project: VELLUM</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message"><span class="user">USER:</span> /run-topic: Renaissance typography</div>
+ <div class="message"><span class="user">AGENT:</span> Activating topic: <code>Renaissance typography</code>. Fetching historical typefaces from the 15th century Italian script archives.</div>
+ <div class="message"><span class="user">USER:</span> /stampede: Generate 3 variations</div>
+ <div class="message"><span class="user">AGENT:</span> Stampede protocol engaged. Processing 3 typographic variations based on the current topic. Estimated completion: 47 seconds.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or query..." />
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h3>Preview</h3>
+ <div class="content">
+ <p>Current typographic variation: <strong>Italic Antiqua</strong> with <code>12pt</code> baseline. Visual mock-up available in the adjacent design tools.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <div class="content">
+ <p>Archival note: The <code>1476 Aldus Manutius</code> printing house employed this typeface for the <em>Decade of Philosophical Dialogues</em>. Considerations for modern use: legibility at <code>10pt</code> on screens.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <div class="content">
+ <p>Open <code>figma.design/hormuz-123</code> to view the current typeface in the <strong>Typography Lab</strong> workspace. Layer groups are named per Dewey Decimal classification.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <div class="content">
+ <p>Template available: <code>Canva-15th-Century-Poster</code>. Includes pre-set typefaces, paper textures, and historical illustration assets. Save under <strong>Project: VELLUM</strong>.</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/008-control-tower.html b/mockups/008-control-tower.html
new file mode 100644
index 0000000..2c29517
--- /dev/null
+++ b/mockups/008-control-tower.html
@@ -0,0 +1,288 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>control-tower — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg-ground: #0b1d2a;
+ --primary: #56ccf2;
+ --accent: #f2c94c;
+ --error: #ff6b6b;
+ --text-dark: #1c2c3a;
+ --text-light: #ffffff;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Inter', sans-serif;
+ color: var(--text-light);
+ background-color: var(--bg-ground);
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ position: relative;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 3rem;
+ background-color: #1c2c3a;
+ font-family: 'Bebas Neue', cursive;
+ font-size: 1.8rem;
+ position: relative;
+ z-index: 2;
+ }
+ header .brand {
+ color: var(--primary);
+ }
+ header .dropdown {
+ position: relative;
+ }
+ header .dropdown select {
+ background-color: var(--bg-ground);
+ color: var(--text-light);
+ border: 1px solid var(--primary);
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ header .status {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.9rem;
+ padding: 0.5rem 1rem;
+ background-color: #1c2c3a;
+ border: 1px solid var(--primary);
+ border-radius: 20px;
+ }
+ .status-circle {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: var(--accent);
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background-color: #0b1d2a;
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ }
+ .message {
+ display: flex;
+ gap: 0.5rem;
+ }
+ .message .user {
+ font-weight: 600;
+ color: var(--primary);
+ }
+ .message .content {
+ background-color: #1c2c3a;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ flex: 1;
+ }
+ .chat-input {
+ display: flex;
+ gap: 0.5rem;
+ input {
+ flex: 1;
+ padding: 0.5rem;
+ border: 1px solid var(--primary);
+ border-radius: 4px;
+ color: var(--text-light);
+ }
+ button {
+ background-color: var(--primary);
+ color: var(--bg-ground);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1.5rem;
+ padding: 2rem;
+ overflow-y: auto;
+ }
+ .panel {
+ background-color: #0b1d2a;
+ border: 1px solid var(--accent);
+ border-radius: 8px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .panel-header {
+ font-family: 'Bebas Neue', cursive;
+ font-size: 1.2rem;
+ color: var(--primary);
+ }
+ .panel-content {
+ font-size: 0.9rem;
+ color: var(--text-light);
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .panel-content div {
+ padding: 0.5rem 1rem;
+ background-color: #1c2c3a;
+ border-radius: 6px;
+ }
+ .panel-content .note {
+ background-color: #1c2c3a;
+ color: var(--accent);
+ }
+ .panel-content .component {
+ background-color: #1c2c3a;
+ color: var(--primary);
+ }
+ .panel-content .layout {
+ background-color: #1c2c3a;
+ color: var(--error);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN</div>
+ <div class="dropdown">
+ <select>
+ <option value="project1">HORMUZ-7A</option>
+ <option value="project2">CYPHER-9</option>
+ <option value="project3">ECHO-12</option>
+ </select>
+ </div>
+ <div class="status">
+ <div class="status-circle"></div>
+ <span>idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message">
+ <span class="user">AGENT-7:</span>
+ <span class="content">/run-topic 'cyberpunk interface redesign' — QUEUED</span>
+ </div>
+ <div class="message">
+ <span class="user">SYSTEM:</span>
+ <span class="content">TOPIC INITIATED: GENERATING 3D MOCKUPS FOR NEON-UI</span>
+ </div>
+ <div class="message">
+ <span class="user">AGENT-7:</span>
+ <span class="content">/stampede 'iterate on color scheme'</span>
+ </div>
+ <div class="message">
+ <span class="user">SYSTEM:</span>
+ <span class="content">STAMPEDE ENGAGED: 5 AGENTS NOW WORKING ON TERTIARY COLOR PALETTES</span>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type command or message...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-content">
+ <div class="component">
+ <svg width="100" height="50" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
+ <rect x="10" y="10" width="80" height="30" fill="#56ccf2"/>
+ <text x="50" y="30" font-family="Inter" font-size="14" fill="#0b1d2a" text-anchor="middle">DASHBOARD</text>
+ </svg>
+ </div>
+ <div class="layout">
+ <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+ <div style="background: #ff6b6b; width: 100px; height: 50px;"></div>
+ <div style="background: #f2c94c; width: 100px; height: 50px;"></div>
+ <div style="background: #56ccf2; width: 100px; height: 50px;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-content">
+ <div class="note">
+ <div style="font-style: italic;">sketch 2023-07-15</div>
+ <div>neon interface: 1. pulsing gradients 2. holographic overlays 3. 3D depth cues</div>
+ </div>
+ <div class="note">
+ <div style="font-style: italic;">todo</div>
+ <div>• finalize color hex codes • test with low-light environments • add tactile feedback</div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-content">
+ <div class="component">
+ <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+ <div style="background: #56ccf2; width: 80px; height: 40px; border-radius: 8px;"></div>
+ <div style="background: #f2c94c; width: 80px; height: 40px; border-radius: 8px;"></div>
+ <div style="background: #ff6b6b; width: 80px; height: 40px; border-radius: 8px;"></div>
+ </div>
+ </div>
+ <div class="component">
+ <div style="font-family: 'Inter'; font-weight: 600;">COMPONENT TREE</div>
+ <div style="display: flex; flex-direction: column; gap: 8px;">
+ <div style="padding: 8px; background: #1c2c3a; border-radius: 4px;">Header</div>
+ <div style="padding: 8px; background: #1c2c3a; border-radius: 4px;">Navigation</div>
+ <div style="padding: 8px; background: #1c2c3a; border-radius: 4px;">Card</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-content">
+ <div class="layout">
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
+ <div style="background: #56ccf2; height: 80px;"></div>
+ <div style="background: #f2c94c; height: 80px;"></div>
+ <div style="background: #ff6b6b; height: 80px;"></div>
+ <div style="background: #1c2c3a; height: 80px;"></div>
+ <div style="background: #1c2c3a; height: 80px;"></div>
+ <div style="background: #1c2c3a; height: 80px;"></div>
+ </div>
+ </div>
+ <div class="note">
+ <div style="font-style: italic;">layer notes</div>
+ <div>1. base grid (24px) 2. neon highlights (30% opacity) 3. shadow layers (blur 12px)</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/009-particle-physics.html b/mockups/009-particle-physics.html
new file mode 100644
index 0000000..55d6e4e
--- /dev/null
+++ b/mockups/009-particle-physics.html
@@ -0,0 +1,240 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=1440, initial-scale=0.9" />
+ <title>particle-physics-lab — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter+Tight:wght@400;600&display=swap" />
+ <style>
+ :root {
+ --bg: #06070a;
+ --primary: #7afcff;
+ --accent1: #fffd72;
+ --accent2: #bd6bff;
+ --text: #e0e0e0;
+ --footer: #1a1c22;
+ }
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Inter Tight', sans-serif;
+ color: var(--text);
+ background: linear-gradient(135deg, var(--bg) 0%, #0a0b10 100%);
+ min-height: 900px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: radial-gradient(circle at 30% 30%, var(--primary) 0%, transparent 70%);
+ color: var(--bg);
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 24px;
+ letter-spacing: 0.05em;
+ position: relative;
+ z-index: 1;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: var(--primary);
+ opacity: 0.1;
+ pointer-events: none;
+ mix-blend-mode: screen;
+ }
+ .project-picker {
+ padding: 8px 16px;
+ background: var(--accent1);
+ border-radius: 6px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: 0.2s;
+ }
+ .project-picker:hover {
+ background: var(--accent2);
+ }
+ .status-indicator {
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 12px;
+ background: var(--accent1);
+ color: var(--bg);
+ box-shadow: 0 0 8px rgba(122, 252, 255, 0.3);
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ background: var(--bg);
+ padding: 24px;
+ overflow-y: auto;
+ position: relative;
+ }
+ .chat-messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 24px;
+ }
+ .message {
+ padding: 12px 16px;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.02);
+ font-size: 14px;
+ line-height: 1.4;
+ position: relative;
+ }
+ .message::before {
+ content: '→ ';
+ color: var(--accent1);
+ font-weight: 600;
+ }
+ .slash-command {
+ color: var(--accent2);
+ font-weight: 700;
+ }
+ .chat-input {
+ display: flex;
+ gap: 12px;
+ background: var(--accent1);
+ border-radius: 12px;
+ padding: 8px 16px;
+ font-size: 14px;
+ position: relative;
+ }
+ .chat-input input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ color: var(--bg);
+ outline: none;
+ font-family: 'JetBrains Mono', monospace;
+ }
+ .chat-input button {
+ background: none;
+ border: none;
+ color: var(--accent2);
+ font-size: 16px;
+ cursor: pointer;
+ }
+ .workspace {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: rgba(255, 255, 255, 0.01);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ padding: 16px;
+ position: relative;
+ }
+ .panel-header {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 18px;
+ color: var(--primary);
+ margin-bottom: 12px;
+ }
+ .panel-body {
+ font-size: 14px;
+ line-height: 1.6;
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ .panel-body code {
+ color: var(--accent2);
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 13px;
+ }
+ .panel-body .footnote {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.4);
+ margin-top: 4px;
+ }
+ footer {
+ padding: 12px 32px;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.3);
+ text-align: right;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <div class="project-picker">PROJECT ▼</div>
+ <div class="status-indicator">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message">User: /run-topic "Quantum Foam Topology"</div>
+ <div class="message">Agent: Initializing lattice symmetry analysis... σ ∈ Σ<sub>3</sub> → Σ<sub>7</sub> (see <a href="#">arXiv:2304.12345</a>)</div>
+ <div class="message">User: /stampede "Lattice Perturbation"</div>
+ <div class="message">Agent: Engaging 10<sup>6</sup> parallel simulations. Expected runtime: 4.7 ± 0.3 τ<sub>Planck</sub></div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="→ /help" />
+ <button>⏎</button>
+ </div>
+ </div>
+ <div class="workspace">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <p>Rendering 3D manifold with <code>χ = 2.718</code> curvature. Visualizing spin network states at <code>ε = 10<sup>-18</sup></code> resolution.</p>
+ <p class="footnote">Footnote: This is not a simulation of actual spacetime.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <p>Section 3.1: <em>Noncommutative Geometry in Loop Quantum Gravity</em> (draft v2.1)</p>
+ <p><code>Lemma 3.2:</code> If <code>θ ∈ Θ</code> then <code>∃φ ∈ Φ</code> such that <code>φ(θ) ≡ 0 mod ℤ</code>.</p>
+ <p class="footnote">Footnote: Theorem 3.1 requires <code>ℏ = 1</code> normalization.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <p>Design system component: <code>ParticleVector</code> with <code>α = 0.7</code> opacity and <code>β = 1.2</code> scattering.</p>
+ <p>Mockup: 3D lattice grid with <code>δ = 0.001</code> edge distortion.</p>
+ <p class="footnote">Footnote: Not to scale with actual quantum foam.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <p>Poster template: "Quantum Cosmology 2024" with <code>γ = 0.23</code> color saturation.</p>
+ <p>Includes placeholder for <code>ρ_c = 0.92</code> critical density visualization.</p>
+ <p class="footnote">Footnote: Poster does not imply endorsement by any spacetime continuum.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <footer>
+ particle-physics-lab — Four Horsemen Studio (β v0.9.7)
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/010-sci-fi-bridge.html b/mockups/010-sci-fi-bridge.html
new file mode 100644
index 0000000..5ed4d40
--- /dev/null
+++ b/mockups/010-sci-fi-bridge.html
@@ -0,0 +1,268 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>sci-fi-bridge — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Exo+2:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Exo 2', sans-serif;
+ background-color: #0a0e1a;
+ color: #ffba08;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #1d2333;
+ font-family: 'Orbitron', sans-serif;
+ color: #ffba08;
+ position: relative;
+ z-index: 2;
+ }
+ header h1 {
+ font-size: 1.5rem;
+ margin: 0;
+ }
+ .project-picker {
+ position: relative;
+ }
+ .project-picker select {
+ background-color: #1d2333;
+ border: 1px solid #ffba08;
+ color: #ffba08;
+ padding: 8px 16px;
+ font-size: 1rem;
+ border-radius: 4px;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23ffba08'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+ background-repeat: no-repeat;
+ background-position: right 8px center;
+ }
+ .status-indicator {
+ font-size: 0.875rem;
+ padding: 4px 8px;
+ border-radius: 4px;
+ background-color: #3a86ff;
+ color: #0a0e1a;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background-color: #0a0e1a;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 16px;
+ overflow-y: auto;
+ background-color: #1d2333;
+ border-right: 1px solid #ffba08;
+ }
+ .chat-message {
+ margin: 12px 0;
+ display: flex;
+ }
+ .chat-message.user {
+ justify-content: flex-end;
+ }
+ .chat-message.system {
+ justify-content: flex-start;
+ }
+ .chat-bubble {
+ max-width: 70%;
+ padding: 12px 16px;
+ border-radius: 12px;
+ background-color: #1d2333;
+ color: #ffba08;
+ font-family: 'Exo 2', sans-serif;
+ font-size: 0.9rem;
+ position: relative;
+ }
+ .chat-bubble::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ border: 8px solid transparent;
+ border-top-color: #1d2333;
+ }
+ .chat-bubble.user::before {
+ left: 100%;
+ border-left-color: #1d2333;
+ }
+ .chat-input {
+ display: flex;
+ padding: 16px;
+ background-color: #0a0e1a;
+ border-top: 1px solid #ffba08;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ font-size: 1rem;
+ color: #ffba08;
+ background-color: #1d2333;
+ border: 1px solid #ffba08;
+ border-radius: 4px;
+ outline: none;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 16px;
+ padding: 16px;
+ overflow: hidden;
+ }
+ .panel {
+ background-color: #1d2333;
+ border: 1px solid #ffba08;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ .panel-header {
+ padding: 12px 16px;
+ font-family: 'Orbitron', sans-serif;
+ font-size: 1.2rem;
+ color: #ffba08;
+ background-color: #0a0e1a;
+ border-bottom: 1px solid #3a86ff;
+ }
+ .panel-content {
+ flex: 1;
+ padding: 16px;
+ font-family: 'Exo 2', sans-serif;
+ font-size: 0.9rem;
+ color: #ffba08;
+ overflow-y: auto;
+ }
+ .panel-content pre {
+ font-family: 'Exo 2', monospace;
+ font-size: 0.85rem;
+ background-color: #0a0e1a;
+ padding: 8px;
+ border-radius: 4px;
+ color: #3a86ff;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>sci-fi-bridge</h1>
+ <div class="project-picker">
+ <select>
+ <option value="project1">Hormuz Core</option>
+ <option value="project2">Orion Bridge</option>
+ <option value="project3">Epsilon Log</option>
+ </select>
+ </div>
+ <div class="status-indicator">idle</div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message system">
+ <div class="chat-bubble">
+ <span>SYSTEM: Stardate 31245.7 — Initiating design sync with Epsilon Log</span>
+ </div>
+ </div>
+ <div class="chat-message user">
+ <div class="chat-bubble">
+ <span>/run-topic: Quantum interface redesign</span>
+ </div>
+ </div>
+ <div class="chat-message system">
+ <div class="chat-bubble">
+ <span>EXECUTING: Deploying neural mesh patterns to interface layer</span>
+ </div>
+ </div>
+ <div class="chat-message user">
+ <div class="chat-bubble">
+ <span>/stampede: Generate 12 variants for warp core visuals</span>
+ </div>
+ </div>
+ <div class="chat-message system">
+ <div class="chat-bubble">
+ <span>ALERT: Overloading aesthetic protocols — diverting to auxiliary design matrix</span>
+ </div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message...">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <pre>
+// Quantum interface mockup
+[Neural mesh grid: 72% complete]
+[Color palette: #ff006e → #3a86ff gradient]
+[Stardate overlay: 31245.7]
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ <pre>
+// Design notes
+- Use fractal geometry for warp core visuals
+- Maintain 3:2 aspect ratio for all schematics
+- Include 3D holographic elements
+- Apply #ffba08 as primary accent
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ <pre>
+// Component tree
+- Warp core container
+ - Quantum lattice (variant 1)
+ - Neutrino conduit (variant 2)
+ - Gravitic field overlay
+- Control panel (3D)
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ <pre>
+// Template layers
+[Background: Deep space nebula]
+[Text: Orbitron Bold]
+[Accent: #ffba08 gradient]
+[Grid: 12-column layout]
+[Stardate: 31245.7]
+ </pre>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/011-film-cutting-room.html b/mockups/011-film-cutting-room.html
new file mode 100644
index 0000000..22b3d88
--- /dev/null
+++ b/mockups/011-film-cutting-room.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=1440, height=900">
+ <title>film-cutting-room — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Spectral:wght@400;600&display=swap">
+ <style>
+ body {
+ margin: 0;
+ font-family: Inter, sans-serif;
+ background-color: #1a1612;
+ color: #e8e1d3;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ .header {
+ background-color: #3e2c1a;
+ padding: 15px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .brand {
+ font-family: Spectral, serif;
+ font-size: 24px;
+ color: #dba673;
+ }
+
+ .project-selector {
+ font-size: 16px;
+ color: #e8e1d3;
+ background-color: #5d4037;
+ border: none;
+ padding: 8px 12px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ .status {
+ font-size: 16px;
+ color: #dba673;
+ }
+
+ .main-container {
+ display: flex;
+ height: calc(100vh - 40px); /* Account for header height */
+ padding: 20px;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #5d4037;
+ padding: 15px;
+ border-radius: 8px;
+ height: 100%;
+ }
+
+ .chat-log {
+ height: calc(100% - 50px); /* Account for input bar */
+ overflow-y: auto;
+ padding-bottom: 10px;
+ }
+
+ .chat-message {
+ padding: 8px 12px;
+ margin-bottom: 8px;
+ border-radius: 4px;
+ background-color: #3e2c1a;
+ color: #e8e1d3;
+ font-size: 14px;
+ }
+
+ .chat-input {
+ width: 100%;
+ padding: 8px 12px;
+ border: none;
+ border-radius: 4px;
+ background-color: #3e2c1a;
+ color: #e8e1d3;
+ font-size: 14px;
+ }
+
+ .right-pane {
+ width: 60%;
+ padding: 15px;
+ background-color: #5d4037;
+ border-radius: 8px;
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ }
+
+ .panel {
+ background-color: #3e2c1a;
+ border-radius: 8px;
+ padding: 20px;
+ color: #e8e1d3;
+ font-size: 16px;
+ }
+
+ .panel h3 {
+ font-family: Spectral, serif;
+ font-size: 20px;
+ color: #dba673;
+ margin-bottom: 10px;
+ }
+
+ .panel p {
+ font-size: 14px;
+ line-height: 1.6;
+ }
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <div class="brand">HORMUZ</div>
+ <div>
+ <select class="project-selector">
+ <option value="project1">Project Chimera</option>
+ <option value="project2">Operation Valkyrie</option>
+ <option value="project3">The Obsidian Gate</option>
+ </select>
+ </div>
+ <div class="status">Idle</div>
+ </div>
+
+ <div class="main-container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message">
+ <span style="font-weight: 600;">Operator:</span> Initializing topic tree. Please stand by.
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: 600;">User:</span> /run-topic "Ethereal Bloom" - sequence 37
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: 600;">System:</span> Topic "Ethereal Bloom" initiated. 47 takes queued.
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: 600;">User:</span> /stampede 12-28 - frame ranges 147-162.
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: 600;">System:</span> Stampede applied. Estimated render time: 3 hours, 17 minutes.
+ </div>
+ </div>
+ <input type="text" class="chat-input" placeholder="Enter message...">
+ </div>
+
+ <div class="right-pane">
+ <div class="panel">
+ <h3>Preview</h3>
+ <p>Displaying a low-resolution proxy. Check for composition issues and general flow. Currently rendering frame 187. Error log: None.</p>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <p>Timeline data and edit notes. Track changes, manage versioning. Last updated: 2024-02-29 14:32 UTC.</p>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <p>Asset library synchronization status. Checking for conflicts... Last sync: 1 minute ago. Pending updates: 2.</p>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <p>Marketing material draft. Review and approve assets for social media campaign. Deadline: March 15th. Current status: In Review.</p>
+ </div>
+ </div>
+ </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/012-fabric-mill.html b/mockups/012-fabric-mill.html
new file mode 100644
index 0000000..cec2e9a
--- /dev/null
+++ b/mockups/012-fabric-mill.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>fabric-mill-floor — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500&display=swap">
+ <style>
+ body {
+ margin: 0;
+ font-family: 'Plus Jakarta Sans', sans-serif;
+ color: #2d2a26;
+ background-color: #f3ebd9;
+ line-height: 1.6;
+ }
+
+ .container {
+ display: flex;
+ width: 100%;
+ height: 900px;
+ }
+
+ header {
+ background-color: #c5a572;
+ color: #2d2a26;
+ padding: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: 'Cormorant Garamond', serif;
+ }
+
+ header h1 {
+ margin: 0;
+ font-size: 24px;
+ }
+
+ .project-picker {
+ font-family: 'Plus Jakarta Sans', sans-serif;
+ padding: 5px 10px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 0.8);
+ color: #1f4d40;
+ }
+
+ .status {
+ font-size: 14px;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #c9292e;
+ color: #f3ebd9;
+ padding: 20px;
+ height: 100%;
+ }
+
+ .chat-log {
+ height: 80%;
+ overflow-y: auto;
+ padding: 10px;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 5px;
+ }
+
+ .chat-message {
+ margin-bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 0.8);
+ }
+
+ .chat-input {
+ display: flex;
+ margin-top: 10px;
+ }
+
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ border: none;
+ border-radius: 5px;
+ }
+
+ .chat-input button {
+ background-color: #1f4d40;
+ color: #f3ebd9;
+ padding: 8px 15px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ .right-pane {
+ width: 60%;
+ padding: 20px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ height: 100%;
+ }
+
+ .panel {
+ background-color: rgba(255, 255, 255, 0.9);
+ padding: 20px;
+ border-radius: 5px;
+ font-family: 'Plus Jakarta Sans', sans-serif;
+ }
+
+ .panel h2 {
+ font-family: 'Cormorant Garamond', serif;
+ margin-top: 0;
+ color: #1f4d40;
+ }
+
+ .panel p {
+ color: #2d2a26;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN / HORMUZ</h1>
+ <select class="project-picker">
+ <option>The Verdant Loom</option>
+ <option>Crimson Threads</option>
+ <option>Azure Weave</option>
+ </select>
+ <span class="status">idle</span>
+ </header>
+
+ <div class="container">
+ <div class="left-pane">
+ <h2>Design Log</h2>
+ <div class="chat-log">
+ <div class="chat-message"><strong>Operator:</strong> Initiating pattern sequence.</div>
+ <div class="chat-message"><strong>User:</strong> /run-topic "Rustic Bloom"</div>
+ <div class="chat-message"><strong>Operator:</strong> Topic "Rustic Bloom" engaged. Analyzing base texture.</div>
+ <div class="chat-message"><strong>User:</strong> /stampede "Sun-Bleached Linen"</div>
+ <div class="chat-message"><strong>Operator:</strong> Stampede "Sun-Bleached Linen" initiated. Color palette adjustments pending.</div>
+ <div class="chat-message"><strong>Operator:</strong> Fine-tuning warp density... optimal balance achieved.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command...">
+ <button>Send</button>
+ </div>
+ </div>
+
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>Simulate the weave in real-time. Adjust thread count, color saturation, and observe the interplay of light and shadow across the surface. A digital loom for your creative vision.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Explore compatible paper stocks and finishes. Generate accurate print simulations to ensure your design translates flawlessly from screen to tangible form. Consider the weight, texture, and archival qualities.</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>Directly export design elements as vector layers for seamless integration into your Figma workflow. Maintain design integrity and collaborate effortlessly with your team. Export as SVG or layered PDF.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>Quickly generate Canva-ready templates with pre-configured dimensions and color palettes. Empower your marketing team to create compelling visuals with your signature designs. Export as JPEG or PNG.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/013-orchard-record.html b/mockups/013-orchard-record.html
new file mode 100644
index 0000000..3e5ad7d
--- /dev/null
+++ b/mockups/013-orchard-record.html
@@ -0,0 +1,209 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>orchard-record-book — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;700&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Manrope', sans-serif;
+ background-color: #fbf6e9;
+ color: #3a4a2c;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 100vw;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 2rem;
+ background-color: #ffffff;
+ border-bottom: 1px solid #9b7a3e;
+ font-family: 'Lora', serif;
+ font-size: 1.5rem;
+ letter-spacing: 0.05em;
+ }
+ header .brand {
+ font-weight: 700;
+ }
+ header .project-picker {
+ padding: 0.5rem 1rem;
+ background-color: #fbf6e9;
+ border: 1px solid #9b7a3e;
+ border-radius: 4px;
+ color: #3a4a2c;
+ font-size: 0.9rem;
+ }
+ header .status {
+ padding: 0.4rem 0.8rem;
+ background-color: #fbf6e9;
+ border: 1px solid #5e3023;
+ color: #5e3023;
+ font-size: 0.85rem;
+ border-radius: 4px;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ background-color: #ffffff;
+ border-right: 1px solid #9b7a3e;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 1rem;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+ }
+ .chat-message {
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message.system {
+ align-self: flex-start;
+ }
+ .chat-message .text {
+ background-color: #fbf6e9;
+ padding: 0.6rem 1rem;
+ border-radius: 8px;
+ max-width: 70%;
+ }
+ .chat-input {
+ display: flex;
+ padding: 0.8rem;
+ border-top: 1px solid #9b7a3e;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.6rem;
+ font-size: 0.95rem;
+ border: none;
+ outline: none;
+ background-color: #fbf6e9;
+ color: #3a4a2c;
+ border-radius: 4px;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 1rem;
+ padding: 1rem;
+ }
+ .panel {
+ background-color: #ffffff;
+ border: 1px solid #9b7a3e;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ padding: 1rem;
+ font-family: 'Lora', serif;
+ font-size: 1.2rem;
+ font-weight: 700;
+ color: #5e3023;
+ background-color: #fbf6e9;
+ border-bottom: 1px solid #9b7a3e;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 1rem;
+ font-size: 0.95rem;
+ line-height: 1.4;
+ color: #3a4a2c;
+ }
+ .panel-body::before {
+ content: " ";
+ display: block;
+ height: 20px;
+ background: repeating-linear-gradient(
+ to right,
+ #fbf6e9,
+ #fbf6e9 10px,
+ #ffffff 10px,
+ #ffffff 20px
+ );
+ margin-bottom: 1rem;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">Four Horsemen Studio</div>
+ <div>
+ <select class="project-picker">
+ <option>Hormuz Harvest 2023</option>
+ <option>Black Earth Blend</option>
+ <option>Golden Root Initiative</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic: 'Aging techniques for chestnut tannins'</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Topic initiated. Monitoring oak barrel interactions with chestnut husk extracts. Patience is the first ingredient.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede: 'Generate 500 variations of the 2023 harvest label'</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Stampede engaged. 500 iterations of inked paper, pressed leaves, and wax seals in progress. Expect a parchment avalanche by dawn.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or note...">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ A mockup of the 2023 harvest journal, inked with walnut and iron gall. The pages whisper of sun-dried apples and the first frost.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ Hand-pressed leaves from the 2023 vintage, inked with iron gall. Awaiting the first impressions. The fibers hold the scent of rain-soaked earth.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ Mockups of the 2023 harvest journal, inked in walnut and iron gall. Layers awaiting the first cut. The design is a slow ripening of ideas.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ Digital sketches of pressed leaves and wax seals. The colors are extracted from the last batch of elderberry syrup. Awaiting the final brushstroke.
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/014-newspaper-front.html b/mockups/014-newspaper-front.html
new file mode 100644
index 0000000..8d8db30
--- /dev/null
+++ b/mockups/014-newspaper-front.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>newspaper-front-page — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Serif+Pro:wght@400&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 1440px;
+ height: 900px;
+ background: #fdfaf3;
+ font-family: 'Source Serif Pro', serif;
+ color: #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ header {
+ height: 60px;
+ background: #1a1a1a;
+ color: #fdfaf3;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ font-family: 'Playfair Display', serif;
+ font-size: 24px;
+ position: relative;
+ }
+ header select {
+ margin-left: 20px;
+ padding: 5px 10px;
+ background: #222;
+ color: #fff;
+ border: none;
+ font-size: 14px;
+ }
+ header .status {
+ position: absolute;
+ right: 20px;
+ padding: 4px 12px;
+ background: #a83232;
+ color: #fff;
+ border-radius: 4px;
+ font-size: 12px;
+ }
+ main {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background: #fdfaf3;
+ border-right: 1px solid #666;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ padding: 16px;
+ font-size: 14px;
+ }
+ .chat-message {
+ margin-bottom: 12px;
+ }
+ .chat-message.user {
+ text-align: right;
+ }
+ .chat-message.system {
+ text-align: left;
+ }
+ .chat-message .timestamp {
+ color: #666;
+ font-size: 10px;
+ margin-right: 8px;
+ }
+ .chat-input {
+ border-top: 1px solid #666;
+ padding: 12px;
+ display: flex;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 6px;
+ font-size: 14px;
+ border: none;
+ outline: none;
+ }
+ .chat-input button {
+ padding: 6px 12px;
+ background: #1a1a1a;
+ color: #fff;
+ border: none;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 12px;
+ padding: 16px;
+ }
+ .panel {
+ background: #fff;
+ border: 1px solid #666;
+ border-radius: 4px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ padding: 12px;
+ background: #222;
+ color: #fff;
+ font-family: 'Playfair Display', serif;
+ font-size: 16px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 16px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #222;
+ }
+ .panel-body h3 {
+ margin: 0 0 8px;
+ font-family: 'Playfair Display', serif;
+ font-size: 18px;
+ color: #a83232;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ FOUR HORSEMEN STUDIO
+ <select>
+ <option>Project Hail Mary</option>
+ <option>Project Titan</option>
+ <option>Project Echo</option>
+ </select>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <span class="timestamp">14:32</span>
+ <strong>/run-topic</strong> "Neon Cyberpunk Aesthetic"
+ </div>
+ <div class="chat-message system">
+ <span class="timestamp">14:33</span>
+ <em>Agent:</em> Initializing generative workflow for "Neon Cyberpunk Aesthetic"...
+ </div>
+ <div class="chat-message user">
+ <span class="timestamp">14:34</span>
+ <strong>/stampede</strong> "Generate 3 variants"
+ </div>
+ <div class="chat-message system">
+ <span class="timestamp">14:35</span>
+ <em>Agent:</em> Processing 3 variant requests. Estimated completion: 1 minute 23 seconds.
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <h3>BREAKING: AI Takes Over Design Workflow</h3>
+ <p>Four Horsemen's new agent system has completed its first full-cycle design task, generating a complete branding package in under 90 seconds. The prototype features a bold neon color palette and glitch-art typography.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <h3>AGENT SYSTEM UPDATE</h3>
+ <p><em>Byline:</em> <strong>Marla Voss</strong> | <em>Dateline:</em> 04/05/2024</p>
+ <p>The latest iteration of our design orchestrator has passed its first stress test, handling 12 concurrent design requests across multiple platforms. The system's ability to synthesize user input into coherent design outputs is nothing short of revolutionary.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <h3>PROTOTYPE FRAMEWORK</h3>
+ <p>Current mockup includes: 3D neon text components, responsive grid layouts, and AI-generated vector illustrations. The prototype is being stress-tested in a closed environment with 24/7 monitoring.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <h3>USER-FACING TOOLS</h3>
+ <p>Integration with Canva's API is in progress. The system will allow users to generate and export design assets directly from the orchestrator interface, with real-time collaboration features enabled by default.</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/015-subway-blueprint.html b/mockups/015-subway-blueprint.html
new file mode 100644
index 0000000..69e0eea
--- /dev/null
+++ b/mockups/015-subway-blueprint.html
@@ -0,0 +1,215 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>subway-blueprint — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Helvetica-Neue:wght@400;700&family=Roboto+Mono:wght@400&display=swap">
+ <style>
+ body {
+ margin: 0;
+ font-family: 'Helvetica Neue', sans-serif;
+ background-color: #0e2a47;
+ color: #a4c5e8;
+ line-height: 1.6;
+ overflow-x: hidden;
+ height: 900px;
+ }
+
+ .container {
+ display: flex;
+ width: 1440px;
+ margin: 0 auto;
+ height: 100%;
+ }
+
+ header {
+ background-color: #142e4d;
+ padding: 10px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 700;
+ font-size: 1.2em;
+ }
+
+ .brand {
+ font-family: 'Helvetica Neue', sans-serif;
+ color: #fcd13e;
+ }
+
+ .project-picker {
+ display: flex;
+ align-items: center;
+ }
+
+ .project-picker select {
+ background-color: #142e4d;
+ color: #a4c5e8;
+ border: none;
+ padding: 5px 10px;
+ font-family: 'Helvetica Neue', sans-serif;
+ }
+
+ .status {
+ color: #e84545;
+ font-weight: 700;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #0e2a47;
+ padding: 20px;
+ height: 100%;
+ overflow-y: auto;
+ }
+
+ .chat-log {
+ margin-bottom: 20px;
+ }
+
+ .chat-message {
+ padding: 10px;
+ background-color: #142e4d;
+ margin-bottom: 5px;
+ border-radius: 5px;
+ }
+
+ .user-message {
+ text-align: right;
+ }
+
+ .system-message {
+ text-align: left;
+ }
+
+ .chat-input {
+ display: flex;
+ background-color: #142e4d;
+ padding: 10px;
+ border-radius: 5px;
+ height: 40px;
+ }
+
+ .chat-input input {
+ background-color: transparent;
+ color: #a4c5e8;
+ border: none;
+ flex: 1;
+ font-family: 'Roboto Mono', monospace;
+ }
+
+ .chat-input button {
+ background-color: #a4c5e8;
+ color: #0e2a47;
+ border: none;
+ padding: 5px 10px;
+ cursor: pointer;
+ font-family: 'Helvetica Neue', sans-serif;
+ }
+
+ .right-pane {
+ width: 60%;
+ background-color: #0e2a47;
+ padding: 20px;
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ }
+
+ .panel {
+ background-color: #142e4d;
+ padding: 20px;
+ border-radius: 5px;
+ height: calc(100% - 40px);
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ font-family: 'Roboto Mono', monospace;
+ }
+
+ .panel h3 {
+ margin-top: 0;
+ font-family: 'Helvetica Neue', sans-serif;
+ color: #a4c5e8;
+ }
+
+ .panel p {
+ color: #a4c5e8;
+ }
+
+ .preview {
+ /* Placeholder content */
+ }
+
+ .paper {
+ /* Placeholder content */
+ }
+
+ .figma {
+ /* Placeholder content */
+ }
+
+ .canva {
+ /* Placeholder content */
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <div class="brand">HORMUZ</div>
+ <div class="project-picker">
+ <select>
+ <option value="project-a">Project: Alpha</option>
+ <option value="project-b">Project: Beta</option>
+ <option value="project-c">Project: Gamma</option>
+ </select>
+ </div>
+ <div class="status">Idle</div>
+ </header>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message system-message">
+ System: Connection Established. Ready.
+ </div>
+ <div class="chat-message user-message">
+ User: /run-topic "Initial Concept Exploration"
+ </div>
+ <div class="chat-message system-message">
+ System: Topic "Initial Concept Exploration" started.
+ </div>
+ <div class="chat-message user-message">
+ User: /stampede "Character Design Iterations - Round 1"
+ </div>
+ <div class="chat-message system-message">
+ System: Stampede "Character Design Iterations - Round 1" initiated. Expect delays.
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command..." />
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel preview">
+ <h3>Preview</h3>
+ <p>Rendering preview... Please await confirmation from the staging server. Expect intermittent frame drops.</p>
+ </div>
+ <div class="panel paper">
+ <h3>Paper</h3>
+ <p>Document archive access restricted. Please submit a request to Records Management. Reference code: 789-Alpha.</p>
+ </div>
+ <div class="panel figma">
+ <h3>Figma</h3>
+ <p>Figma file unavailable. Check network connection or contact the design team.</p>
+ </div>
+ <div class="panel canva">
+ <h3>Canva</h3>
+ <p>Canva integration in maintenance. Please use alternative asset delivery methods.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/016-nautical-chart.html b/mockups/016-nautical-chart.html
new file mode 100644
index 0000000..b92b86b
--- /dev/null
+++ b/mockups/016-nautical-chart.html
@@ -0,0 +1,211 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>nautical-chart — Four Horsemen Studio</title>
+ <meta name="viewport" content="width=1440">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=DM+Mono&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'DM Mono', monospace;
+ background-color: #1c4966;
+ color: #dcd0a8;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: #7fb069;
+ color: #1c4966;
+ font-family: 'Crimson Pro', serif;
+ font-size: 1.5rem;
+ }
+ header select {
+ padding: 8px 12px;
+ background: #fff8e0;
+ color: #bf3922;
+ border: 2px solid #dcd0a8;
+ font-family: 'DM Mono', monospace;
+ }
+ header .status {
+ padding: 6px 12px;
+ background: #bf3922;
+ color: #fff8e0;
+ border-radius: 4px;
+ font-size: 0.8rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #dcd0a8;
+ padding: 24px;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 16px;
+ }
+ .message {
+ display: flex;
+ gap: 12px;
+ }
+ .message.user {
+ align-items: flex-end;
+ }
+ .message.system {
+ align-items: flex-start;
+ }
+ .message-text {
+ background: #fff8e0;
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-family: 'DM Mono', monospace;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 12px;
+ font-family: 'DM Mono', monospace;
+ background: #fff8e0;
+ border: 2px solid #7fb069;
+ color: #1c4966;
+ }
+ .chat-input button {
+ padding: 12px 24px;
+ background: #7fb069;
+ color: #1c4966;
+ border: none;
+ border-radius: 4px;
+ font-family: 'DM Mono', monospace;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 24px;
+ padding: 24px;
+ background: #1c4966;
+ }
+ .panel {
+ background: #fff8e0;
+ color: #bf3922;
+ padding: 24px;
+ border: 2px solid #dcd0a8;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Crimson Pro', serif;
+ font-size: 1.2rem;
+ margin-bottom: 16px;
+ }
+ .panel-body {
+ font-family: 'DM Mono', monospace;
+ color: #1c4966;
+ }
+ .panel-body pre {
+ font-size: 0.9rem;
+ background: #dcd0a8;
+ padding: 12px;
+ border-radius: 4px;
+ overflow-x: auto;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN / HORMUZ</span>
+ <div>
+ <select>
+ <option value="project1">Project: Coral Reefs</option>
+ <option value="project2">Project: Abyssal Trench</option>
+ <option value="project3">Project: Trade Winds</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message user">
+ <div class="message-text">/run-topic: charting the 32nd parallel</div>
+ </div>
+ <div class="message system">
+ <div class="message-text">Initiating topic: 32°N 64°E. Current depth: 2,300 fathoms. Latitude drift detected.</div>
+ </div>
+ <div class="message user">
+ <div class="message-text">/stampede: generate 3 variants for the northern hemisphere</div>
+ </div>
+ <div class="message system">
+ <div class="message-text">Stampede engaged. Generating 3 variants... Current bearing: 270°. Expected completion: 4 minutes 12 seconds.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="longitude/latitude input">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <pre>┌───────────────┐
+│ 32°N 64°E │
+│ Depth: 2300 │
+│ Current: NE │
+└───────────────┘
+</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <pre>NOTE: Verify compass calibration before proceeding.
+Log entry: 2023-08-15T14:22:17Z
+Depth readings inconsistent with 270° bearing.
+Recommend re-survey at 33°N 65°E.</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <pre>Design mock-up: Compass rose
+- 32 points of reference
+- Tidal patterns layered at 20% opacity
+- Color scheme: #7fb069 (primary), #bf3922 (accent)
+- Font: Crimson Pro for headings</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <pre>Template: Nautical Chart
+- Background: #1c4966 (deep ocean)
+- Grid lines: #dcd0a8 (surface)
+- Text: #fff8e0 (highlight)
+- Include: latitude/longitude markers every 10°</pre>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/017-weather-channel.html b/mockups/017-weather-channel.html
new file mode 100644
index 0000000..d88ee29
--- /dev/null
+++ b/mockups/017-weather-channel.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>tv-weather-channel — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Helvetica+Neue:400,700&family=Inter:400,600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #0b1c2c;
+ color: #ffea00;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #0e2335;
+ border-bottom: 1px solid #00b4ff;
+ font-family: 'Helvetica Neue', sans-serif;
+ font-weight: 700;
+ font-size: 1.5rem;
+ }
+ header select {
+ padding: 8px 12px;
+ background: #0b1c2c;
+ color: #ffea00;
+ border: 1px solid #00b4ff;
+ border-radius: 4px;
+ font-family: 'Inter', sans-serif;
+ font-size: 1rem;
+ }
+ header .status {
+ padding: 6px 12px;
+ background: #ff5722;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+ border-right: 1px solid #00b4ff;
+ background-color: #0b1c2c;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 24px;
+ }
+ .message {
+ display: flex;
+ gap: 12px;
+ }
+ .message.user {
+ align-items: flex-start;
+ }
+ .message.system {
+ align-items: flex-end;
+ }
+ .message-content {
+ background-color: #00b4ff;
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 0.95rem;
+ line-height: 1.3;
+ }
+ .timestamp {
+ font-size: 0.7rem;
+ color: #ffea00;
+ opacity: 0.7;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 12px;
+ border: 1px solid #00b4ff;
+ border-radius: 4px;
+ background: #0b1c2c;
+ color: #ffea00;
+ font-size: 1rem;
+ }
+ .chat-input button {
+ padding: 12px 24px;
+ background: #ffea00;
+ color: #0b1c2c;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: #0b1c2c;
+ border: 1px solid #00b4ff;
+ border-radius: 8px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Helvetica Neue', sans-serif;
+ font-weight: 700;
+ font-size: 1.2rem;
+ color: #ffea00;
+ margin-bottom: 16px;
+ }
+ .panel-content {
+ font-size: 0.95rem;
+ line-height: 1.5;
+ color: #00b4ff;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+ .panel-content span {
+ background: #0e2335;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div>HORMUZ</div>
+ <div>
+ <select>
+ <option>Project Nibiru</option>
+ <option>Project Shambhala</option>
+ <option>Project Ouroboros</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="message-content">/run-topic: "Quantum Typography in 2077"</div>
+ <div class="timestamp">09:23</div>
+ </div>
+ <div class="message system">
+ <div class="message-content">Topic initiated. Synthesizing glyphs from 23rd century data streams.</div>
+ <div class="timestamp">09:24</div>
+ </div>
+ <div class="message user">
+ <div class="message-content">/stampede: "Generate 1000 variations of the word 'horizon'</div>
+ <div class="timestamp">09:25</div>
+ </div>
+ <div class="message system">
+ <div class="message-content">Stampede engaged. 1000 variations in 12.7 seconds. Output queue: 1000</div>
+ <div class="timestamp">09:26</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type command or message..." />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-content">
+ <span>Neon glyph cascade</span>
+ <span>Glitch transition</span>
+ <span>3D holographic layout</span>
+ <span>Self-replicating UI</span>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-content">
+ <span>Concept: Synthwave typography</span>
+ <span>Sketch: 2077 interface mockup</span>
+ <span>Notes: Avoid 1980s clichés</span>
+ <span>Todo: Integrate AI-generated fonts</span>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-content">
+ <span>Component: Floating text module</span>
+ <span>Layer: Quantum text generator</span>
+ <span>Prototype: Glyph morphing animation</span>
+ <span>Constraint: 4K resolution</span>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-content">
+ <span>Template: Retro-futuristic poster</span>
+ <span>Asset: Glitch effect library</span>
+ <span>Font: Neon Bold 2077</span>
+ <span>Filter: Holographic overlay</span>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/018-swiss-grid.html b/mockups/018-swiss-grid.html
new file mode 100644
index 0000000..37b087f
--- /dev/null
+++ b/mockups/018-swiss-grid.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>swiss-international — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Helvetica+Neue:wght@300;400;700&family=Helvetica:wght@300;400;700&display=swap">
+ <style>
+ body {
+ margin: 0;
+ font-family: Helvetica, sans-serif;
+ background-color: #ffffff;
+ color: #000000;
+ font-size: 16px;
+ line-height: 1.5;
+ }
+
+ .header {
+ background-color: #f5f5f5;
+ padding: 10px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .brand {
+ font-family: 'Helvetica Neue', sans-serif;
+ font-weight: 700;
+ font-size: 1.5em;
+ color: #000000;
+ }
+
+ .project-picker {
+ font-family: 'Helvetica Neue', sans-serif;
+ font-size: 0.9em;
+ color: #666666;
+ }
+
+ .status {
+ font-family: 'Helvetica Neue', sans-serif;
+ font-weight: 400;
+ font-size: 0.9em;
+ color: #666666;
+ }
+
+ .container {
+ display: flex;
+ padding: 20px;
+ height: 800px; /* Adjust as needed */
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #ffffff;
+ padding: 20px;
+ border-right: 1px solid #f5f5f5;
+ }
+
+ .chat-log {
+ height: calc(100% - 50px);
+ overflow-y: auto;
+ padding: 10px;
+ }
+
+ .message {
+ margin-bottom: 10px;
+ padding: 10px;
+ background-color: #f5f5f5;
+ border-radius: 5px;
+ }
+
+ .chat-input {
+ display: flex;
+ padding: 10px;
+ border-top: 1px solid #f5f5f5;
+ input {
+ flex-grow: 1;
+ border: none;
+ padding: 8px;
+ font-family: Helvetica, sans-serif;
+ }
+ button {
+ background-color: #ff0000;
+ color: #ffffff;
+ border: none;
+ padding: 8px 12px;
+ font-family: Helvetica, sans-serif;
+ cursor: pointer;
+ }
+ }
+
+ .right-pane {
+ width: 60%;
+ background-color: #ffffff;
+ padding: 20px;
+ }
+
+ .sub-panel {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 20px;
+ border: 1px solid #f5f5f5;
+ padding: 20px;
+ }
+
+ .sub-panel h2 {
+ font-family: 'Helvetica Neue', sans-serif;
+ font-weight: 400;
+ font-size: 1.2em;
+ margin-top: 0;
+ color: #000000;
+ }
+
+ .sub-panel p {
+ font-family: Helvetica, sans-serif;
+ color: #666666;
+ }
+ </style>
+</head>
+<body>
+
+ <header class="header">
+ <div class="brand">HORMUZ</div>
+ <div class="project-picker">
+ <select>
+ <option value="project1">Project Chimera</option>
+ <option value="project2">Project Leviathan</option>
+ <option value="project3">Project Behemoth</option>
+ </select>
+ </div>
+ <div class="status">Idle</div>
+ </header>
+
+ <div class="container">
+ <div class="left-pane">
+ <h2>Orchestration Log</h2>
+ <div class="chat-log">
+ <div class="message">
+ <span style="font-family: 'Helvetica Neue', sans-serif; font-weight: 700;">Operator 734:</span> Initialized sequence.
+ </div>
+ <div class="message">
+ <span style="font-family: 'Helvetica Neue', sans-serif; font-weight: 700;">System:</span> Topic "Aetherium Extraction" queued.
+ </div>
+ <div class="message">
+ <span style="font-family: 'Helvetica Neue', sans-serif; font-weight: 700;">Operator 734:</span> /run-topic Aetherium Extraction
+ </div>
+ <div class="message">
+ <span style="font-family: 'Helvetica Neue', sans-serif; font-weight: 700;">System:</span> Executing sequence. Current iteration: 17.
+ </div>
+ <div class="message">
+ <span style="font-family: 'Helvetica Neue', sans-serif; font-weight: 700;">Operator 734:</span> /stampede 327-omega. Requires recalibration.
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command..." />
+ <button>Execute</button>
+ </div>
+ </div>
+
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>Preview</h2>
+ <p>Real-time visual representation of simulation parameters. Rendering now. Expect anomalies.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Paper</h2>
+ <p>Current project specifications and diagrammatic schematics. Refer to document 42-alpha for critical tolerances.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Figma</h2>
+ <p>Interface mockups and UI/UX workflows. Revision 7.3 pending approval. Design integrity is paramount.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Canva</h2>
+ <p>Marketing materials and public-facing documentation. Maintain strict adherence to brand guidelines. No deviation.</p>
+ </div>
+ </div>
+ </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/019-mid-century-print.html b/mockups/019-mid-century-print.html
new file mode 100644
index 0000000..bca2925
--- /dev/null
+++ b/mockups/019-mid-century-print.html
@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>mid-century-poster — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Open+Sans&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ body {
+ font-family: 'Open Sans', sans-serif;
+ background: #fcecc9;
+ color: #173d56;
+ display: flex;
+ flex-direction: column;
+ height: 900px;
+ width: 1440px;
+ margin: 0 auto;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 24px 48px;
+ background: #173d56;
+ color: #fff5e1;
+ font-family: 'DM Serif Display', serif;
+ font-size: 2rem;
+ }
+ header select {
+ padding: 8px 16px;
+ font-size: 1rem;
+ background: #fff5e1;
+ color: #173d56;
+ border: 2px solid #d97706;
+ border-radius: 4px;
+ }
+ header .status {
+ padding: 8px 16px;
+ background: #b91c1c;
+ color: #fff5e1;
+ border-radius: 4px;
+ font-size: 0.875rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #fff5e1;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .chat-messages {
+ flex: 1;
+ margin-bottom: 24px;
+ }
+ .message {
+ margin: 12px 0;
+ }
+ .user { color: #d97706; font-weight: bold; }
+ .system { color: #173d56; }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 1rem;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background: #d97706;
+ color: #fff5e1;
+ border: none;
+ font-weight: bold;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background: #fff5e1;
+ border: 2px solid #b91c1c;
+ border-radius: 8px;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'DM Serif Display', serif;
+ font-size: 1.25rem;
+ margin-bottom: 16px;
+ color: #173d56;
+ }
+ .panel-body {
+ font-size: 0.875rem;
+ line-height: 1.5;
+ color: #b91c1c;
+ }
+ .panel-body pre {
+ font-family: monospace;
+ font-size: 0.75rem;
+ color: #173d56;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project Neon Dawn</option>
+ <option>Project Atomic Pulse</option>
+ <option>Project Golden Gate</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message"><span class="user">AGENT:</span> /run-topic: Atomic Age Typography</div>
+ <div class="message"><span class="system">SYSTEM:</span> Initializing retro-futuristic font matrix...</div>
+ <div class="message"><span class="user">AGENT:</span> /stampede: 3</div>
+ <div class="message"><span class="system">SYSTEM:</span> Deploying 3 parallel design threads. Expect a burst of creativity.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command..." />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <p>Behold the future, rendered in 1950s optimism. Neon curves, chrome edges, and a touch of radioactive glow.</p>
+ <pre>
+ ███╗ ███╗ █████╗ ██████╗ ███████╗
+ ████╗ ████║██╔══██╗██╔════╝ ██╔════╝
+ ██╔████╔██║███████║██║ ███╗███████╗
+ ██║╚██╔╝██║██╔══██║██║ ██║╚════██║
+ ██║ ╚═╝ ██║██║ ██║╚██████╔╝███████║
+ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <p>Hand-drawn sketches of atomic-age icons: a stylized lightbulb, a rocket with a smile, and a typewriter spitting out code.</p>
+ <pre>
+ _____ _ _ _____ _ _
+ | _ | | | | | | _ | | | |
+ | |_| | | |_| | | |_| | | |_| |
+ | _ | | _ | | _ | | _ |
+ | |_| | | | | | | |_| | | | | |
+ |_____| |_| |_| |_____| |_| |_|
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <p>Vector-based atomic-age interfaces: glowing buttons, retro-futuristic sliders, and a dashboard with a pulsing core.</p>
+ <pre>
+ _______ _______ _______ _______ _______
+ | | | | | | | | | |
+ | _ | | _ | | _ | | _ | | _ |
+ | | | | | | | | | | | | | | | | | | | |
+ | |_| | | |_| | | |_| | | |_| | | |_| |
+ | | | | | | | | | |
+ | | | | | | | | | |
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <p>Collage-style layouts with neon accents: a checkerboard of 1950s advertisements, a montage of space-age travel posters, and a retro magazine spread.</p>
+ <pre>
+ _______ _______ _______ _______
+ | | | | | | | |
+ | _ | | _ | | _ | | _ |
+ | | | | | | | | | | | | | | | |
+ | |_| | | |_| | | |_| | | |_| |
+ | | | | | | | |
+ | | | | | | | |
+ </pre>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/020-japanese-railway.html b/mockups/020-japanese-railway.html
new file mode 100644
index 0000000..228553a
--- /dev/null
+++ b/mockups/020-japanese-railway.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=1440, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>japanese-railway-poster — Four Horsemen Studio</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Inter:wght@400;600&display=swap">
+<style>
+:root {
+ --bg: #fff8e7;
+ --primary: #8b1538;
+ --support1: #0a4d3c;
+ --support2: #1a1a1a;
+ --support3: #ddd5c2;
+}
+body {
+ margin:0;
+ padding:0;
+ background: var(--bg);
+ color: var(--primary);
+ font-family: 'Inter', sans-serif;
+ display: flex;
+ flex-direction: column;
+ height: 900px;
+ width: 1440px;
+ overflow: hidden;
+}
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 24px 48px;
+ background: var(--support1);
+ color: var(--bg);
+ font-family: 'Noto Serif JP', serif;
+ font-size: 2rem;
+ letter-spacing: 0.1em;
+}
+header .brand {
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ transform: rotate(180deg);
+ margin-right: 48px;
+}
+header .project-picker {
+ padding: 8px 16px;
+ background: var(--bg);
+ color: var(--support1);
+ border: 2px solid var(--support3);
+ border-radius: 4px;
+ font-size: 0.9rem;
+}
+header .status {
+ padding: 6px 12px;
+ border-radius: 20px;
+ background: var(--support2);
+ color: var(--bg);
+ font-size: 0.85rem;
+}
+main {
+ display: flex;
+ flex:1;
+ overflow: hidden;
+}
+.left-pane {
+ width: 40%;
+ background: var(--support3);
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+}
+.chat-log {
+ flex:1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+.message {
+ display: flex;
+ gap: 12px;
+ align-items: flex-start;
+}
+.message.user {
+ flex-direction: row-reverse;
+}
+.message .avatar {
+ width: 32px;
+ height: 32px;
+ background: var(--primary);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--bg);
+ font-weight: bold;
+}
+.message .content {
+ background: var(--bg);
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 0.95rem;
+}
+.message .timestamp {
+ font-size: 0.7rem;
+ color: var(--support2);
+}
+.chat-input {
+ margin-top: 24px;
+ display: flex;
+ gap: 12px;
+}
+.chat-input input {
+ flex:1;
+ padding: 10px 12px;
+ border: 2px solid var(--support3);
+ border-radius: 6px;
+}
+.chat-input button {
+ padding: 10px 20px;
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ border-radius: 6px;
+ font-weight: bold;
+}
+.right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+}
+.panel {
+ background: var(--bg);
+ border: 2px solid var(--support3);
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+}
+.panel-header {
+ padding: 16px;
+ font-family: 'Noto Serif JP', serif;
+ font-size: 1.2rem;
+ border-bottom: 2px solid var(--support3);
+}
+.panel-body {
+ flex:1;
+ padding: 24px;
+ font-size: 0.95rem;
+ line-height: 1.6;
+ color: var(--support1);
+}
+.panel-body code {
+ color: var(--primary);
+}
+</style>
+</head>
+<body>
+<header>
+ <div class="brand">Four<br>Horsemen</div>
+ <div>
+ <div class="project-picker">HORMUZ ▼</div>
+ <div class="status">idle</div>
+ </div>
+</header>
+<main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="avatar">U</div>
+ <div class="content">
+ /run-topic "inkstone meets steel rail"
+ </div>
+ <div class="timestamp">14:32</div>
+ </div>
+ <div class="message">
+ <div class="avatar">S</div>
+ <div class="content">
+ Topic initialized. Carving brushstrokes into the digital woodblock...
+ </div>
+ <div class="timestamp">14:33</div>
+ </div>
+ <div class="message user">
+ <div class="avatar">U</div>
+ <div class="content">
+ /stampede "koi in the underpass"
+ </div>
+ <div class="timestamp">14:35</div>
+ </div>
+ <div class="message">
+ <div class="avatar">S</div>
+ <div class="content">
+ Stampede engaged. Koi patterns now weaving through concrete veins.
+ </div>
+ <div class="timestamp">14:36</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type command or message...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <p>Visualizing the <code>/run-topic</code> command: inkstone textures bleeding into the steel grain of the railway. A single train silhouette, rendered in sumi-e style, emerges from the negative space between tracks.</p>
+ <p>Current layer: <code>woodblock-grain</code> at 45% opacity.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <p>Stationery mockup: <code>wasami paper</code> with faint railway map etchings. Current draft: 32nd revision of the "koi underpass" pattern. Bleed lines visible at 12mm margin.</p>
+ <p>Recommended tools: <code>ink brush</code> and <code>woodblock gouge</code>.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <p>Prototype: <code>steel-rail-ink</code> component library. 12 variants of the <code>/stampede</code> effect currently active. Layer name: <code>koi-003</code> (in progress).</p>
+ <p>Warning: <code>woodblock-bleed</code> plugin requires manual adjustment for 4K exports.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <p>Template: <code>vertical-railway-poster</code> (A3 size). Current assets: <code>koi-003</code> (placed), <code>inkstone-text</code> (layer 3). Background: <code>wasami paper</code> texture.</p>
+ <p>Tip: Use <code>vertical text</code> alignment for JR East-style typography.</p>
+ </div>
+ </div>
+ </div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/021-fortran-tty.html b/mockups/021-fortran-tty.html
new file mode 100644
index 0000000..a0addd2
--- /dev/null
+++ b/mockups/021-fortran-tty.html
@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=1440, height=900">
+ <title>fortran-mainframe-printout — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Courier+Prime:wght@400;700&display=swap">
+ <style>
+ body {
+ background-color: #f6f1d8;
+ color: #1a1a1a;
+ font-family: 'Courier Prime', monospace;
+ font-size: 14px;
+ line-height: 1.4;
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+ }
+
+ .header {
+ background-color: #3a3a3a;
+ color: #cccccc;
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .brand {
+ font-family: 'IBM Plex Mono', monospace;
+ font-weight: 700;
+ font-size: 1.5em;
+ }
+
+ .project-picker {
+ padding: 5px 10px;
+ background-color: #7a7a7a;
+ color: #f6f1d8;
+ border: none;
+ cursor: pointer;
+ }
+
+ .status {
+ font-family: 'IBM Plex Mono', monospace;
+ padding: 5px 10px;
+ background-color: #7a7a7a;
+ color: #f6f1d8;
+ border: none;
+ }
+
+ .main-content {
+ display: flex;
+ padding: 20px;
+ height: calc(100vh - 60px); /* Adjust for header height */
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #3a3a3a;
+ color: #cccccc;
+ padding: 10px;
+ height: 100%;
+ }
+
+ .chat-log {
+ height: calc(100% - 40px); /* Adjust for input bar height */
+ overflow-y: auto;
+ padding-bottom: 10px;
+ }
+
+ .chat-message {
+ margin-bottom: 5px;
+ padding: 5px;
+ border-bottom: 1px solid #7a7a7a;
+ }
+
+ .chat-input {
+ background-color: #7a7a7a;
+ color: #f6f1d8;
+ border: none;
+ padding: 5px;
+ width: 100%;
+ }
+
+ .right-pane {
+ width: 60%;
+ padding: 10px;
+ }
+
+ .sub-panel {
+ background-color: #3a3a3a;
+ color: #cccccc;
+ padding: 10px;
+ margin-bottom: 10px;
+ border: 1px solid #7a7a7a;
+ height: 160px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+
+ .sub-panel h3 {
+ font-family: 'IBM Plex Mono', monospace;
+ margin-top: 0;
+ margin-bottom: 10px;
+ color: #f6f1d8;
+ }
+ </style>
+</head>
+<body>
+ <div class="header">
+ <div class="brand">HORDE ENGINE / 777</div>
+ <select class="project-picker">
+ <option value="project1">PROJECT: AURORA</option>
+ <option value="project2">PROJECT: NIGHTFALL</option>
+ <option value="project3">PROJECT: SUNRISE</option>
+ </select>
+ <button class="status">STATUS: IDLE</button>
+ </div>
+
+ <div class="main-content">
+ <div class="left-pane">
+ <h2>CHAT LOG</h2>
+ <div class="chat-log">
+ <div class="chat-message">
+ <span style="color: #7a7a7a;">SYSTEM:</span> JOB#0001 INITIALIZED.
+ </div>
+ <div class="chat-message">
+ <span style="color: #7a7a7a;">USER:</span> /run-topic "Ancient Rituals"
+ </div>
+ <div class="chat-message">
+ <span style="color: #7a7a7a;">SYSTEM:</span> Topic "Ancient Rituals" initiated. Processing...
+ </div>
+ <div class="chat-message">
+ <span style="color: #7a7a7a;">USER:</span> /stampede "Infernal Hounds"
+ </div>
+ <div class="chat-message">
+ <span style="color: #7a7a7a;">SYSTEM:</span> Stampede "Infernal Hounds" deployed. Convergence in T-minus 3 cycles.
+ </div>
+ </div>
+ <input type="text" class="chat-input" placeholder="ENTER COMMAND (e.g., /query-status)">
+ </div>
+
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h3>PREVIEW</h3>
+ <p>Initializing render sequence... Please verify data integrity. Error code 0x42 present. Recalibrating.</p>
+ </div>
+ <div class="sub-panel">
+ <h3>PAPER</h3>
+ <p>Generating print matrix... Ink viscosity nominal. Resolution: 600 DPI. Expect bleed.</p>
+ </div>
+ <div class="sub-panel">
+ <h3>FIGMA</h3>
+ <p>Synchronizing asset library... Check for version conflicts. Last sync: 1978-11-03.</p>
+ </div>
+ <div class="sub-panel">
+ <h3>CANVA</h3>
+ <p>Executing template protocol... Ensure all glyphs are correctly encoded. Warning: deprecated font detected.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/022-phosphor-terminal.html b/mockups/022-phosphor-terminal.html
new file mode 100644
index 0000000..8a7a1f0
--- /dev/null
+++ b/mockups/022-phosphor-terminal.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>phosphor-terminal — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;700&display=swap">
+ <style>
+ body {
+ background-color: #0a0a0a;
+ color: #33ff33;
+ font-family: 'VT323', monospace;
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+ height: 900px;
+ }
+
+ .header {
+ background-color: #000000;
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .brand {
+ font-size: 1.5em;
+ color: #00aa00;
+ }
+
+ .project-picker {
+ display: inline-block;
+ background-color: #000000;
+ color: #33ff33;
+ padding: 5px 10px;
+ border-radius: 3px;
+ }
+
+ .status {
+ font-size: 0.8em;
+ }
+
+ .main-content {
+ display: flex;
+ height: 100%;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #000000;
+ padding: 20px;
+ height: 100%;
+ overflow-y: auto;
+ }
+
+ .chat-log {
+ margin-bottom: 20px;
+ }
+
+ .chat-input {
+ background-color: #000000;
+ color: #33ff33;
+ padding: 10px;
+ border: none;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .right-pane {
+ width: 60%;
+ background-color: #000000;
+ padding: 20px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ height: 100%;
+ }
+
+ .panel {
+ background-color: #005f00;
+ padding: 20px;
+ border-radius: 5px;
+ color: #33ff33;
+ }
+
+ .panel h3 {
+ font-size: 1.2em;
+ margin-top: 0;
+ margin-bottom: 10px;
+ }
+
+ .panel p {
+ font-family: 'JetBrains Mono', monospace;
+ line-height: 1.4;
+ }
+ </style>
+</head>
+<body>
+ <div class="header">
+ <div class="brand">HORMUZ</div>
+ <div class="project-picker">
+ <select>
+ <option>Project Chimera</option>
+ <option>Operation Nightingale</option>
+ <option>Genesis Protocol</option>
+ </select>
+ </div>
+ <div class="status">idle</div>
+ </div>
+
+ <div class="main-content">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message">C:\> /run-topic "Deep Dive: Structural Integrity of the Xylo-Resonance Field"</div>
+ <div class="chat-message">Daemon: Topic initiated. Monitoring parameters.</div>
+ <div class="chat-message">C:\> /stampede "Optimize resource allocation for Phase 3 deployment."</div>
+ <div class="chat-message">Daemon: Stampede protocol engaged. Prioritizing core functions.</div>
+ <div class="chat-message">C:\> Query: Current entropy levels in Sector Gamma-7?</div>
+ <div class="chat-message">Daemon: Entropy levels at 0.78. Within acceptable thresholds.</div>
+ </div>
+ <input type="text" class="chat-input" placeholder="C:\>">
+ </div>
+
+ <div class="right-pane">
+ <div class="panel">
+ <h3>Preview</h3>
+ <p>Initiating spectral analysis... Awaiting rendering directives from the Core. Expect visual artifacts. Recalibrating display parameters.</p>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <p>Accessing archival documentation. Querying for "Project Nightingale - Contingency Protocols." Correlating data with known anomalies. Outputting to temporal log.</p>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <p>Synchronizing design matrix. Detecting inconsistencies in layer hierarchy. Reconciling with established nomenclature. Commencing automated correction sequence.</p>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <p>Analyzing template coherence. Identifying potential aesthetic deviations. Flagging for review by Lead Art Director. Generating anomaly report.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/023-amber-cathode.html b/mockups/023-amber-cathode.html
new file mode 100644
index 0000000..ef63ff6
--- /dev/null
+++ b/mockups/023-amber-cathode.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>amber-cathode-monitor — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Space+Mono:wght@400;700&display=swap">
+ <style>
+ html, body {margin:0;padding:0;overflow-x:hidden;background:#1a0e00;color:#ffb000;font-family:'Space Mono', monospace;height:100%}
+ * {box-sizing:border-box}
+ body {display:flex;flex-direction:column;font-size:14px;line-height:1.4}
+ header {display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:#000000;border-bottom:2px solid #664000}
+ header h1 {font-family:'VT323';font-size:24px;margin:0}
+ .project-picker {position:relative}
+ .project-picker select {background:#000000;border:1px solid #cc8400;padding:4px 8px;color:#ffb000;font-family:'Space Mono'}
+ .status-indicator {padding:4px 12px;border:2px solid #ffb000;border-radius:4px;background:#000000;color:#ffb000;font-size:12px}
+ .container {display:flex;flex:1;overflow:hidden}
+ .chat-pane {width:40%;border-right:2px solid #664000;display:flex;flex-direction:column}
+ .chat-log {flex:1;overflow-y:auto;padding:16px;background:#000000}
+ .chat-log pre {margin:0;padding:0;white-space:pre-wrap;color:#cc8400;font-family:'Space Mono'}
+ .chat-input {padding:8px;border-top:2px solid #664000}
+ .chat-input input {width:100%;background:#000000;border:1px solid #cc8400;color:#ffb000;padding:4px}
+ .panels {width:60%;display:flex;flex-wrap:wrap}
+ .panel {flex:1 1 48%;margin:8px;padding:16px;background:#000000;border:1px solid #664000}
+ .panel h2 {font-family:'VT323';margin:0 0 8px 0}
+ .panel-content {color:#cc8400}
+ .panel-content pre {margin:0}
+ .ascii-art {color:#ffb000}
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <div class="project-picker">
+ <select>
+ <option>Project HADES</option>
+ <option>Project STORM</option>
+ <option>Project ECHO</option>
+ </select>
+ </div>
+ <div class="status-indicator">IDLE</div>
+ </div>
+ </header>
+ <div class="container">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <pre>┌───────────────┐
+│ AGENT LOG │
+└───────────────┘
+[09:47:23] USER: /run-topic "ancient data protocols"
+[09:47:24] SYSTEM: INITIATING TOPIC: ANCIENT DATA PROTOCOLS
+[09:47:25] SYSTEM: LOADING ASCII ART FROM 1983 IBM MAINFRAME CORE DUMP
+[09:47:26] USER: /stampede "retrofitted neural net"
+[09:47:27] SYSTEM: STAMPEDE MODE ENGAGED. NEURAL NET RECONFIGURING TO 1985 NEC PC-8801 SPECIFICATIONS
+[09:47:28] SYSTEM: WARNING: 13% OF CONTEMPORARY CODEBASE INCOMPATIBLE WITH 1980S HARDWARE</pre>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="> ">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>PREVIEW</h2>
+ <div class="panel-content">
+ <pre class="ascii-art">
+ _____ _ _ _ _ _ _ _ _ _ _ _
+/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
+| || 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
+| ||___|___|___|___|___|___|___|___|___|___|___|
+\_____/\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/
+</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>PAPER</h2>
+ <div class="panel-content">
+ <pre class="ascii-art">
+┌───────────────┐
+│ DRAFT OUTPUT │
+└───────────────┘
+[09:47:28] WARNING: 13% OF CONTEMPORARY CODEBASE INCOMPATIBLE WITH 1980S HARDWARE
+[09:47:29] RECOMMENDED ACTION: DEPLOY TO VIRTUAL 1985 NEC PC-8801 EMULATOR
+[09:47:30] STAMPEDE MODE: 88% SYNCHRONIZED WITH 1985 HARDWARE PROTOCOLS</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>FIGMA</h2>
+ <div class="panel-content">
+ <pre class="ascii-art">
+ _____ _ _ _ _ _ _ _ _ _ _ _
+/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
+| || 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
+| ||___|___|___|___|___|___|___|___|___|___|___|
+\_____/\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/
+</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>CANVA</h2>
+ <div class="panel-content">
+ <pre class="ascii-art">
+ _______ _ _ _ _ _ _ _ _ _ _
+ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
+| 1985 || 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
+|_______||___|___|___|___|___|___|___|___|___|___|
+ \______/\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/
+</pre>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/024-datacenter-rack.html b/mockups/024-datacenter-rack.html
new file mode 100644
index 0000000..4d4852b
--- /dev/null
+++ b/mockups/024-datacenter-rack.html
@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1440, initial-scale=1.0">
+<title>datacenter-rack-LED — Four Horsemen Studio</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700&family=Roboto+Mono:wght@400&display=swap">
+<style>
+:root {
+ --bg: #0a0a0a;
+ --primary: #1de9b6;
+ --accent1: #ffd54f;
+ --accent2: #ef5350;
+ --text: #ffffff;
+ --shadow: 0 0 12px rgba(30, 255, 182, 0.3);
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto Mono', monospace;
+ color: var(--text);
+}
+
+body {
+ background: var(--bg);
+ height: 900px;
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ overflow: hidden;
+}
+
+header {
+ height: 60px;
+ background: linear-gradient(90deg, var(--accent1), var(--primary), var(--accent2));
+ display: flex;
+ align-items: center;
+ padding: 0 24px;
+ position: relative;
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
+}
+
+header h1 {
+ font-family: 'Inter Tight', sans-serif;
+ font-size: 24px;
+ margin-right: 24px;
+ color: #0a0a0a;
+}
+
+header select {
+ padding: 8px 12px;
+ border: 1px solid rgba(255,255,255,0.1);
+ background: #1a1a1a;
+ color: var(--text);
+ border-radius: 4px;
+}
+
+.status-indicator {
+ position: absolute;
+ right: 24px;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 6px 12px;
+ background: #1a1a1a;
+ border: 2px solid var(--primary);
+ border-radius: 20px;
+ font-size: 12px;
+ text-transform: uppercase;
+}
+
+main {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+}
+
+.left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ background: #1a1a1a;
+ border-right: 1px solid rgba(255,255,255,0.05);
+}
+
+.chat-log {
+ flex: 1;
+ overflow-y: auto;
+ margin-bottom: 16px;
+}
+
+.message {
+ margin: 8px 0;
+ padding: 10px 14px;
+ border-radius: 6px;
+ background: #1a1a1a;
+ box-shadow: var(--shadow);
+}
+
+.message.user {
+ background: #1a1a1a;
+ color: var(--primary);
+}
+
+.message.system {
+ background: #1a1a1a;
+ color: var(--accent2);
+}
+
+.chat-input {
+ display: flex;
+ gap: 8px;
+}
+
+.chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 1px solid rgba(255,255,255,0.1);
+ background: #1a1a1a;
+ color: var(--text);
+ border-radius: 4px;
+}
+
+.right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 16px;
+ padding: 24px;
+}
+
+.panel {
+ background: #1a1a1a;
+ border: 1px solid rgba(255,255,255,0.05);
+ border-radius: 6px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.panel-header {
+ padding: 12px 16px;
+ background: #1a1a1a;
+ border-bottom: 1px solid rgba(255,255,255,0.05);
+ font-family: 'Inter Tight', sans-serif;
+ font-size: 16px;
+ color: var(--primary);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.panel-body {
+ flex: 1;
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #0a0a0a;
+ font-family: monospace;
+ color: #666;
+ text-shadow: 0 0 4px rgba(255,255,255,0.1);
+}
+
+.panel-body code {
+ color: var(--primary);
+}
+
+.panel-body pre {
+ font-size: 12px;
+ line-height: 1.4;
+ color: #ccc;
+}
+
+.panel-body figma {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 8px;
+}
+
+.panel-body figma div {
+ background: #222;
+ padding: 8px;
+ border-radius: 4px;
+ text-align: center;
+}
+</style>
+</head>
+<body>
+<header>
+ <h1>FOUR HORSEMEN</h1>
+ <select>
+ <option>Project Neon Pulse</option>
+ <option>Project Quantum Flux</option>
+ <option>Project Synapse</option>
+ </select>
+ <div class="status-indicator">idle</div>
+</header>
+<main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: Neon Circuitry</div>
+ <div class="message system">TOPIC ENGAGED: 3D GLITCH RENDERING</div>
+ <div class="message user">/stampede: 4k</div>
+ <div class="message system">STAMPEDE: 4K RENDERS ACTIVATED. EXPECT 12.7TB OUTPUT.</div>
+ <div class="message user">/status</div>
+ <div class="message system">SYSTEM: IDLE. 3 NODES ONLINE. 72% COOLING EFFICIENCY.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="> /command">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">preview</div>
+ <div class="panel-body">
+ <pre>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
\ No newline at end of file
diff --git a/mockups/025-polaroid-board.html b/mockups/025-polaroid-board.html
new file mode 100644
index 0000000..a7f8b0f
--- /dev/null
+++ b/mockups/025-polaroid-board.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>polaroid-cork-board — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #f5e9d3;
+ --primary: #1a1a1a;
+ --accent1: #c45a5a;
+ --accent2: #3d6b54;
+ --white: #ffffff;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Inter', sans-serif;
+ background: var(--bg);
+ color: var(--primary);
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 2rem;
+ background: var(--primary);
+ color: var(--white);
+ font-family: 'Caveat', cursive;
+ font-size: 1.8rem;
+ position: relative;
+ z-index: 2;
+ }
+ header select {
+ padding: 0.5rem 1rem;
+ background: var(--white);
+ color: var(--primary);
+ border: 2px solid var(--accent2);
+ border-radius: 5px;
+ font-family: 'Inter', sans-serif;
+ font-size: 0.9rem;
+ }
+ header .status {
+ padding: 0.5rem 1rem;
+ background: var(--accent2);
+ color: var(--white);
+ border-radius: 5px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ background: var(--accent2);
+ color: var(--white);
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 1rem;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .chat-message {
+ background: var(--white);
+ color: var(--primary);
+ padding: 0.75rem 1rem;
+ border: 2px solid var(--accent1);
+ border-radius: 8px;
+ box-shadow: 2px 2px 0 var(--accent1);
+ font-family: 'Inter', sans-serif;
+ font-size: 0.9rem;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ background: var(--accent1);
+ color: var(--white);
+ border-color: var(--accent2);
+ box-shadow: -2px 2px 0 var(--accent2);
+ }
+ .chat-input {
+ display: flex;
+ padding: 0.75rem 1rem;
+ background: var(--primary);
+ border-top: 2px solid var(--accent2);
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.5rem;
+ border: none;
+ background: transparent;
+ color: var(--white);
+ font-family: 'Inter', sans-serif;
+ }
+ .chat-input button {
+ padding: 0.5rem 1rem;
+ background: var(--accent2);
+ color: var(--white);
+ border: none;
+ border-radius: 5px;
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ margin-left: 0.5rem;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 1rem;
+ padding: 1rem;
+ overflow-y: auto;
+ }
+ .panel {
+ background: var(--white);
+ color: var(--primary);
+ border: 2px solid var(--accent1);
+ border-radius: 8px;
+ box-shadow: 2px 2px 0 var(--accent1);
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ font-family: 'Inter', sans-serif;
+ }
+ .panel-header {
+ font-family: 'Caveat', cursive;
+ font-size: 1.2rem;
+ margin-bottom: 0.75rem;
+ border-bottom: 2px solid var(--accent2);
+ padding-bottom: 0.5rem;
+ }
+ .panel-body {
+ font-size: 0.9rem;
+ line-height: 1.4;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .panel-body pre {
+ font-family: 'Courier New', monospace;
+ font-size: 0.85rem;
+ background: #eee;
+ padding: 0.5rem;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow-x: auto;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN</div>
+ <div>
+ <select>
+ <option>Project Neon</option>
+ <option>Hormuz Reboot</option>
+ <option>Stampede Beta</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic: "surrealist botanicals"</div>
+ <div class="chat-message">generating 3D flora mockups... please wait</div>
+ <div class="chat-message user">/stampede: "ink + paper textures"</div>
+ <div class="chat-message">layering 128dpi scans with vector linework</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type /help for commands">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <div>Mockup of a 3D-printed plant sculpture with<br>hand-painted ceramic leaves and<br>UV-reactive moss</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <pre>
+■■■■■■■■■■■■■■■■■■■■
+■■■■■■■■■■■■■■■■■■■■
+■■■■■■■■■■■■■■■■■■■■
+■■■■■■■■■■■■■■■■■■■■
+ </pre>
+ <div>Hand-inked sketches of 19th-century<br>botanical illustrations with<br>watercolor overlays</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <div>Prototype UI for a virtual gallery<br>with polaroid-style image frames<br>and corkboard navigation</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <div>Mockup of a 1200x800 poster with<br>typography in Caveat and<br>texture overlays from scanned vellum</div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/026-cassette-mixtape.html b/mockups/026-cassette-mixtape.html
new file mode 100644
index 0000000..aa5a91d
--- /dev/null
+++ b/mockups/026-cassette-mixtape.html
@@ -0,0 +1,249 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>cassette-mixtape — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Open+Sans&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Open Sans', sans-serif;
+ background-color: #1a0d2e;
+ color: #ffe066;
+ height: 900px;
+ width: 1440px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ header {
+ height: 80px;
+ background: linear-gradient(90deg, #ff61a6, #5fb7ff);
+ display: flex;
+ align-items: center;
+ padding: 0 40px;
+ position: relative;
+ font-family: 'Bungee Inline', cursive;
+ color: #0d0617;
+ text-shadow: 1px 1px 2px #0d0617;
+ }
+ header h1 {
+ font-size: 2.5em;
+ margin: 0;
+ }
+ .project-picker, .status {
+ position: absolute;
+ right: 40px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .project-picker select {
+ background: #ff61a6;
+ color: #0d0617;
+ padding: 8px 12px;
+ border: none;
+ font-size: 1em;
+ border-radius: 4px;
+ }
+ .status {
+ background: #ffe066;
+ padding: 4px 8px;
+ font-size: 0.8em;
+ border-radius: 20px;
+ margin-left: 16px;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #1a0d2e;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ margin-bottom: 10px;
+ padding-right: 10px;
+ border-right: 1px solid #5fb7ff;
+ }
+ .chat-message {
+ margin-bottom: 15px;
+ padding: 10px;
+ background: #0d0617;
+ border-radius: 6px;
+ box-shadow: inset 0 0 5px #ff61a6;
+ }
+ .chat-message.user {
+ background: #ffe066;
+ color: #0d0617;
+ text-align: right;
+ }
+ .chat-input {
+ display: flex;
+ border-top: 1px solid #5fb7ff;
+ padding: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 1em;
+ border: none;
+ background: #0d0617;
+ color: #ffe066;
+ }
+ .chat-input button {
+ background: #ff61a6;
+ color: #0d0617;
+ border: none;
+ padding: 8px 16px;
+ font-size: 1em;
+ margin-left: 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ padding: 20px;
+ }
+ .panel {
+ background: #0d0617;
+ border: 2px solid #ff61a6;
+ border-radius: 8px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Bungee Inline', cursive;
+ color: #ff61a6;
+ padding: 15px;
+ text-align: center;
+ background: linear-gradient(135deg, #1a0d2e, #0d0617);
+ box-shadow: inset 0 0 10px #ff61a6;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 20px;
+ color: #ffe066;
+ font-size: 0.9em;
+ line-height: 1.6;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+ .panel-body::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(circle at 30% 30%, #5fb7ff 20%, transparent 50%), radial-gradient(circle at 70% 70%, #ffe066 20%, transparent 50%);
+ opacity: 0.1;
+ pointer-events: none;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Four Horsemen</h1>
+ <div class="project-picker">
+ <select>
+ <option>Neon Reverie</option>
+ <option>Cybernetic Dreams</option>
+ <option>Pixelated Echoes</option>
+ </select>
+ </div>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <span>/run-topic "Neon Reverie"</span>
+ </div>
+ <div class="chat-message">
+ <span>Side B: Topic loaded. Synthwave textures detected. Initiating tape-speed warp.</span>
+ </div>
+ <div class="chat-message user">
+ <span>/stampede 3</span>
+ </div>
+ <div class="chat-message">
+ <span>Master: Tripling the beat. Vinyl crackle intensifies. Warning: Side A may go rogue.</span>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /help for commands">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <div style="display: flex; flex-direction: column; align-items: center;">
+ <svg width="100" height="60" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h100v60H0z" fill="#ff61a6" />
+ <rect x="20" y="20" width="60" height="20" fill="#0d0617" />
+ <text x="50" y="40" font-family="monospace" fill="#ffe066" text-anchor="middle" font-size="14">SIDE A</text>
+ </svg>
+ <p>Currently spinning: <strong>Neon Reverie</strong> · 4:22 · Tape speed: 1.5x</p>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <pre style="font-family: monospace; font-size: 0.8em; line-height: 1.2;">
+ [00:00] Side A: Needle drop
+ [01:15] Synthwave loop detected
+ [02:30] Dub-master override: 3x speed
+ [03:45] Vinyl crackle: 75% intensity
+ [04:22] Fade to silence
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div style="width: 80%; height: 80%; background: #0d0617; border: 2px dashed #ff61a6; display: flex; align-items: center; justify-content: center;">
+ <svg width="100" height="60" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h100v60H0z" fill="#5fb7ff" />
+ <text x="50" y="35" font-family="monospace" fill="#0d0617" text-anchor="middle" font-size="16">FIGMA</text>
+ </svg>
+ </div>
+ </div>
+ <p>Design assets locked in <strong>Side B</strong> · 3D render mode: off</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <div style="display: flex; flex-direction: column; align-items: center;">
+ <div style="width: 80%; height: 60px; background: #ffe066; border: 2px solid #ff61a6; display: flex; align-items: center; justify-content: center;">
+ <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="20" cy="20" r="18" fill="#0d0617" />
+ <path d="M10 20h20v10H10z" fill="#ff61a6" />
+ </svg>
+ </div>
+ <p>Canva template: <strong>Cyberpunk Poster</strong> · 1200x800px</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/027-vinyl-liner-notes.html b/mockups/027-vinyl-liner-notes.html
new file mode 100644
index 0000000..64e31ad
--- /dev/null
+++ b/mockups/027-vinyl-liner-notes.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+<head>
+<meta name="viewport" content="width=1440">
+<title>vinyl-liner-notes — Four Horsemen Studio</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spectral:wght@700&family=Source+Sans+Pro:wght@400&display=swap">
+<style>
+body {
+ margin:0;
+ font-family: 'Source Sans Pro', sans-serif;
+ background-color: #0d0d0d;
+ color: #fff8e7;
+ display: flex;
+ flex-direction: column;
+ height: 900px;
+}
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background: #1a1a1a;
+ color: #c4a747;
+ font-family: 'Spectral', serif;
+ font-size: 24px;
+}
+header select {
+ padding: 6px 12px;
+ background: #0d0d0d;
+ color: #fff8e7;
+ border: 1px solid #a83232;
+ border-radius: 4px;
+}
+.status-indicator {
+ padding: 6px 12px;
+ background: #a83232;
+ color: #fff8e7;
+ border-radius: 4px;
+ font-size: 14px;
+}
+main {
+ display: flex;
+ flex:1;
+ overflow: hidden;
+}
+.left-pane {
+ width: 40%;
+ background: #1a1a1a;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+.chat-log {
+ flex:1;
+ overflow-y: auto;
+ margin-bottom: 10px;
+}
+.chat-message {
+ margin: 10px 0;
+}
+.chat-message.user {
+ color: #c4a747;
+}
+.chat-message.agent {
+ color: #fff8e7;
+}
+.chat-input {
+ display: flex;
+ border-top: 1px solid #a83232;
+ padding: 10px 0;
+}
+.chat-input input {
+ flex:1;
+ padding: 8px;
+ background: #0d0d0d;
+ color: #fff8e7;
+ border: none;
+ outline: none;
+}
+.right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ padding: 20px;
+}
+.panel {
+ background: #0d0d0d;
+ border: 1px solid #a83232;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+.panel h3 {
+ color: #c4a747;
+ margin-bottom: 15px;
+ font-family: 'Spectral', serif;
+}
+.panel-content {
+ font-size: 14px;
+ color: #fff8e7;
+}
+.preview {
+ background: #1a1a1a;
+}
+.preview .panel-content::before {
+ content: "•••••••••••••••••••••••••••••••
\ No newline at end of file
diff --git a/mockups/028-telegram-receipt.html b/mockups/028-telegram-receipt.html
new file mode 100644
index 0000000..1941669
--- /dev/null
+++ b/mockups/028-telegram-receipt.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>telegram-receipt — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'IBM Plex Mono', monospace; background: #fdf6e3; color: #1a1a1a; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a1a1a; color: #eee8d5; font-size: 24px; font-family: 'Special Elite', cursive; }
+ header select { background: #586e75; color: #eee8d5; padding: 4px 8px; border: none; font-size: 14px; }
+ header .status { padding: 4px 12px; background: #268bd2; color: #1a1a1a; font-size: 14px; border-radius: 4px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #586e75; padding: 24px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 12px; }
+ .message { background: #eee8d5; padding: 12px; border: 1px solid #586e75; border-radius: 4px; }
+ .message.user { background: #586e75; color: #eee8d5; }
+ .chat-input { margin-top: 24px; display: flex; }
+ .chat-input input { flex: 1; padding: 8px; font-size: 14px; }
+ .chat-input button { padding: 8px 16px; background: #268bd2; color: #1a1a1a; border: none; font-size: 14px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
+ .sub-panel { background: #1a1a1a; color: #eee8d5; padding: 24px; border: 1px solid #586e75; }
+ .sub-panel h3 { margin: 0 0 16px; font-family: 'Special Elite', cursive; font-size: 18px; }
+ .sub-panel p { font-size: 14px; }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <div>
+ <select>
+ <option value="project1">HORMUZ-001</option>
+ <option value="project2">ASHES-007</option>
+ <option value="project3">STAMPED-042</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: BURN THE BLUEPRINTS</div>
+ <div class="message">⚠️ topic 'BURN THE BLUEPRINTS' activated. all simulations rerouted to pyre. confirm? (y/n)</div>
+ <div class="message user">y</div>
+ <div class="message">🔥 pyre engaged. 3000 simulations consumed. status: 🔥🔥🔥</div>
+ <div class="message user">/stampede: REPLICATE 5X</div>
+ <div class="message">⚠️ stampede protocol engaged. 5x replication initiated. estimated completion: 3.2s</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type /command or message">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h3>PREVIEW</h3>
+ <p>BURN THE BLUEPRINTS — 3000 simulations consumed. pyre status: 🔥🔥🔥</p>
+ <p>next phase: ASHES-007. expected duration: 2.1s</p>
+ </div>
+ <div class="sub-panel">
+ <h3>PAPER</h3>
+ <p>PAPER IS FLAMMABLE. 5x replication in progress. 76% complete</p>
+ <p>WARNING: do not fold. do not staple. do not whisper secrets to the margins</p>
+ </div>
+ <div class="sub-panel">
+ <h3>FIGMA</h3>
+ <p>FILE: HORMUZ-001.fig. last modified: 3s ago</p>
+ <p>layers: 127. components: 42. warnings: 3 (see console)</p>
+ </div>
+ <div class="sub-panel">
+ <h3>CANVA</h3>
+ <p>TEMPLATE: STAMPED-042. assets loaded: 100%</p>
+ <p>font: SPECIAL ELITE. color: #268bd2. alignment: center</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/029-ledger-tape.html b/mockups/029-ledger-tape.html
new file mode 100644
index 0000000..37105f0
--- /dev/null
+++ b/mockups/029-ledger-tape.html
@@ -0,0 +1,177 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>adding-machine-tape — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=IBM+Plex+Mono&display=swap">
+ <style>
+ body {
+ background-color: #fdfaf0;
+ color: #1a1a1a;
+ font-family: 'IBM Plex Mono', monospace;
+ margin: 0;
+ padding: 0;
+ line-height: 1.4;
+ }
+
+ .container {
+ width: 1440px;
+ margin: 0 auto;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+
+ header {
+ background-color: #3a3a3a;
+ color: #fdfaf0;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ }
+
+ header h1 {
+ margin: 0;
+ font-family: 'Cutive Mono', monospace;
+ font-size: 24px;
+ }
+
+ .project-selector {
+ font-size: 14px;
+ color: #cccccc;
+ background-color: transparent;
+ border: none;
+ padding: 5px 10px;
+ cursor: pointer;
+ }
+
+ .status-indicator {
+ font-size: 12px;
+ color: #888888;
+ }
+
+ .main-content {
+ display: flex;
+ height: calc(100vh - 60px); /* Adjust as needed */
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #3a3a3a;
+ color: #cccccc;
+ padding: 10px;
+ box-sizing: border-box;
+ margin-right: 20px;
+ }
+
+ .chat-log {
+ height: calc(100% - 40px); /* Adjust as needed */
+ overflow-y: auto;
+ padding: 5px;
+ }
+
+ .chat-message {
+ margin-bottom: 10px;
+ padding: 5px;
+ border-bottom: 1px solid #cccccc;
+ }
+
+ .chat-input {
+ background-color: #3a3a3a;
+ color: #fdfaf0;
+ border: none;
+ padding: 8px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-top: 10px;
+ }
+
+ .right-pane {
+ width: 60%;
+ background-color: #fdfaf0;
+ padding: 10px;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ }
+
+ .sub-panel {
+ background-color: #3a3a3a;
+ color: #cccccc;
+ padding: 15px;
+ box-sizing: border-box;
+ border-radius: 5px;
+ }
+
+ .sub-panel h2 {
+ margin-top: 0;
+ font-family: 'Cutive Mono', monospace;
+ font-size: 18px;
+ color: #888888;
+ }
+
+ .sub-panel p {
+ font-size: 14px;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <h1>FOUR HORSEMEN / HORMUZ</h1>
+ <select class="project-selector">
+ <option>Project Nightingale</option>
+ <option>Operation Chronos</option>
+ <option>The Obsidian Archive</option>
+ </select>
+ <span class="status-indicator">idle</span>
+ </header>
+
+ <div class="main-content">
+ <div class="left-pane">
+ <h2>Processing Log</h2>
+ <div class="chat-log">
+ <div class="chat-message">
+ <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:17:42</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">System:</span> Initializing...
+ </div>
+ <div class="chat-message">
+ <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:17:45</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">User:</span> /run-topic "Ethereal Bloom" - batch 7
+ </div>
+ <div class="chat-message">
+ <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:17:47</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">System:</span> Topic "Ethereal Bloom" - batch 7 running. Estimated completion: 01:12:37
+ </div>
+ <div class="chat-message">
+ <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:23:19</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">User:</span> /stampede "Chromatic Cascade" - priority 3
+ </div>
+ <div class="chat-message">
+ <span style="font-family: 'IBM Plex Mono', monospace; color: #888888;">08:23:21</span> <span style="font-family: 'IBM Plex Mono', monospace; color: #1a1a1a;">System:</span> Stampede "Chromatic Cascade" initiated. Sub-processes allocated.
+ </div>
+ </div>
+ <input type="text" class="chat-input" placeholder="Enter command...">
+ </div>
+
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>Preview</h2>
+ <p>Rendering now. Please stand by. Awaiting finalization of frame 732. Total frames: 1248. Sub-total rendering time: 14 minutes, 27 seconds.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Paper</h2>
+ <p>Preparing document for archival. Checking for bleed errors. Printing resolution: 300 DPI. Estimated paper usage: 47 sheets. Final check before binding.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Figma</h2>
+ <p>Synchronizing asset library. Checking for version conflicts. Please ensure all collaborators have approved changes. Next audit scheduled for 09:00.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Canva</h2>
+ <p>Optimizing for social media distribution. Analyzing engagement metrics. Next scheduled post: 16:00. Paid campaign performance below expectation – adjusting parameters.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/030-darkroom-redlight.html b/mockups/030-darkroom-redlight.html
new file mode 100644
index 0000000..940ec54
--- /dev/null
+++ b/mockups/030-darkroom-redlight.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>darkroom-red-light — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600;800&family=JetBrains+Mono:wght@500&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; height: 100%; font-family: 'JetBrains Mono', monospace; background: #0a0303; color: #ff2a2a; }
+ body { display: flex; flex-direction: column; height: 100vh; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; font-family: 'Inter', sans-serif; font-weight: 800; }
+ header .brand { font-size: 1.5em; }
+ header .dropdown { padding: 8px 16px; background: #1a0808; border-radius: 4px; }
+ header .status { padding: 6px 12px; background: #591212; border-radius: 4px; color: #ffd1d1; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #591212; padding: 24px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 16px; }
+ .message { background: #1a0808; padding: 12px; border-radius: 6px; }
+ .message.user { align-self: flex-end; background: #591212; }
+ .chat-input { margin-top: 24px; display: flex; }
+ .chat-input input { flex: 1; padding: 12px; border: none; background: #1a0808; color: #ff2a2a; border-radius: 4px; }
+ .chat-input button { padding: 12px 24px; background: #ff2a2a; color: #0a0303; border: none; border-radius: 4px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
+ .sub-panel { background: #1a0808; border: 1px solid #591212; border-radius: 6px; padding: 24px; }
+ .sub-panel h3 { margin: 0 0 16px; font-family: 'Inter', sans-serif; font-weight: 600; }
+ .sub-panel p { font-size: 0.9em; }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div class="dropdown">PROJECT: <span>Project Red</span> | <span>Hormuz Initiative</span> | <span>Stampede-7</span></div>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: "emulsion fatigue"</div>
+ <div class="message">Processing... Hydroquinone saturation at 32%. Adjusting safelight exposure.</div>
+ <div class="message user">/stampede: "silver halide bloom"</div>
+ <div class="message">Initiating. Developing in D-76 at 20°C.预计 3 分钟完成.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type /help for commands">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h3>Preview</h3>
+ <p>Negative exposed to red safelight, emulsion swelling. Hydroquinone saturation at 32%. Silver halide bloom detected.</p>
+ </div>
+ <div class="sub-panel">
+ <h3>Paper</h3>
+ <p>Archival-grade fiber base. Contrast ratio: 4.7:1. Bleach failure risk: low. Fixer residue: 0.03%.</p>
+ </div>
+ <div class="sub-panel">
+ <h3>Figma</h3>
+ <p>Layer "emulsion" locked. Blend mode: multiply. Opacity: 78%. Linked to asset: silver-halide-123.</p>
+ </div>
+ <div class="sub-panel">
+ <h3>Canva</h3>
+ <p>Template: 4x5 contact sheet. Grid: 16 columns. Frame 7: underexposed by 1/3 stop. Fixer time: 3 minutes.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/031-japanese-tofu-shop.html b/mockups/031-japanese-tofu-shop.html
new file mode 100644
index 0000000..a8ddd0e
--- /dev/null
+++ b/mockups/031-japanese-tofu-shop.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=1440, height=900">
+ <title>japanese-tofu-shop-sign — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap">
+ <style>
+ body {
+ background-color: #fffaf0;
+ color: #1a1a1a;
+ font-family: 'Noto Sans JP', sans-serif;
+ margin: 0;
+ padding: 0;
+ line-height: 1.6;
+ }
+
+ .container {
+ width: 1440px;
+ margin: 0 auto;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+
+ header {
+ background-color: #3a4a2c;
+ color: #fffaf0;
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ header h1 {
+ font-family: 'Noto Serif JP', serif;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ .project-picker {
+ display: inline-block;
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-size: 0.9em;
+ }
+
+ .status {
+ font-size: 0.8em;
+ }
+
+ .main-content {
+ display: flex;
+ height: calc(100vh - 60px); /* Adjust as needed */
+ margin-top: 20px;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #e8dcc4;
+ padding: 20px;
+ box-sizing: border-box;
+ overflow-y: auto;
+ height: 100%;
+ }
+
+ .chat-log {
+ height: calc(100% - 40px); /* Adjust for chat input */
+ padding-bottom: 10px;
+ border-bottom: 1px solid #3a4a2c;
+ }
+
+ .chat-message {
+ padding: 10px;
+ margin-bottom: 5px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 0.9);
+ }
+
+ .chat-input {
+ background-color: #fffaf0;
+ border: 1px solid #3a4a2c;
+ padding: 10px;
+ border-radius: 5px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-top: 10px;
+ }
+
+ .right-pane {
+ width: 60%;
+ padding: 20px;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ height: 100%;
+ }
+
+ .panel {
+ background-color: #e8dcc4;
+ padding: 20px;
+ border-radius: 5px;
+ box-sizing: border-box;
+ height: 100%;
+ }
+
+ .panel h2 {
+ font-family: 'Noto Serif JP', serif;
+ font-weight: 700;
+ margin-top: 0;
+ margin-bottom: 15px;
+ color: #1a1a1a;
+ }
+
+ .panel p {
+ font-size: 0.9em;
+ color: #3a4a2c;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <h1>四 Horsemen</h1>
+ <div class="project-picker">
+ <select>
+ <option value="project1">Kitsune's Feast</option>
+ <option value="project2">Sakura Bloom</option>
+ <option value="project3">Stone Lantern</option>
+ </select>
+ </div>
+ <span class="status">idle</span>
+ </header>
+
+ <div class="main-content">
+ <div class="left-pane">
+ <h2>Chat Log</h2>
+ <div class="chat-log">
+ <div class="chat-message">
+ <span style="font-weight: bold;">Operator:</span> /run-topic "Gathering of the Elders"
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: bold;">Agent 12:</span> Acknowledged. Beginning topic assembly.
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: bold;">Operator:</span> /stampede "Ancient Ritual" - priority level 3.
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: bold;">Agent 12:</span> Stampede initiated. Monitoring energy flow.
+ </div>
+ <div class="chat-message">
+ <span style="font-weight: bold;">Agent 17:</span> Warning: Harmonic resonance unstable. Recommend recalibration.
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type message here...">
+ </div>
+ </div>
+
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>A small window to glimpse the emerging form. A fleeting image, like moonlight on water. Adjust settings with care.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>The raw sketches. The initial lines. A record of the genesis, before the refinement. A reminder of the humble beginnings.</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>The digital clay. Where forms are molded and refined. A collaborative space for the shaping of the visible.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>For the final presentation. The polished facade. The outward expression of the inner work. A touch of beauty for the world.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/032-wine-cellar-tag.html b/mockups/032-wine-cellar-tag.html
new file mode 100644
index 0000000..06a5430
--- /dev/null
+++ b/mockups/032-wine-cellar-tag.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>wine-cellar-tag — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Inter:wght@400;500&display=swap">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ background-color: #1a0a14;
+ color: #ddc6a8;
+ font-family: 'Inter', sans-serif;
+ font-size: 16px;
+ line-height: 1.6;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ .container {
+ width: 1440px;
+ margin: 0 auto;
+ padding: 20px;
+ display: flex;
+ }
+
+ header {
+ background-color: #0a0408;
+ padding: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ header h1 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 24px;
+ margin: 0;
+ color: #d4af37;
+ }
+
+ .project-picker {
+ display: flex;
+ align-items: center;
+ }
+
+ .project-picker select {
+ background-color: #1a0a14;
+ color: #ddc6a8;
+ border: 1px solid #722f37;
+ padding: 8px 12px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+
+ .status-indicator {
+ padding: 8px 12px;
+ background-color: #722f37;
+ color: #ddc6a8;
+ border-radius: 5px;
+ }
+
+ .main-content {
+ display: flex;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #1a0a14;
+ padding: 15px;
+ margin-right: 20px;
+ border-right: 1px solid #722f37;
+ }
+
+ .chat-log {
+ height: calc(100vh - 60px);
+ overflow-y: auto;
+ padding-bottom: 10px;
+ }
+
+ .chat-message {
+ padding: 10px;
+ margin-bottom: 10px;
+ border-bottom: 1px solid #722f37;
+ }
+
+ .chat-input {
+ background-color: #1a0a14;
+ color: #ddc6a8;
+ border: 1px solid #722f37;
+ padding: 10px;
+ margin-top: 10px;
+ }
+
+ .right-pane {
+ width: 60%;
+ background-color: #1a0a14;
+ padding: 15px;
+ }
+
+ .sub-panel {
+ background-color: #0a0408;
+ padding: 20px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ height: 160px;
+ }
+
+ .sub-panel h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 18px;
+ margin: 0;
+ color: #d4af37;
+ }
+
+ .sub-panel p {
+ color: #ddc6a8;
+ font-size: 14px;
+ line-height: 1.4;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <h1>HORMUZ</h1>
+ <div class="project-picker">
+ <select>
+ <option value="project1">Rack 14, North Wall</option>
+ <option value="project2">Cellar 7, East Tier</option>
+ <option value="project3">Vault 3, West Alcove</option>
+ </select>
+ </div>
+ <span class="status-indicator">Idle</span>
+ </header>
+
+ <div class="main-content">
+ <div class="left-pane">
+ <h2>Design Notes</h2>
+ <div class="chat-log">
+ <div class="chat-message"><strong>System:</strong> Initializing...</div>
+ <div class="chat-message"><strong>User:</strong> /run-topic "Aetherial Cascade"</div>
+ <div class="chat-message"><strong>System:</strong> Topic "Aetherial Cascade" initiated.</div>
+ <div class="chat-message"><strong>User:</strong> /stampede 3, "Chromatic Bloom"</div>
+ <div class="chat-message"><strong>System:</strong> Stampede "Chromatic Bloom" deployed to 3 nodes.</div>
+ <div class="chat-message"><strong>User:</strong> Querying rendering parameters...</div>
+ <div class="chat-message"><strong>System:</strong> Rendering parameters received.</div>
+ </div>
+ <input type="text" class="chat-input" placeholder="Enter note...">
+ </div>
+
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>Preview</h2>
+ <p>Awaiting spectral analysis. Adjusting luminance for optimal visual clarity. Check the refraction index on the lower registers.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Paper</h2>
+ <p>Requesting archival-grade vellum. The texture profile is critical for the final presentation. Ensure the watermark is subtle, almost a ghost.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Figma</h2>
+ <p>Synchronizing layers with the core aesthetic. The composition needs to be precise – every element must feel deliberately placed, like a constellation.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Canva</h2>
+ <p>Preparing promotional materials. The tagline should evoke a sense of timelessness and mystery. Something along the lines of "Echoes from the Vault."</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/033-watchmaker-bench.html b/mockups/033-watchmaker-bench.html
new file mode 100644
index 0000000..a3e2188
--- /dev/null
+++ b/mockups/033-watchmaker-bench.html
@@ -0,0 +1,215 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>watchmaker-bench — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:wght@400;700&family=Source+Code+Pro:wght@400;500&display=swap">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ background-color: #1a1410;
+ color: #f0e6d0;
+ font-family: 'Source Code Pro', monospace;
+ font-size: 14px;
+ line-height: 1.6;
+ overflow-x: hidden; /* Prevent horizontal scroll */
+ }
+
+ /* Global Styles */
+ .container {
+ width: 1440px;
+ margin: 0 auto;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+
+ h1, h2, h3 {
+ color: #d4b896;
+ font-family: 'Cormorant', serif;
+ margin-bottom: 0.5em;
+ }
+
+ h1 {
+ font-size: 2.5em;
+ font-weight: 400;
+ }
+
+ h2 {
+ font-size: 1.5em;
+ font-weight: 400;
+ }
+
+ h3 {
+ font-size: 1.25em;
+ font-weight: 400;
+ }
+
+ /* Header */
+ header {
+ background-color: #0d0a08;
+ padding: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ header h1 {
+ margin: 0;
+ font-size: 2em;
+ }
+
+ .project-picker {
+ padding: 8px 12px;
+ background-color: #7a5c3e;
+ color: #f0e6d0;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+
+ .status-indicator {
+ padding: 8px 12px;
+ background-color: #7a5c3e;
+ color: #f0e6d0;
+ border: none;
+ border-radius: 5px;
+ }
+
+ /* Main Content Area */
+ main {
+ display: flex;
+ }
+
+ .left-pane {
+ width: 40%;
+ background-color: #7a5c3e;
+ padding: 15px;
+ border-right: 2px solid #0d0a08;
+ height: calc(100vh - 40px); /* Adjust as needed */
+ overflow-y: auto;
+ }
+
+ .right-pane {
+ width: 60%;
+ padding: 15px;
+ height: calc(100vh - 40px); /* Adjust as needed */
+ overflow-y: auto;
+ }
+
+ .chat-log {
+ height: calc(100% - 50px);
+ overflow-y: auto;
+ padding-bottom: 10px;
+ }
+
+ .chat-message {
+ padding: 10px;
+ margin-bottom: 5px;
+ border-bottom: 1px solid #0d0a08;
+ }
+
+ .chat-input {
+ width: 100%;
+ padding: 8px;
+ background-color: #7a5c3e;
+ color: #f0e6d0;
+ border: none;
+ border-radius: 5px;
+ }
+
+ .sub-panel {
+ background-color: #0d0a08;
+ padding: 20px;
+ border-radius: 5px;
+ margin-bottom: 15px;
+ height: 170px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #d4b896;
+ font-size: 1em;
+ }
+
+ .sub-panel h3 {
+ margin-bottom: 10px;
+ }
+
+ /* Specific Content */
+ .project-options {
+ margin-left: 10px;
+ }
+
+ .chat-user {
+ font-weight: 500;
+ margin-right: 5px;
+ }
+
+ .sub-panel-content {
+ font-style: italic;
+ text-align: center;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="container">
+ <header>
+ <h1>HORMUZ</h1>
+ <div class="project-options">
+ <select class="project-picker">
+ <option>Chronometer Project</option>
+ <option>Aetherium Engine</option>
+ <option>Celestial Orrery</option>
+ </select>
+ <span class="status-indicator">Idle</span>
+ </div>
+ </header>
+
+ <main>
+ <section class="left-pane">
+ <h2>Chronometry Log</h2>
+ <div class="chat-log">
+ <div class="chat-message">
+ <span class="chat-user">Orchestrator:</span> Initializing sequence...
+ </div>
+ <div class="chat-message">
+ <span class="chat-user">Artisan 7:</span> /run-topic: gear-train-resonance
+ </div>
+ <div class="chat-message">
+ <span class="chat-user">Orchestrator:</span> Topic 'gear-train-resonance' initiated. Monitoring for anomalies.
+ </div>
+ <div class="chat-message">
+ <span class="chat-user">Engineer 3:</span> /stampede: torque-calibration - duration: 12 cycles
+ </div>
+ <div class="chat-message">
+ <span class="chat-user">Orchestrator:</span> Stampede 'torque-calibration' initiated. Duration: 12 cycles. Recordings active.
+ </div>
+ </div>
+ <input type="text" class="chat-input" placeholder="Enter command...">
+ </section>
+
+ <section class="right-pane">
+ <div class="sub-panel">
+ <h3>Preview</h3>
+ <div class="sub-panel-content">Visual representation of the escapement’s harmonic profile. Requires manual synchronization.</div>
+ </div>
+ <div class="sub-panel">
+ <h3>Paper</h3>
+ <div class="sub-panel-content">Schematic diagrams and detailed material specifications. Consult the ledger for cross-references.</div>
+ </div>
+ <div class="sub-panel">
+ <h3>Figma</h3>
+ <div class="sub-panel-content">Interactive model of the mainspring housing. Adjust tolerances with caution.</div>
+ </div>
+ <div class="sub-panel">
+ <h3>Canva</h3>
+ <div class="sub-panel-content">Marketing materials for the Celestial Orrery. Ensure consistent branding across all channels.</div>
+ </div>
+ </section>
+ </main>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/034-blueprint-roll.html b/mockups/034-blueprint-roll.html
new file mode 100644
index 0000000..a611420
--- /dev/null
+++ b/mockups/034-blueprint-roll.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>architects-blueprint — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #0e3a5f;
+ --fg: #ffffff;
+ --accent: #fcd13e;
+ --support: #a4c5e8;
+ --secondary: #1d4d7a;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin:0; padding:0; width:100%; height:100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--fg); }
+ body { display: flex; flex-direction: column; }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 2rem;
+ background: var(--secondary);
+ border-bottom: 1px solid var(--accent);
+ font-size: 1.25rem;
+ font-weight: 600;
+ }
+ header .brand { font-family: 'Architects Daughter', cursive; }
+ header select {
+ padding: 0.5rem 1rem;
+ border: 1px solid var(--accent);
+ border-radius: 4px;
+ background: var(--fg);
+ color: var(--secondary);
+ font-size: 0.9rem;
+ }
+ header .status {
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ background: var(--accent);
+ color: var(--bg);
+ font-size: 0.9rem;
+ }
+ main {
+ display: flex;
+ flex:1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ border-right: 1px solid var(--accent);
+ background: var(--support);
+ }
+ .chat-log {
+ flex:1;
+ overflow-y: auto;
+ margin-bottom: 1rem;
+ }
+ .chat-message {
+ margin: 1rem 0;
+ padding: 0.75rem 1rem;
+ background: var(--fg);
+ border: 1px solid var(--accent);
+ border-radius: 6px;
+ font-size: 0.95rem;
+ }
+ .chat-message.user::before { content: "User: "; color: var(--accent); }
+ .chat-message.agent::before { content: "Agent: "; color: var(--secondary); }
+ .chat-input {
+ display: flex;
+ input {
+ flex:1;
+ padding: 0.75rem;
+ font-size: 1rem;
+ border: 1px solid var(--accent);
+ border-radius: 4px 0 0 4px;
+ }
+ button {
+ padding: 0.75rem 1.5rem;
+ background: var(--accent);
+ color: var(--bg);
+ border: none;
+ border-radius: 0 4px 4px 0;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1.5rem;
+ padding: 2rem;
+ }
+ .panel {
+ background: var(--fg);
+ border: 1px solid var(--accent);
+ border-radius: 6px;
+ padding: 1.5rem;
+ font-size: 0.95rem;
+ color: var(--secondary);
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Architects Daughter', cursive;
+ font-size: 1.25rem;
+ margin-bottom: 1rem;
+ }
+ .preview {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1rem;
+ margin-top: 1rem;
+ }
+ .preview-item {
+ background: var(--secondary);
+ border: 1px solid var(--accent);
+ border-radius: 4px;
+ padding: 1rem;
+ text-align: center;
+ }
+ .paper {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .paper-note {
+ background: var(--support);
+ padding: 0.75rem;
+ border: 1px solid var(--accent);
+ border-radius: 4px;
+ }
+ .figma {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .figma-layer {
+ background: var(--fg);
+ padding: 0.5rem;
+ border: 1px solid var(--accent);
+ border-radius: 4px;
+ }
+ .canva {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .canva-section {
+ background: var(--support);
+ padding: 1rem;
+ border: 1px solid var(--accent);
+ border-radius: 4px;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select>
+ <option value="project-a">Project A: Urban Renewal Framework</option>
+ <option value="project-b">Project B: Coastal Infrastructure</option>
+ <option value="project-c">Project C: Modular Housing Initiative</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic "Structural Integrity Analysis"</div>
+ <div class="chat-message agent">Initiating topic run. Calculating load distribution matrices for phase 3.</div>
+ <div class="chat-message user">/stampede "Material Optimization"</div>
+ <div class="chat-message agent">Engaging stampede protocol. Cross-referencing 427 material samples against 18 stress parameters.</div>
+ <div class="chat-message user">What is the current status of the load-bearing calculations?</div>
+ <div class="chat-message agent">Status: 78% complete. Identifying 3 critical junctions requiring reinforcement.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message..." />
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="preview">
+ <div class="preview-item">Floor Plan 1:200</div>
+ <div class="preview-item">Elevation A</div>
+ <div class="preview-item">Section B</div>
+ <div class="preview-item">Detail 3</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="paper">
+ <div class="paper-note">Note: All material specifications must adhere to ISO 19902-1:2023 standards.</div>
+ <div class="paper-note">Reminder: Schedule site inspection for 22nd March, 14:00.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="figma">
+ <div class="figma-layer">Layer: Structural Grid</div>
+ <div class="figma-layer">Layer: Load Paths</div>
+ <div class="figma-layer">Layer: Material Tags</div>
+ <div class="figma-layer">Layer: Stress Indicators</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="canva">
+ <div class="canva-section">
+ <div>Design: Project Overview Slide</div>
+ <div>Elements: Logo, 3D Model, Timeline</div>
+ </div>
+ <div class="canva-section">
+ <div>Design: Client Presentation Deck</div>
+ <div>Elements: Material Samples, Cost Breakdown</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/035-fbi-case-file.html b/mockups/035-fbi-case-file.html
new file mode 100644
index 0000000..0ca9d22
--- /dev/null
+++ b/mockups/035-fbi-case-file.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>fbi-case-file-redacted — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Source+Sans+Pro&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ html { height: 100%; }
+ body {
+ background: #fbf3e0;
+ color: #1a1a1a;
+ font-family: 'Source Sans Pro', sans-serif;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ header {
+ background: #1a1a1a;
+ color: #fbf3e0;
+ padding: 16px 32px;
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ font-family: 'Special Elite', cursive;
+ font-size: 24px;
+ }
+ header select {
+ background: #a83232;
+ color: #fbf3e0;
+ border: none;
+ padding: 8px 16px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ header .status {
+ background: #666666;
+ color: #1a1a1a;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background: #1a1a1a;
+ color: #fbf3e0;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ margin-bottom: 16px;
+ padding-right: 8px;
+ }
+ .chat-message {
+ margin-bottom: 12px;
+ font-size: 14px;
+ }
+ .chat-message.user { color: #a83232; }
+ .chat-message.system { color: #666666; }
+ .chat-input {
+ display: flex;
+ input {
+ flex: 1;
+ background: #fbf3e0;
+ color: #1a1a1a;
+ border: none;
+ padding: 8px 12px;
+ font-size: 14px;
+ outline: none;
+ }
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: #1a1a1a;
+ color: #fbf3e0;
+ border: 1px solid #666666;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Special Elite', cursive;
+ font-size: 18px;
+ margin-bottom: 12px;
+ }
+ .panel-body {
+ font-size: 14px;
+ line-height: 1.5;
+ color: #666666;
+ }
+ .panel-body code {
+ color: #a83232;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <select>
+ <option>Project Redacted</option>
+ <option>Operation Silent</option>
+ <option>Case File 7B</option>
+ </select>
+ <span class="status">idle</span>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic 'Project Redacted' — CONFIDENTIAL</div>
+ <div class="chat-message system">TOPIC: PROJECT REDACTED — INITIATED. 3 UNACCOUNTED VOLUMES DETECTED.</div>
+ <div class="chat-message user">/stampede 'Operation Silent'</div>
+ <div class="chat-message system">STAMPEDE: OPERATION SILENT — 12 LAYERS UNRENDERED. REDACTED.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="CONFIDENTIAL: TYPE /COMMAND">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ REDACTED: ASSET 001 — INTEL NOT FOUND. 4 UNRENDERED LAYERS DETECTED.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ CONFIDENTIAL: PAPER TRAIL — 3 UNACCOUNTED PAGES. 2 REDACTED SIGNATURES DETECTED.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ REDACTED: FIGMA FILE — 12 LAYERS UNRENDERED. 5 ELEMENTS UNLINKED.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ CONFIDENTIAL: CANVA DRAFT — 5 ELEMENTS REDACTED. 3 UNACCOUNTED FONT VARIANTS.
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/036-noir-detective.html b/mockups/036-noir-detective.html
new file mode 100644
index 0000000..c1a4bd9
--- /dev/null
+++ b/mockups/036-noir-detective.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>noir-detective-board — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spectral:wght@700&family=Inter&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #0a0a0a; color: #fbf6e9; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; padding: 16px 32px; background: #3a3a3a; color: #dba673; font-family: 'Spectral', serif; font-size: 24px; }
+ header select { margin-left: auto; padding: 8px 12px; background: #1a1a1a; color: #fbf6e9; border: 1px solid #a83232; }
+ header .status { margin-left: 24px; padding: 4px 8px; background: #a83232; border-radius: 4px; font-size: 12px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #3a3a3a; display: flex; flex-direction: column; }
+ .chat-log { flex: 1; overflow-y: auto; padding: 16px; }
+ .chat-log .message { margin: 8px 0; }
+ .chat-log .user { color: #dba673; font-weight: bold; }
+ .chat-log .content { margin-left: 8px; }
+ .chat-input { padding: 16px; display: flex; }
+ .chat-input input { flex: 1; padding: 8px; background: #1a1a1a; color: #fbf6e9; border: 1px solid #a83232; }
+ .chat-input button { margin-left: 8px; padding: 8px 16px; background: #dba673; color: #0a0a0a; border: none; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; padding: 16px; }
+ .panel { background: #1a1a1a; border: 1px solid #3a3a3a; padding: 16px; }
+ .panel h3 { margin: 0 0 8px; color: #dba673; font-family: 'Spectral', serif; }
+ .panel p { margin: 0; color: #a83232; }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <select>
+ <option>Project Neon</option>
+ <option>Case: Midnight</option>
+ <option>Hormuz Initiative</option>
+ </select>
+ <span class="status">idle</span>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message"><span class="user">AGENT:</span><span class="content">/run-topic "The Black Ledger"</span></div>
+ <div class="message"><span class="user">SYSTEM:</span><span class="content">Topic initiated. Scanning for anomalous data patterns...</span></div>
+ <div class="message"><span class="user">AGENT:</span><span class="content">/stampede 3</span></div>
+ <div class="message"><span class="user">SYSTEM:</span><span class="content">Stampede protocol engaged. Concurrent threads: 3. Expect volatility.</span></div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="> whisper into the void">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h3>Preview</h3>
+ <p>Mock-up: A flickering neon sign casting long shadows on a rain-slicked pavement. The word "HORMUZ" glows in blood-red. No faces. Just questions.</p>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <p>Scratched notes in the margins: "The ledger's a lie. The vault's a mirror. The client's a ghost." Coffee stain near the bottom. Pen still wet.</p>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <p>Wireframes: 3D render of a neon-lit alleyway. A figure in a trench coat, back to the camera. No face. Just the glint of a revolver handle.</p>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <p>Mock-up: Wanted poster with a smudged face. Text: "EYES ONLY. LAST SEEN IN THE RED LIGHT DISTRICT. REWARD: QUESTIONS UNANSWERED."</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/037-polish-poster-1960.html b/mockups/037-polish-poster-1960.html
new file mode 100644
index 0000000..a5cd250
--- /dev/null
+++ b/mockups/037-polish-poster-1960.html
@@ -0,0 +1,211 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>polish-poster-school — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ body {
+ background-color: #1a1a1a;
+ color: #fdfaf3;
+ font-family: 'Inter', sans-serif;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow-x: hidden;
+ }
+ header {
+ background: linear-gradient(90deg, #ff4081, #00bcd4);
+ color: #1a1a1a;
+ padding: 16px 32px;
+ font-family: 'Bungee Inline', cursive;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ z-index: 10;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ }
+ header h1 {
+ font-size: 24px;
+ text-shadow: 1px 1px 2px #000;
+ }
+ .project-picker {
+ position: relative;
+ margin: 0 20px;
+ }
+ .project-picker select {
+ background: #fdfaf3;
+ color: #1a1a1a;
+ padding: 8px 12px;
+ border: 2px solid #ffd700;
+ border-radius: 4px;
+ font-family: 'Inter', sans-serif;
+ font-size: 14px;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L10 3L0 6z' fill='%231a1a1a'/></svg>");
+ background-repeat: no-repeat;
+ background-position: right 8px center;
+ }
+ .status-indicator {
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 12px;
+ background: #ffd700;
+ color: #1a1a1a;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #00bcd4;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 20px;
+ overflow-y: auto;
+ background: #1a1a1a;
+ color: #ff4081;
+ font-family: 'Inter', sans-serif;
+ }
+ .chat-log .message {
+ margin: 10px 0;
+ padding: 10px;
+ background: #fdfaf3;
+ border-left: 4px solid #ff4081;
+ border-radius: 6px;
+ max-width: 70%;
+ }
+ .chat-input {
+ padding: 16px;
+ display: flex;
+ gap: 10px;
+ background: #ff4081;
+ color: #1a1a1a;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ border: 2px solid #00bcd4;
+ border-radius: 6px;
+ font-size: 14px;
+ }
+ .chat-input button {
+ background: #00bcd4;
+ color: #1a1a1a;
+ border: none;
+ padding: 10px 16px;
+ border-radius: 6px;
+ font-weight: bold;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 16px;
+ padding: 20px;
+ background: #ff4081;
+ color: #1a1a1a;
+ }
+ .panel {
+ background: #fdfaf3;
+ padding: 20px;
+ border: 2px solid #ffd700;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel h2 {
+ font-family: 'Bungee Inline', cursive;
+ margin-bottom: 12px;
+ color: #00bcd4;
+ }
+ .panel .content {
+ font-size: 14px;
+ line-height: 1.6;
+ color: #1a1a1a;
+ display: -webkit-box;
+ -webkit-line-clamp: 6;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ .panel .content::before {
+ content: "Папирьё: 1920-х, шрифты в бегстве, краска кричит.";
+ display: block;
+ margin-bottom: 10px;
+ color: #00bcd4;
+ font-weight: bold;
+ }
+ .panel .content::after {
+ content: "Смех в ритме танцующих теней. Красный солнце падает на золотые зерна.";
+ display: block;
+ color: #ffd700;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN / HORMUZ</h1>
+ <div class="project-picker">
+ <select>
+ <option>Project Agitprop</option>
+ <option>Stampede 2023</option>
+ <option>Cyanide Canvases</option>
+ </select>
+ </div>
+ <div class="status-indicator">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message">/run-topic "Soviet propaganda posters"</div>
+ <div class="message">Initiating stampede of 1950s agitprop motifs. Expect 3D text and hammer-sickle gradients.</div>
+ <div class="message">/stampede "Neon agitprop"</div>
+ <div class="message">Injecting 1980s synthwave into the design matrix. Warning: excessive glitter.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /help for commands">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <div class="content">
+ <p>Красный солнце падает на золотые зерна. Тени танцуют в ритме бархатного ветра.</p>
+ <p>Граффити на стенах хрипит, как старый фильм. Бархатные тени, как танцующие тени.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <div class="content">
+ <p>Папирьё: 1920-х, шрифты в бегстве, краска кричит.</p>
+ <p>Красный солнце, как в кинотеатре 1920-х. Краска кричит, как старый фильм.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <div class="content">
+ <p>3D text, как из 1950-х. Граффити на стенах, как в кинотеатре 1980-х.</p>
+ <p>Голубой свет, как в кинотеатре 1980-х. Красный солнце, как в кинотеатре 1920-х.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Canvas</h2>
+ <div class="content">
+ <p>Красный солнце, как в кинотеатре 1920-х. Граффити на стенах, как в кинотеатре 1980-х.</p>
+ <p>Бархатные тени, как танцующие тени. Краска кричит, как старый фильм.</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/038-memphis-milano.html b/mockups/038-memphis-milano.html
new file mode 100644
index 0000000..bad68ca
--- /dev/null
+++ b/mockups/038-memphis-milano.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>memphis-milano-1980s — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #fff8e1;
+ --text: #000000;
+ --accent1: #ff80ab;
+ --accent2: #42a5f5;
+ --accent3: #fdd835;
+ }
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ padding: 0;
+ background: var(--bg);
+ font-family: 'Inter', sans-serif;
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background: var(--accent2);
+ color: var(--text);
+ font-family: 'Bungee Inline', cursive;
+ font-size: 24px;
+ letter-spacing: 2px;
+ border-bottom: 4px solid var(--accent3);
+ }
+ header select {
+ padding: 8px 12px;
+ border: 2px solid var(--accent1);
+ border-radius: 6px;
+ background: var(--bg);
+ color: var(--text);
+ font-family: 'Inter', sans-serif;
+ font-size: 16px;
+ margin-left: 20px;
+ }
+ header .status {
+ padding: 6px 12px;
+ border-radius: 20px;
+ background: var(--accent1);
+ color: var(--text);
+ font-size: 14px;
+ font-weight: 600;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ background: var(--accent3);
+ border-right: 4px solid var(--accent2);
+ overflow-y: auto;
+ }
+ .chat-messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 20px;
+ }
+ .message {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ }
+ .message.user {
+ justify-content: flex-end;
+ }
+ .message.user .bubble {
+ background: var(--accent2);
+ color: var(--text);
+ padding: 12px 16px;
+ border-radius: 20px;
+ max-width: 70%;
+ font-size: 14px;
+ }
+ .message.system .bubble {
+ background: var(--accent1);
+ color: var(--text);
+ padding: 12px 16px;
+ border-radius: 20px;
+ max-width: 70%;
+ font-size: 14px;
+ }
+ .chat-input {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px 12px;
+ border: 2px solid var(--accent2);
+ border-radius: 6px;
+ font-size: 14px;
+ }
+ .chat-input button {
+ padding: 10px 20px;
+ background: var(--accent2);
+ color: var(--text);
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+ .chat-input button:hover {
+ background: var(--accent3);
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 20px;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: var(--bg);
+ border: 3px solid var(--accent1);
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ position: relative;
+ }
+ .panel-header {
+ font-size: 20px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ margin-bottom: 16px;
+ color: var(--accent2);
+ }
+ .panel-content {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ color: var(--accent1);
+ position: relative;
+ }
+ .panel-content::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background: radial-gradient(circle at 30% 30%, var(--accent3) 20%, transparent 80%);
+ opacity: 0.2;
+ pointer-events: none;
+ }
+ .panel-content::after {
+ content: ' ';
+ position: absolute;
+ bottom: 10px; right: 10px;
+ width: 30px; height: 30px;
+ background: var(--accent2);
+ border-radius: 50%;
+ box-shadow: 0 0 10px var(--accent1);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <div>
+ <select>
+ <option value="1">Project Neon Squiggle</option>
+ <option value="2">Hormuz Reboot</option>
+ <option value="3">Terrazzo Revolution</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message system">
+ <div class="bubble">/run-topic: "Surreal Terrazzo Patterns"</div>
+ </div>
+ <div class="message user">
+ <div class="bubble">/stampede: 3D vector chaos</div>
+ </div>
+ <div class="message system">
+ <div class="bubble">Initiating stampede mode... expect 17% more chaos</div>
+ </div>
+ <div class="message user">
+ <div class="bubble">/run-topic: "Futuristic Memphis Grids"</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">Squiggles in terrazzo mode—unleash the chaos! 🌀</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">A blank canvas screaming for your geometric love. 🖌️</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">Vectors dancing in a pixelated waltz. 💃</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">Designs that defy the grid, just like your soul. 🎨</div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/039-vaporwave-grid.html b/mockups/039-vaporwave-grid.html
new file mode 100644
index 0000000..24ede5c
--- /dev/null
+++ b/mockups/039-vaporwave-grid.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>vaporwave-aesthetic — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #1a0033; color: #ffe066; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #0d0019; border-bottom: 2px solid #ff2a78; }
+ header h1 { font-family: 'Press Start 2P', cursive; font-size: 24px; color: #ff2a78; }
+ .project-picker { background: #7fffd4; padding: 6px 12px; border-radius: 8px; color: #0d0019; font-size: 14px; }
+ .status-indicator { font-family: 'Press Start 2P', cursive; font-size: 16px; color: #7fffd4; }
+ main { display: flex; flex: 1; }
+ .left-pane { width: 40%; padding: 30px; overflow-y: auto; background: #0d0019; border-right: 2px solid #ff2a78; }
+ .chat-log { display: flex; flex-direction: column; gap: 15px; }
+ .message { background: #1a0033; padding: 15px; border: 2px solid #ffe066; border-radius: 8px; }
+ .message.user { background: #ff2a78; color: #0d0019; }
+ .input-bar { margin-top: 20px; display: flex; }
+ .input-bar input { flex: 1; padding: 10px; font-size: 16px; border: 2px solid #7fffd4; border-radius: 4px; }
+ .input-bar button { background: #7fffd4; color: #0d0019; border: none; padding: 10px 20px; font-family: 'Press Start 2P', cursive; font-size: 14px; border-radius: 4px; margin-left: 10px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px; }
+ .sub-panel { background: #0d0019; border: 2px solid #ff2a78; border-radius: 8px; overflow: hidden; }
+ .sub-panel-header { padding: 15px; background: linear-gradient(to right, #ff2a78, #7fffd4); color: #0d0019; font-family: 'Press Start 2P', cursive; font-size: 18px; text-align: center; }
+ .sub-panel-body { padding: 20px; font-size: 14px; color: #ffe066; }
+ .sub-panel-body pre { font-family: monospace; font-size: 12px; color: #ff2a78; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <select class="project-picker">
+ <option>Project Neon Dreams</option>
+ <option>Project Synthwave</option>
+ <option>Project Retro Rave</option>
+ </select>
+ <div class="status-indicator">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic "cyberpunk fashion"</div>
+ <div class="message">AGENT: Initiating neural net cascade... 70% synapse sparkles detected.</div>
+ <div class="message user">/stampede 3</div>
+ <div class="message">AGENT: Overloading with 3D render particles. Warning: 100% vaporwave saturation achieved.</div>
+ </div>
+ <div class="input-bar">
+ <input type="text" placeholder="type /command or message">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <div class="sub-panel-header">PREVIEW</div>
+ <div class="sub-panel-body">
+ <pre>┌───────────────┐
+│ 80s Arcade UI │
+└───────────────┘
+ ▲
+ │
+ ▼
+</pre>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <div class="sub-panel-header">PAPER</div>
+ <div class="sub-panel-body">
+ <div style="background: #1a0033; padding: 20px; border: 2px dashed #ff2a78; text-align: center;">
+ <span style="color: #7fffd4;">[DRAFT]</span><br>
+ "The future is a disco ball in a data center."
+ </div>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <div class="sub-panel-header">FIGMA</div>
+ <div class="sub-panel-body">
+ <div style="background: #0d0019; padding: 20px; border: 2px solid #ffe066; border-radius: 8px;">
+ <div style="color: #ff2a78; font-size: 16px; font-family: 'Press Start 2P', cursive;">LAYER 1</div>
+ <div style="color: #7fffd4;">Ellipse (80% opacity)</div>
+ <div style="color: #ffe066;">Gradient: neon pink → aqua</div>
+ </div>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <div class="sub-panel-header">CANVA</div>
+ <div class="sub-panel-body">
+ <div style="display: flex; justify-content: center; align-items: center; height: 100%; background: #7fffd4; border: 2px solid #ff2a78;">
+ <div style="text-align: center; color: #0d0019;">
+ <div style="font-family: 'Press Start 2P', cursive; font-size: 20px;">VAPORWAVE</div>
+ <div style="font-size: 14px;">Design template: 1999 cyberpunk flyer</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/040-y2k-chrome.html b/mockups/040-y2k-chrome.html
new file mode 100644
index 0000000..b48a425
--- /dev/null
+++ b/mockups/040-y2k-chrome.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>y2k-chrome-bubble — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #1e1b4b; color: #e0e7ff; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: linear-gradient(135deg, #7c3aed, #06b6d4); color: #1e1b4b; font-family: 'Bungee Inline', cursive; font-size: 24px; }
+ header select { background: #fde047; color: #1e1b4b; border: 2px solid #7c3aed; padding: 8px 12px; border-radius: 4px; }
+ header .status { padding: 8px 16px; background: #e0e7ff; color: #7c3aed; border: 2px solid #06b6d4; border-radius: 20px; font-weight: bold; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .chat-pane { width: 40%; border-right: 2px solid #fde047; display: flex; flex-direction: column; }
+ .chat-log { flex: 1; padding: 16px; overflow-y: auto; background: #1e1b4b; }
+ .chat-message { margin: 12px 0; padding: 12px; background: #e0e7ff; border: 1px solid #7c3aed; border-radius: 8px; }
+ .chat-message.user { background: #06b6d4; color: #1e1b4b; }
+ .chat-input { display: flex; padding: 16px; }
+ .chat-input input { flex: 1; padding: 8px; border: 2px solid #fde047; border-radius: 4px; }
+ .chat-input button { margin-left: 8px; padding: 8px 16px; background: #7c3aed; color: #e0e7ff; border: none; border-radius: 4px; }
+ .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
+ .panel { background: #e0e7ff; border: 2px solid #7c3aed; padding: 16px; border-radius: 8px; display: flex; flex-direction: column; }
+ .panel-header { font-family: 'Bungee Inline', cursive; font-size: 18px; color: #7c3aed; margin-bottom: 12px; }
+ .panel-body { flex: 1; overflow-y: auto; }
+ .panel-body pre { font-family: 'Inter', monospace; font-size: 14px; color: #1e1b4b; background: #fde047; padding: 8px; border-radius: 4px; }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <div>
+ <select>
+ <option>Project Neon Dawn</option>
+ <option>Project Holographic Echo</option>
+ <option>Project Quantum Bubble</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic: Generate a 2003-era website mockup</div>
+ <div class="chat-message">Okay, I'm spinning up a retro-futuristic chrome bubble interface. Let me fetch the gradients...</div>
+ <div class="chat-message user">/stampede: Apply AIM-era chat aesthetics</div>
+ <div class="chat-message">Stampede engaged! Applying glossy gradients, pixelated fonts, and a touch of millennium-era chaos.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <pre>
+ [GLOWING GRADIENT BOX]
+ ┌───────────────┐
+ │ 404 NOT FOUND │
+ └───────────────┘
+ [CHROME BUBBLE EFFECT]
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <pre>
+ [HANDWRITTEN TEXT IN BUBBLES]
+ “This is not a drill.
+ We are in the year 2003.
+ The future is chrome.”
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <pre>
+ [MOCKUP UI ELEMENTS]
+ ▶ Frame: Chrome Bubble UI
+ ▶ Color: #7c3aed (Primary)
+ ▶ Gradient: 135deg #e0e7ff to #06b6d4
+ ▶ Font: Bungee Inline (Display)
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <pre>
+ [DESIGN LAYER PREVIEW]
+ Layer 1: Chrome Gradient Background
+ Layer 2: Retro Text “Y2K CHROME”
+ Layer 3: Glowing Border (#fde047)
+ Layer 4: Pixelated ASCII Art
+ </pre>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/041-flemish-still-life.html b/mockups/041-flemish-still-life.html
new file mode 100644
index 0000000..0b022b0
--- /dev/null
+++ b/mockups/041-flemish-still-life.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>flemish-still-life — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ body {
+ background: #1a0e00;
+ color: #fbe9b7;
+ font-family: 'Inter', sans-serif;
+ height: 900px;
+ width: 1440px;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ }
+ header {
+ background: #722f37;
+ padding: 20px 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.8em;
+ color: #fbe9b7;
+ }
+ header select {
+ background: #3a4a2c;
+ color: #fbe9b7;
+ border: none;
+ padding: 5px 10px;
+ font-family: 'Inter', sans-serif;
+ font-size: 1em;
+ }
+ header .status {
+ background: #3a4a2c;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 0.9em;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #3a4a2c;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ margin-bottom: 20px;
+ }
+ .chat-message {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-message.user {
+ align-items: flex-end;
+ }
+ .chat-message.system {
+ align-items: flex-start;
+ }
+ .chat-message .text {
+ background: #0a0500;
+ padding: 10px 15px;
+ border-radius: 6px;
+ max-width: 70%;
+ font-size: 0.95em;
+ }
+ .chat-input {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ background: #0a0500;
+ border: none;
+ border-radius: 4px;
+ color: #fbe9b7;
+ }
+ .chat-input button {
+ background: #fbe9b7;
+ color: #1a0e00;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ padding: 20px;
+ }
+ .panel {
+ background: #0a0500;
+ border: 2px solid #722f37;
+ border-radius: 6px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+ .panel h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.2em;
+ color: #722f37;
+ }
+ .panel .content {
+ font-size: 0.95em;
+ line-height: 1.4;
+ color: #fbe9b7;
+ }
+ .panel .content::before {
+ content: "• ";
+ }
+ .panel .content:nth-child(2)::before {
+ content: "• ";
+ }
+ .panel .content:nth-child(3)::before {
+ content: "• ";
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN</div>
+ <div>
+ <select>
+ <option>Project Lazarus</option>
+ <option>Project Elysium</option>
+ <option>Project Nox</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic: The decay of empires</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Topic initiated. The hourglass empties. All things crumble to dust.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede: Generate 3 variations of the vanitas still-life</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Stampede engaged. Roses wilt. Apples rot. The mirror reflects only shadows.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <div class="content">A single rose, its petals curled like the last breath of a dying queen. Light slants through the window, casting long shadows that whisper of time's passage.</div>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <div class="content">Notes on the impermanence of ink. The quill trembles as the page absorbs the last breath of the scribe. Margins bleed with fading script.</div>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <div class="content">Layer 7: The peeling of time. Layer 8: The ghost of a forgotten icon. Layer 9: A cracked vase, its contents long evaporated.</div>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <div class="content">Ephemeral designs: A candle burning in a draft. A portrait half-erased by rain. A clock with hands frozen at the hour of decay.</div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/042-japanese-edo-print.html b/mockups/042-japanese-edo-print.html
new file mode 100644
index 0000000..35e557f
--- /dev/null
+++ b/mockups/042-japanese-edo-print.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1440, initial-scale=0.95">
+<title>edo-period-ukiyo-e — Four Horsemen Studio</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Inter:wght@400;600&display=swap">
+<style>
+body {
+ margin:0;
+ background:#fff8e7;
+ color:#1a1a1a;
+ font-family: 'Inter', sans-serif;
+ display:flex;
+ flex-direction:column;
+ height:900px;
+}
+header {
+ background:#0a4d3c;
+ color:#fff8e7;
+ padding:16px 32px;
+ font-family:'Noto Serif JP', serif;
+ font-size:24px;
+ display:flex;
+ align-items:center;
+ gap:24px;
+ position:relative;
+}
+header::after {
+ content:'';
+ position:absolute;
+ bottom:0;
+ left:0;
+ width:100%;
+ height:4px;
+ background:#c45a5a;
+}
+header select {
+ padding:8px 12px;
+ border:2px solid #ddd5c2;
+ border-radius:6px;
+ background:#fff8e7;
+ color:#1a1a1a;
+ font-family:'Inter', sans-serif;
+}
+header .status {
+ padding:6px 12px;
+ border-radius:12px;
+ font-size:14px;
+ background:#ddd5c2;
+ color:#1a1a1a;
+}
+main {
+ display:flex;
+ flex:1;
+ overflow:hidden;
+}
+.left-pane {
+ width:40%;
+ border-right:1px solid #ddd5c2;
+ display:flex;
+ flex-direction:column;
+}
+.chat-log {
+ flex:1;
+ overflow-y:auto;
+ padding:24px;
+ background:#fff8e7;
+ display:flex;
+ flex-direction:column;
+ gap:16px;
+}
+.message {
+ display:flex;
+ gap:12px;
+ align-items:flex-start;
+}
+.message.user {
+ flex-direction:row-reverse;
+}
+.message .text {
+ background:#1a1a1a;
+ color:#fff8e7;
+ padding:12px 16px;
+ border-radius:8px;
+ max-width:70%;
+}
+.message .timestamp {
+ font-size:12px;
+ color:#c45a5a;
+}
+.chat-input {
+ padding:16px;
+ border-top:1px solid #ddd5c2;
+ display:flex;
+ gap:12px;
+}
+.chat-input input {
+ flex:1;
+ padding:8px 12px;
+ border:2px solid #ddd5c2;
+ border-radius:6px;
+ font-family:'Inter', sans-serif;
+}
+.chat-input button {
+ padding:8px 16px;
+ background:#0a4d3c;
+ color:#fff8e7;
+ border:none;
+ border-radius:6px;
+ font-family:'Inter', sans-serif;
+}
+.right-pane {
+ width:60%;
+ display:flex;
+ flex-wrap:wrap;
+ gap:24px;
+ padding:24px;
+}
+.panel {
+ flex:1 1 45%;
+ min-width:300px;
+ background:#1a1a1a;
+ color:#fff8e7;
+ padding:24px;
+ border:1px solid #ddd5c2;
+ border-radius:8px;
+}
+.panel h3 {
+ margin:0 0 16px 0;
+ font-family:'Noto Serif JP', serif;
+ font-size:18px;
+}
+.panel .content {
+ display:flex;
+ flex-direction:column;
+ gap:12px;
+}
+.panel .content div {
+ font-size:14px;
+ line-height:1.6;
+}
+.panel .content .ink {
+ color:#c45a5a;
+}
+.panel .content .wave {
+ color:#ddd5c2;
+}
+</style>
+</head>
+<body>
+<header>
+ <span>FOUR HORSEMEN / HORMUZ</span>
+ <select>
+ <option value="project1">Samurai Chronicles</option>
+ <option value="project2">Floating Worlds</option>
+ <option value="project3">Inkbound Horizons</option>
+ </select>
+ <span class="status">idle</span>
+</header>
+<main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="text">/run-topic: "The Wave That Never Breaks"</div>
+ <div class="timestamp">03:47</div>
+ </div>
+ <div class="message">
+ <div class="text">Topic initiated. Sumi ink flows like the Kuroshio current. Let the brush dance with the wind.</div>
+ <div class="timestamp">03:48</div>
+ </div>
+ <div class="message user">
+ <div class="text">/stampede: "Mountains of Paper"</div>
+ <div class="timestamp">03:51</div>
+ </div>
+ <div class="message">
+ <div class="text">Stampede activated. The paper mountains rise, their peaks etched with the whispers of ancient maps.</div>
+ <div class="timestamp">03:52</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Summon the ink...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h3>Preview</h3>
+ <div class="content">
+ <div class="ink">A wave of ink spills across the screen, its crest catching the light of the moon. Beneath it, the silhouette of a crane takes flight.</div>
+ <div class="wave">The horizon shimmers with the reflection of a thousand paper lanterns.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <div class="content">
+ <div>Calligraphy strokes unfurl like the petals of a cherry blossom. Each curve holds the weight of a thousand silent prayers.</div>
+ <div>The paper breathes, its fibers whispering the secrets of the Edo period.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <div class="content">
+ <div>Frames of the design pulse with the rhythm of a taiko drum. Layers unfold like the pages of a scroll, each one a world unto itself.</div>
+ <div>The brushstroke tool glows with the essence of Hokusai's waves.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <div class="content">
+ <div>A collage of ukiyo-e prints and sumi ink washes. The composition balances like a tea ceremony, every element in perfect harmony.</div>
+ <div>The background gradient mimics the fading hues of a twilight sky over Kyoto.</div>
+ </div>
+ </div>
+ </div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/043-courthouse-docket.html b/mockups/043-courthouse-docket.html
new file mode 100644
index 0000000..d4cb666
--- /dev/null
+++ b/mockups/043-courthouse-docket.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>four horsemen studio — Four Horsemen Studio</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@600;800&family=IBM+Plex+Mono:wght@400;600&display=swap">
+<style>
+body {
+ margin:0;
+ padding:0;
+ font-family: 'IBM Plex Mono', monospace;
+ background-color: #fdfaf0;
+ color: #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+}
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #ddd5c2;
+ border-bottom: 2px solid #7a5c3e;
+ font-family: 'Crimson Pro', serif;
+ font-weight: 800;
+ letter-spacing: 1px;
+}
+header h1 {
+ margin:0;
+ font-size: 1.5rem;
+}
+header .project-picker {
+ position: relative;
+ background: #fdfaf0;
+ border: 1px solid #3a3a3a;
+ padding: 8px 12px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+header .project-picker::after {
+ content: '▼';
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+header .status {
+ padding: 6px 12px;
+ background: #1a1a1a;
+ color: #ddd5c2;
+ border-radius: 4px;
+ font-size: 0.8rem;
+}
+main {
+ display: flex;
+ flex:1;
+ overflow: hidden;
+}
+.left-pane {
+ width: 40%;
+ background: #fdfaf0;
+ border-right: 1px solid #3a3a3a;
+ display: flex;
+ flex-direction: column;
+}
+.chat-log {
+ flex:1;
+ padding: 16px;
+ overflow-y: auto;
+ background: #fdfaf0;
+}
+.chat-message {
+ margin: 8px 0;
+}
+.chat-message.user {
+ text-align: right;
+}
+.chat-message.system {
+ text-align: left;
+}
+.chat-message .command {
+ color: #7a5c3e;
+ font-weight: 600;
+}
+.chat-input {
+ display: flex;
+ padding: 8px 16px;
+ border-top: 1px solid #3a3a3a;
+}
+.chat-input input {
+ flex:1;
+ padding: 8px;
+ font-size: 1rem;
+ border: none;
+ outline: none;
+}
+.chat-input button {
+ padding: 8px 16px;
+ background: #1a1a1a;
+ color: #ddd5c2;
+ border: none;
+ cursor: pointer;
+ margin-left: 8px;
+ font-weight: 600;
+}
+.right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 16px;
+ padding: 16px;
+}
+.panel {
+ background: #fdfaf0;
+ border: 1px solid #3a3a3a;
+ border-radius: 4px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+}
+.panel h2 {
+ font-family: 'Crimson Pro', serif;
+ font-weight: 600;
+ margin:0 0 12px 0;
+ color: #7a5c3e;
+}
+.panel p {
+ font-size: 0.9rem;
+ line-height: 1.4;
+}
+</style>
+</head>
+<body>
+<header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <div class="project-picker">PROJECT AEGIS</div>
+ <div class="status">idle</div>
+ </div>
+</header>
+<main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <span class="command">/run-topic</span> "Design Review"
+ </div>
+ <div class="chat-message system">
+ Topic initiated. Referencing Section 7.3.2 of the Design Mandate.
+ </div>
+ <div class="chat-message user">
+ <span class="command">/stampede</span> "Visual Hierarchy Reassessment"
+ </div>
+ <div class="chat-message system">
+ Stampede protocol engaged. All assets under review per Rule 4.1.
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>PREVIEW</h2>
+ <p>Pending approval per Section 7.3.2 of the Design Mandate. All visual elements subject to judicial review.</p>
+ </div>
+ <div class="panel">
+ <h2>PAPER</h2>
+ <p>Case 24-CV-1138: Motion to Approve Mockup Draft. Filed pursuant to Rule 4.1. No objections filed herein.</p>
+ </div>
+ <div class="panel">
+ <h2>FIGMA</h2>
+ <p>No active assets under Figma integration. Pursuant to Rule 4.1, all assets must be archived. Status: Quiescent.</p>
+ </div>
+ <div class="panel">
+ <h2>CANVA</h2>
+ <p>Canva integration status: Idle. No active templates herein. All templates must be approved by the Design Council.</p>
+ </div>
+ </div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/044-passport-stamp.html b/mockups/044-passport-stamp.html
new file mode 100644
index 0000000..a41714e
--- /dev/null
+++ b/mockups/044-passport-stamp.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>passport-stamp — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Sans:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg-dark: #0e2a47;
+ --bg-light: #fdfaf0;
+ --red: #a83232;
+ --green: #3a4a2c;
+ --brown: #7a5c3e;
+ --font-display: 'Special Elite', cursive;
+ --font-body: 'IBM Plex Sans', sans-serif;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--bg-dark); color: var(--bg-light); height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header {
+ display: flex;
+ align-items: center;
+ padding: 16px 32px;
+ background: var(--bg-dark);
+ border-bottom: 2px solid var(--brown);
+ font-family: var(--font-display);
+ font-size: 1.8em;
+ color: var(--bg-light);
+ }
+ header select {
+ margin-left: auto;
+ padding: 8px 12px;
+ font-size: 1em;
+ background: var(--bg-light);
+ color: var(--bg-dark);
+ border: 1px solid var(--brown);
+ border-radius: 4px;
+ }
+ header .status {
+ margin-left: 24px;
+ padding: 4px 12px;
+ background: var(--green);
+ color: var(--bg-dark);
+ border-radius: 4px;
+ font-size: 0.9em;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ background: var(--bg-light);
+ color: var(--bg-dark);
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+ }
+ .chat-message {
+ display: flex;
+ gap: 12px;
+ }
+ .chat-message.user {
+ align-items: flex-end;
+ }
+ .chat-message.system {
+ align-items: flex-start;
+ }
+ .chat-bubble {
+ padding: 12px 16px;
+ border-radius: 8px;
+ background: var(--bg-dark);
+ color: var(--bg-light);
+ max-width: 70%;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ font-size: 1em;
+ border: 1px solid var(--brown);
+ border-radius: 4px;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background: var(--green);
+ color: var(--bg-dark);
+ border: none;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: var(--bg-light);
+ color: var(--bg-dark);
+ border: 1px solid var(--brown);
+ border-radius: 8px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .panel h2 {
+ font-family: var(--font-display);
+ font-size: 1.2em;
+ color: var(--red);
+ }
+ .panel-content {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ .panel-content div {
+ padding: 8px 12px;
+ background: var(--bg-dark);
+ color: var(--bg-light);
+ border-radius: 4px;
+ font-size: 0.95em;
+ }
+ footer {
+ padding: 12px 32px;
+ text-align: center;
+ font-size: 0.8em;
+ color: var(--brown);
+ border-top: 1px solid var(--brown);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <select>
+ <option>Project HORMUZ</option>
+ <option>Project BERING</option>
+ <option>Project SAMAR</option>
+ </select>
+ <span class="status">idle</span>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message system">
+ <div class="chat-bubble">[SYSTEM] ENTRY GRANTED. INITIATING DESIGN ORCHESTRATION.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="chat-bubble">/run-topic "AERIAL VISION"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="chat-bubble">TOPIC AERIAL VISION: DEPLOYING 3D RENDERING PROTOCOLS. STATUS: ACTIVE.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="chat-bubble">/stampede "BATCH 42"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="chat-bubble">STAMPEDE BATCH 42: INITIATED. 12 VECTORS IN TRANSIT. ESTIMATED COMPLETION: 00:04:32.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="COMMAND OR QUERY">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>PREVIEW</h2>
+ <div class="panel-content">
+ <div>ENTRY GRANTED. DISPLAYING PROTOTYPE 0042-3A.</div>
+ <div>3D MODEL: 78% COMPLETION. TEXTURE MAPS: 92%.</div>
+ <div>WARNING: LIGHTING CONFIGURATION MAY NEED RECALIBRATION.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>PAPER</h2>
+ <div class="panel-content">
+ <div>DOCUMENT VERIFICATION: PENDING.</div>
+ <div>REQUIRED FORMS: 3A, 5C, 7X.</div>
+ <div>NOTE: STAMPED APPROVAL REQUIRED FOR FINAL SUBMISSION.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>FIGMA</h2>
+ <div class="panel-content">
+ <div>FILE: DESIGN-0042-3A.fig</div>
+ <div>LAST MODIFIED: 2023-11-05T14:22:17Z</div>
+ <div>STATUS: SYNCED WITH MAINFRAME. 3 UNCOMMITTED CHANGES.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>CANVA</h2>
+ <div class="panel-content">
+ <div>TEMPLATE: BRANDING KIT V2.0</div>
+ <div>ASSETS: 12/15 COMPLETED.</div>
+ <div>NOTE: COLOR PALETTE MUST ALIGN WITH PASSPORT-LEVEL APPROVAL.</div>
+ </div>
+ </div>
+ </div>
+ </main>
+ <footer>
+ passport-stamp — Four Horsemen Studio © 2023
+ </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/045-subway-token.html b/mockups/045-subway-token.html
new file mode 100644
index 0000000..3d2d847
--- /dev/null
+++ b/mockups/045-subway-token.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>subway-token-vending — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #1a1a1a; color: #fcd13e; height: 100%; }
+ body { display: flex; flex-direction: column; height: 100vh; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #0e2a47; color: #fcd13e; font-family: 'Bebas Neue', cursive; }
+ header h1 { font-size: 24px; }
+ .project-picker { padding: 8px 16px; background: #1a1a1a; border: 1px solid #e84545; border-radius: 4px; }
+ .status { padding: 8px 16px; background: #fffaee; color: #e84545; border: 1px solid #e84545; border-radius: 4px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; padding: 24px; background: #1a1a1a; border-right: 1px solid #e84545; }
+ .chat-log { height: 80%; overflow-y: auto; margin-bottom: 16px; }
+ .chat-message { margin: 8px 0; }
+ .chat-message.user { color: #e84545; }
+ .chat-message.agent { color: #fcd13e; }
+ .chat-input { display: flex; }
+ .chat-input input { flex: 1; padding: 8px; font-size: 14px; background: #1a1a1a; color: #fcd13e; border: 1px solid #e84545; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; padding: 24px; }
+ .sub-panel { background: #0e2a47; padding: 16px; border: 1px solid #e84545; }
+ .sub-panel h2 { margin: 0 0 12px; font-family: 'Bebas Neue', cursive; color: #fcd13e; }
+ .sub-panel p { margin: 0; font-size: 14px; color: #fffaee; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <select class="project-picker">
+ <option>Project Neon</option>
+ <option>Project Hail Mary</option>
+ <option>Project Echo</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic "Cyberpunk Aesthetics"</div>
+ <div class="chat-message agent">TOPIC INITIATED. GENERATING TOKENS...</div>
+ <div class="chat-message user">/stampede "Neon Grid"</div>
+ <div class="chat-message agent">STAMPEDE ENGAGED. 3D RENDER QUEUE: 7 ITEMS. PLEASE WAIT.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="PLEASE INSERT COMMAND">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>PREVIEW</h2>
+ <p>TOKEN PREVIEW: 3D RENDER NOT AVAILABLE. PLEASE INSERT FEE.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>PAPER</h2>
+ <p>PAPER FEED JAMMED. PLEASE EJECT AND REINSERT.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>FIGMA</h2>
+ <p>FIGMA INTEGRATION: OFFLINE. PLEASE CHECK CONNECTION.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>CANVA</h2>
+ <p>CANVA TOKEN EXPIRED. PLEASE REDEEM.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/046-hospital-vitals.html b/mockups/046-hospital-vitals.html
new file mode 100644
index 0000000..75b134a
--- /dev/null
+++ b/mockups/046-hospital-vitals.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>hospital-vital-signs — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DSEG7Modern&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #0a0a0a;
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #1a1a1a;
+ color: #39ff14;
+ font-family: 'DSEG7Modern', monospace;
+ font-size: 24px;
+ letter-spacing: 2px;
+ }
+ header select {
+ padding: 8px 12px;
+ background: #0a0a0a;
+ color: #fff;
+ border: 1px solid #39ff14;
+ border-radius: 4px;
+ font-family: 'Inter', sans-serif;
+ }
+ header .status {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: #39ff14;
+ margin-left: 16px;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ background-color: #1a1a1a;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 16px;
+ }
+ .message {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+ .message.user {
+ align-self: flex-end;
+ }
+ .message.agent {
+ align-self: flex-start;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ background: #0a0a0a;
+ color: #fff;
+ border: 1px solid #39ff14;
+ border-radius: 4px;
+ font-family: 'Inter', sans-serif;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 16px;
+ padding: 24px;
+ background-color: #0a0a0a;
+ }
+ .panel {
+ background-color: #1a1a1a;
+ border: 1px solid #39ff14;
+ border-radius: 6px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ .panel h3 {
+ margin: 0;
+ font-family: 'DSEG7Modern', monospace;
+ font-size: 16px;
+ color: #ffeb3b;
+ }
+ .panel p {
+ margin: 0;
+ font-size: 14px;
+ color: #fff;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project Neon Pulse</option>
+ <option>Project Vitalis</option>
+ <option>Project BioSync</option>
+ </select>
+ <div class="status"></div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div>/run-topic "Neon Pulse Design Sprint"</div>
+ </div>
+ <div class="message agent">
+ <div>Topic initiated. Monitoring vital signs: BP 120/80, HR 72, RR 16.</div>
+ </div>
+ <div class="message user">
+ <div>/stampede "BioSync UI Overhaul"</div>
+ </div>
+ <div class="message agent">
+ <div>Stampede mode activated. All systems on red alert. Preparing for high-intensity design surge.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message...">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h3>Preview</h3>
+ <p>Current design mockup: BP 120/80 interface prototype. Heart rate monitor UI in development. Respiratory rate tracking module pending.</p>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <p>Whiteboard session: Sketches of neon pulse layout. Vital signs dashboard wireframes. Color palette: #39ff14, #ff5252, #ffeb3b.</p>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <p>Figma file: 'Neon Pulse Design System'. Components: Vital signs indicators, alert banners, status circles. Last synced: 12 minutes ago.</p>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <p>Canva template: 'BioSync Presentation Deck'. Slides: Project overview, design sprint timeline, team vitals. Last updated: 3 hours ago.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/047-telegram-channel.html b/mockups/047-telegram-channel.html
new file mode 100644
index 0000000..a72c46b
--- /dev/null
+++ b/mockups/047-telegram-channel.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>telegram-bot-channel — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Roboto+Mono&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto Mono', monospace; }
+ body { background: #212d3b; color: #ffffff; font-size: 14px; display: flex; flex-direction: column; height: 900px; }
+ header { display: flex; align-items: center; padding: 16px 24px; background: #16202a; border-bottom: 1px solid #9aa0b5; }
+ header h1 { font-family: 'Inter', sans-serif; font-weight: 600; color: #0088cc; margin-right: auto; }
+ .project-picker { margin-right: 24px; }
+ .project-picker select { background: #16202a; color: #ffffff; border: 1px solid #9aa0b5; padding: 6px 12px; border-radius: 4px; }
+ .status-indicator { display: flex; align-items: center; font-size: 12px; }
+ .status-indicator svg { width: 12px; height: 12px; margin-right: 6px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .chat-pane { width: 40%; border-right: 1px solid #9aa0b5; overflow-y: auto; padding: 16px; }
+ .chat-log { display: flex; flex-direction: column; gap: 12px; }
+ .message { display: flex; flex-direction: column; }
+ .message-header { font-size: 12px; color: #9aa0b5; margin-bottom: 4px; }
+ .message-content { background: #16202a; padding: 12px; border-radius: 6px; }
+ .slash-command { color: #0088cc; }
+ .chat-input { margin-top: 16px; display: flex; }
+ .chat-input input { flex: 1; padding: 8px 12px; border: 1px solid #9aa0b5; border-radius: 4px; }
+ .chat-input button { background: #0088cc; color: #ffffff; border: none; padding: 8px 16px; margin-left: 8px; border-radius: 4px; }
+ .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
+ .panel { background: #16202a; border: 1px solid #9aa0b5; border-radius: 6px; padding: 16px; }
+ .panel-header { font-family: 'Inter', sans-serif; font-weight: 600; color: #0088cc; margin-bottom: 12px; }
+ .panel-body { color: #9aa0b5; }
+ .panel-body code { color: #0088cc; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Four Horsemen Studio</h1>
+ <div class="project-picker">
+ <select>
+ <option value="project1">Project: Neon Horizon</option>
+ <option value="project2">Project: Echoes of Mars</option>
+ <option value="project3">Project: Quantum Canvas</option>
+ </select>
+ </div>
+ <div class="status-indicator">
+ <svg viewBox="0 0 12 12" fill="currentColor"><circle cx="6" cy="6" r="4" /></svg>
+ <span>idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message">
+ <div class="message-header">@designbot 10:23</div>
+ <div class="message-content">/run-topic "Neon Horizon UI Redesign"</div>
+ </div>
+ <div class="message">
+ <div class="message-header">@studio 10:24</div>
+ <div class="message-content">Initiating topic: <span class="slash-command">/run-topic</span> "Neon Horizon UI Redesign"</div>
+ </div>
+ <div class="message">
+ <div class="message-header">@designbot 10:25</div>
+ <div class="message-content">/stampede 3 variants for hero section</div>
+ </div>
+ <div class="message">
+ <div class="message-header">@studio 10:26</div>
+ <div class="message-content">Processing <span class="slash-command">/stampede</span> request: 3 variants for hero section</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <p>Live preview of <code>/run-topic</code> "Neon Horizon UI Redesign" will appear here. Current state: draft mode.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <p>Sketches from <code>/stampede</code> request: 3 variants for hero section. Current focus: variant #2 with floating CTAs.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <p>Link to Figma file: <code>figma.design/horsemens-neon</code>. Last synced: 10:26 AM. Status: 73% complete.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <p>Canva template for social media posts. Current version: v2.3. Last update: 10:24 AM by @designbot.</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/048-morse-code.html b/mockups/048-morse-code.html
new file mode 100644
index 0000000..0ec0eb3
--- /dev/null
+++ b/mockups/048-morse-code.html
@@ -0,0 +1,211 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>morse-code-key — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #0a0a0a;
+ --primary: #ffd700;
+ --accent: #a83232;
+ --secondary: #3a3a3a;
+ --surface: #fbf6e9;
+ --font-mono: 'IBM Plex Mono', monospace;
+ --font-body: 'Inter', sans-serif;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--primary); }
+ body { display: flex; flex-direction: column; }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 2rem;
+ background: var(--secondary);
+ color: var(--primary);
+ font-family: var(--font-mono);
+ font-size: 1.5rem;
+ border-bottom: 1px solid var(--primary);
+ }
+ header select {
+ padding: 0.5rem;
+ background: var(--surface);
+ color: var(--accent);
+ border: none;
+ font-family: var(--font-body);
+ font-weight: 600;
+ }
+ header .status {
+ padding: 0.5rem 1rem;
+ background: var(--surface);
+ color: var(--accent);
+ border-radius: 4px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ }
+ .container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--primary);
+ background: var(--surface);
+ color: var(--accent);
+ font-family: var(--font-body);
+ }
+ .chat-log {
+ flex: 1;
+ padding: 1rem;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .chat-message {
+ background: var(--bg);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-message .timestamp {
+ font-size: 0.75rem;
+ color: var(--secondary);
+ margin-bottom: 0.25rem;
+ }
+ .chat-message .content {
+ font-family: var(--font-mono);
+ font-size: 1rem;
+ }
+ .chat-input {
+ display: flex;
+ padding: 0.5rem 1rem;
+ background: var(--surface);
+ border-top: 1px solid var(--primary);
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.5rem;
+ border: none;
+ background: var(--bg);
+ color: var(--primary);
+ font-family: var(--font-body);
+ }
+ .chat-input button {
+ padding: 0.5rem 1rem;
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ font-family: var(--font-mono);
+ font-weight: bold;
+ margin-left: 0.5rem;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 1rem;
+ padding: 1rem;
+ background: var(--bg);
+ color: var(--primary);
+ }
+ .panel {
+ display: flex;
+ flex-direction: column;
+ background: var(--surface);
+ color: var(--accent);
+ border: 1px solid var(--primary);
+ border-radius: 4px;
+ overflow: hidden;
+ }
+ .panel-header {
+ padding: 0.75rem;
+ font-family: var(--font-mono);
+ font-weight: bold;
+ background: var(--secondary);
+ color: var(--primary);
+ }
+ .panel-body {
+ flex: 1;
+ padding: 1rem;
+ font-family: var(--font-body);
+ font-size: 0.9rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg);
+ color: var(--accent);
+ }
+ .panel-body::before {
+ content: '···— —··· ··—·';
+ font-family: var(--font-mono);
+ font-size: 1.2rem;
+ opacity: 0.3;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <div>
+ <select>
+ <option>Hormuz Protocol</option>
+ <option>Stampede Alpha</option>
+ <option>Cipher X</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="container">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message">
+ <div class="timestamp">09:22</div>
+ <div class="content">/run-topic ···— —··· ··—·</div>
+ </div>
+ <div class="chat-message">
+ <div class="timestamp">09:23</div>
+ <div class="content">[system] Initiating thematic resonance: ··—· —··· ·—··</div>
+ </div>
+ <div class="chat-message">
+ <div class="timestamp">09:24</div>
+ <div class="content">/stampede ·—·· ···— ·—··</div>
+ </div>
+ <div class="chat-message">
+ <div class="timestamp">09:25</div>
+ <div class="content">[system] Stampede mode activated. ···— —··· ·—··</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="·—·· ···— —···">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">···— —··· ·—··</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">··—· —··· ·—··</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">··—· ·—·· ·—··</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">—··· ·—·· ·—··</div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/049-lighthouse-log.html b/mockups/049-lighthouse-log.html
new file mode 100644
index 0000000..9a225f5
--- /dev/null
+++ b/mockups/049-lighthouse-log.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>lighthouse-keepers-log — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Source+Serif+Pro:wght@400&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Source Serif Pro', serif;
+ background-color: #fdfaf0;
+ color: #0e2a47;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ }
+ body {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: linear-gradient(to right, #1c4966, #0e2a47);
+ color: #fdfaf0;
+ font-family: 'Crimson Pro', serif;
+ font-size: 1.5rem;
+ position: relative;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: #bf3922;
+ }
+ .brand {
+ font-weight: 700;
+ }
+ .project-picker {
+ padding: 8px 16px;
+ background: #7fb069;
+ border: 1px solid #bf3922;
+ border-radius: 4px;
+ color: #0e2a47;
+ font-size: 0.9rem;
+ }
+ .status {
+ padding: 6px 12px;
+ background: #7fb069;
+ border: 1px solid #bf3922;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ }
+ .container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background: #fdfaf0;
+ border-right: 1px solid #1c4966;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ padding: 24px;
+ overflow-y: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .chat-message {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message.system {
+ align-self: flex-start;
+ }
+ .chat-input {
+ padding: 16px;
+ border-top: 1px solid #1c4966;
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 1rem;
+ border: 1px solid #bf3922;
+ border-radius: 4px;
+ background: #fdfaf0;
+ color: #0e2a47;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background: #7fb069;
+ border: 1px solid #bf3922;
+ border-radius: 4px;
+ color: #0e2a47;
+ font-weight: 600;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 16px;
+ padding: 24px;
+ }
+ .panel {
+ background: #0e2a47;
+ color: #fdfaf0;
+ padding: 20px;
+ border: 1px solid #7fb069;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .panel-header {
+ font-family: 'Crimson Pro', serif;
+ font-size: 1.2rem;
+ color: #bf3922;
+ }
+ .panel-content {
+ font-size: 0.95rem;
+ line-height: 1.4;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN</div>
+ <div>
+ <select class="project-picker">
+ <option value="1">Coastal Beacon Redesign</option>
+ <option value="2">Mist-Shrouded Logo</option>
+ <option value="3">Tide-Whispering UI</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message system">
+ <div>⚠️ lighthouse-keepers-log: topic /run-topic "tide patterns" initiated</div>
+ <div class="timestamp">17:42</div>
+ </div>
+ <div class="chat-message user">
+ <div>/stampede generate 3 variations of the beacon silhouette</div>
+ <div class="timestamp">17:43</div>
+ </div>
+ <div class="chat-message system">
+ <div>🌊 generating... the fog is thick, but the beacon holds</div>
+ <div class="timestamp">17:44</div>
+ </div>
+ <div class="chat-message user">
+ <div>/run-topic "nautical typography"</div>
+ <div class="timestamp">17:45</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="whisper to the log...">
+ <button>⏎</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <svg width="100%" height="100%" viewBox="0 0 100 100">
+ <rect width="100" height="100" fill="#1c4966"/>
+ <circle cx="50" cy="50" r="20" fill="#7fb069"/>
+ <path d="M20 20 L80 80 M20 80 L80 20" stroke="#bf3922" stroke-width="2"/>
+ </svg>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ <div>📝 rough sketch: beacon silhouette</div>
+ <div>• 3 variations requested</div>
+ <div>• focus on negative space between light and fog</div>
+ <div>• ink splatters in the margins</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ <div>draft: "tide-etched" icon set</div>
+ <div>• 12 icons in progress</div>
+ <div>• style: weathered brass, kerosene stains</div>
+ <div>• layers: 32</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ <div>mock-up: "lighthouse-keepers-log" poster</div>
+ <div>• background: gradient from dusk to kerosene</div>
+ <div>• typography: Crimson Pro, 48pt</div>
+ <div>• placeholder: "the fog is a veil, not an obstacle"</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/050-circus-broadside.html b/mockups/050-circus-broadside.html
new file mode 100644
index 0000000..6a4fa75
--- /dev/null
+++ b/mockups/050-circus-broadside.html
@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>circus-broadside-1920 — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Source+Sans+Pro:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Source Sans Pro', sans-serif;
+ background-color: #fdfaf0;
+ color: #1a1a1a;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background: #0a4d3c;
+ color: #ffd700;
+ font-size: 24px;
+ font-weight: 600;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ }
+ header h1 {
+ font-family: 'Bungee Inline', cursive;
+ font-size: 32px;
+ color: #a83232;
+ }
+ .project-picker, .status {
+ font-family: 'Source Sans Pro', sans-serif;
+ font-size: 16px;
+ background: #ffd700;
+ color: #0a4d3c;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .status {
+ background: #a83232;
+ color: #fdfaf0;
+ }
+ main {
+ display: flex;
+ height: calc(100% - 60px);
+ margin-top: 60px;
+ }
+ .chat-pane {
+ width: 40%;
+ padding: 40px;
+ background: #fdfaf0;
+ overflow-y: auto;
+ border-right: 2px solid #0a4d3c;
+ }
+ .chat-log {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ height: 100%;
+ }
+ .message {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ .user {
+ color: #a83232;
+ font-weight: 600;
+ }
+ .system {
+ color: #0a4d3c;
+ font-style: italic;
+ }
+ .input-bar {
+ margin-top: 20px;
+ display: flex;
+ gap: 10px;
+ }
+ .input-bar input {
+ flex: 1;
+ padding: 10px;
+ font-size: 16px;
+ border: 2px solid #ffd700;
+ border-radius: 4px;
+ }
+ .input-bar button {
+ padding: 10px 20px;
+ background: #a83232;
+ color: #fdfaf0;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 20px;
+ padding: 40px;
+ }
+ .panel {
+ background: #ffd700;
+ color: #0a4d3c;
+ border: 2px solid #a83232;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ overflow: hidden;
+ }
+ .panel h2 {
+ font-family: 'Bungee Inline', cursive;
+ font-size: 24px;
+ margin-bottom: 20px;
+ color: #a83232;
+ }
+ .panel-content {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ font-weight: 600;
+ text-align: center;
+ background: #fdfaf0;
+ border: 1px solid #0a4d3c;
+ padding: 20px;
+ }
+ .panel-content::before {
+ content: '';
+ display: block;
+ height: 100px;
+ width: 100px;
+ background: #0a4d3c;
+ margin: 0 auto 20px;
+ border-radius: 50%;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <div class="project-picker">PROJECT: <span>THE RED HORSE</span></div>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message">
+ <div class="user">AGENT</div>
+ <div class="system">/run-topic "the great stampede of 1920"</div>
+ </div>
+ <div class="message">
+ <div class="user">SYSTEM</div>
+ <div class="system">Initiating thematic resonance with circus broadsides of the golden age. Expect clowns, fire, and a very confused elephant.</div>
+ </div>
+ <div class="message">
+ <div class="user">AGENT</div>
+ <div class="system">/stampede "velvet ropes" "shattered glass"</div>
+ </div>
+ <div class="message">
+ <div class="user">SYSTEM</div>
+ <div class="system">Stampede protocol engaged. Generating chaos with velvet ropes and shattered glass. Proceed with caution, dear user.</div>
+ </div>
+ </div>
+ <div class="input-bar">
+ <input type="text" placeholder="type /help for commands">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>PREVIEW</h2>
+ <div class="panel-content">A GIGANTIC CIRCUS POSTER IN BOLD REDS AND GOLD, FEATURING A HORSE WITH A HUMAN FACE, STANDING ON A ROLLERCOASTER, WITH THE WORDS "STEP RIGHT UP" IN BUNGEE FONT.</div>
+ </div>
+ <div class="panel">
+ <h2>PAPER</h2>
+ <div class="panel-content">ACT ONE: THE ENTRANCE OF THE RED HORSE. THE CROWD GASPS AS THE HORSE, WILD AND UNLEASHED, STOMPED ACROSS THE STAGE, ITS EYES BURNING WITH THE FIRE OF A THOUSAND SUNS.</div>
+ </div>
+ <div class="panel">
+ <h2>FIGMA</h2>
+ <div class="panel-content">LAYERED DESIGN WITH A CIRCUS LOGO (A HORSE IN A CAGE), STANDS IN GOLD, AND A BACKDROP OF A STORMY SKY. TEXT: "RIDE THE STORM" IN BUNGEE FONT.</div>
+ </div>
+ <div class="panel">
+ <h2>CANVA</h2>
+ <div class="panel-content">A COLLAGE OF A CLOWN SMILING, A TIGER ROARING, AND A FLYING TRAPEZE ARTIST. TEXT: "RIDE THE STORM" IN GOLD, "THE GREAT HORSEMAN" IN RED.</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/051-samurai-scroll.html b/mockups/051-samurai-scroll.html
new file mode 100644
index 0000000..b527664
--- /dev/null
+++ b/mockups/051-samurai-scroll.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>samurai-honor-scroll — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Cormorant+Garamond:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ body {
+ background: #fff8e7;
+ color: #1a1a1a;
+ font-family: 'Cormorant Garamond', serif;
+ height: 900px;
+ width: 1440px;
+ margin: 0 auto;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ header {
+ background: #3a4a2c;
+ color: #fff8e7;
+ padding: 16px 32px;
+ font-family: 'Noto Serif JP', serif;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ z-index: 100;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: #7a1f1a;
+ }
+ .project-picker, .status {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 14px;
+ }
+ .project-picker {
+ background: #ddd5c2;
+ padding: 4px 8px;
+ border-radius: 4px;
+ margin-left: 16px;
+ }
+ .status {
+ background: #fff8e7;
+ padding: 4px 8px;
+ border: 1px solid #7a1f1a;
+ border-radius: 4px;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #fff8e7;
+ border-right: 1px solid #ddd5c2;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 16px;
+ overflow-y: auto;
+ background: #fff8e7;
+ }
+ .chat-message {
+ margin: 12px 0;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message.system {
+ align-self: flex-start;
+ }
+ .chat-message::before {
+ content: attr(data-role);
+ font-size: 12px;
+ color: #7a1f1a;
+ margin-bottom: 4px;
+ }
+ .chat-input {
+ padding: 16px;
+ border-top: 1px solid #ddd5c2;
+ display: flex;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 14px;
+ border: 1px solid #ddd5c2;
+ border-radius: 4px;
+ }
+ .chat-input button {
+ margin-left: 8px;
+ padding: 8px 16px;
+ background: #7a1f1a;
+ color: #fff8e7;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 16px;
+ padding: 16px;
+ }
+ .panel {
+ background: #fff8e7;
+ border: 1px solid #ddd5c2;
+ border-radius: 8px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ background: #3a4a2c;
+ color: #fff8e7;
+ padding: 12px 16px;
+ font-family: 'Noto Serif JP', serif;
+ font-size: 18px;
+ text-align: center;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 14px;
+ color: #1a1a1a;
+ }
+ .panel-body::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, transparent 25%, #ddd5c2 25%, #ddd5c2 75%, transparent 75%);
+ pointer-events: none;
+ z-index: 0;
+ }
+ .panel-body::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at 30% 30%, #7a1f1a 10%, transparent 10%);
+ pointer-events: none;
+ z-index: 0;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>Four Horsemen / HORMUZ</span>
+ <div>
+ <div class="project-picker">Select Project ▼</div>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user" data-role="User:">
+ /run-topic: "The scroll of unbroken lineage"
+ </div>
+ <div class="chat-message system" data-role="System:">
+ Topic initiated. Ink flows like the first snow of winter.
+ </div>
+ <div class="chat-message user" data-role="User:">
+ /stampede: "Unleash the ink upon the paper"
+ </div>
+ <div class="chat-message system" data-role="System:">
+ Stampede engaged. The brush trembles with the weight of a thousand years.
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Speak with the honor of the blade">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <svg width="100%" height="100%" viewBox="0 0 200 200">
+ <path d="M10 10 L190 10 L190 190 L10 190 Z" fill="#fff8e7" stroke="#7a1f1a" stroke-width="4"/>
+ <text x="100" y="100" font-family="Noto Serif JP" font-size="24" fill="#1a1a1a" text-anchor="middle" dominant-baseline="middle">無垢</text>
+ </svg>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <div style="position: relative;">
+ <div style="width: 100px; height: 100px; background: #ddd5c2; margin: 0 auto;"></div>
+ <div style="position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #3a4a2c;">「The ink does not lie」</div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div style="width: 80px; height: 80px; background: #7a1f1a; border-radius: 50%; border: 4px solid #fff8e7; display: flex; align-items: center; justify-content: center;">
+ <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff8e7">
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-5 5z"/>
+ </svg>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <div style="display: flex; flex-direction: column; align-items: center;">
+ <div style="width: 60px; height: 60px; background: #3a4a2c; border-radius: 8px; margin-bottom: 12px;"></div>
+ <div style="font-size: 12px; color: #7a1f1a;">「The scroll is eternal」</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/052-egyptian-tomb.html b/mockups/052-egyptian-tomb.html
new file mode 100644
index 0000000..d580d4a
--- /dev/null
+++ b/mockups/052-egyptian-tomb.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>egyptian-tomb-fresco — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin:0; padding:0; font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #3a2515 0%, #d4b896 100%); color: #0e3a5f; height: 100%; width: 100%; }
+ body { display: flex; flex-direction: column; font-size: 16px; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #3a2515; color: #d4b896; font-family: 'Cinzel', serif; }
+ header h1 { font-size: 28px; }
+ .project-picker { background: #fff8e0; border: 2px solid #bf3922; padding: 6px 12px; border-radius: 4px; }
+ .status-indicator { padding: 6px 12px; background: #bf3922; color: #fff8e0; border-radius: 4px; }
+ main { display: flex; flex:1; overflow: hidden; }
+ .chat-pane { width: 40%; border-right: 2px solid #d4b896; padding: 20px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 16px; }
+ .message { background: #fff8e0; padding: 12px 16px; border-left: 4px solid #bf3922; border-radius: 4px; }
+ .input-bar { margin-top: 20px; display: flex; }
+ .input-bar input { flex:1; padding: 10px; font-size: 14px; }
+ .input-bar button { padding: 10px 20px; margin-left: 10px; background: #d4b896; color: #3a2515; border: none; border-radius: 4px; }
+ .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
+ .panel { background: #fff8e0; padding: 20px; border: 2px solid #d4b896; border-radius: 6px; }
+ .panel h2 { margin-top: 0; font-family: 'Cinzel', serif; color: #bf3922; }
+ .panel p { font-size: 14px; color: #0e3a5f; }
+ @media (max-width: 1440px) { body { font-size: 15px; } }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN OF THE SUN</h1>
+ <div>
+ <select class="project-picker">
+ <option>Pyramid of the Unseen</option>
+ <option>Valley of the Shattered Sceptre</option>
+ <option>Temple of the Double Crown</option>
+ </select>
+ <span class="status-indicator">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message">/run-topic: "The scribe-of-the-house requests a new chamber for the Book of the Dead"</div>
+ <div class="message">[System] Initiating ritual... Aligning glyphs with the constellations of Ra's chariot</div>
+ <div class="message">/stampede: "Carve the names of the 42 judges into the inner sanctum"</div>
+ <div class="message">[System] Stampede engaged. Obsidian chisels now carving hieroglyphs of judgment</div>
+ </div>
+ <div class="input-bar">
+ <input type="text" placeholder="Speak to the overseer...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>The walls shimmer with the glow of the Eye of Horus. Shadows of the underworld dance in the fresco, their forms shifting like the sands of the Nile. A cartouche bearing the name "Hormuz" is etched in gold leaf.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Scrolls of papyrus lie unfurled on the stone table. Notes in the hand of the scribe: "The sarcophagus must be aligned with the cardinal points. The jackal guardian's eyes must be inlaid with lapis lazuli."</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>Vector paths trace the contours of a falcon's wing, the symbol of Ra. The design board shows layers: base (sandstone), mid (gold leaf), top (lapis lazuli). A compass rose points to the rising sun.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>The color palette is set: ochre for the desert, indigo for the night sky, crimson for the blood of the pharaoh. A grid of 36 squares represents the 360 days of the Egyptian calendar, each square a different shade of the tomb's fresco.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/053-bauhaus-school.html b/mockups/053-bauhaus-school.html
new file mode 100644
index 0000000..6e54910
--- /dev/null
+++ b/mockups/053-bauhaus-school.html
@@ -0,0 +1,251 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>bauhaus-school — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bayon&display=swap">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 1440px;
+ height: 900px;
+ font-family: 'Inter', sans-serif;
+ background-color: #fdfaf3;
+ color: #000000;
+ display: flex;
+ flex-direction: column;
+ }
+ header {
+ height: 60px;
+ background-color: #0e3a5f;
+ color: #fdfaf3;
+ display: flex;
+ align-items: center;
+ padding: 0 24px;
+ font-family: 'Bayon', serif;
+ font-size: 24px;
+ position: relative;
+ }
+ header select {
+ position: absolute;
+ right: 80px;
+ background: transparent;
+ border: none;
+ color: #fdfaf3;
+ font-size: 16px;
+ padding: 4px 8px;
+ cursor: pointer;
+ }
+ header .status {
+ position: absolute;
+ right: 24px;
+ padding: 4px 12px;
+ background: #fcd13e;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+ main {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid #a83232;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ padding: 16px;
+ background: #fdfaf3;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .chat-message {
+ display: flex;
+ gap: 12px;
+ }
+ .chat-message.user {
+ align-items: flex-end;
+ }
+ .chat-message.system {
+ align-items: flex-start;
+ }
+ .chat-message .text {
+ background: #0e3a5f;
+ color: #fdfaf3;
+ padding: 8px 12px;
+ border-radius: 8px;
+ max-width: 60%;
+ }
+ .chat-input {
+ padding: 12px;
+ border-top: 1px solid #a83232;
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 14px;
+ border: none;
+ outline: none;
+ background: #fdfaf3;
+ }
+ .chat-input button {
+ background: #0e3a5f;
+ color: #fdfaf3;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .workspace {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background: #fdfaf3;
+ border: 1px solid #a83232;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ padding: 12px;
+ font-weight: 600;
+ background: #0e3a5f;
+ color: #fdfaf3;
+ border-bottom: 1px solid #a83232;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: #000000;
+ }
+ .panel-body svg {
+ width: 100%;
+ max-width: 200px;
+ }
+ .panel-body .grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 8px;
+ height: 100%;
+ }
+ .panel-body .grid div {
+ background: #0e3a5f;
+ border-radius: 4px;
+ }
+ .panel-body .sketch {
+ border: 1px dashed #a83232;
+ padding: 12px;
+ }
+ .panel-body .component {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+ .panel-body .component div {
+ background: #0e3a5f;
+ padding: 8px 12px;
+ border-radius: 4px;
+ color: #fdfaf3;
+ }
+ .panel-body .layout {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ }
+ .panel-body .layout div {
+ flex: 1 1 200px;
+ background: #0e3a5f;
+ padding: 12px;
+ border-radius: 4px;
+ color: #fdfaf3;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ FOUR HORSEMEN STUDIO
+ <select>
+ <option>Project Neon</option>
+ <option>Hormuz Protocol</option>
+ <option>Klee's Grid</option>
+ </select>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic: generative grid systems</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Executing topic: generative grid systems. Initializing Dessau module.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede: 3</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Stampede mode engaged. Generating 3 variants. Estimated duration: 12s.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="command or text">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="workspace">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <svg viewBox="0 0 100 100">
+ <rect x="10" y="10" width="80" height="80" fill="#0e3a5f" stroke="#a83232" stroke-width="2"/>
+ <circle cx="50" cy="50" r="20" fill="#fcd13e"/>
+ <line x1="10" y1="10" x2="90" y2="90" stroke="#a83232" stroke-width="2"/>
+ </svg>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body sketch">
+ <div>• 3x3 modular grid</div>
+ <div>• 12pt baseline</div>
+ <div>• 2:3:2 column ratios</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body component">
+ <div>Base Typography</div>
+ <div>Grid System</div>
+ <div>Color Palette</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body layout">
+ <div>Hero Section</div>
+ <div>Call to Action</div>
+ <div>Footer</div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/054-art-deco-elevator.html b/mockups/054-art-deco-elevator.html
new file mode 100644
index 0000000..4af1431
--- /dev/null
+++ b/mockups/054-art-deco-elevator.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>art-deco-elevator-panel — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Limelight&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ body {
+ background-color: #0a0a0a;
+ color: #fdfaf3;
+ font-family: 'Inter', sans-serif;
+ height: 900px;
+ width: 1440px;
+ margin: 0 auto;
+ overflow-x: hidden;
+ }
+ header {
+ background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
+ padding: 20px 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 2px solid #d4af37;
+ position: relative;
+ }
+ header h1 {
+ font-family: 'Limelight', cursive;
+ font-size: 2.5em;
+ color: #d4af37;
+ text-shadow: 1px 1px 2px #0a0a0a;
+ }
+ header .project-picker {
+ background: #1a1a1a;
+ border: 1px solid #d4af37;
+ border-radius: 8px;
+ padding: 8px 16px;
+ color: #fdfaf3;
+ font-size: 1em;
+ cursor: pointer;
+ position: relative;
+ }
+ header .project-picker::after {
+ content: '▼';
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #d4af37;
+ }
+ header .status {
+ background: #d4af37;
+ color: #0a0a0a;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-weight: 600;
+ font-size: 0.9em;
+ text-transform: uppercase;
+ }
+ .container {
+ display: flex;
+ height: calc(900px - 80px);
+ }
+ .left-pane {
+ width: 40%;
+ background: #1a1a1a;
+ border-right: 2px solid #3a3a3a;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+ .chat-message {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message.system {
+ align-self: flex-start;
+ }
+ .chat-message .text {
+ background: #3a3a3a;
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 0.95em;
+ }
+ .chat-input {
+ margin-top: 20px;
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ background: #3a3a3a;
+ border: 1px solid #d4af37;
+ border-radius: 6px;
+ color: #fdfaf3;
+ }
+ .chat-input button {
+ background: #d4af37;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 6px;
+ color: #0a0a0a;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ padding: 20px;
+ }
+ .sub-panel {
+ background: #1a1a1a;
+ border: 1px solid #3a3a3a;
+ border-radius: 8px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+ .sub-panel h2 {
+ font-family: 'Limelight', cursive;
+ color: #d4af37;
+ font-size: 1.2em;
+ text-shadow: 1px 1px 2px #0a0a0a;
+ }
+ .sub-panel .content {
+ font-size: 0.95em;
+ color: #fdfaf3;
+ line-height: 1.4;
+ }
+ .sub-panel .content::before {
+ content: "• ";
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <span class="project-picker">SELECT PROJECT ▼</span>
+ <span class="status">IDLE</span>
+ </div>
+ </header>
+ <div class="container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic: Cyberpunk Aesthetics</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">TOPIC EXECUTED: INITIATING RENDERING OF NEON-LIT FUTURISTIC INTERIORS</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede: Generate 5 variants of the executive lounge</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">STAMPEDE ACTIVATED: 5 VARIANTS IN PROGRESS – EXPECT 45 SECONDS FOR INITIAL PREVIEWS</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message..." />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>PREVIEW</h2>
+ <div class="content">CURRENT PREVIEW: 3D MODEL OF THE EXECUTIVE LOBBY – RENDERING IN PROGRESS. DETAIL: LUXURIOUS MARBLE FLOORS WITH EMBOSSED GOLD ACCENTS.</div>
+ </div>
+ <div class="sub-panel">
+ <h2>PAPER</h2>
+ <div class="content">PAPER PROTOTYPE: CONCEPT SKETCHES FOR THE MEZZANINE LEVEL – INK AND PENCIL. NOTE: EXPLORE 1920s ART-DECO INFLUENCES WITH MODERN FUNCTIONALITY.</div>
+ </div>
+ <div class="sub-panel">
+ <h2>FIGMA</h2>
+ <div class="content">FIGMA FILE: LAYERED UI FOR THE STAMPED PANE – 80% COMPLETE. CURRENT FOCUS: ANIMATING THE ELEVATOR PANEL TRANSITIONS WITH SMOOTH SCROLLING.</div>
+ </div>
+ <div class="sub-panel">
+ <h2>CANVA</h2>
+ <div class="content">CANVA TEMPLATE: SOCIAL MEDIA GRAPHIC FOR FLOOR 14 LAUNCH – PLACEHOLDER TEXT AND COLORS. TARGET AUDIENCE: HIGH-END CLIENTS SEEKING LUXURY EXPERIENCES.</div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/055-russian-constructivist.html b/mockups/055-russian-constructivist.html
new file mode 100644
index 0000000..9b1b6da
--- /dev/null
+++ b/mockups/055-russian-constructivist.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>russian-constructivist — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Inter&display=swap">
+ <style>
+ html,body{margin:0;padding:0;min-height:100%;background:#fdfaf3;font-family:Inter, sans-serif;color:#1a1a1a}
+ *{box-sizing:border-box}
+ body{display:flex;flex-direction:column;overflow-x:hidden}
+ header{display:flex;align-items:center;justify-content:space-between;padding:24px 48px;background:#a83232;color:#fdfaf3;font-family:Bungee Inline, cursive}
+ header h1{font-size:2.5rem;margin:0}
+ header select{padding:8px 16px;background:#fcd13e;border:none;border-radius:4px;font-size:1rem}
+ header .status{display:flex;align-items:center;font-size:1rem}
+ .status span{margin-left:16px}
+ .main{display:flex;flex:1}
+ .left-pane{width:40%;padding:24px;background:#fdfaf3;overflow-y:auto}
+ .chat-log{max-height:calc(100% - 80px)}
+ .chat-message{margin:16px 0;padding:12px 16px;background:#fdfaf3;border:2px solid #a83232;border-radius:4px}
+ .chat-message.user{background:#fcd13e}
+ .chat-input{position:fixed;bottom:0;left:0;width:40%;padding:16px;display:flex}
+ .chat-input input{flex:1;padding:8px 12px;border:2px solid #a83232;border-radius:4px;margin-right:8px}
+ .chat-input button{padding:8px 16px;background:#a83232;color:#fdfaf3;border:none;border-radius:4px;font-weight:bold}
+ .right-pane{width:60%;display:flex;flex-direction:column}
+ .sub-panels{flex:1;display:flex;flex-wrap:wrap;padding:24px}
+ .panel{flex:1 1 48%;min-width:48%;margin:12px;background:#fdfaf3;border:2px solid #a83232;border-radius:4px;overflow:hidden;position:relative}
+ .panel-header{padding:16px;background:#a83232;color:#fdfaf3;text-align:center;font-weight:bold}
+ .panel-body{padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center}
+ .panel-body svg{width:100%;max-width:300px}
+ .panel-body .diagonal{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#fcd13e 25%,transparent 25%,transparent 75%,#fcd13e 75%,#fcd13e 100%)}
+ .panel-body .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+ .panel-body .worker{width:100%;display:flex;align-items:center;font-size:1.2rem}
+ .panel-body .worker svg{width:48px;margin-right:16px}
+ .panel-body .text{font-size:1.1rem;line-height:1.4}
+ .panel-body .stampede{position:relative}
+ .panel-body .stampede::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:#a83232}
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <select>
+ <option>Project Red</option>
+ <option>Project Blue</option>
+ <option>Project Green</option>
+ </select>
+ <div class="status"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="#fdfaf3"/><path d="M10 6L6 10" stroke="#a83232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>idle</span></div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic: "Constructivist typography in industrial design"</div>
+ <div class="chat-message">[SYSTEM] Initiating stampede mode. Workers mobilized. Diagonals activated.</div>
+ <div class="chat-message user">/stampede: "Generate 3 variants for the poster"</div>
+ <div class="chat-message">[SYSTEM] Variant 1: Bold red text on white with black diagonals. Variant 2: Yellow block letters with geometric overlays. Variant 3: Monochrome grid with red accents.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type command...">
+ <button>/</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="200" height="200" fill="#fdfaf3"/>
+ <text x="100" y="100" font-family="Inter" font-size="48" fill="#a83232" text-anchor="middle" dominant-baseline="middle" transform="rotate(45 100 100)">FOUR</text>
+ </svg>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <div class="grid">
+ <div class="worker"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="#a83232"/></svg>Worker 1: Cutting</div>
+ <div class="worker"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Worker 2: Assembling</div>
+ <div class="worker"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Worker 3: Painting</div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <div class="diagonal"></div>
+ <div class="stampede">
+ <div class="text">DIAGONAL LAYOUT</div>
+ <div class="text">GEOMETRIC OVERLAYS</div>
+ <div class="text">RED ACCENTS</div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <div class="grid">
+ <div><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Block 1: Text</div>
+ <div><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6l-6-4h10v10z" fill="#a83232"/></svg>Block 2: Image</div>
+ <div><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" fill="#a83232"/></svg>Block 3: Grid</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/056-monastery-illuminated.html b/mockups/056-monastery-illuminated.html
new file mode 100644
index 0000000..b44e384
--- /dev/null
+++ b/mockups/056-monastery-illuminated.html
@@ -0,0 +1,236 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>monastery-illuminated — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ background: #fff8e7;
+ font-family: 'Inter', sans-serif;
+ color: #1a0e00;
+ overflow-x: hidden;
+ }
+ body::before {
+ content: '';
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background: linear-gradient(110deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.1) 100%);
+ z-index: -1;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 3rem;
+ background: #1a0e00;
+ color: #fff8e7;
+ font-family: 'UnifrakturCook', serif;
+ font-size: 2rem;
+ position: relative;
+ z-index: 10;
+ }
+ header::after {
+ content: '☧';
+ position: absolute;
+ right: 2rem;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 1.2rem;
+ color: #d4af37;
+ }
+ .project-picker {
+ position: relative;
+ margin-left: 2rem;
+ }
+ .project-picker select {
+ padding: 0.5rem 1rem;
+ background: #fff8e7;
+ color: #1a0e00;
+ border: 2px solid #a83232;
+ border-radius: 4px;
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ }
+ .status-indicator {
+ padding: 0.5rem 1rem;
+ background: #0a4d3c;
+ color: #fff8e7;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ }
+ .container {
+ display: flex;
+ height: calc(100% - 60px);
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid #d4af37;
+ overflow-y: auto;
+ padding: 2rem;
+ background: #fff8e7;
+ }
+ .chat-log {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+ .message {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .message-header {
+ font-size: 0.85rem;
+ color: #a83232;
+ }
+ .message-body {
+ background: #fff8e7;
+ border: 1px solid #d4af37;
+ padding: 1rem;
+ border-radius: 4px;
+ font-size: 1rem;
+ }
+ .chat-input {
+ margin-top: 2rem;
+ display: flex;
+ gap: 1rem;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.75rem;
+ font-size: 1rem;
+ border: 2px solid #a83232;
+ border-radius: 4px;
+ }
+ .chat-input button {
+ padding: 0.75rem 1.5rem;
+ background: #d4af37;
+ color: #1a0e00;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 2rem;
+ padding: 2rem;
+ }
+ .panel {
+ background: #fff8e7;
+ border: 1px solid #a83232;
+ border-radius: 4px;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+ .panel-header {
+ font-family: 'UnifrakturCook', serif;
+ font-size: 1.5rem;
+ color: #1a0e00;
+ text-align: center;
+ position: relative;
+ }
+ .panel-header::after {
+ content: '☧';
+ position: absolute;
+ right: -10px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 1rem;
+ color: #d4af37;
+ }
+ .panel-content {
+ font-size: 0.95rem;
+ line-height: 1.6;
+ color: #1a0e00;
+ }
+ .panel-content code {
+ background: #0a4d3c;
+ color: #fff8e7;
+ padding: 0.2rem 0.4rem;
+ border-radius: 3px;
+ font-family: monospace;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN</div>
+ <div class="project-picker">
+ <select>
+ <option>Sanctum of the Unwritten</option>
+ <option>Chalice of the Red Queen</option>
+ <option>Parchment of the Unseen</option>
+ </select>
+ </div>
+ <div class="status-indicator">idle</div>
+ </header>
+ <div class="container">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message">
+ <div class="message-header">[12:34] USER</div>
+ <div class="message-body">/run-topic: "illumination of the celestial script"</div>
+ </div>
+ <div class="message">
+ <div class="message-header">[12:35] ORCHESTRATOR</div>
+ <div class="message-body">Engaging sanctum protocols. Aethereal quills activated. Expect radiant calligraphy.</div>
+ </div>
+ <div class="message">
+ <div class="message-header">[12:36] USER</div>
+ <div class="message-body">/stampede: "golden ink"</div>
+ </div>
+ <div class="message">
+ <div class="message-header">[12:37] ORCHESTRATOR</div>
+ <div class="message-body">Stampede initiated. 1000 golden ink droplets in flight. Calculating optimal vellum trajectories.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="command or text">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <p>Behold the radiant script: <code>☧</code> shall be inscribed in gold upon the vellum of the cosmos. The quills of the celestial scribes are poised, their nibs gilded with the light of the first dawn.</p>
+ <p>Observe the interplay of <code>#d4af37</code> and <code>#0a4d3c</code> in the sacred geometry of the illumination.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ <p>Raw vellum awaits the touch of the quill. The parchment is prepared from the hides of the sacred oxen, stretched and smoothed by the hands of the scribes.</p>
+ <p>Notes: "Avoid the use of iron gall ink; the vellum shall not be stained. Use only the light of the moon and the gold of the sun."</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ <p>Mockup of the illuminated manuscript: a 12th-century style codex with gilded edges and marginalia of celestial beings. The central illumination depicts the four horsemen in their eternal gallop.</p>
+ <p>Layer notes: "Apply texture of aged vellum. Use #1a0e00 for ink, #d4af37 for gold leaf."</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ <p>Template for the modern scribe: a digital vellum with placeholder text fields and a gold leaf overlay. Includes a dropdown for selecting the sacred script font.</p>
+ <p>Instructions: "Select 'UnifrakturCook' for headings, 'Inter' for body text. Apply a parchment texture filter."</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/057-shipping-manifest.html b/mockups/057-shipping-manifest.html
new file mode 100644
index 0000000..91dc3bf
--- /dev/null
+++ b/mockups/057-shipping-manifest.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>shipping-manifest-port — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ html, body { height: 100%; font-family: 'IBM Plex Mono', monospace; background: #fdfaf0; color: #1a1a1a; }
+ body { display: flex; flex-direction: column; font-size: 14px; }
+ header { height: 60px; display: flex; align-items: center; padding: 0 24px; background: #1a1a1a; color: #fdfaf0; }
+ header h1 { font-family: 'Special Elite', cursive; font-size: 24px; }
+ header select { margin-left: auto; padding: 8px 12px; border: 1px solid #3a3a3a; background: #0e3a5f; color: #fdfaf0; }
+ header span { margin-left: 24px; padding: 4px 8px; border: 1px solid #7a5c3e; border-radius: 4px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; display: flex; flex-direction: column; border-right: 1px solid #3a3a3a; }
+ .chat-log { flex: 1; overflow-y: auto; padding: 16px; background: #fdfaf0; }
+ .chat-message { margin-bottom: 12px; }
+ .chat-message.user { text-align: right; }
+ .chat-message.system { text-align: left; }
+ .chat-message pre { background: #0e3a5f; color: #fdfaf0; padding: 4px 8px; border-radius: 4px; }
+ .chat-input { padding: 8px 16px; display: flex; }
+ .chat-input input { flex: 1; padding: 4px 8px; border: 1px solid #3a3a3a; }
+ .chat-input button { margin-left: 8px; padding: 4px 12px; background: #0e3a5f; color: #fdfaf0; border: none; }
+ .right-pane { width: 60%; display: flex; flex-wrap: wrap; }
+ .panel { flex: 1 1 50%; padding: 16px; border: 1px solid #3a3a3a; margin: 8px; background: #fdfaf0; }
+ .panel h2 { font-family: 'Special Elite', cursive; margin-bottom: 8px; }
+ .panel pre { font-size: 12px; color: #3a3a3a; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <select>
+ <option>Project Rotterdam</option>
+ <option>Hormuz Export</option>
+ <option>Cargo Nexus</option>
+ </select>
+ <span>idle</span>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <pre>/run-topic "Container Inspection"</pre>
+ </div>
+ <div class="chat-message system">
+ <pre>FOB Rotterdam: Initiating manifest scan for cargo hold 7B. Stowage plan validated. No anomalies detected.</pre>
+ </div>
+ <div class="chat-message user">
+ <pre>/stampede "Port Security Drill"</pre>
+ </div>
+ <div class="chat-message system">
+ <pre>Simulating port lockdown protocol. All containers tagged with RFID markers. Estimated duration: 45 minutes.</pre>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="FOB Rotterdam terminal #7">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <pre>
+┌───────────────────────┐
+│ Container ID: 7B-456 │
+│ Status: Sealed │
+│ Weight: 12.3 tons │
+└───────────────────────┘
+ </pre>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <pre>
+BILL OF LADING #H789
+PORT OF ORIGIN: ROTTERDAM
+PORT OF DISCHARGE: ANTWERP
+CARGO: 500 UNITS OF PRECISION INSTRUMENTS
+STOWAGE PLAN: 7B-456, 8A-123
+ </pre>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <pre>
+[Design Mockup: Container Inspection UI]
+• Thermal imaging overlay
+• RFID tag scanner interface
+• Real-time weight distribution graph
+• Port security alert system
+ </pre>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <pre>
+[Marketing Collage]
+"Secure your cargo with Four Horsemen's
+end-to-end container tracking.
+FOB Rotterdam to global ports."
+[SVG ship icon here]
+ </pre>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/058-stadium-scoreboard.html b/mockups/058-stadium-scoreboard.html
new file mode 100644
index 0000000..7ffdb05
--- /dev/null
+++ b/mockups/058-stadium-scoreboard.html
@@ -0,0 +1,249 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>stadium-scoreboard — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DSEG14+Modern:wght@400&family=Inter:wght@400;600&display=swap" />
+ <style>
+ :root {
+ --bg: #0a0a0a;
+ --primary: #39ff14;
+ --accent1: #ff5252;
+ --accent2: #ffeb3b;
+ --text: #ffffff;
+ --border: #1a1a1a;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Inter', sans-serif;
+ color: var(--text);
+ background: var(--bg);
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background: linear-gradient(90deg, var(--accent2), var(--primary));
+ color: var(--bg);
+ font-family: 'DSEG14 Modern', monospace;
+ font-size: 24px;
+ position: relative;
+ z-index: 1;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: var(--accent1);
+ }
+ .project-picker {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px;
+ }
+ .project-picker select {
+ background: var(--bg);
+ color: var(--text);
+ border: 1px solid var(--border);
+ padding: 5px 10px;
+ font-family: 'Inter', sans-serif;
+ }
+ .status {
+ font-size: 14px;
+ padding: 4px 12px;
+ background: var(--accent1);
+ border-radius: 4px;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .chat-messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 20px;
+ }
+ .message {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ }
+ .message.user {
+ justify-content: flex-end;
+ }
+ .message-content {
+ background: var(--primary);
+ color: var(--bg);
+ padding: 10px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 14px;
+ }
+ .message-system {
+ background: var(--accent2);
+ color: var(--bg);
+ flex: 1;
+ padding: 10px 16px;
+ border-radius: 8px;
+ font-size: 14px;
+ }
+ .chat-input {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ border: 1px solid var(--border);
+ background: var(--bg);
+ color: var(--text);
+ font-size: 14px;
+ }
+ .chat-input button {
+ background: var(--primary);
+ color: var(--bg);
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: var(--bg);
+ border: 1px solid var(--border);
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+ .panel-header {
+ font-family: 'DSEG14 Modern', monospace;
+ font-size: 20px;
+ color: var(--primary);
+ }
+ .panel-content {
+ font-size: 14px;
+ color: #ccc;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+ .panel-content div {
+ padding: 4px 8px;
+ background: var(--accent2);
+ border-radius: 4px;
+ font-family: monospace;
+ }
+ .panel-content p {
+ font-family: 'Inter', sans-serif;
+ color: #aaa;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN</div>
+ <div class="project-picker">
+ <select>
+ <option value="1">HORMUZ</option>
+ <option value="2">NEON SPECTRUM</option>
+ <option value="3">VOID RITUAL</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message user">
+ <div class="message-content">/run-topic "Cyberpunk Aesthetics"</div>
+ </div>
+ <div class="message system">
+ <div class="message-content">TOPIC ENGAGED: GENERATING 3D NEON SIGNAGE PROTOTYPE</div>
+ </div>
+ <div class="message user">
+ <div class="message-content">/stampede 5</div>
+ </div>
+ <div class="message system">
+ <div class="message-content">STAMPEDE INITIATED: 5 AGENTS IN MOTION</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type /help for commands" />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-content">
+ <div>🎯 LIVE FEED: NEON SIGNAGE PROTOTYPE</div>
+ <div>✨ 76% COMPLETION</div>
+ <div>⏱️ EST. 2:14 Q4</div>
+ <p>AGENT 3: RENDERING CYBERPUNK TEXTURE LAYER 2</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-content">
+ <div>📄 DRAFT 1.2: "GLOWING VAPORWAVE LOGO"</div>
+ <div>🖋️ STAMPED BY AGENT 5</div>
+ <div>⚠️ NEEDS 2 MORE STAMPEDES</div>
+ <p>HOME 21 · AWAY 17 · TIME-OUT</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-content">
+ <div>🖼️ COMPONENT: "NEON BUTTON"</div>
+ <div>🎨 3 VARIANTS IN PROGRESS</div>
+ <div>🔄 AUTO-SYNCING TO AGENT 2</div>
+ <p>AGENT 2: EXPORTING SVG TO PREVIEW</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-content">
+ <div>🖌️ LAYOUT: "HYPERSPACE POSTER"</div>
+ <div>📊 4 LAYERS COMPLETED</div>
+ <div>🔥 AGENT 4: APPLYING GLITCH EFFECTS</div>
+ <p>TIME-OUT · HOME 21 · AWAY 17</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/059-field-naturalist.html b/mockups/059-field-naturalist.html
new file mode 100644
index 0000000..b67aa85
--- /dev/null
+++ b/mockups/059-field-naturalist.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>field-naturalist-journal — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Crimson+Pro:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #fbf6e9;
+ --primary: #1a0e00;
+ --support1: #3a4a2c;
+ --support2: #7a5c3e;
+ --accent: #a83232;
+ }
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Crimson Pro', serif;
+ }
+ body {
+ background: var(--bg);
+ color: var(--primary);
+ height: 900px;
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+ }
+ header {
+ height: 60px;
+ background: var(--support1);
+ display: flex;
+ align-items: center;
+ padding: 0 24px;
+ position: relative;
+ border-bottom: 2px solid var(--support2);
+ }
+ header h1 {
+ font-family: 'Caveat', cursive;
+ font-size: 24px;
+ margin-right: 24px;
+ }
+ .project-picker, .status {
+ font-size: 14px;
+ color: var(--accent);
+ position: absolute;
+ right: 24px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .status::after {
+ content: "idle";
+ margin-left: 8px;
+ border: 1px solid var(--accent);
+ padding: 2px 6px;
+ border-radius: 4px;
+ }
+ main {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background: var(--bg);
+ border-right: 1px solid var(--support2);
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ background: var(--bg);
+ border-right: 1px solid var(--support2);
+ }
+ .chat-message {
+ margin-bottom: 16px;
+ }
+ .chat-message.user {
+ text-align: right;
+ }
+ .chat-message.user::before {
+ content: "you:";
+ color: var(--accent);
+ margin-right: 8px;
+ }
+ .chat-message.system {
+ text-align: left;
+ }
+ .chat-message.system::before {
+ content: "orchestrator:";
+ color: var(--primary);
+ margin-right: 8px;
+ }
+ .chat-input {
+ display: flex;
+ padding: 12px 24px;
+ border-top: 1px solid var(--support2);
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 14px;
+ border: none;
+ outline: none;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ margin-left: 8px;
+ background: var(--support2);
+ color: var(--bg);
+ border: none;
+ cursor: pointer;
+ font-weight: 600;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background: var(--bg);
+ border: 1px solid var(--support2);
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel h2 {
+ font-family: 'Caveat', cursive;
+ font-size: 18px;
+ margin-bottom: 12px;
+ color: var(--primary);
+ }
+ .panel-content {
+ flex: 1;
+ background: #fff8f0;
+ padding: 12px;
+ border: 1px solid var(--support1);
+ border-radius: 4px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--support1);
+ }
+ .panel-content::before {
+ content: "•";
+ color: var(--accent);
+ margin-right: 8px;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div class="project-picker">Projects ▼</div>
+ <div class="status">▶</div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message system">/run-topic "the anatomy of a whispering inkwell"</div>
+ <div class="chat-message user">/stampede 3</div>
+ <div class="chat-message system">Observing the migration patterns of the ink-stained quill... 3 agents deployed.</div>
+ <div class="chat-message system">Note: Figma layer 'Sketch of a wandering inkwell' requires 1200px width.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type /help for commands">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <div class="panel-content">A parchment-like texture with faint watercolor stains. The quill's nib appears to be made of a rare species of reed, possibly from the delta regions.</div>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <div class="panel-content">Material notes: 80% cotton, 20% hemp. Stains fade with age. The ink is iron gall, which may cause slight discoloration over time.</div>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <div class="panel-content">Layer 'Sketch of a wandering inkwell' – 3 layers, 1200px width. Includes a 100px margin for the quill's flight path.</div>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <div class="panel-content">Template 'Field Journal Spread' – 2 columns, 16pt baseline grid. Includes a placeholder for a pressed leaf specimen.</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/060-garden-seed-packet.html b/mockups/060-garden-seed-packet.html
new file mode 100644
index 0000000..d2365be
--- /dev/null
+++ b/mockups/060-garden-seed-packet.html
@@ -0,0 +1,172 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>garden-seed-packet — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Source+Sans+Pro:wght@400&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Source Sans Pro', sans-serif;
+ background: #fbf6e9;
+ color: #3a4a2c;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 32px;
+ background: #fbf6e9;
+ border-bottom: 2px solid #a83232;
+ font-family: 'Crimson Pro', serif;
+ font-size: 24px;
+ }
+ header select {
+ padding: 8px 12px;
+ font-size: 14px;
+ border: 1px solid #9b7a3e;
+ border-radius: 4px;
+ background: #fbf6e9;
+ color: #3a4a2c;
+ }
+ header .status {
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 12px;
+ background: #7fb069;
+ color: #3a4a2c;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid #9b7a3e;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ background: #fbf6e9;
+ font-size: 14px;
+ line-height: 1.5;
+ }
+ .chat-log .message {
+ margin: 12px 0;
+ }
+ .chat-log .user {
+ color: #a83232;
+ }
+ .chat-log .system {
+ color: #3a4a2c;
+ }
+ .chat-input {
+ padding: 16px;
+ border-top: 1px solid #9b7a3e;
+ display: flex;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ font-size: 14px;
+ border: 1px solid #9b7a3e;
+ border-radius: 4px;
+ background: #fbf6e9;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background: #fbf6e9;
+ border: 2px solid #9b7a3e;
+ border-radius: 6px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Crimson Pro', serif;
+ font-size: 18px;
+ margin-bottom: 16px;
+ color: #3a4a2c;
+ }
+ .panel-content {
+ font-size: 14px;
+ line-height: 1.6;
+ color: #3a4a2c;
+ }
+ .panel-content code {
+ color: #a83232;
+ }
+ .panel-content .note {
+ color: #7fb069;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select>
+ <option>Project Root</option>
+ <option>Bloom Protocol</option>
+ <option>Soil Matrix</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message"><span class="user">user</span>: /run-topic "germination rituals"</div>
+ <div class="message"><span class="system">system</span>: topic initiated — sowing 1/4 deep, 7 days to germ, full sun required</div>
+ <div class="message"><span class="user">user</span>: /stampede "seedling symphony"</div>
+ <div class="message"><span class="system">system</span>: stampede mode activated — 32 stems sprouting in 4x4 grid, pH 6.5 soil recommended</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="sow your command here...">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <p>Mockup of seed packet design: <code>germination rituals</code> in bold serif, with a hand-drawn leaf motif. Color swatches: #7fb069 (stem), #a83232 (seed).</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ <p>Notes: <code>soil pH 6.5</code> for optimal growth. Sow 1/4 deep, water sparingly. Days to germ: 7–10 under full sun.</p>
+ <p class="note">*Avoid overwatering — roots may drown in excess.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ <p>Design board: 4x4 grid of seedlings, each with unique leaf patterns. Mockup of a seed packet with embossed text: <code>germination rituals</code>.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ <p>Template: "Seedling Symphony" with 32 stems arranged in a spiral. Color palette: #fbf6e9 (background), #3a4a2c (text), #9b7a3e (accent).</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/061-menu-prix-fixe.html b/mockups/061-menu-prix-fixe.html
new file mode 100644
index 0000000..874df29
--- /dev/null
+++ b/mockups/061-menu-prix-fixe.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>menu-prix-fixe — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #fff8e7; color: #1a1a1a; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #1a1a1a; color: #fff8e7; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
+ header .project-picker { background: #ddd5c2; padding: 6px 12px; border-radius: 4px; font-size: 0.9rem; }
+ header .status { padding: 6px 12px; background: #a83232; color: #fff8e7; border-radius: 4px; font-size: 0.9rem; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; background: #fff8e7; padding: 30px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 15px; }
+ .chat-message { display: flex; flex-direction: column; }
+ .chat-message.user { align-self: flex-end; }
+ .chat-message.user::before { content: "User:"; color: #7a5c3e; margin-bottom: 5px; }
+ .chat-message.agent::before { content: "Agent:"; color: #a83232; margin-bottom: 5px; }
+ .chat-input { margin-top: 30px; display: flex; }
+ .chat-input input { flex: 1; padding: 10px; font-size: 1rem; }
+ .chat-input button { padding: 10px 20px; background: #1a1a1a; color: #fff8e7; border: none; margin-left: 10px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px; }
+ .sub-panel { background: #fff8e7; border: 1px solid #ddd5c2; padding: 20px; }
+ .sub-panel h3 { color: #7a5c3e; margin-bottom: 15px; font-family: 'Cormorant Garamond', serif; }
+ .sub-panel p { font-size: 0.95rem; color: #1a1a1a; }
+ .sub-panel .preview { background: linear-gradient(to right, #fff8e7, #ddd5c2); padding: 20px; }
+ .sub-panel .paper { background: #fff8e7; }
+ .sub-panel .figma { background: #fff8e7; }
+ .sub-panel .canva { background: #fff8e7; }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN</div>
+ <div>
+ <select class="project-picker">
+ <option>Project Mirage</option>
+ <option>Project Nocturne</option>
+ <option>Project Horizon</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div>/run-topic "Typography Exploration"</div>
+ </div>
+ <div class="chat-message agent">
+ <div>Initiating topic: Typography Exploration. Fetching assets from the vault...</div>
+ </div>
+ <div class="chat-message user">
+ <div>/stampede "Icon Set 2024"</div>
+ </div>
+ <div class="chat-message agent">
+ <div>Stampede engaged. Generating 12 icons in the style of Art Deco. Estimated completion: 3 minutes.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message..." />
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h3>Preview</h3>
+ <div class="preview">
+ <p>Current design state: <strong>Typography Exploration</strong> (active). Next phase: Icon Set 2024 (queued).</p>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <h3>Paper</h3>
+ <p>
+ <strong>Typography Notes:</strong><br>
+ "Avoid over-ornamentation. Let the type breathe. Use #7a5c3e as a secondary accent in headers."
+ </p>
+ </div>
+ <div class="sub-panel">
+ <h3>Figma</h3>
+ <p>
+ <strong>Components:</strong><br>
+ - Button (primary: #a83232, hover: #ddd5c2)<br>
+ - Card (background: #fff8e7, border: #ddd5c2)<br>
+ - Typography (Cormorant Garamond, 1.2rem)
+ </p>
+ </div>
+ <div class="sub-panel">
+ <h3>Canva</h3>
+ <p>
+ <strong>Template:</strong> "Market Price" (v1.2).<br>
+ Includes: 3 placeholder images, 2 text blocks, and a gradient background.
+ </p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/062-tattoo-flash.html b/mockups/062-tattoo-flash.html
new file mode 100644
index 0000000..7196afb
--- /dev/null
+++ b/mockups/062-tattoo-flash.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>tattoo-flash-sheet — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Limelight&family=Inter&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin:0; padding:0; font-family: 'Inter', sans-serif; background: #fbf6e9; color: #1a1a1a; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a1a1a; color: #fcd13e; font-family: 'Limelight', cursive; font-size: 24px; }
+ header .status { padding: 8px 16px; background: #a83232; border-radius: 4px; color: #fff; }
+ .container { display: flex; flex:1; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #0e2a47; padding: 24px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 12px; }
+ .message { padding: 12px 16px; background: #0e2a47; border-radius: 4px; color: #fff; }
+ .message.user { background: #a83232; }
+ .chat-input { margin-top: 24px; display: flex; }
+ .chat-input input { flex:1; padding: 12px; font-size: 14px; }
+ .chat-input button { padding: 12px 24px; background: #fcd13e; color: #1a1a1a; border: none; border-radius: 4px; }
+ .right-pane { width: 60%; display: flex; flex-direction: column; }
+ .sub-panels { flex:1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
+ .panel { background: #1a1a1a; color: #fcd13e; padding: 24px; border: 2px solid #a83232; border-radius: 8px; }
+ .panel h3 { margin:0 0 16px; font-family: 'Limelight', cursive; font-size: 18px; }
+ .panel-content { font-size: 14px; line-height: 1.5; }
+ .panel-content code { color: #fcd13e; }
+ .project-picker { position: relative; }
+ .project-picker select { padding: 8px 32px 8px 12px; background: #0e2a47; color: #fff; border: none; border-radius: 4px; }
+ .project-picker::after { content: '▼'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #fcd13e; }
+ </style>
+</head>
+<body>
+ <header>
+ <div>FOUR HORSEMEN STUDIO</div>
+ <div class="project-picker">
+ <select>
+ <option>Ironclad Ink</option>
+ <option>Shadow Veil</option>
+ <option>Razor's Edge</option>
+ </select>
+ </div>
+ <div class="status">IDLE</div>
+ </header>
+ <div class="container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: Blood and Thunder</div>
+ <div class="message">AGENT: <span style="color:#fcd13e;">STAMPING</span> VORTEX OF BLOOD ON A <span style="color:#a83232;">SKULL</span> — 30% DONE</div>
+ <div class="message user">/stampede: RAZORED WINGS</div>
+ <div class="message">AGENT: <span style="color:#fcd13e;">STAMPED</span> 12 VAMPIRE WINGS IN <span style="color:#0e2a47;">INK</span> — 100% DONE</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /help for commands">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panels">
+ <div class="panel">
+ <h3>PREVIEW</h3>
+ <div class="panel-content">
+ <div style="position: relative; width: 100%; height: 150px; background: #0e2a47; border: 2px dashed #fcd13e; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Limelight', cursive; font-size: 24px; color: #a83232;">TATTOO DRAFT</div>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>PAPER</h3>
+ <div class="panel-content">
+ <pre style="background: #0e2a47; padding: 12px; border-radius: 4px; font-size: 12px; line-height: 1.2; color: #fcd13e;">
+// SCRAPE FROM THE DEPTHS
+// BLOOD: #a83232
+// SKIN: #fbf6e9
+// INK: #0e2a47
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>FIGMA</h3>
+ <div class="panel-content">
+ <div style="display: flex; align-items: center; justify-content: center; height: 150px; background: #0e2a47; border: 2px dashed #fcd13e; border-radius: 4px;">
+ <svg width="100" height="100" viewBox="0 0 100 100" style="fill: #fcd13e;">
+ <circle cx="50" cy="50" r="40" />
+ <path d="M 50 10 L 90 50 L 50 90 L 10 50 Z" />
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <h3>CANVA</h3>
+ <div class="panel-content">
+ <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; height: 150px; background: #0e2a47; border: 2px dashed #fcd13e; border-radius: 4px;">
+ <div style="flex:1 1 45px; padding: 8px; background: #a83232; color: #fff; text-align: center; font-size: 12px;">BLOOD</div>
+ <div style="flex:1 1 45px; padding: 8px; background: #fcd13e; color: #0e2a47; text-align: center; font-size: 12px;">INK</div>
+ <div style="flex:1 1 45px; padding: 8px; background: #0e2a47; color: #fcd13e; text-align: center; font-size: 12px;">SKIN</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/063-skateboard-deck.html b/mockups/063-skateboard-deck.html
new file mode 100644
index 0000000..7c4fe09
--- /dev/null
+++ b/mockups/063-skateboard-deck.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>skateboard-graphic — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #1a0033; color: #fff; height: 100%; width: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: #0d0019; border-bottom: 2px solid #ff2a78; }
+ header h1 { font-family: 'Bungee Outline', cursive; font-size: 1.8rem; color: #ff2a78; }
+ .project-picker { padding: 0.5rem 1rem; background: #7fffd4; border: 2px solid #ffe066; border-radius: 5px; }
+ .status-pill { padding: 0.4rem 1rem; background: #1a0033; border: 2px solid #ff2a78; border-radius: 20px; font-size: 0.9rem; }
+ .main { display: flex; flex: 1; overflow: hidden; }
+ .chat-pane { width: 40%; display: flex; flex-direction: column; padding: 2rem; background: #0d0019; border-right: 2px solid #ff2a78; }
+ .chat-log { flex: 1; overflow-y: auto; margin-bottom: 1rem; }
+ .chat-message { margin: 1rem 0; }
+ .chat-message.user { text-align: right; }
+ .chat-message.agent { text-align: left; }
+ .chat-input { display: flex; }
+ .chat-input input { flex: 1; padding: 0.75rem; font-size: 1rem; border: none; border-radius: 5px; }
+ .chat-input button { padding: 0.75rem 1.5rem; background: #ff2a78; border: none; color: #fff; font-weight: bold; border-radius: 5px; margin-left: 0.5rem; }
+ .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 2rem; }
+ .panel { background: #1a0033; border: 2px solid #ff2a78; border-radius: 10px; padding: 1.5rem; }
+ .panel h2 { font-family: 'Bungee Outline', cursive; font-size: 1.4rem; color: #ff2a78; margin-bottom: 1rem; }
+ .panel p { font-size: 1rem; color: #7fffd4; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <div class="project-picker">Projects ▼<br><small>Skate Park Overhaul • Thrasher Logo Revamp • Street Art Stampede</small></div>
+ <div class="status-pill">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic "street art"</div>
+ <div class="chat-message agent">Grindin' on that mural, boss. Let's drop some spray paint and make it pop.</div>
+ <div class="chat-message user">/stampede "neon gradients"</div>
+ <div class="chat-message agent">Riding the glow, chief. We're hitin' the pavement with a rainbow of chaos.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command..." />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>Skateboard decks with graffiti splatter. Hit the ramp, catch some air, and leave your mark. No rules, just rails and rebellion.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Hand-drawn layouts of skatepark obstacles. Sharpie lines, X-Acto precision, and a touch of chaos. Burn the blueprint, ride the sketch.</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>Digital mockups of skateboard graphics. Layers, vectors, and a whole lot of neon. Make it shine, make it scream.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>Template-based designs for stickers and t-shirts. Bold fonts, bright colors, and a dash of rebellion. Print it, wear it, break it.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/064-rave-flyer-1996.html b/mockups/064-rave-flyer-1996.html
new file mode 100644
index 0000000..43095bc
--- /dev/null
+++ b/mockups/064-rave-flyer-1996.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>rave-flyer-1996 — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: #000000; color: #ff00ff; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #1a1a1a; color: #ffff00; font-family: 'VT323', monospace; }
+ header h1 { font-size: 24px; }
+ .project-picker { padding: 8px 16px; background: #00ffff; border: 2px solid #ff00ff; border-radius: 4px; color: #000000; }
+ .status-indicator { width: 12px; height: 12px; border-radius: 50%; background: #ff00ff; margin-left: 10px; }
+ main { display: flex; flex: 1; }
+ .left-pane { width: 40%; padding: 20px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 10px; }
+ .message { padding: 10px 15px; background: #000000; border: 1px solid #ffff00; border-radius: 6px; }
+ .message.user { background: #1a1a1a; }
+ .input-bar { margin-top: 20px; display: flex; }
+ .input-bar input { flex: 1; padding: 10px; font-size: 16px; border: 2px solid #ff00ff; border-radius: 6px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
+ .panel { background: #000000; border: 2px solid #ff00ff; border-radius: 8px; padding: 20px; }
+ .panel h2 { margin: 0 0 15px; font-family: 'VT323', monospace; color: #ff00ff; }
+ .panel-body { font-size: 14px; }
+ .panel-body code { color: #ffff00; }
+ .panel-body pre { background: #1a1a1a; padding: 10px; border: 1px solid #00ffff; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <select class="project-picker">
+ <option>Neon Pulse</option>
+ <option>Synthwave 2024</option>
+ <option>Rave 6AM</option>
+ </select>
+ <div class="status-indicator"></div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic "synthwave nostalgia"</div>
+ <div class="message">Topic set. Let's get retro. 🎶</div>
+ <div class="message user">/stampede "neon chaos"</div>
+ <div class="message">Initiating stampede mode. Let the chaos flow. 🔥</div>
+ </div>
+ <div class="input-bar">
+ <input type="text" placeholder="Type /run-topic or /stampede...">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>PREVIEW</h2>
+ <div class="panel-body">
+ <p>Currently rendering: <code>synthwave nostalgia</code></p>
+ <p>Visuals: Glitching neon grids at <code>128 BPM</code></p>
+ <pre>
+|---\\---|---\\---|
+| / | / |
+|---\\---|---\\---|
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>PAPER</h2>
+ <div class="panel-body">
+ <p><strong>FLYER DRAFT:</strong></p>
+ <p>🔥 <code>NEON PULSE</code> 🔥</p>
+ <p><code>128 BPM • 6AM • SYNTHWAVE</code></p>
+ <p>⚠️ Stampede mode: 30% chaos, 70% euphoria</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>FIGMA</h2>
+ <div class="panel-body">
+ <p>Designing: <code>Glitching UI</code> (43% complete)</p>
+ <p>Elements: 3D neon text, animated waveforms, <code>00ffff</code> gradients</p>
+ <p>Layer count: <code>17</code> (warning: this is getting <code>unstable</code>)</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>CANVA</h2>
+ <div class="panel-body">
+ <p>Template: <code>"Rave 6AM" Flyer</code></p>
+ <p>Drag and drop: <code>neon shapes</code>, <code>synthwave fonts</code>, <code>glitch effects</code></p>
+ <p>Export ready: <code>YES</code> (but only if you promise to play <code>128 BPM</code>)</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/065-punk-zine-1980.html b/mockups/065-punk-zine-1980.html
new file mode 100644
index 0000000..db943b2
--- /dev/null
+++ b/mockups/065-punk-zine-1980.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>punk-zine-cut-paste — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter&display=swap">
+ <style>
+ html, body {margin:0;padding:0;min-height:100vh;font-family:Inter,sans-serif;background:#fbf6e9;color:#1a1a1a}
+ body {display:flex;flex-direction:column}
+ header {display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#1a1a1a;color:#fbf6e9;font-family:Special Elite,serif}
+ header select {padding:0.5rem;background:#3a3a3a;border:none;border-radius:3px;color:#fbf6e9}
+ header .status {padding:0.5rem 1rem;background:#a83232;border-radius:5px;font-size:0.8rem}
+ main {display:flex;flex:1;overflow:hidden}
+ .left-pane {width:40%;padding:2rem;background:#3a3a3a;overflow-y:auto}
+ .chat-log {max-height:80vh}
+ .chat-message {margin:1rem 0;padding:0.5rem 1rem;background:#666666;border-radius:5px;word-break:break-word}
+ .chat-input {position:fixed;bottom:0;left:0;width:40%;padding:1rem;background:#3a3a3a}
+ .chat-input input {width:100%;padding:0.5rem;border:none;border-radius:3px}
+ .right-pane {width:60%;display:flex;flex-wrap:wrap}
+ .sub-panel {width:48%;margin:1%;padding:2rem;background:#1a1a1a;color:#fbf6e9;font-family:Inter,sans-serif}
+ .sub-panel h2 {margin-top:0;font-size:1.2rem;margin-bottom:1rem}
+ .sub-panel .content {font-size:0.9rem;line-height:1.4}
+ .sub-panel .content pre {background:#fbf6e9;padding:1rem;border-radius:3px;overflow-x:auto}
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <div>
+ <select>
+ <option>Project Neon Wires</option>
+ <option>Project Static Pulse</option>
+ <option>Project Analog Frenzy</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message">/run-topic: Cyberpunk 2077</div>
+ <div class="chat-message">AGENT: Stampede initiated: glitching the matrix, baby. 3D-printing chaos into the void.</div>
+ <div class="chat-message">/stampede: 1984 meets the internet of things</div>
+ <div class="chat-message">AGENT: Overloading the neural net with scissors and duct tape. 404 ERROR: no coherence found.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /help for chaos">
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>Preview</h2>
+ <div class="content">
+ <pre>┌───────────────┐
+│ 404 ERROR │
+│ NO COHERENCE│
+└───────────────┘
+ </pre>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <h2>Paper</h2>
+ <div class="content">
+ <p>ROUGH DRAFT: "The Future is Glitchy" — a zine about AI that dreams in xeroxed paper. Includes 3 pages of scribbled code, a torn-out newspaper clipping about 2001: A Space Odyssey, and a collage of cat photos from the 90s.</p>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <h2>Figma</h2>
+ <div class="content">
+ <p>FILE: "Neon Wires Mockup.fig" — layers named "Glitch Layer 1", "Scissors Tool", "Duct Tape Texture", "Ransom Note Font". 173 open layers. Last saved: 3:17 AM. Warning: may contain sentient paperclips.</p>
+ </div>
+ </div>
+ <div class="sub-panel">
+ <h2>Canva</h2>
+ <div class="content">
+ <p>COLLAGE: "Digital Punk Zine" — 12 images pasted in, including a screenshot of a broken website, a photo of a cat wearing a gas mask, and a hand-drawn diagram of a neural network made of sticky notes. Text: "WARNING: THIS ZINE MAY CAUSE UNAUTHORIZED INVENTIONS."</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/066-magazine-editorial.html b/mockups/066-magazine-editorial.html
new file mode 100644
index 0000000..49247ae
--- /dev/null
+++ b/mockups/066-magazine-editorial.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>magazine-editorial — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Serif+Pro:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Source Serif Pro', serif; background: #fdfaf3; color: #1a1a1a; height: 100%; }
+ body { display: flex; flex-direction: column; font-size: 16px; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: #1a1a1a; color: #ddd5c2; font-family: 'Playfair Display', serif; }
+ header h1 { margin: 0; font-size: 24px; }
+ header .project-picker { background: #ddd5c2; padding: 6px 12px; border-radius: 4px; font-size: 14px; }
+ header .status { padding: 6px 12px; border-radius: 20px; background: #a83232; color: #fff; font-size: 14px; }
+ main { display: flex; flex: 1; }
+ .left-pane { width: 40%; border-right: 1px solid #666666; overflow-y: auto; padding: 30px; }
+ .chat-log { display: flex; flex-direction: column; gap: 15px; }
+ .chat-message { display: flex; flex-direction: column; }
+ .user { align-self: flex-end; text-align: right; }
+ .system { align-self: flex-start; text-align: left; }
+ .chat-input { margin-top: 20px; display: flex; }
+ .chat-input input { flex: 1; padding: 10px; font-size: 14px; }
+ .chat-input button { padding: 10px 20px; background: #a83232; color: #fff; border: none; margin-left: 10px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px; }
+ .panel { background: #fff; border: 1px solid #ddd5c2; border-radius: 6px; padding: 20px; }
+ .panel h2 { margin: 0 0 15px; font-family: 'Playfair Display', serif; font-size: 18px; color: #a83232; }
+ .panel p { margin: 0; font-size: 14px; color: #666666; }
+ @media (max-width: 1440px) { body { font-size: 15px; } }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <div>
+ <select class="project-picker">
+ <option>Project: Vol. XII</option>
+ <option>Project: HORMUZ</option>
+ <option>Project: The Last Interview</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div>/run-topic: Fashion in the Age of Algorithms</div>
+ </div>
+ <div class="chat-message system">
+ <div>Initiating topic synthesis. Please wait while the editorial team curates perspectives from 2024's most provocative fashion theorists.</div>
+ </div>
+ <div class="chat-message user">
+ <div>/stampede: Generate 5 variant layouts for the lead article</div>
+ </div>
+ <div class="chat-message system">
+ <div>Stampede engaged. Visuals department mobilized. Expect 3D mockups by 17:00 CST.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or query..." />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>Magazine spread mockup: A single page from Vol. XII, featuring a full-bleed photograph of a 1920s flapper in a digital art filter, with a pull quote in bold italics: "The future is a relic we've already seen."</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Editorial note: "Consider the typographic hierarchy in the lead article. The subhead should be a whisper, not a shout. Use 14pt Source Serif Pro with 2pt leading for the body."</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>Design draft: A 3D isometric mockup of the magazine cover, with interactive elements for the "stampede" feature. Layers include a textured paper background and a holographic foil overlay.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>Layout sketch: A responsive grid for the digital edition, featuring a hero image with a dynamic caption that changes based on user interaction. Placeholder text: "Vol. XII: The Unseen Thread."</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/067-industrial-warning.html b/mockups/067-industrial-warning.html
new file mode 100644
index 0000000..98e6c70
--- /dev/null
+++ b/mockups/067-industrial-warning.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>industrial-warning-sign — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background-color: #1a1a1a; color: #fcd13e; }
+ body { display: flex; flex-direction: column; }
+ header { position: fixed; top: 0; left: 0; right: 0; height: 60px; background-color: #a83232; display: flex; align-items: center; padding: 0 24px; font-family: 'Bebas Neue', cursive; }
+ header h1 { margin: 0; font-size: 24px; color: #000000; }
+ header select { margin-left: 20px; padding: 6px 12px; font-size: 14px; background-color: #1a1a1a; color: #fcd13e; border: 1px solid #666666; }
+ header .status { margin-left: auto; padding: 4px 12px; background-color: #666666; border-radius: 4px; font-size: 12px; }
+ main { display: flex; flex: 1; margin-top: 60px; }
+ .left-pane { width: 40%; padding: 24px; overflow-y: auto; background-color: #1a1a1a; border-right: 1px solid #666666; }
+ .chat-log { display: flex; flex-direction: column; gap: 16px; }
+ .message { display: flex; flex-direction: column; }
+ .message.user { align-self: flex-end; }
+ .message.user::before { content: "USER:"; color: #a83232; margin-bottom: 4px; }
+ .message.agent::before { content: "AGENT:"; color: #fcd13e; margin-bottom: 4px; }
+ .chat-input { margin-top: 24px; display: flex; }
+ .chat-input input { flex: 1; padding: 8px; font-size: 14px; background-color: #000000; color: #fcd13e; border: 1px solid #666666; }
+ .chat-input button { padding: 8px 16px; background-color: #a83232; color: #000000; border: none; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; padding: 24px; }
+ .sub-panel { background-color: #000000; border: 2px solid #a83232; padding: 16px; }
+ .sub-panel h2 { margin: 0 0 12px; font-family: 'Bebas Neue', cursive; color: #a83232; }
+ .sub-panel p { margin: 0; font-size: 14px; color: #666666; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <select>
+ <option>Project: HORMUZ-01</option>
+ <option>Project: ECHO-7</option>
+ <option>Project: STAMPED-3</option>
+ </select>
+ <div class="status">IDLE</div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div>/run-topic "EMERGENCY PROTOCOLS"</div>
+ </div>
+ <div class="message agent">
+ <div>TOPIC ENGAGED. INITIATING EMERGENCY PROTOCOLS. ALL SYSTEMS RED.</div>
+ </div>
+ <div class="message user">
+ <div>/stampede</div>
+ </div>
+ <div class="message agent">
+ <div>STAMPEDE MODE ACTIVATED. DESIGN ELEMENTS COLLAPSING INTO HAZARD ZONES.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="COMMAND INPUT">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>PREVIEW</h2>
+ <p>SYSTEM: RENDER LAYER 3 ENGAGED. UNAUTHORIZED MODIFICATION DETECTED. REVERTING TO BASE STATE.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>PAPER</h2>
+ <p>WARNING: PAPER TRAIL INTEGRITY COMPROMISED. 3 UNRECORDED EDITS DETECTED. INITIATE AUDIT.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>FIGMA</h2>
+ <p>FIGMA PLUGIN: HAZARD ZONE DETECTED IN FRAME 4. ELEMENTS EXCEEDING MAXIMUM ALLOWED SIZE.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>CANVA</h2>
+ <p>CANVA LAYER: UNAUTHORIZED BACKGROUND PATTERN DETECTED. MATCHING HAZARD SIGNAGE PROTOCOL 7.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/068-casino-strip.html b/mockups/068-casino-strip.html
new file mode 100644
index 0000000..2be8e7a
--- /dev/null
+++ b/mockups/068-casino-strip.html
@@ -0,0 +1,194 @@
+<!doctype html>
+<html>
+<head>
+ <meta name="viewport" content="width=1440">
+ <title>casino-strip — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Limelight&family=Inter&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #0a0a0a;
+ color: #fdfaf3;
+ display: flex;
+ flex-direction: column;
+ height: 900px;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: linear-gradient(90deg, #a83232, #d4af37);
+ color: #0a0a0a;
+ font-family: 'Limelight', cursive;
+ font-size: 24px;
+ position: relative;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: #d4af37;
+ }
+ .project-picker {
+ position: relative;
+ padding: 8px 16px;
+ background: #1a1a1a;
+ border: 1px solid #d4af37;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .project-picker:hover {
+ background: #2a2a2a;
+ }
+ .project-picker::after {
+ content: '▼';
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #d4af37;
+ }
+ .status {
+ padding: 4px 8px;
+ border-radius: 4px;
+ background: #d4af37;
+ color: #0a0a0a;
+ font-weight: bold;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ .chat-log {
+ padding: 16px;
+ overflow-y: auto;
+ flex: 1;
+ }
+ .chat-message {
+ margin: 8px 0;
+ padding: 8px 12px;
+ background: #1a1a1a;
+ border: 1px solid #3a3a3a;
+ border-radius: 4px;
+ }
+ .chat-message.user {
+ background: #a83232;
+ color: #fdfaf3;
+ text-align: right;
+ }
+ .chat-message.system {
+ background: #2a2a2a;
+ color: #d4af37;
+ text-align: left;
+ }
+ .chat-input {
+ display: flex;
+ padding: 12px;
+ border-top: 1px solid #3a3a3a;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ border: none;
+ background: #2a2a2a;
+ color: #fdfaf3;
+ font-size: 14px;
+ }
+ .chat-input button {
+ margin-left: 8px;
+ padding: 8px 16px;
+ background: #d4af37;
+ color: #0a0a0a;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 16px;
+ padding: 16px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: #1a1a1a;
+ border: 1px solid #3a3a3a;
+ border-radius: 4px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Limelight', cursive;
+ font-size: 18px;
+ margin-bottom: 12px;
+ color: #d4af37;
+ }
+ .panel-content {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: #a83232;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>Four Horsemen</span>
+ <div>
+ <div class="project-picker">HORMUZ ▼</div>
+ <div class="status">running</div>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic neon-gold</div>
+ <div class="chat-message system">TOPIC: NEON-GOLD — ALL IN ON THE SPINNING WHEEL</div>
+ <div class="chat-message user">/stampede 3</div>
+ <div class="chat-message system">STAMPEDE: 3 HORSIES LOADED — DEALER STANDS ON 17</div>
+ <div class="chat-message system">BETTING OPEN — PLACE YOUR WAGER</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="ALL-IN OR FOLD?">
+ <button>ROLL</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">High-roller UI mockup in progress. All-in on neon gradients!</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">Hand-drawn sketches of the roulette wheel. Bet on elegance.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">Design system aligned with the dealer's rules. No soft hands here.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">Canvassing the casino floor. Every pixel a potential win.</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/069-peaceful-protest.html b/mockups/069-peaceful-protest.html
new file mode 100644
index 0000000..588a415
--- /dev/null
+++ b/mockups/069-peaceful-protest.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>peaceful-protest-poster — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+Pro:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Source Sans Pro', sans-serif; background: #fbf6e9; color: #1a1a1a; }
+ body { display: flex; flex-direction: column; }
+ header { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: #1a1a1a; display: flex; align-items: center; padding: 0 24px; }
+ header h1 { font-family: 'Bebas Neue', cursive; font-size: 24px; margin: 0; color: #fcd13e; }
+ header .project-picker { margin-left: auto; padding: 8px 16px; background: #3a3a3a; border-radius: 4px; color: #fbf6e9; }
+ header .status { margin-left: 16px; padding: 4px 8px; background: #a83232; color: #fbf6e9; border-radius: 4px; font-size: 12px; }
+ main { display: flex; flex: 1; margin-top: 60px; }
+ .left-pane { width: 40%; padding: 24px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 12px; }
+ .chat-message { padding: 12px 16px; border-radius: 8px; background: #fcd13e; color: #1a1a1a; max-width: 70%; }
+ .chat-message.user { align-self: flex-end; background: #a83232; color: #fbf6e9; }
+ .chat-input { margin-top: 24px; display: flex; }
+ .chat-input input { flex: 1; padding: 12px; font-size: 14px; }
+ .chat-input button { padding: 12px 24px; background: #1a1a1a; color: #fbf6e9; border: none; border-radius: 4px; margin-left: 8px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
+ .panel { background: #fbf6e9; border: 2px solid #3a3a3a; padding: 24px; }
+ .panel h2 { font-family: 'Bebas Neue', cursive; font-size: 18px; margin: 0 0 16px; color: #a83232; }
+ .panel-content { font-size: 14px; line-height: 1.5; }
+ .panel-content::before { content: "“”; font-size: 24px; }
+ .panel-content::after { content: "”"; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN STUDIO</h1>
+ <select class="project-picker">
+ <option>HORMUZ 2024</option>
+ <option>ECHOES OF JUSTICE</option>
+ <option>RED LINE REBELLION</option>
+ </select>
+ <span class="status">IDLE</span>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic: climate justice</div>
+ <div class="chat-message">SYSTEM: TOPIC "CLIMATE JUSTICE" LOADED. READY TO STAMPEDEN.</div>
+ <div class="chat-message user">/stampede: 3</div>
+ <div class="chat-message">SYSTEM: STAMPEDEN INITIATED. 3 VIBRANT POSTERS GENERATED. DEMANDS AMPLIFIED.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="TYPE YOUR DEMAND HERE">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>PREVIEW</h2>
+ <div class="panel-content">WE THE PEOPLE STAND UNITED. NO MORE SILENCE. NO MORE COMPROMISE. DEMAND JUSTICE NOW.</div>
+ </div>
+ <div class="panel">
+ <h2>PAPER</h2>
+ <div class="panel-content">DRAFT: "THE WALLS OF INJUSTICE WILL FALL. WE DEMAND TRANSPARENCY IN POLICE ACCOUNTABILITY."</div>
+ </div>
+ <div class="panel">
+ <h2>FIGMA</h2>
+ <div class="panel-content">LAYER NAME: "PROTEST SIGN 01". STROKE: #a83232. FILL: #fcd13e. TEXT: "NOW IS THE TIME."</div>
+ </div>
+ <div class="panel">
+ <h2>CANVA</h2>
+ <div class="panel-content">TEMPLATE: "MARCH POSTER". PLACEHOLDER TEXT: "JOIN THE STAMPEDEN. DEMAND YOUR RIGHTS."</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/070-lawyer-shingle.html b/mockups/070-lawyer-shingle.html
new file mode 100644
index 0000000..8bf8cad
--- /dev/null
+++ b/mockups/070-lawyer-shingle.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>lawyer-brass-shingle — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #0a0a0a;
+ --primary: #d4af37;
+ --secondary: #fdfaf3;
+ --text: #666666;
+ --dark: #1a1a1a;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Inter', sans-serif;
+ color: var(--text);
+ background: var(--bg);
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 2rem;
+ background: linear-gradient(90deg, var(--primary) 0%, var(--dark) 100%);
+ color: var(--bg);
+ font-family: 'Cinzel', serif;
+ font-size: 1.8rem;
+ position: relative;
+ z-index: 1;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: var(--primary);
+ }
+ .project-picker {
+ position: relative;
+ }
+ .project-picker select {
+ background: var(--dark);
+ color: var(--primary);
+ border: 1px solid var(--primary);
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ border-radius: 4px;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23d4af37' d='M0 0L10 0L5 6z'/></svg>");
+ background-repeat: no-repeat;
+ background-position: right 0.5rem center;
+ }
+ .status {
+ font-size: 0.9rem;
+ padding: 0.3rem 0.8rem;
+ border: 1px solid var(--primary);
+ border-radius: 4px;
+ background: var(--dark);
+ color: var(--primary);
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: var(--dark);
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ margin-bottom: 1rem;
+ }
+ .message {
+ margin-bottom: 1rem;
+ }
+ .message.user {
+ color: var(--primary);
+ }
+ .message.system {
+ color: var(--text);
+ }
+ .input-bar {
+ display: flex;
+ gap: 0.5rem;
+ input {
+ flex: 1;
+ padding: 0.5rem;
+ border: 1px solid var(--primary);
+ border-radius: 4px;
+ background: var(--dark);
+ color: var(--primary);
+ }
+ button {
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 1rem;
+ padding: 1rem;
+ background: var(--secondary);
+ }
+ .panel {
+ background: var(--dark);
+ border: 1px solid var(--primary);
+ border-radius: 4px;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Cinzel', serif;
+ font-size: 1.2rem;
+ margin-bottom: 0.5rem;
+ color: var(--primary);
+ }
+ .panel-body {
+ font-size: 0.9rem;
+ line-height: 1.4;
+ color: var(--text);
+ }
+ .panel-body code {
+ color: var(--primary);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div class="project-picker">
+ <select>
+ <option>Brass & Buckle Initiative</option>
+ <option>The Gavel & Gauge</option>
+ <option>Shingle & Scale</option>
+ </select>
+ </div>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message system">[1898-03-15 14:22] System: Ready for instruction.</div>
+ <div class="message user">/run-topic "The Brass Brief"</div>
+ <div class="message system">[1898-03-15 14:23] System: Topic 'The Brass Brief' initiated. Generating legal document framework.</div>
+ <div class="message user">/stampede 3</div>
+ <div class="message system">[1898-03-15 14:24] System: Stampede mode engaged. Producing three variant design iterations for review.</div>
+ </div>
+ <div class="input-bar">
+ <input type="text" placeholder="Enter command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">Current design iteration: "The Brass Brief" — awaiting client review. Last revision: 1898-03-15T14:23Z. Status: pending.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">Legal document template v3.2 — last reviewed 1898-02-14. Contains 12 sections, 3 appendices. Requires notarization for final execution.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">Design file "Brass_Brief_v3" open in Figma. Last sync: 1898-03-15 14:22. Contains 4 artboards, 3 components. Exported as PDF: /assets/brassbrief.pdf</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">Canva template "Lawyer's Brass" active. Last edited: 1898-03-15 14:20. Contains 5 placeholder images, 2 text layers. Export options: PNG, PDF, SVG.</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/071-doctor-prescription.html b/mockups/071-doctor-prescription.html
new file mode 100644
index 0000000..4e44811
--- /dev/null
+++ b/mockups/071-doctor-prescription.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>doctor-prescription-pad — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=IBM+Plex+Sans:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'IBM Plex Sans', sans-serif;
+ background: #fdfaf0;
+ color: #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: #fdfaf0;
+ border-bottom: 1px solid #3a3a3a;
+ font-size: 1.25rem;
+ font-family: 'Caveat', cursive;
+ }
+ header h1 {
+ margin: 0;
+ font-weight: 700;
+ color: #0e2a47;
+ }
+ .project-picker {
+ padding: 6px 12px;
+ background: #fdfaf0;
+ border: 1px solid #3a3a3a;
+ border-radius: 4px;
+ color: #1a1a1a;
+ font-size: 0.9rem;
+ }
+ .status-pill {
+ padding: 4px 12px;
+ border-radius: 20px;
+ background: #a83232;
+ color: #fdfaf0;
+ font-size: 0.85rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid #3a3a3a;
+ background: #fdfaf0;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ background: #fdfaf0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .chat-message {
+ background: #fdfaf0;
+ border: 1px solid #3a3a3a;
+ padding: 12px 16px;
+ border-radius: 6px;
+ font-size: 0.95rem;
+ line-height: 1.3;
+ }
+ .chat-input {
+ padding: 16px;
+ background: #fdfaf0;
+ border-top: 1px solid #3a3a3a;
+ }
+ .chat-input input {
+ width: 100%;
+ padding: 10px 12px;
+ font-size: 1rem;
+ border: 1px solid #3a3a3a;
+ border-radius: 6px;
+ color: #1a1a1a;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ padding: 24px;
+ background: #fdfaf0;
+ }
+ .panel {
+ background: #fdfaf0;
+ border: 1px solid #3a3a3a;
+ border-radius: 6px;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .panel h2 {
+ font-family: 'Caveat', cursive;
+ font-size: 1.25rem;
+ color: #0e2a47;
+ margin: 0 0 12px 0;
+ }
+ .panel-content {
+ font-size: 0.95rem;
+ color: #1a1a1a;
+ line-height: 1.4;
+ }
+ .panel-content code {
+ color: #a83232;
+ font-family: monospace;
+ }
+ @media (max-width: 1024px) {
+ main { flex-direction: column; }
+ .chat-pane { width: 100%; border-right: none; }
+ .panels { grid-template-columns: 1fr; }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN RX</h1>
+ <div>
+ <select class="project-picker">
+ <option>Project HORMUZ</option>
+ <option>Project BAZAR</option>
+ <option>Project SANGRA</option>
+ </select>
+ <span class="status-pill">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message"><span class="user">Agent:</span> Initiating protocol /run-topic: "Surgical Scalpel Precision"</div>
+ <div class="chat-message"><span class="user">User:</span> Confirming topic parameters...</div>
+ <div class="chat-message"><span class="user">Agent:</span> Topic initialized. Proceeding with /stampede: 3 iterations, 2x speed</div>
+ <div class="chat-message"><span class="user">User:</span> Acknowledged. Refill x3 on topic "Neonatal Care Protocols"</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /run-topic or /stampede...">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <div class="panel-content">
+ <p><strong>Sig:</strong> q.d. (daily), 1 tablet by mouth with food.</p>
+ <p><strong>Refill:</strong> x3, 30 days supply.</p>
+ <p><strong>Warning:</strong> May cause temporary hallucination of design patterns. Consult UX specialist if persisting beyond 72 hours.</p>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <div class="panel-content">
+ <p>Prescription Pad UX:</p>
+ <ul>
+ <li>Margin: 1.5cm on all sides</li>
+ <li>Font: IBM Plex Sans 12pt</li>
+ <li>Watermark: "DO NOT FOLD"</li>
+ <li>Staple location: top-right corner</li>
+ </ul>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <div class="panel-content">
+ <p>Design System:</p>
+ <ul>
+ <li>Color: #0e2a47 (primary), #a83232 (alert)</li>
+ <li>Typography: Caveat for headings, IBM Plex Sans for body</li>
+ <li>Components: 32px margin, 8px corner radius</li>
+ <li>Icon set: Rx, stampede, refill</li>
+ </ul>
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <div class="panel-content">
+ <p>Mockup Template:</p>
+ <ul>
+ <li>Background: parchment texture</li>
+ <li>Frame: 8.5" x 11" with 0.5" bleed</li>
+ <li>Elements: handwritten notes, prescription icon, dosage chart</li>
+ <li>Text alignment: left-justified with hanging indent</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/072-candy-shop.html b/mockups/072-candy-shop.html
new file mode 100644
index 0000000..33d61a3
--- /dev/null
+++ b/mockups/072-candy-shop.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>candy-shop-window — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Inter:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ font-family: 'Inter', sans-serif;
+ background-color: #fff0f5;
+ color: #1a1a1a;
+ overflow-x: hidden;
+ }
+ body {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 40px;
+ background: #ff80ab;
+ color: #fff0f5;
+ font-family: 'Bungee Outline', cursive;
+ font-size: 2rem;
+ position: relative;
+ z-index: 1000;
+ }
+ header select {
+ padding: 8px 12px;
+ margin-left: 20px;
+ background: #fff0f5;
+ color: #1a1a1a;
+ border: 2px solid #ffd54f;
+ border-radius: 8px;
+ font-family: 'Inter', sans-serif;
+ font-size: 1rem;
+ }
+ header .status {
+ padding: 6px 12px;
+ border-radius: 20px;
+ background: #7fffd4;
+ color: #1a1a1a;
+ font-size: 0.8rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: auto;
+ }
+ .left-pane {
+ width: 40%;
+ padding: 40px;
+ background: #fff0f5;
+ border-right: 2px solid #ffd54f;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ margin-bottom: 20px;
+ }
+ .chat-message {
+ margin: 12px 0;
+ }
+ .chat-message.user {
+ text-align: right;
+ }
+ .chat-message.system {
+ text-align: left;
+ }
+ .chat-input {
+ display: flex;
+ border: 2px solid #ff80ab;
+ border-radius: 24px;
+ padding: 12px;
+ background: #fff0f5;
+ font-size: 1rem;
+ }
+ .chat-input input {
+ flex: 1;
+ border: none;
+ outline: none;
+ background: transparent;
+ font-family: 'Inter', sans-serif;
+ }
+ .chat-input button {
+ background: none;
+ border: none;
+ color: #ff80ab;
+ font-size: 1.2rem;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 20px;
+ padding: 40px;
+ }
+ .panel {
+ background: #fff0f5;
+ border: 2px solid #ffd54f;
+ border-radius: 16px;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Bungee Outline', cursive;
+ font-size: 1.5rem;
+ color: #ff80ab;
+ margin-bottom: 16px;
+ }
+ .panel-body {
+ font-size: 1rem;
+ line-height: 1.6;
+ }
+ .panel-body code {
+ background: #7fffd4;
+ padding: 2px 6px;
+ border-radius: 6px;
+ font-family: monospace;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Rainbow Marshmallows</option>
+ <option>Gumball Galaxy</option>
+ <option>Jawbreaker Jamboree</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic: Candy Shop Carnival</div>
+ <div class="chat-message system">**Agent:** Alright, let's throw a carnival! 🎪 We'll need cotton candy clouds, ticket booths with jawbreaker prizes, and a rollercoaster made of licorice.</div>
+ <div class="chat-message user">/stampede: Gumball Explosion</div>
+ <div class="chat-message system">**Agent:** Warning! Gumball machine overload detected. Initiating rainbow-colored gum ball tsunami. 🌈 Expect 10,000 gumballs per second. (Please wear a helmet.)</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command...">
+ <button>🪄</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ A shimmering wrapper of rainbow stripes, with a 'Taste the Rainbow' logo. Inside: a single, perfectly round gum ball, glowing with neon hues. (Available in 1000+ flavors, including 'Grandma's Secret Recipe.')
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ Sketches of candy wrappers in a notebook. Notes: "Use more glitter," "Make the 'Jawbreaker' font bolder," "Add a 'limited edition' hologram sticker." (Current page: 42 of 1000.)
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ Design prototype: A candy shop interface with a 'Buy Now' button that changes color every 2 seconds. Prototype includes a 3D model of a gumball machine with a 'Click to Pop' animation.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ Template: 'Gumball Explosion' social media post. Features a 3D render of gumballs bursting from a machine, with text: "Two for a quarter! 🎉" (Includes 100+ emoji stickers and 50 filter options.)
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/073-library-microfiche.html b/mockups/073-library-microfiche.html
new file mode 100644
index 0000000..1684df2
--- /dev/null
+++ b/mockups/073-library-microfiche.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>microfiche-reader — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #0a0a0a;
+ --fg: #fdfaf0;
+ --support1: #666666;
+ --support2: #3a3a3a;
+ --support3: #1a1a1a;
+ --noise: url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' fill='%230a0a0a'/%3E%3Ccircle cx='5' cy='5' r='1' fill='%23ffffff' opacity='0.05'%3E%3C/circle%3E%3C/svg%3E");
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--fg); }
+ body { display: flex; flex-direction: column; overflow: hidden; }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: var(--support3);
+ font-family: 'IBM Plex Mono', monospace;
+ font-size: 1.25rem;
+ border-bottom: 1px solid var(--support1);
+ }
+ header select {
+ padding: 8px 12px;
+ margin-left: 16px;
+ background: var(--support2);
+ color: var(--fg);
+ border: 1px solid var(--support1);
+ font-family: 'Inter', sans-serif;
+ }
+ header .status {
+ padding: 6px 12px;
+ background: var(--support2);
+ border: 1px solid var(--support1);
+ border-radius: 4px;
+ font-size: 0.875rem;
+ }
+ .container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ background: var(--support2);
+ border-right: 1px solid var(--support1);
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ margin-bottom: 16px;
+ background: var(--support3);
+ padding: 12px;
+ border: 1px solid var(--support1);
+ border-radius: 4px;
+ background-image: var(--noise);
+ background-size: 10px 10px;
+ }
+ .chat-message {
+ margin: 8px 0;
+ padding: 8px 12px;
+ background: var(--support3);
+ border: 1px solid var(--support1);
+ border-radius: 4px;
+ }
+ .chat-message.user { background: var(--support2); }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-family: 'Inter', sans-serif;
+ background: var(--support3);
+ border: 1px solid var(--support1);
+ color: var(--fg);
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background: var(--support2);
+ border: 1px solid var(--support1);
+ font-family: 'Inter', sans-serif;
+ color: var(--fg);
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 16px;
+ padding: 24px;
+ background: var(--support3);
+ }
+ .panel {
+ display: flex;
+ flex-direction: column;
+ background: var(--support2);
+ border: 1px solid var(--support1);
+ border-radius: 4px;
+ padding: 16px;
+ overflow: hidden;
+ }
+ .panel-header {
+ font-family: 'IBM Plex Mono', monospace;
+ font-size: 1.125rem;
+ margin-bottom: 12px;
+ color: var(--fg);
+ }
+ .panel-body {
+ flex: 1;
+ background: var(--support3);
+ padding: 12px;
+ border: 1px solid var(--support1);
+ border-radius: 4px;
+ overflow-y: auto;
+ background-image: var(--noise);
+ background-size: 10px 10px;
+ }
+ .panel-body pre {
+ font-family: 'Courier New', monospace;
+ font-size: 0.875rem;
+ color: var(--support1);
+ background: none;
+ padding: 0;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option value="project1">Hormuz Initiative</option>
+ <option value="project2">Crimson Loop</option>
+ <option value="project3">Eclipse Schema</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic: "solar flare protocols"</div>
+ <div class="chat-message">[system] initiating topic run: solar flare protocols (estimated duration: 3m 45s)</div>
+ <div class="chat-message user">/stampede: "quantum entanglement"</div>
+ <div class="chat-message">[system] warning: stampede command detected. this will override current topic. confirm? (y/n)</div>
+ <div class="chat-message user">y</div>
+ <div class="chat-message">[system] stampede engaged: quantum entanglement. all agents redirected. (status: running)</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="agent command or message">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">preview</div>
+ <div class="panel-body">
+ <pre>
+ [REEL 412] FRAME 1138
+ ┌───────────────┐
+ │ 01:23:45:678 │
+ └───────────────┘
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">paper</div>
+ <div class="panel-body">
+ <pre>
+ [REEL 412] FRAME 1139
+ ┌───────────────┐
+ │ 01:23:45:679 │
+ └───────────────┘
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">figma</div>
+ <div class="panel-body">
+ <pre>
+ [REEL 412] FRAME 1140
+ ┌───────────────┐
+ │ 01:23:45:680 │
+ └───────────────┘
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">canva</div>
+ <div class="panel-body">
+ <pre>
+ [REEL 412] FRAME 1141
+ ┌───────────────┐
+ │ 01:23:45:681 │
+ └───────────────┘
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+ </pre>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/074-auction-paddle.html b/mockups/074-auction-paddle.html
new file mode 100644
index 0000000..959dff5
--- /dev/null
+++ b/mockups/074-auction-paddle.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>auction-paddle — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #fdfaf0; color: #1a1a1a; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a1a1a; color: #fdfaf0; font-family: 'Crimson Pro', serif; font-size: 24px; }
+ header .project-picker { padding: 8px 16px; background: #d4af37; border-radius: 4px; font-weight: 600; }
+ header .status { padding: 8px 16px; background: #a83232; color: #fdfaf0; border-radius: 4px; font-weight: 600; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #666666; display: flex; flex-direction: column; }
+ .chat-log { flex: 1; overflow-y: auto; padding: 16px; }
+ .chat-message { margin: 8px 0; padding: 12px; background: #fdfaf0; border: 1px solid #666666; border-radius: 4px; }
+ .chat-message.user { background: #d4af37; color: #1a1a1a; }
+ .chat-input { padding: 16px; display: flex; }
+ .chat-input input { flex: 1; padding: 8px; font-size: 16px; }
+ .chat-input button { padding: 8px 16px; margin-left: 8px; background: #a83232; color: #fdfaf0; border: none; border-radius: 4px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
+ .panel { background: #fdfaf0; border: 1px solid #666666; border-radius: 4px; padding: 16px; display: flex; flex-direction: column; }
+ .panel-header { font-family: 'Crimson Pro', serif; font-size: 18px; margin-bottom: 12px; }
+ .panel-body { flex: 1; }
+ .panel-body pre { font-family: monospace; font-size: 14px; color: #666666; }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <div>
+ <select class="project-picker">
+ <option>Lot 47: The Midnight Gambit</option>
+ <option>Lot 12: Neon Diplomacy</option>
+ <option>Lot 88: The Velvet Hammer</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">/run-topic "The Midnight Gambit" — initiate design storm</div>
+ <div class="chat-message">Lot 47: 'The Midnight Gambit' — sealed bid at $1.2M. Agents, mobilize.</div>
+ <div class="chat-message user">/stampede activate "The Midnight Gambit" — all agents, mobilize!</div>
+ <div class="chat-message">Agent 007: Topic locked. Generating 3D render of the vault at 45° angle. Bid increment: $500K.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command..." />
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <pre>
+ ┌───────────────┐
+ │ LOT 47 │
+ │ BID: $1.2M │
+ │ HAMMER: ON │
+ └───────────────┘
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <pre>
+ [CONFIDENTIAL]
+ Design Directive: The Midnight Gambit
+ ┌──────────────────────────────────────┐
+ │ 1. Use 45° perspective for all comps │
+ │ 2. Bid increments must be $500K │
+ │ 3. Red accent on all deliverables │
+ └──────────────────────────────────────┘
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <pre>
+ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
\ No newline at end of file
diff --git a/mockups/075-prayer-beads.html b/mockups/075-prayer-beads.html
new file mode 100644
index 0000000..82d0b58
--- /dev/null
+++ b/mockups/075-prayer-beads.html
@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>prayer-beads-stack — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #fdfaf3;
+ color: #1a1a1a;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ header {
+ background-color: #3a4a2c;
+ color: #fdfaf3;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.5rem;
+ }
+ header select {
+ background-color: #7a1f1a;
+ color: #fdfaf3;
+ border: none;
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ border-radius: 4px;
+ margin-left: 1rem;
+ }
+ header .status {
+ background-color: #d4af37;
+ padding: 0.3rem 0.8rem;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background-color: #fdfaf3;
+ border-right: 1px solid #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ padding: 1rem;
+ overflow-y: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+ }
+ .chat-message {
+ background-color: #1a1a1a;
+ color: #fdfaf3;
+ padding: 0.8rem 1rem;
+ border-radius: 6px;
+ max-width: 80%;
+ }
+ .chat-input {
+ padding: 1rem;
+ display: flex;
+ gap: 0.5rem;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.6rem;
+ font-size: 1rem;
+ border: 2px solid #7a1f1a;
+ border-radius: 4px;
+ }
+ .chat-input button {
+ background-color: #d4af37;
+ color: #1a1a1a;
+ border: none;
+ padding: 0.6rem 1rem;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1.5rem;
+ padding: 1.5rem;
+ }
+ .panel {
+ background-color: #1a1a1a;
+ color: #fdfaf3;
+ border: 2px solid #7a1f1a;
+ border-radius: 6px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .panel h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.2rem;
+ color: #d4af37;
+ margin: 0 0 0.5rem 0;
+ }
+ .panel p {
+ font-size: 0.95rem;
+ line-height: 1.4;
+ }
+ .panel::before {
+ content: "•";
+ color: #3a4a2c;
+ font-size: 1.5rem;
+ margin-right: 0.8rem;
+ }
+ @media (max-width: 1440px) {
+ .panels {
+ grid-template-columns: 1fr;
+ }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project HADES</option>
+ <option>Project SHIVA</option>
+ <option>Project AZRAEL</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message">/run-topic "The silent calculus of shadows"</div>
+ <div class="chat-message">[system] Initiating topic: The silent calculus of shadows. Threads: 3. Depth: 7.</div>
+ <div class="chat-message">/stampede "unravel the thread"</div>
+ <div class="chat-message">[system] Stampede mode engaged. All threads now bleeding into the void. May the void be kind.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="whisper a command...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>A canvas of void and light, where the edges of thought fray and dissolve. The unseen architecture of the prayer-beads-stack hums beneath the surface, waiting for the right incantation to reveal its form.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Scratched parchment and ink that bleeds through the fibers. Notes in the margin: "The first bead is always the hardest. The last is always the same." A charcoal sketch of a figure kneeling in the dark.</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>Wireframes of a labyrinth, each corridor leading to a door that opens only to another corridor. Components labeled "prayer," "bead," "stack," and "void" interlock with a quiet violence.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>Templates for the unworthy. A gradient from #1a1a1a to #fdfaf3, with a single bead-shaped icon in the center. Text overlay: "Design is the art of making the invisible visible."</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/076-sushi-bar-counter.html b/mockups/076-sushi-bar-counter.html
new file mode 100644
index 0000000..60e5315
--- /dev/null
+++ b/mockups/076-sushi-bar-counter.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>sushi-bar-counter — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #1a1a1a;
+ --primary: #fdfaf0;
+ --accent1: #7a1f1a;
+ --accent2: #3a4a2c;
+ --accent3: #ddd5c2;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ background-color: var(--bg);
+ color: var(--primary);
+ font-family: 'Inter', sans-serif;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ width: 1440px;
+ margin: 0 auto;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ font-family: 'Noto Serif JP', serif;
+ font-size: 24px;
+ border-bottom: 1px solid var(--accent3);
+ }
+ header select {
+ padding: 8px 12px;
+ font-size: 16px;
+ color: var(--primary);
+ background-color: var(--accent2);
+ border: 1px solid var(--accent3);
+ border-radius: 4px;
+ }
+ header .status {
+ padding: 6px 12px;
+ font-size: 14px;
+ background-color: var(--accent2);
+ color: var(--primary);
+ border-radius: 4px;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ border-right: 1px solid var(--accent3);
+ overflow-y: auto;
+ background-color: var(--accent2);
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+ .chat-message {
+ display: flex;
+ gap: 12px;
+ }
+ .chat-message.user {
+ flex-direction: row-reverse;
+ }
+ .chat-message .text {
+ background-color: var(--accent1);
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 14px;
+ }
+ .chat-input {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ font-size: 14px;
+ border: 1px solid var(--accent3);
+ border-radius: 4px;
+ background-color: var(--accent2);
+ color: var(--primary);
+ }
+ .chat-input button {
+ padding: 10px 16px;
+ font-size: 14px;
+ background-color: var(--accent1);
+ color: var(--primary);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .panel {
+ background-color: var(--accent2);
+ border: 1px solid var(--accent3);
+ border-radius: 6px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .panel h2 {
+ font-family: 'Noto Serif JP', serif;
+ font-size: 18px;
+ color: var(--accent1);
+ }
+ .panel p {
+ font-size: 14px;
+ line-height: 1.6;
+ color: var(--primary);
+ }
+ .panel .placeholder {
+ font-style: italic;
+ color: var(--accent3);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Sashimi Sutra</option>
+ <option>Wasabi Whispers</option>
+ <option>Edomae Elegy</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic "Umami Bloom"</div>
+ </div>
+ <div class="chat-message">
+ <div class="text">Topic initiated: Crafting a narrative of toro's decadence through the lens of a single wasabi root.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede "Sushi Counter Renaissance"</div>
+ </div>
+ <div class="chat-message">
+ <div class="text">Stampede mode: 3 agents converging on the theme of 'sushi as performance art'—expect a symphony of nigiri, sashimi, and sashimi.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="What would you like to slice today?">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>A delicate balance of vinegared rice, fresh tuna, and a whisper of yuzu—today’s special is the <em>'Otoro Ode'</em>. Slice with the precision of a master chukka.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Ink flows like wasabi—our paper designs are sharp, clean, and cut to perfection. The <em>'Sashimi Sutra'</em> manuscript is now open for annotation.</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>Design boards are laid out like a sushi counter, each element meticulously placed. Current focus: <em>'Edomae Elegy'</em>—a tribute to the art of hand-rolled maki.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>Arrange your ingredients with precision—today’s canva is a masterpiece of umami. The <em>'Wasabi Whispers'</em> template awaits your creative touch.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/077-truck-stop-diner.html b/mockups/077-truck-stop-diner.html
new file mode 100644
index 0000000..9b08726
--- /dev/null
+++ b/mockups/077-truck-stop-diner.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>truck-stop-diner — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Source+Sans+Pro:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Source Sans Pro', sans-serif;
+ background-color: #fbf6e9;
+ color: #1a1a1a;
+ height: 100%;
+ width: 100%;
+ overflow-x: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 3rem;
+ background: #fbf6e9;
+ border-bottom: 2px solid #a83232;
+ font-family: 'Bungee Inline', cursive;
+ position: relative;
+ }
+ header h1 {
+ font-size: 2.2rem;
+ margin: 0;
+ color: #0e2a47;
+ }
+ .project-picker, .status {
+ font-family: 'Source Sans Pro', sans-serif;
+ font-size: 1rem;
+ }
+ .project-picker {
+ padding: 0.5rem 1rem;
+ background: #1a1a1a;
+ color: #fcd13e;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 1rem;
+ }
+ .status {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #fcd13e;
+ margin-left: 1rem;
+ }
+ .container {
+ display: flex;
+ height: calc(100% - 60px);
+ }
+ .chat-pane {
+ width: 40%;
+ padding: 2rem;
+ background: #1a1a1a;
+ color: #fbf6e9;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-messages {
+ flex: 1;
+ margin-bottom: 1rem;
+ }
+ .message {
+ margin: 1rem 0;
+ padding: 1rem;
+ background: #a83232;
+ border-radius: 6px;
+ max-width: 70%;
+ word-wrap: break-word;
+ }
+ .message.user {
+ background: #fcd13e;
+ align-self: flex-end;
+ }
+ .chat-input {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.75rem;
+ border: none;
+ border-radius: 4px;
+ background: #fbf6e9;
+ color: #1a1a1a;
+ }
+ .chat-input button {
+ padding: 0.75rem 1.5rem;
+ background: #0e2a47;
+ color: #fcd13e;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ padding: 2rem;
+ }
+ .panel {
+ background: #fbf6e9;
+ border: 2px solid #a83232;
+ border-radius: 6px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Bungee Inline', cursive;
+ font-size: 1.4rem;
+ color: #0e2a47;
+ margin-bottom: 1rem;
+ }
+ .panel-body {
+ font-size: 0.95rem;
+ line-height: 1.6;
+ color: #1a1a1a;
+ }
+ .panel-body::before {
+ content: " ";
+ display: block;
+ height: 10px;
+ background: #fcd13e;
+ margin-bottom: 1rem;
+ border-radius: 4px;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <select class="project-picker">
+ <option>Midnight Neon</option>
+ <option>Steel Dust</option>
+ <option>Highway Echoes</option>
+ </select>
+ <div class="status"></div>
+ </div>
+ </header>
+ <div class="container">
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message user">/run-topic "neon signage"</div>
+ <div class="message">Alright, let's light up the road. Got a flicker in the corner of your eye? That's the sign.</div>
+ <div class="message user">/stampede "truck stop menu"</div>
+ <div class="message">Sausage, eggs, and a side of stories. The waitress says the coffee's strong enough to wake the dead.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Order up...">
+ <button>Press to Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ The neon sign flickers as the waitress scribbles 'Specials' on the chalkboard. Today's feature: 'Double Biscuit Stack with Syrup.'
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ The waitress drops a napkin with a hastily drawn map to the back parking lot. 'Where you headed?' she asks, eyes on the coffee cup.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ The waitress's tattoo of a truck glows under the diner's lights. 'This is the route,' she says, pointing to the ink.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ The waitress's apron is covered in doodles of burgers and pie. 'This is the menu,' she says, handing over a napkin with a smudge of ketchup.
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/078-barbershop-pole.html b/mockups/078-barbershop-pole.html
new file mode 100644
index 0000000..4765cc4
--- /dev/null
+++ b/mockups/078-barbershop-pole.html
@@ -0,0 +1,274 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>barbershop-pole — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Limelight&family=Inter&display=swap">
+ <style>
+ :root {
+ --bg: #fdfaf0;
+ --primary: #a83232;
+ --accent: #0e2a47;
+ --text: #1a1a1a;
+ --subtext: #666666;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin:0; padding:0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); height: 100%; }
+ body { display: flex; flex-direction: column; font-size: 16px; }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 2rem;
+ background: linear-gradient(135deg, var(--accent), #fdfaf0);
+ color: var(--primary);
+ font-family: 'Limelight', cursive;
+ font-size: 1.8rem;
+ position: relative;
+ border-bottom: 2px solid var(--primary);
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: radial-gradient(circle at 30% 30%, var(--primary), transparent 70%);
+ }
+ .project-picker {
+ position: relative;
+ margin-left: 2rem;
+ }
+ .project-picker select {
+ padding: 0.5rem 1rem;
+ border: 2px solid var(--subtext);
+ border-radius: 4px;
+ background: #fff;
+ color: var(--text);
+ font-size: 1rem;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23666' d='M0 0L10 5L0 6z'/></svg>");
+ background-repeat: no-repeat;
+ background-position: right 0.5rem center;
+ }
+ .status {
+ padding: 0.5rem 1rem;
+ border: 2px solid var(--primary);
+ border-radius: 4px;
+ background: #fff;
+ color: var(--primary);
+ font-size: 0.9rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid var(--subtext);
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 1.5rem 2rem;
+ overflow-y: auto;
+ background: #fff;
+ border-bottom: 1px solid var(--subtext);
+ }
+ .chat-message {
+ margin: 1rem 0;
+ display: flex;
+ }
+ .chat-message.user {
+ justify-content: flex-end;
+ }
+ .chat-message.system {
+ justify-content: flex-start;
+ }
+ .chat-bubble {
+ max-width: 70%;
+ padding: 0.8rem 1.2rem;
+ border-radius: 12px;
+ background: var(--accent);
+ color: #fff;
+ font-size: 0.95rem;
+ position: relative;
+ }
+ .chat-bubble::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ border: 6px solid transparent;
+ border-right-color: var(--accent);
+ border-left-color: transparent;
+ border-bottom-color: transparent;
+ }
+ .chat-input {
+ display: flex;
+ padding: 1rem 2rem;
+ background: #fff;
+ border-top: 1px solid var(--subtext);
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.6rem;
+ border: 2px solid var(--subtext);
+ border-radius: 4px;
+ font-size: 1rem;
+ }
+ .chat-input button {
+ margin-left: 1rem;
+ padding: 0.6rem 1.2rem;
+ background: var(--primary);
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1.5rem;
+ padding: 1.5rem 2rem;
+ }
+ .panel {
+ background: #fff;
+ border: 1px solid var(--subtext);
+ border-radius: 6px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ padding: 1rem 1.5rem;
+ background: var(--accent);
+ color: #fff;
+ font-size: 1.2rem;
+ font-weight: bold;
+ position: relative;
+ }
+ .panel-header::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: radial-gradient(circle at 30% 30%, var(--primary), transparent 70%);
+ }
+ .panel-body {
+ flex: 1;
+ padding: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.95rem;
+ color: var(--subtext);
+ }
+ .panel-body svg {
+ width: 100%;
+ max-width: 300px;
+ fill: var(--accent);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div class="project-picker">
+ <select>
+ <option>Project Redline</option>
+ <option>Project Velvet</option>
+ <option>Project Neon</option>
+ </select>
+ </div>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="chat-bubble">/run-topic "sutured narrative"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="chat-bubble">Topic initiated. Weaving threads of consequence into the loom.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="chat-bubble">/stampede 3</div>
+ </div>
+ <div class="chat-message system">
+ <div class="chat-bubble">Stampede engaged. Three simultaneous vectors of disruption inbound.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type a command...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <svg viewBox="0 0 100 100">
+ <circle cx="50" cy="50" r="40" stroke="#a83232" stroke-width="4" fill="none"/>
+ <text x="50" y="55" font-size="14" text-anchor="middle" fill="#0e2a47">STITCHING</text>
+ <text x="50" y="70" font-size="14" text-anchor="middle" fill="#0e2a47">THE SEAMS</text>
+ </svg>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
+ <div style="padding: 0.5rem; background: #fdfaf0; border: 1px solid #ccc; border-radius: 4px;">sketch 001</div>
+ <div style="padding: 0.5rem; background: #fdfaf0; border: 1px solid #ccc; border-radius: 4px;">draft 2</div>
+ <div style="padding: 0.5rem; background: #fdfaf0; border: 1px solid #ccc; border-radius: 4px;">final pass</div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+ <div style="flex: 1 1 150px; padding: 1rem; background: #fff; border: 1px solid #eee; border-radius: 4px;">
+ <div style="font-size: 0.8rem; color: #666;">component</div>
+ <div style="font-weight: bold; margin: 0.5rem 0;">Hero Banner</div>
+ <div style="font-size: 0.7rem; color: #999;">v1.3.2</div>
+ </div>
+ <div style="flex: 1 1 150px; padding: 1rem; background: #fff; border: 1px solid #eee; border-radius: 4px;">
+ <div style="font-size: 0.8rem; color: #666;">variant</div>
+ <div style="font-weight: bold; margin: 0.5rem 0;">Dark Mode</div>
+ <div style="font-size: 0.7rem; color: #999;">active</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <div style="display: flex; align-items: center; gap: 1rem;">
+ <div style="flex: 1; padding: 1rem; background: #fff; border: 1px solid #eee; border-radius: 4px;">
+ <div style="font-size: 0.9rem; color: #666;">Template</div>
+ <div style="font-weight: bold; margin: 0.5rem 0;">Social Poster</div>
+ <div style="font-size: 0.7rem; color: #999;">1200x630px</div>
+ </div>
+ <div style="flex: 1; padding: 1rem; background: #fff; border: 1px solid #eee; border-radius: 4px;">
+ <div style="font-size: 0.9rem; color: #666;">Assets</div>
+ <div style="font-weight: bold; margin: 0.5rem 0;">3</div>
+ <div style="font-size: 0.7rem; color: #999;">(2 used)</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/079-highway-mile-marker.html b/mockups/079-highway-mile-marker.html
new file mode 100644
index 0000000..de2f32a
--- /dev/null
+++ b/mockups/079-highway-mile-marker.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>highway-mile-marker — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter&display=swap">
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #3a4a2c;
+ color: #fdfaf0;
+ height: 900px;
+ width: 1440px;
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background-color: #1a1a1a;
+ border-bottom: 2px solid #7fb069;
+ font-family: 'Bebas Neue', cursive;
+ font-size: 28px;
+ }
+ header select {
+ padding: 8px 12px;
+ font-size: 16px;
+ background-color: #fdfaf0;
+ color: #3a4a2c;
+ border: 2px solid #fcd13e;
+ border-radius: 4px;
+ margin-left: 20px;
+ }
+ header .status {
+ font-size: 18px;
+ padding: 8px 16px;
+ background-color: #7fb069;
+ border-radius: 4px;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 2px solid #fcd13e;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+ .message {
+ background-color: #1a1a1a;
+ padding: 12px 16px;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ }
+ .message.user {
+ background-color: #fcd13e;
+ color: #3a4a2c;
+ }
+ .message .timestamp {
+ font-size: 12px;
+ color: #7fb069;
+ margin-bottom: 4px;
+ }
+ .chat-input {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ font-size: 16px;
+ border: 2px solid #fcd13e;
+ border-radius: 4px;
+ background-color: #1a1a1a;
+ color: #fdfaf0;
+ }
+ .chat-input button {
+ padding: 10px 20px;
+ background-color: #fcd13e;
+ color: #3a4a2c;
+ border: none;
+ border-radius: 4px;
+ font-weight: bold;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 20px;
+ padding: 20px;
+ }
+ .panel {
+ background-color: #1a1a1a;
+ border: 2px solid #7fb069;
+ border-radius: 6px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .panel-header {
+ font-family: 'Bebas Neue', cursive;
+ font-size: 20px;
+ color: #fcd13e;
+ }
+ .panel-body {
+ font-size: 16px;
+ color: #fdfaf0;
+ line-height: 1.6;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>PROJECT HORMUZ</option>
+ <option>PROJECT TIGRIS</option>
+ <option>PROJECT ZAGROS</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="timestamp">MILE 412 • 14:32</div>
+ <div>/run-topic "ancient trade routes"</div>
+ </div>
+ <div class="message">
+ <div class="timestamp">MILE 412 • 14:33</div>
+ <div>TOPIC: ANCIENT TRADE ROUTES • STATUS: INITIATED</div>
+ </div>
+ <div class="message user">
+ <div class="timestamp">MILE 412 • 14:35</div>
+ <div>/stampede generate 3</div>
+ </div>
+ <div class="message">
+ <div class="timestamp">MILE 412 • 14:36</div>
+ <div>STAMPEDE: 3 UNITS DEPLOYED • NEXT CHECKPOINT: MILE 428</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="TYPE /COMMAND OR MESSAGE">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-body">
+ CURRENTLY UNASSIGNED. NEXT EXIT: 28. ROAD CONDITIONS: CLEAR. LAST CHECKPOINT: MILE 412.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-body">
+ LAST CHECKPOINT AT MILE 412. NEXT REST STOP: 28. ROAD CLOSED AHEAD. USE ALTERNATE ROUTE.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-body">
+ BLUEPRINTS FOR MILE 428. STAMPEDE PATHS MARKED. CONSTRUCTION ZONES: 2.5 MILES AHEAD.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-body">
+ VISUALS FOR EXIT 14. ROAD MAPS UPDATED. TRAFFIC LIGHTS: RED AT MILE 415. GREEN AT 420.
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/080-fire-watch-tower.html b/mockups/080-fire-watch-tower.html
new file mode 100644
index 0000000..b501187
--- /dev/null
+++ b/mockups/080-fire-watch-tower.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>fire-watch-tower-log — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=IBM+Plex+Mono:wght@400&display=swap">
+ <style>
+ :root {
+ --bg-ground: #fbf6e9;
+ --bg-primary: #1a0e00;
+ --accent-1: #3a4a2c;
+ --accent-2: #a83232;
+ --accent-3: #7a5c3e;
+ --font-display: 'Crimson Pro', serif;
+ --font-body: 'IBM Plex Mono', monospace;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: var(--font-body);
+ background: linear-gradient(135deg, var(--bg-ground) 0%, var(--accent-1) 100%);
+ color: var(--bg-primary);
+ display: flex;
+ flex-direction: column;
+ height: 900px;
+ width: 1440px;
+ margin: auto;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background: var(--bg-primary);
+ color: var(--bg-ground);
+ font-family: var(--font-display);
+ font-size: 1.5em;
+ border-bottom: 2px solid var(--accent-2);
+ }
+ header select {
+ padding: 8px 12px;
+ font-size: 1em;
+ background: var(--accent-1);
+ color: var(--bg-primary);
+ border: none;
+ border-radius: 4px;
+ margin-left: 20px;
+ }
+ header .status {
+ padding: 6px 12px;
+ background: var(--accent-2);
+ color: var(--bg-primary);
+ border-radius: 4px;
+ font-size: 0.9em;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: var(--accent-1);
+ color: var(--bg-primary);
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 20px;
+ }
+ .message {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ }
+ .message.user {
+ flex-direction: row-reverse;
+ }
+ .message-text {
+ background: var(--accent-3);
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 0.95em;
+ }
+ .chat-input {
+ display: flex;
+ gap: 10px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 10px;
+ font-size: 1em;
+ border: none;
+ border-radius: 4px;
+ background: var(--bg-ground);
+ color: var(--bg-primary);
+ }
+ .chat-input button {
+ padding: 10px 16px;
+ font-size: 1em;
+ background: var(--accent-2);
+ color: var(--bg-primary);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 20px;
+ padding: 20px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: var(--bg-ground);
+ color: var(--bg-primary);
+ border: 2px solid var(--accent-3);
+ border-radius: 6px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .panel-header {
+ font-family: var(--font-display);
+ font-size: 1.2em;
+ color: var(--accent-2);
+ }
+ .panel-body {
+ font-size: 0.95em;
+ line-height: 1.4;
+ color: var(--accent-3);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project Ember</option>
+ <option>Project Ash</option>
+ <option>Project Blaze</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="message-text">/run-topic "Midnight Forest"</div>
+ </div>
+ <div class="message">
+ <div class="message-text">Topic initiated. Shadows stretch long. The firelight flickers. Ash falls like snow in the dead of night.</div>
+ </div>
+ <div class="message user">
+ <div class="message-text">/stampede generate 3 variants</div>
+ </div>
+ <div class="message">
+ <div class="message-text">Stampede engaged. The embers rise in a spiral, each variant a different shade of ruin. The wind carries the scent of burnt pine and old parchment.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">The ember glows faintly in the hollow of the tree. Smoke curls upward, thin and persistent. A single flame lingers at the edge of the frame, like a secret.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">Sketches in charcoal and burnt umber. The lines are jagged, like the edges of a storm. A single charcoal line loops around the page, never quite closing.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">Layers of fire and ash. The canvas is smudged with the residue of a thousand embers. A single flame flickers in the corner, its glow casting long shadows.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">A collage of burnt paper and cracked wood. The colors are deep, like the heart of a dying fire. A single word, "ASH," is etched into the center in charcoal.</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/081-fishing-charter.html b/mockups/081-fishing-charter.html
new file mode 100644
index 0000000..a876def
--- /dev/null
+++ b/mockups/081-fishing-charter.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>fishing-charter-board — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter&display=swap">
+ <style>
+ html { height: 100%; }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #0e2a47;
+ color: #dcd0a8;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 32px;
+ background: linear-gradient(135deg, #0e2a47, #7fb069);
+ color: #fdfaf0;
+ font-family: 'Special Elite', cursive;
+ font-size: 1.8em;
+ position: relative;
+ z-index: 10;
+ }
+ header select {
+ padding: 8px 12px;
+ background: #dcd0a8;
+ color: #0e2a47;
+ border: none;
+ border-radius: 4px;
+ font-size: 1em;
+ margin-left: 16px;
+ }
+ header .status {
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 0.9em;
+ background: #bf3922;
+ color: #fdfaf0;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background: #0e2a47;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .chat-messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 24px;
+ }
+ .message {
+ background: #dcd0a8;
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 80%;
+ word-wrap: break-word;
+ font-size: 0.95em;
+ }
+ .message.user {
+ align-self: flex-end;
+ background: #7fb069;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ input {
+ flex: 1;
+ padding: 10px;
+ border: none;
+ border-radius: 4px;
+ background: #dcd0a8;
+ color: #0e2a47;
+ }
+ button {
+ padding: 10px 16px;
+ background: #bf3922;
+ color: #fdfaf0;
+ border: none;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: #fdfaf0;
+ border: 2px solid #dcd0a8;
+ border-radius: 8px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .panel-header {
+ font-family: 'Special Elite', cursive;
+ font-size: 1.2em;
+ color: #bf3922;
+ }
+ .panel-body {
+ font-size: 0.95em;
+ line-height: 1.4;
+ color: #0e2a47;
+ }
+ .panel-body::before {
+ content: "• ";
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project Delta</option>
+ <option>Horizon 2025</option>
+ <option>Tidal UI</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-messages">
+ <div class="message user">Captain's Log: 06:00, anchor raised. /run-topic: 'Morning Catch'</div>
+ <div class="message">[System] Topic 'Morning Catch' initiated. Deploying drift net protocols.</div>
+ <div class="message user">/stampede: 'Rough Seas' scenario</div>
+ <div class="message">[System] Warning: 40lb tuna detected. Adjusting buoyancy parameters.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /help for commands">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">Current mockup: 3D rendered fishing net with biodegradable polymer filaments. Tension at 120% capacity.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">Sketches of hull design with hydrodynamic curves. Note: add 2 more anchor points to stern.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">Prototype: interactive sonar display. Current issue: false readings during dawn twilight.</div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">Social media template: "Hooked on Design" campaign. Add 3 more fish icons to the collage.</div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/082-carpenter-bench.html b/mockups/082-carpenter-bench.html
new file mode 100644
index 0000000..fbcbef9
--- /dev/null
+++ b/mockups/082-carpenter-bench.html
@@ -0,0 +1,223 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>carpenter-workbench — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Source+Code+Pro:wght@400&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Source Code Pro', monospace;
+ background-color: #fbf6e9;
+ color: #1a0e00;
+ height: 900px;
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ }
+ header {
+ background-color: #dba673;
+ color: #1a0e00;
+ padding: 16px 24px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-family: 'Crimson Pro', serif;
+ font-size: 24px;
+ border-bottom: 4px solid #7a5c3e;
+ }
+ header .brand {
+ font-weight: 700;
+ }
+ header .project-picker {
+ background: #fbf6e9;
+ border: 2px solid #3a3a3a;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+ header .status {
+ background: #1a0e00;
+ color: #fbf6e9;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ background-color: #fbf6e9;
+ border-right: 4px solid #3a3a3a;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ padding: 16px;
+ overflow-y: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .message.user {
+ background-color: #3a3a3a;
+ color: #fbf6e9;
+ padding: 12px;
+ border-radius: 6px;
+ max-width: 70%;
+ }
+ .message.system {
+ background-color: #7a5c3e;
+ color: #fbf6e9;
+ padding: 12px;
+ border-radius: 6px;
+ max-width: 70%;
+ }
+ .chat-input {
+ display: flex;
+ padding: 12px;
+ border-top: 2px solid #3a3a3a;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 14px;
+ border: 2px solid #3a3a3a;
+ border-radius: 4px;
+ margin-right: 8px;
+ }
+ .chat-input button {
+ background-color: #1a0e00;
+ color: #fbf6e9;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ padding: 16px;
+ }
+ .sub-panels {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ flex: 1;
+ overflow-y: auto;
+ }
+ .panel {
+ background-color: #fbf6e9;
+ border: 2px solid #3a3a3a;
+ border-radius: 6px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Crimson Pro', serif;
+ font-size: 18px;
+ margin-bottom: 12px;
+ color: #1a0e00;
+ }
+ .panel-body {
+ font-family: 'Source Code Pro', monospace;
+ color: #3a3a3a;
+ }
+ .panel-body pre {
+ font-size: 14px;
+ background: #fbf6e9;
+ border: 1px solid #7a5c3e;
+ padding: 8px;
+ border-radius: 4px;
+ overflow-x: auto;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select class="project-picker">
+ <option>Project Atlas</option>
+ <option>Project Horizon</option>
+ <option>Project Forge</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: Joining the grain at 45 degrees</div>
+ <div class="message system">Adjusting router bit to 45°, ensuring kerf matches oak's growth rings</div>
+ <div class="message user">/stampede: 3x dovetail joints</div>
+ <div class="message system">Engaging three routers in synchronized motion, cutting interlocking tails and pins</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <pre>
+// Mockup of mortise and tenon joint
+|------------------|
+| |
+| |
+| |
+|------------------|
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <pre>
+[Hand-drawn sketch]
+┌───────────────┐
+│ ∠ ∠ │
+│ ∠ ∠ │
+└───────────────┘
+"Align tenon shoulders with mortise depth"
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <pre>
+[Design canvas]
+- 3D model of a table leg with through-tenons
+- Material: White oak, grain direction aligned
+- Joint tolerance: 0.002" clearance
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <pre>
+[Collage]
+- Chisel marks on a workbench
+- Router table with dovetail jig
+- Hand-carved joinery samples
+Tagline: "Where wood meets intention"
+ </pre>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/083-bookbinder-press.html b/mockups/083-bookbinder-press.html
new file mode 100644
index 0000000..1178d91
--- /dev/null
+++ b/mockups/083-bookbinder-press.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>bookbinder-press — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #fff8e7; color: #1a0e00; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; background: #1a0e00; color: #fff8e7; font-family: 'Cormorant Garamond', serif; }
+ header h1 { font-size: 1.8em; }
+ .project-picker { padding: 8px 16px; background: #7a1f1a; border-radius: 4px; color: #fff8e7; }
+ .status { padding: 8px 16px; background: #d4af37; border-radius: 4px; color: #1a0e00; }
+ main { display: flex; flex: 1; }
+ .chat-pane { width: 40%; border-right: 1px solid #7a5c3e; overflow-y: auto; }
+ .chat-log { padding: 24px; }
+ .chat-message { margin: 16px 0; }
+ .chat-message.user { text-align: right; }
+ .chat-message.system { text-align: left; }
+ .chat-input { position: relative; padding: 24px; }
+ .chat-input input { width: 100%; padding: 12px; border: 2px solid #7a5c3e; border-radius: 6px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
+ .sub-panel { background: #fff8e7; border: 2px solid #7a5c3e; padding: 24px; }
+ .sub-panel h2 { color: #1a0e00; font-family: 'Cormorant Garamond', serif; margin-bottom: 16px; }
+ .sub-panel p { color: #7a1f1a; }
+ .sub-panel .accent { color: #d4af37; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Four Horsemen</h1>
+ <div>
+ <select class="project-picker">
+ <option>End Papers of the Eastern Sky</option>
+ <option>The Foil-Stamped Codex</option>
+ <option>Case-Bound Ephemera</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message system">[system] Ready to bind new content. Type /help for commands.</div>
+ <div class="chat-message user">/run-topic "The Binding of Light"</div>
+ <div class="chat-message system">[system] Topic "The Binding of Light" initiated. Press marks detected.</div>
+ <div class="chat-message user">/stampede "press marks"</div>
+ <div class="chat-message system">[system] Stampede mode engaged. Foil-stamped overlays applied to 32 pages.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message..." />
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>Preview</h2>
+ <p>A mockup of the <span class="accent">end papers</span> from <em>The Foil-Stamped Codex</em>, rendered in <span class="accent">saffron vellum</span> with <span class="accent">gold leaf</span> filigree. The <span class="accent">press marks</span> are faintly visible in the margins.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Paper</h2>
+ <p>Selected stock: <span class="accent">Japanese washi</span> (220gsm). Texture profile: <span class="accent">rough</span> with <span class="accent">natural fiber</span> inclusions. Acid-free, archival quality. Ideal for <span class="accent">foil-stamping</span> and <span class="accent">embossing</span>.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Figma</h2>
+ <p>Current layer: <span class="accent">Press Plate 7</span>. Elements include <span class="accent">gold foil</span> paths, <span class="accent">ink bleed</span> effects, and <span class="accent">case-bound</span> spine mockups. Linked to <span class="accent">Canva</span> for real-time preview.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Canva</h2>
+ <p>Template applied: <span class="accent">Bookbinder's Portfolio</span>. Includes <span class="accent">foil-stamped</span> headers, <span class="accent">end paper</span> placeholders, and <span class="accent">press mark</span> overlays. Dimensions: <span class="accent">10.5" x 8.5"</span> (US letter).</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/084-lock-key-cutter.html b/mockups/084-lock-key-cutter.html
new file mode 100644
index 0000000..28118c2
--- /dev/null
+++ b/mockups/084-lock-key-cutter.html
@@ -0,0 +1,177 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>locksmith-shop — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'IBM Plex Mono', monospace;
+ background-color: #1a1a1a;
+ color: #fdfaf0;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ padding: 1rem 2rem;
+ background-color: #0a0a0a;
+ border-bottom: 1px solid #666666;
+ font-family: 'Special Elite', cursive;
+ font-size: 1.5rem;
+ color: #d4af37;
+ }
+ header select {
+ margin-left: auto;
+ padding: 0.5rem 1rem;
+ background-color: #0a0a0a;
+ border: 1px solid #666666;
+ color: #fdfaf0;
+ font-family: 'IBM Plex Mono', monospace;
+ }
+ header .status {
+ margin-left: 1rem;
+ padding: 0.3rem 0.8rem;
+ background-color: #333333;
+ border: 1px solid #666666;
+ color: #d4af37;
+ font-size: 0.8rem;
+ border-radius: 4px;
+ }
+ .container {
+ display: flex;
+ flex: 1;
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid #666666;
+ overflow-y: auto;
+ padding: 1rem;
+ background-color: #0a0a0a;
+ }
+ .chat-log {
+ max-height: 80vh;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+ .message {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ }
+ .message.user {
+ align-self: flex-end;
+ }
+ .message.system {
+ align-self: flex-start;
+ }
+ .message .sender {
+ font-weight: bold;
+ color: #d4af37;
+ }
+ .chat-input {
+ margin-top: 1rem;
+ display: flex;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 0.5rem;
+ background-color: #0a0a0a;
+ border: 1px solid #666666;
+ color: #fdfaf0;
+ font-family: 'IBM Plex Mono', monospace;
+ }
+ .chat-input button {
+ padding: 0.5rem 1rem;
+ background-color: #d4af37;
+ color: #0a0a0a;
+ border: none;
+ font-family: 'IBM Plex Mono', monospace;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ padding: 1rem;
+ }
+ .panel {
+ background-color: #0a0a0a;
+ border: 1px solid #666666;
+ padding: 1rem;
+ }
+ .panel h2 {
+ font-family: 'Special Elite', cursive;
+ color: #d4af37;
+ margin-top: 0;
+ }
+ .panel p {
+ color: #666666;
+ font-size: 0.9rem;
+ margin: 0.5rem 0 0;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <select>
+ <option>Project Blacksmith</option>
+ <option>Vault Protocol</option>
+ <option>Keymaster Initiative</option>
+ </select>
+ <span class="status">idle</span>
+ </header>
+ <div class="container">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">
+ <div class="sender">USER</div>
+ <div>/run-topic "Tumbler Engraving"</div>
+ </div>
+ <div class="message system">
+ <div class="sender">SYSTEM</div>
+ <div>Topic initiated. Engraving tumbler 3. Progress: 42%.</div>
+ </div>
+ <div class="message user">
+ <div class="sender">USER</div>
+ <div>/stampede "Vault 7"</div>
+ </div>
+ <div class="message system">
+ <div class="sender">SYSTEM</div>
+ <div>Stampede mode engaged. Target: Vault 7. Status: Active.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="> /command">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p>Current schematic: Tumbler alignment matrix. Status: Unlocked. Layer: 'Handle' (active).</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p>Blueprints for the Iron Vault. Revision 7. Note: Handle curvature adjusted. Stamp: 'HORMUZ'</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p>UI mockup: Master key interface. Layer: 'Handle' (locked). Component: 'Combination Lock' (v2).</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p>Mockup: Combination lock tutorial. Background: Brass texture. Text: "Turn clockwise 3 times."</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/085-horology-galaxy.html b/mockups/085-horology-galaxy.html
new file mode 100644
index 0000000..e76b267
--- /dev/null
+++ b/mockups/085-horology-galaxy.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>moon-phase-watch — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #0a0a14;
+ --primary: #d4af37;
+ --accent1: #a4c5e8;
+ --accent2: #fdfaf0;
+ --text: #fdfaf0;
+ --border: #1a1a1a;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }
+ body { display: flex; flex-direction: column; }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 24px 48px;
+ background: var(--accent2);
+ border-bottom: 1px solid var(--border);
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 24px;
+ letter-spacing: 1px;
+ }
+ header .brand { font-weight: 700; }
+ header .dropdown {
+ padding: 8px 16px;
+ background: var(--primary);
+ border-radius: 4px;
+ color: var(--bg);
+ font-size: 14px;
+ }
+ header .status {
+ padding: 8px 16px;
+ background: var(--accent1);
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 600;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--border);
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ background: var(--accent2);
+ border-right: 1px solid var(--border);
+ }
+ .chat-message {
+ margin: 16px 0;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message .text {
+ background: var(--primary);
+ color: var(--bg);
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 14px;
+ }
+ .chat-message .timestamp {
+ font-size: 10px;
+ color: var(--accent1);
+ margin-top: 4px;
+ text-align: right;
+ }
+ .chat-input {
+ display: flex;
+ padding: 16px 24px;
+ background: var(--accent2);
+ border-top: 1px solid var(--border);
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+ .chat-input button {
+ margin-left: 12px;
+ padding: 8px 16px;
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background: var(--accent2);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ }
+ .panel-header {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 18px;
+ font-weight: 700;
+ margin-bottom: 16px;
+ color: var(--primary);
+ }
+ .panel-content {
+ font-size: 14px;
+ line-height: 1.6;
+ color: var(--text);
+ }
+ .panel-content code {
+ color: var(--primary);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">Four Horsemen</div>
+ <div>
+ <div class="dropdown">Project: <span>Horizon Alignment</span></div>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic temporal alignment</div>
+ <div class="timestamp">22:47</div>
+ </div>
+ <div class="chat-message">
+ <div class="text">Initializing perpetual cycle: lunar phase 3.14</div>
+ <div class="timestamp">22:48</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede 5</div>
+ <div class="timestamp">22:50</div>
+ </div>
+ <div class="chat-message">
+ <div class="text">Engaging 5-axis temporal compression. Expected completion: 03:14</div>
+ <div class="timestamp">22:51</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="chronological command">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <p>Current temporal alignment: <code>3.14</code> of lunar cycle</p>
+ <p>Visual syntax: <code>perpetual</code> mode active</p>
+ <p>Next phase: <code>23:14</code> (GMT+0)</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ <p>Sketching the equation of time: <code>1728</code> iterations complete</p>
+ <p>Margin notes: <code>leap-year</code> correction applied</p>
+ <p>Current focus: <code>horizon</code> convergence</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ <p>Figuring the matrix: <code>8</code> layers of temporal depth</p>
+ <p>Component: <code>moon-phase-watch</code> v1.0.3</p>
+ <p>Constraints: <code>1440x900</code> viewport lock</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ <p>Lattice composition: <code>12</code> nodes active</p>
+ <p>Current theme: <code>equation-of-time</code></p>
+ <p>Alignment: <code>perpetual</code> (no end)</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/086-espresso-machine.html b/mockups/086-espresso-machine.html
new file mode 100644
index 0000000..a92ab03
--- /dev/null
+++ b/mockups/086-espresso-machine.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>espresso-machine-gauge — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Source+Sans+Pro:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Source Sans Pro', sans-serif;
+ background-color: #1a0d08;
+ color: #fdfaf3;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 24px;
+ height: 60px;
+ background: #3a3a3a;
+ border-bottom: 2px solid #d4af37;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.5rem;
+ }
+ header select {
+ padding: 8px 12px;
+ background: #fdfaf3;
+ color: #1a0d08;
+ border: 1px solid #d4af37;
+ border-radius: 4px;
+ font-family: inherit;
+ font-size: 1rem;
+ }
+ header .status {
+ padding: 8px 16px;
+ border-radius: 20px;
+ font-weight: 600;
+ font-size: 0.9rem;
+ }
+ .status[idle] { background: #a83232; color: #fdfaf3; }
+ .status[running] { background: #d4af37; color: #1a0d08; }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ background: #fdfaf3;
+ color: #1a0d08;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ font-size: 0.95rem;
+ }
+ .chat-log .user {
+ margin-bottom: 12px;
+ font-weight: 600;
+ }
+ .chat-log .system {
+ margin-bottom: 12px;
+ color: #a83232;
+ }
+ .chat-input {
+ display: flex;
+ border-top: 1px solid #d4af37;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 12px;
+ font-size: 1rem;
+ border: none;
+ outline: none;
+ }
+ .chat-input button {
+ background: #d4af37;
+ color: #1a0d08;
+ border: none;
+ padding: 12px 24px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 16px;
+ padding: 24px;
+ background: #1a0d08;
+ color: #fdfaf3;
+ overflow-y: auto;
+ }
+ .panel {
+ display: flex;
+ flex-direction: column;
+ background: #3a3a3a;
+ border: 1px solid #d4af37;
+ border-radius: 8px;
+ overflow: hidden;
+ }
+ .panel-header {
+ padding: 16px;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.2rem;
+ background: #d4af37;
+ color: #1a0d08;
+ text-align: center;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 24px;
+ font-size: 0.95rem;
+ line-height: 1.4;
+ }
+ .panel-body pre {
+ font-family: monospace;
+ font-size: 0.9rem;
+ background: #fdfaf3;
+ color: #1a0d08;
+ padding: 12px;
+ border: 1px solid #d4af37;
+ border-radius: 4px;
+ overflow-x: auto;
+ white-space: pre-wrap;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div>
+ <select>
+ <option>Project Delta</option>
+ <option>Project Echo</option>
+ <option>Project Foxtrot</option>
+ </select>
+ <span class="status idle">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="user">/run-topic: Barista Workflow Optimization</div>
+ <div class="system">Initializing topic: 9 bar pressure, 93°C steam, 25 sec extraction, 36g yield. Grinding beans...</div>
+ <div class="user">/stampede: Generate 3 variants of espresso cup design</div>
+ <div class="system">Stampede engaged. Processing 3 variants: variant-1 (copper), variant-2 (matte black), variant-3 (gold). Expected completion: 25 sec.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <pre>┌───────────────┐
+│ 9 BAR PRESSURE │
+│ 93°C STEAM │
+│ 25 SEC EXTRACTION │
+└───────────────┘
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <p>Sketch: Espresso machine gauge layout</p>
+ <p>• 36g yield indicator</p>
+ <p>• Pressure dial with 9 bar mark</p>
+ <p>• Steam wand temperature display</p>
+ <p>• Extraction time countdown</p>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <p>Component tree:</p>
+ <pre>├── GaugeFace
+│ ├── PressureIndicator
+│ ├── TemperatureIndicator
+│ └── ExtractionTimer
+└── ButtonBar
+ ├── RunTopic
+ ├── Stampede
+ └── Cancel</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <p>Template: "Espresso Machine Dashboard" (A4)</p>
+ <p>• 36g yield icon: Coffee bean with 36g text</p>
+ <p>• 9 bar icon: Pressure gauge with 9 bar mark</p>
+ <p>• 25 sec icon: Hourglass with 25 sec text</p>
+ <p>• 93°C icon: Steam symbol with temperature</p>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/087-ham-radio-shack.html b/mockups/087-ham-radio-shack.html
new file mode 100644
index 0000000..d5130ed
--- /dev/null
+++ b/mockups/087-ham-radio-shack.html
@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>ham-radio-shack — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Inter&display=swap">
+ <style>
+ :root {
+ --bg: #0a0a0a;
+ --primary: #39ff14;
+ --accent: #ff5252;
+ --mid: #666666;
+ --dark: #1a1a1a;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--primary); }
+ body { display: flex; flex-direction: column; }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 2rem;
+ background: var(--dark);
+ color: var(--primary);
+ font-family: 'VT323', monospace;
+ position: relative;
+ z-index: 100;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ height: 2px;
+ background: var(--primary);
+ }
+ .brand { font-size: 1.5rem; }
+ .project-picker {
+ padding: 0.5rem 1rem;
+ background: var(--mid);
+ border: 1px solid var(--primary);
+ border-radius: 5px;
+ color: var(--primary);
+ }
+ .status-indicator {
+ padding: 0.3rem 0.8rem;
+ background: var(--accent);
+ border: 1px solid var(--primary);
+ border-radius: 5px;
+ font-size: 0.8rem;
+ }
+ .container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ padding: 2rem;
+ border-right: 1px solid var(--mid);
+ overflow-y: auto;
+ }
+ .chat-log {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .message {
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+ }
+ .timestamp { color: var(--mid); font-size: 0.8rem; }
+ .user { font-weight: bold; }
+ .content { background: var(--dark); padding: 0.5rem 1rem; border-radius: 5px; }
+ .chat-input {
+ margin-top: 2rem;
+ display: flex;
+ gap: 0.5rem;
+ }
+ .input-field {
+ flex: 1;
+ padding: 0.5rem;
+ background: var(--mid);
+ color: var(--primary);
+ border: none;
+ border-radius: 5px;
+ }
+ .send-btn {
+ padding: 0.5rem 1rem;
+ background: var(--primary);
+ color: var(--bg);
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ padding: 2rem;
+ }
+ .panel {
+ background: var(--dark);
+ border: 1px solid var(--mid);
+ border-radius: 5px;
+ padding: 1rem;
+ overflow: hidden;
+ }
+ .panel-header {
+ font-family: 'VT323', monospace;
+ font-size: 1.2rem;
+ margin-bottom: 1rem;
+ color: var(--primary);
+ }
+ .panel-content {
+ font-family: 'Inter', sans-serif;
+ color: var(--mid);
+ font-size: 0.9rem;
+ }
+ .panel-content code {
+ color: var(--primary);
+ }
+ .panel-content::before {
+ content: "CQ CQ CQ, this is W6XYZ, 73";
+ display: block;
+ margin-bottom: 1rem;
+ }
+ .panel-content::after {
+ content: "73, W6XYZ";
+ display: block;
+ margin-top: 1rem;
+ color: var(--accent);
+ }
+ @media (max-width: 1024px) {
+ .container { flex-direction: column; }
+ .left-pane, .right-pane { width: 100%; }
+ .right-pane { grid-template-columns: 1fr; }
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select class="project-picker">
+ <option>Project HORMUZ</option>
+ <option>Project SABR</option>
+ <option>Project ZENITH</option>
+ </select>
+ <div class="status-indicator">idle</div>
+ </div>
+ </header>
+ <div class="container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message">
+ <div class="timestamp">[13:45:22]</div>
+ <div class="user">USER</div>
+ <div class="content">/run-topic "Quantum Typography"</div>
+ </div>
+ <div class="message">
+ <div class="timestamp">[13:45:25]</div>
+ <div class="user">ORCHESTRATOR</div>
+ <div class="content">Initiating topic: Quantum Typography. Engaging 3D glyphs. Signal strength: 5/5.</div>
+ </div>
+ <div class="message">
+ <div class="timestamp">[13:47:12]</div>
+ <div class="user">USER</div>
+ <div class="content">/stampede</div>
+ </div>
+ <div class="message">
+ <div class="timestamp">[13:47:15]</div>
+ <div class="user">ORCHESTRATOR</div>
+ <div class="content">Stampede mode activated. Designing in 8.3.3.7. Antenna alignment: 45 degrees.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" class="input-field" placeholder="Enter command..." />
+ <button class="send-btn">SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-content">
+ <div>Design mockup in progress. Antenna alignment: 45 degrees.</div>
+ <div>Signal strength: 5/5. Frequency: 7.2 MHz.</div>
+ <div>Current glyph: ▓▓▓▓▓▓▓▓▓▓</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-content">
+ <div>Sketch: 12x18 grid. Notes: "Use 39ff14 for primary elements."</div>
+ <div>Wireframe: 2x3 layout with CRT scanlines.</div>
+ <div>Margin: 1.5cm. Font: VT323 at 12pt.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-content">
+ <div>Frame: 1920x1080. Layers: 12. Artboards: 3.</div>
+ <div>Components: "Radio Knob" (2 instances). "Signal Meter" (1 instance).</div>
+ <div>Current frame: "Quantum Typography Mockup"</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-content">
+ <div>Template: A4. Background: #0a0a0a with 2px noise overlay.</div>
+ <div>Elements: 3 text boxes (primary color), 2 icons (radio waves).</div>
+ <div>Export settings: 300dpi, CMYK.</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/088-darkmode-magazine.html b/mockups/088-darkmode-magazine.html
new file mode 100644
index 0000000..d8f211d
--- /dev/null
+++ b/mockups/088-darkmode-magazine.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>dark-mode-editorial — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ color: #fdfaf0;
+ background-color: #0a0a0a;
+ height: 100%;
+ width: 100%;
+ overflow-x: hidden;
+ }
+ body {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #1a1a1a;
+ border-bottom: 1px solid #333;
+ }
+ header h1 {
+ font-family: 'Playfair Display', serif;
+ font-size: 1.5rem;
+ margin: 0;
+ }
+ .project-picker, .status-indicator {
+ font-family: 'Inter', sans-serif;
+ font-size: 0.9rem;
+ }
+ .project-picker {
+ position: relative;
+ }
+ .project-picker select {
+ background-color: #0a0a0a;
+ color: #fdfaf0;
+ border: 1px solid #333;
+ padding: 4px 8px;
+ font-size: 0.9rem;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%23fdfaf0' d='M3 3L5 7L7 3'/></svg>");
+ background-repeat: no-repeat;
+ background-position: right 8px center;
+ }
+ .status-indicator {
+ padding: 4px 8px;
+ background-color: #0a0a0a;
+ border: 1px solid #333;
+ border-radius: 4px;
+ }
+ .status-indicator.running::after {
+ content: "running";
+ color: #d4af37;
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ background-color: #0a0a0a;
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .chat-log {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 24px;
+ }
+ .message.user {
+ align-self: flex-end;
+ background-color: #a83232;
+ color: #fdfaf0;
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ }
+ .message.system {
+ align-self: flex-start;
+ background-color: #1a1a1a;
+ color: #d4af37;
+ padding: 12px 16px;
+ border-radius: 8px;
+ max-width: 70%;
+ }
+ .chat-input {
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 1rem;
+ background-color: #0a0a0a;
+ border: 1px solid #333;
+ color: #fdfaf0;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background-color: #d4af37;
+ color: #0a0a0a;
+ border: none;
+ font-weight: 600;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px;
+ padding: 24px;
+ overflow-y: auto;
+ }
+ .panel {
+ background-color: #0a0a0a;
+ border: 1px solid #1a1a1a;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ padding: 16px;
+ }
+ .panel-header {
+ font-family: 'Playfair Display', serif;
+ font-size: 1.2rem;
+ margin-bottom: 12px;
+ color: #d4af37;
+ }
+ .panel-body {
+ font-size: 0.95rem;
+ line-height: 1.6;
+ color: #fdfaf0;
+ }
+ .panel-body code {
+ color: #a83232;
+ background-color: #1a1a1a;
+ padding: 2px 4px;
+ border-radius: 4px;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>Four Horsemen</h1>
+ <div>
+ <div class="project-picker">
+ <select>
+ <option value="project1">Hormuz Protocol</option>
+ <option value="project2">Oxidized Typologies</option>
+ <option value="project3">Linguistic Absinthe</option>
+ </select>
+ </div>
+ <div class="status-indicator idle">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: "The Semiotics of Absinthe"</div>
+ <div class="message system">Parsing lexical constructs... Establishing visual metaphors for laudanum and green flame.</div>
+ <div class="message user">/stampede: "Typography as a weapon of seduction"</div>
+ <div class="message system">Engaging typeface agitators. Expect 37% more grotesques, 15% fewer serifs.</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type command or message..." />
+ <button>→</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ Mockup rendering of <code>/run-topic</code> output. A single page with 12pt leading, 30% opacity halftones, and a 1920s newspaper column layout. The absinthe green is a #2e7d32, but we're using a more spectral variant.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ Notes on the <code>/stampede</code> directive: "Typography as a weapon of seduction" requires a typeface with aggressive serifs and a 20% increase in x-height. Current candidates: Berling, Kabel, and a 1930s propaganda font from the USSR.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ Component library for the <code>/run-topic</code> visual metaphors. Includes a laudanum bottle icon (vector), a green flame SVG, and a 1920s newspaper texture. All assets are in 300dpi, with CMYK profiles for print.
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ Template for "The Semiotics of Absinthe" poster. Uses a 3:2 aspect ratio, a 1920s newspaper column layout, and a green flame gradient. The text is in Playfair Display, with a 12pt leading and 30% opacity halftones.
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/089-minimalist-spa.html b/mockups/089-minimalist-spa.html
new file mode 100644
index 0000000..30228a9
--- /dev/null
+++ b/mockups/089-minimalist-spa.html
@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>minimalist-spa — Four Horsemen Studio</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; margin: 0; padding: 0; }
+ body {
+ background: #fbf6e9;
+ color: #1a1a1a;
+ font-family: 'Inter', sans-serif;
+ height: 900px;
+ width: 1440px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ }
+ header {
+ height: 60px;
+ background: #fff8e7;
+ display: flex;
+ align-items: center;
+ padding: 0 24px;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.5rem;
+ position: relative;
+ }
+ header select {
+ margin-left: auto;
+ padding: 8px 12px;
+ border: 1px solid #dba673;
+ background: #fff8e7;
+ color: #1a1a1a;
+ font-family: 'Inter', sans-serif;
+ font-size: 0.9rem;
+ }
+ header .status {
+ position: absolute;
+ right: 24px;
+ padding: 4px 8px;
+ background: #3a4a2c;
+ color: #fff8e7;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid #dba673;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ background: #fff8e7;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .chat-message {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message.system {
+ align-self: flex-start;
+ }
+ .chat-message .text {
+ background: #fff8e7;
+ padding: 12px 16px;
+ border: 1px solid #dba673;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 0.95rem;
+ }
+ .chat-input {
+ padding: 12px 24px;
+ display: flex;
+ gap: 8px;
+ background: #fbf6e9;
+ border-top: 1px solid #dba673;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 1px solid #dba673;
+ border-radius: 4px;
+ font-size: 0.95rem;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background: #3a4a2c;
+ color: #fff8e7;
+ border: none;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background: #fff8e7;
+ border: 1px solid #dba673;
+ border-radius: 8px;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .panel h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 1.2rem;
+ color: #3a4a2c;
+ }
+ .panel .content {
+ font-size: 0.95rem;
+ line-height: 1.6;
+ color: #1a1a1a;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN</span>
+ <select>
+ <option>Project Alchemy</option>
+ <option>Project Hymn</option>
+ <option>Project Loom</option>
+ </select>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="text">/run-topic "ancient rituals"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Initializing ritual sequence... glyphs aligning to the cardinal axes.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="text">/stampede "neon geometry"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="text">Stampede engaged. Shapes are fracturing into prismatic shards.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type a command...">
+ <button>→</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <div class="content">
+ The canvas breathes in the rhythm of the unseen, each stroke a whisper of intention. A single line curves like a question, unresolved.
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <div class="content">
+ Ink flows where the mind pauses, tracing the contours of forgotten knowledge. Margins are sacred, left untouched by the chaos of thought.
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <div class="content">
+ Layers unfold like petals, revealing the skeleton of the design. Each component is a silent prayer, waiting for the hand that will shape it.
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <div class="content">
+ Templates dissolve, leaving only the essence of the concept. A grid of possibilities hums with potential, awaiting the spark of inspiration.
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/090-nasa-mission-patch.html b/mockups/090-nasa-mission-patch.html
new file mode 100644
index 0000000..328f42f
--- /dev/null
+++ b/mockups/090-nasa-mission-patch.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>nasa-mission-patch — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ color: #fdfaf0;
+ background-color: #0a0e1a;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #0e3a5f;
+ font-family: 'Cinzel', serif;
+ font-size: 24px;
+ letter-spacing: 1px;
+ }
+ header .brand { color: #fcd13e; }
+ header select {
+ padding: 8px 12px;
+ border: 2px solid #a83232;
+ border-radius: 4px;
+ background-color: #0a0e1a;
+ color: #fdfaf0;
+ font-size: 14px;
+ margin-left: 16px;
+ }
+ header .status {
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 12px;
+ background-color: #a83232;
+ color: #0a0e1a;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid #333;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 16px;
+ overflow-y: auto;
+ background-color: #0a0e1a;
+ }
+ .chat-message {
+ margin: 12px 0;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ }
+ .chat-message.user::before {
+ content: "AGENT:";
+ color: #a83232;
+ font-weight: 600;
+ margin-bottom: 4px;
+ }
+ .chat-message.system {
+ align-self: flex-start;
+ }
+ .chat-message.system::before {
+ content: "MISSION CONTROL:";
+ color: #fcd13e;
+ font-weight: 600;
+ margin-bottom: 4px;
+ }
+ .chat-message .content {
+ background-color: #0e3a5f;
+ padding: 10px 14px;
+ border-radius: 8px;
+ max-width: 70%;
+ font-size: 14px;
+ }
+ .chat-input {
+ display: flex;
+ padding: 12px 16px;
+ border-top: 1px solid #333;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: none;
+ background-color: #0a0e1a;
+ color: #fdfaf0;
+ font-size: 14px;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ margin-left: 8px;
+ background-color: #fcd13e;
+ color: #0a0e1a;
+ border: none;
+ font-weight: 600;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 16px;
+ padding: 16px;
+ overflow-y: auto;
+ }
+ .panel {
+ background-color: #0e3a5f;
+ border: 1px solid #333;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Cinzel', serif;
+ font-size: 18px;
+ color: #fcd13e;
+ margin-bottom: 12px;
+ }
+ .panel-content {
+ font-size: 14px;
+ line-height: 1.5;
+ color: #fdfaf0;
+ }
+ .panel-content pre {
+ font-family: 'Inter', monospace;
+ font-size: 12px;
+ background-color: #0a0e1a;
+ padding: 8px;
+ border: 1px solid #333;
+ border-radius: 4px;
+ overflow-x: auto;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select>
+ <option>Project Artemis</option>
+ <option>Project Valkyrie</option>
+ <option>Project Horus</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="content">/run-topic "Design Review"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="content">Initializing topic: Design Review. Engaging generative AI for concept ideation. Status: STS-141, crew of seven, systems nominal.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="content">/stampede "UI/UX"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="content">Executing stampede protocol for UI/UX. Deploying swarm intelligence across 7 nodes. Estimated completion: 12 minutes, 45 seconds.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or message">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <p>Mission patch mock-up: <br><br>
+ <pre>
+ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
\ No newline at end of file
diff --git a/mockups/091-voting-ballot.html b/mockups/091-voting-ballot.html
new file mode 100644
index 0000000..aa50502
--- /dev/null
+++ b/mockups/091-voting-ballot.html
@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>voting-ballot — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Sans:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ padding: 0;
+ font-family: 'IBM Plex Sans', sans-serif;
+ background-color: #fdfaf0;
+ color: #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background-color: #0e2a47;
+ color: #fdfaf0;
+ font-family: 'Special Elite', cursive;
+ font-size: 24px;
+ position: relative;
+ }
+ header::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background-color: #a83232;
+ }
+ .project-picker {
+ position: relative;
+ margin-left: 24px;
+ }
+ .project-picker select {
+ padding: 8px 16px;
+ border: 2px solid #666666;
+ border-radius: 4px;
+ background-color: #fdfaf0;
+ color: #1a1a1a;
+ font-size: 14px;
+ }
+ .status-indicator {
+ padding: 8px 16px;
+ border-radius: 20px;
+ background-color: #666666;
+ color: #0e2a47;
+ font-size: 14px;
+ font-weight: 600;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid #666666;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 16px;
+ overflow-y: auto;
+ background-color: #fdfaf0;
+ }
+ .chat-message {
+ margin-bottom: 16px;
+ }
+ .chat-message.user {
+ text-align: right;
+ }
+ .chat-message.system {
+ text-align: left;
+ }
+ .chat-message .timestamp {
+ color: #666666;
+ font-size: 12px;
+ margin-bottom: 4px;
+ }
+ .chat-message .content {
+ background-color: #1a1a1a;
+ color: #fdfaf0;
+ padding: 8px 12px;
+ border-radius: 6px;
+ max-width: 70%;
+ word-wrap: break-word;
+ }
+ .chat-input {
+ display: flex;
+ padding: 16px;
+ background-color: #fdfaf0;
+ border-top: 1px solid #666666;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 2px solid #666666;
+ border-radius: 4px;
+ font-size: 14px;
+ margin-right: 8px;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background-color: #a83232;
+ color: #fdfaf0;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 16px;
+ padding: 16px;
+ overflow-y: auto;
+ }
+ .panel {
+ background-color: #1a1a1a;
+ color: #fdfaf0;
+ padding: 16px;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ font-family: 'Special Elite', cursive;
+ font-size: 18px;
+ margin-bottom: 12px;
+ color: #a83232;
+ }
+ .panel-content {
+ flex: 1;
+ overflow-y: auto;
+ font-size: 14px;
+ line-height: 1.5;
+ }
+ .panel-content code {
+ color: #a83232;
+ font-family: monospace;
+ }
+ .panel-content pre {
+ background-color: #0e2a47;
+ color: #fdfaf0;
+ padding: 12px;
+ border-radius: 6px;
+ overflow-x: auto;
+ font-size: 12px;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN STUDIO</span>
+ <div class="project-picker">
+ <select>
+ <option>Project Hype</option>
+ <option>Project Echo</option>
+ <option>Project Vortex</option>
+ </select>
+ </div>
+ <div class="status-indicator">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div class="timestamp">10:14 AM</div>
+ <div class="content">/run-topic "Renaissance of the Grid"</div>
+ </div>
+ <div class="chat-message system">
+ <div class="timestamp">10:15 AM</div>
+ <div class="content">Topic initiated: Renaissance of the Grid. All agents aligned on 19th-century architectural symmetry.</div>
+ </div>
+ <div class="chat-message user">
+ <div class="timestamp">10:16 AM</div>
+ <div class="content">/stampede 3</div>
+ </div>
+ <div class="chat-message system">
+ <div class="timestamp">10:17 AM</div>
+ <div class="content">Stampede mode activated. 3 agents now generating variant layouts. Expected completion: 10:22 AM.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message...">
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-content">
+ <p>Design Concept A: A 19th-century bank vault door rendered in 3D. The texture is a matte black iron with rivet details. The handle is a brass lever with a rose-shaped escutcheon. The door is 3 feet thick, with a 4-inch gap between the door and the frame.</p>
+ <pre>
+// mockup code
+const vaultDoor = {
+ material: 'matte black iron',
+ handle: 'brass lever',
+ thickness: '3 feet',
+ gap: '4 inches'
+};
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-content">
+ <p>Vote on the following: Should the vault door be engraved with the studio's emblem? Options: Yes, No, or Conditional (only if the emblem is a geometric shape).</p>
+ <pre>
+[ ] Yes
+[ ] No
+[ ] Conditional
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-content">
+ <p>Current board: "Vault Door 3D Mockup". Layers include: Base Geometry, Rivet Details, Brass Handle, Rose Escutcheon. All layers are grouped under "Vault Door Assembly".</p>
+ <pre>
+// layer structure
+Vault Door Assembly
+├── Base Geometry
+├── Rivet Details
+├── Brass Handle
+└── Rose Escutcheon
+ </pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-content">
+ <p>Template: "19th-Century Bank Poster". Assets include: Ornate border, serif font, inkwell texture. Placeholder text: "The Vault of Four Horsemen Studio" in 48pt.</p>
+ <pre>
+// template notes
+- Border: Ornate gold leaf
+- Font: Garamond 48pt
+- Background: Inkwell texture
+ </pre>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/092-fortune-cookie.html b/mockups/092-fortune-cookie.html
new file mode 100644
index 0000000..f866db6
--- /dev/null
+++ b/mockups/092-fortune-cookie.html
@@ -0,0 +1,184 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>fortune-cookie-slip — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Inter:wght@400;600&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', sans-serif;
+ color: #1a1a1a;
+ background-color: #fdfaf3;
+ height: 100%;
+ width: 100%;
+ overflow-x: hidden;
+ }
+ body {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ }
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 32px;
+ background-color: #fff8e0;
+ border-bottom: 1px solid #d4af37;
+ font-family: 'Caveat', cursive;
+ font-size: 24px;
+ }
+ header .status {
+ font-size: 14px;
+ color: #a83232;
+ background-color: #fff8e0;
+ padding: 4px 8px;
+ border: 1px solid #d4af37;
+ border-radius: 4px;
+ }
+ .container {
+ display: flex;
+ flex: 1;
+ }
+ .left-pane {
+ width: 40%;
+ border-right: 1px solid #d4af37;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ padding: 16px;
+ overflow-y: auto;
+ flex: 1;
+ background-color: #fff8e0;
+ border-right: 1px solid #d4af37;
+ }
+ .chat-message {
+ margin-bottom: 12px;
+ }
+ .chat-message.user {
+ text-align: right;
+ }
+ .chat-message.agent {
+ text-align: left;
+ }
+ .chat-input {
+ display: flex;
+ padding: 16px;
+ background-color: #fdfaf3;
+ border-top: 1px solid #d4af37;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px;
+ font-size: 14px;
+ border: 1px solid #d4af37;
+ border-radius: 4px 0 0 4px;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background-color: #a83232;
+ color: #fff8e0;
+ border: none;
+ border-radius: 0 4px 4px 0;
+ font-weight: bold;
+ cursor: pointer;
+ }
+ .right-pane {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ }
+ .sub-panels {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ padding: 16px;
+ flex: 1;
+ }
+ .sub-panel {
+ background-color: #fff8e0;
+ border: 1px solid #d4af37;
+ border-radius: 4px;
+ overflow: hidden;
+ }
+ .sub-panel-header {
+ padding: 12px;
+ background-color: #fdfaf3;
+ font-weight: bold;
+ border-bottom: 1px solid #d4af37;
+ font-family: 'Caveat', cursive;
+ }
+ .sub-panel-body {
+ padding: 12px;
+ font-size: 14px;
+ line-height: 1.5;
+ }
+ .sub-panel-body::before {
+ content: "Your lucky number is ";
+ color: #d4af37;
+ }
+ .sub-panel-body::after {
+ content: " · Today's fortune: ";
+ color: #a83232;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <span>Four Horsemen</span>
+ <div>
+ <select style="padding: 4px 8px; font-size: 14px; border: 1px solid #d4af37; border-radius: 4px; background-color: #fff8e0;">
+ <option>Project Phoenix</option>
+ <option>Project Dragon</option>
+ <option>Project Oracle</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <div class="container">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <span>/run-topic "ancient prophecies"</span>
+ </div>
+ <div class="chat-message agent">
+ Initiating topic: ancient prophecies. Your lucky number is 7. Learn Mandarin: 你好 (nǐ hǎo) means hello.
+ </div>
+ <div class="chat-message user">
+ <span>/stampede</span>
+ </div>
+ <div class="chat-message agent">
+ Stampede mode activated. Your lucky number is 3. Today's fortune: "The road to success is always under construction."
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or question..." />
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panels">
+ <div class="sub-panel">
+ <div class="sub-panel-header">Preview</div>
+ <div class="sub-panel-body">The ink is still wet on this parchment. Today's fortune: "A journey of a thousand miles begins with a single step." Learn Mandarin: 一步一步 (yī bù yī bù) – step by step.</div>
+ </div>
+ <div class="sub-panel">
+ <div class="sub-panel-header">Paper</div>
+ <div class="sub-panel-body">Sketches whisper secrets. Today's fortune: "The future is not set; it is written by those who dare to write it." Learn Mandarin: 未来 (wèilái) – future.</div>
+ </div>
+ <div class="sub-panel">
+ <div class="sub-panel-header">Figma</div>
+ <div class="sub-panel-body">Designs are in flux. Today's fortune: "The best way to predict the future is to create it." Learn Mandarin: 创造 (chuàngzào) – create.</div>
+ </div>
+ <div class="sub-panel">
+ <div class="sub-panel-header">Canva</div>
+ <div class="sub-panel-body">Visuals are beckoning. Today's fortune: "A smooth sea never made a skilled sailor." Learn Mandarin: 平静的海 (píngjìng de hǎi) – calm sea.</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/093-telegram-pole.html b/mockups/093-telegram-pole.html
new file mode 100644
index 0000000..3b54d05
--- /dev/null
+++ b/mockups/093-telegram-pole.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>telegraph-pole-knots — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #7a5c3e; color: #fbf6e9; height: 100%; }
+ body { display: flex; flex-direction: column; font-size: 14px; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: #1a0e00; border-bottom: 1px solid #3a3a3a; }
+ header h1 { font-family: 'Special Elite', cursive; font-size: 24px; margin: 0; }
+ .project-picker { position: relative; }
+ .project-picker select { background: #fbf6e9; color: #1a0e00; padding: 6px 12px; border: 1px solid #a83232; border-radius: 4px; }
+ .status-indicator { padding: 6px 12px; background: #a83232; border-radius: 4px; font-size: 12px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .chat-pane { width: 40%; border-right: 1px solid #3a3a3a; padding: 24px; overflow-y: auto; }
+ .chat-pane .message { margin-bottom: 16px; }
+ .chat-pane .message.user { text-align: right; }
+ .chat-pane .message.agent { text-align: left; }
+ .chat-pane .message span { background: #fbf6e9; padding: 8px 12px; border-radius: 4px; display: inline-block; }
+ .chat-input { position: relative; margin-top: 24px; }
+ .chat-input input { width: 100%; padding: 12px; font-size: 14px; border: 1px solid #3a3a3a; background: #fbf6e9; color: #1a0e00; }
+ .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
+ .panel { background: #fbf6e9; color: #1a0e00; padding: 24px; border: 1px solid #a83232; border-radius: 4px; }
+ .panel h2 { margin: 0 0 16px 0; font-family: 'Special Elite', cursive; font-size: 18px; }
+ .panel pre { font-size: 12px; color: #3a3a3a; background: #fbf6e9; padding: 12px; border: 1px solid #a83232; border-radius: 4px; }
+ .panel .note { background: #fbf6e9; padding: 12px; border: 1px solid #a83232; border-radius: 4px; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div class="project-picker">
+ <select>
+ <option>Project HORMUZ</option>
+ <option>Project TELGAR</option>
+ <option>Project KNOTT</option>
+ </select>
+ </div>
+ <div class="status-indicator">idle</div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="message agent">
+ <span>/run-topic 'telegraph-pole-knots'</span>
+ </div>
+ <div class="message user">
+ <span>/stampede 3</span>
+ </div>
+ <div class="message agent">
+ <span>Agent: Splicing 3 nodes into the grid. Expect sporadic hums and flickers.</span>
+ </div>
+ <div class="message agent">
+ <span>Agent: Warning — voltage surge detected. Retracting node 2.</span>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="type /help for commands">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h2>Preview</h2>
+ <pre>
+ ┌───────────────┐
+ │ ⚡ 1138 ⚡ │
+ │ ┌───┐ │
+ │ │ │ │
+ │ └───┘ │
+ └───────────────┘
+ </pre>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <div class="note">
+ [REPAIR LOG 001]<br>
+ Date: 03/14/2024<br>
+ Status: Node 2 offline due to voltage surge. Replaced insulation on pole 1138. Adjusted tension on wire 7B.
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <div class="note">
+ Mockup: Telegraph Pole UI<br>
+ - 3D model of pole with knot details<br>
+ - Interactive voltage meter<br>
+ - Wires with drag-to-repair functionality
+ </div>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <div class="note">
+ Design Concept: "Rusted Infrastructure"<br>
+ - Background: weathered wood texture<br>
+ - Accent: glowing red wires<br>
+ - Tagline: "Hold the line"
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/094-beekeeper-log.html b/mockups/094-beekeeper-log.html
new file mode 100644
index 0000000..e87aab2
--- /dev/null
+++ b/mockups/094-beekeeper-log.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>beekeeper-log-book — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: #fbf6e9;
+ color: #1a0e00;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 32px;
+ background: #fbf6e9;
+ border-bottom: 2px solid #7a5c3e;
+ font-family: 'Crimson Pro', serif;
+ font-size: 1.5rem;
+ }
+ header .brand {
+ font-weight: 700;
+ }
+ header select {
+ padding: 8px 12px;
+ border: 2px solid #fcd13e;
+ border-radius: 4px;
+ background: #fbf6e9;
+ color: #1a0e00;
+ font-family: 'Inter', sans-serif;
+ }
+ header .status {
+ padding: 6px 12px;
+ border-radius: 20px;
+ background: #fcd13e;
+ color: #1a0e00;
+ font-size: 0.875rem;
+ font-weight: 600;
+ }
+ main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .chat-pane {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ border-right: 2px solid #7a5c3e;
+ overflow: hidden;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 24px;
+ overflow-y: auto;
+ background: #fbf6e9;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ .chat-message {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: #fcd13e;
+ padding: 12px;
+ border-radius: 6px;
+ max-width: 70%;
+ }
+ .chat-message.user {
+ align-self: flex-end;
+ background: #3a4a2c;
+ color: #fbf6e9;
+ }
+ .chat-input {
+ padding: 16px;
+ border-top: 2px solid #7a5c3e;
+ display: flex;
+ gap: 8px;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 2px solid #7a5c3e;
+ border-radius: 4px;
+ font-size: 1rem;
+ }
+ .chat-input button {
+ padding: 8px 16px;
+ background: #1a0e00;
+ color: #fbf6e9;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ padding: 24px;
+ }
+ .panel {
+ background: #fbf6e9;
+ border: 2px solid #7a5c3e;
+ border-radius: 8px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+ .panel-header {
+ font-family: 'Crimson Pro', serif;
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: #1a0e00;
+ border-bottom: 2px solid #fcd13e;
+ padding-bottom: 8px;
+ }
+ .panel-body {
+ font-size: 0.9rem;
+ color: #3a4a2c;
+ line-height: 1.4;
+ }
+ .panel-body .frame-count {
+ color: #fcd13e;
+ font-weight: 600;
+ }
+ .panel-body .note {
+ color: #7a5c3e;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <div class="brand">FOUR HORSEMEN STUDIO</div>
+ <div>
+ <select>
+ <option>Hormuz Initiative</option>
+ <option>Silk Road Reimagined</option>
+ <option>Apiary Protocol</option>
+ </select>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <div>/run-topic: Pollen Distribution Optimization</div>
+ </div>
+ <div class="chat-message">
+ <div>Topic initiated. Calculating optimal hive frame alignment...</div>
+ </div>
+ <div class="chat-message user">
+ <div>/stampede: 3</div>
+ </div>
+ <div class="chat-message">
+ <div>Stampede mode engaged. 3 worker bees redirected to brood chamber.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="beekeeper command..." />
+ <button>Send</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ Current Frame: <span class="frame-count">8</span> / 120. Frame Status: Queen's Mark Applied. Next Frame: 9 (Scheduled: 2023-10-05 14:30)
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <div class="note">Hive Structure Analysis: 37% complete. Recommend: Add 2 more cells to the brood chamber.</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ Design Asset: Hive Frame Mockup. Status: In Review. Next Review: 2023-10-06
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ Template: Queen's Mark Logo. Last Edit: 2023-10-04 by Beekeeper Admin
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/095-dive-flag.html b/mockups/095-dive-flag.html
new file mode 100644
index 0000000..cb7d068
--- /dev/null
+++ b/mockups/095-dive-flag.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>scuba-dive-log — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Mono&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'IBM Plex Mono', monospace; background: #0a1428; color: #fdfaf0; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: linear-gradient(135deg, #1c4966, #0a1428); color: #fdfaf0; font-family: 'Special Elite', cursive; font-size: 1.5rem; }
+ header .project-picker { background: #1c4966; padding: 0.5rem 1rem; border-radius: 4px; }
+ header .status { padding: 0.5rem 1rem; border-radius: 4px; background: #7dffe9; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .chat-pane { width: 40%; border-right: 1px solid #333; display: flex; flex-direction: column; }
+ .chat-log { flex: 1; padding: 1rem; overflow-y: auto; }
+ .chat-log .message { margin: 0.5rem 0; padding: 0.5rem; background: #1c4966; border-radius: 4px; }
+ .chat-log .message.user { background: #a83232; color: #fdfaf0; }
+ .chat-input { padding: 0.5rem; }
+ .chat-input input { width: 100%; padding: 0.5rem; border: none; border-radius: 4px; background: #1c4966; color: #fdfaf0; }
+ .panels { width: 60%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; padding: 1rem; }
+ .panel { background: #1c4966; padding: 1rem; border-radius: 4px; }
+ .panel h3 { margin: 0 0 0.5rem; font-family: 'Special Elite', cursive; color: #a83232; }
+ .panel p { margin: 0; font-size: 0.9rem; }
+ </style>
+</head>
+<body>
+ <header>
+ <span>Four Horsemen / HORMUZ</span>
+ <div>
+ <select class="project-picker">
+ <option>Deep Blue Project</option>
+ <option>Coral Reefs UI</option>
+ <option>Submerged Branding</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">/run-topic: "Deco stop at 5m, pressure stable"</div>
+ <div class="message">Depth: 30m, pressure: 4.2ATA</div>
+ <div class="message user">/stampede: "Surface interval: 42 minutes"</div>
+ <div class="message">Nitrox blend: 32% O2, 68% N2</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type /run-topic or /stampede...">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <h3>Preview</h3>
+ <p>Depth: 30m, pressure: 4.2ATA | Surface interval: 42 minutes | Deco stop: 5m</p>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <p>Sketches of pressure gauges and dive tables in progress. Current focus: optimizing deco stop calculations.</p>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <p>Wireframes for the "Deco Planner" module. Current state: 75% complete. Next: integrating real-time depth tracking.</p>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <p>Mockups for dive log templates. Using color palette: #0a1428 (depth), #7dffe9 (surface), #a83232 (warning).</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/096-gallery-wall-label.html b/mockups/096-gallery-wall-label.html
new file mode 100644
index 0000000..474fe36
--- /dev/null
+++ b/mockups/096-gallery-wall-label.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>gallery-wall-label — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Inter:wght@400;600&display=swap">
+ <style>
+ :root {
+ --bg: #fdfaf3;
+ --primary: #1a1a1a;
+ --support: #ddd5c2;
+ --support2: #666666;
+ --support3: #3a3a3a;
+ --chat-bg: #fdfaf3;
+ --chat-border: #ddd5c2;
+ }
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+ body {
+ font-family: 'Inter', sans-serif;
+ background: var(--bg);
+ color: var(--primary);
+ height: 900px;
+ width: 1440px;
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+ line-height: 1.5;
+ }
+ header {
+ padding: 20px 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid var(--support3);
+ background: var(--bg);
+ }
+ header h1 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 24px;
+ color: var(--primary);
+ }
+ .project-picker, .status {
+ font-family: 'Inter', sans-serif;
+ font-size: 14px;
+ }
+ .project-picker {
+ position: relative;
+ }
+ .project-picker select {
+ padding: 6px 12px;
+ border: 1px solid var(--support3);
+ background: var(--bg);
+ color: var(--primary);
+ font-size: 14px;
+ border-radius: 4px;
+ }
+ .status {
+ padding-left: 16px;
+ color: var(--support2);
+ }
+ .main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ }
+ .left-pane {
+ width: 40%;
+ border-right: 1px solid var(--support3);
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px;
+ background: var(--chat-bg);
+ border-right: 1px solid var(--chat-border);
+ }
+ .chat-message {
+ margin-bottom: 16px;
+ }
+ .chat-message.user {
+ text-align: right;
+ }
+ .chat-message.bot {
+ text-align: left;
+ }
+ .chat-message p {
+ font-family: 'Inter', sans-serif;
+ font-size: 14px;
+ color: var(--primary);
+ }
+ .chat-input {
+ padding: 16px;
+ border-top: 1px solid var(--support3);
+ display: flex;
+ }
+ .chat-input input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 1px solid var(--support3);
+ background: var(--bg);
+ color: var(--primary);
+ font-size: 14px;
+ border-radius: 4px;
+ }
+ .right-pane {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 20px;
+ padding: 20px;
+ }
+ .sub-panel {
+ background: var(--bg);
+ border: 1px solid var(--support3);
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ }
+ .sub-panel h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 18px;
+ margin-bottom: 16px;
+ color: var(--primary);
+ }
+ .sub-panel p {
+ font-family: 'Inter', sans-serif;
+ font-size: 14px;
+ color: var(--support2);
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <div class="project-picker">
+ <select>
+ <option>Untitled, 1972</option>
+ <option>Gift of the Canvas</option>
+ <option>Oil on Linen</option>
+ </select>
+ </div>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message user">
+ <p>/run-topic: "The anatomy of a whisper"</p>
+ </div>
+ <div class="chat-message bot">
+ <p>Topic initiated. Listening for tonal shifts in the void.</p>
+ </div>
+ <div class="chat-message user">
+ <p>/stampede: "Bleeding edges"</p>
+ </div>
+ <div class="chat-message bot">
+ <p>Stampede mode engaged. Expect chromatic aberration in the periphery.</p>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Enter command or text..." />
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="sub-panel">
+ <h2>Preview</h2>
+ <p>A spectral residue lingers on the gallery wall—faint, almost imperceptible. The pigment seems to vibrate at a frequency just below the threshold of human perception.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Paper</h2>
+ <p>Sketches in charcoal and wax crayon, layered with translucent washes of ink. The paper itself is a relic, its fibers warped by decades of storage in a damp cellar.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Figma</h2>
+ <p>Artboard titled "Untitled, 1972" contains a single vector shape: a jagged line that refuses to close, suggesting an incomplete gesture or a deliberately unresolved form.</p>
+ </div>
+ <div class="sub-panel">
+ <h2>Canva</h2>
+ <p>Template titled "Oil on Canvas" features a background texture of cracked varnish, with placeholder text in a font that mimics the irregularity of brushstrokes.</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/097-old-school-arcade.html b/mockups/097-old-school-arcade.html
new file mode 100644
index 0000000..7a7cf61
--- /dev/null
+++ b/mockups/097-old-school-arcade.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>old-school-arcade-marquee — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: #0a0a0a; color: #ff00ff; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; background: linear-gradient(90deg, #0a0a0a, #1a1a1a); border-bottom: 2px solid #ff00ff; }
+ header h1 { font-family: 'Press Start 2P', cursive; font-size: 16px; }
+ .project-picker { padding: 8px 16px; background: #1a1a1a; border: 1px solid #ff5252; border-radius: 4px; }
+ .status-pill { padding: 4px 12px; background: #1a1a1a; border: 2px solid #ff00ff; border-radius: 20px; font-size: 12px; }
+ main { display: flex; flex: 1; }
+ .chat-pane { width: 40%; padding: 20px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 12px; }
+ .message { padding: 12px 16px; background: #1a1a1a; border: 1px solid #ffff00; border-radius: 8px; }
+ .message.user { background: #2a2a2a; }
+ .chat-input { margin-top: 20px; display: flex; }
+ .chat-input input { flex: 1; padding: 10px; font-size: 14px; }
+ .chat-input button { padding: 10px 20px; background: #ff00ff; color: #0a0a0a; border: none; border-radius: 4px; margin-left: 10px; }
+ .panels { width: 60%; display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
+ .panel { flex: 1 1 45%; min-width: 250px; background: #1a1a1a; border: 2px solid #00ffff; border-radius: 8px; overflow: hidden; }
+ .panel-header { padding: 12px 16px; background: #0a0a0a; border-bottom: 1px solid #ff5252; font-family: 'Press Start 2P', cursive; font-size: 12px; }
+ .panel-body { padding: 16px; font-size: 14px; color: #ffff00; }
+ .panel-body pre { font-family: monospace; color: #ff5252; background: #0a0a0a; padding: 8px; border: 1px solid #00ffff; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <select class="project-picker">
+ <option>PROJECT: HORMUZ</option>
+ <option>PROJECT: NEON GHOST</option>
+ <option>PROJECT: STAMPED PAPER</option>
+ </select>
+ <div class="status-pill">IDLE</div>
+ </div>
+ </header>
+ <main>
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message user">USER: /run-topic '80s synthwave</div>
+ <div class="message">SYSTEM: TOPIC: 1UP on the synthwave revival</div>
+ <div class="message user">USER: /stampede 3</div>
+ <div class="message">SYSTEM: STAMPEDE: 3 agents charging into the neon haze</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="TYPE COMMAND...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">PREVIEW</div>
+ <div class="panel-body">
+ <pre>INSERT COIN TO ACTIVATE THE NEON-LIT DASHBOARD</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">PAPER</div>
+ <div class="panel-body">
+ <pre>HIGH-SCORE: 1987 arcade cabinet mockup</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">FIGMA</div>
+ <div class="panel-body">
+ <pre>1UP: Vectorizing the pixelated dreams</pre>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">CANVA</div>
+ <div class="panel-body">
+ <pre>SELECT: 8-bit color palette applied</pre>
+ </div>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/098-post-office-window.html b/mockups/098-post-office-window.html
new file mode 100644
index 0000000..8cbeb56
--- /dev/null
+++ b/mockups/098-post-office-window.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>post-office-window — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=IBM+Plex+Sans:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; font-family: 'IBM Plex Sans', sans-serif; background: #fdfaf0; color: #1a1a1a; height: 100%; }
+ body { display: flex; flex-direction: column; }
+ header { height: 60px; background: #0e2a47; color: #fdfaf0; display: flex; align-items: center; padding: 0 24px; font-size: 18px; font-weight: 600; }
+ header h1 { margin: 0; font-family: 'Special Elite', cursive; }
+ header .project-picker { margin-left: auto; padding: 8px 12px; background: #a83232; color: #fdfaf0; border-radius: 4px; cursor: pointer; }
+ header .status { margin-left: 16px; padding: 4px 8px; background: #666666; color: #fdfaf0; border-radius: 4px; font-size: 14px; }
+ main { flex: 1; display: flex; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #666666; display: flex; flex-direction: column; }
+ .chat-log { flex: 1; padding: 16px; overflow-y: auto; }
+ .chat-message { margin-bottom: 12px; }
+ .chat-message .timestamp { color: #666666; font-size: 12px; }
+ .chat-message .sender { font-weight: 600; margin-right: 8px; }
+ .chat-message .content { background: #fdfaf0; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; }
+ .chat-input { padding: 12px; display: flex; }
+ .chat-input input { flex: 1; padding: 8px; font-size: 14px; }
+ .chat-input button { margin-left: 8px; padding: 8px 16px; background: #0e2a47; color: #fdfaf0; border: none; border-radius: 4px; cursor: pointer; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; padding: 16px; }
+ .panel { background: #fdfaf0; border: 1px solid #ccc; border-radius: 4px; padding: 16px; display: flex; flex-direction: column; }
+ .panel h2 { font-family: 'Special Elite', cursive; font-size: 16px; margin: 0 0 12px 0; color: #0e2a47; }
+ .panel p { font-size: 14px; color: #666666; }
+ .panel .placeholder { margin-top: auto; }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div class="project-picker">PROJECT GUTENBERG</div>
+ <div class="status">idle</div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="chat-message">
+ <div class="timestamp">10:03 AM</div>
+ <div class="sender">USER:</div>
+ <div class="content">/run-topic "Victorian Typewriter Aesthetics"</div>
+ </div>
+ <div class="chat-message">
+ <div class="timestamp">10:04 AM</div>
+ <div class="sender">SYSTEM:</div>
+ <div class="content">Topic "Victorian Typewriter Aesthetics" initiated. Inkwell vellum primed for imposition.</div>
+ </div>
+ <div class="chat-message">
+ <div class="timestamp">10:05 AM</div>
+ <div class="sender">USER:</div>
+ <div class="content">/stampede "Courier Bold" "Garamond Italic"</div>
+ </div>
+ <div class="chat-message">
+ <div class="timestamp">10:06 AM</div>
+ <div class="sender">SYSTEM:</div>
+ <div class="content">Stampede queued: 32pt Courier Bold with 18pt Garamond Italic. Awaiting client approval.</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message..." />
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h2>Preview</h2>
+ <p class="placeholder">Proof rendering: 32pt Courier Bold headlines with 18pt Garamond Italic body. Margins set to 1.5cm. Waiting for client stampede confirmation.</p>
+ </div>
+ <div class="panel">
+ <h2>Paper</h2>
+ <p class="placeholder">Selected stock: 120gsm archival paper. Texture: smooth. Notes: "Please ensure all bleed areas are within 3mm of trim."</p>
+ </div>
+ <div class="panel">
+ <h2>Figma</h2>
+ <p class="placeholder">Design file "Project Gutenberg" open. Layers: 12. Last saved: 10:02 AM. Warning: 3 uncommitted changes.</p>
+ </div>
+ <div class="panel">
+ <h2>Canva</h2>
+ <p class="placeholder">Template "Victorian Broadsheet" applied. Drag-and-drop assets: 4 remaining. Font lock: "Courier Bold" and "Garamond Italic" enforced.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/099-bus-roll-sign.html b/mockups/099-bus-roll-sign.html
new file mode 100644
index 0000000..eb8ad07
--- /dev/null
+++ b/mockups/099-bus-roll-sign.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>bus-roll-sign — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600&display=swap">
+ <style>
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', sans-serif; background-color: #1a1a1a; color: #fdfaf0; }
+ body { display: flex; flex-direction: column; }
+ header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: linear-gradient(90deg, #a83232, #3a3a3a); color: #fcd13e; font-family: 'Bebas Neue', cursive; font-size: 24px; }
+ header select { background: #3a3a3a; color: #fdfaf0; border: 1px solid #fcd13e; padding: 6px 12px; font-size: 14px; }
+ header .status { padding: 6px 12px; background: #3a3a3a; border: 1px solid #fcd13e; border-radius: 4px; font-size: 14px; }
+ main { display: flex; flex: 1; overflow: hidden; }
+ .left-pane { width: 40%; border-right: 1px solid #3a3a3a; padding: 24px; overflow-y: auto; }
+ .chat-log { display: flex; flex-direction: column; gap: 16px; }
+ .message { display: flex; flex-direction: column; }
+ .message.user { align-self: flex-end; }
+ .message.system { align-self: flex-start; }
+ .message::before { content: attr(data-time); color: #a83232; font-size: 12px; margin-bottom: 4px; }
+ .message.user::after { content: attr(data-user); color: #fcd13e; font-weight: bold; margin-bottom: 4px; }
+ .chat-input { margin-top: 24px; display: flex; }
+ .chat-input input { flex: 1; padding: 12px; font-size: 14px; border: 1px solid #3a3a3a; background: #3a3a3a; color: #fdfaf0; }
+ .chat-input button { background: #fcd13e; color: #1a1a1a; border: none; padding: 12px 24px; font-size: 14px; }
+ .right-pane { width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
+ .panel { background: #3a3a3a; border: 1px solid #a83232; padding: 24px; }
+ .panel h3 { font-family: 'Bebas Neue', cursive; font-size: 18px; margin-bottom: 16px; color: #fcd13e; }
+ .panel p { font-size: 14px; color: #a83232; }
+ .panel .placeholder { color: #fdfaf0; }
+ </style>
+</head>
+<body>
+ <header>
+ <span>FOUR HORSEMEN / HORMUZ</span>
+ <div>
+ <select>
+ <option>Project Neon Glow</option>
+ <option>Project Steel Pulse</option>
+ <option>Project Velvet Dawn</option>
+ </select>
+ <span class="status">idle</span>
+ </div>
+ </header>
+ <main>
+ <div class="left-pane">
+ <div class="chat-log">
+ <div class="message user" data-time="14:22" data-user="USER">
+ <div>/run-topic: "Urban Transit Reimagined"</div>
+ </div>
+ <div class="message system" data-time="14:23">
+ <div>TOPIC: Urban Transit Reimagined | STATUS: QUEUED</div>
+ </div>
+ <div class="message user" data-time="14:24" data-user="USER">
+ <div>/stampede: "Generate 3 variants of the bus stop sign"</div>
+ </div>
+ <div class="message system" data-time="14:25">
+ <div>STAMPEDE: 3 variants of the bus stop sign | STATUS: PROCESSING</div>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="Type a command or message...">
+ <button>SEND</button>
+ </div>
+ </div>
+ <div class="right-pane">
+ <div class="panel">
+ <h3>Preview</h3>
+ <p class="placeholder">[BUS STOP SIGN MOCKUP] Neon-lit route numbers pulse in sync with the <span style="color:#fcd13e">14</span>th avenue corridor. Steel-etched glyphs glow faintly in the fog.</p>
+ </div>
+ <div class="panel">
+ <h3>Paper</h3>
+ <p class="placeholder">[SKETCH NOTES] Use 3D embossing on the "DOWNTOWN" panel. Add a tactile ridge along the <span style="color:#a83232">NEXT STOP</span> text for braille compatibility.</p>
+ </div>
+ <div class="panel">
+ <h3>Figma</h3>
+ <p class="placeholder">[COMPONENT HIERARCHY] Base component: "Bus Stop Sign" (variant: 14th Ave, Downtown, Next Stop). Nested: "Neon Glow" (color: #fcd13e, intensity: 70%).</p>
+ </div>
+ <div class="panel">
+ <h3>Canva</h3>
+ <p class="placeholder">[LAYOUT DRAFT] 8.5"x11" poster. Top third: bold "ROUTE 14" in <span style="color:#fcd13e">neon yellow</span>. Bottom two-thirds: layered <span style="color:#a83232">braille</span> text over a gradient from #1a1a1a to #3a3a3a.</p>
+ </div>
+ </div>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/100-midnight-zoom.html b/mockups/100-midnight-zoom.html
new file mode 100644
index 0000000..c6096c8
--- /dev/null
+++ b/mockups/100-midnight-zoom.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>midnight-zoom-call — Four Horsemen Studio</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@600&family=JetBrains+Mono:wght@500&display=swap">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ width: 1440px;
+ height: 900px;
+ font-family: 'JetBrains Mono', monospace;
+ color: #fdfaf0;
+ background-color: #0a0a0a;
+ overflow: hidden;
+ }
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ border-bottom: 1px solid #1a1a1a;
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ }
+ header h1 {
+ font-size: 24px;
+ color: #1de9b6;
+ }
+ .project-picker, .status {
+ font-size: 14px;
+ }
+ .project-picker select {
+ background: #1a1a1a;
+ color: #fdfaf0;
+ border: 1px solid #a83232;
+ padding: 4px 8px;
+ border-radius: 4px;
+ }
+ .status {
+ padding: 4px 8px;
+ background: #1a1a1a;
+ border: 1px solid #a83232;
+ border-radius: 4px;
+ font-weight: bold;
+ }
+ .main {
+ display: flex;
+ height: calc(900px - 60px);
+ }
+ .chat-pane {
+ width: 40%;
+ border-right: 1px solid #1a1a1a;
+ display: flex;
+ flex-direction: column;
+ }
+ .chat-log {
+ flex: 1;
+ padding: 20px;
+ overflow-y: auto;
+ background: #1a1a1a;
+ }
+ .chat-log .message {
+ margin: 10px 0;
+ }
+ .chat-log .user {
+ color: #a83232;
+ }
+ .chat-log .agent {
+ color: #1de9b6;
+ }
+ .chat-input {
+ padding: 10px 20px;
+ background: #0a0a0a;
+ border-top: 1px solid #1a1a1a;
+ }
+ .chat-input input {
+ width: 100%;
+ background: #1a1a1a;
+ color: #fdfaf0;
+ border: none;
+ padding: 8px;
+ font-size: 14px;
+ }
+ .panels {
+ width: 60%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 20px;
+ padding: 20px;
+ }
+ .panel {
+ background: #1a1a1a;
+ border: 1px solid #1de9b6;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ }
+ .panel-header {
+ padding: 10px 15px;
+ font-weight: bold;
+ color: #1de9b6;
+ border-bottom: 1px solid #1a1a1a;
+ }
+ .panel-body {
+ flex: 1;
+ padding: 15px;
+ overflow-y: auto;
+ font-size: 13px;
+ line-height: 1.4;
+ }
+ .panel-body code {
+ color: #a83232;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h1>FOUR HORSEMEN</h1>
+ <div>
+ <div class="project-picker">
+ <select>
+ <option>Project Neon Noir</option>
+ <option>Hormuz Reboot</option>
+ <option>Echo Protocol</option>
+ </select>
+ </div>
+ <div class="status">idle</div>
+ </div>
+ </header>
+ <div class="main">
+ <div class="chat-pane">
+ <div class="chat-log">
+ <div class="message"><span class="user">you</span>: /run-topic: "neon-noir" — can you handle this?</div>
+ <div class="message"><span class="agent">agent</span>: topic queued. initializing generative matrix...</div>
+ <div class="message"><span class="user">you</span>: /stampede — deploy to figma</div>
+ <div class="message"><span class="agent">agent</span>: stampede mode engaged. figma sync in 3… 2… 1…</div>
+ </div>
+ <div class="chat-input">
+ <input type="text" placeholder="agent, /run-topic: 'cyber-liminal'">
+ </div>
+ </div>
+ <div class="panels">
+ <div class="panel">
+ <div class="panel-header">Preview</div>
+ <div class="panel-body">
+ <div style="color: #1de9b6;">[DRAFT 0.7α]</div>
+ <br>
+ <div style="color: #a83232;">⚠️ layer conflict detected: 'glitch-aura' vs 'neon-noir'</div>
+ <br>
+ <div>rendering 3D mockup… 67% complete</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Paper</div>
+ <div class="panel-body">
+ <div>sketchpad: 12345</div>
+ <br>
+ <div>quick-dirty wireframe for 'neon-noir' — 23 layers, 7 annotations</div>
+ <br>
+ <div style="color: #a83232;">❗ missing: user-flow diagrams</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Figma</div>
+ <div class="panel-body">
+ <div>file: neon-noir-0.8.3.figma</div>
+ <br>
+ <div>components: 43 active</div>
+ <div>overrides: 12 pending</div>
+ <br>
+ <div style="color: #1de9b6;">synced 2 minutes ago</div>
+ </div>
+ </div>
+ <div class="panel">
+ <div class="panel-header">Canva</div>
+ <div class="panel-body">
+ <div>template: 'neon-noir-landing'</div>
+ <br>
+ <div>assets: 15 uploaded</div>
+ <div>animations: 3 queued</div>
+ <br>
+ <div style="color: #a83232;">❗ missing: hero video</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockups/generate.mjs b/mockups/generate.mjs
new file mode 100644
index 0000000..a9d23a0
--- /dev/null
+++ b/mockups/generate.mjs
@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+/**
+ * Hormuz mockup generator — local-Ollama only.
+ *
+ * Reads manifest.json, generates one HTML file per direction. Skips entries
+ * that already exist (so you can rerun safely after a partial run, and so
+ * the 5 hand-built anchor variants aren't overwritten).
+ *
+ * Routes to MS1 by default (Steve directive 2026-05-05 — bulk LLM goes to
+ * Mac Studio 1, never localhost) per ~/.claude/projects/-Users-stevestudio2/memory/feedback_ollama_default_ms1.md
+ *
+ * Each variant: ~150-200 line standalone HTML, no JS framework, all CSS
+ * inline, web fonts via Google Fonts, no external images.
+ *
+ * Usage:
+ * node generate.mjs # generate all missing entries
+ * LIMIT=10 node generate.mjs # cap at 10 generations this run
+ * FORCE=1 node generate.mjs # regenerate even if file exists (skips anchors by default)
+ * ANCHORS=1 node generate.mjs # also regenerate the 5 anchors (1,2,3,4,5)
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const MANIFEST = path.join(__dirname, 'manifest.json');
+const OLLAMA = process.env.OLLAMA_BASE || 'http://192.168.1.133:11434';
+const MODEL = process.env.LLM_MOCKUP_MODEL || 'gemma3:12b';
+const LIMIT = process.env.LIMIT ? Number(process.env.LIMIT) : 1000;
+const FORCE = process.env.FORCE === '1';
+const ANCHORS = process.env.ANCHORS === '1';
+const ANCHOR_INDICES = new Set([1, 2, 3, 4]);
+const TIMEOUT_MS = Number(process.env.LLM_TIMEOUT_MS || 360_000);
+
+const manifest = JSON.parse(fs.readFileSync(MANIFEST, 'utf8'));
+const dirs = manifest.directions;
+
+const SYSTEM = `You are a senior visual designer outputting ONE complete <!doctype html> page. No preamble, no markdown fences, no commentary. All CSS inline in a single <style> tag. External assets only via Google Fonts <link>. No external images, no JS frameworks. The page is a mockup of an "agent design orchestrator" dashboard — its job is to visually express ONE specific aesthetic direction. The viewport is 1440x900.`;
+
+function buildPrompt(d) {
+ return `Build a single self-contained HTML mockup for the Four Horsemen Studio orchestrator front page.
+
+AESTHETIC DIRECTION (this is the entire creative seed, do not deviate):
+- Mood: ${d.mood}
+- Palette: ${d.palette.join(', ')} (use them deliberately; ${d.palette[0]} is the ground, ${d.palette[1]} is the primary, others are supports)
+- Type pair: ${d.type[0]} (display) + ${d.type[1]} (body)
+- Voice: ${d.voice}
+
+REQUIRED PAGE STRUCTURE (lay out in this order, but render in the chosen aesthetic):
+1. Header bar — brand name (FOUR HORSEMEN / HORMUZ / similar), a project picker dropdown (with 3 sample project names), and a status indicator showing "idle" or "running"
+2. Left pane (40% wide) — chat log showing 3-4 example messages. Include at least one /run-topic or /stampede slash-command exchange. Then a chat input bar at the bottom.
+3. Right pane (60% wide) — 4 sub-panels arranged in a 2x2 grid (or stacked, dealer's choice for the aesthetic): Preview · Paper · Figma · Canva. Each panel needs a header label and an empty/placeholder body that fits the aesthetic (NOT generic "lorem ipsum" — invent in-character content per the voice).
+
+REQUIREMENTS (non-negotiable):
+- Real copy, in the chosen voice, for every label and placeholder. NEVER use lorem ipsum.
+- Use only the named fonts via Google Fonts <link rel="stylesheet" href="https://fonts.googleapis.com/css2?...">
+- No external images. SVG, CSS gradients, ASCII art, unicode block chars are all fair game.
+- 1440x900 viewport target. Layout must not horizontally scroll.
+- Title tag: "${d.mood} — Four Horsemen Studio"
+
+Output ONLY the complete <!doctype html> document.`;
+}
+
+function stripFences(s) {
+ return s.replace(/^```(?:html)?\s*/i, '').replace(/```\s*$/i, '').trim();
+}
+
+async function generateOne(d) {
+ const t0 = Date.now();
+ const ac = new AbortController();
+ const timer = setTimeout(() => ac.abort(), TIMEOUT_MS);
+ try {
+ const r = await fetch(`${OLLAMA}/api/generate`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ signal: ac.signal,
+ body: JSON.stringify({
+ model: MODEL,
+ system: SYSTEM,
+ prompt: buildPrompt(d),
+ stream: false,
+ options: { temperature: 0.74, top_p: 0.92, num_predict: 8000 },
+ }),
+ });
+ clearTimeout(timer);
+ if (!r.ok) return null;
+ const j = await r.json();
+ const raw = (j.response || '').trim();
+ let html = stripFences(raw);
+ if (!/<!doctype|<html/i.test(html)) return null;
+ return { html, ms: Date.now() - t0 };
+ } catch {
+ clearTimeout(timer);
+ return null;
+ }
+}
+
+function fname(d) {
+ const idx = String(d.i).padStart(3, '0');
+ return `${idx}-${d.slug}.html`;
+}
+
+(async () => {
+ console.log(`[hormuz-mockups] target=${manifest.target}`);
+ console.log(`[hormuz-mockups] OLLAMA=${OLLAMA} MODEL=${MODEL}`);
+ console.log(`[hormuz-mockups] ${dirs.length} directions, LIMIT=${LIMIT}, FORCE=${FORCE}, ANCHORS=${ANCHORS}`);
+ let ok = 0, skip = 0, fail = 0, attempted = 0;
+ for (const d of dirs) {
+ if (attempted >= LIMIT) break;
+ const out = path.join(__dirname, fname(d));
+ const isAnchor = ANCHOR_INDICES.has(d.i);
+ if (fs.existsSync(out) && !FORCE) { skip++; continue; }
+ if (isAnchor && !ANCHORS) { skip++; continue; }
+ attempted++;
+ process.stdout.write(`[${String(d.i).padStart(3,'0')}] ${d.slug.padEnd(28)} ${d.mood.padEnd(34)} ... `);
+ const result = await generateOne(d);
+ if (!result) { console.log('FAIL'); fail++; continue; }
+ fs.writeFileSync(out, result.html);
+ console.log(`${(result.ms/1000).toFixed(1)}s ${(result.html.length/1024).toFixed(1)}kb`);
+ ok++;
+ }
+ console.log(`[hormuz-mockups] done. ok=${ok} skip=${skip} fail=${fail}`);
+})();
diff --git a/mockups/index.html b/mockups/index.html
new file mode 100644
index 0000000..7f7c7c2
--- /dev/null
+++ b/mockups/index.html
@@ -0,0 +1,1025 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>Hormuz · 100 Mockup Variants</title>
+<style>
+*,*::before,*::after{box-sizing:border-box}
+body{margin:0;background:#0b0f1a;color:#f0f0f5;font:13px/1.4 system-ui,-apple-system,sans-serif;padding:24px}
+h1{font-weight:600;font-size:22px;margin:0 0 6px}
+.sub{color:#9aa0b5;font-size:12px;margin-bottom:24px}
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}
+.card{background:#10b9810f;border:1px solid #1f2533;border-radius:6px;overflow:hidden;color:inherit;text-decoration:none;display:flex;flex-direction:column}
+.card:hover{border-color:#10b981}
+.thumb{aspect-ratio:1440/900;background:#000;overflow:hidden;position:relative}
+.thumb iframe{position:absolute;top:0;left:0;width:1440px;height:900px;transform:scale(0.25);transform-origin:0 0;border:0;pointer-events:none}
+.meta{padding:10px 12px}
+.row1{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
+.ix{color:#f59e0b;font-family:ui-monospace,monospace;font-size:11px}
+.slug{font-weight:600;font-size:13px}
+.mood{color:#9aa0b5;font-size:11px;margin-bottom:6px}
+.sw{display:flex;gap:0;margin-bottom:6px;height:14px;border-radius:2px;overflow:hidden;width:fit-content}
+.sw span{width:22px;height:14px}
+.type{color:#7dffe9;font-size:10px;margin-bottom:2px}
+.voice{color:#9aa0b5;font-size:10px;font-style:italic}
+</style></head><body>
+<h1>Hormuz · 100 Mockup Variants</h1>
+<div class="sub">Four Horsemen Studio orchestrator — 100 distinct aesthetic directions. Anchors 1-4 hand-built; 5-100 generated via local Ollama gemma3:12b on MS1.</div>
+<div class="grid"><a class="card" href="001-operations-room.html" target="_blank">
+ <div class="thumb"><iframe src="001-operations-room.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">001</span><span class="slug">operations-room</span></div>
+ <div class="mood">operations-room</div>
+ <div class="sw"><span style="background:#0b0f1a"></span><span style="background:#10b981"></span><span style="background:#f59e0b"></span><span style="background:#9aa0b5"></span><span style="background:#f0f0f5"></span></div>
+ <div class="type">IBM Plex Mono + IBM Plex Sans</div>
+ <div class="voice">command-center, terse, kebab-case</div>
+ </div>
+ </a>
+<a class="card" href="002-museum-archive.html" target="_blank">
+ <div class="thumb"><iframe src="002-museum-archive.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">002</span><span class="slug">museum-archive</span></div>
+ <div class="mood">museum-archive</div>
+ <div class="sw"><span style="background:#f4ecdb"></span><span style="background:#1a1410"></span><span style="background:#7b1f1a"></span><span style="background:#9c8c72"></span><span style="background:#ffffff"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">editorial, archival, hushed</div>
+ </div>
+ </a>
+<a class="card" href="003-brutalist-spreadsheet.html" target="_blank">
+ <div class="thumb"><iframe src="003-brutalist-spreadsheet.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">003</span><span class="slug">brutalist-spreadsheet</span></div>
+ <div class="mood">brutalist-spreadsheet</div>
+ <div class="sw"><span style="background:#ffffff"></span><span style="background:#000000"></span><span style="background:#ff3b30"></span><span style="background:#cccccc"></span><span style="background:#666666"></span></div>
+ <div class="type">Inter + JetBrains Mono</div>
+ <div class="voice">all-caps headers, raw cells, no chrome</div>
+ </div>
+ </a>
+<a class="card" href="004-arcade-crt.html" target="_blank">
+ <div class="thumb"><iframe src="004-arcade-crt.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">004</span><span class="slug">arcade-crt</span></div>
+ <div class="mood">arcade-crt</div>
+ <div class="sw"><span style="background:#000000"></span><span style="background:#39ff14"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">VT323 + Press Start 2P</div>
+ <div class="voice">8-bit, scanline, GAME ON energy</div>
+ </div>
+ </a>
+<a class="card" href="005-weather-radar.html" target="_blank">
+ <div class="thumb"><iframe src="005-weather-radar.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">005</span><span class="slug">weather-radar</span></div>
+ <div class="mood">weather-radar</div>
+ <div class="sw"><span style="background:#0a1428"></span><span style="background:#7dffe9"></span><span style="background:#ffd166"></span><span style="background:#ef4f4f"></span><span style="background:#06080d"></span></div>
+ <div class="type">Roboto Condensed + Roboto Mono</div>
+ <div class="voice">meteorology brief, data over decoration</div>
+ </div>
+ </a>
+<a class="card" href="006-aviation-dashboard.html" target="_blank">
+ <div class="thumb"><iframe src="006-aviation-dashboard.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">006</span><span class="slug">aviation-dashboard</span></div>
+ <div class="mood">aviation-dashboard</div>
+ <div class="sw"><span style="background:#0d1117"></span><span style="background:#a5d8ff"></span><span style="background:#ffd43b"></span><span style="background:#fa5252"></span><span style="background:#212529"></span></div>
+ <div class="type">Barlow Condensed + Space Mono</div>
+ <div class="voice">ATC clipped, altitude/heading/status</div>
+ </div>
+ </a>
+<a class="card" href="007-library-catalog.html" target="_blank">
+ <div class="thumb"><iframe src="007-library-catalog.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">007</span><span class="slug">library-catalog</span></div>
+ <div class="mood">library-catalog</div>
+ <div class="sw"><span style="background:#f0e6d0"></span><span style="background:#1a1812"></span><span style="background:#5b3a1a"></span><span style="background:#888178"></span><span style="background:#fffaee"></span></div>
+ <div class="type">Crimson Pro + Inter</div>
+ <div class="voice">Dewey-decimal, card-catalog, polite</div>
+ </div>
+ </a>
+<a class="card" href="008-control-tower.html" target="_blank">
+ <div class="thumb"><iframe src="008-control-tower.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">008</span><span class="slug">control-tower</span></div>
+ <div class="mood">control-tower</div>
+ <div class="sw"><span style="background:#0b1d2a"></span><span style="background:#56ccf2"></span><span style="background:#f2c94c"></span><span style="background:#ff6b6b"></span><span style="background:#1c2c3a"></span></div>
+ <div class="type">Bebas Neue + Inter</div>
+ <div class="voice">tower-clearance, runway-active</div>
+ </div>
+ </a>
+<a class="card" href="009-particle-physics.html" target="_blank">
+ <div class="thumb"><iframe src="009-particle-physics.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">009</span><span class="slug">particle-physics</span></div>
+ <div class="mood">particle-physics-lab</div>
+ <div class="sw"><span style="background:#06070a"></span><span style="background:#7afcff"></span><span style="background:#fffd72"></span><span style="background:#bd6bff"></span><span style="background:#1a1c22"></span></div>
+ <div class="type">JetBrains Mono + Inter Tight</div>
+ <div class="voice">LaTeX-tinged, σ ∈ Σ, footnotes everywhere</div>
+ </div>
+ </a>
+<a class="card" href="010-sci-fi-bridge.html" target="_blank">
+ <div class="thumb"><iframe src="010-sci-fi-bridge.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">010</span><span class="slug">sci-fi-bridge</span></div>
+ <div class="mood">sci-fi-bridge</div>
+ <div class="sw"><span style="background:#0a0e1a"></span><span style="background:#ffba08"></span><span style="background:#3a86ff"></span><span style="background:#ff006e"></span><span style="background:#1d2333"></span></div>
+ <div class="type">Orbitron + Exo 2</div>
+ <div class="voice">make it so, bridge log, stardate</div>
+ </div>
+ </a>
+<a class="card" href="011-film-cutting-room.html" target="_blank">
+ <div class="thumb"><iframe src="011-film-cutting-room.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">011</span><span class="slug">film-cutting-room</span></div>
+ <div class="mood">film-cutting-room</div>
+ <div class="sw"><span style="background:#1a1612"></span><span style="background:#dba673"></span><span style="background:#5d4037"></span><span style="background:#e8e1d3"></span><span style="background:#3e2c1a"></span></div>
+ <div class="type">Spectral + Inter</div>
+ <div class="voice">edit-bay, frame counts, takes</div>
+ </div>
+ </a>
+<a class="card" href="012-fabric-mill.html" target="_blank">
+ <div class="thumb"><iframe src="012-fabric-mill.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">012</span><span class="slug">fabric-mill</span></div>
+ <div class="mood">fabric-mill-floor</div>
+ <div class="sw"><span style="background:#f3ebd9"></span><span style="background:#1f4d40"></span><span style="background:#c5a572"></span><span style="background:#c9292e"></span><span style="background:#2d2a26"></span></div>
+ <div class="type">Cormorant Garamond + Plus Jakarta Sans</div>
+ <div class="voice">Designer Wallcoverings native, woven tone</div>
+ </div>
+ </a>
+<a class="card" href="013-orchard-record.html" target="_blank">
+ <div class="thumb"><iframe src="013-orchard-record.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">013</span><span class="slug">orchard-record</span></div>
+ <div class="mood">orchard-record-book</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#3a4a2c"></span><span style="background:#9b7a3e"></span><span style="background:#5e3023"></span><span style="background:#ffffff"></span></div>
+ <div class="type">Lora + Manrope</div>
+ <div class="voice">harvest log, varietal, by hand</div>
+ </div>
+ </a>
+<a class="card" href="014-newspaper-front.html" target="_blank">
+ <div class="thumb"><iframe src="014-newspaper-front.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">014</span><span class="slug">newspaper-front</span></div>
+ <div class="mood">newspaper-front-page</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#222222"></span></div>
+ <div class="type">Playfair Display + Source Serif</div>
+ <div class="voice">byline, dateline, lede</div>
+ </div>
+ </a>
+<a class="card" href="015-subway-blueprint.html" target="_blank">
+ <div class="thumb"><iframe src="015-subway-blueprint.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">015</span><span class="slug">subway-blueprint</span></div>
+ <div class="mood">subway-blueprint</div>
+ <div class="sw"><span style="background:#0e2a47"></span><span style="background:#a4c5e8"></span><span style="background:#fcd13e"></span><span style="background:#e84545"></span><span style="background:#142e4d"></span></div>
+ <div class="type">Helvetica Neue + Roboto Mono</div>
+ <div class="voice">MTA signage, stops and transfers</div>
+ </div>
+ </a>
+<a class="card" href="016-nautical-chart.html" target="_blank">
+ <div class="thumb"><iframe src="016-nautical-chart.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">016</span><span class="slug">nautical-chart</span></div>
+ <div class="mood">nautical-chart</div>
+ <div class="sw"><span style="background:#dcd0a8"></span><span style="background:#1c4966"></span><span style="background:#7fb069"></span><span style="background:#bf3922"></span><span style="background:#fff8e0"></span></div>
+ <div class="type">Crimson Pro + DM Mono</div>
+ <div class="voice">longitude/latitude, depths, fathoms</div>
+ </div>
+ </a>
+<a class="card" href="017-weather-channel.html" target="_blank">
+ <div class="thumb"><iframe src="017-weather-channel.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">017</span><span class="slug">weather-channel</span></div>
+ <div class="mood">tv-weather-channel</div>
+ <div class="sw"><span style="background:#0b1c2c"></span><span style="background:#ffea00"></span><span style="background:#00b4ff"></span><span style="background:#ff5722"></span><span style="background:#0e2335"></span></div>
+ <div class="type">Helvetica + Inter</div>
+ <div class="voice">next on the eights, doppler</div>
+ </div>
+ </a>
+<a class="card" href="018-swiss-grid.html" target="_blank">
+ <div class="thumb"><iframe src="018-swiss-grid.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">018</span><span class="slug">swiss-grid</span></div>
+ <div class="mood">swiss-international</div>
+ <div class="sw"><span style="background:#ffffff"></span><span style="background:#000000"></span><span style="background:#ff0000"></span><span style="background:#666666"></span><span style="background:#f5f5f5"></span></div>
+ <div class="type">Helvetica Neue + Helvetica</div>
+ <div class="voice">muller-brockmann, all numerals</div>
+ </div>
+ </a>
+<a class="card" href="019-mid-century-print.html" target="_blank">
+ <div class="thumb"><iframe src="019-mid-century-print.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">019</span><span class="slug">mid-century-print</span></div>
+ <div class="mood">mid-century-poster</div>
+ <div class="sw"><span style="background:#fcecc9"></span><span style="background:#173d56"></span><span style="background:#d97706"></span><span style="background:#b91c1c"></span><span style="background:#fff5e1"></span></div>
+ <div class="type">DM Serif Display + Open Sans</div>
+ <div class="voice">see america, golden gate, atomic</div>
+ </div>
+ </a>
+<a class="card" href="020-japanese-railway.html" target="_blank">
+ <div class="thumb"><iframe src="020-japanese-railway.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">020</span><span class="slug">japanese-railway</span></div>
+ <div class="mood">japanese-railway-poster</div>
+ <div class="sw"><span style="background:#fff8e7"></span><span style="background:#8b1538"></span><span style="background:#0a4d3c"></span><span style="background:#1a1a1a"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Noto Serif JP + Inter</div>
+ <div class="voice">JR East, woodblock-influenced, vertical</div>
+ </div>
+ </a>
+<a class="card" href="021-fortran-tty.html" target="_blank">
+ <div class="thumb"><iframe src="021-fortran-tty.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">021</span><span class="slug">fortran-tty</span></div>
+ <div class="mood">fortran-mainframe-printout</div>
+ <div class="sw"><span style="background:#f6f1d8"></span><span style="background:#1a1a1a"></span><span style="background:#3a3a3a"></span><span style="background:#7a7a7a"></span><span style="background:#cccccc"></span></div>
+ <div class="type">IBM Plex Mono + Courier Prime</div>
+ <div class="voice">PUNCH CARD READY, JOB#0001</div>
+ </div>
+ </a>
+<a class="card" href="022-phosphor-terminal.html" target="_blank">
+ <div class="thumb"><iframe src="022-phosphor-terminal.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">022</span><span class="slug">phosphor-terminal</span></div>
+ <div class="mood">phosphor-terminal</div>
+ <div class="sw"><span style="background:#000000"></span><span style="background:#33ff33"></span><span style="background:#00aa00"></span><span style="background:#005f00"></span><span style="background:#0a0a0a"></span></div>
+ <div class="type">VT323 + JetBrains Mono</div>
+ <div class="voice">C:\>, no GUI, pure CLI</div>
+ </div>
+ </a>
+<a class="card" href="023-amber-cathode.html" target="_blank">
+ <div class="thumb"><iframe src="023-amber-cathode.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">023</span><span class="slug">amber-cathode</span></div>
+ <div class="mood">amber-cathode-monitor</div>
+ <div class="sw"><span style="background:#1a0e00"></span><span style="background:#ffb000"></span><span style="background:#cc8400"></span><span style="background:#664000"></span><span style="background:#000000"></span></div>
+ <div class="type">VT323 + Space Mono</div>
+ <div class="voice">DOS BBS, ANSI art, dialup</div>
+ </div>
+ </a>
+<a class="card" href="024-datacenter-rack.html" target="_blank">
+ <div class="thumb"><iframe src="024-datacenter-rack.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">024</span><span class="slug">datacenter-rack</span></div>
+ <div class="mood">datacenter-rack-LED</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#1de9b6"></span><span style="background:#ffd54f"></span><span style="background:#ef5350"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Inter Tight + Roboto Mono</div>
+ <div class="voice">U-spaced, blinkenlights, amps</div>
+ </div>
+ </a>
+<a class="card" href="025-polaroid-board.html" target="_blank">
+ <div class="thumb"><iframe src="025-polaroid-board.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">025</span><span class="slug">polaroid-board</span></div>
+ <div class="mood">polaroid-cork-board</div>
+ <div class="sw"><span style="background:#f5e9d3"></span><span style="background:#1a1a1a"></span><span style="background:#c45a5a"></span><span style="background:#3d6b54"></span><span style="background:#ffffff"></span></div>
+ <div class="type">Caveat + Inter</div>
+ <div class="voice">pinned, hand-labeled, photo-real</div>
+ </div>
+ </a>
+<a class="card" href="026-cassette-mixtape.html" target="_blank">
+ <div class="thumb"><iframe src="026-cassette-mixtape.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">026</span><span class="slug">cassette-mixtape</span></div>
+ <div class="mood">cassette-mixtape</div>
+ <div class="sw"><span style="background:#1a0d2e"></span><span style="background:#ff61a6"></span><span style="background:#ffe066"></span><span style="background:#5fb7ff"></span><span style="background:#0d0617"></span></div>
+ <div class="type">Bungee + Open Sans</div>
+ <div class="voice">Side A, Side B, dub-master</div>
+ </div>
+ </a>
+<a class="card" href="027-vinyl-liner-notes.html" target="_blank">
+ <div class="thumb"><iframe src="027-vinyl-liner-notes.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">027</span><span class="slug">vinyl-liner-notes</span></div>
+ <div class="mood">vinyl-liner-notes</div>
+ <div class="sw"><span style="background:#0d0d0d"></span><span style="background:#fff8e7"></span><span style="background:#c4a747"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Spectral + Source Sans</div>
+ <div class="voice">Track 1: …, recorded at, produced by</div>
+ </div>
+ </a>
+<a class="card" href="028-telegram-receipt.html" target="_blank">
+ <div class="thumb"><iframe src="028-telegram-receipt.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">028</span><span class="slug">telegram-receipt</span></div>
+ <div class="mood">telegram-receipt</div>
+ <div class="sw"><span style="background:#fdf6e3"></span><span style="background:#1a1a1a"></span><span style="background:#586e75"></span><span style="background:#268bd2"></span><span style="background:#eee8d5"></span></div>
+ <div class="type">Special Elite + IBM Plex Mono</div>
+ <div class="voice">STOP. URGENT. STOP.</div>
+ </div>
+ </a>
+<a class="card" href="029-ledger-tape.html" target="_blank">
+ <div class="thumb"><iframe src="029-ledger-tape.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">029</span><span class="slug">ledger-tape</span></div>
+ <div class="mood">adding-machine-tape</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#3a3a3a"></span><span style="background:#888888"></span><span style="background:#cccccc"></span></div>
+ <div class="type">Cutive Mono + IBM Plex Mono</div>
+ <div class="voice">carriage return, sub-total, paid</div>
+ </div>
+ </a>
+<a class="card" href="030-darkroom-redlight.html" target="_blank">
+ <div class="thumb"><iframe src="030-darkroom-redlight.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">030</span><span class="slug">darkroom-redlight</span></div>
+ <div class="mood">darkroom-red-light</div>
+ <div class="sw"><span style="background:#0a0303"></span><span style="background:#ff2a2a"></span><span style="background:#1a0808"></span><span style="background:#591212"></span><span style="background:#ffd1d1"></span></div>
+ <div class="type">Inter + JetBrains Mono</div>
+ <div class="voice">stop bath, fixer, do not open</div>
+ </div>
+ </a>
+<a class="card" href="031-japanese-tofu-shop.html" target="_blank">
+ <div class="thumb"><iframe src="031-japanese-tofu-shop.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">031</span><span class="slug">japanese-tofu-shop</span></div>
+ <div class="mood">japanese-tofu-shop-sign</div>
+ <div class="sw"><span style="background:#fffaf0"></span><span style="background:#1a1a1a"></span><span style="background:#3a4a2c"></span><span style="background:#a83232"></span><span style="background:#e8dcc4"></span></div>
+ <div class="type">Noto Serif JP + Noto Sans JP</div>
+ <div class="voice">made today, by hand, 豆腐</div>
+ </div>
+ </a>
+<a class="card" href="032-wine-cellar-tag.html" target="_blank">
+ <div class="thumb"><iframe src="032-wine-cellar-tag.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">032</span><span class="slug">wine-cellar-tag</span></div>
+ <div class="mood">wine-cellar-tag</div>
+ <div class="sw"><span style="background:#1a0a14"></span><span style="background:#d4af37"></span><span style="background:#722f37"></span><span style="background:#ddc6a8"></span><span style="background:#0a0408"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">vintage 2003, rack 14, north wall</div>
+ </div>
+ </a>
+<a class="card" href="033-watchmaker-bench.html" target="_blank">
+ <div class="thumb"><iframe src="033-watchmaker-bench.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">033</span><span class="slug">watchmaker-bench</span></div>
+ <div class="mood">watchmaker-bench</div>
+ <div class="sw"><span style="background:#1a1410"></span><span style="background:#d4b896"></span><span style="background:#7a5c3e"></span><span style="background:#f0e6d0"></span><span style="background:#0d0a08"></span></div>
+ <div class="type">Cormorant + Source Code</div>
+ <div class="voice">escapement, jewel-count, manual-wind</div>
+ </div>
+ </a>
+<a class="card" href="034-blueprint-roll.html" target="_blank">
+ <div class="thumb"><iframe src="034-blueprint-roll.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">034</span><span class="slug">blueprint-roll</span></div>
+ <div class="mood">architects-blueprint</div>
+ <div class="sw"><span style="background:#0e3a5f"></span><span style="background:#ffffff"></span><span style="background:#fcd13e"></span><span style="background:#a4c5e8"></span><span style="background:#1d4d7a"></span></div>
+ <div class="type">Architects Daughter + Inter</div>
+ <div class="voice">scale 1:50, rev. C, sheet 14 of 22</div>
+ </div>
+ </a>
+<a class="card" href="035-fbi-case-file.html" target="_blank">
+ <div class="thumb"><iframe src="035-fbi-case-file.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">035</span><span class="slug">fbi-case-file</span></div>
+ <div class="mood">fbi-case-file-redacted</div>
+ <div class="sw"><span style="background:#fbf3e0"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#000000"></span></div>
+ <div class="type">Special Elite + Source Sans</div>
+ <div class="voice">[REDACTED], CONFIDENTIAL, exhibit A</div>
+ </div>
+ </a>
+<a class="card" href="036-noir-detective.html" target="_blank">
+ <div class="thumb"><iframe src="036-noir-detective.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">036</span><span class="slug">noir-detective</span></div>
+ <div class="mood">noir-detective-board</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#dba673"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span><span style="background:#fbf6e9"></span></div>
+ <div class="type">Spectral + Inter</div>
+ <div class="voice">she walked in, gat in pocket, last lead</div>
+ </div>
+ </a>
+<a class="card" href="037-polish-poster-1960.html" target="_blank">
+ <div class="thumb"><iframe src="037-polish-poster-1960.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">037</span><span class="slug">polish-poster-1960</span></div>
+ <div class="mood">polish-poster-school</div>
+ <div class="sw"><span style="background:#1a1a1a"></span><span style="background:#ff4081"></span><span style="background:#ffd700"></span><span style="background:#00bcd4"></span><span style="background:#fdfaf3"></span></div>
+ <div class="type">Bungee + Inter</div>
+ <div class="voice">torn collage, Cyrillic-adjacent, expressive</div>
+ </div>
+ </a>
+<a class="card" href="038-memphis-milano.html" target="_blank">
+ <div class="thumb"><iframe src="038-memphis-milano.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">038</span><span class="slug">memphis-milano</span></div>
+ <div class="mood">memphis-milano-1980s</div>
+ <div class="sw"><span style="background:#fff8e1"></span><span style="background:#000000"></span><span style="background:#ff80ab"></span><span style="background:#42a5f5"></span><span style="background:#fdd835"></span></div>
+ <div class="type">Bungee + Inter</div>
+ <div class="voice">ettore sottsass, squiggles, terrazzo</div>
+ </div>
+ </a>
+<a class="card" href="039-vaporwave-grid.html" target="_blank">
+ <div class="thumb"><iframe src="039-vaporwave-grid.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">039</span><span class="slug">vaporwave-grid</span></div>
+ <div class="mood">vaporwave-aesthetic</div>
+ <div class="sw"><span style="background:#1a0033"></span><span style="background:#ff2a78"></span><span style="background:#7fffd4"></span><span style="background:#ffe066"></span><span style="background:#0d0019"></span></div>
+ <div class="type">Press Start 2P + Inter</div>
+ <div class="voice">AESTHETIC, full-width, neo-90s</div>
+ </div>
+ </a>
+<a class="card" href="040-y2k-chrome.html" target="_blank">
+ <div class="thumb"><iframe src="040-y2k-chrome.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">040</span><span class="slug">y2k-chrome</span></div>
+ <div class="mood">y2k-chrome-bubble</div>
+ <div class="sw"><span style="background:#e0e7ff"></span><span style="background:#7c3aed"></span><span style="background:#06b6d4"></span><span style="background:#fde047"></span><span style="background:#1e1b4b"></span></div>
+ <div class="type">Bungee + Inter</div>
+ <div class="voice">millennium-edition, glossy, AIM-era</div>
+ </div>
+ </a>
+<a class="card" href="041-flemish-still-life.html" target="_blank">
+ <div class="thumb"><iframe src="041-flemish-still-life.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">041</span><span class="slug">flemish-still-life</span></div>
+ <div class="mood">flemish-still-life</div>
+ <div class="sw"><span style="background:#1a0e00"></span><span style="background:#fbe9b7"></span><span style="background:#722f37"></span><span style="background:#3a4a2c"></span><span style="background:#0a0500"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">vanitas, oil-paint dim, lemon-peel curl</div>
+ </div>
+ </a>
+<a class="card" href="042-japanese-edo-print.html" target="_blank">
+ <div class="thumb"><iframe src="042-japanese-edo-print.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">042</span><span class="slug">japanese-edo-print</span></div>
+ <div class="mood">edo-period-ukiyo-e</div>
+ <div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a1a1a"></span><span style="background:#c45a5a"></span><span style="background:#0a4d3c"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Noto Serif JP + Inter</div>
+ <div class="voice">wave-and-mountain, sumi-ink, hokusai</div>
+ </div>
+ </a>
+<a class="card" href="043-courthouse-docket.html" target="_blank">
+ <div class="thumb"><iframe src="043-courthouse-docket.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">043</span><span class="slug">courthouse-docket</span></div>
+ <div class="mood">courthouse-docket</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#7a5c3e"></span><span style="background:#3a3a3a"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Crimson Pro + IBM Plex Mono</div>
+ <div class="voice">case 24-CV-1138, pursuant to, herein</div>
+ </div>
+ </a>
+<a class="card" href="044-passport-stamp.html" target="_blank">
+ <div class="thumb"><iframe src="044-passport-stamp.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">044</span><span class="slug">passport-stamp</span></div>
+ <div class="mood">passport-stamp</div>
+ <div class="sw"><span style="background:#0e2a47"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#3a4a2c"></span><span style="background:#7a5c3e"></span></div>
+ <div class="type">Special Elite + IBM Plex Sans</div>
+ <div class="voice">ENTRY GRANTED, CDG-LAX, immigration</div>
+ </div>
+ </a>
+<a class="card" href="045-subway-token.html" target="_blank">
+ <div class="thumb"><iframe src="045-subway-token.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">045</span><span class="slug">subway-token</span></div>
+ <div class="mood">subway-token-vending</div>
+ <div class="sw"><span style="background:#fcd13e"></span><span style="background:#1a1a1a"></span><span style="background:#0e2a47"></span><span style="background:#e84545"></span><span style="background:#fffaee"></span></div>
+ <div class="type">Bebas Neue + Inter</div>
+ <div class="voice">PLEASE INSERT, COIN, SVCE FEE</div>
+ </div>
+ </a>
+<a class="card" href="046-hospital-vitals.html" target="_blank">
+ <div class="thumb"><iframe src="046-hospital-vitals.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">046</span><span class="slug">hospital-vitals</span></div>
+ <div class="mood">hospital-vital-signs</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#39ff14"></span><span style="background:#ff5252"></span><span style="background:#ffeb3b"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">DSEG7 Modern + Inter</div>
+ <div class="voice">BP 120/80, HR 72, RR 16</div>
+ </div>
+ </a>
+<a class="card" href="047-telegram-channel.html" target="_blank">
+ <div class="thumb"><iframe src="047-telegram-channel.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">047</span><span class="slug">telegram-channel</span></div>
+ <div class="mood">telegram-bot-channel</div>
+ <div class="sw"><span style="background:#212d3b"></span><span style="background:#0088cc"></span><span style="background:#ffffff"></span><span style="background:#9aa0b5"></span><span style="background:#16202a"></span></div>
+ <div class="type">Inter + Roboto Mono</div>
+ <div class="voice">@username forwarded, replies thread</div>
+ </div>
+ </a>
+<a class="card" href="048-morse-code.html" target="_blank">
+ <div class="thumb"><iframe src="048-morse-code.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">048</span><span class="slug">morse-code</span></div>
+ <div class="mood">morse-code-key</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#ffd700"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span><span style="background:#fbf6e9"></span></div>
+ <div class="type">IBM Plex Mono + Inter</div>
+ <div class="voice">···— —··· ··—·, dit-dah, key-down</div>
+ </div>
+ </a>
+<a class="card" href="049-lighthouse-log.html" target="_blank">
+ <div class="thumb"><iframe src="049-lighthouse-log.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">049</span><span class="slug">lighthouse-log</span></div>
+ <div class="mood">lighthouse-keepers-log</div>
+ <div class="sw"><span style="background:#0e2a47"></span><span style="background:#fdfaf0"></span><span style="background:#7fb069"></span><span style="background:#bf3922"></span><span style="background:#1c4966"></span></div>
+ <div class="type">Crimson Pro + Source Serif</div>
+ <div class="voice">sunset 17:42, fog, kerosene-trim</div>
+ </div>
+ </a>
+<a class="card" href="050-circus-broadside.html" target="_blank">
+ <div class="thumb"><iframe src="050-circus-broadside.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">050</span><span class="slug">circus-broadside</span></div>
+ <div class="mood">circus-broadside-1920</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#ffd700"></span><span style="background:#0a4d3c"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Bungee + Source Sans</div>
+ <div class="voice">STEP RIGHT UP, MARVEL AT, ACT ONE</div>
+ </div>
+ </a>
+<a class="card" href="051-samurai-scroll.html" target="_blank">
+ <div class="thumb"><iframe src="051-samurai-scroll.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">051</span><span class="slug">samurai-scroll</span></div>
+ <div class="mood">samurai-honor-scroll</div>
+ <div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a1a1a"></span><span style="background:#7a1f1a"></span><span style="background:#3a4a2c"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Noto Serif JP + Cormorant Garamond</div>
+ <div class="voice">with utmost respect, signed in vermilion</div>
+ </div>
+ </a>
+<a class="card" href="052-egyptian-tomb.html" target="_blank">
+ <div class="thumb"><iframe src="052-egyptian-tomb.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">052</span><span class="slug">egyptian-tomb</span></div>
+ <div class="mood">egyptian-tomb-fresco</div>
+ <div class="sw"><span style="background:#3a2515"></span><span style="background:#d4b896"></span><span style="background:#0e3a5f"></span><span style="background:#bf3922"></span><span style="background:#fff8e0"></span></div>
+ <div class="type">Cinzel + Inter</div>
+ <div class="voice">in the year of, scribe-of-the-house, Ra</div>
+ </div>
+ </a>
+<a class="card" href="053-bauhaus-school.html" target="_blank">
+ <div class="thumb"><iframe src="053-bauhaus-school.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">053</span><span class="slug">bauhaus-school</span></div>
+ <div class="mood">bauhaus-school</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#000000"></span><span style="background:#0e3a5f"></span><span style="background:#fcd13e"></span><span style="background:#a83232"></span></div>
+ <div class="type">Bayon + Inter</div>
+ <div class="voice">form follows function, dessau, klee</div>
+ </div>
+ </a>
+<a class="card" href="054-art-deco-elevator.html" target="_blank">
+ <div class="thumb"><iframe src="054-art-deco-elevator.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">054</span><span class="slug">art-deco-elevator</span></div>
+ <div class="mood">art-deco-elevator-panel</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#d4af37"></span><span style="background:#1a1a1a"></span><span style="background:#fdfaf3"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Limelight + Inter</div>
+ <div class="voice">FLOOR 14, MEZZANINE, EXECUTIVE FLOOR</div>
+ </div>
+ </a>
+<a class="card" href="055-russian-constructivist.html" target="_blank">
+ <div class="thumb"><iframe src="055-russian-constructivist.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">055</span><span class="slug">russian-constructivist</span></div>
+ <div class="mood">russian-constructivist</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span><span style="background:#fcd13e"></span><span style="background:#666666"></span></div>
+ <div class="type">Bungee + Inter</div>
+ <div class="voice">rodchenko, diagonals, the workers</div>
+ </div>
+ </a>
+<a class="card" href="056-monastery-illuminated.html" target="_blank">
+ <div class="thumb"><iframe src="056-monastery-illuminated.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">056</span><span class="slug">monastery-illuminated</span></div>
+ <div class="mood">monastery-illuminated</div>
+ <div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a0e00"></span><span style="background:#a83232"></span><span style="background:#d4af37"></span><span style="background:#0a4d3c"></span></div>
+ <div class="type">UnifrakturCook + Inter</div>
+ <div class="voice">in nomine, capital A illuminated, vellum</div>
+ </div>
+ </a>
+<a class="card" href="057-shipping-manifest.html" target="_blank">
+ <div class="thumb"><iframe src="057-shipping-manifest.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">057</span><span class="slug">shipping-manifest</span></div>
+ <div class="mood">shipping-manifest-port</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#0e3a5f"></span><span style="background:#7a5c3e"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Special Elite + IBM Plex Mono</div>
+ <div class="voice">B/L 11422, port-of-origin, FOB rotterdam</div>
+ </div>
+ </a>
+<a class="card" href="058-stadium-scoreboard.html" target="_blank">
+ <div class="thumb"><iframe src="058-stadium-scoreboard.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">058</span><span class="slug">stadium-scoreboard</span></div>
+ <div class="mood">stadium-scoreboard</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#39ff14"></span><span style="background:#ff5252"></span><span style="background:#ffeb3b"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">DSEG14 Modern + Inter</div>
+ <div class="voice">Q4 2:14, HOME 21 AWAY 17, TIME-OUT</div>
+ </div>
+ </a>
+<a class="card" href="059-field-naturalist.html" target="_blank">
+ <div class="thumb"><iframe src="059-field-naturalist.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">059</span><span class="slug">field-naturalist</span></div>
+ <div class="mood">field-naturalist-journal</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#3a4a2c"></span><span style="background:#7a5c3e"></span><span style="background:#a83232"></span></div>
+ <div class="type">Caveat + Crimson Pro</div>
+ <div class="voice">in pen and ink, sketch of, observed</div>
+ </div>
+ </a>
+<a class="card" href="060-garden-seed-packet.html" target="_blank">
+ <div class="thumb"><iframe src="060-garden-seed-packet.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">060</span><span class="slug">garden-seed-packet</span></div>
+ <div class="mood">garden-seed-packet</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#3a4a2c"></span><span style="background:#9b7a3e"></span><span style="background:#a83232"></span><span style="background:#7fb069"></span></div>
+ <div class="type">Crimson Pro + Source Sans</div>
+ <div class="voice">sow 1/4 deep, days to germ, full sun</div>
+ </div>
+ </a>
+<a class="card" href="061-menu-prix-fixe.html" target="_blank">
+ <div class="thumb"><iframe src="061-menu-prix-fixe.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">061</span><span class="slug">menu-prix-fixe</span></div>
+ <div class="mood">menu-prix-fixe</div>
+ <div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a1a1a"></span><span style="background:#7a5c3e"></span><span style="background:#a83232"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">first course, with notes of, market price</div>
+ </div>
+ </a>
+<a class="card" href="062-tattoo-flash.html" target="_blank">
+ <div class="thumb"><iframe src="062-tattoo-flash.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">062</span><span class="slug">tattoo-flash</span></div>
+ <div class="mood">tattoo-flash-sheet</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#0e2a47"></span><span style="background:#fcd13e"></span></div>
+ <div class="type">Limelight + Inter</div>
+ <div class="voice">OLD SCHOOL, BANNER, ROSE-AND-DAGGER</div>
+ </div>
+ </a>
+<a class="card" href="063-skateboard-deck.html" target="_blank">
+ <div class="thumb"><iframe src="063-skateboard-deck.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">063</span><span class="slug">skateboard-deck</span></div>
+ <div class="mood">skateboard-graphic</div>
+ <div class="sw"><span style="background:#1a0033"></span><span style="background:#ff2a78"></span><span style="background:#7fffd4"></span><span style="background:#ffe066"></span><span style="background:#0d0019"></span></div>
+ <div class="type">Bungee + Inter</div>
+ <div class="voice">thrasher, bombing, no rules</div>
+ </div>
+ </a>
+<a class="card" href="064-rave-flyer-1996.html" target="_blank">
+ <div class="thumb"><iframe src="064-rave-flyer-1996.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">064</span><span class="slug">rave-flyer-1996</span></div>
+ <div class="mood">rave-flyer-1996</div>
+ <div class="sw"><span style="background:#000000"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span><span style="background:#ffff00"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">VT323 + Inter</div>
+ <div class="voice">WAREHOUSE, BPM, until 6 AM</div>
+ </div>
+ </a>
+<a class="card" href="065-punk-zine-1980.html" target="_blank">
+ <div class="thumb"><iframe src="065-punk-zine-1980.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">065</span><span class="slug">punk-zine-1980</span></div>
+ <div class="mood">punk-zine-cut-paste</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span><span style="background:#666666"></span></div>
+ <div class="type">Special Elite + Inter</div>
+ <div class="voice">xerox, ransom-note, glue-stick</div>
+ </div>
+ </a>
+<a class="card" href="066-magazine-editorial.html" target="_blank">
+ <div class="thumb"><iframe src="066-magazine-editorial.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">066</span><span class="slug">magazine-editorial</span></div>
+ <div class="mood">magazine-editorial</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Playfair Display + Source Serif</div>
+ <div class="voice">vol XII, photographed by, on assignment</div>
+ </div>
+ </a>
+<a class="card" href="067-industrial-warning.html" target="_blank">
+ <div class="thumb"><iframe src="067-industrial-warning.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">067</span><span class="slug">industrial-warning</span></div>
+ <div class="mood">industrial-warning-sign</div>
+ <div class="sw"><span style="background:#fcd13e"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#000000"></span></div>
+ <div class="type">Bebas Neue + Inter</div>
+ <div class="voice">DANGER, HARD HAT, AUTHORIZED ONLY</div>
+ </div>
+ </a>
+<a class="card" href="068-casino-strip.html" target="_blank">
+ <div class="thumb"><iframe src="068-casino-strip.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">068</span><span class="slug">casino-strip</span></div>
+ <div class="mood">casino-strip</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#d4af37"></span><span style="background:#a83232"></span><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Limelight + Inter</div>
+ <div class="voice">JACKPOT, ALL-IN, dealer stands on 17</div>
+ </div>
+ </a>
+<a class="card" href="069-peaceful-protest.html" target="_blank">
+ <div class="thumb"><iframe src="069-peaceful-protest.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">069</span><span class="slug">peaceful-protest</span></div>
+ <div class="mood">peaceful-protest-poster</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#fcd13e"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Bebas Neue + Source Sans</div>
+ <div class="voice">WE THE PEOPLE, DEMAND, NOW</div>
+ </div>
+ </a>
+<a class="card" href="070-lawyer-shingle.html" target="_blank">
+ <div class="thumb"><iframe src="070-lawyer-shingle.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">070</span><span class="slug">lawyer-shingle</span></div>
+ <div class="mood">lawyer-brass-shingle</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#d4af37"></span><span style="background:#fdfaf3"></span><span style="background:#666666"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Cinzel + Inter</div>
+ <div class="voice">established 1898, bar-licensed, pursue</div>
+ </div>
+ </a>
+<a class="card" href="071-doctor-prescription.html" target="_blank">
+ <div class="thumb"><iframe src="071-doctor-prescription.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">071</span><span class="slug">doctor-prescription</span></div>
+ <div class="mood">doctor-prescription-pad</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#0e2a47"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Caveat + IBM Plex Sans</div>
+ <div class="voice">Rx, sig: q.d., refill x3</div>
+ </div>
+ </a>
+<a class="card" href="072-candy-shop.html" target="_blank">
+ <div class="thumb"><iframe src="072-candy-shop.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">072</span><span class="slug">candy-shop</span></div>
+ <div class="mood">candy-shop-window</div>
+ <div class="sw"><span style="background:#fff0f5"></span><span style="background:#ff80ab"></span><span style="background:#ffd54f"></span><span style="background:#7fffd4"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Bungee + Inter</div>
+ <div class="voice">two for a quarter, gum-balls, jaw-breakers</div>
+ </div>
+ </a>
+<a class="card" href="073-library-microfiche.html" target="_blank">
+ <div class="thumb"><iframe src="073-library-microfiche.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">073</span><span class="slug">library-microfiche</span></div>
+ <div class="mood">microfiche-reader</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#fdfaf0"></span><span style="background:#666666"></span><span style="background:#3a3a3a"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">IBM Plex Mono + Inter</div>
+ <div class="voice">reel 412, frame 1138, photo-negative</div>
+ </div>
+ </a>
+<a class="card" href="074-auction-paddle.html" target="_blank">
+ <div class="thumb"><iframe src="074-auction-paddle.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">074</span><span class="slug">auction-paddle</span></div>
+ <div class="mood">auction-paddle</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#d4af37"></span><span style="background:#666666"></span></div>
+ <div class="type">Crimson Pro + Inter</div>
+ <div class="voice">going-once, lot 47, hammer-price</div>
+ </div>
+ </a>
+<a class="card" href="075-prayer-beads.html" target="_blank">
+ <div class="thumb"><iframe src="075-prayer-beads.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">075</span><span class="slug">prayer-beads</span></div>
+ <div class="mood">prayer-beads-stack</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#7a1f1a"></span><span style="background:#d4af37"></span><span style="background:#3a4a2c"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">decade, mystery, intercession</div>
+ </div>
+ </a>
+<a class="card" href="076-sushi-bar-counter.html" target="_blank">
+ <div class="thumb"><iframe src="076-sushi-bar-counter.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">076</span><span class="slug">sushi-bar-counter</span></div>
+ <div class="mood">sushi-bar-counter</div>
+ <div class="sw"><span style="background:#1a1a1a"></span><span style="background:#fdfaf0"></span><span style="background:#7a1f1a"></span><span style="background:#3a4a2c"></span><span style="background:#ddd5c2"></span></div>
+ <div class="type">Noto Serif JP + Inter</div>
+ <div class="voice">omakase, otoro, hand-cut, today only</div>
+ </div>
+ </a>
+<a class="card" href="077-truck-stop-diner.html" target="_blank">
+ <div class="thumb"><iframe src="077-truck-stop-diner.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">077</span><span class="slug">truck-stop-diner</span></div>
+ <div class="mood">truck-stop-diner</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#fcd13e"></span><span style="background:#0e2a47"></span></div>
+ <div class="type">Bungee + Source Sans</div>
+ <div class="voice">bottomless coffee, blue-plate, daily</div>
+ </div>
+ </a>
+<a class="card" href="078-barbershop-pole.html" target="_blank">
+ <div class="thumb"><iframe src="078-barbershop-pole.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">078</span><span class="slug">barbershop-pole</span></div>
+ <div class="mood">barbershop-pole</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#0e2a47"></span><span style="background:#1a1a1a"></span><span style="background:#666666"></span></div>
+ <div class="type">Limelight + Inter</div>
+ <div class="voice">first chair, fade, hot-towel</div>
+ </div>
+ </a>
+<a class="card" href="079-highway-mile-marker.html" target="_blank">
+ <div class="thumb"><iframe src="079-highway-mile-marker.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">079</span><span class="slug">highway-mile-marker</span></div>
+ <div class="mood">highway-mile-marker</div>
+ <div class="sw"><span style="background:#3a4a2c"></span><span style="background:#fdfaf0"></span><span style="background:#fcd13e"></span><span style="background:#1a1a1a"></span><span style="background:#7fb069"></span></div>
+ <div class="type">Bebas Neue + Inter</div>
+ <div class="voice">MILE 412, EXIT 14, NEXT REST 28</div>
+ </div>
+ </a>
+<a class="card" href="080-fire-watch-tower.html" target="_blank">
+ <div class="thumb"><iframe src="080-fire-watch-tower.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">080</span><span class="slug">fire-watch-tower</span></div>
+ <div class="mood">fire-watch-tower-log</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#3a4a2c"></span><span style="background:#a83232"></span><span style="background:#7a5c3e"></span></div>
+ <div class="type">Crimson Pro + IBM Plex Mono</div>
+ <div class="voice">smoke at 240°, distance 6mi, advised</div>
+ </div>
+ </a>
+<a class="card" href="081-fishing-charter.html" target="_blank">
+ <div class="thumb"><iframe src="081-fishing-charter.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">081</span><span class="slug">fishing-charter</span></div>
+ <div class="mood">fishing-charter-board</div>
+ <div class="sw"><span style="background:#0e2a47"></span><span style="background:#dcd0a8"></span><span style="background:#7fb069"></span><span style="background:#bf3922"></span><span style="background:#fdfaf0"></span></div>
+ <div class="type">Special Elite + Inter</div>
+ <div class="voice">tuna at 40lb, half-day, 6am sharp</div>
+ </div>
+ </a>
+<a class="card" href="082-carpenter-bench.html" target="_blank">
+ <div class="thumb"><iframe src="082-carpenter-bench.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">082</span><span class="slug">carpenter-bench</span></div>
+ <div class="mood">carpenter-workbench</div>
+ <div class="sw"><span style="background:#dba673"></span><span style="background:#1a0e00"></span><span style="background:#3a3a3a"></span><span style="background:#7a5c3e"></span><span style="background:#fbf6e9"></span></div>
+ <div class="type">Crimson Pro + Source Code</div>
+ <div class="voice">mortise and tenon, by hand, white oak</div>
+ </div>
+ </a>
+<a class="card" href="083-bookbinder-press.html" target="_blank">
+ <div class="thumb"><iframe src="083-bookbinder-press.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">083</span><span class="slug">bookbinder-press</span></div>
+ <div class="mood">bookbinder-press</div>
+ <div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a0e00"></span><span style="background:#7a1f1a"></span><span style="background:#d4af37"></span><span style="background:#7a5c3e"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">case-bound, foil-stamped, end-paper</div>
+ </div>
+ </a>
+<a class="card" href="084-lock-key-cutter.html" target="_blank">
+ <div class="thumb"><iframe src="084-lock-key-cutter.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">084</span><span class="slug">lock-key-cutter</span></div>
+ <div class="mood">locksmith-shop</div>
+ <div class="sw"><span style="background:#1a1a1a"></span><span style="background:#d4af37"></span><span style="background:#fdfaf0"></span><span style="background:#666666"></span><span style="background:#0a0a0a"></span></div>
+ <div class="type">Special Elite + IBM Plex Mono</div>
+ <div class="voice">blank-key, master, restricted</div>
+ </div>
+ </a>
+<a class="card" href="085-horology-galaxy.html" target="_blank">
+ <div class="thumb"><iframe src="085-horology-galaxy.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">085</span><span class="slug">horology-galaxy</span></div>
+ <div class="mood">moon-phase-watch</div>
+ <div class="sw"><span style="background:#0a0a14"></span><span style="background:#d4af37"></span><span style="background:#a4c5e8"></span><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">perpetual, leap-year, equation-of-time</div>
+ </div>
+ </a>
+<a class="card" href="086-espresso-machine.html" target="_blank">
+ <div class="thumb"><iframe src="086-espresso-machine.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">086</span><span class="slug">espresso-machine</span></div>
+ <div class="mood">espresso-machine-gauge</div>
+ <div class="sw"><span style="background:#1a0d08"></span><span style="background:#d4af37"></span><span style="background:#a83232"></span><span style="background:#fdfaf3"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Cormorant Garamond + Source Sans</div>
+ <div class="voice">9 bar, 93°C, 25 sec, 36g out</div>
+ </div>
+ </a>
+<a class="card" href="087-ham-radio-shack.html" target="_blank">
+ <div class="thumb"><iframe src="087-ham-radio-shack.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">087</span><span class="slug">ham-radio-shack</span></div>
+ <div class="mood">ham-radio-shack</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#39ff14"></span><span style="background:#ff5252"></span><span style="background:#666666"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">VT323 + Inter</div>
+ <div class="voice">CQ CQ CQ, this is W6XYZ, 73</div>
+ </div>
+ </a>
+<a class="card" href="088-darkmode-magazine.html" target="_blank">
+ <div class="thumb"><iframe src="088-darkmode-magazine.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">088</span><span class="slug">darkmode-magazine</span></div>
+ <div class="mood">dark-mode-editorial</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#fdfaf0"></span><span style="background:#d4af37"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Playfair Display + Inter</div>
+ <div class="voice">vol XII / no.4, photographed for, essay</div>
+ </div>
+ </a>
+<a class="card" href="089-minimalist-spa.html" target="_blank">
+ <div class="thumb"><iframe src="089-minimalist-spa.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">089</span><span class="slug">minimalist-spa</span></div>
+ <div class="mood">minimalist-spa</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#3a4a2c"></span><span style="background:#dba673"></span><span style="background:#fff8e7"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">by appointment, breath, restoration</div>
+ </div>
+ </a>
+<a class="card" href="090-nasa-mission-patch.html" target="_blank">
+ <div class="thumb"><iframe src="090-nasa-mission-patch.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">090</span><span class="slug">nasa-mission-patch</span></div>
+ <div class="mood">nasa-mission-patch</div>
+ <div class="sw"><span style="background:#0a0e1a"></span><span style="background:#fdfaf0"></span><span style="background:#0e3a5f"></span><span style="background:#a83232"></span><span style="background:#fcd13e"></span></div>
+ <div class="type">Cinzel + Inter</div>
+ <div class="voice">AD ASTRA, mission STS-141, crew of seven</div>
+ </div>
+ </a>
+<a class="card" href="091-voting-ballot.html" target="_blank">
+ <div class="thumb"><iframe src="091-voting-ballot.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">091</span><span class="slug">voting-ballot</span></div>
+ <div class="mood">voting-ballot</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#0e2a47"></span><span style="background:#a83232"></span><span style="background:#666666"></span></div>
+ <div class="type">Special Elite + IBM Plex Sans</div>
+ <div class="voice">fill in the oval, write-in, sign here</div>
+ </div>
+ </a>
+<a class="card" href="092-fortune-cookie.html" target="_blank">
+ <div class="thumb"><iframe src="092-fortune-cookie.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">092</span><span class="slug">fortune-cookie</span></div>
+ <div class="mood">fortune-cookie-slip</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span><span style="background:#d4af37"></span><span style="background:#fff8e0"></span></div>
+ <div class="type">Caveat + Inter</div>
+ <div class="voice">your lucky numbers, learn Mandarin, today</div>
+ </div>
+ </a>
+<a class="card" href="093-telegram-pole.html" target="_blank">
+ <div class="thumb"><iframe src="093-telegram-pole.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">093</span><span class="slug">telegram-pole</span></div>
+ <div class="mood">telegraph-pole-knots</div>
+ <div class="sw"><span style="background:#7a5c3e"></span><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#3a3a3a"></span><span style="background:#a83232"></span></div>
+ <div class="type">Special Elite + Inter</div>
+ <div class="voice">wire-down, repair-crew, pole 1138</div>
+ </div>
+ </a>
+<a class="card" href="094-beekeeper-log.html" target="_blank">
+ <div class="thumb"><iframe src="094-beekeeper-log.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">094</span><span class="slug">beekeeper-log</span></div>
+ <div class="mood">beekeeper-log-book</div>
+ <div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#fcd13e"></span><span style="background:#7a5c3e"></span><span style="background:#3a4a2c"></span></div>
+ <div class="type">Crimson Pro + Inter</div>
+ <div class="voice">queen marked blue, 8 frames, no swarm</div>
+ </div>
+ </a>
+<a class="card" href="095-dive-flag.html" target="_blank">
+ <div class="thumb"><iframe src="095-dive-flag.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">095</span><span class="slug">dive-flag</span></div>
+ <div class="mood">scuba-dive-log</div>
+ <div class="sw"><span style="background:#0a1428"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#7dffe9"></span><span style="background:#1c4966"></span></div>
+ <div class="type">Special Elite + IBM Plex Mono</div>
+ <div class="voice">30m, 42 min, deco-stop at 5m</div>
+ </div>
+ </a>
+<a class="card" href="096-gallery-wall-label.html" target="_blank">
+ <div class="thumb"><iframe src="096-gallery-wall-label.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">096</span><span class="slug">gallery-wall-label</span></div>
+ <div class="mood">gallery-wall-label</div>
+ <div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#666666"></span><span style="background:#ddd5c2"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Cormorant Garamond + Inter</div>
+ <div class="voice">Untitled, 1972, oil on canvas, gift of</div>
+ </div>
+ </a>
+<a class="card" href="097-old-school-arcade.html" target="_blank">
+ <div class="thumb"><iframe src="097-old-school-arcade.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">097</span><span class="slug">old-school-arcade</span></div>
+ <div class="mood">old-school-arcade-marquee</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span><span style="background:#ffff00"></span><span style="background:#ff5252"></span></div>
+ <div class="type">Press Start 2P + Inter</div>
+ <div class="voice">INSERT COIN, HIGH-SCORE, 1UP</div>
+ </div>
+ </a>
+<a class="card" href="098-post-office-window.html" target="_blank">
+ <div class="thumb"><iframe src="098-post-office-window.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">098</span><span class="slug">post-office-window</span></div>
+ <div class="mood">post-office-window</div>
+ <div class="sw"><span style="background:#fdfaf0"></span><span style="background:#0e2a47"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Special Elite + IBM Plex Sans</div>
+ <div class="voice">first-class, certified, return-receipt</div>
+ </div>
+ </a>
+<a class="card" href="099-bus-roll-sign.html" target="_blank">
+ <div class="thumb"><iframe src="099-bus-roll-sign.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">099</span><span class="slug">bus-roll-sign</span></div>
+ <div class="mood">bus-roll-sign</div>
+ <div class="sw"><span style="background:#1a1a1a"></span><span style="background:#fcd13e"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span></div>
+ <div class="type">Bebas Neue + Inter</div>
+ <div class="voice">ROUTE 14, DOWNTOWN, NEXT STOP</div>
+ </div>
+ </a>
+<a class="card" href="100-midnight-zoom.html" target="_blank">
+ <div class="thumb"><iframe src="100-midnight-zoom.html" loading="lazy"></iframe></div>
+ <div class="meta">
+ <div class="row1"><span class="ix">100</span><span class="slug">midnight-zoom</span></div>
+ <div class="mood">midnight-zoom-call</div>
+ <div class="sw"><span style="background:#0a0a0a"></span><span style="background:#1de9b6"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span></div>
+ <div class="type">Inter + JetBrains Mono</div>
+ <div class="voice">you're muted, can you see my screen, 11:42pm</div>
+ </div>
+ </a></div>
+</body></html>
\ No newline at end of file
diff --git a/mockups/manifest.json b/mockups/manifest.json
new file mode 100644
index 0000000..e56f532
--- /dev/null
+++ b/mockups/manifest.json
@@ -0,0 +1,120 @@
+{
+ "target": "Four Horsemen Studio — Hormuz",
+ "target_url": "http://45.61.58.125:9801",
+ "audience": "Steve as solo design director watching N parallel design jobs",
+ "current_register": "developer-utility dashboard, navy + emerald + amber, no strong brand",
+ "generator": "local Ollama gemma3:12b on MS1 (192.168.1.133:11434) per feedback_ollama_default_ms1",
+ "anchor_count": 4,
+ "ollama_count": 96,
+ "total": 100,
+ "slot_layout": {
+ "header": "project picker + status pill",
+ "left_pane": "chat log + slash command bar (/run-topic, /stampede)",
+ "preview_pane": "live result iframe",
+ "paper_pane": "Paper.design canvas iframe",
+ "figma_pane": "Figma file iframe",
+ "extra_panes": ["canva", "21st-dev-preview"]
+ },
+ "directions": [
+ {"i": 1, "slug": "operations-room", "mood": "operations-room", "palette": ["#0b0f1a","#10b981","#f59e0b","#9aa0b5","#f0f0f5"], "type": ["IBM Plex Mono","IBM Plex Sans"], "voice": "command-center, terse, kebab-case"},
+ {"i": 2, "slug": "museum-archive", "mood": "museum-archive", "palette": ["#f4ecdb","#1a1410","#7b1f1a","#9c8c72","#ffffff"], "type": ["Cormorant Garamond","Inter"], "voice": "editorial, archival, hushed"},
+ {"i": 3, "slug": "brutalist-spreadsheet", "mood": "brutalist-spreadsheet", "palette": ["#ffffff","#000000","#ff3b30","#cccccc","#666666"], "type": ["Inter","JetBrains Mono"], "voice": "all-caps headers, raw cells, no chrome"},
+ {"i": 4, "slug": "arcade-crt", "mood": "arcade-crt", "palette": ["#000000","#39ff14","#ff00ff","#00ffff","#1a1a1a"], "type": ["VT323","Press Start 2P"], "voice": "8-bit, scanline, GAME ON energy"},
+ {"i": 5, "slug": "weather-radar", "mood": "weather-radar", "palette": ["#0a1428","#7dffe9","#ffd166","#ef4f4f","#06080d"], "type": ["Roboto Condensed","Roboto Mono"], "voice": "meteorology brief, data over decoration"},
+ {"i": 6, "slug": "aviation-dashboard", "mood": "aviation-dashboard", "palette": ["#0d1117","#a5d8ff","#ffd43b","#fa5252","#212529"], "type": ["Barlow Condensed","Space Mono"], "voice": "ATC clipped, altitude/heading/status"},
+ {"i": 7, "slug": "library-catalog", "mood": "library-catalog", "palette": ["#f0e6d0","#1a1812","#5b3a1a","#888178","#fffaee"], "type": ["Crimson Pro","Inter"], "voice": "Dewey-decimal, card-catalog, polite"},
+ {"i": 8, "slug": "control-tower", "mood": "control-tower", "palette": ["#0b1d2a","#56ccf2","#f2c94c","#ff6b6b","#1c2c3a"], "type": ["Bebas Neue","Inter"], "voice": "tower-clearance, runway-active"},
+ {"i": 9, "slug": "particle-physics", "mood": "particle-physics-lab", "palette": ["#06070a","#7afcff","#fffd72","#bd6bff","#1a1c22"], "type": ["JetBrains Mono","Inter Tight"], "voice": "LaTeX-tinged, σ ∈ Σ, footnotes everywhere"},
+ {"i": 10, "slug": "sci-fi-bridge", "mood": "sci-fi-bridge", "palette": ["#0a0e1a","#ffba08","#3a86ff","#ff006e","#1d2333"], "type": ["Orbitron","Exo 2"], "voice": "make it so, bridge log, stardate"},
+ {"i": 11, "slug": "film-cutting-room", "mood": "film-cutting-room", "palette": ["#1a1612","#dba673","#5d4037","#e8e1d3","#3e2c1a"], "type": ["Spectral","Inter"], "voice": "edit-bay, frame counts, takes"},
+ {"i": 12, "slug": "fabric-mill", "mood": "fabric-mill-floor", "palette": ["#f3ebd9","#1f4d40","#c5a572","#c9292e","#2d2a26"], "type": ["Cormorant Garamond","Plus Jakarta Sans"],"voice": "Designer Wallcoverings native, woven tone"},
+ {"i": 13, "slug": "orchard-record", "mood": "orchard-record-book", "palette": ["#fbf6e9","#3a4a2c","#9b7a3e","#5e3023","#ffffff"], "type": ["Lora","Manrope"], "voice": "harvest log, varietal, by hand"},
+ {"i": 14, "slug": "newspaper-front", "mood": "newspaper-front-page", "palette": ["#fdfaf3","#1a1a1a","#a83232","#666666","#222222"], "type": ["Playfair Display","Source Serif"], "voice": "byline, dateline, lede"},
+ {"i": 15, "slug": "subway-blueprint", "mood": "subway-blueprint", "palette": ["#0e2a47","#a4c5e8","#fcd13e","#e84545","#142e4d"], "type": ["Helvetica Neue","Roboto Mono"], "voice": "MTA signage, stops and transfers"},
+ {"i": 16, "slug": "nautical-chart", "mood": "nautical-chart", "palette": ["#dcd0a8","#1c4966","#7fb069","#bf3922","#fff8e0"], "type": ["Crimson Pro","DM Mono"], "voice": "longitude/latitude, depths, fathoms"},
+ {"i": 17, "slug": "weather-channel", "mood": "tv-weather-channel", "palette": ["#0b1c2c","#ffea00","#00b4ff","#ff5722","#0e2335"], "type": ["Helvetica","Inter"], "voice": "next on the eights, doppler"},
+ {"i": 18, "slug": "swiss-grid", "mood": "swiss-international", "palette": ["#ffffff","#000000","#ff0000","#666666","#f5f5f5"], "type": ["Helvetica Neue","Helvetica"], "voice": "muller-brockmann, all numerals"},
+ {"i": 19, "slug": "mid-century-print", "mood": "mid-century-poster", "palette": ["#fcecc9","#173d56","#d97706","#b91c1c","#fff5e1"], "type": ["DM Serif Display","Open Sans"], "voice": "see america, golden gate, atomic"},
+ {"i": 20, "slug": "japanese-railway", "mood": "japanese-railway-poster", "palette": ["#fff8e7","#8b1538","#0a4d3c","#1a1a1a","#ddd5c2"], "type": ["Noto Serif JP","Inter"], "voice": "JR East, woodblock-influenced, vertical"},
+ {"i": 21, "slug": "fortran-tty", "mood": "fortran-mainframe-printout","palette":["#f6f1d8","#1a1a1a","#3a3a3a","#7a7a7a","#cccccc"], "type": ["IBM Plex Mono","Courier Prime"], "voice": "PUNCH CARD READY, JOB#0001"},
+ {"i": 22, "slug": "phosphor-terminal", "mood": "phosphor-terminal", "palette": ["#000000","#33ff33","#00aa00","#005f00","#0a0a0a"], "type": ["VT323","JetBrains Mono"], "voice": "C:\\>, no GUI, pure CLI"},
+ {"i": 23, "slug": "amber-cathode", "mood": "amber-cathode-monitor", "palette": ["#1a0e00","#ffb000","#cc8400","#664000","#000000"], "type": ["VT323","Space Mono"], "voice": "DOS BBS, ANSI art, dialup"},
+ {"i": 24, "slug": "datacenter-rack", "mood": "datacenter-rack-LED", "palette": ["#0a0a0a","#1de9b6","#ffd54f","#ef5350","#1a1a1a"], "type": ["Inter Tight","Roboto Mono"], "voice": "U-spaced, blinkenlights, amps"},
+ {"i": 25, "slug": "polaroid-board", "mood": "polaroid-cork-board", "palette": ["#f5e9d3","#1a1a1a","#c45a5a","#3d6b54","#ffffff"], "type": ["Caveat","Inter"], "voice": "pinned, hand-labeled, photo-real"},
+ {"i": 26, "slug": "cassette-mixtape", "mood": "cassette-mixtape", "palette": ["#1a0d2e","#ff61a6","#ffe066","#5fb7ff","#0d0617"], "type": ["Bungee","Open Sans"], "voice": "Side A, Side B, dub-master"},
+ {"i": 27, "slug": "vinyl-liner-notes", "mood": "vinyl-liner-notes", "palette": ["#0d0d0d","#fff8e7","#c4a747","#a83232","#1a1a1a"], "type": ["Spectral","Source Sans"], "voice": "Track 1: …, recorded at, produced by"},
+ {"i": 28, "slug": "telegram-receipt", "mood": "telegram-receipt", "palette": ["#fdf6e3","#1a1a1a","#586e75","#268bd2","#eee8d5"], "type": ["Special Elite","IBM Plex Mono"], "voice": "STOP. URGENT. STOP."},
+ {"i": 29, "slug": "ledger-tape", "mood": "adding-machine-tape", "palette": ["#fdfaf0","#1a1a1a","#3a3a3a","#888888","#cccccc"], "type": ["Cutive Mono","IBM Plex Mono"], "voice": "carriage return, sub-total, paid"},
+ {"i": 30, "slug": "darkroom-redlight", "mood": "darkroom-red-light", "palette": ["#0a0303","#ff2a2a","#1a0808","#591212","#ffd1d1"], "type": ["Inter","JetBrains Mono"], "voice": "stop bath, fixer, do not open"},
+ {"i": 31, "slug": "japanese-tofu-shop", "mood": "japanese-tofu-shop-sign", "palette": ["#fffaf0","#1a1a1a","#3a4a2c","#a83232","#e8dcc4"], "type": ["Noto Serif JP","Noto Sans JP"], "voice": "made today, by hand, 豆腐"},
+ {"i": 32, "slug": "wine-cellar-tag", "mood": "wine-cellar-tag", "palette": ["#1a0a14","#d4af37","#722f37","#ddc6a8","#0a0408"], "type": ["Cormorant Garamond","Inter"], "voice": "vintage 2003, rack 14, north wall"},
+ {"i": 33, "slug": "watchmaker-bench", "mood": "watchmaker-bench", "palette": ["#1a1410","#d4b896","#7a5c3e","#f0e6d0","#0d0a08"], "type": ["Cormorant","Source Code"], "voice": "escapement, jewel-count, manual-wind"},
+ {"i": 34, "slug": "blueprint-roll", "mood": "architects-blueprint", "palette": ["#0e3a5f","#ffffff","#fcd13e","#a4c5e8","#1d4d7a"], "type": ["Architects Daughter","Inter"], "voice": "scale 1:50, rev. C, sheet 14 of 22"},
+ {"i": 35, "slug": "fbi-case-file", "mood": "fbi-case-file-redacted", "palette": ["#fbf3e0","#1a1a1a","#a83232","#666666","#000000"], "type": ["Special Elite","Source Sans"], "voice": "[REDACTED], CONFIDENTIAL, exhibit A"},
+ {"i": 36, "slug": "noir-detective", "mood": "noir-detective-board", "palette": ["#0a0a0a","#dba673","#a83232","#3a3a3a","#fbf6e9"], "type": ["Spectral","Inter"], "voice": "she walked in, gat in pocket, last lead"},
+ {"i": 37, "slug": "polish-poster-1960", "mood": "polish-poster-school", "palette": ["#1a1a1a","#ff4081","#ffd700","#00bcd4","#fdfaf3"], "type": ["Bungee","Inter"], "voice": "torn collage, Cyrillic-adjacent, expressive"},
+ {"i": 38, "slug": "memphis-milano", "mood": "memphis-milano-1980s", "palette": ["#fff8e1","#000000","#ff80ab","#42a5f5","#fdd835"], "type": ["Bungee","Inter"], "voice": "ettore sottsass, squiggles, terrazzo"},
+ {"i": 39, "slug": "vaporwave-grid", "mood": "vaporwave-aesthetic", "palette": ["#1a0033","#ff2a78","#7fffd4","#ffe066","#0d0019"], "type": ["Press Start 2P","Inter"], "voice": "AESTHETIC, full-width, neo-90s"},
+ {"i": 40, "slug": "y2k-chrome", "mood": "y2k-chrome-bubble", "palette": ["#e0e7ff","#7c3aed","#06b6d4","#fde047","#1e1b4b"], "type": ["Bungee","Inter"], "voice": "millennium-edition, glossy, AIM-era"},
+ {"i": 41, "slug": "flemish-still-life", "mood": "flemish-still-life", "palette": ["#1a0e00","#fbe9b7","#722f37","#3a4a2c","#0a0500"], "type": ["Cormorant Garamond","Inter"], "voice": "vanitas, oil-paint dim, lemon-peel curl"},
+ {"i": 42, "slug": "japanese-edo-print", "mood": "edo-period-ukiyo-e", "palette": ["#fff8e7","#1a1a1a","#c45a5a","#0a4d3c","#ddd5c2"], "type": ["Noto Serif JP","Inter"], "voice": "wave-and-mountain, sumi-ink, hokusai"},
+ {"i": 43, "slug": "courthouse-docket", "mood": "courthouse-docket", "palette": ["#fdfaf0","#1a1a1a","#7a5c3e","#3a3a3a","#ddd5c2"], "type": ["Crimson Pro","IBM Plex Mono"], "voice": "case 24-CV-1138, pursuant to, herein"},
+ {"i": 44, "slug": "passport-stamp", "mood": "passport-stamp", "palette": ["#0e2a47","#fdfaf0","#a83232","#3a4a2c","#7a5c3e"], "type": ["Special Elite","IBM Plex Sans"], "voice": "ENTRY GRANTED, CDG-LAX, immigration"},
+ {"i": 45, "slug": "subway-token", "mood": "subway-token-vending", "palette": ["#fcd13e","#1a1a1a","#0e2a47","#e84545","#fffaee"], "type": ["Bebas Neue","Inter"], "voice": "PLEASE INSERT, COIN, SVCE FEE"},
+ {"i": 46, "slug": "hospital-vitals", "mood": "hospital-vital-signs", "palette": ["#0a0a0a","#39ff14","#ff5252","#ffeb3b","#1a1a1a"], "type": ["DSEG7 Modern","Inter"], "voice": "BP 120/80, HR 72, RR 16"},
+ {"i": 47, "slug": "telegram-channel", "mood": "telegram-bot-channel", "palette": ["#212d3b","#0088cc","#ffffff","#9aa0b5","#16202a"], "type": ["Inter","Roboto Mono"], "voice": "@username forwarded, replies thread"},
+ {"i": 48, "slug": "morse-code", "mood": "morse-code-key", "palette": ["#0a0a0a","#ffd700","#a83232","#3a3a3a","#fbf6e9"], "type": ["IBM Plex Mono","Inter"], "voice": "···— —··· ··—·, dit-dah, key-down"},
+ {"i": 49, "slug": "lighthouse-log", "mood": "lighthouse-keepers-log", "palette": ["#0e2a47","#fdfaf0","#7fb069","#bf3922","#1c4966"], "type": ["Crimson Pro","Source Serif"], "voice": "sunset 17:42, fog, kerosene-trim"},
+ {"i": 50, "slug": "circus-broadside", "mood": "circus-broadside-1920", "palette": ["#fdfaf0","#a83232","#ffd700","#0a4d3c","#1a1a1a"], "type": ["Bungee","Source Sans"], "voice": "STEP RIGHT UP, MARVEL AT, ACT ONE"},
+ {"i": 51, "slug": "samurai-scroll", "mood": "samurai-honor-scroll", "palette": ["#fff8e7","#1a1a1a","#7a1f1a","#3a4a2c","#ddd5c2"], "type": ["Noto Serif JP","Cormorant Garamond"], "voice": "with utmost respect, signed in vermilion"},
+ {"i": 52, "slug": "egyptian-tomb", "mood": "egyptian-tomb-fresco", "palette": ["#3a2515","#d4b896","#0e3a5f","#bf3922","#fff8e0"], "type": ["Cinzel","Inter"], "voice": "in the year of, scribe-of-the-house, Ra"},
+ {"i": 53, "slug": "bauhaus-school", "mood": "bauhaus-school", "palette": ["#fdfaf3","#000000","#0e3a5f","#fcd13e","#a83232"], "type": ["Bayon","Inter"], "voice": "form follows function, dessau, klee"},
+ {"i": 54, "slug": "art-deco-elevator", "mood": "art-deco-elevator-panel", "palette": ["#0a0a0a","#d4af37","#1a1a1a","#fdfaf3","#3a3a3a"], "type": ["Limelight","Inter"], "voice": "FLOOR 14, MEZZANINE, EXECUTIVE FLOOR"},
+ {"i": 55, "slug": "russian-constructivist","mood": "russian-constructivist", "palette": ["#fdfaf3","#a83232","#1a1a1a","#fcd13e","#666666"], "type": ["Bungee","Inter"], "voice": "rodchenko, diagonals, the workers"},
+ {"i": 56, "slug": "monastery-illuminated", "mood": "monastery-illuminated", "palette": ["#fff8e7","#1a0e00","#a83232","#d4af37","#0a4d3c"], "type": ["UnifrakturCook","Inter"], "voice": "in nomine, capital A illuminated, vellum"},
+ {"i": 57, "slug": "shipping-manifest", "mood": "shipping-manifest-port", "palette": ["#fdfaf0","#1a1a1a","#0e3a5f","#7a5c3e","#3a3a3a"], "type": ["Special Elite","IBM Plex Mono"], "voice": "B/L 11422, port-of-origin, FOB rotterdam"},
+ {"i": 58, "slug": "stadium-scoreboard", "mood": "stadium-scoreboard", "palette": ["#0a0a0a","#39ff14","#ff5252","#ffeb3b","#1a1a1a"], "type": ["DSEG14 Modern","Inter"], "voice": "Q4 2:14, HOME 21 AWAY 17, TIME-OUT"},
+ {"i": 59, "slug": "field-naturalist", "mood": "field-naturalist-journal","palette": ["#fbf6e9","#1a0e00","#3a4a2c","#7a5c3e","#a83232"], "type": ["Caveat","Crimson Pro"], "voice": "in pen and ink, sketch of, observed"},
+ {"i": 60, "slug": "garden-seed-packet", "mood": "garden-seed-packet", "palette": ["#fbf6e9","#3a4a2c","#9b7a3e","#a83232","#7fb069"], "type": ["Crimson Pro","Source Sans"], "voice": "sow 1/4 deep, days to germ, full sun"},
+ {"i": 61, "slug": "menu-prix-fixe", "mood": "menu-prix-fixe", "palette": ["#fff8e7","#1a1a1a","#7a5c3e","#a83232","#ddd5c2"], "type": ["Cormorant Garamond","Inter"], "voice": "first course, with notes of, market price"},
+ {"i": 62, "slug": "tattoo-flash", "mood": "tattoo-flash-sheet", "palette": ["#fbf6e9","#1a1a1a","#a83232","#0e2a47","#fcd13e"], "type": ["Limelight","Inter"], "voice": "OLD SCHOOL, BANNER, ROSE-AND-DAGGER"},
+ {"i": 63, "slug": "skateboard-deck", "mood": "skateboard-graphic", "palette": ["#1a0033","#ff2a78","#7fffd4","#ffe066","#0d0019"], "type": ["Bungee","Inter"], "voice": "thrasher, bombing, no rules"},
+ {"i": 64, "slug": "rave-flyer-1996", "mood": "rave-flyer-1996", "palette": ["#000000","#ff00ff","#00ffff","#ffff00","#1a1a1a"], "type": ["VT323","Inter"], "voice": "WAREHOUSE, BPM, until 6 AM"},
+ {"i": 65, "slug": "punk-zine-1980", "mood": "punk-zine-cut-paste", "palette": ["#fbf6e9","#1a1a1a","#a83232","#3a3a3a","#666666"], "type": ["Special Elite","Inter"], "voice": "xerox, ransom-note, glue-stick"},
+ {"i": 66, "slug": "magazine-editorial", "mood": "magazine-editorial", "palette": ["#fdfaf3","#1a1a1a","#a83232","#666666","#ddd5c2"], "type": ["Playfair Display","Source Serif"], "voice": "vol XII, photographed by, on assignment"},
+ {"i": 67, "slug": "industrial-warning", "mood": "industrial-warning-sign", "palette": ["#fcd13e","#1a1a1a","#a83232","#666666","#000000"], "type": ["Bebas Neue","Inter"], "voice": "DANGER, HARD HAT, AUTHORIZED ONLY"},
+ {"i": 68, "slug": "casino-strip", "mood": "casino-strip", "palette": ["#0a0a0a","#d4af37","#a83232","#fdfaf3","#1a1a1a"], "type": ["Limelight","Inter"], "voice": "JACKPOT, ALL-IN, dealer stands on 17"},
+ {"i": 69, "slug": "peaceful-protest", "mood": "peaceful-protest-poster", "palette": ["#fbf6e9","#1a1a1a","#a83232","#fcd13e","#3a3a3a"], "type": ["Bebas Neue","Source Sans"], "voice": "WE THE PEOPLE, DEMAND, NOW"},
+ {"i": 70, "slug": "lawyer-shingle", "mood": "lawyer-brass-shingle", "palette": ["#0a0a0a","#d4af37","#fdfaf3","#666666","#1a1a1a"], "type": ["Cinzel","Inter"], "voice": "established 1898, bar-licensed, pursue"},
+ {"i": 71, "slug": "doctor-prescription", "mood": "doctor-prescription-pad", "palette": ["#fdfaf0","#1a1a1a","#0e2a47","#a83232","#3a3a3a"], "type": ["Caveat","IBM Plex Sans"], "voice": "Rx, sig: q.d., refill x3"},
+ {"i": 72, "slug": "candy-shop", "mood": "candy-shop-window", "palette": ["#fff0f5","#ff80ab","#ffd54f","#7fffd4","#1a1a1a"], "type": ["Bungee","Inter"], "voice": "two for a quarter, gum-balls, jaw-breakers"},
+ {"i": 73, "slug": "library-microfiche", "mood": "microfiche-reader", "palette": ["#0a0a0a","#fdfaf0","#666666","#3a3a3a","#1a1a1a"], "type": ["IBM Plex Mono","Inter"], "voice": "reel 412, frame 1138, photo-negative"},
+ {"i": 74, "slug": "auction-paddle", "mood": "auction-paddle", "palette": ["#fdfaf0","#1a1a1a","#a83232","#d4af37","#666666"], "type": ["Crimson Pro","Inter"], "voice": "going-once, lot 47, hammer-price"},
+ {"i": 75, "slug": "prayer-beads", "mood": "prayer-beads-stack", "palette": ["#fdfaf3","#1a1a1a","#7a1f1a","#d4af37","#3a4a2c"], "type": ["Cormorant Garamond","Inter"], "voice": "decade, mystery, intercession"},
+ {"i": 76, "slug": "sushi-bar-counter", "mood": "sushi-bar-counter", "palette": ["#1a1a1a","#fdfaf0","#7a1f1a","#3a4a2c","#ddd5c2"], "type": ["Noto Serif JP","Inter"], "voice": "omakase, otoro, hand-cut, today only"},
+ {"i": 77, "slug": "truck-stop-diner", "mood": "truck-stop-diner", "palette": ["#fbf6e9","#1a1a1a","#a83232","#fcd13e","#0e2a47"], "type": ["Bungee","Source Sans"], "voice": "bottomless coffee, blue-plate, daily"},
+ {"i": 78, "slug": "barbershop-pole", "mood": "barbershop-pole", "palette": ["#fdfaf0","#a83232","#0e2a47","#1a1a1a","#666666"], "type": ["Limelight","Inter"], "voice": "first chair, fade, hot-towel"},
+ {"i": 79, "slug": "highway-mile-marker", "mood": "highway-mile-marker", "palette": ["#3a4a2c","#fdfaf0","#fcd13e","#1a1a1a","#7fb069"], "type": ["Bebas Neue","Inter"], "voice": "MILE 412, EXIT 14, NEXT REST 28"},
+ {"i": 80, "slug": "fire-watch-tower", "mood": "fire-watch-tower-log", "palette": ["#fbf6e9","#1a0e00","#3a4a2c","#a83232","#7a5c3e"], "type": ["Crimson Pro","IBM Plex Mono"], "voice": "smoke at 240°, distance 6mi, advised"},
+ {"i": 81, "slug": "fishing-charter", "mood": "fishing-charter-board", "palette": ["#0e2a47","#dcd0a8","#7fb069","#bf3922","#fdfaf0"], "type": ["Special Elite","Inter"], "voice": "tuna at 40lb, half-day, 6am sharp"},
+ {"i": 82, "slug": "carpenter-bench", "mood": "carpenter-workbench", "palette": ["#dba673","#1a0e00","#3a3a3a","#7a5c3e","#fbf6e9"], "type": ["Crimson Pro","Source Code"], "voice": "mortise and tenon, by hand, white oak"},
+ {"i": 83, "slug": "bookbinder-press", "mood": "bookbinder-press", "palette": ["#fff8e7","#1a0e00","#7a1f1a","#d4af37","#7a5c3e"], "type": ["Cormorant Garamond","Inter"], "voice": "case-bound, foil-stamped, end-paper"},
+ {"i": 84, "slug": "lock-key-cutter", "mood": "locksmith-shop", "palette": ["#1a1a1a","#d4af37","#fdfaf0","#666666","#0a0a0a"], "type": ["Special Elite","IBM Plex Mono"], "voice": "blank-key, master, restricted"},
+ {"i": 85, "slug": "horology-galaxy", "mood": "moon-phase-watch", "palette": ["#0a0a14","#d4af37","#a4c5e8","#fdfaf0","#1a1a1a"], "type": ["Cormorant Garamond","Inter"], "voice": "perpetual, leap-year, equation-of-time"},
+ {"i": 86, "slug": "espresso-machine", "mood": "espresso-machine-gauge", "palette": ["#1a0d08","#d4af37","#a83232","#fdfaf3","#3a3a3a"], "type": ["Cormorant Garamond","Source Sans"], "voice": "9 bar, 93°C, 25 sec, 36g out"},
+ {"i": 87, "slug": "ham-radio-shack", "mood": "ham-radio-shack", "palette": ["#0a0a0a","#39ff14","#ff5252","#666666","#1a1a1a"], "type": ["VT323","Inter"], "voice": "CQ CQ CQ, this is W6XYZ, 73"},
+ {"i": 88, "slug": "darkmode-magazine", "mood": "dark-mode-editorial", "palette": ["#0a0a0a","#fdfaf0","#d4af37","#a83232","#1a1a1a"], "type": ["Playfair Display","Inter"], "voice": "vol XII / no.4, photographed for, essay"},
+ {"i": 89, "slug": "minimalist-spa", "mood": "minimalist-spa", "palette": ["#fbf6e9","#1a1a1a","#3a4a2c","#dba673","#fff8e7"], "type": ["Cormorant Garamond","Inter"], "voice": "by appointment, breath, restoration"},
+ {"i": 90, "slug": "nasa-mission-patch", "mood": "nasa-mission-patch", "palette": ["#0a0e1a","#fdfaf0","#0e3a5f","#a83232","#fcd13e"], "type": ["Cinzel","Inter"], "voice": "AD ASTRA, mission STS-141, crew of seven"},
+ {"i": 91, "slug": "voting-ballot", "mood": "voting-ballot", "palette": ["#fdfaf0","#1a1a1a","#0e2a47","#a83232","#666666"], "type": ["Special Elite","IBM Plex Sans"], "voice": "fill in the oval, write-in, sign here"},
+ {"i": 92, "slug": "fortune-cookie", "mood": "fortune-cookie-slip", "palette": ["#fdfaf3","#a83232","#1a1a1a","#d4af37","#fff8e0"], "type": ["Caveat","Inter"], "voice": "your lucky numbers, learn Mandarin, today"},
+ {"i": 93, "slug": "telegram-pole", "mood": "telegraph-pole-knots", "palette": ["#7a5c3e","#fbf6e9","#1a0e00","#3a3a3a","#a83232"], "type": ["Special Elite","Inter"], "voice": "wire-down, repair-crew, pole 1138"},
+ {"i": 94, "slug": "beekeeper-log", "mood": "beekeeper-log-book", "palette": ["#fbf6e9","#1a0e00","#fcd13e","#7a5c3e","#3a4a2c"], "type": ["Crimson Pro","Inter"], "voice": "queen marked blue, 8 frames, no swarm"},
+ {"i": 95, "slug": "dive-flag", "mood": "scuba-dive-log", "palette": ["#0a1428","#fdfaf0","#a83232","#7dffe9","#1c4966"], "type": ["Special Elite","IBM Plex Mono"], "voice": "30m, 42 min, deco-stop at 5m"},
+ {"i": 96, "slug": "gallery-wall-label", "mood": "gallery-wall-label", "palette": ["#fdfaf3","#1a1a1a","#666666","#ddd5c2","#3a3a3a"], "type": ["Cormorant Garamond","Inter"], "voice": "Untitled, 1972, oil on canvas, gift of"},
+ {"i": 97, "slug": "old-school-arcade", "mood": "old-school-arcade-marquee","palette":["#0a0a0a","#ff00ff","#00ffff","#ffff00","#ff5252"], "type": ["Press Start 2P","Inter"], "voice": "INSERT COIN, HIGH-SCORE, 1UP"},
+ {"i": 98, "slug": "post-office-window", "mood": "post-office-window", "palette": ["#fdfaf0","#0e2a47","#a83232","#666666","#1a1a1a"], "type": ["Special Elite","IBM Plex Sans"], "voice": "first-class, certified, return-receipt"},
+ {"i": 99, "slug": "bus-roll-sign", "mood": "bus-roll-sign", "palette": ["#1a1a1a","#fcd13e","#fdfaf0","#a83232","#3a3a3a"], "type": ["Bebas Neue","Inter"], "voice": "ROUTE 14, DOWNTOWN, NEXT STOP"},
+ {"i":100, "slug": "midnight-zoom", "mood": "midnight-zoom-call", "palette": ["#0a0a0a","#1de9b6","#fdfaf0","#a83232","#1a1a1a"], "type": ["Inter","JetBrains Mono"], "voice": "you're muted, can you see my screen, 11:42pm"}
+ ]
+}
← 8060e64 add canonical .gitignore per standing rule
·
back to Hormuzy
·
fix: add rel=noopener noreferrer to 100 target=_blank links 32e8f51 →