\n setFilters({ ...filters, search: e.target.value })}\n />\n setFilters({ ...filters, status: e.target.value })}\n >\n \n {TICKET_STATUSES.map((status) => (\n \n ))}\n \n \n setFilters({ ...filters, priority: e.target.value })}\n >\n \n {TICKET_PRIORITIES.map((priority) => (\n \n ))}\n \n

\n setLanguage(e.target.value)}\n >\n \n \n \n \n setIsDarkMode(!isDarkMode)}\n cls=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].toggleDarkMode}\n >\n {isDarkMode ? ICONS.sun : ICONS.moon}\n \n setModal({ type: \"settings\" })}\n cls=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].openSettings}\n >\n {ICONS.settings}\n \n setModal({ type: \"newTicket\" })}\n className=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].createNewTicket}\n >\n {ICONS.plusCircle}\n \n setModal({ type: \"help\" })}\n className=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].openHelp}\n >\n {ICONS.helpCircle}\n \n

\n {lang[currentLang].systemTitle}\n

\n {lang[currentLang].existingTickets}\n

\n {loading && (\n

\n {lang[currentLang].loadingTickets}\n

\n )}\n {!loading && filteredTickets.length === 0 && (\n

\n {lang[currentLang].noTickets}\n

\n )}\n

\n {filteredTickets.map((ticket) => (\n \n

{ticket.title}

\n {ticket.description}\n

\n {lang[currentLang].ticketId} {ticket.id}\n

\n {lang[currentLang].ticketPriority}{\" \"}\n \n {ticket.priority}\n \n

\n {lang[currentLang].ticketStatus}{\" \"}\n \n {ticket.status}\n \n

\n {lang[currentLang].ticketCreated}{\" \"}\n {new Date(ticket.created).toLocaleString()}\n

\n {ticket.updated && (\n

\n {lang[currentLang].ticketUpdated}{\" \"}\n {new Date(ticket.updated).toLocaleString()}\n

\n )}\n

\n setModal({ type: \"editTicket\", ticket })}\n >\n {lang[currentLang].edit}\n \n handleDeleteTicket(ticket)}\n >\n {lang[currentLang].delete}\n \n

\n \n handleUpdateTicketStatus(ticket, e.target.value)}\n >\n {TICKET_STATUSES.map((status) => (\n \n ))}\n \n

\n ))}\n

\n \n \n\n {modal.type === \"newTicket\" && (\n

\n {lang[currentLang].newTicketTitle}\n

\n setModal({ type: null })} />\n

\n \n \n

\n \n \n {TICKET_PRIORITIES.map((p) => (\n \n ))}\n \n

\n \n \n {TICKET_STATUSES.map((s) => (\n \n ))}\n \n

\n setModal({ type: null })}\n cls=\"inline-flex border shadow-sm text-blue-700 hover:text-blue-700 border-blue-500 hover:border-blue-600\"\n >\n {lang[currentLang].newTicketButton}\n \n setModal({ type: null })}\n >\n {lang[currentLang].cancel}\n \n

\n )}\n\n {modal.type === \"editTicket\" && modal.ticket && (\n setModal({ type: null })}\n >\n

\n \n \n

\n \n \n {TICKET_PRIORITIES.map((p) => (\n \n ))}\n \n

\n \n \n {TICKET_STATUSES.map((s) => (\n \n ))}\n \n

\n \n {lang[currentLang].editTicketButton}\n \n setModal({ type: null })}\n >\n {lang[currentLang].cancel}\n \n

\n \n )}\n\n {modal.type === \"settings\" && (\n setModal({ type: null })}\n >\n

\n {lang[currentLang].apiSettingsSubtitle}\n

\n \n \n

\n \n {lang[currentLang].saveApiSettings}\n \n setModal({ type: null })}\n >\n {lang[currentLang].cancel}\n \n

\n \n )}\n\n {modal.type === \"help\" && (\n setModal({ type: null })}\n >\n

\n {lang[currentLang].helpGuideText1}\n \n {lang[currentLang].helpGuideText2}\n \n {lang[currentLang].helpGuideText3}\n

\n {lang[currentLang].apiOperationsTitle}\n

\n {lang[currentLang].apiGet}{\" \"}\n {lang[currentLang].apiGetUrl}\n
\n {lang[currentLang].apiGetDesc}\n
\n
\n {lang[currentLang].apiPostInsert}{\" \"}\n {lang[currentLang].apiPostInsertUrl}\n
\n {lang[currentLang].apiPostInsertDesc}\n
\n
\n {lang[currentLang].apiPostUpdate}{\" \"}\n {lang[currentLang].apiPostUpdateUrl}\n
\n {lang[currentLang].apiPostUpdateDesc}\n
\n
\n {lang[currentLang].apiPostDelete}{\" \"}\n {lang[currentLang].apiPostDeleteUrl}\n
\n {lang[currentLang].apiPostDeleteDesc}\n
\n

\n \n )}\n\n {/* Contenedor para los toasts */}\n

\n {toasts.map((toast) => (\n removeToast(toast.id)}\n />\n ))}\n

\n \n );\n};\n\nexport default App;",[],[186,192,198],{"_104":208,"_95":209,"_158":210,"_160":193,"_161":140,"_162":211,"_164":22,"_106":212,"_100":213,"_167":203,"_169":214,"_170":22,"_171":-5,"_172":215,"_98":216},"5c89ea44-75f1-11f0-835a-0224a6c84d84","Constants.jsx","887d781a-75f0-11f0-a5ba-0224a6c84d84",21,["D",1754833994846],3,"export const TICKET_PRIORITIES = [\"Baja\", \"Media\", \"Alta\", \"Crítica\"];\nexport const TICKET_STATUSES = [\n \"Abierto\",\n \"En Progreso\",\n \"Pendiente\",\n \"Resuelto\",\n \"Cerrado\",\n];\n\nexport const TICKETURL = \"ticket_url\";\nexport const TICKETOKEN = \"ticket_token\";\nexport const TICKETHEME = \"ticket_theme\";\nexport const TICKELANG = \"ticket_lang\";",[],[186,192,209],{"_104":218,"_95":219,"_158":220,"_160":193,"_161":140,"_162":221,"_164":22,"_106":222,"_100":223,"_167":203,"_169":224,"_170":22,"_171":-5,"_172":225,"_98":226},"3cbe35b6-75f2-11f0-ac92-0224a6c84d84","Icons.jsx","62c40634-75f0-11f0-8b7b-0224a6c84d84",32,["D",1754834370997],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Mapeo de nombres de iconos a su código SVG\nexport const ICONS = {\n moon: (\n \n \n \n \n ),\n sun: (\n \n \n \n \n \n \n \n \n \n \n \n ),\n settings: (\n \n \n \n \n \n ),\n plusCircle: (\n \n \n \n \n \n ),\n helpCircle: (\n \n \n \n \n \n ),\n checkCircle: (\n \n \n \n \n ),\n xCircle: (\n \n \n \n \n ),\n info: (\n \n \n \n \n ),\n};",[],[186,192,219],{"_104":228,"_95":229,"_158":230,"_160":193,"_161":140,"_162":231,"_164":22,"_106":232,"_100":223,"_167":203,"_169":233,"_170":22,"_171":-5,"_172":234,"_98":235},"778e197e-75f0-11f0-84b0-0224a6c84d84","Lang.jsx","16341ac0-75f0-11f0-a0b3-0224a6c84d84",14,["D",1754833610673],"// Objeto de idiomas con los textos de la aplicación\nexport const lang = {\n es: {\n search: \"Buscar:\",\n searchPlaceholder: \"Buscar por título o ID...\",\n status: \"Estado:\",\n priority: \"Prioridad:\",\n all: \"Todos\",\n allPriorities: \"Todas\",\n toggleDarkMode: \"Cambiar modo oscuro\",\n openSettings: \"Abrir ajustes\",\n createNewTicket: \"Crear nuevo ticket\",\n openHelp: \"Abrir guía de ayuda\",\n systemTitle: \"Sistema de Gestión de Tickets\",\n existingTickets: \"Tickets Existentes\",\n loadingTickets: \"Cargando tickets...\",\n noTickets: \"No hay tickets disponibles. ¡Crea uno nuevo!\",\n ticketId: \"ID:\",\n ticketPriority: \"Prioridad:\",\n ticketStatus: \"Estado:\",\n ticketCreated: \"Creado:\",\n ticketUpdated: \"Actualizado:\",\n edit: \"Editar\",\n delete: \"Eliminar\",\n confirmDelete: \"¿Estás seguro de que deseas eliminar este ticket?\",\n newTicketTitle: \"Crear Nuevo Ticket\",\n newTicketButton: \"Añadir Ticket\",\n editTicketTitle: \"Editar Ticket\",\n editTicketButton: \"Guardar Cambios\",\n cancel: \"Cancelar\",\n titleLabel: \"Título\",\n descriptionLabel: \"Descripción\",\n saveApiSettings: \"Guardar Configuración\",\n apiSettingsTitle: \"Ajustes de la Aplicación\",\n apiSettingsSubtitle: \"Configuración de la API\",\n apiUrl: \"URL de la API\",\n apiToken: \"Token de Autenticación\",\n apiUrlPlaceholder: \"https://tu-api.com/tickets\",\n apiTokenPlaceholder: \"Tu-Token-API-secreto\",\n apiSettingsSaved: \"Configuración de la API guardada.\",\n apiSettingsRequired: \"La URL y el token de la API son obligatorios.\",\n ticketAdded: \"Ticket añadido correctamente.\",\n ticketUpdated: \"Ticket actualizado correctamente.\",\n ticketDeleted: \"Ticket eliminado correctamente.\",\n statusChanged: \"El estado del ticket ha cambiado.\",\n apiError: (message) => `Error al conectar con la API: ${message}`,\n apiConfigRequired:\n \"Por favor, configura la URL y el token de la API en Ajustes.\",\n helpGuideTitle: \"Guía de Configuración\",\n helpGuideText1:\n \"Para que tu aplicación de gestión de tickets funcione correctamente, debes configurar la URL de tu API y el token de autenticación en la sección de\",\n helpGuideText2: \" Ajustes de la Aplicación \",\n helpGuideText3:\n \"El formato de la API debe ser compatible con las peticiones que se realizan en esta aplicación. A continuación se detallan las operaciones:\",\n apiOperationsTitle: \"Operaciones de la API\",\n apiGet: \"GET (Obtener todos los tickets):\",\n apiGetUrl: \"GET /?method=get&db={tableName}&all=all\",\n apiGetDesc:\n \"El endpoint debe devolver un objeto con una clave `CONTENT` que contenga un objeto de tickets. Cada ticket debe tener las claves `uid`, `name`, `title`, `description`, `category` (Prioridad), `content` (Estado), `created` y `updated`.\",\n apiPostInsert: \"POST (Crear un nuevo ticket):\",\n apiPostInsertUrl: \"POST /?method=insert&db={tableName}\",\n apiPostInsertDesc:\n \"Se envía un objeto JSON con las propiedades `title`, `description`, `category` y `content`.\",\n apiPostUpdate: \"POST (Actualizar un ticket):\",\n apiPostUpdateUrl: \"POST /?method=update&db={tableName}\",\n apiPostUpdateDesc:\n \"Se envía un objeto JSON con la clave `uid` y las propiedades actualizadas.\",\n apiPostDelete: \"POST (Eliminar un ticket):\",\n apiPostDeleteUrl: \"POST /?method=delete&db={tableName}\",\n apiPostDeleteDesc: \"Se envía un objeto JSON con la clave `uid` y `name`.\",\n language: \"Idioma:\",\n },\n\n en: {\n search: \"Search:\",\n searchPlaceholder: \"Search by title or ID...\",\n status: \"Status:\",\n priority: \"Priority:\",\n all: \"All\",\n allPriorities: \"All\",\n toggleDarkMode: \"Toggle dark mode\",\n openSettings: \"Open settings\",\n createNewTicket: \"Create new ticket\",\n openHelp: \"Open help guide\",\n systemTitle: \"Ticket Management System\",\n existingTickets: \"Existing Tickets\",\n loadingTickets: \"Loading tickets...\",\n noTickets: \"No tickets available. Create a new one!\",\n ticketId: \"ID:\",\n ticketPriority: \"Priority:\",\n ticketStatus: \"Status:\",\n ticketCreated: \"Created:\",\n ticketUpdated: \"Updated:\",\n edit: \"Edit\",\n delete: \"Delete\",\n confirmDelete: \"Are you sure you want to delete this ticket?\",\n newTicketTitle: \"Create New Ticket\",\n newTicketButton: \"Add Ticket\",\n editTicketTitle: \"Edit Ticket\",\n editTicketButton: \"Save Changes\",\n cancel: \"Cancel\",\n titleLabel: \"Title\",\n descriptionLabel: \"Description\",\n saveApiSettings: \"Save Settings\",\n apiSettingsTitle: \"Application Settings\",\n apiSettingsSubtitle: \"API Configuration\",\n apiUrl: \"API URL\",\n apiToken: \"Authentication Token\",\n apiUrlPlaceholder: \"https://your-api.com/tickets\",\n apiTokenPlaceholder: \"Your-Secret-API-Token\",\n apiSettingsSaved: \"API configuration saved.\",\n apiSettingsRequired: \"API URL and token are required.\",\n ticketAdded: \"Ticket added successfully.\",\n ticketUpdated: \"Ticket updated successfully.\",\n ticketDeleted: \"Ticket deleted successfully.\",\n statusChanged: \"Ticket status changed.\",\n apiError: (message) => `Error connecting to API: ${message}`,\n apiConfigRequired: \"Please configure API URL and token in Settings.\",\n helpGuideTitle: \"Configuration Guide\",\n helpGuideText1:\n \"For your ticket management application to work correctly, you must configure your API URL and authentication token in the\",\n helpGuideText2: \"Application Settings\",\n helpGuideText3:\n \"section. The API format must be compatible with the requests made in this application. The operations are detailed below:\",\n apiOperationsTitle: \"API Operations\",\n apiGet: \"GET (Get all tickets):\",\n apiGetUrl: \"GET /?method=get&db={tableName}&all=all\",\n apiGetDesc:\n \"The endpoint must return an object with a `CONTENT` key that contains an object of tickets. Each ticket must have the keys `uid`, `name`, `title`, `description`, `category` (Priority), `content` (Status), `created`, and `updated`.\",\n apiPostInsert: \"POST (Create a new ticket):\",\n apiPostInsertUrl: \"POST /?method=insert&db={tableName}\",\n apiPostInsertDesc:\n \"A JSON object with the `title`, `description`, `category`, and `content` properties is sent.\",\n apiPostUpdate: \"POST (Update a ticket):\",\n apiPostUpdateUrl: \"POST /?method=update&db={tableName}\",\n apiPostUpdateDesc:\n \"A JSON object with the `uid` key and the updated properties is sent.\",\n apiPostDelete: \"POST (Delete a ticket):\",\n apiPostDeleteUrl: \"POST /?method=delete&db={tableName}\",\n apiPostDeleteDesc: \"A JSON object with the `uid` and `name` keys is sent.\",\n language: \"Language:\",\n },\n jp: {\n search: \"検索:\",\n searchPlaceholder: \"タイトルまたはIDで検索...\",\n status: \"ステータス:\",\n priority: \"優先度:\",\n all: \"すべて\",\n allPriorities: \"すべて\",\n toggleDarkMode: \"ダークモードの切り替え\",\n openSettings: \"設定を開く\",\n createNewTicket: \"新しいチケットを作成\",\n openHelp: \"ヘルプガイドを開く\",\n systemTitle: \"チケット管理システム\",\n existingTickets: \"既存のチケット\",\n loadingTickets: \"チケットを読み込み中...\",\n noTickets: \"利用可能なチケットはありません。新しいものを作成してください！\",\n ticketId: \"ID:\",\n ticketPriority: \"優先度:\",\n ticketStatus: \"ステータス:\",\n ticketCreated: \"作成日:\",\n ticketUpdated: \"更新日:\",\n edit: \"編集\",\n delete: \"削除\",\n confirmDelete: \"このチケットを削除してもよろしいですか？\",\n newTicketTitle: \"新しいチケットを作成\",\n newTicketButton: \"チケットを追加\",\n editTicketTitle: \"チケットを編集\",\n editTicketButton: \"変更を保存\",\n cancel: \"キャンセル\",\n titleLabel: \"タイトル\",\n descriptionLabel: \"説明\",\n saveApiSettings: \"設定を保存\",\n apiSettingsTitle: \"アプリケーション設定\",\n apiSettingsSubtitle: \"API設定\",\n apiUrl: \"API URL\",\n apiToken: \"認証トークン\",\n apiUrlPlaceholder: \"https://your-api.com/tickets\",\n apiTokenPlaceholder: \"あなたの秘密のAPIトークン\",\n apiSettingsSaved: \"API設定が保存されました。\",\n apiSettingsRequired: \"API URLとトークンは必須です。\",\n ticketAdded: \"チケットが正常に追加されました。\",\n ticketUpdated: \"チケットが正常に更新されました。\",\n ticketDeleted: \"チケットが正常に削除されました。\",\n statusChanged: \"チケットのステータスが変更されました。\",\n apiError: (message) => `APIへの接続エラー: ${message}`,\n apiConfigRequired: \"設定でAPI URLとトークンを設定してください。\",\n helpGuideTitle: \"設定ガイド\",\n helpGuideText1: \"チケット管理アプリケーションを正しく機能させるには、\",\n helpGuideText2: \"アプリケーション設定\",\n helpGuideText3:\n \"セクションでAPIのURLと認証トークンを設定する必要があります。APIの形式は、このアプリケーションで行われるリクエストと互換性がある必要があります。操作の詳細は以下の通りです：\",\n apiOperationsTitle: \"API操作\",\n apiGet: \"GET (すべてのチケットを取得):\",\n apiGetUrl: \"GET /?method=get&db={tableName}&all=all\",\n apiGetDesc:\n \"エンドポイントは、チケットのオブジェクトを含む `CONTENT` キーを持つオブジェクトを返す必要があります。各チケットには、`uid`、`name`、`title`、`description`、`category`（優先度）、`content`（ステータス）、`created`、`updated`のキーが必要です。\",\n apiPostInsert: \"POST (新しいチケットを作成):\",\n apiPostInsertUrl: \"POST /?method=insert&db={tableName}\",\n apiPostInsertDesc:\n \"プロパティ `title`、`description`、`category`、`content`を含むJSONオブジェクトが送信されます。\",\n apiPostUpdate: \"POST (チケットを更新):\",\n apiPostUpdateUrl: \"POST /?method=update&db={tableName}\",\n apiPostUpdateDesc:\n \"`uid`キーと更新されたプロパティを持つJSONオブジェクトが送信されます。\",\n apiPostDelete: \"POST (チケットを削除):\",\n apiPostDeleteUrl: \"POST /?method=delete&db={tableName}\",\n apiPostDeleteDesc:\n \"`uid`と`name`のキーを持つJSONオブジェクトが送信されます。\",\n language: \"言語:\",\n },\n};",[],[186,192,229],{"_104":237,"_95":238,"_158":239,"_160":193,"_161":140,"_162":240,"_164":22,"_106":241,"_100":223,"_167":203,"_169":242,"_170":22,"_171":-5,"_172":243,"_98":244},"d43df426-75f2-11f0-824b-0224a6c84d84","Toast.jsx","75eaf748-75f2-11f0-8cd5-0224a6c84d84",40,["D",1754834625172],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { ICONS } from \"./Icons.jsx\";\n\nexport const Toast = ({ message, type, onClose }) => {\n const [isVisible, setIsVisible] = useState(true);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsVisible(false);\n setTimeout(onClose, 400); // Esperar a que termine la animación\n }, 4000);\n\n return () => clearTimeout(timer);\n }, [onClose]);\n\n const baseClass = `fixed bottom-5 right-5 z-50 p-4 rounded-sm shadow-lg flex items-center gap-3 transition-transform duration-400 ease-in-out border p-2 rounded-none font-medium`;\n const typeClass =\n type === \"success\"\n ? \"border-b-0 border-l-4 border-r-0 border-t-0 border-green-500 bg-green-500/10 text-green-500\"\n : type === \"error\"\n ? \"border-b-0 border-l-4 border-r-0 border-t-0 border-red-500 bg-green-500/10 text-red-500\"\n : \"border-b-0 border-l-4 border-r-0 border-t-0 border-blue-500 bg-blue-500/10 text-blue-500\";\n const positionClass = isVisible\n ? \"transform translate-x-0\"\n : \"transform translate-x-full\";\n\n const icon =\n ICONS[\n type === \"success\" ? \"checkCircle\" : type === \"error\" ? \"xCircle\" : \"info\"\n ];\n\n return (\n

\n {icon}\n

{message}

\n );\n};",[],[186,192,238],{"_104":246,"_95":247,"_158":248,"_160":193,"_161":140,"_162":249,"_164":22,"_106":250,"_100":251,"_167":203,"_169":252,"_170":22,"_171":-5,"_172":253,"_98":254},"205153da-75f3-11f0-b3ec-0224a6c84d84","Ui.jsx","e21a4aae-75f2-11f0-a9c2-0224a6c84d84",43,["D",1754834752806],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport const Button = (props) => {\n return (\n \n {props.children}\n \n );\n};\n\nexport const CloseBtn = (props) => {\n return (\n \n ×\n \n );\n};\n\nexport const Label = (props) => {\n return (\n \n {props.title}\n \n );\n};\n\nexport const SelectF = (props) => {\n return (\n \n {props.children}\n \n );\n};\n\nexport const InputF = (props) => {\n return (\n \n );\n};\n\nexport const TextAreaF = (props) => {\n return (\n \n \n );\n};\n\nexport const CardDialog = (props) => {\n return (\n

