@nastechai-research/ui 0.18.2

package/dist/ui/components/typography/small.d.ts

@@ -0,0 +1,2 @@
+import { type TypographyProps } from '.';
+export declare const Small: import("react").ForwardRefExoticComponent<Omit<TypographyProps<any>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/ui/components/typography/small.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Typography } from "./index.js";
+export const Small = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(Typography, { as: "small", mondwest: true, variant: "sm", ...{ ref, ...props } });
+  }
+);
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyBUeXBvZ3JhcGh5LCB0eXBlIFR5cG9ncmFwaHlQcm9wcyB9IGZyb20gJy4nXG5cbmV4cG9ydCBjb25zdCBTbWFsbCA9IGZvcndhcmRSZWY8SFRNTFNwYW5FbGVtZW50LCBUeXBvZ3JhcGh5UHJvcHM8YW55Pj4oXG4gIChwcm9wcywgcmVmKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxUeXBvZ3JhcGh5IGFzPVwic21hbGxcIiBtb25kd2VzdCB2YXJpYW50PVwic21cIiB7Li4ueyByZWYsIC4uLnByb3BzIH19IC8+XG4gICAgKVxuICB9XG4pXG4iXSwKICAibWFwcGluZ3MiOiAiQUFPTTtBQVBOLFNBQVMsa0JBQWtCO0FBRTNCLFNBQVMsa0JBQXdDO0FBRTFDLGFBQU0sUUFBUTtBQUFBLEVBQ25CLENBQUMsT0FBTyxRQUFRO0FBQ2QsV0FDRSxvQkFBQyxjQUFXLElBQUcsU0FBUSxVQUFRLE1BQUMsU0FBUSxNQUFNLEdBQUcsRUFBRSxLQUFLLEdBQUcsTUFBTSxHQUFHO0FBQUEsRUFFeEU7QUFDRjsiLAogICJuYW1lcyI6IFtdCn0K

package/dist/ui/components/watchlist.d.ts

@@ -0,0 +1,11 @@
+export declare function Watchlist({ className, counter, items, scramble, ...props }: WatchlistProps): import("react").JSX.Element;
+interface WatchlistProps extends React.ComponentProps<'div'> {
+    counter?: boolean;
+    items: {
+        label?: React.ReactNode;
+        right?: React.ReactNode;
+        url?: string;
+    }[];
+    scramble?: boolean;
+}
+export {};

package/dist/ui/components/watchlist.js

