-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
53 lines (48 loc) · 91.6 KB
/
index.html
File metadata and controls
53 lines (48 loc) · 91.6 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
<!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: 0px; 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 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><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 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="/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 bg-emerald-500/5 text-emerald-400 border-l-2 border-emerald-500"><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="min-h-screen bg-[#F5F5F0] text-[#1A1A1A] font-sans selection:bg-[#C0B298] selection:text-black flex flex-col"><div class="max-w-[1400px] mx-auto px-6 md:px-12 py-24 flex-1 flex flex-col"><header class="mb-24 pt-12 border-b border-black/10 pb-12 text-center md:text-left"><a class="inline-flex items-center gap-2 mb-8 font-outfit text-xs uppercase tracking-widest text-[#1A1A1A]/40 hover:text-[#8D4004] transition-colors" href="/" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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> Back to Root</a><h1 class="font-playfairDisplay text-7xl md:text-9xl text-[#1A1A1A] mb-6">Aesthetics</h1><p class="font-outfit text-sm text-[#1A1A1A]/60 max-w-lg leading-relaxed">Explore the visual foundations of Fezcodex. Choose between raw systemic brutalism or refined architectural elegance.</p></header><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16 flex-1"><a class="group block relative" href="/design/brufez" data-discover="true"><div class="h-full bg-[#050505] border border-white/5 p-12 flex flex-col justify-between rounded-sm overflow-hidden shadow-2xl transition-all duration-500"><div class="absolute inset-0 opacity-[0.05] pointer-events-none group-hover:opacity-[0.1] transition-opacity"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full grayscale"><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="w-full h-full"><defs><pattern id="bg-grid-brufez" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.5" fill="white" opacity="0.05"></circle></pattern></defs><rect width="100" height="100" fill="url(#bg-grid-brufez)"></rect><circle cx="72.31429722160101" cy="33.254536939784884" r="29.870138065889478" fill="hsl(256, 70%, 60%)" opacity="0.3699533578008413" style="mix-blend-mode: screen;"></circle><circle cx="89.32106292340904" cy="98.28661598730832" r="23.2881017960608" fill="hsl(76, 60%, 50%)" opacity="0.5076622364111245" style="mix-blend-mode: screen;"></circle><circle cx="37.81807527411729" cy="53.39813770260662" r="39.504955131560564" fill="hsl(256, 70%, 60%)" opacity="0.4012783298268914" style="mix-blend-mode: screen;"></circle><circle cx="13.647012785077095" cy="65.62185231596231" r="45.50619116984308" fill="hsl(76, 60%, 50%)" opacity="0.5803486569318921" style="mix-blend-mode: screen;"></circle><circle cx="84.22762923873961" cy="94.78365902323276" r="15.831337086856365" fill="hsl(256, 70%, 60%)" opacity="0.4122800522949546" style="mix-blend-mode: screen;"></circle><circle cx="80.59975202195346" cy="83.86937722098082" r="45.14241145923734" fill="hsl(76, 60%, 50%)" opacity="0.4376722455723211" style="mix-blend-mode: screen;"></circle><circle cx="62.59754025377333" cy="53.167226421646774" r="15.080316429957747" fill="hsl(256, 70%, 60%)" opacity="0.41941994600929317" style="mix-blend-mode: screen;"></circle><circle cx="0.23412667214870453" cy="33.18785347510129" r="38.66527049802244" fill="hsl(76, 60%, 50%)" opacity="0.4219654375920072" style="mix-blend-mode: screen;"></circle></svg><div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay" style="background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E");"></div><div class="absolute bottom-4 right-4 flex gap-2 items-center"></div></div></div><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center bg-white/5 border border-white/10 text-[#10B981] rounded-sm group-hover:bg-[#10B981] group-hover:text-black transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M168,92a12,12,0,1,1-12-12A12,12,0,0,1,168,92ZM100,80a12,12,0,1,0,12,12A12,12,0,0,0,100,80Zm116,64A87.76,87.76,0,0,1,213,167l22.24,9.72A8,8,0,0,1,232,192a7.89,7.89,0,0,1-3.2-.67L207.38,182a88,88,0,0,1-158.76,0L27.2,191.33A7.89,7.89,0,0,1,24,192a8,8,0,0,1-3.2-15.33L43,167A87.76,87.76,0,0,1,40,144v-8H16a8,8,0,0,1,0-16H40v-8a87.76,87.76,0,0,1,3-23L20.8,79.33a8,8,0,1,1,6.4-14.66L48.62,74a88,88,0,0,1,158.76,0l21.42-9.36a8,8,0,0,1,6.4,14.66L213,89.05a87.76,87.76,0,0,1,3,23v8h24a8,8,0,0,1,0,16H216Zm-80,0a8,8,0,0,0-16,0v64a8,8,0,0,0,16,0Zm64-32a72,72,0,0,0-144,0v8H200Z"></path></svg></div><div class="space-y-4"><h2 class="text-5xl font-black text-white uppercase tracking-tighter leading-none">Brufez</h2><p class="font-mono text-xs text-gray-500 uppercase tracking-widest leading-relaxed">Systemic transparency. Celebrated structural logic, 1PX borders, and high-frequency contrast.</p></div></div><div class="mt-12 pt-8 border-t border-white/10 flex justify-between items-center relative z-10"><span class="font-mono text-[10px] uppercase tracking-[0.3em] text-gray-600 group-hover:text-white transition-colors">Launch_Spec</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="text-gray-600 group-hover:text-[#10B981] group-hover:translate-x-2 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></div></div></a><button type="button" class="group block relative text-left"><div class="h-full bg-[#F3ECE0] border border-[#1A161320] p-12 flex flex-col justify-between rounded-sm overflow-hidden shadow-[0_30px_60px_-30px_#1A161330] transition-all duration-500 relative"><div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(600px 400px at 80% -10%, rgb(232, 222, 206) 0%, transparent 55%), radial-gradient(500px 500px at 0% 110%, rgb(237, 227, 211) 0%, transparent 50%);"></div><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center bg-[#C96442]/10 text-[#9E4A2F] border border-[#C96442]/30 rounded-sm group-hover:bg-[#C96442] group-hover:text-[#F3ECE0] group-hover:border-[#C96442] transition-all duration-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M237.23,34.77a30.06,30.06,0,0,0-42.44,0h0a30.06,30.06,0,0,0,0,42.44c.65.64,1.32,1.24,2,1.81l-28.14,52.26A30.11,30.11,0,0,0,143.46,135L121,112.54A30,30,0,0,0,74.78,74.78h0a30,30,0,0,0,0,42.43,26.28,26.28,0,0,0,2,1.82L48.64,171.29a30,30,0,0,0-29.87,7.5h0a30,30,0,1,0,42.44,0c-.65-.64-1.32-1.24-2-1.81l28.14-52.26A30.07,30.07,0,0,0,112.54,121L135,143.46a30,30,0,1,0,46.25-4.67,26.28,26.28,0,0,0-2-1.82l28.14-52.26a30,30,0,0,0,29.87-49.94Zm-184.51,178a18,18,0,1,1,0-25.46A18,18,0,0,1,52.72,212.74Zm30.55-104a18,18,0,1,1,25.46,0A18,18,0,0,1,83.27,108.73Zm89.46,64a18,18,0,1,1,0-25.46A18,18,0,0,1,172.73,172.73Zm56-104a18,18,0,1,1,0-25.46A18,18,0,0,1,228.74,68.72Z"></path></svg></div><div class="space-y-4"><h2 class="text-5xl font-playfairDisplay italic text-[#1A1613] leading-none tracking-tight">Terracotta</h2><p class="font-mono text-xs text-[#2E2620]/70 uppercase tracking-widest leading-relaxed">Weighted editorial. Bone paper, hairline rules, serif wordmarks that hang true.</p></div></div><div class="mt-12 pt-8 border-t border-[#1A161320] flex justify-between items-center relative z-10"><span class="font-mono text-[10px] uppercase tracking-[0.3em] text-[#2E2620]/50 group-hover:text-[#9E4A2F] transition-colors">Hang_Plumb</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="text-[#2E2620]/40 group-hover:text-[#C96442] group-hover:translate-x-2 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></div></div></button><a class="group block relative" href="/design/fezluxe" data-discover="true"><div class="h-full bg-white border border-black/5 p-12 flex flex-col justify-between rounded-sm overflow-hidden shadow-xl transition-all duration-500"><div class="absolute inset-0 opacity-[0.03] pointer-events-none group-hover:opacity-[0.08] transition-opacity"><div class="w-full h-full overflow-hidden relative bg-[#EBEBEB] w-full h-full mix-blend-multiply"><svg viewBox="0 0 100 100" preserveAspectRatio="none" class="w-full h-full"><path d="M 0 64.79015958029777 C 12.5 64.79015958029777, 12.5 57.60413850657642, 25 57.60413850657642 C 37.5 57.60413850657642, 37.5 54.22707734396681, 50 54.22707734396681 C 62.5 54.22707734396681, 62.5 66.05434088269249, 75 66.05434088269249 C 87.5 66.05434088269249, 87.5 48.6127823474817, 100 48.6127823474817 L 100 100 L 0 100 Z" fill="hsla(286.94023916870356, 0%, 90%, 0.13766639257082716)" stroke="hsla(286.94023916870356, 0%, 70%, 0.2753327851416543)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 46.59006968140602 C 12.5 46.59006968140602, 12.5 64.47790415259078, 25 64.47790415259078 C 37.5 64.47790415259078, 37.5 28.664243139792234, 50 28.664243139792234 C 62.5 28.664243139792234, 62.5 46.662321873009205, 75 46.662321873009205 C 87.5 46.662321873009205, 87.5 52.10184275638312, 100 52.10184275638312 L 100 100 L 0 100 Z" fill="hsla(283.4007532512769, 0%, 85%, 0.18810542246792467)" stroke="hsla(283.4007532512769, 0%, 65%, 0.37621084493584933)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 72.19599881209433 C 12.5 72.19599881209433, 12.5 90.10979136219248, 25 90.10979136219248 C 37.5 90.10979136219248, 37.5 68.70363054331392, 50 68.70363054331392 C 62.5 68.70363054331392, 62.5 50.36820318782702, 75 50.36820318782702 C 87.5 50.36820318782702, 87.5 69.55454418202862, 100 69.55454418202862 L 100 100 L 0 100 Z" fill="hsla(268.20194143010303, 0%, 80%, 0.1750532165169716)" stroke="hsla(268.20194143010303, 0%, 60%, 0.3501064330339432)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 69.58215911872685 C 12.5 69.58215911872685, 12.5 56.99541369685903, 25 56.99541369685903 C 37.5 56.99541369685903, 37.5 81.28041040617973, 50 81.28041040617973 C 62.5 81.28041040617973, 62.5 94.22704427270219, 75 94.22704427270219 C 87.5 94.22704427270219, 87.5 78.06475857505575, 100 78.06475857505575 L 100 100 L 0 100 Z" fill="hsla(262.8927933485247, 0%, 75%, 0.1630384744144976)" stroke="hsla(262.8927933485247, 0%, 55%, 0.3260769488289952)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 4.714448726736009 C 12.5 4.714448726736009, 12.5 17.662512708920985, 25 17.662512708920985 C 37.5 17.662512708920985, 37.5 9.205646673217416, 50 9.205646673217416 C 62.5 9.205646673217416, 62.5 25.793295726180077, 75 25.793295726180077 C 87.5 25.793295726180077, 87.5 27.72956268163398, 100 27.72956268163398 L 100 100 L 0 100 Z" fill="hsla(289.4908410999924, 0%, 70%, 0.10685340804047883)" stroke="hsla(289.4908410999924, 0%, 50%, 0.21370681608095765)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 90.24441139772534 C 12.5 90.24441139772534, 12.5 103.49021985894069, 25 103.49021985894069 C 37.5 103.49021985894069, 37.5 103.67987450445071, 50 103.67987450445071 C 62.5 103.67987450445071, 62.5 89.02865052223206, 75 89.02865052223206 C 87.5 89.02865052223206, 87.5 101.24362556962296, 100 101.24362556962296 L 100 100 L 0 100 Z" fill="hsla(284.3768614567816, 0%, 65%, 0.16500887820729987)" stroke="hsla(284.3768614567816, 0%, 45%, 0.33001775641459974)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 55.593526060692966 C 12.5 55.593526060692966, 12.5 67.97663295874372, 25 67.97663295874372 C 37.5 67.97663295874372, 37.5 33.43483611242846, 50 33.43483611242846 C 62.5 33.43483611242846, 62.5 33.547317364718765, 75 33.547317364718765 C 87.5 33.547317364718765, 87.5 78.02714329445735, 100 78.02714329445735 L 100 100 L 0 100 Z" fill="hsla(279.485968192108, 0%, 60%, 0.1371291450224817)" stroke="hsla(279.485968192108, 0%, 40%, 0.2742582900449634)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 73.10266771819443 C 12.5 73.10266771819443, 12.5 58.12394008971751, 25 58.12394008971751 C 37.5 58.12394008971751, 37.5 92.63715870911255, 50 92.63715870911255 C 62.5 92.63715870911255, 62.5 91.50547507451847, 75 91.50547507451847 C 87.5 91.50547507451847, 87.5 92.38645259756595, 100 92.38645259756595 L 100 100 L 0 100 Z" fill="hsla(280.4747175020166, 0%, 55%, 0.11043912080349401)" stroke="hsla(280.4747175020166, 0%, 35%, 0.22087824160698802)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 65.80218714661896 C 12.5 65.80218714661896, 12.5 72.46404774487019, 25 72.46404774487019 C 37.5 72.46404774487019, 37.5 83.04442138178274, 50 83.04442138178274 C 62.5 83.04442138178274, 62.5 52.3764033569023, 75 52.3764033569023 C 87.5 52.3764033569023, 87.5 71.5484444051981, 100 71.5484444051981 L 100 100 L 0 100 Z" fill="hsla(280.95895702857524, 0%, 50%, 0.15267056876327842)" stroke="hsla(280.95895702857524, 0%, 30%, 0.30534113752655684)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><path d="M 0 75.35143981222063 C 12.5 75.35143981222063, 12.5 96.3971781777218, 25 96.3971781777218 C 37.5 96.3971781777218, 37.5 64.67137425206602, 50 64.67137425206602 C 62.5 64.67137425206602, 62.5 96.41755548072979, 75 96.41755548072979 C 87.5 96.41755548072979, 87.5 58.929189993068576, 100 58.929189993068576 L 100 100 L 0 100 Z" fill="hsla(286.0286727072671, 0%, 45%, 0.11931619964307175)" stroke="hsla(286.0286727072671, 0%, 25%, 0.2386323992861435)" stroke-width="0.1" style="mix-blend-mode: multiply;"></path><circle cx="77.13858184870332" cy="63.596112141385674" r="0.2459528351901099" fill="rgba(0,0,0,0.1)"></circle><circle cx="42.26390663534403" cy="49.81411416083574" r="0.27998995380476116" fill="rgba(0,0,0,0.1)"></circle><circle cx="31.01116558536887" cy="13.79191589076072" r="0.0005576188210397959" fill="rgba(0,0,0,0.1)"></circle><circle cx="14.91910198237747" cy="12.73635916877538" r="0.09754466149024665" fill="rgba(0,0,0,0.1)"></circle><circle cx="83.72239319141954" cy="41.12956703174859" r="0.2583896840689704" fill="rgba(0,0,0,0.1)"></circle><circle cx="69.24983311910182" cy="69.20560232829303" r="0.19960762371774762" fill="rgba(0,0,0,0.1)"></circle><circle cx="26.961542875505984" cy="20.71263389661908" r="0.25040670193266124" fill="rgba(0,0,0,0.1)"></circle><circle cx="90.17645316198468" cy="13.262182520702481" r="0.11124601350165904" fill="rgba(0,0,0,0.1)"></circle><circle cx="61.44512724131346" cy="80.46963715460151" r="0.13509949108120053" fill="rgba(0,0,0,0.1)"></circle><circle cx="86.22270724736154" cy="69.37385275959969" r="0.07740433369763196" fill="rgba(0,0,0,0.1)"></circle><circle cx="0.8669850649312139" cy="52.962162089534104" r="0.23933480407577007" fill="rgba(0,0,0,0.1)"></circle><circle cx="38.126849476248026" cy="92.97296279110014" r="0.10795530101750046" fill="rgba(0,0,0,0.1)"></circle><circle cx="84.02294341940433" cy="78.73029047623277" r="0.013152780965901912" fill="rgba(0,0,0,0.1)"></circle><circle cx="69.08468392211944" cy="44.252682593651116" r="0.015234674094244838" fill="rgba(0,0,0,0.1)"></circle><circle cx="80.28779164887965" cy="19.924054923467338" r="0.2475802805274725" fill="rgba(0,0,0,0.1)"></circle><circle cx="1.2176967458799481" cy="24.882152979262173" r="0.03764699902385473" fill="rgba(0,0,0,0.1)"></circle><circle cx="78.17366241943091" cy="14.94220404420048" r="0.18301862231455743" fill="rgba(0,0,0,0.1)"></circle><circle cx="37.254556361585855" cy="11.835593171417713" r="0.20125752724707127" fill="rgba(0,0,0,0.1)"></circle><circle cx="36.73366697039455" cy="52.393872709944844" r="0.022699007601477205" fill="rgba(0,0,0,0.1)"></circle><circle cx="40.23427329957485" cy="32.79549488797784" r="0.01904670288786292" fill="rgba(0,0,0,0.1)"></circle><circle cx="88.59267537482083" cy="34.67766980174929" r="0.10192050382029265" fill="rgba(0,0,0,0.1)"></circle><circle cx="99.51982891652733" cy="39.82951366342604" r="0.04608444306068122" fill="rgba(0,0,0,0.1)"></circle><circle cx="74.34117363300174" cy="31.778610055334866" r="0.26215362770017236" fill="rgba(0,0,0,0.1)"></circle><circle cx="42.17963551636785" cy="27.867526886984706" r="0.26805524490773674" fill="rgba(0,0,0,0.1)"></circle><circle cx="49.87576282583177" cy="9.976963186636567" r="0.18197360741905869" fill="rgba(0,0,0,0.1)"></circle><circle cx="98.83081302978098" cy="80.38232503458858" r="0.1401975421467796" fill="rgba(0,0,0,0.1)"></circle><circle cx="57.353677530772984" cy="54.23245378769934" r="0.26133891977369783" fill="rgba(0,0,0,0.1)"></circle><circle cx="53.53754989337176" cy="90.58058413211256" r="0.16976930466480553" fill="rgba(0,0,0,0.1)"></circle><circle cx="74.22883887775242" cy="32.51445672940463" r="0.10293491275515407" fill="rgba(0,0,0,0.1)"></circle><circle cx="25.928316079080105" cy="38.270571269094944" r="0.0990793686825782" fill="rgba(0,0,0,0.1)"></circle><circle cx="73.26922123320401" cy="72.12673129979521" r="0.060806267266161736" fill="rgba(0,0,0,0.1)"></circle><circle cx="97.3463679663837" cy="0.5829168949276209" r="0.033875063457526264" fill="rgba(0,0,0,0.1)"></circle><circle cx="59.839903190732" cy="48.391605517826974" r="0.06259246822446585" fill="rgba(0,0,0,0.1)"></circle><circle cx="30.083507276140153" cy="84.44561776705086" r="0.08531684533227235" fill="rgba(0,0,0,0.1)"></circle><circle cx="56.94050891324878" cy="37.50171926803887" r="0.21510963609907777" fill="rgba(0,0,0,0.1)"></circle><circle cx="80.33051225356758" cy="99.80409727431834" r="0.25729219175409523" fill="rgba(0,0,0,0.1)"></circle><circle cx="44.99356828164309" cy="91.52176957577467" r="0.2536690864479169" fill="rgba(0,0,0,0.1)"></circle><circle cx="5.24618336930871" cy="90.73045621626079" r="0.09715340968687088" fill="rgba(0,0,0,0.1)"></circle><circle cx="82.60676993522793" cy="91.15736915264279" r="0.16325920682866127" fill="rgba(0,0,0,0.1)"></circle><circle cx="59.98295627068728" cy="21.038259379565716" r="0.17235171797219664" fill="rgba(0,0,0,0.1)"></circle><circle cx="28.508376353420317" cy="43.885578494518995" r="0.05437358608469367" fill="rgba(0,0,0,0.1)"></circle><circle cx="94.2343287402764" cy="1.0686249239370227" r="0.23376976561266927" fill="rgba(0,0,0,0.1)"></circle><circle cx="84.93947216775268" cy="57.10788583382964" r="0.11704590255394577" fill="rgba(0,0,0,0.1)"></circle><circle cx="90.18580494448543" cy="86.76649671979249" r="0.2917069542920217" fill="rgba(0,0,0,0.1)"></circle><circle cx="91.51201462373137" cy="33.459780807606876" r="0.2451322883600369" fill="rgba(0,0,0,0.1)"></circle><circle cx="87.90650109294802" cy="8.156088180840015" r="0.03499259920790791" fill="rgba(0,0,0,0.1)"></circle><circle cx="82.7815601369366" cy="78.15655404701829" r="0.03670131149701774" fill="rgba(0,0,0,0.1)"></circle><circle cx="49.24029635731131" cy="96.00086831487715" r="0.02819066753145307" fill="rgba(0,0,0,0.1)"></circle><circle cx="64.0242368215695" cy="2.8759357053786516" r="0.1499602382071316" fill="rgba(0,0,0,0.1)"></circle><circle cx="15.37268164101988" cy="29.661266738548875" r="0.20933269837405533" fill="rgba(0,0,0,0.1)"></circle></svg></div></div><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center bg-[#F5F5F0] text-[#8D4004] rounded-full shadow-sm group-hover:bg-[#1A1A1A] group-hover:text-white transition-all duration-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M196.89,130.94,144.4,111.6,125.06,59.11a13.92,13.92,0,0,0-26.12,0L79.6,111.6,27.11,130.94a13.92,13.92,0,0,0,0,26.12L79.6,176.4l19.34,52.49a13.92,13.92,0,0,0,26.12,0L144.4,176.4l52.49-19.34a13.92,13.92,0,0,0,0-26.12Zm-4.15,14.86-55.08,20.3a6,6,0,0,0-3.56,3.56l-20.3,55.08a1.92,1.92,0,0,1-3.6,0L89.9,169.66a6,6,0,0,0-3.56-3.56L31.26,145.8a1.92,1.92,0,0,1,0-3.6l55.08-20.3a6,6,0,0,0,3.56-3.56l20.3-55.08a1.92,1.92,0,0,1,3.6,0l20.3,55.08a6,6,0,0,0,3.56,3.56l55.08,20.3a1.92,1.92,0,0,1,0,3.6ZM146,40a6,6,0,0,1,6-6h18V16a6,6,0,0,1,12,0V34h18a6,6,0,0,1,0,12H182V64a6,6,0,0,1-12,0V46H152A6,6,0,0,1,146,40ZM246,88a6,6,0,0,1-6,6H230v10a6,6,0,0,1-12,0V94H208a6,6,0,0,1,0-12h10V72a6,6,0,0,1,12,0V82h10A6,6,0,0,1,246,88Z"></path></svg></div><div class="space-y-4"><h2 class="text-5xl font-playfairDisplay italic text-[#1A1A1A] leading-none">Fezluxe</h2><p class="font-outfit text-sm text-black/40 italic leading-relaxed">Architectural elegance. Generous white space, soft depth, and sophisticated typographic hierarchy.</p></div></div><div class="mt-12 pt-8 border-t border-black/5 flex justify-between items-center relative z-10"><span class="font-outfit text-[10px] uppercase tracking-[0.3em] text-black/30 group-hover:text-[#8D4004] transition-colors">Explore Archive</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="text-black/20 group-hover:text-[#8D4004] group-hover:translate-x-2 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></div></div></a></div><div class="mt-32"><div class="flex items-end justify-between mb-12 pb-6 border-b border-black/10"><div><div class="font-outfit text-[10px] uppercase tracking-[0.3em] text-[#1A1A1A]/40 mb-2">Part II</div><h2 class="font-playfairDisplay text-4xl md:text-5xl text-[#1A1A1A] leading-none">Inner Design Languages</h2></div><p class="font-outfit text-xs text-[#1A1A1A]/50 max-w-sm leading-relaxed hidden md:block">Sub-systems used inside specific surfaces — apps, readers, and project catalogues — each with its own vocabulary.</p></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10"><a class="group block relative" href="/apps/github-thumbnail-generator" data-discover="true"><div class="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative" style="background: rgb(245, 239, 236); border-radius: 8px; box-shadow: rgb(184, 153, 104) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.5) 0px 1px 0px inset, rgba(45, 31, 46, 0.25) 0px 30px 60px -30px;"><div class="absolute inset-0 pointer-events-none opacity-60" style="background: radial-gradient(500px 300px at 85% -10%, rgb(228, 217, 214) 0%, transparent 55%), radial-gradient(400px 400px at -10% 110%, rgb(237, 228, 225) 0%, transparent 55%);"></div><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center transition-all duration-500" style="background: rgba(63, 125, 107, 0.08); color: rgb(63, 125, 107); border-radius: 8px; box-shadow: rgb(184, 153, 104) 0px 0px 0px 1px inset;"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M216,24H72A40,40,0,0,0,32,64v72a24,24,0,0,0,24,24h48l-7.89,46.67A8.42,8.42,0,0,0,96,208a32,32,0,0,0,64,0,8.42,8.42,0,0,0-.11-1.33L152,160h48a24,24,0,0,0,24-24V32A8,8,0,0,0,216,24ZM72,40H176V80a8,8,0,0,0,16,0V40h16v64H48V64A24,24,0,0,1,72,40ZM200,144H152a16,16,0,0,0-15.84,18.26l0,.2L144,208.6a16,16,0,0,1-32,0l7.8-46.14,0-.2A16,16,0,0,0,104,144H56a8,8,0,0,1-8-8V120H208v16A8,8,0,0,1,200,144Z"></path></svg></div><div class="space-y-4"><div class="text-[10px] uppercase tracking-[0.28em]" style="color: rgb(107, 90, 101);">App Chrome</div><h3 class="text-5xl leading-none tracking-tight" style="font-family: "EB Garamond", serif; color: rgb(45, 31, 46);">Atelier<span style="color: rgb(63, 125, 107);">.</span></h3><p class="text-sm italic leading-relaxed" style="font-family: "EB Garamond", serif; color: rgb(107, 90, 101);">Gallery-studio contemporary. Dusty mauve walls, cream matted cards, jade as the single jewel accent. Garamond italic plates.</p></div></div><div class="mt-12 pt-8 flex justify-between items-center relative z-10 border-t" style="border-color: rgb(199, 184, 180);"><span class="text-[10px] uppercase tracking-[0.3em] transition-colors" style="color: rgb(107, 90, 101);">Enter_Studio</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-2 transition-all" style="color: rgb(63, 125, 107);"><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></div></div></a><a class="group block relative" href="/blog" data-discover="true"><div class="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative" style="background: rgb(243, 236, 224); border-radius: 4px; box-shadow: rgba(26, 22, 19, 0.125) 0px 0px 0px 1px inset, rgba(26, 22, 19, 0.19) 0px 30px 60px -30px;"><div class="absolute inset-0 pointer-events-none" style="background-image: repeating-linear-gradient(0deg, rgba(26, 22, 19, 0.03) 0px, rgba(26, 22, 19, 0.03) 1px, transparent 1px, transparent 4px); opacity: 0.4;"></div><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center transition-all duration-500" style="background: rgba(201, 100, 66, 0.082); color: rgb(158, 74, 47); border-radius: 2px; border: 1px solid rgba(201, 100, 66, 0.25);"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M98,136a6,6,0,0,1,6-6h64a6,6,0,0,1,0,12H104A6,6,0,0,1,98,136Zm6-26h64a6,6,0,0,0,0-12H104a6,6,0,0,0,0,12Zm126,82a30,30,0,0,1-30,30H88a30,30,0,0,1-30-30V64a18,18,0,0,0-36,0c0,6.76,5.58,11.19,5.64,11.23A6,6,0,1,1,20.4,84.8C20,84.48,10,76.85,10,64A30,30,0,0,1,40,34H176a30,30,0,0,1,30,30V170h10a6,6,0,0,1,3.6,1.2C220,171.52,230,179.15,230,192Zm-124,0c0-6.76-5.59-11.19-5.64-11.23A6,6,0,0,1,104,170h90V64a18,18,0,0,0-18-18H64a29.82,29.82,0,0,1,6,18V192a18,18,0,0,0,36,0Zm112,0a14.94,14.94,0,0,0-4.34-10H115.88A24.83,24.83,0,0,1,118,192a29.87,29.87,0,0,1-6,18h88A18,18,0,0,0,218,192Z"></path></svg></div><div class="space-y-4"><div class="text-[10px] uppercase tracking-[0.28em]" style="color: rgb(46, 38, 32); font-family: "IBM Plex Mono", monospace;">Terracotta · Reader</div><h3 class="text-5xl italic leading-none tracking-tight" style="font-family: Fraunces, serif; color: rgb(26, 22, 19);">Galley</h3><p class="text-xs uppercase tracking-widest leading-relaxed" style="color: rgb(46, 38, 32); font-family: "IBM Plex Mono", monospace; opacity: 0.7;">A letterpress galley-proof for long reading. Registration marks, drop-caps, and 38em measure — enable from settings.</p></div></div><div class="mt-12 pt-8 flex justify-between items-center relative z-10 border-t" style="border-color: rgba(26, 22, 19, 0.125);"><span class="text-[10px] uppercase tracking-[0.3em]" style="color: rgb(46, 38, 32); font-family: "IBM Plex Mono", monospace; opacity: 0.6;">Open_Proof</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-2 transition-all" style="color: rgb(201, 100, 66);"><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></div></div></a><a class="group block relative" href="/projects/atlas-projects" data-discover="true"><div class="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative" style="background: rgb(10, 9, 6); border-radius: 4px; box-shadow: rgba(255, 176, 0, 0.125) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 30px 60px -30px;"><div class="absolute inset-0 pointer-events-none opacity-30" style="background-image: linear-gradient(rgba(255, 176, 0, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 176, 0, 0.07) 1px, transparent 1px); background-size: 24px 24px;"></div><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center transition-all duration-500" style="background: rgba(255, 176, 0, 0.063); color: rgb(255, 176, 0); border-radius: 2px; border: 1px solid rgba(255, 176, 0, 0.25);"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,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></div><div class="space-y-4"><div class="text-[10px] uppercase tracking-[0.28em]" style="color: rgb(154, 175, 79); font-family: "JetBrains Mono", monospace;">Terracotta · Catalog</div><h3 class="text-5xl leading-none tracking-tight uppercase font-bold" style="font-family: "JetBrains Mono", monospace; color: rgb(255, 176, 0);">Atlas</h3><p class="text-xs uppercase tracking-widest leading-relaxed" style="color: rgb(232, 219, 183); font-family: "JetBrains Mono", monospace; opacity: 0.8;">Phosphor-amber CRT tool-catalog. 38 entries, 9 categories, boot sequence, clipboard installers — pure terminal instrument.</p></div></div><div class="mt-12 pt-8 flex justify-between items-center relative z-10 border-t" style="border-color: rgba(255, 176, 0, 0.125);"><span class="text-[10px] uppercase tracking-[0.3em]" style="color: rgb(154, 175, 79); font-family: "JetBrains Mono", monospace;">$ ./boot.sh</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-2 transition-all" style="color: rgb(255, 176, 0);"><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></div></div></a><a class="group block relative" href="/apps/fractal-flora" data-discover="true"><div class="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative" style="background: rgb(240, 233, 217); border-radius: 2px; box-shadow: rgba(30, 58, 43, 0.2) 0px 0px 0px 1px inset, rgba(30, 58, 43, 0.3) 0px 30px 60px -30px;"><span aria-hidden="true" class="absolute w-2.5 h-2.5 rounded-full z-20" style="top: 10px; left: 10px; background: radial-gradient(circle at 35% 35%, rgb(227, 136, 102) 0%, rgb(166, 91, 58) 50%, rgb(139, 74, 45) 100%); box-shadow: rgba(30, 58, 43, 0.3) 0px 2px 3px, rgba(255, 255, 255, 0.3) 0px 1px 1px inset;"></span><span aria-hidden="true" class="absolute w-2.5 h-2.5 rounded-full z-20" style="top: 10px; right: 10px; background: radial-gradient(circle at 35% 35%, rgb(227, 136, 102) 0%, rgb(166, 91, 58) 50%, rgb(139, 74, 45) 100%); box-shadow: rgba(30, 58, 43, 0.3) 0px 2px 3px, rgba(255, 255, 255, 0.3) 0px 1px 1px inset;"></span><span aria-hidden="true" class="absolute w-2.5 h-2.5 rounded-full z-20" style="bottom: 10px; left: 10px; background: radial-gradient(circle at 35% 35%, rgb(227, 136, 102) 0%, rgb(166, 91, 58) 50%, rgb(139, 74, 45) 100%); box-shadow: rgba(30, 58, 43, 0.3) 0px 2px 3px, rgba(255, 255, 255, 0.3) 0px 1px 1px inset;"></span><span aria-hidden="true" class="absolute w-2.5 h-2.5 rounded-full z-20" style="bottom: 10px; right: 10px; background: radial-gradient(circle at 35% 35%, rgb(227, 136, 102) 0%, rgb(166, 91, 58) 50%, rgb(139, 74, 45) 100%); box-shadow: rgba(30, 58, 43, 0.3) 0px 2px 3px, rgba(255, 255, 255, 0.3) 0px 1px 1px inset;"></span><svg viewBox="0 0 200 640" class="absolute pointer-events-none" aria-hidden="true" style="top: 10px; right: -40px; width: 180px; color: rgb(46, 94, 59); opacity: 0.09; z-index: 0;"><path d="M100 10 Q 94 220, 98 580 Q 100 610, 96 628" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"></path><g><path d="M98 36 Q 60.599999999999994 38.4, 30 44 Q 50.400000000000006 31.2, 98 36" fill="currentColor"></path><path d="M98 36 Q 135.4 38.4, 166 44 Q 145.6 31.2, 98 36" fill="currentColor"></path></g><g><path d="M98 74.85714285714286 Q 62.878571428571426 77.37714285714286, 34.142857142857146 83.25714285714287 Q 53.300000000000004 69.81714285714285, 98 74.85714285714286" fill="currentColor"></path><path d="M98 74.85714285714286 Q 133.12142857142857 77.37714285714286, 161.85714285714286 83.25714285714287 Q 142.7 69.81714285714285, 98 74.85714285714286" fill="currentColor"></path></g><g><path d="M98 113.71428571428571 Q 65.15714285714284 116.35428571428571, 38.285714285714285 122.5142857142857 Q 56.2 108.4342857142857, 98 113.71428571428571" fill="currentColor"></path><path d="M98 113.71428571428571 Q 130.84285714285716 116.35428571428571, 157.71428571428572 122.5142857142857 Q 139.8 108.4342857142857, 98 113.71428571428571" fill="currentColor"></path></g><g><path d="M98 152.57142857142856 Q 67.43571428571428 155.33142857142855, 42.42857142857143 161.77142857142854 Q 59.1 147.05142857142854, 98 152.57142857142856" fill="currentColor"></path><path d="M98 152.57142857142856 Q 128.56428571428572 155.33142857142855, 153.57142857142856 161.77142857142854 Q 136.9 147.05142857142854, 98 152.57142857142856" fill="currentColor"></path></g><g><path d="M98 191.42857142857142 Q 69.71428571428571 194.3085714285714, 46.57142857142857 201.0285714285714 Q 62 185.66857142857143, 98 191.42857142857142" fill="currentColor"></path><path d="M98 191.42857142857142 Q 126.28571428571429 194.3085714285714, 149.42857142857144 201.0285714285714 Q 134 185.66857142857143, 98 191.42857142857142" fill="currentColor"></path></g><g><path d="M98 230.28571428571428 Q 71.99285714285713 233.28571428571428, 50.714285714285715 240.28571428571428 Q 64.9 224.28571428571428, 98 230.28571428571428" fill="currentColor"></path><path d="M98 230.28571428571428 Q 124.00714285714287 233.28571428571428, 145.28571428571428 240.28571428571428 Q 131.1 224.28571428571428, 98 230.28571428571428" fill="currentColor"></path></g><g><path d="M98 269.1428571428571 Q 74.27142857142857 272.2628571428571, 54.85714285714286 279.5428571428571 Q 67.80000000000001 262.9028571428571, 98 269.1428571428571" fill="currentColor"></path><path d="M98 269.1428571428571 Q 121.72857142857143 272.2628571428571, 141.14285714285714 279.5428571428571 Q 128.2 262.9028571428571, 98 269.1428571428571" fill="currentColor"></path></g><g><path d="M98 308 Q 76.55 311.24, 59 318.8 Q 70.7 301.52, 98 308" fill="currentColor"></path><path d="M98 308 Q 119.45 311.24, 137 318.8 Q 125.3 301.52, 98 308" fill="currentColor"></path></g><g><path d="M98 346.85714285714283 Q 78.82857142857142 350.21714285714285, 63.142857142857146 358.0571428571428 Q 73.60000000000001 340.1371428571428, 98 346.85714285714283" fill="currentColor"></path><path d="M98 346.85714285714283 Q 117.17142857142858 350.21714285714285, 132.85714285714286 358.0571428571428 Q 122.39999999999999 340.1371428571428, 98 346.85714285714283" fill="currentColor"></path></g><g><path d="M98 385.71428571428567 Q 81.10714285714286 389.1942857142857, 67.28571428571429 397.3142857142857 Q 76.5 378.7542857142857, 98 385.71428571428567" fill="currentColor"></path><path d="M98 385.71428571428567 Q 114.89285714285714 389.1942857142857, 128.71428571428572 397.3142857142857 Q 119.5 378.7542857142857, 98 385.71428571428567" fill="currentColor"></path></g><g><path d="M98 424.57142857142856 Q 83.38571428571429 428.1714285714286, 71.42857142857143 436.57142857142856 Q 79.4 417.37142857142857, 98 424.57142857142856" fill="currentColor"></path><path d="M98 424.57142857142856 Q 112.61428571428571 428.1714285714286, 124.57142857142857 436.57142857142856 Q 116.6 417.37142857142857, 98 424.57142857142856" fill="currentColor"></path></g><g><path d="M98 463.4285714285714 Q 85.66428571428571 467.1485714285714, 75.57142857142858 475.82857142857137 Q 82.30000000000001 455.9885714285714, 98 463.4285714285714" fill="currentColor"></path><path d="M98 463.4285714285714 Q 110.33571428571429 467.1485714285714, 120.42857142857142 475.82857142857137 Q 113.69999999999999 455.9885714285714, 98 463.4285714285714" fill="currentColor"></path></g><g><path d="M98 502.2857142857142 Q 87.94285714285715 506.1257142857142, 79.71428571428572 515.0857142857142 Q 85.2 494.6057142857142, 98 502.2857142857142" fill="currentColor"></path><path d="M98 502.2857142857142 Q 108.05714285714285 506.1257142857142, 116.28571428571428 515.0857142857142 Q 110.8 494.6057142857142, 98 502.2857142857142" fill="currentColor"></path></g><g><path d="M98 541.1428571428571 Q 90.22142857142858 545.1028571428571, 83.85714285714286 554.3428571428572 Q 88.10000000000001 533.2228571428572, 98 541.1428571428571" fill="currentColor"></path><path d="M98 541.1428571428571 Q 105.77857142857142 545.1028571428571, 112.14285714285714 554.3428571428572 Q 107.89999999999999 533.2228571428572, 98 541.1428571428571" fill="currentColor"></path></g></svg><div class="space-y-8 relative z-10"><div class="w-16 h-16 flex items-center justify-center transition-all duration-500" style="background: rgba(166, 91, 58, 0.08); color: rgb(46, 94, 59); border-radius: 2px; border: 1px solid rgba(30, 58, 43, 0.2);"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M247.63,47.89a8,8,0,0,0-7.52-7.52c-51.76-3-93.32,12.74-111.18,42.22-11.8,19.49-11.78,43.16-.16,65.74a71.34,71.34,0,0,0-14.17,27L98.33,159c7.82-16.33,7.52-33.35-1-47.49-13.2-21.79-43.67-33.47-81.5-31.25a8,8,0,0,0-7.52,7.52c-2.23,37.83,9.46,68.3,31.25,81.5A45.82,45.82,0,0,0,63.44,176,54.58,54.58,0,0,0,87,170.33l25,25V224a8,8,0,0,0,16,0V194.51a55.61,55.61,0,0,1,12.27-35,73.91,73.91,0,0,0,33.31,8.4,60.9,60.9,0,0,0,31.83-8.86C234.89,141.21,250.67,99.65,247.63,47.89ZM47.81,155.6C32.47,146.31,23.79,124.32,24,96c28.32-.24,50.31,8.47,59.6,23.81,4.85,8,5.64,17.33,2.46,26.94L61.65,122.34a8,8,0,0,0-11.31,11.31l24.41,24.41C65.14,161.24,55.82,160.45,47.81,155.6Zm149.31-10.22c-13.4,8.11-29.15,8.73-45.15,2l53.69-53.7a8,8,0,0,0-11.31-11.31L140.65,136c-6.76-16-6.15-31.76,2-45.15,13.94-23,47-35.82,89.33-34.83C232.94,98.34,220.14,131.44,197.12,145.38Z"></path></svg></div><div class="space-y-4"><div class="inline-flex items-center gap-2 px-2.5 py-1 text-[9px] uppercase tracking-[0.28em] font-bold" style="background: rgb(166, 91, 58); color: rgb(240, 233, 217); font-family: "Space Mono", monospace;">Pressed · Mounted</div><h3 class="text-5xl italic leading-none tracking-tight" style="font-family: "Playfair Display", serif; color: rgb(30, 58, 43);">Herbarium</h3><p class="text-sm italic leading-relaxed" style="font-family: "Playfair Display", "EB Garamond", serif; color: rgb(107, 68, 35);">A naturalist's pressed-specimen atlas. Ecru paper, rust pins, twine-tied taxonomic labels, Latin binomials.</p></div></div><div class="mt-12 pt-8 flex justify-between items-center relative z-10 border-t" style="border-color: rgba(30, 58, 43, 0.2);"><span class="text-[10px] uppercase tracking-[0.3em]" style="color: rgb(62, 90, 74); font-family: "Space Mono", monospace;">Hortus_Digitalis</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-2 transition-all" style="color: rgb(166, 91, 58);"><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></div></div></a><a class="group block relative" href="/apps/quote-generator" data-discover="true"><div class="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative" style="background: rgb(250, 247, 240); border-radius: 14px; box-shadow: rgba(25, 23, 22, 0.08) 0px 0px 0px 1px inset, rgba(25, 23, 22, 0.18) 0px 30px 60px -30px;"><div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(60% 40% at 50% 0%, rgba(196, 100, 58, 0.08), transparent 65%);"></div><div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle at 30% 30%, rgba(25, 23, 22, 0.024) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.6;"></div><div class="space-y-8 relative z-10"><div class="w-14 h-14 flex items-center justify-center" style="background: rgba(196, 100, 58, 0.12); color: rgb(196, 100, 58); border-radius: 10px; border: 1px solid rgba(196, 100, 58, 0.3);"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256"><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></div><div class="space-y-4"><div class="text-[10px] flex items-center gap-2" style="color: rgb(107, 106, 101); font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em;"><span class="h-1.5 w-1.5 rounded-full" style="background: rgb(196, 100, 58);"></span><span>light · v2026.1</span></div><h3 class="leading-none tracking-[-0.01em]" style="font-family: Fraunces, serif; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; color: rgb(26, 25, 24); font-size: 52px; font-weight: 400;">Workbench</h3><p class="text-sm leading-relaxed" style="font-family: "Instrument Sans", sans-serif; color: rgb(107, 106, 101);">Calm 2026 light dev-tool aesthetic — warm cream canvas, muted terracotta accent, Fraunces and Instrument Sans. Applied to the quote composer.</p></div></div><div class="mt-12 pt-8 flex justify-between items-center relative z-10" style="border-top: 1px solid rgba(25, 23, 22, 0.08);"><span class="text-[10px] flex items-center gap-2" style="color: rgb(196, 100, 58); font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em;">open composer</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-2 transition-all" style="color: rgb(196, 100, 58);"><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></div></div></a><a class="group block relative" href="/apps/pattern-generator" data-discover="true"><div class="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative" style="background: rgb(15, 15, 16); border-radius: 14px; box-shadow: rgba(239, 236, 228, 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px;"><div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(60% 40% at 50% 0%, rgba(196, 100, 58, 0.08), transparent 65%);"></div><div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle at 30% 30%, rgba(239, 236, 228, 0.02) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.6;"></div><div class="space-y-8 relative z-10"><div class="w-14 h-14 flex items-center justify-center" style="background: rgba(196, 100, 58, 0.12); color: rgb(196, 100, 58); border-radius: 10px; border: 1px solid rgba(196, 100, 58, 0.3);"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" viewBox="0 0 256 256"><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></div><div class="space-y-4"><div class="text-[10px] flex items-center gap-2" style="color: rgb(168, 164, 155); font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em;"><span class="h-1.5 w-1.5 rounded-full" style="background: rgb(196, 100, 58);"></span><span>dark · v2026.1</span></div><h3 class="leading-none tracking-[-0.01em]" style="font-family: Fraunces, serif; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; color: rgb(239, 236, 228); font-size: 52px; font-weight: 400;">Workbench</h3><p class="text-sm leading-relaxed" style="font-family: "Instrument Sans", sans-serif; color: rgb(168, 164, 155);">Same Workbench vocabulary after hours — warm near-black canvas, cream ink, the same terracotta accent. Applied to the pattern generator.</p></div></div><div class="mt-12 pt-8 flex justify-between items-center relative z-10" style="border-top: 1px solid rgba(239, 236, 228, 0.08);"><span class="text-[10px] flex items-center gap-2" style="color: rgb(196, 100, 58); font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em;">open pattern lab</span><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" class="group-hover:translate-x-2 transition-all" style="color: rgb(196, 100, 58);"><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></div></div></a></div></div><footer class="mt-24 pt-12 border-t border-black/10 flex flex-col md:flex-row justify-between items-center gap-6 text-black/30 font-outfit text-[10px] uppercase tracking-[0.3em]"><div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V96H40V56ZM40,112H96v88H40Zm176,88H112V112H216v88Z"></path></svg><span>Tri Theme Protocol Alpha</span></div><span>Fezcodex Studio — 2026</span></footer></div></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: translateX(16.3554vw);"><div class="relative" style="transform: scaleX(0.639907);"><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: translateY(-1.23414px) rotate(2.22765deg);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,80V192H40V64H200A16,16,0,0,1,216,80Z" opacity="0.2"></path><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><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: translateY(-1.14239px);"></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":"\\/design","pageId":"\\/pages","routeParams":{"*":"design"}}</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>