├── .gitignore
├── src
    ├── const.ts
    ├── pages.tsx
    ├── middleware.ts
    ├── handlers.tsx
    └── components.tsx
├── README.md
├── package.json
├── Makefile
├── static
    └── css
    │   ├── input.css
    │   └── output.css
├── tsconfig.json
├── index.ts
└── bun.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | tmp
3 | node_modules


--------------------------------------------------------------------------------
/src/const.ts:
--------------------------------------------------------------------------------
1 | export const STORE_SOUTHROADS = "southroads";
2 | export const STORE_UTICA = "utica";
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Example .env
2 | ```bash
3 | ADMIN_USERNAME=admin
4 | ADMIN_PASSWORD=thepasswordthatbeatsit
5 | ADMIN_COOKIE=auth
6 | ADMIN_TOKEN=asdasddqwqwdsasd
7 | STORE_COOKIE=selected_store
8 | ```


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cfasuite",
 3 |   "module": "index.ts",
 4 |   "devDependencies": {
 5 |     "@types/bun": "latest",
 6 |     "@types/react": "^19.0.8"
 7 |   },
 8 |   "peerDependencies": {
 9 |     "typescript": "^5.0.0"
10 |   },
11 |   "type": "module",
12 |   "dependencies": {
13 |     "@types/react-dom": "^19.0.3",
14 |     "react-dom": "^19.0.0",
15 |     "xerus": "github:phillip-england/xerus"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | # vars
 2 | TAILWIND_INPUT = ./static/css/input.css
 3 | TAILWIND_OUTPUT = ./static/css/output.css
 4 | 
 5 | # running "make" will run this command
 6 | all: build
 7 | 
 8 | # The build target runs the TailwindCSS command
 9 | tw:
10 | 	tailwindcss -i $(TAILWIND_INPUT) -o $(TAILWIND_OUTPUT) --watch
11 | 
12 | # kills all activity on port 8080
13 | kill:
14 | 	sudo lsof -t -i:8080 | xargs kill -9
15 | 
16 | run:
17 | 	bun run --hot index.ts
18 | 
19 | combine:
20 | 	cat ./*.ts > combined.ts
21 | 


--------------------------------------------------------------------------------
/src/pages.tsx:
--------------------------------------------------------------------------------
 1 | import { FormLogin, Root, ScoreSelection, StoreSelection } from "./components";
 2 | 
 3 | export function PageLogin(props: {
 4 |   loginErr: string;
 5 | }) {
 6 |   return (
 7 |     <Root>
 8 |       <FormLogin loginErr={props.loginErr} />
 9 |     </Root>
10 |   );
11 | }
12 | 
13 | export function PageScorecard(props: {
14 |   currentPath: string;
15 | }) {
16 |   return (
17 |     <Root>
18 |       <StoreSelection currentPath={props.currentPath} />
19 |       <ScoreSelection />
20 |     </Root>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/static/css/input.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @custom-variant dark (&:where(.dark, .dark *));
 3 | 
 4 | @theme {
 5 |   --color-dracula-background: #282a36;
 6 |   --color-dracula-current: #44475a;
 7 |   --color-dracula-foreground: #f8f8f2;
 8 |   --color-dracula-comment: #6272a4;
 9 |   --color-dracula-cyan: #8be9fd;
10 |   --color-dracula-green: #50fa7b;
11 |   --color-dracula-orange: #ffb86c;
12 |   --color-dracula-pink: #ff79c6;
13 |   --color-dracula-purple: #bd93f9;
14 |   --color-dracula-red: #ff5555;
15 |   --color-dracula-yellow: #f1fa8c;
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Enable latest features
 4 |     "lib": ["ESNext", "DOM"],
 5 |     "target": "ESNext",
 6 |     "module": "ESNext",
 7 |     "moduleDetection": "force",
 8 |     "jsx": "react-jsx",
 9 |     "allowJs": true,
10 | 
11 |     // Bundler mode
12 |     "moduleResolution": "bundler",
13 |     "allowImportingTsExtensions": true,
14 |     "verbatimModuleSyntax": true,
15 |     "noEmit": true,
16 | 
17 |     // Best practices
18 |     "strict": true,
19 |     "skipLibCheck": true,
20 |     "noFallthroughCasesInSwitch": true,
21 | 
22 |     // Some stricter flags (disabled by default)
23 |     "noUnusedLocals": false,
24 |     "noUnusedParameters": false,
25 |     "noPropertyAccessFromIndexSignature": false
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | import { logger, Xerus } from "xerus/xerus";
 2 | import {
 3 |   handleHome,
 4 |   handleLogin,
 5 |   handleLogout,
 6 |   handleScorecard,
 7 |   handleStatic,
 8 | } from "./src/handlers";
 9 | import {
10 |   mwAdminAuth,
11 |   mwAdminRedirect,
12 |   mwStoreSelection,
13 | } from "./src/middleware";
14 | 
15 | const app = new Xerus();
16 | 
17 | app.DEBUG_MODE = true;
18 | 
19 | app.use(logger);
20 | 
21 | app.group("/app/scorecard", mwAdminAuth, mwStoreSelection)
22 |   .get("/leadership", handleScorecard)
23 |   .get("/talent", handleScorecard)
24 |   .get("/cem", handleScorecard)
25 |   .get("/sales", handleScorecard)
26 |   .get("/finance", handleScorecard)
27 |   .get("/logout", handleLogout);
28 | 
29 | app.group("/app", mwAdminAuth)
30 |   .get("/logout", handleLogout);
31 | 
32 | app
33 |   .get("/static/*", handleStatic)
34 |   .get("/", handleHome, mwAdminRedirect)
35 |   .post("/form/login", handleLogin);
36 | 
37 | const server = Bun.serve({
38 |   port: 8080,
39 |   fetch: async (req: Request) => {
40 |     return await app.run(req);
41 |   },
42 | });
43 | 
44 | console.log(`Server running on ${server.port}`);
45 | 


--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { Context, Middleware } from "xerus/xerus";
 2 | import { STORE_SOUTHROADS, STORE_UTICA } from "./const";
 3 | 
 4 | export const mwAdminRedirect = new Middleware(
 5 |   async (c: Context, next: any): Promise<void | Response> => {
 6 |     let authCookie = c.getCookie(process.env.ADMIN_COOKIE as string);
 7 |     if (authCookie) {
 8 |       return c.redirect("/app/scorecard");
 9 |     }
10 |     await next();
11 |   },
12 | );
13 | 
14 | export const mwAdminAuth = new Middleware(
15 |   async (c: Context, next: any): Promise<void | Response> => {
16 |     let authCookie = c.getCookie(process.env.ADMIN_COOKIE as string);
17 |     if (authCookie != process.env.ADMIN_TOKEN) {
18 |       return c.redirect("/");
19 |     }
20 |     await next();
21 |   },
22 | );
23 | 
24 | export const mwStoreSelection = new Middleware(
25 |   async (c: Context, next: any): Promise<void | Response> => {
26 |     let selectedStore = c.query("store");
27 |     let storeCookieName = process.env.STORE_COOKIE as string;
28 |     switch (selectedStore) {
29 |       case STORE_SOUTHROADS: {
30 |         c.setCookie(storeCookieName, STORE_SOUTHROADS);
31 |         break;
32 |       }
33 |       case STORE_UTICA: {
34 |         c.setCookie(storeCookieName, STORE_UTICA);
35 |         break;
36 |       }
37 |       default: {
38 |         let storeCookie = c.getCookie(storeCookieName);
39 |         if (!storeCookie) {
40 |           c.setCookie(storeCookieName, STORE_SOUTHROADS);
41 |         }
42 |       }
43 |     }
44 |     await next();
45 |   },
46 | );
47 | 


--------------------------------------------------------------------------------
/src/handlers.tsx:
--------------------------------------------------------------------------------
 1 | import { BodyType, Context, Handler, logger } from "xerus/xerus";
 2 | import { renderToString } from "react-dom/server";
 3 | import { PageLogin, PageScorecard } from "./pages";
 4 | 
 5 | export const handleHome = async (c: Context): Promise<Response> => {
 6 |   return c.html(renderToString(<PageLogin loginErr={c.query("loginErr")} />));
 7 | };
 8 | 
 9 | export const handleStatic = async (c: Context): Promise<Response> => {
10 |   let file = Bun.file("." + c.path);
11 |   if (!file) {
12 |     return c.status(404).text("file not found");
13 |   }
14 |   return await c.file(file);
15 | };
16 | 
17 | export const handleLogin = async (c: Context): Promise<Response> => {
18 |   let data = await c.parseBody(BodyType.FORM);
19 |   if (
20 |     data.username == process.env.ADMIN_USERNAME &&
21 |     data.password == process.env.ADMIN_PASSWORD
22 |   ) {
23 |     c.setCookie(
24 |       process.env.ADMIN_COOKIE as string,
25 |       process.env.ADMIN_TOKEN as string,
26 |       {
27 |         httpOnly: true,
28 |         path: "/",
29 |         secure: true,
30 |       },
31 |     );
32 |     return c.redirect("/app/scorecard/leadership");
33 |   }
34 |   return c.redirect("/?loginErr=invalid credentials");
35 | };
36 | 
37 | export const handleScorecard = async (c: Context): Promise<Response> => {
38 |   return c.html(renderToString(<PageScorecard currentPath={c.path} />));
39 | };
40 | 
41 | export const handleLogout = async (c: Context): Promise<Response> => {
42 |   c.clearCookie(process.env.ADMIN_COOKIE as string);
43 |   return c.redirect("/");
44 | };
45 | 


--------------------------------------------------------------------------------
/src/components.tsx:
--------------------------------------------------------------------------------
 1 | import { type ReactNode } from "react";
 2 | 
 3 | interface RootProps {
 4 |   children: ReactNode;
 5 | }
 6 | 
 7 | export function Root({ children }: RootProps) {
 8 |   return (
 9 |     <html lang="en">
10 |       <head>
11 |         <meta charSet="UTF-8" />
12 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
13 |         <title>Document</title>
14 |       </head>
15 |       <body>
16 |         {children}
17 |       </body>
18 |     </html>
19 |   );
20 | }
21 | 
22 | export function FormLogin(props: { loginErr: string }) {
23 |   return (
24 |     <form method="POST" action="/form/login">
25 |       <h1>Login</h1>
26 |       {props.loginErr && <p>{props.loginErr}</p>}
27 |       <div>
28 |         <label>Username</label>
29 |         <input type="text" name="username" defaultValue="admin" />
30 |       </div>
31 |       <div>
32 |         <label>Password</label>
33 |         <input
34 |           type="password"
35 |           name="password"
36 |           defaultValue="thepasswordthatbeatsit"
37 |         />
38 |       </div>
39 |       <input type="submit" />
40 |     </form>
41 |   );
42 | }
43 | 
44 | export function StoreSelection(props: {
45 |   currentPath: string;
46 | }) {
47 |   return (
48 |     <ul>
49 |       <li>
50 |         <a href={props.currentPath + "?store=southroads"}>Southroads</a>
51 |       </li>
52 |       <li>
53 |         <a href={props.currentPath + "?store=utica"}>Utica</a>
54 |       </li>
55 |     </ul>
56 |   );
57 | }
58 | 
59 | export function ScoreSelection() {
60 |   return (
61 |     <ul>
62 |       <li>
63 |         <a href="/app/scorecard/leadership">Leadership</a>
64 |       </li>
65 |       <li>
66 |         <a href="/app/scorecard/talent">Talent</a>
67 |       </li>
68 |       <li>
69 |         <a href="/app/scorecard/cem">Customer Experience</a>
70 |       </li>
71 |       <li>
72 |         <a href="/app/scorecard/sales">Sales & Brand Growth</a>
73 |       </li>
74 |       <li>
75 |         <a href="/app/scorecard/finance">Financial Stewardship</a>
76 |       </li>
77 |       <li>
78 |         <a href="/app/logout">Logout</a>
79 |       </li>
80 |     </ul>
81 |   );
82 | }
83 | 


--------------------------------------------------------------------------------
/bun.lock:
--------------------------------------------------------------------------------
 1 | {
 2 |   "lockfileVersion": 1,
 3 |   "workspaces": {
 4 |     "": {
 5 |       "name": "cfasuite",
 6 |       "dependencies": {
 7 |         "@types/react-dom": "^19.0.3",
 8 |         "xerus": "github:phillip-england/xerus",
 9 |         "react-dom": "^19.0.0",
10 |       },
11 |       "devDependencies": {
12 |         "@types/bun": "latest",
13 |         "@types/react": "^19.0.8",
14 |       },
15 |       "peerDependencies": {
16 |         "typescript": "^5.0.0",
17 |       },
18 |     },
19 |   },
20 |   "packages": {
21 |     "@types/bun": ["@types/bun@1.2.2", "", { "dependencies": { "bun-types": "1.2.2" } }, "sha512-tr74gdku+AEDN5ergNiBnplr7hpDp3V1h7fqI2GcR/rsUaM39jpSeKH0TFibRvU0KwniRx5POgaYnaXbk0hU+w=="],
22 | 
23 |     "@types/node": ["@types/node@22.13.2", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-Z+r8y3XL9ZpI2EY52YYygAFmo2/oWfNSj4BCpAXE2McAexDk8VcnBMGC9Djn9gTKt4d2T/hhXqmPzo4hfIXtTg=="],
24 | 
25 |     "@types/react": ["@types/react@19.0.8", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw=="],
26 | 
27 |     "@types/react-dom": ["@types/react-dom@19.0.3", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA=="],
28 | 
29 |     "@types/ws": ["@types/ws@8.5.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
30 | 
31 |     "bun-types": ["bun-types@1.2.2", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-RCbMH5elr9gjgDGDhkTTugA21XtJAy/9jkKe/G3WR2q17VPGhcquf9Sir6uay9iW+7P/BV0CAHA1XlHXMAVKHg=="],
32 | 
33 |     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
34 | 
35 |     "react": ["react@19.0.0", "", {}, "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="],
36 | 
37 |     "react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
38 | 
39 |     "scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="],
40 | 
41 |     "typescript": ["typescript@5.7.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="],
42 | 
43 |     "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
44 | 
45 |     "xerus": ["xerus@github:phillip-england/xerus#4075706", { "peerDependencies": { "typescript": "^5.0.0" } }, "Phillip-England-xerus-4075706"],
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/static/css/output.css:
--------------------------------------------------------------------------------
   1 | /*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
   2 | @layer theme, base, components, utilities;
   3 | @layer theme {
   4 |   :root {
   5 |     --font-sans:
   6 |       ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
   7 |       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   8 |     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   9 |     --font-mono:
  10 |       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
  11 |       "Courier New", monospace;
  12 |     --color-red-50: oklch(0.971 0.013 17.38);
  13 |     --color-red-100: oklch(0.936 0.032 17.717);
  14 |     --color-red-200: oklch(0.885 0.062 18.334);
  15 |     --color-red-300: oklch(0.808 0.114 19.571);
  16 |     --color-red-400: oklch(0.704 0.191 22.216);
  17 |     --color-red-500: oklch(0.637 0.237 25.331);
  18 |     --color-red-600: oklch(0.577 0.245 27.325);
  19 |     --color-red-700: oklch(0.505 0.213 27.518);
  20 |     --color-red-800: oklch(0.444 0.177 26.899);
  21 |     --color-red-900: oklch(0.396 0.141 25.723);
  22 |     --color-red-950: oklch(0.258 0.092 26.042);
  23 |     --color-orange-50: oklch(0.98 0.016 73.684);
  24 |     --color-orange-100: oklch(0.954 0.038 75.164);
  25 |     --color-orange-200: oklch(0.901 0.076 70.697);
  26 |     --color-orange-300: oklch(0.837 0.128 66.29);
  27 |     --color-orange-400: oklch(0.75 0.183 55.934);
  28 |     --color-orange-500: oklch(0.705 0.213 47.604);
  29 |     --color-orange-600: oklch(0.646 0.222 41.116);
  30 |     --color-orange-700: oklch(0.553 0.195 38.402);
  31 |     --color-orange-800: oklch(0.47 0.157 37.304);
  32 |     --color-orange-900: oklch(0.408 0.123 38.172);
  33 |     --color-orange-950: oklch(0.266 0.079 36.259);
  34 |     --color-amber-50: oklch(0.987 0.022 95.277);
  35 |     --color-amber-100: oklch(0.962 0.059 95.617);
  36 |     --color-amber-200: oklch(0.924 0.12 95.746);
  37 |     --color-amber-300: oklch(0.879 0.169 91.605);
  38 |     --color-amber-400: oklch(0.828 0.189 84.429);
  39 |     --color-amber-500: oklch(0.769 0.188 70.08);
  40 |     --color-amber-600: oklch(0.666 0.179 58.318);
  41 |     --color-amber-700: oklch(0.555 0.163 48.998);
  42 |     --color-amber-800: oklch(0.473 0.137 46.201);
  43 |     --color-amber-900: oklch(0.414 0.112 45.904);
  44 |     --color-amber-950: oklch(0.279 0.077 45.635);
  45 |     --color-yellow-50: oklch(0.987 0.026 102.212);
  46 |     --color-yellow-100: oklch(0.973 0.071 103.193);
  47 |     --color-yellow-200: oklch(0.945 0.129 101.54);
  48 |     --color-yellow-300: oklch(0.905 0.182 98.111);
  49 |     --color-yellow-400: oklch(0.852 0.199 91.936);
  50 |     --color-yellow-500: oklch(0.795 0.184 86.047);
  51 |     --color-yellow-600: oklch(0.681 0.162 75.834);
  52 |     --color-yellow-700: oklch(0.554 0.135 66.442);
  53 |     --color-yellow-800: oklch(0.476 0.114 61.907);
  54 |     --color-yellow-900: oklch(0.421 0.095 57.708);
  55 |     --color-yellow-950: oklch(0.286 0.066 53.813);
  56 |     --color-lime-50: oklch(0.986 0.031 120.757);
  57 |     --color-lime-100: oklch(0.967 0.067 122.328);
  58 |     --color-lime-200: oklch(0.938 0.127 124.321);
  59 |     --color-lime-300: oklch(0.897 0.196 126.665);
  60 |     --color-lime-400: oklch(0.841 0.238 128.85);
  61 |     --color-lime-500: oklch(0.768 0.233 130.85);
  62 |     --color-lime-600: oklch(0.648 0.2 131.684);
  63 |     --color-lime-700: oklch(0.532 0.157 131.589);
  64 |     --color-lime-800: oklch(0.453 0.124 130.933);
  65 |     --color-lime-900: oklch(0.405 0.101 131.063);
  66 |     --color-lime-950: oklch(0.274 0.072 132.109);
  67 |     --color-green-50: oklch(0.982 0.018 155.826);
  68 |     --color-green-100: oklch(0.962 0.044 156.743);
  69 |     --color-green-200: oklch(0.925 0.084 155.995);
  70 |     --color-green-300: oklch(0.871 0.15 154.449);
  71 |     --color-green-400: oklch(0.792 0.209 151.711);
  72 |     --color-green-500: oklch(0.723 0.219 149.579);
  73 |     --color-green-600: oklch(0.627 0.194 149.214);
  74 |     --color-green-700: oklch(0.527 0.154 150.069);
  75 |     --color-green-800: oklch(0.448 0.119 151.328);
  76 |     --color-green-900: oklch(0.393 0.095 152.535);
  77 |     --color-green-950: oklch(0.266 0.065 152.934);
  78 |     --color-emerald-50: oklch(0.979 0.021 166.113);
  79 |     --color-emerald-100: oklch(0.95 0.052 163.051);
  80 |     --color-emerald-200: oklch(0.905 0.093 164.15);
  81 |     --color-emerald-300: oklch(0.845 0.143 164.978);
  82 |     --color-emerald-400: oklch(0.765 0.177 163.223);
  83 |     --color-emerald-500: oklch(0.696 0.17 162.48);
  84 |     --color-emerald-600: oklch(0.596 0.145 163.225);
  85 |     --color-emerald-700: oklch(0.508 0.118 165.612);
  86 |     --color-emerald-800: oklch(0.432 0.095 166.913);
  87 |     --color-emerald-900: oklch(0.378 0.077 168.94);
  88 |     --color-emerald-950: oklch(0.262 0.051 172.552);
  89 |     --color-teal-50: oklch(0.984 0.014 180.72);
  90 |     --color-teal-100: oklch(0.953 0.051 180.801);
  91 |     --color-teal-200: oklch(0.91 0.096 180.426);
  92 |     --color-teal-300: oklch(0.855 0.138 181.071);
  93 |     --color-teal-400: oklch(0.777 0.152 181.912);
  94 |     --color-teal-500: oklch(0.704 0.14 182.503);
  95 |     --color-teal-600: oklch(0.6 0.118 184.704);
  96 |     --color-teal-700: oklch(0.511 0.096 186.391);
  97 |     --color-teal-800: oklch(0.437 0.078 188.216);
  98 |     --color-teal-900: oklch(0.386 0.063 188.416);
  99 |     --color-teal-950: oklch(0.277 0.046 192.524);
 100 |     --color-cyan-50: oklch(0.984 0.019 200.873);
 101 |     --color-cyan-100: oklch(0.956 0.045 203.388);
 102 |     --color-cyan-200: oklch(0.917 0.08 205.041);
 103 |     --color-cyan-300: oklch(0.865 0.127 207.078);
 104 |     --color-cyan-400: oklch(0.789 0.154 211.53);
 105 |     --color-cyan-500: oklch(0.715 0.143 215.221);
 106 |     --color-cyan-600: oklch(0.609 0.126 221.723);
 107 |     --color-cyan-700: oklch(0.52 0.105 223.128);
 108 |     --color-cyan-800: oklch(0.45 0.085 224.283);
 109 |     --color-cyan-900: oklch(0.398 0.07 227.392);
 110 |     --color-cyan-950: oklch(0.302 0.056 229.695);
 111 |     --color-sky-50: oklch(0.977 0.013 236.62);
 112 |     --color-sky-100: oklch(0.951 0.026 236.824);
 113 |     --color-sky-200: oklch(0.901 0.058 230.902);
 114 |     --color-sky-300: oklch(0.828 0.111 230.318);
 115 |     --color-sky-400: oklch(0.746 0.16 232.661);
 116 |     --color-sky-500: oklch(0.685 0.169 237.323);
 117 |     --color-sky-600: oklch(0.588 0.158 241.966);
 118 |     --color-sky-700: oklch(0.5 0.134 242.749);
 119 |     --color-sky-800: oklch(0.443 0.11 240.79);
 120 |     --color-sky-900: oklch(0.391 0.09 240.876);
 121 |     --color-sky-950: oklch(0.293 0.066 243.157);
 122 |     --color-blue-50: oklch(0.97 0.014 254.604);
 123 |     --color-blue-100: oklch(0.932 0.032 255.585);
 124 |     --color-blue-200: oklch(0.882 0.059 254.128);
 125 |     --color-blue-300: oklch(0.809 0.105 251.813);
 126 |     --color-blue-400: oklch(0.707 0.165 254.624);
 127 |     --color-blue-500: oklch(0.623 0.214 259.815);
 128 |     --color-blue-600: oklch(0.546 0.245 262.881);
 129 |     --color-blue-700: oklch(0.488 0.243 264.376);
 130 |     --color-blue-800: oklch(0.424 0.199 265.638);
 131 |     --color-blue-900: oklch(0.379 0.146 265.522);
 132 |     --color-blue-950: oklch(0.282 0.091 267.935);
 133 |     --color-indigo-50: oklch(0.962 0.018 272.314);
 134 |     --color-indigo-100: oklch(0.93 0.034 272.788);
 135 |     --color-indigo-200: oklch(0.87 0.065 274.039);
 136 |     --color-indigo-300: oklch(0.785 0.115 274.713);
 137 |     --color-indigo-400: oklch(0.673 0.182 276.935);
 138 |     --color-indigo-500: oklch(0.585 0.233 277.117);
 139 |     --color-indigo-600: oklch(0.511 0.262 276.966);
 140 |     --color-indigo-700: oklch(0.457 0.24 277.023);
 141 |     --color-indigo-800: oklch(0.398 0.195 277.366);
 142 |     --color-indigo-900: oklch(0.359 0.144 278.697);
 143 |     --color-indigo-950: oklch(0.257 0.09 281.288);
 144 |     --color-violet-50: oklch(0.969 0.016 293.756);
 145 |     --color-violet-100: oklch(0.943 0.029 294.588);
 146 |     --color-violet-200: oklch(0.894 0.057 293.283);
 147 |     --color-violet-300: oklch(0.811 0.111 293.571);
 148 |     --color-violet-400: oklch(0.702 0.183 293.541);
 149 |     --color-violet-500: oklch(0.606 0.25 292.717);
 150 |     --color-violet-600: oklch(0.541 0.281 293.009);
 151 |     --color-violet-700: oklch(0.491 0.27 292.581);
 152 |     --color-violet-800: oklch(0.432 0.232 292.759);
 153 |     --color-violet-900: oklch(0.38 0.189 293.745);
 154 |     --color-violet-950: oklch(0.283 0.141 291.089);
 155 |     --color-purple-50: oklch(0.977 0.014 308.299);
 156 |     --color-purple-100: oklch(0.946 0.033 307.174);
 157 |     --color-purple-200: oklch(0.902 0.063 306.703);
 158 |     --color-purple-300: oklch(0.827 0.119 306.383);
 159 |     --color-purple-400: oklch(0.714 0.203 305.504);
 160 |     --color-purple-500: oklch(0.627 0.265 303.9);
 161 |     --color-purple-600: oklch(0.558 0.288 302.321);
 162 |     --color-purple-700: oklch(0.496 0.265 301.924);
 163 |     --color-purple-800: oklch(0.438 0.218 303.724);
 164 |     --color-purple-900: oklch(0.381 0.176 304.987);
 165 |     --color-purple-950: oklch(0.291 0.149 302.717);
 166 |     --color-fuchsia-50: oklch(0.977 0.017 320.058);
 167 |     --color-fuchsia-100: oklch(0.952 0.037 318.852);
 168 |     --color-fuchsia-200: oklch(0.903 0.076 319.62);
 169 |     --color-fuchsia-300: oklch(0.833 0.145 321.434);
 170 |     --color-fuchsia-400: oklch(0.74 0.238 322.16);
 171 |     --color-fuchsia-500: oklch(0.667 0.295 322.15);
 172 |     --color-fuchsia-600: oklch(0.591 0.293 322.896);
 173 |     --color-fuchsia-700: oklch(0.518 0.253 323.949);
 174 |     --color-fuchsia-800: oklch(0.452 0.211 324.591);
 175 |     --color-fuchsia-900: oklch(0.401 0.17 325.612);
 176 |     --color-fuchsia-950: oklch(0.293 0.136 325.661);
 177 |     --color-pink-50: oklch(0.971 0.014 343.198);
 178 |     --color-pink-100: oklch(0.948 0.028 342.258);
 179 |     --color-pink-200: oklch(0.899 0.061 343.231);
 180 |     --color-pink-300: oklch(0.823 0.12 346.018);
 181 |     --color-pink-400: oklch(0.718 0.202 349.761);
 182 |     --color-pink-500: oklch(0.656 0.241 354.308);
 183 |     --color-pink-600: oklch(0.592 0.249 0.584);
 184 |     --color-pink-700: oklch(0.525 0.223 3.958);
 185 |     --color-pink-800: oklch(0.459 0.187 3.815);
 186 |     --color-pink-900: oklch(0.408 0.153 2.432);
 187 |     --color-pink-950: oklch(0.284 0.109 3.907);
 188 |     --color-rose-50: oklch(0.969 0.015 12.422);
 189 |     --color-rose-100: oklch(0.941 0.03 12.58);
 190 |     --color-rose-200: oklch(0.892 0.058 10.001);
 191 |     --color-rose-300: oklch(0.81 0.117 11.638);
 192 |     --color-rose-400: oklch(0.712 0.194 13.428);
 193 |     --color-rose-500: oklch(0.645 0.246 16.439);
 194 |     --color-rose-600: oklch(0.586 0.253 17.585);
 195 |     --color-rose-700: oklch(0.514 0.222 16.935);
 196 |     --color-rose-800: oklch(0.455 0.188 13.697);
 197 |     --color-rose-900: oklch(0.41 0.159 10.272);
 198 |     --color-rose-950: oklch(0.271 0.105 12.094);
 199 |     --color-slate-50: oklch(0.984 0.003 247.858);
 200 |     --color-slate-100: oklch(0.968 0.007 247.896);
 201 |     --color-slate-200: oklch(0.929 0.013 255.508);
 202 |     --color-slate-300: oklch(0.869 0.022 252.894);
 203 |     --color-slate-400: oklch(0.704 0.04 256.788);
 204 |     --color-slate-500: oklch(0.554 0.046 257.417);
 205 |     --color-slate-600: oklch(0.446 0.043 257.281);
 206 |     --color-slate-700: oklch(0.372 0.044 257.287);
 207 |     --color-slate-800: oklch(0.279 0.041 260.031);
 208 |     --color-slate-900: oklch(0.208 0.042 265.755);
 209 |     --color-slate-950: oklch(0.129 0.042 264.695);
 210 |     --color-gray-50: oklch(0.985 0.002 247.839);
 211 |     --color-gray-100: oklch(0.967 0.003 264.542);
 212 |     --color-gray-200: oklch(0.928 0.006 264.531);
 213 |     --color-gray-300: oklch(0.872 0.01 258.338);
 214 |     --color-gray-400: oklch(0.707 0.022 261.325);
 215 |     --color-gray-500: oklch(0.551 0.027 264.364);
 216 |     --color-gray-600: oklch(0.446 0.03 256.802);
 217 |     --color-gray-700: oklch(0.373 0.034 259.733);
 218 |     --color-gray-800: oklch(0.278 0.033 256.848);
 219 |     --color-gray-900: oklch(0.21 0.034 264.665);
 220 |     --color-gray-950: oklch(0.13 0.028 261.692);
 221 |     --color-zinc-50: oklch(0.985 0 0);
 222 |     --color-zinc-100: oklch(0.967 0.001 286.375);
 223 |     --color-zinc-200: oklch(0.92 0.004 286.32);
 224 |     --color-zinc-300: oklch(0.871 0.006 286.286);
 225 |     --color-zinc-400: oklch(0.705 0.015 286.067);
 226 |     --color-zinc-500: oklch(0.552 0.016 285.938);
 227 |     --color-zinc-600: oklch(0.442 0.017 285.786);
 228 |     --color-zinc-700: oklch(0.37 0.013 285.805);
 229 |     --color-zinc-800: oklch(0.274 0.006 286.033);
 230 |     --color-zinc-900: oklch(0.21 0.006 285.885);
 231 |     --color-zinc-950: oklch(0.141 0.005 285.823);
 232 |     --color-neutral-50: oklch(0.985 0 0);
 233 |     --color-neutral-100: oklch(0.97 0 0);
 234 |     --color-neutral-200: oklch(0.922 0 0);
 235 |     --color-neutral-300: oklch(0.87 0 0);
 236 |     --color-neutral-400: oklch(0.708 0 0);
 237 |     --color-neutral-500: oklch(0.556 0 0);
 238 |     --color-neutral-600: oklch(0.439 0 0);
 239 |     --color-neutral-700: oklch(0.371 0 0);
 240 |     --color-neutral-800: oklch(0.269 0 0);
 241 |     --color-neutral-900: oklch(0.205 0 0);
 242 |     --color-neutral-950: oklch(0.145 0 0);
 243 |     --color-stone-50: oklch(0.985 0.001 106.423);
 244 |     --color-stone-100: oklch(0.97 0.001 106.424);
 245 |     --color-stone-200: oklch(0.923 0.003 48.717);
 246 |     --color-stone-300: oklch(0.869 0.005 56.366);
 247 |     --color-stone-400: oklch(0.709 0.01 56.259);
 248 |     --color-stone-500: oklch(0.553 0.013 58.071);
 249 |     --color-stone-600: oklch(0.444 0.011 73.639);
 250 |     --color-stone-700: oklch(0.374 0.01 67.558);
 251 |     --color-stone-800: oklch(0.268 0.007 34.298);
 252 |     --color-stone-900: oklch(0.216 0.006 56.043);
 253 |     --color-stone-950: oklch(0.147 0.004 49.25);
 254 |     --color-black: #000;
 255 |     --color-white: #fff;
 256 |     --spacing: 0.25rem;
 257 |     --breakpoint-sm: 40rem;
 258 |     --breakpoint-md: 48rem;
 259 |     --breakpoint-lg: 64rem;
 260 |     --breakpoint-xl: 80rem;
 261 |     --breakpoint-2xl: 96rem;
 262 |     --container-3xs: 16rem;
 263 |     --container-2xs: 18rem;
 264 |     --container-xs: 20rem;
 265 |     --container-sm: 24rem;
 266 |     --container-md: 28rem;
 267 |     --container-lg: 32rem;
 268 |     --container-xl: 36rem;
 269 |     --container-2xl: 42rem;
 270 |     --container-3xl: 48rem;
 271 |     --container-4xl: 56rem;
 272 |     --container-5xl: 64rem;
 273 |     --container-6xl: 72rem;
 274 |     --container-7xl: 80rem;
 275 |     --text-xs: 0.75rem;
 276 |     --text-xs--line-height: calc(1 / 0.75);
 277 |     --text-sm: 0.875rem;
 278 |     --text-sm--line-height: calc(1.25 / 0.875);
 279 |     --text-base: 1rem;
 280 |     --text-base--line-height: calc(1.5 / 1);
 281 |     --text-lg: 1.125rem;
 282 |     --text-lg--line-height: calc(1.75 / 1.125);
 283 |     --text-xl: 1.25rem;
 284 |     --text-xl--line-height: calc(1.75 / 1.25);
 285 |     --text-2xl: 1.5rem;
 286 |     --text-2xl--line-height: calc(2 / 1.5);
 287 |     --text-3xl: 1.875rem;
 288 |     --text-3xl--line-height: calc(2.25 / 1.875);
 289 |     --text-4xl: 2.25rem;
 290 |     --text-4xl--line-height: calc(2.5 / 2.25);
 291 |     --text-5xl: 3rem;
 292 |     --text-5xl--line-height: 1;
 293 |     --text-6xl: 3.75rem;
 294 |     --text-6xl--line-height: 1;
 295 |     --text-7xl: 4.5rem;
 296 |     --text-7xl--line-height: 1;
 297 |     --text-8xl: 6rem;
 298 |     --text-8xl--line-height: 1;
 299 |     --text-9xl: 8rem;
 300 |     --text-9xl--line-height: 1;
 301 |     --font-weight-thin: 100;
 302 |     --font-weight-extralight: 200;
 303 |     --font-weight-light: 300;
 304 |     --font-weight-normal: 400;
 305 |     --font-weight-medium: 500;
 306 |     --font-weight-semibold: 600;
 307 |     --font-weight-bold: 700;
 308 |     --font-weight-extrabold: 800;
 309 |     --font-weight-black: 900;
 310 |     --tracking-tighter: -0.05em;
 311 |     --tracking-tight: -0.025em;
 312 |     --tracking-normal: 0em;
 313 |     --tracking-wide: 0.025em;
 314 |     --tracking-wider: 0.05em;
 315 |     --tracking-widest: 0.1em;
 316 |     --leading-tight: 1.25;
 317 |     --leading-snug: 1.375;
 318 |     --leading-normal: 1.5;
 319 |     --leading-relaxed: 1.625;
 320 |     --leading-loose: 2;
 321 |     --radius-xs: 0.125rem;
 322 |     --radius-sm: 0.25rem;
 323 |     --radius-md: 0.375rem;
 324 |     --radius-lg: 0.5rem;
 325 |     --radius-xl: 0.75rem;
 326 |     --radius-2xl: 1rem;
 327 |     --radius-3xl: 1.5rem;
 328 |     --radius-4xl: 2rem;
 329 |     --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
 330 |     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 331 |     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 332 |     --shadow-md:
 333 |       0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 334 |     --shadow-lg:
 335 |       0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 336 |     --shadow-xl:
 337 |       0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 338 |     --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 339 |     --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
 340 |     --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
 341 |     --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
 342 |     --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
 343 |     --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
 344 |     --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
 345 |     --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
 346 |     --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
 347 |     --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
 348 |     --ease-in: cubic-bezier(0.4, 0, 1, 1);
 349 |     --ease-out: cubic-bezier(0, 0, 0.2, 1);
 350 |     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 351 |     --animate-spin: spin 1s linear infinite;
 352 |     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 353 |     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 354 |     --animate-bounce: bounce 1s infinite;
 355 |     --blur-xs: 4px;
 356 |     --blur-sm: 8px;
 357 |     --blur-md: 12px;
 358 |     --blur-lg: 16px;
 359 |     --blur-xl: 24px;
 360 |     --blur-2xl: 40px;
 361 |     --blur-3xl: 64px;
 362 |     --perspective-dramatic: 100px;
 363 |     --perspective-near: 300px;
 364 |     --perspective-normal: 500px;
 365 |     --perspective-midrange: 800px;
 366 |     --perspective-distant: 1200px;
 367 |     --aspect-video: 16 / 9;
 368 |     --default-transition-duration: 150ms;
 369 |     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 370 |     --default-font-family: var(--font-sans);
 371 |     --default-font-feature-settings: var(--font-sans--font-feature-settings);
 372 |     --default-font-variation-settings: var(
 373 |       --font-sans--font-variation-settings
 374 |     );
 375 |     --default-mono-font-family: var(--font-mono);
 376 |     --default-mono-font-feature-settings: var(
 377 |       --font-mono--font-feature-settings
 378 |     );
 379 |     --default-mono-font-variation-settings: var(
 380 |       --font-mono--font-variation-settings
 381 |     );
 382 |     --color-dracula-background: #282a36;
 383 |     --color-dracula-current: #44475a;
 384 |     --color-dracula-foreground: #f8f8f2;
 385 |     --color-dracula-comment: #6272a4;
 386 |     --color-dracula-cyan: #8be9fd;
 387 |     --color-dracula-green: #50fa7b;
 388 |     --color-dracula-orange: #ffb86c;
 389 |     --color-dracula-pink: #ff79c6;
 390 |     --color-dracula-purple: #bd93f9;
 391 |     --color-dracula-red: #ff5555;
 392 |     --color-dracula-yellow: #f1fa8c;
 393 |   }
 394 | }
 395 | @layer base {
 396 |   *, ::after, ::before, ::backdrop, ::file-selector-button {
 397 |     box-sizing: border-box;
 398 |     margin: 0;
 399 |     padding: 0;
 400 |     border: 0 solid;
 401 |   }
 402 |   html, :host {
 403 |     line-height: 1.5;
 404 |     -webkit-text-size-adjust: 100%;
 405 |     tab-size: 4;
 406 |     font-family: var(
 407 |       --default-font-family,
 408 |       ui-sans-serif,
 409 |       system-ui,
 410 |       sans-serif,
 411 |       "Apple Color Emoji",
 412 |       "Segoe UI Emoji",
 413 |       "Segoe UI Symbol",
 414 |       "Noto Color Emoji"
 415 |     );
 416 |     font-feature-settings: var(--default-font-feature-settings, normal);
 417 |     font-variation-settings: var(--default-font-variation-settings, normal);
 418 |     -webkit-tap-highlight-color: transparent;
 419 |   }
 420 |   body {
 421 |     line-height: inherit;
 422 |   }
 423 |   hr {
 424 |     height: 0;
 425 |     color: inherit;
 426 |     border-top-width: 1px;
 427 |   }
 428 |   abbr:where([title]) {
 429 |     -webkit-text-decoration: underline dotted;
 430 |     text-decoration: underline dotted;
 431 |   }
 432 |   h1, h2, h3, h4, h5, h6 {
 433 |     font-size: inherit;
 434 |     font-weight: inherit;
 435 |   }
 436 |   a {
 437 |     color: inherit;
 438 |     -webkit-text-decoration: inherit;
 439 |     text-decoration: inherit;
 440 |   }
 441 |   b, strong {
 442 |     font-weight: bolder;
 443 |   }
 444 |   code, kbd, samp, pre {
 445 |     font-family: var(
 446 |       --default-mono-font-family,
 447 |       ui-monospace,
 448 |       SFMono-Regular,
 449 |       Menlo,
 450 |       Monaco,
 451 |       Consolas,
 452 |       "Liberation Mono",
 453 |       "Courier New",
 454 |       monospace
 455 |     );
 456 |     font-feature-settings: var(--default-mono-font-feature-settings, normal);
 457 |     font-variation-settings: var(
 458 |       --default-mono-font-variation-settings,
 459 |       normal
 460 |     );
 461 |     font-size: 1em;
 462 |   }
 463 |   small {
 464 |     font-size: 80%;
 465 |   }
 466 |   sub, sup {
 467 |     font-size: 75%;
 468 |     line-height: 0;
 469 |     position: relative;
 470 |     vertical-align: baseline;
 471 |   }
 472 |   sub {
 473 |     bottom: -0.25em;
 474 |   }
 475 |   sup {
 476 |     top: -0.5em;
 477 |   }
 478 |   table {
 479 |     text-indent: 0;
 480 |     border-color: inherit;
 481 |     border-collapse: collapse;
 482 |   }
 483 |   :-moz-focusring {
 484 |     outline: auto;
 485 |   }
 486 |   progress {
 487 |     vertical-align: baseline;
 488 |   }
 489 |   summary {
 490 |     display: list-item;
 491 |   }
 492 |   ol, ul, menu {
 493 |     list-style: none;
 494 |   }
 495 |   img, svg, video, canvas, audio, iframe, embed, object {
 496 |     display: block;
 497 |     vertical-align: middle;
 498 |   }
 499 |   img, video {
 500 |     max-width: 100%;
 501 |     height: auto;
 502 |   }
 503 |   button, input, select, optgroup, textarea, ::file-selector-button {
 504 |     font: inherit;
 505 |     font-feature-settings: inherit;
 506 |     font-variation-settings: inherit;
 507 |     letter-spacing: inherit;
 508 |     color: inherit;
 509 |     border-radius: 0;
 510 |     background-color: transparent;
 511 |     opacity: 1;
 512 |   }
 513 |   :where(select:is([multiple], [size])) optgroup {
 514 |     font-weight: bolder;
 515 |   }
 516 |   :where(select:is([multiple], [size])) optgroup option {
 517 |     padding-inline-start: 20px;
 518 |   }
 519 |   ::file-selector-button {
 520 |     margin-inline-end: 4px;
 521 |   }
 522 |   ::placeholder {
 523 |     opacity: 1;
 524 |     color: color-mix(in oklab, currentColor 50%, transparent);
 525 |   }
 526 |   textarea {
 527 |     resize: vertical;
 528 |   }
 529 |   ::-webkit-search-decoration {
 530 |     -webkit-appearance: none;
 531 |   }
 532 |   ::-webkit-date-and-time-value {
 533 |     min-height: 1lh;
 534 |     text-align: inherit;
 535 |   }
 536 |   ::-webkit-datetime-edit {
 537 |     display: inline-flex;
 538 |   }
 539 |   ::-webkit-datetime-edit-fields-wrapper {
 540 |     padding: 0;
 541 |   }
 542 |   ::-webkit-datetime-edit,
 543 |   ::-webkit-datetime-edit-year-field,
 544 |   ::-webkit-datetime-edit-month-field,
 545 |   ::-webkit-datetime-edit-day-field,
 546 |   ::-webkit-datetime-edit-hour-field,
 547 |   ::-webkit-datetime-edit-minute-field,
 548 |   ::-webkit-datetime-edit-second-field,
 549 |   ::-webkit-datetime-edit-millisecond-field,
 550 |   ::-webkit-datetime-edit-meridiem-field {
 551 |     padding-block: 0;
 552 |   }
 553 |   :-moz-ui-invalid {
 554 |     box-shadow: none;
 555 |   }
 556 |   button,
 557 |   input:where([type="button"], [type="reset"], [type="submit"]),
 558 |   ::file-selector-button {
 559 |     appearance: button;
 560 |   }
 561 |   ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
 562 |     height: auto;
 563 |   }
 564 |   [hidden]:where(:not([hidden="until-found"])) {
 565 |     display: none !important;
 566 |   }
 567 | }
 568 | @layer utilities {
 569 |   .\@container {
 570 |     container-type: inline-size;
 571 |   }
 572 |   .collapse {
 573 |     visibility: collapse;
 574 |   }
 575 |   .visible {
 576 |     visibility: visible;
 577 |   }
 578 |   .absolute {
 579 |     position: absolute;
 580 |   }
 581 |   .fixed {
 582 |     position: fixed;
 583 |   }
 584 |   .relative {
 585 |     position: relative;
 586 |   }
 587 |   .static {
 588 |     position: static;
 589 |   }
 590 |   .sticky {
 591 |     position: sticky;
 592 |   }
 593 |   .isolate {
 594 |     isolation: isolate;
 595 |   }
 596 |   .\!container {
 597 |     width: 100% !important;
 598 |     @media (width >= 40rem) {
 599 |       max-width: 40rem !important;
 600 |     }
 601 |     @media (width >= 48rem) {
 602 |       max-width: 48rem !important;
 603 |     }
 604 |     @media (width >= 64rem) {
 605 |       max-width: 64rem !important;
 606 |     }
 607 |     @media (width >= 80rem) {
 608 |       max-width: 80rem !important;
 609 |     }
 610 |     @media (width >= 96rem) {
 611 |       max-width: 96rem !important;
 612 |     }
 613 |   }
 614 |   .container {
 615 |     width: 100%;
 616 |     @media (width >= 40rem) {
 617 |       max-width: 40rem;
 618 |     }
 619 |     @media (width >= 48rem) {
 620 |       max-width: 48rem;
 621 |     }
 622 |     @media (width >= 64rem) {
 623 |       max-width: 64rem;
 624 |     }
 625 |     @media (width >= 80rem) {
 626 |       max-width: 80rem;
 627 |     }
 628 |     @media (width >= 96rem) {
 629 |       max-width: 96rem;
 630 |     }
 631 |   }
 632 |   .block {
 633 |     display: block;
 634 |   }
 635 |   .contents {
 636 |     display: contents;
 637 |   }
 638 |   .flex {
 639 |     display: flex;
 640 |   }
 641 |   .flow-root {
 642 |     display: flow-root;
 643 |   }
 644 |   .grid {
 645 |     display: grid;
 646 |   }
 647 |   .hidden {
 648 |     display: none;
 649 |   }
 650 |   .inline {
 651 |     display: inline;
 652 |   }
 653 |   .inline-block {
 654 |     display: inline-block;
 655 |   }
 656 |   .inline-flex {
 657 |     display: inline-flex;
 658 |   }
 659 |   .inline-grid {
 660 |     display: inline-grid;
 661 |   }
 662 |   .inline-table {
 663 |     display: inline-table;
 664 |   }
 665 |   .list-item {
 666 |     display: list-item;
 667 |   }
 668 |   .table {
 669 |     display: table;
 670 |   }
 671 |   .table-caption {
 672 |     display: table-caption;
 673 |   }
 674 |   .table-cell {
 675 |     display: table-cell;
 676 |   }
 677 |   .table-column {
 678 |     display: table-column;
 679 |   }
 680 |   .table-column-group {
 681 |     display: table-column-group;
 682 |   }
 683 |   .table-footer-group {
 684 |     display: table-footer-group;
 685 |   }
 686 |   .table-header-group {
 687 |     display: table-header-group;
 688 |   }
 689 |   .table-row {
 690 |     display: table-row;
 691 |   }
 692 |   .table-row-group {
 693 |     display: table-row-group;
 694 |   }
 695 |   .flex-shrink {
 696 |     flex-shrink: 1;
 697 |   }
 698 |   .shrink {
 699 |     flex-shrink: 1;
 700 |   }
 701 |   .flex-grow {
 702 |     flex-grow: 1;
 703 |   }
 704 |   .grow {
 705 |     flex-grow: 1;
 706 |   }
 707 |   .border-collapse {
 708 |     border-collapse: collapse;
 709 |   }
 710 |   .transform {
 711 |     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
 712 |       var(--tw-skew-x) var(--tw-skew-y);
 713 |   }
 714 |   .resize {
 715 |     resize: both;
 716 |   }
 717 |   .flex-wrap {
 718 |     flex-wrap: wrap;
 719 |   }
 720 |   .self-end {
 721 |     align-self: flex-end;
 722 |   }
 723 |   .self-start {
 724 |     align-self: flex-start;
 725 |   }
 726 |   .rounded {
 727 |     border-radius: 0.25rem;
 728 |   }
 729 |   .border {
 730 |     border-style: var(--tw-border-style);
 731 |     border-width: 1px;
 732 |   }
 733 |   .text-justify {
 734 |     text-align: justify;
 735 |   }
 736 |   .text-wrap {
 737 |     text-wrap: wrap;
 738 |   }
 739 |   .break-all {
 740 |     word-break: break-all;
 741 |   }
 742 |   .capitalize {
 743 |     text-transform: capitalize;
 744 |   }
 745 |   .lowercase {
 746 |     text-transform: lowercase;
 747 |   }
 748 |   .uppercase {
 749 |     text-transform: uppercase;
 750 |   }
 751 |   .italic {
 752 |     font-style: italic;
 753 |   }
 754 |   .diagonal-fractions {
 755 |     --tw-numeric-fraction: diagonal-fractions;
 756 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 757 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 758 |       var(--tw-numeric-fraction,);
 759 |   }
 760 |   .lining-nums {
 761 |     --tw-numeric-figure: lining-nums;
 762 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 763 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 764 |       var(--tw-numeric-fraction,);
 765 |   }
 766 |   .oldstyle-nums {
 767 |     --tw-numeric-figure: oldstyle-nums;
 768 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 769 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 770 |       var(--tw-numeric-fraction,);
 771 |   }
 772 |   .ordinal {
 773 |     --tw-ordinal: ordinal;
 774 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 775 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 776 |       var(--tw-numeric-fraction,);
 777 |   }
 778 |   .proportional-nums {
 779 |     --tw-numeric-spacing: proportional-nums;
 780 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 781 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 782 |       var(--tw-numeric-fraction,);
 783 |   }
 784 |   .slashed-zero {
 785 |     --tw-slashed-zero: slashed-zero;
 786 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 787 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 788 |       var(--tw-numeric-fraction,);
 789 |   }
 790 |   .stacked-fractions {
 791 |     --tw-numeric-fraction: stacked-fractions;
 792 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 793 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 794 |       var(--tw-numeric-fraction,);
 795 |   }
 796 |   .tabular-nums {
 797 |     --tw-numeric-spacing: tabular-nums;
 798 |     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
 799 |       var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
 800 |       var(--tw-numeric-fraction,);
 801 |   }
 802 |   .line-through {
 803 |     text-decoration-line: line-through;
 804 |   }
 805 |   .overline {
 806 |     text-decoration-line: overline;
 807 |   }
 808 |   .underline {
 809 |     text-decoration-line: underline;
 810 |   }
 811 |   .shadow {
 812 |     --tw-shadow:
 813 |       0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(
 814 |       --tw-shadow-color,
 815 |       rgb(0 0 0 / 0.1)
 816 |     );
 817 |     box-shadow:
 818 |       var(--tw-inset-shadow),
 819 |       var(--tw-inset-ring-shadow),
 820 |       var(--tw-ring-offset-shadow),
 821 |       var(--tw-ring-shadow),
 822 |       var(--tw-shadow);
 823 |   }
 824 |   .outline {
 825 |     outline-style: var(--tw-outline-style);
 826 |     outline-width: 1px;
 827 |   }
 828 |   .blur {
 829 |     --tw-blur: blur(8px);
 830 |     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(
 831 |       --tw-grayscale,
 832 |     ) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(
 833 |       --tw-sepia,
 834 |     ) var(--tw-drop-shadow,);
 835 |   }
 836 |   .invert {
 837 |     --tw-invert: invert(100%);
 838 |     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(
 839 |       --tw-grayscale,
 840 |     ) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(
 841 |       --tw-sepia,
 842 |     ) var(--tw-drop-shadow,);
 843 |   }
 844 |   .filter {
 845 |     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(
 846 |       --tw-grayscale,
 847 |     ) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(
 848 |       --tw-sepia,
 849 |     ) var(--tw-drop-shadow,);
 850 |   }
 851 |   .backdrop-filter {
 852 |     -webkit-backdrop-filter: var(--tw-backdrop-blur,)
 853 |       var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
 854 |       var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
 855 |       var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
 856 |       var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
 857 |     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
 858 |       var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
 859 |       var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
 860 |       var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
 861 |       var(--tw-backdrop-sepia,);
 862 |   }
 863 |   .transition {
 864 |     transition-property:
 865 |       color,
 866 |       background-color,
 867 |       border-color,
 868 |       outline-color,
 869 |       text-decoration-color,
 870 |       fill,
 871 |       stroke,
 872 |       --tw-gradient-from,
 873 |       --tw-gradient-via,
 874 |       --tw-gradient-to,
 875 |       opacity,
 876 |       box-shadow,
 877 |       transform,
 878 |       translate,
 879 |       scale,
 880 |       rotate,
 881 |       filter,
 882 |       -webkit-backdrop-filter,
 883 |       backdrop-filter;
 884 |     transition-timing-function: var(
 885 |       --tw-ease,
 886 |       var(--default-transition-timing-function)
 887 |     );
 888 |     transition-duration: var(--tw-duration, var(--default-transition-duration));
 889 |   }
 890 |   .ease-in {
 891 |     --tw-ease: var(--ease-in);
 892 |     transition-timing-function: var(--ease-in);
 893 |   }
 894 |   .ease-in-out {
 895 |     --tw-ease: var(--ease-in-out);
 896 |     transition-timing-function: var(--ease-in-out);
 897 |   }
 898 |   .ease-out {
 899 |     --tw-ease: var(--ease-out);
 900 |     transition-timing-function: var(--ease-out);
 901 |   }
 902 |   .select-all {
 903 |     -webkit-user-select: all;
 904 |     user-select: all;
 905 |   }
 906 | }
 907 | @keyframes spin {
 908 |   to {
 909 |     transform: rotate(360deg);
 910 |   }
 911 | }
 912 | @keyframes ping {
 913 |   75%, 100% {
 914 |     transform: scale(2);
 915 |     opacity: 0;
 916 |   }
 917 | }
 918 | @keyframes pulse {
 919 |   50% {
 920 |     opacity: 0.5;
 921 |   }
 922 | }
 923 | @keyframes bounce {
 924 |   0%, 100% {
 925 |     transform: translateY(-25%);
 926 |     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
 927 |   }
 928 |   50% {
 929 |     transform: none;
 930 |     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 931 |   }
 932 | }
 933 | @property --tw-rotate-x {
 934 |   syntax: "*";
 935 |   inherits: false;
 936 |   initial-value: rotateX(0);
 937 | }
 938 | @property --tw-rotate-y {
 939 |   syntax: "*";
 940 |   inherits: false;
 941 |   initial-value: rotateY(0);
 942 | }
 943 | @property --tw-rotate-z {
 944 |   syntax: "*";
 945 |   inherits: false;
 946 |   initial-value: rotateZ(0);
 947 | }
 948 | @property --tw-skew-x {
 949 |   syntax: "*";
 950 |   inherits: false;
 951 |   initial-value: skewX(0);
 952 | }
 953 | @property --tw-skew-y {
 954 |   syntax: "*";
 955 |   inherits: false;
 956 |   initial-value: skewY(0);
 957 | }
 958 | @property --tw-border-style {
 959 |   syntax: "*";
 960 |   inherits: false;
 961 |   initial-value: solid;
 962 | }
 963 | @property --tw-ordinal {
 964 |   syntax: "*";
 965 |   inherits: false;
 966 | }
 967 | @property --tw-slashed-zero {
 968 |   syntax: "*";
 969 |   inherits: false;
 970 | }
 971 | @property --tw-numeric-figure {
 972 |   syntax: "*";
 973 |   inherits: false;
 974 | }
 975 | @property --tw-numeric-spacing {
 976 |   syntax: "*";
 977 |   inherits: false;
 978 | }
 979 | @property --tw-numeric-fraction {
 980 |   syntax: "*";
 981 |   inherits: false;
 982 | }
 983 | @property --tw-shadow {
 984 |   syntax: "*";
 985 |   inherits: false;
 986 |   initial-value: 0 0 #0000;
 987 | }
 988 | @property --tw-shadow-color {
 989 |   syntax: "*";
 990 |   inherits: false;
 991 | }
 992 | @property --tw-inset-shadow {
 993 |   syntax: "*";
 994 |   inherits: false;
 995 |   initial-value: 0 0 #0000;
 996 | }
 997 | @property --tw-inset-shadow-color {
 998 |   syntax: "*";
 999 |   inherits: false;
1000 | }
1001 | @property --tw-ring-color {
1002 |   syntax: "*";
1003 |   inherits: false;
1004 | }
1005 | @property --tw-ring-shadow {
1006 |   syntax: "*";
1007 |   inherits: false;
1008 |   initial-value: 0 0 #0000;
1009 | }
1010 | @property --tw-inset-ring-color {
1011 |   syntax: "*";
1012 |   inherits: false;
1013 | }
1014 | @property --tw-inset-ring-shadow {
1015 |   syntax: "*";
1016 |   inherits: false;
1017 |   initial-value: 0 0 #0000;
1018 | }
1019 | @property --tw-ring-inset {
1020 |   syntax: "*";
1021 |   inherits: false;
1022 | }
1023 | @property --tw-ring-offset-width {
1024 |   syntax: "<length>";
1025 |   inherits: false;
1026 |   initial-value: 0px;
1027 | }
1028 | @property --tw-ring-offset-color {
1029 |   syntax: "*";
1030 |   inherits: false;
1031 |   initial-value: #fff;
1032 | }
1033 | @property --tw-ring-offset-shadow {
1034 |   syntax: "*";
1035 |   inherits: false;
1036 |   initial-value: 0 0 #0000;
1037 | }
1038 | @property --tw-outline-style {
1039 |   syntax: "*";
1040 |   inherits: false;
1041 |   initial-value: solid;
1042 | }
1043 | @property --tw-blur {
1044 |   syntax: "*";
1045 |   inherits: false;
1046 | }
1047 | @property --tw-brightness {
1048 |   syntax: "*";
1049 |   inherits: false;
1050 | }
1051 | @property --tw-contrast {
1052 |   syntax: "*";
1053 |   inherits: false;
1054 | }
1055 | @property --tw-grayscale {
1056 |   syntax: "*";
1057 |   inherits: false;
1058 | }
1059 | @property --tw-hue-rotate {
1060 |   syntax: "*";
1061 |   inherits: false;
1062 | }
1063 | @property --tw-invert {
1064 |   syntax: "*";
1065 |   inherits: false;
1066 | }
1067 | @property --tw-opacity {
1068 |   syntax: "*";
1069 |   inherits: false;
1070 | }
1071 | @property --tw-saturate {
1072 |   syntax: "*";
1073 |   inherits: false;
1074 | }
1075 | @property --tw-sepia {
1076 |   syntax: "*";
1077 |   inherits: false;
1078 | }
1079 | @property --tw-backdrop-blur {
1080 |   syntax: "*";
1081 |   inherits: false;
1082 | }
1083 | @property --tw-backdrop-brightness {
1084 |   syntax: "*";
1085 |   inherits: false;
1086 | }
1087 | @property --tw-backdrop-contrast {
1088 |   syntax: "*";
1089 |   inherits: false;
1090 | }
1091 | @property --tw-backdrop-grayscale {
1092 |   syntax: "*";
1093 |   inherits: false;
1094 | }
1095 | @property --tw-backdrop-hue-rotate {
1096 |   syntax: "*";
1097 |   inherits: false;
1098 | }
1099 | @property --tw-backdrop-invert {
1100 |   syntax: "*";
1101 |   inherits: false;
1102 | }
1103 | @property --tw-backdrop-opacity {
1104 |   syntax: "*";
1105 |   inherits: false;
1106 | }
1107 | @property --tw-backdrop-saturate {
1108 |   syntax: "*";
1109 |   inherits: false;
1110 | }
1111 | @property --tw-backdrop-sepia {
1112 |   syntax: "*";
1113 |   inherits: false;
1114 | }
1115 | @property --tw-ease {
1116 |   syntax: "*";
1117 |   inherits: false;
1118 | }
1119 | 


--------------------------------------------------------------------------------