@@ -0,0 +1,80 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
+import { Scramble } from "./ascii.js";
+import { LinkIcon } from "./icons/index.js";
+import { Typography } from "./typography/index.js";
+const ETH_RE = /^0x[a-fA-F0-9]{40}$/;
+const truncate = (a) => `${a.slice(0, 6)}${"\xB7".repeat(8)}${a.slice(-4)}`;
+export function Watchlist({
+  className,
+  counter = false,
+  items,
+  scramble = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", className), ...props, children: items.map(({ label, right, url }, i) => {
+    const isStr = typeof label === "string";
+    const eth = isStr && ETH_RE.test(label);
+    const text = eth ? truncate(label) : label;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: cn(
+          "grid items-center gap-2.5 px-2.5 py-1.5",
+          "text-display leading-[1.4]",
+          "hover:bg-midground/10! hover:ring-2 hover:ring-current/20",
+          "transition-all duration-500 hover:duration-0",
+          "opacity-(--midground-alpha)"
+        ),
+        href: url,
+        rel: "noopener noreferrer",
+        style: {
+          background: `color-mix(in oklch, var(--color-midground) ${10 * Math.max(0, 1 - i / 9)}%, transparent)`,
+          gridTemplateColumns: [
+            counter && "auto auto",
+            "1fr",
+            right && "auto",
+            url && "auto auto"
+          ].filter(Boolean).join(" ")
+        },
+        target: "_blank",
+        children: [
+          counter && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                className: "text-lg tracking-[0.35em] opacity-40",
+                compressed: true,
+                children: String(i + 1).padStart(2, "0")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] font-bold tracking-[0.4em] opacity-20", children: ":" })
+          ] }),
+          isStr ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: "min-w-0 overflow-hidden text-lg font-bold tracking-[0.35em]",
+              ...eth ? { mono: true } : { compressed: true },
+              children: scramble ? /* @__PURE__ */ jsx(Scramble, { delay: i * 80, text }) : text
+            }
+          ) : label,
+          right && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: "text-right text-sm tracking-widest opacity-40",
+              mono: true,
+              children: right
+            }
+          ),
+          url && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] tracking-[0.4em] opacity-20", children: ":" }),
+            /* @__PURE__ */ jsx(LinkIcon, { className: "text-midground size-3.5" })
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vLi4vdXRpbHMnXG5cbmltcG9ydCB7IFNjcmFtYmxlIH0gZnJvbSAnLi9hc2NpaSdcbmltcG9ydCB7IExpbmtJY29uIH0gZnJvbSAnLi9pY29ucydcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tICcuL3R5cG9ncmFwaHknXG5cbmNvbnN0IEVUSF9SRSA9IC9eMHhbYS1mQS1GMC05XXs0MH0kL1xuY29uc3QgdHJ1bmNhdGUgPSAoYTogc3RyaW5nKSA9PiBgJHthLnNsaWNlKDAsIDYpfSR7J1x1MDBCNycucmVwZWF0KDgpfSR7YS5zbGljZSgtNCl9YFxuXG5leHBvcnQgZnVuY3Rpb24gV2F0Y2hsaXN0KHtcbiAgY2xhc3NOYW1lLFxuICBjb3VudGVyID0gZmFsc2UsXG4gIGl0ZW1zLFxuICBzY3JhbWJsZSA9IGZhbHNlLFxuICAuLi5wcm9wc1xufTogV2F0Y2hsaXN0UHJvcHMpIHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17Y24oJ2ZsZXggZmxleC1jb2wgZ2FwLTMnLCBjbGFzc05hbWUpfSB7Li4ucHJvcHN9PlxuICAgICAge2l0ZW1zLm1hcCgoeyBsYWJlbCwgcmlnaHQsIHVybCB9LCBpKSA9PiB7XG4gICAgICAgIGNvbnN0IGlzU3RyID0gdHlwZW9mIGxhYmVsID09PSAnc3RyaW5nJ1xuICAgICAgICBjb25zdCBldGggPSBpc1N0ciAmJiBFVEhfUkUudGVzdChsYWJlbClcbiAgICAgICAgY29uc3QgdGV4dCA9IGV0aCA/IHRydW5jYXRlKGxhYmVsKSA6IChsYWJlbCBhcyBzdHJpbmcpXG5cbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8YVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbihcbiAgICAgICAgICAgICAgJ2dyaWQgaXRlbXMtY2VudGVyIGdhcC0yLjUgcHgtMi41IHB5LTEuNScsXG4gICAgICAgICAgICAgICd0ZXh0LWRpc3BsYXkgbGVhZGluZy1bMS40XScsXG4gICAgICAgICAgICAgICdob3ZlcjpiZy1taWRncm91bmQvMTAhIGhvdmVyOnJpbmctMiBob3ZlcjpyaW5nLWN1cnJlbnQvMjAnLFxuICAgICAgICAgICAgICAndHJhbnNpdGlvbi1hbGwgZHVyYXRpb24tNTAwIGhvdmVyOmR1cmF0aW9uLTAnLFxuICAgICAgICAgICAgICAnb3BhY2l0eS0oLS1taWRncm91bmQtYWxwaGEpJ1xuICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIGhyZWY9e3VybH1cbiAgICAgICAgICAgIGtleT17aX1cbiAgICAgICAgICAgIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogYGNvbG9yLW1peChpbiBva2xjaCwgdmFyKC0tY29sb3ItbWlkZ3JvdW5kKSAkezEwICogTWF0aC5tYXgoMCwgMSAtIGkgLyA5KX0lLCB0cmFuc3BhcmVudClgLFxuICAgICAgICAgICAgICBncmlkVGVtcGxhdGVDb2x1bW5zOiBbXG4gICAgICAgICAgICAgICAgY291bnRlciAmJiAnYXV0byBhdXRvJyxcbiAgICAgICAgICAgICAgICAnMWZyJyxcbiAgICAgICAgICAgICAgICByaWdodCAmJiAnYXV0bycsXG4gICAgICAgICAgICAgICAgdXJsICYmICdhdXRvIGF1dG8nXG4gICAgICAgICAgICAgIF1cbiAgICAgICAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NvdW50ZXIgJiYgKFxuICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgIDxUeXBvZ3JhcGh5XG4gICAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJ0ZXh0LWxnIHRyYWNraW5nLVswLjM1ZW1dIG9wYWNpdHktNDBcIlxuICAgICAgICAgICAgICAgICAgY29tcHJlc3NlZFxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtTdHJpbmcoaSArIDEpLnBhZFN0YXJ0KDIsICcwJyl9XG4gICAgICAgICAgICAgICAgPC9UeXBvZ3JhcGh5PlxuXG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dC1bMC44MTI1cmVtXSBmb250LWJvbGQgdHJhY2tpbmctWzAuNGVtXSBvcGFjaXR5LTIwXCI+XG4gICAgICAgICAgICAgICAgICA6XG4gICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICl9XG5cbiAgICAgICAgICAgIHtpc1N0ciA/IChcbiAgICAgICAgICAgICAgPFR5cG9ncmFwaHlcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJtaW4tdy0wIG92ZXJmbG93LWhpZGRlbiB0ZXh0LWxnIGZvbnQtYm9sZCB0cmFja2luZy1bMC4zNWVtXVwiXG4gICAgICAgICAgICAgICAgey4uLihldGggPyB7IG1vbm86IHRydWUgfSA6IHsgY29tcHJlc3NlZDogdHJ1ZSB9KX1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtzY3JhbWJsZSA/IDxTY3JhbWJsZSBkZWxheT17aSAqIDgwfSB0ZXh0PXt0ZXh0fSAvPiA6IHRleHR9XG4gICAgICAgICAgICAgIDwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgIGxhYmVsXG4gICAgICAgICAgICApfVxuXG4gICAgICAgICAgICB7cmlnaHQgJiYgKFxuICAgICAgICAgICAgICA8VHlwb2dyYXBoeVxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cInRleHQtcmlnaHQgdGV4dC1zbSB0cmFja2luZy13aWRlc3Qgb3BhY2l0eS00MFwiXG4gICAgICAgICAgICAgICAgbW9ub1xuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3JpZ2h0fVxuICAgICAgICAgICAgICA8L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICApfVxuXG4gICAgICAgICAgICB7dXJsICYmIChcbiAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9XCJ0ZXh0LVswLjgxMjVyZW1dIHRyYWNraW5nLVswLjRlbV0gb3BhY2l0eS0yMFwiPlxuICAgICAgICAgICAgICAgICAgOlxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8TGlua0ljb24gY2xhc3NOYW1lPVwidGV4dC1taWRncm91bmQgc2l6ZS0zLjVcIiAvPlxuICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9hPlxuICAgICAgICApXG4gICAgICB9KX1cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5pbnRlcmZhY2UgV2F0Y2hsaXN0UHJvcHMgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnRQcm9wczwnZGl2Jz4ge1xuICBjb3VudGVyPzogYm9vbGVhblxuICBpdGVtczogeyBsYWJlbD86IFJlYWN0LlJlYWN0Tm9kZTsgcmlnaHQ/OiBSZWFjdC5SZWFjdE5vZGU7IHVybD86IHN0cmluZyB9W11cbiAgc2NyYW1ibGU/OiBib29sZWFuXG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBbURjLG1CQUNFLEtBREY7QUFqRGQsU0FBUyxVQUFVO0FBRW5CLFNBQVMsZ0JBQWdCO0FBQ3pCLFNBQVMsZ0JBQWdCO0FBQ3pCLFNBQVMsa0JBQWtCO0FBRTNCLE1BQU0sU0FBUztBQUNmLE1BQU0sV0FBVyxDQUFDLE1BQWMsR0FBRyxFQUFFLE1BQU0sR0FBRyxDQUFDLENBQUMsR0FBRyxPQUFJLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxNQUFNLEVBQUUsQ0FBQztBQUV2RSxnQkFBUyxVQUFVO0FBQUEsRUFDeEI7QUFBQSxFQUNBLFVBQVU7QUFBQSxFQUNWO0FBQUEsRUFDQSxXQUFXO0FBQUEsRUFDWCxHQUFHO0FBQ0wsR0FBbUI7QUFDakIsU0FDRSxvQkFBQyxTQUFJLFdBQVcsR0FBRyx1QkFBdUIsU0FBUyxHQUFJLEdBQUcsT0FDdkQsZ0JBQU0sSUFBSSxDQUFDLEVBQUUsT0FBTyxPQUFPLElBQUksR0FBRyxNQUFNO0FBQ3ZDLFVBQU0sUUFBUSxPQUFPLFVBQVU7QUFDL0IsVUFBTSxNQUFNLFNBQVMsT0FBTyxLQUFLLEtBQUs7QUFDdEMsVUFBTSxPQUFPLE1BQU0sU0FBUyxLQUFLLElBQUs7QUFFdEMsV0FDRTtBQUFBLE1BQUM7QUFBQTtBQUFBLFFBQ0MsV0FBVztBQUFBLFVBQ1Q7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsUUFDRjtBQUFBLFFBQ0EsTUFBTTtBQUFBLFFBRU4sS0FBSTtBQUFBLFFBQ0osT0FBTztBQUFBLFVBQ0wsWUFBWSw4Q0FBOEMsS0FBSyxLQUFLLElBQUksR0FBRyxJQUFJLElBQUksQ0FBQyxDQUFDO0FBQUEsVUFDckYscUJBQXFCO0FBQUEsWUFDbkIsV0FBVztBQUFBLFlBQ1g7QUFBQSxZQUNBLFNBQVM7QUFBQSxZQUNULE9BQU87QUFBQSxVQUNULEVBQ0csT0FBTyxPQUFPLEVBQ2QsS0FBSyxHQUFHO0FBQUEsUUFDYjtBQUFBLFFBQ0EsUUFBTztBQUFBLFFBRU47QUFBQSxxQkFDQyxpQ0FDRTtBQUFBO0FBQUEsY0FBQztBQUFBO0FBQUEsZ0JBQ0MsV0FBVTtBQUFBLGdCQUNWLFlBQVU7QUFBQSxnQkFFVCxpQkFBTyxJQUFJLENBQUMsRUFBRSxTQUFTLEdBQUcsR0FBRztBQUFBO0FBQUEsWUFDaEM7QUFBQSxZQUVBLG9CQUFDLFVBQUssV0FBVSwwREFBeUQsZUFFekU7QUFBQSxhQUNGO0FBQUEsVUFHRCxRQUNDO0FBQUEsWUFBQztBQUFBO0FBQUEsY0FDQyxXQUFVO0FBQUEsY0FDVCxHQUFJLE1BQU0sRUFBRSxNQUFNLEtBQUssSUFBSSxFQUFFLFlBQVksS0FBSztBQUFBLGNBRTlDLHFCQUFXLG9CQUFDLFlBQVMsT0FBTyxJQUFJLElBQUksTUFBWSxJQUFLO0FBQUE7QUFBQSxVQUN4RCxJQUVBO0FBQUEsVUFHRCxTQUNDO0FBQUEsWUFBQztBQUFBO0FBQUEsY0FDQyxXQUFVO0FBQUEsY0FDVixNQUFJO0FBQUEsY0FFSDtBQUFBO0FBQUEsVUFDSDtBQUFBLFVBR0QsT0FDQyxpQ0FDRTtBQUFBLGdDQUFDLFVBQUssV0FBVSxnREFBK0MsZUFFL0Q7QUFBQSxZQUNBLG9CQUFDLFlBQVMsV0FBVSwyQkFBMEI7QUFBQSxhQUNoRDtBQUFBO0FBQUE7QUFBQSxNQXhERztBQUFBLElBMERQO0FBQUEsRUFFSixDQUFDLEdBQ0g7QUFFSjsiLAogICJuYW1lcyI6IFtdCn0K

