-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
68 lines (58 loc) · 86.7 KB
/
index.html
File metadata and controls
68 lines (58 loc) · 86.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon"><link href="/favicon.svg" rel="icon" type="image/svg+xml"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="#000000" name="theme-color"><link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed"><meta content="codex by fezcode..." name="description"><meta content="website" property="og:type"><meta content="https://fezcode.com/" property="og:url"><meta content="Fezcodex - Personal Blog and Projects" property="og:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." property="og:description"><meta content="/images/asset/ogtitle.png" property="og:image"><meta content="summary_large_image" name="twitter:card"><meta content="https://fezcode.com/" name="twitter:url"><meta content="Fezcodex - Personal Blog and Projects" name="twitter:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." name="twitter:description"><meta content="/images/asset/ogtitle.png" name="twitter:image"><link href="/logo192.png" rel="apple-touch-icon"><link href="/manifest.json" rel="manifest"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" 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"><title>Parenthesis Intended Markup Language | Fezcodex Editorial</title><title>fezcodex</title><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.css" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect"><meta content="# piml
**Spec version**: v1.1.0
[Available Libraries](https://github.com/fezcode/piml/blob/main/LIBRARIES.md)
[JSON<->PIML Converter](/apps/j" name="description"><meta content="piml, data-format, serialization, markup, dev" name="keywords"><meta content="Parenthesis Intended Markup Language | Fezcodex Editorial" property="og:title"><meta content="# piml
**Spec version**: v1.1.0
[Available Libraries](https://github.com/fezcode/piml/blob/main/LIBRARIES.md)
[JSON<->PIML Converter](/apps/j" property="og:description"><meta content="https://fezcode.com/images/defaults/piml.png" property="og:image"><meta content="https://fezcode.com/blog/piml" property="og:url"><meta content="article" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/defaults/piml.png" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Parenthesis Intended Markup Language | Fezcodex Editorial" name="twitter:title"><meta content="# piml
**Spec version**: v1.1.0
[Available Libraries](https://github.com/fezcode/piml/blob/main/LIBRARIES.md)
[JSON<->PIML Converter](/apps/j" name="twitter:description"><meta content="https://fezcode.com/images/defaults/piml.png" name="twitter:image"><meta content="https://fezcode.com/blog/piml" name="twitter:url"><link href="https://fezcode.com/blog/piml" rel="canonical"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"></head><body class="bg-slate-950" style="cursor:default;user-select:auto"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height:auto;opacity:1"><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 height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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">CLIMB THE TALL BUILDING 0 IS ONLINE: BUILD YOUR DECK AND CLIMB. ACCESS AT /CLIMB-THE-TALL-BUILDING-0.</p><a 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" href="https://fezcode.com/climb-the-tall-building-0/">Play Climb the Tall Building 0<svg height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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-0 pointer-events-none"></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:translateX(-100%)"><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.20.1 // Neural_Nexus</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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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]">// 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 bg-emerald-500/10 text-white" href="/blog" data-discover="true" aria-current="page"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 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="https://fezcode.com/castarook/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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="https://fezcode.com/Swat-Tactics/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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="https://fezcode.com/climb-the-tall-building-0/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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="https://fezcode.com/net_run/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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><span class="font-arvo text-sm font-medium uppercase tracking-widest">Manuals</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// System</span><span class="transform transition-transform duration-300">↓</span></button><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// External Nodes</span><span class="transform transition-transform duration-300">↓</span></button></div></div><div class="p-4 border-t border-white/10 bg-black/50"><div class="grid grid-cols-4 gap-2 mb-4"><button 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" title="COMMANDS"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" title="SETTINGS"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" title="RANDOM"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" title="CONTACT"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 transition-all duration-300 md:ml-0"><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 height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="40" viewBox="0 0 100 100" width="40" xmlns="http://www.w3.org/2000/svg" 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" fill="none" stroke="white" stroke-width="2"></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"><a class="flex items-center gap-2 group" href="/" data-discover="true"><svg height="40" viewBox="0 0 100 100" width="40" xmlns="http://www.w3.org/2000/svg" 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" fill="none" stroke="white" stroke-width="2"></path></g></svg><span class="text-2xl font-black tracking-tighter uppercase font-mono transition-colors group-hover:text-emerald-500">Fez<span class="text-emerald-500 group-hover:text-white">codex</span></span></a></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 height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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:1"><div class="min-h-screen transition-colors duration-500 font-instr-serif bg-[#1a1a1a] text-[#f4f4f4]"><div class="fixed top-0 left-0 w-full h-[3px] z-[9999] bg-white/5"><div class="h-full bg-[#d2b48c] origin-left shadow-[0_0_10px_rgba(210,180,140,0.4)]" style="width:0%"></div></div><main class="pt-32 pb-20"><div class="max-w-[90rem] mx-auto px-[25px] md:pl-[5.77rem] md:pr-[2.22rem]"><div class="border-b border-[#f4f4f4]/25 pb-12 mb-12"><div class="flex flex-col items-center text-center"><h1 class="font-instr-serif italic text-6xl md:text-9xl mb-12 leading-[0.8] max-w-6xl tracking-tighter">Parenthesis Intended Markup Language</h1><div class="flex flex-col items-center gap-8 mt-4"><div class="flex items-center gap-8 font-instr-sans"><a class="inline-flex items-center justify-center h-[2.66667rem] px-[1.33333rem] border-2 uppercase tracking-widest text-[10px] font-black transition-colors border-[#f4f4f4] text-[#f4f4f4] hover:bg-[#f4f4f4] hover:text-[#1a1a1a]" href="/blog" data-discover="true">Back to Index</a><button class="flex items-center gap-4 hover:opacity-70 transition-opacity font-instr-sans" type="button"><span class="uppercase tracking-widest text-xs font-bold">Light Mode</span><span class="w-[0.83333rem] h-[0.83333rem] rounded-full border-2 bg-[#f4f4f4] border-[#f4f4f4]"></span></button></div><div class="flex flex-wrap justify-center gap-6 font-instr-sans uppercase tracking-[0.2em] text-[10px] text-white/60"><a class="hover:underline underline-offset-4 font-bold" href="/blog?category=dev" data-discover="true">dev</a><span class="opacity-30">//</span><span class="font-bold">12/11/2025</span><span class="opacity-30">//</span><span class="font-bold">6 Min Read</span><span class="opacity-30">//</span><span>Updated 14/11/2025</span></div></div></div></div><div class="max-w-5xl mx-auto font-instr-serif text-xl md:text-2xl leading-[1.8] tracking-wide text-justify"><div class=""><div class="mt-20 mb-8"><h2 class="text-5xl font-instr-serif tracking-tight mb-6">piml</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]"><strong class="font-bold text-current">Spec version</strong>: v1.1.0</p><p class="mb-8 last:mb-0 leading-[1.8]"><a class="underline decoration-1 underline-offset-4 transition-colors decoration-white/30 hover:decoration-white inline-flex items-center gap-1" href="https://github.com/fezcode/piml/blob/main/LIBRARIES.md" target="_blank" rel="noopener noreferrer" node="[object Object]">Available Libraries <svg height="1em" viewBox="0 0 256 256" width="1em" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-xs"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg></a></p><p class="mb-8 last:mb-0 leading-[1.8]"><a class="underline decoration-1 underline-offset-4 transition-colors decoration-white/30 hover:decoration-white inline-flex items-center gap-1" href="/apps/json-piml-converter" node="[object Object]">JSON<->PIML Converter</a></p><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">Parenthesis Intended Markup Language</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">In the ever-evolving landscape of data serialization formats, PIML (Parenthesis Intended Markup Language) emerges as a compelling alternative, prioritizing human readability and writability without compromising machine parseability. This post delves into the core tenets of PIML, exploring its syntax, data types, and how it stacks up against established formats like JSON, YAML, and TOML.</p><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">What is PIML?</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML is a data serialization format designed for clarity and ease of use by both humans and machines. It leverages a unique <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">(key)</code> syntax and indentation-based nesting to create a visually intuitive representation of structured data. Conceived as a middle ground between the verbosity of JSON and the potential ambiguity of YAML, PIML aims to offer a clean, unambiguous, and highly readable format for various data exchange and configuration needs.</p><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">Syntax Rules: The Building Blocks of PIML</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML's syntax is intentionally minimal, focusing on consistency and clarity.</p><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Keys</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">Keys are the identifiers for data elements and are always enclosed in parentheses. This explicit demarcation makes keys instantly recognizable.</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(my_key) my_value
</span>(another key with spaces) another_value</code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Indentation</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">Indentation is fundamental to PIML's structure, defining hierarchical relationships between data elements.</p><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Recommendation:</strong> Use <strong class="font-bold text-current">2 spaces</strong> for each level of indentation to maintain visual consistency.</li><li><strong class="font-bold text-current">Strict Rule:</strong> Mixing tabs and spaces for indentation is <strong class="font-bold text-current">prohibited</strong> to prevent parsing ambiguities.</li></ul><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Comments</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML supports single-line comments using the <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">#</code> symbol. Anything from <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">#</code> to the end of the line is ignored by parsers, allowing for clear inline documentation.</p><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Rule:</strong> Only lines that <em>start</em> with <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">#</code> are treated as comments. Inline comments (e.g., <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">(key) value # comment</code>) are not supported and will be considered part of the value.</li></ul><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span># This explains the data
</span>(data) value # This entire line is the value, not a comment</code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Escaping</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">The backslash (<code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">\</code>) character is used to escape special characters within string values, ensuring that characters like <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">(</code> or <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">#</code> can be part of the data itself.</p><ul class="list-disc pl-6 my-8 space-y-3"><li>Common escapes include <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">\n</code> (newline), <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">\t</code> (tab), and <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">\\</code> (literal backslash).</li><li>Example: <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">(title) My \(Awesome\) Title</code></li><li>To include a <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">#</code> character at the beginning of a line within a multi-line string, escape it with a backslash (<code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">\</code>), e.g., <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">\# This is not a comment</code>.</li></ul><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">Data Types: Representing Information in PIML</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML supports a range of data types, from simple primitives to complex nested structures.</p><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Primitive Types</h3><hr class="border-t w-full border-white/25"></div><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Single-line Strings:</strong> Unquoted text values that reside on a single line.<pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(name) John Doe</span></code></div></div></div></pre></li><li><strong class="font-bold text-current">Integers:</strong> Whole numbers.<pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(age) 30</span></code></div></div></div></pre></li><li><strong class="font-bold text-current">Floats:</strong> Decimal numbers.<pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(price) 19.99</span></code></div></div></div></pre></li><li><strong class="font-bold text-current">Booleans:</strong> Logical values, represented as <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">true</code> or <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">false</code>.<pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(is_active) true</span></code></div></div></div></pre></li></ul><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Null and Empty Representations: The <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">nil</code> Unifier</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">One of PIML's distinctive features is the use of <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">nil</code> as a unified representation for three distinct states:</p><ol class="list-decimal pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Null:</strong> The absence of a value.</li><li><strong class="font-bold text-current">Empty Array:</strong> An empty list.</li><li><strong class="font-bold text-current">Empty Object:</strong> An empty map.</li></ol><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(optional_setting) nil
</span>(empty_items) nil
(empty_config) nil</code></div></div></div></pre><p class="mb-8 last:mb-0 leading-[1.8]">This design choice prioritizes syntactic simplicity, though it means the specific <em>type</em> of an empty collection (array vs. object) is not preserved when <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">nil</code> is used.</p><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Multi-line Strings</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">For text spanning multiple lines, PIML allows the content to start on the next indented line, preserving newlines.</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(description)
</span> This is a multi-line string example.
It can hold extensive textual content.</code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Arrays (Lists)</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">Ordered collections of items are denoted by a <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">></code> prefix on each indented item.</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(fruits)
</span> > apple
> banana
> orange</code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Sets (Unique, Unordered Collections)</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML introduces <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">>|</code> for sets, which are collections of unique, unordered items. Duplicate values are ignored by parsers.</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(unique_ids)
</span> >| id_a
>| id_b
>| id_a # This duplicate will be ignored</code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Objects (Maps)</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">Unordered key-value pairs are defined through indentation, creating nested structures.</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(user)
</span> (name) Alice
(email) alice@example.com</code></div></div></div></pre><div class="mt-10 mb-4"><h4 class="text-2xl font-instr-serif italic tracking-tight mb-3">List of Objects</h4><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML provides a clear way to represent lists of objects, combining the array <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">></code> marker with nested object syntax. The key within the object (e.g., <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">(contributor)</code>) serves as metadata for readability and is ignored by parsers.</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(contributors)
</span> > (contributor)
(id) 1
(name) Bob
> (contributor)
(id) 2
(name) Carol</code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Specialized Types (by Convention)</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML encourages conventions for specialized data:</p><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Dates/Times:</strong> Typically represented as strings in ISO 8601 format (e.g., <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">2023-10-27T10:30:00Z</code>).</li><li><strong class="font-bold text-current">Binary Data:</strong> Usually encoded as base64 strings.</li></ul><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">PIML in Action: A Comprehensive Example</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">Let's look at a more complete example demonstrating various PIML features:</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">piml</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span>(document_metadata)
</span> (title) PIML Specification Document
(version) 1.0.0
(author) Fezcodex
(creation_date) 2025-11-12T10:00:00Z
(is_draft) true
(tags)
> data-format
> serialization
> piml
(abstract)
This document outlines the PIML format,
its syntax, and its design philosophy.
It aims for human-centric data representation.
(contact)
(email) contact@example.com
(website) [https://fezcode.github.io](https://fezcode.github.io)
(empty_settings) nil
(configuration)
(database)
(type) SQLite
(path) /data/app.db
(max_connections) 50
(api_keys)
>| key_abc
>| key_xyz
(feature_toggles)
(new_ui) true
(beta_analytics) false</code></div></div></div></pre><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">PIML vs. The World: A Comparison</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML carves its niche by offering a distinct balance of features compared to other popular data formats.</p><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">PIML vs. JSON</h3><hr class="border-t w-full border-white/25"></div><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">PIML Advantages:</strong><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Readability:</strong> Significantly less visual noise due to the absence of quotes for keys and single-line strings, and no mandatory commas.</li><li><strong class="font-bold text-current">Comments:</strong> Native support for <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">#</code> comments, a feature lacking in JSON.</li><li><strong class="font-bold text-current">Multi-line Strings:</strong> More natural and cleaner syntax for multi-line text.</li></ul></li><li><strong class="font-bold text-current">PIML Trade-off:</strong><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current"><code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">nil</code> Ambiguity:</strong> The unified <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">nil</code> for null, empty arrays, and empty objects simplifies syntax but means PIML cannot perfectly distinguish between these empty collection types, potentially affecting round-trip conversions from JSON.</li></ul></li></ul><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">PIML vs. YAML</h3><hr class="border-t w-full border-white/25"></div><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">PIML Advantages:</strong><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Simplicity & Predictability:</strong> PIML's syntax is much smaller and more constrained, avoiding the "many ways to do one thing" complexity and the subtle whitespace pitfalls often associated with YAML. The explicit <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">(key)</code> syntax reduces ambiguity.</li></ul></li><li><strong class="font-bold text-current">PIML Trade-off:</strong><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Feature Set:</strong> PIML deliberately omits advanced YAML features like anchors, aliases, and complex document structures, focusing on a simpler, more direct representation.</li></ul></li></ul><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">PIML vs. TOML</h3><hr class="border-t w-full border-white/25"></div><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">PIML Advantages:</strong><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Nesting Flexibility:</strong> PIML's indentation-based nesting is more adaptable for arbitrarily deep and complex data structures, contrasting with TOML's more rigid <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">[table]</code> and <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">[[array of tables]]</code> approach.</li></ul></li><li><strong class="font-bold text-current">PIML Trade-off:</strong><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Configuration Focus:</strong> TOML excels as a configuration file format due to its flat, key-value pair nature. PIML is more general-purpose, though it can certainly be used for configuration.</li></ul></li></ul><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">Conclusion</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">PIML offers a refreshing perspective on data serialization, emphasizing human-centric design while maintaining machine parseability. Its explicit key syntax, indentation-driven structure, and thoughtful approach to data types make it a strong contender for scenarios where clarity, readability, and ease of writing are paramount. As data continues to grow in complexity, formats like PIML provide valuable alternatives for developers seeking more intuitive ways to manage and exchange information.</p></div></div><div class="mt-24 pt-12 border-t border-[#f4f4f4]/25 text-center"><a class="inline-flex items-center gap-2 font-instr-sans text-xl tracking-tight text-white hover:text-white/70 transition-opacity" href="/blog" data-discover="true"><span class="text-lg">←</span> Back to Blogposts</a></div></div></main></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.20.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 height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 class="text-gray-500 hover:text-white flex items-center gap-2" href="/rss.xml" target="_blank"><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 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" href="https://github.com/fezcode" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" href="https://x.com/fezcoddy" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" href="https://www.linkedin.com/in/ahmed-samil-bulbul/?locale=en_US" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" href="https://github.com/fezcode/fezcode.github.io" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><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 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" disabled placeholder="Coming soon..." 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(100vw)"><div class="absolute bottom-full mb-4 px-4 py-2 rounded-xl text-[10px] font-mono uppercase tracking-tighter whitespace-nowrap border bg-[#050505] text-[#10B981] border-[#10B981]/20 shadow-[0_0_15px_rgba(16,185,129,0.1)]" style="opacity:1;transform:none"><div class="flex items-center gap-2"><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24ZM84,140a12,12,0,1,1,12-12A12,12,0,0,1,84,140Zm44,0a12,12,0,1,1,12-12A12,12,0,0,1,128,140Zm44,0a12,12,0,1,1,12-12A12,12,0,0,1,172,140Z"></path></svg>Analyzing data structures... Delicious.</div><div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-[#050505]"></div></div><div class="relative" style="transform:scaleX(-1)"><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(-.473572px) scale(1.04886) rotate(-1.20558deg)"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M240,124a48,48,0,0,1-32,45.27h0V176a40,40,0,0,1-80,0,40,40,0,0,1-80,0v-6.73h0a48,48,0,0,1,0-90.54V72a40,40,0,0,1,80,0,40,40,0,0,1,80,0v6.73A48,48,0,0,1,240,124Z" opacity="0.2"></path><path d="M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z"></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:#10b981;transform:translateY(-.786865px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.21314px)"></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></body></html>