From 3be481e260d4c54bced3ad1789947f134e0f6845 Mon Sep 17 00:00:00 2001
From: Wanjohi <71614375+wanjohiryan@users.noreply.github.com>
Date: Tue, 14 Jan 2025 03:24:53 +0300
Subject: [PATCH] =?UTF-8?q?=E2=AD=90=20feat(www):=20Finish=20up=20on=20the?=
 =?UTF-8?q?=20UI=20components=20(#158)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/www/src/routes/home/index.tsx  | 254 +++++++++++++++++++-----
 bun.lockb                           | Bin 747000 -> 747432 bytes
 packages/relay/internal/peer.go.txt | 295 ++++++++++++++++++++++++++++
 packages/ui/globals.css             | 146 ++++++++++++--
 packages/ui/package.json            |   1 +
 packages/ui/src/index.ts            |   1 +
 packages/ui/tailwind.config.js      |   5 +-
 7 files changed, 629 insertions(+), 73 deletions(-)
 create mode 100644 packages/relay/internal/peer.go.txt

diff --git a/apps/www/src/routes/home/index.tsx b/apps/www/src/routes/home/index.tsx
index d6464674..1993ed6e 100644
--- a/apps/www/src/routes/home/index.tsx
+++ b/apps/www/src/routes/home/index.tsx
@@ -1,6 +1,8 @@
+import { Avatar } from "@nestri/ui";
+// import {  } from "@qwik-ui/headless";
 import { component$ } from "@builder.io/qwik";
-import { HomeNavBar, SimpleFooter } from "@nestri/ui";
-import Avatar from "../../../../../packages/ui/src/avatar";
+import { HomeNavBar, Modal, SimpleFooter } from "@nestri/ui";
+import { cn } from "@nestri/ui/design";
 
 const games = [
     {
@@ -102,12 +104,38 @@ export default component$(() => {
                                 <img draggable={false} alt="game" width={256} height={256} src="https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/1623730/22a20bdaa6d782f60caa45eb7b02fc2411dcd988.ico" class=" h-12 bg-black ring-gray-400/70 ring-1 shadow-lg shadow-gray-900 w-12 translate-y-4 rotate-[14deg] rounded-lg object-cover transition-transform sm:h-16 sm:w-16 group-hover:scale-110" />
                             </div>
                         </button>
-                        <button class="border-gray-400/70 dark:border-gray-700/70 hover:ring-2 hover:ring-[#8f8f8f] dark:hover:ring-[#707070] group transition-all border-dashed duration-200 border-[2px]  h-14  rounded-xl  pl-4  gap-2  flex  items-center  justify-between  overflow-hidden  hover:bg-gray-300/70 dark:hover:bg-gray-700/70 outline-none  disabled:opacity-50">
-                            <span class="py-2 text-gray-600/70 dark:text-gray-400/70 leading-none group-hover:text-black dark:group-hover:text-white shrink truncate flex text-start justify-center items-center gap-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 size-5" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.505 2h-1.501c-3.281 0-4.921 0-6.084.814a4.5 4.5 0 0 0-1.106 1.105C2 5.08 2 6.72 2 10s0 4.919.814 6.081a4.5 4.5 0 0 0 1.106 1.105C5.083 18 6.723 18 10.004 18h4.002c3.28 0 4.921 0 6.084-.814a4.5 4.5 0 0 0 1.105-1.105c.63-.897.772-2.08.805-4.081m-8-6h4m0 0h4m-4 0V2m0 4v4m-7 5h2m-1 3v4m-4 0h8" color="currentColor" /></svg>
-                                Add another Linux machine
-                            </span>
-                        </button>
+                        <Modal.Root class="w-full">
+                            <Modal.Trigger class="border-gray-400/70 w-full dark:border-gray-700/70 hover:ring-2 hover:ring-[#8f8f8f] dark:hover:ring-[#707070] group transition-all border-dashed duration-200 border-[2px]  h-14  rounded-xl  pl-4  gap-2  flex  items-center  justify-between  overflow-hidden  hover:bg-gray-300/70 dark:hover:bg-gray-700/70 outline-none  disabled:opacity-50">
+                                <span class="py-2 text-gray-600/70 dark:text-gray-400/70 leading-none group-hover:text-black dark:group-hover:text-white shrink truncate flex text-start justify-center items-center gap-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 size-5" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.505 2h-1.501c-3.281 0-4.921 0-6.084.814a4.5 4.5 0 0 0-1.106 1.105C2 5.08 2 6.72 2 10s0 4.919.814 6.081a4.5 4.5 0 0 0 1.106 1.105C5.083 18 6.723 18 10.004 18h4.002c3.28 0 4.921 0 6.084-.814a4.5 4.5 0 0 0 1.105-1.105c.63-.897.772-2.08.805-4.081m-8-6h4m0 0h4m-4 0V2m0 4v4m-7 5h2m-1 3v4m-4 0h8" color="currentColor" /></svg>
+                                    Add another Linux machine
+                                </span>
+                            </Modal.Trigger>
+                            <Modal.Panel class="
+                            dark:backdrop:bg-[#0009] backdrop:bg-[#b3b5b799] backdrop:backdrop-grayscale-[.3] w-[340px] max-h-[75vh] rounded-xl border dark:border-[#343434] border-[#e2e2e2]
+                            dark:[box-shadow:0_0_0_1px_rgba(255,255,255,0.08),_0_3.3px_2.7px_rgba(0,0,0,.1),0_8.3px_6.9px_rgba(0,0,0,.13),0_17px_14.2px_rgba(0,0,0,.17),0_35px_29.2px_rgba(0,0,0,.22),0px_-4px_4px_0px_rgba(0,0,0,.04)_inset] dark:bg-[#222b] 
+                           [box-shadow:0_0_0_1px_rgba(19,21,23,0.08),_0_3.3px_2.7px_rgba(0,0,0,.03),0_8.3px_6.9px_rgba(0,0,0,.04),0_17px_14.2px_rgba(0,0,0,.05),0_35px_29.2px_rgba(0,0,0,.06),0px_-4px_4px_0px_rgba(0,0,0,.07)_inset] bg-[#fffd] 
+                            backdrop-blur-lg py-4 px-5 modal" >
+                                <div class="size-full flex flex-col">
+                                    <div class="flex justify-between items-start ">
+                                        <div class="mb-3 size-14 rounded-full text-[#939597] dark:text-[#d2d4d7] bg-[rgba(19,21,23,0.04)] dark:bg-white/[.08] flex items-center justify-center [&>svg]:size-8" >
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.505 2h-1.501c-3.281 0-4.921 0-6.084.814a4.5 4.5 0 0 0-1.106 1.105C2 5.08 2 6.72 2 10s0 4.919.814 6.081a4.5 4.5 0 0 0 1.106 1.105C5.083 18 6.723 18 10.004 18h4.002c3.28 0 4.921 0 6.084-.814a4.5 4.5 0 0 0 1.105-1.105c.63-.897.772-2.08.805-4.081m-8-6h4m0 0h4m-4 0V2m0 4v4m-7 5h2m-1 3v4m-4 0h8" color="currentColor" /></svg>
+                                        </div>
+                                    </div>
+                                    <div class="dark:text-white text-black">
+                                        <h3 class="font-semibold text-2xl tracking-tight mb-2 font-title">Add a Linux machine</h3>
+                                        <div class="text-sm dark:text-white/[.79] text-[rgba(19,21,23,0.64)]" >
+                                            Download and install Nestri on your remote server or computer to connect it. Then paste the generated machine id here.
+                                        </div>
+                                    </div>
+                                    <form action="#" class="mt-3 flex flex-col gap-3" >
+                                        <input placeholder="fc27f428f9ca47d4b41b707ae0c62090" class="transition-all duration-200 w-full px-2 py-3 h-10 border text-black dark:text-white dark:border-[#343434] border-[#e2e2e2] rounded-md text-sm outline-none bg-white dark:bg-[rgba(19,21,23,0.64)] leading-none [background-image:-webkit-linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0))]
+                                            focus:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:focus:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070]" />
+                                        <button class="w-full h-[calc(2.25rem+2*1px)] transition-all duration-200 hover:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:hover:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] focus:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:focus:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] outline-none bg-primary-500 text-white rounded-lg text-sm" >Add machine</button>
+                                    </form>
+                                </div>
+                            </Modal.Panel>
+                        </Modal.Root>
                     </div>
                 </div>
                 <div class="gap-2 w-full flex-col flex">
@@ -118,51 +146,121 @@ export default component$(() => {
                                 <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 size-5" viewBox="0 0 20 20"><path fill="currentColor" d="M2.049 9.112a8.001 8.001 0 1 1 9.718 8.692a1.5 1.5 0 0 0-.206-1.865l-.01-.01q.244-.355.47-.837a9.3 9.3 0 0 0 .56-1.592H9.744q.17-.478.229-1h2.82A15 15 0 0 0 13 10c0-.883-.073-1.725-.206-2.5H7.206l-.05.315a4.5 4.5 0 0 0-.971-.263l.008-.052H3.46q-.112.291-.198.595c-.462.265-.873.61-1.213 1.017m9.973-4.204C11.407 3.59 10.657 3 10 3s-1.407.59-2.022 1.908A9.3 9.3 0 0 0 7.42 6.5h5.162a9.3 9.3 0 0 0-.56-1.592M6.389 6.5c.176-.743.407-1.422.683-2.015c.186-.399.401-.773.642-1.103A7.02 7.02 0 0 0 3.936 6.5zm9.675 7H13.61a10.5 10.5 0 0 1-.683 2.015a6.6 6.6 0 0 1-.642 1.103a7.02 7.02 0 0 0 3.778-3.118m-2.257-1h2.733c.297-.776.46-1.62.46-2.5s-.163-1.724-.46-2.5h-2.733c.126.788.193 1.63.193 2.5s-.067 1.712-.193 2.5m2.257-6a7.02 7.02 0 0 0-3.778-3.118c.241.33.456.704.642 1.103c.276.593.507 1.272.683 2.015zm-7.76 7.596a3.5 3.5 0 1 0-.707.707l2.55 2.55a.5.5 0 0 0 .707-.707zM8 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0" /></svg>
                                 Find people to play with
                             </span>
-                            <button class="sm:flex hidden gap-1 items-center [&>svg]:size-5 cursor-pointer hover:text-gray-800 dark:hover:text-gray-200 transition-all duration-200 outline-none">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m-7-7h14" /></svg>
-                                <span>Create a party</span>
-                            </button>
                         </div>
                         <ul class="list-none ml-4 relative w-[calc(100%-1rem)]">
                             {games.slice(5, 8).sort().map((game, key) => (
-                                <button key={`find-${key}`} class="gap-3.5 text-left hover:bg-gray-300/70 dark:hover:bg-gray-700/70 hover:ring-2 hover:ring-[#8f8f8f] dark:hover:ring-[#707070] outline-none group rounded-lg px-3 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] flex items-center w-full">
-                                    <img height={52} width={52} draggable={false} class="[transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] group-hover:scale-105 group-hover:shadow-lg group-hover:shadow-gray-900 select-none rounded-lg aspect-square w-[80px]" src={game.image} alt={game.name} />
-                                    <div class="w-full h-[100px] overflow-hidden border-b-2 border-gray-400/70 dark:border-gray-700/70 flex group-[:nth-last-child(2)]:border-none flex-col gap-2 justify-center">
-                                        <span class="font-medium tracking-tighter text-gray-700 dark:text-gray-300 max-w-full text-lg font-title truncate leading-none">
-                                            {game.name}
-                                        </span>
-                                        <div class="flex items-center px-2 gap-2 w-full">
-                                            <div
-                                                class="items-center flex"
-                                                style={{
-                                                    "--size": "1.25rem",
-                                                    "--cutout-avatar-percentage-visible": 0.4,
-                                                    "--head-margin-percentage": 0.2
-                                                }}>
-                                                {new Array(3).fill(0).map((_, key) => (
-                                                    <div key={key} class="relative items-start flex ml-[calc(-1*(1-var(--cutout-avatar-percentage-visible)-var(--head-margin-percentage))*var(--size))]">
-                                                        <div
-                                                            class="[&>svg]:size-5"
-                                                            style={{
-                                                                maskSize: "100% 100%",
-                                                                maskRepeat: "no-repeat",
-                                                                maskPosition: "center",
-                                                                maskComposite: "subtract",
-                                                                maskImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.6" cx="1.1" cy="0.5"/></svg>')`
-                                                            }}
-                                                        >
-                                                            <Avatar name={((key + 1) * Math.floor(100 * Math.random())).toString()} />
+                                <Modal.Root key={`find-${key}`} >
+                                    <Modal.Trigger class="gap-3.5 text-left hover:bg-gray-300/70 dark:hover:bg-gray-700/70 hover:ring-2 hover:ring-[#8f8f8f] dark:hover:ring-[#707070] outline-none group rounded-lg px-3 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] flex items-center w-full">
+                                        <img height={52} width={52} draggable={false} class="[transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] group-hover:scale-105 group-hover:shadow-lg group-hover:shadow-gray-900 select-none rounded-lg aspect-square w-[80px]" src={game.image} alt={game.name} />
+                                        <div class={cn("w-full h-[100px] overflow-hidden border-b-2 border-gray-400/70 dark:border-gray-700/70 flex flex-col gap-2 justify-center", key == 2 && "border-none")}>
+                                            <span class="font-medium tracking-tighter text-gray-700 dark:text-gray-300 max-w-full text-lg font-title truncate leading-none">
+                                                {game.name}
+                                            </span>
+                                            <div class="flex items-center px-2 gap-2 w-full">
+                                                <div
+                                                    class="items-center flex"
+                                                    style={{
+                                                        "--size": "1.25rem",
+                                                        "--cutout-avatar-percentage-visible": 0.4,
+                                                        "--head-margin-percentage": 0.2
+                                                    }}>
+                                                    {new Array(3).fill(0).map((_, key) => (
+                                                        <div key={key} class="relative items-start flex ml-[calc(-1*(1-var(--cutout-avatar-percentage-visible)-var(--head-margin-percentage))*var(--size))]">
+                                                            <div
+                                                                class="[&>svg]:size-5"
+                                                                style={{
+                                                                    maskSize: "100% 100%",
+                                                                    maskRepeat: "no-repeat",
+                                                                    maskPosition: "center",
+                                                                    maskComposite: "subtract",
+                                                                    maskImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.6" cx="1.1" cy="0.5"/></svg>')`
+                                                                }}
+                                                            >
+                                                                <Avatar name={((key + 1) * Math.floor(100 * Math.random())).toString()} />
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                    <div class="[&>svg]:size-[--size] ml-[calc(-1*(1-var(--cutout-avatar-percentage-visible)-var(--head-margin-percentage))*var(--size))] relative flex items-center justify-center">
+                                                        <Avatar name={(key * Math.floor(100 * Math.random())).toString()} />
+                                                    </div>
+                                                </div>
+                                                <p class="font-normal text-gray-600 dark:text-gray-400 text-sm w-full truncate">{`${Math.floor(Math.random() * 100)} people are currently playing this game`}</p>
+                                            </div>
+                                        </div>
+                                    </Modal.Trigger>
+                                    <Modal.Panel class="modal-sheet [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] dark:backdrop:bg-[#0009] backdrop:bg-[#b3b5b799] backdrop:backdrop-grayscale-[.3] rounded-xl border dark:border-[#343434] border-[#e2e2e2] right-2 top-0  mr-2 mt-2
+                                        dark:[box-shadow:0_0_0_1px_rgba(255,255,255,0.08),_0_3.3px_2.7px_rgba(0,0,0,.1),0_8.3px_6.9px_rgba(0,0,0,.13),0_17px_14.2px_rgba(0,0,0,.17),0_35px_29.2px_rgba(0,0,0,.22),0px_-4px_4px_0px_rgba(0,0,0,.04)_inset] dark:bg-[#222b] 
+                                        [box-shadow:0_0_0_1px_rgba(19,21,23,0.08),_0_3.3px_2.7px_rgba(0,0,0,.03),0_8.3px_6.9px_rgba(0,0,0,.04),0_17px_14.2px_rgba(0,0,0,.05),0_35px_29.2px_rgba(0,0,0,.06),0px_-4px_4px_0px_rgba(0,0,0,.07)_inset] bg-[#fffd] 
+                                        backdrop-blur-lg">
+                                        <div class=" min-h-[calc(100dvh-1rem)] h-[calc(100dvh-1rem)] w-[550px] relative " >
+                                            <div class="sticky top-0 w-full z-10 backdrop-blur-lg dark:bg-[rgba(19,21,23,0.48)] dark:border-white/[.08] border-b py-2 px-3 min-h-12 gap-3 flex justify-between items-center" >
+                                                <Modal.Close class="dark:text-white/[.64] text-[rgba(19,21,23,0.64)] [&>svg]:size-5 [&>svg]:scale-[1.2] hover:text-white dark:hover:text-[rgb(19,21,23)] py-1.5 px-2.5 rounded-lg transition-all duration-200 hover:bg-[rgba(19,21,23,0.64)] dark:hover:bg-white/[.64]">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" /><path fill="currentColor" d="M6.293 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L10.586 12L6.293 7.707a1 1 0 0 1 0-1.414m6 0a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L16.586 12l-4.293-4.293a1 1 0 0 1 0-1.414" /></g></svg>
+                                                </Modal.Close>
+                                                <div class="gap-2 flex justify-between flex-1 items-center ">
+                                                    <div class="w-full flex items-center gap-2">
+                                                        <button class="dark:text-white/[.64] dark:bg-white/[.08] text-[rgba(19,21,23,0.64)] bg-[rgba(19,21,23,0.04)] font-medium py-1.5 px-2.5 rounded-lg flex items-center gap-1 transition-all duration-200 [&>svg]:size-5 text-sm hover:text-white dark:hover:text-[rgb(19,21,23)] hover:bg-[rgba(19,21,23,0.64)] dark:hover:bg-white/[.64]">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><path d="M14 7c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C12.398 4 11.932 4 11 4H8c-1.886 0-2.828 0-3.414.586S4 6.114 4 8v3c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083C5.602 14 6.068 14 7 14" /><rect width="10" height="10" x="10" y="10" rx="2" /></g></svg>
+                                                            Copy link
+                                                        </button>
+                                                        <button class="dark:text-white/[.64] dark:bg-white/[.08] text-[rgba(19,21,23,0.64)] bg-[rgba(19,21,23,0.04)] font-medium py-1.5 px-2.5 rounded-lg flex items-center gap-1 transition-all duration-200 [&>svg]:size-5 text-sm hover:text-white dark:hover:text-[rgb(19,21,23)] hover:bg-[rgba(19,21,23,0.64)] dark:hover:bg-white/[.64]">
+                                                            Game page
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9" /></svg>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="p-4 pt-0 gap-6 flex flex-col text-white" >
+                                                <div class="m-4 mb-2 relative flex items-center justify-center" >
+                                                    <img src={game.image} height={280} width={280} class="rounded-xl bg-white/[.08] aspect-square size-[280px]" />
+                                                </div>
+                                                <div class="flex gap-2 flex-col dark:text-white text-black" >
+                                                    <h1 class="text-3xl font-title font-bold tracking-tight leading-none" >{game.name}</h1>
+                                                    <p class="dark:text-gray-400 text-gray-600 [display:-webkit-box] max-w-full overflow-hidden [-webkit-line-clamp:3] [-webkit-box-orient:vertical]" >
+                                                        A short handcrafted pixel art platformer that follows Sheepy, an abandoned plushy brought to life. Sheepy: A Short Adventure is the first short game from MrSuicideSheep.
+                                                    </p>
+                                                    <div class="gap-y-1 gap-x-2 flex-wrap flex " >
+                                                        <button class="[&>svg]:size-[14px] cursor-pointer hover:border-primary-500 hover:text-primary-500 border-2 border-[rgba(19,21,23,0.08)] dark:border-white/[.16] items-center inline-flex py-1 px-2 rounded-[100px] gap-0.5 text-[rgba(19,21,23,0.36)] dark:text-[hsla(0,0%,100%,.5)] text-[0.875rem] font-medium transition-all duration-200" >
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.238 2.634a.75.75 0 1 0-1.476-.268L5.283 5H3a.75.75 0 1 0 0 1.5h2.01l-.545 3H2A.75.75 0 1 0 2 11h2.192l-.43 2.366a.75.75 0 1 0 1.476.268L5.717 11h3.475l-.43 2.366a.75.75 0 1 0 1.476.268L10.717 11H13a.75.75 0 0 0 0-1.5h-2.01l.545-3H14A.75.75 0 0 0 14 5h-2.192l.43-2.366a.75.75 0 1 0-1.476-.268L10.283 5H6.808zM9.465 9.5l.545-3H6.535l-.545 3z" clip-rule="evenodd" /></svg>
+                                                            Adventure
+                                                        </button>
+                                                        <button class="[&>svg]:size-[14px] cursor-pointer hover:border-primary-500 hover:text-primary-500 border-2 border-[rgba(19,21,23,0.08)] dark:border-white/[.16] items-center inline-flex py-1 px-2 rounded-[100px] gap-0.5 text-[rgba(19,21,23,0.36)] dark:text-[hsla(0,0%,100%,.5)] text-[0.875rem] font-medium transition-all duration-200" >
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.238 2.634a.75.75 0 1 0-1.476-.268L5.283 5H3a.75.75 0 1 0 0 1.5h2.01l-.545 3H2A.75.75 0 1 0 2 11h2.192l-.43 2.366a.75.75 0 1 0 1.476.268L5.717 11h3.475l-.43 2.366a.75.75 0 1 0 1.476.268L10.717 11H13a.75.75 0 0 0 0-1.5h-2.01l.545-3H14A.75.75 0 0 0 14 5h-2.192l.43-2.366a.75.75 0 1 0-1.476-.268L10.283 5H6.808zM9.465 9.5l.545-3H6.535l-.545 3z" clip-rule="evenodd" /></svg>
+                                                            Free to play
+                                                        </button>
+                                                        <button class="[&>svg]:size-[14px] cursor-pointer hover:border-primary-500 hover:text-primary-500 border-2 border-[rgba(19,21,23,0.08)] dark:border-white/[.16] items-center inline-flex py-1 px-2 rounded-[100px] gap-0.5 text-[rgba(19,21,23,0.36)] dark:text-[hsla(0,0%,100%,.5)] text-[0.875rem] font-medium transition-all duration-200" >
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.238 2.634a.75.75 0 1 0-1.476-.268L5.283 5H3a.75.75 0 1 0 0 1.5h2.01l-.545 3H2A.75.75 0 1 0 2 11h2.192l-.43 2.366a.75.75 0 1 0 1.476.268L5.717 11h3.475l-.43 2.366a.75.75 0 1 0 1.476.268L10.717 11H13a.75.75 0 0 0 0-1.5h-2.01l.545-3H14A.75.75 0 0 0 14 5h-2.192l.43-2.366a.75.75 0 1 0-1.476-.268L10.283 5H6.808zM9.465 9.5l.545-3H6.535l-.545 3z" clip-rule="evenodd" /></svg>
+                                                            Indie
+                                                        </button>
+                                                    </div>
+                                                    <div class="py-3 px-4 overflow-hidden bg-white/[.08] dark:bg-white/[.04] border dark:border-[#343434] border-[#e2e2e2] rounded-xl [box-shadow:0_1px_4px_rgba(0,0,0,.1)] dark:[box-shadow:0_1px_4px_rgba(0,0,0,.15)]" >
+                                                        <div class="dark:bg-white/[.08] bg-[rgba(19,21,23,0.04)] mx-[calc(-1rem+1px)] my-[calc(-0.75rem+1px)] mb-3 py-[calc(0.5rem-1px)] px-[calc(1rem-1px)]" >
+                                                            <p class="text-sm text-[rgba(19,21,23,0.64)]  dark:text-[hsla(0,0%,100%,.79)] font-medium font-title" >Join a Nestri party</p>
+                                                        </div>
+                                                        <div class="gap-3 flex flex-col">
+                                                            <div class=" border-b border-[rgba(19,21,23,0.08)] dark:border-white/[.08] gap-3 flex flex-col  [margin:-0.5rem_-1rem_0.25rem] [padding:0.5rem_1rem_0.75rem] ">
+                                                                <div class="flex gap-3">
+                                                                    <div class="size-7 mt-2 shrink-0 flex items-center justify-center" >
+                                                                        <img alt="ESRN-Teen" width={40} height={40} src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/ratings/b/bf/ESRB-ver2013_T.png?width=325" />
+                                                                    </div>
+                                                                    <div>
+                                                                        <p class="font-medium font-title" >Teen [13+]</p>
+                                                                        <span class="mt-[1px] text-sm leading-none text-[rgba(19,21,23,0.64)] dark:text-[hsla(0,0%,100%,.79)]" >Mild Language, Violence, Blood and Gore, Drug References</span>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class=" mb-1 dark:text-white w-full leading-none -my-1 py-1">
+                                                                <button class="gap-3 outline-none hover:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:hover:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] focus:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:focus:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] font-medium font-title rounded-lg flex h-[calc(2.25rem+2*1px)] flex-col text-white w-full leading-none truncate bg-primary-500 items-center justify-center" >
+                                                                    Join this party
+                                                                </button>
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                ))}
-                                                <div class="[&>svg]:size-[--size] ml-[calc(-1*(1-var(--cutout-avatar-percentage-visible)-var(--head-margin-percentage))*var(--size))] relative flex items-center justify-center">
-                                                    <Avatar name={(key * Math.floor(100 * Math.random())).toString()} />
                                                 </div>
                                             </div>
-                                            <p class="font-normal text-gray-600 dark:text-gray-400 text-sm w-full truncate">{`${Math.floor(Math.random() * 100)} open parties you can join`}</p>
                                         </div>
-                                    </div>
-                                </button>
+                                    </Modal.Panel>
+                                </Modal.Root>
                             ))}
                             <div class="[border:1px_dashed_theme(colors.gray.300)] dark:[border:1px_dashed_theme(colors.gray.800)] [mask-image:linear-gradient(rgb(0,0,0)_0%,_rgb(0,0,0)_calc(100%-120px),_transparent_100%)] bottom-0 top-0 -left-[0.4625rem] absolute" />
                         </ul>
@@ -180,14 +278,66 @@ export default component$(() => {
                             <span>Install a game</span>
                         </button>
                     </div>
-                    <ul class="relative py-3 w-full grid sm:grid-cols-3 grid-cols-2 list-none after:pointer-events-none after:select-none after:w-full after:h-[120px] after:fixed after:z-10 after:backdrop-blur-[1px] after:bg-gradient-to-b after:from-transparent after:to-gray-100 dark:after:to-gray-900 after:[-webkit-mask-image:linear-gradient(to_top,theme(colors.gray.100)_25%,transparent)] dark:after:[-webkit-mask-image:linear-gradient(to_top,theme(colors.gray.900)_25%,transparent)]  after:[-webkit-backdrop-filter:1px] after:left-0 after:-bottom-[1px]">
+                    <ul class="relative py-3 w-full grid sm:grid-cols-3 grid-cols-2 list-none after:pointer-events-none after:select-none after:w-full after:h-[120px] after:fixed after:z-10 after:backdrop-blur-[1px] after:bg-gradient-to-b after:from-transparent after:to-gray-100 dark:after:to-gray-900 after:[-webkit-mask-image:linear-gradient(to_top,theme(colors.gray.100)_25%,transparent)] dark:after:[-webkit-mask-image:linear-gradient(to_top,theme(colors.gray.900)_25%,transparent)] after:left-0 after:-bottom-[1px]">
                         {games.map((game, key) => (
-                            <button class="hover:bg-gray-300/70 dark:hover:bg-gray-700/70 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] px-2 py-2 rounded-[15px] hover:ring-2 hover:ring-[#8f8f8f] dark:hover:ring-[#707070] outline-none size-full group [&_*]:transition-all [&_*]:duration-150 flex flex-col gap-2" key={key}>
-                                <img draggable={false} alt={game.name} class="select-none [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[1.01] group-hover:shadow-lg group-hover:shadow-gray-900 w-full rounded-xl aspect-square" src={game.image} height={90} width={90} />
-                                <div class="flex flex-col px-2 w-full">
-                                    <span class="max-w-full truncate">{game.name}</span>
-                                </div>
-                            </button>
+                            <Modal.Root key={`game-${key}`} >
+                                <Modal.Trigger class="hover:bg-gray-300/70 dark:hover:bg-gray-700/70 [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] px-2 py-2 rounded-[15px] hover:ring-2 hover:ring-[#8f8f8f] dark:hover:ring-[#707070] outline-none size-full group [&_*]:transition-all [&_*]:duration-150 flex flex-col gap-2" key={key}>
+                                    <img draggable={false} alt={game.name} class="select-none [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[1.01] group-hover:shadow-lg group-hover:shadow-gray-900 w-full rounded-xl aspect-square" src={game.image} height={90} width={90} />
+                                    <div class="flex flex-col px-2 w-full">
+                                        <span class="max-w-full truncate">{game.name}</span>
+                                    </div>
+                                </Modal.Trigger>
+                                <Modal.Panel class="dark:backdrop:bg-[#0009] backdrop:bg-[#b3b5b799] backdrop:backdrop-grayscale-[.3] rounded-xl border dark:border-[#343434] border-gray-300/70
+                                            dark:[box-shadow:0_0_0_1px_rgba(255,255,255,0.08),_0_3.3px_2.7px_rgba(0,0,0,.1),0_8.3px_6.9px_rgba(0,0,0,.13),0_17px_14.2px_rgba(0,0,0,.17),0_35px_29.2px_rgba(0,0,0,.22),0px_-4px_4px_0px_rgba(0,0,0,.04)_inset] dark:bg-[rgb(22,22,22)] 
+                                            box-shadow:0_0_0_1px_rgba(19,21,23,0.08),_0_3.3px_2.7px_rgba(0,0,0,.03),0_8.3px_6.9px_rgba(0,0,0,.04),0_17px_14.2px_rgba(0,0,0,.05),0_35px_29.2px_rgba(0,0,0,.06),0px_-4px_4px_0px_rgba(0,0,0,.07)_inset] bg-[#fffd]
+                                            backdrop-blur-lg modal" >
+                                    <div class="flex flex-col min-w-[17rem] relative text-black/70 dark:text-white/70 w-full max-w-[41.8125rem] min-h-[min(90%,100%-3rem)]" >
+                                        <div class="flex-1 relative w-full " >
+                                            <div class="relative w-full pb-[56.25%] overflow-hidden after:z-[2] after:absolute after:inset-0 dark:after:[background:linear-gradient(40deg,rgb(22,22,22)_24.16%,rgba(6,10,23,0)_56.61%),linear-gradient(0deg,rgb(22,22,22)_3.91%,rgba(6,10,23,0)_69.26%)]" >
+                                                <div
+                                                    style={{
+                                                        backgroundImage: `url(https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/${game.id}/library_hero.jpg)`
+                                                    }}
+                                                    class={cn("absolute inset-0 z-[1] [transition:opacity_300ms_ease-in-out] bg-cover bg-[center_top] bg-no-repeat")} />
+                                                <div
+                                                    style={{
+                                                        backgroundImage: `url(${game.image})`
+                                                    }}
+                                                    class={cn("absolute inset-0 -z-[1] bg-cover bg-[center_top] bg-no-repeat blur-[4rem]")} />
+                                                <div
+                                                    style={{
+                                                        backgroundImage: `url(https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/${game.id}/logo.png)`
+                                                    }}
+                                                    class="absolute dark:bottom-0 min-[600px]:left-10 left-4 bg-contain bg-[center_bottom] bg-no-repeat min-[600px]:max-w-[40%] w-full aspect-video z-[3] bottom-[20px] " />
+                                            </div>
+                                            <div class="min-[600px]:p-10 min-[600px]:pt-4 pt-4 px-4 pb-6" >
+                                                <ul class="[&_svg]:-mt-[2px] xl:mb-3 min-[960px]:mb-2 min-[600px]:leading-5 mb-4 leading-[0.625rem] list-none flex w-full" >
+                                                    <li class="mr-2 flex gap-0.5 [&>svg]:size-[14px] items-center justify-center text-sm dark:bg-[rgb(65,65,65)] bg-[rgb(171,171,171)] px-2 py-1 w-max rounded-md" >
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.238 2.634a.75.75 0 1 0-1.476-.268L5.283 5H3a.75.75 0 1 0 0 1.5h2.01l-.545 3H2A.75.75 0 1 0 2 11h2.192l-.43 2.366a.75.75 0 1 0 1.476.268L5.717 11h3.475l-.43 2.366a.75.75 0 1 0 1.476.268L10.717 11H13a.75.75 0 0 0 0-1.5h-2.01l.545-3H14A.75.75 0 0 0 14 5h-2.192l.43-2.366a.75.75 0 1 0-1.476-.268L10.283 5H6.808zM9.465 9.5l.545-3H6.535l-.545 3z" clip-rule="evenodd" /></svg>
+                                                        Shooter
+                                                    </li>
+                                                    <li class="mr-2 flex gap-0.5 [&>svg]:size-[14px] items-center  justify-center text-sm dark:bg-[rgb(65,65,65)] bg-[rgb(171,171,171)] px-2 py-1 w-max rounded-md" >
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.238 2.634a.75.75 0 1 0-1.476-.268L5.283 5H3a.75.75 0 1 0 0 1.5h2.01l-.545 3H2A.75.75 0 1 0 2 11h2.192l-.43 2.366a.75.75 0 1 0 1.476.268L5.717 11h3.475l-.43 2.366a.75.75 0 1 0 1.476.268L10.717 11H13a.75.75 0 0 0 0-1.5h-2.01l.545-3H14A.75.75 0 0 0 14 5h-2.192l.43-2.366a.75.75 0 1 0-1.476-.268L10.283 5H6.808zM9.465 9.5l.545-3H6.535l-.545 3z" clip-rule="evenodd" /></svg>
+                                                        Action
+                                                    </li>
+                                                    <li class="mr-2 flex gap-0.5 [&>svg]:size-[14px] items-center justify-center text-sm dark:bg-[rgb(65,65,65)] bg-[rgb(171,171,171)] px-2 py-1 w-max rounded-md" >
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.238 2.634a.75.75 0 1 0-1.476-.268L5.283 5H3a.75.75 0 1 0 0 1.5h2.01l-.545 3H2A.75.75 0 1 0 2 11h2.192l-.43 2.366a.75.75 0 1 0 1.476.268L5.717 11h3.475l-.43 2.366a.75.75 0 1 0 1.476.268L10.717 11H13a.75.75 0 0 0 0-1.5h-2.01l.545-3H14A.75.75 0 0 0 14 5h-2.192l.43-2.366a.75.75 0 1 0-1.476-.268L10.283 5H6.808zM9.465 9.5l.545-3H6.535l-.545 3z" clip-rule="evenodd" /></svg>
+                                                        Free to play
+                                                    </li>
+                                                </ul>
+                                                <p class="text-black/90 dark:text-white/90 tracking-tight" >
+                                                    Delta Force is a first-person shooter which offers players both a single player campaign based on the movie Black Hawk Down, but also large-scale PvP multiplayer action. The game was formerly known as Delta Force: Hawk Ops.
+                                                </p>
+                                                <div class="sm:pt-10 sm:block hidden" >
+                                                    <button class="gap-3 outline-none hover:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:hover:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] focus:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:focus:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)] font-medium font-title rounded-lg flex h-[calc(2.25rem+2*1px)] flex-col text-white w-full leading-none truncate bg-primary-500 items-center justify-center" >
+                                                        Play Now
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </Modal.Panel>
+                            </Modal.Root>
                         ))}
                     </ul>
                 </div>
diff --git a/bun.lockb b/bun.lockb
index 03b35ccef7e191e65b3b2f18fe48fde16eae5b34..f07d1f0ad8947fe30338a9f99eb580f7c02324f2 100755
GIT binary patch
delta 19223
zcmeI4d0bWH_W$?Za5!vcZ~_4ZoCi=u1;ZgVGjnb*r!sP+#Mw&Ci(_bIX+%piQ#4a6
zQ%VJ|nqqm?3daV~Ovrf_r!=SE=X1_F>G%G+zt{Kw-+f-M#aipV)?WMB&))ml`|N!<
zH@=TwzB_()LY)&kvc8%>xLUxmpHiRB*w|=o*G@f`bzfI@r^K3EczEa8%<#ef23yda
zXR2B~ZsxsuAj#3j+cL^!cW%5SuC<?Kgc!!8cc6oz$Bs=O!0e2%W75W?zdW$1Uv^lN
zrkOQ0?btrkD2KH5&=sH$2D%q(5aiaQhop@ffyF0>SVnoohe9*24|FK>*id&~TlnGd
z*9Kcg40Ij%m7%lY$3a(s&*fi%A7vPslkUN&2+#|<3iN69Q`P?onhR8g#sZTp=xFGp
z=vY<gUC``EK6EAM{=<h3ABB#Nsbm=e@V7t*L6^N~8W^uhd$3`C(A%K>jZE|;!d)nE
zs%ZowkO7|wGb>w01oV@U?iKEXW(S{-a&Pg*aJPO6K3CKXac*f9=t$_YX!i(QM;@2E
zjd~n`3DE3NK~-#6CX7#Dgh3C9aTk~cpDXUK9VzfNT`TAYpSvgpnnT<>&OPL-pvh}!
z{NMR=)!ZE_k2rT#+UPN((uWN;O3|?(4qXup4)KV<>?e|&W^S$J9)M}k#QmXTp}RqI
zJ&$8_IZ&QMrXGCO9a4uQYD|i{>h}A>=fJ$2HZ=W(;bV+jbuHI&0|yNn*nf;+Y^vv8
zk9U2`u#uNG>ZLK`Mhwg}-U48usTwH8g50$mpt+*u(Co+@<>OTkfaampS^ZRK4s8FS
z!-ow-C-*e4jB4<+8oCE=MB1n^<6cT1^A%zo@VG>FF#GkCha%dc?>q=H8oT@UeS5>z
zrM$0-Q;sD0j&zLcm{#`lM^g)i<`)b#W0p9c#);P@J9>Poy$%+JXp)f~J2BZZ98x*N
zYH7E0SjHouR(9IBWP1v{F7V9k+-b@78F(r1ys~4LCEIa6mhq5l`P|XTR$m|K9g5}G
zfi`q4k0s0#QXFcvawIq{<2gATYNa~fg87u&EP?r`%d~6yTE@e!rAo7s9fRQYaOZ5i
zZ-&{H(alX?fT>F^huPZIi_$U4=4t6w-paJP`^mxbR!hf6ewNW(4wtu5?UOLsFFQMS
zQnFpi-@PSfcG}cryDPkwh<Rt{&Q3OGNkm1fm0bjw2<R_qXUr7e0MBNn%}ll*g4YBw
zOVVP@WNUbURIY?={}i|pFvjP#Wcycmt>Bf<E`2@Oj>KuqEyQSloor{qdla6T9eX6%
zKCPZJyEHS|ZixwkF=uw#$0<@Aj`7REWYkFxhhzLoVRmtw4KS5q6hQ51Fu4WTPot9^
zTj61h8K@X$8U5XX@yU*H@Orufdtna#E09vovjTe>%svd{#9Arda4_bq)S$d&^!sap
zx8Z5vxBn4nQQ@yjGhw<aW#^7hwvWMk*0a3bx}s&Ic|6Brc)C%SU_RkqV;jtf98T|S
z>{@#gJPx2KX?@IOdly_Drv~?#9fp~K+mF#*m~3~0*A$*5xyO+Dy1HJHI}m#kv&$d`
zvvH`|x8b#g=g$Md(F#*u^X%wJsrF)6y}`X)StBr2zToj3m*5S^UVu|*B&JlJLathl
z4e;7#M`xwlcVRUHN6%*@+sT+<`+BnMY<SOkYT2PxEMtf(#=~+Pya9j34#OMzm)8Na
zEjQTRqaWaP`)j!<%*dVGF^u#ScwC>u)%V}vaZB9Wn-YsHbY=3u9|MnL>gC!)YvA!@
zcV}90I96O9kN9+W?gN%vv=tsR4cDFt!Msh+%XKo1gU3w73X<*38pCeF1QJ;N!EJvD
z-e03<Z-K|1hErlqvV9%i6Rat@Vy1Z4z}99zJ2llY7uKWM(MMA4-(Wq442Ns2HETZT
z4THyRc4WtnPxjpbk6S6FmwXy#&mQS(`PP!kb*z7wKghf~IMuysduGDYv&mNH+ETf$
z)zVxoz3N(-<_*ELo@tN9MC(4o(ncrSdGOeEAJ@R$g6BTBbLS^pzV)PXear^!aM|FY
z6_6eKezH9S9;XZpbxyLq9bOB168i^^(7^icsnmztVzsX?z2i|plp0bRh@`!6IY4gL
za>h&L1avb~dL>{R3gg`afHPoOvV=FV0<w>-XzZAnz>$kynQ9lq(y1I9Pz#qB_wmEC
zU>ZCgKkhw$1s=~kc;BS>;u^$5AJgC)=*0VQIq5s46z7r@H?&$=sfkiK5&fNw%TgP}
z49UHM^9&v*W^7`jm26jS<lbV_?e>N1nwQ+}X1K2D!0pB)>0IM>GvT_X4!8R&T-Utf
zc9U`Ga~(Jm+s{l6eHm^l)@vGuL8+JBePk`}b@QK6oMg2!uS!H?^tyJF{N9Z%t8r#^
zB)t>lPM!^I!G9OJBJ^@-Hfk1Iq5gx~8+@g5YA5_P(707FHbJxAW{p#`&KBicgD{!_
z0J{Kupnp_-5Sope1%8G0g+2z&0>{avbGlV2lkO?FY=5U2Kdte<)9n9w#M$5L&|c6t
zHJ_T}5R5x>wg)xqh6JN`ro=C{+Dp`nmM?A-u>g`8tfUM5on|~-^CF<RjghLOl~;jg
zdr;%{%4nkTrqB-fsnA@$MKErYIY{jQxHVm%>G#ltp3q!zFV($O_ks2U9|+C-3}`lL
z`eUKFqVdq&Nt2*)V`<ES=8E4@o)e7i=kU!1;ELu!vr*Gru6%`Z>Jaet%KxdHn#*s1
zX1%YKQ*(E1Rsa9eng1yO&Mnxk`UlN>P;-Sv${*BR;a+f#=s{@a9nw5%nrD=Y?@%kC
z88gl)InOW}HOK0r@=MC8nO{a<S`4)sWHRlJhN(FMu3=KmUEsrE`!~(=C=8q%T1n&o
z8_m^+BcJQ79D>h01d#yLQTb&<t^G;=oh2|9|D7fNJ4^7KcyM-r>+=6UpCz(-EwvzC
z`Ms8U2Rzhi*mIwJJaPZISwB{aTousn`|S;WD(Krf`~5?^=A~WuX~)@}s~gP>Ogo%$
zeMw=JUYEN%50=cCay04YFN>Q@e?7kKt#cn^luhGq@LlK$((8!#GvZs~9VnZQcy}}>
zid_OwK#)-akSXg4hLi$CmjX<d^iqKE-vNpUrb@)`06PdK{thr*b`rdL6d?X6K$eU<
z3Q+qPz+r-!Qs)@J0fJe_0N#{hf*HpFS{w(MB{Po$q@3^$kbooJoy>Qn*$IGCCy=q=
z1TyBxX@a>Y0Xm-q$d-900UkRAaEBmAI-CNyL9p@^fXGdP<);CjJq<8VR-6Xtc?KZx
z48VNpbq2uqEWjp$1!A8CC?Lo<3$Reu1DJ~>^c+;Kq*E=HLaHSaaURJ#&Ler^c_c5D
zodmC50EoW;uuR5X0H}Qt;4r}osdEwF0Ku$_0G~-Q!Hi1)EiM79l$n<RQpy0%6ReVE
zWmws2nM0K)r>VY_)|a8al6g?_*cBw-xs2qs(%}lg4T6<d0P^J~!SbsB&t3&sFDtGB
z^t=WTcnx5K^tuM%dmUgC!6vb<0~8QsTnE@J>j{SZ0TBHMK%u1n0T6xzporibiMRo<
zgJ9wffNipq;MJP|@izgs%eb2Wwf_V-Ot4ex{0VS?VAh`i-%ByUj9UOLZUGd@%v%5{
zw*k%*?3QM?0ZtJtxDBvZP7}<%1JL;nz<!x`2jH>00Cxy}k`8wPZV;@z3-F8FBv^hA
z;Mscs#j@g__cJ*?9f3K4j*jM`oL&wLh6#5Q+{0p<@C)Eeh6!*)))Ne|903w#IXao8
zV)B#<_d-UIg^Z&T;f0JH1QWdgj>}GhSG}=_>)1Xi<GcZCJ3QdD)NueDa5#eGZHMD=
z^Q;sT%<w^t7CxwPUS|3Lq&NZ26I_&LPJmMc3!DIDa++YSFF<EsfGaZ37vM1);10nx
z>0krgAXsSw{2@09miqxb>j!XCR`>z*^alv^2e>7@`~iFe05%ca5jy~&fFL6P;GV1}
z7!n8&%>gteJrE!~2%w0-OCo|C&zRmalFA`FseB|h7|JQ*sC;EFRA-x?cC>kyJNwb8
z{ZR`iKjZ)YH;;7gal68gJ&KxSWykM-G3&}bXL#MjYbz46w$4g<X2hnC!>%<f={jK0
zlW{#Olz-7{WyQ74P8^h?5Jz~YKAo(!-R}-J(=RM2o>G+T_xU411Ixm0e$s9CHt*#X
z<L*6qIpCwkhjzU6`u1HV`$iT`{Up45(}TCBy}Px2_PM1~ZhrQ_-03gHA=t1Pq1dn%
zq1dp%{F$MSvy-!*A6Z^5J>u}re>L0jx#>8Fhl7DKvYDf;MCCYqBR1mMA0OcIj&STy
z_xp&uU;+7i2RhDr<(FhRqRe;4mA5^QsMqG_ec<r-GWTR{THwgvw7{oR8wsiBNX!pd
z=r|gjf9|4BhOgh;o4j*1jEynU|AtTV=)3pajcgHaT6t-uuq~3p8$RVSa~1Ozm{(Y~
z#b6$vx4LXgVQ^2-cdx`SK8M3{^ncRZ>6OZuJ5)d8eW8q>bVey#<z_*yoBlBhS4-MW
zpK>ko5aass<lC5}p*32Ax8T#1tyRWPN^dAzCwVN9uOarTl*^zMDC3R$DKKvCdN6h$
z`@%S_Y_phuqQtkFj_2#fRV}ei8D0h$*OdJWjJ?JC1LL@k?oR2>65k`lweU0LNe%7R
z5_oT6oKm(&86LeGXTabZdnK184#K7z3E}Gnwj-L3mq136ix@_UGQ1GtvkF%$l`@pb
z{9Qv;0rf+RaTJW5j)CwKKidh-i-qm^RC7{U9GIyKpVDQkfmzDVYF>4)om%gln*|v)
z0P_@{mpQkvSr;_F7DDUv48N$XHdp}|Z-p-@s{?zB=9Nh)OI${Xo4`@ot)Xk0ULULz
z4htSZ*EKI5wm%O+w40K68zuhK^aenI8oH&dAy|mA+sg2?-l(MPj!b5WyBgwtsE2Lj
zc-#ZyiQO0yugt_zMusPJMuIXg*~=2%2=PEjh6E$TW6_}uFGGxS%6!1M!FcX#d=EPe
z+LqWmDB-8+cr0c7iQ|&Tr#~2<tl(j+aZgz+7<+*ygT_vN+(xS=BUz%lmS_d^gNAB=
zag7f{ij>s`!}jsXo3UG2ycDuTf`-~6^aX6TBxr8jBal30jg_?n`%+mG3B8LFO*PaW
zp^X|!hGwT9gKSdPOj!r8ua%`r8cQ^X%Qbd{e50Wjn%)U4LOb0`^E!i7R`#&uu|#W4
z?}|{AhT1CY23AE`J1x;2tg5m{#k_|S9T4KF|0E<1A?}IJU>v%qAk{Se2`%w7Sar>N
zQo6H5PlUML&p=E)>UwKBo|_vz^`P&gtQS~sFwP=<C6^`oX$TK9jSLMvuM7|HjSCzo
zv@|fT3eP|dek7<2-CxRBV!WpJ1H#)mSDT>e&%?tzC|8>Z#tx-H@H)iRrscGDmTNIx
zv-^YLvA(NiY1IMn@F3pRW@z3(cz9pwYH#GsL4|iTdob8`?ec78L%_aMHb+@H7_ZWt
zG~dlBMTPe?@)F295Vjm;LutE+VZ5&_1O5VKB8jH6T;^O24F|@Pc~_gKYy><$;9>hf
z*+|$CV6o8im5qY!4;BagAsCN_(U1ULHdph;Fb~0M(2Kz^u$jhKIJbiF2W^EWz6`sL
zvQL%00v5_+5A8E$ufh&f_PMfgV0;|Qwi1j(J|0p4Rs(vK=1qWo$k_lp1;%QHufZ-s
zx5#*2a}P{}><8nF{H2VvFz#Pz2#+m|?wFA4L$3kjtTG8wTaW8}&6^BXS6P7+vc!4~
zO+~04mqYufvT3jf=_YJYHXW=J7-!^-66%E#n>CaL)E*&D%v-=%Z3d(w7-w2e7aWC|
zkO*blB#kBhr6t}(s2H;;XVC3h;w{*F!SMFR_)gg@*!#fPiX@LEc4>)sfHwHMBF1ho
zu5mUboEJQ_y_z=%c9gPxVtS**eofCtC<Y-;);}qG4|bfgU$g`d>uOr!fOKbxVhssG
zJ227@LmyN&7xrFdhm_3&`&}oiUnQ3%4kN@)&xdgBZJ>{6`iHQ&C|QXzo=9zQT(IGu
zge890&_bY8?1pyGN5Po22+|zJqtItGFBf(TEpb*_J5b^rLfnB%Ak`7-0DV!@KZbo7
zHrpj=9{Ecl*OXnAIV^D<t^;@(ggdh%^ett}VHaS#d3j*Bcz~~ftOM%;ZAvLicxmV}
zprr_Ph4xnVIqVEDHU}8TY$as4GN&Z^poFicuR^FNLcE&rQx7+8HKdoa0L{w->!T$C
zWim?yY3M72o<ImMHjQ8{u?BV`*ptv<nzt5q6J_OOFH2NFh(+@ubzwXWT?LGtE`Zcm
z7NcxESiG`0iFKkxHLbn@p?f%t*tlmnbQ>YwNbdn%L)j+S{WPzpjAV&g2yweNLsr1<
z30+syx4>QuyBBmlWreU`!yfAgU0(`Wq5(qO-`_yGa_^!gfpJ5=g>+NaL`!S~>#nS+
zg!-aHvWB)J^b|tRL#KeTXFDKIYkI2Y?F8$gthuDI#KRi;9-#qRqBU40_&-20G@Tc5
zj!zL}oU&e$#}a)JVyAaQW@?G&G<^?P4Y2;u{lM6>y^xw(;sr5nl<1ET2Hn^X`GvL6
zhH8l)VXsxjdjt03C&+qb!=yV)3`dBa{spodp@Gn^Yx)7$do(=@jAk)pud<nv%Mx#D
z`XPjV;A+s`QuZtC&%x56XDK@jd$#7iEoCh6j#fW{&}|6Y9Azc29h#o4B}&0~kh8rf
zt^H6UM?*(}W@!5R%8r3`0~-o0%8tYCu6c814ol3_&`E?QB9sCBfwEJu$3fWUD?1IF
zbH#AThf<0XnF};@7N`~W+8F4Ml%0d!PT4|b=fUm;;~@d`B4rm~F9qYpKUdjB*tKxj
zzXHvZgnQr;q!>2a$L_o!qYTdTfrjx9=%q5*ADi`w*0=)H2cb;pWy-F?-VT`zS+49F
zY##D#D`YQAe5#>8fOs{X4*i+38?bpbCHq|2P0h=KUMaBwDDj1cZUMz1oo$se?(%T-
z><#GE%I?4p24l;Uku33*hVB9F@OMRwHOhE=7b#n-%mmx5Y@HOc1V4CUJ~6xyy3T0?
z?Q2c<1}ntXbPm{NWjyd6(JSm02@OPvLJc_)G7-u_`c`H50;6GR`ZvmKup^iT-$&lJ
zlExC-G~|yEkCKH5{YzN@7>^RN?aBg~2Rj#Rhvc!uP7MVk<b=)k9W<6SLcn;{VJm{>
z!4eAQr);;FK`60DL*)<()X+X?4oi73UUfc({WCONqXPbfDEmdav%~=nRYK@ZEVmSC
zJS3SOjz4cHI|#<I5n!`vp#3JfEK!0GI~a-3W)1zWC8EH12l5HxN0mi`@eYLSn3S=^
zaSc_~&@zNhD2oAm9CPFfu#?JS!8$5CC9Q)|;+%%6A@mP~*v^BoXVtaDD%ck_uZET&
zyCid1;<AQnX^0o=D`4EF+F+?D%Q@>0&8q{(&vWa*Zb&Ih+|p1zgfcXATUmWAn~(H6
zVC-2u*dr**3-~=r3_%Hg-+-Y82!$ZTi?sy?*Jy}8>tM5aDN6*)SLQ8~S;C>AB!mWN
z$OoEb8-op0=Bs&4zy`to8gX0pvIHN*@JLKXXo#i<X?hCNu>-dv9;}RS{D&wDk=Rg_
z2t|l%OhxDggua1YPFZuX=fS=Os{qDTwE*i4wheZ;jAV&O4Yfk38$xVVz~CAW<4-u)
zPS{nIwFZmOycj8DiC7J_MTid_d2NqV_6QiCeHMXLQ`Qb_9lEm%th$7Tp+qf&cnq{h
zC<W=fj@JWYrym1ri>=%TJ3&iy0PCo%fuylSLk)FAsI!I=!8kshz`7|*Qq~!)yRs&d
z#}dsD!r@?aMd&nFjn+oX^3wPP7_awjmGRQp1&r7GN5m|L5|3)=Nv1=1ZEvsaDfpM+
z{|0$X+0$U0c8-8`knSw;xQ3nq=KNWLP)B7w;rD|a2kWG)7yO4HY@H>SCAw&+4{#m5
zK6F*q7i<QuoNV2cJqz}e8yVfDj3u7Z5ZAUj0FOivep=b{V8ys*SkOJdIK*kN59)QK
zr?f7Q61@<rh){ooj%jGPrVju+p(RFwakK}5omMtR=CH)82!R@d@yA5S2YQ^cA+XPJ
zccG0}mJW7a*#s$NiGOJ5C4>rajPYWSscb0h7|avA7)(-@0lN|y+hj?sfD%(QG#sI2
zC=mudRoMvGxnR6NOj9-z_F`qzWim^=uA$Kgy@v7P#UKleLpKKYKp4Cj%+$QGuwPX6
zhU{gDH#PkggtAec*NIumUWNUhvUjw^IIwTQDnrkf*or8TqoD~vI}l=fU)gJ5TfumZ
z5ip#Et{c2$3@0xJAIeCUSfJ^dK(i2vgZ@a_B-oR|c!5|5#*Lc{dy4LnTq$IU#hN}9
zAy((bV2QG6uz3+6`&ij@*e#VUmC#Bk@rj1A5Ml{V{L7ThfXxzQ%azSkmH@p%(pchC
z4ZR7J4V&#VWp9DK2b;6|=gMZmep&NYN*+smp`mvW;zLZfRmx_AMS*d?T&-*l>=@0<
z6EhqozSK}QLN__&XkRIN4~#Dr*w!e^0SiQlHqdLOJ4^6t1<w%tc@jg;iH%n)vbp&4
zl(GUao@VpFIG=Wb-XOUwu~F0K19j5SCS@OjaXw}G*I+P>1+Y1vl5LSPme`6AkEn$}
zXR#X2q5lHo8W+L7NCR!Bmdypbr0hFs9f1<xYiJ2VH#PKwvX8+`Jz|TLEd_HZ+a+^Y
zVz-8tAv6rawny1=_%A?uK=_1*;T8DvFb%YQQpythHS`%UN4YoTM`fSGZVO@iN!d#H
z{9wpA^k+$|j1s?SXcZ7Y@G*2i*=pEfm`~H7i^0MX&x3sxvs-`YGMUU0S2X=Apz{cE
zZoH~&4eUEOz&Qb4Q??d%85k$P>#~<6{?Jf9(B~K?{L7PZ1B@eE06P+s94EV5nztVI
z0PIxGCATFu5+!&wglBBPAI?UcQcPtVVZWrz0)uI60^5yMjfcj2ZI-YR;xW7#h?5+r
znIJ8(1vbl)1uH9r&9Y=6Qpgfv8u|ukI&8Lb%Dx3#iVfgdTwd8W*t~G?jIAJ{Q7BPS
zL)(E;^bD+|YzNpKbdjfEI2gxgC+yzn1<#*INn?p<P5&N<r_@K#d<nwzA2gi@e=Hcn
zMiK0EjKw18YLdqiH8r#wXb?g?2Wo4HJ+S+NvDE{EYwX3J9$<^1>x&tU5)CwcKTs+{
zJTDq4`;lp2JTLfUi#_`Z_HYPWigag*W?KCh;EoWU0}m-X0Gns-rx4DeP)0HSbcXPR
zXfC-d(LzIqfJS0Czl7!t4Q2d_KdaFT9(Jvi9fqB!>|rTmiPjoAf)I}Z9(`?;mB8k)
z!o#VpvQo_>dqi4SL5X$<aiouG`q$9yHT{^TlRc*FIBXtTWF2G<OYjp8hv_5`_cwQL
z7cF~A8FyqiWv5{`#D?sGenLuF;wcTC1$qu4?#Lcm_8e@M<&NYdO!oG?GW=_$(MJ-i
zqQtWrx~L)U$bQN$!5$6aj!XlCGRp9$Jq@%MWHL%T)L%nafVoC?bbyw)s*F7xr0f)L
zd(dV)D!ZyWdrQL@XL$VYc;s*t@*{2!`DKQmA-_NlK#C#!V)G8jPRMtX5#!7>-;&cY
z&Wly}m3Y2GcfB(YK`$YEFYX0#gvi}kXIzJ)Sn3$$1cYC4?uC4Q+4TbCBIFX}GUO`c
z4CG13Q;?@2{D%G^$Qksyo217%tA_Fw`*)C)kS`#4GAGWt#9Wczq?$9+%favNhs*k!
z&VD9d5ZA&ehoCQ^kN}+Pfe^k&x((r%rY}IwLaIVyAaRgtkm`^c5ImZ#<*Za89%cfh
zAtVvf2$Cc@wVc&#zD4>2awEU6mNUz{0>4wuuV=rECmkE1KZkrF1M54hM(4vUfCwZN
z(j2k^X`ez;WL|w|JqQ0K;7{3G-`U;~h-grLg?Q&euNLpYo(AFl`%K6i5Pq$_735(^
zYe*Z&8dUlS5{u)p3ZybvaDG`s=LE07;jl+R`aq)c$2E42HXTpEj+U|}&IzIWV15so
zjvmZ{ye$)(V)MK)aM$3TmK9B%k>+gK*3`K<`UD8y@A*RfAbhXKcXs@bjDq~!Wan2_
z6@JGXU-))?X}lbCc}N9FMM$GSc{$Zt#lfe0OY?Icavt(Bm*<ac>5OvPkGc=g+F3k6
zYX-iJY33B<1f(>7TRUgJq)@&-EP<T-i#HkPO!CR}aK4cF4Z@c-ze46iScjjiXF<F%
zG;cxkqcdOs&V)>b^u-CpPuf!;S1~<QhAu?zWavqdw{aq6Li4k6dB{H?BM_eeZF}Q0
z&v+R707Bis;EUnc<XWb4bl~eS`8JqudZ)>q@y@E5d=c!yT&k-2v^|{neHMJ?ZbO&e
zguV>@2DGQ#M)+KYn@}G%bD1{{;)$`|6~tVtck@iwLSwOlQUpE#<SSi)@J(<Igl~?s
zA$$kTch2uZ=0M2#N|>9;$4!GF9DBa5EP&iXP5hg%5eEArIyN5l7r^G%Q5M5q2>T<S
zB=_skcz}kOk@&jwOGqAsZ(8{Zmak^{8ketpmqC`w%E`{i%*8PIx_A*}3FHl|V<|LK
zn94=CC`+&uOY(v7T4+8bUI)#$uH5!Q=s&SM`+X2{6*k`!{tLoaiDQt%SC4xjyCFqB
z*v}hb1Y=`1Kyza+V4;7?*eT9h(K~=PLE^EV1K70fu)l?T1NmCkPjN=}+6?nIEK$m(
zU|)jX3eE2P3Y%Tn@<0yb>?UK(aqTkLo@JQN?rxL#sm^L0{;oV1VcIsNMWW*+upi6|
z0s8?lzQWxJiHBb(=chU=;k&JQQ=PRcd=GjEOR+QT$Qg($qpG<}0;gfGunU|79<1X7
z-vQZ+m@hP!-Uplg@r*p@W%li7@c&nhAGL;wd_MT})HnbeJHgLY&@~p4hyHXw4t@-B
z6!JTSrwDBxu{?4;M=d!Y@p6XXyT^Obe8KuM<SgVggzsW+NyK!VwPi3bKo~v`VXEgu
z;a3hX!oLK$0=cZ(Q;vCD&f{N$?Wx7OjNO6UhTMhl#QYg25^s_$bS;}d9$<2Uge(Hg
zLIR5p#5VkaaXElwFF8Ej8QF*rx%u$h2f{b7d^5|3+yM}O$ZJ^icU0<`1qZER-K@H=
zJM-(l?)%*Ma;{&Hz@+E-7kB&*r`-9?w^GhryShy2>l@~~#M}Mv_iH!WQ!I0jwDPi_
zHW%gRc-cq1t(t!FvakI?R8v3q|M2Hk8TIObuP=72Z9dmHp;1C3T(SJ5zHNu&Ywhi9
zJG*Kh{F635?cm1;-2aqc(qhY*mhV5c#xe(i_(|1RI~m`hZs2D}U|k*j?D^(FIqqi<
zwi*OU7k_(Dr016(R&03w%#taCUiLN{CL|>#G{!xf?DofEM`c!!9TDaE<%q7{k<l6c
zThqMF#Ds?I5$*w`N`Q_3#txQ;gY57~&u>wzD_s0#)3D=9?`OUuF9o1twv+`zt(ArF
zns|Pq;=+s>zxuWxIpux_JU?bJ;oJ+C0;aB5d_Qte&STN0o}a^*yxXev<Wy_o{RGbs
zXI$)gI49`wwUzEi+J;E;Ks!9j^V1t8g%$2jJ22$f{fwa@G6ETqo*(Pz_=@>>_bb1K
z+|L**O9JgA-2l(#xHm59KX1K`kEP=k`JYGBHRMU=7%2?GYPQI=AiJ}<Q6`7mNs*pk
z;IP`<TvgQe@>`bqTqEoVTnUQs$^Z%cVTuYkBq~-anp&{`@nR$-xf8C-kzhN*Djy+#
z2HTCS8WEBZVuv^N{36DzJ<c}4eFx9IU(xfM8Sf60;+w~B$KH?hkC4}}td$WV?}ylv
z%va=AMLR+ohT3P$2@)BG-8)m7gxQ^=JU`sws3rlApRJN|zdKbT<)bj{3C~Y|EZp#8
zWXXt*dH2`yWTfm1v)7pW@c0NL;95zN^;DGftzb8j=H>0i*7H#^s=PhOJvtFm@g3hV
z8S$R4uLM-EyJ%`B)4k>RYWp`8?9>0F++a8C?1qEQS@LWYI{%3zR)H#zIq;<J7rvF<
zYnbm=oh4|QZ)Mpy7k@sAz==F0M&c@C99%nTzO;<QIJj3Tx1;UKe^<7%)jLi~qU=ui
z$Bg)B?B|V=7HtoX^!(sRpW{7dpLseq=l+2GZwh`;#Z~ZR6<0wVF%i<Zs@>S#u?VUC
z0k%ZztgC8&80Gm{l8{3gNp(NyvH~*=4yJ@A4UPV_WLS(Hp6K}@lU>J8r6-NZ4RU29
zCZymt0rx89aHM4pn9;gP^JaBwn{z=bi8;$zPQHt={T}=GWi7L=YtF>&-``JIsOI^>
zlf$>Wf1CbN#E+KQCs3kd?LodN_>XoxoS!6j@Ay`>+SQRyV(mw)u65*GtQ}+Zts_Bk
zI3$PEk=k)Myi@B+U-(g;-!loiVBAXDwo1JJI$;LXmD$K>;`s#>-(&4Q`=(CWJY-;I
zOK6Ilwz}@$P8oR9?)K-en+sf#CJBjnP%4Mx?1=WBA62Qkz$$4Rw&tWOA*pdfGsE+<
zD>Hgc9Fs6=NK<d~2NYxX^_N<Vc7+`WcRsPdmbZCHT2!-B@lO)ts@e6pL7!B^1~v7Q
z9o6hc_&1tc)$E8!&kw!Sn7)1K=9t}I<G5&=fH@fVuhO785<EZra(G4Y^Ot+Je$m2A
z-l)m_1bMBx9cJ~3m)X_rK~}E>>X=IZz6Bv>5&kDXKw4L`%SoFWc2k^o<7(KkxO~j7
zfrBbbcGs}SSrrrI@tWvlT%ruEY1j2?kZ4KTCf`c3x~Bc1Rj!eAsb#N;Du@4|$FsXh
zPve0`H1w|DQ~OOFwe6_4iHs_>?Qkz-Na$hTN-aF8O^_Oc)D}By{L*&eoc>I87xDa>
z%!G4;i)MtKjk9nCN=#^s+u=N!RofoyH;LatLR*v|cWc{ia7oW^S;vm^_S=)-4s;%n
z^<umY@ymZP-hYU9$e6VBp|7M58_<9B==ii@=^4^>m|aCSzv$<m;_}nR3~UhJ;NP=A
z<9YE*P8c(Ie9IQD*)`_1*J9F#jZPmRdA5HQx%jf5oqs*i|Lq38O_}w=*kO`**)LXB
zruj#jNwPD|zr>y~0GDpG)zW%^f1Dh6!N0cu4P~bW`pdoAcIEsU{r$_Ce&K`Msoe(2
sS1<V2kii4|oB7XGxMz?%SGEoC@9*!cKWv2`xRTvfoi(KAK>tPm2dzRD0RR91

delta 18999
zcmeI4d3;S*_y5m1$<58l9AgG#Foq@-35l9%iyBG?MT^EvDXF1oH9^%>N^e<I%~drw
zicnQl6>ZUUq@~0hbIdV*Kc9Qo#qW7N-{0%`{r!9P%gS2&z1CT0?|t^!=iGCy`}w}a
zn?EK_O-lGEs@>R+*Y2E}-{su+C;FSaS0De>@$^&e8_ikx{G{wxi<R!(BhX+8p7v6V
z)!}B&u>C2n_NnvjJ+@_p8Af)r%dA=2`qp+u)vT4ZM&a>aOrtoQ8=*@=_YAg-Q0Psn
z2ldW)V<3};Sw;!)o1vCF?i6%5>Snknejn-)s5gR+g<c081sww&54`}I+xtM5F^sJ2
zNia$QoCvXua?nGxzEkTNy1{bPu|f6}=(5lQpktsrLbJh5pi4t{8_;jS8|;2*%Lqcf
zC3FaMVPDh0xMaVA4h2BBg$^{b(2__`qTn&65e!FBgeRb6lx0Msei)iN>>TZB;5lga
zxEbQ8kD$&S?LZuRx(qrRdSqG82#iJ?J2oDiBjAK)gPx4RNMymN0izi7RcI!NgyxPf
zYC|^oo9-PPM4gA|J7^B^$vDrD*NOM=9QFSzKLbA-G#`F8IAhS@H~PHZ%jl1K2#2l%
z3?7p^L9UKzwW3;A_6$H6H1WksmJtViu##(8TDh#NRXA`)cA2Y&JKbs2+5e##{rYqr
zFxVJZ)pCzxkDfhybQ^3K&8vCRO@+1*m+{7HgNG07VMILU$rB1q-UHk505*kYGgG12
z-LlI4Ji2Q3r3BB6IRMQKc0zOfy7e3IdJi1<S01;F@~9VgWu}+5R#kUROs^lAhgR~i
z7o~Xi_G44S-HUo(=BFP{8MCWj?yi1j>>|6duVp-gIK!1ZGR=D5SNeuo_3a-(p9HmB
znZwiU5Qk;7M$L5PyqjhZMJ*jQA6N2{G<y|lPq??w8I)$7cF3}DY~R?=GOD|`#}?)r
zl2FWQ;P?u#vm_R?>Np~tmhpne><9B{w`s3|+0eaJ;kY!%Wz^bvVw(9sFz3Q-<DnN|
z>XxZEs~fpnQ8+lw93o3gSXtH~TdJ0{>N~0iSVmn*ENRuT2f<{!Y*%u2n!N}$_QaIT
zrDnQ6YV}d`b>&P=Gb5!>DXW3qA<#0C0Rvr`gVO97sCl}TIU&vd9<`eAS&|uRrdhWG
zrEh8Uy;hKA)ByI8oYKgOS_9NdNb*2WjXlI@f0Jeh;*@+EHPe-RIL#iSHK(gEE6x7l
zK@BZ6!z3XRBN&IpsHG%EVg&ocZ0#{O!NfR#+F@9g*asY`L1~WGs9}`pSO~M5$1x(!
z;V5Pq?LCf8Fnc|4e21E62X<I-%Xpa%Nv?0E`=W+n=bksg>>?{~nRR_jc%j`FW|s$P
zcB7_gN|w|#t{m)mAZndliSO6-hmr9hKB?4$&b$rtIZxB}!sI~ux^PhKAgpT~IvlK*
z%``_xRG*ZUC(XM4u-Ipe>AW=iAZoQxvn1y@!iwQkujNY2u4Bhz+3QJ%3zN$pk6IJd
za9qcvIetW~t~)9Ti&aN(A9vIp)Vg|Wj<>P!b$6{CQOCXuizkgcm!oMJ<Z>mBt7A`u
zRT~^F9-n4!N9`4FlpTZRv9mXqJqNYkZXYM2qZ~3n@by8h--FuksPR<vw5UDS$~Nxp
z3O`TxN2R65H3Da8tY>!)chmc##*TQp`yFa^-I3_7ZD1kgQ2MxXHl+Kb!jsz*I0d!#
z?iy$KHPk#4l>KRqb(N8Z`*?h!H6M<k?I`bwgl|Kd-2ydFBo~ZXs6FiY4b&cto!zp6
z=WyW^SexcEx`O4ZmR-;B8)zF>|1otO6)GaHEAen0yDzL}*t<iLvvDFlsO9wb)Yw^v
zD|tkk{|i{Z**!52`Bit#&-AxGsw90Atar@zQjma?`h&{eHLvh&nsuPE^sQ>uH|xsM
zs#ccyt|U~mvh4d<KRss>PyBjVa@lA<$@v?*L(Ov*=gdyCKB_8xAH#W{SJgA6f?UZn
z((Dpg{kb?`jHjpB&!bk4HA%i<Vnk5oqUp!6vwp26%My{GJT45Rh7<-Ps1vH3$)2j^
zdQAEzp_zfQGzooZmFO7`%zCWC(^2EJ!0<0klPZr}L9W!5sdkSf&v9@s2lkh!>D<8?
z5QeJ;Cy(d2XQ9S(4K+-q9Mm}P10{1JS`uH~(=aD{X7-kZWUGO-v%2(6MytytTSjB|
zu9M$Pvpb{4h1f?jldUv+IjZb8PFhw^qv~FTJk=I8bP@1WSD@-%Lp;?$T)8?u+_pEW
zp7n^S9NST?CFlP!>x5gWmQja+hG9^ux-v2=^SGN&OG2vEz|59DP}bVi+-0ejm70Z%
zr7<PMFf8b)(6}8lK7(eVW|AdZe^mQ|FIP_OM12i3uI9!jXy)6jero3VM)_9gAk=>f
z!9AECj9&n#_d~N#Gr?cb{?JFEnc$f66VNP=YWhzq|96`HQ|f=HUt=1NgFQNn0QTT2
zv=8(R-GG`S6O7wpmPa)chk#Rust(gQYVvT_<!&FVDQ@}<qolg2=`N+ZG&K7isXAJD
z8EBSAHST_l6!oV<J5a9;&F$+zbKIIhvpX%d{z51QoB{0sxZ{^pw^!W(Ism*IG!wiA
z%|gxkAZYGr7&H&qJJ7gqHYPzc?_}jJXpY|uXzoX#StJzwr~R2amZ*a|3_Mr)2IbUD
zuo0RGzgAAo1GZJ`|FO=(2JFEO)jw#0M>Ti&qw+^JceoFnL%JWDaR)Sxn&xTc1<I)z
zcSf}|>t_XF%`}YjN-k(5H6t%-o!XMg{jA5`bLKXx9D#f4rsg5=<*@yW=E)TX&W@H;
z|9_&n`%;K!^CF;Gj|{`PO(QBS_pemzmz4i585oTJE*b4H|2QrFyJT?b;7B~WRB(o{
z{{QQe;pbU0#%)||L40yIF7^$2LdqWTZDGD8eUA9PB)yOL2Fo6TkrJ5?5RnfsG9MsI
zb`$I(NIVKKN`@Z=7<Lrk5WyHpI0jJV7{KIX0Au9<!G3~z#{tI4gyR6?j{}@1m>{)J
z0HmJ)m~#SPk`xe}CTMjMV6tQ!2AFx$H%RWB^lfQ=Ak9w!G&_Zem8TFfO^OI^5_CEZ
z;F6`M0X{zs5L^H-T{;v1v@ZbIOdw*P0q{Qq(Ekj;EZIn~fuQVJfZ5XLEI{wG0DB1L
zNaQ(yh;slV&jHMn-2mo%i8~LqK!#H-lsu|Ml5hdRRW2ZS@&yDhmIDO)3F=)0SRxZH
z0*t>1aGqeP)V>6eehFaCC4l8pKyaF%RUyDinN<idvk>4e!D?xK89Vzz7Et9#5!D)L
zdj;xCSqdeeUqNv2RRph-4p#x%Uj^7qkSq2z0RL+M{jULRl#K)%2+Cdu*d%?f1N6QQ
zu!mr?MBV_1xB)Qo2EZ2CO|Xj~@g~4F8GaLB*iC>#1luK{2%t(4z~mx;9ddwRKS8})
z06S&EEr9X20L~NamfE)g(r*LIxef566cC&yXmtl*kIcFQF!K(;U4nhm{4PMVy8tWi
z0^~^%!A*ir_W*vCrS||nzXuR}AK-WCa37%keSpmbe@?d@FHQG%1W)hpXki|hz7e$z
z4h)5f>fh4GbYLh<fIS3<B+>$iumDC{0EcBa!7j@YB>fI!p61JNAAn&#h&befh+~rA
z3sA)uV6rd33D4Bt?~6_9Ivg#{Qywth0dS6>Kx+G8lXO2vh|KkKJY$}f0)o?i$kED)
z9Oq@06JVwj;4Z;MY3>iu3>}e`{s4tiL~xU!lMQf1mZGQfxeX8;0B}t@1OT)T0N6}$
zL+n5R|3HBLfdECakzfNs*&u-1(kBR@cM!lHg1ZtK3=k0vFf!QD!n*G#KLk74$u5$_
z5QLaAJOm-bLI4gC_((#i<0aEqMo~HB0F|F4he0`I0#ueiKf!46EtRw<wEefsw{M)#
z>fDWbzg8I*8``Yv(16YteRF=O_V|PmFW2aq?tE_H!bWdq6@B*p8J`tRW3FsI|IEys
zQ3ba<4tNRA(XsyB3%v(zKbp7yvFJ}a&glO|n{pkpULRR7_OVLyk5`&Aa!Ky?O3kj9
zpIW8ek)|_7tZI9s>&f?rwx4tP*6>$)B_6)Eq0tNG$5A20#%-7<iQ$e2nG=pa1xi6U
zI(a(W5uDqqnB(xM+=d@HzA(+6QaIi5tl3N&&2SWVOvHn^pxm~d9MAen^)`-O_$=sa
zd!GU~${jh|5$NN11s`gIB)_<$8r|c*p6kf{dahq&<J|21j$@&Mzt{MuE9<440rPM2
z#?vsqi;-80{OaOi0Ls1lo<e&bZajHKq_BAFyszXvEX#b2VVze=mIabu<X61jr*Lu9
zc>C(v6FzHdIP1US!pgEj8DsnDC$*K5d<!X7sf)MjgVnWK89(4;Df<G9E#O;|Y-L}{
zD5hAe;rx6vQC;hlu{ufFdSz@>KJUCyawU%`Ho(OO<B_&e02llD4H*9MskL!M!?$Y+
zJn}ZKD*I02ZX?AGxY$5Et2a*Qc<ut@Q1TP$No7BPF+D#Po>I0~GMQqZX2*L4;|yG=
z8b9L?$0iDLR>Kc~(TDd1Ml}e_Ke7!evJQhY3hzSr9L8OaC@Y6r17-QjVo=x59mY{G
z_8=C*5ArN0G%gOd_k+nvW$|G5^$4HxY}=X7^dDqAqk$EGc51@2$|{1bR(4KVC9p3r
zM|j-NE2|89J?9O|1<ARCVY;ZU1fZ?zx}>Zs*e+#-VC)ZvXrHpHV%|lHYwAjbE0CX;
zQEqCAB-la9ij+ML7Od=+v}KCh>cWF|qqMs2D8oZ3BU0I2Whr3Q&|!}DJz2mMoN}BV
zc;sdzsmlW60p!7ZT$zuuG_X)G&Qf0~WC{md>?0oF8b8A3WcAl@JeD)+<D}qZwUyzK
zlW_|Z7q5(r0BLj&DPrMbEAYt6*v+Yi60hNSm}vZ<th_Q#p`VmhkZDX&87_2_57CT$
z>UvDW8-slgo99KM#x;Sx3N}j($!Cfb4Sxz~jk;2mJq`AivYN`8f_<&5mL%UtigZ-j
zk>-$Z)b)ghbLsn5Ssi69z_u%^E2EgAzPeh$6{Q_%psY1mw6ca^+|{#?GRhiD9#cH2
z;celHQP)#oJW9_&VwE)m<2vv>Bp!@wM9b-M&f@jjYK9j<DyZi<Fph9L$W@)oFM+WU
zFF{P5Z5^g(B11>b&;g!~h~|RwG8o&?5z<3hXN|)nN~6EBF4MOm!>gJb&oT{O9J%~-
z1>>rP$Kr;?9it4_3|(O3rJB2pkZ=<z-iC`U&4A#AhP#Z>@UE!g^@Tg_yI^#8gT!mx
zdy>Hv<J8pyE<C7qmkD4TiJp+}d8VLD0i)RqvQyaylEV~J)zt^C<#2J$oCd~heIb(|
zcw=q2H10LnA3#_>64P=P&zi2T{y=lw4m>YY_B!grl!>wdsB^xt%v3fIHXqoq%u<#K
zyEIrF^vBBHfNg`tL(c|7PeY7Bs08T7^JM|rRBr)%9NZz0qEP%n;aSGc4~0}#wp7`h
zVBwr@D9fafDVD2iI1nGBvaA5($c%uj2dfCp6P0P-g8Yqra*16njeL;e3w4bI`V}s&
zv^mP&f!zkH&tuR$p_w8J(pK4*GL0$Lt7{ZoRdo{QDjN+}k#iPhgR(KOt0~(k`Aos3
zf!W7GTB6ZhX*Yo}>OIJlV5!ht6BsuR(p1?NN%lnwE)DGW1V|)Yc)@CXr{NP}mqMdi
zb|~YlIe=x9Yv%VdiYa!(#XU}j{Gzu8KWX?Bu&)B~2W5{kPO?qP_DUX8{H(5NaFq#Q
zuwmpW`w(`FvR}a1S{Ec1j4SeQ66ZjQKQw$gP<ajiQ`ro#Z!p9Sq4z5j*t?V+kW8ld
zOI@?zI*R3o<!@yl!#=L;AQ)RQ8}d8s#?ZJ6VT!{V&a<U4rzy%2WpiPlh0T($Y#!`7
z7`&&Tk4m^7QWU6b0Z=_naYorfuu<4`GiavburGpCKwNX^3zESU7vbWRUkteho8<~L
z8~quCEqVr;J_qy?$WGWTpl?YIQ`|?DQ)Ve-J^I}mn&%x;EQ2fpdluRPW88AcVr4#J
zI+4Ox!&kyJ04^3k4POO&pfabj)nM(xc>VB~woDPIt{kA3H9Sb!8nDh99<1z3u;;*d
zxe1X4OcAcGbwD-YdLFtM7(22a@+{a3&?UfN8o7|FFnA3rD}_uEqv0EY64e!_X}<zX
zQWmdl6WDz{qsvPpf2806;xKK7bWvADW#53ks;m+i59$`kQrLL8Yb3}trl_jn+kkk5
z=>lC%!@q^ynnw~P35*ASJLFkqxYb~aR86r1uD0r`sqA~O=akh_wiE0HuvekeB-uua
zC)BkYsGWw_0plKjfOJ#VK;wP{>#ivp$|$CINnLy38m{5(!PxJ;kZffygYhWsgG|sA
zog|MbI%{|yT$MCDL(~2O_5`-;4&4<D2gmpo@+Whlye4r0NYPKje+SyAF5U_7DE$H1
z1l9xkbueE0|Ag#QHdZp3;yt*y<pD^ZrWmj6FR)*k3uU6F{TudA$|lJ+rg&dnhv1s3
zuF1;&0lN-inWAYA!@lDth?np{r1((7^MN_ZSzOAF!rtH}xTY&RhWdEj)pW^ViW%xU
z0asgfiL#Sm6_w3Yb_#4HSbykQlEV}qtE&KrYsCP_Y-ML)*9gX|Ip|N6orT>1M;zb4
zGUkXGgcNhtbsp$$sOJhlPuT^qMPNgr=PSDiyE5k8o6rlSEmJH~S0T`=*ds5+pDMcy
zyFFMI^kQXKV85*FGg-hCOVo7@E>3cm&z13Llnn7)Z+UidSZ+W{DZ~8*Q!H0kk-Ek~
zuTXXiHm|c}E0x`b9S_E`N*V<t#cFlk1qww2S@;2wv+N#ZOCSmEFEs8x>|M%mf58-M
z)n%fU`_#2gQ&?a>E6WALa$@*^UFT_xvRU$(;u}rjfa}Qsk86uEKd=tUwkmUinPAfq
zx=oTpkm6f)*>D}kA~yrB?aBhcPU7_Bwe>q?fnb~$^T2k<D5m&cUBPt0UI5olWg%b=
z*ev|?i>eWdKfI=}?3O&H_z6`GT{v6;>e{Q}#lV7;@xwCXii7c*!jdO(p-Az&hL?mZ
z4ECpR{h_QB*mxbfKb4gRn*_EPar-5cDGtEJs7Sb`YWN{A?lB6C*Ibsv%A&!xXk5N*
zV~V4iy)0b3HTewT$CQ-=<L$^2u;a>NG>+_qgoh!;Np;1+)dHix6s}WX+)+H(NU#;K
z&uUzGuy?>%&PfJSTu>L+1*TXH*F`XPq!QROU|+&6)VRtTM|N3qnBuy+65!$owe@h_
zfaXP@Dp(I?w=}LA7?)?p-4-((Dej=kJto5SB=*RK?w*Dxfi+cjU*jGJ3j^cj*_5_S
zVPQss8p-&RtCwIOWi`Mul=&)40qd^JAq$wosjixE^@Po<xj!^pRtv0`h6g~ib7^3`
zl?6*7Q-q)jYSg9+2k=|ip~{{Bdresw7}M4P<44l%u!~8fVn|T}E@rO>7e52<fX!z!
zWc9)J<LG`5J4#stur`QeDJ#>Mq8wbHMkD-*R9B3$#$ZPr?r0-cSrf2au%CeAB%dkb
z)%6ry>#^&-aFqvRE1m`uO;HJq)2%63Iv6kGRVBGNQY31M=5Vz@XL&VGQuYj3OJ$EM
zYXR0uS#=r36gA-DFtviKt-4adxX0FDV_^ISI~@$u!FU#|fK5bcBza8HShMqD*cvWg
z;hSjM=fIxT@TWBHd9YQGgNS=t;z}SzQ+2%v%w>mH?q<r`p`HO@X|C)g)VY2h0eeO=
zks_;wx;g-J9<a1j))95iP?lE8UPe7ZFBYwpy#n?gE}SgSD(eKs+a8uSVC+n1uwuIH
z^Pad6qYK~`e4^tO=LHEbiEh0J9|xDs|4XkRFKOPcV28kXb!iV)3US?FAJ@3oC4(sj
z!o^+ofU7{m2Z8bU^aLBC;csf%USK8|uQ<abhbe}us}In59z&E7nzk?4a^^xAsd2A?
zZ2;q?;T<tcAw`zD`U9253c-@C>~%1H9^i2srECD~B}l=`#b{~E6l2tt3A7L{UNzoT
z_6F?PV7xSpRW=Cr+Za4v8s3uyOfg<vLxB3i6#+d#*-+T8DVqq!VSf|Mg|xhcyf1}J
zF-60N1APY<uOuIU@mw1Ldj}ZHM;iAQ*e+$$rBP|5n4#gkr^EM64PF{%Yxp~`>nQs~
zSr*u2FkUX^$TX&y3l|$W3TU(*k@*@v8mtKzFAWQnje*Tw@zStR@|j|hy2b+4SJ$V?
z-eVY!2rn0lm5qbV6pulFCdm;<u|!=HfY@kW20m9d5%!m`S(YlB1m;q<Ohz%qa&=9H
zYpA+bD4PP7iKQ_edZn@tVDlLz%PPrZiq-0x23M@QzEJid7@sGz<S282@p(JT8i|WU
z3N{qfn2tZe2yYC%R@n^LpCJ5c=yl2j_VXBju6gSvlPP#T<7qYvs0m!Hp}*4bk709l
zCEKKIHf*l0WM9iRrq~P@h%pDKjk>ldn+wL(mEqgKIHTslK8t;FMcpCcQAn{%vo8R;
z#O9#vR<;oAy0RaXEdnc2_M>Dl#ZT&543|SE?jB{Ifvtvc0p6=@3GCM)Ec+yfDSlSh
zQs9Q_%2T!s^+w8mQMMd)4mnrZU&V|@ir>_=5{RD#-HWKQRbaeCko}>It>OnhvOlFQ
zQ|yN;0w@RQDi$=ZjhDbU#A{%m1>>T4SyOxo`@FI%vVbYBs%srwg_z)60Iw-q5Bs{Z
z>&kM$R$$DyDBh4lrnsf9jX>S8>tWEh!8o#C!R`UZwdB6WZGz3EiOi5jWst(eUfAf(
zK>M&Aml+>0&f#xh{{+Tm#$VYM*i8F2bg)cgiV(O^Gq&Lm7dg5@HSM>sKY-0;CS2pT
z!yXHprI_S1MR9fQfNK~U%QLowvhQK@BEeEp*-kLNDPbuk$z_qEG+dl)yW#4HR?LLv
z+Yff`2iQENIMMm01IqXje_l{lRz@)e-)b;?4_tlF@A=SttHHE;VfW>@qEytlePBJo
zctTW`Jf`5|Ce(~P{AmXl&x>lB;uqL0!FXQqITO?V3cC*2r_jj~R}Lvs)%82j00;}$
zMw)-%&p-&zi*#jw!fpZK2~k@znc@j`9RT7o!gGLYD3tLR{yYU)0jaC(Z`fQ6IdkjD
zHm2aJjhb-?e{#@3&b|i9{(;Roz-iY|*<sk6T4aqRJO(Kmt1Dk!oMOCoKp98zhjWFD
zH~bv-W3ZW))9z`>U<%&%qvn1W&2YM!Y4}Olyiwr%;HMN0=PB4c_&m6+B!?;ZP>|UR
zfU2V-JdkabozZX}$mf-vh20r(KSRGLW-L<hNhVXA*Ki)lj>;}5<AHod*+pf)L3ft6
zOz|pQs2PR$)075EhO*13uf-k@LU&bm1vWdvR(F#HNKveZX1^5Uxy5<^DfvFu+0l<*
zTmL&m%EdXOD*l4oLw;Z3H^}dhKOlcX`2FMWAv+<vq(_`HOHRi*&sE}A*ZG#5Z^ii)
zU-z4E*e1jW!tWXX6)KnGo$<|&!{+ypJ0PClTt5dn54ixj1i1`34S62&0^~&qzgm9)
zat2Lq1I_Q^Z<9{toiX-um@6QwWpa7vB6CS@as_9WkAq*jFD2_LJG*2#(Ez?N3WNkf
zf*~Q0P}Z?N1w;7S=oaKG<Q#-wfG!Iu2Z@EmLE<6hAr&B%AbhP<1(E=%3aJKp43Y$S
z98w*U9BPQGiZjmUOQma&>$#h&ILG;x<rky*?dqX;Hu4qpGRO+ZD#&W-km!slIUQzg
z$P<vI2wMiJCDRj~)q?rW{+p0nklV5&(b+V&M3VCppL!o6b~J?d_v0YrA^diFJxF~>
z14u*2TI8AwiNky;2Z;a+&OM*(e9I@eKkR{!4v?taAvK+YOh+5o(Q>|)^R4ioVeW>E
z#lGK%OqStk&hiy4jOG<o`M(s}LHKBjkD@j}TH;g0P0Ye6vMtTIrR;II`L53o;t%0F
zzCauV{tt}xxpUH;Us{p)0=N6i-26g#IHVY)IHZL1spBl~;KRU0xzp-6|MoFI%kAI5
zS;lEUg*~CfzQ_3-A3PZg(J9CY$dTL~PdmG$g!3&T-^ZMMz-x|hrub!f`9I)?Abg#}
zXDNIW$vizF??ZesRFk0jQ9A=N9x@v83OdJ+>7yW5v4BKDZ$oT0bQWX^PQQ1cBOoOp
zBOwFf9|3Lq;;rT{sDz`!r}%Hl-E8Ne;IT0II+*W$$H?8coH1GN!SrHo5u<h5Ue4P?
z3w6fsKvO0{UxwzZVsE;yQRg;n`eU#e%Q(J~_WGFb3ViO}dw4PTMnkZJd^q^#cBUkc
zb{0?m5GG$ce*l>V;d^GjL*`3h_UbQ4F9?U3?=EvCbF{N`;wLb#<G3$Gwz;t9K)!?|
zqFx<Gl5a|LAbhjBTK0@~MrW;rxg5e*xl166A&Ve<1w0=z53&$45xx5q`ZEY$1uui}
zeJ<bMu7)t>Q0!tYG#?hPgXY^;c5W;5Eo{#>uLmGkVe=K?4nHHw;5)^^2;ytUeUQBn
zzS-Oa2}NJNg1!y^1#GlYMvie-F1r)xYe*vYvmagi9`<&~w~)=UZHzOzCf~;XgDvv8
z73@pU+o0K;gRt3zEsw;|zg5EDbruizhA{*!G`^FX?>fsj|92UgjbVJ58;!Oef&FM)
z7}$^S@$Ky{NFwT6Wx>17(&kp#_^z|E`Ge$RpQsT^&{(H`)*b{hF@>YX=5kf_wudM7
zqe=ZxcR+r|cK*=pN}lHMj=Xn!KDuO|{<j>z`WcnnNlYaA?U5vW%gdv{gzkpO#<9-m
zR>x622004JhwvPr&H2fB>YbzHeE!Q*-yixO^jXMI2;aM&h7?G}_i#$`9qJ{>c?jL-
zAPnX7=V`&O7hZto``62mLe<`MjN^9R`c>H8T+B<~9ms9ST?o&-Kd{>H{>XIV&4mjU
z18uwy=X}6%2w>74=)(;R%YOJR`2E405C_DD_(1|7d@Sw<;UjZjh!2F{{^WaBJ{Nx*
z`Ho^2ZTM;n<!Tk&KcEEEeYr-hPUGs2bLQ3`=l|RYS!UX)vap?h$=qPe?r)i|$XmYl
zi{@jwdA{~xUu%smYi#>t{ECCL4zMGly}#|y;qaeNeUwln@n+}hNy%wRX}Hde3b0*e
zP6c`XxBVSxtoGSQ>TNw!f5r=IE%S1aR1dVDFx$#&fp#QzG&azljc<^~1=+o<O~EoT
z$nI%2!HX9-J4#@%9a+Zv+Y3$B-#(Q0^}Ip8W^z*Xq#EeQln`kcY)6#w{#wJ%h4+4b
z`Q(XDA4cp9k+(zb2<t?MOhII{{t!g=?`wKb{bqJS{fCh;vJE>k8_C~L(ca&IxG;YF
zLI0+iqkYZlNhv8w`1ZvR2@SC$Yk7Z2;?|@_<=^>r){ut*-rt-Uwa=>j{1|KGL(jTU
z=^SE5)bjpnMVaWLNheZ5|9BYT{e6og+e+ShcYp8W4?Q<SWd*j4_WmM9i#N?@+Fm&r
z_AtVf!y$HxcEI#>r_BG}UmX!kN9g}DhC0gT0NEXi9pHZzQnkc)neA5i(r;Fnof7T+
zoeQgR(ds=-F28S?oonDA;Y!d!_8`FQkB9si-q8{hV@F!^BcxWiU89!wM<h0`+0gLA
zNuhnQS&C;f@6S$5{@K|$^p##SA0|8)A#=lV(7iucQ9G)2-@NcDhaYZR6d}Ka+u8UI
zc6doUQu-CM&qRBF2cvn^rNo0nOKo}>T~acOqa)*GOK}`m@9$~U2)cdjg|dHq@G#E%
ziyQMc{T6*>V2hlGEjk<}Atmg!W@kAcflTh*rdUU!Wo9Y6h72odr&{NtWmQScZ1-?Q
zN>VAiw+6J-F~NUIxnIgI_&<}#$EEF5kEfN#(<|EhgB`P5?pi*1WyY|F?WiFGA~D8K
z%AT_5cC%IfQP|(%Xq;be)k?}u^)Dt3OWFRiHOl_Px*8*$qcKj+auGDv^fV;pKiokp
z>tvjiDQCAd>qwt+IKrNpAl29Tr$&2!1mxut?WUf2F>d<9QFKp$|EGQY5#!!R`B?8h
zB4uDKMn#A6n^-$ahfr?*<zHMJarOl3U?rIvXGb*k{+h_vE}ta)lf8Xx757S&R12?;
z@ZZo&U}@TW;&h*sfeS*^la5cx@Dzt9tNZvyHS5++sA5)-i*a@weg`5v-i|EsZx^-t
z@mOU}1xfpOyQlSC71<hZ$69$+<Y>J8r1f_dsZ!pKE#v+1lCx7=9)IPpD`Vr?nv|qu
zuFTTCJWdGjuZskno%Ypl_k#X;cyPVHKN51mxSg_NwfH_b!!9MrPvx;R=uehp`yYR5
z`SyguS%|<g$-b7A`{nJ(rrzH;$t+Q8=A?4=WOqO+cklfbl$bfzk<?;qPq{rQsY$gB
z@9(6H?=W(3(i^>N`QpFvcd39`_O=YKVAsL_dRkY(u2$i1{D*yfP{<xJpu77DlUVE6
z*``lsZ9}4zq#7wn=?1PHz7_2nHN8L3GB~oviCa&Hcuqt_BpcqJY^gYQ=i)7~`@TWn
zYb9Z+$IY3{tB6I}`x`EYmL7QZa{ESDEzrN34+5%Lryi4^D&j0VAwO2M<BI=lufog@
z(yNl)%Hf0mVIM5}D%vGwZzbCwSD`;EVRjXlz{>V;YhiVHuQHC_s_OE2WxJ}isk;1D
z*<NeSOO}aMJi1|m9pN)C*^*ZO_?IpN!~L5yZ{R^m3<hCCUR29&qu%J^Yhsfr2o3N?
z6s5=)33f?eT)gVZ?gYD6ATqfJ?A1hDGVos!q;*w0DL1>S9qSt~mETT6nbmdNvLqW4
zkh?4?u(z)aUK0>44O0UBbC;$Be(<<|&7{G-MsywWx@2Anh?9(Nfzf6S8QCrHNWlKC
zc;Lv=O?q_?<R?bl*^loYSS7GoH;*U1d!T#AxqG_@Mwxc+?jAf}dUg+tm*PDG>jj=x
g7Td!UDzEnp>>Jo#fA|SM03|zPofXBuSK$2r0i7YL1^@s6

diff --git a/packages/relay/internal/peer.go.txt b/packages/relay/internal/peer.go.txt
new file mode 100644
index 00000000..c42b2032
--- /dev/null
+++ b/packages/relay/internal/peer.go.txt
@@ -0,0 +1,295 @@
+package relay
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"sync"
+	"time"
+
+	// "github.com/gorilla/mux"
+	"github.com/hashicorp/memberlist"
+	"github.com/pion/webrtc/v4"
+)
+
+// PeerInfo represents information about an SFU peer
+type PeerInfo struct {
+	NodeID    string          `json:"nodeId"`
+	Zone      string          `json:"zone"`
+	PublicIP  string          `json:"publicIp"`
+	PrivateIP string          `json:"privateIp,omitempty"`
+	Streams   map[string]bool `json:"streams"` // streamID -> isOrigin
+}
+
+// StreamInfo tracks a stream's origin and local subscribers
+type StreamInfo struct {
+	ID            string
+	OriginPeerID  string
+	IsLocal       bool
+	Publisher     *webrtc.PeerConnection
+	Subscribers   map[string]*webrtc.PeerConnection
+	InterPeerConn map[string]*webrtc.PeerConnection // connections to other SFU peers
+	mu            sync.RWMutex
+}
+
+// DistributedSFU manages streams and peer communication
+type DistributedSFU struct {
+	nodeID     string
+	zone       string
+	publicIP   string
+	privateIP  string
+	streams    map[string]*StreamInfo
+	peers      map[string]*PeerInfo
+	memberlist *memberlist.Memberlist
+	mu         sync.RWMutex
+	config     webrtc.Configuration
+}
+
+// NewDistributedSFU creates a new distributed SFU instance
+func NewDistributedSFU(nodeID, zone, publicIP, privateIP string, seeds []string) (*DistributedSFU, error) {
+	sfu := &DistributedSFU{
+		nodeID:    nodeID,
+		zone:      zone,
+		publicIP:  publicIP,
+		privateIP: privateIP,
+		streams:   make(map[string]*StreamInfo),
+		peers:     make(map[string]*PeerInfo),
+		config: webrtc.Configuration{
+			ICEServers: []webrtc.ICEServer{
+				{URLs: []string{"stun:stun.l.google.com:19302"}},
+			},
+		},
+	}
+
+	// Configure memberlist for peer discovery
+	config := memberlist.DefaultLANConfig()
+	config.Name = nodeID
+	config.BindAddr = privateIP
+	config.AdvertiseAddr = publicIP
+
+	// Add delegate for handling peer updates
+	config.Delegate = &peerDelegate{sfu: sfu}
+
+	// Initialize memberlist
+	list, err := memberlist.Create(config)
+	if err != nil {
+		return nil, err
+	}
+
+	// Join the cluster if seeds are provided
+	if len(seeds) > 0 {
+		_, err = list.Join(seeds)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	sfu.memberlist = list
+	return sfu, nil
+}
+
+// peerDelegate implements memberlist.Delegate
+type peerDelegate struct {
+	sfu *DistributedSFU
+}
+
+// NodeMeta returns metadata about the current node
+func (d *peerDelegate) NodeMeta(limit int) []byte {
+	meta := PeerInfo{
+		NodeID:    d.sfu.nodeID,
+		Zone:      d.sfu.zone,
+		PublicIP:  d.sfu.publicIP,
+		PrivateIP: d.sfu.privateIP,
+		Streams:   make(map[string]bool),
+	}
+
+	d.sfu.mu.RLock()
+	for id, info := range d.sfu.streams {
+		meta.Streams[id] = info.IsLocal
+	}
+	d.sfu.mu.RUnlock()
+
+	data, _ := json.Marshal(meta)
+	return data
+}
+
+// NotifyMsg handles peer updates
+func (d *peerDelegate) NotifyMsg(msg []byte) {
+	var peer PeerInfo
+	if err := json.Unmarshal(msg, &peer); err != nil {
+		return
+	}
+
+	d.sfu.mu.Lock()
+	d.sfu.peers[peer.NodeID] = &peer
+
+	// Check for new streams we don't have locally
+	for streamID, isOrigin := range peer.Streams {
+		if isOrigin {
+			if _, exists := d.sfu.streams[streamID]; !exists {
+				// Initialize inter-peer connection for this stream
+				d.sfu.initInterPeerStream(streamID, peer.NodeID)
+			}
+		}
+	}
+	d.sfu.mu.Unlock()
+}
+
+// initInterPeerStream sets up connection to another SFU for a stream
+func (sfu *DistributedSFU) initInterPeerStream(streamID, peerID string) {
+	stream := &StreamInfo{
+		ID:            streamID,
+		OriginPeerID:  peerID,
+		IsLocal:       false,
+		Subscribers:   make(map[string]*webrtc.PeerConnection),
+		InterPeerConn: make(map[string]*webrtc.PeerConnection),
+	}
+
+	// Create peer connection to the origin SFU
+	pc, err := webrtc.NewPeerConnection(sfu.config)
+	if err != nil {
+		return
+	}
+
+	stream.InterPeerConn[peerID] = pc
+	sfu.streams[streamID] = stream
+
+	// Setup inter-peer WebRTC connection
+	go sfu.establishInterPeerConnection(streamID, peerID, pc)
+}
+
+// establishInterPeerConnection handles WebRTC signaling between SFU peers
+func (sfu *DistributedSFU) establishInterPeerConnection(streamID, peerID string, pc *webrtc.PeerConnection) {
+	// This would typically involve making an HTTP request to the peer's control endpoint
+	// to exchange SDP offers/answers and ICE candidates
+	peerInfo := sfu.peers[peerID]
+
+	// Example endpoint URL construction
+	peerURL := fmt.Sprintf("http://%s:8080/peer/%s/stream/%s",
+		peerInfo.PublicIP, sfu.nodeID, streamID)
+
+	// Handle incoming tracks from peer
+	pc.OnTrack(func(remoteTrack *webrtc.TrackRemote, receiver *webrtc.RTPReceiver) {
+		sfu.mu.RLock()
+		stream := sfu.streams[streamID]
+		sfu.mu.RUnlock()
+
+		// Forward the track to local subscribers
+		stream.mu.RLock()
+		for _, subscriber := range stream.Subscribers {
+			localTrack, err := webrtc.NewTrackLocalStaticRTP(
+				remoteTrack.Codec().RTPCodecCapability,
+				remoteTrack.ID(),
+				remoteTrack.StreamID(),
+			)
+			if err != nil {
+				continue
+			}
+
+			if _, err := subscriber.AddTrack(localTrack); err != nil {
+				continue
+			}
+
+			go func() {
+				for {
+					packet, _, err := remoteTrack.ReadRTP()
+					if err != nil {
+						return
+					}
+					if err := localTrack.WriteRTP(packet); err != nil {
+						return
+					}
+				}
+			}()
+		}
+		stream.mu.RUnlock()
+	})
+
+	// Implement SDP exchange with peer
+	// ... (signaling implementation)
+}
+
+// HandleWHIPPublish now includes peer notification
+func (sfu *DistributedSFU) HandleWHIPPublish(w http.ResponseWriter, r *http.Request) {
+	streamID := mux.Vars(r)["streamID"]
+
+	// Create stream info
+	stream := &StreamInfo{
+		ID:            streamID,
+		IsLocal:       true,
+		Subscribers:   make(map[string]*webrtc.PeerConnection),
+		InterPeerConn: make(map[string]*webrtc.PeerConnection),
+	}
+
+	// ... (rest of WHIP publish logic)
+
+	// Notify other peers about the new stream
+	sfu.broadcastStreamUpdate(streamID, true)
+}
+
+// HandleWHEPSubscribe now checks both local and remote streams
+func (sfu *DistributedSFU) HandleWHEPSubscribe(w http.ResponseWriter, r *http.Request) {
+	streamID := mux.Vars(r)["streamID"]
+
+	sfu.mu.RLock()
+	stream, exists := sfu.streams[streamID]
+	sfu.mu.RUnlock()
+
+	if !exists {
+		// Check if any peer has this stream
+		if peer := sfu.findStreamPeer(streamID); peer != nil {
+			// Initialize inter-peer connection if needed
+			sfu.initInterPeerStream(streamID, peer.NodeID)
+		} else {
+			http.Error(w, "Stream not found", http.StatusNotFound)
+			return
+		}
+	}
+
+	// ... (rest of WHEP subscribe logic)
+}
+
+// findStreamPeer finds the peer that has the origin of a stream
+func (sfu *DistributedSFU) findStreamPeer(streamID string) *PeerInfo {
+	sfu.mu.RLock()
+	defer sfu.mu.RUnlock()
+
+	for _, peer := range sfu.peers {
+		if isOrigin, exists := peer.Streams[streamID]; exists && isOrigin {
+			return peer
+		}
+	}
+	return nil
+}
+
+func main() {
+	// Initialize the distributed SFU
+	sfu, err := NewDistributedSFU(
+		"sfu-1",
+		"us-east",
+		"203.0.113.1",
+		"10.0.0.1",
+		[]string{"203.0.113.2:7946", "203.0.113.3:7946"},
+	)
+	if err != nil {
+		panic(err)
+	}
+
+	router := mux.NewRouter()
+
+	// Regular WHIP/WHEP endpoints
+	router.HandleFunc("/whip/{streamID}", sfu.HandleWHIPPublish).Methods("POST")
+	router.HandleFunc("/whep/{streamID}/{subscriberID}", sfu.HandleWHEPSubscribe).Methods("POST")
+
+	// Inter-peer communication endpoint
+	router.HandleFunc("/peer/{peerID}/stream/{streamID}", sfu.HandlePeerSignaling).Methods("POST")
+
+	server := &http.Server{
+		Addr:         ":8080",
+		Handler:      router,
+		ReadTimeout:  10 * time.Second,
+		WriteTimeout: 10 * time.Second,
+	}
+
+	server.ListenAndServe()
+}
diff --git a/packages/ui/globals.css b/packages/ui/globals.css
index 87ec6453..11c0f5b2 100644
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -18,23 +18,23 @@
     }
 
     *::selection {
-        background-color: theme("colors.primary.100");
-        color: theme("colors.primary.500");
+        background-color: theme("colors.gray.400");
+        color: theme("colors.gray.800");
     }
 
     *::-moz-selection {
-        background-color: theme("colors.primary.100");
-        color: theme("colors.primary.500");
+        background-color: theme("colors.gray.400");
+        color: theme("colors.gray.800");
     }
 
     html.dark *::selection {
-        background-color: theme("colors.primary.800");
-        color: theme("colors.primary.500");
+        background-color: theme("colors.gray.400");
+        color: theme("colors.gray.800");
     }
 
     html.dark *::-moz-selection {
-        background-color: theme("colors.primary.800");
-        color: theme("colors.primary.500");
+        background-color: theme("colors.gray.400");
+        color: theme("colors.gray.800");
     }
 
     html.dark,
@@ -45,13 +45,13 @@
 
     @media (prefers-color-scheme: dark) {
         *::selection {
-            background-color: theme("colors.primary.900");
-            color: theme("colors.primary.500");
+            background-color: theme("colors.gray.400");
+            color: theme("colors.gray.800");
         }
 
         *::-moz-selection {
-            background-color: theme("colors.primary.900");
-            color: theme("colors.primary.500");
+            background-color: theme("colors.gray.400");
+            color: theme("colors.gray.800");
         }
 
         html,
@@ -242,12 +242,120 @@
     }
 }
 
-.digit_timing{
-    transition: translate 1s linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%,
-    0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%,
-    -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%,
-    1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%,
-    0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%,
-    0.9991 91.48%, 1 );
+.digit_timing {
+    transition: translate 1s linear(0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%,
+            0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%,
+            -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%,
+            1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%,
+            0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%,
+            0.9991 91.48%, 1);
     translate: 0 calc((var(--v) + 1) * (var(--line-height) * -1));
 }
+
+.modal-sheet {
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-name: slideFromRight;
+}
+.modal::backdrop,
+.modal-sheet::backdrop {
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-name: fadeIn;
+}
+
+.modal-sheet[data-closing] {
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-name: slideToRight;
+}
+
+.modal[data-closing]::backdrop,
+.modal-sheet[data-closing]::backdrop{
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-name: fadeOut;
+}
+
+.modal {
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-name: modalIn;
+}
+
+.modal[data-closing]{
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    touch-action: none;
+    will-change: transform;
+    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-name: modalOut;
+}
+
+@keyframes slideFromRight {
+    from {
+        transform: translate3d(var(--initial-transform, 100%), 0, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideToRight {
+    to {
+        transform: translate3d(var(--initial-transform, 100%), 0, 0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeOut {
+    to {
+      opacity: 0;
+    }
+  }
+  
+  @keyframes modalIn {
+    from {
+      opacity: 0;
+      scale: 0.9;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+  
+  @keyframes modalOut {
+    to {
+      opacity: 0;
+      scale: 0.9;
+    }
+  }
+
+  /* button, a {
+    @apply outline-none hover:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:hover:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] focus:[box-shadow:0_0_0_2px_#fcfcfc,0_0_0_4px_#8f8f8f] dark:focus:[box-shadow:0_0_0_2px_#161616,0_0_0_4px_#707070] [transition:all_0.3s_cubic-bezier(0.4,0,0.2,1)]
+  } */
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bf7a9848..9ba953d9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -54,6 +54,7 @@
     "tailwind-merge": "^2.4.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.9",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3",
     "valibot": "^0.42.1"
   }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f8121d0b..1d930d73 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -13,4 +13,5 @@ export * as auth from "./popup"
 export * as Modal from "./modal"
 export { default as Book } from "./book"
 export { default as Portal } from "./portal"
+export { default as Avatar } from "./avatar"
 export { default as SimpleFooter } from "./simple-footer"
\ No newline at end of file
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 36dc2116..66cba1b6 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -1,4 +1,5 @@
 import colors from "tailwindcss/colors";
+import tailwindcssAnimate from "tailwindcss-animate"
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -154,10 +155,10 @@ export default {
         "shake": "shake 0.075s 8",
         "multicolor": "multicolor 5s linear 0s infinite",
         "zoom-out": "zoom-out 5s ease-out",
-        "fade-in":"fade-in .3s ease forwards"
+        "fade-in": "fade-in .3s ease forwards",
       },
     },
-    plugins: []
+    plugins: [tailwindcssAnimate]
   }
 }