package/dist/ui/fonts.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'Collapse';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/Collapse-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Collapse';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/Collapse-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Compressed';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/RulesCompressed-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Compressed';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/RulesCompressed-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Expanded';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/RulesExpanded-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Expanded';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/RulesExpanded-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Mondwest';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/Mondwest-Regular.woff2') format('woff2');
+}
+
+:root {
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
+}

package/dist/ui/footer.d.ts

@@ -0,0 +1,20 @@
+import { type SocialLink } from './components/socials';
+export declare function Footer({ className, groups, LinkComponent, socials, socialsLabel, style, themeLabel, themeToggle }: FooterProps): import("react").JSX.Element;
+export interface FooterGroup {
+    label: string;
+    links: (FooterLink | string)[];
+}
+export interface FooterLink {
+    href: string;
+    label: string;
+}
+export interface FooterProps {
+    className?: string;
+    groups?: FooterGroup[];
+    LinkComponent?: React.ElementType;
+    socials?: SocialLink[];
+    socialsLabel?: string;
+    style?: React.CSSProperties;
+    themeLabel?: string;
+    themeToggle?: boolean;
+}

package/dist/ui/footer.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useCssVarDims } from "../hooks/use-css-var-dims.js";
+import { Cell, Grid } from "./components/grid/index.js";
+import { Socials } from "./components/socials.js";
+import { ThemeToggle } from "./components/theme-toggle.js";
+import { Small } from "./components/typography/small.js";
+const DEFAULT_GROUPS = [
+  { label: "Product", links: ["Overview", "Features", "Pricing"] },
+  { label: "Resources", links: ["Docs", "Blog", "Support"] },
+  { label: "Company", links: ["About", "Careers", "Contact"] },
+  { label: "Legal", links: ["Privacy", "Terms", "License"] }
+];
+export function Footer({
+  className,
+  groups = DEFAULT_GROUPS,
+  LinkComponent = "a",
+  socials,
+  socialsLabel = "Socials",
+  style,
+  themeLabel = "Theme",
+  themeToggle = false
+}) {
+  const ref = useRef(null);
+  useCssVarDims("footer", ref);
+  const hasSocials = (socials?.length ?? 0) > 0;
+  const hasChrome = hasSocials || themeToggle;
+  return /* @__PURE__ */ jsxs("footer", { className, ref, style, children: [
+    /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Small, { className: "opacity-50", children: [
+        "\xA9",
+        (/* @__PURE__ */ new Date()).getFullYear()
+      ] }) }),
+      groups.map(({ label, links }) => /* @__PURE__ */ jsxs(Cell, { children: [
+        /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: label }),
+        /* @__PURE__ */ jsx("nav", { className: "mt-3 flex flex-col gap-2", children: links.map((link) => {
+          const href = typeof link === "string" ? `/${link.toLowerCase()}` : link.href;
+          const label2 = typeof link === "string" ? link : link.label;
+          return /* @__PURE__ */ jsx(
+            Small,
+            {
+              as: LinkComponent,
+              className: "underline",
+              href,
+              children: label2
+            },
+            label2
+          );
+        }) })
+      ] }, label))
+    ] }),
+    hasChrome && /* @__PURE__ */ jsxs(Grid, { children: [
+      hasSocials && /* @__PURE__ */ jsxs(Cell, { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: socialsLabel }),
+        /* @__PURE__ */ jsx(Socials, { items: socials })
+      ] }),
+      themeToggle && /* @__PURE__ */ jsxs(Cell, { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: themeLabel }),
+        /* @__PURE__ */ jsx(ThemeToggle, {})
+      ] })
+    ] })
+  ] });
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZVJlZiB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VDc3NWYXJEaW1zIH0gZnJvbSAnLi4vaG9va3MvdXNlLWNzcy12YXItZGltcydcbmltcG9ydCB7IENlbGwsIEdyaWQgfSBmcm9tICcuL2NvbXBvbmVudHMvZ3JpZCdcbmltcG9ydCB7IFNvY2lhbHMsIHR5cGUgU29jaWFsTGluayB9IGZyb20gJy4vY29tcG9uZW50cy9zb2NpYWxzJ1xuaW1wb3J0IHsgVGhlbWVUb2dnbGUgfSBmcm9tICcuL2NvbXBvbmVudHMvdGhlbWUtdG9nZ2xlJ1xuaW1wb3J0IHsgU21hbGwgfSBmcm9tICcuL2NvbXBvbmVudHMvdHlwb2dyYXBoeS9zbWFsbCdcblxuY29uc3QgREVGQVVMVF9HUk9VUFM6IEZvb3Rlckdyb3VwW10gPSBbXG4gIHsgbGFiZWw6ICdQcm9kdWN0JywgbGlua3M6IFsnT3ZlcnZpZXcnLCAnRmVhdHVyZXMnLCAnUHJpY2luZyddIH0sXG4gIHsgbGFiZWw6ICdSZXNvdXJjZXMnLCBsaW5rczogWydEb2NzJywgJ0Jsb2cnLCAnU3VwcG9ydCddIH0sXG4gIHsgbGFiZWw6ICdDb21wYW55JywgbGlua3M6IFsnQWJvdXQnLCAnQ2FyZWVycycsICdDb250YWN0J10gfSxcbiAgeyBsYWJlbDogJ0xlZ2FsJywgbGlua3M6IFsnUHJpdmFjeScsICdUZXJtcycsICdMaWNlbnNlJ10gfVxuXVxuXG5leHBvcnQgZnVuY3Rpb24gRm9vdGVyKHtcbiAgY2xhc3NOYW1lLFxuICBncm91cHMgPSBERUZBVUxUX0dST1VQUyxcbiAgTGlua0NvbXBvbmVudCA9ICdhJyxcbiAgc29jaWFscyxcbiAgc29jaWFsc0xhYmVsID0gJ1NvY2lhbHMnLFxuICBzdHlsZSxcbiAgdGhlbWVMYWJlbCA9ICdUaGVtZScsXG4gIHRoZW1lVG9nZ2xlID0gZmFsc2Vcbn06IEZvb3RlclByb3BzKSB7XG4gIGNvbnN0IHJlZiA9IHVzZVJlZjxIVE1MRWxlbWVudD4obnVsbClcbiAgdXNlQ3NzVmFyRGltcygnZm9vdGVyJywgcmVmKVxuXG4gIGNvbnN0IGhhc1NvY2lhbHMgPSAoc29jaWFscz8ubGVuZ3RoID8/IDApID4gMFxuICBjb25zdCBoYXNDaHJvbWUgPSBoYXNTb2NpYWxzIHx8IHRoZW1lVG9nZ2xlXG5cbiAgcmV0dXJuIChcbiAgICA8Zm9vdGVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfSByZWY9e3JlZn0gc3R5bGU9e3N0eWxlfT5cbiAgICAgIDxHcmlkPlxuICAgICAgICA8Q2VsbD5cbiAgICAgICAgICA8U21hbGwgY2xhc3NOYW1lPVwib3BhY2l0eS01MFwiPiZjb3B5O3tuZXcgRGF0ZSgpLmdldEZ1bGxZZWFyKCl9PC9TbWFsbD5cbiAgICAgICAgPC9DZWxsPlxuXG4gICAgICAgIHtncm91cHMubWFwKCh7IGxhYmVsLCBsaW5rcyB9KSA9PiAoXG4gICAgICAgICAgPENlbGwga2V5PXtsYWJlbH0+XG4gICAgICAgICAgICA8U21hbGwgY2xhc3NOYW1lPVwib3BhY2l0eS01MFwiPntsYWJlbH08L1NtYWxsPlxuXG4gICAgICAgICAgICA8bmF2IGNsYXNzTmFtZT1cIm10LTMgZmxleCBmbGV4LWNvbCBnYXAtMlwiPlxuICAgICAgICAgICAgICB7bGlua3MubWFwKGxpbmsgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IGhyZWYgPSB0eXBlb2YgbGluayA9PT0gJ3N0cmluZydcbiAgICAgICAgICAgICAgICAgID8gYC8ke2xpbmsudG9Mb3dlckNhc2UoKX1gXG4gICAgICAgICAgICAgICAgICA6IGxpbmsuaHJlZlxuXG4gICAgICAgICAgICAgICAgY29uc3QgbGFiZWwgPSB0eXBlb2YgbGluayA9PT0gJ3N0cmluZycgPyBsaW5rIDogbGluay5sYWJlbFxuXG4gICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgIDxTbWFsbFxuICAgICAgICAgICAgICAgICAgICBhcz17TGlua0NvbXBvbmVudH1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwidW5kZXJsaW5lXCJcbiAgICAgICAgICAgICAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtsYWJlbH1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2xhYmVsfVxuICAgICAgICAgICAgICAgICAgPC9TbWFsbD5cbiAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgPC9uYXY+XG4gICAgICAgICAgPC9DZWxsPlxuICAgICAgICApKX1cbiAgICAgIDwvR3JpZD5cblxuICAgICAge2hhc0Nocm9tZSAmJiAoXG4gICAgICAgIDxHcmlkPlxuICAgICAgICAgIHtoYXNTb2NpYWxzICYmIChcbiAgICAgICAgICAgIDxDZWxsIGNsYXNzTmFtZT1cImZsZXggaXRlbXMtc3RhcnQganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICAgICAgICAgIDxTbWFsbCBjbGFzc05hbWU9XCJvcGFjaXR5LTUwXCI+e3NvY2lhbHNMYWJlbH08L1NtYWxsPlxuXG4gICAgICAgICAgICAgIDxTb2NpYWxzIGl0ZW1zPXtzb2NpYWxzIX0gLz5cbiAgICAgICAgICAgIDwvQ2VsbD5cbiAgICAgICAgICApfVxuXG4gICAgICAgICAge3RoZW1lVG9nZ2xlICYmIChcbiAgICAgICAgICAgIDxDZWxsIGNsYXNzTmFtZT1cImZsZXggaXRlbXMtc3RhcnQganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICAgICAgICAgIDxTbWFsbCBjbGFzc05hbWU9XCJvcGFjaXR5LTUwXCI+e3RoZW1lTGFiZWx9PC9TbWFsbD5cblxuICAgICAgICAgICAgICA8VGhlbWVUb2dnbGUgLz5cbiAgICAgICAgICAgIDwvQ2VsbD5cbiAgICAgICAgICApfVxuICAgICAgICA8L0dyaWQ+XG4gICAgICApfVxuICAgIDwvZm9vdGVyPlxuICApXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRm9vdGVyR3JvdXAge1xuICBsYWJlbDogc3RyaW5nXG4gIGxpbmtzOiAoRm9vdGVyTGluayB8IHN0cmluZylbXVxufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZvb3Rlckxpbmsge1xuICBocmVmOiBzdHJpbmdcbiAgbGFiZWw6IHN0cmluZ1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZvb3RlclByb3BzIHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGdyb3Vwcz86IEZvb3Rlckdyb3VwW11cbiAgTGlua0NvbXBvbmVudD86IFJlYWN0LkVsZW1lbnRUeXBlXG4gIHNvY2lhbHM/OiBTb2NpYWxMaW5rW11cbiAgc29jaWFsc0xhYmVsPzogc3RyaW5nXG4gIHN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllc1xuICB0aGVtZUxhYmVsPzogc3RyaW5nXG4gIHRoZW1lVG9nZ2xlPzogYm9vbGVhblxufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQW9DUSxjQUNFLFlBREY7QUFsQ1IsU0FBUyxjQUFjO0FBRXZCLFNBQVMscUJBQXFCO0FBQzlCLFNBQVMsTUFBTSxZQUFZO0FBQzNCLFNBQVMsZUFBZ0M7QUFDekMsU0FBUyxtQkFBbUI7QUFDNUIsU0FBUyxhQUFhO0FBRXRCLE1BQU0saUJBQWdDO0FBQUEsRUFDcEMsRUFBRSxPQUFPLFdBQVcsT0FBTyxDQUFDLFlBQVksWUFBWSxTQUFTLEVBQUU7QUFBQSxFQUMvRCxFQUFFLE9BQU8sYUFBYSxPQUFPLENBQUMsUUFBUSxRQUFRLFNBQVMsRUFBRTtBQUFBLEVBQ3pELEVBQUUsT0FBTyxXQUFXLE9BQU8sQ0FBQyxTQUFTLFdBQVcsU0FBUyxFQUFFO0FBQUEsRUFDM0QsRUFBRSxPQUFPLFNBQVMsT0FBTyxDQUFDLFdBQVcsU0FBUyxTQUFTLEVBQUU7QUFDM0Q7QUFFTyxnQkFBUyxPQUFPO0FBQUEsRUFDckI7QUFBQSxFQUNBLFNBQVM7QUFBQSxFQUNULGdCQUFnQjtBQUFBLEVBQ2hCO0FBQUEsRUFDQSxlQUFlO0FBQUEsRUFDZjtBQUFBLEVBQ0EsYUFBYTtBQUFBLEVBQ2IsY0FBYztBQUNoQixHQUFnQjtBQUNkLFFBQU0sTUFBTSxPQUFvQixJQUFJO0FBQ3BDLGdCQUFjLFVBQVUsR0FBRztBQUUzQixRQUFNLGNBQWMsU0FBUyxVQUFVLEtBQUs7QUFDNUMsUUFBTSxZQUFZLGNBQWM7QUFFaEMsU0FDRSxxQkFBQyxZQUFPLFdBQXNCLEtBQVUsT0FDdEM7QUFBQSx5QkFBQyxRQUNDO0FBQUEsMEJBQUMsUUFDQywrQkFBQyxTQUFNLFdBQVUsY0FBYTtBQUFBO0FBQUEsU0FBTyxvQkFBSSxLQUFLLEdBQUUsWUFBWTtBQUFBLFNBQUUsR0FDaEU7QUFBQSxNQUVDLE9BQU8sSUFBSSxDQUFDLEVBQUUsT0FBTyxNQUFNLE1BQzFCLHFCQUFDLFFBQ0M7QUFBQSw0QkFBQyxTQUFNLFdBQVUsY0FBYyxpQkFBTTtBQUFBLFFBRXJDLG9CQUFDLFNBQUksV0FBVSw0QkFDWixnQkFBTSxJQUFJLFVBQVE7QUFDakIsZ0JBQU0sT0FBTyxPQUFPLFNBQVMsV0FDekIsSUFBSSxLQUFLLFlBQVksQ0FBQyxLQUN0QixLQUFLO0FBRVQsZ0JBQU1BLFNBQVEsT0FBTyxTQUFTLFdBQVcsT0FBTyxLQUFLO0FBRXJELGlCQUNFO0FBQUEsWUFBQztBQUFBO0FBQUEsY0FDQyxJQUFJO0FBQUEsY0FDSixXQUFVO0FBQUEsY0FDVjtBQUFBLGNBR0MsVUFBQUE7QUFBQTtBQUFBLFlBRklBO0FBQUEsVUFHUDtBQUFBLFFBRUosQ0FBQyxHQUNIO0FBQUEsV0F0QlMsS0F1QlgsQ0FDRDtBQUFBLE9BQ0g7QUFBQSxJQUVDLGFBQ0MscUJBQUMsUUFDRTtBQUFBLG9CQUNDLHFCQUFDLFFBQUssV0FBVSxvQ0FDZDtBQUFBLDRCQUFDLFNBQU0sV0FBVSxjQUFjLHdCQUFhO0FBQUEsUUFFNUMsb0JBQUMsV0FBUSxPQUFPLFNBQVU7QUFBQSxTQUM1QjtBQUFBLE1BR0QsZUFDQyxxQkFBQyxRQUFLLFdBQVUsb0NBQ2Q7QUFBQSw0QkFBQyxTQUFNLFdBQVUsY0FBYyxzQkFBVztBQUFBLFFBRTFDLG9CQUFDLGVBQVk7QUFBQSxTQUNmO0FBQUEsT0FFSjtBQUFBLEtBRUo7QUFFSjsiLAogICJuYW1lcyI6IFsibGFiZWwiXQp9Cg==

