-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (225 loc) · 91.5 KB
/
index.html
File metadata and controls
230 lines (225 loc) · 91.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<link rel="stylesheet" type="text/css" href="/assets/static/src_index-b3c78705.C9tosF9u.css">
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed" href="/rss.xml" />
<meta name="description" content="codex by fezcode..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fezcode.com/" />
<meta property="og:title" content="Fezcodex - Personal Blog and Projects" />
<meta property="og:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta property="og:image" content="/images/asset/ogtitle.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://fezcode.com/" />
<meta name="twitter:title" content="Fezcodex - Personal Blog and Projects" />
<meta name="twitter:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta name="twitter:image" content="/images/asset/ogtitle.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,200..900,0..100,0..1;1,9..144,200..900,0..100,0..1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=IM+Fell+English:ital@0;1&family=IM+Fell+DW+Pica:ital@0;1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
<title>fezcodex</title>
</head>
<body class="bg-slate-950">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="react-root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height: auto; opacity: 0;"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">FEZTERRACOTTA IS ONLINE: A WEIGHTED CODEX OF BONE PAPER AND TERRA INK. ENABLE VIA SETTINGS OR COMMAND PALETTE.</p><a href="https://fezcode.com/settings?fezTheme=terracotta&fezBlogMode=terracotta#fezcodex-theme" class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase">Enable Terracotta<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div class="bg-[#050505] min-h-screen font-sans flex"><div class="fixed inset-0 bg-black/80 backdrop-blur-sm z-40 md:hidden transition-opacity opacity-100 pointer-events-auto"></div><aside class="fixed top-0 left-0 h-screen w-72 bg-[#060608] z-50 flex flex-col border-r border-white/10 shadow-2xl" style="transform: none;"><div class="p-8 border-b border-white/10 flex flex-col gap-2 bg-black/50 relative"><div class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-emerald-500/60 via-amber-500/30 to-transparent"></div><a class="flex items-center gap-3 group" href="/" data-discover="true"><span class="text-xl font-black uppercase tracking-tighter text-white">Fez<span class="text-emerald-500">codex</span></span></a><span class="font-arvo text-[10px] text-gray-500 uppercase tracking-widest font-medium">Digital Archive Kernel // v0.25.1 // Bonewright</span></div><div class="relative flex-grow overflow-hidden"><div class="h-full overflow-y-auto scrollbar-hide no-scrollbar"><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Main</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M222.14,105.85l-80-80a20,20,0,0,0-28.28,0l-80,80A19.86,19.86,0,0,0,28,120v96a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V164h24v52a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V120A19.86,19.86,0,0,0,222.14,105.85ZM204,204H164V152a12,12,0,0,0-12-12H104a12,12,0,0,0-12,12v52H52V121.65l76-76,76,76Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Home</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/terminal" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M72.5,150.63,100.79,128,72.5,105.37a12,12,0,1,1,15-18.74l40,32a12,12,0,0,1,0,18.74l-40,32a12,12,0,0,1-15-18.74ZM144,172h32a12,12,0,0,0,0-24H144a12,12,0,0,0,0,24ZM236,56V200a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V56A20,20,0,0,1,40,36H216A20,20,0,0,1,236,56Zm-24,4H44V196H212Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Terminal</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/about" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">About</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/achievements" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232,60H212V48a12,12,0,0,0-12-12H56A12,12,0,0,0,44,48V60H24A20,20,0,0,0,4,80V96a44.05,44.05,0,0,0,44,44h.77A84.18,84.18,0,0,0,116,195.15V212H96a12,12,0,0,0,0,24h64a12,12,0,0,0,0-24H140V195.11c30.94-4.51,56.53-26.2,67-55.11h1a44.05,44.05,0,0,0,44-44V80A20,20,0,0,0,232,60ZM28,96V84H44v28c0,1.21,0,2.41.09,3.61A20,20,0,0,1,28,96Zm160,15.1c0,33.33-26.71,60.65-59.54,60.9A60,60,0,0,1,68,112V60H188ZM228,96a20,20,0,0,1-16.12,19.62c.08-1.5.12-3,.12-4.52V84h16Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Achievements</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Feed</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/blog" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232,44H160a43.86,43.86,0,0,0-32,13.85A43.86,43.86,0,0,0,96,44H24A12,12,0,0,0,12,56V200a12,12,0,0,0,12,12H96a20,20,0,0,1,20,20,12,12,0,0,0,24,0,20,20,0,0,1,20-20h72a12,12,0,0,0,12-12V56A12,12,0,0,0,232,44ZM96,188H36V68H96a20,20,0,0,1,20,20V192.81A43.79,43.79,0,0,0,96,188Zm124,0H160a43.71,43.71,0,0,0-20,4.83V88a20,20,0,0,1,20-20h60Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Blogposts</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/projects" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M230.47,67.5a12,12,0,0,0-19.26-4.32L172.43,99l-12.68-2.72L157,83.57l35.79-38.78a12,12,0,0,0-4.32-19.26A76.07,76.07,0,0,0,88.41,121.64L30.92,174.18a4.68,4.68,0,0,0-.39.38,36,36,0,0,0,50.91,50.91l.38-.39,52.54-57.49A76.05,76.05,0,0,0,230.47,67.5ZM160,148a51.5,51.5,0,0,1-23.35-5.52,12,12,0,0,0-14.26,2.62L64.31,208.66a12,12,0,0,1-17-17l63.55-58.07a12,12,0,0,0,2.62-14.26A51.5,51.5,0,0,1,108,96a52.06,52.06,0,0,1,52-52h.89L135.17,71.87a12,12,0,0,0-2.91,10.65l5.66,26.35a12,12,0,0,0,9.21,9.21l26.35,5.66a12,12,0,0,0,10.65-2.91L212,95.12c0,.3,0,.59,0,.89A52.06,52.06,0,0,1,160,148Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Projects</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/logs" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M216,36H40A20,20,0,0,0,20,56V200a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A20,20,0,0,0,216,36Zm-4,160H44V60H212ZM68,92A12,12,0,0,1,80,80h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,92Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,128Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,164Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Discovery Logs</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/vocab" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M208,20H72A36,36,0,0,0,36,56V224a12,12,0,0,0,12,12H192a12,12,0,0,0,0-24H60v-4a12,12,0,0,1,12-12H208a12,12,0,0,0,12-12V32A12,12,0,0,0,208,20ZM120,44h36v59l-10.51-8.41a12,12,0,0,0-15,0L120,103Zm76,128H72a35.59,35.59,0,0,0-12,2.06V56A12,12,0,0,1,72,44H96v84a12,12,0,0,0,19.5,9.37l22.49-18,22.51,18A12,12,0,0,0,180,128V44h16Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Glossary</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/the-vague" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M200,164v8h12a12,12,0,0,1,0,24H200v12a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24ZM92,172a32,32,0,0,1-32,32H56v4a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12H60A32,32,0,0,1,92,172Zm-24,0a8,8,0,0,0-8-8H56v16h4A8,8,0,0,0,68,172Zm100,8a40,40,0,0,1-40,40H112a12,12,0,0,1-12-12V152a12,12,0,0,1,12-12h16A40,40,0,0,1,168,180Zm-24,0a16,16,0,0,0-16-16h-4v32h4A16,16,0,0,0,144,180ZM36,108V40A20,20,0,0,1,56,20h96a12,12,0,0,1,8.49,3.52l56,56A12,12,0,0,1,220,88v20a12,12,0,0,1-24,0v-4H148a12,12,0,0,1-12-12V44H60v64a12,12,0,0,1-24,0ZM160,57V80h23Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">The Vague</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Applications</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a href="https://fezcode.com/castarook/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M252,80a32,32,0,1,0-60,15.45l-20.86,25.66L150.82,74.4a32,32,0,1,0-45.64,0L84.87,121.11,64,95.45a32,32,0,1,0-35,15.78l14,84.06A19.94,19.94,0,0,0,62.78,212H193.22A19.94,19.94,0,0,0,213,195.29l14-84.06A32.05,32.05,0,0,0,252,80Zm-32-8a8,8,0,1,1-8,8A8,8,0,0,1,220,72ZM128,44a8,8,0,1,1-8,8A8,8,0,0,1,128,44ZM36,72a8,8,0,1,1-8,8A8,8,0,0,1,36,72ZM189.83,188H66.17L55.29,122.78l23.4,28.79A12,12,0,0,0,88,156a12.87,12.87,0,0,0,1.63-.11,12,12,0,0,0,9.37-7.1L127.18,84l.82,0,.82,0L157,148.79a12,12,0,0,0,9.37,7.1A12.87,12.87,0,0,0,168,156a12,12,0,0,0,9.31-4.43l23.4-28.79Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Castarook</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/urban-rogue/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M229.26,90.4a108,108,0,0,1-177.63,114A108,108,0,0,1,195.41,43.63l20.1-20.11a12,12,0,0,1,17,17l-96,96a12,12,0,1,1-17-17l24-24a36,36,0,1,0,19.76,39.65,12,12,0,0,1,23.53,4.74,60,60,0,1,1-25.73-62L178.3,60.74a84,84,0,1,0,28.46,38,12,12,0,1,1,22.5-8.35Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Urban Rogue</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/Swat-Tactics/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M208,36H48A20,20,0,0,0,28,56v56c0,54.29,26.32,87.22,48.4,105.29,23.71,19.39,47.44,26,48.44,26.29a12.1,12.1,0,0,0,6.32,0c1-.28,24.73-6.9,48.44-26.29,22.08-18.07,48.4-51,48.4-105.29V56A20,20,0,0,0,208,36Zm-4,76c0,35.71-13.09,64.69-38.91,86.15A126.28,126.28,0,0,1,128,219.38a126.14,126.14,0,0,1-37.09-21.23C65.09,176.69,52,147.71,52,112V60H204ZM79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Swat Tactics</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/climb-the-tall-building-0/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M216,28H152a12,12,0,0,0-9.33,4.45L79.5,110.51l-4.66-4.65a20,20,0,0,0-28.29,0L29.86,122.55a20,20,0,0,0,0,28.29h0L45,166,23.86,187.17a20,20,0,0,0,0,28.28l16.69,16.69a20,20,0,0,0,28.28,0L90,211l15.17,15.16a20,20,0,0,0,28.29,0l16.69-16.69a20,20,0,0,0,0-28.3l-4.65-4.65,78.06-63.17A12,12,0,0,0,228,104V40A12,12,0,0,0,216,28ZM54.69,212.34l-11-11L62,183l11,11Zm64.61-6L49.65,136.7l11.05-11,69.65,69.65ZM204,98.27l-75.58,61.17L121,152l47.51-47.5a12,12,0,0,0-17-17L104,135l-7.45-7.44L157.73,52H204Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">CTTB-0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/net_run/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M225.6,62.64l-88-48.17a19.91,19.91,0,0,0-19.2,0l-88,48.17A20,20,0,0,0,20,80.19v95.62a20,20,0,0,0,10.4,17.55l88,48.17a19.89,19.89,0,0,0,19.2,0l88-48.17A20,20,0,0,0,236,175.81V80.19A20,20,0,0,0,225.6,62.64ZM128,36.57,200,76,128,115.4,56,76ZM44,96.79l72,39.4v76.67L44,173.44Zm96,116.07V136.19l72-39.4v76.65Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Net Run</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 bg-emerald-500/5 text-emerald-400 border-l-2 border-emerald-500"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Utilities</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/pinned-apps" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M238.15,78.54,177.46,17.86a20,20,0,0,0-28.3,0L97.2,70c-12.43-3.33-36.68-5.72-61.74,14.5a20,20,0,0,0-1.6,29.73l45.46,45.47-39.8,39.8a12,12,0,0,0,17,17l39.8-39.81,45.47,45.46A20,20,0,0,0,155.91,228c.46,0,.93,0,1.4-.05A20,20,0,0,0,171.87,220c4.69-6.23,11-16.13,14.44-28s3.45-22.88.16-33.4l51.7-51.87A20,20,0,0,0,238.15,78.54Zm-74.26,68.79a12,12,0,0,0-2.23,13.84c3.43,6.86,6.9,21-6.28,40.65L54.08,100.53c21.09-14.59,39.53-6.64,41-6a11.67,11.67,0,0,0,13.81-2.29l54.43-54.61,55,55Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Favorites</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a aria-current="page" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 bg-emerald-500/10 text-white" href="/apps" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M100,36H56A20,20,0,0,0,36,56v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,100,36ZM96,96H60V60H96ZM200,36H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,200,36Zm-4,60H160V60h36Zm-96,40H56a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,100,136Zm-4,60H60V160H96Zm104-60H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,200,136Zm-4,60H160V160h36Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">App Center</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/commands" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Manuals</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// System</span><span class="transform transition-transform duration-300 ">↓</span></button><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// External Nodes</span><span class="transform transition-transform duration-300 ">↓</span></button></div></div><div class="p-4 border-t border-white/10 bg-black/50"><div class="grid grid-cols-4 gap-2 mb-4"><button title="COMMANDS" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg></div></button><button title="SETTINGS" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,80a28,28,0,1,1,28-28A28,28,0,0,1,128,156Zm113.86-49.57A12,12,0,0,0,236,98.34L208.21,82.49l-.11-31.31a12,12,0,0,0-4.25-9.12,116,116,0,0,0-38-21.41,12,12,0,0,0-9.68.89L128,37.27,99.83,21.53a12,12,0,0,0-9.7-.9,116.06,116.06,0,0,0-38,21.47,12,12,0,0,0-4.24,9.1l-.14,31.34L20,98.35a12,12,0,0,0-5.85,8.11,110.7,110.7,0,0,0,0,43.11A12,12,0,0,0,20,157.66l27.82,15.85.11,31.31a12,12,0,0,0,4.25,9.12,116,116,0,0,0,38,21.41,12,12,0,0,0,9.68-.89L128,218.73l28.14,15.74a12,12,0,0,0,9.7.9,116.06,116.06,0,0,0,38-21.47,12,12,0,0,0,4.24-9.1l.14-31.34,27.81-15.81a12,12,0,0,0,5.85-8.11A110.7,110.7,0,0,0,241.86,106.43Zm-22.63,33.18-26.88,15.28a11.94,11.94,0,0,0-4.55,4.59c-.54,1-1.11,1.93-1.7,2.88a12,12,0,0,0-1.83,6.31L184.13,199a91.83,91.83,0,0,1-21.07,11.87l-27.15-15.19a12,12,0,0,0-5.86-1.53h-.29c-1.14,0-2.3,0-3.44,0a12.08,12.08,0,0,0-6.14,1.51L93,210.82A92.27,92.27,0,0,1,71.88,199l-.11-30.24a12,12,0,0,0-1.83-6.32c-.58-.94-1.16-1.91-1.7-2.88A11.92,11.92,0,0,0,63.7,155L36.8,139.63a86.53,86.53,0,0,1,0-23.24l26.88-15.28a12,12,0,0,0,4.55-4.58c.54-1,1.11-1.94,1.7-2.89a12,12,0,0,0,1.83-6.31L71.87,57A91.83,91.83,0,0,1,92.94,45.17l27.15,15.19a11.92,11.92,0,0,0,6.15,1.52c1.14,0,2.3,0,3.44,0a12.08,12.08,0,0,0,6.14-1.51L163,45.18A92.27,92.27,0,0,1,184.12,57l.11,30.24a12,12,0,0,0,1.83,6.32c.58.94,1.16,1.91,1.7,2.88A11.92,11.92,0,0,0,192.3,101l26.9,15.33A86.53,86.53,0,0,1,219.23,139.61Z"></path></svg></div></button><button title="RANDOM" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M240.49,175.51a12,12,0,0,1,0,17l-24,24a12,12,0,0,1-17-17L203,196h-2.09a76.17,76.17,0,0,1-61.85-31.83L97.38,105.78A52.1,52.1,0,0,0,55.06,84H32a12,12,0,0,1,0-24H55.06a76.17,76.17,0,0,1,61.85,31.83l41.71,58.39A52.1,52.1,0,0,0,200.94,172H203l-3.52-3.51a12,12,0,0,1,17-17Zm-95.62-72.62a12,12,0,0,0,16.93-1.13A52,52,0,0,1,200.94,84H203l-3.52,3.51a12,12,0,0,0,17,17l24-24a12,12,0,0,0,0-17l-24-24a12,12,0,0,0-17,17L203,60h-2.09a76,76,0,0,0-57.2,26A12,12,0,0,0,144.87,102.89Zm-33.74,50.22a12,12,0,0,0-16.93,1.13A52,52,0,0,1,55.06,172H32a12,12,0,0,0,0,24H55.06a76,76,0,0,0,57.2-26A12,12,0,0,0,111.13,153.11Z"></path></svg></div></button><button title="CONTACT" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M224,44H32A12,12,0,0,0,20,56V192a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A12,12,0,0,0,224,44ZM193.15,68,128,127.72,62.85,68ZM44,188V83.28l75.89,69.57a12,12,0,0,0,16.22,0L212,83.28V188Z"></path></svg></div></button></div><div class="text-center"><p class="font-arvo text-[10px] text-gray-600 uppercase tracking-widest font-medium">© 2026 Fezcode // Theme: Brutalist</p></div></div></aside><div class="flex-1 flex flex-col min-w-0 transition-all duration-300 md:ml-72"><header class="bg-[#050505]/80 backdrop-blur-md sticky top-0 z-[60] transition-all border-b border-transparent py-4 relative"><button class="absolute top-1/2 -translate-y-1/2 left-6 text-gray-400 hover:text-emerald-500 transition-colors hidden md:block focus:outline-none" aria-label="Toggle Sidebar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button><div class="mx-auto max-w-7xl px-6 flex justify-between items-center text-white"><div class="md:hidden flex items-center gap-4"><button class="text-gray-400 hover:text-white transition-colors focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button><a class="flex items-center gap-2" href="/" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40" class="text-white" style="transform: rotate(-30deg);"><g transform="translate(0, -2)"><path d="M 20 40 C 20 30, 80 30, 80 40 L 85 70 C 85 75, 15 75, 15 70 Z" fill="white" stroke="white" stroke-width="2"></path><path d="M 50 25 Q 60 15, 70 25" stroke="white" stroke-width="2" fill="none"></path></g></svg><span class="text-xl font-black tracking-tighter uppercase font-mono">Fez<span class="text-emerald-500">codex</span></span></a></div><div class="hidden md:flex items-center gap-2 ml-12"></div><div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:block"><span class="text-xs font-mono font-bold uppercase tracking-[0.3em] text-gray-500">The Fez of <span class="text-emerald-500">Code</span></span></div><div class="flex items-center gap-2 md:gap-4"><a class="group flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-sm transition-all" href="/about" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg><span class="hidden md:inline text-[10px] font-mono font-bold uppercase tracking-widest">About</span></a><button class="group flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-sm transition-all" aria-label="Toggle Search"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="group-hover:text-emerald-500 transition-colors"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg><span class="hidden md:inline text-[10px] font-mono font-bold uppercase tracking-widest group-hover:text-emerald-500 transition-colors">Search</span></button></div></div></header><main class="flex-grow"><div style="opacity: 0;"><div class="wb-page min-h-screen relative" style="background: rgb(15, 15, 16); color: rgb(239, 236, 228); font-family: "Instrument Sans", system-ui, sans-serif;"><style>
.wb-label {
font-family: 'JetBrains Mono', 'Space Mono', monospace;
font-size: 10px; letter-spacing: 0.08em;
color: var(--wb-ink-soft); text-transform: lowercase;
}
.wb-value {
font-family: 'Instrument Sans', system-ui, sans-serif;
font-size: 13px; color: var(--wb-ink);
font-variant-numeric: tabular-nums;
}
.wb-card {
background: var(--wb-surface);
border: 1px solid var(--wb-hair);
border-radius: 14px;
padding: 20px;
}
.wb-section-head {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--wb-ink-soft);
display: flex; align-items: center; gap: 8px;
margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--wb-hair);
}
.wb-slider {
-webkit-appearance: none; appearance: none;
background: transparent; height: 20px; width: 100%;
outline: none; cursor: pointer;
}
.wb-slider::-webkit-slider-runnable-track {
height: 3px; border-radius: 2px;
background: linear-gradient(to right,
var(--wb-accent) var(--wb-pct, 0%),
rgba(25,23,22,0.12) var(--wb-pct, 0%));
}
.wb-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
height: 14px; width: 14px; border-radius: 50%;
background: var(--wb-bg);
border: 2px solid var(--wb-accent);
margin-top: -5.5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
transition: transform .12s ease;
}
.wb-slider::-webkit-slider-thumb:hover { transform: scale(1.18); }
.wb-slider::-moz-range-track { height: 3px; background: rgba(25,23,22,0.12); border-radius: 2px; }
.wb-slider::-moz-range-progress { height: 3px; background: var(--wb-accent); border-radius: 2px; }
.wb-slider::-moz-range-thumb {
height: 14px; width: 14px; border-radius: 50%;
background: var(--wb-bg); border: 2px solid var(--wb-accent); cursor: pointer;
}
.wb-select {
width: 100%; appearance: none; -webkit-appearance: none;
background: var(--wb-surface);
border: 1px solid var(--wb-hair);
border-radius: 10px;
padding: 10px 36px 10px 12px;
font-family: 'Instrument Sans', system-ui, sans-serif;
font-size: 14px; color: var(--wb-ink);
outline: none; cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.wb-select:hover { border-color: var(--wb-hair-hi); }
.wb-select:focus {
border-color: var(--wb-accent);
box-shadow: 0 0 0 3px var(--wb-accent-ring);
}
.wb-input {
width: 100%;
background: var(--wb-surface);
border: 1px solid var(--wb-hair);
border-radius: 10px;
padding: 6px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; color: var(--wb-ink);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.wb-input:focus {
border-color: var(--wb-accent);
box-shadow: 0 0 0 3px var(--wb-accent-ring);
}
.wb-swatch {
width: 40px; height: 40px; border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(25,23,22,0.18), 0 1px 2px rgba(0,0,0,0.04);
cursor: pointer; transition: transform .15s ease; flex-shrink: 0;
overflow: hidden; position: relative;
}
.wb-swatch:hover { transform: scale(1.06); }
.wb-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.08em;
background: var(--wb-surface);
color: var(--wb-ink);
border: 1px solid var(--wb-hair);
border-radius: 10px;
cursor: pointer;
transition: all .15s ease;
}
.wb-btn:hover {
background: var(--wb-accent);
color: var(--wb-bg);
border-color: var(--wb-accent);
}
.wb-btn--primary {
background: var(--wb-accent);
color: var(--wb-bg);
border-color: var(--wb-accent);
}
.wb-btn--primary:hover {
background: #A85430;
border-color: #A85430;
}
.wb-micro-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--wb-ink-soft);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.wb-micro-btn:hover {
background: var(--wb-accent-soft);
color: var(--wb-accent);
}
.wb-kbd {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px; border-radius: 5px;
background: var(--wb-surface);
border: 1px solid var(--wb-hair);
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: var(--wb-ink-soft);
}
.wb-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--wb-hair);
background: var(--wb-surface);
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.12em;
color: var(--wb-ink-soft);
}
.wb-display {
font-family: 'Fraunces', 'EB Garamond', serif;
font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
.wb-mono { font-family: 'JetBrains Mono', 'Space Mono', monospace; }
@keyframes wb-reveal {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.wb-reveal { animation: wb-reveal .5s cubic-bezier(.2,.7,.2,1) both; }
:root {
--wb-bg: #0F0F10; --wb-surface: #17171A; --wb-surface-2: #1E1E22;
--wb-hair: rgba(239,236,228,0.08); --wb-hair-hi: rgba(239,236,228,0.16);
--wb-ink: #EFECE4; --wb-ink-soft: #A8A49B; --wb-ink-dim: #6E6B64;
--wb-accent: #C4643A; --wb-accent-soft: rgba(196,100,58,0.14); --wb-accent-ring: rgba(196,100,58,0.28);
}
.wb-page *:focus-visible {
outline: 2px solid var(--wb-accent);
outline-offset: 2px;
border-radius: 4px;
}
.wb-page::before {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(circle at 30% 30%, rgba(25,23,22,0.025) 1px, transparent 1px);
background-size: 3px 3px; opacity: 0.6;
}
.wb-page::after {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(60% 30% at 50% 0%, rgba(196,100,58,0.06), transparent 70%);
}
</style><div class="sticky top-0 z-30 relative" style="background: rgba(15, 15, 16, 0.91); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(239, 236, 228, 0.08);"><div class="mx-auto max-w-[1600px] px-6 md:px-10 h-14 flex items-center justify-between gap-4"><div class="flex items-center gap-5"><a class="flex items-center gap-2 transition-opacity hover:opacity-70" href="/apps" data-discover="true" style="color: rgb(168, 164, 155);"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span class="wb-mono text-[11px] tracking-[0.08em]">apps</span></a><span class="h-4 w-px" style="background: rgba(239, 236, 228, 0.16);"></span><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="currentColor" viewBox="0 0 256 256" style="color: rgb(196, 100, 58);"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg><span class="wb-mono text-[11px]" style="color: rgb(239, 236, 228);">pattern</span><span class="wb-mono text-[11px]" style="color: rgb(110, 107, 100);">/ generator</span></div></div><div class="hidden md:flex items-center gap-5"><span class="wb-mono text-[10px]" style="color: rgb(110, 107, 100);">3840×3840</span><span class="h-4 w-px" style="background: rgba(239, 236, 228, 0.16);"></span><span class="wb-mono text-[10px]" style="color: rgb(110, 107, 100);">v2026.1</span></div></div></div><header class="wb-reveal relative z-10 mx-auto max-w-[1600px] px-6 md:px-10 pt-10 md:pt-14 pb-8"><div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6"><div class="max-w-2xl"><div class="wb-mono text-[11px] mb-3 flex items-center gap-2" style="color: rgb(168, 164, 155); letter-spacing: 0.08em;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" style="color: rgb(196, 100, 58);"><path d="M71.59,61.47a8,8,0,0,0-15.18,0l-40,120A8,8,0,0,0,24,192h80a8,8,0,0,0,7.59-10.53ZM35.1,176,64,89.3,92.9,176ZM208,76a52,52,0,1,0-52,52A52.06,52.06,0,0,0,208,76Zm-88,0a36,36,0,1,1,36,36A36,36,0,0,1,120,76Zm104,68H136a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8h88a8,8,0,0,0,8-8V152A8,8,0,0,0,224,144Zm-8,56H144V160h72Z"></path></svg><span>pattern · generator</span></div><h1 class="wb-display leading-[1.05] tracking-[-0.01em]" style="font-size: clamp(40px, 5vw, 64px); color: rgb(239, 236, 228); font-weight: 400;">Compose a pattern.</h1><p class="mt-3 text-[15px] md:text-[16px] max-w-xl leading-relaxed" style="color: rgb(168, 164, 155);">Six generative styles, seven curated palettes, vector output at 4K. Re-seed and export as SVG for infinite scaling, or rasterize to PNG.</p></div><div class="flex flex-wrap items-center gap-2"><button class="wb-btn wb-btn--primary"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 256 256"><path d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"></path></svg><span>re-seed</span></button><button class="wb-btn"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 256 256"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"></path></svg><span>SVG · 4K</span></button><button class="wb-btn"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 256 256"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM48,48H208v77.38l-24.69-24.7a16,16,0,0,0-22.62,0L53.37,208H48ZM208,208H76l96-96,36,36v60ZM96,120A24,24,0,1,0,72,96,24,24,0,0,0,96,120Zm0-32a8,8,0,1,1-8,8A8,8,0,0,1,96,88Z"></path></svg><span>PNG · 4K</span></button><button class="wb-btn"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 256 256"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM48,48H208v77.38l-24.69-24.7a16,16,0,0,0-22.62,0L53.37,208H48ZM208,208H76l96-96,36,36v60ZM96,120A24,24,0,1,0,72,96,24,24,0,0,0,96,120Zm0-32a8,8,0,1,1-8,8A8,8,0,0,1,96,88Z"></path></svg><span>PNG · 1080p</span></button></div></div><div class="mt-10 relative" style="height: 1px;"><div class="absolute inset-0" style="background: rgba(239, 236, 228, 0.08);"></div><div class="absolute left-0 top-0 bottom-0" style="width: 40px; background: rgb(196, 100, 58);"></div></div></header><main class="wb-reveal relative z-10 mx-auto max-w-[1600px] px-6 md:px-10 pb-16" style="animation-delay: 0.08s;"><div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8"><div class="lg:col-span-8 order-1"><div class="lg:sticky lg:top-20 space-y-4"><div class="flex items-center justify-between text-[11px]"><div class="flex items-center gap-4 wb-mono" style="letter-spacing: 0.08em;"><span style="color: rgb(168, 164, 155);">preview</span><span style="color: rgb(110, 107, 100);">·</span><span style="color: rgb(110, 107, 100);">3840 × 3840</span></div><div class="flex items-center gap-3 wb-mono" style="letter-spacing: 0.08em;"><span style="color: rgb(110, 107, 100);">10 × 10</span><span style="color: rgb(110, 107, 100);">·</span><span style="color: rgb(110, 107, 100);">bauhaus</span></div></div><div class="flex items-center justify-center p-4 md:p-6 overflow-hidden" style="background: rgb(23, 23, 26); border: 1px solid rgba(239, 236, 228, 0.08); border-radius: 14px; min-height: 400px;"><svg width="3840" height="3840" viewBox="0 0 3840 3840" style="max-height: 70vh; max-width: 100%; aspect-ratio: 3840 / 3840; display: block;"><g><rect x="0" y="0" width="384" height="384" fill="#e76f51"></rect><rect x="192" y="0" width="192" height="384" fill="#f4a261"></rect></g><g><rect x="384" y="0" width="384" height="384" fill="#2a9d8f"></rect><rect x="384" y="0" width="384" height="192" fill="#e9c46a"></rect></g><g><rect x="768" y="0" width="384" height="384" fill="#264653"></rect><path d="M1152,0 L1152,384 L768,384 Z" fill="#2a9d8f"></path></g><g><rect x="1152" y="0" width="384" height="384" fill="#264653"></rect><path d="M1152,0 L1536,0 L1536,384 Z" fill="#f4a261"></path></g><g><rect x="1536" y="0" width="384" height="384" fill="#e76f51"></rect><rect x="1536" y="0" width="192" height="384" fill="#2a9d8f"></rect></g><g><rect x="1920" y="0" width="384" height="384" fill="#e9c46a"></rect><circle cx="2112" cy="192" r="192" fill="#f4a261"></circle></g><g><rect x="2304" y="0" width="384" height="384" fill="#264653"></rect><path d="M2304,0 L2304,384 L2688,384 Z" fill="#e76f51"></path></g><g><rect x="2688" y="0" width="384" height="384" fill="#e9c46a"></rect><path d="M2688,0 L3072,0 A384,384 0 0 1 2688,384 Z" fill="#f4a261"></path></g><g><rect x="3072" y="0" width="384" height="384" fill="#e76f51"></rect><path d="M3072,0 L3072,384 L3456,384 Z" fill="#f4a261"></path></g><g><rect x="3456" y="0" width="384" height="384" fill="#e76f51"></rect><path d="M3840,0 L3840,384 L3456,384 Z" fill="#264653"></path></g><g><rect x="0" y="384" width="384" height="384" fill="#2a9d8f"></rect><path d="M0,768 L0,384 A384,384 0 0 1 384,768 Z" fill="#264653"></path></g><g><rect x="384" y="384" width="384" height="384" fill="#e76f51"></rect><path d="M384,384 L768,384 L384,768 Z" fill="#2a9d8f"></path></g><g><rect x="768" y="384" width="384" height="384" fill="#e9c46a"></rect><path d="M1152,384 L1152,768 A384,384 0 0 1 768,384 Z" fill="#e76f51"></path></g><g><rect x="1152" y="384" width="384" height="384" fill="#e76f51"></rect><rect x="1152" y="384" width="384" height="384" fill="#e9c46a"></rect></g><g><rect x="1536" y="384" width="384" height="384" fill="#e9c46a"></rect><path d="M1536,384 L1536,768 L1920,768 Z" fill="#264653"></path></g><g><rect x="1920" y="384" width="384" height="384" fill="#2a9d8f"></rect><rect x="1920" y="576" width="384" height="192" fill="#e9c46a"></rect></g><g><rect x="2304" y="384" width="384" height="384" fill="#e76f51"></rect><path d="M2304,768 L2304,384 A384,384 0 0 1 2688,768 Z" fill="#264653"></path></g><g><rect x="2688" y="384" width="384" height="384" fill="#2a9d8f"></rect><path d="M2688,384 L3072,384 L3072,768 Z" fill="#264653"></path></g><g><rect x="3072" y="384" width="384" height="384" fill="#f4a261"></rect><path d="M3456,384 L3456,768 L3072,768 Z" fill="#e9c46a"></path></g><g><rect x="3456" y="384" width="384" height="384" fill="#2a9d8f"></rect><rect x="3456" y="384" width="384" height="384" fill="#264653"></rect></g><g><rect x="0" y="768" width="384" height="384" fill="#264653"></rect><path d="M384,768 L384,1152 A384,384 0 0 1 0,768 Z" fill="#2a9d8f"></path></g><g><rect x="384" y="768" width="384" height="384" fill="#f4a261"></rect><path d="M384,768 L768,768 L768,1152 Z" fill="#264653"></path></g><g><rect x="768" y="768" width="384" height="384" fill="#264653"></rect><circle cx="960" cy="960" r="192" fill="#2a9d8f"></circle></g><g><rect x="1152" y="768" width="384" height="384" fill="#e9c46a"></rect><rect x="1152" y="768" width="192" height="384" fill="#f4a261"></rect></g><g><rect x="1536" y="768" width="384" height="384" fill="#264653"></rect><path d="M1920,768 L1920,1152 L1536,1152 Z" fill="#e9c46a"></path></g><g><rect x="1920" y="768" width="384" height="384" fill="#264653"></rect><path d="M2304,768 L2304,1152 A384,384 0 0 1 1920,768 Z" fill="#e76f51"></path></g><g><rect x="2304" y="768" width="384" height="384" fill="#264653"></rect><path d="M2304,768 L2688,768 L2304,1152 Z" fill="#2a9d8f"></path></g><g><rect x="2688" y="768" width="384" height="384" fill="#264653"></rect><rect x="2880" y="768" width="192" height="384" fill="#e76f51"></rect></g><g><rect x="3072" y="768" width="384" height="384" fill="#264653"></rect><rect x="3264" y="768" width="192" height="384" fill="#e76f51"></rect></g><g><rect x="3456" y="768" width="384" height="384" fill="#264653"></rect><path d="M3840,768 L3840,1152 A384,384 0 0 1 3456,768 Z" fill="#f4a261"></path></g><g><rect x="0" y="1152" width="384" height="384" fill="#264653"></rect><path d="M384,1152 L384,1536 L0,1536 Z" fill="#2a9d8f"></path></g><g><rect x="384" y="1152" width="384" height="384" fill="#264653"></rect><path d="M384,1536 L384,1152 A384,384 0 0 1 768,1536 Z" fill="#2a9d8f"></path></g><g><rect x="768" y="1152" width="384" height="384" fill="#2a9d8f"></rect><rect x="768" y="1152" width="384" height="384" fill="#e76f51"></rect></g><g><rect x="1152" y="1152" width="384" height="384" fill="#e76f51"></rect><circle cx="1344" cy="1344" r="192" fill="#f4a261"></circle></g><g><rect x="1536" y="1152" width="384" height="384" fill="#e76f51"></rect><path d="M1920,1536 L1536,1536 A384,384 0 0 1 1920,1152 Z" fill="#f4a261"></path></g><g><rect x="1920" y="1152" width="384" height="384" fill="#f4a261"></rect><rect x="1920" y="1152" width="384" height="384" fill="#e76f51"></rect></g><g><rect x="2304" y="1152" width="384" height="384" fill="#2a9d8f"></rect><circle cx="2496" cy="1344" r="192" fill="#e76f51"></circle></g><g><rect x="2688" y="1152" width="384" height="384" fill="#e76f51"></rect><rect x="2880" y="1152" width="192" height="384" fill="#2a9d8f"></rect></g><g><rect x="3072" y="1152" width="384" height="384" fill="#e76f51"></rect><rect x="3072" y="1344" width="384" height="192" fill="#2a9d8f"></rect></g><g><rect x="3456" y="1152" width="384" height="384" fill="#264653"></rect><rect x="3456" y="1152" width="384" height="192" fill="#f4a261"></rect></g><g><rect x="0" y="1536" width="384" height="384" fill="#e76f51"></rect><path d="M0,1536 L384,1536 L0,1920 Z" fill="#f4a261"></path></g><g><rect x="384" y="1536" width="384" height="384" fill="#f4a261"></rect><path d="M768,1920 L384,1920 A384,384 0 0 1 768,1536 Z" fill="#e76f51"></path></g><g><rect x="768" y="1536" width="384" height="384" fill="#e76f51"></rect><rect x="768" y="1728" width="384" height="192" fill="#264653"></rect></g><g><rect x="1152" y="1536" width="384" height="384" fill="#e76f51"></rect><path d="M1536,1536 L1536,1920 L1152,1920 Z" fill="#e9c46a"></path></g><g><rect x="1536" y="1536" width="384" height="384" fill="#e76f51"></rect><path d="M1920,1920 L1536,1920 A384,384 0 0 1 1920,1536 Z" fill="#e9c46a"></path></g><g><rect x="1920" y="1536" width="384" height="384" fill="#e76f51"></rect><rect x="2112" y="1536" width="192" height="384" fill="#264653"></rect></g><g><rect x="2304" y="1536" width="384" height="384" fill="#f4a261"></rect><path d="M2304,1536 L2688,1536 L2304,1920 Z" fill="#e76f51"></path></g><g><rect x="2688" y="1536" width="384" height="384" fill="#2a9d8f"></rect><rect x="2688" y="1728" width="384" height="192" fill="#e76f51"></rect></g><g><rect x="3072" y="1536" width="384" height="384" fill="#e76f51"></rect><path d="M3072,1536 L3072,1920 L3456,1920 Z" fill="#264653"></path></g><g><rect x="3456" y="1536" width="384" height="384" fill="#264653"></rect><path d="M3456,1920 L3456,1536 A384,384 0 0 1 3840,1920 Z" fill="#2a9d8f"></path></g><g><rect x="0" y="1920" width="384" height="384" fill="#e76f51"></rect><path d="M0,1920 L0,2304 L384,2304 Z" fill="#e9c46a"></path></g><g><rect x="384" y="1920" width="384" height="384" fill="#e76f51"></rect><circle cx="576" cy="2112" r="192" fill="#e9c46a"></circle></g><g><rect x="768" y="1920" width="384" height="384" fill="#f4a261"></rect><path d="M768,1920 L1152,1920 L1152,2304 Z" fill="#2a9d8f"></path></g><g><rect x="1152" y="1920" width="384" height="384" fill="#2a9d8f"></rect><rect x="1344" y="1920" width="192" height="384" fill="#f4a261"></rect></g><g><rect x="1536" y="1920" width="384" height="384" fill="#e76f51"></rect><path d="M1536,1920 L1536,2304 L1920,2304 Z" fill="#264653"></path></g><g><rect x="1920" y="1920" width="384" height="384" fill="#f4a261"></rect><path d="M1920,1920 L2304,1920 A384,384 0 0 1 1920,2304 Z" fill="#2a9d8f"></path></g><g><rect x="2304" y="1920" width="384" height="384" fill="#2a9d8f"></rect><path d="M2688,1920 L2688,2304 A384,384 0 0 1 2304,1920 Z" fill="#e9c46a"></path></g><g><rect x="2688" y="1920" width="384" height="384" fill="#264653"></rect><path d="M2688,2304 L2688,1920 A384,384 0 0 1 3072,2304 Z" fill="#e9c46a"></path></g><g><rect x="3072" y="1920" width="384" height="384" fill="#f4a261"></rect><path d="M3072,1920 L3456,1920 L3072,2304 Z" fill="#e76f51"></path></g><g><rect x="3456" y="1920" width="384" height="384" fill="#e9c46a"></rect><rect x="3456" y="2112" width="384" height="192" fill="#264653"></rect></g><g><rect x="0" y="2304" width="384" height="384" fill="#e76f51"></rect><path d="M384,2304 L384,2688 A384,384 0 0 1 0,2304 Z" fill="#264653"></path></g><g><rect x="384" y="2304" width="384" height="384" fill="#e9c46a"></rect><path d="M384,2304 L768,2304 L768,2688 Z" fill="#264653"></path></g><g><rect x="768" y="2304" width="384" height="384" fill="#2a9d8f"></rect><path d="M768,2304 L1152,2304 L768,2688 Z" fill="#e76f51"></path></g><g><rect x="1152" y="2304" width="384" height="384" fill="#e9c46a"></rect><rect x="1152" y="2304" width="384" height="384" fill="#f4a261"></rect></g><g><rect x="1536" y="2304" width="384" height="384" fill="#e9c46a"></rect><circle cx="1728" cy="2496" r="192" fill="#e76f51"></circle></g><g><rect x="1920" y="2304" width="384" height="384" fill="#e9c46a"></rect><path d="M1920,2304 L2304,2304 L1920,2688 Z" fill="#264653"></path></g><g><rect x="2304" y="2304" width="384" height="384" fill="#e76f51"></rect><path d="M2304,2304 L2688,2304 L2688,2688 Z" fill="#f4a261"></path></g><g><rect x="2688" y="2304" width="384" height="384" fill="#2a9d8f"></rect><rect x="2688" y="2304" width="384" height="384" fill="#264653"></rect></g><g><rect x="3072" y="2304" width="384" height="384" fill="#f4a261"></rect><path d="M3072,2304 L3072,2688 L3456,2688 Z" fill="#2a9d8f"></path></g><g><rect x="3456" y="2304" width="384" height="384" fill="#2a9d8f"></rect><rect x="3456" y="2304" width="384" height="384" fill="#e9c46a"></rect></g><g><rect x="0" y="2688" width="384" height="384" fill="#264653"></rect><path d="M384,2688 L384,3072 A384,384 0 0 1 0,2688 Z" fill="#2a9d8f"></path></g><g><rect x="384" y="2688" width="384" height="384" fill="#2a9d8f"></rect><rect x="384" y="2880" width="384" height="192" fill="#e76f51"></rect></g><g><rect x="768" y="2688" width="384" height="384" fill="#e76f51"></rect><path d="M768,2688 L1152,2688 L1152,3072 Z" fill="#2a9d8f"></path></g><g><rect x="1152" y="2688" width="384" height="384" fill="#2a9d8f"></rect><path d="M1152,2688 L1536,2688 L1536,3072 Z" fill="#e76f51"></path></g><g><rect x="1536" y="2688" width="384" height="384" fill="#e76f51"></rect><rect x="1536" y="2688" width="192" height="384" fill="#f4a261"></rect></g><g><rect x="1920" y="2688" width="384" height="384" fill="#f4a261"></rect><rect x="1920" y="2688" width="192" height="384" fill="#264653"></rect></g><g><rect x="2304" y="2688" width="384" height="384" fill="#f4a261"></rect><path d="M2688,2688 L2688,3072 L2304,3072 Z" fill="#264653"></path></g><g><rect x="2688" y="2688" width="384" height="384" fill="#f4a261"></rect><circle cx="2880" cy="2880" r="192" fill="#264653"></circle></g><g><rect x="3072" y="2688" width="384" height="384" fill="#264653"></rect><rect x="3072" y="2688" width="384" height="384" fill="#e9c46a"></rect></g><g><rect x="3456" y="2688" width="384" height="384" fill="#2a9d8f"></rect><circle cx="3648" cy="2880" r="192" fill="#f4a261"></circle></g><g><rect x="0" y="3072" width="384" height="384" fill="#e9c46a"></rect><path d="M384,3456 L0,3456 A384,384 0 0 1 384,3072 Z" fill="#f4a261"></path></g><g><rect x="384" y="3072" width="384" height="384" fill="#264653"></rect><path d="M384,3072 L768,3072 A384,384 0 0 1 384,3456 Z" fill="#e76f51"></path></g><g><rect x="768" y="3072" width="384" height="384" fill="#f4a261"></rect><path d="M768,3072 L1152,3072 L1152,3456 Z" fill="#2a9d8f"></path></g><g><rect x="1152" y="3072" width="384" height="384" fill="#2a9d8f"></rect><rect x="1152" y="3072" width="384" height="192" fill="#e76f51"></rect></g><g><rect x="1536" y="3072" width="384" height="384" fill="#f4a261"></rect><path d="M1920,3072 L1920,3456 L1536,3456 Z" fill="#e76f51"></path></g><g><rect x="1920" y="3072" width="384" height="384" fill="#264653"></rect><rect x="1920" y="3072" width="384" height="384" fill="#e76f51"></rect></g><g><rect x="2304" y="3072" width="384" height="384" fill="#264653"></rect><path d="M2688,3072 L2688,3456 A384,384 0 0 1 2304,3072 Z" fill="#e9c46a"></path></g><g><rect x="2688" y="3072" width="384" height="384" fill="#e9c46a"></rect><circle cx="2880" cy="3264" r="192" fill="#264653"></circle></g><g><rect x="3072" y="3072" width="384" height="384" fill="#e9c46a"></rect><circle cx="3264" cy="3264" r="192" fill="#2a9d8f"></circle></g><g><rect x="3456" y="3072" width="384" height="384" fill="#e76f51"></rect><path d="M3456,3072 L3456,3456 L3840,3456 Z" fill="#f4a261"></path></g><g><rect x="0" y="3456" width="384" height="384" fill="#f4a261"></rect><path d="M0,3840 L0,3456 A384,384 0 0 1 384,3840 Z" fill="#e76f51"></path></g><g><rect x="384" y="3456" width="384" height="384" fill="#f4a261"></rect><path d="M384,3840 L384,3456 A384,384 0 0 1 768,3840 Z" fill="#264653"></path></g><g><rect x="768" y="3456" width="384" height="384" fill="#f4a261"></rect><path d="M768,3840 L768,3456 A384,384 0 0 1 1152,3840 Z" fill="#e76f51"></path></g><g><rect x="1152" y="3456" width="384" height="384" fill="#e76f51"></rect><rect x="1344" y="3456" width="192" height="384" fill="#e9c46a"></rect></g><g><rect x="1536" y="3456" width="384" height="384" fill="#264653"></rect><path d="M1536,3456 L1920,3456 L1920,3840 Z" fill="#2a9d8f"></path></g><g><rect x="1920" y="3456" width="384" height="384" fill="#f4a261"></rect><rect x="1920" y="3648" width="384" height="192" fill="#2a9d8f"></rect></g><g><rect x="2304" y="3456" width="384" height="384" fill="#e76f51"></rect><rect x="2304" y="3456" width="384" height="192" fill="#f4a261"></rect></g><g><rect x="2688" y="3456" width="384" height="384" fill="#e9c46a"></rect><rect x="2688" y="3456" width="192" height="384" fill="#264653"></rect></g><g><rect x="3072" y="3456" width="384" height="384" fill="#2a9d8f"></rect><path d="M3072,3456 L3072,3840 L3456,3840 Z" fill="#e9c46a"></path></g><g><rect x="3456" y="3456" width="384" height="384" fill="#e9c46a"></rect><path d="M3456,3456 L3840,3456 L3840,3840 Z" fill="#264653"></path></g></svg></div><div class="flex items-start gap-3 p-4" style="background: rgba(196, 100, 58, 0.14); border: 1px solid rgba(196, 100, 58, 0.18); border-radius: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" viewBox="0 0 256 256" style="color: rgb(196, 100, 58); margin-top: 4px; flex-shrink: 0;"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg><p class="wb-mono text-[11px]" style="color: rgb(239, 236, 228); letter-spacing: 0.02em;">Output renders at 3840×3840. Vector patterns scale infinitely — export to SVG for design work, PNG for quick posts.</p></div></div></div><div class="lg:col-span-4 order-2 space-y-4"><div class="wb-card space-y-4"><h3 class="wb-section-head"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M200,80v32a8,8,0,0,1-16,0V88H160a8,8,0,0,1,0-16h32A8,8,0,0,1,200,80ZM96,168H72V144a8,8,0,0,0-16,0v32a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16ZM232,56V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"></path></svg>Canvas Setup</h3><div><div class="wb-label mb-2 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M71.59,61.47a8,8,0,0,0-15.18,0l-40,120A8,8,0,0,0,24,192h80a8,8,0,0,0,7.59-10.53ZM35.1,176,64,89.3,92.9,176ZM208,76a52,52,0,1,0-52,52A52.06,52.06,0,0,0,208,76Zm-88,0a36,36,0,1,1,36,36A36,36,0,0,1,120,76Zm104,68H136a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8h88a8,8,0,0,0,8-8V152A8,8,0,0,0,224,144Zm-8,56H144V160h72Z"></path></svg><span>Pattern style</span></div><div class="relative"><select class="wb-select"><option value="bauhaus">Bauhaus Shapes</option><option value="mosaic">Mosaic Triangles</option><option value="rings">Concentric Rings</option><option value="stripes">Directions</option><option value="pyramids">Pyramids</option><option value="cubist">Cubist Blocks</option></select><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style="color: rgb(168, 164, 155);"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></div></div><div><div class="wb-label mb-2 flex items-center gap-2"><span>Aspect ratio</span></div><div class="relative"><select class="wb-select"><option value="square">Square (1:1)</option><option value="landscape">Landscape (16:9)</option><option value="portrait">Portrait (9:16)</option></select><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style="color: rgb(168, 164, 155);"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></div></div><div><div class="flex items-baseline justify-between mb-2"><span class="wb-label">Grid density</span><span class="wb-value">10 cols · 10 rows</span></div><input min="4" max="40" step="2" class="wb-slider" type="range" value="10" style="--wb-pct: 16.666666666666664%;"></div></div><div class="wb-card"><div class="flex items-center justify-between mb-4 pb-3" style="border-bottom: 1px solid rgba(239, 236, 228, 0.08);"><h3 class="wb-mono text-[10px] uppercase" style="color: rgb(168, 164, 155); letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 8px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z"></path></svg>Color Palette</h3><button class="p-1.5 rounded-md transition-colors" title="Shuffle palette" style="color: rgb(196, 100, 58);"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button></div><div class="space-y-4"><div class="space-y-1.5"><div class="flex items-center justify-between"><span class="wb-label">Color 1</span><button class="wb-micro-btn" title="Randomize this color" aria-label="Randomize this color"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button></div><div class="space-y-2"><div class="relative"><button class="w-full flex items-center gap-3 p-2 bg-black/40 border transition-all rounded-sm group border-white/20 hover:border-emerald-500/50"><div class="w-6 h-6 rounded-sm border border-white/20 shadow-inner shrink-0" style="background-color: rgb(38, 70, 83);"></div><span class="font-mono text-[10px] uppercase tracking-widest text-gray-400 group-hover:text-white transition-colors">#264653</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="ml-auto text-gray-600 group-hover:text-emerald-500 transition-colors"><path d="M224,67.3a35.79,35.79,0,0,0-11.26-25.66c-14-13.28-36.72-12.78-50.62,1.13L142.8,62.2a24,24,0,0,0-33.14.77l-9,9a16,16,0,0,0,0,22.64l2,2.06-51,51a39.75,39.75,0,0,0-10.53,38l-8,18.41A13.68,13.68,0,0,0,36,219.3a15.92,15.92,0,0,0,17.71,3.35L71.23,215a39.89,39.89,0,0,0,37.06-10.75l51-51,2.06,2.06a16,16,0,0,0,22.62,0l9-9a24,24,0,0,0,.74-33.18l19.75-19.87A35.75,35.75,0,0,0,224,67.3ZM97,193a24,24,0,0,1-24,6,8,8,0,0,0-5.55.31l-18.1,7.91L57,189.41a8,8,0,0,0,.25-5.75A23.88,23.88,0,0,1,63,159l51-51,33.94,34ZM202.13,82l-25.37,25.52a8,8,0,0,0,0,11.3l4.89,4.89a8,8,0,0,1,0,11.32l-9,9L112,83.26l9-9a8,8,0,0,1,11.31,0l4.89,4.89a8,8,0,0,0,11.33,0l24.94-25.09c7.81-7.82,20.5-8.18,28.29-.81a20,20,0,0,1,.39,28.7Z"></path></svg></button></div></div></div><div class="space-y-1.5"><div class="flex items-center justify-between"><span class="wb-label">Color 2</span><button class="wb-micro-btn" title="Randomize this color" aria-label="Randomize this color"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button></div><div class="space-y-2"><div class="relative"><button class="w-full flex items-center gap-3 p-2 bg-black/40 border transition-all rounded-sm group border-white/20 hover:border-emerald-500/50"><div class="w-6 h-6 rounded-sm border border-white/20 shadow-inner shrink-0" style="background-color: rgb(42, 157, 143);"></div><span class="font-mono text-[10px] uppercase tracking-widest text-gray-400 group-hover:text-white transition-colors">#2A9D8F</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="ml-auto text-gray-600 group-hover:text-emerald-500 transition-colors"><path d="M224,67.3a35.79,35.79,0,0,0-11.26-25.66c-14-13.28-36.72-12.78-50.62,1.13L142.8,62.2a24,24,0,0,0-33.14.77l-9,9a16,16,0,0,0,0,22.64l2,2.06-51,51a39.75,39.75,0,0,0-10.53,38l-8,18.41A13.68,13.68,0,0,0,36,219.3a15.92,15.92,0,0,0,17.71,3.35L71.23,215a39.89,39.89,0,0,0,37.06-10.75l51-51,2.06,2.06a16,16,0,0,0,22.62,0l9-9a24,24,0,0,0,.74-33.18l19.75-19.87A35.75,35.75,0,0,0,224,67.3ZM97,193a24,24,0,0,1-24,6,8,8,0,0,0-5.55.31l-18.1,7.91L57,189.41a8,8,0,0,0,.25-5.75A23.88,23.88,0,0,1,63,159l51-51,33.94,34ZM202.13,82l-25.37,25.52a8,8,0,0,0,0,11.3l4.89,4.89a8,8,0,0,1,0,11.32l-9,9L112,83.26l9-9a8,8,0,0,1,11.31,0l4.89,4.89a8,8,0,0,0,11.33,0l24.94-25.09c7.81-7.82,20.5-8.18,28.29-.81a20,20,0,0,1,.39,28.7Z"></path></svg></button></div></div></div><div class="space-y-1.5"><div class="flex items-center justify-between"><span class="wb-label">Color 3</span><button class="wb-micro-btn" title="Randomize this color" aria-label="Randomize this color"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button></div><div class="space-y-2"><div class="relative"><button class="w-full flex items-center gap-3 p-2 bg-black/40 border transition-all rounded-sm group border-white/20 hover:border-emerald-500/50"><div class="w-6 h-6 rounded-sm border border-white/20 shadow-inner shrink-0" style="background-color: rgb(233, 196, 106);"></div><span class="font-mono text-[10px] uppercase tracking-widest text-gray-400 group-hover:text-white transition-colors">#E9C46A</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="ml-auto text-gray-600 group-hover:text-emerald-500 transition-colors"><path d="M224,67.3a35.79,35.79,0,0,0-11.26-25.66c-14-13.28-36.72-12.78-50.62,1.13L142.8,62.2a24,24,0,0,0-33.14.77l-9,9a16,16,0,0,0,0,22.64l2,2.06-51,51a39.75,39.75,0,0,0-10.53,38l-8,18.41A13.68,13.68,0,0,0,36,219.3a15.92,15.92,0,0,0,17.71,3.35L71.23,215a39.89,39.89,0,0,0,37.06-10.75l51-51,2.06,2.06a16,16,0,0,0,22.62,0l9-9a24,24,0,0,0,.74-33.18l19.75-19.87A35.75,35.75,0,0,0,224,67.3ZM97,193a24,24,0,0,1-24,6,8,8,0,0,0-5.55.31l-18.1,7.91L57,189.41a8,8,0,0,0,.25-5.75A23.88,23.88,0,0,1,63,159l51-51,33.94,34ZM202.13,82l-25.37,25.52a8,8,0,0,0,0,11.3l4.89,4.89a8,8,0,0,1,0,11.32l-9,9L112,83.26l9-9a8,8,0,0,1,11.31,0l4.89,4.89a8,8,0,0,0,11.33,0l24.94-25.09c7.81-7.82,20.5-8.18,28.29-.81a20,20,0,0,1,.39,28.7Z"></path></svg></button></div></div></div><div class="space-y-1.5"><div class="flex items-center justify-between"><span class="wb-label">Color 4</span><button class="wb-micro-btn" title="Randomize this color" aria-label="Randomize this color"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button></div><div class="space-y-2"><div class="relative"><button class="w-full flex items-center gap-3 p-2 bg-black/40 border transition-all rounded-sm group border-white/20 hover:border-emerald-500/50"><div class="w-6 h-6 rounded-sm border border-white/20 shadow-inner shrink-0" style="background-color: rgb(244, 162, 97);"></div><span class="font-mono text-[10px] uppercase tracking-widest text-gray-400 group-hover:text-white transition-colors">#F4A261</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="ml-auto text-gray-600 group-hover:text-emerald-500 transition-colors"><path d="M224,67.3a35.79,35.79,0,0,0-11.26-25.66c-14-13.28-36.72-12.78-50.62,1.13L142.8,62.2a24,24,0,0,0-33.14.77l-9,9a16,16,0,0,0,0,22.64l2,2.06-51,51a39.75,39.75,0,0,0-10.53,38l-8,18.41A13.68,13.68,0,0,0,36,219.3a15.92,15.92,0,0,0,17.71,3.35L71.23,215a39.89,39.89,0,0,0,37.06-10.75l51-51,2.06,2.06a16,16,0,0,0,22.62,0l9-9a24,24,0,0,0,.74-33.18l19.75-19.87A35.75,35.75,0,0,0,224,67.3ZM97,193a24,24,0,0,1-24,6,8,8,0,0,0-5.55.31l-18.1,7.91L57,189.41a8,8,0,0,0,.25-5.75A23.88,23.88,0,0,1,63,159l51-51,33.94,34ZM202.13,82l-25.37,25.52a8,8,0,0,0,0,11.3l4.89,4.89a8,8,0,0,1,0,11.32l-9,9L112,83.26l9-9a8,8,0,0,1,11.31,0l4.89,4.89a8,8,0,0,0,11.33,0l24.94-25.09c7.81-7.82,20.5-8.18,28.29-.81a20,20,0,0,1,.39,28.7Z"></path></svg></button></div></div></div><div class="space-y-1.5"><div class="flex items-center justify-between"><span class="wb-label">Color 5</span><button class="wb-micro-btn" title="Randomize this color" aria-label="Randomize this color"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor" viewBox="0 0 256 256"><path d="M237.66,178.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L212.69,192H200.94a72.12,72.12,0,0,1-58.59-30.15l-41.72-58.4A56.1,56.1,0,0,0,55.06,80H32a8,8,0,0,1,0-16H55.06a72.12,72.12,0,0,1,58.59,30.15l41.72,58.4A56.1,56.1,0,0,0,200.94,176h11.75l-10.35-10.34a8,8,0,0,1,11.32-11.32ZM143,107a8,8,0,0,0,11.16-1.86l1.2-1.67A56.1,56.1,0,0,1,200.94,80h11.75L202.34,90.34a8,8,0,0,0,11.32,11.32l24-24a8,8,0,0,0,0-11.32l-24-24a8,8,0,0,0-11.32,11.32L212.69,64H200.94a72.12,72.12,0,0,0-58.59,30.15l-1.2,1.67A8,8,0,0,0,143,107Zm-30,42a8,8,0,0,0-11.16,1.86l-1.2,1.67A56.1,56.1,0,0,1,55.06,176H32a8,8,0,0,0,0,16H55.06a72.12,72.12,0,0,0,58.59-30.15l1.2-1.67A8,8,0,0,0,113,149Z"></path></svg></button></div><div class="space-y-2"><div class="relative"><button class="w-full flex items-center gap-3 p-2 bg-black/40 border transition-all rounded-sm group border-white/20 hover:border-emerald-500/50"><div class="w-6 h-6 rounded-sm border border-white/20 shadow-inner shrink-0" style="background-color: rgb(231, 111, 81);"></div><span class="font-mono text-[10px] uppercase tracking-widest text-gray-400 group-hover:text-white transition-colors">#E76F51</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="ml-auto text-gray-600 group-hover:text-emerald-500 transition-colors"><path d="M224,67.3a35.79,35.79,0,0,0-11.26-25.66c-14-13.28-36.72-12.78-50.62,1.13L142.8,62.2a24,24,0,0,0-33.14.77l-9,9a16,16,0,0,0,0,22.64l2,2.06-51,51a39.75,39.75,0,0,0-10.53,38l-8,18.41A13.68,13.68,0,0,0,36,219.3a15.92,15.92,0,0,0,17.71,3.35L71.23,215a39.89,39.89,0,0,0,37.06-10.75l51-51,2.06,2.06a16,16,0,0,0,22.62,0l9-9a24,24,0,0,0,.74-33.18l19.75-19.87A35.75,35.75,0,0,0,224,67.3ZM97,193a24,24,0,0,1-24,6,8,8,0,0,0-5.55.31l-18.1,7.91L57,189.41a8,8,0,0,0,.25-5.75A23.88,23.88,0,0,1,63,159l51-51,33.94,34ZM202.13,82l-25.37,25.52a8,8,0,0,0,0,11.3l4.89,4.89a8,8,0,0,1,0,11.32l-9,9L112,83.26l9-9a8,8,0,0,1,11.31,0l4.89,4.89a8,8,0,0,0,11.33,0l24.94-25.09c7.81-7.82,20.5-8.18,28.29-.81a20,20,0,0,1,.39,28.7Z"></path></svg></button></div></div></div></div></div></div></div></main><footer class="relative z-10 mx-auto max-w-[1600px] px-6 md:px-10 py-8 flex flex-col md:flex-row items-center justify-between gap-3" style="border-top: 1px solid rgba(239, 236, 228, 0.08);"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="currentColor" viewBox="0 0 256 256" style="color: rgb(196, 100, 58);"><path d="M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z"></path></svg><span class="wb-mono text-[10px]" style="color: rgb(110, 107, 100); letter-spacing: 0.1em;">fezcodex / pattern</span></div><span class="wb-display text-[14px]" style="color: rgb(168, 164, 155);">shapes speak in sequence.</span><span class="wb-mono text-[10px]" style="color: rgb(110, 107, 100); letter-spacing: 0.1em;">vector · 4k · svg</span></footer></div></div></main><footer class="bg-[#050505] border-t-2 border-white/10 mt-auto selection:bg-white selection:text-black"><div class="mx-auto max-w-[1600px] px-6 py-12 md:px-12"><div class="grid grid-cols-1 lg:grid-cols-12 gap-12 md:gap-16"><div class="lg:col-span-5 space-y-8"><div class="flex flex-col gap-4"><a class="group inline-block" href="/" data-discover="true"><span class="text-5xl md:text-6xl font-black uppercase tracking-tighter text-white">fez<span class="text-emerald-500">codex</span></span></a><p class="max-w-md text-gray-400 font-mono text-xs leading-relaxed uppercase tracking-widest">// turning complex ~distributed~ problems into elegant, reliable code.</p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="border border-white/10 p-4 bg-white/[0.02]"><h4 class="font-mono text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">Site Info</h4><div class="space-y-1 font-mono text-[10px] uppercase tracking-widest"><div class="flex justify-between"><span class="text-gray-600">Version:</span><span class="text-white">v0.25.1</span></div><div class="flex justify-between"><span class="text-gray-600">Year:</span><span class="text-white">2026</span></div><div class="flex justify-between text-emerald-500 font-black"><span>Status:</span><span>Live</span></div></div></div><div class="border border-white/10 p-4 bg-white/[0.02] flex flex-col justify-center gap-3"><div class="flex items-center gap-2 text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" class="text-emerald-500"><path d="M180,144H160V112h20a36,36,0,1,0-36-36V96H112V76a36,36,0,1,0-36,36H96v32H76a36,36,0,1,0,36,36V160h32v20a36,36,0,1,0,36-36ZM160,76a20,20,0,1,1,20,20H160ZM56,76a20,20,0,0,1,40,0V96H76A20,20,0,0,1,56,76ZM96,180a20,20,0,1,1-20-20H96Zm16-68h32v32H112Zm68,88a20,20,0,0,1-20-20V160h20a20,20,0,0,1,0,40Z"></path></svg><span class="font-mono text-[10px] font-bold uppercase tracking-widest">Quick Menu</span></div><div class="font-mono text-[10px] text-gray-500 uppercase leading-relaxed">Press <kbd class="bg-white text-black px-1 font-black">Alt</kbd>, <kbd class="bg-white text-black px-1 font-black">Ctrl</kbd>, or <kbd class="bg-white text-black px-1 font-black">Cmd</kbd> + <kbd class="bg-white text-black px-1 font-black">K</kbd> for commands.</div></div></div></div><div class="lg:col-span-4"><h3 class="font-mono text-[10px] font-bold text-white uppercase tracking-[0.3em] mb-8 flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" class="text-emerald-500"><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg>Navigation</h3><ul class="grid grid-cols-2 gap-x-6 gap-y-3 font-mono text-[10px] uppercase tracking-widest"><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Home</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/about" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>About</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/blog" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Blog</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/projects" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Projects</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/logs" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Logs</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/vocab" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Vocab</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/apps" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Apps</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/timeline" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Timeline</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/commands" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Manuals</a></li><li><a href="/rss.xml" target="_blank" class="text-gray-500 hover:text-white flex items-center gap-2"><span class="text-emerald-500">→</span> RSS Feed</a></li></ul></div><div class="lg:col-span-3"><h3 class="font-mono text-[10px] font-bold text-white uppercase tracking-[0.3em] mb-8">Connect</h3><div class="flex gap-3 mb-8 flex-wrap"><a href="https://github.com/fezcode" target="_blank" rel="noreferrer" class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M212.62,75.17A63.7,63.7,0,0,0,206.39,26,12,12,0,0,0,196,20a63.71,63.71,0,0,0-50,24H126A63.71,63.71,0,0,0,76,20a12,12,0,0,0-10.39,6,63.7,63.7,0,0,0-6.23,49.17A61.5,61.5,0,0,0,52,104v8a60.1,60.1,0,0,0,45.76,58.28A43.66,43.66,0,0,0,92,192v4H76a20,20,0,0,1-20-20,44.05,44.05,0,0,0-44-44,12,12,0,0,0,0,24,20,20,0,0,1,20,20,44.05,44.05,0,0,0,44,44H92v12a12,12,0,0,0,24,0V192a20,20,0,0,1,40,0v40a12,12,0,0,0,24,0V192a43.66,43.66,0,0,0-5.76-21.72A60.1,60.1,0,0,0,220,112v-8A61.5,61.5,0,0,0,212.62,75.17ZM196,112a36,36,0,0,1-36,36H112a36,36,0,0,1-36-36v-8a37.87,37.87,0,0,1,6.13-20.12,11.65,11.65,0,0,0,1.58-11.49,39.9,39.9,0,0,1-.4-27.72,39.87,39.87,0,0,1,26.41,17.8A12,12,0,0,0,119.82,68h32.35a12,12,0,0,0,10.11-5.53,39.84,39.84,0,0,1,26.41-17.8,39.9,39.9,0,0,1-.4,27.72,12,12,0,0,0,1.61,11.53A37.85,37.85,0,0,1,196,104Z"></path></svg></a><a href="https://x.com/fezcoddy" target="_blank" rel="noreferrer" class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M218.12,209.56l-61-95.8,59.72-65.69a12,12,0,0,0-17.76-16.14L143.81,92.77,106.12,33.56A12,12,0,0,0,96,28H48A12,12,0,0,0,37.88,46.44l61,95.8L39.12,207.93a12,12,0,1,0,17.76,16.14l55.31-60.84,37.69,59.21A12,12,0,0,0,160,228h48a12,12,0,0,0,10.12-18.44ZM166.59,204,69.86,52H89.41l96.73,152Z"></path></svg></a><a href="https://www.linkedin.com/in/ahmed-samil-bulbul/?locale=en_US" target="_blank" rel="noreferrer" class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,20H40A20,20,0,0,0,20,40V216a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V40A20,20,0,0,0,216,20Zm-4,192H44V44H212ZM112,176V120a12,12,0,0,1,21.43-7.41A40,40,0,0,1,192,148v28a12,12,0,0,1-24,0V148a16,16,0,0,0-32,0v28a12,12,0,0,1-24,0ZM96,120v56a12,12,0,0,1-24,0V120a12,12,0,0,1,24,0ZM68,80A16,16,0,1,1,84,96,16,16,0,0,1,68,80Z"></path></svg></a><a href="https://github.com/fezcode/fezcode.github.io" target="_blank" rel="noreferrer" class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M236,64a36,36,0,1,0-48,33.94V112a4,4,0,0,1-4,4H96a27.8,27.8,0,0,0-4,.29V97.94a36,36,0,1,0-24,0v60.12a36,36,0,1,0,24,0V144a4,4,0,0,1,4-4h88a28,28,0,0,0,28-28V97.94A36.07,36.07,0,0,0,236,64ZM80,52A12,12,0,1,1,68,64,12,12,0,0,1,80,52Zm0,152a12,12,0,1,1,12-12A12,12,0,0,1,80,204ZM200,76a12,12,0,1,1,12-12A12,12,0,0,1,200,76Z"></path></svg></a></div><div class="space-y-3 border-t border-white/10 pt-6"><p class="font-mono text-[9px] font-bold text-gray-600 uppercase tracking-widest">Newsletter</p><div class="relative"><input disabled="" placeholder="Coming soon..." class="w-full bg-white text-black font-mono text-[9px] uppercase tracking-widest py-2 px-3 border-none focus:ring-0 placeholder-black/40 disabled:cursor-not-allowed" type="text"></div></div></div></div><div class="mt-20 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-6 font-mono text-[9px] uppercase tracking-[0.2em] text-gray-600"><p>© 2026 Fezcode // Built with React & Tailwind</p><p class="text-white font-bold">Thanks for visiting</p></div></div></footer></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width: 60px; transform: none;"><div class="relative" style="transform: none;"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: none;"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: none;"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":{"is404":false},"urlPathname":"\\/apps\\/pattern-generator","pageId":"\\/pages","routeParams":{"*":"apps\\/pattern-generator"}}</script>
<script id="vike_globalContext" type="application/json">{}</script>
<script src="/assets/entries/entry-server-routing.BcC5DqNB.js" type="module" async></script>
<link rel="modulepreload" href="/assets/entries/pages.noN_BYeI.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-BXl3LOEh.js" as="script" type="text/javascript">
</body>
</html>