-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
42 lines (42 loc) · 43.9 KB
/
index.html
File metadata and controls
42 lines (42 loc) · 43.9 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
<!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>fezcodex</title><title>piml | Museum Collection</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"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"><link href="https://www.transparenttextures.com" rel="preconnect"><meta content="piml is a data serialization format designed to be exceptionally human-readable and writable, while maintaining a clear and unambiguous structure for machine parsing." name="description"><meta content="Markup Language" name="keywords"><meta content="piml | Museum Collection" property="og:title"><meta content="piml is a data serialization format designed to be exceptionally human-readable and writable, while maintaining a clear and unambiguous structure for machine parsing." property="og:description"><meta content="https://fezcode.com/images/projects/piml.webp" property="og:image"><meta content="https://fezcode.com/projects/piml/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/projects/piml.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="piml | Museum Collection" name="twitter:title"><meta content="piml is a data serialization format designed to be exceptionally human-readable and writable, while maintaining a clear and unambiguous structure for machine parsing." name="twitter:description"><meta content="https://fezcode.com/images/projects/piml.webp" name="twitter:image"><meta content="https://fezcode.com/projects/piml/" name="twitter:url"><link href="https://fezcode.com/projects/piml/" rel="canonical"><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=""></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 fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><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 fill="currentColor" height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg"><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 fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><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="flex-1 flex flex-col transition-all duration-300 md:ml-0"><main class="flex-grow"><div class="bg-[#FDFAF5] min-h-screen selection:bg-[#1a1a1a] selection:text-white font-instr-sans relative overflow-x-hidden"><div class="fixed inset-0 pointer-events-none z-0"><div class="absolute inset-0 opacity-[0.03]" style="background-image:linear-gradient(to right,#000 1px,transparent 1px),linear-gradient(#000 1px,transparent 1px);background-size:15vw 15vw"></div><div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-white rounded-full blur-[150px] opacity-50"></div><div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-white rounded-full blur-[200px] opacity-30"></div><div class="absolute inset-0 opacity-[0.04] mix-blend-multiply bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')]"></div></div><nav class="fixed top-0 left-0 w-full z-50 px-8 py-6 flex justify-between items-center transition-all duration-500 bg-[#FDFAF5] border-b border-transparent"><div class="flex-1"><button class="flex items-center gap-3 group text-[#1a1a1a]"><div class="w-8 h-8 rounded-full border border-black/10 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all duration-500"><svg fill="currentColor" height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg"><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></div><span class="text-[10px] font-bold uppercase tracking-[0.3em] font-ibm-plex-mono">Collection</span></button></div><div class="flex flex-col items-center flex-1"><span class="text-[11px] font-black uppercase tracking-[0.5em] text-black/20 mb-1 font-ibm-plex-mono">Fezcodex Archive</span></div><div class="flex-1 flex justify-end"><div class="text-[10px] font-bold uppercase tracking-[0.3em] font-ibm-plex-mono text-black/40">MUSEUM STYLE / 01</div></div></nav><div class="relative z-10"><section class="min-h-screen pt-40 pb-40 px-8 md:px-24 flex flex-col relative overflow-hidden bg-[#FDFAF5]"><div class="max-w-7xl mx-auto w-full flex-grow flex flex-col relative z-10"><div class="grid grid-cols-2 md:grid-cols-4 gap-12 mb-32 py-10 border-y border-black/10" style="opacity:0"><div class="flex flex-col gap-2"><span class="text-[10px] font-black uppercase tracking-[0.3em] text-black/20 font-ibm-plex-mono">Artifact</span><span class="text-[11px] font-bold uppercase tracking-widest font-ibm-plex-mono text-black/70">piml</span></div><div class="flex flex-col gap-2"><span class="text-[10px] font-black uppercase tracking-[0.3em] text-black/20 font-ibm-plex-mono">Timeline</span><span class="text-[11px] font-bold uppercase tracking-widest font-ibm-plex-mono text-black/70">2025-11-08</span></div><div class="flex flex-col gap-2"><span class="text-[10px] font-black uppercase tracking-[0.3em] text-black/20 font-ibm-plex-mono">Category</span><span class="text-[11px] font-bold uppercase tracking-widest font-ibm-plex-mono text-black/70">Digital Specimen</span></div><div class="flex flex-col gap-2"><span class="text-[10px] font-black uppercase tracking-[0.3em] text-black/20 font-ibm-plex-mono">Core Tech</span><span class="text-[11px] font-bold uppercase tracking-widest font-ibm-plex-mono text-black/70">Markup Language</span></div></div><div class="mb-40 relative"><div style="opacity:.965532;transform:translateY(2.06805px)"><h1 class="text-[14vw] md:text-[10vw] font-medium font-instr-serif leading-[0.85] tracking-tighter text-[#1a1a1a] mb-12">piml</h1><div class="flex flex-col md:flex-row md:items-end gap-12 md:gap-32"><p class="text-2xl md:text-4xl text-black/40 font-instr-serif italic max-w-2xl leading-[1.4] tracking-tight">piml is a data serialization format designed to be exceptionally human-readable and writable, while maintaining a clear and unambiguous structure for machine parsing.</p><div class="hidden md:block pb-4"><div class="w-px h-24 bg-gradient-to-b from-black/20 to-transparent"></div></div></div></div></div><div class="relative"><div class="relative aspect-[21/9] w-full overflow-hidden shadow-[0_60px_100px_-20px_rgba(0,0,0,0.2)] border border-black/5 z-10" style="opacity:0;transform:scale(1.0049)"><img alt="piml" class="w-full h-full object-cover grayscale-[0.2] hover:grayscale-0 transition-all duration-1000 ease-in-out" src="/images/projects/piml.webp"><div class="absolute inset-0 bg-gradient-to-tr from-white/10 to-transparent pointer-events-none"></div></div><div class="absolute -bottom-10 left-1/2 -translate-x-1/2 w-[90%] h-20 bg-black/5 blur-3xl -z-10"></div><div class="absolute bottom-0 left-0 w-full h-[1px] bg-black/10"></div></div></div></section><main><section class="bg-[#FDFAF5] text-[#1a1a1a] py-60 px-8 md:px-24 relative overflow-hidden transition-colors duration-700"><div class="max-w-full mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"><div class="lg:col-span-3 sticky top-40"><div style="opacity:0;transform:translateX(-20px)"><div class="flex items-center gap-6 mb-10"><div class="w-8 h-px bg-black/20"></div><span class="text-[10px] font-black uppercase tracking-[0.5em] font-ibm-plex-mono text-black/30">Exhibit 1</span></div><h2 class="text-5xl md:text-7xl font-instr-serif italic mb-12 leading-[1.1] tracking-tighter text-[#1a1a1a]">Overview</h2><div class="flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500/20"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div></div></div></div><div class="lg:col-span-12 lg:col-start-4"><div class="prose prose-neutral max-w-none prose-p:font-instr-serif prose-p:text-2xl prose-p:leading-[1.6] prose-p:mb-12 prose-li:font-instr-serif prose-li:text-xl prose-li:mb-0 prose-strong:font-black prose-pre:max-w-none prose-p:text-black/60 prose-li:text-black/50 prose-strong:text-black" style="opacity:0;transform:translateY(30px)"><h1>PIML: Parenthesis Intended Markup Language</h1><p class="mb-12"><strong>Spec version</strong>: v1.1.0</p><p class="mb-12">PIML (Parenthesis Intended Markup Language) is a data serialization format designed to be exceptionally human-readable and writable, while maintaining a clear and unambiguous structure for machine parsing. It was created to solve the frustrations found in JSON (too many brackets and quotes) and YAML (ambiguous indentation and type coercion).</p><h2>Core Design Goals</h2><ol><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Visual Scannability</strong>: Use distinctive symbols <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">()</code> and <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">></code> to make the data hierarchy visible at a glance.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Minimalist Syntax</strong>: Remove unnecessary noise like quotes and commas where they don't add value.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Strict but Flexible</strong>: Provide a clear structure that prevents common formatting errors while allowing for free-form text blocks.</li></ol><h2>Structural Overview</h2><p class="mb-12">PIML's power lies in its three primary building blocks:</p><h3 class="text-2xl font-instr-serif italic mb-10 mt-24 tracking-tight text-black/80">1. The Key-Value Pair</h3><p class="mb-12">Defined by parentheses. <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">(name) PIML</code> is a complete entry. No quotes needed for the key or simple string values.</p><h3 class="text-2xl font-instr-serif italic mb-10 mt-24 tracking-tight text-black/80">2. The List Item</h3><p class="mb-12">Defined by the <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">></code> symbol. It allows for vertical lists that are incredibly easy to read and reorder.</p><pre><div class="my-16 relative group w-full block clear-both"><div class="absolute -top-4 left-8 bg-white border-black/5 border px-6 py-3 shadow-sm z-10 flex items-center gap-4"><div class="w-1 h-1 rounded-full bg-emerald-500"></div><span class="text-[11px] font-medium font-instr-serif italic text-black/60 whitespace-nowrap tracking-tight">Exhibition Node // PIML</span></div><div class="relative border border-black/[0.03] bg-[#fcfcfc] p-1 w-full block"><div class="!w-full !m-0 !block" style="background:#fff;padding:3rem 2.5rem 2.5rem;margin:0;overflow:auto;border:1px solid rgba(0,0,0,.05);box-shadow:rgba(0,0,0,.05) 0 30px 60px -20px;width:100%;display:block;color:#1a1a1a"><code class="language-piml" style='white-space:pre;color:#1a1a1a;background:0 0;font-family:"IBM Plex Mono",monospace;font-size:.85em;line-height:1.8'><span>(tags)
</span> > data
> markup
> human-centric</code></div></div><div class="mt-4 flex justify-between items-center px-4 opacity-20 pointer-events-none"><span class="text-[8px] font-bold font-ibm-plex-mono uppercase tracking-widest text-black">Digital Sample Ref. 4QZG9C</span><div class="flex gap-1"><div class="w-4 h-px bg-black"></div><div class="w-1 h-px bg-black"></div></div></div></div></pre><h3 class="text-2xl font-instr-serif italic mb-10 mt-24 tracking-tight text-black/80">3. The Nested Object</h3><p class="mb-12">Objects are created by placing key-value pairs or list items inside a parent key using indentation.</p><pre><div class="my-16 relative group w-full block clear-both"><div class="absolute -top-4 left-8 bg-white border-black/5 border px-6 py-3 shadow-sm z-10 flex items-center gap-4"><div class="w-1 h-1 rounded-full bg-emerald-500"></div><span class="text-[11px] font-medium font-instr-serif italic text-black/60 whitespace-nowrap tracking-tight">Exhibition Node // PIML</span></div><div class="relative border border-black/[0.03] bg-[#fcfcfc] p-1 w-full block"><div class="!w-full !m-0 !block" style="background:#fff;padding:3rem 2.5rem 2.5rem;margin:0;overflow:auto;border:1px solid rgba(0,0,0,.05);box-shadow:rgba(0,0,0,.05) 0 30px 60px -20px;width:100%;display:block;color:#1a1a1a"><code class="language-piml" style='white-space:pre;color:#1a1a1a;background:0 0;font-family:"IBM Plex Mono",monospace;font-size:.85em;line-height:1.8'><span>(database)
</span> (host) 127.0.0.1
(settings)
(timeout) 30
(logging) true</code></div></div><div class="mt-4 flex justify-between items-center px-4 opacity-20 pointer-events-none"><span class="text-[8px] font-bold font-ibm-plex-mono uppercase tracking-widest text-black">Digital Sample Ref. HIXAGB</span><div class="flex gap-1"><div class="w-4 h-px bg-black"></div><div class="w-1 h-px bg-black"></div></div></div></div></pre><h2>Advanced Type Handling</h2><p class="mb-12">PIML handles complex types with ease:</p><ul class="list-none p-0 m-0 w-full"><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Booleans</strong>: <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">true</code> and <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">false</code>.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Numbers</strong>: Integers and floating-point numbers.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Nulls</strong>: Represented by <code class="font-ibm-plex-mono text-sm bg-black/5 text-black/80 px-2 py-0.5 rounded-sm">nil</code>.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>Text Blocks</strong>: Multi-line strings are handled by indenting text under a key, maintaining all line breaks and internal formatting.</li></ul><h2>Adoption</h2><p class="mb-12">PIML is ideally suited for configuration files, manifest declarations, and any data storage where humans are expected to interact with the raw file regularly.</p></div></div></div></section><section class="bg-[#121212] text-[#e5e5e5] py-60 px-8 md:px-24 relative overflow-hidden transition-colors duration-700"><div class="absolute inset-0 opacity-[0.05] pointer-events-none" style="background-image:radial-gradient(#fff 1px,transparent 1px);background-size:30px 30px"></div><div class="max-w-full mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"><div class="lg:col-span-3 lg:order-2 lg:col-span-12 mb-20 sticky-none"><div style="opacity:0;transform:translateX(20px)"><div class="flex items-center gap-6 mb-10"><div class="w-8 h-px bg-white/20"></div><span class="text-[10px] font-black uppercase tracking-[0.5em] font-ibm-plex-mono text-white/40">Exhibit 2</span></div><h2 class="text-5xl md:text-7xl font-instr-serif italic mb-12 leading-[1.1] tracking-tighter text-white">Syntax</h2><div class="flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500/20"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div></div></div></div><div class="lg:col-span-12 lg:order-1"><div class="prose prose-neutral max-w-none prose-p:font-instr-serif prose-p:text-2xl prose-p:leading-[1.6] prose-p:mb-12 prose-li:font-instr-serif prose-li:text-xl prose-li:mb-0 prose-strong:font-black prose-pre:max-w-none prose-invert prose-p:text-white/70 prose-li:text-white/60 prose-strong:text-white" style="opacity:0;transform:translateY(30px)"><p class="mb-12">In a world of configuration hell, PIML offers a sanctuary of clarity. Our architecture prioritizes human vertical scanning and structural clarity over machine-centric verbosity.</p><ul class="list-none p-0 m-0 w-full"><li class="list-none border-l-2 border-white/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-white/10"></div><strong>No Quotes</strong>: Keys and simple strings don't need them.</li><li class="list-none border-l-2 border-white/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-white/10"></div><strong>No Trailing Commas</strong>: End of line means end of value.</li><li class="list-none border-l-2 border-white/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-white/10"></div><strong>Explicit Structure</strong>: Parentheses (key) clearly denote fields.</li><li class="list-none border-l-2 border-white/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-white/10"></div><strong>Lists</strong>: Denoted by > for clear, vertical scanning.</li><li class="list-none border-l-2 border-white/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-white/10"></div><strong>Comments</strong>: Native # support.</li><li class="list-none border-l-2 border-white/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-white/10"></div><strong>Multi-line Strings</strong>: Indentation-based text blocks.</li></ul><p class="mb-12">PIML is designed to be the "Anti-JSON" — removing the noise and keeping the signal. It's not just a format; it's a way of organizing thought.</p></div></div></div></section><section class="bg-[#FDFAF5] text-[#1a1a1a] py-60 px-8 md:px-24 relative overflow-hidden transition-colors duration-700"><div class="max-w-full mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"><div class="lg:col-span-3 sticky top-40"><div style="opacity:0;transform:translateX(-20px)"><div class="flex items-center gap-6 mb-10"><div class="w-8 h-px bg-black/20"></div><span class="text-[10px] font-black uppercase tracking-[0.5em] font-ibm-plex-mono text-black/30">Exhibit 3</span></div><h2 class="text-5xl md:text-7xl font-instr-serif italic mb-12 leading-[1.1] tracking-tighter text-[#1a1a1a]">Examples</h2><div class="flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500/20"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div></div></div></div><div class="lg:col-span-12 lg:col-start-4"><div class="prose prose-neutral max-w-none prose-p:font-instr-serif prose-p:text-2xl prose-p:leading-[1.6] prose-p:mb-12 prose-li:font-instr-serif prose-li:text-xl prose-li:mb-0 prose-strong:font-black prose-pre:max-w-none prose-p:text-black/60 prose-li:text-black/50 prose-strong:text-black" style="opacity:0;transform:translateY(30px)"><p class="mb-12">Compare the elegance of PIML against traditional formats. Notice how the vertical flow of PIML reduces cognitive load compared to the nested brackets of JSON.</p><h3 class="text-2xl font-instr-serif italic mb-10 mt-24 tracking-tight text-black/80">PIML Schema</h3><pre><div class="my-16 relative group w-full block clear-both"><div class="absolute -top-4 left-8 bg-white border-black/5 border px-6 py-3 shadow-sm z-10 flex items-center gap-4"><div class="w-1 h-1 rounded-full bg-emerald-500"></div><span class="text-[11px] font-medium font-instr-serif italic text-black/60 whitespace-nowrap tracking-tight">Exhibition Node // PIML</span></div><div class="relative border border-black/[0.03] bg-[#fcfcfc] p-1 w-full block"><div class="!w-full !m-0 !block" style="background:#fff;padding:3rem 2.5rem 2.5rem;margin:0;overflow:auto;border:1px solid rgba(0,0,0,.05);box-shadow:rgba(0,0,0,.05) 0 30px 60px -20px;width:100%;display:block;color:#1a1a1a"><code class="language-piml" style='white-space:pre;color:#1a1a1a;background:0 0;font-family:"IBM Plex Mono",monospace;font-size:.85em;line-height:1.8'><span>(project)
</span> (name) piml
(version) 1.0.0
(description) Parenthesis Intended Markup Language
(author)
(name) fezcode
(github) https://github.com/fezcode
(tags)
> markup
> data-serialization
> minimalist
(isActive) true
(spec)
(version) 4.3
(status) stable</code></div></div><div class="mt-4 flex justify-between items-center px-4 opacity-20 pointer-events-none"><span class="text-[8px] font-bold font-ibm-plex-mono uppercase tracking-widest text-black">Digital Sample Ref. WL4VFC</span><div class="flex gap-1"><div class="w-4 h-px bg-black"></div><div class="w-1 h-px bg-black"></div></div></div></div></pre><h3 class="text-2xl font-instr-serif italic mb-10 mt-24 tracking-tight text-black/80">JSON Legacy</h3><pre><div class="my-16 relative group w-full block clear-both"><div class="absolute -top-4 left-8 bg-white border-black/5 border px-6 py-3 shadow-sm z-10 flex items-center gap-4"><div class="w-1 h-1 rounded-full bg-emerald-500"></div><span class="text-[11px] font-medium font-instr-serif italic text-black/60 whitespace-nowrap tracking-tight">Exhibition Node // JSON</span></div><div class="relative border border-black/[0.03] bg-[#fcfcfc] p-1 w-full block"><div class="!w-full !m-0 !block" style="background:#fff;padding:3rem 2.5rem 2.5rem;margin:0;overflow:auto;border:1px solid rgba(0,0,0,.05);box-shadow:rgba(0,0,0,.05) 0 30px 60px -20px;width:100%;display:block;color:#1a1a1a"><code class="language-json" style='white-space:pre;color:#1a1a1a;background:0 0;font-family:"IBM Plex Mono",monospace;font-size:.85em;line-height:1.8'><span class="token token" style="color:#d1d5db">{</span><span>
</span><span> </span><span class="token token property">"project"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#d1d5db">{</span><span>
</span><span> </span><span class="token token property">"name"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#059669">"piml"</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"version"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#059669">"1.0.0"</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"description"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#059669">"Parenthesis Intended Markup Language"</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"author"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#d1d5db">{</span><span>
</span><span> </span><span class="token token property">"name"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#059669">"fezcode"</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"github"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#059669">"https://github.com/fezcode"</span><span>
</span><span> </span><span class="token token" style="color:#d1d5db">}</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"tags"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#d1d5db">[</span><span>
</span><span> </span><span class="token token" style="color:#059669">"markup"</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token" style="color:#059669">"data-serialization"</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token" style="color:#059669">"minimalist"</span><span>
</span><span> </span><span class="token token" style="color:#d1d5db">]</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"isActive"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token boolean">true</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"spec"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#d1d5db">{</span><span>
</span><span> </span><span class="token token property">"version"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token number">4.3</span><span class="token token" style="color:#d1d5db">,</span><span>
</span><span> </span><span class="token token property">"status"</span><span class="token token" style="color:#9ca3af">:</span><span> </span><span class="token token" style="color:#059669">"stable"</span><span>
</span><span> </span><span class="token token" style="color:#d1d5db">}</span><span>
</span><span> </span><span class="token token" style="color:#d1d5db">}</span><span>
</span><span></span><span class="token token" style="color:#d1d5db">}</span></code></div></div><div class="mt-4 flex justify-between items-center px-4 opacity-20 pointer-events-none"><span class="text-[8px] font-bold font-ibm-plex-mono uppercase tracking-widest text-black">Digital Sample Ref. DOEWU1</span><div class="flex gap-1"><div class="w-4 h-px bg-black"></div><div class="w-1 h-px bg-black"></div></div></div></div></pre></div></div></div></section><section class="bg-[#FDFAF5] text-[#1a1a1a] py-60 px-8 md:px-24 relative overflow-hidden transition-colors duration-700"><div class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"><div class="lg:col-span-3 lg:order-2 sticky top-40"><div style="opacity:0;transform:translateX(20px)"><div class="flex items-center gap-6 mb-10"><div class="w-8 h-px bg-black/20"></div><span class="text-[10px] font-black uppercase tracking-[0.5em] font-ibm-plex-mono text-black/30">Exhibit 4</span></div><h2 class="text-5xl md:text-7xl font-instr-serif italic mb-12 leading-[1.1] tracking-tighter text-[#1a1a1a]">Features</h2><div class="flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500/20"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div></div></div></div><div class="lg:col-span-9 lg:order-1"><div class="prose prose-neutral max-w-none prose-p:font-instr-serif prose-p:text-2xl prose-p:leading-[1.6] prose-p:mb-12 prose-li:font-instr-serif prose-li:text-xl prose-li:mb-0 prose-strong:font-black prose-pre:max-w-none prose-p:text-black/60 prose-li:text-black/50 prose-strong:text-black" style="opacity:0;transform:translateY(30px)"><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"><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.css" rel="stylesheet"><noscript>You need to enable JavaScript to run this app.</noscript><div class="w-full" id="root"></div></div></div></div></section><section class="bg-[#FDFAF5] text-[#1a1a1a] py-60 px-8 md:px-24 relative overflow-hidden transition-colors duration-700"><div class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"><div class="lg:col-span-3 sticky top-40"><div style="opacity:0;transform:translateX(-20px)"><div class="flex items-center gap-6 mb-10"><div class="w-8 h-px bg-black/20"></div><span class="text-[10px] font-black uppercase tracking-[0.5em] font-ibm-plex-mono text-black/30">Exhibit 5</span></div><h2 class="text-5xl md:text-7xl font-instr-serif italic mb-12 leading-[1.1] tracking-tighter text-[#1a1a1a]">ECOSYSTEM</h2><div class="flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500/20"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div></div></div></div><div class="lg:col-span-9"><div class="prose prose-neutral max-w-none prose-p:font-instr-serif prose-p:text-2xl prose-p:leading-[1.6] prose-p:mb-12 prose-li:font-instr-serif prose-li:text-xl prose-li:mb-0 prose-strong:font-black prose-pre:max-w-none prose-p:text-black/60 prose-li:text-black/50 prose-strong:text-black" style="opacity:0;transform:translateY(30px)"><p class="mb-12">PIML is supported by a growing ecosystem of tools:</p><ul class="list-none p-0 m-0 w-full"><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>go-piml</strong>: A high-performance Go parser and serializer.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>piml.js</strong>: Full support for JavaScript/TypeScript environments.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>VS Code Extension</strong>: Syntax highlighting and snippets for visual clarity.</li><li class="list-none border-l-2 border-black/10 pl-10 pb-12 last:pb-0 -ml-[2px] transition-colors relative m-0 w-full"><div class="absolute top-0 left-[-2px] w-[2px] h-full bg-black/10"></div><strong>PIML Lab</strong>: A live playground to test and convert your data.</li></ul></div></div></div></section><section class="bg-[#FDFAF5] text-[#1a1a1a] py-60 px-8 md:px-24 relative overflow-hidden transition-colors duration-700"><div class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"><div class="lg:col-span-3 lg:order-2 sticky top-40"><div style="opacity:0;transform:translateX(20px)"><div class="flex items-center gap-6 mb-10"><div class="w-8 h-px bg-black/20"></div><span class="text-[10px] font-black uppercase tracking-[0.5em] font-ibm-plex-mono text-black/30">Exhibit 6</span></div><h2 class="text-5xl md:text-7xl font-instr-serif italic mb-12 leading-[1.1] tracking-tighter text-[#1a1a1a]">Adoption</h2><div class="flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500/20"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div><div class="w-1.5 h-1.5 rounded-full bg-black/10"></div></div></div></div><div class="lg:col-span-9 lg:order-1"><div class="prose prose-neutral max-w-none prose-p:font-instr-serif prose-p:text-2xl prose-p:leading-[1.6] prose-p:mb-12 prose-li:font-instr-serif prose-li:text-xl prose-li:mb-0 prose-strong:font-black prose-pre:max-w-none prose-p:text-black/60 prose-li:text-black/50 prose-strong:text-black" style="opacity:0;transform:translateY(30px)"><p class="mb-12">Adopt PIML for your next configuration file or data exchange format. It's designed to be human-centric and structurally obvious.</p><p class="mb-12"><a class="text-black underline underline-offset-8 decoration-black/10 hover:decoration-black transition-all" href="https://github.com/fezcode/piml" rel="noopener noreferrer" target="_blank">Read the Full Spec</a></p></div></div></div></section></main><footer class="bg-[#FDFAF5] pt-80 pb-32 px-8 md:px-24 border-t border-black/5 relative overflow-hidden"><div class="absolute top-0 right-0 w-[40vw] h-[40vw] border-l border-b border-black/[0.02] -mr-[10vw] -mt-[10vw] pointer-events-none"></div><div class="max-w-7xl mx-auto flex flex-col items-center text-center relative z-10"><span class="text-[10px] font-black uppercase tracking-[0.8em] text-black/20 mb-20 font-ibm-plex-mono" style="opacity:0">Exit Collection</span><div class="flex flex-wrap justify-center gap-16 mb-48"><a class="group flex flex-col items-center gap-4" href="https://github.com/fezcode/piml" rel="noopener noreferrer" target="_blank"><div class="w-12 h-12 rounded-full border border-black/10 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all duration-500"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"></path></svg></div><span class="text-[9px] font-black uppercase tracking-[0.3em] font-ibm-plex-mono text-black/30 group-hover:text-black transition-colors">Source Code</span></a><a class="group flex flex-col items-center gap-4" href="/apps/piml-lab" rel="noopener noreferrer" target="_blank"><div class="w-12 h-12 rounded-full border border-black/10 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all duration-500"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"></path></svg></div><span class="text-[9px] font-black uppercase tracking-[0.3em] font-ibm-plex-mono text-black/30 group-hover:text-black transition-colors">Live Preview</span></a></div><button class="flex flex-col items-center gap-12 group" style="opacity:0;transform:translateY(20px)"><div class="flex items-center gap-12"><h2 class="text-[10vw] font-medium font-instr-serif italic leading-none tracking-tighter text-[#1a1a1a]">Return</h2><div class="w-24 h-24 md:w-32 md:h-32 rounded-full border border-black/10 flex items-center justify-center group-hover:scale-90 group-hover:bg-black group-hover:text-white transition-all duration-700 ease-[0.16,1,0.3,1]"><svg fill="currentColor" height="48" viewBox="0 0 256 256" width="48" xmlns="http://www.w3.org/2000/svg" class="group-hover:translate-x-2 transition-transform duration-700"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></div></div><p class="text-xs font-bold uppercase tracking-[0.4em] text-black/20 font-ibm-plex-mono group-hover:text-black/40 transition-colors">Back to Archive Index</p></button></div><div class="mt-80 pt-16 border-t border-black/5 flex flex-col md:flex-row justify-between items-center gap-8 opacity-20 text-[9px] font-bold uppercase tracking-[0.5em] font-ibm-plex-mono"><div class="flex gap-8"><span>IDENTITY</span><span>SYSTEMS</span><span>EXPERIENCE</span></div><div>FEZCODEX MUSEUM © 2026 — ARCHIVAL RECORD No. PIML</div></div></footer></div></div></main></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(94.2843vw)"><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(-2.94774px) rotate(4.7563deg)"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M224,118.31V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V118.31h0A191.14,191.14,0,0,0,128,144,191.08,191.08,0,0,0,224,118.31Z" opacity="0.2"></path><path d="M104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112ZM232,72V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56H80V48a24,24,0,0,1,24-24h48a24,24,0,0,1,24,24v8h40A16,16,0,0,1,232,72ZM96,56h64V48a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8ZM40,72v41.62A184.07,184.07,0,0,0,128,136a184,184,0,0,0,88-22.39V72ZM216,200V131.63A200.25,200.25,0,0,1,128,152a200.19,200.19,0,0,1-88-20.36V200H216Z"></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(-1.67922px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.32078px)"></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>