this is not a chost

html/common.tsx

@@ -8,6 +8,8 @@ import {
 } from "preact";
 import { render } from "preact-render-to-string";
 import { writeText } from "copy-paste";
+// i know it's out of date; i just want something simple
+import { randomInt } from "https://deno.land/std@0.146.0/node/internal/crypto/random.ts";
 
 export function Main({
     children,
@@ -216,8 +218,9 @@ export const randirect = (...urls: string[]) =>
 
 // could do some [T, ...T[]] shenanigans for totality but meh
 // kinda bad name
-export const pick_random = <T,>(xs: T[]): T =>
+// unhappy with the randomness so i'm going way overkill lol
-    xs[Math.floor(Math.random() * xs.length)];
+export const pick_random = <T,>(xs: readonly T[]): T =>
+    xs[randomInt(xs.length - 1)];
 
 export const jitter = (n: number) => n * (Math.random() - 0.5);
 
@@ -284,6 +287,7 @@ export const Filler = ({ height }: { height: string }) => (
     <div style={`height:${height}`}></div>
 );
 
+/// nonfunctional, deno's toplevel await (:D) is generally the best workaround
 export function make_sync_no_matter_the_cost<T>(promise: Promise<T>): T {
     let done = false;
     let out;

html/this-is-not-a-chost.tsx

@@ -0,0 +1,50 @@
+import { render_and_copy } from "./common.tsx";
+
+const ThisIsNotAChost = ({
+    depth = 1,
+    max_depth,
+}: {
+    depth?: number;
+    max_depth: number;
+}) => (
+    <div
+        style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+        }}
+    >
+        <div
+            class="labeled"
+            style={{ flex: "1", width: "90%", overflow: "hidden" }}
+        >
+            {depth < max_depth ? (
+                <ThisIsNotAChost depth={depth + 1} max_depth={max_depth} />
+            ) : (
+                <span style={{ fontSize: `${1 / depth}rem` }}>hi lol</span>
+            )}
+        </div>
+        <div
+            class="label"
+            style={{
+                fontSize: `${1 / depth}rem`,
+                textAlign: "center",
+                marginTop: "0.5rem",
+                flex: "1",
+                width: "100%",
+            }}
+        >
+            <div style="box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 0.75rem; border-radius: 0.5rem; padding: 0.75rem; background-color: rgb(222, 217, 211); color: rgb(var(--color-notBlack));">
+                <div
+                    style={`background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' aria-hidden='true' class='h-6 w-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; width: ${
+                        1.5 / depth
+                    }rem; height: ${1.5 / depth}rem; display: inline-block;`}
+                ></div>
+                <div>Ceci n'est pas une chost</div>
+            </div>
+        </div>
+    </div>
+);
+
+render_and_copy(<ThisIsNotAChost max_depth={25} />);