{props.title}

\n \n

{props.children}

\n );\n};",[],[186,192,247],[186,192],{"_104":257,"_95":258,"_158":259,"_160":187,"_161":140,"_162":163,"_164":165,"_106":260,"_100":32,"_167":261,"_169":262,"_170":22,"_171":-5,"_172":263,"_98":264},"87d9ae14-5d78-11f0-87ea-0224a6c84d84","favicon.svg","e6e85dbb-a7fd-472e-8353-30ea6d81df2a",["D",1752143270430],"file","\n",[],[186,258],{"_104":266,"_95":267,"_158":268,"_160":187,"_161":140,"_162":269,"_164":22,"_106":270,"_100":163,"_167":261,"_169":271,"_170":22,"_171":-5,"_172":272,"_98":273},"28777a1c-7607-11f0-be4e-0224a6c84d84","index.html","db02a8a9-1324-431e-93c3-ede5b3e15868",47,["D",1754843356409],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[186,267],{"_104":275,"_95":276,"_158":277,"_160":187,"_161":140,"_162":101,"_164":165,"_106":278,"_100":213,"_167":203,"_169":279,"_170":22,"_171":-5,"_172":280,"_98":281},"3245de3a-7607-11f0-b36e-0224a6c84d84","index.jsx","ff6d73bb-afdf-46d4-ae4c-6c42a4d47c6f",["D",1754843372866],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.jsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[186,276],{"_104":283,"_95":284,"_158":285,"_160":187,"_161":140,"_162":286,"_164":22,"_106":287,"_100":163,"_167":261,"_169":288,"_170":22,"_171":-5,"_172":289,"_98":290},"cdabf746-75ef-11f0-b567-0224a6c84d84","style.css","2e8bc66d-1328-4b75-8fe0-f6e770e2392a",5,["D",1754833325658],"/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline)))\n or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: rotateX(0);\n --tw-rotate-y: rotateY(0);\n --tw-rotate-z: rotateZ(0);\n --tw-skew-x: skewX(0);\n --tw-skew-y: skewY(0);\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans:\n \"Inter\", \"ui-sans-serif\", \"system-ui\", \"-apple-system\", \"system-ui\",\n \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", \"Arial\", \"Noto Sans\",\n \"sans-serif\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n \"Noto Color Emoji\";\n --font-mono:\n \"ui-monospace\", \"SFMono-Regular\", \"Menlo\", \"Monaco\", \"Consolas\",\n \"Liberation Mono\", \"Courier New\", \"monospace\";\n --color-red-500: oklch(0.637 0.237 25.331);\n --color-red-600: oklch(0.577 0.245 27.325);\n --color-red-700: oklch(0.505 0.213 27.518);\n --color-yellow-500: oklch(0.795 0.184 86.047);\n --color-green-500: oklch(0.723 0.219 149.579);\n --color-blue-400: oklch(0.707 0.165 254.624);\n --color-blue-500: oklch(0.623 0.214 259.815);\n --color-blue-600: oklch(0.546 0.245 262.881);\n --color-blue-700: oklch(0.488 0.243 264.376);\n --color-indigo-500: oklch(0.585 0.233 277.117);\n --color-slate-400: oklch(0.704 0.04 256.788);\n --color-slate-600: oklch(0.446 0.043 257.281);\n --color-slate-900: oklch(0.208 0.042 265.755);\n --color-gray-50: oklch(0.985 0.002 247.839);\n --color-gray-100: oklch(0.967 0.003 264.542);\n --color-gray-200: oklch(0.928 0.006 264.531);\n --color-gray-300: oklch(0.872 0.01 258.338);\n --color-gray-400: oklch(0.707 0.022 261.325);\n --color-gray-500: oklch(0.551 0.027 264.364);\n --color-gray-600: oklch(0.446 0.03 256.802);\n --color-gray-700: oklch(0.373 0.034 259.733);\n --color-gray-800: oklch(0.278 0.033 256.848);\n --color-gray-900: oklch(0.21 0.034 264.665);\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-lg: 32rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-sm: 0.25rem;\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --default-transition-duration: 0.15s;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-font-feature-settings: var(--font-sans--font-feature-settings);\n --default-font-variation-settings: var(\n --font-sans--font-variation-settings\n );\n --default-mono-font-family: var(--font-mono);\n --default-mono-font-feature-settings: var(\n --font-mono--font-feature-settings\n );\n --default-mono-font-variation-settings: var(\n --font-mono--font-variation-settings\n );\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(\n --default-font-family,\n ui-sans-serif,\n system-ui,\n sans-serif,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\"\n );\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n line-height: inherit;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(\n --default-mono-font-family,\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n \"Liberation Mono\",\n \"Courier New\",\n monospace\n );\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(\n --default-mono-font-variation-settings,\n normal\n );\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -0.25em;\n }\n\n sup {\n top: -0.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentColor 50%, transparent);\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .sr-only {\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n\n .top-5 {\n top: calc(var(--spacing) * 5);\n }\n\n .right-5 {\n right: calc(var(--spacing) * 5);\n }\n\n .bottom-5 {\n bottom: calc(var(--spacing) * 5);\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .container {\n width: 100%;\n }\n\n @media (width >= 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (width >= 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (width >= 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (width >= 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (width >= 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-8 {\n margin-block: calc(var(--spacing) * 8);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .min-h-screen {\n min-height: 100vh;\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-full {\n width: 100%;\n }\n\n .max-w-lg {\n max-width: var(--container-lg);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-full {\n --tw-translate-x: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .transform {\n transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)\n var(--tw-skew-x) var(--tw-skew-y);\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .list-inside {\n list-style-position: inside;\n }\n\n .list-disc {\n list-style-type: disc;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(\n calc(var(--spacing) * 1) * var(--tw-space-y-reverse)\n );\n margin-block-end: calc(\n calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))\n );\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(\n calc(var(--spacing) * 2) * var(--tw-space-y-reverse)\n );\n margin-block-end: calc(\n calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))\n );\n }\n\n :where(.space-y-4 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(\n calc(var(--spacing) * 4) * var(--tw-space-y-reverse)\n );\n margin-block-end: calc(\n calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))\n );\n }\n\n :where(.space-y-6 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(\n calc(var(--spacing) * 6) * var(--tw-space-y-reverse)\n );\n margin-block-end: calc(\n calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))\n );\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-5 {\n border-top-style: var(--tw-border-style);\n border-top-width: 5px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-blue-400 {\n border-color: var(--color-blue-400);\n }\n\n .border-blue-500 {\n border-color: var(--color-blue-500);\n }\n\n .border-gray-100 {\n border-color: var(--color-gray-100);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-500 {\n border-color: var(--color-green-500);\n }\n\n .border-indigo-500 {\n border-color: var(--color-indigo-500);\n }\n\n .border-red-500 {\n border-color: var(--color-red-500);\n }\n\n .border-yellow-500 {\n border-color: var(--color-yellow-500);\n }\n\n .bg-blue-500\\/10 {\n background-color: color-mix(\n in srgb,\n oklch(0.623 0.214 259.815) 10%,\n transparent\n );\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-blue-500\\/10 {\n background-color: color-mix(\n in oklab,\n var(--color-blue-500) 10%,\n transparent\n );\n }\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-green-500\\/10 {\n background-color: color-mix(\n in srgb,\n oklch(0.723 0.219 149.579) 10%,\n transparent\n );\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-green-500\\/10 {\n background-color: color-mix(\n in oklab,\n var(--color-green-500) 10%,\n transparent\n );\n }\n }\n\n .bg-slate-900\\/75 {\n background-color: color-mix(\n in srgb,\n oklch(0.208 0.042 265.755) 75%,\n transparent\n );\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-slate-900\\/75 {\n background-color: color-mix(\n in oklab,\n var(--color-slate-900) 75%,\n transparent\n );\n }\n }\n\n .bg-slate-900\\/85 {\n background-color: color-mix(\n in srgb,\n oklch(0.208 0.042 265.755) 85%,\n transparent\n );\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-slate-900\\/85 {\n background-color: color-mix(\n in oklab,\n var(--color-slate-900) 85%,\n transparent\n );\n }\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .text-center {\n text-align: center;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-sans {\n font-family: var(--font-sans);\n }\n\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .text-blue-500 {\n color: var(--color-blue-500);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-700 {\n color: var(--color-blue-700);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n\n .text-green-500 {\n color: var(--color-green-500);\n }\n\n .text-indigo-500 {\n color: var(--color-indigo-500);\n }\n\n .text-red-500 {\n color: var(--color-red-500);\n }\n\n .text-red-700 {\n color: var(--color-red-700);\n }\n\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n\n .text-yellow-500 {\n color: var(--color-yellow-500);\n }\n\n .italic {\n font-style: italic;\n }\n\n .shadow-lg {\n --tw-shadow:\n 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(\n --tw-shadow-color,\n #0000001a\n );\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow:\n 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(\n --tw-shadow-color,\n #0000001a\n );\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow:\n 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(\n --tw-shadow-color,\n #0000001a\n );\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(\n --tw-ease,\n var(--default-transition-timing-function)\n );\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(\n --tw-ease,\n var(--default-transition-timing-function)\n );\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(\n --tw-ease,\n var(--default-transition-timing-function)\n );\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .duration-150 {\n --tw-duration: 0.15s;\n transition-duration: 0.15s;\n }\n\n .duration-300 {\n --tw-duration: 0.3s;\n transition-duration: 0.3s;\n }\n\n .duration-400 {\n --tw-duration: 0.4s;\n transition-duration: 0.4s;\n }\n\n .ease-in {\n --tw-ease: var(--ease-in);\n transition-timing-function: var(--ease-in);\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n @media (hover: hover) {\n .hover\\:border-blue-600:hover {\n border-color: var(--color-blue-600);\n }\n\n .hover\\:border-red-600:hover {\n border-color: var(--color-red-600);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-transparent:hover {\n background-color: #0000;\n }\n\n .hover\\:text-blue-700:hover {\n color: var(--color-blue-700);\n }\n\n .hover\\:text-gray-800:hover {\n color: var(--color-gray-800);\n }\n\n .hover\\:text-red-700:hover {\n color: var(--color-red-700);\n }\n\n .hover\\:opacity-60:hover {\n opacity: 0.6;\n }\n\n .hover\\:shadow-none:hover {\n --tw-shadow: 0 0 #0000;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n\n .focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n\n .focus\\:ring-2:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(\n 2px + var(--tw-ring-offset-width)\n ) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n\n .focus\\:ring-blue-500:focus {\n --tw-ring-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: 0.5;\n }\n\n .disabled\\:shadow-none:disabled {\n --tw-shadow: 0 0 #0000;\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n\n @media (width >= 40rem) {\n .sm\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n @media (width >= 48rem) {\n .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (width >= 64rem) {\n .lg\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n .dark\\:border-blue-500:where(.dark, .dark *) {\n border-color: var(--color-blue-500);\n }\n\n .dark\\:border-gray-600:where(.dark, .dark *) {\n border-color: var(--color-gray-600);\n }\n\n .dark\\:border-gray-700:where(.dark, .dark *) {\n border-color: var(--color-gray-700);\n }\n\n .dark\\:bg-gray-700:where(.dark, .dark *) {\n background-color: var(--color-gray-700);\n }\n\n .dark\\:bg-gray-800:where(.dark, .dark *) {\n background-color: var(--color-gray-800);\n }\n\n .dark\\:bg-gray-900:where(.dark, .dark *) {\n background-color: var(--color-gray-900);\n }\n\n .dark\\:text-blue-400:where(.dark, .dark *) {\n color: var(--color-blue-400);\n }\n\n .dark\\:text-gray-100:where(.dark, .dark *) {\n color: var(--color-gray-100);\n }\n\n .dark\\:text-gray-300:where(.dark, .dark *) {\n color: var(--color-gray-300);\n }\n\n .dark\\:text-gray-400:where(.dark, .dark *) {\n color: var(--color-gray-400);\n }\n\n .dark\\:text-slate-400:where(.dark, .dark *) {\n color: var(--color-slate-400);\n }\n\n @media (hover: hover) {\n .dark\\:hover\\:bg-gray-700:where(.dark, .dark *):hover {\n background-color: var(--color-gray-700);\n }\n\n .dark\\:hover\\:text-gray-200:where(.dark, .dark *):hover {\n color: var(--color-gray-200);\n }\n }\n}\n\n::-webkit-scrollbar {\n background: #f7f7f8;\n width: 8px;\n height: 8px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #ebecee;\n border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #d7d9dc;\n}\n\n.dark ::-webkit-scrollbar {\n background: #192033;\n width: 8px;\n height: 8px;\n}\n\n.dark ::-webkit-scrollbar-corner {\n background: #192033;\n}\n\n.dark ::-webkit-scrollbar-thumb {\n background: #272e40;\n border-radius: 10px;\n}\n\n.dark ::-webkit-scrollbar-thumb:hover {\n background: #3f4555;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: rotateX(0);\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: rotateY(0);\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: rotateZ(0);\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n initial-value: skewX(0);\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n initial-value: skewY(0);\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-shadow-alpha {\n syntax: \"\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-ring-offset-width {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false;\n}",[],[186,284],[186],{"_104":293,"_95":294,"_158":295,"_160":-5,"_161":140,"_162":163,"_164":22,"_106":296,"_100":32,"_167":261,"_169":297,"_170":22,"_171":-5,"_172":298,"_98":299},"87d9bf9e-5d78-11f0-87ea-0224a6c84d84","README.md","b296eaf4-5c75-43f8-a6be-75b53a36e7f4",["D",1752143270430],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the top-right.\n\n## How it works\n\n- The **entrypoint** is [`/backend/index.ts`](/backend/index.ts). That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest reading the files in this order: \n\n[`/backend/index.ts`](/backend/index.ts) -> [`/frontend/index.html`](/frontend/index.html) -> [`/frontend/index.tsx`](/frontend/index.tsx) -> [`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a bigger example project, with a SQLite database table, queries, client-side CSS, a favicon, and shared code that runs on both client and server.",[],[294],"files",[156,174,184,190,196,207,217,227,236,245,256,265,274,282,292],"counts",{"_304":32,"_305":163,"_306":163,"_307":32},"pulls","branches","forks","envVars","contents",[310],{"_104":175,"_95":176,"_158":177,"_160":159,"_161":140,"_162":163,"_164":165,"_106":311,"_100":32,"_167":179,"_169":180,"_170":22,"_171":-5,"_98":312},["D",1752143270430],[99,176],{"_104":157,"_95":99,"_158":159,"_160":-5,"_161":140,"_162":163,"_164":165,"_106":314,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_98":315},["D",1752143270430],[99],"upstreamProject",{"_104":148,"_95":318,"_112":319,"_114":-5,"_110":111,"_23":320},"reactHonoStarter","Starter template with client-side React & Hono server",{"_93":321,"_132":322},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","upstreamBranch",{"_104":143,"_106":325,"_326":327,"_95":43,"_141":148,"_100":328,"_142":-5,"_144":-5,"_329":330,"_108":-5,"_153":22,"_110":111,"_152":321,"_16":150,"_151":318},["D",1740674013689],"updatedAt",["D",1755284984205],72,"lockfileKey","1755284987385-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":337,"_154":342,"_300":388,"_261":389,"_308":391,"_394":395,"_398":22,"_399":-5,"_400":401,"_402":286,"_403":404},{"_104":105,"_95":96,"_106":338,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":115,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":339,"_134":340,"_137":341,"_153":22},["D",1752143270430],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":43,"_104":140,"_141":105,"_142":143,"_144":145,"_146":111,"_147":148,"_149":150,"_151":96,"_152":94},[343,349,385],{"_104":157,"_95":99,"_158":159,"_160":-5,"_161":140,"_162":163,"_164":165,"_106":166,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":344,"_98":348},[345],{"_104":175,"_95":176,"_158":177,"_160":159,"_161":140,"_162":163,"_164":165,"_106":178,"_100":32,"_167":179,"_169":180,"_170":22,"_171":-5,"_172":346,"_98":347},[],[99,176],[99],{"_104":185,"_95":186,"_158":187,"_160":-5,"_161":140,"_162":163,"_164":165,"_106":188,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":350,"_98":384},[351,372,375,378,381],{"_104":191,"_95":192,"_158":193,"_160":187,"_161":140,"_162":163,"_164":22,"_106":194,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":352,"_98":371},[353,356,359,362,365,368],{"_104":197,"_95":198,"_158":199,"_160":193,"_161":140,"_162":200,"_164":22,"_106":201,"_100":202,"_167":203,"_169":204,"_170":22,"_171":-5,"_172":354,"_98":355},[],[186,192,198],{"_104":208,"_95":209,"_158":210,"_160":193,"_161":140,"_162":211,"_164":22,"_106":212,"_100":213,"_167":203,"_169":214,"_170":22,"_171":-5,"_172":357,"_98":358},[],[186,192,209],{"_104":218,"_95":219,"_158":220,"_160":193,"_161":140,"_162":221,"_164":22,"_106":222,"_100":223,"_167":203,"_169":224,"_170":22,"_171":-5,"_172":360,"_98":361},[],[186,192,219],{"_104":228,"_95":229,"_158":230,"_160":193,"_161":140,"_162":231,"_164":22,"_106":232,"_100":223,"_167":203,"_169":233,"_170":22,"_171":-5,"_172":363,"_98":364},[],[186,192,229],{"_104":237,"_95":238,"_158":239,"_160":193,"_161":140,"_162":240,"_164":22,"_106":241,"_100":223,"_167":203,"_169":242,"_170":22,"_171":-5,"_172":366,"_98":367},[],[186,192,238],{"_104":246,"_95":247,"_158":248,"_160":193,"_161":140,"_162":249,"_164":22,"_106":250,"_100":251,"_167":203,"_169":252,"_170":22,"_171":-5,"_172":369,"_98":370},[],[186,192,247],[186,192],{"_104":257,"_95":258,"_158":259,"_160":187,"_161":140,"_162":163,"_164":165,"_106":260,"_100":32,"_167":261,"_169":262,"_170":22,"_171":-5,"_172":373,"_98":374},[],[186,258],{"_104":266,"_95":267,"_158":268,"_160":187,"_161":140,"_162":269,"_164":22,"_106":270,"_100":163,"_167":261,"_169":271,"_170":22,"_171":-5,"_172":376,"_98":377},[],[186,267],{"_104":275,"_95":276,"_158":277,"_160":187,"_161":140,"_162":101,"_164":165,"_106":278,"_100":213,"_167":203,"_169":279,"_170":22,"_171":-5,"_172":379,"_98":380},[],[186,276],{"_104":283,"_95":284,"_158":285,"_160":187,"_161":140,"_162":286,"_164":22,"_106":287,"_100":163,"_167":261,"_169":288,"_170":22,"_171":-5,"_172":382,"_98":383},[],[186,284],[186],{"_104":293,"_95":294,"_158":295,"_160":-5,"_161":140,"_162":163,"_164":22,"_106":296,"_100":32,"_167":261,"_169":297,"_170":22,"_171":-5,"_172":386,"_98":387},[],[294],[343,345,349,351,353,356,359,362,365,368,372,375,378,381,385],{"_104":157,"_95":99,"_158":159,"_160":-5,"_161":140,"_162":163,"_164":165,"_106":314,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_98":390},[99],[392],{"_104":175,"_95":176,"_158":177,"_160":159,"_161":140,"_162":163,"_164":165,"_106":311,"_100":32,"_167":179,"_169":180,"_170":22,"_171":-5,"_98":393},[99,176],"upstream",{"_104":143,"_106":396,"_326":397,"_95":43,"_141":148,"_100":328,"_142":-5,"_144":-5,"_329":330,"_108":-5,"_153":22,"_110":111,"_152":321,"_16":150,"_151":318},["D",1740674013689],["D",1755284984205],"showCompareCallout","pull","ahead",262,"behind","templates",[],"actionData","errors"]

n4k0m3

Tickets