-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
53 lines (48 loc) · 59.7 KB
/
Copy pathindex.html
File metadata and controls
53 lines (48 loc) · 59.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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<link rel="stylesheet" type="text/css" href="/assets/static/src_index-b3c78705.DcjJijfC.css">
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed" href="/rss.xml" />
<meta name="description" content="codex by fezcode..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fezcode.com/" />
<meta property="og:title" content="Fezcodex - Personal Blog and Projects" />
<meta property="og:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta property="og:image" content="/images/asset/ogtitle.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://fezcode.com/" />
<meta name="twitter:title" content="Fezcodex - Personal Blog and Projects" />
<meta name="twitter:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta name="twitter:image" content="/images/asset/ogtitle.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,200..900,0..100,0..1;1,9..144,200..900,0..100,0..1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=IM+Fell+English:ital@0;1&family=IM+Fell+DW+Pica:ital@0;1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
<title>fezcodex</title>
</head>
<body class="bg-slate-950">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="react-root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height: 21.6272px; opacity: 0;"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">FEZMIST IS ONLINE: A CODEX HALF-REMEMBERED — FOG PAPER, EUCALYPTUS INK, HORIZONS THAT FADE. ENABLE VIA SETTINGS OR COMMAND PALETTE.</p><a href="https://fezcode.com/settings?fezTheme=mist#fezcodex-theme" class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase">Enable Mist<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div style="opacity: 0;"><div class="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden"><div class="hidden md:block"><div class="dnd-viewport-frame"></div><div class="fixed top-0 left-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute top-4 left-4 w-12 h-12 border-t-4 border-l-4 border-dnd-gold rounded-tl-lg"></div></div><div class="fixed top-0 right-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute top-4 right-4 w-12 h-12 border-t-4 border-r-4 border-dnd-gold rounded-tr-lg"></div></div><div class="fixed bottom-0 left-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute bottom-4 left-4 w-12 h-12 border-b-4 border-l-4 border-dnd-gold rounded-bl-lg"></div></div><div class="fixed bottom-0 right-0 w-24 h-24 z-[210] pointer-events-none"><div class="absolute bottom-4 right-4 w-12 h-12 border-b-4 border-r-4 border-dnd-gold rounded-br-lg"></div></div><div class="dnd-lightning-overlay"></div><div class="fixed bottom-8 left-8 z-[110]"><audio src="/sounds/static.mp3" loop=""></audio><button class="p-4 rounded-full border-2 transition-all shadow-2xl bg-black/40 border-white/10 text-white/40 hover:text-white" title="Toggle Ambient Fireplace"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M176.69,48.72a225,225,0,0,0-42.52-35,12,12,0,0,0-12.34,0,225,225,0,0,0-42.52,35C51,78.47,36,111.42,36,144a92,92,0,0,0,184,0C220,111.42,205,78.47,176.69,48.72ZM100,184c0-13.33,5.53-26.26,16.45-38.45A93,93,0,0,1,128,134.72a93,93,0,0,1,11.55,10.83C150.47,157.74,156,170.67,156,184a28,28,0,0,1-56,0Zm79.84,3.94c.09-1.3.16-2.61.16-3.94,0-46.26-44-73.17-45.83-74.29a12,12,0,0,0-12.34,0C120,110.83,76,137.74,76,184c0,1.33.07,2.64.16,3.94A67.68,67.68,0,0,1,60,144c0-26.52,12.21-52.86,36.28-78.3A213.07,213.07,0,0,1,128,38.39C145.82,50.86,196,90.71,196,144A67.68,67.68,0,0,1,179.84,187.94Z"></path></svg></button></div><div class="dnd-fire-overlay"></div><div class="fixed inset-0 pointer-events-none z-[100] hidden md:block"></div><div class="fixed bottom-8 right-8 z-[110] flex flex-col items-center gap-4"><button class="p-4 bg-dnd-crimson border-2 border-dnd-gold rounded-full text-white/50 shadow-2xl transition-all hover:scale-110 active:scale-95 "><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M247.44,173.75a.68.68,0,0,0,0-.14L231.05,89.44c0-.06,0-.12,0-.18A60.08,60.08,0,0,0,172,40H83.89a59.88,59.88,0,0,0-59,49.52L8.58,173.61a.68.68,0,0,0,0,.14,36,36,0,0,0,60.9,31.71l.35-.37L109.52,160h37l39.71,45.09c.11.13.23.25.35.37A36.08,36.08,0,0,0,212,216a36,36,0,0,0,35.43-42.25ZM104,112H96v8a8,8,0,0,1-16,0v-8H72a8,8,0,0,1,0-16h8V88a8,8,0,0,1,16,0v8h8a8,8,0,0,1,0,16Zm40-8a8,8,0,0,1,8-8h24a8,8,0,0,1,0,16H152A8,8,0,0,1,144,104Zm84.37,87.47a19.84,19.84,0,0,1-12.9,8.23A20.09,20.09,0,0,1,198,194.31L167.8,160H172a60,60,0,0,0,51-28.38l8.74,45A19.82,19.82,0,0,1,228.37,191.47Z"></path></svg></button></div><div class="fixed inset-0 pointer-events-none z-10 overflow-hidden"><div class="dnd-fire-particle" style="left: 18.7682%; width: 7.07203px; height: 7.07203px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 10.0032s; animation-delay: -3.93131s; box-shadow: rgb(255, 69, 0) 0px 0px 14.1441px;"></div><div class="dnd-fire-particle" style="left: 43.4456%; width: 3.87065px; height: 3.87065px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 14.9929s; animation-delay: -11.0778s; box-shadow: rgb(255, 69, 0) 0px 0px 7.74129px;"></div><div class="dnd-fire-particle" style="left: 41.8866%; width: 5.81694px; height: 5.81694px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 7.02426s; animation-delay: -2.31332s; box-shadow: rgb(255, 69, 0) 0px 0px 11.6339px;"></div><div class="dnd-fire-particle" style="left: 26.9738%; width: 6.50152px; height: 6.50152px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 7.9945s; animation-delay: -8.9449s; box-shadow: rgb(255, 69, 0) 0px 0px 13.003px;"></div><div class="dnd-fire-particle" style="left: 72.8437%; width: 4.02434px; height: 4.02434px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 5.83426s; animation-delay: -5.768s; box-shadow: rgb(255, 69, 0) 0px 0px 8.04868px;"></div><div class="dnd-fire-particle" style="left: 32.9328%; width: 6.20336px; height: 6.20336px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 11.2879s; animation-delay: -14.0852s; box-shadow: rgb(255, 69, 0) 0px 0px 12.4067px;"></div><div class="dnd-fire-particle" style="left: 28.3278%; width: 3.37133px; height: 3.37133px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 6.41109s; animation-delay: -1.08134s; box-shadow: rgb(255, 69, 0) 0px 0px 6.74266px;"></div><div class="dnd-fire-particle" style="left: 61.6242%; width: 5.6212px; height: 5.6212px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 10.1744s; animation-delay: -12.7715s; box-shadow: rgb(255, 69, 0) 0px 0px 11.2424px;"></div><div class="dnd-fire-particle" style="left: 86.991%; width: 6.88811px; height: 6.88811px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 11.666s; animation-delay: -1.33264s; box-shadow: rgb(255, 69, 0) 0px 0px 13.7762px;"></div><div class="dnd-fire-particle" style="left: 4.90946%; width: 6.09041px; height: 6.09041px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 9.27917s; animation-delay: -12.438s; box-shadow: rgb(255, 69, 0) 0px 0px 12.1808px;"></div><div class="dnd-fire-particle" style="left: 1.12358%; width: 7.36961px; height: 7.36961px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 13.8022s; animation-delay: -7.6066s; box-shadow: rgb(255, 69, 0) 0px 0px 14.7392px;"></div><div class="dnd-fire-particle" style="left: 54.1885%; width: 7.16377px; height: 7.16377px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 13.4911s; animation-delay: -6.50443s; box-shadow: rgb(255, 69, 0) 0px 0px 14.3275px;"></div><div class="dnd-fire-particle" style="left: 75.4564%; width: 5.45048px; height: 5.45048px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 5.69411s; animation-delay: -10.5871s; box-shadow: rgb(255, 69, 0) 0px 0px 10.901px;"></div><div class="dnd-fire-particle" style="left: 18.815%; width: 7.42397px; height: 7.42397px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 7.14358s; animation-delay: -12.7105s; box-shadow: rgb(255, 69, 0) 0px 0px 14.8479px;"></div><div class="dnd-fire-particle" style="left: 41.3232%; width: 4.11883px; height: 4.11883px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 12.6678s; animation-delay: -0.33407s; box-shadow: rgb(255, 69, 0) 0px 0px 8.23766px;"></div><div class="dnd-fire-particle" style="left: 63.7779%; width: 4.50502px; height: 4.50502px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 7.85416s; animation-delay: -8.10849s; box-shadow: rgb(255, 69, 0) 0px 0px 9.01005px;"></div><div class="dnd-fire-particle" style="left: 69.4656%; width: 5.23164px; height: 5.23164px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 13.5304s; animation-delay: -1.58608s; box-shadow: rgb(255, 69, 0) 0px 0px 10.4633px;"></div><div class="dnd-fire-particle" style="left: 36.9667%; width: 4.45326px; height: 4.45326px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 5.07255s; animation-delay: -3.21662s; box-shadow: rgb(255, 69, 0) 0px 0px 8.90652px;"></div><div class="dnd-fire-particle" style="left: 66.8854%; width: 6.31663px; height: 6.31663px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 13.4705s; animation-delay: -8.74198s; box-shadow: rgb(255, 69, 0) 0px 0px 12.6333px;"></div><div class="dnd-fire-particle" style="left: 18.6032%; width: 5.0135px; height: 5.0135px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 10.0734s; animation-delay: -3.9918s; box-shadow: rgb(255, 69, 0) 0px 0px 10.027px;"></div><div class="dnd-fire-particle" style="left: 80.2205%; width: 3.28187px; height: 3.28187px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 14.4406s; animation-delay: -14.8768s; box-shadow: rgb(255, 69, 0) 0px 0px 6.56373px;"></div><div class="dnd-fire-particle" style="left: 73.4671%; width: 5.7621px; height: 5.7621px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 11.1013s; animation-delay: -11.9724s; box-shadow: rgb(255, 69, 0) 0px 0px 11.5242px;"></div><div class="dnd-fire-particle" style="left: 12.1629%; width: 4.77675px; height: 4.77675px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 10.3422s; animation-delay: -6.47352s; box-shadow: rgb(255, 69, 0) 0px 0px 9.55349px;"></div><div class="dnd-fire-particle" style="left: 46.7105%; width: 10.325px; height: 10.325px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 10.777s; animation-delay: -3.21244s; box-shadow: rgb(255, 69, 0) 0px 0px 20.65px;"></div><div class="dnd-fire-particle" style="left: 8.11124%; width: 5.8787px; height: 5.8787px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 9.48483s; animation-delay: -3.18366s; box-shadow: rgb(255, 69, 0) 0px 0px 11.7574px;"></div><div class="dnd-fire-particle" style="left: 18.8697%; width: 8.25043px; height: 8.25043px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 5.48042s; animation-delay: -6.22806s; box-shadow: rgb(255, 69, 0) 0px 0px 16.5009px;"></div><div class="dnd-fire-particle" style="left: 47.9114%; width: 3.30044px; height: 3.30044px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 10.4101s; animation-delay: -14.6685s; box-shadow: rgb(255, 69, 0) 0px 0px 6.60088px;"></div><div class="dnd-fire-particle" style="left: 12.104%; width: 9.28296px; height: 9.28296px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 10.3411s; animation-delay: -0.788071s; box-shadow: rgb(255, 69, 0) 0px 0px 18.5659px;"></div><div class="dnd-fire-particle" style="left: 9.35623%; width: 10.076px; height: 10.076px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 8.43015s; animation-delay: -10.9177s; box-shadow: rgb(255, 69, 0) 0px 0px 20.152px;"></div><div class="dnd-fire-particle" style="left: 98.8658%; width: 8.57713px; height: 8.57713px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 6.19935s; animation-delay: -1.25485s; box-shadow: rgb(255, 69, 0) 0px 0px 17.1543px;"></div><div class="dnd-fire-particle" style="left: 57.2845%; width: 10.8187px; height: 10.8187px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 12.3687s; animation-delay: -9.03406s; box-shadow: rgb(255, 69, 0) 0px 0px 21.6374px;"></div><div class="dnd-fire-particle" style="left: 68.1764%; width: 8.10203px; height: 8.10203px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 7.05752s; animation-delay: -4.10722s; box-shadow: rgb(255, 69, 0) 0px 0px 16.2041px;"></div><div class="dnd-fire-particle" style="left: 92.1605%; width: 6.41788px; height: 6.41788px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 10.5572s; animation-delay: -2.31055s; box-shadow: rgb(255, 69, 0) 0px 0px 12.8358px;"></div><div class="dnd-fire-particle" style="left: 22.5301%; width: 3.13337px; height: 3.13337px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 7.88149s; animation-delay: -2.21047s; box-shadow: rgb(255, 69, 0) 0px 0px 6.26673px;"></div><div class="dnd-fire-particle" style="left: 40.8807%; width: 10.8114px; height: 10.8114px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 12.5225s; animation-delay: -0.669276s; box-shadow: rgb(255, 69, 0) 0px 0px 21.6228px;"></div><div class="dnd-fire-particle" style="left: 55.8974%; width: 7.40973px; height: 7.40973px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 13.1952s; animation-delay: -3.52873s; box-shadow: rgb(255, 69, 0) 0px 0px 14.8195px;"></div><div class="dnd-fire-particle" style="left: 39.4868%; width: 8.46785px; height: 8.46785px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 10.6101s; animation-delay: -13.99s; box-shadow: rgb(255, 69, 0) 0px 0px 16.9357px;"></div><div class="dnd-fire-particle" style="left: 53.6006%; width: 3.85293px; height: 3.85293px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 13.3514s; animation-delay: -7.28201s; box-shadow: rgb(255, 69, 0) 0px 0px 7.70586px;"></div><div class="dnd-fire-particle" style="left: 24.288%; width: 6.1907px; height: 6.1907px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 5.47755s; animation-delay: -1.40861s; box-shadow: rgb(255, 69, 0) 0px 0px 12.3814px;"></div><div class="dnd-fire-particle" style="left: 79.0487%; width: 10.2484px; height: 10.2484px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 11.4219s; animation-delay: -14.0181s; box-shadow: rgb(255, 69, 0) 0px 0px 20.4968px;"></div><div class="dnd-fire-particle" style="left: 93.3246%; width: 9.77853px; height: 9.77853px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 10.8817s; animation-delay: -8.21335s; box-shadow: rgb(255, 69, 0) 0px 0px 19.5571px;"></div><div class="dnd-fire-particle" style="left: 69.3662%; width: 4.50782px; height: 4.50782px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 8.70109s; animation-delay: -5.5827s; box-shadow: rgb(255, 69, 0) 0px 0px 9.01564px;"></div><div class="dnd-fire-particle" style="left: 52.5606%; width: 3.10885px; height: 3.10885px; background: radial-gradient(circle, rgb(255, 69, 0) 0%, rgb(255, 140, 0) 70%, transparent 100%); animation-duration: 6.29537s; animation-delay: -13.7383s; box-shadow: rgb(255, 69, 0) 0px 0px 6.21769px;"></div><div class="dnd-fire-particle" style="left: 26.0283%; width: 5.36262px; height: 5.36262px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 7.9914s; animation-delay: -9.63133s; box-shadow: rgb(255, 69, 0) 0px 0px 10.7252px;"></div><div class="dnd-fire-particle" style="left: 40.7663%; width: 5.73202px; height: 5.73202px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 6.90183s; animation-delay: -14.9069s; box-shadow: rgb(255, 69, 0) 0px 0px 11.464px;"></div><div class="dnd-fire-particle" style="left: 75.8916%; width: 7.65983px; height: 7.65983px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 14.0962s; animation-delay: -7.48353s; box-shadow: rgb(255, 69, 0) 0px 0px 15.3197px;"></div><div class="dnd-fire-particle" style="left: 63.5553%; width: 5.01234px; height: 5.01234px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 13.9123s; animation-delay: -4.72343s; box-shadow: rgb(255, 69, 0) 0px 0px 10.0247px;"></div><div class="dnd-fire-particle" style="left: 81.7641%; width: 3.1914px; height: 3.1914px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 5.37591s; animation-delay: -7.87772s; box-shadow: rgb(255, 69, 0) 0px 0px 6.38281px;"></div><div class="dnd-fire-particle" style="left: 21.1698%; width: 6.43024px; height: 6.43024px; background: radial-gradient(circle, rgb(255, 140, 0) 0%, rgb(255, 215, 0) 70%, transparent 100%); animation-duration: 11.3615s; animation-delay: -3.66375s; box-shadow: rgb(255, 69, 0) 0px 0px 12.8605px;"></div><div class="dnd-fire-particle" style="left: 47.8164%; width: 7.60388px; height: 7.60388px; background: radial-gradient(circle, rgb(255, 0, 0) 0%, rgb(255, 69, 0) 70%, transparent 100%); animation-duration: 5.50434s; animation-delay: -0.242213s; box-shadow: rgb(255, 69, 0) 0px 0px 15.2078px;"></div></div><div class="fixed inset-0 pointer-events-none z-10 overflow-hidden"><div class="dnd-dust-particle" style="left: 35.8519%; top: 119.376%; animation-duration: 26.7949s; animation-delay: -7.93029s; width: 1.29174px; height: 2.43357px;"></div><div class="dnd-dust-particle" style="left: 23.6291%; top: 101.705%; animation-duration: 12.879s; animation-delay: -7.64606s; width: 1.71571px; height: 1.00463px;"></div><div class="dnd-dust-particle" style="left: 18.7648%; top: 112.267%; animation-duration: 10.7398s; animation-delay: -6.01147s; width: 2.00438px; height: 2.15298px;"></div><div class="dnd-dust-particle" style="left: 62.3851%; top: 107.777%; animation-duration: 16.1989s; animation-delay: -16.5868s; width: 2.25226px; height: 1.29544px;"></div><div class="dnd-dust-particle" style="left: 51.3136%; top: 119.218%; animation-duration: 25.7416s; animation-delay: -18.756s; width: 2.83533px; height: 2.67087px;"></div><div class="dnd-dust-particle" style="left: 43.0179%; top: 108.49%; animation-duration: 10.2586s; animation-delay: -19.6954s; width: 1.89573px; height: 2.37987px;"></div><div class="dnd-dust-particle" style="left: 59.5561%; top: 111.568%; animation-duration: 22.1294s; animation-delay: -7.1563s; width: 1.686px; height: 1.03667px;"></div><div class="dnd-dust-particle" style="left: 62.7353%; top: 112.919%; animation-duration: 21.4636s; animation-delay: -11.794s; width: 1.95156px; height: 2.01479px;"></div><div class="dnd-dust-particle" style="left: 33.2924%; top: 118.682%; animation-duration: 23.451s; animation-delay: -7.51724s; width: 1.08172px; height: 1.00704px;"></div><div class="dnd-dust-particle" style="left: 89.2155%; top: 115.13%; animation-duration: 24.0681s; animation-delay: -4.52528s; width: 1.39682px; height: 1.2826px;"></div><div class="dnd-dust-particle" style="left: 15.1721%; top: 105.831%; animation-duration: 12.9805s; animation-delay: -19.518s; width: 1.24852px; height: 2.40291px;"></div><div class="dnd-dust-particle" style="left: 87.3116%; top: 110.894%; animation-duration: 27.4372s; animation-delay: -12.8047s; width: 2.54305px; height: 1.4087px;"></div><div class="dnd-dust-particle" style="left: 48.3344%; top: 104.983%; animation-duration: 12.1029s; animation-delay: -11.413s; width: 2.97635px; height: 2.57425px;"></div><div class="dnd-dust-particle" style="left: 38.5928%; top: 101.752%; animation-duration: 10.0879s; animation-delay: -19.2251s; width: 2.96294px; height: 1.89909px;"></div><div class="dnd-dust-particle" style="left: 82.2113%; top: 118.307%; animation-duration: 10.1842s; animation-delay: -4.62888s; width: 1.23056px; height: 2.67699px;"></div><div class="dnd-dust-particle" style="left: 20.6845%; top: 113.978%; animation-duration: 10.5479s; animation-delay: -7.19164s; width: 1.06805px; height: 2.7105px;"></div><div class="dnd-dust-particle" style="left: 70.4298%; top: 116.635%; animation-duration: 28.0909s; animation-delay: -5.19111s; width: 1.38791px; height: 2.9164px;"></div><div class="dnd-dust-particle" style="left: 54.034%; top: 111.3%; animation-duration: 21.3518s; animation-delay: -17.207s; width: 2.59206px; height: 2.61756px;"></div><div class="dnd-dust-particle" style="left: 97.586%; top: 111.526%; animation-duration: 28.0698s; animation-delay: -1.15377s; width: 2.27431px; height: 2.93484px;"></div><div class="dnd-dust-particle" style="left: 99.0067%; top: 103.785%; animation-duration: 24.8798s; animation-delay: -16.9058s; width: 2.04359px; height: 1.1035px;"></div></div><div class="fixed inset-0 pointer-events-none z-0 overflow-hidden"><div class="dnd-floating-rune text-4xl" style="left: 62.5986%; top: 18.7245%; transform: rotate(344.521deg); opacity: 0.02;">ᛈ</div><div class="dnd-floating-rune text-4xl" style="left: 13.6708%; top: 79.8213%; transform: rotate(83.8309deg); opacity: 0.02;">ᛉ</div><div class="dnd-floating-rune text-4xl" style="left: 87.6388%; top: 90.3691%; transform: rotate(167.864deg); opacity: 0.02;">ᚠ</div><div class="dnd-floating-rune text-4xl" style="left: 10.2238%; top: 42.2692%; transform: rotate(109.389deg); opacity: 0.02;">ᛉ</div><div class="dnd-floating-rune text-4xl" style="left: 50.859%; top: 32.4759%; transform: rotate(198.921deg); opacity: 0.02;">ᛇ</div><div class="dnd-floating-rune text-4xl" style="left: 41.0852%; top: 71.283%; transform: rotate(67.6254deg); opacity: 0.02;">ᚦ</div><div class="dnd-floating-rune text-4xl" style="left: 74.3406%; top: 39.7538%; transform: rotate(175.547deg); opacity: 0.02;">ᛒ</div><div class="dnd-floating-rune text-4xl" style="left: 95.982%; top: 34.8475%; transform: rotate(121.566deg); opacity: 0.02;">ᛈ</div><div class="dnd-floating-rune text-4xl" style="left: 11.3285%; top: 21.5238%; transform: rotate(211.708deg); opacity: 0.02;">ᛞ</div><div class="dnd-floating-rune text-4xl" style="left: 16.5504%; top: 95.4239%; transform: rotate(67.3866deg); opacity: 0.02;">ᛃ</div><div class="dnd-floating-rune text-4xl" style="left: 86.0614%; top: 42.6703%; transform: rotate(310.201deg); opacity: 0.02;">ᛏ</div><div class="dnd-floating-rune text-4xl" style="left: 50.554%; top: 90.8446%; transform: rotate(349.03deg); opacity: 0.02;">ᛒ</div><div class="dnd-floating-rune text-4xl" style="left: 6.69869%; top: 61.1016%; transform: rotate(94.7481deg); opacity: 0.02;">ᛃ</div><div class="dnd-floating-rune text-4xl" style="left: 19.6763%; top: 96.1809%; transform: rotate(145.042deg); opacity: 0.02;">ᚹ</div><div class="dnd-floating-rune text-4xl" style="left: 37.4943%; top: 45.5274%; transform: rotate(146.39deg); opacity: 0.02;">ᚢ</div><div class="dnd-floating-rune text-4xl" style="left: 28.7766%; top: 67.1229%; transform: rotate(96.2131deg); opacity: 0.02;">ᛊ</div><div class="dnd-floating-rune text-4xl" style="left: 57.4041%; top: 35.5013%; transform: rotate(106.485deg); opacity: 0.02;">ᚾ</div><div class="dnd-floating-rune text-4xl" style="left: 74.312%; top: 28.1398%; transform: rotate(148.139deg); opacity: 0.02;">ᛊ</div><div class="dnd-floating-rune text-4xl" style="left: 85.0271%; top: 54.1613%; transform: rotate(216.314deg); opacity: 0.02;">ᚷ</div><div class="dnd-floating-rune text-4xl" style="left: 6.59383%; top: 41.4694%; transform: rotate(143.612deg); opacity: 0.02;">ᛖ</div></div></div><div class="fixed inset-0 z-0"><div class="absolute inset-0 bg-cover bg-center transition-all duration-1000" style="background-image: url("/images/stories/wallies/carlos-cram-ttJt5X9Hmu8-unsplash.jpg"); filter: brightness(0.45) contrast(1.1);"></div><div class="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/80"></div></div><div class="relative z-20 flex flex-col min-h-screen"><nav class="fixed top-0 left-0 right-0 z-[300] dnd-nav-modern border-b-2 border-dnd-gold"><div class="bg-black/40 px-4 md:px-12 py-2 flex items-center justify-between border-b border-white/5 md:mt-[25px]"><div class="flex items-center gap-4"><a class="text-white hover:text-dnd-gold transition-colors" href="/" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M224,120v96a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V164a4,4,0,0,0-4-4H108a4,4,0,0,0-4,4v52a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V120a16,16,0,0,1,4.69-11.31l80-80a16,16,0,0,1,22.62,0l80,80A16,16,0,0,1,224,120Z"></path></svg></a><div class="hidden sm:flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256" class="text-white/40"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg><a class="text-white/60 hover:text-white transition-colors" href="/stories" data-discover="true">S&F</a></div></div><div class="flex items-center gap-6"><div class="flex items-center gap-2 font-mono text-[10px] font-bold tracking-widest"><button class="transition-colors text-dnd-gold underline decoration-2 underline-offset-4">EN</button><span class="text-white/20">/</span><button class="transition-colors text-white/40 hover:text-white">TR</button></div><a class="text-[10px] font-mono font-bold tracking-[0.4em] text-white/40 hover:text-dnd-gold transition-colors hidden md:block" href="/" data-discover="true">FEZCODEX_SYSTEM</a></div></div><div class="px-6 py-4 flex items-center justify-center relative bg-gradient-to-b from-dnd-crimson to-transparent"><span class="text-3xl md:text-4xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter drop-shadow-2xl">From Serfs & Frauds</span></div></nav><main class="flex-grow pt-24 pb-12"><div class="max-w-6xl mx-auto px-6 py-20 text-center relative"><div class="mb-24" style="opacity: 0; transform: translateY(30px);"><div class="flex justify-center mb-8"><div class="h-px w-24 bg-dnd-gold/40 self-center"></div><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" viewBox="0 0 256 256" class="mx-6 text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]"><path d="M200,176H104s8,6,8,16a24,24,0,0,1-48,0V64A24,24,0,0,0,40,40H176a24,24,0,0,1,24,24Z" opacity="0.2"></path><path d="M96,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H104A8,8,0,0,1,96,104Zm8,40h64a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16Zm128,48a32,32,0,0,1-32,32H88a32,32,0,0,1-32-32V64a16,16,0,0,0-32,0c0,5.74,4.83,9.62,4.88,9.66h0A8,8,0,0,1,24,88a7.89,7.89,0,0,1-4.79-1.61h0C18.05,85.54,8,77.61,8,64A32,32,0,0,1,40,32H176a32,32,0,0,1,32,32V168h8a8,8,0,0,1,4.8,1.6C222,170.46,232,178.39,232,192ZM96.26,173.48A8.07,8.07,0,0,1,104,168h88V64a16,16,0,0,0-16-16H67.69A31.71,31.71,0,0,1,72,64V192a16,16,0,0,0,32,0c0-5.74-4.83-9.62-4.88-9.66A7.82,7.82,0,0,1,96.26,173.48ZM216,192a12.58,12.58,0,0,0-3.23-8h-94a26.92,26.92,0,0,1,1.21,8,31.82,31.82,0,0,1-4.29,16H200A16,16,0,0,0,216,192Z"></path></svg><div class="h-px w-24 bg-dnd-gold/40 self-center"></div></div><h1 class="text-lg md:text-2xl font-mono text-white/80 uppercase tracking-[0.3em] md:tracking-[0.5em] mb-4 drop-shadow-lg">Welcome to the</h1><h2 class="text-5xl md:text-9xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter leading-none mb-12 drop-shadow-2xl dnd-header-pulse">Great Archives</h2><p class="text-lg md:text-2xl font-arvo text-gray-200 max-w-2xl mx-auto leading-relaxed italic opacity-90 px-4">"Every serf has a story, and every fraud a hidden truth. Step into the tapestry of our shared odyssey."</p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-7xl mx-auto"><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/lore" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256"><path d="M200,176H104s8,6,8,16a24,24,0,0,1-48,0V64A24,24,0,0,0,40,40H176a24,24,0,0,1,24,24Z" opacity="0.2"></path><path d="M96,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H104A8,8,0,0,1,96,104Zm8,40h64a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16Zm128,48a32,32,0,0,1-32,32H88a32,32,0,0,1-32-32V64a16,16,0,0,0-32,0c0,5.74,4.83,9.62,4.88,9.66h0A8,8,0,0,1,24,88a7.89,7.89,0,0,1-4.79-1.61h0C18.05,85.54,8,77.61,8,64A32,32,0,0,1,40,32H176a32,32,0,0,1,32,32V168h8a8,8,0,0,1,4.8,1.6C222,170.46,232,178.39,232,192ZM96.26,173.48A8.07,8.07,0,0,1,104,168h88V64a16,16,0,0,0-16-16H67.69A31.71,31.71,0,0,1,72,64V192a16,16,0,0,0,32,0c0-5.74-4.83-9.62-4.88-9.66A7.82,7.82,0,0,1,96.26,173.48ZM216,192a12.58,12.58,0,0,0-3.23-8h-94a26.92,26.92,0,0,1,1.21,8,31.82,31.82,0,0,1-4.29,16H200A16,16,0,0,0,216,192Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Chronicles</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">The documented history and lore of the realms.</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/characters" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256"><path d="M168,144a40,40,0,1,1-40-40A40,40,0,0,1,168,144ZM64,56A32,32,0,1,0,96,88,32,32,0,0,0,64,56Zm128,0a32,32,0,1,0,32,32A32,32,0,0,0,192,56Z" opacity="0.2"></path><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1,0-16,24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.85,8,57,57,0,0,0-98.15,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Dramatis Personae</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">The heroes, villains, and bystanders of our tales.</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/places" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256"><path d="M160,72V216L96,184V40Z" opacity="0.2"></path><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM104,52.94l48,24V203.06l-48-24ZM40,62.25l48-12v127.5l-48,12Zm176,131.5-48,12V78.25l48-12Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">The Atlas</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Landmarks, cities, and hidden corners of the world.</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/items" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256"><path d="M141.66,201,129,213.66a8,8,0,0,1-11.32,0L92,188,58.35,221.66a8,8,0,0,1-11.32,0L34.34,209a8,8,0,0,1,0-11.31L68,164,42.34,138.36a8,8,0,0,1,0-11.32L55,114.34a8,8,0,0,1,11.32,0l75.3,75.3A8,8,0,0,1,141.66,201Z" opacity="0.2"></path><path d="M216,32H152a8,8,0,0,0-6.34,3.12l-64,83.21L72,108.69a16,16,0,0,0-22.64,0l-12.69,12.7a16,16,0,0,0,0,22.63l20,20-28,28a16,16,0,0,0,0,22.63l12.69,12.68a16,16,0,0,0,22.62,0l28-28,20,20a16,16,0,0,0,22.64,0l12.69-12.7a16,16,0,0,0,0-22.63l-9.64-9.64,83.21-64A8,8,0,0,0,224,104V40A8,8,0,0,0,216,32ZM52.69,216,40,203.32l28-28L80.68,188Zm70.61-8L48,132.71,60.7,120,136,195.31ZM208,100.06l-81.74,62.88L115.32,152l50.34-50.34a8,8,0,0,0-11.32-11.31L104,140.68,93.07,129.74,155.94,48H208Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">The Armory</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Artifacts, curiosities, and tools of the trade.</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div><div class="h-full"><a class="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden" href="/stories/authors" data-discover="true"><div class="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block"></div><div class="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div><div class="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12">ᛉ</div><div class="dnd-ink-splatter w-8 h-8 top-1/4 right-8"></div><div class="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12"></div><div class="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"></div><div class="absolute inset-4 border border-black/5 pointer-events-none"></div><div class="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors"></div><div class="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500"></div><div class="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><h3 class="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">Creators</h3><p class="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">Meeting the scribes behind the legend.</p><div class="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block"><div class="dnd-wax-seal"><span class="dnd-wax-seal-inner text-sm">SF</span></div></div><div class="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10"><div class="flex items-center gap-4"><div class="h-px w-8 bg-dnd-crimson/20"></div><div class="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]"></div><div class="h-px w-8 bg-dnd-crimson/20"></div></div><span class="text-[9px] font-mono font-bold uppercase tracking-[0.5em] text-black/60">Open_Script</span></div></a></div></div></div></main><footer class="relative mt-12 md:mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-12 md:py-16 px-6 text-white"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-center text-center md:text-left"><div class="space-y-4"><div class="flex justify-center md:justify-start"><span class="text-4xl font-playfairDisplay font-black uppercase tracking-tighter dnd-gold-gradient-text">S & F</span></div><p class="font-arvo text-[10px] uppercase tracking-[0.4em] text-white/70">From Serfs and Frauds</p></div><div class="flex flex-col items-center gap-4 text-white"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="opacity-60"><path d="M200,176H104s8,6,8,16a24,24,0,0,1-48,0V64A24,24,0,0,0,40,40H176a24,24,0,0,1,24,24Z" opacity="0.2"></path><path d="M96,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H104A8,8,0,0,1,96,104Zm8,40h64a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16Zm128,48a32,32,0,0,1-32,32H88a32,32,0,0,1-32-32V64a16,16,0,0,0-32,0c0,5.74,4.83,9.62,4.88,9.66h0A8,8,0,0,1,24,88a7.89,7.89,0,0,1-4.79-1.61h0C18.05,85.54,8,77.61,8,64A32,32,0,0,1,40,32H176a32,32,0,0,1,32,32V168h8a8,8,0,0,1,4.8,1.6C222,170.46,232,178.39,232,192ZM96.26,173.48A8.07,8.07,0,0,1,104,168h88V64a16,16,0,0,0-16-16H67.69A31.71,31.71,0,0,1,72,64V192a16,16,0,0,0,32,0c0-5.74-4.83-9.62-4.88-9.66A7.82,7.82,0,0,1,96.26,173.48ZM216,192a12.58,12.58,0,0,0-3.23-8h-94a26.92,26.92,0,0,1,1.21,8,31.82,31.82,0,0,1-4.29,16H200A16,16,0,0,0,216,192Z"></path></svg><p class="font-arvo italic text-sm text-white max-w-xs text-center leading-relaxed">"Every chronicle is a living memory of those who braved the dark."</p></div><div class="space-y-4 md:text-right"><p class="font-arvo text-[9px] uppercase tracking-widest text-white">Digital Archive Kernel // v0.8.7</p><p class="font-arvo text-[9px] uppercase tracking-widest text-white">Wallpaper Source // <span class="text-white font-bold">Carlos Cram</span></p><div class="h-px w-12 bg-dnd-gold ml-auto opacity-50"></div><p class="font-arvo text-[10px] uppercase tracking-[0.2em] text-white">© 2026 Archives of the Realm</p></div></div></footer></div><div class="fixed inset-0 pointer-events-none z-10 shadow-[inset_0_0_150px_rgba(0,0,0,0.9)]"></div></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(33.0981vw);"><div class="relative" style="transform: scaleX(0.377439);"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform: translateY(-1.67463px) rotate(2.97171deg);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,80V192H40V64H200A16,16,0,0,1,216,80Z" opacity="0.2"></path><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: translateY(-1.49338px);"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: none;"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"><div class="relative w-80 md:w-96 bg-[#050505]/95 backdrop-blur-xl border-2 border-amber-400/50 rounded-sm shadow-2xl shadow-amber-400/10 overflow-hidden mb-4 group" style="opacity: 0; transform: translateX(100px);"><div class="absolute bottom-0 left-0 h-1 z-20 bg-amber-400" style="width: 100%;"></div><div class="p-6 flex gap-4 items-start"><div class="flex-shrink-0 mt-1"><div class="text-xl"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="text-amber-400"><path d="M200,48v63.1c0,39.7-31.75,72.6-71.45,72.9A72,72,0,0,1,56,112V48Z" opacity="0.2"></path><path d="M232,64H208V48a8,8,0,0,0-8-8H56a8,8,0,0,0-8,8V64H24A16,16,0,0,0,8,80V96a40,40,0,0,0,40,40h3.65A80.13,80.13,0,0,0,120,191.61V216H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V191.58c31.94-3.23,58.44-25.64,68.08-55.58H208a40,40,0,0,0,40-40V80A16,16,0,0,0,232,64ZM48,120A24,24,0,0,1,24,96V80H48v32q0,4,.39,8Zm144-8.9c0,35.52-29,64.64-64,64.9a64,64,0,0,1-64-64V56H192ZM232,96a24,24,0,0,1-24,24h-.5a81.81,81.81,0,0,0,.5-8.9V80h24Z"></path></svg></div></div><div class="flex-grow min-w-0 space-y-1"><h4 class="text-xs font-black uppercase tracking-widest text-white leading-tight">Achievement Unlocked!</h4><p class="text-[11px] font-mono leading-relaxed text-gray-400">Story Explorer</p><div class="flex flex-wrap gap-2 pt-3"><a class="text-[9px] font-black uppercase tracking-widest px-3 py-1.5 bg-white/5 border border-white/10 text-white hover:bg-white hover:text-black transition-all rounded-sm" href="/settings" data-discover="true">Settings</a><a class="text-[9px] font-black uppercase tracking-widest px-3 py-1.5 bg-white/5 border border-white/10 text-white hover:bg-white hover:text-black transition-all rounded-sm" href="/achievements" data-discover="true">Trophy Room</a></div></div><button type="button" class="flex-shrink-0 text-gray-600 hover:text-white transition-colors p-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="absolute inset-0 bg-gradient-to-tr from-white/[0.02] to-transparent pointer-events-none"></div></div></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":{"is404":false},"urlPathname":"\\/stories","pageId":"\\/pages","routeParams":{"*":"stories"}}</script>
<script id="vike_globalContext" type="application/json">{}</script>
<script src="/assets/entries/entry-server-routing.DHTkaon_.js" type="module" async></script>
<link rel="modulepreload" href="/assets/entries/pages.BLuD5Sbr.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-BXl3LOEh.js" as="script" type="text/javascript">
</body>
</html>