package/dist/ui/globals.css

@@ -0,0 +1,395 @@
+@source ".";
+@import './components/fit-text/fit-text.css' layer(components);
+@import './components/grid/grid.css' layer(components);
+@view-transition {
+  navigation: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @view-transition {
+    navigation: none;
+  }
+}
+
+::view-transition-old(page),
+::view-transition-new(page) {
+  animation-duration: 0.25s;
+  animation-timing-function: ease-out;
+}
+
+::view-transition-old(page) {
+  animation: fade-out 0.25s ease-out;
+}
+
+::view-transition-new(page) {
+  animation: fade-in 0.25s ease-out;
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out both;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.6s ease-out both;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out both;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 12s linear infinite;
+}
+
+@keyframes march {
+  to {
+    background-position: 0.5rem 0;
+  }
+}
+
+.group:hover .blink {
+  animation: blink 1s step-end infinite;
+}
+
+.dither {
+  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%)
+    0 0 / 2px 2px;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-base: var(--background-base);
+  --color-midground: var(--midground);
+  --color-midground-base: var(--midground-base);
+  --color-foreground: var(--foreground);
+  --color-foreground-base: var(--foreground-base);
+  --color-gesso: #eaeaea;
+
+  /* Semantic tokens — defaults for DS preview; consumers (e.g. shadcn-style
+     dashboards) can remap these via their own @theme inline. */
+  --color-destructive: var(--destructive, #fb2c36);
+  --color-destructive-foreground: var(--destructive-foreground, #ffffff);
+  --color-success: var(--success, #4ade80);
+  --color-warning: var(--warning, #ffbd38);
+
+  /* Text hierarchy — semantic tokens with WCAG AA-targeted defaults.
+     Consumers can override `--text-*` on `:root` (or any scope) without
+     touching DS internals. No value here goes below 0.65 effective alpha
+     for primary/secondary so stacked `/N` opacity is unnecessary. */
+  --color-text-primary: var(--text-primary, var(--midground));
+  --color-text-secondary: var(
+    --text-secondary,
+    color-mix(in srgb, var(--midground-base) 80%, transparent)
+  );
+  --color-text-tertiary: var(
+    --text-tertiary,
+    color-mix(in srgb, var(--midground-base) 65%, transparent)
+  );
+  --color-text-disabled: var(
+    --text-disabled,
+    color-mix(in srgb, var(--midground-base) 45%, transparent)
+  );
+  --color-text-on-accent: var(--text-on-accent, var(--background));
+  --color-text-display: var(--text-display, var(--midground));
+
+  --color-current: currentColor;
+  --color-transparent: transparent;
+
+  --gap-inherit: inherit;
+  --height-between-header-footer: max(
+    400px,
+    calc(
+      100dvh - 5rem -
+        (var(--header-height, 3.5rem) + var(--footer-height, 4.35rem))
+    )
+  );
+}
+
+:root {
+  --background: color-mix(in srgb, #170d02 100%, transparent);
+  --background-base: #170d02;
+  --background-alpha: 1;
+  --midground: color-mix(in srgb, #ffac02 100%, transparent);
+  --midground-base: #ffac02;
+  --midground-alpha: 1;
+  --foreground: color-mix(in srgb, #fff 100%, transparent);
+  --foreground-base: #fff;
+  --foreground-alpha: 1;
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
+  --vsq: calc(0.5vw + 0.5vh);
+}
+
+@property --fit-captured-length {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
+
+@utility font-compressed {
+  font-family: var(--font-rules-compressed);
+}
+
+@utility font-expanded {
+  font-family: var(--font-rules-expanded);
+}
+
+@utility font-mondwest {
+  font-family: var(--font-mondwest);
+}
+
+@utility font-courier {
+  font-family: 'Courier New', var(--font-mono), monospace;
+}
+
+/* Brand display style — opt-in uppercase + tracking. Purely typographic;
+   composes with any font utility (font-mondwest, font-compressed,
+   font-mono, font-courier) and any color utility. Use on chrome
+   (buttons, badges, nav section headings, page titles) where the brand
+   look is intentional. Body content should NOT use this utility.
+   Consumers wanting the canonical look apply `text-display font-mondwest`
+   together. */
+@utility text-display {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+@utility font-serif {
+  font-family: 'Times New Roman', Times, serif;
+}
+
+@utility text-box-trim-none {
+  text-box-trim: none;
+}
+
+@utility text-box-trim-both {
+  text-box-trim: trim-both;
+}
+
+@utility text-box-trim-start {
+  text-box-trim: trim-start;
+}
+
+@utility text-box-trim-end {
+  text-box-trim: trim-end;
+}
+
+@utility grid-cols-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+@utility h-between-header-footer {
+  min-height: var(--height-between-header-footer);
+}
+
+@utility w-fill {
+  width: -webkit-fill-available;
+}
+
+@utility h-fill {
+  height: -webkit-fill-available;
+}
+
+@utility antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+@utility underline-from-font {
+  text-decoration-skip-ink: auto;
+  text-underline-position: from-font;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes gradient-stroke {
+  0% {
+    background-position: 15% 15%;
+  }
+
+  100% {
+    background-position: 75% 75%;
+  }
+}
+
+.arc-border {
+  --_t: clamp(0%, (0.5 - var(--foreground-alpha, 1)) * 99900%, 100%);
+  --arc-c0: color-mix(in srgb, var(--foreground) var(--_t), transparent);
+  --arc-c1: var(--midground);
+  --arc-c2: var(--background);
+  --arc-angle: 160deg;
+  --arc-width: 1.25px;
+  --arc-inset: -2px;
+  --arc-duration: 2.23s;
+  --arc-gradient: linear-gradient(
+    var(--arc-angle),
+    transparent 0%,
+    var(--arc-c0) 15%,
+    var(--arc-c1) 20%,
+    var(--arc-c2) 25%,
+    transparent 35%,
+    transparent 40%,
+    var(--arc-c0) 55%,
+    var(--arc-c1) 60%,
+    var(--arc-c2) 65%,
+    transparent 75%,
+    transparent 80%,
+    var(--arc-c0) 95%,
+    var(--arc-c1) 100%
+  );
+
+  @apply pointer-events-none absolute z-[-1] overflow-hidden rounded-[inherit];
+
+  inset: var(--arc-inset);
+  padding: var(--arc-width);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+
+  &::before {
+    content: '';
+    @apply absolute inset-0 rounded-[inherit];
+    background: var(--arc-gradient);
+    background-size: 300% 300%;
+    animation: gradient-stroke var(--arc-duration) linear infinite;
+  }
+}
+
+@layer base {
+  * {
+    @apply antialiased;
+
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+      scrollbar-color: color-mix(in srgb, var(--midground) 20%, transparent)
+        transparent;
+    }
+  }
+
+  ::-webkit-scrollbar {
+    width: 0.25rem;
+    height: 0.25rem;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 1rem;
+    min-height: 1rem;
+  }
+
+  *:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--midground) 20%, transparent);
+  }
+
+  html,
+  body {
+    scrollbar-color: color-mix(in srgb, var(--midground) 65%, transparent)
+      transparent;
+  }
+
+  html:hover,
+  body:hover {
+    scrollbar-color: color-mix(in srgb, var(--midground) 80%, transparent)
+      transparent;
+  }
+
+  html::-webkit-scrollbar-thumb,
+  body::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--midground) 65%, transparent);
+  }
+
+  html:hover::-webkit-scrollbar-thumb,
+  body:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--midground) 80%, transparent);
+  }
+
+  html {
+    font-size: clamp(14px, calc(14px + 2 * ((100vw - 1400px) / 400)), 18px);
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  .underline {
+    @apply underline-from-font underline decoration-current/25 decoration-solid decoration-auto underline-offset-1 transition-[text-decoration-color] hover:decoration-current;
+  }
+
+  *::selection,
+  code {
+    background: var(--selection-bg, var(--midground));
+    @apply text-background;
+  }
+}